.search-box{position:relative;width:100%;max-width:20rem;& input{width:100%}& .open{& input{border-radius:var(--border-radius) var(--border-radius) 0 0}}& .search-box__results{top:100%;width:100%;z-index:10;background-color:var(--color-background-40);border-radius:0 0 var(--border-radius) var(--border-radius);& li{border-bottom:1px solid var(--color-accent-20);letter-spacing:1px;&:last-of-type{border-bottom:none}& a{display:flex;gap:.5rem;padding:.5rem 1rem;background-color:var(--color-background-60);transition:background-color .1s ease-in-out;text-decoration:none;outline:none;&:hover{background-color:var(--color-background-70)}&:focus{background-color:var(--color-accent-20);color:var(--color-accent-90);outline:2px solid var(--color-accent-50);outline-offset:-2px}}& .slug{font-size:.9rem;color:var(--color-accent-50)}& a:focus .slug{color:var(--color-accent-70)}}}}.search-toggle{display:inline-block}.search-toggle__container.open{transform:translateY(0);opacity:1;visibility:visible}.search-toggle__content{padding:1rem}.search-toggle__content .search-box{border:none;max-width:none}@media (max-width:679px){.search-toggle__container{position:absolute;top:100%;right:0;left:0;width:100vw;background:linear-gradient(0deg,rgba(42,123,155,0) 0,var(--color-background-50));border-radius:0 0 var(--border-radius) var(--border-radius);transform:translateY(-10px);opacity:0;visibility:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000}& input{width:calc(100% - 1rem)}}@media (min-width:680px){.search-toggle__container{position:absolute;top:1.5rem;right:5rem;left:auto;width:23rem;background-color:unset;box-shadow:none;& .search-box__results{box-shadow:0 4px 5px rgba(0,0,0,.2)}}}