/* https://codepen.io/nonsalant/pen/zYaqjpK/a4a3062d9ebde51f31d0f29fdc276eed */
/* text-like inputs and textarea styles */

:where(input:is([type="text"], [type="email"], [type="password"]), textarea) {
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    font-size: 1rem;
    font-weight: 400;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 
                0 1px 2px 0 rgba(0, 0, 0, 0.06);
    padding-block: 0.35rem;
    padding-inline: 0.75rem;
    border-radius: 0.25rem;
    appearance: none;
    position: relative;
    outline-offset: 0; 
    outline-width: 1.5px;
    color: hsl(var(--clr-dark-hsl) / 1);
    background-color: hsl(var(--clr-light-hsl) / 0.6);
    background-color: hsl(var(--clr-light-hsl) / 1);
    /* background-color: red; */
    border: solid 1.5px hsl(var(--clr-dark-hsl) / 0.5);
    mix-blend-mode: luminosity;

    &:focus {
        color: hsl(var(--clr-darker-hsl) / 1);
        background-color: hsl(var(--clr-light-hsl) / 1);
        border: solid 1.5px hsl(var(--clr-darker-hsl) / 0.8);
        /* outline-color: hsl(var(--clr-darker-hsl) / 0.8); */
    }
    /* &:focus:not(:focus-visible) {
        outline: 0 !important;
    } */
    &::placeholder {
        color: hsl(var(--clr-dark-hsl) / 0.75);
    }
    &:focus::placeholder {
        color: hsl(var(--clr-dark-hsl) / 0.75);
    }
    /* &:-internal-autofill-selected {
        filter: invert(1) hue-rotate(180deg);
        border: solid 1.5px hsl(var(--clr-light-hsl) / 0.1);
        outline-color: hsl(var(--clr-light-hsl));
        box-shadow: unset;
    } */
}

label {
    font-weight: 600;
    letter-spacing: -.0175em;
    color: var(--clr-blue-desaturated-700);
}

label:has(svg) {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: .25em;
    /* margin-inline-start: -.9rem; */

    svg {
      width: 1.5rem;
      height: 1.5rem;
      color: var(--clr-blue-700);
    }
}



/**/

/* .panel > small {
    display: block;
    opacity: 75%;
    text-wrap: balance;
    line-height: 1.75;
    font-weight: 600;
} */