@use "sass:map";
@use "sass:list";
@use "./functions.scss" as *;

$max-items: 20;

[data-div-type="element"] {
  &[data-element-type="scroll"] {
    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
    width: var(
      --_sf-el-wh-st-mx,
      calc(
        1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
      )
    );
    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
    aspect-ratio: 1 / var(--_sf-aspect-ratio);

    & > .wrapper {
      width: var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)));
      // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));

      overflow: hidden;
      white-space: nowrap;

      // The Scroll Container's shadow used to be painted here as well as on
      // `.scroll__container` below. This wrapper is a separate, square box that sits
      // outside the container, so the second copy was drawn around the wrapper with
      // square corners — the shadow appearing "outside the element" and ignoring the
      // corner radius. Only `.scroll__container` paints it now, and it carries the
      // matching border-radius.
      //
      // The wrapper clips (`overflow: hidden`), so it needs the same radius or its
      // square clip cuts the container's rounded corners back off — and the shadow
      // below, which is painted here, then follows the rounded shape too.
      border-radius: var(
        --_ctm-mob-dn-sl-cr-br-rs,
        var(--_ctm-tab-dn-sl-cr-br-rs, var(--_ctm-dn-sl-cr-br-rs))
      );

      &[data-widget-shadow="true"] {
        box-shadow: var(
            --_ctm-mob-dn-sl-cr-sw-ae,
            var(--_ctm-tab-dn-sl-cr-sw-ae, var(--_ctm-dn-sl-cr-sw-ae))
          )
          var(--_ctm-mob-dn-sl-cr-sw-br, var(--_ctm-tab-dn-sl-cr-sw-br, var(--_ctm-dn-sl-cr-sw-br)))
          var(--_ctm-mob-dn-sl-cr-sw-sd, var(--_ctm-tab-dn-sl-cr-sw-sd, var(--_ctm-dn-sl-cr-sw-sd)))
          var(--_ctm-mob-dn-sl-cr-sw-cr, var(--_ctm-tab-dn-sl-cr-sw-cr, var(--_ctm-dn-sl-cr-sw-cr)));
      }

      // .scroll__container {
      @for $i from 1 through $max-items {
        .scroll-item[data-index="i#{$i}"] {
          display: flex;
          padding: prepareMediaVariable(
            --_ctm-dn-i#{$i}-pg,
            #{prepareMediaVariable(--_ctm-dn-i1-pg)}
          );
          gap: prepareMediaVariable(
            --_ctm-dn-i#{$i}-im-gp,
            #{prepareMediaVariable(--_ctm-dn-i1-im-gp)}
          );
          background-color: prepareMediaVariable(
            --_ctm-dn-i#{$i}-bd-cr,
            #{prepareMediaVariable(--_ctm-dn-i1-bd-cr)}
          );
          border-color: prepareMediaVariable(
            --_ctm-dn-i#{$i}-br-cr,
            #{prepareMediaVariable(--_ctm-dn-i1-br-cr)}
          );
          border-style: prepareMediaVariable(
            --_ctm-dn-i#{$i}-br-se,
            #{prepareMediaVariable(--_ctm-dn-i1-br-se)}
          );
          border-width: prepareMediaVariable(
            --_ctm-dn-i#{$i}-br-wh,
            #{prepareMediaVariable(--_ctm-dn-i1-br-wh)}
          );
          border-radius: prepareMediaVariable(
            --_ctm-dn-i#{$i}-br-rs,
            #{prepareMediaVariable(--_ctm-dn-i1-br-rs)}
          );
          // Each item's schema has carried showShadow/shadowColor/angle/spread/blur all
          // along, but nothing ever read them — the only box-shadow declarations in this
          // file were the container's. `--_show-item-shadow` is set to `none` by the
          // item's own Show Shadow switch below.
          box-shadow: var(
            --_show-item-shadow,
            prepareMediaVariable(
                --_ctm-dn-i#{$i}-sw-ae,
                #{prepareMediaVariable(--_ctm-dn-i1-sw-ae)}
              )
              prepareMediaVariable(
                --_ctm-dn-i#{$i}-sw-br,
                #{prepareMediaVariable(--_ctm-dn-i1-sw-br)}
              )
              prepareMediaVariable(
                --_ctm-dn-i#{$i}-sw-sd,
                #{prepareMediaVariable(--_ctm-dn-i1-sw-sd)}
              )
              prepareMediaVariable(
                --_ctm-dn-i#{$i}-sw-cr,
                #{prepareMediaVariable(--_ctm-dn-i1-sw-cr)}
              )
          );
          &[data-item-shadow="false"] {
            --_show-item-shadow: none;
          }
          color: prepareMediaVariable(
            --_ctm-dn-i#{$i}-cr,
            #{prepareMediaVariable(--_ctm-dn-i1-cr)}
          );
          font-family: prepareMediaVariable(
            --_ctm-dn-i#{$i}-ft-fy,
            #{prepareMediaVariable(--_ctm-dn-i1-ft-fy)}
          );
          &.flex__overflow {
            white-space: normal;
            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
          }
          font-size: prepareMediaVariable(
            --_ctm-dn-i#{$i}-ft-se,
            #{prepareMediaVariable(--_ctm-dn-i1-ft-se)}
          );
          font-weight: prepareMediaVariable(
            --_ctm-dn-i#{$i}-ft-wt,
            #{prepareMediaVariable(--_ctm-dn-i1-ft-wt)}
          );
          font-style: prepareMediaVariable(
            --_ctm-dn-i#{$i}-ft-se-ic,
            #{prepareMediaVariable(--_ctm-dn-i1-ft-se-ic)}
          );
          text-align: prepareMediaVariable(
            --_ctm-dn-i#{$i}-tt-an,
            #{prepareMediaVariable(--_ctm-dn-i1-tt-an)}
          );
          letter-spacing: prepareMediaVariable(
            --_ctm-dn-i#{$i}-lr-sg,
            #{prepareMediaVariable(--_ctm-dn-i1-lr-sg)}
          );
          line-height: prepareMediaVariable(
            --_ctm-dn-i#{$i}-le-ht,
            #{prepareMediaVariable(--_ctm-dn-i1-le-ht)}
          );
          text-decoration: prepareMediaVariable(
            --_ctm-dn-i#{$i}-ue,
            #{prepareMediaVariable(--_ctm-dn-i1-ue)}
          );
          // All three inherit, so setting them on the item is enough for the text node
          // (and the `.scroll-item__text` span the clamp uses) to pick them up.
          text-transform: prepareMediaVariable(
            --_ctm-dn-i#{$i}-tt-tm,
            #{prepareMediaVariable(--_ctm-dn-i1-tt-tm)}
          );
          word-wrap: prepareMediaVariable(
            --_ctm-dn-i#{$i}-wd-wr,
            #{prepareMediaVariable(--_ctm-dn-i1-wd-wr)}
          );
          word-break: prepareMediaVariable(
            --_ctm-dn-i#{$i}-wd-bk,
            #{prepareMediaVariable(--_ctm-dn-i1-wd-bk)}
          );

          .icon {
            svg {
              width: prepareMediaVariable(
                --_ctm-dn-i#{$i}-in-se,
                #{prepareMediaVariable(--_ctm-dn-i1-in-se)}
              );
              height: prepareMediaVariable(
                --_ctm-dn-i#{$i}-in-se,
                #{prepareMediaVariable(--_ctm-dn-i1-in-se)}
              );
              path {
                stroke: prepareMediaVariable(
                  --_ctm-dn-i#{$i}-in-c1,
                  #{prepareMediaVariable(--_ctm-dn-i1-in-c1)}
                );
                // Overrides the stroke-width presentation attribute baked into the icon markup.
                stroke-width: prepareMediaVariable(
                  --_ctm-dn-i#{$i}-se-wh,
                  #{prepareMediaVariable(--_ctm-dn-i1-se-wh)}
                );
              }
            }
          }
        }
      }

      &[data-pause-on-hover="true"] .scrolling {
        &:hover {
          animation-play-state: paused;
        }
      }

      &[data-scroll-direction="leftToRight"] .scrolling {
        animation-direction: normal;
      }

      &[data-scroll-direction="rightToLeft"] .scrolling {
        animation-direction: reverse;
      }

      // Vertical scroll. The horizontal marquee translates on X and lays the items out
      // in a row; both have to flip for a vertical run, so the two vertical directions
      // share this block and only differ by `animation-direction` below.
      &[data-scroll-direction="topToBottom"],
      &[data-scroll-direction="bottomToTop"] {
        // `nowrap` is what keeps the horizontal run on one line; it fights a column stack.
        white-space: normal;

        .scrolling {
          flex-direction: column;
          // Full width so the items have room to sit left, centre or right inside the
          // container. Left to size itself, the track is only as wide as its widest
          // item and Horizontal Alignment would have no space to move anything in.
          width: 100%;
          animation-name: marquee-vertical;
          padding-right: 0;
          padding-bottom: 10px;
        }

        // Horizontal Alignment. The track is a column here, so its cross axis is the
        // horizontal one and `align-items` is what places the items across it.
        &[data-horizontal-alignment="left"] .scrolling {
          align-items: flex-start;
        }

        &[data-horizontal-alignment="center"] .scrolling {
          align-items: center;
        }

        &[data-horizontal-alignment="right"] .scrolling {
          align-items: flex-end;
        }

        // The container is sized with `min-height`, which is right for a row (content
        // never exceeds it) but wrong for a column: the stack would simply grow the box,
        // nothing would overflow, and the marquee would look frozen. Pin the height.
        .scroll__container {
          height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
          align-items: flex-start;
        }
      }

      // `marquee-vertical` translates upward, which reads as bottom-to-top on screen —
      // so that is the `normal` case and top-to-bottom is the reversed one. Same trick
      // as the horizontal pair above.
      &[data-scroll-direction="bottomToTop"] .scrolling {
        animation-direction: normal;
      }

      &[data-scroll-direction="topToBottom"] .scrolling {
        animation-direction: reverse;
      }

      &[data-scroll-speed="0.5x"] .scrolling {
        animation-duration: 40s;
      }
      &[data-scroll-speed="1x"] .scrolling {
        animation-duration: 20s;
      }
      &[data-scroll-speed="2x"] .scrolling {
        animation-duration: 10s;
      }
      &[data-scroll-speed="4x"] .scrolling {
        animation-duration: 5s;
      }

      &[data-repeat-elements="true"] .scrolling {
        animation-iteration-count: infinite;
      }
      &[data-repeat-elements="false"] .scrolling {
        animation-iteration-count: 1;
      }
    }

    // The Scroll Container's shadow is painted on `.wrapper` rather than on
    // `.scroll__container`: the container fills the wrapper, and the wrapper clips
    // (`overflow: hidden`), so a shadow on the container would be clipped away. An
    // element's own box-shadow is never clipped by its own overflow, so the wrapper is
    // the right box for it — and it carries the matching border-radius (see above) so
    // the shadow follows the rounded shape instead of drawing a square glow.
    //
    // These were previously written as `&[data-widget-shadow=...]`, which targets the
    // element root, but the attribute is emitted on `.wrapper` (unlike
    // `data-widget-border`, which is on the root) — so neither rule ever matched.
    & > .wrapper[data-widget-shadow="false"] {
      box-shadow: none;
    }

    &[data-widget-border="true"] {
      .scroll__container {
        border-color: var(
          --_ctm-mob-dn-sl-cr-br-cr,
          var(--_ctm-tab-dn-sl-cr-br-cr, var(--_ctm-dn-sl-cr-br-cr))
        );
        border-style: var(
          --_ctm-mob-dn-sl-cr-br-se,
          var(--_ctm-tab-dn-sl-cr-br-se, var(--_ctm-dn-sl-cr-br-se))
        );
        border-width: var(
          --_ctm-mob-dn-sl-cr-br-wh,
          var(--_ctm-tab-dn-sl-cr-br-wh, var(--_ctm-dn-sl-cr-br-wh))
        );
      }
    }

    .scroll__container {
      width: 100%;
      // height: 100%;
      min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
      overflow: hidden;
      white-space: nowrap;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      background-color: var(
        --_ctm-mob-dn-sl-cr-bd-cr,
        var(--_ctm-tab-dn-sl-cr-bd-cr, var(--_ctm-dn-sl-cr-bd-cr))
      );
      border-radius: var(
        --_ctm-mob-dn-sl-cr-br-rs,
        var(--_ctm-tab-dn-sl-cr-br-rs, var(--_ctm-dn-sl-cr-br-rs))
      );

      .scrolling {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        flex-shrink: 0;
        gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
        padding-right: 10px;
        animation-name: marquee;
        animation-timing-function: linear;
      }

      // Text Overflow. The item's text sits in its own span so the clamp gets a block
      // box of its own — clamping `.scroll-item` itself would swap its `display: flex`
      // for `-webkit-box` and break the icon/text row. `white-space` has to be reset
      // because `.wrapper` sets `nowrap`, and a clamp on a non-wrapping node can only
      // ever show one line.
      .scroll-item__text.flex__overflow {
        @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
        white-space: normal;
      }

      .divider {
        background-color: var(
          --_ctm-mob-dn-dr-se-bd-cr,
          var(--_ctm-tab-dn-dr-se-bd-cr, var(--_ctm-dn-dr-se-bd-cr))
        );
        padding: 3px;
        font-size: var(
          --_ctm-mob-dn-dr-se-se,
          var(--_ctm-tab-dn-dr-se-se, var(--_ctm-dn-dr-se-se))
        );
        color: var(
          --_ctm-mob-dn-dr-se-dr-cr,
          var(--_ctm-tab-dn-dr-se-dr-cr, var(--_ctm-dn-dr-se-dr-cr))
        );
      }

      .icon {
        background-color: var(
          --_ctm-mob-dn-dr-se-bd-cr,
          var(--_ctm-tab-dn-dr-se-bd-cr, var(--_ctm-dn-dr-se-bd-cr))
        );
        padding: 3px;

        svg {
          width: var(--_ctm-mob-dn-dr-se-se, var(--_ctm-tab-dn-dr-se-se, var(--_ctm-dn-dr-se-se)));
          height: var(--_ctm-mob-dn-dr-se-se, var(--_ctm-tab-dn-dr-se-se, var(--_ctm-dn-dr-se-se)));

          path {
            stroke: var(
              --_ctm-mob-dn-dr-se-dr-cr,
              var(--_ctm-tab-dn-dr-se-dr-cr, var(--_ctm-dn-dr-se-dr-cr))
            );
          }
        }
      }

      // Divider Style > Stroke Width. Scoped to the dividers, which sit as direct
      // children of the track — the items' own icons carry the same `.icon` class, so
      // declaring this in the block above would let the divider's setting retune every
      // item icon too. The value overrides the stroke-width baked into the icon markup;
      // 1.25 matches the schema default.
      > .scrolling > .icon svg path {
        stroke-width: prepareMediaVariable(--_ctm-dn-dr-se-se-wh, 1.25);
      }

      @keyframes marquee {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(var(--_marquee-tx, -50%));
        }
      }

      @keyframes marquee-vertical {
        0% {
          transform: translateY(0);
        }
        100% {
          transform: translateY(var(--_marquee-ty, -50%));
        }
      }
    }
  }
}