@import './var.less';

.@{prefix}-tab {
  overflow-x: hidden;
  font-size: 16px;

  &__nav-wrap {
    display: flex;
    align-items: center;
    // background-color: var(--background-white);
    // padding: 17px 0;
    user-select: none;
  }

  &__nav {
    display: flex;
    padding: 0 8px;
    will-change: transform;

    &:not(&_scrollable) {
      justify-content: space-around;
      padding: 0;
      width: 100%;

      &::after {
        content: '';
      }

      &::before {
        content: '';
      }
    }
  }

  &__item {
    display: flex;
    align-items: center;
    height: 22px;
    line-height: 22px;
    color: var(--text-primary);
    margin: 0 13px;
    white-space: nowrap;
    position: relative;


    &.on {
      font-weight: bold;
      color: var(--brand-standard);
      border-bottom: 2px solid var(--brand-standard);
      padding-bottom: 6px;
    }
  }

  &__content {
    display: flex;
    will-change: transform;
  }

  &__panel {
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
  }
}