@import url('~antd/es/style/themes/default.less');
@import url('../style/var.less');

@loading-prefix-cls: ~'@{style-prefix}-head-anchor';

.@{loading-prefix-cls} {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  width: 100%;
  height: 46px;
  padding: 0 @padding-md;
  padding-bottom: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  line-height: 46px;
  background: @white;
  border: 1px solid #e9e9e9;

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

  &-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 46px;
    margin-right: 32px;

    & > a {
      height: 42px;
      color: rgba(0, 0, 0, 0.85);
      line-height: 46px;
      text-wrap: nowrap;
    }

    &-bar {
      display: none;
      width: 28px;
      height: 2px;
      background: @primary-color;
    }

    &:hover,
    &-active {
      &-bar {
        display: block;
      }

      & > a {
        color: @primary-color;
      }
    }
  }
}