:root {
    --color-light-status-info: #2288fa;
    --color-light-text-negative: #ec2d20;
    --color-light-text-secondary: rgba(4, 4, 19, 0.55);
}
:root {
    --gap-xs: 8px;
    --gap-s: 12px;
    --gap-xl: 24px;
    --gap-xs-neg: -8px;
    --gap-0: 0px;
    --gap-8: var(--gap-xs);
    --gap-12: var(--gap-s);
    --gap-24: var(--gap-xl);
    --gap-8-neg: var(--gap-xs-neg);
}
:root {
    --focus-color: var(--color-light-status-info);
}
:root {
    --radio-group-hint-color: var(--color-light-text-secondary);
    --radio-group-error-color: var(--color-light-text-negative);
}
.component {
    display: flex;
    flex-direction: column;
}
.radioList {
    display: flex;
}
.verticalRadioList {
    flex-direction: column;
    align-items: flex-start;
}
.horizontalRadioList {
    flex-wrap: wrap;
    margin-bottom: var(--gap-8-neg);
}
.verticalRadio {
    margin-bottom: var(--gap-12);
}
.verticalRadio:last-child {
        margin-bottom: var(--gap-0);
    }
.horizontalRadio {
    margin-right: var(--gap-24);
    margin-bottom: var(--gap-8);
}
.horizontalTagLabel {
    margin-right: var(--gap-8);
}
.horizontalRadio:last-child,
.horizontalTagLabel:last-child {
    margin-right: var(--gap-0);
}
.errorMessage {
    color: var(--radio-group-error-color);
}
.hint {
    color: var(--radio-group-hint-color);
}
.hiddenInput {
    position: absolute;
    z-index: -1;
    top: var(--gap-0);
    left: var(--gap-0);
    opacity: 0;
}
.hiddenInput:focus ~ button {
        outline: 2px solid var(--focus-color);
        outline-offset: 2px;
    }
.tagLabel {
    position: relative;
    max-width: 100%;
}