@use '../../styles/tools'
@use './variables' as *

.v-system-bar
  align-items: center
  display: flex
  flex: $system-bar-flex
  height: $system-bar-height
  justify-content: $system-bar-justify-content
  max-width: 100%
  padding-inline-start: $system-bar-padding-x
  padding-inline-end: $system-bar-padding-x
  position: relative
  text-align: $system-bar-text-align
  width: 100%

  .v-icon
    opacity: $system-bar-icon-opacity

  @include tools.elevation($system-bar-elevation)
  @include tools.position($system-bar-positions)
  @include tools.theme($system-bar-theme...)
  @include tools.typography($system-bar-typography...)

  &--rounded
    @include tools.rounded($system-bar-border-radius)

  &--window
    height: $system-bar-window-height

  &:not(.v-system-bar--absolute)
    padding-inline-end: calc(var(--v-scrollbar-offset) + #{$system-bar-padding-x})