@use "sass:map"; @use "sass:list"; @use "./functions.scss" as *; $resizerId: "[data-cms-tool='cms-element-resizer']"; $resizeActive: '[data-cms-element-resizer="true"]'; [data-div-type="element"] { &[data-element-type="filters"] { width: var( --_sf-el-wh-st-mx, calc( 1% * var( --_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))) ) ) ); margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn))); & > div { &.wrapper { width: 100%; } } &[data-widget-border="true"] { .filter_container { border-color: var( --_ctm-mob-dn-fs-wt-br-cr, var(--_ctm-tab-dn-fs-wt-br-cr, var(--_ctm-dn-fs-wt-br-cr)) ); border-style: var( --_ctm-mob-dn-fs-wt-br-se, var(--_ctm-tab-dn-fs-wt-br-se, var(--_ctm-dn-fs-wt-br-se)) ); border-width: var( --_ctm-mob-dn-fs-wt-br-wh, var(--_ctm-tab-dn-fs-wt-br-wh, var(--_ctm-dn-fs-wt-br-wh)) ); } } &[data-widget-shadow="false"] { --_show-shadow: none; } &[data-clear-all-text-shadow="false"] { --_show-shadow-clear-all: none; } &[data-clear-all-text-border="true"] { .filter_container .filter__inline .filter__Header { border-color: var( --_ctm-mob-dn-cr-al-tt-dt-se-br-cr, var(--_ctm-tab-dn-cr-al-tt-dt-se-br-cr, var(--_ctm-dn-cr-al-tt-dt-se-br-cr)) ); border-style: var( --_ctm-mob-dn-cr-al-tt-dt-se-br-se, var(--_ctm-tab-dn-cr-al-tt-dt-se-br-se, var(--_ctm-dn-cr-al-tt-dt-se-br-se)) ); border-width: var( --_ctm-mob-dn-cr-al-tt-dt-se-br-wh, var(--_ctm-tab-dn-cr-al-tt-dt-se-br-wh, var(--_ctm-dn-cr-al-tt-dt-se-br-wh)) ); } } .filter_container { width: 100%; //Filter Features Starts // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg))); background-color: var( --_ctm-mob-dn-fs-wt-bd-cr, var(--_ctm-tab-dn-fs-wt-bd-cr, var(--_ctm-dn-fs-wt-bd-cr)) ); box-shadow: var( --_show-shadow, var(--_ctm-mob-dn-fs-wt-sw-ae, var(--_ctm-tab-dn-fs-wt-sw-ae, var(--_ctm-dn-fs-wt-sw-ae))) var(--_ctm-mob-dn-fs-wt-sw-br, var(--_ctm-tab-dn-fs-wt-sw-br, var(--_ctm-dn-fs-wt-sw-br))) var(--_ctm-mob-dn-fs-wt-sw-sd, var(--_ctm-tab-dn-fs-wt-sw-sd, var(--_ctm-dn-fs-wt-sw-sd))) var(--_ctm-mob-dn-fs-wt-sw-cr, var(--_ctm-tab-dn-fs-wt-sw-cr, var(--_ctm-dn-fs-wt-sw-cr))) ); border-radius: var( --_ctm-mob-dn-fs-wt-br-rs, var(--_ctm-tab-dn-fs-wt-br-rs, var(--_ctm-dn-fs-wt-br-rs)) ); overflow: clip; // max-height: prepareMediaVariable(--_ctm-lt-ht, auto); // overflow-y: auto; @mixin flex($justifyItems: flex-start, $alignItems: center) { display: var(--_d-flex); justify-content: $justifyItems; align-items: $alignItems; } .product__filter { // width: 250px; width: 100%; // height: calc(100vh - 20px); // padding: 10px; padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg))); max-height: prepareMediaVariable(--_ctm-lt-ht, auto); overflow-y: auto; .option__group { display: flex; flex-direction: column; padding-block: 12px; // padding-right: 10px; &.divider_filter { border-bottom: 1px solid var(--_thm-cs-be-se-3); } &:last-child { border-bottom: none !important; } .filter__Header { display: flex; justify-content: space-between; align-items: center; gap: 12px; h2 { font-size: var(--_fs-14); font-weight: var(--_fw-600); text-transform: uppercase; } h3 { // font-size: 14px; // text-transform: uppercase; color: var( --_ctm-mob-dn-fs-wt-cr, var(--_ctm-tab-dn-fs-wt-cr, var(--_ctm-dn-fs-wt-cr)) ); font-family: var( --_sf-hr-ff, var( --_ctm-mob-dn-fs-wt-ft-fy, var(--_ctm-tab-dn-fs-wt-ft-fy, var(--_ctm-dn-fs-wt-ft-fy)) ) ); text-transform: var( --_sf-hr-tt-tm, var( --_ctm-mob-dn-fs-wt-tt-tm, var(--_ctm-tab-dn-fs-wt-tt-tm, var(--_ctm-dn-fs-wt-tt-tm)) ) ); word-wrap: var( --_sf-hr-wd-wp, var( --_ctm-mob-dn-fs-wt-wd-wp, var(--_ctm-tab-dn-fs-wt-wd-wp, var(--_ctm-dn-fs-wt-wd-wp)) ) ); word-break: var( --_sf-hr-wd-bk, var( --_ctm-mob-dn-fs-wt-wd-bk, var(--_ctm-tab-dn-fs-wt-wd-bk, var(--_ctm-dn-fs-wt-wd-bk)) ) ); font-size: var( --_ctm-mob-dn-fs-wt-ft-se, var(--_ctm-tab-dn-fs-wt-ft-se, var(--_ctm-dn-fs-wt-ft-se)) ); font-weight: var( --_ctm-mob-dn-fs-wt-ft-wt, var(--_ctm-tab-dn-fs-wt-ft-wt, var(--_ctm-dn-fs-wt-ft-wt)) ); font-style: var( --_ctm-mob-dn-fs-wt-ft-se-ic, var(--_ctm-tab-dn-fs-wt-ft-se-ic, var(--_ctm-dn-fs-wt-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-fs-wt-tt-an, var(--_ctm-tab-dn-fs-wt-tt-an, var(--_ctm-dn-fs-wt-tt-an)) ); letter-spacing: var( --_ctm-mob-dn-fs-wt-lr-sg, var(--_ctm-tab-dn-fs-wt-lr-sg, var(--_ctm-dn-fs-wt-lr-sg)) ); line-height: var( --_ctm-mob-dn-fs-wt-le-ht, var(--_ctm-tab-dn-fs-wt-le-ht, var(--_ctm-dn-fs-wt-le-ht)) ); text-decoration: var( --_ctm-mob-dn-fs-wt-ue, var(--_ctm-tab-dn-fs-wt-ue, var(--_ctm-dn-fs-wt-ue)) ); } .reset__btn { // font-size: 12px; // text-transform: uppercase; // font-weight: var(--_fw-500); // color: var(--_primary-400); // &:hover { // color: var(--_primary-700); // } background-color: var( --_ctm-mob-dn-cr-al-tt-dt-se-bd-cr, var(--_ctm-tab-dn-cr-al-tt-dt-se-bd-cr, var(--_ctm-dn-cr-al-tt-dt-se-bd-cr)) ); // Border of the Clear All button. The section has carried border colour, // style, width and the Show Border toggle all along, but this rule read // none of them, so the whole Border tab did nothing. border-color: prepareMediaVariable(--_ctm-dn-cr-al-tt-dt-se-br-cr, transparent); border-style: prepareMediaVariable(--_ctm-dn-cr-al-tt-dt-se-br-se, solid); border-width: prepareMediaVariable(--_ctm-dn-cr-al-tt-dt-se-br-wh, 0); &[data-clear-all-text-border="false"] { border: none; } // Text Overflow clamps to N lines; the renderer adds the class and // publishes the count as --_sf-line-clamp. &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } border-radius: var( --_ctm-mob-dn-cr-al-tt-dt-se-br-rs, var(--_ctm-tab-dn-cr-al-tt-dt-se-br-rs, var(--_ctm-dn-cr-al-tt-dt-se-br-rs)) ); padding: var( --_ctm-mob-dn-cr-al-tt-dt-se-pg, var(--_ctm-tab-dn-cr-al-tt-dt-se-pg, var(--_ctm-dn-cr-al-tt-dt-se-pg)) ); box-shadow: var( --_show-shadow-clear-all, var( --_ctm-mob-dn-cr-al-tt-dt-se-sw-ae, var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-ae, var(--_ctm-dn-cr-al-tt-dt-se-sw-ae)) ) var( --_ctm-mob-dn-cr-al-tt-dt-se-sw-br, var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-br, var(--_ctm-dn-cr-al-tt-dt-se-sw-br)) ) var( --_ctm-mob-dn-cr-al-tt-dt-se-sw-sd, var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-sd, var(--_ctm-dn-cr-al-tt-dt-se-sw-sd)) ) var( --_ctm-mob-dn-cr-al-tt-dt-se-sw-cr, var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-cr, var(--_ctm-dn-cr-al-tt-dt-se-sw-cr)) ) ); color: var( --_ctm-mob-dn-cr-al-tt-dt-se-cr, var(--_ctm-tab-dn-cr-al-tt-dt-se-cr, var(--_ctm-dn-cr-al-tt-dt-se-cr)) ); font-family: var( --_sf-hr-ff, var( --_ctm-mob-dn-cr-al-tt-dt-se-ft-fy, var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-fy, var(--_ctm-dn-cr-al-tt-dt-se-ft-fy)) ) ); text-transform: var( --_sf-hr-tt-tm, var( --_ctm-mob-dn-cr-al-tt-dt-se-tt-tm, var(--_ctm-tab-dn-cr-al-tt-dt-se-tt-tm, var(--_ctm-dn-cr-al-tt-dt-se-tt-tm)) ) ); word-wrap: var( --_sf-hr-wd-wp, var( --_ctm-mob-dn-cr-al-tt-dt-se-wd-wp, var(--_ctm-tab-dn-cr-al-tt-dt-se-wd-wp, var(--_ctm-dn-cr-al-tt-dt-se-wd-wp)) ) ); word-break: var( --_sf-hr-wd-bk, var( --_ctm-mob-dn-cr-al-tt-dt-se-wd-bk, var(--_ctm-tab-dn-cr-al-tt-dt-se-wd-bk, var(--_ctm-dn-cr-al-tt-dt-se-wd-bk)) ) ); font-size: var( --_ctm-mob-dn-cr-al-tt-dt-se-ft-se, var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-se, var(--_ctm-dn-cr-al-tt-dt-se-ft-se)) ); font-weight: var( --_ctm-mob-dn-cr-al-tt-dt-se-ft-wt, var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-wt, var(--_ctm-dn-cr-al-tt-dt-se-ft-wt)) ); font-style: var( --_ctm-mob-dn-cr-al-tt-dt-se-ft-se-ic, var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-se-ic, var(--_ctm-dn-cr-al-tt-dt-se-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-cr-al-tt-dt-se-tt-an, var(--_ctm-tab-dn-cr-al-tt-dt-se-tt-an, var(--_ctm-dn-cr-al-tt-dt-se-tt-an)) ); letter-spacing: var( --_ctm-mob-dn-cr-al-tt-dt-se-lr-sg, var(--_ctm-tab-dn-cr-al-tt-dt-se-lr-sg, var(--_ctm-dn-cr-al-tt-dt-se-lr-sg)) ); line-height: var( --_ctm-mob-dn-cr-al-tt-dt-se-le-ht, var(--_ctm-tab-dn-cr-al-tt-dt-se-le-ht, var(--_ctm-dn-cr-al-tt-dt-se-le-ht)) ); text-decoration: var( --_ctm-mob-dn-cr-al-tt-dt-se-ue, var(--_ctm-tab-dn-cr-al-tt-dt-se-ue, var(--_ctm-dn-cr-al-tt-dt-se-ue)) ); } } p { color: var( --_ctm-mob-dn-fs-wt-cr-dc, var(--_ctm-tab-dn-fs-wt-cr-dc, var(--_ctm-dn-fs-wt-cr-dc)) ); font-family: var( --_sf-hr-ff, var( --_ctm-mob-dn-fs-wt-ft-fy-dc, var(--_ctm-tab-dn-fs-wt-ft-fy-dc, var(--_ctm-dn-fs-wt-ft-fy-dc)) ) ); text-transform: var( --_sf-hr-tt-tm, var( --_ctm-mob-dn-fs-wt-tt-tm-dc, var(--_ctm-tab-dn-fs-wt-tt-tm-dc, var(--_ctm-dn-fs-wt-tt-tm-dc)) ) ); word-wrap: var( --_sf-hr-wd-wp, var( --_ctm-mob-dn-fs-wt-wd-wp-dc, var(--_ctm-tab-dn-fs-wt-wd-wp-dc, var(--_ctm-dn-fs-wt-wd-wp-dc)) ) ); word-break: var( --_sf-hr-wd-bk, var( --_ctm-mob-dn-fs-wt-wd-bk-dc, var(--_ctm-tab-dn-fs-wt-wd-bk-dc, var(--_ctm-dn-fs-wt-wd-bk-dc)) ) ); font-size: var( --_ctm-mob-dn-fs-wt-ft-se-dc, var(--_ctm-tab-dn-fs-wt-ft-se-dc, var(--_ctm-dn-fs-wt-ft-se-dc)) ); font-weight: var( --_ctm-mob-dn-fs-wt-ft-wt-dc, var(--_ctm-tab-dn-fs-wt-ft-wt-dc, var(--_ctm-dn-fs-wt-ft-wt-dc)) ); font-style: var( --_ctm-mob-dn-fs-wt-ft-se-ic-dc, var(--_ctm-tab-dn-fs-wt-ft-se-ic-dc, var(--_ctm-dn-fs-wt-ft-se-ic-dc)) ); text-align: var( --_ctm-mob-dn-fs-wt-tt-an-dc, var(--_ctm-tab-dn-fs-wt-tt-an-dc, var(--_ctm-dn-fs-wt-tt-an-dc)) ); letter-spacing: var( --_ctm-mob-dn-fs-wt-lr-sg-dc, var(--_ctm-tab-dn-fs-wt-lr-sg-dc, var(--_ctm-dn-fs-wt-lr-sg-dc)) ); line-height: var( --_ctm-mob-dn-fs-wt-le-ht-dc, var(--_ctm-tab-dn-fs-wt-le-ht-dc, var(--_ctm-dn-fs-wt-le-ht-dc)) ); text-decoration: var( --_ctm-mob-dn-fs-wt-ue-dc, var(--_ctm-tab-dn-fs-wt-ue-dc, var(--_ctm-dn-fs-wt-ue-dc)) ); } .selected__items { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; // margin-top: 10px; .selected__category { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; // Selected Items View. "Wrap" is the flowing row above — the default and // what this has always been. "Vertical" stacks one chip per line, each // sized to its own text rather than stretched across the column. &[data-selected-items-view="Vertical"] { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; } // .selected_item { // display: flex; // gap: 8px; // border: 1px solid var(--_gray-200); // font-size: 14px; // border-radius: 30px; // padding: 5px 10px; // align-items: center; // &:hover { // border: 1px solid var(--_gray-300); // background-color: var(--_gray-50); // cursor: pointer; // } // } .selected_item { display: flex; gap: 6px; border: 1px solid var(--_thm-cs-be-se-3); border-radius: 30px; padding: 6px 12px; align-items: center; transition: background-color 400ms, border-color 400ms ease-in-out; background-color: var( --_sf-hr-bd-cr, var( --_ctm-mob-dn-sd-im-dt-se-bd-cr, var(--_ctm-tab-dn-sd-im-dt-se-bd-cr, var(--_ctm-dn-sd-im-dt-se-bd-cr)) ) ); border-radius: var( --_sf-hr-br-br, var( --_ctm-mob-dn-sd-im-dt-se-br-rs, var(--_ctm-tab-dn-sd-im-dt-se-br-rs, var(--_ctm-dn-sd-im-dt-se-br-rs)) ) ); padding: var( --_sf-hr-sd-im-pg, var( --_ctm-mob-dn-sd-im-dt-se-pg, var(--_ctm-tab-dn-sd-im-dt-se-pg, var(--_ctm-dn-sd-im-dt-se-pg)) ) ); box-shadow: var( --_hover-show-shadow, var( --_sf-hr-bx-sw, var( --_show-shadow, var( --_ctm-mob-dn-sd-im-dt-se-sw-ae, var(--_ctm-tab-dn-sd-im-dt-se-sw-ae, var(--_ctm-dn-sd-im-dt-se-sw-ae)) ) var( --_ctm-mob-dn-sd-im-dt-se-sw-br, var(--_ctm-tab-dn-sd-im-dt-se-sw-br, var(--_ctm-dn-sd-im-dt-se-sw-br)) ) var( --_ctm-mob-dn-sd-im-dt-se-sw-sd, var(--_ctm-tab-dn-sd-im-dt-se-sw-sd, var(--_ctm-dn-sd-im-dt-se-sw-sd)) ) var( --_ctm-mob-dn-sd-im-dt-se-sw-cr, var(--_ctm-tab-dn-sd-im-dt-se-sw-cr, var(--_ctm-dn-sd-im-dt-se-sw-cr)) ) ) ) ); color: var( --_sf-hr-fc, var( --_ctm-mob-dn-sd-im-dt-se-cr, var(--_ctm-tab-dn-sd-im-dt-se-cr, var(--_ctm-dn-sd-im-dt-se-cr)) ) ); font-family: var( --_sf-hr-ff, var( --_ctm-mob-dn-sd-im-dt-se-ft-fy, var(--_ctm-tab-dn-sd-im-dt-se-ft-fy, var(--_ctm-dn-sd-im-dt-se-ft-fy)) ) ); text-transform: var( --_sf-hr-tt-tm, var( --_ctm-mob-dn-sd-im-dt-se-tt-tm, var(--_ctm-tab-dn-sd-im-dt-se-tt-tm, var(--_ctm-dn-sd-im-dt-se-tt-tm)) ) ); word-wrap: var( --_sf-hr-wd-wp, var( --_ctm-mob-dn-sd-im-dt-se-wd-wp, var(--_ctm-tab-dn-sd-im-dt-se-wd-wp, var(--_ctm-dn-sd-im-dt-se-wd-wp)) ) ); word-break: var( --_sf-hr-wd-bk, var( --_ctm-mob-dn-sd-im-dt-se-wd-bk, var(--_ctm-tab-dn-sd-im-dt-se-wd-bk, var(--_ctm-dn-sd-im-dt-se-wd-bk)) ) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var( --_sf-hr-fs, var( --_ctm-mob-dn-sd-im-dt-se-ft-se, var(--_ctm-tab-dn-sd-im-dt-se-ft-se, var(--_ctm-dn-sd-im-dt-se-ft-se)) ) ); font-weight: var( --_sf-hr-fw, var( --_ctm-mob-dn-sd-im-dt-se-ft-wt, var(--_ctm-tab-dn-sd-im-dt-se-ft-wt, var(--_ctm-dn-sd-im-dt-se-ft-wt)) ) ); font-style: var( --_sf-hr-ft, var( --_ctm-mob-dn-sd-im-dt-se-ft-se-ic, var(--_ctm-tab-dn-sd-im-dt-se-ft-se-ic, var(--_ctm-dn-sd-im-dt-se-ft-se-ic)) ) ); text-align: var( --_sf-hr-ta, var( --_ctm-mob-dn-sd-im-dt-se-tt-an, var(--_ctm-tab-dn-sd-im-dt-se-tt-an, var(--_ctm-dn-sd-im-dt-se-tt-an)) ) ); letter-spacing: var( --_sf-hr-ls, var( --_ctm-mob-dn-sd-im-dt-se-lr-sg, var(--_ctm-tab-dn-sd-im-dt-se-lr-sg, var(--_ctm-dn-sd-im-dt-se-lr-sg)) ) ); line-height: var( --_sf-hr-lh, var( --_ctm-mob-dn-sd-im-dt-se-le-ht, var(--_ctm-tab-dn-sd-im-dt-se-le-ht, var(--_ctm-dn-sd-im-dt-se-le-ht)) ) ); text-decoration: var( --_sf-hr-tt-dn, var( --_ctm-mob-dn-sd-im-dt-se-ue, var(--_ctm-tab-dn-sd-im-dt-se-ue, var(--_ctm-dn-sd-im-dt-se-ue)) ) ); &[data-show-selected-item-border="true"] { border-color: var( --_sf-hr-br-cr, var( --_ctm-mob-dn-sd-im-dt-se-br-cr, var(--_ctm-tab-dn-sd-im-dt-se-br-cr, var(--_ctm-dn-sd-im-dt-se-br-cr)) ) ); border-style: var( --_sf-hr-br-st, var( --_ctm-mob-dn-sd-im-dt-se-br-se, var(--_ctm-tab-dn-sd-im-dt-se-br-se, var(--_ctm-dn-sd-im-dt-se-br-se)) ) ); border-width: var( --_sf-hr-br-wh, var( --_ctm-mob-dn-sd-im-dt-se-br-wh, var(--_ctm-tab-dn-sd-im-dt-se-br-wh, var(--_ctm-dn-sd-im-dt-se-br-wh)) ) ); } &:hover { // border: 1px solid var(--_gray-300); // background-color: var(--_gray-50); // cursor: pointer; --_sf-hr-bd-cr: var( --_ctm-mob-dn-sd-im-hr-se-bd-cr, var(--_ctm-tab-dn-sd-im-hr-se-bd-cr, var(--_ctm-dn-sd-im-hr-se-bd-cr)) ); --_sf-hr-br-cr: var( --_ctm-mob-dn-sd-im-hr-se-br-cr, var(--_ctm-tab-dn-sd-im-hr-se-br-cr, var(--_ctm-dn-sd-im-hr-se-br-cr)) ); --_sf-hr-br-st: var( --_ctm-mob-dn-sd-im-hr-se-br-se, var(--_ctm-tab-dn-sd-im-hr-se-br-se, var(--_ctm-dn-sd-im-hr-se-br-se)) ); --_sf-hr-br-wh: var( --_ctm-mob-dn-sd-im-hr-se-br-wh, var(--_ctm-tab-dn-sd-im-hr-se-br-wh, var(--_ctm-dn-sd-im-hr-se-br-wh)) ); --_sf-hr-br-br: var( --_ctm-mob-dn-sd-im-hr-se-br-rs, var(--_ctm-tab-dn-sd-im-hr-se-br-rs, var(--_ctm-dn-sd-im-hr-se-br-rs)) ); --_sf-hr-sd-im-pg: var( --_ctm-mob-dn-sd-im-hr-se-pg, var(--_ctm-tab-dn-sd-im-hr-se-pg, var(--_ctm-dn-sd-im-hr-se-pg)) ); --_sf-hr-bx-sw: var( --_ctm-mob-dn-sd-im-hr-se-sw-ae, var(--_ctm-tab-dn-sd-im-hr-se-sw-ae, var(--_ctm-dn-sd-im-hr-se-sw-ae)) ) var( --_ctm-mob-dn-sd-im-hr-se-sw-br, var(--_ctm-tab-dn-sd-im-hr-se-sw-br, var(--_ctm-dn-sd-im-hr-se-sw-br)) ) var( --_ctm-mob-dn-sd-im-hr-se-sw-sd, var(--_ctm-tab-dn-sd-im-hr-se-sw-sd, var(--_ctm-dn-sd-im-hr-se-sw-sd)) ) var( --_ctm-mob-dn-sd-im-hr-se-sw-cr, var(--_ctm-tab-dn-sd-im-hr-se-sw-cr, var(--_ctm-dn-sd-im-hr-se-sw-cr)) ); --_sf-hr-fc: var( --_ctm-mob-dn-sd-im-hr-se-cr, var(--_ctm-tab-dn-sd-im-hr-se-cr, var(--_ctm-dn-sd-im-hr-se-cr)) ); --_sf-hr-ff: var( --_ctm-mob-dn-sd-im-hr-se-ft-fy, var(--_ctm-tab-dn-sd-im-hr-se-ft-fy, var(--_ctm-dn-sd-im-hr-se-ft-fy)) ); --_sf-hr-tt-tm: var( --_ctm-mob-dn-sd-im-hr-se-tt-tm, var(--_ctm-tab-dn-sd-im-hr-se-tt-tm, var(--_ctm-dn-sd-im-hr-se-tt-tm)) ); --_sf-hr-wd-wp: var( --_ctm-mob-dn-sd-im-hr-se-wd-wp, var(--_ctm-tab-dn-sd-im-hr-se-wd-wp, var(--_ctm-dn-sd-im-hr-se-wd-wp)) ); --_sf-hr-wd-bk: var( --_ctm-mob-dn-sd-im-hr-se-wd-bk, var(--_ctm-tab-dn-sd-im-hr-se-wd-bk, var(--_ctm-dn-sd-im-hr-se-wd-bk)) ); --_sf-hr-fs: var( --_ctm-mob-dn-sd-im-hr-se-ft-se, var(--_ctm-tab-dn-sd-im-hr-se-ft-se, var(--_ctm-dn-sd-im-hr-se-ft-se)) ); --_sf-hr-fw: var( --_ctm-mob-dn-sd-im-hr-se-ft-wt, var(--_ctm-tab-dn-sd-im-hr-se-ft-wt, var(--_ctm-dn-sd-im-hr-se-ft-wt)) ); --_sf-hr-ft: var( --_ctm-mob-dn-sd-im-hr-se-ft-se-ic, var(--_ctm-tab-dn-sd-im-hr-se-ft-se-ic, var(--_ctm-dn-sd-im-hr-se-ft-se-ic)) ); --_sf-hr-ta: var( --_ctm-mob-dn-sd-im-hr-se-tt-an, var(--_ctm-tab-dn-sd-im-hr-se-tt-an, var(--_ctm-dn-sd-im-hr-se-tt-an)) ); --_sf-hr-ls: var( --_ctm-mob-dn-sd-im-hr-se-lr-sg, var(--_ctm-tab-dn-sd-im-hr-se-lr-sg, var(--_ctm-dn-sd-im-hr-se-lr-sg)) ); --_sf-hr-lh: var( --_ctm-mob-dn-sd-im-hr-se-le-ht, var(--_ctm-tab-dn-sd-im-hr-se-le-ht, var(--_ctm-dn-sd-im-hr-se-le-ht)) ); --_sf-hr-ic-wt: var( --_ctm-mob-dn-sd-im-hr-se-in-se, var(--_ctm-tab-dn-sd-im-hr-se-in-se, var(--_ctm-dn-sd-im-hr-se-in-se)) ); --_sf-hr-ic-ht: var( --_ctm-mob-dn-sd-im-hr-se-in-se, var(--_ctm-tab-dn-sd-im-hr-se-in-se, var(--_ctm-dn-sd-im-hr-se-in-se)) ); --_sf-hr-ic-st: var( --_ctm-mob-dn-sd-im-hr-se-in-c1, var(--_ctm-tab-dn-sd-im-hr-se-in-c1, var(--_ctm-dn-sd-im-hr-se-in-c1)) ); --_sf-hr-tt-dn: var( --_ctm-mob-dn-sd-im-hr-se-ue, var(--_ctm-tab-dn-sd-im-hr-se-ue, var(--_ctm-dn-sd-im-hr-se-ue)) ); &[data-hover-show-shadow="false"] { --_hover-show-shadow: none; } &[data-hover-show-icon="false"] { --_hover-show-icon: none; } &[data-show-selected-item-hover-border="true"] { border-color: var( --_sf-hr-br-cr, var( --_ctm-mob-dn-sd-im-dt-se-br-cr, var(--_ctm-tab-dn-sd-im-dt-se-br-cr, var(--_ctm-dn-sd-im-dt-se-br-cr)) ) ); border-style: var( --_sf-hr-br-st, var( --_ctm-mob-dn-sd-im-dt-se-br-se, var(--_ctm-tab-dn-sd-im-dt-se-br-se, var(--_ctm-dn-sd-im-dt-se-br-se)) ) ); border-width: var( --_sf-hr-br-wh, var( --_ctm-mob-dn-sd-im-dt-se-br-wh, var(--_ctm-tab-dn-sd-im-dt-se-br-wh, var(--_ctm-dn-sd-im-dt-se-br-wh)) ) ); } } } } } .option__group__header { @include flex($justifyItems: space-between); gap: 8px; h2 { font-size: var(--_fs-14); font-weight: var(--_fw-600); } h3 { // font-size: 12px; // text-transform: uppercase; // color: #333; color: var( --_ctm-mob-dn-on-ls-cr, var(--_ctm-tab-dn-on-ls-cr, var(--_ctm-dn-on-ls-cr)) ); font-family: var( --_sf-hr-ff, var( --_ctm-mob-dn-on-ls-ft-fy, var(--_ctm-tab-dn-on-ls-ft-fy, var(--_ctm-dn-on-ls-ft-fy)) ) ); text-transform: var( --_sf-hr-tt-tm, var( --_ctm-mob-dn-on-ls-tt-tm, var(--_ctm-tab-dn-on-ls-tt-tm, var(--_ctm-dn-on-ls-tt-tm)) ) ); word-wrap: var( --_sf-hr-wd-wp, var( --_ctm-mob-dn-on-ls-wd-wp, var(--_ctm-tab-dn-on-ls-wd-wp, var(--_ctm-dn-on-ls-wd-wp)) ) ); word-break: var( --_sf-hr-wd-bk, var( --_ctm-mob-dn-on-ls-wd-bk, var(--_ctm-tab-dn-on-ls-wd-bk, var(--_ctm-dn-on-ls-wd-bk)) ) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var( --_ctm-mob-dn-on-ls-ft-se, var(--_ctm-tab-dn-on-ls-ft-se, var(--_ctm-dn-on-ls-ft-se)) ); font-weight: var( --_ctm-mob-dn-on-ls-ft-wt, var(--_ctm-tab-dn-on-ls-ft-wt, var(--_ctm-dn-on-ls-ft-wt)) ); font-style: var( --_ctm-mob-dn-on-ls-ft-se-ic, var(--_ctm-tab-dn-on-ls-ft-se-ic, var(--_ctm-dn-on-ls-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-on-ls-tt-an, var(--_ctm-tab-dn-on-ls-tt-an, var(--_ctm-dn-on-ls-tt-an)) ); letter-spacing: var( --_ctm-mob-dn-on-ls-lr-sg, var(--_ctm-tab-dn-on-ls-lr-sg, var(--_ctm-dn-on-ls-lr-sg)) ); line-height: var( --_ctm-mob-dn-on-ls-le-ht, var(--_ctm-tab-dn-on-ls-le-ht, var(--_ctm-dn-on-ls-le-ht)) ); text-decoration: var( --_ctm-mob-dn-on-ls-ue, var(--_ctm-tab-dn-on-ls-ue, var(--_ctm-dn-on-ls-ue)) ); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .reset__btn { font-size: 12px; text-transform: uppercase; font-weight: var(--_fw-500); color: var(--_primary-400); } .option__btn__group { display: flex; align-items: center; gap: 12px; .search__btn { svg { width: 16px; height: 16px; } } .rotate_0 { display: flex; align-items: center; transform: rotate(0); transition: all 400ms ease-in-out; } .rotate_180 { display: flex; align-items: center; transform: rotate(180deg); transition: all 400ms ease-in-out; } } // Search Bar. Until now only Border, Border Radius and Padding reached // CSS from here, which is why Background Color, the text properties and // Box Shadow all looked dead — nothing read their variables. // // The section carries Default / Focus states now, so everything reads // `sh-br-dt-se-*` (searchBar.defaultState). The old flat `sh-br-*` name is // kept as the fallback on the three that were live before the split, so a // bar styled on an already-published page does not jump. .filter__search { display: flex; align-items: center; width: 100%; padding: prepareMediaVariable( --_ctm-dn-sh-br-dt-se-pg, prepareMediaVariable(--_ctm-dn-sh-br-pg) ); background-color: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-bd-cr); border-color: prepareMediaVariable( --_ctm-dn-sh-br-dt-se-br-cr, prepareMediaVariable(--_ctm-dn-sh-br-br-cr) ); border-style: prepareMediaVariable( --_ctm-dn-sh-br-dt-se-br-se, prepareMediaVariable(--_ctm-dn-sh-br-br-se) ); border-width: prepareMediaVariable( --_ctm-dn-sh-br-dt-se-br-wh, prepareMediaVariable(--_ctm-dn-sh-br-br-wh) ); border-radius: prepareMediaVariable( --_ctm-dn-sh-br-dt-se-br-rs, prepareMediaVariable(--_ctm-dn-sh-br-br-rs) ); // Opt-in, like every other Show Shadow in this element: the bar has // never cast one, so it only appears once the toggle is on. box-shadow: none; &[data-show-shadow="true"] { box-shadow: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-sw-ae, 0 0) prepareMediaVariable(--_ctm-dn-sh-br-dt-se-sw-br, 0) prepareMediaVariable(--_ctm-dn-sh-br-dt-se-sw-sd, 0) prepareMediaVariable(--_ctm-dn-sh-br-dt-se-sw-cr, transparent); } &[data-show-border="false"] { border: none; } // Text properties apply to the input and its placeholder, which is the // only text this section owns. input[type="text"] { padding-left: 6px; background-color: transparent; color: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-cr); font-family: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-ft-fy); font-size: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-ft-se); font-weight: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-ft-wt); font-style: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-ft-se-ic); text-align: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-tt-an); letter-spacing: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-lr-sg); line-height: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-le-ht); text-decoration: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-ue); text-transform: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-wd-bk); &::placeholder { color: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-cr); } } // The magnifier. Size and colour come from the Icon tab; `showIcon` // hides it without removing the button from the flow. button { display: flex; svg { width: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-in-se, 18px); height: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-in-se, 18px); // A library glyph paints with `stroke` on its paths while an // uploaded one may use `fill`, or set either on the root. &[stroke]:not([stroke="none"]), [stroke]:not([stroke="none"]) { stroke: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-in-c1); } &[fill]:not([fill="none"]), [fill]:not([fill="none"]) { fill: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-in-c1); } stroke-width: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-se-wh); } &[data-show-icon="false"] { display: none; } } // Focus State. `:focus-within` rather than `:focus`, because the focus // lands on the input while the styling belongs to the bar around it. // Each property falls back to its own default-state value, so a focus // style nobody has set is simply the default one. &:focus-within { padding: prepareMediaVariable( --_ctm-dn-sh-br-fs-se-pg, prepareMediaVariable(--_ctm-dn-sh-br-dt-se-pg) ); background-color: prepareMediaVariable( --_ctm-dn-sh-br-fs-se-bd-cr, prepareMediaVariable(--_ctm-dn-sh-br-dt-se-bd-cr) ); border-color: prepareMediaVariable( --_ctm-dn-sh-br-fs-se-br-cr, prepareMediaVariable(--_ctm-dn-sh-br-dt-se-br-cr) ); border-style: prepareMediaVariable( --_ctm-dn-sh-br-fs-se-br-se, prepareMediaVariable(--_ctm-dn-sh-br-dt-se-br-se) ); border-width: prepareMediaVariable( --_ctm-dn-sh-br-fs-se-br-wh, prepareMediaVariable(--_ctm-dn-sh-br-dt-se-br-wh) ); border-radius: prepareMediaVariable( --_ctm-dn-sh-br-fs-se-br-rs, prepareMediaVariable(--_ctm-dn-sh-br-dt-se-br-rs) ); &[data-focus-show-shadow="true"] { box-shadow: prepareMediaVariable(--_ctm-dn-sh-br-fs-se-sw-ae, 0 0) prepareMediaVariable(--_ctm-dn-sh-br-fs-se-sw-br, 0) prepareMediaVariable(--_ctm-dn-sh-br-fs-se-sw-sd, 0) prepareMediaVariable(--_ctm-dn-sh-br-fs-se-sw-cr, transparent); } input[type="text"] { color: prepareMediaVariable( --_ctm-dn-sh-br-fs-se-cr, prepareMediaVariable(--_ctm-dn-sh-br-dt-se-cr) ); font-size: prepareMediaVariable( --_ctm-dn-sh-br-fs-se-ft-se, prepareMediaVariable(--_ctm-dn-sh-br-dt-se-ft-se) ); font-weight: prepareMediaVariable( --_ctm-dn-sh-br-fs-se-ft-wt, prepareMediaVariable(--_ctm-dn-sh-br-dt-se-ft-wt) ); text-transform: prepareMediaVariable( --_ctm-dn-sh-br-fs-se-tt-tm, prepareMediaVariable(--_ctm-dn-sh-br-dt-se-tt-tm) ); } button svg { width: prepareMediaVariable( --_ctm-dn-sh-br-fs-se-in-se, prepareMediaVariable(--_ctm-dn-sh-br-dt-se-in-se, 18px) ); height: prepareMediaVariable( --_ctm-dn-sh-br-fs-se-in-se, prepareMediaVariable(--_ctm-dn-sh-br-dt-se-in-se, 18px) ); &[stroke]:not([stroke="none"]), [stroke]:not([stroke="none"]) { stroke: prepareMediaVariable( --_ctm-dn-sh-br-fs-se-in-c1, prepareMediaVariable(--_ctm-dn-sh-br-dt-se-in-c1) ); } &[fill]:not([fill="none"]), [fill]:not([fill="none"]) { fill: prepareMediaVariable( --_ctm-dn-sh-br-fs-se-in-c1, prepareMediaVariable(--_ctm-dn-sh-br-dt-se-in-c1) ); } } } } } ul { margin-top: 10px; transition: all 400ms ease-in-out; &.show__panel { animation: slideUp 0.4s ease-in-out; } &.hide__panel { animation: slideDown 0.4s ease-in-out; pointer-events: none; } &:not(:last-child) { border-bottom: 1px solid var(--_gray-300); } li { display: flex; align-items: center; justify-content: space-between; padding-block: 6px; font-size: 14px; .filter-li-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; } .filter-indicator { width: 16px; height: 16px; flex-shrink: 0; } .filter-indicator img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; border: 1px solid var(--_thm-cs-be-se-3); } .color-circle { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--_thm-cs-be-se-3); } a { // padding-block: 6px; padding-left: 10px; display: block; text-decoration: none; color: var(--_gray-700); font-size: var(--_fs-14); font-weight: var(--_fw-600); border-radius: var(--_br-6); width: 100%; &:hover { background-color: var(--_primary-25); color: var(--_primary-700); } } .more__button { // Padding of the More Button. The key was in the schema and the panel // rendered it under Border Radius, but nothing here read it. padding: prepareMediaVariable(--_ctm-dn-me-bn-dt-se-pg, 0); &:hover { padding: prepareMediaVariable( --_ctm-dn-me-bn-hr-se-pg, prepareMediaVariable(--_ctm-dn-me-bn-dt-se-pg, 0) ); } // font-size: 12px; // text-transform: uppercase; // font-weight: var(--_fw-500); // color: var(--_primary-400); background-color: var( --_ctm-mob-dn-me-bn-dt-se-bd-cr, var(--_ctm-tab-dn-me-bn-dt-se-bd-cr, var(--_ctm-dn-me-bn-dt-se-bd-cr)) ); border-radius: var( --_ctm-mob-dn-me-bn-dt-se-br-rs, var(--_ctm-tab-dn-me-bn-dt-se-br-rs, var(--_ctm-dn-me-bn-dt-se-br-rs)) ); box-shadow: var( --_show-shadow-clear-all, var( --_ctm-mob-dn-me-bn-dt-se-sw-ae, var(--_ctm-tab-dn-me-bn-dt-se-sw-ae, var(--_ctm-dn-me-bn-dt-se-sw-ae)) ) var( --_ctm-mob-dn-me-bn-dt-se-sw-br, var(--_ctm-tab-dn-me-bn-dt-se-sw-br, var(--_ctm-dn-me-bn-dt-se-sw-br)) ) var( --_ctm-mob-dn-me-bn-dt-se-sw-sd, var(--_ctm-tab-dn-me-bn-dt-se-sw-sd, var(--_ctm-dn-me-bn-dt-se-sw-sd)) ) var( --_ctm-mob-dn-me-bn-dt-se-sw-cr, var(--_ctm-tab-dn-me-bn-dt-se-sw-cr, var(--_ctm-dn-me-bn-dt-se-sw-cr)) ) ); color: var( --_ctm-mob-dn-me-bn-dt-se-cr, var(--_ctm-tab-dn-me-bn-dt-se-cr, var(--_ctm-dn-me-bn-dt-se-cr)) ); font-family: var( --_sf-hr-ff, var( --_ctm-mob-dn-me-bn-dt-se-ft-fy, var(--_ctm-tab-dn-me-bn-dt-se-ft-fy, var(--_ctm-dn-me-bn-dt-se-ft-fy)) ) ); text-transform: var( --_sf-hr-tt-tm, var( --_ctm-mob-dn-me-bn-dt-se-tt-tm, var(--_ctm-tab-dn-me-bn-dt-se-tt-tm, var(--_ctm-dn-me-bn-dt-se-tt-tm)) ) ); word-wrap: var( --_sf-hr-wd-wp, var( --_ctm-mob-dn-me-bn-dt-se-wd-wp, var(--_ctm-tab-dn-me-bn-dt-se-wd-wp, var(--_ctm-dn-me-bn-dt-se-wd-wp)) ) ); word-break: var( --_sf-hr-wd-bk, var( --_ctm-mob-dn-me-bn-dt-se-wd-bk, var(--_ctm-tab-dn-me-bn-dt-se-wd-bk, var(--_ctm-dn-me-bn-dt-se-wd-bk)) ) ); font-size: var( --_ctm-mob-dn-me-bn-dt-se-ft-se, var(--_ctm-tab-dn-me-bn-dt-se-ft-se, var(--_ctm-dn-me-bn-dt-se-ft-se)) ); font-weight: var( --_ctm-mob-dn-me-bn-dt-se-ft-wt, var(--_ctm-tab-dn-me-bn-dt-se-ft-wt, var(--_ctm-dn-me-bn-dt-se-ft-wt)) ); font-style: var( --_ctm-mob-dn-me-bn-dt-se-ft-se-ic, var(--_ctm-tab-dn-me-bn-dt-se-ft-se-ic, var(--_ctm-dn-me-bn-dt-se-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-me-bn-dt-se-tt-an, var(--_ctm-tab-dn-me-bn-dt-se-tt-an, var(--_ctm-dn-me-bn-dt-se-tt-an)) ); letter-spacing: var( --_ctm-mob-dn-me-bn-dt-se-lr-sg, var(--_ctm-tab-dn-me-bn-dt-se-lr-sg, var(--_ctm-dn-me-bn-dt-se-lr-sg)) ); line-height: var( --_ctm-mob-dn-me-bn-dt-se-le-ht, var(--_ctm-tab-dn-me-bn-dt-se-le-ht, var(--_ctm-dn-me-bn-dt-se-le-ht)) ); text-decoration: var( --_ctm-mob-dn-me-bn-dt-se-ue, var(--_ctm-tab-dn-me-bn-dt-se-ue, var(--_ctm-dn-me-bn-dt-se-ue)) ); &[data-show-more-button-border="true"] { border-color: var( --_sf-hr-br-cr, var( --_ctm-mob-dn-me-bn-dt-se-br-cr, var(--_ctm-tab-dn-me-bn-dt-se-br-cr, var(--_ctm-dn-me-bn-dt-se-br-cr)) ) ); border-style: var( --_sf-hr-br-st, var( --_ctm-mob-dn-me-bn-dt-se-br-se, var(--_ctm-tab-dn-me-bn-dt-se-br-se, var(--_ctm-dn-me-bn-dt-se-br-se)) ) ); border-width: var( --_sf-hr-br-wh, var( --_ctm-mob-dn-me-bn-dt-se-br-wh, var(--_ctm-tab-dn-me-bn-dt-se-br-wh, var(--_ctm-dn-me-bn-dt-se-br-wh)) ) ); } // &:hover { // color: var(--_primary-700); // } } &:has(.no__results__found) { .no__results__found { padding: 12px; color: var(--_gray-600); display: flex; justify-content: center; background: var(--_gray-100); padding: 12px; border-radius: 4px; font-weight: 600; color: var(--_gray-600); } } } } .no__results__found { padding: 12px; color: var(--_gray-600); display: flex; justify-content: center; background: var(--_gray-100); padding: 12px; border-radius: 4px; font-weight: 600; color: var(--_gray-600); } } } .filter__inline { // margin: 30px; display: flex; flex-direction: column; // justify-content: space-between; // align-items: center; flex-wrap: wrap; gap: 20px; .filter__Header { display: flex; justify-content: flex-start; gap: 12px; h2 { font-size: var(--_fs-14); font-weight: var(--_fw-600); text-transform: uppercase; } h3 { // font-size: 14px; // text-transform: uppercase; color: var( --_ctm-mob-dn-fs-wt-cr, var(--_ctm-tab-dn-fs-wt-cr, var(--_ctm-dn-fs-wt-cr)) ); font-family: var( --_sf-hr-ff, var( --_ctm-mob-dn-fs-wt-ft-fy, var(--_ctm-tab-dn-fs-wt-ft-fy, var(--_ctm-dn-fs-wt-ft-fy)) ) ); text-transform: var( --_sf-hr-tt-tm, var( --_ctm-mob-dn-fs-wt-tt-tm, var(--_ctm-tab-dn-fs-wt-tt-tm, var(--_ctm-dn-fs-wt-tt-tm)) ) ); word-wrap: var( --_sf-hr-wd-wp, var( --_ctm-mob-dn-fs-wt-wd-wp, var(--_ctm-tab-dn-fs-wt-wd-wp, var(--_ctm-dn-fs-wt-wd-wp)) ) ); word-break: var( --_sf-hr-wd-bk, var( --_ctm-mob-dn-fs-wt-wd-bk, var(--_ctm-tab-dn-fs-wt-wd-bk, var(--_ctm-dn-fs-wt-wd-bk)) ) ); font-size: var( --_ctm-mob-dn-fs-wt-ft-se, var(--_ctm-tab-dn-fs-wt-ft-se, var(--_ctm-dn-fs-wt-ft-se)) ); font-weight: var( --_ctm-mob-dn-fs-wt-ft-wt, var(--_ctm-tab-dn-fs-wt-ft-wt, var(--_ctm-dn-fs-wt-ft-wt)) ); font-style: var( --_ctm-mob-dn-fs-wt-ft-se-ic, var(--_ctm-tab-dn-fs-wt-ft-se-ic, var(--_ctm-dn-fs-wt-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-fs-wt-tt-an, var(--_ctm-tab-dn-fs-wt-tt-an, var(--_ctm-dn-fs-wt-tt-an)) ); letter-spacing: var( --_ctm-mob-dn-fs-wt-lr-sg, var(--_ctm-tab-dn-fs-wt-lr-sg, var(--_ctm-dn-fs-wt-lr-sg)) ); line-height: var( --_ctm-mob-dn-fs-wt-le-ht, var(--_ctm-tab-dn-fs-wt-le-ht, var(--_ctm-dn-fs-wt-le-ht)) ); text-decoration: var( --_ctm-mob-dn-fs-wt-ue, var(--_ctm-tab-dn-fs-wt-ue, var(--_ctm-dn-fs-wt-ue)) ); } .reset__btn { // font-size: 12px; // text-transform: uppercase; // font-weight: var(--_fw-500); // color: var(--_primary-400); background-color: var( --_ctm-mob-dn-cr-al-tt-dt-se-bd-cr, var(--_ctm-tab-dn-cr-al-tt-dt-se-bd-cr, var(--_ctm-dn-cr-al-tt-dt-se-bd-cr)) ); border-radius: var( --_ctm-mob-dn-cr-al-tt-dt-se-br-rs, var(--_ctm-tab-dn-cr-al-tt-dt-se-br-rs, var(--_ctm-dn-cr-al-tt-dt-se-br-rs)) ); padding: var( --_ctm-mob-dn-cr-al-tt-dt-se-pg, var(--_ctm-tab-dn-cr-al-tt-dt-se-pg, var(--_ctm-dn-cr-al-tt-dt-se-pg)) ); box-shadow: var( --_show-shadow-clear-all, var( --_ctm-mob-dn-cr-al-tt-dt-se-sw-ae, var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-ae, var(--_ctm-dn-cr-al-tt-dt-se-sw-ae)) ) var( --_ctm-mob-dn-cr-al-tt-dt-se-sw-br, var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-br, var(--_ctm-dn-cr-al-tt-dt-se-sw-br)) ) var( --_ctm-mob-dn-cr-al-tt-dt-se-sw-sd, var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-sd, var(--_ctm-dn-cr-al-tt-dt-se-sw-sd)) ) var( --_ctm-mob-dn-cr-al-tt-dt-se-sw-cr, var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-cr, var(--_ctm-dn-cr-al-tt-dt-se-sw-cr)) ) ); color: var( --_ctm-mob-dn-cr-al-tt-dt-se-cr, var(--_ctm-tab-dn-cr-al-tt-dt-se-cr, var(--_ctm-dn-cr-al-tt-dt-se-cr)) ); font-family: var( --_sf-hr-ff, var( --_ctm-mob-dn-cr-al-tt-dt-se-ft-fy, var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-fy, var(--_ctm-dn-cr-al-tt-dt-se-ft-fy)) ) ); text-transform: var( --_sf-hr-tt-tm, var( --_ctm-mob-dn-cr-al-tt-dt-se-tt-tm, var(--_ctm-tab-dn-cr-al-tt-dt-se-tt-tm, var(--_ctm-dn-cr-al-tt-dt-se-tt-tm)) ) ); word-wrap: var( --_sf-hr-wd-wp, var( --_ctm-mob-dn-cr-al-tt-dt-se-wd-wp, var(--_ctm-tab-dn-cr-al-tt-dt-se-wd-wp, var(--_ctm-dn-cr-al-tt-dt-se-wd-wp)) ) ); word-break: var( --_sf-hr-wd-bk, var( --_ctm-mob-dn-cr-al-tt-dt-se-wd-bk, var(--_ctm-tab-dn-cr-al-tt-dt-se-wd-bk, var(--_ctm-dn-cr-al-tt-dt-se-wd-bk)) ) ); font-size: var( --_ctm-mob-dn-cr-al-tt-dt-se-ft-se, var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-se, var(--_ctm-dn-cr-al-tt-dt-se-ft-se)) ); font-weight: var( --_ctm-mob-dn-cr-al-tt-dt-se-ft-wt, var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-wt, var(--_ctm-dn-cr-al-tt-dt-se-ft-wt)) ); font-style: var( --_ctm-mob-dn-cr-al-tt-dt-se-ft-se-ic, var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-se-ic, var(--_ctm-dn-cr-al-tt-dt-se-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-cr-al-tt-dt-se-tt-an, var(--_ctm-tab-dn-cr-al-tt-dt-se-tt-an, var(--_ctm-dn-cr-al-tt-dt-se-tt-an)) ); letter-spacing: var( --_ctm-mob-dn-cr-al-tt-dt-se-lr-sg, var(--_ctm-tab-dn-cr-al-tt-dt-se-lr-sg, var(--_ctm-dn-cr-al-tt-dt-se-lr-sg)) ); line-height: var( --_ctm-mob-dn-cr-al-tt-dt-se-le-ht, var(--_ctm-tab-dn-cr-al-tt-dt-se-le-ht, var(--_ctm-dn-cr-al-tt-dt-se-le-ht)) ); text-decoration: var( --_ctm-mob-dn-cr-al-tt-dt-se-ue, var(--_ctm-tab-dn-cr-al-tt-dt-se-ue, var(--_ctm-dn-cr-al-tt-dt-se-ue)) ); // &:hover { // color: var(--_primary-700); // } } } p { color: var( --_ctm-mob-dn-fs-wt-cr-dc, var(--_ctm-tab-dn-fs-wt-cr-dc, var(--_ctm-dn-fs-wt-cr-dc)) ); font-family: var( --_sf-hr-ff, var( --_ctm-mob-dn-fs-wt-ft-fy-dc, var(--_ctm-tab-dn-fs-wt-ft-fy-dc, var(--_ctm-dn-fs-wt-ft-fy-dc)) ) ); text-transform: var( --_sf-hr-tt-tm, var( --_ctm-mob-dn-fs-wt-tt-tm-dc, var(--_ctm-tab-dn-fs-wt-tt-tm-dc, var(--_ctm-dn-fs-wt-tt-tm-dc)) ) ); word-wrap: var( --_sf-hr-wd-wp, var( --_ctm-mob-dn-fs-wt-wd-wp-dc, var(--_ctm-tab-dn-fs-wt-wd-wp-dc, var(--_ctm-dn-fs-wt-wd-wp-dc)) ) ); word-break: var( --_sf-hr-wd-bk, var( --_ctm-mob-dn-fs-wt-wd-bk-dc, var(--_ctm-tab-dn-fs-wt-wd-bk-dc, var(--_ctm-dn-fs-wt-wd-bk-dc)) ) ); font-size: var( --_ctm-mob-dn-fs-wt-ft-se-dc, var(--_ctm-tab-dn-fs-wt-ft-se-dc, var(--_ctm-dn-fs-wt-ft-se-dc)) ); font-weight: var( --_ctm-mob-dn-fs-wt-ft-wt-dc, var(--_ctm-tab-dn-fs-wt-ft-wt-dc, var(--_ctm-dn-fs-wt-ft-wt-dc)) ); font-style: var( --_ctm-mob-dn-fs-wt-ft-se-ic-dc, var(--_ctm-tab-dn-fs-wt-ft-se-ic-dc, var(--_ctm-dn-fs-wt-ft-se-ic-dc)) ); text-align: var( --_ctm-mob-dn-fs-wt-tt-an-dc, var(--_ctm-tab-dn-fs-wt-tt-an-dc, var(--_ctm-dn-fs-wt-tt-an-dc)) ); letter-spacing: var( --_ctm-mob-dn-fs-wt-lr-sg-dc, var(--_ctm-tab-dn-fs-wt-lr-sg-dc, var(--_ctm-dn-fs-wt-lr-sg-dc)) ); line-height: var( --_ctm-mob-dn-fs-wt-le-ht-dc, var(--_ctm-tab-dn-fs-wt-le-ht-dc, var(--_ctm-dn-fs-wt-le-ht-dc)) ); text-decoration: var( --_ctm-mob-dn-fs-wt-ue-dc, var(--_ctm-tab-dn-fs-wt-ue-dc, var(--_ctm-dn-fs-wt-ue-dc)) ); } .flt__dropdowns { display: flex; // flex-direction: column; // justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; .filter__option__dropdown { display: flex; gap: 20px; cursor: pointer; border: 1px solid var(--_base-white); padding: 6px 12px; border-radius: 6px; width: fit-content; &:hover { border: 1px solid var(--_gray-200); background-color: var(--_gray-50); } } } .flt__options { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; } .selected__items { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; .selected__category { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; .selected_item { display: flex; gap: 8px; border: 1px solid var(--_thm-cs-be-se-3); border-radius: 30px; padding: 6px 12px; align-items: center; color: var( --_sf-hr-fc, var( --_ctm-mob-dn-sd-im-dt-se-cr, var(--_ctm-tab-dn-sd-im-dt-se-cr, var(--_ctm-dn-sd-im-dt-se-cr)) ) ); font-family: var( --_sf-hr-ff, var( --_ctm-mob-dn-sd-im-dt-se-ft-fy, var(--_ctm-tab-dn-sd-im-dt-se-ft-fy, var(--_ctm-dn-sd-im-dt-se-ft-fy)) ) ); text-transform: var( --_sf-hr-tt-tm, var( --_ctm-mob-dn-sd-im-dt-se-tt-tm, var(--_ctm-tab-dn-sd-im-dt-se-tt-tm, var(--_ctm-dn-sd-im-dt-se-tt-tm)) ) ); word-wrap: var( --_sf-hr-wd-wp, var( --_ctm-mob-dn-sd-im-dt-se-wd-wp, var(--_ctm-tab-dn-sd-im-dt-se-wd-wp, var(--_ctm-dn-sd-im-dt-se-wd-wp)) ) ); word-break: var( --_sf-hr-wd-bk, var( --_ctm-mob-dn-sd-im-dt-se-wd-bk, var(--_ctm-tab-dn-sd-im-dt-se-wd-bk, var(--_ctm-dn-sd-im-dt-se-wd-bk)) ) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var( --_sf-hr-fs, var( --_ctm-mob-dn-sd-im-dt-se-ft-se, var(--_ctm-tab-dn-sd-im-dt-se-ft-se, var(--_ctm-dn-sd-im-dt-se-ft-se)) ) ); font-weight: var( --_sf-hr-fw, var( --_ctm-mob-dn-sd-im-dt-se-ft-wt, var(--_ctm-tab-dn-sd-im-dt-se-ft-wt, var(--_ctm-dn-sd-im-dt-se-ft-wt)) ) ); font-style: var( --_sf-hr-ft, var( --_ctm-mob-dn-sd-im-dt-se-ft-se-ic, var(--_ctm-tab-dn-sd-im-dt-se-ft-se-ic, var(--_ctm-dn-sd-im-dt-se-ft-se-ic)) ) ); text-align: var( --_sf-hr-ta, var( --_ctm-mob-dn-sd-im-dt-se-tt-an, var(--_ctm-tab-dn-sd-im-dt-se-tt-an, var(--_ctm-dn-sd-im-dt-se-tt-an)) ) ); letter-spacing: var( --_sf-hr-ls, var( --_ctm-mob-dn-sd-im-dt-se-lr-sg, var(--_ctm-tab-dn-sd-im-dt-se-lr-sg, var(--_ctm-dn-sd-im-dt-se-lr-sg)) ) ); line-height: var( --_sf-hr-lh, var( --_ctm-mob-dn-sd-im-dt-se-le-ht, var(--_ctm-tab-dn-sd-im-dt-se-le-ht, var(--_ctm-dn-sd-im-dt-se-le-ht)) ) ); text-decoration: var( --_sf-hr-tt-dn, var( --_ctm-mob-dn-sd-im-dt-se-ue, var(--_ctm-tab-dn-sd-im-dt-se-ue, var(--_ctm-dn-sd-im-dt-se-ue)) ) ); &:hover { // border: 1px solid var(--_gray-300); // background-color: var(--_gray-50); // cursor: pointer; --_sf-hr-bd-cr: var( --_ctm-mob-dn-sd-im-hr-se-bd-cr, var(--_ctm-tab-dn-sd-im-hr-se-bd-cr, var(--_ctm-dn-sd-im-hr-se-bd-cr)) ); --_sf-hr-br-cr: var( --_ctm-mob-dn-sd-im-hr-se-br-cr, var(--_ctm-tab-dn-sd-im-hr-se-br-cr, var(--_ctm-dn-sd-im-hr-se-br-cr)) ); --_sf-hr-br-st: var( --_ctm-mob-dn-sd-im-hr-se-br-se, var(--_ctm-tab-dn-sd-im-hr-se-br-se, var(--_ctm-dn-sd-im-hr-se-br-se)) ); --_sf-hr-br-wh: var( --_ctm-mob-dn-sd-im-hr-se-br-wh, var(--_ctm-tab-dn-sd-im-hr-se-br-wh, var(--_ctm-dn-sd-im-hr-se-br-wh)) ); --_sf-hr-br-br: var( --_ctm-mob-dn-sd-im-hr-se-br-rs, var(--_ctm-tab-dn-sd-im-hr-se-br-rs, var(--_ctm-dn-sd-im-hr-se-br-rs)) ); --_sf-hr-sd-im-pg: var( --_ctm-mob-dn-sd-im-hr-se-pg, var(--_ctm-tab-dn-sd-im-hr-se-pg, var(--_ctm-dn-sd-im-hr-se-pg)) ); --_sf-hr-bx-sw: var( --_ctm-mob-dn-sd-im-hr-se-sw-ae, var(--_ctm-tab-dn-sd-im-hr-se-sw-ae, var(--_ctm-dn-sd-im-hr-se-sw-ae)) ) var( --_ctm-mob-dn-sd-im-hr-se-sw-br, var(--_ctm-tab-dn-sd-im-hr-se-sw-br, var(--_ctm-dn-sd-im-hr-se-sw-br)) ) var( --_ctm-mob-dn-sd-im-hr-se-sw-sd, var(--_ctm-tab-dn-sd-im-hr-se-sw-sd, var(--_ctm-dn-sd-im-hr-se-sw-sd)) ) var( --_ctm-mob-dn-sd-im-hr-se-sw-cr, var(--_ctm-tab-dn-sd-im-hr-se-sw-cr, var(--_ctm-dn-sd-im-hr-se-sw-cr)) ); --_sf-hr-fc: var( --_ctm-mob-dn-sd-im-hr-se-cr, var(--_ctm-tab-dn-sd-im-hr-se-cr, var(--_ctm-dn-sd-im-hr-se-cr)) ); --_sf-hr-ff: var( --_ctm-mob-dn-sd-im-hr-se-ft-fy, var(--_ctm-tab-dn-sd-im-hr-se-ft-fy, var(--_ctm-dn-sd-im-hr-se-ft-fy)) ); --_sf-hr-tt-tm: var( --_ctm-mob-dn-sd-im-hr-se-tt-tm, var(--_ctm-tab-dn-sd-im-hr-se-tt-tm, var(--_ctm-dn-sd-im-hr-se-tt-tm)) ); --_sf-hr-wd-wp: var( --_ctm-mob-dn-sd-im-hr-se-wd-wp, var(--_ctm-tab-dn-sd-im-hr-se-wd-wp, var(--_ctm-dn-sd-im-hr-se-wd-wp)) ); --_sf-hr-wd-bk: var( --_ctm-mob-dn-sd-im-hr-se-wd-bk, var(--_ctm-tab-dn-sd-im-hr-se-wd-bk, var(--_ctm-dn-sd-im-hr-se-wd-bk)) ); --_sf-hr-fs: var( --_ctm-mob-dn-sd-im-hr-se-ft-se, var(--_ctm-tab-dn-sd-im-hr-se-ft-se, var(--_ctm-dn-sd-im-hr-se-ft-se)) ); --_sf-hr-fw: var( --_ctm-mob-dn-sd-im-hr-se-ft-wt, var(--_ctm-tab-dn-sd-im-hr-se-ft-wt, var(--_ctm-dn-sd-im-hr-se-ft-wt)) ); --_sf-hr-ft: var( --_ctm-mob-dn-sd-im-hr-se-ft-se-ic, var(--_ctm-tab-dn-sd-im-hr-se-ft-se-ic, var(--_ctm-dn-sd-im-hr-se-ft-se-ic)) ); --_sf-hr-ta: var( --_ctm-mob-dn-sd-im-hr-se-tt-an, var(--_ctm-tab-dn-sd-im-hr-se-tt-an, var(--_ctm-dn-sd-im-hr-se-tt-an)) ); --_sf-hr-ls: var( --_ctm-mob-dn-sd-im-hr-se-lr-sg, var(--_ctm-tab-dn-sd-im-hr-se-lr-sg, var(--_ctm-dn-sd-im-hr-se-lr-sg)) ); --_sf-hr-lh: var( --_ctm-mob-dn-sd-im-hr-se-le-ht, var(--_ctm-tab-dn-sd-im-hr-se-le-ht, var(--_ctm-dn-sd-im-hr-se-le-ht)) ); --_sf-hr-ic-wt: var( --_ctm-mob-dn-sd-im-hr-se-in-se, var(--_ctm-tab-dn-sd-im-hr-se-in-se, var(--_ctm-dn-sd-im-hr-se-in-se)) ); --_sf-hr-ic-ht: var( --_ctm-mob-dn-sd-im-hr-se-in-se, var(--_ctm-tab-dn-sd-im-hr-se-in-se, var(--_ctm-dn-sd-im-hr-se-in-se)) ); --_sf-hr-ic-st: var( --_ctm-mob-dn-sd-im-hr-se-in-c1, var(--_ctm-tab-dn-sd-im-hr-se-in-c1, var(--_ctm-dn-sd-im-hr-se-in-c1)) ); --_sf-hr-tt-dn: var( --_ctm-mob-dn-sd-im-hr-se-ue, var(--_ctm-tab-dn-sd-im-hr-se-ue, var(--_ctm-dn-sd-im-hr-se-ue)) ); &[data-hover-show-shadow="false"] { --_hover-show-shadow: none; } &[data-hover-show-icon="false"] { --_hover-show-icon: none; } } } } } } .clear__btn { display: flex; align-items: center; svg { width: 18px; height: 18px; &:hover { path { stroke: var(--_gray-900); } } } } //Filter Features Ends // Input checkbox Starts .checkbox__radio { display: flex; // `flex-start`, not `center`: once the box can be resized or padded it is often // taller than one line of label text, and centring made a wrapped label sit // visibly off its box. Starting both at the top keeps the box level with the // label's first line at any size. align-items: flex-start; gap: 8px; position: relative; // margin-bottom: 12px; cursor: pointer; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; .color-image { width: 15px; height: 15px; border-radius: 50%; // border: 1px solid var(--_thm-cs-be-se-3); object-fit: "cover"; display: "block"; } .color { width: 15px; height: 15px; border: 1px solid var(--_thm-cs-be-se-3); border-radius: 50%; } .option__value { color: var( --_ctm-mob-dn-on-ls-cr-dc, var(--_ctm-tab-dn-on-ls-cr-dc, var(--_ctm-dn-on-ls-cr-dc)) ); font-family: var( --_sf-hr-ff, var( --_ctm-mob-dn-on-ls-ft-fy-dc, var(--_ctm-tab-dn-on-ls-ft-fy-dc, var(--_ctm-dn-on-ls-ft-fy-dc)) ) ); text-transform: var( --_sf-hr-tt-tm, var( --_ctm-mob-dn-on-ls-tt-tm-dc, var(--_ctm-tab-dn-on-ls-tt-tm-dc, var(--_ctm-dn-on-ls-tt-tm-dc)) ) ); word-wrap: var( --_sf-hr-wd-wp, var( --_ctm-mob-dn-on-ls-wd-wp-dc, var(--_ctm-tab-dn-on-ls-wd-wp-dc, var(--_ctm-dn-on-ls-wd-wp-dc)) ) ); word-break: var( --_sf-hr-wd-bk, var( --_ctm-mob-dn-on-ls-wd-bk-dc, var(--_ctm-tab-dn-on-ls-wd-bk-dc, var(--_ctm-dn-on-ls-wd-bk-dc)) ) ); font-size: var( --_ctm-mob-dn-on-ls-ft-se-dc, var(--_ctm-tab-dn-on-ls-ft-se-dc, var(--_ctm-dn-on-ls-ft-se-dc)) ); font-weight: var( --_ctm-mob-dn-on-ls-ft-wt-dc, var(--_ctm-tab-dn-on-ls-ft-wt-dc, var(--_ctm-dn-on-ls-ft-wt-dc)) ); font-style: var( --_ctm-mob-dn-on-ls-ft-se-ic-dc, var(--_ctm-tab-dn-on-ls-ft-se-ic-dc, var(--_ctm-dn-on-ls-ft-se-ic-dc)) ); text-align: var( --_ctm-mob-dn-on-ls-tt-an-dc, var(--_ctm-tab-dn-on-ls-tt-an-dc, var(--_ctm-dn-on-ls-tt-an-dc)) ); letter-spacing: var( --_ctm-mob-dn-on-ls-lr-sg-dc, var(--_ctm-tab-dn-on-ls-lr-sg-dc, var(--_ctm-dn-on-ls-lr-sg-dc)) ); line-height: var( --_ctm-mob-dn-on-ls-le-ht-dc, var(--_ctm-tab-dn-on-ls-le-ht-dc, var(--_ctm-dn-on-ls-le-ht-dc)) ); text-decoration: var( --_ctm-mob-dn-on-ls-ue-dc, var(--_ctm-tab-dn-on-ls-ue-dc, var(--_ctm-dn-on-ls-ue-dc)) ); } } .checkbox__radio input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .checkmark { // Layout Options of the Checkbox Unchecked / Checked sections. These were // hardcoded, so Width, Height and Padding wrote variables no rule read. 18px // is the schema default and what was hardcoded here, so an untouched checkbox // is unchanged. `box-sizing` keeps the configured Width the outer size once a // padding or a border is added, and `flex-shrink: 0` stops a long option label // squashing a box that has been made bigger — the row stays aligned. box-sizing: border-box; flex-shrink: 0; width: prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-wh, 18px); height: prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-ht, 18px); padding: prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-pg, 0); // Unchecked hover. The checkbox variant had no hover rule at all, so the // Hover state of Checkbox Unchecked Style reached nothing here. &:hover { width: prepareMediaVariable( --_ctm-dn-cx-ud-se-hr-se-wh, prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-wh, 18px) ); height: prepareMediaVariable( --_ctm-dn-cx-ud-se-hr-se-ht, prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-ht, 18px) ); padding: prepareMediaVariable( --_ctm-dn-cx-ud-se-hr-se-pg, prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-pg, 0) ); } // border: 1px solid var(--_gray-500); // background-color: var(--_base-white); display: flex; justify-content: center; align-items: center; background-color: var( --_ctm-mob-dn-cx-ud-se-dt-se-bd-cr, var(--_ctm-tab-dn-cx-ud-se-dt-se-bd-cr, var(--_ctm-dn-cx-ud-se-dt-se-bd-cr)) ); border-radius: var( --_ctm-mob-dn-cx-ud-se-dt-se-br-rs, var(--_ctm-tab-dn-cx-ud-se-dt-se-br-rs, var(--_ctm-dn-cx-ud-se-dt-se-br-rs)) ); transition: background-color 400ms ease-in-out; &[data-show-default-unchecked-shadow="true"] { box-shadow: var( --_show-shadow-clear-all, var( --_ctm-mob-dn-cx-ud-se-dt-se-sw-ae, var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-ae, var(--_ctm-dn-cx-ud-se-dt-se-sw-ae)) ) var( --_ctm-mob-dn-cx-ud-se-dt-se-sw-br, var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-br, var(--_ctm-dn-cx-ud-se-dt-se-sw-br)) ) var( --_ctm-mob-dn-cx-ud-se-dt-se-sw-sd, var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-sd, var(--_ctm-dn-cx-ud-se-dt-se-sw-sd)) ) var( --_ctm-mob-dn-cx-ud-se-dt-se-sw-cr, var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-cr, var(--_ctm-dn-cx-ud-se-dt-se-sw-cr)) ) ); } &[data-show-default-unchecked-border="true"] { border-color: var( --_sf-hr-br-cr, var( --_ctm-mob-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr)) ) ); border-style: var( --_sf-hr-br-st, var( --_ctm-mob-dn-cx-ud-se-dt-se-br-se, var(--_ctm-tab-dn-cx-ud-se-dt-se-br-se, var(--_ctm-dn-cx-ud-se-dt-se-br-se)) ) ); border-width: var( --_sf-hr-br-wh, var( --_ctm-mob-dn-cx-ud-se-dt-se-br-wh, var(--_ctm-tab-dn-cx-ud-se-dt-se-br-wh, var(--_ctm-dn-cx-ud-se-dt-se-br-wh)) ) ); } // &:hover { // &[data-show-hover-unchecked-border="true"] { // border-color: var( // --_sf-hr-br-cr, // var( // --_ctm-mob-dn-cx-ud-se-hr-se-br-cr, // var(--_ctm-tab-dn-cx-ud-se-hr-se-br-cr, var(--_ctm-dn-cx-ud-se-hr-se-br-cr)) // ) // ); // border-style: var( // --_sf-hr-br-st, // var( // --_ctm-mob-dn-cx-ud-se-hr-se-br-se, // var(--_ctm-tab-dn-cx-ud-se-hr-se-br-se, var(--_ctm-dn-cx-ud-se-hr-se-br-se)) // ) // ); // border-width: var( // --_sf-hr-br-wh, // var( // --_ctm-mob-dn-cx-ud-se-hr-se-br-wh, // var(--_ctm-tab-dn-cx-ud-se-hr-se-br-wh, var(--_ctm-dn-cx-ud-se-hr-se-br-wh)) // ) // ); // } // &[data-show-hover-unchecked-shadow="true"] { // box-shadow: var( // --_show-shadow-clear-all, // var( // --_ctm-mob-dn-cx-ud-se-hr-se-sw-ae, // var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-ae, var(--_ctm-dn-cx-ud-se-hr-se-sw-ae)) // ) // var( // --_ctm-mob-dn-cx-ud-se-hr-se-sw-br, // var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-br, var(--_ctm-dn-cx-ud-se-hr-se-sw-br)) // ) // var( // --_ctm-mob-dn-cx-ud-se-hr-se-sw-sd, // var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-sd, var(--_ctm-dn-cx-ud-se-hr-se-sw-sd)) // ) // var( // --_ctm-mob-dn-cx-ud-se-hr-se-sw-cr, // var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-cr, var(--_ctm-dn-cx-ud-se-hr-se-sw-cr)) // ) // ); // } // background-color: var( // --_ctm-mob-dn-cx-ud-se-hr-se-bd-cr, // var(--_ctm-tab-dn-cx-ud-se-hr-se-bd-cr, var(--_ctm-dn-cx-ud-se-hr-se-bd-cr)) // ); // border-radius: var( // --_ctm-mob-dn-cx-ud-se-hr-se-br-rs, // var(--_ctm-tab-dn-cx-ud-se-hr-se-br-rs, var(--_ctm-dn-cx-ud-se-hr-se-br-rs)) // ); // box-shadow: var( // --_show-shadow-clear-all, // var( // --_ctm-mob-dn-cx-ud-se-hr-se-sw-ae, // var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-ae, var(--_ctm-dn-cx-ud-se-hr-se-sw-ae)) // ) // var( // --_ctm-mob-dn-cx-ud-se-hr-se-sw-br, // var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-br, var(--_ctm-dn-cx-ud-se-hr-se-sw-br)) // ) // var( // --_ctm-mob-dn-cx-ud-se-hr-se-sw-sd, // var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-sd, var(--_ctm-dn-cx-ud-se-hr-se-sw-sd)) // ) // var( // --_ctm-mob-dn-cx-ud-se-hr-se-sw-cr, // var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-cr, var(--_ctm-dn-cx-ud-se-hr-se-sw-cr)) // ) // ); // } button { display: none; } } .checkbox__radio input:checked ~ .checkmark { // Checked has its own Layout Options, falling back to the unchecked ones so a // box that is only sized on one of the two sections stays a square. width: prepareMediaVariable( --_ctm-dn-cx-cd-se-dt-se-wh, prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-wh, 18px) ); height: prepareMediaVariable( --_ctm-dn-cx-cd-se-dt-se-ht, prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-ht, 18px) ); padding: prepareMediaVariable( --_ctm-dn-cx-cd-se-dt-se-pg, prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-pg, 0) ); background-color: var( --_ctm-mob-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-tab-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-dn-cx-cd-se-dt-se-bd-cr)) ); border-radius: var( --_ctm-mob-dn-cx-cd-se-dt-se-br-rs, var(--_ctm-tab-dn-cx-cd-se-dt-se-br-rs, var(--_ctm-dn-cx-cd-se-dt-se-br-rs)) ); transition: background-color 400ms ease-in-out; &[data-show-default-checked-shadow="true"] { box-shadow: var( --_show-shadow-clear-all, var( --_ctm-mob-dn-cx-cd-se-dt-se-sw-ae, var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-ae, var(--_ctm-dn-cx-cd-se-dt-se-sw-ae)) ) var( --_ctm-mob-dn-cx-cd-se-dt-se-sw-br, var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-br, var(--_ctm-dn-cx-cd-se-dt-se-sw-br)) ) var( --_ctm-mob-dn-cx-cd-se-dt-se-sw-sd, var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-sd, var(--_ctm-dn-cx-cd-se-dt-se-sw-sd)) ) var( --_ctm-mob-dn-cx-cd-se-dt-se-sw-cr, var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-cr, var(--_ctm-dn-cx-cd-se-dt-se-sw-cr)) ) ); } &[data-show-default-checked-border="true"] { border-color: var( --_sf-hr-br-cr, var( --_ctm-mob-dn-cx-cd-se-dt-se-br-cr, var(--_ctm-tab-dn-cx-cd-se-dt-se-br-cr, var(--_ctm-dn-cx-cd-se-dt-se-br-cr)) ) ); border-style: var( --_sf-hr-br-st, var( --_ctm-mob-dn-cx-cd-se-dt-se-br-se, var(--_ctm-tab-dn-cx-cd-se-dt-se-br-se, var(--_ctm-dn-cx-cd-se-dt-se-br-se)) ) ); border-width: var( --_sf-hr-br-wh, var( --_ctm-mob-dn-cx-cd-se-dt-se-br-wh, var(--_ctm-tab-dn-cx-cd-se-dt-se-br-wh, var(--_ctm-dn-cx-cd-se-dt-se-br-wh)) ) ); } &:hover { // Hover carries its own Layout Options, each falling back to the default // state so a box only sized on Default keeps that size on hover. width: prepareMediaVariable( --_ctm-dn-cx-cd-se-hr-se-wh, prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-wh, 18px) ); height: prepareMediaVariable( --_ctm-dn-cx-cd-se-hr-se-ht, prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-ht, 18px) ); padding: prepareMediaVariable( --_ctm-dn-cx-cd-se-hr-se-pg, prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-pg, 0) ); background-color: var( --_ctm-mob-dn-cx-cd-se-hr-se-bd-cr, var(--_ctm-tab-dn-cx-cd-se-hr-se-bd-cr, var(--_ctm-dn-cx-cd-se-hr-se-bd-cr)) ); border-radius: var( --_ctm-mob-dn-cx-cd-se-hr-se-br-rs, var(--_ctm-tab-dn-cx-cd-se-hr-se-br-rs, var(--_ctm-dn-cx-cd-se-hr-se-br-rs)) ); &[data-show-hover-checked-shadow="true"] { box-shadow: var( --_show-shadow-clear-all, var( --_ctm-mob-dn-cx-cd-se-hr-se-sw-ae, var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-ae, var(--_ctm-dn-cx-cd-se-hr-se-sw-ae)) ) var( --_ctm-mob-dn-cx-cd-se-hr-se-sw-br, var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-br, var(--_ctm-dn-cx-cd-se-hr-se-sw-br)) ) var( --_ctm-mob-dn-cx-cd-se-hr-se-sw-sd, var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-sd, var(--_ctm-dn-cx-cd-se-hr-se-sw-sd)) ) var( --_ctm-mob-dn-cx-cd-se-hr-se-sw-cr, var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-cr, var(--_ctm-dn-cx-cd-se-hr-se-sw-cr)) ) ); } &[data-show-hover-checked-border="true"] { border-color: var( --_sf-hr-br-cr, var( --_ctm-mob-dn-cx-cd-se-hr-se-br-cr, var(--_ctm-tab-dn-cx-cd-se-hr-se-br-cr, var(--_ctm-dn-cx-cd-se-hr-se-br-cr)) ) ); border-style: var( --_sf-hr-br-st, var( --_ctm-mob-dn-cx-cd-se-hr-se-br-se, var(--_ctm-tab-dn-cx-cd-se-hr-se-br-se, var(--_ctm-dn-cx-cd-se-hr-se-br-se)) ) ); border-width: var( --_sf-hr-br-wh, var( --_ctm-mob-dn-cx-cd-se-hr-se-br-wh, var(--_ctm-tab-dn-cx-cd-se-hr-se-br-wh, var(--_ctm-dn-cx-cd-se-hr-se-br-wh)) ) ); } button { display: flex; .default-icon { display: none; } .hover-icon { display: flex; align-items: center; justify-content: center; } svg { // Icon Size of the hover state. These read a plain `-se`, a name nothing // emits — iconSize becomes `in-se`. Falls back to the default state's // size so an icon only sized on Default keeps that size on hover. width: prepareMediaVariable( --_ctm-dn-cx-cd-se-hr-se-in-se, prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-in-se, 13px) ); height: prepareMediaVariable( --_ctm-dn-cx-cd-se-hr-se-in-se, prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-in-se, 13px) ); path { // stroke: var(--_base-white); stroke: var( --_ctm-mob-dn-cx-cd-se-hr-se-in-c1, var(--_ctm-tab-dn-cx-cd-se-hr-se-in-c1, var(--_ctm-dn-cx-cd-se-hr-se-in-c1)) ); } } } } // background-color: var(--_primary-400); // border: 1px solid var(--_primary-400); // border-radius: 50%; display: flex; justify-content: center; align-items: center; button { display: flex; .default-icon { display: flex; justify-content: center; align-items: center; } .hover-icon { display: none; } svg { // Icon Size. `iconSize` carries `property: "iconSize"`, which // splitCamelCaseAndJoin turns into `in-se` — these read plain `-se`, a // name nothing emits, so the control moved a variable no rule used. width: prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-in-se, 13px); height: prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-in-se, 13px); path { // stroke: var(--_base-white); stroke: var( --_ctm-mob-dn-cx-cd-se-dt-se-in-c1, var(--_ctm-tab-dn-cx-cd-se-dt-se-in-c1, var(--_ctm-dn-cx-cd-se-dt-se-in-c1)) ); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-se-wh, 1.25); } } } } .checkmark:after { content: ""; position: absolute; display: none; } .checkbox__radio input:checked ~ .checkmark:after { display: block; } .checkbox__radio .checkmark:after { left: 7px; top: 2px; } // Input checkbox Ends // Input radio begins .filter__checkbox__radio { display: flex; // Same reasoning as .checkbox__radio above. align-items: flex-start; gap: 8px; cursor: pointer; position: relative; input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .filter__checkmark { // The radio variant — what Selection Type "Single Select" renders, and the // element's default. Its size was hardcoded, so the Checkbox sections' Layout // Options only ever moved the checkbox variant. Same variables, same 18px // fallback, and `flex-shrink: 0` so a resized box is not squeezed by a long // option label beside it. box-sizing: border-box; flex-shrink: 0; width: prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-wh, 18px); height: prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-ht, 18px); padding: prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-pg, 0); display: inline-block; // border: 2px solid #ccc; // background-color: #fff; position: relative; transition: border-color 0.2s ease, background-color 0.2s ease; // background-color: var( // --_ctm-mob-dn-cx-ud-se-dt-se-bd-cr, // var(--_ctm-tab-dn-cx-ud-se-dt-se-bd-cr, var(--_ctm-dn-cx-ud-se-dt-se-bd-cr)) // ); border-radius: var( --_ctm-mob-dn-cx-ud-se-dt-se-br-rs, var(--_ctm-tab-dn-cx-ud-se-dt-se-br-rs, var(--_ctm-dn-cx-ud-se-dt-se-br-rs)) ); &[data-show-default-unchecked-shadow="true"] { box-shadow: var( --_show-shadow-clear-all, var( --_ctm-mob-dn-cx-ud-se-dt-se-sw-ae, var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-ae, var(--_ctm-dn-cx-ud-se-dt-se-sw-ae)) ) var( --_ctm-mob-dn-cx-ud-se-dt-se-sw-br, var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-br, var(--_ctm-dn-cx-ud-se-dt-se-sw-br)) ) var( --_ctm-mob-dn-cx-ud-se-dt-se-sw-sd, var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-sd, var(--_ctm-dn-cx-ud-se-dt-se-sw-sd)) ) var( --_ctm-mob-dn-cx-ud-se-dt-se-sw-cr, var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-cr, var(--_ctm-dn-cx-ud-se-dt-se-sw-cr)) ) ); } &[data-show-default-unchecked-border="true"] { border-color: var( --_sf-hr-br-cr, var( --_ctm-mob-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr)) ) ); border-style: var( --_sf-hr-br-st, var( --_ctm-mob-dn-cx-ud-se-dt-se-br-se, var(--_ctm-tab-dn-cx-ud-se-dt-se-br-se, var(--_ctm-dn-cx-ud-se-dt-se-br-se)) ) ); border-width: var( --_sf-hr-br-wh, var( --_ctm-mob-dn-cx-ud-se-dt-se-br-wh, var(--_ctm-tab-dn-cx-ud-se-dt-se-br-wh, var(--_ctm-dn-cx-ud-se-dt-se-br-wh)) ) ); } &:hover { // Layout Options of the hover state, falling back to the default state. width: prepareMediaVariable( --_ctm-dn-cx-ud-se-hr-se-wh, prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-wh, 18px) ); height: prepareMediaVariable( --_ctm-dn-cx-ud-se-hr-se-ht, prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-ht, 18px) ); padding: prepareMediaVariable( --_ctm-dn-cx-ud-se-hr-se-pg, prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-pg, 0) ); &[data-show-hover-unchecked-border="true"] { border-color: var( --_sf-hr-br-cr, var( --_ctm-mob-dn-cx-ud-se-hr-se-br-cr, var(--_ctm-tab-dn-cx-ud-se-hr-se-br-cr, var(--_ctm-dn-cx-ud-se-hr-se-br-cr)) ) ); border-style: var( --_sf-hr-br-st, var( --_ctm-mob-dn-cx-ud-se-hr-se-br-se, var(--_ctm-tab-dn-cx-ud-se-hr-se-br-se, var(--_ctm-dn-cx-ud-se-hr-se-br-se)) ) ); border-width: var( --_sf-hr-br-wh, var( --_ctm-mob-dn-cx-ud-se-hr-se-br-wh, var(--_ctm-tab-dn-cx-ud-se-hr-se-br-wh, var(--_ctm-dn-cx-ud-se-hr-se-br-wh)) ) ); } &[data-show-hover-unchecked-shadow="true"] { box-shadow: var( --_show-shadow-clear-all, var( --_ctm-mob-dn-cx-ud-se-hr-se-sw-ae, var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-ae, var(--_ctm-dn-cx-ud-se-hr-se-sw-ae)) ) var( --_ctm-mob-dn-cx-ud-se-hr-se-sw-br, var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-br, var(--_ctm-dn-cx-ud-se-hr-se-sw-br)) ) var( --_ctm-mob-dn-cx-ud-se-hr-se-sw-sd, var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-sd, var(--_ctm-dn-cx-ud-se-hr-se-sw-sd)) ) var( --_ctm-mob-dn-cx-ud-se-hr-se-sw-cr, var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-cr, var(--_ctm-dn-cx-ud-se-hr-se-sw-cr)) ) ); } background-color: var( --_ctm-mob-dn-cx-ud-se-hr-se-bd-cr, var(--_ctm-tab-dn-cx-ud-se-hr-se-bd-cr, var(--_ctm-dn-cx-ud-se-hr-se-bd-cr)) ); border-radius: var( --_ctm-mob-dn-cx-ud-se-hr-se-br-rs, var(--_ctm-tab-dn-cx-ud-se-hr-se-br-rs, var(--_ctm-dn-cx-ud-se-hr-se-br-rs)) ); box-shadow: var( --_show-shadow-clear-all, var( --_ctm-mob-dn-cx-ud-se-hr-se-sw-ae, var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-ae, var(--_ctm-dn-cx-ud-se-hr-se-sw-ae)) ) var( --_ctm-mob-dn-cx-ud-se-hr-se-sw-br, var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-br, var(--_ctm-dn-cx-ud-se-hr-se-sw-br)) ) var( --_ctm-mob-dn-cx-ud-se-hr-se-sw-sd, var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-sd, var(--_ctm-dn-cx-ud-se-hr-se-sw-sd)) ) var( --_ctm-mob-dn-cx-ud-se-hr-se-sw-cr, var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-cr, var(--_ctm-dn-cx-ud-se-hr-se-sw-cr)) ) ); } } // Only style this way if the input is a radio input[type="radio"] ~ .filter__checkmark { border-radius: 50%; } input[type="radio"]:checked ~ .filter__checkmark { // Checked carries its own Layout Options, falling back to the unchecked ones // so a radio sized on only one of the two sections stays round. width: prepareMediaVariable( --_ctm-dn-cx-cd-se-dt-se-wh, prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-wh, 18px) ); height: prepareMediaVariable( --_ctm-dn-cx-cd-se-dt-se-ht, prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-ht, 18px) ); padding: prepareMediaVariable( --_ctm-dn-cx-cd-se-dt-se-pg, prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-pg, 0) ); // border-color: #007bff; &[data-show-default-checked-shadow="true"] { box-shadow: var( --_show-shadow-clear-all, var( --_ctm-mob-dn-cx-cd-se-dt-se-sw-ae, var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-ae, var(--_ctm-dn-cx-cd-se-dt-se-sw-ae)) ) var( --_ctm-mob-dn-cx-cd-se-dt-se-sw-br, var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-br, var(--_ctm-dn-cx-cd-se-dt-se-sw-br)) ) var( --_ctm-mob-dn-cx-cd-se-dt-se-sw-sd, var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-sd, var(--_ctm-dn-cx-cd-se-dt-se-sw-sd)) ) var( --_ctm-mob-dn-cx-cd-se-dt-se-sw-cr, var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-cr, var(--_ctm-dn-cx-cd-se-dt-se-sw-cr)) ) ); } &[data-show-default-checked-border="true"] { border-color: var( --_sf-hr-br-cr, var( --_ctm-mob-dn-cx-cd-se-dt-se-br-cr, var(--_ctm-tab-dn-cx-cd-se-dt-se-br-cr, var(--_ctm-dn-cx-cd-se-dt-se-br-cr)) ) ); border-style: var( --_sf-hr-br-st, var( --_ctm-mob-dn-cx-cd-se-dt-se-br-se, var(--_ctm-tab-dn-cx-cd-se-dt-se-br-se, var(--_ctm-dn-cx-cd-se-dt-se-br-se)) ) ); border-width: var( --_sf-hr-br-wh, var( --_ctm-mob-dn-cx-cd-se-dt-se-br-wh, var(--_ctm-tab-dn-cx-cd-se-dt-se-br-wh, var(--_ctm-dn-cx-cd-se-dt-se-br-wh)) ) ); } &:hover { &[data-show-hover-checked-shadow="true"] { box-shadow: var( --_show-shadow-clear-all, var( --_ctm-mob-dn-cx-cd-se-hr-se-sw-ae, var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-ae, var(--_ctm-dn-cx-cd-se-hr-se-sw-ae)) ) var( --_ctm-mob-dn-cx-cd-se-hr-se-sw-br, var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-br, var(--_ctm-dn-cx-cd-se-hr-se-sw-br)) ) var( --_ctm-mob-dn-cx-cd-se-hr-se-sw-sd, var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-sd, var(--_ctm-dn-cx-cd-se-hr-se-sw-sd)) ) var( --_ctm-mob-dn-cx-cd-se-hr-se-sw-cr, var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-cr, var(--_ctm-dn-cx-cd-se-hr-se-sw-cr)) ) ); } &[data-show-hover-checked-border="true"] { border-color: var( --_sf-hr-br-cr, var( --_ctm-mob-dn-cx-cd-se-hr-se-br-cr, var(--_ctm-tab-dn-cx-cd-se-hr-se-br-cr, var(--_ctm-dn-cx-cd-se-hr-se-br-cr)) ) ); border-style: var( --_sf-hr-br-st, var( --_ctm-mob-dn-cx-cd-se-hr-se-br-se, var(--_ctm-tab-dn-cx-cd-se-hr-se-br-se, var(--_ctm-dn-cx-cd-se-hr-se-br-se)) ) ); border-width: var( --_sf-hr-br-wh, var( --_ctm-mob-dn-cx-cd-se-hr-se-br-wh, var(--_ctm-tab-dn-cx-cd-se-hr-se-br-wh, var(--_ctm-dn-cx-cd-se-hr-se-br-wh)) ) ); } button { display: flex; .default-icon { display: none; } .hover-icon { display: block; } svg { // Same `-se` / `in-se` mix-up as the checkbox copy above. width: prepareMediaVariable( --_ctm-dn-cx-cd-se-hr-se-in-se, prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-in-se, 13px) ); height: prepareMediaVariable( --_ctm-dn-cx-cd-se-hr-se-in-se, prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-in-se, 13px) ); path { // stroke: var(--_base-white); stroke: var( --_ctm-mob-dn-cx-cd-se-hr-se-in-c1, var(--_ctm-tab-dn-cx-cd-se-hr-se-in-c1, var(--_ctm-dn-cx-cd-se-hr-se-in-c1)) ); } } } } } input[type="radio"]:checked ~ .filter__checkmark::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 8px; width: 8px; border-radius: 50%; // background-color: #007bff; background-color: var( --_ctm-mob-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-tab-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-dn-cx-cd-se-dt-se-bd-cr)) ); &:hover { background-color: var( --_ctm-mob-dn-cx-cd-se-hr-se-bd-cr, var(--_ctm-tab-dn-cx-cd-se-hr-se-bd-cr, var(--_ctm-dn-cx-cd-se-hr-se-bd-cr)) ); } } // Optional for checkbox styling (square) input[type="checkbox"] ~ .filter__checkmark { border-radius: 4px; } // input[type="checkbox"]:checked ~ .filter__checkmark { // background-color: #007bff; // border-color: #007bff; // } // input[type="checkbox"]:checked ~ .filter__checkmark::after { // content: ""; // position: absolute; // left: 5px; // top: 1px; // width: 4px; // height: 10px; // border: solid #fff; // border-width: 0 2px 2px 0; // transform: rotate(45deg); // } .filter__option__value { margin-left: 8px; color: var( --_ctm-mob-dn-on-ls-cr-dc, var(--_ctm-tab-dn-on-ls-cr-dc, var(--_ctm-dn-on-ls-cr-dc)) ); font-family: var( --_sf-hr-ff, var( --_ctm-mob-dn-on-ls-ft-fy-dc, var(--_ctm-tab-dn-on-ls-ft-fy-dc, var(--_ctm-dn-on-ls-ft-fy-dc)) ) ); text-transform: var( --_sf-hr-tt-tm, var( --_ctm-mob-dn-on-ls-tt-tm-dc, var(--_ctm-tab-dn-on-ls-tt-tm-dc, var(--_ctm-dn-on-ls-tt-tm-dc)) ) ); word-wrap: var( --_sf-hr-wd-wp, var( --_ctm-mob-dn-on-ls-wd-wp-dc, var(--_ctm-tab-dn-on-ls-wd-wp-dc, var(--_ctm-dn-on-ls-wd-wp-dc)) ) ); word-break: var( --_sf-hr-wd-bk, var( --_ctm-mob-dn-on-ls-wd-bk-dc, var(--_ctm-tab-dn-on-ls-wd-bk-dc, var(--_ctm-dn-on-ls-wd-bk-dc)) ) ); font-size: var( --_ctm-mob-dn-on-ls-ft-se-dc, var(--_ctm-tab-dn-on-ls-ft-se-dc, var(--_ctm-dn-on-ls-ft-se-dc)) ); font-weight: var( --_ctm-mob-dn-on-ls-ft-wt-dc, var(--_ctm-tab-dn-on-ls-ft-wt-dc, var(--_ctm-dn-on-ls-ft-wt-dc)) ); font-style: var( --_ctm-mob-dn-on-ls-ft-se-ic-dc, var(--_ctm-tab-dn-on-ls-ft-se-ic-dc, var(--_ctm-dn-on-ls-ft-se-ic-dc)) ); text-align: var( --_ctm-mob-dn-on-ls-tt-an-dc, var(--_ctm-tab-dn-on-ls-tt-an-dc, var(--_ctm-dn-on-ls-tt-an-dc)) ); letter-spacing: var( --_ctm-mob-dn-on-ls-lr-sg-dc, var(--_ctm-tab-dn-on-ls-lr-sg-dc, var(--_ctm-dn-on-ls-lr-sg-dc)) ); line-height: var( --_ctm-mob-dn-on-ls-le-ht-dc, var(--_ctm-tab-dn-on-ls-le-ht-dc, var(--_ctm-dn-on-ls-le-ht-dc)) ); text-decoration: var( --_ctm-mob-dn-on-ls-ue-dc, var(--_ctm-tab-dn-on-ls-ue-dc, var(--_ctm-dn-on-ls-ue-dc)) ); } } // Multi Range Slider Starts .double-slider-box { border-radius: 10px; // padding: 20px; width: 100%; // max-width: 300px; padding-inline: 8px; // margin: auto; } .range-slider { position: relative; width: 100%; height: 5px; // The 30px bottom used to reserve room for the two values, which hung off the // track absolutely. They sit under it in normal flow now, so the track only // needs its own breathing room. margin: 16px 0 0 0; // background-color: var(--_primary-400); // background: linear-gradient( // to right, // var( // --_ctm-mob-dn-cx-ud-se-dt-se-br-cr, // var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr)) // ) // 0%, // var( // --_ctm-mob-dn-cx-ud-se-dt-se-br-cr, // var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr)) // ) // var(--left), // var( // --_ctm-mob-dn-cx-cd-se-dt-se-bd-cr, // var(--_ctm-tab-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-dn-cx-cd-se-dt-se-bd-cr)) // ) // var(--left), // var( // --_ctm-mob-dn-cx-cd-se-dt-se-bd-cr, // var(--_ctm-tab-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-dn-cx-cd-se-dt-se-bd-cr)) // ) // var(--right), // var( // --_ctm-mob-dn-cx-ud-se-dt-se-br-cr, // var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr)) // ) // var(--right), // var( // --_ctm-mob-dn-cx-ud-se-dt-se-br-cr, // var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr, #ccc)) // ) // 100% // ); background: linear-gradient( to right, var( --_ctm-mob-dn-pe-re-sr-tk-dt-se-bd-cr, var(--_ctm-tab-dn-pe-re-sr-tk-dt-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr)) ) 0%, var( --_ctm-mob-dn-pe-re-sr-tk-dt-se-bd-cr, var(--_ctm-tab-dn-pe-re-sr-tk-dt-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr)) ) var(--left), var( --_ctm-mob-dn-pe-re-sr-tk-sd-se-bd-cr, var(--_ctm-tab-dn-pe-re-sr-tk-sd-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-sd-se-bd-cr)) ) var(--left), var( --_ctm-mob-dn-pe-re-sr-tk-sd-se-bd-cr, var(--_ctm-tab-dn-pe-re-sr-tk-sd-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-sd-se-bd-cr)) ) var(--right), var( --_ctm-mob-dn-pe-re-sr-tk-dt-se-bd-cr, var(--_ctm-tab-dn-pe-re-sr-tk-dt-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr)) ) var(--right), var( --_ctm-mob-dn-pe-re-sr-tk-dt-se-bd-cr, var( --_ctm-tab-dn-pe-re-sr-tk-dt-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr, #ccc) ) ) 100% ); // background-color: var( // --_sf-hr-bd-cr, // #{prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr)} // ); // border-radius: 5px; border-radius: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-br-rs)); border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-br-cr)); border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-br-wh)); border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-br-se)); box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-sw-cr)); } .slider-track { height: 100%; position: absolute; background-color: var(--_primary-400); left: 0; right: 100%; border-radius: 5px; } .range-slider input[type="range"] { position: absolute; width: 100%; top: 1px; transform: translateY(-50%); background: none; pointer-events: none; appearance: none; height: 5px; } input[type="range"]::-webkit-slider-thumb { height: 20px; width: 20px; // border-radius: 50%; // border: 3px solid #fff; border-radius: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-br-rs)); border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-br-cr)); border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-br-wh)); border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-br-se)); background: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-bd-cr)); pointer-events: auto; appearance: none; cursor: pointer; // box-shadow: 0 0.125rem 0.5625rem -0.125rem rgba(0, 0, 0, 0.5); box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-sw-cr)); position: relative; z-index: 2; /* Ensure thumbs appear above the track */ transition: background-color 400ms, border-color 400ms ease-in-out; &:hover { border: 1px solid var(--_thm-cs-be-se-1); } } input[type="range"]::-moz-range-thumb { height: 25px; width: 25px; border-radius: 50%; border: 3px solid #fff; background: var(--_base-white); pointer-events: auto; cursor: pointer; box-shadow: 0 0.125rem 0.5625rem -0.125rem rgba(0, 0, 0, 0.5); position: relative; z-index: 2; } .input-box { display: flex; justify-content: space-between; width: 100%; } .min-box, .max-box { width: 50%; } .min-box { margin-right: 10px; } .max-box input { float: right; } input[type="number"] { width: 90px; padding: 10px; border: 1px solid var(--_thm-cs-be-se-3); border-radius: 5px; text-align: center; } // The two price values under the slider. They used to be absolutely positioned // off the track at hardcoded offsets (left: 42px / right: 45px with a 50% // translate), so at narrow widths they drifted over each other and over the // thumbs, and neither sat at its end of the track. They are a flex row now, one // value pinned to each end. .range-values { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; margin-top: 8px; } .min-tooltip, .max-tooltip { display: flex; align-items: center; font-size: 12px; color: var(--_thm-cs-be-se-1); border: 1px solid var(--_thm-cs-be-se-3); border-radius: 5px; white-space: nowrap; padding-inline: 15px; span { margin-right: 4px; svg { path { stroke: var(--_thm-cs-be-se-1); } } } input { padding-left: 0px !important; text-align: left !important; } &:focus-within { outline: 2px solid var(--_gray-200); border: 1px solid var(--_gray-300); } } // The max value reads right-to-left against the end of the track. .max-tooltip { justify-content: flex-end; } .price-range-container { width: 100%; margin: auto; padding: 10px; } .price-range-inputs { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .price-range-min, .price-range-max { flex: 1; display: flex; flex-direction: column; align-items: flex-start; } .price-range-label { font-size: 12px; font-weight: 500; color: #333; margin-bottom: 6px; } .price-range-input-wrapper { display: flex; align-items: center; width: 100%; &.cst_price { width: 100%; padding: 8px; // border: 1px solid var(--_thm-cs-be-se-3); border-radius: 4px; font-size: 14px; color: #333; background-color: #fff; input { width: 100%; padding: 0px; border: none; text-align: start; } } } .price-range-min span, .price-range-max span { margin-right: 8px; font-size: 14px; color: #333; font-weight: 500; } .price-range-separator { font-size: 14px; color: #333; font-weight: 500; } .price-range-min-input, .price-range-max-input { &:not(.cst_price *) { width: 100%; padding: 8px; border: 1px solid var(--_thm-cs-be-se-3); border-radius: 4px; text-align: center; font-size: 14px; color: #333; background-color: #fff; } } .price-range-min-input:focus, .price-range-max-input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2); } .price-range-min-input::placeholder, .price-range-max-input::placeholder { color: #9ca3af; } /* Chrome, Safari, Edge, and Opera */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type="number"] { -moz-appearance: textfield; } // Multi Range Slider Ends // Button Group Starts .button_main { border: 1px solid var(--_gray-600); cursor: pointer; .btn__group { display: flex; justify-content: center; align-items: center; gap: 8px; color: #fff; font-weight: 600; font-size: 16px; background-color: #000080; padding: 10px 20px; button { svg { path { stroke: #fff; } } } } } // Button Group Ends } } }