/* https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/ */

.kz-radio {
  --checked-state-bg-color: var(--color-klezmer-life);
  --checked-state-radio-color: var(--color-klezmer-earth);

  /* Create a postioning context for the checkbox within the label */
  position: relative;
  cursor: pointer;

  /* Other label styles here */
  align-items: center;
  display: flex;
  gap: var(--space-xs);
}

.kz-radio + .kz-radio {
  &:not(.kz-cluster &) {
    margin-block-start: var(--space-s);
  }
}

.kz-radio span {
  line-height: var(--line-height-condensed);
}

.kz-radio input[type='radio'] {
  /* Remove the checkbox from flow */
  position: absolute;

  /* Hide it visually */
  opacity: 0;

  /* Tweak size and position if needed */
  width: 1em;
  height: 1em;
  margin: 0;
}

/* Visually show focus outline when the SVG receives focus */
.kz-radio:has(input[type='radio']:focus-visible) {
  outline: 2px solid var(--color-utility-orange);
  outline-offset: 2px;
}

/* Hide the focus styles for mouse users */
.kz-radio input[type='radio']:focus:not(:focus-visible) + svg {
  outline: none;
}

/* Basic styles for the SVG */
.kz-radio svg {
  /* Set SVG dimensions in ems; i.e. relative to the font size so that it scales with the size of the text in the label */
  width: 1em;
  height: 1em;
}
.kz-radio svg * {
  /* Apply a transition to the elements inside the SVG */
  transition: all 0.1s linear;
}

.kz-radio input[type='radio'] + svg .kz-radio__checkmark {
  fill: var(--checked-state-radio-color);
  stroke: var(--checked-state-radio-color);
  transform: scale(0);
  transform-origin: center;
}

/* Style changes inside the SVG when the radio is selected */
.kz-radio input[type='radio']:checked + svg .kz-radio__bg {
  fill: var(--checked-state-bg-color);
  stroke: var(--checked-state-bg-color);
}

.kz-radio input[type='radio']:checked + svg .kz-radio__checkmark {
  transform: scale(100%);
}

.kz-radio svg {
  @media screen and (-ms-high-contrast: active) {
    .kz-radio__bg {
      stroke: windowText;
    }
  }
}

@media screen and (-ms-high-contrast: active) {
  .kz-radio input[type='radio']:checked + svg .kz-radio__bg {
    fill: windowText;
  }

  .kz-radio input[type='radio']:checked + svg .kz-radio__checkmark {
    stroke: highlight;
  }
}