/* 根节点不设置主题时 */
/* 降低优先级，其他主题可以直接复用 */
/* NOTE 主题开发时使用 :is([data-theme=light], :root[data-theme=light]) {} 覆盖就好了 */
:where(:root:not([data-theme]), [data-theme='light'], [data-theme='dark']) {
  color-scheme: light;

  --x-background-color: light-dark(#fff, #13171f);
  --x-color: light-dark(#373c44, #c2c7d0);
  --x-text-selection-color: light-dark(
    rgba(2, 154, 232, 0.25),
    rgba(1, 170, 255, 0.1875)
  );
  --x-muted-color: light-dark(#646b79, #7b8495);
  --x-muted-border-color: light-dark(#e7eaf0, #202632);
  --x-primary: light-dark(#0172ad, #01aaff);
  --x-primary-background: light-dark(#0172ad, #0172ad);
  --x-primary-border: light-dark(
    var(--x-primary-background),
    var(--x-primary-background)
  );
  --x-primary-underline: light-dark(
    rgba(1, 114, 173, 0.5),
    rgba(1, 170, 255, 0.5)
  );
  --x-primary-hover: light-dark(#015887, #79c0ff);
  --x-primary-hover-background: light-dark(#02659a, #017fc0);
  --x-primary-hover-border: light-dark(
    var(--x-primary-hover-background),
    var(--x-primary-hover-background)
  );
  --x-primary-hover-underline: light-dark(
    var(--x-primary-hover),
    var(--x-primary-hover)
  );
  --x-primary-focus: light-dark(
    rgba(2, 154, 232, 0.5),
    rgba(1, 170, 255, 0.375)
  );
  --x-primary-inverse: light-dark(#fff, #fff);
  --x-secondary: light-dark(#5d6b89, #969eaf);
  --x-secondary-background: light-dark(#525f7a, #525f7a);
  --x-secondary-border: light-dark(
    var(--x-secondary-background),
    var(--x-secondary-background)
  );
  --x-secondary-underline: light-dark(
    rgba(93, 107, 137, 0.5),
    rgba(150, 158, 175, 0.5)
  );
  --x-secondary-hover: light-dark(#48536b, #b3b9c5);
  --x-secondary-hover-background: light-dark(#48536b, #5d6b89);
  --x-secondary-hover-border: light-dark(
    var(--x-secondary-hover-background),
    var(--x-secondary-hover-background)
  );
  --x-secondary-hover-underline: light-dark(
    var(--x-secondary-hover),
    var(--x-secondary-hover)
  );
  --x-secondary-focus: light-dark(
    rgba(93, 107, 137, 0.25),
    rgba(144, 158, 190, 0.25)
  );
  --x-secondary-inverse: light-dark(#fff, #fff);
  --x-contrast: light-dark(#181c25, #dfe3eb);
  --x-contrast-background: light-dark(#181c25, #eff1f4);
  --x-contrast-border: light-dark(
    var(--x-contrast-background),
    var(--x-contrast-background)
  );
  --x-contrast-underline: light-dark(
    rgba(24, 28, 37, 0.5),
    rgba(223, 227, 235, 0.5)
  );
  --x-contrast-hover: light-dark(#000, #fff);
  --x-contrast-hover-background: light-dark(#000, #fff);
  --x-contrast-hover-border: light-dark(
    var(--x-contrast-hover-background),
    var(--x-contrast-hover-background)
  );
  --x-contrast-hover-underline: light-dark(
    var(--x-secondary-hover),
    var(--x-contrast-hover)
  );
  --x-contrast-focus: light-dark(
    rgba(93, 107, 137, 0.25),
    rgba(207, 213, 226, 0.25)
  );
  --x-contrast-inverse: light-dark(#fff, #000);
  --x-box-shadow: light-dark(
    0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698),
    0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024),
    0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03),
    0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036),
    0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302),
    0.5rem 1rem 6rem rgba(129, 145, 181, 0.06),
    0 0 0 0.0625rem rgba(129, 145, 181, 0.015),
    0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698),
    0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024),
    0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03),
    0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036),
    0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302),
    0.5rem 1rem 6rem rgba(7, 9, 12, 0.06),
    0 0 0 0.0625rem rgba(7, 9, 12, 0.015)
  );
  --x-h1-color: light-dark(#2d3138, #f0f1f3);
  --x-h2-color: light-dark(#373c44, #e0e3e7);
  --x-h3-color: light-dark(#424751, #c2c7d0);
  --x-h4-color: light-dark(#4d535e, #b3b9c5);
  --x-h5-color: light-dark(#5c6370, #a4acba);
  --x-h6-color: light-dark(#646b79, #8891a4);
  --x-mark-background-color: light-dark(#fde7c0, #014063);
  --x-mark-color: light-dark(#0f1114, #fff);
  --x-ins-color: light-dark(#1d6a54, #62af9a);
  --x-del-color: light-dark(#883935, #ce7e7b);
  --x-blockquote-border-color: light-dark(
    var(--x-muted-border-color),
    var(--x-muted-border-color)
  );
  --x-blockquote-footer-color: light-dark(
    var(--x-muted-color),
    var(--x-muted-color)
  );
  --x-button-box-shadow: light-dark(
    0 0 0 rgba(0, 0, 0, 0),
    0 0 0 rgba(0, 0, 0, 0)
  );
  --x-button-hover-box-shadow: light-dark(
    0 0 0 rgba(0, 0, 0, 0),
    0 0 0 rgba(0, 0, 0, 0)
  );
  --x-table-border-color: light-dark(
    var(--x-muted-border-color),
    var(--x-muted-border-color)
  );
  --x-table-row-stripped-background-color: light-dark(
    rgba(111, 120, 135, 0.0375),
    rgba(111, 120, 135, 0.0375)
  );
  --x-code-background-color: light-dark(#f3f5f7, #1a1f28);
  --x-code-color: light-dark(#646b79, #8891a4);
  --x-code-kbd-background-color: light-dark(var(--x-color), var(--x-color));
  --x-code-kbd-color: light-dark(
    var(--x-background-color),
    var(--x-background-color)
  );
  --x-form-element-background-color: light-dark(#fbfcfc, #1c212c);
  --x-form-element-selected-background-color: light-dark(#dfe3eb, #2a3140);
  --x-form-element-border-color: light-dark(#cfd5e2, #2a3140);
  --x-form-element-color: light-dark(#23262c, #e0e3e7);
  --x-form-element-placeholder-color: light-dark(var(--x-muted-color), #8891a4);
  --x-form-element-active-background-color: light-dark(#fff, #1a1f28);
  --x-form-element-active-border-color: light-dark(
    var(--x-primary-border),
    var(--x-primary-border)
  );
  --x-form-element-focus-color: light-dark(
    var(--x-primary-border),
    var(--x-primary-border)
  );
  --x-form-element-disabled-opacity: light-dark(0.5, 0.5);
  --x-form-element-invalid-border-color: light-dark(#b86a6b, #964a50);
  --x-form-element-invalid-active-border-color: light-dark(#c84f48, #b7403b);
  --x-form-element-invalid-focus-color: light-dark(
    var(--x-form-element-invalid-active-border-color),
    var(--x-form-element-invalid-active-border-color)
  );
  --x-form-element-valid-border-color: light-dark(#4c9b8a, #2a7b6f);
  --x-form-element-valid-active-border-color: light-dark(#279977, #16896a);
  --x-form-element-valid-focus-color: light-dark(
    var(--x-form-element-valid-active-border-color),
    var(--x-form-element-valid-active-border-color)
  );
  --x-switch-background-color: light-dark(#bfc7d9, #333c4e);
  --x-switch-checked-background-color: light-dark(
    var(--x-primary-background),
    var(--x-primary-background)
  );
  --x-switch-color: light-dark(#fff, #fff);
  --x-switch-thumb-box-shadow: light-dark(
    0 0 0 rgba(0, 0, 0, 0),
    0 0 0 rgba(0, 0, 0, 0)
  );
  --x-range-border-color: light-dark(#dfe3eb, #202632);
  --x-range-active-border-color: light-dark(#bfc7d9, #2a3140);
  --x-range-thumb-border-color: light-dark(
    var(--x-background-color),
    var(--x-background-color)
  );
  --x-range-thumb-color: light-dark(
    var(--x-secondary-background),
    var(--x-secondary-background)
  );
  --x-range-thumb-active-color: light-dark(
    var(--x-primary-background),
    var(--x-primary-background)
  );
  --x-accordion-border-color: light-dark(
    var(--x-muted-border-color),
    var(--x-muted-border-color)
  );
  --x-accordion-active-summary-color: light-dark(
    var(--x-primary-hover),
    var(--x-primary-hover)
  );
  --x-accordion-close-summary-color: light-dark(var(--x-color), var(--x-color));
  --x-accordion-open-summary-color: light-dark(
    var(--x-muted-color),
    var(--x-muted-color)
  );
  --x-card-background-color: light-dark(var(--x-background-color), #181c25);
  --x-card-border-color: light-dark(
    var(--x-muted-border-color),
    var(--x-card-background-color)
  );
  --x-card-box-shadow: light-dark(var(--x-box-shadow), var(--x-box-shadow));
  --x-card-sectioning-background-color: light-dark(#fbfcfc, #1a1f28);
  --x-dropdown-background-color: light-dark(#fff, #181c25);
  --x-dropdown-border-color: light-dark(#eff1f4, #202632);
  --x-dropdown-box-shadow: light-dark(var(--x-box-shadow), var(--x-box-shadow));
  --x-dropdown-color: light-dark(var(--x-color), var(--x-color));
  --x-dropdown-hover-background-color: light-dark(#eff1f4, #202632);
  --x-loading-spinner-opacity: light-dark(0.5, 0.5);
  --x-modal-overlay-background-color: light-dark(
    rgba(232, 234, 237, 0.75),
    rgba(8, 9, 10, 0.75)
  );
  --x-progress-background-color: light-dark(#dfe3eb, #202632);
  --x-progress-color: light-dark(
    var(--x-primary-background),
    var(--x-primary-background)
  );
  --x-tooltip-background-color: light-dark(
    var(--x-contrast-background),
    var(--x-contrast-background)
  );
  --x-tooltip-color: light-dark(
    var(--x-contrast-inverse),
    var(--x-contrast-inverse)
  );

  --x-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  --x-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(200, 79, 72)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}

/* 默认表单图标 */
/* :root:not([data-theme]) {
} */

/* prefers-color-scheme CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。 */
/* no-preference */
/* light */
/* dark */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    /* 启用 light-dark 函数中的 dark 属性 */
    color-scheme: dark;
  }

  :where(:root:not([data-theme])) {
    /* 跟随浏览器环境的暗黑模式,修改一下突变颜色 */
    --x-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    --x-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(150, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
  }

  details summary[role='button'].contrast:not(.outline)::after {
    filter: brightness(0);
  }

  [aria-busy='true']:not(input, select, textarea).contrast:is(
      button,
      [type='submit'],
      [type='button'],
      [type='reset'],
      [role='button']
    ):not(.outline)::before {
    filter: brightness(0);
  }
}

/* 暗黑模式可以通过 data-theme=dark 切换 */
:is([data-theme='dark'], :root[data-theme='dark']) {
  color-scheme: dark;

  /* 跟随浏览器环境的暗黑模式,修改一下突变颜色 */
  --x-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  --x-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(150, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");

  details summary[role='button'].contrast:not(.outline)::after {
    filter: brightness(0);
  }

  [aria-busy='true']:not(input, select, textarea).contrast:is(
      button,
      [type='submit'],
      [type='button'],
      [type='reset'],
      [role='button']
    ):not(.outline)::before {
    filter: brightness(0);
  }
}

/* 设置 data-theme=light 使用明亮主题，不设置默认走系统判断 */
:is([data-theme='light'], :root[data-theme='light']) {
  color-scheme: light;

  --x-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  --x-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(200, 79, 72)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}