@import "./default.scss";

$xh-prefix: ".xh";
:root, page {
  --color-primary: #{$color-primary};
  --color-primary-secondary: #{$color-primary-secondary};
  --color-primary-dark: #{$color-primary-dark};
  --color-primary-reverse: #{$color-primary-reverse};
  --color-disabled: #{$color-disabled};
  --color-warning: #{$color-warning};
  --color-warning-light: #{$color-warning-light};
  --color-fail: #{$color-fail};
  --background-color: #{$background-color};
  --body-background-color: #{$body-background-color};
  --font-color: #{$font-color};
  --font-color-secondary: #{$font-color-secondary};
  --font-color-tertiary: #{$font-color-tertiary};
  --font-color-fourth: #{$font-color-fourth};
  --font-color-fifth: #{$font-color-fifth};
  --border-color: #{$border-color};
  --btn-color: #{$btn-color};
  --btn-font-color: #{$btn-font-color};
  --btn-border-color: #{$btn-border-color};
  --btn-color-disabled: #{$btn-color-disabled};
  --btn-shadow-primary: #{$btn-shadow-primary};
  --mask-color: #{$mask-color};
  --toast-bg-color: #{$toast-bg-light};
  --dialog-color: #{$dialog-color-light};
  --btn-font-size: #{$btn-font-size};
  --btn-color-disabled: #{$btn-color-disabled};
}

@media (prefers-color-scheme: dark) {
  :root, page {
    --color-primary: #{$color-primary};
    --color-primary-secondary: #{$color-primary-secondary};
    --color-primary-dark: #{$color-primary-dark};
    --color-primary-reverse: #{$color-primary-reverse};
    --color-disabled: #{$color-disabled};
    --color-warning: #{$color-warning};
    --color-warning-light: #{$color-warning-light};
    --color-fail: #{$color-fail};
    --background-color: #{$background-color};
    --body-background-color: #{$body-background-color};
    --font-color: #{$font-color};
    --font-color-secondary: #{$font-color-secondary};
    --font-color-tertiary: #{$font-color-tertiary};
    --font-color-fourth: #{$font-color-fourth};
    --font-color-fifth: #{$font-color-fifth};
    --border-color: #{$border-color};
    --btn-color: #{$btn-color};
    --btn-font-color: #{$btn-font-color};
    --btn-border-color: #{$btn-border-color};
    --btn-color-disabled: #{$btn-color-disabled};
    --btn-shadow-primary: #{$btn-shadow-primary};
    --mask-color: #{$mask-color};
    --toast-bg-color: #{$toast-bg-dark};
    --dialog-color: #{$dialog-color-dark};
    --btn-font-size: #{$btn-font-size};
    --btn-color-disabled: #{$btn-color-disabled};
  }
}