/* CSS Overflow 5 scroll controls.
   Kept as a static stylesheet because Next/Turbopack's CSS optimizer does not
   recognize ::scroll-button() yet. Browsers without support ignore this block
   and retain the native overflow/snap behavior from styles/scroll-row.css. */

@supports selector(::scroll-button(*)) {
  .scroll-row--nav {
    anchor-name: --scroll-row-track;
  }

  .scroll-row--nav::scroll-button(*) {
    position: absolute;
    position-anchor: --scroll-row-track;
    z-index: 30;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgb(255 255 255 / 0.12);
    border-radius: 9999px;
    background: rgb(20 20 20 / 0.82);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 30px rgb(0 0 0 / 0.45);
    transition:
      background-color 0.2s ease,
      color 0.2s ease,
      transform 0.2s ease,
      opacity 0.2s ease;
  }

  .scroll-row--nav::scroll-button(*):disabled {
    opacity: 0;
    pointer-events: none;
  }

  .scroll-row--nav::scroll-button(*):hover {
    background: #fff;
    color: #000;
    transform: scale(1.08);
  }

  .scroll-row--nav::scroll-button(inline-start) {
    content: "\2039";
    position-area: center left;
    margin-inline-end: 0.25rem;
  }

  .scroll-row--nav::scroll-button(inline-end) {
    content: "\203A";
    position-area: center right;
    margin-inline-start: 0.25rem;
  }

  @media (max-width: 767px) {
    .scroll-row--nav::scroll-button(*) {
      display: none;
    }
  }
}