/* Any variables not defined here are defined in stylevars.js if they are also needed for JS calculations. */
:root,
:host,
.sl-theme-light {
  --uiPanelPadding: var(--sl-spacing-medium);

  --toggleScale: 0.9;
  --inputHeightScale: 0.9;

  --sl-toggle-size-small: calc(0.875rem * var(--toggleScale));
  --sl-toggle-size-medium: calc(1.125rem * var(--toggleScale));
  --sl-toggle-size-large: calc(1.375rem * var(--toggleScale));

  --sl-input-height-small: calc(1.875rem * var(--inputHeightScale));
  --sl-input-height-medium: calc(2.5rem * var(--inputHeightScale));
  --sl-input-height-large: calc(3.125rem * var(--inputHeightScale));

  --sl-color-primary-50: var(--sl-color-violet-50);
  --sl-color-primary-100: var(--sl-color-violet-100);
  --sl-color-primary-200: var(--sl-color-violet-200);
  --sl-color-primary-300: var(--sl-color-violet-300);
  --sl-color-primary-400: var(--sl-color-violet-400);
  --sl-color-primary-500: var(--sl-color-violet-500);
  --sl-color-primary-600: var(--sl-color-violet-600);
  --sl-color-primary-700: var(--sl-color-violet-700);
  --sl-color-primary-800: var(--sl-color-violet-800);
  --sl-color-primary-900: var(--sl-color-violet-900);
  --sl-color-primary-950: var(--sl-color-violet-950);

  /* This shoelace var does not adapt to primary color, so map it to one that does. https://github.com/shoelace-style/shoelace/issues/1959 */
  --sl-input-focus-ring-color: var(--sl-focus-ring-color);
}