/* templates/default/css/hi-pager.css */

/* Универсальные стили для HiPager (используются в Articles, Search и др.) */

.articles-pager,
.hi-pager-wrap{
  margin-top:14px;
  display:flex;
  justify-content:center;
}

.hi-pager{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
}

.hi-page-btn{
  min-width:38px;
  height:38px;
  padding:0 10px;
  border-radius:12px;
  border:1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  cursor:pointer;
  font-weight:900;
  line-height:1;
}

.hi-page-btn:hover{ border-color: var(--accent); }
.hi-page-btn.is-active{
  background: var(--accent);
  color: var(--accent-contrast, #fff);
  border-color: transparent;
}
.hi-page-btn:disabled{
  opacity:.5;
  cursor:not-allowed;
}

/* -------- skeletons (optional, but handy) -------- */

.hi-skeleton,
.article-skeleton,
.term-skeleton{
  border:1px solid var(--border-color);
  background: var(--bg-body);
  border-radius:16px;
  position:relative;
  overflow:hidden;
}


.hi-skeleton--article,
.article-skeleton{ height: 92px; }

.hi-skeleton--term,
.term-skeleton{ height: 72px; border-radius:14px; }

.hi-skeleton:after,
.article-skeleton:after,
.term-skeleton:after{
  content:"";
  position:absolute;
  inset:0;
  transform: translateX(-60%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  animation: hi-shimmer 1.1s infinite;
}

@keyframes hi-shimmer{ to { transform: translateX(60%); } }