.btn--toggle {
  --btn-background: var(--color-bg);
}

.btn--toggle :is([type="checkbox"], [type="radio"]) {
  position: absolute; clip: rect(0, 0, 0, 0);
}

.btn--toggle:has(:checked) {
  --btn-background: var(--color-border-light);
}

.btn--toggle:has(:focus-visible) {
  outline: var(--border-2) solid var(--color-selected-dark);
}

/* Native checkbox/radio buttons share Pehuén selection and keyboard focus. */
.btn--toggle {
  --btn-color: var(--pehuen-primary-700);
  --btn-hover-color: var(--pehuen-primary-50);
  text-align: center;
  white-space: normal;
}

.btn--toggle:has(:checked) {
  --btn-background: var(--pehuen-primary-100);
  --btn-border-color: var(--pehuen-primary-700);
  --btn-hover-color: var(--pehuen-primary-200);
}

.btn--toggle:has(:focus-visible) {
  outline-color: var(--pehuen-primary-700);
  z-index: 1;
}