@use "sass:map"; @use "sass:list"; @use "./functions.scss" as *; $resizerId: "[data-cms-tool='cms-element-resizer']"; $resizeActive: '[data-cms-element-resizer="true"]'; $overflowSelector: ".flex__overflow"; // Image Position stores the same compass values the image element uses (they map to // Sirv's `canvas.position`); these are their CSS object-position equivalents. $imagePositions: ( "north": center top, "northeast": right top, "northwest": left top, "center": center center, "south": center bottom, "southeast": right bottom, "southwest": left bottom, "east": right center, "west": left center, ); // `dividerGapOffset` / `dividerGapReserve` moved to functions.scss — every widget draws // its dividers as absolutely positioned pseudo-elements and hit the same overlap. [data-div-type="element"] { &[data-element-type="userElements"] { // width: var( // --_sf-mob-el-wh-st-mx, // var( // --_sf-tab-el-wh-st-mx, // var( // --_sf-el-wh-st-mx, // calc( // 1% * // var( // --_ctm-mob-bun-ele-nw-wh-vl, // var(--_ctm-tab-bun-ele-nw-wh-vl, var(--_ctm-bun-ele-nw-wh-vl, var(--_sf-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-bun-lt-mn, var( --_ctm-tab-bun-lt-mn, var(--_ctm-bun-lt-mn, var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)))) ) ); & > div { &.wrapper { width: 100%; } } .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; display: flex; flex-direction: row; align-items: center; gap: prepareMediaVariable(--_ctm-lt-qa-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)) ) + 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%; white-space: nowrap; position: relative; } } } &: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))) ); } } .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% - 60px); 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%); } @media (max-width: 1024px) { .embla__viewport { width: calc(100% - 40px); } } } &[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%; } } } } } .user__element__container { display: flex; flex-direction: column; width: 100%; gap: prepareMediaVariable(--_ctm-lt-im-sg); background-color: var( --_ctm-mob-dn-wt-se-bd-cr, var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr)) ); border-color: var( --_ctm-mob-dn-wt-se-br-cr, var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr)) ); border-style: var( --_ctm-mob-dn-wt-se-br-se, var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se)) ); border-width: var( --_ctm-mob-dn-wt-se-br-wh, var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh)) ); border-radius: var( --_ctm-mob-dn-wt-se-br-rs, var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs)) ); box-shadow: var( --_show-shadow, var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae))) var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br))) var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd))) var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr))) ); padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg))); .user__element__item { position: relative; } &[data-display-type="Vertical"] { &[data-show-divider="true"] { .user__element__item:not(:last-child) { @include dividerGapReserve(--_ctm-dn-wt-se-dr-wt); } .user__element__item:not(:last-child)::before { content: ""; position: absolute; left: 0; right: 0; bottom: dividerGapOffset(--_ctm-lt-im-sg, --_ctm-dn-wt-se-dr-wt); height: prepareMediaVariable(--_ctm-dn-wt-se-dr-wt); background-color: prepareMediaVariable(--_ctm-dn-wt-se-dr-cr); } } .user_elements_user_info_wrapper { flex-direction: column; align-items: flex-start; position: relative; .user_elements_user_data_wrapper { gap: calc(prepareMediaVariable(--_ctm-dn-ur-io-dn-fl-ad-oy-im-gp) / 2); display: flex; width: 100%; // max-height: 250px; flex-direction: column; white-space: nowrap; align-items: center; } } .user_elements_quota_wrapper { flex-direction: column; align-items: flex-start; position: relative; } .user_elements_allowance_wrapper { flex-direction: column; align-items: flex-start; position: relative; } .user_elements_user_info_secondary_wrapper { flex-direction: column; align-items: flex-start; position: relative; .secondary_vertical_scroll_wrapper { flex-direction: column; width: 100%; gap: prepareMediaVariable(--_ctm-lt-ur-io-sy-im-sg); .child { width: 100%; } } } &[data-content-alignment="Horizontal"] { .user_elements_user_info_wrapper { flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; .user_elements_user_name_wrapper { width: unset; align-items: center; } .user_elements_user_data_wrapper { // max-height: 250px; flex-direction: row; width: unset; flex-wrap: wrap; } @media (max-width: 767px) { .user_elements_user_data_wrapper { flex-direction: column; align-items: flex-start; } } } .user_elements_quota_wrapper { flex-direction: row; align-items: center; flex-wrap: nowrap; .quota_label_wrapper { flex-shrink: 0; } .user_elements_user_name_wrapper { flex-direction: row; white-space: nowrap; } .quote_vertical_scroll_wrapper { flex-direction: row; flex-grow: 1; width: unset; min-width: 0; } @media (max-width: 1024px) { .quote_vertical_scroll_wrapper { width: 100%; } } // This row divider was drawn unconditionally, so the section's Divider // toggle had nothing to switch off in the maximized layout. &[data-show-divider="true"] { .embla__slide:not(:last-child) { @include dividerGapReserve(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt, right); } .embla__slide:not(:last-child)::before { content: ""; position: absolute; background-color: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-dr-cr); right: dividerGapOffset(--_ctm-lt-qa-im-sg, --_ctm-dn-qa-dn-fl-ad-oy-dr-wt); height: 100%; width: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt); } } .quota_label { white-space: nowrap; } .quote_info_wrapper { justify-content: flex-start; align-items: center; } .embla__container { gap: prepareMediaVariable(--_ctm-lt-qa-im-sg); } } .user_elements_allowance_wrapper { flex-direction: row; flex-wrap: nowrap; align-items: center; .allowance_label_wrapper { flex-shrink: 0; } // Same: gated on the section's own Divider toggle. &[data-show-divider="true"] { .embla__slide:not(:last-child) { @include dividerGapReserve(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt, right); } .embla__slide:not(:last-child)::before { content: ""; position: absolute; background-color: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-dr-cr); right: dividerGapOffset(--_ctm-lt-ae-im-sg, --_ctm-dn-ae-dn-fl-ad-oy-dr-wt); height: 100%; // Was reading the quota weight, so Allowance > Divider Weight did nothing // and the quota's weight drove this divider instead. width: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt); left: unset; } } .allowance_vertical_scroll_wrapper { width: unset; flex-grow: 1; min-width: 0; } @media (max-width: 1024px) { .allowance_vertical_scroll_wrapper { width: 100%; } } .embla__container { gap: prepareMediaVariable(--_ctm-lt-ae-im-sg); } } .user_elements_user_info_secondary_wrapper { flex-direction: row; justify-content: space-between; align-items: center; .order_wrapper { justify-content: flex-start; } } .secondary_vertical_scroll_wrapper { flex-direction: row; width: unset; justify-content: space-between; align-items: center; width: 100%; gap: prepareMediaVariable(--_ctm-lt-ur-io-sy-im-sg); @media (max-width: 768px) { flex-wrap: wrap; } .child { flex-direction: column; justify-content: flex-start; width: 100%; // A wrapping value (a long shipping address with Text Overflow off) used to spill // out of this cell and past the element, because the cell was a fixed 44px. A // floor keeps the short cells aligned and lets a tall one grow the section - // every ancestor up to the element root is already height:auto. min-height: 44px; } } @media (max-width: 1024px) { .user_elements_user_info_wrapper { flex-direction: column; align-items: flex-start; } .user_elements_quota_wrapper { flex-direction: column; align-items: flex-start; } .user_elements_allowance_wrapper { flex-direction: column; align-items: flex-start; } } } } .user__quota__sltns { display: flex; gap: 48px; margin-left: 32px; .quota__dtls { display: flex; align-items: center; gap: 8px; .quota__name { display: flex; flex-direction: column; // align-items: center; gap: 12px; } .quota__balance { display: flex; gap: 5px; } .back_slash { color: var(--_gray-300); position: relative; top: -6px; } } } &[data-display-type="Horizontal"] { flex-direction: row; .user__element__item { width: 100%; flex-grow: 1; } .user__element__item { min-width: 200px; } &[data-show-divider="true"] { .user__element__item:not(:last-child) { @include dividerGapReserve(--_ctm-dn-wt-se-dr-wt, right); } .user__element__item:not(:last-child)::before { content: ""; position: absolute; top: 0; bottom: 0; right: dividerGapOffset(--_ctm-lt-im-sg, --_ctm-dn-wt-se-dr-wt); width: prepareMediaVariable(--_ctm-dn-wt-se-dr-wt); background-color: prepareMediaVariable(--_ctm-dn-wt-se-dr-cr); } } } // without conditions .user_elements_user_info_wrapper { display: flex; flex-direction: column; background-color: var(--_ctm-dn-ur-io-dn-fl-ad-oy-bd-cr); border-color: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-cr); border-radius: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-rs); border-style: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-se); border-width: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-wh); box-shadow: var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-br) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-cr); gap: prepareMediaVariable(--_ctm-lt-ur-io-im-sg); padding: prepareMediaVariable(--_ctm-dn-ur-io-dn-fl-ad-oy-pg); .user_elements_user_name_wrapper { display: flex; gap: 6px; // Keeps the avatar and the trailing icon on the name's centre line instead of // stretching them to the row height. align-items: center; &[data-has-link="true"] { cursor: pointer; &:hover { color: var(--_primary-500); } } .user_elements_user_name { display: flex; color: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-fy); word-wrap: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-wd-bk); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-ue); text-transform: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-tt-tm); } // The user's avatar, driven by its own User Logo design section. .user_elements_user_logo { width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-wh); height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-ht); flex-shrink: 0; object-fit: cover; // Padding is part of the configured size rather than added on top of it. box-sizing: border-box; padding: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-pg); background-color: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-bd-cr); border-color: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-br-cr); border-style: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-br-se); border-width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-br-wh); border-radius: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-br-rs); box-shadow: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-sw-ae) prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-sw-br) prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-sw-sd) prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-sw-cr); // Which part of the picture survives the crop to the configured box. The // control stores the image element's compass values, so they are mapped to // their CSS equivalents here. @each $point, $position in $imagePositions { &[data-object-position="#{$point}"] { object-position: $position; } } // Mirroring. Both axes are separate attributes, so the combined case needs // its own rule or the second transform would replace the first. &[data-flip-x="true"] { transform: scaleX(-1); } &[data-flip-y="true"] { transform: scaleY(-1); } &[data-flip-x="true"][data-flip-y="true"] { transform: scale(-1, -1); } } .icon { cursor: pointer; svg { width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-in-se); height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-in-se); path { stroke: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-in-c1); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-se-wh, 1.25); } } } } .user_elements_user_data_wrapper { .user_elements_user_data { display: flex; align-items: center; gap: 6px; span.icon { display: var(--_d-flex); align-items: center; } .user_elements_user_id { display: flex; gap: 6px; align-items: center; color: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-ft-fy); word-wrap: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-wd-bk); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-ue); text-transform: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-tt-tm); .icon { cursor: pointer; svg { width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-in-se); height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-in-se); path { stroke: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-in-c1); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-se-wh, 1.25); } } } } .user_elements_user_email { display: flex; gap: 6px; align-items: center; color: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-ft-fy); word-wrap: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-wd-bk); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-ue); text-transform: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-tt-tm); .icon { cursor: pointer; svg { width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-in-se); height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-in-se); path { stroke: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-in-c1); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-se-wh, 1.25); } } } } .user_elements_user_phone { display: flex; gap: 6px; align-items: center; color: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-fy); word-wrap: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-wd-bk); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-ue); text-transform: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-tt-tm); .icon { cursor: pointer; svg { width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-in-se); height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-in-se); path { stroke: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-in-c1); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-se-wh, 1.25); } } } } } } .child { position: relative; } &[data-show-divider="true"] { .child:not(:last-child)::after { content: ""; margin-left: calc(prepareMediaVariable(--_ctm-dn-ur-io-dn-fl-ad-oy-im-gp) / 2); // margin-top: 3px; // The divider is a dot, so Divider Weight is its diameter. Both sizes were // fixed here, which is why the Divider Weight control did nothing. width: prepareMediaVariable(--_ctm-dn-ur-io-dn-fl-ad-oy-dr-wt); height: prepareMediaVariable(--_ctm-dn-ur-io-dn-fl-ad-oy-dr-wt); flex-shrink: 0; background-color: prepareMediaVariable(--_ctm-dn-ur-io-dn-fl-ad-oy-dr-cr); margin-block: auto; // Divider Shape. Round is the shape the widget has always used, so it is // what an element without the setting still gets. border-radius: 50%; } // Divider Shape: a plain rule spanning the row instead of a dot. Weight is // its thickness, so only the cross-axis size changes. &[data-divider-shape="Divider"] .child:not(:last-child)::after { height: auto; align-self: stretch; margin-block: 0; border-radius: 0; } // .user_elements_user_name_wrapper { // width: 100%; // position: relative; // &::after { // content: ""; // position: absolute; // left: 0; // right: 0; // bottom: calc( // -1 * // ( // var( // --_ctm-mob-lt-ur-io-im-sg, // var(--_ctm-tab-lt-ur-io-im-sg, var(--_ctm-lt-ur-io-im-sg)) // ) / // 2 // ) // ); // height: var( // --_ctm-mob-dn-ur-io-dn-fl-ad-oy-dr-wt, // var(--_ctm-tab-dn-ur-io-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-ur-io-dn-fl-ad-oy-dr-wt)) // ); // background-color: var( // --_ctm-mob-dn-ur-io-dn-fl-ad-oy-dr-cr, // var(--_ctm-tab-dn-ur-io-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-ur-io-dn-fl-ad-oy-dr-cr)) // ); // } // } } } .user_elements_quota_wrapper { display: flex; flex-direction: column; width: 100%; background-color: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-bd-cr); border-color: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-br-cr); border-radius: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-br-rs); border-style: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-br-se); border-width: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-br-wh); box-shadow: var(--_ctm-dn-qa-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-br) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-cr); gap: prepareMediaVariable(--_ctm-lt-qa-dn-sg); .quota_label_wrapper { display: flex; flex-direction: column; min-width: 109px; // Heading font size must not size the dropdown. // This wrapper is a flex column, so its width comes from its widest child — the // heading — and a stretched dropdown grew with it every time the heading's font // size went up. Size the dropdown to its own content and cap it at the wrapper so // a long profile name still cannot overflow. .language__conatiner { align-self: flex-start; max-width: 100%; } gap: 4px; .quota_label { display: flex; color: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-wd-bk); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-ue); } .quota_single_profile_name { display: flex; align-items: center; color: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ue); } } .quote_item_wrapper { // Set only on the storefront, where clicking a quota row selects that // allocation and its profile. Builder/preview rows are dummy data. &[data-is-clickable="true"] { cursor: pointer; } display: flex; flex-direction: row; gap: prepareMediaVariable(--_ctm-lt-qa-im-sg); .quote_info_wrapper { display: flex; gap: 12px; justify-content: space-between; // Flex items default to min-width:auto and refuse to shrink below their text, // so a long quota name pushed the row out of the widget instead of wrapping // inside it. min-width: 0; .quota_name_wrapper { display: flex; flex-direction: column; min-width: 0; // gap: 6px; .quota_name { display: flex; color: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ue); } .quota_expiry { display: flex; color: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-ue); } } .quota_inventory_parent { display: flex; min-width: 0; } .hilighted { color: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-ue); } .quota_inventory { display: flex; justify-content: center; align-items: center; margin-top: 6px; color: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-ue); } } .quota_divider { content: ""; height: auto; width: 1px; background-color: #d0d5dd; } } &[data-show-divider="true"] { .quote_item_wrapper:not(:last-child) { @include dividerGapReserve(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt); } .quote_item_wrapper:not(:last-child)::before { content: ""; position: absolute; left: 0; right: 0; bottom: dividerGapOffset(--_ctm-lt-qa-im-sg, --_ctm-dn-qa-dn-fl-ad-oy-dr-wt); height: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt); background-color: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-dr-cr); } &[data-content-alignment="Vertical"] { .quota_label_wrapper { width: 100%; position: relative; @include dividerGapReserve(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt); &::after { content: ""; position: absolute; left: 0; right: 0; bottom: dividerGapOffset(--_ctm-lt-qa-im-sg, --_ctm-dn-qa-dn-fl-ad-oy-dr-wt); height: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt); background-color: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-dr-cr); } } } } .quote_vertical_scroll_wrap { height: auto; display: flex; width: 100%; flex-direction: column; gap: 16px; .quote_item_wrapper { justify-content: space-between; width: 100%; align-items: center; gap: 16px; align-items: flex-start; flex-direction: column; .quota_divider { height: 1px; width: 100%; } } } .quote_vertical_scroll_wrapper { overflow-y: auto; gap: prepareMediaVariable(--_ctm-lt-qa-im-sg); display: flex; width: 100%; // max-height: 250px; flex-direction: column; .quote_item_wrapper { flex-direction: column; position: relative; .quota_divider { width: 100%; height: 1px; } } } } .user_elements_allowance_wrapper { display: flex; flex-direction: column; width: 100%; background-color: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-bd-cr); border-color: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-br-cr); border-radius: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-br-rs); border-style: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-br-se); border-width: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-br-wh); box-shadow: var(--_ctm-dn-ae-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-br) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-cr); gap: prepareMediaVariable(--_ctm-lt-ae-dn-sg); .allowance_label_wrapper { display: flex; flex-direction: column; min-width: 109px; // Heading font size must not size the dropdown. // This wrapper is a flex column, so its width comes from its widest child — the // heading — and a stretched dropdown grew with it every time the heading's font // size went up. Size the dropdown to its own content and cap it at the wrapper so // a long profile name still cannot overflow. .language__conatiner { align-self: flex-start; max-width: 100%; } // align-items: center; gap: 4px; .allowance_label { display: flex; white-space: nowrap; color: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-wd-bk); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-ae-dn-hg-ne-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-ue); } .allowance_single_program_name { display: flex; align-items: center; color: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ue); } } .allowance_upfront_wrapper { display: flex; gap: prepareMediaVariable(--_ctm-lt-qa-im-sg); flex-wrap: wrap; } .allowance_item_wrapper { display: flex; flex-direction: row; gap: prepareMediaVariable(--_ctm-lt-qa-im-sg); .allowance_info_wrapper { display: flex; gap: 12px; // Same as the quota rows: without this the name refuses to shrink and // overflows the widget. min-width: 0; .allowance_name_wrapper { display: flex; flex-direction: column; min-width: 0; gap: 6px; .allowance_name { display: flex; color: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ue); } .allowance_expiry { display: flex; color: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-ue); } } .allowance_inventory { display: flex; justify-content: center; align-items: center; color: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-ue); } } } &[data-show-divider="true"] { .allowance_item_wrapper:not(:last-child) { @include dividerGapReserve(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt); } .allowance_item_wrapper:not(:last-child)::before { content: ""; position: absolute; left: 0; right: 0; bottom: dividerGapOffset(--_ctm-lt-ae-im-sg, --_ctm-dn-ae-dn-fl-ad-oy-dr-wt); height: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt); background-color: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-dr-cr); } &[data-content-alignment="Vertical"] { .allowance_label_wrapper { width: 100%; position: relative; gap: 10px; @include dividerGapReserve(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt); &::after { content: ""; position: absolute; left: 0; right: 0; bottom: dividerGapOffset(--_ctm-lt-ae-im-sg, --_ctm-dn-ae-dn-fl-ad-oy-dr-wt); height: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt); background-color: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-dr-cr); } } } } .allowance_vertical_scroll_wrapper { overflow-y: auto; gap: prepareMediaVariable(--_ctm-lt-ae-im-sg); display: flex; width: 100%; flex-direction: column; .allowance_item_wrapper { flex-direction: column; position: relative; .allowance_info_wrapper { justify-content: space-between; } } } .allowance_vertical_scroll_wrap { gap: var(--_ctm-lt-ae-im-sg); display: flex; width: 100%; flex-direction: column; .allowance_item_wrapper { flex-direction: column; .allowance_info_wrapper { justify-content: space-between; } } } } .user_elements_user_info_secondary_wrapper { display: flex; flex-direction: column; width: 100%; background-color: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-bd-cr); border-color: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-cr); border-radius: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-rs); border-style: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-se); border-width: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-wh); box-shadow: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-br) var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-cr); gap: prepareMediaVariable(--_ctm-lt-ur-io-sy-im-sg); .secondary_vertical_scroll_wrapper { // overflow-y: auto; gap: prepareMediaVariable(--_ctm-lt-ur-io-sy-im-sg); display: flex; width: 100%; // max-height: 250px; flex-direction: column; .secondary_item_wrapper { flex-direction: column; position: relative; .quota_divider { width: 100%; height: 1px; } } } .secondary_label { color: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-fy); word-wrap: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ue); text-transform: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-tt-tm); &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } } .label { color: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-fy); word-wrap: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ue); text-transform: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-tt-tm); &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } } .value { color: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy); word-wrap: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue); text-transform: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-tm); &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } } .secondary_info_divider { content: ""; height: 3rem; width: 1px; background-color: #d0d5dd; } .active_orders_wrapper { display: flex; flex-direction: column; gap: 4px; justify-content: flex-start; .order_wrapper { display: flex; gap: 6px; justify-content: right; .remaining_order { color: #243dc6; font-family: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue); } } } .payment_methods_wrapper { display: flex; flex-direction: column; gap: 4px; justify-content: flex-start; .payment_wrapper { display: flex; gap: 6px; .remaining_payment { color: #243dc6; font-family: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue); } } } .my_cart_wrapper { display: flex; flex-direction: row; gap: 16px; .my_cart_info_wrapper { display: flex; flex-direction: column; gap: 4px; white-space: nowrap; } .my_cart_icon_wrappers { position: relative; display: inline-block; flex-shrink: 0; width: var( --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se)) ); height: var( --_ctm-mob-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se)) ); margin-right: 6px; .cart__quantity { position: absolute; top: -4px; right: -6px; border-radius: 50px; min-width: calc( var( --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se, var( --_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se) ) ) * 0.5 ); height: calc( var( --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se, var( --_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se) ) ) * 0.5 ); width: auto; padding-inline: 4px; box-sizing: border-box; text-align: center; display: flex; align-items: center; justify-content: center; white-space: nowrap; } // .cart__quantity { // position: absolute; // top: 0; // right: 0; // // background: yellow; // // padding: 2px; // // border-radius: 5px; // // padding-inline: 5px; // font-size: 12px; // transform: translate( // 0%, // calc( // var( // --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se, // var( // --_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, // var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se) // ) // ) * // 0.1 // ) // ); // } .cart__quantity { background-color: var( --_ctm-mob-dn-ur-sy-io-dn-ct-ct-bd-cr, var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-bd-cr, var(--_ctm-dn-ur-sy-io-dn-ct-ct-bd-cr)) ); border-color: var( --_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-cr, var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-cr, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-cr)) ); border-style: var( --_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-se, var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-se, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-se)) ); border-width: var( --_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-wh, var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-wh, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-wh)) ); border-radius: var( --_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-rs, var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-rs, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-rs)) ); box-shadow: var( --_show-shadow, var( --_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-ae, var( --_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-ae, var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-ae) ) ) var( --_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-br, var( --_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-br, var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-br) ) ) var( --_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-sd, var( --_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-sd, var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-sd) ) ) var( --_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-cr, var( --_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-cr, var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-cr) ) ) ); white-space: nowrap; line-height: 1; width: auto; padding-inline: 4px; box-sizing: border-box; color: var( --_ctm-mob-dn-ur-sy-io-dn-ct-ct-cr, var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-cr, var(--_ctm-dn-ur-sy-io-dn-ct-ct-cr)) ); font-family: var( --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-fy, var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-fy, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-fy)) ); text-transform: var( --_ctm-mob-dn-ur-sy-io-dn-ct-ct-tt-tm, var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-tt-tm, var(--_ctm-dn-ur-sy-io-dn-ct-ct-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-ur-sy-io-dn-ct-ct-wd-wp, var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-wd-wp, var(--_ctm-dn-ur-sy-io-dn-ct-ct-wd-wp)) ); word-break: var( --_ctm-mob-dn-ur-sy-io-dn-ct-ct-wd-bk, var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-wd-bk, var(--_ctm-dn-ur-sy-io-dn-ct-ct-wd-bk)) ); font-size: calc( var( --_ctm-mob-dn-ur-sy-io-dn-ct-in-in-se, var( --_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se) ) ) / 3 ); // font-size: var( // --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-se, // var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-se, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-se)) // ); font-weight: var( --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-wt, var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-wt, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-wt)) ); font-style: var( --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-se-ic, var( --_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-se-ic, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-se-ic) ) ); text-align: var( --_ctm-mob-dn-ur-sy-io-dn-ct-ct-tt-an, var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-tt-an, var(--_ctm-dn-ur-sy-io-dn-ct-ct-tt-an)) ); letter-spacing: var( --_ctm-mob-dn-ur-sy-io-dn-ct-ct-lr-sg, var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-lr-sg, var(--_ctm-dn-ur-sy-io-dn-ct-ct-lr-sg)) ); // line-height: var( // --_ctm-mob-dn-ur-sy-io-dn-ct-ct-le-ht, // var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-le-ht, var(--_ctm-dn-ur-sy-io-dn-ct-ct-le-ht)) // ); text-decoration: var( --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ue, var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ue, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ue)) ); } .cart__icon { display: var(--_sf-show-icon-ff, flex); svg { width: var( --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se)) ); height: var( --_ctm-mob-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se)) ); path { stroke: var( --_ctm-mob-dn-ur-sy-io-dn-ct-in-in-c1, var( --_ctm-tab-dn-ur-sy-io-dn-ct-in-in-c1, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-c1) ) ); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ct-in-se-wh, 1.25); } } } } } .child { position: relative; } &[data-show-divider="true"] { .child:not(:last-child) { @include dividerGapReserve(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt); } .child:not(:last-child)::before { content: ""; position: absolute; left: 0; right: 0; bottom: dividerGapOffset( --_ctm-lt-ur-io-sy-im-sg, --_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt ); height: var( --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt, var( --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt) ) ); background-color: var( --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-cr, var( --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-cr) ) ); } &[data-content-alignment="Horizontal"] { // Side by side, so the thickness has to be reserved horizontally instead. .child:not(:last-child) { margin-bottom: 0; @include dividerGapReserve(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt, right); } .child:not(:last-child)::before { right: dividerGapOffset( --_ctm-lt-ur-io-sy-im-sg, --_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt ); bottom: unset; top: 0; width: var( --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt, var( --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt) ) ); height: 100%; left: unset; } @media (max-width: 768px) { // Back to stacked below the breakpoint, so the reserve goes back under the item. .child:not(:last-child) { margin-right: 0; @include dividerGapReserve(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt); } .child:not(:last-child)::before { top: unset; left: 0; right: 0; bottom: dividerGapOffset( --_ctm-lt-ur-io-sy-im-sg, --_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt ); height: var( --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt, var( --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt) ) ); width: unset; } } } &[data-content-alignment="Vertical"] { .secondary_label_wrapper { width: 100%; position: relative; @include dividerGapReserve(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt); &::after { content: ""; position: absolute; left: 0; right: 0; bottom: dividerGapOffset( --_ctm-lt-ur-io-sy-im-sg, --_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt ); height: var( --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt, var( --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt) ) ); background-color: var( --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-cr, var( --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-cr) ) ); } } } } .secondary_info_divider { height: 1px; width: 100%; } .active_orders_wrapper { flex-direction: row; justify-content: space-between; padding-right: 16px; } .active_orders_wrapper > * { box-sizing: border-box; width: 100%; // line-height: 125%; } .payment_methods_wrapper { flex-direction: row; justify-content: space-between; } .my_cart_wrapper { flex-direction: row; align-items: start; } .my_cart_container { display: flex; align-items: center; gap: 16px; } .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: 200px; z-index: 1000; left: 40px; 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; } } } } // for dropdown .language__conatiner { background-color: var( --_ctm-mob-dn-dn-se-wt-se-bd-cr, var(--_ctm-tab-dn-dn-se-wt-se-bd-cr, var(--_ctm-dn-dn-se-wt-se-bd-cr)) ); border-color: var( --_ctm-mob-dn-dn-se-wt-se-br-cr, var(--_ctm-tab-dn-dn-se-wt-se-br-cr, var(--_ctm-dn-dn-se-wt-se-br-cr)) ); border-style: var( --_ctm-mob-dn-dn-se-wt-se-br-se, var(--_ctm-tab-dn-dn-se-wt-se-br-se, var(--_ctm-dn-dn-se-wt-se-br-se)) ); // The tablet name carried a doubled `dn-se-`, so tablet fell through to desktop. border-width: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-br-wh); // border: 1px solid // var( // --_ctm-mob-dn-dn-se-wt-se-br-cr, // var(--_ctm-tab-dn-dn-se-wt-se-br-cr, var(--_ctm-dn-dn-se-wt-se-br-cr)) // ); border-radius: var( --_ctm-mob-dn-dn-se-wt-se-br-rs, var(--_ctm-tab-dn-dn-se-wt-se-br-rs, var(--_ctm-dn-dn-se-wt-se-br-rs)) ); box-shadow: var( --_show-shadow, var( --_ctm-mob-dn-dn-se-wt-se-sw-ae, var(--_ctm-tab-dn-dn-se-wt-se-sw-ae, var(--_ctm-dn-dn-se-wt-se-sw-ae)) ) var( --_ctm-mob-dn-dn-se-wt-se-sw-br, var(--_ctm-tab-dn-dn-se-wt-se-sw-br, var(--_ctm-dn-dn-se-wt-se-sw-br)) ) var( --_ctm-mob-dn-dn-se-wt-se-sw-sd, var(--_ctm-tab-dn-dn-se-wt-se-sw-sd, var(--_ctm-dn-dn-se-wt-se-sw-sd)) ) var( --_ctm-mob-dn-dn-se-wt-se-sw-cr, var(--_ctm-tab-dn-dn-se-wt-se-sw-cr, var(--_ctm-dn-dn-se-wt-se-sw-cr)) ) ); // gap: var( // --_ctm-mob-dn-dn-se-lt-ss-it-ad-mn-qy-sg, // var(--_ctm-tab-dn-dn-se-lt-ss-it-ad-mn-qy-sg, var(--_ctm-dn-dn-se-lt-ss-it-ad-mn-qy-sg)) // ); display: flex; .option:hover { --_sf-hr-txt-tr: prepareMediaVariable(--_ctm-dn-dn-se-im-se-hr-se-tt-tm); --_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-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)) ); // for shadow --_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-hr: var( --_ctm-mob-dn-dn-se-im-se-hr-se-sw-hr, var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-hr, var(--_ctm-dn-dn-se-im-se-hr-se-sw-hr)) ); --_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)) ); // for font --_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)) ); } .option[data-selected="true"] { --_sf-sd-txt-tr: prepareMediaVariable(--_ctm-dn-dn-se-im-se-sd-se-tt-tm); --_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-rs: var( --_ctm-mob-dn-dn-se-im-se-sd-se-br-rs, var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-rs, var(--_ctm-dn-dn-se-im-se-sd-se-br-rs)) ); --_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)) ); // new --_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-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)) ); --_sf-sd-im-gp: var( --_ctm-mob-dn-dn-se-im-se-sd-se-im-gp, var(--_ctm-tab-dn-dn-se-im-se-sd-se-im-gp, var(--_ctm-dn-dn-se-im-se-sd-se-im-gp)) ); // for font --_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)) ); } .option { width: 100%; display: flex; align-items: center; cursor: pointer; justify-content: var( --_ctm-mob-dn-dn-se-lt-ss-at, var(--_ctm-tab-dn-dn-se-lt-ss-at, var(--_ctm-dn-dn-se-lt-ss-at)) ); position: relative; box-sizing: border-box; // An option holds a single label, so Item Style has no items to space — the // gap was dropped from the schema rather than left as a control doing nothing. 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) ); 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: 400; // 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-dc) ); text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ue)); text-transform: var( --_sf-sd-txt-tr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-tm) ); } } } &[data-flex-direction="column"] { .language__name { // white-space: unset; white-space: nowrap !important; width: 100%; overflow: hidden; text-overflow: ellipsis; } } &[data-flex-direction="row"] { overflow-x: auto; } // Both offsets used to be measured off `--_ctm-dn-dn-se-lt-ss-gp-bn-is`, which // belongs to the commented-out `dropdownStyle.layoutSettings` and is therefore // never emitted. The calc was invalid, so the divider never positioned at all. // The list's own item gap is the spacing these options actually sit in. &[data-show-divider="true"] { &[data-flex-direction="row"] { .option:not(:last-child) { @include dividerGapReserve(--_ctm-dn-dn-se-wt-se-dr-wt, right); } .option:not(:last-child)::before { content: ""; position: absolute; top: 0; bottom: 0; /* For full height divider */ right: dividerGapOffset(--_ctm-dn-dn-se-wt-dn-im-gp, --_ctm-dn-dn-se-wt-se-dr-wt); width: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-dr-wt); /* Divider thickness */ background-color: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-dr-cr); /* Divider color */ } } &[data-flex-direction="column"] { .option:not(:last-child) { @include dividerGapReserve(--_ctm-dn-dn-se-wt-se-dr-wt); } .option:not(:last-child)::before { content: ""; position: absolute; left: 0; right: 0; bottom: dividerGapOffset(--_ctm-dn-dn-se-wt-dn-im-gp, --_ctm-dn-dn-se-wt-se-dr-wt); height: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-dr-wt); background-color: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-dr-cr); } } } .option_select { width: 100%; display: flex; align-items: center; position: relative; .language__name { // No caret clearance needed anymore: the caret is an in-flow sibling, spaced // by Widget Style > Item Gap. font-family: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-ft-fy); 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 and Text Transform were declared in the schema but read nowhere. padding: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-pg); text-transform: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-tt-tm); &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 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)); 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: 400; 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)); text-transform: var( --_sf-hr-txt-tr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-tm) ); white-space: nowrap; // Item Style clamps the option label. `white-space: nowrap` above would stop // the box ever wrapping, so the clamp resets it. &#{$overflowSelector} { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } } //Dropdown // The placeholder shown while nothing is selected. It reads the Widget Placeholder // Text section, the same one that styles the selected value in `.option_select // .language__name` — the two swap in the markup on first selection, so they have to // resolve identically or the text would jump. Widget Style's own typography is kept // only as the fallback: its Text tab has been removed from the panel, so the values // exist solely on pages saved while that tab was still there. .value__selected__new { width: 100%; // padding: 8px 12px; text-align: left; font-family: prepareMediaVariable( --_ctm-dn-dn-se-wt-pr-tt-ft-fy, prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-fy) ); word-wrap: prepareMediaVariable( --_ctm-dn-dn-se-wt-pr-tt-wd-wp, prepareMediaVariable(--_ctm-dn-dn-se-wt-se-wd-wp) ); word-break: prepareMediaVariable( --_ctm-dn-dn-se-wt-pr-tt-wd-bk, prepareMediaVariable(--_ctm-dn-dn-se-wt-se-wd-bk) ); font-size: prepareMediaVariable( --_ctm-dn-dn-se-wt-pr-tt-ft-se, prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-se) ); color: prepareMediaVariable( --_ctm-dn-dn-se-wt-pr-tt-cr, prepareMediaVariable(--_ctm-dn-dn-se-wt-se-cr) ); font-weight: prepareMediaVariable( --_ctm-dn-dn-se-wt-pr-tt-ft-wt, prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-wt) ); font-style: prepareMediaVariable( --_ctm-dn-dn-se-wt-pr-tt-ft-se-ic, prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-se-ic) ); text-decoration: prepareMediaVariable( --_ctm-dn-dn-se-wt-pr-tt-ue, prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ue) ); text-align: prepareMediaVariable( --_ctm-dn-dn-se-wt-pr-tt-tt-an, prepareMediaVariable(--_ctm-dn-dn-se-wt-se-tt-an) ); letter-spacing: prepareMediaVariable( --_ctm-dn-dn-se-wt-pr-tt-lr-sg, prepareMediaVariable(--_ctm-dn-dn-se-wt-se-lr-sg) ); line-height: prepareMediaVariable( --_ctm-dn-dn-se-wt-pr-tt-le-ht, prepareMediaVariable(--_ctm-dn-dn-se-wt-se-le-ht) ); text-transform: prepareMediaVariable( --_ctm-dn-dn-se-wt-pr-tt-tt-tm, prepareMediaVariable(--_ctm-dn-dn-se-wt-se-tt-tm) ); &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 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); // border-radius: 6px; // background-color: #fff; display: flex; justify-content: space-between; align-items: center; padding: prepareMediaVariable(--_ctm-dn-dn-se-dn-se-pg); width: 100%; &.open .list { display: flex; } .est__dropdown__button { display: flex; align-items: center; width: 100%; padding: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-pg); // Item Gap used to sit on `.language__conatiner`, which wraps a single // child, so it spaced nothing. The button is where the widget's own items // (icon and label) sit — same place the variant picker applies it. gap: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-im-gp); // The caret is the button's second item, so it has to stay in flow for the // gap above to have anything to space; `space-between` keeps it at the far // end, where the old `position: absolute` used to pin it. justify-content: space-between; .option_select, .value__selected__new { flex: 1 1 auto; min-width: 0; } } .est__dropdown__icon { display: flex; flex: 0 0 auto; transition: all 200ms ease-in; &.open { transform: rotate(180deg); transform: all 200ms ease-in; } &.close { transform: rotate(0deg); transform: all 200ms ease-in; } } .list { display: none; flex-direction: column; // border: 1px solid var(--_gray-200); position: absolute; top: 100%; left: 0; width: 100%; padding: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-pg); background-color: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-bd-cr); border-radius: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-br-rs); z-index: var(--_higher-zIndex); max-height: 200px; overflow-y: auto; 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); // Gap between the trigger box (Widget Style) and this panel, from // Widget Dropdown > Top Spacing. The offset used to borrow the layout's // option/label spacing, which is a different concept and is no longer // emitted at all. margin-top: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-tp-sg); gap: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-im-gp); // padding: 2px; // border-radius: 4px; // border: 1px solid var(--_gray-300); 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; } &:has(.no__records__found) { padding: 0px; } } } } .no__records__found { padding: 12px; color: var(--_gray-700); background-color: var(--_gray-100); font-size: 16px; text-align: center; cursor: auto; } } } }