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

@font-face {
  font-family: 'xl-admin-iconfont'; /* project id 2315925 */
  src: url('//at.alicdn.com/t/font_2315925_dtowa05v5y.eot');
  src: url('//at.alicdn.com/t/font_2315925_dtowa05v5y.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_2315925_dtowa05v5y.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_2315925_dtowa05v5y.woff') format('woff'),
    url('//at.alicdn.com/t/font_2315925_dtowa05v5y.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_2315925_dtowa05v5y.svg#xl-admin-iconfont') format('svg');
}
@font-face {
  font-family: 'recruit-admin-iconfont'; /* project id 2315882 */
  src: url('//at.alicdn.com/t/font_2315882_98v2lxxridt.eot');
  src: url('//at.alicdn.com/t/font_2315882_98v2lxxridt.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_2315882_98v2lxxridt.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_2315882_98v2lxxridt.woff') format('woff'),
    url('//at.alicdn.com/t/font_2315882_98v2lxxridt.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_2315882_98v2lxxridt.svg#recruit-admin-iconfont') format('svg');
}
@font-face {
  font-family: 'dd-admin-iconfont'; /* project id 2315927 */
  src: url('//at.alicdn.com/t/font_2315927_bfarzstjr16.eot');
  src: url('//at.alicdn.com/t/font_2315927_bfarzstjr16.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_2315927_bfarzstjr16.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_2315927_bfarzstjr16.woff') format('woff'),
    url('//at.alicdn.com/t/font_2315927_bfarzstjr16.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_2315927_bfarzstjr16.svg#dd-admin-iconfont') format('svg');
}

@menuItem-backgroundColor: #f7f7f7;
@xladmin-theme-prefix-cls: ~'@{xui-prefix}__xladmin-theme-layout';
@xladmin-theme-prefix-cls--content--nav--verticalMenu: ~'@{xui-prefix}__xladmin-theme-layout--content--nav--verticalMenu';
@xladmin-theme-prefix-cls--verticalPopupMenu: ~'@{xui-prefix}__xladmin-theme-layout--verticalPopupMenu';
@xladmin-theme-prefix-cls--headerPopover: ~'@{xui-prefix}__xladmin-theme-layout--headerPopover';
@xladmin-theme-prefix-cls--userPopover: ~'@{xui-prefix}__xladmin-theme-layout--userPopover';

.icon-xl-admin {
  font-family: 'xl-admin-iconfont';
  font-style: normal;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-recruit-admin {
  font-family: 'recruit-admin-iconfont';
  font-style: normal;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-dd-admin {
  font-family: 'dd-admin-iconfont';
  font-style: normal;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.@{xladmin-theme-prefix-cls} {
  min-width: 1280px;
  height: 100vh;
  background-color: #fff;
  &--header {
    position: fixed;
    z-index: 20;
    display: flex;
    width: 100%;
    height: 64px;
    color: #fff;
    background-color: @primary-color;

    &--download {
      line-height: 64px;
      cursor: pointer;
    }

    a {
      color: #fff;
    }

    &--logo {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100%;
      padding: 0 15px 0 25px;
      color: #fff;
      font-size: 20px;
      background-color: @primary-color;

      &::after {
        position: absolute;
        top: 12px;
        right: 0;
        width: 1px;
        height: 40px;
        background-color: #fff;
        opacity: 0.2;
        content: '';
      }

      &--popover {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      &--logoImg {
        width: auto;
        height: 40px;
      }

      &--arrow {
        margin-left: 10px;
        font-size: 12px;
      }

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

    &--navHead {
      display: flex;
      flex: 1;
      padding-left: 5px;

      &--item {
        min-width: 122px;
        height: 64px;
        padding: 0 23px;
        line-height: 64px;
        text-align: center;
        cursor: pointer;
      }

      &--itemActive {
        position: relative;

        &::after {
          position: absolute;
          bottom: 15px;
          left: 50%;
          width: 40px;
          height: 2px;
          background-color: #fff;
          border-radius: 2px;
          transform: translateX(-50%);
          content: '';
        }
      }
    }

    &--user {
      display: flex;
      align-items: center;
      padding: 0 25px;
      cursor: default;

      &--info {
        display: flex;
        align-items: center;
        &--name {
          margin-left: 12px;
        }
        &--icon {
          transform: rotate(180deg);
        }

        .iconfont {
          margin-left: 6px;
          font-size: 12px;
        }
      }
    }
  }

  &--content {
    display: flex;
    flex: auto;
    height: 100%;
    padding: 74px 10px 10px;
    background-color: #f1f1f1;
    &--nav {
      position: relative;
      flex: 0 0 212px;
      margin-right: 10px;
      padding-top: 10px;
      background-color: #fff;

      &--switch {
        position: absolute;
        top: 50%;
        right: -1px;
        width: 18px;
        height: 60px;
        overflow: hidden;
        transform: translateY(-70px);
        cursor: pointer;
        .iconfont {
          position: absolute;
          top: -16px;
          left: -21px;
          color: @primary-color;
          font-size: 60px;
        }
      }

      .@{xladmin-theme-prefix-cls--content--nav--verticalMenu} {
        overflow: hidden;
        border: none;
        &Title {
          display: flex;
        }

        .iconfont {
          // margin-right: 20px;
          font-size: 18px;
        }

        .ant-menu-submenu {
          padding-bottom: 0;

          .ant-menu-submenu-title {
            margin: 0;
            padding-right: 11px;
            padding-left: 17px !important;

            .ant-menu-submenu-arrow {
              right: 11px;
            }

            &:hover {
              background-color: @menu-item-active-bg;
            }
          }

          .ant-menu-item {
            margin: 0;
            padding-right: 11px;
            padding-left: 53px !important;

            &:hover {
              background-color: @menu-item-active-bg;
            }
          }
        }

        .ant-menu-submenu-vertical {
          .ant-menu-submenu-arrow {
            display: none;
          }
        }

        .ant-menu-submenu-vertical.ant-menu-submenu-selected {
          background-color: @menu-item-active-bg;
        }

        .ant-menu-item {
          margin: 0 !important;
          padding-right: 11px;
          padding-left: 8px !important;
          transition: color 0s, border-color 0s, background 0s, padding 0s;

          &:hover {
            background-color: @menu-item-active-bg;
          }

          &::after {
            transition: transform 0s, opacity 0s;
          }
        }

        .ant-menu-item-selected {
          &::after {
            right: 210px;
            transform: scaleY(1);
            opacity: 1;
            transition: transform 0s, opacity 0s;
          }
        }
      }
    }

    &--navRetracted {
      max-width: 56px;

      .@{xladmin-theme-prefix-cls--content--nav--verticalMenu} {
        .ant-menu-item-selected {
          &::after {
            right: 53px;
          }
        }
      }
    }

    &--main {
      position: relative;
      display: flex;
      flex: auto;
      flex-direction: column;
      padding: 20px 20px 14px;
      overflow-x: hidden;
      background-color: #fff;
    }
  }
}

.@{xladmin-theme-prefix-cls--verticalPopupMenu} {
  width: 180px;

  &--title {
    display: flex;
  }

  &--icon {
    display: flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin-right: 8px;
  }

  .ant-menu {
    border-radius: 0;

    .ant-menu-submenu {
      padding-bottom: 0;

      .ant-menu-submenu-title {
        margin: 0;
        padding-right: 11px;
        padding-left: 17px !important;

        .ant-menu-submenu-arrow {
          right: 11px;
        }

        &:hover {
          background-color: @menu-item-active-bg;
        }
      }
    }

    .ant-menu-item {
      margin: 0;

      &:hover {
        background-color: @menu-item-active-bg;
      }
    }

    .ant-menu-item-selected {
      &::after {
        right: 209px;
        border-right: 3px solid @primary-color !important;
        transform: scaleY(1);
        opacity: 1;
        transition: transform 0s, opacity 0s;
      }
    }
  }
}

.@{xladmin-theme-prefix-cls--headerPopover} {
  padding-top: 0 !important;
  .ant-popover-content {
    .ant-popover-arrow {
      top: -4px !important;
      margin-left: 40px;
    }
  }
  .ant-popover-inner-content {
    padding: 0;
  }
  &--content {
    overflow: hidden;
    &--list {
      float: left;
      width: 200px;
      height: 160px;
      overflow: auto;
      border-radius: 4px;
      box-shadow: -2px 0 6px 0 rgba(215, 215, 215, 0.5);
      &--item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 40px;
        padding: 0 10px 0 20px;
        cursor: pointer;
        &--text {
          max-width: 154px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        &:hover {
          color: @primary-color;
        }
        .iconfont {
          color: #ccc;
        }
      }
      &--itemSelected {
        color: @primary-color;
        background-color: @menuItem-backgroundColor;
      }
    }
    &--listFirst {
      box-shadow: none;
    }
  }
}

.@{xladmin-theme-prefix-cls--userPopover} {
  .ant-popover-inner-content {
    padding: 0;
  }
  &--content {
    width: 280px;
    color: #666;
    &--info {
      position: relative;
      display: flex;
      align-items: center;
      height: 66px;
      font-size: 16px;
      &::after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #e6e6e6;
        content: '';
      }
      .ant-avatar {
        margin: 0 10px 0 20px;
      }
    }
    &--row {
      display: flex;
      align-items: center;
      height: 40px;
      color: #666;
      cursor: pointer;
      img {
        width: 16px;
        height: 18px;
        margin: 0 20px;
      }
      &:hover {
        color: @primary-color;
        background-color: @menuItem-backgroundColor;
      }

      .iconfont {
        margin-left: 150px;
        color: #ccc;
      }
    }
    &--rowLast {
      position: relative;
      img {
        width: 14px;
        height: 16px;
      }
      &::after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #e6e6e6;
        content: '';
      }
    }

    &--rolePopover {
      .ant-popover-inner-content {
        padding: 0;
        .ant-menu {
          width: 200px;
          .ant-menu-item {
            margin: 0;
            &:hover {
              color: @primary-color;
            }
          }
          .ant-menu-item-selected {
            background-color: @menuItem-backgroundColor;
            &::after {
              display: none;
            }
          }
        }
      }
    }
  }
}