input[type=date],input[type=datetime-local],input[type=month],input[type=time],input[type=week]{-webkit-appearance:none;appearance:none}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-outer-spin-button,input[type=datetime-local]::-webkit-inner-spin-button,input[type=datetime-local]::-webkit-outer-spin-button,input[type=month]::-webkit-inner-spin-button,input[type=month]::-webkit-outer-spin-button,input[type=time]::-webkit-inner-spin-button,input[type=time]::-webkit-outer-spin-button,input[type=week]::-webkit-inner-spin-button,input[type=week]::-webkit-outer-spin-button{-webkit-appearance:none;display:none}select,textarea{field-sizing:content}:not(.input)>input:not([type=button]):not([type=checkbox]):not([type=radio]):not([type=range]){min-height:var(--form-element-height-optimal)}input[type=date],input[type=datetime-local],input[type=month],input[type=time],input[type=week]{height:var( --form-element-height-optimal )}.input{--input-bg:var(--gray-00);--input-border-color:var(--gray-30);-webkit-backdrop-filter:blur(.5rem);backdrop-filter:blur(.5rem);background-color:color-mix(in oklch,var(--input-bg) 50%,#0000);border:var(--form-element-border-thickness) solid var(--input-border-color);border-radius:var(--form-element-radius);color:var(--color-text-default);flex:1;line-height:var(--line-height-form-element);transition:color var(--input-duration,var(--duration-action)) var(--input-easing,ease-in),background-color var(--input-duration,var(--duration-action)) var(--input-easing,ease-in),border var(--input-duration,var(--duration-action)) var(--input-easing,ease-in),outline var(--input-duration,var(--duration-action)) var(--input-easing,ease-in),box-shadow var(--input-duration,var(--duration-action)) var(--input-easing,ease-in)}:where(.theme-dark) .input{--input-border-color:var(--gray-80)}.input:not(:has(input)){padding-bottom:var(--form-element-padding-block);padding-top:var(--form-element-padding-block)}.input:not(:has(.spinner)){padding-left:var(--form-element-padding-inline);padding-right:var(--form-element-padding-inline)}.input:focus-visible,.input:has(input:focus-visible),.input:hover{--input-duration:var(--duration-action-hover);--input-easing:ease-out}.input:focus-visible,.input:focus-within,.input:has(input:focus-visible){--input-border-color:var(--color-action-default);background:var(--input-bg)}.input:has(input:focus-visible){outline:var(--outline-focus);outline-offset:var(--outline-offset-focus)}.input:has(input){display:flex;gap:var(--space-2xs)}.input input{flex-grow:1}.input input,.input input:focus,.input input:focus-visible{background:#0000;border:#0000;color:inherit;outline:none;padding-bottom:var(--form-element-padding-block);padding-top:var(--form-element-padding-block)}input::placeholder,textarea::placeholder{color:color-mix(in lab,var(--color-text-default) calc(100%*var(--opacity-disabled)),#0000)}.input-with-icon{align-items:center;display:inline-flex;position:relative}.input-icon{pointer-events:none;position:absolute;right:var(--form-element-padding-inline);transition:color var(--duration-action) ease-out}input:focus-visible~.input-icon,input:hover~.input-icon{transition-duration:var(--duration-action-hover)}input:hover~.input-icon{color:var(--color-action-default);filter:var(--filter-action-hover)}@supports (-moz-appearance:none){input[type=date]{padding-right:var(--form-element-padding-inline)}input[type=date]~.input-icon{display:none}}.input:has(input:disabled),input:disabled{opacity:var(--opacity-disabled);pointer-events:none;--shadow-inset-color-adjusted-1:#0000;--shadow-inset-color-adjusted-2:#0000}.input:has(input:disabled) *{pointer-events:none}form:not([novalidate=""]):not([novalidate=true]):not([novalidate=novalidate]) .input-label:has(:invalid):not(:has([invalid=false])),form:not([novalidate=""]):not([novalidate=true]):not([novalidate=novalidate]) .input-with-icon:not([invalid=false]) .input-icon,form:not([novalidate=""]):not([novalidate=true]):not([novalidate=novalidate]) .input:invalid:not([invalid=false]){--input-border-color:currentColor;--input-bg:var(--red-05);color:var(--color-text-alert)}.input-with-icon:has([invalid]:not([invalid=false])) .input-icon,.input:has([invalid]:not([invalid=false])),input[invalid]:not([invalid=false]){--input-border-color:currentColor;--input-bg:var(--red-05);color:var(--color-text-alert);--button-color:inherit}
