/* =========================================================
   Paginação
   ========================================================= */

.pagination-bar {
  min-height: 68px;

  padding:
    12px
    18px;

  border-top:
    1px solid
    var(--border-subtle);

  display: grid;
  grid-template-columns:
    minmax(160px, 1fr)
    auto
    minmax(160px, 1fr);

  align-items: center;

  gap: 16px;

  background:
    var(--surface-card);
}


.pagination-summary {
  color:
    var(--text-secondary);

  font-size:
    12px;
}

.pagination-summary strong {
  color:
    var(--text-primary);

  font-weight: 800;

  font-variant-numeric:
    tabular-nums;
}


/* Navegação */

.pagination-nav {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 6px;
}

.pagination-pages {
  display: flex;
  align-items: center;

  gap: 4px;
}

.pagination-control,
.pagination-page {
  width: 34px;
  height: 34px;

  border:
    1px solid
    var(--border-subtle);

  border-radius:
    9px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color:
    var(--text-secondary);

  background:
    var(--surface-subtle);

  font-size:
    12px;
  font-weight: 750;

  text-decoration: none;

  transition:
    color var(--motion-fast),
    border-color var(--motion-fast),
    background var(--motion-fast);
}

.pagination-control:hover,
.pagination-page:hover {
  border-color:
    var(--border-default);

  color:
    var(--brand-700);

  background:
    var(--brand-100);

  text-decoration: none;
}

.pagination-page.is-current {
  border-color:
    var(--brand-700);

  color:
    var(--text-inverse);

  background:
    var(--brand-800);

  pointer-events: none;
}

.pagination-control.is-disabled {
  opacity: .38;

  cursor: default;
}

.pagination-ellipsis {
  width: 24px;

  display: inline-flex;
  justify-content: center;

  color:
    var(--text-tertiary);
}


/* Quantidade por página */

.pagination-size {
  justify-self: end;

  display: flex;
  align-items: center;

  gap: 7px;
}

.pagination-size label {
  color:
    var(--text-secondary);

  font-size: 11px;
  font-weight: 700;

  white-space: nowrap;
}

.pagination-size select {
  width: 68px;
  min-width: 68px;
  min-height: 34px;

  padding:
    4px
    26px
    4px
    9px;

  font-size: 12px;
}

.pagination-size-submit {
  min-height: 34px;

  padding:
    0 10px;

  border:
    1px solid
    var(--border-default);

  border-radius:
    9px;

  background:
    var(--surface-subtle);

  color:
    var(--text-secondary);

  font-size: 11px;
  font-weight: 750;

  cursor: pointer;
}

.pagination-size-submit:hover {
  color:
    var(--brand-700);

  background:
    var(--brand-100);
}


/* Mobile */

@media (max-width: 760px) {
  .pagination-bar {
    padding:
      14px;

    grid-template-columns:
      1fr;

    justify-items: center;

    gap: 12px;
  }

  .pagination-summary {
    order: 1;

    width: 100%;

    text-align: center;
  }

  .pagination-nav {
    order: 2;

    width: 100%;
  }

  .pagination-size {
    order: 3;

    justify-self: center;
  }

  .pagination-page,
  .pagination-control {
    width: 36px;
    height: 36px;
  }
}