codex.docs/src/frontend/styles/components/search.pcss

.search {
  &-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    overflow-y: scroll;

    cursor: pointer;

    &--visible {
      display: block;
    }
  }

  &-wrapper {
    background: #fff;
    margin: 30vh auto 10vh;
    max-width: var(--layout-width-main-col);
    width: 100%;

    @apply --squircle;
  }

  &-input {
    width: 100%;
    background: #bbb;
    padding: 15px 25px;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    background-color: transparent;

    &::placeholder {
      font-weight: 500;
    }
  }

  &-results {
    &-wrapper {

    }

    &-item {
      padding: 15px 25px;
      display: block;

      &:nth-child(odd) {
        background: #f5f5f5;
      }

      &:hover {
        background: #ddd;
      }

      &__title {
        font-weight: 500;
      }

      &__description {
      }
    }
  }

}

.noscroll {
  overflow: hidden;
}

.blurred {
  filter: blur(2px);
}