@sproutsocial/seeds-react-theme 3.6.2 → 4.1.1

package/dist/theme-dark.css

@@ -0,0 +1,480 @@
+/**
+ * Seeds Design System - CSS Custom Properties (dark theme)
+ * @see https://github.com/sproutsocial/seeds
+ */
+
+[data-theme="dark"], .dark, .lights-out {
+  --color-app-bg-base: #162020;
+  --color-container-bg-base: #273333;
+  --color-container-bg-success: #006b40;
+  --color-container-bg-warning: #944c0c;
+  --color-container-bg-error: #992222;
+  --color-container-bg-info: #0c3f89;
+  --color-container-bg-opportunity: #483a9c;
+  --color-container-bg-danger: #992222;
+  --color-container-bg-decorative-green: #006b40;
+  --color-container-bg-decorative-blue: #0c3f89;
+  --color-container-bg-decorative-purple: #483a9c;
+  --color-container-bg-decorative-yellow: #944c0c;
+  --color-container-bg-decorative-orange: #962c0b;
+  --color-container-bg-decorative-red: #992222;
+  --color-container-bg-decorative-neutral: #162020;
+  --color-container-bg-decorative-magenta: #6c2277;
+  --color-container-bg-decorative-pink: #931847;
+  --color-container-bg-decorative-aqua: #035e73;
+  --color-container-bg-decorative-teal: #026661;
+  --color-container-bg-selected: #FFFFFF;
+  --color-container-bg-positive_sentiment: #3876e3;
+  --color-container-bg-negative_sentiment: #f76054;
+  --color-container-bg-neutral_sentiment: #c8cccc;
+  --color-container-bg-ai_generated: var(--color-container-bg-ai-generated, #f3f4f4);
+  --color-container-border-base: #040404;
+  --color-container-border-success: #59cb59;
+  --color-container-border-warning: #ffbc00;
+  --color-container-border-error: #ed4c42;
+  --color-container-border-danger: #ed4c42;
+  --color-container-border-info: #2b68d3;
+  --color-container-border-opportunity: #9180f4;
+  --color-container-border-decorative-green: #59cb59;
+  --color-container-border-decorative-blue: #2b68d3;
+  --color-container-border-decorative-purple: #9180f4;
+  --color-container-border-decorative-yellow: #ffbc00;
+  --color-container-border-decorative-orange: #f57d33;
+  --color-container-border-decorative-red: #ed4c42;
+  --color-container-border-decorative-neutral: #6e797a;
+  --color-container-border-decorative-magenta: #c44eb9;
+  --color-container-border-decorative-pink: #e0447c;
+  --color-container-border-decorative-aqua: #17b8ce;
+  --color-container-border-decorative-teal: #08c4b2;
+  --color-container-border-selected: #FFFFFF;
+  --color-container-border-ai_generated: #6f5ed3;
+  --color-gradient-ai: radial-gradient(circle at bottom left, #205bc3 0%, #9747ff 61%, #f282f5 100%);
+  --color-gradient-ai-subtle: radial-gradient(circle at bottom left, color-mix(in srgb, #205bc3, transparent 80%) 0%, color-mix(in srgb, #9747ff, transparent 80%) 61%, color-mix(in srgb, #f282f5, transparent 80%) 100%);
+  --color-button-primary-bg-base: #679eff;
+  --color-button-primary-bg-hover: #a1c2f8;
+  --color-button-primary-bg-active: #c7dbf9;
+  --color-button-primary-border-base: transparent;
+  --color-button-primary-text-base: #273333;
+  --color-button-primary-text-hover: #162020;
+  --color-button-secondary-bg-base: transparent;
+  --color-button-secondary-bg-hover: #f3f4f4;
+  --color-button-secondary-bg-active: #FFFFFF;
+  --color-button-secondary-border-base: #FFFFFF;
+  --color-button-secondary-text-base: #FFFFFF;
+  --color-button-secondary-text-hover: #364141;
+  --color-button-pill-bg-base: transparent;
+  --color-button-pill-bg-hover: #162020;
+  --color-button-pill-bg-active: #273333;
+  --color-button-pill-border-base: transparent;
+  --color-button-pill-border-hover: #FFFFFF;
+  --color-button-pill-text-base: #f3f4f4;
+  --color-button-pill-text-hover: #FFFFFF;
+  --color-button-destructive-bg-base: #ff7f6e;
+  --color-button-destructive-bg-hover: #ff9c8f;
+  --color-button-destructive-bg-active: #ffb8b1;
+  --color-button-destructive-border-base: transparent;
+  --color-button-destructive-text-base: #273333;
+  --color-button-destructive-text-hover: #162020;
+  --color-button-placeholder-bg-base: transparent;
+  --color-button-placeholder-bg-hover: #040404;
+  --color-button-placeholder-bg-active: #040404;
+  --color-button-placeholder-border-base: #929a9b;
+  --color-button-placeholder-text-base: #679eff;
+  --color-button-placeholder-text-hover: #a1c2f8;
+  --color-button-overlay-bg-base: color-mix(in srgb, #FFFFFF, transparent 40%);
+  --color-button-overlay-bg-hover: color-mix(in srgb, #FFFFFF, transparent 25%);
+  --color-button-overlay-text-base: #162020;
+  --color-button-unstyled-bg-base: transparent;
+  --color-button-unstyled-border-base: transparent;
+  --color-button-unstyled-text-base: #c8cccc;
+  --color-button-unstyled-text-hover: #dee1e1;
+  --color-button-ai-primary-bg-base: var(--color-gradient-ai);
+  --color-button-ai-primary-border-base: transparent;
+  --color-button-ai-primary-text-base: #FFFFFF;
+  --color-button-ai-primary-text-hover: #FFFFFF;
+  --color-button-ai-secondary-bg-base: var(--color-gradient-ai-subtle);
+  --color-button-ai-secondary-border-base: transparent;
+  --color-button-ai-secondary-text-base: #364141;
+  --color-button-ai-secondary-text-hover: #364141;
+  --color-button-ai-outline-bg-base: transparent;
+  --color-button-ai-outline-border-base: var(--color-gradient-ai);
+  --color-button-ai-outline-text-base: #f3f4f4;
+  --color-button-ai-outline-text-hover: #f3f4f4;
+  --color-link-base: #679eff;
+  --color-link-hover: #a1c2f8;
+  --color-text-headline: #FFFFFF;
+  --color-text-subtext: #dee1e1;
+  --color-text-body: #f3f4f4;
+  --color-text-inverse: #273333;
+  --color-text-error: #ffd5d2;
+  --color-text-bg-highlight: #944c0c;
+  --color-text-bg-selection: #1150aa;
+  --color-text-decorative-green: #d7f4d7;
+  --color-text-decorative-blue: #deebfe;
+  --color-text-decorative-purple: #eaeaf9;
+  --color-text-decorative-yellow: #fdefcd;
+  --color-text-decorative-orange: #fcdccc;
+  --color-text-decorative-red: #ffd5d2;
+  --color-text-decorative-neutral: #f3f4f4;
+  --color-text-decorative-magenta: #f9e3fc;
+  --color-text-decorative-pink: #fcdbeb;
+  --color-text-decorative-aqua: #c5f9f9;
+  --color-text-decorative-teal: #cdf7ef;
+  --color-text-ai_generated: #273333;
+  --color-icon-base: #f3f4f4;
+  --color-icon-inverse: #273333;
+  --color-icon-success: #d7f4d7;
+  --color-icon-warning: #fdefcd;
+  --color-icon-error: #ffd5d2;
+  --color-icon-danger: #ffd5d2;
+  --color-icon-info: #deebfe;
+  --color-icon-opportunity: #eaeaf9;
+  --color-icon-applied: #679eff;
+  --color-icon-positive_sentiment: #2b68d3;
+  --color-icon-negative_sentiment: #ed4c42;
+  --color-icon-neutral_sentiment: #929a9b;
+  --color-form-bg-base: #273333;
+  --color-form-bg-selected: #FFFFFF;
+  --color-form-border-base: #929a9b;
+  --color-form-border-error: #ed4c42;
+  --color-form-border-warning: #ffbc00;
+  --color-form-border-selected: #FFFFFF;
+  --color-form-placeholder-base: #929a9b;
+  --color-listItem-bg-base: transparent;
+  --color-listItem-bg-hover: #364141;
+  --color-listItem-bg-selected: #FFFFFF;
+  --color-listItem-bg-active: #FFFFFF;
+  --color-listItem-border-base: #6e797a;
+  --color-menuItem-bg-active: #515e5f;
+  --color-nav-navItem-text-base: #FFFFFF;
+  --color-nav-navItem-icon-base: #FFFFFF;
+  --color-nav-navItem-indicator-notification-base: #e0447c;
+  --color-nav-navItem-indicator-userStatus-online: #59cb59;
+  --color-nav-navItem-indicator-userStatus-offline: #ed4c42;
+  --color-nav-navItem-indicator-userStatus-unavailable: #364141;
+  --color-nav-navItem-bg-base: transparent;
+  --color-nav-navItem-bg-hover: #364141;
+  --color-nav-navItem-bg-active: #040404;
+  --color-nav-navItem-bg-selected: #515e5f;
+  --color-nav-navItem-border-hover: #515e5f;
+  --color-nav-navItem-border-active: #515e5f;
+  --color-nav-navItem-border-selected: #515e5f;
+  --color-overlay-bg-base: color-mix(in srgb, #162020, transparent 28%);
+  --color-overlay-bg-inverse: color-mix(in srgb, #040404, transparent 30%);
+  --color-overlay-text-base: #FFFFFF;
+  --color-overlay-icon-base: #FFFFFF;
+  --color-elevation-base: #040404;
+  --color-illustration-fill: #679eff;
+  --color-illustration-stroke: #f3f4f4;
+  --color-network-twitter: #000000;
+  --color-network-twitter_like: #e0245e;
+  --color-network-facebook: #1877F2;
+  --color-network-facebook_audience_network: #58409B;
+  --color-network-linkedin: #0A66C2;
+  --color-network-instagram: #e4405f;
+  --color-network-feedly: #2bb24c;
+  --color-network-analytics: #ef6c00;
+  --color-network-google_analytics_property: #ef6c00;
+  --color-network-youtube: #ff0000;
+  --color-network-messenger: #000000;
+  --color-network-snapchat: #fffc00;
+  --color-network-pinterest: #E60023;
+  --color-network-tumblr: #35465c;
+  --color-network-reddit: #ff4500;
+  --color-network-tripadvisor: #00B087;
+  --color-network-glassdoor: #0CAA41;
+  --color-network-google_ads: #FBBC04;
+  --color-network-google_my_business: #4285F4;
+  --color-network-google_business_messages: #1A73EA;
+  --color-network-google_play_store: #01875F;
+  --color-network-apple_app_store: #17C8F5;
+  --color-network-salesforce: #1589EE;
+  --color-network-zendesk: #03363D;
+  --color-network-hubspot: #FF7A59;
+  --color-network-microsoft_dynamics: #002050;
+  --color-network-yelp: #FF1A1A;
+  --color-network-whatsapp: #59CE72;
+  --color-network-tiktok: #000000;
+  --color-network-threads: #000000;
+  --color-network-trustpilot: #04DA8D;
+  --color-network-x: #000000;
+  --color-network-x_like: #e0245e;
+  --color-network-bluesky: #1185FE;
+  --color-network-bazaarvoice: #002E6E;
+  --color-dataviz-map-1: #24e0c5;
+  --color-dataviz-map-2: #a193f2;
+  --color-dataviz-map-3: #ff76ae;
+  --color-dataviz-map-4: #ffcd1c;
+  --color-dataviz-map-5: #679eff;
+  --color-dataviz-map-6: #f282f5;
+  --color-dataviz-map-7: #75dd66;
+  --color-dataviz-map-8: #ff9c5d;
+  --color-dataviz-map-9: #db3e3e;
+  --color-dataviz-map-10: #0b968f;
+  --color-dataviz-map-11: #6f5ed3;
+  --color-dataviz-map-12: #ce3665;
+  --color-dataviz-map-13: #ba7506;
+  --color-dataviz-map-14: #205bc3;
+  --color-dataviz-map-15: #ac44a8;
+  --color-dataviz-map-16: #0ca750;
+  --color-dataviz-map-17: #ed7024;
+  --color-dataviz-map-18: #ff7f6e;
+  --color-dataviz-map-19: #c2f2bd;
+  --color-dataviz-map-20: #ffe99a;
+  --color-dataviz-list-0: #24e0c5;
+  --color-dataviz-list-1: #a193f2;
+  --color-dataviz-list-2: #ff76ae;
+  --color-dataviz-list-3: #ffcd1c;
+  --color-dataviz-list-4: #679eff;
+  --color-dataviz-list-5: #f282f5;
+  --color-dataviz-list-6: #75dd66;
+  --color-dataviz-list-7: #ff9c5d;
+  --color-dataviz-list-8: #db3e3e;
+  --color-dataviz-list-9: #0b968f;
+  --color-dataviz-list-10: #6f5ed3;
+  --color-dataviz-list-11: #ce3665;
+  --color-dataviz-list-12: #ba7506;
+  --color-dataviz-list-13: #205bc3;
+  --color-dataviz-list-14: #ac44a8;
+  --color-dataviz-list-15: #0ca750;
+  --color-dataviz-list-16: #ed7024;
+  --color-dataviz-list-17: #ff7f6e;
+  --color-dataviz-list-18: #c2f2bd;
+  --color-dataviz-list-19: #ffe99a;
+  --color-dataviz-placeholder: #364141;
+  --color-userStatus-online: #59cb59;
+  --color-userStatus-offline: #f76054;
+  --color-userStatus-unavailable: #929a9b;
+  --color-neutral-0: #FFFFFF;
+  --color-neutral-100: #f3f4f4;
+  --color-neutral-200: #dee1e1;
+  --color-neutral-300: #c8cccc;
+  --color-neutral-400: #b0b6b7;
+  --color-neutral-500: #929a9b;
+  --color-neutral-600: #6e797a;
+  --color-neutral-700: #515e5f;
+  --color-neutral-800: #364141;
+  --color-neutral-900: #273333;
+  --color-neutral-950: #1D2525;
+  --color-neutral-1000: #162020;
+  --color-neutral-1100: #040404;
+  --color-green-0: #ebf9eb;
+  --color-green-100: #d7f4d7;
+  --color-green-200: #c2f2bd;
+  --color-green-300: #98e58e;
+  --color-green-400: #75dd66;
+  --color-green-500: #59cb59;
+  --color-green-600: #2bb656;
+  --color-green-700: #0ca750;
+  --color-green-800: #008b46;
+  --color-green-900: #006b40;
+  --color-green-1000: #08422f;
+  --color-green-1100: #002b20;
+  --color-red-0: #ffeae9;
+  --color-red-100: #ffd5d2;
+  --color-red-200: #ffb8b1;
+  --color-red-300: #ff9c8f;
+  --color-red-400: #ff7f6e;
+  --color-red-500: #f76054;
+  --color-red-600: #ed4c42;
+  --color-red-700: #db3e3e;
+  --color-red-800: #c63434;
+  --color-red-900: #992222;
+  --color-red-1000: #6d1313;
+  --color-red-1100: #2b1111;
+  --color-blue-0: #e9f4ff;
+  --color-blue-100: #deebfe;
+  --color-blue-200: #c7dbf9;
+  --color-blue-300: #a1c2f8;
+  --color-blue-400: #679eff;
+  --color-blue-500: #3876e3;
+  --color-blue-600: #2b68d3;
+  --color-blue-700: #205bc3;
+  --color-blue-800: #1150aa;
+  --color-blue-900: #0c3f89;
+  --color-blue-1000: #0a2960;
+  --color-blue-1100: #001738;
+  --color-teal-0: #e5f9f5;
+  --color-teal-50: #CCF1EA;
+  --color-teal-100: #cdf7ef;
+  --color-teal-200: #b3f2e6;
+  --color-teal-300: #7dead5;
+  --color-teal-400: #24e0c5;
+  --color-teal-500: #08c4b2;
+  --color-teal-600: #00a99c;
+  --color-teal-700: #0b968f;
+  --color-teal-800: #067c7c;
+  --color-teal-900: #026661;
+  --color-teal-1000: #083f3f;
+  --color-teal-1100: #002528;
+  --color-aqua-0: #d9fcfb;
+  --color-aqua-100: #c5f9f9;
+  --color-aqua-200: #a5f2f2;
+  --color-aqua-300: #76e5e2;
+  --color-aqua-400: #33d6e2;
+  --color-aqua-500: #17b8ce;
+  --color-aqua-600: #0797ae;
+  --color-aqua-700: #0b8599;
+  --color-aqua-800: #0f6e84;
+  --color-aqua-900: #035e73;
+  --color-aqua-1000: #083d4f;
+  --color-aqua-1100: #002838;
+  --color-purple-0: #f2f2f9;
+  --color-purple-100: #eaeaf9;
+  --color-purple-200: #d8d7f9;
+  --color-purple-300: #c1c1f7;
+  --color-purple-400: #a193f2;
+  --color-purple-500: #9180f4;
+  --color-purple-600: #816fea;
+  --color-purple-700: #6f5ed3;
+  --color-purple-800: #5e4eba;
+  --color-purple-900: #483a9c;
+  --color-purple-1000: #2d246b;
+  --color-purple-1100: #1d1d38;
+  --color-magenta-0: #fef0ff;
+  --color-magenta-100: #f9e3fc;
+  --color-magenta-200: #f4c4f7;
+  --color-magenta-300: #edadf2;
+  --color-magenta-350: #EC9AF1;
+  --color-magenta-400: #f282f5;
+  --color-magenta-500: #db61db;
+  --color-magenta-600: #c44eb9;
+  --color-magenta-700: #ac44a8;
+  --color-magenta-800: #8f3896;
+  --color-magenta-900: #6c2277;
+  --color-magenta-1000: #451551;
+  --color-magenta-1100: #29192d;
+  --color-yellow-0: #fff8e2;
+  --color-yellow-100: #fdefcd;
+  --color-yellow-200: #ffe99a;
+  --color-yellow-300: #ffe16e;
+  --color-yellow-400: #ffd943;
+  --color-yellow-500: #ffcd1c;
+  --color-yellow-600: #ffbc00;
+  --color-yellow-700: #dd9903;
+  --color-yellow-800: #ba7506;
+  --color-yellow-900: #944c0c;
+  --color-yellow-1000: #542a00;
+  --color-yellow-1100: #2d1a05;
+  --color-pink-0: #ffe9f3;
+  --color-pink-100: #fcdbeb;
+  --color-pink-200: #ffb5d5;
+  --color-pink-300: #ff95c1;
+  --color-pink-400: #ff76ae;
+  --color-pink-500: #ef588b;
+  --color-pink-600: #e0447c;
+  --color-pink-700: #ce3665;
+  --color-pink-800: #b22f5b;
+  --color-pink-900: #931847;
+  --color-pink-1000: #561231;
+  --color-pink-1100: #2b1721;
+  --color-orange-0: #ffede3;
+  --color-orange-100: #fcdccc;
+  --color-orange-200: #ffc6a4;
+  --color-orange-300: #ffb180;
+  --color-orange-400: #ff9c5d;
+  --color-orange-500: #fc8943;
+  --color-orange-600: #f57d33;
+  --color-orange-700: #ed7024;
+  --color-orange-800: #ce5511;
+  --color-orange-900: #962c0b;
+  --color-orange-1000: #601700;
+  --color-orange-1100: #2d130e;
+  --color-DATAVIZ_COLORS_LIST-0: #24e0c5;
+  --color-DATAVIZ_COLORS_LIST-1: #a193f2;
+  --color-DATAVIZ_COLORS_LIST-2: #ff76ae;
+  --color-DATAVIZ_COLORS_LIST-3: #ffcd1c;
+  --color-DATAVIZ_COLORS_LIST-4: #679eff;
+  --color-DATAVIZ_COLORS_LIST-5: #f282f5;
+  --color-DATAVIZ_COLORS_LIST-6: #75dd66;
+  --color-DATAVIZ_COLORS_LIST-7: #ff9c5d;
+  --color-DATAVIZ_COLORS_LIST-8: #db3e3e;
+  --color-DATAVIZ_COLORS_LIST-9: #0b968f;
+  --color-DATAVIZ_COLORS_LIST-10: #6f5ed3;
+  --color-DATAVIZ_COLORS_LIST-11: #ce3665;
+  --color-DATAVIZ_COLORS_LIST-12: #ba7506;
+  --color-DATAVIZ_COLORS_LIST-13: #205bc3;
+  --color-DATAVIZ_COLORS_LIST-14: #ac44a8;
+  --color-DATAVIZ_COLORS_LIST-15: #0ca750;
+  --color-DATAVIZ_COLORS_LIST-16: #ed7024;
+  --color-DATAVIZ_COLORS_LIST-17: #ff7f6e;
+  --color-DATAVIZ_COLORS_LIST-18: #c2f2bd;
+  --color-DATAVIZ_COLORS_LIST-19: #ffe99a;
+  --color-DATAVIZ_COLORS_MAP-1: #24e0c5;
+  --color-DATAVIZ_COLORS_MAP-2: #a193f2;
+  --color-DATAVIZ_COLORS_MAP-3: #ff76ae;
+  --color-DATAVIZ_COLORS_MAP-4: #ffcd1c;
+  --color-DATAVIZ_COLORS_MAP-5: #679eff;
+  --color-DATAVIZ_COLORS_MAP-6: #f282f5;
+  --color-DATAVIZ_COLORS_MAP-7: #75dd66;
+  --color-DATAVIZ_COLORS_MAP-8: #ff9c5d;
+  --color-DATAVIZ_COLORS_MAP-9: #db3e3e;
+  --color-DATAVIZ_COLORS_MAP-10: #0b968f;
+  --color-DATAVIZ_COLORS_MAP-11: #6f5ed3;
+  --color-DATAVIZ_COLORS_MAP-12: #ce3665;
+  --color-DATAVIZ_COLORS_MAP-13: #ba7506;
+  --color-DATAVIZ_COLORS_MAP-14: #205bc3;
+  --color-DATAVIZ_COLORS_MAP-15: #ac44a8;
+  --color-DATAVIZ_COLORS_MAP-16: #0ca750;
+  --color-DATAVIZ_COLORS_MAP-17: #ed7024;
+  --color-DATAVIZ_COLORS_MAP-18: #ff7f6e;
+  --color-DATAVIZ_COLORS_MAP-19: #c2f2bd;
+  --color-DATAVIZ_COLORS_MAP-20: #ffe99a;
+  --color-PLACEHOLDER: #364141;
+  --space-0: 0px;
+  --space-100: 2px;
+  --space-200: 4px;
+  --space-300: 8px;
+  --space-350: 12px;
+  --space-400: 16px;
+  --space-450: 24px;
+  --space-500: 32px;
+  --space-600: 40px;
+  --font-size-100: 11px;
+  --line-height-100: 18.666666666666668px;
+  --font-size-200: 13px;
+  --line-height-200: 21.333333333333332px;
+  --font-size-300: 16px;
+  --line-height-300: 24px;
+  --font-size-400: 18px;
+  --line-height-400: 26.666666666666668px;
+  --font-size-500: 21px;
+  --line-height-500: 29.333333333333332px;
+  --font-size-600: 24px;
+  --line-height-600: 32px;
+  --font-size-700: 32px;
+  --line-height-700: 40px;
+  --font-size-800: 43px;
+  --line-height-800: 50.666666666666664px;
+  --font-size-900: 57px;
+  --line-height-900: 64px;
+  --font-size-1000: 76px;
+  --line-height-1000: 80px;
+  --font-size-1100: 101px;
+  --line-height-1100: 101.33333333333333px;
+  --font-size-1200: 135px;
+  --line-height-1200: 125.33333333333333px;
+  --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  --font-weight-normal: 400;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  --radius-400: 4px;
+  --radius-500: 6px;
+  --radius-600: 8px;
+  --radius-800: 12px;
+  --radius-900: 24px;
+  --radius-1000: 999999px;
+  --radius-inner: 6px;
+  --radius-outer: 8px;
+  --radius-pill: 999999px;
+  --shadow-low: 0px 2px 4px #040404FF;
+  --shadow-medium: 0px 8px 16px #040404FF;
+  --shadow-high: 0px 16px 32px #040404FF;
+  --ease-ease_in: cubic-bezier(.4, 0, .7, .2);
+  --ease-ease_out: cubic-bezier(0, 0, .2, 1);
+  --ease-ease_inout: cubic-bezier(.4, 0, .2, 1);
+  --duration-fast: .15s;
+  --duration-medium: .3s;
+  --duration-slow: .6s;
+}