@use "sass:map";
@use "sass:list";
@use "./repeater-embla-controls.scss" as *;
@use "./repeater-grid-toggle.scss" as *;
@use "./functions.scss" as *;
$childItemSelector: '[data-element-type="repeater-item"]';
$adSlotElementSelector: ".repeater-ad-slot";
$adSlotSliderSelector: ".repeater-ad-slot__inner";
$sliderControlDragging: "[flex-slider-control-moving='true']";
$rai: "repeater-advertise-item";
$listViewSlector: '.lst_vw[data-element-type="repeater"]';

[data-div-type="element"] {
  &[data-element-type="repeater"] {
    // width: var(--_sf-con-nw-wh);
    // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
    width: calc(
      1% *
        var(
          --_ctm-mob-rep-ele-nw-wh-vl,
          var(--_ctm-tab-rep-ele-nw-wh-vl, var(--_ctm-rep-ele-nw-wh-vl, auto))
        )
    );

    // width: 100%;
    &:not([data-view-state="full"]) {
      min-height: var(
        --_ctm-mob-rep-lt-ht,
        var(--_ctm-tab-rep-lt-ht, var(--_ctm-rep-lt-ht, var(--_ctm-lt-ht, var(--_tst-lt-ht))))
      );
    }

    min-height: var();
    margin: var(
      --_ctm-mob-rep-lt-mn,
      var(--_ctm-tab-rep-lt-mn, var(--_ctm-rep-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))))
    );

    &[data-background-type="color"] {
      background-color: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-cr);
    }

    &[data-background-type="gradient"] {
      --_sf-rep-gradient-angle: calc(#{prepareMediaVariable(--_ctm-rep-dn-rr-wt-gt-ae, 90)} * 1deg);
      --_sf-rep-gradient-start-color: #{prepareMediaVariable(
          --_ctm-rep-dn-rr-wt-gt-st-cr,
          transparent
        )};
      --_sf-rep-gradient-start-position: calc(
        #{prepareMediaVariable(--_ctm-rep-dn-rr-wt-gt-st-pn, 0)} * 1%
      );
      --_sf-rep-gradient-end-color: #{prepareMediaVariable(
          --_ctm-rep-dn-rr-wt-gt-ed-cr,
          transparent
        )};
      --_sf-rep-gradient-end-position: calc(
        #{prepareMediaVariable(--_ctm-rep-dn-rr-wt-gt-ed-pn, 100)} * 1%
      );
      --_sf-rep-gradient-position: #{prepareMediaVariable(--_ctm-rep-dn-rr-wt-gt-pn, center)};

      &[data-gradient-type="Linear Gradient"] {
        background-image: linear-gradient(
          var(--_sf-rep-gradient-angle),
          var(--_sf-rep-gradient-start-color) var(--_sf-rep-gradient-start-position),
          var(--_sf-rep-gradient-end-color) var(--_sf-rep-gradient-end-position)
        );
      }

      &[data-gradient-type="Radial Gradient"] {
        background-image: radial-gradient(
          circle at var(--_sf-rep-gradient-position),
          var(--_sf-rep-gradient-start-color) var(--_sf-rep-gradient-start-position),
          var(--_sf-rep-gradient-end-color) var(--_sf-rep-gradient-end-position)
        );
      }
    }

    &[data-background-type="image"] {
      background-image: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-ie);
      background-attachment: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-at);
      background-position: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-pn);
      background-position-y: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-pn-y);
      background-repeat: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-rt);
      background-size: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-se);
    }

    // background-color: var(
    //   --_ctm-mob-rep-dn-rr-wt-bd-cr,
    //   var(--_ctm-tab-rep-dn-rr-wt-bd-cr, var(--_ctm-rep-dn-rr-wt-bd-cr))
    // );
    // background-image: var(
    //   --_ctm-mob-rep-dn-rr-wt-bd-ie,
    //   var(--_ctm-tab-rep-dn-rr-wt-bd-ie, var(--_ctm-rep-dn-rr-wt-bd-ie))
    // );
    // background-attachment: var(
    //   --_ctm-mob-rep-dn-rr-wt-bd-at,
    //   var(--_ctm-tab-rep-dn-rr-wt-bd-at, var(--_ctm-rep-dn-rr-wt-bd-at))
    // );
    // background-position: var(
    //   --_ctm-mob-rep-dn-rr-wt-bd-pn,
    //   var(--_ctm-tab-rep-dn-rr-wt-bd-pn, var(--_ctm-rep-dn-rr-wt-bd-pn))
    // );
    // background-repeat: var(
    //   --_ctm-mob-rep-dn-rr-wt-bd-rt,
    //   var(--_ctm-tab-rep-dn-rr-wt-bd-rt, var(--_ctm-rep-dn-rr-wt-bd-rt))
    // );
    // background-size: var(
    //   --_ctm-mob-rep-dn-rr-wt-bd-se,
    //   var(--_ctm-tab-rep-dn-rr-wt-bd-se, var(--_ctm-rep-dn-rr-wt-bd-se))
    // );
    &[data-show-border="true"] {
      border-color: var(
        --_ctm-mob-rep-dn-rr-wt-br-cr,
        var(--_ctm-tab-rep-dn-rr-wt-br-cr, var(--_ctm-rep-dn-rr-wt-br-cr))
      );
      border-style: var(
        --_ctm-mob-rep-dn-rr-wt-br-se,
        var(--_ctm-tab-rep-dn-rr-wt-br-se, var(--_ctm-rep-dn-rr-wt-br-se))
      );
      border-width: var(
        --_ctm-mob-rep-dn-rr-wt-br-wh,
        var(--_ctm-tab-rep-dn-rr-wt-br-wh, var(--_ctm-rep-dn-rr-wt-br-wh))
      );
    }

    border-radius: var(
      --_ctm-mob-rep-dn-rr-wt-br-rs,
      var(--_ctm-tab-rep-dn-rr-wt-br-rs, var(--_ctm-rep-dn-rr-wt-br-rs))
    );

    // The shadow is configured under the Repeater Widget accordion, so its variables
    // carry that accordion's `rr-wt` segment — without it nothing the builder writes
    // was ever read back. The Show Shadow switch arrives as `data-show-shadow`.
    &[data-show-shadow="false"] {
      --_show-shadow: none;
    }

    box-shadow: var(
      --_show-shadow,
      var(
          --_ctm-mob-rep-dn-rr-wt-sw-ae,
          var(--_ctm-tab-rep-dn-rr-wt-sw-ae, var(--_ctm-rep-dn-rr-wt-sw-ae, 0))
        )
        var(
          --_ctm-mob-rep-dn-rr-wt-sw-br,
          var(--_ctm-tab-rep-dn-rr-wt-sw-br, var(--_ctm-rep-dn-rr-wt-sw-br, 0))
        )
        var(
          --_ctm-mob-rep-dn-rr-wt-sw-sd,
          var(--_ctm-tab-rep-dn-rr-wt-sw-sd, var(--_ctm-rep-dn-rr-wt-sw-sd, 0))
        )
        var(
          --_ctm-mob-rep-dn-rr-wt-sw-cr,
          var(--_ctm-tab-rep-dn-rr-wt-sw-cr, var(--_ctm-rep-dn-rr-wt-sw-cr, transparent))
        )
    );
    padding: var(--_ctm-mob-rep-lt-pg, var(--_ctm-tab-rep-lt-pg, var(--_ctm-rep-lt-pg)));

    --_sf-ic-sz-nn: var(
      --_ctm-mob-rep-lt-aw-in-se,
      var(--_ctm-tab-rep-lt-aw-in-se, var(--_ctm-rep-lt-aw-in-se, 40px))
    );

    --_sf-ed-vl-sz: var(
      --_ctm-mob-rep-lt-dt-se,
      var(--_ctm-tab-rep-lt-dt-se, var(--_ctm-rep-lt-dt-se, 10px))
    );

    &[data-grid-toggle="enable"] {
      position: var(--_p-relative);
      @include FlexRepeaterGridToggleCSS();
    }

    &.lst_vw {
      & > div {
        &.wrapper {
          display: var(--_d-grid);
          row-gap: prepareMediaVariable(--_ctm-rep-lt-im-gp-lt, 0px);
          grid-template-columns: 100%;
          // grid-template-rows: repeat(
          //   auto-fit,
          //   minmax(#{prepareMediaVariable(--_ctm-rep-lt-rw-mn-ht-lt)}, 1fr)
          // );
          // grid-template-rows: repeat(
          //   1,
          //   minmax(#{prepareMediaVariable(--_ctm-rep-lt-rw-mn-ht-lt)}, 1fr)
          // );
          grid-auto-rows: minmax(#{prepareMediaVariable(--_ctm-rep-lt-rw-mn-ht-lt)}, auto);
          width: 100%;

          & > div {
            &#{$childItemSelector},
            &#{$adSlotElementSelector} {
              width: 100%;
            }
          }
        }
      }
    }

    &:not(.lst_vw) {
      &.grd {
        & > div {
          &.wrapper {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(
              auto-fit,
              minmax(
                var(
                  --_ctm-mob-rep-lt-mn-cn-wh,
                  var(--_ctm-tab-rep-lt-mn-cn-wh, var(--_ctm-rep-lt-mn-cn-wh))
                ),
                1fr
              )
            );
            grid-template-rows: repeat(
              auto-fit,
              minmax(
                var(
                  --_ctm-mob-rep-lt-mn-rw-ht,
                  var(--_ctm-tab-rep-lt-mn-rw-ht, var(--_ctm-rep-lt-mn-rw-ht))
                ),
                1fr
              )
            );

            div {
              &#{$childItemSelector},
              &#{$adSlotElementSelector},
              &.#{$rai} {
                width: 100%;
              }
            }
          }
        }
      }

      &.crds {
        & > div {
          &.wrapper {
            display: flex !important;
            flex-wrap: wrap;
            width: 100%;
            height: auto !important;
            // min-height: 100px !important;
          }
        }

        &:not(.stimsfrRws) {
          // we are not using
          & > div {
            &.wrapper {
              justify-content: center;

              & > div {
                &#{$childItemSelector},
                &#{$adSlotElementSelector},
                &.#{$rai} {
                  // width: var(--_ctm-rep-lt-wh);
                  --_col-count: var(--_sf-gd-ct, 3);
                  --_col-gap: 0px;
                  width: 163px;
                  height: 100px;
                  // grid-template-rows: minmax(
                  //   max(
                  //     0.5px,
                  //     0.0896337 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
                  //   ),
                  //   auto
                  // );
                  // grid-template-rows: ;
                }
              }
            }
          }
        }

        &.stimsfrRws {
          & > div {
            &.wrapper {
              align-self: prepareMediaVariable(--_ctm-rep-lt-an-is) !important;

              & > div {
                &#{$childItemSelector},
                &#{$adSlotElementSelector},
                &.#{$rai} {
                  // --_col-count: var(--_sf-gd-ct, 3);
                  --_col-count: var(
                    --_ctm-mob-rep-lt-st-is-pr-rw,
                    var(--_ctm-tab-rep-lt-st-is-pr-rw, var(--_ctm-rep-lt-st-is-pr-rw, 3))
                  );
                  // --_col-gap: var(
                  //   --_ctm-mob-rep-lt-im-gp,
                  //   var(--_ctm-tab-rep-lt-im-gp, var(--_ctm-rep-lt-im-gp, 0px))
                  // );
                  --_col-gap: #{prepareMediaVariable(--_ctm-rep-lt-cn-gp, 0px)};
                  width: calc(
                    (100% / var(--_col-count)) -
                      (((var(--_col-count) - 1) * var(--_col-gap)) / (var(--_col-count)))
                  );
                  flex: 0 0
                    calc(
                      (100% / var(--_col-count)) -
                        (((var(--_col-count) - 1) * var(--_col-gap)) / (var(--_col-count)))
                    );
                  // align-self: stretch;
                  // height: 100px;
                  grid-template-rows: minmax(
                    max(
                      0.5px,
                      0.09375 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
                    ),
                    auto
                  );
                  grid-template-columns: minmax(0px, 1fr);
                  // min-height: 50px !important;
                  grid-template-rows:
                    minmax(
                      max(0.5px, 0.09375 * (var(--scaling-factor) - var(--scrollbar-width))),
                      auto
                    )
                    minmax(
                      max(0.5px, 0.09375 * (var(--scaling-factor) - var(--scrollbar-width))),
                      auto
                    );
                }
              }
            }
          }
        }
      }

      &.sld {
        &:is(:not(#{$sliderControlDragging} *)) {
          overflow: clip;
        }

        height: auto;
        --_sf-sl-ct-ic-dt-at-cl: var(
          --_ctm-mob-rep-lt-cl-ae-cr,
          var(--_ctm-tab-rep-lt-cl-ae-cr, var(--_ctm-rep-lt-cl-ae-cr))
        );

        // Design > Pagination Arrows.
        //
        // Arrow Size and the layout tab's Arrow Icon Size drive the same button box, so the
        // design value wins and the layout value is the fallback — a repeater saved before
        // this section existed has no `dn-pn-as-aw-se` var and keeps its `lt-aw-in-se`
        // size. Both schema defaults are 40px.
        --_sf-ic-sz-nn: #{prepareMediaVariable(
            --_ctm-rep-dn-pn-as-aw-se,
            var(
              --_ctm-mob-rep-lt-aw-in-se,
              var(--_ctm-tab-rep-lt-aw-in-se, var(--_ctm-rep-lt-aw-in-se, 40px))
            )
          )};
        // Resting arrow colour. Design > Pagination Arrows > Arrow Color replaces the
        // layout tab's Arrow Icon Color, which stays as the fallback; the last fallback is
        // the colour baked into the chevron icons. Hover still switches to Control Active
        // Color.
        --_sf-sl-ct-aw-in-cl: #{prepareMediaVariable(
            --_ctm-rep-dn-pn-as-aw-cr,
            var(
              --_ctm-mob-rep-lt-aw-in-cr,
              var(--_ctm-tab-rep-lt-aw-in-cr, var(--_ctm-rep-lt-aw-in-cr, #667085))
            )
          )};
        // Background Color, as the gallery slider and the layouter use it: the button is a
        // 10% tint of the chosen colour and 20% on hover (see the hover rule further down),
        // not the flat colour. Kept in its own variable so both tints read the same source.
        --_sf-rep-as-bg-cr: #{prepareMediaVariable(--_ctm-rep-dn-pn-as-bd-cr, #fff)};
        --_sf-nv-ic-bg: color-mix(in srgb, var(--_sf-rep-as-bg-cr) 10%, transparent);

        // Design > Pagination Dots (control templates 1 and 2). Dot Size replaces the
        // layout tab's Dot Size the same way Arrow Size replaces Arrow Icon Size, with the
        // old var as fallback for repeaters saved before the section existed. The two
        // colours had no layout equivalent: the selected dot used to follow Control Active
        // Color, which still colours the arrow hover and the unselected dot border.
        --_sf-ed-vl-sz: #{prepareMediaVariable(
            --_ctm-rep-dn-pn-ds-dt-se,
            var(
              --_ctm-mob-rep-lt-dt-se,
              var(--_ctm-tab-rep-lt-dt-se, var(--_ctm-rep-lt-dt-se, 10px))
            )
          )};
        --_sf-dt-ae-bg: #{prepareMediaVariable(--_ctm-rep-dn-pn-ds-ct-dt-cr, #162578)};
        --_sf-dt-ie-bg: #{prepareMediaVariable(--_ctm-rep-dn-pn-ds-or-dt-cr, #fff)};

        // Background Shape of the arrow buttons, matching the gallery slider's mapping:
        // Round is the mixin's own 50% default, None squares the button off and Square
        // rounds the corners slightly. Repeaters without this section have no attribute at
        // all and stay round.
        button.embla__btn {
          &[data-background-shape="None"] {
            --_sf-nv-ic-br: 0px;
          }

          &[data-background-shape="Square"] {
            --_sf-nv-ic-br: 4px;
          }
        }

        // &:is([data-control-type="1"]) {
        //   @include CMSRepeaterEmblaControlStyles(1);
        // }
        @for $i from 1 through 3 {
          &:is([data-control-type="#{$i}"]) {
            @if ($i ==3) {
              overflow-y: visible;
            }

            @include CMSRepeaterEmblaControlStyles($i);
          }
        }

        // Overrides of the shared control mixin. `:is([data-control-type])` matches the
        // specificity of the rules being replaced, and this block comes after the @include,
        // so on the tie these win.
        &:is([data-control-type]) {
          // Hover of the arrow buttons. The mixin tints them with Control Active Color,
          // which ignores the Background Color the Pagination Arrows section sets; the
          // gallery slider instead deepens that same colour from 10% to 20%. The icon
          // stroke still switches to Control Active Color — the mixin's own rule.
          button.embla__btn:hover:not(:disabled) {
            @include BgColorLighter(var(--_sf-rep-as-bg-cr), 20%);
          }

          // Design > Pagination Dots > Border and Shadow.
          //
          // Both are gated on the container attributes the control components publish from
          // the Show Border / Show Shadow toggles: with the border off the dots keep the
          // hairline the mixin derives from Control Active Color, and with it on these
          // longhands take over.
          .pagination__v1[data-show-border="true"] > button.embla__dot {
            border-width: #{prepareMediaVariable(--_ctm-rep-dn-pn-ds-br-wh, 0px)};
            border-style: #{prepareMediaVariable(--_ctm-rep-dn-pn-ds-br-se, solid)};
            border-color: #{prepareMediaVariable(--_ctm-rep-dn-pn-ds-br-cr, transparent)};
          }

          .pagination__v1[data-show-shadow="true"] > button.embla__dot {
            box-shadow: #{prepareMediaVariable(--_ctm-rep-dn-pn-ds-sw-ae, 0px 0px)}
              #{prepareMediaVariable(--_ctm-rep-dn-pn-ds-sw-br, 0px)}
              #{prepareMediaVariable(--_ctm-rep-dn-pn-ds-sw-sd, 0px)}
              #{prepareMediaVariable(--_ctm-rep-dn-pn-ds-sw-cr, transparent)};
          }
        }

        // Design > Pagination Line — template 3 only, which draws the same pagination
        // buttons as bars and so reads its own section instead of Pagination Dots.
        &:is([data-control-type="3"]) {
          // The type-3 sizes and the inactive grey are set on `.pagination__v1` by the
          // shared control mixin, so they have to be overridden at that level rather than
          // on the container. Same specificity, later in the file, so these win. Defaults
          // are exactly what the mixin hardcodes.
          .pagination__v1 {
            --_sf-dt-wh-t3: #{prepareMediaVariable(--_ctm-rep-dn-pn-le-le-wh, 16px)};
            --_sf-dt-ht-t3: #{prepareMediaVariable(--_ctm-rep-dn-pn-le-le-ht, 2px)};
            // Also overrides the dots section's Other Dot Color, which the container sets
            // on `--_sf-dt-ie-bg` and would otherwise take precedence over the grey.
            --_sf-dt-ie-bg: #{prepareMediaVariable(--_ctm-rep-dn-pn-le-or-le-cr, #d6d6d6)};
            --_sf-dt-ae-bg: #{prepareMediaVariable(--_ctm-rep-dn-pn-le-ct-le-cr, #162578)};

            // The mixin pins the active bar to 6px regardless of the others' height. Kept
            // as a floor rather than a fixed value so Line Height above 6px applies to the
            // active bar too, while the default (2px) leaves it at 6px as before.
            > button.embla__dot.embla__dot--selected {
              --_sf-dt-at-ht-t3: max(6px, var(--_sf-dt-ht-t3));
            }
          }

          .pagination__v1[data-show-border="true"] > button.embla__dot {
            border-width: #{prepareMediaVariable(--_ctm-rep-dn-pn-le-br-wh, 0px)};
            border-style: #{prepareMediaVariable(--_ctm-rep-dn-pn-le-br-se, solid)};
            border-color: #{prepareMediaVariable(--_ctm-rep-dn-pn-le-br-cr, transparent)};
          }

          .pagination__v1[data-show-shadow="true"] > button.embla__dot {
            box-shadow: #{prepareMediaVariable(--_ctm-rep-dn-pn-le-sw-ae, 0px 0px)}
              #{prepareMediaVariable(--_ctm-rep-dn-pn-le-sw-br, 0px)}
              #{prepareMediaVariable(--_ctm-rep-dn-pn-le-sw-sd, 0px)}
              #{prepareMediaVariable(--_ctm-rep-dn-pn-le-sw-cr, transparent)};
          }
        }

        & > div {
          &.wrapper {
            &.embla__container {
              display: flex !important;
              --_embla-slide-space: var(
                --_ctm-mob-rep-lt-im-gp,
                var(--_ctm-tab-rep-lt-im-gp, var(--_ctm-rep-lt-im-gp, 0px))
              );
              min-height: 100px !important;
              --_embla-col-count: var(
                --_ctm-mob-rep-lt-st-is-pr-se,
                var(--_ctm-tab-rep-lt-st-is-pr-se, var(--_ctm-rep-lt-st-is-pr-se, 3))
              );
              // gap: 0px !important;
              // margin-left: calc(var(--_embla-slide-space, 10px) * -1);
              width: 100%;
              height: 100%;

              & > .embla__slide {
                --_sf-cl-vl: calc(
                  (100% / var(--_embla-col-count, 3)) -
                    (
                      ((var(--_embla-col-count, 3) - 1) * (var(--_embla-slide-space, 10px))) /
                        (var(--_embla-col-count, 3))
                    )
                );
                // flex: 0 0 calc(var(--_embla-slide-width, 100%) / var(--_embla-col-count, 3));
                // width: calc(var(--_embla-slide-width, 100%) / var(--_embla-col-count, 3));
                flex: 0 0 var(--_sf-cl-vl);
                width: var(--_sf-cl-vl);
                // grid-template-rows: minmax(
                //   max(0.5px, 0.09375 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))),
                //   auto
                // );
                grid-template-rows: minmax(50px, auto);
                grid-template-columns: minmax(0px, 1fr);
                // padding-left: calc(var(--_embla-slide-space, 10px) * 1);
                // padding-left: 0px !important;

                img {
                  width: 100%;
                }
              }
            }
          }
        }
      }

      & > div {
        &.wrapper {
          &:is(.sld > *) {
            gap: #{prepareMediaVariable(--_ctm-rep-lt-im-gp, 0px)};
          }

          &:is(:not(.sld > *)) {
            column-gap: #{prepareMediaVariable(--_ctm-rep-lt-cn-gp, 0px)};
            row-gap: #{prepareMediaVariable(--_ctm-rep-lt-rw-gp, 0px)};
          }

          justify-content: prepareMediaVariable(--_ctm-rep-lt-jy-ct);
          align-items: prepareMediaVariable(--_ctm-rep-lt-an-is);
          // width: 100%;
          // grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
          // grid-auto-rows: minmax(100px, 1fr);
        }
      }
    }

    .repeater-advertise-item {
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        // width: 100%;
        // height: 100%;
        object-fit: cover;
        object-position: center center;
        max-width: 100%;
        max-height: 100%;
      }
    }

    #{$adSlotElementSelector} {
      // The Ad Style > Image Controls schema was dropped, so these are plain values
      // rather than custom properties — they reproduce what that schema defaulted to
      // (full-bleed, centred, no border or shadow).
      a {
        width: 100%;
        display: var(--_d-flex);
        height: 100%;
        justify-content: center;
        align-items: center;
      }

      img {
        max-width: 100%;
        max-height: 100%;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
      }

      #{$adSlotSliderSelector} {
        position: relative;
        width: 100%;
        height: 100%;

        & > button {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          border-radius: 50%;
          border: none;
          cursor: var(--_sf-cursor-vl-v2, pointer);
          opacity: var(--_sf-opacity-vl-v2, 1);
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0;
          z-index: 2;
          // The Ad Style > Slider Controls schema was dropped, so the custom properties
          // only resolve on pages saved before that. The fallbacks reproduce what that
          // schema defaulted to (32px arrows, black).
          --_sf-wdt-vl-v2: #{prepareMediaVariable(--_ctm-rep-dn-ad-se-sr-cs-aw-in-se, 32px)};
          --_sf-bgr-clr-vl-v2: #{prepareMediaVariable(--_ctm-rep-dn-ad-se-sr-cs-cl-ae-cr, #000)};
          width: var(--_sf-wdt-vl-v2, 32px);
          height: var(--_sf-wdt-vl-v2, 32px);
          background: color-mix(in srgb, var(--_sf-bgr-clr-vl-v2) 10%, transparent);

          svg {
            --_perc: 0.5;
            width: calc(var(--_sf-wdt-vl-v2, 32px) * var(--_perc));
            height: calc(var(--_sf-wdt-vl-v2, 32px) * var(--_perc));

            path {
              stroke: var(--_sf-bgr-clr-vl-v2);
            }
          }

          &.repeater-ad-slot__nav-btn--next {
            right: 8px;
          }

          &.repeater-ad-slot__nav-btn--prev {
            left: 8px;
          }

          &:disabled {
            --_sf-cursor-vl-v2: not-allowed;
            --_sf-opacity-vl-v2: 0.4;
          }
        }
      }
    }

    .repeater__button__container {
      display: flex;

      &[data-button-alignment-default-state="flex-start"] {
        justify-content: flex-start;
      }

      &[data-button-alignment-default-state="center"] {
        justify-content: center;
      }

      &[data-button-alignment-default-state="flex-end"] {
        justify-content: flex-end;
      }

      &[data-button-alignment-hover-state="flex-start"]:hover {
        justify-content: flex-start;
      }

      &[data-button-alignment-hover-state="center"]:hover {
        justify-content: center;
      }

      &[data-button-alignment-hover-state="flex-end"]:hover {
        justify-content: flex-end;
      }
    }

    .btn__with__text[data-btn-name="loadmoreButton"] {
      justify-content: center;

      &[data-show-shadow="false"] {
        --_show-shadow: none;
      }

      &[data-icon-position="left"] {
        --_sf-fd-bn: row;
      }

      &[data-icon-position="right"] {
        --_sf-fd-bn: row-reverse;
      }

      &[data-icon-position="center"] {
        --_sf-fd-bn: row;
      }

      // &:has(p) {
      //   width: auto;
      // }

      &:hover {
        --_sf-hr-bd-cr: var(
          --_ctm-rep-mob-dn-bn-se-hr-se-bd-cr,
          var(--_ctm-rep-tab-dn-bn-se-hr-se-bd-cr, var(--_ctm-rep-dn-bn-se-hr-se-bd-cr))
        );
        --_sf-hr-br-cr: var(
          --_ctm-rep-mob-dn-bn-se-hr-se-br-cr,
          var(--_ctm-rep-tab-dn-bn-se-hr-se-br-cr, var(--_ctm-rep-dn-bn-se-hr-se-br-cr))
        );
        --_sf-hr-br-se: var(
          --_ctm-rep-mob-dn-bn-se-hr-se-br-se,
          var(--_ctm-rep-tab-dn-bn-se-hr-se-br-se, var(--_ctm-rep-dn-bn-se-hr-se-br-se))
        );
        --_sf-hr-br-wh: var(
          --_ctm-rep-mob-dn-bn-se-hr-se-br-wh,
          var(--_ctm-rep-tab-dn-bn-se-hr-se-br-wh, var(--_ctm-rep-dn-bn-se-hr-se-br-wh))
        );
        --_sf-hr-br-rs: var(
          --_ctm-rep-mob-dn-bn-se-hr-se-br-rs,
          var(--_ctm-rep-tab-dn-bn-se-hr-se-br-rs, var(--_ctm-rep-dn-bn-se-hr-se-br-rs))
        );
        --_sf-hr-at: var(
          --_ctm-rep-mob-dn-bn-se-hr-se-at,
          var(--_ctm-rep-tab-dn-bn-se-hr-se-at, var(--_ctm-rep-dn-bn-se-hr-se-at))
        );
        --_sf-hr-gp: var(
          --_ctm-rep-mob-dn-bn-se-hr-se-gp,
          var(--_ctm-rep-tab-dn-bn-se-hr-se-gp, var(--_ctm-rep-dn-bn-se-hr-se-gp))
        );

        // for shadow
        --_sf-hr-sw-ae: var(
          --_ctm-rep-mob-dn-bn-se-hr-se-sw-ae,
          var(--_ctm-rep-tab-dn-bn-se-hr-se-sw-ae, var(--_ctm-rep-dn-bn-se-hr-se-sw-ae))
        );
        --_sf-hr-sw-br: var(
          --_ctm-rep-mob-dn-bn-se-hr-se-sw-br,
          var(--_ctm-rep-tab-dn-bn-se-hr-se-sw-br, var(--_ctm-rep-dn-bn-se-hr-se-sw-br))
        );
        --_sf-hr-sw-hr: var(
          --_ctm-rep-mob-dn-bn-se-hr-se-sw-hr,
          var(--_ctm-rep-tab-dn-bn-se-hr-se-sw-hr, var(--_ctm-rep-dn-bn-se-hr-se-sw-hr))
        );
        --_sf-hr-sw-cr: var(
          --_ctm-rep-mob-dn-bn-se-hr-se-sw-cr,
          var(--_ctm-rep-tab-dn-bn-se-hr-se-sw-cr, var(--_ctm-rep-dn-bn-se-hr-se-sw-cr))
        );

        // for font

        --_sf-hr-cr: var(
          --_ctm-rep-mob-dn-bn-se-hr-se-cr,
          var(--_ctm-rep-tab-dn-bn-se-hr-se-cr, var(--_ctm-rep-dn-bn-se-hr-se-cr))
        );
        --_sf-hr-ft-fy: var(
          --_ctm-rep-mob-dn-bn-se-hr-se-ft-fy,
          var(--_ctm-rep-tab-dn-bn-se-hr-se-ft-fy, var(--_ctm-rep-dn-bn-se-hr-se-ft-fy))
        );
        --_sf-hr-tt-tm: var(
          --_ctm-rep-mob-dn-bn-se-hr-se-tt-tm,
          var(--_ctm-rep-tab-dn-bn-se-hr-se-tt-tm, var(--_ctm-rep-dn-bn-se-hr-se-tt-tm))
        );
        --_sf-hr-wd-wp: var(
          --_ctm-rep-mob-dn-bn-se-hr-se-wd-wp,
          var(--_ctm-rep-tab-dn-bn-se-hr-se-wd-wp, var(--_ctm-rep-dn-bn-se-hr-se-wd-wp))
        );
        --_sf-hr-wd-bk: var(
          --_ctm-rep-mob-dn-bn-se-hr-se-wd-bk,
          var(--_ctm-rep-tab-dn-bn-se-hr-se-wd-bk, var(--_ctm-rep-dn-bn-se-hr-se-wd-bk))
        );
        --_sf-hr-ft-se: var(
          --_ctm-rep-mob-dn-bn-se-hr-se-ft-se,
          var(--_ctm-rep-tab-dn-bn-se-hr-se-ft-se, var(--_ctm-rep-dn-bn-se-hr-se-ft-se))
        );
        --_sf-hr-ft-wt: var(
          --_ctm-rep-mob-dn-bn-se-hr-se-ft-wt,
          var(--_ctm-rep-tab-dn-bn-se-hr-se-ft-wt, var(--_ctm-rep-dn-bn-se-hr-se-ft-wt))
        );
        --_sf-hr-ft-se-ic: var(
          --_ctm-rep-mob-dn-bn-se-hr-se-ft-se-ic,
          var(--_ctm-rep-tab-dn-bn-se-hr-se-ft-se-ic, var(--_ctm-rep-dn-bn-se-hr-se-ft-se-ic))
        );
        --_sf-hr-tt-an: var(
          --_ctm-rep-mob-dn-bn-se-hr-se-tt-an,
          var(--_ctm-rep-tab-dn-bn-se-hr-se-tt-an, var(--_ctm-rep-dn-bn-se-hr-se-tt-an))
        );
        --_sf-hr-lr-sg: var(
          --_ctm-rep-mob-dn-bn-se-hr-se-lr-sg,
          var(--_ctm-rep-tab-dn-bn-se-hr-se-lr-sg, var(--_ctm-rep-dn-bn-se-hr-se-lr-sg))
        );
        --_sf-hr-le-ht: var(
          --_ctm-rep-mob-dn-bn-se-hr-se-le-ht,
          var(--_ctm-rep-tab-dn-bn-se-hr-se-le-ht, var(--_ctm-rep-dn-bn-se-hr-se-le-ht))
        );

        --_sf-hr-in-se: var(
          --_ctm-rep-mob-dn-bn-se-hr-se-in-se,
          var(--_ctm-rep-tab-dn-bn-se-hr-se-in-se, var(--_ctm-rep-dn-bn-se-hr-se-in-se))
        );
        --_sf-hr-in-se: var(
          --_ctm-rep-mob-dn-bn-se-hr-se-in-se,
          var(--_ctm-rep-tab-dn-bn-se-hr-se-in-se, var(--_ctm-rep-dn-bn-se-hr-se-in-se))
        );
        --_sf-hr-in-c1: var(
          --_ctm-rep-mob-dn-bn-se-hr-se-in-c1,
          var(--_ctm-rep-tab-dn-bn-se-hr-se-in-c1, var(--_ctm-rep-dn-bn-se-hr-se-in-c1))
        );
        --_sf-hr-ue: var(
          --_ctm-rep-mob-dn-bn-se-hr-se-ue,
          var(--_ctm-rep-tab-dn-bn-se-hr-se-ue, var(--_ctm-rep-dn-bn-se-hr-se-ue))
        );

        // for pading and width
        --_sf-hr-pg: var(
          --_ctm-rep-mob-dn-bn-se-hr-pg,
          var(--_ctm-rep-tab-dn-bn-se-hr-pg, var(--_ctm-rep-dn-bn-se-hr-pg))
        );
        --_sf-hr-wh: var(
          --_ctm-rep-mob-dn-bn-se-hr-wh,
          var(--_ctm-rep-tab-dn-bn-se-hr-wh, var(--_ctm-rep-dn-bn-se-hr-wh))
        );

        &[data-hover-show-shadow="false"] {
          --_hover-show-shadow: none;
        }

        &[data-hover-show-icon="false"] {
          --_hover-show-icon: none;
        }
      }

      background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-bd-cr));

      padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-pg));
      width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-wh));
      display: flex;
      flex-direction: var(--_sf-fd-bn);
      align-items: center;

      justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-at));
      gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-gp));

      border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-br-rs));

      // Routed through the two gate variables the Show Shadow switches set above,
      // otherwise turning the switch off left the shadow on screen.
      box-shadow: var(
        --_hover-show-shadow,
        var(
          --_show-shadow,
          var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-sw-ae, 0))
            var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-sw-br, 0))
            var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-sw-sd, 0))
            var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-sw-cr, transparent))
        )
      );

      &[data-show-border="true"] {
        border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-br-cr));

        border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-br-se));

        border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-br-wh));
      }

      .txt {
        display: flex;

        color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-cr));

        font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-ft-fy));
        text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-tt-tm));
        word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-wd-wp));
        word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-wd-bk));

        &.flex__overflow {
          white-space: normal;
          @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
        }

        font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-ft-se));

        font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-ft-wt));

        font-style: var(
          --_sf-hr-ft-se-ic,
          prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-ft-se-ic)
        );

        text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-tt-an));

        letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-lr-sg));

        line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-le-ht));

        text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-rep-dn-dt-ue));
      }

      .icon {
        display: var(--_hover-show-icon, var(--_show-icon, flex));

        svg {
          width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-in-se));
          height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-in-se));

          path {
            stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-in-c1));
            // Overrides the stroke-width presentation attribute baked into the icon markup.
            stroke-width: prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-se-wh, 1.25);
          }
        }
      }

      [data-element-style="Text"] {
        display: inline-block;
        width: 100%;
      }

      .icon--hover {
        // position: absolute;
        // inset: 0;
        // opacity: 0;
        display: none;
        transition: opacity 0.2s ease;
      }

      &:hover .icon--hover {
        // opacity: 1;
        display: flex;
      }

      &:hover .icon--default {
        // opacity: 0;
        display: none;
      }
    }

    // &[data-view-state="full"] {
    //   width: auto;
    //   margin: 0;
    //   justify-self: stretch !important;
    //   align-self: stretch !important;
    //   cursor: auto;

    //   & > div {
    //     &[data-div-type="wrapper__layer"] {
    //       --_sf-vt-zz: visible;
    //       --_sf-op-zz: 1;
    //     }
    //   }
    // }
  }
}