/* */ /* FONTS */ :root { --ecomm-font-heading: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', 'Arial', 'Helvetica', sans-serif; --ecomm-font-root: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', 'Arial', 'Helvetica', sans-serif; --dxp-g-heading-font-family: var(--ecomm-font-heading); --dxp-g-root-font-family: var(--ecomm-font-root); } /* GLOBAL COLORS */ :root { /* WHITE */ --ecomm-color-white-01: #FFFFFF; /* rgb(255, 255, 255) */ --ecomm-color-white-02: #F6F8F9; /* rgb(246, 248, 249) */ --ecomm-color-white-03: #F8F9FA; /* rgb(248, 249, 250) */ --ecomm-color-white-04: #E0E7EA; /* rgb(224, 231, 234) */ --ecomm-color-white-05: #E8F4FD; /* rgb(232, 244, 253) */ --ecomm-color-white-06: #E1E1E1; /* rgb(225, 225, 225) */ --ecomm-color-white-07: #CBD6DF; /* rgb(203, 214, 223) */ /* BLACK */ --ecomm-color-black-01: #1D1D1E; /* rgb(29, 29, 30) */ --ecomm-color-black-02: #3B3F42; /* rgb(59, 63, 66) */ --ecomm-color-black-03: #393747; /* rgb(57, 55, 71) */ /* GRAY */ --ecomm-color-gray-01: #8B8989; /* rgb(158, 158, 158) */ --ecomm-color-gray-02: #9E9E9E; /* rgb(158, 158, 158) */ --ecomm-color-gray-03: #A0A1AA; /* rgb(160, 161, 170) */ --ecomm-color-gray-04: #BBBBBB; /* rgb(187, 187, 187) */ --ecomm-color-gray-05: #C3C3C3; /* rgb(195, 195, 195) */ --ecomm-color-gray-06: #E7E6E6; /* rgb(231, 230, 230) */ /* PRIMARY */ --ecomm-color-primary-01: #204E8E; /* rgb(32, 78, 142) */ --ecomm-color-primary-02: #214475; /* rgb(33, 68, 117) */ /* SECONDARY */ --ecomm-color-secondary-01: #D32028; /* rgb(211, 32, 40) */ --ecomm-color-secondary-02: #A70502; /* rgb(167, 5, 2) */ /* DESTRUCTIVE */ --ecomm-color-destructive-01: #D0461D; /* rgb(208, 70, 29) */ --ecomm-color-destructive-02: #AD320C; /* rgb(173, 50, 12) */ /* SUCCESS */ --ecomm-color-success-01: #CFFACE; /* rgb(207, 250, 206) */ --ecomm-color-success-02: #126636; /* rgb(18, 102, 54) */ --ecomm-color-success-03: #0D4A28; /* rgb(13, 74, 40) */ --dxp-g-success: var(--ecomm-color-success-01); --dxp-g-success-contrast: var(--ecomm-color-success-02); /* REQUIRED */ --ecomm-color-required-01: #A70502; /* rgb(186, 5, 23) */ /* ERROR */ --ecomm-color-error-01: #A70502; /* rgb(186, 5, 23) */ --dxp-g-destructive: var(--ecomm-color-error-01); --dxp-g-destructive-contrast: var(--ecomm-color-white-01); /* FADER */ --ecomm-color-fader-01: rgba(0, 0, 0, 0.60); /* BOX SHADOWS */ --ecomm-color-box-shadow-01: var(--ecomm-color-white-05); } /* COLORS */ :root { /* BASIC */ /* Colors -> Basic -> Background Color : var(--dxp-g-root) */ /* Colors -> Basic -> Text Color : var(--dxp-g-root-contrast) */ /* Colors -> Basic -> Brand Color : var(--dxp-g-brand) */ /* Colors -> Basic -> Brand Foreground Color : var(--dxp-g-brand-contrast) */ --ecomm-color-background: var(--dxp-g-root, var(--ecomm-color-white-01)); --ecomm-color-text: var(--dxp-g-root-contrast, var(--ecomm-color-black-01)); --ecomm-color-brand: var(--dxp-g-brand, var(--ecomm-color-primary-01)); --ecomm-color-brand-foreground: var(--dxp-g-brand-contrast, var(--ecomm-color-white-01)); /* ADVANCED -> TEXT */ /* Colors -> Advanced -> Text -> Heading 1 : var(--dxp-s-text-heading-extra-large-color) */ /* Colors -> Advanced -> Text -> Heading 2 : var(--dxp-s-text-heading-large-color) */ /* Colors -> Advanced -> Text -> Heading 3 : var(--dxp-s-text-heading-medium-color) */ /* Colors -> Advanced -> Text -> Heading 4 : var(--dxp-s-text-heading-small-color) */ /* Colors -> Advanced -> Text -> Heading 5 : var(--dxp-s-text-heading-extra-small-color) */ /* Colors -> Advanced -> Text -> Heading 6 : var(--dxp-s-text-heading-extra-extra-small-color) */ /* Colors -> Advanced -> Text -> Paragraph 1 : var(--dxp-s-body-text-color) */ /* Colors -> Advanced -> Text -> Paragraph 2 : var(--dxp-s-body-small-text-color) */ --ecomm-color-heading-1: var(--dxp-s-text-heading-extra-large-color, var(--ecomm-color-black-02)); --ecomm-color-heading-2: var(--dxp-s-text-heading-large-color, var(--ecomm-color-black-02)); --ecomm-color-heading-3: var(--dxp-s-text-heading-medium-color, var(--ecomm-color-black-02)); --ecomm-color-heading-4: var(--dxp-s-text-heading-small-color, var(--ecomm-color-black-02)); --ecomm-color-heading-5: var(--dxp-s-text-heading-extra-small-color, var(--ecomm-color-black-02)); --ecomm-color-heading-6: var(--dxp-s-text-heading-extra-extra-small-color, var(--ecomm-color-black-02)); --ecomm-color-paragraph-1: var(--dxp-s-body-text-color, var(--ecomm-color-black-01)); --ecomm-color-paragraph-2: var(--dxp-s-body-small-text-color, var(--ecomm-color-black-01)); /* ADVANCED -> LINKS */ /* Colors -> Advanced -> Links -> Link Color : var(--dxp-s-link-text-color) */ /* Colors -> Advanced -> Links -> Link Hover Color : var(--dxp-s-link-text-color-hover) */ --ecomm-color-link: var(--dxp-s-link-text-color, var(--ecomm-color-primary-01)); --ecomm-color-link-hover: var(--dxp-s-link-text-color-hover, var(--ecomm-color-primary-02)); /* ADVANCED -> FORMS */ /* Colors -> Advanced -> Forms -> Field Label : var(--dxp-s-form-element-label-color) */ /* Colors -> Advanced -> Forms -> Placeholder Text : var(--dxp-s-form-element-placeholder-text-color) */ /* Colors -> Advanced -> Forms -> Input Text : var(--dxp-s-form-element-text-color) */ /* Colors -> Advanced -> Forms -> Input Text Focus : var(--dxp-s-form-element-text-color-focus) */ /* Colors -> Advanced -> Forms -> Field Background Fill : var(--dxp-s-form-element-color-background) */ /* Colors -> Advanced -> Forms -> Field Background Focus : var(--dxp-s-form-element-color-background-active) */ /* Colors -> Advanced -> Forms -> Field Border : var(--dxp-s-form-element-color-border) */ /* Colors -> Advanced -> Forms -> Field Border Focus : var(--dxp-s-form-element-color-border-focus) */ /* Colors -> Advanced -> Forms -> Checkbox Background : var(--dxp-s-form-checkbox-color-background) */ /* Colors -> Advanced -> Forms -> Selected Checkbox Background : var(--dxp-s-form-checkbox-color-background-checked) */ /* Colors -> Advanced -> Forms -> Checkbox Border : var(--dxp-s-form-checkbox-color-border) */ /* Colors -> Advanced -> Forms -> Selected Checkbox Border : var(--dxp-s-form-checkbox-color-border-checked) */ --ecomm-color-form-field-label: var(--dxp-s-form-element-label-color, var(--ecomm-color-black-01)); --ecomm-color-form-placeholder-text: var(--dxp-s-form-element-placeholder-text-color, var(--ecomm-color-black-03)); --ecomm-color-form-input-text: var(--dxp-s-form-element-text-color, var(--ecomm-color-black-01)); --ecomm-color-form-input-text-focus: var(--dxp-s-form-element-text-color-focus, var(--ecomm-color-black-01)); --ecomm-color-form-field-background-fill: var(--dxp-s-form-element-color-background, var(--ecomm-color-white-01)); --ecomm-color-form-field-background-focus: var(--dxp-s-form-element-color-background-active, var(--ecomm-color-white-01)); --ecomm-color-form-field-border: var(--dxp-s-form-element-color-border, var(--ecomm-color-white-08)); --ecomm-color-form-field-border-focus: var(--dxp-s-form-element-color-border-focus, var(--ecomm-color-primary-01)); --ecomm-color-form-checkbox-background: var(--dxp-s-form-checkbox-color-background, var(--ecomm-color-white-01)); --ecomm-color-form-selected-checkbox-background: var(--dxp-s-form-checkbox-color-background-checked, var(--ecomm-color-primary-01)); --ecomm-color-form-checkbox-border: var(--dxp-s-form-checkbox-color-border, var(--ecomm-color-primary-01)); --ecomm-color-form-selected-checkbox-border: var(--dxp-s-form-checkbox-color-border-checked, var(--ecomm-color-primary-01)); /* ADVANCED -> DROPDOWNS */ /* Colors -> Advanced -> Dropdowns -> Dropdown Text Color : var(--dxp-s-dropdown-text-color) */ /* Colors -> Advanced -> Dropdowns -> Dropdown Background Color : var(--dxp-s-dropdown-color-background) */ /* Colors -> Advanced -> Dropdowns -> Dropdown Text Hover Color : var(--dxp-s-dropdown-text-color-hover) */ /* Colors -> Advanced -> Dropdowns -> Dropdown Background Hover Color : var(--dxp-s-dropdown-color-background-hover) */ /* Colors -> Advanced -> Dropdowns -> Dropdown Border Color : var(--dxp-s-dropdown-color-border) */ --ecomm-color-form-dropdown-text: var(--dxp-s-dropdown-text-color, var(--ecomm-color-black-01)); --ecomm-color-form-dropdown-background: var(--dxp-s-dropdown-color-background, var(--ecomm-color-white-01)); --ecomm-color-form-dropdown-text-hover: var(--dxp-s-dropdown-text-color-hover, var(--ecomm-color-primary-01)); --ecomm-color-form-dropdown-background-hover: var(--dxp-s-dropdown-color-background-hover, var(--ecomm-color-white-02)); --ecomm-color-form-dropdown-border: var(--dxp-s-dropdown-color-border, transparent); } /* TEXT */ :root { /* HEADING 1 */ /* Text -> Heading 1 -> Font Family : var(--dxp-s-text-heading-extra-large-font-family) */ /* Text -> Heading 1 -> Font Size : var(--dxp-s-text-heading-extra-large-font-size) */ /* Text -> Heading 1 -> Font Style : var(--dxp-s-text-heading-extra-large-font-style) */ /* Text -> Heading 1 -> Font Weight : var(--dxp-s-text-heading-extra-large-font-weight) */ /* Text -> Heading 1 -> Text Decoration : var(--dxp-s-text-heading-extra-large-text-decoration) */ /* Text -> Heading 1 -> Text Case : var(--dxp-s-text-heading-extra-large-text-transform) */ /* Text -> Heading 1 -> Line Height : var(--dxp-s-text-heading-extra-large-line-height) */ /* Text -> Heading 1 -> Character Spacing : var(--dxp-s-text-heading-extra-large-letter-spacing) */ --ecomm-heading-1-font-family: var(--dxp-s-text-heading-extra-large-font-family, var(--ecomm-font-heading)); --ecomm-heading-1-font-size: var(--dxp-s-text-heading-extra-large-font-size, 1.75rem); --ecomm-heading-1-font-style: var(--dxp-s-text-heading-extra-large-font-style, normal); --ecomm-heading-1-font-weight: var(--dxp-s-text-heading-extra-large-font-weight, 700); --ecomm-heading-1-text-decoration: var(--dxp-s-text-heading-extra-large-text-decoration, none); --ecomm-heading-1-text-transform: var(--dxp-s-text-heading-extra-large-text-transform, none); --ecomm-heading-1-line-height: var(--dxp-s-text-heading-extra-large-line-height, 2rem); --ecomm-heading-1-letter-spacing: var(--dxp-s-text-heading-extra-large-letter-spacing, 0); /* HEADING 2 */ /* Text -> Heading 2 -> Font Family : var(--dxp-s-text-heading-large-font-family) */ /* Text -> Heading 2 -> Font Size : var(--dxp-s-text-heading-large-font-size) */ /* Text -> Heading 2 -> Font Style : var(--dxp-s-text-heading-large-font-style) */ /* Text -> Heading 2 -> Font Weight : var(--dxp-s-text-heading-large-font-weight) */ /* Text -> Heading 2 -> Text Decoration : var(--dxp-s-text-heading-large-text-decoration) */ /* Text -> Heading 2 -> Text Case : var(--dxp-s-text-heading-large-text-transform) */ /* Text -> Heading 2 -> Line Height : var(--dxp-s-text-heading-large-line-height) */ /* Text -> Heading 2 -> Character Spacing : var(--dxp-s-text-heading-large-letter-spacing) */ --ecomm-heading-2-font-family: var(--dxp-s-text-heading-large-font-family, var(--ecomm-font-heading)); --ecomm-heading-2-font-size: var(--dxp-s-text-heading-large-font-size, 1.5rem); --ecomm-heading-2-font-style: var(--dxp-s-text-heading-large-font-style, normal); --ecomm-heading-2-font-weight: var(--dxp-s-text-heading-large-font-weight, 700); --ecomm-heading-2-text-decoration: var(--dxp-s-text-heading-large-text-decoration, none); --ecomm-heading-2-text-transform: var(--dxp-s-text-heading-large-text-transform, none); --ecomm-heading-2-line-height: var(--dxp-s-text-heading-large-line-height, 1.75rem); --ecomm-heading-2-letter-spacing: var(--dxp-s-text-heading-large-letter-spacing, 0); /* HEADING 3 */ /* Text -> Heading 3 -> Font Family : var(--dxp-s-text-heading-medium-font-family) */ /* Text -> Heading 3 -> Font Size : var(--dxp-s-text-heading-medium-font-size) */ /* Text -> Heading 3 -> Font Style : var(--dxp-s-text-heading-medium-font-style) */ /* Text -> Heading 3 -> Font Weight : var(--dxp-s-text-heading-medium-font-weight) */ /* Text -> Heading 3 -> Text Decoration : var(--dxp-s-text-heading-medium-text-decoration) */ /* Text -> Heading 3 -> Text Case : var(--dxp-s-text-heading-medium-text-transform) */ /* Text -> Heading 3 -> Line Height : var(--dxp-s-text-heading-medium-line-height) */ /* Text -> Heading 3 -> Character Spacing : var(--dxp-s-text-heading-medium-letter-spacing) */ --ecomm-heading-3-font-family: var(--dxp-s-text-heading-medium-font-family, var(--ecomm-font-heading)); --ecomm-heading-3-font-size: var(--dxp-s-text-heading-medium-font-size, 1.25rem); --ecomm-heading-3-font-style: var(--dxp-s-text-heading-medium-font-style, normal); --ecomm-heading-3-font-weight: var(--dxp-s-text-heading-medium-font-weight, 700); --ecomm-heading-3-text-decoration: var(--dxp-s-text-heading-medium-text-decoration, none); --ecomm-heading-3-text-transform: var(--dxp-s-text-heading-medium-text-transform, none); --ecomm-heading-3-line-height: var(--dxp-s-text-heading-medium-line-height, 1.5rem); --ecomm-heading-3-letter-spacing: var(--dxp-s-text-heading-medium-letter-spacing, 0); /* HEADING 4 */ /* Text -> Heading 4 -> Font Family : var(--dxp-s-text-heading-small-font-family) */ /* Text -> Heading 4 -> Font Size : var(--dxp-s-text-heading-small-font-size) */ /* Text -> Heading 4 -> Font Style : var(--dxp-s-text-heading-small-font-style) */ /* Text -> Heading 4 -> Font Weight : var(--dxp-s-text-heading-small-font-weight) */ /* Text -> Heading 4 -> Text Decoration : var(--dxp-s-text-heading-small-text-decoration) */ /* Text -> Heading 4 -> Text Case : var(--dxp-s-text-heading-small-text-transform) */ /* Text -> Heading 4 -> Line Height : var(--dxp-s-text-heading-small-line-height) */ /* Text -> Heading 4 -> Character Spacing : var(--dxp-s-text-heading-small-letter-spacing) */ --ecomm-heading-4-font-family: var(--dxp-s-text-heading-small-font-family, var(--ecomm-font-heading)); --ecomm-heading-4-font-size: var(--dxp-s-text-heading-small-font-size, 1.125rem); --ecomm-heading-4-font-style: var(--dxp-s-text-heading-small-font-style, normal); --ecomm-heading-4-font-weight: var(--dxp-s-text-heading-small-font-weight, 700); --ecomm-heading-4-text-decoration: var(--dxp-s-text-heading-small-text-decoration, none); --ecomm-heading-4-text-transform: var(--dxp-s-text-heading-small-text-transform, none); --ecomm-heading-4-line-height: var(--dxp-s-text-heading-small-line-height, 1.25rem); --ecomm-heading-4-letter-spacing: var(--dxp-s-text-heading-small-letter-spacing, 0); /* HEADING 5 */ /* Text -> Heading 5 -> Font Family : var(--dxp-s-text-heading-extra-small-font-family) */ /* Text -> Heading 5 -> Font Size : var(--dxp-s-text-heading-extra-small-font-size) */ /* Text -> Heading 5 -> Font Style : var(--dxp-s-text-heading-extra-small-font-style) */ /* Text -> Heading 5 -> Font Weight : var(--dxp-s-text-heading-extra-small-font-weight) */ /* Text -> Heading 5 -> Text Decoration : var(--dxp-s-text-heading-extra-small-text-decoration) */ /* Text -> Heading 5 -> Text Case : var(--dxp-s-text-heading-extra-small-text-transform) */ /* Text -> Heading 5 -> Line Height : var(--dxp-s-text-heading-extra-small-line-height) */ /* Text -> Heading 5 -> Character Spacing : var(--dxp-s-text-heading-extra-small-letter-spacing) */ --ecomm-heading-5-font-family: var(--dxp-s-text-heading-extra-small-font-family, var(--ecomm-font-heading)); --ecomm-heading-5-font-size: var(--dxp-s-text-heading-extra-small-font-size, 1rem); --ecomm-heading-5-font-style: var(--dxp-s-text-heading-extra-small-font-style, normal); --ecomm-heading-5-font-weight: var(--dxp-s-text-heading-extra-small-font-weight, 700); --ecomm-heading-5-text-decoration: var(--dxp-s-text-heading-extra-small-text-decoration, none); --ecomm-heading-5-text-transform: var(--dxp-s-text-heading-extra-small-text-transform, none); --ecomm-heading-5-line-height: var(--dxp-s-text-heading-extra-small-line-height, 1.25rem); --ecomm-heading-5-letter-spacing: var(--dxp-s-text-heading-extra-small-letter-spacing, 0); /* HEADING 6 */ /* Text -> Heading 6 -> Font Family : var(--dxp-s-text-heading-extra-extra-small-font-family) */ /* Text -> Heading 6 -> Font Size : var(--dxp-s-text-heading-extra-extra-small-font-size) */ /* Text -> Heading 6 -> Font Style : var(--dxp-s-text-heading-extra-extra-small-font-style) */ /* Text -> Heading 6 -> Font Weight : var(--dxp-s-text-heading-extra-extra-small-font-weight) */ /* Text -> Heading 6 -> Text Decoration : var(--dxp-s-text-heading-extra-extra-small-text-decoration) */ /* Text -> Heading 6 -> Text Case : var(--dxp-s-text-heading-extra-extra-small-text-transform) */ /* Text -> Heading 6 -> Line Height : var(--dxp-s-text-heading-extra-extra-small-line-height) */ /* Text -> Heading 6 -> Character Spacing : var(--dxp-s-text-heading-extra-extra-small-letter-spacing) */ --ecomm-heading-6-font-family: var(--dxp-s-text-heading-extra-extra-small-font-family, var(--ecomm-font-heading)); --ecomm-heading-6-font-size: var(--dxp-s-text-heading-extra-extra-small-font-size, 0.875rem); --ecomm-heading-6-font-style: var(--dxp-s-text-heading-extra-extra-small-font-style, normal); --ecomm-heading-6-font-weight: var(--dxp-s-text-heading-extra-extra-small-font-weight, 700); --ecomm-heading-6-text-decoration: var(--dxp-s-text-heading-extra-extra-small-text-decoration, none); --ecomm-heading-6-text-transform: var(--dxp-s-text-heading-extra-extra-small-text-transform, none); --ecomm-heading-6-line-height: var(--dxp-s-text-heading-extra-extra-small-line-height, 1.125rem); --ecomm-heading-6-letter-spacing: var(--dxp-s-text-heading-extra-extra-small-letter-spacing, 0); /* PARAGRAPH 1 */ /* Text -> Paragraph 1 -> Font Family : var(--dxp-s-body-font-family) */ /* Text -> Paragraph 1 -> Font Size : var(--dxp-s-body-font-size) */ /* Text -> Paragraph 1 -> Font Style : var(--dxp-s-body-font-style) */ /* Text -> Paragraph 1 -> Font Weight : var(--dxp-s-body-font-weight) */ /* Text -> Paragraph 1 -> Text Decoration : var(--dxp-s-body-text-decoration) */ /* Text -> Paragraph 1 -> Text Case : var(--dxp-s-body-text-transform) */ /* Text -> Paragraph 1 -> Line Height : var(--dxp-s-body-line-height) */ /* Text -> Paragraph 1 -> Character Spacing : var(--dxp-s-body-letter-spacing) */ --ecomm-paragraph-1-font-family: var(--dxp-s-body-font-family, var(--ecomm-font-root)); --ecomm-paragraph-1-font-size: var(--dxp-s-body-font-size, 0.875rem); --ecomm-paragraph-1-font-style: var(--dxp-s-body-font-style, normal); --ecomm-paragraph-1-font-weight: var(--dxp-s-body-font-weight, 400); --ecomm-paragraph-1-text-decoration: var(--dxp-s-body-text-decoration, none); --ecomm-paragraph-1-text-transform: var(--dxp-s-body-text-transform, none); --ecomm-paragraph-1-line-height: var(--dxp-s-body-line-height, 1.125rem); --ecomm-paragraph-1-letter-spacing: var(--dxp-s-body-letter-spacing, 0); /* PARAGRAPH 2 */ /* Text -> Paragraph 2 -> Font Family : var(--dxp-s-body-small-font-family) */ /* Text -> Paragraph 2 -> Font Size : var(--dxp-s-body-small-font-size) */ /* Text -> Paragraph 2 -> Font Style : var(--dxp-s-body-small-font-style) */ /* Text -> Paragraph 2 -> Font Weight : var(--dxp-s-body-small-font-weight) */ /* Text -> Paragraph 2 -> Text Decoration : var(--dxp-s-body-small-text-decoration) */ /* Text -> Paragraph 2 -> Text Case : var(--dxp-s-body-small-text-transform) */ /* Text -> Paragraph 2 -> Line Height : var(--dxp-s-body-small-line-height) */ /* Text -> Paragraph 2 -> Character Spacing : var(--dxp-s-body-small-letter-spacing) */ --ecomm-paragraph-2-font-family: var(--dxp-s-body-small-font-family, var(--ecomm-font-root)); --ecomm-paragraph-2-font-size: var(--dxp-s-body-small-font-size, 0.75rem); --ecomm-paragraph-2-font-style: var(--dxp-s-body-small-font-style, normal); --ecomm-paragraph-2-font-weight: var(--dxp-s-body-small-font-weight, 400); --ecomm-paragraph-2-text-decoration: var(--dxp-s-body-small-text-decoration, none); --ecomm-paragraph-2-text-transform: var(--dxp-s-body-small-text-transform, none); --ecomm-paragraph-2-line-height: var(--dxp-s-body-small-line-height, 1rem); --ecomm-paragraph-2-letter-spacing: var(--dxp-s-body-small-letter-spacing, 0); /* LINK */ /* Setting in 'Experience Builder' */ /* Text -> Links -> Text Decoration : var(--dxp-s-link-text-decoration) */ /* Text -> Links -> Focus Text Decoration : var(--dxp-s-link-text-decoration-focus) */ /* Text -> Links -> Hover Text Decoration : var(--dxp-s-link-text-decoration-hover) */ --ecomm-link-text-decoration: var(--dxp-s-link-text-decoration, none); --ecomm-link-text-decoration-focus: var(--dxp-s-link-text-decoration-focus, underline); --ecomm-link-text-decoration-hover: var(--dxp-s-link-text-decoration-hover, underline); } /* GRID */ :root { /* Setting in 'Experience Builder' */ /* DESKTOP */ /* Site Spacing -> Desktop -> Max Content Width : var(--dxp-s-section-columns-max-width) */ /* Site Spacing -> Desktop -> Section Padding: Top & Bottom : var(--dxp-s-section-content-spacing-block-start) */ /* : var(--dxp-s-section-content-spacing-block-end) */ /* Site Spacing -> Desktop -> Section Padding: Left & Right : var(--dxp-s-section-content-spacing-inline-start) */ /* : var(--dxp-s-section-content-spacing-inline-end) */ /* Site Spacing -> Desktop -> Column Gutters : var(--dxp-s-column-spacer-size) */ /* Site Spacing -> Desktop -> Vertical Space Between Components : var(--dxp-s-component-wrapper-spacer-size) */ --ecomm-grid-max-width: var(--dxp-s-section-columns-max-width, 85rem); --ecomm-grid-padding-top: var(--dxp-s-section-content-spacing-block-start, 0); --ecomm-grid-block-start: var(--ecomm-grid-padding-top); --ecomm-grid-padding-right: var(--dxp-s-section-content-spacing-inline-end, 2.5rem); --ecomm-grid-inline-end: var(--ecomm-grid-padding-right); --ecomm-grid-padding-bottom: var(--dxp-s-section-content-spacing-block-end, 0); --ecomm-grid-block-end: var(--ecomm-grid-padding-bottom); --ecomm-grid-padding-left: var(--dxp-s-section-content-spacing-inline-start, 2.5rem); --ecomm-grid-inline-start: var(--ecomm-grid-padding-left); --ecomm-grid-padding: var(--ecomm-grid-padding-top) var(--ecomm-grid-padding-right) var(--ecomm-grid-padding-bottom) var(--ecomm-grid-padding-left); --ecomm-grid-column-gap: var(--dxp-s-column-spacer-size, 2.5rem); --ecomm-grid-component-margin-bottom: var(--dxp-s-component-wrapper-spacer-size, 0); /* TABLET */ --ecomm-grid-tablet-max-width: 100%; --ecomm-grid-tablet-padding-top: 0; --ecomm-grid-tablet-block-start: var(--ecomm-grid-tablet-padding-top); --ecomm-grid-tablet-padding-right: 1.5rem; --ecomm-grid-tablet-inline-end: var(--ecomm-grid-tablet-padding-right); --ecomm-grid-tablet-padding-bottom: 0; --ecomm-grid-tablet-block-end: var(--ecomm-grid-tablet-padding-bottom); --ecomm-grid-tablet-padding-left: 1.5rem; --ecomm-grid-tablet-inline-start: var(--ecomm-grid-tablet-padding-left); --ecomm-grid-tablet-padding: var(--ecomm-grid-tablet-padding-top) var(--ecomm-grid-tablet-padding-right) var(--ecomm-grid-tablet-padding-bottom) var(--ecomm-grid-tablet-padding-left); --ecomm-grid-tablet-column-gap: 0; --ecomm-grid-tablet-component-margin-bottom: 0; /* MOBILE */ /* Site Spacing -> Mobile -> Max Content Width : var(--dxp-s-section-columns-max-width-mobile) */ /* Site Spacing -> Mobile -> Section Padding: Top & Bottom : var(--dxp-s-section-content-spacing-block-start-mobile) */ /* : var(--dxp-s-section-content-spacing-block-end-mobile) */ /* Site Spacing -> Mobile -> Section Padding: Left & Right : var(--dxp-s-section-content-spacing-inline-start-mobile) */ /* : var(--dxp-s-section-content-spacing-inline-end-mobile) */ /* Site Spacing -> Mobile -> Column Gutters : var(--dxp-s-column-spacer-size-mobile) */ /* Site Spacing -> Mobile -> Vertical Space Between Components : var(--dxp-s-component-wrapper-spacer-size-mobile) */ --ecomm-grid-mobile-max-width: var(--dxp-s-section-columns-max-width-mobile, 100%); --ecomm-grid-mobile-padding-top: var(--dxp-s-section-content-spacing-block-start-mobile, 0); --ecomm-grid-mobile-block-start: var(--ecomm-grid-mobile-padding-top); --ecomm-grid-mobile-padding-right: var(--dxp-s-section-content-spacing-inline-end-mobile, 1rem); --ecomm-grid-mobile-inline-end: var(--ecomm-grid-mobile-padding-right); --ecomm-grid-mobile-padding-bottom: var(--dxp-s-section-content-spacing-block-end-mobile, 0); --ecomm-grid-mobile-block-end: var(--ecomm-grid-mobile-padding-bottom); --ecomm-grid-mobile-padding-left: var(--dxp-s-section-content-spacing-inline-start-mobile, 1rem); --ecomm-grid-mobile-inline-start: var(--ecomm-grid-mobile-padding-left); --ecomm-grid-mobile-padding: var(--ecomm-grid-mobile-padding-top) var(--ecomm-grid-mobile-padding-right) var(--ecomm-grid-mobile-padding-bottom) var(--ecomm-grid-mobile-padding-left); --ecomm-grid-mobile-column-gap: var(--dxp-s-column-spacer-size-mobile, 0); --ecomm-grid-mobile-component-margin-bottom: var(--dxp-s-component-wrapper-spacer-size-mobile, 0); } /* BUTTONS */ :root { /* COLORS */ /* PRIMARY BUTTON */ /* Buttons -> Colors -> Primary Button -> Default State -> Background : var(--dxp-s-button-color) */ /* Buttons -> Colors -> Primary Button -> Default State -> Border : var(--dxp-s-button-border-color) */ /* Buttons -> Colors -> Primary Button -> Default State -> Text : var(--dxp-s-button-color-contrast) */ /* Buttons -> Colors -> Primary Button -> Hover State -> Hover Background : var(--dxp-s-button-color-hover) */ /* Buttons -> Colors -> Primary Button -> Hover State -> Hover Border : var(--dxp-s-button-border-color-hover) */ /* Buttons -> Colors -> Primary Button -> Hover State -> Hover Text : var(--dxp-s-button-color-hover-contrast) */ /* Buttons -> Colors -> Primary Button -> Focus State -> Focus Background : var(--dxp-s-button-color-focus) */ /* Buttons -> Colors -> Primary Button -> Focus State -> Focus Border : var(--dxp-s-button-border-color-focus) */ /* Buttons -> Colors -> Primary Button -> Focus State -> Focus Text : var(--dxp-s-button-color-focus-contrast) */ --ecomm-button-color-primary-background: var(--dxp-s-button-color, var(--ecomm-color-primary-01)); --ecomm-button-color-primary-border: var(--dxp-s-button-border-color, var(--ecomm-color-primary-01)); --ecomm-button-color-primary-text: var(--dxp-s-button-color-contrast, var(--ecomm-color-white-01)); --ecomm-button-color-primary-background-hover: var(--dxp-s-button-color-hover, var(--ecomm-color-primary-02)); --ecomm-button-color-primary-border-hover: var(--dxp-s-button-border-color-hover, var(--ecomm-color-primary-02)); --ecomm-button-color-primary-text-hover: var(--dxp-s-button-color-hover-contrast, var(--ecomm-color-white-01)); --ecomm-button-color-primary-background-focus: var(--dxp-s-button-color-focus, var(--ecomm-color-primary-02)); --ecomm-button-color-primary-border-focus: var(--dxp-s-button-border-color-focus, var(--ecomm-color-primary-02)); --ecomm-button-color-primary-text-focus: var(--dxp-s-button-color-focus-contrast, var(--ecomm-color-white-01)); /* SECONDARY BUTTON */ /* Buttons -> Colors -> Secondary Button -> Default State -> Background : var(--dxp-s-secondary-button-color) */ /* Buttons -> Colors -> Secondary Button -> Default State -> Border : var(--dxp-s-secondary-button-border-color) */ /* Buttons -> Colors -> Secondary Button -> Default State -> Text : var(--dxp-s-secondary-button-text-color) */ /* Buttons -> Colors -> Secondary Button -> Hover State -> Hover Background : var(--dxp-s-secondary-button-color-hover) */ /* Buttons -> Colors -> Secondary Button -> Hover State -> Hover Border : var(--dxp-s-secondary-button-border-color-hover) */ /* Buttons -> Colors -> Secondary Button -> Hover State -> Hover Text : var(--dxp-s-secondary-button-text-color-hover) */ /* Buttons -> Colors -> Secondary Button -> Focus State -> Focus Background : var(--dxp-s-secondary-button-color-focus) */ /* Buttons -> Colors -> Secondary Button -> Focus State -> Focus Border : var(--dxp-s-secondary-button-border-color-focus) */ /* Buttons -> Colors -> Secondary Button -> Focus State -> Focus Text : var(--dxp-s-secondary-button-text-color-focus) */ --ecomm-button-color-secondary-background: var(--dxp-s-secondary-button-color, var(--ecomm-color-white-01)); --ecomm-button-color-secondary-border: var(--dxp-s-secondary-button-border-color, var(--ecomm-color-primary-01)); --ecomm-button-color-secondary-text: var(--dxp-s-secondary-button-text-color, var(--ecomm-color-primary-01)); --ecomm-button-color-secondary-background-hover: var(--dxp-s-secondary-button-color-hover, var(--ecomm-color-primary-02)); --ecomm-button-color-secondary-border-hover: var(--dxp-s-secondary-button-border-color-hover, var(--ecomm-color-primary-02)); --ecomm-button-color-secondary-text-hover: var(--dxp-s-secondary-button-text-color-hover, var(--ecomm-color-white-01)); --ecomm-button-color-secondary-background-focus: var(--dxp-s-secondary-button-color-focus, var(--ecomm-color-primary-02)); --ecomm-button-color-secondary-border-focus: var(--dxp-s-secondary-button-border-color-focus, var(--ecomm-color-primary-02)); --ecomm-button-color-secondary-text-focus: var(--dxp-s-secondary-button-text-color-focus, var(--ecomm-color-white-01)); /* TERTIARY BUTTON */ /* Buttons -> Colors -> Tertiary Button -> Default State -> Background : var(--dxp-s-tertiary-button-color) */ /* Buttons -> Colors -> Tertiary Button -> Default State -> Border : var(--dxp-s-tertiary-button-border-color) */ /* Buttons -> Colors -> Tertiary Button -> Default State -> Text : var(--dxp-s-tertiary-button-text-color) */ /* Buttons -> Colors -> Tertiary Button -> Hover State -> Hover Background : var(--dxp-s-tertiary-button-color-hover) */ /* Buttons -> Colors -> Tertiary Button -> Hover State -> Hover Border : var(--dxp-s-tertiary-button-border-color-hover) */ /* Buttons -> Colors -> Tertiary Button -> Hover State -> Hover Text : var(--dxp-s-tertiary-button-text-color-hover) */ /* Buttons -> Colors -> Tertiary Button -> Focus State -> Focus Background : var(--dxp-s-tertiary-button-color-focus) */ /* Buttons -> Colors -> Tertiary Button -> Focus State -> Focus Border : var(--dxp-s-tertiary-button-border-color-focus) */ /* Buttons -> Colors -> Tertiary Button -> Focus State -> Focus Text : var(--dxp-s-tertiary-button-text-color-focus) */ --ecomm-button-color-tertiary-background: var(--dxp-s-tertiary-button-color, transparent); --ecomm-button-color-tertiary-border: var(--dxp-s-tertiary-button-border-color, transparent); --ecomm-button-color-tertiary-text: var(--dxp-s-tertiary-button-text-color, var(--ecomm-color-primary-01)); --ecomm-button-color-tertiary-background-hover: var(--dxp-s-tertiary-button-color-hover, transparent); --ecomm-button-color-tertiary-border-hover: var(--dxp-s-tertiary-button-border-color-hover, transparent); --ecomm-button-color-tertiary-text-hover: var(--dxp-s-tertiary-button-text-color-hover, var(--ecomm-color-primary-02)); --ecomm-button-color-tertiary-background-focus: var(--dxp-s-tertiary-button-color-focus, transparent); --ecomm-button-color-tertiary-border-focus: var(--dxp-s-tertiary-button-border-color-focus, transparent); --ecomm-button-color-tertiary-text-focus: var(--dxp-s-tertiary-button-text-color-focus, var(--ecomm-color-primary-02)); /* TEXT */ /* Buttons -> Text -> Font Family : var(--dxp-s-button-font-family) */ /* Buttons -> Text -> Font Style : var(--dxp-s-button-font-style) */ /* Buttons -> Text -> Font Weight : var(--dxp-s-button-font-weight) */ /* Buttons -> Text -> Text Case : var(--dxp-s-button-text-transform) */ /* Buttons -> Text -> Text Decoration : var(--dxp-s-button-text-decoration) */ /* Buttons -> Text -> Line Height (1–5) : var(--dxp-s-button-line-height) */ /* Buttons -> Text -> Character Spacing (0–2,5 em) : var(--dxp-s-button-letter-spacing) */ --ecomm-button-font-family: var(--dxp-s-button-font-family, var(--ecomm-font-root)); --ecomm-button-font-style: var(--dxp-s-button-font-style, normal); --ecomm-button-font-weight: var(--dxp-s-button-font-weight, 600); --ecomm-button-text-transform: var(--dxp-s-button-text-transform, none); --ecomm-button-text-decoration: var(--dxp-s-button-text-decoration, none); --ecomm-button-line-height: var(--dxp-s-button-line-height, 1.5rem); --ecomm-button-letter-spacing: var(--dxp-s-button-letter-spacing, 0); /* SIZES */ /* STANDARD BUTTONS */ /* Buttons -> Sizes -> Standard Buttons -> Vertical Padding (0–10 rem) : var(--dxp-s-button-padding-block-start) */ /* : var(--dxp-s-button-padding-block-end) */ /* Buttons -> Sizes -> Standard Buttons -> Horizontal Padding (0–10 rem) : var(--dxp-s-button-padding-inline-start) */ /* : var(--dxp-s-button-padding-inline-end) */ /* Buttons -> Sizes -> Standard Buttons -> Font Size (0,25–10 rem) : var(--dxp-s-button-font-size) */ /* Buttons -> Sizes -> Standard Buttons -> Border Radius (0–150 px) : var(--dxp-s-button-radius-border) */ --ecomm-button-padding-top: var(--dxp-s-button-padding-block-start, 0.6875rem); --ecomm-button-padding-bottom: var(--dxp-s-button-padding-block-end, 0.6875rem); --ecomm-button-padding-left: var(--dxp-s-button-padding-inline-start, 3rem); --ecomm-button-padding-right: var(--dxp-s-button-padding-inline-end, 3rem); --ecomm-button-font-size: var(--dxp-s-button-font-size, 1.125rem); --ecomm-button-border-radius: var(--dxp-s-button-radius-border, 48px); /* SMALL BUTTONS */ /* Buttons -> Sizes -> Small Buttons -> Vertical Padding (0–10 rem) : var(--dxp-s-button-small-padding-block-start) */ /* : var(--dxp-s-button-small-padding-block-end) */ /* Buttons -> Sizes -> Small Buttons -> Horizontal Padding (0–10 rem) : var(--dxp-s-button-small-padding-inline-start) */ /* : var(--dxp-s-button-small-padding-inline-end) */ /* Buttons -> Sizes -> Small Buttons -> Font Size (0,25–10 rem) : var(--dxp-s-button-small-font-size) */ /* Buttons -> Sizes -> Small Buttons -> Border Radius (0–150 px) : var(--dxp-s-button-small-radius-border) */ --ecomm-button-small-padding-top: var(--dxp-s-button-small-padding-block-start, 0.3125rem); --ecomm-button-small-padding-bottom: var(--dxp-s-button-small-padding-block-end, 0.3125rem); --ecomm-button-small-padding-left: var(--dxp-s-button-small-padding-inline-start, 1.5rem); --ecomm-button-small-padding-right: var(--dxp-s-button-small-padding-inline-end, 1.5rem); --ecomm-button-small-font-size: var(--dxp-s-button-small-font-size, 1rem); --ecomm-button-small-border-radius: var(--dxp-s-button-small-radius-border, 36px); /* LARGE BUTTONS */ /* Buttons -> Sizes -> Large Buttons -> Vertical Padding (0–10 rem) : var(--dxp-s-button-large-padding-block-start) */ /* : var(--dxp-s-button-large-padding-block-end) */ /* Buttons -> Sizes -> Large Buttons -> Horizontal Padding (0–10 rem) : var(--dxp-s-button-large-padding-inline-start) */ /* : var(--dxp-s-button-large-padding-inline-end) */ /* Buttons -> Sizes -> Large Buttons -> Font Size (0,25–10 rem) : var(--dxp-s-button-large-font-size) */ /* Buttons -> Sizes -> Large Buttons -> Border Radius (0–150 px) : var(--dxp-s-button-large-radius-border) */ --ecomm-button-large-padding-top: var(--dxp-s-button-large-padding-block-start, 0.9375rem); --ecomm-button-large-padding-bottom: var(--dxp-s-button-large-padding-block-end, 0.9375rem); --ecomm-button-large-padding-left: var(--dxp-s-button-large-padding-inline-start, 3.5rem); --ecomm-button-large-padding-right: var(--dxp-s-button-large-padding-inline-end, 3.5rem); --ecomm-button-large-font-size: var(--dxp-s-button-large-font-size, 1.375rem); --ecomm-button-large-border-radius: var(--dxp-s-button-large-radius-border, 56px); } /* FORM */ :root { /* SPACING */ /* Forms -> Spacing -> Field Padding: Top : var(--dxp-s-form-element-spacing-block-start) */ /* Forms -> Spacing -> Field Padding: Right : var(--dxp-s-form-element-spacing-horizontal-end) */ /* Forms -> Spacing -> Field Padding: Bottom : var(--dxp-s-form-element-spacing-block-end) */ /* Forms -> Spacing -> Field Padding: Left : var(--dxp-s-form-element-spacing-horizontal-start) */ --ecomm-form-spacing-field-padding-top: var(--dxp-s-form-element-spacing-block-start, 11px); --ecomm-form-spacing-field-padding-right: var(--dxp-s-form-element-spacing-horizontal-end, 12px); --ecomm-form-spacing-field-padding-bottom: var(--dxp-s-form-element-spacing-block-end, 11px); --ecomm-form-spacing-field-padding-left: var(--dxp-s-form-element-spacing-horizontal-start, 12px); /* BORDERS */ /* Forms -> Borders -> Field Border Radius (0–50 px) : var(--dxp-s-form-element-radius-border) */ /* Forms -> Borders -> Field Border Weight (0–10 px) : var(--dxp-s-form-element-width-border) */ /* Forms -> Borders -> Checkbox Border Radius (0–50 px) : var(--dxp-s-form-checkbox-radius-border) */ /* Forms -> Borders -> Checkbox Border Weight (0–10 px) : var(--dxp-s-form-checkbox-width-border) */ --ecomm-form-borders-field-border-radius: var(--dxp-s-form-element-radius-border, 4px); --ecomm-form-borders-field-border-width: var(--dxp-s-form-element-width-border, 1px); --ecomm-form-borders-checkbox-border-radius: var(--dxp-s-form-checkbox-radius-border, 4px); --ecomm-form-borders-checkbox-border-width: var(--dxp-s-form-checkbox-width-border, 2px); /* FIELD LABELS */ /* Forms -> Field Labels -> Font Family : var(--dxp-s-form-element-label-font-family) */ /* Forms -> Field Labels -> Font Size : var(--dxp-s-form-element-label-font-size) */ /* Forms -> Field Labels -> Font Style : var(--dxp-s-form-element-label-font-style) */ /* Forms -> Field Labels -> Font Weight : var(--dxp-s-form-element-label-font-weight) */ /* Forms -> Field Labels -> Text Decoration : var(--dxp-s-form-element-label-text-decoration) */ /* Forms -> Field Labels -> Text Case : var(--dxp-s-form-element-label-text-transform) */ /* Forms -> Field Labels -> Line Height (1–5) : var(--dxp-s-form-element-label-line-height) */ /* Forms -> Field Labels -> Character Spacing (0–2,5 em) : var(--dxp-s-form-element-label-letter-spacing) */ --ecomm-form-field-labels-font-family: var(--dxp-s-form-element-label-font-family, var(--ecomm-font-root)); --ecomm-form-field-labels-font-size: var(--dxp-s-form-element-label-font-size, 0.875rem); --ecomm-form-field-labels-font-style: var(--dxp-s-form-element-label-font-style, normal); --ecomm-form-field-labels-font-weight: var(--dxp-s-form-element-label-font-weight, 400); --ecomm-form-field-labels-text-decoration: var(--dxp-s-form-element-label-text-decoration, none); --ecomm-form-field-labels-text-transform: var(--dxp-s-form-element-label-text-transform, none); --ecomm-form-field-labels-line-height: var(--dxp-s-form-element-label-line-height, 1.25); --ecomm-form-field-labels-letter-spacing: var(--dxp-s-form-element-label-letter-spacing, 0); /* INPUT TEXT */ /* Forms -> Input Text -> Font Family : var(--dxp-s-form-element-text-font-family) */ /* Forms -> Input Text -> Font Size : var(--dxp-s-form-element-text-font-size) */ /* Forms -> Input Text -> Font Style : var(--dxp-s-form-element-text-font-style) */ /* Forms -> Input Text -> Font Weight : var(--dxp-s-form-element-text-font-weight) */ /* Forms -> Input Text -> Text Decoration : var(--dxp-s-form-element-text-text-transform) */ /* Forms -> Input Text -> Text Case : var(--dxp-s-form-element-text-text-transform) */ /* Forms -> Input Text -> Line Height (1–5) : var(--dxp-s-form-element-text-line-height) */ /* Forms -> Input Text -> Character Spacing (0–2,5 em) : var(--dxp-s-form-element-text-letter-spacing) */ --ecomm-form-input-text-font-family: var(--dxp-s-form-element-text-font-family, var(--ecomm-font-root)); --ecomm-form-input-text-font-size: var(--dxp-s-form-element-text-font-size, 1rem); --ecomm-form-input-text-font-style: var(--dxp-s-form-element-text-font-style, normal); --ecomm-form-input-text-font-weight: var(--dxp-s-form-element-text-font-weight, 400); --ecomm-form-input-text-text-decoration: var(--dxp-s-form-element-text-text-decoration, none); --ecomm-form-input-text-text-transform: var(--dxp-s-form-element-text-text-transform, none); --ecomm-form-input-text-line-height: var(--dxp-s-form-element-text-line-height, 1.5); --ecomm-form-input-text-letter-spacing: var(--dxp-s-form-element-text-letter-spacing, 0); /* CAPTION TEXT */ /* Forms -> Caption Text -> Font Family : var(--dxp-s-form-element-caption-text-font-family) */ /* Forms -> Caption Text -> Font Size : var(--dxp-s-form-element-caption-text-font-size) */ /* Forms -> Caption Text -> Font Style : var(--dxp-s-form-element-caption-text-font-style) */ /* Forms -> Caption Text -> Font Weight : var(--dxp-s-form-element-caption-text-font-weight) */ /* Forms -> Caption Text -> Text Decoration : var(--dxp-s-form-element-caption-text-text-decoration) */ /* Forms -> Caption Text -> Text Case : var(--dxp-s-form-element-caption-text-text-transform) */ /* Forms -> Caption Text -> Line Height : var(--dxp-s-form-element-caption-text-line-height) */ /* Forms -> Caption Text -> Character Spacing : var(--dxp-s-form-element-caption-text-letter-spacing) */ --ecomm-form-caption-text-font-family: var(--dxp-s-form-element-caption-text-font-family, var(--ecomm-font-root)); --ecomm-form-caption-text-font-size: var(--dxp-s-form-element-caption-text-font-size, 0.875rem); --ecomm-form-caption-text-font-style: var(--dxp-s-form-element-caption-text-font-style, normal); --ecomm-form-caption-text-font-weight: var(--dxp-s-form-element-caption-text-font-weight, 400); --ecomm-form-caption-text-text-decoration: var(--dxp-s-form-element-caption-text-text-decoration, none); --ecomm-form-caption-text-text-transform: var(--dxp-s-form-element-caption-text-text-transform, none); --ecomm-form-caption-text-line-height: var(--dxp-s-form-element-caption-text-line-height, 1.25); --ecomm-form-caption-text-letter-spacing: var(--dxp-s-form-element-caption-text-letter-spacing, 0); } /* TRANSITION */ :root { --ecomm-transition-color: 0.1s; --ecomm-transition-border-color: 0.1s; --ecomm-transition-background-color: 0.1s; --ecomm-transition-box-shadow: 0.1s; --ecomm-transition-outline-color: 0.1s; --ecomm-transition-opacity: 0.1s; }