@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"; // A summary row is a label plus a value, and the builder emits one design scope per // row: the label typography under the bare keys, the value typography under the `-dc` // twins. `$scope` is the row's variable prefix, e.g. `--_ctm-dn-nr-of-is`. @mixin cartSummaryLabel($scope) { font-family: prepareMediaVariable(#{$scope}-ft-fy); word-wrap: prepareMediaVariable(#{$scope}-wd-wp); word-break: prepareMediaVariable(#{$scope}-wd-bk); color: prepareMediaVariable(#{$scope}-cr); font-weight: prepareMediaVariable(#{$scope}-ft-wt); font-size: prepareMediaVariable(#{$scope}-ft-se); text-decoration: prepareMediaVariable(#{$scope}-ue); letter-spacing: prepareMediaVariable(#{$scope}-lr-sg); line-height: prepareMediaVariable(#{$scope}-le-ht); font-style: prepareMediaVariable(#{$scope}-ft-se-ic); text-align: prepareMediaVariable(#{$scope}-tt-an); text-transform: prepareMediaVariable(#{$scope}-tt-tm); } @mixin cartSummaryValue($scope) { font-family: prepareMediaVariable(#{$scope}-ft-fy-dc); word-wrap: prepareMediaVariable(#{$scope}-wd-wp-dc); word-break: prepareMediaVariable(#{$scope}-wd-bk-dc); color: prepareMediaVariable(#{$scope}-cr-dc); font-weight: prepareMediaVariable(#{$scope}-ft-wt-dc); font-size: prepareMediaVariable(#{$scope}-ft-se-dc); text-decoration: prepareMediaVariable(#{$scope}-ue-dc); letter-spacing: prepareMediaVariable(#{$scope}-lr-sg-dc); line-height: prepareMediaVariable(#{$scope}-le-ht-dc); font-style: prepareMediaVariable(#{$scope}-ft-se-ic-dc); text-align: prepareMediaVariable(#{$scope}-tt-an-dc); text-transform: prepareMediaVariable(#{$scope}-tt-tm-dc); } // A design scope that only paints a box: background, padding, border and shadow. @mixin cartSummaryBox($scope) { background-color: prepareMediaVariable(#{$scope}-bd-cr); padding: prepareMediaVariable(#{$scope}-pg); border-color: prepareMediaVariable(#{$scope}-br-cr); border-style: prepareMediaVariable(#{$scope}-br-se); border-width: prepareMediaVariable(#{$scope}-br-wh); border-radius: prepareMediaVariable(#{$scope}-br-rs); } // The four shadow parts are separate custom properties, so each needs its own var(). @mixin cartSummaryShadow($scope) { box-shadow: prepareMediaVariable(#{$scope}-sw-ae) prepareMediaVariable(#{$scope}-sw-br) prepareMediaVariable(#{$scope}-sw-sd) prepareMediaVariable(#{$scope}-sw-cr); } [data-div-type="element"] { &[data-element-type="cartSummary"] { // width: var( // --_sf-el-wh-st-mx, // calc( // 1% * // var( // --_mob-ctm-ele-nw-wh-vl, // var(--_tab-ctm-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))) // ) // ) // ); // margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn))); & > div { &.wrapper { width: 100%; } } .cart_summary_wrapper { display: flex; flex-direction: column; align-items: center; align-self: stretch; border-radius: 4px; border: 0.5px solid var(--_thm-cs-be-se-3); background: #fff; // gap: var(--_ctm-lt-im-gp); padding: var(--_ctm-lt-pg); word-break: keep-all; overflow: hidden; .cart_summary_heading_wrapper { // The header is the accordion toggle, but only while Show Arrow Icon is on. &[data-is-collapsible="true"] { cursor: pointer; } display: flex; padding: var(--_ctm-lt-hg-pg); align-items: center; gap: 12px; align-self: stretch; // border-bottom: 0.5px solid var(--_thm-cs-be-se-3); // Border Radius was never read here, and Box Shadow wrapped all four parts in // a single var(), which made the declaration invalid. @include cartSummaryBox(--_ctm-dn-hr-cr); @include cartSummaryShadow(--_ctm-dn-hr-cr); // The arrow sits next to a width:100% heading, so without this it would be // squeezed instead of keeping the size set on the Icon Size control. .icon, .iconDesc { flex: 0 0 auto; display: flex; align-items: center; } .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-dc, 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)) ); } .cart_summary_heading { width: 100%; height: auto; max-height: 48px; display: flex; align-items: center; font-family: var( --_ctm-mob-dn-hr-cr-ft-fy, var(--_ctm-tab-dn-hr-cr-ft-fy, var(--_ctm-dn-hr-cr-ft-fy)) ); word-wrap: var( --_ctm-mob-dn-hr-cr-wd-wp, var(--_ctm-tab-dn-hr-cr-wd-wp, var(--_ctm-dn-hr-cr-wd-wp)) ); word-break: var( --_ctm-mob-dn-hr-cr-wd-bk, var(--_ctm-tab-dn-hr-cr-wd-bk, var(--_ctm-dn-hr-cr-wd-bk)) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } color: var(--_ctm-mob-dn-hr-cr-cr, var(--_ctm-tab-dn-hr-cr-cr, var(--_ctm-dn-hr-cr-cr))); font-weight: var( --_ctm-mob-dn-hr-cr-ft-wt, var(--_ctm-tab-dn-hr-cr-ft-wt, var(--_ctm-dn-hr-cr-ft-wt)) ); font-size: var( --_ctm-mob-dn-hr-cr-ft-se, var(--_ctm-tab-dn-hr-cr-ft-se, var(--_ctm-dn-hr-cr-ft-se)) ); text-decoration: var( --_ctm-mob-dn-hr-cr-ue, var(--_ctm-tab-dn-hr-cr-ue, var(--_ctm-dn-hr-cr-ue)) ); letter-spacing: var( --_ctm-mob-dn-hr-cr-lr-sg, var(--_ctm-tab-dn-hr-cr-lr-sg, var(--_ctm-dn-hr-cr-lr-sg)) ); line-height: var( --_ctm-mob-dn-hr-cr-le-ht, var(--_ctm-tab-dn-hr-cr-le-ht, var(--_ctm-dn-hr-cr-le-ht)) ); font-style: var( --_ctm-mob-dn-hr-cr-ft-se-ic, var(--_ctm-tab-dn-hr-cr-ft-se-ic, var(--_ctm-dn-hr-cr-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-hr-cr-tt-an, var(--_ctm-tab-dn-hr-cr-tt-an, var(--_ctm-dn-hr-cr-tt-an)) ); text-transform: prepareMediaVariable(--_ctm-dn-hr-cr-tt-tm); } } .cart_summary_content_wrapper { // Collapsed by the heading arrow, so the widget behaves like a dropdown. &[data-is-expanded="false"] { display: none; } // padding: calc(var(--_ctm-lt-by-pg) / 2) var(--_ctm-lt-by-pg); // padding: var(--_ctm-lt-by-pg); // gap: var(--_ctm-lt-im-gp); border-top: 1px solid var(--_thm-cs-be-se-3); background-color: var( --_ctm-mob-dn-ct-by-wt-bd-cr, var(--_ctm-tab-dn-ct-by-wt-bd-cr, var(--_ctm-dn-ct-by-wt-bd-cr)) ); padding: var( --_ctm-mob-dn-ct-by-wt-pg, var(--_ctm-tab-dn-ct-by-wt-pg, var(--_ctm-dn-ct-by-wt-pg)) ); gap: var( --_ctm-mob-dn-ct-by-wt-im-gp, var(--_ctm-tab-dn-ct-by-wt-im-gp, var(--_ctm-dn-ct-by-wt-im-gp)) ); border-color: var( --_ctm-mob-dn-ct-by-wt-br-cr, var(--_ctm-tab-dn-ct-by-wt-br-cr, var(--_ctm-dn-ct-by-wt-br-cr)) ); border-style: var( --_ctm-mob-dn-ct-by-wt-br-se, var(--_ctm-tab-dn-ct-by-wt-br-se, var(--_ctm-dn-ct-by-wt-br-se)) ); border-width: var( --_ctm-mob-dn-ct-by-wt-br-wh, var(--_ctm-tab-dn-ct-by-wt-br-wh, var(--_ctm-dn-ct-by-wt-br-wh)) ); border-radius: var( --_ctm-mob-dn-ct-by-wt-br-rs, var(--_ctm-tab-dn-ct-by-wt-br-rs, var(--_ctm-dn-ct-by-wt-br-rs)) ); // The body widget already carried typography in the schema but nothing read // it. It is the body's text default now, which every row with its own design // section overrides. @include cartSummaryLabel(--_ctm-dn-ct-by-wt); display: flex; flex-direction: column; width: 100%; .cart_summary_products_container { display: flex; width: 100%; flex-direction: column; // gap: var(--_ctm-lt-im-gp); background-color: var( --_ctm-mob-dn-pt-wt-pt-wt-wr-bd-cr, var(--_ctm-tab-dn-pt-wt-pt-wt-wr-bd-cr, var(--_ctm-dn-pt-wt-pt-wt-wr-bd-cr)) ); padding: var( --_ctm-mob-dn-pt-wt-pt-wt-wr-pg, var(--_ctm-tab-dn-pt-wt-pt-wt-wr-pg, var(--_ctm-dn-pt-wt-pt-wt-wr-pg)) ); gap: var( --_ctm-mob-dn-pt-wt-pt-wt-wr-im-gp, var(--_ctm-tab-dn-pt-wt-pt-wt-wr-im-gp, var(--_ctm-dn-pt-wt-pt-wt-wr-im-gp)) ); border-color: var( --_ctm-mob-dn-pt-wt-pt-wt-wr-br-cr, var(--_ctm-tab-dn-pt-wt-pt-wt-wr-br-cr, var(--_ctm-dn-pt-wt-pt-wt-wr-br-cr)) ); border-style: var( --_ctm-mob-dn-pt-wt-pt-wt-wr-br-se, var(--_ctm-tab-dn-pt-wt-pt-wt-wr-br-se, var(--_ctm-dn-pt-wt-pt-wt-wr-br-se)) ); border-width: var( --_ctm-mob-dn-pt-wt-pt-wt-wr-br-wh, var(--_ctm-tab-dn-pt-wt-pt-wt-wr-br-wh, var(--_ctm-dn-pt-wt-pt-wt-wr-br-wh)) ); border-radius: var( --_ctm-mob-dn-pt-wt-pt-wt-wr-br-rs, var(--_ctm-tab-dn-pt-wt-pt-wt-wr-br-rs, var(--_ctm-dn-pt-wt-pt-wt-wr-br-rs)) ); // Product Widget Item — one product card. Nothing but the item gap used to // be read here, so Background Color, Border, Border Radius and Padding had // no effect. .cart_summary_product_item { display: flex; align-items: flex-start; justify-content: space-between; @include cartSummaryBox(--_ctm-dn-pt-wt-pt-wt-im); .cart_summary_product_info_wrapper { display: flex; gap: var( --_ctm-mob-dn-pt-wt-pt-wt-im-im-gp, var(--_ctm-tab-dn-pt-wt-pt-wt-im-im-gp, var(--_ctm-dn-pt-wt-pt-wt-im-im-gp)) ); width: 80%; align-items: flex-start; // Product Image. The outline used to be a hard-coded // `1px solid var(--_gray-200)` with a 4px radius, so none of the Border, // Border Style, Border Radius or Box Shadow settings could reach it. .cart_summary_pro_container { width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; @include cartSummaryBox(--_ctm-dn-pt-wt-pt-ie); @include cartSummaryShadow(--_ctm-dn-pt-wt-pt-ie); .cart_summary_product_img { width: 100%; height: 100%; object-fit: cover; } } .cart_summary_product_content_wrapper { display: flex; flex-direction: column; gap: 4px; width: 100%; // gap: calc(var(--_ctm-lt-im-gp) / 4); .cart_summary_product_content { display: flex; flex-direction: column; // pt-wt-pt-qy-ft-fy // Padding belongs to the row: applying it to the label and the value // separately would apply the section's padding twice. .cart_summary_qty_wrapper { display: flex; flex-wrap: wrap; align-items: center; padding: prepareMediaVariable(--_ctm-dn-pt-wt-pt-qy-pg); } .cart_summary_estimatedDate_wrapper { display: flex; flex-wrap: wrap; align-items: center; padding: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ed-de-pg); } .cart_summary_qty_text { font-family: var( --_ctm-mob-dn-pt-wt-pt-qy-ft-fy, var(--_ctm-tab-dn-pt-wt-pt-qy-ft-fy, var(--_ctm-dn-pt-wt-pt-qy-ft-fy)) ); word-wrap: var( --_ctm-mob-dn-pt-wt-pt-qy-wd-wp, var(--_ctm-tab-dn-pt-wt-pt-qy-wd-wp, var(--_ctm-dn-pt-wt-pt-qy-wd-wp)) ); word-break: var( --_ctm-mob-dn-pt-wt-pt-qy-wd-bk, var(--_ctm-tab-dn-pt-wt-pt-qy-wd-bk, var(--_ctm-dn-pt-wt-pt-qy-wd-bk)) ); color: var( --_ctm-mob-dn-pt-wt-pt-qy-cr, var(--_ctm-tab-dn-pt-wt-pt-qy-cr, var(--_ctm-dn-pt-wt-pt-qy-cr)) ); font-weight: var( --_ctm-mob-dn-pt-wt-pt-qy-ft-wt, var(--_ctm-tab-dn-pt-wt-pt-qy-ft-wt, var(--_ctm-dn-pt-wt-pt-qy-ft-wt)) ); font-size: var( --_ctm-mob-dn-pt-wt-pt-qy-ft-se, var(--_ctm-tab-dn-pt-wt-pt-qy-ft-se, var(--_ctm-dn-pt-wt-pt-qy-ft-se)) ); // font-size: 12px; text-decoration: var( --_ctm-mob-dn-pt-wt-pt-qy-ue, var(--_ctm-tab-dn-pt-wt-pt-qy-ue, var(--_ctm-dn-pt-wt-pt-qy-ue)) ); letter-spacing: var( --_ctm-mob-dn-pt-wt-pt-qy-lr-sg, var(--_ctm-tab-dn-pt-wt-pt-qy-lr-sg, var(--_ctm-dn-pt-wt-pt-qy-lr-sg)) ); line-height: var( --_ctm-mob-dn-pt-wt-pt-qy-le-ht, var(--_ctm-tab-dn-pt-wt-pt-qy-le-ht, var(--_ctm-dn-pt-wt-pt-qy-le-ht)) ); font-style: var( --_ctm-mob-dn-pt-wt-pt-qy-ft-se-ic, var(--_ctm-tab-dn-pt-wt-pt-qy-ft-se-ic, var(--_ctm-dn-pt-wt-pt-qy-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-pt-wt-pt-qy-tt-an, var(--_ctm-tab-dn-pt-wt-pt-qy-tt-an, var(--_ctm-dn-pt-wt-pt-qy-tt-an)) ); text-transform: prepareMediaVariable(--_ctm-dn-pt-wt-pt-qy-tt-tm); } .cart_summary_qty_value { font-family: var( --_ctm-mob-dn-pt-wt-pt-qy-ft-fy-dc, var(--_ctm-tab-dn-pt-wt-pt-qy-ft-fy-dc, var(--_ctm-dn-pt-wt-pt-qy-ft-fy-dc)) ); word-wrap: var( --_ctm-mob-dn-pt-wt-pt-qy-wd-wp-dc, var(--_ctm-tab-dn-pt-wt-pt-qy-wd-wp-dc, var(--_ctm-dn-pt-wt-pt-qy-wd-wp-dc)) ); word-break: var( --_ctm-mob-dn-pt-wt-pt-qy-wd-bk-dc, var(--_ctm-tab-dn-pt-wt-pt-qy-wd-bk-dc, var(--_ctm-dn-pt-wt-pt-qy-wd-bk-dc)) ); color: var( --_ctm-mob-dn-pt-wt-pt-qy-cr-dc, var(--_ctm-tab-dn-pt-wt-pt-qy-cr-dc, var(--_ctm-dn-pt-wt-pt-qy-cr-dc)) ); font-weight: var( --_ctm-mob-dn-pt-wt-pt-qy-ft-wt-dc, var(--_ctm-tab-dn-pt-wt-pt-qy-ft-wt-dc, var(--_ctm-dn-pt-wt-pt-qy-ft-wt-dc)) ); font-size: var( --_ctm-mob-dn-pt-wt-pt-qy-ft-se-dc, var(--_ctm-tab-dn-pt-wt-pt-qy-ft-se-dc, var(--_ctm-dn-pt-wt-pt-qy-ft-se-dc)) ); // font-size: 12px; text-decoration: var( --_ctm-mob-dn-pt-wt-pt-qy-ue-dc, var(--_ctm-tab-dn-pt-wt-pt-qy-ue-dc, var(--_ctm-dn-pt-wt-pt-qy-ue-dc)) ); letter-spacing: var( --_ctm-mob-dn-pt-wt-pt-qy-lr-sg-dc, var(--_ctm-tab-dn-pt-wt-pt-qy-lr-sg-dc, var(--_ctm-dn-pt-wt-pt-qy-lr-sg-dc)) ); line-height: var( --_ctm-mob-dn-pt-wt-pt-qy-le-ht-dc, var(--_ctm-tab-dn-pt-wt-pt-qy-le-ht-dc, var(--_ctm-dn-pt-wt-pt-qy-le-ht-dc)) ); font-style: var( --_ctm-mob-dn-pt-wt-pt-qy-ft-se-ic-dc, var( --_ctm-tab-dn-pt-wt-pt-qy-ft-se-ic-dc, var(--_ctm-dn-pt-wt-pt-qy-ft-se-ic-dc) ) ); text-align: var( --_ctm-mob-dn-pt-wt-pt-qy-tt-an-dc, var(--_ctm-tab-dn-pt-wt-pt-qy-tt-an-dc, var(--_ctm-dn-pt-wt-pt-qy-tt-an-dc)) ); text-transform: prepareMediaVariable(--_ctm-dn-pt-wt-pt-qy-tt-tm-dc); } .cart_summary_estimatedDate_text { font-family: var( --_ctm-mob-dn-pt-wt-pt-ed-de-ft-fy, var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-fy, var(--_ctm-dn-pt-wt-pt-ed-de-ft-fy)) ); word-wrap: var( --_ctm-mob-dn-pt-wt-pt-ed-de-wd-wp, var(--_ctm-tab-dn-pt-wt-pt-ed-de-wd-wp, var(--_ctm-dn-pt-wt-pt-ed-de-wd-wp)) ); word-break: var( --_ctm-mob-dn-pt-wt-pt-ed-de-wd-bk, var(--_ctm-tab-dn-pt-wt-pt-ed-de-wd-bk, var(--_ctm-dn-pt-wt-pt-ed-de-wd-bk)) ); color: var( --_ctm-mob-dn-pt-wt-pt-ed-de-cr, var(--_ctm-tab-dn-pt-wt-pt-ed-de-cr, var(--_ctm-dn-pt-wt-pt-ed-de-cr)) ); font-weight: var( --_ctm-mob-dn-pt-wt-pt-ed-de-ft-wt, var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-wt, var(--_ctm-dn-pt-wt-pt-ed-de-ft-wt)) ); font-size: var( --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se, var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-se, var(--_ctm-dn-pt-wt-pt-ed-de-ft-se)) ); text-decoration: var( --_ctm-mob-dn-pt-wt-pt-ed-de-ue, var(--_ctm-tab-dn-pt-wt-pt-ed-de-ue, var(--_ctm-dn-pt-wt-pt-ed-de-ue)) ); letter-spacing: var( --_ctm-mob-dn-pt-wt-pt-ed-de-lr-sg, var(--_ctm-tab-dn-pt-wt-pt-ed-de-lr-sg, var(--_ctm-dn-pt-wt-pt-ed-de-lr-sg)) ); line-height: var( --_ctm-mob-dn-pt-wt-pt-ed-de-le-ht, var(--_ctm-tab-dn-pt-wt-pt-ed-de-le-ht, var(--_ctm-dn-pt-wt-pt-ed-de-le-ht)) ); font-style: var( --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se-ic, var( --_ctm-tab-dn-pt-wt-pt-ed-de-ft-se-ic, var(--_ctm-dn-pt-wt-pt-ed-de-ft-se-ic) ) ); text-align: var( --_ctm-mob-dn-pt-wt-pt-ed-de-tt-an, var(--_ctm-tab-dn-pt-wt-pt-ed-de-tt-an, var(--_ctm-dn-pt-wt-pt-ed-de-tt-an)) ); text-transform: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ed-de-tt-tm); } .cart_summary_estimatedDate_value { font-family: var( --_ctm-mob-dn-pt-wt-pt-ed-de-ft-fy-dc, var( --_ctm-tab-dn-pt-wt-pt-ed-de-ft-fy-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ft-fy-dc) ) ); word-wrap: var( --_ctm-mob-dn-pt-wt-pt-ed-de-wd-wp-dc, var( --_ctm-tab-dn-pt-wt-pt-ed-de-wd-wp-dc, var(--_ctm-dn-pt-wt-pt-ed-de-wd-wp-dc) ) ); word-break: var( --_ctm-mob-dn-pt-wt-pt-ed-de-wd-bk-dc, var( --_ctm-tab-dn-pt-wt-pt-ed-de-wd-bk-dc, var(--_ctm-dn-pt-wt-pt-ed-de-wd-bk-dc) ) ); color: var( --_ctm-mob-dn-pt-wt-pt-ed-de-cr-dc, var(--_ctm-tab-dn-pt-wt-pt-ed-de-cr-dc, var(--_ctm-dn-pt-wt-pt-ed-de-cr-dc)) ); font-weight: var( --_ctm-mob-dn-pt-wt-pt-ed-de-ft-wt-dc, var( --_ctm-tab-dn-pt-wt-pt-ed-de-ft-wt-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ft-wt-dc) ) ); font-size: var( --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se-dc, var( --_ctm-tab-dn-pt-wt-pt-ed-de-ft-se-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ft-se-dc) ) ); text-decoration: var( --_ctm-mob-dn-pt-wt-pt-ed-de-ue-dc, var(--_ctm-tab-dn-pt-wt-pt-ed-de-ue-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ue-dc)) ); letter-spacing: var( --_ctm-mob-dn-pt-wt-pt-ed-de-lr-sg-dc, var( --_ctm-tab-dn-pt-wt-pt-ed-de-lr-sg-dc, var(--_ctm-dn-pt-wt-pt-ed-de-lr-sg-dc) ) ); line-height: var( --_ctm-mob-dn-pt-wt-pt-ed-de-le-ht-dc, var( --_ctm-tab-dn-pt-wt-pt-ed-de-le-ht-dc, var(--_ctm-dn-pt-wt-pt-ed-de-le-ht-dc) ) ); font-style: var( --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se-ic-dc, var( --_ctm-tab-dn-pt-wt-pt-ed-de-ft-se-ic-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ft-se-ic-dc) ) ); text-align: var( --_ctm-mob-dn-pt-wt-pt-ed-de-tt-an-dc, var( --_ctm-tab-dn-pt-wt-pt-ed-de-tt-an-dc, var(--_ctm-dn-pt-wt-pt-ed-de-tt-an-dc) ) ); text-transform: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ed-de-tt-tm-dc); } } } } } } .coupon_code_wrapper { display: flex; flex-direction: column; gap: var(--_ctm-lt-im-gp); width: 100%; .coupon_code_btn_wrapper { display: flex; justify-content: space-between; width: 100%; } .coupon_code_input { width: 100%; padding: 8px 12px; border-radius: 6px; border: 1px solid #d0d5dd; background-color: #ffffff; box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); font-size: 16px; line-height: 24px; height: 40px; &::placeholder { font-size: 14px; } } .success_message { display: flex; flex: 1 0 0; flex-wrap: wrap; color: green; } .error_message { display: flex; flex: 1 0 0; flex-wrap: wrap; color: red; } } // Every summary row gets its own label/value classes so a design section only // reaches the field it belongs to. .subtotal_wrapper { display: flex; align-items: center; gap: 16px; align-self: stretch; justify-content: space-between; // Number of Items .cart_summary_number_text { @include cartSummaryLabel(--_ctm-dn-nr-of-is); } .cart_summary_number_value { @include cartSummaryValue(--_ctm-dn-nr-of-is); } // Sub Total .cart_summary_subTotal_text { @include cartSummaryLabel(--_ctm-dn-sb-tl); } .cart_summary_subTotal_value { @include cartSummaryValue(--_ctm-dn-sb-tl); } // Shipping Charges .cart_summary_shippingLabel_text { @include cartSummaryLabel(--_ctm-dn-sg-cs); } .cart_summary_shippingLabel_value { @include cartSummaryValue(--_ctm-dn-sg-cs); } // Tax .cart_summary_tax_text { @include cartSummaryLabel(--_ctm-dn-tx); } .cart_summary_tax_value { @include cartSummaryValue(--_ctm-dn-tx); } // Show Coupon Amount .cart_summary_show_coupon_text { @include cartSummaryLabel(--_ctm-dn-sw-cn-ce-ll); } .cart_summary_show_coupon_value { @include cartSummaryValue(--_ctm-dn-sw-cn-ce-ll); } // Embellishment Price .cart_summary_embellishment_text { @include cartSummaryLabel(--_ctm-dn-et-pe); } .cart_summary_embellishment_value { @include cartSummaryValue(--_ctm-dn-et-pe); } // Attributes Amount .cart_summary_attributes_text { @include cartSummaryLabel(--_ctm-dn-as-at); } .cart_summary_attributes_value { @include cartSummaryValue(--_ctm-dn-as-at); } // Gift Card Amount .cart_summary_show_gift_card_text { @include cartSummaryLabel(--_ctm-dn-gt-cd-at); } .cart_summary_show_gift_card_value { @include cartSummaryValue(--_ctm-dn-gt-cd-at); } // Deal Amount .cart_summary_show_deal_text { @include cartSummaryLabel(--_ctm-dn-dl-at); } .cart_summary_show_deal_value { @include cartSummaryValue(--_ctm-dn-dl-at); } } .cart_summary_content_details_wrapper { display: flex; flex-direction: column; gap: 8px; // Each row's padding comes from its own design section. .cart_summary_number_text, .cart_summary_number_value { padding: prepareMediaVariable(--_ctm-dn-nr-of-is-pg); } .cart_summary_subTotal_text, .cart_summary_subTotal_value { padding: prepareMediaVariable(--_ctm-dn-sb-tl-pg); } .cart_summary_shippingLabel_text, .cart_summary_shippingLabel_value { padding: prepareMediaVariable(--_ctm-dn-sg-cs-pg); } .cart_summary_tax_text, .cart_summary_tax_value { padding: prepareMediaVariable(--_ctm-dn-tx-pg); } .cart_summary_show_coupon_text, .cart_summary_show_coupon_value { padding: prepareMediaVariable(--_ctm-dn-sw-cn-ce-ll-pg); } .cart_summary_embellishment_text, .cart_summary_embellishment_value { padding: prepareMediaVariable(--_ctm-dn-et-pe-pg); } .cart_summary_attributes_text, .cart_summary_attributes_value { padding: prepareMediaVariable(--_ctm-dn-as-at-pg); } .cart_summary_show_gift_card_text, .cart_summary_show_gift_card_value { padding: prepareMediaVariable(--_ctm-dn-gt-cd-at-pg); } .cart_summary_show_deal_text, .cart_summary_show_deal_value { padding: prepareMediaVariable(--_ctm-dn-dl-at-pg); } } .cart_summary_total_wrapper { display: flex; flex-direction: column; gap: 8px; .subtotal_wrapper { display: flex; align-items: center; gap: 16px; align-self: stretch; justify-content: space-between; // Total .cart_summary_total_text { @include cartSummaryLabel(--_ctm-dn-tl); padding: prepareMediaVariable(--_ctm-dn-tl-pg); } .cart_summary_total_value { @include cartSummaryValue(--_ctm-dn-tl); padding: prepareMediaVariable(--_ctm-dn-tl-pg); } } } } // Product Name .cart_summary_heading_text { @include cartSummaryLabel(--_ctm-dn-pt-wt-pt-ne); padding: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ne-pg); &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } } // Product Price. The amount is rendered by CurrencyDisplay as a nested // `.currency_span`, which inherits every one of these. .cart_summary_primary_text { @include cartSummaryLabel(--_ctm-dn-pt-wt-pt-pe); padding: prepareMediaVariable(--_ctm-dn-pt-wt-pt-pe-pg); margin-top: 2px; } // Product Code .cart_summary_product_text { @include cartSummaryLabel(--_ctm-dn-pt-wt-pt-ce); padding: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ce-pg); word-break: break-word; } .cart_summary_secondary_text { color: var(--_ctm-dn-sy-tt-dn-cr); font-family: var(--_ctm-dn-sy-tt-dn-ft-fy); text-transform: var(--_ctm-dn-sy-tt-dn-tt-tm); word-wrap: var(--_ctm-dn-sy-tt-dn-wd-wp); word-break: var(--_ctm-dn-sy-tt-dn-wd-bk); font-size: var(--_ctm-dn-sy-tt-dn-ft-se); font-style: var(--_ctm-dn-sy-tt-dn-ft-se-ic); font-weight: var(--_ctm-dn-sy-tt-dn-ft-wt); line-height: var(--_ctm-dn-sy-tt-dn-le-ht); letter-spacing: var(--_ctm-dn-sy-tt-dn-lr-sg); text-align: var(--_ctm-dn-sy-tt-dn-tt-an); text-decoration: var(--_ctm-dn-sy-tt-dn-ue); } // .cart_summary_total_text { // color: var(--_ctm-dn-tl-at-dn-cr); // font-family: var(--_ctm-dn-tl-at-dn-ft-fy); // font-size: var(--_ctm-dn-tl-at-dn-ft-se); // font-style: var(--_ctm-dn-tl-at-dn-ft-se-ic); // font-weight: var(--_ctm-dn-tl-at-dn-ft-wt); // line-height: var(--_ctm-dn-tl-at-dn-le-ht); // letter-spacing: var(--_ctm-dn-tl-at-dn-lr-sg); // text-align: var(--_ctm-dn-tl-at-dn-tt-an); // text-decoration: var(--_ctm-dn-tl-at-dn-ue); // } .cart_summary_primary_btn_wrapper { padding: var(--_ctm-lt-bn-pg) calc(var(--_ctm-lt-bn-pg) * 2); width: 100%; height: auto; min-height: 48px; background-color: var( --_ctm-mob-dn-ct-as-ct-dt-se-bd-cr, var(--_ctm-tab-dn-ct-as-ct-dt-se-bd-cr, var(--_ctm-dn-ct-as-ct-dt-se-bd-cr)) ); border-color: var( --_ctm-mob-dn-ct-as-ct-dt-se-br-cr, var(--_ctm-tab-dn-ct-as-ct-dt-se-br-cr, var(--_ctm-dn-ct-as-ct-dt-se-br-cr)) ); border-radius: var( --_ctm-mob-dn-ct-as-ct-dt-se-br-rs, var(--_ctm-tab-dn-ct-as-ct-dt-se-br-rs, var(--_ctm-dn-ct-as-ct-dt-se-br-rs)) ); border-style: var( --_ctm-mob-dn-ct-as-ct-dt-se-br-se, var(--_ctm-tab-dn-ct-as-ct-dt-se-br-se, var(--_ctm-dn-ct-as-ct-dt-se-br-se)) ); border-width: var( --_ctm-mob-dn-ct-as-ct-dt-se-br-wh, var(--_ctm-tab-dn-ct-as-ct-dt-se-br-wh, var(--_ctm-dn-ct-as-ct-dt-se-br-wh)) ); color: var( --_ctm-mob-dn-ct-as-ct-dt-se-cr, var(--_ctm-tab-dn-ct-as-ct-dt-se-cr, var(--_ctm-dn-ct-as-ct-dt-se-cr)) ); font-family: var( --_ctm-mob-dn-ct-as-ct-dt-se-ft-fy, var(--_ctm-tab-dn-ct-as-ct-dt-se-ft-fy, var(--_ctm-dn-ct-as-ct-dt-se-ft-fy)) ); text-transform: var( --_ctm-mob-dn-ct-as-ct-dt-se-tt-tm, var(--_ctm-tab-dn-ct-as-ct-dt-se-tt-tm, var(--_ctm-dn-ct-as-ct-dt-se-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-ct-as-ct-dt-se-wd-wp, var(--_ctm-tab-dn-ct-as-ct-dt-se-wd-wp, var(--_ctm-dn-ct-as-ct-dt-se-wd-wp)) ); word-break: var( --_ctm-mob-dn-ct-as-ct-dt-se-wd-bk, var(--_ctm-tab-dn-ct-as-ct-dt-se-wd-bk, var(--_ctm-dn-ct-as-ct-dt-se-wd-bk)) ); font-size: var( --_ctm-mob-dn-ct-as-ct-dt-se-ft-se, var(--_ctm-tab-dn-ct-as-ct-dt-se-ft-se, var(--_ctm-dn-ct-as-ct-dt-se-ft-se)) ); font-style: var( --_ctm-mob-dn-ct-as-ct-dt-se-ft-se-ic, var(--_ctm-tab-dn-ct-as-ct-dt-se-ft-se-ic, var(--_ctm-dn-ct-as-ct-dt-se-ft-se-ic)) ); font-weight: var( --_ctm-mob-dn-ct-as-ct-dt-se-ft-wt, var(--_ctm-tab-dn-ct-as-ct-dt-se-ft-wt, var(--_ctm-dn-ct-as-ct-dt-se-ft-wt)) ); line-height: var( --_ctm-mob-dn-ct-as-ct-dt-se-le-ht, var(--_ctm-tab-dn-ct-as-ct-dt-se-le-ht, var(--_ctm-dn-ct-as-ct-dt-se-le-ht)) ); letter-spacing: var( --_ctm-mob-dn-ct-as-ct-dt-se-lr-sg, var(--_ctm-tab-dn-ct-as-ct-dt-se-lr-sg, var(--_ctm-dn-ct-as-ct-dt-se-lr-sg)) ); box-shadow: var( --_ctm-mob-dn-ct-as-ct-dt-se-sw-ae, var(--_ctm-tab-dn-ct-as-ct-dt-se-sw-ae, var(--_ctm-dn-ct-as-ct-dt-se-sw-ae)) ) var( --_ctm-mob-dn-ct-as-ct-dt-se-sw-br, var(--_ctm-tab-dn-ct-as-ct-dt-se-sw-br, var(--_ctm-dn-ct-as-ct-dt-se-sw-br)) ) var( --_ctm-mob-dn-ct-as-ct-dt-se-sw-sd, var(--_ctm-tab-dn-ct-as-ct-dt-se-sw-sd, var(--_ctm-dn-ct-as-ct-dt-se-sw-sd)) ) var( --_ctm-mob-dn-ct-as-ct-dt-se-sw-cr, var(--_ctm-tab-dn-ct-as-ct-dt-se-sw-cr, var(--_ctm-dn-ct-as-ct-dt-se-sw-cr)) ); text-decoration: var( --_ctm-mob-dn-ct-as-ct-dt-se-ue, var(--_ctm-tab-dn-ct-as-ct-dt-se-ue, var(--_ctm-dn-ct-as-ct-dt-se-ue)) ); padding: var( --_ctm-mob-dn-ct-as-ct-dt-se-pg, var(--_ctm-tab-dn-ct-as-ct-dt-se-pg, var(--_ctm-dn-ct-as-ct-dt-se-pg)) ); text-align: var( --_ctm-mob-dn-ct-as-ct-dt-se-tt-an, var(--_ctm-tab-dn-ct-as-ct-dt-se-tt-an, var(--_ctm-dn-ct-as-ct-dt-se-tt-an)) ); &:hover { background-color: var( --_ctm-mob-dn-ct-bn-hr-se-bd-cr, var(--_ctm-tab-dn-ct-bn-hr-se-bd-cr, var(--_ctm-dn-ct-bn-hr-se-bd-cr)) ); border-color: var( --_ctm-mob-dn-ct-bn-hr-se-br-cr, var(--_ctm-tab-dn-ct-bn-hr-se-br-cr, var(--_ctm-dn-ct-bn-hr-se-br-cr)) ); border-radius: var( --_ctm-mob-dn-ct-bn-hr-se-br-rs, var(--_ctm-tab-dn-ct-bn-hr-se-br-rs, var(--_ctm-dn-ct-bn-hr-se-br-rs)) ); border-style: var( --_ctm-mob-dn-ct-bn-hr-se-br-se, var(--_ctm-tab-dn-ct-bn-hr-se-br-se, var(--_ctm-dn-ct-bn-hr-se-br-se)) ); border-width: var( --_ctm-mob-dn-ct-bn-hr-se-br-wh, var(--_ctm-tab-dn-ct-bn-hr-se-br-wh, var(--_ctm-dn-ct-bn-hr-se-br-wh)) ); color: var( --_ctm-mob-dn-ct-bn-hr-se-cr, var(--_ctm-tab-dn-ct-bn-hr-se-cr, var(--_ctm-dn-ct-bn-hr-se-cr)) ); font-family: var( --_ctm-mob-dn-ct-bn-hr-se-ft-fy, var(--_ctm-tab-dn-ct-bn-hr-se-ft-fy, var(--_ctm-dn-ct-bn-hr-se-ft-fy)) ); text-transform: var( --_ctm-mob-dn-ct-bn-hr-se-tt-tm, var(--_ctm-tab-dn-ct-bn-hr-se-tt-tm, var(--_ctm-dn-ct-bn-hr-se-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-ct-bn-hr-se-wd-wp, var(--_ctm-tab-dn-ct-bn-hr-se-wd-wp, var(--_ctm-dn-ct-bn-hr-se-wd-wp)) ); word-break: var( --_ctm-mob-dn-ct-bn-hr-se-wd-bk, var(--_ctm-tab-dn-ct-bn-hr-se-wd-bk, var(--_ctm-dn-ct-bn-hr-se-wd-bk)) ); font-size: var( --_ctm-mob-dn-ct-bn-hr-se-ft-se, var(--_ctm-tab-dn-ct-bn-hr-se-ft-se, var(--_ctm-dn-ct-bn-hr-se-ft-se)) ); font-style: var( --_ctm-mob-dn-ct-bn-hr-se-ft-se-ic, var(--_ctm-tab-dn-ct-bn-hr-se-ft-se-ic, var(--_ctm-dn-ct-bn-hr-se-ft-se-ic)) ); font-weight: var( --_ctm-mob-dn-ct-bn-hr-se-ft-wt, var(--_ctm-tab-dn-ct-bn-hr-se-ft-wt, var(--_ctm-dn-ct-bn-hr-se-ft-wt)) ); line-height: var( --_ctm-mob-dn-ct-bn-hr-se-le-ht, var(--_ctm-tab-dn-ct-bn-hr-se-le-ht, var(--_ctm-dn-ct-bn-hr-se-le-ht)) ); letter-spacing: var( --_ctm-mob-dn-ct-bn-hr-se-lr-sg, var(--_ctm-tab-dn-ct-bn-hr-se-lr-sg, var(--_ctm-dn-ct-bn-hr-se-lr-sg)) ); box-shadow: var( --_ctm-mob-dn-ct-bn-hr-se-sw-ae, var(--_ctm-tab-dn-ct-bn-hr-se-sw-ae, var(--_ctm-dn-ct-bn-hr-se-sw-ae)) ) var( --_ctm-mob-dn-ct-bn-hr-se-sw-br, var(--_ctm-tab-dn-ct-bn-hr-se-sw-br, var(--_ctm-dn-ct-bn-hr-se-sw-br)) ) var( --_ctm-mob-dn-ct-bn-hr-se-sw-sd, var(--_ctm-tab-dn-ct-bn-hr-se-sw-sd, var(--_ctm-dn-ct-bn-hr-se-sw-sd)) ) var( --_ctm-mob-dn-ct-bn-hr-se-sw-cr, var(--_ctm-tab-dn-ct-bn-hr-se-sw-cr, var(--_ctm-dn-ct-bn-hr-se-sw-cr)) ); text-decoration: var( --_ctm-mob-dn-ct-bn-hr-se-ue, var(--_ctm-tab-dn-ct-bn-hr-se-ue, var(--_ctm-dn-ct-bn-hr-se-ue)) ); padding: var( --_ctm-mob-dn-ct-bn-hr-se-pg, var(--_ctm-tab-dn-ct-bn-hr-se-pg, var(--_ctm-dn-ct-bn-hr-se-pg)) ); text-align: var( --_ctm-mob-dn-ct-bn-hr-se-tt-an, var(--_ctm-tab-dn-ct-bn-hr-se-tt-an, var(--_ctm-dn-ct-bn-hr-se-tt-an)) ); } } .btn__with__text[data-btn-name="checkoutButton"] { width: 100%; &[data-show-shadow="false"] { --_show-shadow: none; } &[data-icon-position="left"] { --_sf-fd-bn: row; } &[data-icon-position="right"] { --_sf-fd-bn: row-reverse; } &[data-icon-position="center"] { --_sf-fd-bn: row; } &:hover { --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-bd-cr)}; --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-br-cr)}; --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-br-se)}; --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-br-wh)}; --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-br-rs)}; --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-at)}; --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-gp)}; // for shadow --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-sw-ae)}; --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-sw-br)}; --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-sw-hr)}; --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-ct-as-ct-hr-se-sw-cr)}; // for font --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-cr)}; --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-ft-fy)}; --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-ft-se)}; --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-ft-wt)}; --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-ft-se-ic)}; --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-tt-an)}; --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-lr-sg)}; --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-le-ht)}; --_sf-hr-txt-tr: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-tt-tm)}; --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-in-se)}; --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-in-se)}; --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-in-c1)}; --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-ue)}; // for pading and width --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-pg)}; --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-wh)}; &[data-hover-show-shadow="false"] { --_hover-show-shadow: none; } &[data-hover-show-icon="false"] { --_hover-show-icon: none; } } background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-bd-cr)); padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-pg)); width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-wh)); display: flex; flex-direction: var(--_sf-fd-bn); align-items: center; justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-at)); gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-gp)); border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-br-rs)); box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-sw-cr)); &[data-show-border="true"] { width: 100%; border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-br-cr)); border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-br-se)); border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-br-wh)); } .txt { display: flex; color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-cr)); font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-ft-fy)); word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-wd-wp)); word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-wd-bk)); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-ft-se)); font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-ft-wt)); font-style: var( --_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-ft-se-ic) ); text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-tt-an)); letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-lr-sg)); line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-le-ht)); text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-ue)); text-transform: var( --_sf-hr-txt-tr, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-tt-tm) ); &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } } .icon { display: var(--_hover-show-icon, var(--_show-icon, flex)); svg { width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-in-se)); height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-in-se)); path { stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-in-c1)); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-se-wh, 1.25); } } } [data-element-style="Text"] { display: inline-block; width: 100%; } .icon--hover { // position: absolute; // inset: 0; // opacity: 0; display: none; transition: opacity 0.2s ease; } &:hover .icon--hover { // opacity: 1; display: flex; } &:hover .icon--default { // opacity: 0; display: none; } } .btn__with__text[data-btn-name="placeOrder"] { width: 100%; &[data-show-shadow="false"] { --_show-shadow: none; } &[data-icon-position="left"] { --_sf-fd-bn: row; } &[data-icon-position="right"] { --_sf-fd-bn: row-reverse; } &[data-icon-position="center"] { --_sf-fd-bn: row; } &:hover { --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-bd-cr)}; --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-br-cr)}; --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-br-se)}; --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-br-wh)}; --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-br-rs)}; --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-at)}; --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-gp)}; // for shadow --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-sw-ae)}; --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-sw-br)}; --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-sw-hr)}; --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-ct-as-pe-or-hr-se-sw-cr)}; // for font --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-cr)}; --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-ft-fy)}; --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-ft-se)}; --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-ft-wt)}; --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-ft-se-ic)}; --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-tt-an)}; --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-lr-sg)}; --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-le-ht)}; --_sf-hr-txt-tr: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-tt-tm)}; --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-in-se)}; --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-in-se)}; --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-in-c1)}; --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-ue)}; // for pading and width --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-pg)}; --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-wh)}; &[data-hover-show-shadow="false"] { --_hover-show-shadow: none; } &[data-hover-show-icon="false"] { --_hover-show-icon: none; } } background-color: var( --_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-bd-cr) ); padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-pg)); width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-wh)); display: flex; flex-direction: var(--_sf-fd-bn); align-items: center; justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-at)); gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-gp)); border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-br-rs)); box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-sw-cr)); &[data-show-border="true"] { width: 100%; border-color: var( --_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-br-cr) ); border-style: var( --_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-br-se) ); border-width: var( --_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-br-wh) ); } .txt { display: flex; color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-cr)); font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-ft-fy)); word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-wd-wp)); word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-wd-bk)); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-ft-se)); font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-ft-wt)); font-style: var( --_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-ft-se-ic) ); text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-tt-an)); letter-spacing: var( --_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-lr-sg) ); line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-le-ht)); text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-ue)); text-transform: var( --_sf-hr-txt-tr, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-tt-tm) ); &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } } .icon { display: var(--_hover-show-icon, var(--_show-icon, flex)); svg { width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-in-se)); height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-in-se)); path { stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-in-c1)); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-se-wh, 1.25); } } } [data-element-style="Text"] { display: inline-block; width: 100%; } .icon--hover { // position: absolute; // inset: 0; // opacity: 0; display: none; transition: opacity 0.2s ease; } &:hover .icon--hover { // opacity: 1; display: flex; } &:hover .icon--default { // opacity: 0; display: none; } } .btn__with__text[data-btn-name="requestQuote"] { width: 100%; &[data-show-shadow="false"] { --_show-shadow: none; } &[data-icon-position="left"] { --_sf-fd-bn: row; } &[data-icon-position="right"] { --_sf-fd-bn: row-reverse; } &[data-icon-position="center"] { --_sf-fd-bn: row; } span { svg rect { fill: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-cr)); } } &:hover { --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-bd-cr)}; // @include BgColorLighter(var(--_sf-hr-cr), 5%); --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-br-cr)}; --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-br-se)}; --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-br-wh)}; --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-br-rs)}; --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-at)}; --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-gp)}; // for shadow --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-sw-ae)}; --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-sw-br)}; --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-sw-hr)}; --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-ct-as-rt-qe-hr-se-sw-cr)}; // for font --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-cr)}; --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-ft-fy)}; --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-ft-se)}; --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-ft-wt)}; --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-ft-se-ic)}; --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-tt-an)}; --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-lr-sg)}; --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-le-ht)}; --_sf-hr-txt-tr: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-tt-tm)}; --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-in-se)}; --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-in-se)}; --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-in-c1)}; --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-ue)}; // for pading and width --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-pg)}; --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-wh)}; &[data-hover-show-shadow="false"] { --_hover-show-shadow: none; } &[data-hover-show-icon="false"] { --_hover-show-icon: none; } } background-color: var( --_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-bd-cr) ); padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-pg)); width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-wh)); display: flex; flex-direction: var(--_sf-fd-bn); align-items: center; justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-at)); gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-gp)); border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-br-rs)); box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-sw-cr)); &[data-show-border="true"] { border-color: var( --_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-br-cr) ); border-style: var( --_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-br-se) ); border-width: var( --_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-br-wh) ); } .txt { display: flex; color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-cr)); font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-ft-fy)); word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-wd-wp)); word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-wd-bk)); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-ft-se)); font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-ft-wt)); font-style: var( --_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-ft-se-ic) ); text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-tt-an)); letter-spacing: var( --_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-lr-sg) ); line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-le-ht)); text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-ue)); text-transform: var( --_sf-hr-txt-tr, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-tt-tm) ); &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } } .icon { display: var(--_hover-show-icon, var(--_show-icon, flex)); svg { width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-in-se)); height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-in-se)); path { stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-in-c1)); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-se-wh, 1.25); } } } [data-element-style="Text"] { display: inline-block; width: 100%; } .icon--hover { // position: absolute; // inset: 0; // opacity: 0; display: none; transition: opacity 0.2s ease; } &:hover .icon--hover { // opacity: 1; display: flex; } &:hover .icon--default { // opacity: 0; display: none; } } .btn__with__text[data-btn-name="reviewOrder"] { width: 100%; &[data-show-shadow="false"] { --_show-shadow: none; } &[data-icon-position="left"] { --_sf-fd-bn: row; } &[data-icon-position="right"] { --_sf-fd-bn: row-reverse; } &[data-icon-position="center"] { --_sf-fd-bn: row; } &:hover { --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-bd-cr)}; --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-br-cr)}; --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-br-se)}; --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-br-wh)}; --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-br-rs)}; --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-at)}; --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-gp)}; // for shadow --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-sw-ae)}; --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-sw-br)}; --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-sw-hr)}; --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-ct-as-rw-or-hr-se-sw-cr)}; // for font --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-cr)}; --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-ft-fy)}; --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-ft-se)}; --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-ft-wt)}; --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-ft-se-ic)}; --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-tt-an)}; --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-lr-sg)}; --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-le-ht)}; --_sf-hr-txt-tr: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-tt-tm)}; --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-in-se)}; --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-in-se)}; --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-in-c1)}; --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-ue)}; // for pading and width --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-pg)}; --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-wh)}; &[data-hover-show-shadow="false"] { --_hover-show-shadow: none; } &[data-hover-show-icon="false"] { --_hover-show-icon: none; } } background-color: var( --_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-bd-cr) ); padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-pg)); width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-wh)); display: flex; flex-direction: var(--_sf-fd-bn); align-items: center; justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-at)); gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-gp)); border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-br-rs)); box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-sw-cr)); &[data-show-border="true"] { border-color: var( --_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-br-cr) ); border-style: var( --_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-br-se) ); border-width: var( --_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-br-wh) ); } .txt { display: flex; color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-cr)); font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-ft-fy)); word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-wd-wp)); word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-wd-bk)); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-ft-se)); font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-ft-wt)); font-style: var( --_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-ft-se-ic) ); text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-tt-an)); letter-spacing: var( --_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-lr-sg) ); line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-le-ht)); text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-ue)); text-transform: var( --_sf-hr-txt-tr, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-tt-tm) ); &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } } .icon { display: var(--_hover-show-icon, var(--_show-icon, flex)); svg { width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-in-se)); height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-in-se)); path { stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-in-c1)); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-se-wh, 1.25); } } } [data-element-style="Text"] { display: inline-block; width: 100%; } .icon--hover { // position: absolute; // inset: 0; // opacity: 0; display: none; transition: opacity 0.2s ease; } &:hover .icon--hover { // opacity: 1; display: flex; } &:hover .icon--default { // opacity: 0; display: none; } } .btn__with__text[data-btn-name="createSubOrders"] { width: 100%; &[data-show-shadow="false"] { --_show-shadow: none; } &[data-icon-position="left"] { --_sf-fd-bn: row; } &[data-icon-position="right"] { --_sf-fd-bn: row-reverse; } &[data-icon-position="center"] { --_sf-fd-bn: row; } &:hover { --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-bd-cr)}; --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-br-cr)}; --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-br-se)}; --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-br-wh)}; --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-br-rs)}; --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-at)}; --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-gp)}; // for shadow --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-sw-ae)}; --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-sw-br)}; --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-sw-hr)}; --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-ct-as-ce-sb-os-hr-se-sw-cr)}; // for font --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-cr)}; --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-ft-fy)}; --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-ft-se)}; --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-ft-wt)}; --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-ft-se-ic)}; --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-tt-an)}; --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-lr-sg)}; --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-le-ht)}; --_sf-hr-txt-tr: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-tt-tm)}; --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-in-se)}; --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-in-se)}; --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-in-c1)}; --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-ue)}; // for pading and width --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-pg)}; --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-wh)}; &[data-hover-show-shadow="false"] { --_hover-show-shadow: none; } &[data-hover-show-icon="false"] { --_hover-show-icon: none; } } background-color: var( --_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-bd-cr) ); padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-pg)); width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-wh)); display: flex; flex-direction: var(--_sf-fd-bn); align-items: center; justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-at)); gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-gp)); border-radius: var( --_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-br-rs) ); box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-sw-cr)); &[data-show-border="true"] { border-color: var( --_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-br-cr) ); border-style: var( --_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-br-se) ); border-width: var( --_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-br-wh) ); } .txt { display: flex; color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-cr)); font-family: var( --_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-ft-fy) ); word-wrap: var( --_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-wd-wp) ); word-break: var( --_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-wd-bk) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var( --_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-ft-se) ); font-weight: var( --_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-ft-wt) ); font-style: var( --_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-ft-se-ic) ); text-align: var( --_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-tt-an) ); letter-spacing: var( --_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-lr-sg) ); line-height: var( --_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-le-ht) ); text-decoration: var( --_sf-hr-ue, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-ue) ); text-transform: var( --_sf-hr-txt-tr, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-tt-tm) ); &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } } .icon { display: var(--_hover-show-icon, var(--_show-icon, flex)); svg { width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-in-se)); height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-in-se)); path { stroke: var( --_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-in-c1) ); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-se-wh, 1.25); } } } [data-element-style="Text"] { display: inline-block; width: 100%; } .icon--hover { // position: absolute; // inset: 0; // opacity: 0; display: none; transition: opacity 0.2s ease; } &:hover .icon--hover { // opacity: 1; display: flex; } &:hover .icon--default { // opacity: 0; display: none; } } .btn__with__text[data-btn-name="submitQuote"] { width: 100%; &[data-show-shadow="false"] { --_show-shadow: none; } &[data-icon-position="left"] { --_sf-fd-bn: row; } &[data-icon-position="right"] { --_sf-fd-bn: row-reverse; } &[data-icon-position="center"] { --_sf-fd-bn: row; } &:hover { --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-bd-cr)}; --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-br-cr)}; --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-br-se)}; --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-br-wh)}; --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-br-rs)}; --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-at)}; --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-gp)}; // for shadow --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-sw-ae)}; --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-sw-br)}; --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-sw-hr)}; --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-ct-as-st-qe-hr-se-sw-cr)}; // for font --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-cr)}; --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-ft-fy)}; --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-ft-se)}; --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-ft-wt)}; --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-ft-se-ic)}; --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-tt-an)}; --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-lr-sg)}; --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-le-ht)}; --_sf-hr-txt-tr: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-tt-tm)}; --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-in-se)}; --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-in-se)}; --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-in-c1)}; --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-ue)}; // for pading and width --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-pg)}; --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-wh)}; &[data-hover-show-shadow="false"] { --_hover-show-shadow: none; } &[data-hover-show-icon="false"] { --_hover-show-icon: none; } } background-color: var( --_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-bd-cr) ); padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-pg)); width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-wh)); display: flex; flex-direction: var(--_sf-fd-bn); align-items: center; justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-at)); gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-gp)); border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-br-rs)); box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-sw-cr)); &[data-show-border="true"] { width: 100%; border-color: var( --_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-br-cr) ); border-style: var( --_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-br-se) ); border-width: var( --_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-br-wh) ); } .txt { display: flex; color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-cr)); font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-ft-fy)); word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-wd-wp)); word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-wd-bk)); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-ft-se)); font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-ft-wt)); font-style: var( --_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-ft-se-ic) ); text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-tt-an)); letter-spacing: var( --_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-lr-sg) ); line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-le-ht)); text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-ue)); text-transform: var( --_sf-hr-txt-tr, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-tt-tm) ); &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } } .icon { display: var(--_hover-show-icon, var(--_show-icon, flex)); svg { width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-in-se)); height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-in-se)); path { stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-in-c1)); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-se-wh, 1.25); } } } [data-element-style="Text"] { display: inline-block; width: 100%; } .icon--hover { // position: absolute; // inset: 0; // opacity: 0; display: none; transition: opacity 0.2s ease; } &:hover .icon--hover { // opacity: 1; display: flex; } &:hover .icon--default { // opacity: 0; display: none; } } .btn__with__text[data-btn-name="signUp"] { width: 100%; &[data-show-shadow="false"] { --_show-shadow: none; } &[data-icon-position="left"] { --_sf-fd-bn: row; } &[data-icon-position="right"] { --_sf-fd-bn: row-reverse; } &[data-icon-position="center"] { --_sf-fd-bn: row; } &:hover { --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-sn-up-hr-se-bd-cr)}; --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-sn-up-hr-se-br-cr)}; --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-ct-as-sn-up-hr-se-br-se)}; --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-sn-up-hr-se-br-wh)}; --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-ct-as-sn-up-hr-se-br-rs)}; --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-ct-as-sn-up-hr-se-at)}; --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-ct-as-sn-up-hr-se-gp)}; // for shadow --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-ct-as-sn-up-hr-se-sw-ae)}; --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-ct-as-sn-up-hr-se-sw-br)}; --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-ct-as-sn-up-hr-se-sw-hr)}; --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-ct-as-sn-up-hr-se-sw-cr)}; // for font --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-sn-up-hr-se-cr)}; --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-ct-as-sn-up-hr-se-ft-fy)}; --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-ct-as-sn-up-hr-se-ft-se)}; --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-ct-as-sn-up-hr-se-ft-wt)}; --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-ct-as-sn-up-hr-se-ft-se-ic)}; --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-ct-as-sn-up-hr-se-tt-an)}; --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-ct-as-sn-up-hr-se-lr-sg)}; --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-ct-as-sn-up-hr-se-le-ht)}; --_sf-hr-txt-tr: #{prepareMediaVariable(--_ctm-dn-ct-as-sn-up-hr-se-tt-tm)}; --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-sn-up-hr-se-in-se)}; --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-sn-up-hr-se-in-se)}; --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-ct-as-sn-up-hr-se-in-c1)}; --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-sn-up-hr-se-ue)}; // for pading and width --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-ct-as-sn-up-hr-pg)}; --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-sn-up-hr-wh)}; &[data-hover-show-shadow="false"] { --_hover-show-shadow: none; } &[data-hover-show-icon="false"] { --_hover-show-icon: none; } } background-color: var( --_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ct-as-sn-up-dt-se-bd-cr) ); padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ct-as-sn-up-dt-se-pg)); width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ct-as-sn-up-dt-se-wh)); display: flex; flex-direction: var(--_sf-fd-bn); align-items: center; justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ct-as-sn-up-dt-se-at)); gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ct-as-sn-up-dt-se-gp)); border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ct-as-sn-up-dt-se-br-rs)); box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ct-as-sn-up-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ct-as-sn-up-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ct-as-sn-up-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ct-as-sn-up-dt-se-sw-cr)); &[data-show-border="true"] { width: 100%; border-color: var( --_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ct-as-sn-up-dt-se-br-cr) ); border-style: var( --_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ct-as-sn-up-dt-se-br-se) ); border-width: var( --_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ct-as-sn-up-dt-se-br-wh) ); } .txt { display: flex; color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ct-as-sn-up-dt-se-cr)); font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ct-as-sn-up-dt-se-ft-fy)); word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-ct-as-sn-up-dt-se-wd-wp)); word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-ct-as-sn-up-dt-se-wd-bk)); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ct-as-sn-up-dt-se-ft-se)); font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ct-as-sn-up-dt-se-ft-wt)); font-style: var( --_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-ct-as-sn-up-dt-se-ft-se-ic) ); text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ct-as-sn-up-dt-se-tt-an)); letter-spacing: var( --_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ct-as-sn-up-dt-se-lr-sg) ); line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ct-as-sn-up-dt-se-le-ht)); text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-ct-as-sn-up-dt-se-ue)); text-transform: var( --_sf-hr-txt-tr, prepareMediaVariable(--_ctm-dn-ct-as-sn-up-dt-se-tt-tm) ); &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } } .icon { display: var(--_hover-show-icon, var(--_show-icon, flex)); svg { width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ct-as-sn-up-dt-se-in-se)); height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ct-as-sn-up-dt-se-in-se)); path { stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ct-as-sn-up-dt-se-in-c1)); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-ct-as-sn-up-dt-se-se-wh, 1.25); } } } [data-element-style="Text"] { display: inline-block; width: 100%; } .icon--hover { // position: absolute; // inset: 0; // opacity: 0; display: none; transition: opacity 0.2s ease; } &:hover .icon--hover { // opacity: 1; display: flex; } &:hover .icon--default { // opacity: 0; display: none; } } .cart_summary_placeOrder_btn_wrapper { // padding: var(--_ctm-lt-bn-pg) calc(var(--_ctm-lt-bn-pg) * 2); width: 100%; height: auto; // min-height: 48px; background-color: var( --_ctm-mob-dn-pe-or-bn-dt-se-bd-cr, var(--_ctm-tab-dn-pe-or-bn-dt-se-bd-cr, var(--_ctm-dn-pe-or-bn-dt-se-bd-cr)) ); border-color: var( --_ctm-mob-dn-pe-or-bn-dt-se-br-cr, var(--_ctm-tab-dn-pe-or-bn-dt-se-br-cr, var(--_ctm-dn-pe-or-bn-dt-se-br-cr)) ); border-radius: var( --_ctm-mob-dn-pe-or-bn-dt-se-br-rs, var(--_ctm-tab-dn-pe-or-bn-dt-se-br-rs, var(--_ctm-dn-pe-or-bn-dt-se-br-rs)) ); border-style: var( --_ctm-mob-dn-pe-or-bn-dt-se-br-se, var(--_ctm-tab-dn-pe-or-bn-dt-se-br-se, var(--_ctm-dn-pe-or-bn-dt-se-br-se)) ); border-width: var( --_ctm-mob-dn-pe-or-bn-dt-se-br-wh, var(--_ctm-tab-dn-pe-or-bn-dt-se-br-wh, var(--_ctm-dn-pe-or-bn-dt-se-br-wh)) ); color: var( --_ctm-mob-dn-pe-or-bn-dt-se-cr, var(--_ctm-tab-dn-pe-or-bn-dt-se-cr, var(--_ctm-dn-pe-or-bn-dt-se-cr)) ); font-family: var( --_ctm-mob-dn-pe-or-bn-dt-se-ft-fy, var(--_ctm-tab-dn-pe-or-bn-dt-se-ft-fy, var(--_ctm-dn-pe-or-bn-dt-se-ft-fy)) ); text-transform: var( --_ctm-mob-dn-pe-or-bn-dt-se-tt-tm, var(--_ctm-tab-dn-pe-or-bn-dt-se-tt-tm, var(--_ctm-dn-pe-or-bn-dt-se-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-pe-or-bn-dt-se-wd-wp, var(--_ctm-tab-dn-pe-or-bn-dt-se-wd-wp, var(--_ctm-dn-pe-or-bn-dt-se-wd-wp)) ); word-break: var( --_ctm-mob-dn-pe-or-bn-dt-se-wd-bk, var(--_ctm-tab-dn-pe-or-bn-dt-se-wd-bk, var(--_ctm-dn-pe-or-bn-dt-se-wd-bk)) ); font-size: var( --_ctm-mob-dn-pe-or-bn-dt-se-ft-se, var(--_ctm-tab-dn-pe-or-bn-dt-se-ft-se, var(--_ctm-dn-pe-or-bn-dt-se-ft-se)) ); font-style: var( --_ctm-mob-dn-pe-or-bn-dt-se-ft-se-ic, var(--_ctm-tab-dn-pe-or-bn-dt-se-ft-se-ic, var(--_ctm-dn-pe-or-bn-dt-se-ft-se-ic)) ); font-weight: var( --_ctm-mob-dn-pe-or-bn-dt-se-ft-wt, var(--_ctm-tab-dn-pe-or-bn-dt-se-ft-wt, var(--_ctm-dn-pe-or-bn-dt-se-ft-wt)) ); line-height: var( --_ctm-mob-dn-pe-or-bn-dt-se-le-ht, var(--_ctm-tab-dn-pe-or-bn-dt-se-le-ht, var(--_ctm-dn-pe-or-bn-dt-se-le-ht)) ); letter-spacing: var( --_ctm-mob-dn-pe-or-bn-dt-se-lr-sg, var(--_ctm-tab-dn-pe-or-bn-dt-se-lr-sg, var(--_ctm-dn-pe-or-bn-dt-se-lr-sg)) ); box-shadow: var( --_ctm-mob-dn-pe-or-bn-dt-se-sw-ae, var(--_ctm-tab-dn-pe-or-bn-dt-se-sw-ae, var(--_ctm-dn-pe-or-bn-dt-se-sw-ae)) ) var( --_ctm-mob-dn-pe-or-bn-dt-se-sw-br, var(--_ctm-tab-dn-pe-or-bn-dt-se-sw-br, var(--_ctm-dn-pe-or-bn-dt-se-sw-br)) ) var( --_ctm-mob-dn-pe-or-bn-dt-se-sw-sd, var(--_ctm-tab-dn-pe-or-bn-dt-se-sw-sd, var(--_ctm-dn-pe-or-bn-dt-se-sw-sd)) ) var( --_ctm-mob-dn-pe-or-bn-dt-se-sw-cr, var(--_ctm-tab-dn-pe-or-bn-dt-se-sw-cr, var(--_ctm-dn-pe-or-bn-dt-se-sw-cr)) ); text-decoration: var( --_ctm-mob-dn-pe-or-bn-dt-se-ue, var(--_ctm-tab-dn-pe-or-bn-dt-se-ue, var(--_ctm-dn-pe-or-bn-dt-se-ue)) ); padding: var( --_ctm-mob-dn-pe-or-bn-dt-se-pg, var(--_ctm-tab-dn-pe-or-bn-dt-se-pg, var(--_ctm-dn-pe-or-bn-dt-se-pg)) ); text-align: var( --_ctm-mob-dn-pe-or-bn-dt-se-tt-an, var(--_ctm-tab-dn-pe-or-bn-dt-se-tt-an, var(--_ctm-dn-pe-or-bn-dt-se-tt-an)) ); &:hover { background-color: var( --_ctm-mob-dn-pe-or-bn-hr-se-bd-cr, var(--_ctm-tab-dn-pe-or-bn-hr-se-bd-cr, var(--_ctm-dn-pe-or-bn-hr-se-bd-cr)) ); border-color: var( --_ctm-mob-dn-pe-or-bn-hr-se-br-cr, var(--_ctm-tab-dn-pe-or-bn-hr-se-br-cr, var(--_ctm-dn-pe-or-bn-hr-se-br-cr)) ); border-radius: var( --_ctm-mob-dn-pe-or-bn-hr-se-br-rs, var(--_ctm-tab-dn-pe-or-bn-hr-se-br-rs, var(--_ctm-dn-pe-or-bn-hr-se-br-rs)) ); border-style: var( --_ctm-mob-dn-pe-or-bn-hr-se-br-se, var(--_ctm-tab-dn-pe-or-bn-hr-se-br-se, var(--_ctm-dn-pe-or-bn-hr-se-br-se)) ); border-width: var( --_ctm-mob-dn-pe-or-bn-hr-se-br-wh, var(--_ctm-tab-dn-pe-or-bn-hr-se-br-wh, var(--_ctm-dn-pe-or-bn-hr-se-br-wh)) ); color: var( --_ctm-mob-dn-pe-or-bn-hr-se-cr, var(--_ctm-tab-dn-pe-or-bn-hr-se-cr, var(--_ctm-dn-pe-or-bn-hr-se-cr)) ); font-family: var( --_ctm-mob-dn-pe-or-bn-hr-se-ft-fy, var(--_ctm-tab-dn-pe-or-bn-hr-se-ft-fy, var(--_ctm-dn-pe-or-bn-hr-se-ft-fy)) ); text-transform: var( --_ctm-mob-dn-pe-or-bn-hr-se-tt-tm, var(--_ctm-tab-dn-pe-or-bn-hr-se-tt-tm, var(--_ctm-dn-pe-or-bn-hr-se-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-pe-or-bn-hr-se-wd-wp, var(--_ctm-tab-dn-pe-or-bn-hr-se-wd-wp, var(--_ctm-dn-pe-or-bn-hr-se-wd-wp)) ); word-break: var( --_ctm-mob-dn-pe-or-bn-hr-se-wd-bk, var(--_ctm-tab-dn-pe-or-bn-hr-se-wd-bk, var(--_ctm-dn-pe-or-bn-hr-se-wd-bk)) ); font-size: var( --_ctm-mob-dn-pe-or-bn-hr-se-ft-se, var(--_ctm-tab-dn-pe-or-bn-hr-se-ft-se, var(--_ctm-dn-pe-or-bn-hr-se-ft-se)) ); font-style: var( --_ctm-mob-dn-pe-or-bn-hr-se-ft-se-ic, var(--_ctm-tab-dn-pe-or-bn-hr-se-ft-se-ic, var(--_ctm-dn-pe-or-bn-hr-se-ft-se-ic)) ); font-weight: var( --_ctm-mob-dn-pe-or-bn-hr-se-ft-wt, var(--_ctm-tab-dn-pe-or-bn-hr-se-ft-wt, var(--_ctm-dn-pe-or-bn-hr-se-ft-wt)) ); line-height: var( --_ctm-mob-dn-pe-or-bn-hr-se-le-ht, var(--_ctm-tab-dn-pe-or-bn-hr-se-le-ht, var(--_ctm-dn-pe-or-bn-hr-se-le-ht)) ); letter-spacing: var( --_ctm-mob-dn-pe-or-bn-hr-se-lr-sg, var(--_ctm-tab-dn-pe-or-bn-hr-se-lr-sg, var(--_ctm-dn-pe-or-bn-hr-se-lr-sg)) ); box-shadow: var( --_ctm-mob-dn-pe-or-bn-hr-se-sw-ae, var(--_ctm-tab-dn-pe-or-bn-hr-se-sw-ae, var(--_ctm-dn-pe-or-bn-hr-se-sw-ae)) ) var( --_ctm-mob-dn-pe-or-bn-hr-se-sw-br, var(--_ctm-tab-dn-pe-or-bn-hr-se-sw-br, var(--_ctm-dn-pe-or-bn-hr-se-sw-br)) ) var( --_ctm-mob-dn-pe-or-bn-hr-se-sw-sd, var(--_ctm-tab-dn-pe-or-bn-hr-se-sw-sd, var(--_ctm-dn-pe-or-bn-hr-se-sw-sd)) ) var( --_ctm-mob-dn-pe-or-bn-hr-se-sw-cr, var(--_ctm-tab-dn-pe-or-bn-hr-se-sw-cr, var(--_ctm-dn-pe-or-bn-hr-se-sw-cr)) ); text-decoration: var( --_ctm-mob-dn-pe-or-bn-hr-se-ue, var(--_ctm-tab-dn-pe-or-bn-hr-se-ue, var(--_ctm-dn-pe-or-bn-hr-se-ue)) ); padding: var( --_ctm-mob-dn-pe-or-bn-hr-se-pg, var(--_ctm-tab-dn-pe-or-bn-hr-se-pg, var(--_ctm-dn-pe-or-bn-hr-se-pg)) ); text-align: var( --_ctm-mob-dn-pe-or-bn-hr-se-tt-an, var(--_ctm-tab-dn-pe-or-bn-hr-se-tt-an, var(--_ctm-dn-pe-or-bn-hr-se-tt-an)) ); } } .submit_quotes { width: 100%; text-align: center; background-color: var( --_ctm-mob-dn-rt-qe-bn-dt-se-bd-cr, var(--_ctm-tab-dn-rt-qe-bn-dt-se-bd-cr, var(--_ctm-dn-rt-qe-bn-dt-se-bd-cr)) ); border-color: var( --_ctm-mob-dn-rt-qe-bn-dt-se-br-cr, var(--_ctm-tab-dn-rt-qe-bn-dt-se-br-cr, var(--_ctm-dn-rt-qe-bn-dt-se-br-cr)) ); border-radius: var( --_ctm-mob-dn-rt-qe-bn-dt-se-br-rs, var(--_ctm-tab-dn-rt-qe-bn-dt-se-br-rs, var(--_ctm-dn-rt-qe-bn-dt-se-br-rs)) ); border-style: var( --_ctm-mob-dn-rt-qe-bn-dt-se-br-se, var(--_ctm-tab-dn-rt-qe-bn-dt-se-br-se, var(--_ctm-dn-rt-qe-bn-dt-se-br-se)) ); border-width: var( --_ctm-mob-dn-rt-qe-bn-dt-se-br-wh, var(--_ctm-tab-dn-rt-qe-bn-dt-se-br-wh, var(--_ctm-dn-rt-qe-bn-dt-se-br-wh)) ); color: var( --_ctm-mob-dn-rt-qe-bn-dt-se-cr, var(--_ctm-tab-dn-rt-qe-bn-dt-se-cr, var(--_ctm-dn-rt-qe-bn-dt-se-cr)) ); font-family: var( --_ctm-mob-dn-rt-qe-bn-dt-se-ft-fy, var(--_ctm-tab-dn-rt-qe-bn-dt-se-ft-fy, var(--_ctm-dn-rt-qe-bn-dt-se-ft-fy)) ); text-transform: var( --_ctm-mob-dn-rt-qe-bn-dt-se-tt-tm, var(--_ctm-tab-dn-rt-qe-bn-dt-se-tt-tm, var(--_ctm-dn-rt-qe-bn-dt-se-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-rt-qe-bn-dt-se-wd-wp, var(--_ctm-tab-dn-rt-qe-bn-dt-se-wd-wp, var(--_ctm-dn-rt-qe-bn-dt-se-wd-wp)) ); word-break: var( --_ctm-mob-dn-rt-qe-bn-dt-se-wd-bk, var(--_ctm-tab-dn-rt-qe-bn-dt-se-wd-bk, var(--_ctm-dn-rt-qe-bn-dt-se-wd-bk)) ); font-size: var( --_ctm-mob-dn-rt-qe-bn-dt-se-ft-se, var(--_ctm-tab-dn-rt-qe-bn-dt-se-ft-se, var(--_ctm-dn-rt-qe-bn-dt-se-ft-se)) ); font-style: var( --_ctm-mob-dn-py-bn-dn-dt-se-ft-se-ic, var(--_ctm-tab-dn-py-bn-dn-dt-se-ft-se-ic, var(--_ctm-dn-py-bn-dn-dt-se-ft-se-ic)) ); font-weight: var( --_ctm-mob-dn-rt-qe-bn-dt-se-ft-wt, var(--_ctm-tab-dn-rt-qe-bn-dt-se-ft-wt, var(--_ctm-dn-rt-qe-bn-dt-se-ft-wt)) ); line-height: var( --_ctm-mob-dn-rt-qe-bn-dt-se-le-ht, var(--_ctm-tab-dn-rt-qe-bn-dt-se-le-ht, var(--_ctm-dn-rt-qe-bn-dt-se-le-ht)) ); letter-spacing: var( --_ctm-mob-dn-rt-qe-bn-dt-se-lr-sg, var(--_ctm-tab-dn-rt-qe-bn-dt-se-lr-sg, var(--_ctm-dn-rt-qe-bn-dt-se-lr-sg)) ); box-shadow: var( --_ctm-mob-dn-rt-qe-bn-dt-se-sw-ae, var(--_ctm-tab-dn-rt-qe-bn-dt-se-sw-ae, var(--_ctm-dn-rt-qe-bn-dt-se-sw-ae)) ) var( --_ctm-mob-dn-rt-qe-bn-dt-se-sw-br, var(--_ctm-tab-dn-rt-qe-bn-dt-se-sw-br, var(--_ctm-dn-rt-qe-bn-dt-se-sw-br)) ) var( --_ctm-mob-dn-rt-qe-bn-dt-se-sw-sd, var(--_ctm-tab-dn-rt-qe-bn-dt-se-sw-sd, var(--_ctm-dn-rt-qe-bn-dt-se-sw-sd)) ) var( --_ctm-mob-dn-rt-qe-bn-dt-se-sw-cr, var(--_ctm-tab-dn-rt-qe-bn-dt-se-sw-cr, var(--_ctm-dn-rt-qe-bn-dt-se-sw-cr)) ); text-decoration: var( --_ctm-mob-dn-rt-qe-bn-dt-se-ue, var(--_ctm-tab-dn-rt-qe-bn-dt-se-ue, var(--_ctm-dn-rt-qe-bn-dt-se-ue)) ); text-align: var( --_ctm-mob-dn-rt-qe-bn-dt-se-tt-an, var(--_ctm-tab-dn-rt-qe-bn-dt-se-tt-an, var(--_ctm-dn-rt-qe-bn-dt-se-tt-an)) ); padding: var( --_ctm-mob-dn-rt-qe-bn-dt-se-pg, var(--_ctm-tab-dn-rt-qe-bn-dt-se-pg, var(--_ctm-dn-rt-qe-bn-dt-se-pg)) ); &:hover { background-color: var( --_ctm-mob-dn-rt-qe-bn-hr-se-bd-cr, var(--_ctm-tab-dn-rt-qe-bn-hr-se-bd-cr, var(--_ctm-dn-rt-qe-bn-hr-se-bd-cr)) ); border-color: var( --_ctm-mob-dn-rt-qe-bn-hr-se-br-cr, var(--_ctm-tab-dn-rt-qe-bn-hr-se-br-cr, var(--_ctm-dn-rt-qe-bn-hr-se-br-cr)) ); border-radius: var( --_ctm-mob-dn-rt-qe-bn-hr-se-br-rs, var(--_ctm-tab-dn-rt-qe-bn-hr-se-br-rs, var(--_ctm-dn-rt-qe-bn-hr-se-br-rs)) ); border-style: var( --_ctm-mob-dn-rt-qe-bn-hr-se-br-se, var(--_ctm-tab-dn-rt-qe-bn-hr-se-br-se, var(--_ctm-dn-rt-qe-bn-hr-se-br-se)) ); border-width: var( --_ctm-mob-dn-rt-qe-bn-hr-se-br-wh, var(--_ctm-tab-dn-rt-qe-bn-hr-se-br-wh, var(--_ctm-dn-rt-qe-bn-hr-se-br-wh)) ); color: var( --_ctm-mob-dn-rt-qe-bn-hr-se-cr, var(--_ctm-tab-dn-rt-qe-bn-hr-se-cr, var(--_ctm-dn-rt-qe-bn-hr-se-cr)) ); font-family: var( --_ctm-mob-dn-rt-qe-bn-hr-se-ft-fy, var(--_ctm-tab-dn-rt-qe-bn-hr-se-ft-fy, var(--_ctm-dn-rt-qe-bn-hr-se-ft-fy)) ); text-transform: var( --_ctm-mob-dn-rt-qe-bn-hr-se-tt-tm, var(--_ctm-tab-dn-rt-qe-bn-hr-se-tt-tm, var(--_ctm-dn-rt-qe-bn-hr-se-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-rt-qe-bn-hr-se-wd-wp, var(--_ctm-tab-dn-rt-qe-bn-hr-se-wd-wp, var(--_ctm-dn-rt-qe-bn-hr-se-wd-wp)) ); word-break: var( --_ctm-mob-dn-rt-qe-bn-hr-se-wd-bk, var(--_ctm-tab-dn-rt-qe-bn-hr-se-wd-bk, var(--_ctm-dn-rt-qe-bn-hr-se-wd-bk)) ); font-size: var( --_ctm-mob-dn-rt-qe-bn-hr-se-ft-se, var(--_ctm-tab-dn-rt-qe-bn-hr-se-ft-se, var(--_ctm-dn-rt-qe-bn-hr-se-ft-se)) ); font-style: var( --_ctm-mob-dn-py-bn-dn-hr-se-ft-se-ic, var(--_ctm-tab-dn-py-bn-dn-hr-se-ft-se-ic, var(--_ctm-dn-py-bn-dn-hr-se-ft-se-ic)) ); font-weight: var( --_ctm-mob-dn-rt-qe-bn-hr-se-ft-wt, var(--_ctm-tab-dn-rt-qe-bn-hr-se-ft-wt, var(--_ctm-dn-rt-qe-bn-hr-se-ft-wt)) ); line-height: var( --_ctm-mob-dn-rt-qe-bn-hr-se-le-ht, var(--_ctm-tab-dn-rt-qe-bn-hr-se-le-ht, var(--_ctm-dn-rt-qe-bn-hr-se-le-ht)) ); letter-spacing: var( --_ctm-mob-dn-rt-qe-bn-hr-se-lr-sg, var(--_ctm-tab-dn-rt-qe-bn-hr-se-lr-sg, var(--_ctm-dn-rt-qe-bn-hr-se-lr-sg)) ); box-shadow: var( --_ctm-mob-dn-rt-qe-bn-hr-se-sw-ae, var(--_ctm-tab-dn-rt-qe-bn-hr-se-sw-ae, var(--_ctm-dn-rt-qe-bn-hr-se-sw-ae)) ) var( --_ctm-mob-dn-rt-qe-bn-hr-se-sw-br, var(--_ctm-tab-dn-rt-qe-bn-hr-se-sw-br, var(--_ctm-dn-rt-qe-bn-hr-se-sw-br)) ) var( --_ctm-mob-dn-rt-qe-bn-hr-se-sw-sd, var(--_ctm-tab-dn-rt-qe-bn-hr-se-sw-sd, var(--_ctm-dn-rt-qe-bn-hr-se-sw-sd)) ) var( --_ctm-mob-dn-rt-qe-bn-hr-se-sw-cr, var(--_ctm-tab-dn-rt-qe-bn-hr-se-sw-cr, var(--_ctm-dn-rt-qe-bn-hr-se-sw-cr)) ); text-decoration: var( --_ctm-mob-dn-rt-qe-bn-hr-se-ue, var(--_ctm-tab-dn-rt-qe-bn-hr-se-ue, var(--_ctm-dn-rt-qe-bn-hr-se-ue)) ); text-align: var( --_ctm-mob-dn-rt-qe-bn-hr-se-tt-an, var(--_ctm-tab-dn-rt-qe-bn-hr-se-tt-an, var(--_ctm-dn-rt-qe-bn-hr-se-tt-an)) ); padding: var( --_ctm-mob-dn-rt-qe-bn-hr-se-pg, var(--_ctm-tab-dn-rt-qe-bn-hr-se-pg, var(--_ctm-dn-rt-qe-bn-hr-se-pg)) ); } } .cart_summary_secondary_btn_wrapper { // color: var(--_ctm-mob-dn-tx-et-cr, var(--_ctm-tab-dn-tx-et-cr, var(--_ctm-dn-tx-et-cr))); color: var(--_thm-cs-tt-ls-as); font-family: var( --_ctm-mob-dn-tx-et-ft-fy, var(--_ctm-tab-dn-tx-et-ft-fy, var(--_ctm-dn-tx-et-ft-fy)) ); text-transform: var( --_ctm-mob-dn-tx-et-tt-tm, var(--_ctm-tab-dn-tx-et-tt-tm, var(--_ctm-dn-tx-et-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-tx-et-wd-wp, var(--_ctm-tab-dn-tx-et-wd-wp, var(--_ctm-dn-tx-et-wd-wp)) ); word-break: var( --_ctm-mob-dn-tx-et-wd-bk, var(--_ctm-tab-dn-tx-et-wd-bk, var(--_ctm-dn-tx-et-wd-bk)) ); font-size: var( --_ctm-mob-dn-tx-et-ft-se, var(--_ctm-tab-dn-tx-et-ft-se, var(--_ctm-dn-tx-et-ft-se)) ); font-style: var( --_ctm-mob-dn-tx-et-ft-se-ic, var(--_ctm-tab-dn-tx-et-ft-se-ic, var(--_ctm-dn-tx-et-ft-se-ic)) ); font-weight: var( --_ctm-mob-dn-tx-et-ft-wt, var(--_ctm-tab-dn-tx-et-ft-wt, var(--_ctm-dn-tx-et-ft-wt)) ); line-height: var( --_ctm-mob-dn-tx-et-le-ht, var(--_ctm-tab-dn-tx-et-le-ht, var(--_ctm-dn-tx-et-le-ht)) ); letter-spacing: var( --_ctm-mob-dn-tx-et-lr-sg, var(--_ctm-tab-dn-tx-et-lr-sg, var(--_ctm-dn-tx-et-lr-sg)) ); padding: var(--_ctm-mob-dn-tx-et-pg, var(--_ctm-tab-dn-tx-et-pg, var(--_ctm-dn-tx-et-pg))); // background-color: var(--_ctm-dn-sy-bn-dn-dt-se-bd-cr); // border-color: var(--_ctm-dn-sy-bn-dn-dt-se-br-cr); // border-radius: var(--_ctm-dn-sy-bn-dn-dt-se-br-rs); // border-style: var(--_ctm-dn-sy-bn-dn-dt-se-br-se); // border-width: var(--_ctm-dn-sy-bn-dn-dt-se-br-wh); // // color: var(--_ctm-dn-sy-bn-dn-dt-se-cr); // font-family: var(--_ctm-dn-sy-bn-dn-dt-se-ft-fy); // font-size: var(--_ctm-dn-sy-bn-dn-dt-se-ft-se); // font-style: var(--_ctm-dn-sy-bn-dn-dt-se-ft-se-ic); // font-weight: var(--_ctm-dn-sy-bn-dn-dt-se-ft-wt); // line-height: var(--_ctm-dn-sy-bn-dn-dt-se-le-ht); // letter-spacing: var(--_ctm-dn-sy-bn-dn-dt-se-lr-sg); // box-shadow: var(--_ctm-dn-sy-bn-dn-dt-se-sw-ae) var(--_ctm-dn-sy-bn-dn-dt-se-sw-br); // // var(--_ctm-dn-sy-bn-dn-dt-se-sw-sd) var(--_ctm-dn-sy-bn-dn-dt-se-sw-cr); // text-align: var(--_ctm-dn-sy-bn-dn-dt-se-tt-an); // text-decoration: var(--_ctm-dn-sy-bn-dn-dt-se-ue); // color: var(--_primary-400); &:hover { // background-color: var(--_ctm-dn-sy-bn-dn-hr-se-bd-cr); // border-color: var(--_ctm-dn-sy-bn-dn-hr-se-br-cr); // border-radius: var(--_ctm-dn-sy-bn-dn-hr-se-br-rs); // border-style: var(--_ctm-dn-sy-bn-dn-hr-se-br-se); // border-width: var(--_ctm-dn-sy-bn-dn-hr-se-br-wh); // color: var(--_ctm-dn-sy-bn-dn-hr-se-cr); // font-family: var(--_ctm-dn-sy-bn-dn-hr-se-ft-fy); // font-size: var(--_ctm-dn-sy-bn-dn-hr-se-ft-se); // font-style: var(--_ctm-dn-sy-bn-dn-hr-se-ft-se-ic); // font-weight: var(--_ctm-dn-sy-bn-dn-hr-se-ft-wt); // line-height: var(--_ctm-dn-sy-bn-dn-hr-se-le-ht); // letter-spacing: var(--_ctm-dn-sy-bn-dn-hr-se-lr-sg); // box-shadow: var(--_ctm-dn-sy-bn-dn-hr-se-sw-ae) var(--_ctm-dn-sy-bn-dn-hr-se-sw-br) // var(--_ctm-dn-sy-bn-dn-hr-se-sw-sd) var(--_ctm-dn-sy-bn-dn-hr-se-sw-cr); // text-align: var(--_ctm-dn-sy-bn-dn-hr-se-tt-an); // text-decoration: var(--_ctm-dn-sy-bn-dn-hr-se-ue); } } // Coupon Code. Letter spacing used to read the Header Container's variable and // the underline a doubled-up `dn-dn-` name, so neither followed this section. .coupon_code_text { @include cartSummaryLabel(--_ctm-dn-cn-ce); // Kept: the coupon link's colour follows the theme's link colour, not the // section's text colour. color: var(--_thm-cs-tt-ls-as); padding: prepareMediaVariable(--_ctm-dn-cn-ce-pg); } } } } // The `
` between the summary rows. The 1px dashed base is kept so a page saved // before Layout > Show Divider grew style and thickness controls looks unchanged, and // the thickness var repeats 1px as its own fallback for the same reason. Style arrives // as `data-divider-style` — a controls value, like the Line element's `data-line-style` // — and is enumerated here because CSS cannot read an attribute into a property. .border_dashed { border: 1px dashed var(--_thm-cs-be-se-3); border-width: prepareMediaVariable(--_ctm-lt-dr-ts, 1px); @each $style in solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden { &[data-divider-style="#{$style}"] { border-style: $style; } } }