:root{--search-expand-icon-size:24px;--search-expand-wrapper-padding:8px;--search-expand-input-font-size:14px;--search-expand-color-icon:#fff;--search-expand-color-icon-hover:#dadada;--search-expand-color-wrapper-bg:#222;--search-expand-color-wrapper-bg-hover:var(--search-expand-color-wrapper-bg);--search-expand-color-text:#fff;--search-expand-expand-w:180px;--search-expand-total-size:calc(var(--search-expand-icon-size) + var(--search-expand-wrapper-padding)*2)}:host{display:inline-block;font-family:sans-serif}.search-expand.inline-block{display:inline-block}.search-expand--wrapper{height:var(--search-expand-total-size);transition:width .3s ease-out;width:var(--search-expand-total-size)}.search-expand--wrapper--inner{align-items:center;background-color:var(--search-expand-color-wrapper-bg);border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.15);cursor:pointer;display:flex;height:100%;overflow:hidden;padding:var(--search-expand-wrapper-padding)}.search-expand--wrapper .search-expand--icon,.search-expand--wrapper--inner{transition:background-color .3s ease-out}.search-expand--wrapper:focus-within,.search-expand--wrapper:hover{width:var(--search-expand-expand-w)}.search-expand--wrapper:focus-within>.search-expand--wrapper--inner,.search-expand--wrapper:hover>.search-expand--wrapper--inner{background-color:var(--search-expand-color-wrapper-bg-hover)}.search-expand--wrapper:focus-within .search-expand--icon,.search-expand--wrapper:hover .search-expand--icon{background-color:var(--search-expand-color-icon-hover)}.search-expand--icon{background-color:var(--search-expand-color-icon);flex-shrink:0;height:var(--search-expand-icon-size);margin-right:8px;mask:url('data:image/svg+xml;utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M464,428,339.92,303.9a160.48,160.48,0,0,0,30.72-94.58C370.64,120.37,298.27,48,209.32,48S48,120.37,48,209.32s72.37,161.32,161.32,161.32a160.48,160.48,0,0,0,94.58-30.72L428,464ZM209.32,319.69A110.38,110.38,0,1,1,319.69,209.32,110.5,110.5,0,0,1,209.32,319.69Z"/></svg>') center/contain no-repeat;width:var(--search-expand-icon-size)}input.search-expand--input{background:transparent;border:none;color:var(--search-expand-color-text);flex-grow:1;font-size:var(--search-expand-input-font-size);opacity:1;outline:none;transition:width .2s ease .2s;width:0}.search-expand--wrapper:focus-within input.search-expand--input,.search-expand--wrapper:hover input.search-expand--input{width:100%}