.theme-switcher{--width:3rem;width:var(--width);cursor:pointer;background-color:#0000;border:none;grid-template-areas:"stack";align-items:center;display:grid}.theme-switcher .pill{border-radius:var(--radius);background-color:var(--bg-dark);width:100%;height:.75rem;box-shadow:var(--shadow);grid-area:stack}.theme-switcher .circle{width:calc(var(--width)/2);height:calc(var(--width)/2);background-color:var(--secondary);color:var(--bg);transition:transform .3s var(--cubic-bezier);border-radius:100%;grid-area:stack;grid-template-areas:"circle-stack";place-items:center;display:grid;transform:translate(0)}.theme-switcher .circle .icon{grid-area:circle-stack;width:70%;height:70%;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1)}.theme-switcher.light .circle{transform:translate(100%)}.theme-switcher.light .circle .sun{opacity:1;transform:rotate(0)scale(1)}.theme-switcher.light .circle .moon{opacity:0;transform:rotate(90deg)scale(.5)}.theme-switcher.dark .circle .sun{opacity:0;transform:rotate(-90deg)scale(.5)}.theme-switcher.dark .circle .moon{opacity:1;transform:rotate(0)scale(1)}
.search-bar__component{flex-direction:column;gap:1rem;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}