@import '../../style/themes/index';
@import '../../style/mixins/index';

@min-height-header: 72px;
@header-z-index: 10000;

@header-prefix-cls: ~'@{ant-prefix}-header-msb';
@space-item-prefix-cls: ~'@{ant-prefix}-space-item';
@menu-item-prefix-cls: ~'@{ant-prefix}-menu';
@header-drawer-prefix-cls: ~'@{ant-prefix}-drawer';

.@{header-prefix-cls} {
  &-fixed {
    position: fixed;
  }

  top: 0;
  left: 0;
  z-index: @zindex-header;
  width: 100vw;
  box-shadow: @shadows-bottom[s];

  &-menus {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    ul {
      border-bottom: none;
    }

    .@{menu-item-prefix-cls} {
      &-title-content,
      &-item-group-title {
        font-size: @base-small-size-v2;
      }
    }
  }

  &-menu-items {
    flex: 1;
    justify-content: end;

    .@{menu-item-prefix-cls} {
      &-title-content,
      &-item-group-title {
        font-size: @base-small-size-v2;
      }
    }
  }

  .logo {
    img {
      height: 24px;
    }
  }

  &-avatar {
    &-divider {
      border-color: @color-gray-400;
    }
  }

  &-mobile {
    .@{header-drawer-prefix-cls} {
      &-body {
        padding: 0;
      }
    }

    .@{header-prefix-cls}-menu-items {
      .@{menu-item-prefix-cls} {
        &-submenu {
          .anticon.anticon-down {
            font-size: 24px;
          }
        }

        &-title-content,
        &-item-group-title {
          font-size: @base-size-v2;
        }
      }
    }

    &-humburger {
      border: none;
    }

    &-avatar {
      background-color: @color-primary-25;
    }

    &-btn-actions {
      padding: 16px;

      button {
        width: 100%;
        margin-bottom: 16px;
      }
    }
  }
}