form.css

/*! style-forge.form v3.2.2 | MIT License | https://github.com/sarmaged/style-forge.form */

:root{--sf-gap:0.5em;--sf-disabled:0.4;--sf-txt-small:0.75rem;--sf-form-radius:0.5em;--sf-form-p-input-block:0.5em;--sf-form-p-input-inline:0.5em;--sf-form-switch-size:1em;--sf-form-c-white:0 0% 100%;--sf-form-c-info:200 100% 60%;--sf-form-c-error:0 100% 60%;--sf-form-c-success:0 100% 60%;--sf-form-c-warning:39 100% 50%;--sf-form-c-bg:0 0% 100%;--sf-form-c-bd:0 0% 10%;--sf-form-c-loading:0 0% 10%;--sf-form-c-txt:0 0% 10%;--sf-form-dark-c-white:0 0% 100%;--sf-form-dark-c-info:219 79% 66%;--sf-form-dark-c-error:0 100% 65%;--sf-form-dark-c-success:0 100% 65%;--sf-form-dark-c-warning:39 100% 60%;--sf-form-dark-c-bg:0 0% 20%;--sf-form-dark-c-bd:0 0% 100%;--sf-form-dark-c-loading:0 0% 100%;--sf-form-dark-c-txt:0 0% 90%}:root:where([data-theme='dark'],.dark){color-scheme:dark;--sf-form-c-white:var(--sf-form-dark-c-white);--sf-form-c-bg:var(--sf-form-dark-c-bg);--sf-form-c-error:var(--sf-form-dark-c-error);--sf-form-c-success:var(--sf-form-dark-c-success);--sf-form-c-warning:var(--sf-form-dark-c-warning);--sf-form-c-info:var(--sf-form-dark-c-info);--sf-form-c-bd:var(--sf-form-dark-c-bd);--sf-form-c-loading:var(--sf-form-dark-c-loading);--sf-form-c-txt:var(--sf-form-dark-c-txt)}@media (prefers-color-scheme:dark){:root:where([data-theme='auto'],.auto){color-scheme:light dark;--sf-form-c-white:var(--sf-form-dark-c-white);--sf-form-c-bg:var(--sf-form-dark-c-bg);--sf-form-c-error:var(--sf-form-dark-c-error);--sf-form-c-success:var(--sf-form-dark-c-success);--sf-form-c-warning:var(--sf-form-dark-c-warning);--sf-form-c-info:var(--sf-form-dark-c-info);--sf-form-c-bd:var(--sf-form-dark-c-bd);--sf-form-c-loading:var(--sf-form-dark-c-loading);--sf-form-c-txt:var(--sf-form-dark-c-txt)}}:where(label,button,input,optgroup,option,select,textarea),:where(label,button,input,optgroup,option,select,textarea)::before,:where(label,button,input,optgroup,option,select,textarea)::after{box-sizing:border-box}label,::file-selector-button,button,input,optgroup,option,select,textarea{font-size:inherit;font-family:inherit;font-weight:400;line-height:1;text-transform:none}::file-selector-button,button,input,optgroup,option,select,textarea{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;touch-action:manipulation}button,:where(input:not([type='checkbox'],[type='color'],[type='file'],[type='hidden'],[type='image'],[type='radio'],[type='range'])),optgroup,option,select,textarea{padding:0.25em 0.5em}::file-selector-button,:where(button,select),:where(input):where([type='button'],[type='checkbox'],[type='color'],[type='file'],[type='image'],[type='radio'],[type='range'],[type='reset'],[type='submit']){cursor:pointer}:disabled,:disabled::file-selector-button{cursor:not-allowed;-webkit-tap-highlight-color:transparent}fieldset{padding:1em;border:1px solid hsl(var(--sf-form-c-bd))}legend{color:inherit;padding:0 0.5em}progress{vertical-align:baseline}textarea{overflow:auto}input.sf-input[type='file']::file-selector-button,input:where(.sf-input:not([type='radio'],[type='checkbox'],[type='color'],[type='file'],[type='image'],[type='range'])),.sf-button:where(a,button,input[type='button'],input[type='submit'],input[type='reset']),select.sf-select,textarea.sf-textarea{padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline)}input.sf-input[type='file']::file-selector-button,:where(.sf-button:where(a,button,input[type='button'],input[type='submit'],input[type='reset']),label.sf-radio input[type='radio']::before,label.sf-checkbox input[type='checkbox']::before,select.sf-select,textarea.sf-textarea){border-radius:var(--sf-form-radius)}:disabled,label.sf-radio input[type='radio']:disabled~*,label.sf-checkbox input[type='checkbox']:disabled~*,.sf-switch input[type='checkbox']:disabled~*,.sf-switch.multiple input:where([type='checkbox'],[type='radio']):disabled~*{opacity:var(--sf-disabled)}label.sf-radio input[type='radio']:disabled~*,label.sf-checkbox input[type='checkbox']:disabled~*,.sf-switch input[type='checkbox']:disabled~*,.sf-switch.multiple input:where([type='checkbox'],[type='radio']):disabled~*{cursor:not-allowed}.sf-button:where(a,button,input[type='button'],input[type='submit'],input[type='reset']):focus-visible{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}.sf-input:focus-visible::-webkit-calendar-picker-indicator{outline:none}.sf-radio input:focus-visible,.sf-checkbox input:focus-visible{border-color:transparent;outline:2px solid hsl(var(--sf-form-c-info));outline-offset:2px}.sf-radio input:focus-visible{border-radius:50%}.sf-switch input:where([type='checkbox'],[type='radio']):focus-visible{border-color:transparent;outline:2px solid hsl(var(--sf-form-c-info))}.sf-switch:not(.multiple) input:where([type='checkbox'],[type='radio']):focus-visible{border-radius:calc(var(--sf-form-switch-size) / 2)}:where(select.sf-select):focus-visible{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}:where(textarea.sf-textarea):focus-visible{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}input:where(.sf-input[type='file']):focus-visible{outline:none}input:where(.sf-input[type='file']):focus-visible::file-selector-button{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}input:where(.sf-input:where([type='color'],[type='image'],[type='range'])):focus-visible{outline:2px solid hsl(var(--sf-form-c-info));outline-offset:2px;border-radius:var(--sf-form-radius)}input:where(.sf-input:not([type='radio'],[type='checkbox'],[type='color'],[type='file'],[type='image'],[type='range'])){color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid;border-color:transparent transparent hsl(var(--sf-form-c-bd)/20%);border-radius:0;outline:none;width:100%;transition:border 0.1s ease-out}:where(input.sf-input:not([type='radio'],[type='checkbox'],[type='color'],[type='file'],[type='image']))::-moz-placeholder{color:hsl(var(--sf-form-c-txt)/40%)}:where(input.sf-input:not([type='radio'],[type='checkbox'],[type='color'],[type='file'],[type='image']))::placeholder{color:hsl(var(--sf-form-c-txt)/40%)}:where(input.sf-input:not([type='radio'],[type='checkbox'],[type='color'],[type='file'],[type='image'])):-moz-placeholder-shown{border-color:hsl(var(--sf-form-c-bd)/20%);border-radius:var(--sf-form-radius)}:where(input.sf-input:not([type='radio'],[type='checkbox'],[type='color'],[type='file'],[type='image'])):placeholder-shown{border-color:hsl(var(--sf-form-c-bd)/20%);border-radius:var(--sf-form-radius)}:where(input.sf-input:not([type='radio'],[type='checkbox'],[type='color'],[type='file'],[type='image'])):focus{border-color:transparent transparent hsl(var(--sf-form-c-info));border-radius:0;outline:none}input.sf-input[type='file']::file-selector-button,.sf-button:where(a,button,input[type='button'],input[type='submit'],input[type='reset']){display:inline-block;line-height:1;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%);text-align:center;text-decoration:none}a.sf-button{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;font-size:inherit;font-family:inherit;font-weight:400;text-transform:none;touch-action:manipulation;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%);text-align:center;text-decoration:none}a.sf-button:not([href]){cursor:not-allowed;text-decoration:none;opacity:var(--sf-disabled);-webkit-tap-highlight-color:transparent}a.sf-button:not([href]):hover{color:inherit}label.sf-radio,label.sf-checkbox{display:flex;flex-flow:wrap row;align-items:center;gap:var(--sf-gap)}label.sf-radio,label.sf-checkbox{line-height:1}label.sf-radio input[type='radio'],label.sf-checkbox input[type='checkbox'],label.sf-radio input[type='radio']::before,label.sf-checkbox input[type='checkbox']::before{width:1em;height:1em}label.sf-radio input[type='radio']~*,label.sf-checkbox input[type='checkbox']~*{cursor:pointer}label.sf-radio input[type='radio'],label.sf-checkbox input[type='checkbox']{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;border:0;background:none;padding:0;margin:0}label.sf-radio input[type='radio']::before,label.sf-checkbox input[type='checkbox']::before{top:0;left:0;position:absolute;width:1em;height:1em;content:'';background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%)}label.sf-radio input[type='radio']::after,label.sf-checkbox input[type='checkbox']::after{top:3px;left:3px;right:3px;bottom:3px;position:absolute;content:''}label.sf-radio input[type='radio']:checked::before,label.sf-checkbox input[type='checkbox']:checked::before{border-color:hsl(var(--sf-form-c-info))}label.sf-radio input[type='radio']:checked::after,label.sf-checkbox input[type='checkbox']:checked::after{background:hsl(var(--sf-form-c-info))}label.sf-radio input[type='radio']::before,label.sf-radio input[type='radio']::after{border-radius:50%}select.sf-select{font-size:0.9375rem;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%);width:100%;overflow:auto}textarea.sf-textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;line-height:1.5;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%);width:100%;min-height:calc(7em + var(--sf-form-p-input-block) / 4);resize:vertical}textarea.sf-textarea:disabled{resize:none}input.sf-input[type='color']{--sf-form-color-size:2.125em;width:var(--sf-form-color-size);height:var(--sf-form-color-size);padding:0;background:hsl(var(--sf-form-c-info));background:conic-gradient(from 0,yellow,darkorange,red,fuchsia,blue,cyan,lime,yellowgreen,yellow);border:0;border-radius:50%}input.sf-input[type='color']::-webkit-color-swatch-wrapper{padding:3px}input.sf-input[type='color']::-webkit-color-swatch{border:2px solid hsl(var(--sf-form-c-white));border-radius:50%}input.sf-input[type='color']::-moz-color-swatch{border:2px solid hsl(var(--sf-form-c-white));border-radius:50%}input.sf-input[type='file']{width:100%;padding:0;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}input.sf-input[type='file']::file-selector-button{font-size:inherit;font-family:inherit;line-height:1}input.sf-input:is([type='time'],[type='week'],[type='month'],[type='date'],[type='datetime-local']){-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:start;height:37px}input.sf-input:is([type='time'],[type='week'],[type='month'],[type='date'],[type='datetime-local'])::-webkit-date-and-time-value{text-align:start}.sf-switch{display:flex;flex-flow:wrap row;align-items:center;gap:var(--sf-gap)}label.sf-switch input[type='checkbox']{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:none;padding:0;margin:0;width:calc(var(--sf-form-switch-size) * 2);height:var(--sf-form-switch-size);vertical-align:middle}label.sf-switch input[type='checkbox']::before{top:0;left:0;position:absolute;width:calc(var(--sf-form-switch-size) * 2);height:var(--sf-form-switch-size);content:'';background:hsl(var(--sf-form-c-bd)/20%);border-radius:calc(var(--sf-form-switch-size) / 2)}label.sf-switch input[type='checkbox']::after{top:2px;left:2px;position:absolute;width:calc(var(--sf-form-switch-size) - 2px * 2);height:calc(var(--sf-form-switch-size) - 2px * 2);content:'';background:hsl(var(--sf-form-c-white));border-radius:calc(var(--sf-form-switch-size) / 2);box-shadow:0 0 0 1px hsl(var(--sf-form-c-white));transition:transform 0.05s ease-in}label.sf-switch input[type='checkbox']:checked::before{background:hsl(var(--sf-form-c-info))}label.sf-switch input[type='checkbox']:checked::after{transform:translate3d(var(--sf-form-switch-size),0,0)}label.sf-switch input[type='radio']~*,label.sf-switch input[type='checkbox']~*{cursor:pointer}.sf-switch.multiple,.sf-switch.multiple *,.sf-switch.multiple *::before,.sf-switch.multiple *::after{box-sizing:border-box}.sf-switch.multiple .sf-switch-toggle{display:flex;flex-flow:row;background:hsl(var(--sf-form-c-bg)/20%);box-shadow:1px 2px 8px 0 hsl(var(--sf-form-c-bd)/15%)}.sf-switch.multiple .sf-switch-toggle label{position:relative}.sf-switch.multiple .sf-switch-toggle span{display:block;font-size:var(--sf-txt-small);text-align:center;min-width:2rem;padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);background:hsl(var(--sf-form-c-bd)/5%)}.sf-switch.multiple input:where([type='checkbox'],[type='radio']){top:0;left:0;right:0;bottom:0;position:absolute;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;padding:0;margin:0;border:0}.sf-switch.multiple input:where([type='checkbox'],[type='radio'])::before,.sf-switch.multiple input:where([type='checkbox'],[type='radio'])::after{content:none}.sf-switch.multiple input:where([type='checkbox'],[type='radio']):checked~span{color:hsl(var(--sf-form-c-white));background:hsl(var(--sf-form-c-info))}.sf-switch.multiple.vert .sf-switch-toggle{flex-flow:column}.sf-switch.multiple .sf-switch-description{font-size:var(--sf-txt-small);margin:0}@keyframes Loading{from{background-position:0 0}to{background-position:28px 0}}a.sf-loading:not([href]),.sf-loading:disabled{--c1:transparent;--c2:hsl(var(--sf-form-c-loading)/5%);background:hsl(var(--sf-form-c-info));background:repeating-linear-gradient(45deg,var(--c1),var(--c1) 10px,var(--c2) 10px,var(--c2) 20px);background-size:28px 100%;animation:Loading .3s linear infinite}.sf-description,.sf-invalid,.sf-valid{display:none;color:hsl(var(--sf-form-c-txt)/40%);font-size:var(--sf-txt-small);font-family:inherit;font-weight:400;line-height:1;text-transform:none;margin:0 0 var(--sf-gap)}.validates+.sf-description,.validates+.sf-invalid,.validates+.sf-valid{margin:0 0 var(--sf-gap)}.sf-description{display:block}:not(.d\:f,.d\:f\:x,.d\:f\:y,.d\:g,.d\:g\:x,.d\:g\:y)>:where(.validates,.error)+.sf-description,:not(.d\:f,.d\:f\:x,.d\:f\:y,.d\:g,.d\:g\:x,.d\:g\:y)>:where(.validates,.error)+.sf-valid+.sf-description,:not(.d\:f,.d\:f\:x,.d\:f\:y,.d\:g,.d\:g\:x,.d\:g\:y)>:where(.validates,.error)+.sf-invalid+.sf-description,:not(.d\:f,.d\:f\:x,.d\:f\:y,.d\:g,.d\:g\:x,.d\:g\:y)>:where(.validates,.error)+.sf-valid+.sf-invalid+.sf-description,:not(.d\:f,.d\:f\:x,.d\:f\:y,.d\:g,.d\:g\:x,.d\:g\:y)>:where(.validates,.error)+.sf-invalid+.sf-valid+.sf-description,:not(.d\:f,.d\:f\:x,.d\:f\:y,.d\:g,.d\:g\:x,.d\:g\:y)>:where(.validates,.error)+.sf-invalid,:not(.d\:f,.d\:f\:x,.d\:f\:y,.d\:g,.d\:g\:x,.d\:g\:y)>:where(.validates,.error)+.sf-valid+.sf-invalid,:not(.d\:f,.d\:f\:x,.d\:f\:y,.d\:g,.d\:g\:x,.d\:g\:y)>:where(.validates,.error)+.sf-description+.sf-invalid,:not(.d\:f,.d\:f\:x,.d\:f\:y,.d\:g,.d\:g\:x,.d\:g\:y)>:where(.validates,.error)+.sf-valid+.sf-description+.sf-invalid,:not(.d\:f,.d\:f\:x,.d\:f\:y,.d\:g,.d\:g\:x,.d\:g\:y)>:where(.validates,.error)+.sf-description+.sf-valid+.sf-invalid,:not(.d\:f,.d\:f\:x,.d\:f\:y,.d\:g,.d\:g\:x,.d\:g\:y)>:where(.validates,.error)+.sf-valid,:not(.d\:f,.d\:f\:x,.d\:f\:y,.d\:g,.d\:g\:x,.d\:g\:y)>:where(.validates,.error)+.sf-invalid+.sf-valid,:not(.d\:f,.d\:f\:x,.d\:f\:y,.d\:g,.d\:g\:x,.d\:g\:y)>:where(.validates,.error)+.sf-description+.sf-valid,:not(.d\:f,.d\:f\:x,.d\:f\:y,.d\:g,.d\:g\:x,.d\:g\:y)>:where(.validates,.error)+.sf-invalid+.sf-description+.sf-valid,:not(.d\:f,.d\:f\:x,.d\:f\:y,.d\:g,.d\:g\:x,.d\:g\:y)>:where(.validates,.error)+.sf-description+.sf-invalid+.sf-valid{margin:var(--sf-gap) 0}.sf-invalid{color:hsl(var(--sf-form-c-error))}.sf-valid:not(.sf-description){color:hsl(var(--sf-form-c-txt))}.show:is(.sf-description,.sf-invalid,.sf-valid){display:block}.hide:is(.sf-description,.sf-invalid,.sf-valid){display:none}.error:not(:disabled)+.sf-invalid,.error:not(:disabled)+.sf-valid+.sf-invalid,.error:not(:disabled)+.sf-description+.sf-invalid,.error:not(:disabled)+.sf-valid+.sf-description+.sf-invalid,.error:not(:disabled)+.sf-description+.sf-valid+.sf-invalid{display:block}.error+.sf-valid,.error+.sf-invalid+.sf-valid,.error+.sf-description+.sf-valid,.error+.sf-invalid+.sf-description+.sf-valid,.error+.sf-description+.sf-invalid+.sf-valid,.error+.sf-description,.error+.sf-valid+.sf-description,.error+.sf-invalid+.sf-description,.error+.sf-valid+.sf-invalid+.sf-description,.error+.sf-invalid+.sf-valid+.sf-description{display:none}.validates:where(:invalid:focus,:invalid:not(:-moz-placeholder-shown))+.sf-invalid, .validates:where(:invalid:focus,:invalid:not(:-moz-placeholder-shown))+.sf-valid+.sf-invalid, .validates:where(:invalid:focus,:invalid:not(:-moz-placeholder-shown))+.sf-description+.sf-invalid, .validates:where(:invalid:focus,:invalid:not(:-moz-placeholder-shown))+.sf-valid+.sf-description+.sf-invalid, .validates:where(:invalid:focus,:invalid:not(:-moz-placeholder-shown))+.sf-description+.sf-valid+.sf-invalid, .validates:where(:valid:focus,:valid:not(:-moz-placeholder-shown))+.sf-valid, .validates:where(:valid:focus,:valid:not(:-moz-placeholder-shown))+.sf-invalid+.sf-valid, .validates:where(:valid:focus,:valid:not(:-moz-placeholder-shown))+.sf-description+.sf-valid, .validates:where(:valid:focus,:valid:not(:-moz-placeholder-shown))+.sf-invalid+.sf-description+.sf-valid, .validates:where(:valid:focus,:valid:not(:-moz-placeholder-shown))+.sf-description+.sf-invalid+.sf-valid, .validates:where(:valid:focus,:valid:not(:-moz-placeholder-shown))+.sf-description.sf-valid, .validates:where(:valid:focus,:valid:not(:-moz-placeholder-shown))+.sf-invalid+.sf-description.sf-valid{display:block}.validates:where(:invalid:focus,:invalid:not(:placeholder-shown))+.sf-invalid,.validates:where(:invalid:focus,:invalid:not(:placeholder-shown))+.sf-valid+.sf-invalid,.validates:where(:invalid:focus,:invalid:not(:placeholder-shown))+.sf-description+.sf-invalid,.validates:where(:invalid:focus,:invalid:not(:placeholder-shown))+.sf-valid+.sf-description+.sf-invalid,.validates:where(:invalid:focus,:invalid:not(:placeholder-shown))+.sf-description+.sf-valid+.sf-invalid,.validates:where(:valid:focus,:valid:not(:placeholder-shown))+.sf-valid,.validates:where(:valid:focus,:valid:not(:placeholder-shown))+.sf-invalid+.sf-valid,.validates:where(:valid:focus,:valid:not(:placeholder-shown))+.sf-description+.sf-valid,.validates:where(:valid:focus,:valid:not(:placeholder-shown))+.sf-invalid+.sf-description+.sf-valid,.validates:where(:valid:focus,:valid:not(:placeholder-shown))+.sf-description+.sf-invalid+.sf-valid,.validates:where(:valid:focus,:valid:not(:placeholder-shown))+.sf-description.sf-valid,.validates:where(:valid:focus,:valid:not(:placeholder-shown))+.sf-invalid+.sf-description.sf-valid{display:block}.validates:where(:focus,:not(:-moz-placeholder-shown))+.sf-description, .validates:where(:focus,:not(:-moz-placeholder-shown))+.sf-invalid+.sf-description, .validates:where(:focus,:not(:-moz-placeholder-shown))+.sf-valid+.sf-description, .validates:where(:focus,:not(:-moz-placeholder-shown))+.sf-invalid+.sf-valid+.sf-description, .validates:where(:focus,:not(:-moz-placeholder-shown))+.sf-valid+.sf-invalid+.sf-description{display:none}.validates:where(:focus,:not(:placeholder-shown))+.sf-description,.validates:where(:focus,:not(:placeholder-shown))+.sf-invalid+.sf-description,.validates:where(:focus,:not(:placeholder-shown))+.sf-valid+.sf-description,.validates:where(:focus,:not(:placeholder-shown))+.sf-invalid+.sf-valid+.sf-description,.validates:where(:focus,:not(:placeholder-shown))+.sf-valid+.sf-invalid+.sf-description{display:none}.validates input[type='checkbox']~.sf-description{display:none}.validates input[type='checkbox']:invalid~.sf-invalid{display:block}.validates input[type='checkbox']:valid~.sf-valid{display:block}.validates:invalid:required:not(:focus,:disabled){border-color:hsl(var(--sf-form-c-warning))}.validates input:is([type='radio'],[type='checkbox']):invalid::before{border-color:hsl(var(--sf-form-c-error))}.error:not(:disabled),.validates:invalid:focus{border-color:hsl(var(--sf-form-c-error));outline:none}input.error.sf-input:is(:focus,:not(:disabled):not(:-moz-placeholder-shown)), input.validates.sf-input:invalid:is(:-moz-placeholder-shown:focus,:not(:-moz-placeholder-shown)){border-color:transparent transparent hsl(var(--sf-form-c-error))}input.error.sf-input:is(:focus,:not(:disabled):not(:placeholder-shown)),input.validates.sf-input:invalid:is(:placeholder-shown:focus,:not(:placeholder-shown)){border-color:transparent transparent hsl(var(--sf-form-c-error))}label.validates:is(.sf-switch,.sf-checkbox) :is(.sf-description,.sf-valid,.sf-invalid){width:100%;line-height:1}form.validates:invalid .sf-button[type='submit']{cursor:not-allowed;text-decoration:none;opacity:var(--sf-disabled);-webkit-text-fill-color:hsl(var(--sf-form-c-txt))}