.form-input{--icon-size:.875rem;--form-input-prepend-space:2.5rem;color:var(--ms-body-color);position:relative}.form-input:has(.form-input__prepend) .form-input__field{padding-inline-start:var(--form-input-prepend-space)}.form-input:has(.form-input__append) .form-input__field{padding-inline-end:2.5rem}.form-input:has(.form-input__append) .form-input__erase{inset-inline-end:3rem}.form-input:has(.form-input__erase) .form-input__field{padding-inline-end:2.25rem}.form-input--size-sm{--icon-size:.75rem}.form-input--size-sm .form-input__field{min-height:calc(1.5em + .5rem + var(--ms-border-width)*2);border-radius:var(--ms-border-radius-sm);padding:.25rem .75rem;font-size:.75rem}.form-input--size-sm .form-input__append,.form-input--size-sm .form-input__prepend{padding-inline:.875rem;font-size:.875rem}.form-input--size-sm .form-input__erase{inset-inline-end:.75rem}.form-input--size-lg{--icon-size:1.25rem}.form-input--size-lg .form-input__field{min-height:calc(1.5em + 1rem + var(--ms-border-width)*2);border-radius:var(--ms-border-radius-lg);padding:.5rem 1rem;font-size:1.25rem}.form-input--size-lg .form-input__append,.form-input--size-lg .form-input__prepend{font-size:1.25rem}.form-input__append,.form-input__prepend{justify-content:center;align-items:center;height:100%;padding:.5rem 1rem;display:flex;position:absolute;top:0}.form-input__prepend{padding-inline-end:.625rem;inset-inline-start:0}.form-input__append{inset-inline-end:0}.form-input__icon{height:var(--icon-size);width:var(--icon-size)}.form-input__field{border:var(--ms-border-width) solid rgba(var(--ms-white-rgb),.15);background-color:rgba(var(--ms-white-rgb),.075);font-weight:var(--ms-font-weight-medium);border-radius:var(--ms-border-radius-sm);color:var(--ms-white);appearance:none;background-clip:padding-box;width:100%;padding:.375rem 1rem;font-size:.875rem;line-height:1.5;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;display:block}@media (prefers-reduced-motion:reduce){.form-input__field{transition:none}}.form-input__field::placeholder{color:var(--ms-gray-400);opacity:1}.form-input__field:focus{border-color:color-mix(in srgb,var(--ms-primary) 50%,#fff);box-shadow:0 0 0 .25rem rgba(var(--ms-primary-rgb),.25);outline:0}.form-input__field:disabled{border-color:rgba(var(--ms-white-rgb),.075);background-color:rgba(var(--ms-white-rgb),.025);opacity:1}.form-input__field[type=search]::-webkit-search-cancel-button{appearance:none}.form-input__field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.form-input__field::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.form-input__field[type=number]{appearance:textfield}.form-input--error .form-input__field{border-color:var(--ms-danger)}.form-input__shortcut-badge{--ms-badge-font-weight:var(--ms-font-weight-medium);--ms-badge-border-radius:.375rem;--ms-badge-color:var(--ms-white);--ms-badge-padding-x:.375rem;--ms-badge-font-size:.625rem;--ms-badge-padding-y:.25rem;background-color:rgba(var(--ms-black-rgb),.15);border-color:rgba(var(--ms-white-rgb),.1);pointer-events:none}.form-input__erase{inset-inline-end:1rem;background-color:#0000;border:none;align-items:center;height:100%;display:flex;position:absolute;top:0}.form-input__erase:hover{color:var(--ms-primary)}.form-input__erase-icon{width:.5rem;height:.5rem}[dir=rtl] .form-input:has(.form-input__prepend) .form-input__field:is([type=number],[type=tel],[type=email],[type=url]){padding-left:.75rem;padding-right:2.5rem}[dir=rtl] .form-input:has(.form-input__append) .form-input__field:is([type=number],[type=tel],[type=email],[type=url]){padding-left:2.5rem;padding-right:.75rem}