label:has(input[type="radio"]) {
  z-index: 1;

  transition: all 250ms ease;
  cursor: pointer;
  border: none;
  border-radius: 0;

  background: var(--md-sys-color-surface-variant);
  padding-inline: 12px;

  aspect-ratio: unset;
  height: 1.5em;
  color: var(--md-sys-color-on-surface-variant);

  font-size: 16px;

  > input[type="radio"] {
    display: none;
  }

  &:first-child {
    border-radius: 16px 0 0 16px;
  }

  &:last-child {
    border-radius: 0 16px 16px 0;
  }

  &:has(:checked) {
    background: var(--md-sys-color-tertiary);
    color: var(--md-sys-color-on-tertiary);
    font-weight: 900;
  }
}