.search-bar{color:var(--accent-color);background:#fff3;border:1px solid #ffffff1a;border-radius:50px;flex:1;justify-content:center;align-items:center;font-size:1rem;transition:background-color .3s,border-color .2s;display:flex}.search-bar input{width:100%;color:var(--accent-color);background-color:#0000;border:none;outline:none;padding:1rem;font-size:1.2rem}.search-bar input::placeholder{color:var(--accent-color);opacity:.7}.search-bar:focus-within{border:1px solid #ffffff80;outline:none}.search-bar .search-icon{padding:7px 0 0 15px}.search-bar .clear-icon{cursor:pointer;border-radius:50%;padding:7px 10px 0 0;display:none}.search-bar .clear-icon.active{display:block}.search-bar .clear-icon:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}[data-theme=dark] .search-bar{color:#e4e4e7;background:#18181b;border:1px solid #27272a}[data-theme=dark] .search-bar:focus-within{border-color:#3f3f46;outline:none}[data-theme=dark] .search-bar input{color:#e4e4e7;background:0 0}[data-theme=dark] .search-bar input::placeholder{color:#52525b;opacity:1}[data-theme=dark] .search-bar .search-icon,[data-theme=dark] .search-bar .clear-icon{color:#52525b}[data-theme=dark] .search-bar .clear-icon:hover{color:#a1a1aa}[data-theme=light] .search-bar{color:#09090b;background:#fafafa;border:1px solid #e4e4e7}[data-theme=light] .search-bar:focus-within{border-color:#d4d4d8;outline:none}[data-theme=light] .search-bar input{color:#09090b;background:0 0}[data-theme=light] .search-bar input::placeholder{color:#a1a1aa;opacity:1}[data-theme=light] .search-bar .search-icon,[data-theme=light] .search-bar .clear-icon{color:#a1a1aa}[data-theme=light] .search-bar .clear-icon:hover{color:#52525b}