@use "sass:map"; @use "sass:list"; @use "./functions.scss" as *; $minWidth: 70px; [data-div-type="element"] { &[data-element-type="variantPicker"] { --_ctm-mob-var-lt-mn-cn-wh: 70px; margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn))); min-width: #{$minWidth} !important; & > .wrapper { width: 100%; // height: 100%; } &[data-show-shadow="false"] { --_show-shadow: none; } .text-element { color: #333; font-size: 12px; font-style: normal; font-weight: 400; line-height: 18px; margin-bottom: 6px; } .option__title { margin-bottom: 4px; color: var(--_ctm-mob-dn-on-te-cr, var(--_ctm-tab-dn-on-te-cr, var(--_ctm-dn-on-te-cr))); font-family: var( --_ctm-mob-dn-on-te-ft-fy, var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy)) ); text-transform: var( --_ctm-mob-dn-on-te-tt-tm, var(--_ctm-tab-dn-on-te-tt-tm, var(--_ctm-dn-on-te-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-on-te-wd-wp, var(--_ctm-tab-dn-on-te-wd-wp, var(--_ctm-dn-on-te-wd-wp)) ); word-break: var( --_ctm-mob-dn-on-te-wd-bk, var(--_ctm-tab-dn-on-te-wd-bk, var(--_ctm-dn-on-te-wd-bk)) ); font-size: var( --_ctm-mob-dn-on-te-ft-se, var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se)) ); font-weight: var( --_ctm-mob-dn-on-te-ft-wt, var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt)) ); font-style: var( --_ctm-mob-dn-on-te-ft-se-ic, var(--_ctm-tab-dn-on-te-ft-se-ic, var(--_ctm-dn-on-te-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-on-te-tt-an, var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an)) ); letter-spacing: var( --_ctm-mob-dn-on-te-lr-sg, var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg)) ); line-height: var( --_ctm-mob-dn-on-te-le-ht, var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht)) ); text-decoration: var( --_ctm-mob-dn-on-te-ue, var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue)) ); } .is__combination_avail { color: red; font-size: 14px; font-weight: 600; } .variant__container { display: flex; flex-direction: column; gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))); padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg))); white-space: nowrap; background-color: var( --_ctm-mob-dn-wt-se-bd-cr, var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr)) ); border-color: var( --_ctm-mob-dn-wt-se-br-cr, var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr)) ); border-style: var( --_ctm-mob-dn-wt-se-br-se, var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se)) ); border-width: var( --_ctm-mob-dn-wt-se-br-wh, var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh)) ); border-radius: var( --_ctm-mob-dn-wt-se-br-rs, var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs)) ); box-shadow: var( --_show-shadow, var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae))) var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br))) var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd))) var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr))) ); &[data-show-divider="true"] { .standard_wrapper { &:not(:last-child)::after { // border-bottom-width: var( // --_ctm-mob-dn-wt-se-dr-wh, // var(--_ctm-tab-dn-wt-se-dr-wh, var(--_ctm-dn-wt-se-dr-wh, 1px)) // ); // border-bottom-color: var( // --_ctm-mob-dn-wt-se-dr-cr, // var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr, #e4e7ec)) // ); content: ""; position: relative; background-color: var( --_ctm-mob-dn-wt-se-dr-cr, var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr, #e4e7ec)) ); height: var( --_ctm-mob-dn-wt-se-dr-wh, var(--_ctm-tab-dn-wt-se-dr-wh, var(--_ctm-dn-wt-se-dr-wh, 1px)) ); width: 100%; display: flex; top: calc( calc( var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 10px ) / 2 ); } } } .variant__option { width: 100%; .variant__list { display: flex; gap: 12px; } } .standard_wrapper { // Select Colors .select__colors { font-size: 16px; color: var(--_gray-500); display: flex; flex-direction: column; gap: var( --_ctm-mob-lt-on-te-ve-sg, var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg)) ); // padding: var( // --_ctm-mob-lt-sh-te-dy-se-im-pg, // var(--_ctm-tab-lt-sh-te-dy-se-im-pg, var(--_ctm-lt-sh-te-dy-se-im-pg)) // ); .select__group { display: flex; flex-direction: row; align-items: center; gap: var( --_ctm-mob-lt-sh-te-dy-se-im-sg, var(--_ctm-tab-lt-sh-te-dy-se-im-sg, var(--_ctm-lt-sh-te-dy-se-im-sg)) ); &[data-swatch-dispaly="Vertically"] { flex-direction: column; } &[data-swatch-overflow="Scroll"] { flex-wrap: nowrap; overflow-x: auto; } &[data-swatch-overflow="Wrap"] { flex-wrap: wrap; } .show_more_button { background-color: var( --_ctm-mob-dn-sw-me-is-bn-bd-cr, var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr)) ); font-family: var( --_ctm-mob-dn-sw-me-is-bn-ft-fy, var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy)) ); text-transform: var( --_ctm-mob-dn-sw-me-is-bn-tt-tm, var(--_ctm-tab-dn-sw-me-is-bn-tt-tm, var(--_ctm-dn-sw-me-is-bn-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-sw-me-is-bn-wd-wp, var(--_ctm-tab-dn-sw-me-is-bn-wd-wp, var(--_ctm-dn-sw-me-is-bn-wd-wp)) ); word-break: var( --_ctm-mob-dn-sw-me-is-bn-wd-bk, var(--_ctm-tab-dn-sw-me-is-bn-wd-bk, var(--_ctm-dn-sw-me-is-bn-wd-bk)) ); border-color: var( --_ctm-mob-dn-sw-me-is-bn-br-cr, var(--_ctm-tab-dn-sw-me-is-bn-br-cr, var(--_ctm-dn-sw-me-is-bn-br-cr)) ); border-radius: var( --_ctm-mob-dn-sw-me-is-bn-br-rs, var(--_ctm-tab-dn-sw-me-is-bn-br-rs, var(--_ctm-dn-sw-me-is-bn-br-rs)) ); border-style: var( --_ctm-mob-dn-sw-me-is-bn-br-se, var(--_ctm-tab-dn-sw-me-is-bn-br-se, var(--_ctm-dn-sw-me-is-bn-br-se)) ); border-width: var( --_ctm-mob-dn-sw-me-is-bn-br-wh, var(--_ctm-tab-dn-sw-me-is-bn-br-wh, var(--_ctm-dn-sw-me-is-bn-br-wh)) ); font-size: var( --_ctm-mob-dn-sw-me-is-bn-ft-se, var(--_ctm-tab-dn-sw-me-is-bn-ft-se, var(--_ctm-dn-sw-me-is-bn-ft-se)) ); font-style: var( --_ctm-mob-dn-sw-me-is-bn-ft-se-ic, var(--_ctm-tab-dn-sw-me-is-bn-ft-se-ic, var(--_ctm-dn-sw-me-is-bn-ft-se-ic)) ); font-weight: var( --_ctm-mob-dn-sw-me-is-bn-ft-wt, var(--_ctm-tab-dn-sw-me-is-bn-ft-wt, var(--_ctm-dn-sw-me-is-bn-ft-wt)) ); line-height: var( --_ctm-mob-dn-sw-me-is-bn-le-ht, var(--_ctm-tab-dn-sw-me-is-bn-le-ht, var(--_ctm-dn-sw-me-is-bn-le-ht)) ); letter-spacing: var( --_ctm-mob-dn-sw-me-is-bn-lr-sg, var(--_ctm-tab-dn-sw-me-is-bn-lr-sg, var(--_ctm-dn-sw-me-is-bn-lr-sg)) ); box-shadow: var( --_ctm-mob-dn-sw-me-is-bn-sw-ae, var(--_ctm-tab-dn-sw-me-is-bn-sw-ae, var(--_ctm-dn-sw-me-is-bn-sw-ae)) ) var( --_ctm-mob-dn-sw-me-is-bn-sw-br, var(--_ctm-tab-dn-sw-me-is-bn-sw-br, var(--_ctm-dn-sw-me-is-bn-sw-br)) ) var( --_ctm-mob-dn-sw-me-is-bn-sw-sd, var(--_ctm-tab-dn-sw-me-is-bn-sw-sd, var(--_ctm-dn-sw-me-is-bn-sw-sd)) ) var( --_ctm-mob-dn-sw-me-is-bn-sw-cr, var(--_ctm-tab-dn-sw-me-is-bn-sw-cr, var(--_ctm-dn-sw-me-is-bn-sw-cr)) ); text-align: var( --_ctm-mob-dn-sw-me-is-bn-tt-an, var(--_ctm-tab-dn-sw-me-is-bn-tt-an, var(--_ctm-dn-sw-me-is-bn-tt-an)) ); color: var( --_ctm-mob-dn-sw-me-is-bn-tt-cr, var(--_ctm-tab-dn-sw-me-is-bn-tt-cr, var(--_ctm-dn-sw-me-is-bn-tt-cr)) ); text-decoration: var( --_ctm-mob-dn-sw-me-is-bn-ue, var(--_ctm-tab-dn-sw-me-is-bn-ue, var(--_ctm-dn-sw-me-is-bn-ue)) ); } .select__group__item { transition: width 0.3s ease; --_ctm-lt-sh-im-se: 30px; height: prepareMediaVariable(--_ctm-lt-sh-te-dy-se-im-se); width: prepareMediaVariable(--_ctm-lt-sh-te-dy-se-im-se); padding: prepareMediaVariable(--_ctm-lt-sh-te-dy-se-im-pg); border-color: var( --_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-cr) ); background-color: var( --_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-bd-cr) ); border-style: var( --_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-se) ); border-width: var( --_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-wh) ); border-radius: var( --_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-rs) ); box-shadow: var( --_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-ae) ) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-cr)); cursor: pointer; overflow: hidden; .product-select-image { object-fit: cover; width: 100%; height: 100%; } &[data-background-shape="circle"] { border-radius: 50%; } &[data-background-shape="square"] { border-radius: 5px; } &[data-background-shape="capsule"] { --toggle-height: var(--_ctm-lt-sh-te-dy-se-im-se); --toggle-width: calc(var(--_ctm-lt-sh-te-dy-se-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%; } &[data-selected="true"] { border-color: var( --_sf-sd-br-cr, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-br-cr) ); background-color: var( --_sf-sd-bd-cr, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-bd-cr) ); border-style: var( --_sf-sd-br-se, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-br-se) ); border-width: var( --_sf-sd-br-wh, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-br-wh) ); box-shadow: var( --_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-sw-ae) ) var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-sw-br)) var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-sw-sd)) var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-sw-cr)); &[data-background-shape-selected="circle"] { border-radius: 50%; } &[data-background-shape-selected="square"] { border-radius: 5px; } &[data-background-shape-selected="capsule"] { border-radius: 80%; // width: calc( // var(--_ctm-mob-lt-sh-im-se, var(--_ctm-tab-lt-sh-im-se, var(--_ctm-lt-sh-im-se))) + // 8px // ); } &[data-swatch-shape-selected="circle"] { & div, .product-select-image { border-radius: 50%; } } &[data-swatch-shape-selected="capsule"] { & div, .product-select-image { border-radius: 50%; } } &[data-swatch-shape-selected="square"] { & div, .product-select-image { border-radius: 5px; } } } &:hover { --_sf-hr-bd-cr: var( --_ctm-mob-dn-sh-on-ve-se-hr-se-bd-cr, var(--_ctm-tab-dn-sh-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-hr-se-bd-cr)) ); --_sf-hr-br-cr: var( --_ctm-mob-dn-sh-on-ve-se-hr-se-br-cr, var(--_ctm-tab-dn-sh-on-ve-se-hr-se-br-cr, var(--_ctm-dn-sh-on-ve-se-hr-se-br-cr)) ); --_sf-hr-br-se: var( --_ctm-mob-dn-sh-on-ve-se-hr-se-br-se, var(--_ctm-tab-dn-sh-on-ve-se-hr-se-br-se, var(--_ctm-dn-sh-on-ve-se-hr-se-br-se)) ); --_sf-hr-br-wh: var( --_ctm-mob-dn-sh-on-ve-se-hr-se-br-wh, var(--_ctm-tab-dn-sh-on-ve-se-hr-se-br-wh, var(--_ctm-dn-sh-on-ve-se-hr-se-br-wh)) ); --_sf-hr-br-bs: var( --_ctm-mob-dn-sh-on-ve-se-hr-se-br-rs, var(--_ctm-tab-dn-sh-on-ve-se-hr-se-br-rs, var(--_ctm-dn-sh-on-ve-se-hr-se-br-rs)) ); // new --_sf-hr-sw-ae: var( --_ctm-mob-dn-on-ve-se-hr-se-sw-ae, var(--_ctm-tab-dn-sh-on-ve-se-hr-se-sw-ae, var(--_ctm-dn-sh-on-ve-se-hr-se-sw-ae)) ); --_sf-hr-sw-br: var( --_ctm-mob-dn-on-ve-se-hr-se-sw-br, var(--_ctm-tab-dn-sh-on-ve-se-hr-se-sw-br, var(--_ctm-dn-sh-on-ve-se-hr-se-sw-br)) ); --_sf-hr-sw-hr: var( --_ctm-mob-dn-on-ve-se-hr-se-sw-hr, var(--_ctm-tab-dn-sh-on-ve-se-hr-se-sw-hr, var(--_ctm-dn-sh-on-ve-se-hr-se-sw-hr)) ); --_sf-hr-sw-cr: var( --_ctm-mob-dn-on-ve-se-hr-se-sw-cr, var(--_ctm-tab-dn-sh-on-ve-se-hr-se-sw-cr, var(--_ctm-dn-sh-on-ve-se-hr-se-sw-cr)) ); } &:hover { &[data-background-shape-hover="circle"] { border-radius: 50%; } &[data-background-shape-hover="square"] { border-radius: 5px; } &[data-background-shape-hover="capsule"] { border-radius: 80%; // width: calc( // var( // --_ctm-mob-lt-sh-im-se, // var(--_ctm-tab-lt-sh-im-se, var(--_ctm-lt-sh-im-se)) // ) + // 8px // ); } &[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%; } } &[data-swatch-shape-hover="square"] { & div, .product-select-image { border-radius: 5px; } } } &[data-selected="true"] { --_sf-sd-bd-cr: var( --_ctm-mob-dn-sh-on-ve-se-sd-se-bd-cr, var(--_ctm-tab-dn-sh-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-sd-se-bd-cr)) ); --_sf-sd-br-cr: var( --_ctm-mob-dn-sh-on-ve-se-sd-se-br-cr, var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-cr, var(--_ctm-dn-sh-on-ve-se-sd-se-br-cr)) ); --_sf-sd-br-se: var( --_ctm-mob-dn-sh-on-ve-se-sd-se-br-se, var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-se, var(--_ctm-dn-sh-on-ve-se-sd-se-br-se)) ); --_sf-sd-br-wh: var( --_ctm-mob-dn-sh-on-ve-se-sd-se-br-wh, var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-wh, var(--_ctm-dn-sh-on-ve-se-sd-se-br-wh)) ); --_sf-sd-br-bs: var( --_ctm-mob-dn-sh-on-ve-se-sd-se-br-rs, var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-rs, var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs)) ); // new --_sf-sd-sw-ae: var( --_ctm-mob-dn-on-ve-se-sd-se-sw-ae, var(--_ctm-tab-dn-sh-on-ve-se-sd-se-sw-ae, var(--_ctm-dn-sh-on-ve-se-sd-se-sw-ae)) ); --_sf-sd-sw-br: var( --_ctm-mob-dn-on-ve-se-sd-se-sw-br, var(--_ctm-tab-dn-sh-on-ve-se-sd-se-sw-br, var(--_ctm-dn-sh-on-ve-se-sd-se-sw-br)) ); --_sf-sd-sw-sd: var( --_ctm-mob-dn-on-ve-se-sd-se-sw-sd, var(--_ctm-tab-dn-sh-on-ve-se-sd-se-sw-sd, var(--_ctm-dn-sh-on-ve-se-sd-se-sw-sd)) ); --_sf-sd-sw-cr: var( --_ctm-mob-dn-on-ve-se-sd-se-sw-cr, var(--_ctm-tab-dn-sh-on-ve-se-sd-se-sw-cr, var(--_ctm-dn-sh-on-ve-se-sd-se-sw-cr)) ); border-color: var( --_sf-sd-br-cr, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-cr) ); background-color: var( --_sf-sd-bd-cr, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-bd-cr) ); border-style: var( --_sf-sd-br-se, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-se) ); border-width: var( --_sf-sd-br-wh, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-wh) ); border-radius: var( --_sf-sd-br-rs, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-rs) ); box-shadow: var( --_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-ae) ) var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-br)) var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-sd)) var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-sh-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: var(--_ctm-lt-sh-te-dy-se-im-se); --toggle-width: calc(var(--_ctm-lt-sh-te-dy-se-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; } } } // &.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); // } // } // } position: relative; &.disabled { color: #aaa; background-color: #f9f9f9; border-color: #ddd; cursor: not-allowed; opacity: 0.3; overflow: hidden; } .cross-line { position: absolute; inset: 0; background-color: #cccccc; clip-path: polygon(100% 0, 100% 1px, 0 100%, 0 96%); pointer-events: none; } .product-select-image { width: 100%; height: 100%; object-fit: cover; } } } } // Grouped Option Picker .grouped__option__picker { display: flex; flex-direction: column; // Positioning context for the group-description popover, which is // rendered here (not inside the scrolling tabs) so it isn't clipped. position: relative; // While a description popover is open, lift the whole picker above the // option blocks that follow it (e.g. the size selector); otherwise the // popover's own z-index can't beat content owned by a later sibling. &.has-open-popover { z-index: 50; } .grouped__group__image { width: var( --_ctm-mob-dn-on-ve-gp-gp-hr-ie-wh, var(--_ctm-tab-dn-on-ve-gp-gp-hr-ie-wh, var(--_ctm-dn-on-ve-gp-gp-hr-ie-wh, 24px)) ); height: var( --_ctm-mob-dn-on-ve-gp-gp-hr-ie-ht, var(--_ctm-tab-dn-on-ve-gp-gp-hr-ie-ht, var(--_ctm-dn-on-ve-gp-gp-hr-ie-ht, 24px)) ); padding: var( --_ctm-mob-dn-on-ve-gp-gp-hr-ie-pg, var(--_ctm-tab-dn-on-ve-gp-gp-hr-ie-pg, var(--_ctm-dn-on-ve-gp-gp-hr-ie-pg, 0)) ); object-fit: var( --_ctm-mob-dn-on-ve-gp-gp-hr-ie-ob-ft, var( --_ctm-tab-dn-on-ve-gp-gp-hr-ie-ob-ft, var(--_ctm-dn-on-ve-gp-gp-hr-ie-ob-ft, cover) ) ); object-position: var( --_ctm-mob-dn-on-ve-gp-gp-hr-ie-ob-pn, var( --_ctm-tab-dn-on-ve-gp-gp-hr-ie-ob-pn, var(--_ctm-dn-on-ve-gp-gp-hr-ie-ob-pn, center) ) ); background-color: var( --_ctm-mob-dn-on-ve-gp-gp-hr-ie-bd-cr, var(--_ctm-tab-dn-on-ve-gp-gp-hr-ie-bd-cr, var(--_ctm-dn-on-ve-gp-gp-hr-ie-bd-cr)) ); border-color: var( --_ctm-mob-dn-on-ve-gp-gp-hr-ie-br-cr, var(--_ctm-tab-dn-on-ve-gp-gp-hr-ie-br-cr, var(--_ctm-dn-on-ve-gp-gp-hr-ie-br-cr)) ); border-style: var( --_ctm-mob-dn-on-ve-gp-gp-hr-ie-br-se, var(--_ctm-tab-dn-on-ve-gp-gp-hr-ie-br-se, var(--_ctm-dn-on-ve-gp-gp-hr-ie-br-se)) ); border-width: var( --_ctm-mob-dn-on-ve-gp-gp-hr-ie-br-wh, var(--_ctm-tab-dn-on-ve-gp-gp-hr-ie-br-wh, var(--_ctm-dn-on-ve-gp-gp-hr-ie-br-wh)) ); border-radius: var( --_ctm-mob-dn-on-ve-gp-gp-hr-ie-br-rs, var(--_ctm-tab-dn-on-ve-gp-gp-hr-ie-br-rs, var(--_ctm-dn-on-ve-gp-gp-hr-ie-br-rs)) ); box-shadow: var( --_ctm-mob-dn-on-ve-gp-gp-hr-ie-sw-ae, var(--_ctm-tab-dn-on-ve-gp-gp-hr-ie-sw-ae, var(--_ctm-dn-on-ve-gp-gp-hr-ie-sw-ae)) ) var( --_ctm-mob-dn-on-ve-gp-gp-hr-ie-sw-br, var(--_ctm-tab-dn-on-ve-gp-gp-hr-ie-sw-br, var(--_ctm-dn-on-ve-gp-gp-hr-ie-sw-br)) ) var( --_ctm-mob-dn-on-ve-gp-gp-hr-ie-sw-sd, var(--_ctm-tab-dn-on-ve-gp-gp-hr-ie-sw-sd, var(--_ctm-dn-on-ve-gp-gp-hr-ie-sw-sd)) ) var( --_ctm-mob-dn-on-ve-gp-gp-hr-ie-sw-cr, var(--_ctm-tab-dn-on-ve-gp-gp-hr-ie-sw-cr, var(--_ctm-dn-on-ve-gp-gp-hr-ie-sw-cr)) ); flex-shrink: 0; } // Card view: every group renders as its own detailsCard inside an // Embla carousel instead of one active group behind a tab strip. The // cards reuse the `.grouped__content` (detailsCard) styles via the // descendant selector, so only carousel-specific sizing lives here. &.is-card-view { .grouped__cards { width: 100%; min-width: 0; } .grouped__card { height: 100%; box-sizing: border-box; } // Embla lays the cards out in a grid whose column count comes from // `itemsPerSlide` (set inline by the carousel as --_ctm-lt-is-pr-se), // so "Items Per Slide" controls how many cards show per slide. The // prev/next buttons sit on the sides and are styled by the // `scrollerArrow` design block (sr-aw). .embla { width: 100%; position: relative; display: flex; flex-direction: row; align-items: center; // gap: 8px; gap: var( --_ctm-mob-dn-on-ve-gp-wt-ct-gp, var(--_ctm-tab-dn-on-ve-gp-wt-ct-gp, var(--_ctm-dn-on-ve-gp-wt-ct-gp)) ); .embla__viewport { flex: 1; min-width: 0; overflow: hidden; } // Grid carousel (same as product-image reference): the template // columns size the first `itemsPerSlide` slides, and // `grid-auto-columns` sizes every implicit column (slides beyond // that) to the SAME 100% / itemsPerSlide width — without it the // extra cards collapse to content width and Embla's scroll snaps // break. .embla__container { width: 100%; height: 100%; display: grid; grid-template-rows: 100%; // Column width subtracts the gaps so `itemsPerSlide` cards plus // the gaps between them add up to exactly 100% of the viewport; // otherwise the last visible card overflows and gets clipped. grid-template-columns: repeat( var( --_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se, 1)) ), calc( ( 100% - ( var( --_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se, 1)) ) - 1 ) * var( --_ctm-mob-dn-on-ve-gp-wt-ct-gp, var(--_ctm-tab-dn-on-ve-gp-wt-ct-gp, var(--_ctm-dn-on-ve-gp-wt-ct-gp)) ) ) / var( --_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se, 1)) ) ) ); grid-auto-flow: column; 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, 1)) ) - 1 ) * var( --_ctm-mob-dn-on-ve-gp-wt-ct-gp, var(--_ctm-tab-dn-on-ve-gp-wt-ct-gp, var(--_ctm-dn-on-ve-gp-wt-ct-gp)) ) ) / var( --_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se, 1)) ) ); gap: var( --_ctm-mob-dn-on-ve-gp-wt-ct-gp, var(--_ctm-tab-dn-on-ve-gp-wt-ct-gp, var(--_ctm-dn-on-ve-gp-wt-ct-gp)) ); } .embla__slide { flex: 0 0 auto; width: 100%; min-width: 0; } .left-button, .right-button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; padding: var( --_ctm-mob-dn-on-ve-gp-sr-aw-dt-se-pg, var( --_ctm-tab-dn-on-ve-gp-sr-aw-dt-se-pg, var(--_ctm-dn-on-ve-gp-sr-aw-dt-se-pg, 6px) ) ); color: var( --_ctm-mob-dn-on-ve-gp-sr-aw-dt-se-in-c1, var( --_ctm-tab-dn-on-ve-gp-sr-aw-dt-se-in-c1, var(--_ctm-dn-on-ve-gp-sr-aw-dt-se-in-c1, #002a4e) ) ); background-color: var( --_ctm-mob-dn-on-ve-gp-sr-aw-dt-se-bd-cr, var( --_ctm-tab-dn-on-ve-gp-sr-aw-dt-se-bd-cr, var(--_ctm-dn-on-ve-gp-sr-aw-dt-se-bd-cr, #fff) ) ); border-color: var( --_ctm-mob-dn-on-ve-gp-sr-aw-dt-se-br-cr, var( --_ctm-tab-dn-on-ve-gp-sr-aw-dt-se-br-cr, var(--_ctm-dn-on-ve-gp-sr-aw-dt-se-br-cr, #d0d5dd) ) ); border-style: var( --_ctm-mob-dn-on-ve-gp-sr-aw-dt-se-br-se, var( --_ctm-tab-dn-on-ve-gp-sr-aw-dt-se-br-se, var(--_ctm-dn-on-ve-gp-sr-aw-dt-se-br-se, solid) ) ); border-width: var( --_ctm-mob-dn-on-ve-gp-sr-aw-dt-se-br-wh, var( --_ctm-tab-dn-on-ve-gp-sr-aw-dt-se-br-wh, var(--_ctm-dn-on-ve-gp-sr-aw-dt-se-br-wh, 1px) ) ); border-radius: var( --_ctm-mob-dn-on-ve-gp-sr-aw-dt-se-br-rs, var( --_ctm-tab-dn-on-ve-gp-sr-aw-dt-se-br-rs, var(--_ctm-dn-on-ve-gp-sr-aw-dt-se-br-rs, 50%) ) ); box-shadow: var( --_ctm-mob-dn-on-ve-gp-sr-aw-dt-se-sw-ae, var( --_ctm-tab-dn-on-ve-gp-sr-aw-dt-se-sw-ae, var(--_ctm-dn-on-ve-gp-sr-aw-dt-se-sw-ae, 0px) ) ) var( --_ctm-mob-dn-on-ve-gp-sr-aw-dt-se-sw-br, var( --_ctm-tab-dn-on-ve-gp-sr-aw-dt-se-sw-br, var(--_ctm-dn-on-ve-gp-sr-aw-dt-se-sw-br, 0px) ) ) var( --_ctm-mob-dn-on-ve-gp-sr-aw-dt-se-sw-sd, var( --_ctm-tab-dn-on-ve-gp-sr-aw-dt-se-sw-sd, var(--_ctm-dn-on-ve-gp-sr-aw-dt-se-sw-sd, 0px) ) ) var( --_ctm-mob-dn-on-ve-gp-sr-aw-dt-se-sw-cr, var( --_ctm-tab-dn-on-ve-gp-sr-aw-dt-se-sw-cr, var(--_ctm-dn-on-ve-gp-sr-aw-dt-se-sw-cr, transparent) ) ); svg { width: var( --_ctm-mob-dn-on-ve-gp-sr-aw-dt-se-in-se, var( --_ctm-tab-dn-on-ve-gp-sr-aw-dt-se-in-se, var(--_ctm-dn-on-ve-gp-sr-aw-dt-se-in-se, 16px) ) ); height: var( --_ctm-mob-dn-on-ve-gp-sr-aw-dt-se-in-se, var( --_ctm-tab-dn-on-ve-gp-sr-aw-dt-se-in-se, var(--_ctm-dn-on-ve-gp-sr-aw-dt-se-in-se, 16px) ) ); path { stroke: var( --_ctm-mob-dn-on-ve-gp-sr-aw-dt-se-in-c1, var( --_ctm-tab-dn-on-ve-gp-sr-aw-dt-se-in-c1, var(--_ctm-dn-on-ve-gp-sr-aw-dt-se-in-c1, #002a4e) ) ); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-on-ve-gp-sr-aw-dt-se-se-wh, 1.25); } } &:hover { color: var( --_ctm-mob-dn-on-ve-gp-sr-aw-hr-se-in-c1, var( --_ctm-tab-dn-on-ve-gp-sr-aw-hr-se-in-c1, var(--_ctm-dn-on-ve-gp-sr-aw-hr-se-in-c1) ) ); background-color: var( --_ctm-mob-dn-on-ve-gp-sr-aw-hr-se-bd-cr, var( --_ctm-tab-dn-on-ve-gp-sr-aw-hr-se-bd-cr, var(--_ctm-dn-on-ve-gp-sr-aw-hr-se-bd-cr) ) ); border-color: var( --_ctm-mob-dn-on-ve-gp-sr-aw-hr-se-br-cr, var( --_ctm-tab-dn-on-ve-gp-sr-aw-hr-se-br-cr, var(--_ctm-dn-on-ve-gp-sr-aw-hr-se-br-cr) ) ); } &:disabled { opacity: 0.4; cursor: default; } } } } padding: var( --_ctm-mob-dn-on-ve-gp-wt-pg, var(--_ctm-tab-dn-on-ve-gp-wt-pg, var(--_ctm-dn-on-ve-gp-wt-pg)) ); gap: var( --_ctm-mob-dn-on-ve-gp-wt-im-gp, var(--_ctm-tab-dn-on-ve-gp-wt-im-gp, var(--_ctm-dn-on-ve-gp-wt-im-gp)) ); background-color: var( --_ctm-mob-dn-on-ve-gp-wt-bd-cr, var(--_ctm-tab-dn-on-ve-gp-wt-bd-cr, var(--_ctm-dn-on-ve-gp-wt-bd-cr)) ); border-color: var( --_ctm-mob-dn-on-ve-gp-wt-br-cr, var(--_ctm-tab-dn-on-ve-gp-wt-br-cr, var(--_ctm-dn-on-ve-gp-wt-br-cr)) ); border-style: var( --_ctm-mob-dn-on-ve-gp-wt-br-se, var(--_ctm-tab-dn-on-ve-gp-wt-br-se, var(--_ctm-dn-on-ve-gp-wt-br-se)) ); border-width: var( --_ctm-mob-dn-on-ve-gp-wt-br-wh, var(--_ctm-tab-dn-on-ve-gp-wt-br-wh, var(--_ctm-dn-on-ve-gp-wt-br-wh)) ); border-radius: var( --_ctm-mob-dn-on-ve-gp-wt-br-rs, var(--_ctm-tab-dn-on-ve-gp-wt-br-rs, var(--_ctm-dn-on-ve-gp-wt-br-rs)) ); box-shadow: var( --_ctm-mob-dn-on-ve-gp-wt-sw-ae, var(--_ctm-tab-dn-on-ve-gp-wt-sw-ae, var(--_ctm-dn-on-ve-gp-wt-sw-ae)) ) var( --_ctm-mob-dn-on-ve-gp-wt-sw-br, var(--_ctm-tab-dn-on-ve-gp-wt-sw-br, var(--_ctm-dn-on-ve-gp-wt-sw-br)) ) var( --_ctm-mob-dn-on-ve-gp-wt-sw-sd, var(--_ctm-tab-dn-on-ve-gp-wt-sw-sd, var(--_ctm-dn-on-ve-gp-wt-sw-sd)) ) var( --_ctm-mob-dn-on-ve-gp-wt-sw-cr, var(--_ctm-tab-dn-on-ve-gp-wt-sw-cr, var(--_ctm-dn-on-ve-gp-wt-sw-cr)) ); .grouped__tabs { display: flex; flex-direction: row; // border-bottom: 1px solid #e0e0e0; overflow-x: auto; overflow-y: hidden; padding-bottom: 3px; padding: var( --_ctm-mob-dn-on-ve-gp-gs-cr-pg, var(--_ctm-tab-dn-on-ve-gp-gs-cr-pg, var(--_ctm-dn-on-ve-gp-gs-cr-pg)) ); gap: var( --_ctm-mob-dn-on-ve-gp-gs-cr-im-gp, var(--_ctm-tab-dn-on-ve-gp-gs-cr-im-gp, var(--_ctm-dn-on-ve-gp-gs-cr-im-gp)) ); border-color: var( --_ctm-mob-dn-on-ve-gp-gs-cr-br-cr, var(--_ctm-tab-dn-on-ve-gp-gs-cr-br-cr, var(--_ctm-dn-on-ve-gp-gs-cr-br-cr)) ); border-style: var( --_ctm-mob-dn-on-ve-gp-gs-cr-br-se, var(--_ctm-tab-dn-on-ve-gp-gs-cr-br-se, var(--_ctm-dn-on-ve-gp-gs-cr-br-se)) ); border-width: var( --_ctm-mob-dn-on-ve-gp-gs-cr-br-wh, var(--_ctm-tab-dn-on-ve-gp-gs-cr-br-wh, var(--_ctm-dn-on-ve-gp-gs-cr-br-wh)) ); border-radius: var( --_ctm-mob-dn-on-ve-gp-gs-cr-br-rs, var(--_ctm-tab-dn-on-ve-gp-gs-cr-br-rs, var(--_ctm-dn-on-ve-gp-gs-cr-br-rs)) ); box-shadow: var( --_ctm-mob-dn-on-ve-gp-gs-cr-sw-ae, var(--_ctm-tab-dn-on-ve-gp-gs-cr-sw-ae, var(--_ctm-dn-on-ve-gp-gs-cr-sw-ae)) ) var( --_ctm-mob-dn-on-ve-gp-gs-cr-sw-br, var(--_ctm-tab-dn-on-ve-gp-gs-cr-sw-br, var(--_ctm-dn-on-ve-gp-gs-cr-sw-br)) ) var( --_ctm-mob-dn-on-ve-gp-gs-cr-sw-sd, var(--_ctm-tab-dn-on-ve-gp-gs-cr-sw-sd, var(--_ctm-dn-on-ve-gp-gs-cr-sw-sd)) ) var( --_ctm-mob-dn-on-ve-gp-gs-cr-sw-cr, var(--_ctm-tab-dn-on-ve-gp-gs-cr-sw-cr, var(--_ctm-dn-on-ve-gp-gs-cr-sw-cr)) ); // This scroll container would clip the description popover, so the // popover uses `position: fixed` (PopoverComponent `floating` prop) // to escape it while staying in this subtree for CSS-var inheritance. .grouped__tab { display: flex; align-items: center; gap: var( --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-im-gp, var( --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-im-gp, var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-im-gp, 6px) ) ); padding: var( --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-pg, var( --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-pg, var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-pg, 8px 12px) ) ); cursor: pointer; margin-bottom: -1px; white-space: nowrap; flex-shrink: 0; // Stateful properties — read --_sf-tb-* which hover/active override border-style: var( --_sf-tb-br-se, var( --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-br-se, var( --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-br-se, var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-br-se, solid) ) ) ); border-width: var( --_sf-tb-br-wh, var( --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-br-wh, var( --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-br-wh, var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-br-wh, 0 0 2px 0) ) ) ); border-color: var( --_sf-tb-br-cr, var( --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-br-cr, var( --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-br-cr, var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-br-cr, transparent) ) ) ); background-color: var( --_sf-tb-bd-cr, var( --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-bd-cr, var( --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-bd-cr, var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-bd-cr) ) ) ); border-radius: var( --_sf-tb-br-rs, var( --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-br-rs, var( --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-br-rs, var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-br-rs) ) ) ); box-shadow: var( --_sf-tb-sw-ae, var( --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-sw-ae, var( --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-sw-ae, var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-sw-ae) ) ) ) var( --_sf-tb-sw-br, var( --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-sw-br, var( --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-sw-br, var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-sw-br) ) ) ) var( --_sf-tb-sw-sd, var( --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-sw-sd, var( --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-sw-sd, var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-sw-sd) ) ) ) var( --_sf-tb-sw-cr, var( --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-sw-cr, var( --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-sw-cr, var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-sw-cr) ) ) ); &:hover { --_sf-tb-br-cr: var( --_ctm-mob-dn-on-ve-gp-gp-tb-hr-se-br-cr, var( --_ctm-tab-dn-on-ve-gp-gp-tb-hr-se-br-cr, var(--_ctm-dn-on-ve-gp-gp-tb-hr-se-br-cr) ) ); --_sf-tb-br-se: var( --_ctm-mob-dn-on-ve-gp-gp-tb-hr-se-br-se, var( --_ctm-tab-dn-on-ve-gp-gp-tb-hr-se-br-se, var(--_ctm-dn-on-ve-gp-gp-tb-hr-se-br-se) ) ); --_sf-tb-br-wh: var( --_ctm-mob-dn-on-ve-gp-gp-tb-hr-se-br-wh, var( --_ctm-tab-dn-on-ve-gp-gp-tb-hr-se-br-wh, var(--_ctm-dn-on-ve-gp-gp-tb-hr-se-br-wh) ) ); --_sf-tb-bd-cr: var( --_ctm-mob-dn-on-ve-gp-gp-tb-hr-se-bd-cr, var( --_ctm-tab-dn-on-ve-gp-gp-tb-hr-se-bd-cr, var(--_ctm-dn-on-ve-gp-gp-tb-hr-se-bd-cr) ) ); --_sf-tb-br-rs: var( --_ctm-mob-dn-on-ve-gp-gp-tb-hr-se-br-rs, var( --_ctm-tab-dn-on-ve-gp-gp-tb-hr-se-br-rs, var(--_ctm-dn-on-ve-gp-gp-tb-hr-se-br-rs) ) ); --_sf-tb-cr: var( --_ctm-mob-dn-on-ve-gp-gp-tb-hr-se-cr, var(--_ctm-tab-dn-on-ve-gp-gp-tb-hr-se-cr, var(--_ctm-dn-on-ve-gp-gp-tb-hr-se-cr)) ); --_sf-tb-ft-se: var( --_ctm-mob-dn-on-ve-gp-gp-tb-hr-se-ft-se, var( --_ctm-tab-dn-on-ve-gp-gp-tb-hr-se-ft-se, var(--_ctm-dn-on-ve-gp-gp-tb-hr-se-ft-se) ) ); --_sf-tb-ft-wt: var( --_ctm-mob-dn-on-ve-gp-gp-tb-hr-se-ft-wt, var( --_ctm-tab-dn-on-ve-gp-gp-tb-hr-se-ft-wt, var(--_ctm-dn-on-ve-gp-gp-tb-hr-se-ft-wt) ) ); } &.active { --_sf-tb-br-cr: var( --_ctm-mob-dn-on-ve-gp-gp-tb-sd-se-br-cr, var( --_ctm-tab-dn-on-ve-gp-gp-tb-sd-se-br-cr, var(--_ctm-dn-on-ve-gp-gp-tb-sd-se-br-cr) ) ); --_sf-tb-br-se: var( --_ctm-mob-dn-on-ve-gp-gp-tb-sd-se-br-se, var( --_ctm-tab-dn-on-ve-gp-gp-tb-sd-se-br-se, var(--_ctm-dn-on-ve-gp-gp-tb-sd-se-br-se) ) ); --_sf-tb-br-wh: var( --_ctm-mob-dn-on-ve-gp-gp-tb-sd-se-br-wh, var( --_ctm-tab-dn-on-ve-gp-gp-tb-sd-se-br-wh, var(--_ctm-dn-on-ve-gp-gp-tb-sd-se-br-wh) ) ); --_sf-tb-bd-cr: var( --_ctm-mob-dn-on-ve-gp-gp-tb-sd-se-bd-cr, var( --_ctm-tab-dn-on-ve-gp-gp-tb-sd-se-bd-cr, var(--_ctm-dn-on-ve-gp-gp-tb-sd-se-bd-cr) ) ); --_sf-tb-br-rs: var( --_ctm-mob-dn-on-ve-gp-gp-tb-sd-se-br-rs, var( --_ctm-tab-dn-on-ve-gp-gp-tb-sd-se-br-rs, var(--_ctm-dn-on-ve-gp-gp-tb-sd-se-br-rs) ) ); --_sf-tb-cr: var( --_ctm-mob-dn-on-ve-gp-gp-tb-sd-se-cr, var(--_ctm-tab-dn-on-ve-gp-gp-tb-sd-se-cr, var(--_ctm-dn-on-ve-gp-gp-tb-sd-se-cr)) ); --_sf-tb-ft-se: var( --_ctm-mob-dn-on-ve-gp-gp-tb-sd-se-ft-se, var( --_ctm-tab-dn-on-ve-gp-gp-tb-sd-se-ft-se, var(--_ctm-dn-on-ve-gp-gp-tb-sd-se-ft-se) ) ); --_sf-tb-ft-wt: var( --_ctm-mob-dn-on-ve-gp-gp-tb-sd-se-ft-wt, var( --_ctm-tab-dn-on-ve-gp-gp-tb-sd-se-ft-wt, var(--_ctm-dn-on-ve-gp-gp-tb-sd-se-ft-wt, 700) ) ); } .grouped__tab__dots { display: flex; gap: 2px; .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } } .grouped__tab__name { font-size: var( --_sf-tb-ft-se, var( --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-ft-se, var( --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-ft-se, var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-ft-se, 13px) ) ) ); font-weight: var( --_sf-tb-ft-wt, var( --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-ft-wt, var( --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-ft-wt, var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-ft-wt, 500) ) ) ); color: var( --_sf-tb-cr, var( --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-cr, var( --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-cr, var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-cr, #1a1a2e) ) ) ); font-family: var( --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-ft-fy, var( --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-ft-fy, var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-ft-fy) ) ); text-transform: var( --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-tt-tm, var( --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-tt-tm, var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-tt-tm) ) ); word-wrap: var( --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-wd-wp, var( --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-wd-wp, var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-wd-wp) ) ); word-break: var( --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-wd-bk, var( --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-wd-bk, var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-wd-bk) ) ); } .grouped__tab__info-trigger { display: inline-flex; cursor: pointer; flex-shrink: 0; .grouped__tab__info { display: inline-flex; align-items: center; justify-content: center; color: var( --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-in-c1, var( --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-in-c1, var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-in-c1, #6b7280) ) ); svg { width: var( --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-in-se, var( --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-in-se, var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-in-se, 16px) ) ); height: var( --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-in-se, var( --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-in-se, var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-in-se, 16px) ) ); } } } } } .grouped__content { display: flex; flex-direction: column; gap: var( --_ctm-mob-dn-on-ve-gp-ds-cd-dt-se-im-gp, var( --_ctm-tab-dn-on-ve-gp-ds-cd-dt-se-im-gp, var(--_ctm-dn-on-ve-gp-ds-cd-dt-se-im-gp, 8px) ) ); padding: var( --_ctm-mob-dn-on-ve-gp-ds-cd-dt-se-pg, var(--_ctm-tab-dn-on-ve-gp-ds-cd-dt-se-pg, var(--_ctm-dn-on-ve-gp-ds-cd-dt-se-pg)) ); // Stateful properties — read --_sf-cd-* which hover/active override background-color: var( --_sf-cd-bd-cr, var( --_ctm-mob-dn-on-ve-gp-ds-cd-dt-se-bd-cr, var( --_ctm-tab-dn-on-ve-gp-ds-cd-dt-se-bd-cr, var(--_ctm-dn-on-ve-gp-ds-cd-dt-se-bd-cr) ) ) ); border-color: var( --_sf-cd-br-cr, var( --_ctm-mob-dn-on-ve-gp-ds-cd-dt-se-br-cr, var( --_ctm-tab-dn-on-ve-gp-ds-cd-dt-se-br-cr, var(--_ctm-dn-on-ve-gp-ds-cd-dt-se-br-cr) ) ) ); border-style: var( --_sf-cd-br-se, var( --_ctm-mob-dn-on-ve-gp-ds-cd-dt-se-br-se, var( --_ctm-tab-dn-on-ve-gp-ds-cd-dt-se-br-se, var(--_ctm-dn-on-ve-gp-ds-cd-dt-se-br-se) ) ) ); border-width: var( --_sf-cd-br-wh, var( --_ctm-mob-dn-on-ve-gp-ds-cd-dt-se-br-wh, var( --_ctm-tab-dn-on-ve-gp-ds-cd-dt-se-br-wh, var(--_ctm-dn-on-ve-gp-ds-cd-dt-se-br-wh) ) ) ); border-radius: var( --_sf-cd-br-rs, var( --_ctm-mob-dn-on-ve-gp-ds-cd-dt-se-br-rs, var( --_ctm-tab-dn-on-ve-gp-ds-cd-dt-se-br-rs, var(--_ctm-dn-on-ve-gp-ds-cd-dt-se-br-rs) ) ) ); box-shadow: var( --_sf-cd-sw-ae, var( --_ctm-mob-dn-on-ve-gp-ds-cd-dt-se-sw-ae, var( --_ctm-tab-dn-on-ve-gp-ds-cd-dt-se-sw-ae, var(--_ctm-dn-on-ve-gp-ds-cd-dt-se-sw-ae) ) ) ) var( --_sf-cd-sw-br, var( --_ctm-mob-dn-on-ve-gp-ds-cd-dt-se-sw-br, var( --_ctm-tab-dn-on-ve-gp-ds-cd-dt-se-sw-br, var(--_ctm-dn-on-ve-gp-ds-cd-dt-se-sw-br) ) ) ) var( --_sf-cd-sw-sd, var( --_ctm-mob-dn-on-ve-gp-ds-cd-dt-se-sw-sd, var( --_ctm-tab-dn-on-ve-gp-ds-cd-dt-se-sw-sd, var(--_ctm-dn-on-ve-gp-ds-cd-dt-se-sw-sd) ) ) ) var( --_sf-cd-sw-cr, var( --_ctm-mob-dn-on-ve-gp-ds-cd-dt-se-sw-cr, var( --_ctm-tab-dn-on-ve-gp-ds-cd-dt-se-sw-cr, var(--_ctm-dn-on-ve-gp-ds-cd-dt-se-sw-cr) ) ) ); &:hover { --_sf-cd-bd-cr: var( --_ctm-mob-dn-on-ve-gp-ds-cd-hr-se-bd-cr, var( --_ctm-tab-dn-on-ve-gp-ds-cd-hr-se-bd-cr, var(--_ctm-dn-on-ve-gp-ds-cd-hr-se-bd-cr) ) ); --_sf-cd-br-cr: var( --_ctm-mob-dn-on-ve-gp-ds-cd-hr-se-br-cr, var( --_ctm-tab-dn-on-ve-gp-ds-cd-hr-se-br-cr, var(--_ctm-dn-on-ve-gp-ds-cd-hr-se-br-cr) ) ); --_sf-cd-br-se: var( --_ctm-mob-dn-on-ve-gp-ds-cd-hr-se-br-se, var( --_ctm-tab-dn-on-ve-gp-ds-cd-hr-se-br-se, var(--_ctm-dn-on-ve-gp-ds-cd-hr-se-br-se) ) ); --_sf-cd-br-wh: var( --_ctm-mob-dn-on-ve-gp-ds-cd-hr-se-br-wh, var( --_ctm-tab-dn-on-ve-gp-ds-cd-hr-se-br-wh, var(--_ctm-dn-on-ve-gp-ds-cd-hr-se-br-wh) ) ); --_sf-cd-br-rs: var( --_ctm-mob-dn-on-ve-gp-ds-cd-hr-se-br-rs, var( --_ctm-tab-dn-on-ve-gp-ds-cd-hr-se-br-rs, var(--_ctm-dn-on-ve-gp-ds-cd-hr-se-br-rs) ) ); --_sf-cd-sw-ae: var( --_ctm-mob-dn-on-ve-gp-ds-cd-hr-se-sw-ae, var( --_ctm-tab-dn-on-ve-gp-ds-cd-hr-se-sw-ae, var(--_ctm-dn-on-ve-gp-ds-cd-hr-se-sw-ae) ) ); --_sf-cd-sw-br: var( --_ctm-mob-dn-on-ve-gp-ds-cd-hr-se-sw-br, var( --_ctm-tab-dn-on-ve-gp-ds-cd-hr-se-sw-br, var(--_ctm-dn-on-ve-gp-ds-cd-hr-se-sw-br) ) ); --_sf-cd-sw-sd: var( --_ctm-mob-dn-on-ve-gp-ds-cd-hr-se-sw-sd, var( --_ctm-tab-dn-on-ve-gp-ds-cd-hr-se-sw-sd, var(--_ctm-dn-on-ve-gp-ds-cd-hr-se-sw-sd) ) ); --_sf-cd-sw-cr: var( --_ctm-mob-dn-on-ve-gp-ds-cd-hr-se-sw-cr, var( --_ctm-tab-dn-on-ve-gp-ds-cd-hr-se-sw-cr, var(--_ctm-dn-on-ve-gp-ds-cd-hr-se-sw-cr) ) ); } &.active { --_sf-cd-bd-cr: var( --_ctm-mob-dn-on-ve-gp-ds-cd-sd-se-bd-cr, var( --_ctm-tab-dn-on-ve-gp-ds-cd-sd-se-bd-cr, var(--_ctm-dn-on-ve-gp-ds-cd-sd-se-bd-cr) ) ); --_sf-cd-br-cr: var( --_ctm-mob-dn-on-ve-gp-ds-cd-sd-se-br-cr, var( --_ctm-tab-dn-on-ve-gp-ds-cd-sd-se-br-cr, var(--_ctm-dn-on-ve-gp-ds-cd-sd-se-br-cr) ) ); --_sf-cd-br-se: var( --_ctm-mob-dn-on-ve-gp-ds-cd-sd-se-br-se, var( --_ctm-tab-dn-on-ve-gp-ds-cd-sd-se-br-se, var(--_ctm-dn-on-ve-gp-ds-cd-sd-se-br-se) ) ); --_sf-cd-br-wh: var( --_ctm-mob-dn-on-ve-gp-ds-cd-sd-se-br-wh, var( --_ctm-tab-dn-on-ve-gp-ds-cd-sd-se-br-wh, var(--_ctm-dn-on-ve-gp-ds-cd-sd-se-br-wh) ) ); --_sf-cd-br-rs: var( --_ctm-mob-dn-on-ve-gp-ds-cd-sd-se-br-rs, var( --_ctm-tab-dn-on-ve-gp-ds-cd-sd-se-br-rs, var(--_ctm-dn-on-ve-gp-ds-cd-sd-se-br-rs) ) ); --_sf-cd-sw-ae: var( --_ctm-mob-dn-on-ve-gp-ds-cd-sd-se-sw-ae, var( --_ctm-tab-dn-on-ve-gp-ds-cd-sd-se-sw-ae, var(--_ctm-dn-on-ve-gp-ds-cd-sd-se-sw-ae) ) ); --_sf-cd-sw-br: var( --_ctm-mob-dn-on-ve-gp-ds-cd-sd-se-sw-br, var( --_ctm-tab-dn-on-ve-gp-ds-cd-sd-se-sw-br, var(--_ctm-dn-on-ve-gp-ds-cd-sd-se-sw-br) ) ); --_sf-cd-sw-sd: var( --_ctm-mob-dn-on-ve-gp-ds-cd-sd-se-sw-sd, var( --_ctm-tab-dn-on-ve-gp-ds-cd-sd-se-sw-sd, var(--_ctm-dn-on-ve-gp-ds-cd-sd-se-sw-sd) ) ); --_sf-cd-sw-cr: var( --_ctm-mob-dn-on-ve-gp-ds-cd-sd-se-sw-cr, var( --_ctm-tab-dn-on-ve-gp-ds-cd-sd-se-sw-cr, var(--_ctm-dn-on-ve-gp-ds-cd-sd-se-sw-cr) ) ); } .grouped__group__header { display: flex; align-items: center; gap: var( --_ctm-mob-dn-on-ve-gp-rn-im-gp, var(--_ctm-tab-dn-on-ve-gp-rn-im-gp, var(--_ctm-dn-on-ve-gp-rn-im-gp, 8px)) ); background-color: var( --_ctm-mob-dn-on-ve-gp-rn-bd-cr, var(--_ctm-tab-dn-on-ve-gp-rn-bd-cr, var(--_ctm-dn-on-ve-gp-rn-bd-cr, #f3f4f6)) ); padding: var( --_ctm-mob-dn-on-ve-gp-rn-pg, var(--_ctm-tab-dn-on-ve-gp-rn-pg, var(--_ctm-dn-on-ve-gp-rn-pg, 8px 12px)) ); border-color: var( --_ctm-mob-dn-on-ve-gp-rn-br-cr, var(--_ctm-tab-dn-on-ve-gp-rn-br-cr, var(--_ctm-dn-on-ve-gp-rn-br-cr)) ); border-style: var( --_ctm-mob-dn-on-ve-gp-rn-br-se, var(--_ctm-tab-dn-on-ve-gp-rn-br-se, var(--_ctm-dn-on-ve-gp-rn-br-se)) ); border-width: var( --_ctm-mob-dn-on-ve-gp-rn-br-wh, var(--_ctm-tab-dn-on-ve-gp-rn-br-wh, var(--_ctm-dn-on-ve-gp-rn-br-wh)) ); border-radius: var( --_ctm-mob-dn-on-ve-gp-rn-br-rs, var(--_ctm-tab-dn-on-ve-gp-rn-br-rs, var(--_ctm-dn-on-ve-gp-rn-br-rs)) ); box-shadow: var( --_ctm-mob-dn-on-ve-gp-rn-sw-ae, var(--_ctm-tab-dn-on-ve-gp-rn-sw-ae, var(--_ctm-dn-on-ve-gp-rn-sw-ae, 0px)) ) var( --_ctm-mob-dn-on-ve-gp-rn-sw-br, var(--_ctm-tab-dn-on-ve-gp-rn-sw-br, var(--_ctm-dn-on-ve-gp-rn-sw-br, 0px)) ) var( --_ctm-mob-dn-on-ve-gp-rn-sw-sd, var(--_ctm-tab-dn-on-ve-gp-rn-sw-sd, var(--_ctm-dn-on-ve-gp-rn-sw-sd, 0px)) ) var( --_ctm-mob-dn-on-ve-gp-rn-sw-cr, var( --_ctm-tab-dn-on-ve-gp-rn-sw-cr, var(--_ctm-dn-on-ve-gp-rn-sw-cr, transparent) ) ); .grouped__header__dots { display: flex; gap: 3px; .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } } span { font-size: var( --_ctm-mob-dn-on-ve-gp-rn-ft-se, var(--_ctm-tab-dn-on-ve-gp-rn-ft-se, var(--_ctm-dn-on-ve-gp-rn-ft-se, 13px)) ); font-weight: var( --_ctm-mob-dn-on-ve-gp-rn-ft-wt, var(--_ctm-tab-dn-on-ve-gp-rn-ft-wt, var(--_ctm-dn-on-ve-gp-rn-ft-wt, 700)) ); color: var( --_ctm-mob-dn-on-ve-gp-rn-cr, var(--_ctm-tab-dn-on-ve-gp-rn-cr, var(--_ctm-dn-on-ve-gp-rn-cr, #1a1a2e)) ); font-family: var( --_ctm-mob-dn-on-ve-gp-rn-ft-fy, var(--_ctm-tab-dn-on-ve-gp-rn-ft-fy, var(--_ctm-dn-on-ve-gp-rn-ft-fy)) ); text-transform: var( --_ctm-mob-dn-on-ve-gp-rn-tt-tm, var(--_ctm-tab-dn-on-ve-gp-rn-tt-tm, var(--_ctm-dn-on-ve-gp-rn-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-on-ve-gp-rn-wd-wp, var(--_ctm-tab-dn-on-ve-gp-rn-wd-wp, var(--_ctm-dn-on-ve-gp-rn-wd-wp)) ); word-break: var( --_ctm-mob-dn-on-ve-gp-rn-wd-bk, var(--_ctm-tab-dn-on-ve-gp-rn-wd-bk, var(--_ctm-dn-on-ve-gp-rn-wd-bk)) ); } } // .select__group { // padding: 12px; // flex-wrap: wrap; // } } .grouped__selected__indicator { display: flex; align-items: center; gap: var( --_ctm-mob-dn-on-ve-gp-sd-ve-im-gp, var(--_ctm-tab-dn-on-ve-gp-sd-ve-im-gp, var(--_ctm-dn-on-ve-gp-sd-ve-im-gp, 8px)) ); padding: var( --_ctm-mob-dn-on-ve-gp-sd-ve-pg, var(--_ctm-tab-dn-on-ve-gp-sd-ve-pg, var(--_ctm-dn-on-ve-gp-sd-ve-pg, 10px 12px)) ); background-color: var( --_ctm-mob-dn-on-ve-gp-sd-ve-bd-cr, var(--_ctm-tab-dn-on-ve-gp-sd-ve-bd-cr, var(--_ctm-dn-on-ve-gp-sd-ve-bd-cr)) ); border-color: var( --_ctm-mob-dn-on-ve-gp-sd-ve-br-cr, var(--_ctm-tab-dn-on-ve-gp-sd-ve-br-cr, var(--_ctm-dn-on-ve-gp-sd-ve-br-cr)) ); border-style: var( --_ctm-mob-dn-on-ve-gp-sd-ve-br-se, var(--_ctm-tab-dn-on-ve-gp-sd-ve-br-se, var(--_ctm-dn-on-ve-gp-sd-ve-br-se)) ); border-width: var( --_ctm-mob-dn-on-ve-gp-sd-ve-br-wh, var(--_ctm-tab-dn-on-ve-gp-sd-ve-br-wh, var(--_ctm-dn-on-ve-gp-sd-ve-br-wh)) ); border-radius: var( --_ctm-mob-dn-on-ve-gp-sd-ve-br-rs, var(--_ctm-tab-dn-on-ve-gp-sd-ve-br-rs, var(--_ctm-dn-on-ve-gp-sd-ve-br-rs)) ); box-shadow: var( --_ctm-mob-dn-on-ve-gp-sd-ve-sw-ae, var(--_ctm-tab-dn-on-ve-gp-sd-ve-sw-ae, var(--_ctm-dn-on-ve-gp-sd-ve-sw-ae, 0px)) ) var( --_ctm-mob-dn-on-ve-gp-sd-ve-sw-br, var(--_ctm-tab-dn-on-ve-gp-sd-ve-sw-br, var(--_ctm-dn-on-ve-gp-sd-ve-sw-br, 0px)) ) var( --_ctm-mob-dn-on-ve-gp-sd-ve-sw-sd, var(--_ctm-tab-dn-on-ve-gp-sd-ve-sw-sd, var(--_ctm-dn-on-ve-gp-sd-ve-sw-sd, 0px)) ) var( --_ctm-mob-dn-on-ve-gp-sd-ve-sw-cr, var( --_ctm-tab-dn-on-ve-gp-sd-ve-sw-cr, var(--_ctm-dn-on-ve-gp-sd-ve-sw-cr, transparent) ) ); .grouped__indicator__dot { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; outline: 2px solid #1a1a2e; outline-offset: 3px; } // Reuses the real swatch markup (SelectColor's renderItems) so the // indicator matches the swatch shape/image type. It carries the // `.select__group` class for item styling, so reset the group's own // layout padding/wrap here. .grouped__indicator__swatch { padding: 0; flex: 0 0 auto; width: auto; // Display-only: it just shows the selected value, so block the // swatch's click/hover interaction. pointer-events: none; } // "Selected:" label — driven by the Label (p1 / `-dc`) typography set. .grouped__indicator__value { color: var( --_ctm-mob-dn-on-ve-gp-sd-ve-cr-dc, var(--_ctm-tab-dn-on-ve-gp-sd-ve-cr-dc, var(--_ctm-dn-on-ve-gp-sd-ve-cr-dc, #333)) ); font-family: var( --_ctm-mob-dn-on-ve-gp-sd-ve-ft-fy-dc, var(--_ctm-tab-dn-on-ve-gp-sd-ve-ft-fy-dc, var(--_ctm-dn-on-ve-gp-sd-ve-ft-fy-dc)) ); text-transform: var( --_ctm-mob-dn-on-ve-gp-sd-ve-tt-tm-dc, var(--_ctm-tab-dn-on-ve-gp-sd-ve-tt-tm-dc, var(--_ctm-dn-on-ve-gp-sd-ve-tt-tm-dc)) ); word-wrap: var( --_ctm-mob-dn-on-ve-gp-sd-ve-wd-wp-dc, var(--_ctm-tab-dn-on-ve-gp-sd-ve-wd-wp-dc, var(--_ctm-dn-on-ve-gp-sd-ve-wd-wp-dc)) ); word-break: var( --_ctm-mob-dn-on-ve-gp-sd-ve-wd-bk-dc, var(--_ctm-tab-dn-on-ve-gp-sd-ve-wd-bk-dc, var(--_ctm-dn-on-ve-gp-sd-ve-wd-bk-dc)) ); font-size: var( --_ctm-mob-dn-on-ve-gp-sd-ve-ft-se-dc, var( --_ctm-tab-dn-on-ve-gp-sd-ve-ft-se-dc, var(--_ctm-dn-on-ve-gp-sd-ve-ft-se-dc, 14px) ) ); font-weight: var( --_ctm-mob-dn-on-ve-gp-sd-ve-ft-wt-dc, var(--_ctm-tab-dn-on-ve-gp-sd-ve-ft-wt-dc, var(--_ctm-dn-on-ve-gp-sd-ve-ft-wt-dc)) ); font-style: var( --_ctm-mob-dn-on-ve-gp-sd-ve-ft-se-ic-dc, var( --_ctm-tab-dn-on-ve-gp-sd-ve-ft-se-ic-dc, var(--_ctm-dn-on-ve-gp-sd-ve-ft-se-ic-dc) ) ); text-align: var( --_ctm-mob-dn-on-ve-gp-sd-ve-tt-an-dc, var(--_ctm-tab-dn-on-ve-gp-sd-ve-tt-an-dc, var(--_ctm-dn-on-ve-gp-sd-ve-tt-an-dc)) ); letter-spacing: var( --_ctm-mob-dn-on-ve-gp-sd-ve-lr-sg-dc, var(--_ctm-tab-dn-on-ve-gp-sd-ve-lr-sg-dc, var(--_ctm-dn-on-ve-gp-sd-ve-lr-sg-dc)) ); line-height: var( --_ctm-mob-dn-on-ve-gp-sd-ve-le-ht-dc, var(--_ctm-tab-dn-on-ve-gp-sd-ve-le-ht-dc, var(--_ctm-dn-on-ve-gp-sd-ve-le-ht-dc)) ); text-decoration: var( --_ctm-mob-dn-on-ve-gp-sd-ve-ue-dc, var(--_ctm-tab-dn-on-ve-gp-sd-ve-ue-dc, var(--_ctm-dn-on-ve-gp-sd-ve-ue-dc)) ); } // Selected value name — driven by the Value (h3) typography set. .grouped__indicator__label { color: var( --_ctm-mob-dn-on-ve-gp-sd-ve-cr, var(--_ctm-tab-dn-on-ve-gp-sd-ve-cr, var(--_ctm-dn-on-ve-gp-sd-ve-cr, #1a1a2e)) ); font-family: var( --_ctm-mob-dn-on-ve-gp-sd-ve-ft-fy, var(--_ctm-tab-dn-on-ve-gp-sd-ve-ft-fy, var(--_ctm-dn-on-ve-gp-sd-ve-ft-fy)) ); text-transform: var( --_ctm-mob-dn-on-ve-gp-sd-ve-tt-tm, var(--_ctm-tab-dn-on-ve-gp-sd-ve-tt-tm, var(--_ctm-dn-on-ve-gp-sd-ve-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-on-ve-gp-sd-ve-wd-wp, var(--_ctm-tab-dn-on-ve-gp-sd-ve-wd-wp, var(--_ctm-dn-on-ve-gp-sd-ve-wd-wp)) ); word-break: var( --_ctm-mob-dn-on-ve-gp-sd-ve-wd-bk, var(--_ctm-tab-dn-on-ve-gp-sd-ve-wd-bk, var(--_ctm-dn-on-ve-gp-sd-ve-wd-bk)) ); font-size: var( --_ctm-mob-dn-on-ve-gp-sd-ve-ft-se, var(--_ctm-tab-dn-on-ve-gp-sd-ve-ft-se, var(--_ctm-dn-on-ve-gp-sd-ve-ft-se, 14px)) ); font-weight: var( --_ctm-mob-dn-on-ve-gp-sd-ve-ft-wt, var(--_ctm-tab-dn-on-ve-gp-sd-ve-ft-wt, var(--_ctm-dn-on-ve-gp-sd-ve-ft-wt, 700)) ); font-style: var( --_ctm-mob-dn-on-ve-gp-sd-ve-ft-se-ic, var(--_ctm-tab-dn-on-ve-gp-sd-ve-ft-se-ic, var(--_ctm-dn-on-ve-gp-sd-ve-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-on-ve-gp-sd-ve-tt-an, var(--_ctm-tab-dn-on-ve-gp-sd-ve-tt-an, var(--_ctm-dn-on-ve-gp-sd-ve-tt-an)) ); letter-spacing: var( --_ctm-mob-dn-on-ve-gp-sd-ve-lr-sg, var(--_ctm-tab-dn-on-ve-gp-sd-ve-lr-sg, var(--_ctm-dn-on-ve-gp-sd-ve-lr-sg)) ); line-height: var( --_ctm-mob-dn-on-ve-gp-sd-ve-le-ht, var(--_ctm-tab-dn-on-ve-gp-sd-ve-le-ht, var(--_ctm-dn-on-ve-gp-sd-ve-le-ht)) ); text-decoration: var( --_ctm-mob-dn-on-ve-gp-sd-ve-ue, var(--_ctm-tab-dn-on-ve-gp-sd-ve-ue, var(--_ctm-dn-on-ve-gp-sd-ve-ue)) ); } } // Group-description popover. Rendered at the picker root (absolute, // relative to `.grouped__option__picker`) so the scrolling tabs can't // clip it. Inline top/left come from JS; styling is design-var driven. .grouped__info__popover { z-index: 1000; min-width: 150px; max-width: 200px; display: flex; flex-direction: column; transform: translateX(-50%); gap: var( --_ctm-mob-dn-on-ve-gp-pr-se-im-gp, var(--_ctm-tab-dn-on-ve-gp-pr-se-im-gp, var(--_ctm-dn-on-ve-gp-pr-se-im-gp, 4px)) ); background-color: var( --_ctm-mob-dn-on-ve-gp-pr-se-bd-cr, var(--_ctm-tab-dn-on-ve-gp-pr-se-bd-cr, var(--_ctm-dn-on-ve-gp-pr-se-bd-cr, #fff)) ); border-color: var( --_ctm-mob-dn-on-ve-gp-pr-se-br-cr, var(--_ctm-tab-dn-on-ve-gp-pr-se-br-cr, var(--_ctm-dn-on-ve-gp-pr-se-br-cr, #e5e7eb)) ); border-style: var( --_ctm-mob-dn-on-ve-gp-pr-se-br-se, var(--_ctm-tab-dn-on-ve-gp-pr-se-br-se, var(--_ctm-dn-on-ve-gp-pr-se-br-se, solid)) ); border-width: var( --_ctm-mob-dn-on-ve-gp-pr-se-br-wh, var(--_ctm-tab-dn-on-ve-gp-pr-se-br-wh, var(--_ctm-dn-on-ve-gp-pr-se-br-wh, 1px)) ); border-radius: var( --_ctm-mob-dn-on-ve-gp-pr-se-br-rs, var(--_ctm-tab-dn-on-ve-gp-pr-se-br-rs, var(--_ctm-dn-on-ve-gp-pr-se-br-rs, 4px)) ); padding: var( --_ctm-mob-dn-on-ve-gp-pr-se-pg, var(--_ctm-tab-dn-on-ve-gp-pr-se-pg, var(--_ctm-dn-on-ve-gp-pr-se-pg, 8px)) ); box-shadow: var( --_ctm-mob-dn-on-ve-gp-pr-se-sw-ae, var(--_ctm-tab-dn-on-ve-gp-pr-se-sw-ae, var(--_ctm-dn-on-ve-gp-pr-se-sw-ae, 0px)) ) var( --_ctm-mob-dn-on-ve-gp-pr-se-sw-br, var(--_ctm-tab-dn-on-ve-gp-pr-se-sw-br, var(--_ctm-dn-on-ve-gp-pr-se-sw-br, 4px)) ) var( --_ctm-mob-dn-on-ve-gp-pr-se-sw-sd, var(--_ctm-tab-dn-on-ve-gp-pr-se-sw-sd, var(--_ctm-dn-on-ve-gp-pr-se-sw-sd, 12px)) ) var( --_ctm-mob-dn-on-ve-gp-pr-se-sw-cr, var( --_ctm-tab-dn-on-ve-gp-pr-se-sw-cr, var(--_ctm-dn-on-ve-gp-pr-se-sw-cr, rgba(0, 0, 0, 0.15)) ) ); .popover-arrow { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; background-color: var( --_ctm-mob-dn-on-ve-gp-pr-se-bd-cr, var(--_ctm-tab-dn-on-ve-gp-pr-se-bd-cr, var(--_ctm-dn-on-ve-gp-pr-se-bd-cr, #fff)) ); transform: translateX(-50%) rotate(45deg); box-shadow: -1px -1px 0px var( --_ctm-mob-dn-on-ve-gp-pr-se-br-cr, var( --_ctm-tab-dn-on-ve-gp-pr-se-br-cr, var(--_ctm-dn-on-ve-gp-pr-se-br-cr, #e5e7eb) ) ); } .popover_item { margin: 0; line-height: 1.4; // `.variant__container` sets `white-space: nowrap`, which inherits // here and would force the description onto one overflowing line. white-space: normal; overflow-wrap: break-word; word-break: break-word; color: var( --_ctm-mob-dn-on-ve-gp-pr-se-cr, var(--_ctm-tab-dn-on-ve-gp-pr-se-cr, var(--_ctm-dn-on-ve-gp-pr-se-cr, #1a1a2e)) ); font-size: var( --_ctm-mob-dn-on-ve-gp-pr-se-ft-se, var(--_ctm-tab-dn-on-ve-gp-pr-se-ft-se, var(--_ctm-dn-on-ve-gp-pr-se-ft-se, 12px)) ); font-weight: var( --_ctm-mob-dn-on-ve-gp-pr-se-ft-wt, var(--_ctm-tab-dn-on-ve-gp-pr-se-ft-wt, var(--_ctm-dn-on-ve-gp-pr-se-ft-wt, 400)) ); font-family: var( --_ctm-mob-dn-on-ve-gp-pr-se-ft-fy, var(--_ctm-tab-dn-on-ve-gp-pr-se-ft-fy, var(--_ctm-dn-on-ve-gp-pr-se-ft-fy)) ); text-transform: var( --_ctm-mob-dn-on-ve-gp-pr-se-tt-tm, var(--_ctm-tab-dn-on-ve-gp-pr-se-tt-tm, var(--_ctm-dn-on-ve-gp-pr-se-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-on-ve-gp-pr-se-wd-wp, var(--_ctm-tab-dn-on-ve-gp-pr-se-wd-wp, var(--_ctm-dn-on-ve-gp-pr-se-wd-wp)) ); } } } // Select Fit and Size .select__fit { font-size: 16px; color: var(--_gray-500); display: flex; flex-direction: column; gap: var( --_ctm-mob-lt-on-te-ve-sg, var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg)) ); // padding: var( // --_ctm-mob-lt-se-st-dy-se-im-pg, // var(--_ctm-tab-lt-se-st-dy-se-im-pg, var(--_ctm-lt-se-st-dy-se-im-pg)) // ); .select__group { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; flex-direction: row; gap: var( --_ctm-mob-lt-se-st-dy-se-im-sg, var(--_ctm-tab-lt-se-st-dy-se-im-sg, var(--_ctm-lt-se-st-dy-se-im-sg)) ); &[data-single-dispaly="Vertically"] { flex-direction: column; } &[data-single-overflow="Scroll"] { overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; } &[data-swatch-overflow="Scroll"] { overflow-x: auto; flex-wrap: nowrap; overflow-y: hidden; } .show_more_button { background-color: var( --_ctm-mob-dn-sw-me-is-bn-bd-cr, var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr)) ); font-family: var( --_ctm-mob-dn-sw-me-is-bn-ft-fy, var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy)) ); text-transform: var( --_ctm-mob-dn-sw-me-is-bn-tt-tm, var(--_ctm-tab-dn-sw-me-is-bn-tt-tm, var(--_ctm-dn-sw-me-is-bn-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-sw-me-is-bn-wd-wp, var(--_ctm-tab-dn-sw-me-is-bn-wd-wp, var(--_ctm-dn-sw-me-is-bn-wd-wp)) ); word-break: var( --_ctm-mob-dn-sw-me-is-bn-wd-bk, var(--_ctm-tab-dn-sw-me-is-bn-wd-bk, var(--_ctm-dn-sw-me-is-bn-wd-bk)) ); border-color: var( --_ctm-mob-dn-sw-me-is-bn-br-cr, var(--_ctm-tab-dn-sw-me-is-bn-br-cr, var(--_ctm-dn-sw-me-is-bn-br-cr)) ); border-radius: var( --_ctm-mob-dn-sw-me-is-bn-br-rs, var(--_ctm-tab-dn-sw-me-is-bn-br-rs, var(--_ctm-dn-sw-me-is-bn-br-rs)) ); border-style: var( --_ctm-mob-dn-sw-me-is-bn-br-se, var(--_ctm-tab-dn-sw-me-is-bn-br-se, var(--_ctm-dn-sw-me-is-bn-br-se)) ); border-width: var( --_ctm-mob-dn-sw-me-is-bn-br-wh, var(--_ctm-tab-dn-sw-me-is-bn-br-wh, var(--_ctm-dn-sw-me-is-bn-br-wh)) ); font-size: var( --_ctm-mob-dn-sw-me-is-bn-ft-se, var(--_ctm-tab-dn-sw-me-is-bn-ft-se, var(--_ctm-dn-sw-me-is-bn-ft-se)) ); font-style: var( --_ctm-mob-dn-sw-me-is-bn-ft-se-ic, var(--_ctm-tab-dn-sw-me-is-bn-ft-se-ic, var(--_ctm-dn-sw-me-is-bn-ft-se-ic)) ); font-weight: var( --_ctm-mob-dn-sw-me-is-bn-ft-wt, var(--_ctm-tab-dn-sw-me-is-bn-ft-wt, var(--_ctm-dn-sw-me-is-bn-ft-wt)) ); line-height: var( --_ctm-mob-dn-sw-me-is-bn-le-ht, var(--_ctm-tab-dn-sw-me-is-bn-le-ht, var(--_ctm-dn-sw-me-is-bn-le-ht)) ); letter-spacing: var( --_ctm-mob-dn-sw-me-is-bn-lr-sg, var(--_ctm-tab-dn-sw-me-is-bn-lr-sg, var(--_ctm-dn-sw-me-is-bn-lr-sg)) ); box-shadow: var( --_ctm-mob-dn-sw-me-is-bn-sw-ae, var(--_ctm-tab-dn-sw-me-is-bn-sw-ae, var(--_ctm-dn-sw-me-is-bn-sw-ae)) ) var( --_ctm-mob-dn-sw-me-is-bn-sw-br, var(--_ctm-tab-dn-sw-me-is-bn-sw-br, var(--_ctm-dn-sw-me-is-bn-sw-br)) ) var( --_ctm-mob-dn-sw-me-is-bn-sw-sd, var(--_ctm-tab-dn-sw-me-is-bn-sw-sd, var(--_ctm-dn-sw-me-is-bn-sw-sd)) ) var( --_ctm-mob-dn-sw-me-is-bn-sw-cr, var(--_ctm-tab-dn-sw-me-is-bn-sw-cr, var(--_ctm-dn-sw-me-is-bn-sw-cr)) ); text-align: var( --_ctm-mob-dn-sw-me-is-bn-tt-an, var(--_ctm-tab-dn-sw-me-is-bn-tt-an, var(--_ctm-dn-sw-me-is-bn-tt-an)) ); color: var( --_ctm-mob-dn-sw-me-is-bn-tt-cr, var(--_ctm-tab-dn-sw-me-is-bn-tt-cr, var(--_ctm-dn-sw-me-is-bn-tt-cr)) ); text-decoration: var( --_ctm-mob-dn-sw-me-is-bn-ue, var(--_ctm-tab-dn-sw-me-is-bn-ue, var(--_ctm-dn-sw-me-is-bn-ue)) ); } &[data-single-dispaly="Grid"] { display: grid; grid-template-columns: repeat( var( --_ctm-mob-lt-se-st-dy-se-is-pr-rw, var(--_ctm-tab-lt-se-st-dy-se-is-pr-rw, var(--_ctm-lt-se-st-dy-se-is-pr-rw)) ), minmax(auto, 1fr) ); } .select__group__item { transition: color 0.3s ease; // border-radius: 6px; // border: 1px solid var(--_gray-200); cursor: pointer; display: flex; align-items: center; justify-content: center; // height: prepareMediaVariable(--_ctm-lt-se-st-dy-se-im-se); // width: prepareMediaVariable(--_ctm-lt-se-st-dy-se-im-se); padding: prepareMediaVariable(--_ctm-lt-se-st-dy-se-im-pg); min-width: 20px; min-height: 20px; box-sizing: content-box; border-radius: var( --_ctm-mob-dn-se-on-ve-se-dt-se-br-rs, var(--_ctm-tab-dn-se-on-ve-se-dt-se-br-rs, var(--_ctm-dn-se-on-ve-se-dt-se-br-rs)) ); border-color: var( --_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-cr) ); background-color: var( --_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-bd-cr) ); border-style: var( --_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-se) ); border-width: var( --_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-wh) ); box-shadow: var( --_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-ae) ) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-cr)); // font is pending color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-cr)); font-family: var( --_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-fy) ); text-transform: var( --_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-tt-tm) ); word-wrap: var( --_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-wd-wp) ); word-break: var( --_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-wd-bk) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var( --_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se) ); font-weight: var( --_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-wt) ); font-style: var( --_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se-ic) ); text-align: var( --_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-tt-an) ); letter-spacing: var( --_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-lr-sg) ); line-height: var( --_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-le-ht) ); text-decoration: var( --_sf-hr-ue, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ue) ); &[data-background-shape="circle"] { border-radius: 50%; } // &[data-background-shape="square"] { // border-radius: 5px; // } &[data-background-shape="capsule"] { border-radius: 40px; /* Full pill shape */ box-sizing: border-box; } &:hover { --_sf-hr-bd-cr: var( --_ctm-mob-dn-se-on-ve-se-hr-se-bd-cr, var(--_ctm-tab-dn-se-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-se-on-ve-se-hr-se-bd-cr)) ); --_sf-hr-br-cr: var( --_ctm-mob-dn-se-on-ve-se-hr-se-br-cr, var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-cr, var(--_ctm-dn-se-on-ve-se-hr-se-br-cr)) ); --_sf-hr-br-se: var( --_ctm-mob-dn-se-on-ve-se-hr-se-br-se, var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-se, var(--_ctm-dn-se-on-ve-se-hr-se-br-se)) ); --_sf-hr-br-wh: var( --_ctm-mob-dn-se-on-ve-se-hr-se-br-wh, var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-wh, var(--_ctm-dn-se-on-ve-se-hr-se-br-wh)) ); --_sf-hr-br-bs: var( --_ctm-mob-dn-se-on-ve-se-hr-se-br-rs, var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-rs, var(--_ctm-dn-se-on-ve-se-hr-se-br-rs)) ); // new --_sf-hr-sw-ae: var( --_ctm-mob-dn-se-on-ve-se-hr-se-sw-ae, var(--_ctm-tab-dn-se-on-ve-se-hr-se-sw-ae, var(--_ctm-dn-se-on-ve-se-hr-se-sw-ae)) ); --_sf-hr-sw-br: var( --_ctm-mob-dn-se-on-ve-se-hr-se-sw-br, var(--_ctm-tab-dn-se-on-ve-se-hr-se-sw-br, var(--_ctm-dn-se-on-ve-se-hr-se-sw-br)) ); --_sf-hr-sw-hr: var( --_ctm-mob-dn-se-on-ve-se-hr-se-sw-hr, var(--_ctm-tab-dn-se-on-ve-se-hr-se-sw-hr, var(--_ctm-dn-se-on-ve-se-hr-se-sw-hr)) ); --_sf-hr-sw-cr: var( --_ctm-mob-dn-se-on-ve-se-hr-se-sw-cr, var(--_ctm-tab-dn-se-on-ve-se-hr-se-sw-cr, var(--_ctm-dn-se-on-ve-se-hr-se-sw-cr)) ); // for font --_sf-hr-cr: var( --_ctm-mob-dn-se-on-ve-se-hr-se-cr, var(--_ctm-tab-dn-se-on-ve-se-hr-se-cr, var(--_ctm-dn-se-on-ve-se-hr-se-cr)) ); --_sf-hr-ft-fy: var( --_ctm-mob-dn-se-on-ve-se-hr-se-ft-fy, var(--_ctm-tab-dn-se-on-ve-se-hr-se-ft-fy, var(--_ctm-dn-se-on-ve-se-hr-se-ft-fy)) ); --_sf-hr-tt-tm: var( --_ctm-mob-dn-se-on-ve-se-hr-se-tt-tm, var(--_ctm-tab-dn-se-on-ve-se-hr-se-tt-tm, var(--_ctm-dn-se-on-ve-se-hr-se-tt-tm)) ); --_sf-hr-wd-wp: var( --_ctm-mob-dn-se-on-ve-se-hr-se-wd-wp, var(--_ctm-tab-dn-se-on-ve-se-hr-se-wd-wp, var(--_ctm-dn-se-on-ve-se-hr-se-wd-wp)) ); --_sf-hr-wd-bk: var( --_ctm-mob-dn-se-on-ve-se-hr-se-wd-bk, var(--_ctm-tab-dn-se-on-ve-se-hr-se-wd-bk, var(--_ctm-dn-se-on-ve-se-hr-se-wd-bk)) ); --_sf-hr-ft-se: var( --_ctm-mob-dn-se-on-ve-se-hr-se-ft-se, var(--_ctm-tab-dn-se-on-ve-se-hr-se-ft-se, var(--_ctm-dn-se-on-ve-se-hr-se-ft-se)) ); --_sf-hr-ft-wt: var( --_ctm-mob-dn-se-on-ve-se-hr-se-ft-wt, var(--_ctm-tab-dn-se-on-ve-se-hr-se-ft-wt, var(--_ctm-dn-se-on-ve-se-hr-se-ft-wt)) ); --_sf-hr-ft-se-ic: var( --_ctm-mob-dn-se-on-ve-se-hr-se-ft-se-ic, var( --_ctm-tab-dn-se-on-ve-se-hr-se-ft-se-ic, var(--_ctm-dn-se-on-ve-se-hr-se-ft-se-ic) ) ); --_sf-hr-tt-an: var( --_ctm-mob-dn-se-on-ve-se-hr-se-tt-an, var(--_ctm-tab-dn-se-on-ve-se-hr-se-tt-an, var(--_ctm-dn-se-on-ve-se-hr-se-tt-an)) ); --_sf-hr-lr-sg: var( --_ctm-mob-dn-se-on-ve-se-hr-se-lr-sg, var(--_ctm-tab-dn-se-on-ve-se-hr-se-lr-sg, var(--_ctm-dn-se-on-ve-se-hr-se-lr-sg)) ); --_sf-hr-le-ht: var( --_ctm-mob-dn-se-on-ve-se-hr-se-le-ht, var(--_ctm-tab-dn-se-on-ve-se-hr-se-le-ht, var(--_ctm-dn-se-on-ve-se-hr-se-le-ht)) ); --_sf-hr-ue: var( --_ctm-mob-dn-on-ve-se-hr-se-ue, var(--_ctm-tab-dn-on-ve-se-hr-se-ue, var(--_ctm-dn-on-ve-se-hr-se-ue)) ); } &.child { border: 0; border-radius: 0; border-bottom: 2px solid var(--_gray-200); } &[data-selected="true"] { --_sf-sd-bd-cr: var( --_ctm-mob-dn-se-on-ve-se-sd-se-bd-cr, var(--_ctm-tab-dn-se-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-se-on-ve-se-sd-se-bd-cr)) ); --_sf-sd-br-cr: var( --_ctm-mob-dn-se-on-ve-se-sd-se-br-cr, var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-cr, var(--_ctm-dn-se-on-ve-se-sd-se-br-cr)) ); --_sf-sd-br-se: var( --_ctm-mob-dn-se-on-ve-se-sd-se-br-se, var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-se, var(--_ctm-dn-se-on-ve-se-sd-se-br-se)) ); --_sf-sd-br-wh: var( --_ctm-mob-dn-se-on-ve-se-sd-se-br-wh, var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-wh, var(--_ctm-dn-se-on-ve-se-sd-se-br-wh)) ); --_sf-sd-br-bs: var( --_ctm-mob-dn-se-on-ve-se-sd-se-br-rs, var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-rs, var(--_ctm-dn-se-on-ve-se-sd-se-br-rs)) ); // new --_sf-sd-sw-ae: var( --_ctm-mob-dn-on-ve-se-sd-se-sw-ae, var(--_ctm-tab-dn-se-on-ve-se-sd-se-sw-ae, var(--_ctm-dn-se-on-ve-se-sd-se-sw-ae)) ); --_sf-sd-sw-br: var( --_ctm-mob-dn-on-ve-se-sd-se-sw-br, var(--_ctm-tab-dn-se-on-ve-se-sd-se-sw-br, var(--_ctm-dn-se-on-ve-se-sd-se-sw-br)) ); --_sf-sd-sw-hr: var( --_ctm-mob-dn-on-ve-se-sd-se-sw-hr, var(--_ctm-tab-dn-se-on-ve-se-sd-se-sw-hr, var(--_ctm-dn-se-on-ve-se-sd-se-sw-hr)) ); --_sf-sd-sw-cr: var( --_ctm-mob-dn-on-ve-se-sd-se-sw-cr, var(--_ctm-tab-dn-se-on-ve-se-sd-se-sw-cr, var(--_ctm-dn-se-on-ve-se-sd-se-sw-cr)) ); // for font --_sf-sd-cr: var( --_ctm-mob-dn-se-on-ve-se-sd-se-cr, var(--_ctm-tab-dn-se-on-ve-se-sd-se-cr, var(--_ctm-dn-se-on-ve-se-sd-se-cr)) ); --_sf-sd-ft-fy: var( --_ctm-mob-dn-se-on-ve-se-sd-se-ft-fy, var(--_ctm-tab-dn-se-on-ve-se-sd-se-ft-fy, var(--_ctm-dn-se-on-ve-se-sd-se-ft-fy)) ); --_sf-sd-tt-tm: var( --_ctm-mob-dn-se-on-ve-se-sd-se-tt-tm, var(--_ctm-tab-dn-se-on-ve-se-sd-se-tt-tm, var(--_ctm-dn-se-on-ve-se-sd-se-tt-tm)) ); --_sf-sd-wd-wp: var( --_ctm-mob-dn-se-on-ve-se-sd-se-wd-wp, var(--_ctm-tab-dn-se-on-ve-se-sd-se-wd-wp, var(--_ctm-dn-se-on-ve-se-sd-se-wd-wp)) ); --_sf-sd-wd-bk: var( --_ctm-mob-dn-se-on-ve-se-sd-se-wd-bk, var(--_ctm-tab-dn-se-on-ve-se-sd-se-wd-bk, var(--_ctm-dn-se-on-ve-se-sd-se-wd-bk)) ); --_sf-sd-ft-se: var( --_ctm-mob-dn-se-on-ve-se-sd-se-ft-se, var(--_ctm-tab-dn-se-on-ve-se-sd-se-ft-se, var(--_ctm-dn-se-on-ve-se-sd-se-ft-se)) ); --_sf-sd-ft-wt: var( --_ctm-mob-dn-se-on-ve-se-sd-se-ft-wt, var(--_ctm-tab-dn-se-on-ve-se-sd-se-ft-wt, var(--_ctm-dn-se-on-ve-se-sd-se-ft-wt)) ); --_sf-sd-ft-se-ic: var( --_ctm-mob-dn-se-on-ve-se-sd-se-ft-se-ic, var( --_ctm-tab-dn-se-on-ve-se-sd-se-ft-se-ic, var(--_ctm-dn-se-on-ve-se-sd-se-ft-se-ic) ) ); --_sf-sd-tt-an: var( --_ctm-mob-dn-se-on-ve-se-sd-se-tt-an, var(--_ctm-tab-dn-se-on-ve-se-sd-se-tt-an, var(--_ctm-dn-se-on-ve-se-sd-se-tt-an)) ); --_sf-sd-lr-sg: var( --_ctm-mob-dn-se-on-ve-se-sd-se-lr-sg, var(--_ctm-tab-dn-se-on-ve-se-sd-se-lr-sg, var(--_ctm-dn-se-on-ve-se-sd-se-lr-sg)) ); --_sf-sd-le-ht: var( --_ctm-mob-dn-se-on-ve-se-sd-se-le-ht, var(--_ctm-tab-dn-se-on-ve-se-sd-se-le-ht, var(--_ctm-dn-se-on-ve-se-sd-se-le-ht)) ); --_sf-sd-ue: var( --_ctm-mob-dn-on-ve-se-sd-se-ue, var(--_ctm-tab-dn-on-ve-se-sd-se-ue, var(--_ctm-dn-on-ve-se-sd-se-ue)) ); border-color: var( --_sf-sd-br-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-cr) ); background-color: var( --_sf-sd-bd-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-bd-cr) ); border-style: var( --_sf-sd-br-se, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-se) ); border-width: var( --_sf-sd-br-wh, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-wh) ); box-shadow: var( --_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-ae) ) var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-br)) var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-sd)) var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-cr)); // font is pending color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-cr)); font-family: var( --_sf-sd-ft-fy, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-fy) ); text-transform: var( --_sf-sd-tt-tm, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-tt-tm) ); word-wrap: var( --_sf-sd-wd-wp, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-wd-wp) ); word-break: var( --_sf-sd-wd-bk, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-wd-bk) ); font-size: var( --_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se) ); font-weight: var( --_sf-sd-ft-wt, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-wt) ); font-style: var( --_sf-sd-ft-se-ic, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se-ic) ); text-align: var( --_sf-sd-tt-an, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-tt-an) ); letter-spacing: var( --_sf-sd-lr-sg, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-lr-sg) ); line-height: var( --_sf-sd-le-ht, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-le-ht-dc) ); text-decoration: var( --_sf-sd-ue, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ue) ); } &.selected__child { border: 0px; border-bottom: 2px solid var(--_primary-400); } // &.disabled { // cursor: not-allowed; // opacity: 0.4; // 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); // } // } position: relative; &.disabled { color: #aaa; background-color: #f9f9f9; border-color: #ddd; cursor: not-allowed; overflow: hidden; } .cross-line { position: absolute; inset: 0; background-color: #cccccc; clip-path: polygon(100% 0, 100% 1px, 0 100%, 0 96%); pointer-events: none; } } } } // &[data-show-divider="true"] { // &:not(:last-child)::after { // content: ""; // position: relative; // background-color: #000; // height: 1px; // width: 100%; // display: flex; // top: calc( // calc( // var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 10px // ) / // 2 // ); // } // } .title { color: var(--_ctm-mob-dn-on-te-cr, var(--_ctm-tab-dn-on-te-cr, var(--_ctm-dn-on-te-cr))); font-family: var( --_ctm-mob-dn-on-te-ft-fy, var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy)) ); text-transform: var( --_ctm-mob-dn-on-te-tt-tm, var(--_ctm-tab-dn-on-te-tt-tm, var(--_ctm-dn-on-te-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-on-te-wd-wp, var(--_ctm-tab-dn-on-te-wd-wp, var(--_ctm-dn-on-te-wd-wp)) ); word-break: var( --_ctm-mob-dn-on-te-wd-bk, var(--_ctm-tab-dn-on-te-wd-bk, var(--_ctm-dn-on-te-wd-bk)) ); font-size: var( --_ctm-mob-dn-on-te-ft-se, var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se)) ); font-weight: var( --_ctm-mob-dn-on-te-ft-wt, var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt)) ); font-style: var( --_ctm-mob-dn-on-te-ft-se-ic, var(--_ctm-tab-dn-on-te-ft-se-ic, var(--_ctm-dn-on-te-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-on-te-tt-an, var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an)) ); letter-spacing: var( --_ctm-mob-dn-on-te-lr-sg, var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg)) ); line-height: var( --_ctm-mob-dn-on-te-le-ht, var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht)) ); text-decoration: var( --_ctm-mob-dn-on-te-ue, var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue)) ); } } //Dropdown .language__conatiner { display: flex; // Option hover state custom properties (no inherit fallback — must be guaranteed-invalid when unset) .option:hover { --_sf-hr-bd-cr: var( --_ctm-mob-dn-dn-se-im-se-hr-se-bd-cr, var(--_ctm-tab-dn-dn-se-im-se-hr-se-bd-cr, var(--_ctm-dn-dn-se-im-se-hr-se-bd-cr)) ); --_sf-hr-br-cr: var( --_ctm-mob-dn-dn-se-im-se-hr-se-br-cr, var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-cr, var(--_ctm-dn-dn-se-im-se-hr-se-br-cr)) ); --_sf-hr-br-se: var( --_ctm-mob-dn-dn-se-im-se-hr-se-br-se, var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-se, var(--_ctm-dn-dn-se-im-se-hr-se-br-se)) ); --_sf-hr-br-wh: var( --_ctm-mob-dn-dn-se-im-se-hr-se-br-wh, var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-wh, var(--_ctm-dn-dn-se-im-se-hr-se-br-wh)) ); --_sf-hr-br-rs: var( --_ctm-mob-dn-dn-se-im-se-hr-se-br-rs, var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-rs, var(--_ctm-dn-dn-se-im-se-hr-se-br-rs)) ); --_sf-hr-sw-ae: var( --_ctm-mob-dn-dn-se-im-se-hr-se-sw-ae, var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-ae, var(--_ctm-dn-dn-se-im-se-hr-se-sw-ae)) ); --_sf-hr-sw-br: var( --_ctm-mob-dn-dn-se-im-se-hr-se-sw-br, var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-br, var(--_ctm-dn-dn-se-im-se-hr-se-sw-br)) ); --_sf-hr-sw-sd: var( --_ctm-mob-dn-dn-se-im-se-hr-se-sw-sd, var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-sd, var(--_ctm-dn-dn-se-im-se-hr-se-sw-sd)) ); --_sf-hr-sw-cr: var( --_ctm-mob-dn-dn-se-im-se-hr-se-sw-cr, var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-cr, var(--_ctm-dn-dn-se-im-se-hr-se-sw-cr)) ); --_sf-hr-cr: var( --_ctm-mob-dn-dn-se-im-se-hr-se-cr, var(--_ctm-tab-dn-dn-se-im-se-hr-se-cr, var(--_ctm-dn-dn-se-im-se-hr-se-cr)) ); --_sf-hr-ft-fy: var( --_ctm-mob-dn-dn-se-im-se-hr-se-ft-fy, var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-fy, var(--_ctm-dn-dn-se-im-se-hr-se-ft-fy)) ); --_sf-hr-tt-tm: var( --_ctm-mob-dn-dn-se-im-se-hr-se-tt-tm, var(--_ctm-tab-dn-dn-se-im-se-hr-se-tt-tm, var(--_ctm-dn-dn-se-im-se-hr-se-tt-tm)) ); --_sf-hr-wd-wp: var( --_ctm-mob-dn-dn-se-im-se-hr-se-wd-wp, var(--_ctm-tab-dn-dn-se-im-se-hr-se-wd-wp, var(--_ctm-dn-dn-se-im-se-hr-se-wd-wp)) ); --_sf-hr-wd-bk: var( --_ctm-mob-dn-dn-se-im-se-hr-se-wd-bk, var(--_ctm-tab-dn-dn-se-im-se-hr-se-wd-bk, var(--_ctm-dn-dn-se-im-se-hr-se-wd-bk)) ); --_sf-hr-ft-se: var( --_ctm-mob-dn-dn-se-im-se-hr-se-ft-se, var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-se, var(--_ctm-dn-dn-se-im-se-hr-se-ft-se)) ); --_sf-hr-ft-wt: var( --_ctm-mob-dn-dn-se-im-se-hr-se-ft-wt, var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-wt, var(--_ctm-dn-dn-se-im-se-hr-se-ft-wt)) ); --_sf-hr-ft-se-ic: var( --_ctm-mob-dn-dn-se-im-se-hr-se-ft-se-ic, var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-se-ic, var(--_ctm-dn-dn-se-im-se-hr-se-ft-se-ic)) ); --_sf-hr-tt-an: var( --_ctm-mob-dn-dn-se-im-se-hr-se-tt-an, var(--_ctm-tab-dn-dn-se-im-se-hr-se-tt-an, var(--_ctm-dn-dn-se-im-se-hr-se-tt-an)) ); --_sf-hr-lr-sg: var( --_ctm-mob-dn-dn-se-im-se-hr-se-lr-sg, var(--_ctm-tab-dn-dn-se-im-se-hr-se-lr-sg, var(--_ctm-dn-dn-se-im-se-hr-se-lr-sg)) ); --_sf-hr-le-ht: var( --_ctm-mob-dn-dn-se-im-se-hr-se-le-ht, var(--_ctm-tab-dn-dn-se-im-se-hr-se-le-ht, var(--_ctm-dn-dn-se-im-se-hr-se-le-ht)) ); --_sf-hr-ue: var( --_ctm-mob-dn-dn-se-im-se-hr-se-ue, var(--_ctm-tab-dn-dn-se-im-se-hr-se-ue, var(--_ctm-dn-dn-se-im-se-hr-se-ue)) ); --_sf-hr-pg: var( --_ctm-mob-dn-dn-se-im-se-hr-se-pg, var(--_ctm-tab-dn-dn-se-im-se-hr-se-pg, var(--_ctm-dn-dn-se-im-se-hr-se-pg)) ); } // Option selected state custom properties (no inherit fallback — must be guaranteed-invalid when unset) .option[data-selected="true"] { --_sf-sd-bd-cr: var( --_ctm-mob-dn-dn-se-im-se-sd-se-bd-cr, var(--_ctm-tab-dn-dn-se-im-se-sd-se-bd-cr, var(--_ctm-dn-dn-se-im-se-sd-se-bd-cr)) ); --_sf-sd-br-cr: var( --_ctm-mob-dn-dn-se-im-se-sd-se-br-cr, var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-cr, var(--_ctm-dn-dn-se-im-se-sd-se-br-cr)) ); --_sf-sd-br-se: var( --_ctm-mob-dn-dn-se-im-se-sd-se-br-se, var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-se, var(--_ctm-dn-dn-se-im-se-sd-se-br-se)) ); --_sf-sd-br-wh: var( --_ctm-mob-dn-dn-se-im-se-sd-se-br-wh, var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-wh, var(--_ctm-dn-dn-se-im-se-sd-se-br-wh)) ); --_sf-sd-sw-ae: var( --_ctm-mob-dn-dn-se-im-se-sd-se-sw-ae, var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-ae, var(--_ctm-dn-dn-se-im-se-sd-se-sw-ae)) ); --_sf-sd-sw-br: var( --_ctm-mob-dn-dn-se-im-se-sd-se-sw-br, var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-br, var(--_ctm-dn-dn-se-im-se-sd-se-sw-br)) ); --_sf-sd-sw-sd: var( --_ctm-mob-dn-dn-se-im-se-sd-se-sw-sd, var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-sd, var(--_ctm-dn-dn-se-im-se-sd-se-sw-sd)) ); --_sf-sd-sw-cr: var( --_ctm-mob-dn-dn-se-im-se-sd-se-sw-cr, var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-cr, var(--_ctm-dn-dn-se-im-se-sd-se-sw-cr)) ); --_sf-sd-cr: var( --_ctm-mob-dn-dn-se-im-se-sd-se-cr, var(--_ctm-tab-dn-dn-se-im-se-sd-se-cr, var(--_ctm-dn-dn-se-im-se-sd-se-cr)) ); --_sf-sd-ft-fy: var( --_ctm-mob-dn-dn-se-im-se-sd-se-ft-fy, var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-fy, var(--_ctm-dn-dn-se-im-se-sd-se-ft-fy)) ); --_sf-sd-tt-tm: var( --_ctm-mob-dn-dn-se-im-se-sd-se-tt-tm, var(--_ctm-tab-dn-dn-se-im-se-sd-se-tt-tm, var(--_ctm-dn-dn-se-im-se-sd-se-tt-tm)) ); --_sf-sd-wd-wp: var( --_ctm-mob-dn-dn-se-im-se-sd-se-wd-wp, var(--_ctm-tab-dn-dn-se-im-se-sd-se-wd-wp, var(--_ctm-dn-dn-se-im-se-sd-se-wd-wp)) ); --_sf-sd-wd-bk: var( --_ctm-mob-dn-dn-se-im-se-sd-se-wd-bk, var(--_ctm-tab-dn-dn-se-im-se-sd-se-wd-bk, var(--_ctm-dn-dn-se-im-se-sd-se-wd-bk)) ); --_sf-sd-ft-se: var( --_ctm-mob-dn-dn-se-im-se-sd-se-ft-se, var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-se, var(--_ctm-dn-dn-se-im-se-sd-se-ft-se)) ); --_sf-sd-ft-wt: var( --_ctm-mob-dn-dn-se-im-se-sd-se-ft-wt, var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-wt, var(--_ctm-dn-dn-se-im-se-sd-se-ft-wt)) ); --_sf-sd-ft-se-ic: var( --_ctm-mob-dn-dn-se-im-se-sd-se-ft-se-ic, var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-se-ic, var(--_ctm-dn-dn-se-im-se-sd-se-ft-se-ic)) ); --_sf-sd-tt-an: var( --_ctm-mob-dn-dn-se-im-se-sd-se-tt-an, var(--_ctm-tab-dn-dn-se-im-se-sd-se-tt-an, var(--_ctm-dn-dn-se-im-se-sd-se-tt-an)) ); --_sf-sd-lr-sg: var( --_ctm-mob-dn-dn-se-im-se-sd-se-lr-sg, var(--_ctm-tab-dn-dn-se-im-se-sd-se-lr-sg, var(--_ctm-dn-dn-se-im-se-sd-se-lr-sg)) ); --_sf-sd-le-ht: var( --_ctm-mob-dn-dn-se-im-se-sd-se-le-ht, var(--_ctm-tab-dn-dn-se-im-se-sd-se-le-ht, var(--_ctm-dn-dn-se-im-se-sd-se-le-ht)) ); --_sf-sd-ue: var( --_ctm-mob-dn-dn-se-im-se-sd-se-ue, var(--_ctm-tab-dn-dn-se-im-se-sd-se-ue, var(--_ctm-dn-dn-se-im-se-sd-se-ue)) ); --_sf-sd-pg: var( --_ctm-mob-dn-dn-se-im-se-sd-se-pg, var(--_ctm-tab-dn-dn-se-im-se-sd-se-pg, var(--_ctm-dn-dn-se-im-se-sd-se-pg)) ); } // Placeholder text .value__selected__new { width: 100%; font-family: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-ft-se); color: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-cr); font-weight: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-ft-wt); text-decoration: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-ue); font-style: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-ft-se-ic); text-align: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-tt-an); letter-spacing: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-lr-sg); line-height: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-le-ht); padding: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-pg); @include restrictToLinesShow(1); } .est__dropdown__main { position: relative; width: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-wh); margin-top: 0px; label { font-size: 14px; color: var(--_gray-700); margin-bottom: 8px; display: block; } .est__dropdown { cursor: pointer; position: relative; color: var(--_gray-700); display: flex; justify-content: space-between; align-items: center; width: 100%; .est__dropdown__button { display: flex; align-items: center; width: 100%; position: relative; gap: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-im-gp); // Widget style — border padding: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-pg); border-color: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-br-cr); border-style: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-br-se); border-width: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-br-wh); border-radius: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-br-rs); // Widget style — shadow box-shadow: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-sw-ae) prepareMediaVariable(--_ctm-dn-dn-se-wt-se-sw-br) prepareMediaVariable(--_ctm-dn-dn-se-wt-se-sw-sd) prepareMediaVariable(--_ctm-dn-dn-se-wt-se-sw-cr); // Widget style — font color: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-cr); font-family: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-wd-bk); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-se); font-weight: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-wt); font-style: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-se-ic); text-decoration: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ue); text-align: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-tt-an); letter-spacing: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-lr-sg); line-height: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-le-ht); .option_select { -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .est__dropdown__icon { transition: transform 0.4s ease-in-out; display: flex; &.rotate__180 { transform: rotate(180deg); } &.rotate__0 { transform: rotate(0deg); } width: 16px; height: 16px; svg { width: 100%; height: 100%; } } .list { flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%; z-index: var(--_higher-zIndex); max-height: 200px; overflow-y: auto; // Widget dropdown styles background-color: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-bd-cr); border-radius: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-br-rs); border-width: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-br-wh); border-style: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-br-se); border-color: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-br-cr); padding: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-pg); gap: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-im-gp); box-shadow: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-ae) prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-br) prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-sd) prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-cr); &.top { bottom: 100%; top: auto; } .option { cursor: pointer; } &.show__panel { animation: slideUp 0.4s ease-in-out; } &.hide__panel { animation: slideDown 0.4s ease-in-out; pointer-events: none; } } } } // Option default styles .option { width: 100%; display: flex; align-items: center; cursor: pointer; position: relative; box-sizing: border-box; padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-pg)); border-color: var( --_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-cr) ); background-color: var( --_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-bd-cr) ); border-style: var( --_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-se) ); border-radius: var( --_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-rs) ); border-width: var( --_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-wh) ); box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-cr)); &[data-selected="true"] { border-color: var( --_sf-sd-br-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-cr) ); background-color: var( --_sf-sd-bd-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-bd-cr) ); border-style: var( --_sf-sd-br-se, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-se) ); border-width: var( --_sf-sd-br-wh, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-wh) ); border-radius: var( --_sf-sd-br-rs, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-rs) ); box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-ae)) var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-br)) var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-sd)) var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-cr)); .language__name { color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-cr)); font-family: var( --_sf-sd-ft-fy, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-fy) ); text-transform: var( --_sf-sd-tt-tm, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-tm) ); word-wrap: var( --_sf-sd-wd-wp, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-wd-wp) ); word-break: var( --_sf-sd-wd-bk, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-wd-bk) ); font-size: var( --_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se) ); font-weight: var( --_sf-sd-ft-wt, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-wt) ); font-style: var( --_sf-sd-ft-se-ic, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se-ic) ); text-align: var( --_sf-sd-tt-an, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-an) ); letter-spacing: var( --_sf-sd-lr-sg, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-lr-sg) ); line-height: var( --_sf-sd-le-ht, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-le-ht) ); text-decoration: var( --_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ue) ); @include restrictToLinesShow(1); } } } .option_select { width: 100%; display: flex; align-items: center; position: relative; .language__name { color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-cr)); @include restrictToLinesShow(1); } } .language__name { color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-cr)); font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-fy)); text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-tm)); word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-wd-wp)); word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-wd-bk)); font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se)); font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-wt)); font-style: var( --_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se-ic) ); text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-an)); letter-spacing: var( --_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-lr-sg) ); line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-le-ht)); text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ue)); white-space: nowrap; @include restrictToLinesShow(1); } } // variant dropdown selection .var__drop__selection { display: flex; width: 100%; gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))); flex-direction: row; flex-wrap: wrap; &[data-dropdown-style="Vertical List"] { flex-direction: column; } .dropdown_wrapper { position: relative; &[data-show-divider="true"] { &:not(:last-child)::after { content: ""; position: relative; background-color: #000; height: 1px; width: 100%; display: flex; top: calc( calc( var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 10px ) / 2 ); } } } } // Quantity Fields .field__group { // display: flex; // flex-wrap: wrap; // gap: 8px; display: grid; grid-template-columns: repeat( auto-fit, minmax( var( --_ctm-mob-var-lt-mn-cn-wh, var(--_ctm-tab-var-lt-mn-cn-wh, var(--_ctm-var-lt-mn-cn-wh)) ), var(--_ctm-mob-var-lt-mn-cn-wh) ) ); gap: var( --_ctm-mob-lt-gd-os-dy-se-tb-rw-sg, var(--_ctm-tab-lt-gd-os-dy-se-tb-rw-sg, var(--_ctm-lt-gd-os-dy-se-tb-rw-sg)) ); .field__group__item { font-size: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; input[type="number"] { // width: 70px !important; width: 100%; border: 1px solid var(--_gray-300); padding-inline: 10px; border-radius: 4px; text-align: center; height: 40px; &:focus-within { border: 1px solid var(--_primary-200); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); } &:disabled { cursor: not-allowed; opacity: 0.4; } } } } // Enter quantity styles .quantiy__details { display: flex; flex-direction: column; gap: var( --_ctm-mob-lt-gd-os-dy-se-gp-sg, var(--_ctm-tab-lt-gd-os-dy-se-gp-sg, var(--_ctm-lt-gd-os-dy-se-gp-sg)) ); padding: var( --_ctm-mob-lt-gd-os-dy-se-gp-pg, var(--_ctm-tab-lt-gd-os-dy-se-gp-pg, var(--_ctm-lt-gd-os-dy-se-gp-pg)) ); .title { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 18px; & > button { border-bottom: 1px solid var(--_gray-400); color: var(--_gray-600); font-size: 14px; } } .fit__details { display: flex; flex-direction: column; gap: 12px; .fit__desc { display: flex; flex-direction: column; gap: var( --_ctm-mob-lt-gd-os-dy-se-gp-hr-ad-on-sg, var( --_ctm-tab-lt-gd-os-dy-se-gp-hr-ad-on-sg, var(--_ctm-lt-gd-os-dy-se-gp-hr-ad-on-sg) ) ); font-size: 16px; color: var(--_gray-900); .each__price { font-weight: 600; } } } } .grouped_items { display: flex; flex-direction: column; gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))); .tab__accordion { display: flex; flex-direction: column; gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))); .tab__container { display: flex; flex-direction: column; .tab { &:first-child { margin-bottom: var( --_ctm-mob-lt-on-te-ve-sg, var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg)) ); } } .tab__content { display: flex; flex-direction: column; padding: var( --_ctm-mob-lt-gd-os-dy-se-gp-pg, var(--_ctm-tab-lt-gd-os-dy-se-gp-pg, var(--_ctm-lt-gd-os-dy-se-gp-pg)) ); .field__group { gap: var( --_ctm-mob-lt-gd-os-dy-se-gp-sg, var(--_ctm-tab-lt-gd-os-dy-se-gp-sg, var(--_ctm-lt-gd-os-dy-se-gp-sg)) ); .field__group__item { gap: var( --_ctm-mob-lt-gd-os-dy-se-gp-hr-ad-on-sg, var( --_ctm-tab-lt-gd-os-dy-se-gp-hr-ad-on-sg, var(--_ctm-lt-gd-os-dy-se-gp-hr-ad-on-sg) ) ); } } } } } &[data-show-divider="true"] { & > div { &:not(:last-child)::after { content: ""; position: relative; background-color: #000; height: 1px; width: 100%; display: flex; top: calc( var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2 ); } } .tab__accordion { &:not(:last-child)::after { content: ""; position: relative; background-color: #000; height: 1px; width: 100%; display: flex; top: calc( var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2 ); } } } } // tabs .tabs__container { display: flex; position: relative; .tab { flex: 1; padding-block: 20px; font-weight: 600; text-align: center; cursor: pointer; position: relative; &.tab__active { font-weight: bold; } } .tab__active-indicator { position: absolute; bottom: 0; left: 0; height: 2px; background-color: #000; transition: left 0.3s ease, width 0.3s ease; } } // accordion tabs .tab__accordion_wrapper { .tab__accordion { display: flex; flex-direction: column; padding: var( --_ctm-mob-lt-gd-os-dy-se-cr-pg, var(--_ctm-tab-lt-gd-os-dy-se-cr-pg, var(--_ctm-lt-gd-os-dy-se-cr-pg)) ); .tab__container { display: flex; flex-direction: column; gap: var( --_ctm-mob-lt-gd-os-dy-se-an-sg, var(--_ctm-tab-lt-gd-os-dy-se-an-sg, var(--_ctm-lt-gd-os-dy-se-an-sg)) ); .tab_acc_wrapper { display: flex; flex-direction: column; gap: var( --_ctm-mob-lt-gd-os-dy-se-an-ad-cr-sg, var(--_ctm-tab-lt-gd-os-dy-se-an-ad-cr-sg, var(--_ctm-lt-gd-os-dy-se-an-ad-cr-sg)) ); padding: var( --_ctm-mob-lt-gd-os-dy-se-an-vl-pg, var(--_ctm-tab-lt-gd-os-dy-se-an-vl-pg, var(--_ctm-lt-gd-os-dy-se-an-vl-pg)) ) var( --_ctm-mob-lt-gd-os-dy-se-an-hl-pg, var(--_ctm-tab-lt-gd-os-dy-se-an-hl-pg, var(--_ctm-lt-gd-os-dy-se-an-hl-pg)) ); .tab { display: flex; padding-inline: 2px; position: relative; cursor: pointer; flex-direction: row; &[data-expand-icon="Left"] { flex-direction: row-reverse; justify-content: flex-end; } &[data-item-dividers="true"] { &::after { content: ""; position: absolute; bottom: 0; height: 2px; width: 100%; border-bottom: 1px solid var(--_gray-200); } } span { padding-block: 12px; display: inline-block; } .active { border-bottom: 2px solid var(--_primary-400); } &.inactive { height: 0px; } } .tab__content { &.d-none { display: none; } &.d-block { display: block; } } } } } &[data-show-dividers="true"] { .tab__accordion { .tab__container { .tab_acc_wrapper { &:not(:last-child)::after { content: ""; position: relative; background-color: #000; height: 1px; width: 100%; display: flex; top: calc( var( --_ctm-mob-lt-gd-os-dy-se-an-sg, var(--_ctm-tab-lt-gd-os-dy-se-an-sg, var(--_ctm-lt-gd-os-dy-se-an-sg)) ) / 2 ); } } } } } &[data-icon-position="Left"] { .tab__accordion { .tab__container { .tab_acc_wrapper { .tab { flex-direction: row-reverse; align-self: flex-start; } } } } } } // horizontal tabs .tabs__main { &.tabs__vertical { .tabs { .tabs__container { flex-direction: column; min-width: 120px; } } } &.tabs__hr { .tabs { flex-direction: column; gap: var( --_ctm-mob-lt-gd-os-dy-se-tb-ad-cr-sg, var(--_ctm-tab-lt-gd-os-dy-se-tb-ad-cr-sg, var(--_ctm-lt-gd-os-dy-se-tb-ad-cr-sg)) ); .tabs__container { width: 100%; } } } .tabs { display: flex; gap: var( --_ctm-mob-lt-tb-im-se-dt-se-tb-ad-cr-sg, var(--_ctm-tab-lt-tb-im-se-dt-se-tb-ad-cr-sg, var(--_ctm-dn-tb-im-se-dt-se-tb-ad-cr-sg)) ); .tabs__container { display: flex; gap: var( --_ctm-mob-lt-gd-os-dy-se-tb-sg, var(--_ctm-tab-lt-gd-os-dy-se-tb-sg, var(--_ctm-lt-gd-os-dy-se-tb-sg)) ); .tab { display: flex; justify-content: var(--_tab-aliginment); padding: var( --_ctm-mob-lt-gd-os-dy-se-tb-vl-pg, var(--_ctm-tab-lt-gd-os-dy-se-tb-vl-pg, var(--_ctm-lt-gd-os-dy-se-tb-vl-pg)) ) var( --_ctm-mob-lt-gd-os-dy-se-tb-hl-pg, var(--_ctm-tab-lt-gd-os-dy-se-tb-hl-pg, var(--_ctm-lt-gd-os-dy-se-tb-hl-pg)) ); background-color: var( --_ctm-mob-lt-dn-tb-im-se-dt-se-bd-cr, var(--_ctm-tab-lt-dn-tb-im-se-dt-se-bd-cr, var(--_ctm-dn-tb-im-se-dt-se-bd-cr)) ); border-color: var( --_show-border-im-se, var( --_ctm-mob-lt-dn-tb-im-se-dt-se-br-cr, var(--_ctm-tab-lt-dn-tb-im-se-dt-se-br-cr, var(--_ctm-dn-tb-im-se-dt-se-br-cr)) ) ); border-style: var( --_show-border-im-se, var( --_ctm-mob-lt-dn-tb-im-se-dt-se-br-se, var(--_ctm-tab-lt-dn-tb-im-se-dt-se-br-se, var(--_ctm-dn-tb-im-se-dt-se-br-se)) ) ); border-width: var( --_show-border-im-se, var( --_ctm-mob-lt-dn-tb-im-se-dt-se-br-wh, var(--_ctm-tab-lt-dn-tb-im-se-dt-se-br-wh, var(--_ctm-dn-tb-im-se-dt-se-br-wh)) ) ); border-radius: var( --_ctm-mob-lt-dn-tb-im-se-dt-se-br-rs, var(--_ctm-tab-lt-dn-tb-im-se-dt-se-br-rs, var(--_ctm-dn-tb-im-se-dt-se-br-rs)) ); box-shadow: var( --_show-shadow-im-se, var( --_ctm-mob-lt-dn-tb-im-se-dt-se-sw-ae, var(--_ctm-tab-lt-dn-tb-im-se-dt-se-sw-ae) ), var( --_ctm-mob-lt-dn-tb-im-se-dt-se-sw-br, var(--_ctm-tab-lt-dn-tb-im-se-dt-se-sw-br) ), var( --_ctm-mob-lt-dn-tb-im-se-dt-se-sw-sd, var(--_ctm-tab-lt-dn-tb-im-se-dt-se-sw-sd) ), var( --_ctm-mob-lt-dn-tb-im-se-dt-se-sw-cr, var(--_ctm-tab-lt-dn-tb-im-se-dt-se-sw-cr) ) ); border-radius: var( --_ctm-mob-lt-dn-tb-im-se-dt-se-br-rs, var(--_ctm-tab-lt-dn-tb-im-se-dt-se-br-rs) ); &:hover { background-color: var( --_ctm-mob-lt-dn-tb-im-se-hr-se-bd-cr, var(--_ctm-tab-lt-dn-tb-im-se-hr-se-bd-cr, var(--_ctm-dn-tb-im-se-hr-se-bd-cr)) ); border-color: var( --_show-border-im-se, var( --_ctm-mob-lt-dn-tb-im-se-hr-se-br-cr, var(--_ctm-tab-lt-dn-tb-im-se-hr-se-br-cr, var(--_ctm-dn-tb-im-se-hr-se-br-cr)) ) ); border-style: var( --_show-border-im-se, var( --_ctm-mob-lt-dn-tb-im-se-hr-se-br-se, var(--_ctm-tab-lt-dn-tb-im-se-hr-se-br-se, var(--_ctm-dn-tb-im-se-hr-se-br-se)) ) ); border-width: var( --_show-border-im-se, var( --_ctm-mob-lt-dn-tb-im-se-hr-se-br-wh, var(--_ctm-tab-lt-dn-tb-im-se-hr-se-br-wh, var(--_ctm-dn-tb-im-se-hr-se-br-wh)) ) ); border-radius: var( --_ctm-mob-lt-dn-tb-im-se-hr-se-br-rs, var(--_ctm-tab-lt-dn-tb-im-se-hr-se-br-rs, var(--_ctm-dn-tb-im-se-hr-se-br-rs)) ); box-shadow: var( --_show-shadow-im-se, var( --_ctm-mob-lt-dn-tb-im-se-hr-se-sw-ae, var(--_ctm-tab-lt-dn-tb-im-se-hr-se-sw-ae) ), var( --_ctm-mob-lt-dn-tb-im-se-hr-se-sw-br, var(--_ctm-tab-lt-dn-tb-im-se-hr-se-sw-br) ), var( --_ctm-mob-lt-dn-tb-im-se-hr-se-sw-sd, var(--_ctm-tab-lt-dn-tb-im-se-hr-se-sw-sd) ), var( --_ctm-mob-lt-dn-tb-im-se-hr-se-sw-cr, var(--_ctm-tab-lt-dn-tb-im-se-hr-se-sw-cr) ) ); } &.active { background-color: var( --_ctm-mob-lt-dn-tb-im-se-sd-se-bd-cr, var(--_ctm-tab-lt-dn-tb-im-se-sd-se-bd-cr, var(--_ctm-dn-tb-im-se-sd-se-bd-cr)) ); border-color: var( --_show-border-im-se, var( --_ctm-mob-lt-dn-tb-im-se-sd-se-br-cr, var(--_ctm-tab-lt-dn-tb-im-se-sd-se-br-cr, var(--_ctm-dn-tb-im-se-sd-se-br-cr)) ) ); border-style: var( --_show-border-im-se, var( --_ctm-mob-lt-dn-tb-im-se-sd-se-br-se, var(--_ctm-tab-lt-dn-tb-im-se-sd-se-br-se, var(--_ctm-dn-tb-im-se-sd-se-br-se)) ) ); border-width: var( --_show-border-im-se, var( --_ctm-mob-lt-dn-tb-im-se-sd-se-br-wh, var(--_ctm-tab-lt-dn-tb-im-se-sd-se-br-wh, var(--_ctm-dn-tb-im-se-sd-se-br-wh)) ) ); border-radius: var( --_ctm-mob-lt-dn-tb-im-se-sd-se-br-rs, var(--_ctm-tab-lt-dn-tb-im-se-sd-se-br-rs, var(--_ctm-dn-tb-im-se-sd-se-br-rs)) ); box-shadow: var( --_show-shadow-im-se, var( --_ctm-mob-lt-dn-tb-im-se-sd-se-sw-ae, var(--_ctm-tab-lt-dn-tb-im-se-sd-se-sw-ae) ), var( --_ctm-mob-lt-dn-tb-im-se-sd-se-sw-br, var(--_ctm-tab-lt-dn-tb-im-se-sd-se-sw-br) ), var( --_ctm-mob-lt-dn-tb-im-se-sd-se-sw-sd, var(--_ctm-tab-lt-dn-tb-im-se-sd-se-sw-sd) ), var( --_ctm-mob-lt-dn-tb-im-se-sd-se-sw-cr, var(--_ctm-tab-lt-dn-tb-im-se-sd-se-sw-cr) ) ); } } } .tab__content { padding: var( --_ctm-mob-lt-gd-os-dy-se-cr-pg, var(--_ctm-tab-lt-gd-os-dy-se-cr-pg, var(--_ctm-lt-gd-os-dy-se-cr-pg)) ); } } } // embla .embla { width: 100%; height: 100%; 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: flex; grid-template-rows: 100%; // grid-template-columns: 100%; // grid-template-columns: repeat( // var(--_ctm-lt-is-pr-se), // calc(100% / var(--_ctm-lt-is-pr-se)) // ); // grid-auto-flow: column; gap: var(--_ctm-mob-lt-sh-im-sg, var(--_ctm-tab-lt-sh-im-sg, var(--_ctm-lt-sh-im-sg))); &[data-control-type="Bottom"][data-slider-control="Arrows"] { height: calc( 100% - calc( var( --_ctm-mob-dn-pn-as-aw-se, var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)) ) + 8px ) ); } &[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%; } } } .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 { background-color: #f2f5f5; box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1); } } &[data-control-type="Bottom-Overflow"] { transform: translateX(-50%); width: 100%; justify-content: center; gap: 12px; top: unset; bottom: 6px; } &[data-control-type="Bottom"] { transform: unset; position: static; width: 100%; justify-content: center; gap: 12px; margin-top: 10px; } .left-button { padding: 10px; border-radius: 50%; border: none; width: var( --_ctm-mob-dn-pn-as-aw-se, var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)) ); height: var( --_ctm-mob-dn-pn-as-aw-se, var(--_ctm-tab-dn-pn-as-aw-se, var(--_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: var( --_ctm-mob-dn-pn-as-aw-se, var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)) ); height: var( --_ctm-mob-dn-pn-as-aw-se, var(--_ctm-tab-dn-pn-as-aw-se, var(--_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( var( --_ctm-mob-dn-pn-as-aw-se, var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)) ) * 0.5 ); height: calc( var( --_ctm-mob-dn-pn-as-aw-se, var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)) ) * 0.5 ); path { stroke: var( --_ctm-mob-dn-pn-as-aw-cr, var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr)) ); } } } } &[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-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%; } } } &[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%; } } } &[data-control-type="Side"] { display: flex; align-self: center; flex-direction: row; .left-button:disabled, .right-button:disabled { display: none; } } .embla__dots { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-right: calc((2.6rem - 1.4rem) / 2 * -1); gap: 6px; margin-top: 16px; &[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-dn-pn-ds-or-dt-cr, var(--_tst-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-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se)); height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-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-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se)); height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-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-dn-pn-ds-ct-dt-cr, var(--_tst-dn-pn-ds-ct-dt-cr)); } &[data-slider-control="Pagination Line"] { .embla__dot { width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh)); height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht)); background-color: var(--_ctm-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-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh)); height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht)); // background-color: #fff; background-color: var(--_ctm-dn-pn-le-ct-le-cr, var(--_tst-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-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%; } } } } } } } }