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