body.search-results {
  .notice-search {
    @apply
      text-2xl;
  }
}

.search-button {
  @apply
    cursor-pointer
    flex
    justify-center
    items-center;
}

.search-icon svg {
  path {
    fill: inherit;
  }
}

.teaser-search {
  @apply
    mb-6
    w-full
    flex;

  figure {
    @apply
      flex-shrink-0
      bg-gray-200
      w-16
      h-16
      mr-3
      rounded
      overflow-hidden;

    img.lazy {
      @apply
        w-full
        h-full
        object-cover
        object-center
        opacity-0;

      transition: all 0.15s ease;

      &.loaded {
        @apply
          opacity-100;
      }
    }
  }

  .preview-content {
    @apply
      w-full
      pb-2
      border-b
      border-gray-200;

    header {
      .preview-title {
        @apply
          text-lg
          font-medium;
      }
    }

    .preview-summary {
      @apply
        text-sm;
    }

    .updated {
      @apply
        text-sm
        text-gray-500;
    }
  }
}

.overlay-search {
  @apply
    fixed
    inset-0
    w-full
    pointer-events-none
    inline-block
    opacity-0
    z-50;

  transition: all 0.25s ease;

  select {
    @apply
      hidden;
  }

  &.active {
    @apply
      pointer-events-auto
      opacity-100;
  }

  > div {
    @apply
      h-full
      w-full
      flex
      items-center
      justify-center
      flex-col;

    .search-text {
      @apply
        outline-none
        border-none
        text-3xl
        opacity-0
        max-w-4xl
        w-full
        text-center;

      transition: all 0.5s ease-in-out;

      &.active {
        @apply
          pointer-events-auto
          opacity-100;
      }

      @screen sm {
        @apply
          text-6xl;
      }
    }

    .search-submit {
      @apply
        opacity-0
        cursor-pointer
        mt-20;

      min-width: 120px;
      transition: all 1s ease-in-out;

      &.active {
        @apply
          pointer-events-auto
          opacity-100;
      }
    }

    .search-button {
      @apply
        opacity-0
        cursor-pointer
        mb-20;

      transition: all 2s ease-in-out;

      &.active {
        @apply
          pointer-events-auto
          opacity-100;
      }

      svg {
        @apply
          h-6
          w-6;
      }
    }
  }
}
