.DesignTokenThemeSelectors-theme--darkMode { --lightningcss-light: ; --lightningcss-dark: initial; color-scheme: dark; } @media (prefers-color-scheme: dark) { .DesignTokenThemeSelectors-theme--systemDarkMode { --lightningcss-light: ; --lightningcss-dark: initial; color-scheme: dark; } } .DesignTokenThemeOverrideRegionInternal { --lightningcss-light: initial; --lightningcss-dark: ; color-scheme: light; } :root, :root .DesignTokenThemeOverrideRegionInternal--light { --color-deprecated-white: #fff; --color-deprecated-white-rgb: 255, 255, 255; --color-deprecated-lightGray1: #f5f3f3; --color-deprecated-lightGray1-rgb: 245, 243, 243; --color-deprecated-lightGray2: #edeae9; --color-deprecated-lightGray2-rgb: 237, 234, 233; --color-deprecated-lightGray3: #cfcbcb; --color-deprecated-lightGray3-rgb: 207, 203, 203; --color-deprecated-mediumGray: #afabac; --color-deprecated-mediumGray-rgb: 175, 171, 172; --color-deprecated-darkGray1: #6d6e6f; --color-deprecated-darkGray1-rgb: 109, 110, 111; --color-deprecated-darkGray2: #1e1f21; --color-deprecated-darkGray2-rgb: 30, 31, 33; --color-deprecated-green: #58a182; --color-deprecated-green-rgb: 88, 161, 130; --color-deprecated-brightGreen: #8dc2ac; --color-deprecated-brightGreen-rgb: 141, 194, 172; --color-deprecated-teal: #3f6ac4; --color-deprecated-teal-rgb: 63, 106, 196; --color-deprecated-brightTeal: #3f6ac4; --color-deprecated-brightTeal-rgb: 63, 106, 196; --color-deprecated-purple: #6e66b1; --color-deprecated-purple-rgb: 110, 102, 177; --color-deprecated-darkGold: #e8b668; --color-deprecated-darkGold-rgb: 232, 182, 104; --color-deprecated-brightGold: #f1bd6c; --color-deprecated-brightGold-rgb: 241, 189, 108; --color-deprecated-coral: #d84f67; --color-deprecated-coral-rgb: 216, 79, 103; } @media print { :root { --color-deprecated-white: #fff; --color-deprecated-white-rgb: 255, 255, 255; --color-deprecated-lightGray1: #f5f3f3; --color-deprecated-lightGray1-rgb: 245, 243, 243; --color-deprecated-lightGray2: #edeae9; --color-deprecated-lightGray2-rgb: 237, 234, 233; --color-deprecated-lightGray3: #cfcbcb; --color-deprecated-lightGray3-rgb: 207, 203, 203; --color-deprecated-mediumGray: #afabac; --color-deprecated-mediumGray-rgb: 175, 171, 172; --color-deprecated-darkGray1: #6d6e6f; --color-deprecated-darkGray1-rgb: 109, 110, 111; --color-deprecated-darkGray2: #1e1f21; --color-deprecated-darkGray2-rgb: 30, 31, 33; --color-deprecated-green: #58a182; --color-deprecated-green-rgb: 88, 161, 130; --color-deprecated-brightGreen: #8dc2ac; --color-deprecated-brightGreen-rgb: 141, 194, 172; --color-deprecated-teal: #3f6ac4; --color-deprecated-teal-rgb: 63, 106, 196; --color-deprecated-brightTeal: #3f6ac4; --color-deprecated-brightTeal-rgb: 63, 106, 196; --color-deprecated-purple: #6e66b1; --color-deprecated-purple-rgb: 110, 102, 177; --color-deprecated-darkGold: #e8b668; --color-deprecated-darkGold-rgb: 232, 182, 104; --color-deprecated-brightGold: #f1bd6c; --color-deprecated-brightGold-rgb: 241, 189, 108; --color-deprecated-coral: #d84f67; --color-deprecated-coral-rgb: 216, 79, 103; } } :root .DesignTokenThemeSelectors-theme--darkMode { --color-deprecated-white: #f5f4f3; --color-deprecated-white-rgb: 245, 244, 243; --color-deprecated-lightGray1: #f5f4f3; --color-deprecated-lightGray1-rgb: 245, 244, 243; --color-deprecated-lightGray2: #f5f4f3; --color-deprecated-lightGray2-rgb: 245, 244, 243; --color-deprecated-lightGray3: #a2a0a2; --color-deprecated-lightGray3-rgb: 162, 160, 162; --color-deprecated-mediumGray: #a2a0a2; --color-deprecated-mediumGray-rgb: 162, 160, 162; --color-deprecated-darkGray1: #6a696a; --color-deprecated-darkGray1-rgb: 106, 105, 106; --color-deprecated-darkGray2: #2a2b2d; --color-deprecated-darkGray2-rgb: 42, 43, 45; --color-deprecated-green: #5da283; --color-deprecated-green-rgb: 93, 162, 131; --color-deprecated-brightGreen: #5da283; --color-deprecated-brightGreen-rgb: 93, 162, 131; --color-deprecated-teal: #4573d2; --color-deprecated-teal-rgb: 69, 115, 210; --color-deprecated-brightTeal: #5688e5; --color-deprecated-brightTeal-rgb: 86, 136, 229; --color-deprecated-purple: #726ab9; --color-deprecated-purple-rgb: 114, 106, 185; --color-deprecated-darkGold: #b89054; --color-deprecated-darkGold-rgb: 184, 144, 84; --color-deprecated-brightGold: #f6c682; --color-deprecated-brightGold-rgb: 246, 198, 130; --color-deprecated-coral: #d1395a; --color-deprecated-coral-rgb: 209, 57, 90; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode { --color-deprecated-white: #f5f4f3; --color-deprecated-white-rgb: 245, 244, 243; --color-deprecated-lightGray1: #f5f4f3; --color-deprecated-lightGray1-rgb: 245, 244, 243; --color-deprecated-lightGray2: #f5f4f3; --color-deprecated-lightGray2-rgb: 245, 244, 243; --color-deprecated-lightGray3: #a2a0a2; --color-deprecated-lightGray3-rgb: 162, 160, 162; --color-deprecated-mediumGray: #a2a0a2; --color-deprecated-mediumGray-rgb: 162, 160, 162; --color-deprecated-darkGray1: #6a696a; --color-deprecated-darkGray1-rgb: 106, 105, 106; --color-deprecated-darkGray2: #2a2b2d; --color-deprecated-darkGray2-rgb: 42, 43, 45; --color-deprecated-green: #5da283; --color-deprecated-green-rgb: 93, 162, 131; --color-deprecated-brightGreen: #5da283; --color-deprecated-brightGreen-rgb: 93, 162, 131; --color-deprecated-teal: #4573d2; --color-deprecated-teal-rgb: 69, 115, 210; --color-deprecated-brightTeal: #5688e5; --color-deprecated-brightTeal-rgb: 86, 136, 229; --color-deprecated-purple: #726ab9; --color-deprecated-purple-rgb: 114, 106, 185; --color-deprecated-darkGold: #b89054; --color-deprecated-darkGold-rgb: 184, 144, 84; --color-deprecated-brightGold: #f6c682; --color-deprecated-brightGold-rgb: 246, 198, 130; --color-deprecated-coral: #d1395a; --color-deprecated-coral-rgb: 209, 57, 90; } } :root .DesignTokenThemeSelectors-theme--maroon .DesignTokenThemeOverrideRegionInternal--light { --color-deprecated-white: #fff; --color-deprecated-white-rgb: 255, 255, 255; --color-deprecated-lightGray1: #f5f3f3; --color-deprecated-lightGray1-rgb: 245, 243, 243; --color-deprecated-lightGray2: #edeae9; --color-deprecated-lightGray2-rgb: 237, 234, 233; --color-deprecated-lightGray3: #cfcbcb; --color-deprecated-lightGray3-rgb: 207, 203, 203; --color-deprecated-mediumGray: #afabac; --color-deprecated-mediumGray-rgb: 175, 171, 172; --color-deprecated-darkGray1: #6d6e6f; --color-deprecated-darkGray1-rgb: 109, 110, 111; --color-deprecated-darkGray2: #1e1f21; --color-deprecated-darkGray2-rgb: 30, 31, 33; --color-deprecated-green: #58a182; --color-deprecated-green-rgb: 88, 161, 130; --color-deprecated-brightGreen: #8dc2ac; --color-deprecated-brightGreen-rgb: 141, 194, 172; --color-deprecated-teal: #3f6ac4; --color-deprecated-teal-rgb: 63, 106, 196; --color-deprecated-brightTeal: #3f6ac4; --color-deprecated-brightTeal-rgb: 63, 106, 196; --color-deprecated-purple: #6e66b1; --color-deprecated-purple-rgb: 110, 102, 177; --color-deprecated-darkGold: #e8b668; --color-deprecated-darkGold-rgb: 232, 182, 104; --color-deprecated-brightGold: #f1bd6c; --color-deprecated-brightGold-rgb: 241, 189, 108; --color-deprecated-coral: #d84f67; --color-deprecated-coral-rgb: 216, 79, 103; } :root .DesignTokenThemeSelectors-theme--darkMode.DesignTokenThemeSelectors-theme--maroon { --color-deprecated-white: #f8f4f6; --color-deprecated-white-rgb: 248, 244, 246; --color-deprecated-lightGray1: #f8f4f6; --color-deprecated-lightGray1-rgb: 248, 244, 246; --color-deprecated-lightGray2: #f8f4f6; --color-deprecated-lightGray2-rgb: 248, 244, 246; --color-deprecated-lightGray3: #bb97a9; --color-deprecated-lightGray3-rgb: 187, 151, 169; --color-deprecated-mediumGray: #bb97a9; --color-deprecated-mediumGray-rgb: 187, 151, 169; --color-deprecated-darkGray1: #8f5977; --color-deprecated-darkGray1-rgb: 143, 89, 119; --color-deprecated-darkGray2: #461d36; --color-deprecated-darkGray2-rgb: 70, 29, 54; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode.DesignTokenThemeSelectors-theme--maroon { --color-deprecated-white: #f8f4f6; --color-deprecated-white-rgb: 248, 244, 246; --color-deprecated-lightGray1: #f8f4f6; --color-deprecated-lightGray1-rgb: 248, 244, 246; --color-deprecated-lightGray2: #f8f4f6; --color-deprecated-lightGray2-rgb: 248, 244, 246; --color-deprecated-lightGray3: #bb97a9; --color-deprecated-lightGray3-rgb: 187, 151, 169; --color-deprecated-mediumGray: #bb97a9; --color-deprecated-mediumGray-rgb: 187, 151, 169; --color-deprecated-darkGray1: #8f5977; --color-deprecated-darkGray1-rgb: 143, 89, 119; --color-deprecated-darkGray2: #461d36; --color-deprecated-darkGray2-rgb: 70, 29, 54; } } :root, :root .DesignTokenThemeOverrideRegionInternal--light { --color-customization-background: #c7c4c4; --color-customization-background-hover: #bfbcbc; --color-customization-background-active: #b9b6b6; --color-customization-background-weak: #e8e5e4; --color-customization-background-weak-deprecated-opaque: #e8e5e4; --color-customization-background-weak-deprecated: #e8e5e4; --color-customization-background-weak-hover: #e1dedd; --color-customization-background-weak-hover-deprecated: #e1dedd; --color-customization-foreground: #1e1f21; --color-customization-foreground-weak: #1e1f21; --color-customization-foreground-weak-deprecated: #1e1f21; --color-customization-red-background: #f06a6a; --color-customization-red-background-rgb: 240, 106, 106; --color-customization-red-background-hover: #eb6868; --color-customization-red-foreground: #1e1f21; --color-customization-red-foreground-hover: #1e1f21; --color-customization-red-text-deprecated: #1e1f21; --color-customization-orange-background: #ec8d71; --color-customization-orange-background-rgb: 236, 141, 113; --color-customization-orange-background-hover: #e3886d; --color-customization-orange-foreground: #1e1f21; --color-customization-orange-foreground-hover: #1e1f21; --color-customization-orange-text-deprecated: #1e1f21; --color-customization-yellow-orange-background: #f1bd6c; --color-customization-yellow-orange-background-rgb: 241, 189, 108; --color-customization-yellow-orange-background-hover: #e7b568; --color-customization-yellow-orange-foreground: #1e1f21; --color-customization-yellow-orange-foreground-hover: #1e1f21; --color-customization-yellow-orange-text-deprecated: #1e1f21; --color-customization-yellow-background: #f8df72; --color-customization-yellow-background-rgb: 248, 223, 114; --color-customization-yellow-background-hover: #f2da6f; --color-customization-yellow-foreground: #1e1f21; --color-customization-yellow-foreground-hover: #1e1f21; --color-customization-yellow-text-deprecated: #1e1f21; --color-customization-yellow-green-background: #b3df97; --color-customization-yellow-green-background-rgb: 179, 223, 151; --color-customization-yellow-green-background-hover: #a8d688; --color-customization-yellow-green-foreground: #1e1f21; --color-customization-yellow-green-foreground-hover: #1e1f21; --color-customization-yellow-green-text-deprecated: #1e1f21; --color-customization-green-background: #83c9a9; --color-customization-green-background-rgb: 131, 201, 169; --color-customization-green-background-hover: #7ec1a3; --color-customization-green-foreground: #1e1f21; --color-customization-green-foreground-hover: #1e1f21; --color-customization-green-text-deprecated: #1e1f21; --color-customization-blue-green-background: #4ecbc4; --color-customization-blue-green-background-rgb: 78, 203, 196; --color-customization-blue-green-background-hover: #4abeb7; --color-customization-blue-green-foreground: #1e1f21; --color-customization-blue-green-foreground-hover: #1e1f21; --color-customization-blue-green-text-deprecated: #1e1f21; --color-customization-aqua-background: #9ee7e3; --color-customization-aqua-background-rgb: 158, 231, 227; --color-customization-aqua-background-hover: #99dfdb; --color-customization-aqua-foreground: #1e1f21; --color-customization-aqua-foreground-hover: #1e1f21; --color-customization-aqua-text-deprecated: #1e1f21; --color-customization-blue-background: #4573d2; --color-customization-blue-background-rgb: 69, 115, 210; --color-customization-blue-background-hover: #526dc6; --color-customization-blue-foreground: #fff; --color-customization-blue-foreground-hover: #fff; --color-customization-blue-text-deprecated: #1e1f21; --color-customization-indigo-background: #a69ff3; --color-customization-indigo-background-rgb: 166, 159, 243; --color-customization-indigo-background-hover: #9f98ed; --color-customization-indigo-foreground: #1e1f21; --color-customization-indigo-foreground-hover: #1e1f21; --color-customization-indigo-text-deprecated: #1e1f21; --color-customization-purple-background: #cd95ea; --color-customization-purple-background-rgb: 205, 149, 234; --color-customization-purple-background-hover: #c48fdf; --color-customization-purple-foreground: #1e1f21; --color-customization-purple-foreground-hover: #1e1f21; --color-customization-purple-text-deprecated: #1e1f21; --color-customization-magenta-background: #f9aaef; --color-customization-magenta-background-rgb: 249, 170, 239; --color-customization-magenta-background-hover: #f1a5e8; --color-customization-magenta-foreground: #1e1f21; --color-customization-magenta-foreground-hover: #1e1f21; --color-customization-magenta-text-deprecated: #1e1f21; --color-customization-hot-pink-background: #f26fb2; --color-customization-hot-pink-background-rgb: 242, 111, 178; --color-customization-hot-pink-background-hover: #e66aa9; --color-customization-hot-pink-foreground: #1e1f21; --color-customization-hot-pink-foreground-hover: #1e1f21; --color-customization-hot-pink-text-deprecated: #1e1f21; --color-customization-pink-background: #fc979a; --color-customization-pink-background-rgb: 252, 151, 154; --color-customization-pink-background-hover: #f39294; --color-customization-pink-foreground: #1e1f21; --color-customization-pink-foreground-hover: #1e1f21; --color-customization-pink-text-deprecated: #1e1f21; --color-customization-cool-gray-background: #6d6e6f; --color-customization-cool-gray-background-rgb: 109, 110, 111; --color-customization-cool-gray-background-hover: #656667; --color-customization-cool-gray-foreground: #fff; --color-customization-cool-gray-foreground-hover: #fff; --color-customization-cool-gray-text-deprecated: #1e1f21; } @media print { :root { --color-customization-background: #c7c4c4; --color-customization-background-hover: #bfbcbc; --color-customization-background-active: #b9b6b6; --color-customization-background-weak: #e8e5e4; --color-customization-background-weak-deprecated-opaque: #e8e5e4; --color-customization-background-weak-deprecated: #e8e5e4; --color-customization-background-weak-hover: #e1dedd; --color-customization-background-weak-hover-deprecated: #e1dedd; --color-customization-foreground: #1e1f21; --color-customization-foreground-weak: #1e1f21; --color-customization-foreground-weak-deprecated: #1e1f21; --color-customization-red-background: #f06a6a; --color-customization-red-background-rgb: 240, 106, 106; --color-customization-red-background-hover: #eb6868; --color-customization-red-foreground: #1e1f21; --color-customization-red-foreground-hover: #1e1f21; --color-customization-red-text-deprecated: #1e1f21; --color-customization-orange-background: #ec8d71; --color-customization-orange-background-rgb: 236, 141, 113; --color-customization-orange-background-hover: #e3886d; --color-customization-orange-foreground: #1e1f21; --color-customization-orange-foreground-hover: #1e1f21; --color-customization-orange-text-deprecated: #1e1f21; --color-customization-yellow-orange-background: #f1bd6c; --color-customization-yellow-orange-background-rgb: 241, 189, 108; --color-customization-yellow-orange-background-hover: #e7b568; --color-customization-yellow-orange-foreground: #1e1f21; --color-customization-yellow-orange-foreground-hover: #1e1f21; --color-customization-yellow-orange-text-deprecated: #1e1f21; --color-customization-yellow-background: #f8df72; --color-customization-yellow-background-rgb: 248, 223, 114; --color-customization-yellow-background-hover: #f2da6f; --color-customization-yellow-foreground: #1e1f21; --color-customization-yellow-foreground-hover: #1e1f21; --color-customization-yellow-text-deprecated: #1e1f21; --color-customization-yellow-green-background: #b3df97; --color-customization-yellow-green-background-rgb: 179, 223, 151; --color-customization-yellow-green-background-hover: #a8d688; --color-customization-yellow-green-foreground: #1e1f21; --color-customization-yellow-green-foreground-hover: #1e1f21; --color-customization-yellow-green-text-deprecated: #1e1f21; --color-customization-green-background: #83c9a9; --color-customization-green-background-rgb: 131, 201, 169; --color-customization-green-background-hover: #7ec1a3; --color-customization-green-foreground: #1e1f21; --color-customization-green-foreground-hover: #1e1f21; --color-customization-green-text-deprecated: #1e1f21; --color-customization-blue-green-background: #4ecbc4; --color-customization-blue-green-background-rgb: 78, 203, 196; --color-customization-blue-green-background-hover: #4abeb7; --color-customization-blue-green-foreground: #1e1f21; --color-customization-blue-green-foreground-hover: #1e1f21; --color-customization-blue-green-text-deprecated: #1e1f21; --color-customization-aqua-background: #9ee7e3; --color-customization-aqua-background-rgb: 158, 231, 227; --color-customization-aqua-background-hover: #99dfdb; --color-customization-aqua-foreground: #1e1f21; --color-customization-aqua-foreground-hover: #1e1f21; --color-customization-aqua-text-deprecated: #1e1f21; --color-customization-blue-background: #4573d2; --color-customization-blue-background-rgb: 69, 115, 210; --color-customization-blue-background-hover: #526dc6; --color-customization-blue-foreground: #fff; --color-customization-blue-foreground-hover: #fff; --color-customization-blue-text-deprecated: #1e1f21; --color-customization-indigo-background: #a69ff3; --color-customization-indigo-background-rgb: 166, 159, 243; --color-customization-indigo-background-hover: #9f98ed; --color-customization-indigo-foreground: #1e1f21; --color-customization-indigo-foreground-hover: #1e1f21; --color-customization-indigo-text-deprecated: #1e1f21; --color-customization-purple-background: #cd95ea; --color-customization-purple-background-rgb: 205, 149, 234; --color-customization-purple-background-hover: #c48fdf; --color-customization-purple-foreground: #1e1f21; --color-customization-purple-foreground-hover: #1e1f21; --color-customization-purple-text-deprecated: #1e1f21; --color-customization-magenta-background: #f9aaef; --color-customization-magenta-background-rgb: 249, 170, 239; --color-customization-magenta-background-hover: #f1a5e8; --color-customization-magenta-foreground: #1e1f21; --color-customization-magenta-foreground-hover: #1e1f21; --color-customization-magenta-text-deprecated: #1e1f21; --color-customization-hot-pink-background: #f26fb2; --color-customization-hot-pink-background-rgb: 242, 111, 178; --color-customization-hot-pink-background-hover: #e66aa9; --color-customization-hot-pink-foreground: #1e1f21; --color-customization-hot-pink-foreground-hover: #1e1f21; --color-customization-hot-pink-text-deprecated: #1e1f21; --color-customization-pink-background: #fc979a; --color-customization-pink-background-rgb: 252, 151, 154; --color-customization-pink-background-hover: #f39294; --color-customization-pink-foreground: #1e1f21; --color-customization-pink-foreground-hover: #1e1f21; --color-customization-pink-text-deprecated: #1e1f21; --color-customization-cool-gray-background: #6d6e6f; --color-customization-cool-gray-background-rgb: 109, 110, 111; --color-customization-cool-gray-background-hover: #656667; --color-customization-cool-gray-foreground: #fff; --color-customization-cool-gray-foreground-hover: #fff; --color-customization-cool-gray-text-deprecated: #1e1f21; } } :root .DesignTokenThemeSelectors-theme--darkMode { --color-customization-background: #c7c4c4; --color-customization-background-hover: #bfbcbc; --color-customization-background-active: #b9b6b6; --color-customization-background-weak: #424244; --color-customization-background-weak-deprecated-opaque: #424244; --color-customization-background-weak-deprecated: #424244; --color-customization-background-weak-hover: #464648; --color-customization-background-weak-hover-deprecated: #464648; --color-customization-foreground: #1e1f21; --color-customization-foreground-weak: #fff; --color-customization-foreground-weak-deprecated: #fff; --color-customization-red-background: #f06a6a; --color-customization-red-background-rgb: 240, 106, 106; --color-customization-red-background-hover: #eb6868; --color-customization-red-foreground: #1e1f21; --color-customization-red-foreground-hover: #1e1f21; --color-customization-red-text-deprecated: #f5f4f3; --color-customization-orange-background: #ec8d71; --color-customization-orange-background-rgb: 236, 141, 113; --color-customization-orange-background-hover: #e3886d; --color-customization-orange-foreground: #1e1f21; --color-customization-orange-foreground-hover: #1e1f21; --color-customization-orange-text-deprecated: #f5f4f3; --color-customization-yellow-orange-background: #f1bd6c; --color-customization-yellow-orange-background-rgb: 241, 189, 108; --color-customization-yellow-orange-background-hover: #e7b568; --color-customization-yellow-orange-foreground: #1e1f21; --color-customization-yellow-orange-foreground-hover: #1e1f21; --color-customization-yellow-orange-text-deprecated: #f5f4f3; --color-customization-yellow-background: #f8df72; --color-customization-yellow-background-rgb: 248, 223, 114; --color-customization-yellow-background-hover: #f2da6f; --color-customization-yellow-foreground: #1e1f21; --color-customization-yellow-foreground-hover: #1e1f21; --color-customization-yellow-text-deprecated: #f5f4f3; --color-customization-yellow-green-background: #b3df97; --color-customization-yellow-green-background-rgb: 179, 223, 151; --color-customization-yellow-green-background-hover: #a8d688; --color-customization-yellow-green-foreground: #1e1f21; --color-customization-yellow-green-foreground-hover: #1e1f21; --color-customization-yellow-green-text-deprecated: #f5f4f3; --color-customization-green-background: #83c9a9; --color-customization-green-background-rgb: 131, 201, 169; --color-customization-green-background-hover: #7ec1a3; --color-customization-green-foreground: #1e1f21; --color-customization-green-foreground-hover: #1e1f21; --color-customization-green-text-deprecated: #f5f4f3; --color-customization-blue-green-background: #4ecbc4; --color-customization-blue-green-background-rgb: 78, 203, 196; --color-customization-blue-green-background-hover: #4abeb7; --color-customization-blue-green-foreground: #1e1f21; --color-customization-blue-green-foreground-hover: #1e1f21; --color-customization-blue-green-text-deprecated: #f5f4f3; --color-customization-aqua-background: #9ee7e3; --color-customization-aqua-background-rgb: 158, 231, 227; --color-customization-aqua-background-hover: #99dfdb; --color-customization-aqua-foreground: #1e1f21; --color-customization-aqua-foreground-hover: #1e1f21; --color-customization-aqua-text-deprecated: #f5f4f3; --color-customization-blue-background: #4573d2; --color-customization-blue-background-rgb: 69, 115, 210; --color-customization-blue-background-hover: #526dc6; --color-customization-blue-foreground: #fff; --color-customization-blue-foreground-hover: #fff; --color-customization-blue-text-deprecated: #f5f4f3; --color-customization-indigo-background: #a69ff3; --color-customization-indigo-background-rgb: 166, 159, 243; --color-customization-indigo-background-hover: #9f98ed; --color-customization-indigo-foreground: #1e1f21; --color-customization-indigo-foreground-hover: #1e1f21; --color-customization-indigo-text-deprecated: #f5f4f3; --color-customization-purple-background: #cd95ea; --color-customization-purple-background-rgb: 205, 149, 234; --color-customization-purple-background-hover: #c48fdf; --color-customization-purple-foreground: #1e1f21; --color-customization-purple-foreground-hover: #1e1f21; --color-customization-purple-text-deprecated: #f5f4f3; --color-customization-magenta-background: #f9aaef; --color-customization-magenta-background-rgb: 249, 170, 239; --color-customization-magenta-background-hover: #f1a5e8; --color-customization-magenta-foreground: #1e1f21; --color-customization-magenta-foreground-hover: #1e1f21; --color-customization-magenta-text-deprecated: #f5f4f3; --color-customization-hot-pink-background: #f26fb2; --color-customization-hot-pink-background-rgb: 242, 111, 178; --color-customization-hot-pink-background-hover: #e66aa9; --color-customization-hot-pink-foreground: #1e1f21; --color-customization-hot-pink-foreground-hover: #1e1f21; --color-customization-hot-pink-text-deprecated: #f5f4f3; --color-customization-pink-background: #fc979a; --color-customization-pink-background-rgb: 252, 151, 154; --color-customization-pink-background-hover: #f39294; --color-customization-pink-foreground: #1e1f21; --color-customization-pink-foreground-hover: #1e1f21; --color-customization-pink-text-deprecated: #f5f4f3; --color-customization-cool-gray-background: #6d6e6f; --color-customization-cool-gray-background-rgb: 109, 110, 111; --color-customization-cool-gray-background-hover: #656667; --color-customization-cool-gray-foreground: #fff; --color-customization-cool-gray-foreground-hover: #fff; --color-customization-cool-gray-text-deprecated: #f5f4f3; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode { --color-customization-background: #c7c4c4; --color-customization-background-hover: #bfbcbc; --color-customization-background-active: #b9b6b6; --color-customization-background-weak: #424244; --color-customization-background-weak-deprecated-opaque: #424244; --color-customization-background-weak-deprecated: #424244; --color-customization-background-weak-hover: #464648; --color-customization-background-weak-hover-deprecated: #464648; --color-customization-foreground: #1e1f21; --color-customization-foreground-weak: #fff; --color-customization-foreground-weak-deprecated: #fff; --color-customization-red-background: #f06a6a; --color-customization-red-background-rgb: 240, 106, 106; --color-customization-red-background-hover: #eb6868; --color-customization-red-foreground: #1e1f21; --color-customization-red-foreground-hover: #1e1f21; --color-customization-red-text-deprecated: #f5f4f3; --color-customization-orange-background: #ec8d71; --color-customization-orange-background-rgb: 236, 141, 113; --color-customization-orange-background-hover: #e3886d; --color-customization-orange-foreground: #1e1f21; --color-customization-orange-foreground-hover: #1e1f21; --color-customization-orange-text-deprecated: #f5f4f3; --color-customization-yellow-orange-background: #f1bd6c; --color-customization-yellow-orange-background-rgb: 241, 189, 108; --color-customization-yellow-orange-background-hover: #e7b568; --color-customization-yellow-orange-foreground: #1e1f21; --color-customization-yellow-orange-foreground-hover: #1e1f21; --color-customization-yellow-orange-text-deprecated: #f5f4f3; --color-customization-yellow-background: #f8df72; --color-customization-yellow-background-rgb: 248, 223, 114; --color-customization-yellow-background-hover: #f2da6f; --color-customization-yellow-foreground: #1e1f21; --color-customization-yellow-foreground-hover: #1e1f21; --color-customization-yellow-text-deprecated: #f5f4f3; --color-customization-yellow-green-background: #b3df97; --color-customization-yellow-green-background-rgb: 179, 223, 151; --color-customization-yellow-green-background-hover: #a8d688; --color-customization-yellow-green-foreground: #1e1f21; --color-customization-yellow-green-foreground-hover: #1e1f21; --color-customization-yellow-green-text-deprecated: #f5f4f3; --color-customization-green-background: #83c9a9; --color-customization-green-background-rgb: 131, 201, 169; --color-customization-green-background-hover: #7ec1a3; --color-customization-green-foreground: #1e1f21; --color-customization-green-foreground-hover: #1e1f21; --color-customization-green-text-deprecated: #f5f4f3; --color-customization-blue-green-background: #4ecbc4; --color-customization-blue-green-background-rgb: 78, 203, 196; --color-customization-blue-green-background-hover: #4abeb7; --color-customization-blue-green-foreground: #1e1f21; --color-customization-blue-green-foreground-hover: #1e1f21; --color-customization-blue-green-text-deprecated: #f5f4f3; --color-customization-aqua-background: #9ee7e3; --color-customization-aqua-background-rgb: 158, 231, 227; --color-customization-aqua-background-hover: #99dfdb; --color-customization-aqua-foreground: #1e1f21; --color-customization-aqua-foreground-hover: #1e1f21; --color-customization-aqua-text-deprecated: #f5f4f3; --color-customization-blue-background: #4573d2; --color-customization-blue-background-rgb: 69, 115, 210; --color-customization-blue-background-hover: #526dc6; --color-customization-blue-foreground: #fff; --color-customization-blue-foreground-hover: #fff; --color-customization-blue-text-deprecated: #f5f4f3; --color-customization-indigo-background: #a69ff3; --color-customization-indigo-background-rgb: 166, 159, 243; --color-customization-indigo-background-hover: #9f98ed; --color-customization-indigo-foreground: #1e1f21; --color-customization-indigo-foreground-hover: #1e1f21; --color-customization-indigo-text-deprecated: #f5f4f3; --color-customization-purple-background: #cd95ea; --color-customization-purple-background-rgb: 205, 149, 234; --color-customization-purple-background-hover: #c48fdf; --color-customization-purple-foreground: #1e1f21; --color-customization-purple-foreground-hover: #1e1f21; --color-customization-purple-text-deprecated: #f5f4f3; --color-customization-magenta-background: #f9aaef; --color-customization-magenta-background-rgb: 249, 170, 239; --color-customization-magenta-background-hover: #f1a5e8; --color-customization-magenta-foreground: #1e1f21; --color-customization-magenta-foreground-hover: #1e1f21; --color-customization-magenta-text-deprecated: #f5f4f3; --color-customization-hot-pink-background: #f26fb2; --color-customization-hot-pink-background-rgb: 242, 111, 178; --color-customization-hot-pink-background-hover: #e66aa9; --color-customization-hot-pink-foreground: #1e1f21; --color-customization-hot-pink-foreground-hover: #1e1f21; --color-customization-hot-pink-text-deprecated: #f5f4f3; --color-customization-pink-background: #fc979a; --color-customization-pink-background-rgb: 252, 151, 154; --color-customization-pink-background-hover: #f39294; --color-customization-pink-foreground: #1e1f21; --color-customization-pink-foreground-hover: #1e1f21; --color-customization-pink-text-deprecated: #f5f4f3; --color-customization-cool-gray-background: #6d6e6f; --color-customization-cool-gray-background-rgb: 109, 110, 111; --color-customization-cool-gray-background-hover: #656667; --color-customization-cool-gray-foreground: #fff; --color-customization-cool-gray-foreground-hover: #fff; --color-customization-cool-gray-text-deprecated: #f5f4f3; } } :root .DesignTokenThemeSelectors-theme--deuteranopiaMode, :root .DesignTokenThemeSelectors-theme--deuteranopiaMode .DesignTokenThemeOverrideRegionInternal--light, :root .DesignTokenThemeSelectors-theme--darkMode.DesignTokenThemeSelectors-theme--deuteranopiaMode { --color-customization-red-background: #e8384f; --color-customization-red-background-rgb: 232, 56, 79; --color-customization-red-background-hover: #de1a33; --color-customization-red-foreground: #fff; --color-customization-red-foreground-hover: #fff; --color-customization-red-text-deprecated: #d74854; --color-customization-orange-background: #fd817d; --color-customization-orange-background-rgb: 253, 129, 125; --color-customization-orange-background-hover: #fc5a55; --color-customization-orange-foreground: #560401; --color-customization-orange-foreground-hover: #2e0201; --color-customization-orange-text-deprecated: #d67a74; --color-customization-yellow-orange-background: #fdae33; --color-customization-yellow-orange-background-rgb: 253, 174, 51; --color-customization-yellow-orange-background-hover: #fd9e0b; --color-customization-yellow-orange-foreground: #513201; --color-customization-yellow-orange-foreground-hover: #291901; --color-customization-yellow-orange-text-deprecated: #bf8b3e; --color-customization-yellow-background: #eecc16; --color-customization-yellow-background-rgb: 238, 204, 22; --color-customization-yellow-background-hover: #ccae0f; --color-customization-yellow-foreground: #504107; --color-customization-yellow-foreground-hover: #2a2304; --color-customization-yellow-text-deprecated: #d67a74; --color-customization-yellow-green-background: #a4c61a; --color-customization-yellow-green-background-rgb: 164, 198, 26; --color-customization-yellow-green-background-hover: #86a215; --color-customization-yellow-green-foreground: #333b07; --color-customization-yellow-green-foreground-hover: #131703; --color-customization-yellow-green-text-deprecated: #899d36; --color-customization-green-background: #62bb35; --color-customization-green-background-rgb: 98, 187, 53; --color-customization-green-background-hover: #519b2c; --color-customization-green-foreground: #182c0c; --color-customization-green-foreground-hover: #070c03; --color-customization-green-text-deprecated: #679c40; --color-customization-blue-green-background: #37a862; --color-customization-blue-green-background-rgb: 55, 168, 98; --color-customization-blue-green-background-hover: #2d8950; --color-customization-blue-green-foreground: #fff; --color-customization-blue-green-foreground-hover: #fff; --color-customization-blue-green-text-deprecated: #59a368; --color-customization-aqua-background: #208ea3; --color-customization-aqua-background-rgb: 32, 142, 163; --color-customization-aqua-background-hover: #197081; --color-customization-aqua-foreground: #fff; --color-customization-aqua-foreground-hover: #fff; --color-customization-aqua-text-deprecated: #448da0; --color-customization-blue-background: #4178bc; --color-customization-blue-background-rgb: 65, 120, 188; --color-customization-blue-background-hover: #37659e; --color-customization-blue-foreground: #fff; --color-customization-blue-foreground-hover: #fff; --color-customization-blue-text-deprecated: #4d79b7; --color-customization-indigo-background: #7a71f6; --color-customization-indigo-background-rgb: 122, 113, 246; --color-customization-indigo-background-hover: #564bf4; --color-customization-indigo-foreground: #fff; --color-customization-indigo-foreground-hover: #fff; --color-customization-indigo-text-deprecated: #7776ee; --color-customization-purple-background: #aa71ff; --color-customization-purple-background-rgb: 170, 113, 255; --color-customization-purple-background-hover: #9248ff; --color-customization-purple-foreground: #fff; --color-customization-purple-foreground-hover: #fff; --color-customization-purple-text-deprecated: #a178f7; --color-customization-magenta-background: #e37cff; --color-customization-magenta-background-rgb: 227, 124, 255; --color-customization-magenta-background-hover: #da53ff; --color-customization-magenta-foreground: #48005c; --color-customization-magenta-foreground-hover: #280033; --color-customization-magenta-text-deprecated: #c078df; --color-customization-hot-pink-background: #ea4e9d; --color-customization-hot-pink-background-rgb: 234, 78, 157; --color-customization-hot-pink-background-hover: #e62a89; --color-customization-hot-pink-foreground: #fff; --color-customization-hot-pink-foreground-hover: #fff; --color-customization-hot-pink-text-deprecated: #d95b9b; --color-customization-pink-background: #fca7e4; --color-customization-pink-background-rgb: 252, 167, 228; --color-customization-pink-background-hover: #fb80d8; --color-customization-pink-foreground: #760456; --color-customization-pink-foreground-hover: #4f0339; --color-customization-pink-text-deprecated: #b984ad; --color-customization-cool-gray-background: #8d9f9b; --color-customization-cool-gray-background-rgb: 141, 159, 155; --color-customization-cool-gray-background-hover: #778c88; --color-customization-cool-gray-foreground: #fff; --color-customization-cool-gray-foreground-hover: #fff; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode.DesignTokenThemeSelectors-theme--deuteranopiaMode { --color-customization-red-background: #e8384f; --color-customization-red-background-rgb: 232, 56, 79; --color-customization-red-background-hover: #de1a33; --color-customization-red-foreground: #fff; --color-customization-red-foreground-hover: #fff; --color-customization-red-text-deprecated: #d74854; --color-customization-orange-background: #fd817d; --color-customization-orange-background-rgb: 253, 129, 125; --color-customization-orange-background-hover: #fc5a55; --color-customization-orange-foreground: #560401; --color-customization-orange-foreground-hover: #2e0201; --color-customization-orange-text-deprecated: #d67a74; --color-customization-yellow-orange-background: #fdae33; --color-customization-yellow-orange-background-rgb: 253, 174, 51; --color-customization-yellow-orange-background-hover: #fd9e0b; --color-customization-yellow-orange-foreground: #513201; --color-customization-yellow-orange-foreground-hover: #291901; --color-customization-yellow-orange-text-deprecated: #bf8b3e; --color-customization-yellow-background: #eecc16; --color-customization-yellow-background-rgb: 238, 204, 22; --color-customization-yellow-background-hover: #ccae0f; --color-customization-yellow-foreground: #504107; --color-customization-yellow-foreground-hover: #2a2304; --color-customization-yellow-text-deprecated: #d67a74; --color-customization-yellow-green-background: #a4c61a; --color-customization-yellow-green-background-rgb: 164, 198, 26; --color-customization-yellow-green-background-hover: #86a215; --color-customization-yellow-green-foreground: #333b07; --color-customization-yellow-green-foreground-hover: #131703; --color-customization-yellow-green-text-deprecated: #899d36; --color-customization-green-background: #62bb35; --color-customization-green-background-rgb: 98, 187, 53; --color-customization-green-background-hover: #519b2c; --color-customization-green-foreground: #182c0c; --color-customization-green-foreground-hover: #070c03; --color-customization-green-text-deprecated: #679c40; --color-customization-blue-green-background: #37a862; --color-customization-blue-green-background-rgb: 55, 168, 98; --color-customization-blue-green-background-hover: #2d8950; --color-customization-blue-green-foreground: #fff; --color-customization-blue-green-foreground-hover: #fff; --color-customization-blue-green-text-deprecated: #59a368; --color-customization-aqua-background: #208ea3; --color-customization-aqua-background-rgb: 32, 142, 163; --color-customization-aqua-background-hover: #197081; --color-customization-aqua-foreground: #fff; --color-customization-aqua-foreground-hover: #fff; --color-customization-aqua-text-deprecated: #448da0; --color-customization-blue-background: #4178bc; --color-customization-blue-background-rgb: 65, 120, 188; --color-customization-blue-background-hover: #37659e; --color-customization-blue-foreground: #fff; --color-customization-blue-foreground-hover: #fff; --color-customization-blue-text-deprecated: #4d79b7; --color-customization-indigo-background: #7a71f6; --color-customization-indigo-background-rgb: 122, 113, 246; --color-customization-indigo-background-hover: #564bf4; --color-customization-indigo-foreground: #fff; --color-customization-indigo-foreground-hover: #fff; --color-customization-indigo-text-deprecated: #7776ee; --color-customization-purple-background: #aa71ff; --color-customization-purple-background-rgb: 170, 113, 255; --color-customization-purple-background-hover: #9248ff; --color-customization-purple-foreground: #fff; --color-customization-purple-foreground-hover: #fff; --color-customization-purple-text-deprecated: #a178f7; --color-customization-magenta-background: #e37cff; --color-customization-magenta-background-rgb: 227, 124, 255; --color-customization-magenta-background-hover: #da53ff; --color-customization-magenta-foreground: #48005c; --color-customization-magenta-foreground-hover: #280033; --color-customization-magenta-text-deprecated: #c078df; --color-customization-hot-pink-background: #ea4e9d; --color-customization-hot-pink-background-rgb: 234, 78, 157; --color-customization-hot-pink-background-hover: #e62a89; --color-customization-hot-pink-foreground: #fff; --color-customization-hot-pink-foreground-hover: #fff; --color-customization-hot-pink-text-deprecated: #d95b9b; --color-customization-pink-background: #fca7e4; --color-customization-pink-background-rgb: 252, 167, 228; --color-customization-pink-background-hover: #fb80d8; --color-customization-pink-foreground: #760456; --color-customization-pink-foreground-hover: #4f0339; --color-customization-pink-text-deprecated: #b984ad; --color-customization-cool-gray-background: #8d9f9b; --color-customization-cool-gray-background-rgb: 141, 159, 155; --color-customization-cool-gray-background-hover: #778c88; --color-customization-cool-gray-foreground: #fff; --color-customization-cool-gray-foreground-hover: #fff; } } :root .DesignTokenThemeSelectors-theme--customizationColorTokenHues { --color-customization-background: #d9d9d9; --color-customization-background-hover: #c1c1c1; --color-customization-background-active: #aeaeae; --color-customization-background-weak: #d9d9d9; --color-customization-background-weak-hover: #c1c1c1; --color-customization-foreground: #2b2b2b; --color-customization-foreground-weak: #2b2b2b; --color-customization-red-background: #ff7379; --color-customization-red-background-rgb: 255, 115, 121; --color-customization-red-background-hover: #ec515d; --color-customization-red-foreground: #5f0013; --color-customization-red-foreground-hover: #550010; --color-customization-orange-background: #fd9354; --color-customization-orange-background-rgb: 253, 147, 84; --color-customization-orange-background-hover: #f48135; --color-customization-orange-foreground: #4b1f00; --color-customization-orange-foreground-hover: #431a00; --color-customization-yellow-orange-background: #f8b527; --color-customization-yellow-orange-background-rgb: 248, 181, 39; --color-customization-yellow-orange-background-hover: #e2a200; --color-customization-yellow-orange-foreground: #3c2800; --color-customization-yellow-orange-foreground-hover: #352300; --color-customization-yellow-background: #fad746; --color-customization-yellow-background-rgb: 250, 215, 70; --color-customization-yellow-background-hover: #e0bd1d; --color-customization-yellow-foreground: #352b00; --color-customization-yellow-foreground-hover: #2f2600; --color-customization-yellow-green-background: #bee86a; --color-customization-yellow-green-background-rgb: 190, 232, 106; --color-customization-yellow-green-background-hover: #a8ce5f; --color-customization-yellow-green-foreground: #232f07; --color-customization-yellow-green-foreground-hover: #1f2a06; --color-customization-green-background: #6bd494; --color-customization-green-background-rgb: 107, 212, 148; --color-customization-green-background-hover: #53c382; --color-customization-green-foreground: #06321b; --color-customization-green-foreground-hover: #062d18; --color-customization-blue-green-background: #4cd1ee; --color-customization-blue-green-background-rgb: 76, 209, 238; --color-customization-blue-green-background-hover: #22bedc; --color-customization-blue-green-foreground: #00303a; --color-customization-blue-green-foreground-hover: #002b34; --color-customization-aqua-background: #81eadd; --color-customization-aqua-background-rgb: 129, 234, 221; --color-customization-aqua-background-hover: #53d4c6; --color-customization-aqua-foreground: #00312d; --color-customization-aqua-foreground-hover: #002c28; --color-customization-blue-background: #67a0ff; --color-customization-blue-background-rgb: 103, 160, 255; --color-customization-blue-background-hover: #58d; --color-customization-blue-foreground: #142b51; --color-customization-blue-foreground-hover: #112649; --color-customization-indigo-background: #a491ff; --color-customization-indigo-background-rgb: 164, 145, 255; --color-customization-indigo-background-hover: #8c78e3; --color-customization-indigo-foreground: #2e2455; --color-customization-indigo-foreground-hover: #291f4c; --color-customization-purple-background: #d57ee9; --color-customization-purple-background-rgb: 213, 126, 233; --color-customization-purple-background-hover: #bb68ce; --color-customization-purple-foreground: #45184f; --color-customization-purple-foreground-hover: #3c1744; --color-customization-magenta-background: #fda2ea; --color-customization-magenta-background-rgb: 253, 162, 234; --color-customization-magenta-background-hover: #f685e0; --color-customization-magenta-foreground: #4e1144; --color-customization-magenta-foreground-hover: #44123c; --color-customization-hot-pink-background: #fb6db8; --color-customization-hot-pink-background-rgb: 251, 109, 184; --color-customization-hot-pink-background-hover: #dc589e; --color-customization-hot-pink-foreground: #560b37; --color-customization-hot-pink-foreground-hover: #4c0930; --color-customization-pink-background: #ffa7bb; --color-customization-pink-background-rgb: 255, 167, 187; --color-customization-pink-background-hover: #ff8ba8; --color-customization-pink-foreground: #5d0027; --color-customization-pink-foreground-hover: #530022; --color-customization-cool-gray-background: #a0a0a0; --color-customization-cool-gray-background-rgb: 160, 160, 160; --color-customization-cool-gray-background-hover: #878787; --color-customization-cool-gray-foreground: #2b2b2b; --color-customization-cool-gray-foreground-hover: #262626; } :root .DesignTokenThemeSelectors-theme--customizationColorTokenHues .DesignTokenThemeOverrideRegionInternal--light { --color-customization-background: #c7c4c4; --color-customization-background-hover: #bfbcbc; --color-customization-background-active: #b9b6b6; --color-customization-background-weak: #e8e5e4; --color-customization-background-weak-deprecated-opaque: #e8e5e4; --color-customization-background-weak-deprecated: #e8e5e4; --color-customization-background-weak-hover: #e1dedd; --color-customization-background-weak-hover-deprecated: #e1dedd; --color-customization-foreground: #1e1f21; --color-customization-foreground-weak: #1e1f21; --color-customization-foreground-weak-deprecated: #1e1f21; --color-customization-red-background: #f06a6a; --color-customization-red-background-rgb: 240, 106, 106; --color-customization-red-background-hover: #eb6868; --color-customization-red-foreground: #1e1f21; --color-customization-red-foreground-hover: #1e1f21; --color-customization-red-text-deprecated: #1e1f21; --color-customization-orange-background: #ec8d71; --color-customization-orange-background-rgb: 236, 141, 113; --color-customization-orange-background-hover: #e3886d; --color-customization-orange-foreground: #1e1f21; --color-customization-orange-foreground-hover: #1e1f21; --color-customization-orange-text-deprecated: #1e1f21; --color-customization-yellow-orange-background: #f1bd6c; --color-customization-yellow-orange-background-rgb: 241, 189, 108; --color-customization-yellow-orange-background-hover: #e7b568; --color-customization-yellow-orange-foreground: #1e1f21; --color-customization-yellow-orange-foreground-hover: #1e1f21; --color-customization-yellow-orange-text-deprecated: #1e1f21; --color-customization-yellow-background: #f8df72; --color-customization-yellow-background-rgb: 248, 223, 114; --color-customization-yellow-background-hover: #f2da6f; --color-customization-yellow-foreground: #1e1f21; --color-customization-yellow-foreground-hover: #1e1f21; --color-customization-yellow-text-deprecated: #1e1f21; --color-customization-yellow-green-background: #b3df97; --color-customization-yellow-green-background-rgb: 179, 223, 151; --color-customization-yellow-green-background-hover: #a8d688; --color-customization-yellow-green-foreground: #1e1f21; --color-customization-yellow-green-foreground-hover: #1e1f21; --color-customization-yellow-green-text-deprecated: #1e1f21; --color-customization-green-background: #83c9a9; --color-customization-green-background-rgb: 131, 201, 169; --color-customization-green-background-hover: #7ec1a3; --color-customization-green-foreground: #1e1f21; --color-customization-green-foreground-hover: #1e1f21; --color-customization-green-text-deprecated: #1e1f21; --color-customization-blue-green-background: #4ecbc4; --color-customization-blue-green-background-rgb: 78, 203, 196; --color-customization-blue-green-background-hover: #4abeb7; --color-customization-blue-green-foreground: #1e1f21; --color-customization-blue-green-foreground-hover: #1e1f21; --color-customization-blue-green-text-deprecated: #1e1f21; --color-customization-aqua-background: #9ee7e3; --color-customization-aqua-background-rgb: 158, 231, 227; --color-customization-aqua-background-hover: #99dfdb; --color-customization-aqua-foreground: #1e1f21; --color-customization-aqua-foreground-hover: #1e1f21; --color-customization-aqua-text-deprecated: #1e1f21; --color-customization-blue-background: #4573d2; --color-customization-blue-background-rgb: 69, 115, 210; --color-customization-blue-background-hover: #526dc6; --color-customization-blue-foreground: #fff; --color-customization-blue-foreground-hover: #fff; --color-customization-blue-text-deprecated: #1e1f21; --color-customization-indigo-background: #a69ff3; --color-customization-indigo-background-rgb: 166, 159, 243; --color-customization-indigo-background-hover: #9f98ed; --color-customization-indigo-foreground: #1e1f21; --color-customization-indigo-foreground-hover: #1e1f21; --color-customization-indigo-text-deprecated: #1e1f21; --color-customization-purple-background: #cd95ea; --color-customization-purple-background-rgb: 205, 149, 234; --color-customization-purple-background-hover: #c48fdf; --color-customization-purple-foreground: #1e1f21; --color-customization-purple-foreground-hover: #1e1f21; --color-customization-purple-text-deprecated: #1e1f21; --color-customization-magenta-background: #f9aaef; --color-customization-magenta-background-rgb: 249, 170, 239; --color-customization-magenta-background-hover: #f1a5e8; --color-customization-magenta-foreground: #1e1f21; --color-customization-magenta-foreground-hover: #1e1f21; --color-customization-magenta-text-deprecated: #1e1f21; --color-customization-hot-pink-background: #f26fb2; --color-customization-hot-pink-background-rgb: 242, 111, 178; --color-customization-hot-pink-background-hover: #e66aa9; --color-customization-hot-pink-foreground: #1e1f21; --color-customization-hot-pink-foreground-hover: #1e1f21; --color-customization-hot-pink-text-deprecated: #1e1f21; --color-customization-pink-background: #fc979a; --color-customization-pink-background-rgb: 252, 151, 154; --color-customization-pink-background-hover: #f39294; --color-customization-pink-foreground: #1e1f21; --color-customization-pink-foreground-hover: #1e1f21; --color-customization-pink-text-deprecated: #1e1f21; --color-customization-cool-gray-background: #6d6e6f; --color-customization-cool-gray-background-rgb: 109, 110, 111; --color-customization-cool-gray-background-hover: #656667; --color-customization-cool-gray-foreground: #fff; --color-customization-cool-gray-foreground-hover: #fff; --color-customization-cool-gray-text-deprecated: #1e1f21; } :root .DesignTokenThemeSelectors-theme--darkMode.DesignTokenThemeSelectors-theme--customizationColorTokenHues { --color-customization-background: #d9d9d9; --color-customization-background-hover: #c1c1c1; --color-customization-background-active: #aeaeae; --color-customization-background-weak: #d9d9d9; --color-customization-background-weak-hover: #c1c1c1; --color-customization-foreground: #2b2b2b; --color-customization-foreground-weak: #2b2b2b; --color-customization-red-background: #ff7379; --color-customization-red-background-rgb: 255, 115, 121; --color-customization-red-background-hover: #ec515d; --color-customization-red-foreground: #5f0013; --color-customization-red-foreground-hover: #550010; --color-customization-orange-background: #fd9354; --color-customization-orange-background-rgb: 253, 147, 84; --color-customization-orange-background-hover: #f48135; --color-customization-orange-foreground: #4b1f00; --color-customization-orange-foreground-hover: #431a00; --color-customization-yellow-orange-background: #f8b527; --color-customization-yellow-orange-background-rgb: 248, 181, 39; --color-customization-yellow-orange-background-hover: #e2a200; --color-customization-yellow-orange-foreground: #3c2800; --color-customization-yellow-orange-foreground-hover: #352300; --color-customization-yellow-background: #fad746; --color-customization-yellow-background-rgb: 250, 215, 70; --color-customization-yellow-background-hover: #e0bd1d; --color-customization-yellow-foreground: #352b00; --color-customization-yellow-foreground-hover: #2f2600; --color-customization-yellow-green-background: #bee86a; --color-customization-yellow-green-background-rgb: 190, 232, 106; --color-customization-yellow-green-background-hover: #a8ce5f; --color-customization-yellow-green-foreground: #232f07; --color-customization-yellow-green-foreground-hover: #1f2a06; --color-customization-green-background: #6bd494; --color-customization-green-background-rgb: 107, 212, 148; --color-customization-green-background-hover: #53c382; --color-customization-green-foreground: #06321b; --color-customization-green-foreground-hover: #062d18; --color-customization-blue-green-background: #4cd1ee; --color-customization-blue-green-background-rgb: 76, 209, 238; --color-customization-blue-green-background-hover: #22bedc; --color-customization-blue-green-foreground: #00303a; --color-customization-blue-green-foreground-hover: #002b34; --color-customization-aqua-background: #81eadd; --color-customization-aqua-background-rgb: 129, 234, 221; --color-customization-aqua-background-hover: #53d4c6; --color-customization-aqua-foreground: #00312d; --color-customization-aqua-foreground-hover: #002c28; --color-customization-blue-background: #67a0ff; --color-customization-blue-background-rgb: 103, 160, 255; --color-customization-blue-background-hover: #58d; --color-customization-blue-foreground: #142b51; --color-customization-blue-foreground-hover: #112649; --color-customization-indigo-background: #a491ff; --color-customization-indigo-background-rgb: 164, 145, 255; --color-customization-indigo-background-hover: #8c78e3; --color-customization-indigo-foreground: #2e2455; --color-customization-indigo-foreground-hover: #291f4c; --color-customization-purple-background: #d57ee9; --color-customization-purple-background-rgb: 213, 126, 233; --color-customization-purple-background-hover: #bb68ce; --color-customization-purple-foreground: #45184f; --color-customization-purple-foreground-hover: #3c1744; --color-customization-magenta-background: #fda2ea; --color-customization-magenta-background-rgb: 253, 162, 234; --color-customization-magenta-background-hover: #f685e0; --color-customization-magenta-foreground: #4e1144; --color-customization-magenta-foreground-hover: #44123c; --color-customization-hot-pink-background: #fb6db8; --color-customization-hot-pink-background-rgb: 251, 109, 184; --color-customization-hot-pink-background-hover: #dc589e; --color-customization-hot-pink-foreground: #560b37; --color-customization-hot-pink-foreground-hover: #4c0930; --color-customization-pink-background: #ffa7bb; --color-customization-pink-background-rgb: 255, 167, 187; --color-customization-pink-background-hover: #ff8ba8; --color-customization-pink-foreground: #5d0027; --color-customization-pink-foreground-hover: #530022; --color-customization-cool-gray-background: #a0a0a0; --color-customization-cool-gray-background-rgb: 160, 160, 160; --color-customization-cool-gray-background-hover: #878787; --color-customization-cool-gray-foreground: #2b2b2b; --color-customization-cool-gray-foreground-hover: #262626; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode.DesignTokenThemeSelectors-theme--customizationColorTokenHues { --color-customization-background: #d9d9d9; --color-customization-background-hover: #c1c1c1; --color-customization-background-active: #aeaeae; --color-customization-background-weak: #d9d9d9; --color-customization-background-weak-hover: #c1c1c1; --color-customization-foreground: #2b2b2b; --color-customization-foreground-weak: #2b2b2b; --color-customization-red-background: #ff7379; --color-customization-red-background-rgb: 255, 115, 121; --color-customization-red-background-hover: #ec515d; --color-customization-red-foreground: #5f0013; --color-customization-red-foreground-hover: #550010; --color-customization-orange-background: #fd9354; --color-customization-orange-background-rgb: 253, 147, 84; --color-customization-orange-background-hover: #f48135; --color-customization-orange-foreground: #4b1f00; --color-customization-orange-foreground-hover: #431a00; --color-customization-yellow-orange-background: #f8b527; --color-customization-yellow-orange-background-rgb: 248, 181, 39; --color-customization-yellow-orange-background-hover: #e2a200; --color-customization-yellow-orange-foreground: #3c2800; --color-customization-yellow-orange-foreground-hover: #352300; --color-customization-yellow-background: #fad746; --color-customization-yellow-background-rgb: 250, 215, 70; --color-customization-yellow-background-hover: #e0bd1d; --color-customization-yellow-foreground: #352b00; --color-customization-yellow-foreground-hover: #2f2600; --color-customization-yellow-green-background: #bee86a; --color-customization-yellow-green-background-rgb: 190, 232, 106; --color-customization-yellow-green-background-hover: #a8ce5f; --color-customization-yellow-green-foreground: #232f07; --color-customization-yellow-green-foreground-hover: #1f2a06; --color-customization-green-background: #6bd494; --color-customization-green-background-rgb: 107, 212, 148; --color-customization-green-background-hover: #53c382; --color-customization-green-foreground: #06321b; --color-customization-green-foreground-hover: #062d18; --color-customization-blue-green-background: #4cd1ee; --color-customization-blue-green-background-rgb: 76, 209, 238; --color-customization-blue-green-background-hover: #22bedc; --color-customization-blue-green-foreground: #00303a; --color-customization-blue-green-foreground-hover: #002b34; --color-customization-aqua-background: #81eadd; --color-customization-aqua-background-rgb: 129, 234, 221; --color-customization-aqua-background-hover: #53d4c6; --color-customization-aqua-foreground: #00312d; --color-customization-aqua-foreground-hover: #002c28; --color-customization-blue-background: #67a0ff; --color-customization-blue-background-rgb: 103, 160, 255; --color-customization-blue-background-hover: #58d; --color-customization-blue-foreground: #142b51; --color-customization-blue-foreground-hover: #112649; --color-customization-indigo-background: #a491ff; --color-customization-indigo-background-rgb: 164, 145, 255; --color-customization-indigo-background-hover: #8c78e3; --color-customization-indigo-foreground: #2e2455; --color-customization-indigo-foreground-hover: #291f4c; --color-customization-purple-background: #d57ee9; --color-customization-purple-background-rgb: 213, 126, 233; --color-customization-purple-background-hover: #bb68ce; --color-customization-purple-foreground: #45184f; --color-customization-purple-foreground-hover: #3c1744; --color-customization-magenta-background: #fda2ea; --color-customization-magenta-background-rgb: 253, 162, 234; --color-customization-magenta-background-hover: #f685e0; --color-customization-magenta-foreground: #4e1144; --color-customization-magenta-foreground-hover: #44123c; --color-customization-hot-pink-background: #fb6db8; --color-customization-hot-pink-background-rgb: 251, 109, 184; --color-customization-hot-pink-background-hover: #dc589e; --color-customization-hot-pink-foreground: #560b37; --color-customization-hot-pink-foreground-hover: #4c0930; --color-customization-pink-background: #ffa7bb; --color-customization-pink-background-rgb: 255, 167, 187; --color-customization-pink-background-hover: #ff8ba8; --color-customization-pink-foreground: #5d0027; --color-customization-pink-foreground-hover: #530022; --color-customization-cool-gray-background: #a0a0a0; --color-customization-cool-gray-background-rgb: 160, 160, 160; --color-customization-cool-gray-background-hover: #878787; --color-customization-cool-gray-foreground: #2b2b2b; --color-customization-cool-gray-foreground-hover: #262626; } } :root .DesignTokenThemeSelectors-theme--deuteranopiaMode.DesignTokenThemeSelectors-theme--customizationColorTokenHues { --color-customization-blue-foreground: #fff; --color-customization-blue-foreground-hover: #fff; --color-customization-cool-gray-foreground: #760456; --color-customization-cool-gray-foreground-hover: #760456; } :root .DesignTokenThemeSelectors-theme--deuteranopiaMode.DesignTokenThemeSelectors-theme--customizationColorTokenHues .DesignTokenThemeOverrideRegionInternal--light { --color-customization-red-background: #e8384f; --color-customization-red-background-rgb: 232, 56, 79; --color-customization-red-background-hover: #de1a33; --color-customization-red-foreground: #fff; --color-customization-red-foreground-hover: #fff; --color-customization-red-text-deprecated: #d74854; --color-customization-orange-background: #fd817d; --color-customization-orange-background-rgb: 253, 129, 125; --color-customization-orange-background-hover: #fc5a55; --color-customization-orange-foreground: #560401; --color-customization-orange-foreground-hover: #2e0201; --color-customization-orange-text-deprecated: #d67a74; --color-customization-yellow-orange-background: #fdae33; --color-customization-yellow-orange-background-rgb: 253, 174, 51; --color-customization-yellow-orange-background-hover: #fd9e0b; --color-customization-yellow-orange-foreground: #513201; --color-customization-yellow-orange-foreground-hover: #291901; --color-customization-yellow-orange-text-deprecated: #bf8b3e; --color-customization-yellow-background: #eecc16; --color-customization-yellow-background-rgb: 238, 204, 22; --color-customization-yellow-background-hover: #ccae0f; --color-customization-yellow-foreground: #504107; --color-customization-yellow-foreground-hover: #2a2304; --color-customization-yellow-text-deprecated: #d67a74; --color-customization-yellow-green-background: #a4c61a; --color-customization-yellow-green-background-rgb: 164, 198, 26; --color-customization-yellow-green-background-hover: #86a215; --color-customization-yellow-green-foreground: #333b07; --color-customization-yellow-green-foreground-hover: #131703; --color-customization-yellow-green-text-deprecated: #899d36; --color-customization-green-background: #62bb35; --color-customization-green-background-rgb: 98, 187, 53; --color-customization-green-background-hover: #519b2c; --color-customization-green-foreground: #182c0c; --color-customization-green-foreground-hover: #070c03; --color-customization-green-text-deprecated: #679c40; --color-customization-blue-green-background: #37a862; --color-customization-blue-green-background-rgb: 55, 168, 98; --color-customization-blue-green-background-hover: #2d8950; --color-customization-blue-green-foreground: #fff; --color-customization-blue-green-foreground-hover: #fff; --color-customization-blue-green-text-deprecated: #59a368; --color-customization-aqua-background: #208ea3; --color-customization-aqua-background-rgb: 32, 142, 163; --color-customization-aqua-background-hover: #197081; --color-customization-aqua-foreground: #fff; --color-customization-aqua-foreground-hover: #fff; --color-customization-aqua-text-deprecated: #448da0; --color-customization-blue-background: #4178bc; --color-customization-blue-background-rgb: 65, 120, 188; --color-customization-blue-background-hover: #37659e; --color-customization-blue-foreground: #fff; --color-customization-blue-foreground-hover: #fff; --color-customization-blue-text-deprecated: #4d79b7; --color-customization-indigo-background: #7a71f6; --color-customization-indigo-background-rgb: 122, 113, 246; --color-customization-indigo-background-hover: #564bf4; --color-customization-indigo-foreground: #fff; --color-customization-indigo-foreground-hover: #fff; --color-customization-indigo-text-deprecated: #7776ee; --color-customization-purple-background: #aa71ff; --color-customization-purple-background-rgb: 170, 113, 255; --color-customization-purple-background-hover: #9248ff; --color-customization-purple-foreground: #fff; --color-customization-purple-foreground-hover: #fff; --color-customization-purple-text-deprecated: #a178f7; --color-customization-magenta-background: #e37cff; --color-customization-magenta-background-rgb: 227, 124, 255; --color-customization-magenta-background-hover: #da53ff; --color-customization-magenta-foreground: #48005c; --color-customization-magenta-foreground-hover: #280033; --color-customization-magenta-text-deprecated: #c078df; --color-customization-hot-pink-background: #ea4e9d; --color-customization-hot-pink-background-rgb: 234, 78, 157; --color-customization-hot-pink-background-hover: #e62a89; --color-customization-hot-pink-foreground: #fff; --color-customization-hot-pink-foreground-hover: #fff; --color-customization-hot-pink-text-deprecated: #d95b9b; --color-customization-pink-background: #fca7e4; --color-customization-pink-background-rgb: 252, 167, 228; --color-customization-pink-background-hover: #fb80d8; --color-customization-pink-foreground: #760456; --color-customization-pink-foreground-hover: #4f0339; --color-customization-pink-text-deprecated: #b984ad; --color-customization-cool-gray-background: #8d9f9b; --color-customization-cool-gray-background-rgb: 141, 159, 155; --color-customization-cool-gray-background-hover: #778c88; --color-customization-cool-gray-foreground: #fff; --color-customization-cool-gray-foreground-hover: #fff; } :root .DesignTokenThemeSelectors-theme--darkMode.DesignTokenThemeSelectors-theme--deuteranopiaMode.DesignTokenThemeSelectors-theme--customizationColorTokenHues { --color-customization-blue-foreground: #fff; --color-customization-blue-foreground-hover: #fff; --color-customization-cool-gray-foreground: #760456; --color-customization-cool-gray-foreground-hover: #760456; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode.DesignTokenThemeSelectors-theme--deuteranopiaMode.DesignTokenThemeSelectors-theme--customizationColorTokenHues { --color-customization-blue-foreground: #fff; --color-customization-blue-foreground-hover: #fff; --color-customization-cool-gray-foreground: #760456; --color-customization-cool-gray-foreground-hover: #760456; } } :root .DesignTokenThemeSelectors-theme--maroon .DesignTokenThemeOverrideRegionInternal--light { --color-customization-background: #c7c4c4; --color-customization-background-hover: #bfbcbc; --color-customization-background-active: #b9b6b6; --color-customization-background-weak: #e8e5e4; --color-customization-background-weak-deprecated-opaque: #e8e5e4; --color-customization-background-weak-deprecated: #e8e5e4; --color-customization-background-weak-hover: #e1dedd; --color-customization-background-weak-hover-deprecated: #e1dedd; --color-customization-foreground: #1e1f21; --color-customization-foreground-weak: #1e1f21; --color-customization-foreground-weak-deprecated: #1e1f21; --color-customization-red-background: #f06a6a; --color-customization-red-background-rgb: 240, 106, 106; --color-customization-red-background-hover: #eb6868; --color-customization-red-foreground: #1e1f21; --color-customization-red-foreground-hover: #1e1f21; --color-customization-red-text-deprecated: #1e1f21; --color-customization-orange-background: #ec8d71; --color-customization-orange-background-rgb: 236, 141, 113; --color-customization-orange-background-hover: #e3886d; --color-customization-orange-foreground: #1e1f21; --color-customization-orange-foreground-hover: #1e1f21; --color-customization-orange-text-deprecated: #1e1f21; --color-customization-yellow-orange-background: #f1bd6c; --color-customization-yellow-orange-background-rgb: 241, 189, 108; --color-customization-yellow-orange-background-hover: #e7b568; --color-customization-yellow-orange-foreground: #1e1f21; --color-customization-yellow-orange-foreground-hover: #1e1f21; --color-customization-yellow-orange-text-deprecated: #1e1f21; --color-customization-yellow-background: #f8df72; --color-customization-yellow-background-rgb: 248, 223, 114; --color-customization-yellow-background-hover: #f2da6f; --color-customization-yellow-foreground: #1e1f21; --color-customization-yellow-foreground-hover: #1e1f21; --color-customization-yellow-text-deprecated: #1e1f21; --color-customization-yellow-green-background: #b3df97; --color-customization-yellow-green-background-rgb: 179, 223, 151; --color-customization-yellow-green-background-hover: #a8d688; --color-customization-yellow-green-foreground: #1e1f21; --color-customization-yellow-green-foreground-hover: #1e1f21; --color-customization-yellow-green-text-deprecated: #1e1f21; --color-customization-green-background: #83c9a9; --color-customization-green-background-rgb: 131, 201, 169; --color-customization-green-background-hover: #7ec1a3; --color-customization-green-foreground: #1e1f21; --color-customization-green-foreground-hover: #1e1f21; --color-customization-green-text-deprecated: #1e1f21; --color-customization-blue-green-background: #4ecbc4; --color-customization-blue-green-background-rgb: 78, 203, 196; --color-customization-blue-green-background-hover: #4abeb7; --color-customization-blue-green-foreground: #1e1f21; --color-customization-blue-green-foreground-hover: #1e1f21; --color-customization-blue-green-text-deprecated: #1e1f21; --color-customization-aqua-background: #9ee7e3; --color-customization-aqua-background-rgb: 158, 231, 227; --color-customization-aqua-background-hover: #99dfdb; --color-customization-aqua-foreground: #1e1f21; --color-customization-aqua-foreground-hover: #1e1f21; --color-customization-aqua-text-deprecated: #1e1f21; --color-customization-blue-background: #4573d2; --color-customization-blue-background-rgb: 69, 115, 210; --color-customization-blue-background-hover: #526dc6; --color-customization-blue-foreground: #fff; --color-customization-blue-foreground-hover: #fff; --color-customization-blue-text-deprecated: #1e1f21; --color-customization-indigo-background: #a69ff3; --color-customization-indigo-background-rgb: 166, 159, 243; --color-customization-indigo-background-hover: #9f98ed; --color-customization-indigo-foreground: #1e1f21; --color-customization-indigo-foreground-hover: #1e1f21; --color-customization-indigo-text-deprecated: #1e1f21; --color-customization-purple-background: #cd95ea; --color-customization-purple-background-rgb: 205, 149, 234; --color-customization-purple-background-hover: #c48fdf; --color-customization-purple-foreground: #1e1f21; --color-customization-purple-foreground-hover: #1e1f21; --color-customization-purple-text-deprecated: #1e1f21; --color-customization-magenta-background: #f9aaef; --color-customization-magenta-background-rgb: 249, 170, 239; --color-customization-magenta-background-hover: #f1a5e8; --color-customization-magenta-foreground: #1e1f21; --color-customization-magenta-foreground-hover: #1e1f21; --color-customization-magenta-text-deprecated: #1e1f21; --color-customization-hot-pink-background: #f26fb2; --color-customization-hot-pink-background-rgb: 242, 111, 178; --color-customization-hot-pink-background-hover: #e66aa9; --color-customization-hot-pink-foreground: #1e1f21; --color-customization-hot-pink-foreground-hover: #1e1f21; --color-customization-hot-pink-text-deprecated: #1e1f21; --color-customization-pink-background: #fc979a; --color-customization-pink-background-rgb: 252, 151, 154; --color-customization-pink-background-hover: #f39294; --color-customization-pink-foreground: #1e1f21; --color-customization-pink-foreground-hover: #1e1f21; --color-customization-pink-text-deprecated: #1e1f21; --color-customization-cool-gray-background: #6d6e6f; --color-customization-cool-gray-background-rgb: 109, 110, 111; --color-customization-cool-gray-background-hover: #656667; --color-customization-cool-gray-foreground: #fff; --color-customization-cool-gray-foreground-hover: #fff; --color-customization-cool-gray-text-deprecated: #1e1f21; } :root .DesignTokenThemeSelectors-theme--darkMode.DesignTokenThemeSelectors-theme--maroon { --color-customization-background-weak: #5f2748; --color-customization-background-weak-deprecated-opaque: #5f2748; --color-customization-background-weak-deprecated: #5f2748; --color-customization-background-weak-hover: #5f2748; --color-customization-background-weak-hover-deprecated: #5f2748; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode.DesignTokenThemeSelectors-theme--maroon { --color-customization-background-weak: #5f2748; --color-customization-background-weak-deprecated-opaque: #5f2748; --color-customization-background-weak-deprecated: #5f2748; --color-customization-background-weak-hover: #5f2748; --color-customization-background-weak-hover-deprecated: #5f2748; } } :root .DesignTokenThemeSelectors-theme--deuteranopiaMode.DesignTokenThemeSelectors-theme--maroon .DesignTokenThemeOverrideRegionInternal--light { --color-customization-red-background: #e8384f; --color-customization-red-background-rgb: 232, 56, 79; --color-customization-red-background-hover: #de1a33; --color-customization-red-foreground: #fff; --color-customization-red-foreground-hover: #fff; --color-customization-red-text-deprecated: #d74854; --color-customization-orange-background: #fd817d; --color-customization-orange-background-rgb: 253, 129, 125; --color-customization-orange-background-hover: #fc5a55; --color-customization-orange-foreground: #560401; --color-customization-orange-foreground-hover: #2e0201; --color-customization-orange-text-deprecated: #d67a74; --color-customization-yellow-orange-background: #fdae33; --color-customization-yellow-orange-background-rgb: 253, 174, 51; --color-customization-yellow-orange-background-hover: #fd9e0b; --color-customization-yellow-orange-foreground: #513201; --color-customization-yellow-orange-foreground-hover: #291901; --color-customization-yellow-orange-text-deprecated: #bf8b3e; --color-customization-yellow-background: #eecc16; --color-customization-yellow-background-rgb: 238, 204, 22; --color-customization-yellow-background-hover: #ccae0f; --color-customization-yellow-foreground: #504107; --color-customization-yellow-foreground-hover: #2a2304; --color-customization-yellow-text-deprecated: #d67a74; --color-customization-yellow-green-background: #a4c61a; --color-customization-yellow-green-background-rgb: 164, 198, 26; --color-customization-yellow-green-background-hover: #86a215; --color-customization-yellow-green-foreground: #333b07; --color-customization-yellow-green-foreground-hover: #131703; --color-customization-yellow-green-text-deprecated: #899d36; --color-customization-green-background: #62bb35; --color-customization-green-background-rgb: 98, 187, 53; --color-customization-green-background-hover: #519b2c; --color-customization-green-foreground: #182c0c; --color-customization-green-foreground-hover: #070c03; --color-customization-green-text-deprecated: #679c40; --color-customization-blue-green-background: #37a862; --color-customization-blue-green-background-rgb: 55, 168, 98; --color-customization-blue-green-background-hover: #2d8950; --color-customization-blue-green-foreground: #fff; --color-customization-blue-green-foreground-hover: #fff; --color-customization-blue-green-text-deprecated: #59a368; --color-customization-aqua-background: #208ea3; --color-customization-aqua-background-rgb: 32, 142, 163; --color-customization-aqua-background-hover: #197081; --color-customization-aqua-foreground: #fff; --color-customization-aqua-foreground-hover: #fff; --color-customization-aqua-text-deprecated: #448da0; --color-customization-blue-background: #4178bc; --color-customization-blue-background-rgb: 65, 120, 188; --color-customization-blue-background-hover: #37659e; --color-customization-blue-foreground: #fff; --color-customization-blue-foreground-hover: #fff; --color-customization-blue-text-deprecated: #4d79b7; --color-customization-indigo-background: #7a71f6; --color-customization-indigo-background-rgb: 122, 113, 246; --color-customization-indigo-background-hover: #564bf4; --color-customization-indigo-foreground: #fff; --color-customization-indigo-foreground-hover: #fff; --color-customization-indigo-text-deprecated: #7776ee; --color-customization-purple-background: #aa71ff; --color-customization-purple-background-rgb: 170, 113, 255; --color-customization-purple-background-hover: #9248ff; --color-customization-purple-foreground: #fff; --color-customization-purple-foreground-hover: #fff; --color-customization-purple-text-deprecated: #a178f7; --color-customization-magenta-background: #e37cff; --color-customization-magenta-background-rgb: 227, 124, 255; --color-customization-magenta-background-hover: #da53ff; --color-customization-magenta-foreground: #48005c; --color-customization-magenta-foreground-hover: #280033; --color-customization-magenta-text-deprecated: #c078df; --color-customization-hot-pink-background: #ea4e9d; --color-customization-hot-pink-background-rgb: 234, 78, 157; --color-customization-hot-pink-background-hover: #e62a89; --color-customization-hot-pink-foreground: #fff; --color-customization-hot-pink-foreground-hover: #fff; --color-customization-hot-pink-text-deprecated: #d95b9b; --color-customization-pink-background: #fca7e4; --color-customization-pink-background-rgb: 252, 167, 228; --color-customization-pink-background-hover: #fb80d8; --color-customization-pink-foreground: #760456; --color-customization-pink-foreground-hover: #4f0339; --color-customization-pink-text-deprecated: #b984ad; --color-customization-cool-gray-background: #8d9f9b; --color-customization-cool-gray-background-rgb: 141, 159, 155; --color-customization-cool-gray-background-hover: #778c88; --color-customization-cool-gray-foreground: #fff; --color-customization-cool-gray-foreground-hover: #fff; } :root, :root .DesignTokenThemeOverrideRegionInternal--light { --color-a11y-selected-border-active: #4573d2; --color-a11y-selected-border-active-inverse: #fff; } @media print { :root { --color-a11y-selected-border-active: #4573d2; --color-a11y-selected-border-active-inverse: #fff; } } :root .DesignTokenThemeSelectors-theme--darkMode { --color-a11y-selected-border-active: #fff; --color-a11y-selected-border-active-inverse: #fff; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode { --color-a11y-selected-border-active: #fff; --color-a11y-selected-border-active-inverse: #fff; } } :root, :root .DesignTokenThemeOverrideRegionInternal--light { --color-text: #1e1f21; --color-text-rgb: 30, 31, 33; --color-text-foreground: #fff; --color-text-disabled: #afabac; --color-text-weak: #6d6e6f; --color-text-weak-hover: #1e1f21; --color-icon: #6d6e6f; --color-icon-rgb: 109, 110, 111; --color-icon-foreground: #fff; --color-icon-hover: #1e1f21; --color-icon-active: #1e1f21; --color-icon-disabled: #afabac; --color-icon-strong: #6d6e6f; --color-border: #edeae9; --color-border-rgb: 237, 234, 233; --color-border-hover: #afabac; --color-border-active: #6d6e6f; --color-border-strong: #cfcbcb; --color-background-weak: #fff; --color-background-weak-rgb: 255, 255, 255; --color-background-weak-hover-deprecated: #f9f8f8; --color-background-medium: #f9f8f8; --color-background-medium-rgb: 249, 248, 248; --color-background-hover: rgba(55, 23, 23, 0.03); --color-background-active: rgba(55, 23, 23, 0.05); --color-background-active-rgb: 55, 23, 23; --color-background-strong: #f5f3f3; --color-background-strong-rgb: 245, 243, 243; --color-shadow-small: rgba(109, 110, 111, 0.08); --color-shadow-medium: rgba(109, 110, 111, 0.1); --color-shadow-large: rgba(109, 110, 111, 0.12); --color-selected-text: #3f6ac4; --color-selected-text-hover: #4464bb; --color-selected-text-strong: #fff; --color-selected-icon: #3f6ac4; --color-selected-icon-rgb: 63, 106, 196; --color-selected-icon-strong: #fff; --color-selected-border: #3f6ac4; --color-selected-border-hover: #3f6ac4; --color-selected-border-active: #3f6ac4; --color-selected-background: #f1f2fc; --color-selected-background-hover: #e7e9fc; --color-selected-background-active: #dbe0fd; --color-selected-background-strong: #4573d2; --color-selected-background-strong-rgb: 69, 115, 210; --color-selected-background-strong-hover: #426dc6; --color-selected-background-strong-active: #3f66ba; --color-success-text: #0d7f56; --color-success-text-hover: #12714d; --color-success-text-strong: #fff; --color-success-icon: #58a182; --color-success-icon-hover: #368e6a; --color-success-icon-strong: #fff; --color-success-border: #8dc2ac; --color-success-border-hover: #58a182; --color-success-border-active: #58a182; --color-success-background: #e6f8f1; --color-success-background-hover: #e0f4ec; --color-success-background-active: #cce8dd; --color-success-background-strong: #58a182; --color-success-background-strong-hover: #519d7d; --color-success-background-strong-active: #3f9470; --color-warning-text: #986516; --color-warning-text-hover: #805411; --color-warning-text-strong: #1e1f21; --color-warning-icon: #f1bd6c; --color-warning-icon-rgb: 241, 189, 108; --color-warning-icon-hover: #b58e53; --color-warning-icon-strong: #1e1f21; --color-warning-border: #f1bd6c; --color-warning-border-hover: #b58e53; --color-warning-background: #fff6ee; --color-warning-background-hover: #ffecda; --color-warning-background-active: #fedcb6; --color-warning-background-strong: #f1bd6c; --color-warning-background-strong-hover: #e8b668; --color-warning-background-strong-active: #e2b266; --color-danger-text: #c92f54; --color-danger-text-hover: #a42b45; --color-danger-text-strong: #fff; --color-danger-icon: #de5f73; --color-danger-icon-hover: #d33e5d; --color-danger-icon-strong: #fff; --color-danger-border: #f1a2a9; --color-danger-border-hover: #e37281; --color-danger-border-active: #e37281; --color-danger-background: #fef0f1; --color-danger-background-hover: #fcdadc; --color-danger-background-active: #f9c6ca; --color-danger-background-strong: #d33e5d; --color-danger-background-strong-rgb: 211, 62, 93; --color-danger-background-strong-hover: #c92f54; --color-danger-background-strong-active: #a42b45; --color-drop-target-background: rgba(255, 255, 255, 0.95); --color-beta-text: #6e66b1; --color-beta-text-hover: #5e57a0; --color-beta-text-weak-deprecated: #a499ed; --color-beta-text-strong: #fff; --color-beta-icon: #8d84e8; --color-beta-icon-rgb: 141, 132, 232; --color-beta-icon-hover: #7d75c8; --color-beta-icon-strong: #fff; --color-beta-background: #f6f4fd; --color-beta-background-hover: #eae8fb; --color-beta-background-active: #e0def9; --color-beta-background-strong: #736bc4; --color-beta-background-strong-hover: #6860b0; --color-beta-background-strong-active: #5e57a0; --color-beta-border: #8d84e8; --color-beta-border-hover: #726ab9; --color-beta-border-active: #726ab9; --color-primary-text: #3f6ac4; --color-primary-text-hover: #4464bb; --color-primary-text-strong: #fff; --color-primary-icon: #3f6ac4; --color-primary-icon-strong: #fff; --color-primary-border: #3f6ac4; --color-primary-background-strong: #4573d2; --color-primary-background-strong-hover: #426dc6; --color-primary-background-strong-active: #3f66ba; --color-on-hold-text: #3f6ac4; --color-on-hold-text-hover: #4464bb; --color-on-hold-text-strong: #fff; --color-on-hold-icon: #3f6ac4; --color-on-hold-icon-strong: #fff; --color-on-hold-border: #3f6ac4; --color-on-hold-background-strong: #4573d2; --color-on-hold-background-strong-hover: #426dc6; --color-on-hold-background-strong-active: #3f66ba; --color-logo-icon: #ff584a; --color-logo-icon-strong: #fff; --color-logo-background-strong: #ff584a; --color-logo-background-strong-hover: #f13b27; --color-logo-background-strong-active: #e52e19; } @media print { :root { --color-text: #1e1f21; --color-text-rgb: 30, 31, 33; --color-text-foreground: #fff; --color-text-disabled: #afabac; --color-text-weak: #6d6e6f; --color-text-weak-hover: #1e1f21; --color-icon: #6d6e6f; --color-icon-rgb: 109, 110, 111; --color-icon-foreground: #fff; --color-icon-hover: #1e1f21; --color-icon-active: #1e1f21; --color-icon-disabled: #afabac; --color-icon-strong: #6d6e6f; --color-border: #edeae9; --color-border-rgb: 237, 234, 233; --color-border-hover: #afabac; --color-border-active: #6d6e6f; --color-border-strong: #cfcbcb; --color-background-weak: #fff; --color-background-weak-rgb: 255, 255, 255; --color-background-weak-hover-deprecated: #f9f8f8; --color-background-medium: #f9f8f8; --color-background-medium-rgb: 249, 248, 248; --color-background-hover: rgba(55, 23, 23, 0.03); --color-background-active: rgba(55, 23, 23, 0.05); --color-background-active-rgb: 55, 23, 23; --color-background-strong: #f5f3f3; --color-background-strong-rgb: 245, 243, 243; --color-shadow-small: rgba(109, 110, 111, 0.08); --color-shadow-medium: rgba(109, 110, 111, 0.1); --color-shadow-large: rgba(109, 110, 111, 0.12); --color-selected-text: #3f6ac4; --color-selected-text-hover: #4464bb; --color-selected-text-strong: #fff; --color-selected-icon: #3f6ac4; --color-selected-icon-rgb: 63, 106, 196; --color-selected-icon-strong: #fff; --color-selected-border: #3f6ac4; --color-selected-border-hover: #3f6ac4; --color-selected-border-active: #3f6ac4; --color-selected-background: #f1f2fc; --color-selected-background-hover: #e7e9fc; --color-selected-background-active: #dbe0fd; --color-selected-background-strong: #4573d2; --color-selected-background-strong-rgb: 69, 115, 210; --color-selected-background-strong-hover: #426dc6; --color-selected-background-strong-active: #3f66ba; --color-success-text: #0d7f56; --color-success-text-hover: #12714d; --color-success-text-strong: #fff; --color-success-icon: #58a182; --color-success-icon-hover: #368e6a; --color-success-icon-strong: #fff; --color-success-border: #8dc2ac; --color-success-border-hover: #58a182; --color-success-border-active: #58a182; --color-success-background: #e6f8f1; --color-success-background-hover: #e0f4ec; --color-success-background-active: #cce8dd; --color-success-background-strong: #58a182; --color-success-background-strong-hover: #519d7d; --color-success-background-strong-active: #3f9470; --color-warning-text: #986516; --color-warning-text-hover: #805411; --color-warning-text-strong: #1e1f21; --color-warning-icon: #f1bd6c; --color-warning-icon-rgb: 241, 189, 108; --color-warning-icon-hover: #b58e53; --color-warning-icon-strong: #1e1f21; --color-warning-border: #f1bd6c; --color-warning-border-hover: #b58e53; --color-warning-background: #fff6ee; --color-warning-background-hover: #ffecda; --color-warning-background-active: #fedcb6; --color-warning-background-strong: #f1bd6c; --color-warning-background-strong-hover: #e8b668; --color-warning-background-strong-active: #e2b266; --color-danger-text: #c92f54; --color-danger-text-hover: #a42b45; --color-danger-text-strong: #fff; --color-danger-icon: #de5f73; --color-danger-icon-hover: #d33e5d; --color-danger-icon-strong: #fff; --color-danger-border: #f1a2a9; --color-danger-border-hover: #e37281; --color-danger-border-active: #e37281; --color-danger-background: #fef0f1; --color-danger-background-hover: #fcdadc; --color-danger-background-active: #f9c6ca; --color-danger-background-strong: #d33e5d; --color-danger-background-strong-rgb: 211, 62, 93; --color-danger-background-strong-hover: #c92f54; --color-danger-background-strong-active: #a42b45; --color-drop-target-background: rgba(255, 255, 255, 0.95); --color-beta-text: #6e66b1; --color-beta-text-hover: #5e57a0; --color-beta-text-weak-deprecated: #a499ed; --color-beta-text-strong: #fff; --color-beta-icon: #8d84e8; --color-beta-icon-rgb: 141, 132, 232; --color-beta-icon-hover: #7d75c8; --color-beta-icon-strong: #fff; --color-beta-background: #f6f4fd; --color-beta-background-hover: #eae8fb; --color-beta-background-active: #e0def9; --color-beta-background-strong: #736bc4; --color-beta-background-strong-hover: #6860b0; --color-beta-background-strong-active: #5e57a0; --color-beta-border: #8d84e8; --color-beta-border-hover: #726ab9; --color-beta-border-active: #726ab9; --color-primary-text: #3f6ac4; --color-primary-text-hover: #4464bb; --color-primary-text-strong: #fff; --color-primary-icon: #3f6ac4; --color-primary-icon-strong: #fff; --color-primary-border: #3f6ac4; --color-primary-background-strong: #4573d2; --color-primary-background-strong-hover: #426dc6; --color-primary-background-strong-active: #3f66ba; --color-on-hold-text: #3f6ac4; --color-on-hold-text-hover: #4464bb; --color-on-hold-text-strong: #fff; --color-on-hold-icon: #3f6ac4; --color-on-hold-icon-strong: #fff; --color-on-hold-border: #3f6ac4; --color-on-hold-background-strong: #4573d2; --color-on-hold-background-strong-hover: #426dc6; --color-on-hold-background-strong-active: #3f66ba; --color-logo-icon: #ff584a; --color-logo-icon-strong: #fff; --color-logo-background-strong: #ff584a; --color-logo-background-strong-hover: #f13b27; --color-logo-background-strong-active: #e52e19; } } :root .DesignTokenThemeSelectors-theme--darkMode { --color-text: #f5f4f3; --color-text-rgb: 245, 244, 243; --color-text-foreground: #f5f4f3; --color-text-disabled: #6a696a; --color-text-weak: #a2a0a2; --color-text-weak-hover: #f5f4f3; --color-icon: #a2a0a2; --color-icon-rgb: 162, 160, 162; --color-icon-foreground: #f5f4f3; --color-icon-hover: #f5f4f3; --color-icon-active: #f5f4f3; --color-icon-disabled: #6a696a; --color-icon-strong: #f5f4f3; --color-border: #424244; --color-border-rgb: 66, 66, 68; --color-border-hover: #6a696a; --color-border-active: #a2a0a2; --color-border-strong: #565557; --color-background-weak: #1e1f21; --color-background-weak-rgb: 30, 31, 33; --color-background-weak-hover-deprecated: #2a2b2d; --color-background-medium: #252628; --color-background-medium-rgb: 37, 38, 40; --color-background-hover: rgba(255, 255, 255, 0.06); --color-background-active: rgba(255, 255, 255, 0.11); --color-background-active-rgb: 255, 255, 255; --color-background-strong: #2a2b2d; --color-background-strong-rgb: 42, 43, 45; --color-shadow-small: rgba(0, 0, 0, 0.24); --color-shadow-medium: rgba(0, 0, 0, 0.24); --color-shadow-large: rgba(0, 0, 0, 0.24); --color-selected-text: #689af3; --color-selected-text-hover: #5688e5; --color-selected-text-strong: #fff; --color-selected-icon: #4573d2; --color-selected-icon-rgb: 69, 115, 210; --color-selected-icon-strong: #fff; --color-selected-border: #4573d2; --color-selected-border-hover: #4573d2; --color-selected-border-active: #4573d2; --color-selected-background: #172237; --color-selected-background-hover: #1a2843; --color-selected-background-active: #2a3c68; --color-selected-background-strong: #4573d2; --color-selected-background-strong-rgb: 69, 115, 210; --color-selected-background-strong-hover: #426dc6; --color-selected-background-strong-active: #3f66ba; --color-success-text: #66a88b; --color-success-text-hover: #93c0aa; --color-success-text-strong: #fff; --color-success-icon: #5da283; --color-success-icon-hover: #74af93; --color-success-icon-strong: #fff; --color-success-border: #32695d; --color-success-border-hover: #4b8a73; --color-success-border-active: #4b8a73; --color-success-background: #1d3733; --color-success-background-hover: #21433d; --color-success-background-active: #244d46; --color-success-background-strong: #5da283; --color-success-background-strong-hover: #89baa2; --color-success-background-strong-active: #93c0aa; --color-warning-text: #f1bd6c; --color-warning-text-hover: #f6c682; --color-warning-text-strong: #1e1f21; --color-warning-icon: #f1bd6c; --color-warning-icon-rgb: 241, 189, 108; --color-warning-icon-hover: #f6c682; --color-warning-icon-strong: #1e1f21; --color-warning-border: #735c38; --color-warning-border-hover: #b89054; --color-warning-background: #3d3120; --color-warning-background-hover: #493b26; --color-warning-background-active: #54432b; --color-warning-background-strong: #f1bd6c; --color-warning-background-strong-hover: #e8b668; --color-warning-background-strong-active: #e2b266; --color-danger-text: #eb7586; --color-danger-text-hover: #ec8e98; --color-danger-text-strong: #fff; --color-danger-icon: #d1395a; --color-danger-icon-hover: #eb7586; --color-danger-icon-strong: #fff; --color-danger-border: #b12d4b; --color-danger-border-hover: #d1395a; --color-danger-border-active: #d1395a; --color-danger-background: #581e28; --color-danger-background-hover: #64202c; --color-danger-background-active: #6e2230; --color-danger-background-strong: #d1395a; --color-danger-background-strong-rgb: 209, 57, 90; --color-danger-background-strong-hover: #b12d4b; --color-danger-background-strong-active: #99203c; --color-drop-target-background: rgba(30, 31, 33, 0.95); --color-beta-text: #a499ed; --color-beta-text-hover: #b6adf1; --color-beta-text-weak-deprecated: #a499ed; --color-beta-text-strong: #fff; --color-beta-icon: #a499ed; --color-beta-icon-rgb: 164, 153, 237; --color-beta-icon-hover: #b6adf1; --color-beta-icon-strong: #fff; --color-beta-background: #332f50; --color-beta-background-hover: #3c3766; --color-beta-background-active: #443f74; --color-beta-background-strong: #736bc4; --color-beta-background-strong-hover: #6860b0; --color-beta-background-strong-active: #5e57a0; --color-beta-border: #726ab9; --color-beta-border-hover: #a499ed; --color-beta-border-active: #a499ed; --color-primary-text: #689af3; --color-primary-text-hover: #5688e5; --color-primary-text-strong: #fff; --color-primary-icon: #4573d2; --color-primary-icon-strong: #fff; --color-primary-border: #4573d2; --color-primary-background-strong: #4573d2; --color-primary-background-strong-hover: #426dc6; --color-primary-background-strong-active: #3f66ba; --color-on-hold-text: #689af3; --color-on-hold-text-hover: #5688e5; --color-on-hold-text-strong: #fff; --color-on-hold-icon: #4573d2; --color-on-hold-icon-strong: #fff; --color-on-hold-border: #4573d2; --color-on-hold-background-strong: #4573d2; --color-on-hold-background-strong-hover: #426dc6; --color-on-hold-background-strong-active: #3f66ba; --color-logo-icon: #ff584a; --color-logo-icon-strong: #fff; --color-logo-background-strong: #ff584a; --color-logo-background-strong-hover: #f13b27; --color-logo-background-strong-active: #e52e19; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode { --color-text: #f5f4f3; --color-text-rgb: 245, 244, 243; --color-text-foreground: #f5f4f3; --color-text-disabled: #6a696a; --color-text-weak: #a2a0a2; --color-text-weak-hover: #f5f4f3; --color-icon: #a2a0a2; --color-icon-rgb: 162, 160, 162; --color-icon-foreground: #f5f4f3; --color-icon-hover: #f5f4f3; --color-icon-active: #f5f4f3; --color-icon-disabled: #6a696a; --color-icon-strong: #f5f4f3; --color-border: #424244; --color-border-rgb: 66, 66, 68; --color-border-hover: #6a696a; --color-border-active: #a2a0a2; --color-border-strong: #565557; --color-background-weak: #1e1f21; --color-background-weak-rgb: 30, 31, 33; --color-background-weak-hover-deprecated: #2a2b2d; --color-background-medium: #252628; --color-background-medium-rgb: 37, 38, 40; --color-background-hover: rgba(255, 255, 255, 0.06); --color-background-active: rgba(255, 255, 255, 0.11); --color-background-active-rgb: 255, 255, 255; --color-background-strong: #2a2b2d; --color-background-strong-rgb: 42, 43, 45; --color-shadow-small: rgba(0, 0, 0, 0.24); --color-shadow-medium: rgba(0, 0, 0, 0.24); --color-shadow-large: rgba(0, 0, 0, 0.24); --color-selected-text: #689af3; --color-selected-text-hover: #5688e5; --color-selected-text-strong: #fff; --color-selected-icon: #4573d2; --color-selected-icon-rgb: 69, 115, 210; --color-selected-icon-strong: #fff; --color-selected-border: #4573d2; --color-selected-border-hover: #4573d2; --color-selected-border-active: #4573d2; --color-selected-background: #172237; --color-selected-background-hover: #1a2843; --color-selected-background-active: #2a3c68; --color-selected-background-strong: #4573d2; --color-selected-background-strong-rgb: 69, 115, 210; --color-selected-background-strong-hover: #426dc6; --color-selected-background-strong-active: #3f66ba; --color-success-text: #66a88b; --color-success-text-hover: #93c0aa; --color-success-text-strong: #fff; --color-success-icon: #5da283; --color-success-icon-hover: #74af93; --color-success-icon-strong: #fff; --color-success-border: #32695d; --color-success-border-hover: #4b8a73; --color-success-border-active: #4b8a73; --color-success-background: #1d3733; --color-success-background-hover: #21433d; --color-success-background-active: #244d46; --color-success-background-strong: #5da283; --color-success-background-strong-hover: #89baa2; --color-success-background-strong-active: #93c0aa; --color-warning-text: #f1bd6c; --color-warning-text-hover: #f6c682; --color-warning-text-strong: #1e1f21; --color-warning-icon: #f1bd6c; --color-warning-icon-rgb: 241, 189, 108; --color-warning-icon-hover: #f6c682; --color-warning-icon-strong: #1e1f21; --color-warning-border: #735c38; --color-warning-border-hover: #b89054; --color-warning-background: #3d3120; --color-warning-background-hover: #493b26; --color-warning-background-active: #54432b; --color-warning-background-strong: #f1bd6c; --color-warning-background-strong-hover: #e8b668; --color-warning-background-strong-active: #e2b266; --color-danger-text: #eb7586; --color-danger-text-hover: #ec8e98; --color-danger-text-strong: #fff; --color-danger-icon: #d1395a; --color-danger-icon-hover: #eb7586; --color-danger-icon-strong: #fff; --color-danger-border: #b12d4b; --color-danger-border-hover: #d1395a; --color-danger-border-active: #d1395a; --color-danger-background: #581e28; --color-danger-background-hover: #64202c; --color-danger-background-active: #6e2230; --color-danger-background-strong: #d1395a; --color-danger-background-strong-rgb: 209, 57, 90; --color-danger-background-strong-hover: #b12d4b; --color-danger-background-strong-active: #99203c; --color-drop-target-background: rgba(30, 31, 33, 0.95); --color-beta-text: #a499ed; --color-beta-text-hover: #b6adf1; --color-beta-text-weak-deprecated: #a499ed; --color-beta-text-strong: #fff; --color-beta-icon: #a499ed; --color-beta-icon-rgb: 164, 153, 237; --color-beta-icon-hover: #b6adf1; --color-beta-icon-strong: #fff; --color-beta-background: #332f50; --color-beta-background-hover: #3c3766; --color-beta-background-active: #443f74; --color-beta-background-strong: #736bc4; --color-beta-background-strong-hover: #6860b0; --color-beta-background-strong-active: #5e57a0; --color-beta-border: #726ab9; --color-beta-border-hover: #a499ed; --color-beta-border-active: #a499ed; --color-primary-text: #689af3; --color-primary-text-hover: #5688e5; --color-primary-text-strong: #fff; --color-primary-icon: #4573d2; --color-primary-icon-strong: #fff; --color-primary-border: #4573d2; --color-primary-background-strong: #4573d2; --color-primary-background-strong-hover: #426dc6; --color-primary-background-strong-active: #3f66ba; --color-on-hold-text: #689af3; --color-on-hold-text-hover: #5688e5; --color-on-hold-text-strong: #fff; --color-on-hold-icon: #4573d2; --color-on-hold-icon-strong: #fff; --color-on-hold-border: #4573d2; --color-on-hold-background-strong: #4573d2; --color-on-hold-background-strong-hover: #426dc6; --color-on-hold-background-strong-active: #3f66ba; --color-logo-icon: #ff584a; --color-logo-icon-strong: #fff; --color-logo-background-strong: #ff584a; --color-logo-background-strong-hover: #f13b27; --color-logo-background-strong-active: #e52e19; } } :root .DesignTokenThemeSelectors-theme--deuteranopiaMode, :root .DesignTokenThemeSelectors-theme--deuteranopiaMode .DesignTokenThemeOverrideRegionInternal--light { --color-success-text: #62d26f; --color-success-text-hover: #489951; --color-success-icon: #62d26f; --color-success-icon-hover: #489951; --color-success-border: #56b761; --color-success-border-hover: #56b761; --color-success-border-active: #56b761; --color-success-background: #ebf5eb; --color-success-background-hover: #d2f3d7; --color-success-background-active: #bfedc5; --color-warning-text: #d6ce38; --color-warning-text-hover: #918b46; --color-warning-icon: #d6ce38; --color-warning-icon-rgb: 214, 206, 56; --color-warning-icon-hover: #918b46; --color-warning-border: #ada654; --color-warning-border-hover: #ada654; --color-warning-background: #f6f5df; --color-warning-background-hover: #eeebc2; --color-warning-background-active: #e8e4ac; --color-danger-text: #aa411e; --color-danger-text-hover: #8b3518; --color-danger-icon: #aa411e; --color-danger-icon-hover: #8b3518; --color-danger-border: #cb4e23; --color-danger-border-hover: #cb4e23; --color-danger-border-active: #cb4e23; --color-danger-background: #ffe5dc; --color-danger-background-hover: #ffdacd; --color-danger-background-active: #fe9f7f; } :root .DesignTokenThemeSelectors-theme--darkMode.DesignTokenThemeSelectors-theme--deuteranopiaMode { --color-success-text: #50ab5b; --color-success-text-hover: #5dc669; --color-success-icon: #50ab5b; --color-success-icon-hover: #5dc669; --color-success-border: #2f6536; --color-success-border-hover: #2f6536; --color-success-border-active: #2f6536; --color-success-background: #122815; --color-success-background-hover: #163019; --color-success-background-active: #19361d; --color-warning-text: #a29b4e; --color-warning-text-hover: #bbb45b; --color-warning-icon: #a29b4e; --color-warning-icon-rgb: 162, 155, 78; --color-warning-icon-hover: #bbb45b; --color-warning-border: #5f5c2e; --color-warning-border-hover: #5f5c2e; --color-warning-background: #262412; --color-warning-background-hover: #2c2b16; --color-warning-background-active: #333119; --color-danger-text: #fd6b39; --color-danger-text-hover: #fe9572; --color-danger-icon: #fd6b39; --color-danger-icon-hover: #fe9572; --color-danger-border: #df5627; --color-danger-border-hover: #df5627; --color-danger-border-active: #df5627; --color-danger-background: #4a1c0d; --color-danger-background-hover: #55200f; --color-danger-background-active: #843217; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode.DesignTokenThemeSelectors-theme--deuteranopiaMode { --color-success-text: #50ab5b; --color-success-text-hover: #5dc669; --color-success-icon: #50ab5b; --color-success-icon-hover: #5dc669; --color-success-border: #2f6536; --color-success-border-hover: #2f6536; --color-success-border-active: #2f6536; --color-success-background: #122815; --color-success-background-hover: #163019; --color-success-background-active: #19361d; --color-warning-text: #a29b4e; --color-warning-text-hover: #bbb45b; --color-warning-icon: #a29b4e; --color-warning-icon-rgb: 162, 155, 78; --color-warning-icon-hover: #bbb45b; --color-warning-border: #5f5c2e; --color-warning-border-hover: #5f5c2e; --color-warning-background: #262412; --color-warning-background-hover: #2c2b16; --color-warning-background-active: #333119; --color-danger-text: #fd6b39; --color-danger-text-hover: #fe9572; --color-danger-icon: #fd6b39; --color-danger-icon-hover: #fe9572; --color-danger-border: #df5627; --color-danger-border-hover: #df5627; --color-danger-border-active: #df5627; --color-danger-background: #4a1c0d; --color-danger-background-hover: #55200f; --color-danger-background-active: #843217; } } :root .DesignTokenThemeSelectors-theme--maroon .DesignTokenThemeOverrideRegionInternal--light { --color-text: #1e1f21; --color-text-rgb: 30, 31, 33; --color-text-foreground: #fff; --color-text-disabled: #afabac; --color-text-weak: #6d6e6f; --color-text-weak-hover: #1e1f21; --color-icon: #6d6e6f; --color-icon-rgb: 109, 110, 111; --color-icon-foreground: #fff; --color-icon-hover: #1e1f21; --color-icon-active: #1e1f21; --color-icon-disabled: #afabac; --color-icon-strong: #6d6e6f; --color-border: #edeae9; --color-border-rgb: 237, 234, 233; --color-border-hover: #afabac; --color-border-active: #6d6e6f; --color-border-strong: #cfcbcb; --color-background-weak: #fff; --color-background-weak-rgb: 255, 255, 255; --color-background-weak-hover-deprecated: #f9f8f8; --color-background-medium: #f9f8f8; --color-background-medium-rgb: 249, 248, 248; --color-background-hover: rgba(55, 23, 23, 0.03); --color-background-active: rgba(55, 23, 23, 0.05); --color-background-active-rgb: 55, 23, 23; --color-background-strong: #f5f3f3; --color-background-strong-rgb: 245, 243, 243; --color-shadow-small: rgba(109, 110, 111, 0.08); --color-shadow-medium: rgba(109, 110, 111, 0.1); --color-shadow-large: rgba(109, 110, 111, 0.12); --color-selected-text: #3f6ac4; --color-selected-text-hover: #4464bb; --color-selected-text-strong: #fff; --color-selected-icon: #3f6ac4; --color-selected-icon-rgb: 63, 106, 196; --color-selected-icon-strong: #fff; --color-selected-border: #3f6ac4; --color-selected-border-hover: #3f6ac4; --color-selected-border-active: #3f6ac4; --color-selected-background: #f1f2fc; --color-selected-background-hover: #e7e9fc; --color-selected-background-active: #dbe0fd; --color-selected-background-strong: #4573d2; --color-selected-background-strong-rgb: 69, 115, 210; --color-selected-background-strong-hover: #426dc6; --color-selected-background-strong-active: #3f66ba; --color-success-text: #0d7f56; --color-success-text-hover: #12714d; --color-success-text-strong: #fff; --color-success-icon: #58a182; --color-success-icon-hover: #368e6a; --color-success-icon-strong: #fff; --color-success-border: #8dc2ac; --color-success-border-hover: #58a182; --color-success-border-active: #58a182; --color-success-background: #e6f8f1; --color-success-background-hover: #e0f4ec; --color-success-background-active: #cce8dd; --color-success-background-strong: #58a182; --color-success-background-strong-hover: #519d7d; --color-success-background-strong-active: #3f9470; --color-warning-text: #986516; --color-warning-text-hover: #805411; --color-warning-text-strong: #1e1f21; --color-warning-icon: #f1bd6c; --color-warning-icon-rgb: 241, 189, 108; --color-warning-icon-hover: #b58e53; --color-warning-icon-strong: #1e1f21; --color-warning-border: #f1bd6c; --color-warning-border-hover: #b58e53; --color-warning-background: #fff6ee; --color-warning-background-hover: #ffecda; --color-warning-background-active: #fedcb6; --color-warning-background-strong: #f1bd6c; --color-warning-background-strong-hover: #e8b668; --color-warning-background-strong-active: #e2b266; --color-danger-text: #c92f54; --color-danger-text-hover: #a42b45; --color-danger-text-strong: #fff; --color-danger-icon: #de5f73; --color-danger-icon-hover: #d33e5d; --color-danger-icon-strong: #fff; --color-danger-border: #f1a2a9; --color-danger-border-hover: #e37281; --color-danger-border-active: #e37281; --color-danger-background: #fef0f1; --color-danger-background-hover: #fcdadc; --color-danger-background-active: #f9c6ca; --color-danger-background-strong: #d33e5d; --color-danger-background-strong-rgb: 211, 62, 93; --color-danger-background-strong-hover: #c92f54; --color-danger-background-strong-active: #a42b45; --color-drop-target-background: rgba(255, 255, 255, 0.95); --color-beta-text: #6e66b1; --color-beta-text-hover: #5e57a0; --color-beta-text-weak-deprecated: #a499ed; --color-beta-text-strong: #fff; --color-beta-icon: #8d84e8; --color-beta-icon-rgb: 141, 132, 232; --color-beta-icon-hover: #7d75c8; --color-beta-icon-strong: #fff; --color-beta-background: #f6f4fd; --color-beta-background-hover: #eae8fb; --color-beta-background-active: #e0def9; --color-beta-background-strong: #736bc4; --color-beta-background-strong-hover: #6860b0; --color-beta-background-strong-active: #5e57a0; --color-beta-border: #8d84e8; --color-beta-border-hover: #726ab9; --color-beta-border-active: #726ab9; --color-primary-text: #3f6ac4; --color-primary-text-hover: #4464bb; --color-primary-text-strong: #fff; --color-primary-icon: #3f6ac4; --color-primary-icon-strong: #fff; --color-primary-border: #3f6ac4; --color-primary-background-strong: #4573d2; --color-primary-background-strong-hover: #426dc6; --color-primary-background-strong-active: #3f66ba; --color-on-hold-text: #3f6ac4; --color-on-hold-text-hover: #4464bb; --color-on-hold-text-strong: #fff; --color-on-hold-icon: #3f6ac4; --color-on-hold-icon-strong: #fff; --color-on-hold-border: #3f6ac4; --color-on-hold-background-strong: #4573d2; --color-on-hold-background-strong-hover: #426dc6; --color-on-hold-background-strong-active: #3f66ba; --color-logo-icon: #ff584a; --color-logo-icon-strong: #fff; --color-logo-background-strong: #ff584a; --color-logo-background-strong-hover: #f13b27; --color-logo-background-strong-active: #e52e19; } :root .DesignTokenThemeSelectors-theme--darkMode.DesignTokenThemeSelectors-theme--maroon { --color-text: #f8f4f6; --color-text-rgb: 248, 244, 246; --color-text-foreground: #f8f4f6; --color-text-disabled: #8f5977; --color-text-weak: #bb97a9; --color-text-weak-hover: #f8f4f6; --color-icon: #bb97a9; --color-icon-rgb: 187, 151, 169; --color-icon-foreground: #f8f4f6; --color-icon-hover: #f8f4f6; --color-icon-active: #f8f4f6; --color-icon-disabled: #8f5977; --color-icon-strong: #f8f4f6; --color-border: #5f2748; --color-border-rgb: 95, 39, 72; --color-border-hover: #8f5977; --color-border-active: #bb97a9; --color-border-strong: #5f2748; --color-background-weak: #36172a; --color-background-weak-rgb: 54, 23, 42; --color-background-weak-hover-deprecated: #461d36; --color-background-medium: #3e1930; --color-background-medium-rgb: 62, 25, 48; --color-background-strong: #461d36; --color-background-strong-rgb: 70, 29, 54; --color-drop-target-background: rgba(54, 23, 42, 0.95); --color-logo-icon-strong: #f8f4f6; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode.DesignTokenThemeSelectors-theme--maroon { --color-text: #f8f4f6; --color-text-rgb: 248, 244, 246; --color-text-foreground: #f8f4f6; --color-text-disabled: #8f5977; --color-text-weak: #bb97a9; --color-text-weak-hover: #f8f4f6; --color-icon: #bb97a9; --color-icon-rgb: 187, 151, 169; --color-icon-foreground: #f8f4f6; --color-icon-hover: #f8f4f6; --color-icon-active: #f8f4f6; --color-icon-disabled: #8f5977; --color-icon-strong: #f8f4f6; --color-border: #5f2748; --color-border-rgb: 95, 39, 72; --color-border-hover: #8f5977; --color-border-active: #bb97a9; --color-border-strong: #5f2748; --color-background-weak: #36172a; --color-background-weak-rgb: 54, 23, 42; --color-background-weak-hover-deprecated: #461d36; --color-background-medium: #3e1930; --color-background-medium-rgb: 62, 25, 48; --color-background-strong: #461d36; --color-background-strong-rgb: 70, 29, 54; --color-drop-target-background: rgba(54, 23, 42, 0.95); --color-logo-icon-strong: #f8f4f6; } } :root .DesignTokenThemeSelectors-theme--deuteranopiaMode.DesignTokenThemeSelectors-theme--maroon .DesignTokenThemeOverrideRegionInternal--light { --color-success-text: #62d26f; --color-success-text-hover: #489951; --color-success-icon: #62d26f; --color-success-icon-hover: #489951; --color-success-border: #56b761; --color-success-border-hover: #56b761; --color-success-border-active: #56b761; --color-success-background: #ebf5eb; --color-success-background-hover: #d2f3d7; --color-success-background-active: #bfedc5; --color-warning-text: #d6ce38; --color-warning-text-hover: #918b46; --color-warning-icon: #d6ce38; --color-warning-icon-rgb: 214, 206, 56; --color-warning-icon-hover: #918b46; --color-warning-border: #ada654; --color-warning-border-hover: #ada654; --color-warning-background: #f6f5df; --color-warning-background-hover: #eeebc2; --color-warning-background-active: #e8e4ac; --color-danger-text: #aa411e; --color-danger-text-hover: #8b3518; --color-danger-icon: #aa411e; --color-danger-icon-hover: #8b3518; --color-danger-border: #cb4e23; --color-danger-border-hover: #cb4e23; --color-danger-border-active: #cb4e23; --color-danger-background: #ffe5dc; --color-danger-background-hover: #ffdacd; --color-danger-background-active: #fe9f7f; } :root .DesignTokenThemeSelectors-theme--darkerWarning { --color-warning-icon: #f29a0d; --color-warning-icon-rgb: 242, 154, 13; } :root .DesignTokenThemeSelectors-theme--darkerWarning .DesignTokenThemeOverrideRegionInternal--light { --color-text: #1e1f21; --color-text-rgb: 30, 31, 33; --color-text-foreground: #fff; --color-text-disabled: #afabac; --color-text-weak: #6d6e6f; --color-text-weak-hover: #1e1f21; --color-icon: #6d6e6f; --color-icon-rgb: 109, 110, 111; --color-icon-foreground: #fff; --color-icon-hover: #1e1f21; --color-icon-active: #1e1f21; --color-icon-disabled: #afabac; --color-icon-strong: #6d6e6f; --color-border: #edeae9; --color-border-rgb: 237, 234, 233; --color-border-hover: #afabac; --color-border-active: #6d6e6f; --color-border-strong: #cfcbcb; --color-background-weak: #fff; --color-background-weak-rgb: 255, 255, 255; --color-background-weak-hover-deprecated: #f9f8f8; --color-background-medium: #f9f8f8; --color-background-medium-rgb: 249, 248, 248; --color-background-hover: rgba(55, 23, 23, 0.03); --color-background-active: rgba(55, 23, 23, 0.05); --color-background-active-rgb: 55, 23, 23; --color-background-strong: #f5f3f3; --color-background-strong-rgb: 245, 243, 243; --color-shadow-small: rgba(109, 110, 111, 0.08); --color-shadow-medium: rgba(109, 110, 111, 0.1); --color-shadow-large: rgba(109, 110, 111, 0.12); --color-selected-text: #3f6ac4; --color-selected-text-hover: #4464bb; --color-selected-text-strong: #fff; --color-selected-icon: #3f6ac4; --color-selected-icon-rgb: 63, 106, 196; --color-selected-icon-strong: #fff; --color-selected-border: #3f6ac4; --color-selected-border-hover: #3f6ac4; --color-selected-border-active: #3f6ac4; --color-selected-background: #f1f2fc; --color-selected-background-hover: #e7e9fc; --color-selected-background-active: #dbe0fd; --color-selected-background-strong: #4573d2; --color-selected-background-strong-rgb: 69, 115, 210; --color-selected-background-strong-hover: #426dc6; --color-selected-background-strong-active: #3f66ba; --color-success-text: #0d7f56; --color-success-text-hover: #12714d; --color-success-text-strong: #fff; --color-success-icon: #58a182; --color-success-icon-hover: #368e6a; --color-success-icon-strong: #fff; --color-success-border: #8dc2ac; --color-success-border-hover: #58a182; --color-success-border-active: #58a182; --color-success-background: #e6f8f1; --color-success-background-hover: #e0f4ec; --color-success-background-active: #cce8dd; --color-success-background-strong: #58a182; --color-success-background-strong-hover: #519d7d; --color-success-background-strong-active: #3f9470; --color-warning-text: #986516; --color-warning-text-hover: #805411; --color-warning-text-strong: #1e1f21; --color-warning-icon: #f1bd6c; --color-warning-icon-rgb: 241, 189, 108; --color-warning-icon-hover: #b58e53; --color-warning-icon-strong: #1e1f21; --color-warning-border: #f1bd6c; --color-warning-border-hover: #b58e53; --color-warning-background: #fff6ee; --color-warning-background-hover: #ffecda; --color-warning-background-active: #fedcb6; --color-warning-background-strong: #f1bd6c; --color-warning-background-strong-hover: #e8b668; --color-warning-background-strong-active: #e2b266; --color-danger-text: #c92f54; --color-danger-text-hover: #a42b45; --color-danger-text-strong: #fff; --color-danger-icon: #de5f73; --color-danger-icon-hover: #d33e5d; --color-danger-icon-strong: #fff; --color-danger-border: #f1a2a9; --color-danger-border-hover: #e37281; --color-danger-border-active: #e37281; --color-danger-background: #fef0f1; --color-danger-background-hover: #fcdadc; --color-danger-background-active: #f9c6ca; --color-danger-background-strong: #d33e5d; --color-danger-background-strong-rgb: 211, 62, 93; --color-danger-background-strong-hover: #c92f54; --color-danger-background-strong-active: #a42b45; --color-drop-target-background: rgba(255, 255, 255, 0.95); --color-beta-text: #6e66b1; --color-beta-text-hover: #5e57a0; --color-beta-text-weak-deprecated: #a499ed; --color-beta-text-strong: #fff; --color-beta-icon: #8d84e8; --color-beta-icon-rgb: 141, 132, 232; --color-beta-icon-hover: #7d75c8; --color-beta-icon-strong: #fff; --color-beta-background: #f6f4fd; --color-beta-background-hover: #eae8fb; --color-beta-background-active: #e0def9; --color-beta-background-strong: #736bc4; --color-beta-background-strong-hover: #6860b0; --color-beta-background-strong-active: #5e57a0; --color-beta-border: #8d84e8; --color-beta-border-hover: #726ab9; --color-beta-border-active: #726ab9; --color-primary-text: #3f6ac4; --color-primary-text-hover: #4464bb; --color-primary-text-strong: #fff; --color-primary-icon: #3f6ac4; --color-primary-icon-strong: #fff; --color-primary-border: #3f6ac4; --color-primary-background-strong: #4573d2; --color-primary-background-strong-hover: #426dc6; --color-primary-background-strong-active: #3f66ba; --color-on-hold-text: #3f6ac4; --color-on-hold-text-hover: #4464bb; --color-on-hold-text-strong: #fff; --color-on-hold-icon: #3f6ac4; --color-on-hold-icon-strong: #fff; --color-on-hold-border: #3f6ac4; --color-on-hold-background-strong: #4573d2; --color-on-hold-background-strong-hover: #426dc6; --color-on-hold-background-strong-active: #3f66ba; --color-logo-icon: #ff584a; --color-logo-icon-strong: #fff; --color-logo-background-strong: #ff584a; --color-logo-background-strong-hover: #f13b27; --color-logo-background-strong-active: #e52e19; } :root .DesignTokenThemeSelectors-theme--darkMode.DesignTokenThemeSelectors-theme--darkerWarning { --color-warning-icon: #f1bd6c; --color-warning-icon-rgb: 241, 189, 108; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode.DesignTokenThemeSelectors-theme--darkerWarning { --color-warning-icon: #f1bd6c; --color-warning-icon-rgb: 241, 189, 108; } } :root .DesignTokenThemeSelectors-theme--deuteranopiaMode.DesignTokenThemeSelectors-theme--darkerWarning { --color-warning-icon: #d6ce38; --color-warning-icon-rgb: 214, 206, 56; } :root .DesignTokenThemeSelectors-theme--deuteranopiaMode.DesignTokenThemeSelectors-theme--darkerWarning .DesignTokenThemeOverrideRegionInternal--light { --color-success-text: #62d26f; --color-success-text-hover: #489951; --color-success-icon: #62d26f; --color-success-icon-hover: #489951; --color-success-border: #56b761; --color-success-border-hover: #56b761; --color-success-border-active: #56b761; --color-success-background: #ebf5eb; --color-success-background-hover: #d2f3d7; --color-success-background-active: #bfedc5; --color-warning-text: #d6ce38; --color-warning-text-hover: #918b46; --color-warning-icon: #d6ce38; --color-warning-icon-rgb: 214, 206, 56; --color-warning-icon-hover: #918b46; --color-warning-border: #ada654; --color-warning-border-hover: #ada654; --color-warning-background: #f6f5df; --color-warning-background-hover: #eeebc2; --color-warning-background-active: #e8e4ac; --color-danger-text: #aa411e; --color-danger-text-hover: #8b3518; --color-danger-icon: #aa411e; --color-danger-icon-hover: #8b3518; --color-danger-border: #cb4e23; --color-danger-border-hover: #cb4e23; --color-danger-border-active: #cb4e23; --color-danger-background: #ffe5dc; --color-danger-background-hover: #ffdacd; --color-danger-background-active: #fe9f7f; } :root .DesignTokenThemeSelectors-theme--darkMode.DesignTokenThemeSelectors-theme--deuteranopiaMode.DesignTokenThemeSelectors-theme--darkerWarning { --color-warning-icon: #a29b4e; --color-warning-icon-rgb: 162, 155, 78; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode.DesignTokenThemeSelectors-theme--deuteranopiaMode.DesignTokenThemeSelectors-theme--darkerWarning { --color-warning-icon: #a29b4e; --color-warning-icon-rgb: 162, 155, 78; } } :root, :root .DesignTokenThemeOverrideRegionInternal--light { --color-upsell-text: #986516; --color-upsell-text-hover: #805411; --color-upsell-text-strong: #1e1f21; --color-upsell-icon: #f1bd6c; --color-upsell-icon-hover: #b58e53; --color-upsell-icon-strong: #1e1f21; --color-upsell-background: #fff6ee; --color-upsell-background-hover: #ffecda; --color-upsell-background-active: #fedcb6; --color-upsell-background-weak-hover: #fff6ee; --color-upsell-background-weak-active: #ffecda; --color-upsell-background-strong: #f1bd6c; --color-upsell-background-strong-hover: #e8b668; --color-upsell-background-strong-active: #e2b266; --color-upsell-border: #f1bd6c; } @media print { :root { --color-upsell-text: #986516; --color-upsell-text-hover: #805411; --color-upsell-text-strong: #1e1f21; --color-upsell-icon: #f1bd6c; --color-upsell-icon-hover: #b58e53; --color-upsell-icon-strong: #1e1f21; --color-upsell-background: #fff6ee; --color-upsell-background-hover: #ffecda; --color-upsell-background-active: #fedcb6; --color-upsell-background-weak-hover: #fff6ee; --color-upsell-background-weak-active: #ffecda; --color-upsell-background-strong: #f1bd6c; --color-upsell-background-strong-hover: #e8b668; --color-upsell-background-strong-active: #e2b266; --color-upsell-border: #f1bd6c; } } :root .DesignTokenThemeSelectors-theme--darkMode { --color-upsell-text: #f1bd6c; --color-upsell-text-hover: #f6c682; --color-upsell-text-strong: #1e1f21; --color-upsell-icon: #f1bd6c; --color-upsell-icon-hover: #f6c682; --color-upsell-icon-strong: #1e1f21; --color-upsell-background: #3d3120; --color-upsell-background-hover: #493b26; --color-upsell-background-active: #54432b; --color-upsell-background-weak-hover: #3d3120; --color-upsell-background-weak-active: #493b26; --color-upsell-background-strong: #f1bd6c; --color-upsell-background-strong-hover: #e8b668; --color-upsell-background-strong-active: #e2b266; --color-upsell-border: #735c38; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode { --color-upsell-text: #f1bd6c; --color-upsell-text-hover: #f6c682; --color-upsell-text-strong: #1e1f21; --color-upsell-icon: #f1bd6c; --color-upsell-icon-hover: #f6c682; --color-upsell-icon-strong: #1e1f21; --color-upsell-background: #3d3120; --color-upsell-background-hover: #493b26; --color-upsell-background-active: #54432b; --color-upsell-background-weak-hover: #3d3120; --color-upsell-background-weak-active: #493b26; --color-upsell-background-strong: #f1bd6c; --color-upsell-background-strong-hover: #e8b668; --color-upsell-background-strong-active: #e2b266; --color-upsell-border: #735c38; } } :root .DesignTokenThemeSelectors-theme--deuteranopiaMode, :root .DesignTokenThemeSelectors-theme--deuteranopiaMode .DesignTokenThemeOverrideRegionInternal--light { --color-upsell-text: #d6ce38; --color-upsell-text-hover: #d6ce38; --color-upsell-icon: #d6ce38; --color-upsell-icon-hover: #d6ce38; } :root .DesignTokenThemeSelectors-theme--darkMode.DesignTokenThemeSelectors-theme--deuteranopiaMode { --color-upsell-text: #a29b4e; --color-upsell-text-hover: #a29b4e; --color-upsell-icon: #a29b4e; --color-upsell-icon-hover: #a29b4e; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode.DesignTokenThemeSelectors-theme--deuteranopiaMode { --color-upsell-text: #a29b4e; --color-upsell-text-hover: #a29b4e; --color-upsell-icon: #a29b4e; --color-upsell-icon-hover: #a29b4e; } } :root .DesignTokenThemeSelectors-theme--blueUpsells { --color-upsell-text: #3f6ac4; --color-upsell-text-hover: #4464bb; --color-upsell-text-strong: #fff; --color-upsell-icon: #3f6ac4; --color-upsell-icon-hover: #3f6ac4; --color-upsell-icon-strong: #fff; --color-upsell-background: #f1f2fc; --color-upsell-background-hover: #e7e9fc; --color-upsell-background-active: #dbe0fd; --color-upsell-background-weak-hover: #e7e9fc; --color-upsell-background-weak-active: #dbe0fd; --color-upsell-background-strong: #4573d2; --color-upsell-background-strong-hover: #426dc6; --color-upsell-background-strong-active: #3f66ba; --color-upsell-border: #3f6ac4; } :root .DesignTokenThemeSelectors-theme--blueUpsells .DesignTokenThemeOverrideRegionInternal--light { --color-upsell-text: #986516; --color-upsell-text-hover: #805411; --color-upsell-text-strong: #1e1f21; --color-upsell-icon: #f1bd6c; --color-upsell-icon-hover: #b58e53; --color-upsell-icon-strong: #1e1f21; --color-upsell-background: #fff6ee; --color-upsell-background-hover: #ffecda; --color-upsell-background-active: #fedcb6; --color-upsell-background-weak-hover: #fff6ee; --color-upsell-background-weak-active: #ffecda; --color-upsell-background-strong: #f1bd6c; --color-upsell-background-strong-hover: #e8b668; --color-upsell-background-strong-active: #e2b266; --color-upsell-border: #f1bd6c; } :root .DesignTokenThemeSelectors-theme--darkMode.DesignTokenThemeSelectors-theme--blueUpsells { --color-upsell-text: #689af3; --color-upsell-text-hover: #5688e5; --color-upsell-text-strong: #fff; --color-upsell-icon: #4573d2; --color-upsell-icon-hover: #4573d2; --color-upsell-icon-strong: #fff; --color-upsell-background: #172237; --color-upsell-background-hover: #1a2843; --color-upsell-background-active: #2a3c68; --color-upsell-background-weak-hover: #1a2843; --color-upsell-background-weak-active: #2a3c68; --color-upsell-background-strong: #4573d2; --color-upsell-background-strong-hover: #426dc6; --color-upsell-background-strong-active: #3f66ba; --color-upsell-border: #4573d2; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode.DesignTokenThemeSelectors-theme--blueUpsells { --color-upsell-text: #689af3; --color-upsell-text-hover: #5688e5; --color-upsell-text-strong: #fff; --color-upsell-icon: #4573d2; --color-upsell-icon-hover: #4573d2; --color-upsell-icon-strong: #fff; --color-upsell-background: #172237; --color-upsell-background-hover: #1a2843; --color-upsell-background-active: #2a3c68; --color-upsell-background-weak-hover: #1a2843; --color-upsell-background-weak-active: #2a3c68; --color-upsell-background-strong: #4573d2; --color-upsell-background-strong-hover: #426dc6; --color-upsell-background-strong-active: #3f66ba; --color-upsell-border: #4573d2; } } :root .DesignTokenThemeSelectors-theme--deuteranopiaMode.DesignTokenThemeSelectors-theme--blueUpsells .DesignTokenThemeOverrideRegionInternal--light { --color-upsell-text: #d6ce38; --color-upsell-text-hover: #d6ce38; --color-upsell-icon: #d6ce38; --color-upsell-icon-hover: #d6ce38; } :root .DesignTokenThemeSelectors-theme--coralUpsells { --color-upsell-text: #1e1f21; --color-upsell-text-hover: #afabac; --color-upsell-text-strong: #1e1f21; --color-upsell-icon: #ff584a; --color-upsell-icon-hover: #1e1f21; --color-upsell-icon-strong: #1e1f21; --color-upsell-background: #f9f8f8; --color-upsell-background-hover: rgba(55, 23, 23, 0.03); --color-upsell-background-active: #f5f3f3; --color-upsell-background-weak-hover: #f9f8f8; --color-upsell-background-weak-active: rgba(55, 23, 23, 0.03); --color-upsell-background-strong: #ff584a; --color-upsell-background-strong-hover: #e64c40; --color-upsell-background-strong-active: #e3372a; --color-upsell-border: #ff584a; } :root .DesignTokenThemeSelectors-theme--coralUpsells .DesignTokenThemeOverrideRegionInternal--light { --color-upsell-text: #986516; --color-upsell-text-hover: #805411; --color-upsell-text-strong: #1e1f21; --color-upsell-icon: #f1bd6c; --color-upsell-icon-hover: #b58e53; --color-upsell-icon-strong: #1e1f21; --color-upsell-background: #fff6ee; --color-upsell-background-hover: #ffecda; --color-upsell-background-active: #fedcb6; --color-upsell-background-weak-hover: #fff6ee; --color-upsell-background-weak-active: #ffecda; --color-upsell-background-strong: #f1bd6c; --color-upsell-background-strong-hover: #e8b668; --color-upsell-background-strong-active: #e2b266; --color-upsell-border: #f1bd6c; } :root .DesignTokenThemeSelectors-theme--darkMode.DesignTokenThemeSelectors-theme--coralUpsells { --color-upsell-text: #f5f4f3; --color-upsell-text-hover: #f5f4f3; --color-upsell-text-strong: #f5f4f3; --color-upsell-icon: #ff584a; --color-upsell-icon-hover: #f5f4f3; --color-upsell-icon-strong: #1e1f21; --color-upsell-background: #424244; --color-upsell-background-hover: #2c2c2e; --color-upsell-background-active: #373839; --color-upsell-background-weak-hover: #252628; --color-upsell-background-weak-active: #2c2c2e; --color-upsell-background-strong: #ff584a; --color-upsell-background-strong-hover: #e64c40; --color-upsell-background-strong-active: #e3372a; --color-upsell-border: #ff584a; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode.DesignTokenThemeSelectors-theme--coralUpsells { --color-upsell-text: #f5f4f3; --color-upsell-text-hover: #f5f4f3; --color-upsell-text-strong: #f5f4f3; --color-upsell-icon: #ff584a; --color-upsell-icon-hover: #f5f4f3; --color-upsell-icon-strong: #1e1f21; --color-upsell-background: #424244; --color-upsell-background-hover: #2c2c2e; --color-upsell-background-active: #373839; --color-upsell-background-weak-hover: #252628; --color-upsell-background-weak-active: #2c2c2e; --color-upsell-background-strong: #ff584a; --color-upsell-background-strong-hover: #e64c40; --color-upsell-background-strong-active: #e3372a; --color-upsell-border: #ff584a; } } :root .DesignTokenThemeSelectors-theme--deuteranopiaMode.DesignTokenThemeSelectors-theme--coralUpsells .DesignTokenThemeOverrideRegionInternal--light { --color-upsell-text: #d6ce38; --color-upsell-text-hover: #d6ce38; --color-upsell-icon: #d6ce38; --color-upsell-icon-hover: #d6ce38; } :root .DesignTokenThemeSelectors-theme--purpleUpsells { --color-upsell-text: #1e1f21; --color-upsell-text-hover: #afabac; --color-upsell-text-strong: #fff; --color-upsell-icon: #6a0085; --color-upsell-icon-hover: #570c6a; --color-upsell-icon-strong: #1e1f21; --color-upsell-background: #ffeaff; --color-upsell-background-hover: rgba(55, 23, 23, 0.03); --color-upsell-background-active: #f5f3f3; --color-upsell-background-weak-hover: #f9f8f8; --color-upsell-background-weak-active: rgba(55, 23, 23, 0.03); --color-upsell-background-strong: #6a0085; --color-upsell-background-strong-hover: #570c6a; --color-upsell-background-strong-active: #410e4e; --color-upsell-border: #6a0085; } :root .DesignTokenThemeSelectors-theme--purpleUpsells .DesignTokenThemeOverrideRegionInternal--light { --color-upsell-text: #986516; --color-upsell-text-hover: #805411; --color-upsell-text-strong: #1e1f21; --color-upsell-icon: #f1bd6c; --color-upsell-icon-hover: #b58e53; --color-upsell-icon-strong: #1e1f21; --color-upsell-background: #fff6ee; --color-upsell-background-hover: #ffecda; --color-upsell-background-active: #fedcb6; --color-upsell-background-weak-hover: #fff6ee; --color-upsell-background-weak-active: #ffecda; --color-upsell-background-strong: #f1bd6c; --color-upsell-background-strong-hover: #e8b668; --color-upsell-background-strong-active: #e2b266; --color-upsell-border: #f1bd6c; } :root .DesignTokenThemeSelectors-theme--darkMode.DesignTokenThemeSelectors-theme--purpleUpsells { --color-upsell-text: #f5f4f3; --color-upsell-text-hover: #f5f4f3; --color-upsell-text-strong: #f5f4f3; --color-upsell-icon: #6a0085; --color-upsell-icon-hover: #570c6a; --color-upsell-icon-strong: #1e1f21; --color-upsell-background: #424244; --color-upsell-background-hover: #2c2c2e; --color-upsell-background-active: #373839; --color-upsell-background-weak-hover: #252628; --color-upsell-background-weak-active: #2c2c2e; --color-upsell-background-strong: #6a0085; --color-upsell-background-strong-hover: #570c6a; --color-upsell-background-strong-active: #410e4e; --color-upsell-border: #6a0085; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode.DesignTokenThemeSelectors-theme--purpleUpsells { --color-upsell-text: #f5f4f3; --color-upsell-text-hover: #f5f4f3; --color-upsell-text-strong: #f5f4f3; --color-upsell-icon: #6a0085; --color-upsell-icon-hover: #570c6a; --color-upsell-icon-strong: #1e1f21; --color-upsell-background: #424244; --color-upsell-background-hover: #2c2c2e; --color-upsell-background-active: #373839; --color-upsell-background-weak-hover: #252628; --color-upsell-background-weak-active: #2c2c2e; --color-upsell-background-strong: #6a0085; --color-upsell-background-strong-hover: #570c6a; --color-upsell-background-strong-active: #410e4e; --color-upsell-border: #6a0085; } } :root .DesignTokenThemeSelectors-theme--deuteranopiaMode.DesignTokenThemeSelectors-theme--purpleUpsells .DesignTokenThemeOverrideRegionInternal--light { --color-upsell-text: #d6ce38; --color-upsell-text-hover: #d6ce38; --color-upsell-icon: #d6ce38; --color-upsell-icon-hover: #d6ce38; } .DesignTokenThemeSelectors-theme--sunlight .HighlightSol.HighlightSol--core { outline: 2px solid gold !important; } .DesignTokenThemeSelectors-theme--blacklight .HighlightSol.HighlightSol--deprecated { outline: 2px solid red !important; } .DesignTokenThemeSelectors-theme--purplelight .HighlightSol.HighlightSol--buildingBlock:not(.HighlightSol--core) { outline: 2px solid #639 !important; } .LinkBase:focus-visible { outline: 2px solid var(--color-a11y-selected-border-active); } .LinkBase:focus:not(:focus-visible) { outline: none; } .DangerLink { cursor: pointer; color: var(--color-danger-text); fill: var(--color-danger-text); text-decoration-style: solid; } .DangerLink:focus-visible { outline: 2px solid var(--color-a11y-selected-border-active); } .DangerLink:focus:not(:focus-visible) { outline: none; } .DangerLink:active, .DangerLink:hover { color: var(--color-danger-text-hover); fill: var(--color-danger-text-hover); text-decoration: underline; } .DangerLink-alwaysUnderline { -webkit-text-decoration-style: "solid"; text-decoration-style: "solid"; text-decoration: underline; } .PrimaryLink { cursor: pointer; color: var(--color-primary-text); fill: var(--color-primary-text); text-decoration-style: solid; } .PrimaryLink:focus-visible { outline: 2px solid var(--color-a11y-selected-border-active); } .PrimaryLink:focus:not(:focus-visible) { outline: none; } .PrimaryLink:active, .PrimaryLink:hover { color: var(--color-primary-text-hover); fill: var(--color-primary-text-hover); text-decoration: underline; } .PrimaryLink--alwaysUnderline { -webkit-text-decoration-style: "solid"; text-decoration-style: "solid"; text-decoration: underline; } .DeprecatedAnchor { cursor: pointer; color: var(--color-primary-text); fill: var(--color-primary-text); text-decoration-style: solid; } .DeprecatedAnchor:focus-visible { outline: 2px solid var(--color-a11y-selected-border-active); } .DeprecatedAnchor:focus:not(:focus-visible) { outline: none; } .DeprecatedAnchor:active, .DeprecatedAnchor:hover { color: var(--color-primary-text-hover); fill: var(--color-primary-text-hover); text-decoration: underline; } .HiddenLink { cursor: pointer; color: inherit; fill: inherit; -webkit-text-decoration-style: none; text-decoration-style: none; } .HiddenLink:focus-visible { outline: 2px solid var(--color-a11y-selected-border-active); } .HiddenLink:focus:not(:focus-visible) { outline: none; } .HiddenLink:active, .HiddenLink:hover { color: var(--color-primary-text-hover); fill: var(--color-primary-text-hover); text-decoration: underline; } .HiddenNavigationLink { cursor: pointer; color: inherit; fill: inherit; -webkit-text-decoration-style: none; text-decoration-style: none; outline-offset: -2px; } .HiddenNavigationLink:focus-visible { outline: 2px solid var(--color-a11y-selected-border-active); } .HiddenNavigationLink:focus:not(:focus-visible) { outline: none; } .HiddenNavigationLink:active, .HiddenNavigationLink:hover { color: var(--color-primary-text-hover); fill: var(--color-primary-text-hover); text-decoration: underline; } .InverseLink { cursor: pointer; color: #fff; fill: #fff; text-decoration: underline; } .InverseLink:focus-visible { outline: 2px solid var(--color-a11y-selected-border-active); } .InverseLink:focus:not(:focus-visible) { outline: none; } .InverseLink:active { color: rgba(255, 255, 255, 0.8); fill: rgba(255, 255, 255, 0.8); text-decoration: underline; } .InverseLink:hover { color: rgba(255, 255, 255, 0.85); fill: rgba(255, 255, 255, 0.85); text-decoration: underline; } .InverseNavigationLink { cursor: pointer; color: #fff; fill: #fff; text-decoration: underline; } .InverseNavigationLink:focus-visible { outline: 2px solid var(--color-a11y-selected-border-active); } .InverseNavigationLink:focus:not(:focus-visible) { outline: none; } .InverseNavigationLink:active { color: rgba(255, 255, 255, 0.8); fill: rgba(255, 255, 255, 0.8); text-decoration: underline; } .InverseNavigationLink:hover { color: rgba(255, 255, 255, 0.85); fill: rgba(255, 255, 255, 0.85); text-decoration: underline; } .PrimaryNavigationLink { cursor: pointer; color: var(--color-primary-text); fill: var(--color-primary-text); text-decoration-style: solid; } .PrimaryNavigationLink:focus-visible { outline: 2px solid var(--color-a11y-selected-border-active); } .PrimaryNavigationLink:focus:not(:focus-visible) { outline: none; } .PrimaryNavigationLink:active, .PrimaryNavigationLink:hover { color: var(--color-primary-text-hover); fill: var(--color-primary-text-hover); text-decoration: underline; } .PrimaryNavigationLink--alwaysUnderline { -webkit-text-decoration-style: "solid"; text-decoration-style: "solid"; text-decoration: underline; } .SecondaryLink { cursor: pointer; color: var(--color-text-weak); fill: var(--color-text-weak); text-decoration: underline; } .SecondaryLink:focus-visible { outline: 2px solid var(--color-a11y-selected-border-active); } .SecondaryLink:focus:not(:focus-visible) { outline: none; } .SecondaryLink:active { color: var(--color-text-weak-hover); fill: var(--color-text-weak-hover); text-decoration: underline; } .SecondaryLink:hover { color: var(--color-text); fill: var(--color-text); text-decoration: underline; } .SecondaryNavigationLink { cursor: pointer; color: var(--color-text-weak); fill: var(--color-text-weak); text-decoration: underline; } .SecondaryNavigationLink:focus-visible { outline: 2px solid var(--color-a11y-selected-border-active); } .SecondaryNavigationLink:focus:not(:focus-visible) { outline: none; } .SecondaryNavigationLink:active { color: var(--color-text-weak-hover); fill: var(--color-text-weak-hover); text-decoration: underline; } .SecondaryNavigationLink:hover { color: var(--color-text); fill: var(--color-text); text-decoration: underline; } .UpsellLink { cursor: pointer; color: var(--color-upsell-text); fill: var(--color-upsell-text); text-decoration: underline; } .UpsellLink:focus-visible { outline: 2px solid var(--color-a11y-selected-border-active); } .UpsellLink:focus:not(:focus-visible) { outline: none; } .UpsellLink:active, .UpsellLink:hover { color: var(--color-upsell-text-hover); fill: var(--color-upsell-text-hover); text-decoration: underline; } :root, :root .DesignTokenThemeOverrideRegionInternal--light { --color-code-text: #986516; } @media print { :root { --color-code-text: #986516; } } :root .DesignTokenThemeSelectors-theme--darkMode { --color-code-text: #f1bd6c; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode { --color-code-text: #f1bd6c; } } :root, :root .DesignTokenThemeOverrideRegionInternal--light { --color-navigation-search-background: #3d3e40; --color-navigation-search-background-strong: #565557; --color-navigation-topbar-background: #2e2e30; --color-navigation-desktop-tabs-background: #1e1f21; --color-navigation-sidebar-icon-background: #424244; --color-navigation-sidebar-chevron-background: #565557; --color-navigation-success-text: #66a88b; --color-navigation-upsell-background-extra: #726ab9; --color-navigation-upsell-background-hover-extra: #a499ed; --color-navigation-upsell-background-active-extra: #a499ed; --color-navigation-upsell-text-extra: #f5f4f3; --color-navigation-warning-text: #f1bd6c; --color-navigation-danger-text: #eb7586; --color-navigation-text: #f5f4f3; --color-navigation-text-weak: #a2a0a2; --color-navigation-text-weak-hover: #f5f4f3; --color-navigation-icon: #a2a0a2; --color-navigation-icon-hover: #f5f4f3; --color-navigation-border: #424244; --color-navigation-border-hover: #6a696a; --color-navigation-border-active: #a2a0a2; --color-navigation-border-focused: #fff; --color-navigation-border-strong: #6a696a; --color-navigation-background-hover: rgba(255, 255, 255, 0.06); --color-navigation-background-active: rgba(255, 255, 255, 0.11); --color-navigation-background-active-rgb: 255, 255, 255; --color-navigation-background-weak: #2e2e30; --color-navigation-background-medium: #2e2e30; --color-navigation-background-strong: #424244; --color-navigation-body-background: #f9f8f8; --color-navigation-body-background-rgb: 249, 248, 248; --color-navigation-body-background-strong: #f5f3f3; --color-navigation-body-background-strong-rgb: 245, 243, 243; --color-navigation-omnibutton-background: #3d3e40; --color-navigation-omnibutton-background-hover: #64202c; --color-navigation-omnibutton-background-active: #6e2230; --color-navigation-workflow-builder-background-dots: #cfcbcb; --color-navigation-portfolio-icon-overlay: rgba(255, 255, 255, 0.4); --color-navigation-filters-task-icon: #58a182; --color-navigation-filters-project-icon: #3f6ac4; --color-navigation-filters-contacts-icon: #8d84e8; --color-navigation-filters-contacts-icon-rgb: 141, 132, 232; --color-navigation-filters-extras-icon: #ff584a; --color-navigation-invite-button-background: #2a2b2d; --color-navigation-invite-button-background-hover: rgba(255, 255, 255, 0.06); --color-navigation-invite-button-background-active: rgba(255, 255, 255, 0.11); --color-navigation-invite-button-border: #565557; --color-navigation-invite-button-border-hover: #6a696a; --color-navigation-invite-button-border-active: #a2a0a2; --color-navigation-help-button-background: transparent; --color-navigation-help-button-background-hover: rgba(255, 255, 255, 0.06); --color-navigation-help-button-background-active: rgba(255, 255, 255, 0.11); } @media print { :root { --color-navigation-search-background: #3d3e40; --color-navigation-search-background-strong: #565557; --color-navigation-topbar-background: #2e2e30; --color-navigation-desktop-tabs-background: #1e1f21; --color-navigation-sidebar-icon-background: #424244; --color-navigation-sidebar-chevron-background: #565557; --color-navigation-success-text: #66a88b; --color-navigation-upsell-background-extra: #726ab9; --color-navigation-upsell-background-hover-extra: #a499ed; --color-navigation-upsell-background-active-extra: #a499ed; --color-navigation-upsell-text-extra: #f5f4f3; --color-navigation-warning-text: #f1bd6c; --color-navigation-danger-text: #eb7586; --color-navigation-text: #f5f4f3; --color-navigation-text-weak: #a2a0a2; --color-navigation-text-weak-hover: #f5f4f3; --color-navigation-icon: #a2a0a2; --color-navigation-icon-hover: #f5f4f3; --color-navigation-border: #424244; --color-navigation-border-hover: #6a696a; --color-navigation-border-active: #a2a0a2; --color-navigation-border-focused: #fff; --color-navigation-border-strong: #6a696a; --color-navigation-background-hover: rgba(255, 255, 255, 0.06); --color-navigation-background-active: rgba(255, 255, 255, 0.11); --color-navigation-background-active-rgb: 255, 255, 255; --color-navigation-background-weak: #2e2e30; --color-navigation-background-medium: #2e2e30; --color-navigation-background-strong: #424244; --color-navigation-body-background: #f9f8f8; --color-navigation-body-background-rgb: 249, 248, 248; --color-navigation-body-background-strong: #f5f3f3; --color-navigation-body-background-strong-rgb: 245, 243, 243; --color-navigation-omnibutton-background: #3d3e40; --color-navigation-omnibutton-background-hover: #64202c; --color-navigation-omnibutton-background-active: #6e2230; --color-navigation-workflow-builder-background-dots: #cfcbcb; --color-navigation-portfolio-icon-overlay: rgba(255, 255, 255, 0.4); --color-navigation-filters-task-icon: #58a182; --color-navigation-filters-project-icon: #3f6ac4; --color-navigation-filters-contacts-icon: #8d84e8; --color-navigation-filters-contacts-icon-rgb: 141, 132, 232; --color-navigation-filters-extras-icon: #ff584a; --color-navigation-invite-button-background: #2a2b2d; --color-navigation-invite-button-background-hover: rgba( 255, 255, 255, 0.06 ); --color-navigation-invite-button-background-active: rgba( 255, 255, 255, 0.11 ); --color-navigation-invite-button-border: #565557; --color-navigation-invite-button-border-hover: #6a696a; --color-navigation-invite-button-border-active: #a2a0a2; --color-navigation-help-button-background: transparent; --color-navigation-help-button-background-hover: rgba(255, 255, 255, 0.06); --color-navigation-help-button-background-active: rgba(255, 255, 255, 0.11); } } :root .DesignTokenThemeSelectors-theme--darkMode { --color-navigation-search-background: #3d3e40; --color-navigation-search-background-strong: #565557; --color-navigation-topbar-background: #2e2e30; --color-navigation-desktop-tabs-background: #1e1f21; --color-navigation-sidebar-icon-background: #424244; --color-navigation-sidebar-chevron-background: #565557; --color-navigation-success-text: #66a88b; --color-navigation-upsell-background-extra: #726ab9; --color-navigation-upsell-background-hover-extra: #a499ed; --color-navigation-upsell-background-active-extra: #a499ed; --color-navigation-upsell-text-extra: #f5f4f3; --color-navigation-warning-text: #f1bd6c; --color-navigation-danger-text: #eb7586; --color-navigation-text: #f5f4f3; --color-navigation-text-weak: #a2a0a2; --color-navigation-text-weak-hover: #f5f4f3; --color-navigation-icon: #a2a0a2; --color-navigation-icon-hover: #f5f4f3; --color-navigation-border: #424244; --color-navigation-border-hover: #6a696a; --color-navigation-border-active: #a2a0a2; --color-navigation-border-focused: #fff; --color-navigation-border-strong: #6a696a; --color-navigation-background-hover: rgba(255, 255, 255, 0.06); --color-navigation-background-active: rgba(255, 255, 255, 0.11); --color-navigation-background-active-rgb: 255, 255, 255; --color-navigation-background-weak: #2e2e30; --color-navigation-background-medium: #2e2e30; --color-navigation-background-strong: #424244; --color-navigation-body-background: #252628; --color-navigation-body-background-rgb: 37, 38, 40; --color-navigation-body-background-strong: #2a2b2d; --color-navigation-body-background-strong-rgb: 42, 43, 45; --color-navigation-omnibutton-background: #3d3e40; --color-navigation-omnibutton-background-hover: #64202c; --color-navigation-omnibutton-background-active: #6e2230; --color-navigation-workflow-builder-background-dots: #565557; --color-navigation-portfolio-icon-overlay: rgba(30, 31, 33, 0.4); --color-navigation-filters-task-icon: #5da283; --color-navigation-filters-project-icon: #4573d2; --color-navigation-filters-contacts-icon: #a499ed; --color-navigation-filters-contacts-icon-rgb: 164, 153, 237; --color-navigation-filters-extras-icon: #ff584a; --color-navigation-invite-button-background: #2a2b2d; --color-navigation-invite-button-background-hover: rgba(255, 255, 255, 0.06); --color-navigation-invite-button-background-active: rgba(255, 255, 255, 0.11); --color-navigation-invite-button-border: #565557; --color-navigation-invite-button-border-hover: #6a696a; --color-navigation-invite-button-border-active: #a2a0a2; --color-navigation-help-button-background: transparent; --color-navigation-help-button-background-hover: rgba(255, 255, 255, 0.06); --color-navigation-help-button-background-active: rgba(255, 255, 255, 0.11); } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode { --color-navigation-search-background: #3d3e40; --color-navigation-search-background-strong: #565557; --color-navigation-topbar-background: #2e2e30; --color-navigation-desktop-tabs-background: #1e1f21; --color-navigation-sidebar-icon-background: #424244; --color-navigation-sidebar-chevron-background: #565557; --color-navigation-success-text: #66a88b; --color-navigation-upsell-background-extra: #726ab9; --color-navigation-upsell-background-hover-extra: #a499ed; --color-navigation-upsell-background-active-extra: #a499ed; --color-navigation-upsell-text-extra: #f5f4f3; --color-navigation-warning-text: #f1bd6c; --color-navigation-danger-text: #eb7586; --color-navigation-text: #f5f4f3; --color-navigation-text-weak: #a2a0a2; --color-navigation-text-weak-hover: #f5f4f3; --color-navigation-icon: #a2a0a2; --color-navigation-icon-hover: #f5f4f3; --color-navigation-border: #424244; --color-navigation-border-hover: #6a696a; --color-navigation-border-active: #a2a0a2; --color-navigation-border-focused: #fff; --color-navigation-border-strong: #6a696a; --color-navigation-background-hover: rgba(255, 255, 255, 0.06); --color-navigation-background-active: rgba(255, 255, 255, 0.11); --color-navigation-background-active-rgb: 255, 255, 255; --color-navigation-background-weak: #2e2e30; --color-navigation-background-medium: #2e2e30; --color-navigation-background-strong: #424244; --color-navigation-body-background: #252628; --color-navigation-body-background-rgb: 37, 38, 40; --color-navigation-body-background-strong: #2a2b2d; --color-navigation-body-background-strong-rgb: 42, 43, 45; --color-navigation-omnibutton-background: #3d3e40; --color-navigation-omnibutton-background-hover: #64202c; --color-navigation-omnibutton-background-active: #6e2230; --color-navigation-workflow-builder-background-dots: #565557; --color-navigation-portfolio-icon-overlay: rgba(30, 31, 33, 0.4); --color-navigation-filters-task-icon: #5da283; --color-navigation-filters-project-icon: #4573d2; --color-navigation-filters-contacts-icon: #a499ed; --color-navigation-filters-contacts-icon-rgb: 164, 153, 237; --color-navigation-filters-extras-icon: #ff584a; --color-navigation-invite-button-background: #2a2b2d; --color-navigation-invite-button-background-hover: rgba( 255, 255, 255, 0.06 ); --color-navigation-invite-button-background-active: rgba( 255, 255, 255, 0.11 ); --color-navigation-invite-button-border: #565557; --color-navigation-invite-button-border-hover: #6a696a; --color-navigation-invite-button-border-active: #a2a0a2; --color-navigation-help-button-background: transparent; --color-navigation-help-button-background-hover: rgba(255, 255, 255, 0.06); --color-navigation-help-button-background-active: rgba(255, 255, 255, 0.11); } } :root .DesignTokenThemeSelectors-theme--deuteranopiaMode, :root .DesignTokenThemeSelectors-theme--deuteranopiaMode .DesignTokenThemeOverrideRegionInternal--light { --color-navigation-filters-task-icon: #62d26f; } :root .DesignTokenThemeSelectors-theme--darkMode.DesignTokenThemeSelectors-theme--deuteranopiaMode { --color-navigation-filters-task-icon: #50ab5b; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode.DesignTokenThemeSelectors-theme--deuteranopiaMode { --color-navigation-filters-task-icon: #50ab5b; } } :root .DesignTokenThemeSelectors-theme--grayNav { --color-navigation-search-background: #fff; --color-navigation-search-background-strong: #fff; --color-navigation-topbar-background: #f9f8f8; --color-navigation-desktop-tabs-background: #edeae9; --color-navigation-sidebar-icon-background: #e8e5e4; --color-navigation-sidebar-chevron-background: #cfcbcb; --color-navigation-success-text: #0d7f56; --color-navigation-upsell-background-extra: #726ab9; --color-navigation-upsell-background-hover-extra: #575089; --color-navigation-upsell-background-active-extra: #575089; --color-navigation-upsell-text-extra: #fff; --color-navigation-warning-text: #986516; --color-navigation-danger-text: #c92f54; --color-navigation-text: #1e1f21; --color-navigation-text-weak: #6d6e6f; --color-navigation-text-weak-hover: #1e1f21; --color-navigation-icon: #6d6e6f; --color-navigation-icon-hover: #1e1f21; --color-navigation-border: #edeae9; --color-navigation-border-hover: #afabac; --color-navigation-border-active: #6d6e6f; --color-navigation-border-focused: #4573d2; --color-navigation-border-strong: #cfcbcb; --color-navigation-background-hover: rgba(55, 23, 23, 0.05); --color-navigation-background-active: rgba(55, 23, 23, 0.08); --color-navigation-background-active-rgb: 55, 23, 23; --color-navigation-background-weak: #f9f8f8; --color-navigation-background-medium: #f9f8f8; --color-navigation-background-strong: #f5f3f3; --color-navigation-body-background: #fff; --color-navigation-body-background-rgb: 255, 255, 255; --color-navigation-body-background-strong: #f9f8f8; --color-navigation-body-background-strong-rgb: 249, 248, 248; --color-navigation-omnibutton-background: #fff; --color-navigation-omnibutton-background-hover: #fcdadc; --color-navigation-omnibutton-background-active: #f9c6ca; --color-navigation-workflow-builder-background-dots: #edeae9; --color-navigation-invite-button-background: #fff; --color-navigation-invite-button-background-hover: #f9f8f8; --color-navigation-invite-button-background-active: #f5f3f3; --color-navigation-invite-button-border: #cfcbcb; --color-navigation-invite-button-border-hover: #afabac; --color-navigation-invite-button-border-active: #6d6e6f; --color-navigation-help-button-background: transparent; --color-navigation-help-button-background-hover: rgba(55, 23, 23, 0.03); --color-navigation-help-button-background-active: rgba(55, 23, 23, 0.05); } :root .DesignTokenThemeSelectors-theme--grayNav .DesignTokenThemeOverrideRegionInternal--light { --color-navigation-search-background: #3d3e40; --color-navigation-search-background-strong: #565557; --color-navigation-topbar-background: #2e2e30; --color-navigation-desktop-tabs-background: #1e1f21; --color-navigation-sidebar-icon-background: #424244; --color-navigation-sidebar-chevron-background: #565557; --color-navigation-success-text: #66a88b; --color-navigation-upsell-background-extra: #726ab9; --color-navigation-upsell-background-hover-extra: #a499ed; --color-navigation-upsell-background-active-extra: #a499ed; --color-navigation-upsell-text-extra: #f5f4f3; --color-navigation-warning-text: #f1bd6c; --color-navigation-danger-text: #eb7586; --color-navigation-text: #f5f4f3; --color-navigation-text-weak: #a2a0a2; --color-navigation-text-weak-hover: #f5f4f3; --color-navigation-icon: #a2a0a2; --color-navigation-icon-hover: #f5f4f3; --color-navigation-border: #424244; --color-navigation-border-hover: #6a696a; --color-navigation-border-active: #a2a0a2; --color-navigation-border-focused: #fff; --color-navigation-border-strong: #6a696a; --color-navigation-background-hover: rgba(255, 255, 255, 0.06); --color-navigation-background-active: rgba(255, 255, 255, 0.11); --color-navigation-background-active-rgb: 255, 255, 255; --color-navigation-background-weak: #2e2e30; --color-navigation-background-medium: #2e2e30; --color-navigation-background-strong: #424244; --color-navigation-body-background: #f9f8f8; --color-navigation-body-background-rgb: 249, 248, 248; --color-navigation-body-background-strong: #f5f3f3; --color-navigation-body-background-strong-rgb: 245, 243, 243; --color-navigation-omnibutton-background: #3d3e40; --color-navigation-omnibutton-background-hover: #64202c; --color-navigation-omnibutton-background-active: #6e2230; --color-navigation-workflow-builder-background-dots: #cfcbcb; --color-navigation-portfolio-icon-overlay: rgba(255, 255, 255, 0.4); --color-navigation-filters-task-icon: #58a182; --color-navigation-filters-project-icon: #3f6ac4; --color-navigation-filters-contacts-icon: #8d84e8; --color-navigation-filters-contacts-icon-rgb: 141, 132, 232; --color-navigation-filters-extras-icon: #ff584a; --color-navigation-invite-button-background: #2a2b2d; --color-navigation-invite-button-background-hover: rgba(255, 255, 255, 0.06); --color-navigation-invite-button-background-active: rgba(255, 255, 255, 0.11); --color-navigation-invite-button-border: #565557; --color-navigation-invite-button-border-hover: #6a696a; --color-navigation-invite-button-border-active: #a2a0a2; --color-navigation-help-button-background: transparent; --color-navigation-help-button-background-hover: rgba(255, 255, 255, 0.06); --color-navigation-help-button-background-active: rgba(255, 255, 255, 0.11); } :root .DesignTokenThemeSelectors-theme--darkMode.DesignTokenThemeSelectors-theme--grayNav { --color-navigation-search-background: #3d3e40; --color-navigation-search-background-strong: #565557; --color-navigation-topbar-background: #2e2e30; --color-navigation-desktop-tabs-background: #1e1f21; --color-navigation-sidebar-icon-background: #424244; --color-navigation-sidebar-chevron-background: #565557; --color-navigation-success-text: #66a88b; --color-navigation-upsell-background-extra: #726ab9; --color-navigation-upsell-background-hover-extra: #a499ed; --color-navigation-upsell-background-active-extra: #a499ed; --color-navigation-upsell-text-extra: #f5f4f3; --color-navigation-warning-text: #f1bd6c; --color-navigation-danger-text: #eb7586; --color-navigation-text: #f5f4f3; --color-navigation-text-weak: #a2a0a2; --color-navigation-text-weak-hover: #f5f4f3; --color-navigation-icon: #a2a0a2; --color-navigation-icon-hover: #f5f4f3; --color-navigation-border: #424244; --color-navigation-border-hover: #6a696a; --color-navigation-border-active: #a2a0a2; --color-navigation-border-focused: #fff; --color-navigation-border-strong: #6a696a; --color-navigation-background-hover: rgba(255, 255, 255, 0.06); --color-navigation-background-active: rgba(255, 255, 255, 0.11); --color-navigation-background-active-rgb: 255, 255, 255; --color-navigation-background-weak: #2e2e30; --color-navigation-background-medium: #2e2e30; --color-navigation-background-strong: #424244; --color-navigation-body-background: #252628; --color-navigation-body-background-rgb: 37, 38, 40; --color-navigation-body-background-strong: #2a2b2d; --color-navigation-body-background-strong-rgb: 42, 43, 45; --color-navigation-omnibutton-background: #3d3e40; --color-navigation-omnibutton-background-hover: #64202c; --color-navigation-omnibutton-background-active: #6e2230; --color-navigation-workflow-builder-background-dots: #565557; --color-navigation-invite-button-background: #2a2b2d; --color-navigation-invite-button-background-hover: rgba(255, 255, 255, 0.06); --color-navigation-invite-button-background-active: rgba(255, 255, 255, 0.11); --color-navigation-invite-button-border: #565557; --color-navigation-invite-button-border-hover: #6a696a; --color-navigation-invite-button-border-active: #a2a0a2; --color-navigation-help-button-background: transparent; --color-navigation-help-button-background-hover: rgba(55, 23, 23, 0.06); --color-navigation-help-button-background-active: rgba(255, 255, 255, 0.11); } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode.DesignTokenThemeSelectors-theme--grayNav { --color-navigation-search-background: #3d3e40; --color-navigation-search-background-strong: #565557; --color-navigation-topbar-background: #2e2e30; --color-navigation-desktop-tabs-background: #1e1f21; --color-navigation-sidebar-icon-background: #424244; --color-navigation-sidebar-chevron-background: #565557; --color-navigation-success-text: #66a88b; --color-navigation-upsell-background-extra: #726ab9; --color-navigation-upsell-background-hover-extra: #a499ed; --color-navigation-upsell-background-active-extra: #a499ed; --color-navigation-upsell-text-extra: #f5f4f3; --color-navigation-warning-text: #f1bd6c; --color-navigation-danger-text: #eb7586; --color-navigation-text: #f5f4f3; --color-navigation-text-weak: #a2a0a2; --color-navigation-text-weak-hover: #f5f4f3; --color-navigation-icon: #a2a0a2; --color-navigation-icon-hover: #f5f4f3; --color-navigation-border: #424244; --color-navigation-border-hover: #6a696a; --color-navigation-border-active: #a2a0a2; --color-navigation-border-focused: #fff; --color-navigation-border-strong: #6a696a; --color-navigation-background-hover: rgba(255, 255, 255, 0.06); --color-navigation-background-active: rgba(255, 255, 255, 0.11); --color-navigation-background-active-rgb: 255, 255, 255; --color-navigation-background-weak: #2e2e30; --color-navigation-background-medium: #2e2e30; --color-navigation-background-strong: #424244; --color-navigation-body-background: #252628; --color-navigation-body-background-rgb: 37, 38, 40; --color-navigation-body-background-strong: #2a2b2d; --color-navigation-body-background-strong-rgb: 42, 43, 45; --color-navigation-omnibutton-background: #3d3e40; --color-navigation-omnibutton-background-hover: #64202c; --color-navigation-omnibutton-background-active: #6e2230; --color-navigation-workflow-builder-background-dots: #565557; --color-navigation-invite-button-background: #2a2b2d; --color-navigation-invite-button-background-hover: rgba( 255, 255, 255, 0.06 ); --color-navigation-invite-button-background-active: rgba( 255, 255, 255, 0.11 ); --color-navigation-invite-button-border: #565557; --color-navigation-invite-button-border-hover: #6a696a; --color-navigation-invite-button-border-active: #a2a0a2; --color-navigation-help-button-background: transparent; --color-navigation-help-button-background-hover: rgba(55, 23, 23, 0.06); --color-navigation-help-button-background-active: rgba(255, 255, 255, 0.11); } } :root .DesignTokenThemeSelectors-theme--deuteranopiaMode.DesignTokenThemeSelectors-theme--grayNav .DesignTokenThemeOverrideRegionInternal--light { --color-navigation-filters-task-icon: #62d26f; } :root .DesignTokenThemeSelectors-theme--maroon .DesignTokenThemeOverrideRegionInternal--light { --color-navigation-search-background: #3d3e40; --color-navigation-search-background-strong: #565557; --color-navigation-topbar-background: #2e2e30; --color-navigation-desktop-tabs-background: #1e1f21; --color-navigation-sidebar-icon-background: #424244; --color-navigation-sidebar-chevron-background: #565557; --color-navigation-success-text: #66a88b; --color-navigation-upsell-background-extra: #726ab9; --color-navigation-upsell-background-hover-extra: #a499ed; --color-navigation-upsell-background-active-extra: #a499ed; --color-navigation-upsell-text-extra: #f5f4f3; --color-navigation-warning-text: #f1bd6c; --color-navigation-danger-text: #eb7586; --color-navigation-text: #f5f4f3; --color-navigation-text-weak: #a2a0a2; --color-navigation-text-weak-hover: #f5f4f3; --color-navigation-icon: #a2a0a2; --color-navigation-icon-hover: #f5f4f3; --color-navigation-border: #424244; --color-navigation-border-hover: #6a696a; --color-navigation-border-active: #a2a0a2; --color-navigation-border-focused: #fff; --color-navigation-border-strong: #6a696a; --color-navigation-background-hover: rgba(255, 255, 255, 0.06); --color-navigation-background-active: rgba(255, 255, 255, 0.11); --color-navigation-background-active-rgb: 255, 255, 255; --color-navigation-background-weak: #2e2e30; --color-navigation-background-medium: #2e2e30; --color-navigation-background-strong: #424244; --color-navigation-body-background: #f9f8f8; --color-navigation-body-background-rgb: 249, 248, 248; --color-navigation-body-background-strong: #f5f3f3; --color-navigation-body-background-strong-rgb: 245, 243, 243; --color-navigation-omnibutton-background: #3d3e40; --color-navigation-omnibutton-background-hover: #64202c; --color-navigation-omnibutton-background-active: #6e2230; --color-navigation-workflow-builder-background-dots: #cfcbcb; --color-navigation-portfolio-icon-overlay: rgba(255, 255, 255, 0.4); --color-navigation-filters-task-icon: #58a182; --color-navigation-filters-project-icon: #3f6ac4; --color-navigation-filters-contacts-icon: #8d84e8; --color-navigation-filters-contacts-icon-rgb: 141, 132, 232; --color-navigation-filters-extras-icon: #ff584a; --color-navigation-invite-button-background: #2a2b2d; --color-navigation-invite-button-background-hover: rgba(255, 255, 255, 0.06); --color-navigation-invite-button-background-active: rgba(255, 255, 255, 0.11); --color-navigation-invite-button-border: #565557; --color-navigation-invite-button-border-hover: #6a696a; --color-navigation-invite-button-border-active: #a2a0a2; --color-navigation-help-button-background: transparent; --color-navigation-help-button-background-hover: rgba(255, 255, 255, 0.06); --color-navigation-help-button-background-active: rgba(255, 255, 255, 0.11); } :root .DesignTokenThemeSelectors-theme--darkMode.DesignTokenThemeSelectors-theme--maroon { --color-navigation-search-background: #5f2748; --color-navigation-search-background-strong: #5f2748; --color-navigation-topbar-background: #3e1930; --color-navigation-desktop-tabs-background: #3e1930; --color-navigation-sidebar-icon-background: #5f2748; --color-navigation-sidebar-chevron-background: #5f2748; --color-navigation-text: #f8f4f6; --color-navigation-text-weak: #bb97a9; --color-navigation-text-weak-hover: #f8f4f6; --color-navigation-icon: #bb97a9; --color-navigation-icon-hover: #f8f4f6; --color-navigation-border: #5f2748; --color-navigation-border-hover: #8f5977; --color-navigation-border-active: #bb97a9; --color-navigation-border-focused: #fff; --color-navigation-border-strong: #5f2748; --color-navigation-background-weak: #36172a; --color-navigation-background-medium: #3e1930; --color-navigation-background-strong: #461d36; --color-navigation-body-background: #3e1930; --color-navigation-body-background-rgb: 62, 25, 48; --color-navigation-body-background-strong: #461d36; --color-navigation-body-background-strong-rgb: 70, 29, 54; --color-navigation-omnibutton-background: #36172a; --color-navigation-omnibutton-background-hover: #64202c; --color-navigation-omnibutton-background-active: #64202c; --color-navigation-workflow-builder-background-dots: #5f2748; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode.DesignTokenThemeSelectors-theme--maroon { --color-navigation-search-background: #5f2748; --color-navigation-search-background-strong: #5f2748; --color-navigation-topbar-background: #3e1930; --color-navigation-desktop-tabs-background: #3e1930; --color-navigation-sidebar-icon-background: #5f2748; --color-navigation-sidebar-chevron-background: #5f2748; --color-navigation-text: #f8f4f6; --color-navigation-text-weak: #bb97a9; --color-navigation-text-weak-hover: #f8f4f6; --color-navigation-icon: #bb97a9; --color-navigation-icon-hover: #f8f4f6; --color-navigation-border: #5f2748; --color-navigation-border-hover: #8f5977; --color-navigation-border-active: #bb97a9; --color-navigation-border-focused: #fff; --color-navigation-border-strong: #5f2748; --color-navigation-background-weak: #36172a; --color-navigation-background-medium: #3e1930; --color-navigation-background-strong: #461d36; --color-navigation-body-background: #3e1930; --color-navigation-body-background-rgb: 62, 25, 48; --color-navigation-body-background-strong: #461d36; --color-navigation-body-background-strong-rgb: 70, 29, 54; --color-navigation-omnibutton-background: #36172a; --color-navigation-omnibutton-background-hover: #64202c; --color-navigation-omnibutton-background-active: #64202c; --color-navigation-workflow-builder-background-dots: #5f2748; } } :root .DesignTokenThemeSelectors-theme--deuteranopiaMode.DesignTokenThemeSelectors-theme--maroon .DesignTokenThemeOverrideRegionInternal--light { --color-navigation-filters-task-icon: #62d26f; } :root { --avatar-diameter-xsmall: 20px; --avatar-diameter-small: 24px; --avatar-diameter-medium: 28px; --avatar-diameter-large: 36px; --avatar-diameter-xlarge: 48px; --avatar-diameter-huge: 64px; --avatar-diameter-mega: 120px; --avatar-diameter-xmega: 160px; --globule-height-large: 24px; --globule-border-radius-medium: 4px; --globule-border-radius-large: 4px; --globule-border-radius: 4px; --button-padding-small: 4px; --button-padding-medium: 8px; --button-padding-large: 12px; --button-padding-xlarge: 16px; } :root .DesignTokenThemeSelectors-theme--compactButtonPadding { --button-padding-medium: 4px; --button-padding-large: 4px; --button-padding-xlarge: 4px; } :root { --globule-padding-small: 4px; --globule-padding-large: 4px; } @keyframes animation-opacity1 { 0% { opacity: 1; } to { opacity: 1; } } @keyframes animation-opacity0 { 0% { opacity: 0; } to { opacity: 0; } } @keyframes animation-fadeIn { 0% { opacity: 0; } to { opacity: 1; } } @keyframes animation-fadeOut { 0% { opacity: 1; } to { opacity: 0; } } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { vertical-align: baseline; display: inline-block; } audio:not([controls]) { height: 0; display: none; } [hidden], template { display: none; } a { background-color: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: 700; } dfn { font-style: italic; } h1 { font-size: 2em; } small { font-size: 80%; } sub, sup { vertical-align: baseline; font-size: 75%; line-height: 0; position: relative; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } hr { box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace; font-size: 1em; } code { background-color: var(--color-background-strong); border-color: var(--color-border-strong); color: var(--color-code-text); border-style: solid; border-width: 1px; border-radius: 4px; padding: 2px 4px; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button { cursor: pointer; } input[type="reset"] { cursor: pointer; } input[type="submit"] { cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner { border: 0; padding: 0; } input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type="checkbox"] { box-sizing: border-box; padding: 0; } input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button { height: auto; } input[type="number"]::-webkit-outer-spin-button { height: auto; } ::-moz-placeholder { opacity: 1; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: 700; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } html, body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; line-height: normal; } blockquote, dl, dd, h1, h2, h3, h4, h5, h6, figure, p, pre { margin: 0; } button { background: 0 0; border: 0; padding: 0; } fieldset { border: 0; margin: 0; padding: 0; } iframe { border: 0; } ol, ul { margin: 0; padding: 0; list-style: none; } [tabindex="-1"]:focus { outline: none; } a { color: var(--color-text); cursor: pointer; text-decoration: none; } a:active, a:hover { color: var(--color-text); text-decoration: none; } .DesignTokensDefault { background-color: var(--color-navigation-body-background); color: var(--color-text); fill: var(--color-icon); } :root, :root .DesignTokenThemeOverrideRegionInternal--light { --color-ai-background: #fff; --color-ai-background-strong: #3f6ac4; --color-ai-badge-background: #dbe0fd; --color-ai-badge-icon: #3f6ac4; --color-ai-badge-text: #1e1f21; --color-ai-copilot-avatar-background-1: rgba(255, 90, 76, 0.15); --color-ai-copilot-avatar-background-1-hover: rgba(255, 101, 88, 0.15); --color-ai-copilot-avatar-background-2: rgba(0, 134, 255, 0.15); --color-ai-copilot-avatar-background-2-hover: rgba(0, 134, 255, 0.15); --color-ai-copilot-icon: #ff584a; --color-ai-copilot-landing-screen-background: #ffeaec; --color-ai-copilot-landing-screen-text: #690031; --color-ai-copilot-outcome-card-background: #fff8f9; --color-ai-copilot-outcome-card-border: #ffeaec; --color-ai-copilot-outcome-card-text: #690031; --color-ai-copilot-outcome-card-icon: #690031; --color-ai-copilot-input-card-background: #e6f7ff; --color-ai-copilot-input-card-border: #cbefff; --color-ai-copilot-shadow: 1px 1px 10px 0 rgba(166, 159, 243, 0.15), 2px 2px 10px 0 rgba(69, 115, 210, 0.1), -1px -1px 5px 0 rgba(240, 106, 106, 0.15); --color-ai-copilot-icon-1: #ff6558; --color-ai-copilot-icon-2: #4786ff; --color-ai-card-background: #fff; --color-ai-card-background-rgb: 255, 255, 255; --color-ai-card-border: transparent; --color-ai-card-shadow: 1px 1px 10px 0 rgba(166, 159, 243, 0.15), 2px 2px 10px 0 rgba(69, 115, 210, 0.1), -1px -1px 5px 0 rgba(240, 106, 106, 0.15); --color-ai-slider-tick: #afabac; --color-ai-studio-canvas-background-1: rgba(255, 90, 76, 0.1); --color-ai-studio-canvas-background-2: rgba(71, 134, 255, 0.1); --color-ai-studio-card-border-1: #ffada6; --color-ai-studio-card-border-2: #a3c3ff; --color-ai-studio-logo-background-1: #993d35; --color-ai-studio-logo-background-2: #2b5099; --color-ai-studio-shadow-40: -2px 4px 16px 0 rgba(141, 132, 232, 0.25), 2px 4px 16px 3px rgba(222, 95, 115, 0.25); --color-ai-studio-shadow-60: 0 2px 8px 0 rgba(222, 95, 115, 0.25), 0 6px 20px 3px rgba(141, 132, 232, 0.25); --color-ai-studio-shadow-75: 2px 0 12px 0 rgba(141, 132, 232, 0.25), -2px 8px 12px 3px rgba(222, 95, 115, 0.25); --color-ai-switch-background-1: #ff5a4c; --color-ai-switch-background-1-hover: #f14638; --color-ai-switch-background-2: #4786ff; --color-ai-switch-background-2-hover: #2d6eec; --color-ai-workflows-icon-background-1: rgba(255, 101, 88, 0.1); --color-ai-workflows-icon-background-2: rgba(71, 134, 255, 0.1); } @media print { :root { --color-ai-background: #fff; --color-ai-background-strong: #3f6ac4; --color-ai-badge-background: #dbe0fd; --color-ai-badge-icon: #3f6ac4; --color-ai-badge-text: #1e1f21; --color-ai-copilot-avatar-background-1: rgba(255, 90, 76, 0.15); --color-ai-copilot-avatar-background-1-hover: rgba(255, 101, 88, 0.15); --color-ai-copilot-avatar-background-2: rgba(0, 134, 255, 0.15); --color-ai-copilot-avatar-background-2-hover: rgba(0, 134, 255, 0.15); --color-ai-copilot-icon: #ff584a; --color-ai-copilot-landing-screen-background: #ffeaec; --color-ai-copilot-landing-screen-text: #690031; --color-ai-copilot-outcome-card-background: #fff8f9; --color-ai-copilot-outcome-card-border: #ffeaec; --color-ai-copilot-outcome-card-text: #690031; --color-ai-copilot-outcome-card-icon: #690031; --color-ai-copilot-input-card-background: #e6f7ff; --color-ai-copilot-input-card-border: #cbefff; --color-ai-copilot-shadow: 1px 1px 10px 0 rgba(166, 159, 243, 0.15), 2px 2px 10px 0 rgba(69, 115, 210, 0.1), -1px -1px 5px 0 rgba(240, 106, 106, 0.15); --color-ai-copilot-icon-1: #ff6558; --color-ai-copilot-icon-2: #4786ff; --color-ai-card-background: #fff; --color-ai-card-background-rgb: 255, 255, 255; --color-ai-card-border: transparent; --color-ai-card-shadow: 1px 1px 10px 0 rgba(166, 159, 243, 0.15), 2px 2px 10px 0 rgba(69, 115, 210, 0.1), -1px -1px 5px 0 rgba(240, 106, 106, 0.15); --color-ai-slider-tick: #afabac; --color-ai-studio-canvas-background-1: rgba(255, 90, 76, 0.1); --color-ai-studio-canvas-background-2: rgba(71, 134, 255, 0.1); --color-ai-studio-card-border-1: #ffada6; --color-ai-studio-card-border-2: #a3c3ff; --color-ai-studio-logo-background-1: #993d35; --color-ai-studio-logo-background-2: #2b5099; --color-ai-studio-shadow-40: -2px 4px 16px 0 rgba(141, 132, 232, 0.25), 2px 4px 16px 3px rgba(222, 95, 115, 0.25); --color-ai-studio-shadow-60: 0 2px 8px 0 rgba(222, 95, 115, 0.25), 0 6px 20px 3px rgba(141, 132, 232, 0.25); --color-ai-studio-shadow-75: 2px 0 12px 0 rgba(141, 132, 232, 0.25), -2px 8px 12px 3px rgba(222, 95, 115, 0.25); --color-ai-switch-background-1: #ff5a4c; --color-ai-switch-background-1-hover: #f14638; --color-ai-switch-background-2: #4786ff; --color-ai-switch-background-2-hover: #2d6eec; --color-ai-workflows-icon-background-1: rgba(255, 101, 88, 0.1); --color-ai-workflows-icon-background-2: rgba(71, 134, 255, 0.1); } } :root .DesignTokenThemeSelectors-theme--darkMode { --color-ai-background: #1e1f21; --color-ai-background-strong: #4573d2; --color-ai-badge-background: #2a3c68; --color-ai-badge-icon: #4573d2; --color-ai-badge-text: #f5f4f3; --color-ai-copilot-avatar-background-1: rgba(255, 90, 76, 0.15); --color-ai-copilot-avatar-background-1-hover: rgba(255, 101, 88, 0.15); --color-ai-copilot-avatar-background-2: rgba(0, 134, 255, 0.15); --color-ai-copilot-avatar-background-2-hover: rgba(0, 134, 255, 0.15); --color-ai-copilot-icon: #ff584a; --color-ai-copilot-landing-screen-background: #440120; --color-ai-copilot-landing-screen-text: #fff5f6; --color-ai-copilot-outcome-card-background: #3c001c; --color-ai-copilot-outcome-card-border: #690031; --color-ai-copilot-outcome-card-text: #ffeaec; --color-ai-copilot-outcome-card-icon: #ffeaec; --color-ai-copilot-input-card-background: #00293c; --color-ai-copilot-input-card-border: #014462; --color-ai-copilot-shadow: 1px 1px 10px 0 rgba(45, 34, 163, 0.15), 2px 2px 10px 0 rgba(31, 68, 142, 0.1), -1px -1px 5px 0 rgba(255, 76, 76, 0.2); --color-ai-copilot-icon-1: #ff6558; --color-ai-copilot-icon-2: #4786ff; --color-ai-card-background: #1e1f21; --color-ai-card-background-rgb: 30, 31, 33; --color-ai-card-border: transparent; --color-ai-card-shadow: 1px 1px 10px 0 rgba(45, 34, 163, 0.15), 2px 2px 10px 0 rgba(31, 68, 142, 0.1), -1px -1px 5px 0 rgba(255, 76, 76, 0.2); --color-ai-slider-tick: #6a696a; --color-ai-studio-canvas-background-1: rgba(255, 90, 76, 0.1); --color-ai-studio-canvas-background-2: rgba(71, 134, 255, 0.1); --color-ai-studio-card-border-1: #8e3d37; --color-ai-studio-card-border-2: #335390; --color-ai-studio-logo-background-1: #ff6558; --color-ai-studio-logo-background-2: #4786ff; --color-ai-studio-shadow-40: 0 0 0 1px #726ab9; --color-ai-studio-shadow-60: 0 0 0 1px #a499ed; --color-ai-studio-shadow-75: 0 0 0 1px #a499ed; --color-ai-switch-background-1: #ff5a4c; --color-ai-switch-background-1-hover: #f14638; --color-ai-switch-background-2: #4786ff; --color-ai-switch-background-2-hover: #2d6eec; --color-ai-workflows-icon-background-1: rgba(255, 101, 88, 0.1); --color-ai-workflows-icon-background-2: rgba(71, 134, 255, 0.1); } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode { --color-ai-background: #1e1f21; --color-ai-background-strong: #4573d2; --color-ai-badge-background: #2a3c68; --color-ai-badge-icon: #4573d2; --color-ai-badge-text: #f5f4f3; --color-ai-copilot-avatar-background-1: rgba(255, 90, 76, 0.15); --color-ai-copilot-avatar-background-1-hover: rgba(255, 101, 88, 0.15); --color-ai-copilot-avatar-background-2: rgba(0, 134, 255, 0.15); --color-ai-copilot-avatar-background-2-hover: rgba(0, 134, 255, 0.15); --color-ai-copilot-icon: #ff584a; --color-ai-copilot-landing-screen-background: #440120; --color-ai-copilot-landing-screen-text: #fff5f6; --color-ai-copilot-outcome-card-background: #3c001c; --color-ai-copilot-outcome-card-border: #690031; --color-ai-copilot-outcome-card-text: #ffeaec; --color-ai-copilot-outcome-card-icon: #ffeaec; --color-ai-copilot-input-card-background: #00293c; --color-ai-copilot-input-card-border: #014462; --color-ai-copilot-shadow: 1px 1px 10px 0 rgba(45, 34, 163, 0.15), 2px 2px 10px 0 rgba(31, 68, 142, 0.1), -1px -1px 5px 0 rgba(255, 76, 76, 0.2); --color-ai-copilot-icon-1: #ff6558; --color-ai-copilot-icon-2: #4786ff; --color-ai-card-background: #1e1f21; --color-ai-card-background-rgb: 30, 31, 33; --color-ai-card-border: transparent; --color-ai-card-shadow: 1px 1px 10px 0 rgba(45, 34, 163, 0.15), 2px 2px 10px 0 rgba(31, 68, 142, 0.1), -1px -1px 5px 0 rgba(255, 76, 76, 0.2); --color-ai-slider-tick: #6a696a; --color-ai-studio-canvas-background-1: rgba(255, 90, 76, 0.1); --color-ai-studio-canvas-background-2: rgba(71, 134, 255, 0.1); --color-ai-studio-card-border-1: #8e3d37; --color-ai-studio-card-border-2: #335390; --color-ai-studio-logo-background-1: #ff6558; --color-ai-studio-logo-background-2: #4786ff; --color-ai-studio-shadow-40: 0 0 0 1px #726ab9; --color-ai-studio-shadow-60: 0 0 0 1px #a499ed; --color-ai-studio-shadow-75: 0 0 0 1px #a499ed; --color-ai-switch-background-1: #ff5a4c; --color-ai-switch-background-1-hover: #f14638; --color-ai-switch-background-2: #4786ff; --color-ai-switch-background-2-hover: #2d6eec; --color-ai-workflows-icon-background-1: rgba(255, 101, 88, 0.1); --color-ai-workflows-icon-background-2: rgba(71, 134, 255, 0.1); } } :root .DesignTokenThemeSelectors-theme--maroon .DesignTokenThemeOverrideRegionInternal--light { --color-ai-background: #fff; --color-ai-background-strong: #3f6ac4; --color-ai-badge-background: #dbe0fd; --color-ai-badge-icon: #3f6ac4; --color-ai-badge-text: #1e1f21; --color-ai-copilot-avatar-background-1: rgba(255, 90, 76, 0.15); --color-ai-copilot-avatar-background-1-hover: rgba(255, 101, 88, 0.15); --color-ai-copilot-avatar-background-2: rgba(0, 134, 255, 0.15); --color-ai-copilot-avatar-background-2-hover: rgba(0, 134, 255, 0.15); --color-ai-copilot-icon: #ff584a; --color-ai-copilot-landing-screen-background: #ffeaec; --color-ai-copilot-landing-screen-text: #690031; --color-ai-copilot-outcome-card-background: #fff8f9; --color-ai-copilot-outcome-card-border: #ffeaec; --color-ai-copilot-outcome-card-text: #690031; --color-ai-copilot-outcome-card-icon: #690031; --color-ai-copilot-input-card-background: #e6f7ff; --color-ai-copilot-input-card-border: #cbefff; --color-ai-copilot-shadow: 1px 1px 10px 0 rgba(166, 159, 243, 0.15), 2px 2px 10px 0 rgba(69, 115, 210, 0.1), -1px -1px 5px 0 rgba(240, 106, 106, 0.15); --color-ai-copilot-icon-1: #ff6558; --color-ai-copilot-icon-2: #4786ff; --color-ai-card-background: #fff; --color-ai-card-background-rgb: 255, 255, 255; --color-ai-card-border: transparent; --color-ai-card-shadow: 1px 1px 10px 0 rgba(166, 159, 243, 0.15), 2px 2px 10px 0 rgba(69, 115, 210, 0.1), -1px -1px 5px 0 rgba(240, 106, 106, 0.15); --color-ai-slider-tick: #afabac; --color-ai-studio-canvas-background-1: rgba(255, 90, 76, 0.1); --color-ai-studio-canvas-background-2: rgba(71, 134, 255, 0.1); --color-ai-studio-card-border-1: #ffada6; --color-ai-studio-card-border-2: #a3c3ff; --color-ai-studio-logo-background-1: #993d35; --color-ai-studio-logo-background-2: #2b5099; --color-ai-studio-shadow-40: -2px 4px 16px 0 rgba(141, 132, 232, 0.25), 2px 4px 16px 3px rgba(222, 95, 115, 0.25); --color-ai-studio-shadow-60: 0 2px 8px 0 rgba(222, 95, 115, 0.25), 0 6px 20px 3px rgba(141, 132, 232, 0.25); --color-ai-studio-shadow-75: 2px 0 12px 0 rgba(141, 132, 232, 0.25), -2px 8px 12px 3px rgba(222, 95, 115, 0.25); --color-ai-switch-background-1: #ff5a4c; --color-ai-switch-background-1-hover: #f14638; --color-ai-switch-background-2: #4786ff; --color-ai-switch-background-2-hover: #2d6eec; --color-ai-workflows-icon-background-1: rgba(255, 101, 88, 0.1); --color-ai-workflows-icon-background-2: rgba(71, 134, 255, 0.1); } :root .DesignTokenThemeSelectors-theme--darkMode.DesignTokenThemeSelectors-theme--maroon { --color-ai-card-background: #461d36; --color-ai-card-background-rgb: 70, 29, 54; --color-ai-slider-tick: #8f5977; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode.DesignTokenThemeSelectors-theme--maroon { --color-ai-card-background: #461d36; --color-ai-card-background-rgb: 70, 29, 54; --color-ai-slider-tick: #8f5977; } } :root, :root .DesignTokenThemeOverrideRegionInternal--light { --color-inverse-text: #f5f4f3; --color-inverse-text-disabled: #6a696a; --color-inverse-text-weak: #a2a0a2; --color-inverse-text-weak-hover: #f5f4f3; --color-inverse-text-strong: #fff; --color-inverse-icon: #a2a0a2; --color-inverse-icon-hover: #f5f4f3; --color-inverse-border: #424244; --color-inverse-border-hover: #6a696a; --color-inverse-border-active: #a2a0a2; --color-inverse-border-strong: #fff; --color-inverse-background-hover: rgba(255, 255, 255, 0.06); --color-inverse-background-hover-rgb: 255, 255, 255; --color-inverse-background-active: rgba(255, 255, 255, 0.11); --color-inverse-background-weak: #1e1f21; --color-inverse-background-medium: #252628; --color-inverse-background-strong: #363639; --color-inverse-dark-text: #1e1f21; --color-inverse-dark-text-disabled: #afabac; --color-inverse-dark-background-hover: rgba(55, 23, 23, 0.03); --color-inverse-dark-background-active: rgba(55, 23, 23, 0.05); } @media print { :root { --color-inverse-text: #f5f4f3; --color-inverse-text-disabled: #6a696a; --color-inverse-text-weak: #a2a0a2; --color-inverse-text-weak-hover: #f5f4f3; --color-inverse-text-strong: #fff; --color-inverse-icon: #a2a0a2; --color-inverse-icon-hover: #f5f4f3; --color-inverse-border: #424244; --color-inverse-border-hover: #6a696a; --color-inverse-border-active: #a2a0a2; --color-inverse-border-strong: #fff; --color-inverse-background-hover: rgba(255, 255, 255, 0.06); --color-inverse-background-hover-rgb: 255, 255, 255; --color-inverse-background-active: rgba(255, 255, 255, 0.11); --color-inverse-background-weak: #1e1f21; --color-inverse-background-medium: #252628; --color-inverse-background-strong: #363639; --color-inverse-dark-text: #1e1f21; --color-inverse-dark-text-disabled: #afabac; --color-inverse-dark-background-hover: rgba(55, 23, 23, 0.03); --color-inverse-dark-background-active: rgba(55, 23, 23, 0.05); } } :root .DesignTokenThemeSelectors-theme--darkMode { --color-inverse-text: #f5f4f3; --color-inverse-text-disabled: #6a696a; --color-inverse-text-weak: #a2a0a2; --color-inverse-text-weak-hover: #f5f4f3; --color-inverse-text-strong: #fff; --color-inverse-icon: #a2a0a2; --color-inverse-icon-hover: #f5f4f3; --color-inverse-border: #424244; --color-inverse-border-hover: #6a696a; --color-inverse-border-active: #a2a0a2; --color-inverse-border-strong: #fff; --color-inverse-background-hover: rgba(255, 255, 255, 0.06); --color-inverse-background-hover-rgb: 255, 255, 255; --color-inverse-background-active: rgba(255, 255, 255, 0.11); --color-inverse-background-weak: #2e2e30; --color-inverse-background-medium: #363639; --color-inverse-background-strong: #424244; --color-inverse-dark-text: #1e1f21; --color-inverse-dark-text-disabled: #afabac; --color-inverse-dark-background-hover: rgba(55, 23, 23, 0.03); --color-inverse-dark-background-active: rgba(55, 23, 23, 0.05); } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode { --color-inverse-text: #f5f4f3; --color-inverse-text-disabled: #6a696a; --color-inverse-text-weak: #a2a0a2; --color-inverse-text-weak-hover: #f5f4f3; --color-inverse-text-strong: #fff; --color-inverse-icon: #a2a0a2; --color-inverse-icon-hover: #f5f4f3; --color-inverse-border: #424244; --color-inverse-border-hover: #6a696a; --color-inverse-border-active: #a2a0a2; --color-inverse-border-strong: #fff; --color-inverse-background-hover: rgba(255, 255, 255, 0.06); --color-inverse-background-hover-rgb: 255, 255, 255; --color-inverse-background-active: rgba(255, 255, 255, 0.11); --color-inverse-background-weak: #2e2e30; --color-inverse-background-medium: #363639; --color-inverse-background-strong: #424244; --color-inverse-dark-text: #1e1f21; --color-inverse-dark-text-disabled: #afabac; --color-inverse-dark-background-hover: rgba(55, 23, 23, 0.03); --color-inverse-dark-background-active: rgba(55, 23, 23, 0.05); } } :root .DesignTokenThemeSelectors-theme--maroon .DesignTokenThemeOverrideRegionInternal--light { --color-inverse-text: #f5f4f3; --color-inverse-text-disabled: #6a696a; --color-inverse-text-weak: #a2a0a2; --color-inverse-text-weak-hover: #f5f4f3; --color-inverse-text-strong: #fff; --color-inverse-icon: #a2a0a2; --color-inverse-icon-hover: #f5f4f3; --color-inverse-border: #424244; --color-inverse-border-hover: #6a696a; --color-inverse-border-active: #a2a0a2; --color-inverse-border-strong: #fff; --color-inverse-background-hover: rgba(255, 255, 255, 0.06); --color-inverse-background-hover-rgb: 255, 255, 255; --color-inverse-background-active: rgba(255, 255, 255, 0.11); --color-inverse-background-weak: #1e1f21; --color-inverse-background-medium: #252628; --color-inverse-background-strong: #363639; --color-inverse-dark-text: #1e1f21; --color-inverse-dark-text-disabled: #afabac; --color-inverse-dark-background-hover: rgba(55, 23, 23, 0.03); --color-inverse-dark-background-active: rgba(55, 23, 23, 0.05); } :root .DesignTokenThemeSelectors-theme--darkMode.DesignTokenThemeSelectors-theme--maroon { --color-inverse-text: #f8f4f6; --color-inverse-text-weak: #bb97a9; --color-inverse-text-weak-hover: #f8f4f6; --color-inverse-text-strong: #f8f4f6; --color-inverse-icon: #bb97a9; --color-inverse-icon-hover: #f8f4f6; --color-inverse-border: #5f2748; --color-inverse-border-hover: #8f5977; --color-inverse-border-active: #bb97a9; --color-inverse-border-strong: #f8f4f6; --color-inverse-background-weak: #36172a; --color-inverse-background-medium: #3e1930; --color-inverse-background-strong: #461d36; --color-inverse-dark-text: #36172a; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode.DesignTokenThemeSelectors-theme--maroon { --color-inverse-text: #f8f4f6; --color-inverse-text-weak: #bb97a9; --color-inverse-text-weak-hover: #f8f4f6; --color-inverse-text-strong: #f8f4f6; --color-inverse-icon: #bb97a9; --color-inverse-icon-hover: #f8f4f6; --color-inverse-border: #5f2748; --color-inverse-border-hover: #8f5977; --color-inverse-border-active: #bb97a9; --color-inverse-border-strong: #f8f4f6; --color-inverse-background-weak: #36172a; --color-inverse-background-medium: #3e1930; --color-inverse-background-strong: #461d36; --color-inverse-dark-text: #36172a; } } :root, :root .DesignTokenThemeOverrideRegionInternal--light { --color-light-asset-background: #fff; --color-light-asset-text: #1e1f21; } @media print { :root { --color-light-asset-background: #fff; --color-light-asset-text: #1e1f21; } } :root .DesignTokenThemeSelectors-theme--darkMode { --color-light-asset-background: #fff; --color-light-asset-text: #1e1f21; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode { --color-light-asset-background: #fff; --color-light-asset-text: #1e1f21; } } :root .DesignTokenThemeSelectors-theme--maroon .DesignTokenThemeOverrideRegionInternal--light { --color-light-asset-background: #fff; --color-light-asset-text: #1e1f21; } :root .DesignTokenThemeSelectors-theme--darkMode.DesignTokenThemeSelectors-theme--maroon { --color-light-asset-text: #36172a; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode.DesignTokenThemeSelectors-theme--maroon { --color-light-asset-text: #36172a; } } .TypographyPresentation { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; } .TypographyPresentation:focus { outline: none; } .TypographyPresentation.TypographyPresentation--maxLines1 { -webkit-line-clamp: 1; overflow-wrap: anywhere; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .TypographyPresentation.TypographyPresentation--maxLines2 { -webkit-line-clamp: 2; overflow-wrap: anywhere; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .TypographyPresentation.TypographyPresentation--maxLines3 { -webkit-line-clamp: 3; overflow-wrap: anywhere; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .TypographyPresentation.TypographyPresentation--maxLines4 { -webkit-line-clamp: 4; overflow-wrap: anywhere; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .TypographyPresentation.TypographyPresentation--maxLines5 { -webkit-line-clamp: 5; overflow-wrap: anywhere; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .TypographyPresentation.TypographyPresentation--maxLines6 { -webkit-line-clamp: 6; overflow-wrap: anywhere; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .TypographyPresentation--colorDarkGray2 { color: var(--color-text); } .TypographyPresentation--colorDarkGray1 { color: var(--color-text-weak); } .TypographyPresentation--colorLightGray3 { color: var(--color-deprecated-lightGray3); } .TypographyPresentation--colorLightGray2 { color: var(--color-deprecated-lightGray2); } .TypographyPresentation--colorLightGray1 { color: var(--color-deprecated-lightGray1); } .TypographyPresentation--colorWhite { color: var(--color-text-foreground); } .TypographyPresentation--colorDefault { color: var(--color-text); } .TypographyPresentation--colorWeak { color: var(--color-text-weak); } .TypographyPresentation--colorDisabled { color: var(--color-text-disabled); } .TypographyPresentation--colorForeground { color: var(--color-text-foreground); } .TypographyPresentation--colorLightAsset { color: var(--color-light-asset-text); } .TypographyPresentation--colorSuccess { color: var(--color-success-text); } .TypographyPresentation--colorSuccessStrong { color: var(--color-success-text-strong); } .TypographyPresentation--colorDanger { color: var(--color-danger-text); } .TypographyPresentation--colorDangerStrong { color: var(--color-danger-text-strong); } .TypographyPresentation--colorWarning { color: var(--color-warning-text); } .TypographyPresentation--colorWarningStrong { color: var(--color-warning-text-strong); } .TypographyPresentation--colorUpsell { color: var(--color-upsell-text); } .TypographyPresentation--colorUpsellStrong { color: var(--color-upsell-text-strong); } .TypographyPresentation--colorSelected { color: var(--color-selected-text); } .TypographyPresentation--colorSelectedStrong { color: var(--color-selected-text-strong); } .TypographyPresentation--colorBeta { color: var(--color-beta-text); } .TypographyPresentation--colorBetaStrong { color: var(--color-beta-text-strong); } .TypographyPresentation--colorPrimary { color: var(--color-primary-text); } .TypographyPresentation--colorPrimaryStrong { color: var(--color-primary-text-strong); } .TypographyPresentation--colorOnHold { color: var(--color-on-hold-text); } .TypographyPresentation--colorOnHoldStrong { color: var(--color-on-hold-text-strong); } .TypographyPresentation--colorInverse { color: var(--color-inverse-text); } .TypographyPresentation--colorInverseDark { color: var(--color-inverse-dark-text); } .TypographyPresentation--colorInverseWeak { color: var(--color-inverse-text-weak); } .TypographyPresentation--colorInverseDisabled { color: var(--color-inverse-text-disabled); } .TypographyPresentation--colorNavigation { color: var(--color-navigation-text); } .TypographyPresentation--colorNavigationWeak { color: var(--color-navigation-text-weak); } .TypographyPresentation--colorCopilotLandingScreen { color: var(--color-ai-copilot-landing-screen-text); } .TypographyPresentation--colorCopilotOutcome { color: var(--color-ai-copilot-outcome-card-text); } .TypographyPresentation--fontWeightLight { font-weight: 300; } .TypographyPresentation--fontWeightNormal { font-weight: 400; } .TypographyPresentation--fontWeightMedium { font-weight: 500; } .TypographyPresentation--fontWeightBold { font-weight: 700; } .TypographyPresentation--textAlignCenter { text-align: center; } .TypographyPresentation--textAlignLeft { text-align: left; } .TypographyPresentation--textAlignRight { text-align: right; } .TypographyPresentation--overflowWrap { overflow-wrap: anywhere; white-space: initial; word-break: break-word; } .TypographyPresentation--overflowTruncate { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .TypographyPresentation--numericVariantNormal { font-variant-numeric: normal; } .TypographyPresentation--numericVariantTabular { font-variant-numeric: tabular-nums; } .TypographyPresentation--wrapStylePretty { text-wrap: pretty; } .TypographyPresentation--textDecorationLineThrough { text-decoration-line: line-through; } .TypographyPresentation--h1.TypographyPresentation { font-size: 48px; line-height: 56px; } .TypographyPresentation--h2.TypographyPresentation { font-size: 32px; line-height: 40px; } .TypographyPresentation--h3.TypographyPresentation { font-size: 24px; line-height: 32px; } .TypographyPresentation--h4.TypographyPresentation { font-size: 20px; line-height: 28px; } .TypographyPresentation--h5.TypographyPresentation { font-size: 16px; line-height: 20px; } .TypographyPresentation--h6.TypographyPresentation { font-size: 14px; line-height: 20px; } .TypographyPresentation--small.TypographyPresentation { font-size: 12px; line-height: 18px; } .TypographyPresentation--medium.TypographyPresentation { font-size: 14px; line-height: 22px; } .TypographyPresentation--large.TypographyPresentation { font-size: 16px; line-height: 24px; } .TypographyPresentation--xlarge.TypographyPresentation { font-size: 20px; line-height: 28px; } .MarkText { background-color: transparent; } .MfaCodeVerificationInstruction-twoLineDisplay { flex-direction: row; display: flex; } .QrCode-img { width: 100%; height: 100%; } .ScreenReaderDescription-hiddenText { display: none; } .ScreenReaderOnly { clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; position: absolute; overflow: hidden; } .CircularDeterminateLoadingIndicator-spinner { transform: rotate(-90deg); } .CircularIndeterminateLoadingIndicator-spinner { animation: 0.67s linear infinite spinnerRotation; } @keyframes spinnerRotation { 0% { transform: rotate(0); } to { transform: rotate(360deg); } } .CircularIndeterminateLoadingIndicator-spinnerCircle { stroke-dasharray: 75 25; } .CircularLoadingIndicatorPresentation { animation: 0.5s linear animation-fadeIn; position: relative; overflow: hidden; } .CircularLoadingIndicatorPresentation .CircularLoadingIndicatorPresentation-track { stroke: var(--color-border); } .CircularLoadingIndicatorPresentation .CircularLoadingIndicatorPresentation-spinnerCircle { stroke: var(--color-border-hover); } .CircularLoadingIndicatorPresentation.CircularLoadingIndicatorPresentation--small { width: 12px; height: 12px; } .CircularLoadingIndicatorPresentation.CircularLoadingIndicatorPresentation--medium { width: 24px; height: 24px; margin: 4px auto; } .CircularLoadingIndicatorPresentation-track { fill: none; position: absolute; } .CircularLoadingIndicatorPresentation-spinner { fill: none; transform-origin: 50%; position: absolute; } .CircularLoadingIndicatorPresentation-spinnerCircle { stroke-dashoffset: 0; } .CircularLoadingIndicatorPresentation-spinnerCircle--rounded { stroke-linecap: round; } .LinearIndeterminateLoadingIndicator-progress { animation: 2.716s cubic-bezier(0.33, 0, 0.67, 1) infinite animateLeft, 2.716s cubic-bezier(0.33, 0, 0.26, 1) infinite animateRight; } @keyframes animateLeft { 0%, to { left: 0%; } 11.6%, 88.4% { left: 0%; } 50% { animation-timing-function: cubic-bezier(0.33, 0, 0.26, 1); left: 100%; } } @keyframes animateRight { 0%, to { right: 100%; } 38.4%, 66.6% { animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); right: 0%; } } .LinearLoadingIndicatorPresentation { border-radius: 3px; width: 100%; height: 6px; margin: 4px 0; position: relative; overflow: hidden; } .LinearLoadingIndicatorPresentation.LinearLoadingIndicatorPresentation { background-color: var(--color-border); } .LinearLoadingIndicatorPresentation .LinearLoadingIndicatorPresentation-progress { background-color: var(--color-success-background-strong); } .LinearLoadingIndicatorPresentation-progress { border-radius: 3px; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .LoadingIndicator { flex-shrink: 0; animation: 0.5s linear animation-fadeIn; overflow: hidden; } .LoadingIndicator--small { width: 16px; height: 16px; } .LoadingIndicator--medium { width: 32px; height: 32px; margin: 4px auto; } .LoadingIndicator-circle { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzMiAzMic+CjxsaW5lYXJHcmFkaWVudCBpZD0nRmFzdExvYWRpbmdJbmRpY2F0b3ItbGluZWFyR3JhZGllbnQnIGdyYWRpZW50VW5pdHM9J3VzZXJTcGFjZU9uVXNlJyB4MT0nMy41NDQ5JyB5MT0nMTYnIHgyPScyOC4zODg4JyB5Mj0nMTYnPgo8c3RvcCBvZmZzZXQ9JzAuNDE2OScgc3RvcC1jb2xvcj0nIzlDQTZBRicvPgo8c3RvcCBvZmZzZXQ9JzAuOTM3Nicgc3RvcC1jb2xvcj0ncmdiYSgyNDYsMjQ4LDI0OSwwKScvPgo8L2xpbmVhckdyYWRpZW50Pgo8Y2lyY2xlIGN4PScxNicgY3k9JzE2JyByPScxMScgc3R5bGU9J2ZpbGw6IG5vbmU7IHN0cm9rZTogdXJsKCNGYXN0TG9hZGluZ0luZGljYXRvci1saW5lYXJHcmFkaWVudCk7IHN0cm9rZS13aWR0aDogMjsnPjwvY2lyY2xlPjwvc3ZnPg==); width: 100%; height: 100%; animation: 0.67s linear infinite LoadingIndicator-rotation; } .LoadingIndicator-circle.LoadingIndicator-circle--inverse { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzMiAzMic+CiAgPGxpbmVhckdyYWRpZW50IGlkPSdGYXN0TG9hZGluZ0luZGljYXRvci1saW5lYXJHcmFkaWVudCcgZ3JhZGllbnRVbml0cz0ndXNlclNwYWNlT25Vc2UnIHgxPSczLjU0NDknIHkxPScxNicgeDI9JzI4LjM4ODgnIHkyPScxNic+CiAgICA8c3RvcCBvZmZzZXQ9JzAuNDE2OScgc3RvcC1jb2xvcj0ncmdiYSgyNTYsMjU2LDI1NiwwLjg4KScvPgogICAgPHN0b3Agb2Zmc2V0PScwLjkzNzYnIHN0b3AtY29sb3I9J3JnYmEoMjU2LDI1NiwyNTYsMCknLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxjaXJjbGUgY3g9JzE2JyBjeT0nMTYnIHI9JzExJyBzdHlsZT0nZmlsbDogbm9uZTsgc3Ryb2tlOiB1cmwoI0Zhc3RMb2FkaW5nSW5kaWNhdG9yLWxpbmVhckdyYWRpZW50KTsgc3Ryb2tlLXdpZHRoOiAyOyc+PC9jaXJjbGU+Cjwvc3ZnPg==); } @keyframes LoadingIndicator-rotation { 0% { transform: rotate(0); } to { transform: rotate(360deg); } } .TotpQrCodeContainer-container { background: linear-gradient(var(--color-border), var(--color-border)) top left, linear-gradient(var(--color-border), var(--color-border)) top left, linear-gradient(var(--color-border), var(--color-border)) bottom left, linear-gradient(var(--color-border), var(--color-border)) bottom left, linear-gradient(var(--color-border), var(--color-border)) top right, linear-gradient(var(--color-border), var(--color-border)) top right, linear-gradient(var(--color-border), var(--color-border)) bottom right, linear-gradient(var(--color-border), var(--color-border)) bottom right; background-repeat: no-repeat; background-size: 2px 20px, 20px 2px; background-origin: border-box; border: 2px solid transparent; align-content: center; width: 160px; height: 160px; display: flex; } :root, :root .DesignTokenThemeOverrideRegionInternal--light { --color-avatar-illustration-blue-foreground: #8aadf2; --color-avatar-illustration-blue-background: #dee8fc; --color-avatar-illustration-purple-foreground: #a29aed; --color-avatar-illustration-purple-background: #e1defc; --color-avatar-illustration-orange-foreground: #f2a28a; --color-avatar-illustration-orange-background: #fce5de; --color-avatar-illustration-green-foreground: #7bba9e; --color-avatar-illustration-green-background: #d1ede0; --color-avatar-illustration-gray-foreground: #a6a3a2; --color-avatar-illustration-gray-background: #ebe7e6; } @media print { :root { --color-avatar-illustration-blue-foreground: #8aadf2; --color-avatar-illustration-blue-background: #dee8fc; --color-avatar-illustration-purple-foreground: #a29aed; --color-avatar-illustration-purple-background: #e1defc; --color-avatar-illustration-orange-foreground: #f2a28a; --color-avatar-illustration-orange-background: #fce5de; --color-avatar-illustration-green-foreground: #7bba9e; --color-avatar-illustration-green-background: #d1ede0; --color-avatar-illustration-gray-foreground: #a6a3a2; --color-avatar-illustration-gray-background: #ebe7e6; } } :root .DesignTokenThemeSelectors-theme--darkMode { --color-avatar-illustration-blue-foreground: #5281e3; --color-avatar-illustration-blue-background: #9dbaf5; --color-avatar-illustration-purple-foreground: #7c72db; --color-avatar-illustration-purple-background: #aca5f0; --color-avatar-illustration-orange-foreground: #e37756; --color-avatar-illustration-orange-background: #f5af9a; --color-avatar-illustration-green-foreground: #418768; --color-avatar-illustration-green-background: #89c4aa; --color-avatar-illustration-gray-foreground: #807e7d; --color-avatar-illustration-gray-background: #b3b0af; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode { --color-avatar-illustration-blue-foreground: #5281e3; --color-avatar-illustration-blue-background: #9dbaf5; --color-avatar-illustration-purple-foreground: #7c72db; --color-avatar-illustration-purple-background: #aca5f0; --color-avatar-illustration-orange-foreground: #e37756; --color-avatar-illustration-orange-background: #f5af9a; --color-avatar-illustration-green-foreground: #418768; --color-avatar-illustration-green-background: #89c4aa; --color-avatar-illustration-gray-foreground: #807e7d; --color-avatar-illustration-gray-background: #b3b0af; } } .AvatarIllustration { border-radius: 50%; overflow: hidden; } .AvatarIllustration--sizeXsmall.AvatarIllustration { height: var(--avatar-diameter-xsmall); width: var(--avatar-diameter-xsmall); } .AvatarIllustration--sizeSmall.AvatarIllustration { height: var(--avatar-diameter-small); width: var(--avatar-diameter-small); } .AvatarIllustration--sizeMedium.AvatarIllustration { height: var(--avatar-diameter-medium); width: var(--avatar-diameter-medium); } .AvatarIllustration--sizeLarge.AvatarIllustration { height: var(--avatar-diameter-large); width: var(--avatar-diameter-large); } .AvatarIllustration--sizeXlarge.AvatarIllustration { height: var(--avatar-diameter-xlarge); width: var(--avatar-diameter-xlarge); } .AvatarIllustration--sizeHuge.AvatarIllustration { height: var(--avatar-diameter-huge); width: var(--avatar-diameter-huge); } .AvatarIllustration--sizeMega.AvatarIllustration { height: var(--avatar-diameter-mega); width: var(--avatar-diameter-mega); } .AvatarIllustration--sizeXmega.AvatarIllustration { height: var(--avatar-diameter-xmega); width: var(--avatar-diameter-xmega); } .AvatarIllustration--colorBlue.AvatarIllustration { background-color: var(--color-avatar-illustration-blue-background); } .AvatarIllustration--colorBlue .AvatarIllustration-iconForeground { fill: var(--color-avatar-illustration-blue-foreground); stroke: var(--color-avatar-illustration-blue-foreground); } .AvatarIllustration--colorPurple.AvatarIllustration { background-color: var(--color-avatar-illustration-purple-background); } .AvatarIllustration--colorPurple .AvatarIllustration-iconForeground { fill: var(--color-avatar-illustration-purple-foreground); stroke: var(--color-avatar-illustration-purple-foreground); } .AvatarIllustration--colorGray.AvatarIllustration { background-color: var(--color-avatar-illustration-gray-background); } .AvatarIllustration--colorGray .AvatarIllustration-iconForeground { fill: var(--color-avatar-illustration-gray-foreground); stroke: var(--color-avatar-illustration-gray-foreground); } .AvatarIllustration--colorGreen.AvatarIllustration { background-color: var(--color-avatar-illustration-green-background); } .AvatarIllustration--colorGreen .AvatarIllustration-iconForeground { fill: var(--color-avatar-illustration-green-foreground); stroke: var(--color-avatar-illustration-green-foreground); } .AvatarIllustration--colorOrange.AvatarIllustration { background-color: var(--color-avatar-illustration-orange-background); } .AvatarIllustration--colorOrange .AvatarIllustration-iconForeground { fill: var(--color-avatar-illustration-orange-foreground); stroke: var(--color-avatar-illustration-orange-foreground); } .Icon { flex: none; width: 16px; height: 16px; } .Icon.Icon--small { width: 16px; height: 16px; } .Icon.Icon--large { width: 32px; height: 32px; } .MiniIcon { flex: none; width: 12px; height: 12px; } .MiniIcon.MiniIcon--small { width: 12px; height: 12px; } .MiniIcon.MiniIcon--large { width: 24px; height: 24px; } .NavIcon { width: 20px; height: 20px; } .PortfolioGenericIcon, .PortfolioGenericMiniIcon, .PortfolioNavIcon { fill-rule: evenodd; } .Stack--align-start { align-items: start; } .Stack--align-center { align-items: center; } .Stack--align-end { align-items: end; } .Stack--align-stretch { align-items: stretch; } .Stack--align-baseline { align-items: baseline; } .Stack--direction-row { flex-direction: row; } .Stack--direction-column { flex-direction: column; } .Stack--display-block { display: flex; } .Stack--display-inline { display: inline-flex; } .Stack--justify-start { justify-content: start; } .Stack--justify-center { justify-content: center; } .Stack--justify-end { justify-content: end; } .Stack--justify-space-between { justify-content: space-between; } .Stack--justify-space-around { justify-content: space-around; } .Stack--spacing-spacing-0 { gap: 0; } .Stack--spacing-spacing-4 { gap: 4px; } .Stack--spacing-spacing-8 { gap: 8px; } .Stack--spacing-spacing-12 { gap: 12px; } .Stack--spacing-spacing-16 { gap: 16px; } .Stack--spacing-spacing-24 { gap: 24px; } .Stack--spacing-spacing-32 { gap: 32px; } .Stack--spacing-spacing-48 { gap: 48px; } .Stack--spacing-spacing-64 { gap: 64px; } .Stack--spacing-spacing-80 { gap: 80px; } .Stack.Stack--wrap { flex-wrap: wrap; } .Stack--spacer { flex: 1; min-width: 0; min-height: 0; } .Stack--inflexible { flex: none; } .MessageBannerThemeablePresentation { box-sizing: border-box; flex-shrink: 0; width: 100%; } .MessageBannerThemeablePresentation.MessageBannerThemeablePresentation--sizeMedium { min-height: 40px; padding: 4px 16px; } .MessageBannerThemeablePresentation.MessageBannerThemeablePresentation--sizeSmall { min-height: 32px; padding: 6px 8px; } .MessageBannerThemeablePresentation--sizeSmall .MessageBannerThemeablePresentation-icon, .MessageBannerThemeablePresentation--sizeMedium .MessageBannerThemeablePresentation-icon { margin-top: 3px; } .MessageBannerThemeablePresentation-button { flex-shrink: 0; } .MessageBannerInlinePresentation.MessageBannerInlinePresentation--sentimentDefault.MessageBannerThemeablePresentation { background-color: var(--color-background-medium); color: var(--color-text); fill: var(--color-icon); } .MessageBannerInlinePresentation.MessageBannerInlinePresentation--sentimentSuccess.MessageBannerThemeablePresentation { background-color: var(--color-success-background); color: var(--color-success-text); fill: var(--color-success-icon); } .MessageBannerInlinePresentation.MessageBannerInlinePresentation--sentimentWarning.MessageBannerThemeablePresentation { background-color: var(--color-warning-background); color: var(--color-warning-text); fill: var(--color-warning-icon); } .MessageBannerInlinePresentation.MessageBannerInlinePresentation--sentimentUpsell.MessageBannerThemeablePresentation { background-color: var(--color-upsell-background); color: var(--color-upsell-text); fill: var(--color-upsell-icon); } .MessageBannerInlinePresentation.MessageBannerInlinePresentation--sentimentDanger.MessageBannerThemeablePresentation { background-color: var(--color-danger-background); color: var(--color-danger-text); fill: var(--color-danger-icon); } .MessageBannerInlinePresentation.MessageBannerInlinePresentation--sentimentBeta.MessageBannerThemeablePresentation { background-color: var(--color-beta-background); color: var(--color-beta-text); fill: var(--color-beta-icon); } .MessageBannerInlinePresentation.MessageBannerInlinePresentation--sentimentSelected.MessageBannerThemeablePresentation { background-color: var(--color-selected-background); color: var(--color-selected-text); fill: var(--color-selected-icon); } .MessageBannerInlinePresentation.MessageBannerInlinePresentation--sentimentSuccessStrong.MessageBannerThemeablePresentation { background-color: var(--color-success-background-strong); color: var(--color-success-text-strong); fill: var(--color-success-icon-strong); } .MessageBannerInlinePresentation.MessageBannerInlinePresentation--sentimentWarningStrong.MessageBannerThemeablePresentation { background-color: var(--color-warning-background-strong); color: var(--color-warning-text-strong); fill: var(--color-warning-icon-strong); } .MessageBannerInlinePresentation.MessageBannerInlinePresentation--sentimentUpsellStrong.MessageBannerThemeablePresentation { background-color: var(--color-upsell-background-strong); color: var(--color-upsell-text-strong); fill: var(--color-upsell-icon-strong); } .MessageBannerInlinePresentation.MessageBannerInlinePresentation--sentimentDangerStrong.MessageBannerThemeablePresentation { background-color: var(--color-danger-background-strong); color: var(--color-danger-text-strong); fill: var(--color-danger-icon-strong); } .MessageBannerInlinePresentation.MessageBannerInlinePresentation--sentimentBetaStrong.MessageBannerThemeablePresentation { background-color: var(--color-beta-background-strong); color: var(--color-beta-text-strong); fill: var(--color-beta-icon-strong); } .MessageBannerInlinePresentation.MessageBannerInlinePresentation--sentimentSelectedStrong.MessageBannerThemeablePresentation { background-color: var(--color-selected-background-strong); color: var(--color-selected-text-strong); fill: var(--color-selected-icon-strong); } .MessageBannerInlinePresentation.MessageBannerThemeablePresentation { border-radius: 8px; } .MessageBannerPresentation.MessageBannerPresentation--sentimentDefault.MessageBannerThemeablePresentation { background-color: var(--color-background-medium); color: var(--color-text); fill: var(--color-icon); } .MessageBannerPresentation.MessageBannerPresentation--sentimentSuccess.MessageBannerThemeablePresentation { background-color: var(--color-success-background); color: var(--color-success-text); fill: var(--color-success-icon); } .MessageBannerPresentation.MessageBannerPresentation--sentimentWarning.MessageBannerThemeablePresentation { background-color: var(--color-warning-background); color: var(--color-warning-text); fill: var(--color-warning-icon); } .MessageBannerPresentation.MessageBannerPresentation--sentimentUpsell.MessageBannerThemeablePresentation { background-color: var(--color-upsell-background); color: var(--color-upsell-text); fill: var(--color-upsell-icon); } .MessageBannerPresentation.MessageBannerPresentation--sentimentDanger.MessageBannerThemeablePresentation { background-color: var(--color-danger-background); color: var(--color-danger-text); fill: var(--color-danger-icon); } .MessageBannerPresentation.MessageBannerPresentation--sentimentBeta.MessageBannerThemeablePresentation { background-color: var(--color-beta-background); color: var(--color-beta-text); fill: var(--color-beta-icon); } .MessageBannerPresentation.MessageBannerPresentation--sentimentSelected.MessageBannerThemeablePresentation { background-color: var(--color-selected-background); color: var(--color-selected-text); fill: var(--color-selected-icon); } .MessageBannerPresentation.MessageBannerPresentation--sentimentSuccessStrong.MessageBannerThemeablePresentation { background-color: var(--color-success-background-strong); color: var(--color-success-text-strong); fill: var(--color-success-icon-strong); } .MessageBannerPresentation.MessageBannerPresentation--sentimentWarningStrong.MessageBannerThemeablePresentation { background-color: var(--color-warning-background-strong); color: var(--color-warning-text-strong); fill: var(--color-warning-icon-strong); } .MessageBannerPresentation.MessageBannerPresentation--sentimentUpsellStrong.MessageBannerThemeablePresentation { background-color: var(--color-upsell-background-strong); color: var(--color-upsell-text-strong); fill: var(--color-upsell-icon-strong); } .MessageBannerPresentation.MessageBannerPresentation--sentimentDangerStrong.MessageBannerThemeablePresentation { background-color: var(--color-danger-background-strong); color: var(--color-danger-text-strong); fill: var(--color-danger-icon-strong); } .MessageBannerPresentation.MessageBannerPresentation--sentimentBetaStrong.MessageBannerThemeablePresentation { background-color: var(--color-beta-background-strong); color: var(--color-beta-text-strong); fill: var(--color-beta-icon-strong); } .MessageBannerPresentation.MessageBannerPresentation--sentimentSelectedStrong.MessageBannerThemeablePresentation { background-color: var(--color-selected-background-strong); color: var(--color-selected-text-strong); fill: var(--color-selected-icon-strong); } :root, :root .DesignTokenThemeOverrideRegionInternal--light { --color-button-text-shrouded: #fff; --color-button-icon-secondary-hover: #1e1f21; --color-button-icon-shrouded: #fff; --color-button-border-secondary: #cfcbcb; --color-button-border-secondary-hover: #afabac; --color-button-border-secondary-active: #6d6e6f; --color-button-border-subtle: transparent; --color-button-border-tertiary-experimental: transparent; --color-button-border-tertiary-hover-experimental: transparent; --color-button-background-primary-disabled: #fff; --color-button-background-secondary: #fff; --color-button-background-secondary-opaque: #fff; --color-button-background-secondary-hover: #f9f8f8; --color-button-background-secondary-hover-opaque: #f9f8f8; --color-button-background-secondary-active: #f5f3f3; --color-button-background-secondary-active-opaque: #f5f3f3; --color-button-background-tertiary-experimental: rgba(55, 23, 23, 0.03); --color-button-background-tertiary-hover-experimental: rgba(55, 23, 23, 0.05); --color-button-background-subtle: transparent; --color-button-background-subtle-pressed: #dbe0fd; --color-button-background-subtle-pressedHover: #e7e9fc; --color-button-background-subtle-pressedActive: #f1f2fc; --color-button-background-shrouded: rgba(30, 31, 33, 0.6); --color-button-background-shrouded-hover: rgba(30, 31, 33, 0.75); --color-button-background-shrouded-active: rgba(30, 31, 33, 0.84); --color-button-error-background: #fff; --color-button-error-background-secondary-hover: #fcdadc; --color-button-error-background-secondary-active: #f9c6ca; --color-button-error-border: #cfcbcb; --color-button-error-border-hover: #e37281; --color-button-error-border-pressed: #f1a2a9; --color-button-error-border-pressedHover: #e37281; --color-button-error-border-pressedActive: #e37281; --color-button-success-border: #cfcbcb; --color-button-success-border-hover: #58a182; --color-button-success-border-pressed: #8dc2ac; --color-button-success-border-pressedHover: #58a182; --color-button-success-border-pressedActive: #58a182; --color-button-success-background: #fff; --color-button-warning-border: #cfcbcb; --color-button-warning-border-hover: #b58e53; --color-button-warning-border-pressed: #f1bd6c; --color-button-warning-border-pressedHover: #b58e53; --color-button-warning-border-pressedActive: #b58e53; --color-button-warning-background: #fff; --color-button-creation-icon: #fff; --color-button-creation-background: #ff584a; --color-button-creation-background-hover: #f13b27; --color-button-creation-background-active: #e52e19; --color-button-danger-background-secondary-hover: #fcdadc; --color-button-danger-background-secondary-active: #f9c6ca; --color-button-danger-border-secondary: #f1a2a9; --color-button-upsell-text: #1e1f21; --color-button-upsell-text-extra: #fff; --color-button-upsell-background: #f1bd6c; --color-button-upsell-background-extra: #726ab9; --color-button-upsell-background-hover: #e8b668; --color-button-upsell-background-hover-extra: #575089; --color-button-upsell-background-active: #e2b266; --color-button-upsell-background-active-extra: #575089; --color-button-upsell-background-subtle: transparent; --color-button-upsell-background-subtle-hover: #fff6ee; --color-button-upsell-background-subtle-active: #ffecda; --color-button-upsell-icon-subtle: #f1bd6c; --color-button-upsell-icon-subtle-hover: #f1bd6c; --color-button-nux-background-active: #575089; --color-button-switch-icon: #fff; --color-button-switch-icon-disabled: #afabac; --color-button-switch-background: #8d8b8d; --color-button-switch-background-hover: #6d6e6f; --color-button-switch-background-disabled: #edeae9; } @media print { :root { --color-button-text-shrouded: #fff; --color-button-icon-secondary-hover: #1e1f21; --color-button-icon-shrouded: #fff; --color-button-border-secondary: #cfcbcb; --color-button-border-secondary-hover: #afabac; --color-button-border-secondary-active: #6d6e6f; --color-button-border-subtle: transparent; --color-button-border-tertiary-experimental: transparent; --color-button-border-tertiary-hover-experimental: transparent; --color-button-background-primary-disabled: #fff; --color-button-background-secondary: #fff; --color-button-background-secondary-opaque: #fff; --color-button-background-secondary-hover: #f9f8f8; --color-button-background-secondary-hover-opaque: #f9f8f8; --color-button-background-secondary-active: #f5f3f3; --color-button-background-secondary-active-opaque: #f5f3f3; --color-button-background-tertiary-experimental: rgba(55, 23, 23, 0.03); --color-button-background-tertiary-hover-experimental: rgba( 55, 23, 23, 0.05 ); --color-button-background-subtle: transparent; --color-button-background-subtle-pressed: #dbe0fd; --color-button-background-subtle-pressedHover: #e7e9fc; --color-button-background-subtle-pressedActive: #f1f2fc; --color-button-background-shrouded: rgba(30, 31, 33, 0.6); --color-button-background-shrouded-hover: rgba(30, 31, 33, 0.75); --color-button-background-shrouded-active: rgba(30, 31, 33, 0.84); --color-button-error-background: #fff; --color-button-error-background-secondary-hover: #fcdadc; --color-button-error-background-secondary-active: #f9c6ca; --color-button-error-border: #cfcbcb; --color-button-error-border-hover: #e37281; --color-button-error-border-pressed: #f1a2a9; --color-button-error-border-pressedHover: #e37281; --color-button-error-border-pressedActive: #e37281; --color-button-success-border: #cfcbcb; --color-button-success-border-hover: #58a182; --color-button-success-border-pressed: #8dc2ac; --color-button-success-border-pressedHover: #58a182; --color-button-success-border-pressedActive: #58a182; --color-button-success-background: #fff; --color-button-warning-border: #cfcbcb; --color-button-warning-border-hover: #b58e53; --color-button-warning-border-pressed: #f1bd6c; --color-button-warning-border-pressedHover: #b58e53; --color-button-warning-border-pressedActive: #b58e53; --color-button-warning-background: #fff; --color-button-creation-icon: #fff; --color-button-creation-background: #ff584a; --color-button-creation-background-hover: #f13b27; --color-button-creation-background-active: #e52e19; --color-button-danger-background-secondary-hover: #fcdadc; --color-button-danger-background-secondary-active: #f9c6ca; --color-button-danger-border-secondary: #f1a2a9; --color-button-upsell-text: #1e1f21; --color-button-upsell-text-extra: #fff; --color-button-upsell-background: #f1bd6c; --color-button-upsell-background-extra: #726ab9; --color-button-upsell-background-hover: #e8b668; --color-button-upsell-background-hover-extra: #575089; --color-button-upsell-background-active: #e2b266; --color-button-upsell-background-active-extra: #575089; --color-button-upsell-background-subtle: transparent; --color-button-upsell-background-subtle-hover: #fff6ee; --color-button-upsell-background-subtle-active: #ffecda; --color-button-upsell-icon-subtle: #f1bd6c; --color-button-upsell-icon-subtle-hover: #f1bd6c; --color-button-nux-background-active: #575089; --color-button-switch-icon: #fff; --color-button-switch-icon-disabled: #afabac; --color-button-switch-background: #8d8b8d; --color-button-switch-background-hover: #6d6e6f; --color-button-switch-background-disabled: #edeae9; } } :root .DesignTokenThemeSelectors-theme--darkMode { --color-button-text-shrouded: #fff; --color-button-icon-secondary-hover: #f5f4f3; --color-button-icon-shrouded: #fff; --color-button-border-secondary: #565557; --color-button-border-secondary-hover: #6a696a; --color-button-border-secondary-active: #a2a0a2; --color-button-border-subtle: transparent; --color-button-border-tertiary-experimental: transparent; --color-button-border-tertiary-hover-experimental: transparent; --color-button-background-primary-disabled: transparent; --color-button-background-secondary: transparent; --color-button-background-secondary-opaque: #1e1f21; --color-button-background-secondary-hover: rgba(255, 255, 255, 0.06); --color-button-background-secondary-hover-opaque: #252628; --color-button-background-secondary-active: rgba(255, 255, 255, 0.11); --color-button-background-secondary-active-opaque: #2a2b2d; --color-button-background-tertiary-experimental: rgba(255, 255, 255, 0.06); --color-button-background-tertiary-hover-experimental: rgba( 255, 255, 255, 0.11 ); --color-button-background-subtle: transparent; --color-button-background-subtle-pressed: #2a3c68; --color-button-background-subtle-pressedHover: #1a2843; --color-button-background-subtle-pressedActive: #172237; --color-button-background-shrouded: rgba(30, 31, 33, 0.6); --color-button-background-shrouded-hover: rgba(30, 31, 33, 0.75); --color-button-background-shrouded-active: rgba(30, 31, 33, 0.84); --color-button-error-background: transparent; --color-button-error-background-secondary-hover: #64202c; --color-button-error-background-secondary-active: #6e2230; --color-button-error-border: #565557; --color-button-error-border-hover: #d1395a; --color-button-error-border-pressed: #b12d4b; --color-button-error-border-pressedHover: #d1395a; --color-button-error-border-pressedActive: #d1395a; --color-button-success-border: #565557; --color-button-success-border-hover: #4b8a73; --color-button-success-border-pressed: #32695d; --color-button-success-border-pressedHover: #4b8a73; --color-button-success-border-pressedActive: #4b8a73; --color-button-success-background: transparent; --color-button-warning-border: #565557; --color-button-warning-border-hover: #b89054; --color-button-warning-border-pressed: #735c38; --color-button-warning-border-pressedHover: #b89054; --color-button-warning-border-pressedActive: #b89054; --color-button-warning-background: transparent; --color-button-creation-icon: #f5f4f3; --color-button-creation-background: #ff584a; --color-button-creation-background-hover: #f13b27; --color-button-creation-background-active: #e52e19; --color-button-danger-background-secondary-hover: #64202c; --color-button-danger-background-secondary-active: #6e2230; --color-button-danger-border-secondary: #b12d4b; --color-button-upsell-text: #1e1f21; --color-button-upsell-text-extra: #f5f4f3; --color-button-upsell-background: #f1bd6c; --color-button-upsell-background-extra: #726ab9; --color-button-upsell-background-hover: #e8b668; --color-button-upsell-background-hover-extra: #a499ed; --color-button-upsell-background-active: #e2b266; --color-button-upsell-background-active-extra: #a499ed; --color-button-upsell-background-subtle: transparent; --color-button-upsell-background-subtle-hover: #3d3120; --color-button-upsell-background-subtle-active: #493b26; --color-button-upsell-icon-subtle: #f1bd6c; --color-button-upsell-icon-subtle-hover: #f1bd6c; --color-button-nux-background-active: #a499ed; --color-button-switch-icon: #f5f4f3; --color-button-switch-icon-disabled: #6a696a; --color-button-switch-background: #6a696a; --color-button-switch-background-hover: #a2a0a2; --color-button-switch-background-disabled: #424244; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode { --color-button-text-shrouded: #fff; --color-button-icon-secondary-hover: #f5f4f3; --color-button-icon-shrouded: #fff; --color-button-border-secondary: #565557; --color-button-border-secondary-hover: #6a696a; --color-button-border-secondary-active: #a2a0a2; --color-button-border-subtle: transparent; --color-button-border-tertiary-experimental: transparent; --color-button-border-tertiary-hover-experimental: transparent; --color-button-background-primary-disabled: transparent; --color-button-background-secondary: transparent; --color-button-background-secondary-opaque: #1e1f21; --color-button-background-secondary-hover: rgba(255, 255, 255, 0.06); --color-button-background-secondary-hover-opaque: #252628; --color-button-background-secondary-active: rgba(255, 255, 255, 0.11); --color-button-background-secondary-active-opaque: #2a2b2d; --color-button-background-tertiary-experimental: rgba(255, 255, 255, 0.06); --color-button-background-tertiary-hover-experimental: rgba( 255, 255, 255, 0.11 ); --color-button-background-subtle: transparent; --color-button-background-subtle-pressed: #2a3c68; --color-button-background-subtle-pressedHover: #1a2843; --color-button-background-subtle-pressedActive: #172237; --color-button-background-shrouded: rgba(30, 31, 33, 0.6); --color-button-background-shrouded-hover: rgba(30, 31, 33, 0.75); --color-button-background-shrouded-active: rgba(30, 31, 33, 0.84); --color-button-error-background: transparent; --color-button-error-background-secondary-hover: #64202c; --color-button-error-background-secondary-active: #6e2230; --color-button-error-border: #565557; --color-button-error-border-hover: #d1395a; --color-button-error-border-pressed: #b12d4b; --color-button-error-border-pressedHover: #d1395a; --color-button-error-border-pressedActive: #d1395a; --color-button-success-border: #565557; --color-button-success-border-hover: #4b8a73; --color-button-success-border-pressed: #32695d; --color-button-success-border-pressedHover: #4b8a73; --color-button-success-border-pressedActive: #4b8a73; --color-button-success-background: transparent; --color-button-warning-border: #565557; --color-button-warning-border-hover: #b89054; --color-button-warning-border-pressed: #735c38; --color-button-warning-border-pressedHover: #b89054; --color-button-warning-border-pressedActive: #b89054; --color-button-warning-background: transparent; --color-button-creation-icon: #f5f4f3; --color-button-creation-background: #ff584a; --color-button-creation-background-hover: #f13b27; --color-button-creation-background-active: #e52e19; --color-button-danger-background-secondary-hover: #64202c; --color-button-danger-background-secondary-active: #6e2230; --color-button-danger-border-secondary: #b12d4b; --color-button-upsell-text: #1e1f21; --color-button-upsell-text-extra: #f5f4f3; --color-button-upsell-background: #f1bd6c; --color-button-upsell-background-extra: #726ab9; --color-button-upsell-background-hover: #e8b668; --color-button-upsell-background-hover-extra: #a499ed; --color-button-upsell-background-active: #e2b266; --color-button-upsell-background-active-extra: #a499ed; --color-button-upsell-background-subtle: transparent; --color-button-upsell-background-subtle-hover: #3d3120; --color-button-upsell-background-subtle-active: #493b26; --color-button-upsell-icon-subtle: #f1bd6c; --color-button-upsell-icon-subtle-hover: #f1bd6c; --color-button-nux-background-active: #a499ed; --color-button-switch-icon: #f5f4f3; --color-button-switch-icon-disabled: #6a696a; --color-button-switch-background: #6a696a; --color-button-switch-background-hover: #a2a0a2; --color-button-switch-background-disabled: #424244; } } :root .DesignTokenThemeSelectors-theme--deuteranopiaMode, :root .DesignTokenThemeSelectors-theme--deuteranopiaMode .DesignTokenThemeOverrideRegionInternal--light { --color-button-error-background-secondary-hover: #ffdacd; --color-button-error-background-secondary-active: #fe9f7f; --color-button-error-border-hover: #cb4e23; --color-button-error-border-pressed: #cb4e23; --color-button-error-border-pressedHover: #cb4e23; --color-button-error-border-pressedActive: #cb4e23; --color-button-success-border-hover: #56b761; --color-button-success-border-pressed: #56b761; --color-button-success-border-pressedHover: #56b761; --color-button-success-border-pressedActive: #56b761; --color-button-warning-border-hover: #ada654; --color-button-warning-border-pressed: #ada654; --color-button-warning-border-pressedHover: #ada654; --color-button-warning-border-pressedActive: #ada654; --color-button-danger-background-secondary-hover: #ffdacd; --color-button-danger-background-secondary-active: #fe9f7f; --color-button-danger-border-secondary: #cb4e23; --color-button-upsell-icon-subtle: #d6ce38; --color-button-upsell-icon-subtle-hover: #d6ce38; } :root .DesignTokenThemeSelectors-theme--darkMode.DesignTokenThemeSelectors-theme--deuteranopiaMode { --color-button-error-background-secondary-hover: #55200f; --color-button-error-background-secondary-active: #843217; --color-button-error-border-hover: #df5627; --color-button-error-border-pressed: #df5627; --color-button-error-border-pressedHover: #df5627; --color-button-error-border-pressedActive: #df5627; --color-button-success-border-hover: #2f6536; --color-button-success-border-pressed: #2f6536; --color-button-success-border-pressedHover: #2f6536; --color-button-success-border-pressedActive: #2f6536; --color-button-warning-border-hover: #5f5c2e; --color-button-warning-border-pressed: #5f5c2e; --color-button-warning-border-pressedHover: #5f5c2e; --color-button-warning-border-pressedActive: #5f5c2e; --color-button-danger-background-secondary-hover: #55200f; --color-button-danger-background-secondary-active: #843217; --color-button-danger-border-secondary: #df5627; --color-button-upsell-icon-subtle: #a29b4e; --color-button-upsell-icon-subtle-hover: #a29b4e; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode.DesignTokenThemeSelectors-theme--deuteranopiaMode { --color-button-error-background-secondary-hover: #55200f; --color-button-error-background-secondary-active: #843217; --color-button-error-border-hover: #df5627; --color-button-error-border-pressed: #df5627; --color-button-error-border-pressedHover: #df5627; --color-button-error-border-pressedActive: #df5627; --color-button-success-border-hover: #2f6536; --color-button-success-border-pressed: #2f6536; --color-button-success-border-pressedHover: #2f6536; --color-button-success-border-pressedActive: #2f6536; --color-button-warning-border-hover: #5f5c2e; --color-button-warning-border-pressed: #5f5c2e; --color-button-warning-border-pressedHover: #5f5c2e; --color-button-warning-border-pressedActive: #5f5c2e; --color-button-danger-background-secondary-hover: #55200f; --color-button-danger-background-secondary-active: #843217; --color-button-danger-border-secondary: #df5627; --color-button-upsell-icon-subtle: #a29b4e; --color-button-upsell-icon-subtle-hover: #a29b4e; } } :root .DesignTokenThemeSelectors-theme--maroon .DesignTokenThemeOverrideRegionInternal--light { --color-button-text-shrouded: #fff; --color-button-icon-secondary-hover: #1e1f21; --color-button-icon-shrouded: #fff; --color-button-border-secondary: #cfcbcb; --color-button-border-secondary-hover: #afabac; --color-button-border-secondary-active: #6d6e6f; --color-button-border-subtle: transparent; --color-button-border-tertiary-experimental: transparent; --color-button-border-tertiary-hover-experimental: transparent; --color-button-background-primary-disabled: #fff; --color-button-background-secondary: #fff; --color-button-background-secondary-opaque: #fff; --color-button-background-secondary-hover: #f9f8f8; --color-button-background-secondary-hover-opaque: #f9f8f8; --color-button-background-secondary-active: #f5f3f3; --color-button-background-secondary-active-opaque: #f5f3f3; --color-button-background-tertiary-experimental: rgba(55, 23, 23, 0.03); --color-button-background-tertiary-hover-experimental: rgba(55, 23, 23, 0.05); --color-button-background-subtle: transparent; --color-button-background-subtle-pressed: #dbe0fd; --color-button-background-subtle-pressedHover: #e7e9fc; --color-button-background-subtle-pressedActive: #f1f2fc; --color-button-background-shrouded: rgba(30, 31, 33, 0.6); --color-button-background-shrouded-hover: rgba(30, 31, 33, 0.75); --color-button-background-shrouded-active: rgba(30, 31, 33, 0.84); --color-button-error-background: #fff; --color-button-error-background-secondary-hover: #fcdadc; --color-button-error-background-secondary-active: #f9c6ca; --color-button-error-border: #cfcbcb; --color-button-error-border-hover: #e37281; --color-button-error-border-pressed: #f1a2a9; --color-button-error-border-pressedHover: #e37281; --color-button-error-border-pressedActive: #e37281; --color-button-success-border: #cfcbcb; --color-button-success-border-hover: #58a182; --color-button-success-border-pressed: #8dc2ac; --color-button-success-border-pressedHover: #58a182; --color-button-success-border-pressedActive: #58a182; --color-button-success-background: #fff; --color-button-warning-border: #cfcbcb; --color-button-warning-border-hover: #b58e53; --color-button-warning-border-pressed: #f1bd6c; --color-button-warning-border-pressedHover: #b58e53; --color-button-warning-border-pressedActive: #b58e53; --color-button-warning-background: #fff; --color-button-creation-icon: #fff; --color-button-creation-background: #ff584a; --color-button-creation-background-hover: #f13b27; --color-button-creation-background-active: #e52e19; --color-button-danger-background-secondary-hover: #fcdadc; --color-button-danger-background-secondary-active: #f9c6ca; --color-button-danger-border-secondary: #f1a2a9; --color-button-upsell-text: #1e1f21; --color-button-upsell-text-extra: #fff; --color-button-upsell-background: #f1bd6c; --color-button-upsell-background-extra: #726ab9; --color-button-upsell-background-hover: #e8b668; --color-button-upsell-background-hover-extra: #575089; --color-button-upsell-background-active: #e2b266; --color-button-upsell-background-active-extra: #575089; --color-button-upsell-background-subtle: transparent; --color-button-upsell-background-subtle-hover: #fff6ee; --color-button-upsell-background-subtle-active: #ffecda; --color-button-upsell-icon-subtle: #f1bd6c; --color-button-upsell-icon-subtle-hover: #f1bd6c; --color-button-nux-background-active: #575089; --color-button-switch-icon: #fff; --color-button-switch-icon-disabled: #afabac; --color-button-switch-background: #8d8b8d; --color-button-switch-background-hover: #6d6e6f; --color-button-switch-background-disabled: #edeae9; } :root .DesignTokenThemeSelectors-theme--darkMode.DesignTokenThemeSelectors-theme--maroon { --color-button-icon-secondary-hover: #f8f4f6; --color-button-border-secondary: #5f2748; --color-button-border-secondary-hover: #8f5977; --color-button-background-secondary-opaque: #36172a; --color-button-background-secondary-hover-opaque: #3e1930; --color-button-background-secondary-active-opaque: #461d36; --color-button-error-border: #5f2748; --color-button-success-border: #5f2748; --color-button-warning-border: #5f2748; --color-button-creation-icon: #f8f4f6; --color-button-upsell-text: #36172a; --color-button-upsell-text-extra: #f8f4f6; --color-button-switch-icon: #f8f4f6; --color-button-switch-icon-disabled: #8f5977; --color-button-switch-background: #8f5977; --color-button-switch-background-hover: #bb97a9; --color-button-switch-background-disabled: #5f2748; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode.DesignTokenThemeSelectors-theme--maroon { --color-button-icon-secondary-hover: #f8f4f6; --color-button-border-secondary: #5f2748; --color-button-border-secondary-hover: #8f5977; --color-button-background-secondary-opaque: #36172a; --color-button-background-secondary-hover-opaque: #3e1930; --color-button-background-secondary-active-opaque: #461d36; --color-button-error-border: #5f2748; --color-button-success-border: #5f2748; --color-button-warning-border: #5f2748; --color-button-creation-icon: #f8f4f6; --color-button-upsell-text: #36172a; --color-button-upsell-text-extra: #f8f4f6; --color-button-switch-icon: #f8f4f6; --color-button-switch-icon-disabled: #8f5977; --color-button-switch-background: #8f5977; --color-button-switch-background-hover: #bb97a9; --color-button-switch-background-disabled: #5f2748; } } :root .DesignTokenThemeSelectors-theme--deuteranopiaMode.DesignTokenThemeSelectors-theme--maroon .DesignTokenThemeOverrideRegionInternal--light { --color-button-error-background-secondary-hover: #ffdacd; --color-button-error-background-secondary-active: #fe9f7f; --color-button-error-border-hover: #cb4e23; --color-button-error-border-pressed: #cb4e23; --color-button-error-border-pressedHover: #cb4e23; --color-button-error-border-pressedActive: #cb4e23; --color-button-success-border-hover: #56b761; --color-button-success-border-pressed: #56b761; --color-button-success-border-pressedHover: #56b761; --color-button-success-border-pressedActive: #56b761; --color-button-warning-border-hover: #ada654; --color-button-warning-border-pressed: #ada654; --color-button-warning-border-pressedHover: #ada654; --color-button-warning-border-pressedActive: #ada654; --color-button-danger-background-secondary-hover: #ffdacd; --color-button-danger-background-secondary-active: #fe9f7f; --color-button-danger-border-secondary: #cb4e23; --color-button-upsell-icon-subtle: #d6ce38; --color-button-upsell-icon-subtle-hover: #d6ce38; } :root .DesignTokenThemeSelectors-theme--blueUpsells { --color-button-upsell-text: #fff; --color-button-upsell-background: #4573d2; --color-button-upsell-background-hover: #426dc6; --color-button-upsell-background-active: #3f66ba; --color-button-upsell-background-subtle-hover: #e7e9fc; --color-button-upsell-background-subtle-active: #dbe0fd; --color-button-upsell-icon-subtle: #3f6ac4; --color-button-upsell-icon-subtle-hover: #3f6ac4; } :root .DesignTokenThemeSelectors-theme--blueUpsells .DesignTokenThemeOverrideRegionInternal--light { --color-button-text-shrouded: #fff; --color-button-icon-secondary-hover: #1e1f21; --color-button-icon-shrouded: #fff; --color-button-border-secondary: #cfcbcb; --color-button-border-secondary-hover: #afabac; --color-button-border-secondary-active: #6d6e6f; --color-button-border-subtle: transparent; --color-button-border-tertiary-experimental: transparent; --color-button-border-tertiary-hover-experimental: transparent; --color-button-background-primary-disabled: #fff; --color-button-background-secondary: #fff; --color-button-background-secondary-opaque: #fff; --color-button-background-secondary-hover: #f9f8f8; --color-button-background-secondary-hover-opaque: #f9f8f8; --color-button-background-secondary-active: #f5f3f3; --color-button-background-secondary-active-opaque: #f5f3f3; --color-button-background-tertiary-experimental: rgba(55, 23, 23, 0.03); --color-button-background-tertiary-hover-experimental: rgba(55, 23, 23, 0.05); --color-button-background-subtle: transparent; --color-button-background-subtle-pressed: #dbe0fd; --color-button-background-subtle-pressedHover: #e7e9fc; --color-button-background-subtle-pressedActive: #f1f2fc; --color-button-background-shrouded: rgba(30, 31, 33, 0.6); --color-button-background-shrouded-hover: rgba(30, 31, 33, 0.75); --color-button-background-shrouded-active: rgba(30, 31, 33, 0.84); --color-button-error-background: #fff; --color-button-error-background-secondary-hover: #fcdadc; --color-button-error-background-secondary-active: #f9c6ca; --color-button-error-border: #cfcbcb; --color-button-error-border-hover: #e37281; --color-button-error-border-pressed: #f1a2a9; --color-button-error-border-pressedHover: #e37281; --color-button-error-border-pressedActive: #e37281; --color-button-success-border: #cfcbcb; --color-button-success-border-hover: #58a182; --color-button-success-border-pressed: #8dc2ac; --color-button-success-border-pressedHover: #58a182; --color-button-success-border-pressedActive: #58a182; --color-button-success-background: #fff; --color-button-warning-border: #cfcbcb; --color-button-warning-border-hover: #b58e53; --color-button-warning-border-pressed: #f1bd6c; --color-button-warning-border-pressedHover: #b58e53; --color-button-warning-border-pressedActive: #b58e53; --color-button-warning-background: #fff; --color-button-creation-icon: #fff; --color-button-creation-background: #ff584a; --color-button-creation-background-hover: #f13b27; --color-button-creation-background-active: #e52e19; --color-button-danger-background-secondary-hover: #fcdadc; --color-button-danger-background-secondary-active: #f9c6ca; --color-button-danger-border-secondary: #f1a2a9; --color-button-upsell-text: #1e1f21; --color-button-upsell-text-extra: #fff; --color-button-upsell-background: #f1bd6c; --color-button-upsell-background-extra: #726ab9; --color-button-upsell-background-hover: #e8b668; --color-button-upsell-background-hover-extra: #575089; --color-button-upsell-background-active: #e2b266; --color-button-upsell-background-active-extra: #575089; --color-button-upsell-background-subtle: transparent; --color-button-upsell-background-subtle-hover: #fff6ee; --color-button-upsell-background-subtle-active: #ffecda; --color-button-upsell-icon-subtle: #f1bd6c; --color-button-upsell-icon-subtle-hover: #f1bd6c; --color-button-nux-background-active: #575089; --color-button-switch-icon: #fff; --color-button-switch-icon-disabled: #afabac; --color-button-switch-background: #8d8b8d; --color-button-switch-background-hover: #6d6e6f; --color-button-switch-background-disabled: #edeae9; } :root .DesignTokenThemeSelectors-theme--darkMode.DesignTokenThemeSelectors-theme--blueUpsells { --color-button-upsell-text: #fff; --color-button-upsell-background: #4573d2; --color-button-upsell-background-hover: #426dc6; --color-button-upsell-background-active: #3f66ba; --color-button-upsell-background-subtle-hover: #1a2843; --color-button-upsell-background-subtle-active: #2a3c68; --color-button-upsell-icon-subtle: #4573d2; --color-button-upsell-icon-subtle-hover: #4573d2; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode.DesignTokenThemeSelectors-theme--blueUpsells { --color-button-upsell-text: #fff; --color-button-upsell-background: #4573d2; --color-button-upsell-background-hover: #426dc6; --color-button-upsell-background-active: #3f66ba; --color-button-upsell-background-subtle-hover: #1a2843; --color-button-upsell-background-subtle-active: #2a3c68; --color-button-upsell-icon-subtle: #4573d2; --color-button-upsell-icon-subtle-hover: #4573d2; } } :root .DesignTokenThemeSelectors-theme--deuteranopiaMode.DesignTokenThemeSelectors-theme--blueUpsells .DesignTokenThemeOverrideRegionInternal--light { --color-button-error-background-secondary-hover: #ffdacd; --color-button-error-background-secondary-active: #fe9f7f; --color-button-error-border-hover: #cb4e23; --color-button-error-border-pressed: #cb4e23; --color-button-error-border-pressedHover: #cb4e23; --color-button-error-border-pressedActive: #cb4e23; --color-button-success-border-hover: #56b761; --color-button-success-border-pressed: #56b761; --color-button-success-border-pressedHover: #56b761; --color-button-success-border-pressedActive: #56b761; --color-button-warning-border-hover: #ada654; --color-button-warning-border-pressed: #ada654; --color-button-warning-border-pressedHover: #ada654; --color-button-warning-border-pressedActive: #ada654; --color-button-danger-background-secondary-hover: #ffdacd; --color-button-danger-background-secondary-active: #fe9f7f; --color-button-danger-border-secondary: #cb4e23; --color-button-upsell-icon-subtle: #d6ce38; --color-button-upsell-icon-subtle-hover: #d6ce38; } :root .DesignTokenThemeSelectors-theme--coralUpsells { --color-button-upsell-text: #1e1f21; --color-button-upsell-background: #ff584a; --color-button-upsell-background-hover: #e64c40; --color-button-upsell-background-active: #e3372a; --color-button-upsell-background-subtle-hover: #f9f8f8; --color-button-upsell-background-subtle-active: rgba(55, 23, 23, 0.03); --color-button-upsell-icon-subtle: #ff584a; --color-button-upsell-icon-subtle-hover: #ff584a; } :root .DesignTokenThemeSelectors-theme--coralUpsells .DesignTokenThemeOverrideRegionInternal--light { --color-button-text-shrouded: #fff; --color-button-icon-secondary-hover: #1e1f21; --color-button-icon-shrouded: #fff; --color-button-border-secondary: #cfcbcb; --color-button-border-secondary-hover: #afabac; --color-button-border-secondary-active: #6d6e6f; --color-button-border-subtle: transparent; --color-button-border-tertiary-experimental: transparent; --color-button-border-tertiary-hover-experimental: transparent; --color-button-background-primary-disabled: #fff; --color-button-background-secondary: #fff; --color-button-background-secondary-opaque: #fff; --color-button-background-secondary-hover: #f9f8f8; --color-button-background-secondary-hover-opaque: #f9f8f8; --color-button-background-secondary-active: #f5f3f3; --color-button-background-secondary-active-opaque: #f5f3f3; --color-button-background-tertiary-experimental: rgba(55, 23, 23, 0.03); --color-button-background-tertiary-hover-experimental: rgba(55, 23, 23, 0.05); --color-button-background-subtle: transparent; --color-button-background-subtle-pressed: #dbe0fd; --color-button-background-subtle-pressedHover: #e7e9fc; --color-button-background-subtle-pressedActive: #f1f2fc; --color-button-background-shrouded: rgba(30, 31, 33, 0.6); --color-button-background-shrouded-hover: rgba(30, 31, 33, 0.75); --color-button-background-shrouded-active: rgba(30, 31, 33, 0.84); --color-button-error-background: #fff; --color-button-error-background-secondary-hover: #fcdadc; --color-button-error-background-secondary-active: #f9c6ca; --color-button-error-border: #cfcbcb; --color-button-error-border-hover: #e37281; --color-button-error-border-pressed: #f1a2a9; --color-button-error-border-pressedHover: #e37281; --color-button-error-border-pressedActive: #e37281; --color-button-success-border: #cfcbcb; --color-button-success-border-hover: #58a182; --color-button-success-border-pressed: #8dc2ac; --color-button-success-border-pressedHover: #58a182; --color-button-success-border-pressedActive: #58a182; --color-button-success-background: #fff; --color-button-warning-border: #cfcbcb; --color-button-warning-border-hover: #b58e53; --color-button-warning-border-pressed: #f1bd6c; --color-button-warning-border-pressedHover: #b58e53; --color-button-warning-border-pressedActive: #b58e53; --color-button-warning-background: #fff; --color-button-creation-icon: #fff; --color-button-creation-background: #ff584a; --color-button-creation-background-hover: #f13b27; --color-button-creation-background-active: #e52e19; --color-button-danger-background-secondary-hover: #fcdadc; --color-button-danger-background-secondary-active: #f9c6ca; --color-button-danger-border-secondary: #f1a2a9; --color-button-upsell-text: #1e1f21; --color-button-upsell-text-extra: #fff; --color-button-upsell-background: #f1bd6c; --color-button-upsell-background-extra: #726ab9; --color-button-upsell-background-hover: #e8b668; --color-button-upsell-background-hover-extra: #575089; --color-button-upsell-background-active: #e2b266; --color-button-upsell-background-active-extra: #575089; --color-button-upsell-background-subtle: transparent; --color-button-upsell-background-subtle-hover: #fff6ee; --color-button-upsell-background-subtle-active: #ffecda; --color-button-upsell-icon-subtle: #f1bd6c; --color-button-upsell-icon-subtle-hover: #f1bd6c; --color-button-nux-background-active: #575089; --color-button-switch-icon: #fff; --color-button-switch-icon-disabled: #afabac; --color-button-switch-background: #8d8b8d; --color-button-switch-background-hover: #6d6e6f; --color-button-switch-background-disabled: #edeae9; } :root .DesignTokenThemeSelectors-theme--darkMode.DesignTokenThemeSelectors-theme--coralUpsells { --color-button-upsell-text: #f5f4f3; --color-button-upsell-background: #ff584a; --color-button-upsell-background-hover: #e64c40; --color-button-upsell-background-active: #e3372a; --color-button-upsell-background-subtle-hover: #252628; --color-button-upsell-background-subtle-active: #2c2c2e; --color-button-upsell-icon-subtle: #ff584a; --color-button-upsell-icon-subtle-hover: #ff584a; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode.DesignTokenThemeSelectors-theme--coralUpsells { --color-button-upsell-text: #f5f4f3; --color-button-upsell-background: #ff584a; --color-button-upsell-background-hover: #e64c40; --color-button-upsell-background-active: #e3372a; --color-button-upsell-background-subtle-hover: #252628; --color-button-upsell-background-subtle-active: #2c2c2e; --color-button-upsell-icon-subtle: #ff584a; --color-button-upsell-icon-subtle-hover: #ff584a; } } :root .DesignTokenThemeSelectors-theme--deuteranopiaMode.DesignTokenThemeSelectors-theme--coralUpsells .DesignTokenThemeOverrideRegionInternal--light { --color-button-error-background-secondary-hover: #ffdacd; --color-button-error-background-secondary-active: #fe9f7f; --color-button-error-border-hover: #cb4e23; --color-button-error-border-pressed: #cb4e23; --color-button-error-border-pressedHover: #cb4e23; --color-button-error-border-pressedActive: #cb4e23; --color-button-success-border-hover: #56b761; --color-button-success-border-pressed: #56b761; --color-button-success-border-pressedHover: #56b761; --color-button-success-border-pressedActive: #56b761; --color-button-warning-border-hover: #ada654; --color-button-warning-border-pressed: #ada654; --color-button-warning-border-pressedHover: #ada654; --color-button-warning-border-pressedActive: #ada654; --color-button-danger-background-secondary-hover: #ffdacd; --color-button-danger-background-secondary-active: #fe9f7f; --color-button-danger-border-secondary: #cb4e23; --color-button-upsell-icon-subtle: #d6ce38; --color-button-upsell-icon-subtle-hover: #d6ce38; } :root .DesignTokenThemeSelectors-theme--purpleUpsells { --color-button-upsell-text: #fff; --color-button-upsell-background: #6a0085; --color-button-upsell-background-hover: #570c6a; --color-button-upsell-background-active: #410e4e; --color-button-upsell-background-subtle-hover: #f9f8f8; --color-button-upsell-background-subtle-active: rgba(55, 23, 23, 0.03); --color-button-upsell-icon-subtle: #6a0085; --color-button-upsell-icon-subtle-hover: #6a0085; } :root .DesignTokenThemeSelectors-theme--purpleUpsells .DesignTokenThemeOverrideRegionInternal--light { --color-button-text-shrouded: #fff; --color-button-icon-secondary-hover: #1e1f21; --color-button-icon-shrouded: #fff; --color-button-border-secondary: #cfcbcb; --color-button-border-secondary-hover: #afabac; --color-button-border-secondary-active: #6d6e6f; --color-button-border-subtle: transparent; --color-button-border-tertiary-experimental: transparent; --color-button-border-tertiary-hover-experimental: transparent; --color-button-background-primary-disabled: #fff; --color-button-background-secondary: #fff; --color-button-background-secondary-opaque: #fff; --color-button-background-secondary-hover: #f9f8f8; --color-button-background-secondary-hover-opaque: #f9f8f8; --color-button-background-secondary-active: #f5f3f3; --color-button-background-secondary-active-opaque: #f5f3f3; --color-button-background-tertiary-experimental: rgba(55, 23, 23, 0.03); --color-button-background-tertiary-hover-experimental: rgba(55, 23, 23, 0.05); --color-button-background-subtle: transparent; --color-button-background-subtle-pressed: #dbe0fd; --color-button-background-subtle-pressedHover: #e7e9fc; --color-button-background-subtle-pressedActive: #f1f2fc; --color-button-background-shrouded: rgba(30, 31, 33, 0.6); --color-button-background-shrouded-hover: rgba(30, 31, 33, 0.75); --color-button-background-shrouded-active: rgba(30, 31, 33, 0.84); --color-button-error-background: #fff; --color-button-error-background-secondary-hover: #fcdadc; --color-button-error-background-secondary-active: #f9c6ca; --color-button-error-border: #cfcbcb; --color-button-error-border-hover: #e37281; --color-button-error-border-pressed: #f1a2a9; --color-button-error-border-pressedHover: #e37281; --color-button-error-border-pressedActive: #e37281; --color-button-success-border: #cfcbcb; --color-button-success-border-hover: #58a182; --color-button-success-border-pressed: #8dc2ac; --color-button-success-border-pressedHover: #58a182; --color-button-success-border-pressedActive: #58a182; --color-button-success-background: #fff; --color-button-warning-border: #cfcbcb; --color-button-warning-border-hover: #b58e53; --color-button-warning-border-pressed: #f1bd6c; --color-button-warning-border-pressedHover: #b58e53; --color-button-warning-border-pressedActive: #b58e53; --color-button-warning-background: #fff; --color-button-creation-icon: #fff; --color-button-creation-background: #ff584a; --color-button-creation-background-hover: #f13b27; --color-button-creation-background-active: #e52e19; --color-button-danger-background-secondary-hover: #fcdadc; --color-button-danger-background-secondary-active: #f9c6ca; --color-button-danger-border-secondary: #f1a2a9; --color-button-upsell-text: #1e1f21; --color-button-upsell-text-extra: #fff; --color-button-upsell-background: #f1bd6c; --color-button-upsell-background-extra: #726ab9; --color-button-upsell-background-hover: #e8b668; --color-button-upsell-background-hover-extra: #575089; --color-button-upsell-background-active: #e2b266; --color-button-upsell-background-active-extra: #575089; --color-button-upsell-background-subtle: transparent; --color-button-upsell-background-subtle-hover: #fff6ee; --color-button-upsell-background-subtle-active: #ffecda; --color-button-upsell-icon-subtle: #f1bd6c; --color-button-upsell-icon-subtle-hover: #f1bd6c; --color-button-nux-background-active: #575089; --color-button-switch-icon: #fff; --color-button-switch-icon-disabled: #afabac; --color-button-switch-background: #8d8b8d; --color-button-switch-background-hover: #6d6e6f; --color-button-switch-background-disabled: #edeae9; } :root .DesignTokenThemeSelectors-theme--darkMode.DesignTokenThemeSelectors-theme--purpleUpsells { --color-button-upsell-text: #f5f4f3; --color-button-upsell-background: #6a0085; --color-button-upsell-background-hover: #570c6a; --color-button-upsell-background-active: #410e4e; --color-button-upsell-background-subtle-hover: #252628; --color-button-upsell-background-subtle-active: #2c2c2e; --color-button-upsell-icon-subtle: #6a0085; --color-button-upsell-icon-subtle-hover: #6a0085; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode.DesignTokenThemeSelectors-theme--purpleUpsells { --color-button-upsell-text: #f5f4f3; --color-button-upsell-background: #6a0085; --color-button-upsell-background-hover: #570c6a; --color-button-upsell-background-active: #410e4e; --color-button-upsell-background-subtle-hover: #252628; --color-button-upsell-background-subtle-active: #2c2c2e; --color-button-upsell-icon-subtle: #6a0085; --color-button-upsell-icon-subtle-hover: #6a0085; } } :root .DesignTokenThemeSelectors-theme--deuteranopiaMode.DesignTokenThemeSelectors-theme--purpleUpsells .DesignTokenThemeOverrideRegionInternal--light { --color-button-error-background-secondary-hover: #ffdacd; --color-button-error-background-secondary-active: #fe9f7f; --color-button-error-border-hover: #cb4e23; --color-button-error-border-pressed: #cb4e23; --color-button-error-border-pressedHover: #cb4e23; --color-button-error-border-pressedActive: #cb4e23; --color-button-success-border-hover: #56b761; --color-button-success-border-pressed: #56b761; --color-button-success-border-pressedHover: #56b761; --color-button-success-border-pressedActive: #56b761; --color-button-warning-border-hover: #ada654; --color-button-warning-border-pressed: #ada654; --color-button-warning-border-pressedHover: #ada654; --color-button-warning-border-pressedActive: #ada654; --color-button-danger-background-secondary-hover: #ffdacd; --color-button-danger-background-secondary-active: #fe9f7f; --color-button-danger-border-secondary: #cb4e23; --color-button-upsell-icon-subtle: #d6ce38; --color-button-upsell-icon-subtle-hover: #d6ce38; } :root, :root .DesignTokenThemeOverrideRegionInternal--light { --color-box-shadow-small: 0 1px 4px 0 rgba(109, 110, 111, 0.08); --color-box-shadow-medium: 0 3px 8px 0 rgba(109, 110, 111, 0.1); --color-box-shadow-large: 0 6px 12px 0 rgba(109, 110, 111, 0.12); --color-box-shadow-large-dark: 0 5px 20px 0 rgba(109, 110, 111, 0.25); --color-box-shadow-none-inset: inset 0 0 0 -0.01 #fff; --color-box-shadow-top-small: 0 -1px 4px 0 rgba(109, 110, 111, 0.08); --color-box-shadow-top-small-inset: inset 0 4px 4px -2px rgba(109, 110, 111, 0.08); --color-box-shadow-top-large: 0 -5px 20px 0 rgba(109, 110, 111, 0.08); --color-box-shadow-bottom-small: 0 1px 4px 0 rgba(109, 110, 111, 0.08); --color-box-shadow-bottom-small-inset: inset 0 -4px 4px -2px rgba(109, 110, 111, 0.08); --color-box-shadow-marketing: 0 14px 80px 0 rgba(109, 110, 111, 0.08); } @media print { :root { --color-box-shadow-small: 0 1px 4px 0 rgba(109, 110, 111, 0.08); --color-box-shadow-medium: 0 3px 8px 0 rgba(109, 110, 111, 0.1); --color-box-shadow-large: 0 6px 12px 0 rgba(109, 110, 111, 0.12); --color-box-shadow-large-dark: 0 5px 20px 0 rgba(109, 110, 111, 0.25); --color-box-shadow-none-inset: inset 0 0 0 -0.01 #fff; --color-box-shadow-top-small: 0 -1px 4px 0 rgba(109, 110, 111, 0.08); --color-box-shadow-top-small-inset: inset 0 4px 4px -2px rgba(109, 110, 111, 0.08); --color-box-shadow-top-large: 0 -5px 20px 0 rgba(109, 110, 111, 0.08); --color-box-shadow-bottom-small: 0 1px 4px 0 rgba(109, 110, 111, 0.08); --color-box-shadow-bottom-small-inset: inset 0 -4px 4px -2px rgba(109, 110, 111, 0.08); --color-box-shadow-marketing: 0 14px 80px 0 rgba(109, 110, 111, 0.08); } } :root .DesignTokenThemeSelectors-theme--darkMode { --color-box-shadow-small: 0 1px 4px 0 rgba(0, 0, 0, 0.24), 0 0 0 1px #424244; --color-box-shadow-medium: 0 3px 8px 0 rgba(0, 0, 0, 0.24), 0 0 0 1px #424244; --color-box-shadow-large: 0 6px 12px 0 rgba(0, 0, 0, 0.24), 0 0 0 1px #424244; --color-box-shadow-large-dark: 0 0 0 1px #424244; --color-box-shadow-none-inset: 0 0 0 -0.01 #1e1f21; --color-box-shadow-top-small: 0 -1px 4px 0 rgba(0, 0, 0, 0.24), 0 0 0 1px #424244; --color-box-shadow-top-small-inset: inset 0 4px 4px -2px rgba(0, 0, 0, 0.24), 0 0 0 1px #424244; --color-box-shadow-top-large: 0 0 0 1px #424244; --color-box-shadow-bottom-small: 0 1px 4px 0 rgba(0, 0, 0, 0.24), 0 1px #424244; --color-box-shadow-bottom-small-inset: inset 0 -4px 4px -2px rgba(0, 0, 0, 0.24), 0 0 0 1px #424244; --color-box-shadow-marketing: 0 0 0 1px #424244; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode { --color-box-shadow-small: 0 1px 4px 0 rgba(0, 0, 0, 0.24), 0 0 0 1px #424244; --color-box-shadow-medium: 0 3px 8px 0 rgba(0, 0, 0, 0.24), 0 0 0 1px #424244; --color-box-shadow-large: 0 6px 12px 0 rgba(0, 0, 0, 0.24), 0 0 0 1px #424244; --color-box-shadow-large-dark: 0 0 0 1px #424244; --color-box-shadow-none-inset: 0 0 0 -0.01 #1e1f21; --color-box-shadow-top-small: 0 -1px 4px 0 rgba(0, 0, 0, 0.24), 0 0 0 1px #424244; --color-box-shadow-top-small-inset: inset 0 4px 4px -2px rgba(0, 0, 0, 0.24), 0 0 0 1px #424244; --color-box-shadow-top-large: 0 0 0 1px #424244; --color-box-shadow-bottom-small: 0 1px 4px 0 rgba(0, 0, 0, 0.24), 0 1px #424244; --color-box-shadow-bottom-small-inset: inset 0 -4px 4px -2px rgba(0, 0, 0, 0.24), 0 0 0 1px #424244; --color-box-shadow-marketing: 0 0 0 1px #424244; } } :root .DesignTokenThemeSelectors-theme--maroon .DesignTokenThemeOverrideRegionInternal--light { --color-box-shadow-small: 0 1px 4px 0 rgba(109, 110, 111, 0.08); --color-box-shadow-medium: 0 3px 8px 0 rgba(109, 110, 111, 0.1); --color-box-shadow-large: 0 6px 12px 0 rgba(109, 110, 111, 0.12); --color-box-shadow-large-dark: 0 5px 20px 0 rgba(109, 110, 111, 0.25); --color-box-shadow-none-inset: inset 0 0 0 -0.01 #fff; --color-box-shadow-top-small: 0 -1px 4px 0 rgba(109, 110, 111, 0.08); --color-box-shadow-top-small-inset: inset 0 4px 4px -2px rgba(109, 110, 111, 0.08); --color-box-shadow-top-large: 0 -5px 20px 0 rgba(109, 110, 111, 0.08); --color-box-shadow-bottom-small: 0 1px 4px 0 rgba(109, 110, 111, 0.08); --color-box-shadow-bottom-small-inset: inset 0 -4px 4px -2px rgba(109, 110, 111, 0.08); --color-box-shadow-marketing: 0 14px 80px 0 rgba(109, 110, 111, 0.08); } :root .DesignTokenThemeSelectors-theme--darkMode.DesignTokenThemeSelectors-theme--maroon { --color-box-shadow-small: 0 0 0 1px #5f2748; --color-box-shadow-medium: 0 0 0 1px #5f2748; --color-box-shadow-large: 0 0 0 1px #5f2748; --color-box-shadow-large-dark: 0 0 0 1px #424244; --color-box-shadow-none-inset: 0 0 0 -0.01 #36172a; --color-box-shadow-top-small: 0 0 0 1px #5f2748; --color-box-shadow-top-small-inset: 0 0 0 1px #5f2748; --color-box-shadow-top-large: 0 0 0 1px #5f2748; --color-box-shadow-bottom-small: 0 1px #5f2748; --color-box-shadow-bottom-small-inset: 0 0 0 1px #5f2748; --color-box-shadow-marketing: 0 0 0 1px #5f2748; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode.DesignTokenThemeSelectors-theme--maroon { --color-box-shadow-small: 0 0 0 1px #5f2748; --color-box-shadow-medium: 0 0 0 1px #5f2748; --color-box-shadow-large: 0 0 0 1px #5f2748; --color-box-shadow-large-dark: 0 0 0 1px #424244; --color-box-shadow-none-inset: 0 0 0 -0.01 #36172a; --color-box-shadow-top-small: 0 0 0 1px #5f2748; --color-box-shadow-top-small-inset: 0 0 0 1px #5f2748; --color-box-shadow-top-large: 0 0 0 1px #5f2748; --color-box-shadow-bottom-small: 0 1px #5f2748; --color-box-shadow-bottom-small-inset: 0 0 0 1px #5f2748; --color-box-shadow-marketing: 0 0 0 1px #5f2748; } } :root .DesignTokenThemeSelectors-theme--shadowRefreshNoShadow { --color-box-shadow-small: none; --color-box-shadow-medium: none; --color-box-shadow-large: none; --color-box-shadow-top-small: none; --color-box-shadow-top-small-inset: none; --color-box-shadow-bottom-small: none; --color-box-shadow-bottom-small-inset: none; } :root .DesignTokenThemeSelectors-theme--shadowRefreshNoShadow .DesignTokenThemeOverrideRegionInternal--light { --color-box-shadow-small: 0 1px 4px 0 rgba(109, 110, 111, 0.08); --color-box-shadow-medium: 0 3px 8px 0 rgba(109, 110, 111, 0.1); --color-box-shadow-large: 0 6px 12px 0 rgba(109, 110, 111, 0.12); --color-box-shadow-large-dark: 0 5px 20px 0 rgba(109, 110, 111, 0.25); --color-box-shadow-none-inset: inset 0 0 0 -0.01 #fff; --color-box-shadow-top-small: 0 -1px 4px 0 rgba(109, 110, 111, 0.08); --color-box-shadow-top-small-inset: inset 0 4px 4px -2px rgba(109, 110, 111, 0.08); --color-box-shadow-top-large: 0 -5px 20px 0 rgba(109, 110, 111, 0.08); --color-box-shadow-bottom-small: 0 1px 4px 0 rgba(109, 110, 111, 0.08); --color-box-shadow-bottom-small-inset: inset 0 -4px 4px -2px rgba(109, 110, 111, 0.08); --color-box-shadow-marketing: 0 14px 80px 0 rgba(109, 110, 111, 0.08); } :root .DesignTokenThemeSelectors-theme--darkMode.DesignTokenThemeSelectors-theme--shadowRefreshNoShadow { --color-box-shadow-small: 0 0 0 1px #424244; --color-box-shadow-medium: 0 0 0 1px #424244; --color-box-shadow-large: 0 0 0 1px #424244; --color-box-shadow-top-small: 0 0 0 1px #424244; --color-box-shadow-top-small-inset: 0 0 0 1px #424244; --color-box-shadow-bottom-small: 0 1px #424244; --color-box-shadow-bottom-small-inset: 0 0 0 1px #424244; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode.DesignTokenThemeSelectors-theme--shadowRefreshNoShadow { --color-box-shadow-small: 0 0 0 1px #424244; --color-box-shadow-medium: 0 0 0 1px #424244; --color-box-shadow-large: 0 0 0 1px #424244; --color-box-shadow-top-small: 0 0 0 1px #424244; --color-box-shadow-top-small-inset: 0 0 0 1px #424244; --color-box-shadow-bottom-small: 0 1px #424244; --color-box-shadow-bottom-small-inset: 0 0 0 1px #424244; } } :root { --level-1: 1; --level-2: 2; --level-3: 3; --level-4: 4; --level-5: 5; --level-6: 6; --level-7: 7; --level-8: 8; --level-9: 9; --level-10: 10; --level-ipc: 100; --level-popout: 150; --level-aiFloatingPane: 200; --level-tabbyCats: 200; --level-layer: 250; --level-modal: 300; --level-toast: 350; --level-creatureCelebration: 350; --level-desktopNavButtons: 350; --level-educationPopoverContent: 400; --level-attachmentPicker: 1000; --level-loadingScreen: 2000; --level-errorModal: 2050; --level-dragAndDropPreview: 2100; --level-browserExtensions: 2147480000; } .CustomScrollbarScrollable { flex: auto; min-height: 1px; position: relative; overflow: hidden; } .CustomScrollbarScrollable-scrollable { -ms-overflow-style: none; width: 125%; position: absolute; top: 0; bottom: 0; left: 0; overflow-x: hidden; overflow-y: auto; } .CustomScrollbarScrollable-scrollable::-webkit-scrollbar { display: none; } .CustomScrollbarScrollable-content { width: 80%; } .CustomScrollbarScrollable-shadow { display: none; } .CustomScrollbarScrollable-track { width: 6px; height: 100%; display: block; position: absolute; top: 0; right: 0; } .CustomScrollbarScrollable-thumb { background-color: var(--color-inverse-icon); border-radius: 25px; width: 100%; position: absolute; } .DragScrollListener--canDrag { cursor: move; cursor: grab; } .DragScrollListener--dragging, .DragScrollListener--dragging * { cursor: move; cursor: grabbing; } .DragScrollListener textarea, .DragScrollListener select, .DragScrollListener input, .DragScrollListener [contenteditable], .DragScrollListener .LayerPositioner { cursor: auto; } .DynamicBorderScrollable { isolation: isolate; min-height: 1px; position: relative; } .DynamicBorderScrollable-content { position: relative; } .DynamicBorderScrollable:before { content: ""; pointer-events: none; width: 100%; height: 100%; z-index: var(--level-1); transition: box-shadow 0.25s; position: absolute; top: 0; left: 0; } .DynamicBorderScrollable--canScrollUp:before { box-shadow: var(--color-box-shadow-top-small-inset); } .DynamicBorderScrollable--canScrollDown:before { box-shadow: var(--color-box-shadow-bottom-small-inset); } .DynamicBorderScrollable--canScrollDown.DynamicBorderScrollable--canScrollUp:before { box-shadow: var(--color-box-shadow-bottom-small-inset), var(--color-box-shadow-top-small-inset); } .ResizeListener, .ResizeListener-expand, .ResizeListener-shrink { pointer-events: none; visibility: hidden; position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; } .ResizeListener-expandChild, .ResizeListener-shrinkChild { position: absolute; top: 0; left: 0; } .ResizeListener-expandChild { width: 99999px; height: 99999px; } .ResizeListener-shrinkChild { width: 200%; height: 200%; } .Scrollable--withCompositingLayer { will-change: transform; } .Scrollable--vertical { min-height: 1px; overflow-y: auto; } .Scrollable--verticalForceScrollbar { overflow-y: scroll; } .Scrollable--horizontal { min-width: 1px; overflow-x: auto; } .Scrollable--horizontalForceScrollbar { overflow-x: scroll; } .Scrollable--both { min-width: 1px; min-height: 1px; overflow: auto; } .Scrollable--bothForceScrollbar { overflow: auto; } .ScrollbarSizeReference { opacity: 0; pointer-events: none; visibility: hidden; width: 100px; height: 100px; position: absolute; top: 0; left: -100px; overflow: scroll; } .StickinessListener { position: absolute; } .UseOpacityTransition { transition-property: opacity; transition-timing-function: cubic-bezier(0, 0, 1, 1); } .UseOpacityTransition-direction--enter { transition-duration: 0.1s; } .UseOpacityTransition-direction--exit { transition-duration: 75ms; transition-delay: 75ms; } .UseOpacityTransition-opacity0 { opacity: 0; } .UseOpacityTransition-opacity1 { opacity: 1; } .UseScaleTransition { transition-property: transform; } .UseScaleTransition-direction--enter { transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.05, 0.4, 0.2, 1); } .UseScaleTransition-direction--exit { transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.6, 0, 0.95, 0.6); } .UseScaleTransition-scale--scaleNone { transform: scale(0); } .UseScaleTransition-scale--scaleHalf { transform: scale(0.5); } .UseScaleTransition-scale--scaleFull { transform: scale(1); } .UseScaleTransition-transformOrigin--topLeft { transform-origin: 0 0; } .UseScaleTransition-transformOrigin--topRight { transform-origin: 100% 0; } .UseScaleTransition-transformOrigin--topCenter { transform-origin: top; } .UseScaleTransition-transformOrigin--bottomLeft { transform-origin: 0 100%; } .UseScaleTransition-transformOrigin--bottomRight { transform-origin: 100% 100%; } .UseScaleTransition-transformOrigin--bottomCenter { transform-origin: bottom; } .UseScaleTransition-transformOrigin--centerLeft { transform-origin: 0; } .UseScaleTransition-transformOrigin--centerRight { transform-origin: 100%; } .UseScaleTransition-transformOrigin--center { transform-origin: 50%; } .DesignTokenThemeOverrideRegion { color: var(--color-text); } .LayerPositioner { align-items: flex-start; width: 100vw; height: 0; font-size: 14px; display: flex; position: fixed; } .LayerPositioner.LayerPositioner { z-index: var(--level-layer); } .LayerPositioner.LayerPositioner--left, .LayerPositioner.LayerPositioner--alignRight { justify-content: flex-end; margin-left: -100vw; } .LayerPositioner.LayerPositioner--alignCenter { justify-content: center; margin-left: -50vw; } .LayerPositioner.LayerPositioner--alignMiddle { align-items: center; } .LayerPositioner-layer { pointer-events: none; position: relative; } .LayerPositioner--above .LayerPositioner-layer, .LayerPositioner--alignBottom .LayerPositioner-layer { transform: translateY(-100%); } .LayerPositioner-layer > * { pointer-events: auto; } .LayerPositioner-transitioner { height: 100%; } .LayerPositioner--animatePositionChanges { transition-property: top, left; transition-duration: 0.2s; } :root, :root .DesignTokenThemeOverrideRegionInternal--light { --color-elevation-small: 0 0 0 1px #edeae9, 0 1px 4px 0 rgba(109, 110, 111, 0.08); --color-elevation-medium: 0 0 0 1px #edeae9, 0 3px 8px 0 rgba(109, 110, 111, 0.1); --color-elevation-medium-hover: 0 0 0 1px #afabac, 0 3px 8px 0 rgba(109, 110, 111, 0.1); --color-elevation-medium-active: 0 0 0 1px #6d6e6f, 0 3px 8px 0 rgba(109, 110, 111, 0.1); --color-elevation-large: 0 0 0 1px #edeae9, 0 6px 12px 0 rgba(109, 110, 111, 0.12); --color-elevation-selected-small: 0 0 0 1px #3f6ac4, 0 1px 4px 0 rgba(109, 110, 111, 0.08); --color-elevation-selected-medium-hover: 0 0 0 1px #3f6ac4, 0 2px 10px 0 rgba(109, 110, 111, 0.08); --color-elevation-selected-medium-active: 0 0 0 1px #3f6ac4, 0 2px 10px 0 rgba(109, 110, 111, 0.08); --color-elevation-selected-large-active: 0 0 0 1px #3f6ac4, 0 5px 20px 0 rgba(109, 110, 111, 0.08); --color-elevation-danger-small: 0 0 0 1px #f1a2a9, 0 1px 4px 0 rgba(109, 110, 111, 0.08); } @media print { :root { --color-elevation-small: 0 0 0 1px #edeae9, 0 1px 4px 0 rgba(109, 110, 111, 0.08); --color-elevation-medium: 0 0 0 1px #edeae9, 0 3px 8px 0 rgba(109, 110, 111, 0.1); --color-elevation-medium-hover: 0 0 0 1px #afabac, 0 3px 8px 0 rgba(109, 110, 111, 0.1); --color-elevation-medium-active: 0 0 0 1px #6d6e6f, 0 3px 8px 0 rgba(109, 110, 111, 0.1); --color-elevation-large: 0 0 0 1px #edeae9, 0 6px 12px 0 rgba(109, 110, 111, 0.12); --color-elevation-selected-small: 0 0 0 1px #3f6ac4, 0 1px 4px 0 rgba(109, 110, 111, 0.08); --color-elevation-selected-medium-hover: 0 0 0 1px #3f6ac4, 0 2px 10px 0 rgba(109, 110, 111, 0.08); --color-elevation-selected-medium-active: 0 0 0 1px #3f6ac4, 0 2px 10px 0 rgba(109, 110, 111, 0.08); --color-elevation-selected-large-active: 0 0 0 1px #3f6ac4, 0 5px 20px 0 rgba(109, 110, 111, 0.08); --color-elevation-danger-small: 0 0 0 1px #f1a2a9, 0 1px 4px 0 rgba(109, 110, 111, 0.08); } } :root .DesignTokenThemeSelectors-theme--darkMode { --color-elevation-small: 0 0 0 1px #424244, 0 1px 4px 0 rgba(0, 0, 0, 0.24); --color-elevation-medium: 0 0 0 1px #424244, 0 3px 8px 0 rgba(0, 0, 0, 0.24); --color-elevation-medium-hover: 0 0 0 1px #6a696a, 0 3px 8px 0 rgba(0, 0, 0, 0.24); --color-elevation-medium-active: 0 0 0 1px #a2a0a2, 0 3px 8px 0 rgba(0, 0, 0, 0.24); --color-elevation-large: 0 0 0 1px #424244, 0 6px 12px 0 rgba(0, 0, 0, 0.24); --color-elevation-selected-small: 0 0 0 1px #4573d2; --color-elevation-selected-medium-hover: 0 0 0 1px #4573d2; --color-elevation-selected-medium-active: 0 0 0 1px #4573d2; --color-elevation-selected-large-active: 0 0 0 1px #4573d2; --color-elevation-danger-small: 0 0 0 1px #b12d4b; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode { --color-elevation-small: 0 0 0 1px #424244, 0 1px 4px 0 rgba(0, 0, 0, 0.24); --color-elevation-medium: 0 0 0 1px #424244, 0 3px 8px 0 rgba(0, 0, 0, 0.24); --color-elevation-medium-hover: 0 0 0 1px #6a696a, 0 3px 8px 0 rgba(0, 0, 0, 0.24); --color-elevation-medium-active: 0 0 0 1px #a2a0a2, 0 3px 8px 0 rgba(0, 0, 0, 0.24); --color-elevation-large: 0 0 0 1px #424244, 0 6px 12px 0 rgba(0, 0, 0, 0.24); --color-elevation-selected-small: 0 0 0 1px #4573d2; --color-elevation-selected-medium-hover: 0 0 0 1px #4573d2; --color-elevation-selected-medium-active: 0 0 0 1px #4573d2; --color-elevation-selected-large-active: 0 0 0 1px #4573d2; --color-elevation-danger-small: 0 0 0 1px #b12d4b; } } :root .DesignTokenThemeSelectors-theme--maroon .DesignTokenThemeOverrideRegionInternal--light { --color-elevation-small: 0 0 0 1px #edeae9, 0 1px 4px 0 rgba(109, 110, 111, 0.08); --color-elevation-medium: 0 0 0 1px #edeae9, 0 3px 8px 0 rgba(109, 110, 111, 0.1); --color-elevation-medium-hover: 0 0 0 1px #afabac, 0 3px 8px 0 rgba(109, 110, 111, 0.1); --color-elevation-medium-active: 0 0 0 1px #6d6e6f, 0 3px 8px 0 rgba(109, 110, 111, 0.1); --color-elevation-large: 0 0 0 1px #edeae9, 0 6px 12px 0 rgba(109, 110, 111, 0.12); --color-elevation-selected-small: 0 0 0 1px #3f6ac4, 0 1px 4px 0 rgba(109, 110, 111, 0.08); --color-elevation-selected-medium-hover: 0 0 0 1px #3f6ac4, 0 2px 10px 0 rgba(109, 110, 111, 0.08); --color-elevation-selected-medium-active: 0 0 0 1px #3f6ac4, 0 2px 10px 0 rgba(109, 110, 111, 0.08); --color-elevation-selected-large-active: 0 0 0 1px #3f6ac4, 0 5px 20px 0 rgba(109, 110, 111, 0.08); --color-elevation-danger-small: 0 0 0 1px #f1a2a9, 0 1px 4px 0 rgba(109, 110, 111, 0.08); } :root .DesignTokenThemeSelectors-theme--darkMode.DesignTokenThemeSelectors-theme--maroon { --color-elevation-small: 0 0 0 1px #5f2748; --color-elevation-medium: 0 0 0 1px #5f2748; --color-elevation-medium-hover: 0 0 0 1px #8f5977; --color-elevation-medium-active: 0 0 0 1px #bb97a9; --color-elevation-large: 0 0 0 1px #5f2748; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode.DesignTokenThemeSelectors-theme--maroon { --color-elevation-small: 0 0 0 1px #5f2748; --color-elevation-medium: 0 0 0 1px #5f2748; --color-elevation-medium-hover: 0 0 0 1px #8f5977; --color-elevation-medium-active: 0 0 0 1px #bb97a9; --color-elevation-large: 0 0 0 1px #5f2748; } } :root .DesignTokenThemeSelectors-theme--shadowRefreshNoShadow { --color-elevation-small: 0 0 0 1px #edeae9; --color-elevation-medium: 0 0 0 1px #edeae9; --color-elevation-large: 0 0 0 1px #edeae9; } :root .DesignTokenThemeSelectors-theme--shadowRefreshNoShadow .DesignTokenThemeOverrideRegionInternal--light { --color-elevation-small: 0 0 0 1px #edeae9, 0 1px 4px 0 rgba(109, 110, 111, 0.08); --color-elevation-medium: 0 0 0 1px #edeae9, 0 3px 8px 0 rgba(109, 110, 111, 0.1); --color-elevation-medium-hover: 0 0 0 1px #afabac, 0 3px 8px 0 rgba(109, 110, 111, 0.1); --color-elevation-medium-active: 0 0 0 1px #6d6e6f, 0 3px 8px 0 rgba(109, 110, 111, 0.1); --color-elevation-large: 0 0 0 1px #edeae9, 0 6px 12px 0 rgba(109, 110, 111, 0.12); --color-elevation-selected-small: 0 0 0 1px #3f6ac4, 0 1px 4px 0 rgba(109, 110, 111, 0.08); --color-elevation-selected-medium-hover: 0 0 0 1px #3f6ac4, 0 2px 10px 0 rgba(109, 110, 111, 0.08); --color-elevation-selected-medium-active: 0 0 0 1px #3f6ac4, 0 2px 10px 0 rgba(109, 110, 111, 0.08); --color-elevation-selected-large-active: 0 0 0 1px #3f6ac4, 0 5px 20px 0 rgba(109, 110, 111, 0.08); --color-elevation-danger-small: 0 0 0 1px #f1a2a9, 0 1px 4px 0 rgba(109, 110, 111, 0.08); } :root .DesignTokenThemeSelectors-theme--darkMode.DesignTokenThemeSelectors-theme--shadowRefreshNoShadow { --color-elevation-small: 0 0 0 1px #424244; --color-elevation-medium: 0 0 0 1px #424244; --color-elevation-large: 0 0 0 1px #424244; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode.DesignTokenThemeSelectors-theme--shadowRefreshNoShadow { --color-elevation-small: 0 0 0 1px #424244; --color-elevation-medium: 0 0 0 1px #424244; --color-elevation-large: 0 0 0 1px #424244; } } .TypeaheadDropdownInput-deprecatedDropdown, .PaginatedMenuPresentation, .MenuPresentation, .SelectPresentation, .PaginatedSelectPresentation, .DeprecatedDropdown, .LayerBoxStructure { background: var(--color-background-weak); box-shadow: var(--color-elevation-large); box-sizing: border-box; border-radius: 4px; } .TooltipPresentation { max-width: 174px; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 12px; line-height: 18px; display: flex; position: relative; } .TooltipPresentation.TooltipPresentation--tooltipAbove { flex-direction: column; margin-bottom: 10px; } .TooltipPresentation.TooltipPresentation--tooltipRight { flex-direction: row-reverse; margin-left: 10px; } .TooltipPresentation.TooltipPresentation--tooltipBelow { flex-direction: column-reverse; margin-top: 10px; } .TooltipPresentation.TooltipPresentation--tooltipLeft { flex-direction: row; margin-right: 10px; } .TooltipPresentation-body { background: var(--color-inverse-background-strong); box-shadow: var(--color-box-shadow-small); box-sizing: border-box; color: var(--color-inverse-text); cursor: default; overflow-wrap: break-word; border-radius: 4px; flex-grow: 1; max-width: 100%; padding: 8px 12px; } .TooltipPresentation-caretPositioner { justify-content: center; display: flex; position: relative; } .TooltipPresentation--alignMiddle > .TooltipPresentation-caretPositioner { align-self: center; } .TooltipPresentation--alignEnd > .TooltipPresentation-caretPositioner { align-self: flex-end; } .TooltipPresentation--tooltipAbove > .TooltipPresentation-caretPositioner, .TooltipPresentation--tooltipBelow > .TooltipPresentation-caretPositioner { width: 15px; height: 6px; margin: 0 16px; } .TooltipPresentation--tooltipLeft > .TooltipPresentation-caretPositioner, .TooltipPresentation--tooltipRight > .TooltipPresentation-caretPositioner { width: 6px; height: 15px; margin: 8px 0; } .TooltipPresentation--tooltipAbove > .TooltipPresentation-caretPositioner { margin-bottom: -6px; } .TooltipPresentation--tooltipBelow > .TooltipPresentation-caretPositioner { margin-top: -6px; } .TooltipPresentation--tooltipLeft > .TooltipPresentation-caretPositioner { margin-right: -6px; } .TooltipPresentation--tooltipRight > .TooltipPresentation-caretPositioner { margin-left: -6px; } .TooltipPresentation-caret { position: absolute; } .TooltipPresentation-caret:before { background: var(--color-inverse-background-strong); box-sizing: border-box; content: ""; width: 14px; height: 14px; display: block; transform: rotate(45deg); } .TooltipPresentation--tooltipAbove .TooltipPresentation-caret { clip: rect(7px 17px 17px -3px); bottom: 0; } .TooltipPresentation--tooltipBelow .TooltipPresentation-caret { clip: rect(-3px 17px 7px -3px); top: 0; } .TooltipPresentation--tooltipLeft .TooltipPresentation-caret { clip: rect(-3px 17px 17px 7px); right: 0; } .TooltipPresentation--tooltipRight .TooltipPresentation-caret { clip: rect(-3px 7px 17px -3px); left: 0; } .ButtonThemeablePresentation { box-sizing: border-box; -webkit-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid; border-radius: 6px; flex-shrink: 0; transition-property: background, border, color, fill; transition-duration: 0.2s; overflow: hidden; } .ButtonGroup .ButtonThemeablePresentation.ButtonGroup-button--notFirst { border-top-left-radius: 0; border-bottom-left-radius: 0; } .ButtonGroup .ButtonThemeablePresentation.ButtonGroup-button--notLast { border-top-right-radius: 0; border-bottom-right-radius: 0; } .ButtonGroup .ButtonThemeablePresentation.ButtonGroup-button--notFirst { margin-left: -1px; } .ButtonGroup .ButtonThemeablePresentation.ButtonGroup-button:active { z-index: 2; position: relative; } .ButtonGroup .ButtonThemeablePresentation.ButtonGroup-button:focus-visible { z-index: 2; position: relative; } .ButtonThemeablePresentation.ButtonThemeablePresentation--isEnabled { cursor: pointer; } .ButtonThemeablePresentation.ButtonThemeablePresentation--small { height: 20px; padding: 0 var(--button-padding-small); font-size: 12px; line-height: 20px; } .ButtonThemeablePresentation.ButtonThemeablePresentation--medium { height: 28px; padding: 0 var(--button-padding-medium); font-size: 12px; line-height: 28px; } .ButtonThemeablePresentation.ButtonThemeablePresentation--large { height: 36px; padding: 0 var(--button-padding-large); font-size: 14px; line-height: 36px; } .ButtonThemeablePresentation.ButtonThemeablePresentation--xlarge { height: 48px; padding: 0 var(--button-padding-xlarge); font-size: 16px; line-height: 48px; } .ButtonThemeablePresentation-leftIcon { margin-right: 4px; } .ButtonThemeablePresentation--withNoLabel .ButtonThemeablePresentation-leftIcon { margin-right: 0; } .ButtonThemeablePresentation-rightIcon { margin-left: 4px; } .ButtonThemeablePresentation--withNoLabel .ButtonThemeablePresentation-rightIcon { margin-left: 0; } .ButtonGroup .ButtonPrimaryPresentation.ButtonPrimaryPresentation--enabled.ButtonGroup-button--notFirst { margin-left: 1px; } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentDefault.ButtonThemeablePresentation { background: var(--color-background-medium); border-color: var(--color-background-medium); color: var(--color-text-weak); fill: var(--color-icon); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentDefault.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-background-hover); border-color: var(--color-background-hover); color: var(--color-text-weak-hover); fill: var(--color-icon-hover); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentDefault.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentDefault.ButtonThemeablePresentation--isEnabled:active { background: var(--color-background-active); border-color: var(--color-background-active); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentDefault.ButtonThemeablePresentation:focus { outline: none; } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentDefault.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentDefault.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentDefault.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-button-background-primary-disabled); border-color: var(--color-border); color: var(--color-text-disabled); fill: var(--color-text-disabled); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentSuccess.ButtonThemeablePresentation { background: var(--color-success-background); border-color: var(--color-success-background); color: var(--color-success-text); fill: var(--color-success-icon); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentSuccess.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-success-background-hover); border-color: var(--color-success-background-hover); color: var(--color-success-text-hover); fill: var(--color-success-icon-hover); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentSuccess.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentSuccess.ButtonThemeablePresentation--isEnabled:active { background: var(--color-success-background-active); border-color: var(--color-success-background-active); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentSuccess.ButtonThemeablePresentation:focus { outline: none; } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentSuccess.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentSuccess.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentSuccess.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-button-background-primary-disabled); border-color: var(--color-border); color: var(--color-text-disabled); fill: var(--color-text-disabled); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentWarning.ButtonThemeablePresentation { background: var(--color-warning-background); border-color: var(--color-warning-background); color: var(--color-warning-text); fill: var(--color-warning-icon); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentWarning.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-warning-background-hover); border-color: var(--color-warning-background-hover); color: var(--color-warning-text-hover); fill: var(--color-warning-icon-hover); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentWarning.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentWarning.ButtonThemeablePresentation--isEnabled:active { background: var(--color-warning-background-active); border-color: var(--color-warning-background-active); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentWarning.ButtonThemeablePresentation:focus { outline: none; } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentWarning.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentWarning.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentWarning.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-button-background-primary-disabled); border-color: var(--color-border); color: var(--color-text-disabled); fill: var(--color-text-disabled); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentUpsell.ButtonThemeablePresentation { background: var(--color-upsell-background); border-color: var(--color-upsell-background); color: var(--color-upsell-text); fill: var(--color-upsell-icon); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentUpsell.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-upsell-background-hover); border-color: var(--color-upsell-background-hover); color: var(--color-upsell-text-hover); fill: var(--color-upsell-icon-hover); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentUpsell.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentUpsell.ButtonThemeablePresentation--isEnabled:active { background: var(--color-upsell-background-active); border-color: var(--color-upsell-background-active); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentUpsell.ButtonThemeablePresentation:focus { outline: none; } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentUpsell.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentUpsell.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentUpsell.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-button-background-primary-disabled); border-color: var(--color-border); color: var(--color-text-disabled); fill: var(--color-text-disabled); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentDanger.ButtonThemeablePresentation { background: var(--color-danger-background); border-color: var(--color-danger-background); color: var(--color-danger-text); fill: var(--color-danger-icon); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentDanger.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-danger-background-hover); border-color: var(--color-danger-background-hover); color: var(--color-danger-text-hover); fill: var(--color-danger-icon-hover); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentDanger.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentDanger.ButtonThemeablePresentation--isEnabled:active { background: var(--color-danger-background-active); border-color: var(--color-danger-background-active); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentDanger.ButtonThemeablePresentation:focus { outline: none; } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentDanger.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentDanger.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentDanger.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-button-background-primary-disabled); border-color: var(--color-border); color: var(--color-text-disabled); fill: var(--color-text-disabled); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentBeta.ButtonThemeablePresentation { background: var(--color-beta-background); border-color: var(--color-beta-background); color: var(--color-beta-text); fill: var(--color-beta-icon); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentBeta.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-beta-background-hover); border-color: var(--color-beta-background-hover); color: var(--color-beta-text-hover); fill: var(--color-beta-icon-hover); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentBeta.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentBeta.ButtonThemeablePresentation--isEnabled:active { background: var(--color-beta-background-active); border-color: var(--color-beta-background-active); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentBeta.ButtonThemeablePresentation:focus { outline: none; } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentBeta.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentBeta.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentBeta.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-button-background-primary-disabled); border-color: var(--color-border); color: var(--color-text-disabled); fill: var(--color-text-disabled); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentSelected.ButtonThemeablePresentation { background: var(--color-selected-background); border-color: var(--color-selected-background); color: var(--color-selected-text); fill: var(--color-selected-icon); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentSelected.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-selected-background-hover); border-color: var(--color-selected-background-hover); color: var(--color-selected-text-hover); fill: var(--color-selected-icon); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentSelected.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentSelected.ButtonThemeablePresentation--isEnabled:active { background: var(--color-selected-background-active); border-color: var(--color-selected-background-active); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentSelected.ButtonThemeablePresentation:focus { outline: none; } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentSelected.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentSelected.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentSelected.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-button-background-primary-disabled); border-color: var(--color-border); color: var(--color-text-disabled); fill: var(--color-text-disabled); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentSuccessStrong.ButtonThemeablePresentation { background: var(--color-success-background-strong); border-color: var(--color-success-background-strong); color: var(--color-success-text-strong); fill: var(--color-success-icon-strong); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentSuccessStrong.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-success-background-strong-hover); border-color: var(--color-success-background-strong-hover); color: var(--color-success-text-strong); fill: var(--color-success-icon-strong); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentSuccessStrong.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentSuccessStrong.ButtonThemeablePresentation--isEnabled:active { background: var(--color-success-background-strong-active); border-color: var(--color-success-background-strong-active); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentSuccessStrong.ButtonThemeablePresentation:focus { outline: none; } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentSuccessStrong.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentSuccessStrong.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentSuccessStrong.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-button-background-primary-disabled); border-color: var(--color-border); color: var(--color-text-disabled); fill: var(--color-text-disabled); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentWarningStrong.ButtonThemeablePresentation { background: var(--color-warning-background-strong); border-color: var(--color-warning-background-strong); color: var(--color-warning-text-strong); fill: var(--color-warning-icon-strong); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentWarningStrong.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-warning-background-strong-hover); border-color: var(--color-warning-background-strong-hover); color: var(--color-warning-text-strong); fill: var(--color-warning-icon-strong); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentWarningStrong.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentWarningStrong.ButtonThemeablePresentation--isEnabled:active { background: var(--color-warning-background-strong-active); border-color: var(--color-warning-background-strong-active); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentWarningStrong.ButtonThemeablePresentation:focus { outline: none; } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentWarningStrong.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentWarningStrong.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentWarningStrong.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-button-background-primary-disabled); border-color: var(--color-border); color: var(--color-text-disabled); fill: var(--color-text-disabled); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentUpsellStrong.ButtonThemeablePresentation { background: var(--color-upsell-background-strong); border-color: var(--color-upsell-background-strong); color: var(--color-upsell-text-strong); fill: var(--color-upsell-icon-strong); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentUpsellStrong.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-upsell-background-strong-hover); border-color: var(--color-upsell-background-strong-hover); color: var(--color-upsell-text-strong); fill: var(--color-upsell-icon-strong); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentUpsellStrong.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentUpsellStrong.ButtonThemeablePresentation--isEnabled:active { background: var(--color-upsell-background-strong-active); border-color: var(--color-upsell-background-strong-active); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentUpsellStrong.ButtonThemeablePresentation:focus { outline: none; } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentUpsellStrong.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentUpsellStrong.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentUpsellStrong.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-button-background-primary-disabled); border-color: var(--color-border); color: var(--color-text-disabled); fill: var(--color-text-disabled); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentDangerStrong.ButtonThemeablePresentation { background: var(--color-danger-background-strong); border-color: var(--color-danger-background-strong); color: var(--color-danger-text-strong); fill: var(--color-danger-icon-strong); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentDangerStrong.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-danger-background-strong-hover); border-color: var(--color-danger-background-strong-hover); color: var(--color-danger-text-strong); fill: var(--color-danger-icon-strong); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentDangerStrong.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentDangerStrong.ButtonThemeablePresentation--isEnabled:active { background: var(--color-danger-background-strong-active); border-color: var(--color-danger-background-strong-active); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentDangerStrong.ButtonThemeablePresentation:focus { outline: none; } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentDangerStrong.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentDangerStrong.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentDangerStrong.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-button-background-primary-disabled); border-color: var(--color-border); color: var(--color-text-disabled); fill: var(--color-text-disabled); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentBetaStrong.ButtonThemeablePresentation { background: var(--color-beta-background-strong); border-color: var(--color-beta-background-strong); color: var(--color-beta-text-strong); fill: var(--color-beta-icon-strong); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentBetaStrong.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-beta-background-strong-hover); border-color: var(--color-beta-background-strong-hover); color: var(--color-beta-text-strong); fill: var(--color-beta-icon-strong); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentBetaStrong.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentBetaStrong.ButtonThemeablePresentation--isEnabled:active { background: var(--color-beta-background-strong-active); border-color: var(--color-beta-background-strong-active); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentBetaStrong.ButtonThemeablePresentation:focus { outline: none; } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentBetaStrong.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentBetaStrong.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentBetaStrong.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-button-background-primary-disabled); border-color: var(--color-border); color: var(--color-text-disabled); fill: var(--color-text-disabled); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentSelectedStrong.ButtonThemeablePresentation { background: var(--color-selected-background-strong); border-color: var(--color-selected-background-strong); color: var(--color-selected-text-strong); fill: var(--color-selected-icon-strong); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentSelectedStrong.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-selected-background-strong-hover); border-color: var(--color-selected-background-strong-hover); color: var(--color-selected-text-strong); fill: var(--color-selected-icon-strong); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentSelectedStrong.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentSelectedStrong.ButtonThemeablePresentation--isEnabled:active { background: var(--color-selected-background-strong-active); border-color: var(--color-selected-background-strong-active); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentSelectedStrong.ButtonThemeablePresentation:focus { outline: none; } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentSelectedStrong.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentSelectedStrong.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonPrimaryPresentation.ButtonPrimaryPresentation--sentimentSelectedStrong.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-button-background-primary-disabled); border-color: var(--color-border); color: var(--color-text-disabled); fill: var(--color-text-disabled); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentDefault.ButtonThemeablePresentation { background: var(--color-button-background-secondary); border-color: var(--color-border-strong); color: var(--color-text); fill: var(--color-icon); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentDefault.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-button-background-secondary-hover); border-color: var(--color-border-hover); color: var(--color-text); fill: var(--color-icon-hover); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentDefault.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentDefault.ButtonThemeablePresentation--isEnabled:active { background: var(--color-button-background-secondary-active); border-color: var(--color-border-active); color: var(--color-text); fill: var(--color-icon-hover); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentDefault.ButtonThemeablePresentation:focus { outline: none; } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentDefault.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentDefault.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentDefault.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-button-background-secondary); border-color: var(--color-border); color: var(--color-text-disabled); fill: var(--color-text-disabled); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentSuccess.ButtonThemeablePresentation { background: var(--color-background-weak); border-color: var(--color-success-border); color: var(--color-success-text); fill: var(--color-success-icon); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentSuccess.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-success-background-hover); border-color: var(--color-success-border-hover); color: var(--color-success-text-hover); fill: var(--color-success-icon-hover); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentSuccess.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentSuccess.ButtonThemeablePresentation--isEnabled:active { background: var(--color-success-background-active); border-color: var(--color-success-border-active); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentSuccess.ButtonThemeablePresentation:focus { outline: none; } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentSuccess.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentSuccess.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentSuccess.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-background-weak); border-color: var(--color-border); color: var(--color-text-disabled); fill: var(--color-text-disabled); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentWarning.ButtonThemeablePresentation { background: var(--color-background-weak); border-color: var(--color-warning-border); color: var(--color-warning-text); fill: var(--color-warning-icon); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentWarning.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-warning-background-hover); border-color: var(--color-warning-border-hover); color: var(--color-warning-text-hover); fill: var(--color-warning-icon-hover); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentWarning.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentWarning.ButtonThemeablePresentation--isEnabled:active { background: var(--color-warning-background-active); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentWarning.ButtonThemeablePresentation:focus { outline: none; } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentWarning.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentWarning.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentWarning.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-background-weak); border-color: var(--color-border); color: var(--color-text-disabled); fill: var(--color-text-disabled); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentUpsell.ButtonThemeablePresentation { background: var(--color-background-weak); border-color: var(--color-upsell-border); color: var(--color-upsell-text); fill: var(--color-upsell-icon); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentUpsell.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-upsell-background-hover); color: var(--color-upsell-text-hover); fill: var(--color-upsell-icon-hover); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentUpsell.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentUpsell.ButtonThemeablePresentation--isEnabled:active { background: var(--color-upsell-background-active); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentUpsell.ButtonThemeablePresentation:focus { outline: none; } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentUpsell.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentUpsell.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentUpsell.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-background-weak); border-color: var(--color-border); color: var(--color-text-disabled); fill: var(--color-text-disabled); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentDanger.ButtonThemeablePresentation { background: var(--color-background-weak); border-color: var(--color-danger-border); color: var(--color-danger-text); fill: var(--color-danger-icon); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentDanger.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-danger-background-hover); border-color: var(--color-danger-border-hover); color: var(--color-danger-text-hover); fill: var(--color-danger-icon-hover); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentDanger.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentDanger.ButtonThemeablePresentation--isEnabled:active { background: var(--color-danger-background-active); border-color: var(--color-danger-border-active); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentDanger.ButtonThemeablePresentation:focus { outline: none; } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentDanger.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentDanger.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentDanger.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-background-weak); border-color: var(--color-border); color: var(--color-text-disabled); fill: var(--color-text-disabled); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentBeta.ButtonThemeablePresentation { background: var(--color-background-weak); border-color: var(--color-beta-border); color: var(--color-beta-text); fill: var(--color-beta-icon); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentBeta.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-beta-background-hover); border-color: var(--color-beta-border-hover); color: var(--color-beta-text-hover); fill: var(--color-beta-icon-hover); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentBeta.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentBeta.ButtonThemeablePresentation--isEnabled:active { background: var(--color-beta-background-active); border-color: var(--color-beta-border-active); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentBeta.ButtonThemeablePresentation:focus { outline: none; } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentBeta.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentBeta.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentBeta.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-background-weak); border-color: var(--color-border); color: var(--color-text-disabled); fill: var(--color-text-disabled); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentSelected.ButtonThemeablePresentation { background: var(--color-background-weak); border-color: var(--color-selected-border); color: var(--color-selected-text); fill: var(--color-selected-icon); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentSelected.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-selected-background-hover); border-color: var(--color-selected-border-hover); color: var(--color-selected-text-hover); fill: var(--color-selected-icon); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentSelected.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentSelected.ButtonThemeablePresentation--isEnabled:active { background: var(--color-selected-background-active); border-color: var(--color-selected-border-active); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentSelected.ButtonThemeablePresentation:focus { outline: none; } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentSelected.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentSelected.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentSelected.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-background-weak); border-color: var(--color-border); color: var(--color-text-disabled); fill: var(--color-text-disabled); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentSuccessStrong.ButtonThemeablePresentation { background: var(--color-background-weak); color: var(--color-success-text-strong); fill: var(--color-success-icon-strong); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentSuccessStrong.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-success-background-strong-hover); color: var(--color-success-text-strong); fill: var(--color-success-icon-strong); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentSuccessStrong.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentSuccessStrong.ButtonThemeablePresentation--isEnabled:active { background: var(--color-success-background-strong-active); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentSuccessStrong.ButtonThemeablePresentation:focus { outline: none; } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentSuccessStrong.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentSuccessStrong.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentSuccessStrong.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-background-weak); border-color: var(--color-border); color: var(--color-text-disabled); fill: var(--color-text-disabled); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentWarningStrong.ButtonThemeablePresentation { background: var(--color-background-weak); color: var(--color-warning-text-strong); fill: var(--color-warning-icon-strong); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentWarningStrong.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-warning-background-strong-hover); color: var(--color-warning-text-strong); fill: var(--color-warning-icon-strong); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentWarningStrong.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentWarningStrong.ButtonThemeablePresentation--isEnabled:active { background: var(--color-warning-background-strong-active); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentWarningStrong.ButtonThemeablePresentation:focus { outline: none; } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentWarningStrong.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentWarningStrong.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentWarningStrong.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-background-weak); border-color: var(--color-border); color: var(--color-text-disabled); fill: var(--color-text-disabled); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentUpsellStrong.ButtonThemeablePresentation { background: var(--color-background-weak); color: var(--color-upsell-text-strong); fill: var(--color-upsell-icon-strong); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentUpsellStrong.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-upsell-background-strong-hover); color: var(--color-upsell-text-strong); fill: var(--color-upsell-icon-strong); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentUpsellStrong.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentUpsellStrong.ButtonThemeablePresentation--isEnabled:active { background: var(--color-upsell-background-strong-active); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentUpsellStrong.ButtonThemeablePresentation:focus { outline: none; } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentUpsellStrong.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentUpsellStrong.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentUpsellStrong.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-background-weak); border-color: var(--color-border); color: var(--color-text-disabled); fill: var(--color-text-disabled); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentDangerStrong.ButtonThemeablePresentation { background: var(--color-background-weak); color: var(--color-danger-text-strong); fill: var(--color-danger-icon-strong); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentDangerStrong.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-danger-background-strong-hover); color: var(--color-danger-text-strong); fill: var(--color-danger-icon-strong); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentDangerStrong.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentDangerStrong.ButtonThemeablePresentation--isEnabled:active { background: var(--color-danger-background-strong-active); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentDangerStrong.ButtonThemeablePresentation:focus { outline: none; } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentDangerStrong.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentDangerStrong.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentDangerStrong.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-background-weak); border-color: var(--color-border); color: var(--color-text-disabled); fill: var(--color-text-disabled); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentBetaStrong.ButtonThemeablePresentation { background: var(--color-background-weak); color: var(--color-beta-text-strong); fill: var(--color-beta-icon-strong); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentBetaStrong.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-beta-background-strong-hover); color: var(--color-beta-text-strong); fill: var(--color-beta-icon-strong); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentBetaStrong.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentBetaStrong.ButtonThemeablePresentation--isEnabled:active { background: var(--color-beta-background-strong-active); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentBetaStrong.ButtonThemeablePresentation:focus { outline: none; } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentBetaStrong.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentBetaStrong.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentBetaStrong.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-background-weak); border-color: var(--color-border); color: var(--color-text-disabled); fill: var(--color-text-disabled); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentSelectedStrong.ButtonThemeablePresentation { background: var(--color-background-weak); color: var(--color-selected-text-strong); fill: var(--color-selected-icon-strong); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentSelectedStrong.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-selected-background-strong-hover); color: var(--color-selected-text-strong); fill: var(--color-selected-icon-strong); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentSelectedStrong.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentSelectedStrong.ButtonThemeablePresentation--isEnabled:active { background: var(--color-selected-background-strong-active); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentSelectedStrong.ButtonThemeablePresentation:focus { outline: none; } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentSelectedStrong.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentSelectedStrong.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonSecondaryPresentation.ButtonSecondaryPresentation--sentimentSelectedStrong.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-background-weak); border-color: var(--color-border); color: var(--color-text-disabled); fill: var(--color-text-disabled); } .ButtonSecondaryTogglePresentation.ButtonSecondaryTogglePresentation--isNotPressed.ButtonThemeablePresentation { background: var(--color-button-background-secondary); border-color: var(--color-border-strong); color: var(--color-text); fill: var(--color-icon); } .ButtonSecondaryTogglePresentation.ButtonSecondaryTogglePresentation--isNotPressed.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-button-background-secondary-hover); border-color: var(--color-border-hover); color: var(--color-text); fill: var(--color-icon-hover); } .ButtonSecondaryTogglePresentation.ButtonSecondaryTogglePresentation--isNotPressed.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonSecondaryTogglePresentation.ButtonSecondaryTogglePresentation--isNotPressed.ButtonThemeablePresentation--isEnabled:active { background: var(--color-button-background-secondary-active); border-color: var(--color-border-active); color: var(--color-text); fill: var(--color-icon-hover); } .ButtonSecondaryTogglePresentation.ButtonSecondaryTogglePresentation--isNotPressed.ButtonThemeablePresentation:focus { outline: none; } .ButtonSecondaryTogglePresentation.ButtonSecondaryTogglePresentation--isNotPressed.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonSecondaryTogglePresentation.ButtonSecondaryTogglePresentation--isNotPressed.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active); } .ButtonSecondaryTogglePresentation.ButtonSecondaryTogglePresentation--isNotPressed.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-button-background-secondary); border-color: var(--color-border); color: var(--color-text-disabled); fill: var(--color-text-disabled); } .ButtonSecondaryTogglePresentation.ButtonSecondaryTogglePresentation--isPressed.ButtonThemeablePresentation { background: var(--color-selected-background); border-color: var(--color-selected-border); color: var(--color-selected-text); fill: var(--color-selected-icon); } .ButtonSecondaryTogglePresentation.ButtonSecondaryTogglePresentation--isPressed.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-selected-background-hover); border-color: var(--color-selected-border-hover); color: var(--color-selected-text-hover); fill: var(--color-selected-icon); } .ButtonSecondaryTogglePresentation.ButtonSecondaryTogglePresentation--isPressed.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonSecondaryTogglePresentation.ButtonSecondaryTogglePresentation--isPressed.ButtonThemeablePresentation--isEnabled:active { background: var(--color-selected-background-active); border-color: var(--color-selected-border-active); color: var(--color-selected-text-hover); fill: var(--color-selected-icon); } .ButtonSecondaryTogglePresentation.ButtonSecondaryTogglePresentation--isPressed.ButtonThemeablePresentation:focus { outline: none; } .ButtonSecondaryTogglePresentation.ButtonSecondaryTogglePresentation--isPressed.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonSecondaryTogglePresentation.ButtonSecondaryTogglePresentation--isPressed.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonSecondaryTogglePresentation.ButtonSecondaryTogglePresentation--isPressed.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-button-background-secondary); border-color: var(--color-border); color: var(--color-text-disabled); fill: var(--color-text-disabled); } .ButtonGroup .ButtonSecondaryTogglePresentation.ButtonSecondaryTogglePresentation--isPressed.ButtonGroup-button { z-index: 1; position: relative; } .ButtonGroup .ButtonSubtlePresentation.ButtonGroup-button--notFirst { margin-left: 1px; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentDefault.ButtonThemeablePresentation { color: var(--color-text-weak); fill: var(--color-icon); background: 0 0; border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentDefault.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-background-hover); color: var(--color-text-weak-hover); fill: var(--color-icon-hover); border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentDefault.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentDefault.ButtonThemeablePresentation--isEnabled:active { background: var(--color-background-active); border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentDefault.ButtonThemeablePresentation:focus { outline: none; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentDefault.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentDefault.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentDefault.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { color: var(--color-text-disabled); fill: var(--color-text-disabled); background: 0 0; border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentSuccess.ButtonThemeablePresentation { color: var(--color-success-text); fill: var(--color-success-icon); background: 0 0; border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentSuccess.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-success-background-hover); color: var(--color-success-text-hover); fill: var(--color-success-icon-hover); border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentSuccess.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentSuccess.ButtonThemeablePresentation--isEnabled:active { background: var(--color-success-background-active); border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentSuccess.ButtonThemeablePresentation:focus { outline: none; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentSuccess.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentSuccess.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentSuccess.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { color: var(--color-text-disabled); fill: var(--color-text-disabled); background: 0 0; border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentWarning.ButtonThemeablePresentation { color: var(--color-warning-text); fill: var(--color-warning-icon); background: 0 0; border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentWarning.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-warning-background-hover); color: var(--color-warning-text-hover); fill: var(--color-warning-icon-hover); border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentWarning.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentWarning.ButtonThemeablePresentation--isEnabled:active { background: var(--color-warning-background-active); border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentWarning.ButtonThemeablePresentation:focus { outline: none; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentWarning.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentWarning.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentWarning.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { color: var(--color-text-disabled); fill: var(--color-text-disabled); background: 0 0; border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentUpsell.ButtonThemeablePresentation { color: var(--color-upsell-text); fill: var(--color-upsell-icon); background: 0 0; border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentUpsell.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-upsell-background-hover); color: var(--color-upsell-text-hover); fill: var(--color-upsell-icon-hover); border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentUpsell.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentUpsell.ButtonThemeablePresentation--isEnabled:active { background: var(--color-upsell-background-active); border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentUpsell.ButtonThemeablePresentation:focus { outline: none; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentUpsell.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentUpsell.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentUpsell.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { color: var(--color-text-disabled); fill: var(--color-text-disabled); background: 0 0; border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentDanger.ButtonThemeablePresentation { color: var(--color-danger-text); fill: var(--color-danger-icon); background: 0 0; border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentDanger.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-danger-background-hover); color: var(--color-danger-text-hover); fill: var(--color-danger-icon-hover); border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentDanger.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentDanger.ButtonThemeablePresentation--isEnabled:active { background: var(--color-danger-background-active); border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentDanger.ButtonThemeablePresentation:focus { outline: none; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentDanger.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentDanger.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentDanger.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { color: var(--color-text-disabled); fill: var(--color-text-disabled); background: 0 0; border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentBeta.ButtonThemeablePresentation { color: var(--color-beta-text); fill: var(--color-beta-icon); background: 0 0; border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentBeta.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-beta-background-hover); color: var(--color-beta-text-hover); fill: var(--color-beta-icon-hover); border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentBeta.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentBeta.ButtonThemeablePresentation--isEnabled:active { background: var(--color-beta-background-active); border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentBeta.ButtonThemeablePresentation:focus { outline: none; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentBeta.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentBeta.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentBeta.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { color: var(--color-text-disabled); fill: var(--color-text-disabled); background: 0 0; border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentSelected.ButtonThemeablePresentation { color: var(--color-selected-text); fill: var(--color-selected-icon); background: 0 0; border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentSelected.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-selected-background-hover); color: var(--color-selected-text-hover); fill: var(--color-selected-icon); border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentSelected.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentSelected.ButtonThemeablePresentation--isEnabled:active { background: var(--color-selected-background-active); border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentSelected.ButtonThemeablePresentation:focus { outline: none; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentSelected.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentSelected.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentSelected.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { color: var(--color-text-disabled); fill: var(--color-text-disabled); background: 0 0; border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentSuccessStrong.ButtonThemeablePresentation { color: var(--color-success-text-strong); fill: var(--color-success-icon-strong); background: 0 0; border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentSuccessStrong.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-success-background-strong-hover); color: var(--color-success-text-strong); fill: var(--color-success-icon-strong); border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentSuccessStrong.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentSuccessStrong.ButtonThemeablePresentation--isEnabled:active { background: var(--color-success-background-strong-active); border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentSuccessStrong.ButtonThemeablePresentation:focus { outline: none; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentSuccessStrong.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentSuccessStrong.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentSuccessStrong.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { color: var(--color-text-disabled); fill: var(--color-text-disabled); background: 0 0; border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentWarningStrong.ButtonThemeablePresentation { color: var(--color-warning-text-strong); fill: var(--color-warning-icon-strong); background: 0 0; border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentWarningStrong.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-warning-background-strong-hover); color: var(--color-warning-text-strong); fill: var(--color-warning-icon-strong); border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentWarningStrong.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentWarningStrong.ButtonThemeablePresentation--isEnabled:active { background: var(--color-warning-background-strong-active); border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentWarningStrong.ButtonThemeablePresentation:focus { outline: none; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentWarningStrong.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentWarningStrong.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentWarningStrong.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { color: var(--color-text-disabled); fill: var(--color-text-disabled); background: 0 0; border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentUpsellStrong.ButtonThemeablePresentation { color: var(--color-upsell-text-strong); fill: var(--color-upsell-icon-strong); background: 0 0; border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentUpsellStrong.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-upsell-background-strong-hover); color: var(--color-upsell-text-strong); fill: var(--color-upsell-icon-strong); border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentUpsellStrong.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentUpsellStrong.ButtonThemeablePresentation--isEnabled:active { background: var(--color-upsell-background-strong-active); border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentUpsellStrong.ButtonThemeablePresentation:focus { outline: none; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentUpsellStrong.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentUpsellStrong.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentUpsellStrong.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { color: var(--color-text-disabled); fill: var(--color-text-disabled); background: 0 0; border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentDangerStrong.ButtonThemeablePresentation { color: var(--color-danger-text-strong); fill: var(--color-danger-icon-strong); background: 0 0; border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentDangerStrong.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-danger-background-strong-hover); color: var(--color-danger-text-strong); fill: var(--color-danger-icon-strong); border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentDangerStrong.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentDangerStrong.ButtonThemeablePresentation--isEnabled:active { background: var(--color-danger-background-strong-active); border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentDangerStrong.ButtonThemeablePresentation:focus { outline: none; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentDangerStrong.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentDangerStrong.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentDangerStrong.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { color: var(--color-text-disabled); fill: var(--color-text-disabled); background: 0 0; border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentBetaStrong.ButtonThemeablePresentation { color: var(--color-beta-text-strong); fill: var(--color-beta-icon-strong); background: 0 0; border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentBetaStrong.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-beta-background-strong-hover); color: var(--color-beta-text-strong); fill: var(--color-beta-icon-strong); border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentBetaStrong.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentBetaStrong.ButtonThemeablePresentation--isEnabled:active { background: var(--color-beta-background-strong-active); border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentBetaStrong.ButtonThemeablePresentation:focus { outline: none; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentBetaStrong.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentBetaStrong.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentBetaStrong.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { color: var(--color-text-disabled); fill: var(--color-text-disabled); background: 0 0; border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentSelectedStrong.ButtonThemeablePresentation { color: var(--color-selected-text-strong); fill: var(--color-selected-icon-strong); background: 0 0; border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentSelectedStrong.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-selected-background-strong-hover); color: var(--color-selected-text-strong); fill: var(--color-selected-icon-strong); border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentSelectedStrong.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentSelectedStrong.ButtonThemeablePresentation--isEnabled:active { background: var(--color-selected-background-strong-active); border-color: transparent; font-weight: 500; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentSelectedStrong.ButtonThemeablePresentation:focus { outline: none; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentSelectedStrong.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentSelectedStrong.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .ButtonSubtlePresentation.ButtonSubtlePresentation--sentimentSelectedStrong.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { color: var(--color-text-disabled); fill: var(--color-text-disabled); background: 0 0; border-color: transparent; font-weight: 500; } .IconButtonThemeablePresentation { box-sizing: border-box; border: 1px solid; border-radius: 50%; transition-property: background, border, fill; transition-duration: 0.2s; } .ButtonGroup .IconButtonThemeablePresentation.ButtonGroup-button--notFirst { border-top-left-radius: 0; border-bottom-left-radius: 0; } .ButtonGroup .IconButtonThemeablePresentation.ButtonGroup-button--notLast { border-top-right-radius: 0; border-bottom-right-radius: 0; } .ButtonGroup .IconButtonThemeablePresentation.ButtonGroup-button--notFirst { margin-left: -1px; } .ButtonGroup .IconButtonThemeablePresentation.ButtonGroup-button:active { z-index: 2; position: relative; } .ButtonGroup .IconButtonThemeablePresentation.ButtonGroup-button:focus-visible { z-index: 2; position: relative; } .IconButtonThemeablePresentation.IconButtonThemeablePresentation--isEnabled { cursor: pointer; } .IconButtonThemeablePresentation.IconButtonThemeablePresentation--small.IconButtonThemeablePresentation { width: 20px; min-width: 20px; height: 20px; min-height: 20px; } .IconButtonThemeablePresentation.IconButtonThemeablePresentation--medium.IconButtonThemeablePresentation { width: 28px; min-width: 28px; height: 28px; min-height: 28px; } .IconButtonThemeablePresentation.IconButtonThemeablePresentation--large.IconButtonThemeablePresentation { width: 36px; min-width: 36px; height: 36px; min-height: 36px; } .IconButtonThemeablePresentation.IconButtonThemeablePresentation--xlarge.IconButtonThemeablePresentation { width: 48px; min-width: 48px; height: 48px; min-height: 48px; } .PillThemeablePresentation { box-sizing: border-box; outline: none; min-width: 0; font-weight: 400; } .PillThemeablePresentation.PillThemeablePresentation--small { border-radius: var(--globule-border-radius-medium); height: 20px; padding: 0 var(--globule-padding-small); font-size: 12px; line-height: 20px; } .PillThemeablePresentation.PillThemeablePresentation--medium { border-radius: var(--globule-border-radius); height: 24px; padding: 0 var(--globule-padding-small); font-size: 14px; line-height: 24px; } .PillColorlessPresentation.PillThemeablePresentation { color: var(--color-text); fill: var(--color-icon); background-color: transparent; } .PillColorlessPresentation.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .PillColorlessPresentation.PillColorlessPresentation--interactive { cursor: pointer; } .PillColorlessPresentation.PillColorlessPresentation--interactive.PillThemeablePresentation { color: var(--color-text); fill: var(--color-icon); background-color: transparent; } .PillColorlessPresentation.PillColorlessPresentation--interactive.PillThemeablePresentation:hover { background-color: var(--color-background-hover); color: var(--color-text); fill: var(--color-icon); } .PillColorlessPresentation.PillColorlessPresentation--interactive.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active); } .PillPresentation.PillPresentation--colorNone.PillThemeablePresentation { background-color: var(--color-customization-background-weak); color: var(--color-customization-foreground-weak); fill: var(--color-icon); } .PillPresentation.PillPresentation--colorNone.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .PillPresentation.PillPresentation--colorNone.PillPresentation--interactive.PillThemeablePresentation { background-color: var(--color-customization-background-weak); color: var(--color-customization-foreground-weak); fill: var(--color-icon); } .PillPresentation.PillPresentation--colorNone.PillPresentation--interactive.PillThemeablePresentation:hover { background-color: var(--color-customization-background-weak-hover); color: var(--color-customization-foreground-weak); fill: var(--color-icon-hover); } .PillPresentation.PillPresentation--colorNone.PillPresentation--interactive.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .PillPresentation.PillPresentation--colorRed.PillThemeablePresentation { background-color: var(--color-customization-red-background); color: var(--color-customization-red-foreground); fill: var(--color-customization-red-foreground); } .PillPresentation.PillPresentation--colorRed.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .PillPresentation.PillPresentation--colorRed.PillPresentation--interactive.PillThemeablePresentation { background-color: var(--color-customization-red-background); color: var(--color-customization-red-foreground); fill: var(--color-customization-red-foreground); } .PillPresentation.PillPresentation--colorRed.PillPresentation--interactive.PillThemeablePresentation:hover { background-color: var(--color-customization-red-background-hover); color: var(--color-customization-red-foreground-hover); fill: var(--color-customization-red-foreground-hover); } .PillPresentation.PillPresentation--colorRed.PillPresentation--interactive.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .PillPresentation.PillPresentation--colorOrange.PillThemeablePresentation { background-color: var(--color-customization-orange-background); color: var(--color-customization-orange-foreground); fill: var(--color-customization-orange-foreground); } .PillPresentation.PillPresentation--colorOrange.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .PillPresentation.PillPresentation--colorOrange.PillPresentation--interactive.PillThemeablePresentation { background-color: var(--color-customization-orange-background); color: var(--color-customization-orange-foreground); fill: var(--color-customization-orange-foreground); } .PillPresentation.PillPresentation--colorOrange.PillPresentation--interactive.PillThemeablePresentation:hover { background-color: var(--color-customization-orange-background-hover); color: var(--color-customization-orange-foreground-hover); fill: var(--color-customization-orange-foreground-hover); } .PillPresentation.PillPresentation--colorOrange.PillPresentation--interactive.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .PillPresentation.PillPresentation--colorYellowOrange.PillThemeablePresentation { background-color: var(--color-customization-yellow-orange-background); color: var(--color-customization-yellow-orange-foreground); fill: var(--color-customization-yellow-orange-foreground); } .PillPresentation.PillPresentation--colorYellowOrange.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .PillPresentation.PillPresentation--colorYellowOrange.PillPresentation--interactive.PillThemeablePresentation { background-color: var(--color-customization-yellow-orange-background); color: var(--color-customization-yellow-orange-foreground); fill: var(--color-customization-yellow-orange-foreground); } .PillPresentation.PillPresentation--colorYellowOrange.PillPresentation--interactive.PillThemeablePresentation:hover { background-color: var(--color-customization-yellow-orange-background-hover); color: var(--color-customization-yellow-orange-foreground-hover); fill: var(--color-customization-yellow-orange-foreground-hover); } .PillPresentation.PillPresentation--colorYellowOrange.PillPresentation--interactive.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .PillPresentation.PillPresentation--colorYellow.PillThemeablePresentation { background-color: var(--color-customization-yellow-background); color: var(--color-customization-yellow-foreground); fill: var(--color-customization-yellow-foreground); } .PillPresentation.PillPresentation--colorYellow.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .PillPresentation.PillPresentation--colorYellow.PillPresentation--interactive.PillThemeablePresentation { background-color: var(--color-customization-yellow-background); color: var(--color-customization-yellow-foreground); fill: var(--color-customization-yellow-foreground); } .PillPresentation.PillPresentation--colorYellow.PillPresentation--interactive.PillThemeablePresentation:hover { background-color: var(--color-customization-yellow-background-hover); color: var(--color-customization-yellow-foreground-hover); fill: var(--color-customization-yellow-foreground-hover); } .PillPresentation.PillPresentation--colorYellow.PillPresentation--interactive.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .PillPresentation.PillPresentation--colorYellowGreen.PillThemeablePresentation { background-color: var(--color-customization-yellow-green-background); color: var(--color-customization-yellow-green-foreground); fill: var(--color-customization-yellow-green-foreground); } .PillPresentation.PillPresentation--colorYellowGreen.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .PillPresentation.PillPresentation--colorYellowGreen.PillPresentation--interactive.PillThemeablePresentation { background-color: var(--color-customization-yellow-green-background); color: var(--color-customization-yellow-green-foreground); fill: var(--color-customization-yellow-green-foreground); } .PillPresentation.PillPresentation--colorYellowGreen.PillPresentation--interactive.PillThemeablePresentation:hover { background-color: var(--color-customization-yellow-green-background-hover); color: var(--color-customization-yellow-green-foreground-hover); fill: var(--color-customization-yellow-green-foreground-hover); } .PillPresentation.PillPresentation--colorYellowGreen.PillPresentation--interactive.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .PillPresentation.PillPresentation--colorGreen.PillThemeablePresentation { background-color: var(--color-customization-green-background); color: var(--color-customization-green-foreground); fill: var(--color-customization-green-foreground); } .PillPresentation.PillPresentation--colorGreen.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .PillPresentation.PillPresentation--colorGreen.PillPresentation--interactive.PillThemeablePresentation { background-color: var(--color-customization-green-background); color: var(--color-customization-green-foreground); fill: var(--color-customization-green-foreground); } .PillPresentation.PillPresentation--colorGreen.PillPresentation--interactive.PillThemeablePresentation:hover { background-color: var(--color-customization-green-background-hover); color: var(--color-customization-green-foreground-hover); fill: var(--color-customization-green-foreground-hover); } .PillPresentation.PillPresentation--colorGreen.PillPresentation--interactive.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .PillPresentation.PillPresentation--colorBlueGreen.PillThemeablePresentation { background-color: var(--color-customization-blue-green-background); color: var(--color-customization-blue-green-foreground); fill: var(--color-customization-blue-green-foreground); } .PillPresentation.PillPresentation--colorBlueGreen.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .PillPresentation.PillPresentation--colorBlueGreen.PillPresentation--interactive.PillThemeablePresentation { background-color: var(--color-customization-blue-green-background); color: var(--color-customization-blue-green-foreground); fill: var(--color-customization-blue-green-foreground); } .PillPresentation.PillPresentation--colorBlueGreen.PillPresentation--interactive.PillThemeablePresentation:hover { background-color: var(--color-customization-blue-green-background-hover); color: var(--color-customization-blue-green-foreground-hover); fill: var(--color-customization-blue-green-foreground-hover); } .PillPresentation.PillPresentation--colorBlueGreen.PillPresentation--interactive.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .PillPresentation.PillPresentation--colorAqua.PillThemeablePresentation { background-color: var(--color-customization-aqua-background); color: var(--color-customization-aqua-foreground); fill: var(--color-customization-aqua-foreground); } .PillPresentation.PillPresentation--colorAqua.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .PillPresentation.PillPresentation--colorAqua.PillPresentation--interactive.PillThemeablePresentation { background-color: var(--color-customization-aqua-background); color: var(--color-customization-aqua-foreground); fill: var(--color-customization-aqua-foreground); } .PillPresentation.PillPresentation--colorAqua.PillPresentation--interactive.PillThemeablePresentation:hover { background-color: var(--color-customization-aqua-background-hover); color: var(--color-customization-aqua-foreground-hover); fill: var(--color-customization-aqua-foreground-hover); } .PillPresentation.PillPresentation--colorAqua.PillPresentation--interactive.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .PillPresentation.PillPresentation--colorBlue.PillThemeablePresentation { background-color: var(--color-customization-blue-background); color: var(--color-customization-blue-foreground); fill: var(--color-customization-blue-foreground); } .PillPresentation.PillPresentation--colorBlue.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .PillPresentation.PillPresentation--colorBlue.PillPresentation--interactive.PillThemeablePresentation { background-color: var(--color-customization-blue-background); color: var(--color-customization-blue-foreground); fill: var(--color-customization-blue-foreground); } .PillPresentation.PillPresentation--colorBlue.PillPresentation--interactive.PillThemeablePresentation:hover { background-color: var(--color-customization-blue-background-hover); color: var(--color-customization-blue-foreground-hover); fill: var(--color-customization-blue-foreground-hover); } .PillPresentation.PillPresentation--colorBlue.PillPresentation--interactive.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .PillPresentation.PillPresentation--colorIndigo.PillThemeablePresentation { background-color: var(--color-customization-indigo-background); color: var(--color-customization-indigo-foreground); fill: var(--color-customization-indigo-foreground); } .PillPresentation.PillPresentation--colorIndigo.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .PillPresentation.PillPresentation--colorIndigo.PillPresentation--interactive.PillThemeablePresentation { background-color: var(--color-customization-indigo-background); color: var(--color-customization-indigo-foreground); fill: var(--color-customization-indigo-foreground); } .PillPresentation.PillPresentation--colorIndigo.PillPresentation--interactive.PillThemeablePresentation:hover { background-color: var(--color-customization-indigo-background-hover); color: var(--color-customization-indigo-foreground-hover); fill: var(--color-customization-indigo-foreground-hover); } .PillPresentation.PillPresentation--colorIndigo.PillPresentation--interactive.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .PillPresentation.PillPresentation--colorPurple.PillThemeablePresentation { background-color: var(--color-customization-purple-background); color: var(--color-customization-purple-foreground); fill: var(--color-customization-purple-foreground); } .PillPresentation.PillPresentation--colorPurple.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .PillPresentation.PillPresentation--colorPurple.PillPresentation--interactive.PillThemeablePresentation { background-color: var(--color-customization-purple-background); color: var(--color-customization-purple-foreground); fill: var(--color-customization-purple-foreground); } .PillPresentation.PillPresentation--colorPurple.PillPresentation--interactive.PillThemeablePresentation:hover { background-color: var(--color-customization-purple-background-hover); color: var(--color-customization-purple-foreground-hover); fill: var(--color-customization-purple-foreground-hover); } .PillPresentation.PillPresentation--colorPurple.PillPresentation--interactive.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .PillPresentation.PillPresentation--colorMagenta.PillThemeablePresentation { background-color: var(--color-customization-magenta-background); color: var(--color-customization-magenta-foreground); fill: var(--color-customization-magenta-foreground); } .PillPresentation.PillPresentation--colorMagenta.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .PillPresentation.PillPresentation--colorMagenta.PillPresentation--interactive.PillThemeablePresentation { background-color: var(--color-customization-magenta-background); color: var(--color-customization-magenta-foreground); fill: var(--color-customization-magenta-foreground); } .PillPresentation.PillPresentation--colorMagenta.PillPresentation--interactive.PillThemeablePresentation:hover { background-color: var(--color-customization-magenta-background-hover); color: var(--color-customization-magenta-foreground-hover); fill: var(--color-customization-magenta-foreground-hover); } .PillPresentation.PillPresentation--colorMagenta.PillPresentation--interactive.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .PillPresentation.PillPresentation--colorHotPink.PillThemeablePresentation { background-color: var(--color-customization-hot-pink-background); color: var(--color-customization-hot-pink-foreground); fill: var(--color-customization-hot-pink-foreground); } .PillPresentation.PillPresentation--colorHotPink.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .PillPresentation.PillPresentation--colorHotPink.PillPresentation--interactive.PillThemeablePresentation { background-color: var(--color-customization-hot-pink-background); color: var(--color-customization-hot-pink-foreground); fill: var(--color-customization-hot-pink-foreground); } .PillPresentation.PillPresentation--colorHotPink.PillPresentation--interactive.PillThemeablePresentation:hover { background-color: var(--color-customization-hot-pink-background-hover); color: var(--color-customization-hot-pink-foreground-hover); fill: var(--color-customization-hot-pink-foreground-hover); } .PillPresentation.PillPresentation--colorHotPink.PillPresentation--interactive.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .PillPresentation.PillPresentation--colorPink.PillThemeablePresentation { background-color: var(--color-customization-pink-background); color: var(--color-customization-pink-foreground); fill: var(--color-customization-pink-foreground); } .PillPresentation.PillPresentation--colorPink.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .PillPresentation.PillPresentation--colorPink.PillPresentation--interactive.PillThemeablePresentation { background-color: var(--color-customization-pink-background); color: var(--color-customization-pink-foreground); fill: var(--color-customization-pink-foreground); } .PillPresentation.PillPresentation--colorPink.PillPresentation--interactive.PillThemeablePresentation:hover { background-color: var(--color-customization-pink-background-hover); color: var(--color-customization-pink-foreground-hover); fill: var(--color-customization-pink-foreground-hover); } .PillPresentation.PillPresentation--colorPink.PillPresentation--interactive.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .PillPresentation.PillPresentation--colorCoolGray.PillThemeablePresentation { background-color: var(--color-customization-cool-gray-background); color: var(--color-customization-cool-gray-foreground); fill: var(--color-customization-cool-gray-foreground); } .PillPresentation.PillPresentation--colorCoolGray.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .PillPresentation.PillPresentation--colorCoolGray.PillPresentation--interactive.PillThemeablePresentation { background-color: var(--color-customization-cool-gray-background); color: var(--color-customization-cool-gray-foreground); fill: var(--color-customization-cool-gray-foreground); } .PillPresentation.PillPresentation--colorCoolGray.PillPresentation--interactive.PillThemeablePresentation:hover { background-color: var(--color-customization-cool-gray-background-hover); color: var(--color-customization-cool-gray-foreground-hover); fill: var(--color-customization-cool-gray-foreground-hover); } .PillPresentation.PillPresentation--colorCoolGray.PillPresentation--interactive.PillThemeablePresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .PillPresentation.PillPresentation--interactive { cursor: pointer; } :root, :root .DesignTokenThemeOverrideRegionInternal--light { --color-placeholder-background: rgba(55, 23, 23, 0.05); --color-placeholder-background-rgb: 55, 23, 23; } @media print { :root { --color-placeholder-background: rgba(55, 23, 23, 0.05); --color-placeholder-background-rgb: 55, 23, 23; } } :root .DesignTokenThemeSelectors-theme--darkMode { --color-placeholder-background: rgba(255, 255, 255, 0.11); --color-placeholder-background-rgb: 255, 255, 255; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode { --color-placeholder-background: rgba(255, 255, 255, 0.11); --color-placeholder-background-rgb: 255, 255, 255; } } @keyframes animation-shimmering { 0% { background-position: -300px 0; } to { background-position: 800px 0; } } .InversePrimaryButton.ButtonThemeablePresentation { color: #000; fill: var(--color-deprecated-darkGray1); background: #fff; border-color: #fff; } .InversePrimaryButton.ButtonThemeablePresentation--isEnabled:hover { color: #000; fill: var(--color-deprecated-darkGray1); background: #e0e0e0; border-color: #e0e0e0; } .InversePrimaryButton.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .InversePrimaryButton.ButtonThemeablePresentation--isEnabled:active { color: #000; fill: var(--color-deprecated-darkGray1); background: #d6d6d6; border-color: #d6d6d6; } .InversePrimaryButton.ButtonThemeablePresentation:focus { outline: none; } .InversePrimaryButton.ButtonThemeablePresentation:focus:not(:focus-visible) { box-shadow: none; } .InversePrimaryButton.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-inverse-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active-inverse); } .InversePrimaryButton.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { color: rgba(255, 255, 255, 0.24); fill: rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.16); } .InverseDarkSecondaryButton.ButtonThemeablePresentation { border-color: var(--color-inverse-dark-text); color: var(--color-inverse-dark-text); fill: var(--color-inverse-dark-text); background: 0 0; } .InverseDarkSecondaryButton.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-inverse-dark-background-hover); border-color: var(--color-inverse-dark-text); color: var(--color-inverse-dark-text); fill: var(--color-inverse-dark-text); } .InverseDarkSecondaryButton.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .InverseDarkSecondaryButton.ButtonThemeablePresentation--isEnabled:active { background: var(--color-inverse-dark-background-active); border-color: var(--color-inverse-dark-text); color: var(--color-inverse-dark-text); fill: var(--color-inverse-dark-text); } .InverseDarkSecondaryButton.ButtonThemeablePresentation:focus { outline: none; } .InverseDarkSecondaryButton.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .InverseDarkSecondaryButton.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active-inverse); } .InverseDarkSecondaryButton.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { color: rgba(255, 255, 255, 0.24); fill: rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.16); } .InverseSecondaryButton.ButtonThemeablePresentation { border-color: var(--color-inverse-border-strong); color: var(--color-inverse-text-strong); fill: var(--color-inverse-text-strong); background: 0 0; } .InverseSecondaryButton.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-inverse-background-hover); border-color: var(--color-inverse-border-strong); color: var(--color-inverse-text-strong); fill: var(--color-inverse-text-strong); } .InverseSecondaryButton.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .InverseSecondaryButton.ButtonThemeablePresentation--isEnabled:active { background: var(--color-inverse-background-active); border-color: var(--color-inverse-border-strong); color: var(--color-inverse-text-strong); fill: var(--color-inverse-text-strong); } .InverseSecondaryButton.ButtonThemeablePresentation:focus { outline: none; } .InverseSecondaryButton.ButtonThemeablePresentation:focus:not(:focus-visible) { box-shadow: none; } .InverseSecondaryButton.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active-inverse); } .InverseSecondaryButton.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { color: rgba(255, 255, 255, 0.24); fill: rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.16); } .ButtonGroup .InverseSubtleButton.ButtonGroup-button--notFirst { margin-left: 1px; } .InverseSubtleButton.ButtonThemeablePresentation { color: var(--color-inverse-text); fill: var(--color-inverse-text); background: 0 0; border-color: transparent; } .InverseSubtleButton.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-inverse-background-hover); color: var(--color-inverse-text); fill: var(--color-inverse-text); border-color: transparent; } .InverseSubtleButton.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .InverseSubtleButton.ButtonThemeablePresentation--isEnabled:active { background: var(--color-inverse-background-active); color: var(--color-inverse-text); fill: var(--color-inverse-text); border-color: transparent; } .InverseSubtleButton.ButtonThemeablePresentation:focus { outline: none; } .InverseSubtleButton.ButtonThemeablePresentation:focus:not(:focus-visible) { box-shadow: none; } .InverseSubtleButton.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active-inverse); } .InverseSubtleButton.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { color: var(--color-inverse-text-disabled); fill: var(--color-inverse-text-disabled); background: 0 0; border-color: transparent; } .InverseSubtleButton.ButtonThemeablePresentation--small, .InverseSubtleButton.ButtonThemeablePresentation--medium, .InverseSubtleButton.ButtonThemeablePresentation--large, .InverseSubtleButton.ButtonThemeablePresentation--xlarge { font-weight: 500; } .InverseSubtleButton.InverseSubtleButton--isCompact.ButtonThemeablePresentation--small, .InverseSubtleButton.InverseSubtleButton--isCompact.ButtonThemeablePresentation--medium, .InverseSubtleButton.InverseSubtleButton--isCompact.ButtonThemeablePresentation--large, .InverseSubtleButton.InverseSubtleButton--isCompact.ButtonThemeablePresentation--xlarge { padding: 0 4px; } .ButtonGroup .InverseSubtleToggleButton.ButtonGroup-button--notFirst { margin-left: 1px; } .InverseSubtleToggleButton.ButtonThemeablePresentation--medium, .InverseSubtleToggleButton.ButtonThemeablePresentation--large, .InverseSubtleToggleButton.ButtonThemeablePresentation--xlarge { font-weight: 500; } .InverseSubtleToggleButton.InverseSubtleToggleButton--isNotPressed.ButtonThemeablePresentation { color: var(--color-inverse-text); fill: var(--color-inverse-text); background: 0 0; border-color: transparent; } .InverseSubtleToggleButton.InverseSubtleToggleButton--isNotPressed.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-inverse-background-hover); color: var(--color-inverse-text); fill: var(--color-inverse-text); border-color: transparent; } .InverseSubtleToggleButton.InverseSubtleToggleButton--isNotPressed.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .InverseSubtleToggleButton.InverseSubtleToggleButton--isNotPressed.ButtonThemeablePresentation--isEnabled:active { background: var(--color-inverse-background-active); color: var(--color-inverse-text); fill: var(--color-inverse-text); border-color: transparent; } .InverseSubtleToggleButton.InverseSubtleToggleButton--isNotPressed.ButtonThemeablePresentation:focus { outline: none; } .InverseSubtleToggleButton.InverseSubtleToggleButton--isNotPressed.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .InverseSubtleToggleButton.InverseSubtleToggleButton--isNotPressed.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active-inverse); } .InverseSubtleToggleButton.InverseSubtleToggleButton--isNotPressed.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { color: var(--color-inverse-text-disabled); fill: var(--color-inverse-text-disabled); background: 0 0; border-color: transparent; } .InverseSubtleToggleButton.InverseSubtleToggleButton--isPressed.ButtonThemeablePresentation { color: #fff; fill: #fff; background: rgba(255, 255, 255, 0.24); border-color: transparent; } .InverseSubtleToggleButton.InverseSubtleToggleButton--isPressed.ButtonThemeablePresentation--isEnabled:hover { color: #fff; fill: #fff; background: rgba(255, 255, 255, 0.32); border-color: transparent; } .InverseSubtleToggleButton.InverseSubtleToggleButton--isPressed.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .InverseSubtleToggleButton.InverseSubtleToggleButton--isPressed.ButtonThemeablePresentation--isEnabled:active { color: #fff; fill: #fff; background: rgba(255, 255, 255, 0.4); border-color: transparent; } .InverseSubtleToggleButton.InverseSubtleToggleButton--isPressed.ButtonThemeablePresentation:focus { outline: none; } .InverseSubtleToggleButton.InverseSubtleToggleButton--isPressed.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .InverseSubtleToggleButton.InverseSubtleToggleButton--isPressed.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active-inverse); } .LoadingPlaceholderButton { background-color: var(--color-placeholder-background); background-image: linear-gradient( -90deg, rgba(var(--color-placeholder-background-rgb), 0) 0%, var(--color-placeholder-background) 50%, rgba(var(--color-placeholder-background-rgb), 0) 100% ); color: transparent; -webkit-user-select: none; -ms-user-select: none; user-select: none; background-position: -300px 0; background-repeat: no-repeat; background-size: 300px 100%; border-radius: 6px; animation: 1.5s linear infinite animation-shimmering; } .LoadingPlaceholderButton.LoadingPlaceholderButton--small { height: 20px; padding: 0 var(--button-padding-small); } .LoadingPlaceholderButton.LoadingPlaceholderButton--medium { height: 28px; padding: 0 var(--button-padding-medium); } .LoadingPlaceholderButton.LoadingPlaceholderButton--large { height: 36px; padding: 0 var(--button-padding-large); } .LoadingPlaceholderButton.LoadingPlaceholderButton--xlarge { height: 48px; padding: 0 var(--button-padding-xlarge); } .SubtleButton.SubtleButton--isCompact.ButtonThemeablePresentation--small, .SubtleButton.SubtleButton--isCompact.ButtonThemeablePresentation--medium, .SubtleButton.SubtleButton--isCompact.ButtonThemeablePresentation--large, .SubtleButton.SubtleButton--isCompact.ButtonThemeablePresentation--xlarge { padding: 0 4px; } .SubtleCountWithIconButton.ButtonThemeablePresentation { color: var(--color-text-weak); fill: var(--color-text-weak); background: 0 0; border-color: transparent; } .SubtleCountWithIconButton.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-background-hover); color: var(--color-text-weak-hover); fill: var(--color-text-weak-hover); border-color: transparent; } .SubtleCountWithIconButton.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .SubtleCountWithIconButton.ButtonThemeablePresentation--isEnabled:active { background: var(--color-background-active); color: var(--color-text-weak-hover); fill: var(--color-text-weak-hover); border-color: transparent; } .SubtleCountWithIconButton.ButtonThemeablePresentation:focus { outline: none; } .SubtleCountWithIconButton.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .SubtleCountWithIconButton.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active); } .SubtleCountWithIconButton.SubtleCountWithIconButton--withRegularIcon.ButtonThemeablePresentation--medium { padding: 0 5px; } .SubtleCountWithIconButton.SubtleCountWithIconButton--withRegularIcon.ButtonThemeablePresentation--large { padding: 0 9px; } .SubtleCountWithIconButton.SubtleCountWithIconButton--withRegularIcon.ButtonThemeablePresentation--xlarge { padding: 0 15px; } .SubtleCountWithIconButton.SubtleCountWithIconButton--withMiniIcon.ButtonThemeablePresentation--small { padding: 0 3px; } .SubtleCountWithIconButton.SubtleCountWithIconButton--withMiniIcon.ButtonThemeablePresentation--medium { padding: 0 7px; } .SubtleCountWithIconButton.SubtleCountWithIconButton--withMiniIcon.ButtonThemeablePresentation--large { padding: 0 11px; } .SubtleCountWithIconButton.SubtleCountWithIconButton--withMiniIcon.ButtonThemeablePresentation--xlarge { padding: 0 17px; } .ButtonGroup .SubtleToggleButton.ButtonGroup-button--notFirst { margin-left: 1px; } .SubtleToggleButton.ButtonThemeablePresentation--medium, .SubtleToggleButton.ButtonThemeablePresentation--large, .SubtleToggleButton.ButtonThemeablePresentation--xlarge { font-weight: 500; } .SubtleToggleButton.SubtleToggleButton--isNotPressed.ButtonThemeablePresentation { color: var(--color-text-weak); fill: var(--color-text-weak); background: 0 0; border-color: transparent; } .SubtleToggleButton.SubtleToggleButton--isNotPressed.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-background-hover); color: var(--color-text-weak-hover); fill: var(--color-text-weak-hover); border-color: transparent; } .SubtleToggleButton.SubtleToggleButton--isNotPressed.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .SubtleToggleButton.SubtleToggleButton--isNotPressed.ButtonThemeablePresentation--isEnabled:active { background: var(--color-background-active); color: var(--color-text-weak-hover); fill: var(--color-text-weak-hover); border-color: transparent; } .SubtleToggleButton.SubtleToggleButton--isNotPressed.ButtonThemeablePresentation:focus { outline: none; } .SubtleToggleButton.SubtleToggleButton--isNotPressed.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .SubtleToggleButton.SubtleToggleButton--isNotPressed.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active); } .SubtleToggleButton.SubtleToggleButton--isNotPressed.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { color: var(--color-text-disabled); fill: var(--color-text-disabled); background: 0 0; border-color: transparent; } .SubtleToggleButton.SubtleToggleButton--isPressed.ButtonThemeablePresentation { background: var(--color-button-background-subtle-pressed); border-color: var(--color-button-background-subtle-pressed); color: var(--color-selected-text); fill: var(--color-selected-text); } .SubtleToggleButton.SubtleToggleButton--isPressed.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-button-background-subtle-pressedHover); border-color: var(--color-button-background-subtle-pressedHover); color: var(--color-selected-text-hover); fill: var(--color-selected-text-hover); } .SubtleToggleButton.SubtleToggleButton--isPressed.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .SubtleToggleButton.SubtleToggleButton--isPressed.ButtonThemeablePresentation--isEnabled:active { background: var(--color-button-background-subtle-pressedActive); border-color: var(--color-button-background-subtle-pressedActive); color: var(--color-selected-text-hover); fill: var(--color-selected-text-hover); } .SubtleToggleButton.SubtleToggleButton--isPressed.ButtonThemeablePresentation:focus { outline: none; } .SubtleToggleButton.SubtleToggleButton--isPressed.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .SubtleToggleButton.SubtleToggleButton--isPressed.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active); } .SubtleToggleButton.SubtleToggleButton--isPressed.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-background-medium); border-color: var(--color-background-medium); color: var(--color-text-disabled); fill: var(--color-text-disabled); } .CompoundIcon { stroke-width: 2px; display: block; } svg:not(:root).CompoundIcon { overflow: visible; } .CompoundIcon.CompoundIcon--xsmall { width: 12px; min-width: 12px; height: 12px; min-height: 12px; } .CompoundIcon.CompoundIcon--small { width: 16px; min-width: 16px; height: 16px; min-height: 16px; } .CompoundIcon.CompoundIcon--medium { width: 24px; min-width: 24px; height: 24px; min-height: 24px; } .CompoundIcon.CompoundIcon--large { width: 32px; min-width: 32px; height: 32px; min-height: 32px; } .CompoundNavIcon { stroke-width: 2px; width: 20px; min-width: 20px; height: 20px; min-height: 20px; display: block; } svg:not(:root).CompoundNavIcon { overflow: visible; } .InverseDarkSubtleIconButton.IconButtonThemeablePresentation { fill: var(--color-inverse-dark-text); background: 0 0; border-color: transparent; } .InverseDarkSubtleIconButton.IconButtonThemeablePresentation--isEnabled:hover { background: var(--color-inverse-dark-background-hover); fill: var(--color-inverse-dark-text); border-color: transparent; } .InverseDarkSubtleIconButton.IconButtonThemeablePresentation--isEnabled.IconButtonThemeablePresentation--isActive, .InverseDarkSubtleIconButton.IconButtonThemeablePresentation--isEnabled:active { background: var(--color-inverse-dark-background-active); fill: var(--color-inverse-dark-text); border-color: transparent; } .InverseDarkSubtleIconButton.IconButtonThemeablePresentation:focus { outline: none; } .InverseDarkSubtleIconButton.IconButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .InverseDarkSubtleIconButton.IconButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active-inverse); } .InverseDarkSubtleIconButton.IconButtonThemeablePresentation.IconButtonThemeablePresentation--isDisabled { fill: var(--color-inverse-dark-text-disabled); background: 0 0; border-color: transparent; } .InverseDarkSubtleIconButton.IconButtonThemeablePresentation { border-radius: 6px; } .RemoveButton { box-sizing: border-box; border-radius: 6px; justify-content: center; align-items: center; display: inline-flex; } .RemoveButton .CompoundIcon-inner { fill: var(--color-background-weak); transition: fill 0.2s, stroke 0.2s; } .RemoveButton .CompoundIcon-outer { fill: var(--color-icon); stroke: var(--color-icon); transition: fill 0.2s, stroke 0.2s; } .RemoveButton.RemoveButton--isEnabled { cursor: pointer; } .RemoveButton.RemoveButton--isEnabled:hover .CompoundIcon-inner, .RemoveButton.RemoveButton--isEnabled:focus .CompoundIcon-inner { fill: var(--color-background-weak); transition: fill 0.2s, stroke 0.2s; } .RemoveButton.RemoveButton--isEnabled:hover .CompoundIcon-outer, .RemoveButton.RemoveButton--isEnabled:focus .CompoundIcon-outer { fill: var(--color-icon-hover); stroke: var(--color-icon-hover); transition: fill 0.2s, stroke 0.2s; } .RemoveButton.RemoveButton--isEnabled:focus { outline: none; } .RemoveButton.RemoveButton--isEnabled:focus:not(:focus-visible) { box-shadow: none; } .RemoveButton.RemoveButton--isEnabled:focus:not(:active):focus-visible { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active); } .RemoveButton.RemoveButton--isEnabled:active .CompoundIcon-inner { fill: var(--color-background-weak); transition: fill 0.2s, stroke 0.2s; } .RemoveButton.RemoveButton--isEnabled:active .CompoundIcon-outer { fill: var(--color-icon-active); stroke: var(--color-icon-active); transition: fill 0.2s, stroke 0.2s; } .RemoveButton.RemoveButton--xsmall.RemoveButton { width: 20px; min-width: 20px; height: 20px; min-height: 20px; } .RemoveButton.RemoveButton--small.RemoveButton { width: 28px; min-width: 28px; height: 28px; min-height: 28px; } .ShroudedIconButton.IconButtonThemeablePresentation { background: var(--color-button-background-shrouded); fill: var(--color-button-text-shrouded); border-color: transparent; } .ShroudedIconButton.IconButtonThemeablePresentation--isEnabled:hover { background: var(--color-button-background-shrouded-hover); fill: var(--color-button-text-shrouded); border-color: transparent; } .ShroudedIconButton.IconButtonThemeablePresentation--isEnabled.IconButtonThemeablePresentation--isActive, .ShroudedIconButton.IconButtonThemeablePresentation--isEnabled:active { background: var(--color-button-background-shrouded-active); fill: var(--color-button-text-shrouded); border-color: transparent; } .ShroudedIconButton.IconButtonThemeablePresentation:focus { outline: none; } .ShroudedIconButton.IconButtonThemeablePresentation:focus:not(:focus-visible) { box-shadow: none; } .ShroudedIconButton.IconButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active-inverse); } .ShroudedIconButton.IconButtonThemeablePresentation, .SubtleIconButton.IconButtonThemeablePresentation { border-radius: 6px; } .SubtleIconButton.SubtleIconButton--standardTheme.IconButtonThemeablePresentation { fill: var(--color-text-weak); background: 0 0; border-color: transparent; } .SubtleIconButton.SubtleIconButton--standardTheme.IconButtonThemeablePresentation--isEnabled:hover { background: var(--color-background-hover); fill: var(--color-text-weak-hover); border-color: transparent; } .SubtleIconButton.SubtleIconButton--standardTheme.IconButtonThemeablePresentation--isEnabled.IconButtonThemeablePresentation--isActive, .SubtleIconButton.SubtleIconButton--standardTheme.IconButtonThemeablePresentation--isEnabled:active { background: var(--color-background-active); fill: var(--color-text-weak-hover); border-color: transparent; } .SubtleIconButton.SubtleIconButton--standardTheme.IconButtonThemeablePresentation:focus { outline: none; } .SubtleIconButton.SubtleIconButton--standardTheme.IconButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .SubtleIconButton.SubtleIconButton--standardTheme.IconButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active); } .SubtleIconButton.SubtleIconButton--standardTheme.IconButtonThemeablePresentation.IconButtonThemeablePresentation--isDisabled { fill: var(--color-text-disabled); background: 0 0; border-color: transparent; } .SubtleIconButton.SubtleIconButton--inverseTheme.IconButtonThemeablePresentation { fill: var(--color-inverse-text); background: 0 0; border-color: transparent; } .SubtleIconButton.SubtleIconButton--inverseTheme.IconButtonThemeablePresentation--isEnabled:hover { background: var(--color-inverse-background-hover); fill: var(--color-inverse-text); border-color: transparent; } .SubtleIconButton.SubtleIconButton--inverseTheme.IconButtonThemeablePresentation--isEnabled.IconButtonThemeablePresentation--isActive, .SubtleIconButton.SubtleIconButton--inverseTheme.IconButtonThemeablePresentation--isEnabled:active { background: var(--color-inverse-background-active); fill: var(--color-inverse-text); border-color: transparent; } .SubtleIconButton.SubtleIconButton--inverseTheme.IconButtonThemeablePresentation:focus { outline: none; } .SubtleIconButton.SubtleIconButton--inverseTheme.IconButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .SubtleIconButton.SubtleIconButton--inverseTheme.IconButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active-inverse); } .SubtleIconButton.SubtleIconButton--inverseTheme.IconButtonThemeablePresentation.IconButtonThemeablePresentation--isDisabled { fill: var(--color-inverse-text-disabled); background: 0 0; border-color: transparent; } .SubtleIconToggleButton.IconButtonThemeablePresentation { border-radius: 6px; } .SubtleIconToggleButton--standardTheme.SubtleIconToggleButton--isNotPressed.IconButtonThemeablePresentation { fill: var(--color-text-weak); background: 0 0; border-color: transparent; } .SubtleIconToggleButton--standardTheme.SubtleIconToggleButton--isNotPressed.IconButtonThemeablePresentation--isEnabled:hover { background: var(--color-background-hover); fill: var(--color-text-weak-hover); border-color: transparent; } .SubtleIconToggleButton--standardTheme.SubtleIconToggleButton--isNotPressed.IconButtonThemeablePresentation--isEnabled.IconButtonThemeablePresentation--isActive, .SubtleIconToggleButton--standardTheme.SubtleIconToggleButton--isNotPressed.IconButtonThemeablePresentation--isEnabled:active { background: var(--color-background-active); fill: var(--color-text-weak-hover); border-color: transparent; } .SubtleIconToggleButton--standardTheme.SubtleIconToggleButton--isNotPressed.IconButtonThemeablePresentation:focus { outline: none; } .SubtleIconToggleButton--standardTheme.SubtleIconToggleButton--isNotPressed.IconButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .SubtleIconToggleButton--standardTheme.SubtleIconToggleButton--isNotPressed.IconButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active); } .SubtleIconToggleButton--standardTheme.SubtleIconToggleButton--isNotPressed.IconButtonThemeablePresentation.IconButtonThemeablePresentation--isDisabled { fill: var(--color-text-disabled); background: 0 0; border-color: transparent; } .SubtleIconToggleButton--standardTheme.SubtleIconToggleButton--isPressed.IconButtonThemeablePresentation { background: var(--color-button-background-subtle-pressed); border-color: var(--color-button-background-subtle-pressed); fill: var(--color-selected-text); } .SubtleIconToggleButton--standardTheme.SubtleIconToggleButton--isPressed.IconButtonThemeablePresentation--isEnabled:hover { background: var(--color-button-background-subtle-pressedHover); border-color: var(--color-button-background-subtle-pressedHover); fill: var(--color-selected-text-hover); } .SubtleIconToggleButton--standardTheme.SubtleIconToggleButton--isPressed.IconButtonThemeablePresentation--isEnabled.IconButtonThemeablePresentation--isActive, .SubtleIconToggleButton--standardTheme.SubtleIconToggleButton--isPressed.IconButtonThemeablePresentation--isEnabled:active { background: var(--color-button-background-subtle-pressedActive); border-color: var(--color-button-background-subtle-pressedActive); fill: var(--color-selected-text-hover); } .SubtleIconToggleButton--standardTheme.SubtleIconToggleButton--isPressed.IconButtonThemeablePresentation:focus { outline: none; } .SubtleIconToggleButton--standardTheme.SubtleIconToggleButton--isPressed.IconButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .SubtleIconToggleButton--standardTheme.SubtleIconToggleButton--isPressed.IconButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active); } .SubtleIconToggleButton--standardTheme.SubtleIconToggleButton--isPressed.IconButtonThemeablePresentation.IconButtonThemeablePresentation--isDisabled { background: var(--color-background-medium); border-color: var(--color-background-medium); fill: var(--color-text-disabled); } .SubtleIconToggleButton--inverseTheme.SubtleIconToggleButton--isNotPressed.IconButtonThemeablePresentation { fill: var(--color-inverse-text); background: 0 0; border-color: transparent; } .SubtleIconToggleButton--inverseTheme.SubtleIconToggleButton--isNotPressed.IconButtonThemeablePresentation--isEnabled:hover { background: var(--color-inverse-background-hover); fill: var(--color-inverse-text); border-color: transparent; } .SubtleIconToggleButton--inverseTheme.SubtleIconToggleButton--isNotPressed.IconButtonThemeablePresentation--isEnabled.IconButtonThemeablePresentation--isActive, .SubtleIconToggleButton--inverseTheme.SubtleIconToggleButton--isNotPressed.IconButtonThemeablePresentation--isEnabled:active { background: var(--color-inverse-background-active); fill: var(--color-inverse-text); border-color: transparent; } .SubtleIconToggleButton--inverseTheme.SubtleIconToggleButton--isNotPressed.IconButtonThemeablePresentation:focus { outline: none; } .SubtleIconToggleButton--inverseTheme.SubtleIconToggleButton--isNotPressed.IconButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .SubtleIconToggleButton--inverseTheme.SubtleIconToggleButton--isNotPressed.IconButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active-inverse); } .SubtleIconToggleButton--inverseTheme.SubtleIconToggleButton--isNotPressed.IconButtonThemeablePresentation.IconButtonThemeablePresentation--isDisabled { fill: var(--color-inverse-text-disabled); background: 0 0; border-color: transparent; } .SubtleIconToggleButton--inverseTheme.SubtleIconToggleButton--isPressed.IconButtonThemeablePresentation { fill: #fff; background: rgba(255, 255, 255, 0.24); border-color: transparent; } .SubtleIconToggleButton--inverseTheme.SubtleIconToggleButton--isPressed.IconButtonThemeablePresentation--isEnabled:hover { fill: #fff; background: rgba(255, 255, 255, 0.32); border-color: transparent; } .SubtleIconToggleButton--inverseTheme.SubtleIconToggleButton--isPressed.IconButtonThemeablePresentation--isEnabled.IconButtonThemeablePresentation--isActive, .SubtleIconToggleButton--inverseTheme.SubtleIconToggleButton--isPressed.IconButtonThemeablePresentation--isEnabled:active { fill: #fff; background: rgba(255, 255, 255, 0.4); border-color: transparent; } .SubtleIconToggleButton--inverseTheme.SubtleIconToggleButton--isPressed.IconButtonThemeablePresentation:focus { outline: none; } .SubtleIconToggleButton--inverseTheme.SubtleIconToggleButton--isPressed.IconButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .SubtleIconToggleButton--inverseTheme.SubtleIconToggleButton--isPressed.IconButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active-inverse); } .DeprecatedMessageBanner { flex-direction: column; flex-shrink: 0; display: flex; } .DeprecatedMessageBanner--default { background-color: var(--color-background-medium); color: var(--color-text); fill: var(--color-icon); } .DeprecatedMessageBanner--upsell { background-color: var(--color-upsell-background); color: var(--color-upsell-text); fill: var(--color-upsell-icon); } .DeprecatedMessageBanner--warning { background-color: var(--color-warning-background); color: var(--color-warning-text); fill: var(--color-warning-icon); } .DeprecatedMessageBanner--error { background-color: var(--color-danger-background); color: var(--color-danger-text); fill: var(--color-danger-icon); } .DeprecatedMessageBanner--success { background-color: var(--color-success-background); color: var(--color-success-text); fill: var(--color-success-icon); } .DeprecatedMessageBanner--beta { background-color: var(--color-beta-background); color: var(--color-beta-text); fill: var(--color-beta-icon); } .DeprecatedMessageBanner--left { align-items: flex-start; } .DeprecatedMessageBanner--center { align-items: center; } .DeprecatedMessageBanner-contents { box-sizing: border-box; flex-grow: 1; justify-content: flex-start; align-items: center; width: 100%; display: flex; } .DeprecatedMessageBanner--medium .DeprecatedMessageBanner-contents { min-height: 40px; padding: 4px 16px; } .DeprecatedMessageBanner--small .DeprecatedMessageBanner-contents { min-height: 32px; padding: 6px 8px; } .DeprecatedMessageBanner-contents--center { width: fit-content; } .DeprecatedMessageBannerStructure { flex-grow: 1; justify-content: space-between; gap: 8px; display: flex; } .DeprecatedMessageBannerStructure-leftContents { align-self: center; gap: 8px; display: flex; } .DeprecatedMessageBannerStructure-icon { line-height: initial; } .DeprecatedMessageBannerStructure--small .DeprecatedMessageBannerStructure-icon, .DeprecatedMessageBannerStructure--medium .DeprecatedMessageBannerStructure-icon { margin-top: 3px; } .DeprecatedMessageBannerStructure-message { align-self: center; } .DeprecatedMessageBannerStructure-button { flex-shrink: 0; align-items: center; display: inline-flex; } :root, :root .DesignTokenThemeOverrideRegionInternal--light { --color-card-background: #fff; --color-card-background-rgb: 255, 255, 255; } @media print { :root { --color-card-background: #fff; --color-card-background-rgb: 255, 255, 255; } } :root .DesignTokenThemeSelectors-theme--darkMode { --color-card-background: #2a2b2d; --color-card-background-rgb: 42, 43, 45; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode { --color-card-background: #2a2b2d; --color-card-background-rgb: 42, 43, 45; } } :root .DesignTokenThemeSelectors-theme--maroon .DesignTokenThemeOverrideRegionInternal--light { --color-card-background: #fff; --color-card-background-rgb: 255, 255, 255; } :root .DesignTokenThemeSelectors-theme--darkMode.DesignTokenThemeSelectors-theme--maroon { --color-card-background: #461d36; --color-card-background-rgb: 70, 29, 54; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode.DesignTokenThemeSelectors-theme--maroon { --color-card-background: #461d36; --color-card-background-rgb: 70, 29, 54; } } .ItemRow { white-space: nowrap; border-top: 1px solid transparent; border-bottom: 1px solid transparent; justify-content: space-between; align-items: center; height: 34px; padding: 0 32px; transition: box-shadow ease-in; display: flex; position: relative; overflow: visible; } .is-compactMode .ItemRow { height: 26px; } .ItemRow--enabled { transition: box-shadow 0.1s ease-in-out; } .ItemRow--enabled:hover { border-color: var(--color-border); } .ItemRow--enabled.ItemRow--highlighted { background-color: var(--color-selected-background); } .ItemRow--enabled.ItemRow--focused { background-color: var(--color-background-weak); border-color: var(--color-selected-border); } .ItemRow--enabled.ItemRow--boxShadow { box-shadow: var(--color-box-shadow-large); } .ItemRowTwoColumnStructure-left { flex: 1 1000 auto; justify-content: flex-start; align-items: center; min-width: 1px; height: 100%; display: flex; position: relative; } .SectionRow--subtask .ItemRowTwoColumnStructure-left { align-items: flex-start; } .ItemRowTwoColumnStructure-right { flex: 0 auto; justify-content: flex-end; align-items: center; max-width: 75%; height: 100%; min-height: 34px; display: flex; overflow: hidden; } .DragContainer--isHiddenOnDrag { display: none; } .DragHandle { cursor: grab; fill: var(--color-icon); flex-shrink: 0; justify-content: center; align-items: center; width: 32px; height: 34px; transition: fill 0.1s ease-in-out; display: flex; } .DragHandle:hover { fill: var(--color-icon-hover); } .DragLayer { pointer-events: none; width: 100%; height: 100%; z-index: var(--level-dragAndDropPreview); position: absolute; top: 0; left: 0; } .DragLayer-previewContainer { will-change: transform; position: absolute; top: 0; left: 0; } .DragSelectContainer { width: 100%; height: 100%; position: relative; } .DragSelectContainer-selectionBox { background: rgba(var(--color-deprecated-lightGray3), 0.5); border: 1px solid var(--color-border-hover); opacity: 0.4; pointer-events: none; border-radius: 4px; position: absolute; top: 0; left: 0; } .DraggableContainerPreview { padding: 4px; display: inline-block; } .DraggableRowPreview-row { background-color: var(--color-background-weak); box-shadow: var(--color-elevation-large); opacity: 0.8; border-radius: 4px; min-width: 300px; margin-left: 8px; padding: 4px; display: inline-block; } .Dragon { position: absolute; transform: scale(0.45) translate(-280px, -150px); } .Dragon .Dragon-arm { z-index: -1; position: absolute; } .Dragon .Dragon-backWing { z-index: -2; animation: 0.5s infinite dragon-back-wing; position: absolute; } .Dragon .Dragon-frontWing { z-index: 1; animation: 0.5s infinite dragon-front-wing; position: absolute; top: 0; left: 0; } .Dragon .Dragon-fire { animation: 1.5s infinite dragon-fire; position: absolute; top: -2px; left: 6px; } @keyframes dragon-back-wing { 0% { transform: perspective(150px) rotateX(0); } 50% { transform: perspective(150px) rotateX(80deg); } } @keyframes dragon-front-wing { 0% { transform: perspective(150px) rotateX(0); } 50% { transform: perspective(150px) rotateX(-80deg); } } @keyframes dragon-fire { 0% { opacity: 1; } 20% { opacity: 0.3; } 40% { opacity: 1; } 60% { opacity: 0.8; } 80% { opacity: 0.2; } to { opacity: 0.8; } } .DropTargetAttachment { position: relative; } .DropTargetAttachment-target { pointer-events: none; background: 0 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .DropTargetAttachment--dragging .DropTargetAttachment-target { background: var(--color-drop-target-background); } .DropTargetAttachment-border { border: 2px dashed var(--color-selected-border); border-radius: 4px; padding: 24px; display: none; position: absolute; top: 24px; bottom: 24px; left: 24px; right: 24px; } .DropTargetAttachment--dragging .DropTargetAttachment-border { flex-direction: row; justify-content: center; align-items: center; display: flex; } .DropTargetAttachment-border.DropTargetAttachment-border--disabled { border-color: var(--color-border-active); } .DropTargetAttachment-icon { fill: var(--color-selected-text); margin-right: 8px; } .DropTargetAttachment-icon.DropTargetAttachment-icon--disabled { fill: var(--color-text); } .DropTargetAttachment-imageText { color: var(--color-selected-text); text-align: center; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 300; } .DropTargetAttachment-imageText.DropTargetAttachment-imageText--disabled { color: var(--color-text); } .DropTargetPlaceholder--isHovering { border-top: 1px solid var(--color-border-active); height: 150px; } .DropTargetRow:not(.DropTargetRow--inSpreadsheetGrid) { margin-bottom: -1px; padding-bottom: 1px; position: relative; } .DropTargetRow:not( .DropTargetRow--inSpreadsheetGrid ).DropTargetRow--isHoveringAbove:before, .DropTargetRow:not( .DropTargetRow--inSpreadsheetGrid ).DropTargetRow--isHoveringBelow:after { border-bottom: 1px solid var(--color-selected-border); content: ""; pointer-events: none; z-index: var(--level-1); display: block; position: absolute; left: 0; right: 0; } .DropTargetRow:not( .DropTargetRow--inSpreadsheetGrid ).DropTargetRow--isHoveringAbove:before { top: -1px; } .DropTargetRow:not( .DropTargetRow--inSpreadsheetGrid ).DropTargetRow--isHoveringBelow:after { bottom: 1px; } .DropTargetTaskGroup .DropTargetTaskGroup-child--dropItemHovering, .DropTargetTaskGroupHeader .DropTargetTaskGroupHeader-child--dropItemHovering { background-color: var(--color-background-hover); border-color: var(--color-border); } .DropTargetTaskGroupHeader-child { border-top: 1px solid transparent; border-bottom: 1px solid transparent; } .HiddenCreatureCelebration { width: 280px; padding-bottom: 8px; transition: height 0.5s, padding 0.5s; } .HiddenCreatureCelebration.HiddenCreatureCelebration--isDisappearing { height: 0; padding: 0; } .HiddenCreatureCelebration-yetiContainer { background: var(--color-background-strong); width: 280px; height: 100%; position: relative; } .HiddenCreatureCelebration-handsContainer, .HiddenCreatureCelebration-bodyContainer { max-width: 190px; height: 95px; position: absolute; bottom: 0; overflow: hidden; } .HiddenCreatureCelebration-body { max-width: 190px; animation: 2.5s linear HiddenCreatureCelebration-body; transform: translate(95px, 148px); } .HiddenCreatureCelebration-hands { max-width: 190px; animation: 2.5s linear HiddenCreatureCelebration-hands; transform: translate(85px, 108px); } @keyframes HiddenCreatureCelebration-body { 8% { animation-timing-function: cubic-bezier(135, 0, 0.22, 0.995); transform: translate(95px, 148px); } 15% { transform: translate(95px, 43px); } 81% { transform: translate(95px, 43px); } 90% { transform: translate(95px, 148px); } } @keyframes HiddenCreatureCelebration-hands { 0% { transform: translate(85px, 108px); } 4% { transform: translate(85px, 74px); } 7% { transform: translate(85px, 83px); } 75% { transform: translate(85px, 83px); } 78% { transform: translate(85px, 74px); } 90% { transform: translate(85px, 108px); } } .LinearSortableListDragPreview { background-color: var(--color-background-weak); box-shadow: var(--color-elevation-selected-large-active); cursor: grabbing; border-radius: 8px; align-items: center; padding: 0 48px 0 16px; display: flex; } .LinearSortableListDragPreview.LinearSortableListDragPreview--small { height: 36px; } .LinearSortableListDragPreview.LinearSortableListDragPreview--medium { height: 40px; } .LinearSortableListDragPreview.LinearSortableListDragPreview--large { height: 48px; } .LinearSortableListDragPreview-graphic { margin: 0 8px 0 0; } .LinearSortableListVerticalDropTarget { z-index: var(--level-1); position: relative; } .LinearSortableListVerticalDropTarget:before { background-color: var(--color-selected-border); content: ""; width: 8px; height: 8px; z-index: var(--level-1); border-radius: 50%; position: absolute; top: 0; left: 0; transform: translateY(-50%); } .LinearSortableListVerticalDropTarget:after { background-color: var(--color-selected-border); content: ""; height: 2px; z-index: var(--level-1); margin: -1px 0; position: absolute; top: 0; left: 0; right: 0; } .ReorderableHorizontalList-itemContainer { flex-direction: row; width: 100%; height: 100%; display: flex; } .ReorderableHorizontalList-itemContainer > .ReorderableHorizontalList-itemWrapper, .ReorderableHorizontalList-itemContainer > .ReorderableHorizontalList-itemWrapper > .ReorderableHorizontalList-sortableItem { height: 100%; } .ReorderableHorizontalList-itemWrapper { flex: none; position: relative; } .ReorderableHorizontalList-itemWrapper.ReorderableHorizontalList-itemWrapper--hoveringBefore:before { background-color: var(--color-selected-border); content: ""; width: 1px; z-index: var(--level-dragAndDropPreview); display: block; position: absolute; top: 0; bottom: 0; left: 0; } .ReorderableHorizontalList-itemWrapper.ReorderableHorizontalList-itemWrapper--hoveringAfter:after { background-color: var(--color-selected-border); content: ""; width: 1px; z-index: var(--level-dragAndDropPreview); display: block; position: absolute; top: 0; bottom: 0; right: -1px; } .SortableList-itemContainer { width: 100%; height: 100%; display: flex; } .SortableList-itemContainer--disableFlexbox { display: block; } .SortableList-itemContainer--row { flex-direction: row; } .SortableList-itemContainer--column { flex-direction: column; } .SortableList-itemContainer--grid { flex-flow: wrap; } .SortableList-sortableItemContainer { flex: none; } .SortableList-sortableItem { width: 100%; height: 100%; } .SortableList-emptyStateDropTarget, .SortableList-endOfListDropTarget { flex-grow: 1; } @media print { .SortableList, .SortableList-itemContainer--row, .SortableList-itemContainer--column { width: 100%; height: auto; display: block; overflow: hidden; } .SortableList-itemContainer--row .SortableList-sortableItem, .SortableList-itemContainer--column .SortableList-sortableItem { width: 100%; height: auto; display: block; } } .UploadDropTargetAttachmentWrappingTextEditor { position: relative; } .UploadDropTargetAttachmentWrappingTextEditor-target { pointer-events: none; background: 0 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .UploadDropTargetAttachmentWrappingTextEditor-border { display: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .UploadDropTargetAttachmentWrappingTextEditor--dragging .UploadDropTargetAttachmentWrappingTextEditor-border { flex-direction: column; align-content: center; justify-content: center; display: flex; } .UploadDropTargetAttachmentWrappingTextEditor-border.UploadDropTargetAttachmentWrappingTextEditor-border--disabled { background: rgba(var(--color-danger-background-strong-rgb), 0.05); border: 4px solid var(--color-danger-border); } .UploadDropTargetAttachmentWrappingTextEditor-border.UploadDropTargetAttachmentWrappingTextEditor-border--enabled { background: rgba(var(--color-selected-background-strong-rgb), 0.05); animation-name: UploadDropTargetAttachmentWrappingTextEditor-pulse; animation-duration: 0.5s; animation-timing-function: ease-out; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes UploadDropTargetAttachmentWrappingTextEditor-pulse { 0% { box-shadow: inset 0 0 0 1px var(--color-selected-background-active); } to { box-shadow: inset 0 0 0 4px var(--color-selected-background-active); } } .ThemeableCardPresentation { background: var(--color-card-background); border: 1px solid var(--color-border); box-shadow: none; box-sizing: border-box; border-radius: 8px; transition-property: background, border-color, box-shadow; transition-duration: 0.2s; } .ThemeableCardPresentation.ThemeableCardPresentation--isInvalid { border-color: var(--color-danger-border); } .ThemeableInteractiveCardPresentation { outline: none; } .ThemeableInteractiveCardPresentation.ThemeableInteractiveCardPresentation--isFocused { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active); } .ThemeableInteractiveCardPresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active); } .ThemeableInteractiveCardPresentation.ThemeableInteractiveCardPresentation--isEnabled { cursor: pointer; } .ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isNotSelected:hover.ThemeableCardPresentation { background: var(--color-card-background); } .ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isNotSelected:hover.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-border-hover); } .ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isNotSelected:active.ThemeableCardPresentation, .ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation { background: var(--color-card-background); } .ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isNotSelected:active.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-border-active); } .ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isSelected.ThemeableCardPresentation { background: var(--color-selected-background); } .ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isSelected.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-selected-border); } .ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isSelected:hover.ThemeableCardPresentation { background: var(--color-selected-background-hover); } .ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isSelected:hover.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-selected-border-hover); } .ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isSelected:active.ThemeableCardPresentation, .ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation { background: var(--color-selected-background-active); } .ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isSelected:active.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-selected-border-hover); } .ThemeableInteractiveCardPresentation--isDisabled.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableCardPresentation { background: var(--color-background-medium); } .ThemeableInteractiveCardPresentation--isDisabled.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-border); } .ThemeableInteractiveCardPresentation--isDisabled.ThemeableInteractiveCardPresentation--isSelected.ThemeableCardPresentation { background: var(--color-selected-background); } .ThemeableInteractiveCardPresentation--isDisabled.ThemeableInteractiveCardPresentation--isSelected.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-selected-border); } .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation, .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation, .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation, .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation { background: var(--color-border); } .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused), .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused), .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused), .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-border); } .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation, .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation, .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation, .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation { background: var(--color-border); } .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused), .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused), .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused), .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-border); } .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation, .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation, .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation, .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation, .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation, .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation, .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation, .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation { background: var(--color-border); } .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused), .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused), .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused), .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused), .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused), .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused), .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused), .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-border); } .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation, .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation, .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation, .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation { background: var(--color-border); } .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused), .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused), .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused), .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-border); } .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation, .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation, .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation, .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation { background: var(--color-border); } .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused), .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused), .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused), .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-border); } .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation, .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation, .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation, .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation, .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation, .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation, .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation, .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation { background: var(--color-border); } .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused), .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused), .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused), .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused), .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused), .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused), .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused), .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused) { box-shadow: none; } .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-border); } .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation:focus-visible { box-shadow: none; outline: none; } .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation:focus-visible { box-shadow: none; outline: none; } .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation:focus-visible { box-shadow: none; outline: none; } .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation:focus-visible { box-shadow: none; outline: none; } .ThemeableDraggableCardPresentation--isDropZone .ThemeableDraggableCardPresentation > *, .ThemeableDraggableCardPresentation--isDropZone.ThemeableDraggableCardPresentation > *, .ThemeableDraggableCardPresentation--isDragging .ThemeableDraggableCardPresentation > *, .ThemeableDraggableCardPresentation--isDragging.ThemeableDraggableCardPresentation > * { opacity: 0; pointer-events: none; } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--isNotClickable.ThemeableInteractiveCardPresentation--isEnabled { cursor: grab; } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--default.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation { background: var(--color-card-background); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--default.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: var(--color-elevation-small); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--default.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused) { box-shadow: var(--color-elevation-small); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--default.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-card-background); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--default.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation { background: var(--color-card-background); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--default.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: var(--color-elevation-medium-hover); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--default.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused) { box-shadow: var(--color-elevation-medium-hover); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--default.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-card-background); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--default.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation, .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--default.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation { background: var(--color-card-background); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--default.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: var(--color-elevation-medium-active); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--default.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: var(--color-elevation-medium-active); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--default.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused), .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--default.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused) { box-shadow: var(--color-elevation-medium-active); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--default.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--default.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-card-background); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--isDragPreview.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation { background: var(--color-background-weak); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--isDragPreview.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: var(--color-elevation-selected-large-active); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--isDragPreview.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused) { box-shadow: var(--color-elevation-selected-large-active); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--isDragPreview.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-background-weak); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--isDragPreview.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation { background: var(--color-background-weak); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--isDragPreview.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: var(--color-elevation-selected-large-active); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--isDragPreview.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused) { box-shadow: var(--color-elevation-selected-large-active); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--isDragPreview.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-background-weak); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--isDragPreview.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation, .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--isDragPreview.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation { background: var(--color-background-weak); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--isDragPreview.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: var(--color-elevation-selected-large-active); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--isDragPreview.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: var(--color-elevation-selected-large-active); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--isDragPreview.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused), .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--isDragPreview.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused) { box-shadow: var(--color-elevation-selected-large-active); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--isDragPreview.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--isDragPreview.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-background-weak); } .SortableItem--preview .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation { background: var(--color-background-weak); } .SortableItem--preview .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: var(--color-elevation-selected-large-active); } .SortableItem--preview .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused) { box-shadow: var(--color-elevation-selected-large-active); } .SortableItem--preview .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-background-weak); } .SortableItem--preview .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation { background: var(--color-background-weak); } .SortableItem--preview .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: var(--color-elevation-selected-large-active); } .SortableItem--preview .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused) { box-shadow: var(--color-elevation-selected-large-active); } .SortableItem--preview .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-background-weak); } .SortableItem--preview .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation, .SortableItem--preview .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation { background: var(--color-background-weak); } .SortableItem--preview .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: var(--color-elevation-selected-large-active); } .SortableItem--preview .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: var(--color-elevation-selected-large-active); } .SortableItem--preview .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused), .SortableItem--preview .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused) { box-shadow: var(--color-elevation-selected-large-active); } .SortableItem--preview .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .SortableItem--preview .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-background-weak); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--default.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation { background: var(--color-selected-background); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--default.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: var(--color-elevation-selected-small); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--default.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused) { box-shadow: var(--color-elevation-selected-small); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--default.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-selected-background); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--default.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation { background: var(--color-selected-background); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--default.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: var(--color-elevation-selected-medium-hover); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--default.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused) { box-shadow: var(--color-elevation-selected-medium-hover); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--default.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-selected-background); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--default.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation, .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--default.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation { background: var(--color-selected-background); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--default.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: var(--color-elevation-selected-medium-active); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--default.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: var(--color-elevation-selected-medium-active); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--default.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused), .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--default.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused) { box-shadow: var(--color-elevation-selected-medium-active); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--default.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--default.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-selected-background); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--isDragPreview.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation { background: var(--color-selected-background); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--isDragPreview.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: var(--color-elevation-selected-large-active); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--isDragPreview.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused) { box-shadow: var(--color-elevation-selected-large-active); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--isDragPreview.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-selected-background); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--isDragPreview.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation { background: var(--color-selected-background); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--isDragPreview.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: var(--color-elevation-selected-large-active); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--isDragPreview.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused) { box-shadow: var(--color-elevation-selected-large-active); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--isDragPreview.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-selected-background); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--isDragPreview.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation, .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--isDragPreview.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation { background: var(--color-selected-background); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--isDragPreview.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: var(--color-elevation-selected-large-active); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--isDragPreview.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: var(--color-elevation-selected-large-active); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--isDragPreview.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused), .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--isDragPreview.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused) { box-shadow: var(--color-elevation-selected-large-active); } .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--isDragPreview.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .ThemeableDraggableCardPresentation.ThemeableDraggableCardPresentation--isDragPreview.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-selected-background); } .SortableItem--preview .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation { background: var(--color-selected-background); } .SortableItem--preview .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: var(--color-elevation-selected-large-active); } .SortableItem--preview .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused) { box-shadow: var(--color-elevation-selected-large-active); } .SortableItem--preview .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-selected-background); } .SortableItem--preview .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation { background: var(--color-selected-background); } .SortableItem--preview .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: var(--color-elevation-selected-large-active); } .SortableItem--preview .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused) { box-shadow: var(--color-elevation-selected-large-active); } .SortableItem--preview .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-selected-background); } .SortableItem--preview .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation, .SortableItem--preview .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation { background: var(--color-selected-background); } .SortableItem--preview .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: var(--color-elevation-selected-large-active); } .SortableItem--preview .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation:not( :focus-visible ) { box-shadow: var(--color-elevation-selected-large-active); } .SortableItem--preview .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused), .SortableItem--preview .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation:not( :focus ):not(.ThemeableCardPresentation--isFocused) { box-shadow: var(--color-elevation-selected-large-active); } .SortableItem--preview .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .SortableItem--preview .ThemeableDraggableCardPresentation.ThemeableInteractiveCardPresentation--isSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-selected-background); } .LabelPresentation { color: var(--color-text-weak); align-items: center; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 18px; display: flex; } .RequiredFieldIndicator { fill: var(--color-danger-icon); width: 12px; height: 12px; } .CheckableInputRowStructure { display: flex; } .CheckableInputRowStructure--top { align-items: baseline; } .CheckableInputRowStructure--center { align-items: center; } .CheckableInputRowStructure-input { flex-shrink: 0; } .CheckableInputRowStructure-label { flex-shrink: 1; min-width: 1px; padding-left: 8px; } .Checkbox { cursor: pointer; width: 12px; height: 12px; } .CheckboxWithLabel-input--alignTop { transform: translateY(1px); } .CheckboxWithLabel-label--enabled { cursor: pointer; } .CheckboxWithLabel-label--disabled { color: var(--color-text-disabled); } .Radio { cursor: pointer; } .RadioOrCheckboxGroupStructure-legend--spacing-spacing-0 { margin-bottom: 0; } .RadioOrCheckboxGroupStructure-legend--spacing-spacing-4 { margin-bottom: 4px; } .RadioOrCheckboxGroupStructure-legend--spacing-spacing-8 { margin-bottom: 8px; } .RadioOrCheckboxGroupStructure-legend--spacing-spacing-12 { margin-bottom: 12px; } .RadioOrCheckboxGroupStructure-legend--spacing-spacing-16 { margin-bottom: 16px; } .RadioOrCheckboxGroupStructure-legend--spacing-spacing-24 { margin-bottom: 24px; } .RadioOrCheckboxGroupStructure-legend--spacing-spacing-32 { margin-bottom: 32px; } .RadioOrCheckboxGroupStructure-legend--spacing-spacing-48 { margin-bottom: 48px; } .RadioOrCheckboxGroupStructure-legend--spacing-spacing-64 { margin-bottom: 64px; } .RadioOrCheckboxGroupStructure-legend--spacing-spacing-80 { margin-bottom: 80px; } .RadioWithLabel-input--alignTop { transform: translateY(1px); } .RadioWithLabel-label.RadioWithLabel-label--enabled { cursor: pointer; } .RadioWithLabel-label.RadioWithLabel-label--disabled { color: var(--color-text-disabled); } .SwitchPresentation { background: var(--color-button-switch-background); border: 1px solid var(--color-button-switch-background); cursor: pointer; -webkit-user-select: none; -ms-user-select: none; user-select: none; outline: none; flex-shrink: 0; transition: background 0.2s, border-color 0.2s; display: inline-flex; position: relative; overflow: hidden; } .SwitchPresentation:before { content: ""; } .SwitchPresentation:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .SwitchPresentation:not(.SwitchPresentation--disabled):hover { background: var(--color-button-switch-background-hover); border-color: var(--color-button-switch-background-hover); } .SwitchPresentation.SwitchPresentation--checked { background: var(--color-selected-background-strong); border-color: var(--color-selected-background-strong); } .SwitchPresentation.SwitchPresentation--checked:not( .SwitchPresentation--disabled ):hover { background: var(--color-selected-background-strong-hover); border-color: var(--color-selected-background-strong-hover); } .SwitchPresentation.SwitchPresentation--checked:not( .SwitchPresentation--disabled ):active { background: var(--color-selected-background-strong-active); border-color: var(--color-selected-background-strong-active); } .SwitchPresentation.SwitchPresentation--disabled { background: var(--color-button-switch-background-disabled); border-color: var(--color-button-switch-background-disabled); cursor: default; } .SwitchPresentation.SwitchPresentation--small.SwitchPresentation { border-radius: 7px; width: 20px; height: 10px; padding: 1px; } .SwitchPresentation.SwitchPresentation--small .SwitchPresentation-checkCircle { left: 0; } .SwitchPresentation.SwitchPresentation--small.SwitchPresentation--checked .SwitchPresentation-checkCircle { left: 10px; } .SwitchPresentation.SwitchPresentation--medium.SwitchPresentation { border-radius: 10px; width: 28px; height: 12px; padding: 3px; } .SwitchPresentation.SwitchPresentation--medium .SwitchPresentation-checkCircle { left: 1px; } .SwitchPresentation.SwitchPresentation--medium.SwitchPresentation--checked .SwitchPresentation-checkCircle { left: 17px; } .SwitchPresentation.SwitchPresentation--large.SwitchPresentation { border-radius: 14px; width: 40px; height: 20px; padding: 3px; } .SwitchPresentation.SwitchPresentation--large .SwitchPresentation-checkCircle { left: 1px; } .SwitchPresentation.SwitchPresentation--large.SwitchPresentation--checked .SwitchPresentation-checkCircle { left: 21px; } .SwitchPresentation-checkCircle { transition: left 0.2s; position: absolute; top: 50%; transform: translateY(-50%); } .SwitchPresentation-checkCircle .CompoundIcon-inner { fill: var(--color-button-switch-icon); transition: fill 0.2s, stroke 0.2s; } .SwitchPresentation-checkCircle .CompoundIcon-outer { fill: var(--color-button-switch-icon); stroke: var(--color-button-switch-background); transition: fill 0.2s, stroke 0.2s; } .SwitchPresentation:not(.SwitchPresentation--disabled):hover .SwitchPresentation-checkCircle .CompoundIcon-inner { fill: var(--color-button-switch-icon); transition: fill 0.2s, stroke 0.2s; } .SwitchPresentation:not(.SwitchPresentation--disabled):hover .SwitchPresentation-checkCircle .CompoundIcon-outer { fill: var(--color-button-switch-icon); stroke: var(--color-button-switch-background-hover); transition: fill 0.2s, stroke 0.2s; } .SwitchPresentation--disabled .SwitchPresentation-checkCircle .CompoundIcon-inner { fill: var(--color-button-switch-icon-disabled); transition: fill 0.2s, stroke 0.2s; } .SwitchPresentation--disabled .SwitchPresentation-checkCircle .CompoundIcon-outer { fill: var(--color-button-switch-icon-disabled); stroke: var(--color-button-switch-background-disabled); transition: fill 0.2s, stroke 0.2s; } .SwitchPresentation--checked:not(.SwitchPresentation--disabled) .SwitchPresentation-checkCircle .CompoundIcon-inner { fill: var(--color-selected-background-strong); transition: fill 0.2s, stroke 0.2s; } .SwitchPresentation--checked:not(.SwitchPresentation--disabled) .SwitchPresentation-checkCircle .CompoundIcon-outer { fill: var(--color-button-switch-icon); stroke: var(--color-selected-background-strong); transition: fill 0.2s, stroke 0.2s; } .SwitchPresentation:hover.SwitchPresentation--checked:not( .SwitchPresentation--disabled ) .SwitchPresentation-checkCircle .CompoundIcon-inner { fill: var(--color-selected-background-strong); transition: fill 0.2s, stroke 0.2s; } .SwitchPresentation:hover.SwitchPresentation--checked:not( .SwitchPresentation--disabled ) .SwitchPresentation-checkCircle .CompoundIcon-outer { fill: var(--color-button-switch-icon); stroke: var(--color-selected-background-strong-hover); transition: fill 0.2s, stroke 0.2s; } .SwitchPresentation--checked.SwitchPresentation--disabled .SwitchPresentation-checkCircle .CompoundIcon-inner { fill: var(--color-button-switch-background-disabled); transition: fill 0.2s, stroke 0.2s; } .SwitchPresentation--checked.SwitchPresentation--disabled .SwitchPresentation-checkCircle .CompoundIcon-outer { fill: var(--color-button-switch-icon-disabled); stroke: var(--color-button-switch-background-disabled); transition: fill 0.2s, stroke 0.2s; } .DeprecatedDropdown { margin-top: 2px; overflow: hidden; } .DeprecatedStaticMenuItem-selectedIcon { flex-shrink: 0; width: 12px; height: 12px; margin-left: -16px; margin-right: 4px; } .DeprecatedStaticMenuItem-label { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .DeprecatedStaticMenuItem-itemIcon { fill: var(--color-icon); width: 16px; height: 16px; margin-right: 8px; } .DeprecatedStaticMenuItem-itemIcon.is-disabled { fill: inherit; } .DeprecatedMenu { min-width: 185px; max-width: 500px; padding: 4px 0; font-size: 14px; } .PopoverStructure-body > .DeprecatedMenu { margin: -16px; } .DeprecatedDropdownItem { cursor: pointer; position: relative; } .DeprecatedDropdownItem.is-highlighted { background: var(--color-background-hover); } .DeprecatedDropdownItem .DeprecatedDropdownItem-menuItem { padding-right: 36px; } .DeprecatedDropdownItem-disclosureIcon { fill: var(--color-icon-strong); pointer-events: none; position: absolute; top: 50%; right: 8px; transform: translateY(-50%); } .DeprecatedDropdownItem-dropdown { transform: translateY(-5px); } .DeprecatedStaticMenuItemBase-button { color: var(--color-text); height: 36px; fill: var(--color-icon); align-items: center; padding: 0 12px; display: flex; position: relative; } .DeprecatedStaticMenuItemBase-button:hover { color: var(--color-text); text-decoration: none; } .DeprecatedStaticMenuItemBase-button.is-highlighted { background-color: var(--color-background-hover); } .DeprecatedStaticMenuItemBase-button.DeprecatedStaticMenuItemBase--medium { height: 36px; } .DeprecatedStaticMenuItemBase-button.DeprecatedStaticMenuItemBase--large { height: 48px; } .DeprecatedStaticMenuItemBase-button.DeprecatedStaticMenuItemBase--flexible { height: auto; } .Menu--select .DeprecatedStaticMenuItemBase-button { padding-left: 36px; } .DeprecatedStaticMenuItemBase-button.DeprecatedStaticMenuItemBase--dangerous { color: var(--color-danger-text); fill: var(--color-danger-icon); } .DeprecatedStaticMenuItemBase-button.DeprecatedStaticMenuItemBase--dangerous:hover { color: var(--color-danger-text-hover); fill: var(--color-danger-icon-hover); } .DeprecatedStaticMenuItemBase--select { padding-left: 36px; } .DeprecatedStaticMenuItemBase--disabled { color: var(--color-text-disabled); fill: var(--color-icon-disabled); } .DeprecatedStaticMenuItemBase--disabled.is-highlighted, .DeprecatedStaticMenuItemBase--disabled:hover { background: var(--color-background-weak); color: var(--color-text-disabled); cursor: default; fill: var(--color-icon-disabled); } .DeprecatedMenuItemWithDescription.DeprecatedStaticMenuItemBase-button { align-items: baseline; } .DeprecatedMenuItemWithDescription-isDisabled { color: var(--color-text-disabled); } .DeprecatedMenuItemWithDescription-isDisabled:hover { background: var(--color-background-weak); color: var(--color-text-disabled); cursor: default; } .DeprecatedMenuItemWithDescription-content { margin: 8px 0; } .DeprecatedMenuItem-selectedIcon { fill: var(--color-icon); flex-shrink: 0; width: 12px; height: 12px; margin-left: -24px; margin-right: 12px; } .DeprecatedMenuItem-label { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .DeprecatedMenuItem-itemIcon { fill: inherit; width: 16px; height: 16px; margin-right: 8px; } .DeprecatedMenuItemBase { cursor: pointer; } .DeprecatedMenuItemWithSwitch > .DeprecatedMenuItem-label { width: 100%; } .DeprecatedMenuItemWithSwitch-menuItemLabel { align-items: center; display: flex; } .DeprecatedMenuItemWithSwitch-label { text-overflow: ellipsis; margin-right: 16px; overflow: hidden; } .DeprecatedMenuItemWithSwitch-switch { flex-shrink: 0; margin-left: auto; } .DeprecatedPremiumIconItem > .DeprecatedMenuItem-label { width: 100%; } .DeprecatedPremiumIconItem-icon { fill: var(--color-upsell-icon); margin-left: 4px; } .DeprecatedPremiumIconItem-label { justify-content: space-between; align-items: center; display: flex; } .MenuScrollableSection { margin: -4px 0; padding: 4px 0; } .MenuScrollableSection--medium { max-height: 158px; } .MenuScrollableSection--large { max-height: 212px; } .MenuSectionLabel { margin-bottom: 4px; padding: 8px 12px 0; } .Menu--select .MenuSectionLabel, .MenuSectionLabel--select { padding-left: 36px; } .MenuSeparator { border-top: 1px solid var(--color-border); margin: 4px 0; } .FloatingSelect { flex-shrink: 1; min-width: 1px; } .FloatingSelect-label { text-overflow: ellipsis; white-space: nowrap; min-width: 1px; overflow: hidden; } .FormElementButton-label { flex-grow: 1; align-items: center; display: flex; } .FormElementButton.FormElementButton--subtleButton.ButtonThemeablePresentation--small, .FormElementButton.FormElementButton--subtleButton.ButtonThemeablePresentation--medium, .FormElementButton.FormElementButton--subtleButton.ButtonThemeablePresentation--large, .FormElementButton.FormElementButton--subtleButton.ButtonThemeablePresentation--xlarge { font-weight: 500; } .FormElementButton.FormElementButton--subtleButton.ButtonThemeablePresentation { color: var(--color-text-weak); fill: var(--color-text-weak); background: 0 0; border-color: transparent; } .FormElementButton.FormElementButton--subtleButton.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-background-hover); color: var(--color-text-weak-hover); fill: var(--color-text-weak-hover); border-color: transparent; } .FormElementButton.FormElementButton--subtleButton.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .FormElementButton.FormElementButton--subtleButton.ButtonThemeablePresentation--isEnabled:active { background: var(--color-background-active); color: var(--color-text-weak-hover); fill: var(--color-text-weak-hover); border-color: transparent; } .FormElementButton.FormElementButton--subtleButton.ButtonThemeablePresentation:focus { outline: none; } .FormElementButton.FormElementButton--subtleButton.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .FormElementButton.FormElementButton--subtleButton.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active); } .FormElementButton.FormElementButton--subtleButton.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { color: var(--color-text-disabled); fill: var(--color-text-disabled); background: 0 0; border-color: transparent; } .FormElementButton.FormElementButton--subtleButtonIsInvalid.ButtonThemeablePresentation--small, .FormElementButton.FormElementButton--subtleButtonIsInvalid.ButtonThemeablePresentation--medium, .FormElementButton.FormElementButton--subtleButtonIsInvalid.ButtonThemeablePresentation--large, .FormElementButton.FormElementButton--subtleButtonIsInvalid.ButtonThemeablePresentation--xlarge { font-weight: 500; } .FormElementButton.FormElementButton--subtleButtonIsInvalid.ButtonThemeablePresentation { background: var(--color-danger-background); border-color: var(--color-danger-background); color: var(--color-danger-text); fill: var(--color-danger-text); } .FormElementButton.FormElementButton--subtleButtonIsInvalid.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-danger-background-hover); color: var(--color-danger-text); fill: var(--color-danger-text); border-color: transparent; } .FormElementButton.FormElementButton--subtleButtonIsInvalid.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .FormElementButton.FormElementButton--subtleButtonIsInvalid.ButtonThemeablePresentation--isEnabled:active { background: var(--color-danger-background-active); color: var(--color-danger-text); fill: var(--color-danger-text); border-color: transparent; } .FormElementButton.FormElementButton--subtleButtonIsInvalid.ButtonThemeablePresentation:focus { outline: none; } .FormElementButton.FormElementButton--subtleButtonIsInvalid.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .FormElementButton.FormElementButton--subtleButtonIsInvalid.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .FormElementButton.FormElementButton--subtleButtonIsInvalid.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { color: var(--color-danger-text); fill: var(--color-danger-text); background: 0 0; border-color: transparent; } .FormElementButton.FormElementButton--secondaryButton.ButtonThemeablePresentation { background: var(--color-button-background-secondary); border-color: var(--color-border-strong); color: var(--color-text); fill: var(--color-icon); } .FormElementButton.FormElementButton--secondaryButton.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-button-background-secondary-hover); border-color: var(--color-border-hover); color: var(--color-text); fill: var(--color-icon-hover); } .FormElementButton.FormElementButton--secondaryButton.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .FormElementButton.FormElementButton--secondaryButton.ButtonThemeablePresentation--isEnabled:active { background: var(--color-button-background-secondary-active); border-color: var(--color-border-active); color: var(--color-text); fill: var(--color-icon-hover); } .FormElementButton.FormElementButton--secondaryButton.ButtonThemeablePresentation:focus { outline: none; } .FormElementButton.FormElementButton--secondaryButton.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .FormElementButton.FormElementButton--secondaryButton.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active); } .FormElementButton.FormElementButton--secondaryButton.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-button-background-primary-disabled); border-color: var(--color-border); color: var(--color-text-disabled); fill: var(--color-text-disabled); } .FormElementButton.FormElementButton--secondaryButtonIsInvalid.ButtonThemeablePresentation { background: var(--color-background-weak); border-color: var(--color-danger-border); color: var(--color-danger-text); fill: var(--color-danger-text); } .FormElementButton.FormElementButton--secondaryButtonIsInvalid.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-button-error-background-secondary-hover); border-color: var(--color-danger-border); color: var(--color-danger-text); fill: var(--color-danger-text); } .FormElementButton.FormElementButton--secondaryButtonIsInvalid.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .FormElementButton.FormElementButton--secondaryButtonIsInvalid.ButtonThemeablePresentation--isEnabled:active { background: var(--color-button-error-background-secondary-active); border-color: var(--color-danger-border); color: var(--color-danger-text); fill: var(--color-danger-text); } .FormElementButton.FormElementButton--secondaryButtonIsInvalid.ButtonThemeablePresentation:focus { outline: none; } .FormElementButton.FormElementButton--secondaryButtonIsInvalid.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .FormElementButton.FormElementButton--secondaryButtonIsInvalid.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active); } .FormElementButton.FormElementButton--secondaryButtonIsInvalid.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-button-background-primary-disabled); border-color: var(--color-border); color: var(--color-text-disabled); fill: var(--color-text-disabled); } .FormRowStructure { flex: auto; min-width: 1px; display: flex; } .FormRowStructure--labelPlacementLeft { flex-direction: row; } .FormRowStructure--labelPlacementTop { flex-direction: column; } .FormRowStructure-label { box-sizing: border-box; flex: none; display: inline-flex; } .FormRowStructure--labelPlacementLeft .FormRowStructure-label { justify-content: flex-end; align-items: center; width: 105px; margin-right: 8px; } .FormRowStructure--labelPlacementTop .FormRowStructure-label { margin-bottom: 8px; } .FormRowStructure-contents { flex-direction: column; flex: auto; min-width: 1px; display: flex; } .TeamPrivacyOptionLabel { align-items: center; display: flex; } .TeamPrivacyOptionLabel-icon { fill: var(--color-icon); margin-right: 8px; display: flex; } .TeamPrivacyOptionLabel-icon--disabled { fill: var(--color-text-disabled); } .FloatingCard.ThemeableCardPresentation { background: var(--color-card-background); } .FloatingCard.ThemeableCardPresentation:not(:focus-visible) { box-shadow: var(--color-elevation-small); } .FloatingCard.ThemeableCardPresentation:not(:focus):not( .ThemeableCardPresentation--isFocused ) { box-shadow: var(--color-elevation-small); } .FloatingCard.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-card-background); } .InverseCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled { outline: none; } .InverseCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation { background: rgba(255, 255, 255, 0.04); } .InverseCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: rgba(255, 255, 255, 0.04); } .InverseCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation { background: rgba(255, 255, 255, 0.08); } .InverseCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: rgba(255, 255, 255, 0.08); } .InverseCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation, .InverseCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation { background: rgba(255, 255, 255, 0.12); } .InverseCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .InverseCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: rgba(255, 255, 255, 0.12); } .InverseCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation:focus:not( :focus-visible ) { box-shadow: none; } .InverseCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isFocused { box-shadow: 0 0 0 2px var(--color-inverse-border-strong); } .InverseCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:focus-visible { box-shadow: 0 0 0 2px var(--color-inverse-border-strong); } .LinkCard, .NavigationLinkCard { color: var(--color-text); fill: var(--color-text); } .PlaceholderCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled { outline: none; } .PlaceholderCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation { background: var(--color-card-background); border-style: dashed; } .PlaceholderCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-border-strong); } .PlaceholderCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation { background: var(--color-card-background); } .PlaceholderCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-border-hover); } .PlaceholderCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation, .PlaceholderCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation { background: var(--color-card-background); } .PlaceholderCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .PlaceholderCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-border-active); } .PlaceholderCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation:focus:not( :focus-visible ) { box-shadow: none; } .PlaceholderCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation:focus:not( :focus-visible ):not(:hover).ThemeableCardPresentation { background: var(--color-card-background); } .PlaceholderCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation:focus:not( :focus-visible ):not(:hover).ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-border-hover); } .PlaceholderCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isFocused { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active); } .PlaceholderCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:focus-visible { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active); } .PlaceholderCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isFocused:not( :hover ).ThemeableCardPresentation { background: var(--color-card-background); } .PlaceholderCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:focus-visible:not( :hover ).ThemeableCardPresentation { background: var(--color-card-background); } .PlaceholderCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isFocused:not( :hover ).ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-border-hover); } .PlaceholderCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:focus-visible:not( :hover ).ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-border-hover); } .PlaceholderCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isDisabled.ThemeableCardPresentation { background: var(--color-background-medium); border-style: dashed; } .PlaceholderCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isDisabled.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-border); } .PlaceholderCardButton.ThemeableCardPresentation { border-width: 2px; } .SubtleCardButton.ThemeableCardPresentation { border-radius: 6px; } .SubtleCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled { outline: none; } .SubtleCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation { background: 0 0; } .SubtleCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: transparent; } .SubtleCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation { background: var(--color-background-hover); } .SubtleCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: transparent; } .SubtleCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation, .SubtleCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation { background: var(--color-background-active); } .SubtleCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .SubtleCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: transparent; } .SubtleCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation:focus:not( :focus-visible ) { box-shadow: none; } .SubtleCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation:focus:not( :focus-visible ):not(:hover).ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: transparent; } .SubtleCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isFocused { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active); } .SubtleCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:focus-visible { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active); } .SubtleCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isFocused:not( :hover ).ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: transparent; } .SubtleCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:focus-visible:not( :hover ).ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: transparent; } .SubtleCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isDisabled.ThemeableCardPresentation { background: 0 0; } .SubtleCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isDisabled.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: transparent; } .SubtleCardButton.SubtleCardButton--isInvalid { color: var(--color-danger-text); font-weight: 500; } .SubtleCardButton.SubtleCardButton--isInvalid.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation { background: var(--color-danger-background); } .SubtleCardButton.SubtleCardButton--isInvalid.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation { background: var(--color-danger-background-hover); } .SubtleCardButton.SubtleCardButton--isInvalid.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: transparent; } .SubtleCardButton.SubtleCardButton--isInvalid.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation, .SubtleCardButton.SubtleCardButton--isInvalid.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation { background: var(--color-danger-background-active); } .SubtleCardButton.SubtleCardButton--isInvalid.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .SubtleCardButton.SubtleCardButton--isInvalid.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: transparent; } .LightAssetFrame { background: var(--color-light-asset-background); border-radius: 12px; padding: 12px; } :root, :root .DesignTokenThemeOverrideRegionInternal--light { --color-storytelling-illustration-stroke: #690031; --color-storytelling-illustration-stroke-accent: #690031; --color-storytelling-illustration-fill: #ffeaec; --color-storytelling-illustration-fill-weak: #fff; --color-storytelling-illustration-fill-primary: #ff584a; --color-storytelling-illustration-empty-fill: none; } @media print { :root { --color-storytelling-illustration-stroke: #690031; --color-storytelling-illustration-stroke-accent: #690031; --color-storytelling-illustration-fill: #ffeaec; --color-storytelling-illustration-fill-weak: #fff; --color-storytelling-illustration-fill-primary: #ff584a; --color-storytelling-illustration-empty-fill: none; } } :root .DesignTokenThemeSelectors-theme--darkMode { --color-storytelling-illustration-stroke: #690031; --color-storytelling-illustration-stroke-accent: #ffeaec; --color-storytelling-illustration-fill: #ffeaec; --color-storytelling-illustration-fill-weak: #fff; --color-storytelling-illustration-fill-primary: #ff584a; --color-storytelling-illustration-empty-fill: none; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode { --color-storytelling-illustration-stroke: #690031; --color-storytelling-illustration-stroke-accent: #ffeaec; --color-storytelling-illustration-fill: #ffeaec; --color-storytelling-illustration-fill-weak: #fff; --color-storytelling-illustration-fill-primary: #ff584a; --color-storytelling-illustration-empty-fill: none; } } .StorytellingIllustration--width160 { width: 160px; height: 160px; } .StorytellingIllustration--width200 { width: 200px; height: 200px; } .StorytellingIllustration { fill: var(--color-storytelling-illustration-empty-fill); } .StorytellingIllustration-path { stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; vector-effect: non-scaling-stroke; } .StorytellingIllustration-path--strokeDefault { stroke: var(--color-storytelling-illustration-stroke); } .StorytellingIllustration-path--strokeAccent { stroke: var(--color-storytelling-illustration-stroke-accent); } .StorytellingIllustration-path--fillDefault { fill: var(--color-storytelling-illustration-fill); } .StorytellingIllustration-path--fillWeak { fill: var(--color-storytelling-illustration-fill-weak); } .StorytellingIllustration-path--fillPrimary { fill: var(--color-storytelling-illustration-fill-primary); } :root, :root .DesignTokenThemeOverrideRegionInternal--light { --color-modal-shroud: rgba(30, 31, 33, 0.75); } @media print { :root { --color-modal-shroud: rgba(30, 31, 33, 0.75); } } :root .DesignTokenThemeSelectors-theme--darkMode { --color-modal-shroud: rgba(66, 66, 68, 0.75); } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode { --color-modal-shroud: rgba(66, 66, 68, 0.75); } } :root .DesignTokenThemeSelectors-theme--maroon .DesignTokenThemeOverrideRegionInternal--light { --color-modal-shroud: rgba(30, 31, 33, 0.75); } :root .DesignTokenThemeSelectors-theme--darkMode.DesignTokenThemeSelectors-theme--maroon { --color-modal-shroud: rgba(66, 66, 68, 0.75); } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode.DesignTokenThemeSelectors-theme--maroon { --color-modal-shroud: rgba(66, 66, 68, 0.75); } } .DecorativeModalLayer { z-index: var(--level-modal); flex-direction: column; align-items: center; display: flex; position: fixed; top: 0; bottom: 0; left: 0; right: 0; } .DecorativeModalLayer-scrollable { flex-direction: column; flex: 1; align-items: center; width: 100%; display: flex; } @media print { .DecorativeModalLayer { display: block; position: absolute; } } .DecorativeModalLayer-desktopTopbarBuffer { background-color: var(--color-modal-shroud); flex-shrink: 0; width: 100%; } .DecorativeModalLayer-desktopTopbarBuffer.DecorativeModalLayer-desktopTopbarBuffer--isDesktop { height: 48px; } .FullScreenModal-modal { background-color: var(--color-background-weak); min-width: 920px; position: fixed; top: 0; bottom: 0; left: 0; right: 0; } .FullScreenModal-modal--hidden { opacity: 0; transform: translateY(10%); } .FullScreenModal-modal--appear { opacity: 1; transition: opacity 0.1s, transform 0.1s; transform: none; } .FullScreenModal-modal.FullScreenModal--isDesktop { top: 48px; } .FullScreenModal-modal.FullScreenModal--isResponsive { min-width: 320px; } .ModalBuffer { background-color: var(--color-modal-shroud); flex: auto; width: 100%; } .ModalBuffer .ModalBuffer-topBuffer, .ModalBuffer .ModalBuffer-bottomBuffer { flex: 0 1000 80px; height: 80px; min-height: 40px; } .ModalBuffer.ModalBuffer--isFullHeight { height: 100%; } .ModalBuffer.ModalBuffer--isFullHeight .ModalBuffer-topBuffer, .ModalBuffer.ModalBuffer--isFullHeight .ModalBuffer-bottomBuffer { flex: 0 1000 40px; height: 40px; min-height: 40px; } .ModalBuffer--notResponsive { min-height: 1px; } .ModalBuffer--responsive { min-height: 720px; } .ModalBuffer-content { flex: 0 auto; width: 100%; min-height: 1px; } .ModalBuffer-content.ModalBuffer-content--isFullHeight { flex-grow: 1; height: 100%; } .ModalPaneWithBuffer-pane { background: var(--color-background-weak); border-radius: 4px; flex-direction: column; min-height: 1px; display: flex; overflow: hidden; } .ModalPaneWithBuffer-pane.ModalPaneWithBuffer-pane--isNewRoundedCorner { border-radius: 12px; } .ModalPaneWithBuffer-pane--responsive { min-width: 320px; } .ModalPaneWithBuffer-pane--transparent { background: 0 0; } .WistiaVideoModal { text-align: left; width: 800px; overflow-y: auto; } @media screen and (min-height: 1000px) and (min-width: 1700px) { .WistiaVideoModal { width: 1600px; } } .WistiaVideoModal-header { text-align: center; flex-direction: column; flex-shrink: 0; align-items: center; padding: 32px 32px 24px; display: flex; position: relative; } .WistiaVideoModal-headerTitle { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 32px; display: flex; } .WistiaVideoModal-subHeader { text-align: center; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 22px; } .WistiaVideoModal-video { width: 680px; height: 385px; margin-bottom: 32px; } @media screen and (min-height: 1000px) and (min-width: 1700px) { .WistiaVideoModal-video { width: 1360px; height: 770px; } } .WistiaVideoModal-buttonContainer { position: absolute; top: 8px; right: 8px; } .WistiaVideoModal-collapseButton { margin-right: 4px; } .WistiaVideoModal-body { flex-direction: column; align-items: center; padding: 0 64px; display: flex; } .DeprecatedEmptyState { max-width: 640px; } .DeprecatedEmptyStateVideoCta { background: var(--color-background-weak); flex-direction: column; align-items: center; padding-top: 48px; display: flex; } .DeprecatedEmptyStateVideoCta-mediaContainer { margin-top: 32px; } .DeprecatedEmptyStateVideoCta-mediaContainer.DeprecatedEmptyStateVideoCta-mediaContainer--withFrame { border: 1px solid var(--color-border); border-radius: 8px; } .DeprecatedEmptyStateVideoCta-media--small { height: 360px; } .DeprecatedEmptyStateVideoCta-media--medium { max-width: 720px; height: 480px; } .EmptyState { max-width: 640px; } .EmptyState-ctaButtons { max-width: 100%; } .EmptyStateText { max-width: 640px; } .SizedTextInput { box-sizing: border-box; } .SizedTextInput.SizedTextInput--small { height: 28px; padding-top: 4px; padding-bottom: 4px; } .SizedTextInput.SizedTextInput--medium { height: 36px; padding-top: 6px; padding-bottom: 6px; } .TextInput--small { background-color: var(--color-background-weak); border-style: solid; border-width: 1px; border-color: var(--color-border-strong); padding: 0 var(--button-padding-medium); box-sizing: border-box; border-radius: 6px; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 12px; line-height: 18px; } .TextInput--small::-ms-input-placeholder { color: var(--color-text-weak); } .TextInput--small::placeholder { color: var(--color-text-weak); } .TextInput--medium { background-color: var(--color-background-weak); border-style: solid; border-width: 1px; border-color: var(--color-border-strong); padding: 0 var(--button-padding-large); box-sizing: border-box; border-radius: 6px; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 22px; } .TextInput--medium::-ms-input-placeholder { color: var(--color-text-weak); } .TextInput--medium::placeholder { color: var(--color-text-weak); } .TextInput:hover { border-color: var(--color-border-hover); } .TextInput:focus { border-color: var(--color-border-active); outline: none; } .TextInput:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active); } .TextInput[disabled] { background-color: var(--color-background-medium); border-color: var(--color-border); color: var(--color-text-disabled); } .TextInput.TextInput--invalid { border-color: var(--color-danger-border); } .TextInput.TextInput--invalid:hover { border-color: var(--color-danger-border-hover); } .TextInput.TextInput--invalid:focus { border-color: var(--color-danger-border-active); } .TextInput.TextInput--invalid:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .SimpleTextarea { background-color: var(--color-background-weak); border-style: solid; border-width: 1px; border-color: var(--color-border-strong); padding: 0 var(--button-padding-large); box-sizing: border-box; overflow-wrap: break-word; resize: none; white-space: pre-wrap; border-radius: 6px; min-height: 70px; padding-top: 6px; padding-bottom: 6px; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 22px; } .SimpleTextarea::-ms-input-placeholder { color: var(--color-text-weak); } .SimpleTextarea::placeholder { color: var(--color-text-weak); } .SimpleTextarea:hover { border-color: var(--color-border-hover); } .SimpleTextarea.SimpleTextarea--dynamic { border-color: transparent; } .SimpleTextarea.SimpleTextarea--dynamic:hover { border-color: var(--color-border-hover); } .SimpleTextarea.SimpleTextarea--dynamic:focus { border-color: var(--color-border-active); } .SimpleTextarea.SimpleTextarea--dynamic.TextInput--invalid { border-color: var(--color-danger-border); } .SimpleTextarea.SimpleTextarea--dynamic.TextInput--invalid:hover { border-color: var(--color-danger-border-hover); } .SimpleTextarea.SimpleTextarea--dynamic.TextInput--invalid:focus { border-color: var(--color-danger-border-active); } .SimpleTextarea.SimpleTextarea--invalid { border-color: var(--color-danger-border); } .SimpleTextarea.SimpleTextarea--invalid:hover { border-color: var(--color-danger-border-hover); } .SimpleTextarea.SimpleTextarea--invalid:focus { border-color: var(--color-danger-border-active); } .SimpleTextarea.SimpleTextarea--invalid:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .SimpleTextarea:focus { border-color: var(--color-border-active); outline: none; } .SimpleTextarea:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active); } .SimpleTextarea:disabled { background-color: var(--color-background-medium); border-color: var(--color-border); color: var(--color-text-disabled); } .AutogrowTextarea-container { position: relative; } .AutogrowTextarea-input, .AutogrowTextarea-shadow { text-rendering: optimizeSpeed; vertical-align: top; overflow: hidden; } .AutogrowTextarea-input { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .AutogrowTextarea-shadow { background-color: var(--color-background-weak); border-style: solid; border-width: 1px; border-color: var(--color-border-strong); padding: 0 var(--button-padding-large); box-sizing: border-box; overflow-wrap: break-word; resize: none; white-space: pre-wrap; visibility: hidden; border-radius: 6px; height: auto; min-height: 70px; padding-top: 6px; padding-bottom: 6px; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 22px; } .AutogrowTextarea-shadow::-ms-input-placeholder { color: var(--color-text-weak); } .AutogrowTextarea-shadow::placeholder { color: var(--color-text-weak); } .AutogrowTextarea-container--oneLine .AutogrowTextarea-input, .AutogrowTextarea-container--oneLine .AutogrowTextarea-shadow { min-height: 0; } .AutogrowTextarea-container--oneLine > .AutogrowTextarea-shadow, .AutogrowTextarea-container--oneLine > .AutogrowTextarea-input { white-space: pre; } .AutogrowTextareaWithCharacterCount { background-color: var(--color-background-weak); border-style: solid; border-width: 1px; border-color: var(--color-border-strong); padding: 0 var(--button-padding-large); box-sizing: border-box; overflow-wrap: break-word; resize: none; white-space: pre-wrap; border-radius: 6px; min-height: 70px; padding-top: 6px; padding-bottom: 6px; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 22px; } .AutogrowTextareaWithCharacterCount::-ms-input-placeholder { color: var(--color-text-weak); } .AutogrowTextareaWithCharacterCount::placeholder { color: var(--color-text-weak); } .AutogrowTextareaWithCharacterCount:hover { border-color: var(--color-border-hover); } .AutogrowTextareaWithCharacterCount:focus-within { border-color: var(--color-border-active); outline: none; } .AutogrowTextareaWithCharacterCount.AutogrowTextareaWithCharacterCount--invalid { border-color: var(--color-danger-border); } .AutogrowTextareaWithCharacterCount.AutogrowTextareaWithCharacterCount--invalid:hover { border-color: var(--color-danger-border-hover); } .AutogrowTextareaWithCharacterCount.AutogrowTextareaWithCharacterCount--invalid:focus { border-color: var(--color-danger-border-active); } .AutogrowTextareaWithCharacterCount.AutogrowTextareaWithCharacterCount--invalid:focus-within { border-color: var(--color-danger-border-active); } .AutogrowTextareaWithCharacterCount-textarea .AutogrowTextarea-input, .AutogrowTextareaWithCharacterCount-textarea .AutogrowTextarea-shadow { background: 0 0; border: 0; min-height: 20px; padding: 0; } .AutogrowTextareaWithCharacterCount-textarea .AutogrowTextarea-input:focus { animation: none; } .AutogrowTextareaWithCharacterCount-textarea .AutogrowTextarea-input.SimpleTextarea:focus-visible { box-shadow: none; } .AutogrowTextareaWithCharacterCount-textarea .AutogrowTextarea-input, .AutogrowTextareaWithCharacterCount-textarea .AutogrowTextarea-shadow { min-height: 70px; } .AutogrowTextareaWithCharacterCount-disabled { background: var(--color-background-medium); border-color: var(--color-border); } .AutogrowTextareaWithCharacterCount-disabled .AutogrowTextarea-input:disabled, .AutogrowTextareaWithCharacterCount-disabled .AutogrowTextarea-shadow:disabled { color: var(--color-text-disabled); -webkit-text-fill-color: var(--color-text-disabled); } .AutogrowTextareaWithCharacterCount-disabled:hover { border-color: var(--color-border); } .AutogrowTextareaWithCharacterCount-disabled #autogrow_textarea_with_character_count_character_count { color: var(--color-text-disabled); } .ValidatedTextInput { flex: auto; min-width: 1px; position: relative; } .ValidatedTextInput-input { width: 100%; } .ValidatedTextInput--invalid .ValidatedTextInput-input { border-color: var(--color-danger-border); } .ValidatedTextInput--invalid .ValidatedTextInput-input:hover { border-color: var(--color-danger-border-hover); } .ValidatedTextInput--invalid .ValidatedTextInput-input:focus { border-color: var(--color-danger-border-active); } .ValidatedTextInput--hasIcon .ValidatedTextInput-input.TextInput--small { padding-right: calc(var(--button-padding-medium) + 24px); } .ValidatedTextInput--hasIcon .ValidatedTextInput-input.TextInput--medium { padding-right: calc(var(--button-padding-large) + 24px); } .ValidatedTextInput-message { overflow-wrap: break-word; margin-top: 4px; } .ValidatedTextInput-inputContainer { position: relative; } .ValidatedTextInput-icon { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); } .DynamicTextInput--small { background-color: var(--color-background-weak); border-style: solid; border-width: 1px; border-color: var(--color-border-strong); padding: 0 var(--button-padding-medium); box-sizing: border-box; border-radius: 6px; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 12px; line-height: 18px; } .DynamicTextInput--small::-ms-input-placeholder { color: var(--color-text-weak); } .DynamicTextInput--small::placeholder { color: var(--color-text-weak); } .DynamicTextInput--medium { background-color: var(--color-background-weak); border-style: solid; border-width: 1px; border-color: var(--color-border-strong); padding: 0 var(--button-padding-large); box-sizing: border-box; border-radius: 6px; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 22px; } .DynamicTextInput--medium::-ms-input-placeholder { color: var(--color-text-weak); } .DynamicTextInput--medium::placeholder { color: var(--color-text-weak); } .DynamicTextInput { background-color: inherit; border-color: transparent; } .DynamicTextInput:hover { border-color: var(--color-border-hover); } .DynamicTextInput:focus { border-color: var(--color-border-active); outline: none; } .DynamicTextInput:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active); } .DynamicTextInput[disabled] { background-color: var(--color-background-medium); border-color: var(--color-border); color: var(--color-text-disabled); } .DynamicTextInput.DynamicTextInput--invalid { border-color: var(--color-danger-border); } .DynamicTextInput.DynamicTextInput--invalid:hover { border-color: var(--color-danger-border-hover); } .DynamicTextInput.DynamicTextInput--invalid:focus { border-color: var(--color-danger-border-active); } .DynamicTextInput.DynamicTextInput--invalid:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .TextInputIconContainer { position: relative; } .TextInputIconContainer-icon { justify-content: center; width: 24px; display: flex; } .TextInputIconContainer-iconContainer { justify-content: center; align-items: center; gap: 4px; display: flex; position: absolute; top: 50%; transform: translateY(-50%); } .TextInputIconContainer-leftIconContainer { left: 4px; } .TextInputIconContainer-rightIconContainer { right: 4px; } .TextInputIconContainer-input { width: 100%; padding-right: 32px; } .TextInputIconContainer-input.TextInputIconContainer-input--containsLeftIcon { padding-left: 32px; } .TextInputIconContainer-input.TextInputIconContainer-input--containsTwoRightIcons { padding-right: 60px; } .ValidatedInput-message { overflow-wrap: break-word; margin-top: 4px; } .FacepileButton { cursor: pointer; display: inline-flex; } .FacepileButton:focus { outline: none; } .FacepileButton:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active); } .FacepileButton.FacepileButton--sizeSmall.FacepileButton { border-radius: calc((var(--avatar-diameter-small) + 4px) * 0.5); } .FacepileButton.FacepileButton--sizeMedium.FacepileButton { border-radius: calc((var(--avatar-diameter-medium) + 4px) * 0.5); } .FacepileButton.FacepileButton--sizeLarge.FacepileButton { border-radius: calc((var(--avatar-diameter-large) + 4px) * 0.5); } .FacepileButton.FacepileButton--sizeXLarge.FacepileButton { border-radius: calc((var(--avatar-diameter-xlarge) + 4px) * 0.5); } .AvatarButton { cursor: pointer; display: inline-flex; } .AvatarButton.AvatarButton--sizeXSmall.AvatarButton { border-radius: calc(var(--avatar-diameter-xsmall) * 0.5 + 2px); } .AvatarButton.AvatarButton--sizeSmall.AvatarButton { border-radius: calc(var(--avatar-diameter-small) * 0.5 + 2px); } .AvatarButton.AvatarButton--sizeMedium.AvatarButton { border-radius: calc(var(--avatar-diameter-medium) * 0.5 + 2px); } .AvatarButton.AvatarButton--sizeLarge.AvatarButton { border-radius: calc(var(--avatar-diameter-large) * 0.5 + 2px); } .AvatarButton.AvatarButton--sizeXLarge.AvatarButton { border-radius: calc(var(--avatar-diameter-xlarge) * 0.5 + 2px); } .AvatarButton:focus { outline: none; } .AvatarButton:focus:focus:not(:focus-visible) { box-shadow: none; } .AvatarButton:focus:not(:active):focus-visible.AvatarButton--standardTheme { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .AvatarButton:focus:not(:active):focus-visible.AvatarButton--inverseTheme { box-shadow: 0 0 0 2px var(--color-inverse-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active-inverse); } .AvatarLink { cursor: pointer; border-radius: 50%; display: inline-flex; } .AvatarLink:focus { outline: none; } .AvatarLink:focus:focus:not(:focus-visible) { box-shadow: none; } .AvatarLink:focus:not(:active):focus-visible.AvatarLink--standardTheme { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .AvatarLink:focus:not(:active):focus-visible.AvatarLink--inverseTheme { box-shadow: 0 0 0 2px var(--color-inverse-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active-inverse); } .AvatarPhoto { vertical-align: top; white-space: nowrap; justify-content: center; align-items: center; display: inline-flex; position: relative; overflow: hidden; } .AvatarPhoto-image { box-sizing: border-box; height: inherit; min-height: inherit; min-width: inherit; width: inherit; background-position: 50%; background-size: cover; border-radius: 50%; position: absolute; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07); } .AvatarPhoto-initials:after { content: attr(aria-label); } .AvatarPhoto--default { background: center/cover var(--color-customization-background); box-sizing: border-box; color: var(--color-customization-foreground); border-radius: 50%; } .AvatarPhoto--app { background: 50% / cover; } .AvatarPhoto--xsmall { height: var(--avatar-diameter-xsmall); font-size: 12px; line-height: var(--avatar-diameter-xsmall); min-width: var(--avatar-diameter-xsmall); width: var(--avatar-diameter-xsmall); } .AvatarButton:hover .AvatarPhoto--xsmall .AvatarPhoto-image, .AvatarLink:hover .AvatarPhoto--xsmall .AvatarPhoto-image { box-shadow: inset 0 0 0 var(--avatar-diameter-xsmall) rgba(0, 0, 0, 0.1); } .AvatarPhoto--small { height: var(--avatar-diameter-small); font-size: 12px; line-height: var(--avatar-diameter-small); min-width: var(--avatar-diameter-small); width: var(--avatar-diameter-small); } .AvatarButton:hover .AvatarPhoto--small .AvatarPhoto-image, .AvatarLink:hover .AvatarPhoto--small .AvatarPhoto-image { box-shadow: inset 0 0 0 var(--avatar-diameter-small) rgba(0, 0, 0, 0.1); } .AvatarPhoto--medium { height: var(--avatar-diameter-medium); font-size: 12px; line-height: var(--avatar-diameter-medium); min-width: var(--avatar-diameter-medium); width: var(--avatar-diameter-medium); } .AvatarButton:hover .AvatarPhoto--medium .AvatarPhoto-image, .AvatarLink:hover .AvatarPhoto--medium .AvatarPhoto-image { box-shadow: inset 0 0 0 var(--avatar-diameter-medium) rgba(0, 0, 0, 0.1); } .AvatarPhoto--large { height: var(--avatar-diameter-large); font-size: 14px; line-height: var(--avatar-diameter-large); min-width: var(--avatar-diameter-large); width: var(--avatar-diameter-large); } .AvatarButton:hover .AvatarPhoto--large .AvatarPhoto-image, .AvatarLink:hover .AvatarPhoto--large .AvatarPhoto-image { box-shadow: inset 0 0 0 var(--avatar-diameter-large) rgba(0, 0, 0, 0.1); } .AvatarPhoto--xlarge { height: var(--avatar-diameter-xlarge); font-size: 16px; line-height: var(--avatar-diameter-xlarge); min-width: var(--avatar-diameter-xlarge); width: var(--avatar-diameter-xlarge); } .AvatarButton:hover .AvatarPhoto--xlarge .AvatarPhoto-image, .AvatarLink:hover .AvatarPhoto--xlarge .AvatarPhoto-image { box-shadow: inset 0 0 0 var(--avatar-diameter-xlarge) rgba(0, 0, 0, 0.1); } .AvatarPhoto--huge { height: var(--avatar-diameter-huge); font-size: 24px; line-height: var(--avatar-diameter-huge); min-width: var(--avatar-diameter-huge); width: var(--avatar-diameter-huge); } .AvatarButton:hover .AvatarPhoto--huge .AvatarPhoto-image, .AvatarLink:hover .AvatarPhoto--huge .AvatarPhoto-image { box-shadow: inset 0 0 0 var(--avatar-diameter-huge) rgba(0, 0, 0, 0.1); } .AvatarPhoto--mega { height: var(--avatar-diameter-mega); font-size: 48px; line-height: var(--avatar-diameter-mega); min-width: var(--avatar-diameter-mega); width: var(--avatar-diameter-mega); } .AvatarButton:hover .AvatarPhoto--mega .AvatarPhoto-image, .AvatarLink:hover .AvatarPhoto--mega .AvatarPhoto-image { box-shadow: inset 0 0 0 var(--avatar-diameter-mega) rgba(0, 0, 0, 0.1); } .AvatarPhoto--xmega { height: var(--avatar-diameter-xmega); font-size: 56px; line-height: var(--avatar-diameter-xmega); min-width: var(--avatar-diameter-xmega); width: var(--avatar-diameter-xmega); } .AvatarButton:hover .AvatarPhoto--xmega .AvatarPhoto-image, .AvatarLink:hover .AvatarPhoto--xmega .AvatarPhoto-image { box-shadow: inset 0 0 0 var(--avatar-diameter-xmega) rgba(0, 0, 0, 0.1); } .AvatarPhoto--color0.AvatarPhoto { background-color: var(--color-customization-purple-background); color: var(--color-customization-purple-foreground); } .AvatarPhoto--color1.AvatarPhoto { background-color: var(--color-customization-blue-green-background); color: var(--color-customization-blue-green-foreground); } .AvatarPhoto--color2.AvatarPhoto { background-color: var(--color-customization-magenta-background); color: var(--color-customization-magenta-foreground); } .AvatarPhoto--color3.AvatarPhoto { background-color: var(--color-customization-pink-background); color: var(--color-customization-pink-foreground); } .AvatarPhoto--color4.AvatarPhoto { background-color: var(--color-customization-blue-background); color: var(--color-customization-blue-foreground); } .AvatarPhoto--color5.AvatarPhoto { background-color: var(--color-customization-yellow-background); color: var(--color-customization-yellow-foreground); } .AvatarPhoto--color6.AvatarPhoto { background-color: var(--color-customization-yellow-orange-background); color: var(--color-customization-yellow-orange-foreground); } .AvatarPhoto--color7.AvatarPhoto { background-color: var(--color-customization-indigo-background); color: var(--color-customization-indigo-foreground); } .AvatarPhoto--colorRed.AvatarPhoto { background-color: var(--color-customization-red-background); color: var(--color-customization-red-foreground); } .AvatarPhoto--colorOrange.AvatarPhoto { background-color: var(--color-customization-orange-background); color: var(--color-customization-orange-foreground); } .AvatarPhoto--colorYellowOrange.AvatarPhoto { background-color: var(--color-customization-yellow-orange-background); color: var(--color-customization-yellow-orange-foreground); } .AvatarPhoto--colorYellow.AvatarPhoto { background-color: var(--color-customization-yellow-background); color: var(--color-customization-yellow-foreground); } .AvatarPhoto--colorYellowGreen.AvatarPhoto { background-color: var(--color-customization-yellow-green-background); color: var(--color-customization-yellow-green-foreground); } .AvatarPhoto--colorGreen.AvatarPhoto { background-color: var(--color-customization-green-background); color: var(--color-customization-green-foreground); } .AvatarPhoto--colorBlueGreen.AvatarPhoto { background-color: var(--color-customization-blue-green-background); color: var(--color-customization-blue-green-foreground); } .AvatarPhoto--colorAqua.AvatarPhoto { background-color: var(--color-customization-aqua-background); color: var(--color-customization-aqua-foreground); } .AvatarPhoto--colorBlue.AvatarPhoto { background-color: var(--color-customization-blue-background); color: var(--color-customization-blue-foreground); } .AvatarPhoto--colorIndigo.AvatarPhoto { background-color: var(--color-customization-indigo-background); color: var(--color-customization-indigo-foreground); } .AvatarPhoto--colorPurple.AvatarPhoto { background-color: var(--color-customization-purple-background); color: var(--color-customization-purple-foreground); } .AvatarPhoto--colorMagenta.AvatarPhoto { background-color: var(--color-customization-magenta-background); color: var(--color-customization-magenta-foreground); } .AvatarPhoto--colorHotPink.AvatarPhoto { background-color: var(--color-customization-hot-pink-background); color: var(--color-customization-hot-pink-foreground); } .AvatarPhoto--colorPink.AvatarPhoto { background-color: var(--color-customization-pink-background); color: var(--color-customization-pink-foreground); } .AvatarPhoto--colorCoolGray.AvatarPhoto { background-color: var(--color-customization-cool-gray-background); color: var(--color-customization-cool-gray-foreground); } .Avatar { background: center/cover var(--color-deprecated-lightGray3); box-sizing: border-box; color: #fff; color-adjust: exact; vertical-align: top; border-radius: 50%; justify-content: center; align-items: center; display: inline-flex; position: relative; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07); } .Avatar-initials { display: none; position: relative; top: 1px; } .Avatar--withInitials > .Avatar-initials { display: inline; } .Avatar-vacationOverlay { box-shadow: inset 0 0 0 1px var(--color-warning-icon), inset 0 0 0 2px var(--color-background-weak); text-align: center; border-radius: 50%; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .Avatar-vacationOverlay:before { background-color: var(--color-background-weak); content: ""; opacity: 0.5; border-radius: 50%; width: 100%; height: 100%; display: block; } .AvatarPlaceholder { border: 1px dashed var(--color-icon); fill: var(--color-icon); box-sizing: border-box; background: 50%; border-radius: 50%; justify-content: center; align-items: center; display: inline-flex; } .AvatarButton:hover .AvatarPlaceholder, .AvatarLink:hover .AvatarPlaceholder, .FacepileButton:hover .AvatarPlaceholder { border: 1px dashed var(--color-icon-hover); fill: var(--color-icon-hover); background: 50%; background-color: var(--color-background-hover); } .AvatarButton:active .AvatarPlaceholder, .AvatarButton--isExpanded .AvatarPlaceholder, .AvatarLink:active .AvatarPlaceholder { border: 1px dashed var(--color-icon-active); fill: var(--color-icon-active); background: 50%; background-color: var(--color-background-active); } .AvatarPlaceholder--xsmall.AvatarPlaceholder { height: var(--avatar-diameter-xsmall); width: var(--avatar-diameter-xsmall); } .AvatarPlaceholder--small.AvatarPlaceholder { height: var(--avatar-diameter-small); width: var(--avatar-diameter-small); } .AvatarPlaceholder--medium.AvatarPlaceholder { height: var(--avatar-diameter-medium); width: var(--avatar-diameter-medium); } .AvatarPlaceholder--large.AvatarPlaceholder { height: var(--avatar-diameter-large); width: var(--avatar-diameter-large); } .AvatarPlaceholder--xlarge.AvatarPlaceholder { height: var(--avatar-diameter-xlarge); width: var(--avatar-diameter-xlarge); } .AvatarPlaceholder--huge.AvatarPlaceholder { height: var(--avatar-diameter-huge); width: var(--avatar-diameter-huge); } .AvatarPlaceholder--mega.AvatarPlaceholder { height: var(--avatar-diameter-mega); width: var(--avatar-diameter-mega); } .AvatarPlaceholder--xmega.AvatarPlaceholder { height: var(--avatar-diameter-xmega); width: var(--avatar-diameter-xmega); } .CountAvatar { box-sizing: border-box; justify-content: center; align-items: center; display: inline-flex; } .AvatarButton:hover .CountAvatar.CountAvatar.CountAvatar--standardTheme { background: var(--color-background-strong); border: 1px solid var(--color-border-strong); color: var(--color-text-weak); } .AvatarButton:hover .CountAvatar.CountAvatar.CountAvatar--inverseTheme { background: var(--color-inverse-background-medium); border: 1px solid var(--color-inverse-border); color: var(--color-inverse-text-weak); } .AvatarLink:hover .CountAvatar.CountAvatar.CountAvatar--standardTheme { background: var(--color-background-strong); border: 1px solid var(--color-border-strong); color: var(--color-text-weak); } .AvatarLink:hover .CountAvatar.CountAvatar.CountAvatar--inverseTheme { background: var(--color-inverse-background-medium); border: 1px solid var(--color-inverse-border); color: var(--color-inverse-text-weak); } .FacepileButton:hover .CountAvatar.CountAvatar.CountAvatar--standardTheme { background: var(--color-background-strong); border: 1px solid var(--color-border-strong); color: var(--color-text-weak); } .FacepileButton:hover .CountAvatar.CountAvatar.CountAvatar--inverseTheme { background: var(--color-inverse-background-medium); border: 1px solid var(--color-inverse-border); color: var(--color-inverse-text-weak); } .CountAvatar.CountAvatar--standardTheme { background: var(--color-background-medium); border: 1px solid var(--color-border-strong); color: var(--color-text-weak); } .CountAvatar.CountAvatar--inverseTheme { background: var(--color-inverse-background-strong); border: 1px solid var(--color-inverse-border); color: var(--color-inverse-text-weak); } .CountAvatar.CountAvatar--xsmall { border-radius: calc(var(--avatar-diameter-xsmall) * 0.5); height: var(--avatar-diameter-xsmall); min-width: var(--avatar-diameter-xsmall); padding: 0 4px; font-size: 12px; } .CountAvatar.CountAvatar--xsmall.CountAvatar--abbreviatedCount { padding: 0 8px; } .CountAvatar.CountAvatar--small { border-radius: calc(var(--avatar-diameter-small) * 0.5); height: var(--avatar-diameter-small); min-width: var(--avatar-diameter-small); padding: 0 4px; font-size: 12px; } .CountAvatar.CountAvatar--small.CountAvatar--abbreviatedCount { padding: 0 8px; } .CountAvatar.CountAvatar--medium { border-radius: calc(var(--avatar-diameter-medium) * 0.5); height: var(--avatar-diameter-medium); min-width: var(--avatar-diameter-medium); padding: 0 4px; font-size: 12px; } .CountAvatar.CountAvatar--medium.CountAvatar--abbreviatedCount { padding: 0 8px; } .CountAvatar.CountAvatar--large { border-radius: calc(var(--avatar-diameter-large) * 0.5); height: var(--avatar-diameter-large); min-width: var(--avatar-diameter-large); padding: 0 8px; font-size: 14px; } .CountAvatar.CountAvatar--xlarge { border-radius: calc(var(--avatar-diameter-xlarge) * 0.5); height: var(--avatar-diameter-xlarge); min-width: var(--avatar-diameter-xlarge); padding: 0 8px; font-size: 16px; } .CountAvatar.CountAvatar--huge { border-radius: calc(var(--avatar-diameter-huge) * 0.5); height: var(--avatar-diameter-huge); min-width: var(--avatar-diameter-huge); padding: 0 12px; font-size: 24px; } .CountAvatar.CountAvatar--mega { border-radius: calc(var(--avatar-diameter-mega) * 0.5); height: var(--avatar-diameter-mega); min-width: var(--avatar-diameter-mega); padding: 0 12px; font-size: 48px; } .CountAvatar.CountAvatar--xmega { border-radius: calc(var(--avatar-diameter-xmega) * 0.5); height: var(--avatar-diameter-xmega); min-width: var(--avatar-diameter-xmega); padding: 0 16px; font-size: 56px; } .IconAvatar { box-sizing: border-box; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07); } .IconAvatar--aiteammate { background: linear-gradient( 135deg, var(--color-ai-copilot-avatar-background-1), var(--color-ai-copilot-avatar-background-2) ); box-shadow: none; } .IconAvatar--warning { background: var(--color-warning-background); fill: var(--color-warning-icon-hover); border: 1px solid var(--color-warning-border); box-shadow: none; } .IconAvatar--weak { background: var(--color-background-weak); border: 1px solid var(--color-border-active); box-shadow: none; } .IconAvatar--weakregularborder { background: var(--color-background-weak); } .IconAvatar--disabled { background: var(--color-background-weak); fill: var(--color-icon-disabled); } .IconAvatar--grayscale { background: var(--color-background-strong); fill: var(--color-icon); } .IconAvatar--gold { background: var(--color-background-weak); fill: #fcbd01; } .IconAvatar--invertedcoral { background: var(--color-logo-background-strong); fill: var(--color-logo-icon-strong); } .IconAvatar--coral { fill: var(--color-logo-icon); background: #fff; } .IconAvatar--xsmall { height: var(--avatar-diameter-xsmall); line-height: var(--avatar-diameter-xsmall); min-width: var(--avatar-diameter-xsmall); width: var(--avatar-diameter-xsmall); } .IconAvatar--small { height: var(--avatar-diameter-small); line-height: var(--avatar-diameter-small); min-width: var(--avatar-diameter-small); width: var(--avatar-diameter-small); } .IconAvatar--medium { height: var(--avatar-diameter-medium); line-height: var(--avatar-diameter-medium); min-width: var(--avatar-diameter-medium); width: var(--avatar-diameter-medium); } .IconAvatar--large { height: var(--avatar-diameter-large); line-height: var(--avatar-diameter-large); min-width: var(--avatar-diameter-large); width: var(--avatar-diameter-large); } .IconAvatar--xlarge { height: var(--avatar-diameter-xlarge); line-height: var(--avatar-diameter-xlarge); min-width: var(--avatar-diameter-xlarge); width: var(--avatar-diameter-xlarge); } .BaseCompactModalImage { width: 480px; height: 320px; } .BasePortraitModalImage { background-position: 50%; background-repeat: no-repeat; background-size: cover; width: 240px; } .BasePortraitModalImage.BasePortraitModalImage--small { height: 480px; } .BasePortraitModalImage.BasePortraitModalImage--medium { height: 560px; } .BasePortraitModalImage.BasePortraitModalImage--large { height: 640px; } .DeprecatedIllustration.DeprecatedIllustration--xsmall { height: 72px; min-height: 72px; } .DeprecatedIllustration.DeprecatedIllustration--xsmall.DeprecatedIllustration--scene { width: 144px; min-width: 144px; } .DeprecatedIllustration.DeprecatedIllustration--xsmall.DeprecatedIllustration--spot { width: 72px; min-width: 72px; } .DeprecatedIllustration.DeprecatedIllustration--small { height: 96px; min-height: 96px; } .DeprecatedIllustration.DeprecatedIllustration--small.DeprecatedIllustration--scene { width: 192px; min-width: 192px; } .DeprecatedIllustration.DeprecatedIllustration--small.DeprecatedIllustration--spot { width: 96px; min-width: 96px; } .DeprecatedIllustration.DeprecatedIllustration--medium { height: 160px; min-height: 160px; } .DeprecatedIllustration.DeprecatedIllustration--medium.DeprecatedIllustration--scene { width: 320px; min-width: 320px; } .DeprecatedIllustration.DeprecatedIllustration--medium.DeprecatedIllustration--spot { width: 160px; min-width: 160px; } .DeprecatedIllustration.DeprecatedIllustration--large { height: 200px; min-height: 200px; } .DeprecatedIllustration.DeprecatedIllustration--large.DeprecatedIllustration--scene { width: 400px; min-width: 400px; } .DeprecatedIllustration.DeprecatedIllustration--large.DeprecatedIllustration--spot { width: 200px; min-width: 200px; } .DeprecatedIllustration.DeprecatedIllustration--xlarge { height: 280px; min-height: 280px; } .DeprecatedIllustration.DeprecatedIllustration--xlarge.DeprecatedIllustration--scene { width: 560px; min-width: 560px; } .DeprecatedIllustration.DeprecatedIllustration--xlarge.DeprecatedIllustration--spot { width: 280px; min-width: 280px; } .DeprecatedMiniIllustration.DeprecatedMiniIllustration--smallMiniIcon { width: 12px; min-width: 12px; height: 12px; min-height: 12px; } .DeprecatedMiniIllustration.DeprecatedMiniIllustration--smallIcon { width: 16px; min-width: 16px; height: 16px; min-height: 16px; } .DeprecatedMiniIllustration.DeprecatedMiniIllustration--xsmallAvatar { height: var(--avatar-diameter-xsmall); min-height: var(--avatar-diameter-xsmall); min-width: var(--avatar-diameter-xsmall); width: var(--avatar-diameter-xsmall); } .DeprecatedMiniIllustration.DeprecatedMiniIllustration--smallAvatar { height: var(--avatar-diameter-small); min-height: var(--avatar-diameter-small); min-width: var(--avatar-diameter-small); width: var(--avatar-diameter-small); } .DeprecatedMiniIllustration.DeprecatedMiniIllustration--largeMiniIcon { width: 24px; min-width: 24px; height: 24px; min-height: 24px; } .DeprecatedMiniIllustration.DeprecatedMiniIllustration--mediumAvatar { height: var(--avatar-diameter-medium); min-height: var(--avatar-diameter-medium); min-width: var(--avatar-diameter-medium); width: var(--avatar-diameter-medium); } .DeprecatedMiniIllustration.DeprecatedMiniIllustration--largeIcon { width: 32px; min-width: 32px; height: 32px; min-height: 32px; } .DeprecatedMiniIllustration.DeprecatedMiniIllustration--largeAvatar { height: var(--avatar-diameter-large); min-height: var(--avatar-diameter-large); min-width: var(--avatar-diameter-large); width: var(--avatar-diameter-large); } .DeprecatedMiniIllustration.DeprecatedMiniIllustration--xlargeAvatar { height: var(--avatar-diameter-xlarge); min-height: var(--avatar-diameter-xlarge); min-width: var(--avatar-diameter-xlarge); width: var(--avatar-diameter-xlarge); } .DeprecatedMiniIllustration.DeprecatedMiniIllustration--hugeAvatar { height: var(--avatar-diameter-huge); min-height: var(--avatar-diameter-huge); min-width: var(--avatar-diameter-huge); width: var(--avatar-diameter-huge); } .Logo.Logo--smallMiniIcon { width: 12px; min-width: 12px; height: 12px; min-height: 12px; } .Logo.Logo--smallIcon { width: 16px; min-width: 16px; height: 16px; min-height: 16px; } .Logo.Logo--xsmallAvatar { height: var(--avatar-diameter-xsmall); min-height: var(--avatar-diameter-xsmall); min-width: var(--avatar-diameter-xsmall); width: var(--avatar-diameter-xsmall); } .Logo.Logo--smallAvatar { height: var(--avatar-diameter-small); min-height: var(--avatar-diameter-small); min-width: var(--avatar-diameter-small); width: var(--avatar-diameter-small); } .Logo.Logo--largeMiniIcon { width: 24px; min-width: 24px; height: 24px; min-height: 24px; } .Logo.Logo--mediumAvatar { height: var(--avatar-diameter-medium); min-height: var(--avatar-diameter-medium); min-width: var(--avatar-diameter-medium); width: var(--avatar-diameter-medium); } .Logo.Logo--largeIcon { width: 32px; min-width: 32px; height: 32px; min-height: 32px; } .Logo.Logo--largeAvatar { height: var(--avatar-diameter-large); min-height: var(--avatar-diameter-large); min-width: var(--avatar-diameter-large); width: var(--avatar-diameter-large); } .Logo.Logo--xlargeAvatar { height: var(--avatar-diameter-xlarge); min-height: var(--avatar-diameter-xlarge); min-width: var(--avatar-diameter-xlarge); width: var(--avatar-diameter-xlarge); } .Logo.Logo--hugeAvatar { height: var(--avatar-diameter-huge); min-height: var(--avatar-diameter-huge); min-width: var(--avatar-diameter-huge); width: var(--avatar-diameter-huge); } .IllustrationPreloader { display: none; } .DangerLinkButton { cursor: pointer; color: var(--color-danger-text); fill: var(--color-danger-text); text-decoration-style: solid; } .DangerLinkButton:focus-visible { outline: 2px solid var(--color-a11y-selected-border-active); } .DangerLinkButton:focus:not(:focus-visible) { outline: none; } .DangerLinkButton:active, .DangerLinkButton:hover { color: var(--color-danger-text-hover); fill: var(--color-danger-text-hover); text-decoration: underline; } .DangerLinkButton-alwaysUnderline { -webkit-text-decoration-style: "solid"; text-decoration-style: "solid"; text-decoration: underline; } .HiddenLinkButton { outline: none; } .HiddenLinkButton.HiddenLinkButton--isEnabled { cursor: pointer; } .HiddenLinkButton.HiddenLinkButton--isDisabled { cursor: default; } .HiddenLinkButton:focus:focus-visible { outline: 2px solid var(--color-a11y-selected-border-active); outline-offset: 0; } .HiddenLinkButton.HiddenLinkButton--default.HiddenLinkButton--isEnabled { color: var(--color-text); fill: var(--color-text); } .HiddenLinkButton.HiddenLinkButton--default.HiddenLinkButton--isEnabled:hover { color: var(--color-primary-text-hover); fill: var(--color-primary-text-hover); } .HiddenLinkButton.HiddenLinkButton--default.HiddenLinkButton--isDisabled, .HiddenLinkButton.HiddenLinkButton--default.HiddenLinkButton--isDisabled:hover, .HiddenLinkButton.HiddenLinkButton--darkGray2.HiddenLinkButton--isEnabled { color: var(--color-text); fill: var(--color-text); } .HiddenLinkButton.HiddenLinkButton--darkGray2.HiddenLinkButton--isEnabled:hover { color: var(--color-primary-text-hover); fill: var(--color-primary-text-hover); } .HiddenLinkButton.HiddenLinkButton--darkGray2.HiddenLinkButton--isDisabled, .HiddenLinkButton.HiddenLinkButton--darkGray2.HiddenLinkButton--isDisabled:hover { color: var(--color-text); fill: var(--color-text); } .HiddenLinkButton.HiddenLinkButton--darkGray1.HiddenLinkButton--isEnabled { color: var(--color-text-weak); fill: var(--color-text-weak); } .HiddenLinkButton.HiddenLinkButton--darkGray1.HiddenLinkButton--isEnabled:hover { color: var(--color-primary-text-hover); fill: var(--color-primary-text-hover); } .HiddenLinkButton.HiddenLinkButton--darkGray1.HiddenLinkButton--isDisabled, .HiddenLinkButton.HiddenLinkButton--darkGray1.HiddenLinkButton--isDisabled:hover { color: var(--color-text-weak); fill: var(--color-text-weak); } .PrimaryLinkButton { cursor: pointer; color: var(--color-primary-text); fill: var(--color-primary-text); text-decoration-style: solid; } .PrimaryLinkButton:focus-visible { outline: 2px solid var(--color-a11y-selected-border-active); } .PrimaryLinkButton:focus:not(:focus-visible) { outline: none; } .PrimaryLinkButton:active, .PrimaryLinkButton:hover { color: var(--color-primary-text-hover); fill: var(--color-primary-text-hover); text-decoration: underline; } .PrimaryLinkButton-alwaysUnderline { -webkit-text-decoration-style: "solid"; text-decoration-style: "solid"; text-decoration: underline; } .SecondaryLinkButton--standardTheme { cursor: pointer; color: var(--color-text-weak); fill: var(--color-text-weak); text-decoration: underline; } .SecondaryLinkButton--standardTheme:focus-visible { outline: 2px solid var(--color-a11y-selected-border-active); } .SecondaryLinkButton--standardTheme:focus:not(:focus-visible) { outline: none; } .SecondaryLinkButton--standardTheme:active { color: var(--color-text-weak-hover); fill: var(--color-text-weak-hover); text-decoration: underline; } .SecondaryLinkButton--standardTheme:hover { color: var(--color-text); fill: var(--color-text); text-decoration: underline; } .SecondaryLinkButton--inverseTheme { cursor: pointer; color: #fff; fill: #fff; text-decoration: underline; } .SecondaryLinkButton--inverseTheme:focus-visible { outline: 2px solid var(--color-a11y-selected-border-active); } .SecondaryLinkButton--inverseTheme:focus:not(:focus-visible) { outline: none; } .SecondaryLinkButton--inverseTheme:active { color: rgba(255, 255, 255, 0.8); fill: rgba(255, 255, 255, 0.8); text-decoration: underline; } .SecondaryLinkButton--inverseTheme:hover { color: rgba(255, 255, 255, 0.85); fill: rgba(255, 255, 255, 0.85); text-decoration: underline; } .UpsellLinkButton { cursor: pointer; color: var(--color-upsell-text); fill: var(--color-upsell-text); text-decoration: underline; } .UpsellLinkButton:focus-visible { outline: 2px solid var(--color-a11y-selected-border-active); } .UpsellLinkButton:focus:not(:focus-visible) { outline: none; } .UpsellLinkButton:active, .UpsellLinkButton:hover { color: var(--color-upsell-text-hover); fill: var(--color-upsell-text-hover); text-decoration: underline; } .UpsellMessageBannerWithButton { display: flex; } .UpsellMessageBannerWithButton .DeprecatedMessageBanner-contents { padding: 8px 32px; } .Modal { background: var(--color-background-weak); flex-direction: column; min-height: 1px; display: flex; } .Modal-header { flex: none; } .ModalContent { box-sizing: border-box; } .ModalContent.ModalContent--sizeSmall { padding: 24px; } .ModalContent.ModalContent--sizeMedium, .ModalContent.ModalContent--sizeLarge { padding: 24px 32px; } .ModalContent.ModalContent--sizeXlarge { padding: 32px; } .ModalFooter { border-top: 1px solid var(--color-border); box-sizing: border-box; flex-shrink: 0; height: 64px; } .ModalFooter.ModalFooter--borderHidden { border-top: 0; } .ModalFooter.ModalFooter--sizeSmall { padding: 0 24px; } .ModalFooter.ModalFooter--sizeMedium, .ModalFooter.ModalFooter--sizeLarge, .ModalFooter.ModalFooter--sizeXlarge { padding: 0 32px; } .ModalFooter-button + .ModalFooter-button { margin: 0 0 0 12px; } .ModalFooter-content { flex: auto; margin: 0 24px 0 0; } .ModalFooter-loadingIndicator .CircularLoadingIndicatorPresentation-track { stroke: transparent; } .ModalFooter-loadingIndicator .CircularLoadingIndicatorPresentation-spinnerCircle { stroke: var(--color-icon-disabled); } .ModalHeader { border-bottom: 1px solid var(--color-border); box-sizing: border-box; height: 64px; } .ModalHeader.ModalHeader--borderHidden { border-bottom: 0; } .ModalHeader.ModalHeader--sizeSmall { padding: 0 24px; } .ModalHeader.ModalHeader--sizeMedium, .ModalHeader.ModalHeader--sizeLarge, .ModalHeader.ModalHeader--sizeXlarge { padding: 0 32px; } .ModalHeader-headingTextContainer { flex-grow: 1; overflow: hidden; } .ModalHeader-leftButtonContainer { margin: 0 8px 0 0; } .ModalHeader-rightButtonsContainer { margin: 0 0 0 16px; } .ModalHeader-closeButton { flex-grow: 0; } .ModalHeaderWithCenteredTitle { border-bottom: 1px solid var(--color-border); box-sizing: border-box; height: 64px; padding: 0 24px; position: relative; } .ModalHeaderWithCenteredTitle--borderHidden { border-bottom: 0; } .ModalHeaderWithCenteredTitle-left { position: absolute; left: 24px; } .ModalHeaderWithCenteredTitle-center { position: absolute; left: 168px; right: 168px; } .ModalHeaderWithCenteredTitle-right { gap: 8px; display: flex; position: absolute; right: 24px; } .ModalMessageBanner { padding-left: 0; padding-right: 0; } .ModalMessageBanner.ModalMessageBanner--sizeSmall .DeprecatedMessageBanner-contents { padding-left: 24px; padding-right: 24px; } .ModalMessageBanner.ModalMessageBanner--sizeMedium .DeprecatedMessageBanner-contents, .ModalMessageBanner.ModalMessageBanner--sizeLarge .DeprecatedMessageBanner-contents, .ModalMessageBanner.ModalMessageBanner--sizeXlarge .DeprecatedMessageBanner-contents { padding-left: 32px; padding-right: 32px; } .ModalMessageBanner.ModalMessageBanner--inHeaderlessModal { border-radius: 4px; } .ModalMessageBanner.ModalMessageBanner--inHeaderlessModal .DeprecatedMessageBanner-contents { padding-top: 12px; padding-bottom: 12px; } .ModalMessageBannerWithButton.ModalMessageBannerWithButton--sizeSmall .DeprecatedMessageBanner-contents { padding-left: 24px; padding-right: 24px; } .ModalMessageBannerWithButton.ModalMessageBannerWithButton--sizeMedium .DeprecatedMessageBanner-contents, .ModalMessageBannerWithButton.ModalMessageBannerWithButton--sizeLarge .DeprecatedMessageBanner-contents, .ModalMessageBannerWithButton.ModalMessageBannerWithButton--sizeXlarge .DeprecatedMessageBanner-contents { padding-left: 32px; padding-right: 32px; } .ModalPanel { box-sizing: border-box; width: 240px; overflow: hidden; } .ModalPanel.ModalPanel--responsive { transition: width 0.25s ease-out; } @media (max-width: 992px) { .ModalPanel.ModalPanel--responsive { width: 0; } } .ModalScrollableTabListPresentation { border-bottom: 1px solid var(--color-border); } .ModalScrollableTabListPresentation.ModalScrollableTabListPresentation--sizeSmall { padding: 0 24px; } .ModalScrollableTabListPresentation.ModalScrollableTabListPresentation--sizeMedium, .ModalScrollableTabListPresentation.ModalScrollableTabListPresentation--sizeLarge, .ModalScrollableTabListPresentation.ModalScrollableTabListPresentation--sizeXlarge { padding: 0 32px; } .ModalScrollableTabListPresentation-tab { text-wrap: nowrap; } .ModalScrollableTabListPresentation-scrollable { flex-shrink: 0; } .ModalTabListPresentation { border-bottom: 1px solid var(--color-border); } .ModalTabListPresentation.ModalTabListPresentation--sizeSmall { padding: 0 24px; } .ModalTabListPresentation.ModalTabListPresentation--sizeMedium, .ModalTabListPresentation.ModalTabListPresentation--sizeLarge, .ModalTabListPresentation.ModalTabListPresentation--sizeXlarge { padding: 0 32px; } .ModalWrapper.ModalWrapper--sizeXsmall { width: 480px; } .ModalWrapper.ModalWrapper--sizeSmall { width: 560px; } .ModalWrapper.ModalWrapper--sizeMedium { width: 720px; } .ModalWrapper.ModalWrapper--sizeLarge { width: 960px; } .ModalWrapper.ModalWrapper--sizeXlarge { width: 1200px; } .ModalWrapper.ModalWrapper--sizeXsmallResponsive, .ModalWrapper.ModalWrapper--sizeSmallResponsive, .ModalWrapper.ModalWrapper--sizeMediumResponsive { min-width: 320px; max-width: 100%; transition: width 0.25s ease-out; } @media (max-width: 752px) { .ModalWrapper.ModalWrapper--sizeMediumResponsive { width: 560px; } } .ModalWrapper.ModalWrapper--sizeLargeResponsive { min-width: 320px; max-width: 100%; transition: width 0.25s ease-out; } @media (max-width: 992px) { .ModalWrapper.ModalWrapper--sizeLargeResponsive { width: 720px; } } @media (max-width: 752px) { .ModalWrapper.ModalWrapper--sizeLargeResponsive { width: 560px; } } .ModalWrapper.ModalWrapper--sizeXlargeResponsive { min-width: 320px; max-width: 100%; transition: width 0.25s ease-out; } @media (max-width: 1232px) { .ModalWrapper.ModalWrapper--sizeXlargeResponsive { width: 960px; } } @media (max-width: 992px) { .ModalWrapper.ModalWrapper--sizeXlargeResponsive { width: 720px; } } @media (max-width: 752px) { .ModalWrapper.ModalWrapper--sizeXlargeResponsive { width: 560px; } } .ModalWrapper.ModalWrapper--isFullHeight { flex-grow: 1; } .BreakpointExamples-sizeChangingBox { background-color: var(--color-primary-background-strong); } @media screen and (max-width: 575px) { .BreakpointExamples-sizeChangingBox { width: 24px; height: 24px; } } @media screen and (min-width: 576px) and (max-width: 919px) { .BreakpointExamples-sizeChangingBox { width: 120px; height: 120px; } } @media screen and (min-width: 920px) { .BreakpointExamples-sizeChangingBox { width: 320px; height: 320px; } } .ButtonSelect { justify-content: space-between; display: inline-flex; } .ButtonSelect:focus-visible .ButtonSelect-downIcon { opacity: 1; } .ButtonSelect .MiniIcon { fill: var(--color-icon); } .ButtonSelect.ButtonSelect--disabled .MiniIcon { fill: var(--color-icon-disabled); } .ButtonSelect-menuLabel { flex-grow: 0; flex-shrink: 0; margin-left: 8px; } .ButtonSelect-downIcon { vertical-align: bottom; flex-shrink: 0; margin-left: 8px; transition-property: opacity; transition-duration: 0.2s; } .ButtonSelect--subtle .ButtonSelect-downIcon { opacity: 0; } .ButtonSelect.is-dropdownVisible .ButtonSelect-downIcon, .ButtonSelect:hover .ButtonSelect-downIcon { opacity: 1; } .ButtonSelect-dropdownMenu { max-height: 169.6px; overflow-x: hidden; overflow-y: auto; } .ButtonSelect-dropdownMenu--withMediumItems { max-height: 355.5px; } .ButtonSelect-menu--stretchWidth { max-width: none; } .SelectItemThemeablePresentation { box-sizing: border-box; cursor: pointer; -webkit-user-select: none; -ms-user-select: none; user-select: none; border: 2px solid transparent; min-width: 160px; min-height: 36px; padding: 2px 10px; } .SelectItemThemeablePresentation[data-focus-visible] { border: 2px solid var(--color-a11y-selected-border-active); border-radius: 8px; outline: none; } .SelectItemThemeablePresentation:focus-visible { border: 2px solid var(--color-a11y-selected-border-active); border-radius: 8px; outline: none; } .SelectItemThemeablePresentation.SelectItemThemeablePresentation--themeConsistency { padding: 5px 10px; } .SelectItemThemeablePresentation-main, .SelectItemThemeablePresentation-center { flex-grow: 1; } .SelectItemThemeablePresentation-leftIcon, .SelectItemThemeablePresentation-rightIcon { flex-shrink: 0; justify-content: center; align-self: flex-start; align-items: center; min-width: 16px; min-height: 28px; display: flex; } .SelectItemThemeablePresentation--hasDescription .SelectItemThemeablePresentation-leftIcon, .SelectItemThemeablePresentation--hasDescription .SelectItemThemeablePresentation-rightIcon, .SelectItemThemeablePresentation--themeConsistency .SelectItemThemeablePresentation-leftIcon, .SelectItemThemeablePresentation--hasDescription.SelectItemThemeablePresentation--themeConsistency .SelectItemThemeablePresentation-leftIcon, .SelectItemThemeablePresentation--themeConsistency .SelectItemThemeablePresentation-rightIcon, .SelectItemThemeablePresentation--hasDescription.SelectItemThemeablePresentation--themeConsistency .SelectItemThemeablePresentation-rightIcon { min-height: 22px; } .MultiSelectItemPresentation.SelectItemThemeablePresentation { background-color: var(--color-background-weak); color: var(--color-text); fill: var(--color-icon); } .MultiSelectItemPresentation.SelectItemThemeablePresentation .SelectItemThemeablePresentation-description { color: var(--color-text-weak); } .MultiSelectItemPresentation.SelectItemThemeablePresentation:not( .SelectItemThemeablePresentation--isDisabled )[data-focus-visible], .MultiSelectItemPresentation.SelectItemThemeablePresentation:not( .SelectItemThemeablePresentation--isDisabled ):hover { background-color: var(--color-background-active); color: var(--color-text); fill: var(--color-icon-active); } .MultiSelectItemPresentation.SelectItemThemeablePresentation:not( .SelectItemThemeablePresentation--isDisabled ):focus-visible { background-color: var(--color-background-active); color: var(--color-text); fill: var(--color-icon-active); } .MultiSelectItemPresentation.SelectItemThemeablePresentation:not( .SelectItemThemeablePresentation--isDisabled )[data-focus-visible] .SelectItemThemeablePresentation-description, .MultiSelectItemPresentation.SelectItemThemeablePresentation:not( .SelectItemThemeablePresentation--isDisabled ):hover .SelectItemThemeablePresentation-description { color: var(--color-text-weak); } .MultiSelectItemPresentation.SelectItemThemeablePresentation:not( .SelectItemThemeablePresentation--isDisabled ):focus-visible .SelectItemThemeablePresentation-description { color: var(--color-text-weak); } .MultiSelectItemPresentation.SelectItemThemeablePresentation--isDisabled { background-color: var(--color-background-weak); color: var(--color-text-disabled); fill: var(--color-icon-disabled); cursor: default; } .MultiSelectItemPresentation.SelectItemThemeablePresentation--isDisabled .SelectItemThemeablePresentation-description { color: var(--color-text-disabled); } .MultiSelectItemPresentation-checkbox { pointer-events: none; } .PaginatedSelectPresentation { background-color: var(--color-background-weak); flex-direction: column; margin-top: 2px; display: flex; overflow: hidden; } .PaginatedSelectPresentation-loadingIndicator { min-height: 32px; margin-bottom: 8px; } .PaginatedSelectPresentation-scrollable { padding: 4px 0; overflow-x: hidden; } .SelectPresentation { background-color: var(--color-background-weak); flex-direction: column; max-height: 562px; margin-top: 2px; display: flex; overflow: hidden; } .SelectPresentation-scrollable { padding: 4px 0; overflow-x: hidden; } .SingleSelectItemPresentation.SelectItemThemeablePresentation { background-color: var(--color-background-weak); color: var(--color-text); fill: var(--color-icon); } .SingleSelectItemPresentation.SelectItemThemeablePresentation .SelectItemThemeablePresentation-description { color: var(--color-text-weak); } .SingleSelectItemPresentation.SelectItemThemeablePresentation:not( .SelectItemThemeablePresentation--isDisabled )[data-focus-visible], .SingleSelectItemPresentation.SelectItemThemeablePresentation:not( .SelectItemThemeablePresentation--isDisabled ):hover { background-color: var(--color-background-active); color: var(--color-text); fill: var(--color-icon-active); } .SingleSelectItemPresentation.SelectItemThemeablePresentation:not( .SelectItemThemeablePresentation--isDisabled ):focus-visible { background-color: var(--color-background-active); color: var(--color-text); fill: var(--color-icon-active); } .SingleSelectItemPresentation.SelectItemThemeablePresentation:not( .SelectItemThemeablePresentation--isDisabled )[data-focus-visible] .SelectItemThemeablePresentation-description, .SingleSelectItemPresentation.SelectItemThemeablePresentation:not( .SelectItemThemeablePresentation--isDisabled ):hover .SelectItemThemeablePresentation-description { color: var(--color-text-weak); } .SingleSelectItemPresentation.SelectItemThemeablePresentation:not( .SelectItemThemeablePresentation--isDisabled ):focus-visible .SelectItemThemeablePresentation-description { color: var(--color-text-weak); } .SingleSelectItemPresentation.SelectItemThemeablePresentation--isDisabled { background-color: var(--color-background-weak); color: var(--color-text-disabled); fill: var(--color-icon-disabled); cursor: default; } .SingleSelectItemPresentation.SelectItemThemeablePresentation--isDisabled .SelectItemThemeablePresentation-description { color: var(--color-text-disabled); } .MenuItemThemeablePresentation { box-sizing: border-box; cursor: pointer; -webkit-user-select: none; -ms-user-select: none; user-select: none; border: 2px solid transparent; min-width: 160px; min-height: 36px; padding: 2px 10px; } .MenuItemThemeablePresentation[data-focus-visible] { border: 2px solid var(--color-a11y-selected-border-active); border-radius: 8px; outline: none; } .MenuItemThemeablePresentation:focus-visible { border: 2px solid var(--color-a11y-selected-border-active); border-radius: 8px; outline: none; } .MenuItemThemeablePresentation.MenuItemThemeablePresentation--themeConsistency { padding: 5px 10px; } .MenuItemThemeablePresentation-main, .MenuItemThemeablePresentation-center { flex-grow: 1; } .MenuItemThemeablePresentation-leftIcon, .MenuItemThemeablePresentation-rightIcon { flex-shrink: 0; justify-content: center; align-self: flex-start; align-items: center; min-width: 16px; min-height: 28px; display: flex; } .MenuItemThemeablePresentation--hasDescription .MenuItemThemeablePresentation-leftIcon, .MenuItemThemeablePresentation--hasDescription .MenuItemThemeablePresentation-rightIcon, .MenuItemThemeablePresentation--themeConsistency .MenuItemThemeablePresentation-leftIcon, .MenuItemThemeablePresentation--hasDescription.MenuItemThemeablePresentation--themeConsistency .MenuItemThemeablePresentation-leftIcon, .MenuItemThemeablePresentation--themeConsistency .MenuItemThemeablePresentation-rightIcon, .MenuItemThemeablePresentation--hasDescription.MenuItemThemeablePresentation--themeConsistency .MenuItemThemeablePresentation-rightIcon { min-height: 22px; } .CheckboxMenuItemPresentation.MenuItemThemeablePresentation { background-color: var(--color-background-weak); color: var(--color-text); fill: var(--color-icon); } .CheckboxMenuItemPresentation.MenuItemThemeablePresentation .MenuItemThemeablePresentation-description { color: var(--color-text-weak); } .CheckboxMenuItemPresentation.MenuItemThemeablePresentation:not( .MenuItemThemeablePresentation--isDisabled )[data-focus-visible], .CheckboxMenuItemPresentation.MenuItemThemeablePresentation:not( .MenuItemThemeablePresentation--isDisabled ):hover { background-color: var(--color-background-active); color: var(--color-text); fill: var(--color-icon-active); outline: none; } .CheckboxMenuItemPresentation.MenuItemThemeablePresentation:not( .MenuItemThemeablePresentation--isDisabled ):focus-visible { background-color: var(--color-background-active); color: var(--color-text); fill: var(--color-icon-active); outline: none; } .CheckboxMenuItemPresentation.MenuItemThemeablePresentation:not( .MenuItemThemeablePresentation--isDisabled )[data-focus-visible] .MenuItemThemeablePresentation-description, .CheckboxMenuItemPresentation.MenuItemThemeablePresentation:not( .MenuItemThemeablePresentation--isDisabled ):hover .MenuItemThemeablePresentation-description { color: var(--color-text-weak); } .CheckboxMenuItemPresentation.MenuItemThemeablePresentation:not( .MenuItemThemeablePresentation--isDisabled ):focus-visible .MenuItemThemeablePresentation-description { color: var(--color-text-weak); } .CheckboxMenuItemPresentation.MenuItemThemeablePresentation--isDisabled { background-color: var(--color-background-weak); color: var(--color-text-disabled); fill: var(--color-icon-disabled); cursor: default; } .CheckboxMenuItemPresentation.MenuItemThemeablePresentation--isDisabled .MenuItemThemeablePresentation-description { color: var(--color-text-disabled); } .DeprecatedThemeableItemBackgroundStructure { box-sizing: border-box; cursor: pointer; -webkit-user-select: none; -ms-user-select: none; user-select: none; border: 2px solid transparent; justify-content: space-between; align-items: center; min-width: 160px; min-height: 36px; padding: 2px 10px; display: flex; } .DeprecatedThemeableItemBackgroundStructure.DeprecatedThemeableItemBackgroundStructure { background-color: var(--color-background-weak); color: var(--color-text); fill: var(--color-icon); } .DeprecatedThemeableItemBackgroundStructure.DeprecatedThemeableItemBackgroundStructure--isHighlighted, .DeprecatedThemeableItemBackgroundStructure.DeprecatedThemeableItemBackgroundStructure:focus { background-color: var(--color-background-active); color: var(--color-text); fill: var(--color-icon-active); } .LoadingPlaceholderMenuItemPresentation.MenuItemThemeablePresentation { background-color: var(--color-background-weak); color: var(--color-text); fill: var(--color-icon); } .LoadingPlaceholderMenuItemPresentation.MenuItemThemeablePresentation:not( .MenuItemThemeablePresentation--isDisabled )[data-focus-visible], .LoadingPlaceholderMenuItemPresentation.MenuItemThemeablePresentation:not( .MenuItemThemeablePresentation--isDisabled ):hover { background-color: var(--color-background-active); color: var(--color-text); fill: var(--color-icon-active); outline: none; } .LoadingPlaceholderMenuItemPresentation.MenuItemThemeablePresentation:not( .MenuItemThemeablePresentation--isDisabled ):focus-visible { background-color: var(--color-background-active); color: var(--color-text); fill: var(--color-icon-active); outline: none; } .LoadingPlaceholderMenuItemPresentation.MenuItemThemeablePresentation--isDisabled { background-color: var(--color-background-weak); color: var(--color-text-disabled); fill: var(--color-icon-disabled); cursor: default; } .LoadingPlaceholderMenuItemPresentation.MenuItemThemeablePresentation--isDisabled .MenuItemThemeablePresentation-description { color: var(--color-text-disabled); } .MenuItemDangerPresentation.MenuItemThemeablePresentation { background-color: var(--color-background-weak); color: var(--color-danger-text); fill: var(--color-danger-icon); } .MenuItemDangerPresentation.MenuItemThemeablePresentation .MenuItemThemeablePresentation-description { color: var(--color-text-weak); } .MenuItemDangerPresentation.MenuItemThemeablePresentation:not( .MenuItemThemeablePresentation--isDisabled )[data-focus-visible], .MenuItemDangerPresentation.MenuItemThemeablePresentation:not( .MenuItemThemeablePresentation--isDisabled ):hover { background-color: var(--color-background-active); color: var(--color-danger-text-hover); fill: var(--color-danger-icon-hover); outline: none; } .MenuItemDangerPresentation.MenuItemThemeablePresentation:not( .MenuItemThemeablePresentation--isDisabled ):focus-visible { background-color: var(--color-background-active); color: var(--color-danger-text-hover); fill: var(--color-danger-icon-hover); outline: none; } .MenuItemDangerPresentation.MenuItemThemeablePresentation:not( .MenuItemThemeablePresentation--isDisabled )[data-focus-visible] .MenuItemThemeablePresentation-description, .MenuItemDangerPresentation.MenuItemThemeablePresentation:not( .MenuItemThemeablePresentation--isDisabled ):hover .MenuItemThemeablePresentation-description { color: var(--color-text-weak); } .MenuItemDangerPresentation.MenuItemThemeablePresentation:not( .MenuItemThemeablePresentation--isDisabled ):focus-visible .MenuItemThemeablePresentation-description { color: var(--color-text-weak); } .MenuItemDangerPresentation.MenuItemThemeablePresentation--isDisabled { background-color: var(--color-background-weak); color: var(--color-text-disabled); fill: var(--color-icon-disabled); cursor: default; } .MenuItemDangerPresentation.MenuItemThemeablePresentation--isDisabled .MenuItemThemeablePresentation-description { color: var(--color-text-disabled); } .MenuItemPresentation.MenuItemThemeablePresentation { background-color: var(--color-background-weak); color: var(--color-text); fill: var(--color-icon); } .MenuItemPresentation.MenuItemThemeablePresentation .MenuItemThemeablePresentation-description { color: var(--color-text-weak); } .MenuItemPresentation.MenuItemThemeablePresentation:not( .MenuItemThemeablePresentation--isDisabled )[data-focus-visible], .MenuItemPresentation.MenuItemThemeablePresentation:not( .MenuItemThemeablePresentation--isDisabled ):hover { background-color: var(--color-background-active); color: var(--color-text); fill: var(--color-icon-active); outline: none; } .MenuItemPresentation.MenuItemThemeablePresentation:not( .MenuItemThemeablePresentation--isDisabled ):focus-visible { background-color: var(--color-background-active); color: var(--color-text); fill: var(--color-icon-active); outline: none; } .MenuItemPresentation.MenuItemThemeablePresentation:not( .MenuItemThemeablePresentation--isDisabled )[data-focus-visible] .MenuItemThemeablePresentation-description, .MenuItemPresentation.MenuItemThemeablePresentation:not( .MenuItemThemeablePresentation--isDisabled ):hover .MenuItemThemeablePresentation-description { color: var(--color-text-weak); } .MenuItemPresentation.MenuItemThemeablePresentation:not( .MenuItemThemeablePresentation--isDisabled ):focus-visible .MenuItemThemeablePresentation-description { color: var(--color-text-weak); } .MenuItemPresentation.MenuItemThemeablePresentation--isDisabled { background-color: var(--color-background-weak); color: var(--color-text-disabled); fill: var(--color-icon-disabled); cursor: default; } .MenuItemPresentation.MenuItemThemeablePresentation--isDisabled .MenuItemThemeablePresentation-description { color: var(--color-text-disabled); } .MenuPresentation { background-color: var(--color-background-weak); flex-direction: column; max-height: 562px; margin-top: 2px; display: flex; overflow: hidden; } .MenuPresentation-scrollable { padding: 4px 0; overflow-x: hidden; } .PaginatedMenuPresentation { background-color: var(--color-background-weak); flex-direction: column; margin-top: 2px; display: flex; overflow: hidden; } .PaginatedMenuPresentation-loadingIndicator { min-height: 32px; margin-bottom: 8px; } .PaginatedMenuPresentation-scrollable { padding: 4px 0; overflow-x: hidden; } .RadioMenuItemPresentation.MenuItemThemeablePresentation { background-color: var(--color-background-weak); color: var(--color-text); fill: var(--color-icon); } .RadioMenuItemPresentation.MenuItemThemeablePresentation .MenuItemThemeablePresentation-description { color: var(--color-text-weak); } .RadioMenuItemPresentation.MenuItemThemeablePresentation:not( .MenuItemThemeablePresentation--isDisabled )[data-focus-visible], .RadioMenuItemPresentation.MenuItemThemeablePresentation:not( .MenuItemThemeablePresentation--isDisabled ):hover { background-color: var(--color-background-active); color: var(--color-text); fill: var(--color-icon-active); outline: none; } .RadioMenuItemPresentation.MenuItemThemeablePresentation:not( .MenuItemThemeablePresentation--isDisabled ):focus-visible { background-color: var(--color-background-active); color: var(--color-text); fill: var(--color-icon-active); outline: none; } .RadioMenuItemPresentation.MenuItemThemeablePresentation:not( .MenuItemThemeablePresentation--isDisabled )[data-focus-visible] .MenuItemThemeablePresentation-description, .RadioMenuItemPresentation.MenuItemThemeablePresentation:not( .MenuItemThemeablePresentation--isDisabled ):hover .MenuItemThemeablePresentation-description { color: var(--color-text-weak); } .RadioMenuItemPresentation.MenuItemThemeablePresentation:not( .MenuItemThemeablePresentation--isDisabled ):focus-visible .MenuItemThemeablePresentation-description { color: var(--color-text-weak); } .RadioMenuItemPresentation.MenuItemThemeablePresentation--isDisabled { background-color: var(--color-background-weak); color: var(--color-text-disabled); fill: var(--color-icon-disabled); cursor: default; } .RadioMenuItemPresentation.MenuItemThemeablePresentation--isDisabled .MenuItemThemeablePresentation-description { color: var(--color-text-disabled); } .SubmenuItemPresentation.MenuItemThemeablePresentation { background-color: var(--color-background-weak); color: var(--color-text); fill: var(--color-icon); } .SubmenuItemPresentation.MenuItemThemeablePresentation .MenuItemThemeablePresentation-description { color: var(--color-text-weak); } .SubmenuItemPresentation.MenuItemThemeablePresentation:not( .MenuItemThemeablePresentation--isDisabled )[data-focus-visible], .SubmenuItemPresentation.MenuItemThemeablePresentation:not( .MenuItemThemeablePresentation--isDisabled ):hover { background-color: var(--color-background-active); color: var(--color-text); fill: var(--color-icon-active); outline: none; } .SubmenuItemPresentation.MenuItemThemeablePresentation:not( .MenuItemThemeablePresentation--isDisabled ):focus-visible { background-color: var(--color-background-active); color: var(--color-text); fill: var(--color-icon-active); outline: none; } .SubmenuItemPresentation.MenuItemThemeablePresentation:not( .MenuItemThemeablePresentation--isDisabled )[data-focus-visible] .MenuItemThemeablePresentation-description, .SubmenuItemPresentation.MenuItemThemeablePresentation:not( .MenuItemThemeablePresentation--isDisabled ):hover .MenuItemThemeablePresentation-description { color: var(--color-text-weak); } .SubmenuItemPresentation.MenuItemThemeablePresentation:not( .MenuItemThemeablePresentation--isDisabled ):focus-visible .MenuItemThemeablePresentation-description { color: var(--color-text-weak); } .SubmenuItemPresentation.MenuItemThemeablePresentation--isDisabled { background-color: var(--color-background-weak); color: var(--color-text-disabled); fill: var(--color-icon-disabled); cursor: default; } .SubmenuItemPresentation.MenuItemThemeablePresentation--isDisabled .MenuItemThemeablePresentation-description { color: var(--color-text-disabled); } .DeprecatedLabelDescriptionItemStructure { flex-direction: column; display: flex; } .DeprecatedLeftIconItemStructure { flex: 1; align-items: center; gap: 8px; min-width: 1px; display: flex; } .DeprecatedLeftIconItemStructure.DeprecatedLeftIconItemStructure--alignTop { align-items: flex-start; } .DeprecatedLeftIconItemStructure-label { flex-grow: 1; } .DeprecatedLeftIconItemStructure-icon { flex-shrink: 0; justify-content: center; align-items: center; min-width: 16px; display: flex; } .DeprecatedLeftIconItemStructure--alignTop .DeprecatedLeftIconItemStructure-icon { padding-top: 4px; } .DeprecatedLeftIconItemStructure-icon--disabled { fill: var(--color-icon-disabled); } .DeprecatedRightIconItemStructure { flex: 1; justify-content: space-between; align-items: center; gap: 8px; min-width: 1px; display: flex; } .DeprecatedRightIconItemStructure.DeprecatedRightIconItemStructure--alignTop { align-items: flex-start; } .DeprecatedRightIconItemStructure-label { flex-grow: 1; } .DeprecatedRightIconItemStructure-icon { flex-shrink: 0; justify-content: center; align-items: center; min-width: 16px; display: flex; } .DeprecatedRightIconItemStructure--alignTop .DeprecatedRightIconItemStructure-icon { padding-top: 4px; } .DeprecatedSelectItemStructure { flex: 1; grid-template: "icon label"/16px auto; align-items: start; gap: 0 8px; min-width: 1px; display: grid; } .DeprecatedSelectItemStructure.DeprecatedSelectItemStructure { fill: var(--color-icon); } .DeprecatedSelectItemStructure.DeprecatedSelectItemStructure.DeprecatedSelectItemStructure--isHighlighted { fill: var(--color-icon-active); } .DeprecatedSelectItemStructure-icon { grid-area: icon; justify-content: center; padding-top: 4px; display: flex; } .DeprecatedSelectItemStructure-label { grid-area: label; } .PopoverStructure { margin: 8px; display: flex; } .PopoverStructure.PopoverStructure--popoverAbove { flex-direction: column; } .PopoverStructure.PopoverStructure--popoverAbove.PopoverStructure--alignEnd { position: relative; right: -21px; } .PopoverStructure.PopoverStructure--popoverAbove.PopoverStructure--alignStart { position: relative; left: -21px; } .PopoverStructure.PopoverStructure--popoverBelow { flex-direction: column-reverse; } .PopoverStructure.PopoverStructure--popoverBelow.PopoverStructure--alignEnd { position: relative; right: -21px; } .PopoverStructure.PopoverStructure--popoverBelow.PopoverStructure--alignStart { position: relative; left: -21px; } .PopoverStructure.PopoverStructure--popoverLeft { flex-direction: row; } .PopoverStructure.PopoverStructure--popoverLeft.PopoverStructure--alignEnd { position: relative; bottom: -21px; } .PopoverStructure.PopoverStructure--popoverLeft.PopoverStructure--alignStart { position: relative; top: -21px; } .PopoverStructure.PopoverStructure--popoverRight { flex-direction: row-reverse; } .PopoverStructure.PopoverStructure--popoverRight.PopoverStructure--alignEnd { position: relative; bottom: -21px; } .PopoverStructure.PopoverStructure--popoverRight.PopoverStructure--alignStart { position: relative; top: -21px; } .PopoverStructure-body { background: var(--color-background-weak); color: var(--color-text); flex-grow: 1; padding: 16px; position: relative; } .PopoverStructure-caretPositioner { position: relative; } .PopoverStructure--alignStart > .PopoverStructure-caretPositioner { align-self: flex-start; } .PopoverStructure--alignMiddle > .PopoverStructure-caretPositioner { align-self: center; } .PopoverStructure--alignEnd > .PopoverStructure-caretPositioner { align-self: flex-end; } .PopoverStructure--popoverAbove > .PopoverStructure-caretPositioner, .PopoverStructure--popoverBelow > .PopoverStructure-caretPositioner { width: 15px; height: 6px; } .PopoverStructure--popoverLeft > .PopoverStructure-caretPositioner, .PopoverStructure--popoverRight > .PopoverStructure-caretPositioner { width: 6px; height: 15px; } .PopoverStructure--popoverAbove > .PopoverStructure-caretPositioner { margin: 0 16px -6px; } .PopoverStructure--popoverBelow > .PopoverStructure-caretPositioner { margin: -6px 16px 0; } .PopoverStructure--popoverLeft > .PopoverStructure-caretPositioner { margin: 16px -6px 16px 0; } .PopoverStructure--popoverRight > .PopoverStructure-caretPositioner { margin: 16px 0 16px -6px; } .PopoverStructure-caret { position: absolute; } .PopoverStructure-caret:before { background: var(--color-background-weak); box-shadow: var(--color-elevation-large); box-sizing: border-box; content: ""; width: 14px; height: 14px; display: block; transform: rotate(45deg); } .PopoverStructure--popoverAbove .PopoverStructure-caret { clip: rect(8px 16px 18px -2px); bottom: 0; } .PopoverStructure--popoverBelow .PopoverStructure-caret { clip: rect(-4px 16px 6px -2px); top: 0; } .PopoverStructure--popoverLeft .PopoverStructure-caret { clip: rect(-2px 18px 16px 8px); right: 0; } .PopoverStructure--popoverRight .PopoverStructure-caret { clip: rect(-2px 6px 16px -4px); left: 0; } .SelectHeader { padding: 8px 12px 4px; } .SelectSeparator { border: 1px solid var(--color-border); border-bottom: 0; margin: 4px 0; } :root, :root .DesignTokenThemeOverrideRegionInternal--light { --color-enhanced-icon-strong: #636261; --color-enhanced-icon-weak: #b2b0af; --color-enhanced-icon-purple-strong: #4a3dcf; --color-enhanced-icon-purple-weak: #a49bfa; --color-enhanced-icon-blue-strong: #1e61e6; --color-enhanced-icon-blue-weak: #92b7ff; --color-enhanced-icon-green-strong: #238b5c; --color-enhanced-icon-green-weak: #8ed4b4; --color-enhanced-icon-orange-strong: #e05827; --color-enhanced-icon-orange-weak: #ffae90; --color-enhanced-icon-yellow-strong: #ea9e06; --color-enhanced-icon-yellow-weak: #ffc966; } @media print { :root { --color-enhanced-icon-strong: #636261; --color-enhanced-icon-weak: #b2b0af; --color-enhanced-icon-purple-strong: #4a3dcf; --color-enhanced-icon-purple-weak: #a49bfa; --color-enhanced-icon-blue-strong: #1e61e6; --color-enhanced-icon-blue-weak: #92b7ff; --color-enhanced-icon-green-strong: #238b5c; --color-enhanced-icon-green-weak: #8ed4b4; --color-enhanced-icon-orange-strong: #e05827; --color-enhanced-icon-orange-weak: #ffae90; --color-enhanced-icon-yellow-strong: #ea9e06; --color-enhanced-icon-yellow-weak: #ffc966; } } :root .DesignTokenThemeSelectors-theme--darkMode { --color-enhanced-icon-strong: #b2b0af; --color-enhanced-icon-weak: #636261; --color-enhanced-icon-purple-strong: #a49bfa; --color-enhanced-icon-purple-weak: #4a3dcf; --color-enhanced-icon-blue-strong: #92b7ff; --color-enhanced-icon-blue-weak: #1e61e6; --color-enhanced-icon-green-strong: #8ed4b4; --color-enhanced-icon-green-weak: #238b5c; --color-enhanced-icon-orange-strong: #ffae90; --color-enhanced-icon-orange-weak: #e05827; --color-enhanced-icon-yellow-strong: #ffc966; --color-enhanced-icon-yellow-weak: #ea9e06; } @media (prefers-color-scheme: dark) { :root .DesignTokenThemeSelectors-theme--systemDarkMode { --color-enhanced-icon-strong: #b2b0af; --color-enhanced-icon-weak: #636261; --color-enhanced-icon-purple-strong: #a49bfa; --color-enhanced-icon-purple-weak: #4a3dcf; --color-enhanced-icon-blue-strong: #92b7ff; --color-enhanced-icon-blue-weak: #1e61e6; --color-enhanced-icon-green-strong: #8ed4b4; --color-enhanced-icon-green-weak: #238b5c; --color-enhanced-icon-orange-strong: #ffae90; --color-enhanced-icon-orange-weak: #e05827; --color-enhanced-icon-yellow-strong: #ffc966; --color-enhanced-icon-yellow-weak: #ea9e06; } } .EnhancedIcon { flex: none; } .EnhancedIcon--sizeSmall { width: 32px; height: 32px; } .EnhancedIcon--sizeMedium { width: 48px; height: 48px; } .EnhancedIcon--sizeLarge { width: 64px; height: 64px; } .EnhancedIcon--colorDefault .EnhancedIcon-strongPath { fill: var(--color-enhanced-icon-strong); } .EnhancedIcon--colorDefault .EnhancedIcon-weakPath { fill: var(--color-enhanced-icon-weak); } .EnhancedIcon--colorPurple .EnhancedIcon-strongPath { fill: var(--color-enhanced-icon-purple-strong); } .EnhancedIcon--colorPurple .EnhancedIcon-weakPath { fill: var(--color-enhanced-icon-purple-weak); } .EnhancedIcon--colorBlue .EnhancedIcon-strongPath { fill: var(--color-enhanced-icon-blue-strong); } .EnhancedIcon--colorBlue .EnhancedIcon-weakPath { fill: var(--color-enhanced-icon-blue-weak); } .EnhancedIcon--colorGreen .EnhancedIcon-strongPath { fill: var(--color-enhanced-icon-green-strong); } .EnhancedIcon--colorGreen .EnhancedIcon-weakPath { fill: var(--color-enhanced-icon-green-weak); } .EnhancedIcon--colorYellow .EnhancedIcon-strongPath { fill: var(--color-enhanced-icon-yellow-strong); } .EnhancedIcon--colorYellow .EnhancedIcon-weakPath { fill: var(--color-enhanced-icon-yellow-weak); } .EnhancedIcon--colorOrange .EnhancedIcon-strongPath { fill: var(--color-enhanced-icon-orange-strong); } .EnhancedIcon--colorOrange .EnhancedIcon-weakPath { fill: var(--color-enhanced-icon-orange-weak); } .EnhancedIcon--colorDisabled .EnhancedIcon-strongPath, .EnhancedIcon--colorDisabled .EnhancedIcon-weakPath { fill: var(--color-icon-disabled); } .TypeaheadItemStructure { border-left: 4px solid transparent; align-items: center; height: 40px; padding: 0 16px 0 12px; display: flex; } .TypeaheadItemStructure--enabled { background: var(--color-background-weak); cursor: pointer; } .TypeaheadItemStructure--enabled.TypeaheadItemStructure--highlighted { border-left: 4px solid var(--color-a11y-selected-border-active); background-color: var(--color-background-weak-hover-deprecated); color: var(--color-text); } .TypeaheadItemStructure--disabled { background: var(--color-background-weak); color: var(--color-text-disabled); fill: var(--color-icon-disabled); } .TypeaheadItemStructure-icon { fill: var(--color-icon); width: var(--avatar-diameter-small); flex-shrink: 0; justify-content: center; margin-right: 8px; display: flex; } .TypeaheadItemStructure--disabled .TypeaheadItemStructure-icon { fill: var(--color-icon-disabled); } .TypeaheadItemStructure-label { align-items: center; min-width: 1px; display: flex; } .TypeaheadItemStructure-title, .TypeaheadItemStructure-subtitle { text-overflow: ellipsis; white-space: nowrap; min-width: 50px; line-height: 22px; overflow: hidden; } .TypeaheadItemStructure-subtitle { color: var(--color-text-weak); fill: var(--color-icon); margin-left: 8px; font-size: 12px; } .TypeaheadItemStructure--disabled .TypeaheadItemStructure-subtitle { color: var(--color-text-disabled); fill: var(--color-icon-disabled); } .TypeaheadItemStructure-shortcutLabel { margin-left: auto; padding-left: 8px; } .HintTextTypeaheadItem { background: var(--color-background-weak); color: var(--color-text-weak); padding: 8px 16px; } .TypeaheadCheckboxItemStructure { border-left: 4px solid transparent; flex-direction: row; justify-content: flex-start; padding: 8px 16px 8px 12px; display: flex; } .TypeaheadCheckboxItemStructure--enabled { background: var(--color-background-weak); cursor: pointer; } .TypeaheadCheckboxItemStructure--enabled.TypeaheadCheckboxItemStructure--highlighted { border-left: 4px solid var(--color-a11y-selected-border-active); background-color: var(--color-background-hover); color: var(--color-text); } .TypeaheadCheckboxItemStructure--disabled { background: var(--color-background-weak); color: var(--color-text-disabled); fill: var(--color-icon-disabled); } .TypeaheadCheckboxItemStructure-body { flex-direction: column; flex-grow: 1; min-width: 0; display: flex; } .TypeaheadCheckboxItemStructure-body.TypeaheadCheckboxItemStructure-body--subtitleOnRight { flex-direction: row; } .TypeaheadCheckboxItemStructure-checkboxContainer { align-items: center; height: 22px; margin-right: 8px; display: flex; } .TypeaheadCheckboxItemStructure-iconLeftContainer { fill: var(--color-icon); height: 22px; width: var(--avatar-diameter-small); flex-shrink: 0; justify-content: center; align-items: center; margin-right: 8px; display: flex; } .TypeaheadCheckboxItemStructure--disabled .TypeaheadCheckboxItemStructure-iconLeftContainer { fill: var(--color-icon-disabled); } .TypeaheadCheckboxItemStructure-iconRightContainer { fill: var(--color-icon); flex-shrink: 0; align-items: center; height: 22px; margin-left: 8px; display: flex; } .TypeaheadCheckboxItemStructure--disabled .TypeaheadCheckboxItemStructure-iconRightContainer { fill: var(--color-icon-disabled); } .TypeaheadCheckboxItemStructure-title { text-overflow: ellipsis; line-height: 22px; overflow: hidden; } .TypeaheadCheckboxItemStructure-title--allowMultiline { -webkit-line-clamp: 2; white-space: normal; -webkit-box-orient: vertical; max-height: 44px; display: -webkit-box; } .TypeaheadCheckboxItemStructure-title--noAllowMultiline { white-space: nowrap; } .TypeaheadCheckboxItemStructure-subtitle { color: var(--color-text-weak); fill: var(--color-icon); white-space: nowrap; min-width: 50px; font-size: 12px; line-height: 22px; } .TypeaheadCheckboxItemStructure--disabled .TypeaheadCheckboxItemStructure-subtitle { color: var(--color-text-disabled); fill: var(--color-icon-disabled); } .TypeaheadCheckboxItemStructure-subtitleOnRight { margin-left: 8px; } .TypeaheadCheckboxItemStructure-subtitleBelow { min-width: 0; display: flex; } .TypeaheadItemStructure2 { border-left: 4px solid transparent; flex-direction: row; justify-content: flex-start; padding: 8px 16px 8px 12px; display: flex; } .TypeaheadItemStructure2--enabled { background: var(--color-background-weak); cursor: pointer; } .TypeaheadItemStructure2--enabled.TypeaheadItemStructure2--highlighted { border-left: 4px solid var(--color-a11y-selected-border-active); background-color: var(--color-background-hover); color: var(--color-text); } .TypeaheadItemStructure2--disabled { background: var(--color-background-weak); color: var(--color-text-disabled); fill: var(--color-icon-disabled); } .TypeaheadItemStructure2-body { flex-direction: column; flex-grow: 1; min-width: 0; display: flex; } .TypeaheadItemStructure2-body.TypeaheadItemStructure2-body--subtitleOnRight { flex-direction: row; } .TypeaheadItemStructure2-iconLeftContainer { fill: var(--color-icon); height: 22px; width: var(--avatar-diameter-small); flex-shrink: 0; justify-content: center; align-items: center; margin-right: 8px; display: flex; } .TypeaheadItemStructure2--disabled .TypeaheadItemStructure2-iconLeftContainer { fill: var(--color-icon-disabled); } .TypeaheadItemStructure2-iconRightContainer { fill: var(--color-icon); flex-shrink: 0; align-items: center; height: 22px; margin-left: 8px; display: flex; } .TypeaheadItemStructure2--disabled .TypeaheadItemStructure2-iconRightContainer { fill: var(--color-icon-disabled); } .TypeaheadItemStructure2-title { text-overflow: ellipsis; line-height: 22px; overflow: hidden; } .TypeaheadItemStructure2-title--allowMultiline { -webkit-line-clamp: 2; white-space: normal; -webkit-box-orient: vertical; max-height: 44px; display: -webkit-box; } .TypeaheadItemStructure2-title--noAllowMultiline { white-space: nowrap; } .TypeaheadItemStructure2-subtitle { color: var(--color-text-weak); fill: var(--color-icon); white-space: nowrap; min-width: 50px; font-size: 12px; line-height: 22px; } .TypeaheadItemStructure2--disabled .TypeaheadItemStructure2-subtitle { color: var(--color-text-disabled); fill: var(--color-icon-disabled); } .TypeaheadItemStructure2-subtitleOnRight { margin-left: 8px; } .TypeaheadItemStructure2-subtitleBelow { min-width: 0; display: flex; } .TypeaheadActionItemStructure { background: var(--color-background-weak); border-left: 4px solid transparent; border-top: var(--color-border) solid 1px; color: var(--color-primary-text); cursor: pointer; fill: var(--color-primary-icon); align-items: center; height: 40px; padding: 0 16px 0 12px; display: flex; } .TypeaheadActionItemStructure.TypeaheadActionItemStructure--highlighted { border-left: 4px solid var(--color-a11y-selected-border-active); background-color: var(--color-background-hover); color: var(--color-primary-text); fill: var(--color-primary-icon); } .TypeaheadActionItemStructure-icon { min-width: var(--avatar-diameter-small); margin-right: 8px; } .TypeaheadDropdownInput-deprecatedDropdown { margin-top: 2px; overflow: hidden; } .TypeaheadDropdownSection-heading { background-color: var(--color-background-weak); padding: 16px 16px 4px; } .TypeaheadScrollable { width: 450px; max-height: 190px; } @media screen and (max-width: 575px) { .TypeaheadScrollable { width: 320px; } } .TypeaheadScrollable-contents--noPointerEvents { pointer-events: none; } .TypeaheadSearchLoadingState { padding: 4px 0; } .TypeaheadSearchLoadingState-sectionNameRow { flex-direction: row; display: flex; } .TypeaheadSearchLoadingState-sectionName { height: 18px; padding: 8px 16px 4px; } .TypeaheadSearchLoadingState-sectionNameText { background-color: var(--color-placeholder-background); background-image: linear-gradient( -90deg, rgba(var(--color-placeholder-background-rgb), 0) 0%, var(--color-placeholder-background) 50%, rgba(var(--color-placeholder-background-rgb), 0) 100% ); background-position: -300px 0; background-repeat: no-repeat; background-size: 300px 100%; border-radius: 4px; width: 120px; height: 12px; animation: 1.5s linear infinite animation-shimmering; } .TypeaheadSearchLoadingState-icon { background-color: var(--color-placeholder-background); background-image: linear-gradient( -90deg, rgba(var(--color-placeholder-background-rgb), 0) 0%, var(--color-placeholder-background) 50%, rgba(var(--color-placeholder-background-rgb), 0) 100% ); background-position: -300px 0; background-repeat: no-repeat; background-size: 300px 100%; border-radius: 4px; width: 16px; height: 16px; animation: 1.5s linear infinite animation-shimmering; } .TypeaheadSearchLoadingState-resultTitle { align-items: center; height: 22px; display: flex; } .TypeaheadSearchLoadingState-resultTitleText { background-color: var(--color-placeholder-background); background-image: linear-gradient( -90deg, rgba(var(--color-placeholder-background-rgb), 0) 0%, var(--color-placeholder-background) 50%, rgba(var(--color-placeholder-background-rgb), 0) 100% ); background-position: -300px 0; background-repeat: no-repeat; background-size: 300px 100%; border-radius: 4px; width: 240px; height: 16px; animation: 1.5s linear infinite animation-shimmering; } .TypeaheadSearchLoadingState-resultSubtitle { align-items: center; height: 22px; display: flex; } .TypeaheadSearchLoadingState-resultSubtitleText { background-color: var(--color-placeholder-background); background-image: linear-gradient( -90deg, rgba(var(--color-placeholder-background-rgb), 0) 0%, var(--color-placeholder-background) 50%, rgba(var(--color-placeholder-background-rgb), 0) 100% ); background-position: -300px 0; background-repeat: no-repeat; background-size: 300px 100%; border-radius: 4px; width: 200px; height: 12px; animation: 1.5s linear infinite animation-shimmering; } .TypeaheadSearchLoadingState-lastResult { margin-bottom: 4px; } .TypeaheadSubtleActionItem-typeaheadItemStructure { border-top-style: none; height: 32px; font-size: 12px; } .AiCardTypeIndicator { background: var(--color-ai-badge-background); fill: var(--color-ai-badge-icon); border-radius: 50%; flex: none; justify-content: center; align-items: center; width: 24px; min-width: 24px; max-width: 24px; height: 24px; min-height: 24px; max-height: 24px; display: flex; } .AiCopilotIcon { fill: var(--color-ai-copilot-icon); } .AiCopilotIcon--small { width: 16px; min-width: 16px; height: 16px; min-height: 16px; } .AiCopilotIcon--large { width: 32px; min-width: 32px; height: 32px; min-height: 32px; } .AiCopilotIcon--xlarge { width: 64px; min-width: 64px; height: 64px; min-height: 64px; } .AiCopilotMiniIcon { fill: var(--color-ai-copilot-icon); } .AiCopilotMiniIcon--small { width: 12px; min-width: 12px; height: 12px; min-height: 12px; } .AiCopilotMiniIcon--large { width: 24px; min-width: 24px; height: 24px; min-height: 24px; } .AiFeatureHeading--h6 .AiFeatureHeading-iconPositioner, .AiFeatureHeading--h5 .AiFeatureHeading-iconPositioner { height: 20px; } .AiFeatureHeading--h4 .AiFeatureHeading-iconPositioner { height: 28px; } .AiWorkflowIcon--small { width: 16px; min-width: 16px; height: 16px; min-height: 16px; } .AiWorkflowIcon--large { width: 32px; min-width: 32px; height: 32px; min-height: 32px; } .ContactSalesCardButton { border-radius: 8px; gap: 12px; min-width: 96px; max-width: 160px; padding: 12px; } .ContactSalesCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation { background: var(--color-background-weak); } .ContactSalesCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-border-strong); } .ContactSalesCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation { background: var(--color-background-weak); } .ContactSalesCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:hover.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-selected-border-hover); } .ContactSalesCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation, .ContactSalesCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation { background: var(--color-background-weak); } .ContactSalesCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled:active.ThemeableCardPresentation.ThemeableCardPresentation--isValid, .ContactSalesCardButton.ThemeableInteractiveCardPresentation--isNotSelected.ThemeableInteractiveCardPresentation--isEnabled.ThemeableInteractiveCardPresentation--isActive.ThemeableCardPresentation.ThemeableCardPresentation--isValid { border-color: var(--color-selected-border-active); } .ContactSalesCountryTypeahead-input { width: 100%; } .ContactSalesFormDialog-body { flex-direction: column; display: flex; } .ContactSalesFormDialog-subheading { margin-bottom: 24px; } .ContactSalesFormDialog-emailField, .ContactSalesFormDialog-phoneNumberField, .ContactSalesFormDialog-companySizeField, .ContactSalesFormDialog-country { width: 100%; } .ContactSalesFormDialog-row { margin-bottom: 32px; display: flex; } .ContactSalesFormDialog-row .ContactSalesFormDialog-formRowField { flex: 1 0 0; } .ContactSalesFormDialog-row .ContactSalesFormDialog-formRowField:first-of-type { padding-right: 32px; } .ContactSalesFormDialog-disclaimer { margin-top: 24px; } .ContactSalesFormDialog-errorMessage { padding: 8px 16px; } .ContactSalesFormFullScreenModal { flex-direction: column; height: 100%; display: flex; } .ContactSalesFormFullScreenModal-scrollable { flex-direction: column; display: flex; } .ContactSalesFormFullScreenModal-navigationHeader { flex: none; justify-content: space-between; align-items: center; width: calc(100% - 48px); height: 64px; padding: 0 24px; transition: box-shadow 0.25s; display: flex; } .ContactSalesFormFullScreenModal-closeButton, .ContactSalesFormFullScreenModal-backButton { z-index: var(--level-1); } .ContactSalesFormFullScreenModal-content { height: 100vh; margin: 0 auto; display: flex; } .ContactSalesFormFullScreenModalContent-row { justify-content: space-between; margin: auto 48px; } .ContactSalesFormFullScreenModalContent-column { margin: 0 48px; } .ContactSalesFormFullScreenModalContent-leftPane { flex-shrink: 2; justify-content: center; gap: 142px; height: 100%; margin: auto 0; } .ContactSalesFormFullScreenModalContent-checkIcon { fill: var(--color-success-icon); } .ContactSalesFormFullScreenModalContent-formSection { background: var(--color-background-medium); border-radius: 12px; flex-shrink: 1; padding: 48px 80px; } .ContactSalesFormFullScreenModalContent-productQuestionButton { flex: 1; } .ContactSalesFormFullScreenModalContent-formRowField { width: 100%; } .ContactSalesFormFullScreenModalContent-dropdownButton { justify-content: space-between; width: 100%; } .ContactSalesFormFullScreenModalContent-emailField, .ContactSalesFormFullScreenModalContent-phoneNumberField, .ContactSalesFormFullScreenModalContent-companySizeField, .ContactSalesFormFullScreenModalContent-countryField { width: 100%; } .ContactSalesFormFullScreenModalContent-productQuestionsSection { margin-bottom: 32px; } .ContactSalesFormFullScreenModalLoadingState { gap: 32px; height: 100%; } .ContactSalesFormFullScreenModalLoadingState-leftPane { justify-content: center; gap: 142px; height: 100%; margin: auto 0; } .ContactSalesFormFullScreenModalLoadingState-formSection { background: var(--color-background-medium); border-radius: 12px; min-width: 400px; max-width: 560px; height: 640px; } .ContactSalesFormFullScreenModalLoadingState-loadingSubtitle { background-color: var(--color-placeholder-background); background-image: linear-gradient( -90deg, rgba(var(--color-placeholder-background-rgb), 0) 0%, var(--color-placeholder-background) 50%, rgba(var(--color-placeholder-background-rgb), 0) 100% ); background-position: -300px 0; background-repeat: no-repeat; background-size: 300px 100%; border-radius: 4px; width: 100%; height: 100%; animation: 1.5s linear infinite animation-shimmering; } .ContactSalesFormFullScreenModalLoadingState-loadingText { background-color: var(--color-placeholder-background); background-image: linear-gradient( -90deg, rgba(var(--color-placeholder-background-rgb), 0) 0%, var(--color-placeholder-background) 50%, rgba(var(--color-placeholder-background-rgb), 0) 100% ); background-position: -300px 0; background-repeat: no-repeat; background-size: 300px 100%; border-radius: 4px; width: 400px; height: 16px; animation: 1.5s linear infinite animation-shimmering; } .ContactSalesFormFullScreenModalLoadingState-buttons { justify-content: space-between; } .ContactSalesFormFullScreenModalLoadingState-loadingButton { background-color: var(--color-placeholder-background); background-image: linear-gradient( -90deg, rgba(var(--color-placeholder-background-rgb), 0) 0%, var(--color-placeholder-background) 50%, rgba(var(--color-placeholder-background-rgb), 0) 100% ); background-position: -300px 0; background-repeat: no-repeat; background-size: 300px 100%; border-radius: 8px; flex: 1; min-width: 96px; max-width: 160px; min-height: 112px; animation: 1.5s linear infinite animation-shimmering; } .ContactSalesFormHelpers-aiIconWrapper { padding: 4px; } .ContactSalesFormLoadingDialog-contents { align-items: center; height: 480px; display: flex; } .ContactSalesFormSuccessDialog-contents { flex-direction: column; justify-content: center; align-items: center; height: 320px; display: flex; } .ContactSalesFormSuccessDialog-body { margin-bottom: 16px; } .ContactSalesFormSuccessDialog-cards { justify-content: space-between; width: 100%; margin: 8px 0; } .ContactSalesFormSuccessDialog-cardButton { height: 100%; max-width: unset; flex: 1; } .ContactSalesFormSuccessDialog-contents--withSuccessCards { align-items: flex-start; height: auto; } .DeprecatedAnnouncementDialog-button { margin: 0 4px; } .DeprecatedDialog { color: var(--color-text); text-align: left; flex-direction: column; width: 580px; min-height: 1px; font-size: 14px; font-weight: 400; display: flex; } .DesignTokenThemeSelectors-theme--blacklight .DeprecatedDialog { border: 2px solid red; } @media print { .DeprecatedDialog--print { background-color: var(--color-background-weak); width: 100%; min-height: 100%; display: block; position: absolute; top: 0; left: 0; right: 0; } } .DeprecatedDialog-header { border-bottom: 1px solid var(--color-border); border-radius: 4px 4px 0 0; flex-shrink: 0; padding: 8px 32px; display: flex; position: relative; } @media print { .DeprecatedDialog-header--print { display: none; } .DeprecatedDialog-modalLayer--print { position: absolute; } } .DeprecatedDialog-headerTitle { color: var(--color-text); overflow-wrap: break-word; flex: 1; align-self: center; min-width: 1px; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 32px; } .DeprecatedDialog-closeButton { position: absolute; top: 8px; right: 8px; } .DeprecatedConfirmationDialog-dialogContents { padding: 16px 32px 24px; } .DeprecatedConfirmationDialog-dialogText { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 22px; } .DeprecatedConfirmationDialog-dialogButtonRow { justify-content: flex-end; margin-top: 16px; display: flex; } .DeprecatedConfirmationDialog-dialogButton { margin-left: 8px; } .DeprecatedConfirmationDialog-loadingIndicator { margin: 0 8px; } .MarketingDialog-subHeader { text-align: center; max-width: 450px; margin-top: 8px; } .MarketingDialog-image, .MarketingDialog-video { max-width: 450px; margin-top: 32px; } .MarketingDialog-body { color: var(--color-text-weak); flex-direction: column; align-items: center; padding: 0 32px; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; display: flex; } .MarketingDialog-actionRow { flex-direction: column; flex: none; align-items: center; padding: 32px; display: flex; } .MarketingDialog-actionButtons { flex-direction: row; display: flex; } .MarketingDialog-secondaryActionLink { text-align: center; margin-top: 16px; font-size: 14px; line-height: normal; } .MessageDialog { text-align: left; overflow-y: auto; } .MessageDialog--medium { width: 580px; } .MessageDialog--large { width: 700px; } .MessageDialog-header { text-align: center; flex-direction: column; flex-shrink: 0; align-items: center; padding-top: 32px; padding-left: 32px; padding-right: 32px; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 32px; display: flex; position: relative; } .MessageDialog-header .MessageDialog-headerTitle { width: 100%; } .MessageDialog-closeButton { position: absolute; top: 16px; right: 16px; } .SuccessDialogContents-text { text-align: center; margin: 32px; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 500; line-height: 20px; } .SuccessDialogContents-illustration { margin: 32px auto auto; display: block; } .UpgradeModal { flex-direction: column; align-items: center; max-width: 100%; min-height: 1px; display: flex; } .UpgradeModal-scrollable { flex-direction: column; align-items: center; width: 100%; display: flex; } .UpgradeModal-content { flex-direction: column; align-items: center; max-width: 640px; display: flex; } .UpgradeModal-header { margin-top: 64px; } .UpgradeModal-closeButton { z-index: var(--level-1); align-self: flex-end; margin-top: 16px; margin-right: 16px; } .UpgradeModal-bodyText { margin-top: 12px; } .UpgradeModal-primaryButton { width: 320px; margin-top: 32px; } .UpgradeModal-secondaryLink { margin-top: 16px; } .UpgradeModal-img { max-width: 100%; margin-top: 48px; } .YearInReviewDialog { position: relative; } .YearInReviewDialog-closeButton { background-color: var(--color-background-strong); position: absolute; top: 16px; right: 16px; } .YearInReviewDialog-subHeader { text-align: center; margin-top: 8px; } .YearInReviewDialog-header { text-align: center; margin-top: 24px; } .YearInReviewDialog-avatar { position: absolute; top: 119px; right: 295px; } .YearInReviewDialog-image { max-width: 450px; } .YearInReviewDialog-body { color: var(--color-text-weak); flex-direction: column; align-items: center; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; display: flex; } .YearInReviewDialog-actionRow { flex-direction: column; flex: none; align-items: center; padding: 32px; display: flex; } .YearInReviewDialog-actionButton { background: var(--color-primary-background-strong); border-radius: 8px; flex-direction: row; display: flex; } .YearInReviewDialog-actionButton:hover { background: var(--color-primary-background-strong-hover); opacity: 1; } .YearInReviewDialog-secondaryActionLink { text-align: center; margin-top: 16px; font-size: 14px; line-height: normal; } .GoogleSignInButton.GoogleSignInButton--sparse { position: relative; } .GoogleSignInButton-logo { flex: none; width: 18px; height: 18px; } .GoogleSignInButton-logo.GoogleSignInButton-logo--sparse { display: none; } @media (min-width: 375px) { .GoogleSignInButton-logo.GoogleSignInButton-logo--sparse { display: block; } } @media (min-width: 425px) { .GoogleSignInButton-logo.GoogleSignInButton-logo--sparse { position: absolute; left: 32px; } } .NuxNotMyOrganizationDialog-body { padding: 16px 32px; } .NuxNotMyOrganizationDialog-innerBody { padding-bottom: 8px; } .NuxNotRightAccountDialog-body { padding-left: 16px; list-style: outside; } .NuxSparkler { position: relative; } .NuxSparkler-sparkle { opacity: 1; transition: all 0.5s cubic-bezier(0, 0, 0.2, 1); position: absolute; } .NuxSparkler-sparkle.NuxSparkler-sparkle--hidden { opacity: 0; visibility: hidden; } .NuxSparkler-plus { fill: var(--color-beta-icon); width: 10px; height: 10px; } .NuxSparkler-circle { fill: #fcbd01; width: 3px; height: 3px; } .NuxSparkler-plus0 { top: -65%; left: 10%; } .NuxSparkler-plus0.NuxSparkler-plus0--hidden { transform: translate(10%, 45%); } .NuxSparkler-plus1 { top: 5%; left: -25%; } .NuxSparkler-plus1.NuxSparkler-plus1--hidden { transform: translate(45%, 10%); } .NuxSparkler-plus2 { top: 130%; left: 85%; } .NuxSparkler-plus2.NuxSparkler-plus2--hidden { transform: translate(-25%, -25%); } .NuxSparkler-circle0 { top: -40%; left: 30%; } .NuxSparkler-circle0.NuxSparkler-circle0--hidden { transform: translate(150%, 250%); } .NuxSparkler-circle1 { top: -12%; left: -10%; } .NuxSparkler-circle1.NuxSparkler-circle1--hidden { transform: translate(250%, 150%); } .NuxSparkler-circle2 { top: 125%; left: 105%; } .NuxSparkler-circle2.NuxSparkler-circle2--hidden { transform: translate(-250%, -250%); } .SeparatorRow { text-align: center; align-items: center; display: flex; } .SeparatorRow-label { margin: 0 8px; } .SeparatorRow-horizontalLine { border-top: 1px solid var(--color-border); flex: auto; min-width: 1px; margin-top: 8px; padding-top: 8px; } .SeparatorRow-horizontalLine.SeparatorRow-horizontalLine--grow { flex: 5 auto; } .SeparatorRow--selected .SeparatorRow-horizontalLine { border-color: var(--color-selected-border); } .AsanaCommercialLoginRejectedView-emailCard { min-height: 48px; margin-top: 16px; margin-bottom: 24px; } .AsanaGovLoginRejectedView-emailCard { min-height: 48px; margin-top: 24px; margin-bottom: 24px; } .EmailCardContent { box-sizing: border-box; justify-content: center; align-items: center; width: 100%; display: flex; } .EmailCardContent-emailAvatar { margin-right: 12px; } .LoginButton.ButtonThemeablePresentation { background: var(--color-primary-background-strong); border-color: var(--color-primary-background-strong); color: var(--color-primary-text-strong); fill: var(--color-primary-icon-strong); } .LoginButton.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-primary-background-strong-hover); border-color: var(--color-primary-background-strong-hover); color: var(--color-primary-text-strong); fill: var(--color-primary-icon-strong); } .LoginButton.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .LoginButton.ButtonThemeablePresentation--isEnabled:active { background: var(--color-primary-background-strong-active); border-color: var(--color-primary-background-strong-active); color: var(--color-primary-text-strong); fill: var(--color-primary-icon-strong); } .LoginButton.ButtonThemeablePresentation:focus { outline: none; } .LoginButton.ButtonThemeablePresentation:focus:not(:focus-visible) { box-shadow: none; } .LoginButton.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .LoginButton.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-button-background-primary-disabled); border-color: var(--color-border); color: var(--color-text-disabled); fill: var(--color-text-disabled); } .LoginButton.LoginButton--loading.ButtonThemeablePresentation { background: var(--color-primary-background-strong); border-color: var(--color-primary-background-strong); color: var(--color-primary-text-strong); fill: var(--color-primary-icon-strong); } .LoginButton.LoginButton--loading.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-primary-background-strong-hover); border-color: var(--color-primary-background-strong-hover); color: var(--color-primary-text-strong); fill: var(--color-primary-icon-strong); } .LoginButton.LoginButton--loading.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .LoginButton.LoginButton--loading.ButtonThemeablePresentation--isEnabled:active { background: var(--color-primary-background-strong-active); border-color: var(--color-primary-background-strong-active); color: var(--color-primary-text-strong); fill: var(--color-primary-icon-strong); } .LoginButton.LoginButton--loading.ButtonThemeablePresentation:focus { outline: none; } .LoginButton.LoginButton--loading.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .LoginButton.LoginButton--loading.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-background-weak), 0 0 0 4px var(--color-a11y-selected-border-active); } .LoginButton.LoginButton--loading.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-primary-background-strong); border-color: var(--color-primary-background-strong); color: var(--color-primary-text-strong); fill: var(--color-primary-icon-strong); } .LoginButton-loadingIndicator.LoadingIndicator { margin: 0 auto; } .LoginStickyLogoBar { box-sizing: border-box; width: 100%; height: 80px; z-index: var(--level-1); background: 0 0; justify-content: center; align-items: center; padding-left: 32px; display: flex; position: fixed; } .LoginStickyLogoBar.LoginStickyLogoBar--scrolled { background: var(--color-background-weak); box-shadow: var(--color-border) 0 1px 0; } @media (max-width: 536px) { .LoginStickyLogoBar { padding-left: 24px; } } .LoginStickyLogoBar-nav { width: 100%; max-width: 1280px; } .LoginStickyLogoBar-asanaLogo { height: 24px; margin-right: 8px; } .LoginStickyLogoBar-asanaLogoContainer { flex-direction: row; display: inline-flex; } .LoginCardLayout { background: var(--color-background-weak); flex-direction: column; align-items: center; min-height: 100vh; margin: 0 32px; display: flex; } @media (max-width: 536px) { .LoginCardLayout { margin: 0 24px; } } .LoginCardLayout-card { flex-direction: column; width: 100%; max-width: 480px; min-height: 420px; margin: auto 0; padding: 80px 0; display: flex; } .LoginCardLayout-card--content { flex-direction: column; align-self: center; width: 100%; max-width: 400px; display: flex; } .LoginCardLayout-backButton { align-items: center; height: 40px; scroll-margin-top: 80px; display: flex; position: absolute; } @media (max-width: 520px) { .LoginCardLayout-backButton { height: auto; position: relative; } } .LoginCardLayout-title { margin-bottom: 32px; } .LoginCardLayout-title.LoginCardLayout-title--withBanner { margin-bottom: 24px; } .LoginCardLayout-title.LoginCardLayout-title--withSubtitle { margin-bottom: 0; } .LoginCardLayout-subtitle { margin-top: 8px; margin-bottom: 32px; } .LoginCardLayout-subtitle.LoginCardLayout-subtitle--withBanner { margin-bottom: 24px; } .LoginCardLayout-banner { text-align: center; margin-bottom: 24px; } .LoginCardLayout-banner .DeprecatedMessageBanner-contents { padding-top: 8px; padding-bottom: 8px; } .LoginCardLayout-cardContainer { flex-direction: column; align-items: center; width: 58vw; display: flex; } @media (max-width: 960px) { .LoginCardLayout-cardContainer { width: 100%; } } .LoginCardLayout-panelContainer { width: 100vw; height: 100vh; display: flex; } @media (max-width: 960px) { .LoginCardLayout-panelContainer { width: 100%; } } @media (max-height: 644px) { .LoginCardLayout-panelContainer { height: unset; } } .LoginCardLayout-panelDesktopContainer { display: flex; } @media (max-width: 960px) { .LoginCardLayout-panelDesktopContainer { display: none; } } .LoginConfirmView-content { flex-direction: column; display: flex; } .LoginConfirmView-description { overflow-wrap: break-word; margin-bottom: 32px; } .LoginConfirmView-logInButton { margin-bottom: 24px; } .LoginConfirmView-logInWithDifferentAccount { align-self: center; } .LoginDefaultView-content { flex-direction: column; width: 100%; display: flex; } .LoginDefaultView-googleSsoButton { height: 40px; margin-bottom: 20px; } .LoginDefaultView-googleSsoButtonPlaceholder { box-sizing: border-box; border: 1px solid #dadce0; border-radius: 4px; height: 100%; } .LoginDefaultView-ssoButton { align-self: stretch; margin-bottom: 20px; } .LoginDefaultView-separatorRowLabel { font-size: 16px; } .LoginDomainSpecificView-content { flex-direction: column; width: 100%; display: flex; } .LoginDomainSpecificView-allLoginOptions { text-align: center; margin-top: 40px; } .LoginDomainSpecificView-allOptionsButtonLink { margin-left: 8px; display: inline-block; } .LoginEmailForm { flex-direction: column; margin-bottom: 0; display: flex; } .LoginEmailForm-email { flex-direction: column; justify-content: center; margin-top: 20px; display: flex; } .LoginEmailForm-emailInput { width: 100%; } .LoginEmailForm-emailInput::-ms-input-placeholder { color: var(--color-text-weak); } .LoginEmailForm-emailInput::placeholder { color: var(--color-text-weak); } .LoginEmailForm-continueButton { align-self: stretch; margin-top: 24px; } .LoginEmailForm-sandButtons { background: var(--color-background-strong); text-align: center; border-radius: 8px; margin-top: 32px; padding: 16px 8px; } .LoginEmailForm-logInSashimiButton, .LoginEmailForm-logInSushiButton, .LoginEmailForm-logInNigiriButton, .LoginEmailForm-logInTemakiButton, .LoginEmailForm-logInAlienCatButton { min-width: calc(50% - 2px); margin-bottom: 16px; } .LoginEmailForm-logInSashimiButton, .LoginEmailForm-logInSushiButton { margin-right: 4px; } .LoginFooter { color: var(--color-text-weak); flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 0; margin-bottom: 24px; display: flex; } .LoginFooter.LoginFooter--cardlessHidden { visibility: hidden; } .LoginFooter-navRow { flex-wrap: wrap; justify-content: center; margin-top: 8px; margin-left: 8px; margin-right: 8px; display: flex; } .LoginFooter-navRow:first-child { margin-top: 0; } .LoginFooter-navRowItem { font-size: 14px; } .LoginFooter-navRowItem + .LoginFooter-navRowItem:before { content: ""; margin: 0 4px; } .LoginHeader { flex-direction: column; align-items: center; margin-top: 32px; margin-bottom: 32px; margin-left: -5px; display: flex; } .LoginHeader-asanaImage { width: 120px; height: 24px; } .LoginMagicLinkConfirmationView-content { flex-direction: column; display: flex; } .LoginMagicLinkConfirmationView-description { overflow-wrap: break-word; margin-bottom: 32px; } .LoginMagicLinkConfirmationView-logInButton { margin-bottom: 24px; } .LoginMagicLinkConfirmationView-logInWithDifferentAccount { align-self: center; } .LoginOptionsLayout { background: var(--color-background-medium); flex-direction: column; align-items: center; min-height: 100vh; display: flex; } .LoginOptionsLayout-emailCard { min-height: 48px; margin-bottom: 24px; } .LoginOptionsLayout-removeButton { scroll-margin-top: 80px; } .LoginOptionsManager-separatorRowLabel { margin-top: 16px; margin-bottom: 16px; font-size: 14px; color: var(--color-deprecated-lightGray3) !important; } .LoginOptionsManager-termsOfServiceAndPrivacy { text-align: center; margin-top: 8px; display: flex; } .LoginOptionsManager-loginEntryPoint { align-self: center; margin-top: 16px; } .LoginOptionsManager-magicLoginButton { align-self: stretch; margin-top: 12px; } .LoginOptionsManager-magicLoginButton.ButtonThemeablePresentation { background: var(--color-button-background-secondary); border-color: var(--color-border-strong); color: var(--color-text); fill: var(--color-icon); } .LoginOptionsManager-magicLoginButton.ButtonThemeablePresentation--isEnabled:hover { background: var(--color-button-background-secondary-hover); border-color: var(--color-border-hover); color: var(--color-text); fill: var(--color-icon-hover); } .LoginOptionsManager-magicLoginButton.ButtonThemeablePresentation--isEnabled.ButtonThemeablePresentation--isActive, .LoginOptionsManager-magicLoginButton.ButtonThemeablePresentation--isEnabled:active { background: var(--color-button-background-secondary-active); border-color: var(--color-border-active); color: var(--color-text); fill: var(--color-icon-hover); } .LoginOptionsManager-magicLoginButton.ButtonThemeablePresentation:focus { outline: none; } .LoginOptionsManager-magicLoginButton.ButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .LoginOptionsManager-magicLoginButton.ButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active); } .LoginOptionsManager-magicLoginButton.ButtonThemeablePresentation.ButtonThemeablePresentation--isDisabled { background: var(--color-button-background-primary-disabled); border-color: var(--color-border); color: var(--color-text-disabled); fill: var(--color-text-disabled); } input::-ms-reveal { display: none; } input::-ms-clear { display: none; } .LoginPasswordForm { flex-direction: column; margin-bottom: 0; display: flex; } .LoginPasswordForm-submitButton { display: none; } .LoginPasswordForm-passwordInputField { flex-direction: row; align-items: center; width: 100%; display: flex; } .LoginPasswordForm-passwordInputIconContainer { width: 100%; } .LoginPasswordForm-rightIcon { padding-bottom: 8px; padding-right: 4px; } .LoginPasswordForm-passwordInput { width: 100%; margin-bottom: 8px; } .LoginPasswordForm-forgotPassword { align-self: flex-start; } .LoginPasswordForm-captchaCheckbox { margin-top: 24px; } .LoginPasswordForm-loginButton { align-self: stretch; margin-top: 24px; } .LoginRecentSamlView-content { flex-direction: column; display: flex; } .LoginRecentSamlView-description { overflow-wrap: break-word; margin-bottom: 32px; } .LoginRecentSamlView-logInAsButton { margin-bottom: 24px; } .LoginRecentSamlView-logInDifferentAccount { align-self: center; } .LoginWithSamlButton { align-self: stretch; margin-top: 12px; margin-bottom: 16px; display: flex; } .MfaSetupConfirmationView-contents { flex-direction: column; display: flex; } .MfaSetupConfirmationView-iconContainer { justify-content: center; margin-bottom: 16px; display: flex; } .MfaSetupConfirmationView-heading { margin-bottom: 8px; } .MfaSetupConfirmationView-body { margin-bottom: 24px; } .MfaSetupQrCodeView-contents { flex-direction: column; display: flex; } .MfaSetupQrCodeView-qrCodeContainer { justify-content: center; margin-bottom: 16px; display: flex; } .MfaSetupQrCodeView-heading { margin-bottom: 8px; } .MfaSetupQrCodeView-body { margin-bottom: 24px; } .MfaSetupTotpVerificationView-contents { flex-direction: column; display: flex; } .MfaSetupTotpVerificationView-imageContainer { justify-content: center; margin-bottom: 16px; display: flex; } .PasswordVisibilitySwitch-iconButton.IconButtonThemeablePresentation { fill: var(--color-text-weak); background: 0 0; border-color: transparent; border-radius: 6px; } .PasswordVisibilitySwitch-iconButton.IconButtonThemeablePresentation--isEnabled:hover { background: var(--color-background-hover); fill: var(--color-text-weak-hover); border-color: transparent; } .PasswordVisibilitySwitch-iconButton.IconButtonThemeablePresentation--isEnabled.IconButtonThemeablePresentation--isActive, .PasswordVisibilitySwitch-iconButton.IconButtonThemeablePresentation--isEnabled:active { background: var(--color-background-active); fill: var(--color-text-weak-hover); border-color: transparent; } .PasswordVisibilitySwitch-iconButton.IconButtonThemeablePresentation:focus { outline: none; } .PasswordVisibilitySwitch-iconButton.IconButtonThemeablePresentation:focus:not( :focus-visible ) { box-shadow: none; } .PasswordVisibilitySwitch-iconButton.IconButtonThemeablePresentation:focus:focus-visible { box-shadow: 0 0 0 2px var(--color-a11y-selected-border-active); } .PasswordVisibilitySwitch-iconButton.IconButtonThemeablePresentation.IconButtonThemeablePresentation--isDisabled { fill: var(--color-text-disabled); background: 0 0; border-color: transparent; } .SignupWithEmailButton { align-self: stretch; margin-top: 16px; margin-bottom: 16px; display: flex; } .SignupWithGoogleButton { align-self: stretch; margin-bottom: 16px; } .SystemUseNotification-card { background-color: var(--color-background-medium); margin-bottom: 16px; padding: 16px; } .TotpVerificationForm { flex-direction: column; display: flex; } .TotpVerificationForm-heading { margin-bottom: 8px; } .TotpVerificationForm-description, .TotpVerificationForm-inputContainer, .TotpVerificationForm-captchaCheckbox { margin-bottom: 32px; } .ExternalBrowserRequiredRedirectPage { flex-direction: column; align-items: stretch; width: 100%; height: 100%; display: flex; } .ExternalBrowserRequiredRedirectPage-header { background-color: var(--color-background-weak); border-bottom: 1px solid var(--color-border); box-shadow: var(--color-box-shadow-small); flex-direction: row; flex: none; align-items: center; height: 80px; padding-left: 32px; display: flex; position: relative; } .ExternalBrowserRequiredRedirectPage-dialogHeading { overflow-wrap: anywhere; margin-bottom: 16px; } .ExternalBrowserRequiredRedirectPage-dialogMessage { overflow-wrap: anywhere; margin-bottom: 4px; font-weight: 400; } .ExternalBrowserRequiredRedirectPage-asanaLogo { height: 26px; } .ExternalBrowserRequiredRedirectPage-content { background-color: var(--color-background-medium); flex-direction: column; flex: 1 0 auto; align-items: center; display: flex; } .ExternalBrowserRequiredRedirectPage-redirectDialog { background-color: var(--color-background-weak); border: 1px solid var(--color-border); border-bottom: 2px solid var(--color-border); border-radius: 2px; flex-direction: column; align-items: center; width: calc(100% - 320px); min-width: 320px; max-width: 960px; margin: 64px 160px; padding: 24px; display: flex; } .ExternalBrowserRequiredRedirectPage-manualRedirectButton { width: min(400px, 100%); margin: 32px 24px 8px; } .ExternalBrowserRequiredRedirectPage-loginUserInfoText { margin-top: 4px; } .ExternalBrowserRequiredRedirectPage-downloadButton { width: min(400px, 100%); margin: 0 24px 32px; } .ExternalBrowserRequiredRedirectPage-switchUserButton { cursor: pointer; color: var(--color-primary-text); fill: var(--color-primary-text); text-decoration-style: solid; } .ExternalBrowserRequiredRedirectPage-switchUserButton:focus-visible { outline: 2px solid var(--color-a11y-selected-border-active); } .ExternalBrowserRequiredRedirectPage-switchUserButton:focus:not( :focus-visible ) { outline: none; } .ExternalBrowserRequiredRedirectPage-switchUserButton:active, .ExternalBrowserRequiredRedirectPage-switchUserButton:hover { color: var(--color-primary-text-hover); fill: var(--color-primary-text-hover); text-decoration: underline; } input::-ms-reveal { display: none; } input::-ms-clear { display: none; } .ChangePassword-passwordForm { flex-direction: column; display: flex; } .ChangePassword-confirmPassword { width: 100%; margin-top: 32px; } .ChangePassword-passwordInput::-ms-input-placeholder { color: var(--color-text-weak); } .ChangePassword-passwordInput::placeholder { color: var(--color-text-weak); } .ChangePassword-passwordInput { width: 100%; } .ChangePassword-validatedInput { margin-top: 8px; } .ChangePassword-button { width: 100%; margin-top: 32px; } .ChangePassword-emailCard { border-radius: 8px; justify-content: center; align-items: center; width: 100%; min-height: 48px; margin-bottom: 24px; display: flex; } .ForgotPassword-content { flex-direction: column; margin-bottom: 0; display: flex; } .ForgotPassword-emailInput { width: 100%; } .ForgotPassword-sendEmailButton { margin-top: 24px; } .ForgotPassword-logInSignUp { text-align: center; margin-top: 32px; } .ForgotPassword-logInButtonLink { margin-right: 8px; } .ForgotPassword-signUpButtonLink { margin-left: 8px; } .ForgotPassword-emailSentMessage { overflow-wrap: break-word; text-align: center; max-width: 100%; margin-top: 24px; } .ForgotPassword-emailSentMessageInner { margin-top: 24px; margin-bottom: 24px; display: flex; } /*# sourceMappingURL=bazel-out/k8-fastbuild/bin/external/asana2/asana/authentication/login/scss_binary.css.map */