:where(button, input[type=submit], input[type=button], input[type=reset]),
:where(input[type=file])::file-selector-button {
    background: linear-gradient(#f2f2f2 45%, #ebebeb 0, #cfcfcf); border: 1px solid #8e8f8f; border-radius: 3px;
    box-shadow: inset 0 0 0 1px #fffc; box-sizing: border-box; color: #222;
    min-height: 23px; padding: 0 12px; text-align: center; cursor: default;   
    transition: border-color 1s linear, background .3s;
}
:where(button, input[type=submit], input[type=button], input[type=reset]):where(:not(:disabled):hover),
:where(input[type=file])::file-selector-button:hover {
    background: linear-gradient(#eaf6fd 45%, #bee6fd 0, #a7d9f5); border-color: #3c7fb1; transition: border-color .3s;
}
:where(button, input[type=submit], input[type=button], input[type=reset]):where(:not(:disabled):active) {
    background: linear-gradient(#e5f4fc, #c4e5f6 30% 50%, #98d1ef 50%, #68b3db); border-color: #6d91ab;
    box-shadow: inset 1px 1px 0 #0003, inset -1px 1px 0 #0001;
}
:where(button, input[type=submit], input[type=button], input[type=reset]):where(:focus-visible) {
    box-shadow: inset 0 0 0 2px #98d1ef; outline: 1px dotted #000; outline-offset: -4px;
}
:where(button, input[type=submit], input[type=button], input[type=reset]):where(:disabled) {
    background: #f4f4f4; border-color: #adb2b5; color: #838383;
}


:where(input[type=text], input[type=password], input[type=email], input[type=number], input[type=url], input[type=search], input:not([type]), textarea) {
    background-color: #fff; border-color: #abadb3 #dbdfe6 #e3e9ef #e2e3ea; border-radius: 2px; border-style: solid; border-width: 1px;
    box-sizing: border-box; color: #000; padding: 3px 4px 5px; transition: border-color .5s;
}
:where(input[type=text], input[type=password], input[type=email], input[type=number], input[type=url], input[type=search], input:not([type])) { height: 23px; }
:where(input[type=text], input[type=password], input[type=email], input[type=number], input[type=url], input[type=search], input:not([type]), textarea):where(:hover) {
    border-color: #5794bf #b7d5ea #c7e2f1 #c5daed; transition: border-color .3s;
}
:where(input[type=text], input[type=password], input[type=email], input[type=number], input[type=url], input[type=search], input:not([type]), textarea):where(:focus) {
    border-color: #3d7bad #a4c9e3 #b7d9ed #b5cfe7; outline: none;
}
:where(input[type=text], input[type=password], input[type=email], input[type=number], input[type=url], input[type=search], input:not([type]), textarea):where(:disabled) {
    background: #f0f0f0; border-color: #afafaf; box-shadow: inset 0 0 0 1px #fff;
}


:where(select:not([multiple])) {
    -webkit-appearance: none; appearance: none;
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTExIDZINHYxaDF2MWgxdjFoMXYxaDFWOWgxVjhoMVY3aDFWNloiIGZpbGw9IiMwMDAiLz48L3N2Zz4=") no-repeat 100%,
        linear-gradient(#f2f2f2 45%, #ebebeb 0, #cfcfcf);
    border: 1px solid #8e8f8f; border-radius: 3px; box-shadow: inset 0 0 0 1px #fffc; box-sizing: border-box; color: #222;
    min-height: 23px; padding: 2px 22px 2px 3px;
}
:where(select:not([multiple])):where(:not(:disabled):hover) {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTExIDZINHYxaDF2MWgxdjFoMXYxaDFWOWgxVjhoMVY3aDFWNloiIGZpbGw9IiMwMDAiLz48L3N2Zz4="),
        linear-gradient(#eaf6fd 45%, #bee6fd 0, #a7d9f5);
    border-color: #3c7fb1;
}
:where(select:not([multiple])):where(:focus-visible) { box-shadow: inset 0 0 0 2px #98d1ef; outline: 1px dotted #000; outline-offset: -4px; }
:where(select:not([multiple])):where(:disabled) { background-color: #f4f4f4; border-color: #adb2b5; color: #838383; }
:where(select[multiple]) { background: #fff; border: 1px solid #82878c; }


:where(input[type=checkbox], input[type=radio]) {
    -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 13px; height: 13px; margin: 0 3px 0 0;
    vertical-align: -2px; background: #f6f6f6; border: 1px solid #8e8f8f; transition: .4s;
    box-shadow: inset 0 0 0 1px #f4f4f4, inset 1px 1px 0 1px #aeaeae, inset -1px -1px 0 1px #ddd, inset 3px 3px 6px #ccc;
}
:where(input[type=radio]) { border-radius: 50%; }
:where(input[type=checkbox], input[type=radio]):where(:not(:disabled):hover) {
    background-color: #e9f7fe; border-color: #3c7fb1;
    box-shadow: inset 0 0 0 1px #def9fa, inset 1px 1px 0 1px #79c6f9, inset -1px -1px 0 1px #c6e9fc, inset 3px 3px 6px #b1dffd;
}
:where(input[type=checkbox]):where(:checked) {
    background: #f6f6f6 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11'><path d='M2 5.5l2.3 2.5L9 2.5' stroke='%234a5f97' stroke-width='2' fill='none'/></svg>") center no-repeat;
}
:where(input[type=radio]):where(:checked) {
    background: radial-gradient(circle, #4a5f97 0 2.5px, #96b6dc 3px, transparent 3.5px), #f6f6f6;
}
:where(input[type=checkbox], input[type=radio]):where(:focus-visible) { outline: 1px dotted #000; }
:where(input[type=checkbox], input[type=radio]):where(:disabled) { background: linear-gradient(to bottom right, #f0f0f0, #fbfbfb); border-color: #b1b1b1; box-shadow: none; }