.search-field{--search-field-color: var(--input-fg);--search-field-background: var(--color-white);--search-field-input-font-size: 1rem;--search-field-input-height: var(--input-height);--search-field-input-border-radius: 0;--search-field-input-fg: var(--color-black);--search-field-input-bg: transparent;--search-field-input-border-color: var(--color-grey--medium);--search-field-input-placeholder-color: var(--input-placeholder-fg);--search-field-input-base-padding-x: var(--spacing-m);--search-field-input-padding-left: calc(var(--search-field-input-base-padding-x) + var(--search-field-icon-size));--search-field-input-padding-right: calc(var(--search-field-input-base-padding-x) + var(--search-field-icon-size));--search-field-icon-size: 1em;--search-field-icon-color: var(--kiwa-blue);--search-field-spinner-display: none;color:var(--search-field-color);background-color:var(--search-field-background);position:relative;display:flex}@media screen and (min-width: 30rem){.search-field{--search-field-input-base-padding-x: var(--spacing-l)}}.search-field--secondary{--search-field-color: var(--kiwa-mint--light);--search-field-background: transparent;--search-field-input-border-radius: var(--input-height);--search-field-input-border-color: var(--kiwa-mint--light);--search-field-input-placeholder-color: var(--kiwa-mint--light);--search-field-icon-color: var(--kiwa-mint--light);--search-field-input-fg: inherit;--search-field-input-bg: transparent}.search-field--tertiary{--search-field-background: transparent;--search-field-input-font-size: 1.125rem;--search-field-input-height: 4rem;--search-field-input-fg: var(--color-black);--search-field-input-bg: var(--color-white);--search-field-input-border-radius: 4.375rem}@media screen and (min-width: 64rem){.search-field--tertiary{--search-field-icon-size: 1.25rem;--search-field-input-height: 5.75rem}}.search-field[data-empty]{--search-field-input-padding-right: var(--search-field-input-base-padding-x)}@media screen and (min-width: 30rem){.search-field[data-empty][data-loading]{--search-field-input-padding-right: calc( var(--search-field-input-base-padding-x) + var(--search-field-icon-size) )}}@media screen and (min-width: 30rem){.search-field[data-loading]{--search-field-input-padding-right: calc( var(--search-field-input-base-padding-x) + (var(--search-field-icon-size) * 2) );--search-field-spinner-display: block}}.search-field__label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.search-field__input-field[type=search]{height:var(--search-field-input-height);border-color:var(--search-field-input-border-color);border-radius:var(--search-field-input-border-radius);padding-left:var(--search-field-input-padding-left);padding-right:var(--search-field-input-padding-right);color:var(--search-field-input-fg);background:var(--search-field-input-bg);font-size:var(--search-field-input-font-size)}.search-field__input-field[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}.search-field__input-field[type=search]::placeholder{color:var(--search-field-input-placeholder-color)}.search-field__input-icon{position:absolute;top:0;left:var(--spacing);height:var(--search-field-input-height);width:var(--search-field-icon-size);color:var(--search-field-icon-color);z-index:3}.search-field__input-meta{display:flex;align-items:center;gap:var(--spacing-xs);position:absolute;right:var(--spacing);color:var(--search-field-icon-color);top:50%;transform:translateY(-50%);z-index:3;height:var(--search-field-icon-size)}.search-field__spinner{display:var(--search-field-spinner-display);height:var(--search-field-icon-size);width:var(--search-field-icon-size)}.search-field__clear{height:var(--search-field-icon-size);width:var(--search-field-icon-size);border:0;padding:0;color:inherit;background:transparent}[data-empty] .search-field__clear{display:none}.search-field__clear svg{display:block;width:100%;height:auto}