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

[data-div-type="element"] {
  &[data-element-type="repeater-item"] {
    // 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-repe-ele-nw-wh-vl, auto));
    // width: 100%;
    // height: var(--_ctm-con-lt-ht);
    // margin: var(--_ctm-repe-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));

    // width: 100%;
    // background: var(--_ctm-repe-dn-bd-cr);

    height: 100%;
    // inline `min-height: 0px` on the element needs !important to be overridden
    min-height: prepareMediaVariable(--_ctm-repe-lt-mn-ht, 100px) !important;

    // The item's own Show Shadow switch, which reaches the stylesheet as
    // `data-show-shadow` (RepeaterItem surfaces it — it is a control, so it is not
    // part of the BUILDER attributes that get spread onto the element).
    &[data-show-shadow="false"] {
      --_sf-repe-show-shadow: none;
    }

    & > div {
      &.wrapper {
        width: 100%;
        height: 100%;
        min-height: prepareMediaVariable(--_ctm-repe-lt-mn-ht, 100px) !important;
        padding: var(--_ctm-mob-repe-lt-pg, var(--_ctm-tab-repe-lt-pg, var(--_ctm-repe-lt-pg)));
        //margin: var(--_ctm-mob-repe-lt-mn, var(--_ctm-tab-repe-lt-mn, var(--_ctm-repe-lt-mn)));

        // background-color: var(
        //   --_ctm-mob-repe-dn-bd-cr,
        //   var(--_ctm-tab-repe-dn-bd-cr, var(--_ctm-repe-dn-bd-cr))
        // );
        // background-image: var(
        //   --_ctm-mob-repe-dn-bd-ie,
        //   var(--_ctm-tab-repe-dn-bd-ie, var(--_ctm-repe-dn-bd-ie))
        // );
        // background-attachment: var(
        //   --_ctm-mob-repe-dn-bd-at,
        //   var(--_ctm-tab-repe-dn-bd-at, var(--_ctm-repe-dn-bd-at))
        // );
        // background-position: var(
        //   --_ctm-mob-repe-dn-bd-pn,
        //   var(--_ctm-tab-repe-dn-bd-pn, var(--_ctm-repe-dn-bd-pn))
        // );
        // background-repeat: var(
        //   --_ctm-mob-repe-dn-bd-rt,
        //   var(--_ctm-tab-repe-dn-bd-rt, var(--_ctm-repe-dn-bd-rt))
        // );
        // background-size: var(
        //   --_ctm-mob-repe-dn-bd-se,
        //   var(--_ctm-tab-repe-dn-bd-se, var(--_ctm-repe-dn-bd-se))
        // );
        border-radius: var(
          --_ctm-mob-repe-dn-br-rs,
          var(--_ctm-tab-repe-dn-br-rs, var(--_ctm-repe-dn-br-rs))
        );
        border-color: var(
          --_ctm-mob-repe-dn-br-cr,
          var(--_ctm-tab-repe-dn-br-cr, var(--_ctm-repe-dn-br-cr))
        );
        border-style: var(
          --_ctm-mob-repe-dn-br-se,
          var(--_ctm-tab-repe-dn-br-se, var(--_ctm-repe-dn-br-se))
        );
        border-width: var(
          --_ctm-mob-repe-dn-br-wh,
          var(--_ctm-tab-repe-dn-br-wh, var(--_ctm-repe-dn-br-wh))
        );
        // The four shadow variables read `repe-se-*`, but the design section is
        // `design`, so the builder writes `repe-dn-*` (see default-templates.ts). No
        // `repe-se-*` variable is ever defined, which made the whole var() chain
        // invalid at computed-value time and resolved box-shadow to its initial `none`.
        //
        // The gate is `--_sf-repe-show-shadow`, not the shared `--_show-shadow`: the
        // parent Repeater sets that on its own root when its shadow is switched off, and
        // custom properties inherit, so items lost their shadow whenever the repeater's
        // was off. A name of its own keeps the two switches independent. The hover
        // variables that used to head this chain are gone with it — this element has no
        // hover state, so nothing set them and they carried the same leak risk.
        //
        // Per-part fallbacks match repeater.scss: without them a single unset part would
        // invalidate the whole declaration again.
        box-shadow: var(
          --_sf-repe-show-shadow,
          var(--_ctm-mob-repe-dn-sw-ae, var(--_ctm-tab-repe-dn-sw-ae, var(--_ctm-repe-dn-sw-ae, 0)))
            var(
              --_ctm-mob-repe-dn-sw-br,
              var(--_ctm-tab-repe-dn-sw-br, var(--_ctm-repe-dn-sw-br, 0))
            )
            var(
              --_ctm-mob-repe-dn-sw-sd,
              var(--_ctm-tab-repe-dn-sw-sd, var(--_ctm-repe-dn-sw-sd, 0))
            )
            var(
              --_ctm-mob-repe-dn-sw-cr,
              var(--_ctm-tab-repe-dn-sw-cr, var(--_ctm-repe-dn-sw-cr, transparent))
            )
        );
      }
      &:is([data-background-type="color"] > *).wrapper {
        background-color: #{prepareMediaVariable(--_ctm-repe-dn-bd-cr)};
      }

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

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

      &:is([data-gradient-type="Radial Gradient"] > *).wrapper {
        background-image: radial-gradient(
          circle at var(--_sf-repe-gradient-position),
          var(--_sf-repe-gradient-start-color) var(--_sf-repe-gradient-start-position),
          var(--_sf-repe-gradient-end-color) var(--_sf-repe-gradient-end-position)
        );
      }
      &:is([data-background-type="image"] > *).wrapper {
        background-image: prepareMediaVariable(--_ctm-repe-dn-bd-ie);
        background-attachment: prepareMediaVariable(--_ctm-repe-dn-bd-at);
        background-position: prepareMediaVariable(--_ctm-repe-dn-bd-pn);
        background-position-y: prepareMediaVariable(--_ctm-repe-dn-bd-pn-y);
        background-repeat: prepareMediaVariable(--_ctm-repe-dn-bd-rt);
        background-size: prepareMediaVariable(--_ctm-repe-dn-bd-se);
      }
    }
  }
}