/* Shared Phenix scrollbar theme. Native scrolling and keyboard controls stay intact. */
:root {
  --phx-scroll-track: #090b0e;
  --phx-scroll-thumb: #ad332e;
}

* {
  scrollbar-color: var(--phx-scroll-thumb) var(--phx-scroll-track);
  scrollbar-width: thin;
}

/* Chromium and Safari: a rounded ember handle inside a dark, recessed track. */
@supports selector(::-webkit-scrollbar) {
  * {
    scrollbar-color: auto;
    scrollbar-width: auto;
  }

  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }

  ::-webkit-scrollbar-track {
    background: var(--phx-scroll-track);
    box-shadow: inset 1px 0 0 rgb(255 255 255 / 4%);
  }

  ::-webkit-scrollbar-thumb {
    min-height: 48px;
    min-width: 48px;
    border: 3px solid var(--phx-scroll-track);
    border-radius: 999px;
    background: linear-gradient(180deg, #c34538, #9b2429);
    background-clip: padding-box;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #d65343;
    background-clip: padding-box;
  }

  ::-webkit-scrollbar-thumb:active {
    background: #ed7861;
    background-clip: padding-box;
  }

  ::-webkit-scrollbar-corner {
    background: var(--phx-scroll-track);
  }
}

@media (forced-colors: active) {
  * {
    scrollbar-color: auto;
    scrollbar-width: auto;
  }

  ::-webkit-scrollbar-track,
  ::-webkit-scrollbar-corner {
    background: Canvas;
    box-shadow: none;
  }

  ::-webkit-scrollbar-thumb,
  ::-webkit-scrollbar-thumb:hover,
  ::-webkit-scrollbar-thumb:active {
    background: ButtonText;
    border-color: Canvas;
  }
}