@import '../../vars.css';

.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);

    &: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;

    &:focus ~ button {
        @mixin focus-outline;
    }
}

.tagLabel {
    position: relative;
    max-width: 100%;
}