.ProseMirrorFindReplace-findContainer {
  @apply order-5 grid gap-y-2 border-t px-3 py-2;

  &.collapsed {
    @apply hidden;
  }

  @container rte (max-width: 699px) {
    @apply grid-cols-[1fr_auto] grid-rows-[repeat(2,auto)];

    &:has(.ProseMirrorFindReplace-findContainer-more.open) {
      @apply grid-rows-[repeat(5,auto)];
    }

    .ProseMirrorFindReplace-findContainer-inputContainer,
    .ProseMirrorFindReplace-findContainer-replaceContainer {
      @apply contents;
    }

    /* Makes input full-width minus space needed for icon button */
    .ProseMirrorFindReplace-findContainer-input {
      @apply col-span-full row-[1/2] w-[calc(100%-2.75rem)];
    }

    .ProseMirrorFindReplace-findContainer-more {
      @apply col-[2/3] row-[1/2] justify-self-end;
    }

    .ProseMirrorFindReplace-findContainer-replace-input,
    .ProseMirrorFindReplace-findContainer-options {
      @apply col-span-full;
    }

    .ProseMirrorFindReplace-findContainer-pagination {
      @apply col-span-full row-[2/3];

      &:has(+ .ProseMirrorFindReplace-findContainer-more.open) {
        @apply row-[5/6];
      }
    }

    @container rte (min-width: 370px) {
      &:has(.ProseMirrorFindReplace-findContainer-more.open) {
        @apply grid-rows-[repeat(4,auto)];
      }

      .ProseMirrorFindReplace-findContainer-pagination {
        @apply col-[2/3];

        &:has(+ .ProseMirrorFindReplace-findContainer-more.open) {
          @apply row-[4/5];
        }
      }
    }
  }
}

@container rte (min-width: 700px) {
  .ProseMirrorFindReplace-findContainer-inputContainer {
    @apply relative grid grid-cols-[minmax(auto,50%)_auto_1fr] gap-x-2 before:btu-icon before:btu-icon-search before:absolute before:left-4 before:top-[9px];

    .ProseMirrorFindReplace-findContainer-input {
      @apply pl-11;
    }

    .ProseMirrorFindReplace-findContainer-pagination {
      @apply col-[3/4] row-[1/2];
    }
  }

  .ProseMirrorFindReplace-findContainer-replaceContainer {
    @apply grid grid-cols-[auto_auto_1fr] gap-x-4;

    .ProseMirrorFindReplace-findContainer-actions {
      @apply justify-self-end;
    }
  }
}

.ProseMirrorFindReplace-findContainer-more {
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray self-center before:btu-icon before:btu-icon-chevron-down before:transition;

  &.open {
    @apply btu-button-pressed before:-rotate-180;
  }
}

.ProseMirrorFindReplace-findContainer-pagination {
  @apply grid items-center justify-self-end text-xs text-gray-500 [grid-template-areas:'current_of_total_prev_next'];

  .ProseMirrorFindReplace-findContainer-pagination-current {
    @apply pr-1;
  }

  .ProseMirrorFindReplace-findContainer-pagination-total {
    @apply pl-1;
  }

  .ProseMirrorFindReplace-findContainer-pagination-prev,
  .ProseMirrorFindReplace-findContainer-pagination-next {
    @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray border border-gray-300 before:btu-icon focus:z-[1] focus-visible:border-transparent;
  }

  .ProseMirrorFindReplace-findContainer-pagination-prev {
    @apply ms-4 rounded-e-none [grid-area:prev] before:btu-icon-chevron-left rtl:before:btu-icon-chevron-right;
  }

  .ProseMirrorFindReplace-findContainer-pagination-next {
    @apply rounded-s-none border-s-0 [grid-area:next] before:btu-icon-chevron-right rtl:before:btu-icon-chevron-left;
  }
}

.ProseMirrorFindReplace-findContainer-options {
  @apply flex gap-4 py-2;
}

.ProseMirrorFindReplace-findContainer-actions {
  @apply flex gap-2;
}

.ProseMirrorFindReplace-findContainer-actions > button {
  @apply btu-button btu-button-outline btu-button-fill-none btu-button-gray;
}

/* highlighting search results in text body */
.ProseMirrorFindReplace-found {
  @apply bg-warning-100;

  &.active {
    @apply bg-warning-300;
  }
}
