:root {
    --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 {
    --checkbox-group-error-color: var(--color-light-text-negative);
    --checkbox-group-hint-color: var(--color-light-text-secondary);
}
.component {
    display: flex;
    flex-direction: column;
}
.checkboxList {
    display: flex;
}
.vertical .checkboxList {
    flex-direction: column;
    align-items: flex-start;
}
.vertical .checkbox {
    margin-bottom: var(--gap-12);
}
.vertical .checkbox:last-child {
        margin-bottom: var(--gap-0);
    }
.horizontal .checkboxList {
    flex-wrap: wrap;
    margin-bottom: var(--gap-8-neg);
}
.horizontal .checkbox {
    margin-right: var(--gap-24);
    margin-bottom: var(--gap-8);
}
.horizontal .tagLabel {
    margin-right: var(--gap-8);
}
.horizontal .checkbox:last-child,
.horizontal .tagLabel:last-child {
    margin-right: var(--gap-0);
}
.errorMessage {
    color: var(--checkbox-group-error-color);
}
.hint {
    color: var(--checkbox-group-hint-color);
}
.hiddenInput {
    position: absolute;
    z-index: -1;
    top: var(--gap-0);
    left: var(--gap-0);
    opacity: 0;
}
.tagLabel {
    position: relative;
    max-width: 100%;
}