@layer components {
  .pagination-link {
    display: block;
    flex: 1;
    min-block-size: 1.5rem;
    pointer-events: none;
    text-decoration: none;

    &.pagination-link--active-when-observed {
      block-size: 0;
      inline-size: 0;
      overflow: hidden;
      visibility: hidden;

      turbo-frame:has(&):has(~ turbo-frame) & {
        display: none;
      }
    }

    &[aria-busy="true"] {
      .spinner {
        display: block;
      }
    }
  }

  /* Hide repeated table headers on subsequent pagination pages */
  [data-controller="pagination"] > turbo-frame ~ turbo-frame thead {
    display: none;
  }

  /* Paginated tables: unified container with shared border-radius and shadow.
     The pagination wrapper normally uses display:contents, but when it wraps
     tables we need it to be a real box so it can hold border-radius and shadow
     for the visually-continuous stack of tables. */
  [data-controller="pagination"]:has(.table) {
    display: block !important;
    border-radius: 0.5rem;
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  [data-controller="pagination"] .table {
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  /* Border between consecutive page tables (replacing the hidden thead) */
  [data-controller="pagination"] > turbo-frame ~ turbo-frame .table tbody tr:first-child {
    border-block-start: var(--border);
  }
}