html {
  box-sizing: border-box;
}

body {
  margin: 0;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  -webkit-tap-highlight-color: transparent;
}

:host {
  font-family: var(--c-font-family);
}

::-ms-reveal {
  display: none;
}

:host {
  /**
   * @prop --c-radio-group-background-color-hover: Radio button hover background color
   * @prop --c-radio-group-color: Radio button color
   * @prop --c-radio-group-color-active: Active radio button color
   * @prop --c-radio-group-color-disabled: Disabled radio button color
   */
  --_c-radio-group-background-color-hover: var(--c-radio-group-background-color-hover, rgba(var(--c-primary-rgb), 0.1));
  --_c-radio-group-color: var(--c-radio-group-color, var(--c-primary-600));
  --_c-radio-group-color-active: var(--c-radio-group-color-active, var(--_c-radio-group-color));
  --_c-radio-group-color-disabled: var(--c-radio-group-color-disabled, var(--c-tertiary-500));
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: fit-content;
}

.c-radio-group {
  --_c-radio-group-error-color: var(--c-error-600);
  --_c-radio-flex-direction: column;
  --_c-radio-item-gap: 2px;
}
.c-radio-group__items {
  display: flex;
  flex-flow: var(--_c-radio-flex-direction) wrap;
  gap: var(--_c-radio-item-gap);
}
.c-radio-group__label span.required {
  color: var(--_c-radio-group-error-color);
}
.c-radio-group--disabled {
  --_c-radio-group-color: var(--_c-radio-group-color-disabled);
  --_c-radio-group-error-color: var(--_c-radio-group-color-disabled);
  color: var(--_c-radio-group-color-disabled);
  cursor: default;
  opacity: 0.75;
}
.c-radio-group--error {
  --_c-radio-group-color: var(--_c-radio-group-error-color);
  --_c-radio-group-color-active: var(--_c-radio-group-error-color);
  color: var(--_c-radio-group-error-color);
}
.c-radio-group--inline {
  --_c-radio-flex-direction: row;
  --_c-radio-item-gap: 12px;
}

.c-radio {
  align-items: flex-start;
  display: flex;
  position: relative;
  cursor: pointer;
  font-size: 16px;
  user-select: none;
  gap: 4px;
  line-height: 1.2;
}
.c-radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.c-radio input:checked ~ .ripple .selection::after {
  display: block;
  transform: scale(1);
}
.c-radio .ripple {
  position: relative;
  height: 42px;
  width: 42px;
  min-width: 42px;
  border-radius: 50%;
  overflow: hidden;
  transition: translateZ(0);
  color: var(--_c-radio-group-color);
}
.c-radio .selection {
  position: absolute;
  top: 11px;
  left: 11px;
  height: 20px;
  width: 20px;
  background-color: transparent;
  box-shadow: inset 0 0 0 2px var(--_c-radio-group-color);
  border-radius: 50%;
  transition: box-shadow 0.15s ease-in-out;
}
.c-radio .selection::after {
  content: "";
  position: absolute;
  transform: scale(0);
  transition: transform 0.15s ease-in-out;
  top: 5px;
  left: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--_c-radio-group-color-active);
}
.c-radio__label {
  padding-top: 12px;
}
.c-radio--disabled {
  --_c-radio-group-color: var(--_c-radio-group-color-disabled);
  --_c-radio-group-color-active: var(--_c-radio-group-color-disabled);
  color: var(--_c-radio-group-color);
  cursor: default;
  opacity: 0.75;
}
.c-radio--error {
  --_c-radio-group-color: var(--_c-radio-group-error-color);
  color: var(--_c-radio-group-error-color);
}
.c-radio--error span,
.c-radio--error svg {
  fill: var(--_c-radio-group-error-color);
  color: var(--_c-radio-group-error-color);
}
.c-radio input:focus {
  outline: none;
}
.c-radio input:focus + .ripple {
  outline: 2px var(--_c-radio-group-color-active) solid;
}
@supports selector(:focus-visible) {
  .c-radio input:focus + .ripple {
    outline: none;
  }
}
.c-radio input:focus-visible + .ripple {
  outline: 2px var(--_c-radio-group-color) solid;
}
.c-radio:not(.c-radio--disabled) .ripple:hover {
  background-color: var(--_c-radio-group-background-color-hover);
}