/* radio buttons */

.radio {
  display: block;
  min-height: 1.5rem;
  padding-inline-start: var(--hiq-radio-label-padding-horizontal);
  margin-bottom: var(--hiq-radio-margin-bottom);

  & label {
    display: inline-block;
    margin-bottom: 0;
    font-weight: var(--hiq-radio-label-font-weight);
  }

  input {
    width: var(--hiq-radio-width);
    height: var(--hiq-radio-height);
    margin-top: .25em;
    margin-inline-start: -1.5em;
    vertical-align: top;
    background-color: var(--hiq-radio-background-color);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    appearance: none;
  }

  & input[type='radio'] {
    border-radius: var(--hiq-radio-border-radius);

    &:checked {
      background-image: var(--hiq-radio-background-image);
      background-color: var(--hiq-radio-checked-background-color);
      border-color: var(--hiq-radio-checked-border-color);
    }

    &:focus {
      outline: var(--hiq-outline-color) solid var(--hiq-outline-width);
    }

    &:--not-writable + label {
      color: var(--hiq-disabled-text-color);
    }

    &:disabled,
    &[aria-disabled] {
      cursor: not-allowed;
    }

    &:--not-writable {
      background-color: var(--hiq-disabled-background-color);
    }
  }
}
