/* generic aura radio */
.aura-radio {
  position: var(--aura-position-absolute);
  appearance: var(--aura-none);
  cursor: var(--aura-cursor-pointer);
  width: var(--aura-unit-1-point-9-em);
  height: var(--aura-unit-1-point-9-em);
  margin: var(--aura-margin-0);
  border-radius: var(--aura-border-radius-50-perc);
}

.aura-radio + .aura-radio-label {
  display: var(--aura-display-flex);
  align-items: var(--aura-align-items-center);
  cursor: var(--aura-cursor-pointer);
  color: var(--aura-secondary);
}

.aura-radio + .aura-radio-label:before {
  content: '';
  border-radius: var(--aura-border-radius-50-perc);
  border: var(--aura-unit-point-one-rem) var(--aura-border-type-solid)
    var(--aura-secondary);
  width: var(--aura-unit-1-point-4-em);
  height: var(--aura-unit-1-point-4-em);
  margin-right: var(--aura-unit-10-px);
  cursor: var(--aura-cursor-pointer);
}

.aura-radio:focus + .aura-radio-label:before {
  box-shadow: var(--aura-box-shadow-inset) var(--aura-unit-0-px)
    var(--aura-unit-0-px) var(--aura-unit-0-px) var(--aura-unit-1-px)
    var(--aura-secondary);
}

.aura-radio:checked + .aura-radio-label:before {
  box-shadow: var(--aura-box-shadow-inset) var(--aura-unit-0-px)
    var(--aura-unit-0-px) var(--aura-unit-0-px) var(--aura-unit-4-px)
    var(--aura-white);
  background-color: var(--aura-secondary);
}

/* warn aura radio */
.aura-radio.aura-radio-warn:not(:checked) + .aura-radio-label:before {
  border: var(--aura-unit-point-one-rem) var(--aura-border-type-solid)
    var(--aura-warn);
}

.aura-radio.aura-radio-warn:focus:not(:checked) + .aura-radio-label:before {
  box-shadow: var(--aura-box-shadow-inset) var(--aura-unit-0-px)
    var(--aura-unit-0-px) var(--aura-unit-0-px) var(--aura-unit-1-px)
    var(--aura-warn);
}

.aura-radio.aura-radio-warn:checked + .aura-radio-label:before {
  background-color: var(--aura-secondary);
}

/* disabled aura radio*/
.aura-radio:disabled,
.aura-radio:disabled + .aura-radio-label {
  cursor: var(--aura-default);
  color: var(--aura-gray-700);
}

.aura-radio:disabled + .aura-radio-label:before {
  background-color: var(--aura-white);
  border: var(--aura-unit-1-px) var(--aura-border-type-solid)
    var(--aura-medium-gray);
}

.aura-radio:disabled:checked + .aura-radio-label:before {
  background-color: var(--aura-gray-700);
  box-shadow: var(--aura-box-shadow-inset) var(--aura-unit-0-px)
    var(--aura-unit-0-px) var(--aura-unit-0-px) var(--aura-unit-4-px)
    var(--aura-lightgray);
}