/* Component: Checkbox
 * Description: Custom styled checkbox input with primary branding color, rounded corners, and animated checkmark.
 *              Includes hover, focus, disabled, and checked states for improved accessibility and user experience.
 */
 
.smd-component_checkbox {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-background-lighter);
    border-radius: 4px;
    background: var(--color-background-deep);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    vertical-align: middle;
}

.smd-component_checkbox:hover {
    border-color: var(--color-branding-primary);
}

.smd-component_checkbox:focus {
    outline: 2px solid var(--color-branding-primary);
    outline-offset: 2px;
}

.smd-component_checkbox:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.smd-component_checkbox:checked {
    background: var(--color-branding-primary);
    border-color: var(--color-branding-primary);
}

.smd-component_checkbox:checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}