@import '~antd/es/style/themes/default.less';
@import '../global.less';
@global-header-prefix-cls: ~'@{ant-prefix}-pro-global-header';

@pro-header-bg        : @component-background;
@pro-header-hover-bg  : @component-background;
@pro-header-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

.@{global-header-prefix-cls} {
  position   : relative;
  display    : flex;
  align-items: center;
  height     : @layout-header-height!important;
  padding    : 0;
  background : @pro-header-bg;
  box-shadow : @pro-header-box-shadow;

  &-logo {
    display       : inline-flex;
    align-items   : center;
    height        : @layout-header-height;
    padding       : 0 0 0 24px;
    font-size     : 20px;
    line-height   : @layout-header-height;
    vertical-align: top;
    cursor        : pointer;

    img {
      display       : inline-block;
      height        : 32px;
      vertical-align: middle;
    }
  }

  &-radiusIcon {
    height  : 42px;
    width   : 42px;
    position: absolute;
    left    : 0;
    top     : 0;
    user-select: none;
    img {
      width   : 100%;
      height  : 100%;
      position: absolute;
      left    : 0;
      top     : 0; 
    }
  }


  @media only screen and (max-width: @screen-md) {

    // 上面一句媒体查询，通常在style.less中已存在。
    // 在手机端中我们不需要显示圆角icon
    &-radiusIcon {
      display: none;
    }
  }

  &-menu {
    .anticon {
      margin-right: 8px;
    }

    .ant-dropdown-menu-item {
      min-width: 160px;
    }
  }

  &-trigger {
    height    : @layout-header-height;
    padding   : 0 24px;
    font-size : 20px;
    cursor    : pointer;
    transition: all 0.3s, padding 0s;

    &:hover {
      background: @pro-header-hover-bg;
    }
  }

  .dark {
    height: @layout-header-height;

    .action {
      color: rgba(255, 255, 255, 0.85);

      >i {
        color: rgba(255, 255, 255, 0.85);
      }

      &:hover,
      &.opened {
        background: @primary-color;
      }

      .ant-badge {
        color: rgba(255, 255, 255, 0.85);
      }
    }
  }
}