import { css } from "lit";

const darkCss = css`
  --sc-primary: var(--sc-dark-primary, var(--sc-base-700));
  --sc-info: var(--sc-dark-info, #3abff8);
  --sc-danger: var(--sc-dark-danger, #f87272);
  --sc-warning: var(--sc-dark-warning, #fbbd23);
  --sc-success: var(--sc-dark-success, #36d399);

  --sc-primary-content: var(--sc-dark-primary-content, #002b3d);
  --sc-info-content: var(--sc-dark-info-content, #002b3d);
  --sc-danger-content: var(--sc-dark-danger-content, #382800);
  --sc-warning-content: var(--sc-dark-warning-content, #382800);
  --sc-success-content: var(--sc-dark-success-content, #003320);

  --sc-base: var(--sc-dark-base, #1d2634);
  --sc-base-50: var(--sc-dark-base-50, #1f2937);
  --sc-base-100: var(--sc-dark-base-100, #252c36);
  --sc-base-200: var(--sc-dark-base-200, #2c3543);
  --sc-base-300: var(--sc-dark-base-300, #38414e);
  --sc-base-400: var(--sc-dark-base-400, #515964);
  --sc-base-500: var(--sc-dark-base-500, #828891);
  --sc-base-600: var(--sc-dark-base-600, #b4b8be);
  --sc-base-700: var(--sc-dark-base-700, #cdd0d5);
  --sc-base-800: var(--sc-dark-base-800, #d9dce0);
  --sc-base-900: var(--sc-dark-base-900, #e5e7eb);
  --sc-base-content: var(--sc-dark-base-content, #e5e7eb);
`;

export const dark = css`
  :host([theme="dark"]) {
    ${darkCss}
  }

  @media (prefers-color-scheme: dark) {
    :host([theme="auto"]) {
      ${darkCss}
    }
  }
`;