: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%;
}