@mixin tabs-horizontal($direction) {
  flex-direction: column;

  &.#{$rd-prefix}tabs--center {
    @include e(tab) {
      @include m(first) {
        margin-left: auto;
      }

      @include m(last) {
        margin-right: auto;
      }
    }
  }

  &:not(.#{$rd-prefix}tabs--slider) {
    @include e(button) {
      @include m(add) {
        @if $direction == top {
          border-bottom-color: transparent;
        } @else {
          border-top-color: transparent;
        }
      }
    }
  }

  @include e(tabpanel) {
    @if $direction == top {
      margin-top: 20px;
    } @else {
      margin-bottom: 20px;
    }
  }

  @include e(tablist-wrapper) {
    width: 100%;
    overflow: auto hidden;

    @if $direction == top {
      padding-bottom: 2px;
    } @else {
      padding-top: 2px;
    }
  }

  @include e(tablist) {
    min-width: 100%;

    & > * + *:not(.#{$rd-prefix}tabs__indicator) {
      margin-left: var(--#{$rd-prefix}tabs-tab-gap);
    }

    &::after {
      left: 0;
      width: 100%;
      height: 1px;

      @if $direction == top {
        bottom: -1px;
      } @else {
        top: -1px;
      }
    }
  }

  @include e(indicator) {
    left: 0;
    width: 0;
    height: 2px;
    transition: left var(--#{$rd-prefix}animation-duration-slow) linear, opacity var(--#{$rd-prefix}animation-duration-base) linear,
      width var(--#{$rd-prefix}animation-duration-base) linear;

    @if $direction == top {
      bottom: -2px;
    } @else {
      top: -2px;
    }
  }
  @include e(slider-indicator) {
    left: 0;
    width: 0;
    height: 100%;
    transition: left var(--#{$rd-prefix}animation-duration-slow) linear, opacity var(--#{$rd-prefix}animation-duration-base) linear,
      width var(--#{$rd-prefix}animation-duration-base) linear;
  }
  @include e(wrap-indicator) {
    left: 0;
    width: 0;
    height: calc(100% + 1px);
    transition: left var(--#{$rd-prefix}animation-duration-slow) linear, opacity var(--#{$rd-prefix}animation-duration-base) linear,
      width var(--#{$rd-prefix}animation-duration-base) linear;

    @if $direction == top {
      top: 0;
      border-bottom: none;
      border-radius: var(--#{$rd-prefix}border-radius) var(--#{$rd-prefix}border-radius) 0 0;
    } @else {
      bottom: 0;
      border-top: none;
      border-radius: 0 0 var(--#{$rd-prefix}border-radius) var(--#{$rd-prefix}border-radius);
    }
  }

  @include e(button-container) {
    right: 0;
  }

  @include e(button) {
    width: 52px;
    height: var(--#{$rd-prefix}tabs-tab-size);

    @include m(more) {
      box-shadow: -3px 0 8px -2px var(--#{$rd-prefix}shadow-color);

      @include when(end) {
        border-left-color: var(--#{$rd-prefix}background-color-indicator);
      }
    }
  }
}

@mixin tabs-vertical($direction) {
  flex-direction: row;

  &.#{$rd-prefix}tabs--center {
    @include e(tab) {
      @include m(first) {
        margin-top: auto;
      }

      @include m(last) {
        margin-bottom: auto;
      }
    }
  }

  @include e(tabpanel) {
    flex-grow: 1;
    overflow: hidden;

    @if $direction == left {
      margin-left: 20px;
    } @else {
      margin-right: 20px;
    }
  }

  @include e(tab) {
    padding: 0 var(--#{$rd-prefix}tabs-tab-padding);

    @if $direction == left {
      justify-content: flex-end;
    } @else {
      justify-content: flex-start;
    }
  }

  @include e(button) {
    @include m(add) {
      border-right-color: transparent;
      border-left-color: transparent;
    }
  }

  @include e(tablist-wrapper) {
    flex-shrink: 0;
    overflow: hidden auto;

    @if $direction == left {
      padding-right: 2px;
    } @else {
      padding-left: 2px;
    }
  }

  @include e(tablist) {
    flex-direction: column;

    &::after {
      top: 0;
      width: 1px;
      height: 100%;

      @if $direction == left {
        right: -1px;
      } @else {
        left: -1px;
      }
    }
  }

  @include e(indicator) {
    top: 0;
    width: 2px;
    height: var(--#{$rd-prefix}tabs-tab-size);
    transition: top var(--#{$rd-prefix}animation-duration-slow) linear, opacity var(--#{$rd-prefix}animation-duration-base) linear;

    @if $direction == left {
      right: -2px;
    } @else {
      left: -2px;
    }
  }

  @include e(slider-indicator) {
    top: 0;
    width: 100%;
    height: var(--#{$rd-prefix}tabs-tab-size);
    transition: top var(--#{$rd-prefix}animation-duration-slow) linear, opacity var(--#{$rd-prefix}animation-duration-base) linear;
  }

  @include e(wrap-indicator) {
    top: 0;
    width: calc(100% + 1px);
    height: var(--#{$rd-prefix}tabs-tab-size);
    transition: top var(--#{$rd-prefix}animation-duration-slow) linear, opacity var(--#{$rd-prefix}animation-duration-base) linear;

    @if $direction == left {
      left: 0;
      border-right: none;
      border-radius: 0 var(--#{$rd-prefix}border-radius) var(--#{$rd-prefix}border-radius) 0;
    } @else {
      right: 0;
      border-left: none;
      border-radius: var(--#{$rd-prefix}border-radius) 0 0 var(--#{$rd-prefix}border-radius);
    }
  }

  @include e(button-container) {
    bottom: 0;
    flex-direction: column;
    width: 100%;
  }

  @include e(button) {
    width: 100%;
    height: 36px;

    @include m(more) {
      box-shadow: 0 -3px 8px -2px var(--#{$rd-prefix}shadow-color);
      @include when(end) {
        border-top-color: var(--#{$rd-prefix}background-color-indicator);
      }
    }
  }
}

@include b(tabs) {
  $selector: &;

  --#{$rd-prefix}tabs-tab-size: 44px;
  --#{$rd-prefix}tabs-slider-tab-size: 36px;
  --#{$rd-prefix}tabs-tab-padding: 16px;

  position: relative;
  display: flex;

  &:not(.#{$rd-prefix}tabs--slider):not(.#{$rd-prefix}tabs--wrap) {
    --#{$rd-prefix}tabs-tab-gap: 32px;
  }

  @include m(top) {
    @include tabs-horizontal(top);
  }

  @include m(bottom) {
    @include tabs-horizontal(bottom);
  }

  @include m(left) {
    @include tabs-vertical(left);
  }

  @include m(right) {
    @include tabs-vertical(right);
  }

  @include m(smaller) {
    --#{$rd-prefix}tabs-tab-size: 36px;
    --#{$rd-prefix}tabs-slider-tab-size: 32px;
    --#{$rd-prefix}tabs-tab-padding: 12px;

    @include font-size(0.9rem);

    &:not(.#{$rd-prefix}tabs--slider):not(.#{$rd-prefix}tabs--wrap) {
      --#{$rd-prefix}tabs-tab-gap: 20px;
    }
  }

  @include m(larger) {
    --#{$rd-prefix}tabs-tab-size: 52px;
    --#{$rd-prefix}tabs-slider-tab-size: 44px;
    --#{$rd-prefix}tabs-tab-padding: 20px;

    @include font-size(1.15rem);

    &:not(.#{$rd-prefix}tabs--slider):not(.#{$rd-prefix}tabs--wrap) {
      --#{$rd-prefix}tabs-tab-gap: 36px;
    }
  }

  @include m(slider) {
    --#{$rd-prefix}tabs-tab-size: var(--#{$rd-prefix}tabs-slider-tab-size);
    --#{$rd-prefix}tabs-tab-gap: 0;

    &#{$selector}--top,
    &#{$selector}--bottom {
      @include e(tab) {
        padding: 0 var(--#{$rd-prefix}tabs-tab-padding);
      }
    }

    @include e(tablist-wrapper) {
      padding: 0;
      border-radius: var(--#{$rd-prefix}border-radius);
    }

    @include e(tablist) {
      min-width: unset;
      background-color: var(--#{$rd-prefix}tabs-background-color-slider);

      &::after {
        content: none;
      }
    }
  }

  @include m(wrap) {
    --#{$rd-prefix}tabs-tab-gap: 0;

    &#{$selector}--top,
    &#{$selector}--bottom {
      @include e(tab) {
        padding: 0 var(--#{$rd-prefix}tabs-tab-padding);
      }
    }
  }

  @include e(tablist-wrapper) {
    position: relative;
  }

  @include e(tablist) {
    position: relative;
    display: inline-flex;

    &::after {
      position: absolute;
      content: '';
      background-color: var(--#{$rd-prefix}background-color-indicator);
    }
  }

  @include e(indicator) {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background-color: var(--#{$rd-prefix}color-primary);
    opacity: 0;
  }

  @include e(button-container) {
    position: sticky;
    z-index: 6;
    display: flex;
    flex-wrap: nowrap;
  }

  @include e(button) {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: var(--#{$rd-prefix}background-color);
    transition: color var(--#{$rd-prefix}animation-duration-base) linear;

    &:hover,
    &:focus {
      color: var(--#{$rd-prefix}color-primary-lighter);
    }

    &:active {
      color: var(--#{$rd-prefix}color-primary-darker);
    }

    @include when(disabled) {
      color: var(--#{$rd-prefix}color-disabled);
      pointer-events: none;
    }

    @include m(add) {
      border: 1px solid var(--#{$rd-prefix}background-color-indicator);
    }

    @include m(more) {
      border: 1px solid transparent;
      transition: color var(--#{$rd-prefix}animation-duration-base) linear, box-shadow var(--#{$rd-prefix}animation-duration-base) linear;

      @include when(end) {
        box-shadow: none;
      }
    }
  }

  @include e(slider-indicator) {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    opacity: 0;

    &::after {
      position: absolute;
      top: 3px;
      right: 3px;
      bottom: 3px;
      left: 3px;
      content: '';
      background-color: var(--#{$rd-prefix}background-color);
      border-radius: var(--#{$rd-prefix}border-radius);
      box-shadow: 0 2px 4px 0 var(--#{$rd-prefix}shadow-color);
    }
  }

  @include e(wrap-indicator) {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background-color: var(--#{$rd-prefix}background-color-light-gray);
    border: 1px solid var(--#{$rd-prefix}background-color-indicator);
    opacity: 0;
  }

  @include e(dropdown-item) {
    @include when(active) {
      color: var(--#{$rd-prefix}color-primary);
    }
  }

  @include e(tab) {
    position: relative;
    z-index: 5;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    height: var(--#{$rd-prefix}tabs-tab-size);
    cursor: pointer;
    transition: color var(--#{$rd-prefix}animation-duration-base) linear;

    &:focus,
    &:hover {
      color: var(--#{$rd-prefix}color-primary-lighter);
    }

    @include when(active) {
      color: var(--#{$rd-prefix}color-primary);
    }

    @include when(disabled) {
      pointer-events: none;
      filter: opacity(50%);
    }
  }

  @include e(close) {
    margin: 0 0 0 4px;
    transition: color var(--#{$rd-prefix}animation-duration-base) linear;

    &:hover,
    &:focus {
      color: var(--#{$rd-prefix}color-primary-lighter);
    }

    &:active {
      color: var(--#{$rd-prefix}color-primary-darker);
    }
  }

  @include e(tabpanel) {
    outline: none;
  }
}