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

/**
 * 
 */


@use 'sass:math' as *;
@use '../01-settings' as *;
@use '../02-tools' as *;
 
 
//
// Settings
//
 
$option-size: var(--space-4);

 
/**
  * Option
  *
  * 1. Change 'cursor' value to 'pointer' to indicate the whole area is
  *    clickable.
  */

.option {
    --option-bg: var(--form-option-bg);
    --option-border-color: var(--form-input-border-color);
    --option-border-radius: var(--radius-xs);
    --option-border-width: var(--form-input-border-width);
    --option-height: var(--space-5);
    --option-icon-bg: var(--color-white);
    --option-icon-offset: .125rem;
    --option-icon-size: var(--space-4);
    --option-label-color: var(--form-label-color);
    --option-label-font-weight: var(--form-label-font-weight);
    --option-width: var(--space-9);
    --option-active-bg: var(--form-option-active-bg);

    padding-left: var(--form-option-size);
    position: relative;

    & > .label {
        cursor: pointer; // [1]
        margin-left: var(--space-2);
    }
}


/**
 * Option input
 * 
 * 1. Change 'cursor' value to 'pointer' to indicate the whole area is
 *    clickable.
 */

.option__input {
    --option-bg: var(--form-option-bg);
    --option-active-bg: var(--form-option-active-bg);
    --option-border-color: var(--form-input-border-color);
    --option-border-width: var(--form-input-border-width);
    --option-color: var(--form-input-color);
    --option-size: var(--space-4);

    @include form-input-focus;
    appearance: none;
    background-color: var(--form-option-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: var(--option-border-width) solid var(--option-border-color);
    cursor: pointer; // [1]
    height: var(--option-icon-size);
    left: 0;
    margin: 0;
    position: absolute;
    top: var(--space-1);
    vertical-align: top;
    width: var(--option-icon-size);

    &:checked {
        background-color: var(--option-active-bg);
        border-color: var(--option-active-bg);
    }

    &[type=checkbox] {
        border-radius: var(--rounded-sm);

        &:checked {
        background-color: var(--form-option-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");
        }
    }

    &[type=radio] {
        border-radius: 50%;
    
        &:checked {
            background-color: var(--form-option-active-bg);
            background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='6' fill='%23FFFFFF'/%3E%3C/svg%3E%0A");
        }
    }
}