@use "sass:map";
@use "sass:list";
@use "./functions.scss" as *;
@use "./repeater-embla-controls.scss" as *;
$childItemSelector: '[data-element-type="layouter-item"]';
$sliderControlDragging: "[flex-slider-control-moving='true']";
[data-div-type="element"] {
  &[data-element-type="layouter"] {
    // 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-lay-ele-nw-wh-vl,
          var(--_ctm-tab-lay-ele-nw-wh-vl, var(--_ctm-lay-ele-nw-wh-vl, auto))
        )
    );
    // width: 100%;
    // height: var(--_ctm-con-lt-ht);
    margin: var(
      --_ctm-mob-lay-lt-mn,
      var(--_ctm-tab-lay-lt-mn, var(--_ctm-lay-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))))
    );

    // Widget Style (design.widgetStyle). The `wt-se` segment arrived when these moved
    // off the Design tab root into their own accordion; the plain `dn-` name is kept as
    // the fallback so pages published before the move keep their background, border,
    // radius and shadow.
    &[data-background-type="color"] {
      background-color: prepareMediaVariable(
        --_ctm-lay-dn-wt-se-bd-cr,
        prepareMediaVariable(--_ctm-lay-dn-bd-cr)
      );
    }

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

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

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

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

    // background-color: var(
    //   --_ctm-mob-lay-dn-bd-cr,
    //   var(--_ctm-tab-lay-dn-bd-cr, var(--_ctm-lay-dn-bd-cr))
    // );
    // background-image: var(
    //   --_ctm-mob-lay-dn-bd-ie,
    //   var(--_ctm-tab-lay-dn-bd-ie, var(--_ctm-lay-dn-bd-ie))
    // );
    // background-attachment: var(
    //   --_ctm-mob-lay-dn-bd-at,
    //   var(--_ctm-tab-lay-dn-bd-at, var(--_ctm-lay-dn-bd-at))
    // );
    // background-position: var(
    //   --_ctm-mob-lay-dn-bd-pn,
    //   var(--_ctm-tab-lay-dn-bd-pn, var(--_ctm-lay-dn-bd-pn))
    // );
    // background-repeat: var(
    //   --_ctm-mob-lay-dn-bd-rt,
    //   var(--_ctm-tab-lay-dn-bd-rt, var(--_ctm-lay-dn-bd-rt))
    // );
    // background-size: var(
    //   --_ctm-mob-lay-dn-bd-se,
    //   var(--_ctm-tab-lay-dn-bd-se, var(--_ctm-lay-dn-bd-se))
    // );
    border-radius: prepareMediaVariable(
      --_ctm-lay-dn-wt-se-br-rs,
      prepareMediaVariable(--_ctm-lay-dn-br-rs)
    );
    border-color: prepareMediaVariable(
      --_ctm-lay-dn-wt-se-br-cr,
      prepareMediaVariable(--_ctm-lay-dn-br-cr)
    );
    border-style: prepareMediaVariable(
      --_ctm-lay-dn-wt-se-br-se,
      prepareMediaVariable(--_ctm-lay-dn-br-se)
    );
    border-width: prepareMediaVariable(
      --_ctm-lay-dn-wt-se-br-wh,
      prepareMediaVariable(--_ctm-lay-dn-br-wh)
    );
    box-shadow: var(
      --_hover-show-shadow,
      var(
        --_sf-hr-bx-sw,
        var(
          --_show-shadow,
          prepareMediaVariable(--_ctm-lay-dn-wt-se-sw-ae, prepareMediaVariable(--_ctm-lay-dn-sw-ae))
            prepareMediaVariable(
              --_ctm-lay-dn-wt-se-sw-br,
              prepareMediaVariable(--_ctm-lay-dn-sw-br)
            )
            prepareMediaVariable(
              --_ctm-lay-dn-wt-se-sw-sd,
              prepareMediaVariable(--_ctm-lay-dn-sw-sd)
            )
            prepareMediaVariable(
              --_ctm-lay-dn-wt-se-sw-cr,
              prepareMediaVariable(--_ctm-lay-dn-sw-cr)
            )
        )
      )
    );
    padding: var(--_ctm-mob-lay-lt-pg, var(--_ctm-tab-lay-lt-pg, var(--_ctm-lay-lt-pg)));

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

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

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

          justify-content: prepareMediaVariable(--_ctm-lay-lt-jy-ct);
          align-items: prepareMediaVariable(--_ctm-lay-lt-an-is);

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

          @media only screen and (max-width: 767px) {
            grid-template-rows: auto;
          }
        }
      }
    }

    &.sld {
      &:is(:not(#{$sliderControlDragging} *)) {
        overflow: clip;
      }
      // overflow: clip;
      height: auto;
      min-height: 50px !important;
      --_sf-sl-ct-ic-dt-at-cl: var(
        --_ctm-mob-lay-lt-cl-ae-cr,
        var(--_ctm-tab-lay-lt-cl-ae-cr, var(--_ctm-lay-lt-cl-ae-cr))
      );

      // Design > Pagination Dots. 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 elements 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-lay-dn-pn-ds-dt-se,
          var(--_ctm-mob-lay-lt-dt-se, var(--_ctm-tab-lay-lt-dt-se, var(--_ctm-lay-lt-dt-se, 10px)))
        )};
      --_sf-dt-ae-bg: #{prepareMediaVariable(--_ctm-lay-dn-pn-ds-ct-dt-cr, #162578)};
      --_sf-dt-ie-bg: #{prepareMediaVariable(--_ctm-lay-dn-pn-ds-or-dt-cr, #fff)};

      // 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 — an element 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-lay-dn-pn-as-aw-se,
          var(
            --_ctm-mob-lay-lt-aw-in-se,
            var(--_ctm-tab-lay-lt-aw-in-se, var(--_ctm-lay-lt-aw-in-se, 40px))
          )
        )};
      // Resting stroke of the chevrons; hover still switches to Control Active Color.
      --_sf-sl-ct-aw-in-cl: #{prepareMediaVariable(--_ctm-lay-dn-pn-as-aw-cr, #667085)};
      // Background Color, as the gallery slider uses 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-lay-as-bg-cr: #{prepareMediaVariable(--_ctm-lay-dn-pn-as-bd-cr, #fff)};
      --_sf-nv-ic-bg: color-mix(in srgb, var(--_sf-lay-as-bg-cr) 10%, transparent);

      // 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. Elements 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-lay-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-lay-dn-pn-ds-br-wh, 0px)};
          border-style: #{prepareMediaVariable(--_ctm-lay-dn-pn-ds-br-se, solid)};
          border-color: #{prepareMediaVariable(--_ctm-lay-dn-pn-ds-br-cr, transparent)};
        }

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

      & > div {
        &.wrapper {
          justify-content: prepareMediaVariable(--_ctm-lay-lt-jy-ct);
          align-items: prepareMediaVariable(--_ctm-lay-lt-an-is);
          &.embla__container {
            display: flex !important;
            --_embla-slide-space: var(
              --_ctm-mob-lay-lt-im-gp,
              var(--_ctm-tab-lay-lt-im-gp, var(--_ctm-lay-lt-im-gp, 0px))
            );
            --_embla-col-count: var(
              --_ctm-mob-lay-lt-st-is-pr-se,
              var(--_ctm-tab-lay-lt-st-is-pr-se, var(--_ctm-lay-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 {
        width: 100%;
        gap: var(
          --_ctm-mob-lay-lt-im-gp,
          var(--_ctm-tab-lay-lt-im-gp, var(--_ctm-lay-lt-im-gp, 0px))
        );

        &:is(.sld > *, .rws > *, .cln > *) {
          // gap: var(
          //   --_ctm-mob-lay-lt-im-gp,
          //   var(--_ctm-tab-lay-lt-im-gp, var(--_ctm-lay-lt-im-gp, 0px))
          // );
          gap: #{prepareMediaVariable(--_ctm-lay-lt-im-gp, 0px)};
        }
        &:is(.grd > *) {
          column-gap: #{prepareMediaVariable(--_ctm-lay-lt-cn-gp, 0px)};
          row-gap: #{prepareMediaVariable(--_ctm-lay-lt-rw-gp, 0px)};
        }
        // width: 100%;
        // grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
        // grid-auto-rows: minmax(100px, 1fr);
      }
    }

    &.rws {
      & > .wrapper {
        // grid-template-columns: 100%;
        // grid-template-rows:
        //   minmax(
        //     clamp(
        //       0.5px,
        //       calc(
        //         (18.918014128728416 * var(--_cms-playground-unit)) -
        //           (0.18918014128728416 * var(--_cms-scrollbar-width))
        //       ),
        //       calc(0.18918014128728416 * var(--_cms-section-max-width))
        //     ),
        //     auto
        //   )
        //   minmax(
        //     clamp(
        //       0.5px,
        //       calc(
        //         (18.918014128728416 * var(--_cms-playground-unit)) -
        //           (0.18918014128728416 * var(--_cms-scrollbar-width))
        //       ),
        //       calc(0.18918014128728416 * var(--_cms-section-max-width))
        //     ),
        //     auto
        //   )
        //   minmax(
        //     clamp(
        //       0.5px,
        //       calc(
        //         (18.918014128728416 * var(--_cms-playground-unit)) -
        //           (0.18918014128728416 * var(--_cms-scrollbar-width))
        //       ),
        //       calc(0.18918014128728416 * var(--_cms-section-max-width))
        //     ),
        //     auto
        //   )
        //   minmax(
        //     clamp(
        //       0.5px,
        //       calc(
        //         (18.918014128728416 * var(--_cms-playground-unit)) -
        //           (0.18918014128728416 * var(--_cms-scrollbar-width))
        //       ),
        //       calc(0.18918014128728416 * var(--_cms-section-max-width))
        //     ),
        //     auto
        //   );
        & > div {
          &#{$childItemSelector} {
            width: 100%;
          }
        }
      }
    }

    &.cln {
      &[data-view-state="auto"] {
        height: var(--_ctm-mob-lay-lt-ht, var(--_ctm-tab-lay-lt-ht, var(--_ctm-lay-lt-ht)));
      }
      & > .wrapper {
        height: 100%;
        & > div {
          &#{$childItemSelector} {
            width: 100%;
            // align-self: flex-start;
          }
        }
      }
    }

    // &[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;
    //     }
    //   }
    // }
  }
}