/**
 * player-scroll-rail.css - shared DOM scrollbar rail for player portal static
 * destinations. Visual-only: no typography rules.
 */

@layer components {
  body.hd-player-mode-player-portal,
  body.hd-player-mode-anonymous,
  body.hd-player-mode-dm {
    --hd-player-scroll-rail-width: 8px;
    --hd-player-scroll-rail-air: var(--hd-space-2, 8px);
    --hd-player-scroll-rail-gold: var(--hd-ka-scrollbar-gold, var(--hd-accent-primary));
    --hd-player-scroll-rail-leather: var(--hd-ka-scrollbar-leather, var(--hd-accent-danger));
    --hd-player-scroll-rail-gold-texture: var(--hd-texture-gold-seam);
    --hd-player-scroll-rail-leather-texture: var(--hd-texture-leather-red);
    --hd-player-scroll-rail-thumb-fade: 0.5s;
  }

  .hd-player-scroll-rail-owner {
    scrollbar-width: none;
  }

  .hd-player-scroll-rail-owner::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  @media (min-aspect-ratio: 1/1) {
    .hd-player-surface-scroll-rail-owner > .hd-player-surface-stack > .hd-player-surface-slot {
      padding-inline-end: calc(
        var(--hd-player-surface-pad-right, 0px)
        + var(--hd-player-scroll-rail-surface-overhang, 0px)
        + var(--hd-player-scroll-rail-air, var(--hd-space-2, 8px))
      );
    }
  }

  .hd-player-surface-scroll-rail-owner.hd-player-scroll-rail-owner--scrollable > .hd-player-surface-stack > .hd-player-surface-slot,
  .hd-player-surface-scroll-rail-owner.hd-player-scroll-rail-owner--track-visible > .hd-player-surface-stack > .hd-player-surface-slot {
    padding-inline-end: calc(
      var(--hd-player-surface-pad-right, 0px)
      + var(--hd-player-scroll-rail-surface-overhang, 0px)
      + var(--hd-player-scroll-rail-air, var(--hd-space-2, 8px))
      + var(--hd-player-scroll-rail-width, 8px)
    );
  }

  .hd-player-scroll-rail {
    position: fixed;
    z-index: calc(var(--hd-player-chrome-z, 12000) - 20);
    width: var(--hd-player-scroll-rail-width);
    min-height: 40px;
    border-radius: 0;
    background-color: var(--hd-player-scroll-rail-gold);
    background-image: var(--hd-player-scroll-rail-gold-texture);
    background-position: 0 0;
    background-repeat: repeat-y;
    background-size: var(--hd-player-scroll-rail-width) 60px;
    box-shadow: none;
    cursor: pointer;
    opacity: 1;
    pointer-events: auto;
    touch-action: none;
  }

  .hd-player-scroll-rail--from-mount-top {
    box-shadow: inset 0 14px 12px -14px rgba(0, 0, 0, 0.82);
  }

  .hd-player-scroll-rail--overflow-only:not(.is-track-visible) {
    display: none;
  }

  .hd-player-scroll-rail.is-owner-hidden {
    display: none;
  }

  .hd-player-scroll-rail.is-transition-track {
    pointer-events: none;
  }

  .hd-player-scroll-rail__thumb {
    position: absolute;
    inset-inline: 0;
    top: 0;
    min-height: 38px;
    border: 0;
    border-radius: 0;
    background-color: var(--hd-player-scroll-rail-leather);
    background-image: var(--hd-player-scroll-rail-leather-texture);
    background-position: 0 0;
    background-repeat: repeat;
    background-size: 48px 48px;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transition: opacity var(--hd-player-scroll-rail-thumb-fade) var(--hd-ease-in-out-cubic);
  }

  .hd-player-scroll-rail:not(.is-scrollable) .hd-player-scroll-rail__thumb {
    opacity: 0;
    pointer-events: none;
    transition: none;
    transform: translateY(0) !important;
  }

  /* PiP fullscreen covers the entire viewport content area; the fixed scroll
   * rails would otherwise paint on top of the maximized image because they live
   * at z-index calc(var(--hd-player-chrome-z) - 20) while the fullscreen PiP
   * frame is at z-index 1500. Hide the rails while fullscreen — the content
   * beneath is not interactable anyway. */
  body.hd-pip-state-fullscreen .hd-player-scroll-rail {
    display: none;
  }
}