.root {
    display: flex;
    align-items: center;
    width: fit-content;
    max-width: 337px;
    gap: 8px;
    position: relative;
}

.label {
    cursor: pointer;
    user-select: none;
}

.textTransformUppercase {
    text-transform: uppercase;
}

.textTransformLowercase {
    text-transform: lowercase;
}

.textTransformCapitalize {
    text-transform: capitalize;
}

.textTransformNone {
    text-transform: none;
}

.checkbox {
    cursor: pointer;
    display: none;
}

.visibleCustomCheckbox {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: var(--border-width-sm) solid var(--border-color-light);
    border-radius: var(--border-radius-xxs);
    cursor: pointer;
    background-color: var(--color-white);
    transition: background-color 0.3s, border-color 0.3s;
}

.visibleCustomCheckbox[data-checked="true"] {
    background-color: var(--color-black);
    border-color: var(--color-black);
}

.errorTextContainer {
    display: flex;
    width: 100%;
    max-width: 200px;
    gap: 4px;
    align-items: center;
    position: absolute;
    bottom: -14px;
}

.errorIcon {
    display: flex;
    flex: 0 0 auto;
}

.errorText {
    user-select: none;
    color: var(--color-text-danger-light);
    text-wrap: balance;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.icon {
    display: flex;
    width: fit-content;
    color: var(--color-white);
}

.sm {
    width: 16px;
    height: 16px;
}

.lg {
    width: 20px;
    height: 20px;
}

.sm ~ .errorTextContainer {
    left: calc(16px + 4px);
}

.lg ~ .errorTextContainer {
    left: calc(20px + 4px);
}

.inverted {
    .visibleCustomCheckbox {
        border-color: var(--border-color-alpha-black-10);
        background-color: var(--color-white);
    }
    .label {
        color: var(--color-text-primary-inverted);
    }
    .icon {
        color: var(--color-black)
    }
}

.error {
    .visibleCustomCheckbox {
        border-color: var(--color-urgent-red-500);
        background-color: var(--color-urgent-red-100);
    }
    .visibleCustomCheckbox[data-checked="true"] {
        background-color: var(--color-urgent-red-500);
    }
}

.disabled {
    .visibleCustomCheckbox {
        border-color: var(--border-color-alpha-black-10);
        background-color: var(--color-bg-fill-brand-disabled);
        cursor: not-allowed;
    }
    .label {
        color: var(--color-text-primary-disabled);
        cursor: not-allowed;
    }
}