/* scrollbar.css — arrows + scrollbar styling only */

/* arrows align to scrollbar edge (same inset as wrapper padding) */
.scroll_arrow {
  position: absolute;
  right: var(--scrollbar-inset);
  width: var(--sbw);
  height: var(--arrow-h);

  display: grid;
  place-items: center;

  background: transparent;
  border: 0px solid var(--c-accent);
  box-shadow: inset 0 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0);

  color: var(--c-accent);
  font: 700 40px/1 var(--font-mono);

  user-select: none;
  cursor: none;
  z-index: 10;
  padding: 0;
}

.scroll_arrow--up { top: 0; }
.scroll_arrow--down { bottom: 0; }

.scroll_arrow:hover {
  text-shadow: 0 0 5px var(--c-accent);
}

.scroll_arrow:disabled {
  opacity: 0.1;
  cursor: default;
}

/* JS toggles visibility only when scrolling is needed */
.scroll_arrow { visibility: hidden; }
.scroll_arrow.is-visible { visibility: visible; }

/* Firefox fallback */
@supports not selector(::-webkit-scrollbar) {
  #app {
    scrollbar-width: thin;
    scrollbar-color: var(--c-accent) var(--c-panel);
  }
}

/* Chrome/Edge/Safari */
@supports selector(::-webkit-scrollbar) {
  #app::-webkit-scrollbar {
    width: var(--sbw);
    height: 14px;
  }

  #app::-webkit-scrollbar-track {
    background: transparent;
    border: 0px solid var(--c-accent);
  }

  #app::-webkit-scrollbar-thumb {
    border-radius: 0;
    background: var(--c-accent);
    background-blend-mode: multiply;
  }

  #app::-webkit-scrollbar-thumb:hover {
    box-shadow: inset 0 0 2px 5px rgba(0, 0, 0, 0.35);
  }

  #app::-webkit-scrollbar-thumb:active {
    background: rgba(173, 255, 47, 0.8);
  }

  #app::-webkit-scrollbar-corner {
    background: var(--c-panel);
  }
}