@use "sass:map"; @use "sass:list"; @use "./functions.scss" as *; $overflowSelector: ".flex__overflow"; $resizerId: "[data-cms-tool='cms-element-resizer']"; $resizeActive: '[data-cms-element-resizer="true"]'; $defaultValues: ( --_sf-flex-direckdaka-coldds: getListOfResponsive(row, column, column), --_sf-flex-direckdaka-mobile: getListOfResponsive(row, column), ); [data-div-type="element"] { &[data-element-type="kitDetails"] { // width: var(--_sf-con-nw-wh); 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))) ) ); height: auto; margin: var( --_ctm-mob-lt-mn, var( --_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)))) ) ); background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr))); background-image: var(--_ctm-mob-dn-bd-ie, var(--_ctm-tab-dn-bd-ie, var(--_ctm-dn-bd-ie))); background-attachment: var(--_ctm-mob-dn-bd-at, var(--_ctm-tab-dn-bd-at, var(--_ctm-dn-bd-at))); background-position: var(--_ctm-mob-dn-bd-pn, var(--_ctm-tab-dn-bd-pn, var(--_ctm-dn-bd-pn))); background-repeat: var(--_ctm-mob-dn-bd-rt, var(--_ctm-tab-dn-bd-rt, var(--_ctm-dn-bd-rt))); background-size: var(--_ctm-mob-dn-bd-se, var(--_ctm-tab-dn-bd-se, var(--_ctm-dn-bd-se))); padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg))); border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr))); border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se))); border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh))); border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs))); box-shadow: var( --_show-shadow, var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae))) var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br))) var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd))) var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr))) ); // &:not(:has(#{$resizerId}#{$resizeActive})) { // min-height: 100px !important; // } & > div { &.wrapper { width: 100%; // grid-template-rows: max(var(--_ctm-lt-ht), auto) !important; } } .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: grid; grid-template-rows: 100%; grid-template-columns: repeat( var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))), calc( 100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))) ) ); grid-auto-flow: column; gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp))); &[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)) ) + 10px ) ); } &[data-control-type="Bottom"][data-slider-control="Pagination Line"] { height: calc( 100% - calc( var( --_ctm-mob-dn-pn-le-le-ht, var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht)) ) + 20px ) ); } &[data-control-type="Bottom"][data-slider-control="Dots"] { height: calc( 100% - calc( var( --_ctm-mob-dn-pn-ds-dt-se, var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)) ) + 20px ) ); } .embla__slide { width: 100%; height: 100%; } } } &:not([data-display-style="Column"]) { .embla__container { grid-auto-columns: calc( 100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))) ); } } &[data-display-style="Grid"][data-scroll-direction="Vertical"] { // overflow: unset; .embla__viewport { overflow: unset; height: 80%; flex-grow: 1; &:not([data-is-builder-type="true"]) { height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height))); } .embla__container { overflow: unset; height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height))); // min-height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height))); grid-template-columns: repeat(#{prepareMediaVariable(--_ctm-lt-is-pr-rw)}, 1fr); grid-template-rows: unset; grid-auto-flow: row; &[data-overflow-hidden="true"] { overflow: hidden; } } } } &[data-display-style="Grid"][data-scroll-direction="Horizontal"] { .embla__viewport { .embla__container { grid-template-rows: repeat( var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))), calc( 100% / var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))) ) ); } } } &[data-display-style="Rows"] { // overflow: unset; .embla__viewport { overflow: unset; height: 80%; flex-grow: 1; &:not([data-is-builder-type="true"]) { height: var(--_ctm-height); } .embla__container { overflow: hidden; height: var(--_ctm-height); // min-height: var(--_ctm-height); grid-template-columns: repeat( var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))), 1fr ); grid-template-rows: unset; grid-auto-flow: row; } } } &[data-display-style="Column"] { // overflow: unset; .embla__viewport { .embla__container { display: flex; .embla__slide { width: unset; height: 100%; // aspect-ratio: 1 / 2; } } } } &[data-display-style="Masonry"] { // overflow: unset; .embla__viewport { overflow: hidden; height: 80%; flex-grow: 1; &:not([data-is-builder-type="true"]) { height: var(--_ctm-height); } .embla__container { overflow: unset; display: block; column-count: var( --_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw)) ); gap: unset; column-gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp))); height: auto; .embla__slide { margin-bottom: var( --_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)) ); height: unset; .gallery__slide { height: unset; } } } } } .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-control-type="Side"] { .embla__viewport { width: calc(100% - 120px); margin-inline: auto; } .left-button { position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .right-button { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } } &[data-thumbnail-placement="top"] { flex-direction: column-reverse; } &[data-thumbnail-placement="bottom"] { flex-direction: column; } &[data-thumbnail-placement="left"] { flex-direction: row-reverse; .embla__thumbs { width: var(--_ctm-lt-tl-se); height: 100%; & .embla__thumbs__container { flex-direction: column; height: 100%; } } } &[data-thumbnail-placement="right"] { flex-direction: row; .embla__thumbs { width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se))); height: 100%; & .embla__thumbs__container { flex-direction: column; height: 100%; } } } .embla__dots { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-right: calc((2.6rem - 1.4rem) / 2 * -1); gap: 6px; 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-mob-dn-pn-ds-or-dt-cr, var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr)) ); touch-action: manipulation; display: inline-flex; text-decoration: none; cursor: pointer; border: 0; padding: 0; margin: 0; // width: 0.6rem; // height: 0.6rem; width: var( --_ctm-mob-dn-pn-ds-dt-se, var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)) ); height: var( --_ctm-mob-dn-pn-ds-dt-se, var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)) ); display: flex; align-items: center; justify-content: center; border-radius: 50%; } .embla__dot:after { // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast); width: var( --_ctm-mob-dn-pn-ds-dt-se, var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)) ); height: var( --_ctm-mob-dn-pn-ds-dt-se, var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)) ); border-radius: 50%; display: flex; align-items: center; content: ""; } .embla__dot--selected:after { box-shadow: inset 0 0 0 1px var(--text-body); background-color: var( --_ctm-mob-dn-pn-ds-ct-dt-cr, var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr)) ); } &[data-slider-control="Pagination Line"] { .embla__dot { width: var( --_ctm-mob-dn-pn-le-le-wh, var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh)) ); height: var( --_ctm-mob-dn-pn-le-le-ht, var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht)) ); background-color: var( --_ctm-mob-dn-pn-le-or-le-cr, var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr)) ); border-radius: 6px; } .embla__dot--selected:after { box-shadow: inset 0 0 0 1px var(--text-body); border-radius: 6px; width: var( --_ctm-mob-dn-pn-le-le-wh, var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh)) ); height: var( --_ctm-mob-dn-pn-le-le-ht, var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht)) ); background-color: var( --_ctm-mob-dn-pn-le-ct-le-cr, var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr)) ); } } } .embla__thumbs { width: 100%; height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se))); position: relative; display: grid; grid-template-columns: 1fr; overflow: hidden; // margin: 10px; padding: 10px; .embla__thumbs__viewport { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; overflow: hidden; } .embla__thumbs__container { display: flex; flex-direction: row; margin-left: calc(var(--thumbs-slide-spacing) * -1); gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg))); width: 100%; // justify-content: center; // height: 200px; .embla__thumbs__slide { min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se))); max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se))); height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se))); & img { // width: 100%; // height: 100%; } } } } } .kit__details__element__container { width: 100%; @include prepareMediaQueries($defaultValues); hr { border: none; height: 1px; background: prepareMediaVariable(--_ctm-dn-kt-ds-lt-dn-by-dr-cr, #f2f4f7); } .kit_details_heading_wrapper { display: flex; width: 100%; flex-direction: column; padding: prepareMediaVariable(--_ctm-dn-kt-ds-lt-dn-hr-pg, 24px 96px); // border-bottom: 1px solid #d0d5dd; gap: prepareMediaVariable(--_ctm-dn-kt-ds-lt-dn-hr-im-gp, 16px); .kit_details_heading_text_wrapper { display: flex; flex-direction: column; gap: 6px; width: 100%; flex: 1 0 0; .kit_name { background-color: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-ne-dn-bd-cr); border-color: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-ne-dn-br-cr); border-radius: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-ne-dn-br-rs); border-style: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-ne-dn-br-se); border-width: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-ne-dn-br-wh); color: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-ne-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-ne-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-ne-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-ne-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-ne-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-ne-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-ne-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-ne-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-ne-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-ne-dn-lr-sg); box-shadow: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-ne-dn-sw-ae) prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-ne-dn-sw-br) prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-ne-dn-sw-sd) prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-ne-dn-sw-cr); text-align: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-ne-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-ne-dn-ue); } .kit_description { background-color: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-dn-dn-bd-cr); border-color: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-dn-dn-br-cr); border-radius: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-dn-dn-br-rs); border-style: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-dn-dn-br-se); border-width: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-dn-dn-br-wh); color: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-dn-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-dn-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-dn-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-dn-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-dn-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-dn-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-dn-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-dn-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-dn-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-dn-dn-lr-sg); box-shadow: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-dn-dn-sw-ae) prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-dn-dn-sw-br) prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-dn-dn-sw-sd) prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-dn-dn-sw-cr); text-align: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-dn-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-dn-dn-ue); } } .category_card_wrapper { cursor: pointer; display: flex; padding: 16px; gap: 12px; background-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-bd-cr); border-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-br-cr); border-radius: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-br-rs); border-style: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-br-se); border-width: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-br-wh); box-shadow: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-sw-ae) prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-sw-br) prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-sw-sd) prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-sw-cr); &:hover { background-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-bd-cr); border-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-br-cr); border-radius: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-br-rs); border-style: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-br-se); border-width: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-br-wh); box-shadow: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-sw-ae) prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-sw-br) prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-sw-sd) prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-sw-cr); } &.active { background-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-bd-cr); border-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-br-cr); border-radius: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-br-rs); border-style: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-br-se); border-width: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-br-wh); box-shadow: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-sw-ae) prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-sw-br) prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-sw-sd) prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-sw-cr); } .category_image { width: 48px; height: 72px; } .category_card_info_wrapper { display: flex; flex-direction: column; gap: 4px; width: fit-content; white-space: nowrap; .category_card_category_name { // background-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-bd-cr); color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ue); } .category_card_product_count { // background-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-bd-cr); color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ue); } .category_card_product_select_count { // background-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-bd-cr); color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ue); } } } } .kit_details_product_list_wrapper { @import "./product-image-bundles.scss"; display: flex; flex-direction: column; gap: prepareMediaVariable(--_ctm-dn-kt-ds-lt-dn-by-im-gp, 16px); padding: prepareMediaVariable(--_ctm-dn-kt-ds-lt-dn-by-pg, 36px 96px); width: 100%; .add_to_cart_wrapper { display: flex; flex-direction: column; gap: prepareMediaVariable(--_ctm-dn-kt-ds-lt-dn-ad-to-ct-im-gp, 16px); padding: prepareMediaVariable(--_ctm-dn-kt-ds-lt-dn-ad-to-ct-pg, 16px); width: 100%; background-color: prepareMediaVariable(--_ctm-dn-kt-ds-lt-dn-ad-to-ct-bd-cr, #f5f5f5); .add_to_cart_heading { // border-color: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-ne-dn-br-cr); // border-radius: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-ne-dn-br-rs); // border-style: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-ne-dn-br-se); // border-width: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-ne-dn-br-wh); color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-te-cr); font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-te-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-te-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-te-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-te-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-te-ft-se); font-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-te-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-te-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-te-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-te-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-te-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-te-ue); } .add_to_cart_estimator_wrapper { display: flex; gap: prepareMediaVariable(--_ctm-dn-kt-ds-lt-dn-ad-to-ct-im-gp, 48px); justify-content: space-between; width: 100%; flex-direction: var(--_sf-flex-direckdaka-mobile, row); .add_to_cart_estimate_wrapper { display: flex; flex-direction: column; gap: 6px; .add_to_cart_qty { width: 205px; // border: 1px solid #d0d5dd !important; // border-radius: 2px !important; outline: none; // padding: 8px 12px !important; &:disabled { // background-color: #f9fafb; cursor: no-drop; } font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-ft-se); font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-wd-bk); color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-te-cr); font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-ft-wt); text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-te-ue); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-tt-an); line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-le-ht); padding: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-pg); border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-br-cr); border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-br-wh); border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-br-se); border-radius: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-br-rs); background: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-bd-cr); box-shadow: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-sw-ae) prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-sw-br) prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-sw-sd) prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-sw-cr); } .add_to_cart_price { background-color: transparent; color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-cr); font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ft-se); font-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ue); } .add_to_cart_estimate_label { font-family: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-ne-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-ne-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-ne-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-kt-ds-hr-dn-kt-ne-dn-wd-bk); line-height: 150%; font-size: 16px; color: #000000; &:not(:has(+ input)) { color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ll-cr); font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ll-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ll-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ll-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ll-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ll-ft-se); font-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ll-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ll-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ll-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ll-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ll-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ll-ue); } &:has(+ input) { color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-qy-ll-cr); font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-qy-ll-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-qy-ll-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-qy-ll-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-qy-ll-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-qy-ll-ft-se); font-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-qy-ll-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-qy-ll-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-qy-ll-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-qy-ll-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-qy-ll-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-qy-ll-ue); } } } } .add_to_cart_btn { display: flex; justify-content: center; align-items: center; padding: 10px 16px; transition: all 0.3s ease; background-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-bd-cr); border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-cr); border-radius: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-rs); border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-se); border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-wh); color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-cr); font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-wd-bk); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-se); font-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-lr-sg); box-shadow: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-ae) prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-br) prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-sd) prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-cr); text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ue); &:disabled { cursor: not-allowed; } &:hover { background-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-bd-cr); border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-cr); border-radius: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-rs); border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-se); border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-wh); color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-cr); font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-se); font-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-lr-sg); box-shadow: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-ae) prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-br) prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-sd) prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-cr); text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ue); } &.selected { background-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-bd-cr); border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-br-cr); border-radius: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-br-rs); border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-br-se); border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-br-wh); color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-cr); font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ft-se); font-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-lr-sg); box-shadow: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-sw-ae) prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-sw-br) prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-sw-sd) prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-sw-cr); text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ue); .icon { color: white; } } } } .kit_details_product_wrapper { display: flex; gap: prepareMediaVariable(--_ctm-dn-kt-ds-lt-dn-by-im-gp, 48px); width: 100%; flex-direction: var(--_sf-flex-direckdaka-coldds, row); &.vertical_wrapper { flex-direction: row; .product_card_scroll_wrapper { min-width: 400px; max-width: 400px; display: flex; flex-direction: column; gap: 16px; .category_kit_product_card { width: 100%; display: flex; padding: 16px; gap: 16px; background-color: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-bd-cr); border-color: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-br-cr); border-radius: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-br-rs); border-style: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-br-se); border-width: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-br-wh); box-shadow: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-sw-ae) prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-sw-br) prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-sw-sd) prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-sw-cr); &:hover { background-color: prepareMediaVariable( --_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-bd-cr ); border-color: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-br-cr); border-radius: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-br-rs); border-style: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-br-se); border-width: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-br-wh); box-shadow: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-sw-ae) prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-sw-br) prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-sw-sd) prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-sw-cr); } &.active { background-color: prepareMediaVariable( --_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-bd-cr ); border-color: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-br-cr); border-radius: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-br-rs); border-style: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-br-se); border-width: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-br-wh); box-shadow: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-sw-ae) prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-sw-br) prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-sw-sd) prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-sw-cr); .category_kit_product_card_product_name { font-weight: bolder; } } .category_kit_product_card_select { width: auto; } .category_kit_product_card_img { width: 80px; height: auto; } .category_kit_product_card_info { display: flex; flex-direction: column; gap: 24px; .category_kit_product_card_info_wrapper { display: flex; flex-direction: column; gap: 6px; .category_kit_product_card_product_name { // background-color: prepareMediaVariable( // --_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-bd-cr // ); color: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ue); } .category_kit_product_card_brand_name { // background-color: prepareMediaVariable( // --_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-bd-cr // ); color: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ue); } .category_kit_product_card_item_name { // background-color: prepareMediaVariable( // --_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-bd-cr // ); color: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ue); } } .category_kit_product_card_product_price { // background-color: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-bd-cr); color: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ue); } } } } } .gallery { display: flex; flex-direction: column; gap: 16px; .mainImage { position: relative; overflow: visible; border-radius: 8px; background-color: #f9fafb; aspect-ratio: 1 / 1; width: 360px; &::before { content: ""; display: block; padding-top: 100%; } } .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease-in-out; &:hover { transform: scale(1.05); } } .thumbnails { display: flex; gap: 8px; } .thumbnailButton { width: 80px; height: 80px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; background: none; transition: border-color 0.2s ease-in-out; &:hover { border-color: #dbeafe; } &.active { border-color: #2563eb; } &:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px #dbeafe; } } .thumbnailImage { width: 100%; height: 100%; object-fit: cover; } } .kit_detail_product_information { display: flex; flex-direction: column; flex: 1 0 0; width: 100%; gap: 24px; .kit_detail_product_image_slide_wrapper { display: flex; max-width: 40rem; gap: 16px; overflow-x: scroll; .kit_detail_product_image_slide { width: 148px; height: 248px; } } .kit_detail_product_heading_wrapper { display: flex; flex-direction: column; gap: 6px; width: 100%; .kit_detail_product_name { // background-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ne-dn-bd-cr); color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ne-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ne-dn-ft-fy); word-wrap: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ne-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ne-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ne-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ne-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ne-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ne-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ne-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ne-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ne-dn-ue); text-transform: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ne-dn-tt-tm); width: 100%; &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } } .kit_detail_product_info { // background-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-io-dn-bd-cr); color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-io-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-io-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-io-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-io-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-io-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-io-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-io-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-io-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-io-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-io-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-io-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-io-dn-ue); width: 100%; } } .kit_detail_product_price { // background-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-pe-dn-bd-cr); color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-pe-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-pe-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-pe-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-pe-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-pe-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-pe-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-pe-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-pe-dn-ue); width: 100%; } .variant__picker__static { .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-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr) ) ); font-family: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy) ) ); text-transform: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-tm, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-tm, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-tm) ) ); word-wrap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-wp, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-wp, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-wp) ) ); word-break: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-bk, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-bk, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-bk) ) ); font-size: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se) ) ); font-weight: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt) ) ); font-style: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se-ic, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se-ic, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se-ic) ) ); text-align: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an) ) ); letter-spacing: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg) ) ); line-height: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht) ) ); text-decoration: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg) ) ); padding: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-pg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-pg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-pg) ) ); white-space: nowrap; .standard_wrapper { // Select Colors .select__colors { font-size: 16px; color: var(--_gray-500); display: flex; flex-direction: column; gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg) ) ); // padding: var( // --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-pg, // var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-pg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-pg)) // ); .select__group { display: flex; flex-direction: row; gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se: var( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-se ); height: prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-se ); width: prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-se ); padding: prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-pg ); border-color: var( --_sf-hr-br-cr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-cr ) ); background-color: var( --_sf-hr-bd-cr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-bd-cr ) ); border-style: var( --_sf-hr-br-se, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-se ) ); border-width: var( --_sf-hr-br-wh, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-wh ) ); border-radius: var( --_sf-hr-br-rs, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-rs ) ); box-shadow: var( --_sf-hr-sw-ae, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-sw-ae ) ) var( --_sf-hr-sw-br, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-sw-br ) ) var( --_sf-hr-sw-sd, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-sw-sd ) ) var( --_sf-hr-sw-cr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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: var( --_sf-hr-br-rs, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-rs ) ); } &[data-background-shape="capsule"] { --toggle-height: var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-se); --toggle-width: calc( var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-swatch-shape="square"] { & div, .product-select-image { border-radius: var( --_sf-hr-br-rs, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-rs ) ); } // border-radius: 50%; } &[data-selected="true"] { border-color: var( --_sf-sd-br-cr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-cr ) ); background-color: var( --_sf-sd-bd-cr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-bd-cr ) ); border-style: var( --_sf-sd-br-se, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-se ) ); border-width: var( --_sf-sd-br-wh, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-wh ) ); box-shadow: var( --_sf-sd-sw-ae, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-ae ) ) var( --_sf-sd-sw-br, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-br ) ) var( --_sf-sd-sw-sd, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-sd ) ) var( --_sf-sd-sw-cr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-cr ) ); &[data-background-shape-selected="circle"] { border-radius: 50%; } &[data-background-shape-selected="square"] { border-radius: prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-rs ); } &[data-background-shape-selected="capsule"] { border-radius: 80%; // width: calc( // var(--_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se, var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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: prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-rs ); } } } &:hover { --_sf-hr-bd-cr: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-bd-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-bd-cr) ) ); --_sf-hr-br-rs: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-rs )}; --_sf-hr-br-cr: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-cr) ) ); --_sf-hr-br-se: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-se) ) ); --_sf-hr-br-wh: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-wh, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-wh, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-wh) ) ); --_sf-hr-br-bs: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-rs, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-rs, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-sw-ae, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-sw-br, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-sw-hr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-sw-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se, // var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-bd-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-bd-cr) ) ); --_sf-sd-br-cr: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-cr) ) ); --_sf-sd-br-se: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-se) ) ); --_sf-sd-br-wh: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-wh, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-wh, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-wh) ) ); --_sf-sd-br-bs: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-rs, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-rs, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-ae, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-br, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-sd, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-cr) ) ); border-color: var( --_sf-sd-br-cr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-cr ) ); background-color: var( --_sf-sd-bd-cr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-bd-cr ) ); border-style: var( --_sf-sd-br-se, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-se ) ); border-width: var( --_sf-sd-br-wh, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-wh ) ); border-radius: var( --_sf-sd-br-rs, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-rs ) ); box-shadow: var( --_sf-sd-sw-ae, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-sw-ae ) ) var( --_sf-sd-sw-br, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-sw-br ) ) var( --_sf-sd-sw-sd, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-sw-sd ) ) var( --_sf-sd-sw-cr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se); --toggle-width: calc( var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se) * 1.5 ); width: var(--toggle-width); height: var(--toggle-height); border-radius: var(--toggle-height); /* Full pill shape */ box-sizing: border-box; } &[data-swatch-shape-selected="circle"] { & div, .product-select-image { border-radius: 50%; } } &[data-swatch-shape-selected="capsule"] { & div, .product-select-image { // border-radius: 50%; width: 100%; height: 100%; border-radius: inherit; } } &[data-swatch-shape-selected="square"] { & div, .product-select-image { border-radius: 5px; } } } // &.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%; } } } } // Select Fit and Size .select__fit { font-size: 16px; color: var(--_gray-500); display: flex; flex-direction: column; gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg) ) ); // padding: var( // --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-pg, // var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-pg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-is-pr-rw, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-is-pr-rw, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-se); // width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-se); padding: prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-pg ); min-width: 20px; min-height: 20px; box-sizing: content-box; border-radius: var( --_sf-hr-br-crrr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-rs ) ); // border-radius: var( // --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-rs, // var( // --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-rs, // var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-rs) // ) // ); border-color: var( --_sf-hr-br-cr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-cr ) ); background-color: var( --_sf-hr-bd-cr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-bd-cr ) ); border-style: var( --_sf-hr-br-se, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-se ) ); border-width: var( --_sf-hr-br-wh, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-wh ) ); box-shadow: var( --_sf-hr-sw-ae, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-sw-ae ) ) var( --_sf-hr-sw-br, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-sw-br ) ) var( --_sf-hr-sw-sd, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-sw-sd ) ) var( --_sf-hr-sw-cr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-sw-cr ) ); // font is pending color: var( --_sf-hr-cr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-cr ) ); font-family: var( --_sf-hr-ft-fy, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ft-fy ) ); text-transform: var( --_sf-hr-tt-tm, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-tt-tm ) ); word-wrap: var( --_sf-hr-wd-wp, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-wd-wp ) ); word-break: var( --_sf-hr-wd-bk, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ft-se ) ); font-weight: var( --_sf-hr-ft-wt, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ft-wt ) ); font-style: var( --_sf-hr-ft-se-ic, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ft-se-ic ) ); text-align: var( --_sf-hr-tt-an, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-tt-an ) ); letter-spacing: var( --_sf-hr-lr-sg, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-lr-sg ) ); line-height: var( --_sf-hr-le-ht, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-le-ht-dc ) ); text-decoration: var( --_sf-hr-ue, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-bd-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-bd-cr) ) ); --_sf-hr-br-crrr: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-rs )}; --_sf-hr-br-cr: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-cr) ) ); --_sf-hr-br-se: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-se) ) ); --_sf-hr-br-wh: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-wh, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-wh, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-wh) ) ); --_sf-hr-br-bs: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-rs, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-rs, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-rs) ) ); // new --_sf-hr-sw-ae: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-ae, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-ae, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-ae) ) ); --_sf-hr-sw-br: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-br, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-br, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-br) ) ); --_sf-hr-sw-hr: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-hr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-hr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-hr) ) ); --_sf-hr-sw-cr: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-cr) ) ); // for font --_sf-hr-cr: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-cr) ) ); --_sf-hr-ft-fy: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-fy, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-fy, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-fy) ) ); --_sf-hr-tt-tm: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-tt-tm, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-tt-tm, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-tt-tm) ) ); --_sf-hr-wd-wp: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-wd-wp, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-wd-wp, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-wd-wp) ) ); --_sf-hr-wd-bk: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-wd-bk, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-wd-bk, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-wd-bk) ) ); --_sf-hr-ft-se: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-se) ) ); --_sf-hr-ft-wt: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-wt, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-wt, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-wt) ) ); --_sf-hr-ft-se-ic: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-se-ic, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-se-ic, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-se-ic) ) ); --_sf-hr-tt-an: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-tt-an, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-tt-an, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-tt-an) ) ); --_sf-hr-lr-sg: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-lr-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-lr-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-lr-sg) ) ); --_sf-hr-le-ht: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-le-ht, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-le-ht, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-bd-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-bd-cr) ) ); --_sf-hr-br-crrr: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-rs )}; --_sf-sd-br-cr: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-cr) ) ); --_sf-sd-br-se: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-se) ) ); --_sf-sd-br-wh: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-wh, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-wh, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-wh) ) ); --_sf-sd-br-bs: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-rs, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-rs, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-sw-ae, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-sw-br, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-sw-hr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-sw-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-sw-cr) ) ); // for font --_sf-sd-cr: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-cr) ) ); --_sf-sd-ft-fy: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-fy, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-fy, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-fy) ) ); --_sf-sd-tt-tm: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-tt-tm, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-tt-tm, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-tt-tm) ) ); --_sf-sd-wd-wp: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-wd-wp, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-wd-wp, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-wd-wp) ) ); --_sf-sd-wd-bk: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-wd-bk, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-wd-bk, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-wd-bk) ) ); --_sf-sd-ft-se: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-se) ) ); --_sf-sd-ft-wt: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-wt, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-wt, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-wt) ) ); --_sf-sd-ft-se-ic: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-se-ic, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-se-ic, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-se-ic) ) ); --_sf-sd-tt-an: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-tt-an, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-tt-an, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-tt-an) ) ); --_sf-sd-lr-sg: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-lr-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-lr-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-lr-sg) ) ); --_sf-sd-le-ht: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-le-ht, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-le-ht, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-cr ) ); background-color: var( --_sf-sd-bd-cr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-bd-cr ) ); border-style: var( --_sf-sd-br-se, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-se ) ); border-width: var( --_sf-sd-br-wh, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-wh ) ); box-shadow: var( --_sf-sd-sw-ae, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-sw-ae ) ) var( --_sf-sd-sw-br, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-sw-br ) ) var( --_sf-sd-sw-sd, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-sw-sd ) ) var( --_sf-sd-sw-cr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-sw-cr ) ); // font is pending color: var( --_sf-sd-cr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-cr ) ); font-family: var( --_sf-sd-ft-fy, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ft-fy ) ); text-transform: var( --_sf-sd-tt-tm, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-tt-tm ) ); word-wrap: var( --_sf-sd-wd-wp, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-wd-wp ) ); word-break: var( --_sf-sd-wd-bk, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-wd-bk ) ); font-size: var( --_sf-sd-ft-se, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ft-se ) ); font-weight: var( --_sf-sd-ft-wt, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ft-wt ) ); font-style: var( --_sf-sd-ft-se-ic, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ft-se-ic ) ); text-align: var( --_sf-sd-tt-an, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-tt-an ) ); letter-spacing: var( --_sf-sd-lr-sg, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-lr-sg ) ); line-height: var( --_sf-sd-le-ht, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-le-ht-dc ) ); text-decoration: var( --_sf-sd-ue, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg) ) ) + 10px ) / 2 ); } } .title { margin-bottom: 4px; color: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr) ) ); font-family: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy) ) ); text-transform: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-tm, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-tm, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-tm) ) ); word-wrap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-wp, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-wp, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-wp) ) ); word-break: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-bk, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-bk, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-bk) ) ); font-size: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se) ) ); font-weight: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt) ) ); font-style: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se-ic, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se-ic, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se-ic) ) ); text-align: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an) ) ); letter-spacing: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg) ) ); line-height: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht) ) ); text-decoration: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue) ) ); } } //Dropdown .est__dropdown__main { position: relative; width: 100%; display: flex; flex-direction: column; gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg, var(--_ctm-dn-lt-on-te-ve-sg) ) ); padding: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-os-pg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-os-pg, var(--_ctm-dn-lt-dn-dy-se-dn-os-pg) ) ); margin-top: 10px; label { font-size: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se) ) ); font-family: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy) ) ); text-transform: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-tm, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-tm, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-tm) ) ); word-wrap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-wp, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-wp, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-wp) ) ); word-break: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-bk, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-bk, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-bk) ) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } color: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr, var(--_gray-700, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr)) ) ); font-weight: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt) ) ); text-decoration: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue) ) ); letter-spacing: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg) ) ); text-align: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an) ) ); line-height: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht) ) ); display: block; } .est__dropdown { cursor: pointer; position: relative; color: var(--_gray-700); border-radius: 6px; background-color: #fff; display: flex; justify-content: space-between; align-items: center; width: 100%; .value__selected { width: 100%; } &.open .list { // display: none; margin-top: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-on-ad-lt-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-on-ad-lt-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-on-ad-lt-sg) ) ); gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg) ) ); background-color: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-bd-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-bd-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-bd-cr) ) ); } .list { // display: flex !important; // flex-direction: column; gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg) ) ); border: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-wh, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-wh, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-wh) ) ) var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-se) ) ) var( --_gray-200, var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-cr) ) ) ); border-radius: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-rs, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-rs, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-rs) ) ); box-shadow: var( --_show-shadow-dn-se, var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-ae, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-ae, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-ae) ) ) var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-br, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-br, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-br) ) ) var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-sd, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-sd, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-sd) ) ) var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-cr) ) ) ); position: absolute; top: 100%; left: 0; width: 100%; background-color: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-bd-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-bd-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-bd-cr) ) ); border-radius: 4px; z-index: var(--_higher-zIndex); max-height: 200px; overflow-y: auto; &.top { bottom: 100%; top: auto; } .list__option { padding: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-pg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-pg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-pg) ) ); cursor: pointer; &:hover { background-color: var(--_primary-25); color: var(--_primary-400); } &.disabled { cursor: not-allowed; opacity: 0.4; } } } } } // variant dropdown selection .var__drop__selection { display: flex; width: 100%; gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg, var( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg) ) ) ); flex-direction: row; &[data-dropdown-style="Vertical List"] { flex-direction: column; gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg) ) ); } .dropdown_wrapper { position: relative; .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); } } &[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-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg) ) ) / 2 ); } } } } } } } & > div { width: 100%; } } // 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-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-rw-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-rw-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-sg) ) ); padding: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-pg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-pg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-hr-ad-on-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-hr-ad-on-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg) ) ); .tab__accordion { display: flex; flex-direction: column; gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg) ) ); .tab__container { display: flex; flex-direction: column; .tab { &:first-child { margin-bottom: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg) ) ); } } .tab__content { display: flex; flex-direction: column; padding: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-pg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-pg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-pg) ) ); .field__group { gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-sg) ) ); .field__group__item { gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-hr-ad-on-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-hr-ad-on-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-cr-pg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-cr-pg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-cr-pg) ) ); .tab__container { display: flex; flex-direction: column; gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-sg) ) ); .tab_acc_wrapper { display: flex; flex-direction: column; gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-ad-cr-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-ad-cr-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-ad-cr-sg) ) ); padding: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-vl-pg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-vl-pg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-vl-pg) ) ) var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-hl-pg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-hl-pg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-ht, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-ht, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-ht) ) ); th { height: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-ht, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-ht, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-ht) ) ); text-align: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-ct-at, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-ct-at, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-ct-at) ) ); padding: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-cl-pg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-cl-pg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-rw-ht, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-rw-ht, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-rw-ht) ) ); td { text-align: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-ct-at, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-ct-at, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-ct-at) ) ); padding: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-rw-cl-pg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-rw-cl-pg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-ad-cr-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-ad-cr-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-ad-cr-sg) ) ); .tabs__container { width: 100%; } } } .tabs { display: flex; gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-tb-im-se-dt-se-tb-ad-cr-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-sg) ) ); .tab { display: flex; justify-content: var(--_tab-aliginment); padding: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-vl-pg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-vl-pg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-vl-pg) ) ) var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-hl-pg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-hl-pg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-hl-pg) ) ); background-color: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-bd-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-wh, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-wh, var(--_ctm-dn-tb-im-se-dt-se-br-wh) ) ) ); border-radius: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-rs, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-sw-ae, var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-sw-ae) ), var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-sw-br, var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-sw-br) ), var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-sw-sd, var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-sw-sd) ), var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-sw-cr, var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-sw-cr) ) ); border-radius: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-rs, var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-rs) ); &:hover { background-color: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-bd-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-br-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-br-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-br-wh, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-br-wh, var(--_ctm-dn-tb-im-se-hr-se-br-wh) ) ) ); border-radius: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-br-rs, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-sw-ae, var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-sw-ae) ), var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-sw-br, var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-sw-br) ), var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-sw-sd, var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-sw-sd) ), var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-sw-cr, var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-sw-cr) ) ); } &.active { background-color: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-bd-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-br-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-br-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-br-wh, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-br-wh, var(--_ctm-dn-tb-im-se-sd-se-br-wh) ) ) ); border-radius: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-br-rs, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-sw-ae, var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-sw-ae) ), var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-sw-br, var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-sw-br) ), var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-sw-sd, var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-sw-sd) ), var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-sw-cr, var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-sw-cr) ) ); } } } .tab__content { padding: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-cr-pg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-cr-pg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-is-pr-se), // calc(100% / var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-is-pr-se)) // ); // grid-auto-flow: column; gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-sg); width: 100%; // justify-content: center; // height: 200px; .embla__thumbs__slide { min-width: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se) ) ); max-width: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se) ) ); height: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se) ) ); & img { width: 100%; height: 100%; } } } } } } } .kit_detail_product_qty_select { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; flex-direction: var(--_sf-flex-direckdaka-mobile, row); row-gap: prepareMediaVariable(--_ctm-dn-kt-ds-lt-dn-by-im-gp, 12px); & > span { font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-ll-ft-se); font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-ll-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-ll-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-ll-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-ll-wd-bk); color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-ll-te-cr); font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-ll-ft-wt); text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-ll-te-ue); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-ll-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-ll-tt-an); line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-ll-le-ht); } .add_to_cart_qty_wrapper { display: flex; flex-direction: column; gap: 6px; .add_to_cart_qty { width: 205px; // border: 1px solid #d0d5dd !important; // border-radius: 2px !important; outline: none; // padding: 8px 12px !important; &:disabled { // background-color: #f9fafb; cursor: no-drop; } font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-ft-se); font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-wd-bk); color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-te-cr); font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-ft-wt); text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-te-ue); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-tt-an); line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-le-ht); padding: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-pg); border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-br-cr); border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-br-wh); border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-br-se); border-radius: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-br-rs); background: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-bd-cr); box-shadow: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-sw-ae) prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-sw-br) prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-sw-sd) prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-sw-cr); } small { color: red; } } .select-button { display: flex; align-items: center; padding: 10px 16px; transition: all 0.3s ease; background-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-bd-cr); border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-cr); border-radius: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-rs); border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-se); border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-wh); color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-cr); font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-wd-bk); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-se); font-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-lr-sg); box-shadow: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-ae) prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-br) prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-sd) prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-cr); text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ue); &:hover { background-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-bd-cr); border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-cr); border-radius: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-rs); border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-se); border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-wh); color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-cr); font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-se); font-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-lr-sg); box-shadow: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-ae) prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-br) prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-sd) prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-cr); text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ue); } .icon { margin-right: 8px; color: #003366; } &.selected { background-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-bd-cr); border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-cr); border-radius: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-rs); border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-se); border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-wh); color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-cr); font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-se); font-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-lr-sg); box-shadow: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-ae) prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-br) prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-sd) prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-cr); text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ue); .icon { color: white; } } } } } } hr { &:last-child { display: none; } } } .popover-container { position: relative; display: inline-block; .popover-trigger { cursor: pointer; font-weight: 500; color: #2b6cb0; } .popover-box { // position: absolute; // top: calc(100% + 10px); // right: 0; // background: white; // padding: 12px 16px; // box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1); // border-radius: 8px; // min-width: 150px; // z-index: 10; position: absolute; // border: 1px solid #ccc; min-width: 150px; max-width: 300px; z-index: 1000; left: 30px; top: 0; padding: 8px; border-radius: 4px; max-height: 150px; overflow-y: auto; } .popover-box { display: flex; flex-direction: column; // width: 100%; gap: prepareMediaVariable(--_ctm-dn-pr-se-im-gp); background-color: var( --_ctm-mob-dn-pr-se-bd-cr, var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr)) ); border-color: var( --_ctm-mob-dn-pr-se-br-cr, var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr)) ); border-style: var( --_ctm-mob-dn-pr-se-br-se, var(--_ctm-tab-dn-pr-se-br-se, var(--_ctm-dn-pr-se-br-se)) ); border-width: var( --_ctm-mob-dn-pr-se-br-wh, var(--_ctm-tab-dn-pr-se-br-wh, var(--_ctm-dn-pr-se-br-wh)) ); border-radius: var( --_ctm-mob-dn-pr-se-br-rs, var(--_ctm-tab-dn-pr-se-br-rs, var(--_ctm-dn-pr-se-br-rs)) ); box-shadow: var( --_show-shadow, var( --_ctm-mob-dn-pr-se-sw-ae, var(--_ctm-tab-dn-pr-se-sw-ae, var(--_ctm-dn-pr-se-sw-ae)) ) var( --_ctm-mob-dn-pr-se-sw-br, var(--_ctm-tab-dn-pr-se-sw-br, var(--_ctm-dn-pr-se-sw-br)) ) var( --_ctm-mob-dn-pr-se-sw-sd, var(--_ctm-tab-dn-pr-se-sw-sd, var(--_ctm-dn-pr-se-sw-sd)) ) var( --_ctm-mob-dn-pr-se-sw-cr, var(--_ctm-tab-dn-pr-se-sw-cr, var(--_ctm-dn-pr-se-sw-cr)) ) ); padding: var( --_ctm-mob-dn-pr-se-pg, var(--_ctm-tab-dn-pr-se-pg, var(--_ctm-dn-pr-se-pg)) ); } .popover-box strong { display: block; margin-bottom: 6px; font-weight: bold; } .popover-arrow { position: absolute; top: 8px; left: -5px; width: 12px; height: 12px; // background-color: var( // --_ctm-mob-dn-pr-se-bd-cr, // var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr)) // ); transform: rotate(-45deg); box-shadow: -1px -1px 0px var( --_ctm-mob-dn-pr-se-br-cr, var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr)) ); } .popover_item { // padding-inline: var(--_sf-cd-gp); color: var(--_ctm-mob-dn-pr-se-cr, var(--_ctm-tab-dn-pr-se-cr, var(--_ctm-dn-pr-se-cr))); font-family: var( --_ctm-mob-dn-pr-se-ft-fy, var(--_ctm-tab-dn-pr-se-ft-fy, var(--_ctm-dn-pr-se-ft-fy)) ); text-transform: var( --_ctm-mob-dn-pr-se-tt-tm, var(--_ctm-tab-dn-pr-se-tt-tm, var(--_ctm-dn-pr-se-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-pr-se-wd-wp, var(--_ctm-tab-dn-pr-se-wd-wp, var(--_ctm-dn-pr-se-wd-wp)) ); word-break: var( --_ctm-mob-dn-pr-se-wd-bk, var(--_ctm-tab-dn-pr-se-wd-bk, var(--_ctm-dn-pr-se-wd-bk)) ); font-size: var( --_ctm-mob-dn-pr-se-ft-se, var(--_ctm-tab-dn-pr-se-ft-se, var(--_ctm-dn-pr-se-ft-se)) ); font-weight: var( --_ctm-mob-dn-pr-se-ft-wt, var(--_ctm-tab-dn-pr-se-ft-wt, var(--_ctm-dn-pr-se-ft-wt)) ); font-style: var( --_ctm-mob-dn-pr-se-ft-se-ic, var(--_ctm-tab-dn-pr-se-ft-se-ic, var(--_ctm-dn-pr-se-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-pr-se-tt-an, var(--_ctm-tab-dn-pr-se-tt-an, var(--_ctm-dn-pr-se-tt-an)) ); letter-spacing: var( --_ctm-mob-dn-pr-se-lr-sg, var(--_ctm-tab-dn-pr-se-lr-sg, var(--_ctm-dn-pr-se-lr-sg)) ); line-height: var( --_ctm-mob-dn-pr-se-le-ht, var(--_ctm-tab-dn-pr-se-le-ht, var(--_ctm-dn-pr-se-le-ht-dc)) ); text-decoration: var( --_ctm-mob-dn-pr-se-ue, var(--_ctm-tab-dn-pr-se-ue, var(--_ctm-dn-pr-se-ue)) ); // margin-left: 10px; } } .error__message__wraper { background-color: var( --_ctm-mob-dn-er-me-bd-cr, var(--_ctm-tab-dn-er-me-bd-cr, var(--_ctm-dn-er-me-bd-cr)) ); border-color: var( --_ctm-mob-dn-er-me-br-cr, var(--_ctm-tab-dn-er-me-br-cr, var(--_ctm-dn-er-me-br-cr)) ); border-style: var( --_ctm-mob-dn-er-me-br-se, var(--_ctm-tab-dn-er-me-br-se, var(--_ctm-dn-er-me-br-se)) ); border-width: var( --_ctm-mob-dn-er-me-br-wh, var(--_ctm-tab-dn-er-me-br-wh, var(--_ctm-dn-er-me-br-wh)) ); border-radius: var( --_ctm-mob-dn-er-me-br-rs, var(--_ctm-tab-dn-er-me-br-rs, var(--_ctm-dn-er-me-br-rs)) ); box-shadow: var( --_show-shadow, var(--_ctm-mob-dn-er-me-sw-ae, var(--_ctm-tab-dn-er-me-sw-ae, var(--_ctm-dn-er-me-sw-ae))) var( --_ctm-mob-dn-er-me-sw-br, var(--_ctm-tab-dn-er-me-sw-br, var(--_ctm-dn-er-me-sw-br)) ) var( --_ctm-mob-dn-er-me-sw-sd, var(--_ctm-tab-dn-er-me-sw-sd, var(--_ctm-dn-er-me-sw-sd)) ) var( --_ctm-mob-dn-er-me-sw-cr, var(--_ctm-tab-dn-er-me-sw-cr, var(--_ctm-dn-er-me-sw-cr)) ) ); white-space: nowrap; .error__message { color: var(--_ctm-mob-dn-er-me-cr, var(--_ctm-tab-dn-er-me-cr, var(--_ctm-dn-er-me-cr))); font-family: var( --_ctm-mob-dn-er-me-ft-fy, var(--_ctm-tab-dn-er-me-ft-fy, var(--_ctm-dn-er-me-ft-fy)) ); text-transform: var( --_ctm-mob-dn-er-me-tt-tm, var(--_ctm-tab-dn-er-me-tt-tm, var(--_ctm-dn-er-me-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-er-me-wd-wp, var(--_ctm-tab-dn-er-me-wd-wp, var(--_ctm-dn-er-me-wd-wp)) ); word-break: var( --_ctm-mob-dn-er-me-wd-bk, var(--_ctm-tab-dn-er-me-wd-bk, var(--_ctm-dn-er-me-wd-bk)) ); font-size: var( --_ctm-mob-dn-er-me-ft-se, var(--_ctm-tab-dn-er-me-ft-se, var(--_ctm-dn-er-me-ft-se)) ); font-weight: var( --_ctm-mob-dn-er-me-ft-wt, var(--_ctm-tab-dn-er-me-ft-wt, var(--_ctm-dn-er-me-ft-wt)) ); font-style: var( --_ctm-mob-dn-er-me-ft-se-ic, var(--_ctm-tab-dn-er-me-ft-se-ic, var(--_ctm-dn-er-me-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-er-me-tt-an, var(--_ctm-tab-dn-er-me-tt-an, var(--_ctm-dn-er-me-tt-an)) ); letter-spacing: var( --_ctm-mob-dn-er-me-lr-sg, var(--_ctm-tab-dn-er-me-lr-sg, var(--_ctm-dn-er-me-lr-sg)) ); line-height: var( --_ctm-mob-dn-er-me-le-ht, var(--_ctm-tab-dn-er-me-le-ht, var(--_ctm-dn-er-me-le-ht)) ); text-decoration: var( --_ctm-mob-dn-er-me-ue, var(--_ctm-tab-dn-er-me-ue, var(--_ctm-dn-er-me-ue)) ); padding: prepareMediaVariable(--_ctm-dn-er-me-pg); } } .icon { cursor: pointer; svg { width: prepareMediaVariable(--_ctm-dn-er-me-in-se); height: prepareMediaVariable(--_ctm-dn-er-me-in-se); path { stroke: prepareMediaVariable(--_ctm-dn-er-me-in-c1); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-er-me-se-wh, 1.25); } } } .add_to_cart_wrapper { .error__message { text-align: center; } } } } }