:root{
    --color-input-invalid: tomato;
    --bcolor-input: #0001;
    --input-fontsize: 18px;
}

form{
    font-size: var(--input-fontssize);
}

form textarea,
form input,
form select{
    font-size: inherit;
    box-sizing: border-box;
    margin: 0px;
    outline:none;
}


form textarea{
    resize: none;
    background-color: var(--bcolor-input);
    width: 100%;
    border: none;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 5px;
    overflow-y: visible;
    
    min-height: 10em;
    max-height: 20em;

    font-family: inherit;
}


form input[type="button"]{
    margin: 10px;
    font-size: inherit;
    padding: 20px;
    border-radius: 5px;
    }

.inputbox{
    position: relative;
    margin: 10px;
}

.inputbox > input {
    margin: 0px;
    display: block;
    width: 100%;

    padding-top: 20px;
    text-indent: 0.5em;

    border: none;
    background-color: var(--bcolor-input);
}


.inputbox > label{
    display: block;
    position: absolute;
    text-indent: 0.5em;
    height: 100%;
    bottom: -25%;
    overflow: visible;
    cursor: text;
    pointer-events: none;
    opacity: 90%;
    font-weight: 400;
    font-size: calc(var(--input-fontsize));
    transition: bottom 0.2s, font-size 0.2s,opacity 0.2s;
}
.inputbox > textarea + label{
    bottom: 0px;
}


.inputbox > input:focus + label,
.inputbox > input:not(:placeholder-shown) + label{
    opacity: 60%;
    font-size: calc( var(--input-fontsize) - 20% );
    bottom: 0px;
}
.inputbox > textarea:focus + label,
.inputbox > textarea:not(:placeholder-shown) + label{
    opacity: 0%;
    font-size: calc( var(--input-fontsize) - 20% );
    bottom: 0px;
}

.inputbox > input:not(:valid){
    outline: 1px solid var(--color-input-invalid,tomato);
}

input[type="radio"],
input[type="checkbox"]{
    border: 0px solid var(--color-accent,steelblue);
    -webkit-appearance: none;
    appearance: none;
    border-radius: 1000px;
    margin: 0px;
    padding: 0;
    width: 1.2em;
    aspect-ratio: 1/1;
    vertical-align:middle;
    transition: background-color 0.5s,border ease 0.1s,transform 0.3s ease-in-out;
}

input[type="checkbox"]{
    border-radius: 4px;
}

input[type="radio"]:checked,
input[type="checkbox"]:checked{
    border: 6px solid var(--color-accent,steelblue);
    background-color: var(--white,white);
    transform: rotate(180deg);
}




form :focus{
    outline: 1px solid var(--color-accent,#000f);
}

input[type="file"]::-webkit-file-upload-button{
    vertical-align: middle;
    border: none;
    background-color: none;
    border-right: 3px solid var(--black-opacity,#0001);
}

input:hover:not(:disabled),
textarea:hover:not(:disabled),
select:hover:not(:disabled){
    opacity: 90%;
    cursor: pointer;
    box-shadow: inset 0px 0px 100px 100px  #0001;
}

:disabled {
    opacity: 30%;
    cursor: unset;
}

/*dimm anything that follows a disabled text*/

/*in the future add icons for the different types of input*/
/*for example if there is a email input add a letter icon!*/