@import '../../common/basic.less';

@left_width_xm: 120px;
@left_width_md: 140px;
@left_width: 160px;
@search_width_xm: 172px;
@search_width_md: 210px;
@search_width: 258px;

.username{
  .ant-menu-sub{
    min-width: 80px!important;
  }
}
.env-select-wrap{
  @media screen and (max-width: @screen-xm) {
    .ant-select-dropdown-menu-item{
      padding-left: 15px;
    }
  }
  @media screen and (min-width: (@screen-xm + 1)) and (max-width: @screen-md) {
    .ant-select-dropdown-menu-item{
      padding-left: 30px;
    }
  }
  @media screen and (min-width: (@screen-md + 1)) {
    .ant-select-dropdown-menu-item{
      padding-left: 44px;
    }
  }
}
.env-col{
  width: @left_width;
  height: @header_height;
  .env-text{
    box-sizing: border-box;
    padding-left: 20px;
    line-height: @header_height;
    border-right: 1px solid @border_color;
    cursor: pointer;
    font-size: 12px;
    &:hover{
      color: @font_primary_color;
    }
  }
  .env-menu{
    width: @left_width;
    height: @header_height;
    border-right: 1px solid @border_color;
    padding: 0 20px;
  }
  .env-select{
    width: @left_width;
    height: @header_height;
    // border-right: 1px solid @border_color;
    font-size: 16px;
    vertical-align: top;
    outline: none;
    .ant-select-selection{
      height: @header_height - 1;
      line-height: @header_height;
      border: none;
      vertical-align: middle;
      .ant-select-selection-selected-value{
        height: @header_height - 1;
        line-height: @header_height;
        padding-left: 33px;
      }
    }
  }
  @media screen and (max-width: @screen-xm) {
    width: @left_width_xm;
    height: @header_height_xm;
    .env-select{
      width: @left_width_xm;
      height: @header_height_xm;
      font-size: 12px;
      .ant-select-selection{
        height: @header_height_xm - 1;
        line-height: @header_height_xm;
        .ant-select-selection-selected-value{
          height: @header_height_xm - 1;
          line-height: @header_height_xm;
          padding-left: 4px;
        }
      }
    }
  }
  @media screen and (min-width: (@screen-xm + 1)) and (max-width: @screen-md) {
    width: @left_width_md;
    height: @header_height_md;
    .env-select{
      width: @left_width_md;
      height: @header_height_md;
      font-size: 14px;
      .ant-select-selection{
        height: @header_height_md - 1;
        line-height: @header_height_md;
        .ant-select-selection-selected-value{
          height: @header_height_md - 1;
          line-height: @header_height_md;
          padding-left: 19px;
        }
      }
    }
  }
  @media screen and (min-width: (@screen-md + 1)) {
    width: @left_width;
    height: @header_height;
    .env-select{
      width: @left_width;
      height: @header_height;
      font-size: 16px;
      .ant-select-selection{
        height: @header_height - 1;
        line-height: @header_height;
        .ant-select-selection-selected-value{
          height: @header_height - 1;
          line-height: @header_height;
          padding-left: 33px;
        }
      }
    }
  }
}
.right-col{
  position: absolute;
  right: 0;
  top: 0;
  left: @left_width;
  height: @header_height;
  min-width: 410px;
  .search-wrap{
    width: @search_width + 24;
    float: right;
    padding-right: 24px;
    height: 100%;
    line-height: @header_height;
    display: flex;
    align-items: center;
    .search{
      float: right;
      border: none;
      .ant-input {
        height: 40px;
        background-color: #f3f5f6;
        border-radius: 20px;
        font-size: 16px;
        padding-left: 50px;
        border: none;
      }
      .ant-input-suffix {
        left: 18px;
        font-size: 18px;
        width: 18px;
        color: @font_color;
      }
    }
  }
  .icon-item-wrap{
    position: relative;
    width: 54px;
    margin-right: 12px;
    float: right;
    height: 100%;
    line-height: @header_height;
    text-align: center;
    cursor: pointer;
    &:hover{
      background-color: #eee;
    }
    &.active{
      background-color: #eee;
    }
    &.no-margin{
      margin-right: 0;
    }
    .tip{
      position: absolute;
      min-width: 14px;
      text-align: center;
      height: 20px;
      line-height: 14px;
      display: inline-block;
      right: 2px;
      top: 8px;
      background: red;
      color: #fff;
      border-radius: 17px;
      padding: 3px 6px;
      font-size: 16px;
      transform: scale(.7);
      font-style: normal;
    }
  }
  .header-menu {
    float: right;
    border: 0;
    .ant-menu-item {
      margin: 0 auto;
      height: @header_height - 1;
      border: 0;
      font-size: 12px;
      border-left: 1px solid @border_color;
      .moria-icon{
        margin-right: .1rem;
        font-size: 14px;
      }
      &:hover, &:hover .moria-icon {
        color: @primary_color;
      }
    }
    .username {
      height: @header_height;
      line-height: @header_height - 1;
      color: @font_primary_color;
      .text-wrap{
        display: flex;
      }
      .name-text{
        font-size: 16px;
        color: @main_font_color;
        margin-right: 24px;
      }
      .iconfont{
        font-size: 22px;
      }
      .ant-menu-submenu-title{
        padding-right: 40px;
      }
      .ant-menu-item{
        width: 80px;
        &.ant-menu-item-selected{
          background-color: @white_color;
        }
      }
    }
  }
  @media screen and (max-width: @screen-xm) {
    left: @left_width_xm;
    height: @header_height_xm;
    .search-wrap{
      width: @search_width_xm + 24;
      padding-right: 24px;
      line-height: @header_height_xm;
      .search{
        .ant-input {
          height: 30px;
          border-radius: 15px;
          font-size: 12px;
          padding-left: 34px;
          padding-right: 15px;
        }
        .ant-input-suffix {
          left: 14px;
          font-size: 14px;
          width: 14px;
        }
      }
    }
    .icon-item-wrap{
      width: 42px;
      line-height: @header_height_xm;
      .tip{
        min-width: 14px;
        height: 20px;
        line-height: 14px;
        right: 2px;
        top: 8px;
        border-radius: 17px;
        padding: 3px 6px;
        font-size: 16px;
      }
    }
    .header-menu{
      .ant-menu-item {
        height: @header_height_xm - 1;
      }
      .username{
        height: @header_height_xm;
        line-height: @header_height_xm - 1;
        .name-text{
          font-size: 12px;
          margin-right: 14px;
        }
        .iconfont{
          font-size: 16px;
        }
        .ant-menu-submenu-title{
          padding-right: 26px;
        }
      }
    }
  }
  @media screen and (min-width: (@screen-xm + 1)) and (max-width: @screen-md) {
    left: @left_width_md;
    height: @header_height_md;
    .search-wrap{
      width: @search_width_md + 24;
      padding-right: 24px;
      line-height: @header_height_md;
      .search{
        .ant-input {
          height: 36px;
          border-radius: 18px;
          font-size: 14px;
          padding-left: 42px;
          padding-right: 22px;
        }
        .ant-input-suffix {
          left: 16px;
          font-size: 16px;
          width: 16px;
        }
      }
    }
    .icon-item-wrap{
      width: 48px;
      line-height: @header_height_md;
      .tip{
        min-width: 14px;
        height: 20px;
        line-height: 14px;
        right: 2px;
        top: 8px;
        border-radius: 17px;
        padding: 3px 6px;
        font-size: 16px;
      }
    }
    .header-menu{
      .ant-menu-item {
        height: @header_height_md - 1;
      }
      .username{
        height: @header_height_md;
        line-height: @header_height_md - 1;
        .name-text{
          font-size: 14px;
          margin-right: 18px;
        }
        .iconfont{
          font-size: 18px;
        }
        .ant-menu-submenu-title{
          padding-right: 34px;
        }
      }
    }
  }
  @media screen and (min-width: (@screen-md + 1)) {
    left: @left_width;
    height: @header_height;
    .search-wrap{
      width: @search_width + 24;
      padding-right: 24px;
      line-height: @header_height;
      .search{
        .ant-input {
          height: 40px;
          border-radius: 20px;
          font-size: 16px;
          padding-left: 50px;
          padding-right: 30px;
        }
        .ant-input-suffix {
          left: 18px;
          font-size: 18px;
          width: 18px;
        }
      }
    }
    .icon-item-wrap{
      width: 54px;
      line-height: @header_height;
      .tip{
        min-width: 16px;
        height: 24px;
        line-height: 16px;
        right: 5px;
        top: 16px;
        border-radius: 20px;
        padding: 4px 8px;
        font-size: 16px;
      }
    }
    .header-menu{
      .ant-menu-item {
        height: @header_height - 1;
      }
      .username{
        height: @header_height;
        line-height: @header_height - 1;
        .name-text{
          font-size: 16px;
          margin-right: 24px;
        }
        .iconfont{
          font-size: 18px;
        }
        .ant-menu-submenu-title{
          padding-right: 40px;
        }
      }
    }
  }
}