@use '../style/base' as *;

@include bem(tabs) {
  @include b() {
    @include universal;
    flex-direction: row;
  }
  @include e(scroll) {
    @include universal;
    width: 100%;
    flex: 1;
  }

  @include e(container) {
    @include universal;
    flex-direction: row;
  }

  @include e(wrapper) {
    @include universal;
    flex-direction: row;
    flex-wrap: nowrap;
    min-width: 100%;
    flex: none;
  }

  @include e(line) {
    @include universal;
    position: absolute;
    bottom: 0;
    z-index: 10;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    width: var(--sar-tabs-line-width);
    height: var(--sar-tabs-line-height);
    background: var(--sar-tabs-line-bg);
    line-height: 1;
    pointer-events: none;
    transform: translateX(-50%);
    transition: left var(--sar-tabs-line-transition-duration);
  }
}