/* <ad-theme-toggle>: a segmented radio group. The radios stay in the
 * accessibility tree and keyboard order; only their boxes are hidden. */

/* The element is empty until the script fills it. When scripts run (data-js is
 * set by theme-init.js before the first paint) the group's final size is
 * reserved, so the search field and button do not jump when the radios appear:
 * three options of 44 px, minus the border they share with the group. */
ad-theme-toggle {
  /* One option: 44 px minus the group's border, or wider if the icon and its
   * padding need it. Used by the options and by the reservation below. */
  --theme-option: max(var(--target-comfortable) - 2px, 1.15em + 2 * var(--space-2xs));
}

[data-js] ad-theme-toggle {
  display: inline-flex;
  min-inline-size: calc(3 * var(--theme-option) + 2px);
  min-block-size: var(--target-comfortable);
}

.theme-toggle {
  display: inline-flex;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-raised);
}

.theme-toggle__option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44 px including the group's 1 px border, like the rest of the header row. */
  inline-size: var(--theme-option);
  min-block-size: calc(var(--target-comfortable) - 2px);
  padding-inline: var(--space-2xs);
  border-radius: var(--radius-pill);
  cursor: pointer;
  color: var(--text-muted);
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.theme-toggle__option:hover {
  color: var(--accent-strong);
}

.theme-toggle__option:has(:checked) {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.theme-toggle__option:has(:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-halo);
}

.theme-toggle__option input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  margin: 0;
}

.theme-toggle__icon {
  inline-size: 1.15em;
  block-size: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The option's name (the radio's label text, so always in the accessibility
 * tree): visually hidden, except as a small label under the option while it is
 * hovered or focused with the keyboard, because the sun, moon and monitor are
 * not self-explanatory to everyone. Content on hover or focus (1.4.13): the
 * label touches the option, so the pointer can move onto it and it stays;
 * Escape dismisses it (data-label-dismissed, set by the script) without moving
 * focus; there is no timer. */
.theme-toggle__label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.theme-toggle:not([data-label-dismissed]) .theme-toggle__option:is(:hover, :has(:focus-visible)) .theme-toggle__label {
  inset-block-start: calc(100% - 2px);
  inset-inline-start: 50%;
  z-index: 50;
  inline-size: auto;
  block-size: auto;
  overflow: visible;
  clip-path: none;
  translate: -50% 0;
  padding: 0.25em 0.6em;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--bg-raised);
  color: var(--text);
  font-size: var(--text--1);
  font-weight: 600;
  line-height: 1.3;
  box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 0.15);
}

/* The first and last option sit near the group's edges: their labels align
 * with the group instead of hanging out of it (and, at the header's right
 * edge, out of the viewport). Same specificity prefix as the rule above, so
 * both insets come from one rule (a start from one and an end from the other
 * would over-constrain the box to the option's width). */
.theme-toggle:not([data-label-dismissed]) .theme-toggle__option:first-of-type:is(:hover, :has(:focus-visible)) .theme-toggle__label {
  inset-inline: 0 auto;
  translate: 0 0;
}

.theme-toggle:not([data-label-dismissed]) .theme-toggle__option:last-of-type:is(:hover, :has(:focus-visible)) .theme-toggle__label {
  inset-inline: auto 0;
  translate: 0 0;
}