/**
 * @file
 * Utilities: per-theme visibility, containers.
 *
 * Hiding is clip-based only (core's .visually-hidden, direction-neutral).
 * Never left: -9999px: it adds horizontal scroll in RTL.
 */

/* Shown per effective theme. These rules only hide, never set a display, so
 * each element keeps its own (flex, inline…). The chosen theme wins over the
 * OS; with no choice (no data-theme) the OS decides, light by default. */
:root:where(.gdrfad-dds-appearance)[data-theme="light"] .dds-only-dark,
:root:where(.gdrfad-dds-appearance)[data-theme="dark"] .dds-only-light {
  display: none !important;
}

/* Embedded in another theme there is no appearance menu: always light. */
.gdrfad-dds-embedded .dds-only-dark {
  display: none !important;
}

@media not all and (prefers-color-scheme: dark) {
  :root:where(.gdrfad-dds-appearance):not([data-theme]) .dds-only-dark {
    display: none !important;
  }
}

@media (prefers-color-scheme: dark) {
  :root:where(.gdrfad-dds-appearance):not([data-theme]) .dds-only-light {
    display: none !important;
  }
}

:where(.gdrfad-dds) .dds-container,
.gdrfad-dds-embedded .dds-container {
  inline-size: 100%;
  max-inline-size: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

:where(.gdrfad-dds) .dds-form-column,
.gdrfad-dds-embedded .dds-form-column {
  max-inline-size: var(--form-column);
}

/* Screen-reader text is clipped to 1px, so its size changes nothing on
 * screen. Scanners still read its computed size, and text inheriting a small
 * button's size is reported as "smaller than 12pt". */
:where(.gdrfad-dds) .visually-hidden,
.gdrfad-dds-embedded .visually-hidden {
  font-size: var(--font-size-body);
}