assets/scss/components/_search.scss

/*=============== SEARCH ===============*/
.search{
   position: fixed;
   top: -100%;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: var(--z-fixed);
   background-color: hsla(230, 62%, 96%, .6);
   backdrop-filter: blur(16px);
   padding: 8rem 1.5rem;
   transition: top .4s;

   &__form{
      display: flex;
      align-items: center;
      column-gap: .5rem;
      background-color: var(--container-color);
      border: 2px solid var(--border-color);
      padding-inline: 1rem;
   }
   &__icon{
      font-size: 1.25rem;
      color: var(--title-color);
   }
   &__input{
      width: 100%;
      padding-block: 1rem;
      background-color: var(--container-color);
      color: var(--text-color);
   }
   &__close{
      position: absolute;
      top: 2rem;
      right: 2rem;
      font-size: 2rem;
      color: var(--title-color);
      cursor: pointer;
   }
}

/* Show search */
.show-search{
   top: 0;
}