@import '../scss/init.scss';

.tabs {
  &_nav {
    display: flex;
    padding-left: $s_gutter;

    &_item {
      height: $s_touchable;
      min-width: 72px;
      @include center;
      padding-left: 12px;
      padding-right: 12px;
      position: relative;
      cursor: pointer;
      @include clipText;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: transparent;
      }

      @at-root &.is_active::after {
        background: $c_accent;
      }
    }
  }
}

.tabs--scrollable {
  .tabs_nav {
    @include allowScroll('x');

    &_item {
      flex-shrink: 0;
    }
  }
}

.tabs--leftPadding {
  .tabs_nav {
    padding-left: 60px;
  }
}

.tabs--fixed {
  .tabs_nav {
    overflow: hidden;
    padding-left: 0;
  }

  .tabs_nav_item {
    flex: 1;
  }
}

// work with flat appBar
.tabs--navShadow {
  .tabs_nav {
    @include depth(4);
  }
}

.tabs--navBorder {
  .tabs_nav {
    border-bottom: 1px solid $c_divider_black;
  }
}

.tabs--compact {
  .tabs_nav_item {
    font-size: $s_font_caption;
    height: unset;
    padding-top: $s_gutter / 2;
    padding-bottom: $s_gutter / 2;
  }
}