@layer controls {
/* Shared interactive form controls. This module owns icon/input geometry. */
:is(.input-with-icon,.input-icon,.search-box,.search-field){position:relative;display:flex;align-items:center;min-width:0;border:0;background:transparent;padding:0;}
:is(.input-with-icon,.input-icon,.search-box)>.ui-icon,
.search-field>.ui-icon,
.search-field>span:first-child{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);z-index:2;width:20px;height:20px;display:grid;place-items:center;color:var(--ed-muted);pointer-events:none;}
.search-field>span:first-child>.ui-icon{position:static;width:20px;height:20px;transform:none;color:inherit;}
:is(.input-with-icon,.input-icon,.search-box,.search-field)>input{min-width:0;padding-inline-start:48px;padding-inline-end:14px;}
.search-box input[type="search"],.search-field input[type="search"]{appearance:none;-webkit-appearance:none;text-overflow:ellipsis;}
.search-box input::placeholder,.search-field input::placeholder{opacity:.72;}
.search-box,.search-input-wrap{min-height:48px;}
.search-box input,.search-input-wrap input{height:48px;}
}