@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%; } } } } } } }