/* Component: Pagination ---------------------------------------------------- */
@layer components {
  .tp-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    margin-top: 56px;
  }

  .tp-pagination__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tp-btn-h-load-more);
    padding: 0 34px;
    border: var(--tp-border-brass);
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-label-l);
    letter-spacing: var(--tp-track-label);
    text-transform: uppercase;
    color: var(--tp-color-ink);
    text-align: center;
    transition: background-color var(--tp-dur-fast) ease, opacity var(--tp-dur-fast) ease;
  }

  .tp-pagination__more:hover {
    background: var(--tp-color-paper-hover);
    color: var(--tp-color-ink);
  }

  .tp-pagination__more.is-busy {
    opacity: 0.55;
    pointer-events: none;
  }

  .tp-pagination__pages {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-label);
    letter-spacing: var(--tp-track-nav-header);
    text-transform: uppercase;
    color: var(--tp-color-gold-text);
  }

  .tp-pagination__pages .page-numbers {
    color: var(--tp-color-gold-text);
  }

  .tp-pagination__pages a.page-numbers:hover {
    color: var(--tp-color-ink);
  }

  .tp-pagination__pages .page-numbers.current {
    color: var(--tp-color-ink);
    border-bottom: var(--tp-border-brass);
    padding-bottom: 3px;
  }

  .tp-pagination__pages .page-numbers.dots {
    color: var(--tp-color-brass-soft);
  }

  .tp-pagination__error {
    flex-basis: 100%;
    text-align: center;
    font-size: var(--tp-size-body-s);
    font-style: italic;
    color: var(--tp-color-text-muted);
  }

  @media (max-width: 699px) {
    .tp-pagination {
      display: grid;
      justify-items: center;
      gap: var(--tp-space-5);
      margin-top: 44px;
    }
  }
}