/* node_modules/.pnpm/@carrefour+design-system-tokens@2.104.0/node_modules/@carrefour/design-system-tokens/dist/css/measurement.css */ :root { --ds-border-radius-l: 1rem; --ds-border-radius-m: 0.5rem; --ds-border-radius-round: 12.5rem; --ds-border-radius-s: 0.25rem; --ds-border-radius-xl: 1.5rem; --ds-border-radius-xs: 0.125rem; --ds-sizing-l: 2rem; --ds-sizing-m: 1.5rem; --ds-sizing-s: 1rem; --ds-sizing-xl: 2.5rem; --ds-sizing-xs: 0.75rem; --ds-sizing-xxl: 3rem; --ds-sizing-xxs: 0.5rem; --ds-sizing-xxxl: 9rem; --ds-spacing-l: 2rem; --ds-spacing-m: 1.5rem; --ds-spacing-s: 1rem; --ds-spacing-xl: 2.5rem; --ds-spacing-xs: 0.5rem; --ds-spacing-xxl: 3rem; --ds-spacing-xxs: 0.25rem; --ds-spacing-xxxs: 0.125rem; } /* node_modules/.pnpm/@carrefour+design-system-tokens@2.104.0/node_modules/@carrefour/design-system-tokens/dist/css/color-interactive.css */ :root { --ds-color-interactive-background-accent-active: #121212; --ds-color-interactive-background-accent-disabled: #121212; --ds-color-interactive-background-accent-hover: #454545; --ds-color-interactive-background-accent-pressed: #696969; --ds-color-interactive-background-main-active: #0970e6; --ds-color-interactive-background-main-disabled: #0970e6; --ds-color-interactive-background-main-hover: #004e9b; --ds-color-interactive-background-main-pressed: #003161; --ds-color-interactive-background-negative-active: #df1116; --ds-color-interactive-background-negative-disabled: #df1116; --ds-color-interactive-background-negative-hover: #8f0004; --ds-color-interactive-background-negative-pressed: #470002; --ds-color-interactive-background-plain-active: #ffffff; --ds-color-interactive-background-plain-disabled: #ffffff; --ds-color-interactive-background-plain-hover: #ffffff; --ds-color-interactive-background-plain-pressed: #ffffff; --ds-color-interactive-background-preffiled: #e6f1fe; --ds-color-interactive-background-subtle-active: #ffffff; --ds-color-interactive-background-subtle-disabled: #ffffff; --ds-color-interactive-background-subtle-hover: #f5faff; --ds-color-interactive-background-subtle-pressed: #ebf4fe; --ds-color-interactive-background-input-readonly: #f7f7f7; --ds-color-interactive-border-accent-active: #121212; --ds-color-interactive-border-accent-disabled: #121212; --ds-color-interactive-border-accent-hover: #454545; --ds-color-interactive-border-accent-pressed: #696969; --ds-color-interactive-border-active: #d9d9d9; --ds-color-interactive-border-disabled: #d9d9d9; --ds-color-interactive-border-focus: #0970e6; --ds-color-interactive-border-hover: #b8b8b8; --ds-color-interactive-border-main-active: #0970e6; --ds-color-interactive-border-main-disabled: #0970e6; --ds-color-interactive-border-main-hover: #004e9b; --ds-color-interactive-border-main-pressed: #003161; --ds-color-interactive-border-negative-active: #df1116; --ds-color-interactive-border-negative-disabled: #df1116; --ds-color-interactive-border-negative-hover: #8f0004; --ds-color-interactive-border-negative-pressed: #470002; --ds-color-interactive-border-plain-active: #ffffff; --ds-color-interactive-border-plain-disabled: #ffffff; --ds-color-interactive-border-plain-hover: #ffffff; --ds-color-interactive-border-plain-pressed: #ffffff; --ds-color-interactive-border-pressed: #878787; --ds-color-interactive-content-accent-active: #121212; --ds-color-interactive-content-accent-disabled: #121212; --ds-color-interactive-content-accent-hover: #454545; --ds-color-interactive-content-accent-pressed: #696969; --ds-color-interactive-content-main-active: #0970e6; --ds-color-interactive-content-main-disabled: #0970e6; --ds-color-interactive-content-main-hover: #004e9b; --ds-color-interactive-content-main-pressed: #003161; --ds-color-interactive-content-negative-active: #df1116; --ds-color-interactive-content-negative-disabled: #df1116; --ds-color-interactive-content-negative-hover: #8f0004; --ds-color-interactive-content-negative-pressed: #470002; --ds-color-interactive-content-plain-active: #ffffff; --ds-color-interactive-content-plain-disabled: #ffffff; --ds-color-interactive-content-plain-hover: #ffffff; --ds-color-interactive-content-plain-pressed: #ffffff; --ds-color-interactive-content-subtle-active: #121212; --ds-color-interactive-content-subtle-disabled: #121212; --ds-color-interactive-content-subtle-hover: #121212; --ds-color-interactive-content-subtle-pressed: #121212; --ds-color-interactive-icon-accent-active: #121212; --ds-color-interactive-icon-accent-disabled: #121212; --ds-color-interactive-icon-accent-hover: #454545; --ds-color-interactive-icon-accent-pressed: #696969; --ds-color-interactive-icon-main-active: #0970e6; --ds-color-interactive-icon-main-disabled: #0970e6; --ds-color-interactive-icon-main-hover: #004e9b; --ds-color-interactive-icon-main-pressed: #003161; --ds-color-interactive-icon-negative-active: #df1116; --ds-color-interactive-icon-negative-disabled: #df1116; --ds-color-interactive-icon-negative-hover: #8f0004; --ds-color-interactive-icon-negative-pressed: #470002; --ds-color-interactive-icon-plain-active: #ffffff; --ds-color-interactive-icon-plain-disabled: #ffffff; --ds-color-interactive-icon-plain-hover: #ffffff; --ds-color-interactive-icon-plain-pressed: #ffffff; --ds-color-interactive-content-specific-loyalty-default: #004e9b; --ds-color-interactive-background-specific-loyalty: #e8f8ff; --ds-color-interactive-content-specific-club-default: #283583; } /* node_modules/.pnpm/@carrefour+design-system-tokens@2.104.0/node_modules/@carrefour/design-system-tokens/dist/css/color-persistent.css */ :root { --ds-color-persistent-background-functional-main-information: #173eb4; --ds-color-persistent-background-functional-main-negative: #df1116; --ds-color-persistent-background-functional-main-success: #2c815e; --ds-color-persistent-background-functional-main-warning: #cc4010; --ds-color-persistent-background-functional-reversed-information: #e8f8ff; --ds-color-persistent-background-functional-reversed-negative: #ffefef; --ds-color-persistent-background-functional-reversed-success: #f0faf6; --ds-color-persistent-background-functional-reversed-warning: #fff7f0; --ds-color-persistent-background-main-primary: #ffffff; --ds-color-persistent-background-main-secondary: #f7f7f7; --ds-color-persistent-background-main-tertiary: #f5faff; --ds-color-persistent-background-reversed-primary: #121212; --ds-color-persistent-background-reversed-secondary: #454545; --ds-color-persistent-border-functional-main-information: #173eb4; --ds-color-persistent-border-functional-main-negative: #df1116; --ds-color-persistent-border-functional-main-success: #2c815e; --ds-color-persistent-border-functional-main-warning: #cc4010; --ds-color-persistent-border-functional-reversed-information: #e8f8ff; --ds-color-persistent-border-functional-reversed-negative: #ffefef; --ds-color-persistent-border-functional-reversed-success: #f0faf6; --ds-color-persistent-border-functional-reversed-warning: #fff7f0; --ds-color-persistent-border-main-primary: #ebebeb; --ds-color-persistent-border-main-secondary: #d9d9d9; --ds-color-persistent-content-functional-main-information: #173eb4; --ds-color-persistent-content-functional-main-negative: #df1116; --ds-color-persistent-content-functional-main-success: #2c815e; --ds-color-persistent-content-functional-main-warning: #cc4010; --ds-color-persistent-content-functional-reversed-information: #e8f8ff; --ds-color-persistent-content-functional-reversed-negative: #ffefef; --ds-color-persistent-content-functional-reversed-success: #f0faf6; --ds-color-persistent-content-functional-reversed-warning: #fff7f0; --ds-color-persistent-content-main-primary: #121212; --ds-color-persistent-content-main-secondary: #454545; --ds-color-persistent-content-main-tertiary: #696969; --ds-color-persistent-content-reversed-primary: #ffffff; --ds-color-persistent-content-reversed-secondary: #f2f2f2; --ds-color-persistent-content-reversed-tertiary: #ebebeb; --ds-color-persistent-icon-functional-main-information: #173eb4; --ds-color-persistent-icon-functional-main-negative: #df1116; --ds-color-persistent-icon-functional-main-success: #2c815e; --ds-color-persistent-icon-functional-main-warning: #cc4010; --ds-color-persistent-icon-functional-reversed-information: #e8f8ff; --ds-color-persistent-icon-functional-reversed-negative: #ffefef; --ds-color-persistent-icon-functional-reversed-success: #f0faf6; --ds-color-persistent-icon-functional-reversed-warning: #fff7f0; --ds-color-persistent-icon-main-primary: #121212; --ds-color-persistent-icon-main-secondary: #454545; --ds-color-persistent-icon-main-tertiary: #696969; --ds-color-persistent-icon-reversed-primary: #ffffff; --ds-color-persistent-icon-reversed-secondary: #f2f2f2; --ds-color-persistent-icon-reversed-tertiary: #ebebeb; --ds-color-persistent-content-specific-loyalty-default: #004e9b; --ds-color-persistent-background-specific-loyalty: #e8f8ff; --ds-color-persistent-content-specific-club-default: #283583; } /* node_modules/.pnpm/@carrefour+design-system-tokens@2.104.0/node_modules/@carrefour/design-system-tokens/dist/css/color-components.css */ :root { --ds-color-interactive-background-button-filled-accent-active: #121212; --ds-color-interactive-background-button-filled-accent-disabled: #121212; --ds-color-interactive-background-button-filled-accent-hover: #454545; --ds-color-interactive-background-button-filled-accent-pressed: #696969; --ds-color-interactive-background-button-filled-accent-reversed-active: #ffffff; --ds-color-interactive-background-button-filled-accent-reversed-disabled: #ffffff; --ds-color-interactive-background-button-filled-accent-reversed-hover: #ffffff; --ds-color-interactive-background-button-filled-accent-reversed-pressed: #ffffff; --ds-color-interactive-background-button-filled-destructive-active: #df1116; --ds-color-interactive-background-button-filled-destructive-disabled: #df1116; --ds-color-interactive-background-button-filled-destructive-hover: #8f0004; --ds-color-interactive-background-button-filled-destructive-pressed: #470002; --ds-color-interactive-background-button-filled-destructive-reversed-active: #ffffff; --ds-color-interactive-background-button-filled-destructive-reversed-disabled: #ffffff; --ds-color-interactive-background-button-filled-destructive-reversed-hover: #ffffff; --ds-color-interactive-background-button-filled-destructive-reversed-pressed: #ffffff; --ds-color-interactive-background-button-filled-main-active: #0970e6; --ds-color-interactive-background-button-filled-main-disabled: #0970e6; --ds-color-interactive-background-button-filled-main-hover: #004e9b; --ds-color-interactive-background-button-filled-main-pressed: #003161; --ds-color-interactive-background-button-filled-main-reversed-active: #ffffff; --ds-color-interactive-background-button-filled-main-reversed-disabled: #ffffff; --ds-color-interactive-background-button-filled-main-reversed-hover: #ffffff; --ds-color-interactive-background-button-filled-main-reversed-pressed: #ffffff; --ds-color-interactive-background-button-outlined-accent-active: #ffffff; --ds-color-interactive-background-button-outlined-accent-disabled: #ffffff; --ds-color-interactive-background-button-outlined-accent-hover: #ffffff; --ds-color-interactive-background-button-outlined-accent-pressed: #ffffff; --ds-color-interactive-background-button-outlined-accent-reversed-active: #ffffff00; --ds-color-interactive-background-button-outlined-accent-reversed-disabled: #ffffff00; --ds-color-interactive-background-button-outlined-accent-reversed-hover: #ffffff00; --ds-color-interactive-background-button-outlined-accent-reversed-pressed: #ffffff00; --ds-color-interactive-background-button-outlined-destructive-active: #ffffff; --ds-color-interactive-background-button-outlined-destructive-disabled: #ffffff; --ds-color-interactive-background-button-outlined-destructive-hover: #ffffff; --ds-color-interactive-background-button-outlined-destructive-pressed: #ffffff; --ds-color-interactive-background-button-outlined-destructive-reversed-active: #ffffff00; --ds-color-interactive-background-button-outlined-destructive-reversed-disabled: #ffffff00; --ds-color-interactive-background-button-outlined-destructive-reversed-hover: #ffffff00; --ds-color-interactive-background-button-outlined-destructive-reversed-pressed: #ffffff00; --ds-color-interactive-background-button-outlined-main-active: #ffffff; --ds-color-interactive-background-button-outlined-main-disabled: #ffffff; --ds-color-interactive-background-button-outlined-main-hover: #ffffff; --ds-color-interactive-background-button-outlined-main-pressed: #ffffff; --ds-color-interactive-background-button-outlined-main-reversed-active: #ffffff00; --ds-color-interactive-background-button-outlined-main-reversed-disabled: #ffffff00; --ds-color-interactive-background-button-outlined-main-reversed-hover: #ffffff00; --ds-color-interactive-background-button-outlined-main-reversed-pressed: #ffffff00; --ds-color-interactive-background-button-transparent-accent-active: #ffffff00; --ds-color-interactive-background-button-transparent-accent-disabled: #ffffff00; --ds-color-interactive-background-button-transparent-accent-hover: #ffffff00; --ds-color-interactive-background-button-transparent-accent-pressed: #ffffff00; --ds-color-interactive-background-button-transparent-accent-reversed-active: #ffffff00; --ds-color-interactive-background-button-transparent-accent-reversed-disabled: #ffffff00; --ds-color-interactive-background-button-transparent-accent-reversed-hover: #ffffff00; --ds-color-interactive-background-button-transparent-accent-reversed-pressed: #ffffff00; --ds-color-interactive-background-button-transparent-destructive-active: #ffffff00; --ds-color-interactive-background-button-transparent-destructive-disabled: #ffffff00; --ds-color-interactive-background-button-transparent-destructive-hover: #ffffff00; --ds-color-interactive-background-button-transparent-destructive-pressed: #ffffff00; --ds-color-interactive-background-button-transparent-destructive-reversed-active: #ffffff00; --ds-color-interactive-background-button-transparent-destructive-reversed-disabled: #ffffff00; --ds-color-interactive-background-button-transparent-destructive-reversed-hover: #ffffff00; --ds-color-interactive-background-button-transparent-destructive-reversed-pressed: #ffffff00; --ds-color-interactive-background-button-transparent-main-active: #ffffff00; --ds-color-interactive-background-button-transparent-main-disabled: #ffffff00; --ds-color-interactive-background-button-transparent-main-hover: #ffffff00; --ds-color-interactive-background-button-transparent-main-pressed: #ffffff00; --ds-color-interactive-background-button-transparent-main-reversed-active: #ffffff00; --ds-color-interactive-background-button-transparent-main-reversed-disabled: #ffffff00; --ds-color-interactive-background-button-transparent-main-reversed-hover: #ffffff00; --ds-color-interactive-background-button-transparent-main-reversed-pressed: #ffffff00; --ds-color-interactive-background-chip-active: #ffffff; --ds-color-interactive-background-chip-disabled: #ffffff; --ds-color-interactive-background-chip-hover: #e6f1fe; --ds-color-interactive-background-chip-pressed: #bddbff; --ds-color-interactive-background-chip-selected-active: #0970e6; --ds-color-interactive-background-chip-selected-hover: #004e9b; --ds-color-interactive-background-chip-selected-pressed: #003161; --ds-color-interactive-background-icon-button-filled-accent-active: #121212; --ds-color-interactive-background-icon-button-filled-accent-disabled: #121212; --ds-color-interactive-background-icon-button-filled-accent-hover: #454545; --ds-color-interactive-background-icon-button-filled-accent-pressed: #696969; --ds-color-interactive-background-icon-button-filled-accent-reversed-active: #ffffff; --ds-color-interactive-background-icon-button-filled-accent-reversed-disabled: #ffffff; --ds-color-interactive-background-icon-button-filled-accent-reversed-hover: #ffffff; --ds-color-interactive-background-icon-button-filled-accent-reversed-pressed: #ffffff; --ds-color-interactive-background-icon-button-filled-destructive-active: #df1116; --ds-color-interactive-background-icon-button-filled-destructive-disabled: #df1116; --ds-color-interactive-background-icon-button-filled-destructive-hover: #8f0004; --ds-color-interactive-background-icon-button-filled-destructive-pressed: #470002; --ds-color-interactive-background-icon-button-filled-destructive-reversed-active: #ffffff; --ds-color-interactive-background-icon-button-filled-destructive-reversed-disabled: #ffffff; --ds-color-interactive-background-icon-button-filled-destructive-reversed-hover: #ffffff; --ds-color-interactive-background-icon-button-filled-destructive-reversed-pressed: #ffffff; --ds-color-interactive-background-icon-button-filled-main-active: #0970e6; --ds-color-interactive-background-icon-button-filled-main-disabled: #0970e6; --ds-color-interactive-background-icon-button-filled-main-hover: #004e9b; --ds-color-interactive-background-icon-button-filled-main-pressed: #003161; --ds-color-interactive-background-icon-button-filled-main-reversed-active: #ffffff; --ds-color-interactive-background-icon-button-filled-main-reversed-disabled: #ffffff; --ds-color-interactive-background-icon-button-filled-main-reversed-hover: #ffffff; --ds-color-interactive-background-icon-button-filled-main-reversed-pressed: #ffffff; --ds-color-interactive-background-icon-button-outlined-accent-active: #ffffff; --ds-color-interactive-background-icon-button-outlined-accent-disabled: #ffffff; --ds-color-interactive-background-icon-button-outlined-accent-hover: #ffffff; --ds-color-interactive-background-icon-button-outlined-accent-pressed: #ffffff; --ds-color-interactive-background-icon-button-outlined-accent-reversed-active: #ffffff00; --ds-color-interactive-background-icon-button-outlined-accent-reversed-disabled: #ffffff00; --ds-color-interactive-background-icon-button-outlined-accent-reversed-hover: #ffffff00; --ds-color-interactive-background-icon-button-outlined-accent-reversed-pressed: #ffffff00; --ds-color-interactive-background-icon-button-outlined-destructive-active: #ffffff; --ds-color-interactive-background-icon-button-outlined-destructive-disabled: #ffffff; --ds-color-interactive-background-icon-button-outlined-destructive-hover: #ffffff; --ds-color-interactive-background-icon-button-outlined-destructive-pressed: #ffffff; --ds-color-interactive-background-icon-button-outlined-destructive-reversed-active: #ffffff00; --ds-color-interactive-background-icon-button-outlined-destructive-reversed-disabled: #ffffff00; --ds-color-interactive-background-icon-button-outlined-destructive-reversed-hover: #ffffff00; --ds-color-interactive-background-icon-button-outlined-destructive-reversed-pressed: #ffffff00; --ds-color-interactive-background-icon-button-outlined-main-active: #ffffff; --ds-color-interactive-background-icon-button-outlined-main-disabled: #ffffff; --ds-color-interactive-background-icon-button-outlined-main-hover: #ffffff; --ds-color-interactive-background-icon-button-outlined-main-pressed: #ffffff; --ds-color-interactive-background-icon-button-outlined-main-reversed-active: #ffffff00; --ds-color-interactive-background-icon-button-outlined-main-reversed-disabled: #ffffff00; --ds-color-interactive-background-icon-button-outlined-main-reversed-hover: #ffffff00; --ds-color-interactive-background-icon-button-outlined-main-reversed-pressed: #ffffff00; --ds-color-interactive-background-input-active: #ffffff; --ds-color-interactive-background-input-addon-active: #f7f7f7; --ds-color-interactive-background-input-addon-default: #f7f7f7; --ds-color-interactive-background-input-addon-error: #ffefef; --ds-color-interactive-background-input-addon-hover: #d9d9d9; --ds-color-interactive-background-input-addon-pressed: #b8b8b8; --ds-color-interactive-background-input-autosuggest-item-active: #ffffff; --ds-color-interactive-background-input-autosuggest-item-hover: #f7f7f7; --ds-color-interactive-background-input-autosuggest-item-pressed: #ebebeb; --ds-color-interactive-background-input-calendar-active: #ffffff; --ds-color-interactive-background-input-calendar-disabled: #f2f2f2; --ds-color-interactive-background-input-calendar-hover: #f7f7f7; --ds-color-interactive-background-input-calendar-pressed: #f2f2f2; --ds-color-interactive-background-input-calendar-range-active: #f5faff; --ds-color-interactive-background-input-calendar-range-hover: #f5faff; --ds-color-interactive-background-input-calendar-range-pressed: #f5faff; --ds-color-interactive-background-input-calendar-selected-active: #0970e6; --ds-color-interactive-background-input-calendar-selected-hover: #004e9b; --ds-color-interactive-background-input-calendar-selected-pressed: #003161; --ds-color-interactive-background-input-checkbox-selected-active: #0970e6; --ds-color-interactive-background-input-checkbox-selected-disabled: #0970e6; --ds-color-interactive-background-input-checkbox-selected-hover: #004e9b; --ds-color-interactive-background-input-checkbox-selected-pressed: #003161; --ds-color-interactive-background-input-date-picker-shortcut-active: #ffffff; --ds-color-interactive-background-input-date-picker-shortcut-disabled: #ffffff; --ds-color-interactive-background-input-date-picker-shortcut-hover: #f2f2f2; --ds-color-interactive-background-input-date-picker-shortcut-pressed: #ebebeb; --ds-color-interactive-background-input-date-picker-shortcut-selected-active: #f2f2f2; --ds-color-interactive-background-input-date-picker-shortcut-selected-hover: #ebebeb; --ds-color-interactive-background-input-date-picker-shortcut-selected-pressed: #d9d9d9; --ds-color-interactive-background-input-disabled: #ffffff; --ds-color-interactive-background-input-error-active: #ffffff; --ds-color-interactive-background-input-error-hover: #ffffff; --ds-color-interactive-background-input-error-pressed: #ffffff; --ds-color-interactive-background-input-hover: #ffffff; --ds-color-interactive-background-input-prefilled: #e6f1fe; --ds-color-interactive-background-input-pressed: #ffffff; --ds-color-interactive-background-input-radio-selected-active: #0970e6; --ds-color-interactive-background-input-radio-selected-disabled: #0970e6; --ds-color-interactive-background-input-radio-selected-hover: #004e9b; --ds-color-interactive-background-input-radio-selected-pressed: #003161; --ds-color-interactive-background-input-range-handle-active: #ffffff; --ds-color-interactive-background-input-range-handle-hover: #ffffff; --ds-color-interactive-background-input-range-handle-pressed: #ffffff; --ds-color-interactive-background-input-range-track-active: #ebebeb; --ds-color-interactive-background-input-range-track-selected: #0970e6; --ds-color-interactive-background-input-select-button-accent-active: #ffffff; --ds-color-interactive-background-input-select-button-accent-disabled: #ffffff; --ds-color-interactive-background-input-select-button-accent-hover: #ffffff; --ds-color-interactive-background-input-select-button-accent-pressed: #ffffff; --ds-color-interactive-background-input-select-button-main-active: #ffffff; --ds-color-interactive-background-input-select-button-main-disabled: #ffffff; --ds-color-interactive-background-input-select-button-main-hover: #ffffff; --ds-color-interactive-background-input-select-button-main-pressed: #ffffff; --ds-color-interactive-background-input-select-button-selected-accent-active: #121212; --ds-color-interactive-background-input-select-button-selected-accent-hover: #454545; --ds-color-interactive-background-input-select-button-selected-accent-pressed: #696969; --ds-color-interactive-background-input-select-button-selected-main-active: #0970e6; --ds-color-interactive-background-input-select-button-selected-main-hover: #004e9b; --ds-color-interactive-background-input-select-button-selected-main-pressed: #003161; --ds-color-interactive-background-input-toggle-active: #d9d9d9; --ds-color-interactive-background-input-toggle-disabled: #d9d9d9; --ds-color-interactive-background-input-toggle-error-active: #df1116; --ds-color-interactive-background-input-toggle-error-hover: #df1116; --ds-color-interactive-background-input-toggle-error-pressed: #df1116; --ds-color-interactive-background-input-toggle-handle: #ffffff; --ds-color-interactive-background-input-toggle-hover: #b8b8b8; --ds-color-interactive-background-input-toggle-pressed: #878787; --ds-color-interactive-background-input-toggle-selected-active: #0970e6; --ds-color-interactive-background-input-toggle-selected-disabled: #0970e6; --ds-color-interactive-background-input-toggle-selected-hover: #004e9b; --ds-color-interactive-background-input-toggle-selected-pressed: #003161; --ds-color-interactive-background-navigation-item-active: #ffffff; --ds-color-interactive-background-navigation-item-disabled: #ffffff; --ds-color-interactive-background-navigation-item-hover: #e6f1fe; --ds-color-interactive-background-navigation-item-pressed: #bddbff; --ds-color-interactive-background-navigation-item-selected-active: #e6f1fe; --ds-color-interactive-background-navigation-item-selected-hover: #e6f1fe; --ds-color-interactive-background-navigation-item-selected-pressed: #bddbff; --ds-color-interactive-background-pagination-active: #ffffff; --ds-color-interactive-background-pagination-disabled: #ffffff; --ds-color-interactive-background-pagination-hover: #e6f1fe; --ds-color-interactive-background-pagination-pressed: #bddbff; --ds-color-interactive-background-pagination-selected-active: #0970e6; --ds-color-interactive-background-pagination-selected-hover: #004e9b; --ds-color-interactive-background-pagination-selected-pressed: #003161; --ds-color-interactive-background-quantity-button-active: #0970e6; --ds-color-interactive-background-quantity-button-disabled: #0970e6; --ds-color-interactive-background-quantity-button-hover: #004e9b; --ds-color-interactive-background-quantity-button-modifier-active: #0970e6; --ds-color-interactive-background-quantity-button-modifier-focus: #004e9b; --ds-color-interactive-background-quantity-button-modifier-hover: #004e9b; --ds-color-interactive-background-quantity-button-modifier-pressed: #003161; --ds-color-interactive-background-quantity-button-pressed: #003161; --ds-color-interactive-background-rating-active: #ffbf29; --ds-color-interactive-background-rating-hover: #f5ac00; --ds-color-interactive-background-rating-pressed: #bd8400; --ds-color-interactive-background-scrollbar-active: #d9d9d9; --ds-color-interactive-background-scrollbar-hover: #878787; --ds-color-interactive-background-segmented-control-item-active: #f2f2f2; --ds-color-interactive-background-segmented-control-item-disabled: #f2f2f2; --ds-color-interactive-background-segmented-control-item-hover: #ebebeb; --ds-color-interactive-background-segmented-control-item-pressed: #d9d9d9; --ds-color-interactive-background-segmented-control-item-selected-active: #0970e6; --ds-color-interactive-background-segmented-control-item-selected-disabled: #0970e6; --ds-color-interactive-background-segmented-control-item-selected-hover: #004e9b; --ds-color-interactive-background-segmented-control-item-selected-pressed: #003161; --ds-color-interactive-background-segmented-control-main: #f2f2f2; --ds-color-interactive-background-select-button-active: #ffffff; --ds-color-interactive-background-select-button-hover: #ffffff; --ds-color-interactive-background-select-button-pressed: #ffffff; --ds-color-interactive-background-select-button-selected-active: #121212; --ds-color-interactive-background-select-button-selected-hover: #454545; --ds-color-interactive-background-select-button-selected-pressed: #696969; --ds-color-interactive-background-stepper-item-default-active: #121212; --ds-color-interactive-background-stepper-item-default-hover: #454545; --ds-color-interactive-background-stepper-item-default-pressed: #696969; --ds-color-interactive-background-stepper-item-default-reversed-active: #ffffff; --ds-color-interactive-background-stepper-item-default-reversed-disabled: #ffffff; --ds-color-interactive-background-stepper-item-default-reversed-hover: #ffffff; --ds-color-interactive-background-stepper-item-default-reversed-pressed: #ffffff; --ds-color-interactive-background-stepper-item-negative-active: #df1116; --ds-color-interactive-background-stepper-item-negative-hover: #8f0004; --ds-color-interactive-background-stepper-item-negative-pressed: #470002; --ds-color-interactive-background-stepper-item-negative-reversed-active: #ffffff; --ds-color-interactive-background-stepper-item-negative-reversed-disabled: #ffffff; --ds-color-interactive-background-stepper-item-negative-reversed-hover: #ffffff; --ds-color-interactive-background-stepper-item-negative-reversed-pressed: #ffffff; --ds-color-interactive-background-stepper-item-positive-active: #2c815e; --ds-color-interactive-background-stepper-item-positive-hover: #155138; --ds-color-interactive-background-stepper-item-positive-pressed: #051e14; --ds-color-interactive-background-stepper-item-positive-reversed-active: #ffffff; --ds-color-interactive-background-stepper-item-positive-reversed-disabled: #ffffff; --ds-color-interactive-background-stepper-item-positive-reversed-hover: #ffffff; --ds-color-interactive-background-stepper-item-positive-reversed-pressed: #ffffff; --ds-color-interactive-background-visual-button-active: #ffffff; --ds-color-interactive-background-visual-button-disabled: #ffffff; --ds-color-interactive-background-visual-button-hover: #ffffff; --ds-color-interactive-background-visual-button-pressed: #ffffff; --ds-color-interactive-border-button-outlined-accent-active: #121212; --ds-color-interactive-border-button-outlined-accent-disabled: #121212; --ds-color-interactive-border-button-outlined-accent-hover: #454545; --ds-color-interactive-border-button-outlined-accent-pressed: #696969; --ds-color-interactive-border-button-outlined-accent-reversed-active: #ffffff; --ds-color-interactive-border-button-outlined-accent-reversed-disabled: #ffffff; --ds-color-interactive-border-button-outlined-accent-reversed-hover: #ebebeb; --ds-color-interactive-border-button-outlined-accent-reversed-pressed: #d9d9d9; --ds-color-interactive-border-button-outlined-destructive-active: #df1116; --ds-color-interactive-border-button-outlined-destructive-disabled: #df1116; --ds-color-interactive-border-button-outlined-destructive-hover: #8f0004; --ds-color-interactive-border-button-outlined-destructive-pressed: #470002; --ds-color-interactive-border-button-outlined-destructive-reversed-active: #ffffff; --ds-color-interactive-border-button-outlined-destructive-reversed-disabled: #ffffff; --ds-color-interactive-border-button-outlined-destructive-reversed-hover: #ebebeb; --ds-color-interactive-border-button-outlined-destructive-reversed-pressed: #d9d9d9; --ds-color-interactive-border-chip-active: #ebebeb; --ds-color-interactive-border-chip-disabled: #ebebeb; --ds-color-interactive-border-chip-hover: #bddbff; --ds-color-interactive-border-chip-pressed: #62a8f9; --ds-color-interactive-border-icon-button-outlined-accent-active: #121212; --ds-color-interactive-border-icon-button-outlined-accent-disabled: #121212; --ds-color-interactive-border-icon-button-outlined-accent-hover: #454545; --ds-color-interactive-border-icon-button-outlined-accent-pressed: #696969; --ds-color-interactive-border-icon-button-outlined-accent-reversed-active: #ffffff; --ds-color-interactive-border-icon-button-outlined-accent-reversed-disabled: #ffffff; --ds-color-interactive-border-icon-button-outlined-accent-reversed-hover: #ebebeb; --ds-color-interactive-border-icon-button-outlined-accent-reversed-pressed: #d9d9d9; --ds-color-interactive-border-icon-button-outlined-destructive-active: #df1116; --ds-color-interactive-border-icon-button-outlined-destructive-disabled: #df1116; --ds-color-interactive-border-icon-button-outlined-destructive-hover: #8f0004; --ds-color-interactive-border-icon-button-outlined-destructive-pressed: #470002; --ds-color-interactive-border-icon-button-outlined-destructive-reversed-active: #ffffff; --ds-color-interactive-border-icon-button-outlined-destructive-reversed-disabled: #ffffff; --ds-color-interactive-border-icon-button-outlined-destructive-reversed-hover: #ebebeb; --ds-color-interactive-border-icon-button-outlined-destructive-reversed-pressed: #d9d9d9; --ds-color-interactive-border-icon-button-outlined-main-active: #0970e6; --ds-color-interactive-border-icon-button-outlined-main-disabled: #0970e6; --ds-color-interactive-border-icon-button-outlined-main-hover: #004e9b; --ds-color-interactive-border-icon-button-outlined-main-pressed: #003161; --ds-color-interactive-border-icon-button-outlined-main-reversed-active: #ffffff; --ds-color-interactive-border-icon-button-outlined-main-reversed-disabled: #ffffff; --ds-color-interactive-border-icon-button-outlined-main-reversed-hover: #ebebeb; --ds-color-interactive-border-icon-button-outlined-main-reversed-pressed: #d9d9d9; --ds-color-interactive-border-input-active: #d9d9d9; --ds-color-interactive-border-input-button-select-accent-active: #d9d9d9; --ds-color-interactive-border-input-button-select-accent-disabled: #d9d9d9; --ds-color-interactive-border-input-button-select-accent-hover: #a1a1a1; --ds-color-interactive-border-input-button-select-accent-pressed: #878787; --ds-color-interactive-border-input-button-select-main-active: #0970e6; --ds-color-interactive-border-input-button-select-main-disabled: #bddbff; --ds-color-interactive-border-input-button-select-main-hover: #004e9b; --ds-color-interactive-border-input-button-select-main-pressed: #003161; --ds-color-interactive-border-input-button-select-selected-accent-active: #121212; --ds-color-interactive-border-input-button-select-selected-accent-hover: #454545; --ds-color-interactive-border-input-button-select-selected-accent-pressed: #696969; --ds-color-interactive-border-input-button-select-selected-main-active: #0970e6; --ds-color-interactive-border-input-button-select-selected-main-hover: #004e9b; --ds-color-interactive-border-input-button-select-selected-main-pressed: #003161; --ds-color-interactive-border-input-button-select-slash-accent: #121212; --ds-color-interactive-border-input-button-select-slash-main: #0970e6; --ds-color-interactive-border-input-checkbox-selected-active: #0970e6; --ds-color-interactive-border-input-checkbox-selected-disabled: #0970e6; --ds-color-interactive-border-input-checkbox-selected-hover: #004e9b; --ds-color-interactive-border-input-checkbox-selected-pressed: #003161; --ds-color-interactive-border-input-disabled: #d9d9d9; --ds-color-interactive-border-input-ds-color-swatch-selected: #121212; --ds-color-interactive-border-input-ds-color-swatch-slash: #121212; --ds-color-interactive-border-input-error-active: #df1116; --ds-color-interactive-border-input-error-hover: #df1116; --ds-color-interactive-border-input-error-pressed: #df1116; --ds-color-interactive-border-input-focus: #0970e6; --ds-color-interactive-border-input-hover: #b8b8b8; --ds-color-interactive-border-input-pressed: #878787; --ds-color-interactive-border-input-radio-selected-active: #0970e6; --ds-color-interactive-border-input-radio-selected-disabled: #0970e6; --ds-color-interactive-border-input-radio-selected-hover: #004e9b; --ds-color-interactive-border-input-radio-selected-pressed: #003161; --ds-color-interactive-border-input-range-handle-active: #0970e6; --ds-color-interactive-border-input-range-handle-hover: #004e9b; --ds-color-interactive-border-input-range-handle-pressed: #003161; --ds-color-interactive-border-navigation-item-hover: #004e9b; --ds-color-interactive-border-navigation-item-pressed: #003161; --ds-color-interactive-border-navigation-item-selected-active: #0970e6; --ds-color-interactive-border-navigation-item-selected-hover: #004e9b; --ds-color-interactive-border-navigation-item-selected-pressed: #003161; --ds-color-interactive-border-select-button-active: #d9d9d9; --ds-color-interactive-border-select-button-hover: #b8b8b8; --ds-color-interactive-border-select-button-pressed: #878787; --ds-color-interactive-border-stepper-item-default-active: #121212; --ds-color-interactive-border-stepper-item-default-disabled: #121212; --ds-color-interactive-border-stepper-item-default-hover: #454545; --ds-color-interactive-border-stepper-item-default-pressed: #696969; --ds-color-interactive-border-stepper-item-negative-active: #df1116; --ds-color-interactive-border-stepper-item-negative-disabled: #df1116; --ds-color-interactive-border-stepper-item-negative-hover: #8f0004; --ds-color-interactive-border-stepper-item-negative-pressed: #470002; --ds-color-interactive-border-stepper-item-positive-active: #2c815e; --ds-color-interactive-border-stepper-item-positive-disabled: #2c815e; --ds-color-interactive-border-stepper-item-positive-hover: #155138; --ds-color-interactive-border-stepper-item-positive-pressed: #051e14; --ds-color-interactive-border-tab-active: #d9d9d9; --ds-color-interactive-border-tab-disabled: #d9d9d9; --ds-color-interactive-border-tab-hover: #b8b8b8; --ds-color-interactive-border-tab-pressed: #878787; --ds-color-interactive-border-tab-selected-active: #0970e6; --ds-color-interactive-border-tab-selected-disabled: #0970e6; --ds-color-interactive-border-tab-selected-hover: #004e9b; --ds-color-interactive-border-tab-selected-pressed: #003161; --ds-color-interactive-icon-button-filled-accent-active: #ffffff; --ds-color-interactive-icon-button-filled-accent-disabled: #ffffff; --ds-color-interactive-icon-button-filled-accent-hover: #ffffff; --ds-color-interactive-icon-button-filled-accent-pressed: #ffffff; --ds-color-interactive-icon-button-filled-accent-reversed-active: #121212; --ds-color-interactive-icon-button-filled-accent-reversed-disabled: #121212; --ds-color-interactive-icon-button-filled-accent-reversed-hover: #454545; --ds-color-interactive-icon-button-filled-accent-reversed-pressed: #696969; --ds-color-interactive-icon-button-filled-destructive-active: #ffffff; --ds-color-interactive-icon-button-filled-destructive-disabled: #ffffff; --ds-color-interactive-icon-button-filled-destructive-hover: #ffffff; --ds-color-interactive-icon-button-filled-destructive-pressed: #ffffff; --ds-color-interactive-icon-button-filled-destructive-reversed-active: #df1116; --ds-color-interactive-icon-button-filled-destructive-reversed-disabled: #df1116; --ds-color-interactive-icon-button-filled-destructive-reversed-hover: #8f0004; --ds-color-interactive-icon-button-filled-destructive-reversed-pressed: #470002; --ds-color-interactive-icon-button-filled-main-active: #ffffff; --ds-color-interactive-icon-button-filled-main-disabled: #ffffff; --ds-color-interactive-icon-button-filled-main-hover: #ffffff; --ds-color-interactive-icon-button-filled-main-pressed: #ffffff; --ds-color-interactive-icon-button-filled-main-reversed-active: #0970e6; --ds-color-interactive-icon-button-filled-main-reversed-disabled: #0970e6; --ds-color-interactive-icon-button-filled-main-reversed-hover: #004e9b; --ds-color-interactive-icon-button-filled-main-reversed-pressed: #003161; --ds-color-interactive-icon-button-main-active: #0970e6; --ds-color-interactive-icon-button-main-disabled: #0970e6; --ds-color-interactive-icon-button-main-hover: #004e9b; --ds-color-interactive-icon-button-main-pressed: #003161; --ds-color-interactive-icon-button-main-reversed-active: #ffffff; --ds-color-interactive-icon-button-main-reversed-disabled: #ffffff; --ds-color-interactive-icon-button-main-reversed-hover: #ebebeb; --ds-color-interactive-icon-button-main-reversed-pressed: #d9d9d9; --ds-color-interactive-icon-button-outlined-accent-active: #121212; --ds-color-interactive-icon-button-outlined-accent-disabled: #121212; --ds-color-interactive-icon-button-outlined-accent-hover: #454545; --ds-color-interactive-icon-button-outlined-accent-pressed: #696969; --ds-color-interactive-icon-button-outlined-accent-reversed-active: #ffffff; --ds-color-interactive-icon-button-outlined-accent-reversed-disabled: #ffffff; --ds-color-interactive-icon-button-outlined-accent-reversed-hover: #ebebeb; --ds-color-interactive-icon-button-outlined-accent-reversed-pressed: #d9d9d9; --ds-color-interactive-icon-button-outlined-destructive-active: #df1116; --ds-color-interactive-icon-button-outlined-destructive-disabled: #df1116; --ds-color-interactive-icon-button-outlined-destructive-hover: #8f0004; --ds-color-interactive-icon-button-outlined-destructive-pressed: #470002; --ds-color-interactive-icon-button-outlined-destructive-reversed-active: #ffffff; --ds-color-interactive-icon-button-outlined-destructive-reversed-disabled: #ffffff; --ds-color-interactive-icon-button-outlined-destructive-reversed-hover: #ebebeb; --ds-color-interactive-icon-button-outlined-destructive-reversed-pressed: #d9d9d9; --ds-color-interactive-icon-button-outlined-main-active: #0970e6; --ds-color-interactive-icon-button-outlined-main-disabled: #0970e6; --ds-color-interactive-icon-button-outlined-main-hover: #004e9b; --ds-color-interactive-icon-button-outlined-main-pressed: #003161; --ds-color-interactive-icon-button-outlined-main-reversed-active: #ffffff; --ds-color-interactive-icon-button-outlined-main-reversed-disabled: #ffffff; --ds-color-interactive-icon-button-outlined-main-reversed-hover: #ebebeb; --ds-color-interactive-icon-button-outlined-main-reversed-pressed: #d9d9d9; --ds-color-interactive-icon-button-transparent-accent-active: #121212; --ds-color-interactive-icon-button-transparent-accent-disabled: #121212; --ds-color-interactive-icon-button-transparent-accent-hover: #454545; --ds-color-interactive-icon-button-transparent-accent-pressed: #696969; --ds-color-interactive-icon-button-transparent-accent-reversed-active: #ffffff; --ds-color-interactive-icon-button-transparent-accent-reversed-disabled: #ffffff; --ds-color-interactive-icon-button-transparent-accent-reversed-hover: #ebebeb; --ds-color-interactive-icon-button-transparent-accent-reversed-pressed: #d9d9d9; --ds-color-interactive-icon-button-transparent-destructive-active: #df1116; --ds-color-interactive-icon-button-transparent-destructive-disabled: #df1116; --ds-color-interactive-icon-button-transparent-destructive-hover: #8f0004; --ds-color-interactive-icon-button-transparent-destructive-pressed: #470002; --ds-color-interactive-icon-button-transparent-destructive-reversed-active: #ffffff; --ds-color-interactive-icon-button-transparent-destructive-reversed-disabled: #ffffff; --ds-color-interactive-icon-button-transparent-destructive-reversed-hover: #ebebeb; --ds-color-interactive-icon-button-transparent-destructive-reversed-pressed: #d9d9d9; --ds-color-interactive-icon-button-transparent-main-active: #0970e6; --ds-color-interactive-icon-button-transparent-main-disabled: #0970e6; --ds-color-interactive-icon-button-transparent-main-hover: #004e9b; --ds-color-interactive-icon-button-transparent-main-pressed: #003161; --ds-color-interactive-icon-button-transparent-main-reversed-active: #ffffff; --ds-color-interactive-icon-button-transparent-main-reversed-disabled: #ffffff; --ds-color-interactive-icon-button-transparent-main-reversed-hover: #ebebeb; --ds-color-interactive-icon-button-transparent-main-reversed-pressed: #d9d9d9; --ds-color-interactive-icon-chip-active: #121212; --ds-color-interactive-icon-chip-disabled: #121212; --ds-color-interactive-icon-chip-hover: #121212; --ds-color-interactive-icon-chip-modifier-active: #0970e6; --ds-color-interactive-icon-chip-modifier-hover: #004e9b; --ds-color-interactive-icon-chip-modifier-pressed: #003161; --ds-color-interactive-icon-chip-pressed: #121212; --ds-color-interactive-icon-chip-selected-active: #ffffff; --ds-color-interactive-icon-chip-selected-hover: #ffffff; --ds-color-interactive-icon-chip-selected-pressed: #ffffff; --ds-color-interactive-icon-icon-button-filled-accent-active: #ffffff; --ds-color-interactive-icon-icon-button-filled-accent-disabled: #ffffff; --ds-color-interactive-icon-icon-button-filled-accent-hover: #ffffff; --ds-color-interactive-icon-icon-button-filled-accent-pressed: #ffffff; --ds-color-interactive-icon-icon-button-filled-accent-reversed-active: #121212; --ds-color-interactive-icon-icon-button-filled-accent-reversed-disabled: #121212; --ds-color-interactive-icon-icon-button-filled-accent-reversed-hover: #454545; --ds-color-interactive-icon-icon-button-filled-accent-reversed-pressed: #696969; --ds-color-interactive-icon-icon-button-filled-destructive-active: #ffffff; --ds-color-interactive-icon-icon-button-filled-destructive-disabled: #ffffff; --ds-color-interactive-icon-icon-button-filled-destructive-hover: #ffffff; --ds-color-interactive-icon-icon-button-filled-destructive-pressed: #ffffff; --ds-color-interactive-icon-icon-button-filled-destructive-reversed-active: #df1116; --ds-color-interactive-icon-icon-button-filled-destructive-reversed-disabled: #df1116; --ds-color-interactive-icon-icon-button-filled-destructive-reversed-hover: #8f0004; --ds-color-interactive-icon-icon-button-filled-destructive-reversed-pressed: #470002; --ds-color-interactive-icon-icon-button-filled-main-active: #ffffff; --ds-color-interactive-icon-icon-button-filled-main-disabled: #ffffff; --ds-color-interactive-icon-icon-button-filled-main-hover: #ffffff; --ds-color-interactive-icon-icon-button-filled-main-pressed: #ffffff; --ds-color-interactive-icon-icon-button-filled-main-reversed-active: #0970e6; --ds-color-interactive-icon-icon-button-filled-main-reversed-disabled: #0970e6; --ds-color-interactive-icon-icon-button-filled-main-reversed-hover: #004e9b; --ds-color-interactive-icon-icon-button-filled-main-reversed-pressed: #003161; --ds-color-interactive-icon-icon-button-outlined-accent-active: #121212; --ds-color-interactive-icon-icon-button-outlined-accent-disabled: #121212; --ds-color-interactive-icon-icon-button-outlined-accent-hover: #454545; --ds-color-interactive-icon-icon-button-outlined-accent-pressed: #696969; --ds-color-interactive-icon-icon-button-outlined-accent-reversed-active: #ffffff; --ds-color-interactive-icon-icon-button-outlined-accent-reversed-disabled: #ffffff; --ds-color-interactive-icon-icon-button-outlined-accent-reversed-hover: #ebebeb; --ds-color-interactive-icon-icon-button-outlined-accent-reversed-pressed: #d9d9d9; --ds-color-interactive-icon-icon-button-outlined-destructive-active: #df1116; --ds-color-interactive-icon-icon-button-outlined-destructive-disabled: #df1116; --ds-color-interactive-icon-icon-button-outlined-destructive-hover: #8f0004; --ds-color-interactive-icon-icon-button-outlined-destructive-pressed: #470002; --ds-color-interactive-icon-icon-button-outlined-destructive-reversed-active: #ffffff; --ds-color-interactive-icon-icon-button-outlined-destructive-reversed-disabled: #ffffff; --ds-color-interactive-icon-icon-button-outlined-destructive-reversed-hover: #ebebeb; --ds-color-interactive-icon-icon-button-outlined-destructive-reversed-pressed: #d9d9d9; --ds-color-interactive-icon-icon-button-outlined-main-active: #0970e6; --ds-color-interactive-icon-icon-button-outlined-main-disabled: #0970e6; --ds-color-interactive-icon-icon-button-outlined-main-hover: #004e9b; --ds-color-interactive-icon-icon-button-outlined-main-pressed: #003161; --ds-color-interactive-icon-icon-button-outlined-main-reversed-active: #ffffff; --ds-color-interactive-icon-icon-button-outlined-main-reversed-disabled: #ffffff; --ds-color-interactive-icon-icon-button-outlined-main-reversed-hover: #ebebeb; --ds-color-interactive-icon-icon-button-outlined-main-reversed-pressed: #d9d9d9; --ds-color-interactive-icon-icon-button-transparent-accent-active: #121212; --ds-color-interactive-icon-icon-button-transparent-accent-disabled: #121212; --ds-color-interactive-icon-icon-button-transparent-accent-hover: #454545; --ds-color-interactive-icon-icon-button-transparent-accent-pressed: #696969; --ds-color-interactive-icon-icon-button-transparent-accent-reversed-active: #ffffff; --ds-color-interactive-icon-icon-button-transparent-accent-reversed-disabled: #ffffff; --ds-color-interactive-icon-icon-button-transparent-accent-reversed-hover: #ebebeb; --ds-color-interactive-icon-icon-button-transparent-accent-reversed-pressed: #d9d9d9; --ds-color-interactive-icon-icon-button-transparent-destructive-active: #df1116; --ds-color-interactive-icon-icon-button-transparent-destructive-disabled: #df1116; --ds-color-interactive-icon-icon-button-transparent-destructive-hover: #8f0004; --ds-color-interactive-icon-icon-button-transparent-destructive-pressed: #470002; --ds-color-interactive-icon-icon-button-transparent-destructive-reversed-active: #ffffff; --ds-color-interactive-icon-icon-button-transparent-destructive-reversed-disabled: #ffffff; --ds-color-interactive-icon-icon-button-transparent-destructive-reversed-hover: #ebebeb; --ds-color-interactive-icon-icon-button-transparent-destructive-reversed-pressed: #d9d9d9; --ds-color-interactive-icon-icon-button-transparent-main-active: #0970e6; --ds-color-interactive-icon-icon-button-transparent-main-disabled: #0970e6; --ds-color-interactive-icon-icon-button-transparent-main-hover: #004e9b; --ds-color-interactive-icon-icon-button-transparent-main-pressed: #003161; --ds-color-interactive-icon-icon-button-transparent-main-reversed-active: #ffffff; --ds-color-interactive-icon-icon-button-transparent-main-reversed-disabled: #ffffff; --ds-color-interactive-icon-icon-button-transparent-main-reversed-hover: #ebebeb; --ds-color-interactive-icon-icon-button-transparent-main-reversed-pressed: #d9d9d9; --ds-color-interactive-icon-input-addon-default: #121212; --ds-color-interactive-icon-input-addon-error: #df1116; --ds-color-interactive-icon-input-checkbox-selected-active: #ffffff; --ds-color-interactive-icon-input-checkbox-selected-hover: #ffffff; --ds-color-interactive-icon-input-checkbox-selected-pressed: #ffffff; --ds-color-interactive-icon-input-select-button-accent-active: #121212; --ds-color-interactive-icon-input-select-button-accent-disabled: #121212; --ds-color-interactive-icon-input-select-button-accent-hover: #121212; --ds-color-interactive-icon-input-select-button-accent-pressed: #121212; --ds-color-interactive-icon-input-select-button-main-active: #0970e6; --ds-color-interactive-icon-input-select-button-main-disabled: #0970e6; --ds-color-interactive-icon-input-select-button-main-hover: #0970e6; --ds-color-interactive-icon-input-select-button-main-pressed: #0970e6; --ds-color-interactive-icon-input-select-button-selected-accent-active: #ffffff; --ds-color-interactive-icon-input-select-button-selected-accent-hover: #ffffff; --ds-color-interactive-icon-input-select-button-selected-accent-pressed: #ffffff; --ds-color-interactive-icon-input-select-button-selected-main-active: #ffffff; --ds-color-interactive-icon-input-select-button-selected-main-hover: #ffffff; --ds-color-interactive-icon-input-select-button-selected-main-pressed: #ffffff; --ds-color-interactive-icon-link-accent-active: #121212; --ds-color-interactive-icon-link-accent-disabled: #121212; --ds-color-interactive-icon-link-accent-hover: #454545; --ds-color-interactive-icon-link-accent-pressed: #696969; --ds-color-interactive-icon-link-accent-reversed-active: #ffffff; --ds-color-interactive-icon-link-accent-reversed-disabled: #ffffff; --ds-color-interactive-icon-link-accent-reversed-hover: #ebebeb; --ds-color-interactive-icon-link-accent-reversed-pressed: #d9d9d9; --ds-color-interactive-icon-link-destructive-active: #df1116; --ds-color-interactive-icon-link-destructive-disabled: #df1116; --ds-color-interactive-icon-link-destructive-hover: #8f0004; --ds-color-interactive-icon-link-destructive-pressed: #470002; --ds-color-interactive-icon-link-destructive-reversed-active: #ffffff; --ds-color-interactive-icon-link-destructive-reversed-disabled: #ffffff; --ds-color-interactive-icon-link-destructive-reversed-hover: #ebebeb; --ds-color-interactive-icon-link-destructive-reversed-pressed: #d9d9d9; --ds-color-interactive-icon-link-main-active: #0970e6; --ds-color-interactive-icon-link-main-disabled: #0970e6; --ds-color-interactive-icon-link-main-hover: #004e9b; --ds-color-interactive-icon-link-main-pressed: #003161; --ds-color-interactive-icon-link-main-reversed-active: #ffffff; --ds-color-interactive-icon-link-main-reversed-disabled: #ffffff; --ds-color-interactive-icon-link-main-reversed-hover: #ebebeb; --ds-color-interactive-icon-link-main-reversed-pressed: #d9d9d9; --ds-color-interactive-icon-navigation-item-active: #121212; --ds-color-interactive-icon-navigation-item-disabled: #121212; --ds-color-interactive-icon-navigation-item-hover: #454545; --ds-color-interactive-icon-navigation-item-pressed: #696969; --ds-color-interactive-icon-navigation-item-selected-active: #121212; --ds-color-interactive-icon-navigation-item-selected-hover: #454545; --ds-color-interactive-icon-navigation-item-selected-pressed: #696969; --ds-color-interactive-icon-quantity-button-active: #ffffff; --ds-color-interactive-icon-quantity-button-disabled: #ffffff; --ds-color-interactive-icon-quantity-button-hover: #ffffff; --ds-color-interactive-icon-quantity-button-modifier-active: #ffffff; --ds-color-interactive-icon-quantity-button-modifier-focus: #ffffff; --ds-color-interactive-icon-quantity-button-modifier-hover: #ffffff; --ds-color-interactive-icon-quantity-button-modifier-pressed: #ffffff; --ds-color-interactive-icon-quantity-button-pressed: #ffffff; --ds-color-interactive-icon-segmented-control-item-active: #121212; --ds-color-interactive-icon-segmented-control-item-hover: #121212; --ds-color-interactive-icon-segmented-control-item-pressed: #121212; --ds-color-interactive-icon-segmented-control-item-selected-active: #ffffff; --ds-color-interactive-icon-segmented-control-item-selected-hover: #ffffff; --ds-color-interactive-icon-segmented-control-item-selected-pressed: #ffffff; --ds-color-interactive-icon-stepper-item-negative-active: #df1116; --ds-color-interactive-icon-stepper-item-negative-disabled: #df1116; --ds-color-interactive-icon-stepper-item-negative-hover: #8f0004; --ds-color-interactive-icon-stepper-item-negative-pressed: #470002; --ds-color-interactive-icon-stepper-item-negative-reversed-active: #ffffff; --ds-color-interactive-icon-stepper-item-negative-reversed-hover: #ffffff; --ds-color-interactive-icon-stepper-item-negative-reversed-pressed: #ffffff; --ds-color-interactive-icon-stepper-item-positive-active: #2c815e; --ds-color-interactive-icon-stepper-item-positive-disabled: #2c815e; --ds-color-interactive-icon-stepper-item-positive-hover: #155138; --ds-color-interactive-icon-stepper-item-positive-pressed: #051e14; --ds-color-interactive-icon-stepper-item-positive-reversed-active: #ffffff; --ds-color-interactive-icon-stepper-item-positive-reversed-hover: #ffffff; --ds-color-interactive-icon-stepper-item-positive-reversed-pressed: #ffffff; --ds-color-interactive-icon-tab-active: #121212; --ds-color-interactive-icon-tab-disabled: #121212; --ds-color-interactive-icon-tab-hover: #454545; --ds-color-interactive-icon-tab-pressed: #696969; --ds-color-interactive-icon-tab-selected-active: #0970e6; --ds-color-interactive-icon-tab-selected-disabled: #0970e6; --ds-color-interactive-icon-tab-selected-hover: #004e9b; --ds-color-interactive-icon-tab-selected-pressed: #003161; --ds-color-interactive-icon-visual-button-active: #121212; --ds-color-interactive-icon-visual-button-hover: #121212; --ds-color-interactive-icon-visual-button-pressed: #121212; --ds-color-interactive-text-button-filled-accent-active: #ffffff; --ds-color-interactive-text-button-filled-accent-disabled: #ffffff; --ds-color-interactive-text-button-filled-accent-hover: #ffffff; --ds-color-interactive-text-button-filled-accent-pressed: #ffffff; --ds-color-interactive-text-button-filled-accent-reversed-active: #121212; --ds-color-interactive-text-button-filled-accent-reversed-disabled: #121212; --ds-color-interactive-text-button-filled-accent-reversed-hover: #454545; --ds-color-interactive-text-button-filled-accent-reversed-pressed: #696969; --ds-color-interactive-text-button-filled-destructive-active: #ffffff; --ds-color-interactive-text-button-filled-destructive-disabled: #ffffff; --ds-color-interactive-text-button-filled-destructive-hover: #ffffff; --ds-color-interactive-text-button-filled-destructive-pressed: #ffffff; --ds-color-interactive-text-button-filled-destructive-reversed-active: #df1116; --ds-color-interactive-text-button-filled-destructive-reversed-disabled: #df1116; --ds-color-interactive-text-button-filled-destructive-reversed-hover: #8f0004; --ds-color-interactive-text-button-filled-destructive-reversed-pressed: #470002; --ds-color-interactive-text-button-filled-main-active: #ffffff; --ds-color-interactive-text-button-filled-main-disabled: #ffffff; --ds-color-interactive-text-button-filled-main-hover: #ffffff; --ds-color-interactive-text-button-filled-main-pressed: #ffffff; --ds-color-interactive-text-button-filled-main-reversed-active: #0970e6; --ds-color-interactive-text-button-filled-main-reversed-disabled: #0970e6; --ds-color-interactive-text-button-filled-main-reversed-hover: #004e9b; --ds-color-interactive-text-button-filled-main-reversed-pressed: #003161; --ds-color-interactive-text-button-outlined-accent-active: #121212; --ds-color-interactive-text-button-outlined-accent-disabled: #121212; --ds-color-interactive-text-button-outlined-accent-hover: #454545; --ds-color-interactive-text-button-outlined-accent-pressed: #696969; --ds-color-interactive-text-button-outlined-accent-reversed-active: #ffffff; --ds-color-interactive-text-button-outlined-accent-reversed-disabled: #ffffff; --ds-color-interactive-text-button-outlined-accent-reversed-hover: #ebebeb; --ds-color-interactive-text-button-outlined-accent-reversed-pressed: #d9d9d9; --ds-color-interactive-text-button-outlined-destructive-active: #df1116; --ds-color-interactive-text-button-outlined-destructive-disabled: #df1116; --ds-color-interactive-text-button-outlined-destructive-hover: #8f0004; --ds-color-interactive-text-button-outlined-destructive-pressed: #470002; --ds-color-interactive-text-button-outlined-destructive-reversed-active: #ffffff; --ds-color-interactive-text-button-outlined-destructive-reversed-disabled: #ffffff; --ds-color-interactive-text-button-outlined-destructive-reversed-hover: #ebebeb; --ds-color-interactive-text-button-outlined-destructive-reversed-pressed: #d9d9d9; --ds-color-interactive-text-button-outlined-main-active: #0970e6; --ds-color-interactive-text-button-outlined-main-disabled: #0970e6; --ds-color-interactive-text-button-outlined-main-hover: #004e9b; --ds-color-interactive-text-button-outlined-main-pressed: #003161; --ds-color-interactive-text-button-outlined-main-reversed-active: #ffffff; --ds-color-interactive-text-button-outlined-main-reversed-disabled: #ffffff; --ds-color-interactive-text-button-outlined-main-reversed-hover: #ebebeb; --ds-color-interactive-text-button-outlined-main-reversed-pressed: #d9d9d9; --ds-color-interactive-text-button-transparent-accent-active: #121212; --ds-color-interactive-text-button-transparent-accent-disabled: #121212; --ds-color-interactive-text-button-transparent-accent-hover: #454545; --ds-color-interactive-text-button-transparent-accent-pressed: #696969; --ds-color-interactive-text-button-transparent-accent-reversed-active: #ffffff; --ds-color-interactive-text-button-transparent-accent-reversed-disabled: #ffffff; --ds-color-interactive-text-button-transparent-accent-reversed-hover: #ebebeb; --ds-color-interactive-text-button-transparent-accent-reversed-pressed: #d9d9d9; --ds-color-interactive-text-button-transparent-destructive-active: #df1116; --ds-color-interactive-text-button-transparent-destructive-disabled: #df1116; --ds-color-interactive-text-button-transparent-destructive-hover: #8f0004; --ds-color-interactive-text-button-transparent-destructive-pressed: #470002; --ds-color-interactive-text-button-transparent-destructive-reversed-active: #ffffff; --ds-color-interactive-text-button-transparent-destructive-reversed-disabled: #ffffff; --ds-color-interactive-text-button-transparent-destructive-reversed-hover: #ebebeb; --ds-color-interactive-text-button-transparent-destructive-reversed-pressed: #d9d9d9; --ds-color-interactive-text-button-transparent-main-active: #0970e6; --ds-color-interactive-text-button-transparent-main-disabled: #0970e6; --ds-color-interactive-text-button-transparent-main-hover: #004e9b; --ds-color-interactive-text-button-transparent-main-pressed: #003161; --ds-color-interactive-text-button-transparent-main-reversed-active: #ffffff; --ds-color-interactive-text-button-transparent-main-reversed-disabled: #ffffff; --ds-color-interactive-text-button-transparent-main-reversed-hover: #ebebeb; --ds-color-interactive-text-button-transparent-main-reversed-pressed: #d9d9d9; --ds-color-interactive-text-chip-active: #121212; --ds-color-interactive-text-chip-disabled: #121212; --ds-color-interactive-text-chip-hover: #121212; --ds-color-interactive-text-chip-pressed: #121212; --ds-color-interactive-text-chip-selected-active: #ffffff; --ds-color-interactive-text-chip-selected-hover: #ffffff; --ds-color-interactive-text-chip-selected-pressed: #ffffff; --ds-color-interactive-text-input-addon-default: #121212; --ds-color-interactive-text-input-addon-error: #df1116; --ds-color-interactive-text-input-addon-main: #454545; --ds-color-interactive-text-input-button-select-accent-active: #121212; --ds-color-interactive-text-input-button-select-accent-disabled: #121212; --ds-color-interactive-text-input-button-select-accent-hover: #121212; --ds-color-interactive-text-input-button-select-accent-pressed: #121212; --ds-color-interactive-text-input-button-select-main-active: #0970e6; --ds-color-interactive-text-input-button-select-main-disabled: #0970e6; --ds-color-interactive-text-input-button-select-main-hover: #004e9b; --ds-color-interactive-text-input-button-select-main-pressed: #003161; --ds-color-interactive-text-input-button-select-selected-accent-active: #ffffff; --ds-color-interactive-text-input-button-select-selected-accent-disabled: #ffffff; --ds-color-interactive-text-input-button-select-selected-accent-hover: #ffffff; --ds-color-interactive-text-input-button-select-selected-accent-pressed: #ffffff; --ds-color-interactive-text-input-button-select-selected-main-active: #ffffff; --ds-color-interactive-text-input-button-select-selected-main-disabled: #ffffff; --ds-color-interactive-text-input-button-select-selected-main-hover: #ffffff; --ds-color-interactive-text-input-button-select-selected-main-pressed: #ffffff; --ds-color-interactive-text-input-calendar-active: #121212; --ds-color-interactive-text-input-calendar-disabled: #121212; --ds-color-interactive-text-input-calendar-hover: #121212; --ds-color-interactive-text-input-calendar-pressed: #121212; --ds-color-interactive-text-input-calendar-range-active: #121212; --ds-color-interactive-text-input-calendar-range-hover: #121212; --ds-color-interactive-text-input-calendar-range-pressed: #121212; --ds-color-interactive-text-input-calendar-selected-active: #ffffff; --ds-color-interactive-text-input-calendar-selected-hover: #ffffff; --ds-color-interactive-text-input-calendar-selected-pressed: #ffffff; --ds-color-interactive-text-input-content: #121212; --ds-color-interactive-text-input-date-picker-shortcut-active: #121212; --ds-color-interactive-text-input-date-picker-shortcut-disabled: #121212; --ds-color-interactive-text-input-date-picker-shortcut-hover: #121212; --ds-color-interactive-text-input-date-picker-shortcut-pressed: #121212; --ds-color-interactive-text-input-date-picker-shortcut-selected-active: #121212; --ds-color-interactive-text-input-date-picker-shortcut-selected-hover: #121212; --ds-color-interactive-text-input-date-picker-shortcut-selected-pressed: #121212; --ds-color-interactive-text-input-label-default: #454545; --ds-color-interactive-text-input-label-error: #df1116; --ds-color-interactive-text-input-placeholder: #696969; --ds-color-interactive-text-input-segmented-control-item-active: #121212; --ds-color-interactive-text-input-segmented-control-item-disabled: #121212; --ds-color-interactive-text-input-segmented-control-item-hover: #121212; --ds-color-interactive-text-input-segmented-control-item-pressed: #121212; --ds-color-interactive-text-input-segmented-control-item-selected-active: #ffffff; --ds-color-interactive-text-input-segmented-control-item-selected-disabled: #ffffff; --ds-color-interactive-text-input-segmented-control-item-selected-hover: #ffffff; --ds-color-interactive-text-input-segmented-control-item-selected-pressed: #ffffff; --ds-color-interactive-text-link-accent-active: #121212; --ds-color-interactive-text-link-accent-disabled: #121212; --ds-color-interactive-text-link-accent-hover: #454545; --ds-color-interactive-text-link-accent-pressed: #696969; --ds-color-interactive-text-link-accent-reversed-active: #ffffff; --ds-color-interactive-text-link-accent-reversed-disabled: #ffffff; --ds-color-interactive-text-link-accent-reversed-hover: #ebebeb; --ds-color-interactive-text-link-accent-reversed-pressed: #d9d9d9; --ds-color-interactive-text-link-destructive-active: #df1116; --ds-color-interactive-text-link-destructive-disabled: #df1116; --ds-color-interactive-text-link-destructive-hover: #8f0004; --ds-color-interactive-text-link-destructive-pressed: #470002; --ds-color-interactive-text-link-destructive-reversed-active: #ffffff; --ds-color-interactive-text-link-destructive-reversed-disabled: #ffffff; --ds-color-interactive-text-link-destructive-reversed-hover: #ebebeb; --ds-color-interactive-text-link-destructive-reversed-pressed: #d9d9d9; --ds-color-interactive-text-link-main-active: #0970e6; --ds-color-interactive-text-link-main-disabled: #0970e6; --ds-color-interactive-text-link-main-hover: #004e9b; --ds-color-interactive-text-link-main-pressed: #003161; --ds-color-interactive-text-link-main-reversed-active: #ffffff; --ds-color-interactive-text-link-main-reversed-disabled: #ffffff; --ds-color-interactive-text-link-main-reversed-hover: #ebebeb; --ds-color-interactive-text-link-main-reversed-pressed: #d9d9d9; --ds-color-interactive-text-navigation-item-active: #121212; --ds-color-interactive-text-navigation-item-disabled: #121212; --ds-color-interactive-text-navigation-item-hover: #454545; --ds-color-interactive-text-navigation-item-pressed: #696969; --ds-color-interactive-text-navigation-item-selected-active: #121212; --ds-color-interactive-text-navigation-item-selected-hover: #454545; --ds-color-interactive-text-navigation-item-selected-pressed: #696969; --ds-color-interactive-text-pagination-active: #121212; --ds-color-interactive-text-pagination-disabled: #121212; --ds-color-interactive-text-pagination-hover: #454545; --ds-color-interactive-text-pagination-pressed: #696969; --ds-color-interactive-text-pagination-selected-active: #ffffff; --ds-color-interactive-text-pagination-selected-hover: #ffffff; --ds-color-interactive-text-pagination-selected-pressed: #ffffff; --ds-color-interactive-text-quantity-button-active: #ffffff; --ds-color-interactive-text-quantity-button-disabled: #ffffff; --ds-color-interactive-text-quantity-button-hover: #ffffff; --ds-color-interactive-text-quantity-button-pressed: #ffffff; --ds-color-interactive-text-stepper-item-default-active: #121212; --ds-color-interactive-text-stepper-item-default-disabled: #121212; --ds-color-interactive-text-stepper-item-default-hover: #454545; --ds-color-interactive-text-stepper-item-default-pressed: #696969; --ds-color-interactive-text-stepper-item-default-reversed-active: #ffffff; --ds-color-interactive-text-stepper-item-default-reversed-hover: #ffffff; --ds-color-interactive-text-stepper-item-default-reversed-pressed: #ffffff; --ds-color-interactive-text-stepper-item-negative-active: #df1116; --ds-color-interactive-text-stepper-item-negative-disabled: #df1116; --ds-color-interactive-text-stepper-item-negative-hover: #8f0004; --ds-color-interactive-text-stepper-item-negative-pressed: #470002; --ds-color-interactive-text-stepper-item-negative-reversed-active: #ffffff; --ds-color-interactive-text-stepper-item-negative-reversed-hover: #ffffff; --ds-color-interactive-text-stepper-item-negative-reversed-pressed: #ffffff; --ds-color-interactive-text-stepper-item-positive-active: #2c815e; --ds-color-interactive-text-stepper-item-positive-disabled: #2c815e; --ds-color-interactive-text-stepper-item-positive-hover: #155138; --ds-color-interactive-text-stepper-item-positive-pressed: #051e14; --ds-color-interactive-text-stepper-item-positive-reversed-active: #ffffff; --ds-color-interactive-text-stepper-item-positive-reversed-hover: #ffffff; --ds-color-interactive-text-stepper-item-positive-reversed-pressed: #ffffff; --ds-color-interactive-text-tab-active: #121212; --ds-color-interactive-text-tab-disabled: #121212; --ds-color-interactive-text-tab-hover: #454545; --ds-color-interactive-text-tab-pressed: #696969; --ds-color-interactive-text-tab-selected-active: #0970e6; --ds-color-interactive-text-tab-selected-disabled: #0970e6; --ds-color-interactive-text-tab-selected-hover: #004e9b; --ds-color-interactive-text-tab-selected-pressed: #003161; --ds-color-interactive-text-visual-button-body-active: #121212; --ds-color-interactive-text-visual-button-body-disabled: #121212; --ds-color-interactive-text-visual-button-body-hover: #121212; --ds-color-interactive-text-visual-button-body-pressed: #121212; --ds-color-interactive-text-visual-button-title-active: #0970e6; --ds-color-interactive-text-visual-button-title-disabled: #0970e6; --ds-color-interactive-text-visual-button-title-hover: #004e9b; --ds-color-interactive-text-visual-button-title-pressed: #003161; --ds-color-persistent-background-accordion-default: #ffffff; --ds-color-persistent-background-alternate: #f7f7f7; --ds-color-persistent-background-badge-information: #173eb4; --ds-color-persistent-background-badge-light-information: #f5faff; --ds-color-persistent-background-badge-light-negative: #ffefef; --ds-color-persistent-background-badge-light-positive: #f0faf6; --ds-color-persistent-background-badge-light-warning: #fff7f0; --ds-color-persistent-background-badge-negative: #df1116; --ds-color-persistent-background-badge-positive: #2c815e; --ds-color-persistent-background-badge-warning: #cc4010; --ds-color-persistent-background-card-default: #ffffff; --ds-color-persistent-background-chip-default: #ffffff; --ds-color-persistent-background-functional-notice-dark-information: #173eb4; --ds-color-persistent-background-functional-notice-dark-negative: #df1116; --ds-color-persistent-background-functional-notice-dark-success: #2c815e; --ds-color-persistent-background-functional-notice-dark-warning: #cc4010; --ds-color-persistent-background-functional-notice-light-information: #f5faff; --ds-color-persistent-background-functional-notice-light-negative: #ffefef; --ds-color-persistent-background-functional-notice-light-success: #f0faf6; --ds-color-persistent-background-functional-notice-light-warning: #fff7f0; --ds-color-persistent-background-functional-notice-light-neutral: #f7f7f7; --ds-color-persistent-background-main: #ffffff; --ds-color-persistent-background-modal-default: #ffffff; --ds-color-persistent-background-notification: #df1116; --ds-color-persistent-background-overlay-default: #121212; --ds-color-persistent-background-popin-default: #ffffff; --ds-color-persistent-background-popover-arrow-default: #ffffff; --ds-color-persistent-background-popover-default: #ffffff; --ds-color-persistent-background-progress-bar-reversed-default: #121212; --ds-color-persistent-background-progress-bar-reversed-progress: #ffffff; --ds-color-persistent-background-quantity-button-default: #0970e6; --ds-color-persistent-background-separator-default: #ebebeb; --ds-color-persistent-background-stepper-item-default: #121212; --ds-color-persistent-background-stepper-item-negative: #df1116; --ds-color-persistent-background-stepper-item-opposite: #ffffff; --ds-color-persistent-background-stepper-item-positive: #2c815e; --ds-color-persistent-background-stepper-item-reversed-negative: #ffffff; --ds-color-persistent-background-stepper-item-reversed-positive: #ffffff; --ds-color-persistent-background-table-cell-alternative: #f7f7f7; --ds-color-persistent-background-table-cell-default: #ffffff; --ds-color-persistent-background-tag-information: #173eb4; --ds-color-persistent-background-tag-light-information: #f5faff; --ds-color-persistent-background-tag-light-negative: #ffefef; --ds-color-persistent-background-tag-light-positive: #f0faf6; --ds-color-persistent-background-tag-light-warning: #fff7f0; --ds-color-persistent-background-tag-negative: #df1116; --ds-color-persistent-background-tag-positive: #2c815e; --ds-color-persistent-background-tag-warning: #cc4010; --ds-color-persistent-background-tint: #f5faff; --ds-color-persistent-background-toaster-information: #173eb4; --ds-color-persistent-background-toaster-negative: #8f0004; --ds-color-persistent-background-toaster-positive: #2c815e; --ds-color-persistent-background-toaster-warning: #cc4010; --ds-color-persistent-background-tooltip-arrow-default: #121212; --ds-color-persistent-background-tooltip-default: #121212; --ds-color-persistent-border-accordion-default: #ebebeb; --ds-color-persistent-border-card-default: #ebebeb; --ds-color-persistent-border-functional-information: #173eb4; --ds-color-persistent-border-functional-negative: #df1116; --ds-color-persistent-border-functional-positive: #2c815e; --ds-color-persistent-border-functional-warning: #cc4010; --ds-color-persistent-border-modal-default: #ebebeb; --ds-color-persistent-border-primary: #121212; --ds-color-persistent-border-reversed-primary: #ffffff; --ds-color-persistent-border-reversed-secondary: #ebebeb; --ds-color-persistent-border-reversed-tertiary: #d9d9d9; --ds-color-persistent-border-secondary: #696969; --ds-color-persistent-border-stepper-item-default: #121212; --ds-color-persistent-border-stepper-item-negative: #df1116; --ds-color-persistent-border-stepper-item-positive: #2c815e; --ds-color-persistent-border-tag-information: #173eb4; --ds-color-persistent-border-tag-negative: #df1116; --ds-color-persistent-border-tag-positive: #2c815e; --ds-color-persistent-border-tag-warning: #cc4010; --ds-color-persistent-border-tertiary: #878787; --ds-color-persistent-icon-functional-information: #173eb4; --ds-color-persistent-icon-functional-negative: #df1116; --ds-color-persistent-icon-functional-success: #2c815e; --ds-color-persistent-icon-functional-warning: #cc4010; --ds-color-persistent-icon-functional-notice-default: #121212; --ds-color-persistent-icon-functional-notice-information: #173eb4; --ds-color-persistent-icon-functional-notice-negative: #df1116; --ds-color-persistent-icon-functional-notice-reversed: #ffffff; --ds-color-persistent-icon-functional-notice-success: #2c815e; --ds-color-persistent-icon-functional-notice-warning: #cc4010; --ds-color-persistent-icon-primary: #121212; --ds-color-persistent-icon-secondary: #696969; --ds-color-persistent-icon-spinner-default: #121212; --ds-color-persistent-icon-stepper-item-negative: #df1116; --ds-color-persistent-icon-stepper-item-positive: #2c815e; --ds-color-persistent-icon-stepper-item-reversed-negative: #ffffff; --ds-color-persistent-icon-stepper-item-reversed-positive: #ffffff; --ds-color-persistent-icon-table-title-default: #121212; --ds-color-persistent-icon-table-title-selected: #0970e6; --ds-color-persistent-icon-tag-information: #173eb4; --ds-color-persistent-icon-tag-negative: #df1116; --ds-color-persistent-icon-tag-success: #2c815e; --ds-color-persistent-icon-tag-warning: #cc4010; --ds-color-persistent-icon-tertiary: #454545; --ds-color-persistent-icon-toaster-default: #ffffff; --ds-color-persistent-text-accordion-default: #121212; --ds-color-persistent-text-functional-information: #173eb4; --ds-color-persistent-text-functional-negative: #df1116; --ds-color-persistent-text-functional-positive: #2c815e; --ds-color-persistent-text-functional-warning: #cc4010; --ds-color-persistent-text-functional-notice-default: #121212; --ds-color-persistent-text-functional-notice-reversed: #ffffff; --ds-color-persistent-text-popover-default: #121212; --ds-color-persistent-text-primary: #121212; --ds-color-persistent-text-quantity-button: #ffffff; --ds-color-persistent-text-reversed-primary: #ffffff; --ds-color-persistent-text-reversed-secondary: #ebebeb; --ds-color-persistent-text-reversed-tertiary: #d9d9d9; --ds-color-persistent-text-secondary: #454545; --ds-color-persistent-text-stepper-item-default: #121212; --ds-color-persistent-text-stepper-item-negative: #df1116; --ds-color-persistent-text-stepper-item-positive: #2c815e; --ds-color-persistent-text-stepper-item-reversed: #ffffff; --ds-color-persistent-text-table-cell-default: #121212; --ds-color-persistent-text-table-cell-title-default: #121212; --ds-color-persistent-text-table-cell-title-selected: #0970e6; --ds-color-persistent-text-tag-information: #173eb4; --ds-color-persistent-text-tag-negative: #df1116; --ds-color-persistent-text-tag-positive: #2c815e; --ds-color-persistent-text-tag-warning: #cc4010; --ds-color-persistent-text-tertiary: #696969; --ds-color-persistent-text-toaster-default: #ffffff; --ds-color-persistent-text-tooltip-default: #ffffff; } /* node_modules/.pnpm/@carrefour+design-system-tokens@2.104.0/node_modules/@carrefour/design-system-tokens/dist/css/color-deprecated.css */ :root { --ds-color-brand-primary: #254f9a; --ds-color-brand-secondary: #c20016; --ds-color-brand-tertiary: #f0f3f6; --ds-color-core-background-functional-information: #f5faff; --ds-color-core-background-functional-information-reversed: #173eb4; --ds-color-core-background-functional-negative: #ffefef; --ds-color-core-background-functional-negative-reversed: #aa0d11; --ds-color-core-background-functional-notification: #e51e26; --ds-color-core-background-functional-positive: #f9fff2; --ds-color-core-background-functional-positive-reversed: #33691e; --ds-color-core-background-functional-warning: #fff7f0; --ds-color-core-background-functional-warning-reversed: #cc4010; --ds-color-core-background-main-primary: #ffffff; --ds-color-core-background-main-secondary: #f7f7f7; --ds-color-core-background-reversed-primary: #121212; --ds-color-core-background-reversed-secondary: #262626; --ds-color-core-background-specific-loyalty: #e8f8ff; --ds-color-core-background-specific-loyalty-reversed: #004f9b; --ds-color-core-background-specific-promotion: #ffefef; --ds-color-core-background-specific-promotion-reversed: #d30d1f; --ds-color-core-border-functional-information: #173eb4; --ds-color-core-border-functional-negative: #aa0d11; --ds-color-core-border-functional-positive: #33691e; --ds-color-core-border-functional-warning: #cc4010; --ds-color-core-border-main-primary: #e5e5e5; --ds-color-core-border-main-secondary: #d9d9d9; --ds-color-core-border-specific-loyalty: #004f9b; --ds-color-core-border-specific-promotion: #d30d1f; --ds-color-core-content-functional-information: #173eb4; --ds-color-core-content-functional-negative: #aa0d11; --ds-color-core-content-functional-positive: #33691e; --ds-color-core-content-functional-warning: #cc4010; --ds-color-core-content-main-primary: #121212; --ds-color-core-content-main-secondary: #454545; --ds-color-core-content-main-tertiary: #575757; --ds-color-core-content-reversed-primary: #ffffff; --ds-color-core-content-reversed-secondary: #e5e5e5; --ds-color-core-content-reversed-tertiary: #d9d9d9; --ds-color-core-content-specific-loyalty: #004f9b; --ds-color-core-content-specific-promotion: #d30d1f; --ds-color-decorative-background-main-aqua: #edfdff; --ds-color-decorative-background-main-banana: #fffef2; --ds-color-decorative-background-main-casper: #f0f3f6; --ds-color-decorative-background-main-celeste: #f5faff; --ds-color-decorative-background-main-champagne: #fff7f0; --ds-color-decorative-background-main-lagoon: #f2fcf7; --ds-color-decorative-background-main-lavender: #f9f5ff; --ds-color-decorative-background-main-lemon: #fdfff0; --ds-color-decorative-background-main-lilac: #fdf2ff; --ds-color-decorative-background-main-mint: #ebfff9; --ds-color-decorative-background-main-misty: #e5e9f0; --ds-color-decorative-background-main-peach: #fff4f2; --ds-color-decorative-background-main-sahara: #fffbf0; --ds-color-decorative-background-main-tea: #f9fff2; --ds-color-decorative-background-main-vanilla: #fff9eb; --ds-color-decorative-background-reversed-abyss: #052351; --ds-color-decorative-background-reversed-charcoal: #262626; --ds-color-decorative-background-reversed-electric: #311b92; --ds-color-decorative-background-reversed-forest: #004f2b; --ds-color-decorative-background-reversed-ginger: #b33308; --ds-color-decorative-background-reversed-graphite: #263238; --ds-color-decorative-background-reversed-jungle: #006223; --ds-color-decorative-background-reversed-olive: #827717; --ds-color-decorative-background-reversed-raisin: #4a148c; --ds-color-decorative-background-reversed-royal: #173eb4; --ds-color-decorative-background-reversed-sacramento: #006064; --ds-color-decorative-background-reversed-scottish: #33691e; --ds-color-decorative-background-reversed-walnut: #5c2e1d; --ds-color-decorative-border-main-aqua: #b2ebf2; --ds-color-decorative-border-main-banana: #fff9c4; --ds-color-decorative-border-main-casper: #cfd8dc; --ds-color-decorative-border-main-celeste: #b9ddff; --ds-color-decorative-border-main-champagne: #ffdab4; --ds-color-decorative-border-main-lagoon: #b9e9cc; --ds-color-decorative-border-main-lavender: #d1c4e9; --ds-color-decorative-border-main-lemon: #f0f4c3; --ds-color-decorative-border-main-lilac: #e1bee7; --ds-color-decorative-border-main-mint: #afe0d1; --ds-color-decorative-border-main-misty: #bdc7da; --ds-color-decorative-border-main-peach: #fbcaba; --ds-color-decorative-border-main-sahara: #ffecb3; --ds-color-decorative-border-main-tea: #dcedc8; --ds-color-decorative-border-main-vanilla: #f0dab4; --ds-color-interactive-active-loyalty-hover: #004282; --ds-color-interactive-active-loyalty-pressed: #003569; --ds-color-interactive-active-loyalty-primary: #004f9b; --ds-color-interactive-active-main-hover: #0863cc; --ds-color-interactive-active-main-pressed: #0757b2; --ds-color-interactive-active-main-primary: #0970e6; --ds-color-interactive-active-marketplace-hover: #8a213c; --ds-color-interactive-active-marketplace-pressed: #701b31; --ds-color-interactive-active-marketplace-primary: #a42747; --ds-color-interactive-active-monochrome-hover: #2b2b2b; --ds-color-interactive-active-monochrome-pressed: #454545; --ds-color-interactive-active-monochrome-primary: #121212; --ds-color-interactive-active-negative-hover: #910b0f; --ds-color-interactive-active-negative-pressed: #78090c; --ds-color-interactive-active-negative-primary: #aa0d11; --ds-color-interactive-active-positive-hover: #264f17; --ds-color-interactive-active-positive-pressed: #1a360f; --ds-color-interactive-active-positive-primary: #33691e; --ds-color-interactive-active-promotion-hover: #ba0b1b; --ds-color-interactive-active-promotion-pressed: #a10a18; --ds-color-interactive-active-promotion-primary: #d30d1f; --ds-color-interactive-active-rating-hover: #e5a100; --ds-color-interactive-active-rating-pressed: #cc8f00; --ds-color-interactive-active-rating-primary: #ffb300; --ds-color-interactive-active-reversed-hover: #e5e5e5; --ds-color-interactive-active-reversed-pressed: #cccccc; --ds-color-interactive-active-reversed-primary: #ffffff; --ds-color-interactive-active-subtle-hover: #e6f1fe; --ds-color-interactive-active-subtle-pressed: #cee4fd; --ds-color-interactive-active-subtle-primary: #ffffff; --ds-color-interactive-default-background-disabled: #e5e5e5; --ds-color-interactive-default-background-prefilled: #f5faff; --ds-color-interactive-default-border-disabled: #e5e5e5; --ds-color-interactive-default-border-hover: #929292; --ds-color-interactive-default-border-pressed: #747474; --ds-color-interactive-default-content-disabled: #929292; --ds-color-interactive-default-reversed-content-disabled: #929292; } /* node_modules/.pnpm/@carrefour+design-system-tokens@2.104.0/node_modules/@carrefour/design-system-tokens/dist/css/breakpoint.css */ :root { --ds-breakpoint-tablet: 768px; --ds-breakpoint-desktop: 1280px; } /* node_modules/.pnpm/@carrefour+design-system-tokens@2.104.0/node_modules/@carrefour/design-system-tokens/dist/css/typography.css */ :root { --ds-font-family: "Ubuntu", "Open Sans", "sans-serif"; } /* node_modules/.pnpm/@carrefour+design-system-tokens@2.104.0/node_modules/@carrefour/design-system-tokens/dist/css/opacity.css */ :root { --ds-opacity-default: 100px; --ds-opacity-disabled: 40px; --ds-opacity-overlay: 50px; } /* node_modules/.pnpm/@carrefour+design-system-tokens@2.104.0/node_modules/@carrefour/design-system-tokens/dist/css/shadow.css */ :root { --ds-shadow-action: 2px 4px 12px rgba(18, 18, 18, 0.12); --ds-shadow-down: 0px -4px 16px rgba(18, 18, 18, 0.08); --ds-shadow-fixe: 2px 2px 8px rgba(18, 18, 18, 0.16); --ds-shadow-hover: 2px 4px 16px rgba(18, 18, 18, 0.16); --ds-shadow-overlay: 0px 0px 64px rgba(18, 18, 18, 0.6); --ds-shadow-press: 2px 2px 8px rgba(18, 18, 18, 0.16); --ds-shadow-raised: 0px 16px 64px rgba(18, 18, 18, 0.12), 0px 8px 24px rgba(18, 18, 18, 0.16); --ds-shadow-up: 0px 4px 16px rgba(18, 18, 18, 0.08); --ds-shadow-down-l: 0px -16px 64px rgba(18, 18, 18, 0.12), 0px -8px 24px rgba(18, 18, 18, 0.16); --ds-shadow-down-m: 0px -8px 16px rgba(18, 18, 18, 0.08), 0px -8px 16px rgba(18, 18, 18, 0.12); --ds-shadow-down-s: 0px -4px 16px rgba(18, 18, 18, 0.08); --ds-shadow-down-xs: 0px -2px 4px rgba(18, 18, 18, 0.08); --ds-shadow-up-l: 0px 16px 64px rgba(18, 18, 18, 0.12), 0px 8px 24px rgba(18, 18, 18, 0.16); --ds-shadow-up-m: 0px 8px 16px rgba(18, 18, 18, 0.08), 0px 8px 16px rgba(18, 18, 18, 0.12); --ds-shadow-up-s: 0px 4px 16px rgba(18, 18, 18, 0.08); --ds-shadow-up-xs: 0px 2px 4px rgba(18, 18, 18, 0.08); } /* node_modules/.pnpm/@carrefour+design-system-tokens@2.104.0/node_modules/@carrefour/design-system-tokens/dist/design-tokens.css */ /* node_modules/.pnpm/@carrefour+design-system-styles@0.172.0/node_modules/@carrefour/design-system-styles/dist/themes/default.css */ :root { --ds-border-radius-l: 1rem; --ds-border-radius-m: .5rem; --ds-border-radius-round: 12.5rem; --ds-border-radius-s: .25rem; --ds-border-radius-xl: 1.5rem; --ds-border-radius-xs: .125rem; --ds-sizing-l: 2rem; --ds-sizing-m: 1.5rem; --ds-sizing-s: 1rem; --ds-sizing-xl: 2.5rem; --ds-sizing-xs: .75rem; --ds-sizing-xxl: 3rem; --ds-sizing-xxs: .5rem; --ds-sizing-xxxl: 9rem; --ds-spacing-l: 2rem; --ds-spacing-m: 1.5rem; --ds-spacing-s: 1rem; --ds-spacing-xl: 2.5rem; --ds-spacing-xs: .5rem; --ds-spacing-xxl: 3rem; --ds-spacing-xxs: .25rem; --ds-spacing-xxxs: .125rem; } :root { --ds-color-interactive-background-accent-active: #121212; --ds-color-interactive-background-accent-disabled: #121212; --ds-color-interactive-background-accent-hover: #454545; --ds-color-interactive-background-accent-pressed: #696969; --ds-color-interactive-background-main-active: #0970e6; --ds-color-interactive-background-main-disabled: #0970e6; --ds-color-interactive-background-main-hover: #004e9b; --ds-color-interactive-background-main-pressed: #003161; --ds-color-interactive-background-negative-active: #df1116; --ds-color-interactive-background-negative-disabled: #df1116; --ds-color-interactive-background-negative-hover: #8f0004; --ds-color-interactive-background-negative-pressed: #470002; --ds-color-interactive-background-plain-active: #ffffff; --ds-color-interactive-background-plain-disabled: #ffffff; --ds-color-interactive-background-plain-hover: #ffffff; --ds-color-interactive-background-plain-pressed: #ffffff; --ds-color-interactive-background-preffiled: #e6f1fe; --ds-color-interactive-background-subtle-active: #ffffff; --ds-color-interactive-background-subtle-disabled: #ffffff; --ds-color-interactive-background-subtle-hover: #f5faff; --ds-color-interactive-background-subtle-pressed: #ebf4fe; --ds-color-interactive-background-input-readonly: #f7f7f7; --ds-color-interactive-border-accent-active: #121212; --ds-color-interactive-border-accent-disabled: #121212; --ds-color-interactive-border-accent-hover: #454545; --ds-color-interactive-border-accent-pressed: #696969; --ds-color-interactive-border-active: #d9d9d9; --ds-color-interactive-border-disabled: #d9d9d9; --ds-color-interactive-border-focus: #0970e6; --ds-color-interactive-border-hover: #b8b8b8; --ds-color-interactive-border-main-active: #0970e6; --ds-color-interactive-border-main-disabled: #0970e6; --ds-color-interactive-border-main-hover: #004e9b; --ds-color-interactive-border-main-pressed: #003161; --ds-color-interactive-border-negative-active: #df1116; --ds-color-interactive-border-negative-disabled: #df1116; --ds-color-interactive-border-negative-hover: #8f0004; --ds-color-interactive-border-negative-pressed: #470002; --ds-color-interactive-border-plain-active: #ffffff; --ds-color-interactive-border-plain-disabled: #ffffff; --ds-color-interactive-border-plain-hover: #ffffff; --ds-color-interactive-border-plain-pressed: #ffffff; --ds-color-interactive-border-pressed: #878787; --ds-color-interactive-content-accent-active: #121212; --ds-color-interactive-content-accent-disabled: #121212; --ds-color-interactive-content-accent-hover: #454545; --ds-color-interactive-content-accent-pressed: #696969; --ds-color-interactive-content-main-active: #0970e6; --ds-color-interactive-content-main-disabled: #0970e6; --ds-color-interactive-content-main-hover: #004e9b; --ds-color-interactive-content-main-pressed: #003161; --ds-color-interactive-content-negative-active: #df1116; --ds-color-interactive-content-negative-disabled: #df1116; --ds-color-interactive-content-negative-hover: #8f0004; --ds-color-interactive-content-negative-pressed: #470002; --ds-color-interactive-content-plain-active: #ffffff; --ds-color-interactive-content-plain-disabled: #ffffff; --ds-color-interactive-content-plain-hover: #ffffff; --ds-color-interactive-content-plain-pressed: #ffffff; --ds-color-interactive-content-subtle-active: #121212; --ds-color-interactive-content-subtle-disabled: #121212; --ds-color-interactive-content-subtle-hover: #121212; --ds-color-interactive-content-subtle-pressed: #121212; --ds-color-interactive-icon-accent-active: #121212; --ds-color-interactive-icon-accent-disabled: #121212; --ds-color-interactive-icon-accent-hover: #454545; --ds-color-interactive-icon-accent-pressed: #696969; --ds-color-interactive-icon-main-active: #0970e6; --ds-color-interactive-icon-main-disabled: #0970e6; --ds-color-interactive-icon-main-hover: #004e9b; --ds-color-interactive-icon-main-pressed: #003161; --ds-color-interactive-icon-negative-active: #df1116; --ds-color-interactive-icon-negative-disabled: #df1116; --ds-color-interactive-icon-negative-hover: #8f0004; --ds-color-interactive-icon-negative-pressed: #470002; --ds-color-interactive-icon-plain-active: #ffffff; --ds-color-interactive-icon-plain-disabled: #ffffff; --ds-color-interactive-icon-plain-hover: #ffffff; --ds-color-interactive-icon-plain-pressed: #ffffff; --ds-color-interactive-content-specific-loyalty-default: #004e9b; --ds-color-interactive-background-specific-loyalty: #e8f8ff; --ds-color-interactive-content-specific-club-default: #283583; } :root { --ds-color-persistent-background-functional-main-information: #173eb4; --ds-color-persistent-background-functional-main-negative: #df1116; --ds-color-persistent-background-functional-main-success: #2c815e; --ds-color-persistent-background-functional-main-warning: #cc4010; --ds-color-persistent-background-functional-reversed-information: #e8f8ff; --ds-color-persistent-background-functional-reversed-negative: #ffefef; --ds-color-persistent-background-functional-reversed-success: #f0faf6; --ds-color-persistent-background-functional-reversed-warning: #fff7f0; --ds-color-persistent-background-main-primary: #ffffff; --ds-color-persistent-background-main-secondary: #f7f7f7; --ds-color-persistent-background-main-tertiary: #f5faff; --ds-color-persistent-background-reversed-primary: #121212; --ds-color-persistent-background-reversed-secondary: #454545; --ds-color-persistent-border-functional-main-information: #173eb4; --ds-color-persistent-border-functional-main-negative: #df1116; --ds-color-persistent-border-functional-main-success: #2c815e; --ds-color-persistent-border-functional-main-warning: #cc4010; --ds-color-persistent-border-functional-reversed-information: #e8f8ff; --ds-color-persistent-border-functional-reversed-negative: #ffefef; --ds-color-persistent-border-functional-reversed-success: #f0faf6; --ds-color-persistent-border-functional-reversed-warning: #fff7f0; --ds-color-persistent-border-main-primary: #ebebeb; --ds-color-persistent-border-main-secondary: #d9d9d9; --ds-color-persistent-content-functional-main-information: #173eb4; --ds-color-persistent-content-functional-main-negative: #df1116; --ds-color-persistent-content-functional-main-success: #2c815e; --ds-color-persistent-content-functional-main-warning: #cc4010; --ds-color-persistent-content-functional-reversed-information: #e8f8ff; --ds-color-persistent-content-functional-reversed-negative: #ffefef; --ds-color-persistent-content-functional-reversed-success: #f0faf6; --ds-color-persistent-content-functional-reversed-warning: #fff7f0; --ds-color-persistent-content-main-primary: #121212; --ds-color-persistent-content-main-secondary: #454545; --ds-color-persistent-content-main-tertiary: #696969; --ds-color-persistent-content-reversed-primary: #ffffff; --ds-color-persistent-content-reversed-secondary: #f2f2f2; --ds-color-persistent-content-reversed-tertiary: #ebebeb; --ds-color-persistent-icon-functional-main-information: #173eb4; --ds-color-persistent-icon-functional-main-negative: #df1116; --ds-color-persistent-icon-functional-main-success: #2c815e; --ds-color-persistent-icon-functional-main-warning: #cc4010; --ds-color-persistent-icon-functional-reversed-information: #e8f8ff; --ds-color-persistent-icon-functional-reversed-negative: #ffefef; --ds-color-persistent-icon-functional-reversed-success: #f0faf6; --ds-color-persistent-icon-functional-reversed-warning: #fff7f0; --ds-color-persistent-icon-main-primary: #121212; --ds-color-persistent-icon-main-secondary: #454545; --ds-color-persistent-icon-main-tertiary: #696969; --ds-color-persistent-icon-reversed-primary: #ffffff; --ds-color-persistent-icon-reversed-secondary: #f2f2f2; --ds-color-persistent-icon-reversed-tertiary: #ebebeb; --ds-color-persistent-content-specific-loyalty-default: #004e9b; --ds-color-persistent-background-specific-loyalty: #e8f8ff; --ds-color-persistent-content-specific-club-default: #283583; } :root { --ds-color-interactive-background-button-filled-accent-active: #121212; --ds-color-interactive-background-button-filled-accent-disabled: #121212; --ds-color-interactive-background-button-filled-accent-hover: #454545; --ds-color-interactive-background-button-filled-accent-pressed: #696969; --ds-color-interactive-background-button-filled-accent-reversed-active: #ffffff; --ds-color-interactive-background-button-filled-accent-reversed-disabled: #ffffff; --ds-color-interactive-background-button-filled-accent-reversed-hover: #ffffff; --ds-color-interactive-background-button-filled-accent-reversed-pressed: #ffffff; --ds-color-interactive-background-button-filled-destructive-active: #df1116; --ds-color-interactive-background-button-filled-destructive-disabled: #df1116; --ds-color-interactive-background-button-filled-destructive-hover: #8f0004; --ds-color-interactive-background-button-filled-destructive-pressed: #470002; --ds-color-interactive-background-button-filled-destructive-reversed-active: #ffffff; --ds-color-interactive-background-button-filled-destructive-reversed-disabled: #ffffff; --ds-color-interactive-background-button-filled-destructive-reversed-hover: #ffffff; --ds-color-interactive-background-button-filled-destructive-reversed-pressed: #ffffff; --ds-color-interactive-background-button-filled-main-active: #0970e6; --ds-color-interactive-background-button-filled-main-disabled: #0970e6; --ds-color-interactive-background-button-filled-main-hover: #004e9b; --ds-color-interactive-background-button-filled-main-pressed: #003161; --ds-color-interactive-background-button-filled-main-reversed-active: #ffffff; --ds-color-interactive-background-button-filled-main-reversed-disabled: #ffffff; --ds-color-interactive-background-button-filled-main-reversed-hover: #ffffff; --ds-color-interactive-background-button-filled-main-reversed-pressed: #ffffff; --ds-color-interactive-background-button-outlined-accent-active: #ffffff; --ds-color-interactive-background-button-outlined-accent-disabled: #ffffff; --ds-color-interactive-background-button-outlined-accent-hover: #ffffff; --ds-color-interactive-background-button-outlined-accent-pressed: #ffffff; --ds-color-interactive-background-button-outlined-accent-reversed-active: #ffffff00; --ds-color-interactive-background-button-outlined-accent-reversed-disabled: #ffffff00; --ds-color-interactive-background-button-outlined-accent-reversed-hover: #ffffff00; --ds-color-interactive-background-button-outlined-accent-reversed-pressed: #ffffff00; --ds-color-interactive-background-button-outlined-destructive-active: #ffffff; --ds-color-interactive-background-button-outlined-destructive-disabled: #ffffff; --ds-color-interactive-background-button-outlined-destructive-hover: #ffffff; --ds-color-interactive-background-button-outlined-destructive-pressed: #ffffff; --ds-color-interactive-background-button-outlined-destructive-reversed-active: #ffffff00; --ds-color-interactive-background-button-outlined-destructive-reversed-disabled: #ffffff00; --ds-color-interactive-background-button-outlined-destructive-reversed-hover: #ffffff00; --ds-color-interactive-background-button-outlined-destructive-reversed-pressed: #ffffff00; --ds-color-interactive-background-button-outlined-main-active: #ffffff; --ds-color-interactive-background-button-outlined-main-disabled: #ffffff; --ds-color-interactive-background-button-outlined-main-hover: #ffffff; --ds-color-interactive-background-button-outlined-main-pressed: #ffffff; --ds-color-interactive-background-button-outlined-main-reversed-active: #ffffff00; --ds-color-interactive-background-button-outlined-main-reversed-disabled: #ffffff00; --ds-color-interactive-background-button-outlined-main-reversed-hover: #ffffff00; --ds-color-interactive-background-button-outlined-main-reversed-pressed: #ffffff00; --ds-color-interactive-background-button-transparent-accent-active: #ffffff00; --ds-color-interactive-background-button-transparent-accent-disabled: #ffffff00; --ds-color-interactive-background-button-transparent-accent-hover: #ffffff00; --ds-color-interactive-background-button-transparent-accent-pressed: #ffffff00; --ds-color-interactive-background-button-transparent-accent-reversed-active: #ffffff00; --ds-color-interactive-background-button-transparent-accent-reversed-disabled: #ffffff00; --ds-color-interactive-background-button-transparent-accent-reversed-hover: #ffffff00; --ds-color-interactive-background-button-transparent-accent-reversed-pressed: #ffffff00; --ds-color-interactive-background-button-transparent-destructive-active: #ffffff00; --ds-color-interactive-background-button-transparent-destructive-disabled: #ffffff00; --ds-color-interactive-background-button-transparent-destructive-hover: #ffffff00; --ds-color-interactive-background-button-transparent-destructive-pressed: #ffffff00; --ds-color-interactive-background-button-transparent-destructive-reversed-active: #ffffff00; --ds-color-interactive-background-button-transparent-destructive-reversed-disabled: #ffffff00; --ds-color-interactive-background-button-transparent-destructive-reversed-hover: #ffffff00; --ds-color-interactive-background-button-transparent-destructive-reversed-pressed: #ffffff00; --ds-color-interactive-background-button-transparent-main-active: #ffffff00; --ds-color-interactive-background-button-transparent-main-disabled: #ffffff00; --ds-color-interactive-background-button-transparent-main-hover: #ffffff00; --ds-color-interactive-background-button-transparent-main-pressed: #ffffff00; --ds-color-interactive-background-button-transparent-main-reversed-active: #ffffff00; --ds-color-interactive-background-button-transparent-main-reversed-disabled: #ffffff00; --ds-color-interactive-background-button-transparent-main-reversed-hover: #ffffff00; --ds-color-interactive-background-button-transparent-main-reversed-pressed: #ffffff00; --ds-color-interactive-background-chip-active: #ffffff; --ds-color-interactive-background-chip-disabled: #ffffff; --ds-color-interactive-background-chip-hover: #e6f1fe; --ds-color-interactive-background-chip-pressed: #bddbff; --ds-color-interactive-background-chip-selected-active: #0970e6; --ds-color-interactive-background-chip-selected-hover: #004e9b; --ds-color-interactive-background-chip-selected-pressed: #003161; --ds-color-interactive-background-icon-button-filled-accent-active: #121212; --ds-color-interactive-background-icon-button-filled-accent-disabled: #121212; --ds-color-interactive-background-icon-button-filled-accent-hover: #454545; --ds-color-interactive-background-icon-button-filled-accent-pressed: #696969; --ds-color-interactive-background-icon-button-filled-accent-reversed-active: #ffffff; --ds-color-interactive-background-icon-button-filled-accent-reversed-disabled: #ffffff; --ds-color-interactive-background-icon-button-filled-accent-reversed-hover: #ffffff; --ds-color-interactive-background-icon-button-filled-accent-reversed-pressed: #ffffff; --ds-color-interactive-background-icon-button-filled-destructive-active: #df1116; --ds-color-interactive-background-icon-button-filled-destructive-disabled: #df1116; --ds-color-interactive-background-icon-button-filled-destructive-hover: #8f0004; --ds-color-interactive-background-icon-button-filled-destructive-pressed: #470002; --ds-color-interactive-background-icon-button-filled-destructive-reversed-active: #ffffff; --ds-color-interactive-background-icon-button-filled-destructive-reversed-disabled: #ffffff; --ds-color-interactive-background-icon-button-filled-destructive-reversed-hover: #ffffff; --ds-color-interactive-background-icon-button-filled-destructive-reversed-pressed: #ffffff; --ds-color-interactive-background-icon-button-filled-main-active: #0970e6; --ds-color-interactive-background-icon-button-filled-main-disabled: #0970e6; --ds-color-interactive-background-icon-button-filled-main-hover: #004e9b; --ds-color-interactive-background-icon-button-filled-main-pressed: #003161; --ds-color-interactive-background-icon-button-filled-main-reversed-active: #ffffff; --ds-color-interactive-background-icon-button-filled-main-reversed-disabled: #ffffff; --ds-color-interactive-background-icon-button-filled-main-reversed-hover: #ffffff; --ds-color-interactive-background-icon-button-filled-main-reversed-pressed: #ffffff; --ds-color-interactive-background-icon-button-outlined-accent-active: #ffffff; --ds-color-interactive-background-icon-button-outlined-accent-disabled: #ffffff; --ds-color-interactive-background-icon-button-outlined-accent-hover: #ffffff; --ds-color-interactive-background-icon-button-outlined-accent-pressed: #ffffff; --ds-color-interactive-background-icon-button-outlined-accent-reversed-active: #ffffff00; --ds-color-interactive-background-icon-button-outlined-accent-reversed-disabled: #ffffff00; --ds-color-interactive-background-icon-button-outlined-accent-reversed-hover: #ffffff00; --ds-color-interactive-background-icon-button-outlined-accent-reversed-pressed: #ffffff00; --ds-color-interactive-background-icon-button-outlined-destructive-active: #ffffff; --ds-color-interactive-background-icon-button-outlined-destructive-disabled: #ffffff; --ds-color-interactive-background-icon-button-outlined-destructive-hover: #ffffff; --ds-color-interactive-background-icon-button-outlined-destructive-pressed: #ffffff; --ds-color-interactive-background-icon-button-outlined-destructive-reversed-active: #ffffff00; --ds-color-interactive-background-icon-button-outlined-destructive-reversed-disabled: #ffffff00; --ds-color-interactive-background-icon-button-outlined-destructive-reversed-hover: #ffffff00; --ds-color-interactive-background-icon-button-outlined-destructive-reversed-pressed: #ffffff00; --ds-color-interactive-background-icon-button-outlined-main-active: #ffffff; --ds-color-interactive-background-icon-button-outlined-main-disabled: #ffffff; --ds-color-interactive-background-icon-button-outlined-main-hover: #ffffff; --ds-color-interactive-background-icon-button-outlined-main-pressed: #ffffff; --ds-color-interactive-background-icon-button-outlined-main-reversed-active: #ffffff00; --ds-color-interactive-background-icon-button-outlined-main-reversed-disabled: #ffffff00; --ds-color-interactive-background-icon-button-outlined-main-reversed-hover: #ffffff00; --ds-color-interactive-background-icon-button-outlined-main-reversed-pressed: #ffffff00; --ds-color-interactive-background-input-active: #ffffff; --ds-color-interactive-background-input-addon-active: #f7f7f7; --ds-color-interactive-background-input-addon-default: #f7f7f7; --ds-color-interactive-background-input-addon-error: #ffefef; --ds-color-interactive-background-input-addon-hover: #d9d9d9; --ds-color-interactive-background-input-addon-pressed: #b8b8b8; --ds-color-interactive-background-input-autosuggest-item-active: #ffffff; --ds-color-interactive-background-input-autosuggest-item-hover: #f7f7f7; --ds-color-interactive-background-input-autosuggest-item-pressed: #ebebeb; --ds-color-interactive-background-input-calendar-active: #ffffff; --ds-color-interactive-background-input-calendar-disabled: #f2f2f2; --ds-color-interactive-background-input-calendar-hover: #f7f7f7; --ds-color-interactive-background-input-calendar-pressed: #f2f2f2; --ds-color-interactive-background-input-calendar-range-active: #f5faff; --ds-color-interactive-background-input-calendar-range-hover: #f5faff; --ds-color-interactive-background-input-calendar-range-pressed: #f5faff; --ds-color-interactive-background-input-calendar-selected-active: #0970e6; --ds-color-interactive-background-input-calendar-selected-hover: #004e9b; --ds-color-interactive-background-input-calendar-selected-pressed: #003161; --ds-color-interactive-background-input-checkbox-selected-active: #0970e6; --ds-color-interactive-background-input-checkbox-selected-disabled: #0970e6; --ds-color-interactive-background-input-checkbox-selected-hover: #004e9b; --ds-color-interactive-background-input-checkbox-selected-pressed: #003161; --ds-color-interactive-background-input-date-picker-shortcut-active: #ffffff; --ds-color-interactive-background-input-date-picker-shortcut-disabled: #ffffff; --ds-color-interactive-background-input-date-picker-shortcut-hover: #f2f2f2; --ds-color-interactive-background-input-date-picker-shortcut-pressed: #ebebeb; --ds-color-interactive-background-input-date-picker-shortcut-selected-active: #f2f2f2; --ds-color-interactive-background-input-date-picker-shortcut-selected-hover: #ebebeb; --ds-color-interactive-background-input-date-picker-shortcut-selected-pressed: #d9d9d9; --ds-color-interactive-background-input-disabled: #ffffff; --ds-color-interactive-background-input-error-active: #ffffff; --ds-color-interactive-background-input-error-hover: #ffffff; --ds-color-interactive-background-input-error-pressed: #ffffff; --ds-color-interactive-background-input-hover: #ffffff; --ds-color-interactive-background-input-prefilled: #e6f1fe; --ds-color-interactive-background-input-pressed: #ffffff; --ds-color-interactive-background-input-radio-selected-active: #0970e6; --ds-color-interactive-background-input-radio-selected-disabled: #0970e6; --ds-color-interactive-background-input-radio-selected-hover: #004e9b; --ds-color-interactive-background-input-radio-selected-pressed: #003161; --ds-color-interactive-background-input-range-handle-active: #ffffff; --ds-color-interactive-background-input-range-handle-hover: #ffffff; --ds-color-interactive-background-input-range-handle-pressed: #ffffff; --ds-color-interactive-background-input-range-track-active: #ebebeb; --ds-color-interactive-background-input-range-track-selected: #0970e6; --ds-color-interactive-background-input-select-button-accent-active: #ffffff; --ds-color-interactive-background-input-select-button-accent-disabled: #ffffff; --ds-color-interactive-background-input-select-button-accent-hover: #ffffff; --ds-color-interactive-background-input-select-button-accent-pressed: #ffffff; --ds-color-interactive-background-input-select-button-main-active: #ffffff; --ds-color-interactive-background-input-select-button-main-disabled: #ffffff; --ds-color-interactive-background-input-select-button-main-hover: #ffffff; --ds-color-interactive-background-input-select-button-main-pressed: #ffffff; --ds-color-interactive-background-input-select-button-selected-accent-active: #121212; --ds-color-interactive-background-input-select-button-selected-accent-hover: #454545; --ds-color-interactive-background-input-select-button-selected-accent-pressed: #696969; --ds-color-interactive-background-input-select-button-selected-main-active: #0970e6; --ds-color-interactive-background-input-select-button-selected-main-hover: #004e9b; --ds-color-interactive-background-input-select-button-selected-main-pressed: #003161; --ds-color-interactive-background-input-toggle-active: #d9d9d9; --ds-color-interactive-background-input-toggle-disabled: #d9d9d9; --ds-color-interactive-background-input-toggle-error-active: #df1116; --ds-color-interactive-background-input-toggle-error-hover: #df1116; --ds-color-interactive-background-input-toggle-error-pressed: #df1116; --ds-color-interactive-background-input-toggle-handle: #ffffff; --ds-color-interactive-background-input-toggle-hover: #b8b8b8; --ds-color-interactive-background-input-toggle-pressed: #878787; --ds-color-interactive-background-input-toggle-selected-active: #0970e6; --ds-color-interactive-background-input-toggle-selected-disabled: #0970e6; --ds-color-interactive-background-input-toggle-selected-hover: #004e9b; --ds-color-interactive-background-input-toggle-selected-pressed: #003161; --ds-color-interactive-background-navigation-item-active: #ffffff; --ds-color-interactive-background-navigation-item-disabled: #ffffff; --ds-color-interactive-background-navigation-item-hover: #e6f1fe; --ds-color-interactive-background-navigation-item-pressed: #bddbff; --ds-color-interactive-background-navigation-item-selected-active: #e6f1fe; --ds-color-interactive-background-navigation-item-selected-hover: #e6f1fe; --ds-color-interactive-background-navigation-item-selected-pressed: #bddbff; --ds-color-interactive-background-pagination-active: #ffffff; --ds-color-interactive-background-pagination-disabled: #ffffff; --ds-color-interactive-background-pagination-hover: #e6f1fe; --ds-color-interactive-background-pagination-pressed: #bddbff; --ds-color-interactive-background-pagination-selected-active: #0970e6; --ds-color-interactive-background-pagination-selected-hover: #004e9b; --ds-color-interactive-background-pagination-selected-pressed: #003161; --ds-color-interactive-background-quantity-button-active: #0970e6; --ds-color-interactive-background-quantity-button-disabled: #0970e6; --ds-color-interactive-background-quantity-button-hover: #004e9b; --ds-color-interactive-background-quantity-button-modifier-active: #0970e6; --ds-color-interactive-background-quantity-button-modifier-focus: #004e9b; --ds-color-interactive-background-quantity-button-modifier-hover: #004e9b; --ds-color-interactive-background-quantity-button-modifier-pressed: #003161; --ds-color-interactive-background-quantity-button-pressed: #003161; --ds-color-interactive-background-rating-active: #ffbf29; --ds-color-interactive-background-rating-hover: #f5ac00; --ds-color-interactive-background-rating-pressed: #bd8400; --ds-color-interactive-background-scrollbar-active: #d9d9d9; --ds-color-interactive-background-scrollbar-hover: #878787; --ds-color-interactive-background-segmented-control-item-active: #f2f2f2; --ds-color-interactive-background-segmented-control-item-disabled: #f2f2f2; --ds-color-interactive-background-segmented-control-item-hover: #ebebeb; --ds-color-interactive-background-segmented-control-item-pressed: #d9d9d9; --ds-color-interactive-background-segmented-control-item-selected-active: #0970e6; --ds-color-interactive-background-segmented-control-item-selected-disabled: #0970e6; --ds-color-interactive-background-segmented-control-item-selected-hover: #004e9b; --ds-color-interactive-background-segmented-control-item-selected-pressed: #003161; --ds-color-interactive-background-segmented-control-main: #f2f2f2; --ds-color-interactive-background-select-button-active: #ffffff; --ds-color-interactive-background-select-button-hover: #ffffff; --ds-color-interactive-background-select-button-pressed: #ffffff; --ds-color-interactive-background-select-button-selected-active: #121212; --ds-color-interactive-background-select-button-selected-hover: #454545; --ds-color-interactive-background-select-button-selected-pressed: #696969; --ds-color-interactive-background-stepper-item-default-active: #121212; --ds-color-interactive-background-stepper-item-default-hover: #454545; --ds-color-interactive-background-stepper-item-default-pressed: #696969; --ds-color-interactive-background-stepper-item-default-reversed-active: #ffffff; --ds-color-interactive-background-stepper-item-default-reversed-disabled: #ffffff; --ds-color-interactive-background-stepper-item-default-reversed-hover: #ffffff; --ds-color-interactive-background-stepper-item-default-reversed-pressed: #ffffff; --ds-color-interactive-background-stepper-item-negative-active: #df1116; --ds-color-interactive-background-stepper-item-negative-hover: #8f0004; --ds-color-interactive-background-stepper-item-negative-pressed: #470002; --ds-color-interactive-background-stepper-item-negative-reversed-active: #ffffff; --ds-color-interactive-background-stepper-item-negative-reversed-disabled: #ffffff; --ds-color-interactive-background-stepper-item-negative-reversed-hover: #ffffff; --ds-color-interactive-background-stepper-item-negative-reversed-pressed: #ffffff; --ds-color-interactive-background-stepper-item-positive-active: #2c815e; --ds-color-interactive-background-stepper-item-positive-hover: #155138; --ds-color-interactive-background-stepper-item-positive-pressed: #051e14; --ds-color-interactive-background-stepper-item-positive-reversed-active: #ffffff; --ds-color-interactive-background-stepper-item-positive-reversed-disabled: #ffffff; --ds-color-interactive-background-stepper-item-positive-reversed-hover: #ffffff; --ds-color-interactive-background-stepper-item-positive-reversed-pressed: #ffffff; --ds-color-interactive-background-visual-button-active: #ffffff; --ds-color-interactive-background-visual-button-disabled: #ffffff; --ds-color-interactive-background-visual-button-hover: #ffffff; --ds-color-interactive-background-visual-button-pressed: #ffffff; --ds-color-interactive-border-button-outlined-accent-active: #121212; --ds-color-interactive-border-button-outlined-accent-disabled: #121212; --ds-color-interactive-border-button-outlined-accent-hover: #454545; --ds-color-interactive-border-button-outlined-accent-pressed: #696969; --ds-color-interactive-border-button-outlined-accent-reversed-active: #ffffff; --ds-color-interactive-border-button-outlined-accent-reversed-disabled: #ffffff; --ds-color-interactive-border-button-outlined-accent-reversed-hover: #ebebeb; --ds-color-interactive-border-button-outlined-accent-reversed-pressed: #d9d9d9; --ds-color-interactive-border-button-outlined-destructive-active: #df1116; --ds-color-interactive-border-button-outlined-destructive-disabled: #df1116; --ds-color-interactive-border-button-outlined-destructive-hover: #8f0004; --ds-color-interactive-border-button-outlined-destructive-pressed: #470002; --ds-color-interactive-border-button-outlined-destructive-reversed-active: #ffffff; --ds-color-interactive-border-button-outlined-destructive-reversed-disabled: #ffffff; --ds-color-interactive-border-button-outlined-destructive-reversed-hover: #ebebeb; --ds-color-interactive-border-button-outlined-destructive-reversed-pressed: #d9d9d9; --ds-color-interactive-border-chip-active: #ebebeb; --ds-color-interactive-border-chip-disabled: #ebebeb; --ds-color-interactive-border-chip-hover: #bddbff; --ds-color-interactive-border-chip-pressed: #62a8f9; --ds-color-interactive-border-icon-button-outlined-accent-active: #121212; --ds-color-interactive-border-icon-button-outlined-accent-disabled: #121212; --ds-color-interactive-border-icon-button-outlined-accent-hover: #454545; --ds-color-interactive-border-icon-button-outlined-accent-pressed: #696969; --ds-color-interactive-border-icon-button-outlined-accent-reversed-active: #ffffff; --ds-color-interactive-border-icon-button-outlined-accent-reversed-disabled: #ffffff; --ds-color-interactive-border-icon-button-outlined-accent-reversed-hover: #ebebeb; --ds-color-interactive-border-icon-button-outlined-accent-reversed-pressed: #d9d9d9; --ds-color-interactive-border-icon-button-outlined-destructive-active: #df1116; --ds-color-interactive-border-icon-button-outlined-destructive-disabled: #df1116; --ds-color-interactive-border-icon-button-outlined-destructive-hover: #8f0004; --ds-color-interactive-border-icon-button-outlined-destructive-pressed: #470002; --ds-color-interactive-border-icon-button-outlined-destructive-reversed-active: #ffffff; --ds-color-interactive-border-icon-button-outlined-destructive-reversed-disabled: #ffffff; --ds-color-interactive-border-icon-button-outlined-destructive-reversed-hover: #ebebeb; --ds-color-interactive-border-icon-button-outlined-destructive-reversed-pressed: #d9d9d9; --ds-color-interactive-border-icon-button-outlined-main-active: #0970e6; --ds-color-interactive-border-icon-button-outlined-main-disabled: #0970e6; --ds-color-interactive-border-icon-button-outlined-main-hover: #004e9b; --ds-color-interactive-border-icon-button-outlined-main-pressed: #003161; --ds-color-interactive-border-icon-button-outlined-main-reversed-active: #ffffff; --ds-color-interactive-border-icon-button-outlined-main-reversed-disabled: #ffffff; --ds-color-interactive-border-icon-button-outlined-main-reversed-hover: #ebebeb; --ds-color-interactive-border-icon-button-outlined-main-reversed-pressed: #d9d9d9; --ds-color-interactive-border-input-active: #d9d9d9; --ds-color-interactive-border-input-button-select-accent-active: #d9d9d9; --ds-color-interactive-border-input-button-select-accent-disabled: #d9d9d9; --ds-color-interactive-border-input-button-select-accent-hover: #a1a1a1; --ds-color-interactive-border-input-button-select-accent-pressed: #878787; --ds-color-interactive-border-input-button-select-main-active: #0970e6; --ds-color-interactive-border-input-button-select-main-disabled: #bddbff; --ds-color-interactive-border-input-button-select-main-hover: #004e9b; --ds-color-interactive-border-input-button-select-main-pressed: #003161; --ds-color-interactive-border-input-button-select-selected-accent-active: #121212; --ds-color-interactive-border-input-button-select-selected-accent-hover: #454545; --ds-color-interactive-border-input-button-select-selected-accent-pressed: #696969; --ds-color-interactive-border-input-button-select-selected-main-active: #0970e6; --ds-color-interactive-border-input-button-select-selected-main-hover: #004e9b; --ds-color-interactive-border-input-button-select-selected-main-pressed: #003161; --ds-color-interactive-border-input-button-select-slash-accent: #121212; --ds-color-interactive-border-input-button-select-slash-main: #0970e6; --ds-color-interactive-border-input-checkbox-selected-active: #0970e6; --ds-color-interactive-border-input-checkbox-selected-disabled: #0970e6; --ds-color-interactive-border-input-checkbox-selected-hover: #004e9b; --ds-color-interactive-border-input-checkbox-selected-pressed: #003161; --ds-color-interactive-border-input-disabled: #d9d9d9; --ds-color-interactive-border-input-ds-color-swatch-selected: #121212; --ds-color-interactive-border-input-ds-color-swatch-slash: #121212; --ds-color-interactive-border-input-error-active: #df1116; --ds-color-interactive-border-input-error-hover: #df1116; --ds-color-interactive-border-input-error-pressed: #df1116; --ds-color-interactive-border-input-focus: #0970e6; --ds-color-interactive-border-input-hover: #b8b8b8; --ds-color-interactive-border-input-pressed: #878787; --ds-color-interactive-border-input-radio-selected-active: #0970e6; --ds-color-interactive-border-input-radio-selected-disabled: #0970e6; --ds-color-interactive-border-input-radio-selected-hover: #004e9b; --ds-color-interactive-border-input-radio-selected-pressed: #003161; --ds-color-interactive-border-input-range-handle-active: #0970e6; --ds-color-interactive-border-input-range-handle-hover: #004e9b; --ds-color-interactive-border-input-range-handle-pressed: #003161; --ds-color-interactive-border-navigation-item-hover: #004e9b; --ds-color-interactive-border-navigation-item-pressed: #003161; --ds-color-interactive-border-navigation-item-selected-active: #0970e6; --ds-color-interactive-border-navigation-item-selected-hover: #004e9b; --ds-color-interactive-border-navigation-item-selected-pressed: #003161; --ds-color-interactive-border-select-button-active: #d9d9d9; --ds-color-interactive-border-select-button-hover: #b8b8b8; --ds-color-interactive-border-select-button-pressed: #878787; --ds-color-interactive-border-stepper-item-default-active: #121212; --ds-color-interactive-border-stepper-item-default-disabled: #121212; --ds-color-interactive-border-stepper-item-default-hover: #454545; --ds-color-interactive-border-stepper-item-default-pressed: #696969; --ds-color-interactive-border-stepper-item-negative-active: #df1116; --ds-color-interactive-border-stepper-item-negative-disabled: #df1116; --ds-color-interactive-border-stepper-item-negative-hover: #8f0004; --ds-color-interactive-border-stepper-item-negative-pressed: #470002; --ds-color-interactive-border-stepper-item-positive-active: #2c815e; --ds-color-interactive-border-stepper-item-positive-disabled: #2c815e; --ds-color-interactive-border-stepper-item-positive-hover: #155138; --ds-color-interactive-border-stepper-item-positive-pressed: #051e14; --ds-color-interactive-border-tab-active: #d9d9d9; --ds-color-interactive-border-tab-disabled: #d9d9d9; --ds-color-interactive-border-tab-hover: #b8b8b8; --ds-color-interactive-border-tab-pressed: #878787; --ds-color-interactive-border-tab-selected-active: #0970e6; --ds-color-interactive-border-tab-selected-disabled: #0970e6; --ds-color-interactive-border-tab-selected-hover: #004e9b; --ds-color-interactive-border-tab-selected-pressed: #003161; --ds-color-interactive-icon-button-filled-accent-active: #ffffff; --ds-color-interactive-icon-button-filled-accent-disabled: #ffffff; --ds-color-interactive-icon-button-filled-accent-hover: #ffffff; --ds-color-interactive-icon-button-filled-accent-pressed: #ffffff; --ds-color-interactive-icon-button-filled-accent-reversed-active: #121212; --ds-color-interactive-icon-button-filled-accent-reversed-disabled: #121212; --ds-color-interactive-icon-button-filled-accent-reversed-hover: #454545; --ds-color-interactive-icon-button-filled-accent-reversed-pressed: #696969; --ds-color-interactive-icon-button-filled-destructive-active: #ffffff; --ds-color-interactive-icon-button-filled-destructive-disabled: #ffffff; --ds-color-interactive-icon-button-filled-destructive-hover: #ffffff; --ds-color-interactive-icon-button-filled-destructive-pressed: #ffffff; --ds-color-interactive-icon-button-filled-destructive-reversed-active: #df1116; --ds-color-interactive-icon-button-filled-destructive-reversed-disabled: #df1116; --ds-color-interactive-icon-button-filled-destructive-reversed-hover: #8f0004; --ds-color-interactive-icon-button-filled-destructive-reversed-pressed: #470002; --ds-color-interactive-icon-button-filled-main-active: #ffffff; --ds-color-interactive-icon-button-filled-main-disabled: #ffffff; --ds-color-interactive-icon-button-filled-main-hover: #ffffff; --ds-color-interactive-icon-button-filled-main-pressed: #ffffff; --ds-color-interactive-icon-button-filled-main-reversed-active: #0970e6; --ds-color-interactive-icon-button-filled-main-reversed-disabled: #0970e6; --ds-color-interactive-icon-button-filled-main-reversed-hover: #004e9b; --ds-color-interactive-icon-button-filled-main-reversed-pressed: #003161; --ds-color-interactive-icon-button-main-active: #0970e6; --ds-color-interactive-icon-button-main-disabled: #0970e6; --ds-color-interactive-icon-button-main-hover: #004e9b; --ds-color-interactive-icon-button-main-pressed: #003161; --ds-color-interactive-icon-button-main-reversed-active: #ffffff; --ds-color-interactive-icon-button-main-reversed-disabled: #ffffff; --ds-color-interactive-icon-button-main-reversed-hover: #ebebeb; --ds-color-interactive-icon-button-main-reversed-pressed: #d9d9d9; --ds-color-interactive-icon-button-outlined-accent-active: #121212; --ds-color-interactive-icon-button-outlined-accent-disabled: #121212; --ds-color-interactive-icon-button-outlined-accent-hover: #454545; --ds-color-interactive-icon-button-outlined-accent-pressed: #696969; --ds-color-interactive-icon-button-outlined-accent-reversed-active: #ffffff; --ds-color-interactive-icon-button-outlined-accent-reversed-disabled: #ffffff; --ds-color-interactive-icon-button-outlined-accent-reversed-hover: #ebebeb; --ds-color-interactive-icon-button-outlined-accent-reversed-pressed: #d9d9d9; --ds-color-interactive-icon-button-outlined-destructive-active: #df1116; --ds-color-interactive-icon-button-outlined-destructive-disabled: #df1116; --ds-color-interactive-icon-button-outlined-destructive-hover: #8f0004; --ds-color-interactive-icon-button-outlined-destructive-pressed: #470002; --ds-color-interactive-icon-button-outlined-destructive-reversed-active: #ffffff; --ds-color-interactive-icon-button-outlined-destructive-reversed-disabled: #ffffff; --ds-color-interactive-icon-button-outlined-destructive-reversed-hover: #ebebeb; --ds-color-interactive-icon-button-outlined-destructive-reversed-pressed: #d9d9d9; --ds-color-interactive-icon-button-outlined-main-active: #0970e6; --ds-color-interactive-icon-button-outlined-main-disabled: #0970e6; --ds-color-interactive-icon-button-outlined-main-hover: #004e9b; --ds-color-interactive-icon-button-outlined-main-pressed: #003161; --ds-color-interactive-icon-button-outlined-main-reversed-active: #ffffff; --ds-color-interactive-icon-button-outlined-main-reversed-disabled: #ffffff; --ds-color-interactive-icon-button-outlined-main-reversed-hover: #ebebeb; --ds-color-interactive-icon-button-outlined-main-reversed-pressed: #d9d9d9; --ds-color-interactive-icon-button-transparent-accent-active: #121212; --ds-color-interactive-icon-button-transparent-accent-disabled: #121212; --ds-color-interactive-icon-button-transparent-accent-hover: #454545; --ds-color-interactive-icon-button-transparent-accent-pressed: #696969; --ds-color-interactive-icon-button-transparent-accent-reversed-active: #ffffff; --ds-color-interactive-icon-button-transparent-accent-reversed-disabled: #ffffff; --ds-color-interactive-icon-button-transparent-accent-reversed-hover: #ebebeb; --ds-color-interactive-icon-button-transparent-accent-reversed-pressed: #d9d9d9; --ds-color-interactive-icon-button-transparent-destructive-active: #df1116; --ds-color-interactive-icon-button-transparent-destructive-disabled: #df1116; --ds-color-interactive-icon-button-transparent-destructive-hover: #8f0004; --ds-color-interactive-icon-button-transparent-destructive-pressed: #470002; --ds-color-interactive-icon-button-transparent-destructive-reversed-active: #ffffff; --ds-color-interactive-icon-button-transparent-destructive-reversed-disabled: #ffffff; --ds-color-interactive-icon-button-transparent-destructive-reversed-hover: #ebebeb; --ds-color-interactive-icon-button-transparent-destructive-reversed-pressed: #d9d9d9; --ds-color-interactive-icon-button-transparent-main-active: #0970e6; --ds-color-interactive-icon-button-transparent-main-disabled: #0970e6; --ds-color-interactive-icon-button-transparent-main-hover: #004e9b; --ds-color-interactive-icon-button-transparent-main-pressed: #003161; --ds-color-interactive-icon-button-transparent-main-reversed-active: #ffffff; --ds-color-interactive-icon-button-transparent-main-reversed-disabled: #ffffff; --ds-color-interactive-icon-button-transparent-main-reversed-hover: #ebebeb; --ds-color-interactive-icon-button-transparent-main-reversed-pressed: #d9d9d9; --ds-color-interactive-icon-chip-active: #121212; --ds-color-interactive-icon-chip-disabled: #121212; --ds-color-interactive-icon-chip-hover: #121212; --ds-color-interactive-icon-chip-modifier-active: #0970e6; --ds-color-interactive-icon-chip-modifier-hover: #004e9b; --ds-color-interactive-icon-chip-modifier-pressed: #003161; --ds-color-interactive-icon-chip-pressed: #121212; --ds-color-interactive-icon-chip-selected-active: #ffffff; --ds-color-interactive-icon-chip-selected-hover: #ffffff; --ds-color-interactive-icon-chip-selected-pressed: #ffffff; --ds-color-interactive-icon-icon-button-filled-accent-active: #ffffff; --ds-color-interactive-icon-icon-button-filled-accent-disabled: #ffffff; --ds-color-interactive-icon-icon-button-filled-accent-hover: #ffffff; --ds-color-interactive-icon-icon-button-filled-accent-pressed: #ffffff; --ds-color-interactive-icon-icon-button-filled-accent-reversed-active: #121212; --ds-color-interactive-icon-icon-button-filled-accent-reversed-disabled: #121212; --ds-color-interactive-icon-icon-button-filled-accent-reversed-hover: #454545; --ds-color-interactive-icon-icon-button-filled-accent-reversed-pressed: #696969; --ds-color-interactive-icon-icon-button-filled-destructive-active: #ffffff; --ds-color-interactive-icon-icon-button-filled-destructive-disabled: #ffffff; --ds-color-interactive-icon-icon-button-filled-destructive-hover: #ffffff; --ds-color-interactive-icon-icon-button-filled-destructive-pressed: #ffffff; --ds-color-interactive-icon-icon-button-filled-destructive-reversed-active: #df1116; --ds-color-interactive-icon-icon-button-filled-destructive-reversed-disabled: #df1116; --ds-color-interactive-icon-icon-button-filled-destructive-reversed-hover: #8f0004; --ds-color-interactive-icon-icon-button-filled-destructive-reversed-pressed: #470002; --ds-color-interactive-icon-icon-button-filled-main-active: #ffffff; --ds-color-interactive-icon-icon-button-filled-main-disabled: #ffffff; --ds-color-interactive-icon-icon-button-filled-main-hover: #ffffff; --ds-color-interactive-icon-icon-button-filled-main-pressed: #ffffff; --ds-color-interactive-icon-icon-button-filled-main-reversed-active: #0970e6; --ds-color-interactive-icon-icon-button-filled-main-reversed-disabled: #0970e6; --ds-color-interactive-icon-icon-button-filled-main-reversed-hover: #004e9b; --ds-color-interactive-icon-icon-button-filled-main-reversed-pressed: #003161; --ds-color-interactive-icon-icon-button-outlined-accent-active: #121212; --ds-color-interactive-icon-icon-button-outlined-accent-disabled: #121212; --ds-color-interactive-icon-icon-button-outlined-accent-hover: #454545; --ds-color-interactive-icon-icon-button-outlined-accent-pressed: #696969; --ds-color-interactive-icon-icon-button-outlined-accent-reversed-active: #ffffff; --ds-color-interactive-icon-icon-button-outlined-accent-reversed-disabled: #ffffff; --ds-color-interactive-icon-icon-button-outlined-accent-reversed-hover: #ebebeb; --ds-color-interactive-icon-icon-button-outlined-accent-reversed-pressed: #d9d9d9; --ds-color-interactive-icon-icon-button-outlined-destructive-active: #df1116; --ds-color-interactive-icon-icon-button-outlined-destructive-disabled: #df1116; --ds-color-interactive-icon-icon-button-outlined-destructive-hover: #8f0004; --ds-color-interactive-icon-icon-button-outlined-destructive-pressed: #470002; --ds-color-interactive-icon-icon-button-outlined-destructive-reversed-active: #ffffff; --ds-color-interactive-icon-icon-button-outlined-destructive-reversed-disabled: #ffffff; --ds-color-interactive-icon-icon-button-outlined-destructive-reversed-hover: #ebebeb; --ds-color-interactive-icon-icon-button-outlined-destructive-reversed-pressed: #d9d9d9; --ds-color-interactive-icon-icon-button-outlined-main-active: #0970e6; --ds-color-interactive-icon-icon-button-outlined-main-disabled: #0970e6; --ds-color-interactive-icon-icon-button-outlined-main-hover: #004e9b; --ds-color-interactive-icon-icon-button-outlined-main-pressed: #003161; --ds-color-interactive-icon-icon-button-outlined-main-reversed-active: #ffffff; --ds-color-interactive-icon-icon-button-outlined-main-reversed-disabled: #ffffff; --ds-color-interactive-icon-icon-button-outlined-main-reversed-hover: #ebebeb; --ds-color-interactive-icon-icon-button-outlined-main-reversed-pressed: #d9d9d9; --ds-color-interactive-icon-icon-button-transparent-accent-active: #121212; --ds-color-interactive-icon-icon-button-transparent-accent-disabled: #121212; --ds-color-interactive-icon-icon-button-transparent-accent-hover: #454545; --ds-color-interactive-icon-icon-button-transparent-accent-pressed: #696969; --ds-color-interactive-icon-icon-button-transparent-accent-reversed-active: #ffffff; --ds-color-interactive-icon-icon-button-transparent-accent-reversed-disabled: #ffffff; --ds-color-interactive-icon-icon-button-transparent-accent-reversed-hover: #ebebeb; --ds-color-interactive-icon-icon-button-transparent-accent-reversed-pressed: #d9d9d9; --ds-color-interactive-icon-icon-button-transparent-destructive-active: #df1116; --ds-color-interactive-icon-icon-button-transparent-destructive-disabled: #df1116; --ds-color-interactive-icon-icon-button-transparent-destructive-hover: #8f0004; --ds-color-interactive-icon-icon-button-transparent-destructive-pressed: #470002; --ds-color-interactive-icon-icon-button-transparent-destructive-reversed-active: #ffffff; --ds-color-interactive-icon-icon-button-transparent-destructive-reversed-disabled: #ffffff; --ds-color-interactive-icon-icon-button-transparent-destructive-reversed-hover: #ebebeb; --ds-color-interactive-icon-icon-button-transparent-destructive-reversed-pressed: #d9d9d9; --ds-color-interactive-icon-icon-button-transparent-main-active: #0970e6; --ds-color-interactive-icon-icon-button-transparent-main-disabled: #0970e6; --ds-color-interactive-icon-icon-button-transparent-main-hover: #004e9b; --ds-color-interactive-icon-icon-button-transparent-main-pressed: #003161; --ds-color-interactive-icon-icon-button-transparent-main-reversed-active: #ffffff; --ds-color-interactive-icon-icon-button-transparent-main-reversed-disabled: #ffffff; --ds-color-interactive-icon-icon-button-transparent-main-reversed-hover: #ebebeb; --ds-color-interactive-icon-icon-button-transparent-main-reversed-pressed: #d9d9d9; --ds-color-interactive-icon-input-addon-default: #121212; --ds-color-interactive-icon-input-addon-error: #df1116; --ds-color-interactive-icon-input-checkbox-selected-active: #ffffff; --ds-color-interactive-icon-input-checkbox-selected-hover: #ffffff; --ds-color-interactive-icon-input-checkbox-selected-pressed: #ffffff; --ds-color-interactive-icon-input-select-button-accent-active: #121212; --ds-color-interactive-icon-input-select-button-accent-disabled: #121212; --ds-color-interactive-icon-input-select-button-accent-hover: #121212; --ds-color-interactive-icon-input-select-button-accent-pressed: #121212; --ds-color-interactive-icon-input-select-button-main-active: #0970e6; --ds-color-interactive-icon-input-select-button-main-disabled: #0970e6; --ds-color-interactive-icon-input-select-button-main-hover: #0970e6; --ds-color-interactive-icon-input-select-button-main-pressed: #0970e6; --ds-color-interactive-icon-input-select-button-selected-accent-active: #ffffff; --ds-color-interactive-icon-input-select-button-selected-accent-hover: #ffffff; --ds-color-interactive-icon-input-select-button-selected-accent-pressed: #ffffff; --ds-color-interactive-icon-input-select-button-selected-main-active: #ffffff; --ds-color-interactive-icon-input-select-button-selected-main-hover: #ffffff; --ds-color-interactive-icon-input-select-button-selected-main-pressed: #ffffff; --ds-color-interactive-icon-link-accent-active: #121212; --ds-color-interactive-icon-link-accent-disabled: #121212; --ds-color-interactive-icon-link-accent-hover: #454545; --ds-color-interactive-icon-link-accent-pressed: #696969; --ds-color-interactive-icon-link-accent-reversed-active: #ffffff; --ds-color-interactive-icon-link-accent-reversed-disabled: #ffffff; --ds-color-interactive-icon-link-accent-reversed-hover: #ebebeb; --ds-color-interactive-icon-link-accent-reversed-pressed: #d9d9d9; --ds-color-interactive-icon-link-destructive-active: #df1116; --ds-color-interactive-icon-link-destructive-disabled: #df1116; --ds-color-interactive-icon-link-destructive-hover: #8f0004; --ds-color-interactive-icon-link-destructive-pressed: #470002; --ds-color-interactive-icon-link-destructive-reversed-active: #ffffff; --ds-color-interactive-icon-link-destructive-reversed-disabled: #ffffff; --ds-color-interactive-icon-link-destructive-reversed-hover: #ebebeb; --ds-color-interactive-icon-link-destructive-reversed-pressed: #d9d9d9; --ds-color-interactive-icon-link-main-active: #0970e6; --ds-color-interactive-icon-link-main-disabled: #0970e6; --ds-color-interactive-icon-link-main-hover: #004e9b; --ds-color-interactive-icon-link-main-pressed: #003161; --ds-color-interactive-icon-link-main-reversed-active: #ffffff; --ds-color-interactive-icon-link-main-reversed-disabled: #ffffff; --ds-color-interactive-icon-link-main-reversed-hover: #ebebeb; --ds-color-interactive-icon-link-main-reversed-pressed: #d9d9d9; --ds-color-interactive-icon-navigation-item-active: #121212; --ds-color-interactive-icon-navigation-item-disabled: #121212; --ds-color-interactive-icon-navigation-item-hover: #454545; --ds-color-interactive-icon-navigation-item-pressed: #696969; --ds-color-interactive-icon-navigation-item-selected-active: #121212; --ds-color-interactive-icon-navigation-item-selected-hover: #454545; --ds-color-interactive-icon-navigation-item-selected-pressed: #696969; --ds-color-interactive-icon-quantity-button-active: #ffffff; --ds-color-interactive-icon-quantity-button-disabled: #ffffff; --ds-color-interactive-icon-quantity-button-hover: #ffffff; --ds-color-interactive-icon-quantity-button-modifier-active: #ffffff; --ds-color-interactive-icon-quantity-button-modifier-focus: #ffffff; --ds-color-interactive-icon-quantity-button-modifier-hover: #ffffff; --ds-color-interactive-icon-quantity-button-modifier-pressed: #ffffff; --ds-color-interactive-icon-quantity-button-pressed: #ffffff; --ds-color-interactive-icon-segmented-control-item-active: #121212; --ds-color-interactive-icon-segmented-control-item-hover: #121212; --ds-color-interactive-icon-segmented-control-item-pressed: #121212; --ds-color-interactive-icon-segmented-control-item-selected-active: #ffffff; --ds-color-interactive-icon-segmented-control-item-selected-hover: #ffffff; --ds-color-interactive-icon-segmented-control-item-selected-pressed: #ffffff; --ds-color-interactive-icon-stepper-item-negative-active: #df1116; --ds-color-interactive-icon-stepper-item-negative-disabled: #df1116; --ds-color-interactive-icon-stepper-item-negative-hover: #8f0004; --ds-color-interactive-icon-stepper-item-negative-pressed: #470002; --ds-color-interactive-icon-stepper-item-negative-reversed-active: #ffffff; --ds-color-interactive-icon-stepper-item-negative-reversed-hover: #ffffff; --ds-color-interactive-icon-stepper-item-negative-reversed-pressed: #ffffff; --ds-color-interactive-icon-stepper-item-positive-active: #2c815e; --ds-color-interactive-icon-stepper-item-positive-disabled: #2c815e; --ds-color-interactive-icon-stepper-item-positive-hover: #155138; --ds-color-interactive-icon-stepper-item-positive-pressed: #051e14; --ds-color-interactive-icon-stepper-item-positive-reversed-active: #ffffff; --ds-color-interactive-icon-stepper-item-positive-reversed-hover: #ffffff; --ds-color-interactive-icon-stepper-item-positive-reversed-pressed: #ffffff; --ds-color-interactive-icon-tab-active: #121212; --ds-color-interactive-icon-tab-disabled: #121212; --ds-color-interactive-icon-tab-hover: #454545; --ds-color-interactive-icon-tab-pressed: #696969; --ds-color-interactive-icon-tab-selected-active: #0970e6; --ds-color-interactive-icon-tab-selected-disabled: #0970e6; --ds-color-interactive-icon-tab-selected-hover: #004e9b; --ds-color-interactive-icon-tab-selected-pressed: #003161; --ds-color-interactive-icon-visual-button-active: #121212; --ds-color-interactive-icon-visual-button-hover: #121212; --ds-color-interactive-icon-visual-button-pressed: #121212; --ds-color-interactive-text-button-filled-accent-active: #ffffff; --ds-color-interactive-text-button-filled-accent-disabled: #ffffff; --ds-color-interactive-text-button-filled-accent-hover: #ffffff; --ds-color-interactive-text-button-filled-accent-pressed: #ffffff; --ds-color-interactive-text-button-filled-accent-reversed-active: #121212; --ds-color-interactive-text-button-filled-accent-reversed-disabled: #121212; --ds-color-interactive-text-button-filled-accent-reversed-hover: #454545; --ds-color-interactive-text-button-filled-accent-reversed-pressed: #696969; --ds-color-interactive-text-button-filled-destructive-active: #ffffff; --ds-color-interactive-text-button-filled-destructive-disabled: #ffffff; --ds-color-interactive-text-button-filled-destructive-hover: #ffffff; --ds-color-interactive-text-button-filled-destructive-pressed: #ffffff; --ds-color-interactive-text-button-filled-destructive-reversed-active: #df1116; --ds-color-interactive-text-button-filled-destructive-reversed-disabled: #df1116; --ds-color-interactive-text-button-filled-destructive-reversed-hover: #8f0004; --ds-color-interactive-text-button-filled-destructive-reversed-pressed: #470002; --ds-color-interactive-text-button-filled-main-active: #ffffff; --ds-color-interactive-text-button-filled-main-disabled: #ffffff; --ds-color-interactive-text-button-filled-main-hover: #ffffff; --ds-color-interactive-text-button-filled-main-pressed: #ffffff; --ds-color-interactive-text-button-filled-main-reversed-active: #0970e6; --ds-color-interactive-text-button-filled-main-reversed-disabled: #0970e6; --ds-color-interactive-text-button-filled-main-reversed-hover: #004e9b; --ds-color-interactive-text-button-filled-main-reversed-pressed: #003161; --ds-color-interactive-text-button-outlined-accent-active: #121212; --ds-color-interactive-text-button-outlined-accent-disabled: #121212; --ds-color-interactive-text-button-outlined-accent-hover: #454545; --ds-color-interactive-text-button-outlined-accent-pressed: #696969; --ds-color-interactive-text-button-outlined-accent-reversed-active: #ffffff; --ds-color-interactive-text-button-outlined-accent-reversed-disabled: #ffffff; --ds-color-interactive-text-button-outlined-accent-reversed-hover: #ebebeb; --ds-color-interactive-text-button-outlined-accent-reversed-pressed: #d9d9d9; --ds-color-interactive-text-button-outlined-destructive-active: #df1116; --ds-color-interactive-text-button-outlined-destructive-disabled: #df1116; --ds-color-interactive-text-button-outlined-destructive-hover: #8f0004; --ds-color-interactive-text-button-outlined-destructive-pressed: #470002; --ds-color-interactive-text-button-outlined-destructive-reversed-active: #ffffff; --ds-color-interactive-text-button-outlined-destructive-reversed-disabled: #ffffff; --ds-color-interactive-text-button-outlined-destructive-reversed-hover: #ebebeb; --ds-color-interactive-text-button-outlined-destructive-reversed-pressed: #d9d9d9; --ds-color-interactive-text-button-outlined-main-active: #0970e6; --ds-color-interactive-text-button-outlined-main-disabled: #0970e6; --ds-color-interactive-text-button-outlined-main-hover: #004e9b; --ds-color-interactive-text-button-outlined-main-pressed: #003161; --ds-color-interactive-text-button-outlined-main-reversed-active: #ffffff; --ds-color-interactive-text-button-outlined-main-reversed-disabled: #ffffff; --ds-color-interactive-text-button-outlined-main-reversed-hover: #ebebeb; --ds-color-interactive-text-button-outlined-main-reversed-pressed: #d9d9d9; --ds-color-interactive-text-button-transparent-accent-active: #121212; --ds-color-interactive-text-button-transparent-accent-disabled: #121212; --ds-color-interactive-text-button-transparent-accent-hover: #454545; --ds-color-interactive-text-button-transparent-accent-pressed: #696969; --ds-color-interactive-text-button-transparent-accent-reversed-active: #ffffff; --ds-color-interactive-text-button-transparent-accent-reversed-disabled: #ffffff; --ds-color-interactive-text-button-transparent-accent-reversed-hover: #ebebeb; --ds-color-interactive-text-button-transparent-accent-reversed-pressed: #d9d9d9; --ds-color-interactive-text-button-transparent-destructive-active: #df1116; --ds-color-interactive-text-button-transparent-destructive-disabled: #df1116; --ds-color-interactive-text-button-transparent-destructive-hover: #8f0004; --ds-color-interactive-text-button-transparent-destructive-pressed: #470002; --ds-color-interactive-text-button-transparent-destructive-reversed-active: #ffffff; --ds-color-interactive-text-button-transparent-destructive-reversed-disabled: #ffffff; --ds-color-interactive-text-button-transparent-destructive-reversed-hover: #ebebeb; --ds-color-interactive-text-button-transparent-destructive-reversed-pressed: #d9d9d9; --ds-color-interactive-text-button-transparent-main-active: #0970e6; --ds-color-interactive-text-button-transparent-main-disabled: #0970e6; --ds-color-interactive-text-button-transparent-main-hover: #004e9b; --ds-color-interactive-text-button-transparent-main-pressed: #003161; --ds-color-interactive-text-button-transparent-main-reversed-active: #ffffff; --ds-color-interactive-text-button-transparent-main-reversed-disabled: #ffffff; --ds-color-interactive-text-button-transparent-main-reversed-hover: #ebebeb; --ds-color-interactive-text-button-transparent-main-reversed-pressed: #d9d9d9; --ds-color-interactive-text-chip-active: #121212; --ds-color-interactive-text-chip-disabled: #121212; --ds-color-interactive-text-chip-hover: #121212; --ds-color-interactive-text-chip-pressed: #121212; --ds-color-interactive-text-chip-selected-active: #ffffff; --ds-color-interactive-text-chip-selected-hover: #ffffff; --ds-color-interactive-text-chip-selected-pressed: #ffffff; --ds-color-interactive-text-input-addon-default: #121212; --ds-color-interactive-text-input-addon-error: #df1116; --ds-color-interactive-text-input-addon-main: #454545; --ds-color-interactive-text-input-button-select-accent-active: #121212; --ds-color-interactive-text-input-button-select-accent-disabled: #121212; --ds-color-interactive-text-input-button-select-accent-hover: #121212; --ds-color-interactive-text-input-button-select-accent-pressed: #121212; --ds-color-interactive-text-input-button-select-main-active: #0970e6; --ds-color-interactive-text-input-button-select-main-disabled: #0970e6; --ds-color-interactive-text-input-button-select-main-hover: #004e9b; --ds-color-interactive-text-input-button-select-main-pressed: #003161; --ds-color-interactive-text-input-button-select-selected-accent-active: #ffffff; --ds-color-interactive-text-input-button-select-selected-accent-disabled: #ffffff; --ds-color-interactive-text-input-button-select-selected-accent-hover: #ffffff; --ds-color-interactive-text-input-button-select-selected-accent-pressed: #ffffff; --ds-color-interactive-text-input-button-select-selected-main-active: #ffffff; --ds-color-interactive-text-input-button-select-selected-main-disabled: #ffffff; --ds-color-interactive-text-input-button-select-selected-main-hover: #ffffff; --ds-color-interactive-text-input-button-select-selected-main-pressed: #ffffff; --ds-color-interactive-text-input-calendar-active: #121212; --ds-color-interactive-text-input-calendar-disabled: #121212; --ds-color-interactive-text-input-calendar-hover: #121212; --ds-color-interactive-text-input-calendar-pressed: #121212; --ds-color-interactive-text-input-calendar-range-active: #121212; --ds-color-interactive-text-input-calendar-range-hover: #121212; --ds-color-interactive-text-input-calendar-range-pressed: #121212; --ds-color-interactive-text-input-calendar-selected-active: #ffffff; --ds-color-interactive-text-input-calendar-selected-hover: #ffffff; --ds-color-interactive-text-input-calendar-selected-pressed: #ffffff; --ds-color-interactive-text-input-content: #121212; --ds-color-interactive-text-input-date-picker-shortcut-active: #121212; --ds-color-interactive-text-input-date-picker-shortcut-disabled: #121212; --ds-color-interactive-text-input-date-picker-shortcut-hover: #121212; --ds-color-interactive-text-input-date-picker-shortcut-pressed: #121212; --ds-color-interactive-text-input-date-picker-shortcut-selected-active: #121212; --ds-color-interactive-text-input-date-picker-shortcut-selected-hover: #121212; --ds-color-interactive-text-input-date-picker-shortcut-selected-pressed: #121212; --ds-color-interactive-text-input-label-default: #454545; --ds-color-interactive-text-input-label-error: #df1116; --ds-color-interactive-text-input-placeholder: #696969; --ds-color-interactive-text-input-segmented-control-item-active: #121212; --ds-color-interactive-text-input-segmented-control-item-disabled: #121212; --ds-color-interactive-text-input-segmented-control-item-hover: #121212; --ds-color-interactive-text-input-segmented-control-item-pressed: #121212; --ds-color-interactive-text-input-segmented-control-item-selected-active: #ffffff; --ds-color-interactive-text-input-segmented-control-item-selected-disabled: #ffffff; --ds-color-interactive-text-input-segmented-control-item-selected-hover: #ffffff; --ds-color-interactive-text-input-segmented-control-item-selected-pressed: #ffffff; --ds-color-interactive-text-link-accent-active: #121212; --ds-color-interactive-text-link-accent-disabled: #121212; --ds-color-interactive-text-link-accent-hover: #454545; --ds-color-interactive-text-link-accent-pressed: #696969; --ds-color-interactive-text-link-accent-reversed-active: #ffffff; --ds-color-interactive-text-link-accent-reversed-disabled: #ffffff; --ds-color-interactive-text-link-accent-reversed-hover: #ebebeb; --ds-color-interactive-text-link-accent-reversed-pressed: #d9d9d9; --ds-color-interactive-text-link-destructive-active: #df1116; --ds-color-interactive-text-link-destructive-disabled: #df1116; --ds-color-interactive-text-link-destructive-hover: #8f0004; --ds-color-interactive-text-link-destructive-pressed: #470002; --ds-color-interactive-text-link-destructive-reversed-active: #ffffff; --ds-color-interactive-text-link-destructive-reversed-disabled: #ffffff; --ds-color-interactive-text-link-destructive-reversed-hover: #ebebeb; --ds-color-interactive-text-link-destructive-reversed-pressed: #d9d9d9; --ds-color-interactive-text-link-main-active: #0970e6; --ds-color-interactive-text-link-main-disabled: #0970e6; --ds-color-interactive-text-link-main-hover: #004e9b; --ds-color-interactive-text-link-main-pressed: #003161; --ds-color-interactive-text-link-main-reversed-active: #ffffff; --ds-color-interactive-text-link-main-reversed-disabled: #ffffff; --ds-color-interactive-text-link-main-reversed-hover: #ebebeb; --ds-color-interactive-text-link-main-reversed-pressed: #d9d9d9; --ds-color-interactive-text-navigation-item-active: #121212; --ds-color-interactive-text-navigation-item-disabled: #121212; --ds-color-interactive-text-navigation-item-hover: #454545; --ds-color-interactive-text-navigation-item-pressed: #696969; --ds-color-interactive-text-navigation-item-selected-active: #121212; --ds-color-interactive-text-navigation-item-selected-hover: #454545; --ds-color-interactive-text-navigation-item-selected-pressed: #696969; --ds-color-interactive-text-pagination-active: #121212; --ds-color-interactive-text-pagination-disabled: #121212; --ds-color-interactive-text-pagination-hover: #454545; --ds-color-interactive-text-pagination-pressed: #696969; --ds-color-interactive-text-pagination-selected-active: #ffffff; --ds-color-interactive-text-pagination-selected-hover: #ffffff; --ds-color-interactive-text-pagination-selected-pressed: #ffffff; --ds-color-interactive-text-quantity-button-active: #ffffff; --ds-color-interactive-text-quantity-button-disabled: #ffffff; --ds-color-interactive-text-quantity-button-hover: #ffffff; --ds-color-interactive-text-quantity-button-pressed: #ffffff; --ds-color-interactive-text-stepper-item-default-active: #121212; --ds-color-interactive-text-stepper-item-default-disabled: #121212; --ds-color-interactive-text-stepper-item-default-hover: #454545; --ds-color-interactive-text-stepper-item-default-pressed: #696969; --ds-color-interactive-text-stepper-item-default-reversed-active: #ffffff; --ds-color-interactive-text-stepper-item-default-reversed-hover: #ffffff; --ds-color-interactive-text-stepper-item-default-reversed-pressed: #ffffff; --ds-color-interactive-text-stepper-item-negative-active: #df1116; --ds-color-interactive-text-stepper-item-negative-disabled: #df1116; --ds-color-interactive-text-stepper-item-negative-hover: #8f0004; --ds-color-interactive-text-stepper-item-negative-pressed: #470002; --ds-color-interactive-text-stepper-item-negative-reversed-active: #ffffff; --ds-color-interactive-text-stepper-item-negative-reversed-hover: #ffffff; --ds-color-interactive-text-stepper-item-negative-reversed-pressed: #ffffff; --ds-color-interactive-text-stepper-item-positive-active: #2c815e; --ds-color-interactive-text-stepper-item-positive-disabled: #2c815e; --ds-color-interactive-text-stepper-item-positive-hover: #155138; --ds-color-interactive-text-stepper-item-positive-pressed: #051e14; --ds-color-interactive-text-stepper-item-positive-reversed-active: #ffffff; --ds-color-interactive-text-stepper-item-positive-reversed-hover: #ffffff; --ds-color-interactive-text-stepper-item-positive-reversed-pressed: #ffffff; --ds-color-interactive-text-tab-active: #121212; --ds-color-interactive-text-tab-disabled: #121212; --ds-color-interactive-text-tab-hover: #454545; --ds-color-interactive-text-tab-pressed: #696969; --ds-color-interactive-text-tab-selected-active: #0970e6; --ds-color-interactive-text-tab-selected-disabled: #0970e6; --ds-color-interactive-text-tab-selected-hover: #004e9b; --ds-color-interactive-text-tab-selected-pressed: #003161; --ds-color-interactive-text-visual-button-body-active: #121212; --ds-color-interactive-text-visual-button-body-disabled: #121212; --ds-color-interactive-text-visual-button-body-hover: #121212; --ds-color-interactive-text-visual-button-body-pressed: #121212; --ds-color-interactive-text-visual-button-title-active: #0970e6; --ds-color-interactive-text-visual-button-title-disabled: #0970e6; --ds-color-interactive-text-visual-button-title-hover: #004e9b; --ds-color-interactive-text-visual-button-title-pressed: #003161; --ds-color-persistent-background-accordion-default: #ffffff; --ds-color-persistent-background-alternate: #f7f7f7; --ds-color-persistent-background-badge-information: #173eb4; --ds-color-persistent-background-badge-light-information: #f5faff; --ds-color-persistent-background-badge-light-negative: #ffefef; --ds-color-persistent-background-badge-light-positive: #f0faf6; --ds-color-persistent-background-badge-light-warning: #fff7f0; --ds-color-persistent-background-badge-negative: #df1116; --ds-color-persistent-background-badge-positive: #2c815e; --ds-color-persistent-background-badge-warning: #cc4010; --ds-color-persistent-background-card-default: #ffffff; --ds-color-persistent-background-chip-default: #ffffff; --ds-color-persistent-background-functional-notice-dark-information: #173eb4; --ds-color-persistent-background-functional-notice-dark-negative: #df1116; --ds-color-persistent-background-functional-notice-dark-success: #2c815e; --ds-color-persistent-background-functional-notice-dark-warning: #cc4010; --ds-color-persistent-background-functional-notice-light-information: #f5faff; --ds-color-persistent-background-functional-notice-light-negative: #ffefef; --ds-color-persistent-background-functional-notice-light-success: #f0faf6; --ds-color-persistent-background-functional-notice-light-warning: #fff7f0; --ds-color-persistent-background-functional-notice-light-neutral: #f7f7f7; --ds-color-persistent-background-main: #ffffff; --ds-color-persistent-background-modal-default: #ffffff; --ds-color-persistent-background-notification: #df1116; --ds-color-persistent-background-overlay-default: #121212; --ds-color-persistent-background-popin-default: #ffffff; --ds-color-persistent-background-popover-arrow-default: #ffffff; --ds-color-persistent-background-popover-default: #ffffff; --ds-color-persistent-background-progress-bar-reversed-default: #121212; --ds-color-persistent-background-progress-bar-reversed-progress: #ffffff; --ds-color-persistent-background-quantity-button-default: #0970e6; --ds-color-persistent-background-separator-default: #ebebeb; --ds-color-persistent-background-stepper-item-default: #121212; --ds-color-persistent-background-stepper-item-negative: #df1116; --ds-color-persistent-background-stepper-item-opposite: #ffffff; --ds-color-persistent-background-stepper-item-positive: #2c815e; --ds-color-persistent-background-stepper-item-reversed-negative: #ffffff; --ds-color-persistent-background-stepper-item-reversed-positive: #ffffff; --ds-color-persistent-background-table-cell-alternative: #f7f7f7; --ds-color-persistent-background-table-cell-default: #ffffff; --ds-color-persistent-background-tag-information: #173eb4; --ds-color-persistent-background-tag-light-information: #f5faff; --ds-color-persistent-background-tag-light-negative: #ffefef; --ds-color-persistent-background-tag-light-positive: #f0faf6; --ds-color-persistent-background-tag-light-warning: #fff7f0; --ds-color-persistent-background-tag-negative: #df1116; --ds-color-persistent-background-tag-positive: #2c815e; --ds-color-persistent-background-tag-warning: #cc4010; --ds-color-persistent-background-tint: #f5faff; --ds-color-persistent-background-toaster-information: #173eb4; --ds-color-persistent-background-toaster-negative: #8f0004; --ds-color-persistent-background-toaster-positive: #2c815e; --ds-color-persistent-background-toaster-warning: #cc4010; --ds-color-persistent-background-tooltip-arrow-default: #121212; --ds-color-persistent-background-tooltip-default: #121212; --ds-color-persistent-border-accordion-default: #ebebeb; --ds-color-persistent-border-card-default: #ebebeb; --ds-color-persistent-border-functional-information: #173eb4; --ds-color-persistent-border-functional-negative: #df1116; --ds-color-persistent-border-functional-positive: #2c815e; --ds-color-persistent-border-functional-warning: #cc4010; --ds-color-persistent-border-modal-default: #ebebeb; --ds-color-persistent-border-primary: #121212; --ds-color-persistent-border-reversed-primary: #ffffff; --ds-color-persistent-border-reversed-secondary: #ebebeb; --ds-color-persistent-border-reversed-tertiary: #d9d9d9; --ds-color-persistent-border-secondary: #696969; --ds-color-persistent-border-stepper-item-default: #121212; --ds-color-persistent-border-stepper-item-negative: #df1116; --ds-color-persistent-border-stepper-item-positive: #2c815e; --ds-color-persistent-border-tag-information: #173eb4; --ds-color-persistent-border-tag-negative: #df1116; --ds-color-persistent-border-tag-positive: #2c815e; --ds-color-persistent-border-tag-warning: #cc4010; --ds-color-persistent-border-tertiary: #878787; --ds-color-persistent-icon-functional-information: #173eb4; --ds-color-persistent-icon-functional-negative: #df1116; --ds-color-persistent-icon-functional-success: #2c815e; --ds-color-persistent-icon-functional-warning: #cc4010; --ds-color-persistent-icon-functional-notice-default: #121212; --ds-color-persistent-icon-functional-notice-information: #173eb4; --ds-color-persistent-icon-functional-notice-negative: #df1116; --ds-color-persistent-icon-functional-notice-reversed: #ffffff; --ds-color-persistent-icon-functional-notice-success: #2c815e; --ds-color-persistent-icon-functional-notice-warning: #cc4010; --ds-color-persistent-icon-primary: #121212; --ds-color-persistent-icon-secondary: #696969; --ds-color-persistent-icon-spinner-default: #121212; --ds-color-persistent-icon-stepper-item-negative: #df1116; --ds-color-persistent-icon-stepper-item-positive: #2c815e; --ds-color-persistent-icon-stepper-item-reversed-negative: #ffffff; --ds-color-persistent-icon-stepper-item-reversed-positive: #ffffff; --ds-color-persistent-icon-table-title-default: #121212; --ds-color-persistent-icon-table-title-selected: #0970e6; --ds-color-persistent-icon-tag-information: #173eb4; --ds-color-persistent-icon-tag-negative: #df1116; --ds-color-persistent-icon-tag-success: #2c815e; --ds-color-persistent-icon-tag-warning: #cc4010; --ds-color-persistent-icon-tertiary: #454545; --ds-color-persistent-icon-toaster-default: #ffffff; --ds-color-persistent-text-accordion-default: #121212; --ds-color-persistent-text-functional-information: #173eb4; --ds-color-persistent-text-functional-negative: #df1116; --ds-color-persistent-text-functional-positive: #2c815e; --ds-color-persistent-text-functional-warning: #cc4010; --ds-color-persistent-text-functional-notice-default: #121212; --ds-color-persistent-text-functional-notice-reversed: #ffffff; --ds-color-persistent-text-popover-default: #121212; --ds-color-persistent-text-primary: #121212; --ds-color-persistent-text-quantity-button: #ffffff; --ds-color-persistent-text-reversed-primary: #ffffff; --ds-color-persistent-text-reversed-secondary: #ebebeb; --ds-color-persistent-text-reversed-tertiary: #d9d9d9; --ds-color-persistent-text-secondary: #454545; --ds-color-persistent-text-stepper-item-default: #121212; --ds-color-persistent-text-stepper-item-negative: #df1116; --ds-color-persistent-text-stepper-item-positive: #2c815e; --ds-color-persistent-text-stepper-item-reversed: #ffffff; --ds-color-persistent-text-table-cell-default: #121212; --ds-color-persistent-text-table-cell-title-default: #121212; --ds-color-persistent-text-table-cell-title-selected: #0970e6; --ds-color-persistent-text-tag-information: #173eb4; --ds-color-persistent-text-tag-negative: #df1116; --ds-color-persistent-text-tag-positive: #2c815e; --ds-color-persistent-text-tag-warning: #cc4010; --ds-color-persistent-text-tertiary: #696969; --ds-color-persistent-text-toaster-default: #ffffff; --ds-color-persistent-text-tooltip-default: #ffffff; } :root { --ds-color-brand-primary: #254f9a; --ds-color-brand-secondary: #c20016; --ds-color-brand-tertiary: #f0f3f6; --ds-color-core-background-functional-information: #f5faff; --ds-color-core-background-functional-information-reversed: #173eb4; --ds-color-core-background-functional-negative: #ffefef; --ds-color-core-background-functional-negative-reversed: #aa0d11; --ds-color-core-background-functional-notification: #e51e26; --ds-color-core-background-functional-positive: #f9fff2; --ds-color-core-background-functional-positive-reversed: #33691e; --ds-color-core-background-functional-warning: #fff7f0; --ds-color-core-background-functional-warning-reversed: #cc4010; --ds-color-core-background-main-primary: #ffffff; --ds-color-core-background-main-secondary: #f7f7f7; --ds-color-core-background-reversed-primary: #121212; --ds-color-core-background-reversed-secondary: #262626; --ds-color-core-background-specific-loyalty: #e8f8ff; --ds-color-core-background-specific-loyalty-reversed: #004f9b; --ds-color-core-background-specific-promotion: #ffefef; --ds-color-core-background-specific-promotion-reversed: #d30d1f; --ds-color-core-border-functional-information: #173eb4; --ds-color-core-border-functional-negative: #aa0d11; --ds-color-core-border-functional-positive: #33691e; --ds-color-core-border-functional-warning: #cc4010; --ds-color-core-border-main-primary: #e5e5e5; --ds-color-core-border-main-secondary: #d9d9d9; --ds-color-core-border-specific-loyalty: #004f9b; --ds-color-core-border-specific-promotion: #d30d1f; --ds-color-core-content-functional-information: #173eb4; --ds-color-core-content-functional-negative: #aa0d11; --ds-color-core-content-functional-positive: #33691e; --ds-color-core-content-functional-warning: #cc4010; --ds-color-core-content-main-primary: #121212; --ds-color-core-content-main-secondary: #454545; --ds-color-core-content-main-tertiary: #575757; --ds-color-core-content-reversed-primary: #ffffff; --ds-color-core-content-reversed-secondary: #e5e5e5; --ds-color-core-content-reversed-tertiary: #d9d9d9; --ds-color-core-content-specific-loyalty: #004f9b; --ds-color-core-content-specific-promotion: #d30d1f; --ds-color-decorative-background-main-aqua: #edfdff; --ds-color-decorative-background-main-banana: #fffef2; --ds-color-decorative-background-main-casper: #f0f3f6; --ds-color-decorative-background-main-celeste: #f5faff; --ds-color-decorative-background-main-champagne: #fff7f0; --ds-color-decorative-background-main-lagoon: #f2fcf7; --ds-color-decorative-background-main-lavender: #f9f5ff; --ds-color-decorative-background-main-lemon: #fdfff0; --ds-color-decorative-background-main-lilac: #fdf2ff; --ds-color-decorative-background-main-mint: #ebfff9; --ds-color-decorative-background-main-misty: #e5e9f0; --ds-color-decorative-background-main-peach: #fff4f2; --ds-color-decorative-background-main-sahara: #fffbf0; --ds-color-decorative-background-main-tea: #f9fff2; --ds-color-decorative-background-main-vanilla: #fff9eb; --ds-color-decorative-background-reversed-abyss: #052351; --ds-color-decorative-background-reversed-charcoal: #262626; --ds-color-decorative-background-reversed-electric: #311b92; --ds-color-decorative-background-reversed-forest: #004f2b; --ds-color-decorative-background-reversed-ginger: #b33308; --ds-color-decorative-background-reversed-graphite: #263238; --ds-color-decorative-background-reversed-jungle: #006223; --ds-color-decorative-background-reversed-olive: #827717; --ds-color-decorative-background-reversed-raisin: #4a148c; --ds-color-decorative-background-reversed-royal: #173eb4; --ds-color-decorative-background-reversed-sacramento: #006064; --ds-color-decorative-background-reversed-scottish: #33691e; --ds-color-decorative-background-reversed-walnut: #5c2e1d; --ds-color-decorative-border-main-aqua: #b2ebf2; --ds-color-decorative-border-main-banana: #fff9c4; --ds-color-decorative-border-main-casper: #cfd8dc; --ds-color-decorative-border-main-celeste: #b9ddff; --ds-color-decorative-border-main-champagne: #ffdab4; --ds-color-decorative-border-main-lagoon: #b9e9cc; --ds-color-decorative-border-main-lavender: #d1c4e9; --ds-color-decorative-border-main-lemon: #f0f4c3; --ds-color-decorative-border-main-lilac: #e1bee7; --ds-color-decorative-border-main-mint: #afe0d1; --ds-color-decorative-border-main-misty: #bdc7da; --ds-color-decorative-border-main-peach: #fbcaba; --ds-color-decorative-border-main-sahara: #ffecb3; --ds-color-decorative-border-main-tea: #dcedc8; --ds-color-decorative-border-main-vanilla: #f0dab4; --ds-color-interactive-active-loyalty-hover: #004282; --ds-color-interactive-active-loyalty-pressed: #003569; --ds-color-interactive-active-loyalty-primary: #004f9b; --ds-color-interactive-active-main-hover: #0863cc; --ds-color-interactive-active-main-pressed: #0757b2; --ds-color-interactive-active-main-primary: #0970e6; --ds-color-interactive-active-marketplace-hover: #8a213c; --ds-color-interactive-active-marketplace-pressed: #701b31; --ds-color-interactive-active-marketplace-primary: #a42747; --ds-color-interactive-active-monochrome-hover: #2b2b2b; --ds-color-interactive-active-monochrome-pressed: #454545; --ds-color-interactive-active-monochrome-primary: #121212; --ds-color-interactive-active-negative-hover: #910b0f; --ds-color-interactive-active-negative-pressed: #78090c; --ds-color-interactive-active-negative-primary: #aa0d11; --ds-color-interactive-active-positive-hover: #264f17; --ds-color-interactive-active-positive-pressed: #1a360f; --ds-color-interactive-active-positive-primary: #33691e; --ds-color-interactive-active-promotion-hover: #ba0b1b; --ds-color-interactive-active-promotion-pressed: #a10a18; --ds-color-interactive-active-promotion-primary: #d30d1f; --ds-color-interactive-active-rating-hover: #e5a100; --ds-color-interactive-active-rating-pressed: #cc8f00; --ds-color-interactive-active-rating-primary: #ffb300; --ds-color-interactive-active-reversed-hover: #e5e5e5; --ds-color-interactive-active-reversed-pressed: #cccccc; --ds-color-interactive-active-reversed-primary: #ffffff; --ds-color-interactive-active-subtle-hover: #e6f1fe; --ds-color-interactive-active-subtle-pressed: #cee4fd; --ds-color-interactive-active-subtle-primary: #ffffff; --ds-color-interactive-default-background-disabled: #e5e5e5; --ds-color-interactive-default-background-prefilled: #f5faff; --ds-color-interactive-default-border-disabled: #e5e5e5; --ds-color-interactive-default-border-hover: #929292; --ds-color-interactive-default-border-pressed: #747474; --ds-color-interactive-default-content-disabled: #929292; --ds-color-interactive-default-reversed-content-disabled: #929292; } :root { --ds-breakpoint-tablet: 768px; --ds-breakpoint-desktop: 1280px; } :root { --ds-font-family: "Ubuntu", "Open Sans", "sans-serif"; } :root { --ds-opacity-default: 100px; --ds-opacity-disabled: 40px; --ds-opacity-overlay: 50px; } :root { --ds-shadow-action: 2px 4px 12px rgba(18, 18, 18, .12); --ds-shadow-down: 0px -4px 16px rgba(18, 18, 18, .08); --ds-shadow-fixe: 2px 2px 8px rgba(18, 18, 18, .16); --ds-shadow-hover: 2px 4px 16px rgba(18, 18, 18, .16); --ds-shadow-overlay: 0px 0px 64px rgba(18, 18, 18, .6); --ds-shadow-press: 2px 2px 8px rgba(18, 18, 18, .16); --ds-shadow-raised: 0px 16px 64px rgba(18, 18, 18, .12), 0px 8px 24px rgba(18, 18, 18, .16); --ds-shadow-up: 0px 4px 16px rgba(18, 18, 18, .08); --ds-shadow-down-l: 0px -16px 64px rgba(18, 18, 18, .12), 0px -8px 24px rgba(18, 18, 18, .16); --ds-shadow-down-m: 0px -8px 16px rgba(18, 18, 18, .08), 0px -8px 16px rgba(18, 18, 18, .12); --ds-shadow-down-s: 0px -4px 16px rgba(18, 18, 18, .08); --ds-shadow-down-xs: 0px -2px 4px rgba(18, 18, 18, .08); --ds-shadow-up-l: 0px 16px 64px rgba(18, 18, 18, .12), 0px 8px 24px rgba(18, 18, 18, .16); --ds-shadow-up-m: 0px 8px 16px rgba(18, 18, 18, .08), 0px 8px 16px rgba(18, 18, 18, .12); --ds-shadow-up-s: 0px 4px 16px rgba(18, 18, 18, .08); --ds-shadow-up-xs: 0px 2px 4px rgba(18, 18, 18, .08); } @font-face { font-family: c-icon; src: url("./media/c-icon.eot?t=1754305527088"); src: url("./media/c-icon.eot?t=1754305527088#iefix") format("embedded-opentype"), url("./media/c-icon.woff2?t=1754305527088") format("woff2"), url("./media/c-icon.woff?t=1754305527088") format("woff"), url("./media/c-icon.ttf?t=1754305527088") format("truetype"), url("./media/c-icon.svg?t=1754305527088") format("svg"); } [class^=c-icon-], [class*=" c-icon-"] { font-family: c-icon !important; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .c-icon-accessibility:before { content: "\ea01"; } .c-icon-activity:before { content: "\ea02"; } .c-icon-add-coupon:before { content: "\ea03"; } .c-icon-add-list:before { content: "\ea04"; } .c-icon-add-product:before { content: "\ea05"; } .c-icon-add\a0 coupon-dollar:before { content: "\ea06"; } .c-icon-after-sales-service:before { content: "\ea07"; } .c-icon-airplane:before { content: "\ea08"; } .c-icon-airplay:before { content: "\ea09"; } .c-icon-alcohol-content:before { content: "\ea0a"; } .c-icon-alert-circle:before { content: "\ea0b"; } .c-icon-alert-octagon:before { content: "\ea0c"; } .c-icon-alert-triangle:before { content: "\ea0d"; } .c-icon-align-center:before { content: "\ea0e"; } .c-icon-align-justify:before { content: "\ea0f"; } .c-icon-align-left:before { content: "\ea10"; } .c-icon-align-right:before { content: "\ea11"; } .c-icon-amex:before { content: "\ea12"; } .c-icon-anchor:before { content: "\ea13"; } .c-icon-aperture:before { content: "\ea14"; } .c-icon-archive:before { content: "\ea15"; } .c-icon-arrow-circle-down:before { content: "\ea16"; } .c-icon-arrow-circle-left:before { content: "\ea17"; } .c-icon-arrow-circle-right:before { content: "\ea18"; } .c-icon-arrow-circle-up:before { content: "\ea19"; } .c-icon-at-sign:before { content: "\ea1a"; } .c-icon-attach-file:before { content: "\ea1b"; } .c-icon-automatic:before { content: "\ea1c"; } .c-icon-award:before { content: "\ea1d"; } .c-icon-bag-clock:before { content: "\ea1e"; } .c-icon-bag-cross:before { content: "\ea1f"; } .c-icon-bag-google:before { content: "\ea20"; } .c-icon-bag-plus:before { content: "\ea21"; } .c-icon-bag-purchases:before { content: "\ea22"; } .c-icon-bag:before { content: "\ea23"; } .c-icon-bar-chart-alt:before { content: "\ea24"; } .c-icon-bar-chart:before { content: "\ea25"; } .c-icon-bar-code:before { content: "\ea26"; } .c-icon-basket-express:before { content: "\ea27"; } .c-icon-battery-charging:before { content: "\ea28"; } .c-icon-battery:before { content: "\ea29"; } .c-icon-bell-off:before { content: "\ea2a"; } .c-icon-bell:before { content: "\ea2b"; } .c-icon-bicycle:before { content: "\ea2c"; } .c-icon-bike:before { content: "\ea2d"; } .c-icon-billing-euro:before { content: "\ea2e"; } .c-icon-billing-filled:before { content: "\ea2f"; } .c-icon-billing:before { content: "\ea30"; } .c-icon-bluetooth:before { content: "\ea31"; } .c-icon-bold:before { content: "\ea32"; } .c-icon-book-open-filled:before { content: "\ea33"; } .c-icon-book-open:before { content: "\ea34"; } .c-icon-book:before { content: "\ea35"; } .c-icon-bookmark-filled:before { content: "\ea36"; } .c-icon-bookmark:before { content: "\ea37"; } .c-icon-brand:before { content: "\ea38"; } .c-icon-briefcase:before { content: "\ea39"; } .c-icon-butchers-shop:before { content: "\ea3a"; } .c-icon-calendar-refresh:before { content: "\ea3b"; } .c-icon-calendar:before { content: "\ea3c"; } .c-icon-camera-off:before { content: "\ea3d"; } .c-icon-camera:before { content: "\ea3e"; } .c-icon-camping-car:before { content: "\ea3f"; } .c-icon-candle:before { content: "\ea40"; } .c-icon-car-face:before { content: "\ea41"; } .c-icon-car-wash:before { content: "\ea42"; } .c-icon-car:before { content: "\ea43"; } .c-icon-card-pass:before { content: "\ea44"; } .c-icon-cargo-loading:before { content: "\ea45"; } .c-icon-carpool-area:before { content: "\ea46"; } .c-icon-carrefour-card-filled:before { content: "\ea47"; } .c-icon-carrefour-card:before { content: "\ea48"; } .c-icon-carrefour-delivery:before { content: "\ea49"; } .c-icon-carrefour-pay:before { content: "\ea4a"; } .c-icon-carrefour-plus:before { content: "\ea4b"; } .c-icon-carrefour-services:before { content: "\ea4c"; } .c-icon-cart-check:before { content: "\ea4d"; } .c-icon-cart-plus:before { content: "\ea4e"; } .c-icon-cash-register:before { content: "\ea4f"; } .c-icon-cashdesk:before { content: "\ea50"; } .c-icon-cast:before { content: "\ea51"; } .c-icon-cctv:before { content: "\ea52"; } .c-icon-chat-message:before { content: "\ea53"; } .c-icon-check-circle:before { content: "\ea54"; } .c-icon-check-out:before { content: "\ea55"; } .c-icon-check-square:before { content: "\ea56"; } .c-icon-check:before { content: "\ea57"; } .c-icon-chevron-double-down:before { content: "\ea58"; } .c-icon-chevron-double-left:before { content: "\ea59"; } .c-icon-chevron-double-right:before { content: "\ea5a"; } .c-icon-chevron-double-up:before { content: "\ea5b"; } .c-icon-chevron-down:before { content: "\ea5c"; } .c-icon-chevron-left:before { content: "\ea5d"; } .c-icon-chevron-right:before { content: "\ea5e"; } .c-icon-chevron-up:before { content: "\ea5f"; } .c-icon-chevrons-up-down:before { content: "\ea60"; } .c-icon-child-care:before { content: "\ea61"; } .c-icon-christmas-tree:before { content: "\ea62"; } .c-icon-chrome:before { content: "\ea63"; } .c-icon-circle-check-fill:before { content: "\ea64"; } .c-icon-circle-cross-fill:before { content: "\ea65"; } .c-icon-circle-info-fill:before { content: "\ea66"; } .c-icon-circle-state:before { content: "\ea67"; } .c-icon-circle-warning-fill:before { content: "\ea68"; } .c-icon-circle:before { content: "\ea69"; } .c-icon-city-car:before { content: "\ea6a"; } .c-icon-clipboard:before { content: "\ea6b"; } .c-icon-clock:before { content: "\ea6c"; } .c-icon-close:before { content: "\ea6d"; } .c-icon-cloud-download:before { content: "\ea6e"; } .c-icon-cloud-upload:before { content: "\ea6f"; } .c-icon-cloud:before { content: "\ea70"; } .c-icon-code-barre:before { content: "\ea71"; } .c-icon-code:before { content: "\ea72"; } .c-icon-codepen:before { content: "\ea73"; } .c-icon-codesandbox:before { content: "\ea74"; } .c-icon-coffee:before { content: "\ea75"; } .c-icon-collapse:before { content: "\ea76"; } .c-icon-columns:before { content: "\ea77"; } .c-icon-command:before { content: "\ea78"; } .c-icon-compass:before { content: "\ea79"; } .c-icon-computer:before { content: "\ea7a"; } .c-icon-convertible:before { content: "\ea7b"; } .c-icon-copy:before { content: "\ea7c"; } .c-icon-corner-down-left:before { content: "\ea7d"; } .c-icon-corner-down-right:before { content: "\ea7e"; } .c-icon-corner-left-up:before { content: "\ea7f"; } .c-icon-corner-left:before { content: "\ea80"; } .c-icon-corner-right-up:before { content: "\ea81"; } .c-icon-corner-right:before { content: "\ea82"; } .c-icon-corner-up-left:before { content: "\ea83"; } .c-icon-cornert-up-right:before { content: "\ea84"; } .c-icon-coupon-barcode:before { content: "\ea85"; } .c-icon-cpu:before { content: "\ea86"; } .c-icon-credit-card:before { content: "\ea87"; } .c-icon-crop:before { content: "\ea88"; } .c-icon-crosshair:before { content: "\ea89"; } .c-icon-cursor:before { content: "\ea8a"; } .c-icon-database:before { content: "\ea8b"; } .c-icon-delete-left:before { content: "\ea8c"; } .c-icon-delivery-time-slot-crf:before { content: "\ea8d"; } .c-icon-delivery-time-slot:before { content: "\ea8e"; } .c-icon-delivery:before { content: "\ea8f"; } .c-icon-diagonal-coupon-dollar:before { content: "\ea90"; } .c-icon-diagonal-coupon:before { content: "\ea91"; } .c-icon-diners:before { content: "\ea92"; } .c-icon-disc:before { content: "\ea93"; } .c-icon-dislike:before { content: "\ea94"; } .c-icon-distance:before { content: "\ea95"; } .c-icon-divide:before { content: "\ea96"; } .c-icon-dollar:before { content: "\ea97"; } .c-icon-dotted-arrow-down:before { content: "\ea98"; } .c-icon-dotted-arrow-left:before { content: "\ea99"; } .c-icon-dotted-arrow-right:before { content: "\ea9a"; } .c-icon-dotted-arrow-top:before { content: "\ea9b"; } .c-icon-download:before { content: "\ea9c"; } .c-icon-dribbble:before { content: "\ea9d"; } .c-icon-drive-time-slot:before { content: "\ea9e"; } .c-icon-drive:before { content: "\ea9f"; } .c-icon-dry-product:before { content: "\eaa0"; } .c-icon-dump-truck:before { content: "\eaa1"; } .c-icon-eco-label:before { content: "\eaa2"; } .c-icon-edit-active:before { content: "\eaa3"; } .c-icon-edit-alt:before { content: "\eaa4"; } .c-icon-edit:before { content: "\eaa5"; } .c-icon-elo:before { content: "\eaa6"; } .c-icon-error-circle:before { content: "\eaa7"; } .c-icon-error-octagon:before { content: "\eaa8"; } .c-icon-error-square:before { content: "\eaa9"; } .c-icon-euro:before { content: "\eaaa"; } .c-icon-expand:before { content: "\eaab"; } .c-icon-external-link:before { content: "\eaac"; } .c-icon-eye-off:before { content: "\eaad"; } .c-icon-eye-on:before { content: "\eaae"; } .c-icon-facebook:before { content: "\eaaf"; } .c-icon-family:before { content: "\eab0"; } .c-icon-fast-forward:before { content: "\eab1"; } .c-icon-fast-timer:before { content: "\eab2"; } .c-icon-feather:before { content: "\eab3"; } .c-icon-female:before { content: "\eab4"; } .c-icon-figma:before { content: "\eab5"; } .c-icon-file-minus:before { content: "\eab6"; } .c-icon-file-plus:before { content: "\eab7"; } .c-icon-file-text:before { content: "\eab8"; } .c-icon-file:before { content: "\eab9"; } .c-icon-film:before { content: "\eaba"; } .c-icon-filter:before { content: "\eabb"; } .c-icon-flag:before { content: "\eabc"; } .c-icon-flashing-label:before { content: "\eabd"; } .c-icon-folder-minus:before { content: "\eabe"; } .c-icon-folder-plus:before { content: "\eabf"; } .c-icon-folder:before { content: "\eac0"; } .c-icon-framer:before { content: "\eac1"; } .c-icon-fresh-product:before { content: "\eac2"; } .c-icon-garden-center:before { content: "\eac3"; } .c-icon-gas-cylinder:before { content: "\eac4"; } .c-icon-gas-station:before { content: "\eac5"; } .c-icon-gateway:before { content: "\eac6"; } .c-icon-gift-card:before { content: "\eac7"; } .c-icon-gift:before { content: "\eac8"; } .c-icon-git-branch:before { content: "\eac9"; } .c-icon-git-commit:before { content: "\eaca"; } .c-icon-git-merge:before { content: "\eacb"; } .c-icon-git-pull-request:before { content: "\eacc"; } .c-icon-github:before { content: "\eacd"; } .c-icon-gitlab:before { content: "\eace"; } .c-icon-globe:before { content: "\eacf"; } .c-icon-google-drive:before { content: "\ead0"; } .c-icon-grid:before { content: "\ead1"; } .c-icon-handicapped:before { content: "\ead2"; } .c-icon-hard-drive:before { content: "\ead3"; } .c-icon-hash:before { content: "\ead4"; } .c-icon-headphones:before { content: "\ead5"; } .c-icon-help-circle:before { content: "\ead6"; } .c-icon-help:before { content: "\ead7"; } .c-icon-hexagon:before { content: "\ead8"; } .c-icon-home-filled:before { content: "\ead9"; } .c-icon-home:before { content: "\eada"; } .c-icon-hourglass:before { content: "\eadb"; } .c-icon-hybrid:before { content: "\eadc"; } .c-icon-identity-picture:before { content: "\eadd"; } .c-icon-image:before { content: "\eade"; } .c-icon-images:before { content: "\eadf"; } .c-icon-inbox:before { content: "\eae0"; } .c-icon-info-circle:before { content: "\eae1"; } .c-icon-ingredients:before { content: "\eae2"; } .c-icon-instagram:before { content: "\eae3"; } .c-icon-intercom:before { content: "\eae4"; } .c-icon-inventory:before { content: "\eae5"; } .c-icon-italic:before { content: "\eae6"; } .c-icon-itinerary-fill:before { content: "\eae7"; } .c-icon-itinerary:before { content: "\eae8"; } .c-icon-jewelry-store:before { content: "\eae9"; } .c-icon-key-alt:before { content: "\eaea"; } .c-icon-key:before { content: "\eaeb"; } .c-icon-laundry:before { content: "\eaec"; } .c-icon-layers:before { content: "\eaed"; } .c-icon-layout:before { content: "\eaee"; } .c-icon-life-buoy:before { content: "\eaef"; } .c-icon-lighbulb-on:before { content: "\eaf0"; } .c-icon-lightbulb:before { content: "\eaf1"; } .c-icon-like-filled:before { content: "\eaf2"; } .c-icon-like-outline:before { content: "\eaf3"; } .c-icon-like:before { content: "\eaf4"; } .c-icon-link-alt:before { content: "\eaf5"; } .c-icon-link:before { content: "\eaf6"; } .c-icon-linkedin:before { content: "\eaf7"; } .c-icon-list-item:before { content: "\eaf8"; } .c-icon-list:before { content: "\eaf9"; } .c-icon-loading:before { content: "\eafa"; } .c-icon-localization-active:before { content: "\eafb"; } .c-icon-localization-inactive:before { content: "\eafc"; } .c-icon-lock-alt:before { content: "\eafd"; } .c-icon-lock:before { content: "\eafe"; } .c-icon-log-in:before { content: "\eaff"; } .c-icon-log-out:before { content: "\eb00"; } .c-icon-mail-open:before { content: "\eb01"; } .c-icon-mail:before { content: "\eb02"; } .c-icon-male:before { content: "\eb03"; } .c-icon-manual:before { content: "\eb04"; } .c-icon-map:before { content: "\eb05"; } .c-icon-mastercard:before { content: "\eb06"; } .c-icon-maximize-alt:before { content: "\eb07"; } .c-icon-maximize:before { content: "\eb08"; } .c-icon-megaphone:before { content: "\eb09"; } .c-icon-menu:before { content: "\eb0a"; } .c-icon-message-circle:before { content: "\eb0b"; } .c-icon-message-square:before { content: "\eb0c"; } .c-icon-messages:before { content: "\eb0d"; } .c-icon-messenger:before { content: "\eb0e"; } .c-icon-mic-off:before { content: "\eb0f"; } .c-icon-mic:before { content: "\eb10"; } .c-icon-mileage:before { content: "\eb11"; } .c-icon-minibus:before { content: "\eb12"; } .c-icon-minimize:before { content: "\eb13"; } .c-icon-minus-circle:before { content: "\eb14"; } .c-icon-minus-square:before { content: "\eb15"; } .c-icon-minus:before { content: "\eb16"; } .c-icon-missing-image:before { content: "\eb17"; } .c-icon-money-dollar:before { content: "\eb18"; } .c-icon-money:before { content: "\eb19"; } .c-icon-moon:before { content: "\eb1a"; } .c-icon-more-horizontal:before { content: "\eb1b"; } .c-icon-more-vertical:before { content: "\eb1c"; } .c-icon-mouse-pointer:before { content: "\eb1d"; } .c-icon-move:before { content: "\eb1e"; } .c-icon-movie:before { content: "\eb1f"; } .c-icon-multipage:before { content: "\eb20"; } .c-icon-music:before { content: "\eb21"; } .c-icon-my-products-fav:before { content: "\eb22"; } .c-icon-my-products:before { content: "\eb23"; } .c-icon-navigation-alt:before { content: "\eb24"; } .c-icon-navigation:before { content: "\eb25"; } .c-icon-no-bag:before { content: "\eb26"; } .c-icon-nutritional-value:before { content: "\eb27"; } .c-icon-octagon:before { content: "\eb28"; } .c-icon-pallet:before { content: "\eb29"; } .c-icon-parcel-alt:before { content: "\eb2a"; } .c-icon-parcel-relay:before { content: "\eb2b"; } .c-icon-parcel:before { content: "\eb2c"; } .c-icon-parking:before { content: "\eb2d"; } .c-icon-pause-circle:before { content: "\eb2e"; } .c-icon-pause:before { content: "\eb2f"; } .c-icon-pedestrian:before { content: "\eb30"; } .c-icon-pen-tool:before { content: "\eb31"; } .c-icon-percent:before { content: "\eb32"; } .c-icon-phone-call:before { content: "\eb33"; } .c-icon-phone-forwarded:before { content: "\eb34"; } .c-icon-phone-incoming:before { content: "\eb35"; } .c-icon-phone-missed:before { content: "\eb36"; } .c-icon-phone-off:before { content: "\eb37"; } .c-icon-phone-outgoing:before { content: "\eb38"; } .c-icon-phone:before { content: "\eb39"; } .c-icon-photocopy:before { content: "\eb3a"; } .c-icon-pie-chart:before { content: "\eb3b"; } .c-icon-pin-filled:before { content: "\eb3c"; } .c-icon-pin-house:before { content: "\eb3d"; } .c-icon-pin-outline:before { content: "\eb3e"; } .c-icon-pinterest:before { content: "\eb3f"; } .c-icon-pix:before { content: "\eb40"; } .c-icon-placeholder:before { content: "\eb41"; } .c-icon-play-circle:before { content: "\eb42"; } .c-icon-play:before { content: "\eb43"; } .c-icon-plus-circle:before { content: "\eb44"; } .c-icon-plus-square:before { content: "\eb45"; } .c-icon-plus:before { content: "\eb46"; } .c-icon-pocket:before { content: "\eb47"; } .c-icon-post-office:before { content: "\eb48"; } .c-icon-power:before { content: "\eb49"; } .c-icon-preparation:before { content: "\eb4a"; } .c-icon-press:before { content: "\eb4b"; } .c-icon-prime:before { content: "\eb4c"; } .c-icon-printer:before { content: "\eb4d"; } .c-icon-product-list:before { content: "\eb4e"; } .c-icon-products:before { content: "\eb4f"; } .c-icon-promo:before { content: "\eb50"; } .c-icon-promotion-filled:before { content: "\eb51"; } .c-icon-promotion:before { content: "\eb52"; } .c-icon-radio:before { content: "\eb53"; } .c-icon-receiving:before { content: "\eb54"; } .c-icon-record:before { content: "\eb55"; } .c-icon-refresh-cycle:before { content: "\eb56"; } .c-icon-refresh:before { content: "\eb57"; } .c-icon-refrigerated-trailer:before { content: "\eb58"; } .c-icon-repeat:before { content: "\eb59"; } .c-icon-replace-horizontal:before { content: "\eb5a"; } .c-icon-replace-vertical:before { content: "\eb5b"; } .c-icon-restaurant:before { content: "\eb5c"; } .c-icon-return-product:before { content: "\eb5d"; } .c-icon-reversing-camera:before { content: "\eb5e"; } .c-icon-rewind:before { content: "\eb5f"; } .c-icon-rotate-left:before { content: "\eb60"; } .c-icon-rotate-right:before { content: "\eb61"; } .c-icon-rss:before { content: "\eb62"; } .c-icon-ruler:before { content: "\eb63"; } .c-icon-save:before { content: "\eb64"; } .c-icon-scan-code:before { content: "\eb65"; } .c-icon-scan-coupon:before { content: "\eb66"; } .c-icon-scan-lib:before { content: "\eb67"; } .c-icon-scan-search:before { content: "\eb68"; } .c-icon-scan:before { content: "\eb69"; } .c-icon-scissors:before { content: "\eb6a"; } .c-icon-score:before { content: "\eb6b"; } .c-icon-search-shelves-filled:before { content: "\eb6c"; } .c-icon-search-shelves:before { content: "\eb6d"; } .c-icon-search:before { content: "\eb6e"; } .c-icon-sedan:before { content: "\eb6f"; } .c-icon-send:before { content: "\eb70"; } .c-icon-server:before { content: "\eb71"; } .c-icon-settings:before { content: "\eb72"; } .c-icon-share:before { content: "\eb73"; } .c-icon-shield-off:before { content: "\eb74"; } .c-icon-shield:before { content: "\eb75"; } .c-icon-shopping-cart-filled:before { content: "\eb76"; } .c-icon-shopping-cart:before { content: "\eb77"; } .c-icon-shuffle:before { content: "\eb78"; } .c-icon-sidebar:before { content: "\eb79"; } .c-icon-skip-back:before { content: "\eb7a"; } .c-icon-skip-forward:before { content: "\eb7b"; } .c-icon-slack:before { content: "\eb7c"; } .c-icon-slash-circle:before { content: "\eb7d"; } .c-icon-sliders:before { content: "\eb7e"; } .c-icon-smart-features:before { content: "\eb7f"; } .c-icon-smartphone:before { content: "\eb80"; } .c-icon-smiley-happy:before { content: "\eb81"; } .c-icon-smiley-neutral:before { content: "\eb82"; } .c-icon-smiley-sad:before { content: "\eb83"; } .c-icon-snow:before { content: "\eb84"; } .c-icon-sofa:before { content: "\eb85"; } .c-icon-software:before { content: "\eb86"; } .c-icon-speaker:before { content: "\eb87"; } .c-icon-spinner:before { content: "\eb88"; } .c-icon-square:before { content: "\eb89"; } .c-icon-star-filled:before { content: "\eb8a"; } .c-icon-star-outline:before { content: "\eb8b"; } .c-icon-star-semi-filled:before { content: "\eb8c"; } .c-icon-storage:before { content: "\eb8d"; } .c-icon-store-filled:before { content: "\eb8e"; } .c-icon-store:before { content: "\eb8f"; } .c-icon-straight-arrow-down-left:before { content: "\eb90"; } .c-icon-straight-arrow-down-right:before { content: "\eb91"; } .c-icon-straight-arrow-down:before { content: "\eb92"; } .c-icon-straight-arrow-left:before { content: "\eb93"; } .c-icon-straight-arrow-right:before { content: "\eb94"; } .c-icon-straight-arrow-up-left:before { content: "\eb95"; } .c-icon-straight-arrow-up-right:before { content: "\eb96"; } .c-icon-straight-arrow-up:before { content: "\eb97"; } .c-icon-sun:before { content: "\eb98"; } .c-icon-sunrise:before { content: "\eb99"; } .c-icon-sunset:before { content: "\eb9a"; } .c-icon-suv:before { content: "\eb9b"; } .c-icon-table:before { content: "\eb9c"; } .c-icon-tablet:before { content: "\eb9d"; } .c-icon-target:before { content: "\eb9e"; } .c-icon-terminal:before { content: "\eb9f"; } .c-icon-text:before { content: "\eba0"; } .c-icon-thermometer:before { content: "\eba1"; } .c-icon-ticket-restaurant:before { content: "\eba2"; } .c-icon-tiktok:before { content: "\eba3"; } .c-icon-tire-inflation:before { content: "\eba4"; } .c-icon-toggle-left:before { content: "\eba5"; } .c-icon-toggle-right:before { content: "\eba6"; } .c-icon-tool:before { content: "\eba7"; } .c-icon-tpe:before { content: "\eba8"; } .c-icon-train:before { content: "\eba9"; } .c-icon-trash-alt:before { content: "\ebaa"; } .c-icon-trash:before { content: "\ebab"; } .c-icon-trello:before { content: "\ebac"; } .c-icon-trending-down:before { content: "\ebad"; } .c-icon-trending-up:before { content: "\ebae"; } .c-icon-triangle:before { content: "\ebaf"; } .c-icon-trolley:before { content: "\ebb0"; } .c-icon-truck-alt:before { content: "\ebb1"; } .c-icon-truck-s-alt:before { content: "\ebb2"; } .c-icon-truck-s:before { content: "\ebb3"; } .c-icon-truck:before { content: "\ebb4"; } .c-icon-tv:before { content: "\ebb5"; } .c-icon-twitch:before { content: "\ebb6"; } .c-icon-twitter:before { content: "\ebb7"; } .c-icon-two-hours-timer:before { content: "\ebb8"; } .c-icon-umbrella:before { content: "\ebb9"; } .c-icon-underline:before { content: "\ebba"; } .c-icon-unlock:before { content: "\ebbb"; } .c-icon-upload:before { content: "\ebbc"; } .c-icon-user-card:before { content: "\ebbd"; } .c-icon-user-check:before { content: "\ebbe"; } .c-icon-user-cross:before { content: "\ebbf"; } .c-icon-user-minus:before { content: "\ebc0"; } .c-icon-user-plus:before { content: "\ebc1"; } .c-icon-user:before { content: "\ebc2"; } .c-icon-users:before { content: "\ebc3"; } .c-icon-van-alt:before { content: "\ebc4"; } .c-icon-van:before { content: "\ebc5"; } .c-icon-variable-weight-alt:before { content: "\ebc6"; } .c-icon-variable-weight:before { content: "\ebc7"; } .c-icon-video-off:before { content: "\ebc8"; } .c-icon-video:before { content: "\ebc9"; } .c-icon-visa:before { content: "\ebca"; } .c-icon-voicemail:before { content: "\ebcb"; } .c-icon-volume-minus:before { content: "\ebcc"; } .c-icon-volume-off:before { content: "\ebcd"; } .c-icon-volume-plus:before { content: "\ebce"; } .c-icon-volume:before { content: "\ebcf"; } .c-icon-walk:before { content: "\ebd0"; } .c-icon-warning-fill:before { content: "\ebd1"; } .c-icon-watch:before { content: "\ebd2"; } .c-icon-water:before { content: "\ebd3"; } .c-icon-whatsapp:before { content: "\ebd4"; } .c-icon-wifi-off:before { content: "\ebd5"; } .c-icon-wifi:before { content: "\ebd6"; } .c-icon-wind:before { content: "\ebd7"; } .c-icon-x-twitter:before { content: "\ebd8"; } .c-icon-youtube:before { content: "\ebd9"; } .c-icon-zap-off:before { content: "\ebda"; } .c-icon-zap:before { content: "\ebdb"; } .c-icon-zoom-in:before { content: "\ebdc"; } .c-icon-zoom-out:before { content: "\ebdd"; } .slider-target, .slider-target * { -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; touch-action: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .slider-target { position: relative; } .slider-base, .slider-connects { height: 100%; position: relative; width: 100%; z-index: 1; } .slider-connects { overflow: hidden; z-index: 0; } .slider-connect, .slider-origin { height: 100%; position: absolute; right: 0; top: 0; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform-style: preserve-3d; transform-style: flat; width: 100%; will-change: transform; z-index: 1; } .slider-txt-dir-rtl.slider-horizontal .slider-origin { left: 0; right: auto; } .slider-vertical .slider-origin { top: -100%; width: 0; } .slider-horizontal .slider-origin { height: 0; } .slider-handle { -webkit-backface-visibility: hidden; backface-visibility: hidden; position: absolute; } .slider-touch-area { height: 100%; width: 100%; } .slider-state-tap .slider-connect, .slider-state-tap .slider-origin { transition: transform .3s; } .slider-state-drag * { cursor: inherit !important; } .slider-tooltip-drag .slider-tooltip, .slider-tooltip-focus .slider-tooltip { display: none !important; } .slider-tooltip-drag .slider-active .slider-tooltip, .slider-tooltip-drag.slider-state-drag .slider-tooltip:not(.slider-tooltip-hidden), .slider-tooltip-focus.slider-focused .slider-tooltip:not(.slider-tooltip-hidden) { display: block !important; } .slider-horizontal { height: var(--slider-height, 6px); } .slider-horizontal .slider-handle { height: var(--slider-handle-height, 16px); right: calc(var(--slider-handle-width, 16px) / 2 * -1); top: calc((var(--slider-handle-height, 16px) - var(--slider-height, 6px)) / 2 * -1 - 1px); width: var(--slider-handle-width, 16px); } .slider-vertical { height: var(--slider-vertical-height, 300px); width: var(--slider-height, 6px); } .slider-vertical .slider-handle { bottom: calc(var(--slider-handle-width, 16px) / 2 * -1); height: var(--slider-handle-width, 16px); right: calc((var(--slider-handle-height, 16px) - var(--slider-height, 6px)) / 2 * -1 - 1px); width: var(--slider-handle-height, 16px); } .slider-txt-dir-rtl.slider-horizontal .slider-handle { left: calc(var(--slider-handle-width, 16px) / 2 * -1); right: auto; } .slider-base { background-color: var(--slider-bg, #d1d5db); } .slider-base, .slider-connects { border-radius: var(--slider-radius, 9999px); } .slider-connect { background: var(--slider-connect-bg, #10b981); cursor: pointer; } .slider-draggable { cursor: ew-resize; } .slider-vertical .slider-draggable { cursor: ns-resize; } .slider-handle { background: var(--slider-handle-bg, #fff); border: var(--slider-handle-border, 0); border-radius: var(--slider-handle-radius, 9999px); box-shadow: var(--slider-handle-shadow, .5px .5px 2px 1px rgba(0, 0, 0, .32)); cursor: -webkit-grab; cursor: grab; height: var(--slider-handle-height, 16px); width: var(--slider-handle-width, 16px); } .slider-handle:focus { box-shadow: 0 0 0 var(--slider-handle-ring-width, 3px) var(--slider-handle-ring-color, rgba(16, 185, 129, .188)), var(--slider-handle-shadow, .5px .5px 2px 1px rgba(0, 0, 0, .32)); outline: none; } .slider-active { box-shadow: var(--slider-handle-shadow-active, .5px .5px 2px 1px rgba(0, 0, 0, .42)); cursor: -webkit-grabbing; cursor: grabbing; } [disabled] .slider-connect { background: var(--slider-connect-bg-disabled, #9ca3af); } [disabled] .slider-handle, [disabled].slider-handle, [disabled].slider-target { cursor: not-allowed; } [disabled] .slider-tooltip { background: var(--slider-tooltip-bg-disabled, #9ca3af); border-color: var(--slider-tooltip-bg-disabled, #9ca3af); } .slider-tooltip { background: var(--slider-tooltip-bg, #10b981); border: 1px solid var(--slider-tooltip-bg, #10b981); border-radius: var(--slider-tooltip-radius, 5px); color: var(--slider-tooltip-color, #fff); display: block; font-size: var(--slider-tooltip-font-size, .875rem); font-weight: var(--slider-tooltip-font-weight, 600); line-height: var(--slider-tooltip-line-height, 1.25rem); min-width: var(--slider-tooltip-min-width, 20px); padding: var(--slider-tooltip-py, 2px) var(--slider-tooltip-px, 6px); position: absolute; text-align: center; white-space: nowrap; } .slider-horizontal .slider-tooltip-top { bottom: calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px)); left: 50%; transform: translate(-50%); } .slider-horizontal .slider-tooltip-top:before { border: var(--slider-tooltip-arrow-size, 5px) solid transparent; border-top-color: inherit; bottom: calc(var(--slider-tooltip-arrow-size, 5px) * -2); content: ""; height: 0; left: 50%; position: absolute; transform: translate(-50%); width: 0; } .slider-horizontal .slider-tooltip-bottom { left: 50%; top: calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px)); transform: translate(-50%); } .slider-horizontal .slider-tooltip-bottom:before { border: var(--slider-tooltip-arrow-size, 5px) solid transparent; border-bottom-color: inherit; content: ""; height: 0; left: 50%; position: absolute; top: calc(var(--slider-tooltip-arrow-size, 5px) * -2); transform: translate(-50%); width: 0; } .slider-vertical .slider-tooltip-left { right: calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px)); top: 50%; transform: translateY(-50%); } .slider-vertical .slider-tooltip-left:before { border: var(--slider-tooltip-arrow-size, 5px) solid transparent; border-left-color: inherit; content: ""; height: 0; position: absolute; right: calc(var(--slider-tooltip-arrow-size, 5px) * -2); top: 50%; transform: translateY(-50%); width: 0; } .slider-vertical .slider-tooltip-right { left: calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px)); top: 50%; transform: translateY(-50%); } .slider-vertical .slider-tooltip-right:before { border: var(--slider-tooltip-arrow-size, 5px) solid transparent; border-right-color: inherit; content: ""; height: 0; left: calc(var(--slider-tooltip-arrow-size, 5px) * -2); position: absolute; top: 50%; transform: translateY(-50%); width: 0; } .slider-horizontal .slider-origin > .slider-tooltip { left: auto; transform: translate(50%); } .slider-horizontal .slider-origin > .slider-tooltip-top { bottom: calc(var(--slider-tooltip-arrow-size, 5px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px)) / 2 + var(--slider-tooltip-distance, 3px) + 1px); } .slider-horizontal .slider-origin > .slider-tooltip-bottom { top: calc(var(--slider-tooltip-arrow-size, 5px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px)) / 2 + var(--slider-tooltip-distance, 3px) + var(--slider-height, 6px) - 1px); } .slider-vertical .slider-origin > .slider-tooltip { top: auto; transform: translateY(calc((var(--slider-tooltip-line-height, 1.25rem) - var(--slider-tooltip-py, 2px)) * -1 + 1px)); } .slider-vertical .slider-origin > .slider-tooltip-left { right: calc(var(--slider-tooltip-arrow-size, 5px) + var(--slider-height, 6px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px)) / 2 + var(--slider-tooltip-distance, 3px) - 1px); } .slider-vertical .slider-origin > .slider-tooltip-right { left: calc(var(--slider-tooltip-arrow-size, 5px) + var(--slider-height, 6px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px)) / 2 + var(--slider-tooltip-distance, 3px) - var(--slider-height, 6px) + 1px); } * { font-family: var(--ds-font-family); box-sizing: border-box; } *:before { box-sizing: border-box; } p { margin: 0; line-height: 1.4rem; } ul { padding-left: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .c-accordion { width: 100%; color: var(--ds-color-persistent-text-accordion-default); background-color: var(--ds-color-persistent-background-accordion-default); border-top: 1px solid var(--ds-color-persistent-border-accordion-default); } .c-accordion__title-container { width: 100%; display: flex; cursor: pointer; gap: var(--ds-spacing-xs); align-items: center; flex-direction: row; justify-content: space-between; padding: var(--ds-spacing-s); -webkit-user-select: none; user-select: none; } .c-accordion__title-container::-webkit-details-marker { display: none; } .c-accordion__title { flex-grow: 1; gap: var(--ds-spacing-xs); display: flex; align-items: center; } .c-accordion .c-icon { font-size: 1.5rem; } .c-accordion__slot { padding: 0 var(--ds-spacing-s) var(--ds-spacing-s); } .c-autocomplete { position: relative; } .c-autocomplete__suggestions { width: 100%; display: none; position: absolute; flex-direction: column; box-shadow: var(--ds-shadow-up-xs); margin: var(--ds-spacing-xxs) 0 0 0; border-radius: var(--ds-border-radius-s); background-color: var(--ds-color-interactive-background-input-autosuggest-item-active); overflow: auto; max-height: 320px; } .c-autocomplete__suggestions--position-relative { position: relative; } .c-autocomplete:focus-within .c-autocomplete__suggestions { display: flex; } .c-autocomplete--has-suggestions:focus-within .c-base-input__helper-text { display: none; } .c-autocomplete__suggestion { z-index: 2; margin: 0; padding: 0; line-height: 24px; font-size: 1rem; list-style-type: none; color: var(--ds-color-persistent-content-main-primary); background-color: var(--ds-color-persistent-background-main-primary); outline-offset: -1px; } .c-autocomplete__suggestion:first-child { border-top-left-radius: var(--ds-border-radius-s); border-top-right-radius: var(--ds-border-radius-s); } .c-autocomplete__suggestion:last-child { border-bottom-left-radius: var(--ds-border-radius-s); border-bottom-right-radius: var(--ds-border-radius-s); } .c-autocomplete__suggestion + .c-autocomplete__suggestion { border-top: 1px solid var(--ds-color-persistent-border-main-primary); } .c-autocomplete__suggestion--clickable { color: var(--ds-color-interactive-content-main-active); font-weight: 400; } .c-autocomplete__suggestion-match--partial { font-weight: 700; } .c-autocomplete__suggestion-match--exact { font-weight: 400; } .c-autocomplete__suggestion-button { width: 100%; cursor: pointer; text-align: left; padding: var(--ds-spacing-s); display: inline-flex; align-items: center; gap: var(--ds-spacing-xs); font-weight: 400; outline-offset: -1px; background-color: transparent; border: none; } .c-autocomplete__suggestion-button i { font-size: 1.25rem; } .c-autocomplete__suggestion-icon { width: var(--ds-sizing-m); height: var(--ds-sizing-m); } .c-autocomplete__suggestion--loading { display: flex; padding: var(--ds-spacing-s); transition: all .3s; } .c-autocomplete__suggestion--loading .c-loader { font-size: 1.5rem; } .c-autocomplete__suggestion--highlighted, .c-autocomplete__suggestion:focus-within, .c-autocomplete__suggestion:hover { background-color: var(--ds-color-interactive-background-input-autosuggest-item-hover); z-index: 3; } .c-autocomplete__suggestion:focus-within { border: 1px solid var(--ds-color-interactive-border-input-focus); } .c-autocomplete__suggestion:active { background-color: var(--ds-color-interactive-background-input-autosuggest-item-pressed); z-index: 3; } .c-badge { border-radius: 10px; display: inline-flex; font-weight: 700; align-items: center; justify-content: center; } .c-badge--size-s { padding: 0 4px; font-size: .75rem; line-height: 1rem; } .c-badge--size-m { padding: 0 6px; font-size: .875rem; line-height: 1.25rem; } .c-badge--status-neutral { color: var(--ds-color-persistent-text-primary); background-color: var(--ds-color-persistent-background-alternate); } .c-badge--status-notification { color: var(--ds-color-persistent-text-reversed-primary); background-color: var(--ds-color-persistent-background-notification); } .c-badge--status-info { color: var(--ds-color-persistent-text-reversed-primary); background-color: var(--ds-color-persistent-background-badge-information); } .c-badge--status-negative { color: var(--ds-color-persistent-text-reversed-primary); background-color: var(--ds-color-persistent-background-badge-negative); } .c-badge--status-positive { color: var(--ds-color-persistent-text-reversed-primary); background-color: var(--ds-color-persistent-background-badge-positive); } .c-badge--status-warning { color: var(--ds-color-persistent-text-reversed-primary); background-color: var(--ds-color-persistent-background-badge-warning); } .c-badge--status-default { color: var(--ds-color-persistent-content-main-primary); background-color: var(--ds-color-persistent-background-alternate); } .c-badge--status-primary { color: var(--ds-color-persistent-text-reversed-primary); background-color: var(--ds-color-core-content-functional-information); } .c-badge--status-disabled { color: var(--ds-color-persistent-text-primary); background-color: var(--ds-color-persistent-background-alternate); opacity: .6; } .c-badge--status-notification.c-badge--empty { padding: 0; width: var(--ds-sizing-xs); height: var(--ds-sizing-xs); } .c-banner { border-radius: var(--ds-border-radius-m); } .c-banner--block .c-banner__content { align-items: flex-start; } @media only screen and (min-width: 768px) { .c-banner--block .c-banner__body__container { flex-direction: column; align-items: flex-start; } } .c-banner__content { display: flex; flex-direction: row; gap: var(--ds-spacing-xs); padding: var(--ds-spacing-s); align-items: flex-start; justify-content: space-between; } @media only screen and (min-width: 768px) { .c-banner__content { align-items: center; } } .c-banner--status-info { border: 1px solid var(--ds-color-core-border-functional-information); background-color: var(--ds-color-core-background-functional-information); } .c-banner__status-icon__container .c-icon { font-size: 1.5rem; color: var(--ds-color-core-background-functional-information-reversed); } .c-banner--status-error { border: 1px solid var(--ds-color-core-border-functional-negative); background-color: var(--ds-color-core-background-functional-negative); } .c-banner__status-icon__container .c-icon { font-size: 1.5rem; color: var(--ds-color-core-background-functional-negative-reversed); } .c-banner--status-success { border: 1px solid var(--ds-color-core-border-functional-positive); background-color: var(--ds-color-core-background-functional-positive); } .c-banner__status-icon__container .c-icon { font-size: 1.5rem; color: var(--ds-color-core-background-functional-positive-reversed); } .c-banner--status-warning { border: 1px solid var(--ds-color-core-border-functional-warning); background-color: var(--ds-color-core-background-functional-warning); } .c-banner__status-icon__container .c-icon { font-size: 1.5rem; color: var(--ds-color-core-background-functional-warning-reversed); } .c-banner__title { flex-wrap: nowrap; word-break: keep-all; font-size: 1rem; font-weight: 700; color: var(--ds-color-core-content-main-primary); } .c-banner__status-icon { width: var(--ds-sizing-m); height: var(--ds-sizing-m); display: flex; align-items: center; } .c-banner__body { font-size: .875rem; color: var(--ds-color-core-content-main-secondary); } .c-banner__body__container { flex-direction: column; align-items: flex-start; flex-grow: 1; display: flex; gap: var(--ds-spacing-xs); justify-content: flex-start; } @media only screen and (min-width: 768px) { .c-banner__body__container { flex-direction: row; align-items: center; } } .c-banner__close-button { cursor: pointer; } .c-banner__close-button__icon { align-items: center; font-size: var(--ds-sizing-m); color: var(--ds-color-interactive-active-monochrome-primary); } .c-base-input { display: flex; flex-direction: column; gap: var(--ds-spacing-xxs); } .c-base-input__container { width: 100%; display: flex; position: relative; flex-direction: row; align-items: center; border-radius: var(--ds-border-radius-s); border: 1px solid var(--ds-color-interactive-border-input-active); background-color: var(--ds-color-interactive-background-input-active); transition: var(--c-input-transition); } .c-base-input__container:hover { border: 1px solid var(--ds-color-interactive-border-input-hover); } .c-base-input__input-group { width: 100%; max-width: 100%; display: flex; } .c-base-input__label { font-size: .875rem; font-weight: 400; color: var(--ds-color-interactive-text-input-label-default); transition: var(--c-input-transition); margin-bottom: var(--ds-spacing-xxs); display: block; cursor: text; pointer-events: none; } @-moz-document url-prefix("") { .c-base-input__label { line-height: initial; } } @media not all and (min-resolution: .001dpcm) { @supports (-webkit-appearance: none) { .c-base-input__label { line-height: initial; } } } .c-base-input__label { margin-bottom: 0; } .c-base-input__input { width: 100%; border: none; outline: none; color: var(--ds-color-persistent-text-primary); padding-top: var(--ds-spacing-s); padding-bottom: var(--ds-spacing-s); font-size: 1rem; border-radius: var(--ds-border-radius-s); font-weight: 400; transition: var(--c-input-transition); line-height: 1.375; min-height: 20px; min-width: min-content; } .c-base-input__input ::selection { background: var(--ds-color-persistent-background-functional-main-information); } .c-base-input__input::placeholder { font-size: 1rem; font-weight: 400; color: var(--ds-color-interactive-text-input-placeholder); } .c-base-input__input:-webkit-autofill { box-shadow: 0 0 0 62.5rem var(--ds-color-core-background-main-primary) inset; } .c-base-input__message { font-size: .75rem; margin-top: var(--ds-spacing-xxs); display: flex; flex-direction: column; } .c-base-input__message { margin-top: 0; } .c-base-input__helper-text:empty { display: none; } .c-base-input__helper-text p { font-weight: 400; color: var(--ds-color-persistent-text-secondary); } .c-base-input__helper-text button { cursor: pointer; } .c-base-input__error-text p { font-weight: 400; color: var(--ds-color-persistent-text-functional-negative); } .c-base-input__success-text p { font-weight: 400; color: var(--ds-color-persistent-text-functional-positive); } .c-base-input__modal-button { max-width: 12rem; } .c-base-input svg { fill: var(--ds-color-persistent-text-primary); } .c-base-input--disabled .c-base-input__container, .c-base-input--disabled .c-base-input__input { background-color: transparent; opacity: .6; } .c-base-input--disabled .c-base-input__container:hover { border: 1px solid var(--ds-color-interactive-border-input-hover); } .c-base-input--disabled .c-base-input__label, .c-base-input--disabled .c-base-input__input, .c-base-input--disabled .c-base-input__helper-text p, .c-base-input--disabled .c-base-input__helper-text a, .c-base-input--disabled .c-base-input__helper-text button { cursor: default; opacity: .8; } .c-base-input--readonly .c-base-input__container, .c-base-input--readonly .c-base-input__input { background-color: var(--ds-color-interactive-background-input-readonly); } .c-base-input:focus-within .c-base-input__container { border: 1px solid var(--ds-color-interactive-border-input-focus); outline: 1px solid var(--ds-color-interactive-border-input-focus); } .c-base-input:focus-within .c-base-input__input::placeholder { opacity: 1; } .c-base-input--has-error .c-base-input__container { border: 1px solid var(--ds-color-interactive-border-input-error-active); } .c-base-input--has-error .c-base-input__label { color: var(--ds-color-persistent-text-functional-negative); } .c-base-input--has-success .c-base-input__container { border: 1px solid var(--ds-color-core-border-functional-positive); } .c-base-input button { cursor: pointer; } .c-base-input--size-s .c-base-input__input { padding-top: var(--ds-spacing-xs); padding-bottom: var(--ds-spacing-xs); } .c-base-input--size-s .c-base-input__container { gap: var(--ds-spacing-xs); padding-left: .75rem; padding-right: .75rem; } .c-base-input--size-s .c-base-input__append { padding: var(--ds-spacing-xxs); } .c-base-input--size-s .c-base-input__prepend__icon__container, .c-base-input--size-s .c-base-input__append__icon__container { width: var(--ds-sizing-m); height: var(--ds-sizing-m); display: flex; align-items: center; justify-content: center; } .c-base-input--size-m .c-base-input__input { padding-top: var(--ds-spacing-s); padding-bottom: var(--ds-spacing-s); } .c-base-input--size-m .c-base-input__container { gap: var(--ds-spacing-xs); padding-left: var(--ds-spacing-s); padding-right: var(--ds-spacing-s); } .c-base-input--has-prepend-icon.c-base-input--size-s .c-base-input__container, .c-base-input--has-append-icon.c-base-input--size-s .c-base-input__container, .c-base-input--has-prepend-icon.c-base-input--size-m .c-base-input__container, .c-base-input--has-append-icon.c-base-input--size-m .c-base-input__container { gap: var(--ds-spacing-xs); padding-left: var(--ds-spacing-xs); padding-right: var(--ds-spacing-xs); } .c-base-input--has-input-button .c-base-input__container { padding-right: 0; } .c-base-input__container { display: flex; align-items: center; gap: var(--ds-spacing-s); } .c-base-input__prepend, .c-base-input__append { font-size: .75rem; font-weight: 700; color: var(--ds-color-core-content-main-tertiary); padding: var(--ds-spacing-xxs) var(--ds-spacing-xs); background-color: var(--ds-color-core-background-main-secondary); display: flex; align-items: center; } .c-base-input__prepend__icon, .c-base-input__append__icon { font-size: 1.4rem; color: var(--ds-color-persistent-icon-primary); height: 100%; } .c-base-input__prepend__icon__container, .c-base-input__append__icon__container { padding: 0; width: var(--ds-sizing-m); height: var(--ds-sizing-m); background-color: transparent; border-color: transparent; display: flex; align-items: center; justify-content: center; } .c-base-input__prepend svg, .c-base-input__append svg { fill: var(--ds-color-persistent-icon-primary); } .c-base-input__prepend:empty, .c-base-input__append:empty { display: none; } .c-base-input__prepend { flex-shrink: 0; } .c-base-input__clear-button { width: var(--ds-sizing-m); height: var(--ds-sizing-m); cursor: pointer; padding: var(--ds-spacing-xxxs); display: flex; align-items: center; justify-content: center; background-color: transparent; border: none; } .c-base-input__clear-button__container { display: none; width: var(--ds-sizing-m); height: var(--ds-sizing-m); flex-shrink: 0; line-height: 1; } .c-base-input__clear-button__icon { width: 100%; height: 100%; font-size: 1.4rem; color: var(--ds-color-persistent-icon-primary); } .c-base-input__clear-button__icon:hover { fill: var(--ds-color-persistent-icon-primary); } .c-base-input--has-value .c-base-input__input-group { position: static; } .c-base-input--has-value:focus-within .c-base-input__clear-button__container { display: flex; } .c-base-input--has-preprend .c-base-input__input { padding-left: 0; } .c-base-input__button .c-button { height: 100%; padding: .938rem; border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: .1875rem; border-bottom-right-radius: .1875rem; border: 1px solid var(--ds-color-interactive-background-icon-button-filled-main-active); outline: 1px solid var(--ds-color-interactive-background-icon-button-filled-main-active); } .c-base-input__button .c-button:hover { border-color: var(--ds-color-interactive-background-icon-button-filled-main-hover); outline-color: var(--ds-color-interactive-background-icon-button-filled-main-hover); } .c-base-input__button .c-button:focus-visible { border-color: var(--ds-color-interactive-border-focus); background-color: var(--ds-color-interactive-border-focus); } .c-breadcrumbs { --c-breadcrumb-color: var(--ds-color-interactive-text-link-accent-active); margin: 0; padding: 0; align-items: center; gap: var(--ds-spacing-xs); display: flex; } .c-breadcrumbs__breadcrumb { display: none; align-items: center; gap: var(--ds-spacing-xs); color: var(--c-breadcrumb-color); } .c-breadcrumbs__breadcrumb--parent-page { display: flex; } @media only screen and (min-width: 768px) { .c-breadcrumbs__breadcrumb { display: flex; } } .c-breadcrumbs__separator { color: var(--c-breadcrumb-color); display: none !important; align-items: center; } @media only screen and (min-width: 768px) { .c-breadcrumbs__separator { display: flex !important; font-size: 1.5rem; } } .c-breadcrumbs__icon { align-items: center; height: var(--ds-sizing-s); font-size: var(--ds-sizing-s); color: var(--c-breadcrumb-color); } @media only screen and (min-width: 768px) { .c-breadcrumbs__icon--parent-page { display: none; } } @media only screen and (min-width: 768px) { .c-breadcrumbs__icon--arrow-left { display: none !important; font-size: var(--ds-sizing-s); height: var(--ds-sizing-s); color: var(--c-breadcrumb-color); } } @media only screen and (max-width: 768px) { .c-breadcrumbs__icon--arrow-left { display: flex; } } .c-breadcrumbs--reversed { --c-breadcrumb-color: var(--ds-color-persistent-text-reversed-primary); } .c-button { cursor: pointer; font-size: 1rem; font-weight: 700; position: relative; line-height: 1.5rem; align-items: center; display: inline-flex; text-decoration: none; justify-content: center; font-family: var(--ds-font-family); border-radius: var(--ds-border-radius-s); transition: background-color .3s, color .3s; } .c-button--size-s { padding: var(--ds-spacing-xs) var(--ds-spacing-m); height: 40px; } .c-button--size-m { padding: var(--ds-spacing-s) var(--ds-spacing-m); height: 56px; } .c-button__content { width: 100%; flex-direction: row; align-items: center; gap: var(--ds-spacing-xxs); display: inline-flex; justify-content: center; } .c-button--full-width { width: 100%; } .c-button--disabled, .c-button--loading { opacity: .6; cursor: initial; pointer-events: none; } .c-button--loading .c-button__content { opacity: 0; } .c-button__icon-container { display: flex; font-size: 1.3rem; align-items: center; width: var(--ds-sizing-m); height: var(--ds-sizing-m); padding: var(--ds-spacing-xxxs); } .c-button__icon-container:empty { display: none; } .c-button__icon-container svg, .c-button__icon-container img { width: 100%; height: 100%; } .c-button__loader.c-loader { color: inherit; font-size: var(--ds-sizing-m); justify-content: center; } .c-button__loader__container { inset: 0; margin: auto; display: flex; position: absolute; justify-content: center; padding: var(--ds-spacing-xxxs); } .c-button .c-icon { font-weight: 400; } .c-button--variation-filled, .c-button--variation-primary { color: var(--ds-color-interactive-text-button-filled-main-active); } .c-button--variation-filled svg, .c-button--variation-primary svg { fill: var(--ds-color-interactive-icon-button-filled-main-active); } .c-button--variation-outlined, .c-button--variation-secondary { background-color: var(--ds-color-interactive-text-button-filled-main-active); } .c-button--variation-outlined svg, .c-button--variation-secondary svg { fill: var(--ds-color-interactive-icon-button-filled-main-active); } .c-button--variation-transparent, .c-button--variation-tertiary { padding: 0; border: none; background: none; font-size: 1rem; } .c-button--variation-transparent-small, .c-button--variation-tertiary-small { padding: 0; border: none; background: none; font-size: .875rem; } .c-button--variation-transparent-small__icon-container, .c-button--variation-tertiary-small__icon-container { width: var(--ds-sizing-s); height: var(--ds-sizing-s); } .c-button--reversed.c-button--variation-secondary, .c-button--reversed.c-button--variation-tertiary, .c-button--reversed.c-button--variation-tertiary-small { background: none; color: var(--ds-color-interactive-text-button-filled-main-reversed-active); border: 1px solid var(--ds-color-interactive-text-button-filled-main-reversed-active); } .c-button--reversed.c-button--variation-secondary svg, .c-button--reversed.c-button--variation-tertiary svg, .c-button--reversed.c-button--variation-tertiary-small svg { fill: var(--ds-color-interactive-text-button-filled-main-reversed-active); } .c-button--reversed.c-button--variation-secondary .c-button__loader, .c-button--reversed.c-button--variation-tertiary .c-button__loader, .c-button--reversed.c-button--variation-tertiary-small .c-button__loader { border-left-color: var(--ds-color-interactive-text-button-filled-main-reversed-active); border-right-color: var(--ds-color-interactive-text-button-filled-main-reversed-active); border-bottom-color: var(--ds-color-interactive-text-button-filled-main-reversed-active); border-top-color: var(--ds-color-interactive-background-button-filled-main-reversed-active); } .c-button--reversed.c-button--variation-secondary:hover, .c-button--reversed.c-button--variation-secondary:focus, .c-button--reversed.c-button--variation-tertiary:hover, .c-button--reversed.c-button--variation-tertiary:focus, .c-button--reversed.c-button--variation-tertiary-small:hover, .c-button--reversed.c-button--variation-tertiary-small:focus { color: var(--ds-color-interactive-active-reversed-hover); border: 1px solid var(--ds-color-interactive-active-reversed-hover); } .c-button--reversed.c-button--variation-secondary:hover svg, .c-button--reversed.c-button--variation-secondary:focus svg, .c-button--reversed.c-button--variation-tertiary:hover svg, .c-button--reversed.c-button--variation-tertiary:focus svg, .c-button--reversed.c-button--variation-tertiary-small:hover svg, .c-button--reversed.c-button--variation-tertiary-small:focus svg { fill: var(--ds-color-interactive-active-reversed-hover); } .c-button:focus-visible { outline: 2px solid var(--ds-color-interactive-border-focus); outline-offset: var(--ds-spacing-xxxs); } .c-button--reversed.c-button--variation-tertiary, .c-button--reversed.c-button--variation-tertiary:hover, .c-button--reversed.c-button--variation-tertiary:focus, .c-button--reversed.c-button--variation-tertiary-small, .c-button--reversed.c-button--variation-tertiary-small:hover, .c-button--reversed.c-button--variation-tertiary-small:focus { border: none; } .c-button--tone-main.c-button--variation-filled, .c-button--tone-main.c-button--variation-primary { background-color: var(--ds-color-interactive-background-button-filled-main-active); border: 1px solid var(--ds-color-interactive-background-button-filled-main-active); } .c-button--tone-main.c-button--variation-filled svg, .c-button--tone-main.c-button--variation-primary svg { fill: var(--ds-color-interactive-background-button-filled-main-active); } .c-button--tone-main.c-button--variation-filled:hover, .c-button--tone-main.c-button--variation-filled:focus, .c-button--tone-main.c-button--variation-primary:hover, .c-button--tone-main.c-button--variation-primary:focus { background-color: var(--ds-color-interactive-background-button-filled-main-hover); border: 1px solid var(--ds-color-interactive-background-button-filled-main-hover); } .c-button--tone-main.c-button--variation-filled:active, .c-button--tone-main.c-button--variation-primary:active { background-color: var(--ds-color-interactive-background-button-filled-main-pressed); border: 1px solid var(--ds-color-interactive-background-button-filled-main-pressed); } .c-button--tone-main.c-button--variation-outlined:not(.c-button--reversed), .c-button--tone-main.c-button--variation-secondary:not(.c-button--reversed) { color: var(--ds-color-interactive-background-button-filled-main-active); border: 1px solid var(--ds-color-interactive-background-button-filled-main-active); } .c-button--tone-main.c-button--variation-outlined:not(.c-button--reversed) svg, .c-button--tone-main.c-button--variation-secondary:not(.c-button--reversed) svg { fill: var(--ds-color-interactive-background-button-filled-main-active); } .c-button--tone-main.c-button--variation-outlined:not(.c-button--reversed):hover, .c-button--tone-main.c-button--variation-outlined:not(.c-button--reversed):focus, .c-button--tone-main.c-button--variation-secondary:not(.c-button--reversed):hover, .c-button--tone-main.c-button--variation-secondary:not(.c-button--reversed):focus { color: var(--ds-color-interactive-background-button-filled-main-hover); border: 1px solid var(--ds-color-interactive-background-button-filled-main-hover); } .c-button--tone-main.c-button--variation-outlined:not(.c-button--reversed):hover svg, .c-button--tone-main.c-button--variation-outlined:not(.c-button--reversed):focus svg, .c-button--tone-main.c-button--variation-secondary:not(.c-button--reversed):hover svg, .c-button--tone-main.c-button--variation-secondary:not(.c-button--reversed):focus svg { fill: var(--ds-color-interactive-background-button-filled-main-hover); } .c-button--tone-main.c-button--variation-outlined:not(.c-button--reversed):active, .c-button--tone-main.c-button--variation-secondary:not(.c-button--reversed):active { color: var(--ds-color-interactive-background-button-filled-main-pressed); border-left-color: var(--ds-color-interactive-background-button-filled-main-pressed); border-right-color: var(--ds-color-interactive-background-button-filled-main-pressed); border-bottom-color: var(--ds-color-interactive-background-button-filled-main-pressed); } .c-button--tone-main.c-button--variation-transparent:not(.c-button--reversed), .c-button--tone-main.c-button--variation-tertiary:not(.c-button--reversed), .c-button--tone-main.c-button--variation-tertiary-small:not(.c-button--reversed) { color: var(--ds-color-interactive-background-button-filled-main-active); } .c-button--tone-main.c-button--variation-transparent:not(.c-button--reversed) svg, .c-button--tone-main.c-button--variation-tertiary:not(.c-button--reversed) svg, .c-button--tone-main.c-button--variation-tertiary-small:not(.c-button--reversed) svg { fill: var(--ds-color-interactive-background-button-filled-main-active); } .c-button--tone-main.c-button--variation-transparent:not(.c-button--reversed):hover, .c-button--tone-main.c-button--variation-transparent:not(.c-button--reversed):focus, .c-button--tone-main.c-button--variation-tertiary:not(.c-button--reversed):hover, .c-button--tone-main.c-button--variation-tertiary:not(.c-button--reversed):focus, .c-button--tone-main.c-button--variation-tertiary-small:not(.c-button--reversed):hover, .c-button--tone-main.c-button--variation-tertiary-small:not(.c-button--reversed):focus { color: var(--ds-color-interactive-background-button-filled-main-hover); } .c-button--tone-main.c-button--variation-transparent:not(.c-button--reversed):hover svg, .c-button--tone-main.c-button--variation-transparent:not(.c-button--reversed):focus svg, .c-button--tone-main.c-button--variation-tertiary:not(.c-button--reversed):hover svg, .c-button--tone-main.c-button--variation-tertiary:not(.c-button--reversed):focus svg, .c-button--tone-main.c-button--variation-tertiary-small:not(.c-button--reversed):hover svg, .c-button--tone-main.c-button--variation-tertiary-small:not(.c-button--reversed):focus svg { fill: var(--ds-color-interactive-background-button-filled-main-hover); } .c-button--tone-main.c-button--variation-transparent:not(.c-button--reversed):active, .c-button--tone-main.c-button--variation-tertiary:not(.c-button--reversed):active, .c-button--tone-main.c-button--variation-tertiary-small:not(.c-button--reversed):active { color: var(--ds-color-interactive-background-button-filled-main-pressed); } .c-button--reversed.c-button--tone-main.c-button--variation-filled, .c-button--reversed.c-button--tone-main.c-button--variation-filled svg, .c-button--reversed.c-button--tone-main.c-button--variation-primary, .c-button--reversed.c-button--tone-main.c-button--variation-primary svg { color: var(--ds-color-interactive-background-button-filled-main-active); background-color: var(--ds-color-interactive-active-reversed-primary); } .c-button--reversed.c-button--tone-main.c-button--variation-filled:hover, .c-button--reversed.c-button--tone-main.c-button--variation-filled:focus, .c-button--reversed.c-button--tone-main.c-button--variation-filled svg:hover, .c-button--reversed.c-button--tone-main.c-button--variation-filled svg:focus, .c-button--reversed.c-button--tone-main.c-button--variation-primary:hover, .c-button--reversed.c-button--tone-main.c-button--variation-primary:focus, .c-button--reversed.c-button--tone-main.c-button--variation-primary svg:hover, .c-button--reversed.c-button--tone-main.c-button--variation-primary svg:focus { color: var(--ds-color-interactive-background-button-filled-main-hover); } .c-button--reversed.c-button--tone-main.c-button--variation-filled:active, .c-button--reversed.c-button--tone-main.c-button--variation-filled svg:active, .c-button--reversed.c-button--tone-main.c-button--variation-primary:active, .c-button--reversed.c-button--tone-main.c-button--variation-primary svg:active { color: var(--ds-color-interactive-background-button-filled-main-pressed); } .c-button--tone-accent.c-button--variation-filled, .c-button--tone-accent.c-button--variation-primary { background-color: var(--ds-color-interactive-background-button-filled-accent-active); border: 1px solid var(--ds-color-interactive-background-button-filled-accent-active); } .c-button--tone-accent.c-button--variation-filled svg, .c-button--tone-accent.c-button--variation-primary svg { fill: var(--ds-color-interactive-background-button-filled-accent-active); } .c-button--tone-accent.c-button--variation-filled:hover, .c-button--tone-accent.c-button--variation-filled:focus, .c-button--tone-accent.c-button--variation-primary:hover, .c-button--tone-accent.c-button--variation-primary:focus { background-color: var(--ds-color-interactive-background-button-filled-accent-hover); border: 1px solid var(--ds-color-interactive-background-button-filled-accent-hover); } .c-button--tone-accent.c-button--variation-filled:active, .c-button--tone-accent.c-button--variation-primary:active { background-color: var(--ds-color-interactive-background-button-filled-accent-pressed); border: 1px solid var(--ds-color-interactive-background-button-filled-accent-pressed); } .c-button--tone-accent.c-button--variation-outlined:not(.c-button--reversed), .c-button--tone-accent.c-button--variation-secondary:not(.c-button--reversed) { color: var(--ds-color-interactive-background-button-filled-accent-active); border: 1px solid var(--ds-color-interactive-background-button-filled-accent-active); } .c-button--tone-accent.c-button--variation-outlined:not(.c-button--reversed) svg, .c-button--tone-accent.c-button--variation-secondary:not(.c-button--reversed) svg { fill: var(--ds-color-interactive-background-button-filled-accent-active); } .c-button--tone-accent.c-button--variation-outlined:not(.c-button--reversed):hover, .c-button--tone-accent.c-button--variation-outlined:not(.c-button--reversed):focus, .c-button--tone-accent.c-button--variation-secondary:not(.c-button--reversed):hover, .c-button--tone-accent.c-button--variation-secondary:not(.c-button--reversed):focus { color: var(--ds-color-interactive-background-button-filled-accent-hover); border: 1px solid var(--ds-color-interactive-background-button-filled-accent-hover); } .c-button--tone-accent.c-button--variation-outlined:not(.c-button--reversed):hover svg, .c-button--tone-accent.c-button--variation-outlined:not(.c-button--reversed):focus svg, .c-button--tone-accent.c-button--variation-secondary:not(.c-button--reversed):hover svg, .c-button--tone-accent.c-button--variation-secondary:not(.c-button--reversed):focus svg { fill: var(--ds-color-interactive-background-button-filled-accent-hover); } .c-button--tone-accent.c-button--variation-outlined:not(.c-button--reversed):active, .c-button--tone-accent.c-button--variation-secondary:not(.c-button--reversed):active { color: var(--ds-color-interactive-background-button-filled-accent-pressed); border-left-color: var(--ds-color-interactive-background-button-filled-accent-pressed); border-right-color: var(--ds-color-interactive-background-button-filled-accent-pressed); border-bottom-color: var(--ds-color-interactive-background-button-filled-accent-pressed); } .c-button--tone-accent.c-button--variation-transparent:not(.c-button--reversed), .c-button--tone-accent.c-button--variation-tertiary:not(.c-button--reversed), .c-button--tone-accent.c-button--variation-tertiary-small:not(.c-button--reversed) { color: var(--ds-color-interactive-background-button-filled-accent-active); } .c-button--tone-accent.c-button--variation-transparent:not(.c-button--reversed) svg, .c-button--tone-accent.c-button--variation-tertiary:not(.c-button--reversed) svg, .c-button--tone-accent.c-button--variation-tertiary-small:not(.c-button--reversed) svg { fill: var(--ds-color-interactive-background-button-filled-accent-active); } .c-button--tone-accent.c-button--variation-transparent:not(.c-button--reversed):hover, .c-button--tone-accent.c-button--variation-transparent:not(.c-button--reversed):focus, .c-button--tone-accent.c-button--variation-tertiary:not(.c-button--reversed):hover, .c-button--tone-accent.c-button--variation-tertiary:not(.c-button--reversed):focus, .c-button--tone-accent.c-button--variation-tertiary-small:not(.c-button--reversed):hover, .c-button--tone-accent.c-button--variation-tertiary-small:not(.c-button--reversed):focus { color: var(--ds-color-interactive-background-button-filled-accent-hover); } .c-button--tone-accent.c-button--variation-transparent:not(.c-button--reversed):hover svg, .c-button--tone-accent.c-button--variation-transparent:not(.c-button--reversed):focus svg, .c-button--tone-accent.c-button--variation-tertiary:not(.c-button--reversed):hover svg, .c-button--tone-accent.c-button--variation-tertiary:not(.c-button--reversed):focus svg, .c-button--tone-accent.c-button--variation-tertiary-small:not(.c-button--reversed):hover svg, .c-button--tone-accent.c-button--variation-tertiary-small:not(.c-button--reversed):focus svg { fill: var(--ds-color-interactive-background-button-filled-accent-hover); } .c-button--tone-accent.c-button--variation-transparent:not(.c-button--reversed):active, .c-button--tone-accent.c-button--variation-tertiary:not(.c-button--reversed):active, .c-button--tone-accent.c-button--variation-tertiary-small:not(.c-button--reversed):active { color: var(--ds-color-interactive-background-button-filled-accent-pressed); } .c-button--reversed.c-button--tone-accent.c-button--variation-filled, .c-button--reversed.c-button--tone-accent.c-button--variation-filled svg, .c-button--reversed.c-button--tone-accent.c-button--variation-primary, .c-button--reversed.c-button--tone-accent.c-button--variation-primary svg { color: var(--ds-color-interactive-background-button-filled-accent-active); background-color: var(--ds-color-interactive-active-reversed-primary); } .c-button--reversed.c-button--tone-accent.c-button--variation-filled:hover, .c-button--reversed.c-button--tone-accent.c-button--variation-filled:focus, .c-button--reversed.c-button--tone-accent.c-button--variation-filled svg:hover, .c-button--reversed.c-button--tone-accent.c-button--variation-filled svg:focus, .c-button--reversed.c-button--tone-accent.c-button--variation-primary:hover, .c-button--reversed.c-button--tone-accent.c-button--variation-primary:focus, .c-button--reversed.c-button--tone-accent.c-button--variation-primary svg:hover, .c-button--reversed.c-button--tone-accent.c-button--variation-primary svg:focus { color: var(--ds-color-interactive-background-button-filled-accent-hover); } .c-button--reversed.c-button--tone-accent.c-button--variation-filled:active, .c-button--reversed.c-button--tone-accent.c-button--variation-filled svg:active, .c-button--reversed.c-button--tone-accent.c-button--variation-primary:active, .c-button--reversed.c-button--tone-accent.c-button--variation-primary svg:active { color: var(--ds-color-interactive-background-button-filled-accent-pressed); } .c-button--tone-destructive.c-button--variation-filled, .c-button--tone-destructive.c-button--variation-primary { background-color: var(--ds-color-interactive-background-button-filled-destructive-active); border: 1px solid var(--ds-color-interactive-background-button-filled-destructive-active); } .c-button--tone-destructive.c-button--variation-filled svg, .c-button--tone-destructive.c-button--variation-primary svg { fill: var(--ds-color-interactive-background-button-filled-destructive-active); } .c-button--tone-destructive.c-button--variation-filled:hover, .c-button--tone-destructive.c-button--variation-filled:focus, .c-button--tone-destructive.c-button--variation-primary:hover, .c-button--tone-destructive.c-button--variation-primary:focus { background-color: var(--ds-color-interactive-background-button-filled-destructive-hover); border: 1px solid var(--ds-color-interactive-background-button-filled-destructive-hover); } .c-button--tone-destructive.c-button--variation-filled:active, .c-button--tone-destructive.c-button--variation-primary:active { background-color: var(--ds-color-interactive-background-button-filled-destructive-pressed); border: 1px solid var(--ds-color-interactive-background-button-filled-destructive-pressed); } .c-button--tone-destructive.c-button--variation-outlined:not(.c-button--reversed), .c-button--tone-destructive.c-button--variation-secondary:not(.c-button--reversed) { color: var(--ds-color-interactive-background-button-filled-destructive-active); border: 1px solid var(--ds-color-interactive-background-button-filled-destructive-active); } .c-button--tone-destructive.c-button--variation-outlined:not(.c-button--reversed) svg, .c-button--tone-destructive.c-button--variation-secondary:not(.c-button--reversed) svg { fill: var(--ds-color-interactive-background-button-filled-destructive-active); } .c-button--tone-destructive.c-button--variation-outlined:not(.c-button--reversed):hover, .c-button--tone-destructive.c-button--variation-outlined:not(.c-button--reversed):focus, .c-button--tone-destructive.c-button--variation-secondary:not(.c-button--reversed):hover, .c-button--tone-destructive.c-button--variation-secondary:not(.c-button--reversed):focus { color: var(--ds-color-interactive-background-button-filled-destructive-hover); border: 1px solid var(--ds-color-interactive-background-button-filled-destructive-hover); } .c-button--tone-destructive.c-button--variation-outlined:not(.c-button--reversed):hover svg, .c-button--tone-destructive.c-button--variation-outlined:not(.c-button--reversed):focus svg, .c-button--tone-destructive.c-button--variation-secondary:not(.c-button--reversed):hover svg, .c-button--tone-destructive.c-button--variation-secondary:not(.c-button--reversed):focus svg { fill: var(--ds-color-interactive-background-button-filled-destructive-hover); } .c-button--tone-destructive.c-button--variation-outlined:not(.c-button--reversed):active, .c-button--tone-destructive.c-button--variation-secondary:not(.c-button--reversed):active { color: var(--ds-color-interactive-background-button-filled-destructive-pressed); border-left-color: var(--ds-color-interactive-background-button-filled-destructive-pressed); border-right-color: var(--ds-color-interactive-background-button-filled-destructive-pressed); border-bottom-color: var(--ds-color-interactive-background-button-filled-destructive-pressed); } .c-button--tone-destructive.c-button--variation-transparent:not(.c-button--reversed), .c-button--tone-destructive.c-button--variation-tertiary:not(.c-button--reversed), .c-button--tone-destructive.c-button--variation-tertiary-small:not(.c-button--reversed) { color: var(--ds-color-interactive-background-button-filled-destructive-active); } .c-button--tone-destructive.c-button--variation-transparent:not(.c-button--reversed) svg, .c-button--tone-destructive.c-button--variation-tertiary:not(.c-button--reversed) svg, .c-button--tone-destructive.c-button--variation-tertiary-small:not(.c-button--reversed) svg { fill: var(--ds-color-interactive-background-button-filled-destructive-active); } .c-button--tone-destructive.c-button--variation-transparent:not(.c-button--reversed):hover, .c-button--tone-destructive.c-button--variation-transparent:not(.c-button--reversed):focus, .c-button--tone-destructive.c-button--variation-tertiary:not(.c-button--reversed):hover, .c-button--tone-destructive.c-button--variation-tertiary:not(.c-button--reversed):focus, .c-button--tone-destructive.c-button--variation-tertiary-small:not(.c-button--reversed):hover, .c-button--tone-destructive.c-button--variation-tertiary-small:not(.c-button--reversed):focus { color: var(--ds-color-interactive-background-button-filled-destructive-hover); } .c-button--tone-destructive.c-button--variation-transparent:not(.c-button--reversed):hover svg, .c-button--tone-destructive.c-button--variation-transparent:not(.c-button--reversed):focus svg, .c-button--tone-destructive.c-button--variation-tertiary:not(.c-button--reversed):hover svg, .c-button--tone-destructive.c-button--variation-tertiary:not(.c-button--reversed):focus svg, .c-button--tone-destructive.c-button--variation-tertiary-small:not(.c-button--reversed):hover svg, .c-button--tone-destructive.c-button--variation-tertiary-small:not(.c-button--reversed):focus svg { fill: var(--ds-color-interactive-background-button-filled-destructive-hover); } .c-button--tone-destructive.c-button--variation-transparent:not(.c-button--reversed):active, .c-button--tone-destructive.c-button--variation-tertiary:not(.c-button--reversed):active, .c-button--tone-destructive.c-button--variation-tertiary-small:not(.c-button--reversed):active { color: var(--ds-color-interactive-background-button-filled-destructive-pressed); } .c-button--reversed.c-button--tone-destructive.c-button--variation-filled, .c-button--reversed.c-button--tone-destructive.c-button--variation-filled svg, .c-button--reversed.c-button--tone-destructive.c-button--variation-primary, .c-button--reversed.c-button--tone-destructive.c-button--variation-primary svg { color: var(--ds-color-interactive-background-button-filled-destructive-active); background-color: var(--ds-color-interactive-active-reversed-primary); } .c-button--reversed.c-button--tone-destructive.c-button--variation-filled:hover, .c-button--reversed.c-button--tone-destructive.c-button--variation-filled:focus, .c-button--reversed.c-button--tone-destructive.c-button--variation-filled svg:hover, .c-button--reversed.c-button--tone-destructive.c-button--variation-filled svg:focus, .c-button--reversed.c-button--tone-destructive.c-button--variation-primary:hover, .c-button--reversed.c-button--tone-destructive.c-button--variation-primary:focus, .c-button--reversed.c-button--tone-destructive.c-button--variation-primary svg:hover, .c-button--reversed.c-button--tone-destructive.c-button--variation-primary svg:focus { color: var(--ds-color-interactive-background-button-filled-destructive-hover); } .c-button--reversed.c-button--tone-destructive.c-button--variation-filled:active, .c-button--reversed.c-button--tone-destructive.c-button--variation-filled svg:active, .c-button--reversed.c-button--tone-destructive.c-button--variation-primary:active, .c-button--reversed.c-button--tone-destructive.c-button--variation-primary svg:active { color: var(--ds-color-interactive-background-button-filled-destructive-pressed); } .c-button--tone-loyalty.c-button--variation-filled, .c-button--tone-loyalty.c-button--variation-primary { background-color: var(--ds-color-interactive-active-loyalty-primary); border: 1px solid var(--ds-color-interactive-active-loyalty-primary); } .c-button--tone-loyalty.c-button--variation-filled svg, .c-button--tone-loyalty.c-button--variation-primary svg { fill: var(--ds-color-interactive-active-loyalty-primary); } .c-button--tone-loyalty.c-button--variation-filled:hover, .c-button--tone-loyalty.c-button--variation-filled:focus, .c-button--tone-loyalty.c-button--variation-primary:hover, .c-button--tone-loyalty.c-button--variation-primary:focus { background-color: var(--ds-color-interactive-active-loyalty-hover); border: 1px solid var(--ds-color-interactive-active-loyalty-hover); } .c-button--tone-loyalty.c-button--variation-filled:active, .c-button--tone-loyalty.c-button--variation-primary:active { background-color: var(--ds-color-interactive-active-loyalty-pressed); border: 1px solid var(--ds-color-interactive-active-loyalty-pressed); } .c-button--tone-loyalty.c-button--variation-outlined:not(.c-button--reversed), .c-button--tone-loyalty.c-button--variation-secondary:not(.c-button--reversed) { color: var(--ds-color-interactive-active-loyalty-primary); border: 1px solid var(--ds-color-interactive-active-loyalty-primary); } .c-button--tone-loyalty.c-button--variation-outlined:not(.c-button--reversed) svg, .c-button--tone-loyalty.c-button--variation-secondary:not(.c-button--reversed) svg { fill: var(--ds-color-interactive-active-loyalty-primary); } .c-button--tone-loyalty.c-button--variation-outlined:not(.c-button--reversed):hover, .c-button--tone-loyalty.c-button--variation-outlined:not(.c-button--reversed):focus, .c-button--tone-loyalty.c-button--variation-secondary:not(.c-button--reversed):hover, .c-button--tone-loyalty.c-button--variation-secondary:not(.c-button--reversed):focus { color: var(--ds-color-interactive-active-loyalty-hover); border: 1px solid var(--ds-color-interactive-active-loyalty-hover); } .c-button--tone-loyalty.c-button--variation-outlined:not(.c-button--reversed):hover svg, .c-button--tone-loyalty.c-button--variation-outlined:not(.c-button--reversed):focus svg, .c-button--tone-loyalty.c-button--variation-secondary:not(.c-button--reversed):hover svg, .c-button--tone-loyalty.c-button--variation-secondary:not(.c-button--reversed):focus svg { fill: var(--ds-color-interactive-active-loyalty-hover); } .c-button--tone-loyalty.c-button--variation-outlined:not(.c-button--reversed):active, .c-button--tone-loyalty.c-button--variation-secondary:not(.c-button--reversed):active { color: var(--ds-color-interactive-active-loyalty-pressed); border-left-color: var(--ds-color-interactive-active-loyalty-pressed); border-right-color: var(--ds-color-interactive-active-loyalty-pressed); border-bottom-color: var(--ds-color-interactive-active-loyalty-pressed); } .c-button--tone-loyalty.c-button--variation-transparent:not(.c-button--reversed), .c-button--tone-loyalty.c-button--variation-tertiary:not(.c-button--reversed), .c-button--tone-loyalty.c-button--variation-tertiary-small:not(.c-button--reversed) { color: var(--ds-color-interactive-active-loyalty-primary); } .c-button--tone-loyalty.c-button--variation-transparent:not(.c-button--reversed) svg, .c-button--tone-loyalty.c-button--variation-tertiary:not(.c-button--reversed) svg, .c-button--tone-loyalty.c-button--variation-tertiary-small:not(.c-button--reversed) svg { fill: var(--ds-color-interactive-active-loyalty-primary); } .c-button--tone-loyalty.c-button--variation-transparent:not(.c-button--reversed):hover, .c-button--tone-loyalty.c-button--variation-transparent:not(.c-button--reversed):focus, .c-button--tone-loyalty.c-button--variation-tertiary:not(.c-button--reversed):hover, .c-button--tone-loyalty.c-button--variation-tertiary:not(.c-button--reversed):focus, .c-button--tone-loyalty.c-button--variation-tertiary-small:not(.c-button--reversed):hover, .c-button--tone-loyalty.c-button--variation-tertiary-small:not(.c-button--reversed):focus { color: var(--ds-color-interactive-active-loyalty-hover); } .c-button--tone-loyalty.c-button--variation-transparent:not(.c-button--reversed):hover svg, .c-button--tone-loyalty.c-button--variation-transparent:not(.c-button--reversed):focus svg, .c-button--tone-loyalty.c-button--variation-tertiary:not(.c-button--reversed):hover svg, .c-button--tone-loyalty.c-button--variation-tertiary:not(.c-button--reversed):focus svg, .c-button--tone-loyalty.c-button--variation-tertiary-small:not(.c-button--reversed):hover svg, .c-button--tone-loyalty.c-button--variation-tertiary-small:not(.c-button--reversed):focus svg { fill: var(--ds-color-interactive-active-loyalty-hover); } .c-button--tone-loyalty.c-button--variation-transparent:not(.c-button--reversed):active, .c-button--tone-loyalty.c-button--variation-tertiary:not(.c-button--reversed):active, .c-button--tone-loyalty.c-button--variation-tertiary-small:not(.c-button--reversed):active { color: var(--ds-color-interactive-active-loyalty-pressed); } .c-button--reversed.c-button--tone-loyalty.c-button--variation-filled, .c-button--reversed.c-button--tone-loyalty.c-button--variation-filled svg, .c-button--reversed.c-button--tone-loyalty.c-button--variation-primary, .c-button--reversed.c-button--tone-loyalty.c-button--variation-primary svg { color: var(--ds-color-interactive-active-loyalty-primary); background-color: var(--ds-color-interactive-active-reversed-primary); } .c-button--reversed.c-button--tone-loyalty.c-button--variation-filled:hover, .c-button--reversed.c-button--tone-loyalty.c-button--variation-filled:focus, .c-button--reversed.c-button--tone-loyalty.c-button--variation-filled svg:hover, .c-button--reversed.c-button--tone-loyalty.c-button--variation-filled svg:focus, .c-button--reversed.c-button--tone-loyalty.c-button--variation-primary:hover, .c-button--reversed.c-button--tone-loyalty.c-button--variation-primary:focus, .c-button--reversed.c-button--tone-loyalty.c-button--variation-primary svg:hover, .c-button--reversed.c-button--tone-loyalty.c-button--variation-primary svg:focus { color: var(--ds-color-interactive-active-loyalty-hover); } .c-button--reversed.c-button--tone-loyalty.c-button--variation-filled:active, .c-button--reversed.c-button--tone-loyalty.c-button--variation-filled svg:active, .c-button--reversed.c-button--tone-loyalty.c-button--variation-primary:active, .c-button--reversed.c-button--tone-loyalty.c-button--variation-primary svg:active { color: var(--ds-color-interactive-active-loyalty-pressed); } .c-button--tone-negative.c-button--variation-filled, .c-button--tone-negative.c-button--variation-primary { background-color: var(--ds-color-interactive-active-negative-primary); border: 1px solid var(--ds-color-interactive-active-negative-primary); } .c-button--tone-negative.c-button--variation-filled svg, .c-button--tone-negative.c-button--variation-primary svg { fill: var(--ds-color-interactive-active-negative-primary); } .c-button--tone-negative.c-button--variation-filled:hover, .c-button--tone-negative.c-button--variation-filled:focus, .c-button--tone-negative.c-button--variation-primary:hover, .c-button--tone-negative.c-button--variation-primary:focus { background-color: var(--ds-color-interactive-active-negative-hover); border: 1px solid var(--ds-color-interactive-active-negative-hover); } .c-button--tone-negative.c-button--variation-filled:active, .c-button--tone-negative.c-button--variation-primary:active { background-color: var(--ds-color-interactive-active-negative-pressed); border: 1px solid var(--ds-color-interactive-active-negative-pressed); } .c-button--tone-negative.c-button--variation-outlined:not(.c-button--reversed), .c-button--tone-negative.c-button--variation-secondary:not(.c-button--reversed) { color: var(--ds-color-interactive-active-negative-primary); border: 1px solid var(--ds-color-interactive-active-negative-primary); } .c-button--tone-negative.c-button--variation-outlined:not(.c-button--reversed) svg, .c-button--tone-negative.c-button--variation-secondary:not(.c-button--reversed) svg { fill: var(--ds-color-interactive-active-negative-primary); } .c-button--tone-negative.c-button--variation-outlined:not(.c-button--reversed):hover, .c-button--tone-negative.c-button--variation-outlined:not(.c-button--reversed):focus, .c-button--tone-negative.c-button--variation-secondary:not(.c-button--reversed):hover, .c-button--tone-negative.c-button--variation-secondary:not(.c-button--reversed):focus { color: var(--ds-color-interactive-active-negative-hover); border: 1px solid var(--ds-color-interactive-active-negative-hover); } .c-button--tone-negative.c-button--variation-outlined:not(.c-button--reversed):hover svg, .c-button--tone-negative.c-button--variation-outlined:not(.c-button--reversed):focus svg, .c-button--tone-negative.c-button--variation-secondary:not(.c-button--reversed):hover svg, .c-button--tone-negative.c-button--variation-secondary:not(.c-button--reversed):focus svg { fill: var(--ds-color-interactive-active-negative-hover); } .c-button--tone-negative.c-button--variation-outlined:not(.c-button--reversed):active, .c-button--tone-negative.c-button--variation-secondary:not(.c-button--reversed):active { color: var(--ds-color-interactive-active-negative-pressed); border-left-color: var(--ds-color-interactive-active-negative-pressed); border-right-color: var(--ds-color-interactive-active-negative-pressed); border-bottom-color: var(--ds-color-interactive-active-negative-pressed); } .c-button--tone-negative.c-button--variation-transparent:not(.c-button--reversed), .c-button--tone-negative.c-button--variation-tertiary:not(.c-button--reversed), .c-button--tone-negative.c-button--variation-tertiary-small:not(.c-button--reversed) { color: var(--ds-color-interactive-active-negative-primary); } .c-button--tone-negative.c-button--variation-transparent:not(.c-button--reversed) svg, .c-button--tone-negative.c-button--variation-tertiary:not(.c-button--reversed) svg, .c-button--tone-negative.c-button--variation-tertiary-small:not(.c-button--reversed) svg { fill: var(--ds-color-interactive-active-negative-primary); } .c-button--tone-negative.c-button--variation-transparent:not(.c-button--reversed):hover, .c-button--tone-negative.c-button--variation-transparent:not(.c-button--reversed):focus, .c-button--tone-negative.c-button--variation-tertiary:not(.c-button--reversed):hover, .c-button--tone-negative.c-button--variation-tertiary:not(.c-button--reversed):focus, .c-button--tone-negative.c-button--variation-tertiary-small:not(.c-button--reversed):hover, .c-button--tone-negative.c-button--variation-tertiary-small:not(.c-button--reversed):focus { color: var(--ds-color-interactive-active-negative-hover); } .c-button--tone-negative.c-button--variation-transparent:not(.c-button--reversed):hover svg, .c-button--tone-negative.c-button--variation-transparent:not(.c-button--reversed):focus svg, .c-button--tone-negative.c-button--variation-tertiary:not(.c-button--reversed):hover svg, .c-button--tone-negative.c-button--variation-tertiary:not(.c-button--reversed):focus svg, .c-button--tone-negative.c-button--variation-tertiary-small:not(.c-button--reversed):hover svg, .c-button--tone-negative.c-button--variation-tertiary-small:not(.c-button--reversed):focus svg { fill: var(--ds-color-interactive-active-negative-hover); } .c-button--tone-negative.c-button--variation-transparent:not(.c-button--reversed):active, .c-button--tone-negative.c-button--variation-tertiary:not(.c-button--reversed):active, .c-button--tone-negative.c-button--variation-tertiary-small:not(.c-button--reversed):active { color: var(--ds-color-interactive-active-negative-pressed); } .c-button--reversed.c-button--tone-negative.c-button--variation-filled, .c-button--reversed.c-button--tone-negative.c-button--variation-filled svg, .c-button--reversed.c-button--tone-negative.c-button--variation-primary, .c-button--reversed.c-button--tone-negative.c-button--variation-primary svg { color: var(--ds-color-interactive-active-negative-primary); background-color: var(--ds-color-interactive-active-reversed-primary); } .c-button--reversed.c-button--tone-negative.c-button--variation-filled:hover, .c-button--reversed.c-button--tone-negative.c-button--variation-filled:focus, .c-button--reversed.c-button--tone-negative.c-button--variation-filled svg:hover, .c-button--reversed.c-button--tone-negative.c-button--variation-filled svg:focus, .c-button--reversed.c-button--tone-negative.c-button--variation-primary:hover, .c-button--reversed.c-button--tone-negative.c-button--variation-primary:focus, .c-button--reversed.c-button--tone-negative.c-button--variation-primary svg:hover, .c-button--reversed.c-button--tone-negative.c-button--variation-primary svg:focus { color: var(--ds-color-interactive-active-negative-hover); } .c-button--reversed.c-button--tone-negative.c-button--variation-filled:active, .c-button--reversed.c-button--tone-negative.c-button--variation-filled svg:active, .c-button--reversed.c-button--tone-negative.c-button--variation-primary:active, .c-button--reversed.c-button--tone-negative.c-button--variation-primary svg:active { color: var(--ds-color-interactive-active-negative-pressed); } .c-button--tone-promotion.c-button--variation-filled, .c-button--tone-promotion.c-button--variation-primary { background-color: var(--ds-color-interactive-active-promotion-primary); border: 1px solid var(--ds-color-interactive-active-promotion-primary); } .c-button--tone-promotion.c-button--variation-filled svg, .c-button--tone-promotion.c-button--variation-primary svg { fill: var(--ds-color-interactive-active-promotion-primary); } .c-button--tone-promotion.c-button--variation-filled:hover, .c-button--tone-promotion.c-button--variation-filled:focus, .c-button--tone-promotion.c-button--variation-primary:hover, .c-button--tone-promotion.c-button--variation-primary:focus { background-color: var(--ds-color-interactive-active-promotion-hover); border: 1px solid var(--ds-color-interactive-active-promotion-hover); } .c-button--tone-promotion.c-button--variation-filled:active, .c-button--tone-promotion.c-button--variation-primary:active { background-color: var(--ds-color-interactive-active-promotion-pressed); border: 1px solid var(--ds-color-interactive-active-promotion-pressed); } .c-button--tone-promotion.c-button--variation-outlined:not(.c-button--reversed), .c-button--tone-promotion.c-button--variation-secondary:not(.c-button--reversed) { color: var(--ds-color-interactive-active-promotion-primary); border: 1px solid var(--ds-color-interactive-active-promotion-primary); } .c-button--tone-promotion.c-button--variation-outlined:not(.c-button--reversed) svg, .c-button--tone-promotion.c-button--variation-secondary:not(.c-button--reversed) svg { fill: var(--ds-color-interactive-active-promotion-primary); } .c-button--tone-promotion.c-button--variation-outlined:not(.c-button--reversed):hover, .c-button--tone-promotion.c-button--variation-outlined:not(.c-button--reversed):focus, .c-button--tone-promotion.c-button--variation-secondary:not(.c-button--reversed):hover, .c-button--tone-promotion.c-button--variation-secondary:not(.c-button--reversed):focus { color: var(--ds-color-interactive-active-promotion-hover); border: 1px solid var(--ds-color-interactive-active-promotion-hover); } .c-button--tone-promotion.c-button--variation-outlined:not(.c-button--reversed):hover svg, .c-button--tone-promotion.c-button--variation-outlined:not(.c-button--reversed):focus svg, .c-button--tone-promotion.c-button--variation-secondary:not(.c-button--reversed):hover svg, .c-button--tone-promotion.c-button--variation-secondary:not(.c-button--reversed):focus svg { fill: var(--ds-color-interactive-active-promotion-hover); } .c-button--tone-promotion.c-button--variation-outlined:not(.c-button--reversed):active, .c-button--tone-promotion.c-button--variation-secondary:not(.c-button--reversed):active { color: var(--ds-color-interactive-active-promotion-pressed); border-left-color: var(--ds-color-interactive-active-promotion-pressed); border-right-color: var(--ds-color-interactive-active-promotion-pressed); border-bottom-color: var(--ds-color-interactive-active-promotion-pressed); } .c-button--tone-promotion.c-button--variation-transparent:not(.c-button--reversed), .c-button--tone-promotion.c-button--variation-tertiary:not(.c-button--reversed), .c-button--tone-promotion.c-button--variation-tertiary-small:not(.c-button--reversed) { color: var(--ds-color-interactive-active-promotion-primary); } .c-button--tone-promotion.c-button--variation-transparent:not(.c-button--reversed) svg, .c-button--tone-promotion.c-button--variation-tertiary:not(.c-button--reversed) svg, .c-button--tone-promotion.c-button--variation-tertiary-small:not(.c-button--reversed) svg { fill: var(--ds-color-interactive-active-promotion-primary); } .c-button--tone-promotion.c-button--variation-transparent:not(.c-button--reversed):hover, .c-button--tone-promotion.c-button--variation-transparent:not(.c-button--reversed):focus, .c-button--tone-promotion.c-button--variation-tertiary:not(.c-button--reversed):hover, .c-button--tone-promotion.c-button--variation-tertiary:not(.c-button--reversed):focus, .c-button--tone-promotion.c-button--variation-tertiary-small:not(.c-button--reversed):hover, .c-button--tone-promotion.c-button--variation-tertiary-small:not(.c-button--reversed):focus { color: var(--ds-color-interactive-active-promotion-hover); } .c-button--tone-promotion.c-button--variation-transparent:not(.c-button--reversed):hover svg, .c-button--tone-promotion.c-button--variation-transparent:not(.c-button--reversed):focus svg, .c-button--tone-promotion.c-button--variation-tertiary:not(.c-button--reversed):hover svg, .c-button--tone-promotion.c-button--variation-tertiary:not(.c-button--reversed):focus svg, .c-button--tone-promotion.c-button--variation-tertiary-small:not(.c-button--reversed):hover svg, .c-button--tone-promotion.c-button--variation-tertiary-small:not(.c-button--reversed):focus svg { fill: var(--ds-color-interactive-active-promotion-hover); } .c-button--tone-promotion.c-button--variation-transparent:not(.c-button--reversed):active, .c-button--tone-promotion.c-button--variation-tertiary:not(.c-button--reversed):active, .c-button--tone-promotion.c-button--variation-tertiary-small:not(.c-button--reversed):active { color: var(--ds-color-interactive-active-promotion-pressed); } .c-button--reversed.c-button--tone-promotion.c-button--variation-filled, .c-button--reversed.c-button--tone-promotion.c-button--variation-filled svg, .c-button--reversed.c-button--tone-promotion.c-button--variation-primary, .c-button--reversed.c-button--tone-promotion.c-button--variation-primary svg { color: var(--ds-color-interactive-active-promotion-primary); background-color: var(--ds-color-interactive-active-reversed-primary); } .c-button--reversed.c-button--tone-promotion.c-button--variation-filled:hover, .c-button--reversed.c-button--tone-promotion.c-button--variation-filled:focus, .c-button--reversed.c-button--tone-promotion.c-button--variation-filled svg:hover, .c-button--reversed.c-button--tone-promotion.c-button--variation-filled svg:focus, .c-button--reversed.c-button--tone-promotion.c-button--variation-primary:hover, .c-button--reversed.c-button--tone-promotion.c-button--variation-primary:focus, .c-button--reversed.c-button--tone-promotion.c-button--variation-primary svg:hover, .c-button--reversed.c-button--tone-promotion.c-button--variation-primary svg:focus { color: var(--ds-color-interactive-active-promotion-hover); } .c-button--reversed.c-button--tone-promotion.c-button--variation-filled:active, .c-button--reversed.c-button--tone-promotion.c-button--variation-filled svg:active, .c-button--reversed.c-button--tone-promotion.c-button--variation-primary:active, .c-button--reversed.c-button--tone-promotion.c-button--variation-primary svg:active { color: var(--ds-color-interactive-active-promotion-pressed); } .c-button--tone-monochrome.c-button--variation-filled, .c-button--tone-monochrome.c-button--variation-primary { background-color: var(--ds-color-interactive-active-monochrome-primary); border: 1px solid var(--ds-color-interactive-active-monochrome-primary); } .c-button--tone-monochrome.c-button--variation-filled svg, .c-button--tone-monochrome.c-button--variation-primary svg { fill: var(--ds-color-interactive-active-monochrome-primary); } .c-button--tone-monochrome.c-button--variation-filled:hover, .c-button--tone-monochrome.c-button--variation-filled:focus, .c-button--tone-monochrome.c-button--variation-primary:hover, .c-button--tone-monochrome.c-button--variation-primary:focus { background-color: var(--ds-color-interactive-active-monochrome-hover); border: 1px solid var(--ds-color-interactive-active-monochrome-hover); } .c-button--tone-monochrome.c-button--variation-filled:active, .c-button--tone-monochrome.c-button--variation-primary:active { background-color: var(--ds-color-interactive-active-monochrome-pressed); border: 1px solid var(--ds-color-interactive-active-monochrome-pressed); } .c-button--tone-monochrome.c-button--variation-outlined:not(.c-button--reversed), .c-button--tone-monochrome.c-button--variation-secondary:not(.c-button--reversed) { color: var(--ds-color-interactive-active-monochrome-primary); border: 1px solid var(--ds-color-interactive-active-monochrome-primary); } .c-button--tone-monochrome.c-button--variation-outlined:not(.c-button--reversed) svg, .c-button--tone-monochrome.c-button--variation-secondary:not(.c-button--reversed) svg { fill: var(--ds-color-interactive-active-monochrome-primary); } .c-button--tone-monochrome.c-button--variation-outlined:not(.c-button--reversed):hover, .c-button--tone-monochrome.c-button--variation-outlined:not(.c-button--reversed):focus, .c-button--tone-monochrome.c-button--variation-secondary:not(.c-button--reversed):hover, .c-button--tone-monochrome.c-button--variation-secondary:not(.c-button--reversed):focus { color: var(--ds-color-interactive-active-monochrome-hover); border: 1px solid var(--ds-color-interactive-active-monochrome-hover); } .c-button--tone-monochrome.c-button--variation-outlined:not(.c-button--reversed):hover svg, .c-button--tone-monochrome.c-button--variation-outlined:not(.c-button--reversed):focus svg, .c-button--tone-monochrome.c-button--variation-secondary:not(.c-button--reversed):hover svg, .c-button--tone-monochrome.c-button--variation-secondary:not(.c-button--reversed):focus svg { fill: var(--ds-color-interactive-active-monochrome-hover); } .c-button--tone-monochrome.c-button--variation-outlined:not(.c-button--reversed):active, .c-button--tone-monochrome.c-button--variation-secondary:not(.c-button--reversed):active { color: var(--ds-color-interactive-active-monochrome-pressed); border-left-color: var(--ds-color-interactive-active-monochrome-pressed); border-right-color: var(--ds-color-interactive-active-monochrome-pressed); border-bottom-color: var(--ds-color-interactive-active-monochrome-pressed); } .c-button--tone-monochrome.c-button--variation-transparent:not(.c-button--reversed), .c-button--tone-monochrome.c-button--variation-tertiary:not(.c-button--reversed), .c-button--tone-monochrome.c-button--variation-tertiary-small:not(.c-button--reversed) { color: var(--ds-color-interactive-active-monochrome-primary); } .c-button--tone-monochrome.c-button--variation-transparent:not(.c-button--reversed) svg, .c-button--tone-monochrome.c-button--variation-tertiary:not(.c-button--reversed) svg, .c-button--tone-monochrome.c-button--variation-tertiary-small:not(.c-button--reversed) svg { fill: var(--ds-color-interactive-active-monochrome-primary); } .c-button--tone-monochrome.c-button--variation-transparent:not(.c-button--reversed):hover, .c-button--tone-monochrome.c-button--variation-transparent:not(.c-button--reversed):focus, .c-button--tone-monochrome.c-button--variation-tertiary:not(.c-button--reversed):hover, .c-button--tone-monochrome.c-button--variation-tertiary:not(.c-button--reversed):focus, .c-button--tone-monochrome.c-button--variation-tertiary-small:not(.c-button--reversed):hover, .c-button--tone-monochrome.c-button--variation-tertiary-small:not(.c-button--reversed):focus { color: var(--ds-color-interactive-active-monochrome-hover); } .c-button--tone-monochrome.c-button--variation-transparent:not(.c-button--reversed):hover svg, .c-button--tone-monochrome.c-button--variation-transparent:not(.c-button--reversed):focus svg, .c-button--tone-monochrome.c-button--variation-tertiary:not(.c-button--reversed):hover svg, .c-button--tone-monochrome.c-button--variation-tertiary:not(.c-button--reversed):focus svg, .c-button--tone-monochrome.c-button--variation-tertiary-small:not(.c-button--reversed):hover svg, .c-button--tone-monochrome.c-button--variation-tertiary-small:not(.c-button--reversed):focus svg { fill: var(--ds-color-interactive-active-monochrome-hover); } .c-button--tone-monochrome.c-button--variation-transparent:not(.c-button--reversed):active, .c-button--tone-monochrome.c-button--variation-tertiary:not(.c-button--reversed):active, .c-button--tone-monochrome.c-button--variation-tertiary-small:not(.c-button--reversed):active { color: var(--ds-color-interactive-active-monochrome-pressed); } .c-button--reversed.c-button--tone-monochrome.c-button--variation-filled, .c-button--reversed.c-button--tone-monochrome.c-button--variation-filled svg, .c-button--reversed.c-button--tone-monochrome.c-button--variation-primary, .c-button--reversed.c-button--tone-monochrome.c-button--variation-primary svg { color: var(--ds-color-interactive-active-monochrome-primary); background-color: var(--ds-color-interactive-active-reversed-primary); } .c-button--reversed.c-button--tone-monochrome.c-button--variation-filled:hover, .c-button--reversed.c-button--tone-monochrome.c-button--variation-filled:focus, .c-button--reversed.c-button--tone-monochrome.c-button--variation-filled svg:hover, .c-button--reversed.c-button--tone-monochrome.c-button--variation-filled svg:focus, .c-button--reversed.c-button--tone-monochrome.c-button--variation-primary:hover, .c-button--reversed.c-button--tone-monochrome.c-button--variation-primary:focus, .c-button--reversed.c-button--tone-monochrome.c-button--variation-primary svg:hover, .c-button--reversed.c-button--tone-monochrome.c-button--variation-primary svg:focus { color: var(--ds-color-interactive-active-monochrome-hover); } .c-button--reversed.c-button--tone-monochrome.c-button--variation-filled:active, .c-button--reversed.c-button--tone-monochrome.c-button--variation-filled svg:active, .c-button--reversed.c-button--tone-monochrome.c-button--variation-primary:active, .c-button--reversed.c-button--tone-monochrome.c-button--variation-primary svg:active { color: var(--ds-color-interactive-active-monochrome-pressed); } .c-card { display: flex; flex-direction: column; padding: var(--ds-spacing-s); border-radius: var(--ds-border-radius-s); border: 1px solid var(--ds-color-persistent-border-card-default); background-color: var(--ds-color-persistent-background-card-default); } .c-card > :first-child { margin-top: 0; } .c-card > :first-child > :first-child { margin-top: 0; } .c-card--interactive { box-shadow: var(--ds-shadow-action); } .c-card--interactive:hover { box-shadow: var(--ds-shadow-hover); } .c-card--interactive:active { box-shadow: var(--ds-shadow-press); } .c-card--disabled { opacity: .5; pointer-events: none; } .c-checkbox-card__container { height: 100%; display: flex; flex-direction: column; border-radius: var(--ds-border-radius-s); border: 1px solid var(--ds-color-interactive-default-border-hover); background-color: var(--ds-color-core-background-main-primary); transition: var(--c-checkbox-transition); } .c-checkbox-card__image__container { padding: var(--ds-spacing-xxxs); width: var(--c-checkbox-card-image-size); height: var(--c-checkbox-card-image-size); top: 50%; right: 0; position: absolute; transform: translateY(-50%); } .c-checkbox-card__image__container img { margin-bottom: 0; } .c-checkbox-card__highlighted-text.c-text { margin-top: var(--ds-spacing-xxs); color: var(--ds-color-core-content-functional-warning); } .c-checkbox-card--checked .c-checkbox-card__container { border: 1px solid var(--ds-color-interactive-default-border-hover); } .c-checkbox-card--disabled { opacity: .6; } .c-checkbox-card--disabled .c-checkbox-card__image__container { filter: grayscale(1); } .c-checkbox-card:hover .c-checkbox-card__container { border: 1px solid var(--ds-color-interactive-default-border-hover); } .c-checkbox-card__title { display: flex; position: relative; align-items: center; font-size: 1rem; justify-content: flex-start; font-weight: 700; margin-top: var(--ds-spacing-xxs); color: var(--ds-color-core-content-main-primary); } .c-checkbox-card__description { margin-top: var(--ds-spacing-xs); color: var(--ds-color-core-content-main-tertiary); } .c-checkbox-card__action { text-align: center; margin: 0 var(--ds-spacing-s); padding: var(--ds-spacing-s) 0; font-size: 1rem; color: var(--ds-color-interactive-default-border-hover); font-weight: 700; border-top: 1px solid solid var(--ds-color-interactive-default-background-disabled); } .c-checkbox-card__error { color: var(--ds-color-core-content-functional-warning); font-size: .75rem; padding: var(--ds-spacing-xxs) 0 0; font-weight: 400; } .c-checkbox-card__checkbox { flex-grow: 1; } .c-checkbox-card__checkbox label { height: 100%; flex-direction: row; padding: var(--ds-spacing-s); align-items: flex-start; justify-content: flex-start; } .c-checkbox-card--with-image .c-checkbox-card__description { margin-top: var(--ds-spacing-m); } .c-checkbox-card--with-image .c-checkbox-card__checkbox label { padding-top: var(--ds-spacing-m); } .c-checkbox-card--invalid .c-checkbox-card__container { border-color: var(--ds-color-core-content-functional-negative); } .c-checkbox-group { border: 0; display: flex; flex-direction: column; gap: var(--ds-spacing-xs); } .c-checkbox-group--inline { flex-direction: row; flex-wrap: wrap; } .c-checkbox-group--inline .c-checkbox { padding: var(--ds-spacing-xxxs) var(--ds-spacing-s) var(--ds-spacing-xxxs) 0; } .c-checkbox-group__error { width: 100%; color: var(--ds-color-interactive-text-input-addon-error); font-size: .75rem; padding-left: var(--ds-spacing-xxs); font-weight: 400; } .c-checkbox { position: relative; } .c-checkbox__square { width: 1.25rem; height: 1.25rem; display: flex; align-items: center; justify-content: center; border-radius: var(--ds-border-radius-s); border: 1px solid var(--ds-color-interactive-border-input-active); background-color: var(--ds-color-interactive-background-input-active); transition: var(--c-checkbox-transition); } .c-checkbox__square-container { flex-shrink: 0; padding: var(--ds-spacing-xxxs); margin-right: var(--ds-spacing-xs); } .c-checkbox__square__checkmark { opacity: 0; width: var(--ds-sizing-xs); height: var(--ds-sizing-xs); fill: var(--ds-color-interactive-icon-input-checkbox-selected-active); transition: var(--c-checkbox-transition); } .c-checkbox__label { cursor: pointer; display: flex; position: relative; padding: var(--ds-spacing-xxxs); font-size: 1rem; border-radius: var(--ds-border-radius-s); font-weight: 400; align-items: center; color: var(--ds-color-interactive-text-input-label-default); transition: var(--c-checkbox-transition); transition-property: color; } .c-checkbox__label__icon { color: var(--ds-color-interactive-text-input-label-default); } .c-checkbox__label__icon-container { flex-shrink: 0; width: var(--ds-sizing-m); height: var(--ds-sizing-m); padding: var(--ds-spacing-xxxs); margin-left: var(--ds-spacing-xs); } .c-checkbox:hover .c-checkbox__square { border-color: var(--ds-color-interactive-border-input-checkbox-selected-hover); } .c-checkbox__input:checked + .c-checkbox__label .c-checkbox__square { border: 1px solid var(--ds-color-interactive-background-input-checkbox-selected-active); background-color: var(--ds-color-interactive-background-input-checkbox-selected-active); } .c-checkbox__input:checked + .c-checkbox__label .c-checkbox__square__checkmark { opacity: 1; } .c-checkbox__input:disabled + .c-checkbox__label { cursor: initial; color: var(--ds-color-interactive-default-content-disabled); } .c-checkbox__input:disabled + .c-checkbox__label svg { fill: var(--ds-color-interactive-default-content-disabled); } .c-checkbox__input:disabled + .c-checkbox__label .c-checkbox__square { border: 1px solid var(--ds-color-interactive-border-input-disabled); background-color: var(--ds-color-interactive-background-input-disabled); } .c-checkbox__input:focus-visible + .c-checkbox__label .c-checkbox__square { border: 1px solid var(--ds-color-interactive-active-main-primary); } .c-checkbox__input:checked:disabled + .c-checkbox__label .c-checkbox__square { background-color: var(--ds-color-interactive-default-background-disabled); border: 1px solid var(--ds-color-interactive-default-border-disabled); } .c-checkbox__input:focus-visible + .c-checkbox__label { outline: 2px auto var(--ds-color-interactive-active-main-primary); } .c-checkbox__error-text { font-weight: 400; color: var(--ds-color-interactive-text-input-addon-error); } .c-chip { width: auto; display: flex; cursor: pointer; font-weight: 400; font-size: .875rem; border-radius: 20px; gap: var(--ds-spacing-xs); align-items: center; line-height: 1.25rem; justify-content: center; font-family: var(--ds-font-family); color: var(--ds-color-interactive-text-chip-active); border: 1px solid var(--ds-color-interactive-border-chip-active); background-color: var(--ds-color-interactive-background-chip-active); } .c-chip--size-s { padding: var(--ds-spacing-xxs) var(--ds-spacing-xs); } .c-chip--size-m { padding: var(--ds-spacing-xs) var(--ds-spacing-m); } .c-chip--full-width { width: 100%; } .c-chip--disabled { opacity: .6; pointer-events: none; } .c-chip img, .c-chip svg { margin: 0; width: var(--ds-sizing-s); height: var(--ds-sizing-s); } .c-chip__icon { font-size: 1.2rem; } .c-chip:hover { border: 1px solid var(--ds-color-interactive-border-chip-hover); background-color: var(--ds-color-interactive-background-chip-hover); } .c-chip:active { border: 1px solid var(--ds-color-interactive-border-chip-pressed); background-color: var(--ds-color-interactive-background-chip-pressed); } .c-chip:focus-visible { outline: 2px solid var(--ds-color-interactive-border-focus); outline-offset: var(--ds-spacing-xxxs); } .c-chip--selected { color: var(--ds-color-interactive-text-chip-selected-active); background-color: var(--ds-color-interactive-background-chip-selected-active); border: 1px solid var(--ds-color-interactive-background-chip-selected-active); } .c-chip--selected:hover { border: 1px solid var(--ds-color-interactive-background-chip-selected-hover); background-color: var(--ds-color-interactive-background-chip-selected-hover); } .c-chip--selected:active { border: 1px solid var(--ds-color-interactive-background-chip-selected-pressed); background-color: var(--ds-color-interactive-background-chip-selected-pressed); } .c-code { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ds-spacing-xxs); } .c-code__label { font-size: var(--ds-sizing-xs); color: var(--ds-color-persistent-content-main-primary); } .c-code--disabled { opacity: .6; cursor: initial; pointer-events: none; } .c-code__inputs { display: flex; gap: .625rem; } .c-code__inputs .c-base-input__container { width: 2.5rem; height: 3.5rem; padding: 0; } .c-code__inputs .c-base-input input { min-width: auto; text-align: center; font-size: 1.25rem; height: 100%; padding-inline: 0; } .c-code__inputs .c-base-input__input-group { height: 100%; } .c-code .c-button__content { width: auto; display: flex; align-items: center; justify-content: flex-start; cursor: pointer; } .c-code .c-code__error { color: var(--ds-color-persistent-text-tag-negative); } .c-code__toggle.c-button { font-weight: 400; } .c-code__toggle .c-icon { font-weight: 700; } .c-color-swatch-group { display: flex; gap: var(--ds-spacing-s); } .c-color-swatch-group--size-s .c-color-swatch { width: var(--ds-sizing-l); height: var(--ds-sizing-l); } .c-color-swatch-group--size-m .c-color-swatch { width: var(--ds-sizing-xl); height: var(--ds-sizing-xl); } .c-color-swatch { border-radius: 50%; cursor: pointer; position: relative; border: 1px solid var(--ds-color-interactive-border-input-active); } .c-color-swatch:hover, .c-color-swatch :focus { border: 1px solid var(--ds-color-interactive-border-input-hover); } .c-color-swatch:active { border: 1px solid var(--ds-color-interactive-border-input-pressed); } .c-color-swatch:focus-visible { outline: 2px solid var(--ds-color-interactive-border-focus); outline-offset: var(--ds-spacing-xxxs); } .c-color-swatch--transparent { background-color: #fff; background-size: 16px 16px; background-image: linear-gradient( 45deg, #000 25%, transparent 25%), linear-gradient( -45deg, #000 25%, transparent 25%), linear-gradient( 45deg, transparent 75%, #000 75%), linear-gradient( -45deg, transparent 75%, #000 75%); background-position: 0 0, 0 8px, 8px -8px, -8px 0px; } .c-color-swatch--with-image { background-size: cover; } .c-color-swatch--selected { outline: 1px solid var(--ds-color-interactive-border-input-ds-color-swatch-selected); outline-offset: var(--ds-spacing-xxxs); } .c-color-swatch--disabled { opacity: .6; } .c-color-swatch--disabled:after { content: ""; top: 0; left: 0; width: 100%; height: 100%; position: absolute; border-radius: 50%; background: linear-gradient( to left bottom, transparent, transparent 49%, var(--ds-color-core-background-reversed-primary) 49%, var(--ds-color-core-background-reversed-primary) 51%, transparent 51%, transparent); } .c-drawer { inset: 0; width: 100%; height: 100%; border: none; display: flex; z-index: 18000; position: fixed; background: none; align-items: center; justify-content: center; padding-top: var(--ds-spacing-l); transition: all .3 ease; } .c-drawer:before { content: " "; top: 0; width: 100%; height: 100%; position: fixed; opacity: .5; z-index: -1; background-color: #051326; } .c-drawer__container { bottom: 0; width: 100%; display: flex; overflow: hidden; max-height: 90vh; position: absolute; height: fit-content; align-items: initial; flex-direction: column; justify-content: flex-end; box-shadow: var(--ds-shadow-up-l); border-radius: var(--ds-border-radius-m) var(--ds-border-radius-m) 0 0; background-color: var(--ds-color-core-background-main-primary); } @media only screen and (min-width: 768px) { .c-drawer__container { height: auto; bottom: auto; margin-right: 0 40px; border-radius: var(--ds-border-radius-m); } } @media only screen and (min-width: 768px) { .c-drawer__container--position-left, .c-drawer__container--position-right { top: 0; margin: 0; width: 100%; height: 100%; max-height: 100%; max-width: 512px; } .c-drawer__container--position-left .c-drawer__body, .c-drawer__container--position-right .c-drawer__body { flex-grow: 1; } .c-drawer__container--position-left { left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; } .c-drawer__container--position-right { right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } .c-drawer__container--position-bottom { bottom: 0; width: 100%; top: initial; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } } .c-drawer__container--position-center { margin: 0; } @media only screen and (min-width: 768px) { .c-drawer__container--position-center { margin: 0 40px; } } .c-drawer__header { display: flex; padding: var(--ds-spacing-xs) var(--ds-spacing-s); align-items: center; justify-content: space-between; box-shadow: var(--ds-shadow-up-s); position: relative; z-index: 1; } .c-drawer__header__title { text-align: center; margin: 0 var(--ds-spacing-s); } .c-drawer__header__icon { cursor: pointer; padding: var(--ds-spacing-xxxs); font-size: 1.7rem; display: flex; align-items: center; justify-content: center; background-color: transparent; border-color: transparent; } .c-drawer__header__icon svg { width: 100%; } .c-drawer__header__icon__container { display: flex; align-items: center; justify-content: center; width: var(--ds-sizing-m); padding: var(--ds-spacing-xxxs); height: var(--ds-sizing-xxl); } .c-drawer__body { overflow-y: auto; padding: var(--ds-spacing-s) var(--ds-spacing-m); } .c-drawer__footer { bottom: 0; display: flex; position: sticky; gap: var(--ds-spacing-s); align-items: flex-end; flex-direction: column; justify-content: flex-end; border-top: 1px solid var(--ds-color-core-background-main-primary); padding: var(--ds-spacing-s) var(--ds-spacing-m); background-color: var(--ds-color-core-background-main-primary); } .c-drawer__footer:empty { display: none; } .c-drawer__footer .c-button, .c-drawer__footer c-button { width: 100% !important; } @media only screen and (min-width: 768px) { .c-drawer__footer { flex-direction: row; align-items: center; } .c-drawer__footer .c-button, .c-drawer__footer c-button { width: auto !important; } } .c-drawer-enter-active { transition: opacity .3 ease-out; } .c-drawer-enter-active .c-drawer__container { transition: transform .3 ease-out; } .c-drawer-leave-active { transition: opacity .3 ease-out; } .c-drawer-leave-active .c-drawer__container { transition: transform .3 ease-out; } .c-drawer-enter, .c-drawer-leave-to { opacity: 0; } .c-drawer-enter .c-drawer__container, .c-drawer-leave-to .c-drawer__container { transform: scale(.8) translateY(var(--ds-spacing-m)); } .c-expand-button { width: 100%; } .c-expand-button__title-container { width: 100%; display: flex; cursor: pointer; gap: var(--ds-spacing-xs); align-items: center; flex-direction: row; justify-content: flex-start; -webkit-user-select: none; user-select: none; } .c-expand-button__title-container::-webkit-details-marker { display: none; } .c-expand-button__title { gap: var(--ds-spacing-xs); display: flex; padding-left: 0 !important; } .c-expand-button__title .c-button__content { justify-content: start; } .c-expand-button--tone-main .c-expand-button__chevron { color: var(--ds-color-interactive-text-button-transparent-main-active); } .c-expand-button--tone-accent .c-expand-button__chevron { color: var(--ds-color-interactive-text-button-transparent-accent-active); } .c-expand-button--tone-destructive .c-expand-button__chevron { color: var(--ds-color-interactive-text-button-transparent-destructive-active); } .c-expand-button__chevron { font-size: 1.5rem; } .c-functional-notice { display: flex; gap: var(--ds-spacing-s); padding: var(--ds-spacing-s); flex-direction: row; align-items: flex-start; justify-content: space-between; } .c-functional-notice--priority-high.c-functional-notice--status-info { background-color: var(--ds-color-persistent-background-functional-notice-dark-information); } .c-functional-notice--priority-high.c-functional-notice--status-info .c-functional-notice__status-icon .c-icon { color: var(--ds-color-interactive-icon-button-transparent-main-reversed-active); } .c-functional-notice--priority-medium.c-functional-notice--status-info { background-color: var(--ds-color-persistent-background-functional-notice-light-information); } .c-functional-notice--priority-medium.c-functional-notice--status-info .c-functional-notice__status-icon .c-icon { color: var(--ds-color-persistent-icon-functional-notice-information); } .c-functional-notice--priority-low.c-functional-notice--status-info { background-color: var(--ds-color-persistent-background-functional-notice-light-information); } .c-functional-notice--priority-low.c-functional-notice--status-info .c-functional-notice__status-icon .c-icon { color: var(--ds-color-persistent-icon-functional-notice-information); } .c-functional-notice--priority-high.c-functional-notice--status-error { background-color: var(--ds-color-persistent-background-functional-notice-dark-negative); } .c-functional-notice--priority-high.c-functional-notice--status-error .c-functional-notice__status-icon .c-icon { color: var(--ds-color-interactive-icon-button-transparent-main-reversed-active); } .c-functional-notice--priority-medium.c-functional-notice--status-error { background-color: var(--ds-color-persistent-background-functional-notice-light-negative); } .c-functional-notice--priority-medium.c-functional-notice--status-error .c-functional-notice__status-icon .c-icon { color: var(--ds-color-persistent-icon-functional-notice-negative); } .c-functional-notice--priority-low.c-functional-notice--status-error { background-color: var(--ds-color-persistent-background-functional-notice-light-negative); } .c-functional-notice--priority-low.c-functional-notice--status-error .c-functional-notice__status-icon .c-icon { color: var(--ds-color-persistent-icon-functional-notice-negative); } .c-functional-notice--priority-high.c-functional-notice--status-success { background-color: var(--ds-color-persistent-background-functional-notice-dark-success); } .c-functional-notice--priority-high.c-functional-notice--status-success .c-functional-notice__status-icon .c-icon { color: var(--ds-color-interactive-icon-button-transparent-main-reversed-active); } .c-functional-notice--priority-medium.c-functional-notice--status-success { background-color: var(--ds-color-persistent-background-functional-notice-light-success); } .c-functional-notice--priority-medium.c-functional-notice--status-success .c-functional-notice__status-icon .c-icon { color: var(--ds-color-persistent-icon-functional-notice-success); } .c-functional-notice--priority-low.c-functional-notice--status-success { background-color: var(--ds-color-persistent-background-functional-notice-light-success); } .c-functional-notice--priority-low.c-functional-notice--status-success .c-functional-notice__status-icon .c-icon { color: var(--ds-color-persistent-icon-functional-notice-success); } .c-functional-notice--priority-high.c-functional-notice--status-warning { background-color: var(--ds-color-persistent-background-functional-notice-dark-warning); } .c-functional-notice--priority-high.c-functional-notice--status-warning .c-functional-notice__status-icon .c-icon { color: var(--ds-color-interactive-icon-button-transparent-main-reversed-active); } .c-functional-notice--priority-medium.c-functional-notice--status-warning { background-color: var(--ds-color-persistent-background-functional-notice-light-warning); } .c-functional-notice--priority-medium.c-functional-notice--status-warning .c-functional-notice__status-icon .c-icon { color: var(--ds-color-persistent-icon-functional-notice-warning); } .c-functional-notice--priority-low.c-functional-notice--status-warning { background-color: var(--ds-color-persistent-background-functional-notice-light-warning); } .c-functional-notice--priority-low.c-functional-notice--status-warning .c-functional-notice__status-icon .c-icon { color: var(--ds-color-persistent-icon-functional-notice-warning); } .c-functional-notice--priority-high.c-functional-notice--status-neutral { background-color: var(--ds-color-persistent-background-functional-notice-light-neutral); } .c-functional-notice--priority-high.c-functional-notice--status-neutral .c-functional-notice__status-icon .c-icon { color: var(--ds-color-persistent-text-functional-notice-default); } .c-functional-notice--priority-medium.c-functional-notice--status-neutral { background-color: var(--ds-color-persistent-background-functional-notice-light-neutral); } .c-functional-notice--priority-medium.c-functional-notice--status-neutral .c-functional-notice__status-icon .c-icon { color: var(--ds-color-persistent-text-functional-notice-default); } .c-functional-notice--priority-low.c-functional-notice--status-neutral { background-color: var(--ds-color-persistent-background-functional-notice-light-neutral); } .c-functional-notice--priority-low.c-functional-notice--status-neutral .c-functional-notice__status-icon .c-icon { color: var(--ds-color-persistent-text-functional-notice-default); } .c-functional-notice__title { margin: var(--ds-spacing-xxxs) 0 0; } .c-functional-notice__title + .c-functional-notice__body { margin-bottom: 0; } .c-functional-notice__title h4 { margin-top: 0; margin-bottom: 0; } .c-functional-notice__body { margin: var(--ds-spacing-xxxs) 0; } .c-functional-notice__body:empty { display: none; } .c-functional-notice--priority-high, .c-functional-notice--priority-high .c-text { color: var(--ds-color-persistent-text-functional-notice-reversed); } .c-functional-notice--status-neutral, .c-functional-notice--status-neutral .c-text { color: var(--ds-color-persistent-text-functional-notice-default); } .c-functional-notice--priority-medium { border-radius: var(--ds-border-radius-m); padding-block: .75rem; } .c-functional-notice--priority-medium .c-link { color: var(--ds-color-persistent-text-functional-notice-default); } .c-functional-notice--priority-low { gap: var(--ds-spacing-xs); padding: var(--ds-spacing-xs); border-radius: var(--ds-border-radius-s); align-items: center; } .c-functional-notice--priority-low .c-link { color: var(--ds-color-persistent-text-functional-notice-default); } .c-functional-notice__body__container { flex-grow: 1; display: flex; gap: var(--ds-spacing-xs); flex-direction: column; justify-content: flex-start; } .c-functional-notice__close-button { cursor: pointer; font-size: 1.7rem; align-items: center; display: inline-flex; background-color: transparent; border-color: transparent; color: inherit; } .c-functional-notice__close-button__container { height: 1.7rem; } .c-functional-notice__status-icon { align-items: center; display: inline-flex; font-size: var(--ds-sizing-m); padding: .1rem; } .c-functional-notice__link .c-link { color: var(--ds-color-interactive-icon-link-main-reversed-active); } .c-functional-notice__link + .c-functional-notice__close-button__container { align-self: center; } .c-functional-notice__link--desktop { align-self: center; display: none; } @media only screen and (min-width: 768px) { .c-functional-notice__link--desktop { display: inline-flex; } } .c-functional-notice__link--mobile { display: inline-flex; } @media only screen and (min-width: 768px) { .c-functional-notice__link--mobile { display: none; } } .c-functional-notice--status-neutral .c-functional-notice__link .c-link { color: var(--ds-color-persistent-text-functional-notice-default); } .c-icon-button .c-button, .c-icon-button.c-button { padding: 8px; } .c-icon-button .c-button--size-s, .c-icon-button.c-button--size-s { width: 32px; height: 32px; } .c-icon-button .c-button--size-s .c-icon, .c-icon-button.c-button--size-s .c-icon { font-size: var(--ds-sizing-s); } .c-icon-button .c-button--size-m, .c-icon-button.c-button--size-m { width: 40px; height: 40px; } .c-icon-button .c-button--size-m .c-icon, .c-icon-button.c-button--size-m .c-icon { font-size: var(--ds-sizing-m); } .c-icon, c-icon { display: inline-flex; align-items: center; line-height: 1; font-weight: 400; } .c-input-code { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ds-spacing-xxs); } .c-input-code__label { font-size: var(--ds-sizing-xs); color: var(--ds-color-persistent-content-main-primary); } .c-input-code--disabled { opacity: .6; cursor: initial; pointer-events: none; } .c-input-code__inputs { display: flex; gap: .625rem; } .c-input-code__inputs .c-base-input__container { width: 2.5rem; height: 3.5rem; } .c-input-code__inputs .c-base-input input { min-width: auto; text-align: center; font-size: 1.25rem; height: 100%; padding-inline: 0; } .c-input-code__inputs .c-base-input__input-group { height: 100%; } .c-input-code .c-button__content { width: auto; display: flex; align-items: center; justify-content: flex-start; cursor: pointer; } .c-input-code .c-input-code__error { color: var(--ds-color-persistent-text-tag-negative); } .c-input-code__toggle.c-button { font-weight: 400; } .c-input-code__toggle .c-icon { font-weight: 700; } .c-input-date input[type=date] { appearance: none; -webkit-appearance: none; background-color: transparent; } .c-input-date .c-base-input--has-value input[type=date], .c-input-date .c-base-input--has-value input[type=date]::-webkit-datetime-edit, .c-input-date .c-base-input--has-value input[type=date]::-webkit-datetime-edit-day-field, .c-input-date .c-base-input--has-value input[type=date]::-webkit-datetime-edit-month-field, .c-input-date .c-base-input--has-value input[type=date]::-webkit-datetime-edit-year-field, .c-input-date .c-base-input--has-value input[type=date]::-webkit-datetime-edit-text { color: var(--ds-color-persistent-content-main-primary); } .c-input-date input[type=date], .c-input-date input[type=date]::-webkit-datetime-edit { color: var(--ds-color-persistent-content-main-primary); } .c-input-date input[type=date]::-webkit-datetime-edit-day-field, .c-input-date input[type=date]::-webkit-datetime-edit-month-field, .c-input-date input[type=date]::-webkit-datetime-edit-year-field, .c-input-date input[type=date]::-webkit-datetime-edit-text { color: #a4a3a3; } .c-input-file--invalid .c-input-file__filename { border-color: var(--ds-color-core-background-functional-negative); } .c-input-file--disabled .c-input-file__button, .c-input-file--disabled .c-input-file__helper-text, .c-input-file--disabled .c-input-file__helper-text a, .c-input-file--disabled .c-input-file__helper-text button, .c-input-file--disabled .c-input-file__label, .c-input-file--disabled .c-input-file__legend { color: var(--ds-color-core-content-main-tertiary); } .c-input-file--disabled .c-input-file__button { border-color: var(--ds-color-interactive-active-main-primary); } .c-input-file__error, .c-input-file__helper-text, .c-input-file__legend { font-size: .75rem; } .c-input-file__error, .c-input-file__helper-text { margin-top: var(--ds-spacing-xxs); } .c-input-file__helper-text p { color: var(--ds-color-core-content-main-tertiary); font-weight: 400; } .c-input-file__helper-text a, .c-input-file__helper-text button { color: var(--ds-color-interactive-active-main-primary); font-weight: 700; } .c-input-file__helper-text button { cursor: pointer; } .c-input-file__input-group { align-items: center; display: flex; } .c-input-file__input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; white-space: nowrap; clip: rect(0 0 0 0); clip-path: polygon(0 0, 0 0, 0 0); } .c-input-file__input:focus-visible + .c-input-file__label > .c-input-file__button { outline: 2px solid var(--ds-color-interactive-border-focus); outline-offset: var(--ds-spacing-xxxs); } .c-input-file__label { align-items: center; display: flex; margin: var(--ds-spacing-xs) 0 var(--ds-spacing-xxs); } .c-input-file:not(.c-input-file--disabled) .c-input-file__label { cursor: pointer; } .c-input-file:not(.c-input-file--disabled) .c-input-file__label:focus .c-input-file__button, .c-input-file:not(.c-input-file--disabled) .c-input-file__label:hover .c-input-file__button { border-color: var(--ds-color-interactive-active-main-primary); } .c-input-file:not(.c-input-file--disabled) .c-input-file__label:focus .c-input-file__icon, .c-input-file:not(.c-input-file--disabled) .c-input-file__label:hover .c-input-file__icon { color: var(--ds-color-interactive-active-main-primary); } .c-input-file__button { align-items: center; background-color: var(--ds-color-core-background-main-primary); border-radius: var(--ds-border-radius-s); border: 1px solid var(--ds-color-interactive-active-main-primary); color: var(--ds-color-interactive-active-main-primary); display: flex; font-family: var(--ds-font-family); font-size: .75rem; font-weight: 700; margin-right: var(--ds-spacing-xs); padding: var(--ds-spacing-xs); text-transform: uppercase; } .c-input-file__filename { align-items: center; background-color: var(--ds-color-core-background-main-primary); border: 1px solid var(--ds-color-core-background-main-primary); border-radius: var(--ds-border-radius-s); display: flex; padding: var(--ds-spacing-xs) var(--ds-spacing-s); width: 100%; } .c-input-file__filename:focus-within { border-color: var(--ds-color-interactive-active-main-primary); } .c-input-file__right { align-items: center; display: flex; margin-left: auto; } .c-input-file__error { color: var(--ds-color-core-content-functional-negative); } .c-input-number__label { font-size: .875rem; font-weight: 400; color: var(--ds-color-interactive-text-input-label-default); transition: var(--c-input-transition); margin-bottom: var(--ds-spacing-xxs); display: block; cursor: text; pointer-events: none; } @-moz-document url-prefix("") { .c-input-number__label { line-height: initial; } } @media not all and (min-resolution: .001dpcm) { @supports (-webkit-appearance: none) { .c-input-number__label { line-height: initial; } } } .c-input-number__label:empty { display: none; } .c-input-number--disabled button { opacity: .6; pointer-events: none; } .c-input-number--readonly .c-base-input__container { cursor: default; background-color: var(--ds-color-interactive-background-input-readonly); } .c-input-number--has-reached-max-value .c-base-input__append { background: none; font-size: .625rem; } .c-input-number .c-base-input__label { display: none; } .c-input-number .c-base-input__clear-button__container { display: none !important; } .c-input-number .c-base-input__container { display: flex; align-items: center; justify-content: center; } .c-input-number .c-base-input__input-group { display: flex; flex: 1; align-items: center; } .c-input-number .c-base-input__input { flex: 1; min-width: 0; text-align: center; display: block; } .c-input-number .c-base-input__input[type=number]::-webkit-inner-spin-button, .c-input-number .c-base-input__input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .c-input-number .c-base-input__input[type=number] { appearance: none; -moz-appearance: textfield; } .c-input-number .c-base-input__input::placeholder { opacity: 1; } .c-input-number .c-base-input__prepend__icon__container, .c-input-number .c-base-input__append__icon__container { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: var(--ds-sizing-m); height: var(--ds-sizing-m); } .c-input-number__max-button { background: none; border: none; color: inherit; cursor: unset; } .c-input-password { position: relative; } .c-input-password .c-base-input__container:before { left: 0; width: 0; content: ""; bottom: -2px; display: block; position: absolute; height: var(--ds-spacing-xxs); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: var(--ds-border-radius-xl); border-bottom-right-radius: var(--ds-border-radius-xl); transition: .5 ease-out; background-color: var(--ds-color-core-border-functional-negative); } .c-input-password--strength-weak .c-base-input__container:before { width: 33%; background-color: var(--ds-color-core-border-functional-negative); } .c-input-password--strength-medium .c-base-input__container:before { width: 66%; background-color: var(--ds-color-core-border-functional-warning); } .c-input-password--strength-strong .c-base-input__container:before { width: 100%; background-color: var(--ds-color-core-border-functional-positive); border-top-right-radius: 0; border-bottom-right-radius: var(--ds-border-radius-l); } .c-input-password .c-base-input__helper-text p { color: var(--ds-color-persistent-content-main-tertiary); } .c-input-phone { position: relative; } .c-input-phone__country-code { display: flex; align-items: center; gap: var(--ds-spacing-xxs); background-color: transparent; border-color: transparent; } .c-input-phone__country-code--clickable { cursor: pointer; } .c-input-phone__country-code img { width: 1rem; } .c-input-phone__country-code .c-icon { font-size: .75rem; color: var(--ds-color-persistent-icon-primary); } .c-input-phone--disabled .c-input-phone__country-code { cursor: initial; pointer-events: none; } .c-input-phone__options { width: 100%; z-index: 1; position: absolute; flex-direction: column; box-shadow: var(--ds-shadow-up-xs); margin: var(--ds-spacing-xxs) 0 0 0; border-radius: var(--ds-border-radius-s); background-color: var(--ds-color-interactive-background-input-autosuggest-item-active); overflow: auto; max-height: 320px; } .c-input-phone__options--position-relative { position: relative; } .c-input-phone__filter-input { margin: var(--ds-spacing-s); } .c-input-phone__option { z-index: 2; margin: 0; padding: 0; line-height: 24px; font-size: 1rem; list-style-type: none; color: var(--ds-color-persistent-content-main-primary); background-color: var(--ds-color-persistent-background-main-primary); outline-offset: -1px; transition: all .3s; } .c-input-phone__option-flag { width: 1.5rem; } .c-input-phone__option:first-child { border-top-left-radius: var(--ds-border-radius-s); border-top-right-radius: var(--ds-border-radius-s); } .c-input-phone__option:last-child { border-bottom-left-radius: var(--ds-border-radius-s); border-bottom-right-radius: var(--ds-border-radius-s); } .c-input-phone__option + .c-input-phone__option { border-top: 1px solid var(--ds-color-persistent-border-main-primary); } .c-input-phone__option--selected, .c-input-phone__option:focus { background-color: var(--ds-color-interactive-background-main-active); color: var(--ds-color-interactive-content-plain-active); } .c-input-phone__option--selected:hover, .c-input-phone__option:focus:hover { color: var(--ds-color-persistent-content-main-primary); background-color: var(--ds-color-persistent-background-main-primary); } .c-input-phone__option-match--partial { font-weight: 700; } .c-input-phone__option-match--exact { font-weight: 400; } .c-input-phone__option-button { width: 100%; cursor: pointer; text-align: left; padding: var(--ds-spacing-s); display: inline-flex; align-items: center; gap: var(--ds-spacing-xs); font-weight: 400; outline-offset: -1px; background-color: inherit; border: none; color: inherit; } .c-input-phone__option-button :not(span):not(strong) { display: flex; align-items: center; gap: var(--ds-spacing-xs); } .c-input-phone__option-button .c-checkbox { margin-right: 0; } .c-input-phone__option-button i { font-size: 1.25rem; } .c-input-phone__option-icon { width: var(--ds-sizing-m); height: var(--ds-sizing-m); } .c-input-phone__option-image { max-width: var(--ds-sizing-m); } .c-input-phone__option:hover { background-color: var(--ds-color-interactive-background-input-autosuggest-item-hover); z-index: 3; } .c-input-phone__option:focus-visible { border: 1px solid var(--ds-color-interactive-border-input-focus); background-color: var(--ds-color-interactive-background-main-active); color: var(--ds-color-interactive-content-plain-active); } .c-input-phone__option:active { background-color: var(--ds-color-interactive-background-input-autosuggest-item-pressed); z-index: 3; } .c-input-range { display: flex; flex-direction: column; align-items: flex-start; padding: 0; gap: var(--ds-spacing-xxs); } .c-input-range .c-base-input__clear-button__container { display: none !important; } .c-input-range__label { font-size: .875rem; font-weight: 400; color: var(--ds-color-interactive-text-input-label-default); transition: var(--c-input-transition); margin-bottom: var(--ds-spacing-xxs); display: block; cursor: text; pointer-events: none; } @-moz-document url-prefix("") { .c-input-range__label { line-height: initial; } } @media not all and (min-resolution: .001dpcm) { @supports (-webkit-appearance: none) { .c-input-range__label { line-height: initial; } } } .c-input-range__container { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 8px; width: 100%; margin-bottom: var(--ds-spacing-s); } .c-input-range__wrapper { display: contents; } .c-input-range__input { width: 100%; } .c-input-range__input input { text-align: center; } .c-input-range__slider { display: inline-block; width: 100%; margin-top: var(--ds-spacing-s); margin-bottom: var(--ds-spacing-s); box-sizing: border-box; font-size: 13px; background-color: var(--slider-bg); padding: 0 12px; --slider-connect-bg: var(--ds-color-interactive-border-input-range-handle-active); --slider-height: 6px; --slider-handle-bg: #ffffff; --slider-bg: #e5e5e5; --slider-handle-shadow: .2px .2px 0px 4px transparent; --slider-connect-bg-disabled: var(--ds-color-interactive-background-input-range-track-selected); --slider-handle-width: 24px; --slider-handle-height: 24px; --slider-handle-ring-width: 2px; --slider-handle-ring-color: transparent; --slider-handle-border: 8px solid var(--ds-color-interactive-border-input-range-handle-active); } .c-input-range .slider-connects { margin: 0 -12px; } .c-input-range .slider-handle { box-shadow: 0 0 0 var(--slider-handle-ring-width, 2px) var(--slider-handle-ring-color, transparent); outline: none; } .c-input-range .slider-handle:hover { --slider-handle-border: 8px solid var(--ds-color-interactive-border-input-range-handle-hover); box-shadow: 0 0 0 var(--slider-handle-ring-width, 2px) var(--ds-color-interactive-background-input-range-handle-hover), .2px .2px 0 4.5px var(--ds-color-interactive-background-input-radio-selected-hover); outline: none; } .c-input-range .slider-handle:focus { box-shadow: 0 0 0 var(--slider-handle-ring-width, 2px) var(--ds-color-interactive-background-input-range-handle-active), .2px .2px 0 4.5px var(--ds-color-interactive-background-input-radio-selected-active); outline: none; } .c-input-range .slider-handle:focus:active { --slider-handle-border: 8px solid var(--ds-color-interactive-border-input-range-handle-pressed); box-shadow: 0 0 0 var(--slider-handle-ring-width, 2px) var(--ds-color-interactive-background-input-range-handle-pressed), .2px .2px 0 4.5px var(--ds-color-interactive-background-input-radio-selected-pressed); outline: none; } .c-input-range--disabled { opacity: .75; cursor: initial; pointer-events: none; } .c-input-range--disabled .slider-handle { --slider-handle-ring-width: 0; --slider-handle-ring-color: transparent; --slider-handle-border: 8px solid var(--ds-color-interactive-background-main-disabled); } .c-input-select { display: flex; flex-direction: column; gap: var(--ds-spacing-xxs); } .c-input-select__container { width: 100%; display: flex; position: relative; flex-direction: row; align-items: center; border-radius: var(--ds-border-radius-s); border: 1px solid var(--ds-color-interactive-border-input-active); background-color: var(--ds-color-interactive-background-input-active); transition: var(--c-input-transition); } .c-input-select__container:hover { border: 1px solid var(--ds-color-interactive-border-input-hover); } .c-input-select__input-group { width: 100%; max-width: 100%; display: flex; } .c-input-select__label { font-size: .875rem; font-weight: 400; color: var(--ds-color-interactive-text-input-label-default); transition: var(--c-input-transition); margin-bottom: var(--ds-spacing-xxs); display: block; cursor: text; pointer-events: none; } @-moz-document url-prefix("") { .c-input-select__label { line-height: initial; } } @media not all and (min-resolution: .001dpcm) { @supports (-webkit-appearance: none) { .c-input-select__label { line-height: initial; } } } .c-input-select__label { margin-bottom: 0; } .c-input-select__input { width: 100%; border: none; outline: none; color: var(--ds-color-persistent-text-primary); padding-top: var(--ds-spacing-s); padding-bottom: var(--ds-spacing-s); font-size: 1rem; border-radius: var(--ds-border-radius-s); font-weight: 400; transition: var(--c-input-transition); line-height: 1.375; min-height: 20px; min-width: min-content; } .c-input-select__input::placeholder { font-size: 1rem; font-weight: 400; color: var(--ds-color-interactive-text-input-placeholder); } .c-input-select__input:-webkit-autofill { box-shadow: 0 0 0 62.5rem var(--ds-color-core-background-main-primary) inset; } .c-input-select__message { font-size: .75rem; margin-top: var(--ds-spacing-xxs); display: flex; flex-direction: column; } .c-input-select__message { margin-top: 0; } .c-input-select__helper-text:empty { display: none; } .c-input-select__helper-text p { font-weight: 400; color: var(--ds-color-persistent-text-secondary); } .c-input-select__helper-text button { cursor: pointer; } .c-input-select__error-text p { font-weight: 400; color: var(--ds-color-persistent-text-functional-negative); } .c-input-select__success-text p { font-weight: 400; color: var(--ds-color-persistent-text-functional-positive); } .c-input-select__modal-button { max-width: 12rem; } .c-input-select svg { fill: var(--ds-color-persistent-text-primary); } .c-input-select--disabled .c-input-select__container, .c-input-select--disabled .c-input-select__input { background-color: transparent; opacity: .6; } .c-input-select--disabled .c-input-select__container:hover { border: 1px solid var(--ds-color-interactive-border-input-hover); } .c-input-select--disabled .c-input-select__label, .c-input-select--disabled .c-input-select__input, .c-input-select--disabled .c-input-select__helper-text p, .c-input-select--disabled .c-input-select__helper-text a, .c-input-select--disabled .c-input-select__helper-text button { cursor: default; opacity: .8; } .c-input-select--readonly .c-input-select__container, .c-input-select--readonly .c-input-select__input { background-color: var(--ds-color-interactive-background-input-readonly); } .c-input-select:focus-within .c-input-select__container { border: 1px solid var(--ds-color-interactive-border-input-focus); outline: 1px solid var(--ds-color-interactive-border-input-focus); } .c-input-select:focus-within .c-input-select__input::placeholder { opacity: 1; } .c-input-select--has-error .c-input-select__container { border: 1px solid var(--ds-color-interactive-border-input-error-active); } .c-input-select--has-error .c-input-select__label { color: var(--ds-color-persistent-text-functional-negative); } .c-input-select--has-success .c-input-select__container { border: 1px solid var(--ds-color-core-border-functional-positive); } .c-input-select { min-width: 200px; position: relative; } .c-input-select__container { cursor: pointer; flex-wrap: wrap; padding-left: var(--ds-spacing-s); padding-right: var(--ds-spacing-s); } .c-input-select--size-s .c-input-select__container { padding-left: var(--ds-spacing-xs); padding-right: var(--ds-spacing-xs); padding-top: 0; padding-bottom: 0; } .c-input-select--size-s .c-input-select__input { padding-top: var(--ds-spacing-xs); padding-bottom: var(--ds-spacing-xs); } .c-input-select--size-m .c-input-select__container { padding-left: var(--ds-spacing-s); padding-right: var(--ds-spacing-s); padding-top: 0; padding-bottom: 0; } .c-input-select__multiple-value-container { display: flex; gap: var(--ds-spacing-xs); } .c-input-select--disabled .c-input-select__button { background-color: transparent; opacity: .6; } .c-input-select__placeholder { font-size: 1rem; font-weight: 400; color: var(--ds-color-interactive-text-input-placeholder); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .c-input-select__input-group { width: 100%; } .c-input-select__chevron { font-size: 1.4rem; color: var(--ds-color-interactive-icon-main-active); } .c-input-select__input { display: flex; align-items: center; justify-content: space-between; width: 100%; border: none; outline: none; color: var(--ds-color-persistent-text-primary); padding-top: var(--ds-spacing-s); padding-bottom: var(--ds-spacing-s); font-size: 1rem; border-radius: var(--ds-border-radius-s); font-weight: 400; transition: var(--c-input-transition); line-height: 1.375; min-height: 20px; min-width: min-content; padding-top: .925rem; padding-bottom: .925rem; } .c-input-select__input ::selection { background: var(--ds-color-persistent-background-functional-main-information); } .c-input-select__value-container { display: block; flex-grow: 1; } .c-input-select--disabled { pointer-events: none; } .c-input-select__options { width: 100%; z-index: 1; position: absolute; flex-direction: column; box-shadow: var(--ds-shadow-up-xs); margin: var(--ds-spacing-xxs) 0 0 0; border-radius: var(--ds-border-radius-s); background-color: var(--ds-color-interactive-background-input-autosuggest-item-active); overflow: auto; max-height: 320px; } .c-input-select__options--position-relative { position: relative; } .c-input-select__filter:hover { background-color: inherit !important; } .c-input-select__filter-input { display: flex; margin: var(--ds-spacing-s); } .c-input-select__chip-close-icon { cursor: pointer; font-size: 1.2rem; color: var(--ds-color-interactive-border-focus); } .c-input-select .c-chip button { background-color: transparent; border: none; display: flex; align-items: center; } .c-input-select__option { z-index: 2; margin: 0; padding: 0; line-height: 24px; font-size: 1rem; list-style-type: none; color: var(--ds-color-persistent-content-main-primary); background-color: var(--ds-color-persistent-background-main-primary); outline-offset: -1px; } .c-input-select__option:first-child { border-top-left-radius: var(--ds-border-radius-s); border-top-right-radius: var(--ds-border-radius-s); } .c-input-select__option:last-child { border-bottom-left-radius: var(--ds-border-radius-s); border-bottom-right-radius: var(--ds-border-radius-s); } .c-input-select__option + .c-input-select__option { border-top: 1px solid var(--ds-color-persistent-border-main-primary); } .c-input-select__option--selected, .c-input-select__option--highlighted, .c-input-select__option:focus { background-color: var(--ds-color-interactive-background-main-active); color: var(--ds-color-interactive-content-plain-active); } .c-input-select__option--selected button, .c-input-select__option--highlighted button, .c-input-select__option:focus button { color: inherit; background-color: transparent; border: none; } .c-input-select__option--selected.c-input-select__option:hover, .c-input-select__option--highlighted.c-input-select__option:hover { background-color: var(--ds-color-interactive-background-button-filled-main-hover); color: var(--ds-color-interactive-content-plain-active); } .c-input-select__option--selected.c-input-select__option:active, .c-input-select__option--highlighted.c-input-select__option:active { background-color: var(--ds-color-interactive-background-button-filled-main-pressed); color: var(--ds-color-interactive-content-plain-active); } .c-input-select__option-match { transition: all .3s; } .c-input-select__option-match--partial { font-weight: 700; } .c-input-select__option-match--exact { font-weight: 400; } .c-input-select__option-button { width: 100%; cursor: pointer; text-align: left; padding: var(--ds-spacing-s); display: inline-flex; align-items: center; gap: var(--ds-spacing-xs); font-weight: 400; outline-offset: -1px; background-color: transparent; border: none; } .c-input-select__option-button :not(span):not(strong) { display: flex; align-items: center; gap: var(--ds-spacing-xs); } .c-input-select__option-button .c-checkbox { margin-right: 0; } .c-input-select__option-button i { font-size: 1.25rem; } .c-input-select__option-icon { width: var(--ds-sizing-m); height: var(--ds-sizing-m); } .c-input-select__option-image { max-width: var(--ds-sizing-m); } .c-input-select__option:hover { background-color: var(--ds-color-interactive-background-input-autosuggest-item-hover); z-index: 3; } .c-input-select__option:focus-visible { border: 1px solid var(--ds-color-interactive-border-input-focus); background-color: var(--ds-color-interactive-background-main-active); color: var(--ds-color-interactive-content-plain-active); } .c-input-select__option:active { background-color: var(--ds-color-interactive-background-input-autosuggest-item-pressed); z-index: 3; } .c-link { cursor: pointer; align-items: center; gap: var(--ds-spacing-xxs); display: inline-flex; text-decoration: none; border-radius: var(--ds-border-radius-s); color: var(--ds-color-interactive-active-main-primary); font-weight: 400; background-color: transparent; border-color: transparent; } .c-link__icon__container { position: relative; padding: var(--ds-spacing-xxxs); } .c-link--size-m { font-size: 1rem; line-height: 24px; } .c-link--size-m .c-link__icon__container { width: var(--ds-sizing-s); height: var(--ds-sizing-s); } .c-link--size-s { font-size: .875rem; line-height: 20px; } .c-link--size-s .c-link__icon__container { width: var(--ds-sizing-s); height: var(--ds-sizing-s); } .c-link--size-xs { font-size: .75rem; line-height: 16px; } .c-link--size-xs .c-link__icon__container { width: var(--ds-sizing-m); height: var(--ds-sizing-m); } .c-link--tone-main { fill: var(--ds-color-interactive-text-link-main-active); color: var(--ds-color-interactive-text-link-main-active); } .c-link--tone-main:hover { color: var(--ds-color-interactive-text-link-main-hover); } .c-link--tone-main:active { color: var(--ds-color-interactive-text-link-main-pressed); } .c-link--tone-accent { fill: var(--ds-color-interactive-text-link-accent-active); color: var(--ds-color-interactive-text-link-accent-active); } .c-link--tone-accent:hover { color: var(--ds-color-interactive-text-link-accent-hover); } .c-link--tone-accent:active { color: var(--ds-color-interactive-text-link-accent-pressed); } .c-link--tone-destructive { fill: var(--ds-color-interactive-text-link-destructive-active); color: var(--ds-color-interactive-text-link-destructive-active); } .c-link--tone-destructive:hover { color: var(--ds-color-interactive-text-link-destructive-hover); } .c-link--tone-destructive:active { color: var(--ds-color-interactive-text-link-destructive-pressed); } .c-link--tone-loyalty { fill: var(--ds-color-interactive-active-loyalty-primary); color: var(--ds-color-interactive-active-loyalty-primary); } .c-link--tone-loyalty:hover { color: var(--ds-color-interactive-active-loyalty-hover); } .c-link--tone-loyalty:active { color: var(--ds-color-interactive-active-loyalty-pressed); } .c-link--tone-negative { fill: var(--ds-color-interactive-active-negative-primary); color: var(--ds-color-interactive-active-negative-primary); } .c-link--tone-negative:hover { color: var(--ds-color-interactive-active-negative-hover); } .c-link--tone-negative:active { color: var(--ds-color-interactive-active-negative-pressed); } .c-link--tone-positive { fill: var(--ds-color-interactive-active-positive-primary); color: var(--ds-color-interactive-active-positive-primary); } .c-link--tone-positive:hover { color: var(--ds-color-interactive-active-positive-hover); } .c-link--tone-positive:active { color: var(--ds-color-interactive-active-positive-pressed); } .c-link--tone-promotion { fill: var(--ds-color-interactive-active-promotion-primary); color: var(--ds-color-interactive-active-promotion-primary); } .c-link--tone-promotion:hover { color: var(--ds-color-interactive-active-promotion-hover); } .c-link--tone-promotion:active { color: var(--ds-color-interactive-active-promotion-pressed); } .c-link--tone-monochrome { fill: var(--ds-color-interactive-active-monochrome-primary); color: var(--ds-color-interactive-active-monochrome-primary); } .c-link--tone-monochrome:hover { color: var(--ds-color-interactive-active-monochrome-hover); } .c-link--tone-monochrome:active { color: var(--ds-color-interactive-active-monochrome-pressed); } .c-link--tone-marketplace { fill: var(--ds-color-interactive-active-marketplace-primary); color: var(--ds-color-interactive-active-marketplace-primary); } .c-link--tone-marketplace:hover { color: var(--ds-color-interactive-active-marketplace-hover); } .c-link--tone-marketplace:active { color: var(--ds-color-interactive-active-marketplace-pressed); } .c-link--bold { font-weight: 700; } .c-link--underline { text-decoration: underline; text-underline-offset: 3px; } .c-link--disabled { pointer-events: none; opacity: .6; } .c-link:focus-visible { outline: 2px solid var(--ds-color-interactive-border-focus); outline-offset: var(--ds-spacing-xxxs); } .c-link--reversed { color: var(--ds-color-interactive-active-reversed-primary); } .c-link--reversed:visited { color: var(--ds-color-decorative-background-main-lilac); } .c-link--reversed:hover { color: var(--ds-color-interactive-active-reversed-hover); } .c-link--reversed:active { color: var(--ds-color-interactive-active-reversed-pressed); } .c-link[aria-current=page] { pointer-events: none; } .c-link[aria-current=page]:visited { color: currentColor; } svg.c-link__icon { width: 100%; height: 100%; } .c-list-item-deprecated { width: 100%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: .5rem; gap: var(--ds-spacing-s); padding: var(--ds-spacing-s); background-color: var(--ds-color-core-background-main-primary); color: var(--ds-color-core-content-main-primary); text-decoration: none; } .c-list-item-deprecated--size-xs { padding: .375rem var(--ds-spacing-s); } .c-list-item-deprecated--size-s { padding: var(--ds-spacing-xs) var(--ds-spacing-s); } .c-list-item-deprecated:focus-visible { position: relative; } .c-list-item-deprecated:hover { background-color: var(--ds-color-decorative-background-main-celeste); color: var(--ds-color-interactive-active-main-primary); } .c-list-item-deprecated:active { background-color: var(--ds-color-interactive-active-subtle-pressed); } .c-list-item-deprecated--disabled { opacity: .6; cursor: initial; pointer-events: none; } .c-list-item-deprecated--highlighted.c-list-item-deprecated--tone-positive { background-color: var(--ds-color-core-background-functional-positive); color: var(--ds-color-core-content-functional-positive); } .c-list-item-deprecated--highlighted.c-list-item-deprecated--tone-negative { background-color: var(--ds-color-core-background-functional-negative); color: var(--ds-color-core-content-functional-negative); } .c-list-item-deprecated--highlighted.c-list-item-deprecated--tone-warning { background-color: var(--ds-color-core-background-functional-warning); color: var(--ds-color-core-content-functional-warning); } .c-list-item-deprecated--highlighted.c-list-item-deprecated--tone-information { background-color: var(--ds-color-core-background-functional-information); color: var(--ds-color-core-content-functional-information); } .c-list-item-deprecated--highlighted.c-list-item-deprecated--tone-promotion { background-color: var(--ds-color-core-background-specific-promotion); color: var(--ds-color-core-content-specific-promotion); } .c-list-item-deprecated--highlighted:hover { color: var(--ds-color-interactive-active-main-primary); } .c-list-item-deprecated__image-container { flex-shrink: 0; overflow: hidden; width: 4rem; height: 4rem; border-radius: var(--ds-border-radius-s); } .c-list-item-deprecated--size-xs .c-list-item-deprecated__image-container { width: 2rem; height: 2rem; } .c-list-item-deprecated--size-s .c-list-item-deprecated__image-container { width: 2.5rem; height: 2.5rem; } .c-list-item-deprecated__image-container img, .c-list-item-deprecated__image-container svg { width: 100%; margin-bottom: 0; display: block; } .c-list-item-deprecated__image-container .c-icon { font-size: 2rem; margin: .25rem; } .c-list-item-deprecated__body { margin-right: auto; } .c-list-item-deprecated__title, .c-list-item-deprecated__subtitle { color: currentColor; } .c-list-item-deprecated__subtitle { opacity: .675; } .c-list-item-deprecated__append-container { flex-shrink: 0; } .c-list-item-deprecated__chevron { font-size: 1.5rem; } .c-list-item { display: flex; flex-direction: row; justify-content: space-between; align-items: center; background-color: var(--ds-color-persistent-background-main); } .c-list-item__content { flex-grow: 1; display: flex; align-items: center; flex-direction: row; gap: var(--ds-spacing-xs); font-size: 1rem; line-height: 24px; background: none; border: none; color: inherit; } .c-list-item--clickable .c-list-item__content { transition: all .2s ease-in-out; } .c-list-item--clickable .c-list-item__content:hover { background-color: var(--ds-color-interactive-background-navigation-item-hover); } .c-list-item--clickable .c-list-item__content:active { background-color: var(--ds-color-interactive-background-navigation-item-pressed); } .c-list-item__button { display: flex; align-items: center; flex-direction: row; gap: var(--ds-spacing-xs); } .c-list-item__icon { font-size: 1.5rem; color: var(--ds-color-interactive-icon-button-transparent-main-active); } .c-list-item__image-container { display: flex; align-items: center; justify-content: center; max-width: 64px; } .c-list-item__image-container img { max-width: 100%; } .c-list-item--size-s .c-list-item__content { padding: var(--ds-spacing-xs) var(--ds-spacing-s); } .c-list-item--size-m .c-list-item__content { padding: var(--ds-spacing-s); } .c-list-item .c-checkbox__label { color: var(--ds-color-persistent-text-primary); } @keyframes spin { 0% { transform: rotate(0); } to { transform: rotate(360deg); } } .c-loader { display: inline-flex; margin: 0 auto; font-size: 2rem; animation: spin 1s infinite linear; color: var(--ds-color-core-content-functional-information); } .c-modal { inset: 0; width: 100%; height: 100%; border: none; display: flex; z-index: 18000; position: fixed; background: none; align-items: center; justify-content: center; padding-top: var(--ds-spacing-l); transition: all .3 ease; } .c-modal:before { content: " "; inset: 0; width: 100%; height: 100%; position: fixed; opacity: .5; z-index: -1; background-color: #051326; } .c-modal__container { bottom: 0; width: 100%; display: flex; overflow: hidden; max-height: 100%; position: absolute; height: fit-content; align-items: initial; flex-direction: column; justify-content: flex-end; box-shadow: var(--ds-shadow-up-l); border-radius: var(--ds-border-radius-m) var(--ds-border-radius-m) 0 0; background-color: var(--ds-color-persistent-background-modal-default); } @media only screen and (min-width: 768px) { .c-modal__container { height: auto; bottom: auto; margin-right: 0 40px; border-radius: var(--ds-border-radius-m); } } .c-modal__container--size-s { width: 100%; max-height: 90vh; } @media only screen and (min-width: 768px) { .c-modal__container--size-s { max-width: 560px; max-height: 528px; } } @media only screen and (min-width: var(--ds-breakpoint-tablet-landscape)) { .c-modal__container--size-s { max-height: 450px; } } @media only screen and (min-width: var(--ds-breakpoint-desktop)) { .c-modal__container--size-s { max-height: 528px; } } .c-modal__container--size-m { width: 100%; max-height: 90vh; } @media only screen and (min-width: 768px) { .c-modal__container--size-m { max-width: 880px; max-height: 528px; } } @media only screen and (min-width: var(--ds-breakpoint-tablet-landscape)) { .c-modal__container--size-m { max-height: 432px; } } @media only screen and (min-width: var(--ds-breakpoint-desktop)) { .c-modal__container--size-m { max-height: 528px; } } .c-modal__container--size-full-screen { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; position: fixed; inset: 0; border-radius: 0; margin: 0 !important; } .c-modal__container--size-full-screen .c-modal__body { flex-grow: 1; } @media only screen and (min-width: 768px) { .c-modal__container--position-left, .c-modal__container--position-right { top: 0; margin: 0; width: 100%; height: 100%; max-height: 100%; max-width: 512px; } .c-modal__container--position-left .c-modal__body, .c-modal__container--position-right .c-modal__body { flex-grow: 1; } .c-modal__container--position-left { left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; } .c-modal__container--position-right { right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } .c-modal__container--position-bottom { bottom: 0; width: 100%; top: initial; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } } .c-modal__container--position-center { margin: 0; } @media only screen and (min-width: 768px) { .c-modal__container--position-center { margin: 0 40px; } } .c-modal__header { display: flex; padding: var(--ds-spacing-xs) var(--ds-spacing-s); align-items: center; justify-content: space-between; box-shadow: var(--ds-shadow-up-s); position: relative; z-index: 1; } .c-modal__header__title { text-align: center; margin: 0 var(--ds-spacing-s); } .c-modal__header__icon { cursor: pointer; padding: var(--ds-spacing-xxxs); font-size: 1.7rem; display: flex; align-items: center; justify-content: center; background-color: transparent; border-color: transparent; } .c-modal__header__icon svg { width: 100%; } .c-modal__header__icon__container { display: flex; align-items: center; justify-content: center; width: var(--ds-sizing-m); padding: var(--ds-spacing-xxxs); height: var(--ds-sizing-xxl); } .c-modal__body { overflow-y: auto; padding: var(--ds-spacing-s) var(--ds-spacing-m); } .c-modal__footer { bottom: 0; display: flex; position: sticky; gap: var(--ds-spacing-s); align-items: flex-end; flex-direction: column; justify-content: flex-end; padding: var(--ds-spacing-s) var(--ds-spacing-m); border-top: 1px solid var(--ds-color-persistent-border-modal-default); background-color: var(--ds-color-persistent-background-modal-default); } .c-modal__footer:empty { display: none; } .c-modal__footer .c-button { width: 100%; } @media only screen and (min-width: 768px) { .c-modal__footer { flex-direction: row; align-items: center; } .c-modal__footer .c-button { width: auto; } } .c-modal-enter-active { transition: opacity .3 ease-out; } .c-modal-enter-active .c-modal__container { transition: transform .3 ease-out; } .c-modal-leave-active { transition: opacity .3 ease-out; } .c-modal-leave-active .c-modal__container { transition: transform .3 ease-out; } .c-modal-enter, .c-modal-leave-to { opacity: 0; } .c-modal-enter .c-modal__container, .c-modal-leave-to .c-modal__container { transform: scale(.8) translateY(var(--ds-spacing-m)); } .c-navigation-item { display: flex; flex-direction: row; align-items: center; justify-content: space-between; background-color: var(--ds-color-interactive-background-navigation-item-active); transition: all .2s ease-in-out; height: 100%; } .c-navigation-item:hover { background-color: var(--ds-color-interactive-background-navigation-item-hover); } .c-navigation-item:active { background-color: var(--ds-color-interactive-background-navigation-item-pressed); } .c-navigation-item__button { flex-grow: 1; display: flex; cursor: pointer; align-items: center; flex-direction: row; gap: var(--ds-spacing-xs); text-decoration: none; background-color: transparent; border-color: transparent; } .c-navigation-item__button--size-s { padding: var(--ds-spacing-xs) var(--ds-spacing-s); min-height: 48px; } .c-navigation-item__button--size-m { padding: var(--ds-spacing-s); min-height: 56px; } .c-navigation-item__content { display: flex; gap: var(--ds-spacing-xxs); flex-direction: column; flex: 1 1 0; } .c-navigation-item__icon { font-size: 1.5rem; color: var(--ds-color-interactive-icon-navigation-item-active); height: 1.5rem; } .c-navigation-item--disabled { opacity: .6; cursor: initial; pointer-events: none; } .c-navigation-item--selected { background-color: var(--ds-color-interactive-background-navigation-item-selected-active); } .c-navigation-item--selected:hover { background-color: var(--ds-color-interactive-background-navigation-item-selected-hover); } .c-navigation-item--selected:active { background-color: var(--ds-color-interactive-background-navigation-item-selected-pressed); } .c-pagination__list { padding: 0; list-style: none; align-items: center; display: inline-flex; justify-content: center; gap: var(--ds-spacing-xxxs); } .c-pagination__page-number { display: flex; align-items: center; width: var(--ds-sizing-m); height: var(--ds-sizing-m); justify-content: center; } .c-pagination__list-item { display: flex; list-style: none; border-radius: 4px; align-items: center; padding: var(--ds-spacing-xs) var(--ds-spacing-xs); } .c-pagination__list-item--active { color: #fff; background-color: var(--ds-color-interactive-active-main-primary); } .c-pagination__list-item--active:focus-visible { outline: 2px solid var(--ds-color-interactive-border-focus); outline-offset: var(--ds-spacing-xxxs); } .c-pagination--compact { display: inline-block; } .c-pagination__compact { display: flex; align-items: center; gap: var(--ds-spacing-s); justify-content: center; } .c-pagination__compact-nav { padding: 0; display: flex; align-items: center; justify-content: center; min-width: var(--ds-sizing-m); height: var(--ds-sizing-m); } .c-pagination__compact-nav .c-icon { font-size: 1.6rem; } .c-pagination__compact-nav .c-link { padding: 0; } .c-pagination__compact-nav--disabled { color: var(--ds-color-text-disabled); cursor: not-allowed; display: flex; align-items: center; justify-content: center; min-width: var(--ds-sizing-m); height: var(--ds-sizing-m); } .c-pagination__compact-nav--disabled .c-icon { font-size: 1.25rem; } .c-pagination__compact-text { white-space: nowrap; color: var(--ds-color-text-primary); } .c-pagination__compact-text--mobile-hidden { cursor: pointer; } .c-pagination__compact-text--mobile-hidden:hover { color: var(--ds-color-interactive-active-main-primary); } @media (max-width: 767px) { .c-pagination__compact-text--mobile-hidden { display: none; } } .c-pagination__compact-select { min-width: 80px; max-width: 100px; margin: 0; } .c-pagination__compact-select .c-input-select { min-width: 80px; max-width: 100px; } .c-pagination .row { display: flex; flex-direction: row; align-items: center; gap: var(--ds-spacing-xs); } .c-popin { inset: 0; width: 100%; height: 100%; border: none; display: flex; z-index: 18000; position: fixed; align-items: center; justify-content: center; transition: all .3 ease; background-color: transparent; } .c-popin:before { content: " "; top: 0; width: 100%; height: 100%; opacity: .5; z-index: -1; position: fixed; background-color: #051326; } .c-popin__container { bottom: auto; width: 100%; display: flex; overflow: hidden; max-width: 480px; max-height: 100%; position: relative; gap: var(--ds-spacing-s); align-items: initial; flex-direction: column; justify-content: flex-end; box-shadow: var(--ds-shadow-up-l); border-radius: var(--ds-border-radius-m); padding: var(--ds-spacing-s) var(--ds-spacing-s) var(--ds-spacing-xs); background-color: var(--ds-color-persistent-background-popin-default); } .c-popin--closable .c-popin__container { padding-top: var(--ds-spacing-xs); } .c-popin__header { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; } .c-popin__header__title { margin: 0; text-align: left; text-align: center; } .c-popin__icon { line-height: 1; cursor: pointer; font-size: 1.5rem; padding: var(--ds-spacing-xxxs); background-color: transparent; border-color: transparent; } .c-popin__body { flex-grow: 1; overflow-y: auto; } .c-popin__footer { bottom: 0; display: flex; position: sticky; gap: var(--ds-spacing-xs); align-items: flex-end; flex-direction: column; justify-content: flex-end; margin: 0 0 var(--ds-spacing-xs); background-color: var(--ds-color-persistent-background-main-primary); border-top: 1px solid var(--ds-color-persistent-background-main-primary); } .c-popin__footer c-button, .c-popin__footer button, .c-popin__footer .c-button { width: 100%; } .c-popin-enter-active { transition: opacity .3 ease-out; } .c-popin-enter-active .c-popin__container { transition: transform .3 ease-out; } .c-popin-leave-active { transition: opacity .3 ease-out; } .c-popin-leave-active .c-popin__container { transition: transform .3 ease-out; } .c-popin-enter, .c-popin-leave-to { opacity: 0; } .c-popin-enter .c-popin__container, .c-popin-leave-to .c-popin__container { transform: scale(.8) translateY(var(--ds-spacing-m)); } :root { --ds-popover-box-max-width: 343px; } .c-popover { position: relative; } .c-popover__box { z-index: 1; width: 100vw; display: flex; text-align: left; position: absolute; gap: var(--ds-spacing-xs); height: fit-content; flex-direction: column; box-shadow: var(--ds-shadow-up); justify-content: flex-start; max-width: var(--ds-popover-box-max-width); border-radius: var(--ds-border-radius-s); background-color: var(--ds-color-persistent-background-popover-default); padding: var(--ds-spacing-xs) var(--ds-spacing-xxs) var(--ds-spacing-s) var(--ds-spacing-s); } .c-popover__box:after { content: " "; position: absolute; transform: rotate(45deg); width: var(--ds-sizing-s); height: var(--ds-sizing-s); border-top-left-radius: var(--ds-border-radius-s); background-color: var(--ds-color-persistent-background-popover-arrow-default); border-top: 1px solid var(--ds-color-persistent-background-popover-arrow-default); border-left: 1px solid var(--ds-color-persistent-background-popover-arrow-default); } .c-popover__box--position-top-left, .c-popover__box--position-top-right { top: calc(-1 * var(--ds-spacing-s)); transform: translateY(-100%); } .c-popover__box--position-top-left:after, .c-popover__box--position-top-right:after { bottom: calc(-1 * var(--ds-spacing-xs)); transform: rotate(-135deg); } .c-popover__box--position-bottom-left, .c-popover__box--position-bottom-right { bottom: calc(-1 * var(--ds-spacing-s)); transform: translateY(100%); } .c-popover__box--position-bottom-left:after, .c-popover__box--position-bottom-right:after { top: calc(-1 * var(--ds-spacing-xs)); transform: rotate(45deg); } .c-popover__box--position-top-left, .c-popover__box--position-bottom-left { right: calc(50% - var(--ds-spacing-l) - var(--ds-sizing-s) / 2); } .c-popover__box--position-top-left:after, .c-popover__box--position-bottom-left:after { right: var(--ds-spacing-l); } .c-popover__box--position-top-right, .c-popover__box--position-bottom-right { left: calc(50% - var(--ds-spacing-l) - var(--ds-sizing-s) / 2); } .c-popover__box--position-top-right:after, .c-popover__box--position-bottom-right:after { left: var(--ds-spacing-l); } .c-popover__box--position-left, .c-popover__box--position-right { top: 50%; } .c-popover__box--position-left:after, .c-popover__box--position-right:after { top: 0; bottom: 0; margin: auto 0; } .c-popover__box--position-left { left: calc(-1 * var(--ds-spacing-s)); transform: translate(-100%, -50%); } .c-popover__box--position-left:after { right: calc(-1 * var(--ds-spacing-xs)); transform: rotate(135deg); } .c-popover__box--position-right { right: calc(-1 * var(--ds-spacing-s)); transform: translate(100%, -50%); } .c-popover__box--position-right:after { left: calc(-1 * var(--ds-spacing-xs)); transform: rotate(-45deg); } .c-popover__box--position-top, .c-popover__box--position-bottom { left: 50%; } .c-popover__box--position-top:after, .c-popover__box--position-bottom:after { left: 0; right: 0; margin: 0 auto; bottom: calc(-1 * var(--ds-spacing-xs)); transform: rotate(-135deg); } .c-popover__box--position-top { top: calc(-1 * var(--ds-spacing-s)); transform: translate(-50%, -100%); } .c-popover__box--position-top:after { bottom: calc(-1 * var(--ds-spacing-xs)); transform: rotate(-135deg); } .c-popover__box--position-bottom { bottom: calc(-1 * var(--ds-spacing-s)); transform: translate(-50%, 100%); } .c-popover__box--position-bottom:after { top: calc(-1 * var(--ds-spacing-xs)); transform: rotate(45deg); } .c-popover__header { display: flex; align-items: center; flex-direction: row-reverse; justify-content: space-between; } .c-popover__header--title-only { flex-direction: row; } .c-popover__header:empty { display: none; } .c-popover__title { margin: var(--ds-spacing-xs) 0; } .c-popover__body { margin-right: 48px; } .c-popover__body:empty { display: none; } .c-quantity-button--has-value .c-button { display: none; } .c-quantity-button--has-value .c-input-number { display: flex; } .c-quantity-button:not(.c-quantity-button--has-value) .c-button { display: flex; } .c-quantity-button:not(.c-quantity-button--has-value) .c-input-number { display: none; } .c-quantity-button__input .c-base-input { border-radius: var(--ds-border-radius-s); display: flex; justify-content: center; } .c-quantity-button__input .c-base-input__container { color: #fff; width: 180px; border-radius: var(--ds-border-radius-s); border: none; } .c-quantity-button__input .c-base-input__input { font-weight: 700; color: #fff; padding: var(--ds-spacing-xs) var(--ds-spacing-m); border-radius: var(--ds-border-radius-s); } .c-quantity-button__input .c-base-input__append, .c-quantity-button__input .c-base-input__prepend__icon__container .c-icon, .c-quantity-button__input .c-base-input__append__icon__container .c-icon { color: #fff; } .c-quantity-button--tone-main .c-base-input, .c-quantity-button--tone-main .c-base-input__container, .c-quantity-button--tone-main .c-base-input__input { background-color: var(--ds-color-interactive-background-button-filled-main-active); } .c-quantity-button--tone-accent .c-base-input, .c-quantity-button--tone-accent .c-base-input__container, .c-quantity-button--tone-accent .c-base-input__input { background-color: var(--ds-color-interactive-background-button-filled-accent-active); } .c-quantity-button--tone-destructive .c-base-input, .c-quantity-button--tone-destructive .c-base-input__container, .c-quantity-button--tone-destructive .c-base-input__input { background-color: var(--ds-color-interactive-background-button-filled-destructive-active); } .c-quantity-button--full-width.c-quantity-button--has-value .c-base-input, .c-quantity-button--full-width.c-quantity-button--has-value .c-base-input__container { width: 100%; } .c-radio-card-group { display: flex; gap: var(--ds-spacing-s); flex-direction: column; color: var(--ds-color-core-content-functional-information); } @media only screen and (min-width: 768px) { .c-radio-card-group--inline { flex-direction: row; } } .c-radio-card-group__error { font-size: .75rem; font-weight: 400; color: var(--ds-color-core-content-functional-negative); margin: var(--ds-spacing-xxs) 0 0; } .c-radio-card { display: flex; flex-direction: column; max-width: 450px; border-radius: var(--ds-border-radius-s); border: 1px solid var(--ds-color-core-border-main-secondary); background-color: var(--ds-color-core-background-main-primary); } .c-radio-card__container { width: auto; display: flex; cursor: pointer; gap: var(--ds-spacing-xs); flex-direction: row; padding: var(--ds-spacing-s); align-items: flex-start; justify-content: space-between; flex-grow: 1; } .c-radio-card__c-radio__container { display: flex; align-items: center; justify-content: center; width: var(--ds-sizing-m); height: var(--ds-sizing-m); padding: var(--ds-spacing-xxxs); } .c-radio-card__c-radio__container .c-radio__label:before { margin-right: 0; } .c-radio-card__content { flex-grow: 1; display: flex; gap: var(--ds-spacing-xxs); flex-direction: column; align-items: flex-start; overflow: hidden; } .c-radio-card__title, .c-radio-card__description, .c-radio-card__additional-text { max-width: 100%; } .c-radio-card__title { font-size: 1rem; font-weight: 700; color: var(--ds-color-core-content-main-primary); } .c-radio-card__description { font-size: .875rem; color: var(--ds-color-core-content-main-tertiary); font-weight: 400; } .c-radio-card__additional-text { font-size: .75rem; font-weight: 700; color: var(--ds-color-core-content-functional-positive); } .c-radio-card__image-container { height: 100%; display: flex; max-width: 4rem; align-items: center; justify-content: center; flex-shrink: 0; } .c-radio-card__image-container img { width: 100%; margin: auto; } .c-radio-card__price { flex-grow: 1; color: var(--ds-color-core-content-specific-promotion); } .c-radio-card__bottom-slot { margin: 0 var(--ds-spacing-s); padding: var(--ds-spacing-s) 0 var(--ds-spacing-s) var(--ds-spacing-l); border-top: 1px solid var(--ds-color-persistent-border-main-primary); } .c-radio-card__error { color: var(--ds-color-core-content-functional-negative); } .c-radio-card--checked { border-color: var(--ds-color-interactive-active-main-pressed); } .c-radio-card:hover:not(.c-radio-card--checked) .c-radio__label:before { border-color: var(--ds-color-interactive-default-border-hover); } .c-radio-card--disabled { cursor: initial; pointer-events: none; font-size: .75rem; border-color: var(--ds-color-interactive-default-background-disabled); } .c-radio-card--disabled img { opacity: .6; filter: grayscale(1); } .c-radio-card--disabled .c-radio-card__title, .c-radio-card--disabled .c-radio-card__description, .c-radio-card--disabled .c-radio-card__additional-text, .c-radio-card--disabled .c-radio-card__price { color: var(--ds-color-interactive-default-content-disabled); } .c-radio-card--invalid { border: 1px solid var(--ds-color-core-border-functional-negative); } .c-radio-card p + p { margin-top: 0; } .c-radio-group { border: 0; display: flex; flex-direction: column; } .c-radio-group__label { font-size: .875rem; font-weight: 400; color: var(--ds-color-interactive-text-input-label-default); transition: var(--c-input-transition); margin-bottom: var(--ds-spacing-xxs); display: block; cursor: text; pointer-events: none; } @-moz-document url-prefix("") { .c-radio-group__label { line-height: initial; } } @media not all and (min-resolution: .001dpcm) { @supports (-webkit-appearance: none) { .c-radio-group__label { line-height: initial; } } } .c-radio-group .c-radio { padding-bottom: var(--ds-spacing-xs); } .c-radio-group__radio-buttons { display: flex; flex-direction: column; } .c-radio-group--inline .c-radio-group__radio-buttons { flex-direction: row; flex-wrap: wrap; } .c-radio-group--inline .c-radio-group__radio-buttons .c-radio { padding: var(--ds-spacing-xxxs) var(--ds-spacing-s) var(--ds-spacing-xxxs) 0; } .c-radio { position: relative; } .c-radio__label { align-items: center; border-radius: var(--ds-border-radius-s); cursor: pointer; display: flex; font-size: 1rem; font-weight: 400; color: var(--ds-color-interactive-text-input-label-default); padding: 0 var(--c-radio-outline-horizontal-padding, .1875rem) 0 0; } .c-radio__label:before { background-color: var(--ds-color-interactive-background-input-active); border-radius: var(--ds-border-radius-round); border: 1px solid var(--ds-color-interactive-border-input-active); content: ""; flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin-right: var(--ds-spacing-xs); transition: all .2s ease-out; } .c-radio__label:hover .c-radio__label:before { border-color: var(--ds-color-interactive-border-input-hover); } .c-radio__label:active .c-radio__label:before { border-color: var(--ds-color-interactive-border-input-pressed); } .c-radio__radio { position: absolute; top: var(--ds-spacing-m); left: var(--ds-sizing-xs); } .c-radio__radio:focus-visible + .c-radio__label { outline: 2px solid var(--ds-color-interactive-border-focus); } .c-radio__radio:focus-visible + .c-radio__label:before { border-color: var(--ds-color-interactive-border-input-hover); } .c-radio__radio:checked + .c-radio__label:before { border-color: var(--ds-color-interactive-active-main-primary); border-width: var(--c-radio-checked-border-width, .5rem); background-color: var(--ds-color-core-background-main-primary); } .c-radio__radio:checked + .c-radio__label:hover:before { border-color: var(--ds-color-interactive-border-input-radio-selected-active); } .c-radio__radio:disabled + .c-radio__label { color: var(--ds-color-interactive-default-content-disabled); cursor: auto; } .c-radio__radio:disabled + .c-radio__label:before { border-color: var(--ds-color-interactive-border-input-disabled); background-color: var(--ds-color-interactive-background-input-disabled); } .c-rating { padding: 0; display: inline-flex; align-items: center; gap: var(--ds-spacing-xxxs); background-color: transparent; border-color: transparent; } .c-rating__stars { display: inline-flex; align-items: center; } .c-rating--disabled { opacity: .6; cursor: initial; pointer-events: none; } .c-rating__icon { color: var(--ds-color-interactive-active-rating-primary); font-size: var(--ds-sizing-s); } .c-rating:focus-visible { outline: 2px solid var(--ds-color-interactive-border-focus); outline-offset: var(--ds-spacing-xxxs); } .c-rating:focus-visible .c-text { color: var(--ds-color-interactive-active-main-primary); } .c-rating--clickable { cursor: pointer; } .c-rating--clickable:active { color: var(--ds-color-interactive-active-main-primary); } .c-segmented-control { gap: 0; display: flex; align-items: stretch; } .c-segmented-control--variation-boxed { border-radius: 4px; padding: var(--ds-spacing-xxs); background-color: var(--ds-color-interactive-background-segmented-control-item-active); } .c-segmented-control > .c-button { border: none !important; border-radius: 0 !important; } .c-segmented-control > c-button button { border: none !important; border-radius: 0 !important; } .c-segmented-control > .c-button:nth-child(1) { border-top-left-radius: var(--ds-border-radius-s) !important; border-bottom-left-radius: var(--ds-border-radius-s) !important; } .c-segmented-control > c-button:nth-child(1) button { border-top-left-radius: var(--ds-border-radius-s) !important; border-bottom-left-radius: var(--ds-border-radius-s) !important; } .c-segmented-control > .c-button:last-child { border-top-right-radius: var(--ds-border-radius-s) !important; border-bottom-right-radius: var(--ds-border-radius-s) !important; } .c-segmented-control > c-button:last-child button { border-top-right-radius: var(--ds-border-radius-s) !important; border-bottom-right-radius: var(--ds-border-radius-s) !important; } .c-segmented-control > .c-button:not(.c-button--selected) { font-weight: 400 !important; background-color: var(--ds-color-interactive-background-segmented-control-item-active) !important; color: var(--ds-color-interactive-text-input-segmented-control-item-active) !important; } .c-segmented-control > .c-button:not(.c-button--selected):hover { border: none !important; background-color: var(--ds-color-interactive-background-segmented-control-item-hover) !important; color: var(--ds-color-interactive-text-input-segmented-control-item-hover) !important; } .c-segmented-control > .c-button:not(.c-button--selected):active { border: none !important; background-color: var(--ds-color-interactive-background-segmented-control-item-pressed) !important; color: var(--ds-color-interactive-text-input-segmented-control-item-pressed) !important; } .c-segmented-control > .c-button:not(.c-button--selected):disabled { border: none !important; background-color: var(--ds-color-interactive-background-segmented-control-item-disabled) !important; color: var(--ds-color-interactive-text-input-segmented-control-item-disabled) !important; } .c-segmented-control > c-button:not(.c-segmented-control__button--selected) button { font-weight: 400 !important; background-color: var(--ds-color-interactive-background-segmented-control-item-active) !important; color: var(--ds-color-interactive-text-input-segmented-control-item-active) !important; } .c-segmented-control > c-button:not(.c-segmented-control__button--selected) button:hover { border: none !important; background-color: var(--ds-color-interactive-background-segmented-control-item-hover) !important; color: var(--ds-color-interactive-text-input-segmented-control-item-hover) !important; } .c-segmented-control > c-button:not(.c-segmented-control__button--selected) button:active { border: none !important; background-color: var(--ds-color-interactive-background-segmented-control-item-pressed) !important; color: var(--ds-color-interactive-text-input-segmented-control-item-pressed) !important; } .c-segmented-control > c-button:not(.c-segmented-control__button--selected) button:disabled { border: none !important; background-color: var(--ds-color-interactive-background-segmented-control-item-disabled) !important; color: var(--ds-color-interactive-text-input-segmented-control-item-disabled) !important; } .c-segmented-control > .c-button.c-button--selected { border: none !important; border-radius: var(--ds-border-radius-s) !important; background-color: var(--ds-color-interactive-background-segmented-control-item-selected-active) !important; color: var(--ds-color-interactive-text-input-segmented-control-item-selected-active) !important; } .c-segmented-control > .c-button.c-button--selected:hover { border: none !important; background-color: var(--ds-color-interactive-background-segmented-control-item-selected-hover) !important; color: var(--ds-color-interactive-text-input-segmented-control-item-selected-hover) !important; } .c-segmented-control > .c-button.c-button--selected:active { border: none !important; background-color: var(--ds-color-interactive-background-segmented-control-item-selected-pressed) !important; color: var(--ds-color-interactive-text-input-segmented-control-item-selected-pressed) !important; } .c-segmented-control > .c-button.c-button--selected:disabled { border: none !important; background-color: var(--ds-color-interactive-background-segmented-control-item-selected-disabled) !important; color: var(--ds-color-interactive-text-input-segmented-control-item-selected-disabled) !important; } .c-segmented-control > c-button.c-segmented-control__button--selected button, .c-segmented-control > c-button button.c-button--variation-filled { border: none !important; border-radius: var(--ds-border-radius-s) !important; background-color: var(--ds-color-interactive-background-segmented-control-item-selected-active) !important; color: var(--ds-color-interactive-text-input-segmented-control-item-selected-active) !important; } .c-segmented-control > c-button.c-segmented-control__button--selected button:hover, .c-segmented-control > c-button button.c-button--variation-filled:hover { border: none !important; background-color: var(--ds-color-interactive-background-segmented-control-item-selected-hover) !important; color: var(--ds-color-interactive-text-input-segmented-control-item-selected-hover) !important; } .c-segmented-control > c-button.c-segmented-control__button--selected button:active, .c-segmented-control > c-button button.c-button--variation-filled:active { border: none !important; background-color: var(--ds-color-interactive-background-segmented-control-item-selected-pressed) !important; color: var(--ds-color-interactive-text-input-segmented-control-item-selected-pressed) !important; } .c-segmented-control > c-button.c-segmented-control__button--selected button:disabled, .c-segmented-control > c-button button.c-button--variation-filled:disabled { border: none !important; background-color: var(--ds-color-interactive-background-segmented-control-item-selected-disabled) !important; color: var(--ds-color-interactive-text-input-segmented-control-item-selected-disabled) !important; } .c-select-button-group { display: flex; gap: var(--ds-spacing-s); } .c-button.c-select-button:not(.c-button.c-select-button--disabled) { font-weight: 400; border: 1px solid var(--ds-color-interactive-border-input-button-select-accent-active); } .c-button.c-select-button:not(.c-button.c-select-button--disabled):hover, .c-button.c-select-button:not(.c-button.c-select-button--disabled):focus { border: 1px solid var(--ds-color-interactive-border-input-button-select-accent-hover); } .c-button.c-select-button:not(.c-button.c-select-button--disabled):active { border: 1px solid var(--ds-color-interactive-border-input-button-select-accent-pressed); } .c-button.c-select-button--disabled { background: linear-gradient( to left bottom, transparent, transparent 49%, var(--ds-color-core-background-reversed-primary) 49%, var(--ds-color-core-background-reversed-primary) 51%, transparent 51%, transparent); } .c-selector { min-width: min(340px, 50vw); position: relative; } .c-selector__container { width: 100%; display: flex; position: relative; flex-direction: row; align-items: center; border-radius: var(--ds-border-radius-s); border: 1px solid var(--ds-color-interactive-border-input-active); background-color: var(--ds-color-interactive-background-input-active); transition: var(--c-input-transition); } .c-selector__container:hover { border: 1px solid var(--ds-color-interactive-border-input-hover); } .c-selector__container:hover { border-color: var(--ds-color-interactive-default-border-hover); outline: 0; } .c-selector__container:focus-within { border-color: var(--ds-color-core-border-main-primary); outline: 1px solid var(--ds-color-core-border-main-primary); } .c-selector__container--expanded { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .c-selector__container--invalid { border: 1px solid var(--ds-color-interactive-border-input-error-active); } .c-selector__container--invalid .c-selector__label { color: var(--ds-color-core-content-functional-negative); } .c-selector__container--disabled .c-selector__label { cursor: default; opacity: .8; } .c-selector__container--disabled .c-selector__button { background-color: transparent; opacity: .6; } .c-selector__label { font-size: .875rem; font-weight: 400; color: var(--ds-color-interactive-text-input-label-default); transition: var(--c-input-transition); margin-bottom: var(--ds-spacing-xxs); display: block; cursor: text; pointer-events: none; } @-moz-document url-prefix("") { .c-selector__label { line-height: initial; } } @media not all and (min-resolution: .001dpcm) { @supports (-webkit-appearance: none) { .c-selector__label { line-height: initial; } } } .c-selector__button { align-items: center; justify-content: space-between; display: flex; min-height: 58px; text-align: left; width: 100%; border: none; outline: none; color: var(--ds-color-persistent-text-primary); padding-top: var(--ds-spacing-s); padding-bottom: var(--ds-spacing-s); font-size: 1rem; border-radius: var(--ds-border-radius-s); font-weight: 400; transition: var(--c-input-transition); line-height: 1.375; min-height: 20px; min-width: min-content; } .c-selector__button ::selection { background: var(--ds-color-persistent-background-functional-main-information); } .c-selector__button .c-icon { font-size: 1.4rem; color: var(--ds-color-interactive-active-main-primary); } .c-selector__button:focus { outline: none; } .c-selector__button--open .c-selector__arrow { transform: translateY(-50%) rotate(180deg); } .c-selector__arrow { position: absolute; right: var(--ds-spacing-s); top: 50%; transform: translateY(-50%); transition: var(--c-input-transition); } .c-selector__error-icon { margin-left: auto; } .c-selector__list { background: var(--ds-color-core-background-main-primary); border-radius: 0 0 var(--ds-border-radius-s) var(--ds-border-radius-s); left: 0; list-style-type: none; margin-left: 0; outline: 2px solid var(--ds-color-core-border-main-primary); position: absolute; right: 0; top: calc(100% + 2px); z-index: 99; } .c-selector__option { margin-bottom: 0; padding: var(--ds-spacing-s); color: var(--ds-color-core-content-main-tertiary); } .c-selector__option:hover, .c-selector__option--selected { background-color: var(--ds-color-core-background-main-secondary); } .c-selector__option:last-of-type { border-bottom-left-radius: var(--ds-border-radius-s); border-bottom-right-radius: var(--ds-border-radius-s); } .c-selector__error, .c-selector__helper { font-size: .75rem; margin-top: var(--ds-spacing-xxs); display: flex; flex-direction: column; } .c-selector__error--hidden, .c-selector__helper--hidden { visibility: hidden; } .c-selector__error { font-weight: 400; color: var(--ds-color-persistent-text-functional-negative); } .c-selector__helper { font-weight: 400; color: var(--ds-color-persistent-text-secondary); } .c-selector__modal-button { max-width: 12rem; } .c-skeleton { background-color: #ebebeb; animation: skeleton-loading 1.5s infinite linear; } @keyframes skeleton-loading { 0% { background-color: #ebebeb; } 50% { background-color: #f5f5f5; } to { background-color: #ebebeb; } } .c-steppers__list { list-style-type: none; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 0; width: 100%; gap: 4px; } .c-steppers__step { display: flex; flex-direction: row; width: 100%; align-items: center; justify-content: center; gap: 4px; } .c-steppers__step:first-child { flex: 1; } .c-steppers__step--disabled .c-text, .c-steppers__step--disabled .c-icon { color: var(--ds-color-interactive-default-content-disabled); } .c-steppers__step--active .c-text, .c-steppers__step--active .c-icon { color: var(--ds-color-core-content-main-primary); } .c-steppers__step--active .c-steppers__separator { background-color: var(--ds-color-core-border-functional-positive); } .c-steppers__step--validated .c-text, .c-steppers__step--validated .c-icon { color: var(--ds-color-core-content-functional-positive); } .c-steppers__step--validated .c-steppers__separator { background-color: var(--ds-color-core-border-functional-positive); } .c-steppers__step--error .c-text, .c-steppers__step--error .c-icon { color: var(--ds-color-core-content-functional-negative); } .c-steppers__step-button { white-space: nowrap; display: flex; gap: 4px; align-items: center; cursor: pointer; background-color: transparent; border-color: transparent; } .c-steppers__separator { width: 100%; height: 1px; background-color: var(--ds-color-core-border-main-primary); } .c-tabs__tab { flex-grow: 1; min-width: 0; flex-basis: 0; cursor: pointer; align-items: center; display: inline-flex; justify-content: center; padding: var(--ds-spacing-s) var(--ds-spacing-m); border: 2px solid var(--ds-color-core-background-main-secondary); background-color: var(--ds-color-core-background-main-secondary); transition: all .3s; } .c-tabs__tab__container { display: flex; gap: var(--ds-spacing-xs); align-items: center; justify-content: center; } .c-tabs__tab__title { font-weight: 400; font-size: .875rem; line-height: 1.25rem; text-align: center; } .c-tabs__tab svg { margin: var(--ds-spacing-xxxs); width: var(--ds-sizing-s); } .c-tabs__tab__icon { font-size: 1.3rem; } .c-tabs__tab--light { border-top: none; border-left: none; border-right: none; background-color: var(--ds-color-core-background-main-primary); border-bottom: 1px solid var(--ds-color-core-border-main-primary); } .c-tabs__tab--light:hover { background-color: none; } .c-tabs__tab:hover { border-color: var(--ds-color-interactive-border-tab-active); background-color: var(--ds-color-persistent-background-alternate); } .c-tabs__tab--selected { background-color: var(--ds-color-persistent-background-alternate); border-color: var(--ds-color-interactive-border-tab-selected-active); color: var(--ds-color-interactive-text-tab-selected-active); } .c-tabs__tab--selected.c-tabs__tab--light { border-bottom: 2px solid var(--ds-color-interactive-border-tab-selected-active); } .c-tabs__tab + .c-tabs__tab { border-left: none; } .c-tabs__tab--disabled { opacity: .6; cursor: initial; pointer-events: none; color: var(--ds-color-interactive-text-tab-disabled); border-color: var(--ds-color-interactive-border-tab-disabled); } .c-tabs { gap: 0; display: flex; flex-direction: row; } .c-tag { width: auto; font-weight: 700; line-height: 20px; position: relative; align-items: center; display: inline-flex; gap: var(--ds-spacing-xxs); justify-content: center; font-family: var(--ds-font-family); border-radius: var(--ds-border-radius-s); border-color: transparent; background: var(--ds-color-persistent-background-main); transition: all .3s; } .c-tag:before { content: ""; top: 0; left: 0; width: 100%; height: 100%; position: absolute; outline: 2px solid transparent; border-radius: var(--ds-border-radius-s); } .c-tag--size-s { min-width: 1.8rem; font-size: .75rem; line-height: 1.125rem; padding: var(--ds-spacing-xxxs) var(--ds-spacing-xxs); } .c-tag--size-s .c-tag__close-icon { padding: 0 var(--ds-spacing-xs); } .c-tag--size-m { min-width: 1.9rem; font-size: .875rem; padding: var(--ds-spacing-xxs) var(--ds-spacing-xs); } .c-tag--size-l { min-width: 2.5rem; font-size: .875rem; padding: var(--ds-spacing-xs) var(--ds-spacing-xs); } .c-tag--size-l .c-tag__icon { font-size: var(--ds-sizing-m); } .c-tag--type-removable { gap: 0; padding-right: 0; } .c-tag--type-removable.c-tag--has-border { border: 1px solid var(--ds-color-core-border-main-secondary); } .c-tag--type-filter { cursor: pointer; color: var(--ds-color-interactive-active-monochrome-primary); } .c-tag--type-filter.c-tag--has-border { border: 1px solid var(--ds-color-core-border-main-secondary); } .c-tag--type-filter.c-tag--has-border:hover, .c-tag--type-filter.c-tag--has-border:focus { border-color: var(--ds-color-interactive-default-border-hover); } .c-tag--type-filter.c-tag--has-border:active { border-color: var(--ds-color-interactive-default-border-pressed); } .c-tag--type-filter.c-tag--selected { color: var(--ds-color-interactive-active-main-primary); } .c-tag--type-filter.c-tag--selected:before { outline: 2px solid var(--ds-color-interactive-active-main-primary); } .c-tag--type-filter.c-tag--selected:hover { color: var(--ds-color-interactive-active-main-hover); } .c-tag--type-filter.c-tag--selected:focus, .c-tag--type-filter.c-tag--selected:active { color: var(--ds-color-interactive-active-main-pressed); } .c-tag--type-filter.c-tag--selected.c-tag--has-border { border: 1px solid var(--ds-color-interactive-active-main-primary); } .c-tag--type-filter.c-tag--selected.c-tag--has-border:hover { border: 1px solid var(--ds-color-interactive-active-main-hover); } .c-tag--type-filter.c-tag--selected.c-tag--has-border:focus, .c-tag--type-filter.c-tag--selected.c-tag--has-border:active { border: 1px solid var(--ds-color-interactive-active-main-pressed); } .c-tag--disabled { opacity: .6; cursor: initial; pointer-events: none; } .c-tag__close-icon { background-color: transparent; border-color: transparent; } .c-tag__close-icon:hover { color: var(--ds-color-interactive-active-main-hover); } .c-tag__close-icon:active { color: var(--ds-color-interactive-active-main-pressed); } .c-tag__icon { font-size: var(--ds-sizing-s); } .c-tag--status-neutral.c-tag--type-informative { color: var(--ds-color-persistent-text-primary); background-color: var(--ds-color-persistent-background-main-primary); } .c-tag--status-neutral.c-tag--type-informative.c-tag--has-border { border: 1px solid var(--ds-color-persistent-border-primary); } .c-tag--status-negative.c-tag--type-informative { color: var(--ds-color-persistent-text-tag-negative); background-color: var(--ds-color-persistent-background-tag-light-negative); } .c-tag--status-negative.c-tag--type-informative.c-tag--has-border { border: 1px solid var(--ds-color-persistent-text-tag-negative); } .c-tag--status-info.c-tag--type-informative { color: var(--ds-color-persistent-text-tag-information); background-color: var(--ds-color-persistent-background-tag-light-information); } .c-tag--status-info.c-tag--type-informative.c-tag--has-border { border: 1px solid var(--ds-color-persistent-border-tag-information); } .c-tag--status-success.c-tag--type-informative { color: var(--ds-color-persistent-text-tag-positive); background-color: var(--ds-color-persistent-background-tag-light-positive); } .c-tag--status-success.c-tag--type-informative.c-tag--has-border { border: 1px solid var(--ds-color-persistent-text-tag-positive); } .c-tag--status-warning.c-tag--type-informative { color: var(--ds-color-persistent-text-tag-warning); background-color: var(--ds-color-persistent-background-tag-light-warning); } .c-tag--status-warning.c-tag--type-informative.c-tag--has-border { border: 1px solid var(--ds-color-persistent-text-tag-warning); } .c-tag--status-error.c-tag--type-informative { color: var(--ds-color-persistent-content-reversed-primary); background-color: var(--ds-color-persistent-background-tag-negative); } .c-tag--status-error.c-tag--type-informative.c-tag--has-border { border: 1px solid var(--ds-color-persistent-border-tag-negative); } .c-tag--status-default.c-tag--type-informative { color: var(--ds-color-persistent-text-primary); background-color: var(--ds-color-persistent-background-main-primary); } .c-tag--status-default.c-tag--type-informative.c-tag--has-border { border: 1px solid var(--ds-color-persistent-border-primary); } .c-text { --c-text-color: var(--ds-color-persistent-content-main-primary); font-weight: 400; color: var(--c-text-color); font-family: var(--ds-font-family); } .c-text--style-h1, .c-text--style-h2, .c-text--style-h3, .c-text--style-h4, .c-text--style-display { font-weight: 700; } .c-text--style-h1 { font-size: 2.25rem; line-height: 44px; } @media only screen and (min-width: 768px) { .c-text--style-h1 { font-size: 2.5rem; line-height: 48px; } } .c-text--style-h2 { font-size: 1.75rem; line-height: 36px; } @media only screen and (min-width: 768px) { .c-text--style-h2 { font-size: 2rem; line-height: 40px; } } .c-text--style-h3 { font-size: 1.5rem; line-height: 32px; } .c-text--style-h4, .c-text--style-subtitle.c-text--size-s { font-size: 1.25rem; line-height: 24px; } .c-text--style-subtitle.c-text--size-m { font-size: 1.5rem; line-height: 32px; } .c-text--style-display.c-text--size-m { font-size: 3rem; line-height: 52px; } .c-text--style-display.c-text--size-l { font-size: 3.5rem; line-height: 64px; } .c-text--style-p.c-text--size-s { font-size: .875rem; line-height: 20px; } .c-text--style-p.c-text--size-m { font-size: 1rem; line-height: 24px; } .c-text--style-caption { font-size: .75rem; line-height: 16px; --c-text-color: var(--ds-color-persistent-content-main-tertiary); } .c-text--spacing-default { letter-spacing: 0; } .c-text--spacing-condensed { letter-spacing: -.4px; } .c-text--bold { font-weight: 700; } .c-text--reversed { --c-text-color: var(--ds-color-persistent-content-reversed-primary); } .c-text--underline { text-decoration: underline; } .c-textarea { display: flex; flex-direction: column; gap: var(--ds-spacing-xxs); } .c-textarea__container { width: 100%; display: flex; position: relative; flex-direction: row; align-items: center; border-radius: var(--ds-border-radius-s); border: 1px solid var(--ds-color-interactive-border-input-active); background-color: var(--ds-color-interactive-background-input-active); transition: var(--c-input-transition); } .c-textarea__container:hover { border: 1px solid var(--ds-color-interactive-border-input-hover); } .c-textarea__input-group { width: 100%; max-width: 100%; display: flex; } .c-textarea__label { font-size: .875rem; font-weight: 400; color: var(--ds-color-interactive-text-input-label-default); transition: var(--c-input-transition); margin-bottom: var(--ds-spacing-xxs); display: block; cursor: text; pointer-events: none; } @-moz-document url-prefix("") { .c-textarea__label { line-height: initial; } } @media not all and (min-resolution: .001dpcm) { @supports (-webkit-appearance: none) { .c-textarea__label { line-height: initial; } } } .c-textarea__label { margin-bottom: 0; } .c-textarea__input { width: 100%; border: none; outline: none; color: var(--ds-color-persistent-text-primary); padding-top: var(--ds-spacing-s); padding-bottom: var(--ds-spacing-s); font-size: 1rem; border-radius: var(--ds-border-radius-s); font-weight: 400; transition: var(--c-input-transition); line-height: 1.375; min-height: 20px; min-width: min-content; } .c-textarea__input ::selection { background: var(--ds-color-persistent-background-functional-main-information); } .c-textarea__input::placeholder { font-size: 1rem; font-weight: 400; color: var(--ds-color-interactive-text-input-placeholder); } .c-textarea__input:-webkit-autofill { box-shadow: 0 0 0 62.5rem var(--ds-color-core-background-main-primary) inset; } .c-textarea__message { font-size: .75rem; margin-top: var(--ds-spacing-xxs); display: flex; flex-direction: column; } .c-textarea__message { margin-top: 0; } .c-textarea__helper-text:empty { display: none; } .c-textarea__helper-text p { font-weight: 400; color: var(--ds-color-persistent-text-secondary); } .c-textarea__helper-text button { cursor: pointer; } .c-textarea__error-text p { font-weight: 400; color: var(--ds-color-persistent-text-functional-negative); } .c-textarea__success-text p { font-weight: 400; color: var(--ds-color-persistent-text-functional-positive); } .c-textarea__modal-button { max-width: 12rem; } .c-textarea svg { fill: var(--ds-color-persistent-text-primary); } .c-textarea--disabled .c-textarea__container, .c-textarea--disabled .c-textarea__input { background-color: transparent; opacity: .6; } .c-textarea--disabled .c-textarea__container:hover { border: 1px solid var(--ds-color-interactive-border-input-hover); } .c-textarea--disabled .c-textarea__label, .c-textarea--disabled .c-textarea__input, .c-textarea--disabled .c-textarea__helper-text p, .c-textarea--disabled .c-textarea__helper-text a, .c-textarea--disabled .c-textarea__helper-text button { cursor: default; opacity: .8; } .c-textarea--readonly .c-textarea__container, .c-textarea--readonly .c-textarea__input { background-color: var(--ds-color-interactive-background-input-readonly); } .c-textarea:focus-within .c-textarea__container { border: 1px solid var(--ds-color-interactive-border-input-focus); outline: 1px solid var(--ds-color-interactive-border-input-focus); } .c-textarea:focus-within .c-textarea__input::placeholder { opacity: 1; } .c-textarea--has-error .c-textarea__container { border: 1px solid var(--ds-color-interactive-border-input-error-active); } .c-textarea--has-error .c-textarea__label { color: var(--ds-color-persistent-text-functional-negative); } .c-textarea--has-success .c-textarea__container { border: 1px solid var(--ds-color-core-border-functional-positive); } .c-textarea { width: 100%; } .c-textarea__container { display: block; } .c-textarea__input { resize: none; border-radius: var(--ds-border-radius-s); min-height: 100px; padding-left: var(--ds-spacing-s); padding-right: var(--ds-spacing-s); } .c-textarea--with-counter .c-textarea__input { margin-bottom: var(--ds-spacing-l); } .c-textarea__counter { position: absolute; right: var(--ds-spacing-s); bottom: var(--ds-spacing-s); padding: var(--ds-spacing-xxs) var(--ds-spacing-xs); font-size: .75rem; font-weight: 700; color: var(--ds-color-interactive-text-input-addon-default); } .c-textarea__counter--maxed { color: var(--ds-color-interactive-text-input-addon-error); background-color: var(--ds-color-interactive-background-input-addon-error); } .c-toaster { width: 100%; display: flex; max-width: 288px; border-radius: var(--ds-border-radius-m); flex-direction: row; z-index: 22000; box-shadow: var(--ds-shadow-fixe); position: relative; overflow: hidden; } .c-toaster__functional-notice { width: 100%; } .c-toaster--autoclose .c-functional-notice { padding-bottom: 48px; } .c-toaster .c-functional-notice__close-button__container { align-self: flex-start !important; } .c-toaster__progress-bar { margin: 0 var(--ds-spacing-s); bottom: var(--ds-spacing-s); height: var(--ds-spacing-xs); position: absolute; background-color: var(--ds-color-persistent-background-progress-bar-reversed-progress); width: 90%; border-radius: var(--ds-border-radius-l); animation-fill-mode: forwards; animation-timing-function: linear; animation-name: c-toaster-progress-bar; animation-duration: var(--animation-duration, 10s); } .c-toaster__progress-bar:after { content: ""; position: absolute; left: 0; right: 0; height: 100%; border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: var(--ds-border-radius-l); border-bottom-left-radius: var(--ds-border-radius-l); background-color: #fff; } @keyframes c-toaster-progress-bar { 0% { width: 90%; } to { width: 0; display: none; } } .c-toasters { width: 100%; margin: 0 auto; max-width: 288px; left: 0; right: 0; position: fixed; bottom: var(--ds-spacing-s); } @media only screen and (min-width: 768px) { .c-toasters { top: 206px; left: initial; margin: initial; bottom: initial; right: var(--ds-spacing-s); } } .c-toasters .c-toaster { bottom: 0; left: 0; opacity: 1; position: absolute; z-index: 21998; transition: top .3s ease-in-out, left .5s ease-in-out, opacity .3s linear; } .c-toasters .c-toaster:nth-child(1) { z-index: 22000; } .c-toasters .c-toaster:nth-child(2) { top: var(--ds-spacing-s); z-index: 21999; } .c-toasters .c-toaster:nth-child(3) { top: var(--ds-spacing-l); } .c-toasters .c-toaster__animation__slide-enter { left: 500px; } .c-toasters .c-toaster__animation__slide-leave-to { opacity: 0; } .c-toggle__container { display: flex; cursor: pointer; flex-direction: row; align-items: center; gap: var(--ds-spacing-xs); border-radius: 16px; } .c-toggle__track { width: 56px; height: 32px; display: flex; flex-shrink: 0; position: relative; border-radius: var(--ds-border-radius-xl); padding: var(--ds-spacing-xxs); background-color: var(--ds-color-interactive-background-input-toggle-active); border: 1px solid var(--ds-color-interactive-background-input-toggle-active); transition: all .3s ease-in-out; } .c-toggle__handle { top: 0; bottom: 0; margin: auto 0; position: absolute; left: var(--ds-spacing-xxs); width: var(--ds-sizing-m); height: var(--ds-sizing-m); border-radius: var(--ds-border-radius-round); background-color: var(--ds-color-interactive-background-input-toggle-handle); } .c-toggle__label { font-size: 1rem; color: var(--ds-color-interactive-text-input-label-default); } .c-toggle__helper-text, .c-toggle__error { font-size: .75rem; margin-top: var(--ds-spacing-xxs); } .c-toggle__helper-text { color: var(--ds-color-persistent-text-functional-information); } .c-toggle__error { color: var(--ds-color-persistent-text-functional-negative); } .c-toggle--size-s .c-toggle__track { width: 48px; height: 16px; } .c-toggle--size-s .c-toggle__handle { left: 0; border: 1px solid var(--ds-color-core-background-main-secondary); } .c-toggle--checked .c-toggle__track { background-color: var(--ds-color-interactive-background-input-checkbox-selected-active); border-color: var(--ds-color-interactive-background-input-checkbox-selected-active); } .c-toggle--checked .c-toggle__handle { left: auto; right: var(--ds-spacing-xxs); } .c-toggle--checked.c-toggle--size-s .c-toggle__handle { left: auto; right: 0; } .c-toggle--disabled { opacity: .6; cursor: initial; pointer-events: none; } .c-toggle:focus-within .c-toggle__container { outline-offset: var(--ds-spacing-xxxs); outline: 2px auto var(--ds-color-interactive-border-focus); } .c-toggle:hover:not(.c-toggle--checked) .c-toggle__track { background-color: var(--ds-color-interactive-background-input-toggle-hover); } .c-toggle:hover.c-toggle--checked .c-toggle__track { background-color: var(--ds-color-interactive-background-input-checkbox-selected-hover); } .c-toggle:active:not(.c-toggle--checked) .c-toggle__track { background-color: var(--ds-color-interactive-background-input-toggle-pressed); } .c-toggle:active.c-toggle--checked .c-toggle__track { background-color: var(--ds-color-interactive-background-input-checkbox-selected-pressed); } :root { --ds-tooltip-box-max-width: 272px; } .c-tooltip { position: relative; } .c-tooltip__button { display: flex; align-items: center; justify-content: center; z-index: 1; cursor: pointer; font-size: 1.5rem; border-radius: var(--ds-border-radius-round); color: var(--ds-color-persistent-content-functional-main-information); background-color: transparent; border-color: transparent; } .c-tooltip__box { z-index: 1; width: 100vw; display: flex; text-align: left; position: absolute; height: fit-content; padding: var(--ds-spacing-s); flex-direction: column; justify-content: flex-start; border-radius: var(--ds-border-radius-s); box-shadow: var(--ds-shadow-up-m); max-width: var(--ds-tooltip-box-max-width); background-color: var(--ds-color-persistent-background-tooltip-default); } .c-tooltip__box__header { display: flex; align-items: center; justify-content: space-between; } .c-tooltip__box__title { flex-grow: 1; font-size: 1rem; font-weight: 700; color: var(--ds-color-persistent-text-tooltip-default); } .c-tooltip__box__description { font-size: var(--ds-sizing-xs); color: var(--ds-color-persistent-text-tooltip-default); } .c-tooltip__box__header + .c-tooltip__box__description { margin-top: var(--ds-spacing-xxs); } .c-tooltip__box__description + .c-tooltip__box__action { margin-top: var(--ds-spacing-s); } .c-tooltip__box__description + .c-tooltip__box__action .c-link, .c-tooltip__box__description + .c-tooltip__box__action .c-button { color: var(--ds-color-persistent-text-tooltip-default); text-decoration: underline; } .c-tooltip__box__close-button { cursor: pointer; font-size: 1.5rem; background-color: transparent; border: none; } .c-tooltip__box__close-button .c-icon { color: var(--ds-color-persistent-text-tooltip-default); } .c-tooltip__box:after { content: " "; position: absolute; transform: rotate(45deg); width: var(--ds-sizing-s); height: var(--ds-sizing-s); border-top-left-radius: var(--ds-border-radius-s); background-color: var(--ds-color-persistent-background-tooltip-arrow-default); border-top: 1px solid var(--ds-color-persistent-background-tooltip-arrow-default); border-left: 1px solid var(--ds-color-persistent-background-tooltip-arrow-default); } .c-tooltip__box--position-top-left, .c-tooltip__box--position-top-right { top: calc(-1 * var(--ds-spacing-s)); transform: translateY(-100%); } .c-tooltip__box--position-top-left:after, .c-tooltip__box--position-top-right:after { bottom: calc(-1 * var(--ds-spacing-xs)); transform: rotate(-135deg); } .c-tooltip__box--position-bottom-left, .c-tooltip__box--position-bottom-right { bottom: calc(-1 * var(--ds-spacing-s)); transform: translateY(100%); } .c-tooltip__box--position-bottom-left:after, .c-tooltip__box--position-bottom-right:after { top: calc(-1 * var(--ds-spacing-xs)); transform: rotate(45deg); } .c-tooltip__box--position-top-left, .c-tooltip__box--position-bottom-left { right: calc(50% - var(--ds-spacing-l) - var(--ds-sizing-s) / 2); } .c-tooltip__box--position-top-left:after, .c-tooltip__box--position-bottom-left:after { right: var(--ds-spacing-l); } .c-tooltip__box--position-top-right, .c-tooltip__box--position-bottom-right { left: calc(50% - var(--ds-spacing-l) - var(--ds-sizing-s) / 2); } .c-tooltip__box--position-top-right:after, .c-tooltip__box--position-bottom-right:after { left: var(--ds-spacing-l); } .c-tooltip__box--position-left, .c-tooltip__box--position-right { top: 50%; } .c-tooltip__box--position-left:after, .c-tooltip__box--position-right:after { top: 0; bottom: 0; margin: auto 0; } .c-tooltip__box--position-left { left: calc(-1 * var(--ds-spacing-s)); transform: translate(-100%, -50%); } .c-tooltip__box--position-left:after { right: calc(-1 * var(--ds-spacing-xs)); transform: rotate(135deg); } .c-tooltip__box--position-right { right: calc(-1 * var(--ds-spacing-s)); transform: translate(100%, -50%); } .c-tooltip__box--position-right:after { left: calc(-1 * var(--ds-spacing-xs)); transform: rotate(-45deg); } .c-tooltip__box--position-top, .c-tooltip__box--position-bottom { left: 50%; } .c-tooltip__box--position-top:after, .c-tooltip__box--position-bottom:after { left: 0; right: 0; margin: 0 auto; bottom: calc(-1 * var(--ds-spacing-xs)); transform: rotate(-135deg); } .c-tooltip__box--position-top { top: calc(-1 * var(--ds-spacing-s)); transform: translate(-50%, -100%); } .c-tooltip__box--position-top:after { bottom: calc(-1 * var(--ds-spacing-xs)); transform: rotate(-135deg); } .c-tooltip__box--position-bottom { bottom: calc(-1 * var(--ds-spacing-s)); transform: translate(-50%, 100%); } .c-tooltip__box--position-bottom:after { top: calc(-1 * var(--ds-spacing-xs)); transform: rotate(45deg); } .c-visual-button { height: auto; width: 100%; flex-grow: 1; flex-basis: 0; display: flex; cursor: pointer; text-align: center; align-items: center; gap: var(--ds-spacing-xxs); text-decoration: none; flex-direction: column; justify-content: center; box-shadow: var(--ds-shadow-action); border: 1px solid transparent; border-radius: var(--ds-border-radius-m); background-color: var(--ds-color-interactive-background-visual-button-active); transition: all .3s; } .c-visual-button .c-visual-button__text-block { display: flex; flex-direction: column; gap: var(--ds-spacing-xxs); } .c-visual-button__icon, .c-visual-button__image-container { margin-bottom: 12px; } .c-visual-button--inline { min-height: none; display: flex; flex-direction: row; justify-content: flex-start; column-gap: 1rem; } .c-visual-button--inline .c-visual-button__text-block { flex-direction: column; text-align: left; } .c-visual-button--inline .c-visual-button__icon, .c-visual-button--inline .c-visual-button__image-container { margin-bottom: 0; } @media only screen and (max-width: 768px) { .c-visual-button--inline-on-mobile { min-height: none; display: flex; flex-direction: row; justify-content: flex-start; column-gap: 1rem; } .c-visual-button--inline-on-mobile .c-visual-button__text-block { flex-direction: column; text-align: left; } .c-visual-button--inline-on-mobile .c-visual-button__icon, .c-visual-button--inline-on-mobile .c-visual-button__image-container { margin-bottom: 0; } } .c-visual-button--size-s { padding: var(--ds-spacing-s); } .c-visual-button--size-s .c-visual-button__image-container { max-width: 40px; } .c-visual-button--size-s .c-visual-button__title { font-size: 1rem; } .c-visual-button--size-s .c-visual-button__body { font-size: .875rem; line-height: 20px; } .c-visual-button--size-s .c-visual-button__body p { line-height: 20px; } .c-visual-button--size-m { padding: var(--ds-spacing-m); } .c-visual-button--size-m .c-visual-button__image-container { max-width: 64px; } .c-visual-button--size-m .c-visual-button__title { font-size: 1.25rem; } .c-visual-button--size-m .c-visual-button__body { font-size: 1rem; } .c-visual-button--size-m .c-visual-button__body p { line-height: 24px; } .c-visual-button__icon .c-icon { font-size: 2rem; color: var(--ds-color-persistent-icon-primary); } .c-visual-button__image-container img, .c-visual-button__image-container svg { width: 100%; margin-bottom: 0; display: block; } .c-visual-button__title { font-weight: 700; line-height: 24px; color: var(--ds-color-interactive-text-visual-button-title-active); } .c-visual-button__body { font-weight: 400; color: var(--ds-color-interactive-text-visual-button-body-active); } .c-visual-button:hover { box-shadow: var(--ds-shadow-hover); } .c-visual-button:active { box-shadow: var(--ds-shadow-press); } .c-visual-button:disabled { opacity: .6; cursor: initial; pointer-events: none; border-color: var(--ds-color-interactive-background-visual-button-disabled); } .c-visual-button:focus-visible { border-color: var(--ds-color-interactive-border-focus); } @font-face { font-family: Ubuntu; font-style: normal; font-weight: 300; font-display: swap; src: url("./media/ubuntu-light.ttf") format("truetype"); } @font-face { font-family: Ubuntu; font-style: normal; font-weight: 400; font-display: swap; src: url("./media/ubuntu-regular.ttf") format("truetype"); } @font-face { font-family: Ubuntu; font-style: normal; font-weight: 500; font-display: swap; src: url("./media/ubuntu-medium.ttf") format("truetype"); } @font-face { font-family: Ubuntu; font-style: normal; font-weight: 700; font-display: swap; src: url("./media/ubuntu-bold.ttf") format("truetype"); } @font-face { font-family: Ubuntu; font-style: italic; font-weight: 300; font-display: swap; src: url("./media/ubuntu-light-italic.ttf") format("truetype"); } @font-face { font-family: Ubuntu; font-style: italic; font-weight: 400; font-display: swap; src: url("./media/ubuntu-regular-italic.ttf") format("truetype"); } @font-face { font-family: Ubuntu; font-style: italic; font-weight: 500; font-display: swap; src: url("./media/ubuntu-medium-italic.ttf") format("truetype"); } @font-face { font-family: Ubuntu; font-style: italic; font-weight: 700; font-display: swap; src: url("./media/ubuntu-bold-italic.ttf") format("truetype"); } /* src/styles.css */ :root { font-family: var(--ds-font-family); font-synthesis: none; text-rendering: optimizelegibility; line-height: 1.5; tab-size: 4; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } *, ::before, ::after { box-sizing: border-box; border-color: currentcolor; border-style: solid; border-width: 0; } * { font-family: Ubuntu, serif; } html, body { min-height: 100%; height: auto; margin: 0; overflow-y: auto; } body { padding-top: 0; margin: 0; } h1, h2, p, pre { margin: 0; font-size: inherit; font-weight: inherit; } a { font-weight: 500; color: var(--ds-color-interactive-active-main-primary); text-decoration: none; } a:hover { color: var(--ds-color-interactive-active-main-hover); } code { padding: 0.25rem; font-family: "Courier New", Courier, monospace; background-color: var(--ds-color-core-background-main-secondary); } main[role=main] { min-height: calc(100vh - 64px); padding-top: 0; } html { scroll-behavior: smooth; } /* angular:styles/global:styles */ /*# sourceMappingURL=styles.css.map */