/* <ad-theme-toggle>: a segmented radio group. The radios stay in the
 * accessibility tree and keyboard order; only their boxes are hidden. */
.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. */
  min-inline-size: calc(var(--target-comfortable) - 2px);
  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;
}