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

@include tools.layer('components')
  .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: $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})