/* Add/Remove "*" as required */
/* * {
  outline: 2px solid orangered;
  background-color: hsl(50 100% 70% / 0.1);
} */

:not(:defined) {
  visibility: hidden;
}

:root,
:host,
.sl-theme-light {
  --sl-background-color: #EEE;
  background-color: var(--sl-background-color);
  --sl-color-primary-50: var(--sl-color-red-50) !important;
  --sl-color-primary-100: var(--sl-color-red-100) !important;
  --sl-color-primary-200: var(--sl-color-red-200) !important;
  --sl-color-primary-300: var(--sl-color-red-300) !important;
  --sl-color-primary-400: var(--sl-color-red-400) !important;
  --sl-color-primary-500: var(--sl-color-red-500) !important;
  --sl-color-primary-600: var(--sl-color-red-600) !important;
  --sl-color-primary-700: var(--sl-color-red-700) !important;
  --sl-color-primary-800: var(--sl-color-red-800) !important;
  --sl-color-primary-900: var(--sl-color-red-900) !important;
  --sl-color-primary-950: var(--sl-color-red-950) !important;
  /* https://stackoverflow.com/questions/70005421/css-using-hsl-variable-in-hsla */
  --sl-input-focus-ring-color: hsl(from var(--sl-color-primary-500) h s l / 40%) !important;
  accent-color: var(--sl-color-primary-500);
}

:host,
.sl-theme-dark {
  --sl-background-color: #111;
  background-color: var(--sl-background-color);
  --sl-color-primary-50: var(--sl-color-purple-50) !important;
  --sl-color-primary-100: var(--sl-color-purple-100) !important;
  --sl-color-primary-200: var(--sl-color-purple-200) !important;
  --sl-color-primary-300: var(--sl-color-purple-300) !important;
  --sl-color-primary-400: var(--sl-color-purple-400) !important;
  --sl-color-primary-500: var(--sl-color-purple-500) !important;
  --sl-color-primary-600: var(--sl-color-purple-600) !important;
  --sl-color-primary-700: var(--sl-color-purple-700) !important;
  --sl-color-primary-800: var(--sl-color-purple-800) !important;
  --sl-color-primary-900: var(--sl-color-purple-900) !important;
  --sl-color-primary-950: var(--sl-color-purple-950) !important;
  --sl-input-focus-ring-color: hsl(from var(--sl-color-primary-500) h s l / 40%) !important;
  accent-color: var(--sl-color-primary-500);
}

body {
  font-family: "Roboto", sans-serif;
}