/** 现代主题(css-var 模式) */
@use 'sass:map';
@use 'y-element-ultra/es/style/util.scss' as *;
@use 'y-element-ultra/es/style/themes/theme-util.scss' as *;
$theme-modern-selector: 'html.y-theme-modern' !default;

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

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

#{$theme-modern-selector} {
  .y-pro-layout {
    padding: 8px;
    background: elVar('color-primary');
    #{yVarName('layout', 'bg')}: #f4f4fb;
    #{yVarName('layout', 'button-tab-page-pt')}: 12px;
    #{yVarName('header', 'bg')}: yVar('layout', 'bg');
    #{yVarName('header', 'height')}: 46px;
    #{yVarName('header', 'line-color')}: transparent;
    #{yVarName('header', 'ghost-bg')}: yVar('layout', 'bg');
    #{yVarName('header', 'shadow')}: none;
    #{yVarName('header', 'primary-bg')}: elVar('color-primary', 'dark-2');
    #{yVarName('header', 'primary-shadow')}: none;
    #{yVarName('header', 'tool-radius')}: calc(
      (#{yVar('header', 'height')} - #{yVar('header', 'tool-height')}) * 1.5
    );
    #{yVarName('header', 'primary-active-bg')}: elVar('color-primary');
    #{yVarName('sidebar', 'bg')}: transparent;
    #{yVarName('sidebar', 'shadow')}: none;
    #{yVarName('sidebar', 'dark-bg')}: transparent;
    #{yVarName('sidebar', 'ghost-bg')}: transparent;
    #{yVarName('sidebar', 'mobile-bg')}: elVar('color-primary');
    #{yVarName('sidebar', 'mobile-dark-bg')}: elVar('color-primary');
    #{yVarName('sidebar', 'dark-shadow')}: none;
    #{yVarName('sidebar', 'collapse-width')}: 62px;
    #{yVarName('sidebox', 'width')}: 88px;

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

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

    & > .y-admin-header {
      margin-top: -8px;
      backdrop-filter: blur(48px);
      #{yVarName('header', 'bg')}: elVar('color-primary');
      #{yVarName('header', 'dark-bg')}: elVar('color-primary');
      #{yVarName('header', 'dark-shadow')}: none;
      #{yVarName('header', 'primary-bg')}: elVar('color-primary');
      #{yVarName('header', 'primary-shadow')}: none;
      #{yVarName('header', 'ghost-bg')}: elVar('color-primary');

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

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

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

    & > .y-admin-header .y-menu,
    & > .y-admin-side > .y-admin-sidebar .y-menu,
    & > .y-admin-main > .y-admin-side > .y-admin-sidebar .y-menu,
    & > .y-admin-side > .y-admin-sidebox .y-menu,
    & > .y-admin-main > .y-admin-side > .y-admin-sidebox .y-menu {
      #{yVarName('menu', 'arrow-size')}: 13px;
      #{yVarName('menu', 'child-bg')}: transparent;
      #{yVarName('menu', 'dark-child-bg')}: transparent;
      #{yVarName('menu', 'item-radius')}: 12px;
      #{yVarName('menu', 'item-hover-bg')}: rgba(255, 255, 255, 0.1);
      #{yVarName('menu', 'item-focus-bg')}: rgba(255, 255, 255, 0.1);
      #{yVarName('menu', 'item-active-bg')}: #fff;
      #{yVarName('menu', 'item-active-color')}: yVar('menu', 'item-color');
      #{yVarName('menu', 'dark-active-bg')}: #fff;
      #{yVarName('menu', 'colorful-dot-color')}: rgba(255, 255, 255, 0.6);
      #{yVarName('menu', 'colorful-dot-hover-color')}: #fff;
      #{yVarName('menu', 'colorful-dot-active-color')}: elVar(
        'color-primary'
      );
      #{yVarName('menu', 'colorful-dark-dot-color')}: rgba(
        255,
        255,
        255,
        0.6
      );
      #{yVarName('menu', 'colorful-dark-dot-hover-color')}: #fff;
      #{yVarName('menu', 'colorful-dark-dot-active-color')}: elVar(
        'color-primary'
      );
      #{yVarName('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');
      }
    }

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

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

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

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

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

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

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

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

      & > .y-admin-header.is-primary > .y-admin-tabs {
        #{yVarName('tab', 'simple-active-bg')}: yVar('layout', 'bg');
      }
    }

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

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

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

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