@use '../style/common/var' as *;
@use '../style/mixins/mixins' as *;
@use '../style/mixins/_var' as *;
@use '../style/mixins/function' as *;

.pagoda-layout-v2-header {
  position: absolute;
  top: 0;
  left: 60px;
  right: 0;
  z-index: 97;
  display: flex;
  flex-wrap: nowrap;
  height: getCssVar('layout-v2', 'header-height');
  font-size: 14px;
  line-height: getCssVar('layout-v2', 'header-height');
  background: #fff;
  border-bottom: 1px solid #dfe6ee;
  box-shadow: 0 0 10px 0 rgba(128, 145, 165, 0.2);

  &-title {
    margin-right: 10px;
    width: 220px;
    height: 100%;
  }

  &-menu {
    display: flex;
    flex: 1;
    height: 100%;

    li {
      padding: 0 5px;
      margin: 0 10px;
      display: inline-block;
      height: 100%;
      font-size: 14px;
      color: #3f4a56;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      box-sizing: border-box;

      &:hover,
      &.active {
        color: var(--el-color-primary);
        border-bottom-color: var(--el-color-primary);
      }
    }
  }
}