@layer components {
  .scrolling-notes {
    position: relative;
    width: 100%;
    height: 400px;
    background: var(--color-surface-variant);
    border-radius: var(--radius-m);
    overflow: hidden;
    border: 2px solid color-mix(in oklab, var(--color-primary) 10%, transparent);
    box-shadow: inset 0 0 40px rgba(0,0,0,0.05);

    & .scrolling-notes__canvas {
      display: block;
      width: 100%;
      height: 100%;
    }

    & .scrolling-notes__ui {
        position: absolute;
        bottom: var(--space-s);
        right: var(--space-s);
    }

    & .scrolling-notes__display-toggle {
        padding: 0.4rem 0.8rem;
        font-size: var(--size-step-0);
    }
  }
}