@import '../../style/index.less';
@import '../../xui-role-menu/style/index.less';

@font-face {
  font-family: 'icon-bpo'; /* project id 764521 */
  src: url('//at.alicdn.com/t/font_764521_abls7180ykn.eot');
  src: url('//at.alicdn.com/t/font_764521_abls7180ykn.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_764521_abls7180ykn.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_764521_abls7180ykn.woff') format('woff'),
    url('//at.alicdn.com/t/font_764521_abls7180ykn.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_764521_abls7180ykn.svg#icon-bpo') format('svg');
}

@navMenuBackgroundColor: #373f4e; // 纵向导航栏背景色
@navMenuBackgroundHoverColor: #4b5569; // 纵向导航栏背景色-hover
@navTextFoucsColor: #00a4ff; // 导航栏文字选中色
@qilin-theme-prefix-cls: ~'@{xui-prefix}__qinlin-theme-layout';
@qilin-theme-prefix-cls--menuBlock: ~'@{xui-prefix}__qinlin-theme-layout--menuBlock';

.iconbpo {
  font-family: 'icon-bpo';
}

.@{qilin-theme-prefix-cls} {
  min-width: 1280px;
  height: 100vh;
  .ant-menu {
    background-color: @navMenuBackgroundColor;
    .ant-menu-submenu-title,
    .ant-menu-item.ant-menu-item-only-child {
      margin: 0;
      padding: 0 40px 0 20px !important;
      background-color: @navMenuBackgroundColor;
      .ant-menu-submenu-arrow {
        right: 36px;
      }
      a {
        color: #ccc;
        &:hover {
          color: #fff;
        }
      }
      &:hover {
        background-color: @navMenuBackgroundColor;
      }
    }
    .ant-menu-item-selected {
      color: @navTextFoucsColor !important;
      background-color: @navMenuBackgroundHoverColor !important;
      a {
        color: @navTextFoucsColor !important;
      }
    }
    .ant-menu-sub.ant-menu-inline {
      margin: 0;
      .ant-menu-item.ant-menu-item-only-child {
        max-width: 220px;
        margin: 0;
        padding: 0 40px 0 50px !important;
        background-color: @btn-primary-bg;
        &:hover {
          color: @navTextFoucsColor;
          background-color: @navMenuBackgroundHoverColor;
          a {
            color: @navTextFoucsColor;
          }
        }
      }
      .ant-menu-item-selected {
        color: @navTextFoucsColor;
        background-color: @navMenuBackgroundHoverColor !important;
        a {
          color: @navTextFoucsColor;
        }
      }
    }
  }
  &--header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    width: 100%;
    height: 60px;
    color: #fff;
    line-height: 60px;
    text-align: center;
    background-color: @btn-primary-bg;
    user-select: none;
    a {
      color: #fff;
    }
    &--company {
      position: relative;
      display: flex;
      flex: 0 0 220px;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      line-height: 1.5715;
      img {
        flex: 0 0 36px;
        height: 36px;
        margin-right: 5px;
        border-radius: 50%;
      }
      &--name {
        max-width: 155px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      &::after {
        position: absolute;
        top: 9px;
        right: 0;
        width: 0;
        height: 40px;
        border-right: solid #1a1a1a 1px;
        content: '';
      }

      &--arrow {
        font-size: 12px;
      }

      &--arrowClicked {
        transform: rotate(180deg);
      }
    }

    &--popover {
      .ant-popover-arrow {
        left: 202.5px !important;
      }
    }

    &--menu {
      display: flex;
      flex: 1;
      &--item {
        position: relative;
        padding: 0 20px;
        cursor: pointer;
        span {
          margin-left: 10px;
          color: #fff;
          font-size: 12px;
        }
        .@{qilin-theme-prefix-cls--menuBlock} {
          position: absolute;
          top: 60px;
          right: 20px;
          z-index: 1;
          display: none;
          width: 140px;
          line-height: 1.5715;
          .menu {
            margin-top: 3px;
            overflow: hidden;
            background-color: @navMenuBackgroundColor;
            border-radius: 3px;
            &--item {
              display: flex;
              align-items: center;
              height: 42px;
              padding-left: 20px;
              &:hover {
                color: @navTextFoucsColor;
                background-color: @navMenuBackgroundHoverColor;
                span {
                  color: @navTextFoucsColor;
                }
              }
            }
          }
        }
        &:hover {
          color: @navTextFoucsColor;
          .@{qilin-theme-prefix-cls--menuBlock} {
            display: block;
          }
        }
      }
      &--itemActive {
        color: @navTextFoucsColor;
      }
    }
    &--down {
      flex: 0 0 36px;
      a {
        color: #ccc;
        font-size: 16px;
      }
      &:hover {
        a {
          color: @navTextFoucsColor;
        }
      }
    }
    &--knowledge {
      flex: 0 0 60px;
      margin-right: 10px;
      &:hover {
        a {
          color: @navTextFoucsColor;
        }
      }
    }
    &--admin {
      position: relative;
      margin-right: 20px;
      cursor: pointer;
      span {
        margin-left: 10px;
        font-size: 12px;
      }
      .@{qilin-theme-prefix-cls--menuBlock} {
        position: absolute;
        top: 60px;
        right: -11px;
        z-index: 1;
        display: none;
        width: 140px;
        line-height: 1.5715;
        .menu {
          margin-top: 3px;
          overflow: hidden;
          background-color: @navMenuBackgroundColor;
          border-radius: 3px;
          &--item {
            display: flex;
            align-items: center;
            height: 40px;
            padding-left: 20px;
            &:hover {
              color: @navTextFoucsColor;
              background-color: @navMenuBackgroundHoverColor;
              span {
                color: @navTextFoucsColor;
              }
            }
            span {
              margin-right: 10px;
              margin-left: 0;
              color: #fff;
              font-size: 16px;
            }
          }
          &--system {
            height: 42px;
            border-top: 1px solid #666;
          }
        }
      }
      &:hover {
        .@{qilin-theme-prefix-cls--menuBlock} {
          display: block;
        }
      }
    }
    &--adminInMenu {
      margin: 0;
      padding: 0 20px;
      .menuItem {
        justify-content: center;
        padding: 0 !important;
      }
    }
  }

  &--body {
    display: flex;
    flex: auto;
    height: 100%;
    padding-top: 60px;
    &--verticalMenu {
      position: relative;
      flex: 0 0 220px;
      padding-bottom: 40px;
      overflow-y: auto;
      color: #fff;
      background-color: #373f4e;
      user-select: none;
      :global {
        .ant-menu.ant-menu-dark.ant-menu-root.ant-menu-inline {
          height: 100%;
          overflow-y: auto;
        }
      }
      &--role {
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 40px;
        color: #b3b3b3;
        background-color: @btn-primary-bg;
        cursor: pointer;
        transition: all 0.3s;
        .iconbpo {
          height: 24px;
          margin-left: 5px;
        }
        &--block {
          margin-bottom: -4px;
          padding: 10px 0;
          background-color: rgb(28, 38, 60);
          &--item {
            height: 36px;
            color: #8d9fc5;
            line-height: 36px;
            text-align: center;
            cursor: pointer;
            &:hover {
              color: #fff;
              background-color: #3e4c68;
            }
          }
        }
      }
      a {
        color: #fff;
      }
      &--subMenu {
        display: flex;
        span {
          margin-right: 15px;
        }
      }
    }
    &--content {
      display: flex;
      flex-direction: column;
      width: 100%;
      padding: 10px;
      overflow-x: hidden;
      background-color: #f5f7f9;
      &--mainBody {
        height: 100%;
        overflow-y: auto;
        background-color: #fff;
      }
    }
  }
}