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);
    }
  }
}