@use "sass:map"; @use "sass:list"; @use "./functions.scss" as *; [data-div-type="element"] { &[data-element-type="cartAttributes"] { // width: var( // --_ctm-mob-ele-nw-wh-st-mx, // var( // --_ctm-tab-ele-nw-wh-st-mx, // var(--_sf-el-wh-st-mx, calc(1% * 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))); height: max-content; min-width: 240px; // aspect-ratio: var( // --_ctm-mob-aspect-ratio, // var(--_ctm-tab-aspect-ratio, var(--_sf-aspect-ratio)) // ); & > .wrapper { display: flex; align-items: center; justify-content: center; min-width: 100%; max-width: 100%; height: auto; } .cart__section { display: flex; align-items: center; cursor: pointer; gap: 8px; } .cart-attribute-container { width: 100%; display: flex; flex-direction: column; background-color: var( --_ctm-mob-dn-as-wt-bd-cr, var(--_ctm-tab-dn-as-wt-bd-cr, var(--_ctm-dn-as-wt-bd-cr)) ); padding: var(--_ctm-mob-dn-as-wt-pg, var(--_ctm-tab-dn-as-wt-pg, var(--_ctm-dn-as-wt-pg))); border-color: var( --_ctm-mob-dn-as-wt-br-cr, var(--_ctm-tab-dn-as-wt-br-cr, var(--_ctm-dn-as-wt-br-cr)) ); border-style: var( --_ctm-mob-dn-as-wt-br-se, var(--_ctm-tab-dn-as-wt-br-se, var(--_ctm-dn-as-wt-br-se)) ); border-width: var( --_ctm-mob-dn-as-wt-br-wh, var(--_ctm-tab-dn-as-wt-br-wh, var(--_ctm-dn-as-wt-br-wh)) ); border-radius: var( --_ctm-mob-dn-as-wt-br-rs, var(--_ctm-tab-dn-as-wt-br-rs, var(--_ctm-dn-as-wt-br-rs)) ); box-shadow: var( --_ctm-mob-dn-as-wt-sw-ae, var(--_ctm-tab-dn-as-wt-sw-ae, var(--_ctm-dn-as-wt-sw-ae)) ) var( --_ctm-mob-dn--as-wt-sw-br, var(--_ctm-tab-dn--as-wt-sw-br, var(--_ctm-dn--as-wt-sw-br)) ) var(--_ctm-mob-dn-as-wt-sw-sd, var(--_ctm-tab-dn-as-wt-sw-sd, var(--_ctm-dn-as-wt-sw-sd))) var(--_ctm-mob-dn-as-wt-sw-cr, var(--_ctm-tab-dn-as-wt-sw-cr, var(--_ctm-dn-as-wt-sw-cr))); } .cart-attribute-header { display: flex; justify-content: space-between; align-items: center; background-color: var( --_ctm-mob-dn-as-hr-bd-cr, var(--_ctm-tab-dn-as-hr-bd-cr, var(--_ctm-dn-as-hr-bd-cr)) ); padding: var(--_ctm-mob-dn-as-hr-pg, var(--_ctm-tab-dn-as-hr-pg, var(--_ctm-dn-as-hr-pg))); border-color: var( --_ctm-mob-dn-as-hr-br-cr, var(--_ctm-tab-dn-as-hr-br-cr, var(--_ctm-dn-as-hr-br-cr)) ); border-style: var( --_ctm-mob-dn-as-hr-br-se, var(--_ctm-tab-dn-as-hr-br-se, var(--_ctm-dn-as-hr-br-se)) ); border-width: var( --_ctm-mob-dn-as-hr-br-wh, var(--_ctm-tab-dn-as-hr-br-wh, var(--_ctm-dn-as-hr-br-wh)) ); border-radius: var( --_ctm-mob-dn-as-hr-br-rs, var(--_ctm-tab-dn-as-hr-br-rs, var(--_ctm-dn-as-hr-br-rs)) ); .cart_attribute_title { font-family: var( --_ctm-mob-dn-as-hr-ft-fy, var(--_ctm-tab-dn-as-hr-ft-fy, var(--_ctm-dn-as-hr-ft-fy)) ); text-transform: var( --_ctm-mob-dn-as-hr-tt-tm, var(--_ctm-tab-dn-as-hr-tt-tm, var(--_ctm-dn-as-hr-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-as-hr-wd-wp, var(--_ctm-tab-dn-as-hr-wd-wp, var(--_ctm-dn-as-hr-wd-wp)) ); word-break: var( --_ctm-mob-dn-as-hr-wd-bk, var(--_ctm-tab-dn-as-hr-wd-bk, var(--_ctm-dn-as-hr-wd-bk)) ); color: var(--_ctm-mob-dn-as-hr-cr, var(--_ctm-tab-dn-as-hr-cr, var(--_ctm-dn-as-hr-cr))); font-weight: var( --_ctm-mob-dn-as-hr-ft-wt, var(--_ctm-tab-dn-as-hr-ft-wt, var(--_ctm-dn-as-hr-ft-wt)) ); font-size: var( --_ctm-mob-dn-as-hr-ft-se, var(--_ctm-tab-dn-as-hr-ft-se, var(--_ctm-dn-as-hr-ft-se)) ); text-decoration: var( --_ctm-mob-dn-as-hr-ue, var(--_ctm-tab-dn-as-hr-ue, var(--_ctm-dn-as-hr-ue)) ); letter-spacing: var( --_ctm-mob-dn-as-hr-lr-sg, var(--_ctm-tab-dn-as-hr-lr-sg, var(--_ctm-dn-as-hr-lr-sg)) ); line-height: var( --_ctm-mob-dn-as-hr-le-ht, var(--_ctm-tab-dn-as-hr-le-ht, var(--_ctm-dn-as-hr-le-ht)) ); font-style: var( --_ctm-mob-dn-as-hr-ft-se-ic, var(--_ctm-tab-dn-as-hr-ft-se-ic, var(--_ctm-dn-as-hr-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-as-hr-tt-an, var(--_ctm-tab-dn-as-hr-tt-an, var(--_ctm-dn-as-hr-tt-an)) ); } .icon svg { path { stroke: var( --_ctm-mob-dn-an-as-im-in-c1, var(--_ctm-tab-dn-an-as-im-in-c1, var(--_ctm-dn-an-as-im-in-c1)) ); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-an-as-im-se-wh, 1.25); } width: var( --_ctm-mob-dn-an-as-im-in-se, var(--_ctm-tab-dn-an-as-im-in-se, var(--_ctm-dn-an-as-im-in-se)) ); height: var( --_ctm-mob-dn-an-as-im-in-se, var(--_ctm-tab-dn-an-as-im-in-se, var(--_ctm-dn-an-as-im-in-se)) ); } .iconDesc svg { path { stroke: var( --_ctm-mob-dn-an-as-im-in-c1-dc, var(--_ctm-tab-dn-an-as-im-in-c1-dc, var(--_ctm-dn-an-as-im-in-c1-dc)) ); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-an-as-im-se-wh, 1.25); } width: var( --_ctm-mob-dn-an-as-im-in-se-dc, var(--_ctm-tab-dn-an-as-im-in-se-dc, var(--_ctm-dn-an-as-im-in-se-dc)) ); height: var( --_ctm-mob-dn-an-as-im-in-se-dc, var(--_ctm-tab-dn-an-as-im-in-se-dc, var(--_ctm-dn-an-as-im-in-se-dc)) ); } } .attributes-section-body { width: 100%; display: flex; flex-wrap: wrap; overflow-y: auto; background-color: var( --_ctm-mob-dn-as-cr-ae-is-wr-bd-cr, var(--_ctm-tab-dn-as-cr-ae-is-wr-bd-cr, var(--_ctm-dn-as-cr-ae-is-wr-bd-cr)) ); padding: var( --_ctm-mob-dn-as-cr-ae-is-wr-pg, var(--_ctm-tab-dn-as-cr-ae-is-wr-pg, var(--_ctm-dn-as-cr-ae-is-wr-pg)) ); gap: var( --_ctm-mob-dn-as-cr-ae-is-wr-im-gp, var(--_ctm-tab-dn-as-cr-ae-is-wr-im-gp, var(--_ctm-dn-as-cr-ae-is-wr-im-gp, 12px)) ); border-color: var( --_ctm-mob-dn-as-cr-ae-is-wr-br-cr, var(--_ctm-tab-dn-as-cr-ae-is-wr-br-cr, var(--_ctm-dn-as-cr-ae-is-wr-br-cr)) ); border-style: var( --_ctm-mob-dn-as-cr-ae-is-wr-br-se, var(--_ctm-tab-dn-as-cr-ae-is-wr-br-se, var(--_ctm-dn-as-cr-ae-is-wr-br-se)) ); border-width: var( --_ctm-mob-dn-as-cr-ae-is-wr-br-wh, var(--_ctm-tab-dn-as-cr-ae-is-wr-br-wh, var(--_ctm-dn-as-cr-ae-is-wr-br-wh)) ); border-radius: var( --_ctm-mob-dn-as-cr-ae-is-wr-br-rs, var(--_ctm-tab-dn-as-cr-ae-is-wr-br-rs, var(--_ctm-dn-as-cr-ae-is-wr-br-rs)) ); .attriTitle { // font-weight: 600; // font-size: 14px; // line-height: 20px; // color: #101828; // padding-bottom: 6px; font-family: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-as-cr-as-te-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-as-cr-as-te-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-as-cr-as-te-wd-bk); color: prepareMediaVariable(--_ctm-dn-as-cr-as-te-cr); font-weight: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ft-wt); font-size: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ft-se); text-decoration: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ue); letter-spacing: prepareMediaVariable(--_ctm-dn-as-cr-as-te-lr-sg); line-height: prepareMediaVariable(--_ctm-dn-as-cr-as-te-le-ht); font-style: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ft-se-ic); text-align: prepareMediaVariable(--_ctm-dn-as-cr-as-te-tt-an); padding: prepareMediaVariable(--_ctm-dn-as-cr-as-te-pg); } .attriDes { // font-weight: 400; // font-size: 14px; // line-height: 20px; font-family: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-as-cr-as-in-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-as-cr-as-in-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-as-cr-as-in-wd-bk); color: prepareMediaVariable(--_ctm-dn-as-cr-as-in-cr); font-weight: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ft-wt); font-size: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ft-se); text-decoration: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ue); letter-spacing: prepareMediaVariable(--_ctm-dn-as-cr-as-in-lr-sg); line-height: prepareMediaVariable(--_ctm-dn-as-cr-as-in-le-ht); font-style: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ft-se-ic); text-align: prepareMediaVariable(--_ctm-dn-as-cr-as-in-tt-an); padding: prepareMediaVariable(--_ctm-dn-as-cr-as-in-pg); } // CurrencyDisplay renders `span.currency_span` and, with isStyledElement, adds no // inline styles of its own — so the attributesPrice controls own it completely. // Covers both the per-attribute price and the Order Attributes total. .currency_span { display: inline-block; white-space: nowrap; font-family: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-wd-bk); color: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-cr); font-weight: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-ft-wt); font-size: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-ft-se); text-decoration: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-ue); letter-spacing: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-lr-sg); line-height: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-le-ht); font-style: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-ft-se-ic); text-align: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-tt-an); padding: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-pg); background-color: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-bd-cr); } .attribute { width: 100%; display: flex; flex-direction: column; // Every box property below falls back to the cart-details card styling, so an // element whose design tokens were never emitted still renders as a card // instead of an unpadded, borderless row. padding: var( --_ctm-mob-dn-as-cr-as-fs-pg, var(--_ctm-tab-dn-as-cr-as-fs-pg, var(--_ctm-dn-as-cr-as-fs-pg, 10px)) ); gap: var( --_ctm-mob-dn-as-cr-as-fs-im-gp, var(--_ctm-tab-dn-as-cr-as-fs-im-gp, var(--_ctm-dn-as-cr-as-fs-im-gp, 6px)) ); background-color: var( --_ctm-mob-dn-as-cr-as-fs-bd-cr, var(--_ctm-tab-dn-as-cr-as-fs-bd-cr, var(--_ctm-dn-as-cr-as-fs-bd-cr, var(--_base-white))) ); border-color: var( --_ctm-mob-dn-as-cr-as-fs-br-cr, var( --_ctm-tab-dn-as-cr-as-fs-br-cr, var(--_ctm-dn-as-cr-as-fs-br-cr, var(--_thm-cs-be-se-3)) ) ); border-style: var( --_ctm-mob-dn-as-cr-as-fs-br-se, var(--_ctm-tab-dn-as-cr-as-fs-br-se, var(--_ctm-dn-as-cr-as-fs-br-se, solid)) ); border-width: var( --_ctm-mob-dn-as-cr-as-fs-br-wh, var(--_ctm-tab-dn-as-cr-as-fs-br-wh, var(--_ctm-dn-as-cr-as-fs-br-wh, 1px)) ); border-radius: var( --_ctm-mob-dn-as-cr-as-fs-br-rs, var(--_ctm-tab-dn-as-cr-as-fs-br-rs, var(--_ctm-dn-as-cr-as-fs-br-rs, 4px)) ); .label { display: block; padding: var( --_ctm-mob-dn-as-cr-as-ls-pg, var(--_ctm-tab-dn-as-cr-as-ls-pg, var(--_ctm-dn-as-cr-as-ls-pg)) ); font-family: var( --_ctm-mob-dn-as-cr-as-ls-ft-fy, var(--_ctm-tab-dn-as-cr-as-ls-ft-fy, var(--_ctm-dn-as-cr-as-ls-ft-fy)) ); text-transform: var( --_ctm-mob-dn-as-cr-as-ls-tt-tm, var(--_ctm-tab-dn-as-cr-as-ls-tt-tm, var(--_ctm-dn-as-cr-as-ls-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-as-cr-as-ls-wd-wp, var(--_ctm-tab-dn-as-cr-as-ls-wd-wp, var(--_ctm-dn-as-cr-as-ls-wd-wp)) ); word-break: var( --_ctm-mob-dn-as-cr-as-ls-wd-bk, var(--_ctm-tab-dn-as-cr-as-ls-wd-bk, var(--_ctm-dn-as-cr-as-ls-wd-bk)) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } color: var( --_ctm-mob-dn-as-cr-as-ls-cr, var(--_ctm-tab-dn-as-cr-as-ls-cr, var(--_ctm-dn-as-cr-as-ls-cr)) ); font-weight: var( --_ctm-mob-dn-as-cr-as-ls-ft-wt, var(--_ctm-tab-dn-as-cr-as-ls-ft-wt, var(--_ctm-dn-as-cr-as-ls-ft-wt)) ); font-size: var( --_ctm-mob-dn-as-cr-as-ls-ft-se, var(--_ctm-tab-dn-as-cr-as-ls-ft-se, var(--_ctm-dn-as-cr-as-ls-ft-se)) ); text-decoration: var( --_ctm-mob-dn-as-cr-as-ls-ue, var(--_ctm-tab-dn-as-cr-as-ls-ue, var(--_ctm-dn-as-cr-as-ls-ue)) ); letter-spacing: var( --_ctm-mob-dn-as-cr-as-ls-lr-sg, var(--_ctm-tab-dn-as-cr-as-ls-lr-sg, var(--_ctm-dn-as-cr-as-ls-lr-sg)) ); line-height: var( --_ctm-mob-dn-as-cr-as-ls-le-ht, var(--_ctm-tab-dn-as-cr-as-ls-le-ht, var(--_ctm-dn-as-cr-as-ls-le-ht)) ); font-style: var( --_ctm-mob-dn-as-cr-as-ls-ft-se-ic, var(--_ctm-tab-dn-as-cr-as-ls-ft-se-ic, var(--_ctm-dn-as-cr-as-ls-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-as-cr-as-ls-tt-an, var(--_ctm-tab-dn-as-cr-as-ls-tt-an, var(--_ctm-dn-as-cr-as-ls-tt-an)) ); &.required::after { content: " *"; color: var(--_error-500); } } .attribute_field { width: 100% !important; input { background-color: var( --_ctm-mob-dn-as-cr-as-is-bd-cr, var( --_ctm-tab-dn-as-cr-as-is-bd-cr, var(--_ctm-dn-as-cr-as-is-bd-cr, var(--_base-white)) ) ); padding: var( --_ctm-mob-dn-as-cr-as-is-pg, var(--_ctm-tab-dn-as-cr-as-is-pg, var(--_ctm-dn-as-cr-as-is-pg, 8px 12px)) ); gap: var( --_ctm-mob-dn-as-cr-as-is-im-gp, var(--_ctm-tab-dn-as-cr-as-is-im-gp, var(--_ctm-dn-as-cr-as-is-im-gp, 8px)) ); border-color: var( --_ctm-mob-dn-as-cr-as-is-br-cr, var( --_ctm-tab-dn-as-cr-as-is-br-cr, var(--_ctm-dn-as-cr-as-is-br-cr, var(--_thm-cs-be-se-3)) ) ); border-style: var( --_ctm-mob-dn-as-cr-as-is-br-se, var(--_ctm-tab-dn-as-cr-as-is-br-se, var(--_ctm-dn-as-cr-as-is-br-se, solid)) ); border-width: var( --_ctm-mob-dn-as-cr-as-is-br-wh, var(--_ctm-tab-dn-as-cr-as-is-br-wh, var(--_ctm-dn-as-cr-as-is-br-wh, 1px)) ); border-radius: var( --_ctm-mob-dn-as-cr-as-is-br-rs, var(--_ctm-tab-dn-as-cr-as-is-br-rs, var(--_ctm-dn-as-cr-as-is-br-rs, 4px)) ); &::placeholder { font-family: var( --_ctm-mob-dn-as-cr-as-is-ft-fy, var(--_ctm-tab-dn-as-cr-as-is-ft-fy, var(--_ctm-dn-as-cr-as-is-ft-fy)) ); text-transform: var( --_ctm-mob-dn-as-cr-as-is-tt-tm, var(--_ctm-tab-dn-as-cr-as-is-tt-tm, var(--_ctm-dn-as-cr-as-is-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-as-cr-as-is-wd-wp, var(--_ctm-tab-dn-as-cr-as-is-wd-wp, var(--_ctm-dn-as-cr-as-is-wd-wp)) ); word-break: var( --_ctm-mob-dn-as-cr-as-is-wd-bk, var(--_ctm-tab-dn-as-cr-as-is-wd-bk, var(--_ctm-dn-as-cr-as-is-wd-bk)) ); color: var(--_thm-cs-be-se-1); font-weight: var( --_ctm-mob-dn-as-cr-as-is-ft-wt, var(--_ctm-tab-dn-as-cr-as-is-ft-wt, var(--_ctm-dn-as-cr-as-is-ft-wt)) ); font-size: var( --_ctm-mob-dn-as-cr-as-is-ft-se, var(--_ctm-tab-dn-as-cr-as-is-ft-se, var(--_ctm-dn-as-cr-as-is-ft-se)) ); text-decoration: var( --_ctm-mob-dn-as-cr-as-is-ue, var(--_ctm-tab-dn-as-cr-as-is-ue, var(--_ctm-dn-as-cr-as-is-ue)) ); letter-spacing: var( --_ctm-mob-dn-as-cr-as-is-lr-sg, var(--_ctm-tab-dn-as-cr-as-is-lr-sg, var(--_ctm-dn-as-cr-as-is-lr-sg)) ); line-height: var( --_ctm-mob-dn-as-cr-as-is-le-ht, var(--_ctm-tab-dn-as-cr-as-is-le-ht, var(--_ctm-dn-as-cr-as-is-le-ht)) ); font-style: var( --_ctm-mob-dn-as-cr-as-is-ft-se-ic, var(--_ctm-tab-dn-as-cr-as-is-ft-se-ic, var(--_ctm-dn-as-cr-as-is-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-as-cr-as-is-tt-an, var(--_ctm-tab-dn-as-cr-as-is-tt-an, var(--_ctm-dn-as-cr-as-is-tt-an)) ); } } .attribute_form_field { font-family: var( --_ctm-mob-dn-as-cr-as-is-ft-fy, var(--_ctm-tab-dn-as-cr-as-is-ft-fy, var(--_ctm-dn-as-cr-as-is-ft-fy)) ); text-transform: var( --_ctm-mob-dn-as-cr-as-is-tt-tm, var(--_ctm-tab-dn-as-cr-as-is-tt-tm, var(--_ctm-dn-as-cr-as-is-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-as-cr-as-is-wd-wp, var(--_ctm-tab-dn-as-cr-as-is-wd-wp, var(--_ctm-dn-as-cr-as-is-wd-wp)) ); word-break: var( --_ctm-mob-dn-as-cr-as-is-wd-bk, var(--_ctm-tab-dn-as-cr-as-is-wd-bk, var(--_ctm-dn-as-cr-as-is-wd-bk)) ); color: var( --_ctm-mob-dn-as-cr-as-is-cr, var(--_ctm-tab-dn-as-cr-as-is-cr, var(--_ctm-dn-as-cr-as-is-cr)) ); font-weight: var( --_ctm-mob-dn-as-cr-as-is-ft-wt, var(--_ctm-tab-dn-as-cr-as-is-ft-wt, var(--_ctm-dn-as-cr-as-is-ft-wt)) ); font-size: var( --_ctm-mob-dn-as-cr-as-is-ft-se, var(--_ctm-tab-dn-as-cr-as-is-ft-se, var(--_ctm-dn-as-cr-as-is-ft-se)) ); text-decoration: var( --_ctm-mob-dn-as-cr-as-is-ue, var(--_ctm-tab-dn-as-cr-as-is-ue, var(--_ctm-dn-as-cr-as-is-ue)) ); letter-spacing: var( --_ctm-mob-dn-as-cr-as-is-lr-sg, var(--_ctm-tab-dn-as-cr-as-is-lr-sg, var(--_ctm-dn-as-cr-as-is-lr-sg)) ); line-height: var( --_ctm-mob-dn-as-cr-as-is-le-ht, var(--_ctm-tab-dn-as-cr-as-is-le-ht, var(--_ctm-dn-as-cr-as-is-le-ht)) ); font-style: var( --_ctm-mob-dn-as-cr-as-is-ft-se-ic, var(--_ctm-tab-dn-as-cr-as-is-ft-se-ic, var(--_ctm-dn-as-cr-as-is-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-as-cr-as-is-tt-an, var(--_ctm-tab-dn-as-cr-as-is-tt-an, var(--_ctm-dn-as-cr-as-is-tt-an)) ); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; width: 100%; padding: var( --_ctm-mob-dn-as-cr-as-is-pg, var(--_ctm-tab-dn-as-cr-as-is-pg, var(--_ctm-dn-as-cr-as-is-pg, 8px 12px)) ); &:focus { box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--_primary-100); border: 1px solid var(--_primary-300); } } .dropdown-input-section { height: auto !important; background-color: var( --_ctm-mob-dn-as-cr-as-is-bd-cr, var(--_ctm-tab-dn-as-cr-as-is-bd-cr, var(--_ctm-dn-as-cr-as-is-bd-cr)) ); padding: var( --_ctm-mob-dn-as-cr-as-is-pg, var(--_ctm-tab-dn-as-cr-as-is-pg, var(--_ctm-dn-as-cr-as-is-pg)) ); border-color: var( --_ctm-mob-dn-as-cr-as-is-br-cr, var(--_ctm-tab-dn-as-cr-as-is-br-cr, var(--_ctm-dn-as-cr-as-is-br-cr)) ); border-style: var( --_ctm-mob-dn-as-cr-as-is-br-se, var(--_ctm-tab-dn-as-cr-as-is-br-se, var(--_ctm-dn-as-cr-as-is-br-se)) ); border-width: var( --_ctm-mob-dn-as-cr-as-is-br-wh, var(--_ctm-tab-dn-as-cr-as-is-br-wh, var(--_ctm-dn-as-cr-as-is-br-wh)) ); border-radius: var( --_ctm-mob-dn-as-cr-as-is-br-rs, var(--_ctm-tab-dn-as-cr-as-is-br-rs, var(--_ctm-dn-as-cr-as-is-br-rs)) ); font-family: var( --_ctm-mob-dn-as-cr-as-dn-ft-fy, var(--_ctm-tab-dn-as-cr-as-dn-ft-fy, var(--_ctm-dn-as-cr-as-dn-ft-fy)) ); text-transform: var( --_ctm-mob-dn-as-cr-as-dn-tt-tm, var(--_ctm-tab-dn-as-cr-as-dn-tt-tm, var(--_ctm-dn-as-cr-as-dn-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-as-cr-as-dn-wd-wp, var(--_ctm-tab-dn-as-cr-as-dn-wd-wp, var(--_ctm-dn-as-cr-as-dn-wd-wp)) ); word-break: var( --_ctm-mob-dn-as-cr-as-dn-wd-bk, var(--_ctm-tab-dn-as-cr-as-dn-wd-bk, var(--_ctm-dn-as-cr-as-dn-wd-bk)) ); color: var( --_ctm-mob-dn-as-cr-as-dn-cr, var(--_ctm-tab-dn-as-cr-as-dn-cr, var(--_ctm-dn-as-cr-as-dn-cr)) ); font-weight: var( --_ctm-mob-dn-as-cr-as-dn-ft-wt, var(--_ctm-tab-dn-as-cr-as-dn-ft-wt, var(--_ctm-dn-as-cr-as-dn-ft-wt)) ); font-size: var( --_ctm-mob-dn-as-cr-as-dn-ft-se, var(--_ctm-tab-dn-as-cr-as-dn-ft-se, var(--_ctm-dn-as-cr-as-dn-ft-se)) ); text-decoration: var( --_ctm-mob-dn-as-cr-as-dn-ue, var(--_ctm-tab-dn-as-cr-as-dn-ue, var(--_ctm-dn-as-cr-as-dn-ue)) ); letter-spacing: var( --_ctm-mob-dn-as-cr-as-dn-lr-sg, var(--_ctm-tab-dn-as-cr-as-dn-lr-sg, var(--_ctm-dn-as-cr-as-dn-lr-sg)) ); line-height: var( --_ctm-mob-dn-as-cr-as-dn-le-ht, var(--_ctm-tab-dn-as-cr-as-dn-le-ht, var(--_ctm-dn-as-cr-as-dn-le-ht)) ); font-style: var( --_ctm-mob-dn-as-cr-as-dn-ft-se-ic, var(--_ctm-tab-dn-as-cr-as-dn-ft-se-ic, var(--_ctm-dn-as-cr-as-dn-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-as-cr-as-dn-tt-an, var(--_ctm-tab-dn-as-cr-as-dn-tt-an, var(--_ctm-dn-as-cr-as-dn-tt-an)) ); .selected-display { .selected-item { display: flex; align-items: center; .color-swatch { position: relative; // top: 1px; } .svg_icon svg { width: 16px; height: 16px; } } } } &:focus { border-color: var(--_primary-400); outline: 2px solid var(--_primary-200); } &.error { border-color: #dc2626; background-color: #fef2f2; } // DatePickerInput renders the calendar icon as a *sibling* of the input // wrapper, so it only sits inside the field once it is taken out of flow. // Without this the icon renders on its own line above the input. .date_picker_container { position: relative; .svg_icon { position: absolute; left: 8px; // Centring on the midpoint keeps the icon aligned whatever padding or // font size the input ends up with; a fixed `top` drifts as soon as the // merchant changes either. top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; line-height: 0; pointer-events: none; // The input paints a background, so the icon needs to sit above it. z-index: 1; svg { display: block; // The icon markup carries its own width/height/stroke attributes; // these override them so the attributesInputs icon controls apply. width: prepareMediaVariable(--_ctm-dn-as-cr-as-is-in-se, 16px); height: prepareMediaVariable(--_ctm-dn-as-cr-as-is-in-se, 16px); path { stroke: prepareMediaVariable(--_ctm-dn-as-cr-as-is-in-c1, #667085); stroke-width: prepareMediaVariable(--_ctm-dn-as-cr-as-is-se-wh, 1.66667); } } } .react-datepicker-wrapper { .react-datepicker__input-container { input { padding-left: 32px !important; } } } } .react-datepicker-wrapper { width: 100%; .react-datepicker__close-icon::after { background-color: transparent; font-size: 25px; color: var(--_gray-500); } } // Same shape as the date picker: the percent glyph is a sibling of the input, // so it needs lifting out of flow to sit inside the field. // `&.` because attribute.tsx puts this class on the .attribute_field element // itself (`className="attribute_field input_percent_a"`), not on a child. &.input_percent_a { position: relative; .svg_icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; line-height: 0; pointer-events: none; z-index: 1; svg { display: block; width: prepareMediaVariable(--_ctm-dn-as-cr-as-is-in-se, 16px); height: prepareMediaVariable(--_ctm-dn-as-cr-as-is-in-se, 16px); path { stroke: prepareMediaVariable(--_ctm-dn-as-cr-as-is-in-c1, #667085); stroke-width: prepareMediaVariable(--_ctm-dn-as-cr-as-is-se-wh, 1.66667); } } } input { // Keep the value clear of the glyph, and drop the number spinner that // would otherwise render on top of it. padding-right: 32px !important; appearance: textfield; -moz-appearance: textfield; &::-webkit-outer-spin-button, &::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } } } // Co-class on .attribute_field, same as the percent field above. &.color_picker_a { position: relative; .color-circle { // The swatch carries inline width/height, so the size control can only // take effect with !important. Falls back to the inline 30px. width: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-in-se, 30px) !important; height: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-in-se, 30px) !important; } .color-picker-container { // The popover used to sit in flow, so opening it pushed the rest of the // panel down and overflowed the card in a narrow sidebar. position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; min-width: 220px; background-color: prepareMediaVariable( --_ctm-dn-as-cr-as-cr-pr-bd-cr, var(--_base-white) ); padding: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-pg, 12px); border-color: prepareMediaVariable( --_ctm-dn-as-cr-as-cr-pr-br-cr, var(--_thm-cs-be-se-3) ); border-style: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-br-se, solid); border-width: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-br-wh, 1px); border-radius: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-br-rs, 4px); box-shadow: 0px 4px 12px rgba(16, 24, 40, 0.12); .custom_hex_color_picker_div { margin-top: 8px; label { display: inline-block; margin-bottom: 4px; color: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-cr, var(--_gray-700)); font-size: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-ft-se, 14px); font-weight: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-ft-wt, 500); line-height: 20px; } } .custom__div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; label { display: flex; flex-direction: column; color: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-cr, var(--_gray-700)); font-size: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-ft-se, 14px); font-weight: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-ft-wt, 500); input { border: 1px solid var(--_thm-cs-be-se-3); padding: 8px; outline: none; text-align: center; border-radius: 0; } &:first-child input { border-right: none; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } &:last-child input { border-left: none; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } } } } } // Co-class on .attribute_field, same as the percent field above. &.input_textarea_a { width: 100%; .attribute_text_area_field { width: 100% !important; // A textarea with no height authored collapsed to roughly one row. min-height: prepareMediaVariable(--_ctm-dn-as-cr-as-tt-aa-ht, 80px); resize: vertical; // Each property falls back to the single-line input styling, so the // textarea still matches the other fields until it is authored. background-color: prepareMediaVariable( --_ctm-dn-as-cr-as-tt-aa-bd-cr, prepareMediaVariable(--_ctm-dn-as-cr-as-is-bd-cr, var(--_base-white)) ); padding: prepareMediaVariable( --_ctm-dn-as-cr-as-tt-aa-pg, prepareMediaVariable(--_ctm-dn-as-cr-as-is-pg, 8px 12px) ); border-color: prepareMediaVariable( --_ctm-dn-as-cr-as-tt-aa-br-cr, prepareMediaVariable(--_ctm-dn-as-cr-as-is-br-cr, var(--_thm-cs-be-se-3)) ); border-style: prepareMediaVariable( --_ctm-dn-as-cr-as-tt-aa-br-se, prepareMediaVariable(--_ctm-dn-as-cr-as-is-br-se, solid) ); border-width: prepareMediaVariable( --_ctm-dn-as-cr-as-tt-aa-br-wh, prepareMediaVariable(--_ctm-dn-as-cr-as-is-br-wh, 1px) ); border-radius: prepareMediaVariable( --_ctm-dn-as-cr-as-tt-aa-br-rs, prepareMediaVariable(--_ctm-dn-as-cr-as-is-br-rs, 4px) ); font-family: prepareMediaVariable( --_ctm-dn-as-cr-as-tt-aa-ft-fy, prepareMediaVariable(--_ctm-dn-as-cr-as-is-ft-fy) ); font-size: prepareMediaVariable( --_ctm-dn-as-cr-as-tt-aa-ft-se, prepareMediaVariable(--_ctm-dn-as-cr-as-is-ft-se) ); font-weight: prepareMediaVariable( --_ctm-dn-as-cr-as-tt-aa-ft-wt, prepareMediaVariable(--_ctm-dn-as-cr-as-is-ft-wt) ); color: prepareMediaVariable( --_ctm-dn-as-cr-as-tt-aa-cr, prepareMediaVariable(--_ctm-dn-as-cr-as-is-cr) ); line-height: prepareMediaVariable( --_ctm-dn-as-cr-as-tt-aa-le-ht, prepareMediaVariable(--_ctm-dn-as-cr-as-is-le-ht) ); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; &::placeholder { color: var(--_gray-500); } &:focus { outline: 0 none; box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--primary-100); border: 1px solid var(--primary-300); } } } .custom-upload { display: flex; // Row, matching cart-details: the icon sits beside the text, and the // filled state puts the preview and the clear button at opposite ends. align-items: center; align-self: stretch; position: relative; background-color: var( --_ctm-mob-dn-as-cr-us-bd-cr, var(--_ctm-tab-dn-as-cr-us-bd-cr, var(--_ctm-dn-as-cr-us-bd-cr, var(--_base-white))) ); padding: var( --_ctm-mob-dn-as-cr-us-pg, var(--_ctm-tab-dn-as-cr-us-pg, var(--_ctm-dn-as-cr-us-pg, 16px)) ); gap: var( --_ctm-mob-dn-as-cr-us-im-gp, var(--_ctm-tab-dn-as-cr-us-im-gp, var(--_ctm-dn-as-cr-us-im-gp, 12px)) ); border-color: var( --_ctm-mob-dn-as-cr-us-br-cr, var( --_ctm-tab-dn-as-cr-us-br-cr, var(--_ctm-dn-as-cr-us-br-cr, var(--_thm-cs-be-se-3)) ) ); border-style: var( --_ctm-mob-dn-as-cr-us-br-se, var(--_ctm-tab-dn-as-cr-us-br-se, var(--_ctm-dn-as-cr-us-br-se, solid)) ); border-width: var( --_ctm-mob-dn-as-cr-us-br-wh, var(--_ctm-tab-dn-as-cr-us-br-wh, var(--_ctm-dn-as-cr-us-br-wh, 1px)) ); border-radius: var( --_ctm-mob-dn-as-cr-us-br-rs, var(--_ctm-tab-dn-as-cr-us-br-rs, var(--_ctm-dn-as-cr-us-br-rs, 4px)) ); .clear_upload_icon { // Never shrink and never inherit the preview's height: the button stays a // 30px circle centred against the preview, however many lines the file // name wraps to. (The old `margin-top: 3px` nudged it off centre.) flex: 0 0 auto; align-self: center; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: #fff; border-radius: 50%; padding: 3px; .svg_icon { display: flex; align-items: center; justify-content: center; line-height: 0; svg { display: block; width: 20px; height: 20px; } } &:hover { .svg_icon { svg { path { stroke: var(--_error-500); } } } } } // &:hover { // .clear_upload_icon { // display: block; // } // } // FileUpload renders the thumbnail and the file name as siblings inside // .preview_image_container, so the name cannot be styled from inside // .preview_image. `min-width: 0` is what lets the name truncate instead of // pushing the clear button out of the card. .preview_image_container, .preview_file { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; } .preview_image { display: flex; align-items: center; flex: 0 0 auto; img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } } .file_info { min-width: 0; } // The filled state's file name follows the Uploads description typography, // so the document/image preview is authorable like the rest of the field. .image_title, .file_name, .file_extension { min-width: 0; font-family: prepareMediaVariable(--_ctm-dn-as-cr-us-ft-fy-dc); color: prepareMediaVariable(--_ctm-dn-as-cr-us-cr-dc, var(--_gray-700)); font-size: prepareMediaVariable(--_ctm-dn-as-cr-us-ft-se-dc, 14px); font-weight: prepareMediaVariable(--_ctm-dn-as-cr-us-ft-wt-dc, 400); line-height: prepareMediaVariable(--_ctm-dn-as-cr-us-le-ht-dc, 150%); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; word-break: break-all; } .preview_file { .svg_icon { flex: 0 0 auto; line-height: 0; } } .file_upload_text { text-align: center; display: flex; flex-direction: column; gap: 6px; p { strong { font-family: var( --_ctm-mob-dn-as-cr-us-ft-fy, var(--_ctm-tab-dn-as-cr-us-ft-fy, var(--_ctm-dn-as-cr-us-ft-fy)) ); text-transform: var( --_ctm-mob-dn-as-cr-us-tt-tm, var(--_ctm-tab-dn-as-cr-us-tt-tm, var(--_ctm-dn-as-cr-us-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-as-cr-us-wd-wp, var(--_ctm-tab-dn-as-cr-us-wd-wp, var(--_ctm-dn-as-cr-us-wd-wp)) ); word-break: var( --_ctm-mob-dn-as-cr-us-wd-bk, var(--_ctm-tab-dn-as-cr-us-wd-bk, var(--_ctm-dn-as-cr-us-wd-bk)) ); // color: var( // --_ctm-mob-dn-as-cr-us-cr, // var(--_ctm-tab-dn-as-cr-us-cr, var(--_ctm-dn-as-cr-us-cr)) // ); color: var(--_thm-cs-tt-ls-as); font-weight: var( --_ctm-mob-dn-as-cr-us-ft-wt, var(--_ctm-tab-dn-as-cr-us-ft-wt, var(--_ctm-dn-as-cr-us-ft-wt)) ); font-size: var( --_ctm-mob-dn-as-cr-us-ft-se, var(--_ctm-tab-dn-as-cr-us-ft-se, var(--_ctm-dn-as-cr-us-ft-se)) ); text-decoration: var( --_ctm-mob-dn-as-cr-us-ue, var(--_ctm-tab-dn-as-cr-us-ue, var(--_ctm-dn-as-cr-us-ue)) ); letter-spacing: var( --_ctm-mob-dn-as-cr-us-lr-sg, var(--_ctm-tab-dn-as-cr-us-lr-sg, var(--_ctm-dn-as-cr-us-lr-sg)) ); line-height: var( --_ctm-mob-dn-as-cr-us-le-ht, var(--_ctm-tab-dn-as-cr-us-le-ht, var(--_ctm-dn-as-cr-us-le-ht)) ); font-style: var( --_ctm-mob-dn-as-cr-us-ft-se-ic, var(--_ctm-tab-dn-as-cr-us-ft-se-ic, var(--_ctm-dn-as-cr-us-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-as-cr-us-tt-an, var(--_ctm-tab-dn-as-cr-us-tt-an, var(--_ctm-dn-as-cr-us-tt-an)) ); } } span { font-family: var( --_ctm-mob-dn-as-cr-us-ft-fy-dc, var(--_ctm-tab-dn-as-cr-us-ft-fy-dc, var(--_ctm-dn-as-cr-us-ft-fy-dc)) ); text-transform: var( --_ctm-mob-dn-as-cr-us-tt-tm-dc, var(--_ctm-tab-dn-as-cr-us-tt-tm-dc, var(--_ctm-dn-as-cr-us-tt-tm-dc)) ); word-wrap: var( --_ctm-mob-dn-as-cr-us-wd-wp-dc, var(--_ctm-tab-dn-as-cr-us-wd-wp-dc, var(--_ctm-dn-as-cr-us-wd-wp-dc)) ); word-break: var( --_ctm-mob-dn-as-cr-us-wd-bk-dc, var(--_ctm-tab-dn-as-cr-us-wd-bk-dc, var(--_ctm-dn-as-cr-us-wd-bk-dc)) ); color: var( --_ctm-mob-dn-as-cr-us-cr-dc, var(--_ctm-tab-dn-as-cr-us-cr-dc, var(--_ctm-dn-as-cr-us-cr-dc)) ); font-weight: var( --_ctm-mob-dn-as-cr-us-ft-wt-dc, var(--_ctm-tab-dn-as-cr-us-ft-wt-dc, var(--_ctm-dn-as-cr-us-ft-wt-dc)) ); font-size: var( --_ctm-mob-dn-as-cr-us-ft-se-dc, var(--_ctm-tab-dn-as-cr-us-ft-se-dc, var(--_ctm-dn-as-cr-us-ft-se-dc)) ); text-decoration: var( --_ctm-mob-dn-as-cr-us-ue-dc, var(--_ctm-tab-dn-as-cr-us-ue-dc, var(--_ctm-dn-as-cr-us-ue-dc)) ); letter-spacing: var( --_ctm-mob-dn-as-cr-us-lr-sg-dc, var(--_ctm-tab-dn-as-cr-us-lr-sg-dc, var(--_ctm-dn-as-cr-us-lr-sg-dc)) ); line-height: var( --_ctm-mob-dn-as-cr-us-le-ht-dc, var(--_ctm-tab-dn-as-cr-us-le-ht-dc, var(--_ctm-dn-as-cr-us-le-ht-dc)) ); font-style: var( --_ctm-mob-dn-as-cr-us-ft-se-ic-dc, var(--_ctm-tab-dn-as-cr-us-ft-se-ic-dc, var(--_ctm-dn-as-cr-us-ft-se-ic-dc)) ); text-align: var( --_ctm-mob-dn-as-cr-us-tt-an-dc, var(--_ctm-tab-dn-as-cr-us-tt-an-dc, var(--_ctm-dn-as-cr-us-tt-an-dc)) ); } } .uploadicon { // padding: 10px; // background: #f2f4f7; display: inline-block; // border-radius: 50%; // color: var(--_gray-600); } } .has-file { justify-content: space-between; } // Multi-upload stacks one filled card per file, above the upload button. .multi-upload-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; } } } .error-text { font-size: 12px; color: var(--_error-500); } .text_area_attribute { width: 100%; .input_textarea_a { width: 100%; } } .cart_item_attr_disabled { pointer-events: none; opacity: 0.5; cursor: auto; } } } } // toggle styles .input_toggle_switch_container { display: flex; background-color: var( --_ctm-mob-dn-as-cr-as-bs-bd-cr, var(--_ctm-tab-dn-as-cr-as-bs-bd-cr, var(--_ctm-dn-as-cr-as-bs-bd-cr)) ); border-color: var( --_ctm-mob-dn-as-cr-as-bs-br-cr, var(--_ctm-tab-dn-as-cr-as-bs-br-cr, var(--_ctm-dn-as-cr-as-bs-br-cr)) ); border-style: var( --_ctm-mob-dn-as-cr-as-bs-br-se, var(--_ctm-tab-dn-as-cr-as-bs-br-se, var(--_ctm-dn-as-cr-as-bs-br-se)) ); border-width: var( --_ctm-mob-dn-as-cr-as-bs-br-wh, var(--_ctm-tab-dn-as-cr-as-bs-br-wh, var(--_ctm-dn-as-cr-as-bs-br-wh)) ); border-radius: var( --_ctm-mob-dn-as-cr-as-bs-br-rs, var(--_ctm-tab-dn-as-cr-as-bs-br-rs, var(--_ctm-dn-as-cr-as-bs-br-rs)) ); padding: var( --_ctm-mob-dn-as-cr-as-bs-pg, var(--_ctm-tab-dn-as-cr-as-bs-pg, var(--_ctm-dn-as-cr-as-bs-pg)) ); gap: var( --_ctm-mob-dn-as-cr-as-bs-im-gp, var(--_ctm-tab-dn-as-cr-as-bs-im-gp, var(--_ctm-dn-as-cr-as-bs-im-gp)) ); .input_toggle_switch { position: relative; display: inline-block; width: 50px; height: 28px; input[type="checkbox"] { opacity: 0; width: 0; height: 0; &:checked + .slider { background-color: #4caf50; &::before { transform: translateX(22px); } } } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: 0.4s; border-radius: 28px; &::before { position: absolute; content: ""; height: 22px; width: 22px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: 0.4s; } } } .input_toggle_switch_text { gap: 4px; display: flex; flex-direction: column; .checkbox_title { font-family: var( --_ctm-mob-dn-as-cr-as-bs-ft-fy, var(--_ctm-tab-dn-as-cr-as-bs-ft-fy, var(--_ctm-dn-as-cr-as-bs-ft-fy)) ); text-transform: var( --_ctm-mob-dn-as-cr-as-bs-tt-tm, var(--_ctm-tab-dn-as-cr-as-bs-tt-tm, var(--_ctm-dn-as-cr-as-bs-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-as-cr-as-bs-wd-wp, var(--_ctm-tab-dn-as-cr-as-bs-wd-wp, var(--_ctm-dn-as-cr-as-bs-wd-wp)) ); word-break: var( --_ctm-mob-dn-as-cr-as-bs-wd-bk, var(--_ctm-tab-dn-as-cr-as-bs-wd-bk, var(--_ctm-dn-as-cr-as-bs-wd-bk)) ); color: var( --_ctm-mob-dn-as-cr-as-bs-cr, var(--_ctm-tab-dn-as-cr-as-bs-cr, var(--_ctm-dn-as-cr-as-bs-cr)) ); font-weight: var( --_ctm-mob-dn-as-cr-as-bs-ft-wt, var(--_ctm-tab-dn-as-cr-as-bs-ft-wt, var(--_ctm-dn-as-cr-as-bs-ft-wt)) ); font-size: var( --_ctm-mob-dn-as-cr-as-bs-ft-se, var(--_ctm-tab-dn-as-cr-as-bs-ft-se, var(--_ctm-dn-as-cr-as-bs-ft-se)) ); text-decoration: var( --_ctm-mob-dn-as-cr-as-bs-ue, var(--_ctm-tab-dn-as-cr-as-bs-ue, var(--_ctm-dn-as-cr-as-bs-ue)) ); letter-spacing: var( --_ctm-mob-dn-as-cr-as-bs-lr-sg, var(--_ctm-tab-dn-as-cr-as-bs-lr-sg, var(--_ctm-dn-as-cr-as-bs-lr-sg)) ); line-height: var( --_ctm-mob-dn-as-cr-as-bs-le-ht, var(--_ctm-tab-dn-as-cr-as-bs-le-ht, var(--_ctm-dn-as-cr-as-bs-le-ht)) ); font-style: var( --_ctm-mob-dn-as-cr-as-bs-ft-se-ic, var(--_ctm-tab-dn-as-cr-as-bs-ft-se-ic, var(--_ctm-dn-as-cr-as-bs-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-as-cr-as-bs-tt-an, var(--_ctm-tab-dn-as-cr-as-bs-tt-an, var(--_ctm-dn-as-cr-as-bs-tt-an)) ); } .checkbox_des { font-family: var( --_ctm-mob-dn-as-cr-as-bs-ft-fy-dc, var(--_ctm-tab-dn-as-cr-as-bs-ft-fy-dc, var(--_ctm-dn-as-cr-as-bs-ft-fy-dc)) ); text-transform: var( --_ctm-mob-dn-as-cr-as-bs-tt-tm-dc, var(--_ctm-tab-dn-as-cr-as-bs-tt-tm-dc, var(--_ctm-dn-as-cr-as-bs-tt-tm-dc)) ); word-wrap: var( --_ctm-mob-dn-as-cr-as-bs-wd-wp-dc, var(--_ctm-tab-dn-as-cr-as-bs-wd-wp-dc, var(--_ctm-dn-as-cr-as-bs-wd-wp-dc)) ); word-break: var( --_ctm-mob-dn-as-cr-as-bs-wd-bk-dc, var(--_ctm-tab-dn-as-cr-as-bs-wd-bk-dc, var(--_ctm-dn-as-cr-as-bs-wd-bk-dc)) ); color: var( --_ctm-mob-dn-as-cr-as-bs-cr-dc, var(--_ctm-tab-dn-as-cr-as-bs-cr-dc, var(--_ctm-dn-as-cr-as-bs-cr-dc)) ); font-weight: var( --_ctm-mob-dn-as-cr-as-bs-ft-wt-dc, var(--_ctm-tab-dn-as-cr-as-bs-ft-wt-dc, var(--_ctm-dn-as-cr-as-bs-ft-wt-dc)) ); font-size: var( --_ctm-mob-dn-as-cr-as-bs-ft-se-dc, var(--_ctm-tab-dn-as-cr-as-bs-ft-se-dc, var(--_ctm-dn-as-cr-as-bs-ft-se-dc)) ); text-decoration: var( --_ctm-mob-dn-as-cr-as-bs-ue-dc, var(--_ctm-tab-dn-as-cr-as-bs-ue-dc, var(--_ctm-dn-as-cr-as-bs-ue-dc)) ); letter-spacing: var( --_ctm-mob-dn-as-cr-as-bs-lr-sg-dc, var(--_ctm-tab-dn-as-cr-as-bs-lr-sg-dc, var(--_ctm-dn-as-cr-as-bs-lr-sg-dc)) ); line-height: var( --_ctm-mob-dn-as-cr-as-bs-le-ht-dc, var(--_ctm-tab-dn-as-cr-as-bs-le-ht-dc, var(--_ctm-dn-as-cr-as-bs-le-ht-dc)) ); font-style: var( --_ctm-mob-dn-as-cr-as-bs-ft-se-ic-dc, var(--_ctm-tab-dn-as-cr-as-bs-ft-se-ic-dc, var(--_ctm-dn-as-cr-as-bs-ft-se-ic-dc)) ); text-align: var( --_ctm-mob-dn-as-cr-as-bs-tt-an-dc, var(--_ctm-tab-dn-as-cr-as-bs-tt-an-dc, var(--_ctm-dn-as-cr-as-bs-tt-an-dc)) ); } } } // input radio styles .input_radio_a { position: relative; display: inline-flex; align-items: center; cursor: pointer; height: 20px; width: 20px; input[type="radio"] { opacity: 0; width: 0; height: 0; &:checked + .custom_radio::after { display: block; } } .custom_radio { height: 18px; width: 18px; border-radius: 50%; background-color: var(--_base-white); border: 2px solid var(--_gray-600); position: relative; transition: border-color 0.3s ease; &::after { content: ""; position: absolute; top: 3px; left: 3px; width: 8px; height: 8px; border-radius: 50%; background-color: var(--_primary-400); display: none; } } input[type="radio"]:checked + .custom_radio { border-color: var(--_primary-400); } &.disabled { opacity: 0.5; pointer-events: none; } } .input_color_picker_a { width: 100% !important; height: 48px; border-radius: 4px; border: 1px solid var(--Gray-300, #d0d5dd); background: var(--Base-White, #fff); box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); outline: none; transition: border-color 0.2s ease-in-out; font-size: 14px; cursor: pointer; } .attribute_currency_field { position: relative; input { padding: 12px 12px 12px 32px !important; } svg { position: absolute; left: 8px; top: 10px; background: #fff; } }