/* The eye rides inside the switch: the sliding knob says "this is a control",
   the open or closed eye says what it controls. Either alone was too quiet to
   notice in the header. */
.switch {
  /* Anchors the hidden checkbox below: without it, its containing block is
     whatever positioned ancestor happens to be up the tree, and focusing it
     can pull the whole view there. */
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  cursor: pointer;
  user-select: none;
}

.switch input {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.switch__track {
  position: relative;
  flex: none;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  background-color: var(--color-border-strong);
  transition: background-color 0.15s ease;
}

.switch:hover .switch__track {
  background-color: var(--color-text-faint);
}

.switch__knob {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: #fff;
  color: var(--color-text-soft);
  box-shadow: var(--shadow-sm);
  transition: translate 0.18s ease;
}

.switch__eye {
  width: 0.8125rem;
  height: 0.8125rem;
}

.switch__eye--on {
  display: none;
}

.switch input:checked ~ .switch__track {
  background-color: var(--color-saved);
}

.switch:hover input:checked ~ .switch__track {
  background-color: #12813a;
}

.switch input:checked ~ .switch__track .switch__knob {
  translate: 1.25rem 0;
  color: var(--color-saved);
}

.switch input:checked ~ .switch__track .switch__eye--on {
  display: block;
}

.switch input:checked ~ .switch__track .switch__eye--off {
  display: none;
}

.switch input:focus-visible ~ .switch__track {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.switch__label {
  color: var(--color-text-soft);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.switch input:checked ~ .switch__label {
  color: var(--color-text);
}

/* Compact: sits in a card's action row, next to the buttons. */
.switch--compact {
  gap: var(--space-3xs);
  /* Matches .btn--small's box so the action row lines up. */
  padding: var(--space-3xs) var(--space-sm);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  line-height: 1.4;
}

.switch--compact .switch__track {
  width: 2rem;
  height: 1.125rem;
}

.switch--compact .switch__knob {
  width: 0.875rem;
  height: 0.875rem;
}

.switch--compact .switch__eye {
  width: 0.625rem;
  height: 0.625rem;
}

.switch--compact input:checked ~ .switch__track .switch__knob {
  translate: 0.875rem 0;
}