/*

-------------------------------------------------------------------------------
 TEMPLATE
-------------------------------------------------------------------------------

<div class='textbox' validator="required">
    <div class='textbox--leading material-icons'>key</div>
    <div class='textbox--trailing textbox--button material-icons'>visibility_off</div>
    <input id="password" class='textbox--input selectable' type='password' placeholder="Mot de passe" 
        spellcheck='false' autofocus autocomplete="password" />
    <div class='field--info'></div>
    <div class='field--error'></div>
</div>

-------------------------------------------------------------------------------
 OPTIONAL CLASS
-------------------------------------------------------------------------------
--disabled (and add disabled property on input element)
--error
-------------------------------------------------------------------------------
textbox--button (for leading or trailing icon)
-------------------------------------------------------------------------------
 OPTIONAL STYLE
-------------------------------------------------------------------------------
color : "--hue:270;--saturation:50%" // purple
color : "--hue:210;--saturation:30%" // blue
color : "--hue:120;--saturation:30%" // green
color : "--hue:60;--saturation:50%"  // yellow
color : "--hue:0;--saturation:50%"   // red
-------------------------------------------------------------------------------

*/

div.textbox{

    --width: 240px;
    --gap: 4px;
    --saturation-gray: 0%;
    --saturation-color: 30%;
    --hue: 210; --saturation: var(--saturation-gray); --lightness: 60%;

    position: relative; display: inline-flex; gap: var(--gap); flex-direction: column;
    box-sizing: border-box;
}

.--wait div.textbox{
	animation: 600ms ease-in-out infinite alternate wait-bg-100;
}

div.textbox.--error, .--error div.textbox {
    --saturation: 50%;
    --hue: 0;
}

div.textbox.--disabled, .--disabled div.textbox {
	--saturation: 0%;
	--lightness: 80%;
}

input.textbox--input{
    position: relative; width: var(--width); font-size: 16px; padding: 4px; height: 32px;
    border: solid 1px hsl(var(--hue),var(--saturation),70%) !important;
    background-color: transparent !important; outline: 0;
    color: hsl(var(--hue),var(--saturation),var(--lightness)) !important;
    box-sizing: border-box; cursor: text; border-radius: 2px;
}

.--wait input.textbox--input{
    visibility: hidden;
}

.--disabled input.textbox--input{
    cursor: default;
}

input.textbox--input:focus {
    --lightness: 40%;
}

.textbox--leading ~ input.textbox--input{
    padding-left: 28px;
}

.textbox--trailing ~ input.textbox--input{
    padding-right: 28px;
}

div.textbox--leading{
    position: absolute; left: 4px; top: 4px; width: 24px; height: 24px; font-size: 16px;
    text-align: center; line-height: 24px;
    color: hsl(var(--hue),var(--saturation),var(--lightness));
}

div.textbox--trailing{
    position: absolute; left: calc(min(100%,var(--width)) - 28px); top: 4px; width: 24px; height: 24px; font-size: 16px;
    text-align: center; line-height: 24px;
    color: hsl(var(--hue),var(--saturation),var(--lightness));
}

.textbox--button{
    z-index: 100; cursor: pointer;
}

input.textbox--input:autofill {
    border: 3px solid hsl(var(--hue),50%,30%) !important;
    background-color: hsla(var(--hue),50%,80%,.5) !important;
    background-image: none !important;
    color: hsl(var(--hue),50%,30%) !important;
    -webkit-text-fill-color: hsl(var(--hue),50%,30%) !important;
}

input.textbox--input:-webkit-autofill, 
input.textbox--input:-webkit-autofill:hover, 
input.textbox--input:-webkit-autofill:focus, 
input.textbox--input:-webkit-autofill:active {
    border: 3px solid hsl(var(--hue),50%,30%) !important;
    background-color: hsla(var(--hue),50%,80%,.5) !important;
    background-image: none !important;
    color: hsl(var(--hue),50%,30%) !important;
    -webkit-text-fill-color: hsl(var(--hue),50%,30%) !important;
}