/* Third-party widgets, themed from the app's tokens */
/* ================================================= */
/*
  Air Datepicker and Slim Select bring their own colours as custom properties. Rather
  than a hand-picked set of hex values per theme, they're mapped onto the Bootstrap
  surface tokens and --pg-accent here, so every one of the colour themes (light and
  dark) reaches them without an entry of its own.

  Surfaces, text and borders follow the theme everywhere. The accent - selected cells
  and options, focus - follows it on dark themes only: there --pg-accent is the bright
  highlight and the widgets' dark background makes a readable text colour on it. On a
  light theme --pg-accent is the navbar colour, which would put the (light) background
  colour on top of it as text, so the widgets keep their own blue there.
*/

/* Air Datepicker declares its variables on .air-datepicker itself, and this file links
   before it (components/_... sorts first), so the selector needs the extra weight. */
:root .air-datepicker {
  --adp-background-color: var(--bs-body-bg);
  --adp-background-color-hover: var(--bs-tertiary-bg);
  --adp-background-color-active: var(--bs-secondary-bg);
  --adp-color: var(--bs-body-color);
  --adp-color-secondary: var(--bs-secondary-color);
  --adp-color-other-month: var(--bs-tertiary-color);
  --adp-color-other-month-hover: var(--bs-secondary-color);
  --adp-color-disabled: var(--bs-tertiary-color);
  --adp-color-disabled-in-range: var(--bs-secondary-color);
  --adp-border-color: var(--bs-border-color);
  --adp-border-color-inner: var(--bs-border-color-translucent);
  --adp-border-color-inline: var(--bs-border-color);
  --adp-time-track-color: var(--bs-tertiary-color);
  --adp-time-track-color-hover: var(--bs-secondary-color);
  --adp-nav-color-secondary: var(--bs-secondary-color);
  --adp-nav-arrow-color: var(--bs-secondary-color);
}

/* Slim Select declares its variables on :root; set on its own elements they win outright. */
.ss-main,
.ss-content {
  --ss-bg-color: var(--bs-body-bg);
  --ss-font-color: var(--bs-body-color);
  --ss-font-placeholder-color: var(--bs-secondary-color);
  --ss-disabled-color: var(--bs-secondary-bg);
  --ss-border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .ss-main,
[data-bs-theme="dark"] .ss-content {
  --ss-focus-color: var(--pg-accent);
  --ss-primary-color: var(--pg-accent);
}