/* Hide the default radio button visually but keep it accessible */
.hidden-radio {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

/* Style the span or label as the "background" button */
.custom-radio-container {
  display: inline-block;
  margin-right: -6px;
  padding: .2rem .5rem;
  background-color: var(--white);
  border: 2px solid #d1d5db;
  cursor: pointer;
  transition: background-color 0.2s;
}

/* Change the label's look when the hidden radio is checked */
.hidden-radio:checked + span {
  font-weight: bold;
}

/* Target the container background if using sibling selectors */
.hidden-radio:checked ~ .custom-radio-container,
.custom-radio-container:has(.hidden-radio:checked) {
  background-color: var(--link-color);
  color: white;
  border-color: color-mix(in srgb, black 20%, var(--link-color));;
}