@use "../abstracts/mixins";

// Form Related -------------------------------------

form:-moz-submit-invalid {
    
    input:invalid {
        border: .2rem var(--destructive) solid;

        transition: border-color var(--transition);
    }
}

// Input and Labels ----------------------------------

// Sets the default behavior

input, 
label, 
textarea {

    // Common vars
    --_spacing-y: var(--md);
    --_spacing-x: var(--lg);

    font-size: 1.6rem;

    cursor: pointer;

    transition: 
        background-color var(--transition),
        filter var(--transition);
}

// Common styling only between inputs and textareas

input,
textarea {

    padding-block: var(--_spacing-y);
    padding-inline: var(--_spacing-x);
    border: .2rem solid var(--primary);
}

textarea {

    background-color: var(--muted-primary);
    resize: none;
    font-family: var(--font-family);
    font-size: var(--font-size);
    outline: none;

    margin-block: var(--spacing);

    &:hover {

        outline: none;
    }

    &:active {
        outline: none;
    }

    &:focus-visible {

        outline: var(--outline);
    }
}

// Label -----------------------------------------------

label,
label:not(:is(
    [role="button"], 
    [role="navigation"]
)) {

    --spacing-y: var(--sm);
    --spacing-x: var(--md);

    --width: 100%;

    width: fit-content;
    height: fit-content;

    padding-block: var(--spacing-y);

    // Styles the label that has a input file as child
    &:has( > input[type="file"]) {

        --_width: var(--w-full, 100%);
        --_font-weight: 600;

        --_border-color: var(--content-text);
        --_bg: transparent;

        aspect-ratio: 1 / .5;

        background-color: var(--_bg);

        font-weight: var(--_font-weight);
        //vertical-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        word-wrap: break-word;
        border: .2rem dashed var(--_border-color);
        width: var(--_width);

        // Padding inline and block

        padding: var(--spacing-y) var(--spacing-x);
        text-align: center;
        position: relative;

        transition: 
            background-color .8s ease,
            border-color .4s var(--transition-out-circle),
            filter .4s ease-in;

        --_effect-level: 125%;
    
        &:hover {
            --_bg: var(--muted-accent);
            --_border-color: var(--text);
        }

        &:active {
            filter: var(--effect-bright);
        }
    }

    // When focusing in the input, styles the label to pretend they're the same

    &:has(> input[type="file"]:focus-visible) {
        --outline: var(--outline-md);

        outline-offset: var(--outline-offset);

        outline: var(--outline);
    }

    // Styles a label that has a input color
    &:has( > input[type="color"]) {
        display: flex;
        align-items: center;
    }

    // Label that has the checkbox

    &:has( > input[type="checkbox"] + span:empty) {
        // as
    }
}

// Styles the input itself

input, 
select {
    //--spacing: var(--md);
    --roundness: var(--xs);
    --bg: var(--muted-primary);
    --_font-size: var(--font-size);
    --width: 100%;

    --_border-color: var(--muted-accent);

    font-weight: 500;

    font-size: var(--_font-size);
    border: .2rem solid var(--_border-color);
    background-color: var(--bg);
    border-radius: var(--roundness);
    outline: none;

    transition: all var(--transition);

    /* &:focus 

        border-color: var(--accent);
    } */

    &::placeholder {
        --text-color: var(--muted-text);

        color: var(--text-color);
    }

    &:focus {

        --_border-color: var(--accent);
    }

    // Removing Style from Selected Types
    // PRESET

    &:is(
        [type="checkbox"],
        [type="color"],
        [type="date"],
        [type="radio"],
        [type="range"] 
    ) {
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;
        accent-color: var(--accent);
    }

    // Radio Input -----------------------------------------------------

    &[type="radio"] {
        border-radius: 50%;
        padding: 0;
        margin: 0;
        width: 1.4em;
        aspect-ratio: 1;
        //padding: .1em;
        display: grid;
        place-items: center;
        
        &::after {
            content: "";
            display: block;
            scale: 0;
            width: 60%;
            border-radius: inherit;
            aspect-ratio: inherit;
            background-color: var(--accent);
            transition: scale .2s var(--transition-out-circle);
        }

        &:checked::after {
            scale: 1;
        }
    }

    // A radio and checkbox common style
    &:is(
        [type="checkbox"],
        [type="radio"]
    ) {
        --_spacing-x: var(--sm);
        --_spacing-y: var(--sm);
    }

    // File Input --------------------------------------------------------

    &[type="file"] {
        position: absolute;
        inset: 0;
        z-index: -20;
        opacity: 0;

        &:focus-visible {
            all: none
        }
    }

    // Color Input --------------------------------------------------------

    &[type="color"] {

        --width: 2.4vmax;

        --bg: transparent;

        padding: 0;
        margin: 0;
        border: none;
        overflow: hidden;
        
        aspect-ratio: 1 / 1;
        
        width: max(var(--width), 2.4vmin);
        border-radius: var(--roundness);
        background-color: var(--bg, transparent);
        
        &::-webkit-color-swatch {
            border-radius: var(--roundness);
            border: .1rem var(--blend-back-color) solid;
        }

        &:is(:active, :focus)::-webkit-color-swatch {
            border: .2rem var(--text) solid;
        }

        transition: border .2s ease;
    }

    // Check Box

    &[type="checkbox"]:not([role="switch"]) {

        overflow: hidden;
        position: relative;
        width: 1.4em;
        height: 1.4em;
        aspect-ratio: 1;

        &:checked::after {
            scale: 45%;
        }

        &::after {
            content: "";

            --borderWidth: .6rem;
            --height: 2em;
            --width: 1em;
            --borderColor: var(--accent);

            position: absolute;
            inset: 0;
            
            transform: rotate(40deg) translate(-60%, -50%);
            height: var(--height);
            width: var(--width);
            scale: 0;
            border-bottom: var(--borderWidth) solid var(--borderColor);
            border-right: var(--borderWidth) solid var(--borderColor);

            transition: inherit;
        }
    }

    // Date Input

    &[type="date"], &[type="time"], &[type="datetime-local"] {
        --bg: var(--primary);
        --text-color: var(--text);
        --font-weight: 500;

        display: inline-flex;
        align-items: center;
        text-align: center;
        vertical-align: center;
        background-color: var(--bg);
        color: var(--text-color);
        border: none;
        padding: .4vmin .8vmin;
        border-radius: var(--roundness);

        font-family: var(--font-family);
        font-weight: var(--font-weight);
        letter-spacing: .2ch;

        &:hover {
            --bg: var(--accent);
        }

        &:active {
            filter: brightness(125%);
        }

        &::-webkit-calendar-picker-indicator {
            background-color: var(--secondary);
            padding: .6vmin .8vmin;
            border-radius: var(--roundness);
            align-self: center;
            margin-top: 2.4%;
            cursor: pointer;
        }
    }


    // Range Input -------------------------------------------------

    &[type="range"] {
        --width: 100%;
        --bg: transparent;
        --roundness: 100vmax;
        --spacing: .4vmin;
    
        height: fit-content;
        padding: 0;
        width: var(--width); /* Corrected typo here */
        background-color: var(--bg, transparent);
        border-radius: var(--roundness);
    
        outline-offset: .2rem;
        // Styling the line track
    }

    &:is([type="checkbox"], [type="radio"]):focus-visible {

        --outline-offset: var(--outline-lg);

        outline-offset: var(--outline-offset);
        outline: var(--outline);
    }

    &[type="search"] {

        --spacing-x: var(--lg);

        --roundness: var(--round-peal);

        text-transform: capitalize;
        padding-inline: var(--spacing-x);
        position: relative;

        @include icon-background(var(--search-icon));
    }
}