[color-mode="2"] {
  --color-mode--default--surface: var(--color--surface--inverse);
}

[color-mode="3"] {
  --color-mode--default--grid-lines: var(--zz_base--color--neutral--200a);
  --color-mode--default--surface: var(--color--surface--neutral--strong);
  --color-mode--default--text-primary: var(--color--text--inverse);
  --color-mode--default--text-accent: var(--zz_base--color--brand--500);
}

/**%default**/
[btn-size="default"] {
  --comp--button--base--label: var(--comp--button--default--fg);
  --comp--button--base--px: var(--comp--button--default--px);
  --comp--button--base--py: var(--comp--button--default--py);
  --comp--button--base--gap: var(--comp--button--default--gap);
  --comp--button--base--rad: var(--comp--button--default--rad);
}
/**%compact**/
[btn-size="compact"] {
  --comp--button--base--label: var(--comp--button--compact--fg);
  --comp--button--base--px: var(--comp--button--compact--px);
  --comp--button--base--py: var(--comp--button--compact--py);
  --comp--button--base--gap: var(--comp--button--compact--gap);
  --comp--button--base--rad: var(--comp--button--compact--rad);
}
/**%solid accent**/
[btn-mode="2"] {
  --comp--button--base--fg: var(--comp--button--solid--accent--fg);
  --comp--button--base--fg-hovered: var(
    --comp--button--solid--accent--fg-hovered
  );
  --comp--button--base--fg-pressed: var(
    --comp--button--solid--accent--fg-pressed
  );
  --comp--button--base--bg: var(--comp--button--solid--accent--bg);
  --comp--button--base--bg-hovered: var(
    --comp--button--solid--accent--bg-hovered
  );
  --comp--button--base--bg-pressed: var(
    --comp--button--solid--accent--bg-pressed
  );
}
/**%solid invert**/
[btn-mode="3"] {
  --comp--button--base--fg: var(--comp--button--solid--invert--fg);
  --comp--button--base--bg: var(--comp--button--solid--invert--bg);
  --comp--button--base--bg-hovered: var(
    --comp--button--solid--invert--bg-hovered
  );
  --comp--button--base--bg-pressed: var(
    --comp--button--solid--invert--bg-pressed
  );
}
/**%solid warning**/
[btn-mode="4"] {
  --comp--button--base--fg: var(--comp--button--solid--warning--fg);
  --comp--button--base--fg-hovered: var(
    --comp--button--solid--warning--fg-hovered
  );
  --comp--button--base--fg-pressed: var(
    --comp--button--solid--warning--fg-pressed
  );
  --comp--button--base--bg: var(--comp--button--solid--warning--bg);
  --comp--button--base--bg-hovered: var(
    --comp--button--solid--warning--bg-hovered
  );
  --comp--button--base--bg-pressed: var(
    --comp--button--solid--warning--bg-pressed
  );
}
/**%solid danger**/
[btn-mode="5"] {
  --comp--button--base--fg: var(--comp--button--solid--danger--fg);
  --comp--button--base--bg: var(--comp--button--solid--danger--bg);
  --comp--button--base--bg-hovered: var(
    --comp--button--solid--danger--bg-hovered
  );
  --comp--button--base--bg-pressed: var(
    --comp--button--solid--danger--bg-pressed
  );
}
/**%solid success**/
[btn-mode="6"] {
  --comp--button--base--fg: var(--comp--button--solid--success--fg);
  --comp--button--base--bg: var(--comp--button--solid--success--bg);
  --comp--button--base--bg-hovered: var(
    --comp--button--solid--success--bg-hovered
  );
  --comp--button--base--bg-pressed: var(
    --comp--button--solid--success--bg-pressed
  );
}
/**%outline accent**/
[btn-mode="2"][btn-type="2"] {
  --comp--button--base--fg: var(--comp--button--outline--accent--fg);
  --comp--button--base--fg-hovered: var(
    --comp--button--outline--accent--fg-hovered
  );
  --comp--button--base--fg-pressed: var(
    --comp--button--outline--accent--fg-pressed
  );
  --comp--button--base--bg: var(--comp--button--outline--accent--bg);
  --comp--button--base--bg-hovered: var(
    --comp--button--outline--accent--bg-hovered
  );
  --comp--button--base--bg-pressed: var(
    --comp--button--outline--accent--bg-pressed
  );
  --comp--button--base--st: var(--comp--button--outline--accent--st);
  --comp--button--base--st-hovered: var(
    --comp--button--outline--accent--st-hovered
  );
  --comp--button--base--st-pressed: var(
    --comp--button--outline--accent--st-pressed
  );
  --comp--button--base--sw: var(--comp--button--outline--accent--sw);
}