* {
  box-sizing: var(--air-box-sizing, border-box);
}

:host {
  display: var(--air-radio-button-host-display, block);
}

.radio-button {
  display: var(--air-radio-button-display, flex);
  align-items: var(--air-radio-button-align-items, center);
  position: relative;
  min-height: var(--air-radio-button-outer-circle-height, 16px);
  padding-left: var(--air-radio-button-padding-left, calc(var(--air-radio-button-outer-circle-width, 16px) + var(--air-spacing-02, 0.5rem)));
  margin-top: var(--air-radio-button-margin-top, 0);
  margin-right: var(--air-radio-button-margin-right, 0);
  margin-bottom: var(--air-radio-button-margin-bottom, var(--air-spacing-03, 1rem));
  margin-left: var(--air-radio-button-margin-left, 0);
  box-sizing: var(--air-radio-button-box-sizing, var(--air-box-sizing, border-box));
}
.radio-button:not(.disabled) {
  cursor: var(--air-radio-button-cursor, pointer);
}
.radio-button::before, .radio-button::after {
  position: absolute;
  content: "";
  box-sizing: var(--air-radio-button-box-sizing, var(--air-box-sizing, border-box));
}
.radio-button::before {
  width: var(--air-radio-button-outer-circle-width, 16px);
  height: var(--air-radio-button-outer-circle-height, 16px);
  top: var(--air-radio-button-outer-circle-top, 4px);
  left: var(--air-radio-button-outer-circle-left, 0);
  border: var(--air-radio-button-outer-circle-border, 1px solid var(--air-color-eclipse, #3a3a3a));
  border-radius: var(--air-radio-button-outer-circle-border-radius, 50%);
  background-color: var(--air-radio-button-outer-circle-background-color, var(--air-color-white, #ffffff));
}
.radio-button::after {
  display: none;
  width: var(--air-radio-button-inner-circle-width, 8px);
  height: var(--air-radio-button-inner-circle-height, 8px);
  top: var(--air-radio-button-inner-circle-top, 8px);
  left: var(--air-radio-button-inner-circle-left, 4px);
  border-radius: var(--air-radio-button-inner-circle-border-radius, 50%);
  background-color: var(--air-radio-button-inner-circle-background-color, var(--air-color-accent, #8a2be2));
}
.radio-button[aria-checked]::after {
  display: block;
}
.radio-button:focus {
  outline: none;
}
.radio-button:focus:not(.disabled)::before {
  box-shadow: 0 0 0 var(--air-radio-button-outer-circle-focus-width, var(--air-focus-outline-width, 2px)) var(--air-radio-button-outer-circle-focus-color, var(--air-focus-outline-color, var(--air-color-primary-outline, var(--air-color-denim, #2e71bd))));
}
.radio-button:hover::before {
  background-color: var(--air-radio-button-outer-circle-hover-background-color, var(--air-color-gainsboro, #d8d8d8));
}
.radio-button.disabled::before {
  border: var(--air-radio-button-outer-circle-disabled-border, none);
  background-color: var(--air-radio-button-outer-circle-disabled-background-color, var(--air-color-gainsboro, #d8d8d8));
}
.radio-button .label {
  color: var(--air-radio-button-label-color, var(--air-body-color, var(--air-color-eclipse, #3a3a3a)));
  font-family: var(--air-radio-button-label-font-family, var(--air-body-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"));
  font-weight: var(--air-radio-button-label-font-weight, var(--air-body-font-weight, 400));
  font-size: var(--air-radio-button-label-font-size, var(--air-body-font-size, 1rem));
  line-height: var(--air-radio-button-label-line-height, var(--air-body-line-height, 1.5));
}
.radio-button .required-mark {
  color: var(--air-radio-button-mark-required-color, var(--air-color-error, var(--air-color-valencia, #e55451)));
}
.radio-button.status-error::before {
  border: var(--air-radio-button-checkmark-status-error-border, 1px solid var(--air-color-error, var(--air-color-valencia, #e55451)));
}
.radio-button.status-error .label {
  color: var(--air-radio-button-label-status-error-color, var(--air-color-error, var(--air-color-valencia, #e55451)));
}

@media (max-width: 992px) {
  .radio-button {
    padding-left: var(--air-mobile-radio-button-padding-left, calc(var(--air-mobile-radio-button-outer-circle-width, 24px) + var(--air-spacing-02, 0.5rem)));
    min-height: var(--air-mobile-radio-button-outer-circle-height, 24px);
  }
  .radio-button::before {
    width: var(--air-mobile-radio-button-outer-circle-width, 24px);
    height: var(--air-mobile-radio-button-outer-circle-height, 24px);
    top: var(--air-mobile-radio-button-outer-circle-top, 0);
    left: var(--air-mobile-radio-button-outer-circle-left, 0);
  }
  .radio-button::after {
    width: var(--air-mobile-radio-button-inner-circle-width, 16px);
    height: var(--air-mobile-radio-button-inner-circle-height, 16px);
    top: var(--air-mobile-radio-button-inner-circle-top, 4px);
    left: var(--air-mobile-radio-button-inner-circle-left, 4px);
  }
}