@import "../Style/mixin";

.lm-ui-navbar {
  // common
  background-color: #fff;
  li {
    position: relative;
    text-align: center;
    &:active {
      background-color: #ededed;
    }
  }
  a {
    font-size: 14px;
    color: #333;
    padding: 13px 6px;
    border-bottom: 2px solid transparent;
    display: inline-block;
    position: relative;
    z-index: 20;
  }
  .active {
    a {
      color: #ff552e;
      border-bottom-color: #ff552e;
    }
  }

  // normal navbar
  &-box {
    position: relative;
    width: 100%;
    overflow: auto;
    background: #fff;
    @include hairline(single, #e6e6e6, 0);

    &::-webkit-scrollbar {
      display: none;
    }
  }

  // multi navbar
  &-multi {
    .lm-ui-navbar li:after {
      position: absolute;
      left: -6px;
      right: 0;
      bottom: 0;
      height: 1px;
      background-color: #e6e6e6;
      content: '';
      transform: scaleY(0.5);
    }
  }

  // tabs <= 4 even
  &-equal {
    display: flex;
    li {
      flex: 1;
    }
  }

  // tabs > 4
  &-nowrap {
    padding: 0 6px;
    font-size: 0;
    white-space: nowrap;
    li {
      display: inline-block;
      padding: 0 8px;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  // content
  &-content {
    background: #fff;
  }
}