@layer components{.search-field__root{gap:calc(var(--spacing) * 1.5)}.search-field__group{flex-direction:row;align-items:center}.search-field__search-icon{z-index:10;position:absolute;inset-inline-start:calc(var(--spacing) * 3)}.search-field__input-container{flex:1}.search-field__input{text-align:left;flex-grow:1}.search-field__input--with-search-icon{padding-inline-start:calc(var(--spacing) * 9)}.search-field__input--with-clear-button{padding-inline-end:calc(var(--spacing) * 12)}.search-field__clear-button{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6);position:absolute;inset-inline-end:calc(var(--spacing) * 3)}}