@use "./functions.scss" as *; // The value text inside a swatch moved out of design.optionValueStyle into its own // schema, design.optionValueTextStyle, so the box and the text are edited from separate // accordions. Pages saved before the split still carry the typography keys under the old // section, so every value-text property resolves the new variable first and falls back to // the old one — both across breakpoints. @function optionValueTextVar($newVar, $legacyVar) { @return prepareMediaVariable($newVar, prepareMediaVariable($legacyVar)); } // The value text's typography is not state-aware — the Option Value Text Style panel has // no Default / Hover / Selected picker — so its keys sit flat on optionValueTextStyle // rather than under defaultState. Three shapes can be on disk, so resolve in order: the // flat variable, then the defaultState-nested one saved while the section still had the // picker, then the pre-split optionValueStyle.defaultState one. @function optionValueTextDefaultVar($flatVar, $stateVar, $legacyVar) { @return prepareMediaVariable( $flatVar, prepareMediaVariable($stateVar, prepareMediaVariable($legacyVar)) ); } // Verbatim copy of the ProductOptions swatch styling (styles/elements/product-options.scss), // rebound to the Category Groups productOptions design/layout CSS-variable paths. // ONLY the variable paths differ from product-options.scss — keep the two in sync. // @imported inside category-groups-element.scss within the categoryGroups scope. .product__option__element { display: flex; flex-direction: column; min-height: 30px; gap: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-lt-on-te-ve-sg, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-lt-on-te-ve-sg, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-lt-on-te-ve-sg)) ); background-color: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-wt-se-bd-cr, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-wt-se-bd-cr, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-wt-se-bd-cr)) ); padding: var(--_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-lt-pg, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-lt-pg, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-lt-pg))); width: 100%; // height: 100%; border-color: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-wt-se-br-cr, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-wt-se-br-cr, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-wt-se-br-cr)) ); border-style: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-wt-se-br-se, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-wt-se-br-se, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-wt-se-br-se)) ); border-width: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-wt-se-br-wh, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-wt-se-br-wh, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-wt-se-br-wh)) ); border-radius: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-wt-se-br-rs, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-wt-se-br-rs, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-wt-se-br-rs)) ); box-shadow: var( --_show-shadow, var(--_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-wt-se-sw-ae, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-wt-se-sw-ae, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-wt-se-sw-ae))) var(--_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-wt-se-sw-br, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-wt-se-sw-br, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-wt-se-sw-br))) var(--_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-wt-se-sw-sd, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-wt-se-sw-sd, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-wt-se-sw-sd))) var(--_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-wt-se-sw-cr, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-wt-se-sw-cr, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-wt-se-sw-cr))) ); .title { margin-bottom: 4px; color: var(--_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-cr, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-cr, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-cr))); font-family: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-ft-fy, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-ft-fy, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-ft-fy)) ); text-transform: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-tt-tm, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-tt-tm, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-tt-tm)) ); word-wrap: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-wd-wp, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-wd-wp, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-wd-wp)) ); word-break: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-wd-bk, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-wd-bk, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-wd-bk)) ); font-size: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-ft-se, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-ft-se, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-ft-se)) ); font-weight: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-ft-wt, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-ft-wt, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-ft-wt)) ); font-style: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-ft-se-ic, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-ft-se-ic, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-ft-se-ic)) ); text-align: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-tt-an, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-tt-an, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-tt-an)) ); letter-spacing: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-lr-sg, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-lr-sg, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-lr-sg)) ); line-height: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-le-ht, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-le-ht, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-le-ht)) ); text-decoration: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-ue, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-ue, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-ue)) ); // design.optionTitle container styling. The title is its own design schema, so it // carries the same Fill / Border / Border Radius / Shadow set as the value box. background-color: prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-bd-cr, transparent); border-color: prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-br-cr); border-style: prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-br-se); border-width: prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-br-wh, 0px); border-radius: prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-br-rs, 0px); // Same --_show-shadow gate the widget container uses in this file. box-shadow: var( --_show-shadow, prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-sw-ae) prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-sw-br) prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-sw-sd) prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-te-sw-cr) ); // Text Overflow is a `controls` property, not a CSS one, so it cannot travel as a // variable — the renderer adds `.flex__overflow` and publishes the line count as // `--_sf-line-clamp`. &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } } .product__option__element__swatch { display: flex; align-items: flex-start; gap: 10px; gap: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-lt-on-te-ve-sg, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-lt-on-te-ve-sg, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-lt-on-te-ve-sg)) ); // margin-top: 20px; .swatch__list { display: flex; gap: var(--_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-lt-sh-im-sg, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-lt-sh-im-sg, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-lt-sh-im-sg))); width: 100%; // &[data-wrap-items="true"] { // flex-wrap: wrap; // } // flex-wrap: wrap; } &[data-overflow-items="Wrap"] { .swatch__list { flex-wrap: wrap; } } &[data-overflow-items="Scroll"] { .swatch__list { overflow-x: auto; // Gap (layout.swatchScrollGap): clearance between the swatches and the // scrollbar this mode adds underneath. Padding inside the scrolling box, so // it holds the items off the scrollbar rather than widening the element. padding-bottom: prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-lt-sh-sl-gp, 0px); // overflow-y: hidden; flex-wrap: nowrap; } } } .swatch__item:hover { --_sf-hr-bd-cr: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-bd-cr, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-bd-cr, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-bd-cr)) ); --_sf-hr-br-cr: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-br-cr, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-br-cr, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-br-cr)) ); --_sf-hr-br-se: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-br-se, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-br-se, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-br-se)) ); --_sf-hr-br-wh: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-br-wh, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-br-wh, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-br-wh)) ); --_sf-hr-br-rs: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-br-rs, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-br-rs, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-br-rs)) ); // for shadow --_sf-hr-sw-ae: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-sw-ae, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-sw-ae, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-sw-ae)) ); --_sf-hr-sw-br: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-sw-br, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-sw-br, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-sw-br)) ); --_sf-hr-sw-hr: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-sw-hr, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-sw-hr, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-sw-hr)) ); --_sf-hr-sw-cr: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-sw-cr, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-sw-cr, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-sw-cr)) ); // for font --_sf-hr-cr: #{optionValueTextVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-hr-se-cr, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-cr)}; --_sf-hr-ft-fy: #{optionValueTextVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-hr-se-ft-fy, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-ft-fy)}; --_sf-hr-tt-tm: #{optionValueTextVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-hr-se-tt-tm, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-tt-tm)}; --_sf-hr-wd-wp: #{optionValueTextVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-hr-se-wd-wp, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-wd-wp)}; --_sf-hr-wd-bk: #{optionValueTextVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-hr-se-wd-bk, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-wd-bk)}; --_sf-hr-ft-se: #{optionValueTextVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-hr-se-ft-se, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-ft-se)}; --_sf-hr-ft-wt: #{optionValueTextVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-hr-se-ft-wt, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-ft-wt)}; --_sf-hr-ft-se-ic: #{optionValueTextVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-hr-se-ft-se-ic, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-ft-se-ic)}; --_sf-hr-tt-an: #{optionValueTextVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-hr-se-tt-an, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-tt-an)}; --_sf-hr-lr-sg: #{optionValueTextVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-hr-se-lr-sg, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-lr-sg)}; --_sf-hr-le-ht: #{optionValueTextVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-hr-se-le-ht, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-le-ht)}; --_sf-hr-ue: #{optionValueTextVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-hr-se-ue, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-hr-se-ue)}; } .swatch__item[data-selected="true"] { --_sf-sd-bd-cr: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-bd-cr, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-bd-cr, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-bd-cr)) ); --_sf-sd-br-cr: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-br-cr, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-br-cr, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-br-cr)) ); --_sf-sd-br-se: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-br-se, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-br-se, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-br-se)) ); --_sf-sd-br-wh: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-br-wh, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-br-wh, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-br-wh)) ); // new --_sf-sd-sw-ae: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-sw-ae, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-sw-ae, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-sw-ae)) ); --_sf-sd-sw-br: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-sw-br, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-sw-br, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-sw-br)) ); --_sf-sd-sw-sd: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-sw-sd, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-sw-sd, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-sw-sd)) ); --_sf-sd-sw-cr: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-sw-cr, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-sw-cr, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-sw-cr)) ); // for font --_sf-hr-cr: #{optionValueTextVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-sd-se-cr, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-cr)}; --_sf-hr-ft-fy: #{optionValueTextVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-sd-se-ft-fy, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-ft-fy)}; --_sf-hr-tt-tm: #{optionValueTextVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-sd-se-tt-tm, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-tt-tm)}; --_sf-hr-wd-wp: #{optionValueTextVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-sd-se-wd-wp, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-wd-wp)}; --_sf-hr-wd-bk: #{optionValueTextVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-sd-se-wd-bk, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-wd-bk)}; --_sf-hr-ft-se: #{optionValueTextVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-sd-se-ft-se, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-ft-se)}; --_sf-hr-ft-wt: #{optionValueTextVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-sd-se-ft-wt, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-ft-wt)}; --_sf-hr-ft-se-ic: #{optionValueTextVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-sd-se-ft-se-ic, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-ft-se-ic)}; --_sf-hr-tt-an: #{optionValueTextVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-sd-se-tt-an, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-tt-an)}; --_sf-hr-lr-sg: #{optionValueTextVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-sd-se-lr-sg, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-lr-sg)}; --_sf-hr-le-ht: #{optionValueTextVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-sd-se-le-ht, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-le-ht)}; --_sf-hr-ue: #{optionValueTextVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-sd-se-ue, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-sd-se-ue)}; } .swatch__item { text-align: center; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: width 0.3s ease; // border: 1px solid gray; width: prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-lt-sh-im-se, 20px); height: prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-lt-sh-im-se, 20px); // A Single Select value is text, not a swatch image. `white-space: nowrap` on // .option__value__text keeps it on one line, but this box is fixed-size with // overflow:hidden, so a value wider than Swatch Item Size was clipped instead. // Grow to the content and keep Swatch Item Size as the floor, so short values look // exactly as before and only the ones that would have been cut off get wider. &[data-display-style="Single Select"] { width: auto; height: auto; min-width: prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-lt-sh-im-se, 20px); min-height: prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-lt-sh-im-se, 20px); } // &[data-display-style="Swatch"] { // height: prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-lt-sh-im-se); // width: prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-lt-sh-im-se); // } // &[data-display-style="Single Select"] { // // min-width: 20px; // // min-height: 20px; // box-sizing: content-box; // } gap: prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-lt-im-gp); padding: prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-lt-sh-im-pg); cursor: pointer; border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-br-cr)); background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-bd-cr)); border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-br-se)); border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-br-wh)); box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-sw-cr)); & div, .product-select-image { height: 100%; width: 100%; object-fit: cover; } &[data-background-shape="circle"] { border-radius: 50%; } &[data-background-shape="square"] { border-radius: 5px; } &[data-background-shape="capsule"] { &:not([data-display-style="Single Select"]) { --toggle-height: var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-lt-sh-im-se); --toggle-width: calc(var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-lt-sh-im-se) * 1.5); width: var(--toggle-width); height: var(--toggle-height); } border-radius: var(--toggle-height); /* Full pill shape */ box-sizing: border-box; } &[data-swatch-shape="circle"] { & div, .product-select-image { border-radius: 50%; } // border-radius: 50%; } &[data-swatch-shape="capsule"] { & div, .product-select-image { // border-radius: 50%; width: 100%; height: 100%; border-radius: inherit; } // border-radius: 50%; } &:hover { &[data-background-shape-hover="circle"] { border-radius: 50%; } &[data-background-shape-hover="square"] { border-radius: 5px; } &[data-background-shape-hover="capsule"] { --toggle-height: var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-lt-sh-im-se); --toggle-width: calc(var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-lt-sh-im-se) * 1.5); width: var(--toggle-width); height: var(--toggle-height); border-radius: var(--toggle-height); /* Full pill shape */ box-sizing: border-box; } &[data-swatch-shape-hover="circle"] { & div, .product-select-image { border-radius: 50%; } // border-radius: 50%; } &[data-swatch-shape-hover="capsule"] { & div, .product-select-image { // border-radius: 50%; width: 100%; height: 100%; border-radius: inherit; } } &[data-swatch-shape-hover="square"] { & div, .product-select-image { border-radius: 5px; } } } &[data-selected="true"] { border-color: var(--_sf-sd-br-cr, prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-br-cr)); background-color: var( --_sf-sd-bd-cr, prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-bd-cr) ); border-style: var(--_sf-sd-br-se, prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-br-se)); border-width: var(--_sf-sd-br-wh, prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-br-wh)); box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-sw-ae)) var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-sw-br)) var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-sw-sd)) var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-sw-cr)); &[data-background-shape-selected="circle"] { border-radius: 50%; } &[data-background-shape-selected="square"] { border-radius: 5px; } &[data-background-shape-selected="capsule"] { --toggle-height: #{prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-lt-sh-im-se)}; --toggle-width: calc(#{prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-lt-sh-im-se)} * 1.5); width: var(--toggle-width); // height: var(--toggle-height); border-radius: var(--toggle-height); /* Full pill shape */ box-sizing: border-box; } &[data-swatch-shape-selected="circle"] { & div, .product-select-image { border-radius: 50%; } } &[data-swatch-shape-selected="capsule"] { & div, .product-select-image { // border-radius: 50%; width: 100%; height: 100%; border-radius: inherit; } } &[data-swatch-shape-selected="square"] { & div, .product-select-image { border-radius: 5px; } } } .option__value__text { color: var(--_sf-hr-cr, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-cr, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-cr, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-cr)}); font-family: var(--_sf-hr-ft-fy, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-ft-fy, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-ft-fy, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-ft-fy)}); text-transform: var(--_sf-hr-tt-tm, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-tt-tm, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-tt-tm, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-tt-tm)}); word-wrap: var(--_sf-hr-wd-wp, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-wd-wp, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-wd-wp, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-wd-wp)}); word-break: var(--_sf-hr-wd-bk, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-wd-bk, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-wd-bk, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-wd-bk)}); font-size: var(--_sf-hr-ft-se, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-ft-se, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-ft-se, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-ft-se)}); font-weight: var(--_sf-hr-ft-wt, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-ft-wt, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-ft-wt, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-ft-wt)}); font-style: var( --_sf-hr-ft-se-ic, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-ft-se-ic, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-ft-se-ic, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-ft-se-ic)} ); text-align: var(--_sf-hr-tt-an, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-tt-an, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-tt-an, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-tt-an)}); letter-spacing: var(--_sf-hr-lr-sg, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-lr-sg, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-lr-sg, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-lr-sg)}); // The pre-split key is `le-ht-dc`; the new section is read under both spellings // so whichever one the converter writes resolves. line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-le-ht, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-le-ht-dc, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-le-ht-dc, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-le-ht-dc)})); text-decoration: var(--_sf-hr-ue, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-ue, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-ue, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-ue)}); // The swatch item is a fixed box (Swatch Item Size), so a value like "Small" // broke onto a second line inside it. Keep it on one line. white-space: nowrap; } &.disabled { color: #aaa; background-color: #f9f9f9; border-color: #ddd; cursor: not-allowed; opacity: 0.3; overflow: hidden; position: relative; } .cross-line { position: absolute; inset: 0; background-color: #cccccc; clip-path: polygon(100% 0, 100% 1px, 0 100%, 0 96%); pointer-events: none; } } // .disabled { // cursor: not-allowed; // opacity: 0.4; // &[data-swatch-type="Swatch image"] { // position: relative; // overflow: hidden; // &::after { // content: ""; // width: 172%; // height: 1px; // position: absolute; // background: #f00; // left: -14px; // transform: rotate(48deg); // /* -webkit-transform: rotate(48deg); */ // -moz-transform: rotate(48deg); // top: 14px; // box-shadow: 2px 0 5px rgba(255, 255, 255, 1); // } // &::before { // content: ""; // width: 164%; // height: 1px; // position: absolute; // background: #f00; // left: -14px; // transform: rotate(-48deg); // -webkit-transform: rotate(-48deg); // -moz-transform: rotate(-48deg); // top: 14px; // box-shadow: 2px 0 5px rgba(255, 255, 255, 1); // } // } // } .option__value__text { color: var(--_sf-hr-cr, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-cr, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-cr, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-cr)}); font-family: var(--_sf-hr-ft-fy, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-ft-fy, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-ft-fy, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-ft-fy)}); text-transform: var(--_sf-hr-tt-tm, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-tt-tm, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-tt-tm, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-tt-tm)}); word-wrap: var(--_sf-hr-wd-wp, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-wd-wp, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-wd-wp, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-wd-wp)}); word-break: var(--_sf-hr-wd-bk, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-wd-bk, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-wd-bk, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-wd-bk)}); font-size: var(--_sf-hr-ft-se, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-ft-se, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-ft-se, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-ft-se)}); font-weight: var(--_sf-hr-ft-wt, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-ft-wt, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-ft-wt, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-ft-wt)}); font-style: var(--_sf-hr-ft-se-ic, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-ft-se-ic, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-ft-se-ic, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-ft-se-ic)}); text-align: var(--_sf-hr-tt-an, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-tt-an, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-tt-an, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-tt-an)}); letter-spacing: var(--_sf-hr-lr-sg, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-lr-sg, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-lr-sg, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-lr-sg)}); // The pre-split key is `le-ht-dc`; the new section is read under both spellings // so whichever one the converter writes resolves. line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-le-ht, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-le-ht-dc, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-le-ht-dc, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-le-ht-dc)})); text-decoration: var(--_sf-hr-ue, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-ue, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-ue, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-ue)}); // The swatch item is a fixed box (Swatch Item Size), so a value like "Small" // broke onto a second line inside it. Keep it on one line. white-space: nowrap; } .product-select-image { height: 100%; width: 100%; object-fit: cover; } .embla { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; .embla__viewport { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; overflow: hidden; .embla__container { width: 100%; height: 100%; display: flex; gap: var(--_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-lt-sh-im-sg, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-lt-sh-im-sg, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-lt-sh-im-sg))); .embla__slide { height: 100%; } } } .arrow-navigation { display: flex; position: absolute; top: 50%; left: 50%; width: 100%; justify-content: space-between; transform: translate(-50%, -50%); &[data-control-type="Bottom"] { transform: unset; position: static; width: 100%; justify-content: center; gap: 12px; margin-top: 10px; } &[data-control-type="Bottom-Overflow"] { transform: translateX(-50%); width: 100%; justify-content: center; gap: 12px; top: unset; bottom: 6px; } .left-button, .right-button { padding: 10px; border-radius: 50%; border: none; width: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-pn-as-aw-se, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-pn-as-aw-se, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-pn-as-aw-se)) ); height: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-pn-as-aw-se, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-pn-as-aw-se, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-pn-as-aw-se)) ); display: flex; align-items: center; justify-content: center; cursor: pointer; outline: none; &:disabled svg path { stroke: rgb(192, 192, 192); } } .left-button { margin-left: 12px; } .right-button { margin-right: 12px; } .icon { display: flex; svg { width: calc( var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-pn-as-aw-se, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-pn-as-aw-se, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-pn-as-aw-se)) ) * 0.5 ); height: calc( var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-pn-as-aw-se, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-pn-as-aw-se, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-pn-as-aw-se)) ) * 0.5 ); path { stroke: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-pn-as-aw-cr, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-pn-as-aw-cr, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-pn-as-aw-cr)) ); } } } } &[data-control-type="Side"] { display: flex; align-self: center; flex-direction: row; .left-button, .right-button { padding: 10px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; outline: none; background: transparent; svg { width: 16px; height: 16px; path { stroke: var( --_ctm-mob-catego-dn-pt-gd-dn-pt-os-pt-os-dn-pn-as-aw-cr, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-os-pt-os-dn-pn-as-aw-cr, var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-pn-as-aw-cr, currentColor)) ); } } } .left-button:disabled, .right-button:disabled { display: none; } } .embla__dots { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 16px; &[data-control-type="Bottom-Overflow"] { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); width: 75%; } .embla__dot { appearance: none; background-color: var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-pn-ds-or-dt-cr); touch-action: manipulation; display: inline-flex; text-decoration: none; cursor: pointer; border: 0; padding: 0; margin: 0; width: var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-pn-ds-dt-se); height: var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-pn-ds-dt-se); align-items: center; justify-content: center; border-radius: 50%; } .embla__dot:after { width: var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-pn-ds-dt-se); height: var(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-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-catego-dn-pt-gd-dn-pt-os-pt-os-dn-pn-ds-ct-dt-cr); } } } }