/* CMD P17.1-Gate — one semantic current-page treatment on Desktop and Mobile. */

:root {
  --cmd-pagination-current: #1f63b5;
  --cmd-pagination-current-strong: #0e3e78;
}

:is(.table-pager, .pagination) :is(.btn, .mini-btn).qscm-page-number[aria-current="page"],
:is(.table-pager, .pagination) :is(.btn, .mini-btn).qscm-page-number.active {
  border-color: var(--cmd-color-primary, var(--cmd-pagination-current)) !important;
  background: var(--cmd-color-primary, var(--cmd-pagination-current)) !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9) inset,
              0 2px 7px rgba(14, 62, 120, .18);
  cursor: default;
  opacity: 1 !important;
  pointer-events: none;
}

:is(.table-pager, .pagination) .qscm-page-number[aria-current="page"]:focus-visible {
  outline-color: color-mix(in srgb, var(--cmd-color-primary, var(--cmd-pagination-current)) 36%, transparent);
}

.pagination.qscm-gate-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 15px;
  border-top: 1px solid var(--line, #d7e0ea);
  background: #fbfcfc;
}

.pagination.qscm-gate-pager > div {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

:is(.table-pager, .pagination) .qscm-page-ellipsis {
  min-width: 24px;
  color: var(--muted, #64748b);
  text-align: center;
}

body.cmd-p17-mobile :is(.table-pager, .pagination.qscm-gate-pager) {
  scroll-margin-top: calc(var(--cmd-mobile-header-inset, 56px) + 12px);
}

@media (max-width: 560px) {
  .pagination.qscm-gate-pager {
    align-items: flex-start;
    flex-direction: column;
  }

  .pagination.qscm-gate-pager > div {
    width: 100%;
  }

  .pagination.qscm-gate-pager :is(.mini-btn, .btn) {
    min-width: 44px;
    min-height: 44px;
  }
}