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

/* 暗色顶栏 */
.ele-admin-header.is-dark,
.ele-admin-header.is-primary {
  color: eleVar('header', 'dark-color');
  background: eleVar('header', 'dark-bg');
  box-shadow: eleVar('header', 'dark-shadow');

  /* 操作按钮 */
  .ele-admin-tool:hover {
    background: eleVar('header', 'dark-tool-hover-bg');
  }

  /* 面包屑 */
  .ele-breadcrumb .el-breadcrumb__item {
    .el-breadcrumb__inner,
    .el-breadcrumb__separator {
      color: rgba(255, 255, 255, 0.8);
    }

    .el-breadcrumb__inner.is-link:hover,
    &:last-child .el-breadcrumb__inner {
      color: eleVar('header', 'dark-color');
    }
  }

  /* 页签栏 */
  & > .ele-admin-tabs.ele-tab-wrap,
  & > .ele-admin-tabs .ele-tabs {
    $color: eleVar('header', 'dark-color');
    $hover-bg: eleVar('header', 'dark-tool-hover-bg');
    #{eleVarName('tab', 'color')}: #{$color};
    #{eleVarName('tab', 'hover-color')}: #{$color};
    #{eleVarName('tab', 'close-color')}: #{$color};
    #{eleVarName('tab', 'close-hover-color')}: #{$color};
    #{eleVarName('tab', 'close-hover-bg')}: #{$hover-bg};
    #{eleVarName('tab', 'tool-color')}: #{$color};
    #{eleVarName('tab', 'tool-hover-color')}: #{$color};
    #{eleVarName('tab', 'simple-hover-color')}: #{$color};
    #{eleVarName('tab', 'simple-hover-bg')}: #{$hover-bg};
    #{eleVarName('tab', 'simple-active-bg')}: #{elVar('bg-color', 'overlay')};
    #{eleVarName('tab', 'simple-active-line')}: 0px;
    #{eleVarName('tab', 'simple-tool-hover-bg')}: transparent;
    #{eleVarName('tab', 'indicator-dot-color')}: rgba(255, 255, 255, 0.4);
    #{eleVarName('tab', 'indicator-dot-hover-color')}: rgba(255, 255, 255, 0.6);
    #{eleVarName('tab', 'button-bg')}: #{$hover-bg};
    #{eleVarName('tab', 'button-hover-bg')}: rgba(255, 255, 255, 0.2);
    #{eleVarName('tab', 'button-hover-color')}: #{$color};
  }
}

.ele-admin-header.is-dark > .ele-admin-tabs.ele-tab-wrap,
.ele-admin-header.is-dark > .ele-admin-tabs .ele-tabs {
  $color: eleVar('header', 'dark-color');
  $hover-bg: eleVar('header', 'dark-tool-hover-bg');
  #{eleVarName('tab', 'active-close-color')}: #{$color};
  #{eleVarName('tab', 'active-close-hover-color')}: #{$color};
  #{eleVarName('tab', 'active-close-hover-bg')}: #{$hover-bg};
  #{eleVarName('tab', 'simple-active-color')}: #{$color};
  #{eleVarName('tab', 'simple-active-bg')}: #{elVar('color-primary')};
  #{eleVarName('tab', 'indicator-dot-active-color')}: #{$color};
  #{eleVarName('tab', 'button-active-color')}: #{$color};
  #{eleVarName('tab', 'button-active-bg')}: #{elVar('color-primary')};
}

/* 主色顶栏 */
.ele-admin-header.is-primary {
  background: elVar('color-primary');

  /* 菜单 */
  .ele-admin-menus > .ele-menu {
    $active-bg: eleVar('header', 'primary-active-bg');
    #{eleVarName('menu-horizontal', 'dark-active-bg')}: #{$active-bg};
  }
}

/* 暗色侧栏 */
.ele-admin-dark-sidebar {
  .ele-admin-logo {
    color: eleVar('logo', 'dark-color');
    background: eleVar('sidebar', 'dark-bg');
    box-shadow: eleVar('logo', 'dark-shadow');
  }

  .ele-admin-sidebar {
    background: eleVar('sidebar', 'dark-bg');
    box-shadow: eleVar('sidebar', 'dark-shadow');
  }

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

    .ele-admin-sidebox {
      background: eleVar('sidebar', 'dark-bg');
    }
  }

  .ele-admin-sidebox .ele-sidebar-tool,
  &:not(.ele-admin-mix-sidebar) .ele-admin-sidebar .ele-sidebar-tool {
    color: eleVar('header', 'dark-color');

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