toggle-corp/react-store

:root {
    --width-checkbox-checkmark: var(--font-size-medium);
}

.checkbox {
    display: flex;
    cursor: pointer;
    user-select: none;

    .checkmark {
        margin-right: var(--spacing-extra-small);
        width: var(--width-checkbox-checkmark);
    }

    .input {
        display: none;
    }

    .label {
        color: var(--color-text);
        font-weight: var(--font-weight-normal);
    }

    &.checked {
        .checkmark {
            color: var(--color-accent);
        }
    }

    &.disabled {
        .checkmark {
            color: var(--color-text-disabled);
        }

        .label {
            color: var(--color-text-disabled);
        }

        .input {
            border-bottom-color: var(--color-separator);
            color: var(--color-text-disabled);
        }
    }

    &.read-only {
        .checkmark {
            color: var(--color-text);
        }
    }
}