@layer components {
  .rs-scroll-area {
    position: relative;
    block-size: var(--rs-scroll-area-size, 180px);
    overflow: hidden;
    border-radius: var(--rs-radius-medium);
    background: var(--rs-color-background-page-faded);
  }

  .rs-scroll-area__viewport {
    --rs-scroll-fade-end: 1;
    --rs-scroll-mask-width: calc(100% - var(--rs-scrollbar-size));
    block-size: 100%;
    overflow: auto;
    padding: var(--rs-unit-x4);
    scrollbar-width: thin;
    scrollbar-color: color-mix(
        in oklch,
        var(--rs-color-foreground-neutral),
        transparent 68%
      )
      transparent;
    mask-image:
      linear-gradient(to bottom, white, white),
      linear-gradient(
        to bottom,
        white,
        transparent calc(var(--rs-scroll-fade-start, 0) * var(--rs-scroll-fade-size)),
        transparent calc(100% - var(--rs-scroll-fade-end, 0) * var(--rs-scroll-fade-size)),
        white
      );
    mask-composite: exclude;
    mask-position: center, left;
    mask-repeat: no-repeat;
    mask-size: 100% 100%, var(--rs-scroll-mask-width) 100%;
  }

  @supports (animation-timeline: scroll()) {
    .rs-scroll-area__viewport {
      animation-name: rs-scroll-fade-start, rs-scroll-fade-end;
      animation-timing-function: linear, linear;
      animation-timeline: scroll(self y);
      animation-range:
        0 var(--rs-scroll-fade-range),
        calc(100% - var(--rs-scroll-fade-range)) 100%;
      animation-fill-mode: both;
    }
  }

  .rs-scroll-area__viewport:focus-visible {
    outline: 0;
    box-shadow: var(--rs-shadow-focus-inset);
  }
}