/* ============================================================================
   06-COMPONENTS -> #CHECKBOX
   ========================================================================= */

/**
 * An input that allows the user to select multiple values from a list of
 * options.
 */


@use 'sass:math' as *;
@use '../01-settings' as *;
@use '../02-tools' as *;
  
  
/**
 * Checkbox
 *
 * 1. Change 'cursor' value to 'pointer' to indicate the whole area is
 *    clickable.
 */
 
.checkbox {
    --checkbox-bg: var(--form-option-bg);
    --checkbox-active-bg: var(--form-option-active-bg);
    --checkbox-border-color: var(--form-input-border-color);
    --checkbox-border-radius: var(--rounded-xs);
    --checkbox-border-width: var(--form-input-border-width);
    --checkbox-color: var(--form-input-color);
    --checkbox-size: var(--space-4);

    align-items: FLEX-start;
    display: flex;
    flex-direction: row;
    position: relative;
    
    & > .label {
        cursor: pointer; // [1]
        margin-left: var(--space-2);
    }
}
 
 
 /**
  * checkbox input
  * 
  * 1. Change 'cursor' value to 'pointer' to indicate the whole area is
  *    clickable.
  */
 
.checkbox__input {
    @include form-input-focus;
    appearance: none;
    background-color: var(--color-white);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border: var(--checkbox-border-width) solid var(--checkbox-border-color);
    border-radius: var(--checkbox-border-radius);
    cursor: pointer; // [1]
    flex-shrink: 0;
    height: var(--checkbox-size);
    margin: 0;
    vertical-align: top;
    width: var(--checkbox-size);
    
    &:checked {
        background-color: var(--checkbox-active-bg);
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.7 8.7a1 1 0 1 0-1.4-1.4l-6.9 7.3-3.7-3.3a1 1 0 0 0-1.4 1.4l4.5 4c.4.4 1 .4 1.4 0l7.5-8Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
        border-color: var(--checkbox-active-bg);
    }       
}