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

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

  figure {
    @apply
      flex-shrink-0
      bg-primary-200
      w-16
      h-16
      mr-3
      rounded-md
      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-primary-200;

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

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

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

.search-dropdown {
  @apply
    absolute
    top-0
    z-[9999]
    shadow-bottom
    opacity-0
    pointer-events-none
    bg-white

    lg:z-[-1];

  transition: all 0.3s cubic-bezier(0.2, 0.3, 0.4, 1);

  .search-modal {
    @apply
      opacity-0;

    &.active {
      transition: all 0.3s cubic-bezier(0.2, 0.3, 0.4, 1) 0.3s;
    }

    .search-field {
      @apply
        mb-6
        mt-5
        text-xl
        w-full
        bg-white
        appearance-none
        outline-none
        rounded-sm;

      &::-webkit-search-decoration,
      &::-webkit-search-cancel-button,
      &::-webkit-search-results-button,
      &::-webkit-search-results-decoration {
        appearance: none;
      }

      &:focus {
        @apply
          outline-none
          appearance-none
          outline-transparent;
      }
    }

    .search-submit {
      @extend .button;
      @extend .button.light;
    }

    .search-form {
      @apply
        flex
        justify-between
        items-center;

      .search-button {
        @apply
          flex
          items-center
          justify-end;

        .search-number {
          @apply
            mr-1;
        }

        &.active {
          @apply
            inline-block
            opacity-100;
        }
      }

      .search-submit {
        @apply
          ml-3;
      }

      .results {
        @apply
          flex
          text-xs
          text-primary-250;
      }

      label {
        @apply
          w-full;
      }
    }
  }
}

.overlay-search {
  @apply
    z-[9999];

  backdrop-filter: blur(4px);
}

.search {
  .title-results {
    @extend .has-xs-font-size;
    @apply
      flex
      pt-3
      border-t
      border-primary-250
      mt-12
      mb-5.5
      items-baseline
      font-mono;

    .found-count {
      @apply
        ml-3
        text-primary-250;
    }
  }

  &.search-results {
    .show-all {
      @extend .button;
      @extend .outlined;
      @apply
        mx-auto
        min-w-60
        mt-15;
    }

    h1 {
      @apply
        font-sans
        text-xl
        mt-7
        text-primary-250;
    }

    .category {
      @apply
        text-xxs
        text-primary-250;
    }
  }
}
