/** ele admin pro 布局样式 license by http://eleadmin.com */
@import './var.less';

/* header */
.ele-admin-header {
  display: flex;
  align-items: center;
  height: @header-height;
  line-height: @header-height;
  box-shadow: @header-light-shadow;
  background: @component-background;
  z-index: calc(@layout-z-index + 2);
  position: relative;

  // logo
  .ele-admin-logo {
    width: @sidebar-width;
    height: @header-height;
    // line-height: @header-height;
    line-height: 20px;
    box-shadow: @logo-light-shadow;
    background: @component-background;
    transition: @sidebar-transition;
    font-size: @logo-font-size;
    color: @logo-light-color;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    font-weight: 600;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    img {
      width: @logo-size;
      height: @logo-size;

      & + span {
        margin-left: @padding-sm;
      }
    }
  }

  // 面包屑
  .ele-admin-breadcrumb {
    flex-shrink: 0;
  }

  // nav
  .ele-admin-header-nav {
    flex: 1;
    border: none;
    background: none;
    line-height: @header-height;
    overflow: hidden;

    .ant-menu-item,
    .ant-menu-submenu {
      top: auto;
      margin-top: 0;
    }
  }

  // 操作按钮
  .ele-admin-header-tool {
    display: flex;
    flex-shrink: 0;
    padding: 0 @padding-sm;

    .ele-admin-header-tool-item {
      padding: 0 @padding-sm;
      font-size: @font-size-base;
      transition: color .2s, background-color .2s;
      cursor: pointer;

      &:hover {
        background: @header-tool-hover-bg;
      }

      .anticon-menu-fold,
      .anticon-menu-unfold,
      .anticon-more,
      .anticon-bell,
      .anticon-fullscreen,
      .anticon-fullscreen-exit {
        transform: scale(1.15);
      }
    }
  }

  // 用户信息
  .ele-admin-header-avatar {
    display: flex;
    align-items: center;
    position: relative;
    height: 100%;

    .ant-avatar {
      width: @header-avatar-size;
      height: @header-avatar-size;

      & + span {
        padding-left: @padding-xs;
      }
    }
  }
}

/* main */
.ele-admin-main {
  display: flex;
  position: relative;
}

/* 侧边栏 */
.ele-admin-sidebar {
  flex-shrink: 0;
  overflow-x: hidden;
  width: @sidebar-width;
  min-height: calc(100vh - @header-height);
  background: @component-background;
  box-shadow: @sidebar-light-shadow;
  transition: @sidebar-transition;
  z-index: calc(@layout-z-index + 3);
  box-sizing: border-box;
  position: relative;

  .ele-admin-sidebar-menus > .ant-menu {
    border: none;
    background: none;

    .ant-menu-item,
    .ant-menu-submenu-title {
      width: 100%;
    }

    .ant-menu-submenu .ant-menu-sub {
      transition: none;
    }
  }
}

/* 侧边栏一级菜单 */
.ele-admin-sidebar-nav {
  flex-shrink: 0;
  overflow-x: hidden;
  width: @sidebar-nav-width;
  min-height: calc(100vh - @header-height);
  box-shadow: -1px 0 0 @border-color-split inset;
  transition: width @sidebar-transition-anim, left @sidebar-transition-anim, padding @sidebar-transition-anim, box-shadow @sidebar-transition-anim;
  z-index: calc(@layout-z-index + 3);
  background: @component-background;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;

  & > .ele-admin-sidebar-nav-menu {
    flex: auto;
    position: relative;
    box-sizing: border-box;
    padding: @sidebar-nav-padding;
    transition: padding @sidebar-transition-anim;
    overflow-x: hidden;

    & > .ant-menu {
      border: none;
      background: none;
      width: auto;

      & > .ant-menu-item,
      & > .ant-menu-submenu {
        margin: @sidebar-nav-item-margin;
        border-radius: @border-radius-base;
      }

      & > .ant-menu-item {
        transition: color .3s @ease-in-out, background .3s @ease-in-out, margin .3s @ease-in-out;
      }

      & > .ant-menu-submenu {
        transition: margin .3s @ease-in-out;
      }

      & > .ant-menu-submenu > .ant-menu-submenu-title {
        margin: 0;
      }

      & > .ant-menu-item,
      & > .ant-menu-submenu > .ant-menu-submenu-title {
        width: 100%;
        height: auto;
        line-height: 0;
        display: block;
        text-align: center;
        border-radius: @border-radius-base;
        padding: @sidebar-nav-item-padding !important;
        transition: color .3s @ease-in-out, background .3s @ease-in-out, padding .3s @ease-in-out;

        & > .ant-menu-item-icon {
          margin: 0;
          line-height: 0;
          font-size: @sidebar-nav-icon-font-size;
          transition: font-size .3s @ease-in-out;
        }

        & > .ant-menu-title-content {
          margin: 0;
          opacity: 1;
          display: block;
          transition: none;
        }

        & > .ant-menu-title-content > span {
          width: auto;
          height: auto;
          display: block;
          line-height: 1;
          font-size: @sidebar-nav-font-size;
          max-height: @sidebar-nav-font-size;
          margin: @sidebar-nav-item-title-margin;
          transition: transform .3s @ease-in-out, max-height .3s @ease-in-out, margin .3s @ease-in-out, visibility .3s @ease-in-out;
          overflow: hidden;
          white-space: nowrap;
          word-break: break-all;
          text-overflow: ellipsis;
          visibility: visible;
          transform: scale(1);
          max-width: none;
          opacity: 1;
        }

        &:after {
          display: none;
        }
      }

      & > .ant-menu-item:not(.ant-menu-item-selected):not(:active):hover,
      & > .ant-menu-submenu:not(.ant-menu-submenu-selected) > .ant-menu-submenu-title:not(:active):hover {
        background: @header-tool-hover-bg;
      }

      & > .ant-menu-submenu.ant-menu-submenu-selected > .ant-menu-submenu-title {
        background: @item-active-bg;
      }
    }
  }

  .ele-admin-sidebar-nav-tool-item {
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: @text-color;
    font-size: @font-size-lg;
    transition: color .3s @ease-in-out, background .3s @ease-in-out, padding .3s @ease-in-out;
    cursor: pointer;

    &:hover {
      color: @primary-color;
    }
  }
}

.ele-admin-sidebar-nav-menu-pop > .ant-menu {
  margin-left: @sidebar-nav-pop-menu-margin;
}

/* 主体部分 */
.ele-admin-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - @header-height);
  box-sizing: border-box;
  overflow: auto;

  .ele-admin-content {
    flex: auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    .ele-admin-content-view {
      flex: auto;
      box-sizing: border-box;
    }
  }
}

/* 主体的iframe组件 */
.ele-admin-iframe {
  width: 100%;
  height: calc(100vh - @header-height);
  box-sizing: border-box;
  display: block;
}

.ele-admin-show-tabs .ele-admin-iframe {
  height: calc(100vh - @header-height - @tabs-height);
}

/* 多页签 */
.ele-admin-tabs.ant-tabs {
  background: @component-background;
  box-shadow: @header-light-shadow;
  z-index: @layout-z-index;
  position: relative;

  .ant-tabs-bar {
    margin: 0;
    border-bottom: none;

    .ant-tabs-nav-container {
      padding: 0 @tabs-height;
      height: auto;

      .ant-tabs-tab {
        padding: 0;
        background: none;
        height: @tabs-height;
        line-height: @tabs-height;
        transition: background .3s @ease-in-out, color .3s @ease-in-out;
        border-radius: 0;
        border: none;
        margin: 0;

        & > div {
          padding: 0 28px 0 @padding-md;

          &.ant-tabs-tab-unclosable {
            padding-right: @padding-md;
          }
        }

        .ant-tabs-close-x {
          width: auto;
          height: auto;
          margin: -6px 0 0 0;
          position: absolute;
          right: 10px;
          top: 50%;
        }

        &:before {
          display: none;
        }
      }

      .ant-tabs-tab-active {
        background: @item-active-bg;
      }

      .ant-tabs-tab-prev,
      .ant-tabs-tab-next {
        transition: color .3s @ease-in-out, opacity .3s @ease-in-out;
        width: @tabs-height;
        pointer-events: auto;
        line-height: 1;
        opacity: 1;

        .anticon {
          font-size: @font-size-base;
        }
      }

      .ant-tabs-ink-bar {
        display: none !important;
      }
    }
  }

  .ant-tabs-content,
  .ant-tabs-content + div,
  .ant-tabs-bar + div,
  &:before,
  &:after {
    display: none;
  }

  .ant-tabs-nav-container,
  .ant-tabs-nav-wrap {
    margin-bottom: 0;
  }

  .ele-admin-tabs-drop {
    width: @tabs-height;
    height: @tabs-height;
    line-height: @tabs-height;
    text-align: center;
    cursor: pointer;

    .anticon {
      font-size: @font-size-base;
    }
  }
}

/* 开启多页签顶栏阴影处理 */
.ele-admin-show-tabs:not(.ele-admin-tab-card):not(.ele-admin-head-dark) {
  .ele-admin-header {
    box-shadow: @sidebar-width -1px 0 @border-color-split inset;
    transition: padding-left @sidebar-transition-anim, box-shadow @sidebar-transition-anim;
  }

  &.ele-admin-collapse .ele-admin-header {
    box-shadow: @sidebar-collapse-width -1px 0 @border-color-split inset;
  }

  &.ele-admin-side-mix {
    .ele-admin-header {
      box-shadow: @sidebar-nav-width -1px 0 @border-color-split inset;
    }

    &.ele-admin-nav-collapse:not(.ele-admin-logo-auto) .ele-admin-header {
      box-shadow: @sidebar-collapse-width -1px 0 @border-color-split inset;
    }
  }

  &.ele-admin-logo-auto .ele-admin-header {
    box-shadow: 0 -1px 0 @border-color-split inset;
  }
}

/* 折叠侧边栏 */
.ele-admin-collapse {
  .ele-admin-logo > span {
    display: none;
  }

  .ele-admin-logo,
  .ele-admin-sidebar,
  .ele-admin-sidebar .ant-menu-inline-collapsed {
    width: @sidebar-collapse-width;
  }

  .ele-admin-sidebar .ant-menu > .ant-menu-item,
  .ele-admin-sidebar .ant-menu > .ant-menu-submenu > .ant-menu-submenu-title {
    padding: 0 calc(calc(@sidebar-collapse-width - @menu-icon-size-lg) / 2) !important;
  }

  &.ele-admin-side-mix .ele-admin-sidebar-nav {
    box-shadow: @sidebar-light-shadow;

    & + .ele-admin-sidebar {
      width: 0;
    }
  }
}

/* 侧栏双菜单一级折叠状态 */
.ele-admin-nav-collapse.ele-admin-side-mix {
  .ele-admin-logo {
    width: @sidebar-collapse-width;
  }

  .ele-admin-sidebar-nav {
    width: @sidebar-collapse-width;

    & > .ele-admin-sidebar-nav-menu {
      padding: @sidebar-collapse-nav-padding;

      & > .ant-menu {
        & > .ant-menu-item,
        & > .ant-menu-submenu {
          margin: @sidebar-collapse-nav-item-margin;
        }

        & > .ant-menu-item,
        & > .ant-menu-submenu > .ant-menu-submenu-title {
          padding: @sidebar-collapse-nav-item-padding !important;

          & > .ant-menu-item-icon {
            font-size: @menu-icon-size-lg;
          }

          & > .ant-menu-title-content > span {
            margin: 0;
            max-height: 0;
            transform: scale(0);
            visibility: hidden;
          }
        }
      }
    }
  }
}

// 侧边栏双排菜单
.ele-admin-side-mix {
  .ele-admin-logo {
    width: @sidebar-nav-width;

    & > span {
      display: none;
    }
  }

  &:not(.ele-admin-collapse) .ele-admin-logo {
    box-shadow: -1px 0 0 @border-color-split inset;
  }

  .ele-admin-sidebar-nav + .ele-admin-sidebar {
    background: @component-background;
    box-shadow: @sidebar-light-shadow;
    width: calc(@sidebar-width - @sidebar-collapse-width);
    z-index: calc(@layout-z-index + 1);
  }
}

/* 主题风格 */
// 固定顶栏
.ele-admin-fixed-header:not(.ele-admin-fixed-body) {
  padding-top: @header-height;

  .ele-admin-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  &.ele-admin-show-tabs .ele-admin-body {
    padding-top: @tabs-height;
  }

  .ele-admin-tabs {
    position: fixed;
    left: 0;
    right: 0;
    top: @header-height;
    transition: left @sidebar-transition-anim;
  }

  .ele-admin-sidebar + .ele-admin-body .ele-admin-tabs {
    left: @sidebar-width;
  }

  &.ele-admin-collapse .ele-admin-sidebar + .ele-admin-body .ele-admin-tabs {
    left: @sidebar-collapse-width;
  }

  &:not(.ele-admin-fixed-sidebar) .ele-admin-sidebar,
  &:not(.ele-admin-fixed-sidebar) .ele-admin-sidebar-nav {
    z-index: calc(@layout-z-index + 1);
  }

  &:not(.ele-admin-fixed-sidebar):not(.ele-admin-logo-auto):not(.ele-admin-side-dark) .ele-admin-logo {
    box-shadow: 0 -1px 0 @border-color-split inset;
  }

  &:not(.ele-admin-fixed-sidebar):not(.ele-admin-logo-auto):not(.ele-admin-side-dark).ele-admin-head-dark .ele-admin-logo,
  &:not(.ele-admin-fixed-sidebar):not(.ele-admin-logo-auto):not(.ele-admin-side-dark).ele-admin-tab-card .ele-admin-logo,
  &:not(.ele-admin-fixed-sidebar):not(.ele-admin-logo-auto):not(.ele-admin-side-dark):not(.ele-admin-show-tabs) .ele-admin-logo {
    box-shadow: none;
  }

  &.ele-admin-side-mix {
    .ele-admin-sidebar + .ele-admin-body .ele-admin-tabs {
      left: calc(@sidebar-width - @sidebar-collapse-width + @sidebar-nav-width);
    }

    .ele-admin-sidebar-nav + .ele-admin-body .ele-admin-tabs {
      left: @sidebar-nav-width;
    }

    &.ele-admin-nav-collapse {
      .ele-admin-sidebar + .ele-admin-body .ele-admin-tabs {
        left: @sidebar-width;
      }

      .ele-admin-sidebar-nav + .ele-admin-body .ele-admin-tabs {
        left: @sidebar-collapse-width;
      }
    }

    &.ele-admin-collapse {
      .ele-admin-sidebar + .ele-admin-body .ele-admin-tabs {
        left: @sidebar-nav-width;
      }

      &.ele-admin-nav-collapse .ele-admin-sidebar + .ele-admin-body .ele-admin-tabs {
        left: @sidebar-collapse-width;
      }
    }
  }
}

// 固定侧边栏
.ele-admin-fixed-sidebar:not(.ele-admin-fixed-body) {
  .ele-admin-sidebar,
  .ele-admin-sidebar-nav {
    position: fixed;
    left: 0;
    bottom: 0;
    top: @header-height;
  }

  &:not(.ele-admin-fixed-header):not(.ele-admin-logo-auto) .ele-admin-logo {
    position: fixed;
    top: 0;
    left: 0;
  }

  &.ele-admin-logo-auto:not(.ele-admin-fixed-header) .ele-admin-sidebar-nav,
  &.ele-admin-logo-auto:not(.ele-admin-fixed-header):not(.ele-admin-side-mix) .ele-admin-sidebar {
    top: 0;
    z-index: calc(@layout-z-index + 3);
  }

  .ele-admin-header,
  .ele-admin-sidebar + .ele-admin-body,
  .ele-admin-sidebar-nav + .ele-admin-body {
    padding-left: @sidebar-width;
    transition: padding-left @sidebar-transition-anim, box-shadow @sidebar-transition-anim;
  }

  &.ele-admin-collapse {
    .ele-admin-sidebar + .ele-admin-body,
    &:not(.ele-admin-fixed-header):not(.ele-admin-side-mix) .ele-admin-header {
      padding-left: @sidebar-collapse-width;
    }
  }

  &.ele-admin-side-mix {
    .ele-admin-sidebar {
      left: @sidebar-nav-width;
    }

    .ele-admin-header,
    .ele-admin-sidebar + .ele-admin-body,
    .ele-admin-sidebar-nav + .ele-admin-body {
      padding-left: @sidebar-nav-width;
    }

    &:not(.ele-admin-fixed-header) {
      .ele-admin-sidebar {
        position: relative;
        top: auto;
      }
    }

    &.ele-admin-nav-collapse {
      .ele-admin-header,
      .ele-admin-sidebar + .ele-admin-body,
      .ele-admin-sidebar-nav + .ele-admin-body {
        padding-left: @sidebar-collapse-width;
      }

      .ele-admin-sidebar {
        left: @sidebar-collapse-width;
      }
    }
  }

  &.ele-admin-fixed-header {
    .ele-admin-header {
      padding-left: 0;
    }

    &.ele-admin-side-mix {
      .ele-admin-sidebar + .ele-admin-body {
        padding-left: calc(@sidebar-width - @sidebar-collapse-width + @sidebar-nav-width);
      }

      &.ele-admin-collapse {
        .ele-admin-sidebar + .ele-admin-body {
          padding-left: @sidebar-nav-width;
        }
      }

      &.ele-admin-nav-collapse {
        .ele-admin-header {
          padding-left: 0;
        }

        .ele-admin-sidebar {
          left: @sidebar-collapse-width;
        }

        .ele-admin-sidebar + .ele-admin-body {
          padding-left: @sidebar-width;
        }

        &.ele-admin-collapse .ele-admin-sidebar + .ele-admin-body {
          padding-left: @sidebar-collapse-width;
        }
      }
    }
  }
}

// 固定主体
.ele-admin-fixed-body {
  .ele-admin-content {
    height: calc(100vh - @header-height);
    overflow: auto;
  }

  .ele-admin-sidebar,
  .ele-admin-sidebar-nav {
    height: calc(100vh - @header-height);
  }

  &.ele-admin-show-tabs {
    .ele-admin-content {
      height: calc(100vh - @header-height - @tabs-height);
    }

    &.ele-admin-tab-card .ele-admin-content {
      height: calc(100vh - @header-height - @tabs-height - @tabs-card-padding);
    }
  }
}

// 全屏内容区域
.ele-admin-body-fullscreen {
  padding-top: 0 !important;

  .ele-admin-header,
  .ele-admin-sidebar,
  .ele-admin-sidebar-nav {
    display: none;
  }

  .ele-admin-body {
    min-height: 100vh;
    padding-left: 0 !important;
  }

  .ele-admin-tabs {
    left: 0 !important;
    top: 0 !important;
  }

  &.ele-admin-fixed-body {
    .ele-admin-content {
      height: 100vh !important;
    }

    &.ele-admin-show-tabs:not(.ele-admin-content-fullscreen) {
      .ele-admin-content {
        height: calc(100vh - @tabs-height) !important;
      }

      &.ele-admin-tab-card .ele-admin-content {
        height: calc(100vh - @tabs-height - @tabs-card-padding) !important;
      }
    }
  }

  &.ele-admin-content-fullscreen {
    .ele-admin-body {
      padding-top: 0 !important;
    }

    .ele-admin-tabs {
      display: none;
    }
  }
}

// 主体内容定宽
.ele-admin-body-limit .ele-body {
  max-width: @body-limit-width;
  margin: 0 auto;
}

// logo宽度自适应
.ele-admin-logo-auto.ele-admin-layout {
  .ele-admin-logo {
    width: auto;
    color: @logo-light-color;
    padding: 0 @padding-sm 0 @padding-lg;
    background: none;
    box-shadow: none;

    & > span {
      display: inline;
    }

    & + .ele-admin-header-nav {
      margin-left: @padding-sm;
    }
  }

  .ele-admin-sidebar,
  .ele-admin-sidebar-nav {
    z-index: calc(@layout-z-index + 1);
  }

  &.ele-admin-head-dark .ele-admin-logo {
    color: @logo-dark-color;
  }
}

// 暗色顶栏
.ele-admin-head-dark .ele-admin-header {
  color: @menu-dark-color;
  box-shadow: @header-dark-shadow;
  background: @layout-sider-background;

  .ele-admin-header-tool .ele-admin-header-tool-item:hover {
    color: @menu-dark-selected-item-text-color;
    background: @header-dark-tool-hover-bg;
  }

  .ant-breadcrumb,
  .ant-breadcrumb-separator,
  .ant-breadcrumb a {
    color: @menu-dark-color;
  }

  .ant-breadcrumb a:hover {
    color: @menu-dark-selected-item-text-color;
  }

  .ant-breadcrumb > span:last-child {
    color: @menu-dark-color;
  }

  // 主色顶栏menu
  .ant-menu-light {
    color: @menu-dark-color;

    & > .ant-menu-item:hover,
    & > .ant-menu-item-active,
    & > .ant-menu-item-selected,
    & > .ant-menu-submenu-active,
    & > .ant-menu-submenu-open,
    & > .ant-menu-submenu-selected,
    & > .ant-menu-submenu > .ant-menu-submenu-title:hover {
      color: @menu-dark-selected-item-text-color;
    }

    & > .ant-menu-item:hover:after,
    & > .ant-menu-submenu:hover:after,
    & > .ant-menu-item-active:after,
    & > .ant-menu-submenu-active:after,
    & > .ant-menu-item-open:after,
    & > .ant-menu-submenu-open:after,
    & > .ant-menu-item-selected:after,
    & > .ant-menu-submenu-selected:after {
      border-bottom-color: @menu-dark-selected-item-text-color;
    }
  }
}

// 暗色侧边栏
.ele-admin-side-dark {
  .ele-admin-logo {
    color: @logo-dark-color;
    box-shadow: @logo-dark-shadow;
    background: @layout-sider-background;
  }

  .ele-admin-sidebar {
    box-shadow: @sidebar-dark-shadow;
    background: @layout-sider-background;
  }

  &.ele-admin-side-mix {
    &:not(.ele-admin-collapse) {
      .ele-admin-logo,
      .ele-admin-sidebar-nav {
        box-shadow: none;
      }
    }

    .ele-admin-sidebar-nav {
      background: @layout-sider-background;

      & > .ele-admin-sidebar-nav-menu > .ant-menu {
        & > .ant-menu-item:not(.ant-menu-item-selected):hover,
        & > .ant-menu-submenu:not(.ant-menu-submenu-selected) > .ant-menu-submenu-title:hover {
          background: @header-dark-tool-hover-bg;
        }

        & > .ant-menu-submenu.ant-menu-submenu-selected > .ant-menu-submenu-title {
          background: @primary-color;
          color: @menu-dark-selected-item-text-color;
        }
      }

      .ele-admin-sidebar-nav-tool-item {
        color: @menu-dark-color;

        &:hover {
          color: @menu-dark-selected-item-text-color;
        }
      }
    }
  }
}

// 选项卡圆点风格
.ele-admin-tab-dot .ele-admin-tabs.ant-tabs {
  .ant-tabs-bar .ant-tabs-nav-container {
    .ant-tabs-tab {
      border-right: 1px solid @border-color-split;

      & > div {
        padding-left: 28px;
      }

      &:before {
        width: 8px;
        height: 8px;
        margin-top: -4px;
        background: @border-color-base;
        transition: background .3s;
        border-radius: 50%;
        display: block;
        border: none;
        left: 12px;
        top: 50%;
      }
    }

    .ant-tabs-tab-active:before {
      background: @primary-color;
    }

    .ant-tabs-tab-next {
      border-left: 1px solid @border-color-split;
      right: 0;
    }

    .ant-tabs-tab-prev {
      border-right: 1px solid @border-color-split;
    }
  }

  .ele-admin-tabs-drop {
    border-left: 1px solid @border-color-split;
  }
}

// 选项卡卡片风格
.ele-admin-tab-card .ele-admin-tabs.ant-tabs {
  background: @layout-body-background;
  padding-top: @tabs-card-padding;
  box-shadow: 0 @tabs-card-padding 0 @layout-body-background;

  .ant-tabs-bar .ant-tabs-nav-container {
    .ant-tabs-tab {
      border-radius: (@border-radius-sm * 2);
      height: calc(@tabs-height - @tabs-card-padding);
      line-height: calc(@tabs-height - @tabs-card-padding);
      background: @component-background;

      & + .ant-tabs-tab {
        margin-left: @tabs-card-padding;
      }
    }

    .ant-tabs-tab-prev,
    .ant-tabs-tab-next {
      height: calc(@tabs-height - @tabs-card-padding);
      line-height: calc(@tabs-height - @tabs-card-padding);
    }
  }

  .ele-admin-tabs-drop {
    border-radius: 4px;
    background: @component-background;
    margin-right: @tabs-card-padding;
    width: calc(@tabs-height - @tabs-card-padding);
    height: calc(@tabs-height - @tabs-card-padding);
    line-height: calc(@tabs-height - @tabs-card-padding);
  }

  & + .ele-admin-content {
    margin-top: @tabs-card-padding;

    & > .ele-admin-content-view > .ele-body:first-child {
      padding-top: 0;
    }
  }
}

// 侧边栏彩色图标
.ele-admin-side-colorful {
  .ele-admin-sidebar .ele-admin-sidebar-menus > .ant-menu > li {
    & > .ant-menu-item-icon,
    & > .ant-menu-submenu-title > .ant-menu-item-icon {
      color: @menu-dark-selected-item-text-color;
      background: #61b2fc;
      width: @sidebar-colorful-icon-width;
      height: @sidebar-colorful-icon-width;
      line-height: calc(@sidebar-colorful-icon-width + 4px);
      font-size: @sidebar-colorful-icon-size;
      vertical-align: -0.05em;
      border-radius: 50%;
      text-align: center;
    }

    &:nth-child(even) {
      & > .ant-menu-item-icon,
      & > .ant-menu-submenu-title > .ant-menu-item-icon {
        background: #7dd733;
      }
    }

    &:nth-child(3) {
      & > .ant-menu-item-icon,
      & > .ant-menu-submenu-title > .ant-menu-item-icon {
        background: #32a2d4;
      }
    }

    &:nth-child(4) {
      & > .ant-menu-item-icon,
      & > .ant-menu-submenu-title > .ant-menu-item-icon {
        background: #7383cf;
      }
    }

    &:nth-child(5) {
      & > .ant-menu-item-icon,
      & > .ant-menu-submenu-title > .ant-menu-item-icon {
        background: #F5686F;
      }
    }

    &:nth-child(6) {
      & > .ant-menu-item-icon,
      & > .ant-menu-submenu-title > .ant-menu-item-icon {
        background: #2bccce;
      }
    }

    &:nth-child(7) {
      & > .ant-menu-item-icon,
      & > .ant-menu-submenu-title > .ant-menu-item-icon {
        background: #7dd733;
      }
    }

    &:nth-child(8) {
      & > .ant-menu-item-icon,
      & > .ant-menu-submenu-title > .ant-menu-item-icon {
        background: #FAAD14;
      }
    }
  }

  .ele-admin-sidebar .ant-menu-submenu > .ant-menu > li {
    & > .ant-menu-item-icon,
    & > .ant-menu-submenu-title > .ant-menu-item-icon {
      display: none;

      & + .ant-menu-title-content {
        margin-left: 0;
      }
    }

    &:not(.ant-menu-submenu):before,
    & > .ant-menu-submenu-title:before {
      content: "";
      width: 8px;
      height: 8px;
      margin: 0 @padding-xs;
      position: static;
      border-radius: 50%;
      display: inline-block;
      vertical-align: 0.05em;
      background: @normal-color;
      transition: background .3s @ease-in-out;
    }

    &:not(.ant-menu-submenu):hover:before,
    &:not(.ant-menu-submenu).ant-menu-item-selected:before,
    &.ant-menu-submenu:hover > .ant-menu-submenu-title:before {
      background: @primary-color;
    }
  }

  &.ele-admin-side-dark:not(.ele-admin-side-mix) .ele-admin-sidebar .ant-menu-submenu > .ant-menu > li {
    &:not(.ant-menu-submenu):before,
    & > .ant-menu-submenu-title:before {
      background: @menu-dark-color;
    }

    &:not(.ant-menu-submenu):hover:before,
    &:not(.ant-menu-submenu).ant-menu-item-selected:before,
    &.ant-menu-submenu:hover > .ant-menu-submenu-title:before {
      background: @menu-dark-selected-item-text-color;
    }
  }

  &.ele-admin-collapse {
    .ele-admin-sidebar .ant-menu > .ant-menu-item,
    .ele-admin-sidebar .ant-menu > .ant-menu-submenu > .ant-menu-submenu-title {
      padding: 0 calc(calc(@sidebar-collapse-width - @sidebar-colorful-icon-width) / 2) !important;
    }
  }
}

// 色弱模式
.ele-admin-weak {
  filter: invert(.8);
  background: @heading-color;
  overflow-x: hidden;
}

/* 返回顶部 */
.ele-admin-layout > .ant-back-top {
  right: @layout-back-top-right;
  bottom: @layout-back-top-bottom;
}

/* 小屏幕遮罩层 */
.ele-admin-shade {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(@layout-z-index + 2);
  transition: background-color @sidebar-transition-anim, left @sidebar-transition-anim;
  visibility: hidden;
}

/* 小屏幕样式 */
@media screen and (max-width: 768px) {
  .ele-admin-logo,
  .ele-admin-sidebar {
    position: fixed !important;
    left: 0 !important;
    width: @sidebar-width !important;
    z-index: calc(@layout-z-index + 3) !important;
  }

  .ele-admin-sidebar {
    top: @header-height !important;;
  }

  .ele-admin-logo > span {
    display: inline !important;
  }

  .ele-admin-body,
  .ele-admin-header {
    padding-left: 0 !important;
  }

  .ele-admin-tabs {
    left: 0 !important;
  }

  .ele-admin-breadcrumb,
  .ele-admin-sidebar-nav {
    display: none;
  }

  .ele-admin-layout:not(.ele-admin-collapse) .ele-admin-shade {
    left: @sidebar-width;
    background: @modal-mask-bg;
    visibility: visible;
  }

  .ele-admin-collapse .ele-admin-sidebar,
  .ele-admin-collapse .ele-admin-logo {
    left: calc(0px - @sidebar-width) !important;
    box-shadow: none !important;
  }

  .ele-admin-show-tabs:not(.ele-admin-tab-card):not(.ele-admin-head-dark) .ele-admin-header {
    box-shadow: 0 -1px 0 @border-color-split inset !important;
  }
}
