@import '../bootstrap'
@import '../theme'

/* Theme */
tabs__bar($material)
  background-color: $material.cards

  .tabs__div
    color: $material.tabs.active

  .tabs__item--disabled
    color: $material.buttons.disabled

theme(tabs__bar, "tabs__bar")

.tabs
  position: relative

.tabs__bar
  position: relative

.tabs__icon
  align-items: center
  cursor: pointer
  display: inline-flex
  height: 100%
  position: absolute
  top: 0
  user-select: none
  width: 32px

  &--prev
    left: 4px

  &--next
    right: 4px

.tabs__wrapper
  overflow: hidden
  contain: content
  display: flex

  &--show-arrows
    margin-left: 40px
    margin-right: 40px

    .tabs__container--align-with-title
      padding-left: 16px

      @media $display-breakpoints.xs-only
        padding-left: 24px

.tabs__container
  flex: 1 0 auto
  display: flex
  height: 48px
  list-style-type: none
  transition: transform 0.6s cubic-bezier(0.86, 0, 0.07, 1)
  white-space: nowrap
  position: relative

  &--overflow
    .tabs__div
      flex: 1 0 auto

  &--grow
    .tabs__div
      flex: 1 0 auto
      max-width: none

  &--icons-and-text
    height: 72px

  &--align-with-title
    padding-left: 56px

    @media $display-breakpoints.xs-only
      padding-left: 64px

  &--fixed-tabs,
  &--icons-and-text,
  &--centered
    .tabs__div
      min-width: 72px

      @media $display-breakpoints.sm-and-up
          min-width: 160px

  &--fixed-tabs
    .tabs__div
      @media $display-breakpoints.xs-only
        flex: 1 0 auto

  &--centered,
  &--fixed-tabs,
  &--right
    > .tabs__div:first-child
      margin-left: auto

    .tabs__slider-wrapper + .tabs__div
      margin-left: auto

  &--centered,
  &--fixed-tabs
    > .tabs__div:last-child
      margin-right: auto

  &--icons-and-text
    .tabs__item
      flex-direction: column-reverse

      .icon
        margin-bottom: 6px

.tabs__div
  align-items: center
  display: inline-flex
  flex: 0 1 auto
  font-size: 14px
  font-weight: 500
  line-height: normal
  height: inherit
  max-width: 264px
  text-align: center
  text-transform: $tab-text-transform
  vertical-align: middle

.tabs__item
  align-items: center
  color: inherit
  display: flex
  flex: 1 1
  flex-basis: 264px
  height: 100%
  justify-content: center
  max-width: inherit
  padding: 6px 12px
  text-decoration: none
  transition: $primary-transition
  user-select: none
  white-space: normal

  &:not(.tabs__item--active)
    opacity: .7

  &--disabled
    pointer-events: none

.tabs__slider
  height: 2px
  width: 100%

  &-wrapper
    bottom: 0
    margin: 0 !important
    position: absolute
    transition: $primary-transition

.tabs__items
  overflow: hidden
  position: relative

.tabs__content
  width: 100%
  transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1)