/** 现代主题暗黑(css-var 模式) */
@use 'sass:map';
@use 'ele-admin-plus/es/style/util.scss' as *;
@use 'ele-admin-plus/es/style/themes/theme-util.scss' as *;
$theme-modern-dark-selector: 'html.ele-theme-modern-dark' !default;

$ele-modern-dark: () !default;
$ele-modern-dark: map.deep-merge(
  (
    'card': (
      'radius': 12px
    ),
    'modal': (
      'radius': 12px
    ),
    'menu-dark-thumb': (
      'color': rgba(255, 255, 255, 0.6),
      'hover-color': #fff
    )
  ),
  $ele-modern-dark
);

@include set-theme-var($theme-modern-dark-selector, $ele-modern-dark);

#{$theme-modern-dark-selector} {
  $layout-primary-bg: (
    linear-gradient(rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.68)) center / 102% 102%,
    elVar('color-primary')
  );
  .ele-pro-layout {
    padding: 8px;
    background: $layout-primary-bg;
    #{eleVarName('layout', 'bg')}: #1f1f1f;
    #{eleVarName('layout', 'button-tab-page-pt')}: 12px;
    #{eleVarName('header', 'bg')}: eleVar('layout', 'bg');
    #{eleVarName('header', 'height')}: 46px;
    #{eleVarName('header', 'line-color')}: transparent;
    #{eleVarName('header', 'ghost-bg')}: eleVar('layout', 'bg');
    #{eleVarName('header', 'shadow')}: none;
    #{eleVarName('header', 'primary-bg')}: (
      linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)) center / 102% 102%,
      elVar('color-primary', 'dark-2')
    );
    #{eleVarName('header', 'primary-shadow')}: none;
    #{eleVarName('header', 'tool-radius')}: calc(
      (#{eleVar('header', 'height')} - #{eleVar('header', 'tool-height')}) * 1.5
    );
    #{eleVarName('header', 'primary-active-bg')}: elVar('color-primary');
    #{eleVarName('sidebar', 'bg')}: transparent;
    #{eleVarName('sidebar', 'shadow')}: none;
    #{eleVarName('sidebar', 'dark-bg')}: transparent;
    #{eleVarName('sidebar', 'ghost-bg')}: transparent;
    #{eleVarName('sidebar', 'mobile-bg')}: elVar('color-primary');
    #{eleVarName('sidebar', 'mobile-dark-bg')}: elVar('color-primary');
    #{eleVarName('sidebar', 'dark-shadow')}: none;
    #{eleVarName('sidebar', 'collapse-width')}: 62px;
    #{eleVarName('sidebox', 'width')}: 88px;

    & > .ele-admin-main > .ele-admin-body > .ele-admin-wrapper {
      background: eleVar('layout', 'bg');
      border-bottom-left-radius: 24px;
      border-bottom-right-radius: 24px;
    }

    & > .ele-admin-main > .ele-admin-header {
      border-top-left-radius: 24px;
      border-top-right-radius: 24px;
    }

    & > .ele-admin-header {
      margin-top: -8px;
      backdrop-filter: blur(48px);
      #{eleVarName('header', 'bg')}: $layout-primary-bg;
      #{eleVarName('header', 'dark-bg')}: $layout-primary-bg;
      #{eleVarName('header', 'dark-shadow')}: none;
      #{eleVarName('header', 'primary-bg')}: $layout-primary-bg;
      #{eleVarName('header', 'primary-shadow')}: none;
      #{eleVarName('header', 'ghost-bg')}: $layout-primary-bg;

      & > .ele-admin-tabs {
        #{eleVarName('tab', 'simple-active-bg')}: eleVar('layout', 'bg');
        #{eleVarName('tab', 'simple-line-display')}: none;
        #{eleVarName('tab', 'indicator-dot-color')}: rgba(255, 255, 255, 0.4);
      }

      &:not(.is-ghost) > .ele-admin-tabs {
        #{eleVarName('tab', 'button-hover-color')}: #fff;
      }

      &.is-dark > .ele-admin-tabs {
        #{eleVarName('tab', 'simple-active-bg')}: elVar(
          'color',
          'primary',
          'dark-2'
        );
        #{eleVarName('tab', 'button-active-bg')}: elVar(
          'color',
          'primary',
          'dark-2'
        );
        #{eleVarName('tab', 'button-active-shadow')}: 0 0 0 0.8px
          rgba(255, 255, 255, 0.6);
      }
    }

    & > .ele-admin-header .ele-menu,
    & > .ele-admin-side > .ele-admin-sidebar .ele-menu,
    & > .ele-admin-main > .ele-admin-side > .ele-admin-sidebar .ele-menu,
    & > .ele-admin-side > .ele-admin-sidebox .ele-menu,
    & > .ele-admin-main > .ele-admin-side > .ele-admin-sidebox .ele-menu {
      #{eleVarName('menu', 'arrow-size')}: 13px;
      #{eleVarName('menu', 'child-bg')}: transparent;
      #{eleVarName('menu', 'dark-child-bg')}: transparent;
      #{eleVarName('menu', 'item-radius')}: 12px;
      #{eleVarName('menu', 'item-hover-bg')}: rgba(255, 255, 255, 0.1);
      #{eleVarName('menu', 'item-focus-bg')}: rgba(255, 255, 255, 0.1);
      #{eleVarName('menu', 'item-active-bg')}: #fff;
      #{eleVarName('menu', 'item-active-color')}: eleVar('menu', 'item-color');
      #{eleVarName('menu', 'dark-active-bg')}: #fff;
      #{eleVarName('menu', 'colorful-dot-color')}: rgba(255, 255, 255, 0.6);
      #{eleVarName('menu', 'colorful-dot-hover-color')}: #fff;
      #{eleVarName('menu', 'colorful-dot-active-color')}: elVar(
        'color-primary'
      );
      #{eleVarName('menu', 'colorful-dark-dot-color')}: rgba(
        255,
        255,
        255,
        0.6
      );
      #{eleVarName('menu', 'colorful-dark-dot-hover-color')}: #fff;
      #{eleVarName('menu', 'colorful-dark-dot-active-color')}: elVar(
        'color-primary'
      );
      #{eleVarName('menu', 'horizontal-dark-active-bg')}: #fff;

      .el-menu-item.is-active,
      .el-sub-menu.is-active > .el-sub-menu__title.el-tooltip__trigger {
        #{elVarName('menu', 'active-color')}: elVar('color-primary');
      }
    }

    & > .ele-admin-side,
    & > .ele-admin-main > .ele-admin-side {
      & > .ele-admin-sidebar,
      & > .ele-admin-sidebox {
        border: none;

        .el-scrollbar__view > .ele-menu {
          padding-right: 8px;
        }
      }

      & > .ele-admin-sidebox {
        backdrop-filter: blur(80px);

        & + .ele-admin-sidebar {
          #{eleVarName('sidebar', 'shadow')}: 0.8px 0 0 rgba(255, 255, 255, 0.2)
            inset;
          #{eleVarName('sidebar', 'dark-shadow')}: 0.8px 0 0
            rgba(255, 255, 255, 0.2) inset;

          .el-scrollbar__view > .ele-menu {
            padding-left: 8px;
          }
        }
      }
    }

    & > .ele-admin-main {
      & > .ele-admin-body > .ele-admin-tabs {
        #{eleVarName('tab', 'height')}: 38px;
        #{eleVarName('tab', 'button-padding')}: 4px;
        #{eleVarName('tab', 'button-space')}: 12px;
      }

      & > .ele-admin-side + .ele-admin-body > .ele-admin-tabs,
      & > .ele-admin-body:first-child > .ele-admin-tabs,
      & > .ele-admin-body > .ele-admin-wrapper:first-child {
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
      }

      & > .ele-admin-header + .ele-admin-body > .ele-admin-wrapper {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
      }

      & > .ele-admin-header.is-primary > .ele-admin-tabs {
        #{eleVarName('tab', 'simple-active-bg')}: eleVar('layout', 'bg');
      }
    }

    &.is-mobile > .ele-admin-side > .ele-admin-sidebox,
    &.is-mobile > .ele-admin-side > .ele-admin-sidebar {
      border-top-left-radius: 24px;
      border-bottom-left-radius: 24px;
      #{eleVarName('sidebar', 'collapse-width')}: 70px;
      #{eleVarName('sidebox', 'width')}: 96px;

      .el-scrollbar__view > .ele-menu,
      .el-scrollbar__view > .ele-menu {
        padding-left: 8px;
      }
    }

    &.is-mobile > .ele-admin-side > .ele-admin-sidebox + .ele-admin-sidebar {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  #nprogress {
    #{elVarName('color-primary')}: #fff;
  }
}