@import "../core/index-noreset.scss";
@import "scss/variable";

#{$tab-prefix}[dir='rtl'] {
  &.#{$css-prefix}medium {
    & #{$tab-prefix}-nav-container-scrolling {
      padding-left: $tab-nav-scroll-padding-right-m;
      padding-right: 0;
    }
    .#{$css-prefix}tabs-tab-close {
      padding-right: $tab-nav-close-icon-padding-l-size-m;
      padding-left: 0;
    }
  }
  &.#{$css-prefix}small {
    & #{$tab-prefix}-nav-container-scrolling {
      padding-left: $tab-nav-scroll-padding-right-s;
      padding-right: 0;
    }
    .#{$css-prefix}tabs-tab-close {
      padding-right: $tab-nav-close-icon-padding-l-size-s;
      padding-left: 0;
    }
  }
  &#{$tab-prefix}-wrapped#{$tab-prefix}-top > #{$tab-prefix}-bar {
    #{$tab-prefix}-nav-extra {
      right: auto;
      left: 0;
    }
  }

  &#{$tab-prefix}-wrapped#{$tab-prefix}-bottom > #{$tab-prefix}-bar {
    #{$tab-prefix}-nav-extra {
      right: auto;
      left: 0;
    }
  }

  & > #{$tab-prefix}-bar {
    #{$tab-prefix}-nav-extra {
      right: auto;
      left: 0;
    }
  }

  &#{$tab-prefix}-capsule > #{$tab-prefix}-bar {
    #{$tab-prefix}-tab {
      border-top: $tab-capsule-tab-border;
      border-bottom: $tab-capsule-tab-border;
      border-right: $tab-capsule-tab-border;
      border-left: 0;
      &:first-child {
        border-left: 0;
        border-radius: 0 $tab-capsule-corner-radius $tab-capsule-corner-radius 0;
      }

      &:last-child {
        border-radius: $tab-capsule-corner-radius 0 0 $tab-capsule-corner-radius;
        border-left: $tab-capsule-tab-border;
      }

      &.active {
        margin-left: -$tab-capsule-tab-border-line-width;
        margin-right: auto;
        border-left: $tab-capsule-tab-border;
        border-color: $tab-capsule-tab-border-line-color-active;
      }
    }
  }

  #{$tab-prefix}-btn-next {
    left: $tab-nav-arrow-right-positon-right;
    right: auto;
  }
  #{$tab-prefix}-btn-prev {
    left: $tab-nav-arrow-left-positon-right;
    right: auto;
  }
  #{$tab-prefix}-btn-down {
    left: $tab-nav-arrow-down-positon-right;
    right: auto;
  }
}
#{$tab-prefix}-text[dir='rtl'] > #{$tab-prefix}-bar {
  #{$tab-prefix}-tab {
    &:not(:last-child):after {
      content: '';
      position: absolute;
      left: 0;
      right: auto;
    }
  }
}