/* Round scroll buttons, paired with the createHorizontalScroller() behaviour
   in scroller.js. Shared by every horizontal card row on the site (skills,
   most-viewed, library rows, docent, hoofdstuk) — hierheen verplaatst uit skills.css
   on 2026-08-08, since it was used by far more than just that one partial.
   Any page that loads scroller.js needs this file too, or the arrows have no
   shape/position and cards past the first screenful become unreachable. */
.scroll-btn {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
  color: var(--secondary-color);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease,
    box-shadow 0.2s ease;
}
.scroll-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}
.scroll-left { left: 40px; }
.scroll-right { right: 40px; }
.scroll-btn i {
  font-size: 1.5rem;
  line-height: 1;
}

/* Op een aanraakscherm swipe je gewoon; de pijlen zouden daar alleen kaarten
   afdekken. `!important` omdat de scroller-util de zichtbaarheid inline zet. */
@media (hover: none) {
  .scroll-btn {
    display: none !important;
  }
}