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

@include tools.layer('components')
  .v-tab
    @include tools.layer('overrides')
      height: var(--v-tabs-height)
      border-radius: $tab-border-radius
      min-width: $tab-min-width

    .v-slide-group--horizontal &
      max-width: $tab-max-width

    .v-slide-group--vertical &
      justify-content: start

  .v-tab__slider
    position: absolute
    bottom: 0
    left: 0
    height: $tab-slider-size
    width: 100%
    background: currentColor
    pointer-events: none
    opacity: 0

    .v-tab--selected &
      opacity: 1

    .v-slide-group--vertical &
      top: 0
      height: 100%
      width: $tab-slider-size

@include tools.layer('trumps')
  @media (forced-colors: active)
    .v-tab
      &--selected.v-btn
        color: highlight

      &__slider
        background: highlight