@sc-360-v2/storefront-cms-library 0.5.70 → 0.5.71

package/dist/quotes.scss

@@ -1,847 +1,847 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-
-$resizerId: "[data-cms-tool='cms-element-resizer']";
-$resizeActive: '[data-cms-element-resizer="true"]';
-
-// Design > Icon Actions: the CSS-variable scope of each quick action's sub-section,
-// keyed by the class its span carries. `splitCamelCaseAndJoin` turns the schema's
-// selector keys into these codes, e.g. `sendMessageIcon` -> `sd-me-in`.
-$quote-action-icons: (
-  "quotes_send": "sd-me-in",
-  "quotes_download": "dd-in",
-  "quotes_print": "pt-in",
-  "quotes_view": "vw-in",
-  "quotes_cancel": "cl-in",
-);
-[data-div-type="element"] {
-  &[data-element-type="quotes"] {
-    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, var(--_sf-nw-wh)))
-          )
-      )
-    );
-    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
-
-    & > div {
-      &.wrapper {
-        width: prepareMediaVariable(--_ctm-lt-wh);
-        padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-        &[data-divider-type="true"] .metric_item {
-          border: 0px !important;
-          border-top: 2px solid var(--_primary-100) !important;
-          .quotes_wrapper {
-            border: 0px !important;
-          }
-        }
-      }
-    }
-    .embla__container {
-      grid-template-columns: max-content !important;
-      grid-auto-columns: max-content !important;
-
-      .embla__slide {
-        width: max-content !important;
-      }
-    }
-
-    .quotes_wrapper {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      align-self: stretch;
-      //border-radius: 4px;
-      //border: 1px solid var(--_primary-100);
-      //background: #fff;
-      width: 349px;
-      font-family: prepareMediaVariable(--_ctm-dn-wt-se-ft-fy);
-      text-transform: prepareMediaVariable(--_ctm-dn-wt-se-tt-tm);
-      word-wrap: prepareMediaVariable(--_ctm-dn-wt-se-wd-wp);
-      word-break: prepareMediaVariable(--_ctm-dn-wt-se-wd-bk);
-      &.flex__overflow {
-        white-space: normal;
-        @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
-      }
-      font-size: prepareMediaVariable(--_ctm-dn-wt-se-ft-se);
-      color: prepareMediaVariable(--_ctm-dn-wt-se-cr);
-      font-weight: prepareMediaVariable(--_ctm-dn-wt-se-ft-wt);
-      font-style: prepareMediaVariable(--_ctm-dn-wt-se-ft-se-ic);
-      text-decoration: prepareMediaVariable(--_ctm-dn-wt-se-ue);
-      text-align: prepareMediaVariable(--_ctm-dn-wt-se-tt-an);
-      letter-spacing: prepareMediaVariable(--_ctm-dn-wt-se-lr-sg);
-      line-height: prepareMediaVariable(--_ctm-dn-wt-se-le-ht);
-      background-color: prepareMediaVariable(--_ctm-dn-wt-se-bd-cr);
-      border-width: prepareMediaVariable(--_ctm-dn-wt-se-br-wh);
-      border-color: prepareMediaVariable(--_ctm-dn-wt-se-br-cr);
-      border-style: prepareMediaVariable(--_ctm-dn-wt-se-br-se);
-      border-radius: prepareMediaVariable(--_ctm-dn-wt-se-br-rs);
-      box-shadow: prepareMediaVariable(--_ctm-dn-wt-se-sw-ae)
-        prepareMediaVariable(--_ctm-dn-wt-se-sw-br) prepareMediaVariable(--_ctm-dn-wt-se-sw-sd)
-        prepareMediaVariable(--_ctm-dn-wt-se-sw-cr);
-      .quotes_card {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        align-self: stretch;
-        width: 349px;
-
-        .heading_wrapper {
-          display: flex;
-          padding: 16px;
-          align-items: center;
-          gap: 8px;
-          align-self: stretch;
-          //border-bottom: 1px solid var(--_gray-200);
-
-          .heading {
-            // color: var(--_gray-900);
-            // font-size: 20px;
-            // font-weight: 600;
-            // line-height: 30px;
-            font-family: prepareMediaVariable(--_ctm-dn-wt-se-ft-fy);
-            text-transform: prepareMediaVariable(--_ctm-dn-wt-se-tt-tm);
-            word-wrap: prepareMediaVariable(--_ctm-dn-wt-se-wd-wp);
-            word-break: prepareMediaVariable(--_ctm-dn-wt-se-wd-bk);
-            font-size: prepareMediaVariable(--_ctm-dn-wt-se-ft-se);
-            color: prepareMediaVariable(--_ctm-dn-wt-se-cr);
-            font-weight: prepareMediaVariable(--_ctm-dn-wt-se-ft-wt);
-            font-style: prepareMediaVariable(--_ctm-dn-wt-se-ft-se-ic);
-            text-decoration: prepareMediaVariable(--_ctm-dn-wt-se-ue);
-            text-align: prepareMediaVariable(--_ctm-dn-wt-se-tt-an);
-            letter-spacing: prepareMediaVariable(--_ctm-dn-wt-se-lr-sg);
-            line-height: prepareMediaVariable(--_ctm-dn-wt-se-le-ht);
-          }
-        }
-
-        .metric_item {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          flex: 1 0 0;
-          align-self: stretch;
-          //border-radius: 0px 0px 6px 6px;
-
-          background-color: prepareMediaVariable(--_ctm-dn-im-se-bd-cr);
-          border-width: prepareMediaVariable(--_ctm-dn-im-se-br-wh);
-          border-color: prepareMediaVariable(--_ctm-dn-im-se-br-cr);
-          border-style: prepareMediaVariable(--_ctm-dn-im-se-br-se);
-          border-radius: prepareMediaVariable(--_ctm-dn-im-se-br-rs);
-          box-shadow: prepareMediaVariable(--_ctm-dn-im-se-sw-ae)
-            prepareMediaVariable(--_ctm-dn-im-se-sw-br) prepareMediaVariable(--_ctm-dn-im-se-sw-sd)
-            prepareMediaVariable(--_ctm-dn-im-se-sw-cr);
-
-          .content {
-            display: flex;
-            padding: 12px 16px;
-            flex-direction: column;
-            justify-content: center;
-            align-items: flex-start;
-            gap: 12px;
-            flex: 1 0 0;
-            align-self: stretch;
-            font-family: prepareMediaVariable(--_ctm-dn-im-se-ft-fy);
-            text-transform: prepareMediaVariable(--_ctm-dn-im-se-tt-tm);
-            word-wrap: prepareMediaVariable(--_ctm-dn-im-se-wd-wp);
-            word-break: prepareMediaVariable(--_ctm-dn-im-se-wd-bk);
-            &.flex__overflow {
-              white-space: normal;
-              @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
-            }
-            font-size: prepareMediaVariable(--_ctm-dn-im-se-ft-se);
-            color: prepareMediaVariable(--_ctm-dn-im-se-cr);
-            font-weight: prepareMediaVariable(--_ctm-dn-im-se-ft-wt);
-            font-style: prepareMediaVariable(--_ctm-dn-im-se-ft-se-ic);
-            text-decoration: prepareMediaVariable(--_ctm-dn-im-se-ue);
-            text-align: prepareMediaVariable(--_ctm-dn-im-se-tt-an);
-            letter-spacing: prepareMediaVariable(--_ctm-dn-im-se-lr-sg);
-            line-height: prepareMediaVariable(--_ctm-dn-im-se-le-ht);
-
-            .metric_wrapper {
-              display: flex;
-              align-items: center;
-              gap: 16px;
-              flex: 1 0 0;
-              align-self: stretch;
-
-              .quote_id {
-                flex: 1 0 0;
-                // color: var(--_gray-900);
-                // font-size: 14px;
-                // font-weight: 600;
-                // line-height: 20px;
-                font-family: prepareMediaVariable(--_ctm-dn-qe-id-ft-fy);
-                text-transform: prepareMediaVariable(--_ctm-dn-qe-id-tt-tm);
-                word-wrap: prepareMediaVariable(--_ctm-dn-qe-id-wd-wp);
-                word-break: prepareMediaVariable(--_ctm-dn-qe-id-wd-bk);
-                font-size: prepareMediaVariable(--_ctm-dn-qe-id-ft-se);
-                color: prepareMediaVariable(--_ctm-dn-qe-id-cr);
-                font-weight: prepareMediaVariable(--_ctm-dn-qe-id-ft-wt);
-                font-style: prepareMediaVariable(--_ctm-dn-qe-id-ft-se-ic);
-                text-decoration: prepareMediaVariable(--_ctm-dn-qe-id-ue);
-                text-align: prepareMediaVariable(--_ctm-dn-qe-id-tt-an);
-                letter-spacing: prepareMediaVariable(--_ctm-dn-qe-id-lr-sg);
-                line-height: prepareMediaVariable(--_ctm-dn-qe-id-le-ht);
-                background-color: prepareMediaVariable(--_ctm-dn-qe-id-bd-cr);
-                border-width: prepareMediaVariable(--_ctm-dn-qe-id-br-wh);
-                border-color: prepareMediaVariable(--_ctm-dn-qe-id-br-cr);
-                border-style: prepareMediaVariable(--_ctm-dn-qe-id-br-se);
-                border-radius: prepareMediaVariable(--_ctm-dn-qe-id-br-rs);
-                box-shadow: prepareMediaVariable(--_ctm-dn-qe-id-sw-ae)
-                  prepareMediaVariable(--_ctm-dn-qe-id-sw-br)
-                  prepareMediaVariable(--_ctm-dn-qe-id-sw-sd)
-                  prepareMediaVariable(--_ctm-dn-qe-id-sw-cr);
-              }
-
-              .status_badge {
-                display: flex;
-                padding: 2px 8px 2px 6px;
-                align-items: center;
-                gap: 4px;
-                // border-radius: 16px;
-                // background: #fff4ed;
-                mix-blend-mode: multiply;
-                background-color: prepareMediaVariable(--_ctm-dn-qe-ss-bd-cr);
-                border-width: prepareMediaVariable(--_ctm-dn-qe-ss-br-wh);
-                border-color: prepareMediaVariable(--_ctm-dn-qe-ss-br-cr);
-                border-style: prepareMediaVariable(--_ctm-dn-qe-ss-br-se);
-                border-radius: prepareMediaVariable(--_ctm-dn-qe-ss-br-rs);
-                box-shadow: prepareMediaVariable(--_ctm-dn-qe-ss-sw-ae)
-                  prepareMediaVariable(--_ctm-dn-qe-ss-sw-br)
-                  prepareMediaVariable(--_ctm-dn-qe-ss-sw-sd)
-                  prepareMediaVariable(--_ctm-dn-qe-ss-sw-cr);
-
-                .quote_status {
-                  // color: #b93815;
-                  // text-align: center;
-                  // font-size: 12px;
-                  // line-height: 18px;
-                  font-family: prepareMediaVariable(--_ctm-dn-qe-ss-ft-fy);
-                  text-transform: prepareMediaVariable(--_ctm-dn-qe-ss-tt-tm);
-                  word-wrap: prepareMediaVariable(--_ctm-dn-qe-ss-wd-wp);
-                  word-break: prepareMediaVariable(--_ctm-dn-qe-ss-wd-bk);
-                  font-size: prepareMediaVariable(--_ctm-dn-qe-ss-ft-se);
-                  color: prepareMediaVariable(--_ctm-dn-qe-ss-cr);
-                  font-weight: prepareMediaVariable(--_ctm-dn-qe-ss-ft-wt);
-                  font-style: prepareMediaVariable(--_ctm-dn-qe-ss-ft-se-ic);
-                  text-decoration: prepareMediaVariable(--_ctm-dn-qe-ss-ue);
-                  text-align: prepareMediaVariable(--_ctm-dn-qe-ss-tt-an);
-                  letter-spacing: prepareMediaVariable(--_ctm-dn-qe-ss-lr-sg);
-                  line-height: prepareMediaVariable(--_ctm-dn-qe-ss-le-ht);
-                }
-              }
-
-              .quote_updated_date {
-                flex: 1 0 0;
-                // color: var(--_gray-700);
-                // font-size: 12px;
-                // font-weight: 400;
-                // line-height: 18px;
-
-                font-family: prepareMediaVariable(--_ctm-dn-rd-on-ft-fy);
-                text-transform: prepareMediaVariable(--_ctm-dn-rd-on-tt-tm);
-                word-wrap: prepareMediaVariable(--_ctm-dn-rd-on-wd-wp);
-                word-break: prepareMediaVariable(--_ctm-dn-rd-on-wd-bk);
-                font-size: prepareMediaVariable(--_ctm-dn-rd-on-ft-se);
-                color: prepareMediaVariable(--_ctm-dn-rd-on-cr);
-                font-weight: prepareMediaVariable(--_ctm-dn-rd-on-ft-wt);
-                font-style: prepareMediaVariable(--_ctm-dn-rd-on-ft-se-ic);
-                text-decoration: prepareMediaVariable(--_ctm-dn-rd-on-ue);
-                text-align: prepareMediaVariable(--_ctm-dn-rd-on-tt-an);
-                letter-spacing: prepareMediaVariable(--_ctm-dn-rd-on-lr-sg);
-                line-height: prepareMediaVariable(--_ctm-dn-rd-on-le-ht);
-                background-color: prepareMediaVariable(--_ctm-dn-rd-on-bd-cr);
-                border-width: prepareMediaVariable(--_ctm-dn-rd-on-br-wh);
-                border-color: prepareMediaVariable(--_ctm-dn-rd-on-br-cr);
-                border-style: prepareMediaVariable(--_ctm-dn-rd-on-br-se);
-                border-radius: prepareMediaVariable(--_ctm-dn-rd-on-br-rs);
-                box-shadow: prepareMediaVariable(--_ctm-dn-rd-on-sw-ae)
-                  prepareMediaVariable(--_ctm-dn-rd-on-sw-br)
-                  prepareMediaVariable(--_ctm-dn-rd-on-sw-sd)
-                  prepareMediaVariable(--_ctm-dn-rd-on-sw-cr);
-              }
-
-              .quotes_amount {
-                // color: var(--_gray-900);
-                // text-align: right;
-                // font-size: 14px;
-                // font-weight: 600;
-                // line-height: 20px;
-                font-family: prepareMediaVariable(--_ctm-dn-qe-id-ft-fy);
-                text-transform: prepareMediaVariable(--_ctm-dn-qe-id-tt-tm);
-                word-wrap: prepareMediaVariable(--_ctm-dn-qe-id-wd-wp);
-                word-break: prepareMediaVariable(--_ctm-dn-qe-id-wd-bk);
-                font-size: prepareMediaVariable(--_ctm-dn-qe-id-ft-se);
-                color: prepareMediaVariable(--_ctm-dn-qe-id-cr);
-                font-weight: prepareMediaVariable(--_ctm-dn-qe-id-ft-wt);
-                font-style: prepareMediaVariable(--_ctm-dn-qe-id-ft-se-ic);
-                text-decoration: prepareMediaVariable(--_ctm-dn-qe-id-ue);
-                text-align: prepareMediaVariable(--_ctm-dn-qe-id-tt-an);
-                letter-spacing: prepareMediaVariable(--_ctm-dn-qe-id-lr-sg);
-                line-height: prepareMediaVariable(--_ctm-dn-qe-id-le-ht);
-                background-color: prepareMediaVariable(--_ctm-dn-qe-id-bd-cr);
-                border-width: prepareMediaVariable(--_ctm-dn-qe-id-br-wh);
-                border-color: prepareMediaVariable(--_ctm-dn-qe-id-br-cr);
-                border-style: prepareMediaVariable(--_ctm-dn-qe-id-br-se);
-                border-radius: prepareMediaVariable(--_ctm-dn-qe-id-br-rs);
-                box-shadow: prepareMediaVariable(--_ctm-dn-qe-id-sw-ae)
-                  prepareMediaVariable(--_ctm-dn-qe-id-sw-br)
-                  prepareMediaVariable(--_ctm-dn-qe-id-sw-sd)
-                  prepareMediaVariable(--_ctm-dn-qe-id-sw-cr);
-              }
-            }
-            .quotes_action {
-              display: flex;
-              align-items: center;
-              gap: 16px;
-              flex: 1 0 0;
-              align-self: stretch;
-              font-size: 14px;
-              & > span {
-                display: inline-flex;
-                align-items: center;
-                cursor: pointer;
-              }
-
-              // Design > Icons gives each action a tab of its own, so each reads its
-              // own size / color / stroke width rather than one shared set. The
-              // suffixes match the tabs in quotes-element-data.ts: Send, Download,
-              // Print, View, Cancel.
-              // Design > Icon Actions gives each action a sub-section of its own, so
-              // each reads its own size / color / stroke width rather than one shared
-              // set. The codes are what `splitCamelCaseAndJoin` makes of those
-              // sub-sections: sendMessageIcon -> sd-me-in, downloadIcon -> dd-in, and
-              // so on. The fallbacks keep quotes saved before this section looking as
-              // they always have.
-              @each $class, $scope in $quote-action-icons {
-                .#{$class} span svg {
-                  width: prepareMediaVariable(--_ctm-dn-in-as-#{$scope}-in-se, 20px);
-                  height: prepareMediaVariable(--_ctm-dn-in-as-#{$scope}-in-se, 20px);
-
-                  path {
-                    stroke: prepareMediaVariable(--_ctm-dn-in-as-#{$scope}-in-cr, #667085);
-                    // Overrides the stroke-width presentation attribute baked into the icon markup.
-                    stroke-width: prepareMediaVariable(--_ctm-dn-in-as-#{$scope}-se-wh, 1.67);
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    .embla {
-      width: 100%;
-      height: auto;
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      // overflow: hidden;
-
-      .embla__viewport {
-        width: 100%;
-        height: 100%;
-        position: relative;
-        display: flex;
-        flex-direction: column;
-
-        overflow: hidden;
-
-        .embla__container {
-          width: 100%;
-          height: 100%;
-          display: grid;
-          grid-template-rows: 100%;
-
-          grid-template-columns: repeat(
-            var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
-            calc(
-              100% /
-                var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
-            )
-          );
-
-          grid-auto-flow: column;
-          gap: var(--_ctm-mob-lt-sg-bn-is, var(--_ctm-tab-lt-sg-bn-is, var(--_ctm-lt-sg-bn-is)));
-
-          &[data-control-type="Bottom"][data-slider-control="Arrows"] {
-            height: calc(100% - calc(prepareMediaVariable(--_ctm-dn-pn-as-aw-se) + 10px));
-          }
-
-          &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
-            height: calc(
-              100% - calc(
-                  var(
-                      --_ctm-mob-dn-pn-le-le-ht,
-                      var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
-                    ) +
-                    20px
-                )
-            );
-          }
-
-          &[data-control-type="Bottom"][data-slider-control="Dots"] {
-            height: calc(
-              100% - calc(
-                  var(
-                      --_ctm-mob-dn-pn-ds-dt-se,
-                      var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
-                    ) +
-                    20px
-                )
-            );
-          }
-
-          .embla__slide {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-      &:not([data-display-style="Column"]) {
-        .embla__container {
-          grid-auto-columns: calc(
-            100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
-          );
-        }
-      }
-
-      &[data-display-style="Grid"][data-scroll-direction="Vertical"] {
-        // overflow: unset;
-
-        .embla__viewport {
-          overflow: unset;
-          height: 80%;
-          flex-grow: 1;
-          &:not([data-is-builder-type="true"]) {
-            height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
-          }
-
-          .embla__container {
-            overflow: unset;
-            height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
-            // min-height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
-
-            grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), 1fr);
-            grid-template-rows: unset;
-
-            grid-auto-flow: row;
-
-            &[data-overflow-hidden="true"] {
-              overflow: hidden;
-            }
-          }
-        }
-      }
-
-      &[data-display-style="Grid"][data-scroll-direction="Horizontal"] {
-        .embla__viewport {
-          .embla__container {
-            grid-template-rows: repeat(
-              var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))),
-              calc(
-                100% /
-                  var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn)))
-              )
-            );
-          }
-        }
-      }
-
-      &[data-display-style="Rows"] {
-        // overflow: unset;
-
-        .embla__viewport {
-          overflow: unset;
-          height: 80%;
-          flex-grow: 1;
-
-          &:not([data-is-builder-type="true"]) {
-            height: var(--_ctm-height);
-          }
-
-          .embla__container {
-            overflow: hidden;
-            height: var(--_ctm-height);
-            // min-height: var(--_ctm-height);
-
-            grid-template-columns: repeat(
-              var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
-              1fr
-            );
-            grid-template-rows: unset;
-            grid-auto-flow: row;
-          }
-        }
-      }
-
-      &[data-display-style="Column"] {
-        // overflow: unset;
-
-        .embla__viewport {
-          .embla__container {
-            display: flex;
-            .embla__slide {
-              width: unset;
-              height: 100%;
-              aspect-ratio: 1 / 2;
-            }
-          }
-        }
-      }
-
-      .arrow-navigation {
-        display: flex;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        width: 100%;
-        justify-content: space-between;
-        transform: translate(-50%, -50%);
-        //   padding-left: 20px;
-        &[data-control-type="Side"] {
-          .left-button,
-          .right-button {
-            background-color: transparent;
-          }
-        }
-        &[data-background-shape="Round"] {
-          .left-button,
-          .right-button {
-            // Pagination Arrows > Background Color, tinted rather than applied flat:
-            // 10% of the picked color at rest and 20% on hover, so the arrow reads as
-            // a soft chip over the card and the hover is a visible step up. Falls back
-            // to the grey these buttons have always used when no color is picked.
-            @include BgColorLighter(prepareMediaVariable(--_ctm-dn-pn-as-bd-cr, #f2f5f5), 10%);
-
-            // Disabled arrows keep the resting tint — a hover response there would
-            // suggest a slide that cannot be reached.
-            &:not(:disabled):hover {
-              @include BgColorLighter(prepareMediaVariable(--_ctm-dn-pn-as-bd-cr, #f2f5f5), 20%);
-            }
-          }
-        }
-        // Square and None carry the same tint; only the corners differ. The 50% radius
-        // that rounds these buttons is set on `.left-button` / `.right-button` below,
-        // so both shapes have to state their own — 6px for Square, square corners for
-        // None.
-        &[data-background-shape="Square"] {
-          .left-button,
-          .right-button {
-            border-radius: 4px;
-            @include BgColorLighter(prepareMediaVariable(--_ctm-dn-pn-as-bd-cr, #f2f5f5), 10%);
-
-            &:not(:disabled):hover {
-              @include BgColorLighter(prepareMediaVariable(--_ctm-dn-pn-as-bd-cr, #f2f5f5), 20%);
-            }
-          }
-        }
-        &[data-background-shape="None"] {
-          .left-button,
-          .right-button {
-            border-radius: 0;
-            @include BgColorLighter(prepareMediaVariable(--_ctm-dn-pn-as-bd-cr, #f2f5f5), 10%);
-
-            &:not(:disabled):hover {
-              @include BgColorLighter(prepareMediaVariable(--_ctm-dn-pn-as-bd-cr, #f2f5f5), 20%);
-            }
-          }
-        }
-        &[data-control-type="Bottom-Overflow"] {
-          transform: translateX(-50%);
-          width: 100%;
-          justify-content: center;
-          gap: 12px;
-          top: unset;
-          bottom: 6px;
-        }
-        // Side-Overflow keeps the cards full width and lays an arrow over each edge,
-        // which is what the base rules above already do. Stated as its own block so the
-        // option is anchored to a rule rather than working by falling through — the
-        // reason the "Left" and "Right" it replaces were indistinguishable.
-        &[data-control-type="Side-Overflow"] {
-          justify-content: space-between;
-        }
-        &[data-control-type="Bottom"] {
-          transform: unset;
-          position: static;
-          width: 100%;
-          justify-content: center;
-          gap: 12px;
-          margin-top: 10px;
-        }
-        &[data-control-type="Top"] {
-          top: 0px;
-          position: absolute;
-          /* right: 0px; */
-          justify-content: end;
-          width: 170px;
-          transform: unset;
-          gap: 12px;
-          margin-top: 10px;
-        }
-        .left-button {
-          padding: 10px;
-          border-radius: 50%;
-          border: none;
-          width: prepareMediaVariable(--_ctm-dn-pn-as-aw-se);
-          height: prepareMediaVariable(--_ctm-dn-pn-as-aw-se);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
-          outline: none;
-          margin-left: 12px;
-          &:disabled {
-            & svg {
-              path {
-                stroke: rgb(192, 192, 192);
-              }
-            }
-          }
-        }
-        .right-button {
-          border-radius: 50%;
-          border: none;
-          width: prepareMediaVariable(--_ctm-dn-pn-as-aw-se);
-          height: prepareMediaVariable(--_ctm-dn-pn-as-aw-se);
-
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
-          outline: none;
-          margin-right: 12px;
-          padding: 10px;
-
-          &:disabled {
-            & svg {
-              path {
-                stroke: rgb(192, 192, 192);
-              }
-            }
-          }
-        }
-        .icon {
-          display: flex;
-
-          svg {
-            width: calc(prepareMediaVariable(--_ctm-dn-pn-as-aw-se) * 0.5);
-            height: calc(prepareMediaVariable(--_ctm-dn-pn-as-aw-se) * 0.5);
-
-            path {
-              stroke: prepareMediaVariable(--_ctm-dn-pn-as-aw-cr);
-            }
-          }
-        }
-      }
-
-      &[data-control-type="Side"] {
-        .embla__viewport {
-          width: calc(100% - 120px);
-          margin-inline: auto;
-        }
-        .left-button {
-          position: absolute;
-          left: 0;
-          top: 50%;
-          transform: translateY(-50%);
-        }
-        .right-button {
-          position: absolute;
-
-          right: 0;
-          top: 50%;
-          transform: translateY(-50%);
-        }
-      }
-
-      &[data-thumbnail-placement="top"] {
-        flex-direction: column-reverse;
-      }
-      &[data-thumbnail-placement="bottom"] {
-        flex-direction: column;
-      }
-      &[data-thumbnail-placement="left"] {
-        flex-direction: row-reverse;
-
-        .embla__thumbs {
-          width: var(--_ctm-lt-tl-se);
-          height: 100%;
-
-          & .embla__thumbs__container {
-            flex-direction: column;
-            height: 100%;
-          }
-        }
-      }
-      &[data-thumbnail-placement="right"] {
-        flex-direction: row;
-        .embla__thumbs {
-          width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
-
-          height: 100%;
-
-          & .embla__thumbs__container {
-            flex-direction: column;
-            height: 100%;
-          }
-        }
-      }
-      .embla__dots {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        align-items: center;
-        margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
-        gap: 6px;
-
-        &[data-control-type="Bottom-Overflow"] {
-          position: absolute;
-          bottom: 10px;
-          left: 50%;
-          transform: translateX(-50%);
-          width: 75%;
-        }
-        .embla__dot {
-          -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
-          -webkit-appearance: none;
-          appearance: none;
-          background-color: var(
-            --_ctm-mob-dn-pn-ds-or-dt-cr,
-            var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
-          );
-
-          touch-action: manipulation;
-          display: inline-flex;
-          text-decoration: none;
-          cursor: pointer;
-          border: 0;
-          padding: 0;
-          margin: 0;
-          // width: 0.6rem;
-          // height: 0.6rem;
-          width: var(
-            --_ctm-mob-dn-pn-ds-dt-se,
-            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
-          );
-          height: var(
-            --_ctm-mob-dn-pn-ds-dt-se,
-            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
-          );
-
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          border-radius: 50%;
-        }
-        .embla__dot:after {
-          // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
-          width: var(
-            --_ctm-mob-dn-pn-ds-dt-se,
-            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
-          );
-          height: var(
-            --_ctm-mob-dn-pn-ds-dt-se,
-            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
-          );
-
-          border-radius: 50%;
-          display: flex;
-          align-items: center;
-          content: "";
-        }
-        .embla__dot--selected:after {
-          box-shadow: inset 0 0 0 1px var(--text-body);
-          background-color: var(
-            --_ctm-mob-dn-pn-ds-ct-dt-cr,
-            var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
-          );
-        }
-        &[data-slider-control="Pagination Line"] {
-          .embla__dot {
-            width: var(
-              --_ctm-mob-dn-pn-le-le-wh,
-              var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
-            );
-            height: var(
-              --_ctm-mob-dn-pn-le-le-ht,
-              var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
-            );
-            background-color: var(
-              --_ctm-mob-dn-pn-le-or-le-cr,
-              var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
-            );
-            border-radius: 6px;
-          }
-
-          .embla__dot--selected:after {
-            box-shadow: inset 0 0 0 1px var(--text-body);
-            border-radius: 6px;
-            width: var(
-              --_ctm-mob-dn-pn-le-le-wh,
-              var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
-            );
-            height: var(
-              --_ctm-mob-dn-pn-le-le-ht,
-              var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
-            );
-            background-color: var(
-              --_ctm-mob-dn-pn-le-ct-le-cr,
-              var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
-            );
-          }
-        }
-      }
-
-      .embla__thumbs {
-        width: 100%;
-        height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
-
-        position: relative;
-        display: grid;
-        grid-template-columns: 1fr;
-        overflow: hidden;
-        // margin: 10px;
-        padding: 10px;
-
-        .embla__thumbs__viewport {
-          width: 100%;
-          height: 100%;
-          position: relative;
-          display: flex;
-          flex-direction: column;
-
-          overflow: hidden;
-        }
-        .embla__thumbs__container {
-          display: flex;
-          flex-direction: row;
-          margin-left: calc(var(--thumbs-slide-spacing) * -1);
-          gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));
-
-          width: 100%;
-          // justify-content: center;
-          // height: 200px;
-
-          .embla__thumbs__slide {
-            min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
-            max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
-            height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
-
-            & img {
-              width: 100%;
-              height: 100%;
-            }
-          }
-        }
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+
+$resizerId: "[data-cms-tool='cms-element-resizer']";
+$resizeActive: '[data-cms-element-resizer="true"]';
+
+// Design > Icon Actions: the CSS-variable scope of each quick action's sub-section,
+// keyed by the class its span carries. `splitCamelCaseAndJoin` turns the schema's
+// selector keys into these codes, e.g. `sendMessageIcon` -> `sd-me-in`.
+$quote-action-icons: (
+  "quotes_send": "sd-me-in",
+  "quotes_download": "dd-in",
+  "quotes_print": "pt-in",
+  "quotes_view": "vw-in",
+  "quotes_cancel": "cl-in",
+);
+[data-div-type="element"] {
+  &[data-element-type="quotes"] {
+    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, var(--_sf-nw-wh)))
+          )
+      )
+    );
+    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
+
+    & > div {
+      &.wrapper {
+        width: prepareMediaVariable(--_ctm-lt-wh);
+        padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+        &[data-divider-type="true"] .metric_item {
+          border: 0px !important;
+          border-top: 2px solid var(--_primary-100) !important;
+          .quotes_wrapper {
+            border: 0px !important;
+          }
+        }
+      }
+    }
+    .embla__container {
+      grid-template-columns: max-content !important;
+      grid-auto-columns: max-content !important;
+
+      .embla__slide {
+        width: max-content !important;
+      }
+    }
+
+    .quotes_wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      align-self: stretch;
+      //border-radius: 4px;
+      //border: 1px solid var(--_primary-100);
+      //background: #fff;
+      width: 349px;
+      font-family: prepareMediaVariable(--_ctm-dn-wt-se-ft-fy);
+      text-transform: prepareMediaVariable(--_ctm-dn-wt-se-tt-tm);
+      word-wrap: prepareMediaVariable(--_ctm-dn-wt-se-wd-wp);
+      word-break: prepareMediaVariable(--_ctm-dn-wt-se-wd-bk);
+      &.flex__overflow {
+        white-space: normal;
+        @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+      }
+      font-size: prepareMediaVariable(--_ctm-dn-wt-se-ft-se);
+      color: prepareMediaVariable(--_ctm-dn-wt-se-cr);
+      font-weight: prepareMediaVariable(--_ctm-dn-wt-se-ft-wt);
+      font-style: prepareMediaVariable(--_ctm-dn-wt-se-ft-se-ic);
+      text-decoration: prepareMediaVariable(--_ctm-dn-wt-se-ue);
+      text-align: prepareMediaVariable(--_ctm-dn-wt-se-tt-an);
+      letter-spacing: prepareMediaVariable(--_ctm-dn-wt-se-lr-sg);
+      line-height: prepareMediaVariable(--_ctm-dn-wt-se-le-ht);
+      background-color: prepareMediaVariable(--_ctm-dn-wt-se-bd-cr);
+      border-width: prepareMediaVariable(--_ctm-dn-wt-se-br-wh);
+      border-color: prepareMediaVariable(--_ctm-dn-wt-se-br-cr);
+      border-style: prepareMediaVariable(--_ctm-dn-wt-se-br-se);
+      border-radius: prepareMediaVariable(--_ctm-dn-wt-se-br-rs);
+      box-shadow: prepareMediaVariable(--_ctm-dn-wt-se-sw-ae)
+        prepareMediaVariable(--_ctm-dn-wt-se-sw-br) prepareMediaVariable(--_ctm-dn-wt-se-sw-sd)
+        prepareMediaVariable(--_ctm-dn-wt-se-sw-cr);
+      .quotes_card {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        align-self: stretch;
+        width: 349px;
+
+        .heading_wrapper {
+          display: flex;
+          padding: 16px;
+          align-items: center;
+          gap: 8px;
+          align-self: stretch;
+          //border-bottom: 1px solid var(--_gray-200);
+
+          .heading {
+            // color: var(--_gray-900);
+            // font-size: 20px;
+            // font-weight: 600;
+            // line-height: 30px;
+            font-family: prepareMediaVariable(--_ctm-dn-wt-se-ft-fy);
+            text-transform: prepareMediaVariable(--_ctm-dn-wt-se-tt-tm);
+            word-wrap: prepareMediaVariable(--_ctm-dn-wt-se-wd-wp);
+            word-break: prepareMediaVariable(--_ctm-dn-wt-se-wd-bk);
+            font-size: prepareMediaVariable(--_ctm-dn-wt-se-ft-se);
+            color: prepareMediaVariable(--_ctm-dn-wt-se-cr);
+            font-weight: prepareMediaVariable(--_ctm-dn-wt-se-ft-wt);
+            font-style: prepareMediaVariable(--_ctm-dn-wt-se-ft-se-ic);
+            text-decoration: prepareMediaVariable(--_ctm-dn-wt-se-ue);
+            text-align: prepareMediaVariable(--_ctm-dn-wt-se-tt-an);
+            letter-spacing: prepareMediaVariable(--_ctm-dn-wt-se-lr-sg);
+            line-height: prepareMediaVariable(--_ctm-dn-wt-se-le-ht);
+          }
+        }
+
+        .metric_item {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          flex: 1 0 0;
+          align-self: stretch;
+          //border-radius: 0px 0px 6px 6px;
+
+          background-color: prepareMediaVariable(--_ctm-dn-im-se-bd-cr);
+          border-width: prepareMediaVariable(--_ctm-dn-im-se-br-wh);
+          border-color: prepareMediaVariable(--_ctm-dn-im-se-br-cr);
+          border-style: prepareMediaVariable(--_ctm-dn-im-se-br-se);
+          border-radius: prepareMediaVariable(--_ctm-dn-im-se-br-rs);
+          box-shadow: prepareMediaVariable(--_ctm-dn-im-se-sw-ae)
+            prepareMediaVariable(--_ctm-dn-im-se-sw-br) prepareMediaVariable(--_ctm-dn-im-se-sw-sd)
+            prepareMediaVariable(--_ctm-dn-im-se-sw-cr);
+
+          .content {
+            display: flex;
+            padding: 12px 16px;
+            flex-direction: column;
+            justify-content: center;
+            align-items: flex-start;
+            gap: 12px;
+            flex: 1 0 0;
+            align-self: stretch;
+            font-family: prepareMediaVariable(--_ctm-dn-im-se-ft-fy);
+            text-transform: prepareMediaVariable(--_ctm-dn-im-se-tt-tm);
+            word-wrap: prepareMediaVariable(--_ctm-dn-im-se-wd-wp);
+            word-break: prepareMediaVariable(--_ctm-dn-im-se-wd-bk);
+            &.flex__overflow {
+              white-space: normal;
+              @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+            }
+            font-size: prepareMediaVariable(--_ctm-dn-im-se-ft-se);
+            color: prepareMediaVariable(--_ctm-dn-im-se-cr);
+            font-weight: prepareMediaVariable(--_ctm-dn-im-se-ft-wt);
+            font-style: prepareMediaVariable(--_ctm-dn-im-se-ft-se-ic);
+            text-decoration: prepareMediaVariable(--_ctm-dn-im-se-ue);
+            text-align: prepareMediaVariable(--_ctm-dn-im-se-tt-an);
+            letter-spacing: prepareMediaVariable(--_ctm-dn-im-se-lr-sg);
+            line-height: prepareMediaVariable(--_ctm-dn-im-se-le-ht);
+
+            .metric_wrapper {
+              display: flex;
+              align-items: center;
+              gap: 16px;
+              flex: 1 0 0;
+              align-self: stretch;
+
+              .quote_id {
+                flex: 1 0 0;
+                // color: var(--_gray-900);
+                // font-size: 14px;
+                // font-weight: 600;
+                // line-height: 20px;
+                font-family: prepareMediaVariable(--_ctm-dn-qe-id-ft-fy);
+                text-transform: prepareMediaVariable(--_ctm-dn-qe-id-tt-tm);
+                word-wrap: prepareMediaVariable(--_ctm-dn-qe-id-wd-wp);
+                word-break: prepareMediaVariable(--_ctm-dn-qe-id-wd-bk);
+                font-size: prepareMediaVariable(--_ctm-dn-qe-id-ft-se);
+                color: prepareMediaVariable(--_ctm-dn-qe-id-cr);
+                font-weight: prepareMediaVariable(--_ctm-dn-qe-id-ft-wt);
+                font-style: prepareMediaVariable(--_ctm-dn-qe-id-ft-se-ic);
+                text-decoration: prepareMediaVariable(--_ctm-dn-qe-id-ue);
+                text-align: prepareMediaVariable(--_ctm-dn-qe-id-tt-an);
+                letter-spacing: prepareMediaVariable(--_ctm-dn-qe-id-lr-sg);
+                line-height: prepareMediaVariable(--_ctm-dn-qe-id-le-ht);
+                background-color: prepareMediaVariable(--_ctm-dn-qe-id-bd-cr);
+                border-width: prepareMediaVariable(--_ctm-dn-qe-id-br-wh);
+                border-color: prepareMediaVariable(--_ctm-dn-qe-id-br-cr);
+                border-style: prepareMediaVariable(--_ctm-dn-qe-id-br-se);
+                border-radius: prepareMediaVariable(--_ctm-dn-qe-id-br-rs);
+                box-shadow: prepareMediaVariable(--_ctm-dn-qe-id-sw-ae)
+                  prepareMediaVariable(--_ctm-dn-qe-id-sw-br)
+                  prepareMediaVariable(--_ctm-dn-qe-id-sw-sd)
+                  prepareMediaVariable(--_ctm-dn-qe-id-sw-cr);
+              }
+
+              .status_badge {
+                display: flex;
+                padding: 2px 8px 2px 6px;
+                align-items: center;
+                gap: 4px;
+                // border-radius: 16px;
+                // background: #fff4ed;
+                mix-blend-mode: multiply;
+                background-color: prepareMediaVariable(--_ctm-dn-qe-ss-bd-cr);
+                border-width: prepareMediaVariable(--_ctm-dn-qe-ss-br-wh);
+                border-color: prepareMediaVariable(--_ctm-dn-qe-ss-br-cr);
+                border-style: prepareMediaVariable(--_ctm-dn-qe-ss-br-se);
+                border-radius: prepareMediaVariable(--_ctm-dn-qe-ss-br-rs);
+                box-shadow: prepareMediaVariable(--_ctm-dn-qe-ss-sw-ae)
+                  prepareMediaVariable(--_ctm-dn-qe-ss-sw-br)
+                  prepareMediaVariable(--_ctm-dn-qe-ss-sw-sd)
+                  prepareMediaVariable(--_ctm-dn-qe-ss-sw-cr);
+
+                .quote_status {
+                  // color: #b93815;
+                  // text-align: center;
+                  // font-size: 12px;
+                  // line-height: 18px;
+                  font-family: prepareMediaVariable(--_ctm-dn-qe-ss-ft-fy);
+                  text-transform: prepareMediaVariable(--_ctm-dn-qe-ss-tt-tm);
+                  word-wrap: prepareMediaVariable(--_ctm-dn-qe-ss-wd-wp);
+                  word-break: prepareMediaVariable(--_ctm-dn-qe-ss-wd-bk);
+                  font-size: prepareMediaVariable(--_ctm-dn-qe-ss-ft-se);
+                  color: prepareMediaVariable(--_ctm-dn-qe-ss-cr);
+                  font-weight: prepareMediaVariable(--_ctm-dn-qe-ss-ft-wt);
+                  font-style: prepareMediaVariable(--_ctm-dn-qe-ss-ft-se-ic);
+                  text-decoration: prepareMediaVariable(--_ctm-dn-qe-ss-ue);
+                  text-align: prepareMediaVariable(--_ctm-dn-qe-ss-tt-an);
+                  letter-spacing: prepareMediaVariable(--_ctm-dn-qe-ss-lr-sg);
+                  line-height: prepareMediaVariable(--_ctm-dn-qe-ss-le-ht);
+                }
+              }
+
+              .quote_updated_date {
+                flex: 1 0 0;
+                // color: var(--_gray-700);
+                // font-size: 12px;
+                // font-weight: 400;
+                // line-height: 18px;
+
+                font-family: prepareMediaVariable(--_ctm-dn-rd-on-ft-fy);
+                text-transform: prepareMediaVariable(--_ctm-dn-rd-on-tt-tm);
+                word-wrap: prepareMediaVariable(--_ctm-dn-rd-on-wd-wp);
+                word-break: prepareMediaVariable(--_ctm-dn-rd-on-wd-bk);
+                font-size: prepareMediaVariable(--_ctm-dn-rd-on-ft-se);
+                color: prepareMediaVariable(--_ctm-dn-rd-on-cr);
+                font-weight: prepareMediaVariable(--_ctm-dn-rd-on-ft-wt);
+                font-style: prepareMediaVariable(--_ctm-dn-rd-on-ft-se-ic);
+                text-decoration: prepareMediaVariable(--_ctm-dn-rd-on-ue);
+                text-align: prepareMediaVariable(--_ctm-dn-rd-on-tt-an);
+                letter-spacing: prepareMediaVariable(--_ctm-dn-rd-on-lr-sg);
+                line-height: prepareMediaVariable(--_ctm-dn-rd-on-le-ht);
+                background-color: prepareMediaVariable(--_ctm-dn-rd-on-bd-cr);
+                border-width: prepareMediaVariable(--_ctm-dn-rd-on-br-wh);
+                border-color: prepareMediaVariable(--_ctm-dn-rd-on-br-cr);
+                border-style: prepareMediaVariable(--_ctm-dn-rd-on-br-se);
+                border-radius: prepareMediaVariable(--_ctm-dn-rd-on-br-rs);
+                box-shadow: prepareMediaVariable(--_ctm-dn-rd-on-sw-ae)
+                  prepareMediaVariable(--_ctm-dn-rd-on-sw-br)
+                  prepareMediaVariable(--_ctm-dn-rd-on-sw-sd)
+                  prepareMediaVariable(--_ctm-dn-rd-on-sw-cr);
+              }
+
+              .quotes_amount {
+                // color: var(--_gray-900);
+                // text-align: right;
+                // font-size: 14px;
+                // font-weight: 600;
+                // line-height: 20px;
+                font-family: prepareMediaVariable(--_ctm-dn-qe-id-ft-fy);
+                text-transform: prepareMediaVariable(--_ctm-dn-qe-id-tt-tm);
+                word-wrap: prepareMediaVariable(--_ctm-dn-qe-id-wd-wp);
+                word-break: prepareMediaVariable(--_ctm-dn-qe-id-wd-bk);
+                font-size: prepareMediaVariable(--_ctm-dn-qe-id-ft-se);
+                color: prepareMediaVariable(--_ctm-dn-qe-id-cr);
+                font-weight: prepareMediaVariable(--_ctm-dn-qe-id-ft-wt);
+                font-style: prepareMediaVariable(--_ctm-dn-qe-id-ft-se-ic);
+                text-decoration: prepareMediaVariable(--_ctm-dn-qe-id-ue);
+                text-align: prepareMediaVariable(--_ctm-dn-qe-id-tt-an);
+                letter-spacing: prepareMediaVariable(--_ctm-dn-qe-id-lr-sg);
+                line-height: prepareMediaVariable(--_ctm-dn-qe-id-le-ht);
+                background-color: prepareMediaVariable(--_ctm-dn-qe-id-bd-cr);
+                border-width: prepareMediaVariable(--_ctm-dn-qe-id-br-wh);
+                border-color: prepareMediaVariable(--_ctm-dn-qe-id-br-cr);
+                border-style: prepareMediaVariable(--_ctm-dn-qe-id-br-se);
+                border-radius: prepareMediaVariable(--_ctm-dn-qe-id-br-rs);
+                box-shadow: prepareMediaVariable(--_ctm-dn-qe-id-sw-ae)
+                  prepareMediaVariable(--_ctm-dn-qe-id-sw-br)
+                  prepareMediaVariable(--_ctm-dn-qe-id-sw-sd)
+                  prepareMediaVariable(--_ctm-dn-qe-id-sw-cr);
+              }
+            }
+            .quotes_action {
+              display: flex;
+              align-items: center;
+              gap: 16px;
+              flex: 1 0 0;
+              align-self: stretch;
+              font-size: 14px;
+              & > span {
+                display: inline-flex;
+                align-items: center;
+                cursor: pointer;
+              }
+
+              // Design > Icons gives each action a tab of its own, so each reads its
+              // own size / color / stroke width rather than one shared set. The
+              // suffixes match the tabs in quotes-element-data.ts: Send, Download,
+              // Print, View, Cancel.
+              // Design > Icon Actions gives each action a sub-section of its own, so
+              // each reads its own size / color / stroke width rather than one shared
+              // set. The codes are what `splitCamelCaseAndJoin` makes of those
+              // sub-sections: sendMessageIcon -> sd-me-in, downloadIcon -> dd-in, and
+              // so on. The fallbacks keep quotes saved before this section looking as
+              // they always have.
+              @each $class, $scope in $quote-action-icons {
+                .#{$class} span svg {
+                  width: prepareMediaVariable(--_ctm-dn-in-as-#{$scope}-in-se, 20px);
+                  height: prepareMediaVariable(--_ctm-dn-in-as-#{$scope}-in-se, 20px);
+
+                  path {
+                    stroke: prepareMediaVariable(--_ctm-dn-in-as-#{$scope}-in-cr, #667085);
+                    // Overrides the stroke-width presentation attribute baked into the icon markup.
+                    stroke-width: prepareMediaVariable(--_ctm-dn-in-as-#{$scope}-se-wh, 1.67);
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .embla {
+      width: 100%;
+      height: auto;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      // overflow: hidden;
+
+      .embla__viewport {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+
+        overflow: hidden;
+
+        .embla__container {
+          width: 100%;
+          height: 100%;
+          display: grid;
+          grid-template-rows: 100%;
+
+          grid-template-columns: repeat(
+            var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
+            calc(
+              100% /
+                var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
+            )
+          );
+
+          grid-auto-flow: column;
+          gap: var(--_ctm-mob-lt-sg-bn-is, var(--_ctm-tab-lt-sg-bn-is, var(--_ctm-lt-sg-bn-is)));
+
+          &[data-control-type="Bottom"][data-slider-control="Arrows"] {
+            height: calc(100% - calc(prepareMediaVariable(--_ctm-dn-pn-as-aw-se) + 10px));
+          }
+
+          &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
+            height: calc(
+              100% - calc(
+                  var(
+                      --_ctm-mob-dn-pn-le-le-ht,
+                      var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
+                    ) +
+                    20px
+                )
+            );
+          }
+
+          &[data-control-type="Bottom"][data-slider-control="Dots"] {
+            height: calc(
+              100% - calc(
+                  var(
+                      --_ctm-mob-dn-pn-ds-dt-se,
+                      var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
+                    ) +
+                    20px
+                )
+            );
+          }
+
+          .embla__slide {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+      &:not([data-display-style="Column"]) {
+        .embla__container {
+          grid-auto-columns: calc(
+            100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
+          );
+        }
+      }
+
+      &[data-display-style="Grid"][data-scroll-direction="Vertical"] {
+        // overflow: unset;
+
+        .embla__viewport {
+          overflow: unset;
+          height: 80%;
+          flex-grow: 1;
+          &:not([data-is-builder-type="true"]) {
+            height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
+          }
+
+          .embla__container {
+            overflow: unset;
+            height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
+            // min-height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
+
+            grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), 1fr);
+            grid-template-rows: unset;
+
+            grid-auto-flow: row;
+
+            &[data-overflow-hidden="true"] {
+              overflow: hidden;
+            }
+          }
+        }
+      }
+
+      &[data-display-style="Grid"][data-scroll-direction="Horizontal"] {
+        .embla__viewport {
+          .embla__container {
+            grid-template-rows: repeat(
+              var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))),
+              calc(
+                100% /
+                  var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn)))
+              )
+            );
+          }
+        }
+      }
+
+      &[data-display-style="Rows"] {
+        // overflow: unset;
+
+        .embla__viewport {
+          overflow: unset;
+          height: 80%;
+          flex-grow: 1;
+
+          &:not([data-is-builder-type="true"]) {
+            height: var(--_ctm-height);
+          }
+
+          .embla__container {
+            overflow: hidden;
+            height: var(--_ctm-height);
+            // min-height: var(--_ctm-height);
+
+            grid-template-columns: repeat(
+              var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
+              1fr
+            );
+            grid-template-rows: unset;
+            grid-auto-flow: row;
+          }
+        }
+      }
+
+      &[data-display-style="Column"] {
+        // overflow: unset;
+
+        .embla__viewport {
+          .embla__container {
+            display: flex;
+            .embla__slide {
+              width: unset;
+              height: 100%;
+              aspect-ratio: 1 / 2;
+            }
+          }
+        }
+      }
+
+      .arrow-navigation {
+        display: flex;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 100%;
+        justify-content: space-between;
+        transform: translate(-50%, -50%);
+        //   padding-left: 20px;
+        &[data-control-type="Side"] {
+          .left-button,
+          .right-button {
+            background-color: transparent;
+          }
+        }
+        &[data-background-shape="Round"] {
+          .left-button,
+          .right-button {
+            // Pagination Arrows > Background Color, tinted rather than applied flat:
+            // 10% of the picked color at rest and 20% on hover, so the arrow reads as
+            // a soft chip over the card and the hover is a visible step up. Falls back
+            // to the grey these buttons have always used when no color is picked.
+            @include BgColorLighter(prepareMediaVariable(--_ctm-dn-pn-as-bd-cr, #f2f5f5), 10%);
+
+            // Disabled arrows keep the resting tint — a hover response there would
+            // suggest a slide that cannot be reached.
+            &:not(:disabled):hover {
+              @include BgColorLighter(prepareMediaVariable(--_ctm-dn-pn-as-bd-cr, #f2f5f5), 20%);
+            }
+          }
+        }
+        // Square and None carry the same tint; only the corners differ. The 50% radius
+        // that rounds these buttons is set on `.left-button` / `.right-button` below,
+        // so both shapes have to state their own — 6px for Square, square corners for
+        // None.
+        &[data-background-shape="Square"] {
+          .left-button,
+          .right-button {
+            border-radius: 4px;
+            @include BgColorLighter(prepareMediaVariable(--_ctm-dn-pn-as-bd-cr, #f2f5f5), 10%);
+
+            &:not(:disabled):hover {
+              @include BgColorLighter(prepareMediaVariable(--_ctm-dn-pn-as-bd-cr, #f2f5f5), 20%);
+            }
+          }
+        }
+        &[data-background-shape="None"] {
+          .left-button,
+          .right-button {
+            border-radius: 0;
+            @include BgColorLighter(prepareMediaVariable(--_ctm-dn-pn-as-bd-cr, #f2f5f5), 10%);
+
+            &:not(:disabled):hover {
+              @include BgColorLighter(prepareMediaVariable(--_ctm-dn-pn-as-bd-cr, #f2f5f5), 20%);
+            }
+          }
+        }
+        &[data-control-type="Bottom-Overflow"] {
+          transform: translateX(-50%);
+          width: 100%;
+          justify-content: center;
+          gap: 12px;
+          top: unset;
+          bottom: 6px;
+        }
+        // Side-Overflow keeps the cards full width and lays an arrow over each edge,
+        // which is what the base rules above already do. Stated as its own block so the
+        // option is anchored to a rule rather than working by falling through — the
+        // reason the "Left" and "Right" it replaces were indistinguishable.
+        &[data-control-type="Side-Overflow"] {
+          justify-content: space-between;
+        }
+        &[data-control-type="Bottom"] {
+          transform: unset;
+          position: static;
+          width: 100%;
+          justify-content: center;
+          gap: 12px;
+          margin-top: 10px;
+        }
+        &[data-control-type="Top"] {
+          top: 0px;
+          position: absolute;
+          /* right: 0px; */
+          justify-content: end;
+          width: 170px;
+          transform: unset;
+          gap: 12px;
+          margin-top: 10px;
+        }
+        .left-button {
+          padding: 10px;
+          border-radius: 50%;
+          border: none;
+          width: prepareMediaVariable(--_ctm-dn-pn-as-aw-se);
+          height: prepareMediaVariable(--_ctm-dn-pn-as-aw-se);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          outline: none;
+          margin-left: 12px;
+          &:disabled {
+            & svg {
+              path {
+                stroke: rgb(192, 192, 192);
+              }
+            }
+          }
+        }
+        .right-button {
+          border-radius: 50%;
+          border: none;
+          width: prepareMediaVariable(--_ctm-dn-pn-as-aw-se);
+          height: prepareMediaVariable(--_ctm-dn-pn-as-aw-se);
+
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          outline: none;
+          margin-right: 12px;
+          padding: 10px;
+
+          &:disabled {
+            & svg {
+              path {
+                stroke: rgb(192, 192, 192);
+              }
+            }
+          }
+        }
+        .icon {
+          display: flex;
+
+          svg {
+            width: calc(prepareMediaVariable(--_ctm-dn-pn-as-aw-se) * 0.5);
+            height: calc(prepareMediaVariable(--_ctm-dn-pn-as-aw-se) * 0.5);
+
+            path {
+              stroke: prepareMediaVariable(--_ctm-dn-pn-as-aw-cr);
+            }
+          }
+        }
+      }
+
+      &[data-control-type="Side"] {
+        .embla__viewport {
+          width: calc(100% - 120px);
+          margin-inline: auto;
+        }
+        .left-button {
+          position: absolute;
+          left: 0;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+        .right-button {
+          position: absolute;
+
+          right: 0;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+      }
+
+      &[data-thumbnail-placement="top"] {
+        flex-direction: column-reverse;
+      }
+      &[data-thumbnail-placement="bottom"] {
+        flex-direction: column;
+      }
+      &[data-thumbnail-placement="left"] {
+        flex-direction: row-reverse;
+
+        .embla__thumbs {
+          width: var(--_ctm-lt-tl-se);
+          height: 100%;
+
+          & .embla__thumbs__container {
+            flex-direction: column;
+            height: 100%;
+          }
+        }
+      }
+      &[data-thumbnail-placement="right"] {
+        flex-direction: row;
+        .embla__thumbs {
+          width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+
+          height: 100%;
+
+          & .embla__thumbs__container {
+            flex-direction: column;
+            height: 100%;
+          }
+        }
+      }
+      .embla__dots {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
+        gap: 6px;
+
+        &[data-control-type="Bottom-Overflow"] {
+          position: absolute;
+          bottom: 10px;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 75%;
+        }
+        .embla__dot {
+          -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
+          -webkit-appearance: none;
+          appearance: none;
+          background-color: var(
+            --_ctm-mob-dn-pn-ds-or-dt-cr,
+            var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
+          );
+
+          touch-action: manipulation;
+          display: inline-flex;
+          text-decoration: none;
+          cursor: pointer;
+          border: 0;
+          padding: 0;
+          margin: 0;
+          // width: 0.6rem;
+          // height: 0.6rem;
+          width: var(
+            --_ctm-mob-dn-pn-ds-dt-se,
+            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
+          );
+          height: var(
+            --_ctm-mob-dn-pn-ds-dt-se,
+            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
+          );
+
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 50%;
+        }
+        .embla__dot:after {
+          // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
+          width: var(
+            --_ctm-mob-dn-pn-ds-dt-se,
+            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
+          );
+          height: var(
+            --_ctm-mob-dn-pn-ds-dt-se,
+            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
+          );
+
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          content: "";
+        }
+        .embla__dot--selected:after {
+          box-shadow: inset 0 0 0 1px var(--text-body);
+          background-color: var(
+            --_ctm-mob-dn-pn-ds-ct-dt-cr,
+            var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
+          );
+        }
+        &[data-slider-control="Pagination Line"] {
+          .embla__dot {
+            width: var(
+              --_ctm-mob-dn-pn-le-le-wh,
+              var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
+            );
+            height: var(
+              --_ctm-mob-dn-pn-le-le-ht,
+              var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
+            );
+            background-color: var(
+              --_ctm-mob-dn-pn-le-or-le-cr,
+              var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
+            );
+            border-radius: 6px;
+          }
+
+          .embla__dot--selected:after {
+            box-shadow: inset 0 0 0 1px var(--text-body);
+            border-radius: 6px;
+            width: var(
+              --_ctm-mob-dn-pn-le-le-wh,
+              var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
+            );
+            height: var(
+              --_ctm-mob-dn-pn-le-le-ht,
+              var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
+            );
+            background-color: var(
+              --_ctm-mob-dn-pn-le-ct-le-cr,
+              var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
+            );
+          }
+        }
+      }
+
+      .embla__thumbs {
+        width: 100%;
+        height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+
+        position: relative;
+        display: grid;
+        grid-template-columns: 1fr;
+        overflow: hidden;
+        // margin: 10px;
+        padding: 10px;
+
+        .embla__thumbs__viewport {
+          width: 100%;
+          height: 100%;
+          position: relative;
+          display: flex;
+          flex-direction: column;
+
+          overflow: hidden;
+        }
+        .embla__thumbs__container {
+          display: flex;
+          flex-direction: row;
+          margin-left: calc(var(--thumbs-slide-spacing) * -1);
+          gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));
+
+          width: 100%;
+          // justify-content: center;
+          // height: 200px;
+
+          .embla__thumbs__slide {
+            min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+            max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+            height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+
+            & img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+      }
+    }
+  }
+}