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

// $ics is the tip's border-width: a 5px border with no content box makes a
// 10px triangle whose apex sits at the centre of the 10px box.
$ics: 5px;
$tip: $ics * 2;
$bm: 30px;

// Gap between the marker's edge and the tooltip. Held in a custom property so it
// can track the marker's real size at runtime (see --_sf-tp-gp below); at the
// default 30px marker it resolves to 20px, matching the previous flat offset.
$g: var(--_sf-tp-gp);

$overflowSelector: ".flex__overflow";

$resizerOn: "[data-cms-element-resizer='true']";
$dndOn: "[data-cms-new-element-dragging-v2='true']";
$fullViewOn: '[data-view-state="full"]';

// Each entry places the tooltip relative to the marker's centre, then pins the
// tip to the tooltip edge that faces the marker. Because $g already absorbs the
// marker's half-size, every tip offset below is a constant: the triangle always
// spans exactly the gap, base on the tooltip edge and apex on the marker edge.
$data: (
  // tooltip to the LEFT — tip on its right edge, pointing right
  leftTop: (
      transform: translate(calc(-100% - #{$g}), calc(-100% + #{$bm})),
      icon: (
        right: -#{$tip},
        bottom: calc(#{$bm} - #{$ics}),
        border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
      ),
    ),
  leftCenter: (
    transform: translate(calc(-100% - #{$g}), -50%),
    icon: (
      right: -#{$tip},
      top: calc(50% - #{$ics}),
      border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
    ),
  ),
  leftBottom: (
    transform: translate(calc(-100% - #{$g}), calc(0% - #{$bm})),
    icon: (
      right: -#{$tip},
      top: calc(#{$bm} - #{$ics}),
      border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
    ),
  ),
  // tooltip ABOVE — tip on its bottom edge, pointing down
  topLeft: (
      transform: translate(calc(-100% + #{$bm}), calc(-100% - #{$g})),
      icon: (
        bottom: -#{$tip},
        right: calc(#{$bm} - #{$ics}),
        border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
      ),
    ),
  topCenter: (
    transform: translate(-50%, calc(-100% - #{$g})),
    icon: (
      bottom: -#{$tip},
      left: calc(50% - #{$ics}),
      border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
    ),
  ),
  topRight: (
    transform: translate(calc(0% - #{$bm}), calc(-100% - #{$g})),
    icon: (
      bottom: -#{$tip},
      left: calc(#{$bm} - #{$ics}),
      border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
    ),
  ),
  // tooltip to the RIGHT — tip on its left edge, pointing left
  rightTop: (
      transform: translate(#{$g}, calc(-100% + #{$bm})),
      icon: (
        left: -#{$tip},
        bottom: calc(#{$bm} - #{$ics}),
        border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
      ),
    ),
  rightCenter: (
    transform: translate(#{$g}, -50%),
    icon: (
      left: -#{$tip},
      top: calc(50% - #{$ics}),
      border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
    ),
  ),
  rightBottom: (
    transform: translate(#{$g}, calc(0% - #{$bm})),
    icon: (
      left: -#{$tip},
      top: calc(#{$bm} - #{$ics}),
      border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
    ),
  ),
  // tooltip BELOW — tip on its top edge, pointing up
  bottomLeft: (
      transform: translate(calc(-100% + #{$bm}), #{$g}),
      icon: (
        top: -#{$tip},
        right: calc(#{$bm} - #{$ics}),
        border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
      ),
    ),
  bottomCenter: (
    transform: translate(-50%, #{$g}),
    icon: (
      top: -#{$tip},
      left: calc(50% - #{$ics}),
      border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
    ),
  ),
  bottomRight: (
    transform: translate(calc(0% - #{$bm}), #{$g}),
    icon: (
      top: -#{$tip},
      left: calc(#{$bm} - #{$ics}),
      border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
    ),
  )
);

[data-div-type="element"] {
  &[data-element-type="imageHotspot"] {
    // Half the marker as it actually renders, and the gap the tooltip keeps from
    // the marker's centre. Both are driven by the size controls rather than by
    // literals, so the tip lands on the marker at any size.
    --_sf-ht-hf: calc(#{prepareMediaVariable(--_ctm-dn-ht-se-ht-se, 30px)} / 2);
    --_sf-tp-gp: calc(var(--_sf-ht-hf) + #{$ics});

    // the icon marker is sized by its svg plus .hotspot__icon's 4px padding
    &[data-hotspot-style="icon"] {
      --_sf-ht-hf: calc((#{prepareMediaVariable(--_ctm-dn-ht-se-in-se, 30px)} + 8px) / 2);
    }

    &[data-hotspot-position] {
      @each $key, $value in $data {
        &[data-hotspot-position="#{$key}"] {
          .hotspot__tooltip {
            @each $prop, $val in $value {
              @if ($prop !=icon) {
                #{$prop}: #{$val};
              } @else {
                @each $key2, $value2 in $val {
                  &:after {
                    #{$key2}: #{$value2};
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

[data-div-type="element"] {
  &[data-element-type="imageHotspot"] {
    // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-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-lt-mn, --_tst-lt-mn);
    // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
    // --_aspect-ratio: calc(
    //   1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
    // );

    &:not(#{$resizerOn}, #{$dndOn}, #{$fullViewOn}) {
      height: prepareMediaVariable(--_ctm-lt-ht) !important;
    }

    &[data-cms-element-resizer="true"] {
      // height: var(--_ctm-lt-ht);
      width: auto;

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

    & > .wrapper {
      width: 100%;
      // Fill the element's fixed height and keep padding + border inside it, so
      // the image (height:100%) fits the padded frame instead of overflowing.
      height: 100%;
      box-sizing: border-box;
      position: relative;

      background-color: prepareMediaVariable(--_ctm-dn-ie-se-bd-cr);
      padding: prepareMediaVariable(--_ctm-lt-pg, var(--_tst-lt-pg));
      // Frame border-radius lives on the wrapper (with the background & shadow),
      // not on the image inside it.
      border-radius: prepareMediaVariable(--_ctm-dn-ie-se-br-rs);
      box-shadow: prepareMediaVariable(--_ctm-dn-ie-se-sw-ae)
        prepareMediaVariable(--_ctm-dn-ie-se-sw-br) prepareMediaVariable(--_ctm-dn-ie-se-sw-sd)
        prepareMediaVariable(--_ctm-dn-ie-se-sw-cr);

      & > div {
        &.hotspot__tooltip {
          --_sf-br-vl: #{prepareMediaVariable(--_ctm-dn-tp-dn-br-rs, 0px)};
          position: absolute;
          background: prepareMediaVariable(--_ctm-dn-tp-dn-bd-cr);
          z-index: 1000;
          min-width: 100px;
          width: prepareMediaVariable(--_ctm-dn-tp-dn-tp-wh);
          min-height: 100px;
          height: prepareMediaVariable(--_ctm-dn-tp-dn-tp-ht);
          top: var(--_sf-im-psn-tp, 0);
          left: var(--_sf-im-psn-lt, 0);

          padding: prepareMediaVariable(--_ctm-dn-tp-dn-pg);
          display: flex;
          justify-content: prepareMediaVariable(--_ctm-dn-tp-dn-hl-at);
          align-items: prepareMediaVariable(--_ctm-dn-tp-dn-vl-at);

          &::after {
            content: "";
            position: absolute;

            border-width: 5px;
            border-style: solid;
          }

          .tooltip__image_with_text {
            display: flex;
            // justify-content: center;
            gap: prepareMediaVariable(--_ctm-dn-tp-dn-im-gp);
            overflow-y: auto;
            height: 100%;
            width: 100%;

            // This wrapper fills the tooltip, so the tooltip's own justify/align
            // above can't move it — the alignment has to be applied here, on the
            // container that actually holds the image and the text box. Which axis
            // each maps to flips with the stack direction.
            &.hrz {
              flex-direction: row;
              justify-content: prepareMediaVariable(--_ctm-dn-tp-dn-hl-at);
              align-items: prepareMediaVariable(--_ctm-dn-tp-dn-vl-at);

              .tooltip__image {
                flex-direction: column;
              }
            }

            &.vtl {
              flex-direction: column;
              justify-content: prepareMediaVariable(--_ctm-dn-tp-dn-vl-at);
              align-items: prepareMediaVariable(--_ctm-dn-tp-dn-hl-at);

              .tooltip__image {
                flex-direction: row;
              }
            }

            .tooltip__image {
              height: 100%;
              width: 100%;
              background-color: prepareMediaVariable(--_ctm-dn-tp-ie-bd-cr);
              transition: transform 0.3s ease-in-out;
              display: flex;
              justify-content: prepareMediaVariable(--_ctm-dn-tp-ie-hl-at);
              align-items: prepareMediaVariable(--_ctm-dn-tp-ie-vl-at);

              img {
                object-fit: prepareMediaVariable(--_ctm-dn-tp-ie-ft-os);
                height: prepareMediaVariable(--_ctm-dn-tp-ie-ht);
                width: prepareMediaVariable(--_ctm-dn-tp-ie-wh);
                // max-width: 100%;
                rotate: calc(#{prepareMediaVariable(--_ctm-dn-tp-ie-re)} * 1deg);
                scale: prepareMediaVariable(--_ctm-dn-tp-ie-zm-ie);
                border-radius: prepareMediaVariable(--_ctm-dn-tp-ie-br-rs);

                &:hover {
                  &[data-on-img-hover="Zoom In"] {
                    transform: scale(1.08);
                  }

                  &[data-on-img-hover="Zoom Out"] {
                    transform: scale(0.92);
                  }
                }
              }
            }

            .text_box {
              display: flex;
              flex-direction: column;
              gap: prepareMediaVariable(--_ctm-dn-tp-tt-wr-im-gp);

              span {
                font-size: prepareMediaVariable(--_ctm-dn-tp-tt-ft-se);
                font-family: prepareMediaVariable(--_ctm-dn-tp-tt-ft-fy);
                color: prepareMediaVariable(--_ctm-dn-tp-tt-cr);

                font-weight: prepareMediaVariable(--_ctm-dn-tp-tt-ft-wt);
                font-style: prepareMediaVariable(--_ctm-dn-tp-tt-ft-se-ic);
                text-align: prepareMediaVariable(--_ctm-dn-tp-tt-tt-an);
                letter-spacing: prepareMediaVariable(--_ctm-dn-tp-tt-lr-sg);
                line-height: prepareMediaVariable(--_ctm-dn-tp-tt-le-ht);
                text-decoration: prepareMediaVariable(--_ctm-dn-tp-tt-ue);
                text-transform: prepareMediaVariable(--_ctm-dn-tp-tt-tt-tm, none);
                word-wrap: prepareMediaVariable(--_ctm-dn-tp-tt-wd-wp, normal);
                word-break: prepareMediaVariable(--_ctm-dn-tp-tt-wd-bk, normal);

                &#{$overflowSelector} {
                  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
                }
              }

              p {
                font-size: prepareMediaVariable(--_ctm-dn-tp-tt-ft-se-dc);
                color: prepareMediaVariable(--_ctm-dn-tp-tt-cr-dc);
                font-family: prepareMediaVariable(--_ctm-dn-tp-tt-ft-fy-dc);
                font-weight: prepareMediaVariable(--_ctm-dn-tp-tt-ft-wt-dc);
                font-style: prepareMediaVariable(--_ctm-dn-tp-tt-ft-se-ic-dc);
                text-align: prepareMediaVariable(--_ctm-dn-tp-tt-tt-an-dc);
                letter-spacing: prepareMediaVariable(--_ctm-dn-tp-tt-lr-sg-dc);
                line-height: prepareMediaVariable(--_ctm-dn-tp-tt-le-ht-dc);
                text-decoration: prepareMediaVariable(--_ctm-dn-tp-tt-ue-dc);
                text-transform: prepareMediaVariable(--_ctm-dn-tp-tt-tt-tm-dc, none);
                word-wrap: prepareMediaVariable(--_ctm-dn-tp-tt-wd-wp-dc, normal);
                word-break: prepareMediaVariable(--_ctm-dn-tp-tt-wd-bk-dc, normal);

                &#{$overflowSelector} {
                  @include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
                }
              }
            }

            .btn__with__text[data-btn-name="tooltipButton"] {
              width: 100%;

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

              span {
                svg rect {
                  fill: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-cr));
                }
              }

              &:hover {
                --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-bd-cr)};
                // @include BgColorLighter(var(--_sf-hr-cr), 5%);
                --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-br-cr)};
                --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-br-se)};
                --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-br-wh)};
                --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-br-rs)};
                --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-at)};
                --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-gp)};

                // for shadow
                --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-sw-ae)};
                --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-sw-br)};
                --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-sw-hr)};
                --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-tp-bn-hr-se-sw-cr)};
                // for font

                --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-cr)};
                --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-ft-fy)};
                --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-ft-se)};
                --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-ft-wt)};
                --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-ft-se-ic)};
                --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-tt-an)};
                --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-lr-sg)};
                --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-le-ht)};

                --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-in-se)};
                --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-in-se)};
                --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-in-c1)};
                --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-ue)};

                // for pading and width
                --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-pg)};
                --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-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-dn-tp-bn-dt-se-bd-cr)
              );

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

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

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

              box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-ae))
                var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-br))
                var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-sd))
                var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-cr));

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

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

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

              .txt {
                display: flex;

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

                font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-ft-fy));
                text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-tt-tm));
                word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-wd-wp));
                word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-tp-bn-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-dn-tp-bn-dt-se-ft-se));

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

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

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

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

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

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

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

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

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

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

              .icon--hover {
                display: none;
                transition: opacity 0.2s ease;
              }

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

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

          // .text_box {
          //   overflow-y: auto;

          //   h6 {
          //     font-size: prepareMediaVariable(--_ctm-dn-tp-tt-ft-se);
          //     font-family: prepareMediaVariable(--_ctm-dn-tp-tt-ft-fy);
          //     color: prepareMediaVariable(--_ctm-dn-tp-tt-cr);

          //     font-weight: prepareMediaVariable(--_ctm-dn-tp-tt-ft-wt);
          //     font-style: prepareMediaVariable(--_ctm-dn-tp-tt-ft-se-ic);
          //     text-align: prepareMediaVariable(--_ctm-dn-tp-tt-tt-an);
          //     letter-spacing: prepareMediaVariable(--_ctm-dn-tp-tt-lr-sg);
          //     line-height: prepareMediaVariable(--_ctm-dn-tp-tt-le-ht);
          //     text-decoration: prepareMediaVariable(--_ctm-dn-tp-tt-ue);
          //   }

          //   p {
          //     font-size: prepareMediaVariable(--_ctm-dn-tp-tt-ft-se-dc);
          //     color: prepareMediaVariable(--_ctm-dn-tp-tt-cr-dc);
          //     font-family: prepareMediaVariable(--_ctm-dn-tp-tt-ft-fy-dc);
          //     font-weight: prepareMediaVariable(--_ctm-dn-tp-tt-ft-wt-dc);
          //     font-style: prepareMediaVariable(--_ctm-dn-tp-tt-ft-se-ic-dc);
          //     text-align: prepareMediaVariable(--_ctm-dn-tp-tt-tt-an-dc);
          //     letter-spacing: prepareMediaVariable(--_ctm-dn-tp-tt-lr-sg-dc);
          //     line-height: prepareMediaVariable(--_ctm-dn-tp-tt-le-ht-dc);
          //     text-decoration: prepareMediaVariable(--_ctm-dn-tp-tt-lh-dc);
          //   }
          // }

          // .tooltip__image {
          //   height: 100%;
          //   width: 100%;
          //   background-color: prepareMediaVariable(--_ctm-dn-tp-ie-bd-cr);
          //   transition: transform 0.3s ease-in-out;
          //   display: flex;
          //   justify-content: prepareMediaVariable(--_ctm-dn-tp-ie-hl-at);
          //   align-items: prepareMediaVariable(--_ctm-dn-tp-ie-vl-at);

          //   img {
          //     object-fit: prepareMediaVariable(--_ctm-dn-tp-ie-ft-os);
          //     height: -webkit-fill-available;
          //     max-width: 100%;
          //     rotate: calc(#{prepareMediaVariable(--_ctm-dn-tp-ie-re)} * 1deg);
          //     scale: prepareMediaVariable(--_ctm-dn-tp-ie-zm-ie);
          //     border-radius: prepareMediaVariable(--_ctm-dn-tp-ie-br-rs);

          //     &:hover {
          //       &[data-on-img-hover="Zoom In"] {
          //         transform: scale(1.08);
          //       }

          //       &[data-on-img-hover="Zoom Out"] {
          //         transform: scale(0.92);
          //       }
          //     }
          //   }
          // }
        }
      }
    }

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

    &[data-hotspot-position="topLeft"] {
      --_show-shadow: none;

      .hotspot__tooltip {
        border-style: prepareMediaVariable(--_ctm-dn-tp-dn-br-se);
        border-color: prepareMediaVariable(--_ctm-dn-tp-dn-br-cr);
        border-width: prepareMediaVariable(--_ctm-dn-tp-dn-br-wh);
        border-radius: prepareMediaVariable(--_ctm-dn-tp-dn-br-rs);
      }
    }

    &[data-hotspot-image-style-show-border="true"] {
      & > .wrapper {
        border-style: prepareMediaVariable(--_ctm-dn-ie-se-br-se);
        border-color: prepareMediaVariable(--_ctm-dn-ie-se-br-cr);
        border-width: prepareMediaVariable(--_ctm-dn-ie-se-br-wh);
      }
    }

    &[data-hotspot-tooltip-style-show-border="true"] {
      .hotspot__tooltip {
        border-style: prepareMediaVariable(--_ctm-dn-tp-dn-br-se);
        border-color: prepareMediaVariable(--_ctm-dn-tp-dn-br-cr);
        border-width: prepareMediaVariable(--_ctm-dn-tp-dn-br-wh);
        border-radius: prepareMediaVariable(--_ctm-dn-tp-dn-br-rs);
      }
    }

    &[data-hotspot-tooltip-style-show-shadow="true"] {
      .hotspot__tooltip {
        box-shadow: prepareMediaVariable(--_ctm-dn-tp-dn-sw-ae)
          prepareMediaVariable(--_ctm-dn-tp-dn-sw-br) prepareMediaVariable(--_ctm-dn-tp-dn-sw-sd)
          prepareMediaVariable(--_ctm-dn-tp-dn-sw-cr);
      }
    }

    &[data-hotspot-tooltip-image-style-show-border="true"] {
      .tooltip__image {
        border-style: prepareMediaVariable(--_ctm-dn-tp-ie-br-se);
        border-color: prepareMediaVariable(--_ctm-dn-tp-ie-br-cr);
        border-width: prepareMediaVariable(--_ctm-dn-tp-ie-br-wh);
        border-radius: prepareMediaVariable(--_ctm-dn-tp-ie-br-rs);
      }
    }

    &[data-hotspot-tooltip-image-style-show-shadow="true"] {
      .tooltip__image {
        box-shadow: var(
          --_show-shadow,
          prepareMediaVariable(--_ctm-dn-tp-ie-sw-ae) prepareMediaVariable(--_ctm-dn-tp-ie-sw-br)
            prepareMediaVariable(--_ctm-dn-tp-ie-sw-sd) prepareMediaVariable(--_ctm-dn-tp-ie-sw-cr)
        );
      }
    }

    &[data-hotspot-style-show-shadow="true"] {
      .hotspot,
      .hotspot__icon {
        box-shadow: prepareMediaVariable(--_ctm-dn-ht-se-sw-ae)
          prepareMediaVariable(--_ctm-dn-ht-se-sw-br) prepareMediaVariable(--_ctm-dn-ht-se-sw-sd)
          prepareMediaVariable(--_ctm-dn-ht-se-sw-cr);
      }
    }

    &[data-hotspot-style-show-border="true"] {
      .hotspot,
      .hotspot__icon {
        border-style: prepareMediaVariable(--_ctm-dn-ht-se-br-se);
        border-color: prepareMediaVariable(--_ctm-dn-ht-se-br-cr);
        border-width: prepareMediaVariable(--_ctm-dn-ht-se-br-wh);
        border-radius: prepareMediaVariable(--_ctm-dn-ht-se-br-rs);
      }
    }

    .imageHotspot-element {
      // background-color: var(--_ctm-dn-ie-se-bd-cr);
      // padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
      // box-shadow: var(--_ctm-dn-ie-se-sw-ae) var(--_ctm-dn-ie-se-sw-br) var(--_ctm-dn-ie-se-sw-sd)
      //   var(--_ctm-dn-ie-se-sw-cr);
      display: flex;
      flex-direction: column;
      --_sf-gp: 16px;
      --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
      row-gap: prepareMediaVariable(--_sf-gp);
      width: 100%;
      // Fill the wrapper's content box (element height minus wrapper padding)
      // rather than the full element height, so the image sits inside the frame.
      height: 100%;
      scale: prepareMediaVariable(--_ctm-dn-ie-se-zm-ie);
      transition: transform 0.3s ease-in-out;
      rotate: calc(#{prepareMediaVariable(--_ctm-dn-ie-se-re)} * 1deg);
      // border-radius moved to & > .wrapper (the frame).

      &:hover {
        &[data-on-hover="Zoom Out"] {
          transform: scale(0.9998);
        }

        &[data-on-hover="Zoom In"] {
          transform: scale(1.08);
        }
      }
    }

    .img__overlay {
      background: prepareMediaVariable(--_ctm-dn-ie-se-oy-cr);
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
    }

    @keyframes scaleInOut {
      0% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.5);
      }

      100% {
        transform: scale(1);
      }
    }

    .hotspot__container {
      position: absolute;

      .hotspot__main {
        position: relative;
        cursor: pointer;

        .hotspot__icon {
          background: prepareMediaVariable(--_ctm-dn-ht-se-bd-cr);
          border-radius: prepareMediaVariable(--_ctm-dn-ht-se-br-rs);
          padding: 4px;
          // centre on the anchor point, matching .hotspot. Uses translate rather
          // than transform so scaleInOut's transform cannot override it.
          position: absolute;
          top: 50%;
          left: 50%;
          translate: -50% -50%;

          // Animation gated on the toggle, so turning it off preserves the configured
          // frequency (it no longer has to be reset to 0 to stop).
          &[data-show-animation="true"] {
            animation: scaleInOut prepareMediaVariable(--_ctm-dn-ht-se-an-fy) infinite;
          }

          &[data-hotspot-shape="circle"] {
            border-radius: 50%;
          }

          &[data-hotspot-shape="any"] {
            border-radius: prepareMediaVariable(--_ctm-dn-ht-se-br-rs);
          }

          span {
            svg {
              width: prepareMediaVariable(--_ctm-dn-ht-se-in-se);
              height: prepareMediaVariable(--_ctm-dn-ht-se-in-se);

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

        .hotspot {
          background: prepareMediaVariable(--_ctm-dn-ht-se-bd-cr);
          height: prepareMediaVariable(--_ctm-dn-tp-tt-ft-se);
          width: prepareMediaVariable(--_ctm-dn-tp-tt-ft-se);
          position: absolute;
          cursor: pointer;
          width: prepareMediaVariable(--_ctm-dn-ht-se-ht-se);
          height: prepareMediaVariable(--_ctm-dn-ht-se-ht-se);
          background-color: prepareMediaVariable(--_ctm-dn-ht-se-bd-cr);
          display: flex;
          align-items: center;
          top: 50%;
          left: 50%;
          // translate, not transform: scaleInOut animates transform and would
          // otherwise override the centring whenever a frequency is set.
          translate: -50% -50%;
          box-sizing: border-box;
          justify-content: center;

          // Animation gated on the toggle (see .hotspot__icon note above).
          &[data-show-animation="true"] {
            animation: scaleInOut prepareMediaVariable(--_ctm-dn-ht-se-an-fy) infinite;
          }

          &[data-hotspot-shape="circle"] {
            border-radius: 50%;
          }

          &[data-hotspot-shape="any"] {
            border-radius: prepareMediaVariable(--_ctm-dn-ht-se-br-rs);
          }
        }
      }
    }
  }
}