@use "sass:map"; @use "sass:list"; @use "./functions.scss" as *; $minWidth: 70px; [data-div-type="element"] { &[data-element-type="bulkVariantPicker"] { --_ctm-mob-var-lt-mn-cn-wh: 70px; width: var( --_sf-el-wh-st-mx, calc( 1% * var( --_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))) ) ) ); margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn))); 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))) ); .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; 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; // border-radius: 80%; } &[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; } } } } // 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-dc) ); 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 { 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)) ); } } //Dropdown //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-dn-dy-se-dn-lt-im-sg, var( --_ctm-tab-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-im-sg)) ) ); flex-direction: row; flex-wrap: wrap; &[data-dropdown-style="Vertical List"] { flex-direction: column; gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))); } .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 ); } } &[data-show-item-divider="true"] { .est__dropdown__main { .est__dropdown { .list { :not(:last-child).list__option { &::after { content: ""; position: relative; background-color: #000; height: 1px; width: 100%; display: flex; top: calc( var( --_ctm-mob-lt-dn-dy-se-dn-lt-im-sg, var( --_ctm-tab-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-dn-dy-se-dn-lt-im-sg) ) ) / 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; } } } } } } // table // .table_container, // .tab__content { // .table__class { // border: 1px solid var(--_gray-200); // border-radius: 8px; // .custom__table { // border: 1px solid var(--_gray-200); // width: 100%; // table-layout: fixed; // // height: 300px; // border-collapse: collapse; // &[data-header-divider="true"] { // thead tr th { // border-bottom: 1px solid var(--_gray-200); // } // } // &[data-row-divider="true"] { // tbody tr td { // border-bottom: 1px solid var(--_gray-200); // } // } // &[data-column-divider="true"] { // tbody tr td, // thead tr th { // border-right: 1px solid var(--_gray-200); // } // tbody tr td:last-child, // thead tr th:last-child { // border-right: none; // } // } // &[data-alternative-row-colors="true"] { // tbody tr:nth-child(odd) { // background-color: var(--_gray-300); // width: 100%; // } // } // thead { // height: var( // --_ctm-mob-lt-te-dy-se-hr-ht, // var(--_ctm-tab-lt-te-dy-se-hr-ht, var(--_ctm-lt-te-dy-se-hr-ht)) // ); // th { // height: var( // --_ctm-mob-lt-te-dy-se-hr-ht, // var(--_ctm-tab-lt-te-dy-se-hr-ht, var(--_ctm-lt-te-dy-se-hr-ht)) // ); // text-align: var( // --_ctm-mob-lt-te-dy-se-ct-at, // var(--_ctm-tab-lt-te-dy-se-ct-at, var(--_ctm-lt-te-dy-se-ct-at)) // ); // padding: var( // --_ctm-mob-lt-te-dy-se-hr-cl-pg, // var(--_ctm-tab-lt-te-dy-se-hr-cl-pg, var(--_ctm-lt-te-dy-se-hr-cl-pg)) // ); // background-color: var(--_gray-50); // font-weight: 600; // color: var(--_gray-600); // word-break: break-word; // } // } // tbody { // tr { // border-bottom: 1px solid var(--_gray-200); // height: var( // --_ctm-mob-lt-te-dy-se-rw-ht, // var(--_ctm-tab-lt-te-dy-se-rw-ht, var(--_ctm-lt-te-dy-se-rw-ht)) // ); // td { // text-align: var( // --_ctm-mob-lt-te-dy-se-ct-at, // var(--_ctm-tab-lt-te-dy-se-ct-at, var(--_ctm-lt-te-dy-se-ct-at)) // ); // padding: var( // --_ctm-mob-lt-te-dy-se-rw-cl-pg, // var(--_ctm-tab-lt-te-dy-se-rw-cl-pg, var(--_ctm-lt-te-dy-se-rw-cl-pg)) // ); // .disocunted__price { // color: var(--_gray-900); // } // .actual__price { // color: var(--_gray-500); // } // .qty__input { // border: 1px solid var(--_gray-200); // padding-inline: 10px; // text-align: center; // border-radius: 6px; // height: 40px; // } // input[type="number"] { // &: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; // } // } // } // } // } // } // } // &[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 // ); // } // } // } // } // 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%; } } } } } .table__common_parent { // width: var(--_sf-nw-wh, var(--_tst-lt-mx-dy-se-wh)); width: 100%; // aspect-ratio: 1 / var(--_sf-aspect-ratio); // --_aspect-ratio: calc( // 1 * (var(--_ctm-lt-mx-dy-se-ht, var(--_tst-lt-mx-dy-se-ht)) / var(--_ctm-lt-mx-dy-se-wh, var(--_tst-lt-mx-dy-se-wh))) // ); .pagination:hover { --_sf-bd-cr: var(--_ctm-dn-pn-hr-se-bd-cr, var(--_tst-dn-pn-hr-se-bd-cr)); } .load__more__button__container { display: flex; width: 100%; margin-top: 10px; &:hover { --_sf-hr-bn-at: var( --_ctm-mob-dn-ld-me-bn-hr-se-bn-at, var(--_ctm-tab-dn-ld-me-bn-hr-se-bn-at, var(--_ctm-dn-ld-me-bn-hr-se-bn-at)) ); } justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-bn-at)); } .pagination .active:hover { cursor: pointer; --_sf-hr-fc: var(--_ctm-dn-pn-hr-se-cr, var(--_tst-dn-pn-hr-se-cr)); --_sf-hr-ff: var(--_ctm-dn-pn-hr-se-ft-fy, var(--_tst-dn-pn-hr-se-ft-fy)); --_sf-hr-tt-tm: var(--_ctm-dn-pn-hr-se-tt-tm, var(--_tst-dn-pn-hr-se-tt-tm)); --_sf-hr-wd-wp: var(--_ctm-dn-pn-hr-se-wd-wp, var(--_tst-dn-pn-hr-se-wd-wp)); --_sf-hr-wd-bk: var(--_ctm-dn-pn-hr-se-wd-bk, var(--_tst-dn-pn-hr-se-wd-bk)); --_sf-hr-fs: var(--_ctm-dn-pn-hr-se-ft-se, var(--_tst-dn-pn-hr-se-ft-se)); --_sf-hr-td: var(--_ctm-dn-pn-hr-se-tt-ue, var(--_tst-dn-hr-tt-ue)); --_sf-hr-fw: var(--_ctm-dn-pn-hr-se-ft-wt, var(--_tst-dn-pn-hr-se-ft-wt)); --_sf-hr-ft: var(--_ctm-dn-pn-hr-se-ft-se-ic, var(--_tst-dn-pn-hr-se-ft-se-ic)); --_sf-hr-ta: var(--_ctm-dn-pn-hr-se-tt-an, var(--_tst-dn-pn-hr-se-tt-an)); --_sf-hr-ls: var(--_ctm-dn-pn-hr-se-lr-sg, var(--_tst-dn-pn-hr-se-lr-sg)); --_sf-hr-lh: var(--_ctm-dn-pn-hr-se-le-ht, var(--_tst-dn-pn-hr-se-le-ht)); } &[data-widget-shadow="false"] { .table__wrapper { --_show-shadow: none; } } &[data-widget-border="true"] { .table__wrapper { border-color: var( --_ctm-mob-dn-te-wt-br-cr, var(--_ctm-tab-dn-te-wt-br-cr, var(--_ctm-dn-te-wt-br-cr)) ); border-style: var( --_ctm-mob-dn-te-wt-br-se, var(--_ctm-tab-dn-te-wt-br-se, var(--_ctm-dn-te-wt-br-se)) ); border-width: var( --_ctm-mob-dn-te-wt-br-wh, var(--_ctm-tab-dn-te-wt-br-wh, var(--_ctm-dn-te-wt-br-wh)) ); } } &[data-table-shadow="false"] { .table__container { --_show-table-shadow: none; } } &[data-alternative-row-colors="true"] { tbody .tbody__row__divider:nth-child(odd) { background-color: prepareMediaVariable(--_ctm-dn-rw-ae-cr-bd-cr); } } &[data-table-border="true"] { .table__container { border-color: var( --_ctm-mob-dn-te-br-cr, var(--_ctm-tab-dn-te-br-cr, var(--_ctm-dn-te-br-cr)) ); border-style: var( --_ctm-mob-dn-te-br-se, var(--_ctm-tab-dn-te-br-se, var(--_ctm-dn-te-br-se)) ); border-width: var( --_ctm-mob-dn-te-br-wh, var(--_ctm-tab-dn-te-br-wh, var(--_ctm-dn-te-br-wh)) ); } } &[data-header-divider="true"] { thead tr th { border-bottom: 1px solid var( --_ctm-mob-dn-rw-ad-hr-ds-hr-dr, var(--_ctm-tab-dn-rw-ad-hr-ds-hr-dr, var(--_ctm-dn-rw-ad-hr-ds-hr-dr)) ); } } &[data-row-divider="true"] { tbody tr { border-bottom: 1px solid var( --_ctm-mob-dn-rw-ad-hr-ds-rw-dr, var(--_ctm-tab-dn-rw-ad-hr-ds-rw-dr, var(--_ctm-dn-rw-ad-hr-ds-rw-dr)) ); } } &[data-column-divider="true"] { tbody tr td, thead tr th { border-right: 1px solid var( --_ctm-mob-dn-rw-ad-hr-ds-cn-dr, var(--_ctm-tab-dn-rw-ad-hr-ds-cn-dr, var(--_ctm-dn-rw-ad-hr-ds-cn-dr)) ); } tbody tr td:last-child, thead tr th:last-child { border-right: none; } } &[data-show-more-rows="onScroll"] { .table__container { overflow-y: scroll; height: var( --_ctm-mob-lt-mx-dy-se-te-ht, var(--_ctm-tab-lt-mx-dy-se-te-ht, var(--_ctm-lt-mx-dy-se-te-ht)) ) !important; &::-webkit-scrollbar { width: var( --_ctm-mob-dn-sl-br-sl-br-wh, var(--_ctm-tab-dn-sl-br-sl-br-wh, var(--_ctm-dn-sl-br-sl-br-wh)) ); } &::-webkit-scrollbar-track { background-color: var(--_base-white); } &::-webkit-scrollbar-thumb { background-color: var( --_ctm-mob-dn-sl-br-sl-br-cr, var(--_ctm-tab-dn-sl-br-sl-br-cr, var(--_ctm-dn-sl-br-sl-br-cr)) ); } // // Scrollbar thumb when hovered // &::-webkit-scrollbar-thumb:hover { // background-color: #555; // Darker color when hovering over the thumb // } // // For Firefox, using scrollbar-width and scrollbar-color // scrollbar-width: thin; // Thin scrollbar // scrollbar-color: #888 #f1f1f1; // Thumb and track colors } } &[data-alt-mx-dy-seernative-row-colors="true"] { tbody .tbody__row__divider:nth-child(odd) { background-color: #f76b6b; } } .table__wrapper { flex: 1 1 auto; min-width: 0; overflow-x: auto; padding: var( --_ctm-mob-lt-mx-dy-se-pg, var(--_ctm-tab-lt-mx-dy-se-pg, var(--_ctm-lt-mx-dy-se-pg, var(--_tst-lt-mx-dy-se-pg))) ); background-color: var( --_ctm-mob-dn-te-wt-bd-cr, var(--_ctm-tab-dn-te-wt-bd-cr, var(--_ctm-dn-te-wt-bd-cr, var(--_tst-dn-te-wt-bd-cr))) ); border-radius: var( --_ctm-mob-dn-te-wt-br-rs, var(--_ctm-tab-dn-te-wt-br-rs, var(--_ctm-dn-te-wt-br-rs, var(--_tst-dn-te-wt-br-rs))) ); box-shadow: var( --_show-shadow, var( --_ctm-mob-dn-te-wt-sw-ae, var(--_ctm-tab-dn-te-wt-sw-ae, var(--_ctm-dn-te-wt-sw-ae)) ) var( --_ctm-mob-dn-te-wt-sw-br, var(--_ctm-tab-dn-te-wt-sw-br, var(--_ctm-dn-te-wt-sw-br)) ) var( --_ctm-mob-dn-te-wt-sw-sd, var(--_ctm-tab-dn-te-wt-sw-sd, var(--_ctm-dn-te-wt-sw-sd)) ) var( --_ctm-mob-dn-te-wt-sw-cr, var(--_ctm-tab-dn-te-wt-sw-cr, var(--_ctm-dn-te-wt-sw-cr)) ) ); width: 100%; .table__container { background-color: var( --_ctm-mob-dn-te-bd-cr, var(--_ctm-tab-dn-te-bd-cr, var(--_ctm-dn-te-bd-cr)) ); border-radius: var( --_ctm-mob-dn-te-br-rs, var(--_ctm-tab-dn-te-br-rs, var(--_ctm-dn-te-br-rs)) ); box-shadow: var( --_show-table-shadow, var(--_ctm-mob-dn-te-sw-ae, var(--_ctm-tab-dn-te-sw-ae, var(--_ctm-dn-te-sw-ae))) var(--_ctm-mob-dn-te-sw-br, var(--_ctm-tab-dn-te-sw-br, var(--_ctm-dn-te-sw-br))) var(--_ctm-mob-dn-te-sw-sd, var(--_ctm-tab-dn-te-sw-sd, var(--_ctm-dn-te-sw-sd))) var(--_ctm-mob-dn-te-sw-cr, var(--_ctm-tab-dn-te-sw-cr, var(--_ctm-dn-te-sw-cr))) ); } h3 { text-align: center; width: 100%; margin-bottom: 10px; } table { border-collapse: collapse; // border: none; width: 100%; // height: 100%; text-align: var( --_ctm-mob-lt-mx-dy-se-ct-at, var(--_ctm-tab-lt-mx-dy-se-ct-at, var(--_ctm-lt-mx-dy-se-ct-at)) ); width: max-content; min-width: 100%; table-layout: auto; th, td { border: none; } thead { background-color: var( --_ctm-mob-dn-te-hr-bd-cr, var(--_ctm-tab-dn-te-hr-bd-cr, var(--_ctm-dn-te-hr-bd-cr)) ); .thead__row__divider { height: var( --_ctm-mob-lt-mx-dy-se-hr-ht, var(--_ctm-tab-lt-mx-dy-se-hr-ht, var(--_ctm-lt-mx-dy-se-hr-ht)) ); .th__col__divider { padding: var( --_ctm-mob-lt-mx-dy-se-hr-cl-pg, var(--_ctm-tab-lt-mx-dy-se-hr-cl-pg, var(--_ctm-lt-mx-dy-se-hr-cl-pg)) ); color: var( --_ctm-mob-dn-hr-tt-cr, var(--_ctm-tab-dn-hr-tt-cr, var(--_ctm-dn-hr-tt-cr)) ); font-family: var( --_ctm-mob-dn-hr-tt-ft-fy, var(--_ctm-tab-dn-hr-tt-ft-fy, var(--_ctm-dn-hr-tt-ft-fy)) ); text-transform: var( --_ctm-mob-dn-hr-tt-tt-tm, var(--_ctm-tab-dn-hr-tt-tt-tm, var(--_ctm-dn-hr-tt-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-hr-tt-wd-wp, var(--_ctm-tab-dn-hr-tt-wd-wp, var(--_ctm-dn-hr-tt-wd-wp)) ); word-break: var( --_ctm-mob-dn-hr-tt-wd-bk, var(--_ctm-tab-dn-hr-tt-wd-bk, var(--_ctm-dn-hr-tt-wd-bk)) ); font-size: var( --_ctm-mob-dn-hr-tt-ft-se, var(--_ctm-tab-dn-hr-tt-ft-se, var(--_ctm-dn-hr-tt-ft-se)) ); font-weight: var( --_ctm-mob-dn-hr-tt-ft-wt, var(--_ctm-tab-dn-hr-tt-ft-wt, var(--_ctm-dn-hr-tt-ft-wt)) ); text-decoration: var( --_ctm-mob-dn-hr-tt-ue, var(--_ctm-tab-dn-hr-tt-ue, var(--_ctm-dn-hr-tt-ue)) ); font-style: var( --_ctm-mob-dn-hr-tt-ft-se-ic, var(--_ctm-tab-dn-hr-tt-ft-se-ic, var(--_ctm-dn-hr-tt-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-hr-tt-tt-an, var(--_ctm-tab-dn-hr-tt-tt-an, var(--_ctm-dn-hr-tt-tt-an)) ); letter-spacing: var( --_ctm-mob-dn-hr-tt-lr-sg, var(--_ctm-tab-dn-hr-tt-lr-sg, var(--_ctm-dn-hr-tt-lr-sg)) ); line-height: var( --_ctm-mob-dn-hr-tt-le-ht, var(--_ctm-tab-dn-hr-tt-le-ht, var(--_ctm-dn-hr-tt-le-ht)) ); } } } tbody { .tbody__row__divider { background-color: var( --_ctm-mob-dn-te-rw-bd-cr, var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr)) ); height: var( --_ctm-mob-lt-mx-dy-se-rw-ht, var(--_ctm-tab-lt-mx-dy-se-rw-ht, var(--_ctm-lt-mx-dy-se-rw-ht)) ); .td__col__divider { padding: var( --_ctm-mob-lt-mx-dy-se-rw-cl-pg, var(--_ctm-tab-lt-mx-dy-se-rw-cl-pg, var(--_ctm-lt-mx-dy-se-rw-cl-pg)) ); color: var( --_sf-hr-fc, var( --_ctm-mob-dn-rw-tt-cr, var(--_ctm-tab-dn-rw-tt-cr, var(--_ctm-dn-rw-tt-cr)) ) ); font-family: var( --_sf-hr-ff, var( --_ctm-mob-dn-rw-tt-ft-fy, var(--_ctm-tab-dn-rw-tt-ft-fy, var(--_ctm-dn-rw-tt-ft-fy)) ) ); text-transform: var( --_sf-hr-tt-tm, var( --_ctm-mob-dn-rw-tt-tt-tm, var(--_ctm-tab-dn-rw-tt-tt-tm, var(--_ctm-dn-rw-tt-tt-tm)) ) ); word-wrap: var( --_sf-hr-wd-wp, var( --_ctm-mob-dn-rw-tt-wd-wp, var(--_ctm-tab-dn-rw-tt-wd-wp, var(--_ctm-dn-rw-tt-wd-wp)) ) ); word-break: var( --_sf-hr-wd-bk, var( --_ctm-mob-dn-rw-tt-wd-bk, var(--_ctm-tab-dn-rw-tt-wd-bk, var(--_ctm-dn-rw-tt-wd-bk)) ) ); font-size: var( --_sf-hr-fs, var( --_ctm-mob-dn-rw-tt-ft-se, var(--_ctm-tab-dn-rw-tt-ft-se, var(--_ctm-dn-rw-tt-ft-se)) ) ); text-decoration: var( --_ctm-mob-dn-rw-tt-ue, var(--_ctm-tab-dn-rw-tt-ue, var(--_ctm-dn-rw-tt-ue)) ); font-weight: var( --_sf-hr-fw, var( --_ctm-mob-dn-rw-tt-ft-wt, var(--_ctm-tab-dn-rw-tt-ft-wt, var(--_ctm-dn-rw-tt-ft-wt)) ) ); font-style: var( --_sf-hr-ft, var( --_ctm-mob-dn-rw-tt-ft-se-ic, var(--_ctm-tab-dn-rw-tt-ft-se-ic, var(--_ctm-dn-rw-tt-ft-se-ic)) ) ); text-align: var( --_sf-hr-ta, var( --_ctm-mob-dn-rw-tt-tt-an, var(--_ctm-tab-dn-rw-tt-tt-an, var(--_ctm-dn-rw-tt-tt-an)) ) ); letter-spacing: var( --_sf-hr-ls, var( --_ctm-mob-dn-rw-tt-lr-sg, var(--_ctm-tab-dn-rw-tt-lr-sg, var(--_ctm-dn-rw-tt-lr-sg)) ) ); line-height: var( --_sf-hr-lh, var( --_ctm-mob-dn-rw-tt-le-ht, var(--_ctm-tab-dn-rw-tt-le-ht, var(--_ctm-dn-rw-tt-le-ht)) ) ); } } } } .pagination { display: var(--_d-flex); align-items: var(--_align-center); justify-content: var( --_ctm-mob-lt-mx-dy-se-pn-at, var(--_ctm-tab-lt-mx-dy-se-pn-at, var(--_ctm-lt-mx-dy-se-pn-at)) ); margin-top: 10px; background-color: var( --_sf-bd-cr, var( --_ctm-mob-dn-pn-dt-se-bd-cr, var(--_ctm-tab-dn-pn-dt-se-bd-cr, var(--_ctm-dn-pn-dt-se-bd-cr)) ) ); &.pagination__center { justify-content: var(justify-center); } button { svg { width: var(--_width-18); height: var(--_height-18); path { stroke: var(--_gray-500); // stroke: var(--_ctm-dn-pn-in-c1, var(--_tst-dn-pn-in-c1)); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-pn-se-wh, 1.25); } } } span { float: left; padding: var(--_pd-8) var(--_pd-16); text-decoration: none; span { // color: var(--_sf-hr-fc, var(--_ctm-dn-pn-bn-cr, var(--_tst-dn-pn-bn-cr))); // font-size: var(--_sf-hr-fs, var(--_ctm-dn-pn-ft-se, var(--_tst-dn-pn-ft-se))); // font-family: var(--_sf-hr-ff, var(--_ctm-dn-pn-ft-fy, var(--_tst-dn-pn-ft-fy))), // font-weight: var(--_sf-hr-fw, var(--_ctm-dn-pn-ft-wt, var(--_tst-dn-pn-ft-wt))); // font-style: var(--_sf-hr-ft, var(--_ctm-dn-pn-ft-se-ic, var(--_tst-dn-pn-ft-se-ic))); // text-align: var(--_sf-hr-ta, var(--_ctm-dn-pn-tt-an, var(--_tst-dn-pn-tt-an))); // letter-spacing: var(--_sf-hr-ls, var(--_ctm-dn-pn-lr-sg, var(--_tst-dn-pn-lr-sg))); // line-height: var(--_sf-hr-lh, var(--_ctm-dn-pn-le-ht, var(--_tst-dn-pn-le-ht))); } &.active:hover { &hover { --_sf-hr-fc: var(--_ctm-dn-pn-hr-se-cr, var(--_tst-dn-pn-hr-se-cr)); --_sf-hr-ff: var(--_ctm-dn-pn-hr-se-ft-fy, var(--_tst-dn-pn-hr-se-ft-fy)); --_sf-hr-tt-tm: var(--_ctm-dn-pn-hr-se-tt-tm, var(--_tst-dn-pn-hr-se-tt-tm)); --_sf-hr-wd-wp: var(--_ctm-dn-pn-hr-se-wd-wp, var(--_tst-dn-pn-hr-se-wd-wp)); --_sf-hr-wd-bk: var(--_ctm-dn-pn-hr-se-wd-bk, var(--_tst-dn-pn-hr-se-wd-bk)); --_sf-hr-fs: var(--_ctm-dn-pn-hr-se-ft-se, var(--_tst-dn-pn-hr-se-ft-se)); --_sf-hr-fw: var(--_ctm-dn-pn-hr-se-ft-wt, var(--_tst-dn-pn-hr-se-ft-wt)); --_sf-hr-ft: var(--_ctm-dn-pn-hr-se-ft-se-ic, var(--_tst-dn-pn-hr-se-ft-se-ic)); --_sf-hr-ta: var(--_ctm-dn-pn-hr-se-tt-an, var(--_tst-dn-pn-hr-se-tt-an)); --_sf-hr-ls: var(--_ctm-dn-pn-hr-se-lr-sg, var(--_tst-dn-pn-hr-se-lr-sg)); --_sf-hr-lh: var(--_ctm-dn-pn-hr-se-le-ht, var(--_tst-dn-pn-hr-se-le-ht)); } } &.active { color: var( --_sf-hr-fc, var( --_ctm-mob-dn-pn-dt-se-cr, var(--_ctm-tab-dn-pn-dt-se-cr, var(--_ctm-dn-pn-dt-se-cr)) ) ); font-family: var( --_sf-hr-ff, var( --_ctm-mob-dn-pn-dt-se-ft-fy, var(--_ctm-tab-dn-pn-dt-se-ft-fy, var(--_ctm-dn-pn-dt-se-ft-fy)) ) ); text-transform: var( --_sf-hr-tt-tm, var( --_ctm-mob-dn-pn-dt-se-tt-tm, var(--_ctm-tab-dn-pn-dt-se-tt-tm, var(--_ctm-dn-pn-dt-se-tt-tm)) ) ); word-wrap: var( --_sf-hr-wd-wp, var( --_ctm-mob-dn-pn-dt-se-wd-wp, var(--_ctm-tab-dn-pn-dt-se-wd-wp, var(--_ctm-dn-pn-dt-se-wd-wp)) ) ); word-break: var( --_sf-hr-wd-bk, var( --_ctm-mob-dn-pn-dt-se-wd-bk, var(--_ctm-tab-dn-pn-dt-se-wd-bk, var(--_ctm-dn-pn-dt-se-wd-bk)) ) ); font-size: var( --_sf-hr-fs, var( --_ctm-mob-dn-pn-dt-se-ft-se, var(--_ctm-tab-dn-pn-dt-se-ft-se, var(--_ctm-dn-pn-dt-se-ft-se)) ) ); text-decoration: var( --_sf-hr-td, var( --_ctm-mob-dn-pn-dt-se-ue, var(--_ctm-tab-dn-pn-dt-se-ue, var(--_ctm-dn-pn-dt-se-ue)) ) ); font-weight: var( --_sf-hr-fw, var( --_ctm-mob-dn-pn-dt-se-ft-wt, var(--_ctm-tab-dn-pn-dt-se-ft-wt, var(--_ctm-dn-pn-dt-se-ft-wt)) ) ); font-style: var( --_sf-hr-ft, var( --_ctm-mob-dn-pn-dt-se-ft-se-ic, var(--_ctm-tab-dn-pn-dt-se-ft-se-ic, var(--_ctm-dn-pn-dt-se-ft-se-ic)) ) ); text-align: var( --_sf-hr-ta, var( --_ctm-mob-dn-pn-dt-se-tt-an, var(--_ctm-tab-dn-pn-dt-se-tt-an, var(--_ctm-dn-pn-dt-se-tt-an)) ) ); letter-spacing: var( --_sf-hr-ls, var( --_ctm-mob-dn-pn-dt-se-lr-sg, var(--_ctm-tab-dn-pn-dt-se-lr-sg, var(--_ctm-dn-pn-dt-se-lr-sg)) ) ); line-height: var( --_sf-hr-lh, var( --_ctm-mob-dn-pn-dt-se-le-ht, var(--_ctm-tab-dn-pn-dt-se-le-ht, var(--_ctm-dn-pn-dt-se-le-ht)) ) ); } } .pagination__arrows { color: var( --_sf-hr-fc, var(--_ctm-mob-dn-pn-in-c1, var(--_ctm-tab-dn-pn-in-c1, var(--_ctm-dn-pn-in-c1))) ); font-size: var( --_sf-hr-fs, var(--_ctm-mob-dn-pn-in-se, var(--_ctm-tab-dn-pn-in-se, var(--_ctm-dn-pn-in-se))) ); } } } .btn__with__text[data-btn-name="loadMore"] { &[data-show-shadow="false"] { --_show-shadow: none; } &[data-icon-position="left"] { --_sf-fd-bn: row; } &[data-icon-position="right"] { --_sf-fd-bn: row-reverse; } &[data-icon-position="center"] { --_sf-fd-bn: row; } &:hover { --_sf-hr-bd-cr: var( --_ctm-mob-dn-ld-me-bn-hr-se-bd-cr, var(--_ctm-tab-dn-ld-me-bn-hr-se-bd-cr, var(--_ctm-dn-ld-me-bn-hr-se-bd-cr)) ); --_sf-hr-br-cr: var( --_ctm-mob-dn-ld-me-bn-hr-se-br-cr, var(--_ctm-tab-dn-ld-me-bn-hr-se-br-cr, var(--_ctm-dn-ld-me-bn-hr-se-br-cr)) ); --_sf-hr-br-se: var( --_ctm-mob-dn-ld-me-bn-hr-se-br-se, var(--_ctm-tab-dn-ld-me-bn-hr-se-br-se, var(--_ctm-dn-ld-me-bn-hr-se-br-se)) ); --_sf-hr-br-wh: var( --_ctm-mob-dn-ld-me-bn-hr-se-br-wh, var(--_ctm-tab-dn-ld-me-bn-hr-se-br-wh, var(--_ctm-dn-ld-me-bn-hr-se-br-wh)) ); --_sf-hr-br-rs: var( --_ctm-mob-dn-ld-me-bn-hr-se-br-rs, var(--_ctm-tab-dn-ld-me-bn-hr-se-br-rs, var(--_ctm-dn-ld-me-bn-hr-se-br-rs)) ); --_sf-hr-at: var( --_ctm-mob-dn-ld-me-bn-hr-se-at, var(--_ctm-tab-dn-ld-me-bn-hr-se-at, var(--_ctm-dn-ld-me-bn-hr-se-at)) ); --_sf-hr-gp: var( --_ctm-mob-dn-ld-me-bn-hr-se-gp, var(--_ctm-tab-dn-ld-me-bn-hr-se-gp, var(--_ctm-dn-ld-me-bn-hr-se-gp)) ); // for shadow --_sf-hr-sw-ae: var( --_ctm-mob-dn-ld-me-bn-hr-se-sw-ae, var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-ae, var(--_ctm-dn-ld-me-bn-hr-se-sw-ae)) ); --_sf-hr-sw-br: var( --_ctm-mob-dn-ld-me-bn-hr-se-sw-br, var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-br, var(--_ctm-dn-ld-me-bn-hr-se-sw-br)) ); --_sf-hr-sw-hr: var( --_ctm-mob-dn-ld-me-bn-hr-se-sw-hr, var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-hr, var(--_ctm-dn-ld-me-bn-hr-se-sw-hr)) ); --_sf-hr-sw-cr: var( --_ctm-mob-dn-ld-me-bn-hr-se-sw-cr, var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-cr, var(--_ctm-dn-ld-me-bn-hr-se-sw-cr)) ); // for font --_sf-hr-cr: var( --_ctm-mob-dn-ld-me-bn-hr-se-cr, var(--_ctm-tab-dn-ld-me-bn-hr-se-cr, var(--_ctm-dn-ld-me-bn-hr-se-cr)) ); --_sf-hr-ft-fy: var( --_ctm-mob-dn-ld-me-bn-hr-se-ft-fy, var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-fy, var(--_ctm-dn-ld-me-bn-hr-se-ft-fy)) ); --_sf-hr-tt-tm: var( --_ctm-mob-dn-ld-me-bn-hr-se-tt-tm, var(--_ctm-tab-dn-ld-me-bn-hr-se-tt-tm, var(--_ctm-dn-ld-me-bn-hr-se-tt-tm)) ); --_sf-hr-wd-wp: var( --_ctm-mob-dn-ld-me-bn-hr-se-wd-wp, var(--_ctm-tab-dn-ld-me-bn-hr-se-wd-wp, var(--_ctm-dn-ld-me-bn-hr-se-wd-wp)) ); --_sf-hr-wd-bk: var( --_ctm-mob-dn-ld-me-bn-hr-se-wd-bk, var(--_ctm-tab-dn-ld-me-bn-hr-se-wd-bk, var(--_ctm-dn-ld-me-bn-hr-se-wd-bk)) ); --_sf-hr-ft-se: var( --_ctm-mob-dn-ld-me-bn-hr-se-ft-se, var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-se, var(--_ctm-dn-ld-me-bn-hr-se-ft-se)) ); --_sf-hr-ft-wt: var( --_ctm-mob-dn-ld-me-bn-hr-se-ft-wt, var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-wt, var(--_ctm-dn-ld-me-bn-hr-se-ft-wt)) ); --_sf-hr-ft-se-ic: var( --_ctm-mob-dn-ld-me-bn-hr-se-ft-se-ic, var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-se-ic, var(--_ctm-dn-ld-me-bn-hr-se-ft-se-ic)) ); --_sf-hr-tt-an: var( --_ctm-mob-dn-ld-me-bn-hr-se-tt-an, var(--_ctm-tab-dn-ld-me-bn-hr-se-tt-an, var(--_ctm-dn-ld-me-bn-hr-se-tt-an)) ); --_sf-hr-lr-sg: var( --_ctm-mob-dn-ld-me-bn-hr-se-lr-sg, var(--_ctm-tab-dn-ld-me-bn-hr-se-lr-sg, var(--_ctm-dn-ld-me-bn-hr-se-lr-sg)) ); --_sf-hr-le-ht: var( --_ctm-mob-dn-ld-me-bn-hr-se-le-ht, var(--_ctm-tab-dn-ld-me-bn-hr-se-le-ht, var(--_ctm-dn-ld-me-bn-hr-se-le-ht)) ); --_sf-hr-in-se: var( --_ctm-mob-dn-ld-me-bn-hr-se-in-se, var(--_ctm-tab-dn-ld-me-bn-hr-se-in-se, var(--_ctm-dn-ld-me-bn-hr-se-in-se)) ); --_sf-hr-in-se: var( --_ctm-mob-dn-ld-me-bn-hr-se-in-se, var(--_ctm-tab-dn-ld-me-bn-hr-se-in-se, var(--_ctm-dn-ld-me-bn-hr-se-in-se)) ); --_sf-hr-in-c1: var( --_ctm-mob-dn-ld-me-bn-hr-se-in-c1, var(--_ctm-tab-dn-ld-me-bn-hr-se-in-c1, var(--_ctm-dn-ld-me-bn-hr-se-in-c1)) ); --_sf-hr-ue: var( --_ctm-mob-dn-ld-me-bn-hr-se-ue, var(--_ctm-tab-dn-ld-me-bn-hr-se-ue, var(--_ctm-dn-ld-me-bn-hr-se-ue)) ); // for pading and width --_sf-hr-pg: var( --_ctm-mob-dn-ld-me-bn-hr-pg, var(--_ctm-tab-dn-ld-me-bn-hr-pg, var(--_ctm-dn-ld-me-bn-hr-pg)) ); --_sf-hr-wh: var( --_ctm-mob-dn-ld-me-bn-hr-wh, var(--_ctm-tab-dn-ld-me-bn-hr-wh, var(--_ctm-dn-ld-me-bn-hr-wh)) ); &[data-hover-show-shadow="false"] { --_hover-show-shadow: none; } &[data-hover-show-icon="false"] { --_hover-show-icon: none; } } background-color: var( --_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-bd-cr) ); padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-pg)); width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-wh)); display: flex; flex-direction: var(--_sf-fd-bn); align-items: center; justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-at)); gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-gp)); border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-rs)); box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-cr)); &[data-show-border="true"] { border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-cr)); border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-se)); border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-wh)); } .txt { display: flex; color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-cr)); font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-fy)); text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-tt-tm)); word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-wd-wp)); word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-ld-me-bn-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-ld-me-bn-dt-se-ft-se)); font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-wt)); font-style: var( --_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-se-ic) ); text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-tt-an)); letter-spacing: var( --_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-lr-sg) ); line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-le-ht)); text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue)); } .icon { display: var(--_hover-show-icon, var(--_show-icon, flex)); svg { width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-se)); height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-se)); path { stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-c1)); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-se-wh, 1.25); } } } [data-element-style="Text"] { display: inline-block; width: 100%; } .icon--hover { // position: absolute; // inset: 0; // opacity: 0; display: none; transition: opacity 0.2s ease; } &:hover .icon--hover { // opacity: 1; display: flex; } &:hover .icon--default { // opacity: 0; display: none; } } } .input { // width: 100%; width: var(--_ctm-mob-dn-it-wh, var(--_ctm-tab-dn-it-wh, var(--_ctm-dn-it-wh))); // height: 40px; background-color: var( --_ctm-mob-dn-it-wh, var(--_ctm-tab-dn-it-bd-cr, var(--_ctm-dn-it-bd-cr)) ); box-shadow: var( --_ctm-mob-dn-it-sw-ae, var(--_ctm-tab-dn-it-sw-ae, var(--_ctm-dn-it-sw-ae)) ) var(--_ctm-mob-dn-it-sw-br, var(--_ctm-tab-dn-it-sw-br, var(--_ctm-dn-it-sw-br))) var(--_ctm-mob-dn-it-sw-sd, var(--_ctm-tab-dn-it-sw-sd, var(--_ctm-dn-it-sw-sd))) var(--_ctm-mob-dn-it-sw-cr, var(--_ctm-tab-dn-it-sw-cr, var(--_ctm-dn-it-sw-cr))); border-radius: var( --_ctm-mob-dn-it-br-rs, var(--_ctm-tab-dn-it-br-rs, var(--_ctm-dn-it-br-rs)) ); border-color: var( --_ctm-mob-dn-it-br-cr, var(--_ctm-tab-dn-it-br-cr, var(--_ctm-dn-it-br-cr)) ); border-style: var( --_ctm-mob-dn-it-br-se, var(--_ctm-tab-dn-it-br-se, var(--_ctm-dn-it-br-se)) ); border-width: var( --_ctm-mob-dn-it-br-wh, var(--_ctm-tab-dn-it-br-wh, var(--_ctm-dn-it-br-wh)) ); padding: prepareMediaVariable(--_ctm-dn-it-pg); // flex-grow: 1; outline: none; &::placeholder { color: var(--_ctm-mob-dn-pr-tt-cr, var(--_ctm-tab-dn-pr-tt-cr, var(--_ctm-dn-pr-tt-cr))); font-family: var( --_ctm-mob-dn-pr-tt-ft-fy, var(--_ctm-tab-dn-pr-tt-ft-fy, var(--_ctm-dn-pr-tt-ft-fy)) ); text-transform: var( --_ctm-mob-dn-pr-tt-tt-tm, var(--_ctm-tab-dn-pr-tt-tt-tm, var(--_ctm-dn-pr-tt-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-pr-tt-wd-wp, var(--_ctm-tab-dn-pr-tt-wd-wp, var(--_ctm-dn-pr-tt-wd-wp)) ); word-break: var( --_ctm-mob-dn-pr-tt-wd-bk, var(--_ctm-tab-dn-pr-tt-wd-bk, var(--_ctm-dn-pr-tt-wd-bk)) ); font-size: var( --_ctm-mob-dn-pr-tt-ft-se, var(--_ctm-tab-dn-pr-tt-ft-se, var(--_ctm-dn-pr-tt-ft-se)) ); font-weight: var( --_ctm-mob-dn-pr-tt-ft-wt, var(--_ctm-tab-dn-pr-tt-ft-wt, var(--_ctm-dn-pr-tt-ft-wt)) ); font-style: var( --_ctm-mob-dn-pr-tt-ft-se-ic, var(--_ctm-tab-dn-pr-tt-ft-se-ic, var(--_ctm-dn-pr-tt-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-pr-tt-tt-an, var(--_ctm-tab-dn-pr-tt-tt-an, var(--_ctm-dn-pr-tt-tt-an)) ); letter-spacing: var( --_ctm-mob-dn-pr-tt-lr-sg, var(--_ctm-tab-dn-pr-tt-lr-sg, var(--_ctm-dn-pr-tt-lr-sg)) ); line-height: var( --_ctm-mob-dn-pr-tt-le-ht, var(--_ctm-tab-dn-pr-tt-le-ht, var(--_ctm-dn-pr-tt-le-ht)) ); text-decoration: var( --_ctm-mob-dn-pr-tt-ue, var(--_ctm-tab-dn-pr-tt-ue, var(--_ctm-dn-pr-tt-ue)) ); } } .cross-line { position: absolute; inset: 0; background-color: #cccccc; clip-path: polygon(100% 0, 100% 1px, 0 100%, 0 96%); pointer-events: none; } tbody { td { &:has(input:disabled) { position: relative; color: #aaa; background-color: #f9f9f9; border-color: #ddd; cursor: not-allowed; opacity: 0.3; overflow: hidden; } } } } } }