.input{font-family:var(--font-sans);font-size:var(--text-body-s-size);color:var(--text-default);background:var(--surface-elevated);height:40px;padding:0 var(--space-4);border:1px solid var(--border-control);border-radius:var(--radius-sm);box-sizing:border-box;transition:border-color var(--duration-base) var(--ease-default), background var(--duration-base) var(--ease-default);outline:none;font-weight:400}.input::placeholder{color:var(--text-muted);opacity:1}@media (pointer:coarse){.input,.input-prefix,.input-suffix{font-size:16px}}.input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input[type=number]{-moz-appearance:textfield}.input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}.input:-webkit-autofill{-webkit-text-fill-color:var(--text-default);-webkit-box-shadow:0 0 0 1000px var(--surface-elevated) inset;caret-color:var(--text-default);transition:background-color 9999s ease-out}.input:-webkit-autofill:hover{-webkit-text-fill-color:var(--text-default);-webkit-box-shadow:0 0 0 1000px var(--surface-elevated) inset;caret-color:var(--text-default);transition:background-color 9999s ease-out}.input:-webkit-autofill:focus{-webkit-text-fill-color:var(--text-default);-webkit-box-shadow:0 0 0 1000px var(--surface-elevated) inset;caret-color:var(--text-default);transition:background-color 9999s ease-out}.input:-webkit-autofill:active{-webkit-text-fill-color:var(--text-default);-webkit-box-shadow:0 0 0 1000px var(--surface-elevated) inset;caret-color:var(--text-default);transition:background-color 9999s ease-out}.input-shell{align-items:center;gap:var(--space-3);height:40px;padding:0 var(--space-4);background:var(--surface-elevated);border:1px solid var(--border-control);border-radius:var(--radius-sm);box-sizing:border-box;transition:border-color var(--duration-base) var(--ease-default), background var(--duration-base) var(--ease-default);display:inline-flex}.input-shell .input{background:0 0;border:none;flex:1;min-width:0;height:100%;padding:0}.input-shell .input:focus-visible{box-shadow:none;outline:none}.input-prefix,.input-suffix{font-family:var(--font-sans);font-size:var(--text-body-s-size);color:var(--text-muted);user-select:none;white-space:nowrap;flex:none;font-weight:400}.input-leading,.input-trailing{color:var(--text-muted);flex:none;justify-content:center;align-items:center;font-size:20px;line-height:1;display:inline-flex}button.input-trailing{cursor:pointer;color:var(--text-muted);transition:color var(--duration-base) var(--ease-default);background:0 0;border:none;padding:0}@media (hover:hover) and (pointer:fine){button.input-trailing:hover{color:var(--text-default)}}button.input-trailing:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-sm)}@media (hover:hover) and (pointer:fine){.input:hover,.input-shell:hover{border-color:var(--text-muted)}}.input:focus-visible,.input-shell:focus-within{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);outline:none}.input.is-error,.input[aria-invalid=true],.input-shell.is-error{border-color:var(--border-error)}.input.is-error:focus-visible,.input[aria-invalid=true]:focus-visible,.input-shell.is-error:focus-within{border-color:var(--border-error);box-shadow:0 0 0 1px var(--border-error)}.input[disabled],.input-shell:has(.input[disabled]){background:var(--surface-disabled);color:var(--text-disabled);border-color:var(--border-disabled);cursor:not-allowed;pointer-events:none}.input[disabled]::placeholder{color:var(--text-disabled)}.input[readonly],.input-shell:has(.input[readonly]){background:var(--surface-disabled);border-color:var(--border-control);cursor:default}.input[readonly]:hover{border-color:var(--border-control)}.input[readonly]:focus-visible,.input-shell:has(.input[readonly]):focus-within{border-color:var(--border-control);box-shadow:0 0 0 1px var(--border-control)}.input.wide,.input-shell.wide{width:100%}.input.hug,.input-shell.hug{width:auto}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}[data-surface=immersive] .input:not([disabled]):not([readonly]),[data-surface=slate] .input:not([disabled]):not([readonly]),[data-surface=immersive] .input-shell:not(:has(.input[disabled])):not(:has(.input[readonly])),[data-surface=slate] .input-shell:not(:has(.input[disabled])):not(:has(.input[readonly])){color:var(--vellum);background:0 0}[data-surface=immersive] .input::placeholder,[data-surface=slate] .input::placeholder{color:color-mix(in srgb, var(--vellum), transparent 50%)}
