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

.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

@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