//@import '~ant-design-vue/es/style/themes/default.less';
@import '../../style/index.less';
//@import '../../layout.less';

@pro-layout-global-header-prefix-cls: ~'@{pro-layout-prefix-cls}-header';

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

.@{pro-layout-global-header-prefix-cls} {
  //border: 1px red dashed;

  position: relative;

  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 16px;
  //background: @pro-layout-header-bg;
  //background: transparent;
  box-shadow: @pro-layout-header-box-shadow;

  > * {
    height: 100%;
  }

  .left {
    //border: 1px red dashed;
    position: relative;
    //overflow: hidden;
    display: flex;
    align-items: center;

    .collapsed-button {
      //position: a;
      //left: -16px;
      cursor: pointer;
      //border: 1px red dashed;
      display: flex;
      height: 100%;
      min-width: 48px;
      justify-content: center;
      align-items: center;
      //margin-left: 16px;
      font-size: 18px;
    }

    .breadcrumb {
      //border: 1px red dashed;
      height: 80%;
      min-width: 100px;
    }

    .logo-container {
      padding: 0;
      justify-content: flex-start;
      height: 80%;
    }
  }


  .main {
    flex: 1 1 0;
    overflow: auto;

    .menu {
      display: flex;
      align-items: center;
      height: 100%;

      .@{iconfont-css-prefix} {
        margin-right: 8px;
      }

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

  .right {
    //border: 1px darkgreen dashed;
    //display: flex;
    .action {
      &:hover {
        cursor: pointer;
        //color: @primary-color;
        //background: @primary-color;
      }
    }
  }

  &.dark {
    color: fadeout(@pro-layout-header-bg, 35%);
    color: fadeout(@pro-layout-header-bg, 0%);
  }

  //.dark {
  //  //height: @pro-layout-header-height;
  //  .action {
  //    background: @primary-color;
  //    color: rgba(255, 255, 255, 0.85);
  //    > i {
  //      color: rgba(255, 255, 255, 0.85);
  //    }
  //    &:hover,
  //    &.opened {
  //      background: @primary-color;
  //    }
  //    .@{ant-prefix}-badge {
  //      color: rgba(255, 255, 255, 0.85);
  //    }
  //  }
  //}

  //&-layout {
  //  &-mix {
  //    background-color: @layout-sider-background;
  //    .@{pro-layout-global-header-prefix-cls}-logo {
  //      h1 {
  //        color: @btn-primary-color;
  //      }
  //    }
  //    .anticon {
  //      color: @btn-primary-color;
  //    }
  //  }
  //}
}

.@{menu-prefix-cls} {
  &-item,
  &-submenu {
    &-divider {
      //@text-color-dark: fade(@white, 85%);
      //border: 1px red dashed;
      margin: 2px 12px !important;
      //background: @layout-header-background !important;
      background: @text-color-dark !important;
      //background: @dec !important;
      //height: 20px !important;
      //padding: 8px;
    }
  }
}