@import '../../style/global.less';

.@{prefix}-navTab {
  display: flex;

  &-item {
    display: flex;
    padding: 18px 8px;
    height: @navbar-height;
    box-sizing: border-box;
    align-items: center;

    &-link {
      padding: 0 8px;
      height: 24px;
      line-height: 24px;
      border-radius: 2px;
      color: var(--color-text-1);
      position: relative;
      font-weight: 500;
      cursor: pointer;
      text-decoration: none;

      &:hover {
        color: var(--color-text-1);
      }

      svg {
        font-size: 12px;
        stroke-width: 6px;
        vertical-align: -1px;
        color: var(--color-text-1);
        margin: 0 4px;
        transition: all 0.2s;
      }

      &:focus-visible {
        .aria-focus();
      }
    }
  }

  &-item-active {
    .@{prefix}-navTab-item-link {
      background-color: var(--color-fill-2);

      svg {
        transform: rotate(180deg);
      }
    }
  }

  &-container {
    width: 100vw;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 998;
    background-color: var(--color-bg-2);
    overflow: hidden;
  }
}