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

.v-bottom-navigation
  display: flex
  max-width: 100%
  overflow: hidden
  position: absolute
  transition: $bottom-navigation-transition

  @include tools.border($bottom-navigation-border...)
  @include tools.rounded($bottom-navigation-border-radius)
  @include tools.theme($bottom-navigation-theme...)

  &--active
    @include tools.elevation($bottom-navigation-elevation)

.v-bottom-navigation__content
  display: flex
  flex: none
  font-size: $bottom-navigation-content-font-size
  justify-content: center
  transition: inherit
  width: 100%

  .v-bottom-navigation &
    > .v-btn
      font-size: inherit
      height: $bottom-navigation-height
      max-width: $bottom-navigation-max-width
      min-width: $bottom-navigation-min-width
      text-transform: $bottom-navigation-text-transform
      transition: inherit
      width: auto

      @include tools.rounded(0)

      .v-btn__content,
      .v-btn__icon
        transition: inherit

      .v-btn__icon
        font-size: $bottom-navigation-icon-font-size

  .v-bottom-navigation--grow &
    > .v-btn
      flex-grow: 1

  .v-bottom-navigation--shift &
    .v-btn
      &:not(.v-btn--selected)
        .v-btn__content > span
          opacity: 0

        .v-btn__content
          transform: $bottom-navigation-shift-icon-transform