/* Кнопки перемотки горизонтальных лент AlphaHit (StripArrows) — общий стиль нового интерфейса (templates/v2/base.html)
   и витрины /hit «Стриминг» (templates/main/hit_stream.html). Цвета — из токенов страницы с запасными значениями:
   у v2 --ink, у витрины --text. */
/* Кнопки перемотки лент (StripArrows, static/js/strip-arrows.js — новый интерфейс и витрина /hit; владелец 28.09.2026: «Если на сайте не входят горизонтально
   все квадратики, то нужно чтобы были кнопочки перемотки и так везде»). .hs — обёртка ленты, кнопки лежат поверх
   её краёв по центру высоты; не нужна кнопка — атрибут hidden (display: grid ниже его не перебивает — :not). */
.hs { position: relative; min-width: 0; }
.hs__btn:not([hidden]) { position: absolute; z-index: 5; top: 50%; display: grid; place-items: center; width: 40px; height: 40px;
  margin-top: -20px; padding: 0; border: 1px solid var(--line, rgb(0 0 0 / 0.08)); border-radius: 50%; color: var(--ink, var(--text, #121214));
  background: color-mix(in srgb, var(--panel, #fff) 92%, transparent); box-shadow: 0 6px 18px -6px rgb(0 0 0 / 0.35);
  backdrop-filter: blur(6px); cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background-color 150ms ease; }
.hs__btn .ic { width: 18px; height: 18px; }
.hs__btn--prev { left: 4px; }
.hs__btn--prev .ic { transform: scaleX(-1); }
.hs__btn--next { right: 4px; }
.hs__btn:active { transform: scale(0.92); }
.hs__btn:focus-visible { outline: 2px solid var(--accent, #d9321d); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .hs__btn:hover { background: var(--panel, #fff); } }
@media (max-width: 560px) { .hs__btn:not([hidden]) { width: 34px; height: 34px; margin-top: -17px; } .hs__btn .ic { width: 16px; height: 16px; } }