@import './abstracts/variable';
@import './abstracts/mixin';

@include b(anchor) {
  position: relative;
  background: $-anchor-nav-bg;

  @include e(nav) {
    position: relative;
    height: $-anchor-nav-height;
    overflow: hidden;
    background: $-anchor-nav-bg;

    @include halfPixelBorder;
  }
  @include e(nav-container) {
    position: relative;
    display: flex;
    box-sizing: content-box;
    padding-bottom: 15px;
    overflow: hidden;
    user-select: none;
  }
  @include e(nav-item) {
    flex: 1;
    min-width: 0;
    text-align: center;
    height: $-anchor-nav-height;
    line-height: $-anchor-nav-height;
    font-size: $-anchor-nav-fs;
    color: $-anchor-nav-color;
    transition: color .3s;
    -webkit-tap-highlight-color: transparent;

    @include when(active) {
      font-weight: 500;
    }
  }
  @include e(line) {
    position: absolute;
    bottom: 20px;
    left: 0;
    height: $-anchor-nav-line-height;
    background: $-anchor-nav-line-bg-color;
    z-index: 1;
    border-radius: $-anchor-nav-line-height / 2;
  }
  @include e(container) {
    position: relative;
    overflow: hidden;
  }
  @include e(body) {
    display: flex;
    width: 100%;
    height: 100%;
  }
  @include when(slide) {
    .wd-anchor__nav-container {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .wd-anchor__nav-item {
      color: $-anchor-nav-color;
      flex: 0 0 auto;
      padding: 0 17px;
    }
  }
}