@sc-360-v2/storefront-cms-library 0.4.57 → 0.4.58

package/dist/hotspot.scss

@@ -1,397 +1,397 @@
-@use "sass:map";
-@use "sass:list";
-
-$tpgp: 20px;
-$bm: 30px;
-$ics: 2px;
-
-$data: (
-  leftTop: (
-    transform: translate(calc(-100% - #{$tpgp}), calc(-100% + #{$bm})),
-    icon: (
-      bottom: #{$bm},
-      right: 0px,
-      transform: translate(calc(100% + #{$ics}), calc(50% + (#{$ics} * 1.25))),
-      border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
-    ),
-  ),
-  leftCenter: (
-    transform: translate(calc(-100% - #{$tpgp}), calc(-50% + 0px)),
-    icon: (
-      top: 50%,
-      right: 0px,
-      transform: translate(calc(100% + #{$ics}), calc(-50% + (0px * 1.75))),
-      border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
-    ),
-  ),
-  leftBottom: (
-    transform: translate(calc(-100% - #{$tpgp}), calc(0% - #{$bm})),
-    icon: (
-      top: #{$bm},
-      right: 0px,
-      transform: translate(calc(100% + #{$ics}), calc(-100% + (#{$ics} * 1.75))),
-      border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
-    ),
-  ),
-  topLeft: (
-    transform: translate(calc(-100% + #{$bm}), calc(-100% - #{$tpgp})),
-    icon: (
-      bottom: 0px,
-      right: #{$bm},
-      transform: translate(calc(50% + (#{$ics} * 1.75)), calc(100% + #{$ics})),
-      border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
-    ),
-  ),
-  topCenter: (
-    transform: translate(calc(-50% - #{$ics}), calc(-100% - #{$tpgp})),
-    icon: (
-      bottom: 0px,
-      right: 50%,
-      transform: translate(calc(50% + (#{$ics} * 1.75)), calc(100% + #{$ics})),
-      border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
-    ),
-  ),
-  topRight: (
-    transform: translate(calc(-1 * #{$bm}), calc(-100% - #{$tpgp})),
-    icon: (
-      bottom: 0px,
-      left: #{$bm},
-      transform: translate(calc(-100% + (#{$ics} * 1.25)), calc(100% + #{$ics})),
-      border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
-    ),
-  ),
-  rightTop: (
-    transform: translate(calc(0% + #{$tpgp}), calc(-100% + #{$bm})),
-    icon: (
-      top: 100%,
-      left: 0px,
-      transform: translate(calc(-100% - #{$ics}), calc(50% - (#{$bm} * 1.25))),
-      border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
-    ),
-  ),
-  rightCenter: (
-    transform: translate(calc(0% + #{$tpgp}), calc(-50% + #{$ics})),
-    border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
-    icon: (
-      bottom: 50%,
-      left: 0px,
-      transform: translate(calc(-100% - #{$ics}), calc(50% + (0px * 1.75))),
-      border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
-    ),
-  ),
-  rightBottom: (
-    transform: translate(calc(0% + #{$tpgp}), calc(0% - #{$bm})),
-    border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
-    icon: (
-      top: 100%,
-      left: 0,
-      transform: translate(calc(-100% - #{$ics}), calc(-100% - (#{$bm} * 2.05))),
-      border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
-    ),
-  ),
-  bottomLeft: (
-    transform: translate(calc(-100% + #{$bm}), calc(-50% + (#{$bm} * 2.25))),
-    border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
-    icon: (
-      right: #{$bm},
-      top: 0%,
-      transform: translate(calc(50% + (#{$ics} * 0.75)), calc(-100% - #{$ics})),
-      border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
-    ),
-  ),
-  bottomCenter: (
-    transform: translate(calc(-50% - #{$ics}), calc(-50% + (#{$bm} * 2.25))),
-    border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
-    icon: (
-      right: 50%,
-      top: 0,
-      transform: translate(calc(0% + (#{$ics} * 2.75)), calc(-100% - #{$ics})),
-      border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
-    ),
-  ),
-  bottomRight: (
-    transform: translate(calc(0% - #{$bm}), calc(-50% + (#{$bm} * 2.25))),
-    border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
-    icon: (
-      left: 30px,
-      top: 0,
-      transform: translate(calc(-50% - (#{$ics} * 1.25)), calc(-100% - #{$ics})),
-      border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
-    ),
-  ),
-);
-
-[data-div-type="element"] {
-  &[data-element-type="imageHotspot"] {
-    &[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)))
-    // );
-
-    & > .wrapper {
-      width: 100%;
-      position: relative;
-
-      & > div {
-        &.hotspot__tooltip {
-          --_sf-br-vl: var(--_ctm-dn-tp-dn-br-rs, 0px);
-          position: absolute;
-          background: var(--_ctm-dn-tp-dn-bd-cr);
-          z-index: 1000;
-          min-width: 100px;
-          width: var(--_ctm-dn-tp-dn-tp-wh);
-          min-height: 100px;
-          height: var(--_ctm-dn-tp-dn-tp-ht);
-          top: var(--_sf-im-psn-tp, 0);
-          left: var(--_sf-im-psn-lt, 0);
-
-          padding: 4px 8px;
-          display: flex;
-          justify-content: var(--_ctm-dn-tp-dn-hl-at);
-          align-items: var(--_ctm-dn-tp-dn-vl-at);
-
-          &::after {
-            content: "";
-            position: absolute;
-
-            border-width: 5px;
-            border-style: solid;
-          }
-          .text_box {
-            overflow-y: auto;
-            h6 {
-              font-size: var(--_ctm-dn-tp-tt-dn-ft-se);
-              font-family: var(--_ctm-dn-tp-tt-dn-ft-fy);
-              color: var(--_ctm-dn-tp-tt-dn-cr);
-
-              font-weight: var(--_ctm-dn-tp-tt-dn-ft-wt);
-              font-style: var(--_ctm-dn-tp-tt-dn-ft-se-ic);
-              text-align: var(--_ctm-dn-tp-tt-dn-tt-an);
-              letter-spacing: var(--_ctm-dn-tp-tt-dn-lr-sg);
-              line-height: var(--_ctm-dn-tp-tt-dn-le-ht);
-              text-decoration: var(--_ctm-dn-tp-tt-dn-ue);
-            }
-            p {
-              font-size: var(--_ctm-dn-tp-tt-dn-ft-se-dc);
-              color: var(--_ctm-dn-tp-tt-dn-cr-dc);
-              font-family: var(--_ctm-dn-tp-tt-dn-ft-fy-dc);
-              font-weight: var(--_ctm-dn-tp-tt-dn-ft-wt-dc);
-              font-style: var(--_ctm-dn-tp-tt-dn-ft-se-ic-dc);
-              text-align: var(--_ctm-dn-tp-tt-dn-tt-an-dc);
-              letter-spacing: var(--_ctm-dn-tp-tt-dn-lr-sg-dc);
-              line-height: var(--_ctm-dn-tp-tt-dn-le-ht-dc);
-              text-decoration: var(--_ctm-dn-tp-tt-dn-lh-dc, var(--_ctm-dn-tp-tt-dn-ue-dc));
-            }
-          }
-          .tooltip__image {
-            width: 100%;
-            background-color: var(--_ctm-dn-tp-ie-dn-bd-cr);
-            transition: transform 0.3s ease-in-out;
-            display: flex;
-            justify-content: var(--_ctm-dn-tp-ie-dn-hl-at);
-            align-items: var(--_ctm-dn-tp-ie-dn-vl-at);
-            img {
-              object-fit: var(--_ctm-dn-tp-ie-dn-ft-os);
-              height: -webkit-fill-available;
-              max-width: 100%;
-              rotate: calc(var(--_ctm-dn-tp-ie-dn-ud) * 1deg);
-              scale: var(--_ctm-dn-tp-ie-dn-zm-ie);
-
-              &: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: var(--_ctm-dn-tp-dn-br-se);
-        border-color: var(--_ctm-dn-tp-dn-br-cr);
-        border-width: var(--_ctm-dn-tp-dn-br-wh);
-        border-radius: var(--_ctm-dn-tp-dn-br-rs);
-      }
-    }
-
-    &[data-hotspot-image-style-show-border="true"] {
-      .imageHotspot-element {
-        border-style: var(--_ctm-dn-ie-se-br-se);
-        border-color: var(--_ctm-dn-ie-se-br-cr);
-        border-width: var(--_ctm-dn-ie-se-br-wh);
-        border-radius: var(--_ctm-dn-ie-se-br-rs);
-      }
-    }
-    &[data-hotspot-tooltip-style-show-border="true"] {
-      .hotspot__tooltip {
-        border-style: var(--_ctm-dn-tp-dn-br-se);
-        border-color: var(--_ctm-dn-tp-dn-br-cr);
-        border-width: var(--_ctm-dn-tp-dn-br-wh);
-        border-radius: var(--_ctm-dn-tp-dn-br-rs);
-      }
-    }
-    &[data-hotspot-tooltip-style-show-shadow="true"] {
-      .hotspot__tooltip {
-        box-shadow: var(--_ctm-dn-tp-dn-sw-ae) var(--_ctm-dn-tp-dn-sw-br) var(--_ctm-dn-tp-dn-sw-sd)
-          var(--_ctm-dn-tp-dn-sw-cr);
-      }
-    }
-    &[data-hotspot-tooltip-image-style-show-border="true"] {
-      .tooltip__image {
-        border-style: var(--_ctm-dn-tp-ie-dn-br-se);
-        border-color: var(--_ctm-dn-tp-ie-dn-br-cr);
-        border-width: var(--_ctm-dn-tp-ie-dn-br-wh);
-        border-radius: var(--_ctm-dn-tp-ie-dn-br-rs);
-      }
-    }
-    &[data-hotspot-tooltip-image-style-show-shadow="true"] {
-      .tooltip__image {
-        box-shadow: var(
-          --_show-shadow,
-          var(--_ctm-dn-tp-ie-dn-sw-ae) var(--_ctm-dn-tp-ie-dn-sw-br) var(--_ctm-dn-tp-ie-dn-sw-sd)
-            var(--_ctm-dn-tp-ie-dn-sw-cr)
-        );
-      }
-    }
-    &[data-hotspot-style-show-shadow="true"] {
-      .hotspot {
-        box-shadow: var(--_ctm-dn-ht-se-sw-ae) var(--_ctm-dn-ht-se-sw-br) var(--_ctm-dn-ht-se-sw-sd)
-          var(--_ctm-dn-ht-se-sw-cr);
-      }
-    }
-    &[data-hotspot-style-show-border="true"] {
-      .hotspot {
-        border-style: var(--_ctm-dn-ht-se-br-se);
-        border-color: var(--_ctm-dn-ht-se-br-cr);
-        border-width: var(--_ctm-dn-ht-se-br-wh);
-        border-radius: var(--_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));
-      display: flex;
-      flex-direction: column;
-      --_sf-gp: 16px;
-      --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
-      row-gap: var(--_sf-gp);
-      width: 100%;
-      height: 100%;
-      scale: var(--_ctm-dn-ie-se-zm-ie);
-      transition: transform 0.3s ease-in-out;
-      rotate: calc(var(--_ctm-dn-ie-se-ud) * 1deg);
-      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);
-      &:hover {
-        &[data-on-hover="Zoom Out"] {
-          transform: scale(0.9998);
-        }
-        &[data-on-hover="Zoom In"] {
-          transform: scale(1.08);
-        }
-      }
-    }
-
-    .img__overlay {
-      background: var(--_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;
-        span {
-          svg {
-            width: var(--_ctm-dn-ht-se-in-se);
-            height: var(--_ctm-dn-ht-se-in-se);
-            path {
-              stroke: var(--_ctm-dn-ht-se-in-c1);
-            }
-          }
-        }
-        .hotspot {
-          background: var(--_ctm-dn-ht-se-bd-cr);
-          // height: var(--_ctm-dn-tp-tt-dn-ft-se);
-          // width: var(--_ctm-dn-tp-tt-dn-ft-se);
-          position: absolute;
-          cursor: pointer;
-          width: var(--_ctm-dn-ht-se-ht-se);
-          height: var(--_ctm-dn-ht-se-ht-se);
-          background-color: var(--_ctm-dn-ht-se-bd-cr);
-          display: flex;
-          align-items: center;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          box-sizing: border-box;
-          justify-content: center;
-          animation: scaleInOut var(--_ctm-dn-ht-se-an-fy) infinite;
-          &[data-hotspot-shape="circle"] {
-            border-radius: 50%;
-          }
-          &[data-hotspot-shape="any"] {
-            border-radius: var(--_ctm-dn-ht-se-br-rs);
-          }
-        }
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+
+$tpgp: 20px;
+$bm: 30px;
+$ics: 2px;
+
+$data: (
+  leftTop: (
+    transform: translate(calc(-100% - #{$tpgp}), calc(-100% + #{$bm})),
+    icon: (
+      bottom: #{$bm},
+      right: 0px,
+      transform: translate(calc(100% + #{$ics}), calc(50% + (#{$ics} * 1.25))),
+      border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
+    ),
+  ),
+  leftCenter: (
+    transform: translate(calc(-100% - #{$tpgp}), calc(-50% + 0px)),
+    icon: (
+      top: 50%,
+      right: 0px,
+      transform: translate(calc(100% + #{$ics}), calc(-50% + (0px * 1.75))),
+      border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
+    ),
+  ),
+  leftBottom: (
+    transform: translate(calc(-100% - #{$tpgp}), calc(0% - #{$bm})),
+    icon: (
+      top: #{$bm},
+      right: 0px,
+      transform: translate(calc(100% + #{$ics}), calc(-100% + (#{$ics} * 1.75))),
+      border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
+    ),
+  ),
+  topLeft: (
+    transform: translate(calc(-100% + #{$bm}), calc(-100% - #{$tpgp})),
+    icon: (
+      bottom: 0px,
+      right: #{$bm},
+      transform: translate(calc(50% + (#{$ics} * 1.75)), calc(100% + #{$ics})),
+      border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
+    ),
+  ),
+  topCenter: (
+    transform: translate(calc(-50% - #{$ics}), calc(-100% - #{$tpgp})),
+    icon: (
+      bottom: 0px,
+      right: 50%,
+      transform: translate(calc(50% + (#{$ics} * 1.75)), calc(100% + #{$ics})),
+      border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
+    ),
+  ),
+  topRight: (
+    transform: translate(calc(-1 * #{$bm}), calc(-100% - #{$tpgp})),
+    icon: (
+      bottom: 0px,
+      left: #{$bm},
+      transform: translate(calc(-100% + (#{$ics} * 1.25)), calc(100% + #{$ics})),
+      border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
+    ),
+  ),
+  rightTop: (
+    transform: translate(calc(0% + #{$tpgp}), calc(-100% + #{$bm})),
+    icon: (
+      top: 100%,
+      left: 0px,
+      transform: translate(calc(-100% - #{$ics}), calc(50% - (#{$bm} * 1.25))),
+      border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
+    ),
+  ),
+  rightCenter: (
+    transform: translate(calc(0% + #{$tpgp}), calc(-50% + #{$ics})),
+    border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
+    icon: (
+      bottom: 50%,
+      left: 0px,
+      transform: translate(calc(-100% - #{$ics}), calc(50% + (0px * 1.75))),
+      border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
+    ),
+  ),
+  rightBottom: (
+    transform: translate(calc(0% + #{$tpgp}), calc(0% - #{$bm})),
+    border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
+    icon: (
+      top: 100%,
+      left: 0,
+      transform: translate(calc(-100% - #{$ics}), calc(-100% - (#{$bm} * 2.05))),
+      border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
+    ),
+  ),
+  bottomLeft: (
+    transform: translate(calc(-100% + #{$bm}), calc(-50% + (#{$bm} * 2.25))),
+    border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
+    icon: (
+      right: #{$bm},
+      top: 0%,
+      transform: translate(calc(50% + (#{$ics} * 0.75)), calc(-100% - #{$ics})),
+      border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
+    ),
+  ),
+  bottomCenter: (
+    transform: translate(calc(-50% - #{$ics}), calc(-50% + (#{$bm} * 2.25))),
+    border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
+    icon: (
+      right: 50%,
+      top: 0,
+      transform: translate(calc(0% + (#{$ics} * 2.75)), calc(-100% - #{$ics})),
+      border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
+    ),
+  ),
+  bottomRight: (
+    transform: translate(calc(0% - #{$bm}), calc(-50% + (#{$bm} * 2.25))),
+    border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
+    icon: (
+      left: 30px,
+      top: 0,
+      transform: translate(calc(-50% - (#{$ics} * 1.25)), calc(-100% - #{$ics})),
+      border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
+    ),
+  ),
+);
+
+[data-div-type="element"] {
+  &[data-element-type="imageHotspot"] {
+    &[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)))
+    // );
+
+    & > .wrapper {
+      width: 100%;
+      position: relative;
+
+      & > div {
+        &.hotspot__tooltip {
+          --_sf-br-vl: var(--_ctm-dn-tp-dn-br-rs, 0px);
+          position: absolute;
+          background: var(--_ctm-dn-tp-dn-bd-cr);
+          z-index: 1000;
+          min-width: 100px;
+          width: var(--_ctm-dn-tp-dn-tp-wh);
+          min-height: 100px;
+          height: var(--_ctm-dn-tp-dn-tp-ht);
+          top: var(--_sf-im-psn-tp, 0);
+          left: var(--_sf-im-psn-lt, 0);
+
+          padding: 4px 8px;
+          display: flex;
+          justify-content: var(--_ctm-dn-tp-dn-hl-at);
+          align-items: var(--_ctm-dn-tp-dn-vl-at);
+
+          &::after {
+            content: "";
+            position: absolute;
+
+            border-width: 5px;
+            border-style: solid;
+          }
+          .text_box {
+            overflow-y: auto;
+            h6 {
+              font-size: var(--_ctm-dn-tp-tt-dn-ft-se);
+              font-family: var(--_ctm-dn-tp-tt-dn-ft-fy);
+              color: var(--_ctm-dn-tp-tt-dn-cr);
+
+              font-weight: var(--_ctm-dn-tp-tt-dn-ft-wt);
+              font-style: var(--_ctm-dn-tp-tt-dn-ft-se-ic);
+              text-align: var(--_ctm-dn-tp-tt-dn-tt-an);
+              letter-spacing: var(--_ctm-dn-tp-tt-dn-lr-sg);
+              line-height: var(--_ctm-dn-tp-tt-dn-le-ht);
+              text-decoration: var(--_ctm-dn-tp-tt-dn-ue);
+            }
+            p {
+              font-size: var(--_ctm-dn-tp-tt-dn-ft-se-dc);
+              color: var(--_ctm-dn-tp-tt-dn-cr-dc);
+              font-family: var(--_ctm-dn-tp-tt-dn-ft-fy-dc);
+              font-weight: var(--_ctm-dn-tp-tt-dn-ft-wt-dc);
+              font-style: var(--_ctm-dn-tp-tt-dn-ft-se-ic-dc);
+              text-align: var(--_ctm-dn-tp-tt-dn-tt-an-dc);
+              letter-spacing: var(--_ctm-dn-tp-tt-dn-lr-sg-dc);
+              line-height: var(--_ctm-dn-tp-tt-dn-le-ht-dc);
+              text-decoration: var(--_ctm-dn-tp-tt-dn-lh-dc, var(--_ctm-dn-tp-tt-dn-ue-dc));
+            }
+          }
+          .tooltip__image {
+            width: 100%;
+            background-color: var(--_ctm-dn-tp-ie-dn-bd-cr);
+            transition: transform 0.3s ease-in-out;
+            display: flex;
+            justify-content: var(--_ctm-dn-tp-ie-dn-hl-at);
+            align-items: var(--_ctm-dn-tp-ie-dn-vl-at);
+            img {
+              object-fit: var(--_ctm-dn-tp-ie-dn-ft-os);
+              height: -webkit-fill-available;
+              max-width: 100%;
+              rotate: calc(var(--_ctm-dn-tp-ie-dn-ud) * 1deg);
+              scale: var(--_ctm-dn-tp-ie-dn-zm-ie);
+
+              &: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: var(--_ctm-dn-tp-dn-br-se);
+        border-color: var(--_ctm-dn-tp-dn-br-cr);
+        border-width: var(--_ctm-dn-tp-dn-br-wh);
+        border-radius: var(--_ctm-dn-tp-dn-br-rs);
+      }
+    }
+
+    &[data-hotspot-image-style-show-border="true"] {
+      .imageHotspot-element {
+        border-style: var(--_ctm-dn-ie-se-br-se);
+        border-color: var(--_ctm-dn-ie-se-br-cr);
+        border-width: var(--_ctm-dn-ie-se-br-wh);
+        border-radius: var(--_ctm-dn-ie-se-br-rs);
+      }
+    }
+    &[data-hotspot-tooltip-style-show-border="true"] {
+      .hotspot__tooltip {
+        border-style: var(--_ctm-dn-tp-dn-br-se);
+        border-color: var(--_ctm-dn-tp-dn-br-cr);
+        border-width: var(--_ctm-dn-tp-dn-br-wh);
+        border-radius: var(--_ctm-dn-tp-dn-br-rs);
+      }
+    }
+    &[data-hotspot-tooltip-style-show-shadow="true"] {
+      .hotspot__tooltip {
+        box-shadow: var(--_ctm-dn-tp-dn-sw-ae) var(--_ctm-dn-tp-dn-sw-br) var(--_ctm-dn-tp-dn-sw-sd)
+          var(--_ctm-dn-tp-dn-sw-cr);
+      }
+    }
+    &[data-hotspot-tooltip-image-style-show-border="true"] {
+      .tooltip__image {
+        border-style: var(--_ctm-dn-tp-ie-dn-br-se);
+        border-color: var(--_ctm-dn-tp-ie-dn-br-cr);
+        border-width: var(--_ctm-dn-tp-ie-dn-br-wh);
+        border-radius: var(--_ctm-dn-tp-ie-dn-br-rs);
+      }
+    }
+    &[data-hotspot-tooltip-image-style-show-shadow="true"] {
+      .tooltip__image {
+        box-shadow: var(
+          --_show-shadow,
+          var(--_ctm-dn-tp-ie-dn-sw-ae) var(--_ctm-dn-tp-ie-dn-sw-br) var(--_ctm-dn-tp-ie-dn-sw-sd)
+            var(--_ctm-dn-tp-ie-dn-sw-cr)
+        );
+      }
+    }
+    &[data-hotspot-style-show-shadow="true"] {
+      .hotspot {
+        box-shadow: var(--_ctm-dn-ht-se-sw-ae) var(--_ctm-dn-ht-se-sw-br) var(--_ctm-dn-ht-se-sw-sd)
+          var(--_ctm-dn-ht-se-sw-cr);
+      }
+    }
+    &[data-hotspot-style-show-border="true"] {
+      .hotspot {
+        border-style: var(--_ctm-dn-ht-se-br-se);
+        border-color: var(--_ctm-dn-ht-se-br-cr);
+        border-width: var(--_ctm-dn-ht-se-br-wh);
+        border-radius: var(--_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));
+      display: flex;
+      flex-direction: column;
+      --_sf-gp: 16px;
+      --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
+      row-gap: var(--_sf-gp);
+      width: 100%;
+      height: 100%;
+      scale: var(--_ctm-dn-ie-se-zm-ie);
+      transition: transform 0.3s ease-in-out;
+      rotate: calc(var(--_ctm-dn-ie-se-ud) * 1deg);
+      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);
+      &:hover {
+        &[data-on-hover="Zoom Out"] {
+          transform: scale(0.9998);
+        }
+        &[data-on-hover="Zoom In"] {
+          transform: scale(1.08);
+        }
+      }
+    }
+
+    .img__overlay {
+      background: var(--_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;
+        span {
+          svg {
+            width: var(--_ctm-dn-ht-se-in-se);
+            height: var(--_ctm-dn-ht-se-in-se);
+            path {
+              stroke: var(--_ctm-dn-ht-se-in-c1);
+            }
+          }
+        }
+        .hotspot {
+          background: var(--_ctm-dn-ht-se-bd-cr);
+          // height: var(--_ctm-dn-tp-tt-dn-ft-se);
+          // width: var(--_ctm-dn-tp-tt-dn-ft-se);
+          position: absolute;
+          cursor: pointer;
+          width: var(--_ctm-dn-ht-se-ht-se);
+          height: var(--_ctm-dn-ht-se-ht-se);
+          background-color: var(--_ctm-dn-ht-se-bd-cr);
+          display: flex;
+          align-items: center;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          box-sizing: border-box;
+          justify-content: center;
+          animation: scaleInOut var(--_ctm-dn-ht-se-an-fy) infinite;
+          &[data-hotspot-shape="circle"] {
+            border-radius: 50%;
+          }
+          &[data-hotspot-shape="any"] {
+            border-radius: var(--_ctm-dn-ht-se-br-rs);
+          }
+        }
+      }
+    }
+  }
+}