.Pagination {
  @apply inline-flex !w-auto items-stretch justify-end rounded-lg border border-gray-300 bg-white [&>_*:not(:first-child)]:border-s [&>_*:not(:first-child)]:border-s-gray-300;

  .Pagination {
    @apply contents;

    > * {
      @apply border-s border-s-gray-300;
    }
  }

  /*
    Unfortunately we use a mixture of classnames (in the backend and the javascript)
    and so we have to account for both using multiple negation selectors.
  */
  > *:not(
      .next,
      .previous,
      .first,
      .last,
      .pagination,
      .Pagination,
      .Pagination-next,
      .Pagination-previous,
      .Pagination-first,
      .Pagination-last,
      :has(.ComboInput)
    ) {
    @apply px-3 py-2 text-sm font-semibold;
  }

  /*
    An item with no class, no children, and not a pagination control
    should be smaller normal weight text:
    eg: <li>1 to 50 of 19,129</li>
  */
  > li:not([class]):not(:has(*)) {
    @apply self-center text-xs font-medium;
  }

  a {
    @apply text-gray-700 no-underline;
  }
}

.Pagination-first,
.Pagination-previous,
.Pagination-next,
.Pagination-last {
  @apply flex items-center p-0;

  > a {
    @apply btu-button btu-button-text-hidden grid content-center rounded-lg before:btu-icon;
  }

  &.is-disabled {
    @apply pointer-events-none;

    a {
      @apply text-gray-400;
    }
  }
}

.Pagination-first > a {
  @apply before:btu-icon-chevrons-left rtl:before:btu-icon-chevrons-right;
}

.Pagination-previous > a {
  @apply before:btu-icon-chevron-left rtl:before:btu-icon-chevron-right;
}

.Pagination-next > a {
  @apply before:btu-icon-chevron-right rtl:before:btu-icon-chevron-left;
}

.Pagination-last > a {
  @apply before:btu-icon-chevrons-right rtl:before:btu-icon-chevrons-left;
}

/* Legacy */
.pagination {
  @apply Pagination;

  > li.first,
  > .paginationFirst {
    @apply Pagination-first;
  }

  > li.previous,
  > .paginationPrevious {
    @apply Pagination-previous;
  }

  > li.next,
  > .paginationNext {
    @apply Pagination-next;
  }

  > li.last,
  > .paginationLast {
    @apply Pagination-last;
  }

  /* Hide the entire pagination component if it has no previous or next ui. */
  &:has(.previous:empty):has(.next:empty) {
    @apply hidden;
  }

  /* Show a disabled previous button when there is no previous page. */
  > li.previous:not(:has(a)) {
    @apply pointer-events-none text-gray-400 before:btu-icon before:btu-icon-chevron-left rtl:before:btu-icon-chevron-right before:border-gray-300 before:p-2;
  }

  /* Show a disabled next button when there is no next page. */
  > li.next:not(:has(a)) {
    @apply pointer-events-none text-gray-400 before:btu-icon before:btu-icon-chevron-right rtl:before:btu-icon-chevron-left before:border-gray-300 before:p-2;
  }
}
