// ============================================================================
// Elements | Form
// ============================================================================

@use "../../dev" as *;
@use "../../variables" as *;

@use "../soul_type" as *;

@mixin checkbox {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    width: baseline(4);
    height: baseline(4);
    flex-shrink: 0;
    border-radius: q(4);
    border: q(1) solid var(--color_text_primary);
    position: relative;
    cursor: pointer;
    pointer-events: initial;

    &:hover {
        background: hue_color("N2402");
    }

    &::after {
        content: "";
        position: absolute;
        top: baseline(0.5);
        left: baseline(1.3);
        // transform: translate(-60%, -50%);
        width: baseline(1);
        height: baseline(2);
        border: solid white;
        border-width: 0 q(2) q(2) 0;
        transform: rotate(45deg);
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    &:checked {
        background: var(--color_text_primary);

        &::after {
            opacity: 1;
        }
    }

    &:disabled {
        border-color: var(--color_state_muted);
        background-color: var(--color_fill_primary);
        cursor: not-allowed;
    }
}

///
/// Base styles for checkboxes
/// @group Form
///
input[type="checkbox"] {
    @include checkbox;
}

// /// Checkbox component styling
// /// @group Form
// .checkbox {
//     font-size: 0.875rem;
//     position: relative;
//     display: flex;
//     padding-left: 2.625rem;
//     cursor: pointer;
//     -webkit-user-select: none;
//     -moz-user-select: none;
//     -ms-user-select: none;
//     user-select: none;
//     color: var(--color-primary);
//     align-items: center;
// }

// /// Checkbox checkmark styling
// /// @group Form
// .checkbox__checkmark {
//     position: absolute;
//     top: 50%;
//     left: 0;
//     display: flex;
//     width: 1.5625rem;
//     height: 1.5625rem;
//     transform: translateY(-50%);
//     background-color: transparent;
//     box-shadow: inset 0 0 0 q(1) var(--color-3);
//     align-items: center;
//     justify-content: center;
// }

// .checkbox__checkmark::after {
//     font-family: var(--linear-icons-light);
//     display: none;
//     content: '\eb9d';
//     color: var(--color-background);
// }

// .checkbox input[type=checkbox]:checked ~ .checkbox__checkmark {
//     background-color: var(--accent-1);
//     box-shadow: inset 0 0 0 q(1) var(--accent-1);
// }

// .checkbox input[type=checkbox]:checked ~ .checkbox__checkmark::after {
//     display: block;
// }

// .checkbox
// {
//     font-size: .875rem;

//     position: relative;

//     display: -webkit-box;
//     display: -webkit-flex;
//     display: -ms-flexbox;
//     display:         flex;

//     padding-left: 2.625rem;

//     cursor: pointer;
//     -webkit-user-select: none;
//        -moz-user-select: none;
//         -ms-user-select: none;
//             user-select: none;

//     color: var(--color-primary);

//     -webkit-box-align: center;
//     -webkit-align-items: center;
//     -ms-flex-align: center;
//             align-items: center;
// }
// .checkbox__checkmark
// {
//     position: absolute;
//     top: 50%;
//     left: 0;

//     display: -webkit-box;
//     display: -webkit-flex;
//     display: -ms-flexbox;
//     display:         flex;

//     width: 1.5625rem;
//     height: 1.5625rem;

//     -webkit-transform: translateY(-50%);
//         -ms-transform: translateY(-50%);
//             transform: translateY(-50%);

//     background-color: transparent;
//     -webkit-box-shadow: inset 0 0 0 q(1) var(--color-3);
//             box-shadow: inset 0 0 0 q(1) var(--color-3);

//     -webkit-box-align: center;
//     -webkit-align-items: center;
//     -ms-flex-align: center;
//             align-items: center;
//     -webkit-box-pack: center;
//     -webkit-justify-content: center;
//     -ms-flex-pack: center;
//             justify-content: center;
// }
// .checkbox__checkmark::after
// {
//     font-family: var(--linear-icons-light);

//     display: none;

//     content: '\eb9d';

//     color: var(--color-background);
// }
// .checkbox input[type=checkbox]:checked ~ .checkbox__checkmark
// {
//     background-color: var(--accent-1);
//     -webkit-box-shadow: inset 0 0 0 q(1) var(--accent-1);
//             box-shadow: inset 0 0 0 q(1) var(--accent-1);
// }
// .checkbox input[type=checkbox]:checked ~ .checkbox__checkmark::after
// {
//     display: block;
// }