@use '../../style/themes/default.scss' as *;
@use '../../style/util.scss' as *;

/* 侧栏 */
.ele-admin-sidebar {
  flex-shrink: 0;
  width: eleVar('sidebar', 'width');
  z-index: calc(#{eleVar('layout', 'index')} + 4);
  background: eleVar('sidebar', 'bg');
  box-shadow: eleVar('sidebar', 'shadow');
  transition: (width $ele-transition, left $ele-transition);
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;

  .ele-admin-menus {
    flex: 1;

    & > .el-scrollbar__wrap {
      box-sizing: border-box;
      position: relative;
      overflow-x: hidden;
      overflow-y: auto;

      & > .el-scrollbar__view > .ele-menu {
        width: 100%;
        border: none;
        background: none;
        transition: none;
      }
    }
  }

  & + .ele-admin-body {
    width: calc(100% - #{eleVar('sidebar', 'width')});
  }
}

/* 双侧栏一级 */
.ele-admin-sidebox {
  flex-shrink: 0;
  width: eleVar('sidebox', 'width');
  z-index: calc(#{eleVar('layout', 'index')} + 4);
  background: eleVar('sidebar', 'bg');
  box-shadow: -0.8px 0 0 eleVar('header', 'line-color') inset;
  transition: width $ele-transition;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;

  .ele-admin-menus {
    flex: 1;

    & > .el-scrollbar__wrap {
      box-sizing: border-box;
      position: relative;
      overflow-x: hidden;
      overflow-y: auto;

      & > .el-scrollbar__view > .ele-menu {
        width: 100%;
        border: none;
        background: none;
        transition: padding $ele-transition;
        #{eleVarName('menu', 'item-padding')}: eleVar('sidebox', 'padding');
        #{eleVarName('menu', 'item-radius')}: eleVar('sidebox', 'item-radius');

        & > .el-menu-item,
        & > .el-sub-menu > .el-sub-menu__title {
          height: auto;
          display: flex;
          align-items: center;
          flex-direction: column;
          padding: eleVar('sidebox', 'item-padding');
          transition: all $ele-transition;

          .el-icon:not(.el-sub-menu__icon-arrow) {
            margin: 0;
            font-size: eleVar('sidebox', 'icon-font-size');
          }

          & > span {
            width: 100%;
            height: auto;
            line-height: 1;
            font-size: eleVar('sidebox', 'font-size');
            margin-top: eleVar('sidebox', 'title-margin');
            box-sizing: border-box;
            text-align: center;
            display: block;
            overflow: hidden;
            white-space: nowrap;
            word-break: break-all;
            text-overflow: ellipsis;
            visibility: visible;
          }
        }

        & > .el-menu-item::after {
          display: none;
        }

        & > .el-sub-menu.is-active > .el-sub-menu__title {
          transition: none;
        }

        & > .el-menu-item .el-badge,
        & > .el-sub-menu > .el-sub-menu__title .el-badge {
          position: absolute;
          top: 2px;
          right: 4px;
          margin: 0;

          .el-badge__content:not(.is-dot) {
            width: auto;
            height: 18px;
            line-height: 18px;
            border-radius: 24px;
            min-width: 20px;
            font-size: 12px;
            padding: 0 4px;
          }
        }
      }
    }
  }
}

.ele-admin-sidebox-popup.ele-menu {
  & > .el-menu--popup-container > .el-menu--popup {
    margin-left: eleVar('sidebox', 'padding');
    margin-right: eleVar('sidebox', 'padding');
  }
}

/* 操作按钮 */
.ele-sidebar-tool {
  height: eleVar('sidebar', 'tool-height');
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: eleVar('header', 'tool-radius');
  transition: (color $ele-transition, background-color $ele-transition);
  cursor: pointer;

  &:hover {
    background: eleVar('header', 'tool-hover-bg');
  }
}

/* 双侧栏 */
.ele-admin-mix-sidebar {
  $sideboxW: eleVar('sidebox', 'width');
  $sidebarW: eleVar('sidebar', 'mix-width');

  .ele-admin-logo {
    width: $sideboxW;

    & > img + h1 {
      display: none;
    }
  }

  &:not(.ele-admin-collapse) .ele-admin-logo {
    box-shadow: -0.8px 0 0 eleVar('header', 'line-color') inset;
  }

  .ele-admin-sidebox + .ele-admin-sidebar {
    width: $sidebarW;
    z-index: calc(#{eleVar('layout', 'index')} + 2);
    box-shadow: eleVar('sidebar', 'shadow');
    background: eleVar('sidebar', 'bg');
  }

  .ele-admin-sidebar + .ele-admin-body {
    width: calc(100% - #{$sideboxW} - #{$sidebarW});
  }

  .ele-admin-sidebox + .ele-admin-body {
    width: calc(100% - #{$sideboxW});
  }
}

/* 滚动条样式优化 */
.ele-admin-sidebar > .ele-admin-menus,
.ele-admin-sidebox > .ele-admin-menus {
  $size: eleVar('menu-thumb', 'size');
  $padding: eleVar('menu-thumb', 'padding');
  $hover-color: eleVar('menu-thumb', 'hover-color');
  #{elVarName('scrollbar', 'opacity')}: 1;
  #{elVarName('scrollbar', 'hover-opacity')}: 1;
  #{elVarName('scrollbar', 'bg-color')}: eleVar('menu-thumb', 'color');
  #{elVarName('scrollbar', 'hover-bg-color')}: #{$hover-color};

  & > .el-scrollbar__bar.is-vertical {
    width: calc(#{$size} - #{$padding} * 2);
    border-radius: eleVar('menu-thumb', 'radius');
    right: $padding;
    z-index: 9;
  }

  & > .el-scrollbar__bar.is-horizontal {
    height: calc(#{$size} - #{$padding} * 2);
    border-radius: eleVar('menu-thumb', 'radius');
    bottom: $padding;
    z-index: 9;
  }
}

.ele-admin-dark-sidebar:not(.ele-admin-mix-sidebar) .ele-admin-sidebar,
.ele-admin-dark-sidebar .ele-admin-sidebox {
  & > .ele-admin-menus {
    $dark-hover-color: eleVar('menu-dark-thumb', 'hover-color');
    #{elVarName('scrollbar', 'bg-color')}: eleVar('menu-dark-thumb', 'color');
    #{elVarName('scrollbar', 'hover-bg-color')}: #{$dark-hover-color};
  }
}