@layer shwt-widgets {
  shwt-widget-scrolling-views[active] {
    --_direction: -1;
    --_design-height: calc(var(--canvas-base-height) * var(--shwt-dsm) * 1px);
    --_step: 100cqw;
    display: grid;
    grid-template-rows: auto calc(var(--scroll-steps) * var(--_step));
    width: 100%;

    &[direction="right"],
    &[direction="down"] {
      --_direction: 1;
    }

    & .shwt-canvas {
      position: sticky;
      top: 0;
    }

    & .shwt-canvas-view-collection {
      --scroll-progress: 0;
      column-gap: calc(-2 * var(--tr-viewport-offset));
      display: flex;
      transform: translateX(calc(var(--scroll-progress) * var(--scroll-steps) * var(--_direction) * 100cqw));
    }

    & .shwt-canvas-view {
      flex: 0 0 auto;
      position: relative;
    }

    &[direction="right"] {
      & .shwt-canvas-view-collection {
        flex-direction: row-reverse;
      }
    }

    &[direction="up"],
    &[direction="down"] {
      --_step: max(100vh, var(--_design-height));

      & .shwt-canvas {
        clip-path: inset(0 -100vw);
      }

      & .shwt-canvas-view-collection {
        flex-direction: column;
        transform: translateY(calc(var(--scroll-progress) * var(--scroll-steps) * var(--_direction) * 100%));
      }
    }

    &[direction="down"] {
      & .shwt-canvas-view-collection {
        flex-direction: column-reverse;
      }
    }

    &[spacing="condensed"]:not([direction="up"], [direction="down"]) {
      --_step: min(100cqw, calc(var(--view-base) * var(--shwt-dsm) * 1px));

      & .shwt-canvas-view-collection {
        column-gap: 0;
        transform: translateX(calc(var(--scroll-progress) * var(--scroll-steps) * var(--_direction) * 100%));

        & .shwt-bg {
          left: 0;
          width: calc(var(--shwt-dw) * var(--tr-ratio));
        }
      }
    }

    &[spacing="condensed"]:is([direction="up"], [direction="down"]) {
      --_step: var(--_design-height);

      & .shwt-canvas-view-collection {
        height: calc(var(--canvas-base-height) * var(--tr-ratio));
        position: relative;
        top: var(--window-height-offset);
      }
    }
  }
}