@use 'sass:math'
@use 'sass:map'
@use '../../styles/settings'
@use '../../styles/tools'
@use './variables' as *

@include tools.layer('components')
  .v-tabs
    display: flex
    height: var(--v-tabs-height)

    @at-root
      @include tools.density('v-tabs', $tabs-density) using ($modifier)
        --v-tabs-height: #{$tabs-height + $modifier}

        &.v-tabs--stacked
          --v-tabs-height: #{$tabs-stacked-height + $modifier}

    &.v-slide-group--vertical
      height: auto
      flex: none
      --v-tabs-height: #{$tabs-height}

  .v-tabs--align-tabs-title:not(.v-slide-group--has-affixes)
    .v-tab:first-child
      margin-inline-start: $tab-align-tabs-title-margin

  .v-tabs--fixed-tabs,
  .v-tabs--align-tabs-center
    .v-slide-group__content > *:last-child
      margin-inline-end: auto

    .v-slide-group__content > *:first-child
      margin-inline-start: auto

  .v-tabs--grow
    flex-grow: 1

    .v-tab
      flex: 1 0 auto
      max-width: none

  .v-tabs--align-tabs-end
    .v-tab:first-child
      margin-inline-start: auto

    .v-tab:last-child
      margin-inline-end: 0

  .v-tabs--inset
    --v-tabs-inset-radius: #{$tab-inset-radius}
    --v-tabs-inset-padding: #{$tab-inset-padding}
    --v-tabs-slider-background: rgba(var(--v-theme-on-surface), .2)

    background: tools.theme-color('on-surface', 0.06)
    box-shadow: inset 0 0 0 2px rgba(var(--v-border-color), var(--v-border-opacity))
    border-radius: calc(var(--v-tabs-inset-radius) + var(--v-tabs-inset-padding))

    .v-tab
      margin: var(--v-tabs-inset-padding)
      transition-property: box-shadow, transform, opacity, background, color

      &.v-tab.v-btn
        border-radius: var(--v-tabs-inset-radius)

      &:focus-visible
        outline: 2px solid rgb(var(--v-border-color))
        outline-offset: 2px

        &:after
          opacity: 0

    &:not(.v-tabs--fixed-tabs, .v-tabs--grow)
      max-width: max-content

    &.v-tabs--fixed-tabs .v-slide-group__content
      padding-inline: var(--v-tabs-inset-padding)

    .v-tab__slider
      background: var(--v-tabs-slider-background)
      inset: 0
      border-radius: var(--v-tabs-inset-radius)
      z-index: -1
      width: auto

    &.v-tabs--horizontal
      height: calc(var(--v-tabs-height) + var(--v-tabs-inset-padding) * 2)
      --v-tabs-inset-tab-radius: calc(var(--v-tabs-outer-radius) - var(--v-tabs-inset-padding) + 4px)

    &.v-tabs--horizontal .v-tab__slider
      height: auto

    .v-btn__overlay
      display: none

    &.v-tabs--vertical .v-tab
      grid-template-columns: max-content 1fr max-content
      > .v-btn__content
        justify-content: start

      .v-tab__slider
        width: auto

  @media #{map.get(settings.$display-breakpoints, 'md-and-down')}
    .v-tabs.v-slide-group--is-overflowing.v-slide-group--horizontal:not(.v-slide-group--has-affixes)
      .v-tab:first-child
        margin-inline-start: 52px
      .v-tab:last-child
        margin-inline-end: 52px