.search-bar__component{flex-direction:column;gap:1rem;width:100%;display:flex;position:relative}.search-bar__results__container{background-color:var(--bg);border-radius:var(--radius);opacity:0;width:100%;padding:var(--space-sm);visibility:hidden;pointer-events:none;transition:opacity .2s,visibility .2s;position:absolute;top:3.5rem}.search-bar__component:focus-within .search-bar__results__container{opacity:1;visibility:visible;pointer-events:auto;z-index:300}.search-bar__component:focus-within .search-bar__input{z-index:400}.search-bar__results{gap:var(--space-sm);max-height:clamp(10rem,30vh,20rem);padding:var(--space-sm);border-radius:var(--radius);display:grid;overflow-y:auto}.search-bar__input{grid-template-columns:1fr;place-items:center end;display:grid}.search-bar__input>input{grid-area:1/1}.search-bar__input>button{margin:var(--space-sm);grid-area:1/1;max-width:3.5rem}.search-bar__overlay{z-index:200;background-color:#00000080;position:fixed;inset:0}
.input{padding:var(--space-sm);border-radius:var(--radius);border:1px solid var(--border);border-top:1px solid var(--highlight);background-color:var(--bg-light);width:100%;height:3rem;color:var(--text);box-shadow:var(--shadow)}.input:focus{outline:2px solid var(--primary);outline-offset:1px}