/**
 * Sitewide horizontal scroll affordance for wide tables and matrices.
 * Pair with csmbac-scroll-region.js on [data-csmbac-scroll-region].
 */

.csmbac-scroll-region {
  --scroll-region-btn-size: 2.25rem;
  --scroll-region-glow: var(--accent, #6366f1);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 0.4rem;
  width: 100%;
  overflow: visible;
}

.csmbac-scroll-region__viewport {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  .csmbac-scroll-region__viewport {
    scroll-behavior: auto;
  }
}

.csmbac-scroll-region__btn {
  flex-shrink: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--scroll-region-btn-size);
  height: var(--scroll-region-btn-size);
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.18));
  background: var(--surface-elevated, rgba(255, 255, 255, 0.06));
  color: var(--text-main, #f4f4f5);
  cursor: pointer;
  box-shadow: var(--shadow-card, 0 2px 8px rgba(0, 0, 0, 0.12));
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    opacity 0.2s ease,
    transform 0.15s ease;
}

.csmbac-scroll-region__btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent, #6366f1) 14%, var(--surface-elevated, rgba(255, 255, 255, 0.08)));
  border-color: color-mix(in srgb, var(--accent, #6366f1) 35%, var(--border, rgba(255, 255, 255, 0.2)));
}

.csmbac-scroll-region__btn:focus-visible {
  outline: 2px solid var(--accent, #6366f1);
  outline-offset: 2px;
}

.csmbac-scroll-region__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.csmbac-scroll-region__btn[hidden] {
  display: none;
}

@keyframes csmbac-scroll-region-next-glow {
  0%,
  100% {
    box-shadow:
      var(--shadow-card, 0 2px 8px rgba(0, 0, 0, 0.12)),
      0 0 0 0 color-mix(in srgb, var(--scroll-region-glow) 0%, transparent);
  }

  50% {
    box-shadow:
      var(--shadow-card, 0 2px 8px rgba(0, 0, 0, 0.12)),
      0 0 14px 3px color-mix(in srgb, var(--scroll-region-glow) 42%, transparent);
  }
}

.csmbac-scroll-region--hint-next .csmbac-scroll-region__btn--next:not(:disabled):not([hidden]) {
  animation: csmbac-scroll-region-next-glow 2.6s ease-in-out infinite;
  border-color: color-mix(in srgb, var(--scroll-region-glow) 38%, var(--border, rgba(255, 255, 255, 0.18)));
}

@media (prefers-reduced-motion: reduce) {
  .csmbac-scroll-region--hint-next .csmbac-scroll-region__btn--next:not(:disabled):not([hidden]) {
    animation: none;
    box-shadow:
      var(--shadow-card, 0 2px 8px rgba(0, 0, 0, 0.12)),
      0 0 10px 2px color-mix(in srgb, var(--scroll-region-glow) 32%, transparent);
  }
}

.csmbac-scroll-region__icon {
  display: block;
}

/* Show controls when overflow or tier-cycle mobile mode */
.csmbac-scroll-region--overflow .csmbac-scroll-region__btn,
.csmbac-scroll-region--tier-cycle .csmbac-scroll-region__btn {
  display: inline-flex;
}

.csmbac-scroll-region--overflow .csmbac-scroll-region__btn[hidden],
.csmbac-scroll-region--tier-cycle .csmbac-scroll-region__btn[hidden] {
  display: none;
}

/* Edge fade when more content is off-screen (scroll mode only) */
.csmbac-scroll-region--can-scroll-left.csmbac-scroll-region--can-scroll-right:not(.csmbac-scroll-region--tier-cycle)
  .csmbac-scroll-region__viewport {
  mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}

.csmbac-scroll-region--can-scroll-left:not(.csmbac-scroll-region--can-scroll-right):not(.csmbac-scroll-region--tier-cycle)
  .csmbac-scroll-region__viewport {
  mask-image: linear-gradient(to right, transparent 0, #000 28px);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px);
}

.csmbac-scroll-region--can-scroll-right:not(.csmbac-scroll-region--can-scroll-left):not(.csmbac-scroll-region--tier-cycle)
  .csmbac-scroll-region__viewport {
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}

@media (max-width: 480px) {
  .csmbac-scroll-region {
    gap: 0.25rem;
  }

  .csmbac-scroll-region {
    --scroll-region-btn-size: 2rem;
  }
}