.radio {
    display: inline-flex;
    position: relative;
    vertical-align: text-bottom;
}
.radio__control[type="radio"] {
    height: 18px;
    min-width: 18px;
    width: 18px;
}
.radio--large .radio__control[type="radio"] {
    height: 24px;
    min-width: 24px;
    width: 24px;
}
span.radio__icon {
    display: inline-flex;
    height: 18px;
    outline-offset: 1px;
}
.radio--large span.radio__icon {
    height: 24px;
}
span.radio__icon[hidden] {
    display: inline-flex;
}
svg.radio__checked {
    color: var(--radio-checked-color, var(--color-foreground-primary));
}
svg.radio__unchecked {
    color: var(--radio-unchecked-color, var(--color-foreground-primary));
}
input.radio__control[type="radio"] {
    font-size: 100%;
    margin: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    z-index: 1;
}
.radio svg {
    display: inline-block;
    fill: currentColor;
    height: 18px;
    pointer-events: none;
    stroke: currentColor;
    stroke-width: 0;
    vertical-align: middle;
    width: 18px;
}
.radio--large svg {
    height: 24px;
    width: 24px;
}
input.radio__control[type="radio"] + span.radio__icon svg.radio__checked {
    display: none;
}
input.radio__control[type="radio"] + span.radio__icon svg.radio__unchecked,
input.radio__control[type="radio"]:checked
    + span.radio__icon
    svg.radio__checked {
    display: inline-block;
}
input.radio__control[type="radio"]:checked
    + span.radio__icon
    svg.radio__unchecked {
    display: none;
}
input.radio__control[type="radio"][disabled] + span.radio__icon {
    opacity: 1;
}
input.radio__control[type="radio"][disabled] + span.radio__icon svg {
    fill: var(--radio-disabled-color, var(--color-foreground-disabled));
}
input.radio__control[type="radio"]:focus + span.radio__icon {
    outline: 1px auto;
    outline-color: var(--radio-outline, var(--color-foreground-secondary));
    outline-offset: 2px;
}
input.radio__control[type="radio"]:focus:not(:focus-visible)
    + span.radio__icon {
    outline: none;
}