/**
 * Pagination — MUD / Figma
 *
 * Разметка: templates/navigation/pager.html.twig (.asp-pagination)
 *
 * Desktop: ряд gap 24px; номера gap 16px; ячейки 40×40 r4; стрелки min 40px высота,
 *   r6, асимметричный padding; типографика Onest 500 14px / 20px; текст #121212.
 * Активная страница: фон #0058D2, текст #FFFFFF.
 * Hover (не выбран): #F5F5F5; active/pressed: #D9D9D9.
 * Focus: 0 0 0 1px #fff, 0 0 0 3px #3379DB.
 *
 * Mobile: ряд gap 4px; номера gap 8px; ячейки и стрелки 32×32; иконки 16×16.
 */

:root {
  /* Локальные токены компонента (Figma, если нет в tokens.css) */
  --asp-pagination-focus-ring: 0 0 0 1px #ffffff, 0 0 0 3px #3379db;
  --asp-pagination-item-hover-bg: #f5f5f5;
}

/* ── Контейнер ── */
.asp-pagination {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--spacing-24);
  padding: var(--spacing-24) 0;
  width: 100%;
  max-width: 100%;
}

.asp-pagination *,
.asp-pagination *::before,
.asp-pagination *::after {
  box-sizing: border-box;
}

/* ── Стрелки «înapoi» / «înainte» ── */
.asp-pagination__arrow {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-6);
  min-width: 56px;
  height: 40px;
  padding: 0 var(--spacing-16) 0 var(--spacing-12); /* prev: Figma 12L / 16R */
  border-radius: var(--border-radius-6);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--gray-900);
  text-decoration: none;
  font-family: var(--font-family-base);
  font-size: var(--text-desktop-body-sm-500-size);
  font-weight: var(--text-desktop-body-sm-500-weight);
  line-height: 20px;
  transition: background-color 0.15s ease;
}

/* next: после списка номеров */
.asp-pagination > .asp-pagination__list ~ .asp-pagination__arrow {
  padding: 0 var(--spacing-12) 0 var(--spacing-16);
}

.asp-pagination__arrow:hover {
  background-color: var(--asp-pagination-item-hover-bg);
}

.asp-pagination__arrow:active {
  background-color: var(--gray-200);
}

.asp-pagination__arrow:focus {
  outline: none;
}

.asp-pagination__arrow:focus-visible {
  box-shadow: var(--asp-pagination-focus-ring);
  border-radius: var(--border-radius-6);
}

.asp-pagination__arrow[disabled],
.asp-pagination__arrow.is-disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}

.asp-pagination__arrow svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ── Список номеров ── */
.asp-pagination__list {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-16);
  list-style: none;
  margin: 0;
  padding: 0;
}

.asp-pagination__list > li {
  margin: 0;
  padding: 0;
}

/* Номер / многоточие */
.asp-pagination__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: var(--border-radius-4);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-family-base);
  font-size: var(--text-desktop-body-sm-500-size);
  font-weight: var(--text-desktop-body-sm-500-weight);
  line-height: 20px;
  text-align: center;
  color: var(--gray-900);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.asp-pagination__item:hover {
  background-color: var(--asp-pagination-item-hover-bg);
}

.asp-pagination__item:active {
  background-color: var(--gray-200);
}

.asp-pagination__item:focus {
  outline: none;
}

.asp-pagination__item:focus-visible {
  box-shadow: var(--asp-pagination-focus-ring);
  border-radius: var(--border-radius-4);
}

.asp-pagination__item.is-active {
  background-color: var(--blue-sky-600);
  color: var(--white);
  cursor: default;
  pointer-events: none;
}

.asp-pagination__item.is-active:hover {
  background-color: var(--blue-sky-600);
  color: var(--white);
}

.asp-pagination__item.is-active:focus-visible {
  box-shadow: var(--asp-pagination-focus-ring);
}

/* ── Mobile (Figma Breakpoint=Mobile) ── */
@media (max-width: 767px) {
  .asp-pagination {
    gap: var(--spacing-4);
    padding: var(--spacing-16) 0;
  }

  .asp-pagination__arrow,
  .asp-pagination > .asp-pagination__list ~ .asp-pagination__arrow {
    min-width: 32px;
    width: 32px;
    height: 32px;
    padding: 0;
  }

  .asp-pagination__arrow svg {
    width: 16px;
    height: 16px;
  }

  .asp-pagination__list {
    gap: var(--spacing-8);
  }

  .asp-pagination__item {
    width: 32px;
    height: 32px;
    font-size: var(--text-desktop-body-sm-500-size);
    line-height: 20px;
  }
}