/* styles/fonts.css */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"); /* styles/styles.css */ @charset "UTF-8"; /* stylelint-disable */ /* * GENERATED by scripts/generate-theme-scss.mjs — DO NOT EDIT. * Source: @gravity-ui/uikit-themer styles/default.css * Regenerate with `npm run generate:theme`. */ .g-root { --g-border-radius-xs: 3px; --g-border-radius-s: 5px; --g-border-radius-m: 6px; --g-border-radius-l: 8px; --g-border-radius-xl: 10px; --g-font-family-sans: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif; --g-font-family-monospace: "Menlo", "Monaco", "Consolas", "Liberation Mono", "Ubuntu Mono", "DejaVu Sans Mono", "Courier New", "Courier", monospace; --g-text-body-font-weight: 400; --g-text-body-font-family: var(--g-font-family-sans); --g-text-caption-font-weight: 400; --g-text-caption-font-family: var(--g-font-family-sans); --g-text-code-font-weight: 400; --g-text-code-font-family: var(--g-font-family-monospace); --g-text-display-font-weight: 600; --g-text-display-font-family: var(--g-font-family-sans); --g-text-header-font-weight: 600; --g-text-header-font-family: var(--g-font-family-sans); --g-text-subheader-font-weight: 600; --g-text-subheader-font-family: var(--g-font-family-sans); --g-text-body-short-font-size: 13px; --g-text-body-short-line-height: 16px; --g-text-body-1-font-size: 13px; --g-text-body-1-line-height: 18px; --g-text-body-2-font-size: 15px; --g-text-body-2-line-height: 20px; --g-text-body-3-font-size: 17px; --g-text-body-3-line-height: 24px; --g-text-caption-1-font-size: 9px; --g-text-caption-1-line-height: 12px; --g-text-caption-2-font-size: 11px; --g-text-caption-2-line-height: 16px; --g-text-code-1-font-size: 12px; --g-text-code-1-line-height: 18px; --g-text-code-inline-1-font-size: 12px; --g-text-code-inline-1-line-height: 14px; --g-text-code-2-font-size: 14px; --g-text-code-2-line-height: 20px; --g-text-code-inline-2-font-size: 14px; --g-text-code-inline-2-line-height: 16px; --g-text-code-3-font-size: 16px; --g-text-code-3-line-height: 24px; --g-text-code-inline-3-font-size: 16px; --g-text-code-inline-3-line-height: 20px; --g-text-display-1-font-size: 28px; --g-text-display-1-line-height: 36px; --g-text-display-2-font-size: 32px; --g-text-display-2-line-height: 40px; --g-text-display-3-font-size: 40px; --g-text-display-3-line-height: 48px; --g-text-display-4-font-size: 48px; --g-text-display-4-line-height: 52px; --g-text-header-1-font-size: 20px; --g-text-header-1-line-height: 24px; --g-text-header-2-font-size: 24px; --g-text-header-2-line-height: 28px; --g-text-subheader-1-font-size: 13px; --g-text-subheader-1-line-height: 18px; --g-text-subheader-2-font-size: 15px; --g-text-subheader-2-line-height: 20px; --g-text-subheader-3-font-size: 17px; --g-text-subheader-3-line-height: 24px; } .g-root_theme_light { --g-color-private-white-20: rgb(255 255 255 / 0.02); --g-color-private-white-50: rgb(255 255 255 / 0.05); --g-color-private-white-70: rgb(255 255 255 / 0.07); --g-color-private-white-100: rgb(255 255 255 / 0.1); --g-color-private-white-150: rgb(255 255 255 / 0.15); --g-color-private-white-200: rgb(255 255 255 / 0.2); --g-color-private-white-250: rgb(255 255 255 / 0.25); --g-color-private-white-300: rgb(255 255 255 / 0.3); --g-color-private-white-350: rgb(255 255 255 / 0.35); --g-color-private-white-400: rgb(255 255 255 / 0.4); --g-color-private-white-450: rgb(255 255 255 / 0.45); --g-color-private-white-500: rgb(255 255 255 / 0.5); --g-color-private-white-550: rgb(255 255 255 / 0.55); --g-color-private-white-600: rgb(255 255 255 / 0.6); --g-color-private-white-650: rgb(255 255 255 / 0.65); --g-color-private-white-700: rgb(255 255 255 / 0.7); --g-color-private-white-750: rgb(255 255 255 / 0.75); --g-color-private-white-800: rgb(255 255 255 / 0.8); --g-color-private-white-850: rgb(255 255 255 / 0.85); --g-color-private-white-900: rgb(255 255 255 / 0.9); --g-color-private-white-950: rgb(255 255 255 / 0.95); --g-color-private-white-1000-solid: rgb(255 255 255); --g-color-private-white-950-solid: rgb(255 255 255); --g-color-private-white-900-solid: rgb(255 255 255); --g-color-private-white-850-solid: rgb(255 255 255); --g-color-private-white-800-solid: rgb(255 255 255); --g-color-private-white-750-solid: rgb(255 255 255); --g-color-private-white-700-solid: rgb(255 255 255); --g-color-private-white-650-solid: rgb(255 255 255); --g-color-private-white-600-solid: rgb(255 255 255); --g-color-private-white-550-solid: rgb(255 255 255); --g-color-private-white-500-solid: rgb(255 255 255); --g-color-private-white-450-solid: rgb(255 255 255); --g-color-private-white-400-solid: rgb(255 255 255); --g-color-private-white-350-solid: rgb(255 255 255); --g-color-private-white-300-solid: rgb(255 255 255); --g-color-private-white-250-solid: rgb(255 255 255); --g-color-private-white-200-solid: rgb(255 255 255); --g-color-private-white-150-solid: rgb(255 255 255); --g-color-private-white-100-solid: rgb(255 255 255); --g-color-private-white-50-solid: rgb(255 255 255); --g-color-private-white-70-solid: rgb(255 255 255); --g-color-private-white-20-solid: rgb(255 255 255); --g-color-private-black-20: rgb(0 0 0 / 0.02); --g-color-private-black-50: rgb(0 0 0 / 0.05); --g-color-private-black-70: rgb(0 0 0 / 0.07); --g-color-private-black-100: rgb(0 0 0 / 0.1); --g-color-private-black-150: rgb(0 0 0 / 0.15); --g-color-private-black-200: rgb(0 0 0 / 0.2); --g-color-private-black-250: rgb(0 0 0 / 0.25); --g-color-private-black-300: rgb(0 0 0 / 0.3); --g-color-private-black-350: rgb(0 0 0 / 0.35); --g-color-private-black-400: rgb(0 0 0 / 0.4); --g-color-private-black-450: rgb(0 0 0 / 0.45); --g-color-private-black-500: rgb(0 0 0 / 0.5); --g-color-private-black-550: rgb(0 0 0 / 0.55); --g-color-private-black-600: rgb(0 0 0 / 0.6); --g-color-private-black-650: rgb(0 0 0 / 0.65); --g-color-private-black-700: rgb(0 0 0 / 0.7); --g-color-private-black-750: rgb(0 0 0 / 0.75); --g-color-private-black-800: rgb(0 0 0 / 0.8); --g-color-private-black-850: rgb(0 0 0 / 0.85); --g-color-private-black-900: rgb(0 0 0 / 0.9); --g-color-private-black-950: rgb(0 0 0 / 0.95); --g-color-private-black-1000-solid: rgb(0 0 0); --g-color-private-black-950-solid: rgb(13 13 13); --g-color-private-black-900-solid: rgb(25 25 25); --g-color-private-black-850-solid: rgb(38 38 38); --g-color-private-black-800-solid: rgb(51 51 51); --g-color-private-black-750-solid: rgb(64 64 64); --g-color-private-black-700-solid: rgb(77 77 77); --g-color-private-black-650-solid: rgb(89 89 89); --g-color-private-black-600-solid: rgb(102 102 102); --g-color-private-black-550-solid: rgb(115 115 115); --g-color-private-black-500-solid: rgb(128 128 128); --g-color-private-black-450-solid: rgb(140 140 140); --g-color-private-black-400-solid: rgb(153 153 153); --g-color-private-black-350-solid: rgb(166 166 166); --g-color-private-black-300-solid: rgb(179 179 179); --g-color-private-black-250-solid: rgb(191 191 191); --g-color-private-black-200-solid: rgb(204 204 204); --g-color-private-black-150-solid: rgb(217 217 217); --g-color-private-black-100-solid: rgb(230 230 230); --g-color-private-black-50-solid: rgb(242 242 242); --g-color-private-black-70-solid: rgb(237 237 237); --g-color-private-black-20-solid: rgb(250 250 250); --g-color-private-orange-50: rgb(255 119 0 / 0.1); --g-color-private-orange-100: rgb(255 119 0 / 0.15); --g-color-private-orange-150: rgb(255 119 0 / 0.2); --g-color-private-orange-200: rgb(255 119 0 / 0.3); --g-color-private-orange-250: rgb(255 119 0 / 0.4); --g-color-private-orange-300: rgb(255 119 0 / 0.5); --g-color-private-orange-350: rgb(255 119 0 / 0.6); --g-color-private-orange-400: rgb(255 119 0 / 0.7); --g-color-private-orange-450: rgb(255 119 0 / 0.8); --g-color-private-orange-500: rgb(255 119 0 / 0.9); --g-color-private-orange-550: rgb(255 119 0); --g-color-private-orange-550-solid: rgb(255 119 0); --g-color-private-orange-1000-solid: rgb(67 43 29); --g-color-private-orange-950-solid: rgb(78 47 27); --g-color-private-orange-900-solid: rgb(100 56 24); --g-color-private-orange-850-solid: rgb(122 65 20); --g-color-private-orange-800-solid: rgb(145 74 17); --g-color-private-orange-750-solid: rgb(167 83 14); --g-color-private-orange-700-solid: rgb(189 92 10); --g-color-private-orange-650-solid: rgb(211 101 7); --g-color-private-orange-600-solid: rgb(233 110 3); --g-color-private-orange-500-solid: rgb(255 133 25); --g-color-private-orange-450-solid: rgb(255 146 51); --g-color-private-orange-400-solid: rgb(255 160 77); --g-color-private-orange-350-solid: rgb(255 173 102); --g-color-private-orange-300-solid: rgb(255 187 128); --g-color-private-orange-250-solid: rgb(255 201 153); --g-color-private-orange-200-solid: rgb(255 214 179); --g-color-private-orange-150-solid: rgb(255 228 204); --g-color-private-orange-100-solid: rgb(255 235 217); --g-color-private-orange-50-solid: rgb(255 241 230); --g-color-private-green-50: rgb(50 186 118 / 0.1); --g-color-private-green-100: rgb(50 186 118 / 0.15); --g-color-private-green-150: rgb(50 186 118 / 0.2); --g-color-private-green-200: rgb(50 186 118 / 0.3); --g-color-private-green-250: rgb(50 186 118 / 0.4); --g-color-private-green-300: rgb(50 186 118 / 0.5); --g-color-private-green-350: rgb(50 186 118 / 0.6); --g-color-private-green-400: rgb(50 186 118 / 0.7); --g-color-private-green-450: rgb(50 186 118 / 0.8); --g-color-private-green-500: rgb(50 186 118 / 0.9); --g-color-private-green-550: rgb(50 186 118); --g-color-private-green-550-solid: rgb(50 186 118); --g-color-private-green-1000-solid: rgb(36 53 47); --g-color-private-green-950-solid: rgb(37 60 51); --g-color-private-green-900-solid: rgb(39 76 59); --g-color-private-green-850-solid: rgb(40 92 68); --g-color-private-green-800-solid: rgb(42 108 76); --g-color-private-green-750-solid: rgb(44 123 84); --g-color-private-green-700-solid: rgb(45 139 93); --g-color-private-green-650-solid: rgb(47 155 101); --g-color-private-green-600-solid: rgb(48 170 110); --g-color-private-green-500-solid: rgb(71 193 132); --g-color-private-green-450-solid: rgb(91 200 145); --g-color-private-green-400-solid: rgb(112 207 159); --g-color-private-green-350-solid: rgb(132 214 173); --g-color-private-green-300-solid: rgb(153 221 187); --g-color-private-green-250-solid: rgb(173 227 200); --g-color-private-green-200-solid: rgb(194 234 214); --g-color-private-green-150-solid: rgb(214 241 228); --g-color-private-green-100-solid: rgb(224 245 234); --g-color-private-green-50-solid: rgb(235 248 241); --g-color-private-yellow-50: rgb(255 190 92 / 0.1); --g-color-private-yellow-100: rgb(255 190 92 / 0.15); --g-color-private-yellow-150: rgb(255 190 92 / 0.2); --g-color-private-yellow-200: rgb(255 190 92 / 0.3); --g-color-private-yellow-250: rgb(255 190 92 / 0.4); --g-color-private-yellow-300: rgb(255 190 92 / 0.5); --g-color-private-yellow-350: rgb(255 190 92 / 0.6); --g-color-private-yellow-400: rgb(255 190 92 / 0.7); --g-color-private-yellow-450: rgb(255 190 92 / 0.8); --g-color-private-yellow-500: rgb(255 190 92 / 0.9); --g-color-private-yellow-550: rgb(255 190 92); --g-color-private-yellow-550-solid: rgb(255 190 92); --g-color-private-yellow-1000-solid: rgb(67 53 43); --g-color-private-yellow-950-solid: rgb(78 61 46); --g-color-private-yellow-900-solid: rgb(100 77 51); --g-color-private-yellow-850-solid: rgb(122 93 57); --g-color-private-yellow-800-solid: rgb(145 110 63); --g-color-private-yellow-750-solid: rgb(167 126 69); --g-color-private-yellow-700-solid: rgb(189 142 75); --g-color-private-yellow-650-solid: rgb(211 158 80); --g-color-private-yellow-600-solid: rgb(233 174 86); --g-color-private-yellow-500-solid: rgb(255 197 108); --g-color-private-yellow-450-solid: rgb(255 203 125); --g-color-private-yellow-400-solid: rgb(255 210 141); --g-color-private-yellow-350-solid: rgb(255 216 157); --g-color-private-yellow-300-solid: rgb(255 223 174); --g-color-private-yellow-250-solid: rgb(255 229 190); --g-color-private-yellow-200-solid: rgb(255 236 206); --g-color-private-yellow-150-solid: rgb(255 242 222); --g-color-private-yellow-100-solid: rgb(255 245 231); --g-color-private-yellow-50-solid: rgb(255 249 239); --g-color-private-red-50: rgb(255 0 61 / 0.1); --g-color-private-red-100: rgb(255 0 61 / 0.15); --g-color-private-red-150: rgb(255 0 61 / 0.2); --g-color-private-red-200: rgb(255 0 61 / 0.3); --g-color-private-red-250: rgb(255 0 61 / 0.4); --g-color-private-red-300: rgb(255 0 61 / 0.5); --g-color-private-red-350: rgb(255 0 61 / 0.6); --g-color-private-red-400: rgb(255 0 61 / 0.7); --g-color-private-red-450: rgb(255 0 61 / 0.8); --g-color-private-red-500: rgb(255 0 61 / 0.9); --g-color-private-red-550: rgb(255 0 61); --g-color-private-red-550-solid: rgb(255 0 61); --g-color-private-red-1000-solid: rgb(67 25 38); --g-color-private-red-950-solid: rgb(78 23 39); --g-color-private-red-900-solid: rgb(100 20 42); --g-color-private-red-850-solid: rgb(122 17 45); --g-color-private-red-800-solid: rgb(145 15 48); --g-color-private-red-750-solid: rgb(167 12 50); --g-color-private-red-700-solid: rgb(189 9 53); --g-color-private-red-650-solid: rgb(211 6 56); --g-color-private-red-600-solid: rgb(233 3 58); --g-color-private-red-500-solid: rgb(255 25 80); --g-color-private-red-450-solid: rgb(255 51 100); --g-color-private-red-400-solid: rgb(255 77 119); --g-color-private-red-350-solid: rgb(255 102 139); --g-color-private-red-300-solid: rgb(255 128 158); --g-color-private-red-250-solid: rgb(255 153 177); --g-color-private-red-200-solid: rgb(255 179 197); --g-color-private-red-150-solid: rgb(255 204 216); --g-color-private-red-100-solid: rgb(255 217 226); --g-color-private-red-50-solid: rgb(255 230 236); --g-color-private-blue-50: rgb(54 151 241 / 0.1); --g-color-private-blue-100: rgb(54 151 241 / 0.15); --g-color-private-blue-150: rgb(54 151 241 / 0.2); --g-color-private-blue-200: rgb(54 151 241 / 0.3); --g-color-private-blue-250: rgb(54 151 241 / 0.4); --g-color-private-blue-300: rgb(54 151 241 / 0.5); --g-color-private-blue-350: rgb(54 151 241 / 0.6); --g-color-private-blue-400: rgb(54 151 241 / 0.7); --g-color-private-blue-450: rgb(54 151 241 / 0.8); --g-color-private-blue-500: rgb(54 151 241 / 0.9); --g-color-private-blue-550: rgb(54 151 241); --g-color-private-blue-550-solid: rgb(54 151 241); --g-color-private-blue-1000-solid: rgb(37 47 65); --g-color-private-blue-950-solid: rgb(38 53 75); --g-color-private-blue-900-solid: rgb(40 66 96); --g-color-private-blue-850-solid: rgb(42 78 117); --g-color-private-blue-800-solid: rgb(44 90 138); --g-color-private-blue-750-solid: rgb(46 102 158); --g-color-private-blue-700-solid: rgb(48 114 179); --g-color-private-blue-650-solid: rgb(50 127 200); --g-color-private-blue-600-solid: rgb(52 139 220); --g-color-private-blue-500-solid: rgb(74 161 242); --g-color-private-blue-450-solid: rgb(94 172 244); --g-color-private-blue-400-solid: rgb(114 182 245); --g-color-private-blue-350-solid: rgb(134 193 247); --g-color-private-blue-300-solid: rgb(155 203 248); --g-color-private-blue-250-solid: rgb(175 213 249); --g-color-private-blue-200-solid: rgb(195 224 251); --g-color-private-blue-150-solid: rgb(215 234 252); --g-color-private-blue-100-solid: rgb(225 239 253); --g-color-private-blue-50-solid: rgb(235 245 254); --g-color-private-cool-grey-50: rgb(107 132 153 / 0.1); --g-color-private-cool-grey-100: rgb(107 132 153 / 0.15); --g-color-private-cool-grey-150: rgb(107 132 153 / 0.2); --g-color-private-cool-grey-200: rgb(107 132 153 / 0.3); --g-color-private-cool-grey-250: rgb(107 132 153 / 0.4); --g-color-private-cool-grey-300: rgb(107 132 153 / 0.5); --g-color-private-cool-grey-350: rgb(107 132 153 / 0.6); --g-color-private-cool-grey-400: rgb(107 132 153 / 0.7); --g-color-private-cool-grey-450: rgb(107 132 153 / 0.8); --g-color-private-cool-grey-500: rgb(107 132 153 / 0.9); --g-color-private-cool-grey-550: rgb(107 132 153); --g-color-private-cool-grey-550-solid: rgb(107 132 153); --g-color-private-cool-grey-1000-solid: rgb(45 44 52); --g-color-private-cool-grey-950-solid: rgb(49 50 58); --g-color-private-cool-grey-900-solid: rgb(56 60 70); --g-color-private-cool-grey-850-solid: rgb(63 70 82); --g-color-private-cool-grey-800-solid: rgb(71 81 94); --g-color-private-cool-grey-750-solid: rgb(78 91 105); --g-color-private-cool-grey-700-solid: rgb(85 101 117); --g-color-private-cool-grey-650-solid: rgb(92 111 129); --g-color-private-cool-grey-600-solid: rgb(100 122 141); --g-color-private-cool-grey-500-solid: rgb(122 144 163); --g-color-private-cool-grey-450-solid: rgb(137 157 173); --g-color-private-cool-grey-400-solid: rgb(151 169 184); --g-color-private-cool-grey-350-solid: rgb(166 181 194); --g-color-private-cool-grey-300-solid: rgb(181 194 204); --g-color-private-cool-grey-250-solid: rgb(196 206 214); --g-color-private-cool-grey-200-solid: rgb(211 218 224); --g-color-private-cool-grey-150-solid: rgb(225 230 235); --g-color-private-cool-grey-100-solid: rgb(233 237 240); --g-color-private-cool-grey-50-solid: rgb(240 243 245); --g-color-private-purple-50: rgb(143 82 204 / 0.1); --g-color-private-purple-100: rgb(143 82 204 / 0.15); --g-color-private-purple-150: rgb(143 82 204 / 0.2); --g-color-private-purple-200: rgb(143 82 204 / 0.3); --g-color-private-purple-250: rgb(143 82 204 / 0.4); --g-color-private-purple-300: rgb(143 82 204 / 0.5); --g-color-private-purple-350: rgb(143 82 204 / 0.6); --g-color-private-purple-400: rgb(143 82 204 / 0.7); --g-color-private-purple-450: rgb(143 82 204 / 0.8); --g-color-private-purple-500: rgb(143 82 204 / 0.9); --g-color-private-purple-550: rgb(143 82 204); --g-color-private-purple-550-solid: rgb(143 82 204); --g-color-private-purple-1000-solid: rgb(50 37 60); --g-color-private-purple-950-solid: rgb(56 40 68); --g-color-private-purple-900-solid: rgb(67 45 85); --g-color-private-purple-850-solid: rgb(78 50 102); --g-color-private-purple-800-solid: rgb(89 56 119); --g-color-private-purple-750-solid: rgb(99 61 136); --g-color-private-purple-700-solid: rgb(110 66 153); --g-color-private-purple-650-solid: rgb(121 71 170); --g-color-private-purple-600-solid: rgb(132 77 187); --g-color-private-purple-500-solid: rgb(154 99 209); --g-color-private-purple-450-solid: rgb(165 117 214); --g-color-private-purple-400-solid: rgb(177 134 219); --g-color-private-purple-350-solid: rgb(188 151 224); --g-color-private-purple-300-solid: rgb(199 169 230); --g-color-private-purple-250-solid: rgb(210 186 235); --g-color-private-purple-200-solid: rgb(221 203 240); --g-color-private-purple-150-solid: rgb(233 220 245); --g-color-private-purple-100-solid: rgb(238 229 247); --g-color-private-purple-50-solid: rgb(244 238 250); --g-color-text-brand: var(--g-color-private-yellow-700-solid); --g-color-text-brand-heavy: var(--g-color-private-orange-700-solid); --g-color-text-brand-contrast: var(--g-color-text-dark-primary); --g-color-text-link: var(--g-color-private-yellow-650-solid); --g-color-text-link-hover: var(--g-color-private-orange-650-solid); --g-color-text-link-visited: var(--g-color-private-purple-550-solid); --g-color-text-link-visited-hover: var(--g-color-private-purple-800-solid); --g-color-text-info: var(--g-color-private-blue-600-solid); --g-color-text-positive: var(--g-color-private-green-600-solid); --g-color-text-warning: var(--g-color-private-yellow-700-solid); --g-color-text-danger: var(--g-color-private-red-600-solid); --g-color-text-utility: var(--g-color-private-purple-600-solid); --g-color-text-misc: var(--g-color-private-cool-grey-600-solid); --g-color-text-info-heavy: var(--g-color-private-blue-700-solid); --g-color-text-positive-heavy: var(--g-color-private-green-700-solid); --g-color-text-warning-heavy: var(--g-color-private-orange-700-solid); --g-color-text-danger-heavy: var(--g-color-private-red-700-solid); --g-color-text-utility-heavy: var(--g-color-private-purple-700-solid); --g-color-text-misc-heavy: var(--g-color-private-cool-grey-700-solid); --g-color-text-primary: var(--g-color-text-dark-primary); --g-color-text-complementary: var(--g-color-text-dark-complementary); --g-color-text-secondary: var(--g-color-text-dark-secondary); --g-color-text-hint: var(--g-color-text-dark-hint); --g-color-text-dark-primary: var(--g-color-private-black-850); --g-color-text-dark-complementary: var(--g-color-private-black-700); --g-color-text-dark-secondary: var(--g-color-private-black-500); --g-color-text-dark-hint: var(--g-color-private-black-300); --g-color-text-light-primary: var(--g-color-private-white-1000-solid); --g-color-text-light-complementary: var(--g-color-private-white-850); --g-color-text-light-secondary: var(--g-color-private-white-700); --g-color-text-light-hint: var(--g-color-private-white-500); --g-color-text-inverted-primary: var(--g-color-text-light-primary); --g-color-text-inverted-complementary: var(--g-color-text-light-complementary); --g-color-text-inverted-secondary: var(--g-color-text-light-secondary); --g-color-text-inverted-hint: var(--g-color-text-light-hint); --g-color-base-background: var(--g-color-private-white-1000-solid); --g-color-base-brand: var(--g-color-private-yellow-550-solid); --g-color-base-brand-hover: var(--g-color-private-yellow-600-solid); --g-color-base-selection: var(--g-color-private-yellow-200); --g-color-base-selection-hover: var(--g-color-private-yellow-300); --g-color-base-generic: var(--g-color-private-black-50); --g-color-base-generic-hover: var(--g-color-private-black-150); --g-color-base-generic-medium: var(--g-color-private-black-150); --g-color-base-generic-medium-hover: var(--g-color-private-black-250); --g-color-base-generic-accent: var(--g-color-private-black-150); --g-color-base-generic-accent-disabled: var(--g-color-private-black-70); --g-color-base-generic-ultralight: var(--g-color-private-black-20-solid); --g-color-base-simple-hover: var(--g-color-private-black-50); --g-color-base-simple-hover-solid: var(--g-color-private-black-50-solid); --g-color-base-info-light: var(--g-color-private-blue-100); --g-color-base-info-light-hover: var(--g-color-private-blue-200); --g-color-base-info-medium: var(--g-color-private-blue-200); --g-color-base-info-medium-hover: var(--g-color-private-blue-300); --g-color-base-info-heavy: var(--g-color-private-blue-600-solid); --g-color-base-info-heavy-hover: var(--g-color-private-blue-700-solid); --g-color-base-positive-light: var(--g-color-private-green-100); --g-color-base-positive-light-hover: var(--g-color-private-green-200); --g-color-base-positive-medium: var(--g-color-private-green-200); --g-color-base-positive-medium-hover: var(--g-color-private-green-300); --g-color-base-positive-heavy: var(--g-color-private-green-600-solid); --g-color-base-positive-heavy-hover: var(--g-color-private-green-700-solid); --g-color-base-warning-light: var(--g-color-private-yellow-200); --g-color-base-warning-light-hover: var(--g-color-private-yellow-300); --g-color-base-warning-medium: var(--g-color-private-yellow-400); --g-color-base-warning-medium-hover: var(--g-color-private-yellow-500); --g-color-base-warning-heavy: var(--g-color-private-yellow-550-solid); --g-color-base-warning-heavy-hover: var(--g-color-private-yellow-650-solid); --g-color-base-danger-light: var(--g-color-private-red-100); --g-color-base-danger-light-hover: var(--g-color-private-red-200); --g-color-base-danger-medium: var(--g-color-private-red-200); --g-color-base-danger-medium-hover: var(--g-color-private-red-300); --g-color-base-danger-heavy: var(--g-color-private-red-600-solid); --g-color-base-danger-heavy-hover: var(--g-color-private-red-700-solid); --g-color-base-utility-light: var(--g-color-private-purple-100); --g-color-base-utility-light-hover: var(--g-color-private-purple-200); --g-color-base-utility-medium: var(--g-color-private-purple-200); --g-color-base-utility-medium-hover: var(--g-color-private-purple-300); --g-color-base-utility-heavy: var(--g-color-private-purple-600-solid); --g-color-base-utility-heavy-hover: var(--g-color-private-purple-700-solid); --g-color-base-neutral-light: var(--g-color-private-black-50); --g-color-base-neutral-light-hover: var(--g-color-private-black-100); --g-color-base-neutral-medium: var(--g-color-private-black-200); --g-color-base-neutral-medium-hover: var(--g-color-private-black-250); --g-color-base-neutral-heavy: var(--g-color-private-black-450); --g-color-base-neutral-heavy-hover: var(--g-color-private-black-550); --g-color-base-misc-light: var(--g-color-private-cool-grey-100); --g-color-base-misc-light-hover: var(--g-color-private-cool-grey-200); --g-color-base-misc-medium: var(--g-color-private-cool-grey-200); --g-color-base-misc-medium-hover: var(--g-color-private-cool-grey-300); --g-color-base-misc-heavy: var(--g-color-private-cool-grey-600-solid); --g-color-base-misc-heavy-hover: var(--g-color-private-cool-grey-700-solid); --g-color-base-contrast: var(--g-color-private-black-1000-solid); --g-color-base-contrast-hover: var(--g-color-private-black-750); --g-color-base-contrast-simple-hover: var(--g-color-private-black-50); --g-color-base-contrast-accent-disabled: var(--g-color-private-black-70); --g-color-base-contrast-inverted: var(--g-color-private-white-1000-solid); --g-color-base-contrast-inverted-hover: var(--g-color-private-white-850); --g-color-base-contrast-inverted-simple-hover: var(--g-color-private-white-150); --g-color-base-contrast-inverted-accent-disabled: var(--g-color-private-white-70); --g-color-base-contrast-light: var(--g-color-private-white-1000-solid); --g-color-base-contrast-light-hover: var(--g-color-private-white-850); --g-color-base-contrast-light-simple-hover: var(--g-color-private-white-150); --g-color-base-contrast-light-accent-disabled: var(--g-color-private-white-70); --g-color-base-contrast-dark: var(--g-color-private-black-1000-solid); --g-color-base-contrast-dark-hover: var(--g-color-private-black-750); --g-color-base-contrast-dark-simple-hover: var(--g-color-private-black-50); --g-color-base-contrast-dark-accent-disabled: var(--g-color-private-black-70); --g-color-base-float: var(--g-color-private-white-200-solid); --g-color-base-float-hover: var(--g-color-private-black-50-solid); --g-color-base-float-medium: var(--g-color-private-black-550-solid); --g-color-base-float-heavy: var(--g-color-private-black-700-solid); --g-color-base-float-accent: var(--g-color-private-white-1000-solid); --g-color-base-float-accent-hover: var(--g-color-private-white-850); --g-color-base-float-announcement: var(--g-color-private-cool-grey-50-solid); --g-color-base-modal: var(--g-color-base-background); --g-color-line-generic: var(--g-color-private-black-100); --g-color-line-generic-hover: var(--g-color-private-black-150); --g-color-line-generic-active: var(--g-color-private-black-300); --g-color-line-generic-accent: var(--g-color-private-black-150); --g-color-line-generic-accent-hover: var(--g-color-private-black-300); --g-color-line-generic-solid: var(--g-color-private-black-100-solid); --g-color-line-contrast: var(--g-color-private-black-100); --g-color-line-contrast-inverted: var(--g-color-private-white-250); --g-color-line-contrast-light: var(--g-color-private-white-250); --g-color-line-contrast-dark: var(--g-color-private-black-100); --g-color-line-brand: var(--g-color-private-yellow-600-solid); --g-color-line-focus: var(--g-color-private-cool-grey-450); --g-color-line-light: var(--g-color-private-white-500); --g-color-line-info: var(--g-color-private-blue-450); --g-color-line-positive: var(--g-color-private-green-450); --g-color-line-warning: var(--g-color-private-yellow-600-solid); --g-color-line-danger: var(--g-color-private-red-450); --g-color-line-utility: var(--g-color-private-purple-450); --g-color-line-misc: var(--g-color-private-cool-grey-450); --g-color-sfx-veil: var(--g-color-private-black-250); --g-color-sfx-shadow: var(--g-color-private-black-150); --g-color-sfx-shadow-heavy: var(--g-color-private-black-500); --g-color-sfx-shadow-light: var(--g-color-private-black-50); --g-color-sfx-fade: var(--g-color-private-white-300); --g-color-scroll-track: var(--g-color-base-background); --g-color-scroll-handle: var(--g-color-private-black-100); --g-color-scroll-handle-hover: var(--g-color-private-black-150); --g-color-scroll-corner: var(--g-color-private-black-100); --g-color-infographics-axis: var(--g-color-private-black-150-solid); --g-color-infographics-tooltip-bg: var(--g-color-private-white-950); } .g-root_theme_dark { --g-color-private-white-20: rgb(255 255 255 / 0.02); --g-color-private-white-50: rgb(255 255 255 / 0.05); --g-color-private-white-70: rgb(255 255 255 / 0.07); --g-color-private-white-100: rgb(255 255 255 / 0.1); --g-color-private-white-150: rgb(255 255 255 / 0.15); --g-color-private-white-200: rgb(255 255 255 / 0.2); --g-color-private-white-250: rgb(255 255 255 / 0.25); --g-color-private-white-300: rgb(255 255 255 / 0.3); --g-color-private-white-350: rgb(255 255 255 / 0.35); --g-color-private-white-400: rgb(255 255 255 / 0.4); --g-color-private-white-450: rgb(255 255 255 / 0.45); --g-color-private-white-500: rgb(255 255 255 / 0.5); --g-color-private-white-550: rgb(255 255 255 / 0.55); --g-color-private-white-600: rgb(255 255 255 / 0.6); --g-color-private-white-650: rgb(255 255 255 / 0.65); --g-color-private-white-700: rgb(255 255 255 / 0.7); --g-color-private-white-750: rgb(255 255 255 / 0.75); --g-color-private-white-800: rgb(255 255 255 / 0.8); --g-color-private-white-850: rgb(255 255 255 / 0.85); --g-color-private-white-900: rgb(255 255 255 / 0.9); --g-color-private-white-950: rgb(255 255 255 / 0.95); --g-color-private-white-1000-solid: rgb(255 255 255); --g-color-private-white-950-solid: rgb(244 244 244); --g-color-private-white-900-solid: rgb(233 232 233); --g-color-private-white-850-solid: rgb(222 221 222); --g-color-private-white-800-solid: rgb(211 210 211); --g-color-private-white-750-solid: rgb(200 199 200); --g-color-private-white-700-solid: rgb(189 187 189); --g-color-private-white-650-solid: rgb(178 176 178); --g-color-private-white-600-solid: rgb(167 165 167); --g-color-private-white-550-solid: rgb(156 153 156); --g-color-private-white-500-solid: rgb(145 142 145); --g-color-private-white-450-solid: rgb(133 131 133); --g-color-private-white-400-solid: rgb(122 119 122); --g-color-private-white-350-solid: rgb(111 108 111); --g-color-private-white-300-solid: rgb(100 97 100); --g-color-private-white-250-solid: rgb(89 86 89); --g-color-private-white-200-solid: rgb(78 74 78); --g-color-private-white-150-solid: rgb(67 63 67); --g-color-private-white-100-solid: rgb(56 52 56); --g-color-private-white-50-solid: rgb(45 40 45); --g-color-private-white-70-solid: rgb(49 45 49); --g-color-private-white-20-solid: rgb(38 34 38); --g-color-private-white-opaque-150: rgb(67 63 67 / 0.95); --g-color-private-black-20: rgb(0 0 0 / 0.02); --g-color-private-black-50: rgb(0 0 0 / 0.05); --g-color-private-black-70: rgb(0 0 0 / 0.07); --g-color-private-black-100: rgb(0 0 0 / 0.1); --g-color-private-black-150: rgb(0 0 0 / 0.15); --g-color-private-black-200: rgb(0 0 0 / 0.2); --g-color-private-black-250: rgb(0 0 0 / 0.25); --g-color-private-black-300: rgb(0 0 0 / 0.3); --g-color-private-black-350: rgb(0 0 0 / 0.35); --g-color-private-black-400: rgb(0 0 0 / 0.4); --g-color-private-black-450: rgb(0 0 0 / 0.45); --g-color-private-black-500: rgb(0 0 0 / 0.5); --g-color-private-black-550: rgb(0 0 0 / 0.55); --g-color-private-black-600: rgb(0 0 0 / 0.6); --g-color-private-black-650: rgb(0 0 0 / 0.65); --g-color-private-black-700: rgb(0 0 0 / 0.7); --g-color-private-black-750: rgb(0 0 0 / 0.75); --g-color-private-black-800: rgb(0 0 0 / 0.8); --g-color-private-black-850: rgb(0 0 0 / 0.85); --g-color-private-black-900: rgb(0 0 0 / 0.9); --g-color-private-black-950: rgb(0 0 0 / 0.95); --g-color-private-black-1000-solid: rgb(0 0 0); --g-color-private-black-950-solid: rgb(2 1 2); --g-color-private-black-900-solid: rgb(3 3 3); --g-color-private-black-850-solid: rgb(5 4 5); --g-color-private-black-800-solid: rgb(7 6 7); --g-color-private-black-750-solid: rgb(9 7 9); --g-color-private-black-700-solid: rgb(10 9 10); --g-color-private-black-650-solid: rgb(12 10 12); --g-color-private-black-600-solid: rgb(14 12 14); --g-color-private-black-550-solid: rgb(15 13 15); --g-color-private-black-500-solid: rgb(17 15 17); --g-color-private-black-450-solid: rgb(19 16 19); --g-color-private-black-400-solid: rgb(20 17 20); --g-color-private-black-350-solid: rgb(22 19 22); --g-color-private-black-300-solid: rgb(24 20 24); --g-color-private-black-250-solid: rgb(26 22 26); --g-color-private-black-200-solid: rgb(27 23 27); --g-color-private-black-150-solid: rgb(29 25 29); --g-color-private-black-100-solid: rgb(31 26 31); --g-color-private-black-50-solid: rgb(32 28 32); --g-color-private-black-70-solid: rgb(32 27 32); --g-color-private-black-20-solid: rgb(33 28 33); --g-color-private-orange-50: rgb(200 99 12 / 0.1); --g-color-private-orange-100: rgb(200 99 12 / 0.15); --g-color-private-orange-150: rgb(200 99 12 / 0.2); --g-color-private-orange-200: rgb(200 99 12 / 0.3); --g-color-private-orange-250: rgb(200 99 12 / 0.4); --g-color-private-orange-300: rgb(200 99 12 / 0.5); --g-color-private-orange-350: rgb(200 99 12 / 0.6); --g-color-private-orange-400: rgb(200 99 12 / 0.7); --g-color-private-orange-450: rgb(200 99 12 / 0.8); --g-color-private-orange-500: rgb(200 99 12 / 0.9); --g-color-private-orange-550: rgb(200 99 12); --g-color-private-orange-550-solid: rgb(200 99 12); --g-color-private-orange-1000-solid: rgb(247 232 219); --g-color-private-orange-950-solid: rgb(244 224 206); --g-color-private-orange-900-solid: rgb(239 208 182); --g-color-private-orange-850-solid: rgb(233 193 158); --g-color-private-orange-800-solid: rgb(228 177 134); --g-color-private-orange-750-solid: rgb(222 161 109); --g-color-private-orange-700-solid: rgb(217 146 85); --g-color-private-orange-650-solid: rgb(211 130 61); --g-color-private-orange-600-solid: rgb(206 115 36); --g-color-private-orange-500-solid: rgb(183 92 14); --g-color-private-orange-450-solid: rgb(167 85 16); --g-color-private-orange-400-solid: rgb(150 78 19); --g-color-private-orange-350-solid: rgb(134 71 21); --g-color-private-orange-300-solid: rgb(117 64 23); --g-color-private-orange-250-solid: rgb(100 57 25); --g-color-private-orange-200-solid: rgb(84 50 27); --g-color-private-orange-150-solid: rgb(67 43 30); --g-color-private-orange-100-solid: rgb(59 40 31); --g-color-private-orange-50-solid: rgb(51 36 32); --g-color-private-green-50: rgb(77 176 155 / 0.1); --g-color-private-green-100: rgb(77 176 155 / 0.15); --g-color-private-green-150: rgb(77 176 155 / 0.2); --g-color-private-green-200: rgb(77 176 155 / 0.3); --g-color-private-green-250: rgb(77 176 155 / 0.4); --g-color-private-green-300: rgb(77 176 155 / 0.5); --g-color-private-green-350: rgb(77 176 155 / 0.6); --g-color-private-green-400: rgb(77 176 155 / 0.7); --g-color-private-green-450: rgb(77 176 155 / 0.8); --g-color-private-green-500: rgb(77 176 155 / 0.9); --g-color-private-green-550: rgb(77 176 155); --g-color-private-green-550-solid: rgb(77 176 155); --g-color-private-green-1000-solid: rgb(228 243 240); --g-color-private-green-950-solid: rgb(219 239 235); --g-color-private-green-900-solid: rgb(202 231 225); --g-color-private-green-850-solid: rgb(184 223 215); --g-color-private-green-800-solid: rgb(166 216 205); --g-color-private-green-750-solid: rgb(148 208 195); --g-color-private-green-700-solid: rgb(130 200 185); --g-color-private-green-650-solid: rgb(113 192 175); --g-color-private-green-600-solid: rgb(95 184 165); --g-color-private-green-500-solid: rgb(73 161 143); --g-color-private-green-450-solid: rgb(68 147 131); --g-color-private-green-400-solid: rgb(64 132 119); --g-color-private-green-350-solid: rgb(60 117 107); --g-color-private-green-300-solid: rgb(56 103 95); --g-color-private-green-250-solid: rgb(51 88 82); --g-color-private-green-200-solid: rgb(47 73 70); --g-color-private-green-150-solid: rgb(43 58 58); --g-color-private-green-100-solid: rgb(40 51 52); --g-color-private-green-50-solid: rgb(38 44 46); --g-color-private-yellow-50: rgb(255 190 92 / 0.1); --g-color-private-yellow-100: rgb(255 190 92 / 0.15); --g-color-private-yellow-150: rgb(255 190 92 / 0.2); --g-color-private-yellow-200: rgb(255 190 92 / 0.3); --g-color-private-yellow-250: rgb(255 190 92 / 0.4); --g-color-private-yellow-300: rgb(255 190 92 / 0.5); --g-color-private-yellow-350: rgb(255 190 92 / 0.6); --g-color-private-yellow-400: rgb(255 190 92 / 0.7); --g-color-private-yellow-450: rgb(255 190 92 / 0.8); --g-color-private-yellow-500: rgb(255 190 92 / 0.9); --g-color-private-yellow-550: rgb(255 190 92); --g-color-private-yellow-550-solid: rgb(255 190 92); --g-color-private-yellow-1000-solid: rgb(255 245 231); --g-color-private-yellow-950-solid: rgb(255 242 222); --g-color-private-yellow-900-solid: rgb(255 236 206); --g-color-private-yellow-850-solid: rgb(255 229 190); --g-color-private-yellow-800-solid: rgb(255 223 174); --g-color-private-yellow-750-solid: rgb(255 216 157); --g-color-private-yellow-700-solid: rgb(255 210 141); --g-color-private-yellow-650-solid: rgb(255 203 125); --g-color-private-yellow-600-solid: rgb(255 197 108); --g-color-private-yellow-500-solid: rgb(233 174 86); --g-color-private-yellow-450-solid: rgb(211 158 80); --g-color-private-yellow-400-solid: rgb(189 142 75); --g-color-private-yellow-350-solid: rgb(167 126 69); --g-color-private-yellow-300-solid: rgb(145 110 63); --g-color-private-yellow-250-solid: rgb(122 93 57); --g-color-private-yellow-200-solid: rgb(100 77 51); --g-color-private-yellow-150-solid: rgb(78 61 46); --g-color-private-yellow-100-solid: rgb(67 53 43); --g-color-private-yellow-50-solid: rgb(56 45 40); --g-color-private-red-50: rgb(229 50 93 / 0.1); --g-color-private-red-100: rgb(229 50 93 / 0.15); --g-color-private-red-150: rgb(229 50 93 / 0.2); --g-color-private-red-200: rgb(229 50 93 / 0.3); --g-color-private-red-250: rgb(229 50 93 / 0.4); --g-color-private-red-300: rgb(229 50 93 / 0.5); --g-color-private-red-350: rgb(229 50 93 / 0.6); --g-color-private-red-400: rgb(229 50 93 / 0.7); --g-color-private-red-450: rgb(229 50 93 / 0.8); --g-color-private-red-500: rgb(229 50 93 / 0.9); --g-color-private-red-550: rgb(229 50 93); --g-color-private-red-550-solid: rgb(229 50 93); --g-color-private-red-1000-solid: rgb(251 224 231); --g-color-private-red-950-solid: rgb(250 214 223); --g-color-private-red-900-solid: rgb(247 194 206); --g-color-private-red-850-solid: rgb(245 173 190); --g-color-private-red-800-solid: rgb(242 153 174); --g-color-private-red-750-solid: rgb(239 132 158); --g-color-private-red-700-solid: rgb(237 112 142); --g-color-private-red-650-solid: rgb(234 91 125); --g-color-private-red-600-solid: rgb(232 71 109); --g-color-private-red-500-solid: rgb(210 48 87); --g-color-private-red-450-solid: rgb(190 46 81); --g-color-private-red-400-solid: rgb(171 44 75); --g-color-private-red-350-solid: rgb(151 42 69); --g-color-private-red-300-solid: rgb(132 40 64); --g-color-private-red-250-solid: rgb(112 37 58); --g-color-private-red-200-solid: rgb(93 35 52); --g-color-private-red-150-solid: rgb(73 33 46); --g-color-private-red-100-solid: rgb(63 32 43); --g-color-private-red-50-solid: rgb(54 31 40); --g-color-private-blue-50: rgb(54 151 241 / 0.1); --g-color-private-blue-100: rgb(54 151 241 / 0.15); --g-color-private-blue-150: rgb(54 151 241 / 0.2); --g-color-private-blue-200: rgb(54 151 241 / 0.3); --g-color-private-blue-250: rgb(54 151 241 / 0.4); --g-color-private-blue-300: rgb(54 151 241 / 0.5); --g-color-private-blue-350: rgb(54 151 241 / 0.6); --g-color-private-blue-400: rgb(54 151 241 / 0.7); --g-color-private-blue-450: rgb(54 151 241 / 0.8); --g-color-private-blue-500: rgb(54 151 241 / 0.9); --g-color-private-blue-550: rgb(54 151 241); --g-color-private-blue-550-solid: rgb(54 151 241); --g-color-private-blue-1000-solid: rgb(225 239 253); --g-color-private-blue-950-solid: rgb(215 234 252); --g-color-private-blue-900-solid: rgb(195 224 251); --g-color-private-blue-850-solid: rgb(175 213 249); --g-color-private-blue-800-solid: rgb(155 203 248); --g-color-private-blue-750-solid: rgb(134 193 247); --g-color-private-blue-700-solid: rgb(114 182 245); --g-color-private-blue-650-solid: rgb(94 172 244); --g-color-private-blue-600-solid: rgb(74 161 242); --g-color-private-blue-500-solid: rgb(52 139 220); --g-color-private-blue-450-solid: rgb(50 127 200); --g-color-private-blue-400-solid: rgb(48 114 179); --g-color-private-blue-350-solid: rgb(46 102 158); --g-color-private-blue-300-solid: rgb(44 90 138); --g-color-private-blue-250-solid: rgb(42 78 117); --g-color-private-blue-200-solid: rgb(40 66 96); --g-color-private-blue-150-solid: rgb(38 53 75); --g-color-private-blue-100-solid: rgb(37 47 65); --g-color-private-blue-50-solid: rgb(36 41 55); --g-color-private-cool-grey-50: rgb(96 128 156 / 0.1); --g-color-private-cool-grey-100: rgb(96 128 156 / 0.15); --g-color-private-cool-grey-150: rgb(96 128 156 / 0.2); --g-color-private-cool-grey-200: rgb(96 128 156 / 0.3); --g-color-private-cool-grey-250: rgb(96 128 156 / 0.4); --g-color-private-cool-grey-300: rgb(96 128 156 / 0.5); --g-color-private-cool-grey-350: rgb(96 128 156 / 0.6); --g-color-private-cool-grey-400: rgb(96 128 156 / 0.7); --g-color-private-cool-grey-450: rgb(96 128 156 / 0.8); --g-color-private-cool-grey-500: rgb(96 128 156 / 0.9); --g-color-private-cool-grey-550: rgb(96 128 156); --g-color-private-cool-grey-550-solid: rgb(96 128 156); --g-color-private-cool-grey-1000-solid: rgb(231 236 240); --g-color-private-cool-grey-950-solid: rgb(223 230 235); --g-color-private-cool-grey-900-solid: rgb(207 217 225); --g-color-private-cool-grey-850-solid: rgb(191 204 215); --g-color-private-cool-grey-800-solid: rgb(176 192 206); --g-color-private-cool-grey-750-solid: rgb(160 179 196); --g-color-private-cool-grey-700-solid: rgb(144 166 186); --g-color-private-cool-grey-650-solid: rgb(128 153 176); --g-color-private-cool-grey-600-solid: rgb(112 141 166); --g-color-private-cool-grey-500-solid: rgb(90 118 144); --g-color-private-cool-grey-450-solid: rgb(84 108 132); --g-color-private-cool-grey-400-solid: rgb(77 98 119); --g-color-private-cool-grey-350-solid: rgb(71 88 107); --g-color-private-cool-grey-300-solid: rgb(65 79 95); --g-color-private-cool-grey-250-solid: rgb(59 69 83); --g-color-private-cool-grey-200-solid: rgb(53 59 71); --g-color-private-cool-grey-150-solid: rgb(46 49 58); --g-color-private-cool-grey-100-solid: rgb(43 44 52); --g-color-private-cool-grey-50-solid: rgb(40 39 46); --g-color-private-purple-50: rgb(143 82 204 / 0.1); --g-color-private-purple-100: rgb(143 82 204 / 0.15); --g-color-private-purple-150: rgb(143 82 204 / 0.2); --g-color-private-purple-200: rgb(143 82 204 / 0.3); --g-color-private-purple-250: rgb(143 82 204 / 0.4); --g-color-private-purple-300: rgb(143 82 204 / 0.5); --g-color-private-purple-350: rgb(143 82 204 / 0.6); --g-color-private-purple-400: rgb(143 82 204 / 0.7); --g-color-private-purple-450: rgb(143 82 204 / 0.8); --g-color-private-purple-500: rgb(143 82 204 / 0.9); --g-color-private-purple-550: rgb(143 82 204); --g-color-private-purple-550-solid: rgb(143 82 204); --g-color-private-purple-1000-solid: rgb(238 229 247); --g-color-private-purple-950-solid: rgb(233 220 245); --g-color-private-purple-900-solid: rgb(221 203 240); --g-color-private-purple-850-solid: rgb(210 186 235); --g-color-private-purple-800-solid: rgb(199 169 230); --g-color-private-purple-750-solid: rgb(188 151 224); --g-color-private-purple-700-solid: rgb(177 134 219); --g-color-private-purple-650-solid: rgb(165 117 214); --g-color-private-purple-600-solid: rgb(154 99 209); --g-color-private-purple-500-solid: rgb(132 77 187); --g-color-private-purple-450-solid: rgb(121 71 170); --g-color-private-purple-400-solid: rgb(110 66 153); --g-color-private-purple-350-solid: rgb(99 61 136); --g-color-private-purple-300-solid: rgb(89 56 119); --g-color-private-purple-250-solid: rgb(78 50 102); --g-color-private-purple-200-solid: rgb(67 45 85); --g-color-private-purple-150-solid: rgb(56 40 68); --g-color-private-purple-100-solid: rgb(50 37 60); --g-color-private-purple-50-solid: rgb(45 34 51); --g-color-text-brand: var(--g-color-private-yellow-600-solid); --g-color-text-brand-heavy: var(--g-color-private-yellow-700-solid); --g-color-text-brand-contrast: var(--g-color-text-dark-primary); --g-color-text-link: var(--g-color-private-yellow-550-solid); --g-color-text-link-hover: var(--g-color-private-orange-550-solid); --g-color-text-link-visited: var(--g-color-private-purple-600-solid); --g-color-text-link-visited-hover: var(--g-color-private-purple-750-solid); --g-color-text-info: var(--g-color-private-blue-550-solid); --g-color-text-positive: var(--g-color-private-green-550-solid); --g-color-text-warning: var(--g-color-private-yellow-550-solid); --g-color-text-danger: var(--g-color-private-red-550-solid); --g-color-text-utility: var(--g-color-private-purple-600-solid); --g-color-text-misc: var(--g-color-private-cool-grey-600-solid); --g-color-text-info-heavy: var(--g-color-private-blue-600-solid); --g-color-text-positive-heavy: var(--g-color-private-green-600-solid); --g-color-text-warning-heavy: var(--g-color-private-yellow-600-solid); --g-color-text-danger-heavy: var(--g-color-private-red-600-solid); --g-color-text-utility-heavy: var(--g-color-private-purple-650-solid); --g-color-text-misc-heavy: var(--g-color-private-cool-grey-650-solid); --g-color-text-primary: var(--g-color-text-light-primary); --g-color-text-complementary: var(--g-color-text-light-complementary); --g-color-text-secondary: var(--g-color-text-light-secondary); --g-color-text-hint: var(--g-color-text-light-hint); --g-color-text-dark-primary: var(--g-color-private-black-900); --g-color-text-dark-complementary: var(--g-color-private-black-700); --g-color-text-dark-secondary: var(--g-color-private-black-500); --g-color-text-dark-hint: var(--g-color-private-black-300); --g-color-text-light-primary: var(--g-color-private-white-850); --g-color-text-light-complementary: var(--g-color-private-white-700); --g-color-text-light-secondary: var(--g-color-private-white-500); --g-color-text-light-hint: var(--g-color-private-white-300); --g-color-text-inverted-primary: var(--g-color-text-dark-primary); --g-color-text-inverted-complementary: var(--g-color-text-dark-complementary); --g-color-text-inverted-secondary: var(--g-color-text-dark-secondary); --g-color-text-inverted-hint: var(--g-color-text-dark-hint); --g-color-base-background: rgb(34,29,34); --g-color-base-brand: var(--g-color-private-yellow-550-solid); --g-color-base-brand-hover: var(--g-color-private-yellow-650-solid); --g-color-base-selection: var(--g-color-private-yellow-150); --g-color-base-selection-hover: var(--g-color-private-yellow-200); --g-color-base-generic: var(--g-color-private-white-100); --g-color-base-generic-hover: var(--g-color-private-white-150); --g-color-base-generic-medium: var(--g-color-private-white-250); --g-color-base-generic-medium-hover: var(--g-color-private-white-300); --g-color-base-generic-accent: var(--g-color-private-white-150); --g-color-base-generic-accent-disabled: var(--g-color-private-white-70); --g-color-base-generic-ultralight: var(--g-color-private-white-20-solid); --g-color-base-simple-hover: var(--g-color-private-white-100); --g-color-base-simple-hover-solid: var(--g-color-private-white-100-solid); --g-color-base-info-light: var(--g-color-private-blue-150); --g-color-base-info-light-hover: var(--g-color-private-blue-200); --g-color-base-info-medium: var(--g-color-private-blue-300); --g-color-base-info-medium-hover: var(--g-color-private-blue-400); --g-color-base-info-heavy: var(--g-color-private-blue-600-solid); --g-color-base-info-heavy-hover: var(--g-color-private-blue-700-solid); --g-color-base-positive-light: var(--g-color-private-green-150); --g-color-base-positive-light-hover: var(--g-color-private-green-200); --g-color-base-positive-medium: var(--g-color-private-green-300); --g-color-base-positive-medium-hover: var(--g-color-private-green-400); --g-color-base-positive-heavy: var(--g-color-private-green-600-solid); --g-color-base-positive-heavy-hover: var(--g-color-private-green-700-solid); --g-color-base-warning-light: var(--g-color-private-yellow-150); --g-color-base-warning-light-hover: var(--g-color-private-yellow-200); --g-color-base-warning-medium: var(--g-color-private-yellow-300); --g-color-base-warning-medium-hover: var(--g-color-private-yellow-400); --g-color-base-warning-heavy: var(--g-color-private-yellow-600-solid); --g-color-base-warning-heavy-hover: var(--g-color-private-yellow-700-solid); --g-color-base-danger-light: var(--g-color-private-red-150); --g-color-base-danger-light-hover: var(--g-color-private-red-200); --g-color-base-danger-medium: var(--g-color-private-red-300); --g-color-base-danger-medium-hover: var(--g-color-private-red-400); --g-color-base-danger-heavy: var(--g-color-private-red-600-solid); --g-color-base-danger-heavy-hover: var(--g-color-private-red-700-solid); --g-color-base-utility-light: var(--g-color-private-purple-150); --g-color-base-utility-light-hover: var(--g-color-private-purple-250); --g-color-base-utility-medium: var(--g-color-private-purple-300); --g-color-base-utility-medium-hover: var(--g-color-private-purple-400); --g-color-base-utility-heavy: var(--g-color-private-purple-600-solid); --g-color-base-utility-heavy-hover: var(--g-color-private-purple-700-solid); --g-color-base-neutral-light: var(--g-color-private-white-100); --g-color-base-neutral-light-hover: var(--g-color-private-white-150); --g-color-base-neutral-medium: var(--g-color-private-white-250); --g-color-base-neutral-medium-hover: var(--g-color-private-white-350); --g-color-base-neutral-heavy: var(--g-color-private-white-550); --g-color-base-neutral-heavy-hover: var(--g-color-private-white-650); --g-color-base-misc-light: var(--g-color-private-cool-grey-150); --g-color-base-misc-light-hover: var(--g-color-private-cool-grey-200); --g-color-base-misc-medium: var(--g-color-private-cool-grey-300); --g-color-base-misc-medium-hover: var(--g-color-private-cool-grey-400); --g-color-base-misc-heavy: var(--g-color-private-cool-grey-600-solid); --g-color-base-misc-heavy-hover: var(--g-color-private-cool-grey-700-solid); --g-color-base-contrast: var(--g-color-private-white-850); --g-color-base-contrast-hover: var(--g-color-private-white-700); --g-color-base-contrast-simple-hover: var(--g-color-private-white-150); --g-color-base-contrast-accent-disabled: var(--g-color-private-white-70); --g-color-base-contrast-inverted: var(--g-color-private-black-850); --g-color-base-contrast-inverted-hover: var(--g-color-private-black-700); --g-color-base-contrast-inverted-simple-hover: var(--g-color-private-black-50); --g-color-base-contrast-inverted-accent-disabled: var(--g-color-private-black-70); --g-color-base-contrast-light: var(--g-color-private-white-850); --g-color-base-contrast-light-hover: var(--g-color-private-white-700); --g-color-base-contrast-light-simple-hover: var(--g-color-private-white-150); --g-color-base-contrast-light-accent-disabled: var(--g-color-private-white-70); --g-color-base-contrast-dark: var(--g-color-private-black-850); --g-color-base-contrast-dark-hover: var(--g-color-private-black-700); --g-color-base-contrast-dark-simple-hover: var(--g-color-private-black-50); --g-color-base-contrast-dark-accent-disabled: var(--g-color-private-black-70); --g-color-base-float: var(--g-color-private-white-100-solid); --g-color-base-float-hover: var(--g-color-private-white-150-solid); --g-color-base-float-medium: var(--g-color-private-white-150-solid); --g-color-base-float-heavy: var(--g-color-private-white-250-solid); --g-color-base-float-accent: var(--g-color-private-white-150-solid); --g-color-base-float-accent-hover: var(--g-color-private-white-200-solid); --g-color-base-float-announcement: var(--g-color-private-white-150-solid); --g-color-base-modal: var(--g-color-base-background); --g-color-line-generic: var(--g-color-private-white-150); --g-color-line-generic-hover: var(--g-color-private-white-250); --g-color-line-generic-active: var(--g-color-private-white-300); --g-color-line-generic-accent: var(--g-color-private-white-150); --g-color-line-generic-accent-hover: var(--g-color-private-white-300); --g-color-line-generic-solid: var(--g-color-private-white-150-solid); --g-color-line-contrast: var(--g-color-private-white-250); --g-color-line-contrast-inverted: var(--g-color-private-black-100); --g-color-line-contrast-light: var(--g-color-private-white-250); --g-color-line-contrast-dark: var(--g-color-private-black-100); --g-color-line-brand: var(--g-color-private-yellow-600-solid); --g-color-line-focus: var(--g-color-private-cool-grey-450); --g-color-line-light: var(--g-color-private-white-500); --g-color-line-info: var(--g-color-private-blue-450); --g-color-line-positive: var(--g-color-private-green-450); --g-color-line-warning: var(--g-color-private-yellow-450); --g-color-line-danger: var(--g-color-private-red-450); --g-color-line-utility: var(--g-color-private-purple-450); --g-color-line-misc: var(--g-color-private-cool-grey-450); --g-color-sfx-veil: var(--g-color-private-black-600); --g-color-sfx-shadow: var(--g-color-private-black-200); --g-color-sfx-shadow-heavy: var(--g-color-private-black-500); --g-color-sfx-shadow-light: var(--g-color-private-black-200); --g-color-sfx-fade: var(--g-color-private-white-250); --g-color-scroll-track: var(--g-color-base-background); --g-color-scroll-handle: var(--g-color-private-white-150); --g-color-scroll-handle-hover: var(--g-color-private-white-250); --g-color-scroll-corner: var(--g-color-private-white-150); --g-color-infographics-axis: var(--g-color-private-white-150-solid); --g-color-infographics-tooltip-bg: var(--g-color-private-white-opaque-150); } /* stylelint-disable */ /* * GENERATED by scripts/generate-theme-scss.mjs — DO NOT EDIT. * Source: @gravity-ui/uikit-themer DEFAULT_THEME + styles/themes/theme-data/hc.ts * Regenerate with `npm run generate:theme`. */ .g-root_theme_light-hc { --g-color-private-black-20: rgb(0 0 0 / 0.02); --g-color-private-black-50: rgb(0 0 0 / 0.05); --g-color-private-black-70: rgb(0 0 0 / 0.07); --g-color-private-black-100: rgb(0 0 0 / 0.1); --g-color-private-black-150: rgb(0 0 0 / 0.15); --g-color-private-black-200: rgb(0 0 0 / 0.2); --g-color-private-black-250: rgb(0 0 0 / 0.25); --g-color-private-black-300: rgb(0 0 0 / 0.3); --g-color-private-black-350: rgb(0 0 0 / 0.35); --g-color-private-black-400: rgb(0 0 0 / 0.4); --g-color-private-black-450: rgb(0 0 0 / 0.45); --g-color-private-black-500: rgb(0 0 0 / 0.5); --g-color-private-black-550: rgb(0 0 0 / 0.55); --g-color-private-black-600: rgb(0 0 0 / 0.6); --g-color-private-black-650: rgb(0 0 0 / 0.65); --g-color-private-black-700: rgb(0 0 0 / 0.7); --g-color-private-black-750: rgb(0 0 0 / 0.75); --g-color-private-black-800: rgb(0 0 0 / 0.8); --g-color-private-black-850: rgb(0 0 0 / 0.85); --g-color-private-black-900: rgb(0 0 0 / 0.9); --g-color-private-black-950: rgb(0 0 0 / 0.95); --g-color-private-black-1000-solid: rgb(0 0 0); --g-color-private-black-950-solid: rgb(13 13 13); --g-color-private-black-900-solid: rgb(26 26 26); --g-color-private-black-850-solid: rgb(38 38 38); --g-color-private-black-800-solid: rgb(51 51 51); --g-color-private-black-750-solid: rgb(64 64 64); --g-color-private-black-700-solid: rgb(76 76 76); --g-color-private-black-650-solid: rgb(89 89 89); --g-color-private-black-600-solid: rgb(102 102 102); --g-color-private-black-550-solid: rgb(115 115 115); --g-color-private-black-500-solid: rgb(128 128 128); --g-color-private-black-450-solid: rgb(140 140 140); --g-color-private-black-400-solid: rgb(153 153 153); --g-color-private-black-350-solid: rgb(166 166 166); --g-color-private-black-300-solid: rgb(179 179 179); --g-color-private-black-250-solid: rgb(191 191 191); --g-color-private-black-200-solid: rgb(204 204 204); --g-color-private-black-150-solid: rgb(217 217 217); --g-color-private-black-100-solid: rgb(229 229 229); --g-color-private-black-50-solid: rgb(242 242 242); --g-color-private-black-20-solid: rgb(250 250 250); --g-color-private-blue-50: rgb(54 151 241 / 0.1); --g-color-private-blue-100: rgb(54 151 241 / 0.15); --g-color-private-blue-150: rgb(54 151 241 / 0.2); --g-color-private-blue-200: rgb(54 151 241 / 0.3); --g-color-private-blue-250: rgb(54 151 241 / 0.4); --g-color-private-blue-300: rgb(54 151 241 / 0.5); --g-color-private-blue-350: rgb(54 151 241 / 0.6); --g-color-private-blue-400: rgb(54 151 241 / 0.7); --g-color-private-blue-450: rgb(54 151 241 / 0.8); --g-color-private-blue-500: rgb(54 151 241 / 0.9); --g-color-private-blue-550: rgb(54 151 241); --g-color-private-blue-550-solid: rgb(54 151 241); --g-color-private-blue-1000-solid: rgb(23 37 51); --g-color-private-blue-950-solid: rgb(25 44 63); --g-color-private-blue-900-solid: rgb(29 57 85); --g-color-private-blue-850-solid: rgb(32 71 107); --g-color-private-blue-800-solid: rgb(36 84 130); --g-color-private-blue-750-solid: rgb(40 97 152); --g-color-private-blue-700-solid: rgb(43 111 174); --g-color-private-blue-650-solid: rgb(47 124 196); --g-color-private-blue-600-solid: rgb(50 138 219); --g-color-private-blue-500-solid: rgb(74 161 242); --g-color-private-blue-450-solid: rgb(94 172 244); --g-color-private-blue-400-solid: rgb(114 182 245); --g-color-private-blue-350-solid: rgb(134 193 247); --g-color-private-blue-300-solid: rgb(155 203 248); --g-color-private-blue-250-solid: rgb(175 213 249); --g-color-private-blue-200-solid: rgb(195 224 251); --g-color-private-blue-150-solid: rgb(215 234 252); --g-color-private-blue-100-solid: rgb(225 239 253); --g-color-private-blue-50-solid: rgb(235 245 254); --g-color-private-cool-grey-50: rgb(107 132 153 / 0.1); --g-color-private-cool-grey-100: rgb(107 132 153 / 0.15); --g-color-private-cool-grey-150: rgb(107 132 153 / 0.2); --g-color-private-cool-grey-200: rgb(107 132 153 / 0.3); --g-color-private-cool-grey-250: rgb(107 132 153 / 0.4); --g-color-private-cool-grey-300: rgb(107 132 153 / 0.5); --g-color-private-cool-grey-350: rgb(107 132 153 / 0.6); --g-color-private-cool-grey-400: rgb(107 132 153 / 0.7); --g-color-private-cool-grey-450: rgb(107 132 153 / 0.8); --g-color-private-cool-grey-500: rgb(107 132 153 / 0.9); --g-color-private-cool-grey-550: rgb(107 132 153); --g-color-private-cool-grey-550-solid: rgb(107 132 153); --g-color-private-cool-grey-1000-solid: rgb(31 34 38); --g-color-private-cool-grey-950-solid: rgb(36 40 45); --g-color-private-cool-grey-900-solid: rgb(45 52 59); --g-color-private-cool-grey-850-solid: rgb(54 63 72); --g-color-private-cool-grey-800-solid: rgb(63 75 86); --g-color-private-cool-grey-750-solid: rgb(71 86 99); --g-color-private-cool-grey-700-solid: rgb(80 98 113); --g-color-private-cool-grey-650-solid: rgb(89 109 126); --g-color-private-cool-grey-600-solid: rgb(98 121 140); --g-color-private-cool-grey-500-solid: rgb(122 144 163); --g-color-private-cool-grey-450-solid: rgb(137 157 173); --g-color-private-cool-grey-400-solid: rgb(151 169 184); --g-color-private-cool-grey-350-solid: rgb(166 181 194); --g-color-private-cool-grey-300-solid: rgb(181 194 204); --g-color-private-cool-grey-250-solid: rgb(196 206 214); --g-color-private-cool-grey-200-solid: rgb(211 218 224); --g-color-private-cool-grey-150-solid: rgb(225 230 235); --g-color-private-cool-grey-100-solid: rgb(233 237 240); --g-color-private-cool-grey-50-solid: rgb(240 243 245); --g-color-private-green-50: rgb(50 186 118 / 0.1); --g-color-private-green-100: rgb(50 186 118 / 0.15); --g-color-private-green-150: rgb(50 186 118 / 0.2); --g-color-private-green-200: rgb(50 186 118 / 0.3); --g-color-private-green-250: rgb(50 186 118 / 0.4); --g-color-private-green-300: rgb(50 186 118 / 0.5); --g-color-private-green-350: rgb(50 186 118 / 0.6); --g-color-private-green-400: rgb(50 186 118 / 0.7); --g-color-private-green-450: rgb(50 186 118 / 0.8); --g-color-private-green-500: rgb(50 186 118 / 0.9); --g-color-private-green-550: rgb(50 186 118); --g-color-private-green-550-solid: rgb(50 186 118); --g-color-private-green-1000-solid: rgb(23 42 33); --g-color-private-green-950-solid: rgb(24 51 38); --g-color-private-green-900-solid: rgb(28 68 48); --g-color-private-green-850-solid: rgb(31 85 58); --g-color-private-green-800-solid: rgb(34 102 68); --g-color-private-green-750-solid: rgb(37 118 78); --g-color-private-green-700-solid: rgb(40 135 88); --g-color-private-green-650-solid: rgb(44 152 98); --g-color-private-green-600-solid: rgb(47 169 108); --g-color-private-green-500-solid: rgb(71 193 132); --g-color-private-green-450-solid: rgb(91 200 145); --g-color-private-green-400-solid: rgb(112 207 159); --g-color-private-green-350-solid: rgb(132 214 173); --g-color-private-green-300-solid: rgb(153 221 187); --g-color-private-green-250-solid: rgb(173 227 200); --g-color-private-green-200-solid: rgb(194 234 214); --g-color-private-green-150-solid: rgb(214 241 228); --g-color-private-green-100-solid: rgb(224 245 234); --g-color-private-green-50-solid: rgb(235 248 241); --g-color-private-orange-50: rgb(255 119 0 / 0.1); --g-color-private-orange-100: rgb(255 119 0 / 0.15); --g-color-private-orange-150: rgb(255 119 0 / 0.2); --g-color-private-orange-200: rgb(255 119 0 / 0.3); --g-color-private-orange-250: rgb(255 119 0 / 0.4); --g-color-private-orange-300: rgb(255 119 0 / 0.5); --g-color-private-orange-350: rgb(255 119 0 / 0.6); --g-color-private-orange-400: rgb(255 119 0 / 0.7); --g-color-private-orange-450: rgb(255 119 0 / 0.8); --g-color-private-orange-500: rgb(255 119 0 / 0.9); --g-color-private-orange-550: rgb(255 119 0); --g-color-private-orange-550-solid: rgb(255 119 0); --g-color-private-orange-1000-solid: rgb(54 32 15); --g-color-private-orange-950-solid: rgb(65 37 14); --g-color-private-orange-900-solid: rgb(89 48 13); --g-color-private-orange-850-solid: rgb(113 58 11); --g-color-private-orange-800-solid: rgb(137 68 9); --g-color-private-orange-750-solid: rgb(160 78 7); --g-color-private-orange-700-solid: rgb(184 88 5); --g-color-private-orange-650-solid: rgb(208 99 4); --g-color-private-orange-600-solid: rgb(231 109 2); --g-color-private-orange-500-solid: rgb(255 133 25); --g-color-private-orange-450-solid: rgb(255 146 51); --g-color-private-orange-400-solid: rgb(255 160 77); --g-color-private-orange-350-solid: rgb(255 173 102); --g-color-private-orange-300-solid: rgb(255 187 128); --g-color-private-orange-250-solid: rgb(255 201 153); --g-color-private-orange-200-solid: rgb(255 214 179); --g-color-private-orange-150-solid: rgb(255 228 204); --g-color-private-orange-100-solid: rgb(255 235 217); --g-color-private-orange-50-solid: rgb(255 241 230); --g-color-private-purple-50: rgb(143 82 204 / 0.1); --g-color-private-purple-100: rgb(143 82 204 / 0.15); --g-color-private-purple-150: rgb(143 82 204 / 0.2); --g-color-private-purple-200: rgb(143 82 204 / 0.3); --g-color-private-purple-250: rgb(143 82 204 / 0.4); --g-color-private-purple-300: rgb(143 82 204 / 0.5); --g-color-private-purple-350: rgb(143 82 204 / 0.6); --g-color-private-purple-400: rgb(143 82 204 / 0.7); --g-color-private-purple-450: rgb(143 82 204 / 0.8); --g-color-private-purple-500: rgb(143 82 204 / 0.9); --g-color-private-purple-550: rgb(143 82 204); --g-color-private-purple-550-solid: rgb(143 82 204); --g-color-private-purple-1000-solid: rgb(37 27 46); --g-color-private-purple-950-solid: rgb(43 30 55); --g-color-private-purple-900-solid: rgb(56 37 74); --g-color-private-purple-850-solid: rgb(68 43 92); --g-color-private-purple-800-solid: rgb(81 50 111); --g-color-private-purple-750-solid: rgb(93 56 130); --g-color-private-purple-700-solid: rgb(106 63 148); --g-color-private-purple-650-solid: rgb(118 69 167); --g-color-private-purple-600-solid: rgb(131 76 185); --g-color-private-purple-500-solid: rgb(154 99 209); --g-color-private-purple-450-solid: rgb(165 117 214); --g-color-private-purple-400-solid: rgb(177 134 219); --g-color-private-purple-350-solid: rgb(188 151 224); --g-color-private-purple-300-solid: rgb(199 169 230); --g-color-private-purple-250-solid: rgb(210 186 235); --g-color-private-purple-200-solid: rgb(221 203 240); --g-color-private-purple-150-solid: rgb(233 220 245); --g-color-private-purple-100-solid: rgb(238 229 247); --g-color-private-purple-50-solid: rgb(244 238 250); --g-color-private-red-50: rgb(255 0 61 / 0.1); --g-color-private-red-100: rgb(255 0 61 / 0.15); --g-color-private-red-150: rgb(255 0 61 / 0.2); --g-color-private-red-200: rgb(255 0 61 / 0.3); --g-color-private-red-250: rgb(255 0 61 / 0.4); --g-color-private-red-300: rgb(255 0 61 / 0.5); --g-color-private-red-350: rgb(255 0 61 / 0.6); --g-color-private-red-400: rgb(255 0 61 / 0.7); --g-color-private-red-450: rgb(255 0 61 / 0.8); --g-color-private-red-500: rgb(255 0 61 / 0.9); --g-color-private-red-550: rgb(255 0 61); --g-color-private-red-550-solid: rgb(255 0 61); --g-color-private-red-1000-solid: rgb(54 14 24); --g-color-private-red-950-solid: rgb(65 14 27); --g-color-private-red-900-solid: rgb(89 12 31); --g-color-private-red-850-solid: rgb(113 10 35); --g-color-private-red-800-solid: rgb(137 9 40); --g-color-private-red-750-solid: rgb(160 7 44); --g-color-private-red-700-solid: rgb(184 5 48); --g-color-private-red-650-solid: rgb(208 3 52); --g-color-private-red-600-solid: rgb(231 2 57); --g-color-private-red-500-solid: rgb(255 25 80); --g-color-private-red-450-solid: rgb(255 51 100); --g-color-private-red-400-solid: rgb(255 77 119); --g-color-private-red-350-solid: rgb(255 102 139); --g-color-private-red-300-solid: rgb(255 128 158); --g-color-private-red-250-solid: rgb(255 153 177); --g-color-private-red-200-solid: rgb(255 179 197); --g-color-private-red-150-solid: rgb(255 204 216); --g-color-private-red-100-solid: rgb(255 217 226); --g-color-private-red-50-solid: rgb(255 230 236); --g-color-private-white-20: rgb(255 255 255 / 0.02); --g-color-private-white-50: rgb(255 255 255 / 0.05); --g-color-private-white-70: rgb(255 255 255 / 0.07); --g-color-private-white-100: rgb(255 255 255 / 0.1); --g-color-private-white-150: rgb(255 255 255 / 0.15); --g-color-private-white-200: rgb(255 255 255 / 0.2); --g-color-private-white-250: rgb(255 255 255 / 0.25); --g-color-private-white-300: rgb(255 255 255 / 0.3); --g-color-private-white-350: rgb(255 255 255 / 0.35); --g-color-private-white-400: rgb(255 255 255 / 0.4); --g-color-private-white-450: rgb(255 255 255 / 0.45); --g-color-private-white-500: rgb(255 255 255 / 0.5); --g-color-private-white-550: rgb(255 255 255 / 0.55); --g-color-private-white-600: rgb(255 255 255 / 0.6); --g-color-private-white-650: rgb(255 255 255 / 0.65); --g-color-private-white-700: rgb(255 255 255 / 0.7); --g-color-private-white-750: rgb(255 255 255 / 0.75); --g-color-private-white-800: rgb(255 255 255 / 0.8); --g-color-private-white-850: rgb(255 255 255 / 0.85); --g-color-private-white-900: rgb(255 255 255 / 0.9); --g-color-private-white-950: rgb(255 255 255 / 0.95); --g-color-private-white-1000-solid: rgb(255 255 255); --g-color-private-yellow-50: rgb(255 190 92 / 0.1); --g-color-private-yellow-100: rgb(255 190 92 / 0.15); --g-color-private-yellow-150: rgb(255 190 92 / 0.2); --g-color-private-yellow-200: rgb(255 190 92 / 0.3); --g-color-private-yellow-250: rgb(255 190 92 / 0.4); --g-color-private-yellow-300: rgb(255 190 92 / 0.5); --g-color-private-yellow-350: rgb(255 190 92 / 0.6); --g-color-private-yellow-400: rgb(255 190 92 / 0.7); --g-color-private-yellow-450: rgb(255 190 92 / 0.8); --g-color-private-yellow-500: rgb(255 190 92 / 0.9); --g-color-private-yellow-550: rgb(255 190 92); --g-color-private-yellow-550-solid: rgb(255 190 92); --g-color-private-yellow-1000-solid: rgb(54 43 29); --g-color-private-yellow-950-solid: rgb(65 52 33); --g-color-private-yellow-900-solid: rgb(89 69 40); --g-color-private-yellow-850-solid: rgb(113 86 48); --g-color-private-yellow-800-solid: rgb(137 104 55); --g-color-private-yellow-750-solid: rgb(160 121 62); --g-color-private-yellow-700-solid: rgb(184 138 70); --g-color-private-yellow-650-solid: rgb(208 155 77); --g-color-private-yellow-600-solid: rgb(231 173 85); --g-color-private-yellow-500-solid: rgb(255 197 108); --g-color-private-yellow-450-solid: rgb(255 203 125); --g-color-private-yellow-400-solid: rgb(255 210 141); --g-color-private-yellow-350-solid: rgb(255 216 157); --g-color-private-yellow-300-solid: rgb(255 223 174); --g-color-private-yellow-250-solid: rgb(255 229 190); --g-color-private-yellow-200-solid: rgb(255 236 206); --g-color-private-yellow-150-solid: rgb(255 242 222); --g-color-private-yellow-100-solid: rgb(255 245 231); --g-color-private-yellow-50-solid: rgb(255 249 239); --g-color-base-background: var(--g-color-private-white-1000-solid); --g-color-base-brand: var(--g-color-private-yellow-550-solid); --g-color-base-brand-hover: var(--g-color-private-yellow-650-solid); --g-color-base-danger-heavy: var(--g-color-private-red-700-solid); --g-color-base-danger-heavy-hover: var(--g-color-private-red-800-solid); --g-color-base-danger-light: var(--g-color-private-red-250); --g-color-base-danger-light-hover: var(--g-color-private-red-350); --g-color-base-danger-medium: var(--g-color-private-red-400); --g-color-base-danger-medium-hover: var(--g-color-private-red-500); --g-color-base-float: var(--g-color-private-white-1000-solid); --g-color-base-float-accent: var(--g-color-private-white-1000-solid); --g-color-base-float-accent-hover: var(--g-color-private-white-850); --g-color-base-float-announcement: var(--g-color-private-cool-grey-150-solid); --g-color-base-float-heavy: var(--g-color-private-black-700-solid); --g-color-base-float-hover: var(--g-color-private-black-150-solid); --g-color-base-float-medium: var(--g-color-private-black-550-solid); --g-color-base-generic: var(--g-color-private-black-150); --g-color-base-generic-accent: var(--g-color-private-black-250); --g-color-base-generic-accent-disabled: var(--g-color-private-black-150); --g-color-base-generic-hover: var(--g-color-private-black-300); --g-color-base-generic-medium: var(--g-color-private-black-250); --g-color-base-generic-medium-hover: var(--g-color-private-black-350); --g-color-base-generic-ultralight: var(--g-color-private-black-50-solid); --g-color-base-info-heavy: var(--g-color-private-blue-700-solid); --g-color-base-info-heavy-hover: var(--g-color-private-blue-850-solid); --g-color-base-info-light: var(--g-color-private-blue-250); --g-color-base-info-light-hover: var(--g-color-private-blue-350); --g-color-base-info-medium: var(--g-color-private-blue-400); --g-color-base-info-medium-hover: var(--g-color-private-blue-500); --g-color-base-contrast: var(--g-color-private-black-1000-solid); --g-color-base-contrast-hover: var(--g-color-private-black-800); --g-color-base-contrast-simple-hover: var(--g-color-private-black-100); --g-color-base-contrast-accent-disabled: var(--g-color-private-black-150); --g-color-base-contrast-inverted: var(--g-color-private-white-1000-solid); --g-color-base-contrast-inverted-hover: var(--g-color-private-white-800); --g-color-base-contrast-inverted-simple-hover: var(--g-color-private-white-300); --g-color-base-contrast-inverted-accent-disabled: var(--g-color-private-white-150); --g-color-base-contrast-light: var(--g-color-private-white-1000-solid); --g-color-base-contrast-light-hover: var(--g-color-private-white-800); --g-color-base-contrast-light-simple-hover: var(--g-color-private-white-300); --g-color-base-contrast-light-accent-disabled: var(--g-color-private-white-150); --g-color-base-contrast-dark: var(--g-color-private-black-1000-solid); --g-color-base-contrast-dark-hover: var(--g-color-private-black-800); --g-color-base-contrast-dark-simple-hover: var(--g-color-private-black-100); --g-color-base-contrast-dark-accent-disabled: var(--g-color-private-black-150); --g-color-base-misc-heavy: var(--g-color-private-cool-grey-700-solid); --g-color-base-misc-heavy-hover: var(--g-color-private-cool-grey-800-solid); --g-color-base-misc-light: var(--g-color-private-cool-grey-250); --g-color-base-misc-light-hover: var(--g-color-private-cool-grey-350); --g-color-base-misc-medium: var(--g-color-private-cool-grey-400); --g-color-base-misc-medium-hover: var(--g-color-private-cool-grey-500); --g-color-base-modal: var(--g-color-base-background); --g-color-base-neutral-heavy: var(--g-color-private-black-550); --g-color-base-neutral-heavy-hover: var(--g-color-private-black-650); --g-color-base-neutral-light: var(--g-color-private-black-150); --g-color-base-neutral-light-hover: var(--g-color-private-black-250); --g-color-base-neutral-medium: var(--g-color-private-black-300); --g-color-base-neutral-medium-hover: var(--g-color-private-black-400); --g-color-base-positive-heavy: var(--g-color-private-green-700-solid); --g-color-base-positive-heavy-hover: var(--g-color-private-green-800-solid); --g-color-base-positive-light: var(--g-color-private-green-250); --g-color-base-positive-light-hover: var(--g-color-private-green-350); --g-color-base-positive-medium: var(--g-color-private-green-400); --g-color-base-positive-medium-hover: var(--g-color-private-green-500); --g-color-base-selection: var(--g-color-private-yellow-300); --g-color-base-selection-hover: var(--g-color-private-yellow-400); --g-color-base-simple-hover: var(--g-color-private-black-150); --g-color-base-simple-hover-solid: var(--g-color-private-black-150-solid); --g-color-base-utility-heavy: var(--g-color-private-purple-700-solid); --g-color-base-utility-heavy-hover: var(--g-color-private-purple-800-solid); --g-color-base-utility-light: var(--g-color-private-purple-250); --g-color-base-utility-light-hover: var(--g-color-private-purple-350); --g-color-base-utility-medium: var(--g-color-private-purple-400); --g-color-base-utility-medium-hover: var(--g-color-private-purple-500); --g-color-base-warning-heavy: var(--g-color-private-yellow-600-solid); --g-color-base-warning-heavy-hover: var(--g-color-private-yellow-700-solid); --g-color-base-warning-light: var(--g-color-private-yellow-300); --g-color-base-warning-light-hover: var(--g-color-private-yellow-400); --g-color-base-warning-medium: var(--g-color-private-yellow-400); --g-color-base-warning-medium-hover: var(--g-color-private-yellow-550-solid); --g-color-infographics-axis: var(--g-color-private-black-150-solid); --g-color-infographics-tooltip-bg: var(--g-color-private-white-950); --g-color-line-brand: var(--g-color-private-yellow-600-solid); --g-color-line-danger: var(--g-color-private-red-450); --g-color-line-focus: var(--g-color-private-cool-grey-450); --g-color-line-generic: var(--g-color-private-black-200); --g-color-line-generic-accent: var(--g-color-private-black-300); --g-color-line-generic-accent-hover: var(--g-color-private-black-700); --g-color-line-generic-active: var(--g-color-private-black-700); --g-color-line-generic-hover: var(--g-color-private-black-400); --g-color-line-generic-solid: var(--g-color-private-black-200-solid); --g-color-line-info: var(--g-color-private-blue-450); --g-color-line-light: var(--g-color-private-white-500); --g-color-line-contrast: var(--g-color-private-black-150); --g-color-line-contrast-inverted: var(--g-color-private-white-300); --g-color-line-contrast-light: var(--g-color-private-white-300); --g-color-line-contrast-dark: var(--g-color-private-black-150); --g-color-line-misc: var(--g-color-private-cool-grey-450); --g-color-line-positive: var(--g-color-private-green-450); --g-color-line-utility: var(--g-color-private-purple-450); --g-color-line-warning: var(--g-color-private-yellow-600-solid); --g-color-scroll-corner: var(--g-color-private-black-100); --g-color-scroll-handle: var(--g-color-private-black-100); --g-color-scroll-handle-hover: var(--g-color-private-black-150); --g-color-scroll-track: var(--g-color-base-background); --g-color-sfx-fade: var(--g-color-private-white-300); --g-color-sfx-shadow: var(--g-color-private-black-300); --g-color-sfx-shadow-heavy: var(--g-color-private-black-600); --g-color-sfx-shadow-light: var(--g-color-private-black-100); --g-color-sfx-veil: var(--g-color-private-black-450); --g-color-text-brand: var(--g-color-private-yellow-700-solid); --g-color-text-brand-contrast: var(--g-color-text-dark-primary); --g-color-text-brand-heavy: var(--g-color-private-orange-900-solid); --g-color-text-complementary: var(--g-color-text-dark-complementary); --g-color-text-danger: var(--g-color-private-red-650-solid); --g-color-text-danger-heavy: var(--g-color-private-red-900-solid); --g-color-text-dark-complementary: var(--g-color-private-black-850); --g-color-text-dark-hint: var(--g-color-private-black-500); --g-color-text-dark-primary: var(--g-color-private-black-1000-solid); --g-color-text-dark-secondary: var(--g-color-private-black-700); --g-color-text-hint: var(--g-color-text-dark-hint); --g-color-text-info: var(--g-color-private-blue-650-solid); --g-color-text-info-heavy: var(--g-color-private-blue-900-solid); --g-color-text-inverted-complementary: var(--g-color-text-light-complementary); --g-color-text-inverted-hint: var(--g-color-text-light-hint); --g-color-text-inverted-primary: var(--g-color-text-light-primary); --g-color-text-inverted-secondary: var(--g-color-text-light-secondary); --g-color-text-light-complementary: var(--g-color-private-white-850); --g-color-text-light-hint: var(--g-color-private-white-500); --g-color-text-light-primary: var(--g-color-private-white-1000-solid); --g-color-text-light-secondary: var(--g-color-private-white-700); --g-color-text-link: var(--g-color-private-yellow-700-solid); --g-color-text-link-hover: var(--g-color-private-orange-700-solid); --g-color-text-link-visited: var(--g-color-private-purple-600-solid); --g-color-text-link-visited-hover: var(--g-color-private-purple-850-solid); --g-color-text-misc: var(--g-color-private-cool-grey-650-solid); --g-color-text-misc-heavy: var(--g-color-private-cool-grey-900-solid); --g-color-text-positive: var(--g-color-private-green-650-solid); --g-color-text-positive-heavy: var(--g-color-private-green-900-solid); --g-color-text-primary: var(--g-color-text-dark-primary); --g-color-text-secondary: var(--g-color-text-dark-secondary); --g-color-text-utility: var(--g-color-private-purple-650-solid); --g-color-text-utility-heavy: var(--g-color-private-purple-900-solid); --g-color-text-warning: var(--g-color-private-yellow-700-solid); --g-color-text-warning-heavy: var(--g-color-private-orange-900-solid); } .g-root_theme_dark-hc { --g-color-private-black-20: rgb(0 0 0 / 0.02); --g-color-private-black-50: rgb(0 0 0 / 0.05); --g-color-private-black-70: rgb(0 0 0 / 0.07); --g-color-private-black-100: rgb(0 0 0 / 0.1); --g-color-private-black-150: rgb(0 0 0 / 0.15); --g-color-private-black-200: rgb(0 0 0 / 0.2); --g-color-private-black-250: rgb(0 0 0 / 0.25); --g-color-private-black-300: rgb(0 0 0 / 0.3); --g-color-private-black-350: rgb(0 0 0 / 0.35); --g-color-private-black-400: rgb(0 0 0 / 0.4); --g-color-private-black-450: rgb(0 0 0 / 0.45); --g-color-private-black-500: rgb(0 0 0 / 0.5); --g-color-private-black-550: rgb(0 0 0 / 0.55); --g-color-private-black-600: rgb(0 0 0 / 0.6); --g-color-private-black-650: rgb(0 0 0 / 0.65); --g-color-private-black-700: rgb(0 0 0 / 0.7); --g-color-private-black-750: rgb(0 0 0 / 0.75); --g-color-private-black-800: rgb(0 0 0 / 0.8); --g-color-private-black-850: rgb(0 0 0 / 0.85); --g-color-private-black-900: rgb(0 0 0 / 0.9); --g-color-private-black-950: rgb(0 0 0 / 0.95); --g-color-private-black-1000-solid: rgb(0 0 0); --g-color-private-blue-50: rgb(54 151 241 / 0.1); --g-color-private-blue-100: rgb(54 151 241 / 0.15); --g-color-private-blue-150: rgb(54 151 241 / 0.2); --g-color-private-blue-200: rgb(54 151 241 / 0.3); --g-color-private-blue-250: rgb(54 151 241 / 0.4); --g-color-private-blue-300: rgb(54 151 241 / 0.5); --g-color-private-blue-350: rgb(54 151 241 / 0.6); --g-color-private-blue-400: rgb(54 151 241 / 0.7); --g-color-private-blue-450: rgb(54 151 241 / 0.8); --g-color-private-blue-500: rgb(54 151 241 / 0.9); --g-color-private-blue-550: rgb(54 151 241); --g-color-private-blue-550-solid: rgb(54 151 241); --g-color-private-blue-1000-solid: rgb(225 239 253); --g-color-private-blue-950-solid: rgb(215 234 252); --g-color-private-blue-900-solid: rgb(195 224 251); --g-color-private-blue-850-solid: rgb(175 213 249); --g-color-private-blue-800-solid: rgb(155 203 248); --g-color-private-blue-750-solid: rgb(134 193 247); --g-color-private-blue-700-solid: rgb(114 182 245); --g-color-private-blue-650-solid: rgb(94 172 244); --g-color-private-blue-600-solid: rgb(74 161 242); --g-color-private-blue-500-solid: rgb(50 138 219); --g-color-private-blue-450-solid: rgb(47 124 196); --g-color-private-blue-400-solid: rgb(43 111 174); --g-color-private-blue-350-solid: rgb(40 97 152); --g-color-private-blue-300-solid: rgb(36 84 130); --g-color-private-blue-250-solid: rgb(32 71 107); --g-color-private-blue-200-solid: rgb(29 57 85); --g-color-private-blue-150-solid: rgb(25 44 63); --g-color-private-blue-100-solid: rgb(23 37 51); --g-color-private-blue-50-solid: rgb(22 30 40); --g-color-private-cool-grey-50: rgb(96 128 156 / 0.1); --g-color-private-cool-grey-100: rgb(96 128 156 / 0.15); --g-color-private-cool-grey-150: rgb(96 128 156 / 0.2); --g-color-private-cool-grey-200: rgb(96 128 156 / 0.3); --g-color-private-cool-grey-250: rgb(96 128 156 / 0.4); --g-color-private-cool-grey-300: rgb(96 128 156 / 0.5); --g-color-private-cool-grey-350: rgb(96 128 156 / 0.6); --g-color-private-cool-grey-400: rgb(96 128 156 / 0.7); --g-color-private-cool-grey-450: rgb(96 128 156 / 0.8); --g-color-private-cool-grey-500: rgb(96 128 156 / 0.9); --g-color-private-cool-grey-550: rgb(96 128 156); --g-color-private-cool-grey-550-solid: rgb(96 128 156); --g-color-private-cool-grey-1000-solid: rgb(231 236 240); --g-color-private-cool-grey-950-solid: rgb(223 230 235); --g-color-private-cool-grey-900-solid: rgb(207 217 225); --g-color-private-cool-grey-850-solid: rgb(191 204 215); --g-color-private-cool-grey-800-solid: rgb(176 192 206); --g-color-private-cool-grey-750-solid: rgb(160 179 196); --g-color-private-cool-grey-700-solid: rgb(144 166 186); --g-color-private-cool-grey-650-solid: rgb(128 153 176); --g-color-private-cool-grey-600-solid: rgb(112 141 166); --g-color-private-cool-grey-500-solid: rgb(88 117 142); --g-color-private-cool-grey-450-solid: rgb(80 106 128); --g-color-private-cool-grey-400-solid: rgb(73 95 115); --g-color-private-cool-grey-350-solid: rgb(65 84 101); --g-color-private-cool-grey-300-solid: rgb(57 73 87); --g-color-private-cool-grey-250-solid: rgb(49 61 73); --g-color-private-cool-grey-200-solid: rgb(41 50 59); --g-color-private-cool-grey-150-solid: rgb(34 39 46); --g-color-private-cool-grey-100-solid: rgb(30 34 39); --g-color-private-cool-grey-50-solid: rgb(26 28 32); --g-color-private-green-50: rgb(77 176 155 / 0.1); --g-color-private-green-100: rgb(77 176 155 / 0.15); --g-color-private-green-150: rgb(77 176 155 / 0.2); --g-color-private-green-200: rgb(77 176 155 / 0.3); --g-color-private-green-250: rgb(77 176 155 / 0.4); --g-color-private-green-300: rgb(77 176 155 / 0.5); --g-color-private-green-350: rgb(77 176 155 / 0.6); --g-color-private-green-400: rgb(77 176 155 / 0.7); --g-color-private-green-450: rgb(77 176 155 / 0.8); --g-color-private-green-500: rgb(77 176 155 / 0.9); --g-color-private-green-550: rgb(77 176 155); --g-color-private-green-550-solid: rgb(77 176 155); --g-color-private-green-1000-solid: rgb(228 243 240); --g-color-private-green-950-solid: rgb(219 239 235); --g-color-private-green-900-solid: rgb(202 231 225); --g-color-private-green-850-solid: rgb(184 223 215); --g-color-private-green-800-solid: rgb(166 216 205); --g-color-private-green-750-solid: rgb(148 208 195); --g-color-private-green-700-solid: rgb(130 200 185); --g-color-private-green-650-solid: rgb(113 192 175); --g-color-private-green-600-solid: rgb(95 184 165); --g-color-private-green-500-solid: rgb(71 160 141); --g-color-private-green-450-solid: rgb(65 144 128); --g-color-private-green-400-solid: rgb(59 128 114); --g-color-private-green-350-solid: rgb(53 112 100); --g-color-private-green-300-solid: rgb(48 97 87); --g-color-private-green-250-solid: rgb(42 81 73); --g-color-private-green-200-solid: rgb(36 65 59); --g-color-private-green-150-solid: rgb(30 49 45); --g-color-private-green-100-solid: rgb(27 41 39); --g-color-private-green-50-solid: rgb(24 33 32); --g-color-private-orange-50: rgb(200 99 12 / 0.1); --g-color-private-orange-100: rgb(200 99 12 / 0.15); --g-color-private-orange-150: rgb(200 99 12 / 0.2); --g-color-private-orange-200: rgb(200 99 12 / 0.3); --g-color-private-orange-250: rgb(200 99 12 / 0.4); --g-color-private-orange-300: rgb(200 99 12 / 0.5); --g-color-private-orange-350: rgb(200 99 12 / 0.6); --g-color-private-orange-400: rgb(200 99 12 / 0.7); --g-color-private-orange-450: rgb(200 99 12 / 0.8); --g-color-private-orange-500: rgb(200 99 12 / 0.9); --g-color-private-orange-550: rgb(200 99 12); --g-color-private-orange-550-solid: rgb(200 99 12); --g-color-private-orange-1000-solid: rgb(247 232 219); --g-color-private-orange-950-solid: rgb(244 224 206); --g-color-private-orange-900-solid: rgb(239 208 182); --g-color-private-orange-850-solid: rgb(233 193 158); --g-color-private-orange-800-solid: rgb(228 177 134); --g-color-private-orange-750-solid: rgb(222 161 109); --g-color-private-orange-700-solid: rgb(217 146 85); --g-color-private-orange-650-solid: rgb(211 130 61); --g-color-private-orange-600-solid: rgb(206 115 36); --g-color-private-orange-500-solid: rgb(182 91 13); --g-color-private-orange-450-solid: rgb(164 83 13); --g-color-private-orange-400-solid: rgb(145 74 14); --g-color-private-orange-350-solid: rgb(127 66 14); --g-color-private-orange-300-solid: rgb(109 58 15); --g-color-private-orange-250-solid: rgb(91 50 16); --g-color-private-orange-200-solid: rgb(73 42 16); --g-color-private-orange-150-solid: rgb(54 33 17); --g-color-private-orange-100-solid: rgb(45 29 17); --g-color-private-orange-50-solid: rgb(36 25 17); --g-color-private-purple-50: rgb(143 82 204 / 0.1); --g-color-private-purple-100: rgb(143 82 204 / 0.15); --g-color-private-purple-150: rgb(143 82 204 / 0.2); --g-color-private-purple-200: rgb(143 82 204 / 0.3); --g-color-private-purple-250: rgb(143 82 204 / 0.4); --g-color-private-purple-300: rgb(143 82 204 / 0.5); --g-color-private-purple-350: rgb(143 82 204 / 0.6); --g-color-private-purple-400: rgb(143 82 204 / 0.7); --g-color-private-purple-450: rgb(143 82 204 / 0.8); --g-color-private-purple-500: rgb(143 82 204 / 0.9); --g-color-private-purple-550: rgb(143 82 204); --g-color-private-purple-550-solid: rgb(143 82 204); --g-color-private-purple-1000-solid: rgb(238 229 247); --g-color-private-purple-950-solid: rgb(233 220 245); --g-color-private-purple-900-solid: rgb(221 203 240); --g-color-private-purple-850-solid: rgb(210 186 235); --g-color-private-purple-800-solid: rgb(199 169 230); --g-color-private-purple-750-solid: rgb(188 151 224); --g-color-private-purple-700-solid: rgb(177 134 219); --g-color-private-purple-650-solid: rgb(165 117 214); --g-color-private-purple-600-solid: rgb(154 99 209); --g-color-private-purple-500-solid: rgb(131 76 185); --g-color-private-purple-450-solid: rgb(118 69 167); --g-color-private-purple-400-solid: rgb(106 63 148); --g-color-private-purple-350-solid: rgb(93 56 130); --g-color-private-purple-300-solid: rgb(81 50 111); --g-color-private-purple-250-solid: rgb(68 43 92); --g-color-private-purple-200-solid: rgb(56 37 74); --g-color-private-purple-150-solid: rgb(43 30 55); --g-color-private-purple-100-solid: rgb(37 27 46); --g-color-private-purple-50-solid: rgb(31 24 37); --g-color-private-red-50: rgb(229 50 93 / 0.1); --g-color-private-red-100: rgb(229 50 93 / 0.15); --g-color-private-red-150: rgb(229 50 93 / 0.2); --g-color-private-red-200: rgb(229 50 93 / 0.3); --g-color-private-red-250: rgb(229 50 93 / 0.4); --g-color-private-red-300: rgb(229 50 93 / 0.5); --g-color-private-red-350: rgb(229 50 93 / 0.6); --g-color-private-red-400: rgb(229 50 93 / 0.7); --g-color-private-red-450: rgb(229 50 93 / 0.8); --g-color-private-red-500: rgb(229 50 93 / 0.9); --g-color-private-red-550: rgb(229 50 93); --g-color-private-red-550-solid: rgb(229 50 93); --g-color-private-red-1000-solid: rgb(251 224 231); --g-color-private-red-950-solid: rgb(250 214 223); --g-color-private-red-900-solid: rgb(247 194 206); --g-color-private-red-850-solid: rgb(245 173 190); --g-color-private-red-800-solid: rgb(242 153 174); --g-color-private-red-750-solid: rgb(239 132 158); --g-color-private-red-700-solid: rgb(237 112 142); --g-color-private-red-650-solid: rgb(234 91 125); --g-color-private-red-600-solid: rgb(232 71 109); --g-color-private-red-500-solid: rgb(208 47 86); --g-color-private-red-450-solid: rgb(187 43 78); --g-color-private-red-400-solid: rgb(166 40 71); --g-color-private-red-350-solid: rgb(145 37 63); --g-color-private-red-300-solid: rgb(124 34 56); --g-color-private-red-250-solid: rgb(102 30 48); --g-color-private-red-200-solid: rgb(81 27 41); --g-color-private-red-150-solid: rgb(60 24 33); --g-color-private-red-100-solid: rgb(50 22 29); --g-color-private-red-50-solid: rgb(39 20 26); --g-color-private-white-20: rgb(255 255 255 / 0.02); --g-color-private-white-50: rgb(255 255 255 / 0.05); --g-color-private-white-70: rgb(255 255 255 / 0.07); --g-color-private-white-100: rgb(255 255 255 / 0.1); --g-color-private-white-150: rgb(255 255 255 / 0.15); --g-color-private-white-200: rgb(255 255 255 / 0.2); --g-color-private-white-250: rgb(255 255 255 / 0.25); --g-color-private-white-300: rgb(255 255 255 / 0.3); --g-color-private-white-350: rgb(255 255 255 / 0.35); --g-color-private-white-400: rgb(255 255 255 / 0.4); --g-color-private-white-450: rgb(255 255 255 / 0.45); --g-color-private-white-500: rgb(255 255 255 / 0.5); --g-color-private-white-550: rgb(255 255 255 / 0.55); --g-color-private-white-600: rgb(255 255 255 / 0.6); --g-color-private-white-650: rgb(255 255 255 / 0.65); --g-color-private-white-700: rgb(255 255 255 / 0.7); --g-color-private-white-750: rgb(255 255 255 / 0.75); --g-color-private-white-800: rgb(255 255 255 / 0.8); --g-color-private-white-850: rgb(255 255 255 / 0.85); --g-color-private-white-900: rgb(255 255 255 / 0.9); --g-color-private-white-950: rgb(255 255 255 / 0.95); --g-color-private-white-1000-solid: rgb(255 255 255); --g-color-private-white-950-solid: rgb(243 243 243); --g-color-private-white-900-solid: rgb(231 231 231); --g-color-private-white-850-solid: rgb(208 207 208); --g-color-private-white-800-solid: rgb(208 207 208); --g-color-private-white-750-solid: rgb(196 195 196); --g-color-private-white-700-solid: rgb(184 184 184); --g-color-private-white-650-solid: rgb(172 172 172); --g-color-private-white-600-solid: rgb(160 160 160); --g-color-private-white-550-solid: rgb(148 148 148); --g-color-private-white-500-solid: rgb(136 136 136); --g-color-private-white-450-solid: rgb(125 124 125); --g-color-private-white-400-solid: rgb(113 112 113); --g-color-private-white-350-solid: rgb(101 100 101); --g-color-private-white-300-solid: rgb(89 88 89); --g-color-private-white-250-solid: rgb(77 77 77); --g-color-private-white-200-solid: rgb(65 65 65); --g-color-private-white-150-solid: rgb(54 53 54); --g-color-private-white-100-solid: rgb(42 41 42); --g-color-private-white-50-solid: rgb(30 29 30); --g-color-private-white-70-solid: rgb(35 34 35); --g-color-private-white-20-solid: rgb(38 34 38); --g-color-private-white-opaque-150: rgb(56 57 60 / 0.97); --g-color-private-yellow-50: rgb(255 190 92 / 0.1); --g-color-private-yellow-100: rgb(255 190 92 / 0.15); --g-color-private-yellow-150: rgb(255 190 92 / 0.2); --g-color-private-yellow-200: rgb(255 190 92 / 0.3); --g-color-private-yellow-250: rgb(255 190 92 / 0.4); --g-color-private-yellow-300: rgb(255 190 92 / 0.5); --g-color-private-yellow-350: rgb(255 190 92 / 0.6); --g-color-private-yellow-400: rgb(255 190 92 / 0.7); --g-color-private-yellow-450: rgb(255 190 92 / 0.8); --g-color-private-yellow-500: rgb(255 190 92 / 0.9); --g-color-private-yellow-550: rgb(255 190 92); --g-color-private-yellow-550-solid: rgb(255 190 92); --g-color-private-yellow-1000-solid: rgb(255 245 231); --g-color-private-yellow-950-solid: rgb(255 242 222); --g-color-private-yellow-900-solid: rgb(255 236 206); --g-color-private-yellow-850-solid: rgb(255 229 190); --g-color-private-yellow-800-solid: rgb(255 223 174); --g-color-private-yellow-750-solid: rgb(255 216 157); --g-color-private-yellow-700-solid: rgb(255 210 141); --g-color-private-yellow-650-solid: rgb(255 203 125); --g-color-private-yellow-600-solid: rgb(255 197 108); --g-color-private-yellow-500-solid: rgb(231 173 85); --g-color-private-yellow-450-solid: rgb(208 155 77); --g-color-private-yellow-400-solid: rgb(184 138 70); --g-color-private-yellow-350-solid: rgb(160 121 62); --g-color-private-yellow-300-solid: rgb(137 104 55); --g-color-private-yellow-250-solid: rgb(113 86 48); --g-color-private-yellow-200-solid: rgb(89 69 40); --g-color-private-yellow-150-solid: rgb(65 52 33); --g-color-private-yellow-100-solid: rgb(54 43 29); --g-color-private-yellow-50-solid: rgb(42 34 25); --g-color-base-background: rgb(18 17 18); --g-color-base-brand: var(--g-color-private-yellow-550-solid); --g-color-base-brand-hover: var(--g-color-private-yellow-700-solid); --g-color-base-danger-heavy: var(--g-color-private-red-700-solid); --g-color-base-danger-heavy-hover: var(--g-color-private-red-850-solid); --g-color-base-danger-light: var(--g-color-private-red-250); --g-color-base-danger-light-hover: var(--g-color-private-red-400); --g-color-base-danger-medium: var(--g-color-private-red-450); --g-color-base-danger-medium-hover: var(--g-color-private-red-600-solid); --g-color-base-float: var(--g-color-private-white-100-solid); --g-color-base-float-accent: var(--g-color-private-white-300-solid); --g-color-base-float-accent-hover: var(--g-color-private-white-400-solid); --g-color-base-float-announcement: var(--g-color-private-white-200-solid); --g-color-base-float-heavy: var(--g-color-private-white-300-solid); --g-color-base-float-hover: var(--g-color-private-white-200-solid); --g-color-base-float-medium: var(--g-color-private-white-200-solid); --g-color-base-generic: var(--g-color-private-white-100); --g-color-base-generic-accent: var(--g-color-private-white-200); --g-color-base-generic-accent-disabled: var(--g-color-private-white-150); --g-color-base-generic-hover: var(--g-color-private-white-250); --g-color-base-generic-medium: var(--g-color-private-white-250); --g-color-base-generic-medium-hover: var(--g-color-private-white-400); --g-color-base-generic-ultralight: var(--g-color-private-white-50); --g-color-base-info-heavy: var(--g-color-private-blue-700-solid); --g-color-base-info-heavy-hover: var(--g-color-private-blue-850-solid); --g-color-base-info-light: var(--g-color-private-blue-250); --g-color-base-info-light-hover: var(--g-color-private-blue-400); --g-color-base-info-medium: var(--g-color-private-blue-450); --g-color-base-info-medium-hover: var(--g-color-private-blue-600-solid); --g-color-base-contrast: var(--g-color-private-white-900); --g-color-base-contrast-hover: var(--g-color-private-white-750); --g-color-base-contrast-simple-hover: var(--g-color-private-white-200); --g-color-base-contrast-accent-disabled: var(--g-color-private-white-150); --g-color-base-contrast-inverted: var(--g-color-private-black-900); --g-color-base-contrast-inverted-hover: var(--g-color-private-black-750); --g-color-base-contrast-inverted-simple-hover: var(--g-color-private-black-100); --g-color-base-contrast-inverted-accent-disabled: var(--g-color-private-black-150); --g-color-base-contrast-light: var(--g-color-private-white-900); --g-color-base-contrast-light-hover: var(--g-color-private-white-750); --g-color-base-contrast-light-simple-hover: var(--g-color-private-white-200); --g-color-base-contrast-light-accent-disabled: var(--g-color-private-white-150); --g-color-base-contrast-dark: var(--g-color-private-black-900); --g-color-base-contrast-dark-hover: var(--g-color-private-black-750); --g-color-base-contrast-dark-simple-hover: var(--g-color-private-black-100); --g-color-base-contrast-dark-accent-disabled: var(--g-color-private-black-150); --g-color-base-misc-heavy: var(--g-color-private-cool-grey-700-solid); --g-color-base-misc-heavy-hover: var(--g-color-private-cool-grey-850-solid); --g-color-base-misc-light: var(--g-color-private-cool-grey-250); --g-color-base-misc-light-hover: var(--g-color-private-cool-grey-400); --g-color-base-misc-medium: var(--g-color-private-cool-grey-450); --g-color-base-misc-medium-hover: var(--g-color-private-cool-grey-600-solid); --g-color-base-modal: var(--g-color-base-background); --g-color-base-neutral-heavy: var(--g-color-private-white-650); --g-color-base-neutral-heavy-hover: var(--g-color-private-white-750); --g-color-base-neutral-light: var(--g-color-private-white-200); --g-color-base-neutral-light-hover: var(--g-color-private-white-350); --g-color-base-neutral-medium: var(--g-color-private-white-400); --g-color-base-neutral-medium-hover: var(--g-color-private-white-550); --g-color-base-positive-heavy: var(--g-color-private-green-700-solid); --g-color-base-positive-heavy-hover: var(--g-color-private-green-850-solid); --g-color-base-positive-light: var(--g-color-private-green-250); --g-color-base-positive-light-hover: var(--g-color-private-green-400); --g-color-base-positive-medium: var(--g-color-private-green-450); --g-color-base-positive-medium-hover: var(--g-color-private-green-600-solid); --g-color-base-selection: var(--g-color-private-yellow-250); --g-color-base-selection-hover: var(--g-color-private-yellow-400); --g-color-base-simple-hover: var(--g-color-private-white-250); --g-color-base-simple-hover-solid: var(--g-color-private-white-250-solid); --g-color-base-utility-heavy: var(--g-color-private-purple-700-solid); --g-color-base-utility-heavy-hover: var(--g-color-private-purple-850-solid); --g-color-base-utility-light: var(--g-color-private-purple-250); --g-color-base-utility-light-hover: var(--g-color-private-purple-400); --g-color-base-utility-medium: var(--g-color-private-purple-450); --g-color-base-utility-medium-hover: var(--g-color-private-purple-600-solid); --g-color-base-warning-heavy: var(--g-color-private-yellow-700-solid); --g-color-base-warning-heavy-hover: var(--g-color-private-yellow-850-solid); --g-color-base-warning-light: var(--g-color-private-yellow-250); --g-color-base-warning-light-hover: var(--g-color-private-yellow-400); --g-color-base-warning-medium: var(--g-color-private-yellow-450); --g-color-base-warning-medium-hover: var(--g-color-private-yellow-600-solid); --g-color-infographics-axis: var(--g-color-private-white-150-solid); --g-color-infographics-tooltip-bg: var(--g-color-private-white-opaque-150); --g-color-line-brand: var(--g-color-private-yellow-600-solid); --g-color-line-danger: var(--g-color-private-red-550-solid); --g-color-line-focus: var(--g-color-private-cool-grey-550-solid); --g-color-line-generic: var(--g-color-private-white-150); --g-color-line-generic-accent: var(--g-color-private-white-350); --g-color-line-generic-accent-hover: var(--g-color-private-white-800); --g-color-line-generic-active: var(--g-color-private-white-600); --g-color-line-generic-hover: var(--g-color-private-white-250); --g-color-line-generic-solid: var(--g-color-private-white-150-solid); --g-color-line-info: var(--g-color-private-blue-550-solid); --g-color-line-light: var(--g-color-private-white-500); --g-color-line-contrast: var(--g-color-private-white-300); --g-color-line-contrast-inverted: var(--g-color-private-black-150); --g-color-line-contrast-light: var(--g-color-private-white-300); --g-color-line-contrast-dark: var(--g-color-private-black-150); --g-color-line-misc: var(--g-color-private-cool-grey-550-solid); --g-color-line-positive: var(--g-color-private-green-550-solid); --g-color-line-utility: var(--g-color-private-purple-550-solid); --g-color-line-warning: var(--g-color-private-yellow-550-solid); --g-color-scroll-corner: var(--g-color-private-white-150); --g-color-scroll-handle: var(--g-color-private-white-150); --g-color-scroll-handle-hover: var(--g-color-private-white-250); --g-color-scroll-track: var(--g-color-base-background); --g-color-sfx-fade: var(--g-color-private-white-250); --g-color-sfx-shadow: var(--g-color-private-black-200); --g-color-sfx-shadow-heavy: var(--g-color-private-black-400); --g-color-sfx-shadow-light: var(--g-color-private-black-200); --g-color-sfx-veil: var(--g-color-private-black-700); --g-color-text-brand: var(--g-color-private-yellow-600-solid); --g-color-text-brand-contrast: var(--g-color-text-dark-primary); --g-color-text-brand-heavy: var(--g-color-private-yellow-700-solid); --g-color-text-complementary: var(--g-color-text-light-complementary); --g-color-text-danger: var(--g-color-private-red-650-solid); --g-color-text-danger-heavy: var(--g-color-private-red-850-solid); --g-color-text-dark-complementary: var(--g-color-private-black-800); --g-color-text-dark-hint: var(--g-color-private-black-400); --g-color-text-dark-primary: var(--g-color-private-black-1000-solid); --g-color-text-dark-secondary: var(--g-color-private-black-600); --g-color-text-hint: var(--g-color-text-light-hint); --g-color-text-info: var(--g-color-private-blue-650-solid); --g-color-text-info-heavy: var(--g-color-private-blue-850-solid); --g-color-text-inverted-complementary: var(--g-color-text-dark-complementary); --g-color-text-inverted-hint: var(--g-color-text-dark-hint); --g-color-text-inverted-primary: var(--g-color-text-dark-primary); --g-color-text-inverted-secondary: var(--g-color-text-dark-secondary); --g-color-text-light-complementary: var(--g-color-private-white-800); --g-color-text-light-hint: var(--g-color-private-white-400); --g-color-text-light-primary: var(--g-color-private-white-1000-solid); --g-color-text-light-secondary: var(--g-color-private-white-600); --g-color-text-link: var(--g-color-private-yellow-550-solid); --g-color-text-link-hover: var(--g-color-private-orange-550-solid); --g-color-text-link-visited: var(--g-color-private-purple-650-solid); --g-color-text-link-visited-hover: var(--g-color-private-purple-800-solid); --g-color-text-misc: var(--g-color-private-cool-grey-650-solid); --g-color-text-misc-heavy: var(--g-color-private-cool-grey-850-solid); --g-color-text-positive: var(--g-color-private-green-650-solid); --g-color-text-positive-heavy: var(--g-color-private-green-850-solid); --g-color-text-primary: var(--g-color-text-light-primary); --g-color-text-secondary: var(--g-color-text-light-secondary); --g-color-text-utility: var(--g-color-private-purple-650-solid); --g-color-text-utility-heavy: var(--g-color-private-purple-850-solid); --g-color-text-warning: var(--g-color-private-yellow-650-solid); --g-color-text-warning-heavy: var(--g-color-private-yellow-850-solid); } .g-root { background: var(--g-color-base-background); color: var(--g-color-text-primary); --g-text-body-accent-font-weight: 600; --g-text-caption-accent-font-weight: 600; --g-text-header-accent-font-weight: 600; --g-text-subheader-accent-font-weight: 600; --g-text-display-accent-font-weight: 600; --g-text-code-accent-font-weight: 600; --g-text-accent-font-weight: 600; --g-text-body-1-font: var(--g-text-body-font-weight) var(--g-text-body-1-font-size) / var(--g-text-body-1-line-height) var(--g-text-body-font-family); --g-text-body-2-font: var(--g-text-body-font-weight) var(--g-text-body-2-font-size) / var(--g-text-body-2-line-height) var(--g-text-body-font-family); --g-text-body-3-font: var(--g-text-body-font-weight) var(--g-text-body-3-font-size) / var(--g-text-body-3-line-height) var(--g-text-body-font-family); --g-text-body-short-font: var(--g-text-body-font-weight) var(--g-text-body-short-font-size) / var(--g-text-body-short-line-height) var(--g-text-body-font-family); --g-text-caption-1-font: var(--g-text-caption-font-weight) var(--g-text-caption-1-font-size) / var(--g-text-caption-1-line-height) var(--g-text-caption-font-family); --g-text-caption-2-font: var(--g-text-caption-font-weight) var(--g-text-caption-2-font-size) / var(--g-text-caption-2-line-height) var(--g-text-caption-font-family); --g-text-header-1-font: var(--g-text-header-font-weight) var(--g-text-header-1-font-size) / var(--g-text-header-1-line-height) var(--g-text-header-font-family); --g-text-header-2-font: var(--g-text-header-font-weight) var(--g-text-header-2-font-size) / var(--g-text-header-2-line-height) var(--g-text-header-font-family); --g-text-subheader-1-font: var(--g-text-subheader-font-weight) var(--g-text-subheader-1-font-size) / var(--g-text-subheader-1-line-height) var(--g-text-subheader-font-family); --g-text-subheader-2-font: var(--g-text-subheader-font-weight) var(--g-text-subheader-2-font-size) / var(--g-text-subheader-2-line-height) var(--g-text-subheader-font-family); --g-text-subheader-3-font: var(--g-text-subheader-font-weight) var(--g-text-subheader-3-font-size) / var(--g-text-subheader-3-line-height) var(--g-text-subheader-font-family); --g-text-display-1-font: var(--g-text-display-font-weight) var(--g-text-display-1-font-size) / var(--g-text-display-1-line-height) var(--g-text-display-font-family); --g-text-display-2-font: var(--g-text-display-font-weight) var(--g-text-display-2-font-size) / var(--g-text-display-2-line-height) var(--g-text-display-font-family); --g-text-display-3-font: var(--g-text-display-font-weight) var(--g-text-display-3-font-size) / var(--g-text-display-3-line-height) var(--g-text-display-font-family); --g-text-display-4-font: var(--g-text-display-font-weight) var(--g-text-display-4-font-size) / var(--g-text-display-4-line-height) var(--g-text-display-font-family); --g-text-code-1-font: var(--g-text-code-font-weight) var(--g-text-code-1-font-size) / var(--g-text-code-1-line-height) var(--g-text-code-font-family); --g-text-code-2-font: var(--g-text-code-font-weight) var(--g-text-code-2-font-size) / var(--g-text-code-2-line-height) var(--g-text-code-font-family); --g-text-code-3-font: var(--g-text-code-font-weight) var(--g-text-code-3-font-size) / var(--g-text-code-3-line-height) var(--g-text-code-font-family); --g-text-code-inline-1-font: var(--g-text-code-inline-font-weight) var(--g-text-code-inline-1-font-size) / var(--g-text-code-inline-1-line-height) var(--g-text-code-inline-font-family); --g-text-code-inline-2-font: var(--g-text-code-inline-font-weight) var(--g-text-code-inline-2-font-size) / var(--g-text-code-inline-2-line-height) var(--g-text-code-inline-font-family); --g-text-code-inline-3-font: var(--g-text-code-inline-font-weight) var(--g-text-code-inline-3-font-size) / var(--g-text-code-inline-3-line-height) var(--g-text-code-inline-font-family); font-family: var(--g-text-body-font-family); font-weight: var(--g-text-body-font-weight); font-size: var(--g-text-body-1-font-size); line-height: var(--g-text-body-1-line-height); --g-spacing-base: 4px; --g-spacing-0: calc(var(--g-spacing-base) * 0); --g-spacing-half: calc(var(--g-spacing-base) * 0.5); --g-spacing-1: var(--g-spacing-base); --g-spacing-2: calc(var(--g-spacing-base) * 2); --g-spacing-3: calc(var(--g-spacing-base) * 3); --g-spacing-4: calc(var(--g-spacing-base) * 4); --g-spacing-5: calc(var(--g-spacing-base) * 5); --g-spacing-6: calc(var(--g-spacing-base) * 6); --g-spacing-7: calc(var(--g-spacing-base) * 7); --g-spacing-8: calc(var(--g-spacing-base) * 8); --g-spacing-9: calc(var(--g-spacing-base) * 9); --g-spacing-10: calc(var(--g-spacing-base) * 10); --g-scrollbar-width: 12px; --g-focus-border-radius: 2px; } body.g-root { --g-flow-direction: 1; --g-flow-is-ltr: 1; --g-flow-is-rtl: 0; } .g-root[dir=ltr] { --g-flow-direction: 1; --g-flow-is-ltr: 1; --g-flow-is-rtl: 0; } .g-root[dir=rtl] { --g-flow-direction: -1; --g-flow-is-ltr: 0; --g-flow-is-rtl: 1; } @keyframes g-loading-animation { from { background-position: -12px 0; } to { background-position: 0 0; } } :root:has(body.g-root_theme_light), :root:has(body.g-root_theme_light-hc) { color-scheme: light; } :root:has(body.g-root_theme_dark), :root:has(body.g-root_theme_dark-hc) { color-scheme: dark; } /* build/esm/components/controls/variables.css */ /* build/esm/components/controls/mixins.css */ /* build/esm/components/Button/Button.css */ @charset "UTF-8"; .g-button { --_--text-color: var(--g-color-text-primary); --_--text-color-hover: var(--_--text-color); --_--text-disabled-color: var(--g-color-text-hint); --_--background-color: transparent; --_--loading-color: var(--_--background-color); --_--background-color-hover: var(--g-color-base-simple-hover); --_--background-disabled-color: var(--g-color-base-generic-accent-disabled); --_--border-width: 0; --_--border-color: currentColor; --_--focus-outline-color: var(--g-color-line-focus); --_--focus-outline-offset: 0; --_--font-size: var(--g-text-body-1-font-size); margin: 0; padding: 0; font-family: var(--g-text-body-font-family); font-size: inherit; font-weight: var(--g-text-body-font-weight); color: inherit; background: none; border: none; appearance: none; user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; cursor: pointer; position: relative; overflow: visible; box-sizing: border-box; height: var(--g-button-height, var(--_--height)); line-height: var(--g-button-height, var(--_--height)); font-size: var(--g-button-font-size, var(--_--font-size)); text-align: center; white-space: nowrap; text-decoration: none; color: var(--g-button-text-color, var(--_--text-color)); transition: transform 0.1s ease-out, color 0.15s linear; transform: scale(1); display: inline-flex; justify-content: center; padding: 0 var(--g-button-padding, var(--_--padding)); gap: var(--g-button-icon-offset, var(--_--icon-offset)); outline: none; } .g-button::before { content: ""; position: absolute; z-index: -1; inset: 0; background-color: var(--g-button-background-color, var(--_--background-color)); border: var(--g-button-border-width, var(--_--border-width)) var(--g-button-border-style, solid) var(--g-button-border-color, var(--_--border-color)); transition: background-color 0.15s linear; } @media (hover: hover) { .g-button:hover { color: var(--g-button-text-color-hover, var(--_--text-color-hover)); } .g-button:hover::before { background-color: var(--g-button-background-color-hover, var(--_--background-color-hover)); } } .g-button[aria-haspopup][aria-expanded=true] { color: var(--g-button-text-color-hover, var(--_--text-color-hover)); } .g-button[aria-haspopup][aria-expanded=true]::before { background-color: var(--g-button-background-color-hover, var(--_--background-color-hover)); } .g-button:focus-visible::before { outline: var(--g-button-focus-outline-color, var(--_--focus-outline-color)) var(--g-button-focus-outline-style, solid) var(--g-button-focus-outline-width, 2px); outline-offset: var(--g-button-focus-outline-offset, var(--_--focus-outline-offset)); } .g-button::after { content: ""; position: absolute; z-index: -1; inset: 0; transform: scale(1); transition: none; } .g-button:active { transition: none; transform: scale(0.96); } .g-button:active::after { transform: scale(1.042); } .g-button_size_xs { --_--height: 20px; --_--border-radius: var(--g-border-radius-xs); --_--padding: 6px; --_--icon-space: 12px; --_--icon-offset: 4px; } .g-button_size_s { --_--height: 24px; --_--border-radius: var(--g-border-radius-s); --_--padding: 8px; --_--icon-space: 16px; --_--icon-offset: 4px; } .g-button_size_m { --_--height: 28px; --_--border-radius: var(--g-border-radius-m); --_--padding: 12px; --_--icon-space: 16px; --_--icon-offset: 8px; } .g-button_size_l { --_--height: 36px; --_--border-radius: var(--g-border-radius-l); --_--padding: 16px; --_--icon-space: 16px; --_--icon-offset: 8px; } .g-button_size_xl { --_--height: 44px; --_--border-radius: var(--g-border-radius-xl); --_--padding: 24px; --_--icon-space: 20px; --_--icon-offset: 12px; --_--font-size: var(--g-text-body-2-font-size); } .g-button_view_normal { --_--background-color: var(--g-color-base-generic); --_--background-color-hover: var(--g-color-base-generic-hover); } .g-button_view_action { --_--text-color: var(--g-color-text-brand-contrast); --_--background-color: var(--g-color-base-brand); --_--background-color-hover: var(--g-color-base-brand-hover); --_--focus-outline-color: var(--g-color-base-brand); --_--focus-outline-offset: 1px; } .g-button_view_contrast { --_--text-color: var(--g-color-text-inverted-primary); --_--background-color: var(--g-color-base-contrast); --_--background-color-hover: var(--g-color-base-contrast-hover); --_--background-disabled-color: var(--g-color-base-contrast-accent-disabled); --_--loading-color: var(--g-color-line-contrast-inverted); --_--focus-outline-color: var(--g-color-base-contrast); --_--focus-outline-offset: 1px; } .g-button_view_contrast-inverted { --_--text-color: var(--g-color-text-primary); --_--text-disabled-color: var(--g-color-text-inverted-hint); --_--background-color: var(--g-color-base-contrast-inverted); --_--background-color-hover: var(--g-color-base-contrast-inverted-hover); --_--background-disabled-color: var(--g-color-base-contrast-inverted-accent-disabled); --_--loading-color: var(--g-color-line-contrast); --_--focus-outline-color: var(--g-color-base-contrast-inverted); --_--focus-outline-offset: 1px; } .g-button_view_contrast-light { --_--text-color: var(--g-color-text-dark-primary); --_--text-disabled-color: var(--g-color-text-light-hint); --_--background-color: var(--g-color-base-contrast-light); --_--background-color-hover: var(--g-color-base-contrast-light-hover); --_--background-disabled-color: var(--g-color-base-contrast-light-accent-disabled); --_--loading-color: var(--g-color-line-contrast-dark); --_--focus-outline-color: var(--g-color-base-contrast-light); --_--focus-outline-offset: 1px; } .g-button_view_contrast-dark { --_--text-color: var(--g-color-text-light-primary); --_--text-disabled-color: var(--g-color-text-dark-hint); --_--background-color: var(--g-color-base-contrast-dark); --_--background-color-hover: var(--g-color-base-contrast-dark-hover); --_--background-disabled-color: var(--g-color-base-contrast-dark-accent-disabled); --_--loading-color: var(--g-color-line-contrast-light); --_--focus-outline-color: var(--g-color-base-contrast-dark); --_--focus-outline-offset: 1px; } .g-button_view_outlined { --_--border-width: 1px; --_--border-color: var(--g-color-line-generic); } .g-button_view_outlined-info { --_--text-color: var(--g-color-text-info); --_--border-width: 1px; --_--border-color: var(--g-color-line-info); } .g-button_view_outlined-success { --_--text-color: var(--g-color-text-positive); --_--border-width: 1px; --_--border-color: var(--g-color-line-positive); } .g-button_view_outlined-warning { --_--text-color: var(--g-color-text-warning); --_--border-width: 1px; --_--border-color: var(--g-color-line-warning); } .g-button_view_outlined-danger { --_--text-color: var(--g-color-text-danger); --_--border-width: 1px; --_--border-color: var(--g-color-line-danger); } .g-button_view_outlined-utility { --_--text-color: var(--g-color-text-utility); --_--border-width: 1px; --_--border-color: var(--g-color-line-utility); } .g-button_view_outlined-action { --_--text-color: var(--g-color-text-brand); --_--border-width: 1px; --_--border-color: var(--g-color-line-brand); } .g-button_view_raised { --_--background-color: var(--g-color-base-float); --_--background-color-hover: var(--g-color-base-float-hover); } .g-button_view_raised::before { box-shadow: 0 3px 5px var(--g-color-sfx-shadow); } .g-button_view_raised:active::before { box-shadow: 0 1px 2px var(--g-color-sfx-shadow); } .g-button_view_flat-secondary { --_--text-color: var(--g-color-text-secondary); --_--text-color-hover: var(--g-color-text-primary); } .g-button_view_flat-info { --_--text-color: var(--g-color-text-info); } .g-button_view_flat-success { --_--text-color: var(--g-color-text-positive); } .g-button_view_flat-warning { --_--text-color: var(--g-color-text-warning); } .g-button_view_flat-danger { --_--text-color: var(--g-color-text-danger); } .g-button_view_flat-utility { --_--text-color: var(--g-color-text-utility); } .g-button_view_flat-action { --_--text-color: var(--g-color-text-brand); } .g-button_pin_round-round::before { border-radius: var(--g-button-border-radius, var(--_--border-radius)); } .g-button_pin_brick-brick::before { border-radius: 0; } .g-button_pin_clear-clear::before { border-radius: 0; border-inline: 0; } .g-button_pin_circle-circle::before { border-radius: 100px; } .g-button_pin_round-brick::before { border-start-start-radius: var(--g-button-border-radius, var(--_--border-radius)); border-start-end-radius: 0; border-end-start-radius: var(--g-button-border-radius, var(--_--border-radius)); border-end-end-radius: 0; } .g-button_pin_brick-round::before { border-start-start-radius: 0; border-start-end-radius: var(--g-button-border-radius, var(--_--border-radius)); border-end-start-radius: 0; border-end-end-radius: var(--g-button-border-radius, var(--_--border-radius)); } .g-button_pin_round-clear::before { border-start-start-radius: var(--g-button-border-radius, var(--_--border-radius)); border-start-end-radius: 0; border-end-start-radius: var(--g-button-border-radius, var(--_--border-radius)); border-end-end-radius: 0; border-inline-end: 0; } .g-button_pin_clear-round::before { border-start-start-radius: 0; border-start-end-radius: var(--g-button-border-radius, var(--_--border-radius)); border-end-start-radius: 0; border-end-end-radius: var(--g-button-border-radius, var(--_--border-radius)); border-inline-start: 0; } .g-button_pin_brick-clear::before { border-radius: 0; border-inline-end: 0; } .g-button_pin_clear-brick::before { border-radius: 0; border-inline-start: 0; } .g-button_pin_circle-brick::before { border-start-start-radius: 100px; border-start-end-radius: 0; border-end-start-radius: 100px; border-end-end-radius: 0; } .g-button_pin_brick-circle::before { border-start-start-radius: 0; border-start-end-radius: 100px; border-end-start-radius: 0; border-end-end-radius: 100px; } .g-button_pin_circle-clear::before { border-start-start-radius: 100px; border-start-end-radius: 0; border-end-start-radius: 100px; border-end-end-radius: 0; border-inline-end: 0; } .g-button_pin_clear-circle::before { border-start-start-radius: 0; border-start-end-radius: 100px; border-end-start-radius: 0; border-end-end-radius: 100px; border-inline-start: 0; } .g-button_pin_round-round::after { border-radius: var(--g-button-border-radius, var(--_--border-radius)); } .g-button_pin_brick-brick::after { border-radius: 0; } .g-button_pin_clear-clear::after { border-radius: 0; border-inline: 0; } .g-button_pin_circle-circle::after { border-radius: 100px; } .g-button_pin_round-brick::after { border-start-start-radius: var(--g-button-border-radius, var(--_--border-radius)); border-start-end-radius: 0; border-end-start-radius: var(--g-button-border-radius, var(--_--border-radius)); border-end-end-radius: 0; } .g-button_pin_brick-round::after { border-start-start-radius: 0; border-start-end-radius: var(--g-button-border-radius, var(--_--border-radius)); border-end-start-radius: 0; border-end-end-radius: var(--g-button-border-radius, var(--_--border-radius)); } .g-button_pin_round-clear::after { border-start-start-radius: var(--g-button-border-radius, var(--_--border-radius)); border-start-end-radius: 0; border-end-start-radius: var(--g-button-border-radius, var(--_--border-radius)); border-end-end-radius: 0; border-inline-end: 0; } .g-button_pin_clear-round::after { border-start-start-radius: 0; border-start-end-radius: var(--g-button-border-radius, var(--_--border-radius)); border-end-start-radius: 0; border-end-end-radius: var(--g-button-border-radius, var(--_--border-radius)); border-inline-start: 0; } .g-button_pin_brick-clear::after { border-radius: 0; border-inline-end: 0; } .g-button_pin_clear-brick::after { border-radius: 0; border-inline-start: 0; } .g-button_pin_circle-brick::after { border-start-start-radius: 100px; border-start-end-radius: 0; border-end-start-radius: 100px; border-end-end-radius: 0; } .g-button_pin_brick-circle::after { border-start-start-radius: 0; border-start-end-radius: 100px; border-end-start-radius: 0; border-end-end-radius: 100px; } .g-button_pin_circle-clear::after { border-start-start-radius: 100px; border-start-end-radius: 0; border-end-start-radius: 100px; border-end-end-radius: 0; border-inline-end: 0; } .g-button_pin_clear-circle::after { border-start-start-radius: 0; border-start-end-radius: 100px; border-end-start-radius: 0; border-end-end-radius: 100px; border-inline-start: 0; } .g-button__text { display: inline-block; white-space: nowrap; } .g-button__icon { display: inline-block; position: relative; margin: 0 calc((var(--g-button-height, var(--_--height)) - var(--g-button-icon-space, var(--_--icon-space))) / 2 * -1); width: var(--g-button-height, var(--_--height)); height: var(--g-button-height, var(--_--height)); flex-shrink: 0; } .g-button__icon::after { content: " "; visibility: hidden; } .g-button__icon-inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .g-button__icon_side_start { order: -1; } .g-button__icon_side_end { order: 1; } .g-button__icon:only-child { margin: 0; } .g-button:has(.g-button__icon:only-child) { --_--padding: 0; } .g-button:has(.g-button__icon:only-child):not(.g-button_width_max) { width: var(--g-button-height, var(--_--height)); } .g-button_selected { --_--border-width: 0; --_--text-color: var(--g-color-text-brand-heavy); --_--background-color: var(--g-color-base-selection); --_--background-color-hover: var(--g-color-base-selection-hover); } .g-button_selected.g-button_view_flat-secondary { --_--text-color-hover: var(--g-color-text-brand-heavy); } .g-button_selected.g-button_view_outlined-info, .g-button_selected.g-button_view_flat-info { --_--text-color: var(--g-color-text-info-heavy); --_--background-color: var(--g-color-base-info-light); --_--background-color-hover: var(--g-color-base-info-light-hover); } .g-button_selected.g-button_view_outlined-success, .g-button_selected.g-button_view_flat-success { --_--text-color: var(--g-color-text-positive-heavy); --_--background-color: var(--g-color-base-positive-light); --_--background-color-hover: var(--g-color-base-positive-light-hover); } .g-button_selected.g-button_view_outlined-warning, .g-button_selected.g-button_view_flat-warning { --_--text-color: var(--g-color-text-warning-heavy); --_--background-color: var(--g-color-base-warning-light); --_--background-color-hover: var(--g-color-base-warning-light-hover); } .g-button_selected.g-button_view_outlined-danger, .g-button_selected.g-button_view_flat-danger { --_--text-color: var(--g-color-text-danger-heavy); --_--background-color: var(--g-color-base-danger-light); --_--background-color-hover: var(--g-color-base-danger-light-hover); } .g-button_selected.g-button_view_outlined-utility, .g-button_selected.g-button_view_flat-utility { --_--text-color: var(--g-color-text-utility-heavy); --_--background-color: var(--g-color-base-utility-light); --_--background-color-hover: var(--g-color-base-utility-light-hover); } .g-button_disabled { cursor: default; pointer-events: none; } .g-button_disabled:not(.g-button_loading) { --_--text-color: var(--_--text-disabled-color); --_--background-color: var(--_--background-disabled-color); --_--background-color-hover: var(--_--background-disabled-color); --_--border-width: 0; } .g-button_disabled:not(.g-button_loading):is(.g-button_view_flat, .g-button_view_flat-secondary, .g-button_view_flat-info, .g-button_view_flat-success, .g-button_view_flat-warning, .g-button_view_flat-danger, .g-button_view_flat-utility, .g-button_view_flat-action) { --_--background-color: transparent; --_--background-color-hover: transparent; } .g-button_disabled:active { transform: scale(1); } .g-button_loading::before { background-image: repeating-linear-gradient(-45deg, var(--g-button-background-color, var(--_--loading-color)), var(--g-button-background-color, var(--_--loading-color)) 4px, var(--g-button-background-color-hover, var(--_--background-color-hover)) 4px, var(--g-button-background-color-hover, var(--_--background-color-hover)) 8px); background-size: 150%; background-clip: padding-box; animation: g-loading-animation 0.5s linear infinite; } @media (prefers-reduced-motion: reduce) { .g-button_loading::before { animation: none; } } .g-button_width_auto { max-width: 100%; } .g-button_width_max { width: 100%; } .g-button_width_auto .g-button__text, .g-button_width_max .g-button__text { display: block; overflow: hidden; text-overflow: ellipsis; } /* build/esm/components/controls/TextInput/TextInput.css */ .g-text-input { --_--text-color: var(--g-color-text-primary); --_--label-color: inherit; --_--placeholder-color: var(--g-color-text-hint); --_--background-color: transparent; --_--border-width: 1px; --_--focus-outline-color: var(--g-text-input-focus-outline-color); display: inline-block; width: 100%; position: relative; } .g-text-input__content { box-sizing: border-box; overflow: hidden; display: flex; width: 100%; background-color: var(--g-text-input-background-color, var(--_--background-color)); border-width: var(--g-text-input-border-width, var(--_--border-width)); border-style: solid; border-color: var(--g-text-input-border-color, var(--_--border-color)); color: var(--g-text-input-text-color, var(--_--text-color)); } @media (hover: hover) { .g-text-input__content:hover { border-color: var(--g-text-input-border-color-hover, var(--_--border-color-hover)); } } .g-text-input__content:focus-within { border-color: var(--g-text-input-border-color-active, var(--_--border-color-active)); outline: 2px solid var(--g-text-input-focus-outline-color, var(--_--focus-outline-color)); outline-offset: -1px; } .g-text-input__control { box-sizing: border-box; display: inline-block; flex-grow: 1; vertical-align: top; position: relative; margin: 0; padding: 0; width: 100%; color: inherit; background-color: transparent; border: none; height: var(--g-text-input-height); } .g-text-input__control::placeholder { color: var(--g-text-input-placeholder-color, var(--_--placeholder-color)); overflow: hidden; white-space: nowrap; } .g-text-input__control:focus { outline: none; } .g-text-input__control[type=number] { appearance: textfield; } .g-text-input__control[type=search] { appearance: textfield; } .g-text-input__control[type=search]::-webkit-search-cancel-button { appearance: none; } .g-text-input__label { position: absolute; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; z-index: 1; color: var(--g-text-input-label-color, var(--_--label-color)); } .g-text-input__clear { flex-shrink: 0; margin: auto 0; } .g-text-input__clear_size_s, .g-text-input__clear_size_m { margin-inline-end: 1px; } .g-text-input__clear_size_l, .g-text-input__clear_size_xl { margin-inline-end: 2px; } .g-text-input__error-icon { box-sizing: content-box; color: var(--g-color-text-danger); padding-block: var(--_--error-icon-padding-block); padding-inline: var(--_--error-icon-padding-inline-start) var(--_--error-icon-padding-inline-end); } .g-text-input__error-popover { max-width: 300px; } .g-text-input__error-popover-content { padding: var(--g-spacing-5) var(--g-spacing-4); } .g-text-input__additional-content { display: flex; align-items: center; } .g-text-input_size_s .g-text-input__control { --_--input-control-border-width: var( --g-text-input-border-width, var(--g-text-area-border-width, 1px) ); font-family: var(--g-text-body-font-family); font-weight: var(--g-text-body-font-weight); font-size: var(--g-text-body-short-font-size); line-height: var(--g-text-body-short-line-height); height: calc(24px - var(--_--input-control-border-width) * 2); padding: 3px 8px; } .g-text-input_size_s .g-text-input__label { font-family: var(--g-text-body-font-family); font-weight: var(--g-text-body-font-weight); font-size: var(--g-text-body-short-font-size); line-height: var(--g-text-body-short-line-height); padding-block: 3px; padding-inline: 8px 4px; font-weight: var(--g-text-accent-font-weight); } .g-text-input_size_s.g-text-input_has-start-content .g-text-input__label { padding-inline-start: 2px; } .g-text-input_size_s .g-text-input__additional-content { height: 22px; } .g-text-input_size_s .g-text-input__additional-content_placement_start { padding-inline-start: 1px; } .g-text-input_size_s .g-text-input__additional-content_placement_end { padding-inline-end: 1px; } .g-text-input_size_s { --_--error-icon-padding-block: 5px; --_--error-icon-padding-inline-start: 0; --_--error-icon-padding-inline-end: 5px; --_--border-radius: var(--g-border-radius-s); } .g-text-input_size_m .g-text-input__control { --_--input-control-border-width: var( --g-text-input-border-width, var(--g-text-area-border-width, 1px) ); font-family: var(--g-text-body-font-family); font-weight: var(--g-text-body-font-weight); font-size: var(--g-text-body-short-font-size); line-height: var(--g-text-body-short-line-height); height: calc(28px - var(--_--input-control-border-width) * 2); padding: 5px 8px; } .g-text-input_size_m .g-text-input__label { font-family: var(--g-text-body-font-family); font-weight: var(--g-text-body-font-weight); font-size: var(--g-text-body-short-font-size); line-height: var(--g-text-body-short-line-height); padding-block: 5px; padding-inline: 8px 4px; font-weight: var(--g-text-accent-font-weight); } .g-text-input_size_m.g-text-input_has-start-content .g-text-input__label { padding-inline-start: 2px; } .g-text-input_size_m .g-text-input__additional-content { height: 26px; } .g-text-input_size_m .g-text-input__additional-content_placement_start { padding-inline-start: 1px; } .g-text-input_size_m .g-text-input__additional-content_placement_end { padding-inline-end: 1px; } .g-text-input_size_m { --_--error-icon-padding-block: 5px; --_--error-icon-padding-inline-start: 0; --_--error-icon-padding-inline-end: 5px; --_--border-radius: var(--g-border-radius-m); } .g-text-input_size_l .g-text-input__control { --_--input-control-border-width: var( --g-text-input-border-width, var(--g-text-area-border-width, 1px) ); font-family: var(--g-text-body-font-family); font-weight: var(--g-text-body-font-weight); font-size: var(--g-text-body-short-font-size); line-height: var(--g-text-body-short-line-height); height: calc(36px - var(--_--input-control-border-width) * 2); padding: 9px 12px; } .g-text-input_size_l .g-text-input__label { font-family: var(--g-text-body-font-family); font-weight: var(--g-text-body-font-weight); font-size: var(--g-text-body-short-font-size); line-height: var(--g-text-body-short-line-height); padding-block: 9px; padding-inline: 12px 4px; font-weight: var(--g-text-accent-font-weight); } .g-text-input_size_l.g-text-input_has-start-content .g-text-input__label { padding-inline-start: 3px; } .g-text-input_size_l .g-text-input__additional-content { height: 34px; } .g-text-input_size_l .g-text-input__additional-content_placement_start { padding-inline-start: 3px; } .g-text-input_size_l .g-text-input__additional-content_placement_end { padding-inline-end: 3px; } .g-text-input_size_l { --_--error-icon-padding-block: 9px; --_--error-icon-padding-inline-start: 0; --_--error-icon-padding-inline-end: 9px; --_--border-radius: var(--g-border-radius-l); } .g-text-input_size_xl .g-text-input__control { --_--input-control-border-width: var( --g-text-input-border-width, var(--g-text-area-border-width, 1px) ); font-family: var(--g-text-body-font-family); font-weight: var(--g-text-body-font-weight); font-size: var(--g-text-body-2-font-size); line-height: var(--g-text-body-2-line-height); height: calc(44px - var(--_--input-control-border-width) * 2); padding: 11px 12px; } .g-text-input_size_xl .g-text-input__label { font-family: var(--g-text-body-font-family); font-weight: var(--g-text-body-font-weight); font-size: var(--g-text-body-2-font-size); line-height: var(--g-text-body-2-line-height); padding-block: 11px; padding-inline: 12px 4px; font-weight: var(--g-text-accent-font-weight); } .g-text-input_size_xl.g-text-input_has-start-content .g-text-input__label { padding-inline-start: 3px; } .g-text-input_size_xl .g-text-input__additional-content { height: 42px; } .g-text-input_size_xl .g-text-input__additional-content_placement_start { padding-inline-start: 3px; } .g-text-input_size_xl .g-text-input__additional-content_placement_end { padding-inline-end: 3px; } .g-text-input_size_xl { --_--error-icon-padding-block: 13px; --_--error-icon-padding-inline-start: 0; --_--error-icon-padding-inline-end: 13px; --_--border-radius: var(--g-border-radius-xl); } .g-text-input_view_normal { --_--border-color: var(--g-color-line-generic); --_--border-color-hover: var(--g-color-line-generic-hover); --_--border-color-active: var(--g-color-line-generic-active); } .g-text-input_view_clear { --_--border-color: transparent; --_--border-color-hover: transparent; --_--border-color-active: transparent; --_--border-radius: 0; } .g-text-input_view_clear .g-text-input__content { border-inline: 0; } .g-text-input_view_clear .g-text-input__control { padding-inline: 0; } .g-text-input_pin_round-round .g-text-input__content { border-radius: var(--g-text-input-border-radius, var(--_--border-radius)); } .g-text-input_pin_brick-brick .g-text-input__content { border-radius: 0; } .g-text-input_pin_clear-clear .g-text-input__content { border-radius: 0; border-inline: 0; } .g-text-input_pin_circle-circle .g-text-input__content { border-radius: 100px; } .g-text-input_pin_round-brick .g-text-input__content { border-start-start-radius: var(--g-text-input-border-radius, var(--_--border-radius)); border-start-end-radius: 0; border-end-start-radius: var(--g-text-input-border-radius, var(--_--border-radius)); border-end-end-radius: 0; } .g-text-input_pin_brick-round .g-text-input__content { border-start-start-radius: 0; border-start-end-radius: var(--g-text-input-border-radius, var(--_--border-radius)); border-end-start-radius: 0; border-end-end-radius: var(--g-text-input-border-radius, var(--_--border-radius)); } .g-text-input_pin_round-clear .g-text-input__content { border-start-start-radius: var(--g-text-input-border-radius, var(--_--border-radius)); border-start-end-radius: 0; border-end-start-radius: var(--g-text-input-border-radius, var(--_--border-radius)); border-end-end-radius: 0; border-inline-end: 0; } .g-text-input_pin_clear-round .g-text-input__content { border-start-start-radius: 0; border-start-end-radius: var(--g-text-input-border-radius, var(--_--border-radius)); border-end-start-radius: 0; border-end-end-radius: var(--g-text-input-border-radius, var(--_--border-radius)); border-inline-start: 0; } .g-text-input_pin_brick-clear .g-text-input__content { border-radius: 0; border-inline-end: 0; } .g-text-input_pin_clear-brick .g-text-input__content { border-radius: 0; border-inline-start: 0; } .g-text-input_pin_circle-brick .g-text-input__content { border-start-start-radius: 100px; border-start-end-radius: 0; border-end-start-radius: 100px; border-end-end-radius: 0; } .g-text-input_pin_brick-circle .g-text-input__content { border-start-start-radius: 0; border-start-end-radius: 100px; border-end-start-radius: 0; border-end-end-radius: 100px; } .g-text-input_pin_circle-clear .g-text-input__content { border-start-start-radius: 100px; border-start-end-radius: 0; border-end-start-radius: 100px; border-end-end-radius: 0; border-inline-end: 0; } .g-text-input_pin_clear-circle .g-text-input__content { border-start-start-radius: 0; border-start-end-radius: 100px; border-end-start-radius: 0; border-end-end-radius: 100px; border-inline-start: 0; } .g-text-input_disabled { --_--text-color: var(--g-color-text-hint); --_--background-color: var(--g-color-base-generic-accent-disabled); --_--border-color: transparent; --_--border-color-hover: transparent; --_--border-color-active: transparent; } .g-text-input_has-scrollbar .g-text-input__clear { inset-inline-end: var(--g-scrollbar-width); } .g-text-input_has-start-content .g-text-input__control { padding-inline-start: 2px; } .g-text-input_has-end-content { --_--error-icon-padding-inline-start: 0; --_--error-icon-padding-inline-end: 0; } .g-text-input_has-end-content .g-text-input__control { padding-inline-end: 2px; } .g-text-input_state_error.g-text-input_view_normal .g-text-input__content, .g-text-input_state_error.g-text-input_view_normal .g-text-input__content:focus-within { border-color: var(--g-color-line-danger); } @media (hover: hover) { .g-text-input_state_error.g-text-input_view_normal .g-text-input__content:hover { border-color: var(--g-color-line-danger); } } .g-text-input_state_error.g-text-input_view_normal .g-text-input__content:focus-within { --_--focus-outline-color: var(--g-color-line-danger); } .g-text-input_state_error.g-text-input_view_clear .g-text-input__content, .g-text-input_state_error.g-text-input_view_clear .g-text-input__content:focus-within { border-block-end: 1px solid var(--g-color-line-danger); } @media (hover: hover) { .g-text-input_state_error.g-text-input_view_clear .g-text-input__content:hover { border-block-end: 1px solid var(--g-color-line-danger); } } .g-text-input_state_error.g-text-input_view_clear .g-text-input__content:focus-within { --_--focus-outline-color: var(--g-color-line-danger); } /* build/esm/components/Card/Card.css */ .g-card { --_--background-color: transparent; --_--border-color: transparent; --_--border-width: 0; --_--box-shadow: none; box-shadow: var(--g-card-box-shadow, var(--_--box-shadow)); box-sizing: border-box; background-color: var(--g-card-background-color, var(--_--background-color)); border: var(--g-card-border-width, var(--_--border-width)) solid var(--g-card-border-color, var(--_--border-color)); border-radius: var(--g-card-border-radius, var(--_--border-radius)); outline: none; } .g-card_theme_normal { --_--border-color: var(--g-color-line-generic); --_--background-color: var(--g-color-base-generic); } .g-card_theme_info { --_--border-color: var(--g-color-line-info); --_--background-color: var(--g-color-base-info-light); } .g-card_theme_success { --_--border-color: var(--g-color-line-positive); --_--background-color: var(--g-color-base-positive-light); } .g-card_theme_warning { --_--border-color: var(--g-color-line-warning); --_--background-color: var(--g-color-base-warning-light); } .g-card_theme_danger { --_--border-color: var(--g-color-line-danger); --_--background-color: var(--g-color-base-danger-light); } .g-card_theme_utility { --_--border-color: var(--g-color-line-utility); --_--background-color: var(--g-color-base-utility-light); } .g-card_view_clear { --_--background-color: transparent; } .g-card_view_outlined { --_--background-color: transparent; --_--border-width: 1px; } .g-card_type_action { --_--background-color: var(--g-color-base-float); --_--box-shadow: 0px 1px 5px var(--g-color-sfx-shadow); } .g-card_type_action::after { position: absolute; inset: 0; border-radius: var(--g-card-border-radius, var(--_--border-radius)); pointer-events: none; } .g-card_type_action.g-card_clickable { cursor: pointer; position: relative; } @media (hover: hover) { .g-card_type_action.g-card_clickable:hover { --_--box-shadow: 0px 3px 10px var(--g-color-sfx-shadow); } } .g-card_type_action.g-card_clickable:focus-visible::after { outline: 2px solid var(--g-color-line-focus); content: ""; } .g-card_type_selection { --_--border-width: 1px; --_--border-color: var(--g-color-line-generic); position: relative; } .g-card_type_selection::before { position: absolute; inset: -1px; border-radius: var(--g-card-border-radius, var(--_--border-radius)); pointer-events: none; } .g-card_type_selection::after { position: absolute; inset: 0; border-radius: var(--g-card-border-radius, var(--_--border-radius)); pointer-events: none; } .g-card_type_selection.g-card_clickable { cursor: pointer; } @media (hover: hover) { .g-card_type_selection.g-card_clickable:hover { --_--border-color: transparent; } .g-card_type_selection.g-card_clickable:hover:not(.g-card_selected)::before { content: ""; border: 2px solid var(--g-color-line-brand); opacity: 0.5; } .g-card_type_selection.g-card_clickable:hover:focus-visible::before { border-color: transparent; } } .g-card_type_selection.g-card_clickable:focus-visible::after { outline: 2px solid var(--g-color-line-focus); content: ""; } .g-card_type_selection.g-card_selected:not(.g-card_disabled) { --_--border-color: transparent; } .g-card_type_selection.g-card_selected:not(.g-card_disabled)::before { content: ""; border: 2px solid var(--g-color-line-brand); } .g-card_type_selection.g-card_view_clear { --_--border-color: transparent; } .g-card_type_container.g-card_view_raised { --_--background-color: var(--g-color-base-float); } .g-card_type_container.g-card_view_raised.g-card_size_m { --_--box-shadow: 0px 1px 5px var(--g-color-sfx-shadow); } .g-card_type_container.g-card_view_raised.g-card_size_l { --_--box-shadow: 0px 1px 6px var(--g-color-sfx-shadow-light), 1px 3px 13px var(--g-color-sfx-shadow-light); } .g-card_size_m { --_--border-radius: 8px; } .g-card_size_l { --_--border-radius: 16px; } /* build/esm/components/Label/Label.css */ .g-label { --_--bg-color: none; --_--bg-color-hover: none; --_--text-color: none; --_--animation-from: calc(-100% * var(--g-flow-direction)); --_--animation-to: calc(100% * var(--g-flow-direction)); --_--gradient-deg: calc(90deg * var(--g-flow-direction)); --_--gradient-mask-begin-color: rgba(233, 233, 233, 0); --_--gradient-mask-end-color: rgba(233, 233, 233, 1); display: inline-flex; align-items: center; position: relative; height: var(--_--height); border-radius: var(--_--border-radius); color: var(--_--text-color); background-color: var(--_--bg-color); transition-property: opacity, color, background-color; transition-duration: 0.15s; transition-timing-function: ease-in-out; box-sizing: border-box; /* make new stacking context to isolate z-indexes */ isolation: isolate; } .g-label__animation-container { overflow: hidden; position: absolute; inset: 0; border-radius: inherit; } .g-label__animation-container::after { position: absolute; z-index: -1; inset: 0; content: ""; background-color: var(--_--gradient-bg-color, var(--_--bg-color)); mask-image: linear-gradient(var(--_--gradient-deg), var(--_--gradient-mask-begin-color), var(--_--gradient-mask-end-color)); animation: g-label 2s linear infinite; } .g-label__text { font-family: var(--g-text-body-font-family); font-weight: var(--g-text-body-font-weight); font-size: var(--g-text-body-short-font-size); line-height: var(--g-text-body-short-line-height); display: flex; align-items: baseline; margin: 0 var(--_--margin-inline); width: 100%; text-align: center; white-space: nowrap; overflow: hidden; } .g-label__content, .g-label__key { text-overflow: ellipsis; overflow: hidden; } .g-label__value { display: flex; opacity: 0.7; overflow: hidden; } .g-label__separator { margin: 0 4px; } .g-label__main-button { margin: 0; padding: 0; font-family: var(--g-text-body-font-family); font-size: inherit; font-weight: var(--g-text-body-font-weight); color: inherit; background: none; border: none; appearance: none; user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; cursor: pointer; border-radius: inherit; z-index: 1; height: 100%; } .g-label__main-button:empty { position: absolute; inset: 0; } .g-label__addon { display: flex; align-items: center; justify-content: center; width: var(--_--height); height: var(--_--height); border-radius: var(--_--border-radius); } .g-label__addon_side_start, .g-label__addon_side_end { position: absolute; inset-block-start: 0; } .g-label__addon_side_start { inset-inline-start: 2px; border-start-end-radius: 0; border-end-end-radius: 0; } .g-label__addon_side_end { inset-inline-end: 0; border-start-start-radius: 0; border-end-start-radius: 0; } .g-label__addon_type_button { margin: 0; padding: 0; font-family: var(--g-text-body-font-family); font-size: inherit; font-weight: var(--g-text-body-font-weight); color: inherit; background: none; border: none; appearance: none; user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; cursor: pointer; z-index: 2; cursor: pointer; color: var(--_--text-color); background-color: transparent; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, transform 0.1s ease-out; } .g-label__addon_type_button:active { transform: scale(0.96); } .g-label_size_2xs { --_--height: 18px; --_--border-radius: var(--g-border-radius-xs); --_--margin-inline: 6px; --_--margin-addon-start: 22px; --_--margin-addon-end: 20px; } .g-label_size_xs { --_--height: 20px; --_--border-radius: var(--g-border-radius-xs); --_--margin-inline: 8px; --_--margin-addon-start: 24px; --_--margin-addon-end: 22px; } .g-label_size_s { --_--height: 24px; --_--border-radius: var(--g-border-radius-s); --_--margin-inline: 10px; --_--margin-addon-start: 28px; --_--margin-addon-end: 26px; } .g-label_size_m { --_--height: 28px; --_--border-radius: var(--g-border-radius-m); --_--margin-inline: 12px; --_--margin-addon-start: 32px; --_--margin-addon-end: 32px; } .g-label_disabled { opacity: 0.7; pointer-events: none; } .g-label_interactive { cursor: pointer; } .g-label_width_auto { max-width: 100%; } .g-label_theme_normal { --_--bg-color: var(--g-color-base-misc-light); --_--bg-color-hover: var(--g-color-base-misc-light-hover); --_--text-color: var(--g-color-text-misc-heavy); } .g-label_theme_success { --_--bg-color: var(--g-color-base-positive-light); --_--bg-color-hover: var(--g-color-base-positive-light-hover); --_--text-color: var(--g-color-text-positive-heavy); } .g-label_theme_info { --_--bg-color: var(--g-color-base-info-light); --_--bg-color-hover: var(--g-color-base-info-light-hover); --_--text-color: var(--g-color-text-info-heavy); } .g-label_theme_warning { --_--bg-color: var(--g-color-base-warning-light); --_--bg-color-hover: var(--g-color-base-warning-light-hover); --_--text-color: var(--g-color-text-warning-heavy); } .g-label_theme_danger { --_--bg-color: var(--g-color-base-danger-light); --_--bg-color-hover: var(--g-color-base-danger-light-hover); --_--text-color: var(--g-color-text-danger-heavy); } .g-label_theme_utility { --_--bg-color: var(--g-color-base-utility-light); --_--bg-color-hover: var(--g-color-base-utility-light-hover); --_--text-color: var(--g-color-text-utility-heavy); } .g-label_theme_unknown { --_--bg-color: var(--g-color-base-neutral-light); --_--bg-color-hover: var(--g-color-base-neutral-light-hover); --_--text-color: var(--g-color-text-complementary); } .g-label_theme_clear { --_--bg-color: transparent; --_--bg-color-hover: var(--g-color-base-simple-hover); --_--text-color: var(--g-color-text-complementary); --_--gradient-bg-color: var(--g-color-base-neutral-light); box-shadow: inset 0 0 0 1px var(--g-color-line-generic); } .g-label:has(.g-label__addon_side_start) .g-label__text { margin-inline-start: var(--_--margin-addon-start); } .g-label:has(.g-label__addon_side_end) .g-label__text { margin-inline-end: var(--_--margin-addon-end); } @media (hover: hover) { .g-label_interactive:hover:not(:has(.g-label__addon_type_button:not(.g-label__addon_action_copy):hover)), .g-label__addon_type_button:not(.g-label__addon_action_copy):hover { background-color: var(--_--bg-color-hover); } } .g-label__main-button:focus-visible, .g-label__addon_type_button:focus-visible { outline: 2px solid var(--g-color-line-focus); } @keyframes g-label { 0% { transform: translateX(var(--_--animation-from)); } 100% { transform: translateX(var(--_--animation-to)); } } /* build/esm/components/Alert/Alert.css */ .g-alert { --_--icon-margin-inline-end: var(--g-spacing-2); --_--title-font-weight: var(--g-text-subheader-font-weight); --_--message-font-weight: var(--g-text-body-font-weight); --_--message-font-size: var(--g-text-body-1-font-size); --_--message-line-height: var(--g-text-body-1-line-height); padding: var(--g-alert-padding, var(--_--padding)); --g-card-border-radius: var(--g-alert-border-radius, var(--_--border-radius)); display: flex; align-items: var(--_--align); } .g-alert_align_baseline { --_--align: baseline; } .g-alert_align_center { --_--align: center; } .g-alert_corners_square { --g-card-border-radius: 0; } .g-alert_size_s { --_--padding: 11px var(--g-spacing-3); --_--border-radius: var(--g-border-radius-m); --_--alert-message-title-indent: 0; --_--content-gap: var(--g-spacing-2); --_--close-btn-margin: 20px; --_--title-font-size: var(--g-text-subheader-1-font-size); --_--title-line-height: var(--g-text-subheader-1-line-height); } .g-alert_size_m { --_--padding: var(--g-spacing-4) var(--g-spacing-5); --_--icon-margin-inline-end: var(--g-spacing-3); --_--border-radius: var(--g-border-radius-l); --_--alert-message-title-indent: var(--g-spacing-1); --_--close-btn-margin: var(--g-spacing-3); --_--content-gap: var(--g-spacing-5); --_--title-font-size: var(--g-text-subheader-2-font-size); --_--title-line-height: var(--g-text-subheader-2-line-height); } .g-alert_size_l { --_--padding: var(--g-spacing-6); --_--border-radius: 12px; --_--icon-margin-inline-end: var(--g-spacing-4); --_--close-btn-margin: 6px; --_--alert-message-title-indent: var(--g-spacing-2); --_--content-gap: var(--g-spacing-5); --_--title-font-size: var(--g-text-subheader-3-font-size); --_--title-line-height: var(--g-text-subheader-3-line-height); --_--message-font-size: var(--g-text-body-2-font-size); --_--message-line-height: var(--g-text-body-2-line-height); } .g-alert__icon-wrapper { margin-inline-end: var(--g-alert-icon-margin-inline-end, var(--_--icon-margin-inline-end)); } .g-alert__icon-wrapper_align_baseline { position: relative; inset-block-start: -1px; } .g-alert__main { flex-grow: 1; min-width: 0; display: flex; gap: var(--g-alert-actions-margin, var(--_--content-gap)); } .g-alert__main_layout_vertical { flex-direction: column; } .g-alert__main_layout_horizontal { flex-direction: row; justify-content: space-between; align-items: var(--_--align); } .g-alert__content { flex-grow: 1; min-width: 0; } .g-alert__title { color: var(--g-alert-title-text-color, var(--g-color-text-primary)); font-size: var(--g-alert-title-font-size, var(--_--title-font-size)); font-weight: var(--_--title-font-weight); line-height: var(--g-alert-title-line-height, var(--_--title-line-height)); } .g-alert__message { color: var(--g-alert-message-text-color, var(--g-color-text-primary)); font-size: var(--g-alert-message-font-size, var(--_--message-font-size)); font-weight: var(--g-alert-message-font-weight, var(--_--message-font-weight)); line-height: var(--g-alert-message-line-height, var(--_--message-line-height)); } .g-alert__message_with-top-margin { margin-block-start: var(--g-alert-message-title-indent, var(--_--alert-message-title-indent)); } .g-alert__actions { display: flex; gap: var(--g-alert-actions-gap, var(--g-spacing-3)); } .g-alert__actions_horizontal { flex-flow: row wrap; align-items: center; } .g-alert__actions_vertical { flex-direction: column; justify-content: center; align-items: flex-start; } .g-alert__close-btn { flex-shrink: 0; margin-inline-start: var(--g-alert-close-btn-margin, var(--_--close-btn-margin)); } /* build/esm/components/Link/Link.css */ .g-link { text-decoration: none; touch-action: manipulation; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; border-radius: var(--g-focus-border-radius); } .g-link:focus-visible { outline: 2px solid var(--g-color-line-focus); } .g-link_view_normal { color: var(--g-color-text-link); } .g-link_view_primary { color: var(--g-color-text-primary); } .g-link_view_secondary { color: var(--g-color-text-secondary); } @media (hover: hover) { .g-link_view_normal:hover, .g-link_view_primary:hover, .g-link_view_secondary:hover { color: var(--g-color-text-link-hover); } } .g-link_visitable:visited { color: var(--g-color-text-link-visited); } @media (hover: hover) { .g-link_visitable:visited:hover { color: var(--g-color-text-link-visited-hover); } } .g-link_underline { text-decoration: underline; } /* build/esm/components/User/User.css */ .g-user { --_--avatar-offset: var(--g-spacing-2); --_--name-font-weight: var(--g-text-body-font-weight); --_--name-font-size: var(--g-text-body-short-font-size); --_--name-line-height: var(--g-text-body-short-line-height); --_--description-font-weight: var(--g-text-body-font-weight); --_--description-font-size: var(--g-text-body-short-font-size); --_--description-line-height: var(--g-text-body-short-line-height); display: flex; align-items: center; gap: var(--g-user-avatar-offset, var(--_--avatar-offset)); } .g-user_size_3xs, .g-user_size_2xs, .g-user_size_xs, .g-user_size_s { --_--avatar-offset: calc(var(--g-spacing-base) * 1.5); } .g-user_size_m { --_--avatar-offset: var(--g-spacing-2); } .g-user_size_l, .g-user_size_xl { --_--avatar-offset: var(--g-spacing-3); } .g-user_size_3xs, .g-user_size_2xs, .g-user_size_xs, .g-user_size_s, .g-user_size_m, .g-user_size_l { --_--name-font-size: var(--g-text-body-short-font-size); --_--name-line-height: var(--g-text-body-short-line-height); } .g-user_size_xl { --_--name-font-size: var(--g-text-body-2-font-size); --_--name-line-height: var(--g-text-body-2-line-height); } .g-user__avatar { display: flex; align-items: center; } .g-user__info { flex: auto; display: flex; flex-direction: column; min-width: 0; } .g-user__info .g-user__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--g-color-text-primary); font-weight: var(--g-user-name-font-weight, var(--_--name-font-weight)); font-size: var(--g-user-name-font-size, var(--_--name-font-size)); line-height: var(--g-user-name-line-height, var(--_--name-line-height)); } .g-user__info .g-user__description { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--g-color-text-secondary); font-weight: var(--g-user-description-font-weight, var(--_--description-font-weight)); font-size: var(--g-user-description-font-size, var(--_--description-font-size)); line-height: var(--g-user-description-line-height, var(--_--description-line-height)); } /* build/esm/components/SegmentedRadioGroup/SegmentedRadioGroup.css */ .g-segmented-radio-group { --_--border-width: 1px; --_--transition-time: 0.15s; box-sizing: border-box; display: inline-flex; flex-direction: row; font-family: var(--g-text-body-font-family); font-weight: var(--g-text-body-font-weight); position: relative; } .g-segmented-radio-group__option { position: relative; flex: 1 1 auto; user-select: none; font-size: var(--g-text-body-1-font-size); text-align: center; cursor: pointer; transform: scale(1); transition: color var(--_--transition-time) linear; } .g-segmented-radio-group__option::before { position: absolute; inset-inline-start: 0; inset-block: var(--_--border-width); content: ""; width: var(--_--border-width); background-color: var(--g-color-line-generic); } .g-segmented-radio-group__option::after { content: ""; position: absolute; z-index: -1; inset: 0; border: var(--_--border-width) solid var(--g-color-line-generic); border-radius: 0; transition: background-color var(--_--transition-time) linear, border-color var(--_--transition-time) linear; } .g-segmented-radio-group__option:not(:first-child):not(.g-segmented-radio-group__option_checked)::after { border-inline-start-width: 0; } .g-segmented-radio-group__option:not(:last-child):not(.g-segmented-radio-group__option_checked):after { border-inline-end-width: 0; } .g-segmented-radio-group__option:first-child { border-start-start-radius: var(--_--border-radius); border-end-start-radius: var(--_--border-radius); } .g-segmented-radio-group__option:first-child::before { display: none; } .g-segmented-radio-group__option:first-child::after { border-start-start-radius: var(--_--border-radius); border-end-start-radius: var(--_--border-radius); } .g-segmented-radio-group__option:last-child { border-start-end-radius: var(--_--border-radius); border-end-end-radius: var(--_--border-radius); } .g-segmented-radio-group__option:last-child::after { border-start-end-radius: var(--_--border-radius); border-end-end-radius: var(--_--border-radius); } @media (hover: hover) { .g-segmented-radio-group__option:not(.g-segmented-radio-group__option_checked):not(.g-segmented-radio-group__option_disabled):hover::after { background-color: var(--g-color-base-simple-hover); } .g-segmented-radio-group__option:not(.g-segmented-radio-group__option_checked):not(.g-segmented-radio-group__option_disabled):hover .g-segmented-radio-group__option-text { color: var(--g-color-text-primary); } } .g-segmented-radio-group__option:has(.g-segmented-radio-group__option-control:focus-visible) { outline: 2px solid var(--g-color-line-misc); outline-offset: calc(-1 * var(--_--border-width)); } .g-segmented-radio-group__option-control { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: none; outline: none; opacity: 0; cursor: inherit; } .g-segmented-radio-group__option-text { display: inline-flex; justify-content: center; align-items: center; gap: 8px; white-space: nowrap; color: var(--g-color-text-complementary); overflow: hidden; } .g-segmented-radio-group__option-text_icon { height: 100%; display: flex; align-items: center; } .g-segmented-radio-group__option_checked { cursor: default; border-color: var(--g-color-line-brand); } .g-segmented-radio-group__option_checked .g-segmented-radio-group__option-text { color: var(--g-color-text-brand-heavy); } .g-segmented-radio-group__option_checked::after { background-color: var(--g-color-base-selection); border-color: var(--g-color-line-brand); } .g-segmented-radio-group__option_checked::before, .g-segmented-radio-group__option_checked + .g-segmented-radio-group__option::before { background-color: transparent; } .g-segmented-radio-group__option_disabled { cursor: default; } .g-segmented-radio-group__option_disabled::after { background-color: var(--g-color-base-generic); } .g-segmented-radio-group__option_disabled .g-segmented-radio-group__option-text { color: var(--g-color-text-hint); } .g-segmented-radio-group__option_disabled.g-segmented-radio-group__option_checked::after { background-color: var(--g-color-base-generic-accent); border-color: var(--g-color-line-generic-accent); } .g-segmented-radio-group__option_disabled.g-segmented-radio-group__option_checked .g-segmented-radio-group__option-text { color: var(--g-color-text-secondary); } .g-segmented-radio-group__option::before { z-index: -1; } .g-segmented-radio-group_size_s .g-segmented-radio-group__option { height: 24px; line-height: 24px; } .g-segmented-radio-group_size_s .g-segmented-radio-group__option-text { margin: 0 10px; } .g-segmented-radio-group_size_s { --_--border-radius: var(--g-border-radius-s); } .g-segmented-radio-group_size_m .g-segmented-radio-group__option { height: 28px; line-height: 28px; } .g-segmented-radio-group_size_m .g-segmented-radio-group__option-text { margin: 0 13px; } .g-segmented-radio-group_size_m { --_--border-radius: var(--g-border-radius-m); } .g-segmented-radio-group_size_l .g-segmented-radio-group__option { height: 36px; line-height: 36px; } .g-segmented-radio-group_size_l .g-segmented-radio-group__option-text { margin: 0 18px; } .g-segmented-radio-group_size_l { --_--border-radius: var(--g-border-radius-l); } .g-segmented-radio-group_size_xl .g-segmented-radio-group__option { height: 44px; line-height: 44px; font-size: var(--g-text-body-2-font-size); } .g-segmented-radio-group_size_xl .g-segmented-radio-group__option-text { margin: 0 25px; } .g-segmented-radio-group_size_xl { --_--border-radius: var(--g-border-radius-xl); } .g-segmented-radio-group_width_auto { max-width: 100%; } .g-segmented-radio-group_width_max { width: 100%; } .g-segmented-radio-group_width_auto .g-segmented-radio-group__option, .g-segmented-radio-group_width_max .g-segmented-radio-group__option { overflow: hidden; } .g-segmented-radio-group_width_auto .g-segmented-radio-group__option-text, .g-segmented-radio-group_width_max .g-segmented-radio-group__option-text { display: block; overflow: hidden; text-overflow: ellipsis; } /* build/esm/components/Switch/Switch.css */ .g-switch { position: relative; } .g-switch__control { position: absolute; inset: 0; margin: 0; padding: 0; opacity: 0; background: none; border: none; outline: none; cursor: inherit; } .g-switch__indicator { position: relative; } .g-switch__indicator::before { content: ""; position: absolute; inset: 0; background-color: var(--g-color-base-generic-medium); transition: background 0.1s linear; } .g-switch__slider { position: absolute; content: ""; border-radius: 50%; background-color: var(--g-color-base-background); transition: transform 0.15s ease-out; } .g-switch__outline { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 100%; height: 100%; background: none; pointer-events: none; } .g-switch__control:focus-visible + .g-switch__outline { outline: 2px solid var(--g-color-line-focus); outline-offset: 1px; } .g-switch_loading .g-switch__slider::after { content: ""; position: absolute; box-sizing: border-box; border-radius: 50%; inset-inline-start: 2px; inset-block-start: 2px; border-color: var(--g-color-base-generic-accent); border-style: solid; border-block-start-color: transparent; animation: g-spin 1s linear infinite; } @media (prefers-reduced-motion: reduce) { .g-switch_loading .g-switch__slider::after { animation: none; } } .g-switch_size_s .g-switch__indicator, .g-switch_size_s .g-switch__indicator::before, .g-switch_size_s .g-switch__outline { width: 28px; height: 16px; border-radius: 10px; } .g-switch_size_s .g-switch__slider { inset-block-start: 2px; inset-inline-start: 2px; width: 12px; height: 12px; } .g-switch_size_s .g-switch__slider::after { width: 8px; height: 8px; border-width: 2px; } .g-switch_size_m .g-switch__indicator, .g-switch_size_m .g-switch__indicator::before, .g-switch_size_m .g-switch__outline { width: 36px; height: 20px; border-radius: 10px; } .g-switch_size_m .g-switch__slider { inset-block-start: 2px; inset-inline-start: 2px; width: 16px; height: 16px; } .g-switch_size_m .g-switch__slider::after { width: 12px; height: 12px; border-width: 2px; } .g-switch_size_l .g-switch__indicator, .g-switch_size_l .g-switch__indicator::before, .g-switch_size_l .g-switch__outline { width: 42px; height: 24px; border-radius: 12px; } .g-switch_size_l .g-switch__slider { inset-block-start: 3px; inset-inline-start: 3px; width: 18px; height: 18px; } .g-switch_size_l .g-switch__slider::after { width: 14px; height: 14px; border-width: 2px; } @media (hover: hover) { .g-switch:hover .g-switch__indicator::before { background-color: var(--g-color-base-generic-medium-hover); } } .g-switch_checked .g-switch__slider { --_--translate-x: calc(100% * var(--g-flow-direction)); transform: translateX(var(--_--translate-x)); } .g-switch_checked.g-switch_loading .g-switch__slider::after { border-color: var(--g-color-base-brand); border-block-start-color: transparent; } .g-switch_checked .g-switch__indicator::before { background-color: var(--g-color-base-brand); } @media (hover: hover) { .g-switch_checked:hover .g-switch__indicator::before { background-color: var(--g-color-base-brand); } } .g-switch_disabled .g-switch__indicator::before { background-color: var(--g-color-base-generic-accent-disabled); } .g-switch_disabled.g-switch_checked .g-switch__indicator::before { background-color: var(--g-color-base-brand); opacity: 0.5; } .g-switch_disabled .g-switch__slider::after { opacity: 0.5; } @keyframes g-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }