| 1 | @charset "UTF-8";
|
| 2 | html,
|
| 3 | body,
|
| 4 | div,
|
| 5 | span,
|
| 6 | applet,
|
| 7 | object,
|
| 8 | iframe,
|
| 9 | h1,
|
| 10 | h2,
|
| 11 | h3,
|
| 12 | h4,
|
| 13 | h5,
|
| 14 | h6,
|
| 15 | p,
|
| 16 | blockquote,
|
| 17 | pre,
|
| 18 | a,
|
| 19 | abbr,
|
| 20 | acronym,
|
| 21 | address,
|
| 22 | big,
|
| 23 | cite,
|
| 24 | code,
|
| 25 | del,
|
| 26 | dfn,
|
| 27 | em,
|
| 28 | img,
|
| 29 | ins,
|
| 30 | kbd,
|
| 31 | q,
|
| 32 | s,
|
| 33 | samp,
|
| 34 | small,
|
| 35 | strike,
|
| 36 | strong,
|
| 37 | sub,
|
| 38 | sup,
|
| 39 | tt,
|
| 40 | var,
|
| 41 | b,
|
| 42 | u,
|
| 43 | i,
|
| 44 | center,
|
| 45 | dl,
|
| 46 | dt,
|
| 47 | dd,
|
| 48 | ol,
|
| 49 | ul,
|
| 50 | li,
|
| 51 | fieldset,
|
| 52 | form,
|
| 53 | label,
|
| 54 | legend,
|
| 55 | table,
|
| 56 | caption,
|
| 57 | tbody,
|
| 58 | tfoot,
|
| 59 | thead,
|
| 60 | tr,
|
| 61 | th,
|
| 62 | td,
|
| 63 | article,
|
| 64 | aside,
|
| 65 | canvas,
|
| 66 | details,
|
| 67 | embed,
|
| 68 | figure,
|
| 69 | figcaption,
|
| 70 | footer,
|
| 71 | header,
|
| 72 | hgroup,
|
| 73 | menu,
|
| 74 | nav,
|
| 75 | output,
|
| 76 | ruby,
|
| 77 | section,
|
| 78 | summary,
|
| 79 | time,
|
| 80 | mark,
|
| 81 | audio,
|
| 82 | video {
|
| 83 | padding: 0;
|
| 84 | border: 0;
|
| 85 | margin: 0;
|
| 86 | font: inherit;
|
| 87 | font-feature-settings: "liga" 1;
|
| 88 | font-size: 100%;
|
| 89 | vertical-align: baseline;
|
| 90 | }
|
| 91 |
|
| 92 | button,
|
| 93 | select,
|
| 94 | input,
|
| 95 | textarea {
|
| 96 | border-radius: 0;
|
| 97 | font-family: inherit;
|
| 98 | }
|
| 99 |
|
| 100 |
|
| 101 | article,
|
| 102 | aside,
|
| 103 | details,
|
| 104 | figcaption,
|
| 105 | figure,
|
| 106 | footer,
|
| 107 | header,
|
| 108 | hgroup,
|
| 109 | menu,
|
| 110 | nav,
|
| 111 | section {
|
| 112 | display: block;
|
| 113 | }
|
| 114 |
|
| 115 | body {
|
| 116 | background-color: var(--cds-background, #ffffff);
|
| 117 | color: var(--cds-text-primary, #161616);
|
| 118 | line-height: 1;
|
| 119 | }
|
| 120 |
|
| 121 | ol,
|
| 122 | ul {
|
| 123 | list-style: none;
|
| 124 | }
|
| 125 |
|
| 126 | blockquote,
|
| 127 | q {
|
| 128 | quotes: none;
|
| 129 | }
|
| 130 |
|
| 131 | blockquote::before,
|
| 132 | blockquote::after,
|
| 133 | q::before,
|
| 134 | q::after {
|
| 135 | content: "";
|
| 136 | content: none;
|
| 137 | }
|
| 138 |
|
| 139 | table {
|
| 140 | border-collapse: collapse;
|
| 141 | border-spacing: 0;
|
| 142 | }
|
| 143 |
|
| 144 | html {
|
| 145 | box-sizing: border-box;
|
| 146 | }
|
| 147 |
|
| 148 | *,
|
| 149 | *::before,
|
| 150 | *::after {
|
| 151 | box-sizing: inherit;
|
| 152 | }
|
| 153 |
|
| 154 | html {
|
| 155 | font-size: 100%;
|
| 156 | }
|
| 157 |
|
| 158 | body {
|
| 159 | font-weight: 400;
|
| 160 | font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
|
| 161 | -moz-osx-font-smoothing: grayscale;
|
| 162 | -webkit-font-smoothing: antialiased;
|
| 163 | text-rendering: optimizeLegibility;
|
| 164 | }
|
| 165 |
|
| 166 | code {
|
| 167 | font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
|
| 168 | }
|
| 169 |
|
| 170 | strong {
|
| 171 | font-weight: 600;
|
| 172 | }
|
| 173 |
|
| 174 | @media screen and (-ms-high-contrast: active) {
|
| 175 | svg {
|
| 176 | fill: ButtonText;
|
| 177 | }
|
| 178 | }
|
| 179 | h1 {
|
| 180 | font-size: var(--cds-heading-06-font-size, 2.625rem);
|
| 181 | font-weight: var(--cds-heading-06-font-weight, 300);
|
| 182 | line-height: var(--cds-heading-06-line-height, 1.199);
|
| 183 | letter-spacing: var(--cds-heading-06-letter-spacing, 0);
|
| 184 | }
|
| 185 |
|
| 186 | h2 {
|
| 187 | font-size: var(--cds-heading-05-font-size, 2rem);
|
| 188 | font-weight: var(--cds-heading-05-font-weight, 400);
|
| 189 | line-height: var(--cds-heading-05-line-height, 1.25);
|
| 190 | letter-spacing: var(--cds-heading-05-letter-spacing, 0);
|
| 191 | }
|
| 192 |
|
| 193 | h3 {
|
| 194 | font-size: var(--cds-heading-04-font-size, 1.75rem);
|
| 195 | font-weight: var(--cds-heading-04-font-weight, 400);
|
| 196 | line-height: var(--cds-heading-04-line-height, 1.28572);
|
| 197 | letter-spacing: var(--cds-heading-04-letter-spacing, 0);
|
| 198 | }
|
| 199 |
|
| 200 | h4 {
|
| 201 | font-size: var(--cds-heading-03-font-size, 1.25rem);
|
| 202 | font-weight: var(--cds-heading-03-font-weight, 400);
|
| 203 | line-height: var(--cds-heading-03-line-height, 1.4);
|
| 204 | letter-spacing: var(--cds-heading-03-letter-spacing, 0);
|
| 205 | }
|
| 206 |
|
| 207 | h5 {
|
| 208 | font-size: var(--cds-heading-02-font-size, 1rem);
|
| 209 | font-weight: var(--cds-heading-02-font-weight, 600);
|
| 210 | line-height: var(--cds-heading-02-line-height, 1.5);
|
| 211 | letter-spacing: var(--cds-heading-02-letter-spacing, 0);
|
| 212 | }
|
| 213 |
|
| 214 | h6 {
|
| 215 | font-size: var(--cds-heading-01-font-size, 0.875rem);
|
| 216 | font-weight: var(--cds-heading-01-font-weight, 600);
|
| 217 | line-height: var(--cds-heading-01-line-height, 1.42857);
|
| 218 | letter-spacing: var(--cds-heading-01-letter-spacing, 0.16px);
|
| 219 | }
|
| 220 |
|
| 221 | p {
|
| 222 | font-size: var(--cds-body-02-font-size, 1rem);
|
| 223 | font-weight: var(--cds-body-02-font-weight, 400);
|
| 224 | line-height: var(--cds-body-02-line-height, 1.5);
|
| 225 | letter-spacing: var(--cds-body-02-letter-spacing, 0);
|
| 226 | }
|
| 227 |
|
| 228 | a {
|
| 229 | color: var(--cds-link-primary, #0062fe);
|
| 230 | }
|
| 231 |
|
| 232 | em {
|
| 233 | font-style: italic;
|
| 234 | }
|
| 235 |
|
| 236 | @font-face {
|
| 237 | font-display: "swap";
|
| 238 | font-family: "IBM Plex Mono";
|
| 239 | font-style: normal;
|
| 240 | font-weight: 300;
|
| 241 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Light-Cyrillic.woff2") format("woff2");
|
| 242 | unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9";
|
| 243 | }
|
| 244 | @font-face {
|
| 245 | font-display: "swap";
|
| 246 | font-family: "IBM Plex Mono";
|
| 247 | font-style: normal;
|
| 248 | font-weight: 300;
|
| 249 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Light-Pi.woff2") format("woff2");
|
| 250 | unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC";
|
| 251 | }
|
| 252 | @font-face {
|
| 253 | font-display: "swap";
|
| 254 | font-family: "IBM Plex Mono";
|
| 255 | font-style: normal;
|
| 256 | font-weight: 300;
|
| 257 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Light-Latin3.woff2") format("woff2");
|
| 258 | unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB";
|
| 259 | }
|
| 260 | @font-face {
|
| 261 | font-display: "swap";
|
| 262 | font-family: "IBM Plex Mono";
|
| 263 | font-style: normal;
|
| 264 | font-weight: 300;
|
| 265 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Light-Latin2.woff2") format("woff2");
|
| 266 | unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02";
|
| 267 | }
|
| 268 | @font-face {
|
| 269 | font-display: "swap";
|
| 270 | font-family: "IBM Plex Mono";
|
| 271 | font-style: normal;
|
| 272 | font-weight: 300;
|
| 273 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Light-Latin1.woff2") format("woff2");
|
| 274 | unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02";
|
| 275 | }
|
| 276 | @font-face {
|
| 277 | font-display: "swap";
|
| 278 | font-family: "IBM Plex Mono";
|
| 279 | font-style: italic;
|
| 280 | font-weight: 300;
|
| 281 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-LightItalic-Cyrillic.woff2") format("woff2");
|
| 282 | unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9";
|
| 283 | }
|
| 284 | @font-face {
|
| 285 | font-display: "swap";
|
| 286 | font-family: "IBM Plex Mono";
|
| 287 | font-style: italic;
|
| 288 | font-weight: 300;
|
| 289 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-LightItalic-Pi.woff2") format("woff2");
|
| 290 | unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC";
|
| 291 | }
|
| 292 | @font-face {
|
| 293 | font-display: "swap";
|
| 294 | font-family: "IBM Plex Mono";
|
| 295 | font-style: italic;
|
| 296 | font-weight: 300;
|
| 297 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-LightItalic-Latin3.woff2") format("woff2");
|
| 298 | unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB";
|
| 299 | }
|
| 300 | @font-face {
|
| 301 | font-display: "swap";
|
| 302 | font-family: "IBM Plex Mono";
|
| 303 | font-style: italic;
|
| 304 | font-weight: 300;
|
| 305 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-LightItalic-Latin2.woff2") format("woff2");
|
| 306 | unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02";
|
| 307 | }
|
| 308 | @font-face {
|
| 309 | font-display: "swap";
|
| 310 | font-family: "IBM Plex Mono";
|
| 311 | font-style: italic;
|
| 312 | font-weight: 300;
|
| 313 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-LightItalic-Latin1.woff2") format("woff2");
|
| 314 | unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02";
|
| 315 | }
|
| 316 | @font-face {
|
| 317 | font-display: "swap";
|
| 318 | font-family: "IBM Plex Mono";
|
| 319 | font-style: normal;
|
| 320 | font-weight: 400;
|
| 321 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Regular-Cyrillic.woff2") format("woff2");
|
| 322 | unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9";
|
| 323 | }
|
| 324 | @font-face {
|
| 325 | font-display: "swap";
|
| 326 | font-family: "IBM Plex Mono";
|
| 327 | font-style: normal;
|
| 328 | font-weight: 400;
|
| 329 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Regular-Pi.woff2") format("woff2");
|
| 330 | unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC";
|
| 331 | }
|
| 332 | @font-face {
|
| 333 | font-display: "swap";
|
| 334 | font-family: "IBM Plex Mono";
|
| 335 | font-style: normal;
|
| 336 | font-weight: 400;
|
| 337 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Regular-Latin3.woff2") format("woff2");
|
| 338 | unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB";
|
| 339 | }
|
| 340 | @font-face {
|
| 341 | font-display: "swap";
|
| 342 | font-family: "IBM Plex Mono";
|
| 343 | font-style: normal;
|
| 344 | font-weight: 400;
|
| 345 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Regular-Latin2.woff2") format("woff2");
|
| 346 | unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02";
|
| 347 | }
|
| 348 | @font-face {
|
| 349 | font-display: "swap";
|
| 350 | font-family: "IBM Plex Mono";
|
| 351 | font-style: normal;
|
| 352 | font-weight: 400;
|
| 353 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Regular-Latin1.woff2") format("woff2");
|
| 354 | unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02";
|
| 355 | }
|
| 356 | @font-face {
|
| 357 | font-display: "swap";
|
| 358 | font-family: "IBM Plex Mono";
|
| 359 | font-style: italic;
|
| 360 | font-weight: 400;
|
| 361 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Italic-Cyrillic.woff2") format("woff2");
|
| 362 | unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9";
|
| 363 | }
|
| 364 | @font-face {
|
| 365 | font-display: "swap";
|
| 366 | font-family: "IBM Plex Mono";
|
| 367 | font-style: italic;
|
| 368 | font-weight: 400;
|
| 369 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Italic-Pi.woff2") format("woff2");
|
| 370 | unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC";
|
| 371 | }
|
| 372 | @font-face {
|
| 373 | font-display: "swap";
|
| 374 | font-family: "IBM Plex Mono";
|
| 375 | font-style: italic;
|
| 376 | font-weight: 400;
|
| 377 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Italic-Latin3.woff2") format("woff2");
|
| 378 | unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB";
|
| 379 | }
|
| 380 | @font-face {
|
| 381 | font-display: "swap";
|
| 382 | font-family: "IBM Plex Mono";
|
| 383 | font-style: italic;
|
| 384 | font-weight: 400;
|
| 385 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Italic-Latin2.woff2") format("woff2");
|
| 386 | unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02";
|
| 387 | }
|
| 388 | @font-face {
|
| 389 | font-display: "swap";
|
| 390 | font-family: "IBM Plex Mono";
|
| 391 | font-style: italic;
|
| 392 | font-weight: 400;
|
| 393 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Italic-Latin1.woff2") format("woff2");
|
| 394 | unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02";
|
| 395 | }
|
| 396 | @font-face {
|
| 397 | font-display: "swap";
|
| 398 | font-family: "IBM Plex Mono";
|
| 399 | font-style: normal;
|
| 400 | font-weight: 600;
|
| 401 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-SemiBold-Cyrillic.woff2") format("woff2");
|
| 402 | unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9";
|
| 403 | }
|
| 404 | @font-face {
|
| 405 | font-display: "swap";
|
| 406 | font-family: "IBM Plex Mono";
|
| 407 | font-style: normal;
|
| 408 | font-weight: 600;
|
| 409 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-SemiBold-Pi.woff2") format("woff2");
|
| 410 | unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC";
|
| 411 | }
|
| 412 | @font-face {
|
| 413 | font-display: "swap";
|
| 414 | font-family: "IBM Plex Mono";
|
| 415 | font-style: normal;
|
| 416 | font-weight: 600;
|
| 417 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-SemiBold-Latin3.woff2") format("woff2");
|
| 418 | unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB";
|
| 419 | }
|
| 420 | @font-face {
|
| 421 | font-display: "swap";
|
| 422 | font-family: "IBM Plex Mono";
|
| 423 | font-style: normal;
|
| 424 | font-weight: 600;
|
| 425 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-SemiBold-Latin2.woff2") format("woff2");
|
| 426 | unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02";
|
| 427 | }
|
| 428 | @font-face {
|
| 429 | font-display: "swap";
|
| 430 | font-family: "IBM Plex Mono";
|
| 431 | font-style: normal;
|
| 432 | font-weight: 600;
|
| 433 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-SemiBold-Latin1.woff2") format("woff2");
|
| 434 | unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02";
|
| 435 | }
|
| 436 | @font-face {
|
| 437 | font-display: "swap";
|
| 438 | font-family: "IBM Plex Mono";
|
| 439 | font-style: italic;
|
| 440 | font-weight: 600;
|
| 441 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Cyrillic.woff2") format("woff2");
|
| 442 | unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9";
|
| 443 | }
|
| 444 | @font-face {
|
| 445 | font-display: "swap";
|
| 446 | font-family: "IBM Plex Mono";
|
| 447 | font-style: italic;
|
| 448 | font-weight: 600;
|
| 449 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Pi.woff2") format("woff2");
|
| 450 | unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC";
|
| 451 | }
|
| 452 | @font-face {
|
| 453 | font-display: "swap";
|
| 454 | font-family: "IBM Plex Mono";
|
| 455 | font-style: italic;
|
| 456 | font-weight: 600;
|
| 457 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Latin3.woff2") format("woff2");
|
| 458 | unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB";
|
| 459 | }
|
| 460 | @font-face {
|
| 461 | font-display: "swap";
|
| 462 | font-family: "IBM Plex Mono";
|
| 463 | font-style: italic;
|
| 464 | font-weight: 600;
|
| 465 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Latin2.woff2") format("woff2");
|
| 466 | unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02";
|
| 467 | }
|
| 468 | @font-face {
|
| 469 | font-display: "swap";
|
| 470 | font-family: "IBM Plex Mono";
|
| 471 | font-style: italic;
|
| 472 | font-weight: 600;
|
| 473 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Latin1.woff2") format("woff2");
|
| 474 | unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02";
|
| 475 | }
|
| 476 | @font-face {
|
| 477 | font-display: "swap";
|
| 478 | font-family: "IBM Plex Sans Arabic";
|
| 479 | font-style: normal;
|
| 480 | font-weight: 300;
|
| 481 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Arabic/fonts/complete/woff2/IBMPlexSansArabic-Light.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Arabic/fonts/complete/woff/IBMPlexSansArabic-Light.woff") format("woff");
|
| 482 | }
|
| 483 | @font-face {
|
| 484 | font-display: "swap";
|
| 485 | font-family: "IBM Plex Sans Arabic";
|
| 486 | font-style: normal;
|
| 487 | font-weight: 400;
|
| 488 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Arabic/fonts/complete/woff2/IBMPlexSansArabic-Regular.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Arabic/fonts/complete/woff/IBMPlexSansArabic-Regular.woff") format("woff");
|
| 489 | }
|
| 490 | @font-face {
|
| 491 | font-display: "swap";
|
| 492 | font-family: "IBM Plex Sans Arabic";
|
| 493 | font-style: normal;
|
| 494 | font-weight: 500;
|
| 495 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Arabic/fonts/complete/woff2/IBMPlexSansArabic-SemiBold.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Arabic/fonts/complete/woff/IBMPlexSansArabic-SemiBold.woff") format("woff");
|
| 496 | }
|
| 497 | @font-face {
|
| 498 | font-display: "swap";
|
| 499 | font-family: "IBM Plex Sans Devanagari";
|
| 500 | font-style: normal;
|
| 501 | font-weight: 300;
|
| 502 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Devanagari/fonts/complete/woff2/IBMPlexSansDevanagari-Light.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Devanagari/fonts/complete/woff/IBMPlexSansDevanagari-Light.woff") format("woff");
|
| 503 | }
|
| 504 | @font-face {
|
| 505 | font-display: "swap";
|
| 506 | font-family: "IBM Plex Sans Devanagari";
|
| 507 | font-style: normal;
|
| 508 | font-weight: 400;
|
| 509 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Devanagari/fonts/complete/woff2/IBMPlexSansDevanagari-Regular.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Devanagari/fonts/complete/woff/IBMPlexSansDevanagari-Regular.woff") format("woff");
|
| 510 | }
|
| 511 | @font-face {
|
| 512 | font-display: "swap";
|
| 513 | font-family: "IBM Plex Sans Devanagari";
|
| 514 | font-style: normal;
|
| 515 | font-weight: 500;
|
| 516 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Devanagari/fonts/complete/woff2/IBMPlexSansDevanagari-SemiBold.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Devanagari/fonts/complete/woff/IBMPlexSansDevanagari-SemiBold.woff") format("woff");
|
| 517 | }
|
| 518 | @font-face {
|
| 519 | font-display: "swap";
|
| 520 | font-family: "IBM Plex Sans Hebrew";
|
| 521 | font-style: normal;
|
| 522 | font-weight: 300;
|
| 523 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Hebrew/fonts/complete/woff2/IBMPlexSansHebrew-Light.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Hebrew/fonts/complete/woff/IBMPlexSansHebrew-Light.woff") format("woff");
|
| 524 | }
|
| 525 | @font-face {
|
| 526 | font-display: "swap";
|
| 527 | font-family: "IBM Plex Sans Hebrew";
|
| 528 | font-style: normal;
|
| 529 | font-weight: 400;
|
| 530 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Hebrew/fonts/complete/woff2/IBMPlexSansHebrew-Regular.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Hebrew/fonts/complete/woff/IBMPlexSansHebrew-Regular.woff") format("woff");
|
| 531 | }
|
| 532 | @font-face {
|
| 533 | font-display: "swap";
|
| 534 | font-family: "IBM Plex Sans Hebrew";
|
| 535 | font-style: normal;
|
| 536 | font-weight: 500;
|
| 537 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Hebrew/fonts/complete/woff2/IBMPlexSansHebrew-SemiBold.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Hebrew/fonts/complete/woff/IBMPlexSansHebrew-SemiBold.woff") format("woff");
|
| 538 | }
|
| 539 | @font-face {
|
| 540 | font-display: "swap";
|
| 541 | font-family: "IBM Plex Sans Thai Looped";
|
| 542 | font-style: normal;
|
| 543 | font-weight: 300;
|
| 544 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Thai-Looped/fonts/complete/woff2/IBMPlexSansThaiLooped-Light.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Thai-Looped/fonts/complete/woff/IBMPlexSansThaiLooped-Light.woff") format("woff");
|
| 545 | }
|
| 546 | @font-face {
|
| 547 | font-display: "swap";
|
| 548 | font-family: "IBM Plex Sans Thai Looped";
|
| 549 | font-style: normal;
|
| 550 | font-weight: 400;
|
| 551 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Thai-Looped/fonts/complete/woff2/IBMPlexSansThaiLooped-Regular.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Thai-Looped/fonts/complete/woff/IBMPlexSansThaiLooped-Regular.woff") format("woff");
|
| 552 | }
|
| 553 | @font-face {
|
| 554 | font-display: "swap";
|
| 555 | font-family: "IBM Plex Sans Thai Looped";
|
| 556 | font-style: normal;
|
| 557 | font-weight: 500;
|
| 558 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Thai-Looped/fonts/complete/woff2/IBMPlexSansThaiLooped-SemiBold.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Thai-Looped/fonts/complete/woff/IBMPlexSansThaiLooped-SemiBold.woff") format("woff");
|
| 559 | }
|
| 560 | @font-face {
|
| 561 | font-display: "swap";
|
| 562 | font-family: "IBM Plex Sans Thai";
|
| 563 | font-style: normal;
|
| 564 | font-weight: 300;
|
| 565 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Thai/fonts/complete/woff2/IBMPlexSansThai-Light.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Thai/fonts/complete/woff/IBMPlexSansThai-Light.woff") format("woff");
|
| 566 | }
|
| 567 | @font-face {
|
| 568 | font-display: "swap";
|
| 569 | font-family: "IBM Plex Sans Thai";
|
| 570 | font-style: normal;
|
| 571 | font-weight: 400;
|
| 572 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Thai/fonts/complete/woff2/IBMPlexSansThai-Regular.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Thai/fonts/complete/woff/IBMPlexSansThai-Regular.woff") format("woff");
|
| 573 | }
|
| 574 | @font-face {
|
| 575 | font-display: "swap";
|
| 576 | font-family: "IBM Plex Sans Thai";
|
| 577 | font-style: normal;
|
| 578 | font-weight: 500;
|
| 579 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Thai/fonts/complete/woff2/IBMPlexSansThai-SemiBold.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Thai/fonts/complete/woff/IBMPlexSansThai-SemiBold.woff") format("woff");
|
| 580 | }
|
| 581 | @font-face {
|
| 582 | font-display: "swap";
|
| 583 | font-family: "IBM Plex Sans";
|
| 584 | font-style: normal;
|
| 585 | font-weight: 300;
|
| 586 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Light-Cyrillic.woff2") format("woff2");
|
| 587 | unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9";
|
| 588 | }
|
| 589 | @font-face {
|
| 590 | font-display: "swap";
|
| 591 | font-family: "IBM Plex Sans";
|
| 592 | font-style: normal;
|
| 593 | font-weight: 300;
|
| 594 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Light-Pi.woff2") format("woff2");
|
| 595 | unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC";
|
| 596 | }
|
| 597 | @font-face {
|
| 598 | font-display: "swap";
|
| 599 | font-family: "IBM Plex Sans";
|
| 600 | font-style: normal;
|
| 601 | font-weight: 300;
|
| 602 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Light-Latin3.woff2") format("woff2");
|
| 603 | unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB";
|
| 604 | }
|
| 605 | @font-face {
|
| 606 | font-display: "swap";
|
| 607 | font-family: "IBM Plex Sans";
|
| 608 | font-style: normal;
|
| 609 | font-weight: 300;
|
| 610 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Light-Latin2.woff2") format("woff2");
|
| 611 | unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02";
|
| 612 | }
|
| 613 | @font-face {
|
| 614 | font-display: "swap";
|
| 615 | font-family: "IBM Plex Sans";
|
| 616 | font-style: normal;
|
| 617 | font-weight: 300;
|
| 618 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Light-Latin1.woff2") format("woff2");
|
| 619 | unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02";
|
| 620 | }
|
| 621 | @font-face {
|
| 622 | font-display: "swap";
|
| 623 | font-family: "IBM Plex Sans";
|
| 624 | font-style: italic;
|
| 625 | font-weight: 300;
|
| 626 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-LightItalic-Cyrillic.woff2") format("woff2");
|
| 627 | unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9";
|
| 628 | }
|
| 629 | @font-face {
|
| 630 | font-display: "swap";
|
| 631 | font-family: "IBM Plex Sans";
|
| 632 | font-style: italic;
|
| 633 | font-weight: 300;
|
| 634 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-LightItalic-Pi.woff2") format("woff2");
|
| 635 | unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC";
|
| 636 | }
|
| 637 | @font-face {
|
| 638 | font-display: "swap";
|
| 639 | font-family: "IBM Plex Sans";
|
| 640 | font-style: italic;
|
| 641 | font-weight: 300;
|
| 642 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-LightItalic-Latin3.woff2") format("woff2");
|
| 643 | unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB";
|
| 644 | }
|
| 645 | @font-face {
|
| 646 | font-display: "swap";
|
| 647 | font-family: "IBM Plex Sans";
|
| 648 | font-style: italic;
|
| 649 | font-weight: 300;
|
| 650 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-LightItalic-Latin2.woff2") format("woff2");
|
| 651 | unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02";
|
| 652 | }
|
| 653 | @font-face {
|
| 654 | font-display: "swap";
|
| 655 | font-family: "IBM Plex Sans";
|
| 656 | font-style: italic;
|
| 657 | font-weight: 300;
|
| 658 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-LightItalic-Latin1.woff2") format("woff2");
|
| 659 | unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02";
|
| 660 | }
|
| 661 | @font-face {
|
| 662 | font-display: "swap";
|
| 663 | font-family: "IBM Plex Sans";
|
| 664 | font-style: normal;
|
| 665 | font-weight: 400;
|
| 666 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Regular-Cyrillic.woff2") format("woff2");
|
| 667 | unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9";
|
| 668 | }
|
| 669 | @font-face {
|
| 670 | font-display: "swap";
|
| 671 | font-family: "IBM Plex Sans";
|
| 672 | font-style: normal;
|
| 673 | font-weight: 400;
|
| 674 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Regular-Pi.woff2") format("woff2");
|
| 675 | unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC";
|
| 676 | }
|
| 677 | @font-face {
|
| 678 | font-display: "swap";
|
| 679 | font-family: "IBM Plex Sans";
|
| 680 | font-style: normal;
|
| 681 | font-weight: 400;
|
| 682 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Regular-Latin3.woff2") format("woff2");
|
| 683 | unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB";
|
| 684 | }
|
| 685 | @font-face {
|
| 686 | font-display: "swap";
|
| 687 | font-family: "IBM Plex Sans";
|
| 688 | font-style: normal;
|
| 689 | font-weight: 400;
|
| 690 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Regular-Latin2.woff2") format("woff2");
|
| 691 | unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02";
|
| 692 | }
|
| 693 | @font-face {
|
| 694 | font-display: "swap";
|
| 695 | font-family: "IBM Plex Sans";
|
| 696 | font-style: normal;
|
| 697 | font-weight: 400;
|
| 698 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Regular-Latin1.woff2") format("woff2");
|
| 699 | unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02";
|
| 700 | }
|
| 701 | @font-face {
|
| 702 | font-display: "swap";
|
| 703 | font-family: "IBM Plex Sans";
|
| 704 | font-style: italic;
|
| 705 | font-weight: 400;
|
| 706 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Italic-Cyrillic.woff2") format("woff2");
|
| 707 | unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9";
|
| 708 | }
|
| 709 | @font-face {
|
| 710 | font-display: "swap";
|
| 711 | font-family: "IBM Plex Sans";
|
| 712 | font-style: italic;
|
| 713 | font-weight: 400;
|
| 714 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Italic-Pi.woff2") format("woff2");
|
| 715 | unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC";
|
| 716 | }
|
| 717 | @font-face {
|
| 718 | font-display: "swap";
|
| 719 | font-family: "IBM Plex Sans";
|
| 720 | font-style: italic;
|
| 721 | font-weight: 400;
|
| 722 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Italic-Latin3.woff2") format("woff2");
|
| 723 | unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB";
|
| 724 | }
|
| 725 | @font-face {
|
| 726 | font-display: "swap";
|
| 727 | font-family: "IBM Plex Sans";
|
| 728 | font-style: italic;
|
| 729 | font-weight: 400;
|
| 730 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Italic-Latin2.woff2") format("woff2");
|
| 731 | unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02";
|
| 732 | }
|
| 733 | @font-face {
|
| 734 | font-display: "swap";
|
| 735 | font-family: "IBM Plex Sans";
|
| 736 | font-style: italic;
|
| 737 | font-weight: 400;
|
| 738 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Italic-Latin1.woff2") format("woff2");
|
| 739 | unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02";
|
| 740 | }
|
| 741 | @font-face {
|
| 742 | font-display: "swap";
|
| 743 | font-family: "IBM Plex Sans";
|
| 744 | font-style: normal;
|
| 745 | font-weight: 600;
|
| 746 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-SemiBold-Cyrillic.woff2") format("woff2");
|
| 747 | unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9";
|
| 748 | }
|
| 749 | @font-face {
|
| 750 | font-display: "swap";
|
| 751 | font-family: "IBM Plex Sans";
|
| 752 | font-style: normal;
|
| 753 | font-weight: 600;
|
| 754 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-SemiBold-Pi.woff2") format("woff2");
|
| 755 | unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC";
|
| 756 | }
|
| 757 | @font-face {
|
| 758 | font-display: "swap";
|
| 759 | font-family: "IBM Plex Sans";
|
| 760 | font-style: normal;
|
| 761 | font-weight: 600;
|
| 762 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-SemiBold-Latin3.woff2") format("woff2");
|
| 763 | unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB";
|
| 764 | }
|
| 765 | @font-face {
|
| 766 | font-display: "swap";
|
| 767 | font-family: "IBM Plex Sans";
|
| 768 | font-style: normal;
|
| 769 | font-weight: 600;
|
| 770 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-SemiBold-Latin2.woff2") format("woff2");
|
| 771 | unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02";
|
| 772 | }
|
| 773 | @font-face {
|
| 774 | font-display: "swap";
|
| 775 | font-family: "IBM Plex Sans";
|
| 776 | font-style: normal;
|
| 777 | font-weight: 600;
|
| 778 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2");
|
| 779 | unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02";
|
| 780 | }
|
| 781 | @font-face {
|
| 782 | font-display: "swap";
|
| 783 | font-family: "IBM Plex Sans";
|
| 784 | font-style: italic;
|
| 785 | font-weight: 600;
|
| 786 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Cyrillic.woff2") format("woff2");
|
| 787 | unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9";
|
| 788 | }
|
| 789 | @font-face {
|
| 790 | font-display: "swap";
|
| 791 | font-family: "IBM Plex Sans";
|
| 792 | font-style: italic;
|
| 793 | font-weight: 600;
|
| 794 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Pi.woff2") format("woff2");
|
| 795 | unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC";
|
| 796 | }
|
| 797 | @font-face {
|
| 798 | font-display: "swap";
|
| 799 | font-family: "IBM Plex Sans";
|
| 800 | font-style: italic;
|
| 801 | font-weight: 600;
|
| 802 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Latin3.woff2") format("woff2");
|
| 803 | unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB";
|
| 804 | }
|
| 805 | @font-face {
|
| 806 | font-display: "swap";
|
| 807 | font-family: "IBM Plex Sans";
|
| 808 | font-style: italic;
|
| 809 | font-weight: 600;
|
| 810 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Latin2.woff2") format("woff2");
|
| 811 | unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02";
|
| 812 | }
|
| 813 | @font-face {
|
| 814 | font-display: "swap";
|
| 815 | font-family: "IBM Plex Sans";
|
| 816 | font-style: italic;
|
| 817 | font-weight: 600;
|
| 818 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Latin1.woff2") format("woff2");
|
| 819 | unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02";
|
| 820 | }
|
| 821 | @font-face {
|
| 822 | font-display: "swap";
|
| 823 | font-family: "IBM Plex Serif";
|
| 824 | font-style: normal;
|
| 825 | font-weight: 300;
|
| 826 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-Light-Cyrillic.woff2") format("woff2");
|
| 827 | unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9";
|
| 828 | }
|
| 829 | @font-face {
|
| 830 | font-display: "swap";
|
| 831 | font-family: "IBM Plex Serif";
|
| 832 | font-style: normal;
|
| 833 | font-weight: 300;
|
| 834 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-Light-Pi.woff2") format("woff2");
|
| 835 | unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC";
|
| 836 | }
|
| 837 | @font-face {
|
| 838 | font-display: "swap";
|
| 839 | font-family: "IBM Plex Serif";
|
| 840 | font-style: normal;
|
| 841 | font-weight: 300;
|
| 842 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-Light-Latin3.woff2") format("woff2");
|
| 843 | unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB";
|
| 844 | }
|
| 845 | @font-face {
|
| 846 | font-display: "swap";
|
| 847 | font-family: "IBM Plex Serif";
|
| 848 | font-style: normal;
|
| 849 | font-weight: 300;
|
| 850 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-Light-Latin2.woff2") format("woff2");
|
| 851 | unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02";
|
| 852 | }
|
| 853 | @font-face {
|
| 854 | font-display: "swap";
|
| 855 | font-family: "IBM Plex Serif";
|
| 856 | font-style: normal;
|
| 857 | font-weight: 300;
|
| 858 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-Light-Latin1.woff2") format("woff2");
|
| 859 | unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02";
|
| 860 | }
|
| 861 | @font-face {
|
| 862 | font-display: "swap";
|
| 863 | font-family: "IBM Plex Serif";
|
| 864 | font-style: italic;
|
| 865 | font-weight: 300;
|
| 866 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-LightItalic-Cyrillic.woff2") format("woff2");
|
| 867 | unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9";
|
| 868 | }
|
| 869 | @font-face {
|
| 870 | font-display: "swap";
|
| 871 | font-family: "IBM Plex Serif";
|
| 872 | font-style: italic;
|
| 873 | font-weight: 300;
|
| 874 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-LightItalic-Pi.woff2") format("woff2");
|
| 875 | unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC";
|
| 876 | }
|
| 877 | @font-face {
|
| 878 | font-display: "swap";
|
| 879 | font-family: "IBM Plex Serif";
|
| 880 | font-style: italic;
|
| 881 | font-weight: 300;
|
| 882 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-LightItalic-Latin3.woff2") format("woff2");
|
| 883 | unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB";
|
| 884 | }
|
| 885 | @font-face {
|
| 886 | font-display: "swap";
|
| 887 | font-family: "IBM Plex Serif";
|
| 888 | font-style: italic;
|
| 889 | font-weight: 300;
|
| 890 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-LightItalic-Latin2.woff2") format("woff2");
|
| 891 | unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02";
|
| 892 | }
|
| 893 | @font-face {
|
| 894 | font-display: "swap";
|
| 895 | font-family: "IBM Plex Serif";
|
| 896 | font-style: italic;
|
| 897 | font-weight: 300;
|
| 898 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-LightItalic-Latin1.woff2") format("woff2");
|
| 899 | unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02";
|
| 900 | }
|
| 901 | @font-face {
|
| 902 | font-display: "swap";
|
| 903 | font-family: "IBM Plex Serif";
|
| 904 | font-style: normal;
|
| 905 | font-weight: 400;
|
| 906 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-Regular-Cyrillic.woff2") format("woff2");
|
| 907 | unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9";
|
| 908 | }
|
| 909 | @font-face {
|
| 910 | font-display: "swap";
|
| 911 | font-family: "IBM Plex Serif";
|
| 912 | font-style: normal;
|
| 913 | font-weight: 400;
|
| 914 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-Regular-Pi.woff2") format("woff2");
|
| 915 | unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC";
|
| 916 | }
|
| 917 | @font-face {
|
| 918 | font-display: "swap";
|
| 919 | font-family: "IBM Plex Serif";
|
| 920 | font-style: normal;
|
| 921 | font-weight: 400;
|
| 922 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-Regular-Latin3.woff2") format("woff2");
|
| 923 | unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB";
|
| 924 | }
|
| 925 | @font-face {
|
| 926 | font-display: "swap";
|
| 927 | font-family: "IBM Plex Serif";
|
| 928 | font-style: normal;
|
| 929 | font-weight: 400;
|
| 930 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-Regular-Latin2.woff2") format("woff2");
|
| 931 | unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02";
|
| 932 | }
|
| 933 | @font-face {
|
| 934 | font-display: "swap";
|
| 935 | font-family: "IBM Plex Serif";
|
| 936 | font-style: normal;
|
| 937 | font-weight: 400;
|
| 938 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-Regular-Latin1.woff2") format("woff2");
|
| 939 | unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02";
|
| 940 | }
|
| 941 | @font-face {
|
| 942 | font-display: "swap";
|
| 943 | font-family: "IBM Plex Serif";
|
| 944 | font-style: italic;
|
| 945 | font-weight: 400;
|
| 946 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-Italic-Cyrillic.woff2") format("woff2");
|
| 947 | unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9";
|
| 948 | }
|
| 949 | @font-face {
|
| 950 | font-display: "swap";
|
| 951 | font-family: "IBM Plex Serif";
|
| 952 | font-style: italic;
|
| 953 | font-weight: 400;
|
| 954 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-Italic-Pi.woff2") format("woff2");
|
| 955 | unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC";
|
| 956 | }
|
| 957 | @font-face {
|
| 958 | font-display: "swap";
|
| 959 | font-family: "IBM Plex Serif";
|
| 960 | font-style: italic;
|
| 961 | font-weight: 400;
|
| 962 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-Italic-Latin3.woff2") format("woff2");
|
| 963 | unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB";
|
| 964 | }
|
| 965 | @font-face {
|
| 966 | font-display: "swap";
|
| 967 | font-family: "IBM Plex Serif";
|
| 968 | font-style: italic;
|
| 969 | font-weight: 400;
|
| 970 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-Italic-Latin2.woff2") format("woff2");
|
| 971 | unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02";
|
| 972 | }
|
| 973 | @font-face {
|
| 974 | font-display: "swap";
|
| 975 | font-family: "IBM Plex Serif";
|
| 976 | font-style: italic;
|
| 977 | font-weight: 400;
|
| 978 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-Italic-Latin1.woff2") format("woff2");
|
| 979 | unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02";
|
| 980 | }
|
| 981 | @font-face {
|
| 982 | font-display: "swap";
|
| 983 | font-family: "IBM Plex Serif";
|
| 984 | font-style: normal;
|
| 985 | font-weight: 600;
|
| 986 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-SemiBold-Cyrillic.woff2") format("woff2");
|
| 987 | unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9";
|
| 988 | }
|
| 989 | @font-face {
|
| 990 | font-display: "swap";
|
| 991 | font-family: "IBM Plex Serif";
|
| 992 | font-style: normal;
|
| 993 | font-weight: 600;
|
| 994 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-SemiBold-Pi.woff2") format("woff2");
|
| 995 | unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC";
|
| 996 | }
|
| 997 | @font-face {
|
| 998 | font-display: "swap";
|
| 999 | font-family: "IBM Plex Serif";
|
| 1000 | font-style: normal;
|
| 1001 | font-weight: 600;
|
| 1002 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-SemiBold-Latin3.woff2") format("woff2");
|
| 1003 | unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB";
|
| 1004 | }
|
| 1005 | @font-face {
|
| 1006 | font-display: "swap";
|
| 1007 | font-family: "IBM Plex Serif";
|
| 1008 | font-style: normal;
|
| 1009 | font-weight: 600;
|
| 1010 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-SemiBold-Latin2.woff2") format("woff2");
|
| 1011 | unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02";
|
| 1012 | }
|
| 1013 | @font-face {
|
| 1014 | font-display: "swap";
|
| 1015 | font-family: "IBM Plex Serif";
|
| 1016 | font-style: normal;
|
| 1017 | font-weight: 600;
|
| 1018 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-SemiBold-Latin1.woff2") format("woff2");
|
| 1019 | unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02";
|
| 1020 | }
|
| 1021 | @font-face {
|
| 1022 | font-display: "swap";
|
| 1023 | font-family: "IBM Plex Serif";
|
| 1024 | font-style: italic;
|
| 1025 | font-weight: 600;
|
| 1026 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-SemiBoldItalic-Cyrillic.woff2") format("woff2");
|
| 1027 | unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9";
|
| 1028 | }
|
| 1029 | @font-face {
|
| 1030 | font-display: "swap";
|
| 1031 | font-family: "IBM Plex Serif";
|
| 1032 | font-style: italic;
|
| 1033 | font-weight: 600;
|
| 1034 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-SemiBoldItalic-Pi.woff2") format("woff2");
|
| 1035 | unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC";
|
| 1036 | }
|
| 1037 | @font-face {
|
| 1038 | font-display: "swap";
|
| 1039 | font-family: "IBM Plex Serif";
|
| 1040 | font-style: italic;
|
| 1041 | font-weight: 600;
|
| 1042 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-SemiBoldItalic-Latin3.woff2") format("woff2");
|
| 1043 | unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB";
|
| 1044 | }
|
| 1045 | @font-face {
|
| 1046 | font-display: "swap";
|
| 1047 | font-family: "IBM Plex Serif";
|
| 1048 | font-style: italic;
|
| 1049 | font-weight: 600;
|
| 1050 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-SemiBoldItalic-Latin2.woff2") format("woff2");
|
| 1051 | unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02";
|
| 1052 | }
|
| 1053 | @font-face {
|
| 1054 | font-display: "swap";
|
| 1055 | font-family: "IBM Plex Serif";
|
| 1056 | font-style: italic;
|
| 1057 | font-weight: 600;
|
| 1058 | src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-SemiBoldItalic-Latin1.woff2") format("woff2");
|
| 1059 | unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02";
|
| 1060 | }
|
| 1061 | :root {
|
| 1062 | --cds-grid-gutter: 2rem;
|
| 1063 | --cds-grid-columns: 4;
|
| 1064 | --cds-grid-margin: 0;
|
| 1065 | }
|
| 1066 | @media (min-width: 42rem) {
|
| 1067 | :root {
|
| 1068 | --cds-grid-columns: 8;
|
| 1069 | --cds-grid-margin: 1rem;
|
| 1070 | }
|
| 1071 | }
|
| 1072 | @media (min-width: 66rem) {
|
| 1073 | :root {
|
| 1074 | --cds-grid-columns: 16;
|
| 1075 | }
|
| 1076 | }
|
| 1077 | @media (min-width: 99rem) {
|
| 1078 | :root {
|
| 1079 | --cds-grid-margin: 1.5rem;
|
| 1080 | }
|
| 1081 | }
|
| 1082 |
|
| 1083 | .cds--css-grid {
|
| 1084 | --cds-grid-gutter-start: calc(var(--cds-grid-gutter) / 2);
|
| 1085 | --cds-grid-gutter-end: calc(var(--cds-grid-gutter) / 2);
|
| 1086 | --cds-grid-column-hang: calc(var(--cds-grid-gutter) / 2);
|
| 1087 | display: grid;
|
| 1088 | grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
|
| 1089 | inline-size: 100%;
|
| 1090 | margin-inline: auto;
|
| 1091 | max-inline-size: 99rem;
|
| 1092 | padding-inline: var(--cds-grid-margin);
|
| 1093 | }
|
| 1094 |
|
| 1095 | .cds--css-grid--full-width {
|
| 1096 | max-inline-size: 100%;
|
| 1097 | }
|
| 1098 |
|
| 1099 | .cds--css-grid-column {
|
| 1100 | --cds-grid-mode-start: var(--cds-grid-gutter-start);
|
| 1101 | --cds-grid-mode-end: var(--cds-grid-gutter-end);
|
| 1102 | margin-inline: var(--cds-grid-gutter-start) var(--cds-grid-gutter-end);
|
| 1103 | }
|
| 1104 | [dir=rtl] .cds--css-grid-column {
|
| 1105 | margin-inline: var(--cds-grid-gutter-end) var(--cds-grid-gutter-start);
|
| 1106 | }
|
| 1107 |
|
| 1108 | .cds--css-grid--narrow {
|
| 1109 | --cds-grid-gutter-start: 0;
|
| 1110 | }
|
| 1111 |
|
| 1112 | .cds--css-grid--condensed {
|
| 1113 | --cds-grid-gutter: 0.0625rem;
|
| 1114 | --cds-grid-column-hang: 0.96875rem;
|
| 1115 | }
|
| 1116 |
|
| 1117 | .cds--subgrid {
|
| 1118 | display: grid;
|
| 1119 | grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
|
| 1120 | margin-inline: calc(var(--cds-grid-mode-start) * -1) calc(var(--cds-grid-mode-end) * -1);
|
| 1121 | }
|
| 1122 | [dir=rtl] .cds--subgrid {
|
| 1123 | margin-inline: calc(var(--cds-grid-mode-end) * -1) calc(var(--cds-grid-mode-start) * -1);
|
| 1124 | }
|
| 1125 |
|
| 1126 | .cds--subgrid--wide {
|
| 1127 | --cds-grid-gutter-start: 1rem;
|
| 1128 | --cds-grid-gutter-end: 1rem;
|
| 1129 | --cds-grid-column-hang: 0;
|
| 1130 | }
|
| 1131 |
|
| 1132 | .cds--subgrid--narrow {
|
| 1133 | --cds-grid-gutter-start: 0;
|
| 1134 | --cds-grid-gutter-end: 1rem;
|
| 1135 | --cds-grid-column-hang: 1rem;
|
| 1136 | }
|
| 1137 |
|
| 1138 | .cds--subgrid--condensed {
|
| 1139 | --cds-grid-gutter-start: 0.03125rem;
|
| 1140 | --cds-grid-gutter-end: 0.03125rem;
|
| 1141 | --cds-grid-column-hang: 0.96875rem;
|
| 1142 | }
|
| 1143 |
|
| 1144 | .cds--grid-column-hang {
|
| 1145 | margin-inline-start: var(--cds-grid-column-hang);
|
| 1146 | }
|
| 1147 | [dir=rtl] .cds--grid-column-hang {
|
| 1148 | margin-inline: initial var(--cds-grid-column-hang);
|
| 1149 | }
|
| 1150 |
|
| 1151 | .cds--col-span-0 {
|
| 1152 | display: none;
|
| 1153 | }
|
| 1154 |
|
| 1155 | .cds--col-span-1 {
|
| 1156 | --cds-grid-columns: 1;
|
| 1157 | display: block;
|
| 1158 | grid-column: span 1/span 1;
|
| 1159 | }
|
| 1160 |
|
| 1161 | .cds--col-span-2 {
|
| 1162 | --cds-grid-columns: 2;
|
| 1163 | display: block;
|
| 1164 | grid-column: span 2/span 2;
|
| 1165 | }
|
| 1166 |
|
| 1167 | .cds--col-span-3 {
|
| 1168 | --cds-grid-columns: 3;
|
| 1169 | display: block;
|
| 1170 | grid-column: span 3/span 3;
|
| 1171 | }
|
| 1172 |
|
| 1173 | .cds--col-span-4 {
|
| 1174 | --cds-grid-columns: 4;
|
| 1175 | display: block;
|
| 1176 | grid-column: span 4/span 4;
|
| 1177 | }
|
| 1178 |
|
| 1179 | .cds--col-span-5 {
|
| 1180 | --cds-grid-columns: 5;
|
| 1181 | display: block;
|
| 1182 | grid-column: span 5/span 5;
|
| 1183 | }
|
| 1184 |
|
| 1185 | .cds--col-span-6 {
|
| 1186 | --cds-grid-columns: 6;
|
| 1187 | display: block;
|
| 1188 | grid-column: span 6/span 6;
|
| 1189 | }
|
| 1190 |
|
| 1191 | .cds--col-span-7 {
|
| 1192 | --cds-grid-columns: 7;
|
| 1193 | display: block;
|
| 1194 | grid-column: span 7/span 7;
|
| 1195 | }
|
| 1196 |
|
| 1197 | .cds--col-span-8 {
|
| 1198 | --cds-grid-columns: 8;
|
| 1199 | display: block;
|
| 1200 | grid-column: span 8/span 8;
|
| 1201 | }
|
| 1202 |
|
| 1203 | .cds--col-span-9 {
|
| 1204 | --cds-grid-columns: 9;
|
| 1205 | display: block;
|
| 1206 | grid-column: span 9/span 9;
|
| 1207 | }
|
| 1208 |
|
| 1209 | .cds--col-span-10 {
|
| 1210 | --cds-grid-columns: 10;
|
| 1211 | display: block;
|
| 1212 | grid-column: span 10/span 10;
|
| 1213 | }
|
| 1214 |
|
| 1215 | .cds--col-span-11 {
|
| 1216 | --cds-grid-columns: 11;
|
| 1217 | display: block;
|
| 1218 | grid-column: span 11/span 11;
|
| 1219 | }
|
| 1220 |
|
| 1221 | .cds--col-span-12 {
|
| 1222 | --cds-grid-columns: 12;
|
| 1223 | display: block;
|
| 1224 | grid-column: span 12/span 12;
|
| 1225 | }
|
| 1226 |
|
| 1227 | .cds--col-span-13 {
|
| 1228 | --cds-grid-columns: 13;
|
| 1229 | display: block;
|
| 1230 | grid-column: span 13/span 13;
|
| 1231 | }
|
| 1232 |
|
| 1233 | .cds--col-span-14 {
|
| 1234 | --cds-grid-columns: 14;
|
| 1235 | display: block;
|
| 1236 | grid-column: span 14/span 14;
|
| 1237 | }
|
| 1238 |
|
| 1239 | .cds--col-span-15 {
|
| 1240 | --cds-grid-columns: 15;
|
| 1241 | display: block;
|
| 1242 | grid-column: span 15/span 15;
|
| 1243 | }
|
| 1244 |
|
| 1245 | .cds--col-span-16 {
|
| 1246 | --cds-grid-columns: 16;
|
| 1247 | display: block;
|
| 1248 | grid-column: span 16/span 16;
|
| 1249 | }
|
| 1250 |
|
| 1251 | .cds--sm\:col-span-0 {
|
| 1252 | display: none;
|
| 1253 | }
|
| 1254 |
|
| 1255 | .cds--sm\:col-span-1 {
|
| 1256 | --cds-grid-columns: 1;
|
| 1257 | display: block;
|
| 1258 | grid-column: span 1/span 1;
|
| 1259 | }
|
| 1260 |
|
| 1261 | .cds--sm\:col-span-2 {
|
| 1262 | --cds-grid-columns: 2;
|
| 1263 | display: block;
|
| 1264 | grid-column: span 2/span 2;
|
| 1265 | }
|
| 1266 |
|
| 1267 | .cds--sm\:col-span-3 {
|
| 1268 | --cds-grid-columns: 3;
|
| 1269 | display: block;
|
| 1270 | grid-column: span 3/span 3;
|
| 1271 | }
|
| 1272 |
|
| 1273 | .cds--sm\:col-span-4 {
|
| 1274 | --cds-grid-columns: 4;
|
| 1275 | display: block;
|
| 1276 | grid-column: span 4/span 4;
|
| 1277 | }
|
| 1278 |
|
| 1279 | .cds--sm\:col-span-auto {
|
| 1280 | grid-column: auto;
|
| 1281 | }
|
| 1282 |
|
| 1283 | .cds--sm\:col-span-100 {
|
| 1284 | grid-column: 1/-1;
|
| 1285 | }
|
| 1286 |
|
| 1287 | .cds--sm\:col-span-75 {
|
| 1288 | --cds-grid-columns: 3;
|
| 1289 | grid-column: span 3 / span 3;
|
| 1290 | }
|
| 1291 |
|
| 1292 | .cds--sm\:col-span-50 {
|
| 1293 | --cds-grid-columns: 2;
|
| 1294 | grid-column: span 2 / span 2;
|
| 1295 | }
|
| 1296 |
|
| 1297 | .cds--sm\:col-span-25 {
|
| 1298 | --cds-grid-columns: 1;
|
| 1299 | grid-column: span 1 / span 1;
|
| 1300 | }
|
| 1301 |
|
| 1302 | @media (min-width: 42rem) {
|
| 1303 | .cds--md\:col-span-0 {
|
| 1304 | display: none;
|
| 1305 | }
|
| 1306 | }
|
| 1307 | @media (min-width: 42rem) {
|
| 1308 | .cds--md\:col-span-1 {
|
| 1309 | --cds-grid-columns: 1;
|
| 1310 | display: block;
|
| 1311 | grid-column: span 1/span 1;
|
| 1312 | }
|
| 1313 | }
|
| 1314 | @media (min-width: 42rem) {
|
| 1315 | .cds--md\:col-span-2 {
|
| 1316 | --cds-grid-columns: 2;
|
| 1317 | display: block;
|
| 1318 | grid-column: span 2/span 2;
|
| 1319 | }
|
| 1320 | }
|
| 1321 | @media (min-width: 42rem) {
|
| 1322 | .cds--md\:col-span-3 {
|
| 1323 | --cds-grid-columns: 3;
|
| 1324 | display: block;
|
| 1325 | grid-column: span 3/span 3;
|
| 1326 | }
|
| 1327 | }
|
| 1328 | @media (min-width: 42rem) {
|
| 1329 | .cds--md\:col-span-4 {
|
| 1330 | --cds-grid-columns: 4;
|
| 1331 | display: block;
|
| 1332 | grid-column: span 4/span 4;
|
| 1333 | }
|
| 1334 | }
|
| 1335 | @media (min-width: 42rem) {
|
| 1336 | .cds--md\:col-span-5 {
|
| 1337 | --cds-grid-columns: 5;
|
| 1338 | display: block;
|
| 1339 | grid-column: span 5/span 5;
|
| 1340 | }
|
| 1341 | }
|
| 1342 | @media (min-width: 42rem) {
|
| 1343 | .cds--md\:col-span-6 {
|
| 1344 | --cds-grid-columns: 6;
|
| 1345 | display: block;
|
| 1346 | grid-column: span 6/span 6;
|
| 1347 | }
|
| 1348 | }
|
| 1349 | @media (min-width: 42rem) {
|
| 1350 | .cds--md\:col-span-7 {
|
| 1351 | --cds-grid-columns: 7;
|
| 1352 | display: block;
|
| 1353 | grid-column: span 7/span 7;
|
| 1354 | }
|
| 1355 | }
|
| 1356 | @media (min-width: 42rem) {
|
| 1357 | .cds--md\:col-span-8 {
|
| 1358 | --cds-grid-columns: 8;
|
| 1359 | display: block;
|
| 1360 | grid-column: span 8/span 8;
|
| 1361 | }
|
| 1362 | }
|
| 1363 | @media (min-width: 42rem) {
|
| 1364 | .cds--md\:col-span-auto {
|
| 1365 | grid-column: auto;
|
| 1366 | }
|
| 1367 | .cds--md\:col-span-100 {
|
| 1368 | grid-column: 1/-1;
|
| 1369 | }
|
| 1370 | .cds--md\:col-span-75 {
|
| 1371 | --cds-grid-columns: 6;
|
| 1372 | grid-column: span 6 / span 6;
|
| 1373 | }
|
| 1374 | .cds--md\:col-span-50 {
|
| 1375 | --cds-grid-columns: 4;
|
| 1376 | grid-column: span 4 / span 4;
|
| 1377 | }
|
| 1378 | .cds--md\:col-span-25 {
|
| 1379 | --cds-grid-columns: 2;
|
| 1380 | grid-column: span 2 / span 2;
|
| 1381 | }
|
| 1382 | }
|
| 1383 | @media (min-width: 66rem) {
|
| 1384 | .cds--lg\:col-span-0 {
|
| 1385 | display: none;
|
| 1386 | }
|
| 1387 | }
|
| 1388 | @media (min-width: 66rem) {
|
| 1389 | .cds--lg\:col-span-1 {
|
| 1390 | --cds-grid-columns: 1;
|
| 1391 | display: block;
|
| 1392 | grid-column: span 1/span 1;
|
| 1393 | }
|
| 1394 | }
|
| 1395 | @media (min-width: 66rem) {
|
| 1396 | .cds--lg\:col-span-2 {
|
| 1397 | --cds-grid-columns: 2;
|
| 1398 | display: block;
|
| 1399 | grid-column: span 2/span 2;
|
| 1400 | }
|
| 1401 | }
|
| 1402 | @media (min-width: 66rem) {
|
| 1403 | .cds--lg\:col-span-3 {
|
| 1404 | --cds-grid-columns: 3;
|
| 1405 | display: block;
|
| 1406 | grid-column: span 3/span 3;
|
| 1407 | }
|
| 1408 | }
|
| 1409 | @media (min-width: 66rem) {
|
| 1410 | .cds--lg\:col-span-4 {
|
| 1411 | --cds-grid-columns: 4;
|
| 1412 | display: block;
|
| 1413 | grid-column: span 4/span 4;
|
| 1414 | }
|
| 1415 | }
|
| 1416 | @media (min-width: 66rem) {
|
| 1417 | .cds--lg\:col-span-5 {
|
| 1418 | --cds-grid-columns: 5;
|
| 1419 | display: block;
|
| 1420 | grid-column: span 5/span 5;
|
| 1421 | }
|
| 1422 | }
|
| 1423 | @media (min-width: 66rem) {
|
| 1424 | .cds--lg\:col-span-6 {
|
| 1425 | --cds-grid-columns: 6;
|
| 1426 | display: block;
|
| 1427 | grid-column: span 6/span 6;
|
| 1428 | }
|
| 1429 | }
|
| 1430 | @media (min-width: 66rem) {
|
| 1431 | .cds--lg\:col-span-7 {
|
| 1432 | --cds-grid-columns: 7;
|
| 1433 | display: block;
|
| 1434 | grid-column: span 7/span 7;
|
| 1435 | }
|
| 1436 | }
|
| 1437 | @media (min-width: 66rem) {
|
| 1438 | .cds--lg\:col-span-8 {
|
| 1439 | --cds-grid-columns: 8;
|
| 1440 | display: block;
|
| 1441 | grid-column: span 8/span 8;
|
| 1442 | }
|
| 1443 | }
|
| 1444 | @media (min-width: 66rem) {
|
| 1445 | .cds--lg\:col-span-9 {
|
| 1446 | --cds-grid-columns: 9;
|
| 1447 | display: block;
|
| 1448 | grid-column: span 9/span 9;
|
| 1449 | }
|
| 1450 | }
|
| 1451 | @media (min-width: 66rem) {
|
| 1452 | .cds--lg\:col-span-10 {
|
| 1453 | --cds-grid-columns: 10;
|
| 1454 | display: block;
|
| 1455 | grid-column: span 10/span 10;
|
| 1456 | }
|
| 1457 | }
|
| 1458 | @media (min-width: 66rem) {
|
| 1459 | .cds--lg\:col-span-11 {
|
| 1460 | --cds-grid-columns: 11;
|
| 1461 | display: block;
|
| 1462 | grid-column: span 11/span 11;
|
| 1463 | }
|
| 1464 | }
|
| 1465 | @media (min-width: 66rem) {
|
| 1466 | .cds--lg\:col-span-12 {
|
| 1467 | --cds-grid-columns: 12;
|
| 1468 | display: block;
|
| 1469 | grid-column: span 12/span 12;
|
| 1470 | }
|
| 1471 | }
|
| 1472 | @media (min-width: 66rem) {
|
| 1473 | .cds--lg\:col-span-13 {
|
| 1474 | --cds-grid-columns: 13;
|
| 1475 | display: block;
|
| 1476 | grid-column: span 13/span 13;
|
| 1477 | }
|
| 1478 | }
|
| 1479 | @media (min-width: 66rem) {
|
| 1480 | .cds--lg\:col-span-14 {
|
| 1481 | --cds-grid-columns: 14;
|
| 1482 | display: block;
|
| 1483 | grid-column: span 14/span 14;
|
| 1484 | }
|
| 1485 | }
|
| 1486 | @media (min-width: 66rem) {
|
| 1487 | .cds--lg\:col-span-15 {
|
| 1488 | --cds-grid-columns: 15;
|
| 1489 | display: block;
|
| 1490 | grid-column: span 15/span 15;
|
| 1491 | }
|
| 1492 | }
|
| 1493 | @media (min-width: 66rem) {
|
| 1494 | .cds--lg\:col-span-16 {
|
| 1495 | --cds-grid-columns: 16;
|
| 1496 | display: block;
|
| 1497 | grid-column: span 16/span 16;
|
| 1498 | }
|
| 1499 | }
|
| 1500 | @media (min-width: 66rem) {
|
| 1501 | .cds--lg\:col-span-auto {
|
| 1502 | grid-column: auto;
|
| 1503 | }
|
| 1504 | .cds--lg\:col-span-100 {
|
| 1505 | grid-column: 1/-1;
|
| 1506 | }
|
| 1507 | .cds--lg\:col-span-75 {
|
| 1508 | --cds-grid-columns: 12;
|
| 1509 | grid-column: span 12 / span 12;
|
| 1510 | }
|
| 1511 | .cds--lg\:col-span-50 {
|
| 1512 | --cds-grid-columns: 8;
|
| 1513 | grid-column: span 8 / span 8;
|
| 1514 | }
|
| 1515 | .cds--lg\:col-span-25 {
|
| 1516 | --cds-grid-columns: 4;
|
| 1517 | grid-column: span 4 / span 4;
|
| 1518 | }
|
| 1519 | }
|
| 1520 | @media (min-width: 82rem) {
|
| 1521 | .cds--xlg\:col-span-0 {
|
| 1522 | display: none;
|
| 1523 | }
|
| 1524 | }
|
| 1525 | @media (min-width: 82rem) {
|
| 1526 | .cds--xlg\:col-span-1 {
|
| 1527 | --cds-grid-columns: 1;
|
| 1528 | display: block;
|
| 1529 | grid-column: span 1/span 1;
|
| 1530 | }
|
| 1531 | }
|
| 1532 | @media (min-width: 82rem) {
|
| 1533 | .cds--xlg\:col-span-2 {
|
| 1534 | --cds-grid-columns: 2;
|
| 1535 | display: block;
|
| 1536 | grid-column: span 2/span 2;
|
| 1537 | }
|
| 1538 | }
|
| 1539 | @media (min-width: 82rem) {
|
| 1540 | .cds--xlg\:col-span-3 {
|
| 1541 | --cds-grid-columns: 3;
|
| 1542 | display: block;
|
| 1543 | grid-column: span 3/span 3;
|
| 1544 | }
|
| 1545 | }
|
| 1546 | @media (min-width: 82rem) {
|
| 1547 | .cds--xlg\:col-span-4 {
|
| 1548 | --cds-grid-columns: 4;
|
| 1549 | display: block;
|
| 1550 | grid-column: span 4/span 4;
|
| 1551 | }
|
| 1552 | }
|
| 1553 | @media (min-width: 82rem) {
|
| 1554 | .cds--xlg\:col-span-5 {
|
| 1555 | --cds-grid-columns: 5;
|
| 1556 | display: block;
|
| 1557 | grid-column: span 5/span 5;
|
| 1558 | }
|
| 1559 | }
|
| 1560 | @media (min-width: 82rem) {
|
| 1561 | .cds--xlg\:col-span-6 {
|
| 1562 | --cds-grid-columns: 6;
|
| 1563 | display: block;
|
| 1564 | grid-column: span 6/span 6;
|
| 1565 | }
|
| 1566 | }
|
| 1567 | @media (min-width: 82rem) {
|
| 1568 | .cds--xlg\:col-span-7 {
|
| 1569 | --cds-grid-columns: 7;
|
| 1570 | display: block;
|
| 1571 | grid-column: span 7/span 7;
|
| 1572 | }
|
| 1573 | }
|
| 1574 | @media (min-width: 82rem) {
|
| 1575 | .cds--xlg\:col-span-8 {
|
| 1576 | --cds-grid-columns: 8;
|
| 1577 | display: block;
|
| 1578 | grid-column: span 8/span 8;
|
| 1579 | }
|
| 1580 | }
|
| 1581 | @media (min-width: 82rem) {
|
| 1582 | .cds--xlg\:col-span-9 {
|
| 1583 | --cds-grid-columns: 9;
|
| 1584 | display: block;
|
| 1585 | grid-column: span 9/span 9;
|
| 1586 | }
|
| 1587 | }
|
| 1588 | @media (min-width: 82rem) {
|
| 1589 | .cds--xlg\:col-span-10 {
|
| 1590 | --cds-grid-columns: 10;
|
| 1591 | display: block;
|
| 1592 | grid-column: span 10/span 10;
|
| 1593 | }
|
| 1594 | }
|
| 1595 | @media (min-width: 82rem) {
|
| 1596 | .cds--xlg\:col-span-11 {
|
| 1597 | --cds-grid-columns: 11;
|
| 1598 | display: block;
|
| 1599 | grid-column: span 11/span 11;
|
| 1600 | }
|
| 1601 | }
|
| 1602 | @media (min-width: 82rem) {
|
| 1603 | .cds--xlg\:col-span-12 {
|
| 1604 | --cds-grid-columns: 12;
|
| 1605 | display: block;
|
| 1606 | grid-column: span 12/span 12;
|
| 1607 | }
|
| 1608 | }
|
| 1609 | @media (min-width: 82rem) {
|
| 1610 | .cds--xlg\:col-span-13 {
|
| 1611 | --cds-grid-columns: 13;
|
| 1612 | display: block;
|
| 1613 | grid-column: span 13/span 13;
|
| 1614 | }
|
| 1615 | }
|
| 1616 | @media (min-width: 82rem) {
|
| 1617 | .cds--xlg\:col-span-14 {
|
| 1618 | --cds-grid-columns: 14;
|
| 1619 | display: block;
|
| 1620 | grid-column: span 14/span 14;
|
| 1621 | }
|
| 1622 | }
|
| 1623 | @media (min-width: 82rem) {
|
| 1624 | .cds--xlg\:col-span-15 {
|
| 1625 | --cds-grid-columns: 15;
|
| 1626 | display: block;
|
| 1627 | grid-column: span 15/span 15;
|
| 1628 | }
|
| 1629 | }
|
| 1630 | @media (min-width: 82rem) {
|
| 1631 | .cds--xlg\:col-span-16 {
|
| 1632 | --cds-grid-columns: 16;
|
| 1633 | display: block;
|
| 1634 | grid-column: span 16/span 16;
|
| 1635 | }
|
| 1636 | }
|
| 1637 | @media (min-width: 82rem) {
|
| 1638 | .cds--xlg\:col-span-auto {
|
| 1639 | grid-column: auto;
|
| 1640 | }
|
| 1641 | .cds--xlg\:col-span-100 {
|
| 1642 | grid-column: 1/-1;
|
| 1643 | }
|
| 1644 | .cds--xlg\:col-span-75 {
|
| 1645 | --cds-grid-columns: 12;
|
| 1646 | grid-column: span 12 / span 12;
|
| 1647 | }
|
| 1648 | .cds--xlg\:col-span-50 {
|
| 1649 | --cds-grid-columns: 8;
|
| 1650 | grid-column: span 8 / span 8;
|
| 1651 | }
|
| 1652 | .cds--xlg\:col-span-25 {
|
| 1653 | --cds-grid-columns: 4;
|
| 1654 | grid-column: span 4 / span 4;
|
| 1655 | }
|
| 1656 | }
|
| 1657 | @media (min-width: 99rem) {
|
| 1658 | .cds--max\:col-span-0 {
|
| 1659 | display: none;
|
| 1660 | }
|
| 1661 | }
|
| 1662 | @media (min-width: 99rem) {
|
| 1663 | .cds--max\:col-span-1 {
|
| 1664 | --cds-grid-columns: 1;
|
| 1665 | display: block;
|
| 1666 | grid-column: span 1/span 1;
|
| 1667 | }
|
| 1668 | }
|
| 1669 | @media (min-width: 99rem) {
|
| 1670 | .cds--max\:col-span-2 {
|
| 1671 | --cds-grid-columns: 2;
|
| 1672 | display: block;
|
| 1673 | grid-column: span 2/span 2;
|
| 1674 | }
|
| 1675 | }
|
| 1676 | @media (min-width: 99rem) {
|
| 1677 | .cds--max\:col-span-3 {
|
| 1678 | --cds-grid-columns: 3;
|
| 1679 | display: block;
|
| 1680 | grid-column: span 3/span 3;
|
| 1681 | }
|
| 1682 | }
|
| 1683 | @media (min-width: 99rem) {
|
| 1684 | .cds--max\:col-span-4 {
|
| 1685 | --cds-grid-columns: 4;
|
| 1686 | display: block;
|
| 1687 | grid-column: span 4/span 4;
|
| 1688 | }
|
| 1689 | }
|
| 1690 | @media (min-width: 99rem) {
|
| 1691 | .cds--max\:col-span-5 {
|
| 1692 | --cds-grid-columns: 5;
|
| 1693 | display: block;
|
| 1694 | grid-column: span 5/span 5;
|
| 1695 | }
|
| 1696 | }
|
| 1697 | @media (min-width: 99rem) {
|
| 1698 | .cds--max\:col-span-6 {
|
| 1699 | --cds-grid-columns: 6;
|
| 1700 | display: block;
|
| 1701 | grid-column: span 6/span 6;
|
| 1702 | }
|
| 1703 | }
|
| 1704 | @media (min-width: 99rem) {
|
| 1705 | .cds--max\:col-span-7 {
|
| 1706 | --cds-grid-columns: 7;
|
| 1707 | display: block;
|
| 1708 | grid-column: span 7/span 7;
|
| 1709 | }
|
| 1710 | }
|
| 1711 | @media (min-width: 99rem) {
|
| 1712 | .cds--max\:col-span-8 {
|
| 1713 | --cds-grid-columns: 8;
|
| 1714 | display: block;
|
| 1715 | grid-column: span 8/span 8;
|
| 1716 | }
|
| 1717 | }
|
| 1718 | @media (min-width: 99rem) {
|
| 1719 | .cds--max\:col-span-9 {
|
| 1720 | --cds-grid-columns: 9;
|
| 1721 | display: block;
|
| 1722 | grid-column: span 9/span 9;
|
| 1723 | }
|
| 1724 | }
|
| 1725 | @media (min-width: 99rem) {
|
| 1726 | .cds--max\:col-span-10 {
|
| 1727 | --cds-grid-columns: 10;
|
| 1728 | display: block;
|
| 1729 | grid-column: span 10/span 10;
|
| 1730 | }
|
| 1731 | }
|
| 1732 | @media (min-width: 99rem) {
|
| 1733 | .cds--max\:col-span-11 {
|
| 1734 | --cds-grid-columns: 11;
|
| 1735 | display: block;
|
| 1736 | grid-column: span 11/span 11;
|
| 1737 | }
|
| 1738 | }
|
| 1739 | @media (min-width: 99rem) {
|
| 1740 | .cds--max\:col-span-12 {
|
| 1741 | --cds-grid-columns: 12;
|
| 1742 | display: block;
|
| 1743 | grid-column: span 12/span 12;
|
| 1744 | }
|
| 1745 | }
|
| 1746 | @media (min-width: 99rem) {
|
| 1747 | .cds--max\:col-span-13 {
|
| 1748 | --cds-grid-columns: 13;
|
| 1749 | display: block;
|
| 1750 | grid-column: span 13/span 13;
|
| 1751 | }
|
| 1752 | }
|
| 1753 | @media (min-width: 99rem) {
|
| 1754 | .cds--max\:col-span-14 {
|
| 1755 | --cds-grid-columns: 14;
|
| 1756 | display: block;
|
| 1757 | grid-column: span 14/span 14;
|
| 1758 | }
|
| 1759 | }
|
| 1760 | @media (min-width: 99rem) {
|
| 1761 | .cds--max\:col-span-15 {
|
| 1762 | --cds-grid-columns: 15;
|
| 1763 | display: block;
|
| 1764 | grid-column: span 15/span 15;
|
| 1765 | }
|
| 1766 | }
|
| 1767 | @media (min-width: 99rem) {
|
| 1768 | .cds--max\:col-span-16 {
|
| 1769 | --cds-grid-columns: 16;
|
| 1770 | display: block;
|
| 1771 | grid-column: span 16/span 16;
|
| 1772 | }
|
| 1773 | }
|
| 1774 | @media (min-width: 99rem) {
|
| 1775 | .cds--max\:col-span-auto {
|
| 1776 | grid-column: auto;
|
| 1777 | }
|
| 1778 | .cds--max\:col-span-100 {
|
| 1779 | grid-column: 1/-1;
|
| 1780 | }
|
| 1781 | .cds--max\:col-span-75 {
|
| 1782 | --cds-grid-columns: 12;
|
| 1783 | grid-column: span 12 / span 12;
|
| 1784 | }
|
| 1785 | .cds--max\:col-span-50 {
|
| 1786 | --cds-grid-columns: 8;
|
| 1787 | grid-column: span 8 / span 8;
|
| 1788 | }
|
| 1789 | .cds--max\:col-span-25 {
|
| 1790 | --cds-grid-columns: 4;
|
| 1791 | grid-column: span 4 / span 4;
|
| 1792 | }
|
| 1793 | }
|
| 1794 | .cds--col-span-auto {
|
| 1795 | grid-column: auto;
|
| 1796 | }
|
| 1797 |
|
| 1798 | .cds--col-span-100 {
|
| 1799 | grid-column: 1/-1;
|
| 1800 | }
|
| 1801 |
|
| 1802 | .cds--col-span-75 {
|
| 1803 | --cds-grid-columns: 3;
|
| 1804 | grid-column: span 3 / span 3;
|
| 1805 | }
|
| 1806 | @media (min-width: 42rem) {
|
| 1807 | .cds--col-span-75 {
|
| 1808 | --cds-grid-columns: 6;
|
| 1809 | grid-column: span 6 / span 6;
|
| 1810 | }
|
| 1811 | }
|
| 1812 | @media (min-width: 66rem) {
|
| 1813 | .cds--col-span-75 {
|
| 1814 | --cds-grid-columns: 12;
|
| 1815 | grid-column: span 12 / span 12;
|
| 1816 | }
|
| 1817 | }
|
| 1818 |
|
| 1819 | .cds--col-span-50 {
|
| 1820 | --cds-grid-columns: 2;
|
| 1821 | grid-column: span 2 / span 2;
|
| 1822 | }
|
| 1823 | @media (min-width: 42rem) {
|
| 1824 | .cds--col-span-50 {
|
| 1825 | --cds-grid-columns: 4;
|
| 1826 | grid-column: span 4 / span 4;
|
| 1827 | }
|
| 1828 | }
|
| 1829 | @media (min-width: 66rem) {
|
| 1830 | .cds--col-span-50 {
|
| 1831 | --cds-grid-columns: 8;
|
| 1832 | grid-column: span 8 / span 8;
|
| 1833 | }
|
| 1834 | }
|
| 1835 |
|
| 1836 | .cds--col-span-25 {
|
| 1837 | --cds-grid-columns: 1;
|
| 1838 | grid-column: span 1 / span 1;
|
| 1839 | }
|
| 1840 | @media (min-width: 42rem) {
|
| 1841 | .cds--col-span-25 {
|
| 1842 | --cds-grid-columns: 2;
|
| 1843 | grid-column: span 2 / span 2;
|
| 1844 | }
|
| 1845 | }
|
| 1846 | @media (min-width: 66rem) {
|
| 1847 | .cds--col-span-25 {
|
| 1848 | --cds-grid-columns: 4;
|
| 1849 | grid-column: span 4 / span 4;
|
| 1850 | }
|
| 1851 | }
|
| 1852 |
|
| 1853 | .cds--col-start-1 {
|
| 1854 | grid-column-start: 1;
|
| 1855 | }
|
| 1856 |
|
| 1857 | .cds--col-start-2 {
|
| 1858 | grid-column-start: 2;
|
| 1859 | }
|
| 1860 |
|
| 1861 | .cds--col-start-3 {
|
| 1862 | grid-column-start: 3;
|
| 1863 | }
|
| 1864 |
|
| 1865 | .cds--col-start-4 {
|
| 1866 | grid-column-start: 4;
|
| 1867 | }
|
| 1868 |
|
| 1869 | .cds--col-start-5 {
|
| 1870 | grid-column-start: 5;
|
| 1871 | }
|
| 1872 |
|
| 1873 | .cds--col-start-6 {
|
| 1874 | grid-column-start: 6;
|
| 1875 | }
|
| 1876 |
|
| 1877 | .cds--col-start-7 {
|
| 1878 | grid-column-start: 7;
|
| 1879 | }
|
| 1880 |
|
| 1881 | .cds--col-start-8 {
|
| 1882 | grid-column-start: 8;
|
| 1883 | }
|
| 1884 |
|
| 1885 | .cds--col-start-9 {
|
| 1886 | grid-column-start: 9;
|
| 1887 | }
|
| 1888 |
|
| 1889 | .cds--col-start-10 {
|
| 1890 | grid-column-start: 10;
|
| 1891 | }
|
| 1892 |
|
| 1893 | .cds--col-start-11 {
|
| 1894 | grid-column-start: 11;
|
| 1895 | }
|
| 1896 |
|
| 1897 | .cds--col-start-12 {
|
| 1898 | grid-column-start: 12;
|
| 1899 | }
|
| 1900 |
|
| 1901 | .cds--col-start-13 {
|
| 1902 | grid-column-start: 13;
|
| 1903 | }
|
| 1904 |
|
| 1905 | .cds--col-start-14 {
|
| 1906 | grid-column-start: 14;
|
| 1907 | }
|
| 1908 |
|
| 1909 | .cds--col-start-15 {
|
| 1910 | grid-column-start: 15;
|
| 1911 | }
|
| 1912 |
|
| 1913 | .cds--col-start-16 {
|
| 1914 | grid-column-start: 16;
|
| 1915 | }
|
| 1916 |
|
| 1917 | .cds--col-end-2 {
|
| 1918 | grid-column-end: 2;
|
| 1919 | }
|
| 1920 |
|
| 1921 | .cds--col-end-3 {
|
| 1922 | grid-column-end: 3;
|
| 1923 | }
|
| 1924 |
|
| 1925 | .cds--col-end-4 {
|
| 1926 | grid-column-end: 4;
|
| 1927 | }
|
| 1928 |
|
| 1929 | .cds--col-end-5 {
|
| 1930 | grid-column-end: 5;
|
| 1931 | }
|
| 1932 |
|
| 1933 | .cds--col-end-6 {
|
| 1934 | grid-column-end: 6;
|
| 1935 | }
|
| 1936 |
|
| 1937 | .cds--col-end-7 {
|
| 1938 | grid-column-end: 7;
|
| 1939 | }
|
| 1940 |
|
| 1941 | .cds--col-end-8 {
|
| 1942 | grid-column-end: 8;
|
| 1943 | }
|
| 1944 |
|
| 1945 | .cds--col-end-9 {
|
| 1946 | grid-column-end: 9;
|
| 1947 | }
|
| 1948 |
|
| 1949 | .cds--col-end-10 {
|
| 1950 | grid-column-end: 10;
|
| 1951 | }
|
| 1952 |
|
| 1953 | .cds--col-end-11 {
|
| 1954 | grid-column-end: 11;
|
| 1955 | }
|
| 1956 |
|
| 1957 | .cds--col-end-12 {
|
| 1958 | grid-column-end: 12;
|
| 1959 | }
|
| 1960 |
|
| 1961 | .cds--col-end-13 {
|
| 1962 | grid-column-end: 13;
|
| 1963 | }
|
| 1964 |
|
| 1965 | .cds--col-end-14 {
|
| 1966 | grid-column-end: 14;
|
| 1967 | }
|
| 1968 |
|
| 1969 | .cds--col-end-15 {
|
| 1970 | grid-column-end: 15;
|
| 1971 | }
|
| 1972 |
|
| 1973 | .cds--col-end-16 {
|
| 1974 | grid-column-end: 16;
|
| 1975 | }
|
| 1976 |
|
| 1977 | .cds--col-end-17 {
|
| 1978 | grid-column-end: 17;
|
| 1979 | }
|
| 1980 |
|
| 1981 | .cds--col-start-auto {
|
| 1982 | grid-column-start: auto;
|
| 1983 | }
|
| 1984 |
|
| 1985 | .cds--col-end-auto {
|
| 1986 | grid-column-end: auto;
|
| 1987 | }
|
| 1988 |
|
| 1989 | .cds--sm\:col-start-1 {
|
| 1990 | grid-column-start: 1;
|
| 1991 | }
|
| 1992 |
|
| 1993 | .cds--sm\:col-start-2 {
|
| 1994 | grid-column-start: 2;
|
| 1995 | }
|
| 1996 |
|
| 1997 | .cds--sm\:col-start-3 {
|
| 1998 | grid-column-start: 3;
|
| 1999 | }
|
| 2000 |
|
| 2001 | .cds--sm\:col-start-4 {
|
| 2002 | grid-column-start: 4;
|
| 2003 | }
|
| 2004 |
|
| 2005 | .cds--sm\:col-start-5 {
|
| 2006 | grid-column-start: 5;
|
| 2007 | }
|
| 2008 |
|
| 2009 | .cds--sm\:col-start-6 {
|
| 2010 | grid-column-start: 6;
|
| 2011 | }
|
| 2012 |
|
| 2013 | .cds--sm\:col-start-7 {
|
| 2014 | grid-column-start: 7;
|
| 2015 | }
|
| 2016 |
|
| 2017 | .cds--sm\:col-start-8 {
|
| 2018 | grid-column-start: 8;
|
| 2019 | }
|
| 2020 |
|
| 2021 | .cds--sm\:col-start-9 {
|
| 2022 | grid-column-start: 9;
|
| 2023 | }
|
| 2024 |
|
| 2025 | .cds--sm\:col-start-10 {
|
| 2026 | grid-column-start: 10;
|
| 2027 | }
|
| 2028 |
|
| 2029 | .cds--sm\:col-start-11 {
|
| 2030 | grid-column-start: 11;
|
| 2031 | }
|
| 2032 |
|
| 2033 | .cds--sm\:col-start-12 {
|
| 2034 | grid-column-start: 12;
|
| 2035 | }
|
| 2036 |
|
| 2037 | .cds--sm\:col-start-13 {
|
| 2038 | grid-column-start: 13;
|
| 2039 | }
|
| 2040 |
|
| 2041 | .cds--sm\:col-start-14 {
|
| 2042 | grid-column-start: 14;
|
| 2043 | }
|
| 2044 |
|
| 2045 | .cds--sm\:col-start-15 {
|
| 2046 | grid-column-start: 15;
|
| 2047 | }
|
| 2048 |
|
| 2049 | .cds--sm\:col-start-16 {
|
| 2050 | grid-column-start: 16;
|
| 2051 | }
|
| 2052 |
|
| 2053 | .cds--sm\:col-end-2 {
|
| 2054 | grid-column-end: 2;
|
| 2055 | }
|
| 2056 |
|
| 2057 | .cds--sm\:col-end-3 {
|
| 2058 | grid-column-end: 3;
|
| 2059 | }
|
| 2060 |
|
| 2061 | .cds--sm\:col-end-4 {
|
| 2062 | grid-column-end: 4;
|
| 2063 | }
|
| 2064 |
|
| 2065 | .cds--sm\:col-end-5 {
|
| 2066 | grid-column-end: 5;
|
| 2067 | }
|
| 2068 |
|
| 2069 | .cds--sm\:col-end-6 {
|
| 2070 | grid-column-end: 6;
|
| 2071 | }
|
| 2072 |
|
| 2073 | .cds--sm\:col-end-7 {
|
| 2074 | grid-column-end: 7;
|
| 2075 | }
|
| 2076 |
|
| 2077 | .cds--sm\:col-end-8 {
|
| 2078 | grid-column-end: 8;
|
| 2079 | }
|
| 2080 |
|
| 2081 | .cds--sm\:col-end-9 {
|
| 2082 | grid-column-end: 9;
|
| 2083 | }
|
| 2084 |
|
| 2085 | .cds--sm\:col-end-10 {
|
| 2086 | grid-column-end: 10;
|
| 2087 | }
|
| 2088 |
|
| 2089 | .cds--sm\:col-end-11 {
|
| 2090 | grid-column-end: 11;
|
| 2091 | }
|
| 2092 |
|
| 2093 | .cds--sm\:col-end-12 {
|
| 2094 | grid-column-end: 12;
|
| 2095 | }
|
| 2096 |
|
| 2097 | .cds--sm\:col-end-13 {
|
| 2098 | grid-column-end: 13;
|
| 2099 | }
|
| 2100 |
|
| 2101 | .cds--sm\:col-end-14 {
|
| 2102 | grid-column-end: 14;
|
| 2103 | }
|
| 2104 |
|
| 2105 | .cds--sm\:col-end-15 {
|
| 2106 | grid-column-end: 15;
|
| 2107 | }
|
| 2108 |
|
| 2109 | .cds--sm\:col-end-16 {
|
| 2110 | grid-column-end: 16;
|
| 2111 | }
|
| 2112 |
|
| 2113 | .cds--sm\:col-end-17 {
|
| 2114 | grid-column-end: 17;
|
| 2115 | }
|
| 2116 |
|
| 2117 | .cds--sm\:col-start-auto {
|
| 2118 | grid-column-start: auto;
|
| 2119 | }
|
| 2120 |
|
| 2121 | .cds--sm\:col-end-auto {
|
| 2122 | grid-column-end: auto;
|
| 2123 | }
|
| 2124 |
|
| 2125 | @media (min-width: 42rem) {
|
| 2126 | .cds--md\:col-start-1 {
|
| 2127 | grid-column-start: 1;
|
| 2128 | }
|
| 2129 | .cds--md\:col-start-2 {
|
| 2130 | grid-column-start: 2;
|
| 2131 | }
|
| 2132 | .cds--md\:col-start-3 {
|
| 2133 | grid-column-start: 3;
|
| 2134 | }
|
| 2135 | .cds--md\:col-start-4 {
|
| 2136 | grid-column-start: 4;
|
| 2137 | }
|
| 2138 | .cds--md\:col-start-5 {
|
| 2139 | grid-column-start: 5;
|
| 2140 | }
|
| 2141 | .cds--md\:col-start-6 {
|
| 2142 | grid-column-start: 6;
|
| 2143 | }
|
| 2144 | .cds--md\:col-start-7 {
|
| 2145 | grid-column-start: 7;
|
| 2146 | }
|
| 2147 | .cds--md\:col-start-8 {
|
| 2148 | grid-column-start: 8;
|
| 2149 | }
|
| 2150 | .cds--md\:col-start-9 {
|
| 2151 | grid-column-start: 9;
|
| 2152 | }
|
| 2153 | .cds--md\:col-start-10 {
|
| 2154 | grid-column-start: 10;
|
| 2155 | }
|
| 2156 | .cds--md\:col-start-11 {
|
| 2157 | grid-column-start: 11;
|
| 2158 | }
|
| 2159 | .cds--md\:col-start-12 {
|
| 2160 | grid-column-start: 12;
|
| 2161 | }
|
| 2162 | .cds--md\:col-start-13 {
|
| 2163 | grid-column-start: 13;
|
| 2164 | }
|
| 2165 | .cds--md\:col-start-14 {
|
| 2166 | grid-column-start: 14;
|
| 2167 | }
|
| 2168 | .cds--md\:col-start-15 {
|
| 2169 | grid-column-start: 15;
|
| 2170 | }
|
| 2171 | .cds--md\:col-start-16 {
|
| 2172 | grid-column-start: 16;
|
| 2173 | }
|
| 2174 | .cds--md\:col-end-2 {
|
| 2175 | grid-column-end: 2;
|
| 2176 | }
|
| 2177 | .cds--md\:col-end-3 {
|
| 2178 | grid-column-end: 3;
|
| 2179 | }
|
| 2180 | .cds--md\:col-end-4 {
|
| 2181 | grid-column-end: 4;
|
| 2182 | }
|
| 2183 | .cds--md\:col-end-5 {
|
| 2184 | grid-column-end: 5;
|
| 2185 | }
|
| 2186 | .cds--md\:col-end-6 {
|
| 2187 | grid-column-end: 6;
|
| 2188 | }
|
| 2189 | .cds--md\:col-end-7 {
|
| 2190 | grid-column-end: 7;
|
| 2191 | }
|
| 2192 | .cds--md\:col-end-8 {
|
| 2193 | grid-column-end: 8;
|
| 2194 | }
|
| 2195 | .cds--md\:col-end-9 {
|
| 2196 | grid-column-end: 9;
|
| 2197 | }
|
| 2198 | .cds--md\:col-end-10 {
|
| 2199 | grid-column-end: 10;
|
| 2200 | }
|
| 2201 | .cds--md\:col-end-11 {
|
| 2202 | grid-column-end: 11;
|
| 2203 | }
|
| 2204 | .cds--md\:col-end-12 {
|
| 2205 | grid-column-end: 12;
|
| 2206 | }
|
| 2207 | .cds--md\:col-end-13 {
|
| 2208 | grid-column-end: 13;
|
| 2209 | }
|
| 2210 | .cds--md\:col-end-14 {
|
| 2211 | grid-column-end: 14;
|
| 2212 | }
|
| 2213 | .cds--md\:col-end-15 {
|
| 2214 | grid-column-end: 15;
|
| 2215 | }
|
| 2216 | .cds--md\:col-end-16 {
|
| 2217 | grid-column-end: 16;
|
| 2218 | }
|
| 2219 | .cds--md\:col-end-17 {
|
| 2220 | grid-column-end: 17;
|
| 2221 | }
|
| 2222 | .cds--md\:col-start-auto {
|
| 2223 | grid-column-start: auto;
|
| 2224 | }
|
| 2225 | .cds--md\:col-end-auto {
|
| 2226 | grid-column-end: auto;
|
| 2227 | }
|
| 2228 | }
|
| 2229 | @media (min-width: 66rem) {
|
| 2230 | .cds--lg\:col-start-1 {
|
| 2231 | grid-column-start: 1;
|
| 2232 | }
|
| 2233 | .cds--lg\:col-start-2 {
|
| 2234 | grid-column-start: 2;
|
| 2235 | }
|
| 2236 | .cds--lg\:col-start-3 {
|
| 2237 | grid-column-start: 3;
|
| 2238 | }
|
| 2239 | .cds--lg\:col-start-4 {
|
| 2240 | grid-column-start: 4;
|
| 2241 | }
|
| 2242 | .cds--lg\:col-start-5 {
|
| 2243 | grid-column-start: 5;
|
| 2244 | }
|
| 2245 | .cds--lg\:col-start-6 {
|
| 2246 | grid-column-start: 6;
|
| 2247 | }
|
| 2248 | .cds--lg\:col-start-7 {
|
| 2249 | grid-column-start: 7;
|
| 2250 | }
|
| 2251 | .cds--lg\:col-start-8 {
|
| 2252 | grid-column-start: 8;
|
| 2253 | }
|
| 2254 | .cds--lg\:col-start-9 {
|
| 2255 | grid-column-start: 9;
|
| 2256 | }
|
| 2257 | .cds--lg\:col-start-10 {
|
| 2258 | grid-column-start: 10;
|
| 2259 | }
|
| 2260 | .cds--lg\:col-start-11 {
|
| 2261 | grid-column-start: 11;
|
| 2262 | }
|
| 2263 | .cds--lg\:col-start-12 {
|
| 2264 | grid-column-start: 12;
|
| 2265 | }
|
| 2266 | .cds--lg\:col-start-13 {
|
| 2267 | grid-column-start: 13;
|
| 2268 | }
|
| 2269 | .cds--lg\:col-start-14 {
|
| 2270 | grid-column-start: 14;
|
| 2271 | }
|
| 2272 | .cds--lg\:col-start-15 {
|
| 2273 | grid-column-start: 15;
|
| 2274 | }
|
| 2275 | .cds--lg\:col-start-16 {
|
| 2276 | grid-column-start: 16;
|
| 2277 | }
|
| 2278 | .cds--lg\:col-end-2 {
|
| 2279 | grid-column-end: 2;
|
| 2280 | }
|
| 2281 | .cds--lg\:col-end-3 {
|
| 2282 | grid-column-end: 3;
|
| 2283 | }
|
| 2284 | .cds--lg\:col-end-4 {
|
| 2285 | grid-column-end: 4;
|
| 2286 | }
|
| 2287 | .cds--lg\:col-end-5 {
|
| 2288 | grid-column-end: 5;
|
| 2289 | }
|
| 2290 | .cds--lg\:col-end-6 {
|
| 2291 | grid-column-end: 6;
|
| 2292 | }
|
| 2293 | .cds--lg\:col-end-7 {
|
| 2294 | grid-column-end: 7;
|
| 2295 | }
|
| 2296 | .cds--lg\:col-end-8 {
|
| 2297 | grid-column-end: 8;
|
| 2298 | }
|
| 2299 | .cds--lg\:col-end-9 {
|
| 2300 | grid-column-end: 9;
|
| 2301 | }
|
| 2302 | .cds--lg\:col-end-10 {
|
| 2303 | grid-column-end: 10;
|
| 2304 | }
|
| 2305 | .cds--lg\:col-end-11 {
|
| 2306 | grid-column-end: 11;
|
| 2307 | }
|
| 2308 | .cds--lg\:col-end-12 {
|
| 2309 | grid-column-end: 12;
|
| 2310 | }
|
| 2311 | .cds--lg\:col-end-13 {
|
| 2312 | grid-column-end: 13;
|
| 2313 | }
|
| 2314 | .cds--lg\:col-end-14 {
|
| 2315 | grid-column-end: 14;
|
| 2316 | }
|
| 2317 | .cds--lg\:col-end-15 {
|
| 2318 | grid-column-end: 15;
|
| 2319 | }
|
| 2320 | .cds--lg\:col-end-16 {
|
| 2321 | grid-column-end: 16;
|
| 2322 | }
|
| 2323 | .cds--lg\:col-end-17 {
|
| 2324 | grid-column-end: 17;
|
| 2325 | }
|
| 2326 | .cds--lg\:col-start-auto {
|
| 2327 | grid-column-start: auto;
|
| 2328 | }
|
| 2329 | .cds--lg\:col-end-auto {
|
| 2330 | grid-column-end: auto;
|
| 2331 | }
|
| 2332 | }
|
| 2333 | @media (min-width: 82rem) {
|
| 2334 | .cds--xlg\:col-start-1 {
|
| 2335 | grid-column-start: 1;
|
| 2336 | }
|
| 2337 | .cds--xlg\:col-start-2 {
|
| 2338 | grid-column-start: 2;
|
| 2339 | }
|
| 2340 | .cds--xlg\:col-start-3 {
|
| 2341 | grid-column-start: 3;
|
| 2342 | }
|
| 2343 | .cds--xlg\:col-start-4 {
|
| 2344 | grid-column-start: 4;
|
| 2345 | }
|
| 2346 | .cds--xlg\:col-start-5 {
|
| 2347 | grid-column-start: 5;
|
| 2348 | }
|
| 2349 | .cds--xlg\:col-start-6 {
|
| 2350 | grid-column-start: 6;
|
| 2351 | }
|
| 2352 | .cds--xlg\:col-start-7 {
|
| 2353 | grid-column-start: 7;
|
| 2354 | }
|
| 2355 | .cds--xlg\:col-start-8 {
|
| 2356 | grid-column-start: 8;
|
| 2357 | }
|
| 2358 | .cds--xlg\:col-start-9 {
|
| 2359 | grid-column-start: 9;
|
| 2360 | }
|
| 2361 | .cds--xlg\:col-start-10 {
|
| 2362 | grid-column-start: 10;
|
| 2363 | }
|
| 2364 | .cds--xlg\:col-start-11 {
|
| 2365 | grid-column-start: 11;
|
| 2366 | }
|
| 2367 | .cds--xlg\:col-start-12 {
|
| 2368 | grid-column-start: 12;
|
| 2369 | }
|
| 2370 | .cds--xlg\:col-start-13 {
|
| 2371 | grid-column-start: 13;
|
| 2372 | }
|
| 2373 | .cds--xlg\:col-start-14 {
|
| 2374 | grid-column-start: 14;
|
| 2375 | }
|
| 2376 | .cds--xlg\:col-start-15 {
|
| 2377 | grid-column-start: 15;
|
| 2378 | }
|
| 2379 | .cds--xlg\:col-start-16 {
|
| 2380 | grid-column-start: 16;
|
| 2381 | }
|
| 2382 | .cds--xlg\:col-end-2 {
|
| 2383 | grid-column-end: 2;
|
| 2384 | }
|
| 2385 | .cds--xlg\:col-end-3 {
|
| 2386 | grid-column-end: 3;
|
| 2387 | }
|
| 2388 | .cds--xlg\:col-end-4 {
|
| 2389 | grid-column-end: 4;
|
| 2390 | }
|
| 2391 | .cds--xlg\:col-end-5 {
|
| 2392 | grid-column-end: 5;
|
| 2393 | }
|
| 2394 | .cds--xlg\:col-end-6 {
|
| 2395 | grid-column-end: 6;
|
| 2396 | }
|
| 2397 | .cds--xlg\:col-end-7 {
|
| 2398 | grid-column-end: 7;
|
| 2399 | }
|
| 2400 | .cds--xlg\:col-end-8 {
|
| 2401 | grid-column-end: 8;
|
| 2402 | }
|
| 2403 | .cds--xlg\:col-end-9 {
|
| 2404 | grid-column-end: 9;
|
| 2405 | }
|
| 2406 | .cds--xlg\:col-end-10 {
|
| 2407 | grid-column-end: 10;
|
| 2408 | }
|
| 2409 | .cds--xlg\:col-end-11 {
|
| 2410 | grid-column-end: 11;
|
| 2411 | }
|
| 2412 | .cds--xlg\:col-end-12 {
|
| 2413 | grid-column-end: 12;
|
| 2414 | }
|
| 2415 | .cds--xlg\:col-end-13 {
|
| 2416 | grid-column-end: 13;
|
| 2417 | }
|
| 2418 | .cds--xlg\:col-end-14 {
|
| 2419 | grid-column-end: 14;
|
| 2420 | }
|
| 2421 | .cds--xlg\:col-end-15 {
|
| 2422 | grid-column-end: 15;
|
| 2423 | }
|
| 2424 | .cds--xlg\:col-end-16 {
|
| 2425 | grid-column-end: 16;
|
| 2426 | }
|
| 2427 | .cds--xlg\:col-end-17 {
|
| 2428 | grid-column-end: 17;
|
| 2429 | }
|
| 2430 | .cds--xlg\:col-start-auto {
|
| 2431 | grid-column-start: auto;
|
| 2432 | }
|
| 2433 | .cds--xlg\:col-end-auto {
|
| 2434 | grid-column-end: auto;
|
| 2435 | }
|
| 2436 | }
|
| 2437 | @media (min-width: 99rem) {
|
| 2438 | .cds--max\:col-start-1 {
|
| 2439 | grid-column-start: 1;
|
| 2440 | }
|
| 2441 | .cds--max\:col-start-2 {
|
| 2442 | grid-column-start: 2;
|
| 2443 | }
|
| 2444 | .cds--max\:col-start-3 {
|
| 2445 | grid-column-start: 3;
|
| 2446 | }
|
| 2447 | .cds--max\:col-start-4 {
|
| 2448 | grid-column-start: 4;
|
| 2449 | }
|
| 2450 | .cds--max\:col-start-5 {
|
| 2451 | grid-column-start: 5;
|
| 2452 | }
|
| 2453 | .cds--max\:col-start-6 {
|
| 2454 | grid-column-start: 6;
|
| 2455 | }
|
| 2456 | .cds--max\:col-start-7 {
|
| 2457 | grid-column-start: 7;
|
| 2458 | }
|
| 2459 | .cds--max\:col-start-8 {
|
| 2460 | grid-column-start: 8;
|
| 2461 | }
|
| 2462 | .cds--max\:col-start-9 {
|
| 2463 | grid-column-start: 9;
|
| 2464 | }
|
| 2465 | .cds--max\:col-start-10 {
|
| 2466 | grid-column-start: 10;
|
| 2467 | }
|
| 2468 | .cds--max\:col-start-11 {
|
| 2469 | grid-column-start: 11;
|
| 2470 | }
|
| 2471 | .cds--max\:col-start-12 {
|
| 2472 | grid-column-start: 12;
|
| 2473 | }
|
| 2474 | .cds--max\:col-start-13 {
|
| 2475 | grid-column-start: 13;
|
| 2476 | }
|
| 2477 | .cds--max\:col-start-14 {
|
| 2478 | grid-column-start: 14;
|
| 2479 | }
|
| 2480 | .cds--max\:col-start-15 {
|
| 2481 | grid-column-start: 15;
|
| 2482 | }
|
| 2483 | .cds--max\:col-start-16 {
|
| 2484 | grid-column-start: 16;
|
| 2485 | }
|
| 2486 | .cds--max\:col-end-2 {
|
| 2487 | grid-column-end: 2;
|
| 2488 | }
|
| 2489 | .cds--max\:col-end-3 {
|
| 2490 | grid-column-end: 3;
|
| 2491 | }
|
| 2492 | .cds--max\:col-end-4 {
|
| 2493 | grid-column-end: 4;
|
| 2494 | }
|
| 2495 | .cds--max\:col-end-5 {
|
| 2496 | grid-column-end: 5;
|
| 2497 | }
|
| 2498 | .cds--max\:col-end-6 {
|
| 2499 | grid-column-end: 6;
|
| 2500 | }
|
| 2501 | .cds--max\:col-end-7 {
|
| 2502 | grid-column-end: 7;
|
| 2503 | }
|
| 2504 | .cds--max\:col-end-8 {
|
| 2505 | grid-column-end: 8;
|
| 2506 | }
|
| 2507 | .cds--max\:col-end-9 {
|
| 2508 | grid-column-end: 9;
|
| 2509 | }
|
| 2510 | .cds--max\:col-end-10 {
|
| 2511 | grid-column-end: 10;
|
| 2512 | }
|
| 2513 | .cds--max\:col-end-11 {
|
| 2514 | grid-column-end: 11;
|
| 2515 | }
|
| 2516 | .cds--max\:col-end-12 {
|
| 2517 | grid-column-end: 12;
|
| 2518 | }
|
| 2519 | .cds--max\:col-end-13 {
|
| 2520 | grid-column-end: 13;
|
| 2521 | }
|
| 2522 | .cds--max\:col-end-14 {
|
| 2523 | grid-column-end: 14;
|
| 2524 | }
|
| 2525 | .cds--max\:col-end-15 {
|
| 2526 | grid-column-end: 15;
|
| 2527 | }
|
| 2528 | .cds--max\:col-end-16 {
|
| 2529 | grid-column-end: 16;
|
| 2530 | }
|
| 2531 | .cds--max\:col-end-17 {
|
| 2532 | grid-column-end: 17;
|
| 2533 | }
|
| 2534 | .cds--max\:col-start-auto {
|
| 2535 | grid-column-start: auto;
|
| 2536 | }
|
| 2537 | .cds--max\:col-end-auto {
|
| 2538 | grid-column-end: auto;
|
| 2539 | }
|
| 2540 | }
|
| 2541 | :root {
|
| 2542 | --cds-layer: var(--cds-layer-01, #f4f4f4);
|
| 2543 | --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
|
| 2544 | --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
|
| 2545 | --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
|
| 2546 | --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
|
| 2547 | --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
|
| 2548 | --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
|
| 2549 | --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
|
| 2550 | --cds-field: var(--cds-field-01, #f4f4f4);
|
| 2551 | --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
|
| 2552 | --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
|
| 2553 | --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
|
| 2554 | --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
|
| 2555 | --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
|
| 2556 | }
|
| 2557 |
|
| 2558 | .cds--layer-one {
|
| 2559 | --cds-layer: var(--cds-layer-01, #f4f4f4);
|
| 2560 | --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
|
| 2561 | --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
|
| 2562 | --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
|
| 2563 | --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
|
| 2564 | --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
|
| 2565 | --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
|
| 2566 | --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
|
| 2567 | --cds-field: var(--cds-field-01, #f4f4f4);
|
| 2568 | --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
|
| 2569 | --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
|
| 2570 | --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
|
| 2571 | --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
|
| 2572 | --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
|
| 2573 | }
|
| 2574 |
|
| 2575 | .cds--layer-two {
|
| 2576 | --cds-layer: var(--cds-layer-02, #ffffff);
|
| 2577 | --cds-layer-active: var(--cds-layer-active-02, #c6c6c6);
|
| 2578 | --cds-layer-hover: var(--cds-layer-hover-02, #e8e8e8);
|
| 2579 | --cds-layer-selected: var(--cds-layer-selected-02, #e0e0e0);
|
| 2580 | --cds-layer-selected-hover: var(--cds-layer-selected-hover-02, #d1d1d1);
|
| 2581 | --cds-layer-accent: var(--cds-layer-accent-02, #e0e0e0);
|
| 2582 | --cds-layer-accent-hover: var(--cds-layer-accent-hover-02, #d1d1d1);
|
| 2583 | --cds-layer-accent-active: var(--cds-layer-accent-active-02, #a8a8a8);
|
| 2584 | --cds-field: var(--cds-field-02, #ffffff);
|
| 2585 | --cds-field-hover: var(--cds-field-hover-02, #e8e8e8);
|
| 2586 | --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
|
| 2587 | --cds-border-subtle-selected: var(--cds-border-subtle-selected-02, #c6c6c6);
|
| 2588 | --cds-border-strong: var(--cds-border-strong-02, #8d8d8d);
|
| 2589 | --cds-border-tile: var(--cds-border-tile-02, #a8a8a8);
|
| 2590 | }
|
| 2591 |
|
| 2592 | .cds--layer-three {
|
| 2593 | --cds-layer: var(--cds-layer-03, #f4f4f4);
|
| 2594 | --cds-layer-active: var(--cds-layer-active-03, #c6c6c6);
|
| 2595 | --cds-layer-hover: var(--cds-layer-hover-03, #e8e8e8);
|
| 2596 | --cds-layer-selected: var(--cds-layer-selected-03, #e0e0e0);
|
| 2597 | --cds-layer-selected-hover: var(--cds-layer-selected-hover-03, #d1d1d1);
|
| 2598 | --cds-layer-accent: var(--cds-layer-accent-03, #e0e0e0);
|
| 2599 | --cds-layer-accent-hover: var(--cds-layer-accent-hover-03, #d1d1d1);
|
| 2600 | --cds-layer-accent-active: var(--cds-layer-accent-active-03, #a8a8a8);
|
| 2601 | --cds-field: var(--cds-field-03, #f4f4f4);
|
| 2602 | --cds-field-hover: var(--cds-field-hover-03, #e8e8e8);
|
| 2603 | --cds-border-subtle: var(--cds-border-subtle-02, #e0e0e0);
|
| 2604 | --cds-border-subtle-selected: var(--cds-border-subtle-selected-03, #c6c6c6);
|
| 2605 | --cds-border-strong: var(--cds-border-strong-03, #8d8d8d);
|
| 2606 | --cds-border-tile: var(--cds-border-tile-03, #c6c6c6);
|
| 2607 | }
|
| 2608 |
|
| 2609 | .cds--layout--size-xs {
|
| 2610 | --cds-layout-size-height-context: var(--cds-layout-size-height-xs, 1.5rem);
|
| 2611 | --cds-layout-size-height: var(--cds-layout-size-height-context);
|
| 2612 | }
|
| 2613 |
|
| 2614 | .cds--layout-constraint--size__default-xs {
|
| 2615 | --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem));
|
| 2616 | }
|
| 2617 |
|
| 2618 | .cds--layout-constraint--size__min-xs {
|
| 2619 | --cds-layout-size-height-min: var(--cds-layout-size-height-xs, 1.5rem);
|
| 2620 | }
|
| 2621 |
|
| 2622 | .cds--layout-constraint--size__max-xs {
|
| 2623 | --cds-layout-size-height-max: var(--cds-layout-size-height-xs, 1.5rem);
|
| 2624 | }
|
| 2625 |
|
| 2626 | .cds--layout--size-sm {
|
| 2627 | --cds-layout-size-height-context: var(--cds-layout-size-height-sm, 2rem);
|
| 2628 | --cds-layout-size-height: var(--cds-layout-size-height-context);
|
| 2629 | }
|
| 2630 |
|
| 2631 | .cds--layout-constraint--size__default-sm {
|
| 2632 | --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem));
|
| 2633 | }
|
| 2634 |
|
| 2635 | .cds--layout-constraint--size__min-sm {
|
| 2636 | --cds-layout-size-height-min: var(--cds-layout-size-height-sm, 2rem);
|
| 2637 | }
|
| 2638 |
|
| 2639 | .cds--layout-constraint--size__max-sm {
|
| 2640 | --cds-layout-size-height-max: var(--cds-layout-size-height-sm, 2rem);
|
| 2641 | }
|
| 2642 |
|
| 2643 | .cds--layout--size-md {
|
| 2644 | --cds-layout-size-height-context: var(--cds-layout-size-height-md, 2.5rem);
|
| 2645 | --cds-layout-size-height: var(--cds-layout-size-height-context);
|
| 2646 | }
|
| 2647 |
|
| 2648 | .cds--layout-constraint--size__default-md {
|
| 2649 | --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem));
|
| 2650 | }
|
| 2651 |
|
| 2652 | .cds--layout-constraint--size__min-md {
|
| 2653 | --cds-layout-size-height-min: var(--cds-layout-size-height-md, 2.5rem);
|
| 2654 | }
|
| 2655 |
|
| 2656 | .cds--layout-constraint--size__max-md {
|
| 2657 | --cds-layout-size-height-max: var(--cds-layout-size-height-md, 2.5rem);
|
| 2658 | }
|
| 2659 |
|
| 2660 | .cds--layout--size-lg {
|
| 2661 | --cds-layout-size-height-context: var(--cds-layout-size-height-lg, 3rem);
|
| 2662 | --cds-layout-size-height: var(--cds-layout-size-height-context);
|
| 2663 | }
|
| 2664 |
|
| 2665 | .cds--layout-constraint--size__default-lg {
|
| 2666 | --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem));
|
| 2667 | }
|
| 2668 |
|
| 2669 | .cds--layout-constraint--size__min-lg {
|
| 2670 | --cds-layout-size-height-min: var(--cds-layout-size-height-lg, 3rem);
|
| 2671 | }
|
| 2672 |
|
| 2673 | .cds--layout-constraint--size__max-lg {
|
| 2674 | --cds-layout-size-height-max: var(--cds-layout-size-height-lg, 3rem);
|
| 2675 | }
|
| 2676 |
|
| 2677 | .cds--layout--size-xl {
|
| 2678 | --cds-layout-size-height-context: var(--cds-layout-size-height-xl, 4rem);
|
| 2679 | --cds-layout-size-height: var(--cds-layout-size-height-context);
|
| 2680 | }
|
| 2681 |
|
| 2682 | .cds--layout-constraint--size__default-xl {
|
| 2683 | --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem));
|
| 2684 | }
|
| 2685 |
|
| 2686 | .cds--layout-constraint--size__min-xl {
|
| 2687 | --cds-layout-size-height-min: var(--cds-layout-size-height-xl, 4rem);
|
| 2688 | }
|
| 2689 |
|
| 2690 | .cds--layout-constraint--size__max-xl {
|
| 2691 | --cds-layout-size-height-max: var(--cds-layout-size-height-xl, 4rem);
|
| 2692 | }
|
| 2693 |
|
| 2694 | .cds--layout--size-2xl {
|
| 2695 | --cds-layout-size-height-context: var(--cds-layout-size-height-2xl, 5rem);
|
| 2696 | --cds-layout-size-height: var(--cds-layout-size-height-context);
|
| 2697 | }
|
| 2698 |
|
| 2699 | .cds--layout-constraint--size__default-2xl {
|
| 2700 | --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem));
|
| 2701 | }
|
| 2702 |
|
| 2703 | .cds--layout-constraint--size__min-2xl {
|
| 2704 | --cds-layout-size-height-min: var(--cds-layout-size-height-2xl, 5rem);
|
| 2705 | }
|
| 2706 |
|
| 2707 | .cds--layout-constraint--size__max-2xl {
|
| 2708 | --cds-layout-size-height-max: var(--cds-layout-size-height-2xl, 5rem);
|
| 2709 | }
|
| 2710 |
|
| 2711 | .cds--layout--density-condensed {
|
| 2712 | --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
|
| 2713 | --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
|
| 2714 | }
|
| 2715 |
|
| 2716 | .cds--layout-constraint--density__default-condensed {
|
| 2717 | --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem));
|
| 2718 | }
|
| 2719 |
|
| 2720 | .cds--layout-constraint--density__min-condensed {
|
| 2721 | --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
|
| 2722 | }
|
| 2723 |
|
| 2724 | .cds--layout-constraint--density__max-condensed {
|
| 2725 | --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
|
| 2726 | }
|
| 2727 |
|
| 2728 | .cds--layout--density-normal {
|
| 2729 | --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-normal, 1rem);
|
| 2730 | --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
|
| 2731 | }
|
| 2732 |
|
| 2733 | .cds--layout-constraint--density__default-normal {
|
| 2734 | --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem));
|
| 2735 | }
|
| 2736 |
|
| 2737 | .cds--layout-constraint--density__min-normal {
|
| 2738 | --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-normal, 1rem);
|
| 2739 | }
|
| 2740 |
|
| 2741 | .cds--layout-constraint--density__max-normal {
|
| 2742 | --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-normal, 1rem);
|
| 2743 | }
|
| 2744 |
|
| 2745 | :root {
|
| 2746 | --cds-layout-size-height-xs: 1.5rem;
|
| 2747 | --cds-layout-size-height-sm: 2rem;
|
| 2748 | --cds-layout-size-height-md: 2.5rem;
|
| 2749 | --cds-layout-size-height-lg: 3rem;
|
| 2750 | --cds-layout-size-height-xl: 4rem;
|
| 2751 | --cds-layout-size-height-2xl: 5rem;
|
| 2752 | --cds-layout-size-height-min: 0px;
|
| 2753 | --cds-layout-size-height-max: 999999999px;
|
| 2754 | --cds-layout-density-padding-inline-condensed: 0.5rem;
|
| 2755 | --cds-layout-density-padding-inline-normal: 1rem;
|
| 2756 | --cds-layout-density-padding-inline-min: 0px;
|
| 2757 | --cds-layout-density-padding-inline-max: 999999999px;
|
| 2758 | }
|
| 2759 |
|
| 2760 | .cds--white {
|
| 2761 | background-color: var(--cds-background);
|
| 2762 | color: var(--cds-text-primary);
|
| 2763 | --cds-ai-aura-end: rgba(255, 255, 255, 0);
|
| 2764 | --cds-ai-aura-hover-background: #edf5ff;
|
| 2765 | --cds-ai-aura-hover-end: rgba(255, 255, 255, 0);
|
| 2766 | --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.32);
|
| 2767 | --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
|
| 2768 | --cds-ai-aura-start-sm: rgba(69, 137, 255, 0.16);
|
| 2769 | --cds-ai-border-end: #78a9ff;
|
| 2770 | --cds-ai-border-start: rgba(166, 200, 255, 0.64);
|
| 2771 | --cds-ai-border-strong: #4589ff;
|
| 2772 | --cds-ai-drop-shadow: rgba(15, 98, 254, 0.1);
|
| 2773 | --cds-ai-inner-shadow: rgba(69, 137, 255, 0.1);
|
| 2774 | --cds-ai-overlay: rgba(0, 17, 65, 0.5);
|
| 2775 | --cds-ai-popover-background: #ffffff;
|
| 2776 | --cds-ai-popover-caret-bottom: #78a9ff;
|
| 2777 | --cds-ai-popover-caret-bottom-background: #eaf1ff;
|
| 2778 | --cds-ai-popover-caret-bottom-background-actions: #e9effa;
|
| 2779 | --cds-ai-popover-caret-center: #a0c3ff;
|
| 2780 | --cds-ai-popover-shadow-outer-01: rgba(0, 67, 206, 0.06);
|
| 2781 | --cds-ai-popover-shadow-outer-02: rgba(0, 0, 0, 0.04);
|
| 2782 | --cds-ai-skeleton-background: #d0e2ff;
|
| 2783 | --cds-ai-skeleton-element-background: #4589ff;
|
| 2784 | --cds-background: #ffffff;
|
| 2785 | --cds-background-active: rgba(141, 141, 141, 0.5);
|
| 2786 | --cds-background-brand: #0f62fe;
|
| 2787 | --cds-background-hover: rgba(141, 141, 141, 0.12);
|
| 2788 | --cds-background-inverse: #393939;
|
| 2789 | --cds-background-inverse-hover: #474747;
|
| 2790 | --cds-background-selected: rgba(141, 141, 141, 0.2);
|
| 2791 | --cds-background-selected-hover: rgba(141, 141, 141, 0.32);
|
| 2792 | --cds-border-disabled: #c6c6c6;
|
| 2793 | --cds-border-interactive: #0f62fe;
|
| 2794 | --cds-border-inverse: #161616;
|
| 2795 | --cds-border-strong-01: #8d8d8d;
|
| 2796 | --cds-border-strong-02: #8d8d8d;
|
| 2797 | --cds-border-strong-03: #8d8d8d;
|
| 2798 | --cds-border-subtle-00: #e0e0e0;
|
| 2799 | --cds-border-subtle-01: #c6c6c6;
|
| 2800 | --cds-border-subtle-02: #e0e0e0;
|
| 2801 | --cds-border-subtle-03: #c6c6c6;
|
| 2802 | --cds-border-subtle-selected-01: #c6c6c6;
|
| 2803 | --cds-border-subtle-selected-02: #c6c6c6;
|
| 2804 | --cds-border-subtle-selected-03: #c6c6c6;
|
| 2805 | --cds-border-tile-01: #c6c6c6;
|
| 2806 | --cds-border-tile-02: #a8a8a8;
|
| 2807 | --cds-border-tile-03: #c6c6c6;
|
| 2808 | --cds-chat-avatar-agent: #393939;
|
| 2809 | --cds-chat-avatar-bot: #6f6f6f;
|
| 2810 | --cds-chat-avatar-user: #0f62fe;
|
| 2811 | --cds-chat-bubble-agent: #ffffff;
|
| 2812 | --cds-chat-bubble-border: #e0e0e0;
|
| 2813 | --cds-chat-bubble-user: #e0e0e0;
|
| 2814 | --cds-chat-button: #0f62fe;
|
| 2815 | --cds-chat-button-active: rgba(141, 141, 141, 0.5);
|
| 2816 | --cds-chat-button-hover: rgba(141, 141, 141, 0.12);
|
| 2817 | --cds-chat-button-selected: rgba(141, 141, 141, 0.2);
|
| 2818 | --cds-chat-button-text-hover: #0043ce;
|
| 2819 | --cds-chat-button-text-selected: #525252;
|
| 2820 | --cds-chat-header-background: #ffffff;
|
| 2821 | --cds-chat-prompt-background: #ffffff;
|
| 2822 | --cds-chat-prompt-border-end: rgba(244, 244, 244, 0);
|
| 2823 | --cds-chat-prompt-border-start: #f4f4f4;
|
| 2824 | --cds-chat-shell-background: #ffffff;
|
| 2825 | --cds-field-01: #f4f4f4;
|
| 2826 | --cds-field-02: #ffffff;
|
| 2827 | --cds-field-03: #f4f4f4;
|
| 2828 | --cds-field-hover-01: #e8e8e8;
|
| 2829 | --cds-field-hover-02: #e8e8e8;
|
| 2830 | --cds-field-hover-03: #e8e8e8;
|
| 2831 | --cds-focus: #0f62fe;
|
| 2832 | --cds-focus-inset: #ffffff;
|
| 2833 | --cds-focus-inverse: #ffffff;
|
| 2834 | --cds-highlight: #d0e2ff;
|
| 2835 | --cds-icon-disabled: rgba(22, 22, 22, 0.25);
|
| 2836 | --cds-icon-interactive: #0f62fe;
|
| 2837 | --cds-icon-inverse: #ffffff;
|
| 2838 | --cds-icon-on-color: #ffffff;
|
| 2839 | --cds-icon-on-color-disabled: #8d8d8d;
|
| 2840 | --cds-icon-primary: #161616;
|
| 2841 | --cds-icon-secondary: #525252;
|
| 2842 | --cds-interactive: #0f62fe;
|
| 2843 | --cds-layer-01: #f4f4f4;
|
| 2844 | --cds-layer-02: #ffffff;
|
| 2845 | --cds-layer-03: #f4f4f4;
|
| 2846 | --cds-layer-accent-01: #e0e0e0;
|
| 2847 | --cds-layer-accent-02: #e0e0e0;
|
| 2848 | --cds-layer-accent-03: #e0e0e0;
|
| 2849 | --cds-layer-accent-active-01: #a8a8a8;
|
| 2850 | --cds-layer-accent-active-02: #a8a8a8;
|
| 2851 | --cds-layer-accent-active-03: #a8a8a8;
|
| 2852 | --cds-layer-accent-hover-01: #d1d1d1;
|
| 2853 | --cds-layer-accent-hover-02: #d1d1d1;
|
| 2854 | --cds-layer-accent-hover-03: #d1d1d1;
|
| 2855 | --cds-layer-active-01: #c6c6c6;
|
| 2856 | --cds-layer-active-02: #c6c6c6;
|
| 2857 | --cds-layer-active-03: #c6c6c6;
|
| 2858 | --cds-layer-hover-01: #e8e8e8;
|
| 2859 | --cds-layer-hover-02: #e8e8e8;
|
| 2860 | --cds-layer-hover-03: #e8e8e8;
|
| 2861 | --cds-layer-selected-01: #e0e0e0;
|
| 2862 | --cds-layer-selected-02: #e0e0e0;
|
| 2863 | --cds-layer-selected-03: #e0e0e0;
|
| 2864 | --cds-layer-selected-disabled: #8d8d8d;
|
| 2865 | --cds-layer-selected-hover-01: #d1d1d1;
|
| 2866 | --cds-layer-selected-hover-02: #d1d1d1;
|
| 2867 | --cds-layer-selected-hover-03: #d1d1d1;
|
| 2868 | --cds-layer-selected-inverse: #161616;
|
| 2869 | --cds-link-inverse: #78a9ff;
|
| 2870 | --cds-link-inverse-active: #f4f4f4;
|
| 2871 | --cds-link-inverse-hover: #a6c8ff;
|
| 2872 | --cds-link-inverse-visited: #be95ff;
|
| 2873 | --cds-link-primary: #0f62fe;
|
| 2874 | --cds-link-primary-hover: #0043ce;
|
| 2875 | --cds-link-secondary: #0043ce;
|
| 2876 | --cds-link-visited: #8a3ffc;
|
| 2877 | --cds-overlay: rgba(22, 22, 22, 0.5);
|
| 2878 | --cds-shadow: rgba(0, 0, 0, 0.3);
|
| 2879 | --cds-skeleton-background: #e8e8e8;
|
| 2880 | --cds-skeleton-element: #c6c6c6;
|
| 2881 | --cds-support-caution-major: #ff832b;
|
| 2882 | --cds-support-caution-minor: #f1c21b;
|
| 2883 | --cds-support-caution-undefined: #8a3ffc;
|
| 2884 | --cds-support-error: #da1e28;
|
| 2885 | --cds-support-error-inverse: #fa4d56;
|
| 2886 | --cds-support-info: #0043ce;
|
| 2887 | --cds-support-info-inverse: #4589ff;
|
| 2888 | --cds-support-success: #24a148;
|
| 2889 | --cds-support-success-inverse: #42be65;
|
| 2890 | --cds-support-warning: #f1c21b;
|
| 2891 | --cds-support-warning-inverse: #f1c21b;
|
| 2892 | --cds-text-disabled: rgba(22, 22, 22, 0.25);
|
| 2893 | --cds-text-error: #da1e28;
|
| 2894 | --cds-text-helper: #6f6f6f;
|
| 2895 | --cds-text-inverse: #ffffff;
|
| 2896 | --cds-text-on-color: #ffffff;
|
| 2897 | --cds-text-on-color-disabled: #8d8d8d;
|
| 2898 | --cds-text-placeholder: rgba(22, 22, 22, 0.4);
|
| 2899 | --cds-text-primary: #161616;
|
| 2900 | --cds-text-secondary: #525252;
|
| 2901 | --cds-toggle-off: #8d8d8d;
|
| 2902 | --cds-layer: var(--cds-layer-01, #f4f4f4);
|
| 2903 | --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
|
| 2904 | --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
|
| 2905 | --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
|
| 2906 | --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
|
| 2907 | --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
|
| 2908 | --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
|
| 2909 | --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
|
| 2910 | --cds-field: var(--cds-field-01, #f4f4f4);
|
| 2911 | --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
|
| 2912 | --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
|
| 2913 | --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
|
| 2914 | --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
|
| 2915 | --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
|
| 2916 | --cds-button-separator: #e0e0e0;
|
| 2917 | --cds-button-primary: #0f62fe;
|
| 2918 | --cds-button-secondary: #393939;
|
| 2919 | --cds-button-tertiary: #0f62fe;
|
| 2920 | --cds-button-danger-primary: #da1e28;
|
| 2921 | --cds-button-danger-secondary: #da1e28;
|
| 2922 | --cds-button-danger-active: #750e13;
|
| 2923 | --cds-button-primary-active: #002d9c;
|
| 2924 | --cds-button-secondary-active: #6f6f6f;
|
| 2925 | --cds-button-tertiary-active: #002d9c;
|
| 2926 | --cds-button-danger-hover: #b81921;
|
| 2927 | --cds-button-primary-hover: #0050e6;
|
| 2928 | --cds-button-secondary-hover: #474747;
|
| 2929 | --cds-button-tertiary-hover: #0050e6;
|
| 2930 | --cds-button-disabled: #c6c6c6;
|
| 2931 | --cds-notification-background-error: #fff1f1;
|
| 2932 | --cds-notification-background-success: #defbe6;
|
| 2933 | --cds-notification-background-info: #edf5ff;
|
| 2934 | --cds-notification-background-warning: #fdf6dd;
|
| 2935 | --cds-notification-action-hover: #ffffff;
|
| 2936 | --cds-notification-action-tertiary-inverse: #ffffff;
|
| 2937 | --cds-notification-action-tertiary-inverse-active: #c6c6c6;
|
| 2938 | --cds-notification-action-tertiary-inverse-hover: #f4f4f4;
|
| 2939 | --cds-notification-action-tertiary-inverse-text: #161616;
|
| 2940 | --cds-notification-action-tertiary-inverse-text-on-color-disabled: rgba(255, 255, 255, 0.25);
|
| 2941 | --cds-tag-background-red: #ffd7d9;
|
| 2942 | --cds-tag-color-red: #750e13;
|
| 2943 | --cds-tag-hover-red: #ffc2c5;
|
| 2944 | --cds-tag-background-magenta: #ffd6e8;
|
| 2945 | --cds-tag-color-magenta: #740937;
|
| 2946 | --cds-tag-hover-magenta: #ffbdda;
|
| 2947 | --cds-tag-background-purple: #e8daff;
|
| 2948 | --cds-tag-color-purple: #491d8b;
|
| 2949 | --cds-tag-hover-purple: #dcc7ff;
|
| 2950 | --cds-tag-background-blue: #d0e2ff;
|
| 2951 | --cds-tag-color-blue: #002d9c;
|
| 2952 | --cds-tag-hover-blue: #b8d3ff;
|
| 2953 | --cds-tag-background-cyan: #bae6ff;
|
| 2954 | --cds-tag-color-cyan: #003a6d;
|
| 2955 | --cds-tag-hover-cyan: #99daff;
|
| 2956 | --cds-tag-background-teal: #9ef0f0;
|
| 2957 | --cds-tag-color-teal: #004144;
|
| 2958 | --cds-tag-hover-teal: #57e5e5;
|
| 2959 | --cds-tag-background-green: #a7f0ba;
|
| 2960 | --cds-tag-color-green: #044317;
|
| 2961 | --cds-tag-hover-green: #74e792;
|
| 2962 | --cds-tag-background-gray: #e0e0e0;
|
| 2963 | --cds-tag-color-gray: #161616;
|
| 2964 | --cds-tag-hover-gray: #d1d1d1;
|
| 2965 | --cds-tag-border-red: #ff8389;
|
| 2966 | --cds-tag-border-blue: #78a9ff;
|
| 2967 | --cds-tag-border-cyan: #33b1ff;
|
| 2968 | --cds-tag-border-teal: #08bdba;
|
| 2969 | --cds-tag-border-green: #42be65;
|
| 2970 | --cds-tag-border-magenta: #ff7eb6;
|
| 2971 | --cds-tag-border-purple: #be95ff;
|
| 2972 | --cds-tag-border-gray: #a8a8a8;
|
| 2973 | --cds-tag-border-cool-gray: #a2a9b0;
|
| 2974 | --cds-tag-border-warm-gray: #ada8a8;
|
| 2975 | --cds-tag-background-cool-gray: #dde1e6;
|
| 2976 | --cds-tag-color-cool-gray: #121619;
|
| 2977 | --cds-tag-hover-cool-gray: #cdd3da;
|
| 2978 | --cds-tag-background-warm-gray: #e5e0df;
|
| 2979 | --cds-tag-color-warm-gray: #171414;
|
| 2980 | --cds-tag-hover-warm-gray: #d8d0cf;
|
| 2981 | }
|
| 2982 |
|
| 2983 | .cds--g10 {
|
| 2984 | background-color: var(--cds-background);
|
| 2985 | color: var(--cds-text-primary);
|
| 2986 | --cds-ai-aura-end: rgba(255, 255, 255, 0);
|
| 2987 | --cds-ai-aura-hover-background: #edf5ff;
|
| 2988 | --cds-ai-aura-hover-end: rgba(255, 255, 255, 0);
|
| 2989 | --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.32);
|
| 2990 | --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
|
| 2991 | --cds-ai-aura-start-sm: rgba(69, 137, 255, 0.16);
|
| 2992 | --cds-ai-border-end: #78a9ff;
|
| 2993 | --cds-ai-border-start: rgba(166, 200, 255, 0.64);
|
| 2994 | --cds-ai-border-strong: #4589ff;
|
| 2995 | --cds-ai-drop-shadow: rgba(15, 98, 254, 0.1);
|
| 2996 | --cds-ai-inner-shadow: rgba(69, 137, 255, 0.1);
|
| 2997 | --cds-ai-overlay: rgba(0, 17, 65, 0.5);
|
| 2998 | --cds-ai-popover-background: #ffffff;
|
| 2999 | --cds-ai-popover-caret-bottom: #78a9ff;
|
| 3000 | --cds-ai-popover-caret-bottom-background: #eaf1ff;
|
| 3001 | --cds-ai-popover-caret-bottom-background-actions: #e9effa;
|
| 3002 | --cds-ai-popover-caret-center: #a0c3ff;
|
| 3003 | --cds-ai-popover-shadow-outer-01: rgba(0, 67, 206, 0.06);
|
| 3004 | --cds-ai-popover-shadow-outer-02: rgba(0, 0, 0, 0.04);
|
| 3005 | --cds-ai-skeleton-background: #d0e2ff;
|
| 3006 | --cds-ai-skeleton-element-background: #4589ff;
|
| 3007 | --cds-background: #f4f4f4;
|
| 3008 | --cds-background-active: rgba(141, 141, 141, 0.5);
|
| 3009 | --cds-background-brand: #0f62fe;
|
| 3010 | --cds-background-hover: rgba(141, 141, 141, 0.12);
|
| 3011 | --cds-background-inverse: #393939;
|
| 3012 | --cds-background-inverse-hover: #474747;
|
| 3013 | --cds-background-selected: rgba(141, 141, 141, 0.2);
|
| 3014 | --cds-background-selected-hover: rgba(141, 141, 141, 0.32);
|
| 3015 | --cds-border-disabled: #c6c6c6;
|
| 3016 | --cds-border-interactive: #0f62fe;
|
| 3017 | --cds-border-inverse: #161616;
|
| 3018 | --cds-border-strong-01: #8d8d8d;
|
| 3019 | --cds-border-strong-02: #8d8d8d;
|
| 3020 | --cds-border-strong-03: #8d8d8d;
|
| 3021 | --cds-border-subtle-00: #c6c6c6;
|
| 3022 | --cds-border-subtle-01: #e0e0e0;
|
| 3023 | --cds-border-subtle-02: #c6c6c6;
|
| 3024 | --cds-border-subtle-03: #e0e0e0;
|
| 3025 | --cds-border-subtle-selected-01: #c6c6c6;
|
| 3026 | --cds-border-subtle-selected-02: #c6c6c6;
|
| 3027 | --cds-border-subtle-selected-03: #c6c6c6;
|
| 3028 | --cds-border-tile-01: #a8a8a8;
|
| 3029 | --cds-border-tile-02: #c6c6c6;
|
| 3030 | --cds-border-tile-03: #a8a8a8;
|
| 3031 | --cds-chat-avatar-agent: #393939;
|
| 3032 | --cds-chat-avatar-bot: #6f6f6f;
|
| 3033 | --cds-chat-avatar-user: #0f62fe;
|
| 3034 | --cds-chat-bubble-agent: #ffffff;
|
| 3035 | --cds-chat-bubble-border: #e0e0e0;
|
| 3036 | --cds-chat-bubble-user: #e0e0e0;
|
| 3037 | --cds-chat-button: #0f62fe;
|
| 3038 | --cds-chat-button-active: rgba(141, 141, 141, 0.5);
|
| 3039 | --cds-chat-button-hover: rgba(141, 141, 141, 0.12);
|
| 3040 | --cds-chat-button-selected: rgba(141, 141, 141, 0.2);
|
| 3041 | --cds-chat-button-text-hover: #0043ce;
|
| 3042 | --cds-chat-button-text-selected: #525252;
|
| 3043 | --cds-chat-header-background: #ffffff;
|
| 3044 | --cds-chat-prompt-background: #ffffff;
|
| 3045 | --cds-chat-prompt-border-end: rgba(244, 244, 244, 0);
|
| 3046 | --cds-chat-prompt-border-start: #f4f4f4;
|
| 3047 | --cds-chat-shell-background: #ffffff;
|
| 3048 | --cds-field-01: #ffffff;
|
| 3049 | --cds-field-02: #f4f4f4;
|
| 3050 | --cds-field-03: #ffffff;
|
| 3051 | --cds-field-hover-01: #e8e8e8;
|
| 3052 | --cds-field-hover-02: #e8e8e8;
|
| 3053 | --cds-field-hover-03: #e8e8e8;
|
| 3054 | --cds-focus: #0f62fe;
|
| 3055 | --cds-focus-inset: #ffffff;
|
| 3056 | --cds-focus-inverse: #ffffff;
|
| 3057 | --cds-highlight: #d0e2ff;
|
| 3058 | --cds-icon-disabled: rgba(22, 22, 22, 0.25);
|
| 3059 | --cds-icon-interactive: #0f62fe;
|
| 3060 | --cds-icon-inverse: #ffffff;
|
| 3061 | --cds-icon-on-color: #ffffff;
|
| 3062 | --cds-icon-on-color-disabled: #8d8d8d;
|
| 3063 | --cds-icon-primary: #161616;
|
| 3064 | --cds-icon-secondary: #525252;
|
| 3065 | --cds-interactive: #0f62fe;
|
| 3066 | --cds-layer-01: #ffffff;
|
| 3067 | --cds-layer-02: #f4f4f4;
|
| 3068 | --cds-layer-03: #ffffff;
|
| 3069 | --cds-layer-accent-01: #e0e0e0;
|
| 3070 | --cds-layer-accent-02: #e0e0e0;
|
| 3071 | --cds-layer-accent-03: #e0e0e0;
|
| 3072 | --cds-layer-accent-active-01: #a8a8a8;
|
| 3073 | --cds-layer-accent-active-02: #a8a8a8;
|
| 3074 | --cds-layer-accent-active-03: #a8a8a8;
|
| 3075 | --cds-layer-accent-hover-01: #d1d1d1;
|
| 3076 | --cds-layer-accent-hover-02: #d1d1d1;
|
| 3077 | --cds-layer-accent-hover-03: #d1d1d1;
|
| 3078 | --cds-layer-active-01: #c6c6c6;
|
| 3079 | --cds-layer-active-02: #c6c6c6;
|
| 3080 | --cds-layer-active-03: #c6c6c6;
|
| 3081 | --cds-layer-hover-01: #e8e8e8;
|
| 3082 | --cds-layer-hover-02: #e8e8e8;
|
| 3083 | --cds-layer-hover-03: #e8e8e8;
|
| 3084 | --cds-layer-selected-01: #e0e0e0;
|
| 3085 | --cds-layer-selected-02: #e0e0e0;
|
| 3086 | --cds-layer-selected-03: #e0e0e0;
|
| 3087 | --cds-layer-selected-disabled: #8d8d8d;
|
| 3088 | --cds-layer-selected-hover-01: #d1d1d1;
|
| 3089 | --cds-layer-selected-hover-02: #d1d1d1;
|
| 3090 | --cds-layer-selected-hover-03: #d1d1d1;
|
| 3091 | --cds-layer-selected-inverse: #161616;
|
| 3092 | --cds-link-inverse: #78a9ff;
|
| 3093 | --cds-link-inverse-active: #f4f4f4;
|
| 3094 | --cds-link-inverse-hover: #a6c8ff;
|
| 3095 | --cds-link-inverse-visited: #be95ff;
|
| 3096 | --cds-link-primary: #0f62fe;
|
| 3097 | --cds-link-primary-hover: #0043ce;
|
| 3098 | --cds-link-secondary: #0043ce;
|
| 3099 | --cds-link-visited: #8a3ffc;
|
| 3100 | --cds-overlay: rgba(22, 22, 22, 0.5);
|
| 3101 | --cds-shadow: rgba(0, 0, 0, 0.3);
|
| 3102 | --cds-skeleton-background: #e8e8e8;
|
| 3103 | --cds-skeleton-element: #c6c6c6;
|
| 3104 | --cds-support-caution-major: #ff832b;
|
| 3105 | --cds-support-caution-minor: #f1c21b;
|
| 3106 | --cds-support-caution-undefined: #8a3ffc;
|
| 3107 | --cds-support-error: #da1e28;
|
| 3108 | --cds-support-error-inverse: #fa4d56;
|
| 3109 | --cds-support-info: #0043ce;
|
| 3110 | --cds-support-info-inverse: #4589ff;
|
| 3111 | --cds-support-success: #24a148;
|
| 3112 | --cds-support-success-inverse: #42be65;
|
| 3113 | --cds-support-warning: #f1c21b;
|
| 3114 | --cds-support-warning-inverse: #f1c21b;
|
| 3115 | --cds-text-disabled: rgba(22, 22, 22, 0.25);
|
| 3116 | --cds-text-error: #da1e28;
|
| 3117 | --cds-text-helper: #6f6f6f;
|
| 3118 | --cds-text-inverse: #ffffff;
|
| 3119 | --cds-text-on-color: #ffffff;
|
| 3120 | --cds-text-on-color-disabled: #8d8d8d;
|
| 3121 | --cds-text-placeholder: rgba(22, 22, 22, 0.4);
|
| 3122 | --cds-text-primary: #161616;
|
| 3123 | --cds-text-secondary: #525252;
|
| 3124 | --cds-toggle-off: #8d8d8d;
|
| 3125 | --cds-layer: var(--cds-layer-01, #f4f4f4);
|
| 3126 | --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
|
| 3127 | --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
|
| 3128 | --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
|
| 3129 | --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
|
| 3130 | --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
|
| 3131 | --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
|
| 3132 | --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
|
| 3133 | --cds-field: var(--cds-field-01, #f4f4f4);
|
| 3134 | --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
|
| 3135 | --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
|
| 3136 | --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
|
| 3137 | --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
|
| 3138 | --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
|
| 3139 | --cds-button-separator: #e0e0e0;
|
| 3140 | --cds-button-primary: #0f62fe;
|
| 3141 | --cds-button-secondary: #393939;
|
| 3142 | --cds-button-tertiary: #0f62fe;
|
| 3143 | --cds-button-danger-primary: #da1e28;
|
| 3144 | --cds-button-danger-secondary: #da1e28;
|
| 3145 | --cds-button-danger-active: #750e13;
|
| 3146 | --cds-button-primary-active: #002d9c;
|
| 3147 | --cds-button-secondary-active: #6f6f6f;
|
| 3148 | --cds-button-tertiary-active: #002d9c;
|
| 3149 | --cds-button-danger-hover: #b81921;
|
| 3150 | --cds-button-primary-hover: #0050e6;
|
| 3151 | --cds-button-secondary-hover: #474747;
|
| 3152 | --cds-button-tertiary-hover: #0050e6;
|
| 3153 | --cds-button-disabled: #c6c6c6;
|
| 3154 | --cds-notification-background-error: #fff1f1;
|
| 3155 | --cds-notification-background-success: #defbe6;
|
| 3156 | --cds-notification-background-info: #edf5ff;
|
| 3157 | --cds-notification-background-warning: #fdf6dd;
|
| 3158 | --cds-notification-action-hover: #ffffff;
|
| 3159 | --cds-notification-action-tertiary-inverse: #ffffff;
|
| 3160 | --cds-notification-action-tertiary-inverse-active: #c6c6c6;
|
| 3161 | --cds-notification-action-tertiary-inverse-hover: #f4f4f4;
|
| 3162 | --cds-notification-action-tertiary-inverse-text: #161616;
|
| 3163 | --cds-notification-action-tertiary-inverse-text-on-color-disabled: rgba(255, 255, 255, 0.25);
|
| 3164 | --cds-tag-background-red: #ffd7d9;
|
| 3165 | --cds-tag-color-red: #750e13;
|
| 3166 | --cds-tag-hover-red: #ffc2c5;
|
| 3167 | --cds-tag-background-magenta: #ffd6e8;
|
| 3168 | --cds-tag-color-magenta: #740937;
|
| 3169 | --cds-tag-hover-magenta: #ffbdda;
|
| 3170 | --cds-tag-background-purple: #e8daff;
|
| 3171 | --cds-tag-color-purple: #491d8b;
|
| 3172 | --cds-tag-hover-purple: #dcc7ff;
|
| 3173 | --cds-tag-background-blue: #d0e2ff;
|
| 3174 | --cds-tag-color-blue: #002d9c;
|
| 3175 | --cds-tag-hover-blue: #b8d3ff;
|
| 3176 | --cds-tag-background-cyan: #bae6ff;
|
| 3177 | --cds-tag-color-cyan: #003a6d;
|
| 3178 | --cds-tag-hover-cyan: #99daff;
|
| 3179 | --cds-tag-background-teal: #9ef0f0;
|
| 3180 | --cds-tag-color-teal: #004144;
|
| 3181 | --cds-tag-hover-teal: #57e5e5;
|
| 3182 | --cds-tag-background-green: #a7f0ba;
|
| 3183 | --cds-tag-color-green: #044317;
|
| 3184 | --cds-tag-hover-green: #74e792;
|
| 3185 | --cds-tag-background-gray: #e0e0e0;
|
| 3186 | --cds-tag-color-gray: #161616;
|
| 3187 | --cds-tag-hover-gray: #d1d1d1;
|
| 3188 | --cds-tag-border-red: #ff8389;
|
| 3189 | --cds-tag-border-blue: #78a9ff;
|
| 3190 | --cds-tag-border-cyan: #33b1ff;
|
| 3191 | --cds-tag-border-teal: #08bdba;
|
| 3192 | --cds-tag-border-green: #42be65;
|
| 3193 | --cds-tag-border-magenta: #ff7eb6;
|
| 3194 | --cds-tag-border-purple: #be95ff;
|
| 3195 | --cds-tag-border-gray: #a8a8a8;
|
| 3196 | --cds-tag-border-cool-gray: #a2a9b0;
|
| 3197 | --cds-tag-border-warm-gray: #ada8a8;
|
| 3198 | --cds-tag-background-cool-gray: #dde1e6;
|
| 3199 | --cds-tag-color-cool-gray: #121619;
|
| 3200 | --cds-tag-hover-cool-gray: #cdd3da;
|
| 3201 | --cds-tag-background-warm-gray: #e5e0df;
|
| 3202 | --cds-tag-color-warm-gray: #171414;
|
| 3203 | --cds-tag-hover-warm-gray: #d8d0cf;
|
| 3204 | }
|
| 3205 |
|
| 3206 | .cds--g90 {
|
| 3207 | background-color: var(--cds-background);
|
| 3208 | color: var(--cds-text-primary);
|
| 3209 | --cds-ai-aura-end: rgba(0, 0, 0, 0);
|
| 3210 | --cds-ai-aura-hover-background: #474747;
|
| 3211 | --cds-ai-aura-hover-end: rgba(0, 0, 0, 0);
|
| 3212 | --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
|
| 3213 | --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
|
| 3214 | --cds-ai-aura-start-sm: rgba(69, 137, 255, 0.16);
|
| 3215 | --cds-ai-border-end: #4589ff;
|
| 3216 | --cds-ai-border-start: rgba(166, 200, 255, 0.36);
|
| 3217 | --cds-ai-border-strong: #78a9ff;
|
| 3218 | --cds-ai-drop-shadow: rgba(0, 0, 0, 0.28);
|
| 3219 | --cds-ai-inner-shadow: rgba(69, 137, 255, 0.16);
|
| 3220 | --cds-ai-overlay: rgba(0, 0, 0, 0.5);
|
| 3221 | --cds-ai-popover-background: #161616;
|
| 3222 | --cds-ai-popover-caret-bottom: #4589ff;
|
| 3223 | --cds-ai-popover-caret-bottom-background: #202d45;
|
| 3224 | --cds-ai-popover-caret-bottom-background-actions: #1e283a;
|
| 3225 | --cds-ai-popover-caret-center: #4870b5;
|
| 3226 | --cds-ai-popover-shadow-outer-01: rgba(0, 0, 0, 0.12);
|
| 3227 | --cds-ai-popover-shadow-outer-02: rgba(0, 0, 0, 0.08);
|
| 3228 | --cds-ai-skeleton-background: rgba(120, 169, 255, 0.5);
|
| 3229 | --cds-ai-skeleton-element-background: rgba(120, 169, 255, 0.3);
|
| 3230 | --cds-background: #262626;
|
| 3231 | --cds-background-active: rgba(141, 141, 141, 0.4);
|
| 3232 | --cds-background-brand: #0f62fe;
|
| 3233 | --cds-background-hover: rgba(141, 141, 141, 0.16);
|
| 3234 | --cds-background-inverse: #f4f4f4;
|
| 3235 | --cds-background-inverse-hover: #e8e8e8;
|
| 3236 | --cds-background-selected: rgba(141, 141, 141, 0.24);
|
| 3237 | --cds-background-selected-hover: rgba(141, 141, 141, 0.32);
|
| 3238 | --cds-border-disabled: rgba(141, 141, 141, 0.5);
|
| 3239 | --cds-border-interactive: #4589ff;
|
| 3240 | --cds-border-inverse: #f4f4f4;
|
| 3241 | --cds-border-strong-01: #8d8d8d;
|
| 3242 | --cds-border-strong-02: #a8a8a8;
|
| 3243 | --cds-border-strong-03: #c6c6c6;
|
| 3244 | --cds-border-subtle-00: #525252;
|
| 3245 | --cds-border-subtle-01: #6f6f6f;
|
| 3246 | --cds-border-subtle-02: #8d8d8d;
|
| 3247 | --cds-border-subtle-03: #8d8d8d;
|
| 3248 | --cds-border-subtle-selected-01: #8d8d8d;
|
| 3249 | --cds-border-subtle-selected-02: #a8a8a8;
|
| 3250 | --cds-border-subtle-selected-03: #a8a8a8;
|
| 3251 | --cds-border-tile-01: #6f6f6f;
|
| 3252 | --cds-border-tile-02: #8d8d8d;
|
| 3253 | --cds-border-tile-03: #a8a8a8;
|
| 3254 | --cds-chat-avatar-agent: #c6c6c6;
|
| 3255 | --cds-chat-avatar-bot: #8d8d8d;
|
| 3256 | --cds-chat-avatar-user: #4589ff;
|
| 3257 | --cds-chat-bubble-agent: #262626;
|
| 3258 | --cds-chat-bubble-border: #525252;
|
| 3259 | --cds-chat-bubble-user: #393939;
|
| 3260 | --cds-chat-button: #78a9ff;
|
| 3261 | --cds-chat-button-active: rgba(141, 141, 141, 0.4);
|
| 3262 | --cds-chat-button-hover: rgba(141, 141, 141, 0.16);
|
| 3263 | --cds-chat-button-selected: rgba(141, 141, 141, 0.24);
|
| 3264 | --cds-chat-button-text-hover: #a6c8ff;
|
| 3265 | --cds-chat-button-text-selected: #c6c6c6;
|
| 3266 | --cds-chat-header-background: #262626;
|
| 3267 | --cds-chat-prompt-background: #161616;
|
| 3268 | --cds-chat-prompt-border-end: rgba(38, 38, 38, 0);
|
| 3269 | --cds-chat-prompt-border-start: #262626;
|
| 3270 | --cds-chat-shell-background: #262626;
|
| 3271 | --cds-field-01: #393939;
|
| 3272 | --cds-field-02: #525252;
|
| 3273 | --cds-field-03: #6f6f6f;
|
| 3274 | --cds-field-hover-01: #474747;
|
| 3275 | --cds-field-hover-02: #636363;
|
| 3276 | --cds-field-hover-03: #5e5e5e;
|
| 3277 | --cds-focus: #ffffff;
|
| 3278 | --cds-focus-inset: #161616;
|
| 3279 | --cds-focus-inverse: #0f62fe;
|
| 3280 | --cds-highlight: #0043ce;
|
| 3281 | --cds-icon-disabled: rgba(244, 244, 244, 0.25);
|
| 3282 | --cds-icon-interactive: #ffffff;
|
| 3283 | --cds-icon-inverse: #161616;
|
| 3284 | --cds-icon-on-color: #ffffff;
|
| 3285 | --cds-icon-on-color-disabled: rgba(255, 255, 255, 0.25);
|
| 3286 | --cds-icon-primary: #f4f4f4;
|
| 3287 | --cds-icon-secondary: #c6c6c6;
|
| 3288 | --cds-interactive: #4589ff;
|
| 3289 | --cds-layer-01: #393939;
|
| 3290 | --cds-layer-02: #525252;
|
| 3291 | --cds-layer-03: #6f6f6f;
|
| 3292 | --cds-layer-accent-01: #525252;
|
| 3293 | --cds-layer-accent-02: #6f6f6f;
|
| 3294 | --cds-layer-accent-03: #8d8d8d;
|
| 3295 | --cds-layer-accent-active-01: #8d8d8d;
|
| 3296 | --cds-layer-accent-active-02: #393939;
|
| 3297 | --cds-layer-accent-active-03: #525252;
|
| 3298 | --cds-layer-accent-hover-01: #636363;
|
| 3299 | --cds-layer-accent-hover-02: #5e5e5e;
|
| 3300 | --cds-layer-accent-hover-03: #7a7a7a;
|
| 3301 | --cds-layer-active-01: #6f6f6f;
|
| 3302 | --cds-layer-active-02: #8d8d8d;
|
| 3303 | --cds-layer-active-03: #393939;
|
| 3304 | --cds-layer-hover-01: #474747;
|
| 3305 | --cds-layer-hover-02: #636363;
|
| 3306 | --cds-layer-hover-03: #5e5e5e;
|
| 3307 | --cds-layer-selected-01: #525252;
|
| 3308 | --cds-layer-selected-02: #6f6f6f;
|
| 3309 | --cds-layer-selected-03: #525252;
|
| 3310 | --cds-layer-selected-disabled: #a8a8a8;
|
| 3311 | --cds-layer-selected-hover-01: #636363;
|
| 3312 | --cds-layer-selected-hover-02: #5e5e5e;
|
| 3313 | --cds-layer-selected-hover-03: #636363;
|
| 3314 | --cds-layer-selected-inverse: #f4f4f4;
|
| 3315 | --cds-link-inverse: #0f62fe;
|
| 3316 | --cds-link-inverse-active: #161616;
|
| 3317 | --cds-link-inverse-hover: #0043ce;
|
| 3318 | --cds-link-inverse-visited: #8a3ffc;
|
| 3319 | --cds-link-primary: #78a9ff;
|
| 3320 | --cds-link-primary-hover: #a6c8ff;
|
| 3321 | --cds-link-secondary: #a6c8ff;
|
| 3322 | --cds-link-visited: #be95ff;
|
| 3323 | --cds-overlay: rgba(0, 0, 0, 0.65);
|
| 3324 | --cds-shadow: rgba(0, 0, 0, 0.8);
|
| 3325 | --cds-skeleton-background: #333333;
|
| 3326 | --cds-skeleton-element: #525252;
|
| 3327 | --cds-support-caution-major: #ff832b;
|
| 3328 | --cds-support-caution-minor: #f1c21b;
|
| 3329 | --cds-support-caution-undefined: #a56eff;
|
| 3330 | --cds-support-error: #ff8389;
|
| 3331 | --cds-support-error-inverse: #da1e28;
|
| 3332 | --cds-support-info: #4589ff;
|
| 3333 | --cds-support-info-inverse: #0043ce;
|
| 3334 | --cds-support-success: #42be65;
|
| 3335 | --cds-support-success-inverse: #24a148;
|
| 3336 | --cds-support-warning: #f1c21b;
|
| 3337 | --cds-support-warning-inverse: #f1c21b;
|
| 3338 | --cds-text-disabled: rgba(244, 244, 244, 0.25);
|
| 3339 | --cds-text-error: #ffb3b8;
|
| 3340 | --cds-text-helper: #c6c6c6;
|
| 3341 | --cds-text-inverse: #161616;
|
| 3342 | --cds-text-on-color: #ffffff;
|
| 3343 | --cds-text-on-color-disabled: rgba(255, 255, 255, 0.25);
|
| 3344 | --cds-text-placeholder: rgba(244, 244, 244, 0.4);
|
| 3345 | --cds-text-primary: #f4f4f4;
|
| 3346 | --cds-text-secondary: #c6c6c6;
|
| 3347 | --cds-toggle-off: #8d8d8d;
|
| 3348 | --cds-layer: var(--cds-layer-01, #f4f4f4);
|
| 3349 | --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
|
| 3350 | --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
|
| 3351 | --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
|
| 3352 | --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
|
| 3353 | --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
|
| 3354 | --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
|
| 3355 | --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
|
| 3356 | --cds-field: var(--cds-field-01, #f4f4f4);
|
| 3357 | --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
|
| 3358 | --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
|
| 3359 | --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
|
| 3360 | --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
|
| 3361 | --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
|
| 3362 | --cds-button-separator: #161616;
|
| 3363 | --cds-button-primary: #0f62fe;
|
| 3364 | --cds-button-secondary: #6f6f6f;
|
| 3365 | --cds-button-tertiary: #ffffff;
|
| 3366 | --cds-button-danger-primary: #da1e28;
|
| 3367 | --cds-button-danger-secondary: #ff8389;
|
| 3368 | --cds-button-danger-active: #750e13;
|
| 3369 | --cds-button-primary-active: #002d9c;
|
| 3370 | --cds-button-secondary-active: #393939;
|
| 3371 | --cds-button-tertiary-active: #c6c6c6;
|
| 3372 | --cds-button-danger-hover: #b81921;
|
| 3373 | --cds-button-primary-hover: #0050e6;
|
| 3374 | --cds-button-secondary-hover: #5e5e5e;
|
| 3375 | --cds-button-tertiary-hover: #f4f4f4;
|
| 3376 | --cds-button-disabled: rgba(141, 141, 141, 0.3);
|
| 3377 | --cds-notification-background-error: #393939;
|
| 3378 | --cds-notification-background-success: #393939;
|
| 3379 | --cds-notification-background-info: #393939;
|
| 3380 | --cds-notification-background-warning: #393939;
|
| 3381 | --cds-notification-action-tertiary-inverse: #0f62fe;
|
| 3382 | --cds-notification-action-tertiary-inverse-active: #002d9c;
|
| 3383 | --cds-notification-action-tertiary-inverse-hover: #0050e6;
|
| 3384 | --cds-notification-action-tertiary-inverse-text: #ffffff;
|
| 3385 | --cds-notification-action-tertiary-inverse-text-on-color-disabled: #8d8d8d;
|
| 3386 | --cds-tag-background-red: #a2191f;
|
| 3387 | --cds-tag-color-red: #ffd7d9;
|
| 3388 | --cds-tag-hover-red: #c21e25;
|
| 3389 | --cds-tag-background-magenta: #9f1853;
|
| 3390 | --cds-tag-color-magenta: #ffd6e8;
|
| 3391 | --cds-tag-hover-magenta: #bf1d63;
|
| 3392 | --cds-tag-background-purple: #6929c4;
|
| 3393 | --cds-tag-color-purple: #e8daff;
|
| 3394 | --cds-tag-hover-purple: #7c3dd6;
|
| 3395 | --cds-tag-background-blue: #0043ce;
|
| 3396 | --cds-tag-color-blue: #d0e2ff;
|
| 3397 | --cds-tag-hover-blue: #0053ff;
|
| 3398 | --cds-tag-background-cyan: #00539a;
|
| 3399 | --cds-tag-color-cyan: #bae6ff;
|
| 3400 | --cds-tag-hover-cyan: #0066bd;
|
| 3401 | --cds-tag-background-teal: #005d5d;
|
| 3402 | --cds-tag-color-teal: #9ef0f0;
|
| 3403 | --cds-tag-hover-teal: #007070;
|
| 3404 | --cds-tag-background-green: #0e6027;
|
| 3405 | --cds-tag-color-green: #a7f0ba;
|
| 3406 | --cds-tag-hover-green: #11742f;
|
| 3407 | --cds-tag-background-gray: #525252;
|
| 3408 | --cds-tag-color-gray: #f4f4f4;
|
| 3409 | --cds-tag-hover-gray: #636363;
|
| 3410 | --cds-tag-border-red: #fa4d56;
|
| 3411 | --cds-tag-border-blue: #4589ff;
|
| 3412 | --cds-tag-border-cyan: #1192e8;
|
| 3413 | --cds-tag-border-teal: #009d9a;
|
| 3414 | --cds-tag-border-green: #24a148;
|
| 3415 | --cds-tag-border-magenta: #ee5396;
|
| 3416 | --cds-tag-border-purple: #a56eff;
|
| 3417 | --cds-tag-border-gray: #8d8d8d;
|
| 3418 | --cds-tag-border-cool-gray: #878d96;
|
| 3419 | --cds-tag-border-warm-gray: #8f8b8b;
|
| 3420 | --cds-tag-background-cool-gray: #4d5358;
|
| 3421 | --cds-tag-color-cool-gray: #f2f4f8;
|
| 3422 | --cds-tag-hover-cool-gray: #5d646a;
|
| 3423 | --cds-tag-background-warm-gray: #565151;
|
| 3424 | --cds-tag-color-warm-gray: #f7f3f2;
|
| 3425 | --cds-tag-hover-warm-gray: #696363;
|
| 3426 | }
|
| 3427 |
|
| 3428 | .cds--g100 {
|
| 3429 | background-color: var(--cds-background);
|
| 3430 | color: var(--cds-text-primary);
|
| 3431 | --cds-ai-aura-end: rgba(0, 0, 0, 0);
|
| 3432 | --cds-ai-aura-hover-background: #333333;
|
| 3433 | --cds-ai-aura-hover-end: rgba(0, 0, 0, 0);
|
| 3434 | --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
|
| 3435 | --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
|
| 3436 | --cds-ai-aura-start-sm: rgba(69, 137, 255, 0.16);
|
| 3437 | --cds-ai-border-end: #4589ff;
|
| 3438 | --cds-ai-border-start: rgba(166, 200, 255, 0.36);
|
| 3439 | --cds-ai-border-strong: #78a9ff;
|
| 3440 | --cds-ai-drop-shadow: rgba(0, 0, 0, 0.28);
|
| 3441 | --cds-ai-inner-shadow: rgba(69, 137, 255, 0.16);
|
| 3442 | --cds-ai-overlay: rgba(0, 0, 0, 0.5);
|
| 3443 | --cds-ai-popover-background: #161616;
|
| 3444 | --cds-ai-popover-caret-bottom: #4589ff;
|
| 3445 | --cds-ai-popover-caret-bottom-background: #202d45;
|
| 3446 | --cds-ai-popover-caret-bottom-background-actions: #1e283a;
|
| 3447 | --cds-ai-popover-caret-center: #4870b5;
|
| 3448 | --cds-ai-popover-shadow-outer-01: rgba(0, 0, 0, 0.12);
|
| 3449 | --cds-ai-popover-shadow-outer-02: rgba(0, 0, 0, 0.08);
|
| 3450 | --cds-ai-skeleton-background: rgba(120, 169, 255, 0.5);
|
| 3451 | --cds-ai-skeleton-element-background: rgba(120, 169, 255, 0.3);
|
| 3452 | --cds-background: #161616;
|
| 3453 | --cds-background-active: rgba(141, 141, 141, 0.4);
|
| 3454 | --cds-background-brand: #0f62fe;
|
| 3455 | --cds-background-hover: rgba(141, 141, 141, 0.16);
|
| 3456 | --cds-background-inverse: #f4f4f4;
|
| 3457 | --cds-background-inverse-hover: #e8e8e8;
|
| 3458 | --cds-background-selected: rgba(141, 141, 141, 0.24);
|
| 3459 | --cds-background-selected-hover: rgba(141, 141, 141, 0.32);
|
| 3460 | --cds-border-disabled: rgba(141, 141, 141, 0.5);
|
| 3461 | --cds-border-interactive: #4589ff;
|
| 3462 | --cds-border-inverse: #f4f4f4;
|
| 3463 | --cds-border-strong-01: #6f6f6f;
|
| 3464 | --cds-border-strong-02: #8d8d8d;
|
| 3465 | --cds-border-strong-03: #a8a8a8;
|
| 3466 | --cds-border-subtle-00: #393939;
|
| 3467 | --cds-border-subtle-01: #525252;
|
| 3468 | --cds-border-subtle-02: #6f6f6f;
|
| 3469 | --cds-border-subtle-03: #6f6f6f;
|
| 3470 | --cds-border-subtle-selected-01: #6f6f6f;
|
| 3471 | --cds-border-subtle-selected-02: #8d8d8d;
|
| 3472 | --cds-border-subtle-selected-03: #8d8d8d;
|
| 3473 | --cds-border-tile-01: #525252;
|
| 3474 | --cds-border-tile-02: #6f6f6f;
|
| 3475 | --cds-border-tile-03: #8d8d8d;
|
| 3476 | --cds-chat-avatar-agent: #c6c6c6;
|
| 3477 | --cds-chat-avatar-bot: #8d8d8d;
|
| 3478 | --cds-chat-avatar-user: #4589ff;
|
| 3479 | --cds-chat-bubble-agent: #262626;
|
| 3480 | --cds-chat-bubble-border: #525252;
|
| 3481 | --cds-chat-bubble-user: #393939;
|
| 3482 | --cds-chat-button: #78a9ff;
|
| 3483 | --cds-chat-button-active: rgba(141, 141, 141, 0.4);
|
| 3484 | --cds-chat-button-hover: rgba(141, 141, 141, 0.16);
|
| 3485 | --cds-chat-button-selected: rgba(141, 141, 141, 0.24);
|
| 3486 | --cds-chat-button-text-hover: #a6c8ff;
|
| 3487 | --cds-chat-button-text-selected: #c6c6c6;
|
| 3488 | --cds-chat-header-background: #262626;
|
| 3489 | --cds-chat-prompt-background: #161616;
|
| 3490 | --cds-chat-prompt-border-end: rgba(38, 38, 38, 0);
|
| 3491 | --cds-chat-prompt-border-start: #262626;
|
| 3492 | --cds-chat-shell-background: #262626;
|
| 3493 | --cds-field-01: #262626;
|
| 3494 | --cds-field-02: #393939;
|
| 3495 | --cds-field-03: #525252;
|
| 3496 | --cds-field-hover-01: #333333;
|
| 3497 | --cds-field-hover-02: #474747;
|
| 3498 | --cds-field-hover-03: #636363;
|
| 3499 | --cds-focus: #ffffff;
|
| 3500 | --cds-focus-inset: #161616;
|
| 3501 | --cds-focus-inverse: #0f62fe;
|
| 3502 | --cds-highlight: #002d9c;
|
| 3503 | --cds-icon-disabled: rgba(244, 244, 244, 0.25);
|
| 3504 | --cds-icon-interactive: #ffffff;
|
| 3505 | --cds-icon-inverse: #161616;
|
| 3506 | --cds-icon-on-color: #ffffff;
|
| 3507 | --cds-icon-on-color-disabled: rgba(255, 255, 255, 0.25);
|
| 3508 | --cds-icon-primary: #f4f4f4;
|
| 3509 | --cds-icon-secondary: #c6c6c6;
|
| 3510 | --cds-interactive: #4589ff;
|
| 3511 | --cds-layer-01: #262626;
|
| 3512 | --cds-layer-02: #393939;
|
| 3513 | --cds-layer-03: #525252;
|
| 3514 | --cds-layer-accent-01: #393939;
|
| 3515 | --cds-layer-accent-02: #525252;
|
| 3516 | --cds-layer-accent-03: #6f6f6f;
|
| 3517 | --cds-layer-accent-active-01: #6f6f6f;
|
| 3518 | --cds-layer-accent-active-02: #8d8d8d;
|
| 3519 | --cds-layer-accent-active-03: #393939;
|
| 3520 | --cds-layer-accent-hover-01: #474747;
|
| 3521 | --cds-layer-accent-hover-02: #636363;
|
| 3522 | --cds-layer-accent-hover-03: #5e5e5e;
|
| 3523 | --cds-layer-active-01: #525252;
|
| 3524 | --cds-layer-active-02: #6f6f6f;
|
| 3525 | --cds-layer-active-03: #8d8d8d;
|
| 3526 | --cds-layer-hover-01: #333333;
|
| 3527 | --cds-layer-hover-02: #474747;
|
| 3528 | --cds-layer-hover-03: #636363;
|
| 3529 | --cds-layer-selected-01: #393939;
|
| 3530 | --cds-layer-selected-02: #525252;
|
| 3531 | --cds-layer-selected-03: #6f6f6f;
|
| 3532 | --cds-layer-selected-disabled: #a8a8a8;
|
| 3533 | --cds-layer-selected-hover-01: #474747;
|
| 3534 | --cds-layer-selected-hover-02: #636363;
|
| 3535 | --cds-layer-selected-hover-03: #5e5e5e;
|
| 3536 | --cds-layer-selected-inverse: #f4f4f4;
|
| 3537 | --cds-link-inverse: #0f62fe;
|
| 3538 | --cds-link-inverse-active: #161616;
|
| 3539 | --cds-link-inverse-hover: #0043ce;
|
| 3540 | --cds-link-inverse-visited: #8a3ffc;
|
| 3541 | --cds-link-primary: #78a9ff;
|
| 3542 | --cds-link-primary-hover: #a6c8ff;
|
| 3543 | --cds-link-secondary: #a6c8ff;
|
| 3544 | --cds-link-visited: #be95ff;
|
| 3545 | --cds-overlay: rgba(0, 0, 0, 0.65);
|
| 3546 | --cds-shadow: rgba(0, 0, 0, 0.8);
|
| 3547 | --cds-skeleton-background: #292929;
|
| 3548 | --cds-skeleton-element: #393939;
|
| 3549 | --cds-support-caution-major: #ff832b;
|
| 3550 | --cds-support-caution-minor: #f1c21b;
|
| 3551 | --cds-support-caution-undefined: #a56eff;
|
| 3552 | --cds-support-error: #fa4d56;
|
| 3553 | --cds-support-error-inverse: #da1e28;
|
| 3554 | --cds-support-info: #4589ff;
|
| 3555 | --cds-support-info-inverse: #0043ce;
|
| 3556 | --cds-support-success: #42be65;
|
| 3557 | --cds-support-success-inverse: #24a148;
|
| 3558 | --cds-support-warning: #f1c21b;
|
| 3559 | --cds-support-warning-inverse: #f1c21b;
|
| 3560 | --cds-text-disabled: rgba(244, 244, 244, 0.25);
|
| 3561 | --cds-text-error: #ff8389;
|
| 3562 | --cds-text-helper: #a8a8a8;
|
| 3563 | --cds-text-inverse: #161616;
|
| 3564 | --cds-text-on-color: #ffffff;
|
| 3565 | --cds-text-on-color-disabled: rgba(255, 255, 255, 0.25);
|
| 3566 | --cds-text-placeholder: rgba(244, 244, 244, 0.4);
|
| 3567 | --cds-text-primary: #f4f4f4;
|
| 3568 | --cds-text-secondary: #c6c6c6;
|
| 3569 | --cds-toggle-off: #6f6f6f;
|
| 3570 | --cds-layer: var(--cds-layer-01, #f4f4f4);
|
| 3571 | --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
|
| 3572 | --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
|
| 3573 | --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
|
| 3574 | --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
|
| 3575 | --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
|
| 3576 | --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
|
| 3577 | --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
|
| 3578 | --cds-field: var(--cds-field-01, #f4f4f4);
|
| 3579 | --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
|
| 3580 | --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
|
| 3581 | --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
|
| 3582 | --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
|
| 3583 | --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
|
| 3584 | --cds-button-separator: #161616;
|
| 3585 | --cds-button-primary: #0f62fe;
|
| 3586 | --cds-button-secondary: #6f6f6f;
|
| 3587 | --cds-button-tertiary: #ffffff;
|
| 3588 | --cds-button-danger-primary: #da1e28;
|
| 3589 | --cds-button-danger-secondary: #fa4d56;
|
| 3590 | --cds-button-danger-active: #750e13;
|
| 3591 | --cds-button-primary-active: #002d9c;
|
| 3592 | --cds-button-secondary-active: #393939;
|
| 3593 | --cds-button-tertiary-active: #c6c6c6;
|
| 3594 | --cds-button-danger-hover: #b81921;
|
| 3595 | --cds-button-primary-hover: #0050e6;
|
| 3596 | --cds-button-secondary-hover: #5e5e5e;
|
| 3597 | --cds-button-tertiary-hover: #f4f4f4;
|
| 3598 | --cds-button-disabled: rgba(141, 141, 141, 0.3);
|
| 3599 | --cds-notification-background-error: #262626;
|
| 3600 | --cds-notification-background-success: #262626;
|
| 3601 | --cds-notification-background-info: #262626;
|
| 3602 | --cds-notification-background-warning: #262626;
|
| 3603 | --cds-notification-action-tertiary-inverse: #0f62fe;
|
| 3604 | --cds-notification-action-tertiary-inverse-active: #002d9c;
|
| 3605 | --cds-notification-action-tertiary-inverse-hover: #0050e6;
|
| 3606 | --cds-notification-action-tertiary-inverse-text: #ffffff;
|
| 3607 | --cds-notification-action-tertiary-inverse-text-on-color-disabled: #8d8d8d;
|
| 3608 | --cds-tag-background-red: #a2191f;
|
| 3609 | --cds-tag-color-red: #ffd7d9;
|
| 3610 | --cds-tag-hover-red: #c21e25;
|
| 3611 | --cds-tag-background-magenta: #9f1853;
|
| 3612 | --cds-tag-color-magenta: #ffd6e8;
|
| 3613 | --cds-tag-hover-magenta: #bf1d63;
|
| 3614 | --cds-tag-background-purple: #6929c4;
|
| 3615 | --cds-tag-color-purple: #e8daff;
|
| 3616 | --cds-tag-hover-purple: #7c3dd6;
|
| 3617 | --cds-tag-background-blue: #0043ce;
|
| 3618 | --cds-tag-color-blue: #d0e2ff;
|
| 3619 | --cds-tag-hover-blue: #0053ff;
|
| 3620 | --cds-tag-background-cyan: #00539a;
|
| 3621 | --cds-tag-color-cyan: #bae6ff;
|
| 3622 | --cds-tag-hover-cyan: #0066bd;
|
| 3623 | --cds-tag-background-teal: #005d5d;
|
| 3624 | --cds-tag-color-teal: #9ef0f0;
|
| 3625 | --cds-tag-hover-teal: #007070;
|
| 3626 | --cds-tag-background-green: #0e6027;
|
| 3627 | --cds-tag-color-green: #a7f0ba;
|
| 3628 | --cds-tag-hover-green: #11742f;
|
| 3629 | --cds-tag-background-gray: #525252;
|
| 3630 | --cds-tag-color-gray: #f4f4f4;
|
| 3631 | --cds-tag-hover-gray: #636363;
|
| 3632 | --cds-tag-border-red: #fa4d56;
|
| 3633 | --cds-tag-border-blue: #4589ff;
|
| 3634 | --cds-tag-border-cyan: #1192e8;
|
| 3635 | --cds-tag-border-teal: #009d9a;
|
| 3636 | --cds-tag-border-green: #24a148;
|
| 3637 | --cds-tag-border-magenta: #ee5396;
|
| 3638 | --cds-tag-border-purple: #a56eff;
|
| 3639 | --cds-tag-border-gray: #8d8d8d;
|
| 3640 | --cds-tag-border-cool-gray: #878d96;
|
| 3641 | --cds-tag-border-warm-gray: #8f8b8b;
|
| 3642 | --cds-tag-background-cool-gray: #4d5358;
|
| 3643 | --cds-tag-color-cool-gray: #f2f4f8;
|
| 3644 | --cds-tag-hover-cool-gray: #5d646a;
|
| 3645 | --cds-tag-background-warm-gray: #565151;
|
| 3646 | --cds-tag-color-warm-gray: #f7f3f2;
|
| 3647 | --cds-tag-hover-warm-gray: #696363;
|
| 3648 | }
|
| 3649 |
|
| 3650 | .cds--accordion {
|
| 3651 | --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-lg)));
|
| 3652 | --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
|
| 3653 | box-sizing: border-box;
|
| 3654 | padding: 0;
|
| 3655 | border: 0;
|
| 3656 | margin: 0;
|
| 3657 | font-family: inherit;
|
| 3658 | font-size: 100%;
|
| 3659 | vertical-align: baseline;
|
| 3660 | inline-size: 100%;
|
| 3661 | list-style: none;
|
| 3662 | }
|
| 3663 | .cds--accordion *,
|
| 3664 | .cds--accordion *::before,
|
| 3665 | .cds--accordion *::after {
|
| 3666 | box-sizing: inherit;
|
| 3667 | }
|
| 3668 |
|
| 3669 | .cds--accordion__item {
|
| 3670 | display: list-item;
|
| 3671 | overflow: visible;
|
| 3672 | border-block-start: 1px solid var(--cds-border-subtle);
|
| 3673 | transition: border-color cubic-bezier(0.2, 0, 0.38, 0.9) 110ms;
|
| 3674 | }
|
| 3675 | .cds--accordion__item:last-child {
|
| 3676 | border-block-end: 1px solid var(--cds-border-subtle);
|
| 3677 | }
|
| 3678 |
|
| 3679 | .cds--accordion__item:not(.cds--accordion__item--active):hover, .cds--accordion__item:not(.cds--accordion__item--active):hover + .cds--accordion__item {
|
| 3680 | border-block-start-color: var(--cds-layer-hover);
|
| 3681 | }
|
| 3682 | .cds--accordion__item:not(.cds--accordion__item--active):last-child:hover {
|
| 3683 | border-block-end-color: var(--cds-layer-hover);
|
| 3684 | }
|
| 3685 |
|
| 3686 | .cds--accordion__heading {
|
| 3687 | box-sizing: border-box;
|
| 3688 | padding: 0;
|
| 3689 | border: 0;
|
| 3690 | margin: 0;
|
| 3691 | font-family: inherit;
|
| 3692 | font-size: 100%;
|
| 3693 | vertical-align: baseline;
|
| 3694 | display: inline-block;
|
| 3695 | padding: 0;
|
| 3696 | border: 0;
|
| 3697 | -webkit-appearance: none;
|
| 3698 | -moz-appearance: none;
|
| 3699 | appearance: none;
|
| 3700 | background: none;
|
| 3701 | cursor: pointer;
|
| 3702 | text-align: start;
|
| 3703 | inline-size: 100%;
|
| 3704 | position: relative;
|
| 3705 | display: flex;
|
| 3706 | flex-direction: row-reverse;
|
| 3707 | align-items: center;
|
| 3708 | justify-content: flex-start;
|
| 3709 | margin: 0;
|
| 3710 | color: var(--cds-text-primary, #161616);
|
| 3711 | cursor: pointer;
|
| 3712 | inline-size: 100%;
|
| 3713 | min-block-size: var(--cds-layout-size-height-local);
|
| 3714 | padding-inline-end: var(--cds-layout-density-padding-inline-local);
|
| 3715 | transition: background-color cubic-bezier(0.2, 0, 0.38, 0.9) 110ms;
|
| 3716 | }
|
| 3717 | .cds--accordion__heading *,
|
| 3718 | .cds--accordion__heading *::before,
|
| 3719 | .cds--accordion__heading *::after {
|
| 3720 | box-sizing: inherit;
|
| 3721 | }
|
| 3722 | .cds--accordion__heading::-moz-focus-inner {
|
| 3723 | border: 0;
|
| 3724 | }
|
| 3725 | .cds--accordion__heading:hover {
|
| 3726 | background-color: var(--cds-layer-hover);
|
| 3727 | outline: none;
|
| 3728 | }
|
| 3729 | .cds--accordion__heading:focus {
|
| 3730 | position: relative;
|
| 3731 | z-index: 2;
|
| 3732 | box-shadow: 0 -1px 0 0 var(--cds-focus, #0f62fe), inset 0 1px 0 0 var(--cds-focus, #0f62fe), inset 2px 0 0 0 var(--cds-focus, #0f62fe), 0 1px 0 0 var(--cds-focus, #0f62fe), inset 0 -1px 0 0 var(--cds-focus, #0f62fe), inset -2px 0 0 0 var(--cds-focus, #0f62fe);
|
| 3733 | outline: none;
|
| 3734 | }
|
| 3735 |
|
| 3736 | .cds--accordion__heading[disabled] {
|
| 3737 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 3738 | cursor: not-allowed;
|
| 3739 | }
|
| 3740 |
|
| 3741 | .cds--accordion__heading[disabled] .cds--accordion__arrow {
|
| 3742 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 3743 | }
|
| 3744 |
|
| 3745 | .cds--accordion__heading[disabled]:hover::before {
|
| 3746 | background-color: transparent;
|
| 3747 | }
|
| 3748 |
|
| 3749 | .cds--accordion__item--disabled,
|
| 3750 | .cds--accordion__item--disabled + .cds--accordion__item {
|
| 3751 | border-block-start: 1px solid var(--cds-border-subtle);
|
| 3752 | }
|
| 3753 |
|
| 3754 | li.cds--accordion__item--disabled:last-of-type {
|
| 3755 | border-block-end: 1px solid var(--cds-border-subtle);
|
| 3756 | }
|
| 3757 |
|
| 3758 | .cds--accordion__arrow {
|
| 3759 | outline: 2px solid transparent;
|
| 3760 | outline-offset: -2px;
|
| 3761 | flex: 0 0 1rem;
|
| 3762 | block-size: 1rem;
|
| 3763 | fill: var(--cds-icon-primary, #161616);
|
| 3764 | inline-size: 1rem;
|
| 3765 | transform: rotate(-270deg) ;
|
| 3766 | transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 3767 | }
|
| 3768 |
|
| 3769 | .cds--accordion__title {
|
| 3770 | font-size: var(--cds-body-01-font-size, 0.875rem);
|
| 3771 | font-weight: var(--cds-body-01-font-weight, 400);
|
| 3772 | line-height: var(--cds-body-01-line-height, 1.42857);
|
| 3773 | letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
|
| 3774 | z-index: 1;
|
| 3775 | inline-size: 100%;
|
| 3776 | padding-inline-start: 1rem;
|
| 3777 | text-align: start;
|
| 3778 | }
|
| 3779 |
|
| 3780 | .cds--accordion__wrapper {
|
| 3781 | overflow: hidden;
|
| 3782 | padding: 0;
|
| 3783 | max-block-size: 0;
|
| 3784 | opacity: 0;
|
| 3785 | transition: all 110ms cubic-bezier(0, 0, 0.38, 0.9);
|
| 3786 | writing-mode: horizontal-tb;
|
| 3787 | }
|
| 3788 |
|
| 3789 | .cds--accordion__content {
|
| 3790 | padding-inline: var(--cds-layout-density-padding-inline-local);
|
| 3791 | }
|
| 3792 | @media (min-width: 480px) {
|
| 3793 | .cds--accordion__content {
|
| 3794 | padding-inline-end: 3rem;
|
| 3795 | }
|
| 3796 | }
|
| 3797 | @media (min-width: 640px) {
|
| 3798 | .cds--accordion__content {
|
| 3799 | padding-inline-end: 25%;
|
| 3800 | }
|
| 3801 | }
|
| 3802 | .cds--accordion__content > p {
|
| 3803 | font-size: var(--cds-body-01-font-size, 0.875rem);
|
| 3804 | font-weight: var(--cds-body-01-font-weight, 400);
|
| 3805 | line-height: var(--cds-body-01-line-height, 1.42857);
|
| 3806 | letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
|
| 3807 | }
|
| 3808 |
|
| 3809 | .cds--accordion--start .cds--accordion__heading {
|
| 3810 | flex-direction: row;
|
| 3811 | }
|
| 3812 |
|
| 3813 | .cds--accordion--start .cds--accordion__arrow {
|
| 3814 | margin: 2px 0 0 var(--cds-layout-density-padding-inline-local);
|
| 3815 | }
|
| 3816 |
|
| 3817 | .cds--accordion--start .cds--accordion__title {
|
| 3818 | margin-inline-end: 1rem;
|
| 3819 | }
|
| 3820 |
|
| 3821 | .cds--accordion--start .cds--accordion__content {
|
| 3822 | margin-inline-start: calc(
|
| 3823 | var(--cds-layout-density-padding-inline-local) + 1rem
|
| 3824 | );
|
| 3825 | }
|
| 3826 |
|
| 3827 | .cds--accordion__item--collapsing .cds--accordion__content,
|
| 3828 | .cds--accordion__item--expanding .cds--accordion__content {
|
| 3829 | display: block;
|
| 3830 | }
|
| 3831 |
|
| 3832 | .cds--accordion__item--active {
|
| 3833 | overflow: visible;
|
| 3834 | }
|
| 3835 | .cds--accordion__item--active > .cds--accordion__wrapper {
|
| 3836 | overflow: visible;
|
| 3837 | max-block-size: -moz-fit-content;
|
| 3838 | max-block-size: fit-content;
|
| 3839 | opacity: 1;
|
| 3840 | padding-block: 0.5rem;
|
| 3841 | padding-block-end: 1.5rem;
|
| 3842 | }
|
| 3843 | .cds--accordion__item--active > .cds--accordion__heading > .cds--accordion__arrow {
|
| 3844 | fill: var(--cds-icon-primary, #161616);
|
| 3845 | transform: rotate(-90deg) ;
|
| 3846 | }
|
| 3847 |
|
| 3848 | .cds--accordion--flush .cds--accordion__item {
|
| 3849 | position: relative;
|
| 3850 | border-color: transparent;
|
| 3851 | }
|
| 3852 | .cds--accordion--flush .cds--accordion__item:last-child, .cds--accordion--flush .cds--accordion__item:hover, .cds--accordion--flush .cds--accordion__item:last-child:hover, .cds--accordion--flush .cds--accordion__item:hover + .cds--accordion__item {
|
| 3853 | border-color: transparent;
|
| 3854 | }
|
| 3855 | .cds--accordion--flush .cds--accordion__item::before, .cds--accordion--flush .cds--accordion__item::after {
|
| 3856 | position: absolute;
|
| 3857 | display: block;
|
| 3858 | block-size: 1px;
|
| 3859 | content: "";
|
| 3860 | inline-size: calc(100% - 1rem - 1rem);
|
| 3861 | margin-inline-start: 1rem;
|
| 3862 | transition: background cubic-bezier(0.2, 0, 0.38, 0.9) 110ms;
|
| 3863 | }
|
| 3864 | @media screen and (prefers-reduced-motion: reduce) {
|
| 3865 | .cds--accordion--flush .cds--accordion__item::before, .cds--accordion--flush .cds--accordion__item::after {
|
| 3866 | transition: none;
|
| 3867 | }
|
| 3868 | }
|
| 3869 | .cds--accordion--flush .cds--accordion__item::before {
|
| 3870 | background: var(--cds-border-subtle);
|
| 3871 | inset-block-start: -1px;
|
| 3872 | }
|
| 3873 | .cds--accordion--flush .cds--accordion__item:last-child::after {
|
| 3874 | background: var(--cds-border-subtle);
|
| 3875 | inset-block-end: -1px;
|
| 3876 | }
|
| 3877 |
|
| 3878 | .cds--accordion--flush .cds--accordion__heading:hover {
|
| 3879 | position: relative;
|
| 3880 | z-index: 1;
|
| 3881 | }
|
| 3882 | .cds--accordion--flush .cds--accordion__heading:hover::before, .cds--accordion--flush .cds--accordion__heading:hover::after {
|
| 3883 | position: absolute;
|
| 3884 | display: block;
|
| 3885 | background: var(--cds-layer-hover);
|
| 3886 | block-size: 1px;
|
| 3887 | content: "";
|
| 3888 | inline-size: 100%;
|
| 3889 | inset-inline-start: 0;
|
| 3890 | transition: background cubic-bezier(0.2, 0, 0.38, 0.9) 110ms;
|
| 3891 | }
|
| 3892 | @media screen and (prefers-reduced-motion: reduce) {
|
| 3893 | .cds--accordion--flush .cds--accordion__heading:hover::before, .cds--accordion--flush .cds--accordion__heading:hover::after {
|
| 3894 | transition: none;
|
| 3895 | }
|
| 3896 | }
|
| 3897 | .cds--accordion--flush .cds--accordion__heading:hover::before {
|
| 3898 | inset-block-start: -1px;
|
| 3899 | }
|
| 3900 | .cds--accordion--flush .cds--accordion__heading:hover::after {
|
| 3901 | inset-block-end: -1px;
|
| 3902 | }
|
| 3903 | .cds--accordion--flush .cds--accordion__heading:hover:focus::after, .cds--accordion--flush .cds--accordion__heading:hover:focus::before {
|
| 3904 | background: none;
|
| 3905 | }
|
| 3906 |
|
| 3907 | .cds--accordion.cds--skeleton .cds--accordion__heading,
|
| 3908 | .cds--accordion.cds--skeleton .cds--accordion__button {
|
| 3909 | cursor: default;
|
| 3910 | }
|
| 3911 |
|
| 3912 | .cds--accordion.cds--skeleton .cds--accordion__arrow {
|
| 3913 | cursor: default;
|
| 3914 | fill: var(--cds-icon-primary, #161616);
|
| 3915 | pointer-events: none;
|
| 3916 | }
|
| 3917 | .cds--accordion.cds--skeleton .cds--accordion__arrow:hover, .cds--accordion.cds--skeleton .cds--accordion__arrow:focus, .cds--accordion.cds--skeleton .cds--accordion__arrow:active {
|
| 3918 | border: none;
|
| 3919 | cursor: default;
|
| 3920 | outline: none;
|
| 3921 | }
|
| 3922 |
|
| 3923 | .cds--accordion.cds--skeleton .cds--accordion__heading:hover::before,
|
| 3924 | .cds--accordion.cds--skeleton .cds--accordion__heading:hover {
|
| 3925 | background-color: transparent;
|
| 3926 | }
|
| 3927 |
|
| 3928 | .cds--accordion--end.cds--skeleton .cds--accordion__arrow {
|
| 3929 | margin-inline-start: 1rem;
|
| 3930 | }
|
| 3931 |
|
| 3932 | .cds--skeleton .cds--accordion__heading:focus .cds--accordion__arrow {
|
| 3933 | border: none;
|
| 3934 | cursor: default;
|
| 3935 | outline: none;
|
| 3936 | }
|
| 3937 |
|
| 3938 | .cds--accordion__title.cds--skeleton__text {
|
| 3939 | margin-block-end: 0;
|
| 3940 | }
|
| 3941 |
|
| 3942 | .cds--accordion.cds--skeleton .cds--accordion__title {
|
| 3943 | margin-inline-start: 1rem;
|
| 3944 | }
|
| 3945 |
|
| 3946 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 3947 | .cds--accordion__arrow,
|
| 3948 | .cds--accordion__item--active .cds--accordion__arrow {
|
| 3949 | fill: ButtonText;
|
| 3950 | }
|
| 3951 | }
|
| 3952 |
|
| 3953 | [dir=rtl] .cds--accordion--start .cds--accordion__heading {
|
| 3954 | padding-inline-end: 0;
|
| 3955 | padding-inline-start: var(--cds-layout-density-padding-inline-local);
|
| 3956 | }
|
| 3957 |
|
| 3958 | [dir=rtl] .cds--accordion--start .cds--accordion__title {
|
| 3959 | margin-inline-end: 0;
|
| 3960 | padding-inline-start: 0;
|
| 3961 | }
|
| 3962 |
|
| 3963 | @keyframes cds--hide-feedback {
|
| 3964 | 0% {
|
| 3965 | opacity: 1;
|
| 3966 | visibility: inherit;
|
| 3967 | }
|
| 3968 | 100% {
|
| 3969 | opacity: 0;
|
| 3970 | visibility: hidden;
|
| 3971 | }
|
| 3972 | }
|
| 3973 | @keyframes cds--show-feedback {
|
| 3974 | 0% {
|
| 3975 | opacity: 0;
|
| 3976 | visibility: hidden;
|
| 3977 | }
|
| 3978 | 100% {
|
| 3979 | opacity: 1;
|
| 3980 | visibility: inherit;
|
| 3981 | }
|
| 3982 | }
|
| 3983 | @keyframes cds--skeleton {
|
| 3984 | 0% {
|
| 3985 | opacity: 0.3;
|
| 3986 | transform: scaleX(0);
|
| 3987 | transform-origin: left;
|
| 3988 | }
|
| 3989 | 20% {
|
| 3990 | opacity: 1;
|
| 3991 | transform: scaleX(1);
|
| 3992 | transform-origin: left;
|
| 3993 | }
|
| 3994 | 28% {
|
| 3995 | transform: scaleX(1);
|
| 3996 | transform-origin: right;
|
| 3997 | }
|
| 3998 | 51% {
|
| 3999 | transform: scaleX(0);
|
| 4000 | transform-origin: right;
|
| 4001 | }
|
| 4002 | 58% {
|
| 4003 | transform: scaleX(0);
|
| 4004 | transform-origin: right;
|
| 4005 | }
|
| 4006 | 82% {
|
| 4007 | transform: scaleX(1);
|
| 4008 | transform-origin: right;
|
| 4009 | }
|
| 4010 | 83% {
|
| 4011 | transform: scaleX(1);
|
| 4012 | transform-origin: left;
|
| 4013 | }
|
| 4014 | 96% {
|
| 4015 | transform: scaleX(0);
|
| 4016 | transform-origin: left;
|
| 4017 | }
|
| 4018 | 100% {
|
| 4019 | opacity: 0.3;
|
| 4020 | transform: scaleX(0);
|
| 4021 | transform-origin: left;
|
| 4022 | }
|
| 4023 | }
|
| 4024 | .cds--assistive-text,
|
| 4025 | .cds--visually-hidden {
|
| 4026 | position: absolute;
|
| 4027 | overflow: hidden;
|
| 4028 | padding: 0;
|
| 4029 | border: 0;
|
| 4030 | margin: -1px;
|
| 4031 | block-size: 1px;
|
| 4032 | clip: rect(0, 0, 0, 0);
|
| 4033 | inline-size: 1px;
|
| 4034 | visibility: inherit;
|
| 4035 | white-space: nowrap;
|
| 4036 | }
|
| 4037 |
|
| 4038 | .cds--popover-container {
|
| 4039 | display: inline-block;
|
| 4040 | }
|
| 4041 |
|
| 4042 | .cds--popover-container:not(.cds--popover--auto-align) {
|
| 4043 | position: relative;
|
| 4044 | }
|
| 4045 |
|
| 4046 | .cds--popover--high-contrast .cds--popover {
|
| 4047 | --cds-popover-background-color: var(--cds-background-inverse, #393939);
|
| 4048 | --cds-popover-text-color: var(--cds-text-inverse, #ffffff);
|
| 4049 | }
|
| 4050 |
|
| 4051 | .cds--popover--drop-shadow .cds--popover {
|
| 4052 | --cds-popover-drop-shadow: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
|
| 4053 | }
|
| 4054 |
|
| 4055 | .cds--popover--caret {
|
| 4056 | --cds-popover-offset: 0.625rem;
|
| 4057 | }
|
| 4058 |
|
| 4059 | .cds--popover {
|
| 4060 | position: absolute;
|
| 4061 | z-index: 6000;
|
| 4062 | filter: var(--cds-popover-drop-shadow, none);
|
| 4063 | inset: 0;
|
| 4064 | pointer-events: none;
|
| 4065 | }
|
| 4066 |
|
| 4067 | .cds--popover-content {
|
| 4068 | --cds-layout-size-height-sm: 2rem;
|
| 4069 | --cds-layout-size-height-md: 2.5rem;
|
| 4070 | --cds-layout-size-height-lg: 3rem;
|
| 4071 | box-sizing: border-box;
|
| 4072 | padding: 0;
|
| 4073 | border: 0;
|
| 4074 | margin: 0;
|
| 4075 | font-family: inherit;
|
| 4076 | font-size: 100%;
|
| 4077 | vertical-align: baseline;
|
| 4078 | position: absolute;
|
| 4079 | z-index: 6000;
|
| 4080 | display: none;
|
| 4081 | border-radius: var(--cds-popover-border-radius, 2px);
|
| 4082 | background-color: var(--cds-popover-background-color, var(--cds-layer));
|
| 4083 | color: var(--cds-popover-text-color, var(--cds-text-primary, #161616));
|
| 4084 | inline-size: -moz-max-content;
|
| 4085 | inline-size: max-content;
|
| 4086 | max-inline-size: 23rem;
|
| 4087 | pointer-events: auto;
|
| 4088 | }
|
| 4089 | .cds--layout--size-sm .cds--popover-content {
|
| 4090 | --cds-layout-size-height: var(--cds-layout-size-height-sm);
|
| 4091 | }
|
| 4092 | .cds--layout--size-md .cds--popover-content {
|
| 4093 | --cds-layout-size-height: var(--cds-layout-size-height-md);
|
| 4094 | }
|
| 4095 | .cds--layout--size-lg .cds--popover-content {
|
| 4096 | --cds-layout-size-height: var(--cds-layout-size-height-lg);
|
| 4097 | }
|
| 4098 | .cds--popover-content *,
|
| 4099 | .cds--popover-content *::before,
|
| 4100 | .cds--popover-content *::after {
|
| 4101 | box-sizing: inherit;
|
| 4102 | }
|
| 4103 |
|
| 4104 | .cds--popover--open > .cds--popover > .cds--popover-content {
|
| 4105 | display: block;
|
| 4106 | }
|
| 4107 |
|
| 4108 | .cds--popover-content::before {
|
| 4109 | position: absolute;
|
| 4110 | display: none;
|
| 4111 | content: "";
|
| 4112 | }
|
| 4113 |
|
| 4114 | .cds--popover--open > .cds--popover > .cds--popover-content::before {
|
| 4115 | display: block;
|
| 4116 | }
|
| 4117 |
|
| 4118 | .cds--popover-caret,
|
| 4119 | .cds--popover--auto-align.cds--popover-caret {
|
| 4120 | position: absolute;
|
| 4121 | z-index: 6000;
|
| 4122 | display: none;
|
| 4123 | background-color: var(--cds-popover-background-color, var(--cds-layer));
|
| 4124 | will-change: transform;
|
| 4125 | }
|
| 4126 |
|
| 4127 | .cds--popover--caret.cds--popover--open > .cds--popover > .cds--popover-caret {
|
| 4128 | display: block;
|
| 4129 | }
|
| 4130 |
|
| 4131 | .cds--popover--auto-align.cds--popover--caret.cds--popover--open > .cds--popover > .cds--popover-content > .cds--popover-caret {
|
| 4132 | display: block;
|
| 4133 | }
|
| 4134 |
|
| 4135 | .cds--popover--tab-tip > .cds--popover > .cds--popover-caret {
|
| 4136 | display: none;
|
| 4137 | }
|
| 4138 |
|
| 4139 | .cds--popover--bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
|
| 4140 | inset-block-end: 0;
|
| 4141 | inset-inline-start: 50%;
|
| 4142 | transform: translate(-50%, calc(100% + var(--cds-popover-offset, 0rem)));
|
| 4143 | }
|
| 4144 |
|
| 4145 | [dir=rtl] .cds--popover--bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
|
| 4146 | transform: translate(50%, calc(100% + var(--cds-popover-offset, 0rem)));
|
| 4147 | }
|
| 4148 |
|
| 4149 | .cds--popover--bottom-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
|
| 4150 | .cds--popover--bottom-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
|
| 4151 | inset-block-end: 0;
|
| 4152 | inset-inline-start: 0;
|
| 4153 | transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(100% + var(--cds-popover-offset, 0rem)));
|
| 4154 | }
|
| 4155 |
|
| 4156 | [dir=rtl] .cds--popover--bottom-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
|
| 4157 | [dir=rtl] .cds--popover--bottom-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
|
| 4158 | inset-inline-end: 0;
|
| 4159 | inset-inline-start: initial;
|
| 4160 | }
|
| 4161 |
|
| 4162 | .cds--popover--bottom-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
|
| 4163 | .cds--popover--bottom-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
|
| 4164 | inset-block-end: 0;
|
| 4165 | inset-inline-end: 0;
|
| 4166 | transform: translate(var(--cds-popover-offset, 0rem), calc(100% + var(--cds-popover-offset, 0rem)));
|
| 4167 | }
|
| 4168 |
|
| 4169 | [dir=rtl] .cds--popover--bottom-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
|
| 4170 | [dir=rtl] .cds--popover--bottom-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
|
| 4171 | inset-inline-start: 0;
|
| 4172 | }
|
| 4173 |
|
| 4174 | .cds--popover--bottom > .cds--popover > .cds--popover-content::before,
|
| 4175 | .cds--popover--bottom-left > .cds--popover > .cds--popover-content::before,
|
| 4176 | .cds--popover--bottom-start > .cds--popover > .cds--popover-content::before,
|
| 4177 | .cds--popover--bottom-right > .cds--popover > .cds--popover-content::before,
|
| 4178 | .cds--popover--bottom-end > .cds--popover > .cds--popover-content::before {
|
| 4179 | block-size: var(--cds-popover-offset, 0rem);
|
| 4180 | inset-block-start: 0;
|
| 4181 | inset-inline-end: 0;
|
| 4182 | inset-inline-start: 0;
|
| 4183 | transform: translateY(-100%);
|
| 4184 | }
|
| 4185 |
|
| 4186 | .cds--popover--bottom > .cds--popover > .cds--popover-caret,
|
| 4187 | .cds--popover--bottom-left > .cds--popover > .cds--popover-caret,
|
| 4188 | .cds--popover--bottom-start > .cds--popover > .cds--popover-caret,
|
| 4189 | .cds--popover--bottom-right > .cds--popover > .cds--popover-caret,
|
| 4190 | .cds--popover--bottom-end > .cds--popover > .cds--popover-caret {
|
| 4191 | block-size: var(--cds-popover-caret-height, 0.375rem);
|
| 4192 | clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
|
| 4193 | inline-size: var(--cds-popover-caret-width, 0.75rem);
|
| 4194 | inset-block-end: 0;
|
| 4195 | inset-inline-start: 50%;
|
| 4196 | transform: translate(-50%, var(--cds-popover-offset, 0rem));
|
| 4197 | }
|
| 4198 |
|
| 4199 | [dir=rtl] .cds--popover--bottom > .cds--popover > .cds--popover-caret,
|
| 4200 | [dir=rtl] .cds--popover--bottom-left > .cds--popover > .cds--popover-caret,
|
| 4201 | [dir=rtl] .cds--popover--bottom-start > .cds--popover > .cds--popover-caret,
|
| 4202 | [dir=rtl] .cds--popover--bottom-right > .cds--popover > .cds--popover-caret,
|
| 4203 | [dir=rtl] .cds--popover--bottom-end > .cds--popover > .cds--popover-caret {
|
| 4204 | transform: translate(50%, var(--cds-popover-offset, 0rem));
|
| 4205 | }
|
| 4206 |
|
| 4207 | .cds--popover--bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
|
| 4208 | .cds--popover--bottom-left.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
|
| 4209 | .cds--popover--bottom-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
|
| 4210 | .cds--popover--bottom-right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
|
| 4211 | .cds--popover--bottom-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
|
| 4212 | block-size: var(--cds-popover-caret-height, 0.375rem);
|
| 4213 | clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
|
| 4214 | inline-size: var(--cds-popover-caret-width, 0.75rem);
|
| 4215 | }
|
| 4216 |
|
| 4217 | .cds--popover--top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
|
| 4218 | inset-block-start: 0;
|
| 4219 | inset-inline-start: 50%;
|
| 4220 | transform: translate(-50%, calc(-100% - var(--cds-popover-offset, 0rem)));
|
| 4221 | }
|
| 4222 |
|
| 4223 | [dir=rtl] .cds--popover--top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
|
| 4224 | transform: translate(50%, calc(-100% - var(--cds-popover-offset, 0rem)));
|
| 4225 | }
|
| 4226 |
|
| 4227 | .cds--popover--top-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
|
| 4228 | .cds--popover--top-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
|
| 4229 | inset-block-start: 0;
|
| 4230 | inset-inline-start: 0;
|
| 4231 | transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-100% - var(--cds-popover-offset, 0rem)));
|
| 4232 | }
|
| 4233 |
|
| 4234 | [dir=rtl] .cds--popover--top-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
|
| 4235 | [dir=rtl] .cds--popover--top-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
|
| 4236 | inset-inline-end: 0;
|
| 4237 | inset-inline-start: initial;
|
| 4238 | }
|
| 4239 |
|
| 4240 | .cds--popover--top-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
|
| 4241 | .cds--popover--top-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
|
| 4242 | inset-block-start: 0;
|
| 4243 | inset-inline-end: 0;
|
| 4244 | transform: translate(var(--cds-popover-offset, 0rem), calc(-100% - var(--cds-popover-offset, 0rem)));
|
| 4245 | }
|
| 4246 |
|
| 4247 | [dir=rtl] .cds--popover--top-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
|
| 4248 | [dir=rtl] .cds--popover--top-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
|
| 4249 | inset-inline-start: 0;
|
| 4250 | }
|
| 4251 |
|
| 4252 | .cds--popover--top > .cds--popover > .cds--popover-content::before,
|
| 4253 | .cds--popover--top-left > .cds--popover > .cds--popover-content::before,
|
| 4254 | .cds--popover--top-start > .cds--popover > .cds--popover-content::before,
|
| 4255 | .cds--popover--top-right > .cds--popover > .cds--popover-content::before,
|
| 4256 | .cds--popover--top-end > .cds--popover > .cds--popover-content::before {
|
| 4257 | block-size: var(--cds-popover-offset, 0rem);
|
| 4258 | inset-block-end: 0;
|
| 4259 | inset-inline-end: 0;
|
| 4260 | inset-inline-start: 0;
|
| 4261 | transform: translateY(100%);
|
| 4262 | }
|
| 4263 |
|
| 4264 | .cds--popover--top > .cds--popover > .cds--popover-caret,
|
| 4265 | .cds--popover--top-left > .cds--popover > .cds--popover-caret,
|
| 4266 | .cds--popover--top-start > .cds--popover > .cds--popover-caret,
|
| 4267 | .cds--popover--top-right > .cds--popover > .cds--popover-caret,
|
| 4268 | .cds--popover--top-end > .cds--popover > .cds--popover-caret {
|
| 4269 | block-size: var(--cds-popover-caret-height, 0.375rem);
|
| 4270 | clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
|
| 4271 | inline-size: var(--cds-popover-caret-width, 0.75rem);
|
| 4272 | inset-block-start: 0;
|
| 4273 | inset-inline-start: 50%;
|
| 4274 | transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem)));
|
| 4275 | }
|
| 4276 |
|
| 4277 | [dir=rtl] .cds--popover--top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
|
| 4278 | [dir=rtl] .cds--popover--top-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
|
| 4279 | [dir=rtl] .cds--popover--top-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
|
| 4280 | [dir=rtl] .cds--popover--top-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
|
| 4281 | [dir=rtl] .cds--popover--top-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
|
| 4282 | transform: translate(50%, calc(-1 * var(--cds-popover-offset, 0rem)));
|
| 4283 | }
|
| 4284 |
|
| 4285 | .cds--popover--top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
|
| 4286 | .cds--popover--top-left.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
|
| 4287 | .cds--popover--top-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
|
| 4288 | .cds--popover--top-right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
|
| 4289 | .cds--popover--top-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
|
| 4290 | block-size: var(--cds-popover-caret-height, 0.375rem);
|
| 4291 | clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
|
| 4292 | inline-size: var(--cds-popover-caret-width, 0.75rem);
|
| 4293 | }
|
| 4294 |
|
| 4295 | .cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
|
| 4296 | inset-block-start: 50%;
|
| 4297 | inset-inline-start: 100%;
|
| 4298 | transform: translate(var(--cds-popover-offset, 0rem), -50%);
|
| 4299 | }
|
| 4300 |
|
| 4301 | .cds--popover--right-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
|
| 4302 | .cds--popover--right-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
|
| 4303 | inset-block-start: 50%;
|
| 4304 | inset-inline-start: 100%;
|
| 4305 | transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) * -1 - 16px));
|
| 4306 | }
|
| 4307 |
|
| 4308 | .cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
|
| 4309 | .cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
|
| 4310 | inset-block-end: 50%;
|
| 4311 | inset-inline-start: 100%;
|
| 4312 | transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) + 16px));
|
| 4313 | }
|
| 4314 |
|
| 4315 | [dir=rtl] .cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
|
| 4316 | [dir=rtl] .cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
|
| 4317 | [dir=rtl] .cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
|
| 4318 | [dir=rtl] .cds--popover--right-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
|
| 4319 | [dir=rtl] .cds--popover--right-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
|
| 4320 | inset-inline-end: 100%;
|
| 4321 | inset-inline-start: initial;
|
| 4322 | }
|
| 4323 |
|
| 4324 | .cds--popover--right > .cds--popover > .cds--popover-content::before,
|
| 4325 | .cds--popover--right-top > .cds--popover > .cds--popover-content::before,
|
| 4326 | .cds--popover--right-start > .cds--popover > .cds--popover-content::before,
|
| 4327 | .cds--popover--right-bottom > .cds--popover > .cds--popover-content::before,
|
| 4328 | .cds--popover--right-end > .cds--popover > .cds--popover-content::before {
|
| 4329 | inline-size: var(--cds-popover-offset, 0rem);
|
| 4330 | inset-block-end: 0;
|
| 4331 | inset-block-start: 0;
|
| 4332 | inset-inline-start: 0;
|
| 4333 | transform: translateX(-100%);
|
| 4334 | }
|
| 4335 |
|
| 4336 | .cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
|
| 4337 | .cds--popover--right-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
|
| 4338 | .cds--popover--right-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
|
| 4339 | .cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
|
| 4340 | .cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
|
| 4341 | block-size: var(--cds-popover-caret-width, 0.75rem);
|
| 4342 | clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
|
| 4343 | inline-size: var(--cds-popover-caret-height, 0.375rem);
|
| 4344 | inset-block-start: 50%;
|
| 4345 | inset-inline-start: 100%;
|
| 4346 | transform: translate(calc(var(--cds-popover-offset, 0rem) - 100%), -50%);
|
| 4347 | }
|
| 4348 |
|
| 4349 | [dir=rtl] .cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
|
| 4350 | [dir=rtl] .cds--popover--right-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
|
| 4351 | [dir=rtl] .cds--popover--right-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
|
| 4352 | [dir=rtl] .cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
|
| 4353 | [dir=rtl] .cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
|
| 4354 | inset-inline-end: 100%;
|
| 4355 | inset-inline-start: initial;
|
| 4356 | }
|
| 4357 |
|
| 4358 | .cds--popover--right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
|
| 4359 | .cds--popover--right-top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
|
| 4360 | .cds--popover--right-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
|
| 4361 | .cds--popover--right-bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
|
| 4362 | .cds--popover--right-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
|
| 4363 | block-size: var(--cds-popover-caret-width, 0.75rem);
|
| 4364 | clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
|
| 4365 | inline-size: var(--cds-popover-caret-height, 0.375rem);
|
| 4366 | }
|
| 4367 |
|
| 4368 | .cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
|
| 4369 | inset-block-start: 50%;
|
| 4370 | inset-inline-end: 100%;
|
| 4371 | transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 0.1px), -50%);
|
| 4372 | }
|
| 4373 |
|
| 4374 | .cds--popover--left-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
|
| 4375 | .cds--popover--left-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
|
| 4376 | inset-block-start: 50%;
|
| 4377 | inset-inline-end: 100%;
|
| 4378 | transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) - 16px));
|
| 4379 | }
|
| 4380 |
|
| 4381 | .cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
|
| 4382 | .cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
|
| 4383 | inset-block-end: 50%;
|
| 4384 | inset-inline-end: 100%;
|
| 4385 | transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) + 16px));
|
| 4386 | }
|
| 4387 |
|
| 4388 | [dir=rtl] .cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
|
| 4389 | [dir=rtl] .cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
|
| 4390 | [dir=rtl] .cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
|
| 4391 | [dir=rtl] .cds--popover--left-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
|
| 4392 | [dir=rtl] .cds--popover--left-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
|
| 4393 | inset-inline-end: initial;
|
| 4394 | inset-inline-start: 100%;
|
| 4395 | }
|
| 4396 |
|
| 4397 | .cds--popover--left > .cds--popover > .cds--popover-content::before,
|
| 4398 | .cds--popover--left-top > .cds--popover > .cds--popover-content::before,
|
| 4399 | .cds--popover--left-start > .cds--popover > .cds--popover-content::before,
|
| 4400 | .cds--popover--left-bottom > .cds--popover > .cds--popover-content::before,
|
| 4401 | .cds--popover--left-end > .cds--popover > .cds--popover-content::before {
|
| 4402 | inline-size: var(--cds-popover-offset, 0rem);
|
| 4403 | inset-block-end: 0;
|
| 4404 | inset-block-start: 0;
|
| 4405 | inset-inline-end: 0;
|
| 4406 | transform: translateX(100%);
|
| 4407 | }
|
| 4408 |
|
| 4409 | .cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
|
| 4410 | .cds--popover--left-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
|
| 4411 | .cds--popover--left-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
|
| 4412 | .cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
|
| 4413 | .cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
|
| 4414 | block-size: var(--cds-popover-caret-width, 0.75rem);
|
| 4415 | clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
|
| 4416 | inline-size: var(--cds-popover-caret-height, 0.375rem);
|
| 4417 | inset-block-start: 50%;
|
| 4418 | inset-inline-end: 100%;
|
| 4419 | transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 100%), -50%);
|
| 4420 | }
|
| 4421 |
|
| 4422 | [dir=rtl] .cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
|
| 4423 | [dir=rtl] .cds--popover--left-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
|
| 4424 | [dir=rtl] .cds--popover--left-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
|
| 4425 | [dir=rtl] .cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
|
| 4426 | [dir=rtl] .cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
|
| 4427 | inset-inline-end: initial;
|
| 4428 | inset-inline-start: 100%;
|
| 4429 | }
|
| 4430 |
|
| 4431 | .cds--popover--left.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
|
| 4432 | .cds--popover--left-top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
|
| 4433 | .cds--popover--left-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
|
| 4434 | .cds--popover--left-bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
|
| 4435 | .cds--popover--left-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
|
| 4436 | block-size: var(--cds-popover-caret-width, 0.75rem);
|
| 4437 | clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
|
| 4438 | inline-size: var(--cds-popover-caret-height, 0.375rem);
|
| 4439 | }
|
| 4440 |
|
| 4441 | .cds--popover--tab-tip > .cds--popover > .cds--popover-content {
|
| 4442 | border-radius: 0;
|
| 4443 | }
|
| 4444 |
|
| 4445 | .cds--popover--tab-tip .cds--popover {
|
| 4446 | will-change: filter;
|
| 4447 | }
|
| 4448 |
|
| 4449 | .cds--popover--tab-tip__button {
|
| 4450 | box-sizing: border-box;
|
| 4451 | padding: 0;
|
| 4452 | border: 0;
|
| 4453 | margin: 0;
|
| 4454 | font-family: inherit;
|
| 4455 | font-size: 100%;
|
| 4456 | vertical-align: baseline;
|
| 4457 | display: inline-block;
|
| 4458 | padding: 0;
|
| 4459 | border: 0;
|
| 4460 | -webkit-appearance: none;
|
| 4461 | -moz-appearance: none;
|
| 4462 | appearance: none;
|
| 4463 | background: none;
|
| 4464 | cursor: pointer;
|
| 4465 | text-align: start;
|
| 4466 | inline-size: 100%;
|
| 4467 | position: relative;
|
| 4468 | display: inline-flex;
|
| 4469 | align-items: center;
|
| 4470 | justify-content: center;
|
| 4471 | block-size: 2rem;
|
| 4472 | inline-size: 2rem;
|
| 4473 | }
|
| 4474 | .cds--popover--tab-tip__button *,
|
| 4475 | .cds--popover--tab-tip__button *::before,
|
| 4476 | .cds--popover--tab-tip__button *::after {
|
| 4477 | box-sizing: inherit;
|
| 4478 | }
|
| 4479 | .cds--popover--tab-tip__button::-moz-focus-inner {
|
| 4480 | border: 0;
|
| 4481 | }
|
| 4482 | .cds--popover--tab-tip__button:focus {
|
| 4483 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 4484 | outline-offset: -2px;
|
| 4485 | }
|
| 4486 | @media screen and (prefers-contrast) {
|
| 4487 | .cds--popover--tab-tip__button:focus {
|
| 4488 | outline-style: dotted;
|
| 4489 | }
|
| 4490 | }
|
| 4491 | .cds--popover--tab-tip__button:hover {
|
| 4492 | background-color: var(--cds-layer-hover);
|
| 4493 | }
|
| 4494 |
|
| 4495 | .cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button {
|
| 4496 | background: var(--cds-layer);
|
| 4497 | box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
|
| 4498 | }
|
| 4499 |
|
| 4500 | .cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button:not(:focus)::after {
|
| 4501 | position: absolute;
|
| 4502 | z-index: 6001;
|
| 4503 | background: var(--cds-layer);
|
| 4504 | block-size: 2px;
|
| 4505 | content: "";
|
| 4506 | inline-size: 100%;
|
| 4507 | inset-block-end: 0;
|
| 4508 | }
|
| 4509 |
|
| 4510 | .cds--popover--tab-tip__button svg {
|
| 4511 | fill: var(--cds-icon-primary, #161616);
|
| 4512 | }
|
| 4513 |
|
| 4514 | .cds--tooltip {
|
| 4515 | --cds-popover-offset: 12px;
|
| 4516 | }
|
| 4517 |
|
| 4518 | .cds--tooltip-content {
|
| 4519 | font-size: var(--cds-body-01-font-size, 0.875rem);
|
| 4520 | font-weight: var(--cds-body-01-font-weight, 400);
|
| 4521 | line-height: var(--cds-body-01-line-height, 1.42857);
|
| 4522 | letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
|
| 4523 | padding: var(--cds-tooltip-padding-block, 1rem) var(--cds-tooltip-padding-inline, 1rem);
|
| 4524 | color: var(--cds-text-inverse, #ffffff);
|
| 4525 | max-inline-size: 18rem;
|
| 4526 | }
|
| 4527 |
|
| 4528 | .cds--icon-tooltip {
|
| 4529 | --cds-tooltip-padding-block: 0.125rem;
|
| 4530 | --cds-popover-caret-width: 0.5rem;
|
| 4531 | --cds-popover-caret-height: 0.25rem;
|
| 4532 | --cds-popover-offset: 0.5rem;
|
| 4533 | }
|
| 4534 |
|
| 4535 | .cds--icon-tooltip .cds--tooltip-content {
|
| 4536 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 4537 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 4538 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 4539 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 4540 | }
|
| 4541 |
|
| 4542 | .cds--definition-term {
|
| 4543 | box-sizing: border-box;
|
| 4544 | padding: 0;
|
| 4545 | border: 0;
|
| 4546 | margin: 0;
|
| 4547 | font-family: inherit;
|
| 4548 | font-size: 100%;
|
| 4549 | vertical-align: baseline;
|
| 4550 | display: inline-block;
|
| 4551 | padding: 0;
|
| 4552 | border: 0;
|
| 4553 | -webkit-appearance: none;
|
| 4554 | -moz-appearance: none;
|
| 4555 | appearance: none;
|
| 4556 | background: none;
|
| 4557 | cursor: pointer;
|
| 4558 | text-align: start;
|
| 4559 | inline-size: 100%;
|
| 4560 | border-radius: 0;
|
| 4561 | border-block-end: 1px dotted var(--cds-border-strong);
|
| 4562 | color: var(--cds-text-primary, #161616);
|
| 4563 | }
|
| 4564 | .cds--definition-term *,
|
| 4565 | .cds--definition-term *::before,
|
| 4566 | .cds--definition-term *::after {
|
| 4567 | box-sizing: inherit;
|
| 4568 | }
|
| 4569 | .cds--definition-term::-moz-focus-inner {
|
| 4570 | border: 0;
|
| 4571 | }
|
| 4572 |
|
| 4573 | .cds--definition-term:focus {
|
| 4574 | outline: 1px solid var(--cds-focus, #0f62fe);
|
| 4575 | border-block-end-color: var(--cds-border-interactive, #0f62fe);
|
| 4576 | }
|
| 4577 | @media screen and (prefers-contrast) {
|
| 4578 | .cds--definition-term:focus {
|
| 4579 | outline-style: dotted;
|
| 4580 | }
|
| 4581 | }
|
| 4582 |
|
| 4583 | .cds--definition-term:hover {
|
| 4584 | border-block-end-color: var(--cds-border-interactive, #0f62fe);
|
| 4585 | }
|
| 4586 |
|
| 4587 | .cds--definition-tooltip {
|
| 4588 | font-size: var(--cds-body-01-font-size, 0.875rem);
|
| 4589 | font-weight: var(--cds-body-01-font-weight, 400);
|
| 4590 | line-height: var(--cds-body-01-line-height, 1.42857);
|
| 4591 | letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
|
| 4592 | padding: 0.5rem 1rem;
|
| 4593 | max-inline-size: 11rem;
|
| 4594 | }
|
| 4595 |
|
| 4596 | .cds--btn {
|
| 4597 | --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-lg)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-2xl)));
|
| 4598 | --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
|
| 4599 | --temp-1lh: (
|
| 4600 | var(--cds-body-compact-01-line-height, 1.28572) * 1em
|
| 4601 | );
|
| 4602 | --temp-expressive-1lh: (
|
| 4603 | var(--cds-body-compact-02-line-height, 1.375) * 1em
|
| 4604 | );
|
| 4605 | --temp-padding-block-max: calc(
|
| 4606 | (var(--cds-layout-size-height-lg) - var(--temp-1lh)) / 2 -
|
| 4607 | 0.0625rem
|
| 4608 | );
|
| 4609 | box-sizing: border-box;
|
| 4610 | padding: 0;
|
| 4611 | border: 0;
|
| 4612 | margin: 0;
|
| 4613 | font-family: inherit;
|
| 4614 | font-size: 100%;
|
| 4615 | vertical-align: baseline;
|
| 4616 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 4617 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 4618 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 4619 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 4620 | position: relative;
|
| 4621 | display: inline-flex;
|
| 4622 | flex-shrink: 0;
|
| 4623 | justify-content: space-between;
|
| 4624 | border-radius: 0;
|
| 4625 | margin: 0;
|
| 4626 | cursor: pointer;
|
| 4627 | inline-size: -moz-max-content;
|
| 4628 | inline-size: max-content;
|
| 4629 | max-inline-size: 20rem;
|
| 4630 | min-block-size: var(--cds-layout-size-height-local);
|
| 4631 | outline: none;
|
| 4632 | padding-block: min((var(--cds-layout-size-height-local) - var(--temp-1lh)) / 2 - 0.0625rem, var(--temp-padding-block-max));
|
| 4633 | padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) * 3 + 1rem - 0.0625rem);
|
| 4634 | padding-inline-start: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
|
| 4635 | text-align: start;
|
| 4636 | text-decoration: none;
|
| 4637 | transition: background 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0, 0, 0.38, 0.9), outline 70ms cubic-bezier(0, 0, 0.38, 0.9);
|
| 4638 | vertical-align: top;
|
| 4639 | }
|
| 4640 | .cds--btn *,
|
| 4641 | .cds--btn *::before,
|
| 4642 | .cds--btn *::after {
|
| 4643 | box-sizing: inherit;
|
| 4644 | }
|
| 4645 | .cds--btn:disabled, .cds--btn:hover:disabled, .cds--btn:focus:disabled, .cds--btn.cds--btn--disabled, .cds--btn.cds--btn--disabled:hover, .cds--btn.cds--btn--disabled:focus {
|
| 4646 | border-color: var(--cds-button-disabled, #c6c6c6);
|
| 4647 | background: var(--cds-button-disabled, #c6c6c6);
|
| 4648 | box-shadow: none;
|
| 4649 | color: var(--cds-text-on-color-disabled, #8d8d8d);
|
| 4650 | cursor: not-allowed;
|
| 4651 | }
|
| 4652 | .cds--btn .cds--btn__icon {
|
| 4653 | position: absolute;
|
| 4654 | flex-shrink: 0;
|
| 4655 | block-size: 1rem;
|
| 4656 | inline-size: 1rem;
|
| 4657 | inset-block-start: min((var(--cds-layout-size-height-local) - 1rem) / 2 - 0.0625rem, var(--temp-padding-block-max));
|
| 4658 | inset-inline-end: var(--cds-layout-density-padding-inline-local);
|
| 4659 | margin-block-start: 0.0625rem;
|
| 4660 | }
|
| 4661 |
|
| 4662 | .cds--btn::-moz-focus-inner {
|
| 4663 | padding: 0;
|
| 4664 | border: 0;
|
| 4665 | }
|
| 4666 |
|
| 4667 | .cds--btn--primary {
|
| 4668 | border-width: 1px;
|
| 4669 | border-style: solid;
|
| 4670 | border-color: transparent;
|
| 4671 | background-color: var(--cds-button-primary, #0f62fe);
|
| 4672 | color: var(--cds-text-on-color, #ffffff);
|
| 4673 | }
|
| 4674 | .cds--btn--primary:hover {
|
| 4675 | background-color: var(--cds-button-primary-hover, #0050e6);
|
| 4676 | }
|
| 4677 | .cds--btn--primary:focus {
|
| 4678 | border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
|
| 4679 | box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
|
| 4680 | }
|
| 4681 | .cds--btn--primary:active {
|
| 4682 | background-color: var(--cds-button-primary-active, #002d9c);
|
| 4683 | }
|
| 4684 | .cds--btn--primary .cds--btn__icon,
|
| 4685 | .cds--btn--primary .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
|
| 4686 | fill: currentColor;
|
| 4687 | }
|
| 4688 | .cds--btn--primary:hover {
|
| 4689 | color: var(--cds-text-on-color, #ffffff);
|
| 4690 | }
|
| 4691 |
|
| 4692 | .cds--btn--secondary {
|
| 4693 | border-width: 1px;
|
| 4694 | border-style: solid;
|
| 4695 | border-color: transparent;
|
| 4696 | background-color: var(--cds-button-secondary, #393939);
|
| 4697 | color: var(--cds-text-on-color, #ffffff);
|
| 4698 | }
|
| 4699 | .cds--btn--secondary:hover {
|
| 4700 | background-color: var(--cds-button-secondary-hover, #474747);
|
| 4701 | }
|
| 4702 | .cds--btn--secondary:focus {
|
| 4703 | border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
|
| 4704 | box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
|
| 4705 | }
|
| 4706 | .cds--btn--secondary:active {
|
| 4707 | background-color: var(--cds-button-secondary-active, #6f6f6f);
|
| 4708 | }
|
| 4709 | .cds--btn--secondary .cds--btn__icon,
|
| 4710 | .cds--btn--secondary .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
|
| 4711 | fill: currentColor;
|
| 4712 | }
|
| 4713 | .cds--btn--secondary:hover, .cds--btn--secondary:focus {
|
| 4714 | color: var(--cds-text-on-color, #ffffff);
|
| 4715 | }
|
| 4716 |
|
| 4717 | .cds--btn--tertiary {
|
| 4718 | border-width: 1px;
|
| 4719 | border-style: solid;
|
| 4720 | border-color: var(--cds-button-tertiary, #0f62fe);
|
| 4721 | background-color: transparent;
|
| 4722 | color: var(--cds-button-tertiary, #0f62fe);
|
| 4723 | }
|
| 4724 | .cds--btn--tertiary:hover {
|
| 4725 | background-color: var(--cds-button-tertiary-hover, #0050e6);
|
| 4726 | }
|
| 4727 | .cds--btn--tertiary:focus {
|
| 4728 | border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
|
| 4729 | box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
|
| 4730 | }
|
| 4731 | .cds--btn--tertiary:active {
|
| 4732 | background-color: var(--cds-button-tertiary-active, #002d9c);
|
| 4733 | }
|
| 4734 | .cds--btn--tertiary .cds--btn__icon,
|
| 4735 | .cds--btn--tertiary .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
|
| 4736 | fill: currentColor;
|
| 4737 | }
|
| 4738 | .cds--btn--tertiary:hover {
|
| 4739 | color: var(--cds-text-inverse, #ffffff);
|
| 4740 | }
|
| 4741 | .cds--btn--tertiary:focus {
|
| 4742 | background-color: var(--cds-button-tertiary, #0f62fe);
|
| 4743 | color: var(--cds-text-inverse, #ffffff);
|
| 4744 | }
|
| 4745 | .cds--btn--tertiary:active {
|
| 4746 | border-color: transparent;
|
| 4747 | background-color: var(--cds-button-tertiary-active, #002d9c);
|
| 4748 | color: var(--cds-text-inverse, #ffffff);
|
| 4749 | }
|
| 4750 | .cds--btn--tertiary:disabled, .cds--btn--tertiary:hover:disabled, .cds--btn--tertiary:focus:disabled, .cds--btn--tertiary.cds--btn--disabled, .cds--btn--tertiary.cds--btn--disabled:hover, .cds--btn--tertiary.cds--btn--disabled:focus {
|
| 4751 | background: transparent;
|
| 4752 | color: var(--cds-text-on-color-disabled, #8d8d8d);
|
| 4753 | outline: none;
|
| 4754 | }
|
| 4755 |
|
| 4756 | .cds--btn--ghost {
|
| 4757 | border-width: 1px;
|
| 4758 | border-style: solid;
|
| 4759 | border-color: transparent;
|
| 4760 | background-color: transparent;
|
| 4761 | color: var(--cds-link-primary, #0f62fe);
|
| 4762 | padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
|
| 4763 | }
|
| 4764 | .cds--btn--ghost:hover {
|
| 4765 | background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
|
| 4766 | }
|
| 4767 | .cds--btn--ghost:focus {
|
| 4768 | border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
|
| 4769 | box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
|
| 4770 | }
|
| 4771 | .cds--btn--ghost:active {
|
| 4772 | background-color: var(--cds-background-active, rgba(141, 141, 141, 0.5));
|
| 4773 | }
|
| 4774 | .cds--btn--ghost .cds--btn__icon,
|
| 4775 | .cds--btn--ghost .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
|
| 4776 | fill: currentColor;
|
| 4777 | }
|
| 4778 | .cds--btn--ghost .cds--btn__icon {
|
| 4779 | position: static;
|
| 4780 | margin-inline-start: 0.5rem;
|
| 4781 | }
|
| 4782 | .cds--btn--ghost:hover, .cds--btn--ghost:active {
|
| 4783 | color: var(--cds-link-primary-hover, #0043ce);
|
| 4784 | }
|
| 4785 | .cds--btn--ghost:active {
|
| 4786 | background-color: var(--cds-background-active, rgba(141, 141, 141, 0.5));
|
| 4787 | }
|
| 4788 | .cds--btn--ghost:disabled, .cds--btn--ghost:hover:disabled, .cds--btn--ghost:focus:disabled, .cds--btn--ghost.cds--btn--disabled, .cds--btn--ghost.cds--btn--disabled:hover, .cds--btn--ghost.cds--btn--disabled:focus {
|
| 4789 | border-color: transparent;
|
| 4790 | background: transparent;
|
| 4791 | color: var(--cds-text-on-color-disabled, #8d8d8d);
|
| 4792 | outline: none;
|
| 4793 | }
|
| 4794 | .cds--btn--ghost:not([disabled]) svg {
|
| 4795 | fill: var(--cds-icon-primary, #161616);
|
| 4796 | }
|
| 4797 |
|
| 4798 | .cds--btn--icon-only {
|
| 4799 | justify-content: center;
|
| 4800 | padding: 0;
|
| 4801 | block-size: var(--cds-layout-size-height-local);
|
| 4802 | inline-size: var(--cds-layout-size-height-local);
|
| 4803 | padding-block-start: min((var(--cds-layout-size-height-local) - 1rem) / 2 - 0.0625rem, var(--temp-padding-block-max));
|
| 4804 | }
|
| 4805 | .cds--btn--icon-only > :first-child {
|
| 4806 | margin-block-start: 0.0625rem;
|
| 4807 | min-inline-size: 1rem;
|
| 4808 | }
|
| 4809 | .cds--btn--icon-only .cds--btn__icon {
|
| 4810 | position: static;
|
| 4811 | }
|
| 4812 | .cds--btn--icon-only.cds--btn--ghost .cds--btn__icon, .cds--btn--icon-only.cds--btn--danger--ghost .cds--btn__icon {
|
| 4813 | margin: 0;
|
| 4814 | }
|
| 4815 |
|
| 4816 | .cds--btn--sm:not(.cds--btn--icon-only) .cds--btn__icon,
|
| 4817 | .cds--btn--md:not(.cds--btn--icon-only) .cds--btn__icon {
|
| 4818 | margin-block-start: 0;
|
| 4819 | }
|
| 4820 |
|
| 4821 | .cds--btn--icon-only.cds--btn--selected {
|
| 4822 | background: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
|
| 4823 | }
|
| 4824 |
|
| 4825 | .cds--btn path[data-icon-path=inner-path] {
|
| 4826 | fill: none;
|
| 4827 | }
|
| 4828 |
|
| 4829 | .cds--btn--ghost.cds--btn--icon-only .cds--btn__icon path:not([data-icon-path]):not([fill=none]),
|
| 4830 | .cds--btn--ghost.cds--btn--icon-only .cds--btn__icon {
|
| 4831 | fill: var(--cds-icon-primary, #161616);
|
| 4832 | }
|
| 4833 |
|
| 4834 | .cds--btn--ghost.cds--btn--icon-only[disabled] .cds--btn__icon path:not([data-icon-path]):not([fill=none]),
|
| 4835 | .cds--btn--ghost.cds--btn--icon-only[disabled] .cds--btn__icon,
|
| 4836 | .cds--btn.cds--btn--icon-only.cds--btn--ghost[disabled]:hover .cds--btn__icon {
|
| 4837 | fill: var(--cds-icon-on-color-disabled, #8d8d8d);
|
| 4838 | }
|
| 4839 |
|
| 4840 | .cds--btn--ghost.cds--btn--icon-only[disabled] {
|
| 4841 | cursor: not-allowed;
|
| 4842 | }
|
| 4843 |
|
| 4844 | .cds--icon-tooltip--disabled .cds--tooltip-trigger__wrapper {
|
| 4845 | cursor: not-allowed;
|
| 4846 | }
|
| 4847 |
|
| 4848 | .cds--icon-tooltip--disabled .cds--btn--icon-only[disabled] {
|
| 4849 | pointer-events: none;
|
| 4850 | }
|
| 4851 |
|
| 4852 | .cds--btn--danger {
|
| 4853 | border-width: 1px;
|
| 4854 | border-style: solid;
|
| 4855 | border-color: transparent;
|
| 4856 | background-color: var(--cds-button-danger-primary, #da1e28);
|
| 4857 | color: var(--cds-text-on-color, #ffffff);
|
| 4858 | }
|
| 4859 | .cds--btn--danger:hover {
|
| 4860 | background-color: var(--cds-button-danger-hover, #b81921);
|
| 4861 | }
|
| 4862 | .cds--btn--danger:focus {
|
| 4863 | border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
|
| 4864 | box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
|
| 4865 | }
|
| 4866 | .cds--btn--danger:active {
|
| 4867 | background-color: var(--cds-button-danger-active, #750e13);
|
| 4868 | }
|
| 4869 | .cds--btn--danger .cds--btn__icon,
|
| 4870 | .cds--btn--danger .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
|
| 4871 | fill: currentColor;
|
| 4872 | }
|
| 4873 | .cds--btn--danger:hover {
|
| 4874 | color: var(--cds-text-on-color, #ffffff);
|
| 4875 | }
|
| 4876 | .cds--btn--danger--tertiary {
|
| 4877 | border-width: 1px;
|
| 4878 | border-style: solid;
|
| 4879 | border-color: var(--cds-button-danger-secondary, #da1e28);
|
| 4880 | background-color: transparent;
|
| 4881 | color: var(--cds-button-danger-secondary, #da1e28);
|
| 4882 | }
|
| 4883 | .cds--btn--danger--tertiary:hover {
|
| 4884 | background-color: var(--cds-button-danger-hover, #b81921);
|
| 4885 | }
|
| 4886 | .cds--btn--danger--tertiary:focus {
|
| 4887 | border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
|
| 4888 | box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
|
| 4889 | }
|
| 4890 | .cds--btn--danger--tertiary:active {
|
| 4891 | background-color: var(--cds-button-danger-active, #750e13);
|
| 4892 | }
|
| 4893 | .cds--btn--danger--tertiary .cds--btn__icon,
|
| 4894 | .cds--btn--danger--tertiary .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
|
| 4895 | fill: currentColor;
|
| 4896 | }
|
| 4897 | .cds--btn--danger--tertiary:hover {
|
| 4898 | border-color: var(--cds-button-danger-hover, #b81921);
|
| 4899 | color: var(--cds-text-on-color, #ffffff);
|
| 4900 | }
|
| 4901 | .cds--btn--danger--tertiary:focus {
|
| 4902 | background-color: var(--cds-button-danger-primary, #da1e28);
|
| 4903 | color: var(--cds-text-on-color, #ffffff);
|
| 4904 | }
|
| 4905 | .cds--btn--danger--tertiary:active {
|
| 4906 | border-color: var(--cds-button-danger-active, #750e13);
|
| 4907 | background-color: var(--cds-button-danger-active, #750e13);
|
| 4908 | color: var(--cds-text-on-color, #ffffff);
|
| 4909 | }
|
| 4910 | .cds--btn--danger--tertiary:disabled, .cds--btn--danger--tertiary:hover:disabled, .cds--btn--danger--tertiary:focus:disabled, .cds--btn--danger--tertiary.cds--btn--disabled, .cds--btn--danger--tertiary.cds--btn--disabled:hover, .cds--btn--danger--tertiary.cds--btn--disabled:focus {
|
| 4911 | background: transparent;
|
| 4912 | color: var(--cds-text-on-color-disabled, #8d8d8d);
|
| 4913 | outline: none;
|
| 4914 | }
|
| 4915 | .cds--btn--danger--ghost {
|
| 4916 | border-width: 1px;
|
| 4917 | border-style: solid;
|
| 4918 | border-color: transparent;
|
| 4919 | background-color: transparent;
|
| 4920 | color: var(--cds-button-danger-secondary, #da1e28);
|
| 4921 | padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
|
| 4922 | }
|
| 4923 | .cds--btn--danger--ghost:hover {
|
| 4924 | background-color: var(--cds-button-danger-hover, #b81921);
|
| 4925 | }
|
| 4926 | .cds--btn--danger--ghost:focus {
|
| 4927 | border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
|
| 4928 | box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
|
| 4929 | }
|
| 4930 | .cds--btn--danger--ghost:active {
|
| 4931 | background-color: var(--cds-button-danger-active, #750e13);
|
| 4932 | }
|
| 4933 | .cds--btn--danger--ghost .cds--btn__icon,
|
| 4934 | .cds--btn--danger--ghost .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
|
| 4935 | fill: currentColor;
|
| 4936 | }
|
| 4937 | .cds--btn--danger--ghost .cds--btn__icon {
|
| 4938 | position: static;
|
| 4939 | margin-inline-start: 0.5rem;
|
| 4940 | }
|
| 4941 | .cds--btn--danger--ghost:hover, .cds--btn--danger--ghost:active {
|
| 4942 | color: var(--cds-text-on-color, #ffffff);
|
| 4943 | }
|
| 4944 | .cds--btn--danger--ghost:disabled, .cds--btn--danger--ghost:hover:disabled, .cds--btn--danger--ghost:focus:disabled, .cds--btn--danger--ghost.cds--btn--disabled, .cds--btn--danger--ghost.cds--btn--disabled:hover, .cds--btn--danger--ghost.cds--btn--disabled:focus {
|
| 4945 | border-color: transparent;
|
| 4946 | background: transparent;
|
| 4947 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 4948 | outline: none;
|
| 4949 | }
|
| 4950 |
|
| 4951 | .cds--btn--expressive {
|
| 4952 | font-size: var(--cds-body-compact-02-font-size, 1rem);
|
| 4953 | font-weight: var(--cds-body-compact-02-font-weight, 400);
|
| 4954 | line-height: var(--cds-body-compact-02-line-height, 1.375);
|
| 4955 | letter-spacing: var(--cds-body-compact-02-letter-spacing, 0);
|
| 4956 | padding-block: min((var(--cds-layout-size-height-local) - var(--temp-expressive-1lh)) / 2 - 0.0625rem, var(--temp-padding-block-max));
|
| 4957 | }
|
| 4958 |
|
| 4959 | .cds--btn--icon-only.cds--btn--expressive {
|
| 4960 | padding: 12px 13px;
|
| 4961 | }
|
| 4962 |
|
| 4963 | .cds--btn.cds--btn--expressive .cds--btn__icon {
|
| 4964 | block-size: 1.25rem;
|
| 4965 | inline-size: 1.25rem;
|
| 4966 | }
|
| 4967 |
|
| 4968 | .cds--btn-set .cds--btn.cds--btn--expressive {
|
| 4969 | max-inline-size: 20rem;
|
| 4970 | }
|
| 4971 |
|
| 4972 | .cds--btn.cds--skeleton {
|
| 4973 | position: relative;
|
| 4974 | padding: 0;
|
| 4975 | border: none;
|
| 4976 | background: var(--cds-skeleton-background, #e8e8e8);
|
| 4977 | box-shadow: none;
|
| 4978 | pointer-events: none;
|
| 4979 | inline-size: 9.375rem;
|
| 4980 | }
|
| 4981 | .cds--btn.cds--skeleton:hover, .cds--btn.cds--skeleton:focus, .cds--btn.cds--skeleton:active {
|
| 4982 | border: none;
|
| 4983 | cursor: default;
|
| 4984 | outline: none;
|
| 4985 | }
|
| 4986 | .cds--btn.cds--skeleton::before {
|
| 4987 | position: absolute;
|
| 4988 | animation: 3000ms ease-in-out cds--skeleton infinite;
|
| 4989 | background: var(--cds-skeleton-element, #c6c6c6);
|
| 4990 | block-size: 100%;
|
| 4991 | content: "";
|
| 4992 | inline-size: 100%;
|
| 4993 | will-change: transform-origin, transform, opacity;
|
| 4994 | }
|
| 4995 | @media (prefers-reduced-motion: reduce) {
|
| 4996 | .cds--btn.cds--skeleton::before {
|
| 4997 | animation: none;
|
| 4998 | }
|
| 4999 | }
|
| 5000 |
|
| 5001 | .cds--btn-set {
|
| 5002 | display: flex;
|
| 5003 | }
|
| 5004 |
|
| 5005 | .cds--btn-set--stacked {
|
| 5006 | flex-direction: column;
|
| 5007 | }
|
| 5008 |
|
| 5009 | .cds--btn-set .cds--btn {
|
| 5010 | inline-size: 100%;
|
| 5011 | max-inline-size: 12.25rem;
|
| 5012 | }
|
| 5013 | .cds--btn-set .cds--btn:not(:focus) {
|
| 5014 | box-shadow: -0.0625rem 0 0 0 var(--cds-button-separator, #e0e0e0);
|
| 5015 | }
|
| 5016 | .cds--btn-set .cds--btn:first-of-type:not(:focus) {
|
| 5017 | box-shadow: inherit;
|
| 5018 | }
|
| 5019 |
|
| 5020 | .cds--btn-set .cds--btn:focus + .cds--btn {
|
| 5021 | box-shadow: inherit;
|
| 5022 | }
|
| 5023 |
|
| 5024 | .cds--btn-set--stacked .cds--btn:not(:focus) {
|
| 5025 | box-shadow: 0 -0.0625rem 0 0 var(--cds-button-separator, #e0e0e0);
|
| 5026 | }
|
| 5027 |
|
| 5028 | .cds--btn-set--stacked .cds--btn:first-of-type:not(:focus) {
|
| 5029 | box-shadow: inherit;
|
| 5030 | }
|
| 5031 |
|
| 5032 | .cds--btn-set .cds--btn.cds--btn--disabled {
|
| 5033 | box-shadow: -0.0625rem 0 0 0 var(--cds-icon-on-color-disabled, #8d8d8d);
|
| 5034 | }
|
| 5035 | .cds--btn-set .cds--btn.cds--btn--disabled:first-of-type {
|
| 5036 | box-shadow: none;
|
| 5037 | }
|
| 5038 |
|
| 5039 | .cds--btn-set--stacked .cds--btn.cds--btn--disabled {
|
| 5040 | box-shadow: 0 -0.0625rem 0 0 var(--cds-layer-selected-disabled, #8d8d8d);
|
| 5041 | }
|
| 5042 | .cds--btn-set--stacked .cds--btn.cds--btn--disabled:first-of-type {
|
| 5043 | box-shadow: none;
|
| 5044 | }
|
| 5045 |
|
| 5046 | .cds--btn-set .cds--btn.cds--btn--loading {
|
| 5047 | border-color: transparent;
|
| 5048 | background-color: transparent;
|
| 5049 | box-shadow: none;
|
| 5050 | }
|
| 5051 |
|
| 5052 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 5053 | .cds--btn:focus {
|
| 5054 | color: Highlight;
|
| 5055 | outline: 1px solid Highlight;
|
| 5056 | }
|
| 5057 | }
|
| 5058 |
|
| 5059 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 5060 | .cds--btn--ghost.cds--btn--icon-only .cds--btn__icon path:not([data-icon-path]):not([fill=none]),
|
| 5061 | .cds--btn--ghost.cds--btn--icon-only .cds--btn__icon {
|
| 5062 | fill: ButtonText;
|
| 5063 | }
|
| 5064 | }
|
| 5065 |
|
| 5066 | [dir=rtl] .cds--btn-set .cds--btn:not(:focus) {
|
| 5067 | box-shadow: 0.0625rem 0 0 0 var(--cds-button-separator, #e0e0e0);
|
| 5068 | }
|
| 5069 |
|
| 5070 | .cds--toggletip-label {
|
| 5071 | font-size: var(--cds-body-01-font-size, 0.875rem);
|
| 5072 | font-weight: var(--cds-body-01-font-weight, 400);
|
| 5073 | line-height: var(--cds-body-01-line-height, 1.42857);
|
| 5074 | letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
|
| 5075 | color: var(--cds-text-secondary, #525252);
|
| 5076 | margin-inline-end: 0.5rem;
|
| 5077 | }
|
| 5078 |
|
| 5079 | .cds--toggletip-button {
|
| 5080 | box-sizing: border-box;
|
| 5081 | padding: 0;
|
| 5082 | border: 0;
|
| 5083 | margin: 0;
|
| 5084 | font-family: inherit;
|
| 5085 | font-size: 100%;
|
| 5086 | vertical-align: baseline;
|
| 5087 | display: inline-block;
|
| 5088 | padding: 0;
|
| 5089 | border: 0;
|
| 5090 | -webkit-appearance: none;
|
| 5091 | -moz-appearance: none;
|
| 5092 | appearance: none;
|
| 5093 | background: none;
|
| 5094 | cursor: pointer;
|
| 5095 | text-align: start;
|
| 5096 | inline-size: 100%;
|
| 5097 | display: flex;
|
| 5098 | align-items: center;
|
| 5099 | }
|
| 5100 | .cds--toggletip-button *,
|
| 5101 | .cds--toggletip-button *::before,
|
| 5102 | .cds--toggletip-button *::after {
|
| 5103 | box-sizing: inherit;
|
| 5104 | }
|
| 5105 | .cds--toggletip-button::-moz-focus-inner {
|
| 5106 | border: 0;
|
| 5107 | }
|
| 5108 |
|
| 5109 | .cds--toggletip-button svg {
|
| 5110 | fill: var(--cds-icon-secondary, #525252);
|
| 5111 | }
|
| 5112 |
|
| 5113 | .cds--toggletip-button:hover svg,
|
| 5114 | .cds--toggletip--open .cds--toggletip-button svg {
|
| 5115 | fill: var(--cds-icon-primary, #161616);
|
| 5116 | }
|
| 5117 |
|
| 5118 | .cds--toggletip-button:focus {
|
| 5119 | outline: 1px solid var(--cds-focus, #0f62fe);
|
| 5120 | }
|
| 5121 | @media screen and (prefers-contrast) {
|
| 5122 | .cds--toggletip-button:focus {
|
| 5123 | outline-style: dotted;
|
| 5124 | }
|
| 5125 | }
|
| 5126 |
|
| 5127 | .cds--toggletip {
|
| 5128 | --cds-popover-offset: 0.8125rem;
|
| 5129 | }
|
| 5130 |
|
| 5131 | .cds--toggletip-content {
|
| 5132 | --cds-button-focus-color: var(--cds-focus-inverse, #ffffff);
|
| 5133 | --cds-link-text-color: var(--cds-link-inverse, #78a9ff);
|
| 5134 | --cds-link-hover-text-color: var(--cds-link-inverse-hover, #a6c8ff);
|
| 5135 | --cds-link-visited-text-color: var(--cds-link-inverse-visited, #be95ff);
|
| 5136 | --cds-link-focus-text-color: var(--cds-focus-inverse, #ffffff);
|
| 5137 | font-size: var(--cds-body-01-font-size, 0.875rem);
|
| 5138 | font-weight: var(--cds-body-01-font-weight, 400);
|
| 5139 | line-height: var(--cds-body-01-line-height, 1.42857);
|
| 5140 | letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
|
| 5141 | display: grid;
|
| 5142 | padding: 1rem;
|
| 5143 | max-inline-size: 18rem;
|
| 5144 | row-gap: 1rem;
|
| 5145 | }
|
| 5146 |
|
| 5147 | .cds--toggletip-content p {
|
| 5148 | font-size: var(--cds-body-01-font-size, 0.875rem);
|
| 5149 | font-weight: var(--cds-body-01-font-weight, 400);
|
| 5150 | line-height: var(--cds-body-01-line-height, 1.42857);
|
| 5151 | letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
|
| 5152 | }
|
| 5153 |
|
| 5154 | .cds--toggletip-actions {
|
| 5155 | display: flex;
|
| 5156 | align-items: center;
|
| 5157 | justify-content: space-between;
|
| 5158 | -moz-column-gap: 1rem;
|
| 5159 | column-gap: 1rem;
|
| 5160 | }
|
| 5161 |
|
| 5162 | .cds--slug {
|
| 5163 | display: flex;
|
| 5164 | }
|
| 5165 |
|
| 5166 | .cds--slug:has(> .cds--popover--open) {
|
| 5167 | z-index: 2;
|
| 5168 | }
|
| 5169 |
|
| 5170 | .cds--slug .cds--slug__button {
|
| 5171 | position: relative;
|
| 5172 | display: flex;
|
| 5173 | align-items: center;
|
| 5174 | justify-content: center;
|
| 5175 | border: 1px solid var(--cds-border-inverse, #161616);
|
| 5176 | background: transparent;
|
| 5177 | color: var(--cds-text-primary, #161616);
|
| 5178 | font-weight: 600;
|
| 5179 | outline: none;
|
| 5180 | transition: color 70ms cubic-bezier(0, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9), background 70ms cubic-bezier(0, 0, 0.38, 0.9);
|
| 5181 | }
|
| 5182 | .cds--slug .cds--slug__button--mini {
|
| 5183 | height: 1rem;
|
| 5184 | width: 1rem;
|
| 5185 | font-size: 0.5625rem;
|
| 5186 | line-height: 0.75rem;
|
| 5187 | }
|
| 5188 | .cds--slug .cds--slug__button--2xs {
|
| 5189 | height: 1.25rem;
|
| 5190 | width: 1.25rem;
|
| 5191 | font-size: 0.75rem;
|
| 5192 | line-height: 1rem;
|
| 5193 | }
|
| 5194 | .cds--slug .cds--slug__button--xs {
|
| 5195 | height: 1.5rem;
|
| 5196 | width: 1.5rem;
|
| 5197 | font-size: 0.75rem;
|
| 5198 | line-height: 1rem;
|
| 5199 | }
|
| 5200 | .cds--slug .cds--slug__button--sm {
|
| 5201 | height: 2rem;
|
| 5202 | width: 2rem;
|
| 5203 | font-size: 1rem;
|
| 5204 | line-height: 1.3125rem;
|
| 5205 | }
|
| 5206 | .cds--slug .cds--slug__button--md {
|
| 5207 | height: 2.5rem;
|
| 5208 | width: 2.5rem;
|
| 5209 | font-size: 1rem;
|
| 5210 | line-height: 1.3125rem;
|
| 5211 | }
|
| 5212 | .cds--slug .cds--slug__button--lg {
|
| 5213 | height: 3rem;
|
| 5214 | width: 3rem;
|
| 5215 | font-size: 1rem;
|
| 5216 | line-height: 1.3125rem;
|
| 5217 | }
|
| 5218 | .cds--slug .cds--slug__button--xl {
|
| 5219 | height: 4rem;
|
| 5220 | width: 4rem;
|
| 5221 | font-size: 1.25rem;
|
| 5222 | line-height: 1.625rem;
|
| 5223 | }
|
| 5224 |
|
| 5225 | .cds--slug__button--mini::after,
|
| 5226 | .cds--slug__button--2xs::after {
|
| 5227 | position: absolute;
|
| 5228 | display: block;
|
| 5229 | block-size: 24px;
|
| 5230 | content: "";
|
| 5231 | inline-size: 24px;
|
| 5232 | }
|
| 5233 |
|
| 5234 | .cds--slug .cds--slug__button:focus {
|
| 5235 | border: 1px solid var(--cds-focus, #0f62fe);
|
| 5236 | box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
|
| 5237 | }
|
| 5238 |
|
| 5239 | .cds--slug .cds--slug__button:hover {
|
| 5240 | background: var(--cds-border-inverse, #161616);
|
| 5241 | color: var(--cds-text-inverse, #ffffff);
|
| 5242 | }
|
| 5243 |
|
| 5244 | .cds--slug .cds--slug__button:hover:active {
|
| 5245 | background: var(--cds-border-inverse, #161616);
|
| 5246 | box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe), inset 0 0 0 2px var(--cds-focus-inset, #ffffff);
|
| 5247 | color: var(--cds-text-inverse, #ffffff);
|
| 5248 | }
|
| 5249 |
|
| 5250 | .cds--slug .cds--slug__button.cds--slug__button--mini:hover:active,
|
| 5251 | .cds--slug .cds--slug__button.cds--slug__button--2xs:hover:active {
|
| 5252 | box-shadow: inset 0 0 0 1px var(--cds-focus-inset, #ffffff);
|
| 5253 | }
|
| 5254 |
|
| 5255 | .cds--slug__text {
|
| 5256 | position: relative;
|
| 5257 | z-index: 1;
|
| 5258 | }
|
| 5259 |
|
| 5260 | .cds--slug .cds--slug__button--inline {
|
| 5261 | border: 1px solid transparent;
|
| 5262 | border-radius: 0.0625rem;
|
| 5263 | background: transparent;
|
| 5264 | block-size: initial;
|
| 5265 | color: var(--cds-text-primary, #161616);
|
| 5266 | font-size: 0.875rem;
|
| 5267 | inline-size: initial;
|
| 5268 | line-height: initial;
|
| 5269 | padding-inline: 0.25rem;
|
| 5270 | }
|
| 5271 |
|
| 5272 | .cds--slug__button--inline::before {
|
| 5273 | display: none;
|
| 5274 | }
|
| 5275 |
|
| 5276 | .cds--slug .cds--slug__button--inline:focus {
|
| 5277 | border-color: var(--cds-focus, #0f62fe);
|
| 5278 | box-shadow: none;
|
| 5279 | }
|
| 5280 |
|
| 5281 | .cds--slug .cds--slug__button--inline:hover,
|
| 5282 | .cds--slug .cds--slug__button--inline:hover:active {
|
| 5283 | border-color: var(--cds-icon-secondary, #525252);
|
| 5284 | background: transparent;
|
| 5285 | box-shadow: none;
|
| 5286 | color: var(--cds-text-secondary, #525252);
|
| 5287 | }
|
| 5288 |
|
| 5289 | .cds--slug .cds--slug__button--inline:focus:hover {
|
| 5290 | border-color: var(--cds-focus, #0f62fe);
|
| 5291 | }
|
| 5292 |
|
| 5293 | .cds--slug .cds--slug__button--inline:hover .cds--slug__text::before {
|
| 5294 | background: var(--cds-icon-secondary, #525252);
|
| 5295 | }
|
| 5296 |
|
| 5297 | .cds--slug__button--inline .cds--slug__text {
|
| 5298 | padding-inline-start: 0.5rem;
|
| 5299 | }
|
| 5300 |
|
| 5301 | .cds--slug__button--inline.cds--slug__button--lg .cds--slug__text,
|
| 5302 | .cds--slug__button--inline.cds--slug__button--xl .cds--slug__text {
|
| 5303 | padding-inline-start: 0.75rem;
|
| 5304 | }
|
| 5305 |
|
| 5306 | .cds--slug__button--inline .cds--slug__text::before {
|
| 5307 | position: absolute;
|
| 5308 | display: inline-block;
|
| 5309 | background: var(--cds-icon-primary, #161616);
|
| 5310 | block-size: 0.25rem;
|
| 5311 | content: "";
|
| 5312 | inline-size: 0.25rem;
|
| 5313 | inset-block-start: 50%;
|
| 5314 | inset-inline-start: 0;
|
| 5315 | opacity: 1;
|
| 5316 | transform: translateY(-50%);
|
| 5317 | transition: background 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9);
|
| 5318 | }
|
| 5319 |
|
| 5320 | .cds--slug__button--lg .cds--slug__text::before,
|
| 5321 | .cds--slug__button--xl .cds--slug__text::before {
|
| 5322 | block-size: 0.5rem;
|
| 5323 | inline-size: 0.5rem;
|
| 5324 | }
|
| 5325 |
|
| 5326 | .cds--slug__button--inline.cds--slug__button--mini,
|
| 5327 | .cds--slug__button--inline.cds--slug__button--mini .cds--slug__additional-text,
|
| 5328 | .cds--slug__button--inline.cds--slug__button--2xs,
|
| 5329 | .cds--slug__button--inline.cds--slug__button--2xs .cds--slug__additional-text,
|
| 5330 | .cds--slug__button--inline.cds--slug__button--xs,
|
| 5331 | .cds--slug__button--inline.cds--slug__button--xs .cds--slug__additional-text,
|
| 5332 | .cds--slug__button--inline.cds--slug__button--sm,
|
| 5333 | .cds--slug__button--inline.cds--slug__button--sm .cds--slug__additional-text {
|
| 5334 | font-size: 0.75rem;
|
| 5335 | }
|
| 5336 |
|
| 5337 | .cds--slug__button--inline.cds--slug__button--lg,
|
| 5338 | .cds--slug__button--inline.cds--slug__button--xl {
|
| 5339 | font-size: 1rem;
|
| 5340 | }
|
| 5341 |
|
| 5342 | .cds--slug .cds--slug__button--inline-with-content {
|
| 5343 | border: 1px solid var(--cds-border-inverse, #161616);
|
| 5344 | padding-block: 0.125rem;
|
| 5345 | padding-inline: 0.5rem;
|
| 5346 | }
|
| 5347 |
|
| 5348 | .cds--slug__button--inline-with-content .cds--slug__additional-text {
|
| 5349 | font-size: var(--cds-body-compact-02-font-size, 1rem);
|
| 5350 | font-weight: var(--cds-body-compact-02-font-weight, 400);
|
| 5351 | line-height: var(--cds-body-compact-02-line-height, 1.375);
|
| 5352 | letter-spacing: var(--cds-body-compact-02-letter-spacing, 0);
|
| 5353 | padding-inline-start: 0.25rem;
|
| 5354 | }
|
| 5355 |
|
| 5356 | .cds--slug__button--inline.cds--slug__button--md .cds--slug__additional-text {
|
| 5357 | font-size: 0.875rem;
|
| 5358 | }
|
| 5359 |
|
| 5360 | .cds--slug .cds--slug__button--inline-with-content:focus,
|
| 5361 | .cds--slug .cds--slug__button--inline-with-content:hover:focus {
|
| 5362 | box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
|
| 5363 | }
|
| 5364 |
|
| 5365 | .cds--slug .cds--slug-content {
|
| 5366 | background: linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff))) border-box;
|
| 5367 | border: 1px solid transparent;
|
| 5368 | border-radius: 0.5rem;
|
| 5369 | box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), -40px 44px 60px -24px var(--cds-ai-popover-shadow-outer-01, rgba(0, 67, 206, 0.06)), -56px 64px 64px -24px var(--cds-ai-popover-shadow-outer-02, rgba(0, 0, 0, 0.04));
|
| 5370 | color: var(--cds-text-primary, #161616);
|
| 5371 | min-inline-size: 17.5rem;
|
| 5372 | }
|
| 5373 |
|
| 5374 | .cds--slug > .cds--toggletip > .cds--popover > .cds--popover-caret,
|
| 5375 | .cds--slug > .cds--toggletip.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
|
| 5376 | background: transparent;
|
| 5377 | clip-path: none;
|
| 5378 | }
|
| 5379 |
|
| 5380 | .cds--slug > .cds--toggletip:is(.cds--popover--top,
|
| 5381 | .cds--popover--top-right,
|
| 5382 | .cds--popover--top-left,
|
| 5383 | .cds--popover--top-end,
|
| 5384 | .cds--popover--top-start,
|
| 5385 | .cds--popover--bottom,
|
| 5386 | .cds--popover--bottom-right,
|
| 5387 | .cds--popover--bottom-left,
|
| 5388 | .cds--popover--bottom-start,
|
| 5389 | .cds--popover--bottom-end,
|
| 5390 | .cds--popover--left,
|
| 5391 | .cds--popover--left-top,
|
| 5392 | .cds--popover--left-bottom,
|
| 5393 | .cds--popover--left-start,
|
| 5394 | .cds--popover--left-end,
|
| 5395 | .cds--popover--right,
|
| 5396 | .cds--popover--right-top,
|
| 5397 | .cds--popover--right-bottom,
|
| 5398 | .cds--popover--right-start,
|
| 5399 | .cds--popover--right-end) > .cds--popover > .cds--popover-caret::before,
|
| 5400 | .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--top,
|
| 5401 | .cds--popover--top-right,
|
| 5402 | .cds--popover--top-left,
|
| 5403 | .cds--popover--top-end,
|
| 5404 | .cds--popover--top-start,
|
| 5405 | .cds--popover--bottom,
|
| 5406 | .cds--popover--bottom-right,
|
| 5407 | .cds--popover--bottom-left,
|
| 5408 | .cds--popover--bottom-start,
|
| 5409 | .cds--popover--bottom-end,
|
| 5410 | .cds--popover--left,
|
| 5411 | .cds--popover--left-top,
|
| 5412 | .cds--popover--left-bottom,
|
| 5413 | .cds--popover--left-start,
|
| 5414 | .cds--popover--left-end,
|
| 5415 | .cds--popover--right,
|
| 5416 | .cds--popover--right-top,
|
| 5417 | .cds--popover--right-bottom,
|
| 5418 | .cds--popover--right-start,
|
| 5419 | .cds--popover--right-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
|
| 5420 | position: absolute;
|
| 5421 | display: block;
|
| 5422 | border: 1px solid var(--cds-ai-border-start, rgba(166, 200, 255, 0.64));
|
| 5423 | background: var(--cds-background, #ffffff);
|
| 5424 | block-size: 0.75rem;
|
| 5425 | clip-path: polygon(98% 0, 0 0, -52% 150%) border-box;
|
| 5426 | content: "";
|
| 5427 | inline-size: 0.75rem;
|
| 5428 | transform: rotate(45deg);
|
| 5429 | }
|
| 5430 |
|
| 5431 | .cds--slug > .cds--toggletip:is(.cds--popover--top,
|
| 5432 | .cds--popover--top-right,
|
| 5433 | .cds--popover--top-left,
|
| 5434 | .cds--popover--top-end,
|
| 5435 | .cds--popover--top-start,
|
| 5436 | .cds--popover--bottom,
|
| 5437 | .cds--popover--bottom-right,
|
| 5438 | .cds--popover--bottom-left,
|
| 5439 | .cds--popover--bottom-start,
|
| 5440 | .cds--popover--bottom-end,
|
| 5441 | .cds--popover--left,
|
| 5442 | .cds--popover--left-top,
|
| 5443 | .cds--popover--left-bottom,
|
| 5444 | .cds--popover--left-start,
|
| 5445 | .cds--popover--left-end,
|
| 5446 | .cds--popover--right,
|
| 5447 | .cds--popover--right-top,
|
| 5448 | .cds--popover--right-bottom,
|
| 5449 | .cds--popover--right-start,
|
| 5450 | .cds--popover--right-end) > .cds--popover > .cds--popover-caret::after,
|
| 5451 | .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--top,
|
| 5452 | .cds--popover--top-right,
|
| 5453 | .cds--popover--top-left,
|
| 5454 | .cds--popover--top-end,
|
| 5455 | .cds--popover--top-start,
|
| 5456 | .cds--popover--bottom,
|
| 5457 | .cds--popover--bottom-right,
|
| 5458 | .cds--popover--bottom-left,
|
| 5459 | .cds--popover--bottom-start,
|
| 5460 | .cds--popover--bottom-end,
|
| 5461 | .cds--popover--left,
|
| 5462 | .cds--popover--left-top,
|
| 5463 | .cds--popover--left-bottom,
|
| 5464 | .cds--popover--left-start,
|
| 5465 | .cds--popover--left-end,
|
| 5466 | .cds--popover--right,
|
| 5467 | .cds--popover--right-top,
|
| 5468 | .cds--popover--right-bottom,
|
| 5469 | .cds--popover--right-start,
|
| 5470 | .cds--popover--right-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
|
| 5471 | position: absolute;
|
| 5472 | display: block;
|
| 5473 | background: var(--cds-background, #ffffff);
|
| 5474 | block-size: 0.875rem;
|
| 5475 | content: "";
|
| 5476 | inline-size: 0.125rem;
|
| 5477 | }
|
| 5478 |
|
| 5479 | .cds--slug > .cds--toggletip:is(.cds--popover--top,
|
| 5480 | .cds--popover--top-right,
|
| 5481 | .cds--popover--top-left,
|
| 5482 | .cds--popover--top-end,
|
| 5483 | .cds--popover--top-start) > .cds--popover > .cds--popover-caret::before,
|
| 5484 | .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--top,
|
| 5485 | .cds--popover--top-right,
|
| 5486 | .cds--popover--top-left,
|
| 5487 | .cds--popover--top-end,
|
| 5488 | .cds--popover--top-start) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
|
| 5489 | inset-block-end: 0.0625rem;
|
| 5490 | transform: rotate(-135deg);
|
| 5491 | }
|
| 5492 | .cds--slug > .cds--toggletip:is(.cds--popover--top,
|
| 5493 | .cds--popover--top-right,
|
| 5494 | .cds--popover--top-left,
|
| 5495 | .cds--popover--top-end,
|
| 5496 | .cds--popover--top-start) > .cds--popover > .cds--popover-caret::after,
|
| 5497 | .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--top,
|
| 5498 | .cds--popover--top-right,
|
| 5499 | .cds--popover--top-left,
|
| 5500 | .cds--popover--top-end,
|
| 5501 | .cds--popover--top-start) > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
|
| 5502 | background: var(--cds-ai-popover-caret-bottom-background, #eaf1ff);
|
| 5503 | block-size: 0.125rem;
|
| 5504 | border-end-end-radius: 50%;
|
| 5505 | border-end-start-radius: 50%;
|
| 5506 | inline-size: 0.875rem;
|
| 5507 | inset-block-start: -0.125rem;
|
| 5508 | inset-inline-start: -0.0625rem;
|
| 5509 | }
|
| 5510 |
|
| 5511 | .cds--slug > .cds--toggletip:is(.cds--popover--top,
|
| 5512 | .cds--popover--top-right,
|
| 5513 | .cds--popover--top-left,
|
| 5514 | .cds--popover--top-end,
|
| 5515 | .cds--popover--top-start) > .cds--popover > .cds--slug-content--with-actions + .cds--popover-caret::after {
|
| 5516 | display: none;
|
| 5517 | }
|
| 5518 |
|
| 5519 | .cds--slug > .cds--toggletip:is(.cds--popover--right,
|
| 5520 | .cds--popover--right-bottom,
|
| 5521 | .cds--popover--right-top,
|
| 5522 | .cds--popover--right-start,
|
| 5523 | .cds--popover--right-end) > .cds--popover > .cds--popover-caret::before,
|
| 5524 | .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--right,
|
| 5525 | .cds--popover--right-bottom,
|
| 5526 | .cds--popover--right-top,
|
| 5527 | .cds--popover--right-start,
|
| 5528 | .cds--popover--right-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
|
| 5529 | inset-inline-start: 0.0625rem;
|
| 5530 | transform: rotate(-45deg);
|
| 5531 | }
|
| 5532 | .cds--slug > .cds--toggletip:is(.cds--popover--right,
|
| 5533 | .cds--popover--right-bottom,
|
| 5534 | .cds--popover--right-top,
|
| 5535 | .cds--popover--right-start,
|
| 5536 | .cds--popover--right-end) > .cds--popover > .cds--popover-caret::after,
|
| 5537 | .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--right,
|
| 5538 | .cds--popover--right-bottom,
|
| 5539 | .cds--popover--right-top,
|
| 5540 | .cds--popover--right-start,
|
| 5541 | .cds--popover--right-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
|
| 5542 | border-end-start-radius: 50%;
|
| 5543 | border-start-start-radius: 50%;
|
| 5544 | inset-block-start: -0.0625rem;
|
| 5545 | inset-inline-start: 0.375rem;
|
| 5546 | }
|
| 5547 |
|
| 5548 | .cds--slug > .cds--toggletip:is(.cds--popover--bottom,
|
| 5549 | .cds--popover--bottom-left,
|
| 5550 | .cds--popover--bottom-right,
|
| 5551 | .cds--popover--bottom-start,
|
| 5552 | .cds--popover--bottom-end) > .cds--popover > .cds--popover-caret::before,
|
| 5553 | .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--bottom,
|
| 5554 | .cds--popover--bottom-left,
|
| 5555 | .cds--popover--bottom-right,
|
| 5556 | .cds--popover--bottom-start,
|
| 5557 | .cds--popover--bottom-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
|
| 5558 | inset-block-start: 0.0625rem;
|
| 5559 | transform: rotate(45deg);
|
| 5560 | }
|
| 5561 | .cds--slug > .cds--toggletip:is(.cds--popover--bottom,
|
| 5562 | .cds--popover--bottom-left,
|
| 5563 | .cds--popover--bottom-right,
|
| 5564 | .cds--popover--bottom-start,
|
| 5565 | .cds--popover--bottom-end) > .cds--popover > .cds--popover-caret::after,
|
| 5566 | .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--bottom,
|
| 5567 | .cds--popover--bottom-left,
|
| 5568 | .cds--popover--bottom-right,
|
| 5569 | .cds--popover--bottom-start,
|
| 5570 | .cds--popover--bottom-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
|
| 5571 | block-size: 0.125rem;
|
| 5572 | border-start-end-radius: 50%;
|
| 5573 | border-start-start-radius: 50%;
|
| 5574 | inline-size: 0.875rem;
|
| 5575 | inset-block-end: -0.15625rem;
|
| 5576 | inset-inline-start: -0.0625rem;
|
| 5577 | }
|
| 5578 |
|
| 5579 | .cds--slug > .cds--toggletip:is(.cds--popover--left,
|
| 5580 | .cds--popover--left-bottom,
|
| 5581 | .cds--popover--left-top,
|
| 5582 | .cds--popover--left-start,
|
| 5583 | .cds--popover--left-end) > .cds--popover > .cds--popover-caret::before,
|
| 5584 | .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left,
|
| 5585 | .cds--popover--left-bottom,
|
| 5586 | .cds--popover--left-top,
|
| 5587 | .cds--popover--left-start,
|
| 5588 | .cds--popover--left-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
|
| 5589 | inset-inline-end: 0.0625rem;
|
| 5590 | transform: rotate(135deg);
|
| 5591 | }
|
| 5592 | .cds--slug > .cds--toggletip:is(.cds--popover--left,
|
| 5593 | .cds--popover--left-bottom,
|
| 5594 | .cds--popover--left-top,
|
| 5595 | .cds--popover--left-start,
|
| 5596 | .cds--popover--left-end) > .cds--popover > .cds--popover-caret::after,
|
| 5597 | .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left,
|
| 5598 | .cds--popover--left-bottom,
|
| 5599 | .cds--popover--left-top,
|
| 5600 | .cds--popover--left-start,
|
| 5601 | .cds--popover--left-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
|
| 5602 | border-end-end-radius: 50%;
|
| 5603 | border-start-end-radius: 50%;
|
| 5604 | inset-block-start: -0.0625rem;
|
| 5605 | inset-inline-start: -0.125rem;
|
| 5606 | }
|
| 5607 |
|
| 5608 | .cds--slug > .cds--toggletip:is(.cds--popover--left-bottom,
|
| 5609 | .cds--popover--right-bottom,
|
| 5610 | .cds--popover--left-end,
|
| 5611 | .cds--popover--right-end) > .cds--popover > .cds--popover-caret::after,
|
| 5612 | .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left-bottom,
|
| 5613 | .cds--popover--right-bottom,
|
| 5614 | .cds--popover--left-end,
|
| 5615 | .cds--popover--right-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
|
| 5616 | background: transparent;
|
| 5617 | }
|
| 5618 |
|
| 5619 | .cds--slug > .cds--toggletip:is(.cds--popover--left-bottom,
|
| 5620 | .cds--popover--right-bottom,
|
| 5621 | .cds--popover--left-end,
|
| 5622 | .cds--popover--right-end,
|
| 5623 | .cds--popover--top,
|
| 5624 | .cds--popover--top-right,
|
| 5625 | .cds--popover--top-left,
|
| 5626 | .cds--popover--top-end,
|
| 5627 | .cds--popover--top-start) > .cds--popover > .cds--popover-caret::before,
|
| 5628 | .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left-bottom,
|
| 5629 | .cds--popover--right-bottom,
|
| 5630 | .cds--popover--left-end,
|
| 5631 | .cds--popover--right-end,
|
| 5632 | .cds--popover--top,
|
| 5633 | .cds--popover--top-right,
|
| 5634 | .cds--popover--top-left,
|
| 5635 | .cds--popover--top-end,
|
| 5636 | .cds--popover--top-start) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
|
| 5637 | border-color: var(--cds-ai-popover-caret-bottom, #78a9ff);
|
| 5638 | background: var(--cds-ai-popover-caret-bottom-background, #eaf1ff);
|
| 5639 | }
|
| 5640 |
|
| 5641 | .cds--slug > .cds--toggletip:is(.cds--popover--left-bottom,
|
| 5642 | .cds--popover--right-bottom,
|
| 5643 | .cds--popover--left-end,
|
| 5644 | .cds--popover--right-end,
|
| 5645 | .cds--popover--top,
|
| 5646 | .cds--popover--top-right,
|
| 5647 | .cds--popover--top-left,
|
| 5648 | .cds--popover--top-end,
|
| 5649 | .cds--popover--top-start) > .cds--popover:has(.cds--slug-content--with-actions) > .cds--popover-caret::before,
|
| 5650 | .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left-bottom,
|
| 5651 | .cds--popover--right-bottom,
|
| 5652 | .cds--popover--left-end,
|
| 5653 | .cds--popover--right-end,
|
| 5654 | .cds--popover--top,
|
| 5655 | .cds--popover--top-right,
|
| 5656 | .cds--popover--top-left,
|
| 5657 | .cds--popover--top-start,
|
| 5658 | .cds--popover--top-end) > .cds--popover:has(.cds--slug-content--with-actions) > .cds--popover-content > .cds--popover-caret::before {
|
| 5659 | background: var(--cds-ai-popover-caret-bottom-background-actions, #e9effa);
|
| 5660 | }
|
| 5661 |
|
| 5662 | .cds--slug > .cds--toggletip:is(.cds--popover--left,
|
| 5663 | .cds--popover--right) > .cds--popover > .cds--popover-caret::before,
|
| 5664 | .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left,
|
| 5665 | .cds--popover--right) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
|
| 5666 | border-color: var(--cds-ai-popover-caret-center, #a0c3ff);
|
| 5667 | }
|
| 5668 |
|
| 5669 | .cds--slug .cds--toggletip-content {
|
| 5670 | padding-block-end: 5rem;
|
| 5671 | padding-block-start: 1.5rem;
|
| 5672 | padding-inline: 1.5rem;
|
| 5673 | }
|
| 5674 |
|
| 5675 | .cds--slug .cds--slug-content .cds--toggletip-content {
|
| 5676 | max-inline-size: 20rem;
|
| 5677 | }
|
| 5678 |
|
| 5679 | .cds--slug .cds--slug-actions {
|
| 5680 | position: absolute;
|
| 5681 | justify-content: flex-end;
|
| 5682 | -webkit-backdrop-filter: blur(85px);
|
| 5683 | backdrop-filter: blur(85px);
|
| 5684 | background: rgba(0, 0, 0, 0.01);
|
| 5685 | border-end-end-radius: 0.5rem;
|
| 5686 | border-end-start-radius: 0.5rem;
|
| 5687 | -moz-column-gap: 0;
|
| 5688 | column-gap: 0;
|
| 5689 | inline-size: 100%;
|
| 5690 | inset-block-end: 0;
|
| 5691 | inset-inline-end: 0;
|
| 5692 | }
|
| 5693 |
|
| 5694 | .cds--slug .cds--slug-actions .cds--btn:focus {
|
| 5695 | border-color: var(--cds-focus, #0f62fe);
|
| 5696 | box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe), inset 0 0 0 2px var(--cds-background, #ffffff);
|
| 5697 | }
|
| 5698 |
|
| 5699 | .cds--slug .cds--slug-actions .cds--btn--primary {
|
| 5700 | order: 1;
|
| 5701 | border-end-end-radius: 0.4375rem;
|
| 5702 | }
|
| 5703 |
|
| 5704 | .cds--slug.cds--slug--revert {
|
| 5705 | transform: translate(0.5rem, -50%);
|
| 5706 | }
|
| 5707 |
|
| 5708 | .cds--slug--revert .cds--btn--icon-only {
|
| 5709 | align-items: center;
|
| 5710 | padding-block-start: 0;
|
| 5711 | }
|
| 5712 |
|
| 5713 | .cds--slug--revert .cds--btn--icon-only svg {
|
| 5714 | margin: 0;
|
| 5715 | }
|
| 5716 |
|
| 5717 | .cds--aspect-ratio {
|
| 5718 | position: relative;
|
| 5719 | }
|
| 5720 |
|
| 5721 | .cds--aspect-ratio::before {
|
| 5722 | block-size: 0;
|
| 5723 | content: "";
|
| 5724 | float: left;
|
| 5725 | inline-size: 1px;
|
| 5726 | margin-inline-start: -1px;
|
| 5727 | }
|
| 5728 |
|
| 5729 | .cds--aspect-ratio::after {
|
| 5730 | display: table;
|
| 5731 | clear: both;
|
| 5732 | content: "";
|
| 5733 | }
|
| 5734 |
|
| 5735 | .cds--aspect-ratio--16x9::before {
|
| 5736 | padding-block-start: 56.25%;
|
| 5737 | }
|
| 5738 |
|
| 5739 | .cds--aspect-ratio--9x16::before {
|
| 5740 | padding-block-start: 177.7777777778%;
|
| 5741 | }
|
| 5742 |
|
| 5743 | .cds--aspect-ratio--2x1::before {
|
| 5744 | padding-block-start: 50%;
|
| 5745 | }
|
| 5746 |
|
| 5747 | .cds--aspect-ratio--1x2::before {
|
| 5748 | padding-block-start: 200%;
|
| 5749 | }
|
| 5750 |
|
| 5751 | .cds--aspect-ratio--4x3::before {
|
| 5752 | padding-block-start: 75%;
|
| 5753 | }
|
| 5754 |
|
| 5755 | .cds--aspect-ratio--3x4::before {
|
| 5756 | padding-block-start: 133.3333333333%;
|
| 5757 | }
|
| 5758 |
|
| 5759 | .cds--aspect-ratio--3x2::before {
|
| 5760 | padding-block-start: 66.6666666667%;
|
| 5761 | }
|
| 5762 |
|
| 5763 | .cds--aspect-ratio--2x3::before {
|
| 5764 | padding-block-start: 150%;
|
| 5765 | }
|
| 5766 |
|
| 5767 | .cds--aspect-ratio--1x1::before {
|
| 5768 | padding-block-start: 100%;
|
| 5769 | }
|
| 5770 |
|
| 5771 | .cds--overflow-menu,
|
| 5772 | .cds--overflow-menu__trigger {
|
| 5773 | box-sizing: border-box;
|
| 5774 | padding: 0;
|
| 5775 | border: 0;
|
| 5776 | margin: 0;
|
| 5777 | font-family: inherit;
|
| 5778 | font-size: 100%;
|
| 5779 | vertical-align: baseline;
|
| 5780 | display: inline-block;
|
| 5781 | padding: 0;
|
| 5782 | border: 0;
|
| 5783 | -webkit-appearance: none;
|
| 5784 | -moz-appearance: none;
|
| 5785 | appearance: none;
|
| 5786 | background: none;
|
| 5787 | cursor: pointer;
|
| 5788 | text-align: start;
|
| 5789 | inline-size: 100%;
|
| 5790 | box-sizing: border-box;
|
| 5791 | padding: 0;
|
| 5792 | border: 0;
|
| 5793 | margin: 0;
|
| 5794 | font-family: inherit;
|
| 5795 | font-size: 100%;
|
| 5796 | vertical-align: baseline;
|
| 5797 | outline: 2px solid transparent;
|
| 5798 | outline-offset: -2px;
|
| 5799 | position: relative;
|
| 5800 | display: flex;
|
| 5801 | align-items: center;
|
| 5802 | justify-content: center;
|
| 5803 | block-size: 2.5rem;
|
| 5804 | cursor: pointer;
|
| 5805 | inline-size: 2.5rem;
|
| 5806 | min-block-size: 2.5rem;
|
| 5807 | transition: outline 110ms cubic-bezier(0, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
|
| 5808 | }
|
| 5809 | .cds--overflow-menu *,
|
| 5810 | .cds--overflow-menu *::before,
|
| 5811 | .cds--overflow-menu *::after,
|
| 5812 | .cds--overflow-menu__trigger *,
|
| 5813 | .cds--overflow-menu__trigger *::before,
|
| 5814 | .cds--overflow-menu__trigger *::after {
|
| 5815 | box-sizing: inherit;
|
| 5816 | }
|
| 5817 | .cds--overflow-menu::-moz-focus-inner,
|
| 5818 | .cds--overflow-menu__trigger::-moz-focus-inner {
|
| 5819 | border: 0;
|
| 5820 | }
|
| 5821 | .cds--overflow-menu *,
|
| 5822 | .cds--overflow-menu *::before,
|
| 5823 | .cds--overflow-menu *::after,
|
| 5824 | .cds--overflow-menu__trigger *,
|
| 5825 | .cds--overflow-menu__trigger *::before,
|
| 5826 | .cds--overflow-menu__trigger *::after {
|
| 5827 | box-sizing: inherit;
|
| 5828 | }
|
| 5829 | .cds--overflow-menu:focus,
|
| 5830 | .cds--overflow-menu__trigger:focus {
|
| 5831 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 5832 | outline-offset: -2px;
|
| 5833 | }
|
| 5834 | @media screen and (prefers-contrast) {
|
| 5835 | .cds--overflow-menu:focus,
|
| 5836 | .cds--overflow-menu__trigger:focus {
|
| 5837 | outline-style: dotted;
|
| 5838 | }
|
| 5839 | }
|
| 5840 | .cds--overflow-menu:hover,
|
| 5841 | .cds--overflow-menu__trigger:hover {
|
| 5842 | background-color: var(--cds-layer-hover);
|
| 5843 | }
|
| 5844 |
|
| 5845 | .cds--overflow-menu > :first-child {
|
| 5846 | margin-block-start: 0;
|
| 5847 | }
|
| 5848 |
|
| 5849 | .cds--overflow-menu--sm {
|
| 5850 | block-size: 2rem;
|
| 5851 | inline-size: 2rem;
|
| 5852 | min-block-size: 2rem;
|
| 5853 | }
|
| 5854 |
|
| 5855 | .cds--overflow-menu--lg {
|
| 5856 | block-size: 3rem;
|
| 5857 | inline-size: 3rem;
|
| 5858 | }
|
| 5859 |
|
| 5860 | .cds--overflow-menu__trigger.cds--tooltip--a11y.cds--tooltip__trigger:focus {
|
| 5861 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 5862 | outline-offset: -2px;
|
| 5863 | }
|
| 5864 | @media screen and (prefers-contrast) {
|
| 5865 | .cds--overflow-menu__trigger.cds--tooltip--a11y.cds--tooltip__trigger:focus {
|
| 5866 | outline-style: dotted;
|
| 5867 | }
|
| 5868 | }
|
| 5869 | .cds--overflow-menu__trigger.cds--tooltip--a11y.cds--tooltip__trigger:focus svg {
|
| 5870 | outline: none;
|
| 5871 | }
|
| 5872 |
|
| 5873 | .cds--overflow-menu.cds--overflow-menu--open,
|
| 5874 | .cds--overflow-menu.cds--overflow-menu--open .cds--overflow-menu__trigger {
|
| 5875 | box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
|
| 5876 | background-color: var(--cds-layer);
|
| 5877 | transition: none;
|
| 5878 | }
|
| 5879 |
|
| 5880 | .cds--overflow-menu--light.cds--overflow-menu--open,
|
| 5881 | .cds--overflow-menu--light.cds--overflow-menu--open .cds--overflow-menu__trigger {
|
| 5882 | background-color: var(--cds-layer);
|
| 5883 | }
|
| 5884 |
|
| 5885 | .cds--overflow-menu__icon {
|
| 5886 | block-size: 1rem;
|
| 5887 | fill: var(--cds-icon-primary, #161616);
|
| 5888 | inline-size: 1rem;
|
| 5889 | }
|
| 5890 |
|
| 5891 | .cds--overflow-menu__wrapper {
|
| 5892 | line-height: 0;
|
| 5893 | }
|
| 5894 |
|
| 5895 | .cds--overflow-menu-options {
|
| 5896 | box-sizing: border-box;
|
| 5897 | padding: 0;
|
| 5898 | border: 0;
|
| 5899 | margin: 0;
|
| 5900 | font-family: inherit;
|
| 5901 | font-size: 100%;
|
| 5902 | vertical-align: baseline;
|
| 5903 | box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
|
| 5904 | position: absolute;
|
| 5905 | z-index: 6000;
|
| 5906 | display: none;
|
| 5907 | flex-direction: column;
|
| 5908 | align-items: flex-start;
|
| 5909 | background-color: var(--cds-layer);
|
| 5910 | inline-size: 10rem;
|
| 5911 | inset-block-start: 32px;
|
| 5912 | inset-inline-start: 0;
|
| 5913 | list-style: none;
|
| 5914 | }
|
| 5915 | .cds--overflow-menu-options *,
|
| 5916 | .cds--overflow-menu-options *::before,
|
| 5917 | .cds--overflow-menu-options *::after {
|
| 5918 | box-sizing: inherit;
|
| 5919 | }
|
| 5920 | .cds--overflow-menu-options::after {
|
| 5921 | position: absolute;
|
| 5922 | display: block;
|
| 5923 | background-color: var(--cds-layer);
|
| 5924 | content: "";
|
| 5925 | transition: background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
|
| 5926 | }
|
| 5927 | @media screen and (prefers-reduced-motion: reduce) {
|
| 5928 | .cds--overflow-menu-options::after {
|
| 5929 | transition: none;
|
| 5930 | }
|
| 5931 | }
|
| 5932 |
|
| 5933 | .cds--overflow-menu.cds--overflow-menu--open:hover {
|
| 5934 | background-color: var(--cds-layer);
|
| 5935 | }
|
| 5936 |
|
| 5937 | .cds--overflow-menu-options--light {
|
| 5938 | background-color: var(--cds-layer);
|
| 5939 | }
|
| 5940 | .cds--overflow-menu-options--light::after {
|
| 5941 | background-color: var(--cds-layer);
|
| 5942 | }
|
| 5943 |
|
| 5944 | .cds--overflow-menu.cds--overflow-menu--light.cds--overflow-menu--open:hover {
|
| 5945 | background-color: var(--cds-layer);
|
| 5946 | }
|
| 5947 |
|
| 5948 | .cds--overflow-menu-options[data-floating-menu-direction=bottom]:not(.cds--breadcrumb-menu-options)::after {
|
| 5949 | block-size: 0.1875rem;
|
| 5950 | inline-size: 2.5rem;
|
| 5951 | inset-block-start: -0.1875rem;
|
| 5952 | inset-inline-start: 0;
|
| 5953 | }
|
| 5954 |
|
| 5955 | .cds--overflow-menu-options[data-floating-menu-direction=top]::after {
|
| 5956 | block-size: 0.5rem;
|
| 5957 | inline-size: 2.5rem;
|
| 5958 | inset-block-end: -0.5rem;
|
| 5959 | inset-inline-start: 0;
|
| 5960 | }
|
| 5961 |
|
| 5962 | .cds--overflow-menu-options[data-floating-menu-direction=left]::after {
|
| 5963 | block-size: 2.5rem;
|
| 5964 | inline-size: 0.375rem;
|
| 5965 | inset-block-start: 0;
|
| 5966 | inset-inline-end: -0.375rem;
|
| 5967 | }
|
| 5968 |
|
| 5969 | .cds--overflow-menu-options[data-floating-menu-direction=right]::after {
|
| 5970 | block-size: 2.5rem;
|
| 5971 | inline-size: 0.375rem;
|
| 5972 | inset-block-start: 0;
|
| 5973 | inset-inline-start: -0.375rem;
|
| 5974 | }
|
| 5975 |
|
| 5976 | .cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=bottom]::after, .cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=top]::after {
|
| 5977 | inline-size: 2rem;
|
| 5978 | }
|
| 5979 | .cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=left]::after, .cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=right]::after {
|
| 5980 | block-size: 2rem;
|
| 5981 | }
|
| 5982 |
|
| 5983 | .cds--overflow-menu-options--lg.cds--overflow-menu-options[data-floating-menu-direction=bottom]::after, .cds--overflow-menu-options--lg.cds--overflow-menu-options[data-floating-menu-direction=top]::after {
|
| 5984 | inline-size: 3rem;
|
| 5985 | }
|
| 5986 | .cds--overflow-menu-options--lg.cds--overflow-menu-options[data-floating-menu-direction=left]::after, .cds--overflow-menu-options--lg.cds--overflow-menu-options[data-floating-menu-direction=right]::after {
|
| 5987 | block-size: 3rem;
|
| 5988 | }
|
| 5989 |
|
| 5990 | .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=top]::after,
|
| 5991 | .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=bottom]::after {
|
| 5992 | inset-inline-end: 0;
|
| 5993 | inset-inline-start: auto;
|
| 5994 | }
|
| 5995 |
|
| 5996 | .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=left]::after,
|
| 5997 | .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=right]::after {
|
| 5998 | inset-block-end: 0;
|
| 5999 | inset-block-start: auto;
|
| 6000 | }
|
| 6001 |
|
| 6002 | .cds--overflow-menu-options--open {
|
| 6003 | display: flex;
|
| 6004 | }
|
| 6005 |
|
| 6006 | .cds--overflow-menu-options__content {
|
| 6007 | inline-size: 100%;
|
| 6008 | }
|
| 6009 |
|
| 6010 | .cds--overflow-menu-options__option {
|
| 6011 | box-sizing: border-box;
|
| 6012 | padding: 0;
|
| 6013 | border: 0;
|
| 6014 | margin: 0;
|
| 6015 | font-family: inherit;
|
| 6016 | font-size: 100%;
|
| 6017 | vertical-align: baseline;
|
| 6018 | display: flex;
|
| 6019 | align-items: center;
|
| 6020 | padding: 0;
|
| 6021 | background-color: transparent;
|
| 6022 | block-size: 2.5rem;
|
| 6023 | inline-size: 100%;
|
| 6024 | transition: background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
|
| 6025 | }
|
| 6026 | .cds--overflow-menu-options__option *,
|
| 6027 | .cds--overflow-menu-options__option *::before,
|
| 6028 | .cds--overflow-menu-options__option *::after {
|
| 6029 | box-sizing: inherit;
|
| 6030 | }
|
| 6031 |
|
| 6032 | .cds--overflow-menu-options--sm .cds--overflow-menu-options__option {
|
| 6033 | block-size: 2rem;
|
| 6034 | }
|
| 6035 |
|
| 6036 | .cds--overflow-menu-options--lg .cds--overflow-menu-options__option {
|
| 6037 | block-size: 3rem;
|
| 6038 | }
|
| 6039 |
|
| 6040 | .cds--overflow-menu--divider {
|
| 6041 | border-block-start: 1px solid var(--cds-border-subtle);
|
| 6042 | }
|
| 6043 |
|
| 6044 | .cds--overflow-menu--light .cds--overflow-menu--divider {
|
| 6045 | border-block-start: 1px solid var(--cds-border-subtle);
|
| 6046 | }
|
| 6047 |
|
| 6048 | a.cds--overflow-menu-options__btn::before {
|
| 6049 | display: inline-block;
|
| 6050 | block-size: 100%;
|
| 6051 | content: "";
|
| 6052 | vertical-align: middle;
|
| 6053 | }
|
| 6054 |
|
| 6055 | .cds--overflow-menu-options__btn {
|
| 6056 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 6057 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 6058 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 6059 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 6060 | outline: 2px solid transparent;
|
| 6061 | outline-offset: -2px;
|
| 6062 | display: inline-flex;
|
| 6063 | align-items: center;
|
| 6064 | padding: 0 1rem;
|
| 6065 | border: none;
|
| 6066 | background-color: transparent;
|
| 6067 | block-size: 100%;
|
| 6068 | color: var(--cds-text-secondary, #525252);
|
| 6069 | cursor: pointer;
|
| 6070 | font-family: inherit;
|
| 6071 | font-weight: 400;
|
| 6072 | inline-size: 100%;
|
| 6073 | max-inline-size: 11.25rem;
|
| 6074 | text-align: start;
|
| 6075 | transition: outline 110ms cubic-bezier(0, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0, 0, 0.38, 0.9), color 110ms cubic-bezier(0, 0, 0.38, 0.9);
|
| 6076 | }
|
| 6077 | .cds--overflow-menu-options__btn:hover {
|
| 6078 | color: var(--cds-text-primary, #161616);
|
| 6079 | }
|
| 6080 | .cds--overflow-menu-options__btn:focus {
|
| 6081 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 6082 | outline-offset: -2px;
|
| 6083 | }
|
| 6084 | @media screen and (prefers-contrast) {
|
| 6085 | .cds--overflow-menu-options__btn:focus {
|
| 6086 | outline-style: dotted;
|
| 6087 | }
|
| 6088 | }
|
| 6089 | .cds--overflow-menu-options__btn::-moz-focus-inner {
|
| 6090 | border: none;
|
| 6091 | }
|
| 6092 |
|
| 6093 | .cds--overflow-menu-options__btn svg {
|
| 6094 | fill: var(--cds-icon-secondary, #525252);
|
| 6095 | }
|
| 6096 |
|
| 6097 | .cds--overflow-menu-options__btn:hover svg {
|
| 6098 | fill: var(--cds-icon-primary, #161616);
|
| 6099 | }
|
| 6100 |
|
| 6101 | .cds--overflow-menu-options__option-content {
|
| 6102 | overflow: hidden;
|
| 6103 | text-overflow: ellipsis;
|
| 6104 | white-space: nowrap;
|
| 6105 | }
|
| 6106 |
|
| 6107 | .cds--overflow-menu-options__option:hover {
|
| 6108 | background-color: var(--cds-layer-hover);
|
| 6109 | }
|
| 6110 |
|
| 6111 | .cds--overflow-menu-options__option--danger .cds--overflow-menu-options__btn:hover,
|
| 6112 | .cds--overflow-menu-options__option--danger .cds--overflow-menu-options__btn:focus {
|
| 6113 | background-color: var(--cds-button-danger-primary, #da1e28);
|
| 6114 | color: var(--cds-text-on-color, #ffffff);
|
| 6115 | }
|
| 6116 | .cds--overflow-menu-options__option--danger .cds--overflow-menu-options__btn:hover svg,
|
| 6117 | .cds--overflow-menu-options__option--danger .cds--overflow-menu-options__btn:focus svg {
|
| 6118 | fill: currentColor;
|
| 6119 | }
|
| 6120 |
|
| 6121 | .cds--overflow-menu-options__option--disabled:hover {
|
| 6122 | background-color: var(--cds-layer);
|
| 6123 | cursor: not-allowed;
|
| 6124 | }
|
| 6125 |
|
| 6126 | .cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn {
|
| 6127 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 6128 | cursor: not-allowed;
|
| 6129 | }
|
| 6130 | .cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn:hover, .cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn:active, .cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn:focus {
|
| 6131 | outline: 2px solid transparent;
|
| 6132 | outline-offset: -2px;
|
| 6133 | background-color: var(--cds-layer);
|
| 6134 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 6135 | }
|
| 6136 |
|
| 6137 | .cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn svg {
|
| 6138 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 6139 | }
|
| 6140 |
|
| 6141 | .cds--overflow-menu--flip {
|
| 6142 | inset-inline-start: -140px;
|
| 6143 | }
|
| 6144 | .cds--overflow-menu--flip::before {
|
| 6145 | inset-inline-start: 145px;
|
| 6146 | }
|
| 6147 |
|
| 6148 |
|
| 6149 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 6150 | .cds--overflow-menu:focus,
|
| 6151 | .cds--overflow-menu-options__btn:focus {
|
| 6152 | color: Highlight;
|
| 6153 | outline: 1px solid Highlight;
|
| 6154 | }
|
| 6155 | }
|
| 6156 |
|
| 6157 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 6158 | .cds--overflow-menu svg {
|
| 6159 | fill: ButtonText;
|
| 6160 | }
|
| 6161 | }
|
| 6162 |
|
| 6163 |
|
| 6164 | .cds--overflow-menu__top-start {
|
| 6165 | transform: translate(0, calc(-100% - var(--cds-popover-offset, 2.5rem)));
|
| 6166 | }
|
| 6167 |
|
| 6168 | .cds--overflow-menu__top-end {
|
| 6169 | transform: translate(0, calc(-100% - var(--cds-popover-offset, 2.5rem)));
|
| 6170 | }
|
| 6171 |
|
| 6172 | .cds--breadcrumb {
|
| 6173 | box-sizing: border-box;
|
| 6174 | padding: 0;
|
| 6175 | border: 0;
|
| 6176 | margin: 0;
|
| 6177 | font-family: inherit;
|
| 6178 | font-size: 100%;
|
| 6179 | vertical-align: baseline;
|
| 6180 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 6181 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 6182 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 6183 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 6184 | display: inline;
|
| 6185 | }
|
| 6186 | .cds--breadcrumb *,
|
| 6187 | .cds--breadcrumb *::before,
|
| 6188 | .cds--breadcrumb *::after {
|
| 6189 | box-sizing: inherit;
|
| 6190 | }
|
| 6191 | @media (min-width: 42rem) {
|
| 6192 | .cds--breadcrumb {
|
| 6193 | display: flex;
|
| 6194 | flex-wrap: wrap;
|
| 6195 | }
|
| 6196 | }
|
| 6197 |
|
| 6198 | .cds--breadcrumb-item {
|
| 6199 | position: relative;
|
| 6200 | display: flex;
|
| 6201 | align-items: center;
|
| 6202 | margin-inline-end: 0.5rem;
|
| 6203 | }
|
| 6204 |
|
| 6205 | .cds--breadcrumb-item .cds--link:visited {
|
| 6206 | color: var(--cds-link-primary, #0f62fe);
|
| 6207 | }
|
| 6208 | .cds--breadcrumb-item .cds--link:visited:hover {
|
| 6209 | color: var(--cds-link-primary-hover, #0043ce);
|
| 6210 | }
|
| 6211 |
|
| 6212 | .cds--breadcrumb-item::after {
|
| 6213 | color: var(--cds-text-primary, #161616);
|
| 6214 | content: "/";
|
| 6215 | margin-inline-start: 0.5rem;
|
| 6216 | }
|
| 6217 |
|
| 6218 | .cds--breadcrumb--no-trailing-slash .cds--breadcrumb-item:last-child::after {
|
| 6219 | content: "";
|
| 6220 | }
|
| 6221 |
|
| 6222 | .cds--breadcrumb-item:last-child,
|
| 6223 | .cds--breadcrumb-item:last-child::after {
|
| 6224 | margin-inline-end: 0;
|
| 6225 | }
|
| 6226 |
|
| 6227 | .cds--breadcrumb .cds--link {
|
| 6228 | white-space: nowrap;
|
| 6229 | }
|
| 6230 |
|
| 6231 | .cds--breadcrumb-item [aria-current=page],
|
| 6232 | .cds--breadcrumb-item.cds--breadcrumb-item--current .cds--link {
|
| 6233 | color: var(--cds-text-primary, #161616);
|
| 6234 | cursor: auto;
|
| 6235 | }
|
| 6236 | .cds--breadcrumb-item [aria-current=page]:hover,
|
| 6237 | .cds--breadcrumb-item.cds--breadcrumb-item--current .cds--link:hover {
|
| 6238 | text-decoration: none;
|
| 6239 | }
|
| 6240 |
|
| 6241 | .cds--breadcrumb-item .cds--overflow-menu {
|
| 6242 | position: relative;
|
| 6243 | block-size: 1.125rem;
|
| 6244 | inline-size: 1.25rem;
|
| 6245 | }
|
| 6246 | .cds--breadcrumb-item .cds--overflow-menu:focus {
|
| 6247 | outline: 1px solid var(--cds-focus, #0f62fe);
|
| 6248 | }
|
| 6249 | .cds--breadcrumb-item .cds--overflow-menu:hover {
|
| 6250 | background: transparent;
|
| 6251 | }
|
| 6252 | .cds--breadcrumb-item .cds--overflow-menu::after {
|
| 6253 | position: absolute;
|
| 6254 | background: var(--cds-link-primary-hover, #0043ce);
|
| 6255 | block-size: 1px;
|
| 6256 | content: "";
|
| 6257 | inline-size: 0.75rem;
|
| 6258 | inset-block-end: 2px;
|
| 6259 | opacity: 0;
|
| 6260 | transition: opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 6261 | }
|
| 6262 | @media screen and (prefers-reduced-motion: reduce) {
|
| 6263 | .cds--breadcrumb-item .cds--overflow-menu::after {
|
| 6264 | transition: none;
|
| 6265 | }
|
| 6266 | }
|
| 6267 |
|
| 6268 | .cds--breadcrumb-item .cds--overflow-menu:hover::after {
|
| 6269 | opacity: 1;
|
| 6270 | }
|
| 6271 |
|
| 6272 | .cds--breadcrumb-item .cds--overflow-menu.cds--overflow-menu--open {
|
| 6273 | background: transparent;
|
| 6274 | box-shadow: none;
|
| 6275 | }
|
| 6276 |
|
| 6277 | .cds--breadcrumb-item .cds--overflow-menu__icon {
|
| 6278 | position: relative;
|
| 6279 | fill: var(--cds-link-primary, #0f62fe);
|
| 6280 | transform: translateY(4px);
|
| 6281 | }
|
| 6282 |
|
| 6283 | .cds--breadcrumb-item .cds--overflow-menu:hover .cds--overflow-menu__icon {
|
| 6284 | fill: var(--cds-link-primary-hover, #0043ce);
|
| 6285 | }
|
| 6286 |
|
| 6287 | .cds--breadcrumb-menu-options:focus {
|
| 6288 | outline: none;
|
| 6289 | }
|
| 6290 |
|
| 6291 | .cds--breadcrumb-menu-options.cds--overflow-menu-options::after {
|
| 6292 | margin: 0 auto;
|
| 6293 | background: transparent;
|
| 6294 | block-size: 0;
|
| 6295 | border-block-end: 0.4375rem solid var(--cds-field);
|
| 6296 | border-inline-end: 0.4375rem solid transparent;
|
| 6297 | border-inline-start: 0.4375rem solid transparent;
|
| 6298 | inline-size: 0;
|
| 6299 | inset-block-start: -0.4375rem;
|
| 6300 | inset-inline-start: 0.875rem;
|
| 6301 | }
|
| 6302 |
|
| 6303 | [dir=rtl] .cds--breadcrumb-menu-options.cds--overflow-menu-options::after {
|
| 6304 | inset-inline-end: 0.875rem;
|
| 6305 | inset-inline-start: initial;
|
| 6306 | }
|
| 6307 |
|
| 6308 | .cds--breadcrumb.cds--skeleton .cds--link {
|
| 6309 | position: relative;
|
| 6310 | padding: 0;
|
| 6311 | border: none;
|
| 6312 | background: var(--cds-skeleton-background, #e8e8e8);
|
| 6313 | box-shadow: none;
|
| 6314 | pointer-events: none;
|
| 6315 | block-size: 1rem;
|
| 6316 | inline-size: 6.25rem;
|
| 6317 | }
|
| 6318 | .cds--breadcrumb.cds--skeleton .cds--link:hover, .cds--breadcrumb.cds--skeleton .cds--link:focus, .cds--breadcrumb.cds--skeleton .cds--link:active {
|
| 6319 | border: none;
|
| 6320 | cursor: default;
|
| 6321 | outline: none;
|
| 6322 | }
|
| 6323 | .cds--breadcrumb.cds--skeleton .cds--link::before {
|
| 6324 | position: absolute;
|
| 6325 | animation: 3000ms ease-in-out cds--skeleton infinite;
|
| 6326 | background: var(--cds-skeleton-element, #c6c6c6);
|
| 6327 | block-size: 100%;
|
| 6328 | content: "";
|
| 6329 | inline-size: 100%;
|
| 6330 | will-change: transform-origin, transform, opacity;
|
| 6331 | }
|
| 6332 | @media (prefers-reduced-motion: reduce) {
|
| 6333 | .cds--breadcrumb.cds--skeleton .cds--link::before {
|
| 6334 | animation: none;
|
| 6335 | }
|
| 6336 | }
|
| 6337 |
|
| 6338 | .cds--breadcrumb .cds--overflow-menu.cds--btn--icon-only {
|
| 6339 | min-block-size: 1.125rem;
|
| 6340 | padding-inline-end: 0;
|
| 6341 | padding-inline-start: 0;
|
| 6342 | }
|
| 6343 |
|
| 6344 | .cds--link {
|
| 6345 | box-sizing: border-box;
|
| 6346 | padding: 0;
|
| 6347 | border: 0;
|
| 6348 | margin: 0;
|
| 6349 | font-family: inherit;
|
| 6350 | font-size: 100%;
|
| 6351 | vertical-align: baseline;
|
| 6352 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 6353 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 6354 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 6355 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 6356 | display: inline-flex;
|
| 6357 | color: var(--cds-link-text-color, var(--cds-link-primary, #0f62fe));
|
| 6358 | outline: none;
|
| 6359 | text-decoration: none;
|
| 6360 | transition: color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 6361 | }
|
| 6362 | .cds--link *,
|
| 6363 | .cds--link *::before,
|
| 6364 | .cds--link *::after {
|
| 6365 | box-sizing: inherit;
|
| 6366 | }
|
| 6367 | .cds--link:hover {
|
| 6368 | color: var(--cds-link-hover-text-color, var(--cds-link-primary-hover, #0043ce));
|
| 6369 | text-decoration: underline;
|
| 6370 | }
|
| 6371 | .cds--link:active, .cds--link:active:visited, .cds--link:active:visited:hover {
|
| 6372 | outline: 1px solid var(--cds-focus, #0f62fe);
|
| 6373 | color: var(--cds-link-text-color, var(--cds-link-primary, #0f62fe));
|
| 6374 | outline-color: var(--cds-link-focus-text-color, var(--cds-focus, #0f62fe));
|
| 6375 | text-decoration: underline;
|
| 6376 | }
|
| 6377 | @media screen and (prefers-contrast) {
|
| 6378 | .cds--link:active, .cds--link:active:visited, .cds--link:active:visited:hover {
|
| 6379 | outline-style: dotted;
|
| 6380 | }
|
| 6381 | }
|
| 6382 | .cds--link:focus {
|
| 6383 | outline: 1px solid var(--cds-focus, #0f62fe);
|
| 6384 | outline-color: var(--cds-link-focus-text-color, var(--cds-focus, #0f62fe));
|
| 6385 | text-decoration: underline;
|
| 6386 | }
|
| 6387 | @media screen and (prefers-contrast) {
|
| 6388 | .cds--link:focus {
|
| 6389 | outline-style: dotted;
|
| 6390 | }
|
| 6391 | }
|
| 6392 | .cds--link:visited {
|
| 6393 | color: var(--cds-link-text-color, var(--cds-link-primary, #0f62fe));
|
| 6394 | }
|
| 6395 | .cds--link:visited:hover {
|
| 6396 | color: var(--cds-link-hover-text-color, var(--cds-link-primary-hover, #0043ce));
|
| 6397 | }
|
| 6398 |
|
| 6399 | .cds--link--disabled,
|
| 6400 | .cds--link--disabled:hover {
|
| 6401 | box-sizing: border-box;
|
| 6402 | padding: 0;
|
| 6403 | border: 0;
|
| 6404 | margin: 0;
|
| 6405 | font-family: inherit;
|
| 6406 | font-size: 100%;
|
| 6407 | vertical-align: baseline;
|
| 6408 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 6409 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 6410 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 6411 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 6412 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 6413 | cursor: not-allowed;
|
| 6414 | font-weight: 400;
|
| 6415 | text-decoration: none;
|
| 6416 | }
|
| 6417 | .cds--link--disabled *,
|
| 6418 | .cds--link--disabled *::before,
|
| 6419 | .cds--link--disabled *::after,
|
| 6420 | .cds--link--disabled:hover *,
|
| 6421 | .cds--link--disabled:hover *::before,
|
| 6422 | .cds--link--disabled:hover *::after {
|
| 6423 | box-sizing: inherit;
|
| 6424 | }
|
| 6425 |
|
| 6426 | .cds--link.cds--link--visited:visited {
|
| 6427 | color: var(--cds-link-visited-text-color, var(--cds-link-visited, #8a3ffc));
|
| 6428 | }
|
| 6429 |
|
| 6430 | .cds--link.cds--link--visited:visited:hover {
|
| 6431 | color: var(--cds-link-hover-text-color, var(--cds-link-primary-hover, #0043ce));
|
| 6432 | }
|
| 6433 |
|
| 6434 | .cds--link.cds--link--inline {
|
| 6435 | display: inline;
|
| 6436 | text-decoration: underline;
|
| 6437 | }
|
| 6438 |
|
| 6439 | .cds--link--disabled.cds--link--inline {
|
| 6440 | text-decoration: underline;
|
| 6441 | }
|
| 6442 |
|
| 6443 | .cds--link--sm,
|
| 6444 | .cds--link--sm.cds--link--disabled:hover {
|
| 6445 | font-size: var(--cds-helper-text-01-font-size, 0.75rem);
|
| 6446 | line-height: var(--cds-helper-text-01-line-height, 1.33333);
|
| 6447 | letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
|
| 6448 | }
|
| 6449 |
|
| 6450 | .cds--link--lg,
|
| 6451 | .cds--link--lg.cds--link--disabled:hover {
|
| 6452 | font-size: var(--cds-body-compact-02-font-size, 1rem);
|
| 6453 | font-weight: var(--cds-body-compact-02-font-weight, 400);
|
| 6454 | line-height: var(--cds-body-compact-02-line-height, 1.375);
|
| 6455 | letter-spacing: var(--cds-body-compact-02-letter-spacing, 0);
|
| 6456 | }
|
| 6457 |
|
| 6458 | .cds--link__icon {
|
| 6459 | display: inline-flex;
|
| 6460 | align-self: center;
|
| 6461 | margin-inline-start: 0.5rem;
|
| 6462 | }
|
| 6463 |
|
| 6464 | .cds--chat-btn {
|
| 6465 | border-radius: 1.5rem;
|
| 6466 | }
|
| 6467 |
|
| 6468 | .cds--chat-btn:not(.cds--chat-btn--with-icon) {
|
| 6469 | padding-inline-end: 0.9375rem;
|
| 6470 | }
|
| 6471 |
|
| 6472 | .cds--chat-btn.cds--btn--md {
|
| 6473 | border-radius: 1.25rem;
|
| 6474 | }
|
| 6475 |
|
| 6476 | .cds--chat-btn.cds--btn--sm {
|
| 6477 | border-radius: 1rem;
|
| 6478 | }
|
| 6479 |
|
| 6480 | .cds--chat-btn--quick-action {
|
| 6481 | align-items: center;
|
| 6482 | border: 1px solid var(--cds-chat-button, #0f62fe);
|
| 6483 | background: transparent;
|
| 6484 | color: var(--cds-chat-button, #0f62fe);
|
| 6485 | }
|
| 6486 |
|
| 6487 | .cds--chat-btn--quick-action:hover:not(:active):not([disabled]) {
|
| 6488 | border-color: transparent;
|
| 6489 | background: var(--cds-chat-button-hover, rgba(141, 141, 141, 0.12));
|
| 6490 | color: var(--cds-chat-button-text-hover, #0043ce);
|
| 6491 | }
|
| 6492 |
|
| 6493 | .cds--chat-btn--quick-action:active {
|
| 6494 | border-color: transparent;
|
| 6495 | background: var(--cds-chat-button-active, rgba(141, 141, 141, 0.5));
|
| 6496 | color: var(--cds-chat-button-text-hover, #0043ce);
|
| 6497 | }
|
| 6498 |
|
| 6499 | .cds--chat-btn--quick-action.cds--btn--ghost:focus {
|
| 6500 | border-color: var(--cds-focus, #0f62fe);
|
| 6501 | box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
|
| 6502 | }
|
| 6503 |
|
| 6504 | .cds--chat-btn--quick-action.cds--btn--ghost:hover:focus {
|
| 6505 | border-color: var(--cds-focus, #0f62fe);
|
| 6506 | box-shadow: inset 0 0 0 1px var(--cds-focus-inset, #ffffff);
|
| 6507 | }
|
| 6508 |
|
| 6509 | .cds--chat-btn--quick-action[disabled],
|
| 6510 | .cds--chat-btn--quick-action[disabled]:hover {
|
| 6511 | border-color: var(--cds-button-disabled, #c6c6c6);
|
| 6512 | color: var(--cds-button-disabled, #c6c6c6);
|
| 6513 | }
|
| 6514 |
|
| 6515 | .cds--chat-btn--quick-action--selected,
|
| 6516 | .cds--chat-btn--quick-action--selected[disabled],
|
| 6517 | .cds--chat-btn--quick-action--selected[disabled]:hover {
|
| 6518 | border-color: transparent;
|
| 6519 | background: var(--cds-chat-button-selected, rgba(141, 141, 141, 0.2));
|
| 6520 | color: var(--cds-chat-button-text-selected, #525252);
|
| 6521 | }
|
| 6522 |
|
| 6523 | .cds--chat-btn--quick-action.cds--chat-btn--quick-action--selected:not([disabled]):hover,
|
| 6524 | .cds--chat-btn--quick-action.cds--chat-btn--quick-action--selected:not([disabled]):active {
|
| 6525 | color: var(--cds-chat-button-text-selected, #525252);
|
| 6526 | }
|
| 6527 |
|
| 6528 | .cds--chat-btn.cds--skeleton {
|
| 6529 | overflow: hidden;
|
| 6530 | }
|
| 6531 |
|
| 6532 | input:-webkit-autofill,
|
| 6533 | input:-webkit-autofill:hover,
|
| 6534 | input:-webkit-autofill:focus,
|
| 6535 | textarea:-webkit-autofill,
|
| 6536 | textarea:-webkit-autofill:hover,
|
| 6537 | textarea:-webkit-autofill:focus {
|
| 6538 | box-shadow: 0 0 0 1000px var(--cds-field) inset;
|
| 6539 | -webkit-text-fill-color: var(--cds-text-primary, #161616);
|
| 6540 | }
|
| 6541 |
|
| 6542 | .cds--fieldset {
|
| 6543 | box-sizing: border-box;
|
| 6544 | padding: 0;
|
| 6545 | border: 0;
|
| 6546 | margin: 0;
|
| 6547 | font-family: inherit;
|
| 6548 | font-size: 100%;
|
| 6549 | vertical-align: baseline;
|
| 6550 | }
|
| 6551 | .cds--fieldset *,
|
| 6552 | .cds--fieldset *::before,
|
| 6553 | .cds--fieldset *::after {
|
| 6554 | box-sizing: inherit;
|
| 6555 | }
|
| 6556 |
|
| 6557 | .cds--form-item {
|
| 6558 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 6559 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 6560 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 6561 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 6562 | display: flex;
|
| 6563 | flex: 1 1 auto;
|
| 6564 | flex-direction: column;
|
| 6565 | align-items: flex-start;
|
| 6566 | }
|
| 6567 |
|
| 6568 | .cds--label {
|
| 6569 | font-size: var(--cds-label-01-font-size, 0.75rem);
|
| 6570 | font-weight: var(--cds-label-01-font-weight, 400);
|
| 6571 | line-height: var(--cds-label-01-line-height, 1.33333);
|
| 6572 | letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
|
| 6573 | display: inline-block;
|
| 6574 | color: var(--cds-text-secondary, #525252);
|
| 6575 | font-weight: 400;
|
| 6576 | line-height: 1rem;
|
| 6577 | margin-block-end: 0.5rem;
|
| 6578 | vertical-align: baseline;
|
| 6579 | }
|
| 6580 | .cds--label html {
|
| 6581 | font-size: 100%;
|
| 6582 | }
|
| 6583 | .cds--label body {
|
| 6584 | font-weight: 400;
|
| 6585 | font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
|
| 6586 | -moz-osx-font-smoothing: grayscale;
|
| 6587 | -webkit-font-smoothing: antialiased;
|
| 6588 | text-rendering: optimizeLegibility;
|
| 6589 | }
|
| 6590 | .cds--label code {
|
| 6591 | font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
|
| 6592 | }
|
| 6593 | .cds--label strong {
|
| 6594 | font-weight: 600;
|
| 6595 | }
|
| 6596 |
|
| 6597 | .cds--label .cds--toggletip-label {
|
| 6598 | font-size: var(--cds-label-01-font-size, 0.75rem);
|
| 6599 | font-weight: var(--cds-label-01-font-weight, 400);
|
| 6600 | line-height: var(--cds-label-01-line-height, 1.33333);
|
| 6601 | letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
|
| 6602 | }
|
| 6603 |
|
| 6604 | .cds--label--no-margin {
|
| 6605 | margin-block-end: 0;
|
| 6606 | }
|
| 6607 |
|
| 6608 | .cds--label + .cds--tooltip {
|
| 6609 | position: relative;
|
| 6610 | inset-block-start: 0.2rem;
|
| 6611 | inset-inline-start: 0.5rem;
|
| 6612 | }
|
| 6613 |
|
| 6614 | .cds--label + .cds--tooltip .cds--tooltip__trigger {
|
| 6615 | box-sizing: border-box;
|
| 6616 | padding: 0;
|
| 6617 | border: 0;
|
| 6618 | margin: 0;
|
| 6619 | font-family: inherit;
|
| 6620 | font-size: 100%;
|
| 6621 | vertical-align: baseline;
|
| 6622 | display: inline-block;
|
| 6623 | padding: 0;
|
| 6624 | border: 0;
|
| 6625 | -webkit-appearance: none;
|
| 6626 | -moz-appearance: none;
|
| 6627 | appearance: none;
|
| 6628 | background: none;
|
| 6629 | cursor: pointer;
|
| 6630 | text-align: start;
|
| 6631 | inline-size: 100%;
|
| 6632 | display: flex;
|
| 6633 | align-items: center;
|
| 6634 | justify-content: center;
|
| 6635 | font-size: var(--cds-label-01-font-size, 0.75rem);
|
| 6636 | font-weight: var(--cds-label-01-font-weight, 400);
|
| 6637 | line-height: var(--cds-label-01-line-height, 1.33333);
|
| 6638 | letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
|
| 6639 | }
|
| 6640 | .cds--label + .cds--tooltip .cds--tooltip__trigger *,
|
| 6641 | .cds--label + .cds--tooltip .cds--tooltip__trigger *::before,
|
| 6642 | .cds--label + .cds--tooltip .cds--tooltip__trigger *::after {
|
| 6643 | box-sizing: inherit;
|
| 6644 | }
|
| 6645 | .cds--label + .cds--tooltip .cds--tooltip__trigger::-moz-focus-inner {
|
| 6646 | border: 0;
|
| 6647 | }
|
| 6648 |
|
| 6649 | .cds--label + .cds--tooltip .cds--tooltip__trigger:focus {
|
| 6650 | outline: 1px solid var(--cds-focus, #0f62fe);
|
| 6651 | }
|
| 6652 |
|
| 6653 | .cds--label + .cds--tooltip .cds--tooltip__trigger svg {
|
| 6654 | fill: var(--cds-icon-secondary, #525252);
|
| 6655 | }
|
| 6656 |
|
| 6657 | .cds--label + .cds--tooltip .cds--tooltip__trigger svg :hover {
|
| 6658 | fill: var(--cds-icon-primary, #161616);
|
| 6659 | }
|
| 6660 |
|
| 6661 | .cds--label + .cds--toggletip {
|
| 6662 | inset-block-start: 0.2rem;
|
| 6663 | inset-inline-start: 0.5rem;
|
| 6664 | }
|
| 6665 |
|
| 6666 | .cds--label.cds--skeleton {
|
| 6667 | position: relative;
|
| 6668 | padding: 0;
|
| 6669 | border: none;
|
| 6670 | background: var(--cds-skeleton-background, #e8e8e8);
|
| 6671 | box-shadow: none;
|
| 6672 | pointer-events: none;
|
| 6673 | block-size: 0.875rem;
|
| 6674 | inline-size: 4.6875rem;
|
| 6675 | }
|
| 6676 | .cds--label.cds--skeleton:hover, .cds--label.cds--skeleton:focus, .cds--label.cds--skeleton:active {
|
| 6677 | border: none;
|
| 6678 | cursor: default;
|
| 6679 | outline: none;
|
| 6680 | }
|
| 6681 | .cds--label.cds--skeleton::before {
|
| 6682 | position: absolute;
|
| 6683 | animation: 3000ms ease-in-out cds--skeleton infinite;
|
| 6684 | background: var(--cds-skeleton-element, #c6c6c6);
|
| 6685 | block-size: 100%;
|
| 6686 | content: "";
|
| 6687 | inline-size: 100%;
|
| 6688 | will-change: transform-origin, transform, opacity;
|
| 6689 | }
|
| 6690 | @media (prefers-reduced-motion: reduce) {
|
| 6691 | .cds--label.cds--skeleton::before {
|
| 6692 | animation: none;
|
| 6693 | }
|
| 6694 | }
|
| 6695 |
|
| 6696 | input[type=number] {
|
| 6697 | font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
|
| 6698 | }
|
| 6699 |
|
| 6700 | input[data-invalid]:not(:focus),
|
| 6701 | .cds--number[data-invalid] input[type=number]:not(:focus),
|
| 6702 | .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:not(:focus),
|
| 6703 | .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
|
| 6704 | .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
|
| 6705 | .cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused,
|
| 6706 | .cds--combo-box--invalid--focused),
|
| 6707 | .cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus) {
|
| 6708 | outline: 2px solid var(--cds-support-error, #da1e28);
|
| 6709 | outline-offset: -2px;
|
| 6710 | }
|
| 6711 | @media screen and (prefers-contrast) {
|
| 6712 | input[data-invalid]:not(:focus),
|
| 6713 | .cds--number[data-invalid] input[type=number]:not(:focus),
|
| 6714 | .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:not(:focus),
|
| 6715 | .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
|
| 6716 | .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
|
| 6717 | .cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused,
|
| 6718 | .cds--combo-box--invalid--focused),
|
| 6719 | .cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus) {
|
| 6720 | outline-style: dotted;
|
| 6721 | }
|
| 6722 | }
|
| 6723 |
|
| 6724 | input[data-invalid] ~ .cds--form-requirement,
|
| 6725 | .cds--number[data-invalid] .cds--number__input-wrapper ~ .cds--form-requirement,
|
| 6726 | .cds--number__input-wrapper--warning ~ .cds--form-requirement,
|
| 6727 | .cds--date-picker-input__wrapper ~ .cds--form-requirement,
|
| 6728 | .cds--date-picker-input__wrapper--warn ~ .cds--form-requirement,
|
| 6729 | .cds--date-picker-input__wrapper--invalid ~ .cds--form-requirement,
|
| 6730 | .cds--time-picker--invalid ~ .cds--form-requirement,
|
| 6731 | .cds--time-picker--warning ~ .cds--form-requirement,
|
| 6732 | .cds--text-input__field-wrapper[data-invalid] ~ .cds--form-requirement,
|
| 6733 | .cds--text-input__field-wrapper--warning ~ .cds--form-requirement,
|
| 6734 | .cds--text-input__field-wrapper--warning > .cds--text-input ~ .cds--form-requirement,
|
| 6735 | .cds--text-area__wrapper[data-invalid] ~ .cds--form-requirement,
|
| 6736 | .cds--text-area__wrapper--warn ~ .cds--form-requirement,
|
| 6737 | .cds--select-input__wrapper[data-invalid] ~ .cds--form-requirement,
|
| 6738 | .cds--select--warning .cds--select-input__wrapper ~ .cds--form-requirement,
|
| 6739 | .cds--time-picker[data-invalid] ~ .cds--form-requirement,
|
| 6740 | .cds--list-box[data-invalid] ~ .cds--form-requirement,
|
| 6741 | .cds--list-box--warning ~ .cds--form-requirement {
|
| 6742 | display: block;
|
| 6743 | overflow: visible;
|
| 6744 | font-weight: 400;
|
| 6745 | max-block-size: 12.5rem;
|
| 6746 | }
|
| 6747 |
|
| 6748 | input[data-invalid] ~ .cds--form-requirement,
|
| 6749 | .cds--number[data-invalid] .cds--number__input-wrapper ~ .cds--form-requirement,
|
| 6750 | .cds--date-picker-input__wrapper ~ .cds--form-requirement,
|
| 6751 | .cds--date-picker-input__wrapper--invalid ~ .cds--form-requirement,
|
| 6752 | .cds--time-picker--invalid ~ .cds--form-requirement,
|
| 6753 | .cds--text-input__field-wrapper[data-invalid] ~ .cds--form-requirement,
|
| 6754 | .cds--text-area__wrapper[data-invalid] ~ .cds--form-requirement,
|
| 6755 | .cds--select-input__wrapper[data-invalid] ~ .cds--form-requirement,
|
| 6756 | .cds--time-picker[data-invalid] ~ .cds--form-requirement,
|
| 6757 | .cds--list-box[data-invalid] ~ .cds--form-requirement {
|
| 6758 | color: var(--cds-text-error, #da1e28);
|
| 6759 | }
|
| 6760 |
|
| 6761 | .cds--form--fluid .cds--text-input__field-wrapper[data-invalid],
|
| 6762 | .cds--form--fluid .cds--text-input__field-wrapper--warning {
|
| 6763 | display: block;
|
| 6764 | }
|
| 6765 |
|
| 6766 | .cds--form--fluid input[data-invalid] {
|
| 6767 | outline: none;
|
| 6768 | }
|
| 6769 |
|
| 6770 | .cds--form--fluid .cds--form-requirement {
|
| 6771 | padding: 0.5rem 2.5rem 0.5rem 1rem;
|
| 6772 | margin: 0;
|
| 6773 | }
|
| 6774 |
|
| 6775 | input:not(output, [data-invalid]):-moz-ui-invalid {
|
| 6776 | box-shadow: none;
|
| 6777 | }
|
| 6778 |
|
| 6779 | .cds--form-requirement {
|
| 6780 | font-size: var(--cds-label-01-font-size, 0.75rem);
|
| 6781 | font-weight: var(--cds-label-01-font-weight, 400);
|
| 6782 | line-height: var(--cds-label-01-line-height, 1.33333);
|
| 6783 | letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
|
| 6784 | display: none;
|
| 6785 | overflow: hidden;
|
| 6786 | margin: 0.25rem 0 0;
|
| 6787 | max-block-size: 0;
|
| 6788 | }
|
| 6789 | .cds--form-requirement html {
|
| 6790 | font-size: 100%;
|
| 6791 | }
|
| 6792 | .cds--form-requirement body {
|
| 6793 | font-weight: 400;
|
| 6794 | font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
|
| 6795 | -moz-osx-font-smoothing: grayscale;
|
| 6796 | -webkit-font-smoothing: antialiased;
|
| 6797 | text-rendering: optimizeLegibility;
|
| 6798 | }
|
| 6799 | .cds--form-requirement code {
|
| 6800 | font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
|
| 6801 | }
|
| 6802 | .cds--form-requirement strong {
|
| 6803 | font-weight: 600;
|
| 6804 | }
|
| 6805 |
|
| 6806 | .cds--select--inline .cds--form__helper-text {
|
| 6807 | margin-block-start: 0;
|
| 6808 | }
|
| 6809 |
|
| 6810 | .cds--form__helper-text {
|
| 6811 | font-size: var(--cds-helper-text-01-font-size, 0.75rem);
|
| 6812 | line-height: var(--cds-helper-text-01-line-height, 1.33333);
|
| 6813 | letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
|
| 6814 | z-index: 0;
|
| 6815 | color: var(--cds-text-secondary, #525252);
|
| 6816 | inline-size: 100%;
|
| 6817 | margin-block-start: 0.25rem;
|
| 6818 | opacity: 1;
|
| 6819 | }
|
| 6820 |
|
| 6821 | .cds--label--disabled,
|
| 6822 | .cds--form__helper-text--disabled {
|
| 6823 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 6824 | }
|
| 6825 |
|
| 6826 | fieldset[disabled] .cds--label,
|
| 6827 | fieldset[disabled] .cds--form__helper-text {
|
| 6828 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 6829 | }
|
| 6830 |
|
| 6831 | .cds--checkbox-group {
|
| 6832 | box-sizing: border-box;
|
| 6833 | padding: 0;
|
| 6834 | border: 0;
|
| 6835 | margin: 0;
|
| 6836 | font-family: inherit;
|
| 6837 | font-size: 100%;
|
| 6838 | vertical-align: baseline;
|
| 6839 | }
|
| 6840 | .cds--checkbox-group *,
|
| 6841 | .cds--checkbox-group *::before,
|
| 6842 | .cds--checkbox-group *::after {
|
| 6843 | box-sizing: inherit;
|
| 6844 | }
|
| 6845 |
|
| 6846 | .cds--form-item.cds--checkbox-wrapper {
|
| 6847 | position: relative;
|
| 6848 | margin-block-end: 0.375rem;
|
| 6849 | }
|
| 6850 |
|
| 6851 | .cds--form-item.cds--checkbox-wrapper:first-of-type {
|
| 6852 | margin-block-start: 0;
|
| 6853 | }
|
| 6854 |
|
| 6855 | .cds--label + .cds--form-item.cds--checkbox-wrapper {
|
| 6856 | margin-block-start: -0.125rem;
|
| 6857 | }
|
| 6858 |
|
| 6859 | .cds--form-item.cds--checkbox-wrapper:last-of-type {
|
| 6860 | margin-block-end: 0.1875rem;
|
| 6861 | }
|
| 6862 |
|
| 6863 | .cds--checkbox {
|
| 6864 | position: absolute;
|
| 6865 | overflow: hidden;
|
| 6866 | padding: 0;
|
| 6867 | border: 0;
|
| 6868 | margin: -1px;
|
| 6869 | block-size: 1px;
|
| 6870 | clip: rect(0, 0, 0, 0);
|
| 6871 | inline-size: 1px;
|
| 6872 | visibility: inherit;
|
| 6873 | white-space: nowrap;
|
| 6874 | inset-block-start: 1.25rem;
|
| 6875 | inset-inline-start: 0.7rem;
|
| 6876 | }
|
| 6877 |
|
| 6878 | .cds--checkbox-label {
|
| 6879 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 6880 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 6881 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 6882 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 6883 | position: relative;
|
| 6884 | display: flex;
|
| 6885 | cursor: pointer;
|
| 6886 | min-block-size: 1.25rem;
|
| 6887 | padding-block-start: 0.125rem;
|
| 6888 | padding-inline-start: 1.25rem;
|
| 6889 | -webkit-user-select: none;
|
| 6890 | -moz-user-select: none;
|
| 6891 | user-select: none;
|
| 6892 | }
|
| 6893 | .cds--checkbox-label html {
|
| 6894 | font-size: 100%;
|
| 6895 | }
|
| 6896 | .cds--checkbox-label body {
|
| 6897 | font-weight: 400;
|
| 6898 | font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
|
| 6899 | -moz-osx-font-smoothing: grayscale;
|
| 6900 | -webkit-font-smoothing: antialiased;
|
| 6901 | text-rendering: optimizeLegibility;
|
| 6902 | }
|
| 6903 | .cds--checkbox-label code {
|
| 6904 | font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
|
| 6905 | }
|
| 6906 | .cds--checkbox-label strong {
|
| 6907 | font-weight: 600;
|
| 6908 | }
|
| 6909 |
|
| 6910 | .cds--checkbox-label-text {
|
| 6911 | padding-inline-start: 0.625rem;
|
| 6912 | }
|
| 6913 |
|
| 6914 | .cds--checkbox-label::before,
|
| 6915 | .cds--checkbox-label::after {
|
| 6916 | box-sizing: border-box;
|
| 6917 | }
|
| 6918 | @media print {
|
| 6919 | .cds--checkbox-label::before,
|
| 6920 | .cds--checkbox-label::after {
|
| 6921 | -webkit-print-color-adjust: exact;
|
| 6922 | print-color-adjust: exact;
|
| 6923 | }
|
| 6924 | }
|
| 6925 |
|
| 6926 | .cds--checkbox-label::before {
|
| 6927 | position: absolute;
|
| 6928 | border: 1px solid var(--cds-icon-primary, #161616);
|
| 6929 | border-radius: 2px;
|
| 6930 | background-color: transparent;
|
| 6931 | block-size: 1rem;
|
| 6932 | content: "";
|
| 6933 | inline-size: 1rem;
|
| 6934 | inset-block-start: 0.125rem;
|
| 6935 | inset-inline-start: 0;
|
| 6936 | margin-block: 0.0625rem 0.125rem;
|
| 6937 | margin-inline: 0.1875rem 0;
|
| 6938 | }
|
| 6939 |
|
| 6940 | .cds--checkbox-label::after {
|
| 6941 | position: absolute;
|
| 6942 | background: none;
|
| 6943 | block-size: 0.3125rem;
|
| 6944 | border-block-end: 1.5px solid var(--cds-icon-inverse, #ffffff);
|
| 6945 | border-inline-start: 1.5px solid var(--cds-icon-inverse, #ffffff);
|
| 6946 | content: "";
|
| 6947 | inline-size: 0.5625rem;
|
| 6948 | inset-block-start: 0.40625rem;
|
| 6949 | inset-inline-start: 0.4375rem;
|
| 6950 | margin-block-start: -0.1875rem;
|
| 6951 | transform: scale(0) rotate(-45deg);
|
| 6952 | transform-origin: bottom right;
|
| 6953 | }
|
| 6954 |
|
| 6955 | .cds--checkbox:checked + .cds--checkbox-label::before,
|
| 6956 | .cds--checkbox:indeterminate + .cds--checkbox-label::before,
|
| 6957 | .cds--checkbox-label[data-contained-checkbox-state=true]::before {
|
| 6958 | border: none;
|
| 6959 | border-width: 1px;
|
| 6960 | background-color: var(--cds-icon-primary, #161616);
|
| 6961 | }
|
| 6962 |
|
| 6963 | .cds--checkbox:checked + .cds--checkbox-label::after,
|
| 6964 | .cds--checkbox-label[data-contained-checkbox-state=true]::after {
|
| 6965 | transform: scale(1) rotate(-45deg);
|
| 6966 | }
|
| 6967 |
|
| 6968 | .cds--checkbox:indeterminate + .cds--checkbox-label::after {
|
| 6969 | border-block-end: 2px solid var(--cds-icon-inverse, #ffffff);
|
| 6970 | border-inline-start: 0 solid var(--cds-icon-inverse, #ffffff);
|
| 6971 | inline-size: 0.5rem;
|
| 6972 | inset-block-start: 0.6875rem;
|
| 6973 | transform: scale(1) rotate(0deg);
|
| 6974 | }
|
| 6975 |
|
| 6976 | .cds--checkbox:focus + .cds--checkbox-label::before,
|
| 6977 | .cds--checkbox-label__focus::before,
|
| 6978 | .cds--checkbox:checked:focus + .cds--checkbox-label::before,
|
| 6979 | .cds--checkbox-label[data-contained-checkbox-state=true].cds--checkbox-label__focus::before,
|
| 6980 | .cds--checkbox:indeterminate:focus + .cds--checkbox-label::before {
|
| 6981 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 6982 | outline-offset: 1px;
|
| 6983 | }
|
| 6984 |
|
| 6985 | .cds--checkbox:disabled + .cds--checkbox-label,
|
| 6986 | .cds--checkbox-label[data-contained-checkbox-disabled=true] {
|
| 6987 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 6988 | cursor: not-allowed;
|
| 6989 | }
|
| 6990 |
|
| 6991 | .cds--checkbox:disabled + .cds--checkbox-label::before,
|
| 6992 | .cds--checkbox-label[data-contained-checkbox-disabled=true]::before {
|
| 6993 | border-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 6994 | }
|
| 6995 |
|
| 6996 | .cds--checkbox:checked:disabled + .cds--checkbox-label::before,
|
| 6997 | .cds--checkbox:indeterminate:disabled + .cds--checkbox-label::before,
|
| 6998 | .cds--checkbox-label[data-contained-checkbox-state=true][data-contained-checkbox-disabled=true]::before {
|
| 6999 | background-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 7000 | }
|
| 7001 |
|
| 7002 | .cds--checkbox-group[data-invalid] .cds--checkbox-label::before,
|
| 7003 | .cds--checkbox-wrapper--invalid .cds--checkbox-label::before,
|
| 7004 | .cds--checkbox-wrapper--invalid .cds--checkbox:checked + .cds--checkbox-label::before {
|
| 7005 | border: 1px solid var(--cds-support-error, #da1e28);
|
| 7006 | }
|
| 7007 |
|
| 7008 | .cds--checkbox-group .cds--checkbox-wrapper--invalid > .cds--checkbox__validation-msg,
|
| 7009 | .cds--checkbox-group .cds--checkbox-wrapper--warning > .cds--checkbox__validation-msg,
|
| 7010 | .cds--checkbox-group .cds--checkbox-wrapper > .cds--form__helper-text {
|
| 7011 | display: none;
|
| 7012 | }
|
| 7013 |
|
| 7014 | .cds--checkbox-group:not(.cds--checkbox-group[data-invalid]) .cds--checkbox-wrapper--invalid .cds--checkbox-label::before,
|
| 7015 | .cds--checkbox-group:not(.cds--checkbox-group[data-invalid]) .cds--checkbox-wrapper--invalid .cds--checkbox:checked + .cds--checkbox-label::before {
|
| 7016 | border: 1px solid var(--cds-icon-primary, #161616);
|
| 7017 | }
|
| 7018 |
|
| 7019 | .cds--checkbox-group__validation-msg,
|
| 7020 | .cds--checkbox__validation-msg {
|
| 7021 | display: none;
|
| 7022 | align-items: flex-start;
|
| 7023 | margin-block-start: 0.25rem;
|
| 7024 | }
|
| 7025 |
|
| 7026 | .cds--checkbox__invalid-icon {
|
| 7027 | margin: 0.0625rem 0.0625rem 0 0.1875rem;
|
| 7028 | fill: var(--cds-support-error, #da1e28);
|
| 7029 | min-inline-size: 1rem;
|
| 7030 | }
|
| 7031 |
|
| 7032 | .cds--checkbox__invalid-icon--warning {
|
| 7033 | fill: var(--cds-support-warning, #f1c21b);
|
| 7034 | }
|
| 7035 |
|
| 7036 | .cds--checkbox__invalid-icon--warning path:first-of-type {
|
| 7037 | fill: #000000;
|
| 7038 | }
|
| 7039 |
|
| 7040 | .cds--checkbox-group--invalid .cds--checkbox-group__validation-msg,
|
| 7041 | .cds--checkbox-group--warning .cds--checkbox-group__validation-msg,
|
| 7042 | .cds--checkbox-wrapper--invalid > .cds--checkbox__validation-msg,
|
| 7043 | .cds--checkbox-wrapper--warning > .cds--checkbox__validation-msg {
|
| 7044 | display: flex;
|
| 7045 | }
|
| 7046 |
|
| 7047 | .cds--checkbox-group--invalid .cds--checkbox-group__validation-msg .cds--form-requirement,
|
| 7048 | .cds--checkbox-group--warning .cds--checkbox-group__validation-msg .cds--form-requirement,
|
| 7049 | .cds--checkbox-wrapper--invalid .cds--checkbox__validation-msg .cds--form-requirement,
|
| 7050 | .cds--checkbox-wrapper--warning .cds--checkbox__validation-msg .cds--form-requirement {
|
| 7051 | display: block;
|
| 7052 | overflow: visible;
|
| 7053 | margin-block-start: 0;
|
| 7054 | margin-inline-start: 0.5rem;
|
| 7055 | max-block-size: 100%;
|
| 7056 | }
|
| 7057 |
|
| 7058 | .cds--checkbox-group--invalid .cds--checkbox-group__validation-msg .cds--form-requirement,
|
| 7059 | .cds--checkbox-wrapper--invalid .cds--checkbox__validation-msg .cds--form-requirement {
|
| 7060 | color: var(--cds-text-error, #da1e28);
|
| 7061 | }
|
| 7062 |
|
| 7063 | .cds--checkbox-group--readonly .cds--checkbox-label,
|
| 7064 | .cds--checkbox-wrapper--readonly .cds--checkbox-label {
|
| 7065 | cursor: default;
|
| 7066 | }
|
| 7067 |
|
| 7068 | .cds--checkbox-group--readonly .cds--checkbox-label-text,
|
| 7069 | .cds--checkbox-wrapper--readonly .cds--checkbox-label-text {
|
| 7070 | cursor: text;
|
| 7071 | -webkit-user-select: text;
|
| 7072 | -moz-user-select: text;
|
| 7073 | user-select: text;
|
| 7074 | }
|
| 7075 |
|
| 7076 | .cds--checkbox-group--readonly .cds--checkbox + .cds--checkbox-label::before,
|
| 7077 | .cds--checkbox-wrapper--readonly .cds--checkbox + .cds--checkbox-label::before {
|
| 7078 | border-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 7079 | }
|
| 7080 |
|
| 7081 | .cds--checkbox-group--readonly .cds--checkbox:checked + .cds--checkbox-label::before,
|
| 7082 | .cds--checkbox-wrapper--readonly .cds--checkbox:checked + .cds--checkbox-label::before {
|
| 7083 | border: 1px solid var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 7084 | background: transparent;
|
| 7085 | }
|
| 7086 |
|
| 7087 | .cds--checkbox-group--readonly .cds--checkbox:checked + .cds--checkbox-label::after,
|
| 7088 | .cds--checkbox-wrapper--readonly .cds--checkbox:checked + .cds--checkbox-label::after {
|
| 7089 | border-color: var(--cds-text-primary, #161616);
|
| 7090 | }
|
| 7091 |
|
| 7092 | .cds--checkbox-skeleton .cds--checkbox-label {
|
| 7093 | cursor: default;
|
| 7094 | }
|
| 7095 |
|
| 7096 | .cds--checkbox-label-text.cds--skeleton {
|
| 7097 | position: relative;
|
| 7098 | padding: 0;
|
| 7099 | border: none;
|
| 7100 | background: var(--cds-skeleton-background, #e8e8e8);
|
| 7101 | box-shadow: none;
|
| 7102 | pointer-events: none;
|
| 7103 | block-size: 1rem;
|
| 7104 | inline-size: 6.25rem;
|
| 7105 | margin-block: 0.0625rem 0;
|
| 7106 | margin-inline: 0.375rem 0;
|
| 7107 | }
|
| 7108 | .cds--checkbox-label-text.cds--skeleton:hover, .cds--checkbox-label-text.cds--skeleton:focus, .cds--checkbox-label-text.cds--skeleton:active {
|
| 7109 | border: none;
|
| 7110 | cursor: default;
|
| 7111 | outline: none;
|
| 7112 | }
|
| 7113 | .cds--checkbox-label-text.cds--skeleton::before {
|
| 7114 | position: absolute;
|
| 7115 | animation: 3000ms ease-in-out cds--skeleton infinite;
|
| 7116 | background: var(--cds-skeleton-element, #c6c6c6);
|
| 7117 | block-size: 100%;
|
| 7118 | content: "";
|
| 7119 | inline-size: 100%;
|
| 7120 | will-change: transform-origin, transform, opacity;
|
| 7121 | }
|
| 7122 | @media (prefers-reduced-motion: reduce) {
|
| 7123 | .cds--checkbox-label-text.cds--skeleton::before {
|
| 7124 | animation: none;
|
| 7125 | }
|
| 7126 | }
|
| 7127 |
|
| 7128 | .cds--checkbox--inline {
|
| 7129 | position: relative;
|
| 7130 | }
|
| 7131 |
|
| 7132 | [dir=rtl] .cds--checkbox-label::after {
|
| 7133 | margin-block-start: 0;
|
| 7134 | margin-inline-start: -0.0625rem;
|
| 7135 | transform-origin: center;
|
| 7136 | }
|
| 7137 |
|
| 7138 | [dir=rtl] .cds--checkbox:checked + .cds--checkbox-label::after,
|
| 7139 | [dir=rtl] .cds--checkbox-label[data-contained-checkbox-state=true]::after {
|
| 7140 | transform: scale(1.2) rotate3d(0.5, 1, 0, 158deg);
|
| 7141 | }
|
| 7142 |
|
| 7143 | .cds--checkbox-group--slug legend.cds--label,
|
| 7144 | .cds--checkbox-wrapper--slug .cds--checkbox-label-text {
|
| 7145 | display: flex;
|
| 7146 | }
|
| 7147 |
|
| 7148 | .cds--checkbox-group--slug legend.cds--label .cds--slug,
|
| 7149 | .cds--checkbox-wrapper--slug .cds--checkbox-label-text .cds--slug {
|
| 7150 | margin-inline-start: 0.5rem;
|
| 7151 | }
|
| 7152 |
|
| 7153 | .cds--checkbox-wrapper--slug .cds--checkbox-label-text .cds--slug__button--inline {
|
| 7154 | line-height: inherit;
|
| 7155 | margin-block-start: -0.0625rem;
|
| 7156 | }
|
| 7157 |
|
| 7158 | .cds--checkbox-group--horizontal {
|
| 7159 | position: relative;
|
| 7160 | display: flex;
|
| 7161 | flex-flow: row wrap;
|
| 7162 | justify-content: flex-start;
|
| 7163 | }
|
| 7164 | .cds--checkbox-group--horizontal .cds--form-item {
|
| 7165 | flex: none;
|
| 7166 | margin-block-end: 0;
|
| 7167 | }
|
| 7168 | .cds--checkbox-group--horizontal .cds--form-item:not(:last-of-type) {
|
| 7169 | margin-inline-end: 1rem;
|
| 7170 | }
|
| 7171 | .cds--checkbox-group--horizontal .cds--checkbox-label-text {
|
| 7172 | padding-inline-start: 0.5rem;
|
| 7173 | }
|
| 7174 | .cds--checkbox-group--horizontal .cds--label + .cds--form-item.cds--checkbox-wrapper {
|
| 7175 | margin-block-start: 0;
|
| 7176 | }
|
| 7177 |
|
| 7178 | .cds--copy-btn {
|
| 7179 | position: relative;
|
| 7180 | display: flex;
|
| 7181 | align-items: center;
|
| 7182 | justify-content: center;
|
| 7183 | padding: 0;
|
| 7184 | border: none;
|
| 7185 | background-color: var(--cds-layer);
|
| 7186 | cursor: pointer;
|
| 7187 | }
|
| 7188 | .cds--copy-btn html {
|
| 7189 | font-size: 100%;
|
| 7190 | }
|
| 7191 | .cds--copy-btn body {
|
| 7192 | font-weight: 400;
|
| 7193 | font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
|
| 7194 | -moz-osx-font-smoothing: grayscale;
|
| 7195 | -webkit-font-smoothing: antialiased;
|
| 7196 | text-rendering: optimizeLegibility;
|
| 7197 | }
|
| 7198 | .cds--copy-btn code {
|
| 7199 | font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
|
| 7200 | }
|
| 7201 | .cds--copy-btn strong {
|
| 7202 | font-weight: 600;
|
| 7203 | }
|
| 7204 | .cds--copy-btn:hover {
|
| 7205 | background-color: var(--cds-layer-hover);
|
| 7206 | }
|
| 7207 | .cds--copy-btn:active {
|
| 7208 | background-color: var(--cds-layer-active);
|
| 7209 | }
|
| 7210 | .cds--copy-btn::before {
|
| 7211 | position: absolute;
|
| 7212 | z-index: 6000;
|
| 7213 | border-style: solid;
|
| 7214 | block-size: 0;
|
| 7215 | content: "";
|
| 7216 | inline-size: 0;
|
| 7217 | display: none;
|
| 7218 | }
|
| 7219 | .cds--copy-btn .cds--copy-btn__feedback {
|
| 7220 | box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
|
| 7221 | z-index: 6000;
|
| 7222 | padding: 0.1875rem 1rem;
|
| 7223 | border-radius: 0.125rem;
|
| 7224 | background-color: var(--cds-background-inverse, #393939);
|
| 7225 | block-size: auto;
|
| 7226 | color: var(--cds-text-inverse, #ffffff);
|
| 7227 | font-weight: 400;
|
| 7228 | inline-size: -moz-max-content;
|
| 7229 | inline-size: max-content;
|
| 7230 | max-inline-size: 13rem;
|
| 7231 | min-inline-size: 1.5rem;
|
| 7232 | text-align: start;
|
| 7233 | transform: translateX(-50%);
|
| 7234 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 7235 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 7236 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 7237 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 7238 | display: none;
|
| 7239 | overflow: visible;
|
| 7240 | box-sizing: content-box;
|
| 7241 | margin: auto;
|
| 7242 | clip: auto;
|
| 7243 | }
|
| 7244 | @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
| 7245 | .cds--copy-btn .cds--copy-btn__feedback {
|
| 7246 | inline-size: auto;
|
| 7247 | }
|
| 7248 | }
|
| 7249 | @supports (-ms-accelerator: true) {
|
| 7250 | .cds--copy-btn .cds--copy-btn__feedback {
|
| 7251 | inline-size: auto;
|
| 7252 | }
|
| 7253 | }
|
| 7254 | @supports (-ms-ime-align: auto) {
|
| 7255 | .cds--copy-btn .cds--copy-btn__feedback {
|
| 7256 | inline-size: auto;
|
| 7257 | }
|
| 7258 | }
|
| 7259 | @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
|
| 7260 | .cds--copy-btn .cds--copy-btn__feedback {
|
| 7261 | border: 1px solid transparent;
|
| 7262 | }
|
| 7263 | }
|
| 7264 | .cds--copy-btn:focus {
|
| 7265 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 7266 | outline-offset: -2px;
|
| 7267 | outline-color: var(--cds-focus, #0f62fe);
|
| 7268 | }
|
| 7269 | @media screen and (prefers-contrast) {
|
| 7270 | .cds--copy-btn:focus {
|
| 7271 | outline-style: dotted;
|
| 7272 | }
|
| 7273 | }
|
| 7274 | .cds--copy-btn.cds--copy-btn--animating::before, .cds--copy-btn.cds--copy-btn--animating .cds--copy-btn__feedback {
|
| 7275 | display: block;
|
| 7276 | }
|
| 7277 | .cds--copy-btn.cds--copy-btn--animating::before {
|
| 7278 | border: none;
|
| 7279 | }
|
| 7280 | .cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-out::before, .cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-out .cds--copy-btn__feedback {
|
| 7281 | animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) cds--hide-feedback;
|
| 7282 | }
|
| 7283 | .cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-in::before, .cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-in .cds--copy-btn__feedback {
|
| 7284 | animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) cds--show-feedback;
|
| 7285 | }
|
| 7286 |
|
| 7287 | .cds--copy-btn svg {
|
| 7288 | fill: var(--cds-icon-primary, #161616);
|
| 7289 | }
|
| 7290 |
|
| 7291 | .cds--copy {
|
| 7292 | font-size: 0;
|
| 7293 | }
|
| 7294 |
|
| 7295 | .cds--snippet html {
|
| 7296 | font-size: 100%;
|
| 7297 | }
|
| 7298 | .cds--snippet body {
|
| 7299 | font-weight: 400;
|
| 7300 | font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
|
| 7301 | -moz-osx-font-smoothing: grayscale;
|
| 7302 | -webkit-font-smoothing: antialiased;
|
| 7303 | text-rendering: optimizeLegibility;
|
| 7304 | }
|
| 7305 | .cds--snippet code {
|
| 7306 | font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
|
| 7307 | }
|
| 7308 | .cds--snippet strong {
|
| 7309 | font-weight: 600;
|
| 7310 | }
|
| 7311 |
|
| 7312 | .cds--snippet--disabled,
|
| 7313 | .cds--snippet--disabled .cds--btn.cds--snippet-btn--expand {
|
| 7314 | background-color: var(--cds-layer);
|
| 7315 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 7316 | }
|
| 7317 |
|
| 7318 | .cds--snippet--disabled .cds--snippet-btn--expand:hover,
|
| 7319 | .cds--snippet--disabled .cds--copy-btn,
|
| 7320 | .cds--snippet--disabled .cds--copy-btn:hover {
|
| 7321 | background-color: var(--cds-layer);
|
| 7322 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 7323 | cursor: not-allowed;
|
| 7324 | }
|
| 7325 |
|
| 7326 | .cds--snippet--disabled .cds--snippet__icon,
|
| 7327 | .cds--snippet--disabled .cds--snippet-btn--expand .cds--icon-chevron--down {
|
| 7328 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 7329 | }
|
| 7330 |
|
| 7331 | .cds--snippet code {
|
| 7332 | font-family: var(--cds-code-01-font-family, 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace);
|
| 7333 | font-size: var(--cds-code-01-font-size, 0.75rem);
|
| 7334 | font-weight: var(--cds-code-01-font-weight, 400);
|
| 7335 | line-height: var(--cds-code-01-line-height, 1.33333);
|
| 7336 | letter-spacing: var(--cds-code-01-letter-spacing, 0.32px);
|
| 7337 | }
|
| 7338 |
|
| 7339 | .cds--snippet--inline {
|
| 7340 | position: relative;
|
| 7341 | display: inline;
|
| 7342 | padding: 0;
|
| 7343 | border: 1px solid transparent;
|
| 7344 | border-radius: 4px;
|
| 7345 | background-color: var(--cds-layer);
|
| 7346 | color: var(--cds-text-primary, #161616);
|
| 7347 | cursor: pointer;
|
| 7348 | }
|
| 7349 | .cds--snippet--inline html {
|
| 7350 | font-size: 100%;
|
| 7351 | }
|
| 7352 | .cds--snippet--inline body {
|
| 7353 | font-weight: 400;
|
| 7354 | font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
|
| 7355 | -moz-osx-font-smoothing: grayscale;
|
| 7356 | -webkit-font-smoothing: antialiased;
|
| 7357 | text-rendering: optimizeLegibility;
|
| 7358 | }
|
| 7359 | .cds--snippet--inline code {
|
| 7360 | font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
|
| 7361 | }
|
| 7362 | .cds--snippet--inline strong {
|
| 7363 | font-weight: 600;
|
| 7364 | }
|
| 7365 | .cds--snippet--inline:hover {
|
| 7366 | background-color: var(--cds-layer-hover);
|
| 7367 | }
|
| 7368 | .cds--snippet--inline:active {
|
| 7369 | background-color: var(--cds-layer-active);
|
| 7370 | }
|
| 7371 | .cds--snippet--inline:focus {
|
| 7372 | border: 1px solid var(--cds-focus, #0f62fe);
|
| 7373 | outline: none;
|
| 7374 | }
|
| 7375 | .cds--snippet--inline::before {
|
| 7376 | position: absolute;
|
| 7377 | z-index: 6000;
|
| 7378 | border-style: solid;
|
| 7379 | block-size: 0;
|
| 7380 | content: "";
|
| 7381 | inline-size: 0;
|
| 7382 | display: none;
|
| 7383 | border: none;
|
| 7384 | }
|
| 7385 | .cds--snippet--inline .cds--copy-btn__feedback {
|
| 7386 | box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
|
| 7387 | z-index: 6000;
|
| 7388 | padding: 0.1875rem 1rem;
|
| 7389 | border-radius: 0.125rem;
|
| 7390 | background-color: var(--cds-background-inverse, #393939);
|
| 7391 | block-size: auto;
|
| 7392 | color: var(--cds-text-inverse, #ffffff);
|
| 7393 | font-weight: 400;
|
| 7394 | inline-size: -moz-max-content;
|
| 7395 | inline-size: max-content;
|
| 7396 | max-inline-size: 13rem;
|
| 7397 | min-inline-size: 1.5rem;
|
| 7398 | text-align: start;
|
| 7399 | transform: translateX(-50%);
|
| 7400 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 7401 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 7402 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 7403 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 7404 | display: none;
|
| 7405 | overflow: visible;
|
| 7406 | box-sizing: content-box;
|
| 7407 | margin: auto;
|
| 7408 | clip: auto;
|
| 7409 | }
|
| 7410 | @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
| 7411 | .cds--snippet--inline .cds--copy-btn__feedback {
|
| 7412 | inline-size: auto;
|
| 7413 | }
|
| 7414 | }
|
| 7415 | @supports (-ms-accelerator: true) {
|
| 7416 | .cds--snippet--inline .cds--copy-btn__feedback {
|
| 7417 | inline-size: auto;
|
| 7418 | }
|
| 7419 | }
|
| 7420 | @supports (-ms-ime-align: auto) {
|
| 7421 | .cds--snippet--inline .cds--copy-btn__feedback {
|
| 7422 | inline-size: auto;
|
| 7423 | }
|
| 7424 | }
|
| 7425 | @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
|
| 7426 | .cds--snippet--inline .cds--copy-btn__feedback {
|
| 7427 | border: 1px solid transparent;
|
| 7428 | }
|
| 7429 | }
|
| 7430 |
|
| 7431 | .cds--snippet--inline.cds--copy-btn--animating::before,
|
| 7432 | .cds--snippet--inline.cds--copy-btn--animating .cds--copy-btn__feedback {
|
| 7433 | display: block;
|
| 7434 | }
|
| 7435 |
|
| 7436 | .cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-out::before,
|
| 7437 | .cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-out .cds--copy-btn__feedback {
|
| 7438 | animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) cds--hide-feedback;
|
| 7439 | }
|
| 7440 |
|
| 7441 | .cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-in::before,
|
| 7442 | .cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-in .cds--copy-btn__feedback {
|
| 7443 | animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) cds--show-feedback;
|
| 7444 | }
|
| 7445 |
|
| 7446 | .cds--snippet--inline code {
|
| 7447 | padding: 0 0.5rem;
|
| 7448 | }
|
| 7449 |
|
| 7450 | .cds--snippet--inline.cds--snippet--no-copy {
|
| 7451 | display: inline-block;
|
| 7452 | }
|
| 7453 | .cds--snippet--inline.cds--snippet--no-copy:hover {
|
| 7454 | background-color: var(--cds-layer);
|
| 7455 | cursor: auto;
|
| 7456 | }
|
| 7457 |
|
| 7458 | .cds--snippet--light.cds--snippet--inline.cds--snippet--no-copy:hover {
|
| 7459 | background-color: var(--cds-layer-hover);
|
| 7460 | cursor: auto;
|
| 7461 | }
|
| 7462 |
|
| 7463 | .cds--snippet--single {
|
| 7464 | font-family: var(--cds-code-01-font-family, 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace);
|
| 7465 | font-size: var(--cds-code-01-font-size, 0.75rem);
|
| 7466 | font-weight: var(--cds-code-01-font-weight, 400);
|
| 7467 | line-height: var(--cds-code-01-line-height, 1.33333);
|
| 7468 | letter-spacing: var(--cds-code-01-letter-spacing, 0.32px);
|
| 7469 | position: relative;
|
| 7470 | background-color: var(--cds-layer);
|
| 7471 | inline-size: 100%;
|
| 7472 | max-inline-size: 48rem;
|
| 7473 | display: flex;
|
| 7474 | align-items: center;
|
| 7475 | block-size: 2.5rem;
|
| 7476 | padding-inline-end: 2.5rem;
|
| 7477 | }
|
| 7478 |
|
| 7479 | .cds--snippet--single.cds--snippet--no-copy {
|
| 7480 | padding: 0;
|
| 7481 | }
|
| 7482 | .cds--snippet--single.cds--snippet--no-copy::after {
|
| 7483 | inset-inline-end: 1rem;
|
| 7484 | }
|
| 7485 |
|
| 7486 | .cds--snippet--single .cds--snippet-container {
|
| 7487 | position: relative;
|
| 7488 | display: flex;
|
| 7489 | align-items: center;
|
| 7490 | block-size: 100%;
|
| 7491 | overflow-x: auto;
|
| 7492 | padding-inline-start: 1rem;
|
| 7493 | }
|
| 7494 | .cds--snippet--single .cds--snippet-container:focus {
|
| 7495 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 7496 | outline-offset: -2px;
|
| 7497 | }
|
| 7498 | @media screen and (prefers-contrast) {
|
| 7499 | .cds--snippet--single .cds--snippet-container:focus {
|
| 7500 | outline-style: dotted;
|
| 7501 | }
|
| 7502 | }
|
| 7503 |
|
| 7504 | .cds--snippet--single pre {
|
| 7505 | font-family: var(--cds-code-01-font-family, 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace);
|
| 7506 | font-size: var(--cds-code-01-font-size, 0.75rem);
|
| 7507 | font-weight: var(--cds-code-01-font-weight, 400);
|
| 7508 | line-height: var(--cds-code-01-line-height, 1.33333);
|
| 7509 | letter-spacing: var(--cds-code-01-letter-spacing, 0.32px);
|
| 7510 | padding-inline-end: 0.5rem;
|
| 7511 | }
|
| 7512 |
|
| 7513 | .cds--snippet--single pre,
|
| 7514 | .cds--snippet--inline code {
|
| 7515 | white-space: pre;
|
| 7516 | }
|
| 7517 |
|
| 7518 | .cds--snippet--multi {
|
| 7519 | font-family: var(--cds-code-01-font-family, 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace);
|
| 7520 | font-size: var(--cds-code-01-font-size, 0.75rem);
|
| 7521 | font-weight: var(--cds-code-01-font-weight, 400);
|
| 7522 | line-height: var(--cds-code-01-line-height, 1.33333);
|
| 7523 | letter-spacing: var(--cds-code-01-letter-spacing, 0.32px);
|
| 7524 | position: relative;
|
| 7525 | background-color: var(--cds-layer);
|
| 7526 | inline-size: 100%;
|
| 7527 | max-inline-size: 48rem;
|
| 7528 | display: flex;
|
| 7529 | padding: 1rem;
|
| 7530 | }
|
| 7531 |
|
| 7532 | .cds--snippet--multi .cds--snippet-container {
|
| 7533 | position: relative;
|
| 7534 | order: 1;
|
| 7535 | max-block-size: 100%;
|
| 7536 | min-block-size: 100%;
|
| 7537 | overflow-y: auto;
|
| 7538 | transition: max-height 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 7539 | }
|
| 7540 | .cds--snippet--multi .cds--snippet-container:focus {
|
| 7541 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 7542 | outline-offset: -2px;
|
| 7543 | outline-offset: 0;
|
| 7544 | }
|
| 7545 | @media screen and (prefers-contrast) {
|
| 7546 | .cds--snippet--multi .cds--snippet-container:focus {
|
| 7547 | outline-style: dotted;
|
| 7548 | }
|
| 7549 | }
|
| 7550 |
|
| 7551 | .cds--snippet--multi.cds--snippet--expand .cds--snippet-container {
|
| 7552 | padding-block-end: 1rem;
|
| 7553 | transition: max-height 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 7554 | }
|
| 7555 |
|
| 7556 | .cds--snippet--multi.cds--snippet--wraptext pre {
|
| 7557 | white-space: pre-wrap;
|
| 7558 | word-wrap: break-word;
|
| 7559 | }
|
| 7560 |
|
| 7561 | .cds--snippet--multi .cds--snippet-container pre {
|
| 7562 | padding-inline-end: 2.5rem;
|
| 7563 | }
|
| 7564 |
|
| 7565 | .cds--snippet--multi.cds--snippet--no-copy .cds--snippet-container pre {
|
| 7566 | padding-inline-end: 0;
|
| 7567 | }
|
| 7568 |
|
| 7569 | .cds--snippet--multi.cds--snippet--has-right-overflow::after {
|
| 7570 | position: absolute;
|
| 7571 | background-image: linear-gradient(to right, transparent, var(--cds-layer));
|
| 7572 | block-size: 100%;
|
| 7573 | content: "";
|
| 7574 | inline-size: 1rem;
|
| 7575 | inset-block-start: 0;
|
| 7576 | inset-inline-end: 1rem;
|
| 7577 | }
|
| 7578 |
|
| 7579 | [dir=rtl] .cds--snippet--multi.cds--snippet--has-right-overflow::after {
|
| 7580 | background-image: linear-gradient(to left, transparent, var(--cds-layer));
|
| 7581 | }
|
| 7582 |
|
| 7583 | .cds--snippet--multi .cds--snippet-container pre code {
|
| 7584 | overflow: hidden;
|
| 7585 | }
|
| 7586 |
|
| 7587 | .cds--snippet__icon {
|
| 7588 | block-size: 1rem;
|
| 7589 | fill: var(--cds-icon-primary, #161616);
|
| 7590 | inline-size: 1rem;
|
| 7591 | transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 7592 | }
|
| 7593 |
|
| 7594 | .cds--btn > .cds--snippet__icon {
|
| 7595 | margin-block-start: 0;
|
| 7596 | }
|
| 7597 |
|
| 7598 | .cds--copy-btn {
|
| 7599 | display: flex;
|
| 7600 | overflow: visible;
|
| 7601 | align-items: center;
|
| 7602 | justify-content: center;
|
| 7603 | padding: 0;
|
| 7604 | border: none;
|
| 7605 | background-color: var(--cds-layer);
|
| 7606 | cursor: pointer;
|
| 7607 | outline: none;
|
| 7608 | }
|
| 7609 | .cds--copy-btn html {
|
| 7610 | font-size: 100%;
|
| 7611 | }
|
| 7612 | .cds--copy-btn body {
|
| 7613 | font-weight: 400;
|
| 7614 | font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
|
| 7615 | -moz-osx-font-smoothing: grayscale;
|
| 7616 | -webkit-font-smoothing: antialiased;
|
| 7617 | text-rendering: optimizeLegibility;
|
| 7618 | }
|
| 7619 | .cds--copy-btn code {
|
| 7620 | font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
|
| 7621 | }
|
| 7622 | .cds--copy-btn strong {
|
| 7623 | font-weight: 600;
|
| 7624 | }
|
| 7625 | .cds--copy-btn:focus {
|
| 7626 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 7627 | outline-offset: -2px;
|
| 7628 | outline-color: var(--cds-focus, #0f62fe);
|
| 7629 | }
|
| 7630 | @media screen and (prefers-contrast) {
|
| 7631 | .cds--copy-btn:focus {
|
| 7632 | outline-style: dotted;
|
| 7633 | }
|
| 7634 | }
|
| 7635 |
|
| 7636 | .cds--snippet .cds--popover-container {
|
| 7637 | font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
|
| 7638 | position: absolute;
|
| 7639 | inset-block-start: 0;
|
| 7640 | inset-inline-end: 0;
|
| 7641 | }
|
| 7642 |
|
| 7643 | .cds--snippet--inline.cds--btn {
|
| 7644 | block-size: 1.25rem;
|
| 7645 | inline-size: initial;
|
| 7646 | min-block-size: 1.25rem;
|
| 7647 | padding-inline: 0;
|
| 7648 | }
|
| 7649 |
|
| 7650 | .cds--snippet--inline.cds--btn.cds--btn--primary:hover {
|
| 7651 | color: var(--cds-text-primary, #161616);
|
| 7652 | }
|
| 7653 |
|
| 7654 | .cds--snippet.cds--snippet--multi .cds--popover-container {
|
| 7655 | inset-block-start: 0.5rem;
|
| 7656 | inset-inline-end: 0.5rem;
|
| 7657 | }
|
| 7658 |
|
| 7659 | .cds--snippet--multi .cds--copy-btn {
|
| 7660 | z-index: 10;
|
| 7661 | }
|
| 7662 |
|
| 7663 | .cds--snippet-btn--expand {
|
| 7664 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 7665 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 7666 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 7667 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 7668 | font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
|
| 7669 | position: absolute;
|
| 7670 | z-index: 10;
|
| 7671 | display: inline-flex;
|
| 7672 | align-items: center;
|
| 7673 | padding: 0.5rem 1rem;
|
| 7674 | border: 0;
|
| 7675 | background-color: var(--cds-layer);
|
| 7676 | block-size: 2rem;
|
| 7677 | color: var(--cds-text-primary, #161616);
|
| 7678 | inset-block-end: 0;
|
| 7679 | inset-inline-end: 0;
|
| 7680 | }
|
| 7681 |
|
| 7682 | .cds--snippet-btn--expand .cds--snippet-btn--text {
|
| 7683 | position: relative;
|
| 7684 | inset-block-start: -0.0625rem;
|
| 7685 | }
|
| 7686 |
|
| 7687 | .cds--snippet-btn--expand--hide.cds--snippet-btn--expand {
|
| 7688 | display: none;
|
| 7689 | }
|
| 7690 |
|
| 7691 | .cds--snippet-btn--expand .cds--icon-chevron--down {
|
| 7692 | fill: var(--cds-icon-primary, #161616);
|
| 7693 | margin-inline-start: 0.5rem;
|
| 7694 | transform: rotate(0deg);
|
| 7695 | transition: 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 7696 | }
|
| 7697 |
|
| 7698 | .cds--snippet-btn--expand:hover {
|
| 7699 | background: var(--cds-layer-hover);
|
| 7700 | color: var(--cds-text-primary, #161616);
|
| 7701 | }
|
| 7702 |
|
| 7703 | .cds--snippet-btn--expand:active {
|
| 7704 | background-color: var(--cds-layer-active);
|
| 7705 | }
|
| 7706 |
|
| 7707 | .cds--snippet-btn--expand:focus {
|
| 7708 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 7709 | outline-offset: -2px;
|
| 7710 | border-color: transparent;
|
| 7711 | }
|
| 7712 | @media screen and (prefers-contrast) {
|
| 7713 | .cds--snippet-btn--expand:focus {
|
| 7714 | outline-style: dotted;
|
| 7715 | }
|
| 7716 | }
|
| 7717 |
|
| 7718 | .cds--snippet--expand .cds--snippet-btn--expand .cds--icon-chevron--down {
|
| 7719 | transform: rotate(180deg);
|
| 7720 | transition: transform 300ms;
|
| 7721 | }
|
| 7722 |
|
| 7723 | .cds--snippet--light,
|
| 7724 | .cds--snippet--light .cds--snippet-button,
|
| 7725 | .cds--snippet--light .cds--btn.cds--snippet-btn--expand,
|
| 7726 | .cds--snippet--light .cds--copy-btn {
|
| 7727 | background-color: var(--cds-layer);
|
| 7728 | }
|
| 7729 |
|
| 7730 | .cds--snippet--light.cds--snippet--inline:hover,
|
| 7731 | .cds--snippet--light .cds--snippet-button:hover,
|
| 7732 | .cds--snippet--light .cds--btn.cds--snippet-btn--expand:hover,
|
| 7733 | .cds--snippet--light .cds--copy-btn:hover {
|
| 7734 | background-color: var(--cds-layer-hover);
|
| 7735 | }
|
| 7736 |
|
| 7737 | .cds--snippet--light.cds--snippet--inline:active,
|
| 7738 | .cds--snippet--light .cds--snippet-button:active,
|
| 7739 | .cds--snippet--light .cds--btn.cds--snippet-btn--expand:active,
|
| 7740 | .cds--snippet--light .cds--copy-btn:active {
|
| 7741 | background-color: var(--cds-layer-active);
|
| 7742 | }
|
| 7743 |
|
| 7744 | .cds--snippet--light.cds--snippet--single::after,
|
| 7745 | .cds--snippet--light.cds--snippet--multi::after {
|
| 7746 | background-image: linear-gradient(to right, rgba(var(--cds-layer), 0), var(--cds-layer));
|
| 7747 | }
|
| 7748 |
|
| 7749 | .cds--snippet.cds--skeleton .cds--snippet-container {
|
| 7750 | block-size: 100%;
|
| 7751 | inline-size: 100%;
|
| 7752 | }
|
| 7753 |
|
| 7754 | .cds--snippet-button .cds--btn--copy__feedback {
|
| 7755 | inset-block-start: 3.175rem;
|
| 7756 | inset-inline-end: auto;
|
| 7757 | inset-inline-start: 50%;
|
| 7758 | }
|
| 7759 | .cds--snippet-button .cds--btn--copy__feedback::before {
|
| 7760 | inset-block-start: 0;
|
| 7761 | }
|
| 7762 | .cds--snippet-button .cds--btn--copy__feedback::after {
|
| 7763 | inset-block-start: -0.25rem;
|
| 7764 | }
|
| 7765 |
|
| 7766 | .cds--snippet--multi .cds--snippet-button .cds--btn--copy__feedback {
|
| 7767 | inset-block-start: 2.675rem;
|
| 7768 | }
|
| 7769 |
|
| 7770 | .cds--snippet--inline .cds--btn--copy__feedback {
|
| 7771 | inset-block-start: calc(100% - 0.25rem);
|
| 7772 | inset-inline-end: auto;
|
| 7773 | inset-inline-start: 50%;
|
| 7774 | }
|
| 7775 |
|
| 7776 | .cds--snippet__overflow-indicator--left,
|
| 7777 | .cds--snippet__overflow-indicator--right {
|
| 7778 | z-index: 1;
|
| 7779 | flex: 1 0 auto;
|
| 7780 | inline-size: 1rem;
|
| 7781 | }
|
| 7782 |
|
| 7783 | .cds--snippet__overflow-indicator--left {
|
| 7784 | order: 0;
|
| 7785 | background-image: linear-gradient(to left, transparent, var(--cds-layer));
|
| 7786 | margin-inline-end: -1rem;
|
| 7787 | }
|
| 7788 |
|
| 7789 | .cds--snippet__overflow-indicator--right {
|
| 7790 | order: 2;
|
| 7791 | background-image: linear-gradient(to right, transparent, var(--cds-layer));
|
| 7792 | margin-inline-start: -1rem;
|
| 7793 | }
|
| 7794 |
|
| 7795 | [dir=rtl] .cds--snippet__overflow-indicator--left {
|
| 7796 | background-image: linear-gradient(to right, transparent, var(--cds-layer));
|
| 7797 | }
|
| 7798 |
|
| 7799 | [dir=rtl] .cds--snippet__overflow-indicator--right {
|
| 7800 | background-image: linear-gradient(to left, transparent, var(--cds-layer));
|
| 7801 | }
|
| 7802 |
|
| 7803 | .cds--snippet--single .cds--snippet__overflow-indicator--right,
|
| 7804 | .cds--snippet--single .cds--snippet__overflow-indicator--left {
|
| 7805 | position: absolute;
|
| 7806 | block-size: calc(100% - 0.25rem);
|
| 7807 | inline-size: 2rem;
|
| 7808 | }
|
| 7809 |
|
| 7810 | .cds--snippet--single .cds--snippet__overflow-indicator--right {
|
| 7811 | inset-inline-end: 2.5rem;
|
| 7812 | }
|
| 7813 |
|
| 7814 | .cds--snippet--single.cds--snippet--no-copy .cds--snippet__overflow-indicator--right {
|
| 7815 | inset-inline-end: 0;
|
| 7816 | }
|
| 7817 |
|
| 7818 | .cds--snippet--single .cds--snippet-container:focus ~ .cds--snippet__overflow-indicator--right {
|
| 7819 | inset-inline-end: calc(2.5rem + 0.125rem);
|
| 7820 | }
|
| 7821 |
|
| 7822 | .cds--snippet--single .cds--snippet-container:focus + .cds--snippet__overflow-indicator--left {
|
| 7823 | inset-inline-start: 0.125rem;
|
| 7824 | }
|
| 7825 |
|
| 7826 | .cds--snippet--light .cds--snippet__overflow-indicator--left {
|
| 7827 | background-image: linear-gradient(to left, transparent, var(--cds-layer));
|
| 7828 | }
|
| 7829 |
|
| 7830 | .cds--snippet--light .cds--snippet__overflow-indicator--right {
|
| 7831 | background-image: linear-gradient(to right, transparent, var(--cds-layer));
|
| 7832 | }
|
| 7833 |
|
| 7834 | @media not all and (min-resolution >= 0.001dpcm) {
|
| 7835 | @supports (-webkit-appearance: none) and (stroke-color: transparent) {
|
| 7836 | .cds--snippet__overflow-indicator--left {
|
| 7837 | background-image: linear-gradient(to left, rgba(var(--cds-layer), 0), var(--cds-layer));
|
| 7838 | }
|
| 7839 | .cds--snippet__overflow-indicator--right {
|
| 7840 | background-image: linear-gradient(to right, rgba(var(--cds-layer), 0), var(--cds-layer));
|
| 7841 | }
|
| 7842 | }
|
| 7843 | }
|
| 7844 | .cds--snippet--multi.cds--skeleton {
|
| 7845 | block-size: 6.125rem;
|
| 7846 | }
|
| 7847 |
|
| 7848 | .cds--snippet--single.cds--skeleton {
|
| 7849 | block-size: 3.5rem;
|
| 7850 | }
|
| 7851 |
|
| 7852 | .cds--snippet.cds--skeleton span {
|
| 7853 | position: relative;
|
| 7854 | padding: 0;
|
| 7855 | border: none;
|
| 7856 | background: var(--cds-skeleton-background, #e8e8e8);
|
| 7857 | box-shadow: none;
|
| 7858 | pointer-events: none;
|
| 7859 | display: block;
|
| 7860 | block-size: 1rem;
|
| 7861 | inline-size: 100%;
|
| 7862 | margin-block-start: 0.5rem;
|
| 7863 | }
|
| 7864 | .cds--snippet.cds--skeleton span:hover, .cds--snippet.cds--skeleton span:focus, .cds--snippet.cds--skeleton span:active {
|
| 7865 | border: none;
|
| 7866 | cursor: default;
|
| 7867 | outline: none;
|
| 7868 | }
|
| 7869 | .cds--snippet.cds--skeleton span::before {
|
| 7870 | position: absolute;
|
| 7871 | animation: 3000ms ease-in-out cds--skeleton infinite;
|
| 7872 | background: var(--cds-skeleton-element, #c6c6c6);
|
| 7873 | block-size: 100%;
|
| 7874 | content: "";
|
| 7875 | inline-size: 100%;
|
| 7876 | will-change: transform-origin, transform, opacity;
|
| 7877 | }
|
| 7878 | @media (prefers-reduced-motion: reduce) {
|
| 7879 | .cds--snippet.cds--skeleton span::before {
|
| 7880 | animation: none;
|
| 7881 | }
|
| 7882 | }
|
| 7883 | .cds--snippet.cds--skeleton span:first-child {
|
| 7884 | margin: 0;
|
| 7885 | }
|
| 7886 | .cds--snippet.cds--skeleton span:nth-child(2) {
|
| 7887 | inline-size: 85%;
|
| 7888 | }
|
| 7889 | .cds--snippet.cds--skeleton span:nth-child(3) {
|
| 7890 | inline-size: 95%;
|
| 7891 | }
|
| 7892 |
|
| 7893 | .cds--snippet--single.cds--skeleton .cds--snippet-container {
|
| 7894 | padding-block-end: 0;
|
| 7895 | }
|
| 7896 |
|
| 7897 |
|
| 7898 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 7899 | .cds--snippet__icon {
|
| 7900 | fill: ButtonText;
|
| 7901 | }
|
| 7902 | }
|
| 7903 |
|
| 7904 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 7905 | .cds--snippet--inline:focus {
|
| 7906 | color: Highlight;
|
| 7907 | outline: 1px solid Highlight;
|
| 7908 | }
|
| 7909 | }
|
| 7910 |
|
| 7911 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 7912 | .cds--snippet--single,
|
| 7913 | .cds--snippet--multi {
|
| 7914 | outline: 1px solid transparent;
|
| 7915 | }
|
| 7916 | }
|
| 7917 |
|
| 7918 |
|
| 7919 | .cds--text-input {
|
| 7920 | --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-lg)));
|
| 7921 | --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
|
| 7922 | box-sizing: border-box;
|
| 7923 | padding: 0;
|
| 7924 | border: 0;
|
| 7925 | margin: 0;
|
| 7926 | font-family: inherit;
|
| 7927 | font-size: 100%;
|
| 7928 | vertical-align: baseline;
|
| 7929 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 7930 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 7931 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 7932 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 7933 | outline: 2px solid transparent;
|
| 7934 | outline-offset: -2px;
|
| 7935 | padding: 0 var(--cds-layout-density-padding-inline-local);
|
| 7936 | border: none;
|
| 7937 | background-color: var(--cds-field);
|
| 7938 | block-size: var(--cds-layout-size-height-local);
|
| 7939 | border-block-end: 1px solid var(--cds-border-strong);
|
| 7940 | color: var(--cds-text-primary, #161616);
|
| 7941 | font-family: inherit;
|
| 7942 | inline-size: 100%;
|
| 7943 | transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 7944 | }
|
| 7945 | .cds--text-input *,
|
| 7946 | .cds--text-input *::before,
|
| 7947 | .cds--text-input *::after {
|
| 7948 | box-sizing: inherit;
|
| 7949 | }
|
| 7950 | .cds--text-input:focus, .cds--text-input:active {
|
| 7951 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 7952 | outline-offset: -2px;
|
| 7953 | }
|
| 7954 | @media screen and (prefers-contrast) {
|
| 7955 | .cds--text-input:focus, .cds--text-input:active {
|
| 7956 | outline-style: dotted;
|
| 7957 | }
|
| 7958 | }
|
| 7959 | .cds--text-input-wrapper svg[hidden] {
|
| 7960 | display: none;
|
| 7961 | }
|
| 7962 |
|
| 7963 | .cds--password-input {
|
| 7964 | padding-inline-end: 2.5rem;
|
| 7965 | }
|
| 7966 |
|
| 7967 | .cds--text-input--sm.cds--password-input {
|
| 7968 | padding-inline-end: 2rem;
|
| 7969 | }
|
| 7970 |
|
| 7971 | .cds--text-input--lg.cds--password-input {
|
| 7972 | padding-inline-end: 3rem;
|
| 7973 | }
|
| 7974 |
|
| 7975 | .cds--text-input::-moz-placeholder {
|
| 7976 | color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4));
|
| 7977 | opacity: 1;
|
| 7978 | }
|
| 7979 |
|
| 7980 | .cds--text-input::placeholder {
|
| 7981 | color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4));
|
| 7982 | opacity: 1;
|
| 7983 | }
|
| 7984 |
|
| 7985 | .cds--text-input--light {
|
| 7986 | background-color: var(--cds-field-02, #ffffff);
|
| 7987 | }
|
| 7988 |
|
| 7989 | .cds--text-input__field-wrapper {
|
| 7990 | position: relative;
|
| 7991 | display: flex;
|
| 7992 | inline-size: 100%;
|
| 7993 | }
|
| 7994 |
|
| 7995 | .cds--text-input__invalid-icon {
|
| 7996 | position: absolute;
|
| 7997 | fill: var(--cds-support-error, #da1e28);
|
| 7998 | inset-block-start: 50%;
|
| 7999 | inset-inline-end: 1rem;
|
| 8000 | transform: translateY(-50%);
|
| 8001 | }
|
| 8002 |
|
| 8003 | .cds--text-input__invalid-icon--warning {
|
| 8004 | fill: var(--cds-support-warning, #f1c21b);
|
| 8005 | }
|
| 8006 |
|
| 8007 | .cds--text-input__invalid-icon--warning path:first-of-type {
|
| 8008 | fill: #000000;
|
| 8009 | opacity: 1;
|
| 8010 | }
|
| 8011 |
|
| 8012 | .cds--text-input--password__visibility {
|
| 8013 | position: relative;
|
| 8014 | display: inline-flex;
|
| 8015 | overflow: visible;
|
| 8016 | align-items: center;
|
| 8017 | cursor: pointer;
|
| 8018 | }
|
| 8019 | .cds--text-input--password__visibility:focus {
|
| 8020 | outline: 1px solid var(--cds-focus, #0f62fe);
|
| 8021 | }
|
| 8022 | @media screen and (prefers-contrast) {
|
| 8023 | .cds--text-input--password__visibility:focus {
|
| 8024 | outline-style: dotted;
|
| 8025 | }
|
| 8026 | }
|
| 8027 | .cds--text-input--password__visibility:focus {
|
| 8028 | outline: 1px solid transparent;
|
| 8029 | }
|
| 8030 | .cds--text-input--password__visibility:focus svg {
|
| 8031 | outline: 1px solid var(--cds-focus, #0f62fe);
|
| 8032 | }
|
| 8033 | @media screen and (prefers-contrast) {
|
| 8034 | .cds--text-input--password__visibility:focus svg {
|
| 8035 | outline-style: dotted;
|
| 8036 | }
|
| 8037 | }
|
| 8038 | .cds--text-input--password__visibility::before, .cds--text-input--password__visibility::after,
|
| 8039 | .cds--text-input--password__visibility .cds--assistive-text,
|
| 8040 | .cds--text-input--password__visibility + .cds--assistive-text {
|
| 8041 | position: absolute;
|
| 8042 | z-index: 6000;
|
| 8043 | display: flex;
|
| 8044 | align-items: center;
|
| 8045 | opacity: 0;
|
| 8046 | pointer-events: none;
|
| 8047 | }
|
| 8048 | @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
| 8049 | .cds--text-input--password__visibility::before, .cds--text-input--password__visibility::after,
|
| 8050 | .cds--text-input--password__visibility .cds--assistive-text,
|
| 8051 | .cds--text-input--password__visibility + .cds--assistive-text {
|
| 8052 | display: inline-block;
|
| 8053 | }
|
| 8054 | }
|
| 8055 | .cds--text-input--password__visibility::before, .cds--text-input--password__visibility::after {
|
| 8056 | transition: opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 8057 | }
|
| 8058 | @media screen and (prefers-reduced-motion: reduce) {
|
| 8059 | .cds--text-input--password__visibility::before, .cds--text-input--password__visibility::after {
|
| 8060 | transition: none;
|
| 8061 | }
|
| 8062 | }
|
| 8063 | .cds--text-input--password__visibility.cds--tooltip--a11y::before, .cds--text-input--password__visibility.cds--tooltip--a11y::after {
|
| 8064 | transition: none;
|
| 8065 | }
|
| 8066 | .cds--text-input--password__visibility::before {
|
| 8067 | border-style: solid;
|
| 8068 | block-size: 0;
|
| 8069 | content: "";
|
| 8070 | inline-size: 0;
|
| 8071 | }
|
| 8072 | .cds--text-input--password__visibility .cds--assistive-text,
|
| 8073 | .cds--text-input--password__visibility + .cds--assistive-text {
|
| 8074 | box-sizing: content-box;
|
| 8075 | color: inherit;
|
| 8076 | opacity: 1;
|
| 8077 | white-space: normal;
|
| 8078 | word-break: break-word;
|
| 8079 | }
|
| 8080 | .cds--text-input--password__visibility::after,
|
| 8081 | .cds--text-input--password__visibility .cds--assistive-text,
|
| 8082 | .cds--text-input--password__visibility + .cds--assistive-text {
|
| 8083 | box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
|
| 8084 | z-index: 6000;
|
| 8085 | padding: 0.1875rem 1rem;
|
| 8086 | border-radius: 0.125rem;
|
| 8087 | background-color: var(--cds-background-inverse, #393939);
|
| 8088 | block-size: auto;
|
| 8089 | color: var(--cds-text-inverse, #ffffff);
|
| 8090 | font-weight: 400;
|
| 8091 | inline-size: -moz-max-content;
|
| 8092 | inline-size: max-content;
|
| 8093 | max-inline-size: 13rem;
|
| 8094 | min-inline-size: 1.5rem;
|
| 8095 | text-align: start;
|
| 8096 | transform: translateX(-50%);
|
| 8097 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 8098 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 8099 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 8100 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 8101 | }
|
| 8102 | @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
| 8103 | .cds--text-input--password__visibility::after,
|
| 8104 | .cds--text-input--password__visibility .cds--assistive-text,
|
| 8105 | .cds--text-input--password__visibility + .cds--assistive-text {
|
| 8106 | inline-size: auto;
|
| 8107 | }
|
| 8108 | }
|
| 8109 | @supports (-ms-accelerator: true) {
|
| 8110 | .cds--text-input--password__visibility::after,
|
| 8111 | .cds--text-input--password__visibility .cds--assistive-text,
|
| 8112 | .cds--text-input--password__visibility + .cds--assistive-text {
|
| 8113 | inline-size: auto;
|
| 8114 | }
|
| 8115 | }
|
| 8116 | @supports (-ms-ime-align: auto) {
|
| 8117 | .cds--text-input--password__visibility::after,
|
| 8118 | .cds--text-input--password__visibility .cds--assistive-text,
|
| 8119 | .cds--text-input--password__visibility + .cds--assistive-text {
|
| 8120 | inline-size: auto;
|
| 8121 | }
|
| 8122 | }
|
| 8123 | @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
|
| 8124 | .cds--text-input--password__visibility::after,
|
| 8125 | .cds--text-input--password__visibility .cds--assistive-text,
|
| 8126 | .cds--text-input--password__visibility + .cds--assistive-text {
|
| 8127 | border: 1px solid transparent;
|
| 8128 | }
|
| 8129 | }
|
| 8130 | .cds--text-input--password__visibility::after {
|
| 8131 | content: attr(aria-label);
|
| 8132 | }
|
| 8133 | .cds--text-input--password__visibility.cds--tooltip--a11y::after {
|
| 8134 | content: none;
|
| 8135 | }
|
| 8136 | .cds--text-input--password__visibility.cds--tooltip--visible::before, .cds--text-input--password__visibility.cds--tooltip--visible::after, .cds--text-input--password__visibility:hover::before, .cds--text-input--password__visibility:hover::after, .cds--text-input--password__visibility:focus::before, .cds--text-input--password__visibility:focus::after {
|
| 8137 | opacity: 1;
|
| 8138 | }
|
| 8139 | @keyframes cds--tooltip-fade {
|
| 8140 | from {
|
| 8141 | opacity: 0;
|
| 8142 | }
|
| 8143 | to {
|
| 8144 | opacity: 1;
|
| 8145 | }
|
| 8146 | }
|
| 8147 | .cds--text-input--password__visibility.cds--tooltip--visible .cds--assistive-text,
|
| 8148 | .cds--text-input--password__visibility.cds--tooltip--visible + .cds--assistive-text, .cds--text-input--password__visibility:hover .cds--assistive-text,
|
| 8149 | .cds--text-input--password__visibility:hover + .cds--assistive-text, .cds--text-input--password__visibility:focus .cds--assistive-text,
|
| 8150 | .cds--text-input--password__visibility:focus + .cds--assistive-text {
|
| 8151 | overflow: visible;
|
| 8152 | margin: auto;
|
| 8153 | clip: auto;
|
| 8154 | }
|
| 8155 | .cds--text-input--password__visibility.cds--tooltip--visible .cds--assistive-text,
|
| 8156 | .cds--text-input--password__visibility.cds--tooltip--visible + .cds--assistive-text, .cds--text-input--password__visibility.cds--tooltip--visible.cds--tooltip--a11y::before, .cds--text-input--password__visibility:hover .cds--assistive-text,
|
| 8157 | .cds--text-input--password__visibility:hover + .cds--assistive-text, .cds--text-input--password__visibility:hover.cds--tooltip--a11y::before, .cds--text-input--password__visibility:focus .cds--assistive-text,
|
| 8158 | .cds--text-input--password__visibility:focus + .cds--assistive-text, .cds--text-input--password__visibility:focus.cds--tooltip--a11y::before {
|
| 8159 | animation: cds--tooltip-fade 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 8160 | }
|
| 8161 | .cds--text-input--password__visibility.cds--tooltip--hidden .cds--assistive-text, .cds--text-input--password__visibility.cds--tooltip--hidden + .cds--assistive-text {
|
| 8162 | overflow: hidden;
|
| 8163 | margin: -1px;
|
| 8164 | clip: rect(0, 0, 0, 0);
|
| 8165 | }
|
| 8166 | .cds--text-input--password__visibility.cds--tooltip--hidden.cds--tooltip--a11y::before {
|
| 8167 | animation: none;
|
| 8168 | opacity: 0;
|
| 8169 | }
|
| 8170 | .cds--text-input--password__visibility .cds--assistive-text::after {
|
| 8171 | position: absolute;
|
| 8172 | display: block;
|
| 8173 | content: "";
|
| 8174 | block-size: 0.75rem;
|
| 8175 | inline-size: 100%;
|
| 8176 | inset-inline-start: 0;
|
| 8177 | inset-block-start: -0.75rem;
|
| 8178 | }
|
| 8179 | .cds--text-input--password__visibility::before, .cds--text-input--password__visibility::after,
|
| 8180 | .cds--text-input--password__visibility .cds--assistive-text,
|
| 8181 | .cds--text-input--password__visibility + .cds--assistive-text {
|
| 8182 | inset-block-end: 0;
|
| 8183 | inset-inline-start: 50%;
|
| 8184 | }
|
| 8185 | .cds--text-input--password__visibility::before {
|
| 8186 | border-width: 0 0.25rem 0.3125rem 0.25rem;
|
| 8187 | border-color: transparent transparent var(--cds-background-inverse, #393939) transparent;
|
| 8188 | inset-block-end: -0.5rem;
|
| 8189 | transform: translate(-50%, 100%);
|
| 8190 | }
|
| 8191 | .cds--text-input--password__visibility::after,
|
| 8192 | .cds--text-input--password__visibility .cds--assistive-text,
|
| 8193 | .cds--text-input--password__visibility + .cds--assistive-text {
|
| 8194 | inset-block-end: -0.8125rem;
|
| 8195 | transform: translate(-50%, 100%);
|
| 8196 | }
|
| 8197 |
|
| 8198 | .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger {
|
| 8199 | outline: 2px solid transparent;
|
| 8200 | outline-offset: -2px;
|
| 8201 | position: absolute;
|
| 8202 | display: flex;
|
| 8203 | align-items: center;
|
| 8204 | justify-content: center;
|
| 8205 | padding: 0;
|
| 8206 | border: 0;
|
| 8207 | background: none;
|
| 8208 | block-size: 100%;
|
| 8209 | cursor: pointer;
|
| 8210 | inline-size: 2.5rem;
|
| 8211 | inset-inline-end: 0;
|
| 8212 | min-block-size: auto;
|
| 8213 | transition: outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 8214 | }
|
| 8215 |
|
| 8216 | .cds--toggle-password-tooltip .cds--popover {
|
| 8217 | inset-inline-start: -2.5rem;
|
| 8218 | }
|
| 8219 |
|
| 8220 | .cds--toggle-password-tooltip .cds--popover-content {
|
| 8221 | min-inline-size: 2.5rem;
|
| 8222 | }
|
| 8223 |
|
| 8224 | .cds--text-input--sm + .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger {
|
| 8225 | inline-size: 2rem;
|
| 8226 | }
|
| 8227 |
|
| 8228 | .cds--text-input--lg + .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger {
|
| 8229 | inline-size: 3rem;
|
| 8230 | }
|
| 8231 |
|
| 8232 | .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg {
|
| 8233 | fill: var(--cds-icon-secondary, #525252);
|
| 8234 | transition: fill 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 8235 | }
|
| 8236 | @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
|
| 8237 | .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg {
|
| 8238 | fill: ButtonText;
|
| 8239 | }
|
| 8240 | }
|
| 8241 |
|
| 8242 | .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:focus {
|
| 8243 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 8244 | outline-offset: -2px;
|
| 8245 | }
|
| 8246 | @media screen and (prefers-contrast) {
|
| 8247 | .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:focus {
|
| 8248 | outline-style: dotted;
|
| 8249 | }
|
| 8250 | }
|
| 8251 |
|
| 8252 | .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:hover svg,
|
| 8253 | .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:focus svg {
|
| 8254 | fill: var(--cds-icon-primary, #161616);
|
| 8255 | }
|
| 8256 |
|
| 8257 | .cds--text-input--invalid,
|
| 8258 | .cds--text-input--warning {
|
| 8259 | padding-inline-end: 2.5rem;
|
| 8260 | }
|
| 8261 |
|
| 8262 | .cds--text-input--invalid.cds--password-input {
|
| 8263 | padding-inline-end: 4rem;
|
| 8264 | }
|
| 8265 |
|
| 8266 | .cds--text-input--invalid + .cds--text-input--password__visibility__toggle {
|
| 8267 | inset-inline-end: 1rem;
|
| 8268 | }
|
| 8269 |
|
| 8270 | .cds--password-input-wrapper .cds--text-input__invalid-icon {
|
| 8271 | inset-inline-end: 2.5rem;
|
| 8272 | }
|
| 8273 |
|
| 8274 | .cds--text-input:disabled ~ .cds--text-input--password__visibility__toggle.cds--tooltip__trigger {
|
| 8275 | cursor: not-allowed;
|
| 8276 | }
|
| 8277 |
|
| 8278 | .cds--text-input:disabled ~ .cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg {
|
| 8279 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 8280 | }
|
| 8281 | .cds--text-input:disabled ~ .cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg:hover {
|
| 8282 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 8283 | }
|
| 8284 |
|
| 8285 | .cds--text-input__counter-alert {
|
| 8286 | position: absolute;
|
| 8287 | overflow: hidden;
|
| 8288 | padding: 0;
|
| 8289 | border: 0;
|
| 8290 | margin: -1px;
|
| 8291 | block-size: 1px;
|
| 8292 | clip: rect(0, 0, 0, 0);
|
| 8293 | inline-size: 1px;
|
| 8294 | }
|
| 8295 |
|
| 8296 | .cds--text-input:disabled {
|
| 8297 | outline: 2px solid transparent;
|
| 8298 | outline-offset: -2px;
|
| 8299 | background-color: var(--cds-field);
|
| 8300 | border-block-end: 1px solid transparent;
|
| 8301 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 8302 | cursor: not-allowed;
|
| 8303 | -webkit-text-fill-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 8304 | }
|
| 8305 |
|
| 8306 | .cds--text-input--light:disabled {
|
| 8307 | background-color: var(--cds-field-02, #ffffff);
|
| 8308 | }
|
| 8309 |
|
| 8310 | .cds--text-input:disabled::-moz-placeholder {
|
| 8311 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 8312 | opacity: 1;
|
| 8313 | }
|
| 8314 |
|
| 8315 | .cds--text-input:disabled::placeholder {
|
| 8316 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 8317 | opacity: 1;
|
| 8318 | }
|
| 8319 |
|
| 8320 | .cds--text-input--invalid {
|
| 8321 | outline: 2px solid var(--cds-support-error, #da1e28);
|
| 8322 | outline-offset: -2px;
|
| 8323 | box-shadow: none;
|
| 8324 | }
|
| 8325 | @media screen and (prefers-contrast) {
|
| 8326 | .cds--text-input--invalid {
|
| 8327 | outline-style: dotted;
|
| 8328 | }
|
| 8329 | }
|
| 8330 | .cds--text-input--invalid .cds--text-input--password__visibility__toggle {
|
| 8331 | inset-inline-end: 2.5rem;
|
| 8332 | }
|
| 8333 |
|
| 8334 | .cds--skeleton.cds--text-input {
|
| 8335 | position: relative;
|
| 8336 | padding: 0;
|
| 8337 | border: none;
|
| 8338 | background: var(--cds-skeleton-background, #e8e8e8);
|
| 8339 | box-shadow: none;
|
| 8340 | pointer-events: none;
|
| 8341 | }
|
| 8342 | .cds--skeleton.cds--text-input:hover, .cds--skeleton.cds--text-input:focus, .cds--skeleton.cds--text-input:active {
|
| 8343 | border: none;
|
| 8344 | cursor: default;
|
| 8345 | outline: none;
|
| 8346 | }
|
| 8347 | .cds--skeleton.cds--text-input::before {
|
| 8348 | position: absolute;
|
| 8349 | animation: 3000ms ease-in-out cds--skeleton infinite;
|
| 8350 | background: var(--cds-skeleton-element, #c6c6c6);
|
| 8351 | block-size: 100%;
|
| 8352 | content: "";
|
| 8353 | inline-size: 100%;
|
| 8354 | will-change: transform-origin, transform, opacity;
|
| 8355 | }
|
| 8356 | @media (prefers-reduced-motion: reduce) {
|
| 8357 | .cds--skeleton.cds--text-input::before {
|
| 8358 | animation: none;
|
| 8359 | }
|
| 8360 | }
|
| 8361 |
|
| 8362 | .cds--form--fluid .cds--text-input-wrapper {
|
| 8363 | position: relative;
|
| 8364 | background: var(--cds-field);
|
| 8365 | transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 8366 | }
|
| 8367 |
|
| 8368 | .cds--form--fluid .cds--label {
|
| 8369 | position: absolute;
|
| 8370 | z-index: 1;
|
| 8371 | display: flex;
|
| 8372 | align-items: center;
|
| 8373 | margin: 0;
|
| 8374 | block-size: 1rem;
|
| 8375 | inset-block-start: 0.8125rem;
|
| 8376 | inset-inline-start: 1rem;
|
| 8377 | }
|
| 8378 |
|
| 8379 | .cds--form--fluid .cds--form__helper-text {
|
| 8380 | display: none;
|
| 8381 | }
|
| 8382 |
|
| 8383 | .cds--form--fluid .cds--text-input {
|
| 8384 | padding: 2rem 1rem 0.8125rem;
|
| 8385 | min-block-size: 4rem;
|
| 8386 | }
|
| 8387 |
|
| 8388 | .cds--text-input__divider,
|
| 8389 | .cds--form--fluid .cds--text-input__divider {
|
| 8390 | display: none;
|
| 8391 | }
|
| 8392 |
|
| 8393 | .cds--form--fluid .cds--text-input--invalid,
|
| 8394 | .cds--form--fluid .cds--text-input--warning {
|
| 8395 | border-block-end: none;
|
| 8396 | }
|
| 8397 |
|
| 8398 | .cds--form--fluid .cds--text-input--invalid + .cds--text-input__divider,
|
| 8399 | .cds--form--fluid .cds--text-input--warning + .cds--text-input__divider {
|
| 8400 | display: block;
|
| 8401 | border-style: solid;
|
| 8402 | border-color: var(--cds-border-subtle);
|
| 8403 | margin: 0 1rem;
|
| 8404 | border-block-end: none;
|
| 8405 | }
|
| 8406 |
|
| 8407 | .cds--form--fluid .cds--text-input__invalid-icon {
|
| 8408 | inset-block-start: 5rem;
|
| 8409 | }
|
| 8410 |
|
| 8411 | .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid,
|
| 8412 | .cds--form--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning {
|
| 8413 | outline: none;
|
| 8414 | }
|
| 8415 |
|
| 8416 | .cds--form--fluid .cds--text-input__field-wrapper--warning {
|
| 8417 | border-block-end: 1px solid var(--cds-border-strong);
|
| 8418 | }
|
| 8419 |
|
| 8420 | .cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) {
|
| 8421 | outline: 2px solid var(--cds-support-error, #da1e28);
|
| 8422 | outline-offset: -2px;
|
| 8423 | }
|
| 8424 | @media screen and (prefers-contrast) {
|
| 8425 | .cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) {
|
| 8426 | outline-style: dotted;
|
| 8427 | }
|
| 8428 | }
|
| 8429 |
|
| 8430 | .cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
|
| 8431 | .cds--form--fluid .cds--text-input__field-wrapper--warning:focus-within {
|
| 8432 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 8433 | outline-offset: -2px;
|
| 8434 | }
|
| 8435 | @media screen and (prefers-contrast) {
|
| 8436 | .cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
|
| 8437 | .cds--form--fluid .cds--text-input__field-wrapper--warning:focus-within {
|
| 8438 | outline-style: dotted;
|
| 8439 | }
|
| 8440 | }
|
| 8441 |
|
| 8442 | .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus,
|
| 8443 | .cds--form--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning:focus {
|
| 8444 | outline: none;
|
| 8445 | }
|
| 8446 |
|
| 8447 | .cds--text-input-wrapper.cds--text-input-wrapper--inline {
|
| 8448 | flex-flow: row wrap;
|
| 8449 | }
|
| 8450 |
|
| 8451 | .cds--text-input-wrapper .cds--label--inline {
|
| 8452 | flex: 1 1;
|
| 8453 | margin: 0.8125rem 0 0 0;
|
| 8454 | overflow-wrap: break-word;
|
| 8455 | word-break: break-word;
|
| 8456 | }
|
| 8457 |
|
| 8458 | .cds--text-input-wrapper .cds--label--inline--sm {
|
| 8459 | margin-block-start: 0.5625rem;
|
| 8460 | }
|
| 8461 |
|
| 8462 | .cds--text-input-wrapper .cds--label--inline--lg {
|
| 8463 | margin-block-start: 1.0625rem;
|
| 8464 | }
|
| 8465 |
|
| 8466 | .cds--text-input__label-helper-wrapper {
|
| 8467 | flex: 2 1;
|
| 8468 | flex-direction: column;
|
| 8469 | margin-inline-end: 1.5rem;
|
| 8470 | max-inline-size: 8rem;
|
| 8471 | overflow-wrap: break-word;
|
| 8472 | }
|
| 8473 |
|
| 8474 | .cds--text-input-wrapper .cds--form__helper-text--inline {
|
| 8475 | margin-block-start: 0.125rem;
|
| 8476 | }
|
| 8477 |
|
| 8478 | .cds--text-input__field-outer-wrapper {
|
| 8479 | display: flex;
|
| 8480 | flex: 1 1 auto;
|
| 8481 | flex-direction: column;
|
| 8482 | align-items: flex-start;
|
| 8483 | inline-size: 100%;
|
| 8484 | }
|
| 8485 |
|
| 8486 | .cds--text-input__field-outer-wrapper--inline {
|
| 8487 | flex: 8 1;
|
| 8488 | flex-direction: column;
|
| 8489 | }
|
| 8490 |
|
| 8491 | .cds--text-input-wrapper--inline .cds--form-requirement {
|
| 8492 | display: block;
|
| 8493 | overflow: visible;
|
| 8494 | font-weight: 400;
|
| 8495 | max-block-size: 12.5rem;
|
| 8496 | }
|
| 8497 |
|
| 8498 | .cds--text-input-wrapper--inline--invalid .cds--form-requirement {
|
| 8499 | color: var(--cds-text-error, #da1e28);
|
| 8500 | }
|
| 8501 |
|
| 8502 | .cds--form--fluid .cds--text-input-wrapper--readonly,
|
| 8503 | .cds--text-input-wrapper--readonly .cds--text-input {
|
| 8504 | background: transparent;
|
| 8505 | border-block-end-color: var(--cds-border-subtle);
|
| 8506 | }
|
| 8507 |
|
| 8508 | .cds--text-input__field-wrapper .cds--slug {
|
| 8509 | position: absolute;
|
| 8510 | inset-block-start: 50%;
|
| 8511 | inset-inline-end: 1rem;
|
| 8512 | transform: translateY(-50%);
|
| 8513 | }
|
| 8514 |
|
| 8515 | .cds--text-input__field-wrapper--slug .cds--text-input:not(:has(~ .cds--slug--revert)) {
|
| 8516 | background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
|
| 8517 | border-block-end-color: var(--cds-ai-border-strong, #4589ff);
|
| 8518 | padding-inline-end: 2.5rem;
|
| 8519 | }
|
| 8520 |
|
| 8521 | .cds--text-input--invalid:has(~ .cds--slug),
|
| 8522 | .cds--text-input--warning:has(~ .cds--slug) {
|
| 8523 | padding-inline-end: 4rem;
|
| 8524 | }
|
| 8525 |
|
| 8526 | .cds--text-input--invalid ~ .cds--slug,
|
| 8527 | .cds--text-input--warning ~ .cds--slug {
|
| 8528 | inset-inline-end: 2.5rem;
|
| 8529 | }
|
| 8530 |
|
| 8531 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 8532 | .cds--btn.cds--btn--icon-only.cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg,
|
| 8533 | .cds--btn.cds--btn--icon-only.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:hover svg {
|
| 8534 | fill: ButtonText;
|
| 8535 | }
|
| 8536 | }
|
| 8537 |
|
| 8538 | .cds--text-input__label-wrapper {
|
| 8539 | display: flex;
|
| 8540 | justify-content: space-between;
|
| 8541 | inline-size: 100%;
|
| 8542 | }
|
| 8543 | .cds--text-input__label-wrapper .cds--text-input__label-counter {
|
| 8544 | align-self: end;
|
| 8545 | }
|
| 8546 |
|
| 8547 | .cds--tag {
|
| 8548 | --cds-layout-size-height-xs: 1.125rem;
|
| 8549 | --cds-layout-size-height-sm: 1.125rem;
|
| 8550 | --cds-layout-size-height-md: 1.5rem;
|
| 8551 | --cds-layout-size-height-lg: 2rem;
|
| 8552 | --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-lg)));
|
| 8553 | font-size: var(--cds-label-01-font-size, 0.75rem);
|
| 8554 | font-weight: var(--cds-label-01-font-weight, 400);
|
| 8555 | line-height: var(--cds-label-01-line-height, 1.33333);
|
| 8556 | letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
|
| 8557 | background-color: var(--cds-tag-background-gray, #e0e0e0);
|
| 8558 | color: var(--cds-tag-color-gray, #161616);
|
| 8559 | display: inline-flex;
|
| 8560 | align-items: center;
|
| 8561 | justify-content: center;
|
| 8562 | border-radius: 1rem;
|
| 8563 | margin: 0.25rem;
|
| 8564 | cursor: default;
|
| 8565 | max-inline-size: 13rem;
|
| 8566 | min-block-size: var(--cds-layout-size-height-local);
|
| 8567 | min-inline-size: 2rem;
|
| 8568 | padding-inline: 0.5rem;
|
| 8569 | vertical-align: middle;
|
| 8570 | word-break: break-word;
|
| 8571 | }
|
| 8572 | .cds--layout--size-xs .cds--tag {
|
| 8573 | --cds-layout-size-height: var(--cds-layout-size-height-xs);
|
| 8574 | }
|
| 8575 | .cds--layout--size-sm .cds--tag {
|
| 8576 | --cds-layout-size-height: var(--cds-layout-size-height-sm);
|
| 8577 | }
|
| 8578 | .cds--layout--size-md .cds--tag {
|
| 8579 | --cds-layout-size-height: var(--cds-layout-size-height-md);
|
| 8580 | }
|
| 8581 | .cds--layout--size-lg .cds--tag {
|
| 8582 | --cds-layout-size-height: var(--cds-layout-size-height-lg);
|
| 8583 | }
|
| 8584 | .cds--tag.cds--tag--operational {
|
| 8585 | border: 1px solid var(--cds-tag-background-gray, #e0e0e0);
|
| 8586 | }
|
| 8587 | .cds--tag.cds--tag--operational:hover {
|
| 8588 | background-color: var(--cds-tag-hover-gray, #d1d1d1);
|
| 8589 | }
|
| 8590 | .cds--tag .cds--tag__close-icon:hover {
|
| 8591 | background-color: var(--cds-tag-hover-gray, #d1d1d1);
|
| 8592 | }
|
| 8593 | .cds--tag.cds--tag--lg {
|
| 8594 | padding-inline-start: 0.75rem;
|
| 8595 | }
|
| 8596 | .cds--tag:has(.cds--tag__custom-icon) {
|
| 8597 | padding-inline-start: 0.25rem;
|
| 8598 | }
|
| 8599 | .cds--tag.cds--tag--lg:not(.cds--tag--filter) {
|
| 8600 | padding-inline: 0.75rem;
|
| 8601 | }
|
| 8602 | .cds--tag.cds--tag--lg:has(.cds--tag__custom-icon) {
|
| 8603 | padding-inline-start: 0.5rem;
|
| 8604 | }
|
| 8605 | .cds--tag:not(.cds--tag--selectable) {
|
| 8606 | border: 0;
|
| 8607 | }
|
| 8608 | .cds--tag:not(:first-child) {
|
| 8609 | margin-inline-start: 0;
|
| 8610 | }
|
| 8611 |
|
| 8612 | .cds--tag--operational > span,
|
| 8613 | .cds--tag--selectable > span,
|
| 8614 | .cds--tag__label {
|
| 8615 | display: block;
|
| 8616 | overflow: hidden;
|
| 8617 | text-overflow: ellipsis;
|
| 8618 | white-space: nowrap;
|
| 8619 | }
|
| 8620 |
|
| 8621 | .cds--tag--interactive:focus {
|
| 8622 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 8623 | outline-offset: 1px;
|
| 8624 | }
|
| 8625 |
|
| 8626 | .cds--tag--filter {
|
| 8627 | padding-block-end: 0;
|
| 8628 | padding-block-start: 0;
|
| 8629 | padding-inline-end: 0;
|
| 8630 | }
|
| 8631 | .cds--tag--filter:hover {
|
| 8632 | outline: none;
|
| 8633 | }
|
| 8634 |
|
| 8635 | .cds--tag--selectable {
|
| 8636 | border: 1px solid var(--cds-border-inverse, #161616);
|
| 8637 | background-color: var(--cds-layer);
|
| 8638 | color: var(--cds-text-primary, #161616);
|
| 8639 | cursor: pointer;
|
| 8640 | }
|
| 8641 | .cds--tag--selectable:hover {
|
| 8642 | background-color: var(--cds-layer-hover);
|
| 8643 | outline: none;
|
| 8644 | }
|
| 8645 | .cds--tag--selectable:focus {
|
| 8646 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 8647 | outline-offset: 1px;
|
| 8648 | }
|
| 8649 |
|
| 8650 | .cds--tag--selectable-selected {
|
| 8651 | background-color: var(--cds-layer-selected-inverse, #161616);
|
| 8652 | color: var(--cds-text-inverse, #ffffff);
|
| 8653 | }
|
| 8654 | .cds--tag--selectable-selected:hover {
|
| 8655 | background-color: var(--cds-layer-selected-inverse, #161616);
|
| 8656 | }
|
| 8657 |
|
| 8658 | .cds--tag--operational {
|
| 8659 | border: 1px solid var(--cds-tag-border-gray, #a8a8a8);
|
| 8660 | background-color: var(--cds-tag-background-gray, #e0e0e0);
|
| 8661 | color: var(--cds-tag-color-gray, #161616);
|
| 8662 | cursor: pointer;
|
| 8663 | }
|
| 8664 | .cds--tag--operational:hover {
|
| 8665 | background-color: var(--cds-tag-hover-gray, #d1d1d1);
|
| 8666 | outline: none;
|
| 8667 | }
|
| 8668 | .cds--tag--operational:focus {
|
| 8669 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 8670 | outline-offset: 1px;
|
| 8671 | }
|
| 8672 |
|
| 8673 | .cds--tag--red {
|
| 8674 | background-color: var(--cds-tag-background-red, #ffd7d9);
|
| 8675 | color: var(--cds-tag-color-red, #750e13);
|
| 8676 | }
|
| 8677 | .cds--tag--red.cds--tag--operational {
|
| 8678 | border: 1px solid var(--cds-tag-border-red, #ff8389);
|
| 8679 | }
|
| 8680 | .cds--tag--red.cds--tag--operational:hover {
|
| 8681 | background-color: var(--cds-tag-hover-red, #ffc2c5);
|
| 8682 | }
|
| 8683 | .cds--tag--red .cds--tag__close-icon:hover {
|
| 8684 | background-color: var(--cds-tag-hover-red, #ffc2c5);
|
| 8685 | }
|
| 8686 |
|
| 8687 | .cds--tag--magenta {
|
| 8688 | background-color: var(--cds-tag-background-magenta, #ffd6e8);
|
| 8689 | color: var(--cds-tag-color-magenta, #740937);
|
| 8690 | }
|
| 8691 | .cds--tag--magenta.cds--tag--operational {
|
| 8692 | border: 1px solid var(--cds-tag-border-magenta, #ff7eb6);
|
| 8693 | }
|
| 8694 | .cds--tag--magenta.cds--tag--operational:hover {
|
| 8695 | background-color: var(--cds-tag-hover-magenta, #ffbdda);
|
| 8696 | }
|
| 8697 | .cds--tag--magenta .cds--tag__close-icon:hover {
|
| 8698 | background-color: var(--cds-tag-hover-magenta, #ffbdda);
|
| 8699 | }
|
| 8700 |
|
| 8701 | .cds--tag--purple {
|
| 8702 | background-color: var(--cds-tag-background-purple, #e8daff);
|
| 8703 | color: var(--cds-tag-color-purple, #491d8b);
|
| 8704 | }
|
| 8705 | .cds--tag--purple.cds--tag--operational {
|
| 8706 | border: 1px solid var(--cds-tag-border-purple, #be95ff);
|
| 8707 | }
|
| 8708 | .cds--tag--purple.cds--tag--operational:hover {
|
| 8709 | background-color: var(--cds-tag-hover-purple, #dcc7ff);
|
| 8710 | }
|
| 8711 | .cds--tag--purple .cds--tag__close-icon:hover {
|
| 8712 | background-color: var(--cds-tag-hover-purple, #dcc7ff);
|
| 8713 | }
|
| 8714 |
|
| 8715 | .cds--tag--blue {
|
| 8716 | background-color: var(--cds-tag-background-blue, #d0e2ff);
|
| 8717 | color: var(--cds-tag-color-blue, #002d9c);
|
| 8718 | }
|
| 8719 | .cds--tag--blue.cds--tag--operational {
|
| 8720 | border: 1px solid var(--cds-tag-border-blue, #78a9ff);
|
| 8721 | }
|
| 8722 | .cds--tag--blue.cds--tag--operational:hover {
|
| 8723 | background-color: var(--cds-tag-hover-blue, #b8d3ff);
|
| 8724 | }
|
| 8725 | .cds--tag--blue .cds--tag__close-icon:hover {
|
| 8726 | background-color: var(--cds-tag-hover-blue, #b8d3ff);
|
| 8727 | }
|
| 8728 |
|
| 8729 | .cds--tag--cyan {
|
| 8730 | background-color: var(--cds-tag-background-cyan, #bae6ff);
|
| 8731 | color: var(--cds-tag-color-cyan, #003a6d);
|
| 8732 | }
|
| 8733 | .cds--tag--cyan.cds--tag--operational {
|
| 8734 | border: 1px solid var(--cds-tag-border-cyan, #33b1ff);
|
| 8735 | }
|
| 8736 | .cds--tag--cyan.cds--tag--operational:hover {
|
| 8737 | background-color: var(--cds-tag-hover-cyan, #99daff);
|
| 8738 | }
|
| 8739 | .cds--tag--cyan .cds--tag__close-icon:hover {
|
| 8740 | background-color: var(--cds-tag-hover-cyan, #99daff);
|
| 8741 | }
|
| 8742 |
|
| 8743 | .cds--tag--teal {
|
| 8744 | background-color: var(--cds-tag-background-teal, #9ef0f0);
|
| 8745 | color: var(--cds-tag-color-teal, #004144);
|
| 8746 | }
|
| 8747 | .cds--tag--teal.cds--tag--operational {
|
| 8748 | border: 1px solid var(--cds-tag-border-teal, #08bdba);
|
| 8749 | }
|
| 8750 | .cds--tag--teal.cds--tag--operational:hover {
|
| 8751 | background-color: var(--cds-tag-hover-teal, #57e5e5);
|
| 8752 | }
|
| 8753 | .cds--tag--teal .cds--tag__close-icon:hover {
|
| 8754 | background-color: var(--cds-tag-hover-teal, #57e5e5);
|
| 8755 | }
|
| 8756 |
|
| 8757 | .cds--tag--green {
|
| 8758 | background-color: var(--cds-tag-background-green, #a7f0ba);
|
| 8759 | color: var(--cds-tag-color-green, #044317);
|
| 8760 | }
|
| 8761 | .cds--tag--green.cds--tag--operational {
|
| 8762 | border: 1px solid var(--cds-tag-border-green, #42be65);
|
| 8763 | }
|
| 8764 | .cds--tag--green.cds--tag--operational:hover {
|
| 8765 | background-color: var(--cds-tag-hover-green, #74e792);
|
| 8766 | }
|
| 8767 | .cds--tag--green .cds--tag__close-icon:hover {
|
| 8768 | background-color: var(--cds-tag-hover-green, #74e792);
|
| 8769 | }
|
| 8770 |
|
| 8771 | .cds--tag--gray {
|
| 8772 | background-color: var(--cds-tag-background-gray, #e0e0e0);
|
| 8773 | color: var(--cds-tag-color-gray, #161616);
|
| 8774 | }
|
| 8775 | .cds--tag--gray.cds--tag--operational {
|
| 8776 | border: 1px solid var(--cds-tag-border-gray, #a8a8a8);
|
| 8777 | }
|
| 8778 | .cds--tag--gray.cds--tag--operational:hover {
|
| 8779 | background-color: var(--cds-tag-hover-gray, #d1d1d1);
|
| 8780 | }
|
| 8781 | .cds--tag--gray .cds--tag__close-icon:hover {
|
| 8782 | background-color: var(--cds-tag-hover-gray, #d1d1d1);
|
| 8783 | }
|
| 8784 |
|
| 8785 | .cds--tag--cool-gray {
|
| 8786 | background-color: var(--cds-tag-background-cool-gray, #dde1e6);
|
| 8787 | color: var(--cds-tag-color-cool-gray, #121619);
|
| 8788 | }
|
| 8789 | .cds--tag--cool-gray.cds--tag--operational {
|
| 8790 | border: 1px solid var(--cds-tag-border-cool-gray, #a2a9b0);
|
| 8791 | }
|
| 8792 | .cds--tag--cool-gray.cds--tag--operational:hover {
|
| 8793 | background-color: var(--cds-tag-hover-cool-gray, #cdd3da);
|
| 8794 | }
|
| 8795 | .cds--tag--cool-gray .cds--tag__close-icon:hover {
|
| 8796 | background-color: var(--cds-tag-hover-cool-gray, #cdd3da);
|
| 8797 | }
|
| 8798 |
|
| 8799 | .cds--tag--warm-gray {
|
| 8800 | background-color: var(--cds-tag-background-warm-gray, #e5e0df);
|
| 8801 | color: var(--cds-tag-color-warm-gray, #171414);
|
| 8802 | }
|
| 8803 | .cds--tag--warm-gray.cds--tag--operational {
|
| 8804 | border: 1px solid var(--cds-tag-border-warm-gray, #ada8a8);
|
| 8805 | }
|
| 8806 | .cds--tag--warm-gray.cds--tag--operational:hover {
|
| 8807 | background-color: var(--cds-tag-hover-warm-gray, #d8d0cf);
|
| 8808 | }
|
| 8809 | .cds--tag--warm-gray .cds--tag__close-icon:hover {
|
| 8810 | background-color: var(--cds-tag-hover-warm-gray, #d8d0cf);
|
| 8811 | }
|
| 8812 |
|
| 8813 | .cds--tag--high-contrast:not(.cds--tag--operational) {
|
| 8814 | background-color: var(--cds-background-inverse, #393939);
|
| 8815 | color: var(--cds-text-inverse, #ffffff);
|
| 8816 | }
|
| 8817 | .cds--tag--high-contrast:not(.cds--tag--operational).cds--tag--operational {
|
| 8818 | border: 1px solid var(--cds-background-inverse, #393939);
|
| 8819 | }
|
| 8820 | .cds--tag--high-contrast:not(.cds--tag--operational).cds--tag--operational:hover {
|
| 8821 | background-color: var(--cds-background-inverse-hover, #474747);
|
| 8822 | }
|
| 8823 | .cds--tag--high-contrast:not(.cds--tag--operational) .cds--tag__close-icon:hover {
|
| 8824 | background-color: var(--cds-background-inverse-hover, #474747);
|
| 8825 | }
|
| 8826 |
|
| 8827 | .cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]) {
|
| 8828 | background-color: var(--cds-background, #ffffff);
|
| 8829 | color: var(--cds-text-primary, #161616);
|
| 8830 | outline: 1px solid var(--cds-background-inverse, #393939);
|
| 8831 | outline-offset: -1px;
|
| 8832 | }
|
| 8833 | .cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]).cds--tag--operational {
|
| 8834 | border: 1px solid var(--cds-background, #ffffff);
|
| 8835 | }
|
| 8836 | .cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]).cds--tag--operational:hover {
|
| 8837 | background-color: var(--cds-layer-hover);
|
| 8838 | }
|
| 8839 | .cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]) .cds--tag__close-icon:hover {
|
| 8840 | background-color: var(--cds-layer-hover);
|
| 8841 | }
|
| 8842 |
|
| 8843 | .cds--tag--disabled:not(.cds--tag--operational),
|
| 8844 | .cds--tag--filter.cds--tag--disabled,
|
| 8845 | .cds--tag--interactive.cds--tag--disabled {
|
| 8846 | background-color: var(--cds-layer);
|
| 8847 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 8848 | box-shadow: none;
|
| 8849 | outline: none;
|
| 8850 | }
|
| 8851 | .cds--tag--disabled:not(.cds--tag--operational).cds--tag--operational,
|
| 8852 | .cds--tag--filter.cds--tag--disabled.cds--tag--operational,
|
| 8853 | .cds--tag--interactive.cds--tag--disabled.cds--tag--operational {
|
| 8854 | border: 1px solid var(--cds-layer);
|
| 8855 | }
|
| 8856 | .cds--tag--disabled:not(.cds--tag--operational).cds--tag--operational:hover,
|
| 8857 | .cds--tag--filter.cds--tag--disabled.cds--tag--operational:hover,
|
| 8858 | .cds--tag--interactive.cds--tag--disabled.cds--tag--operational:hover {
|
| 8859 | background-color: var(--cds-layer);
|
| 8860 | }
|
| 8861 | .cds--tag--disabled:not(.cds--tag--operational) .cds--tag__close-icon:hover,
|
| 8862 | .cds--tag--filter.cds--tag--disabled .cds--tag__close-icon:hover,
|
| 8863 | .cds--tag--interactive.cds--tag--disabled .cds--tag__close-icon:hover {
|
| 8864 | background-color: var(--cds-layer);
|
| 8865 | }
|
| 8866 | .cds--tag--disabled:not(.cds--tag--operational):hover,
|
| 8867 | .cds--tag--filter.cds--tag--disabled:hover,
|
| 8868 | .cds--tag--interactive.cds--tag--disabled:hover {
|
| 8869 | cursor: not-allowed;
|
| 8870 | }
|
| 8871 | .cds--tag--disabled:not(.cds--tag--operational) .cds--tag__label,
|
| 8872 | .cds--tag--filter.cds--tag--disabled .cds--tag__label,
|
| 8873 | .cds--tag--interactive.cds--tag--disabled .cds--tag__label {
|
| 8874 | background-color: var(--cds-layer);
|
| 8875 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 8876 | }
|
| 8877 |
|
| 8878 | .cds--tag--selectable.cds--tag--disabled,
|
| 8879 | .cds--tag--operational.cds--tag--disabled {
|
| 8880 | border: 1px solid var(--cds-border-disabled, #c6c6c6);
|
| 8881 | background-color: var(--cds-layer);
|
| 8882 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 8883 | }
|
| 8884 | .cds--tag--selectable.cds--tag--disabled:hover,
|
| 8885 | .cds--tag--operational.cds--tag--disabled:hover {
|
| 8886 | background-color: var(--cds-layer);
|
| 8887 | cursor: not-allowed;
|
| 8888 | }
|
| 8889 |
|
| 8890 | .cds--tag--interactive {
|
| 8891 | transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
|
| 8892 | }
|
| 8893 |
|
| 8894 | .cds--tag__close-icon {
|
| 8895 | display: flex;
|
| 8896 | flex-shrink: 0;
|
| 8897 | align-items: center;
|
| 8898 | justify-content: center;
|
| 8899 | padding: 0;
|
| 8900 | border: 0;
|
| 8901 | border-radius: 50%;
|
| 8902 | margin: 0 0 0 0.125rem;
|
| 8903 | background-color: transparent;
|
| 8904 | block-size: var(--cds-layout-size-height-local);
|
| 8905 | color: currentColor;
|
| 8906 | cursor: pointer;
|
| 8907 | inline-size: var(--cds-layout-size-height-local);
|
| 8908 | transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 8909 | }
|
| 8910 | .cds--tag__close-icon svg {
|
| 8911 | fill: currentColor;
|
| 8912 | }
|
| 8913 |
|
| 8914 | .cds--tag__custom-icon {
|
| 8915 | flex-shrink: 0;
|
| 8916 | padding: 0;
|
| 8917 | border: 0;
|
| 8918 | background-color: transparent;
|
| 8919 | block-size: 1rem;
|
| 8920 | color: currentColor;
|
| 8921 | inline-size: 1rem;
|
| 8922 | margin-inline-end: 0.25rem;
|
| 8923 | outline: none;
|
| 8924 | }
|
| 8925 | .cds--tag__custom-icon svg {
|
| 8926 | fill: currentColor;
|
| 8927 | }
|
| 8928 |
|
| 8929 | .cds--tag--disabled .cds--tag__close-icon {
|
| 8930 | cursor: not-allowed;
|
| 8931 | }
|
| 8932 |
|
| 8933 | .cds--tag__close-icon:focus {
|
| 8934 | z-index: 99999;
|
| 8935 | border-radius: 50%;
|
| 8936 | box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
|
| 8937 | outline: none;
|
| 8938 | }
|
| 8939 |
|
| 8940 | .cds--tag--high-contrast .cds--tag__close-icon:focus {
|
| 8941 | box-shadow: inset 0 0 0 1px var(--cds-focus-inverse, #ffffff);
|
| 8942 | }
|
| 8943 |
|
| 8944 | .cds--tag--filter.cds--tag--disabled .cds--tag__close-icon:hover {
|
| 8945 | background-color: transparent;
|
| 8946 | }
|
| 8947 |
|
| 8948 | .cds--tag--filter.cds--tag--disabled svg {
|
| 8949 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 8950 | }
|
| 8951 |
|
| 8952 | .cds--tag--sm.cds--tag--filter {
|
| 8953 | padding-inline-end: 0;
|
| 8954 | }
|
| 8955 |
|
| 8956 | .cds--tag--sm .cds--tag__close-icon {
|
| 8957 | margin-inline-start: 0.3125rem;
|
| 8958 | }
|
| 8959 |
|
| 8960 | .cds--tag.cds--skeleton {
|
| 8961 | position: relative;
|
| 8962 | padding: 0;
|
| 8963 | border: none;
|
| 8964 | background: var(--cds-skeleton-background, #e8e8e8);
|
| 8965 | box-shadow: none;
|
| 8966 | pointer-events: none;
|
| 8967 | background-color: var(--cds-skeleton-background, #e8e8e8);
|
| 8968 | color: var(--cds-text-primary, #161616);
|
| 8969 | overflow: hidden;
|
| 8970 | inline-size: 3.75rem;
|
| 8971 | }
|
| 8972 | .cds--tag.cds--skeleton:hover, .cds--tag.cds--skeleton:focus, .cds--tag.cds--skeleton:active {
|
| 8973 | border: none;
|
| 8974 | cursor: default;
|
| 8975 | outline: none;
|
| 8976 | }
|
| 8977 | .cds--tag.cds--skeleton::before {
|
| 8978 | position: absolute;
|
| 8979 | animation: 3000ms ease-in-out cds--skeleton infinite;
|
| 8980 | background: var(--cds-skeleton-element, #c6c6c6);
|
| 8981 | block-size: 100%;
|
| 8982 | content: "";
|
| 8983 | inline-size: 100%;
|
| 8984 | will-change: transform-origin, transform, opacity;
|
| 8985 | }
|
| 8986 | @media (prefers-reduced-motion: reduce) {
|
| 8987 | .cds--tag.cds--skeleton::before {
|
| 8988 | animation: none;
|
| 8989 | }
|
| 8990 | }
|
| 8991 | .cds--tag.cds--skeleton.cds--tag--operational {
|
| 8992 | border: 1px solid var(--cds-skeleton-background, #e8e8e8);
|
| 8993 | }
|
| 8994 | .cds--tag.cds--skeleton.cds--tag--operational:hover {
|
| 8995 | background-color: var(--cds-skeleton-background, #e8e8e8);
|
| 8996 | }
|
| 8997 | .cds--tag.cds--skeleton .cds--tag__close-icon:hover {
|
| 8998 | background-color: var(--cds-skeleton-background, #e8e8e8);
|
| 8999 | }
|
| 9000 | @media not all and (min-resolution >= 0.001dpcm) {
|
| 9001 | @supports (-webkit-appearance: none) and (stroke-color: transparent) {
|
| 9002 | .cds--tag.cds--skeleton {
|
| 9003 | transform: translateZ(0);
|
| 9004 | }
|
| 9005 | }
|
| 9006 | }
|
| 9007 |
|
| 9008 | .cds--tag .cds--slug .cds--slug__button--inline {
|
| 9009 | color: currentColor;
|
| 9010 | margin-inline-start: 0.0625rem;
|
| 9011 | }
|
| 9012 |
|
| 9013 | .cds--tag .cds--slug .cds--slug__button--inline .cds--slug__text::before {
|
| 9014 | background-color: currentColor;
|
| 9015 | }
|
| 9016 |
|
| 9017 | .cds--tag .cds--slug .cds--slug__button--inline:hover {
|
| 9018 | border-color: currentColor;
|
| 9019 | }
|
| 9020 |
|
| 9021 |
|
| 9022 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 9023 | .cds--tag {
|
| 9024 | outline: 1px solid transparent;
|
| 9025 | }
|
| 9026 | }
|
| 9027 |
|
| 9028 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 9029 | .cds--tag__close-icon svg,
|
| 9030 | .cds--tag__custom-icon svg {
|
| 9031 | fill: ButtonText;
|
| 9032 | }
|
| 9033 | }
|
| 9034 |
|
| 9035 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 9036 | .cds--tag__close-icon:focus {
|
| 9037 | color: Highlight;
|
| 9038 | outline: 1px solid Highlight;
|
| 9039 | }
|
| 9040 | }
|
| 9041 |
|
| 9042 | .cds--tag-label-tooltip {
|
| 9043 | max-inline-size: -webkit-fill-available;
|
| 9044 | }
|
| 9045 |
|
| 9046 | .cds--tag__custom-icon + .cds--tag-label-tooltip {
|
| 9047 | max-inline-size: 11rem;
|
| 9048 | }
|
| 9049 |
|
| 9050 | .cds--tag--filter .cds--tag__custom-icon + .cds--tag-label-tooltip {
|
| 9051 | max-inline-size: 9.875rem;
|
| 9052 | }
|
| 9053 |
|
| 9054 |
|
| 9055 | .cds--interactive--tag-children {
|
| 9056 | display: inline-flex;
|
| 9057 | max-inline-size: 12.5rem;
|
| 9058 | place-items: center;
|
| 9059 | }
|
| 9060 |
|
| 9061 | .cds--tag--filter .cds--tag__custom-icon + span > .cds--interactive--tag-children {
|
| 9062 | max-inline-size: 11.5rem;
|
| 9063 | }
|
| 9064 |
|
| 9065 | .cds--tag .cds--definition-term {
|
| 9066 | border-block-end: none;
|
| 9067 | cursor: default;
|
| 9068 | max-inline-size: 12rem;
|
| 9069 | }
|
| 9070 |
|
| 9071 | .cds--tag .cds--tag__custom-icon + span > .cds--definition-term {
|
| 9072 | max-inline-size: 11rem;
|
| 9073 | }
|
| 9074 |
|
| 9075 | .cds--tag > .cds--popover-container {
|
| 9076 | display: flex;
|
| 9077 | }
|
| 9078 |
|
| 9079 | .cds--toggletip-button:has(.cds--tag--operational.cds--tag--disabled) {
|
| 9080 | pointer-events: none;
|
| 9081 | }
|
| 9082 |
|
| 9083 | .cds--list-box__wrapper--inline {
|
| 9084 | display: inline-grid;
|
| 9085 | align-items: center;
|
| 9086 | grid-gap: 0.25rem;
|
| 9087 | grid-template: auto auto/auto auto;
|
| 9088 | }
|
| 9089 | .cds--list-box__wrapper--inline .cds--label {
|
| 9090 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 9091 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 9092 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 9093 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 9094 | }
|
| 9095 | .cds--list-box__wrapper--inline .cds--label,
|
| 9096 | .cds--list-box__wrapper--inline .cds--form__helper-text,
|
| 9097 | .cds--list-box__wrapper--inline .cds--form-requirement {
|
| 9098 | margin: 0;
|
| 9099 | }
|
| 9100 | .cds--list-box__wrapper--inline .cds--form__helper-text {
|
| 9101 | max-inline-size: none;
|
| 9102 | }
|
| 9103 | .cds--list-box__wrapper--inline .cds--form-requirement {
|
| 9104 | grid-column: 2;
|
| 9105 | }
|
| 9106 |
|
| 9107 | .cds--list-box {
|
| 9108 | position: relative;
|
| 9109 | border: none;
|
| 9110 | background-color: var(--cds-field);
|
| 9111 | block-size: 2.5rem;
|
| 9112 | border-block-end: 1px solid var(--cds-border-strong);
|
| 9113 | color: var(--cds-text-primary, #161616);
|
| 9114 | cursor: pointer;
|
| 9115 | inline-size: 100%;
|
| 9116 | max-block-size: 2.5rem;
|
| 9117 | transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 9118 | }
|
| 9119 | .cds--list-box html {
|
| 9120 | font-size: 100%;
|
| 9121 | }
|
| 9122 | .cds--list-box body {
|
| 9123 | font-weight: 400;
|
| 9124 | font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
|
| 9125 | -moz-osx-font-smoothing: grayscale;
|
| 9126 | -webkit-font-smoothing: antialiased;
|
| 9127 | text-rendering: optimizeLegibility;
|
| 9128 | }
|
| 9129 | .cds--list-box code {
|
| 9130 | font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
|
| 9131 | }
|
| 9132 | .cds--list-box strong {
|
| 9133 | font-weight: 600;
|
| 9134 | }
|
| 9135 | .cds--list-box:hover {
|
| 9136 | background-color: var(--cds-field-hover);
|
| 9137 | }
|
| 9138 |
|
| 9139 | .cds--list-box--lg {
|
| 9140 | block-size: 3rem;
|
| 9141 | max-block-size: 3rem;
|
| 9142 | }
|
| 9143 |
|
| 9144 | .cds--list-box--sm {
|
| 9145 | block-size: 2rem;
|
| 9146 | max-block-size: 2rem;
|
| 9147 | }
|
| 9148 |
|
| 9149 | .cds--list-box--expanded {
|
| 9150 | border-block-end-color: var(--cds-border-subtle-01, #c6c6c6);
|
| 9151 | }
|
| 9152 |
|
| 9153 | .cds--layer-two .cds--list-box--expanded {
|
| 9154 | border-block-end-color: var(--cds-border-subtle-02, #e0e0e0);
|
| 9155 | }
|
| 9156 |
|
| 9157 | .cds--layer-three .cds--list-box--expanded {
|
| 9158 | border-block-end-color: var(--cds-border-subtle-03, #c6c6c6);
|
| 9159 | }
|
| 9160 |
|
| 9161 | .cds--list-box--expanded:hover {
|
| 9162 | background-color: var(--cds-field);
|
| 9163 | }
|
| 9164 |
|
| 9165 | .cds--list-box--expanded:hover.cds--list-box--light:hover {
|
| 9166 | background-color: var(--cds-field-02, #ffffff);
|
| 9167 | }
|
| 9168 |
|
| 9169 | .cds--list-box .cds--text-input {
|
| 9170 | block-size: 100%;
|
| 9171 | min-inline-size: 0;
|
| 9172 | }
|
| 9173 |
|
| 9174 | .cds--list-box__invalid-icon {
|
| 9175 | position: absolute;
|
| 9176 | fill: var(--cds-support-error, #da1e28);
|
| 9177 | inset-block-start: 50%;
|
| 9178 | inset-inline-end: 2.5rem;
|
| 9179 | transform: translateY(-50%);
|
| 9180 | }
|
| 9181 |
|
| 9182 | .cds--list-box__invalid-icon--warning {
|
| 9183 | fill: var(--cds-support-warning, #f1c21b);
|
| 9184 | }
|
| 9185 |
|
| 9186 | .cds--list-box__invalid-icon--warning path[fill] {
|
| 9187 | fill: #000000;
|
| 9188 | opacity: 1;
|
| 9189 | }
|
| 9190 |
|
| 9191 | .cds--list-box[data-invalid] .cds--list-box__field,
|
| 9192 | .cds--list-box.cds--list-box--warning .cds--list-box__field {
|
| 9193 | border-block-end: 0;
|
| 9194 | padding-inline-end: 4rem;
|
| 9195 | }
|
| 9196 |
|
| 9197 | .cds--list-box[data-invalid].cds--list-box--inline .cds--list-box__field,
|
| 9198 | .cds--list-box.cds--list-box--warning.cds--list-box--inline .cds--list-box__field {
|
| 9199 | padding-inline-end: 3.5rem;
|
| 9200 | }
|
| 9201 |
|
| 9202 | .cds--list-box--light {
|
| 9203 | background-color: var(--cds-field-02, #ffffff);
|
| 9204 | }
|
| 9205 | .cds--list-box--light:hover {
|
| 9206 | background-color: var(--cds-field-hover);
|
| 9207 | }
|
| 9208 |
|
| 9209 | .cds--list-box--light .cds--list-box__menu {
|
| 9210 | background: var(--cds-layer);
|
| 9211 | }
|
| 9212 |
|
| 9213 | .cds--list-box--light .cds--list-box__menu-item__option {
|
| 9214 | border-block-start-color: var(--cds-border-subtle);
|
| 9215 | }
|
| 9216 |
|
| 9217 | .cds--list-box--light.cds--list-box--expanded {
|
| 9218 | border-block-end-color: transparent;
|
| 9219 | }
|
| 9220 |
|
| 9221 | .cds--list-box--disabled:hover {
|
| 9222 | background-color: var(--cds-field);
|
| 9223 | }
|
| 9224 |
|
| 9225 | .cds--list-box--light.cds--list-box--disabled {
|
| 9226 | background-color: var(--cds-field-02, #ffffff);
|
| 9227 | }
|
| 9228 |
|
| 9229 | .cds--list-box--disabled,
|
| 9230 | .cds--list-box--disabled .cds--list-box__field,
|
| 9231 | .cds--list-box--disabled .cds--list-box__field:focus {
|
| 9232 | border-block-end-color: transparent;
|
| 9233 | outline: none;
|
| 9234 | }
|
| 9235 |
|
| 9236 | .cds--list-box--disabled .cds--list-box__label,
|
| 9237 | .cds--list-box--disabled.cds--list-box--inline .cds--list-box__label {
|
| 9238 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 9239 | }
|
| 9240 |
|
| 9241 | .cds--list-box--disabled .cds--list-box__menu-icon > svg,
|
| 9242 | .cds--list-box--disabled .cds--list-box__selection > svg {
|
| 9243 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 9244 | }
|
| 9245 |
|
| 9246 | .cds--list-box--disabled,
|
| 9247 | .cds--list-box--disabled .cds--list-box__field,
|
| 9248 | .cds--list-box--disabled .cds--list-box__menu-icon {
|
| 9249 | cursor: not-allowed;
|
| 9250 | }
|
| 9251 |
|
| 9252 | .cds--list-box--disabled .cds--list-box__menu-item,
|
| 9253 | .cds--list-box--disabled .cds--list-box__menu-item:hover,
|
| 9254 | .cds--list-box--disabled .cds--list-box__menu-item--highlighted {
|
| 9255 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 9256 | text-decoration: none;
|
| 9257 | }
|
| 9258 |
|
| 9259 | .cds--list-box--disabled .cds--list-box__selection:hover {
|
| 9260 | cursor: not-allowed;
|
| 9261 | }
|
| 9262 |
|
| 9263 | .cds--list-box--disabled.cds--list-box[data-invalid] .cds--list-box__field {
|
| 9264 | padding-inline-end: 3rem;
|
| 9265 | }
|
| 9266 |
|
| 9267 | .cds--list-box--disabled.cds--list-box[data-invalid].cds--list-box--inline .cds--list-box__field {
|
| 9268 | padding-inline-end: 2rem;
|
| 9269 | }
|
| 9270 |
|
| 9271 | .cds--list-box.cds--list-box--inline {
|
| 9272 | border-width: 0;
|
| 9273 | background-color: transparent;
|
| 9274 | }
|
| 9275 | .cds--list-box.cds--list-box--inline:hover {
|
| 9276 | background-color: var(--cds-layer-hover);
|
| 9277 | }
|
| 9278 |
|
| 9279 | .cds--list-box.cds--list-box--inline.cds--list-box--expanded {
|
| 9280 | border-block-end-width: 0;
|
| 9281 | }
|
| 9282 |
|
| 9283 | .cds--list-box.cds--list-box--inline.cds--list-box--expanded .cds--list-box__field[aria-expanded=true] {
|
| 9284 | border-width: 0;
|
| 9285 | }
|
| 9286 |
|
| 9287 | .cds--list-box.cds--list-box--inline.cds--list-box--expanded:hover,
|
| 9288 | .cds--list-box.cds--list-box--inline.cds--list-box--disabled:hover {
|
| 9289 | background-color: transparent;
|
| 9290 | }
|
| 9291 |
|
| 9292 | .cds--list-box.cds--list-box--inline .cds--list-box__field {
|
| 9293 | padding: 0 2rem 0 0.5rem;
|
| 9294 | }
|
| 9295 |
|
| 9296 | .cds--list-box.cds--list-box--inline .cds--list-box__menu-icon {
|
| 9297 | inset-inline-end: 0.5rem;
|
| 9298 | }
|
| 9299 |
|
| 9300 | .cds--list-box.cds--list-box--inline .cds--list-box__invalid-icon {
|
| 9301 | inset-inline-end: 2rem;
|
| 9302 | }
|
| 9303 |
|
| 9304 | .cds--list-box--inline .cds--list-box__label {
|
| 9305 | color: var(--cds-text-primary, #161616);
|
| 9306 | }
|
| 9307 |
|
| 9308 | .cds--list-box--inline .cds--list-box__field {
|
| 9309 | block-size: 100%;
|
| 9310 | }
|
| 9311 |
|
| 9312 | .cds--dropdown--inline .cds--list-box__field {
|
| 9313 | max-inline-size: 30rem;
|
| 9314 | }
|
| 9315 |
|
| 9316 | .cds--dropdown--inline .cds--list-box__menu {
|
| 9317 | max-inline-size: 30rem;
|
| 9318 | min-inline-size: 18rem;
|
| 9319 | }
|
| 9320 |
|
| 9321 | .cds--list-box__field {
|
| 9322 | box-sizing: border-box;
|
| 9323 | padding: 0;
|
| 9324 | border: 0;
|
| 9325 | margin: 0;
|
| 9326 | font-family: inherit;
|
| 9327 | font-size: 100%;
|
| 9328 | vertical-align: baseline;
|
| 9329 | display: inline-block;
|
| 9330 | padding: 0;
|
| 9331 | border: 0;
|
| 9332 | -webkit-appearance: none;
|
| 9333 | -moz-appearance: none;
|
| 9334 | appearance: none;
|
| 9335 | background: none;
|
| 9336 | cursor: pointer;
|
| 9337 | text-align: start;
|
| 9338 | inline-size: 100%;
|
| 9339 | position: relative;
|
| 9340 | display: inline-flex;
|
| 9341 | overflow: hidden;
|
| 9342 | align-items: center;
|
| 9343 | block-size: calc(100% + 1px);
|
| 9344 | cursor: pointer;
|
| 9345 | outline: none;
|
| 9346 | padding-block: 0;
|
| 9347 | padding-inline-end: 3rem;
|
| 9348 | padding-inline-start: 1rem;
|
| 9349 | text-overflow: ellipsis;
|
| 9350 | vertical-align: top;
|
| 9351 | white-space: nowrap;
|
| 9352 | }
|
| 9353 | .cds--list-box__field *,
|
| 9354 | .cds--list-box__field *::before,
|
| 9355 | .cds--list-box__field *::after {
|
| 9356 | box-sizing: inherit;
|
| 9357 | }
|
| 9358 | .cds--list-box__field::-moz-focus-inner {
|
| 9359 | border: 0;
|
| 9360 | }
|
| 9361 |
|
| 9362 | .cds--list-box__field:focus {
|
| 9363 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 9364 | outline-offset: -2px;
|
| 9365 | }
|
| 9366 | @media screen and (prefers-contrast) {
|
| 9367 | .cds--list-box__field:focus {
|
| 9368 | outline-style: dotted;
|
| 9369 | }
|
| 9370 | }
|
| 9371 |
|
| 9372 | .cds--list-box__field[disabled] {
|
| 9373 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 9374 | outline: none;
|
| 9375 | }
|
| 9376 |
|
| 9377 | .cds--list-box__field .cds--text-input {
|
| 9378 | padding-inline-end: 5rem;
|
| 9379 | }
|
| 9380 |
|
| 9381 | .cds--list-box[data-invalid] .cds--list-box__field .cds--text-input,
|
| 9382 | .cds--list-box--warning .cds--list-box__field .cds--text-input {
|
| 9383 | padding-inline-end: 6.5625rem;
|
| 9384 | }
|
| 9385 |
|
| 9386 | .cds--list-box[data-invalid] .cds--list-box__field .cds--text-input + .cds--list-box__invalid-icon,
|
| 9387 | .cds--list-box--warning .cds--list-box__field .cds--text-input + .cds--list-box__invalid-icon {
|
| 9388 | inset-inline-end: 5.125rem;
|
| 9389 | }
|
| 9390 |
|
| 9391 | .cds--list-box__field .cds--text-input--empty {
|
| 9392 | padding-inline-end: 3rem;
|
| 9393 | }
|
| 9394 |
|
| 9395 | .cds--list-box[data-invalid] .cds--list-box__field .cds--text-input--empty,
|
| 9396 | .cds--list-box--warning .cds--list-box__field .cds--text-input--empty {
|
| 9397 | padding-inline-end: 4rem;
|
| 9398 | }
|
| 9399 |
|
| 9400 | .cds--list-box[data-invalid] .cds--list-box__field .cds--text-input--empty + .cds--list-box__invalid-icon,
|
| 9401 | .cds--list-box--warning .cds--list-box__field .cds--text-input--empty + .cds--list-box__invalid-icon {
|
| 9402 | inset-inline-end: 2.5rem;
|
| 9403 | }
|
| 9404 |
|
| 9405 | .cds--list-box__label {
|
| 9406 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 9407 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 9408 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 9409 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 9410 | overflow: hidden;
|
| 9411 | color: var(--cds-text-primary, #161616);
|
| 9412 | text-overflow: ellipsis;
|
| 9413 | -webkit-user-select: none;
|
| 9414 | -moz-user-select: none;
|
| 9415 | user-select: none;
|
| 9416 | white-space: nowrap;
|
| 9417 | }
|
| 9418 |
|
| 9419 | .cds--list-box__menu-icon {
|
| 9420 | box-sizing: border-box;
|
| 9421 | padding: 0;
|
| 9422 | border: 0;
|
| 9423 | margin: 0;
|
| 9424 | font-family: inherit;
|
| 9425 | font-size: 100%;
|
| 9426 | vertical-align: baseline;
|
| 9427 | display: inline-block;
|
| 9428 | padding: 0;
|
| 9429 | border: 0;
|
| 9430 | -webkit-appearance: none;
|
| 9431 | -moz-appearance: none;
|
| 9432 | appearance: none;
|
| 9433 | background: none;
|
| 9434 | cursor: pointer;
|
| 9435 | text-align: start;
|
| 9436 | position: absolute;
|
| 9437 | display: flex;
|
| 9438 | align-items: center;
|
| 9439 | justify-content: center;
|
| 9440 | block-size: 1.5rem;
|
| 9441 | cursor: pointer;
|
| 9442 | inline-size: 1.5rem;
|
| 9443 | inset-inline-end: 0.75rem;
|
| 9444 | outline: none;
|
| 9445 | transition: transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 9446 | }
|
| 9447 | .cds--list-box__menu-icon *,
|
| 9448 | .cds--list-box__menu-icon *::before,
|
| 9449 | .cds--list-box__menu-icon *::after {
|
| 9450 | box-sizing: inherit;
|
| 9451 | }
|
| 9452 | .cds--list-box__menu-icon::-moz-focus-inner {
|
| 9453 | border: 0;
|
| 9454 | }
|
| 9455 |
|
| 9456 | .cds--list-box__menu-icon > svg {
|
| 9457 | fill: var(--cds-icon-primary, #161616);
|
| 9458 | }
|
| 9459 |
|
| 9460 | .cds--list-box__menu-icon--open {
|
| 9461 | justify-content: center;
|
| 9462 | inline-size: 1.5rem;
|
| 9463 | transform: rotate(180deg);
|
| 9464 | }
|
| 9465 |
|
| 9466 | .cds--list-box__selection {
|
| 9467 | box-sizing: border-box;
|
| 9468 | padding: 0;
|
| 9469 | border: 0;
|
| 9470 | margin: 0;
|
| 9471 | font-family: inherit;
|
| 9472 | font-size: 100%;
|
| 9473 | vertical-align: baseline;
|
| 9474 | display: inline-block;
|
| 9475 | padding: 0;
|
| 9476 | border: 0;
|
| 9477 | -webkit-appearance: none;
|
| 9478 | -moz-appearance: none;
|
| 9479 | appearance: none;
|
| 9480 | background: none;
|
| 9481 | cursor: pointer;
|
| 9482 | text-align: start;
|
| 9483 | position: absolute;
|
| 9484 | display: flex;
|
| 9485 | align-items: center;
|
| 9486 | justify-content: center;
|
| 9487 | block-size: 1.5rem;
|
| 9488 | cursor: pointer;
|
| 9489 | inline-size: 1.5rem;
|
| 9490 | inset-block-start: 50%;
|
| 9491 |
|
| 9492 | inset-inline-end: 2.8125rem;
|
| 9493 | transform: translateY(-50%);
|
| 9494 | transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 9495 | -webkit-user-select: none;
|
| 9496 | -moz-user-select: none;
|
| 9497 | user-select: none;
|
| 9498 | }
|
| 9499 | .cds--list-box__selection *,
|
| 9500 | .cds--list-box__selection *::before,
|
| 9501 | .cds--list-box__selection *::after {
|
| 9502 | box-sizing: inherit;
|
| 9503 | }
|
| 9504 | .cds--list-box__selection::-moz-focus-inner {
|
| 9505 | border: 0;
|
| 9506 | }
|
| 9507 | .cds--list-box__selection:focus {
|
| 9508 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 9509 | outline-offset: -2px;
|
| 9510 | }
|
| 9511 | @media screen and (prefers-contrast) {
|
| 9512 | .cds--list-box__selection:focus {
|
| 9513 | outline-style: dotted;
|
| 9514 | }
|
| 9515 | }
|
| 9516 | .cds--list-box__selection:focus:hover {
|
| 9517 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 9518 | outline-offset: -2px;
|
| 9519 | }
|
| 9520 | @media screen and (prefers-contrast) {
|
| 9521 | .cds--list-box__selection:focus:hover {
|
| 9522 | outline-style: dotted;
|
| 9523 | }
|
| 9524 | }
|
| 9525 |
|
| 9526 | .cds--list-box__selection > svg {
|
| 9527 | fill: var(--cds-icon-primary, #161616);
|
| 9528 | }
|
| 9529 |
|
| 9530 | .cds--list-box--disabled .cds--list-box__selection:focus {
|
| 9531 | outline: none;
|
| 9532 | }
|
| 9533 |
|
| 9534 | .cds--list-box__selection--multi {
|
| 9535 | font-size: var(--cds-label-01-font-size, 0.75rem);
|
| 9536 | font-weight: var(--cds-label-01-font-weight, 400);
|
| 9537 | line-height: var(--cds-label-01-line-height, 1.33333);
|
| 9538 | letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
|
| 9539 | position: static;
|
| 9540 | display: flex;
|
| 9541 | align-items: center;
|
| 9542 | justify-content: space-between;
|
| 9543 | padding: 0.5rem;
|
| 9544 | border-radius: 0.75rem;
|
| 9545 | background-color: var(--cds-background-inverse, #393939);
|
| 9546 | block-size: 1.5rem;
|
| 9547 | color: var(--cds-text-inverse, #ffffff);
|
| 9548 | inline-size: auto;
|
| 9549 | inset-block-start: auto;
|
| 9550 | line-height: 0;
|
| 9551 | margin-inline-end: 0.625rem;
|
| 9552 | padding-inline-end: 0.125rem;
|
| 9553 | transform: none;
|
| 9554 | }
|
| 9555 |
|
| 9556 | .cds--list-box__selection--multi > svg {
|
| 9557 | padding: 0.125rem;
|
| 9558 | block-size: 1.25rem;
|
| 9559 | fill: var(--cds-icon-inverse, #ffffff);
|
| 9560 | inline-size: 1.25rem;
|
| 9561 | margin-inline-start: 0.25rem;
|
| 9562 | }
|
| 9563 | .cds--list-box__selection--multi > svg:hover {
|
| 9564 | border-radius: 50%;
|
| 9565 | background-color: var(--cds-button-secondary-hover, #474747);
|
| 9566 | }
|
| 9567 |
|
| 9568 | .cds--list-box--disabled .cds--list-box__selection--multi {
|
| 9569 | background-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 9570 | color: var(--cds-layer);
|
| 9571 | }
|
| 9572 | .cds--list-box--disabled .cds--list-box__selection--multi.cds--tag--operational {
|
| 9573 | border: 1px solid var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 9574 | }
|
| 9575 | .cds--list-box--disabled .cds--list-box__selection--multi.cds--tag--operational:hover {
|
| 9576 | background-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 9577 | }
|
| 9578 | .cds--list-box--disabled .cds--list-box__selection--multi .cds--tag__close-icon:hover {
|
| 9579 | background-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 9580 | }
|
| 9581 | .cds--list-box--disabled .cds--list-box__selection--multi > svg {
|
| 9582 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 9583 | }
|
| 9584 | .cds--list-box--disabled .cds--list-box__selection--multi > svg:hover {
|
| 9585 | background-color: initial;
|
| 9586 | }
|
| 9587 |
|
| 9588 | .cds--list-box__selection--multi:hover {
|
| 9589 | outline: none;
|
| 9590 | }
|
| 9591 |
|
| 9592 | .cds--list-box__menu {
|
| 9593 | box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
|
| 9594 | position: absolute;
|
| 9595 | z-index: 9100;
|
| 9596 | display: none;
|
| 9597 | background-color: var(--cds-layer);
|
| 9598 | inline-size: 100%;
|
| 9599 | inset-inline-end: 0;
|
| 9600 | inset-inline-start: 0;
|
| 9601 | overflow-y: auto;
|
| 9602 | transition: max-height 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 9603 | }
|
| 9604 | .cds--list-box__menu:focus {
|
| 9605 | outline: 1px solid var(--cds-focus, #0f62fe);
|
| 9606 | }
|
| 9607 | @media screen and (prefers-contrast) {
|
| 9608 | .cds--list-box__menu:focus {
|
| 9609 | outline-style: dotted;
|
| 9610 | }
|
| 9611 | }
|
| 9612 |
|
| 9613 | .cds--list-box .cds--list-box__field[aria-expanded=false] .cds--list-box__menu {
|
| 9614 | display: none;
|
| 9615 | max-block-size: 0;
|
| 9616 | visibility: hidden;
|
| 9617 | }
|
| 9618 |
|
| 9619 | .cds--list-box--expanded .cds--list-box__menu {
|
| 9620 | display: block;
|
| 9621 | max-block-size: 13.75rem;
|
| 9622 | }
|
| 9623 |
|
| 9624 | .cds--list-box--expanded.cds--list-box--lg .cds--list-box__menu {
|
| 9625 | max-block-size: 16.5rem;
|
| 9626 | }
|
| 9627 |
|
| 9628 | .cds--list-box--expanded.cds--list-box--sm .cds--list-box__menu {
|
| 9629 | max-block-size: 11rem;
|
| 9630 | }
|
| 9631 |
|
| 9632 | .cds--list-box__menu-item {
|
| 9633 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 9634 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 9635 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 9636 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 9637 | position: relative;
|
| 9638 | block-size: 2.5rem;
|
| 9639 | color: var(--cds-text-secondary, #525252);
|
| 9640 | cursor: pointer;
|
| 9641 | transition: background 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 9642 | -webkit-user-select: none;
|
| 9643 | -moz-user-select: none;
|
| 9644 | user-select: none;
|
| 9645 | }
|
| 9646 | .cds--list-box__menu-item:hover {
|
| 9647 | background-color: var(--cds-layer-hover);
|
| 9648 | }
|
| 9649 | .cds--list-box__menu-item:active {
|
| 9650 | background-color: var(--cds-layer-selected);
|
| 9651 | }
|
| 9652 |
|
| 9653 | .cds--list-box--light .cds--list-box__menu-item:hover {
|
| 9654 | background-color: var(--cds-layer-hover);
|
| 9655 | }
|
| 9656 |
|
| 9657 | .cds--list-box--sm .cds--list-box__menu-item {
|
| 9658 | block-size: 2rem;
|
| 9659 | }
|
| 9660 |
|
| 9661 | .cds--list-box--lg .cds--list-box__menu-item {
|
| 9662 | block-size: 3rem;
|
| 9663 | }
|
| 9664 |
|
| 9665 | .cds--list-box--disabled .cds--list-box__menu-item:hover {
|
| 9666 | background-color: transparent;
|
| 9667 | }
|
| 9668 |
|
| 9669 | .cds--list-box--light .cds--list-box__menu-item:active {
|
| 9670 | background-color: var(--cds-layer-selected);
|
| 9671 | }
|
| 9672 |
|
| 9673 | .cds--list-box--disabled .cds--list-box__menu-item__option:hover {
|
| 9674 | border-block-start-color: var(--cds-border-subtle-01, #c6c6c6);
|
| 9675 | }
|
| 9676 |
|
| 9677 | .cds--layer-two .cds--list-box--disabled .cds--list-box__menu-item__option:hover {
|
| 9678 | border-block-start-color: var(--cds-border-subtle-02, #e0e0e0);
|
| 9679 | }
|
| 9680 |
|
| 9681 | .cds--layer-three .cds--list-box--disabled .cds--list-box__menu-item__option:hover {
|
| 9682 | border-block-start-color: var(--cds-border-subtle-03, #c6c6c6);
|
| 9683 | }
|
| 9684 |
|
| 9685 | .cds--list-box__menu-item:first-of-type .cds--list-box__menu-item__option {
|
| 9686 | border-block-start-color: transparent;
|
| 9687 | }
|
| 9688 |
|
| 9689 | .cds--list-box__menu-item:hover .cds--list-box__menu-item__option {
|
| 9690 | color: var(--cds-text-primary, #161616);
|
| 9691 | }
|
| 9692 |
|
| 9693 | .cds--list-box--disabled .cds--list-box__menu-item:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
|
| 9694 | border-block-start-color: var(--cds-border-subtle-01, #c6c6c6);
|
| 9695 | }
|
| 9696 |
|
| 9697 | .cds--layer-two .cds--list-box--disabled .cds--list-box__menu-item:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
|
| 9698 | border-block-start-color: var(--cds-border-subtle-02, #e0e0e0);
|
| 9699 | }
|
| 9700 |
|
| 9701 | .cds--layer-three .cds--list-box--disabled .cds--list-box__menu-item:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
|
| 9702 | border-block-start-color: var(--cds-border-subtle-03, #c6c6c6);
|
| 9703 | }
|
| 9704 |
|
| 9705 | .cds--layer-two .cds--list-box__menu-item__option {
|
| 9706 | border-block-start-color: var(--cds-border-subtle-02, #e0e0e0);
|
| 9707 | }
|
| 9708 |
|
| 9709 | .cds--layer-three .cds--list-box__menu-item__option {
|
| 9710 | border-block-start-color: var(--cds-border-subtle-03, #c6c6c6);
|
| 9711 | }
|
| 9712 |
|
| 9713 | .cds--list-box__menu-item__option {
|
| 9714 | box-sizing: border-box;
|
| 9715 | padding: 0;
|
| 9716 | border: 0;
|
| 9717 | margin: 0;
|
| 9718 | font-family: inherit;
|
| 9719 | font-size: 100%;
|
| 9720 | vertical-align: baseline;
|
| 9721 | outline: 2px solid transparent;
|
| 9722 | outline-offset: -2px;
|
| 9723 | display: block;
|
| 9724 | overflow: hidden;
|
| 9725 | padding: 0.6875rem 0;
|
| 9726 | margin: 0 1rem;
|
| 9727 | block-size: 2.5rem;
|
| 9728 | border-block-end: 1px solid transparent;
|
| 9729 | border-block-start: 1px solid transparent;
|
| 9730 | border-block-start-color: var(--cds-border-subtle-01, #c6c6c6);
|
| 9731 | color: var(--cds-text-secondary, #525252);
|
| 9732 | font-weight: normal;
|
| 9733 | line-height: 1rem;
|
| 9734 | padding-inline-end: 1.5rem;
|
| 9735 | text-decoration: none;
|
| 9736 | text-overflow: ellipsis;
|
| 9737 | transition: border-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 9738 | white-space: nowrap;
|
| 9739 | }
|
| 9740 | .cds--list-box__menu-item__option *,
|
| 9741 | .cds--list-box__menu-item__option *::before,
|
| 9742 | .cds--list-box__menu-item__option *::after {
|
| 9743 | box-sizing: inherit;
|
| 9744 | }
|
| 9745 | .cds--list-box__menu-item__option:focus {
|
| 9746 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 9747 | outline-offset: -2px;
|
| 9748 | padding: 0.6875rem 1rem;
|
| 9749 | border-color: transparent;
|
| 9750 | margin: 0;
|
| 9751 | }
|
| 9752 | @media screen and (prefers-contrast) {
|
| 9753 | .cds--list-box__menu-item__option:focus {
|
| 9754 | outline-style: dotted;
|
| 9755 | }
|
| 9756 | }
|
| 9757 | .cds--list-box__menu-item__option:hover {
|
| 9758 | border-color: transparent;
|
| 9759 | color: var(--cds-text-primary, #161616);
|
| 9760 | }
|
| 9761 |
|
| 9762 | .cds--list-box--sm .cds--list-box__menu-item__option {
|
| 9763 | block-size: 2rem;
|
| 9764 | padding-block-end: 0.4375rem;
|
| 9765 | padding-block-start: 0.4375rem;
|
| 9766 | }
|
| 9767 |
|
| 9768 | .cds--list-box--lg .cds--list-box__menu-item__option {
|
| 9769 | block-size: 3rem;
|
| 9770 | padding-block-end: 0.9375rem;
|
| 9771 | padding-block-start: 0.9375rem;
|
| 9772 | }
|
| 9773 |
|
| 9774 | .cds--list-box--disabled .cds--list-box__menu-item:hover .cds--list-box__menu-item__option,
|
| 9775 | .cds--list-box--disabled .cds--list-box__menu-item__option {
|
| 9776 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 9777 | }
|
| 9778 |
|
| 9779 | .cds--list-box__menu-item[disabled],
|
| 9780 | .cds--list-box__menu-item[disabled] *,
|
| 9781 | .cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option,
|
| 9782 | .cds--list-box__menu-item[disabled]:hover {
|
| 9783 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 9784 | cursor: not-allowed;
|
| 9785 | outline: none;
|
| 9786 | }
|
| 9787 |
|
| 9788 | .cds--list-box__menu-item[disabled]:hover {
|
| 9789 | background-color: revert;
|
| 9790 | }
|
| 9791 |
|
| 9792 | .cds--list-box__menu-item[disabled] .cds--checkbox-label::before {
|
| 9793 | border-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 9794 | }
|
| 9795 |
|
| 9796 | .cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option,
|
| 9797 | .cds--list-box__menu-item[disabled]:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
|
| 9798 | border-block-start-color: var(--cds-border-subtle-01, #c6c6c6);
|
| 9799 | }
|
| 9800 |
|
| 9801 | .cds--layer-two .cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option,
|
| 9802 | .cds--layer-two .cds--list-box__menu-item[disabled]:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
|
| 9803 | border-block-start-color: var(--cds-border-subtle-02, #e0e0e0);
|
| 9804 | }
|
| 9805 |
|
| 9806 | .cds--layer-three .cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option,
|
| 9807 | .cds--layer-three .cds--list-box__menu-item[disabled]:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
|
| 9808 | border-block-start-color: var(--cds-border-subtle-03, #c6c6c6);
|
| 9809 | }
|
| 9810 |
|
| 9811 | .cds--list-box__menu-item--active + .cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option,
|
| 9812 | .cds--list-box__menu-item:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
|
| 9813 | border-block-start-color: transparent;
|
| 9814 | }
|
| 9815 |
|
| 9816 | .cds--list-box.cds--list-box--inline .cds--list-box__menu-item__option {
|
| 9817 | margin: 0 0.5rem;
|
| 9818 | }
|
| 9819 | .cds--list-box.cds--list-box--inline .cds--list-box__menu-item__option:focus {
|
| 9820 | margin: 0;
|
| 9821 | padding-inline-end: 0.5rem;
|
| 9822 | padding-inline-start: 0.5rem;
|
| 9823 | }
|
| 9824 |
|
| 9825 | .cds--list-box__menu-item--highlighted {
|
| 9826 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 9827 | outline-offset: -2px;
|
| 9828 | color: var(--cds-text-primary, #161616);
|
| 9829 | }
|
| 9830 | @media screen and (prefers-contrast) {
|
| 9831 | .cds--list-box__menu-item--highlighted {
|
| 9832 | outline-style: dotted;
|
| 9833 | }
|
| 9834 | }
|
| 9835 |
|
| 9836 | .cds--list-box__menu-item--highlighted .cds--list-box__menu-item__option,
|
| 9837 | .cds--list-box__menu-item--highlighted + .cds--list-box__menu-item .cds--list-box__menu-item__option {
|
| 9838 | border-block-start-color: transparent;
|
| 9839 | }
|
| 9840 |
|
| 9841 | .cds--list-box__menu-item--highlighted .cds--list-box__menu-item__option {
|
| 9842 | color: var(--cds-text-primary, #161616);
|
| 9843 | }
|
| 9844 |
|
| 9845 | .cds--list-box__menu-item--active {
|
| 9846 | background-color: var(--cds-layer-selected);
|
| 9847 | border-block-end-color: var(--cds-layer-selected);
|
| 9848 | color: var(--cds-text-primary, #161616);
|
| 9849 | }
|
| 9850 |
|
| 9851 | .cds--list-box--light .cds--list-box__menu-item--active {
|
| 9852 | background-color: var(--cds-layer-selected);
|
| 9853 | border-block-end-color: var(--cds-layer-selected);
|
| 9854 | }
|
| 9855 |
|
| 9856 | .cds--list-box__menu-item--active:hover {
|
| 9857 | background-color: var(--cds-layer-selected-hover);
|
| 9858 | border-block-end-color: var(--cds-layer-selected-hover);
|
| 9859 | }
|
| 9860 |
|
| 9861 | .cds--list-box__menu-item--active .cds--list-box__menu-item__option {
|
| 9862 | color: var(--cds-text-primary, #161616);
|
| 9863 | }
|
| 9864 |
|
| 9865 | .cds--list-box__menu-item--active + .cds--list-box__menu-item > .cds--list-box__menu-item__option {
|
| 9866 | border-block-start-color: transparent;
|
| 9867 | }
|
| 9868 |
|
| 9869 | .cds--list-box__menu-item__selected-icon {
|
| 9870 | position: absolute;
|
| 9871 | display: none;
|
| 9872 | fill: var(--cds-icon-primary, #161616);
|
| 9873 | inset-block-start: 50%;
|
| 9874 | inset-inline-end: 1rem;
|
| 9875 | transform: translateY(-50%);
|
| 9876 | }
|
| 9877 |
|
| 9878 | .cds--list-box--inline .cds--list-box__menu-item__selected-icon {
|
| 9879 | inset-inline-end: 0.5rem;
|
| 9880 | }
|
| 9881 |
|
| 9882 | .cds--list-box__menu-item--active .cds--list-box__menu-item__selected-icon {
|
| 9883 | display: block;
|
| 9884 | }
|
| 9885 |
|
| 9886 | .cds--list-box__menu-item .cds--checkbox-label {
|
| 9887 | inline-size: 100%;
|
| 9888 | }
|
| 9889 |
|
| 9890 | .cds--list-box__menu-item .cds--checkbox-label-text {
|
| 9891 | overflow: hidden;
|
| 9892 | text-overflow: ellipsis;
|
| 9893 | white-space: nowrap;
|
| 9894 | }
|
| 9895 |
|
| 9896 | .cds--list-box--up .cds--list-box__menu {
|
| 9897 | inset-block-end: 2.5rem;
|
| 9898 | }
|
| 9899 |
|
| 9900 | .cds--list-box--up.cds--dropdown--sm .cds--list-box__menu,
|
| 9901 | .cds--list-box--up.cds--list-box--sm .cds--list-box__menu,
|
| 9902 | .cds--list-box--up .cds--list-box--sm .cds--list-box__menu {
|
| 9903 | inset-block-end: 2rem;
|
| 9904 | }
|
| 9905 |
|
| 9906 | .cds--list-box--up.cds--dropdown--lg .cds--list-box__menu,
|
| 9907 | .cds--list-box--up.cds--list-box--lg .cds--list-box__menu,
|
| 9908 | .cds--list-box--up .cds--list-box--lg .cds--list-box__menu {
|
| 9909 | inset-block-end: 3rem;
|
| 9910 | }
|
| 9911 |
|
| 9912 | .cds--list-box input[role=combobox],
|
| 9913 | .cds--list-box input[type=text] {
|
| 9914 | background-color: inherit;
|
| 9915 | min-inline-size: 0;
|
| 9916 | text-overflow: ellipsis;
|
| 9917 | }
|
| 9918 |
|
| 9919 | .cds--list-box__wrapper--slug .cds--slug {
|
| 9920 | position: absolute;
|
| 9921 | inset-block-start: 50%;
|
| 9922 | inset-inline-end: calc(2.5rem + 9px);
|
| 9923 | margin-block-start: 0.03125rem;
|
| 9924 | transform: translateY(-50%);
|
| 9925 | }
|
| 9926 |
|
| 9927 | .cds--list-box__wrapper--slug .cds--slug::after,
|
| 9928 | .cds--list-box__wrapper--slug .cds--slug::before {
|
| 9929 | position: absolute;
|
| 9930 | background-color: var(--cds-border-subtle-01, #c6c6c6);
|
| 9931 | block-size: 1rem;
|
| 9932 | content: "";
|
| 9933 | inline-size: 0.0625rem;
|
| 9934 | }
|
| 9935 |
|
| 9936 | .cds--list-box__wrapper--slug .cds--slug::before {
|
| 9937 | display: none;
|
| 9938 | inset-inline-start: -0.5625rem;
|
| 9939 | }
|
| 9940 |
|
| 9941 | .cds--list-box__wrapper--slug .cds--slug::after {
|
| 9942 | display: block;
|
| 9943 | inset-inline-end: -0.5625rem;
|
| 9944 | }
|
| 9945 |
|
| 9946 | .cds--list-box__wrapper--slug .cds--slug--revert::after {
|
| 9947 | inset-block-start: 0.5rem;
|
| 9948 | inset-inline-end: -0.0625rem;
|
| 9949 | }
|
| 9950 |
|
| 9951 | .cds--list-box__wrapper--slug .cds--list-box:not(:has(.cds--slug--revert)) {
|
| 9952 | background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
|
| 9953 | border-block-end-color: var(--cds-ai-border-strong, #4589ff);
|
| 9954 | }
|
| 9955 |
|
| 9956 | .cds--list-box__wrapper--slug .cds--list-box input[role=combobox] {
|
| 9957 | border-block-end-color: transparent;
|
| 9958 | }
|
| 9959 |
|
| 9960 | .cds--list-box__wrapper--slug .cds--list-box__field,
|
| 9961 | .cds--list-box__wrapper--slug .cds--text-input--empty {
|
| 9962 | padding-inline-end: 4rem;
|
| 9963 | }
|
| 9964 |
|
| 9965 | .cds--list-box__wrapper--slug .cds--text-input:not(.cds--text-input--empty) {
|
| 9966 | padding-inline-end: 6rem;
|
| 9967 | }
|
| 9968 |
|
| 9969 | .cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--text-input--empty,
|
| 9970 | .cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--list-box__field,
|
| 9971 | .cds--list-box__wrapper--slug .cds--list-box--warning .cds--text-input--empty,
|
| 9972 | .cds--list-box__wrapper--slug .cds--list-box--warning .cds--list-box__field {
|
| 9973 | padding-inline-end: 6rem;
|
| 9974 | }
|
| 9975 |
|
| 9976 | .cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--text-input:not(.cds--text-input--empty),
|
| 9977 | .cds--list-box__wrapper--slug .cds--list-box--warning .cds--text-input:not(.cds--text-input--empty) {
|
| 9978 | padding-inline-end: 8.8125rem;
|
| 9979 | }
|
| 9980 |
|
| 9981 | .cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--text-input--empty + .cds--list-box__invalid-icon,
|
| 9982 | .cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--list-box__invalid-icon,
|
| 9983 | .cds--list-box__wrapper--slug .cds--list-box--warning .cds--list-box__invalid-icon.cds--list-box__invalid-icon--warning {
|
| 9984 | inset-inline-end: 5.1875rem;
|
| 9985 | }
|
| 9986 |
|
| 9987 | .cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--slug::before,
|
| 9988 | .cds--list-box__wrapper--slug .cds--list-box--warning .cds--slug::before {
|
| 9989 | display: block;
|
| 9990 | }
|
| 9991 |
|
| 9992 | .cds--list-box__wrapper--slug .cds--list-box__field:has(.cds--list-box__selection) ~ .cds--slug,
|
| 9993 | .cds--list-box__wrapper--slug .cds--list-box--warning .cds--list-box__field:has(.cds--list-box__selection) ~ .cds--slug {
|
| 9994 | inset-inline-end: calc(4rem + 18px);
|
| 9995 | }
|
| 9996 |
|
| 9997 | .cds--list-box__wrapper--slug .cds--list-box--invalid .cds--list-box__field:has(.cds--list-box__selection) .cds--list-box__invalid-icon,
|
| 9998 | .cds--list-box__wrapper--slug .cds--list-box--warning .cds--list-box__field:has(.cds--list-box__selection) .cds--list-box__invalid-icon {
|
| 9999 | inset-inline-end: 7.25rem;
|
| 10000 | }
|
| 10001 |
|
| 10002 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 10003 | .cds--list-box__field,
|
| 10004 | .cds--list-box__menu,
|
| 10005 | .cds--multi-select .cds--tag--filter {
|
| 10006 | outline: 1px solid transparent;
|
| 10007 | }
|
| 10008 | }
|
| 10009 |
|
| 10010 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 10011 | .cds--list-box__field:focus,
|
| 10012 | .cds--multi-select .cds--tag__close-icon:focus,
|
| 10013 | .cds--list-box__menu-item--highlighted .cds--list-box__menu-item__option {
|
| 10014 | color: Highlight;
|
| 10015 | outline: 1px solid Highlight;
|
| 10016 | }
|
| 10017 | }
|
| 10018 |
|
| 10019 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 10020 | .cds--list-box__menu-icon > svg,
|
| 10021 | .cds--list-box__selection > svg,
|
| 10022 | .cds--list-box__selection--multi > svg {
|
| 10023 | fill: ButtonText;
|
| 10024 | }
|
| 10025 | }
|
| 10026 |
|
| 10027 | .cds--list-box__field:has(.cds--list-box__menu-icon) .cds--list-box__selection::after {
|
| 10028 | position: absolute;
|
| 10029 | background-color: var(--cds-border-subtle-01, #c6c6c6);
|
| 10030 | block-size: 1rem;
|
| 10031 | content: "";
|
| 10032 | inline-size: 0.0625rem;
|
| 10033 | margin-inline-start: 2.0625rem;
|
| 10034 | }
|
| 10035 |
|
| 10036 | .cds--list-box--warning .cds--list-box__field:has(.cds--list-box__menu-icon) .cds--list-box__selection::before,
|
| 10037 | .cds--list-box--invalid[data-invalid] .cds--list-box__field:has(.cds--list-box__menu-icon) .cds--list-box__selection::before {
|
| 10038 | position: absolute;
|
| 10039 | background-color: var(--cds-border-subtle-01, #c6c6c6);
|
| 10040 | block-size: 1rem;
|
| 10041 | content: "";
|
| 10042 | inline-size: 0.0625rem;
|
| 10043 | margin-inline-end: 2.0625rem;
|
| 10044 | }
|
| 10045 |
|
| 10046 | .cds--list-box__wrapper--slug:has(.cds--multi-select) .cds--list-box__menu-icon {
|
| 10047 | inset-inline-end: 0.75rem;
|
| 10048 | }
|
| 10049 |
|
| 10050 | .cds--list-box__wrapper--slug:has(.cds--dropdown) .cds--list-box__menu-icon {
|
| 10051 | inset-inline-end: 0.75rem;
|
| 10052 | }
|
| 10053 |
|
| 10054 | .cds--combo-box:hover {
|
| 10055 | background-color: var(--cds-field);
|
| 10056 | }
|
| 10057 |
|
| 10058 | .cds--combo-box.cds--list-box--light:hover {
|
| 10059 | background-color: var(--cds-field-02, #ffffff);
|
| 10060 | }
|
| 10061 |
|
| 10062 | .cds--combo-box .cds--text-input::-ms-clear {
|
| 10063 | display: none;
|
| 10064 | }
|
| 10065 |
|
| 10066 | .cds--combo-box.cds--list-box--expanded .cds--text-input {
|
| 10067 | border-block-end-color: var(--cds-border-subtle);
|
| 10068 | }
|
| 10069 |
|
| 10070 | .cds--combo-box--input--focus.cds--text-input {
|
| 10071 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 10072 | outline-offset: -2px;
|
| 10073 | }
|
| 10074 | @media screen and (prefers-contrast) {
|
| 10075 | .cds--combo-box--input--focus.cds--text-input {
|
| 10076 | outline-style: dotted;
|
| 10077 | }
|
| 10078 | }
|
| 10079 |
|
| 10080 | .cds--combo-box.cds--list-box--expanded:has(input[aria-activedescendant]:not([aria-activedescendant=""])) .cds--combo-box--input--focus.cds--text-input {
|
| 10081 | outline-offset: -0.0625rem;
|
| 10082 | outline-width: 0.0625rem;
|
| 10083 | }
|
| 10084 |
|
| 10085 | .cds--combo-box .cds--list-box__field,
|
| 10086 | .cds--combo-box.cds--list-box[data-invalid] .cds--list-box__field,
|
| 10087 | .cds--combo-box.cds--list-box--warning .cds--list-box__field,
|
| 10088 | .cds--combo-box.cds--list-box--disabled.cds--list-box[data-invalid] .cds--list-box__field,
|
| 10089 | .cds--combo-box.cds--list-box--disabled.cds--list-box--warning .cds--list-box__field {
|
| 10090 | padding: 0;
|
| 10091 | }
|
| 10092 |
|
| 10093 | .cds--combo-box--readonly,
|
| 10094 | .cds--combo-box--readonly:hover {
|
| 10095 | background-color: transparent;
|
| 10096 | }
|
| 10097 |
|
| 10098 | .cds--combo-box--readonly .cds--text-input {
|
| 10099 | border-block-end-color: var(--cds-border-subtle);
|
| 10100 | }
|
| 10101 |
|
| 10102 | .cds--combo-box--readonly .cds--list-box__menu-icon,
|
| 10103 | .cds--combo-box--readonly .cds--list-box__selection {
|
| 10104 | cursor: default;
|
| 10105 | }
|
| 10106 |
|
| 10107 | .cds--combo-box--readonly .cds--list-box__menu-icon svg,
|
| 10108 | .cds--combo-box--readonly .cds--list-box__selection svg {
|
| 10109 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 10110 | }
|
| 10111 |
|
| 10112 | .cds--menu {
|
| 10113 | box-sizing: border-box;
|
| 10114 | padding: 0;
|
| 10115 | border: 0;
|
| 10116 | margin: 0;
|
| 10117 | font-family: inherit;
|
| 10118 | font-size: 100%;
|
| 10119 | vertical-align: baseline;
|
| 10120 | box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
|
| 10121 | position: fixed;
|
| 10122 | z-index: 9000;
|
| 10123 | padding: 0.25rem 0;
|
| 10124 | background-color: var(--cds-layer);
|
| 10125 | max-inline-size: 18rem;
|
| 10126 | min-inline-size: 10rem;
|
| 10127 | opacity: 0;
|
| 10128 | overflow-y: auto;
|
| 10129 | visibility: hidden;
|
| 10130 | }
|
| 10131 | .cds--menu *,
|
| 10132 | .cds--menu *::before,
|
| 10133 | .cds--menu *::after {
|
| 10134 | box-sizing: inherit;
|
| 10135 | }
|
| 10136 |
|
| 10137 | .cds--menu--with-icons {
|
| 10138 | min-inline-size: 12rem;
|
| 10139 | }
|
| 10140 |
|
| 10141 | .cds--menu--open {
|
| 10142 | visibility: visible;
|
| 10143 | }
|
| 10144 | .cds--menu--open:focus {
|
| 10145 | outline: 1px solid var(--cds-focus, #0f62fe);
|
| 10146 | }
|
| 10147 | @media screen and (prefers-contrast) {
|
| 10148 | .cds--menu--open:focus {
|
| 10149 | outline-style: dotted;
|
| 10150 | }
|
| 10151 | }
|
| 10152 |
|
| 10153 | .cds--menu:not(.cds--menu--open) .cds--menu--open {
|
| 10154 | visibility: hidden;
|
| 10155 | }
|
| 10156 |
|
| 10157 | .cds--menu--shown {
|
| 10158 | opacity: 1;
|
| 10159 | }
|
| 10160 |
|
| 10161 | .cds--menu-item {
|
| 10162 | font-size: var(--cds-body-short-01-font-size, 0.875rem);
|
| 10163 | font-weight: var(--cds-body-short-01-font-weight, 400);
|
| 10164 | line-height: var(--cds-body-short-01-line-height, 1.28572);
|
| 10165 | letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
|
| 10166 | display: grid;
|
| 10167 | align-items: center;
|
| 10168 | block-size: 2rem;
|
| 10169 | color: var(--cds-text-secondary, #525252);
|
| 10170 | -moz-column-gap: 0.5rem;
|
| 10171 | column-gap: 0.5rem;
|
| 10172 | cursor: pointer;
|
| 10173 | grid-template-columns: 1fr max-content;
|
| 10174 | padding-inline: 1rem;
|
| 10175 | transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 10176 | }
|
| 10177 | .cds--menu-item:focus {
|
| 10178 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 10179 | outline-offset: -2px;
|
| 10180 | }
|
| 10181 | @media screen and (prefers-contrast) {
|
| 10182 | .cds--menu-item:focus {
|
| 10183 | outline-style: dotted;
|
| 10184 | }
|
| 10185 | }
|
| 10186 |
|
| 10187 | .cds--menu-item:hover {
|
| 10188 | background-color: var(--cds-layer-hover);
|
| 10189 | color: var(--cds-text-primary, #161616);
|
| 10190 | }
|
| 10191 |
|
| 10192 | .cds--menu--xs .cds--menu-item {
|
| 10193 | block-size: 1.5rem;
|
| 10194 | }
|
| 10195 |
|
| 10196 | .cds--menu--sm .cds--menu-item {
|
| 10197 | block-size: 2rem;
|
| 10198 | }
|
| 10199 |
|
| 10200 | .cds--menu--md .cds--menu-item {
|
| 10201 | block-size: 2.5rem;
|
| 10202 | }
|
| 10203 |
|
| 10204 | .cds--menu--lg .cds--menu-item {
|
| 10205 | block-size: 3rem;
|
| 10206 | }
|
| 10207 |
|
| 10208 | .cds--menu-item__icon {
|
| 10209 | display: none;
|
| 10210 | }
|
| 10211 |
|
| 10212 | .cds--menu--with-icons .cds--menu-item__icon {
|
| 10213 | display: flex;
|
| 10214 | }
|
| 10215 |
|
| 10216 | .cds--menu-item__label {
|
| 10217 | overflow: hidden;
|
| 10218 | text-overflow: ellipsis;
|
| 10219 | white-space: nowrap;
|
| 10220 | }
|
| 10221 |
|
| 10222 | .cds--menu-item__shortcut {
|
| 10223 | display: flex;
|
| 10224 | }
|
| 10225 |
|
| 10226 | .cds--menu-item-group > ul,
|
| 10227 | .cds--menu-item-radio-group > ul {
|
| 10228 | box-sizing: border-box;
|
| 10229 | padding: 0;
|
| 10230 | border: 0;
|
| 10231 | margin: 0;
|
| 10232 | font-family: inherit;
|
| 10233 | font-size: 100%;
|
| 10234 | vertical-align: baseline;
|
| 10235 | }
|
| 10236 | .cds--menu-item-group > ul *,
|
| 10237 | .cds--menu-item-group > ul *::before,
|
| 10238 | .cds--menu-item-group > ul *::after,
|
| 10239 | .cds--menu-item-radio-group > ul *,
|
| 10240 | .cds--menu-item-radio-group > ul *::before,
|
| 10241 | .cds--menu-item-radio-group > ul *::after {
|
| 10242 | box-sizing: inherit;
|
| 10243 | }
|
| 10244 |
|
| 10245 | .cds--menu--with-icons > .cds--menu-item,
|
| 10246 | .cds--menu--with-icons > .cds--menu-item-group > ul > .cds--menu-item,
|
| 10247 | .cds--menu--with-icons > .cds--menu-item-radio-group > ul > .cds--menu-item {
|
| 10248 | grid-template-columns: 1rem 1fr max-content;
|
| 10249 | }
|
| 10250 |
|
| 10251 | .cds--menu-item--disabled {
|
| 10252 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 10253 | cursor: not-allowed;
|
| 10254 | }
|
| 10255 |
|
| 10256 | .cds--menu-item--disabled:hover,
|
| 10257 | .cds--menu-item--disabled.cds--menu-item--danger:hover {
|
| 10258 | background-color: var(--cds-layer);
|
| 10259 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 10260 | }
|
| 10261 |
|
| 10262 | .cds--menu-item--danger:focus,
|
| 10263 | .cds--menu-item--danger:hover {
|
| 10264 | background-color: var(--cds-button-danger-primary, #da1e28);
|
| 10265 | color: var(--cds-text-on-color, #ffffff);
|
| 10266 | }
|
| 10267 |
|
| 10268 | .cds--menu-item-divider {
|
| 10269 | display: block;
|
| 10270 | background-color: var(--cds-border-subtle);
|
| 10271 | block-size: 0.0625rem;
|
| 10272 | inline-size: 100%;
|
| 10273 | margin-block: 0.25rem;
|
| 10274 | }
|
| 10275 |
|
| 10276 | .cds--combo-button__container {
|
| 10277 | display: inline-flex;
|
| 10278 | -moz-column-gap: 0.0625rem;
|
| 10279 | column-gap: 0.0625rem;
|
| 10280 | }
|
| 10281 |
|
| 10282 | .cds--combo-button__container--sm .cds--combo-button__primary-action {
|
| 10283 | min-inline-size: 7.9375rem;
|
| 10284 | }
|
| 10285 |
|
| 10286 | .cds--combo-button__container--md .cds--combo-button__primary-action {
|
| 10287 | min-inline-size: 7.4375rem;
|
| 10288 | }
|
| 10289 |
|
| 10290 | .cds--combo-button__container--lg .cds--combo-button__primary-action {
|
| 10291 | min-inline-size: 6.9375rem;
|
| 10292 | }
|
| 10293 |
|
| 10294 | .cds--combo-button__primary-action .cds--btn {
|
| 10295 | inline-size: 100%;
|
| 10296 | max-inline-size: 14.9375rem;
|
| 10297 | min-inline-size: 6.9375rem;
|
| 10298 | }
|
| 10299 |
|
| 10300 | .cds--combo-button__primary-action button {
|
| 10301 | display: block;
|
| 10302 | overflow: hidden;
|
| 10303 | text-overflow: ellipsis;
|
| 10304 | white-space: nowrap;
|
| 10305 | }
|
| 10306 |
|
| 10307 | .cds--combo-button__trigger svg {
|
| 10308 | transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 10309 | }
|
| 10310 |
|
| 10311 | .cds--combo-button__container--open .cds--combo-button__trigger svg {
|
| 10312 | transform: rotate(180deg);
|
| 10313 | }
|
| 10314 |
|
| 10315 | .cds--combo-button__top {
|
| 10316 | transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem)));
|
| 10317 | }
|
| 10318 |
|
| 10319 | .cds--combo-button__top-start {
|
| 10320 | transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem)));
|
| 10321 | }
|
| 10322 |
|
| 10323 | .cds--combo-button__top-end {
|
| 10324 | transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem)));
|
| 10325 | }
|
| 10326 |
|
| 10327 | .cds--contained-list {
|
| 10328 | --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-lg)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-xl)));
|
| 10329 | --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
|
| 10330 | }
|
| 10331 |
|
| 10332 | .cds--contained-list .cds--tag {
|
| 10333 | --cds-layout-size-height-xs: 1.125rem;
|
| 10334 | --cds-layout-size-height-sm: 1.125rem;
|
| 10335 | --cds-layout-size-height-md: 1.5rem;
|
| 10336 | --cds-layout-size-height-lg: 1.5rem;
|
| 10337 | --cds-layout-size-height-xl: 1.5rem;
|
| 10338 | --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-xl)));
|
| 10339 | }
|
| 10340 | .cds--layout--size-xs .cds--contained-list .cds--tag {
|
| 10341 | --cds-layout-size-height: var(--cds-layout-size-height-xs);
|
| 10342 | }
|
| 10343 | .cds--layout--size-sm .cds--contained-list .cds--tag {
|
| 10344 | --cds-layout-size-height: var(--cds-layout-size-height-sm);
|
| 10345 | }
|
| 10346 | .cds--layout--size-md .cds--contained-list .cds--tag {
|
| 10347 | --cds-layout-size-height: var(--cds-layout-size-height-md);
|
| 10348 | }
|
| 10349 | .cds--layout--size-lg .cds--contained-list .cds--tag {
|
| 10350 | --cds-layout-size-height: var(--cds-layout-size-height-lg);
|
| 10351 | }
|
| 10352 | .cds--layout--size-xl .cds--contained-list .cds--tag {
|
| 10353 | --cds-layout-size-height: var(--cds-layout-size-height-xl);
|
| 10354 | }
|
| 10355 |
|
| 10356 | .cds--contained-list > ul {
|
| 10357 | padding: 0;
|
| 10358 | margin: 0;
|
| 10359 | }
|
| 10360 |
|
| 10361 | .cds--contained-list__header {
|
| 10362 | position: sticky;
|
| 10363 | z-index: 1;
|
| 10364 | display: flex;
|
| 10365 | align-items: center;
|
| 10366 | inset-block-start: 0;
|
| 10367 | padding-inline: var(--cds-layout-density-padding-inline-local);
|
| 10368 | }
|
| 10369 |
|
| 10370 | .cds--contained-list__label {
|
| 10371 | inline-size: 100%;
|
| 10372 | }
|
| 10373 |
|
| 10374 | .cds--contained-list .cds--search {
|
| 10375 | position: sticky;
|
| 10376 | z-index: 1;
|
| 10377 | inset-block-start: var(--cds-layout-size-height-local);
|
| 10378 | }
|
| 10379 | .cds--contained-list .cds--search.cds--search--expandable .cds--search-input {
|
| 10380 | background-color: var(--cds-field);
|
| 10381 | }
|
| 10382 |
|
| 10383 | .cds--contained-list .cds--search .cds--search-input {
|
| 10384 | background-color: var(--cds-background, #ffffff);
|
| 10385 | border-block-end: 1px solid var(--cds-border-subtle);
|
| 10386 | }
|
| 10387 |
|
| 10388 | .cds--contained-list .cds--search .cds--search-close::before {
|
| 10389 | display: none;
|
| 10390 | }
|
| 10391 |
|
| 10392 | .cds--contained-list .cds--search .cds--search-close {
|
| 10393 | border-inline-end: 2px solid transparent;
|
| 10394 | outline: none;
|
| 10395 | }
|
| 10396 | .cds--contained-list .cds--search .cds--search-close:focus {
|
| 10397 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 10398 | outline-offset: -2px;
|
| 10399 | }
|
| 10400 | @media screen and (prefers-contrast) {
|
| 10401 | .cds--contained-list .cds--search .cds--search-close:focus {
|
| 10402 | outline-style: dotted;
|
| 10403 | }
|
| 10404 | }
|
| 10405 |
|
| 10406 | .cds--contained-list .cds--search .cds--search-input ~ .cds--search-close:hover {
|
| 10407 | border-block-end: 1px solid transparent;
|
| 10408 | }
|
| 10409 |
|
| 10410 | .cds--contained-list .cds--search .cds--search-input:focus ~ .cds--search-close:hover {
|
| 10411 | border: 2px solid var(--cds-focus, #0f62fe);
|
| 10412 | border-inline-start: 0;
|
| 10413 | outline: none;
|
| 10414 | }
|
| 10415 |
|
| 10416 | .cds--contained-list--on-page + .cds--contained-list--on-page {
|
| 10417 | margin-block-start: 1rem;
|
| 10418 | }
|
| 10419 |
|
| 10420 | .cds--contained-list--on-page .cds--contained-list__header {
|
| 10421 | font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
|
| 10422 | font-weight: var(--cds-heading-compact-01-font-weight, 600);
|
| 10423 | line-height: var(--cds-heading-compact-01-line-height, 1.28572);
|
| 10424 | letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
|
| 10425 | background-color: var(--cds-background, #ffffff);
|
| 10426 | block-size: var(--cds-layout-size-height-local);
|
| 10427 | border-block-end: 1px solid var(--cds-border-subtle);
|
| 10428 | color: var(--cds-text-primary, #161616);
|
| 10429 | }
|
| 10430 |
|
| 10431 | .cds--layer-two .cds--contained-list--on-page .cds--contained-list__header {
|
| 10432 | background-color: var(--cds-layer-01, #f4f4f4);
|
| 10433 | }
|
| 10434 |
|
| 10435 | .cds--layer-three .cds--contained-list--on-page .cds--contained-list__header {
|
| 10436 | background-color: var(--cds-layer-02, #ffffff);
|
| 10437 | }
|
| 10438 |
|
| 10439 | .cds--contained-list--disclosed .cds--contained-list__header {
|
| 10440 | font-size: var(--cds-label-01-font-size, 0.75rem);
|
| 10441 | font-weight: var(--cds-label-01-font-weight, 400);
|
| 10442 | line-height: var(--cds-label-01-line-height, 1.33333);
|
| 10443 | letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
|
| 10444 | background-color: var(--cds-layer);
|
| 10445 | block-size: 2rem;
|
| 10446 | color: var(--cds-text-secondary, #525252);
|
| 10447 | }
|
| 10448 |
|
| 10449 | .cds--contained-list-item {
|
| 10450 | position: relative;
|
| 10451 | display: list-item;
|
| 10452 | list-style: none;
|
| 10453 | }
|
| 10454 |
|
| 10455 | .cds--contained-list-item:not(:first-of-type) {
|
| 10456 | margin-block-start: -1px;
|
| 10457 | }
|
| 10458 |
|
| 10459 | .cds--contained-list-item__content {
|
| 10460 | box-sizing: border-box;
|
| 10461 | }
|
| 10462 |
|
| 10463 | .cds--contained-list-item--clickable .cds--contained-list-item__content {
|
| 10464 | box-sizing: border-box;
|
| 10465 | padding: 0;
|
| 10466 | border: 0;
|
| 10467 | margin: 0;
|
| 10468 | font-family: inherit;
|
| 10469 | font-size: 100%;
|
| 10470 | vertical-align: baseline;
|
| 10471 | display: inline-block;
|
| 10472 | padding: 0;
|
| 10473 | border: 0;
|
| 10474 | -webkit-appearance: none;
|
| 10475 | -moz-appearance: none;
|
| 10476 | appearance: none;
|
| 10477 | background: none;
|
| 10478 | cursor: pointer;
|
| 10479 | text-align: start;
|
| 10480 | inline-size: 100%;
|
| 10481 | text-align: start;
|
| 10482 | transition: background-color 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 10483 | }
|
| 10484 | .cds--contained-list-item--clickable .cds--contained-list-item__content *,
|
| 10485 | .cds--contained-list-item--clickable .cds--contained-list-item__content *::before,
|
| 10486 | .cds--contained-list-item--clickable .cds--contained-list-item__content *::after {
|
| 10487 | box-sizing: inherit;
|
| 10488 | }
|
| 10489 | .cds--contained-list-item--clickable .cds--contained-list-item__content::-moz-focus-inner {
|
| 10490 | border: 0;
|
| 10491 | }
|
| 10492 |
|
| 10493 | .cds--contained-list-item__content,
|
| 10494 | .cds--contained-list-item--clickable .cds--contained-list-item__content {
|
| 10495 | --temp-1lh: (
|
| 10496 | var(--cds-body-01-line-height, 1.42857) * 1em
|
| 10497 | );
|
| 10498 | font-size: var(--cds-body-01-font-size, 0.875rem);
|
| 10499 | font-weight: var(--cds-body-01-font-weight, 400);
|
| 10500 | line-height: var(--cds-body-01-line-height, 1.42857);
|
| 10501 | letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
|
| 10502 | padding: calc((var(--cds-layout-size-height-local) - var(--temp-1lh)) / 2) var(--cds-layout-density-padding-inline-local);
|
| 10503 | color: var(--cds-text-primary, #161616);
|
| 10504 | min-block-size: var(--cds-layout-size-height-local);
|
| 10505 | }
|
| 10506 |
|
| 10507 | .cds--contained-list-item:not(:last-of-type)::before {
|
| 10508 | position: absolute;
|
| 10509 | background-color: var(--cds-border-subtle);
|
| 10510 | block-size: 1px;
|
| 10511 | content: "";
|
| 10512 | inset-block-end: 0;
|
| 10513 | inset-inline-end: 0;
|
| 10514 | inset-inline-start: 0;
|
| 10515 | }
|
| 10516 |
|
| 10517 | .cds--contained-list--inset-rulers .cds--contained-list-item:not(:last-of-type)::before {
|
| 10518 | inset-inline-end: var(--cds-layout-density-padding-inline-local);
|
| 10519 | inset-inline-start: var(--cds-layout-density-padding-inline-local);
|
| 10520 | }
|
| 10521 |
|
| 10522 | .cds--contained-list-item--clickable .cds--contained-list-item__content:not(:disabled):hover {
|
| 10523 | background-color: var(--cds-layer-hover);
|
| 10524 | }
|
| 10525 |
|
| 10526 | .cds--contained-list-item--clickable .cds--contained-list-item__content:not(:disabled):active {
|
| 10527 | background-color: var(--cds-layer-active);
|
| 10528 | }
|
| 10529 |
|
| 10530 | .cds--contained-list-item--clickable .cds--contained-list-item__content:disabled {
|
| 10531 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 10532 | cursor: not-allowed;
|
| 10533 | }
|
| 10534 |
|
| 10535 | .cds--contained-list-item--clickable .cds--contained-list-item__content:focus {
|
| 10536 | outline: none;
|
| 10537 | }
|
| 10538 |
|
| 10539 | .cds--contained-list-item--clickable .cds--contained-list-item__content:focus::after {
|
| 10540 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 10541 | outline-offset: -2px;
|
| 10542 | position: absolute;
|
| 10543 | content: "";
|
| 10544 | inset: 0;
|
| 10545 | }
|
| 10546 | @media screen and (prefers-contrast) {
|
| 10547 | .cds--contained-list-item--clickable .cds--contained-list-item__content:focus::after {
|
| 10548 | outline-style: dotted;
|
| 10549 | }
|
| 10550 | }
|
| 10551 |
|
| 10552 | .cds--contained-list-item--with-action .cds--contained-list-item__content {
|
| 10553 | padding-inline-end: 4rem;
|
| 10554 | }
|
| 10555 |
|
| 10556 | .cds--contained-list__action,
|
| 10557 | .cds--contained-list-item__action {
|
| 10558 | position: absolute;
|
| 10559 | display: flex;
|
| 10560 | justify-content: flex-end;
|
| 10561 | inset-block-start: 0;
|
| 10562 | inset-inline-end: 0;
|
| 10563 | inset-inline-start: 0;
|
| 10564 | pointer-events: none;
|
| 10565 | }
|
| 10566 |
|
| 10567 | .cds--contained-list__action > *,
|
| 10568 | .cds--contained-list-item__action > * {
|
| 10569 | pointer-events: all;
|
| 10570 | }
|
| 10571 |
|
| 10572 | .cds--contained-list-item--with-icon .cds--contained-list-item__content {
|
| 10573 | display: grid;
|
| 10574 | -moz-column-gap: 0.75rem;
|
| 10575 | column-gap: 0.75rem;
|
| 10576 | grid-template-columns: 1rem 1fr;
|
| 10577 | }
|
| 10578 |
|
| 10579 | .cds--contained-list-item__icon {
|
| 10580 | display: inline-flex;
|
| 10581 | padding-block-start: 0.125rem;
|
| 10582 | }
|
| 10583 |
|
| 10584 | .cds--content-switcher {
|
| 10585 | --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-lg)));
|
| 10586 | --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
|
| 10587 | display: flex;
|
| 10588 | justify-content: space-evenly;
|
| 10589 | block-size: var(--cds-layout-size-height-local);
|
| 10590 | inline-size: 100%;
|
| 10591 | }
|
| 10592 |
|
| 10593 | .cds--content-switcher-btn {
|
| 10594 | font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
|
| 10595 | outline: 2px solid transparent;
|
| 10596 | outline-offset: -2px;
|
| 10597 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 10598 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 10599 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 10600 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 10601 | position: relative;
|
| 10602 | display: inline-flex;
|
| 10603 | overflow: hidden;
|
| 10604 | border: none;
|
| 10605 | margin: 0;
|
| 10606 | background-color: transparent;
|
| 10607 | border-block-end: 0.0625rem solid var(--cds-border-inverse, #161616);
|
| 10608 | border-block-start: 0.0625rem solid var(--cds-border-inverse, #161616);
|
| 10609 | color: var(--cds-text-secondary, #525252);
|
| 10610 | text-align: start;
|
| 10611 | text-decoration: none;
|
| 10612 | transition: all 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 10613 | white-space: nowrap;
|
| 10614 | }
|
| 10615 | .cds--content-switcher-btn html {
|
| 10616 | font-size: 100%;
|
| 10617 | }
|
| 10618 | .cds--content-switcher-btn body {
|
| 10619 | font-weight: 400;
|
| 10620 | font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
|
| 10621 | -moz-osx-font-smoothing: grayscale;
|
| 10622 | -webkit-font-smoothing: antialiased;
|
| 10623 | text-rendering: optimizeLegibility;
|
| 10624 | }
|
| 10625 | .cds--content-switcher-btn code {
|
| 10626 | font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
|
| 10627 | }
|
| 10628 | .cds--content-switcher-btn strong {
|
| 10629 | font-weight: 600;
|
| 10630 | }
|
| 10631 | .cds--content-switcher-btn::after {
|
| 10632 | position: absolute;
|
| 10633 | display: block;
|
| 10634 | background-color: var(--cds-layer-selected-inverse, #161616);
|
| 10635 | block-size: 100%;
|
| 10636 | content: "";
|
| 10637 | inline-size: 100%;
|
| 10638 | inset-block-start: 0;
|
| 10639 | inset-inline-start: 0;
|
| 10640 | transform: scaleY(0);
|
| 10641 | transform-origin: bottom;
|
| 10642 | transition: all 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 10643 | }
|
| 10644 | @media (prefers-reduced-motion: reduce) {
|
| 10645 | .cds--content-switcher-btn::after {
|
| 10646 | transition: none;
|
| 10647 | }
|
| 10648 | }
|
| 10649 | .cds--content-switcher-btn:disabled::after {
|
| 10650 | display: none;
|
| 10651 | }
|
| 10652 | .cds--content-switcher-btn:focus {
|
| 10653 | z-index: 3;
|
| 10654 | border-color: var(--cds-focus, #0f62fe);
|
| 10655 | box-shadow: inset 0 0 0 2px var(--cds-focus, #0f62fe), inset 0 0 0 3px var(--cds-focus-inset, #ffffff);
|
| 10656 | }
|
| 10657 | .cds--content-switcher-btn:focus::after {
|
| 10658 | clip-path: inset(3px 3px 3px 3px);
|
| 10659 | }
|
| 10660 | .cds--content-switcher-btn:hover {
|
| 10661 | color: var(--cds-text-primary, #161616);
|
| 10662 | cursor: pointer;
|
| 10663 | }
|
| 10664 | .cds--content-switcher-btn:hover, .cds--content-switcher-btn:active {
|
| 10665 | z-index: 3;
|
| 10666 | background-color: var(--cds-layer-hover);
|
| 10667 | color: var(--cds-text-primary, #161616);
|
| 10668 | }
|
| 10669 | .cds--content-switcher-btn:disabled {
|
| 10670 | border-color: var(--cds-border-disabled, #c6c6c6);
|
| 10671 | background-color: transparent;
|
| 10672 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 10673 | }
|
| 10674 | .cds--content-switcher-btn:disabled:hover {
|
| 10675 | cursor: not-allowed;
|
| 10676 | }
|
| 10677 | .cds--content-switcher-btn:disabled:first-child, .cds--content-switcher-btn:disabled:last-child {
|
| 10678 | border-color: var(--cds-border-disabled, #c6c6c6);
|
| 10679 | }
|
| 10680 |
|
| 10681 | .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn {
|
| 10682 | align-items: center;
|
| 10683 | padding: 0.5rem var(--cds-layout-density-padding-inline-local);
|
| 10684 | inline-size: 100%;
|
| 10685 | }
|
| 10686 |
|
| 10687 | .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-child {
|
| 10688 | border-end-start-radius: 0.25rem;
|
| 10689 | border-inline-start: 0.0625rem solid var(--cds-border-inverse, #161616);
|
| 10690 | border-start-start-radius: 0.25rem;
|
| 10691 | }
|
| 10692 | .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-child:disabled {
|
| 10693 | border-color: var(--cds-border-disabled, #c6c6c6);
|
| 10694 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 10695 | }
|
| 10696 |
|
| 10697 | .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:last-child {
|
| 10698 | border-end-end-radius: 0.25rem;
|
| 10699 | border-inline-end: 0.0625rem solid var(--cds-border-inverse, #161616);
|
| 10700 | border-start-end-radius: 0.25rem;
|
| 10701 | }
|
| 10702 | .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:last-child:disabled {
|
| 10703 | border-color: var(--cds-border-disabled, #c6c6c6);
|
| 10704 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 10705 | }
|
| 10706 |
|
| 10707 | .cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected,
|
| 10708 | .cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected:first-child,
|
| 10709 | .cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected:last-child {
|
| 10710 | border: 0;
|
| 10711 | }
|
| 10712 |
|
| 10713 | .cds--content-switcher-btn::before {
|
| 10714 | position: absolute;
|
| 10715 | z-index: 2;
|
| 10716 | display: block;
|
| 10717 | background-color: var(--cds-border-subtle);
|
| 10718 | block-size: 1rem;
|
| 10719 | content: "";
|
| 10720 | inline-size: 0.0625rem;
|
| 10721 | inset-inline-start: 0;
|
| 10722 | }
|
| 10723 |
|
| 10724 | .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-of-type::before {
|
| 10725 | display: none;
|
| 10726 | }
|
| 10727 |
|
| 10728 | .cds--content-switcher-btn:focus::before,
|
| 10729 | .cds--content-switcher-btn:focus + .cds--content-switcher-btn::before,
|
| 10730 | .cds--content-switcher-btn:hover::before,
|
| 10731 | .cds--content-switcher-btn:hover + .cds--content-switcher-btn::before,
|
| 10732 | .cds--content-switcher--selected::before,
|
| 10733 | .cds--content-switcher--selected + .cds--content-switcher-btn::before {
|
| 10734 | background-color: transparent;
|
| 10735 | }
|
| 10736 |
|
| 10737 | .cds--content-switcher-btn:disabled::before,
|
| 10738 | .cds--content-switcher-btn:disabled:hover + .cds--content-switcher-btn:disabled::before {
|
| 10739 | background-color: var(--cds-border-disabled, #c6c6c6);
|
| 10740 | }
|
| 10741 |
|
| 10742 | .cds--content-switcher-btn.cds--content-switcher--selected:disabled + .cds--content-switcher-btn::before,
|
| 10743 | .cds--content-switcher-btn.cds--content-switcher--selected:disabled:hover + .cds--content-switcher-btn::before {
|
| 10744 | background-color: transparent;
|
| 10745 | }
|
| 10746 |
|
| 10747 | .cds--content-switcher__icon {
|
| 10748 | fill: var(--cds-icon-secondary, #525252);
|
| 10749 | transition: fill 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 10750 | }
|
| 10751 |
|
| 10752 | .cds--content-switcher__icon + span {
|
| 10753 | margin-inline-start: 0.5rem;
|
| 10754 | }
|
| 10755 |
|
| 10756 | .cds--content-switcher__label {
|
| 10757 | z-index: 1;
|
| 10758 | overflow: hidden;
|
| 10759 | max-inline-size: 100%;
|
| 10760 | text-overflow: ellipsis;
|
| 10761 | white-space: nowrap;
|
| 10762 | }
|
| 10763 |
|
| 10764 | .cds--content-switcher-btn:hover .cds--content-switcher__icon,
|
| 10765 | .cds--content-switcher-btn:focus .cds--content-switcher__icon {
|
| 10766 | fill: var(--cds-icon-primary, #161616);
|
| 10767 | }
|
| 10768 |
|
| 10769 | .cds--content-switcher-btn.cds--content-switcher--selected {
|
| 10770 | z-index: 3;
|
| 10771 | background-color: var(--cds-layer-selected-inverse, #161616);
|
| 10772 | color: var(--cds-text-inverse, #ffffff);
|
| 10773 | }
|
| 10774 | .cds--content-switcher-btn.cds--content-switcher--selected:disabled {
|
| 10775 | background-color: var(--cds-layer-selected-disabled, #8d8d8d);
|
| 10776 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 10777 | }
|
| 10778 | .cds--content-switcher-btn.cds--content-switcher--selected::after {
|
| 10779 | transform: scaleY(1);
|
| 10780 | }
|
| 10781 |
|
| 10782 | .cds--content-switcher-btn.cds--content-switcher--selected .cds--content-switcher__icon {
|
| 10783 | fill: var(--cds-icon-inverse, #ffffff);
|
| 10784 | }
|
| 10785 |
|
| 10786 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 10787 | .cds--content-switcher-btn:focus {
|
| 10788 | color: Highlight;
|
| 10789 | outline: 1px solid Highlight;
|
| 10790 | }
|
| 10791 | }
|
| 10792 |
|
| 10793 | .cds--content-switcher--icon-only {
|
| 10794 | justify-content: flex-start;
|
| 10795 | }
|
| 10796 |
|
| 10797 | .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher-btn {
|
| 10798 | border-end-start-radius: 0.25rem;
|
| 10799 | border-inline-start: 0.0625rem solid var(--cds-border-inverse, #161616);
|
| 10800 | border-start-start-radius: 0.25rem;
|
| 10801 | }
|
| 10802 |
|
| 10803 | .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher--selected[disabled],
|
| 10804 | .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher--selected[disabled] {
|
| 10805 | border-color: var(--cds-layer-selected-disabled, #8d8d8d);
|
| 10806 | }
|
| 10807 |
|
| 10808 | .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher-btn {
|
| 10809 | border-end-end-radius: 0.25rem;
|
| 10810 | border-inline-end: 0.0625rem solid var(--cds-border-inverse, #161616);
|
| 10811 | border-start-end-radius: 0.25rem;
|
| 10812 | }
|
| 10813 |
|
| 10814 | .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher-btn.cds--content-switcher--selected,
|
| 10815 | .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher-btn.cds--content-switcher--selected {
|
| 10816 | border-color: var(--cds-background, #ffffff);
|
| 10817 | }
|
| 10818 |
|
| 10819 | .cds--content-switcher--lg .cds--content-switcher-btn {
|
| 10820 | padding-inline-end: 0.875rem;
|
| 10821 | padding-inline-start: 0.875rem;
|
| 10822 | }
|
| 10823 |
|
| 10824 | .cds--content-switcher--lg .cds--content-switcher-btn svg {
|
| 10825 | block-size: 20px;
|
| 10826 | inline-size: 20px;
|
| 10827 | }
|
| 10828 |
|
| 10829 | .cds--content-switcher--icon-only .cds--content-switcher-btn svg {
|
| 10830 | fill: var(--cds-icon-primary, #161616);
|
| 10831 | }
|
| 10832 |
|
| 10833 | .cds--content-switcher--icon-only .cds--content-switcher-btn.cds--content-switcher--selected svg {
|
| 10834 | z-index: 1;
|
| 10835 | fill: var(--cds-icon-inverse, #ffffff);
|
| 10836 | }
|
| 10837 |
|
| 10838 | .cds--content-switcher--icon-only.cds--content-switcher--sm .cds--btn--sm {
|
| 10839 | block-size: 2rem;
|
| 10840 | }
|
| 10841 |
|
| 10842 | .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-of-type .cds--content-switcher-btn::before {
|
| 10843 | display: none;
|
| 10844 | }
|
| 10845 |
|
| 10846 | .cds--content-switcher-btn:focus::before,
|
| 10847 | .cds--content-switcher-popover__wrapper:focus-within + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before,
|
| 10848 | .cds--content-switcher-btn:hover::before,
|
| 10849 | .cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--disabled):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before,
|
| 10850 | .cds--content-switcher--selected::before,
|
| 10851 | .cds--content-switcher-popover--selected + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before {
|
| 10852 | background-color: transparent;
|
| 10853 | }
|
| 10854 |
|
| 10855 | .cds--content-switcher--icon-only .cds--content-switcher-btn[disabled] {
|
| 10856 | border-color: var(--cds-border-inverse, #161616);
|
| 10857 | }
|
| 10858 |
|
| 10859 | .cds--content-switcher--icon-only .cds--content-switcher-btn[disabled] svg {
|
| 10860 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 10861 | }
|
| 10862 |
|
| 10863 | .cds--content-switcher--icon-only .cds--content-switcher-btn[disabled]:not(.cds--content-switcher--selected):hover,
|
| 10864 | .cds--content-switcher--icon-only .cds--content-switcher-popover--selected + .cds--content-switcher-popover--disabled .cds--content-switcher-btn[disabled]:hover::before {
|
| 10865 | background-color: transparent;
|
| 10866 | }
|
| 10867 |
|
| 10868 | .cds--content-switcher--icon-only .cds--content-switcher-btn[disabled]:hover::before {
|
| 10869 | background-color: var(--cds-border-subtle);
|
| 10870 | }
|
| 10871 |
|
| 10872 | .cds--radio-button-group {
|
| 10873 | box-sizing: border-box;
|
| 10874 | padding: 0;
|
| 10875 | border: 0;
|
| 10876 | margin: 0;
|
| 10877 | font-family: inherit;
|
| 10878 | font-size: 100%;
|
| 10879 | vertical-align: baseline;
|
| 10880 | position: relative;
|
| 10881 | display: flex;
|
| 10882 | align-items: center;
|
| 10883 | }
|
| 10884 | .cds--radio-button-group *,
|
| 10885 | .cds--radio-button-group *::before,
|
| 10886 | .cds--radio-button-group *::after {
|
| 10887 | box-sizing: inherit;
|
| 10888 | }
|
| 10889 |
|
| 10890 | .cds--label + .cds--form-item .cds--radio-button-group {
|
| 10891 | margin-block-start: 0;
|
| 10892 | }
|
| 10893 |
|
| 10894 | .cds--radio-button-group--vertical {
|
| 10895 | flex-direction: column;
|
| 10896 | align-items: flex-start;
|
| 10897 | }
|
| 10898 | .cds--radio-button-group--vertical.cds--radio-button-group--label-left {
|
| 10899 | align-items: flex-end;
|
| 10900 | }
|
| 10901 | .cds--radio-button-group--vertical .cds--radio-button__label {
|
| 10902 | margin-inline-end: 0;
|
| 10903 | }
|
| 10904 | .cds--radio-button-group--vertical .cds--radio-button__label:not(:last-of-type) {
|
| 10905 | margin-block-end: 0.5rem;
|
| 10906 | }
|
| 10907 |
|
| 10908 | .cds--radio-button {
|
| 10909 | position: absolute;
|
| 10910 | overflow: hidden;
|
| 10911 | padding: 0;
|
| 10912 | border: 0;
|
| 10913 | margin: -1px;
|
| 10914 | block-size: 1px;
|
| 10915 | clip: rect(0, 0, 0, 0);
|
| 10916 | inline-size: 1px;
|
| 10917 | visibility: inherit;
|
| 10918 | white-space: nowrap;
|
| 10919 | margin-block-start: 0.9rem;
|
| 10920 | margin-inline-start: 0.63rem;
|
| 10921 | visibility: inherit;
|
| 10922 | }
|
| 10923 |
|
| 10924 | .cds--radio-button__label {
|
| 10925 | display: flex;
|
| 10926 | align-items: center;
|
| 10927 | cursor: pointer;
|
| 10928 | margin-inline-end: 1rem;
|
| 10929 | }
|
| 10930 |
|
| 10931 | .cds--radio-button__label-text {
|
| 10932 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 10933 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 10934 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 10935 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 10936 | flex: 1 1;
|
| 10937 | }
|
| 10938 |
|
| 10939 | .cds--radio-button__appearance {
|
| 10940 | box-sizing: border-box;
|
| 10941 | padding: 0;
|
| 10942 | border: 0;
|
| 10943 | margin: 0;
|
| 10944 | font-family: inherit;
|
| 10945 | font-size: 100%;
|
| 10946 | vertical-align: baseline;
|
| 10947 | flex-shrink: 0;
|
| 10948 | border: 1px solid var(--cds-icon-primary, #161616);
|
| 10949 | border-radius: 50%;
|
| 10950 | background-color: transparent;
|
| 10951 | block-size: 1.125rem;
|
| 10952 | inline-size: 1.125rem;
|
| 10953 | margin-block: 0.0625rem 0.125rem;
|
| 10954 | margin-inline: 0.125rem 0.625rem;
|
| 10955 | }
|
| 10956 | .cds--radio-button__appearance *,
|
| 10957 | .cds--radio-button__appearance *::before,
|
| 10958 | .cds--radio-button__appearance *::after {
|
| 10959 | box-sizing: inherit;
|
| 10960 | }
|
| 10961 |
|
| 10962 | .cds--radio-button-group--vertical .cds--radio-button__appearance {
|
| 10963 | margin-block: 0;
|
| 10964 | }
|
| 10965 |
|
| 10966 | .cds--radio-button:checked + .cds--radio-button__label .cds--radio-button__appearance {
|
| 10967 | display: flex;
|
| 10968 | align-items: center;
|
| 10969 | justify-content: center;
|
| 10970 | border-color: var(--cds-icon-primary, #161616);
|
| 10971 | }
|
| 10972 | .cds--radio-button:checked + .cds--radio-button__label .cds--radio-button__appearance::before {
|
| 10973 | position: relative;
|
| 10974 | display: inline-block;
|
| 10975 | border-radius: 50%;
|
| 10976 | background-color: var(--cds-icon-primary, #161616);
|
| 10977 | block-size: 100%;
|
| 10978 | content: "";
|
| 10979 | inline-size: 100%;
|
| 10980 | transform: scale(0.5);
|
| 10981 | }
|
| 10982 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 10983 | .cds--radio-button:checked + .cds--radio-button__label .cds--radio-button__appearance::before {
|
| 10984 | fill: ButtonText;
|
| 10985 | background-color: ButtonText;
|
| 10986 | }
|
| 10987 | }
|
| 10988 | @media print {
|
| 10989 | .cds--radio-button:checked + .cds--radio-button__label .cds--radio-button__appearance::before {
|
| 10990 | -webkit-print-color-adjust: exact;
|
| 10991 | print-color-adjust: exact;
|
| 10992 | }
|
| 10993 | }
|
| 10994 |
|
| 10995 | .cds--radio-button:disabled + .cds--radio-button__label {
|
| 10996 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 10997 | cursor: not-allowed;
|
| 10998 | }
|
| 10999 |
|
| 11000 | .cds--radio-button:disabled + .cds--radio-button__label .cds--radio-button__appearance,
|
| 11001 | .cds--radio-button:disabled:checked + .cds--radio-button__label .cds--radio-button__appearance {
|
| 11002 | border-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 11003 | }
|
| 11004 | .cds--radio-button:disabled + .cds--radio-button__label .cds--radio-button__appearance::before,
|
| 11005 | .cds--radio-button:disabled:checked + .cds--radio-button__label .cds--radio-button__appearance::before {
|
| 11006 | background-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 11007 | }
|
| 11008 |
|
| 11009 | .cds--radio-button-group--readonly .cds--radio-button + .cds--radio-button__label .cds--radio-button__appearance {
|
| 11010 | border-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 11011 | }
|
| 11012 |
|
| 11013 | .cds--radio-button-group--readonly .cds--radio-button__label {
|
| 11014 | cursor: default;
|
| 11015 | }
|
| 11016 |
|
| 11017 | .cds--radio-button-group--readonly .cds--radio-button__label-text {
|
| 11018 | cursor: text;
|
| 11019 | -webkit-user-select: text;
|
| 11020 | -moz-user-select: text;
|
| 11021 | user-select: text;
|
| 11022 | }
|
| 11023 |
|
| 11024 | .cds--radio-button-group--invalid .cds--radio-button + .cds--radio-button__label .cds--radio-button__appearance {
|
| 11025 | border-color: var(--cds-support-error, #da1e28);
|
| 11026 | }
|
| 11027 |
|
| 11028 | .cds--radio-button__validation-msg {
|
| 11029 | display: none;
|
| 11030 | align-items: flex-end;
|
| 11031 | margin-block-start: 0.375rem;
|
| 11032 | }
|
| 11033 |
|
| 11034 | .cds--radio-button__invalid-icon {
|
| 11035 | fill: var(--cds-support-error, #da1e28);
|
| 11036 | margin-inline: 0.1875rem 0.0625rem;
|
| 11037 | }
|
| 11038 |
|
| 11039 | .cds--radio-button__invalid-icon--warning {
|
| 11040 | fill: var(--cds-support-warning, #f1c21b);
|
| 11041 | }
|
| 11042 |
|
| 11043 | .cds--radio-button__invalid-icon--warning path:first-of-type {
|
| 11044 | fill: #000000;
|
| 11045 | }
|
| 11046 |
|
| 11047 | .cds--radio-button-group--invalid + .cds--radio-button__validation-msg,
|
| 11048 | .cds--radio-button-group--warning + .cds--radio-button__validation-msg {
|
| 11049 | display: flex;
|
| 11050 | }
|
| 11051 |
|
| 11052 | .cds--radio-button-group--invalid + .cds--radio-button__validation-msg .cds--form-requirement,
|
| 11053 | .cds--radio-button-group--warning + .cds--radio-button__validation-msg .cds--form-requirement {
|
| 11054 | display: block;
|
| 11055 | overflow: visible;
|
| 11056 | margin-block-start: 0;
|
| 11057 | margin-inline-start: 0.5rem;
|
| 11058 | max-block-size: 100%;
|
| 11059 | }
|
| 11060 |
|
| 11061 | .cds--radio-button-group--invalid + .cds--radio-button__validation-msg .cds--form-requirement {
|
| 11062 | color: var(--cds-text-error, #da1e28);
|
| 11063 | }
|
| 11064 |
|
| 11065 | .cds--radio-button-group ~ .cds--form__helper-text {
|
| 11066 | margin-block-start: 0.375rem;
|
| 11067 | }
|
| 11068 |
|
| 11069 | .cds--radio-button:focus + .cds--radio-button__label .cds--radio-button__appearance {
|
| 11070 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 11071 | outline-offset: 1.5px;
|
| 11072 | }
|
| 11073 |
|
| 11074 | .cds--radio-button__label.cds--skeleton {
|
| 11075 | position: relative;
|
| 11076 | padding: 0;
|
| 11077 | border: none;
|
| 11078 | background: var(--cds-skeleton-background, #e8e8e8);
|
| 11079 | box-shadow: none;
|
| 11080 | pointer-events: none;
|
| 11081 | block-size: 1.125rem;
|
| 11082 | inline-size: 6.25rem;
|
| 11083 | }
|
| 11084 | .cds--radio-button__label.cds--skeleton:hover, .cds--radio-button__label.cds--skeleton:focus, .cds--radio-button__label.cds--skeleton:active {
|
| 11085 | border: none;
|
| 11086 | cursor: default;
|
| 11087 | outline: none;
|
| 11088 | }
|
| 11089 | .cds--radio-button__label.cds--skeleton::before {
|
| 11090 | position: absolute;
|
| 11091 | animation: 3000ms ease-in-out cds--skeleton infinite;
|
| 11092 | background: var(--cds-skeleton-element, #c6c6c6);
|
| 11093 | block-size: 100%;
|
| 11094 | content: "";
|
| 11095 | inline-size: 100%;
|
| 11096 | will-change: transform-origin, transform, opacity;
|
| 11097 | }
|
| 11098 | @media (prefers-reduced-motion: reduce) {
|
| 11099 | .cds--radio-button__label.cds--skeleton::before {
|
| 11100 | animation: none;
|
| 11101 | }
|
| 11102 | }
|
| 11103 |
|
| 11104 | .cds--radio-button__label.cds--skeleton .cds--radio-button__appearance {
|
| 11105 | display: none;
|
| 11106 | }
|
| 11107 |
|
| 11108 | .cds--radio-button-wrapper .cds--radio-button__label {
|
| 11109 | display: flex;
|
| 11110 | align-items: flex-start;
|
| 11111 | justify-content: center;
|
| 11112 | margin: 0;
|
| 11113 | }
|
| 11114 |
|
| 11115 | .cds--radio-button-wrapper:not(:last-of-type) {
|
| 11116 | margin-inline-end: 1rem;
|
| 11117 | }
|
| 11118 |
|
| 11119 | .cds--radio-button-group--vertical .cds--radio-button-wrapper {
|
| 11120 | margin-block-end: 0.375rem;
|
| 11121 | margin-inline-end: 0;
|
| 11122 | }
|
| 11123 |
|
| 11124 | .cds--radio-button-group--vertical .cds--radio-button-wrapper .cds--radio-button__label {
|
| 11125 | padding-block-start: 0.125rem;
|
| 11126 | }
|
| 11127 |
|
| 11128 | .cds--radio-button-group--label-right .cds--radio-button__label,
|
| 11129 | .cds--radio-button-wrapper.cds--radio-button-wrapper--label-right .cds--radio-button__label {
|
| 11130 | flex-direction: row;
|
| 11131 | }
|
| 11132 |
|
| 11133 | .cds--radio-button-group--label-left .cds--radio-button__label,
|
| 11134 | .cds--radio-button-wrapper.cds--radio-button-wrapper--label-left .cds--radio-button__label {
|
| 11135 | flex-direction: row-reverse;
|
| 11136 | }
|
| 11137 |
|
| 11138 | .cds--radio-button-group--label-left .cds--radio-button__appearance,
|
| 11139 | .cds--radio-button-wrapper.cds--radio-button-wrapper--label-left .cds--radio-button__appearance {
|
| 11140 | margin-inline-end: 0;
|
| 11141 | margin-inline-start: 0.5rem;
|
| 11142 | }
|
| 11143 |
|
| 11144 | .cds--radio-button-group--slug legend.cds--label,
|
| 11145 | .cds--radio-button-wrapper--slug .cds--radio-button__label-text {
|
| 11146 | display: flex;
|
| 11147 | }
|
| 11148 |
|
| 11149 | .cds--radio-button-group--slug legend.cds--label .cds--slug,
|
| 11150 | .cds--radio-button-wrapper--slug .cds--radio-button__label-text .cds--slug {
|
| 11151 | margin-inline-start: 0.5rem;
|
| 11152 | }
|
| 11153 |
|
| 11154 | .cds--radio-button-wrapper--slug .cds--radio-button__label-text .cds--slug__button--inline {
|
| 11155 | line-height: inherit;
|
| 11156 | margin-block-start: -0.0625rem;
|
| 11157 | }
|
| 11158 |
|
| 11159 | .cds--data-table-container {
|
| 11160 | position: relative;
|
| 11161 | padding-block-start: 0.125rem;
|
| 11162 | }
|
| 11163 |
|
| 11164 | .cds--data-table-content {
|
| 11165 | display: block;
|
| 11166 | overflow-x: auto;
|
| 11167 | }
|
| 11168 |
|
| 11169 | .cds--data-table-content:focus {
|
| 11170 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 11171 | outline-offset: -2px;
|
| 11172 | }
|
| 11173 | @media screen and (prefers-contrast) {
|
| 11174 | .cds--data-table-content:focus {
|
| 11175 | outline-style: dotted;
|
| 11176 | }
|
| 11177 | }
|
| 11178 |
|
| 11179 | .cds--data-table-header {
|
| 11180 | background-color: var(--cds-layer);
|
| 11181 | padding-block-end: 1.5rem;
|
| 11182 | padding-block-start: 1rem;
|
| 11183 | padding-inline: 1rem;
|
| 11184 | }
|
| 11185 |
|
| 11186 | .cds--data-table-header__title {
|
| 11187 | font-size: var(--cds-heading-03-font-size, 1.25rem);
|
| 11188 | font-weight: var(--cds-heading-03-font-weight, 400);
|
| 11189 | line-height: var(--cds-heading-03-line-height, 1.4);
|
| 11190 | letter-spacing: var(--cds-heading-03-letter-spacing, 0);
|
| 11191 | color: var(--cds-text-primary, #161616);
|
| 11192 | }
|
| 11193 |
|
| 11194 | .cds--data-table-header__description {
|
| 11195 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 11196 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 11197 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 11198 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 11199 | color: var(--cds-text-secondary, #525252);
|
| 11200 | }
|
| 11201 | @media (min-width: 42rem) {
|
| 11202 | .cds--data-table-header__description {
|
| 11203 | max-inline-size: 50ch;
|
| 11204 | }
|
| 11205 | }
|
| 11206 | @media (min-width: 66rem) {
|
| 11207 | .cds--data-table-header__description {
|
| 11208 | max-inline-size: 80ch;
|
| 11209 | }
|
| 11210 | }
|
| 11211 |
|
| 11212 | .cds--data-table {
|
| 11213 | border-collapse: collapse;
|
| 11214 | border-spacing: 0;
|
| 11215 | inline-size: 100%;
|
| 11216 | }
|
| 11217 |
|
| 11218 | .cds--data-table thead {
|
| 11219 | font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
|
| 11220 | font-weight: var(--cds-heading-compact-01-font-weight, 600);
|
| 11221 | line-height: var(--cds-heading-compact-01-line-height, 1.28572);
|
| 11222 | letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
|
| 11223 | background-color: var(--cds-layer-accent);
|
| 11224 | }
|
| 11225 |
|
| 11226 | .cds--data-table tbody {
|
| 11227 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 11228 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 11229 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 11230 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 11231 | background-color: var(--cds-layer);
|
| 11232 | inline-size: 100%;
|
| 11233 | }
|
| 11234 |
|
| 11235 | .cds--data-table tr {
|
| 11236 | border: none;
|
| 11237 | block-size: 3rem;
|
| 11238 | inline-size: 100%;
|
| 11239 | }
|
| 11240 |
|
| 11241 | .cds--data-table tbody tr,
|
| 11242 | .cds--data-table tbody tr td,
|
| 11243 | .cds--data-table tbody tr th {
|
| 11244 | transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
|
| 11245 | }
|
| 11246 |
|
| 11247 | .cds--data-table tbody tr:not([data-child-row]):hover,
|
| 11248 | .cds--data-table tbody tr[data-child-row]:hover > td {
|
| 11249 | background-color: var(--cds-layer-hover);
|
| 11250 | }
|
| 11251 |
|
| 11252 | .cds--data-table tbody tr:hover td,
|
| 11253 | .cds--data-table tbody tr:hover th {
|
| 11254 | border-block-end: 1px solid var(--cds-layer-hover);
|
| 11255 | border-block-start: 1px solid var(--cds-layer-hover);
|
| 11256 | color: var(--cds-text-primary, #161616);
|
| 11257 | }
|
| 11258 |
|
| 11259 | .cds--data-table tr + :not(.cds--popover-container):hover .cds--link {
|
| 11260 | color: var(--cds-link-secondary, #0043ce);
|
| 11261 | }
|
| 11262 |
|
| 11263 | .cds--data-table tr + :not(.cds--popover-container):hover .cds--link--disabled {
|
| 11264 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 11265 | }
|
| 11266 |
|
| 11267 | .cds--data-table th,
|
| 11268 | .cds--data-table td {
|
| 11269 | text-align: start;
|
| 11270 | vertical-align: middle;
|
| 11271 | }
|
| 11272 |
|
| 11273 | .cds--data-table.cds--data-table--top-aligned-body.cds--data-table--lg tr:not([data-child-row]) td:not(.cds--table-expand) {
|
| 11274 | padding-block-end: 1rem;
|
| 11275 | padding-block-start: 1rem;
|
| 11276 | }
|
| 11277 | .cds--data-table.cds--data-table--top-aligned-body.cds--data-table--lg tr:not([data-child-row]) td:not(.cds--table-expand).cds--table-column-menu {
|
| 11278 | padding-block-start: 0.5rem;
|
| 11279 | }
|
| 11280 | .cds--data-table.cds--data-table--top-aligned-body.cds--data-table--lg tr:not([data-child-row]) td:not(.cds--table-expand).cds--table-column-checkbox:not(.cds--table-column-radio) {
|
| 11281 | padding-block-start: 0.8125rem;
|
| 11282 | }
|
| 11283 | .cds--data-table.cds--data-table--top-aligned-body td {
|
| 11284 | vertical-align: top;
|
| 11285 | }
|
| 11286 |
|
| 11287 | .cds--data-table.cds--data-table--top-aligned-header.cds--data-table--lg th:not(.cds--table-expand):not(.cds--table-sort__header) {
|
| 11288 | padding-block-end: 1rem;
|
| 11289 | padding-block-start: 1rem;
|
| 11290 | }
|
| 11291 | .cds--data-table.cds--data-table--top-aligned-header.cds--data-table--lg th:not(.cds--table-expand):not(.cds--table-sort__header).cds--table-column-menu {
|
| 11292 | padding-block-start: 0.5rem;
|
| 11293 | }
|
| 11294 | .cds--data-table.cds--data-table--top-aligned-header.cds--data-table--lg th:not(.cds--table-expand):not(.cds--table-sort__header).cds--table-column-checkbox {
|
| 11295 | padding-block-start: 0.8125rem;
|
| 11296 | }
|
| 11297 | .cds--data-table.cds--data-table--top-aligned-header th {
|
| 11298 | vertical-align: top;
|
| 11299 | }
|
| 11300 |
|
| 11301 | .cds--data-table th[align=right],
|
| 11302 | .cds--data-table td[align=right] {
|
| 11303 | text-align: end;
|
| 11304 | }
|
| 11305 |
|
| 11306 | .cds--data-table th[align=center],
|
| 11307 | .cds--data-table td[align=center] {
|
| 11308 | text-align: center;
|
| 11309 | }
|
| 11310 |
|
| 11311 | .cds--data-table th {
|
| 11312 | background-color: var(--cds-layer-accent);
|
| 11313 | color: var(--cds-text-primary, #161616);
|
| 11314 | padding-inline-end: 1rem;
|
| 11315 | padding-inline-start: 1rem;
|
| 11316 | }
|
| 11317 |
|
| 11318 | .cds--data-table th:last-of-type {
|
| 11319 | position: static;
|
| 11320 | inline-size: auto;
|
| 11321 | }
|
| 11322 |
|
| 11323 | .cds--data-table .cds--table-header-label {
|
| 11324 | text-align: start;
|
| 11325 | }
|
| 11326 |
|
| 11327 | .cds--data-table td,
|
| 11328 | .cds--data-table tbody th {
|
| 11329 | border-block-end: 1px solid var(--cds-border-subtle);
|
| 11330 | border-block-start: 1px solid var(--cds-layer);
|
| 11331 | color: var(--cds-text-secondary, #525252);
|
| 11332 | padding-inline-end: 1rem;
|
| 11333 | padding-inline-start: 1rem;
|
| 11334 | }
|
| 11335 | .cds--data-table td + td:first-of-type,
|
| 11336 | .cds--data-table tbody th + td:first-of-type {
|
| 11337 | padding-inline-start: 0.75rem;
|
| 11338 | }
|
| 11339 |
|
| 11340 | @supports (-moz-appearance: none) {
|
| 11341 | .cds--data-table td {
|
| 11342 | background-clip: padding-box;
|
| 11343 | }
|
| 11344 | }
|
| 11345 | .cds--data-table .cds--list-box input[role=combobox],
|
| 11346 | .cds--data-table .cds--list-box input[type=text],
|
| 11347 | .cds--data-table .cds--dropdown,
|
| 11348 | .cds--data-table .cds--list-box,
|
| 11349 | .cds--data-table .cds--number input[type=number],
|
| 11350 | .cds--data-table .cds--number__control-btn::before,
|
| 11351 | .cds--data-table .cds--number__control-btn::after,
|
| 11352 | .cds--data-table .cds--text-input,
|
| 11353 | .cds--data-table .cds--select-input {
|
| 11354 | background-color: var(--cds-field-02, #ffffff);
|
| 11355 | }
|
| 11356 |
|
| 11357 | .cds--data-table td.cds--table-column-menu .cds--overflow-menu[aria-expanded=false]:focus {
|
| 11358 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 11359 | outline-offset: -2px;
|
| 11360 | }
|
| 11361 | @media screen and (prefers-contrast) {
|
| 11362 | .cds--data-table td.cds--table-column-menu .cds--overflow-menu[aria-expanded=false]:focus {
|
| 11363 | outline-style: dotted;
|
| 11364 | }
|
| 11365 | }
|
| 11366 |
|
| 11367 | .cds--data-table td.cds--table-column-menu .cds--overflow-menu[aria-expanded=true]:focus {
|
| 11368 | outline: none;
|
| 11369 | }
|
| 11370 |
|
| 11371 | @media screen and (hover: hover), (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
| 11372 | .cds--data-table td.cds--table-column-menu .cds--overflow-menu .cds--overflow-menu__icon {
|
| 11373 | opacity: 0;
|
| 11374 | }
|
| 11375 | }
|
| 11376 | .cds--data-table td.cds--table-column-menu .cds--overflow-menu.cds--overflow-menu--open .cds--overflow-menu__icon {
|
| 11377 | opacity: 1;
|
| 11378 | }
|
| 11379 |
|
| 11380 | .cds--data-table.cds--data-table--visible-overflow-menu td.cds--table-column-menu .cds--overflow-menu .cds--overflow-menu__icon,
|
| 11381 | .cds--data-table td.cds--table-column-menu .cds--overflow-menu:hover .cds--overflow-menu__icon,
|
| 11382 | .cds--data-table td.cds--table-column-menu .cds--overflow-menu:focus .cds--overflow-menu__icon,
|
| 11383 | .cds--data-table tr:hover td.cds--table-column-menu .cds--overflow-menu .cds--overflow-menu__icon {
|
| 11384 | opacity: 1;
|
| 11385 | }
|
| 11386 |
|
| 11387 | .cds--table-row--menu-option .cds--overflow-menu-options__btn .cds--overflow-menu-options__option-content svg {
|
| 11388 | position: relative;
|
| 11389 | inset-block-start: 0.1875rem;
|
| 11390 | margin-inline-end: 0.5rem;
|
| 11391 | }
|
| 11392 |
|
| 11393 | .cds--data-table .cds--overflow-menu:hover,
|
| 11394 | .cds--data-table .cds--overflow-menu__trigger:hover {
|
| 11395 | background-color: var(--cds-layer-selected-hover);
|
| 11396 | }
|
| 11397 |
|
| 11398 | .cds--data-table--selected .cds--overflow-menu:hover,
|
| 11399 | .cds--data-table--selected .cds--overflow-menu__trigger:hover {
|
| 11400 | background-color: var(--cds-layer-hover);
|
| 11401 | }
|
| 11402 |
|
| 11403 | .cds--data-table--selected .cds--link:not(.cds--link--disabled) {
|
| 11404 | color: var(--cds-link-secondary, #0043ce);
|
| 11405 | }
|
| 11406 |
|
| 11407 | .cds--data-table--xs td.cds--table-column-menu,
|
| 11408 | .cds--data-table--sm td.cds--table-column-menu {
|
| 11409 | block-size: 1.5rem;
|
| 11410 | padding-block-end: 0;
|
| 11411 | padding-block-start: 0;
|
| 11412 | }
|
| 11413 |
|
| 11414 | .cds--data-table--sm td.cds--table-column-menu {
|
| 11415 | block-size: 2rem;
|
| 11416 | }
|
| 11417 |
|
| 11418 | .cds--data-table--md td.cds--table-column-menu {
|
| 11419 | block-size: 2.5rem;
|
| 11420 | }
|
| 11421 |
|
| 11422 | .cds--data-table--xl .cds--table-column-menu {
|
| 11423 | padding-block-start: 0.5rem;
|
| 11424 | }
|
| 11425 |
|
| 11426 | .cds--data-table--zebra tbody tr:not(.cds--parent-row):nth-child(odd) td {
|
| 11427 | border-block-end: 1px solid var(--cds-layer);
|
| 11428 | }
|
| 11429 |
|
| 11430 | .cds--data-table--zebra tbody tr:not(.cds--parent-row):nth-child(even) td {
|
| 11431 | border-block-end: 1px solid var(--cds-layer-accent);
|
| 11432 | border-block-start: 1px solid var(--cds-layer-accent);
|
| 11433 | }
|
| 11434 |
|
| 11435 | .cds--data-table--zebra tbody tr:not(.cds--parent-row):not(.cds--data-table--selected):nth-child(even) {
|
| 11436 | background-color: var(--cds-layer-accent);
|
| 11437 | }
|
| 11438 |
|
| 11439 | .cds--data-table--zebra tbody tr:not(.cds--parent-row):hover td {
|
| 11440 | border-block-end: 1px solid var(--cds-layer-hover);
|
| 11441 | border-block-start: 1px solid var(--cds-layer-hover);
|
| 11442 | }
|
| 11443 |
|
| 11444 | .cds--data-table--zebra tbody tr:not(.cds--parent-row):not(.cds--data-table--selected):hover {
|
| 11445 | background-color: var(--cds-layer-hover);
|
| 11446 | }
|
| 11447 |
|
| 11448 | .cds--table-column-checkbox .cds--checkbox-label {
|
| 11449 | min-block-size: 1.5rem;
|
| 11450 | padding-inline-start: 0;
|
| 11451 | }
|
| 11452 |
|
| 11453 | .cds--table-column-checkbox .cds--checkbox-label::before {
|
| 11454 | margin-block-start: 0.125rem;
|
| 11455 | }
|
| 11456 |
|
| 11457 | .cds--table-column-checkbox .cds--checkbox-label::after {
|
| 11458 | inset-block-start: 0.46875rem;
|
| 11459 | }
|
| 11460 |
|
| 11461 | .cds--data-table th.cds--table-column-checkbox {
|
| 11462 | position: static;
|
| 11463 | background-color: var(--cds-layer-accent);
|
| 11464 | inline-size: 2rem;
|
| 11465 | transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
|
| 11466 | }
|
| 11467 |
|
| 11468 | .cds--data-table thead th.cds--table-column-checkbox,
|
| 11469 | .cds--data-table tbody td.cds--table-column-checkbox,
|
| 11470 | .cds--data-table thead th.cds--table-expand,
|
| 11471 | .cds--data-table tbody td.cds--table-expand {
|
| 11472 | min-inline-size: 0;
|
| 11473 | }
|
| 11474 |
|
| 11475 | .cds--data-table thead th.cds--table-column-checkbox,
|
| 11476 | .cds--data-table tbody td.cds--table-column-checkbox {
|
| 11477 | min-inline-size: 2.5rem;
|
| 11478 | padding-inline-end: 0.25rem;
|
| 11479 | padding-inline-start: 1rem;
|
| 11480 | }
|
| 11481 |
|
| 11482 | .cds--data-table thead th.cds--table-expand,
|
| 11483 | .cds--data-table tbody td.cds--table-expand {
|
| 11484 | block-size: 2rem;
|
| 11485 | inline-size: 2rem;
|
| 11486 | }
|
| 11487 |
|
| 11488 | .cds--data-table--xs thead th.cds--table-expand,
|
| 11489 | .cds--data-table--xs tbody td.cds--table-expand {
|
| 11490 | padding: 0 0 0 0.5rem;
|
| 11491 | block-size: 1.5rem;
|
| 11492 | inline-size: 1.5rem;
|
| 11493 | }
|
| 11494 |
|
| 11495 | .cds--data-table--sm thead th.cds--table-expand,
|
| 11496 | .cds--data-table--sm tbody td.cds--table-expand {
|
| 11497 | padding: 0;
|
| 11498 | block-size: 2rem;
|
| 11499 | inline-size: 2rem;
|
| 11500 | padding-inline-start: 0.5rem;
|
| 11501 | }
|
| 11502 |
|
| 11503 | .cds--data-table--md thead th.cds--table-expand,
|
| 11504 | .cds--data-table--md tbody td.cds--table-expand {
|
| 11505 | padding: 0.25rem 0 0.25rem 0.5rem;
|
| 11506 | block-size: 2.5rem;
|
| 11507 | inline-size: 2.5rem;
|
| 11508 | }
|
| 11509 |
|
| 11510 | .cds--data-table--xl thead th.cds--table-expand,
|
| 11511 | .cds--data-table--xl tbody td.cds--table-expand {
|
| 11512 | block-size: 4rem;
|
| 11513 | padding-block-end: 1.375rem;
|
| 11514 | padding-block-start: 0.625rem;
|
| 11515 | }
|
| 11516 |
|
| 11517 | .cds--data-table--xl .cds--table-column-checkbox {
|
| 11518 | padding-block-start: 0.8125rem;
|
| 11519 | }
|
| 11520 |
|
| 11521 | .cds--data-table--xl .cds--table-column-radio {
|
| 11522 | padding-block-start: 1rem;
|
| 11523 | }
|
| 11524 |
|
| 11525 | .cds--table-column-radio {
|
| 11526 | inline-size: 48px;
|
| 11527 | }
|
| 11528 |
|
| 11529 | .cds--table-column-radio .cds--radio-button__appearance {
|
| 11530 | margin-inline-end: -0.125rem;
|
| 11531 | }
|
| 11532 |
|
| 11533 | .cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected td,
|
| 11534 | tr.cds--data-table--selected td {
|
| 11535 | border-block-end: 1px solid var(--cds-layer-active);
|
| 11536 | border-block-start: 1px solid var(--cds-layer-selected);
|
| 11537 | color: var(--cds-text-primary, #161616);
|
| 11538 | }
|
| 11539 |
|
| 11540 | .cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected,
|
| 11541 | tr.cds--data-table--selected {
|
| 11542 | background-color: var(--cds-layer-selected);
|
| 11543 | }
|
| 11544 |
|
| 11545 | .cds--data-table--zebra tbody tr:first-of-type:nth-child(odd).cds--data-table--selected td,
|
| 11546 | tr.cds--data-table--selected:first-of-type td {
|
| 11547 | border-block-start: 1px solid var(--cds-border-subtle-selected);
|
| 11548 | }
|
| 11549 |
|
| 11550 | .cds--data-table--zebra tbody tr:last-of-type:nth-child(odd).cds--data-table--selected td,
|
| 11551 | .cds--data-table--zebra tbody tr:last-of-type:nth-child(even).cds--data-table--selected td,
|
| 11552 | tr.cds--data-table--selected:last-of-type td {
|
| 11553 | border-block-end: 1px solid var(--cds-layer-selected);
|
| 11554 | border-block-start: 1px solid var(--cds-layer-selected);
|
| 11555 | }
|
| 11556 |
|
| 11557 | .cds--data-table--zebra tbody tr:nth-child(even).cds--data-table--selected td {
|
| 11558 | border-block-end: 1px solid var(--cds-layer-active);
|
| 11559 | }
|
| 11560 |
|
| 11561 | .cds--data-table--zebra tbody tr:nth-child(even).cds--data-table--selected:hover td {
|
| 11562 | border-block-end: 1px solid var(--cds-layer-selected-hover);
|
| 11563 | }
|
| 11564 |
|
| 11565 | .cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected:hover td,
|
| 11566 | .cds--data-table tbody .cds--data-table--selected:hover td {
|
| 11567 | border-block-end: 1px solid var(--cds-layer-selected-hover);
|
| 11568 | border-block-start: 1px solid var(--cds-layer-selected-hover);
|
| 11569 | color: var(--cds-text-primary, #161616);
|
| 11570 | }
|
| 11571 |
|
| 11572 | .cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected:hover,
|
| 11573 | .cds--data-table tbody .cds--data-table--selected:hover {
|
| 11574 | background-color: var(--cds-layer-selected-hover);
|
| 11575 | }
|
| 11576 |
|
| 11577 | .cds--data-table--selected .cds--overflow-menu .cds--overflow-menu__icon {
|
| 11578 | opacity: 1;
|
| 11579 | }
|
| 11580 |
|
| 11581 | .cds--data-table--xs thead tr,
|
| 11582 | .cds--data-table--xs tbody tr,
|
| 11583 | .cds--data-table--xs tbody tr th {
|
| 11584 | block-size: 1.5rem;
|
| 11585 | }
|
| 11586 |
|
| 11587 | .cds--data-table--xs .cds--table-header-label {
|
| 11588 | padding-block-end: 0.125rem;
|
| 11589 | padding-block-start: 0.125rem;
|
| 11590 | }
|
| 11591 |
|
| 11592 | .cds--data-table--xs td,
|
| 11593 | .cds--data-table--xs tbody tr th {
|
| 11594 | padding-block-end: 0.125rem;
|
| 11595 | padding-block-start: 0.125rem;
|
| 11596 | }
|
| 11597 |
|
| 11598 | .cds--data-table--xs .cds--overflow-menu {
|
| 11599 | block-size: calc(100% + 1px);
|
| 11600 | inline-size: 2rem;
|
| 11601 | }
|
| 11602 |
|
| 11603 | .cds--data-table.cds--data-table--xs:not(.cds--data-table--top-aligned-body) td.cds--table-column-checkbox,
|
| 11604 | .cds--data-table.cds--data-table--xs:not(.cds--data-table--top-aligned-header) th.cds--table-column-checkbox {
|
| 11605 | padding-block-end: 0;
|
| 11606 | padding-block-start: 0;
|
| 11607 | }
|
| 11608 |
|
| 11609 | .cds--data-table.cds--data-table--xs .cds--table-column-checkbox .cds--checkbox-label {
|
| 11610 | block-size: 1.4375rem;
|
| 11611 | min-block-size: 1.4375rem;
|
| 11612 | }
|
| 11613 |
|
| 11614 | .cds--data-table--sm thead tr,
|
| 11615 | .cds--data-table--sm tbody tr,
|
| 11616 | .cds--data-table--sm tbody tr th {
|
| 11617 | block-size: 2rem;
|
| 11618 | }
|
| 11619 |
|
| 11620 | .cds--data-table--sm .cds--table-header-label {
|
| 11621 | padding-block-end: 0.4375rem;
|
| 11622 | padding-block-start: 0.4375rem;
|
| 11623 | }
|
| 11624 |
|
| 11625 | .cds--data-table--sm td,
|
| 11626 | .cds--data-table--sm tbody tr th,
|
| 11627 | .cds--data-table--sm.cds--data-table--top-aligned-header th.cds--table-column-checkbox {
|
| 11628 | padding-block-end: 0.375rem;
|
| 11629 | padding-block-start: 0.4375rem;
|
| 11630 | }
|
| 11631 |
|
| 11632 | .cds--data-table.cds--data-table--sm:not(.cds--data-table--top-aligned-body) td.cds--table-column-checkbox,
|
| 11633 | .cds--data-table.cds--data-table--sm:not(.cds--data-table--top-aligned-header) th.cds--table-column-checkbox {
|
| 11634 | padding-block-end: 0.1875rem;
|
| 11635 | padding-block-start: 0.1875rem;
|
| 11636 | }
|
| 11637 |
|
| 11638 | .cds--data-table--sm .cds--overflow-menu {
|
| 11639 | block-size: calc(100% + 1px);
|
| 11640 | }
|
| 11641 |
|
| 11642 | .cds--data-table--md thead tr,
|
| 11643 | .cds--data-table--md tbody tr,
|
| 11644 | .cds--data-table--md tbody tr th {
|
| 11645 | block-size: 2.5rem;
|
| 11646 | }
|
| 11647 |
|
| 11648 | .cds--data-table--md .cds--table-header-label,
|
| 11649 | .cds--data-table--md.cds--data-table--top-aligned-header th.cds--table-column-checkbox {
|
| 11650 | padding-block-end: 0.4375rem;
|
| 11651 | padding-block-start: 0.4375rem;
|
| 11652 | }
|
| 11653 |
|
| 11654 | .cds--data-table--md td,
|
| 11655 | .cds--data-table--md tbody tr th {
|
| 11656 | padding-block-end: 0.375rem;
|
| 11657 | padding-block-start: 0.4375rem;
|
| 11658 | }
|
| 11659 |
|
| 11660 | .cds--data-table.cds--data-table--md:not(.cds--data-table--top-aligned-body) td.cds--table-column-checkbox,
|
| 11661 | .cds--data-table.cds--data-table--md:not(.cds--data-table--top-aligned-header) th.cds--table-column-checkbox {
|
| 11662 | padding-block-end: 0.1875rem;
|
| 11663 | padding-block-start: 0.1875rem;
|
| 11664 | }
|
| 11665 |
|
| 11666 | .cds--data-table--md .cds--table-column-menu {
|
| 11667 | padding-block-end: 0.1875rem;
|
| 11668 | padding-block-start: 0.1875rem;
|
| 11669 | }
|
| 11670 |
|
| 11671 | .cds--data-table--xl thead tr,
|
| 11672 | .cds--data-table--xl tbody tr,
|
| 11673 | .cds--data-table--xl tbody tr th {
|
| 11674 | block-size: 4rem;
|
| 11675 | }
|
| 11676 |
|
| 11677 | .cds--data-table--xl .cds--table-header-label {
|
| 11678 | padding-block-end: 1rem;
|
| 11679 | padding-block-start: 1rem;
|
| 11680 | }
|
| 11681 |
|
| 11682 | .cds--data-table--xl td,
|
| 11683 | .cds--data-table--xl tbody tr th {
|
| 11684 | padding-block-end: 1rem;
|
| 11685 | padding-block-start: 1rem;
|
| 11686 | }
|
| 11687 |
|
| 11688 | .cds--data-table--xl th,
|
| 11689 | .cds--data-table--xl td {
|
| 11690 | vertical-align: top;
|
| 11691 | }
|
| 11692 |
|
| 11693 | .cds--data-table--xl .cds--data-table--cell-secondary-text {
|
| 11694 | font-size: var(--cds-label-01-font-size, 0.75rem);
|
| 11695 | font-weight: var(--cds-label-01-font-weight, 400);
|
| 11696 | line-height: var(--cds-label-01-line-height, 1.33333);
|
| 11697 | letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
|
| 11698 | }
|
| 11699 |
|
| 11700 | .cds--data-table--static {
|
| 11701 | inline-size: auto;
|
| 11702 | }
|
| 11703 |
|
| 11704 | .cds--data-table-container--static {
|
| 11705 | inline-size: -moz-fit-content;
|
| 11706 | inline-size: fit-content;
|
| 11707 | }
|
| 11708 |
|
| 11709 | .cds--data-table_inner-container {
|
| 11710 | background-color: var(--cds-layer-accent);
|
| 11711 | transform: translateZ(0);
|
| 11712 | }
|
| 11713 |
|
| 11714 | .cds--data-table--sticky-header {
|
| 11715 | display: block;
|
| 11716 | overflow-y: scroll;
|
| 11717 |
|
| 11718 | }
|
| 11719 | .cds--data-table--sticky-header thead,
|
| 11720 | .cds--data-table--sticky-header tbody,
|
| 11721 | .cds--data-table--sticky-header tr,
|
| 11722 | .cds--data-table--sticky-header th,
|
| 11723 | .cds--data-table--sticky-header td {
|
| 11724 | display: flex;
|
| 11725 | }
|
| 11726 | .cds--data-table--sticky-header thead {
|
| 11727 | position: sticky;
|
| 11728 | z-index: 1;
|
| 11729 | overflow: scroll;
|
| 11730 | inline-size: 100%;
|
| 11731 | inset-block-start: 0;
|
| 11732 | -ms-overflow-style: none;
|
| 11733 | will-change: transform;
|
| 11734 | }
|
| 11735 | .cds--data-table--sticky-header thead tr th {
|
| 11736 | border-block-end: 1px solid var(--cds-layer-active);
|
| 11737 | }
|
| 11738 | .cds--data-table--sticky-header tbody {
|
| 11739 | flex-direction: column;
|
| 11740 | -ms-overflow-style: none;
|
| 11741 | overflow-x: scroll;
|
| 11742 | will-change: transform;
|
| 11743 | }
|
| 11744 | .cds--data-table--sticky-header tr.cds--parent-row.cds--expandable-row {
|
| 11745 | block-size: auto;
|
| 11746 | min-block-size: 3rem;
|
| 11747 | }
|
| 11748 | .cds--data-table--sticky-header tr.cds--expandable-row:not(.cds--parent-row) {
|
| 11749 | block-size: auto;
|
| 11750 | }
|
| 11751 | .cds--data-table--sticky-header .cds--table-expand {
|
| 11752 | max-inline-size: 3rem;
|
| 11753 | }
|
| 11754 | .cds--data-table--sticky-header thead .cds--table-expand {
|
| 11755 | align-items: center;
|
| 11756 | }
|
| 11757 | .cds--data-table--sticky-header .cds--parent-row {
|
| 11758 | min-block-size: 3rem;
|
| 11759 | }
|
| 11760 | .cds--data-table--sticky-header:not(.cds--data-table--xs):not(.cds--data-table--xl):not(.cds--data-table--sm) td:not(.cds--table-column-menu):not(.cds--table-column-checkbox) {
|
| 11761 | padding-block-start: 0.875rem;
|
| 11762 | }
|
| 11763 | .cds--data-table--sticky-header tr.cds--parent-row.cds--expandable-row:hover + tr[data-child-row] td {
|
| 11764 | border-block-start: 1px solid var(--cds-layer-hover);
|
| 11765 | }
|
| 11766 | .cds--data-table--sticky-header tr.cds--expandable-row:last-of-type {
|
| 11767 | overflow: hidden;
|
| 11768 | }
|
| 11769 | .cds--data-table--sticky-header tr.cds--data-table--selected:first-of-type td {
|
| 11770 | border-block-start: none;
|
| 11771 | }
|
| 11772 | .cds--data-table--sticky-header thead th.cds--table-column-checkbox,
|
| 11773 | .cds--data-table--sticky-header tbody tr td.cds--table-column-checkbox {
|
| 11774 | align-items: center;
|
| 11775 | inline-size: 2.25rem;
|
| 11776 | min-inline-size: 2.25rem;
|
| 11777 | }
|
| 11778 | .cds--data-table--sticky-header.cds--data-table--xl thead th.cds--table-column-checkbox, .cds--data-table--sticky-header.cds--data-table--xl td.cds--table-column-checkbox {
|
| 11779 | align-items: flex-start;
|
| 11780 | }
|
| 11781 | .cds--data-table--sticky-header th.cds--table-column-checkbox ~ th:last-of-type:empty {
|
| 11782 | max-inline-size: 4rem;
|
| 11783 | }
|
| 11784 | .cds--data-table--sticky-header th:empty:not(.cds--table-expand) {
|
| 11785 | max-inline-size: 2.25rem;
|
| 11786 | }
|
| 11787 | .cds--data-table--sticky-header td.cds--table-column-menu {
|
| 11788 | align-items: center;
|
| 11789 | block-size: auto;
|
| 11790 | padding-block-start: 0;
|
| 11791 | }
|
| 11792 | .cds--data-table--sticky-header thead::-webkit-scrollbar,
|
| 11793 | .cds--data-table--sticky-header tbody::-webkit-scrollbar {
|
| 11794 | display: none;
|
| 11795 | }
|
| 11796 | @-moz-document url-prefix() {
|
| 11797 | .cds--data-table--sticky-header thead,
|
| 11798 | .cds--data-table--sticky-header tbody {
|
| 11799 | scrollbar-width: none;
|
| 11800 | }
|
| 11801 | }
|
| 11802 | .cds--data-table--sticky-header tbody tr:last-of-type {
|
| 11803 | border-block-end: 0;
|
| 11804 | }
|
| 11805 | .cds--data-table--sticky-header th:not(.cds--table-column-checkbox):not(.cds--table-column-menu):not(.cds--table-expand):not(.cds--table-column-icon),
|
| 11806 | .cds--data-table--sticky-header td:not(.cds--table-column-checkbox):not(.cds--table-column-menu):not(.cds--table-expand):not(.cds--table-column-icon) {
|
| 11807 | inline-size: 100%;
|
| 11808 | min-inline-size: 0;
|
| 11809 | }
|
| 11810 | .cds--data-table--sticky-header.cds--data-table--xs tr:not(.cds--expandable-row), .cds--data-table--sticky-header.cds--data-table--sm tr:not(.cds--expandable-row), .cds--data-table--sticky-header.cds--data-table--xl tr:not(.cds--expandable-row) {
|
| 11811 | block-size: auto;
|
| 11812 | }
|
| 11813 | .cds--data-table--sticky-header.cds--data-table--xs tr:not(.cds--expandable-row) {
|
| 11814 | min-block-size: 1.5rem;
|
| 11815 | }
|
| 11816 | .cds--data-table--sticky-header.cds--data-table--sm tr:not(.cds--expandable-row) {
|
| 11817 | min-block-size: 2rem;
|
| 11818 | }
|
| 11819 | .cds--data-table--sticky-header.cds--data-table--xl tr:not(.cds--expandable-row) {
|
| 11820 | min-block-size: 4rem;
|
| 11821 | }
|
| 11822 | .cds--data-table--sticky-header.cds--data-table--xs tr td.cds--table-expand {
|
| 11823 | padding-block-start: 0.25rem;
|
| 11824 | }
|
| 11825 | .cds--data-table--sticky-header.cds--data-table--sm tr td.cds--table-expand {
|
| 11826 | padding-block-start: 0.5rem;
|
| 11827 | }
|
| 11828 | .cds--data-table--sticky-header .cds--table-header-label {
|
| 11829 | display: block;
|
| 11830 | overflow-x: hidden;
|
| 11831 | text-overflow: ellipsis;
|
| 11832 | white-space: nowrap;
|
| 11833 | max-inline-size: calc(100% - 10px);
|
| 11834 | overflow-y: hidden;
|
| 11835 | padding-block-end: 1rem;
|
| 11836 | padding-block-start: 0.9375rem;
|
| 11837 | }
|
| 11838 | .cds--data-table--sticky-header.cds--data-table--xs th .cds--table-header-label {
|
| 11839 | padding-block-end: 0;
|
| 11840 | padding-block-start: 0.1875rem;
|
| 11841 | }
|
| 11842 | .cds--data-table--sticky-header.cds--data-table--sm th .cds--table-header-label {
|
| 11843 | padding-block-end: 0;
|
| 11844 | padding-block-start: 0.5rem;
|
| 11845 | }
|
| 11846 | .cds--data-table--sticky-header.cds--data-table--xl th .cds--table-header-label {
|
| 11847 | padding-block-start: 1rem;
|
| 11848 | }
|
| 11849 | .cds--data-table--sticky-header.cds--data-table--xl th.cds--table-expand {
|
| 11850 | display: flex;
|
| 11851 | align-items: flex-start;
|
| 11852 | }
|
| 11853 | .cds--data-table--sticky-header.cds--data-table--xs tr.cds--parent-row .cds--table-column-checkbox, .cds--data-table--sticky-header.cds--data-table--sm tr.cds--parent-row .cds--table-column-checkbox {
|
| 11854 | align-items: flex-start;
|
| 11855 | }
|
| 11856 |
|
| 11857 | .cds--data-table--max-width {
|
| 11858 | max-inline-size: 100%;
|
| 11859 | }
|
| 11860 |
|
| 11861 | .cds--data-table--sticky-header {
|
| 11862 | max-block-size: 18.75rem;
|
| 11863 | }
|
| 11864 |
|
| 11865 | .cds--data-table .cds--form-item.cds--checkbox-wrapper:last-of-type {
|
| 11866 | margin: 0;
|
| 11867 | }
|
| 11868 |
|
| 11869 | .cds--data-table--xs .cds--form-item.cds--checkbox-wrapper:last-of-type,
|
| 11870 | .cds--data-table--sm .cds--form-item.cds--checkbox-wrapper:last-of-type {
|
| 11871 | margin: -0.1875rem 0;
|
| 11872 | }
|
| 11873 |
|
| 11874 | .cds--data-table .cds--table-column-slug {
|
| 11875 | inline-size: 1rem;
|
| 11876 | padding-inline-end: 0;
|
| 11877 | }
|
| 11878 |
|
| 11879 | tr.cds--data-table--slug-row,
|
| 11880 | tr.cds--data-table--slug-row + .cds--expandable-row {
|
| 11881 | background: linear-gradient(to right, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%);
|
| 11882 | background-attachment: fixed;
|
| 11883 | }
|
| 11884 |
|
| 11885 | .cds--data-table--slug-row {
|
| 11886 | box-shadow: inset 1px 0 var(--cds-ai-border-strong, #4589ff);
|
| 11887 | }
|
| 11888 |
|
| 11889 | .cds--data-table tbody tr.cds--data-table--slug-row:hover td,
|
| 11890 | tr.cds--data-table--slug-row.cds--expandable-row:hover + .cds--expandable-row[data-child-row] td,
|
| 11891 | tr.cds--data-table--slug-row.cds--expandable-row--hover + .cds--expandable-row[data-child-row]:hover > td,
|
| 11892 | tr.cds--data-table--slug-row.cds--expandable-row--hover > td,
|
| 11893 | tr.cds--data-table--selected.cds--data-table--slug-row.cds--expandable-row + tr.cds--expandable-row[data-child-row] > td,
|
| 11894 | tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td,
|
| 11895 | tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td:first-of-type,
|
| 11896 | tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected:not(.cds--expandable-row):hover > td,
|
| 11897 | tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover + tr[data-child-row] > td,
|
| 11898 | tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover > td,
|
| 11899 | tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover > td:first-of-type {
|
| 11900 | background-color: transparent;
|
| 11901 | }
|
| 11902 |
|
| 11903 | .cds--data-table tbody tr.cds--data-table--slug-row:hover,
|
| 11904 | tr.cds--data-table--slug-row:hover + .cds--expandable-row[data-child-row],
|
| 11905 | tr.cds--data-table--slug-row.cds--expandable-row--hover + .cds--expandable-row[data-child-row]:hover,
|
| 11906 | tr.cds--expandable-row--hover.cds--data-table--slug-row,
|
| 11907 | tr.cds--data-table--selected.cds--parent-row.cds--expandable-row--hover.cds--data-table--slug-row {
|
| 11908 | background: linear-gradient(to right, var(--cds-ai-aura-hover-start, rgba(69, 137, 255, 0.32)) 0%, 15%, var(--cds-ai-aura-hover-end, rgba(255, 255, 255, 0)) 50%), var(--cds-ai-aura-hover-background, #edf5ff);
|
| 11909 | background-attachment: fixed;
|
| 11910 | }
|
| 11911 |
|
| 11912 | tr.cds--parent-row.cds--data-table--selected.cds--data-table--slug-row,
|
| 11913 | .cds--data-table--selected.cds--data-table--slug-row,
|
| 11914 | tr.cds--data-table--selected.cds--data-table--slug-row + .cds--expandable-row {
|
| 11915 | background: linear-gradient(to right, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%), var(--cds-layer-selected);
|
| 11916 | background-attachment: fixed;
|
| 11917 | }
|
| 11918 |
|
| 11919 | tr.cds--data-table--slug-row.cds--data-table--selected td,
|
| 11920 | tr.cds--data-table--slug-row.cds--data-table--selected:hover td,
|
| 11921 | tbody tr.cds--data-table--slug-row:hover td,
|
| 11922 | tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td:not(.cds--table-expand):not(.cds--table-column-checkbox):not(.cds--table-column-slug) {
|
| 11923 | border-block-end-color: var(--cds-border-subtle);
|
| 11924 | }
|
| 11925 |
|
| 11926 | tr.cds--expandable-row.cds--data-table--selected.cds--data-table--slug-row[data-parent-row] > td:not(.cds--table-expand):not(.cds--table-column-checkbox):not(.cds--table-column-slug) {
|
| 11927 | border-block-end: 1px solid var(--cds-layer-selected);
|
| 11928 | }
|
| 11929 |
|
| 11930 | tr.cds--parent-row.cds--data-table--slug-row.cds--expandable-row:hover td:first-of-type {
|
| 11931 | border-block-end: 1px solid transparent;
|
| 11932 | }
|
| 11933 |
|
| 11934 | .cds--data-table thead th.cds--table-sort__header--slug .cds--table-sort,
|
| 11935 | .cds--data-table thead th:has(> .cds--table-header-label--slug) {
|
| 11936 | background: linear-gradient(to right, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%);
|
| 11937 | }
|
| 11938 |
|
| 11939 | .cds--table-column-slug .cds--slug {
|
| 11940 | position: absolute;
|
| 11941 | z-index: 2;
|
| 11942 | transform: translateY(-50%);
|
| 11943 | }
|
| 11944 |
|
| 11945 | .cds--data-table--xl .cds--table-column-slug .cds--slug {
|
| 11946 | transform: translateY(1px);
|
| 11947 | }
|
| 11948 |
|
| 11949 | th .cds--table-header-label.cds--table-header-label--slug {
|
| 11950 | display: flex;
|
| 11951 | align-items: center;
|
| 11952 | }
|
| 11953 |
|
| 11954 | th .cds--table-header-label.cds--table-header-label--slug .cds--slug {
|
| 11955 | margin-inline-start: auto;
|
| 11956 | }
|
| 11957 |
|
| 11958 | th.cds--table-sort__header--slug,
|
| 11959 | th:has(.cds--table-header-label--slug) {
|
| 11960 | box-shadow: inset 0 1px var(--cds-ai-border-strong, #4589ff);
|
| 11961 | }
|
| 11962 |
|
| 11963 | td.cds--table-cell--column-slug {
|
| 11964 | background: linear-gradient(to right, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%);
|
| 11965 | }
|
| 11966 |
|
| 11967 | tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-cell--column-slug {
|
| 11968 | border-block-start: linear-gradient(to right, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%);
|
| 11969 | }
|
| 11970 |
|
| 11971 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 11972 | tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-cell--column-slug,
|
| 11973 | .cds--data-table-content {
|
| 11974 | outline: 1px solid transparent;
|
| 11975 | }
|
| 11976 | }
|
| 11977 |
|
| 11978 | .cds--search {
|
| 11979 | position: relative;
|
| 11980 | display: flex;
|
| 11981 | align-items: center;
|
| 11982 | inline-size: 100%;
|
| 11983 | }
|
| 11984 |
|
| 11985 | .cds--search .cds--label {
|
| 11986 | position: absolute;
|
| 11987 | overflow: hidden;
|
| 11988 | padding: 0;
|
| 11989 | border: 0;
|
| 11990 | margin: -1px;
|
| 11991 | block-size: 1px;
|
| 11992 | clip: rect(0, 0, 0, 0);
|
| 11993 | inline-size: 1px;
|
| 11994 | visibility: inherit;
|
| 11995 | white-space: nowrap;
|
| 11996 | }
|
| 11997 |
|
| 11998 | .cds--search-input {
|
| 11999 | box-sizing: border-box;
|
| 12000 | padding: 0;
|
| 12001 | border: 0;
|
| 12002 | margin: 0;
|
| 12003 | font-family: inherit;
|
| 12004 | font-size: 100%;
|
| 12005 | vertical-align: baseline;
|
| 12006 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 12007 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 12008 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 12009 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 12010 | outline: 2px solid transparent;
|
| 12011 | outline-offset: -2px;
|
| 12012 | order: 1;
|
| 12013 | padding: 0 2.5rem;
|
| 12014 | border: none;
|
| 12015 | -webkit-appearance: none;
|
| 12016 | -moz-appearance: none;
|
| 12017 | appearance: none;
|
| 12018 | background-color: var(--cds-field);
|
| 12019 | border-block-end: 1px solid var(--cds-border-strong);
|
| 12020 | color: var(--cds-text-primary, #161616);
|
| 12021 | inline-size: 100%;
|
| 12022 | text-overflow: ellipsis;
|
| 12023 | transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 12024 | }
|
| 12025 | .cds--search-input *,
|
| 12026 | .cds--search-input *::before,
|
| 12027 | .cds--search-input *::after {
|
| 12028 | box-sizing: inherit;
|
| 12029 | }
|
| 12030 | .cds--search-input:focus {
|
| 12031 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 12032 | outline-offset: -2px;
|
| 12033 | }
|
| 12034 | @media screen and (prefers-contrast) {
|
| 12035 | .cds--search-input:focus {
|
| 12036 | outline-style: dotted;
|
| 12037 | }
|
| 12038 | }
|
| 12039 | .cds--search-input::-moz-placeholder {
|
| 12040 | color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4));
|
| 12041 | opacity: 1;
|
| 12042 | }
|
| 12043 | .cds--search-input::placeholder {
|
| 12044 | color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4));
|
| 12045 | opacity: 1;
|
| 12046 | }
|
| 12047 | .cds--search-input::-ms-clear {
|
| 12048 | display: none;
|
| 12049 | }
|
| 12050 |
|
| 12051 | .cds--search-input[disabled] {
|
| 12052 | background-color: var(--cds-field);
|
| 12053 | border-block-end: 1px solid transparent;
|
| 12054 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 12055 | cursor: not-allowed;
|
| 12056 | }
|
| 12057 | .cds--search-input[disabled]::-moz-placeholder {
|
| 12058 | color: var(--cds-field);
|
| 12059 | }
|
| 12060 | .cds--search-input[disabled]::placeholder {
|
| 12061 | color: var(--cds-field);
|
| 12062 | }
|
| 12063 |
|
| 12064 | .cds--search--light .cds--search-input {
|
| 12065 | background: var(--cds-field-02, #ffffff);
|
| 12066 | }
|
| 12067 |
|
| 12068 | .cds--search--light .cds--search-close::before {
|
| 12069 | background: var(--cds-field-02, #ffffff);
|
| 12070 | }
|
| 12071 |
|
| 12072 | .cds--search--sm .cds--search-input,
|
| 12073 | .cds--search--sm.cds--search--expandable.cds--search--expanded .cds--search-input {
|
| 12074 | padding: 0 2rem;
|
| 12075 | block-size: 2rem;
|
| 12076 | }
|
| 12077 |
|
| 12078 | .cds--search--sm .cds--search-magnifier-icon {
|
| 12079 | inset-inline-start: 0.5rem;
|
| 12080 | }
|
| 12081 |
|
| 12082 | .cds--search--md .cds--search-input,
|
| 12083 | .cds--search--md.cds--search--expandable.cds--search--expanded .cds--search-input {
|
| 12084 | padding: 0 2.5rem;
|
| 12085 | block-size: 2.5rem;
|
| 12086 | }
|
| 12087 |
|
| 12088 | .cds--search--md .cds--search-magnifier-icon {
|
| 12089 | inset-inline-start: 0.75rem;
|
| 12090 | }
|
| 12091 |
|
| 12092 | .cds--search--lg .cds--search-input,
|
| 12093 | .cds--search--lg.cds--search--expandable.cds--search--expanded .cds--search-input {
|
| 12094 | padding: 0 3rem;
|
| 12095 | block-size: 3rem;
|
| 12096 | }
|
| 12097 |
|
| 12098 | .cds--search-magnifier-icon {
|
| 12099 | box-sizing: border-box;
|
| 12100 | padding: 0;
|
| 12101 | border: 0;
|
| 12102 | margin: 0;
|
| 12103 | font-family: inherit;
|
| 12104 | font-size: 100%;
|
| 12105 | vertical-align: baseline;
|
| 12106 | position: absolute;
|
| 12107 | z-index: 2;
|
| 12108 | block-size: 1rem;
|
| 12109 | fill: var(--cds-icon-secondary, #525252);
|
| 12110 | inline-size: 1rem;
|
| 12111 | inset-block-start: 50%;
|
| 12112 | inset-inline-start: 1rem;
|
| 12113 | pointer-events: none;
|
| 12114 | transform: translateY(-50%);
|
| 12115 | }
|
| 12116 | .cds--search-magnifier-icon *,
|
| 12117 | .cds--search-magnifier-icon *::before,
|
| 12118 | .cds--search-magnifier-icon *::after {
|
| 12119 | box-sizing: inherit;
|
| 12120 | }
|
| 12121 |
|
| 12122 | .cds--search-close {
|
| 12123 | box-sizing: border-box;
|
| 12124 | padding: 0;
|
| 12125 | border: 0;
|
| 12126 | margin: 0;
|
| 12127 | font-family: inherit;
|
| 12128 | font-size: 100%;
|
| 12129 | vertical-align: baseline;
|
| 12130 | display: inline-block;
|
| 12131 | padding: 0;
|
| 12132 | border: 0;
|
| 12133 | -webkit-appearance: none;
|
| 12134 | -moz-appearance: none;
|
| 12135 | appearance: none;
|
| 12136 | background: none;
|
| 12137 | cursor: pointer;
|
| 12138 | text-align: start;
|
| 12139 | outline: 2px solid transparent;
|
| 12140 | outline-offset: -2px;
|
| 12141 | position: absolute;
|
| 12142 | inset-block-start: 0;
|
| 12143 | inset-inline-end: 0;
|
| 12144 | }
|
| 12145 | .cds--search-close *,
|
| 12146 | .cds--search-close *::before,
|
| 12147 | .cds--search-close *::after {
|
| 12148 | box-sizing: inherit;
|
| 12149 | }
|
| 12150 | .cds--search-close::-moz-focus-inner {
|
| 12151 | border: 0;
|
| 12152 | }
|
| 12153 | .cds--search-close::before {
|
| 12154 | position: absolute;
|
| 12155 | display: block;
|
| 12156 | background-color: var(--cds-field);
|
| 12157 | block-size: calc(100% - 2px);
|
| 12158 | content: "";
|
| 12159 | inline-size: 2px;
|
| 12160 | inset-block-start: 0.0625rem;
|
| 12161 | inset-inline-start: 0;
|
| 12162 | transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 12163 | }
|
| 12164 | @media screen and (prefers-reduced-motion: reduce) {
|
| 12165 | .cds--search-close::before {
|
| 12166 | transition: none;
|
| 12167 | }
|
| 12168 | }
|
| 12169 | .cds--search-close:hover {
|
| 12170 | border-block-end: 1px solid var(--cds-border-strong);
|
| 12171 | }
|
| 12172 | .cds--search-close:hover::before {
|
| 12173 | background-color: var(--cds-field-hover);
|
| 12174 | }
|
| 12175 |
|
| 12176 | .cds--search-button {
|
| 12177 | flex-shrink: 0;
|
| 12178 | background-color: var(--cds-field);
|
| 12179 | margin-inline-start: 0.125rem;
|
| 12180 | }
|
| 12181 | .cds--search-button svg {
|
| 12182 | fill: currentColor;
|
| 12183 | vertical-align: middle;
|
| 12184 | }
|
| 12185 |
|
| 12186 | .cds--search-close svg {
|
| 12187 | fill: inherit;
|
| 12188 | }
|
| 12189 |
|
| 12190 | .cds--search-close,
|
| 12191 | .cds--search-button {
|
| 12192 | display: flex;
|
| 12193 | align-items: center;
|
| 12194 | justify-content: center;
|
| 12195 | border-width: 1px 0;
|
| 12196 | border-style: solid;
|
| 12197 | border-color: transparent;
|
| 12198 | block-size: 2.5rem;
|
| 12199 | cursor: pointer;
|
| 12200 | fill: var(--cds-icon-primary, #161616);
|
| 12201 | inline-size: 2.5rem;
|
| 12202 | opacity: 1;
|
| 12203 | transition: opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 110ms cubic-bezier(0.2, 0, 0.38, 0.9), border 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 12204 | visibility: inherit;
|
| 12205 | }
|
| 12206 | .cds--search-close:hover,
|
| 12207 | .cds--search-button:hover {
|
| 12208 | background-color: var(--cds-field-hover);
|
| 12209 | }
|
| 12210 | .cds--search-close:focus,
|
| 12211 | .cds--search-button:focus {
|
| 12212 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 12213 | outline-offset: -2px;
|
| 12214 | }
|
| 12215 | @media screen and (prefers-contrast) {
|
| 12216 | .cds--search-close:focus,
|
| 12217 | .cds--search-button:focus {
|
| 12218 | outline-style: dotted;
|
| 12219 | }
|
| 12220 | }
|
| 12221 | .cds--search-close:active,
|
| 12222 | .cds--search-button:active {
|
| 12223 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 12224 | outline-offset: -2px;
|
| 12225 | background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
|
| 12226 | }
|
| 12227 | @media screen and (prefers-contrast) {
|
| 12228 | .cds--search-close:active,
|
| 12229 | .cds--search-button:active {
|
| 12230 | outline-style: dotted;
|
| 12231 | }
|
| 12232 | }
|
| 12233 |
|
| 12234 | .cds--search--disabled .cds--search-close,
|
| 12235 | .cds--search--disabled.cds--search--expandable .cds--search-magnifier {
|
| 12236 | cursor: not-allowed;
|
| 12237 | outline: none;
|
| 12238 | }
|
| 12239 | .cds--search--disabled .cds--search-close:hover,
|
| 12240 | .cds--search--disabled.cds--search--expandable .cds--search-magnifier:hover {
|
| 12241 | background-color: transparent;
|
| 12242 | border-block-end-color: transparent;
|
| 12243 | }
|
| 12244 | .cds--search--disabled .cds--search-close:hover::before,
|
| 12245 | .cds--search--disabled.cds--search--expandable .cds--search-magnifier:hover::before {
|
| 12246 | background-color: transparent;
|
| 12247 | }
|
| 12248 |
|
| 12249 | .cds--search--disabled svg {
|
| 12250 | fill: var(--cds-icon-on-color-disabled, #8d8d8d);
|
| 12251 | }
|
| 12252 |
|
| 12253 | .cds--search-close:focus::before,
|
| 12254 | .cds--search-close:active::before {
|
| 12255 | background-color: var(--cds-focus, #0f62fe);
|
| 12256 | }
|
| 12257 |
|
| 12258 | .cds--search-input:focus ~ .cds--search-close:hover {
|
| 12259 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 12260 | outline-offset: -2px;
|
| 12261 | }
|
| 12262 | @media screen and (prefers-contrast) {
|
| 12263 | .cds--search-input:focus ~ .cds--search-close:hover {
|
| 12264 | outline-style: dotted;
|
| 12265 | }
|
| 12266 | }
|
| 12267 |
|
| 12268 | .cds--search--sm .cds--search-close,
|
| 12269 | .cds--search--sm ~ .cds--search-button, .cds--search--sm.cds--search--expandable, .cds--search--sm.cds--search--expandable .cds--search-magnifier {
|
| 12270 | block-size: 2rem;
|
| 12271 | inline-size: 2rem;
|
| 12272 | }
|
| 12273 | .cds--search--sm.cds--search--expandable .cds--search-input::-moz-placeholder {
|
| 12274 | padding: 0 2rem;
|
| 12275 | }
|
| 12276 | .cds--search--sm.cds--search--expandable .cds--search-input::placeholder {
|
| 12277 | padding: 0 2rem;
|
| 12278 | }
|
| 12279 |
|
| 12280 | .cds--search--md .cds--search-close,
|
| 12281 | .cds--search--md ~ .cds--search-button, .cds--search--md.cds--search--expandable, .cds--search--md.cds--search--expandable .cds--search-magnifier {
|
| 12282 | block-size: 2.5rem;
|
| 12283 | inline-size: 2.5rem;
|
| 12284 | }
|
| 12285 | .cds--search--md.cds--search--expandable .cds--search-input::-moz-placeholder {
|
| 12286 | padding: 0 2.5rem;
|
| 12287 | }
|
| 12288 | .cds--search--md.cds--search--expandable .cds--search-input::placeholder {
|
| 12289 | padding: 0 2.5rem;
|
| 12290 | }
|
| 12291 |
|
| 12292 | .cds--search--lg .cds--search-close,
|
| 12293 | .cds--search--lg ~ .cds--search-button, .cds--search--lg.cds--search--expandable, .cds--search--lg.cds--search--expandable .cds--search-magnifier {
|
| 12294 | block-size: 3rem;
|
| 12295 | inline-size: 3rem;
|
| 12296 | }
|
| 12297 | .cds--search--lg.cds--search--expandable .cds--search-input::-moz-placeholder {
|
| 12298 | padding: 0 3rem;
|
| 12299 | }
|
| 12300 | .cds--search--lg.cds--search--expandable .cds--search-input::placeholder {
|
| 12301 | padding: 0 3rem;
|
| 12302 | }
|
| 12303 |
|
| 12304 | .cds--search-close--hidden {
|
| 12305 | opacity: 0;
|
| 12306 | visibility: hidden;
|
| 12307 | }
|
| 12308 |
|
| 12309 | .cds--search--lg.cds--skeleton .cds--search-input,
|
| 12310 | .cds--search--md.cds--skeleton .cds--search-input,
|
| 12311 | .cds--search--sm.cds--skeleton .cds--search-input {
|
| 12312 | position: relative;
|
| 12313 | padding: 0;
|
| 12314 | border: none;
|
| 12315 | background: var(--cds-skeleton-background, #e8e8e8);
|
| 12316 | box-shadow: none;
|
| 12317 | pointer-events: none;
|
| 12318 | inline-size: 100%;
|
| 12319 | }
|
| 12320 | .cds--search--lg.cds--skeleton .cds--search-input:hover, .cds--search--lg.cds--skeleton .cds--search-input:focus, .cds--search--lg.cds--skeleton .cds--search-input:active,
|
| 12321 | .cds--search--md.cds--skeleton .cds--search-input:hover,
|
| 12322 | .cds--search--md.cds--skeleton .cds--search-input:focus,
|
| 12323 | .cds--search--md.cds--skeleton .cds--search-input:active,
|
| 12324 | .cds--search--sm.cds--skeleton .cds--search-input:hover,
|
| 12325 | .cds--search--sm.cds--skeleton .cds--search-input:focus,
|
| 12326 | .cds--search--sm.cds--skeleton .cds--search-input:active {
|
| 12327 | border: none;
|
| 12328 | cursor: default;
|
| 12329 | outline: none;
|
| 12330 | }
|
| 12331 | .cds--search--lg.cds--skeleton .cds--search-input::before,
|
| 12332 | .cds--search--md.cds--skeleton .cds--search-input::before,
|
| 12333 | .cds--search--sm.cds--skeleton .cds--search-input::before {
|
| 12334 | position: absolute;
|
| 12335 | animation: 3000ms ease-in-out cds--skeleton infinite;
|
| 12336 | background: var(--cds-skeleton-element, #c6c6c6);
|
| 12337 | block-size: 100%;
|
| 12338 | content: "";
|
| 12339 | inline-size: 100%;
|
| 12340 | will-change: transform-origin, transform, opacity;
|
| 12341 | }
|
| 12342 | @media (prefers-reduced-motion: reduce) {
|
| 12343 | .cds--search--lg.cds--skeleton .cds--search-input::before,
|
| 12344 | .cds--search--md.cds--skeleton .cds--search-input::before,
|
| 12345 | .cds--search--sm.cds--skeleton .cds--search-input::before {
|
| 12346 | animation: none;
|
| 12347 | }
|
| 12348 | }
|
| 12349 | .cds--search--lg.cds--skeleton .cds--search-input::-moz-placeholder, .cds--search--md.cds--skeleton .cds--search-input::-moz-placeholder, .cds--search--sm.cds--skeleton .cds--search-input::-moz-placeholder {
|
| 12350 | color: transparent;
|
| 12351 | }
|
| 12352 | .cds--search--lg.cds--skeleton .cds--search-input::placeholder,
|
| 12353 | .cds--search--md.cds--skeleton .cds--search-input::placeholder,
|
| 12354 | .cds--search--sm.cds--skeleton .cds--search-input::placeholder {
|
| 12355 | color: transparent;
|
| 12356 | }
|
| 12357 |
|
| 12358 | .cds--search--expandable {
|
| 12359 | transition: width 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 12360 | }
|
| 12361 |
|
| 12362 | .cds--search--expandable.cds--search--expanded {
|
| 12363 | inline-size: 100%;
|
| 12364 | }
|
| 12365 |
|
| 12366 | .cds--search--expandable .cds--search-input {
|
| 12367 | padding: 0;
|
| 12368 | inline-size: 0;
|
| 12369 | transition: padding 70ms cubic-bezier(0.2, 0, 0.38, 0.9), width 0s linear 70ms;
|
| 12370 | }
|
| 12371 | .cds--search--expandable .cds--search-input::-moz-placeholder {
|
| 12372 | position: relative;
|
| 12373 | opacity: 0;
|
| 12374 | transition-duration: 70ms;
|
| 12375 | -moz-transition-property: padding, opacity;
|
| 12376 | transition-property: padding, opacity;
|
| 12377 | transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 12378 | }
|
| 12379 | .cds--search--expandable .cds--search-input::placeholder {
|
| 12380 | position: relative;
|
| 12381 | opacity: 0;
|
| 12382 | transition-duration: 70ms;
|
| 12383 | transition-property: padding, opacity;
|
| 12384 | transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 12385 | }
|
| 12386 |
|
| 12387 | .cds--search--expandable.cds--search--expanded .cds--search-input {
|
| 12388 | inline-size: 100%;
|
| 12389 | transition: padding 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 12390 | }
|
| 12391 | .cds--search--expandable.cds--search--expanded .cds--search-input::-moz-placeholder {
|
| 12392 | position: relative;
|
| 12393 | padding: 0;
|
| 12394 | opacity: 1;
|
| 12395 | }
|
| 12396 | .cds--search--expandable.cds--search--expanded .cds--search-input::placeholder {
|
| 12397 | position: relative;
|
| 12398 | padding: 0;
|
| 12399 | opacity: 1;
|
| 12400 | }
|
| 12401 |
|
| 12402 | .cds--search--expandable .cds--search-magnifier {
|
| 12403 | position: absolute;
|
| 12404 | cursor: pointer;
|
| 12405 | }
|
| 12406 | .cds--search--expandable .cds--search-magnifier:focus {
|
| 12407 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 12408 | }
|
| 12409 |
|
| 12410 | .cds--search--expandable .cds--search-magnifier:hover {
|
| 12411 | background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
|
| 12412 | }
|
| 12413 |
|
| 12414 | .cds--search--expandable.cds--search--expanded .cds--search-magnifier {
|
| 12415 | pointer-events: none;
|
| 12416 | }
|
| 12417 |
|
| 12418 | .cds--search--expandable .cds--search-magnifier-icon {
|
| 12419 | fill: var(--cds-icon-primary, #161616);
|
| 12420 | }
|
| 12421 |
|
| 12422 | .cds--search--expandable.cds--search--expanded .cds--search-magnifier-icon {
|
| 12423 | fill: var(--cds-icon-secondary, #525252);
|
| 12424 | }
|
| 12425 |
|
| 12426 | .cds--search--expandable.cds--search--disabled svg {
|
| 12427 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 12428 | }
|
| 12429 |
|
| 12430 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 12431 | .cds--search-close svg,
|
| 12432 | .cds--search-magnifier-icon {
|
| 12433 | fill: ButtonText;
|
| 12434 | }
|
| 12435 | }
|
| 12436 |
|
| 12437 | .cds--table-toolbar {
|
| 12438 | position: relative;
|
| 12439 | z-index: 1;
|
| 12440 | display: flex;
|
| 12441 | background-color: var(--cds-layer);
|
| 12442 | inline-size: 100%;
|
| 12443 | min-block-size: 3rem;
|
| 12444 | }
|
| 12445 |
|
| 12446 | .cds--toolbar-content {
|
| 12447 | display: flex;
|
| 12448 | justify-content: flex-end;
|
| 12449 | block-size: 3rem;
|
| 12450 | inline-size: 100%;
|
| 12451 | transform: translate3d(0, 0, 0);
|
| 12452 | transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), clip-path 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 12453 | }
|
| 12454 |
|
| 12455 | .cds--batch-actions ~ .cds--toolbar-content {
|
| 12456 | clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
|
| 12457 | }
|
| 12458 |
|
| 12459 | .cds--toolbar-content .cds--search .cds--search-input {
|
| 12460 | padding: 0 3rem;
|
| 12461 | background-color: transparent;
|
| 12462 | block-size: 3rem;
|
| 12463 | }
|
| 12464 |
|
| 12465 | .cds--toolbar-content .cds--overflow-menu {
|
| 12466 | block-size: 3rem;
|
| 12467 | inline-size: 3rem;
|
| 12468 | }
|
| 12469 |
|
| 12470 | .cds--batch-actions ~ .cds--toolbar-search-container {
|
| 12471 | display: flex;
|
| 12472 | align-items: center;
|
| 12473 | opacity: 1;
|
| 12474 | transition: opacity 110ms;
|
| 12475 | }
|
| 12476 |
|
| 12477 | .cds--toolbar-search-container-expandable {
|
| 12478 | position: relative;
|
| 12479 | block-size: 3rem;
|
| 12480 | box-shadow: none;
|
| 12481 | cursor: pointer;
|
| 12482 | inline-size: 3rem;
|
| 12483 | transition: width 300ms cubic-bezier(0.5, 0, 0.1, 1), background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
|
| 12484 | }
|
| 12485 | .cds--toolbar-search-container-expandable:hover {
|
| 12486 | background-color: var(--cds-field-hover);
|
| 12487 | }
|
| 12488 |
|
| 12489 | .cds--search.cds--toolbar-search-container-expandable {
|
| 12490 | inline-size: 3rem;
|
| 12491 | }
|
| 12492 |
|
| 12493 | .cds--toolbar-search-container-expandable .cds--search-input {
|
| 12494 | block-size: 100%;
|
| 12495 | cursor: pointer;
|
| 12496 | opacity: 0;
|
| 12497 | }
|
| 12498 |
|
| 12499 | .cds--toolbar-search-container-expandable:not(.cds--toolbar-search-container-active) .cds--search-input {
|
| 12500 | padding: 0;
|
| 12501 | }
|
| 12502 |
|
| 12503 | .cds--toolbar-search-container-disabled .cds--search-input {
|
| 12504 | cursor: not-allowed;
|
| 12505 | }
|
| 12506 |
|
| 12507 | .cds--toolbar-search-container-expandable.cds--search .cds--label {
|
| 12508 | visibility: hidden;
|
| 12509 | }
|
| 12510 |
|
| 12511 | .cds--toolbar-search-container-expandable.cds--search .cds--search-close {
|
| 12512 | block-size: 3rem;
|
| 12513 | inline-size: 3rem;
|
| 12514 | }
|
| 12515 | .cds--toolbar-search-container-expandable.cds--search .cds--search-close::before {
|
| 12516 | background-color: var(--cds-field-hover);
|
| 12517 | block-size: calc(100% - 0.25rem);
|
| 12518 | inset-block-start: 0.125rem;
|
| 12519 | }
|
| 12520 |
|
| 12521 | .cds--toolbar-search-container-expandable.cds--search .cds--search-close:focus::before {
|
| 12522 | background-color: var(--cds-focus, #0f62fe);
|
| 12523 | }
|
| 12524 |
|
| 12525 | .cds--table-toolbar .cds--search--lg .cds--search-magnifier-icon {
|
| 12526 | inset-inline-start: 0;
|
| 12527 | }
|
| 12528 |
|
| 12529 | .cds--table-toolbar:not(.cds--table-toolbar--sm) .cds--toolbar-search-container-persistent.cds--search--lg .cds--search-magnifier-icon {
|
| 12530 | inset-inline-start: 1rem;
|
| 12531 | }
|
| 12532 |
|
| 12533 | .cds--table-toolbar.cds--table-toolbar--sm .cds--search--sm:not(.cds--toolbar-search-container-active):not(.cds--toolbar-search-container-persistent) .cds--search-magnifier-icon {
|
| 12534 | inset-inline-start: 0;
|
| 12535 | }
|
| 12536 |
|
| 12537 | .cds--table-toolbar.cds--table-toolbar--sm .cds--search--sm.cds--toolbar-search-container-active .cds--search-magnifier-icon {
|
| 12538 | inset-inline-start: 0.5rem;
|
| 12539 | }
|
| 12540 |
|
| 12541 | .cds--table-toolbar .cds--toolbar-search-container-persistent.cds--search--sm .cds--search-magnifier-icon {
|
| 12542 | inset-inline-start: 0.5rem;
|
| 12543 | }
|
| 12544 |
|
| 12545 | .cds--toolbar-search-container-expandable .cds--search-magnifier-icon {
|
| 12546 | padding: 1rem;
|
| 12547 | block-size: 3rem;
|
| 12548 | inline-size: 3rem;
|
| 12549 | }
|
| 12550 |
|
| 12551 | .cds--toolbar-search-container-expandable.cds--search--disabled .cds--search-magnifier-icon {
|
| 12552 | background-color: var(--cds-layer);
|
| 12553 | cursor: not-allowed;
|
| 12554 | transition: background-color none;
|
| 12555 | }
|
| 12556 |
|
| 12557 | .cds--toolbar-search-container-active .cds--search-magnifier-icon:focus,
|
| 12558 | .cds--toolbar-search-container-active .cds--search-magnifier-icon:active,
|
| 12559 | .cds--toolbar-search-container-active .cds--search-magnifier-icon:hover {
|
| 12560 | border: none;
|
| 12561 | background-color: transparent;
|
| 12562 | outline: none;
|
| 12563 | }
|
| 12564 |
|
| 12565 | .cds--toolbar-search-container-active.cds--search {
|
| 12566 | inline-size: 100%;
|
| 12567 | }
|
| 12568 |
|
| 12569 | .cds--toolbar-search-container-active .cds--search-input {
|
| 12570 | opacity: 1;
|
| 12571 | }
|
| 12572 |
|
| 12573 | .cds--toolbar-search-container-active .cds--label,
|
| 12574 | .cds--toolbar-search-container-active .cds--search-input {
|
| 12575 | padding: 0 3rem;
|
| 12576 | cursor: text;
|
| 12577 | }
|
| 12578 |
|
| 12579 | .cds--toolbar-search-container-active .cds--search-input:focus + .cds--search-close {
|
| 12580 | border: none;
|
| 12581 | box-shadow: none;
|
| 12582 | outline: none;
|
| 12583 | }
|
| 12584 |
|
| 12585 | .cds--toolbar-search-container-active .cds--search-input:not(:-moz-placeholder-shown) {
|
| 12586 | border: none;
|
| 12587 | background-color: var(--cds-field-hover);
|
| 12588 | }
|
| 12589 |
|
| 12590 | .cds--toolbar-search-container-active .cds--search-input:not(:placeholder-shown) {
|
| 12591 | border: none;
|
| 12592 | background-color: var(--cds-field-hover);
|
| 12593 | }
|
| 12594 |
|
| 12595 | .cds--toolbar-search-container-persistent .cds--search-close,
|
| 12596 | .cds--toolbar-search-container-persistent .cds--search-close:hover,
|
| 12597 | .cds--toolbar-search-container-active .cds--search-close,
|
| 12598 | .cds--toolbar-search-container-active .cds--search-close:hover {
|
| 12599 | border: none;
|
| 12600 | background-color: transparent;
|
| 12601 | }
|
| 12602 |
|
| 12603 | .cds--toolbar-search-container-persistent .cds--search-close::before {
|
| 12604 | display: none;
|
| 12605 | }
|
| 12606 |
|
| 12607 | .cds--overflow-menu.cds--toolbar-action {
|
| 12608 | box-sizing: border-box;
|
| 12609 | padding: 0;
|
| 12610 | border: 0;
|
| 12611 | margin: 0;
|
| 12612 | font-family: inherit;
|
| 12613 | font-size: 100%;
|
| 12614 | vertical-align: baseline;
|
| 12615 | display: inline-block;
|
| 12616 | padding: 0;
|
| 12617 | border: 0;
|
| 12618 | -webkit-appearance: none;
|
| 12619 | -moz-appearance: none;
|
| 12620 | appearance: none;
|
| 12621 | background: none;
|
| 12622 | cursor: pointer;
|
| 12623 | text-align: start;
|
| 12624 | inline-size: 100%;
|
| 12625 | display: flex;
|
| 12626 | padding: 1rem;
|
| 12627 | block-size: 3rem;
|
| 12628 | cursor: pointer;
|
| 12629 | inline-size: 3rem;
|
| 12630 | transition: background 110ms cubic-bezier(0, 0, 0.38, 0.9);
|
| 12631 | }
|
| 12632 | .cds--overflow-menu.cds--toolbar-action *,
|
| 12633 | .cds--overflow-menu.cds--toolbar-action *::before,
|
| 12634 | .cds--overflow-menu.cds--toolbar-action *::after {
|
| 12635 | box-sizing: inherit;
|
| 12636 | }
|
| 12637 | .cds--overflow-menu.cds--toolbar-action::-moz-focus-inner {
|
| 12638 | border: 0;
|
| 12639 | }
|
| 12640 |
|
| 12641 | .cds--toolbar-action {
|
| 12642 | box-sizing: border-box;
|
| 12643 | padding: 0;
|
| 12644 | border: 0;
|
| 12645 | margin: 0;
|
| 12646 | font-family: inherit;
|
| 12647 | font-size: 100%;
|
| 12648 | vertical-align: baseline;
|
| 12649 | display: inline-block;
|
| 12650 | padding: 0;
|
| 12651 | border: 0;
|
| 12652 | -webkit-appearance: none;
|
| 12653 | -moz-appearance: none;
|
| 12654 | appearance: none;
|
| 12655 | background: none;
|
| 12656 | cursor: pointer;
|
| 12657 | text-align: start;
|
| 12658 | inline-size: 100%;
|
| 12659 | display: flex;
|
| 12660 | block-size: 3rem;
|
| 12661 | cursor: pointer;
|
| 12662 | inline-size: 3rem;
|
| 12663 | transition: background 110ms cubic-bezier(0, 0, 0.38, 0.9);
|
| 12664 | }
|
| 12665 | .cds--toolbar-action *,
|
| 12666 | .cds--toolbar-action *::before,
|
| 12667 | .cds--toolbar-action *::after {
|
| 12668 | box-sizing: inherit;
|
| 12669 | }
|
| 12670 | .cds--toolbar-action::-moz-focus-inner {
|
| 12671 | border: 0;
|
| 12672 | }
|
| 12673 |
|
| 12674 | .cds--toolbar-action:hover:not([disabled]) {
|
| 12675 | background-color: var(--cds-field-hover);
|
| 12676 | }
|
| 12677 |
|
| 12678 | .cds--toolbar-action[aria-expanded=true],
|
| 12679 | .cds--toolbar-action:hover[aria-expanded=true] {
|
| 12680 | background-color: var(--cds-layer-02, #ffffff);
|
| 12681 | }
|
| 12682 |
|
| 12683 | .cds--toolbar-action[disabled] {
|
| 12684 | cursor: not-allowed;
|
| 12685 | }
|
| 12686 |
|
| 12687 | .cds--toolbar-action[disabled] .cds--toolbar-action__icon {
|
| 12688 | cursor: not-allowed;
|
| 12689 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 12690 | }
|
| 12691 |
|
| 12692 | .cds--toolbar-action:focus:not([disabled]),
|
| 12693 | .cds--toolbar-action:active:not([disabled]) {
|
| 12694 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 12695 | outline-offset: -2px;
|
| 12696 | }
|
| 12697 | @media screen and (prefers-contrast) {
|
| 12698 | .cds--toolbar-action:focus:not([disabled]),
|
| 12699 | .cds--toolbar-action:active:not([disabled]) {
|
| 12700 | outline-style: dotted;
|
| 12701 | }
|
| 12702 | }
|
| 12703 | .cds--toolbar-action:focus:not([disabled]).cds--toolbar-search-container-expandable,
|
| 12704 | .cds--toolbar-action:active:not([disabled]).cds--toolbar-search-container-expandable {
|
| 12705 | outline: none;
|
| 12706 | }
|
| 12707 |
|
| 12708 | .cds--toolbar-action ~ .cds--btn {
|
| 12709 | margin: 0;
|
| 12710 | max-inline-size: none;
|
| 12711 | white-space: nowrap;
|
| 12712 | }
|
| 12713 |
|
| 12714 | .cds--overflow-menu--data-table {
|
| 12715 | block-size: 3rem;
|
| 12716 | }
|
| 12717 |
|
| 12718 | .cds--toolbar-action__icon {
|
| 12719 | block-size: 1rem;
|
| 12720 | fill: var(--cds-icon-primary, #161616);
|
| 12721 | inline-size: auto;
|
| 12722 | max-inline-size: 1rem;
|
| 12723 | }
|
| 12724 |
|
| 12725 | .cds--toolbar-action__menu,
|
| 12726 | .cds--toolbar-action__menu.cds--overflow-menu-options::after {
|
| 12727 | background-color: var(--cds-layer-02, #ffffff);
|
| 12728 | }
|
| 12729 |
|
| 12730 | .cds--toolbar-search-container-persistent {
|
| 12731 | position: relative;
|
| 12732 | block-size: 3rem;
|
| 12733 | inline-size: 100%;
|
| 12734 | opacity: 1;
|
| 12735 | }
|
| 12736 |
|
| 12737 | .cds--toolbar-search-container-persistent + .cds--toolbar-content {
|
| 12738 | position: relative;
|
| 12739 | inline-size: auto;
|
| 12740 | }
|
| 12741 |
|
| 12742 | .cds--toolbar-search-container-persistent .cds--search {
|
| 12743 | position: initial;
|
| 12744 | }
|
| 12745 |
|
| 12746 | .cds--toolbar-search-container-persistent .cds--search-magnifier-icon {
|
| 12747 | inset-inline-start: 1rem;
|
| 12748 | }
|
| 12749 |
|
| 12750 | .cds--toolbar-search-container-persistent .cds--search-input {
|
| 12751 | padding: 0 3rem;
|
| 12752 | border: none;
|
| 12753 | block-size: 3rem;
|
| 12754 | }
|
| 12755 |
|
| 12756 | .cds--toolbar-search-container-persistent .cds--search-input:focus:not([disabled]) {
|
| 12757 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 12758 | outline-offset: -2px;
|
| 12759 | }
|
| 12760 | @media screen and (prefers-contrast) {
|
| 12761 | .cds--toolbar-search-container-persistent .cds--search-input:focus:not([disabled]) {
|
| 12762 | outline-style: dotted;
|
| 12763 | }
|
| 12764 | }
|
| 12765 |
|
| 12766 | .cds--toolbar-search-container-persistent .cds--search-input:hover:not([disabled]) {
|
| 12767 | background-color: var(--cds-field-hover);
|
| 12768 | }
|
| 12769 |
|
| 12770 | .cds--toolbar-search-container-persistent .cds--search-input:not(:-moz-placeholder-shown) {
|
| 12771 | background-color: var(--cds-field-hover);
|
| 12772 | }
|
| 12773 |
|
| 12774 | .cds--toolbar-search-container-persistent .cds--search-input:active:not([disabled]),
|
| 12775 | .cds--toolbar-search-container-persistent .cds--search-input:not(:placeholder-shown) {
|
| 12776 | background-color: var(--cds-field-hover);
|
| 12777 | }
|
| 12778 |
|
| 12779 | .cds--toolbar-search-container-persistent .cds--search-close {
|
| 12780 | block-size: 3rem;
|
| 12781 | inline-size: 3rem;
|
| 12782 | }
|
| 12783 |
|
| 12784 | .cds--batch-actions--active ~ .cds--toolbar-search-container,
|
| 12785 | .cds--batch-actions--active ~ .cds--toolbar-content {
|
| 12786 | clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
|
| 12787 | transform: translate3d(0, 48px, 0);
|
| 12788 | transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), clip-path 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 12789 | }
|
| 12790 |
|
| 12791 | .cds--batch-actions {
|
| 12792 | position: absolute;
|
| 12793 | display: flex;
|
| 12794 | align-items: center;
|
| 12795 | justify-content: space-between;
|
| 12796 | background-color: var(--cds-background-brand, #0f62fe);
|
| 12797 | clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
|
| 12798 | inset-block-end: 0;
|
| 12799 | inset-inline-end: 0;
|
| 12800 | inset-inline-start: 0;
|
| 12801 | opacity: 0;
|
| 12802 | pointer-events: none;
|
| 12803 | transform: translate3d(0, 48px, 0);
|
| 12804 | transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), clip-path 110ms cubic-bezier(0.2, 0, 0.38, 0.9), opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 12805 | will-change: transform;
|
| 12806 | }
|
| 12807 |
|
| 12808 | .cds--batch-actions:focus {
|
| 12809 | outline: 1px solid var(--cds-focus, #0f62fe);
|
| 12810 | }
|
| 12811 | @media screen and (prefers-contrast) {
|
| 12812 | .cds--batch-actions:focus {
|
| 12813 | outline-style: dotted;
|
| 12814 | }
|
| 12815 | }
|
| 12816 |
|
| 12817 | .cds--batch-actions--active {
|
| 12818 | z-index: 1;
|
| 12819 | clip-path: polygon(0 0, 300% 0, 300% 300%, 0 300%);
|
| 12820 | opacity: 1;
|
| 12821 | pointer-events: all;
|
| 12822 | transform: translate3d(0, 0, 0);
|
| 12823 | }
|
| 12824 |
|
| 12825 | .cds--action-list {
|
| 12826 | display: flex;
|
| 12827 | align-items: center;
|
| 12828 | }
|
| 12829 |
|
| 12830 | .cds--action-list .cds--btn,
|
| 12831 | .cds--batch-summary .cds--btn {
|
| 12832 | color: var(--cds-text-on-color, #ffffff);
|
| 12833 | padding-inline-end: 1rem;
|
| 12834 | padding-inline-start: 1rem;
|
| 12835 | white-space: nowrap;
|
| 12836 | }
|
| 12837 |
|
| 12838 | .cds--action-list .cds--btn:disabled {
|
| 12839 | border-color: transparent;
|
| 12840 | background-color: transparent;
|
| 12841 | color: var(--cds-text-on-color, #ffffff);
|
| 12842 | opacity: 0.5;
|
| 12843 | }
|
| 12844 |
|
| 12845 | .cds--action-list .cds--btn .cds--btn__icon {
|
| 12846 | position: static;
|
| 12847 | fill: var(--cds-icon-on-color, #ffffff);
|
| 12848 | margin-inline-start: 0.5rem;
|
| 12849 | }
|
| 12850 |
|
| 12851 | .cds--action-list .cds--btn .cds--btn__icon .st0 {
|
| 12852 | fill: none;
|
| 12853 | }
|
| 12854 |
|
| 12855 | .cds--batch-download {
|
| 12856 | padding: 0.0625rem;
|
| 12857 | }
|
| 12858 |
|
| 12859 | .cds--action-list .cds--btn--primary:focus::before,
|
| 12860 | .cds--action-list .cds--btn--primary::before,
|
| 12861 | .cds--action-list .cds--btn--primary:focus::after,
|
| 12862 | .cds--action-list .cds--btn--primary::after {
|
| 12863 | display: none;
|
| 12864 | }
|
| 12865 |
|
| 12866 | .cds--action-list .cds--btn--primary:focus,
|
| 12867 | .cds--batch-summary .cds--btn--primary:focus {
|
| 12868 | outline: 2px solid var(--cds-layer);
|
| 12869 | outline-offset: -0.125rem;
|
| 12870 | }
|
| 12871 |
|
| 12872 | .cds--action-list .cds--btn--primary:nth-child(3):hover + .cds--btn--primary.cds--batch-summary__cancel::before,
|
| 12873 | .cds--action-list .cds--btn--primary:nth-child(3):focus + .cds--btn--primary.cds--batch-summary__cancel::before {
|
| 12874 | opacity: 0;
|
| 12875 | }
|
| 12876 |
|
| 12877 | .cds--btn--primary.cds--batch-summary__cancel::before {
|
| 12878 | position: absolute;
|
| 12879 | display: block;
|
| 12880 | border: none;
|
| 12881 | background-color: var(--cds-text-on-color, #ffffff);
|
| 12882 | block-size: 1rem;
|
| 12883 | content: "";
|
| 12884 | inline-size: 0.0625rem;
|
| 12885 | inset-block-start: 0.9375rem;
|
| 12886 | inset-inline-start: 0;
|
| 12887 | opacity: 1;
|
| 12888 | transition: opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 12889 | }
|
| 12890 |
|
| 12891 | .cds--btn--primary.cds--batch-summary__cancel:hover::before {
|
| 12892 | opacity: 0;
|
| 12893 | transition: opacity 250ms cubic-bezier(0.5, 0, 0.1, 1);
|
| 12894 | }
|
| 12895 |
|
| 12896 | .cds--batch-summary {
|
| 12897 | position: sticky;
|
| 12898 | z-index: 100000;
|
| 12899 | display: flex;
|
| 12900 | align-items: center;
|
| 12901 | padding: 0 1rem;
|
| 12902 | background-color: var(--cds-background-brand, #0f62fe);
|
| 12903 | color: var(--cds-text-on-color, #ffffff);
|
| 12904 | inset-inline-start: 0;
|
| 12905 | min-block-size: 3rem;
|
| 12906 | }
|
| 12907 |
|
| 12908 | .cds--batch-summary__scroll {
|
| 12909 | box-shadow: 0.5px 0 0.2px var(--cds-link-primary-hover, #0043ce);
|
| 12910 | }
|
| 12911 |
|
| 12912 | .cds--batch-summary__para {
|
| 12913 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 12914 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 12915 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 12916 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 12917 | }
|
| 12918 |
|
| 12919 | .cds--batch-summary__divider {
|
| 12920 | padding-inline-start: 0.5rem;
|
| 12921 | }
|
| 12922 |
|
| 12923 | .cds--table-toolbar--sm {
|
| 12924 | block-size: 2rem;
|
| 12925 | min-block-size: 2rem;
|
| 12926 | }
|
| 12927 | .cds--table-toolbar--sm .cds--toolbar-search-container-expandable,
|
| 12928 | .cds--table-toolbar--sm .cds--toolbar-search-container-persistent {
|
| 12929 | block-size: 2rem;
|
| 12930 | }
|
| 12931 | .cds--table-toolbar--sm .cds--toolbar-search-container-expandable .cds--search-input,
|
| 12932 | .cds--table-toolbar--sm .cds--toolbar-search-container-persistent .cds--search-input {
|
| 12933 | block-size: 2rem;
|
| 12934 | }
|
| 12935 | .cds--table-toolbar--sm .cds--toolbar-search-container-expandable .cds--search-close,
|
| 12936 | .cds--table-toolbar--sm .cds--toolbar-search-container-persistent .cds--search-close {
|
| 12937 | block-size: 2rem;
|
| 12938 | inline-size: 2rem;
|
| 12939 | }
|
| 12940 | .cds--table-toolbar--sm .cds--toolbar-search-container-expandable .cds--search-magnifier-icon,
|
| 12941 | .cds--table-toolbar--sm .cds--toolbar-search-container-persistent .cds--search-magnifier-icon {
|
| 12942 | padding: 0.5rem;
|
| 12943 | block-size: 2rem;
|
| 12944 | inline-size: 2rem;
|
| 12945 | }
|
| 12946 | .cds--table-toolbar--sm .cds--toolbar-action.cds--toolbar-search-container-persistent {
|
| 12947 | inline-size: 100%;
|
| 12948 | }
|
| 12949 | .cds--table-toolbar--sm .cds--toolbar-search-container-expandable {
|
| 12950 | inline-size: 2rem;
|
| 12951 | }
|
| 12952 | .cds--table-toolbar--sm .cds--toolbar-search-container-expandable .cds--search .cds--search-input {
|
| 12953 | padding: 0 3rem;
|
| 12954 | }
|
| 12955 | .cds--table-toolbar--sm .cds--toolbar-search-container-active {
|
| 12956 | flex: auto;
|
| 12957 | transition: flex 175ms cubic-bezier(0.5, 0, 0.1, 1);
|
| 12958 | }
|
| 12959 | .cds--table-toolbar--sm .cds--toolbar-search-container-active .cds--search-input {
|
| 12960 | visibility: inherit;
|
| 12961 | }
|
| 12962 | .cds--table-toolbar--sm .cds--toolbar-search-container-active .cds--search-input:focus {
|
| 12963 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 12964 | outline-offset: -2px;
|
| 12965 | background-color: var(--cds-field-hover);
|
| 12966 | }
|
| 12967 | @media screen and (prefers-contrast) {
|
| 12968 | .cds--table-toolbar--sm .cds--toolbar-search-container-active .cds--search-input:focus {
|
| 12969 | outline-style: dotted;
|
| 12970 | }
|
| 12971 | }
|
| 12972 | .cds--table-toolbar--sm .cds--toolbar-search-container-active .cds--search-input:not(:-moz-placeholder-shown) {
|
| 12973 | background-color: var(--cds-field-hover);
|
| 12974 | }
|
| 12975 | .cds--table-toolbar--sm .cds--toolbar-search-container-active .cds--search-input:active,
|
| 12976 | .cds--table-toolbar--sm .cds--toolbar-search-container-active .cds--search-input:not(:placeholder-shown) {
|
| 12977 | background-color: var(--cds-field-hover);
|
| 12978 | }
|
| 12979 | .cds--table-toolbar--sm .cds--toolbar-search-container-active .cds--search-magnifier-icon:focus,
|
| 12980 | .cds--table-toolbar--sm .cds--toolbar-search-container-active .cds--search-magnifier-icon:active,
|
| 12981 | .cds--table-toolbar--sm .cds--toolbar-search-container-active .cds--search-magnifier-icon:hover {
|
| 12982 | outline: 2px solid transparent;
|
| 12983 | outline-offset: -2px;
|
| 12984 | background-color: transparent;
|
| 12985 | }
|
| 12986 | .cds--table-toolbar--sm .cds--overflow-menu.cds--toolbar-action {
|
| 12987 | block-size: 2rem;
|
| 12988 | inline-size: 2rem;
|
| 12989 | min-inline-size: 2rem;
|
| 12990 | }
|
| 12991 | .cds--table-toolbar--sm .cds--toolbar-content {
|
| 12992 | block-size: 2rem;
|
| 12993 | }
|
| 12994 | .cds--table-toolbar--sm .cds--toolbar-content .cds--overflow-menu {
|
| 12995 | block-size: 2rem;
|
| 12996 | inline-size: 2rem;
|
| 12997 | }
|
| 12998 |
|
| 12999 | .cds--search--disabled .cds--search-magnifier-icon:hover {
|
| 13000 | background-color: transparent;
|
| 13001 | }
|
| 13002 |
|
| 13003 | .cds--table-toolbar--sm .cds--batch-actions .cds--action-list {
|
| 13004 | block-size: 2rem;
|
| 13005 | }
|
| 13006 |
|
| 13007 | .cds--table-toolbar--sm .cds--toolbar-action {
|
| 13008 | padding: 0.5rem 0;
|
| 13009 | block-size: 2rem;
|
| 13010 | inline-size: 2rem;
|
| 13011 | }
|
| 13012 |
|
| 13013 | .cds--table-toolbar--sm .cds--btn--primary {
|
| 13014 | block-size: 2rem;
|
| 13015 | min-block-size: auto;
|
| 13016 | padding-block-end: 0.375rem;
|
| 13017 | padding-block-start: 0.375rem;
|
| 13018 | }
|
| 13019 |
|
| 13020 | .cds--table-toolbar--sm .cds--btn--primary.cds--batch-summary__cancel::before {
|
| 13021 | inset-block-start: 0.5rem;
|
| 13022 | }
|
| 13023 |
|
| 13024 | .cds--table-toolbar--sm .cds--toolbar-action ~ .cds--btn {
|
| 13025 | overflow: hidden;
|
| 13026 | block-size: 2rem;
|
| 13027 | }
|
| 13028 |
|
| 13029 | .cds--table-toolbar--sm .cds--batch-summary {
|
| 13030 | min-block-size: 2rem;
|
| 13031 | }
|
| 13032 |
|
| 13033 | .cds--data-table tr.cds--parent-row:first-of-type td {
|
| 13034 | border-block-start: 1px solid var(--cds-border-subtle);
|
| 13035 | }
|
| 13036 |
|
| 13037 | .cds--expandable-row--hidden td {
|
| 13038 | padding: 1rem;
|
| 13039 | border-block-start: 0;
|
| 13040 | inline-size: auto;
|
| 13041 | }
|
| 13042 |
|
| 13043 | tr.cds--parent-row:not(.cds--expandable-row) + tr[data-child-row] {
|
| 13044 | block-size: 0;
|
| 13045 | transition: height 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 13046 | }
|
| 13047 |
|
| 13048 | tr.cds--parent-row:not(.cds--expandable-row) + tr[data-child-row] td {
|
| 13049 | border: 0;
|
| 13050 | background-color: var(--cds-layer-hover);
|
| 13051 | padding-block-end: 0;
|
| 13052 | padding-block-start: 0;
|
| 13053 | transition: padding 150ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 13054 | }
|
| 13055 |
|
| 13056 | tr.cds--parent-row:not(.cds--expandable-row) + tr[data-child-row] td .cds--child-row-inner-container {
|
| 13057 | overflow: hidden;
|
| 13058 | max-block-size: 0;
|
| 13059 | }
|
| 13060 |
|
| 13061 | tr.cds--parent-row.cds--expandable-row + tr[data-child-row] {
|
| 13062 | transition: height 150ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 13063 | }
|
| 13064 |
|
| 13065 | tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td {
|
| 13066 | border-block-end: 1px solid var(--cds-border-subtle);
|
| 13067 | padding-inline-start: 3.5rem;
|
| 13068 | transition: padding-bottom 150ms cubic-bezier(0.2, 0, 0.38, 0.9), transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 13069 | }
|
| 13070 |
|
| 13071 | tbody:has(> tr.cds--data-table--slug-row) > tr.cds--expandable-row[data-child-row] td,
|
| 13072 | tbody:has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td {
|
| 13073 | padding-inline-start: 5.5rem;
|
| 13074 | }
|
| 13075 |
|
| 13076 | tbody:has(> tr.cds--data-table--slug-row):has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td {
|
| 13077 | padding-inline-start: 7.5rem;
|
| 13078 | }
|
| 13079 |
|
| 13080 | tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td .cds--child-row-inner-container {
|
| 13081 | max-block-size: 100%;
|
| 13082 | padding-block: 1rem;
|
| 13083 | padding-block-end: 1.5rem;
|
| 13084 | }
|
| 13085 |
|
| 13086 | .cds--parent-row.cds--expandable-row > td,
|
| 13087 | .cds--parent-row.cds--expandable-row + tr[data-child-row] > td {
|
| 13088 | border-block-end: 1px solid var(--cds-border-subtle);
|
| 13089 | box-shadow: 0 1px var(--cds-border-subtle);
|
| 13090 | }
|
| 13091 |
|
| 13092 | .cds--parent-row:not(.cds--expandable-row) + tr[data-child-row] > td {
|
| 13093 | box-shadow: none;
|
| 13094 | }
|
| 13095 |
|
| 13096 | .cds--parent-row.cds--expandable-row > td:first-of-type {
|
| 13097 | box-shadow: none;
|
| 13098 | }
|
| 13099 |
|
| 13100 | tr.cds--parent-row:not(.cds--expandable-row) td,
|
| 13101 | tr.cds--parent-row.cds--expandable-row td,
|
| 13102 | tr.cds--parent-row.cds--expandable-row {
|
| 13103 | transition: height 150ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 13104 | }
|
| 13105 |
|
| 13106 | tr.cds--parent-row:not(.cds--expandable-row):first-of-type:hover td {
|
| 13107 | border-block-end: 1px solid var(--cds-border-subtle);
|
| 13108 | border-block-start: 1px solid var(--cds-border-subtle);
|
| 13109 | }
|
| 13110 |
|
| 13111 | tr.cds--parent-row.cds--expandable-row:hover td {
|
| 13112 | background-color: var(--cds-layer-hover);
|
| 13113 | border-block-end: 1px solid var(--cds-border-subtle);
|
| 13114 | border-block-start: 1px solid var(--cds-border-subtle);
|
| 13115 | color: var(--cds-text-primary, #161616);
|
| 13116 | }
|
| 13117 |
|
| 13118 | tr.cds--parent-row.cds--expandable-row:hover td:first-of-type {
|
| 13119 | border-block-end: 1px solid var(--cds-layer-hover);
|
| 13120 | }
|
| 13121 |
|
| 13122 | tr.cds--parent-row.cds--expandable-row:hover + tr[data-child-row] td {
|
| 13123 | background-color: var(--cds-layer-hover);
|
| 13124 | border-block-end: 1px solid var(--cds-border-subtle);
|
| 13125 | color: var(--cds-text-primary, #161616);
|
| 13126 | }
|
| 13127 |
|
| 13128 | tr.cds--expandable-row--hover + tr[data-child-row] td {
|
| 13129 | border-block-end: 1px solid var(--cds-border-subtle);
|
| 13130 | }
|
| 13131 |
|
| 13132 | tr.cds--expandable-row--hover {
|
| 13133 | background-color: var(--cds-layer-hover);
|
| 13134 | }
|
| 13135 |
|
| 13136 | tr.cds--expandable-row--hover td {
|
| 13137 | background-color: var(--cds-layer-hover);
|
| 13138 | border-block-end: 1px solid var(--cds-border-subtle);
|
| 13139 | border-block-start: 1px solid var(--cds-border-subtle);
|
| 13140 | color: var(--cds-text-primary, #161616);
|
| 13141 | }
|
| 13142 |
|
| 13143 | tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td:first-of-type {
|
| 13144 | border-block-end: 1px solid transparent;
|
| 13145 | }
|
| 13146 |
|
| 13147 | .cds--data-table td.cds--table-expand {
|
| 13148 | border-block-end: 1px solid var(--cds-border-subtle);
|
| 13149 | }
|
| 13150 |
|
| 13151 | .cds--data-table th.cds--table-expand + .cds--table-column-checkbox,
|
| 13152 | .cds--data-table td.cds--table-expand + .cds--table-column-checkbox {
|
| 13153 | padding-inline-end: 0.375rem;
|
| 13154 | padding-inline-start: 0.375rem;
|
| 13155 | }
|
| 13156 |
|
| 13157 | .cds--data-table td.cds--table-expand[data-previous-value=collapsed] + .cds--table-column-checkbox {
|
| 13158 | border-block-end: 1px solid transparent;
|
| 13159 | box-shadow: none;
|
| 13160 | }
|
| 13161 |
|
| 13162 | .cds--data-table th.cds--table-expand + .cds--table-column-checkbox + th,
|
| 13163 | .cds--data-table td.cds--table-expand + .cds--table-column-checkbox + td {
|
| 13164 | padding-inline-start: 0.5rem;
|
| 13165 | }
|
| 13166 |
|
| 13167 | .cds--data-table td.cds--table-expand,
|
| 13168 | .cds--data-table th.cds--table-expand {
|
| 13169 | padding: 0.5rem;
|
| 13170 | padding-inline-end: 0;
|
| 13171 | }
|
| 13172 |
|
| 13173 | .cds--data-table td.cds--table-expand[data-previous-value=collapsed] {
|
| 13174 | border-block-end: 1px solid transparent;
|
| 13175 | }
|
| 13176 |
|
| 13177 | .cds--table-expand[data-previous-value=collapsed] .cds--table-expand__svg {
|
| 13178 | transform: rotate(270deg);
|
| 13179 | transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 13180 | }
|
| 13181 |
|
| 13182 | .cds--table-expand__button {
|
| 13183 | box-sizing: border-box;
|
| 13184 | padding: 0;
|
| 13185 | border: 0;
|
| 13186 | margin: 0;
|
| 13187 | font-family: inherit;
|
| 13188 | font-size: 100%;
|
| 13189 | vertical-align: baseline;
|
| 13190 | display: inline-block;
|
| 13191 | padding: 0;
|
| 13192 | border: 0;
|
| 13193 | -webkit-appearance: none;
|
| 13194 | -moz-appearance: none;
|
| 13195 | appearance: none;
|
| 13196 | background: none;
|
| 13197 | cursor: pointer;
|
| 13198 | text-align: start;
|
| 13199 | display: inline-flex;
|
| 13200 | align-items: center;
|
| 13201 | justify-content: center;
|
| 13202 | padding: 0 0.5rem;
|
| 13203 | block-size: calc(100% + 1px);
|
| 13204 | inline-size: 100%;
|
| 13205 | vertical-align: inherit;
|
| 13206 | }
|
| 13207 | .cds--table-expand__button *,
|
| 13208 | .cds--table-expand__button *::before,
|
| 13209 | .cds--table-expand__button *::after {
|
| 13210 | box-sizing: inherit;
|
| 13211 | }
|
| 13212 | .cds--table-expand__button::-moz-focus-inner {
|
| 13213 | border: 0;
|
| 13214 | }
|
| 13215 |
|
| 13216 | .cds--data-table--top-aligned-body td .cds--table-expand__button,
|
| 13217 | .cds--data-table--top-aligned-header th .cds--table-expand__button {
|
| 13218 | align-items: start;
|
| 13219 | block-size: 2rem;
|
| 13220 | padding-block-start: 0.5rem;
|
| 13221 | }
|
| 13222 |
|
| 13223 | .cds--data-table--top-aligned-body.cds--data-table--xs td .cds--table-expand__button,
|
| 13224 | .cds--data-table--top-aligned-header.cds--data-table--xs th .cds--table-expand__button {
|
| 13225 | block-size: 1.5rem;
|
| 13226 | padding-block-start: 0.25rem;
|
| 13227 | }
|
| 13228 |
|
| 13229 | .cds--data-table--top-aligned-body.cds--data-table--md td .cds--table-expand__button,
|
| 13230 | .cds--data-table--top-aligned-header.cds--data-table--md th .cds--table-expand__button {
|
| 13231 | margin-block-start: -0.25rem;
|
| 13232 | padding-block-start: 0.5rem;
|
| 13233 | }
|
| 13234 |
|
| 13235 | .cds--table-expand__button:focus {
|
| 13236 | box-shadow: inset 0 0 0 2px var(--cds-focus, #0f62fe);
|
| 13237 | outline: none;
|
| 13238 | }
|
| 13239 |
|
| 13240 | .cds--table-expand__svg {
|
| 13241 | fill: var(--cds-layer-selected-inverse, #161616);
|
| 13242 | transform: rotate(90deg);
|
| 13243 | transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 13244 | }
|
| 13245 |
|
| 13246 | .cds--data-table--xl .cds--table-expand__button {
|
| 13247 | inline-size: 2rem;
|
| 13248 | }
|
| 13249 |
|
| 13250 | tr.cds--parent-row.cds--expandable-row td.cds--table-expand + td::after {
|
| 13251 | position: absolute;
|
| 13252 | background-color: var(--cds-layer-accent);
|
| 13253 | block-size: 0.0625rem;
|
| 13254 | content: "";
|
| 13255 | inline-size: 0.5rem;
|
| 13256 | inset-block-end: -0.0625rem;
|
| 13257 | inset-inline-start: 0;
|
| 13258 | }
|
| 13259 |
|
| 13260 | tr.cds--parent-row.cds--expandable-row:hover td.cds--table-expand + td::after,
|
| 13261 | tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td.cds--table-expand + td::after {
|
| 13262 | background-color: var(--cds-layer-hover);
|
| 13263 | }
|
| 13264 |
|
| 13265 | tr.cds--parent-row.cds--data-table--selected td.cds--table-expand + td::after {
|
| 13266 | display: none;
|
| 13267 | }
|
| 13268 |
|
| 13269 | .cds--data-table--zebra tbody tr[data-parent-row]:nth-child(4n+3) td,
|
| 13270 | .cds--data-table--zebra tbody tr[data-child-row]:nth-child(4n+4) td {
|
| 13271 | border-block-end: 1px solid var(--cds-layer);
|
| 13272 | }
|
| 13273 |
|
| 13274 | .cds--data-table--zebra tbody tr[data-parent-row]:nth-child(4n+1) td,
|
| 13275 | .cds--data-table--zebra tbody tr[data-child-row]:nth-child(4n+2) td {
|
| 13276 | background-color: var(--cds-layer-accent);
|
| 13277 | border-block-end: 1px solid var(--cds-layer-accent);
|
| 13278 | border-block-start: 1px solid var(--cds-layer-accent);
|
| 13279 | }
|
| 13280 |
|
| 13281 | .cds--data-table--zebra tr.cds--parent-row td,
|
| 13282 | .cds--data-table--zebra tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td {
|
| 13283 | transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9), border-bottom 70ms cubic-bezier(0.2, 0, 0.38, 0.9), border-top 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 13284 | }
|
| 13285 |
|
| 13286 | .cds--data-table--zebra tbody tr[data-parent-row]:hover td,
|
| 13287 | .cds--data-table--zebra tbody tr[data-parent-row]:hover + tr[data-child-row] td,
|
| 13288 | .cds--data-table--zebra tbody tr[data-child-row]:hover td {
|
| 13289 | background-color: var(--cds-layer-hover);
|
| 13290 | border-block-end: 1px solid var(--cds-layer-hover);
|
| 13291 | border-block-start: 1px solid var(--cds-layer-hover);
|
| 13292 | }
|
| 13293 |
|
| 13294 | .cds--data-table--zebra tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td {
|
| 13295 | background-color: var(--cds-layer-hover);
|
| 13296 | border-block-end: 1px solid var(--cds-layer-hover);
|
| 13297 | border-block-start: 1px solid var(--cds-layer-hover);
|
| 13298 | }
|
| 13299 |
|
| 13300 | tr.cds--parent-row.cds--data-table--selected {
|
| 13301 | background-color: var(--cds-layer-selected);
|
| 13302 | }
|
| 13303 |
|
| 13304 | tr.cds--parent-row.cds--data-table--selected:first-of-type td {
|
| 13305 | border-block-start: 1px solid var(--cds-layer-active);
|
| 13306 | box-shadow: 0 1px var(--cds-layer-active);
|
| 13307 | }
|
| 13308 |
|
| 13309 | tr.cds--parent-row.cds--data-table--selected td {
|
| 13310 | border-block-end: 1px solid var(--cds-layer-active);
|
| 13311 | box-shadow: 0 1px var(--cds-layer-active);
|
| 13312 | color: var(--cds-text-primary, #161616);
|
| 13313 | }
|
| 13314 |
|
| 13315 | tr.cds--parent-row.cds--data-table--selected:last-of-type td {
|
| 13316 | border-block-end: 1px solid transparent;
|
| 13317 | box-shadow: 0 1px var(--cds-border-subtle);
|
| 13318 | }
|
| 13319 |
|
| 13320 | tr.cds--parent-row.cds--data-table--selected:not(.cds--expandable-row):hover td {
|
| 13321 | background-color: var(--cds-layer-selected-hover);
|
| 13322 | border-block-end: 1px solid var(--cds-border-subtle);
|
| 13323 | border-block-start: 1px solid var(--cds-layer-selected-hover);
|
| 13324 | box-shadow: 0 1px var(--cds-layer-selected-hover);
|
| 13325 | }
|
| 13326 |
|
| 13327 | tr.cds--parent-row.cds--data-table--selected.cds--expandable-row td,
|
| 13328 | tr.cds--parent-row.cds--data-table--selected.cds--expandable-row td:first-of-type {
|
| 13329 | border-block-end: 1px solid transparent;
|
| 13330 | box-shadow: 0 1px var(--cds-layer-selected);
|
| 13331 | }
|
| 13332 |
|
| 13333 | tr.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td,
|
| 13334 | tr.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td:first-of-type,
|
| 13335 | tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover td,
|
| 13336 | tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover td:first-of-type {
|
| 13337 | background-color: var(--cds-layer-selected-hover);
|
| 13338 | border-block-end: 1px solid transparent;
|
| 13339 | border-block-start: 1px solid var(--cds-layer-selected-hover);
|
| 13340 | box-shadow: 0 1px var(--cds-layer-selected-hover);
|
| 13341 | }
|
| 13342 |
|
| 13343 | tr.cds--parent-row.cds--data-table--selected.cds--expandable-row + tr[data-child-row] td {
|
| 13344 | background-color: var(--cds-layer-hover);
|
| 13345 | border-block-end: 1px solid var(--cds-border-subtle);
|
| 13346 | border-block-start: 1px solid var(--cds-layer-active);
|
| 13347 | box-shadow: 0 1px var(--cds-layer-active);
|
| 13348 | color: var(--cds-text-primary, #161616);
|
| 13349 | }
|
| 13350 |
|
| 13351 | tr.cds--parent-row.cds--data-table--selected.cds--expandable-row + tr[data-child-row]:last-of-type td {
|
| 13352 | box-shadow: inset 0 -1px var(--cds-layer-active);
|
| 13353 | padding-block-end: 1.5rem;
|
| 13354 | }
|
| 13355 |
|
| 13356 | tr.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover + tr[data-child-row] td,
|
| 13357 | tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[data-child-row] td {
|
| 13358 | background-color: var(--cds-layer-selected);
|
| 13359 | }
|
| 13360 |
|
| 13361 | .cds--parent-row .cds--table-column-slug,
|
| 13362 | .cds--parent-row .cds--table-column-slug + td.cds--table-expand[data-previous-value=collapsed] {
|
| 13363 | box-shadow: none;
|
| 13364 | }
|
| 13365 |
|
| 13366 | .cds--parent-row.cds--expandable-row .cds--table-column-slug,
|
| 13367 | .cds--parent-row.cds--expandable-row .cds--table-column-slug + td.cds--table-expand[data-previous-value=collapsed] {
|
| 13368 | border-block-end: 1px solid transparent;
|
| 13369 | }
|
| 13370 |
|
| 13371 | .cds--data-table--slug-row td,
|
| 13372 | .cds--data-table tr.cds--data-table--slug-row:hover td {
|
| 13373 | border-block-start: 1px solid transparent;
|
| 13374 | }
|
| 13375 |
|
| 13376 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 13377 | .cds--table-expand__button:focus .cds--table-expand__svg {
|
| 13378 | color: Highlight;
|
| 13379 | outline: 1px solid Highlight;
|
| 13380 | }
|
| 13381 | }
|
| 13382 |
|
| 13383 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 13384 | .cds--table-expand__svg {
|
| 13385 | fill: ButtonText;
|
| 13386 | }
|
| 13387 | }
|
| 13388 |
|
| 13389 | .cds--data-table.cds--skeleton th {
|
| 13390 | padding-inline-start: 1rem;
|
| 13391 | vertical-align: middle;
|
| 13392 | }
|
| 13393 |
|
| 13394 | .cds--data-table.cds--skeleton th span,
|
| 13395 | .cds--data-table.cds--skeleton td span {
|
| 13396 | position: relative;
|
| 13397 | padding: 0;
|
| 13398 | border: none;
|
| 13399 | background: var(--cds-skeleton-background, #e8e8e8);
|
| 13400 | box-shadow: none;
|
| 13401 | pointer-events: none;
|
| 13402 | display: block;
|
| 13403 | block-size: 1rem;
|
| 13404 | inline-size: 4rem;
|
| 13405 | }
|
| 13406 | .cds--data-table.cds--skeleton th span:hover, .cds--data-table.cds--skeleton th span:focus, .cds--data-table.cds--skeleton th span:active,
|
| 13407 | .cds--data-table.cds--skeleton td span:hover,
|
| 13408 | .cds--data-table.cds--skeleton td span:focus,
|
| 13409 | .cds--data-table.cds--skeleton td span:active {
|
| 13410 | border: none;
|
| 13411 | cursor: default;
|
| 13412 | outline: none;
|
| 13413 | }
|
| 13414 | .cds--data-table.cds--skeleton th span::before,
|
| 13415 | .cds--data-table.cds--skeleton td span::before {
|
| 13416 | position: absolute;
|
| 13417 | animation: 3000ms ease-in-out cds--skeleton infinite;
|
| 13418 | background: var(--cds-skeleton-element, #c6c6c6);
|
| 13419 | block-size: 100%;
|
| 13420 | content: "";
|
| 13421 | inline-size: 100%;
|
| 13422 | will-change: transform-origin, transform, opacity;
|
| 13423 | }
|
| 13424 | @media (prefers-reduced-motion: reduce) {
|
| 13425 | .cds--data-table.cds--skeleton th span::before,
|
| 13426 | .cds--data-table.cds--skeleton td span::before {
|
| 13427 | animation: none;
|
| 13428 | }
|
| 13429 | }
|
| 13430 |
|
| 13431 | .cds--data-table.cds--skeleton tr:hover td {
|
| 13432 | border-color: var(--cds-border-subtle);
|
| 13433 | background: transparent;
|
| 13434 | }
|
| 13435 |
|
| 13436 | .cds--data-table.cds--skeleton tr:hover td:first-of-type,
|
| 13437 | .cds--data-table.cds--skeleton tr:hover td:last-of-type {
|
| 13438 | border-color: var(--cds-border-subtle);
|
| 13439 | }
|
| 13440 |
|
| 13441 | .cds--data-table.cds--skeleton .cds--table-sort {
|
| 13442 | pointer-events: none;
|
| 13443 | }
|
| 13444 |
|
| 13445 | .cds--data-table.cds--skeleton th span {
|
| 13446 | background: var(--cds-skeleton-element, #c6c6c6);
|
| 13447 | }
|
| 13448 |
|
| 13449 | .cds--data-table.cds--skeleton th span::before {
|
| 13450 | background: var(--cds-skeleton-background, #e8e8e8);
|
| 13451 | }
|
| 13452 |
|
| 13453 | .cds--data-table-container.cds--skeleton .cds--data-table-header__title {
|
| 13454 | position: relative;
|
| 13455 | padding: 0;
|
| 13456 | border: none;
|
| 13457 | background: var(--cds-skeleton-background, #e8e8e8);
|
| 13458 | box-shadow: none;
|
| 13459 | pointer-events: none;
|
| 13460 | block-size: 1.5rem;
|
| 13461 | inline-size: 7.5rem;
|
| 13462 | }
|
| 13463 | .cds--data-table-container.cds--skeleton .cds--data-table-header__title:hover, .cds--data-table-container.cds--skeleton .cds--data-table-header__title:focus, .cds--data-table-container.cds--skeleton .cds--data-table-header__title:active {
|
| 13464 | border: none;
|
| 13465 | cursor: default;
|
| 13466 | outline: none;
|
| 13467 | }
|
| 13468 | .cds--data-table-container.cds--skeleton .cds--data-table-header__title::before {
|
| 13469 | position: absolute;
|
| 13470 | animation: 3000ms ease-in-out cds--skeleton infinite;
|
| 13471 | background: var(--cds-skeleton-element, #c6c6c6);
|
| 13472 | block-size: 100%;
|
| 13473 | content: "";
|
| 13474 | inline-size: 100%;
|
| 13475 | will-change: transform-origin, transform, opacity;
|
| 13476 | }
|
| 13477 | @media (prefers-reduced-motion: reduce) {
|
| 13478 | .cds--data-table-container.cds--skeleton .cds--data-table-header__title::before {
|
| 13479 | animation: none;
|
| 13480 | }
|
| 13481 | }
|
| 13482 |
|
| 13483 | .cds--data-table-container.cds--skeleton .cds--data-table-header__description {
|
| 13484 | position: relative;
|
| 13485 | padding: 0;
|
| 13486 | border: none;
|
| 13487 | background: var(--cds-skeleton-background, #e8e8e8);
|
| 13488 | box-shadow: none;
|
| 13489 | pointer-events: none;
|
| 13490 | block-size: 1rem;
|
| 13491 | inline-size: 10rem;
|
| 13492 | margin-block-start: 0.5rem;
|
| 13493 | }
|
| 13494 | .cds--data-table-container.cds--skeleton .cds--data-table-header__description:hover, .cds--data-table-container.cds--skeleton .cds--data-table-header__description:focus, .cds--data-table-container.cds--skeleton .cds--data-table-header__description:active {
|
| 13495 | border: none;
|
| 13496 | cursor: default;
|
| 13497 | outline: none;
|
| 13498 | }
|
| 13499 | .cds--data-table-container.cds--skeleton .cds--data-table-header__description::before {
|
| 13500 | position: absolute;
|
| 13501 | animation: 3000ms ease-in-out cds--skeleton infinite;
|
| 13502 | background: var(--cds-skeleton-element, #c6c6c6);
|
| 13503 | block-size: 100%;
|
| 13504 | content: "";
|
| 13505 | inline-size: 100%;
|
| 13506 | will-change: transform-origin, transform, opacity;
|
| 13507 | }
|
| 13508 | @media (prefers-reduced-motion: reduce) {
|
| 13509 | .cds--data-table-container.cds--skeleton .cds--data-table-header__description::before {
|
| 13510 | animation: none;
|
| 13511 | }
|
| 13512 | }
|
| 13513 |
|
| 13514 | .cds--data-table--sort th,
|
| 13515 | .cds--data-table th[aria-sort] {
|
| 13516 | padding: 0;
|
| 13517 | block-size: 3rem;
|
| 13518 | border-block-end: none;
|
| 13519 | border-block-start: none;
|
| 13520 | }
|
| 13521 |
|
| 13522 | .cds--table-sort__description {
|
| 13523 | display: none;
|
| 13524 | }
|
| 13525 |
|
| 13526 | .cds--table-sort {
|
| 13527 | box-sizing: border-box;
|
| 13528 | padding: 0;
|
| 13529 | border: 0;
|
| 13530 | margin: 0;
|
| 13531 | font-family: inherit;
|
| 13532 | font-size: 100%;
|
| 13533 | vertical-align: baseline;
|
| 13534 | display: inline-block;
|
| 13535 | padding: 0;
|
| 13536 | border: 0;
|
| 13537 | -webkit-appearance: none;
|
| 13538 | -moz-appearance: none;
|
| 13539 | appearance: none;
|
| 13540 | background: none;
|
| 13541 | cursor: pointer;
|
| 13542 | text-align: start;
|
| 13543 | display: flex;
|
| 13544 | align-items: center;
|
| 13545 | justify-content: space-between;
|
| 13546 | background-color: var(--cds-layer-accent);
|
| 13547 | color: var(--cds-text-primary, #161616);
|
| 13548 | font: inherit;
|
| 13549 | inline-size: 100%;
|
| 13550 | line-height: 1;
|
| 13551 | min-block-size: 100%;
|
| 13552 | padding-inline-start: 1rem;
|
| 13553 | text-align: start;
|
| 13554 | transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9), outline 70ms cubic-bezier(0, 0, 0.38, 0.9);
|
| 13555 | }
|
| 13556 | .cds--table-sort *,
|
| 13557 | .cds--table-sort *::before,
|
| 13558 | .cds--table-sort *::after {
|
| 13559 | box-sizing: inherit;
|
| 13560 | }
|
| 13561 | .cds--table-sort::-moz-focus-inner {
|
| 13562 | border: 0;
|
| 13563 | }
|
| 13564 |
|
| 13565 | .cds--table-sort:focus {
|
| 13566 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 13567 | outline-offset: -2px;
|
| 13568 | }
|
| 13569 | @media screen and (prefers-contrast) {
|
| 13570 | .cds--table-sort:focus {
|
| 13571 | outline-style: dotted;
|
| 13572 | }
|
| 13573 | }
|
| 13574 |
|
| 13575 | .cds--table-sort:hover {
|
| 13576 | background: var(--cds-layer-selected-hover);
|
| 13577 | }
|
| 13578 |
|
| 13579 | .cds--table-sort:focus svg,
|
| 13580 | .cds--table-sort:hover svg {
|
| 13581 | opacity: 1;
|
| 13582 | }
|
| 13583 |
|
| 13584 | .cds--data-table.cds--data-table--sort th > .cds--table-header-label {
|
| 13585 | line-height: 1;
|
| 13586 | padding-inline-end: 1rem;
|
| 13587 | padding-inline-start: 1rem;
|
| 13588 | }
|
| 13589 |
|
| 13590 | th .cds--table-sort__flex {
|
| 13591 | display: flex;
|
| 13592 | align-items: center;
|
| 13593 | justify-content: space-between;
|
| 13594 | block-size: 100%;
|
| 13595 | inline-size: 100%;
|
| 13596 | min-block-size: 3rem;
|
| 13597 | }
|
| 13598 |
|
| 13599 | .cds--data-table--top-aligned-header th .cds--table-sort__flex {
|
| 13600 | align-items: start;
|
| 13601 | }
|
| 13602 |
|
| 13603 | .cds--data-table.cds--data-table--top-aligned-header.cds--data-table--lg th.cds--table-sort__header {
|
| 13604 | padding-block-start: 1rem;
|
| 13605 | }
|
| 13606 |
|
| 13607 | .cds--data-table.cds--data-table--top-aligned-header.cds--data-table--sm th.cds--table-sort__header .cds--table-sort__flex .cds--table-header-label,
|
| 13608 | .cds--data-table.cds--data-table--top-aligned-header.cds--data-table--xs th.cds--table-sort__header .cds--table-sort__flex .cds--table-header-label {
|
| 13609 | padding-block-end: 0;
|
| 13610 | padding-block-start: 0;
|
| 13611 | }
|
| 13612 |
|
| 13613 | .cds--data-table.cds--data-table--top-aligned-header.cds--data-table--sm th.cds--table-sort__header {
|
| 13614 | padding-block-end: 0.4375rem;
|
| 13615 | padding-block-start: 0.4375rem;
|
| 13616 | }
|
| 13617 |
|
| 13618 | .cds--data-table.cds--data-table--top-aligned-header.cds--data-table--xs th.cds--table-sort__header {
|
| 13619 | padding-block-end: 0.125rem;
|
| 13620 | padding-block-start: 0.125rem;
|
| 13621 | }
|
| 13622 |
|
| 13623 | .cds--data-table--sort:not(.cds--data-table--xs):not(.cds--data-table--sm):not(.cds--data-table--md):not(.cds--data-table--xl) th .cds--table-sort__flex {
|
| 13624 | |
| 13625 |
|
| 13626 | }
|
| 13627 | @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
|
| 13628 | .cds--data-table--sort:not(.cds--data-table--xs):not(.cds--data-table--sm):not(.cds--data-table--md):not(.cds--data-table--xl) th .cds--table-sort__flex {
|
| 13629 | block-size: 2.99rem;
|
| 13630 | }
|
| 13631 | }
|
| 13632 |
|
| 13633 | .cds--data-table--xs.cds--data-table--sort th .cds--table-sort__flex {
|
| 13634 | min-block-size: 1.5rem;
|
| 13635 | }
|
| 13636 |
|
| 13637 | .cds--data-table--sm.cds--data-table--sort th .cds--table-sort__flex {
|
| 13638 | min-block-size: 2rem;
|
| 13639 | }
|
| 13640 |
|
| 13641 | .cds--data-table--md.cds--data-table--sort th .cds--table-sort__flex {
|
| 13642 | min-block-size: 2.5rem;
|
| 13643 | }
|
| 13644 |
|
| 13645 | .cds--data-table--xl.cds--data-table--sort th .cds--table-sort__flex {
|
| 13646 | align-items: flex-start;
|
| 13647 | min-block-size: 4rem;
|
| 13648 | }
|
| 13649 |
|
| 13650 | .cds--table-sort .cds--table-sort__icon-inactive {
|
| 13651 | display: block;
|
| 13652 | }
|
| 13653 |
|
| 13654 | .cds--table-sort .cds--table-sort__icon {
|
| 13655 | display: none;
|
| 13656 | }
|
| 13657 |
|
| 13658 | .cds--table-sort__icon-unsorted {
|
| 13659 | fill: var(--cds-icon-primary, #161616);
|
| 13660 | inline-size: 1.25rem;
|
| 13661 | margin-inline-end: 0.5rem;
|
| 13662 | margin-inline-start: 0.5rem;
|
| 13663 | min-inline-size: 1rem;
|
| 13664 | opacity: 0;
|
| 13665 | }
|
| 13666 |
|
| 13667 | .cds--table-sort.cds--table-sort--active {
|
| 13668 | background: var(--cds-layer-selected-hover);
|
| 13669 | }
|
| 13670 |
|
| 13671 | .cds--table-sort.cds--table-sort--active .cds--table-sort__icon-unsorted {
|
| 13672 | display: none;
|
| 13673 | }
|
| 13674 |
|
| 13675 | .cds--table-sort.cds--table-sort--active .cds--table-sort__icon {
|
| 13676 | display: block;
|
| 13677 | opacity: 1;
|
| 13678 | }
|
| 13679 |
|
| 13680 | .cds--table-sort--descending .cds--table-sort__icon {
|
| 13681 | transform: rotate(180deg);
|
| 13682 | }
|
| 13683 |
|
| 13684 | .cds--table-sort__icon {
|
| 13685 | fill: var(--cds-icon-primary, #161616);
|
| 13686 | inline-size: 1.25rem;
|
| 13687 | margin-inline-end: 0.5rem;
|
| 13688 | margin-inline-start: 0.5rem;
|
| 13689 | min-inline-size: 1rem;
|
| 13690 | opacity: 1;
|
| 13691 | transform: rotate(0);
|
| 13692 | transition: transform 250ms cubic-bezier(0.5, 0, 0.1, 1);
|
| 13693 | }
|
| 13694 |
|
| 13695 | .cds--data-table--xs.cds--data-table--sort th {
|
| 13696 | block-size: 1.5rem;
|
| 13697 | }
|
| 13698 |
|
| 13699 | .cds--data-table--sm.cds--data-table--sort th {
|
| 13700 | block-size: 2rem;
|
| 13701 | }
|
| 13702 |
|
| 13703 | .cds--data-table--md.cds--data-table--sort th {
|
| 13704 | block-size: 2.5rem;
|
| 13705 | }
|
| 13706 |
|
| 13707 | .cds--data-table--xl.cds--data-table--sort th {
|
| 13708 | block-size: 4rem;
|
| 13709 | }
|
| 13710 |
|
| 13711 | .cds--data-table--xl.cds--data-table--sort th .cds--table-sort {
|
| 13712 | display: inline-block;
|
| 13713 | block-size: 4rem;
|
| 13714 | }
|
| 13715 |
|
| 13716 | .cds--data-table--xl .cds--table-sort__icon-unsorted,
|
| 13717 | .cds--data-table--xl .cds--table-sort__icon {
|
| 13718 | margin-block-start: 0.8125rem;
|
| 13719 | }
|
| 13720 |
|
| 13721 | .cds--table-sort__header--slug .cds--table-sort__icon,
|
| 13722 | .cds--table-sort__header--slug .cds--table-sort__icon-unsorted {
|
| 13723 | margin-inline-end: 0.5rem;
|
| 13724 | margin-inline-start: auto;
|
| 13725 | }
|
| 13726 |
|
| 13727 | .cds--table-sort__header--slug .cds--slug {
|
| 13728 | margin-inline-end: 0.5rem;
|
| 13729 | }
|
| 13730 |
|
| 13731 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 13732 | .cds--table-sort__icon,
|
| 13733 | .cds--table-sort__icon-unsorted {
|
| 13734 | fill: ButtonText;
|
| 13735 | }
|
| 13736 | }
|
| 13737 |
|
| 13738 | @keyframes fp-fade-in-down {
|
| 13739 | from {
|
| 13740 | opacity: 0;
|
| 13741 | transform: translate3d(0, -20px, 0);
|
| 13742 | }
|
| 13743 | to {
|
| 13744 | opacity: 1;
|
| 13745 | transform: translate3d(0, 0, 0);
|
| 13746 | }
|
| 13747 | }
|
| 13748 | @keyframes fp-slide-left {
|
| 13749 | from {
|
| 13750 | transform: translate3d(0, 0, 0);
|
| 13751 | }
|
| 13752 | to {
|
| 13753 | transform: translate3d(-100%, 0, 0);
|
| 13754 | }
|
| 13755 | }
|
| 13756 | @keyframes fp-slide-left-new {
|
| 13757 | from {
|
| 13758 | transform: translate3d(100%, 0, 0);
|
| 13759 | }
|
| 13760 | to {
|
| 13761 | transform: translate3d(0, 0, 0);
|
| 13762 | }
|
| 13763 | }
|
| 13764 | @keyframes fp-slide-right {
|
| 13765 | from {
|
| 13766 | transform: translate3d(0, 0, 0);
|
| 13767 | }
|
| 13768 | to {
|
| 13769 | transform: translate3d(100%, 0, 0);
|
| 13770 | }
|
| 13771 | }
|
| 13772 | @keyframes fp-slide-right-new {
|
| 13773 | from {
|
| 13774 | transform: translate3d(-100%, 0, 0);
|
| 13775 | }
|
| 13776 | to {
|
| 13777 | transform: translate3d(0, 0, 0);
|
| 13778 | }
|
| 13779 | }
|
| 13780 | @keyframes fp-fade-out {
|
| 13781 | from {
|
| 13782 | opacity: 1;
|
| 13783 | }
|
| 13784 | to {
|
| 13785 | opacity: 0;
|
| 13786 | }
|
| 13787 | }
|
| 13788 | @keyframes fp-fade-in {
|
| 13789 | from {
|
| 13790 | opacity: 0;
|
| 13791 | }
|
| 13792 | to {
|
| 13793 | opacity: 1;
|
| 13794 | }
|
| 13795 | }
|
| 13796 | .flatpickr-calendar {
|
| 13797 | position: absolute;
|
| 13798 | overflow: hidden;
|
| 13799 | box-sizing: border-box;
|
| 13800 | padding: 0;
|
| 13801 | border: 0;
|
| 13802 | border-radius: 0;
|
| 13803 | animation: none;
|
| 13804 | direction: ltr;
|
| 13805 | inline-size: 19.6875rem;
|
| 13806 | max-block-size: 0;
|
| 13807 | opacity: 0;
|
| 13808 | text-align: center;
|
| 13809 | touch-action: manipulation;
|
| 13810 | visibility: hidden;
|
| 13811 | }
|
| 13812 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 13813 | .flatpickr-calendar {
|
| 13814 | outline: 1px solid transparent;
|
| 13815 | }
|
| 13816 | }
|
| 13817 |
|
| 13818 | .flatpickr-calendar.open,
|
| 13819 | .flatpickr-calendar.inline {
|
| 13820 | overflow: visible;
|
| 13821 | max-block-size: 40rem;
|
| 13822 | opacity: 1;
|
| 13823 | visibility: inherit;
|
| 13824 | }
|
| 13825 |
|
| 13826 | .flatpickr-calendar.open {
|
| 13827 | box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
|
| 13828 | z-index: 99999;
|
| 13829 | display: flex;
|
| 13830 | overflow: hidden;
|
| 13831 | flex-direction: column;
|
| 13832 | align-items: center;
|
| 13833 | justify-content: center;
|
| 13834 | padding: 0.25rem 0.25rem 0.5rem 0.25rem;
|
| 13835 | border: none;
|
| 13836 | background-color: var(--cds-layer-01, #f4f4f4);
|
| 13837 | block-size: 21rem;
|
| 13838 | inline-size: 18rem;
|
| 13839 | margin-block-start: -0.125rem;
|
| 13840 | }
|
| 13841 | .flatpickr-calendar.open:focus {
|
| 13842 | outline: 1px solid var(--cds-focus, #0f62fe);
|
| 13843 | }
|
| 13844 | @media screen and (prefers-contrast) {
|
| 13845 | .flatpickr-calendar.open:focus {
|
| 13846 | outline-style: dotted;
|
| 13847 | }
|
| 13848 | }
|
| 13849 |
|
| 13850 | .flatpickr-calendar.animate.open {
|
| 13851 | animation: fp-fade-in-down 110ms cubic-bezier(0, 0, 0.38, 0.9);
|
| 13852 | }
|
| 13853 | @media screen and (prefers-reduced-motion: reduce) {
|
| 13854 | .flatpickr-calendar.animate.open {
|
| 13855 | animation: none;
|
| 13856 | }
|
| 13857 | }
|
| 13858 |
|
| 13859 | .flatpickr-calendar.inline {
|
| 13860 | position: relative;
|
| 13861 | display: block;
|
| 13862 | inset-block-start: 0.125rem;
|
| 13863 | }
|
| 13864 |
|
| 13865 | .flatpickr-calendar.static {
|
| 13866 | position: absolute;
|
| 13867 | inset-block-start: calc(100% + 2px);
|
| 13868 | }
|
| 13869 |
|
| 13870 | .flatpickr-calendar.static.open {
|
| 13871 | z-index: 999;
|
| 13872 | display: block;
|
| 13873 | }
|
| 13874 |
|
| 13875 | .flatpickr-calendar.hasWeeks {
|
| 13876 | inline-size: auto;
|
| 13877 | }
|
| 13878 |
|
| 13879 | .dayContainer {
|
| 13880 | display: flex;
|
| 13881 | flex-wrap: wrap;
|
| 13882 | justify-content: space-around;
|
| 13883 | padding: 0;
|
| 13884 | block-size: 15.375rem;
|
| 13885 | outline: 0;
|
| 13886 | }
|
| 13887 |
|
| 13888 | .flatpickr-calendar .hasWeeks .dayContainer,
|
| 13889 | .flatpickr-calendar .hasTime .dayContainer {
|
| 13890 | border-block-end: 0;
|
| 13891 | border-end-end-radius: 0;
|
| 13892 | border-end-start-radius: 0;
|
| 13893 | }
|
| 13894 |
|
| 13895 | .flatpickr-calendar .hasWeeks .dayContainer {
|
| 13896 | border-inline-start: 0;
|
| 13897 | }
|
| 13898 |
|
| 13899 | .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time {
|
| 13900 | block-size: 2.5rem;
|
| 13901 | border-block-start: 1px solid #e6e6e6;
|
| 13902 | }
|
| 13903 |
|
| 13904 | .flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
|
| 13905 | block-size: auto;
|
| 13906 | }
|
| 13907 |
|
| 13908 | .flatpickr-calendar:focus {
|
| 13909 | outline: 0;
|
| 13910 | }
|
| 13911 |
|
| 13912 | .flatpickr-months {
|
| 13913 | display: flex;
|
| 13914 | justify-content: space-between;
|
| 13915 | inline-size: 100%;
|
| 13916 | }
|
| 13917 |
|
| 13918 | .flatpickr-month {
|
| 13919 | font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
|
| 13920 | font-weight: var(--cds-heading-compact-01-font-weight, 600);
|
| 13921 | line-height: var(--cds-heading-compact-01-line-height, 1.28572);
|
| 13922 | letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
|
| 13923 | display: flex;
|
| 13924 | align-items: center;
|
| 13925 | background-color: transparent;
|
| 13926 | block-size: 2.5rem;
|
| 13927 | color: var(--cds-text-primary, #161616);
|
| 13928 | line-height: 1;
|
| 13929 | text-align: center;
|
| 13930 | }
|
| 13931 |
|
| 13932 | .flatpickr-prev-month,
|
| 13933 | .flatpickr-next-month {
|
| 13934 | z-index: 3;
|
| 13935 | display: flex;
|
| 13936 | align-items: center;
|
| 13937 | justify-content: center;
|
| 13938 | padding: 0;
|
| 13939 | block-size: 2.5rem;
|
| 13940 | cursor: pointer;
|
| 13941 | fill: var(--cds-icon-primary, #161616);
|
| 13942 | inline-size: 2.5rem;
|
| 13943 | line-height: 16px;
|
| 13944 | text-decoration: none;
|
| 13945 | transform: scale(1, 1) ;
|
| 13946 | transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 13947 | -webkit-user-select: none;
|
| 13948 | -moz-user-select: none;
|
| 13949 | user-select: none;
|
| 13950 | }
|
| 13951 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 13952 | .flatpickr-prev-month,
|
| 13953 | .flatpickr-next-month {
|
| 13954 | fill: ButtonText;
|
| 13955 | }
|
| 13956 | }
|
| 13957 | @media screen and (prefers-reduced-motion: reduce) {
|
| 13958 | .flatpickr-prev-month,
|
| 13959 | .flatpickr-next-month {
|
| 13960 | transition: none;
|
| 13961 | }
|
| 13962 | }
|
| 13963 | .flatpickr-prev-month:hover,
|
| 13964 | .flatpickr-next-month:hover {
|
| 13965 | background-color: var(--cds-layer-hover);
|
| 13966 | }
|
| 13967 |
|
| 13968 | .flatpickr-next-month.disabled svg,
|
| 13969 | .flatpickr-prev-month.disabled svg {
|
| 13970 | cursor: not-allowed;
|
| 13971 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 13972 | }
|
| 13973 |
|
| 13974 | .flatpickr-next-month.disabled:hover svg,
|
| 13975 | .flatpickr-prev-month.disabled:hover svg {
|
| 13976 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 13977 | }
|
| 13978 |
|
| 13979 | .flatpickr-current-month {
|
| 13980 | font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
|
| 13981 | font-weight: var(--cds-heading-compact-01-font-weight, 600);
|
| 13982 | line-height: var(--cds-heading-compact-01-line-height, 1.28572);
|
| 13983 | letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
|
| 13984 | display: flex;
|
| 13985 | align-items: center;
|
| 13986 | justify-content: center;
|
| 13987 | block-size: 1.75rem;
|
| 13988 | text-align: center;
|
| 13989 | }
|
| 13990 |
|
| 13991 | .flatpickr-current-month .cur-month {
|
| 13992 | margin-inline-end: 0.25rem;
|
| 13993 | margin-inline-start: 0.25rem;
|
| 13994 | }
|
| 13995 | .flatpickr-current-month .cur-month:hover {
|
| 13996 | background-color: var(--cds-layer-hover);
|
| 13997 | }
|
| 13998 |
|
| 13999 | .numInputWrapper {
|
| 14000 | position: relative;
|
| 14001 | inline-size: 3.75rem;
|
| 14002 | }
|
| 14003 | .numInputWrapper:hover {
|
| 14004 | background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
|
| 14005 | }
|
| 14006 |
|
| 14007 | .numInputWrapper .numInput {
|
| 14008 | display: inline-block;
|
| 14009 | padding: 0.25rem;
|
| 14010 | border: none;
|
| 14011 | margin: 0;
|
| 14012 | -moz-appearance: textfield;
|
| 14013 | background-color: var(--cds-field-01, #f4f4f4);
|
| 14014 | color: var(--cds-text-primary, #161616);
|
| 14015 | cursor: default;
|
| 14016 | font-family: inherit;
|
| 14017 | font-size: inherit;
|
| 14018 | font-weight: 600;
|
| 14019 | inline-size: 100%;
|
| 14020 | }
|
| 14021 | .numInputWrapper .numInput::-webkit-outer-spin-button, .numInputWrapper .numInput::-webkit-inner-spin-button {
|
| 14022 | margin: 0;
|
| 14023 | -webkit-appearance: none;
|
| 14024 | }
|
| 14025 | .numInputWrapper .numInput:focus {
|
| 14026 | outline: 1px solid var(--cds-focus, #0f62fe);
|
| 14027 | }
|
| 14028 | @media screen and (prefers-contrast) {
|
| 14029 | .numInputWrapper .numInput:focus {
|
| 14030 | outline-style: dotted;
|
| 14031 | }
|
| 14032 | }
|
| 14033 | .numInputWrapper .numInput[disabled], .numInputWrapper .numInput[disabled]:hover {
|
| 14034 | background-color: var(--cds-layer-01, #f4f4f4);
|
| 14035 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 14036 | pointer-events: none;
|
| 14037 | }
|
| 14038 |
|
| 14039 | .numInputWrapper .arrowUp {
|
| 14040 | border-block-end: 0;
|
| 14041 | inset-block-start: 0.25rem;
|
| 14042 | }
|
| 14043 | .numInputWrapper .arrowUp::after {
|
| 14044 | border-block-end: 0.25rem solid var(--cds-icon-primary, #161616);
|
| 14045 | }
|
| 14046 |
|
| 14047 | .numInputWrapper .arrowDown {
|
| 14048 | inset-block-start: 0.6875rem;
|
| 14049 | }
|
| 14050 | .numInputWrapper .arrowDown::after {
|
| 14051 | border-block-start: 0.25rem solid var(--cds-icon-primary, #161616);
|
| 14052 | }
|
| 14053 |
|
| 14054 | .numInputWrapper .arrowUp,
|
| 14055 | .numInputWrapper .arrowDown {
|
| 14056 | position: absolute;
|
| 14057 | padding: 0 0.25rem 0 0.125rem;
|
| 14058 | border: none;
|
| 14059 | block-size: 50%;
|
| 14060 | cursor: pointer;
|
| 14061 | inline-size: 0.75rem;
|
| 14062 | inset-inline-start: 2.6rem;
|
| 14063 | line-height: 50%;
|
| 14064 | opacity: 0;
|
| 14065 | }
|
| 14066 | .numInputWrapper .arrowUp::after,
|
| 14067 | .numInputWrapper .arrowDown::after {
|
| 14068 | position: absolute;
|
| 14069 | display: block;
|
| 14070 | border-inline-end: 0.25rem solid transparent;
|
| 14071 | border-inline-start: 0.25rem solid transparent;
|
| 14072 | content: "";
|
| 14073 | inset-block-start: 33%;
|
| 14074 | }
|
| 14075 | .numInputWrapper .arrowUp:hover::after,
|
| 14076 | .numInputWrapper .arrowDown:hover::after {
|
| 14077 | border-block-end-color: var(--cds-button-primary, #0f62fe);
|
| 14078 | border-block-start-color: var(--cds-button-primary, #0f62fe);
|
| 14079 | }
|
| 14080 | .numInputWrapper .arrowUp:active::after,
|
| 14081 | .numInputWrapper .arrowDown:active::after {
|
| 14082 | border-block-end-color: var(--cds-border-interactive, #0f62fe);
|
| 14083 | border-block-start-color: var(--cds-border-interactive, #0f62fe);
|
| 14084 | }
|
| 14085 |
|
| 14086 | .numInput[disabled] ~ .arrowUp::after {
|
| 14087 | border-block-end-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 14088 | }
|
| 14089 |
|
| 14090 | .numInput[disabled] ~ .arrowDown::after {
|
| 14091 | border-block-start-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 14092 | }
|
| 14093 |
|
| 14094 | .numInputWrapper:hover .arrowUp,
|
| 14095 | .numInputWrapper:hover .arrowDown {
|
| 14096 | opacity: 1;
|
| 14097 | }
|
| 14098 |
|
| 14099 | .numInputWrapper:hover .numInput[disabled] ~ .arrowUp,
|
| 14100 | .numInputWrapper:hover .numInput[disabled] ~ .arrowDown {
|
| 14101 | opacity: 0;
|
| 14102 | }
|
| 14103 |
|
| 14104 | .flatpickr-weekdays {
|
| 14105 | display: flex;
|
| 14106 | align-items: center;
|
| 14107 | block-size: 2.5rem;
|
| 14108 | }
|
| 14109 |
|
| 14110 | .flatpickr-weekdaycontainer {
|
| 14111 | display: flex;
|
| 14112 | inline-size: 100%;
|
| 14113 | }
|
| 14114 |
|
| 14115 | .flatpickr-weekday {
|
| 14116 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 14117 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 14118 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 14119 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 14120 | flex: 1 1;
|
| 14121 | color: var(--cds-text-primary, #161616);
|
| 14122 | cursor: default;
|
| 14123 | }
|
| 14124 |
|
| 14125 | .flatpickr-days:focus {
|
| 14126 | outline: 0;
|
| 14127 | }
|
| 14128 |
|
| 14129 | .flatpickr-calendar.animate .dayContainer.slideLeft {
|
| 14130 | animation: fp-fade-out 400ms cubic-bezier(0.23, 1, 0.32, 1), fp-slide-left 400ms cubic-bezier(0.23, 1, 0.32, 1);
|
| 14131 | }
|
| 14132 |
|
| 14133 | .flatpickr-calendar.animate .dayContainer.slideLeft,
|
| 14134 | .flatpickr-calendar.animate .dayContainer.slideLeftNew {
|
| 14135 | transform: translate3d(-100%, 0, 0);
|
| 14136 | }
|
| 14137 |
|
| 14138 | .flatpickr-calendar.animate .dayContainer.slideLeftNew {
|
| 14139 | animation: fp-fade-in 400ms cubic-bezier(0.23, 1, 0.32, 1), fp-slide-left 400ms cubic-bezier(0.23, 1, 0.32, 1);
|
| 14140 | }
|
| 14141 |
|
| 14142 | .flatpickr-calendar.animate .dayContainer.slideRight {
|
| 14143 | animation: fp-fade-out 400ms cubic-bezier(0.23, 1, 0.32, 1), fp-slide-right 400ms cubic-bezier(0.23, 1, 0.32, 1);
|
| 14144 | transform: translate3d(100%, 0, 0);
|
| 14145 | }
|
| 14146 |
|
| 14147 | .flatpickr-calendar.animate .dayContainer.slideRightNew {
|
| 14148 | animation: fp-fade-in 400ms cubic-bezier(0.23, 1, 0.32, 1), fp-slide-right-new 400ms cubic-bezier(0.23, 1, 0.32, 1);
|
| 14149 | }
|
| 14150 |
|
| 14151 | .flatpickr-day {
|
| 14152 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 14153 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 14154 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 14155 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 14156 | display: flex;
|
| 14157 | align-items: center;
|
| 14158 | justify-content: center;
|
| 14159 | block-size: 2.5rem;
|
| 14160 | color: var(--cds-text-primary, #161616);
|
| 14161 | cursor: pointer;
|
| 14162 | inline-size: 2.5rem;
|
| 14163 | transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 14164 | }
|
| 14165 | .flatpickr-day:hover {
|
| 14166 | background: var(--cds-layer-hover);
|
| 14167 | }
|
| 14168 | .flatpickr-day:focus {
|
| 14169 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 14170 | outline-offset: -2px;
|
| 14171 | outline-color: var(--cds-button-primary, #0f62fe);
|
| 14172 | }
|
| 14173 | @media screen and (prefers-contrast) {
|
| 14174 | .flatpickr-day:focus {
|
| 14175 | outline-style: dotted;
|
| 14176 | }
|
| 14177 | }
|
| 14178 |
|
| 14179 | .nextMonthDay,
|
| 14180 | .prevMonthDay {
|
| 14181 | color: var(--cds-text-helper, #6f6f6f);
|
| 14182 | }
|
| 14183 |
|
| 14184 | .flatpickr-day.today {
|
| 14185 | position: relative;
|
| 14186 | color: var(--cds-link-primary, #0f62fe);
|
| 14187 | font-weight: 600;
|
| 14188 | }
|
| 14189 | .flatpickr-day.today::after {
|
| 14190 | position: absolute;
|
| 14191 | display: block;
|
| 14192 | background-color: var(--cds-link-primary, #0f62fe);
|
| 14193 | block-size: 0.25rem;
|
| 14194 | content: "";
|
| 14195 | inline-size: 0.25rem;
|
| 14196 | inset-block-end: 0.4375rem;
|
| 14197 | inset-inline-start: 50%;
|
| 14198 | transform: translateX(-50%);
|
| 14199 | }
|
| 14200 |
|
| 14201 | .flatpickr-day.today.no-border {
|
| 14202 | border: none;
|
| 14203 | }
|
| 14204 |
|
| 14205 | .flatpickr-day.today.selected {
|
| 14206 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 14207 | outline-offset: -2px;
|
| 14208 | }
|
| 14209 | @media screen and (prefers-contrast) {
|
| 14210 | .flatpickr-day.today.selected {
|
| 14211 | outline-style: dotted;
|
| 14212 | }
|
| 14213 | }
|
| 14214 | .flatpickr-day.today.selected::after {
|
| 14215 | display: none;
|
| 14216 | }
|
| 14217 |
|
| 14218 | .flatpickr-day.inRange {
|
| 14219 | background-color: var(--cds-highlight, #d0e2ff);
|
| 14220 | color: var(--cds-text-primary, #161616);
|
| 14221 | }
|
| 14222 |
|
| 14223 | .flatpickr-day.selected {
|
| 14224 | background-color: var(--cds-button-primary, #0f62fe);
|
| 14225 | color: var(--cds-text-on-color, #ffffff);
|
| 14226 | }
|
| 14227 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 14228 | .flatpickr-day.selected {
|
| 14229 | color: Highlight;
|
| 14230 | outline: 1px solid Highlight;
|
| 14231 | outline-style: dotted;
|
| 14232 | }
|
| 14233 | }
|
| 14234 | .flatpickr-day.selected:focus {
|
| 14235 | outline: 0.0625rem solid var(--cds-layer-02, #ffffff);
|
| 14236 | outline-offset: -0.1875rem;
|
| 14237 | }
|
| 14238 |
|
| 14239 | .flatpickr-day.startRange.selected {
|
| 14240 | z-index: 2;
|
| 14241 | box-shadow: none;
|
| 14242 | }
|
| 14243 |
|
| 14244 | .flatpickr-day.startRange.inRange:not(.selected),
|
| 14245 | .flatpickr-day.endRange.inRange {
|
| 14246 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 14247 | outline-offset: -2px;
|
| 14248 | z-index: 3;
|
| 14249 | background: var(--cds-layer-01, #f4f4f4);
|
| 14250 | }
|
| 14251 | @media screen and (prefers-contrast) {
|
| 14252 | .flatpickr-day.startRange.inRange:not(.selected),
|
| 14253 | .flatpickr-day.endRange.inRange {
|
| 14254 | outline-style: dotted;
|
| 14255 | }
|
| 14256 | }
|
| 14257 |
|
| 14258 | .flatpickr-day.endRange:hover {
|
| 14259 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 14260 | outline-offset: -2px;
|
| 14261 | background: var(--cds-layer-01, #f4f4f4);
|
| 14262 | color: var(--cds-text-primary, #161616);
|
| 14263 | }
|
| 14264 | @media screen and (prefers-contrast) {
|
| 14265 | .flatpickr-day.endRange:hover {
|
| 14266 | outline-style: dotted;
|
| 14267 | }
|
| 14268 | }
|
| 14269 |
|
| 14270 | .flatpickr-day.endRange.inRange.selected {
|
| 14271 | background: var(--cds-button-primary, #0f62fe);
|
| 14272 | color: var(--cds-text-on-color, #ffffff);
|
| 14273 | }
|
| 14274 |
|
| 14275 | .flatpickr-day.flatpickr-disabled {
|
| 14276 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 14277 | cursor: not-allowed;
|
| 14278 | }
|
| 14279 | .flatpickr-day.flatpickr-disabled:hover {
|
| 14280 | background-color: transparent;
|
| 14281 | }
|
| 14282 |
|
| 14283 | .flatpickr-input[readonly] {
|
| 14284 | cursor: pointer;
|
| 14285 | }
|
| 14286 |
|
| 14287 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 14288 | .flatpickr-day.today,
|
| 14289 | .flatpickr-day.inRange {
|
| 14290 | color: Highlight;
|
| 14291 | }
|
| 14292 | }
|
| 14293 |
|
| 14294 | .cds--date-picker {
|
| 14295 | display: flex;
|
| 14296 | }
|
| 14297 |
|
| 14298 | .cds--date-picker--light .cds--date-picker__input {
|
| 14299 | background: var(--cds-field-02, #ffffff);
|
| 14300 | }
|
| 14301 |
|
| 14302 | .cds--date-picker ~ .cds--label {
|
| 14303 | order: 1;
|
| 14304 | }
|
| 14305 |
|
| 14306 | .cds--date-picker-container {
|
| 14307 | position: relative;
|
| 14308 | display: flex;
|
| 14309 | flex-direction: column;
|
| 14310 | justify-content: space-between;
|
| 14311 | }
|
| 14312 |
|
| 14313 | .cds--date-picker-container .cds--label {
|
| 14314 | display: flex;
|
| 14315 | }
|
| 14316 |
|
| 14317 | .cds--date-picker-input__wrapper {
|
| 14318 | display: flex;
|
| 14319 | align-items: center;
|
| 14320 | }
|
| 14321 |
|
| 14322 | .cds--date-picker-input__wrapper > span {
|
| 14323 | position: relative;
|
| 14324 | }
|
| 14325 |
|
| 14326 | .cds--date-picker.cds--date-picker--simple .cds--date-picker__input,
|
| 14327 | .cds--date-picker.cds--date-picker--simple .cds--label {
|
| 14328 | inline-size: 7.5rem;
|
| 14329 | }
|
| 14330 |
|
| 14331 | .cds--date-picker.cds--date-picker--simple .cds--date-picker-input__wrapper--invalid .cds--date-picker__input,
|
| 14332 | .cds--date-picker.cds--date-picker--simple .cds--date-picker-input__wrapper--invalid ~ .cds--form-requirement,
|
| 14333 | .cds--date-picker.cds--date-picker--simple .cds--date-picker-input__wrapper--warn .cds--date-picker__input,
|
| 14334 | .cds--date-picker.cds--date-picker--simple .cds--date-picker-input__wrapper--warn ~ .cds--form-requirement {
|
| 14335 | inline-size: 9.5rem;
|
| 14336 | }
|
| 14337 |
|
| 14338 | .cds--date-picker.cds--date-picker--simple.cds--date-picker--short .cds--date-picker__input {
|
| 14339 | inline-size: 5.7rem;
|
| 14340 | }
|
| 14341 |
|
| 14342 | .cds--date-picker.cds--date-picker--single .cds--date-picker__input {
|
| 14343 | inline-size: 18rem;
|
| 14344 | }
|
| 14345 |
|
| 14346 | .cds--date-picker .cds--date-picker-input__wrapper--warn ~ .cds--form-requirement {
|
| 14347 | color: var(--cds-text-primary, #161616);
|
| 14348 | }
|
| 14349 |
|
| 14350 | .cds--date-picker__input {
|
| 14351 | box-sizing: border-box;
|
| 14352 | padding: 0;
|
| 14353 | border: 0;
|
| 14354 | margin: 0;
|
| 14355 | font-family: inherit;
|
| 14356 | font-size: 100%;
|
| 14357 | vertical-align: baseline;
|
| 14358 | font-family: var(--cds-code-02-font-family, 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace);
|
| 14359 | font-size: var(--cds-code-02-font-size, 0.875rem);
|
| 14360 | font-weight: var(--cds-code-02-font-weight, 400);
|
| 14361 | line-height: var(--cds-code-02-line-height, 1.42857);
|
| 14362 | letter-spacing: var(--cds-code-02-letter-spacing, 0.32px);
|
| 14363 | outline: 2px solid transparent;
|
| 14364 | outline-offset: -2px;
|
| 14365 | position: relative;
|
| 14366 | display: block;
|
| 14367 | padding: 0 1rem;
|
| 14368 | border: none;
|
| 14369 | background-color: var(--cds-field);
|
| 14370 | block-size: 2.5rem;
|
| 14371 | border-block-end: 1px solid var(--cds-border-strong);
|
| 14372 | color: var(--cds-text-primary, #161616);
|
| 14373 | transition: 70ms cubic-bezier(0.2, 0, 0.38, 0.9) all;
|
| 14374 | }
|
| 14375 | .cds--date-picker__input *,
|
| 14376 | .cds--date-picker__input *::before,
|
| 14377 | .cds--date-picker__input *::after {
|
| 14378 | box-sizing: inherit;
|
| 14379 | }
|
| 14380 | .cds--date-picker__input:focus, .cds--date-picker__input.cds--focused {
|
| 14381 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 14382 | outline-offset: -2px;
|
| 14383 | }
|
| 14384 | @media screen and (prefers-contrast) {
|
| 14385 | .cds--date-picker__input:focus, .cds--date-picker__input.cds--focused {
|
| 14386 | outline-style: dotted;
|
| 14387 | }
|
| 14388 | }
|
| 14389 | .cds--date-picker__input:disabled {
|
| 14390 | background-color: var(--cds-field);
|
| 14391 | border-block-end: 1px solid transparent;
|
| 14392 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 14393 | cursor: not-allowed;
|
| 14394 | }
|
| 14395 | .cds--date-picker__input:disabled::-moz-placeholder {
|
| 14396 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 14397 | }
|
| 14398 | .cds--date-picker__input:disabled::placeholder {
|
| 14399 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 14400 | }
|
| 14401 | .cds--date-picker__input:disabled:hover {
|
| 14402 | border-block-end: 1px solid transparent;
|
| 14403 | }
|
| 14404 | .cds--date-picker__input::-moz-placeholder {
|
| 14405 | color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4));
|
| 14406 | opacity: 1;
|
| 14407 | }
|
| 14408 | .cds--date-picker__input::placeholder {
|
| 14409 | color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4));
|
| 14410 | opacity: 1;
|
| 14411 | }
|
| 14412 |
|
| 14413 | .cds--date-picker__input--lg {
|
| 14414 | block-size: 3rem;
|
| 14415 | }
|
| 14416 |
|
| 14417 | .cds--date-picker__input--sm {
|
| 14418 | block-size: 2rem;
|
| 14419 | }
|
| 14420 |
|
| 14421 | .cds--date-picker__icon {
|
| 14422 | position: absolute;
|
| 14423 | z-index: 1;
|
| 14424 | fill: var(--cds-icon-primary, #161616);
|
| 14425 | inset-block-start: 50%;
|
| 14426 | inset-inline-end: 1rem;
|
| 14427 | pointer-events: none;
|
| 14428 | transform: translateY(-50%);
|
| 14429 | }
|
| 14430 |
|
| 14431 | .cds--date-picker__icon--invalid,
|
| 14432 | .cds--date-picker__icon--warn {
|
| 14433 | cursor: auto;
|
| 14434 | }
|
| 14435 |
|
| 14436 | .cds--date-picker__icon--warn {
|
| 14437 | fill: var(--cds-support-warning, #f1c21b);
|
| 14438 | }
|
| 14439 |
|
| 14440 | .cds--date-picker__icon--warn path:first-of-type {
|
| 14441 | fill: #000000;
|
| 14442 | opacity: 1;
|
| 14443 | }
|
| 14444 |
|
| 14445 | .cds--date-picker__icon--invalid {
|
| 14446 | fill: var(--cds-support-error, #da1e28);
|
| 14447 | }
|
| 14448 |
|
| 14449 | .cds--date-picker__icon ~ .cds--date-picker__input {
|
| 14450 | padding-inline-end: 3rem;
|
| 14451 | }
|
| 14452 |
|
| 14453 | .cds--date-picker__input:disabled ~ .cds--date-picker__icon {
|
| 14454 | cursor: not-allowed;
|
| 14455 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 14456 | }
|
| 14457 |
|
| 14458 | .cds--date-picker--range > .cds--date-picker-container:first-child {
|
| 14459 | margin-inline-end: 0.0625rem;
|
| 14460 | }
|
| 14461 |
|
| 14462 | .cds--date-picker--range .cds--date-picker-container,
|
| 14463 | .cds--date-picker--range .cds--date-picker__input {
|
| 14464 | inline-size: 8.96875rem;
|
| 14465 | }
|
| 14466 |
|
| 14467 | .cds--date-picker-input__wrapper--slug .cds--slug {
|
| 14468 | position: absolute;
|
| 14469 | inset-block-start: 50%;
|
| 14470 | inset-inline-end: 2.5rem;
|
| 14471 | transform: translateY(-50%);
|
| 14472 | }
|
| 14473 |
|
| 14474 | .cds--date-picker-input__wrapper--slug .cds--date-picker__input:not(:has(~ .cds--slug--revert)) {
|
| 14475 | background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
|
| 14476 | border-block-end-color: var(--cds-ai-border-strong, #4589ff);
|
| 14477 | padding-inline-end: 4rem;
|
| 14478 | }
|
| 14479 |
|
| 14480 | .cds--date-picker__input[readonly] {
|
| 14481 | background: transparent;
|
| 14482 | border-block-end-color: var(--cds-border-subtle);
|
| 14483 | cursor: text;
|
| 14484 | }
|
| 14485 |
|
| 14486 | .cds--date-picker__input[readonly] + .cds--date-picker__icon {
|
| 14487 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 14488 | }
|
| 14489 |
|
| 14490 | .cds--date-picker.cds--skeleton input,
|
| 14491 | .cds--date-picker__input.cds--skeleton {
|
| 14492 | position: relative;
|
| 14493 | padding: 0;
|
| 14494 | border: none;
|
| 14495 | background: var(--cds-skeleton-background, #e8e8e8);
|
| 14496 | box-shadow: none;
|
| 14497 | pointer-events: none;
|
| 14498 | inline-size: 100%;
|
| 14499 | }
|
| 14500 | .cds--date-picker.cds--skeleton input:hover, .cds--date-picker.cds--skeleton input:focus, .cds--date-picker.cds--skeleton input:active,
|
| 14501 | .cds--date-picker__input.cds--skeleton:hover,
|
| 14502 | .cds--date-picker__input.cds--skeleton:focus,
|
| 14503 | .cds--date-picker__input.cds--skeleton:active {
|
| 14504 | border: none;
|
| 14505 | cursor: default;
|
| 14506 | outline: none;
|
| 14507 | }
|
| 14508 | .cds--date-picker.cds--skeleton input::before,
|
| 14509 | .cds--date-picker__input.cds--skeleton::before {
|
| 14510 | position: absolute;
|
| 14511 | animation: 3000ms ease-in-out cds--skeleton infinite;
|
| 14512 | background: var(--cds-skeleton-element, #c6c6c6);
|
| 14513 | block-size: 100%;
|
| 14514 | content: "";
|
| 14515 | inline-size: 100%;
|
| 14516 | will-change: transform-origin, transform, opacity;
|
| 14517 | }
|
| 14518 | @media (prefers-reduced-motion: reduce) {
|
| 14519 | .cds--date-picker.cds--skeleton input::before,
|
| 14520 | .cds--date-picker__input.cds--skeleton::before {
|
| 14521 | animation: none;
|
| 14522 | }
|
| 14523 | }
|
| 14524 | .cds--date-picker.cds--skeleton input::-moz-placeholder, .cds--date-picker__input.cds--skeleton::-moz-placeholder {
|
| 14525 | color: transparent;
|
| 14526 | }
|
| 14527 | .cds--date-picker.cds--skeleton input::placeholder,
|
| 14528 | .cds--date-picker__input.cds--skeleton::placeholder {
|
| 14529 | color: transparent;
|
| 14530 | }
|
| 14531 |
|
| 14532 | .cds--date-picker.cds--skeleton .cds--label {
|
| 14533 | position: relative;
|
| 14534 | padding: 0;
|
| 14535 | border: none;
|
| 14536 | background: var(--cds-skeleton-background, #e8e8e8);
|
| 14537 | box-shadow: none;
|
| 14538 | pointer-events: none;
|
| 14539 | block-size: 0.875rem;
|
| 14540 | inline-size: 4.6875rem;
|
| 14541 | }
|
| 14542 | .cds--date-picker.cds--skeleton .cds--label:hover, .cds--date-picker.cds--skeleton .cds--label:focus, .cds--date-picker.cds--skeleton .cds--label:active {
|
| 14543 | border: none;
|
| 14544 | cursor: default;
|
| 14545 | outline: none;
|
| 14546 | }
|
| 14547 | .cds--date-picker.cds--skeleton .cds--label::before {
|
| 14548 | position: absolute;
|
| 14549 | animation: 3000ms ease-in-out cds--skeleton infinite;
|
| 14550 | background: var(--cds-skeleton-element, #c6c6c6);
|
| 14551 | block-size: 100%;
|
| 14552 | content: "";
|
| 14553 | inline-size: 100%;
|
| 14554 | will-change: transform-origin, transform, opacity;
|
| 14555 | }
|
| 14556 | @media (prefers-reduced-motion: reduce) {
|
| 14557 | .cds--date-picker.cds--skeleton .cds--label::before {
|
| 14558 | animation: none;
|
| 14559 | }
|
| 14560 | }
|
| 14561 |
|
| 14562 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 14563 | .cds--date-picker__icon {
|
| 14564 | fill: ButtonText;
|
| 14565 | }
|
| 14566 | }
|
| 14567 |
|
| 14568 | .cds--dropdown__wrapper--inline {
|
| 14569 | display: inline-grid;
|
| 14570 | align-items: center;
|
| 14571 | grid-gap: 0 1.5rem;
|
| 14572 | grid-template: auto auto/auto min-content;
|
| 14573 | }
|
| 14574 | .cds--dropdown__wrapper--inline .cds--label {
|
| 14575 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 14576 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 14577 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 14578 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 14579 | }
|
| 14580 | .cds--dropdown__wrapper--inline .cds--label,
|
| 14581 | .cds--dropdown__wrapper--inline .cds--form__helper-text,
|
| 14582 | .cds--dropdown__wrapper--inline .cds--form-requirement {
|
| 14583 | margin: 0;
|
| 14584 | }
|
| 14585 | .cds--dropdown__wrapper--inline .cds--form-requirement {
|
| 14586 | grid-column: 2;
|
| 14587 | }
|
| 14588 |
|
| 14589 | .cds--dropdown {
|
| 14590 | outline: 2px solid transparent;
|
| 14591 | outline-offset: -2px;
|
| 14592 | position: relative;
|
| 14593 | display: block;
|
| 14594 | border: none;
|
| 14595 | background-color: var(--cds-field);
|
| 14596 | block-size: 2.5rem;
|
| 14597 | border-block-end: 1px solid var(--cds-border-strong);
|
| 14598 | color: var(--cds-text-primary, #161616);
|
| 14599 | cursor: pointer;
|
| 14600 | inline-size: 100%;
|
| 14601 | list-style: none;
|
| 14602 | outline: 2px solid transparent;
|
| 14603 | transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 14604 | }
|
| 14605 | .cds--dropdown html {
|
| 14606 | font-size: 100%;
|
| 14607 | }
|
| 14608 | .cds--dropdown body {
|
| 14609 | font-weight: 400;
|
| 14610 | font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
|
| 14611 | -moz-osx-font-smoothing: grayscale;
|
| 14612 | -webkit-font-smoothing: antialiased;
|
| 14613 | text-rendering: optimizeLegibility;
|
| 14614 | }
|
| 14615 | .cds--dropdown code {
|
| 14616 | font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
|
| 14617 | }
|
| 14618 | .cds--dropdown strong {
|
| 14619 | font-weight: 600;
|
| 14620 | }
|
| 14621 | .cds--dropdown:hover {
|
| 14622 | background-color: var(--cds-field-hover);
|
| 14623 | }
|
| 14624 |
|
| 14625 | .cds--dropdown .cds--list-box__field {
|
| 14626 | text-align: start;
|
| 14627 | }
|
| 14628 |
|
| 14629 | .cds--dropdown--lg {
|
| 14630 | block-size: 3rem;
|
| 14631 | max-block-size: 3rem;
|
| 14632 | }
|
| 14633 |
|
| 14634 | .cds--dropdown--lg .cds--dropdown__arrow {
|
| 14635 | inset-block-start: 1rem;
|
| 14636 | }
|
| 14637 |
|
| 14638 | .cds--dropdown--sm {
|
| 14639 | block-size: 2rem;
|
| 14640 | max-block-size: 2rem;
|
| 14641 | }
|
| 14642 |
|
| 14643 | .cds--dropdown--sm .cds--dropdown__arrow {
|
| 14644 | inset-block-start: 0.5rem;
|
| 14645 | }
|
| 14646 |
|
| 14647 | .cds--dropdown--open {
|
| 14648 | border-block-end-color: var(--cds-border-subtle);
|
| 14649 | }
|
| 14650 |
|
| 14651 | .cds--dropdown--open .cds--list-box__field {
|
| 14652 | outline: none;
|
| 14653 | }
|
| 14654 |
|
| 14655 | .cds--dropdown--invalid {
|
| 14656 | outline: 2px solid var(--cds-support-error, #da1e28);
|
| 14657 | outline-offset: -2px;
|
| 14658 | }
|
| 14659 | @media screen and (prefers-contrast) {
|
| 14660 | .cds--dropdown--invalid {
|
| 14661 | outline-style: dotted;
|
| 14662 | }
|
| 14663 | }
|
| 14664 | .cds--dropdown--invalid .cds--dropdown-text {
|
| 14665 | padding-inline-end: 3.5rem;
|
| 14666 | }
|
| 14667 | .cds--dropdown--invalid + .cds--form-requirement {
|
| 14668 | display: inline-block;
|
| 14669 | color: var(--cds-text-error, #da1e28);
|
| 14670 | max-block-size: 12.5rem;
|
| 14671 | }
|
| 14672 |
|
| 14673 | .cds--dropdown__invalid-icon {
|
| 14674 | position: absolute;
|
| 14675 | fill: var(--cds-support-error, #da1e28);
|
| 14676 | inset-block-start: 50%;
|
| 14677 | inset-inline-end: 2.5rem;
|
| 14678 | transform: translateY(-50%);
|
| 14679 | }
|
| 14680 |
|
| 14681 | .cds--dropdown--open:hover {
|
| 14682 | background-color: var(--cds-field);
|
| 14683 | }
|
| 14684 |
|
| 14685 | .cds--dropdown--open:focus {
|
| 14686 | outline: 1px solid transparent;
|
| 14687 | }
|
| 14688 |
|
| 14689 | .cds--dropdown--open .cds--dropdown-list {
|
| 14690 | box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
|
| 14691 | max-block-size: 13.75rem;
|
| 14692 | transition: max-height 110ms cubic-bezier(0, 0, 0.38, 0.9);
|
| 14693 | }
|
| 14694 |
|
| 14695 | .cds--dropdown--light {
|
| 14696 | background-color: var(--cds-field-02, #ffffff);
|
| 14697 | }
|
| 14698 | .cds--dropdown--light:hover {
|
| 14699 | background-color: var(--cds-field-hover);
|
| 14700 | }
|
| 14701 |
|
| 14702 | .cds--dropdown--up .cds--dropdown-list {
|
| 14703 | inset-block-end: 2rem;
|
| 14704 | }
|
| 14705 |
|
| 14706 | .cds--dropdown__arrow {
|
| 14707 | position: absolute;
|
| 14708 | fill: var(--cds-icon-primary, #161616);
|
| 14709 | inset-block-start: 0.8125rem;
|
| 14710 | inset-inline-end: 1rem;
|
| 14711 | pointer-events: none;
|
| 14712 | transform-origin: 50% 45%;
|
| 14713 | transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 14714 | }
|
| 14715 |
|
| 14716 | button.cds--dropdown-text {
|
| 14717 | border: none;
|
| 14718 | background: none;
|
| 14719 | color: var(--cds-text-primary, #161616);
|
| 14720 | inline-size: 100%;
|
| 14721 | text-align: start;
|
| 14722 | }
|
| 14723 | button.cds--dropdown-text:focus {
|
| 14724 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 14725 | outline-offset: -2px;
|
| 14726 | }
|
| 14727 | @media screen and (prefers-contrast) {
|
| 14728 | button.cds--dropdown-text:focus {
|
| 14729 | outline-style: dotted;
|
| 14730 | }
|
| 14731 | }
|
| 14732 |
|
| 14733 | .cds--dropdown-text {
|
| 14734 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 14735 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 14736 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 14737 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 14738 | display: block;
|
| 14739 | overflow: hidden;
|
| 14740 | block-size: calc(100% + 1px);
|
| 14741 | padding-inline-end: 2.625rem;
|
| 14742 | padding-inline-start: 1rem;
|
| 14743 | text-overflow: ellipsis;
|
| 14744 | white-space: nowrap;
|
| 14745 | }
|
| 14746 |
|
| 14747 | .cds--dropdown-list {
|
| 14748 | outline: 2px solid transparent;
|
| 14749 | outline-offset: -2px;
|
| 14750 | box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
|
| 14751 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 14752 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 14753 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 14754 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 14755 | position: absolute;
|
| 14756 | z-index: 9100;
|
| 14757 | display: flex;
|
| 14758 | flex-direction: column;
|
| 14759 | background-color: var(--cds-layer);
|
| 14760 | inline-size: 100%;
|
| 14761 | list-style: none;
|
| 14762 | max-block-size: 0;
|
| 14763 | overflow-x: hidden;
|
| 14764 | overflow-y: auto;
|
| 14765 | transition: max-height 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 14766 | }
|
| 14767 | .cds--dropdown-list html {
|
| 14768 | font-size: 100%;
|
| 14769 | }
|
| 14770 | .cds--dropdown-list body {
|
| 14771 | font-weight: 400;
|
| 14772 | font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
|
| 14773 | -moz-osx-font-smoothing: grayscale;
|
| 14774 | -webkit-font-smoothing: antialiased;
|
| 14775 | text-rendering: optimizeLegibility;
|
| 14776 | }
|
| 14777 | .cds--dropdown-list code {
|
| 14778 | font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
|
| 14779 | }
|
| 14780 | .cds--dropdown-list strong {
|
| 14781 | font-weight: 600;
|
| 14782 | }
|
| 14783 |
|
| 14784 | .cds--dropdown--light .cds--dropdown-list {
|
| 14785 | background-color: var(--cds-layer);
|
| 14786 | }
|
| 14787 |
|
| 14788 | .cds--dropdown:not(.cds--dropdown--open) .cds--dropdown-item {
|
| 14789 | visibility: hidden;
|
| 14790 | }
|
| 14791 |
|
| 14792 | .cds--dropdown-item {
|
| 14793 | position: relative;
|
| 14794 | opacity: 0;
|
| 14795 | transition: visibility 70ms cubic-bezier(0.2, 0, 0.38, 0.9), opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 14796 | visibility: inherit;
|
| 14797 | }
|
| 14798 | .cds--dropdown-item:hover {
|
| 14799 | background-color: var(--cds-layer-hover);
|
| 14800 | }
|
| 14801 | .cds--dropdown-item:hover + .cds--dropdown-item .cds--dropdown-link {
|
| 14802 | border-color: transparent;
|
| 14803 | }
|
| 14804 | .cds--dropdown-item:active {
|
| 14805 | background-color: var(--cds-layer-selected);
|
| 14806 | }
|
| 14807 | .cds--dropdown-item:first-of-type .cds--dropdown-link {
|
| 14808 | border-block-start-color: transparent;
|
| 14809 | }
|
| 14810 |
|
| 14811 | .cds--dropdown-item:last-of-type .cds--dropdown-link {
|
| 14812 | border-block-end: none;
|
| 14813 | }
|
| 14814 |
|
| 14815 | .cds--dropdown-link {
|
| 14816 | outline: 2px solid transparent;
|
| 14817 | outline-offset: -2px;
|
| 14818 | display: block;
|
| 14819 | overflow: hidden;
|
| 14820 | padding: 0.6875rem 0;
|
| 14821 | border: 1px solid transparent;
|
| 14822 | margin: 0 1rem;
|
| 14823 | block-size: 2.5rem;
|
| 14824 | border-block-start-color: var(--cds-border-subtle);
|
| 14825 | color: var(--cds-text-secondary, #525252);
|
| 14826 | font-weight: normal;
|
| 14827 | line-height: 1rem;
|
| 14828 | text-decoration: none;
|
| 14829 | text-overflow: ellipsis;
|
| 14830 | white-space: nowrap;
|
| 14831 | }
|
| 14832 | .cds--dropdown-link:hover {
|
| 14833 | border-color: transparent;
|
| 14834 | color: var(--cds-text-primary, #161616);
|
| 14835 | }
|
| 14836 |
|
| 14837 | .cds--dropdown--light .cds--dropdown-link {
|
| 14838 | border-block-start-color: var(--cds-border-subtle-02, #e0e0e0);
|
| 14839 | }
|
| 14840 |
|
| 14841 | .cds--dropdown--sm .cds--dropdown-link {
|
| 14842 | block-size: 2rem;
|
| 14843 | padding-block-end: 0.4375rem;
|
| 14844 | padding-block-start: 0.4375rem;
|
| 14845 | }
|
| 14846 |
|
| 14847 | .cds--dropdown--focused,
|
| 14848 | .cds--dropdown-link:focus {
|
| 14849 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 14850 | outline-offset: -2px;
|
| 14851 | padding: 0.6875rem 1rem;
|
| 14852 | margin: 0;
|
| 14853 | }
|
| 14854 | @media screen and (prefers-contrast) {
|
| 14855 | .cds--dropdown--focused,
|
| 14856 | .cds--dropdown-link:focus {
|
| 14857 | outline-style: dotted;
|
| 14858 | }
|
| 14859 | }
|
| 14860 |
|
| 14861 | .cds--dropdown-list[aria-activedescendant] .cds--dropdown-link:focus {
|
| 14862 | padding: 0.6875rem 0;
|
| 14863 | margin: 0 1rem;
|
| 14864 | outline: none;
|
| 14865 | }
|
| 14866 |
|
| 14867 | .cds--dropdown-list[aria-activedescendant] .cds--dropdown--focused:focus {
|
| 14868 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 14869 | outline-offset: -2px;
|
| 14870 | padding: 0.6875rem 1rem;
|
| 14871 | margin: 0;
|
| 14872 | }
|
| 14873 | @media screen and (prefers-contrast) {
|
| 14874 | .cds--dropdown-list[aria-activedescendant] .cds--dropdown--focused:focus {
|
| 14875 | outline-style: dotted;
|
| 14876 | }
|
| 14877 | }
|
| 14878 |
|
| 14879 | .cds--dropdown-list[aria-activedescendant] .cds--dropdown-item:active {
|
| 14880 | background-color: inherit;
|
| 14881 | }
|
| 14882 |
|
| 14883 | .cds--dropdown-item:hover .cds--dropdown-link {
|
| 14884 | border-block-end-color: var(--cds-layer-hover);
|
| 14885 | }
|
| 14886 |
|
| 14887 | .cds--dropdown--open .cds--dropdown__arrow {
|
| 14888 | transform: rotate(-180deg);
|
| 14889 | }
|
| 14890 |
|
| 14891 | .cds--dropdown--open.cds--dropdown--sm .cds--dropdown-list {
|
| 14892 | max-block-size: 11rem;
|
| 14893 | }
|
| 14894 |
|
| 14895 | .cds--dropdown--open .cds--dropdown-item {
|
| 14896 | opacity: 1;
|
| 14897 | }
|
| 14898 |
|
| 14899 | .cds--dropdown--disabled {
|
| 14900 | border-block-end-color: transparent;
|
| 14901 | }
|
| 14902 | .cds--dropdown--disabled:hover {
|
| 14903 | background-color: var(--cds-field);
|
| 14904 | }
|
| 14905 | .cds--dropdown--disabled:focus {
|
| 14906 | outline: none;
|
| 14907 | }
|
| 14908 | .cds--dropdown--disabled .cds--dropdown-text,
|
| 14909 | .cds--dropdown--disabled .cds--list-box__label {
|
| 14910 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 14911 | }
|
| 14912 | .cds--dropdown--disabled .cds--dropdown__arrow,
|
| 14913 | .cds--dropdown--disabled .cds--list-box__menu-icon svg {
|
| 14914 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 14915 | }
|
| 14916 | .cds--dropdown--disabled.cds--dropdown--light:hover {
|
| 14917 | background-color: var(--cds-field-02, #ffffff);
|
| 14918 | }
|
| 14919 |
|
| 14920 | .cds--dropdown--disabled .cds--list-box__field,
|
| 14921 | .cds--dropdown--disabled .cds--list-box__menu-icon {
|
| 14922 | cursor: not-allowed;
|
| 14923 | }
|
| 14924 |
|
| 14925 | .cds--dropdown--auto-width {
|
| 14926 | inline-size: auto;
|
| 14927 | max-inline-size: 25rem;
|
| 14928 | }
|
| 14929 |
|
| 14930 | .cds--dropdown--inline {
|
| 14931 | display: inline-block;
|
| 14932 | background-color: transparent;
|
| 14933 | border-block-end-color: transparent;
|
| 14934 | inline-size: auto;
|
| 14935 | justify-self: start;
|
| 14936 | transition: background 70ms cubic-bezier(0, 0, 0.38, 0.9);
|
| 14937 | }
|
| 14938 | .cds--dropdown--inline:hover {
|
| 14939 | background-color: var(--cds-layer-hover);
|
| 14940 | }
|
| 14941 | .cds--dropdown--inline.cds--dropdown--disabled {
|
| 14942 | background-color: transparent;
|
| 14943 | }
|
| 14944 | .cds--dropdown--inline .cds--dropdown__arrow {
|
| 14945 | inset-block-start: 0.5rem;
|
| 14946 | inset-inline-end: 0.5rem;
|
| 14947 | }
|
| 14948 |
|
| 14949 | .cds--dropdown--inline.cds--dropdown--open {
|
| 14950 | background-color: transparent;
|
| 14951 | }
|
| 14952 |
|
| 14953 | .cds--dropdown--inline .cds--dropdown-text {
|
| 14954 | display: inline-block;
|
| 14955 | overflow: visible;
|
| 14956 | padding: 0.4375rem 2rem 0.4375rem 0.75rem;
|
| 14957 | block-size: 2rem;
|
| 14958 | color: var(--cds-text-primary, #161616);
|
| 14959 | }
|
| 14960 |
|
| 14961 | .cds--dropdown--inline.cds--dropdown--disabled .cds--dropdown-text {
|
| 14962 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 14963 | }
|
| 14964 |
|
| 14965 | .cds--dropdown--inline.cds--dropdown--disabled:focus .cds--dropdown-text {
|
| 14966 | outline: 0;
|
| 14967 | }
|
| 14968 |
|
| 14969 | .cds--dropdown--inline.cds--dropdown--invalid .cds--dropdown__invalid-icon {
|
| 14970 | inset-inline-end: 2rem;
|
| 14971 | }
|
| 14972 |
|
| 14973 | .cds--dropdown--inline.cds--dropdown--invalid .cds--dropdown-text {
|
| 14974 | padding-inline-end: 3.5rem;
|
| 14975 | }
|
| 14976 |
|
| 14977 | .cds--dropdown--inline.cds--dropdown--open:focus .cds--dropdown-list {
|
| 14978 | box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
|
| 14979 | }
|
| 14980 |
|
| 14981 | .cds--dropdown--inline .cds--dropdown-link {
|
| 14982 | font-weight: normal;
|
| 14983 | }
|
| 14984 |
|
| 14985 | .cds--dropdown--show-selected .cds--dropdown--selected {
|
| 14986 | display: block;
|
| 14987 | background-color: var(--cds-layer-selected);
|
| 14988 | color: var(--cds-text-primary, #161616);
|
| 14989 | }
|
| 14990 | .cds--dropdown--show-selected .cds--dropdown--selected:hover {
|
| 14991 | background-color: var(--cds-layer-selected-hover);
|
| 14992 | }
|
| 14993 | .cds--dropdown--show-selected .cds--dropdown--selected .cds--dropdown-link {
|
| 14994 | border-block-start-color: transparent;
|
| 14995 | }
|
| 14996 | .cds--dropdown--show-selected .cds--dropdown--selected + .cds--dropdown-item .cds--dropdown-link {
|
| 14997 | border-block-start-color: transparent;
|
| 14998 | }
|
| 14999 | .cds--dropdown--show-selected .cds--dropdown--selected .cds--list-box__menu-item__selected-icon {
|
| 15000 | display: block;
|
| 15001 | }
|
| 15002 |
|
| 15003 | .cds--dropdown-v2.cds--skeleton,
|
| 15004 | .cds--dropdown.cds--skeleton {
|
| 15005 | position: relative;
|
| 15006 | padding: 0;
|
| 15007 | border: none;
|
| 15008 | background: var(--cds-skeleton-background, #e8e8e8);
|
| 15009 | box-shadow: none;
|
| 15010 | pointer-events: none;
|
| 15011 | }
|
| 15012 | .cds--dropdown-v2.cds--skeleton:hover, .cds--dropdown-v2.cds--skeleton:focus, .cds--dropdown-v2.cds--skeleton:active,
|
| 15013 | .cds--dropdown.cds--skeleton:hover,
|
| 15014 | .cds--dropdown.cds--skeleton:focus,
|
| 15015 | .cds--dropdown.cds--skeleton:active {
|
| 15016 | border: none;
|
| 15017 | cursor: default;
|
| 15018 | outline: none;
|
| 15019 | }
|
| 15020 | .cds--dropdown-v2.cds--skeleton::before,
|
| 15021 | .cds--dropdown.cds--skeleton::before {
|
| 15022 | position: absolute;
|
| 15023 | animation: 3000ms ease-in-out cds--skeleton infinite;
|
| 15024 | background: var(--cds-skeleton-element, #c6c6c6);
|
| 15025 | block-size: 100%;
|
| 15026 | content: "";
|
| 15027 | inline-size: 100%;
|
| 15028 | will-change: transform-origin, transform, opacity;
|
| 15029 | }
|
| 15030 | @media (prefers-reduced-motion: reduce) {
|
| 15031 | .cds--dropdown-v2.cds--skeleton::before,
|
| 15032 | .cds--dropdown.cds--skeleton::before {
|
| 15033 | animation: none;
|
| 15034 | }
|
| 15035 | }
|
| 15036 |
|
| 15037 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 15038 | .cds--dropdown .cds--list-box__field {
|
| 15039 | outline: 1px solid transparent;
|
| 15040 | }
|
| 15041 | }
|
| 15042 |
|
| 15043 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 15044 | .cds--list-box__menu-item__option {
|
| 15045 | outline: none;
|
| 15046 | }
|
| 15047 | }
|
| 15048 |
|
| 15049 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 15050 | .cds--list-box__menu-item__selected-icon {
|
| 15051 | fill: ButtonText;
|
| 15052 | }
|
| 15053 | }
|
| 15054 |
|
| 15055 | .cds--dropdown--readonly,
|
| 15056 | .cds--dropdown--readonly:hover {
|
| 15057 | background-color: transparent;
|
| 15058 | border-block-end-color: var(--cds-border-subtle);
|
| 15059 | }
|
| 15060 |
|
| 15061 | .cds--dropdown--inline.cds--dropdown--readonly {
|
| 15062 | border-block-end-color: transparent;
|
| 15063 | }
|
| 15064 |
|
| 15065 | .cds--dropdown--readonly .cds--list-box__field,
|
| 15066 | .cds--dropdown--readonly .cds--list-box__menu-icon {
|
| 15067 | cursor: default;
|
| 15068 | }
|
| 15069 |
|
| 15070 | .cds--dropdown--readonly .cds--list-box__menu-icon svg {
|
| 15071 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 15072 | }
|
| 15073 |
|
| 15074 | .cds--loading {
|
| 15075 | box-sizing: border-box;
|
| 15076 | padding: 0;
|
| 15077 | border: 0;
|
| 15078 | margin: 0;
|
| 15079 | font-family: inherit;
|
| 15080 | font-size: 100%;
|
| 15081 | vertical-align: baseline;
|
| 15082 | animation-duration: 690ms;
|
| 15083 | animation-fill-mode: forwards;
|
| 15084 | animation-iteration-count: infinite;
|
| 15085 | animation-name: cds--rotate;
|
| 15086 | animation-timing-function: linear;
|
| 15087 | block-size: 5.5rem;
|
| 15088 | inline-size: 5.5rem;
|
| 15089 | }
|
| 15090 | .cds--loading *,
|
| 15091 | .cds--loading *::before,
|
| 15092 | .cds--loading *::after {
|
| 15093 | box-sizing: inherit;
|
| 15094 | }
|
| 15095 | .cds--loading svg circle {
|
| 15096 | animation-duration: 10ms;
|
| 15097 | animation-name: cds--init-stroke;
|
| 15098 | animation-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
|
| 15099 | }
|
| 15100 | @media screen and (prefers-reduced-motion: reduce) {
|
| 15101 | .cds--loading svg circle {
|
| 15102 | animation: none;
|
| 15103 | }
|
| 15104 | }
|
| 15105 |
|
| 15106 | .cds--loading__svg {
|
| 15107 | fill: transparent;
|
| 15108 | }
|
| 15109 |
|
| 15110 | .cds--loading__svg circle {
|
| 15111 | stroke-dasharray: 276.4608 276.4608;
|
| 15112 | stroke-linecap: butt;
|
| 15113 | stroke-width: 10;
|
| 15114 | }
|
| 15115 |
|
| 15116 | .cds--loading__stroke {
|
| 15117 | stroke: var(--cds-interactive, #0f62fe);
|
| 15118 | stroke-dashoffset: 52.527552;
|
| 15119 | }
|
| 15120 |
|
| 15121 | .cds--loading--small .cds--loading__stroke {
|
| 15122 | stroke-dashoffset: 143.759616;
|
| 15123 | }
|
| 15124 |
|
| 15125 | .cds--loading--stop {
|
| 15126 | animation: cds--rotate-end-p1 700ms cubic-bezier(0, 0, 0.25, 1) forwards, cds--rotate-end-p2 700ms cubic-bezier(0, 0, 0.25, 1) 700ms forwards;
|
| 15127 | }
|
| 15128 | .cds--loading--stop svg circle {
|
| 15129 | animation-delay: 700ms;
|
| 15130 | animation-duration: 700ms;
|
| 15131 | animation-fill-mode: forwards;
|
| 15132 | animation-name: cds--stroke-end;
|
| 15133 | animation-timing-function: cubic-bezier(0, 0, 0.25, 1);
|
| 15134 | }
|
| 15135 | @media screen and (prefers-reduced-motion: reduce) {
|
| 15136 | .cds--loading--stop svg circle {
|
| 15137 | animation: none;
|
| 15138 | }
|
| 15139 | }
|
| 15140 |
|
| 15141 | .cds--loading--small {
|
| 15142 | block-size: 1rem;
|
| 15143 | inline-size: 1rem;
|
| 15144 | line-height: 1rem;
|
| 15145 | }
|
| 15146 | .cds--loading--small circle {
|
| 15147 | stroke-width: 16;
|
| 15148 | }
|
| 15149 |
|
| 15150 | .cds--loading--small .cds--loading__svg {
|
| 15151 | stroke: var(--cds-interactive, #0f62fe);
|
| 15152 | }
|
| 15153 |
|
| 15154 | .cds--loading__background {
|
| 15155 | stroke: var(--cds-layer-accent);
|
| 15156 | stroke-dashoffset: -22;
|
| 15157 | }
|
| 15158 |
|
| 15159 | @media not all and (resolution >= 0.001dpcm) {
|
| 15160 | @supports (-webkit-appearance: none) and (stroke-color: transparent) {
|
| 15161 | circle.cds--loading__background {
|
| 15162 | stroke-dasharray: 265;
|
| 15163 | stroke-dashoffset: 0;
|
| 15164 | }
|
| 15165 | }
|
| 15166 | }
|
| 15167 | .cds--loading-overlay {
|
| 15168 | position: fixed;
|
| 15169 | z-index: 6000;
|
| 15170 | display: flex;
|
| 15171 | align-items: center;
|
| 15172 | justify-content: center;
|
| 15173 | background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
|
| 15174 | block-size: 100%;
|
| 15175 | inline-size: 100%;
|
| 15176 | inset-block-start: 0;
|
| 15177 | inset-inline-start: 0;
|
| 15178 | transition: background-color 700ms cubic-bezier(0.4, 0.14, 0.3, 1);
|
| 15179 | }
|
| 15180 |
|
| 15181 | .cds--loading-overlay--stop {
|
| 15182 | display: none;
|
| 15183 | }
|
| 15184 |
|
| 15185 | @keyframes cds--rotate {
|
| 15186 | 0% {
|
| 15187 | transform: rotate(0deg);
|
| 15188 | }
|
| 15189 | 100% {
|
| 15190 | transform: rotate(360deg);
|
| 15191 | }
|
| 15192 | }
|
| 15193 | @keyframes cds--rotate-end-p1 {
|
| 15194 | 100% {
|
| 15195 | transform: rotate(360deg);
|
| 15196 | }
|
| 15197 | }
|
| 15198 | @keyframes cds--rotate-end-p2 {
|
| 15199 | 100% {
|
| 15200 | transform: rotate(-360deg);
|
| 15201 | }
|
| 15202 | }
|
| 15203 |
|
| 15204 | @keyframes cds--init-stroke {
|
| 15205 | 0% {
|
| 15206 | stroke-dashoffset: 276.4608;
|
| 15207 | }
|
| 15208 | 100% {
|
| 15209 | stroke-dashoffset: 52.527552;
|
| 15210 | }
|
| 15211 | }
|
| 15212 | @keyframes cds--stroke-end {
|
| 15213 | 0% {
|
| 15214 | stroke-dashoffset: 52.527552;
|
| 15215 | }
|
| 15216 | 100% {
|
| 15217 | stroke-dashoffset: 276.4608;
|
| 15218 | }
|
| 15219 | }
|
| 15220 | .cds--file {
|
| 15221 | inline-size: 100%;
|
| 15222 | }
|
| 15223 |
|
| 15224 | .cds--file--invalid {
|
| 15225 | fill: var(--cds-support-error, #da1e28);
|
| 15226 | margin-inline-end: 0.5rem;
|
| 15227 | }
|
| 15228 |
|
| 15229 | .cds--file--label {
|
| 15230 | font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
|
| 15231 | font-weight: var(--cds-heading-compact-01-font-weight, 600);
|
| 15232 | line-height: var(--cds-heading-compact-01-line-height, 1.28572);
|
| 15233 | letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
|
| 15234 | color: var(--cds-text-primary, #161616);
|
| 15235 | margin-block-end: 0.5rem;
|
| 15236 | }
|
| 15237 | .cds--file--label html {
|
| 15238 | font-size: 100%;
|
| 15239 | }
|
| 15240 | .cds--file--label body {
|
| 15241 | font-weight: 400;
|
| 15242 | font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
|
| 15243 | -moz-osx-font-smoothing: grayscale;
|
| 15244 | -webkit-font-smoothing: antialiased;
|
| 15245 | text-rendering: optimizeLegibility;
|
| 15246 | }
|
| 15247 | .cds--file--label code {
|
| 15248 | font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
|
| 15249 | }
|
| 15250 | .cds--file--label strong {
|
| 15251 | font-weight: 600;
|
| 15252 | }
|
| 15253 |
|
| 15254 | .cds--file--label--disabled {
|
| 15255 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 15256 | }
|
| 15257 |
|
| 15258 | .cds--file-input {
|
| 15259 | position: absolute;
|
| 15260 | overflow: hidden;
|
| 15261 | padding: 0;
|
| 15262 | border: 0;
|
| 15263 | margin: -1px;
|
| 15264 | block-size: 1px;
|
| 15265 | clip: rect(0, 0, 0, 0);
|
| 15266 | inline-size: 1px;
|
| 15267 | visibility: inherit;
|
| 15268 | white-space: nowrap;
|
| 15269 | }
|
| 15270 |
|
| 15271 | .cds--file-btn {
|
| 15272 | display: inline-flex;
|
| 15273 | margin: 0;
|
| 15274 | padding-inline-end: 4rem;
|
| 15275 | }
|
| 15276 |
|
| 15277 | .cds--file-browse-btn {
|
| 15278 | display: inline-block;
|
| 15279 | color: var(--cds-link-primary, #0f62fe);
|
| 15280 | cursor: pointer;
|
| 15281 | inline-size: 100%;
|
| 15282 | max-inline-size: 20rem;
|
| 15283 | outline: 2px solid transparent;
|
| 15284 | outline-offset: -2px;
|
| 15285 | transition: 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 15286 | }
|
| 15287 | .cds--file-browse-btn:focus, .cds--file-browse-btn:hover {
|
| 15288 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 15289 | }
|
| 15290 | .cds--file-browse-btn:hover, .cds--file-browse-btn:focus, .cds--file-browse-btn:active, .cds--file-browse-btn:active:visited {
|
| 15291 | text-decoration: underline;
|
| 15292 | }
|
| 15293 | .cds--file-browse-btn:active {
|
| 15294 | color: var(--cds-text-primary, #161616);
|
| 15295 | }
|
| 15296 |
|
| 15297 | .cds--file-browse-btn--disabled {
|
| 15298 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 15299 | cursor: no-drop;
|
| 15300 | text-decoration: none;
|
| 15301 | transition: none;
|
| 15302 | }
|
| 15303 | .cds--file-browse-btn--disabled:hover, .cds--file-browse-btn--disabled:focus {
|
| 15304 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 15305 | outline: none;
|
| 15306 | text-decoration: none;
|
| 15307 | }
|
| 15308 |
|
| 15309 | .cds--file-browse-btn--disabled .cds--file__drop-container {
|
| 15310 | border: 1px dashed var(--cds-button-disabled, #c6c6c6);
|
| 15311 | }
|
| 15312 |
|
| 15313 | .cds--label-description {
|
| 15314 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 15315 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 15316 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 15317 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 15318 | color: var(--cds-text-secondary, #525252);
|
| 15319 | margin-block-end: 1rem;
|
| 15320 | }
|
| 15321 | .cds--label-description html {
|
| 15322 | font-size: 100%;
|
| 15323 | }
|
| 15324 | .cds--label-description body {
|
| 15325 | font-weight: 400;
|
| 15326 | font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
|
| 15327 | -moz-osx-font-smoothing: grayscale;
|
| 15328 | -webkit-font-smoothing: antialiased;
|
| 15329 | text-rendering: optimizeLegibility;
|
| 15330 | }
|
| 15331 | .cds--label-description code {
|
| 15332 | font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
|
| 15333 | }
|
| 15334 | .cds--label-description strong {
|
| 15335 | font-weight: 600;
|
| 15336 | }
|
| 15337 |
|
| 15338 | .cds--label-description--disabled {
|
| 15339 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 15340 | }
|
| 15341 |
|
| 15342 | .cds--file-container--drop {
|
| 15343 | inline-size: 100%;
|
| 15344 | }
|
| 15345 |
|
| 15346 | .cds--file-btn ~ .cds--file-container {
|
| 15347 | margin-block-start: 1.5rem;
|
| 15348 | }
|
| 15349 |
|
| 15350 | .cds--btn ~ .cds--file-container {
|
| 15351 | margin-block-start: 1rem;
|
| 15352 | }
|
| 15353 |
|
| 15354 | .cds--file .cds--file-container,
|
| 15355 | .cds--file ~ .cds--file-container {
|
| 15356 | margin-block-start: 0.5rem;
|
| 15357 | }
|
| 15358 |
|
| 15359 | .cds--file__selected-file {
|
| 15360 | display: grid;
|
| 15361 | align-items: center;
|
| 15362 | background-color: var(--cds-layer);
|
| 15363 | gap: 0.75rem 0;
|
| 15364 | grid-auto-rows: auto;
|
| 15365 | grid-template-columns: 1fr auto;
|
| 15366 | margin-block-end: 0.5rem;
|
| 15367 | max-inline-size: 20rem;
|
| 15368 | min-block-size: 3rem;
|
| 15369 | word-break: break-word;
|
| 15370 | }
|
| 15371 | .cds--file__selected-file:last-child {
|
| 15372 | margin-block-end: 0;
|
| 15373 | }
|
| 15374 | .cds--file__selected-file .cds--form-requirement {
|
| 15375 | display: block;
|
| 15376 | margin: 0;
|
| 15377 | grid-column: 1/-1;
|
| 15378 | max-block-size: none;
|
| 15379 | }
|
| 15380 | .cds--file__selected-file .cds--inline-loading__animation .cds--loading {
|
| 15381 | margin-inline-end: 0;
|
| 15382 | }
|
| 15383 | .cds--file__selected-file .cds--file-filename {
|
| 15384 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 15385 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 15386 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 15387 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 15388 | overflow: hidden;
|
| 15389 | margin-inline-start: 1rem;
|
| 15390 | text-overflow: ellipsis;
|
| 15391 | white-space: nowrap;
|
| 15392 | }
|
| 15393 | .cds--file__selected-file .cds--file-filename-container-wrap {
|
| 15394 | margin-block-start: 1px;
|
| 15395 | max-inline-size: 17.5rem;
|
| 15396 | padding-inline-start: 1rem;
|
| 15397 | }
|
| 15398 | @media (max-width: 410px) {
|
| 15399 | .cds--file__selected-file .cds--file-filename-container-wrap {
|
| 15400 | max-inline-size: 13.5rem;
|
| 15401 | }
|
| 15402 | }
|
| 15403 | .cds--file__selected-file .cds--file-filename-container-wrap-invalid {
|
| 15404 | max-inline-size: 15.5rem;
|
| 15405 | }
|
| 15406 | .cds--file__selected-file .cds--file-filename-container-wrap-invalid .cds--file-filename-tooltip {
|
| 15407 | inline-size: -webkit-fill-available;
|
| 15408 | padding-inline-start: 1rem;
|
| 15409 | }
|
| 15410 | @-moz-document url-prefix() {
|
| 15411 | .cds--file__selected-file .cds--file-filename-container-wrap-invalid .cds--file-filename-tooltip {
|
| 15412 | inline-size: -moz-available;
|
| 15413 | }
|
| 15414 | }
|
| 15415 | .cds--file__selected-file .cds--file-filename-tooltip {
|
| 15416 | inline-size: -webkit-fill-available;
|
| 15417 | }
|
| 15418 | @-moz-document url-prefix() {
|
| 15419 | .cds--file__selected-file .cds--file-filename-tooltip {
|
| 15420 | inline-size: -moz-available;
|
| 15421 | }
|
| 15422 | }
|
| 15423 | .cds--file__selected-file .cds--file-filename-button {
|
| 15424 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 15425 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 15426 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 15427 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 15428 | overflow: hidden;
|
| 15429 | padding: 0;
|
| 15430 | border: none;
|
| 15431 | background: none;
|
| 15432 | color: inherit;
|
| 15433 | cursor: pointer;
|
| 15434 | font: inherit;
|
| 15435 | inline-size: -webkit-fill-available;
|
| 15436 | outline: inherit;
|
| 15437 | text-overflow: ellipsis;
|
| 15438 | white-space: nowrap;
|
| 15439 | }
|
| 15440 | @-moz-document url-prefix() {
|
| 15441 | .cds--file__selected-file .cds--file-filename-button {
|
| 15442 | inline-size: -moz-available;
|
| 15443 | }
|
| 15444 | }
|
| 15445 | .cds--file__selected-file .cds--file-filename-button:focus {
|
| 15446 | outline: revert;
|
| 15447 | }
|
| 15448 |
|
| 15449 | .cds--file__selected-file--md {
|
| 15450 | gap: 0.5rem 0;
|
| 15451 | min-block-size: 2.5rem;
|
| 15452 | }
|
| 15453 |
|
| 15454 | .cds--file__selected-file--sm {
|
| 15455 | gap: 0.25rem 0;
|
| 15456 | min-block-size: 2rem;
|
| 15457 | }
|
| 15458 |
|
| 15459 | .cds--file__selected-file--invalid__wrapper {
|
| 15460 | outline: 2px solid var(--cds-support-error, #da1e28);
|
| 15461 | outline-offset: -2px;
|
| 15462 | background-color: var(--cds-layer);
|
| 15463 | margin-block-end: 0.5rem;
|
| 15464 | max-inline-size: 20rem;
|
| 15465 | outline-width: 1px;
|
| 15466 | }
|
| 15467 | @media screen and (prefers-contrast) {
|
| 15468 | .cds--file__selected-file--invalid__wrapper {
|
| 15469 | outline-style: dotted;
|
| 15470 | }
|
| 15471 | }
|
| 15472 |
|
| 15473 | .cds--file__selected-file--invalid {
|
| 15474 | outline: 2px solid var(--cds-support-error, #da1e28);
|
| 15475 | outline-offset: -2px;
|
| 15476 | padding: 0.75rem 0;
|
| 15477 | }
|
| 15478 | @media screen and (prefers-contrast) {
|
| 15479 | .cds--file__selected-file--invalid {
|
| 15480 | outline-style: dotted;
|
| 15481 | }
|
| 15482 | }
|
| 15483 |
|
| 15484 | .cds--file__selected-file--invalid.cds--file__selected-file--sm {
|
| 15485 | padding: 0.25rem 0;
|
| 15486 | }
|
| 15487 |
|
| 15488 | .cds--file__selected-file--invalid.cds--file__selected-file--md {
|
| 15489 | padding: 0.5rem 0;
|
| 15490 | }
|
| 15491 |
|
| 15492 | .cds--file__selected-file--invalid .cds--form-requirement {
|
| 15493 | border-block-start: 1px solid var(--cds-border-subtle);
|
| 15494 | padding-block-start: 1rem;
|
| 15495 | }
|
| 15496 |
|
| 15497 | .cds--file__selected-file--invalid.cds--file__selected-file--sm .cds--form-requirement {
|
| 15498 | padding-block-start: 0.4375rem;
|
| 15499 | }
|
| 15500 |
|
| 15501 | .cds--file__selected-file--invalid.cds--file__selected-file--md .cds--form-requirement {
|
| 15502 | padding-block-start: 0.6875rem;
|
| 15503 | }
|
| 15504 |
|
| 15505 | .cds--file__selected-file--invalid .cds--form-requirement__title,
|
| 15506 | .cds--file__selected-file--invalid .cds--form-requirement__supplement {
|
| 15507 | font-size: var(--cds-label-01-font-size, 0.75rem);
|
| 15508 | font-weight: var(--cds-label-01-font-weight, 400);
|
| 15509 | line-height: var(--cds-label-01-line-height, 1.33333);
|
| 15510 | letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
|
| 15511 | padding: 0 1rem;
|
| 15512 | }
|
| 15513 |
|
| 15514 | .cds--file__selected-file--invalid .cds--form-requirement__title {
|
| 15515 | color: var(--cds-text-error, #da1e28);
|
| 15516 | }
|
| 15517 |
|
| 15518 | .cds--file__selected-file--invalid .cds--form-requirement__supplement {
|
| 15519 | color: var(--cds-text-primary, #161616);
|
| 15520 | }
|
| 15521 |
|
| 15522 | .cds--file__selected-file--invalid + .cds--form-requirement {
|
| 15523 | font-size: var(--cds-label-01-font-size, 0.75rem);
|
| 15524 | font-weight: var(--cds-label-01-font-weight, 400);
|
| 15525 | line-height: var(--cds-label-01-line-height, 1.33333);
|
| 15526 | letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
|
| 15527 | display: block;
|
| 15528 | overflow: visible;
|
| 15529 | padding: 0.5rem 1rem;
|
| 15530 | color: var(--cds-text-error, #da1e28);
|
| 15531 | font-weight: 400;
|
| 15532 | max-block-size: 12.5rem;
|
| 15533 | }
|
| 15534 |
|
| 15535 | .cds--file__selected-file--invalid + .cds--form-requirement .cds--form-requirement__supplement {
|
| 15536 | color: var(--cds-text-primary, #161616);
|
| 15537 | padding-block-end: 0.5rem;
|
| 15538 | }
|
| 15539 |
|
| 15540 | .cds--file__state-container {
|
| 15541 | display: flex;
|
| 15542 | align-items: center;
|
| 15543 | justify-content: center;
|
| 15544 | min-inline-size: 1.5rem;
|
| 15545 | padding-inline-end: 0.75rem;
|
| 15546 | }
|
| 15547 | .cds--file__state-container .cds--loading__svg {
|
| 15548 | stroke: var(--cds-icon-primary, #161616);
|
| 15549 | }
|
| 15550 |
|
| 15551 | .cds--file__state-container .cds--file-loading {
|
| 15552 | display: flex;
|
| 15553 | align-items: center;
|
| 15554 | justify-content: center;
|
| 15555 | padding: 0.25rem;
|
| 15556 | border: none;
|
| 15557 | background-color: transparent;
|
| 15558 | block-size: 1rem;
|
| 15559 | inline-size: 1.5rem;
|
| 15560 | }
|
| 15561 |
|
| 15562 | .cds--file__state-container .cds--file-complete {
|
| 15563 | fill: var(--cds-interactive, #0f62fe);
|
| 15564 | inline-size: 1.5rem;
|
| 15565 | }
|
| 15566 | .cds--file__state-container .cds--file-complete:focus {
|
| 15567 | outline: 1px solid var(--cds-focus, #0f62fe);
|
| 15568 | }
|
| 15569 | @media screen and (prefers-contrast) {
|
| 15570 | .cds--file__state-container .cds--file-complete:focus {
|
| 15571 | outline-style: dotted;
|
| 15572 | }
|
| 15573 | }
|
| 15574 | .cds--file__state-container .cds--file-complete [data-icon-path=inner-path] {
|
| 15575 | fill: var(--cds-icon-inverse, #ffffff);
|
| 15576 | opacity: 1;
|
| 15577 | }
|
| 15578 |
|
| 15579 | .cds--file__state-container .cds--file-invalid {
|
| 15580 | block-size: 1rem;
|
| 15581 | fill: var(--cds-support-error, #da1e28);
|
| 15582 | inline-size: 1rem;
|
| 15583 | }
|
| 15584 |
|
| 15585 | .cds--file__state-container .cds--file-close {
|
| 15586 | display: flex;
|
| 15587 | align-items: center;
|
| 15588 | justify-content: center;
|
| 15589 | padding: 0;
|
| 15590 | border: none;
|
| 15591 | background-color: transparent;
|
| 15592 | block-size: 1.5rem;
|
| 15593 | cursor: pointer;
|
| 15594 | fill: var(--cds-icon-primary, #161616);
|
| 15595 | inline-size: 1.5rem;
|
| 15596 | }
|
| 15597 | .cds--file__state-container .cds--file-close:focus {
|
| 15598 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 15599 | outline-offset: -2px;
|
| 15600 | }
|
| 15601 | @media screen and (prefers-contrast) {
|
| 15602 | .cds--file__state-container .cds--file-close:focus {
|
| 15603 | outline-style: dotted;
|
| 15604 | }
|
| 15605 | }
|
| 15606 |
|
| 15607 | .cds--file__state-container .cds--file-close svg path {
|
| 15608 | fill: var(--cds-icon-primary, #161616);
|
| 15609 | }
|
| 15610 |
|
| 15611 | .cds--file__state-container .cds--inline-loading__animation {
|
| 15612 | margin-inline-end: -0.5rem;
|
| 15613 | }
|
| 15614 |
|
| 15615 | .cds--file__drop-container {
|
| 15616 | box-sizing: border-box;
|
| 15617 | padding: 0;
|
| 15618 | border: 0;
|
| 15619 | margin: 0;
|
| 15620 | font-family: inherit;
|
| 15621 | font-size: 100%;
|
| 15622 | vertical-align: baseline;
|
| 15623 | display: inline-block;
|
| 15624 | padding: 0;
|
| 15625 | border: 0;
|
| 15626 | -webkit-appearance: none;
|
| 15627 | -moz-appearance: none;
|
| 15628 | appearance: none;
|
| 15629 | background: none;
|
| 15630 | cursor: pointer;
|
| 15631 | text-align: start;
|
| 15632 | inline-size: 100%;
|
| 15633 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 15634 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 15635 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 15636 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 15637 | display: flex;
|
| 15638 | overflow: hidden;
|
| 15639 | align-items: flex-start;
|
| 15640 | justify-content: space-between;
|
| 15641 | padding: 1rem;
|
| 15642 | border: 1px dashed var(--cds-border-strong);
|
| 15643 | block-size: 6rem;
|
| 15644 | }
|
| 15645 | .cds--file__drop-container *,
|
| 15646 | .cds--file__drop-container *::before,
|
| 15647 | .cds--file__drop-container *::after {
|
| 15648 | box-sizing: inherit;
|
| 15649 | }
|
| 15650 | .cds--file__drop-container::-moz-focus-inner {
|
| 15651 | border: 0;
|
| 15652 | }
|
| 15653 |
|
| 15654 | .cds--file__drop-container--drag-over {
|
| 15655 | background: none;
|
| 15656 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 15657 | outline-offset: -2px;
|
| 15658 | }
|
| 15659 |
|
| 15660 |
|
| 15661 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 15662 | .cds--file__selected-file {
|
| 15663 | outline: 1px solid transparent;
|
| 15664 | }
|
| 15665 | }
|
| 15666 |
|
| 15667 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 15668 | .cds--file__state-container .cds--file-close svg path {
|
| 15669 | fill: ButtonText;
|
| 15670 | }
|
| 15671 | }
|
| 15672 |
|
| 15673 |
|
| 15674 | .cds--list-box__wrapper--fluid.cds--list-box__wrapper {
|
| 15675 | position: relative;
|
| 15676 | background: var(--cds-field);
|
| 15677 | block-size: 100%;
|
| 15678 | transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 15679 | }
|
| 15680 |
|
| 15681 | .cds--list-box__wrapper--fluid .cds--list-box {
|
| 15682 | padding: 0;
|
| 15683 | min-block-size: 4rem;
|
| 15684 | }
|
| 15685 |
|
| 15686 | .cds--list-box__wrapper--fluid .cds--label {
|
| 15687 | position: absolute;
|
| 15688 | z-index: 1;
|
| 15689 | display: flex;
|
| 15690 | align-items: center;
|
| 15691 | margin: 0;
|
| 15692 | block-size: 1rem;
|
| 15693 | inline-size: calc(100% - 2rem);
|
| 15694 | inset-block-start: 0.8125rem;
|
| 15695 | inset-inline-start: 1rem;
|
| 15696 | }
|
| 15697 |
|
| 15698 | .cds--list-box__wrapper--fluid .cds--label::-webkit-scrollbar,
|
| 15699 | .cds--list-box__wrapper--fluid .cds--label .cds--toggletip-label::-webkit-scrollbar {
|
| 15700 | display: none;
|
| 15701 | }
|
| 15702 |
|
| 15703 | .cds--list-box__wrapper--fluid .cds--label:not(:has(.cds--toggletip-label)),
|
| 15704 | .cds--list-box__wrapper--fluid .cds--label .cds--toggletip-label {
|
| 15705 | -ms-overflow-style: none;
|
| 15706 | overflow-x: scroll;
|
| 15707 | scrollbar-width: none;
|
| 15708 | white-space: nowrap;
|
| 15709 | }
|
| 15710 |
|
| 15711 | .cds--list-box__wrapper--fluid .cds--list-box__field {
|
| 15712 | padding-block-end: 0.8125rem;
|
| 15713 | padding-block-start: 2.0625rem;
|
| 15714 | padding-inline-start: 1rem;
|
| 15715 | }
|
| 15716 |
|
| 15717 | .cds--list-box__wrapper--fluid .cds--list-box__menu-icon {
|
| 15718 | block-size: 1rem;
|
| 15719 | inline-size: 1rem;
|
| 15720 | }
|
| 15721 |
|
| 15722 | .cds--list-box__wrapper--fluid:not(.cds--list-box__wrapper--fluid--condensed) .cds--list-box__menu-item {
|
| 15723 | block-size: 4rem;
|
| 15724 | }
|
| 15725 |
|
| 15726 | .cds--list-box__wrapper--fluid:not(.cds--list-box__wrapper--fluid--condensed) .cds--list-box__menu-item__selected-icon {
|
| 15727 | inset-block-start: 1.25rem;
|
| 15728 | }
|
| 15729 |
|
| 15730 | .cds--list-box__wrapper--fluid .cds--label--disabled .cds--toggletip-label {
|
| 15731 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 15732 | }
|
| 15733 |
|
| 15734 | .cds--list-box__wrapper--fluid .cds--label--disabled .cds--toggletip-button {
|
| 15735 | cursor: not-allowed;
|
| 15736 | pointer-events: none;
|
| 15737 | }
|
| 15738 |
|
| 15739 | .cds--list-box__wrapper--fluid .cds--label--disabled .cds--toggletip-button svg {
|
| 15740 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 15741 | }
|
| 15742 |
|
| 15743 | .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--focus {
|
| 15744 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 15745 | outline-offset: -2px;
|
| 15746 | z-index: 2;
|
| 15747 | outline-offset: 0;
|
| 15748 | }
|
| 15749 | @media screen and (prefers-contrast) {
|
| 15750 | .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--focus {
|
| 15751 | outline-style: dotted;
|
| 15752 | }
|
| 15753 | }
|
| 15754 |
|
| 15755 | .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--focus:has(.cds--combo-box) {
|
| 15756 | outline: none;
|
| 15757 | }
|
| 15758 |
|
| 15759 | .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--focus:has(.cds--list-box--expanded) {
|
| 15760 | outline-width: 0.0625rem;
|
| 15761 | }
|
| 15762 |
|
| 15763 | .cds--list-box__wrapper--fluid .cds--list-box__field:focus {
|
| 15764 | outline: none;
|
| 15765 | outline-offset: 0;
|
| 15766 | }
|
| 15767 |
|
| 15768 | .cds--list-box__wrapper--fluid:not(.cds--list-box--up) .cds--list-box__menu {
|
| 15769 | inset-block-start: 100%;
|
| 15770 | }
|
| 15771 |
|
| 15772 | .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid:not(.cds--list-box__wrapper--fluid--focus) {
|
| 15773 | outline: 2px solid var(--cds-support-error, #da1e28);
|
| 15774 | outline-offset: -2px;
|
| 15775 | z-index: 2;
|
| 15776 | outline-offset: 0;
|
| 15777 | }
|
| 15778 | @media screen and (prefers-contrast) {
|
| 15779 | .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid:not(.cds--list-box__wrapper--fluid--focus) {
|
| 15780 | outline-style: dotted;
|
| 15781 | }
|
| 15782 | }
|
| 15783 |
|
| 15784 | .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--focus .cds--list-box:not(.cds--list-box--invalid),
|
| 15785 | .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--focus .cds--list-box .cds--text-input,
|
| 15786 | .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid .cds--list-box .cds--text-input,
|
| 15787 | .cds--list-box__wrapper--fluid .cds--combo-box.cds--list-box--warning .cds--text-input {
|
| 15788 | border-block-end: 1px solid transparent;
|
| 15789 | }
|
| 15790 |
|
| 15791 | .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid .cds--list-box,
|
| 15792 | .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid .cds--list-box__field:focus,
|
| 15793 | .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid .cds--combo-box[data-invalid] .cds--text-input {
|
| 15794 | outline: none;
|
| 15795 | outline-offset: 0;
|
| 15796 | }
|
| 15797 |
|
| 15798 | .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid:focus-within {
|
| 15799 | outline-offset: 0;
|
| 15800 | }
|
| 15801 |
|
| 15802 | .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid .cds--list-box,
|
| 15803 | .cds--list-box__wrapper--fluid .cds--list-box--warning {
|
| 15804 | border-block-end: 1px solid transparent;
|
| 15805 | }
|
| 15806 |
|
| 15807 | .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid .cds--form-requirement,
|
| 15808 | .cds--list-box__wrapper--fluid .cds--list-box--warning ~ .cds--form-requirement {
|
| 15809 | padding: 0.5rem 4rem 0.5rem 1rem;
|
| 15810 | margin-block-start: 0;
|
| 15811 | }
|
| 15812 |
|
| 15813 | .cds--list-box__wrapper--fluid .cds--list-box--warning ~ .cds--form-requirement {
|
| 15814 | border-block-end: 1px solid var(--cds-border-strong);
|
| 15815 | }
|
| 15816 |
|
| 15817 | .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid .cds--list-box[data-invalid] .cds--list-box__invalid-icon,
|
| 15818 | .cds--list-box__wrapper--fluid .cds--list-box.cds--list-box--warning .cds--list-box__invalid-icon {
|
| 15819 | inset-block-start: 5.0625rem;
|
| 15820 | inset-inline-end: 1rem;
|
| 15821 | pointer-events: none;
|
| 15822 | }
|
| 15823 |
|
| 15824 | .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid .cds--list-box[data-invalid]:not(.cds--combo-box) .cds--list-box__field {
|
| 15825 | padding-inline-end: 3rem;
|
| 15826 | }
|
| 15827 |
|
| 15828 | .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid .cds--list-box[data-invalid].cds--combo-box .cds--text-input {
|
| 15829 | padding-inline-end: 4rem;
|
| 15830 | }
|
| 15831 |
|
| 15832 | .cds--list-box__wrapper--fluid .cds--list-box__divider {
|
| 15833 | display: none;
|
| 15834 | transition: border-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 15835 | }
|
| 15836 |
|
| 15837 | .cds--list-box__wrapper--fluid .cds--list-box--invalid ~ .cds--list-box__divider,
|
| 15838 | .cds--list-box__wrapper--fluid .cds--list-box--warning ~ .cds--list-box__divider {
|
| 15839 | display: block;
|
| 15840 | border: none;
|
| 15841 | margin: 0 1rem;
|
| 15842 | border-block-end: 1px solid var(--cds-border-subtle);
|
| 15843 | }
|
| 15844 |
|
| 15845 | .cds--list-box__wrapper--fluid .cds--list-box--invalid:hover:not(.cds--combo-box) ~ .cds--list-box__divider,
|
| 15846 | .cds--list-box__wrapper--fluid .cds--list-box--warning:hover:not(.cds--combo-box) ~ .cds--list-box__divider {
|
| 15847 | border-color: transparent;
|
| 15848 | }
|
| 15849 |
|
| 15850 | .cds--list-box__wrapper--fluid.cds--list-box--up .cds--list-box__menu {
|
| 15851 | inset-block-end: 4rem;
|
| 15852 | }
|
| 15853 |
|
| 15854 | .cds--list-box__wrapper--fluid .cds--skeleton {
|
| 15855 | background: var(--cds-skeleton-background, #e8e8e8);
|
| 15856 | border-block-end: 1px solid var(--cds-skeleton-element, #c6c6c6);
|
| 15857 | }
|
| 15858 |
|
| 15859 | .cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__field {
|
| 15860 | position: absolute;
|
| 15861 | padding: 0;
|
| 15862 | block-size: 0.5rem;
|
| 15863 | inline-size: 50%;
|
| 15864 | inset-block-start: 2.25rem;
|
| 15865 | inset-inline-start: 1rem;
|
| 15866 | }
|
| 15867 |
|
| 15868 | .cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__label {
|
| 15869 | position: absolute;
|
| 15870 | block-size: 0.5rem;
|
| 15871 | inline-size: 25%;
|
| 15872 | inset-block-start: 1rem;
|
| 15873 | inset-inline-start: 1rem;
|
| 15874 | }
|
| 15875 |
|
| 15876 | .cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__field,
|
| 15877 | .cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__label {
|
| 15878 | animation: 3000ms ease-in-out skeleton infinite;
|
| 15879 | background: var(--cds-skeleton-element, #c6c6c6);
|
| 15880 | }
|
| 15881 |
|
| 15882 | .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--slug {
|
| 15883 | inset-block-start: 2.625rem;
|
| 15884 | }
|
| 15885 |
|
| 15886 | .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--warning .cds--slug,
|
| 15887 | .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--invalid .cds--slug {
|
| 15888 | inset-inline-end: 2.5rem;
|
| 15889 | }
|
| 15890 |
|
| 15891 | .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--warning button.cds--list-box__field,
|
| 15892 | .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid.cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] button.cds--list-box__field {
|
| 15893 | padding-inline-end: 4rem;
|
| 15894 | }
|
| 15895 |
|
| 15896 | .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--warning .cds--text-input:not(.cds--text-input--empty),
|
| 15897 | .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug.cds--list-box__wrapper--fluid--invalid .cds--list-box--invalid .cds--text-input:not(.cds--text-input--empty) {
|
| 15898 | padding-inline-end: 5.5rem;
|
| 15899 | }
|
| 15900 |
|
| 15901 | .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--warning .cds--list-box__field:has(.cds--text-input:not(.cds--text-input--empty)) ~ .cds--slug,
|
| 15902 | .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--invalid .cds--list-box__field:has(.cds--text-input:not(.cds--text-input--empty)) ~ .cds--slug {
|
| 15903 | inset-inline-end: 4rem;
|
| 15904 | }
|
| 15905 |
|
| 15906 | .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--text-input:not(.cds--text-input--empty) {
|
| 15907 | padding-inline-end: 6rem;
|
| 15908 | }
|
| 15909 |
|
| 15910 | .cds--list-box__wrapper--fluid .cds--list-box__selection {
|
| 15911 | inset-inline-end: 2.5625rem;
|
| 15912 | }
|
| 15913 |
|
| 15914 | .cds--list-box__wrapper--fluid .cds--list-box--warning .cds--list-box__field:has(.cds--list-box__menu-icon) .cds--list-box__selection::before,
|
| 15915 | .cds--list-box__wrapper--fluid .cds--list-box--invalid[data-invalid] .cds--list-box__field:has(.cds--list-box__menu-icon) .cds--list-box__selection::before {
|
| 15916 | position: absolute;
|
| 15917 | background-color: transparent;
|
| 15918 | block-size: 1rem;
|
| 15919 | content: "";
|
| 15920 | inline-size: 0.0625rem;
|
| 15921 | margin-inline-end: 2.0625rem;
|
| 15922 | }
|
| 15923 |
|
| 15924 | .cds--list-box__wrapper--fluid:has(.cds--multi-select) .cds--list-box__menu-icon {
|
| 15925 | inset-inline-end: 0.75rem;
|
| 15926 | }
|
| 15927 |
|
| 15928 | .cds--list-box__wrapper--fluid:has(.cds--dropdown) .cds--list-box__menu-icon {
|
| 15929 | inset-inline-end: 0.75rem;
|
| 15930 | }
|
| 15931 |
|
| 15932 | .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--slug::before,
|
| 15933 | .cds--list-box__wrapper--slug .cds--list-box--warning .cds--slug::before {
|
| 15934 | display: none;
|
| 15935 | }
|
| 15936 |
|
| 15937 | .cds--list-box__wrapper--fluid .cds--combo-box .cds--list-box__field {
|
| 15938 | overflow: visible;
|
| 15939 | padding: 0;
|
| 15940 | }
|
| 15941 |
|
| 15942 | .cds--list-box__wrapper--fluid .cds--combo-box .cds--text-input {
|
| 15943 | overflow: hidden;
|
| 15944 | padding-block: 2.0625rem 0.8125rem;
|
| 15945 | padding-inline: 1rem 4rem;
|
| 15946 | text-overflow: ellipsis;
|
| 15947 | transition: none;
|
| 15948 | white-space: nowrap;
|
| 15949 | }
|
| 15950 |
|
| 15951 | .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--focus .cds--combo-box.cds--list-box--expanded:has(input[aria-activedescendant]:not([aria-activedescendant=""])) .cds--combo-box--input--focus.cds--text-input {
|
| 15952 | outline-offset: -0.0625rem;
|
| 15953 | outline-width: 0.0625rem;
|
| 15954 | }
|
| 15955 |
|
| 15956 | .cds--list-box__wrapper--fluid .cds--combo-box .cds--list-box__selection {
|
| 15957 | inset-block-end: 0.625rem;
|
| 15958 | inset-block-start: auto;
|
| 15959 | transform: none;
|
| 15960 | }
|
| 15961 |
|
| 15962 | .cds--list-box__wrapper--fluid .cds--combo-box .cds--list-box__menu-icon {
|
| 15963 | inset-block-end: 0.875rem;
|
| 15964 | }
|
| 15965 |
|
| 15966 | .cds--list-box__wrapper--fluid .cds--list-box[data-invalid] .cds--list-box__field .cds--text-input + .cds--list-box__invalid-icon,
|
| 15967 | .cds--list-box__wrapper--fluid .cds--list-box--warning .cds--list-box__field .cds--text-input + .cds--list-box__invalid-icon {
|
| 15968 | inset-inline-end: 1rem;
|
| 15969 | }
|
| 15970 |
|
| 15971 | .cds--list-box__wrapper--fluid :not(.cds--list-box--up) .cds--combo-box .cds--list-box__menu {
|
| 15972 | inset-block-start: calc(100% + 0.0625rem);
|
| 15973 | }
|
| 15974 |
|
| 15975 | .cds--date-picker--fluid {
|
| 15976 | display: inline-flex;
|
| 15977 | background: var(--cds-field);
|
| 15978 | }
|
| 15979 |
|
| 15980 | .cds--date-picker--fluid .cds--date-picker {
|
| 15981 | position: relative;
|
| 15982 | block-size: 100%;
|
| 15983 | inline-size: 100%;
|
| 15984 | transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 15985 | }
|
| 15986 |
|
| 15987 | .cds--date-picker--fluid .cds--label {
|
| 15988 | position: absolute;
|
| 15989 | z-index: 1;
|
| 15990 | display: flex;
|
| 15991 | align-items: center;
|
| 15992 | margin: 0;
|
| 15993 | block-size: 1rem;
|
| 15994 | inline-size: calc(100% - 2rem);
|
| 15995 | inset-block-start: 0.8125rem;
|
| 15996 | inset-inline-start: 1rem;
|
| 15997 | }
|
| 15998 |
|
| 15999 | .cds--date-picker--fluid .cds--label::-webkit-scrollbar,
|
| 16000 | .cds--date-picker--fluid .cds--label .cds--toggletip-label::-webkit-scrollbar {
|
| 16001 | display: none;
|
| 16002 | }
|
| 16003 |
|
| 16004 | .cds--date-picker--fluid .cds--label:not(:has(.cds--toggletip-label)),
|
| 16005 | .cds--date-picker--fluid .cds--label .cds--toggletip-label {
|
| 16006 | -ms-overflow-style: none;
|
| 16007 | overflow-x: scroll;
|
| 16008 | scrollbar-width: none;
|
| 16009 | white-space: nowrap;
|
| 16010 | }
|
| 16011 |
|
| 16012 | .cds--date-picker--fluid .cds--date-picker-input__wrapper > span {
|
| 16013 | inline-size: 100%;
|
| 16014 | }
|
| 16015 |
|
| 16016 | .cds--date-picker--fluid .cds--date-picker-input__wrapper .cds--date-picker__input {
|
| 16017 | padding: 2rem 1rem 0.8125rem;
|
| 16018 | background: transparent;
|
| 16019 | border-block-end: none;
|
| 16020 | min-block-size: 4rem;
|
| 16021 | min-inline-size: 9rem;
|
| 16022 | }
|
| 16023 |
|
| 16024 | .cds--date-picker--fluid .cds--date-picker--simple .cds--date-picker__icon {
|
| 16025 | display: none;
|
| 16026 | }
|
| 16027 |
|
| 16028 | .cds--date-picker--fluid .cds--date-picker--simple .cds--date-picker__input:not(.cds--date-picker__input--invalid):not(.cds--date-picker__input--warn),
|
| 16029 | .cds--date-picker--fluid .cds--date-picker--simple .cds--date-picker--fluid--warn {
|
| 16030 | border-block-end: 1px solid var(--cds-border-strong);
|
| 16031 | }
|
| 16032 |
|
| 16033 | .cds--date-picker--fluid .cds--date-picker__icon {
|
| 16034 | inset-block-start: 2.6875rem;
|
| 16035 | }
|
| 16036 |
|
| 16037 | .cds--date-picker--fluid .cds--date-picker--single .cds--date-picker__input {
|
| 16038 | inline-size: 100%;
|
| 16039 | }
|
| 16040 |
|
| 16041 | .cds--date-picker--fluid .cds--date-picker--single {
|
| 16042 | border-block-end: none;
|
| 16043 | }
|
| 16044 |
|
| 16045 | .cds--date-picker--fluid .cds--date-picker--single .cds--date-picker__input:not(.cds--date-picker__input--invalid),
|
| 16046 | .cds--date-picker--single .cds--date-picker--fluid--warn {
|
| 16047 | border-block-end: 1px solid var(--cds-border-strong);
|
| 16048 | }
|
| 16049 |
|
| 16050 | .cds--date-picker--fluid:not(.cds--date-picker--fluid--invalid):not(.cds--date-picker--fluid--warn) .cds--date-picker--range .cds--date-picker-container:not(.cds--date-picker--fluid--invalid) {
|
| 16051 | border-block-end: 1px solid var(--cds-border-strong);
|
| 16052 | }
|
| 16053 |
|
| 16054 | .cds--date-picker--fluid .cds--date-picker--range .cds--date-picker__input,
|
| 16055 | .cds--date-picker--fluid .cds--date-picker--range .cds--date-picker-container {
|
| 16056 | inline-size: 100%;
|
| 16057 | min-block-size: 3.9375rem;
|
| 16058 | min-inline-size: 9rem;
|
| 16059 | }
|
| 16060 |
|
| 16061 | .cds--date-picker--fluid .cds--date-picker--range > .cds--date-picker-container:first-child {
|
| 16062 | margin-inline-end: 0;
|
| 16063 | }
|
| 16064 |
|
| 16065 | .cds--date-picker--fluid .cds--date-picker--range > .cds--date-picker-container:last-child .cds--date-picker__input {
|
| 16066 | border-inline-start: 1px solid var(--cds-border-strong);
|
| 16067 | }
|
| 16068 |
|
| 16069 | .cds--date-picker--fluid.cds--date-picker--fluid--invalid,
|
| 16070 | .cds--date-picker-container.cds--date-picker--fluid--invalid {
|
| 16071 | outline: 2px solid var(--cds-support-error, #da1e28);
|
| 16072 | outline-offset: -2px;
|
| 16073 | }
|
| 16074 | @media screen and (prefers-contrast) {
|
| 16075 | .cds--date-picker--fluid.cds--date-picker--fluid--invalid,
|
| 16076 | .cds--date-picker-container.cds--date-picker--fluid--invalid {
|
| 16077 | outline-style: dotted;
|
| 16078 | }
|
| 16079 | }
|
| 16080 |
|
| 16081 | .cds--date-picker--fluid .cds--date-picker-container.cds--date-picker--fluid--invalid .cds--date-picker__input--invalid {
|
| 16082 | outline: none;
|
| 16083 | }
|
| 16084 |
|
| 16085 | .cds--date-picker--fluid .cds--date-picker-container:last-child.cds--date-picker--fluid--invalid .cds--date-picker__input--invalid,
|
| 16086 | .cds--date-picker--fluid .cds--date-picker-container.cds--date-picker--fluid--invalid + .cds--date-picker-container .cds--date-picker__input {
|
| 16087 | border-inline-start: none;
|
| 16088 | }
|
| 16089 |
|
| 16090 | .cds--date-picker-container.cds--date-picker--fluid--invalid .cds--form-requirement,
|
| 16091 | .cds--date-picker-container.cds--date-picker--fluid--warn .cds--form-requirement {
|
| 16092 | padding: 0.5rem 2.5rem 0.5rem 1rem;
|
| 16093 | margin: 0;
|
| 16094 | }
|
| 16095 |
|
| 16096 | .cds--date-picker-container.cds--date-picker--fluid--invalid .cds--date-picker--fluid.cds--date-picker--fluid--invalid .cds--date-picker,
|
| 16097 | .cds--date-picker--fluid.cds--date-picker--fluid--invalid .cds--date-picker,
|
| 16098 | .cds--date-picker--fluid .cds--date-picker--single .cds--date-picker--fluid--warn .cds--date-picker__input,
|
| 16099 | .cds--date-picker--fluid.cds--date-picker--fluid--warn .cds--date-picker--range .cds--date-picker-container {
|
| 16100 | border-block-end: 1px solid transparent;
|
| 16101 | }
|
| 16102 |
|
| 16103 | .cds--date-picker--fluid.cds--date-picker--fluid--invalid .cds--date-picker--range > .cds--date-picker-container:last-child .cds--date-picker__input,
|
| 16104 | .cds--date-picker--fluid.cds--date-picker--fluid--warn .cds--date-picker--range > .cds--date-picker-container:last-child .cds--date-picker__input,
|
| 16105 | .cds--date-picker--fluid .cds--date-picker--fluid--warn + .cds--date-picker-container:last-child .cds--date-picker__input,
|
| 16106 | .cds--date-picker--fluid .cds--date-picker--fluid--warn.cds--date-picker-container:last-child .cds--date-picker__input {
|
| 16107 | border-inline-start: 1px solid transparent;
|
| 16108 | }
|
| 16109 |
|
| 16110 | .cds--date-picker--fluid.cds--date-picker--fluid--invalid .cds--date-picker--range > .cds--date-picker-container:first-child::after,
|
| 16111 | .cds--date-picker--fluid.cds--date-picker--fluid--warn .cds--date-picker--range > .cds--date-picker-container:first-child::after,
|
| 16112 | .cds--date-picker--fluid .cds--date-picker--range .cds--date-picker--fluid--warn.cds--date-picker-container:first-child::after,
|
| 16113 | .cds--date-picker--fluid .cds--date-picker--range .cds--date-picker--fluid--warn.cds--date-picker-container:last-child::after {
|
| 16114 | position: absolute;
|
| 16115 | display: block;
|
| 16116 | background: var(--cds-border-strong);
|
| 16117 | block-size: calc(100% - 1rem);
|
| 16118 | content: "";
|
| 16119 | inline-size: 1px;
|
| 16120 | inset-block-start: 0.5rem;
|
| 16121 | inset-inline-end: 0;
|
| 16122 | }
|
| 16123 |
|
| 16124 | .cds--date-picker--fluid .cds--date-picker--fluid--warn.cds--date-picker-container:last-child::after {
|
| 16125 | inset-inline-start: 0;
|
| 16126 | }
|
| 16127 |
|
| 16128 | .cds--date-picker--fluid .cds--date-picker__divider {
|
| 16129 | border-style: solid;
|
| 16130 | border-color: var(--cds-border-subtle);
|
| 16131 | margin: 0 1rem;
|
| 16132 | border-block-end: none;
|
| 16133 | inline-size: calc(100% - 2rem);
|
| 16134 | }
|
| 16135 |
|
| 16136 | .cds--date-picker-container.cds--date-picker--fluid--invalid .cds--date-picker__icon--invalid,
|
| 16137 | .cds--date-picker-container.cds--date-picker--fluid--warn .cds--date-picker__icon--warn {
|
| 16138 | inset-block-start: 5rem;
|
| 16139 | }
|
| 16140 |
|
| 16141 | .cds--date-picker--fluid .cds--date-picker--simple .cds--date-picker--fluid--invalid .cds--date-picker__icon--invalid,
|
| 16142 | .cds--date-picker--fluid .cds--date-picker--simple .cds--date-picker--fluid--warn .cds--date-picker__icon--warn {
|
| 16143 | display: block;
|
| 16144 | }
|
| 16145 |
|
| 16146 | .cds--date-picker-container.cds--date-picker--fluid--invalid .cds--date-picker__input:focus {
|
| 16147 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 16148 | outline-offset: -2px;
|
| 16149 | }
|
| 16150 | @media screen and (prefers-contrast) {
|
| 16151 | .cds--date-picker-container.cds--date-picker--fluid--invalid .cds--date-picker__input:focus {
|
| 16152 | outline-style: dotted;
|
| 16153 | }
|
| 16154 | }
|
| 16155 |
|
| 16156 | .cds--date-picker--fluid.cds--date-picker--fluid--invalid .cds--date-picker--range ~ .cds--form-requirement,
|
| 16157 | .cds--date-picker--fluid.cds--date-picker--fluid--warn .cds--date-picker--range ~ .cds--form-requirement {
|
| 16158 | display: block;
|
| 16159 | overflow: visible;
|
| 16160 | padding: 0.5rem 2.5rem 0.5rem 1rem;
|
| 16161 | margin-block-start: 0;
|
| 16162 | max-block-size: 100%;
|
| 16163 | }
|
| 16164 |
|
| 16165 | .cds--date-picker--fluid.cds--date-picker--fluid--invalid .cds--date-picker--range ~ .cds--form-requirement {
|
| 16166 | color: var(--cds-text-error, #da1e28);
|
| 16167 | }
|
| 16168 |
|
| 16169 | .cds--date-picker--fluid.cds--date-picker--fluid--invalid,
|
| 16170 | .cds--date-picker--fluid.cds--date-picker--fluid--warn {
|
| 16171 | position: relative;
|
| 16172 | }
|
| 16173 |
|
| 16174 | .cds--date-picker--fluid.cds--date-picker--fluid--invalid .cds--date-picker--range + .cds--date-picker__icon,
|
| 16175 | .cds--date-picker--fluid.cds--date-picker--fluid--warn .cds--date-picker--range + .cds--date-picker__icon {
|
| 16176 | inset-block-start: 5rem;
|
| 16177 | }
|
| 16178 |
|
| 16179 | .cds--date-picker--fluid__skeleton {
|
| 16180 | background: var(--cds-skeleton-background, #e8e8e8);
|
| 16181 | block-size: 4rem;
|
| 16182 | border-block-end: 1px solid var(--cds-skeleton-element, #c6c6c6);
|
| 16183 | }
|
| 16184 |
|
| 16185 | .cds--date-picker--fluid__skeleton--container {
|
| 16186 | position: relative;
|
| 16187 | block-size: 100%;
|
| 16188 | inline-size: 100%;
|
| 16189 | }
|
| 16190 |
|
| 16191 | .cds--date-picker--fluid__skeleton .cds--skeleton {
|
| 16192 | position: absolute;
|
| 16193 | block-size: 0.5rem;
|
| 16194 | inline-size: 25%;
|
| 16195 | inset-block-start: 1rem;
|
| 16196 | inset-inline-start: 1rem;
|
| 16197 | }
|
| 16198 |
|
| 16199 | .cds--date-picker--fluid__skeleton .cds--label {
|
| 16200 | margin-block-end: 0.25rem;
|
| 16201 | }
|
| 16202 |
|
| 16203 | .cds--date-picker--fluid__skeleton .cds--text-input {
|
| 16204 | position: absolute;
|
| 16205 | padding: 0;
|
| 16206 | block-size: 0.5rem;
|
| 16207 | inline-size: 50%;
|
| 16208 | inset-block-start: 2.25rem;
|
| 16209 | inset-inline-start: 1rem;
|
| 16210 | }
|
| 16211 |
|
| 16212 | .cds--date-picker--fluid__skeleton--container .cds--date-picker__icon {
|
| 16213 | inset-block-end: 0.5rem;
|
| 16214 | inset-block-start: auto;
|
| 16215 | }
|
| 16216 |
|
| 16217 | .cds--date-picker--fluid__skeleton--range {
|
| 16218 | display: flex;
|
| 16219 | flex-direction: row;
|
| 16220 | }
|
| 16221 |
|
| 16222 | .cds--date-picker--fluid__skeleton--range .cds--date-picker--fluid__skeleton--container {
|
| 16223 | display: flex;
|
| 16224 | flex-direction: column;
|
| 16225 | inline-size: 50%;
|
| 16226 | }
|
| 16227 |
|
| 16228 | .cds--date-picker--fluid__skeleton--range .cds--date-picker--fluid__skeleton--container:first-of-type {
|
| 16229 | border-inline-end: 1px solid var(--cds-skeleton-element, #c6c6c6);
|
| 16230 | }
|
| 16231 |
|
| 16232 | .cds--date-picker--fluid__skeleton--range .cds--date-picker--fluid__skeleton--container .cds--date-picker__icon {
|
| 16233 | inset-block-end: 0.5rem;
|
| 16234 | }
|
| 16235 |
|
| 16236 | .cds--date-picker--fluid.cds--date-picker--fluid--readonly:not(.cds--date-picker--fluid--invalid):not(.cds--date-picker--fluid--warn) .cds--date-picker > .cds--date-picker-container,
|
| 16237 | .cds--date-picker--fluid.cds--date-picker--fluid--readonly:not(.cds--date-picker--fluid--invalid):not(.cds--date-picker--fluid--warn) .cds--date-picker .cds--date-picker__input {
|
| 16238 | border-block-end-color: var(--cds-border-subtle);
|
| 16239 | }
|
| 16240 |
|
| 16241 | .cds--date-picker--fluid.cds--date-picker--fluid--readonly:not(.cds--date-picker--fluid--invalid):not(.cds--date-picker--fluid--warn) .cds--date-picker--range > .cds--date-picker-container:last-child .cds--date-picker__input {
|
| 16242 | border-inline-start-color: var(--cds-border-subtle);
|
| 16243 | }
|
| 16244 |
|
| 16245 | .cds--date-picker--fluid .cds--date-picker-input__wrapper--slug .cds--slug {
|
| 16246 | inset-block-start: 2.6875rem;
|
| 16247 | }
|
| 16248 |
|
| 16249 | .cds--date-picker--fluid .cds--date-picker-input__wrapper--slug:not(:has(.cds--slug--revert)) {
|
| 16250 | background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
|
| 16251 | border-block-end-color: var(--cds-ai-border-strong, #4589ff);
|
| 16252 | }
|
| 16253 |
|
| 16254 | .cds--date-picker--fluid .cds--date-picker-input__wrapper--slug:not(:has(.cds--slug--revert)) .cds--date-picker__input:not(.cds--date-picker__input--invalid) {
|
| 16255 | border-block-end-color: var(--cds-ai-border-strong, #4589ff);
|
| 16256 | }
|
| 16257 |
|
| 16258 | .cds--date-picker--fluid .cds--date-picker-input__wrapper--slug .cds--date-picker__input,
|
| 16259 | .cds--date-picker--fluid--invalid .cds--date-picker-input__wrapper--slug .cds--date-picker__input,
|
| 16260 | .cds--date-picker--fluid--warn .cds--date-picker-input__wrapper--slug .cds--date-picker__input {
|
| 16261 | padding-inline-end: 4rem;
|
| 16262 | }
|
| 16263 |
|
| 16264 | .cds--multi-select .cds--list-box__field--wrapper {
|
| 16265 | display: inline-flex;
|
| 16266 | align-items: center;
|
| 16267 | block-size: calc(100% + 1px);
|
| 16268 | inline-size: 100%;
|
| 16269 | }
|
| 16270 |
|
| 16271 | .cds--multi-select .cds--list-box__field:focus {
|
| 16272 | outline: 2px solid transparent;
|
| 16273 | outline-offset: -2px;
|
| 16274 | }
|
| 16275 |
|
| 16276 | .cds--multi-select--filterable .cds--list-box__field {
|
| 16277 | padding: 0;
|
| 16278 | }
|
| 16279 |
|
| 16280 | .cds--multi-select .cds--tag {
|
| 16281 | margin: 0 0.5rem 0 1rem;
|
| 16282 | min-inline-size: auto;
|
| 16283 | }
|
| 16284 |
|
| 16285 | .cds--multi-select .cds--list-box__menu {
|
| 16286 | min-inline-size: auto;
|
| 16287 | }
|
| 16288 |
|
| 16289 | .cds--multi-select .cds--list-box__menu-item__option .cds--checkbox-wrapper {
|
| 16290 | display: flex;
|
| 16291 | align-items: center;
|
| 16292 | block-size: 100%;
|
| 16293 | inline-size: 100%;
|
| 16294 | }
|
| 16295 |
|
| 16296 | .cds--multi-select .cds--list-box__menu-item__option .cds--checkbox-label {
|
| 16297 | display: inline-block;
|
| 16298 | overflow: hidden;
|
| 16299 | inline-size: 100%;
|
| 16300 | padding-inline-start: 1.75rem;
|
| 16301 | text-overflow: ellipsis;
|
| 16302 | white-space: nowrap;
|
| 16303 | }
|
| 16304 |
|
| 16305 | .cds--multi-select .cds--list-box__menu-item__option > .cds--form-item {
|
| 16306 | flex-direction: row;
|
| 16307 | margin: 0;
|
| 16308 | }
|
| 16309 |
|
| 16310 | .cds--multi-select .cds--list-box__menu-item .cds--checkbox:checked ~ .cds--checkbox-label-text {
|
| 16311 | color: var(--cds-text-primary, #161616);
|
| 16312 | }
|
| 16313 |
|
| 16314 | .cds--multi-select--filterable {
|
| 16315 | transition: outline-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 16316 | }
|
| 16317 |
|
| 16318 | .cds--multi-select--filterable.cds--combo-box .cds--text-input {
|
| 16319 | border: 0.125rem solid transparent;
|
| 16320 | background-clip: padding-box;
|
| 16321 | outline: none;
|
| 16322 | }
|
| 16323 |
|
| 16324 | .cds--multi-select--filterable--input-focused,
|
| 16325 | .cds--multi-select .cds--list-box__field--wrapper--input-focused:has(button[aria-expanded=false]),
|
| 16326 | .cds--multi-select .cds--list-box__field--wrapper--input-focused:has(button[aria-expanded=true]) {
|
| 16327 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 16328 | outline-offset: -2px;
|
| 16329 | }
|
| 16330 | @media screen and (prefers-contrast) {
|
| 16331 | .cds--multi-select--filterable--input-focused,
|
| 16332 | .cds--multi-select .cds--list-box__field--wrapper--input-focused:has(button[aria-expanded=false]),
|
| 16333 | .cds--multi-select .cds--list-box__field--wrapper--input-focused:has(button[aria-expanded=true]) {
|
| 16334 | outline-style: dotted;
|
| 16335 | }
|
| 16336 | }
|
| 16337 |
|
| 16338 | .cds--multi-select.cds--list-box--expanded .cds--list-box__field--wrapper:has(button[aria-activedescendant]:not([aria-activedescendant=""])),
|
| 16339 | .cds--multi-select--filterable.cds--list-box--expanded:has(input[aria-activedescendant]:not([aria-activedescendant=""])) {
|
| 16340 | outline-offset: -0.0625rem;
|
| 16341 | outline-width: 0.0625rem;
|
| 16342 | }
|
| 16343 |
|
| 16344 | .cds--multi-select--filterable.cds--multi-select--selected .cds--text-input,
|
| 16345 | .cds--multi-select.cds--multi-select--selected .cds--list-box__field {
|
| 16346 | padding-inline-start: 0;
|
| 16347 | }
|
| 16348 |
|
| 16349 | .cds--multi-select--filterable.cds--list-box--disabled:hover:not(.cds--multi-select--filterable) .cds--text-input {
|
| 16350 | background-color: var(--cds-field);
|
| 16351 | }
|
| 16352 |
|
| 16353 | .cds--multi-select--filterable .cds--list-box__selection--multi {
|
| 16354 | margin: 0 0 0 1rem;
|
| 16355 | }
|
| 16356 |
|
| 16357 | .cds--multi-select--filterable.cds--multi-select--inline,
|
| 16358 | .cds--multi-select--filterable.cds--multi-select--inline .cds--text-input {
|
| 16359 | background-color: transparent;
|
| 16360 | border-block-end: 0;
|
| 16361 | }
|
| 16362 |
|
| 16363 | .cds--multi-select:not(.cds--list-box--expanded) .cds--list-box__menu {
|
| 16364 | visibility: hidden;
|
| 16365 | }
|
| 16366 |
|
| 16367 | .cds--multi-select.cds--multi-select--readonly,
|
| 16368 | .cds--multi-select.cds--multi-select--readonly:hover {
|
| 16369 | background-color: transparent;
|
| 16370 | border-block-end-color: var(--cds-border-subtle);
|
| 16371 | }
|
| 16372 |
|
| 16373 | .cds--multi-select.cds--multi-select--readonly .cds--list-box__menu-icon svg {
|
| 16374 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 16375 | }
|
| 16376 |
|
| 16377 | .cds--multi-select.cds--multi-select--readonly .cds--tag--filter,
|
| 16378 | .cds--multi-select.cds--multi-select--readonly .cds--tag__close-icon:hover {
|
| 16379 | background-color: transparent;
|
| 16380 | color: var(--cds-text-primary, #161616);
|
| 16381 | cursor: default;
|
| 16382 | }
|
| 16383 |
|
| 16384 | .cds--multi-select.cds--multi-select--readonly .cds--tag--filter {
|
| 16385 | box-shadow: 0 0 0 1px var(--cds-background-inverse, #393939);
|
| 16386 | }
|
| 16387 |
|
| 16388 | .cds--multi-select.cds--multi-select--readonly .cds--tag--filter svg {
|
| 16389 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 16390 | }
|
| 16391 |
|
| 16392 | .cds--multi-select.cds--multi-select--readonly .cds--list-box__field,
|
| 16393 | .cds--multi-select.cds--multi-select--readonly .cds--list-box__menu-icon {
|
| 16394 | cursor: default;
|
| 16395 | }
|
| 16396 |
|
| 16397 | .cds--multi-select__wrapper.cds--list-box__wrapper--fluid--focus:not(.cds--multi-select--filterable__wrapper) .cds--list-box__field--wrapper--input-focused {
|
| 16398 | outline: none;
|
| 16399 | }
|
| 16400 |
|
| 16401 | .cds--list-box__wrapper--fluid .cds--tag.cds--tag--filter {
|
| 16402 | margin-block-start: 1.25rem;
|
| 16403 | }
|
| 16404 |
|
| 16405 | .cds--list-box__wrapper--fluid .cds--multi-select--filterable--input-focused {
|
| 16406 | outline: none;
|
| 16407 | outline-offset: 0;
|
| 16408 | }
|
| 16409 |
|
| 16410 | .cds--list-box__wrapper--fluid .cds--multi-select--filterable .cds--list-box__field .cds--text-input {
|
| 16411 | border-block-end: 1px solid transparent;
|
| 16412 | }
|
| 16413 |
|
| 16414 | .cds--list-box__wrapper--fluid .cds--multi-select--filterable.cds--combo-box .cds--list-box__field {
|
| 16415 | align-items: baseline;
|
| 16416 | }
|
| 16417 |
|
| 16418 | .cds--list-box__wrapper--fluid.cds--multi-select--filterable__wrapper:not(.cds--list-box--up) .cds--list-box__menu {
|
| 16419 | inset-block-start: calc(100% + 0.0625rem);
|
| 16420 | }
|
| 16421 |
|
| 16422 | .cds--number__controls:hover .cds--number__control-btn::after {
|
| 16423 | display: none;
|
| 16424 | }
|
| 16425 |
|
| 16426 | .cds--number__input-wrapper--slug .cds--number__rule-divider {
|
| 16427 | display: none;
|
| 16428 | }
|
| 16429 |
|
| 16430 | .cds--number__input-wrapper--slug .cds--number__control-btn:hover {
|
| 16431 | box-shadow: 0 -1px 0 var(--cds-ai-border-strong, #4589ff) inset;
|
| 16432 | }
|
| 16433 |
|
| 16434 | .cds--number__controls:focus-within .cds--number__control-btn::after {
|
| 16435 | display: none;
|
| 16436 | }
|
| 16437 |
|
| 16438 | .cds--number {
|
| 16439 | position: relative;
|
| 16440 | display: flex;
|
| 16441 | flex-direction: column;
|
| 16442 | inline-size: 100%;
|
| 16443 | }
|
| 16444 | .cds--number html {
|
| 16445 | font-size: 100%;
|
| 16446 | }
|
| 16447 | .cds--number body {
|
| 16448 | font-weight: 400;
|
| 16449 | font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
|
| 16450 | -moz-osx-font-smoothing: grayscale;
|
| 16451 | -webkit-font-smoothing: antialiased;
|
| 16452 | text-rendering: optimizeLegibility;
|
| 16453 | }
|
| 16454 | .cds--number code {
|
| 16455 | font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
|
| 16456 | }
|
| 16457 | .cds--number strong {
|
| 16458 | font-weight: 600;
|
| 16459 | }
|
| 16460 |
|
| 16461 | .cds--number .cds--number__input-wrapper--warning input[type=number] {
|
| 16462 | padding-inline-end: 8rem;
|
| 16463 | }
|
| 16464 |
|
| 16465 | .cds--number input[type=number] {
|
| 16466 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 16467 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 16468 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 16469 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 16470 | outline: 2px solid transparent;
|
| 16471 | outline-offset: -2px;
|
| 16472 | display: inline-flex;
|
| 16473 | box-sizing: border-box;
|
| 16474 | border: 0;
|
| 16475 | border-radius: 0;
|
| 16476 | -moz-appearance: textfield;
|
| 16477 | -webkit-appearance: textfield;
|
| 16478 | appearance: textfield;
|
| 16479 | background-color: var(--cds-field);
|
| 16480 | block-size: 2.5rem;
|
| 16481 | border-block-end: 0.0625rem solid var(--cds-border-strong);
|
| 16482 | color: var(--cds-text-primary, #161616);
|
| 16483 | font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
|
| 16484 | font-weight: 400;
|
| 16485 | inline-size: 100%;
|
| 16486 | min-inline-size: 9.375rem;
|
| 16487 | padding-inline-end: 6rem;
|
| 16488 | padding-inline-start: 1rem;
|
| 16489 | transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 16490 | }
|
| 16491 | .cds--number input[type=number]:focus {
|
| 16492 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 16493 | outline-offset: -2px;
|
| 16494 | }
|
| 16495 | @media screen and (prefers-contrast) {
|
| 16496 | .cds--number input[type=number]:focus {
|
| 16497 | outline-style: dotted;
|
| 16498 | }
|
| 16499 | }
|
| 16500 | .cds--number input[type=number]:disabled ~ .cds--number__controls {
|
| 16501 | cursor: not-allowed;
|
| 16502 | pointer-events: none;
|
| 16503 | }
|
| 16504 | .cds--number input[type=number]:disabled ~ .cds--number__controls svg {
|
| 16505 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 16506 | }
|
| 16507 | .cds--number input[type=number]::-ms-clear {
|
| 16508 | display: none;
|
| 16509 | }
|
| 16510 | .cds--number input[type=number]::-webkit-inner-spin-button {
|
| 16511 | -webkit-appearance: none;
|
| 16512 | appearance: none;
|
| 16513 | }
|
| 16514 | .cds--number input[type=number][data-invalid] {
|
| 16515 | padding-inline-end: 8rem;
|
| 16516 | }
|
| 16517 |
|
| 16518 | .cds--number--lg.cds--number input[type=number] {
|
| 16519 | padding-inline-end: 7rem;
|
| 16520 | }
|
| 16521 | .cds--number--lg.cds--number input[type=number][data-invalid] {
|
| 16522 | padding-inline-end: 9rem;
|
| 16523 | }
|
| 16524 | .cds--number--lg.cds--number .cds--number__input-wrapper--warning input[type=number] {
|
| 16525 | padding-inline-end: 9rem;
|
| 16526 | }
|
| 16527 |
|
| 16528 | .cds--number--sm.cds--number input[type=number] {
|
| 16529 | padding-inline-end: 5rem;
|
| 16530 | }
|
| 16531 | .cds--number--sm.cds--number input[type=number][data-invalid] {
|
| 16532 | padding-inline-end: 7rem;
|
| 16533 | }
|
| 16534 | .cds--number--sm.cds--number .cds--number__input-wrapper--warning input[type=number] {
|
| 16535 | padding-inline-end: 7rem;
|
| 16536 | }
|
| 16537 |
|
| 16538 | .cds--number input[type=number]:disabled {
|
| 16539 | background-color: var(--cds-field);
|
| 16540 | border-block-end-color: transparent;
|
| 16541 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 16542 | cursor: not-allowed;
|
| 16543 | }
|
| 16544 |
|
| 16545 | .cds--number__input-wrapper {
|
| 16546 | position: relative;
|
| 16547 | display: flex;
|
| 16548 | align-items: center;
|
| 16549 | }
|
| 16550 |
|
| 16551 | .cds--number__controls {
|
| 16552 | position: absolute;
|
| 16553 | display: flex;
|
| 16554 | flex-direction: row;
|
| 16555 | align-items: center;
|
| 16556 | justify-content: center;
|
| 16557 | block-size: 100%;
|
| 16558 | inline-size: 5rem;
|
| 16559 | inset-block-start: 50%;
|
| 16560 | inset-inline-end: 0;
|
| 16561 | transform: translateY(-50%);
|
| 16562 | }
|
| 16563 | .cds--number__controls html {
|
| 16564 | font-size: 100%;
|
| 16565 | }
|
| 16566 | .cds--number__controls body {
|
| 16567 | font-weight: 400;
|
| 16568 | font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
|
| 16569 | -moz-osx-font-smoothing: grayscale;
|
| 16570 | -webkit-font-smoothing: antialiased;
|
| 16571 | text-rendering: optimizeLegibility;
|
| 16572 | }
|
| 16573 | .cds--number__controls code {
|
| 16574 | font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
|
| 16575 | }
|
| 16576 | .cds--number__controls strong {
|
| 16577 | font-weight: 600;
|
| 16578 | }
|
| 16579 |
|
| 16580 | .cds--number__control-btn {
|
| 16581 | box-sizing: border-box;
|
| 16582 | padding: 0;
|
| 16583 | border: 0;
|
| 16584 | margin: 0;
|
| 16585 | font-family: inherit;
|
| 16586 | font-size: 100%;
|
| 16587 | vertical-align: baseline;
|
| 16588 | display: inline-block;
|
| 16589 | padding: 0;
|
| 16590 | border: 0;
|
| 16591 | -webkit-appearance: none;
|
| 16592 | -moz-appearance: none;
|
| 16593 | appearance: none;
|
| 16594 | background: none;
|
| 16595 | cursor: pointer;
|
| 16596 | text-align: start;
|
| 16597 | inline-size: 100%;
|
| 16598 | position: relative;
|
| 16599 | display: inline-flex;
|
| 16600 | align-items: center;
|
| 16601 | justify-content: center;
|
| 16602 | block-size: 100%;
|
| 16603 | color: var(--cds-icon-primary, #161616);
|
| 16604 | }
|
| 16605 | .cds--number__control-btn *,
|
| 16606 | .cds--number__control-btn *::before,
|
| 16607 | .cds--number__control-btn *::after {
|
| 16608 | box-sizing: inherit;
|
| 16609 | }
|
| 16610 | .cds--number__control-btn::-moz-focus-inner {
|
| 16611 | border: 0;
|
| 16612 | }
|
| 16613 | .cds--number__control-btn svg {
|
| 16614 | fill: currentColor;
|
| 16615 | }
|
| 16616 | .cds--number__control-btn:focus {
|
| 16617 | outline: 1px solid var(--cds-focus, #0f62fe);
|
| 16618 | color: var(--cds-icon-primary, #161616);
|
| 16619 | outline-offset: -2px;
|
| 16620 | outline-width: 2px;
|
| 16621 | }
|
| 16622 | @media screen and (prefers-contrast) {
|
| 16623 | .cds--number__control-btn:focus {
|
| 16624 | outline-style: dotted;
|
| 16625 | }
|
| 16626 | }
|
| 16627 | .cds--number__control-btn:hover {
|
| 16628 | background-color: var(--cds-field-hover);
|
| 16629 | box-shadow: 0 -1px 0 var(--cds-border-strong) inset;
|
| 16630 | color: var(--cds-icon-primary, #161616);
|
| 16631 | cursor: pointer;
|
| 16632 | }
|
| 16633 | .cds--number__control-btn:disabled {
|
| 16634 | border-block-end-color: transparent;
|
| 16635 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 16636 | cursor: not-allowed;
|
| 16637 | }
|
| 16638 |
|
| 16639 | .cds--number__control-btn.down-icon {
|
| 16640 | order: 1;
|
| 16641 | }
|
| 16642 |
|
| 16643 | .cds--number__control-btn.up-icon {
|
| 16644 | order: 2;
|
| 16645 | }
|
| 16646 |
|
| 16647 | .cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn {
|
| 16648 | border-block-end-color: var(--cds-support-error, #da1e28);
|
| 16649 | }
|
| 16650 |
|
| 16651 | .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn {
|
| 16652 | border-width: 2px 0;
|
| 16653 | border-style: solid;
|
| 16654 | border-color: var(--cds-focus, #0f62fe);
|
| 16655 | box-shadow: none;
|
| 16656 | outline-offset: -2px;
|
| 16657 | }
|
| 16658 |
|
| 16659 | .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type:hover {
|
| 16660 | box-shadow: -4px 0 0 -2px var(--cds-focus, #0f62fe) inset;
|
| 16661 | }
|
| 16662 |
|
| 16663 | .cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:last-of-type:hover {
|
| 16664 | box-shadow: -4px 0 0 -2px var(--cds-support-error, #da1e28) inset;
|
| 16665 | }
|
| 16666 |
|
| 16667 | .cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:hover {
|
| 16668 | border-width: 2px 0;
|
| 16669 | border-style: solid;
|
| 16670 | border-color: var(--cds-support-error, #da1e28);
|
| 16671 | box-shadow: none;
|
| 16672 | outline-offset: -2px;
|
| 16673 | }
|
| 16674 |
|
| 16675 | .cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:focus:hover {
|
| 16676 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 16677 | outline-offset: -2px;
|
| 16678 | }
|
| 16679 | @media screen and (prefers-contrast) {
|
| 16680 | .cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:focus:hover {
|
| 16681 | outline-style: dotted;
|
| 16682 | }
|
| 16683 | }
|
| 16684 |
|
| 16685 | .cds--number__rule-divider {
|
| 16686 | position: absolute;
|
| 16687 | z-index: 6000;
|
| 16688 | background-color: var(--cds-border-subtle);
|
| 16689 | block-size: 1rem;
|
| 16690 | inline-size: 0.0625rem;
|
| 16691 | }
|
| 16692 | .cds--number__rule-divider:first-of-type {
|
| 16693 | order: 0;
|
| 16694 | }
|
| 16695 |
|
| 16696 | .cds--number__controls .cds--number__rule-divider:first-of-type {
|
| 16697 | background-color: transparent;
|
| 16698 | inset-inline-start: 0;
|
| 16699 | }
|
| 16700 |
|
| 16701 | .cds--number__invalid + .cds--number__controls .cds--number__rule-divider:first-of-type {
|
| 16702 | background-color: var(--cds-border-subtle);
|
| 16703 | }
|
| 16704 |
|
| 16705 | .cds--number--light .cds--number__rule-divider,
|
| 16706 | .cds--number--light .cds--number__invalid + .cds--number__controls .cds--number__rule-divider:first-of-type {
|
| 16707 | background-color: var(--cds-border-subtle-02, #e0e0e0);
|
| 16708 | }
|
| 16709 |
|
| 16710 | .cds--number input[type=number]:disabled + .cds--number__controls .cds--number__rule-divider:first-of-type {
|
| 16711 | background-color: transparent;
|
| 16712 | }
|
| 16713 |
|
| 16714 | .cds--number input[type=number]:disabled + .cds--number__controls .cds--number__rule-divider {
|
| 16715 | background-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 16716 | }
|
| 16717 |
|
| 16718 | .cds--number__control-btn:focus ~ .cds--number__rule-divider {
|
| 16719 | background-color: transparent;
|
| 16720 | }
|
| 16721 |
|
| 16722 | .cds--number__invalid {
|
| 16723 | position: absolute;
|
| 16724 | fill: var(--cds-support-error, #da1e28);
|
| 16725 | inset-inline-end: 6rem;
|
| 16726 | }
|
| 16727 |
|
| 16728 | .cds--number--lg .cds--number__invalid {
|
| 16729 | inset-inline-end: 7rem;
|
| 16730 | }
|
| 16731 |
|
| 16732 | .cds--number--sm .cds--number__invalid {
|
| 16733 | inset-inline-end: 5rem;
|
| 16734 | }
|
| 16735 |
|
| 16736 | .cds--number__invalid + .cds--number__rule-divider {
|
| 16737 | position: absolute;
|
| 16738 | inset-inline-end: 5rem;
|
| 16739 | }
|
| 16740 |
|
| 16741 | .cds--number--lg .cds--number__invalid + .cds--number__rule-divider {
|
| 16742 | inset-inline-end: 6rem;
|
| 16743 | }
|
| 16744 |
|
| 16745 | .cds--number--sm .cds--number__invalid + .cds--number__rule-divider {
|
| 16746 | inset-inline-end: 4rem;
|
| 16747 | }
|
| 16748 |
|
| 16749 | .cds--number__control-btn.down-icon:hover ~ .cds--number__rule-divider,
|
| 16750 | .cds--number__control-btn.up-icon:hover + .cds--number__rule-divider,
|
| 16751 | .cds--number__control-btn.down-icon:focus ~ .cds--number__rule-divider,
|
| 16752 | .cds--number__control-btn.up-icon:focus + .cds--number__rule-divider {
|
| 16753 | background-color: transparent;
|
| 16754 | }
|
| 16755 |
|
| 16756 | .cds--number__invalid--warning {
|
| 16757 | fill: var(--cds-support-warning, #f1c21b);
|
| 16758 | }
|
| 16759 |
|
| 16760 | .cds--number__invalid--warning path:first-of-type {
|
| 16761 | fill: #000000;
|
| 16762 | opacity: 1;
|
| 16763 | }
|
| 16764 |
|
| 16765 | .cds--number--lg input[type=number] {
|
| 16766 | block-size: 3rem;
|
| 16767 | }
|
| 16768 |
|
| 16769 | .cds--number--lg .cds--number__controls {
|
| 16770 | inline-size: 6rem;
|
| 16771 | }
|
| 16772 |
|
| 16773 | .cds--number--lg .cds--number__control-btn {
|
| 16774 | inline-size: 3rem;
|
| 16775 | }
|
| 16776 |
|
| 16777 | .cds--number--sm input[type=number] {
|
| 16778 | block-size: 2rem;
|
| 16779 | }
|
| 16780 |
|
| 16781 | .cds--number--sm .cds--number__controls {
|
| 16782 | inline-size: 4rem;
|
| 16783 | }
|
| 16784 |
|
| 16785 | .cds--number--sm .cds--number__control-btn {
|
| 16786 | inline-size: 2rem;
|
| 16787 | }
|
| 16788 |
|
| 16789 | .cds--number--nolabel .cds--label + .cds--form__helper-text {
|
| 16790 | margin-block-start: 0;
|
| 16791 | }
|
| 16792 |
|
| 16793 | .cds--number--nosteppers input[type=number] {
|
| 16794 | padding-inline-end: 0;
|
| 16795 | }
|
| 16796 |
|
| 16797 | .cds--number--nosteppers input[type=number][data-invalid],
|
| 16798 | .cds--number--nosteppers .cds--number__input-wrapper--warning input[type=number] {
|
| 16799 | padding-inline-end: 3rem;
|
| 16800 | }
|
| 16801 |
|
| 16802 | .cds--number--nosteppers .cds--number__invalid {
|
| 16803 | inset-inline-end: 1rem;
|
| 16804 | }
|
| 16805 |
|
| 16806 | .cds--number--readonly input[type=number] {
|
| 16807 | background: transparent;
|
| 16808 | border-block-end-color: var(--cds-border-subtle);
|
| 16809 | }
|
| 16810 |
|
| 16811 | .cds--number--readonly .cds--number__control-btn {
|
| 16812 | color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 16813 | pointer-events: none;
|
| 16814 | }
|
| 16815 | .cds--number--readonly .cds--number__control-btn:hover {
|
| 16816 | background-color: transparent;
|
| 16817 | cursor: pointer;
|
| 16818 | }
|
| 16819 |
|
| 16820 | .cds--number--readonly input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover {
|
| 16821 | outline: none;
|
| 16822 | }
|
| 16823 |
|
| 16824 | .cds--number--readonly .cds--number__controls:hover .cds--number__rule-divider:not(:first-of-type) {
|
| 16825 | background-color: var(--cds-border-subtle);
|
| 16826 | }
|
| 16827 |
|
| 16828 | .cds--number__input-wrapper--slug .cds--slug {
|
| 16829 | position: absolute;
|
| 16830 | inset-block-start: 50%;
|
| 16831 | inset-inline-end: 6rem;
|
| 16832 | transform: translateY(-50%);
|
| 16833 | }
|
| 16834 |
|
| 16835 | .cds--number__input-wrapper--slug .cds--slug::before,
|
| 16836 | .cds--number__input-wrapper--slug .cds--number__control-btn::before,
|
| 16837 | .cds--number__input-wrapper--slug .cds--number__control-btn::after {
|
| 16838 | position: absolute;
|
| 16839 | background-color: var(--cds-border-subtle);
|
| 16840 | block-size: 1rem;
|
| 16841 | content: "";
|
| 16842 | inline-size: 0.0625rem;
|
| 16843 | }
|
| 16844 |
|
| 16845 | .cds--number__input-wrapper--slug .cds--slug::before {
|
| 16846 | display: none;
|
| 16847 | inset-inline-start: -1rem;
|
| 16848 | }
|
| 16849 |
|
| 16850 | .cds--number__control-btn::after {
|
| 16851 | display: block;
|
| 16852 | inset-inline-end: 0;
|
| 16853 | }
|
| 16854 |
|
| 16855 | .cds--number__input-wrapper--slug .cds--number__control-btn::before {
|
| 16856 | display: block;
|
| 16857 | inset-inline-end: 2.5rem;
|
| 16858 | }
|
| 16859 |
|
| 16860 | .cds--number__input-wrapper--slug .cds--number__control-btn:focus::before {
|
| 16861 | display: none;
|
| 16862 | }
|
| 16863 |
|
| 16864 | .cds--number__control-btn:hover::after,
|
| 16865 | .cds--number__control-btn:hover::before {
|
| 16866 | display: none;
|
| 16867 | inset-inline-end: 0;
|
| 16868 | }
|
| 16869 |
|
| 16870 | .cds--number__input-wrapper:has(.cds--number__control-btn:hover) ~ .cds--number__input-wrapper--slug::after {
|
| 16871 | display: none;
|
| 16872 | }
|
| 16873 |
|
| 16874 | .cds--number__control-btn:has(.up-icon)::after,
|
| 16875 | .cds--number__control-btn:has(.up-icon)::before {
|
| 16876 | display: none;
|
| 16877 | }
|
| 16878 |
|
| 16879 | .cds--number__input-wrapper--slug .cds--number__invalid {
|
| 16880 | inset-inline-end: 9rem;
|
| 16881 | }
|
| 16882 |
|
| 16883 | .cds--number__input-wrapper--slug:has(.cds--number__invalid) .cds--slug::before {
|
| 16884 | display: block;
|
| 16885 | }
|
| 16886 |
|
| 16887 | .cds--number .cds--number__input-wrapper--slug input[data-invalid],
|
| 16888 | .cds--number .cds--number__input-wrapper--slug.cds--number__input-wrapper--warning input {
|
| 16889 | padding-inline-end: 9rem;
|
| 16890 | }
|
| 16891 |
|
| 16892 | .cds--number__input-wrapper--slug input[type=number]:not(:has(~ .cds--slug--revert)),
|
| 16893 | .cds--number__input-wrapper--slug input[type=number]:disabled {
|
| 16894 | background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
|
| 16895 | border-block-end-color: var(--cds-ai-border-strong, #4589ff);
|
| 16896 | padding-inline-end: 9.0625rem;
|
| 16897 | }
|
| 16898 |
|
| 16899 | .cds--number.cds--skeleton {
|
| 16900 | position: relative;
|
| 16901 | padding: 0;
|
| 16902 | border: none;
|
| 16903 | background: var(--cds-skeleton-background, #e8e8e8);
|
| 16904 | box-shadow: none;
|
| 16905 | pointer-events: none;
|
| 16906 | block-size: 2.5rem;
|
| 16907 | inline-size: 100%;
|
| 16908 | }
|
| 16909 | .cds--number.cds--skeleton:hover, .cds--number.cds--skeleton:focus, .cds--number.cds--skeleton:active {
|
| 16910 | border: none;
|
| 16911 | cursor: default;
|
| 16912 | outline: none;
|
| 16913 | }
|
| 16914 | .cds--number.cds--skeleton::before {
|
| 16915 | position: absolute;
|
| 16916 | animation: 3000ms ease-in-out cds--skeleton infinite;
|
| 16917 | background: var(--cds-skeleton-element, #c6c6c6);
|
| 16918 | block-size: 100%;
|
| 16919 | content: "";
|
| 16920 | inline-size: 100%;
|
| 16921 | will-change: transform-origin, transform, opacity;
|
| 16922 | }
|
| 16923 | @media (prefers-reduced-motion: reduce) {
|
| 16924 | .cds--number.cds--skeleton::before {
|
| 16925 | animation: none;
|
| 16926 | }
|
| 16927 | }
|
| 16928 | .cds--number.cds--skeleton input[type=number] {
|
| 16929 | display: none;
|
| 16930 | }
|
| 16931 |
|
| 16932 |
|
| 16933 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 16934 | .cds--number__control-btn:hover,
|
| 16935 | .cds--number__control-btn:focus {
|
| 16936 | color: Highlight;
|
| 16937 | outline: 1px solid Highlight;
|
| 16938 | }
|
| 16939 | }
|
| 16940 |
|
| 16941 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 16942 | .cds--number__control-btn {
|
| 16943 | outline: 1px solid transparent;
|
| 16944 | }
|
| 16945 | }
|
| 16946 |
|
| 16947 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 16948 | .cds--number__control-btn svg {
|
| 16949 | fill: ButtonText;
|
| 16950 | }
|
| 16951 | }
|
| 16952 |
|
| 16953 |
|
| 16954 | .cds--number-input--fluid {
|
| 16955 | position: relative;
|
| 16956 | background: var(--cds-field);
|
| 16957 | block-size: 100%;
|
| 16958 | }
|
| 16959 |
|
| 16960 | .cds--number-input--fluid .cds--label {
|
| 16961 | position: absolute;
|
| 16962 | z-index: 1;
|
| 16963 | display: flex;
|
| 16964 | align-items: center;
|
| 16965 | margin: 0;
|
| 16966 | block-size: 1rem;
|
| 16967 | inline-size: calc(100% - 2rem);
|
| 16968 | inset-block-start: 0.8125rem;
|
| 16969 | inset-inline-start: 1rem;
|
| 16970 | }
|
| 16971 |
|
| 16972 | .cds--number-input--fluid .cds--label::-webkit-scrollbar,
|
| 16973 | .cds--number-input--fluid .cds--label .cds--toggletip-label::-webkit-scrollbar {
|
| 16974 | display: none;
|
| 16975 | }
|
| 16976 |
|
| 16977 | .cds--number-input--fluid .cds--label:not(:has(.cds--toggletip-label)),
|
| 16978 | .cds--number-input--fluid .cds--label .cds--toggletip-label {
|
| 16979 | -ms-overflow-style: none;
|
| 16980 | overflow-x: scroll;
|
| 16981 | scrollbar-width: none;
|
| 16982 | white-space: nowrap;
|
| 16983 | }
|
| 16984 |
|
| 16985 | .cds--number-input--fluid .cds--number__input-wrapper {
|
| 16986 | position: initial;
|
| 16987 | }
|
| 16988 |
|
| 16989 | .cds--number-input--fluid input[type=number] {
|
| 16990 | padding: 2rem 5rem 0.8125rem 1rem;
|
| 16991 | background: transparent;
|
| 16992 | min-block-size: 4rem;
|
| 16993 | outline: none;
|
| 16994 | }
|
| 16995 |
|
| 16996 | .cds--number-input--fluid .cds--number__controls {
|
| 16997 | block-size: 2.5rem;
|
| 16998 | inset-block-start: 1.4375rem;
|
| 16999 | transform: translate(0);
|
| 17000 | }
|
| 17001 |
|
| 17002 | .cds--number-input--fluid input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn {
|
| 17003 | border-block-end-color: var(--cds-focus, #0f62fe);
|
| 17004 | box-shadow: inset 0 -1px var(--cds-focus, #0f62fe);
|
| 17005 | }
|
| 17006 |
|
| 17007 | .cds--number-input--fluid input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type {
|
| 17008 | box-shadow: inset 0 -1px var(--cds-focus, #0f62fe), inset -2px 0 var(--cds-focus, #0f62fe);
|
| 17009 | }
|
| 17010 |
|
| 17011 | .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn,
|
| 17012 | .cds--number-input--fluid--invalid input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn {
|
| 17013 | border-block-end-color: transparent;
|
| 17014 | box-shadow: none;
|
| 17015 | }
|
| 17016 |
|
| 17017 | .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type,
|
| 17018 | .cds--number-input--fluid--invalid input[type=number][data-invalid]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type {
|
| 17019 | box-shadow: inset -2px 0 var(--cds-focus, #0f62fe);
|
| 17020 | }
|
| 17021 |
|
| 17022 | .cds--number-input--fluid--invalid input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:last-of-type:hover {
|
| 17023 | box-shadow: inset -2px 0 var(--cds-support-error, #da1e28);
|
| 17024 | }
|
| 17025 |
|
| 17026 | .cds--number-input--fluid--invalid input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:hover {
|
| 17027 | box-shadow: none;
|
| 17028 | }
|
| 17029 |
|
| 17030 | .cds--number-input--fluid.cds--number-input--fluid--focus .cds--number {
|
| 17031 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 17032 | outline-offset: -2px;
|
| 17033 | }
|
| 17034 | @media screen and (prefers-contrast) {
|
| 17035 | .cds--number-input--fluid.cds--number-input--fluid--focus .cds--number {
|
| 17036 | outline-style: dotted;
|
| 17037 | }
|
| 17038 | }
|
| 17039 |
|
| 17040 | .cds--number-input--fluid:not(.cds--number-input--fluid--invalid) .cds--number-input-wrapper:not(.cds--number-input-wrapper__warning) input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover {
|
| 17041 | border-block-end: 1px solid var(--cds-focus, #0f62fe);
|
| 17042 | outline: none;
|
| 17043 | }
|
| 17044 |
|
| 17045 | .cds--number-input--fluid--invalid input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn:focus,
|
| 17046 | .cds--number-input--fluid--invalid .cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn:focus:hover {
|
| 17047 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 17048 | outline-offset: -2px;
|
| 17049 | }
|
| 17050 | @media screen and (prefers-contrast) {
|
| 17051 | .cds--number-input--fluid--invalid input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn:focus,
|
| 17052 | .cds--number-input--fluid--invalid .cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn:focus:hover {
|
| 17053 | outline-style: dotted;
|
| 17054 | }
|
| 17055 | }
|
| 17056 |
|
| 17057 | .cds--number-input--fluid .cds--number-input__divider {
|
| 17058 | display: none;
|
| 17059 | }
|
| 17060 |
|
| 17061 | .cds--number-input--fluid .cds--number__invalid {
|
| 17062 | inset-block-start: 4.5625rem;
|
| 17063 | inset-inline-end: 1rem;
|
| 17064 | pointer-events: none;
|
| 17065 | }
|
| 17066 |
|
| 17067 | .cds--number-input--fluid .cds--number__controls .cds--number__rule-divider:first-of-type {
|
| 17068 | display: none;
|
| 17069 | }
|
| 17070 |
|
| 17071 | .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number] {
|
| 17072 | border-block-end: 1px solid transparent;
|
| 17073 | }
|
| 17074 |
|
| 17075 | .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number]:focus {
|
| 17076 | outline: none;
|
| 17077 | }
|
| 17078 |
|
| 17079 | .cds--number-input--fluid.cds--number-input--fluid--invalid .cds--number-input__divider,
|
| 17080 | .cds--number-input--fluid .cds--number__input-wrapper--warning + .cds--number-input__divider {
|
| 17081 | position: absolute;
|
| 17082 | display: block;
|
| 17083 | border: none;
|
| 17084 | margin: 0 1rem;
|
| 17085 | block-size: 0.0625rem;
|
| 17086 | border-block-end: 1px solid var(--cds-border-subtle);
|
| 17087 | inline-size: calc(100% - 2rem);
|
| 17088 | inset-block-start: 3.9375rem;
|
| 17089 | }
|
| 17090 |
|
| 17091 | .cds--number-input--fluid .cds--form-requirement {
|
| 17092 | padding: 0.5rem 2.5rem 0.5rem 1rem;
|
| 17093 | margin: 0;
|
| 17094 | }
|
| 17095 |
|
| 17096 | .cds--number-input--fluid.cds--number-input--fluid--invalid:not(.cds--number-input--fluid--focus) .cds--number {
|
| 17097 | outline: 2px solid var(--cds-support-error, #da1e28);
|
| 17098 | outline-offset: -2px;
|
| 17099 | }
|
| 17100 | @media screen and (prefers-contrast) {
|
| 17101 | .cds--number-input--fluid.cds--number-input--fluid--invalid:not(.cds--number-input--fluid--focus) .cds--number {
|
| 17102 | outline-style: dotted;
|
| 17103 | }
|
| 17104 | }
|
| 17105 |
|
| 17106 | .cds--number-input--fluid--invalid .cds--number[data-invalid] input[type=number] {
|
| 17107 | border-block-end: 1px solid transparent;
|
| 17108 | }
|
| 17109 |
|
| 17110 | .cds--number-input--fluid--invalid .cds--number[data-invalid] input[type=number],
|
| 17111 | .cds--number-input--fluid--invalid .cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn:hover,
|
| 17112 | .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number] ~ .cds--number__controls .cds--number__control-btn:hover:not(:focus) {
|
| 17113 | outline: none;
|
| 17114 | }
|
| 17115 |
|
| 17116 | .cds--number-input--fluid.cds--number-input--invalid .cds--number__input-wrapper input[type=number] ~ .cds--number__controls .cds--number__control-btn,
|
| 17117 | .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number] ~ .cds--number__controls .cds--number__control-btn {
|
| 17118 | border-block-end: none;
|
| 17119 | }
|
| 17120 |
|
| 17121 | .cds--number-input--fluid--invalid .cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn,
|
| 17122 | .cds--number-input--fluid .cds--number input[type=number] ~ .cds--number__controls .cds--number__control-btn {
|
| 17123 | border: initial;
|
| 17124 | border-block-end-width: 0.0625rem;
|
| 17125 | }
|
| 17126 |
|
| 17127 | .cds--number-input--fluid--disabled:not(.cds--number-input--fluid--invalid) .cds--number {
|
| 17128 | border-block-end: 1px solid var(--cds-border-subtle);
|
| 17129 | }
|
| 17130 |
|
| 17131 | .cds--number-input--fluid--disabled.cds--number-input--fluid--invalid .cds--number input[type=number]:disabled {
|
| 17132 | background-color: transparent;
|
| 17133 | }
|
| 17134 |
|
| 17135 | .cds--number-input--fluid .cds--number__input-wrapper--slug .cds--slug {
|
| 17136 | inset-block-start: 2.6875rem;
|
| 17137 | }
|
| 17138 |
|
| 17139 | .cds--number-input--fluid.cds--number-input--fluid--invalid .cds--number__input-wrapper--slug .cds--slug,
|
| 17140 | .cds--number-input--fluid .cds--number__input-wrapper--slug.cds--number__input-wrapper--warning .cds--slug {
|
| 17141 | inset-inline-end: 5.5rem;
|
| 17142 | }
|
| 17143 |
|
| 17144 | .cds--number-input--fluid .cds--number__input-wrapper--slug input,
|
| 17145 | .cds--number-input--fluid.cds--number-input--fluid--invalid .cds--number__input-wrapper--slug input[data-invalid],
|
| 17146 | .cds--number-input--fluid .cds--number__input-wrapper--slug.cds--number__input-wrapper--warning input {
|
| 17147 | padding-inline-end: 7.5rem;
|
| 17148 | }
|
| 17149 |
|
| 17150 | .cds--number-input--fluid .cds--number__input-wrapper--slug:not(:has(.cds--slug--revert)) {
|
| 17151 | background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
|
| 17152 | border-block-end-color: var(--cds-ai-border-strong, #4589ff);
|
| 17153 | }
|
| 17154 |
|
| 17155 | .cds--search--fluid {
|
| 17156 | block-size: 4rem;
|
| 17157 | }
|
| 17158 |
|
| 17159 | .cds--search--fluid .cds--label {
|
| 17160 | position: absolute;
|
| 17161 | z-index: 1;
|
| 17162 | display: flex;
|
| 17163 | overflow: initial;
|
| 17164 | align-items: center;
|
| 17165 | margin: 0;
|
| 17166 | block-size: 1rem;
|
| 17167 | clip: initial;
|
| 17168 | inline-size: calc(100% - 2rem);
|
| 17169 | inset-block-start: 0.8125rem;
|
| 17170 | inset-inline-start: 1rem;
|
| 17171 | white-space: initial;
|
| 17172 | }
|
| 17173 |
|
| 17174 | .cds--search--fluid .cds--label::-webkit-scrollbar,
|
| 17175 | .cds--search--fluid .cds--label .cds--toggletip-label::-webkit-scrollbar {
|
| 17176 | display: none;
|
| 17177 | }
|
| 17178 |
|
| 17179 | .cds--search--fluid .cds--label:not(:has(.cds--toggletip-label)),
|
| 17180 | .cds--search--fluid .cds--label .cds--toggletip-label {
|
| 17181 | -ms-overflow-style: none;
|
| 17182 | overflow-x: scroll;
|
| 17183 | scrollbar-width: none;
|
| 17184 | white-space: nowrap;
|
| 17185 | }
|
| 17186 |
|
| 17187 | .cds--search--fluid .cds--search-input {
|
| 17188 | padding: 2rem 5.5rem 0.8125rem 1rem;
|
| 17189 | block-size: 100%;
|
| 17190 | }
|
| 17191 |
|
| 17192 | .cds--search--fluid .cds--search-magnifier-icon {
|
| 17193 | color: var(--cds-icon-primary, #161616);
|
| 17194 | inset: auto 1rem 0.8125rem auto;
|
| 17195 | transform: none;
|
| 17196 | }
|
| 17197 |
|
| 17198 | .cds--search--fluid .cds--search-close {
|
| 17199 | border: none;
|
| 17200 | block-size: 2.5rem;
|
| 17201 | inline-size: 2.5rem;
|
| 17202 | inset: auto 3rem 0 auto;
|
| 17203 | transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 17204 | }
|
| 17205 |
|
| 17206 | .cds--search--fluid .cds--search-input:focus ~ .cds--search-close:hover {
|
| 17207 | outline: none;
|
| 17208 | }
|
| 17209 |
|
| 17210 | .cds--search--fluid .cds--search-close::after {
|
| 17211 | position: absolute;
|
| 17212 | display: block;
|
| 17213 | block-size: 0.125rem;
|
| 17214 | content: "";
|
| 17215 | inline-size: 100%;
|
| 17216 | inset-block-end: 0;
|
| 17217 | inset-inline-start: 0;
|
| 17218 | }
|
| 17219 |
|
| 17220 | .cds--search--fluid .cds--search-input:focus ~ .cds--search-close::after {
|
| 17221 | background: var(--cds-focus, #0f62fe);
|
| 17222 | }
|
| 17223 |
|
| 17224 | .cds--search--fluid .cds--search-input:not(:focus) ~ .cds--search-close:not([disabled])::after {
|
| 17225 | background: var(--cds-border-strong);
|
| 17226 | block-size: 0.0625rem;
|
| 17227 | }
|
| 17228 |
|
| 17229 | .cds--search--fluid .cds--search-close svg {
|
| 17230 | margin-block-end: 0.125rem;
|
| 17231 | }
|
| 17232 |
|
| 17233 | .cds--search--fluid .cds--search-input:disabled ~ .cds--search-close:hover::before {
|
| 17234 | background: var(--cds-border-subtle);
|
| 17235 | }
|
| 17236 |
|
| 17237 | .cds--search--fluid.cds--search--disabled .cds--label {
|
| 17238 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 17239 | cursor: not-allowed;
|
| 17240 | }
|
| 17241 |
|
| 17242 | .cds--search--fluid.cds--search--disabled .cds--search-input[disabled] {
|
| 17243 | border-block-end: 1px solid var(--cds-border-subtle);
|
| 17244 | }
|
| 17245 |
|
| 17246 | .cds--select {
|
| 17247 | box-sizing: border-box;
|
| 17248 | padding: 0;
|
| 17249 | border: 0;
|
| 17250 | margin: 0;
|
| 17251 | font-family: inherit;
|
| 17252 | font-size: 100%;
|
| 17253 | vertical-align: baseline;
|
| 17254 | position: relative;
|
| 17255 | display: flex;
|
| 17256 | flex-direction: column;
|
| 17257 | align-items: flex-start;
|
| 17258 | inline-size: 100%;
|
| 17259 | }
|
| 17260 | .cds--select *,
|
| 17261 | .cds--select *::before,
|
| 17262 | .cds--select *::after {
|
| 17263 | box-sizing: inherit;
|
| 17264 | }
|
| 17265 |
|
| 17266 | .cds--select-input__wrapper {
|
| 17267 | position: relative;
|
| 17268 | display: flex;
|
| 17269 | align-items: center;
|
| 17270 | inline-size: 100%;
|
| 17271 | }
|
| 17272 |
|
| 17273 | .cds--select-input {
|
| 17274 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 17275 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 17276 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 17277 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 17278 | outline: 2px solid transparent;
|
| 17279 | outline-offset: -2px;
|
| 17280 | display: block;
|
| 17281 | border: none;
|
| 17282 | border-radius: 0;
|
| 17283 | -webkit-appearance: none;
|
| 17284 | -moz-appearance: none;
|
| 17285 | appearance: none;
|
| 17286 | background-color: var(--cds-field);
|
| 17287 | block-size: 2.5rem;
|
| 17288 | border-block-end: 1px solid var(--cds-border-strong);
|
| 17289 | color: var(--cds-text-primary, #161616);
|
| 17290 | cursor: pointer;
|
| 17291 | font-family: inherit;
|
| 17292 | inline-size: 100%;
|
| 17293 | opacity: 1;
|
| 17294 | padding-block: 0;
|
| 17295 | padding-inline: 1rem 3rem;
|
| 17296 | text-overflow: ellipsis;
|
| 17297 | transition: outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 17298 | }
|
| 17299 | .cds--select-input:hover {
|
| 17300 | background-color: var(--cds-field-hover);
|
| 17301 | }
|
| 17302 | .cds--select-input::-ms-expand {
|
| 17303 | display: none;
|
| 17304 | }
|
| 17305 | @-moz-document url-prefix() {
|
| 17306 | .cds--select-input:-moz-focusring, .cds--select-input::-moz-focus-inner {
|
| 17307 | background-image: none;
|
| 17308 | color: transparent;
|
| 17309 | text-shadow: 0 0 0 #000000;
|
| 17310 | }
|
| 17311 | }
|
| 17312 | .cds--select-input:focus {
|
| 17313 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 17314 | outline-offset: -2px;
|
| 17315 | color: var(--cds-text-primary, #161616);
|
| 17316 | }
|
| 17317 | @media screen and (prefers-contrast) {
|
| 17318 | .cds--select-input:focus {
|
| 17319 | outline-style: dotted;
|
| 17320 | }
|
| 17321 | }
|
| 17322 | .cds--select-input:disabled, .cds--select-input:hover:disabled {
|
| 17323 | background-color: var(--cds-field);
|
| 17324 | border-block-end-color: transparent;
|
| 17325 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 17326 | cursor: not-allowed;
|
| 17327 | }
|
| 17328 |
|
| 17329 | .cds--select-input--sm {
|
| 17330 | block-size: 2rem;
|
| 17331 | max-block-size: 2rem;
|
| 17332 | }
|
| 17333 |
|
| 17334 | .cds--select-input--lg {
|
| 17335 | block-size: 3rem;
|
| 17336 | max-block-size: 3rem;
|
| 17337 | }
|
| 17338 |
|
| 17339 | .cds--select--disabled .cds--label,
|
| 17340 | .cds--select--disabled .cds--form__helper-text {
|
| 17341 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 17342 | }
|
| 17343 |
|
| 17344 | .cds--select-input__wrapper[data-invalid] .cds--select-input,
|
| 17345 | .cds--select--warning .cds--select-input {
|
| 17346 | padding-inline-end: 4rem;
|
| 17347 | }
|
| 17348 |
|
| 17349 | .cds--select-input:disabled ~ .cds--select__arrow {
|
| 17350 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 17351 | }
|
| 17352 |
|
| 17353 | .cds--select--light .cds--select-input {
|
| 17354 | background-color: var(--cds-field-02, #ffffff);
|
| 17355 | }
|
| 17356 | .cds--select--light .cds--select-input:hover {
|
| 17357 | background-color: var(--cds-field-hover);
|
| 17358 | }
|
| 17359 | .cds--select--light .cds--select-input:disabled, .cds--select--light .cds--select-input:hover:disabled {
|
| 17360 | background-color: var(--cds-field-02, #ffffff);
|
| 17361 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 17362 | cursor: not-allowed;
|
| 17363 | }
|
| 17364 |
|
| 17365 | .cds--select__arrow {
|
| 17366 | position: absolute;
|
| 17367 | block-size: 100%;
|
| 17368 | fill: var(--cds-icon-primary, #161616);
|
| 17369 | inset-block-start: 0;
|
| 17370 | inset-inline-end: 1rem;
|
| 17371 | pointer-events: none;
|
| 17372 | }
|
| 17373 | @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
|
| 17374 | .cds--select__arrow path {
|
| 17375 | fill: ButtonText;
|
| 17376 | }
|
| 17377 | }
|
| 17378 |
|
| 17379 | .cds--select__invalid-icon {
|
| 17380 | position: absolute;
|
| 17381 | inset-inline-end: 2.5rem;
|
| 17382 | }
|
| 17383 |
|
| 17384 | .cds--select-input__wrapper[data-invalid] .cds--select-input ~ .cds--select__invalid-icon {
|
| 17385 | fill: var(--cds-support-error, #da1e28);
|
| 17386 | }
|
| 17387 |
|
| 17388 | .cds--select__invalid-icon--warning {
|
| 17389 | fill: var(--cds-support-warning, #f1c21b);
|
| 17390 | }
|
| 17391 |
|
| 17392 | .cds--select__invalid-icon--warning path[fill] {
|
| 17393 | fill: #000000;
|
| 17394 | opacity: 1;
|
| 17395 | }
|
| 17396 |
|
| 17397 | optgroup.cds--select-optgroup,
|
| 17398 | .cds--select-option {
|
| 17399 | background-color: var(--cds-layer-hover);
|
| 17400 | color: var(--cds-text-primary, #161616);
|
| 17401 | }
|
| 17402 | optgroup.cds--select-optgroup:disabled,
|
| 17403 | .cds--select-option:disabled {
|
| 17404 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 17405 | }
|
| 17406 |
|
| 17407 | .cds--select--inline {
|
| 17408 | display: flex;
|
| 17409 | flex-direction: row;
|
| 17410 | align-items: center;
|
| 17411 | }
|
| 17412 |
|
| 17413 | .cds--select--inline.cds--select--invalid .cds--label,
|
| 17414 | .cds--select--inline.cds--select--invalid .cds--form__helper-text {
|
| 17415 | align-self: flex-start;
|
| 17416 | margin-block-start: 0.8125rem;
|
| 17417 | }
|
| 17418 |
|
| 17419 | .cds--select--inline .cds--form__helper-text {
|
| 17420 | margin-block-end: 0;
|
| 17421 | margin-inline-start: 0.5rem;
|
| 17422 | }
|
| 17423 |
|
| 17424 | .cds--select--inline .cds--label {
|
| 17425 | margin: 0 0.5rem 0 0;
|
| 17426 | white-space: nowrap;
|
| 17427 | }
|
| 17428 |
|
| 17429 | .cds--select--inline .cds--select-input {
|
| 17430 | background-color: transparent;
|
| 17431 | border-block-end: none;
|
| 17432 | color: var(--cds-text-primary, #161616);
|
| 17433 | inline-size: auto;
|
| 17434 | padding-inline-end: 2rem;
|
| 17435 | padding-inline-start: 0.5rem;
|
| 17436 | }
|
| 17437 |
|
| 17438 | .cds--select--inline .cds--select-input:focus,
|
| 17439 | .cds--select--inline .cds--select-input:focus option,
|
| 17440 | .cds--select--inline .cds--select-input:focus optgroup {
|
| 17441 | background-color: var(--cds-background, #ffffff);
|
| 17442 | }
|
| 17443 |
|
| 17444 | .cds--select--inline .cds--select-input[disabled],
|
| 17445 | .cds--select--inline .cds--select-input[disabled]:hover {
|
| 17446 | background-color: var(--cds-field);
|
| 17447 | }
|
| 17448 |
|
| 17449 | .cds--select--inline .cds--select__arrow {
|
| 17450 | inset-inline-end: 0.5rem;
|
| 17451 | }
|
| 17452 |
|
| 17453 | .cds--select--inline.cds--select--invalid .cds--select-input {
|
| 17454 | padding-inline-end: 3.5rem;
|
| 17455 | }
|
| 17456 |
|
| 17457 | .cds--select--inline.cds--select--invalid .cds--select-input ~ .cds--select__invalid-icon {
|
| 17458 | inset-inline-end: 2rem;
|
| 17459 | }
|
| 17460 |
|
| 17461 | .cds--select--inline .cds--select-input:disabled {
|
| 17462 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 17463 | cursor: not-allowed;
|
| 17464 | }
|
| 17465 | .cds--select--inline .cds--select-input:disabled ~ * {
|
| 17466 | cursor: not-allowed;
|
| 17467 | }
|
| 17468 |
|
| 17469 | .cds--select--readonly .cds--select-input {
|
| 17470 | background-color: transparent;
|
| 17471 | border-block-end-color: var(--cds-border-subtle);
|
| 17472 | cursor: default;
|
| 17473 | }
|
| 17474 |
|
| 17475 | .cds--select--readonly .cds--select__arrow {
|
| 17476 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 17477 | }
|
| 17478 |
|
| 17479 | .cds--select.cds--skeleton {
|
| 17480 | position: relative;
|
| 17481 | padding: 0;
|
| 17482 | border: none;
|
| 17483 | background: var(--cds-skeleton-background, #e8e8e8);
|
| 17484 | box-shadow: none;
|
| 17485 | pointer-events: none;
|
| 17486 | block-size: 2.5rem;
|
| 17487 | inline-size: 100%;
|
| 17488 | }
|
| 17489 | .cds--select.cds--skeleton:hover, .cds--select.cds--skeleton:focus, .cds--select.cds--skeleton:active {
|
| 17490 | border: none;
|
| 17491 | cursor: default;
|
| 17492 | outline: none;
|
| 17493 | }
|
| 17494 | .cds--select.cds--skeleton::before {
|
| 17495 | position: absolute;
|
| 17496 | animation: 3000ms ease-in-out cds--skeleton infinite;
|
| 17497 | background: var(--cds-skeleton-element, #c6c6c6);
|
| 17498 | block-size: 100%;
|
| 17499 | content: "";
|
| 17500 | inline-size: 100%;
|
| 17501 | will-change: transform-origin, transform, opacity;
|
| 17502 | }
|
| 17503 | @media (prefers-reduced-motion: reduce) {
|
| 17504 | .cds--select.cds--skeleton::before {
|
| 17505 | animation: none;
|
| 17506 | }
|
| 17507 | }
|
| 17508 |
|
| 17509 | .cds--select.cds--skeleton .cds--select-input {
|
| 17510 | display: none;
|
| 17511 | }
|
| 17512 |
|
| 17513 | .cds--select--slug .cds--slug {
|
| 17514 | position: absolute;
|
| 17515 | inset-block-start: 50%;
|
| 17516 | inset-inline-end: calc(2.5rem + 8px + 1px);
|
| 17517 | margin-block-start: 0.03125rem;
|
| 17518 | transform: translateY(-50%);
|
| 17519 | }
|
| 17520 |
|
| 17521 | .cds--select--slug .cds--slug::after,
|
| 17522 | .cds--select--slug .cds--slug::before {
|
| 17523 | position: absolute;
|
| 17524 | background-color: var(--cds-border-subtle-01, #c6c6c6);
|
| 17525 | block-size: 1rem;
|
| 17526 | content: "";
|
| 17527 | inline-size: 0.0625rem;
|
| 17528 | }
|
| 17529 |
|
| 17530 | .cds--select--slug .cds--slug::before {
|
| 17531 | display: none;
|
| 17532 | inset-inline-start: calc(-0.5rem - 1px);
|
| 17533 | }
|
| 17534 |
|
| 17535 | .cds--select--slug .cds--slug::after {
|
| 17536 | display: block;
|
| 17537 | inset-inline-end: calc(-0.5rem - 1px);
|
| 17538 | }
|
| 17539 |
|
| 17540 | .cds--select--slug .cds--slug--revert::after {
|
| 17541 | inset-block-start: 0.5rem;
|
| 17542 | inset-inline-end: -0.0625rem;
|
| 17543 | }
|
| 17544 |
|
| 17545 | .cds--select--slug .cds--select-input:not(:has(~ .cds--slug--revert)) {
|
| 17546 | background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
|
| 17547 | border-block-end-color: var(--cds-ai-border-strong, #4589ff);
|
| 17548 | padding-inline-end: 4rem;
|
| 17549 | }
|
| 17550 |
|
| 17551 | .cds--select--slug:has(.cds--select__invalid-icon) .cds--select-input:not(:has(~ .cds--slug--revert)) {
|
| 17552 | padding-inline-end: 6rem;
|
| 17553 | }
|
| 17554 |
|
| 17555 | .cds--select--slug:has(.cds--select__invalid-icon) .cds--slug::before {
|
| 17556 | display: block;
|
| 17557 | }
|
| 17558 |
|
| 17559 | .cds--select--slug .cds--select-input__wrapper[data-invalid] .cds--select-input ~ .cds--select__invalid-icon,
|
| 17560 | .cds--select--slug .cds--select-input__wrapper .cds--select-input ~ .cds--select__invalid-icon {
|
| 17561 | inset-inline-end: 5rem;
|
| 17562 | }
|
| 17563 |
|
| 17564 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 17565 | .cds--select__arrow {
|
| 17566 | fill: ButtonText;
|
| 17567 | }
|
| 17568 | }
|
| 17569 |
|
| 17570 | .cds--select--fluid .cds--select {
|
| 17571 | position: relative;
|
| 17572 | background: var(--cds-field);
|
| 17573 | block-size: 100%;
|
| 17574 | transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 17575 | }
|
| 17576 |
|
| 17577 | .cds--select--fluid .cds--label {
|
| 17578 | position: absolute;
|
| 17579 | z-index: 1;
|
| 17580 | display: flex;
|
| 17581 | align-items: center;
|
| 17582 | margin: 0;
|
| 17583 | block-size: 1rem;
|
| 17584 | inline-size: calc(100% - 2rem);
|
| 17585 | inset-block-start: 0.8125rem;
|
| 17586 | inset-inline-start: 1rem;
|
| 17587 | }
|
| 17588 |
|
| 17589 | .cds--select--fluid .cds--label::-webkit-scrollbar,
|
| 17590 | .cds--select--fluid .cds--label .cds--toggletip-label::-webkit-scrollbar {
|
| 17591 | display: none;
|
| 17592 | }
|
| 17593 |
|
| 17594 | .cds--select--fluid .cds--label:not(:has(.cds--toggletip-label)),
|
| 17595 | .cds--select--fluid .cds--label .cds--toggletip-label {
|
| 17596 | -ms-overflow-style: none;
|
| 17597 | overflow-x: scroll;
|
| 17598 | scrollbar-width: none;
|
| 17599 | white-space: nowrap;
|
| 17600 | }
|
| 17601 |
|
| 17602 | .cds--select--fluid .cds--select-input {
|
| 17603 | padding: 2rem 2rem 0.8125rem 1rem;
|
| 17604 | min-block-size: 4rem;
|
| 17605 | outline: none;
|
| 17606 | text-overflow: ellipsis;
|
| 17607 | }
|
| 17608 |
|
| 17609 | .cds--select--fluid .cds--select__arrow {
|
| 17610 | block-size: 1rem;
|
| 17611 | inset-block-start: 2.125rem;
|
| 17612 | inset-inline-end: 0.75rem;
|
| 17613 | }
|
| 17614 |
|
| 17615 | .cds--select--fluid .cds--select__divider {
|
| 17616 | display: none;
|
| 17617 | transition: border-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 17618 | }
|
| 17619 |
|
| 17620 | .cds--select--fluid .cds--select--invalid .cds--select-input__wrapper {
|
| 17621 | outline: 2px solid var(--cds-support-error, #da1e28);
|
| 17622 | outline-offset: -2px;
|
| 17623 | }
|
| 17624 | @media screen and (prefers-contrast) {
|
| 17625 | .cds--select--fluid .cds--select--invalid .cds--select-input__wrapper {
|
| 17626 | outline-style: dotted;
|
| 17627 | }
|
| 17628 | }
|
| 17629 |
|
| 17630 | .cds--select--fluid .cds--select--invalid .cds--select__divider,
|
| 17631 | .cds--select--fluid .cds--select--warning .cds--select__divider {
|
| 17632 | display: block;
|
| 17633 | border: none;
|
| 17634 | margin: 0 1rem;
|
| 17635 | border-block-end: 1px solid var(--cds-border-subtle);
|
| 17636 | inline-size: calc(100% - 2rem);
|
| 17637 | }
|
| 17638 |
|
| 17639 | .cds--select--fluid .cds--select-input__wrapper[data-invalid] .cds--select-input,
|
| 17640 | .cds--select--fluid .cds--select--warning .cds--select-input {
|
| 17641 | border-block-end: 1px solid transparent;
|
| 17642 | padding-inline-end: 2rem;
|
| 17643 | }
|
| 17644 |
|
| 17645 | .cds--select--fluid .cds--select--warning {
|
| 17646 | border-block-end: 1px solid var(--cds-border-strong);
|
| 17647 | }
|
| 17648 |
|
| 17649 | .cds--select--fluid .cds--select-input__wrapper {
|
| 17650 | display: block;
|
| 17651 | }
|
| 17652 |
|
| 17653 | .cds--select--fluid .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
|
| 17654 | .cds--select--fluid .cds--select--warning .cds--select-input:not(:focus) {
|
| 17655 | outline: none;
|
| 17656 | }
|
| 17657 |
|
| 17658 | .cds--select--fluid .cds--select-input__wrapper[data-invalid] .cds--form-requirement,
|
| 17659 | .cds--select--fluid .cds--select--warning .cds--form-requirement {
|
| 17660 | display: block;
|
| 17661 | overflow: visible;
|
| 17662 | max-block-size: 100%;
|
| 17663 | }
|
| 17664 |
|
| 17665 | .cds--select--fluid .cds--select-input__wrapper[data-invalid] .cds--form-requirement {
|
| 17666 | color: var(--cds-text-error, #da1e28);
|
| 17667 | }
|
| 17668 |
|
| 17669 | .cds--select--fluid .cds--form-requirement {
|
| 17670 | padding: 0.5rem 2.5rem 0.5rem 1rem;
|
| 17671 | margin: 0;
|
| 17672 | }
|
| 17673 |
|
| 17674 | .cds--select--fluid .cds--select-input__wrapper[data-invalid]:hover + .cds--select__divider,
|
| 17675 | .cds--select--fluid .cds--select--warning .cds--select-input__wrapper:hover + .cds--select__divider {
|
| 17676 | border-color: transparent;
|
| 17677 | }
|
| 17678 |
|
| 17679 | .cds--select--fluid .cds--select--invalid .cds--select-input__wrapper[data-invalid] .cds--select__invalid-icon,
|
| 17680 | .cds--select--fluid .cds--select--warning .cds--select-input__wrapper .cds--select__invalid-icon {
|
| 17681 | inset-block-start: 4.5625rem;
|
| 17682 | inset-inline-end: 1rem;
|
| 17683 | pointer-events: none;
|
| 17684 | }
|
| 17685 |
|
| 17686 | .cds--select--fluid .cds--select--fluid--focus .cds--select-input__wrapper {
|
| 17687 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 17688 | outline-offset: -2px;
|
| 17689 | }
|
| 17690 | @media screen and (prefers-contrast) {
|
| 17691 | .cds--select--fluid .cds--select--fluid--focus .cds--select-input__wrapper {
|
| 17692 | outline-style: dotted;
|
| 17693 | }
|
| 17694 | }
|
| 17695 |
|
| 17696 | .cds--select--fluid .cds--select--fluid--focus .cds--select-input,
|
| 17697 | .cds--select--fluid .cds--select--fluid--focus.cds--select--warning {
|
| 17698 | border-block-end: 1px solid transparent;
|
| 17699 | }
|
| 17700 |
|
| 17701 | .cds--select--fluid .cds--select--disabled .cds--toggletip-label {
|
| 17702 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 17703 | }
|
| 17704 |
|
| 17705 | .cds--select--fluid .cds--select--disabled .cds--toggletip-button {
|
| 17706 | pointer-events: none;
|
| 17707 | }
|
| 17708 |
|
| 17709 | .cds--select--fluid .cds--select--disabled .cds--toggletip-button svg {
|
| 17710 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 17711 | }
|
| 17712 |
|
| 17713 | .cds--select--fluid .cds--select--slug .cds--slug {
|
| 17714 | inset-block-start: 2.625rem;
|
| 17715 | inset-inline-end: 2.5rem;
|
| 17716 | }
|
| 17717 |
|
| 17718 | .cds--select--fluid .cds--select--slug .cds--select-input {
|
| 17719 | padding-inline-end: 4rem;
|
| 17720 | }
|
| 17721 |
|
| 17722 | .cds--select--fluid .cds--select--slug:has(.cds--select__invalid-icon) .cds--slug::before {
|
| 17723 | display: none;
|
| 17724 | }
|
| 17725 |
|
| 17726 | .cds--text-area {
|
| 17727 | box-sizing: border-box;
|
| 17728 | padding: 0;
|
| 17729 | border: 0;
|
| 17730 | margin: 0;
|
| 17731 | font-family: inherit;
|
| 17732 | font-size: 100%;
|
| 17733 | vertical-align: baseline;
|
| 17734 | font-size: var(--cds-body-01-font-size, 0.875rem);
|
| 17735 | font-weight: var(--cds-body-01-font-weight, 400);
|
| 17736 | line-height: var(--cds-body-01-line-height, 1.42857);
|
| 17737 | letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
|
| 17738 | outline: 2px solid transparent;
|
| 17739 | outline-offset: -2px;
|
| 17740 | padding: 0.6875rem var(--cds-layout-density-padding-inline-local);
|
| 17741 | border: none;
|
| 17742 | background-color: var(--cds-field);
|
| 17743 | block-size: 100%;
|
| 17744 | border-block-end: 1px solid var(--cds-border-strong);
|
| 17745 | color: var(--cds-text-primary, #161616);
|
| 17746 | font-family: inherit;
|
| 17747 | min-block-size: 2.5rem;
|
| 17748 | min-inline-size: 10rem;
|
| 17749 | resize: vertical;
|
| 17750 | transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 17751 | }
|
| 17752 | .cds--text-area *,
|
| 17753 | .cds--text-area *::before,
|
| 17754 | .cds--text-area *::after {
|
| 17755 | box-sizing: inherit;
|
| 17756 | }
|
| 17757 |
|
| 17758 | .cds--text-area:focus,
|
| 17759 | .cds--text-area:active {
|
| 17760 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 17761 | outline-offset: -2px;
|
| 17762 | }
|
| 17763 | @media screen and (prefers-contrast) {
|
| 17764 | .cds--text-area:focus,
|
| 17765 | .cds--text-area:active {
|
| 17766 | outline-style: dotted;
|
| 17767 | }
|
| 17768 | }
|
| 17769 |
|
| 17770 | .cds--text-area::-moz-placeholder {
|
| 17771 | color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4));
|
| 17772 | opacity: 1;
|
| 17773 | font-size: var(--cds-body-01-font-size, 0.875rem);
|
| 17774 | font-weight: var(--cds-body-01-font-weight, 400);
|
| 17775 | line-height: var(--cds-body-01-line-height, 1.42857);
|
| 17776 | letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
|
| 17777 | }
|
| 17778 |
|
| 17779 | .cds--text-area::placeholder {
|
| 17780 | color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4));
|
| 17781 | opacity: 1;
|
| 17782 | font-size: var(--cds-body-01-font-size, 0.875rem);
|
| 17783 | font-weight: var(--cds-body-01-font-weight, 400);
|
| 17784 | line-height: var(--cds-body-01-line-height, 1.42857);
|
| 17785 | letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
|
| 17786 | }
|
| 17787 |
|
| 17788 | .cds--text-area--light {
|
| 17789 | background-color: var(--cds-field-02, #ffffff);
|
| 17790 | }
|
| 17791 |
|
| 17792 | .cds--text-area--invalid {
|
| 17793 | padding-inline-end: 2.5rem;
|
| 17794 | }
|
| 17795 |
|
| 17796 | .cds--text-area__wrapper {
|
| 17797 | --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
|
| 17798 | position: relative;
|
| 17799 | display: flex;
|
| 17800 | inline-size: 100%;
|
| 17801 | max-inline-size: 100%;
|
| 17802 | }
|
| 17803 |
|
| 17804 | .cds--text-area__wrapper--cols {
|
| 17805 | inline-size: auto;
|
| 17806 | }
|
| 17807 |
|
| 17808 | .cds--text-area__invalid-icon {
|
| 17809 | position: absolute;
|
| 17810 | fill: var(--cds-support-error, #da1e28);
|
| 17811 | inset-block-start: 0.75rem;
|
| 17812 | inset-inline-end: var(--cds-layout-density-padding-inline-local);
|
| 17813 | }
|
| 17814 |
|
| 17815 | .cds--text-area__invalid-icon--warning {
|
| 17816 | fill: var(--cds-support-warning, #f1c21b);
|
| 17817 | }
|
| 17818 |
|
| 17819 | .cds--text-area__invalid-icon--warning path[fill] {
|
| 17820 | fill: #000000;
|
| 17821 | opacity: 1;
|
| 17822 | }
|
| 17823 |
|
| 17824 | .cds--text-area__counter-alert {
|
| 17825 | position: absolute;
|
| 17826 | overflow: hidden;
|
| 17827 | padding: 0;
|
| 17828 | border: 0;
|
| 17829 | margin: -1px;
|
| 17830 | block-size: 1px;
|
| 17831 | clip: rect(0, 0, 0, 0);
|
| 17832 | inline-size: 1px;
|
| 17833 | }
|
| 17834 |
|
| 17835 | .cds--text-area:disabled {
|
| 17836 | background-color: var(--cds-field);
|
| 17837 | border-block-end: 1px solid transparent;
|
| 17838 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 17839 | cursor: not-allowed;
|
| 17840 | outline: none;
|
| 17841 | resize: none;
|
| 17842 | }
|
| 17843 |
|
| 17844 | .cds--text-area:disabled::-moz-placeholder {
|
| 17845 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 17846 | }
|
| 17847 |
|
| 17848 | .cds--text-area:disabled::placeholder {
|
| 17849 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 17850 | }
|
| 17851 |
|
| 17852 | .cds--text-area__wrapper--readonly .cds--text-area {
|
| 17853 | background: transparent;
|
| 17854 | border-block-end-color: var(--cds-border-subtle);
|
| 17855 | }
|
| 17856 |
|
| 17857 | .cds--text-area__wrapper--slug .cds--slug {
|
| 17858 | position: absolute;
|
| 17859 | inset-block-start: 0.75rem;
|
| 17860 | inset-inline-end: 1rem;
|
| 17861 | }
|
| 17862 |
|
| 17863 | .cds--text-area__wrapper--slug .cds--slug.cds--slug--revert {
|
| 17864 | inset-block-start: 0.25rem;
|
| 17865 | inset-inline-end: 0.5rem;
|
| 17866 | transform: translate(0);
|
| 17867 | }
|
| 17868 |
|
| 17869 | .cds--text-area__wrapper--slug .cds--text-area:not(:has(~ .cds--slug--revert)) {
|
| 17870 | background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
|
| 17871 | border-block-end-color: var(--cds-ai-border-strong, #4589ff);
|
| 17872 | padding-inline-end: 2.5rem;
|
| 17873 | }
|
| 17874 |
|
| 17875 | .cds--text-area--invalid:has(~ .cds--slug),
|
| 17876 | .cds--text-area--warn:has(~ .cds--slug) {
|
| 17877 | padding-inline-end: 4rem;
|
| 17878 | }
|
| 17879 |
|
| 17880 | .cds--text-area--invalid ~ .cds--slug,
|
| 17881 | .cds--text-area--warn ~ .cds--slug {
|
| 17882 | inset-inline-end: 2.5rem;
|
| 17883 | }
|
| 17884 |
|
| 17885 | .cds--text-area--invalid ~ .cds--slug.cds--slug--revert,
|
| 17886 | .cds--text-area--warn ~ .cds--slug.cds--slug--revert {
|
| 17887 | inset-inline-end: 2rem;
|
| 17888 | }
|
| 17889 |
|
| 17890 | .cds--text-area.cds--skeleton {
|
| 17891 | position: relative;
|
| 17892 | padding: 0;
|
| 17893 | border: none;
|
| 17894 | background: var(--cds-skeleton-background, #e8e8e8);
|
| 17895 | box-shadow: none;
|
| 17896 | pointer-events: none;
|
| 17897 | block-size: 6.25rem;
|
| 17898 | inline-size: 100%;
|
| 17899 | }
|
| 17900 | .cds--text-area.cds--skeleton:hover, .cds--text-area.cds--skeleton:focus, .cds--text-area.cds--skeleton:active {
|
| 17901 | border: none;
|
| 17902 | cursor: default;
|
| 17903 | outline: none;
|
| 17904 | }
|
| 17905 | .cds--text-area.cds--skeleton::before {
|
| 17906 | position: absolute;
|
| 17907 | animation: 3000ms ease-in-out cds--skeleton infinite;
|
| 17908 | background: var(--cds-skeleton-element, #c6c6c6);
|
| 17909 | block-size: 100%;
|
| 17910 | content: "";
|
| 17911 | inline-size: 100%;
|
| 17912 | will-change: transform-origin, transform, opacity;
|
| 17913 | }
|
| 17914 | @media (prefers-reduced-motion: reduce) {
|
| 17915 | .cds--text-area.cds--skeleton::before {
|
| 17916 | animation: none;
|
| 17917 | }
|
| 17918 | }
|
| 17919 | .cds--text-area.cds--skeleton::-moz-placeholder {
|
| 17920 | color: transparent;
|
| 17921 | }
|
| 17922 | .cds--text-area.cds--skeleton::placeholder {
|
| 17923 | color: transparent;
|
| 17924 | }
|
| 17925 |
|
| 17926 | .cds--text-area__label-wrapper {
|
| 17927 | display: flex;
|
| 17928 | justify-content: space-between;
|
| 17929 | inline-size: 100%;
|
| 17930 | }
|
| 17931 |
|
| 17932 | .cds--text-area--fluid .cds--text-area__wrapper {
|
| 17933 | position: relative;
|
| 17934 | flex-direction: column;
|
| 17935 | background: var(--cds-field);
|
| 17936 | block-size: 100%;
|
| 17937 | }
|
| 17938 |
|
| 17939 | .cds--modal .cds--text-area--fluid .cds--text-area__wrapper {
|
| 17940 | background: var(--cds-field-02, #ffffff);
|
| 17941 | }
|
| 17942 |
|
| 17943 | .cds--text-area--fluid .cds--text-area__label-wrapper {
|
| 17944 | position: relative;
|
| 17945 | block-size: 100%;
|
| 17946 | }
|
| 17947 |
|
| 17948 | .cds--text-area--fluid .cds--label {
|
| 17949 | position: absolute;
|
| 17950 | z-index: 1;
|
| 17951 | display: flex;
|
| 17952 | align-items: center;
|
| 17953 | margin: 0;
|
| 17954 | block-size: 1rem;
|
| 17955 | inline-size: auto;
|
| 17956 | inset-block-start: 0.8125rem;
|
| 17957 | inset-inline-start: 1rem;
|
| 17958 | }
|
| 17959 |
|
| 17960 | .cds--text-area--fluid .cds--label::-webkit-scrollbar,
|
| 17961 | .cds--text-area--fluid .cds--label .cds--toggletip-label::-webkit-scrollbar {
|
| 17962 | display: none;
|
| 17963 | }
|
| 17964 |
|
| 17965 | .cds--text-area--fluid .cds--label:not(:has(.cds--toggletip-label)),
|
| 17966 | .cds--text-area--fluid .cds--label .cds--toggletip-label {
|
| 17967 | -ms-overflow-style: none;
|
| 17968 | overflow-x: scroll;
|
| 17969 | scrollbar-width: none;
|
| 17970 | white-space: nowrap;
|
| 17971 | }
|
| 17972 |
|
| 17973 | .cds--text-area--fluid div.cds--label {
|
| 17974 | display: flex;
|
| 17975 | justify-content: flex-end;
|
| 17976 | }
|
| 17977 |
|
| 17978 | .cds--text-area--fluid .cds--text-area {
|
| 17979 | padding: 0 1rem 0.8125rem;
|
| 17980 | margin-block-start: 2rem;
|
| 17981 | min-block-size: 4rem;
|
| 17982 | outline: none;
|
| 17983 | }
|
| 17984 |
|
| 17985 | .cds--text-area--fluid .cds--form__helper-text {
|
| 17986 | display: none;
|
| 17987 | }
|
| 17988 |
|
| 17989 | .cds--text-area--fluid .cds--text-area--invalid,
|
| 17990 | .cds--text-area--fluid .cds--text-area:focus {
|
| 17991 | border-block-end: 1px solid transparent;
|
| 17992 | }
|
| 17993 |
|
| 17994 | .cds--text-area__divider,
|
| 17995 | .cds--text-area--fluid .cds--text-area__divider {
|
| 17996 | display: none;
|
| 17997 | }
|
| 17998 |
|
| 17999 | .cds--text-area--fluid .cds--text-area--invalid,
|
| 18000 | .cds--text-area--fluid .cds--text-area--warn {
|
| 18001 | resize: none;
|
| 18002 | }
|
| 18003 |
|
| 18004 | .cds--text-area--fluid .cds--text-area--invalid {
|
| 18005 | padding: 0 0.875rem 0.8125rem;
|
| 18006 | margin-block-start: 1.875rem;
|
| 18007 | }
|
| 18008 |
|
| 18009 | .cds--text-area--fluid .cds--text-area__wrapper[data-invalid] .cds--text-area__divider,
|
| 18010 | .cds--text-area--fluid .cds--text-area__wrapper--warn .cds--text-area__divider {
|
| 18011 | display: block;
|
| 18012 | border-style: solid;
|
| 18013 | border-color: var(--cds-border-subtle);
|
| 18014 | margin: 0 1rem;
|
| 18015 | border-block-end: none;
|
| 18016 | }
|
| 18017 |
|
| 18018 | .cds--text-area--fluid .cds--text-area__wrapper[data-invalid] .cds--form-requirement.cds--form-requirement,
|
| 18019 | .cds--text-area--fluid .cds--text-area__wrapper--warn .cds--form-requirement.cds--form-requirement {
|
| 18020 | position: relative;
|
| 18021 | display: block;
|
| 18022 | overflow: visible;
|
| 18023 | padding: 0.5rem 2.5rem 0.5rem 1rem;
|
| 18024 | margin: 0;
|
| 18025 | background: var(--cds-field);
|
| 18026 | max-block-size: 12.5rem;
|
| 18027 | }
|
| 18028 |
|
| 18029 | .cds--text-area--fluid .cds--text-area__wrapper--warn .cds--form-requirement.cds--form-requirement {
|
| 18030 | border-block-end: 1px solid var(--cds-border-strong);
|
| 18031 | color: var(--cds-text-primary, #161616);
|
| 18032 | }
|
| 18033 |
|
| 18034 | .cds--text-area--fluid .cds--text-area__wrapper[data-invalid] .cds--form-requirement.cds--form-requirement {
|
| 18035 | border-block-end: none;
|
| 18036 | color: var(--cds-text-error, #da1e28);
|
| 18037 | }
|
| 18038 |
|
| 18039 | .cds--text-area--fluid .cds--text-area--warn {
|
| 18040 | border-block-end: none;
|
| 18041 | }
|
| 18042 |
|
| 18043 | .cds--modal .cds--text-area--fluid .cds--text-area__wrapper[data-invalid] .cds--text-area__divider + .cds--form-requirement {
|
| 18044 | background: var(--cds-field-02, #ffffff);
|
| 18045 | }
|
| 18046 |
|
| 18047 | .cds--text-area--fluid .cds--text-area__invalid-icon {
|
| 18048 | inset-block-start: 0.5rem;
|
| 18049 | }
|
| 18050 |
|
| 18051 | .cds--text-area--fluid .cds--text-area__wrapper[data-invalid]:not(:focus) {
|
| 18052 | border: 2px solid var(--cds-support-error, #da1e28);
|
| 18053 | }
|
| 18054 |
|
| 18055 | .cds--text-area--fluid .cds--text-area__wrapper[data-invalid]:focus-within,
|
| 18056 | .cds--text-area--fluid .cds--text-area__wrapper:focus-within {
|
| 18057 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 18058 | outline-offset: -2px;
|
| 18059 | }
|
| 18060 | @media screen and (prefers-contrast) {
|
| 18061 | .cds--text-area--fluid .cds--text-area__wrapper[data-invalid]:focus-within,
|
| 18062 | .cds--text-area--fluid .cds--text-area__wrapper:focus-within {
|
| 18063 | outline-style: dotted;
|
| 18064 | }
|
| 18065 | }
|
| 18066 |
|
| 18067 | .cds--text-area--fluid .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:focus,
|
| 18068 | .cds--text-area--fluid .cds--text-area__wrapper > .cds--text-area:focus,
|
| 18069 | .cds--text-area--fluid .cds--text-area__wrapper > .cds--text-area:active,
|
| 18070 | .cds--text-area--fluid .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid {
|
| 18071 | outline: none;
|
| 18072 | transition: none;
|
| 18073 | }
|
| 18074 |
|
| 18075 | .cds--text-area--fluid__skeleton {
|
| 18076 | padding: 1rem;
|
| 18077 | background: var(--cds-skeleton-background, #e8e8e8);
|
| 18078 | border-block-end: 1px solid var(--cds-skeleton-element, #c6c6c6);
|
| 18079 | }
|
| 18080 |
|
| 18081 | .cds--text-area--fluid__skeleton .cds--skeleton,
|
| 18082 | .cds--text-area--fluid__skeleton .cds--text-area.cds--skeleton::before {
|
| 18083 | block-size: 0.5rem;
|
| 18084 | }
|
| 18085 |
|
| 18086 | .cds--text-area--fluid__skeleton .cds--label {
|
| 18087 | margin-block-end: 0.75rem;
|
| 18088 | }
|
| 18089 |
|
| 18090 | .cds--text-area--fluid__skeleton .cds--text-area.cds--skeleton {
|
| 18091 | block-size: 4rem;
|
| 18092 | inline-size: 80%;
|
| 18093 | }
|
| 18094 |
|
| 18095 | .cds--text-area--fluid .cds--text-area__wrapper--slug:not(:has(~ .cds--slug--revert)) {
|
| 18096 | background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
|
| 18097 | border-block-end-color: var(--cds-ai-border-strong, #4589ff);
|
| 18098 | }
|
| 18099 |
|
| 18100 | .cds--text-area--fluid .cds--text-area__wrapper--slug .cds--text-area--invalid ~ .cds--slug,
|
| 18101 | .cds--text-area--fluid .cds--text-area__wrapper--slug .cds--text-area--warn ~ .cds--slug {
|
| 18102 | inset-inline-end: 1rem;
|
| 18103 | }
|
| 18104 |
|
| 18105 | .cds--text-area--fluid .cds--text-area__wrapper--slug .cds--text-area--invalid {
|
| 18106 | border-block-end-color: transparent;
|
| 18107 | }
|
| 18108 |
|
| 18109 | .cds--text-input--fluid.cds--text-input-wrapper {
|
| 18110 | position: relative;
|
| 18111 | background: var(--cds-field);
|
| 18112 | block-size: 100%;
|
| 18113 | transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 18114 | }
|
| 18115 |
|
| 18116 | .cds--text-input--fluid .cds--label {
|
| 18117 | position: absolute;
|
| 18118 | z-index: 1;
|
| 18119 | display: flex;
|
| 18120 | align-items: center;
|
| 18121 | margin: 0;
|
| 18122 | block-size: 1rem;
|
| 18123 | inline-size: calc(100% - 2rem);
|
| 18124 | inset-block-start: 0.8125rem;
|
| 18125 | inset-inline-start: 1rem;
|
| 18126 | }
|
| 18127 |
|
| 18128 | .cds--text-input--fluid .cds--label::-webkit-scrollbar,
|
| 18129 | .cds--text-input--fluid .cds--label .cds--toggletip-label::-webkit-scrollbar {
|
| 18130 | display: none;
|
| 18131 | }
|
| 18132 |
|
| 18133 | .cds--text-input--fluid .cds--label:not(:has(.cds--toggletip-label)),
|
| 18134 | .cds--text-input--fluid .cds--label .cds--toggletip-label {
|
| 18135 | -ms-overflow-style: none;
|
| 18136 | overflow-x: scroll;
|
| 18137 | scrollbar-width: none;
|
| 18138 | white-space: nowrap;
|
| 18139 | }
|
| 18140 |
|
| 18141 | .cds--text-input--fluid .cds--form__helper-text {
|
| 18142 | display: none;
|
| 18143 | }
|
| 18144 |
|
| 18145 | .cds--text-input--fluid .cds--text-input {
|
| 18146 | padding: 2rem 1rem 0.8125rem;
|
| 18147 | min-block-size: 4rem;
|
| 18148 | }
|
| 18149 |
|
| 18150 | .cds--text-input__divider,
|
| 18151 | .cds--text-input--fluid .cds--text-input__divider {
|
| 18152 | display: none;
|
| 18153 | }
|
| 18154 |
|
| 18155 | .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid],
|
| 18156 | .cds--text-input--fluid .cds--text-input__field-wrapper--warning {
|
| 18157 | display: block;
|
| 18158 | }
|
| 18159 |
|
| 18160 | .cds--text-input--fluid input[data-invalid] {
|
| 18161 | outline: none;
|
| 18162 | }
|
| 18163 |
|
| 18164 | .cds--text-input--fluid .cds--form-requirement {
|
| 18165 | padding: 0.5rem 2.5rem 0.5rem 1rem;
|
| 18166 | margin: 0;
|
| 18167 | }
|
| 18168 |
|
| 18169 | .cds--text-input--fluid .cds--text-input--invalid,
|
| 18170 | .cds--text-input--fluid .cds--text-input--warning {
|
| 18171 | border-block-end: none;
|
| 18172 | }
|
| 18173 |
|
| 18174 | .cds--text-input--fluid .cds--text-input--invalid ~ .cds--text-input__divider,
|
| 18175 | .cds--text-input--fluid .cds--text-input--warning ~ .cds--text-input__divider {
|
| 18176 | display: block;
|
| 18177 | border-style: solid;
|
| 18178 | border-color: var(--cds-border-subtle);
|
| 18179 | margin: 0 1rem;
|
| 18180 | border-block-end: none;
|
| 18181 | }
|
| 18182 |
|
| 18183 | .cds--text-input--fluid .cds--text-input__invalid-icon {
|
| 18184 | inset-block-start: 5rem;
|
| 18185 | }
|
| 18186 |
|
| 18187 | .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid,
|
| 18188 | .cds--text-input--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning {
|
| 18189 | outline: none;
|
| 18190 | }
|
| 18191 |
|
| 18192 | .cds--text-input--fluid .cds--text-input__field-wrapper--warning {
|
| 18193 | border-block-end: 1px solid var(--cds-border-strong);
|
| 18194 | }
|
| 18195 |
|
| 18196 | .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) {
|
| 18197 | outline: 2px solid var(--cds-support-error, #da1e28);
|
| 18198 | outline-offset: -2px;
|
| 18199 | }
|
| 18200 | @media screen and (prefers-contrast) {
|
| 18201 | .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) {
|
| 18202 | outline-style: dotted;
|
| 18203 | }
|
| 18204 | }
|
| 18205 |
|
| 18206 | .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
|
| 18207 | .cds--text-input--fluid .cds--text-input__field-wrapper--warning:focus-within {
|
| 18208 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 18209 | outline-offset: -2px;
|
| 18210 | }
|
| 18211 | @media screen and (prefers-contrast) {
|
| 18212 | .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
|
| 18213 | .cds--text-input--fluid .cds--text-input__field-wrapper--warning:focus-within {
|
| 18214 | outline-style: dotted;
|
| 18215 | }
|
| 18216 | }
|
| 18217 |
|
| 18218 | .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus,
|
| 18219 | .cds--text-input--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning:focus {
|
| 18220 | outline: none;
|
| 18221 | }
|
| 18222 |
|
| 18223 | .cds--text-input--fluid .cds--text-input.cds--password-input {
|
| 18224 | padding-inline-end: 2.5rem;
|
| 18225 | }
|
| 18226 |
|
| 18227 | .cds--text-input--fluid.cds--password-input-wrapper .cds--text-input__invalid-icon {
|
| 18228 | inset-inline-end: 1rem;
|
| 18229 | }
|
| 18230 |
|
| 18231 | .cds--text-input--fluid .cds--toggle-password-tooltip {
|
| 18232 | outline: 2px solid transparent;
|
| 18233 | outline-offset: -2px;
|
| 18234 | position: absolute;
|
| 18235 | block-size: 4rem;
|
| 18236 | cursor: pointer;
|
| 18237 | inline-size: 3rem;
|
| 18238 | inset-block-start: 0;
|
| 18239 | inset-inline-end: 0;
|
| 18240 | transition: outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 18241 | }
|
| 18242 |
|
| 18243 | .cds--text-input--fluid .cds--toggle-password-tooltip .cds--popover {
|
| 18244 | inset-inline-start: 0;
|
| 18245 | }
|
| 18246 |
|
| 18247 | .cds--text-input--fluid .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger {
|
| 18248 | block-size: 2rem;
|
| 18249 | inline-size: 2rem;
|
| 18250 | inset-block-start: 1.625rem;
|
| 18251 | inset-inline-end: 0.5rem;
|
| 18252 | }
|
| 18253 |
|
| 18254 | .cds--text-input--fluid__skeleton {
|
| 18255 | position: relative;
|
| 18256 | background: var(--cds-skeleton-background, #e8e8e8);
|
| 18257 | block-size: 4rem;
|
| 18258 | border-block-end: 1px solid var(--cds-skeleton-element, #c6c6c6);
|
| 18259 | }
|
| 18260 |
|
| 18261 | .cds--text-input--fluid__skeleton .cds--skeleton {
|
| 18262 | position: absolute;
|
| 18263 | block-size: 0.5rem;
|
| 18264 | inline-size: 25%;
|
| 18265 | inset-block-start: 1rem;
|
| 18266 | inset-inline-start: 1rem;
|
| 18267 | }
|
| 18268 |
|
| 18269 | .cds--text-input--fluid__skeleton .cds--label {
|
| 18270 | position: absolute;
|
| 18271 | padding: 0;
|
| 18272 | block-size: 0.5rem;
|
| 18273 | inline-size: 50%;
|
| 18274 | inset-block-start: 2.25rem;
|
| 18275 | inset-inline-start: 1rem;
|
| 18276 | }
|
| 18277 |
|
| 18278 | .cds--text-input--fluid .cds--text-input__field-wrapper--slug .cds--slug {
|
| 18279 | inset-block-start: 2.625rem;
|
| 18280 | }
|
| 18281 |
|
| 18282 | .cds--text-input--fluid .cds--text-input--invalid ~ .cds--slug,
|
| 18283 | .cds--text-input--fluid .cds--text-input--warning ~ .cds--slug {
|
| 18284 | inset-inline-end: 1rem;
|
| 18285 | }
|
| 18286 |
|
| 18287 | .cds--text-input--fluid .cds--text-input__field-wrapper--slug .cds--text-input,
|
| 18288 | .cds--text-input--fluid .cds--text-input__field-wrapper--slug .cds--text-input--invalid,
|
| 18289 | .cds--text-input--fluid .cds--text-input__field-wrapper--slug .cds--text-input--warning {
|
| 18290 | padding-inline-end: 2.5rem;
|
| 18291 | }
|
| 18292 |
|
| 18293 | .cds--time-picker--fluid {
|
| 18294 | background: var(--cds-field);
|
| 18295 | }
|
| 18296 |
|
| 18297 | .cds--time-picker--fluid .cds--time-picker--fluid__wrapper {
|
| 18298 | display: flex;
|
| 18299 | }
|
| 18300 |
|
| 18301 | .cds--time-picker--fluid__wrapper > *:nth-child(1),
|
| 18302 | .cds--time-picker--fluid__wrapper > *:nth-child(2) {
|
| 18303 | flex-basis: 25%;
|
| 18304 | }
|
| 18305 |
|
| 18306 | .cds--time-picker--equal-width .cds--time-picker--fluid__wrapper > * {
|
| 18307 | flex-basis: 50%;
|
| 18308 | }
|
| 18309 |
|
| 18310 | .cds--time-picker--fluid__wrapper > *:nth-child(2):not(:last-child) .cds--select-input__wrapper::before,
|
| 18311 | .cds--time-picker--fluid__wrapper > *:last-child .cds--select-input__wrapper::before {
|
| 18312 | position: absolute;
|
| 18313 | display: block;
|
| 18314 | background-color: var(--cds-border-strong);
|
| 18315 | block-size: calc(100% - 1px);
|
| 18316 | content: "";
|
| 18317 | inline-size: 1px;
|
| 18318 | opacity: 1;
|
| 18319 | transition: opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 18320 | }
|
| 18321 |
|
| 18322 | .cds--time-picker--fluid__wrapper .cds--select-input__wrapper::after {
|
| 18323 | inset-inline-end: 0;
|
| 18324 | }
|
| 18325 |
|
| 18326 | .cds--time-picker--fluid__wrapper .cds--select-input__wrapper::before {
|
| 18327 | inset-inline-start: 0;
|
| 18328 | }
|
| 18329 |
|
| 18330 | .cds--time-picker--fluid:not(.cds--time-picker--fluid--disabled) .cds--time-picker--fluid__wrapper > *:nth-child(2):not(:last-child):hover .cds--select-input__wrapper::before,
|
| 18331 | .cds--time-picker--fluid:not(.cds--time-picker--fluid--disabled) .cds--time-picker--fluid__wrapper > *:nth-child(2):hover:not(:last-child) ~ * .cds--select-input__wrapper::before,
|
| 18332 | .cds--time-picker--fluid:not(.cds--time-picker--fluid--disabled) .cds--time-picker--fluid__wrapper > *:last-child:hover .cds--select-input__wrapper::before {
|
| 18333 | opacity: 0;
|
| 18334 | }
|
| 18335 |
|
| 18336 | .cds--time-picker--fluid--disabled .cds--time-picker--fluid__wrapper .cds--select--disabled .cds--select-input__wrapper::before {
|
| 18337 | background: var(--cds-border-disabled, #c6c6c6);
|
| 18338 | }
|
| 18339 |
|
| 18340 | .cds--time-picker--fluid .cds--form-requirement {
|
| 18341 | padding: 0.5rem 2.5rem 0.5rem 1rem;
|
| 18342 | margin: 0;
|
| 18343 | background: var(--cds-field);
|
| 18344 | }
|
| 18345 |
|
| 18346 | .cds--time-picker--fluid--invalid {
|
| 18347 | outline: 2px solid var(--cds-support-error, #da1e28);
|
| 18348 | outline-offset: -2px;
|
| 18349 | position: relative;
|
| 18350 | }
|
| 18351 | @media screen and (prefers-contrast) {
|
| 18352 | .cds--time-picker--fluid--invalid {
|
| 18353 | outline-style: dotted;
|
| 18354 | }
|
| 18355 | }
|
| 18356 |
|
| 18357 | .cds--time-picker--fluid--invalid .cds--text-input,
|
| 18358 | .cds--time-picker--fluid--invalid .cds--text-input-wrapper,
|
| 18359 | .cds--time-picker--fluid--invalid .cds--select-input,
|
| 18360 | .cds--time-picker--fluid--invalid .cds--select {
|
| 18361 | background: transparent;
|
| 18362 | }
|
| 18363 |
|
| 18364 | .cds--time-picker--fluid--invalid .cds--select-input {
|
| 18365 | border-block-start: 2px solid transparent;
|
| 18366 | padding-block-start: 1.875rem;
|
| 18367 | }
|
| 18368 |
|
| 18369 | .cds--time-picker--fluid .cds--select--fluid:last-of-type .cds--select-input {
|
| 18370 | border-inline-end: 2px solid transparent;
|
| 18371 | }
|
| 18372 |
|
| 18373 | .cds--time-picker--fluid--invalid .cds--select-input:hover:not([disabled]) {
|
| 18374 | background: var(--cds-field-hover);
|
| 18375 | }
|
| 18376 |
|
| 18377 | .cds--time-picker--fluid--invalid .cds--select-input:hover {
|
| 18378 | border-block-start: 2px solid var(--cds-support-error, #da1e28);
|
| 18379 | }
|
| 18380 |
|
| 18381 | .cds--time-picker--fluid--invalid .cds--select--fluid:last-of-type .cds--select-input:hover {
|
| 18382 | border-inline-end: 2px solid var(--cds-support-error, #da1e28);
|
| 18383 | }
|
| 18384 |
|
| 18385 | .cds--time-picker--fluid--warning {
|
| 18386 | position: relative;
|
| 18387 | }
|
| 18388 |
|
| 18389 | .cds--time-picker__icon {
|
| 18390 | display: none;
|
| 18391 | }
|
| 18392 |
|
| 18393 | .cds--time-picker--fluid--invalid .cds--time-picker__icon,
|
| 18394 | .cds--time-picker--fluid--warning .cds--time-picker__icon {
|
| 18395 | position: absolute;
|
| 18396 | display: block;
|
| 18397 | inset-block-start: 4.5rem;
|
| 18398 | inset-inline-end: 1rem;
|
| 18399 | }
|
| 18400 |
|
| 18401 | .cds--time-picker--fluid--invalid .cds--time-picker__icon {
|
| 18402 | fill: var(--cds-support-error, #da1e28);
|
| 18403 | }
|
| 18404 |
|
| 18405 | .cds--time-picker--fluid--warning .cds--time-picker__icon {
|
| 18406 | fill: var(--cds-support-warning, #f1c21b);
|
| 18407 | }
|
| 18408 |
|
| 18409 | .cds--time-picker--fluid--warning .cds--time-picker__icon path:first-of-type {
|
| 18410 | fill: var(--cds-icon-primary, #161616);
|
| 18411 | }
|
| 18412 |
|
| 18413 | .cds--time-picker--fluid--invalid .cds--form-requirement,
|
| 18414 | .cds--time-picker--fluid--warning .cds--form-requirement {
|
| 18415 | display: block;
|
| 18416 | overflow: visible;
|
| 18417 | max-block-size: 100%;
|
| 18418 | }
|
| 18419 |
|
| 18420 | .cds--time-picker--fluid--invalid .cds--form-requirement {
|
| 18421 | color: var(--cds-text-error, #da1e28);
|
| 18422 | }
|
| 18423 |
|
| 18424 | .cds--time-picker--fluid--invalid .cds--time-picker--fluid__wrapper > *:nth-child(2):not(:last-child) .cds--select-input__wrapper::before,
|
| 18425 | .cds--time-picker--fluid--invalid .cds--time-picker--fluid__wrapper > *:last-child .cds--select-input__wrapper::before,
|
| 18426 | .cds--time-picker--fluid--warning .cds--time-picker--fluid__wrapper > *:nth-child(2):not(:last-child) .cds--select-input__wrapper::before,
|
| 18427 | .cds--time-picker--fluid--warning .cds--time-picker--fluid__wrapper > *:last-child .cds--select-input__wrapper::before {
|
| 18428 | block-size: calc(100% - 1rem);
|
| 18429 | inset-block-start: 8px;
|
| 18430 | }
|
| 18431 |
|
| 18432 | .cds--time-picker--fluid--invalid .cds--text-input,
|
| 18433 | .cds--time-picker--fluid--warning .cds--text-input,
|
| 18434 | .cds--time-picker--fluid--invalid .cds--select-input,
|
| 18435 | .cds--time-picker--fluid--warning .cds--select-input {
|
| 18436 | border-block-end: 1px solid transparent;
|
| 18437 | }
|
| 18438 |
|
| 18439 | .cds--time-picker--fluid.cds--time-picker--fluid--invalid .cds--time-picker__divider,
|
| 18440 | .cds--time-picker--fluid.cds--time-picker--fluid--warning .cds--time-picker__divider {
|
| 18441 | border-style: solid;
|
| 18442 | border-color: var(--cds-border-subtle);
|
| 18443 | margin: 0 1rem;
|
| 18444 | border-block-end: none;
|
| 18445 | inline-size: calc(100% - 2rem);
|
| 18446 | }
|
| 18447 |
|
| 18448 | .cds--time-picker--fluid--skeleton {
|
| 18449 | display: flex;
|
| 18450 | block-size: 4rem;
|
| 18451 | inline-size: 100%;
|
| 18452 | }
|
| 18453 |
|
| 18454 | .cds--time-picker--fluid--skeleton > * {
|
| 18455 | block-size: 100%;
|
| 18456 | inline-size: auto;
|
| 18457 | }
|
| 18458 |
|
| 18459 | .cds--time-picker--fluid--skeleton > *:nth-child(1),
|
| 18460 | .cds--time-picker--fluid--skeleton > *:nth-child(2) {
|
| 18461 | inline-size: 25%;
|
| 18462 | }
|
| 18463 |
|
| 18464 | .cds--time-picker--fluid--skeleton > *:last-child,
|
| 18465 | .cds--time-picker--fluid--skeleton.cds--time-picker--equal-width > *:first-child {
|
| 18466 | inline-size: 50%;
|
| 18467 | }
|
| 18468 |
|
| 18469 | @keyframes prefix--stroke {
|
| 18470 | 100% {
|
| 18471 | stroke-dashoffset: 0;
|
| 18472 | }
|
| 18473 | }
|
| 18474 | .cds--inline-loading {
|
| 18475 | display: flex;
|
| 18476 | align-items: center;
|
| 18477 | inline-size: 100%;
|
| 18478 | min-block-size: 2rem;
|
| 18479 | }
|
| 18480 |
|
| 18481 | .cds--inline-loading__text {
|
| 18482 | font-size: var(--cds-label-01-font-size, 0.75rem);
|
| 18483 | font-weight: var(--cds-label-01-font-weight, 400);
|
| 18484 | line-height: var(--cds-label-01-line-height, 1.33333);
|
| 18485 | letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
|
| 18486 | color: var(--cds-text-secondary, #525252);
|
| 18487 | }
|
| 18488 |
|
| 18489 | .cds--inline-loading__animation {
|
| 18490 | position: relative;
|
| 18491 | display: flex;
|
| 18492 | align-items: center;
|
| 18493 | justify-content: center;
|
| 18494 | margin-inline-end: 0.5rem;
|
| 18495 | }
|
| 18496 |
|
| 18497 | .cds--inline-loading__checkmark-container {
|
| 18498 | fill: var(--cds-support-success, #24a148);
|
| 18499 | }
|
| 18500 | .cds--inline-loading__checkmark-container.cds--inline-loading__svg {
|
| 18501 | position: absolute;
|
| 18502 | inline-size: 0.75rem;
|
| 18503 | inset-block-start: 0.75rem;
|
| 18504 | }
|
| 18505 | .cds--inline-loading__checkmark-container[hidden] {
|
| 18506 | display: none;
|
| 18507 | }
|
| 18508 |
|
| 18509 | .cds--inline-loading__checkmark {
|
| 18510 | animation-duration: 250ms;
|
| 18511 | animation-fill-mode: forwards;
|
| 18512 | animation-name: cds--stroke;
|
| 18513 | fill: none;
|
| 18514 | stroke: var(--cds-interactive, #0f62fe);
|
| 18515 | stroke-dasharray: 12;
|
| 18516 | stroke-dashoffset: 12;
|
| 18517 | stroke-width: 1.8;
|
| 18518 | transform-origin: 50% 50%;
|
| 18519 | }
|
| 18520 |
|
| 18521 | .cds--inline-loading--error {
|
| 18522 | block-size: 1rem;
|
| 18523 | fill: var(--cds-support-error, #da1e28);
|
| 18524 | inline-size: 1rem;
|
| 18525 | }
|
| 18526 | .cds--inline-loading--error[hidden] {
|
| 18527 | display: none;
|
| 18528 | }
|
| 18529 |
|
| 18530 | .cds--loading--small .cds--inline-loading__svg {
|
| 18531 | stroke: var(--cds-interactive, #0f62fe);
|
| 18532 | }
|
| 18533 |
|
| 18534 | .cds--btn .cds--inline-loading--btn {
|
| 18535 | min-block-size: 0;
|
| 18536 | }
|
| 18537 | .cds--btn .cds--inline-loading--btn .cds--inline-loading__text {
|
| 18538 | font-size: var(--cds-body-short-01-font-size, 0.875rem);
|
| 18539 | font-weight: var(--cds-body-short-01-font-weight, 400);
|
| 18540 | line-height: var(--cds-body-short-01-line-height, 1.28572);
|
| 18541 | letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
|
| 18542 | }
|
| 18543 |
|
| 18544 |
|
| 18545 | @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
|
| 18546 | .cds--inline-loading__checkmark-container {
|
| 18547 | inset-block-start: 1px;
|
| 18548 | inset-inline-end: 0.5rem;
|
| 18549 | }
|
| 18550 | .cds--inline-loading__checkmark {
|
| 18551 | animation: none;
|
| 18552 | stroke-dasharray: 0;
|
| 18553 | stroke-dashoffset: 0;
|
| 18554 | }
|
| 18555 | }
|
| 18556 | .cds--list--nested,
|
| 18557 | .cds--list--unordered,
|
| 18558 | .cds--list--ordered,
|
| 18559 | .cds--list--ordered--native {
|
| 18560 | box-sizing: border-box;
|
| 18561 | padding: 0;
|
| 18562 | border: 0;
|
| 18563 | margin: 0;
|
| 18564 | font-family: inherit;
|
| 18565 | font-size: 100%;
|
| 18566 | vertical-align: baseline;
|
| 18567 | font-size: var(--cds-body-01-font-size, 0.875rem);
|
| 18568 | font-weight: var(--cds-body-01-font-weight, 400);
|
| 18569 | line-height: var(--cds-body-01-line-height, 1.42857);
|
| 18570 | letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
|
| 18571 | list-style: none;
|
| 18572 | }
|
| 18573 | .cds--list--nested *,
|
| 18574 | .cds--list--nested *::before,
|
| 18575 | .cds--list--nested *::after,
|
| 18576 | .cds--list--unordered *,
|
| 18577 | .cds--list--unordered *::before,
|
| 18578 | .cds--list--unordered *::after,
|
| 18579 | .cds--list--ordered *,
|
| 18580 | .cds--list--ordered *::before,
|
| 18581 | .cds--list--ordered *::after,
|
| 18582 | .cds--list--ordered--native *,
|
| 18583 | .cds--list--ordered--native *::before,
|
| 18584 | .cds--list--ordered--native *::after {
|
| 18585 | box-sizing: inherit;
|
| 18586 | }
|
| 18587 |
|
| 18588 | .cds--list--unordered:not(.cds--list--nested) {
|
| 18589 | margin-inline-start: 1rem;
|
| 18590 | }
|
| 18591 |
|
| 18592 | .cds--list--expressive,
|
| 18593 | .cds--list--expressive .cds--list--nested {
|
| 18594 | font-size: var(--cds-body-02-font-size, 1rem);
|
| 18595 | font-weight: var(--cds-body-02-font-weight, 400);
|
| 18596 | line-height: var(--cds-body-02-line-height, 1.5);
|
| 18597 | letter-spacing: var(--cds-body-02-letter-spacing, 0);
|
| 18598 | }
|
| 18599 |
|
| 18600 | .cds--list--ordered--native {
|
| 18601 | list-style: decimal;
|
| 18602 | }
|
| 18603 |
|
| 18604 | .cds--list__item {
|
| 18605 | color: var(--cds-text-primary, #161616);
|
| 18606 | }
|
| 18607 |
|
| 18608 | .cds--list--nested {
|
| 18609 | margin-inline-start: 2rem;
|
| 18610 | }
|
| 18611 |
|
| 18612 | .cds--list--nested .cds--list__item {
|
| 18613 | padding-inline-start: 0.25rem;
|
| 18614 | }
|
| 18615 |
|
| 18616 | .cds--list--ordered:not(.cds--list--nested) {
|
| 18617 | counter-reset: item;
|
| 18618 | }
|
| 18619 |
|
| 18620 | .cds--list--ordered:not(.cds--list--nested) > .cds--list__item {
|
| 18621 | position: relative;
|
| 18622 | }
|
| 18623 |
|
| 18624 | .cds--list--ordered:not(.cds--list--nested) > .cds--list__item::before {
|
| 18625 | position: absolute;
|
| 18626 | content: counter(item) ".";
|
| 18627 | counter-increment: item;
|
| 18628 | inset-inline-start: -1.5rem;
|
| 18629 | }
|
| 18630 |
|
| 18631 | .cds--list--ordered.cds--list--nested,
|
| 18632 | .cds--list--ordered--native.cds--list--nested {
|
| 18633 | list-style-type: lower-latin;
|
| 18634 | }
|
| 18635 |
|
| 18636 | .cds--list--unordered > .cds--list__item {
|
| 18637 | position: relative;
|
| 18638 | }
|
| 18639 | .cds--list--unordered > .cds--list__item::before {
|
| 18640 | position: absolute;
|
| 18641 | content: "–";
|
| 18642 | inset-inline-start: calc(-1 * 1rem);
|
| 18643 | }
|
| 18644 |
|
| 18645 | .cds--list--unordered.cds--list--nested > .cds--list__item::before {
|
| 18646 | content: "▪";
|
| 18647 | inset-inline-start: calc(-1 * 0.75rem);
|
| 18648 | }
|
| 18649 |
|
| 18650 | .cds--menu-button__container {
|
| 18651 | display: inline-block;
|
| 18652 | }
|
| 18653 |
|
| 18654 | .cds--menu-button__trigger:not(.cds--btn--ghost) {
|
| 18655 | min-inline-size: 12rem;
|
| 18656 | }
|
| 18657 |
|
| 18658 | .cds--menu-button__trigger svg {
|
| 18659 | transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 18660 | }
|
| 18661 |
|
| 18662 | .cds--menu-button__trigger--open svg {
|
| 18663 | transform: rotate(180deg);
|
| 18664 | }
|
| 18665 |
|
| 18666 | .cds--menu-button__top {
|
| 18667 | transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem)));
|
| 18668 | }
|
| 18669 |
|
| 18670 | .cds--menu-button__top-start {
|
| 18671 | transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem)));
|
| 18672 | }
|
| 18673 |
|
| 18674 | .cds--menu-button__top-end {
|
| 18675 | transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem)));
|
| 18676 | }
|
| 18677 |
|
| 18678 | .cds--modal {
|
| 18679 | position: fixed;
|
| 18680 | z-index: 9000;
|
| 18681 | display: flex;
|
| 18682 | align-items: center;
|
| 18683 | justify-content: center;
|
| 18684 | background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
|
| 18685 | block-size: 100vh;
|
| 18686 | content: "";
|
| 18687 | inline-size: 100vw;
|
| 18688 | inset-block-start: 0;
|
| 18689 | inset-inline-start: 0;
|
| 18690 | opacity: 0;
|
| 18691 | transition: opacity 240ms cubic-bezier(0.4, 0.14, 1, 1), visibility 0ms linear 240ms;
|
| 18692 | visibility: hidden;
|
| 18693 | }
|
| 18694 | .cds--modal.is-visible {
|
| 18695 | opacity: 1;
|
| 18696 | transition: opacity 240ms cubic-bezier(0, 0, 0.3, 1), visibility 0ms linear;
|
| 18697 | visibility: inherit;
|
| 18698 | }
|
| 18699 | @media screen and (prefers-reduced-motion: reduce) {
|
| 18700 | .cds--modal.is-visible {
|
| 18701 | transition: none;
|
| 18702 | }
|
| 18703 | }
|
| 18704 | .cds--modal .cds--text-input--fluid .cds--text-input,
|
| 18705 | .cds--modal .cds--text-area--fluid .cds--text-area__wrapper,
|
| 18706 | .cds--modal .cds--text-area--fluid .cds--text-area,
|
| 18707 | .cds--modal .cds--search--fluid .cds--search-input,
|
| 18708 | .cds--modal .cds--select--fluid .cds--select-input,
|
| 18709 | .cds--modal .cds--text-area--fluid .cds--text-area__wrapper[data-invalid] .cds--text-area__divider + .cds--form-requirement,
|
| 18710 | .cds--modal .cds--list-box__wrapper--fluid .cds--list-box,
|
| 18711 | .cds--modal .cds--list-box__wrapper--fluid.cds--list-box__wrapper,
|
| 18712 | .cds--modal .cds--number-input--fluid input[type=number],
|
| 18713 | .cds--modal .cds--number-input--fluid .cds--number__control-btn::before,
|
| 18714 | .cds--modal .cds--number-input--fluid .cds--number__control-btn::after,
|
| 18715 | .cds--modal .cds--date-picker--fluid .ccdsds--date-picker-input__wrapper .cds--date-picker__input {
|
| 18716 | background-color: var(--cds-field-01, #f4f4f4);
|
| 18717 | }
|
| 18718 | .cds--modal .cds--list-box__wrapper--fluid .cds--list-box__menu {
|
| 18719 | background-color: var(--cds-layer-01, #f4f4f4);
|
| 18720 | }
|
| 18721 | .cds--modal .cds--list-box__menu-item:hover {
|
| 18722 | background-color: var(--cds-layer-hover-02, #e8e8e8);
|
| 18723 | }
|
| 18724 | .cds--modal .cds--list-box__menu-item--active {
|
| 18725 | background-color: var(--cds-layer-selected-02, #e0e0e0);
|
| 18726 | }
|
| 18727 | .cds--modal .cds--list-box__menu-item--active:hover {
|
| 18728 | background-color: var(--cds-layer-selected-hover-02, #d1d1d1);
|
| 18729 | }
|
| 18730 | .cds--modal .cds--number-input--fluid .cds--number__control-btn:hover::before,
|
| 18731 | .cds--modal .cds--number-input--fluid .cds--number__control-btn:hover::after {
|
| 18732 | background-color: var(--cds-field-hover);
|
| 18733 | }
|
| 18734 | .cds--modal .cds--number-input--fluid .cds--number__control-btn:focus::before,
|
| 18735 | .cds--modal .cds--number-input--fluid .cds--number__control-btn:focus::after {
|
| 18736 | border-inline-start: 2px solid var(--cds-focus, #0f62fe);
|
| 18737 | }
|
| 18738 |
|
| 18739 | .cds--modal.is-visible .cds--modal-container {
|
| 18740 | transform: translate3d(0, 0, 0);
|
| 18741 | transition: transform 240ms cubic-bezier(0, 0, 0.3, 1);
|
| 18742 | }
|
| 18743 |
|
| 18744 | .cds--modal-container {
|
| 18745 | position: fixed;
|
| 18746 | display: grid;
|
| 18747 | background-color: var(--cds-layer);
|
| 18748 | block-size: 100%;
|
| 18749 | grid-template-columns: 100%;
|
| 18750 | grid-template-rows: auto 1fr auto;
|
| 18751 | inline-size: 100%;
|
| 18752 | inset-block-start: 0;
|
| 18753 | max-block-size: 100%;
|
| 18754 | outline: 3px solid transparent;
|
| 18755 | outline-offset: -3px;
|
| 18756 | transform: translate3d(0, -24px, 0);
|
| 18757 | transform-origin: top center;
|
| 18758 | transition: transform 240ms cubic-bezier(0.4, 0.14, 1, 1);
|
| 18759 | }
|
| 18760 | @media (min-width: 42rem) {
|
| 18761 | .cds--modal-container {
|
| 18762 | position: static;
|
| 18763 | block-size: auto;
|
| 18764 | inline-size: 84%;
|
| 18765 | max-block-size: 90%;
|
| 18766 | }
|
| 18767 | }
|
| 18768 | @media (min-width: 66rem) {
|
| 18769 | .cds--modal-container {
|
| 18770 | inline-size: 60%;
|
| 18771 | max-block-size: 84%;
|
| 18772 | }
|
| 18773 | }
|
| 18774 | @media (min-width: 82rem) {
|
| 18775 | .cds--modal-container {
|
| 18776 | inline-size: 48%;
|
| 18777 | }
|
| 18778 | }
|
| 18779 | .cds--modal-container .cds--modal-container-body {
|
| 18780 | display: contents;
|
| 18781 | }
|
| 18782 |
|
| 18783 | .cds--modal-content {
|
| 18784 | font-size: var(--cds-body-01-font-size, 0.875rem);
|
| 18785 | font-weight: var(--cds-body-01-font-weight, 400);
|
| 18786 | line-height: var(--cds-body-01-line-height, 1.42857);
|
| 18787 | letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
|
| 18788 | position: relative;
|
| 18789 | color: var(--cds-text-primary, #161616);
|
| 18790 | font-weight: 400;
|
| 18791 | grid-column: 1/-1;
|
| 18792 | grid-row: 2/-2;
|
| 18793 | overflow-y: auto;
|
| 18794 | padding-block-end: 3rem;
|
| 18795 | padding-block-start: 0.5rem;
|
| 18796 | padding-inline-end: 1rem;
|
| 18797 | padding-inline-start: 1rem;
|
| 18798 | }
|
| 18799 | .cds--modal-content:focus {
|
| 18800 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 18801 | outline-offset: -2px;
|
| 18802 | }
|
| 18803 | @media screen and (prefers-contrast) {
|
| 18804 | .cds--modal-content:focus {
|
| 18805 | outline-style: dotted;
|
| 18806 | }
|
| 18807 | }
|
| 18808 |
|
| 18809 | .cds--modal-content .cds--form--fluid {
|
| 18810 | margin-inline-end: -1rem;
|
| 18811 | margin-inline-start: -1rem;
|
| 18812 | }
|
| 18813 |
|
| 18814 | .cds--modal-content > p,
|
| 18815 | .cds--modal-content__regular-content {
|
| 18816 | font-size: var(--cds-body-01-font-size, 0.875rem);
|
| 18817 | font-weight: var(--cds-body-01-font-weight, 400);
|
| 18818 | line-height: var(--cds-body-01-line-height, 1.42857);
|
| 18819 | letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
|
| 18820 | padding-inline-end: calc(20% - 2rem);
|
| 18821 | }
|
| 18822 |
|
| 18823 | .cds--modal-content--with-form {
|
| 18824 | padding-inline-end: 1rem;
|
| 18825 | }
|
| 18826 |
|
| 18827 | .cds--modal-header {
|
| 18828 | grid-column: 1/-1;
|
| 18829 | grid-row: 1/1;
|
| 18830 | margin-block-end: 0.5rem;
|
| 18831 | padding-block-start: 1rem;
|
| 18832 | padding-inline-end: 3rem;
|
| 18833 | padding-inline-start: 1rem;
|
| 18834 | }
|
| 18835 |
|
| 18836 | .cds--modal-header__label {
|
| 18837 | box-sizing: border-box;
|
| 18838 | padding: 0;
|
| 18839 | border: 0;
|
| 18840 | margin: 0;
|
| 18841 | font-family: inherit;
|
| 18842 | font-size: 100%;
|
| 18843 | vertical-align: baseline;
|
| 18844 | font-size: var(--cds-label-01-font-size, 0.75rem);
|
| 18845 | font-weight: var(--cds-label-01-font-weight, 400);
|
| 18846 | line-height: var(--cds-label-01-line-height, 1.33333);
|
| 18847 | letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
|
| 18848 | color: var(--cds-text-secondary, #525252);
|
| 18849 | margin-block-end: 0.25rem;
|
| 18850 | }
|
| 18851 | .cds--modal-header__label *,
|
| 18852 | .cds--modal-header__label *::before,
|
| 18853 | .cds--modal-header__label *::after {
|
| 18854 | box-sizing: inherit;
|
| 18855 | }
|
| 18856 |
|
| 18857 | .cds--modal-header__heading {
|
| 18858 | box-sizing: border-box;
|
| 18859 | padding: 0;
|
| 18860 | border: 0;
|
| 18861 | margin: 0;
|
| 18862 | font-family: inherit;
|
| 18863 | font-size: 100%;
|
| 18864 | vertical-align: baseline;
|
| 18865 | font-size: var(--cds-heading-03-font-size, 1.25rem);
|
| 18866 | font-weight: var(--cds-heading-03-font-weight, 400);
|
| 18867 | line-height: var(--cds-heading-03-line-height, 1.4);
|
| 18868 | letter-spacing: var(--cds-heading-03-letter-spacing, 0);
|
| 18869 | color: var(--cds-text-primary, #161616);
|
| 18870 | padding-inline-end: calc(20% - 3rem);
|
| 18871 | }
|
| 18872 | .cds--modal-header__heading *,
|
| 18873 | .cds--modal-header__heading *::before,
|
| 18874 | .cds--modal-header__heading *::after {
|
| 18875 | box-sizing: inherit;
|
| 18876 | }
|
| 18877 |
|
| 18878 | .cds--modal-container--xs .cds--modal-content__regular-content {
|
| 18879 | padding-inline-end: 1rem;
|
| 18880 | }
|
| 18881 | .cds--modal-container--xs .cds--modal-content > p {
|
| 18882 | padding-inline-end: 0;
|
| 18883 | }
|
| 18884 | @media (min-width: 42rem) {
|
| 18885 | .cds--modal-container--xs {
|
| 18886 | inline-size: 48%;
|
| 18887 | }
|
| 18888 | }
|
| 18889 | @media (min-width: 66rem) {
|
| 18890 | .cds--modal-container--xs {
|
| 18891 | inline-size: 32%;
|
| 18892 | max-block-size: 48%;
|
| 18893 | }
|
| 18894 | }
|
| 18895 | @media (min-width: 82rem) {
|
| 18896 | .cds--modal-container--xs {
|
| 18897 | inline-size: 24%;
|
| 18898 | }
|
| 18899 | }
|
| 18900 |
|
| 18901 | .cds--modal-container--sm .cds--modal-content__regular-content {
|
| 18902 | padding-inline-end: 1rem;
|
| 18903 | }
|
| 18904 | .cds--modal-container--sm .cds--modal-content > p {
|
| 18905 | padding-inline-end: 0;
|
| 18906 | }
|
| 18907 | @media (min-width: 42rem) {
|
| 18908 | .cds--modal-container--sm {
|
| 18909 | inline-size: 60%;
|
| 18910 | }
|
| 18911 | }
|
| 18912 | @media (min-width: 66rem) {
|
| 18913 | .cds--modal-container--sm {
|
| 18914 | inline-size: 42%;
|
| 18915 | max-block-size: 72%;
|
| 18916 | }
|
| 18917 | .cds--modal-container--sm .cds--modal-content > p,
|
| 18918 | .cds--modal-container--sm .cds--modal-content__regular-content {
|
| 18919 | padding-inline-end: 20%;
|
| 18920 | }
|
| 18921 | }
|
| 18922 | @media (min-width: 82rem) {
|
| 18923 | .cds--modal-container--sm {
|
| 18924 | inline-size: 36%;
|
| 18925 | }
|
| 18926 | }
|
| 18927 |
|
| 18928 | @media (min-width: 42rem) {
|
| 18929 | .cds--modal-container--lg {
|
| 18930 | inline-size: 96%;
|
| 18931 | }
|
| 18932 | }
|
| 18933 | @media (min-width: 66rem) {
|
| 18934 | .cds--modal-container--lg {
|
| 18935 | inline-size: 84%;
|
| 18936 | max-block-size: 96%;
|
| 18937 | }
|
| 18938 | }
|
| 18939 | @media (min-width: 82rem) {
|
| 18940 | .cds--modal-container--lg {
|
| 18941 | inline-size: 72%;
|
| 18942 | }
|
| 18943 | }
|
| 18944 |
|
| 18945 | .cds--modal-scroll-content {
|
| 18946 | border-block-end: 2px solid transparent;
|
| 18947 | -webkit-mask-image: linear-gradient(to bottom, var(--cds-layer) calc(100% - 80px), transparent calc(100% - 48px), transparent 100%), linear-gradient(to left, var(--cds-layer) 0, 16px, transparent 16px), linear-gradient(to right, var(--cds-layer) 0, 2px, transparent 2px), linear-gradient(to top, var(--cds-layer) 0, 2px, transparent 2px);
|
| 18948 | mask-image: linear-gradient(to bottom, var(--cds-layer) calc(100% - 80px), transparent calc(100% - 48px), transparent 100%), linear-gradient(to left, var(--cds-layer) 0, 16px, transparent 16px), linear-gradient(to right, var(--cds-layer) 0, 2px, transparent 2px), linear-gradient(to top, var(--cds-layer) 0, 2px, transparent 2px);
|
| 18949 | }
|
| 18950 |
|
| 18951 | .cds--modal-scroll-content:has(.cds--dropdown--autoalign) {
|
| 18952 | -webkit-mask-image: none;
|
| 18953 | mask-image: none;
|
| 18954 | }
|
| 18955 |
|
| 18956 | .cds--modal-scroll-content > *:last-child {
|
| 18957 | margin-block-end: 1.5rem;
|
| 18958 | }
|
| 18959 |
|
| 18960 | .cds--modal-footer {
|
| 18961 | display: flex;
|
| 18962 | justify-content: flex-end;
|
| 18963 | block-size: 4rem;
|
| 18964 | grid-column: 1/-1;
|
| 18965 | grid-row: -1/-1;
|
| 18966 | margin-block-start: auto;
|
| 18967 | }
|
| 18968 |
|
| 18969 | .cds--modal-footer .cds--btn {
|
| 18970 | flex: 0 1 50%;
|
| 18971 | align-items: baseline;
|
| 18972 | margin: 0;
|
| 18973 | block-size: 4rem;
|
| 18974 | max-inline-size: none;
|
| 18975 | padding-block-end: 2rem;
|
| 18976 | padding-block-start: 0.875rem;
|
| 18977 | }
|
| 18978 |
|
| 18979 | .cds--modal-footer--three-button .cds--btn {
|
| 18980 | flex: 0 1 25%;
|
| 18981 | align-items: flex-start;
|
| 18982 | }
|
| 18983 |
|
| 18984 | .cds--modal-close-button {
|
| 18985 | position: absolute;
|
| 18986 | inset-block-start: 0;
|
| 18987 | inset-inline-end: 0;
|
| 18988 | }
|
| 18989 |
|
| 18990 | .cds--modal-close {
|
| 18991 | padding: 0.75rem;
|
| 18992 | border: 2px solid transparent;
|
| 18993 | background-color: transparent;
|
| 18994 | block-size: 3rem;
|
| 18995 | cursor: pointer;
|
| 18996 | inline-size: 3rem;
|
| 18997 | transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 18998 | }
|
| 18999 | .cds--modal-close:hover {
|
| 19000 | background-color: var(--cds-layer-hover);
|
| 19001 | }
|
| 19002 | .cds--modal-close:focus {
|
| 19003 | border-color: var(--cds-focus, #0f62fe);
|
| 19004 | outline: none;
|
| 19005 | }
|
| 19006 |
|
| 19007 | .cds--modal-close::-moz-focus-inner {
|
| 19008 | border: 0;
|
| 19009 | }
|
| 19010 |
|
| 19011 | .cds--modal-close__icon {
|
| 19012 | block-size: 1.25rem;
|
| 19013 | fill: var(--cds-icon-primary, #161616);
|
| 19014 | inline-size: 1.25rem;
|
| 19015 | }
|
| 19016 |
|
| 19017 | .cds--body--with-modal-open {
|
| 19018 | overflow: hidden;
|
| 19019 | }
|
| 19020 |
|
| 19021 | .cds--body--with-modal-open .cds--modal .cds--tooltip,
|
| 19022 | .cds--body--with-modal-open .cds--modal .cds--overflow-menu-options,
|
| 19023 | .cds--body--with-modal-open .cds--overflow-menu-options {
|
| 19024 | z-index: 9000;
|
| 19025 | }
|
| 19026 |
|
| 19027 | .cds--modal-container--full-width .cds--modal-content {
|
| 19028 | padding: 0;
|
| 19029 | margin: 0;
|
| 19030 | }
|
| 19031 |
|
| 19032 | .cds--modal--slug.cds--modal {
|
| 19033 | background-color: var(--cds-ai-overlay, rgba(0, 17, 65, 0.5));
|
| 19034 | }
|
| 19035 |
|
| 19036 | .cds--modal--slug .cds--modal-container {
|
| 19037 | background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
|
| 19038 | border: 1px solid transparent;
|
| 19039 | background-color: var(--cds-layer);
|
| 19040 | box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 24px 40px -24px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
|
| 19041 | }
|
| 19042 |
|
| 19043 | .cds--modal--slug .cds--modal-container:has(.cds--modal-footer) {
|
| 19044 | background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) calc(0% + 64px), var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) calc(0% + 64px), 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
|
| 19045 | box-shadow: inset 0 -80px 0 -16px var(--cds-layer), inset 0 -160px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 24px 40px -24px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
|
| 19046 | }
|
| 19047 |
|
| 19048 | .cds--modal--slug .cds--modal-content.cds--modal-scroll-content {
|
| 19049 | -webkit-mask-image: linear-gradient(to bottom, var(--cds-layer) calc(100% - 80px), transparent calc(100% - 48px), transparent 100%), linear-gradient(to left, var(--cds-layer) 0, 16px, transparent 16px), linear-gradient(to right, var(--cds-layer) 0, 2px, transparent 2px), linear-gradient(to top, var(--cds-layer) 0, 2px, transparent 2px);
|
| 19050 | mask-image: linear-gradient(to bottom, var(--cds-layer) calc(100% - 80px), transparent calc(100% - 48px), transparent 100%), linear-gradient(to left, var(--cds-layer) 0, 16px, transparent 16px), linear-gradient(to right, var(--cds-layer) 0, 2px, transparent 2px), linear-gradient(to top, var(--cds-layer) 0, 2px, transparent 2px);
|
| 19051 | }
|
| 19052 |
|
| 19053 | .cds--modal-header > .cds--slug:has(+ .cds--modal-close-button),
|
| 19054 | .cds--modal-header > .cds--modal-close-button ~ .cds--slug,
|
| 19055 | .cds--modal--slug .cds--modal-container-body > .cds--slug {
|
| 19056 | position: absolute;
|
| 19057 | inset-block-start: 0.625rem;
|
| 19058 | inset-inline-end: 3rem;
|
| 19059 | }
|
| 19060 |
|
| 19061 | .cds--modal--slug .cds--modal-content--overflow-indicator::before,
|
| 19062 | .cds--modal--slug .cds--modal-content--overflow-indicator {
|
| 19063 | display: none;
|
| 19064 | }
|
| 19065 |
|
| 19066 |
|
| 19067 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 19068 | .cds--modal-close__icon {
|
| 19069 | fill: ButtonText;
|
| 19070 | }
|
| 19071 | }
|
| 19072 |
|
| 19073 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 19074 | .cds--modal-close:focus {
|
| 19075 | color: Highlight;
|
| 19076 | outline: 1px solid Highlight;
|
| 19077 | }
|
| 19078 | }
|
| 19079 |
|
| 19080 |
|
| 19081 | .cds--inline-notification {
|
| 19082 | position: relative;
|
| 19083 | display: flex;
|
| 19084 | flex-wrap: wrap;
|
| 19085 | block-size: auto;
|
| 19086 | color: var(--cds-text-inverse, #ffffff);
|
| 19087 | inline-size: 100%;
|
| 19088 | max-inline-size: 18rem;
|
| 19089 | min-block-size: 3rem;
|
| 19090 | min-inline-size: 18rem;
|
| 19091 | }
|
| 19092 | .cds--inline-notification html {
|
| 19093 | font-size: 100%;
|
| 19094 | }
|
| 19095 | .cds--inline-notification body {
|
| 19096 | font-weight: 400;
|
| 19097 | font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
|
| 19098 | -moz-osx-font-smoothing: grayscale;
|
| 19099 | -webkit-font-smoothing: antialiased;
|
| 19100 | text-rendering: optimizeLegibility;
|
| 19101 | }
|
| 19102 | .cds--inline-notification code {
|
| 19103 | font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
|
| 19104 | }
|
| 19105 | .cds--inline-notification strong {
|
| 19106 | font-weight: 600;
|
| 19107 | }
|
| 19108 | @media (min-width: 42rem) {
|
| 19109 | .cds--inline-notification {
|
| 19110 | flex-wrap: nowrap;
|
| 19111 | max-inline-size: 38rem;
|
| 19112 | }
|
| 19113 | }
|
| 19114 | @media (min-width: 66rem) {
|
| 19115 | .cds--inline-notification {
|
| 19116 | max-inline-size: 46rem;
|
| 19117 | }
|
| 19118 | }
|
| 19119 | @media (min-width: 99rem) {
|
| 19120 | .cds--inline-notification {
|
| 19121 | max-inline-size: 52rem;
|
| 19122 | }
|
| 19123 | }
|
| 19124 |
|
| 19125 | .cds--inline-notification:not(.cds--inline-notification--low-contrast) a {
|
| 19126 | color: var(--cds-link-inverse, #78a9ff);
|
| 19127 | }
|
| 19128 |
|
| 19129 | .cds--inline-notification a {
|
| 19130 | text-decoration: none;
|
| 19131 | }
|
| 19132 |
|
| 19133 | .cds--inline-notification a:hover {
|
| 19134 | text-decoration: underline;
|
| 19135 | }
|
| 19136 |
|
| 19137 | .cds--inline-notification a:focus {
|
| 19138 | outline: 1px solid var(--cds-link-inverse, #78a9ff);
|
| 19139 | }
|
| 19140 |
|
| 19141 | .cds--inline-notification.cds--inline-notification--low-contrast a:focus {
|
| 19142 | outline: 1px solid var(--cds-focus, #0f62fe);
|
| 19143 | }
|
| 19144 | @media screen and (prefers-contrast) {
|
| 19145 | .cds--inline-notification.cds--inline-notification--low-contrast a:focus {
|
| 19146 | outline-style: dotted;
|
| 19147 | }
|
| 19148 | }
|
| 19149 |
|
| 19150 | .cds--inline-notification--low-contrast {
|
| 19151 | color: var(--cds-text-primary, #161616);
|
| 19152 | }
|
| 19153 | .cds--inline-notification--low-contrast::before {
|
| 19154 | position: absolute;
|
| 19155 | box-sizing: border-box;
|
| 19156 | border-width: 1px 1px 1px 0;
|
| 19157 | border-style: solid;
|
| 19158 | block-size: 100%;
|
| 19159 | content: "";
|
| 19160 | filter: opacity(0.4);
|
| 19161 | inline-size: 100%;
|
| 19162 | inset-block-start: 0;
|
| 19163 | inset-inline-start: 0;
|
| 19164 | pointer-events: none;
|
| 19165 | }
|
| 19166 |
|
| 19167 | .cds--inline-notification--error {
|
| 19168 | background: var(--cds-background-inverse, #393939);
|
| 19169 | border-inline-start: 3px solid var(--cds-support-error-inverse, #fa4d56);
|
| 19170 | }
|
| 19171 | .cds--inline-notification--error .cds--inline-notification__icon,
|
| 19172 | .cds--inline-notification--error .cds--toast-notification__icon,
|
| 19173 | .cds--inline-notification--error .cds--actionable-notification__icon {
|
| 19174 | fill: var(--cds-support-error-inverse, #fa4d56);
|
| 19175 | }
|
| 19176 |
|
| 19177 | .cds--inline-notification--low-contrast.cds--inline-notification--error {
|
| 19178 | background: var(--cds-notification-background-error, #fff1f1);
|
| 19179 | border-inline-start: 3px solid var(--cds-support-error, #da1e28);
|
| 19180 | }
|
| 19181 | .cds--inline-notification--low-contrast.cds--inline-notification--error .cds--inline-notification__icon,
|
| 19182 | .cds--inline-notification--low-contrast.cds--inline-notification--error .cds--toast-notification__icon,
|
| 19183 | .cds--inline-notification--low-contrast.cds--inline-notification--error .cds--actionable-notification__icon {
|
| 19184 | fill: var(--cds-support-error, #da1e28);
|
| 19185 | }
|
| 19186 | .cds--inline-notification--low-contrast.cds--inline-notification--error::before {
|
| 19187 | border-color: var(--cds-support-error, #da1e28);
|
| 19188 | }
|
| 19189 |
|
| 19190 | .cds--inline-notification--success {
|
| 19191 | background: var(--cds-background-inverse, #393939);
|
| 19192 | border-inline-start: 3px solid var(--cds-support-success-inverse, #42be65);
|
| 19193 | }
|
| 19194 | .cds--inline-notification--success .cds--inline-notification__icon,
|
| 19195 | .cds--inline-notification--success .cds--toast-notification__icon,
|
| 19196 | .cds--inline-notification--success .cds--actionable-notification__icon {
|
| 19197 | fill: var(--cds-support-success-inverse, #42be65);
|
| 19198 | }
|
| 19199 |
|
| 19200 | .cds--inline-notification--low-contrast.cds--inline-notification--success {
|
| 19201 | background: var(--cds-notification-background-success, #defbe6);
|
| 19202 | border-inline-start: 3px solid var(--cds-support-success, #24a148);
|
| 19203 | }
|
| 19204 | .cds--inline-notification--low-contrast.cds--inline-notification--success .cds--inline-notification__icon,
|
| 19205 | .cds--inline-notification--low-contrast.cds--inline-notification--success .cds--toast-notification__icon,
|
| 19206 | .cds--inline-notification--low-contrast.cds--inline-notification--success .cds--actionable-notification__icon {
|
| 19207 | fill: var(--cds-support-success, #24a148);
|
| 19208 | }
|
| 19209 | .cds--inline-notification--low-contrast.cds--inline-notification--success::before {
|
| 19210 | border-color: var(--cds-support-success, #24a148);
|
| 19211 | }
|
| 19212 |
|
| 19213 | .cds--inline-notification--info,
|
| 19214 | .cds--inline-notification--info-square {
|
| 19215 | background: var(--cds-background-inverse, #393939);
|
| 19216 | border-inline-start: 3px solid var(--cds-support-info-inverse, #4589ff);
|
| 19217 | }
|
| 19218 | .cds--inline-notification--info .cds--inline-notification__icon,
|
| 19219 | .cds--inline-notification--info .cds--toast-notification__icon,
|
| 19220 | .cds--inline-notification--info .cds--actionable-notification__icon,
|
| 19221 | .cds--inline-notification--info-square .cds--inline-notification__icon,
|
| 19222 | .cds--inline-notification--info-square .cds--toast-notification__icon,
|
| 19223 | .cds--inline-notification--info-square .cds--actionable-notification__icon {
|
| 19224 | fill: var(--cds-support-info-inverse, #4589ff);
|
| 19225 | }
|
| 19226 |
|
| 19227 | .cds--inline-notification--low-contrast.cds--inline-notification--info,
|
| 19228 | .cds--inline-notification--low-contrast.cds--inline-notification--info-square {
|
| 19229 | background: var(--cds-notification-background-info, #edf5ff);
|
| 19230 | border-inline-start: 3px solid var(--cds-support-info, #0043ce);
|
| 19231 | }
|
| 19232 | .cds--inline-notification--low-contrast.cds--inline-notification--info .cds--inline-notification__icon,
|
| 19233 | .cds--inline-notification--low-contrast.cds--inline-notification--info .cds--toast-notification__icon,
|
| 19234 | .cds--inline-notification--low-contrast.cds--inline-notification--info .cds--actionable-notification__icon,
|
| 19235 | .cds--inline-notification--low-contrast.cds--inline-notification--info-square .cds--inline-notification__icon,
|
| 19236 | .cds--inline-notification--low-contrast.cds--inline-notification--info-square .cds--toast-notification__icon,
|
| 19237 | .cds--inline-notification--low-contrast.cds--inline-notification--info-square .cds--actionable-notification__icon {
|
| 19238 | fill: var(--cds-support-info, #0043ce);
|
| 19239 | }
|
| 19240 | .cds--inline-notification--low-contrast.cds--inline-notification--info::before,
|
| 19241 | .cds--inline-notification--low-contrast.cds--inline-notification--info-square::before {
|
| 19242 | border-color: var(--cds-support-info, #0043ce);
|
| 19243 | }
|
| 19244 |
|
| 19245 | .cds--inline-notification--warning,
|
| 19246 | .cds--inline-notification--warning-alt {
|
| 19247 | background: var(--cds-background-inverse, #393939);
|
| 19248 | border-inline-start: 3px solid var(--cds-support-warning-inverse, #f1c21b);
|
| 19249 | }
|
| 19250 | .cds--inline-notification--warning .cds--inline-notification__icon,
|
| 19251 | .cds--inline-notification--warning .cds--toast-notification__icon,
|
| 19252 | .cds--inline-notification--warning .cds--actionable-notification__icon,
|
| 19253 | .cds--inline-notification--warning-alt .cds--inline-notification__icon,
|
| 19254 | .cds--inline-notification--warning-alt .cds--toast-notification__icon,
|
| 19255 | .cds--inline-notification--warning-alt .cds--actionable-notification__icon {
|
| 19256 | fill: var(--cds-support-warning-inverse, #f1c21b);
|
| 19257 | }
|
| 19258 |
|
| 19259 | .cds--inline-notification--low-contrast.cds--inline-notification--warning,
|
| 19260 | .cds--inline-notification--low-contrast.cds--inline-notification--warning-alt {
|
| 19261 | background: var(--cds-notification-background-warning, #fdf6dd);
|
| 19262 | border-inline-start: 3px solid var(--cds-support-warning, #f1c21b);
|
| 19263 | }
|
| 19264 | .cds--inline-notification--low-contrast.cds--inline-notification--warning .cds--inline-notification__icon,
|
| 19265 | .cds--inline-notification--low-contrast.cds--inline-notification--warning .cds--toast-notification__icon,
|
| 19266 | .cds--inline-notification--low-contrast.cds--inline-notification--warning .cds--actionable-notification__icon,
|
| 19267 | .cds--inline-notification--low-contrast.cds--inline-notification--warning-alt .cds--inline-notification__icon,
|
| 19268 | .cds--inline-notification--low-contrast.cds--inline-notification--warning-alt .cds--toast-notification__icon,
|
| 19269 | .cds--inline-notification--low-contrast.cds--inline-notification--warning-alt .cds--actionable-notification__icon {
|
| 19270 | fill: var(--cds-support-warning, #f1c21b);
|
| 19271 | }
|
| 19272 | .cds--inline-notification--low-contrast.cds--inline-notification--warning::before,
|
| 19273 | .cds--inline-notification--low-contrast.cds--inline-notification--warning-alt::before {
|
| 19274 | border-color: var(--cds-support-warning, #f1c21b);
|
| 19275 | }
|
| 19276 |
|
| 19277 | .cds--inline-notification--warning .cds--inline-notification__icon path[opacity="0"],
|
| 19278 | .cds--inline-notification--warning-alt .cds--inline-notification__icon path:first-of-type {
|
| 19279 | fill: #000000;
|
| 19280 | opacity: 1;
|
| 19281 | }
|
| 19282 |
|
| 19283 | .cds--inline-notification__details {
|
| 19284 | display: flex;
|
| 19285 | flex-grow: 1;
|
| 19286 | margin-inline: 0.8125rem 3rem;
|
| 19287 | }
|
| 19288 | @media (min-width: 42rem) {
|
| 19289 | .cds--inline-notification__details {
|
| 19290 | margin: 0 0.8125rem;
|
| 19291 | }
|
| 19292 | }
|
| 19293 |
|
| 19294 | .cds--inline-notification__icon {
|
| 19295 | flex-shrink: 0;
|
| 19296 | margin-block-start: 0.875rem;
|
| 19297 | margin-inline-end: 1rem;
|
| 19298 | }
|
| 19299 |
|
| 19300 | .cds--inline-notification__text-wrapper {
|
| 19301 | display: flex;
|
| 19302 | flex-wrap: wrap;
|
| 19303 | padding: 0.9375rem 0;
|
| 19304 | }
|
| 19305 |
|
| 19306 | .cds--inline-notification__title {
|
| 19307 | font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
|
| 19308 | font-weight: var(--cds-heading-compact-01-font-weight, 600);
|
| 19309 | line-height: var(--cds-heading-compact-01-line-height, 1.28572);
|
| 19310 | letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
|
| 19311 | margin-inline-end: 0.25rem;
|
| 19312 | }
|
| 19313 |
|
| 19314 | .cds--inline-notification__subtitle {
|
| 19315 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 19316 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 19317 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 19318 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 19319 | word-break: break-word;
|
| 19320 | }
|
| 19321 |
|
| 19322 | .cds--inline-notification__action-button.cds--btn--ghost {
|
| 19323 | block-size: 2rem;
|
| 19324 | margin-block-end: 0.5rem;
|
| 19325 | margin-inline-start: 2.5rem;
|
| 19326 | }
|
| 19327 | @media (min-width: 42rem) {
|
| 19328 | .cds--inline-notification__action-button.cds--btn--ghost {
|
| 19329 | margin: 0.5rem 0;
|
| 19330 | }
|
| 19331 | }
|
| 19332 |
|
| 19333 | .cds--inline-notification:not(.cds--inline-notification--low-contrast) .cds--inline-notification__action-button.cds--btn--ghost {
|
| 19334 | color: var(--cds-link-inverse, #78a9ff);
|
| 19335 | }
|
| 19336 |
|
| 19337 | .cds--inline-notification__action-button.cds--btn--ghost:active,
|
| 19338 | .cds--inline-notification__action-button.cds--btn--ghost:hover {
|
| 19339 | background-color: var(--cds-background-inverse-hover, #474747);
|
| 19340 | }
|
| 19341 |
|
| 19342 | .cds--inline-notification--low-contrast .cds--inline-notification__action-button.cds--btn--ghost:active,
|
| 19343 | .cds--inline-notification--low-contrast .cds--inline-notification__action-button.cds--btn--ghost:hover {
|
| 19344 | background-color: var(--cds-notification-action-hover, #ffffff);
|
| 19345 | }
|
| 19346 |
|
| 19347 | .cds--inline-notification__action-button.cds--btn--ghost:focus {
|
| 19348 | border-color: transparent;
|
| 19349 | box-shadow: none;
|
| 19350 | outline: 2px solid var(--cds-focus-inverse, #ffffff);
|
| 19351 | outline-offset: -2px;
|
| 19352 | }
|
| 19353 |
|
| 19354 | .cds--inline-notification--low-contrast .cds--inline-notification__action-button.cds--btn--ghost:focus {
|
| 19355 | outline-color: var(--cds-focus, #0f62fe);
|
| 19356 | }
|
| 19357 |
|
| 19358 | .cds--inline-notification--hide-close-button .cds--inline-notification__action-button.cds--btn--ghost {
|
| 19359 | margin-inline-end: 0.5rem;
|
| 19360 | }
|
| 19361 |
|
| 19362 | .cds--inline-notification__close-button {
|
| 19363 | outline: 2px solid transparent;
|
| 19364 | outline-offset: -2px;
|
| 19365 | position: absolute;
|
| 19366 | display: flex;
|
| 19367 | flex-direction: column;
|
| 19368 | align-items: center;
|
| 19369 | justify-content: center;
|
| 19370 | padding: 0;
|
| 19371 | border: none;
|
| 19372 | background: transparent;
|
| 19373 | block-size: 3rem;
|
| 19374 | cursor: pointer;
|
| 19375 | inline-size: 3rem;
|
| 19376 | inset-block-start: 0;
|
| 19377 | inset-inline-end: 0;
|
| 19378 | max-inline-size: 3rem;
|
| 19379 | min-inline-size: 3rem;
|
| 19380 | transition: outline 110ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 19381 | }
|
| 19382 | .cds--inline-notification__close-button:focus {
|
| 19383 | outline: 2px solid var(--cds-focus-inverse, #ffffff);
|
| 19384 | outline-offset: -2px;
|
| 19385 | }
|
| 19386 | .cds--inline-notification__close-button .cds--inline-notification__close-icon {
|
| 19387 | fill: var(--cds-icon-inverse, #ffffff);
|
| 19388 | }
|
| 19389 | @media (min-width: 42rem) {
|
| 19390 | .cds--inline-notification__close-button {
|
| 19391 | position: static;
|
| 19392 | }
|
| 19393 | }
|
| 19394 |
|
| 19395 | .cds--inline-notification--low-contrast .cds--inline-notification__close-button:focus {
|
| 19396 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 19397 | outline-offset: -2px;
|
| 19398 | }
|
| 19399 | @media screen and (prefers-contrast) {
|
| 19400 | .cds--inline-notification--low-contrast .cds--inline-notification__close-button:focus {
|
| 19401 | outline-style: dotted;
|
| 19402 | }
|
| 19403 | }
|
| 19404 |
|
| 19405 | .cds--inline-notification--low-contrast .cds--inline-notification__close-button .cds--inline-notification__close-icon {
|
| 19406 | fill: var(--cds-icon-primary, #161616);
|
| 19407 | }
|
| 19408 |
|
| 19409 |
|
| 19410 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 19411 | .cds--inline-notification {
|
| 19412 | outline: 1px solid transparent;
|
| 19413 | }
|
| 19414 | }
|
| 19415 |
|
| 19416 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 19417 | .cds--inline-notification__close-button:focus,
|
| 19418 | .cds--btn.cds--btn--ghost.cds--inline-notification__action-button:focus {
|
| 19419 | color: Highlight;
|
| 19420 | outline: 1px solid Highlight;
|
| 19421 | }
|
| 19422 | }
|
| 19423 |
|
| 19424 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 19425 | .cds--inline-notification .cds--inline-notification__icon {
|
| 19426 | fill: ButtonText;
|
| 19427 | }
|
| 19428 | }
|
| 19429 |
|
| 19430 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 19431 | .cds--inline-notification .cds--inline-notification__close-icon {
|
| 19432 | fill: ButtonText;
|
| 19433 | }
|
| 19434 | }
|
| 19435 |
|
| 19436 |
|
| 19437 | .cds--toast-notification {
|
| 19438 | display: flex;
|
| 19439 | block-size: auto;
|
| 19440 | box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
|
| 19441 | color: var(--cds-text-inverse, #ffffff);
|
| 19442 | inline-size: 18rem;
|
| 19443 | padding-inline-start: 0.8125rem;
|
| 19444 | }
|
| 19445 | .cds--toast-notification html {
|
| 19446 | font-size: 100%;
|
| 19447 | }
|
| 19448 | .cds--toast-notification body {
|
| 19449 | font-weight: 400;
|
| 19450 | font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
|
| 19451 | -moz-osx-font-smoothing: grayscale;
|
| 19452 | -webkit-font-smoothing: antialiased;
|
| 19453 | text-rendering: optimizeLegibility;
|
| 19454 | }
|
| 19455 | .cds--toast-notification code {
|
| 19456 | font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
|
| 19457 | }
|
| 19458 | .cds--toast-notification strong {
|
| 19459 | font-weight: 600;
|
| 19460 | }
|
| 19461 | @media (min-width: 99rem) {
|
| 19462 | .cds--toast-notification {
|
| 19463 | inline-size: 22rem;
|
| 19464 | }
|
| 19465 | }
|
| 19466 |
|
| 19467 | .cds--toast-notification:not(.cds--toast-notification--low-contrast) a {
|
| 19468 | color: var(--cds-link-inverse, #78a9ff);
|
| 19469 | }
|
| 19470 |
|
| 19471 | .cds--toast-notification a {
|
| 19472 | text-decoration: none;
|
| 19473 | }
|
| 19474 |
|
| 19475 | .cds--toast-notification a:hover {
|
| 19476 | text-decoration: underline;
|
| 19477 | }
|
| 19478 |
|
| 19479 | .cds--toast-notification a:focus {
|
| 19480 | outline: 1px solid var(--cds-link-inverse, #78a9ff);
|
| 19481 | }
|
| 19482 |
|
| 19483 | .cds--toast-notification.cds--toast-notification--low-contrast a:focus {
|
| 19484 | outline: 1px solid var(--cds-focus, #0f62fe);
|
| 19485 | }
|
| 19486 | @media screen and (prefers-contrast) {
|
| 19487 | .cds--toast-notification.cds--toast-notification--low-contrast a:focus {
|
| 19488 | outline-style: dotted;
|
| 19489 | }
|
| 19490 | }
|
| 19491 |
|
| 19492 | .cds--toast-notification--low-contrast {
|
| 19493 | color: var(--cds-text-primary, #161616);
|
| 19494 | }
|
| 19495 |
|
| 19496 | .cds--toast-notification--error {
|
| 19497 | background: var(--cds-background-inverse, #393939);
|
| 19498 | border-inline-start: 3px solid var(--cds-support-error-inverse, #fa4d56);
|
| 19499 | }
|
| 19500 | .cds--toast-notification--error .cds--inline-notification__icon,
|
| 19501 | .cds--toast-notification--error .cds--toast-notification__icon,
|
| 19502 | .cds--toast-notification--error .cds--actionable-notification__icon {
|
| 19503 | fill: var(--cds-support-error-inverse, #fa4d56);
|
| 19504 | }
|
| 19505 |
|
| 19506 | .cds--toast-notification--low-contrast.cds--toast-notification--error {
|
| 19507 | background: var(--cds-notification-background-error, #fff1f1);
|
| 19508 | border-inline-start: 3px solid var(--cds-support-error, #da1e28);
|
| 19509 | }
|
| 19510 | .cds--toast-notification--low-contrast.cds--toast-notification--error .cds--inline-notification__icon,
|
| 19511 | .cds--toast-notification--low-contrast.cds--toast-notification--error .cds--toast-notification__icon,
|
| 19512 | .cds--toast-notification--low-contrast.cds--toast-notification--error .cds--actionable-notification__icon {
|
| 19513 | fill: var(--cds-support-error, #da1e28);
|
| 19514 | }
|
| 19515 |
|
| 19516 | .cds--toast-notification--success {
|
| 19517 | background: var(--cds-background-inverse, #393939);
|
| 19518 | border-inline-start: 3px solid var(--cds-support-success-inverse, #42be65);
|
| 19519 | }
|
| 19520 | .cds--toast-notification--success .cds--inline-notification__icon,
|
| 19521 | .cds--toast-notification--success .cds--toast-notification__icon,
|
| 19522 | .cds--toast-notification--success .cds--actionable-notification__icon {
|
| 19523 | fill: var(--cds-support-success-inverse, #42be65);
|
| 19524 | }
|
| 19525 |
|
| 19526 | .cds--toast-notification--low-contrast.cds--toast-notification--success {
|
| 19527 | background: var(--cds-notification-background-success, #defbe6);
|
| 19528 | border-inline-start: 3px solid var(--cds-support-success, #24a148);
|
| 19529 | }
|
| 19530 | .cds--toast-notification--low-contrast.cds--toast-notification--success .cds--inline-notification__icon,
|
| 19531 | .cds--toast-notification--low-contrast.cds--toast-notification--success .cds--toast-notification__icon,
|
| 19532 | .cds--toast-notification--low-contrast.cds--toast-notification--success .cds--actionable-notification__icon {
|
| 19533 | fill: var(--cds-support-success, #24a148);
|
| 19534 | }
|
| 19535 |
|
| 19536 | .cds--toast-notification--info,
|
| 19537 | .cds--toast-notification--info-square {
|
| 19538 | background: var(--cds-background-inverse, #393939);
|
| 19539 | border-inline-start: 3px solid var(--cds-support-info-inverse, #4589ff);
|
| 19540 | }
|
| 19541 | .cds--toast-notification--info .cds--inline-notification__icon,
|
| 19542 | .cds--toast-notification--info .cds--toast-notification__icon,
|
| 19543 | .cds--toast-notification--info .cds--actionable-notification__icon,
|
| 19544 | .cds--toast-notification--info-square .cds--inline-notification__icon,
|
| 19545 | .cds--toast-notification--info-square .cds--toast-notification__icon,
|
| 19546 | .cds--toast-notification--info-square .cds--actionable-notification__icon {
|
| 19547 | fill: var(--cds-support-info-inverse, #4589ff);
|
| 19548 | }
|
| 19549 |
|
| 19550 | .cds--toast-notification--low-contrast.cds--toast-notification--info,
|
| 19551 | .cds--toast-notification--low-contrast.cds--toast-notification--info-square {
|
| 19552 | background: var(--cds-notification-background-info, #edf5ff);
|
| 19553 | border-inline-start: 3px solid var(--cds-support-info, #0043ce);
|
| 19554 | }
|
| 19555 | .cds--toast-notification--low-contrast.cds--toast-notification--info .cds--inline-notification__icon,
|
| 19556 | .cds--toast-notification--low-contrast.cds--toast-notification--info .cds--toast-notification__icon,
|
| 19557 | .cds--toast-notification--low-contrast.cds--toast-notification--info .cds--actionable-notification__icon,
|
| 19558 | .cds--toast-notification--low-contrast.cds--toast-notification--info-square .cds--inline-notification__icon,
|
| 19559 | .cds--toast-notification--low-contrast.cds--toast-notification--info-square .cds--toast-notification__icon,
|
| 19560 | .cds--toast-notification--low-contrast.cds--toast-notification--info-square .cds--actionable-notification__icon {
|
| 19561 | fill: var(--cds-support-info, #0043ce);
|
| 19562 | }
|
| 19563 |
|
| 19564 | .cds--toast-notification--warning,
|
| 19565 | .cds--toast-notification--warning-alt {
|
| 19566 | background: var(--cds-background-inverse, #393939);
|
| 19567 | border-inline-start: 3px solid var(--cds-support-warning-inverse, #f1c21b);
|
| 19568 | }
|
| 19569 | .cds--toast-notification--warning .cds--inline-notification__icon,
|
| 19570 | .cds--toast-notification--warning .cds--toast-notification__icon,
|
| 19571 | .cds--toast-notification--warning .cds--actionable-notification__icon,
|
| 19572 | .cds--toast-notification--warning-alt .cds--inline-notification__icon,
|
| 19573 | .cds--toast-notification--warning-alt .cds--toast-notification__icon,
|
| 19574 | .cds--toast-notification--warning-alt .cds--actionable-notification__icon {
|
| 19575 | fill: var(--cds-support-warning-inverse, #f1c21b);
|
| 19576 | }
|
| 19577 |
|
| 19578 | .cds--toast-notification--low-contrast.cds--toast-notification--warning,
|
| 19579 | .cds--toast-notification--low-contrast.cds--toast-notification--warning-alt {
|
| 19580 | background: var(--cds-notification-background-warning, #fdf6dd);
|
| 19581 | border-inline-start: 3px solid var(--cds-support-warning, #f1c21b);
|
| 19582 | }
|
| 19583 | .cds--toast-notification--low-contrast.cds--toast-notification--warning .cds--inline-notification__icon,
|
| 19584 | .cds--toast-notification--low-contrast.cds--toast-notification--warning .cds--toast-notification__icon,
|
| 19585 | .cds--toast-notification--low-contrast.cds--toast-notification--warning .cds--actionable-notification__icon,
|
| 19586 | .cds--toast-notification--low-contrast.cds--toast-notification--warning-alt .cds--inline-notification__icon,
|
| 19587 | .cds--toast-notification--low-contrast.cds--toast-notification--warning-alt .cds--toast-notification__icon,
|
| 19588 | .cds--toast-notification--low-contrast.cds--toast-notification--warning-alt .cds--actionable-notification__icon {
|
| 19589 | fill: var(--cds-support-warning, #f1c21b);
|
| 19590 | }
|
| 19591 |
|
| 19592 | .cds--toast-notification--warning .cds--toast-notification__icon path[opacity="0"],
|
| 19593 | .cds--toast-notification--warning-alt .cds--toast-notification__icon path:first-of-type {
|
| 19594 | fill: #000000;
|
| 19595 | opacity: 1;
|
| 19596 | }
|
| 19597 |
|
| 19598 | .cds--toast-notification__icon {
|
| 19599 | flex-shrink: 0;
|
| 19600 | margin-block-start: 1rem;
|
| 19601 | margin-inline-end: 1rem;
|
| 19602 | }
|
| 19603 |
|
| 19604 | .cds--toast-notification__details {
|
| 19605 | margin-inline-end: 1rem;
|
| 19606 | }
|
| 19607 |
|
| 19608 | .cds--toast-notification__close-button {
|
| 19609 | outline: 2px solid transparent;
|
| 19610 | outline-offset: -2px;
|
| 19611 | display: flex;
|
| 19612 | flex-direction: column;
|
| 19613 | align-items: center;
|
| 19614 | justify-content: center;
|
| 19615 | padding: 0;
|
| 19616 | border: none;
|
| 19617 | background-color: transparent;
|
| 19618 | block-size: 3rem;
|
| 19619 | cursor: pointer;
|
| 19620 | inline-size: 3rem;
|
| 19621 | margin-inline-start: auto;
|
| 19622 | min-block-size: 3rem;
|
| 19623 | min-inline-size: 3rem;
|
| 19624 | transition: outline 250ms, background-color 250ms;
|
| 19625 | }
|
| 19626 | .cds--toast-notification__close-button:focus {
|
| 19627 | outline: 2px solid var(--cds-focus-inverse, #ffffff);
|
| 19628 | outline-offset: -2px;
|
| 19629 | }
|
| 19630 | .cds--toast-notification__close-button .cds--toast-notification__close-icon {
|
| 19631 | fill: var(--cds-icon-inverse, #ffffff);
|
| 19632 | }
|
| 19633 |
|
| 19634 | .cds--toast-notification--low-contrast .cds--toast-notification__close-button:focus {
|
| 19635 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 19636 | outline-offset: -2px;
|
| 19637 | }
|
| 19638 | @media screen and (prefers-contrast) {
|
| 19639 | .cds--toast-notification--low-contrast .cds--toast-notification__close-button:focus {
|
| 19640 | outline-style: dotted;
|
| 19641 | }
|
| 19642 | }
|
| 19643 |
|
| 19644 | .cds--toast-notification--low-contrast .cds--toast-notification__close-button .cds--toast-notification__close-icon {
|
| 19645 | fill: var(--cds-icon-primary, #161616);
|
| 19646 | }
|
| 19647 |
|
| 19648 | .cds--toast-notification__title {
|
| 19649 | font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
|
| 19650 | font-weight: var(--cds-heading-compact-01-font-weight, 600);
|
| 19651 | line-height: var(--cds-heading-compact-01-line-height, 1.28572);
|
| 19652 | letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
|
| 19653 | font-weight: 600;
|
| 19654 | margin-block-start: 1rem;
|
| 19655 | word-break: break-word;
|
| 19656 | }
|
| 19657 |
|
| 19658 | .cds--toast-notification__subtitle {
|
| 19659 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 19660 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 19661 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 19662 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 19663 | color: var(--cds-text-inverse, #ffffff);
|
| 19664 | margin-block: 0 1rem;
|
| 19665 | word-break: break-word;
|
| 19666 | }
|
| 19667 |
|
| 19668 | .cds--toast-notification--low-contrast .cds--toast-notification__subtitle {
|
| 19669 | color: var(--cds-text-primary, #161616);
|
| 19670 | }
|
| 19671 |
|
| 19672 | .cds--toast-notification__caption {
|
| 19673 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 19674 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 19675 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 19676 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 19677 | color: var(--cds-text-inverse, #ffffff);
|
| 19678 | margin-block-end: 1rem;
|
| 19679 | padding-block-start: 0.5rem;
|
| 19680 | }
|
| 19681 |
|
| 19682 | .cds--toast-notification--low-contrast .cds--toast-notification__caption {
|
| 19683 | color: var(--cds-text-primary, #161616);
|
| 19684 | }
|
| 19685 |
|
| 19686 |
|
| 19687 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 19688 | .cds--toast-notification {
|
| 19689 | outline: 1px solid transparent;
|
| 19690 | }
|
| 19691 | }
|
| 19692 |
|
| 19693 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 19694 | .cds--toast-notification__close-button:focus {
|
| 19695 | color: Highlight;
|
| 19696 | outline: 1px solid Highlight;
|
| 19697 | }
|
| 19698 | }
|
| 19699 |
|
| 19700 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 19701 | .cds--toast-notification .cds--toast-notification__close-icon {
|
| 19702 | fill: ButtonText;
|
| 19703 | }
|
| 19704 | }
|
| 19705 |
|
| 19706 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 19707 | .cds--toast-notification .cds--toast-notification__icon {
|
| 19708 | fill: ButtonText;
|
| 19709 | }
|
| 19710 | }
|
| 19711 |
|
| 19712 |
|
| 19713 | .cds--actionable-notification {
|
| 19714 | position: relative;
|
| 19715 | display: flex;
|
| 19716 | flex-wrap: wrap;
|
| 19717 | block-size: auto;
|
| 19718 | color: var(--cds-text-inverse, #ffffff);
|
| 19719 | inline-size: 100%;
|
| 19720 | max-inline-size: 18rem;
|
| 19721 | min-block-size: 3rem;
|
| 19722 | min-inline-size: 18rem;
|
| 19723 | }
|
| 19724 | .cds--actionable-notification html {
|
| 19725 | font-size: 100%;
|
| 19726 | }
|
| 19727 | .cds--actionable-notification body {
|
| 19728 | font-weight: 400;
|
| 19729 | font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
|
| 19730 | -moz-osx-font-smoothing: grayscale;
|
| 19731 | -webkit-font-smoothing: antialiased;
|
| 19732 | text-rendering: optimizeLegibility;
|
| 19733 | }
|
| 19734 | .cds--actionable-notification code {
|
| 19735 | font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
|
| 19736 | }
|
| 19737 | .cds--actionable-notification strong {
|
| 19738 | font-weight: 600;
|
| 19739 | }
|
| 19740 | @media (min-width: 42rem) {
|
| 19741 | .cds--actionable-notification {
|
| 19742 | flex-wrap: nowrap;
|
| 19743 | max-inline-size: 38rem;
|
| 19744 | }
|
| 19745 | }
|
| 19746 | @media (min-width: 66rem) {
|
| 19747 | .cds--actionable-notification {
|
| 19748 | max-inline-size: 46rem;
|
| 19749 | }
|
| 19750 | }
|
| 19751 | @media (min-width: 99rem) {
|
| 19752 | .cds--actionable-notification {
|
| 19753 | max-inline-size: 52rem;
|
| 19754 | }
|
| 19755 | }
|
| 19756 |
|
| 19757 | .cds--actionable-notification--toast {
|
| 19758 | flex-wrap: wrap;
|
| 19759 | box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
|
| 19760 | max-inline-size: 18rem;
|
| 19761 | min-inline-size: 18rem;
|
| 19762 | }
|
| 19763 |
|
| 19764 | .cds--actionable-notification:not(.cds--actionable-notification--low-contrast) a {
|
| 19765 | color: var(--cds-link-inverse, #78a9ff);
|
| 19766 | }
|
| 19767 |
|
| 19768 | .cds--actionable-notification a {
|
| 19769 | text-decoration: none;
|
| 19770 | }
|
| 19771 |
|
| 19772 | .cds--actionable-notification a:hover {
|
| 19773 | text-decoration: underline;
|
| 19774 | }
|
| 19775 |
|
| 19776 | .cds--actionable-notification a:focus {
|
| 19777 | outline: 1px solid var(--cds-focus-inverse, #ffffff);
|
| 19778 | }
|
| 19779 |
|
| 19780 | .cds--actionable-notification.cds--actionable-notification--low-contrast a:focus {
|
| 19781 | outline: 1px solid var(--cds-focus, #0f62fe);
|
| 19782 | }
|
| 19783 | @media screen and (prefers-contrast) {
|
| 19784 | .cds--actionable-notification.cds--actionable-notification--low-contrast a:focus {
|
| 19785 | outline-style: dotted;
|
| 19786 | }
|
| 19787 | }
|
| 19788 |
|
| 19789 | .cds--actionable-notification--low-contrast {
|
| 19790 | color: var(--cds-text-primary, #161616);
|
| 19791 | }
|
| 19792 |
|
| 19793 | .cds--actionable-notification--low-contrast:not(.cds--actionable-notification--toast)::before {
|
| 19794 | position: absolute;
|
| 19795 | box-sizing: border-box;
|
| 19796 | border-width: 1px 1px 1px 0;
|
| 19797 | border-style: solid;
|
| 19798 | block-size: 100%;
|
| 19799 | content: "";
|
| 19800 | filter: opacity(0.4);
|
| 19801 | inline-size: 100%;
|
| 19802 | inset-block-start: 0;
|
| 19803 | inset-inline-start: 0;
|
| 19804 | pointer-events: none;
|
| 19805 | }
|
| 19806 |
|
| 19807 | .cds--actionable-notification--error {
|
| 19808 | background: var(--cds-background-inverse, #393939);
|
| 19809 | border-inline-start: 3px solid var(--cds-support-error-inverse, #fa4d56);
|
| 19810 | }
|
| 19811 | .cds--actionable-notification--error .cds--inline-notification__icon,
|
| 19812 | .cds--actionable-notification--error .cds--toast-notification__icon,
|
| 19813 | .cds--actionable-notification--error .cds--actionable-notification__icon {
|
| 19814 | fill: var(--cds-support-error-inverse, #fa4d56);
|
| 19815 | }
|
| 19816 |
|
| 19817 | .cds--actionable-notification--low-contrast.cds--actionable-notification--error {
|
| 19818 | background: var(--cds-notification-background-error, #fff1f1);
|
| 19819 | border-inline-start: 3px solid var(--cds-support-error, #da1e28);
|
| 19820 | }
|
| 19821 | .cds--actionable-notification--low-contrast.cds--actionable-notification--error .cds--inline-notification__icon,
|
| 19822 | .cds--actionable-notification--low-contrast.cds--actionable-notification--error .cds--toast-notification__icon,
|
| 19823 | .cds--actionable-notification--low-contrast.cds--actionable-notification--error .cds--actionable-notification__icon {
|
| 19824 | fill: var(--cds-support-error, #da1e28);
|
| 19825 | }
|
| 19826 | .cds--actionable-notification--low-contrast.cds--actionable-notification--error::before {
|
| 19827 | border-color: var(--cds-support-error, #da1e28);
|
| 19828 | }
|
| 19829 |
|
| 19830 | .cds--actionable-notification--success {
|
| 19831 | background: var(--cds-background-inverse, #393939);
|
| 19832 | border-inline-start: 3px solid var(--cds-support-success-inverse, #42be65);
|
| 19833 | }
|
| 19834 | .cds--actionable-notification--success .cds--inline-notification__icon,
|
| 19835 | .cds--actionable-notification--success .cds--toast-notification__icon,
|
| 19836 | .cds--actionable-notification--success .cds--actionable-notification__icon {
|
| 19837 | fill: var(--cds-support-success-inverse, #42be65);
|
| 19838 | }
|
| 19839 |
|
| 19840 | .cds--actionable-notification--low-contrast.cds--actionable-notification--success {
|
| 19841 | background: var(--cds-notification-background-success, #defbe6);
|
| 19842 | border-inline-start: 3px solid var(--cds-support-success, #24a148);
|
| 19843 | }
|
| 19844 | .cds--actionable-notification--low-contrast.cds--actionable-notification--success .cds--inline-notification__icon,
|
| 19845 | .cds--actionable-notification--low-contrast.cds--actionable-notification--success .cds--toast-notification__icon,
|
| 19846 | .cds--actionable-notification--low-contrast.cds--actionable-notification--success .cds--actionable-notification__icon {
|
| 19847 | fill: var(--cds-support-success, #24a148);
|
| 19848 | }
|
| 19849 | .cds--actionable-notification--low-contrast.cds--actionable-notification--success::before {
|
| 19850 | border-color: var(--cds-support-success, #24a148);
|
| 19851 | }
|
| 19852 |
|
| 19853 | .cds--actionable-notification--info,
|
| 19854 | .cds--actionable-notification--info-square {
|
| 19855 | background: var(--cds-background-inverse, #393939);
|
| 19856 | border-inline-start: 3px solid var(--cds-support-info-inverse, #4589ff);
|
| 19857 | }
|
| 19858 | .cds--actionable-notification--info .cds--inline-notification__icon,
|
| 19859 | .cds--actionable-notification--info .cds--toast-notification__icon,
|
| 19860 | .cds--actionable-notification--info .cds--actionable-notification__icon,
|
| 19861 | .cds--actionable-notification--info-square .cds--inline-notification__icon,
|
| 19862 | .cds--actionable-notification--info-square .cds--toast-notification__icon,
|
| 19863 | .cds--actionable-notification--info-square .cds--actionable-notification__icon {
|
| 19864 | fill: var(--cds-support-info-inverse, #4589ff);
|
| 19865 | }
|
| 19866 |
|
| 19867 | .cds--actionable-notification--low-contrast.cds--actionable-notification--info,
|
| 19868 | .cds--actionable-notification--low-contrast.cds--actionable-notification--info-square {
|
| 19869 | background: var(--cds-notification-background-info, #edf5ff);
|
| 19870 | border-inline-start: 3px solid var(--cds-support-info, #0043ce);
|
| 19871 | }
|
| 19872 | .cds--actionable-notification--low-contrast.cds--actionable-notification--info .cds--inline-notification__icon,
|
| 19873 | .cds--actionable-notification--low-contrast.cds--actionable-notification--info .cds--toast-notification__icon,
|
| 19874 | .cds--actionable-notification--low-contrast.cds--actionable-notification--info .cds--actionable-notification__icon,
|
| 19875 | .cds--actionable-notification--low-contrast.cds--actionable-notification--info-square .cds--inline-notification__icon,
|
| 19876 | .cds--actionable-notification--low-contrast.cds--actionable-notification--info-square .cds--toast-notification__icon,
|
| 19877 | .cds--actionable-notification--low-contrast.cds--actionable-notification--info-square .cds--actionable-notification__icon {
|
| 19878 | fill: var(--cds-support-info, #0043ce);
|
| 19879 | }
|
| 19880 | .cds--actionable-notification--low-contrast.cds--actionable-notification--info::before,
|
| 19881 | .cds--actionable-notification--low-contrast.cds--actionable-notification--info-square::before {
|
| 19882 | border-color: var(--cds-support-info, #0043ce);
|
| 19883 | }
|
| 19884 |
|
| 19885 | .cds--actionable-notification--warning,
|
| 19886 | .cds--actionable-notification--warning-alt {
|
| 19887 | background: var(--cds-background-inverse, #393939);
|
| 19888 | border-inline-start: 3px solid var(--cds-support-warning-inverse, #f1c21b);
|
| 19889 | }
|
| 19890 | .cds--actionable-notification--warning .cds--inline-notification__icon,
|
| 19891 | .cds--actionable-notification--warning .cds--toast-notification__icon,
|
| 19892 | .cds--actionable-notification--warning .cds--actionable-notification__icon,
|
| 19893 | .cds--actionable-notification--warning-alt .cds--inline-notification__icon,
|
| 19894 | .cds--actionable-notification--warning-alt .cds--toast-notification__icon,
|
| 19895 | .cds--actionable-notification--warning-alt .cds--actionable-notification__icon {
|
| 19896 | fill: var(--cds-support-warning-inverse, #f1c21b);
|
| 19897 | }
|
| 19898 |
|
| 19899 | .cds--actionable-notification--low-contrast.cds--actionable-notification--warning,
|
| 19900 | .cds--actionable-notification--low-contrast.cds--actionable-notification--warning-alt {
|
| 19901 | background: var(--cds-notification-background-warning, #fdf6dd);
|
| 19902 | border-inline-start: 3px solid var(--cds-support-warning, #f1c21b);
|
| 19903 | }
|
| 19904 | .cds--actionable-notification--low-contrast.cds--actionable-notification--warning .cds--inline-notification__icon,
|
| 19905 | .cds--actionable-notification--low-contrast.cds--actionable-notification--warning .cds--toast-notification__icon,
|
| 19906 | .cds--actionable-notification--low-contrast.cds--actionable-notification--warning .cds--actionable-notification__icon,
|
| 19907 | .cds--actionable-notification--low-contrast.cds--actionable-notification--warning-alt .cds--inline-notification__icon,
|
| 19908 | .cds--actionable-notification--low-contrast.cds--actionable-notification--warning-alt .cds--toast-notification__icon,
|
| 19909 | .cds--actionable-notification--low-contrast.cds--actionable-notification--warning-alt .cds--actionable-notification__icon {
|
| 19910 | fill: var(--cds-support-warning, #f1c21b);
|
| 19911 | }
|
| 19912 | .cds--actionable-notification--low-contrast.cds--actionable-notification--warning::before,
|
| 19913 | .cds--actionable-notification--low-contrast.cds--actionable-notification--warning-alt::before {
|
| 19914 | border-color: var(--cds-support-warning, #f1c21b);
|
| 19915 | }
|
| 19916 |
|
| 19917 | .cds--actionable-notification--warning .cds--toast-notification__icon path[opacity="0"],
|
| 19918 | .cds--actionable-notification--warning-alt .cds--toast-notification__icon path:first-of-type {
|
| 19919 | fill: #000000;
|
| 19920 | opacity: 1;
|
| 19921 | }
|
| 19922 |
|
| 19923 | .cds--actionable-notification--warning .cds--inline-notification__icon path[opacity="0"],
|
| 19924 | .cds--actionable-notification--warning-alt .cds--inline-notification__icon path:first-of-type {
|
| 19925 | fill: #000000;
|
| 19926 | opacity: 1;
|
| 19927 | }
|
| 19928 |
|
| 19929 | .cds--actionable-notification__details {
|
| 19930 | display: flex;
|
| 19931 | flex-grow: 1;
|
| 19932 | margin-inline: 0.8125rem 3rem;
|
| 19933 | }
|
| 19934 |
|
| 19935 | @media (min-width: 42rem) {
|
| 19936 | .cds--actionable-notification:not(.cds--actionable-notification--toast) .cds--actionable-notification__details {
|
| 19937 | margin: 0 0.8125rem;
|
| 19938 | }
|
| 19939 | }
|
| 19940 |
|
| 19941 | .cds--actionable-notification .cds--inline-notification__icon {
|
| 19942 | flex-shrink: 0;
|
| 19943 | margin-block-start: 0.875rem;
|
| 19944 | margin-inline-end: 1rem;
|
| 19945 | }
|
| 19946 |
|
| 19947 | .cds--actionable-notification .cds--toast-notification__icon {
|
| 19948 | flex-shrink: 0;
|
| 19949 | margin-block-start: 1rem;
|
| 19950 | margin-inline-end: 1rem;
|
| 19951 | }
|
| 19952 |
|
| 19953 | .cds--actionable-notification__text-wrapper {
|
| 19954 | display: flex;
|
| 19955 | flex-wrap: wrap;
|
| 19956 | padding: 0.9375rem 0;
|
| 19957 | }
|
| 19958 |
|
| 19959 | .cds--actionable-notification__button-wrapper {
|
| 19960 | display: flex;
|
| 19961 | }
|
| 19962 |
|
| 19963 | .cds--actionable-notification--toast .cds--actionable-notification__text-wrapper {
|
| 19964 | padding: 0.9375rem 0 1.4375rem 0;
|
| 19965 | }
|
| 19966 |
|
| 19967 | .cds--actionable-notification__content {
|
| 19968 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 19969 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 19970 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 19971 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 19972 | display: flex;
|
| 19973 | flex-wrap: wrap;
|
| 19974 | word-break: break-word;
|
| 19975 | }
|
| 19976 |
|
| 19977 | .cds--actionable-notification--toast .cds--actionable-notification__content {
|
| 19978 | display: block;
|
| 19979 | }
|
| 19980 |
|
| 19981 | .cds--actionable-notification__title {
|
| 19982 | font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
|
| 19983 | font-weight: var(--cds-heading-compact-01-font-weight, 600);
|
| 19984 | line-height: var(--cds-heading-compact-01-line-height, 1.28572);
|
| 19985 | letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
|
| 19986 | font-weight: 600;
|
| 19987 | margin-inline-end: 0.25rem;
|
| 19988 | word-break: break-word;
|
| 19989 | }
|
| 19990 |
|
| 19991 | .cds--actionable-notification--toast .cds--actionable-notification__title {
|
| 19992 | margin-inline-end: 0;
|
| 19993 | }
|
| 19994 |
|
| 19995 | .cds--actionable-notification__subtitle {
|
| 19996 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 19997 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 19998 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 19999 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 20000 | color: var(--cds-text-inverse, #ffffff);
|
| 20001 | margin-block-start: 0;
|
| 20002 | word-break: break-word;
|
| 20003 | }
|
| 20004 |
|
| 20005 | .cds--actionable-notification--low-contrast .cds--actionable-notification__subtitle {
|
| 20006 | color: var(--cds-text-primary, #161616);
|
| 20007 | }
|
| 20008 |
|
| 20009 |
|
| 20010 | .cds--actionable-notification__action-button.cds--btn--ghost {
|
| 20011 | block-size: 2rem;
|
| 20012 | margin-block-end: 0.5rem;
|
| 20013 | margin-inline-start: 2.5rem;
|
| 20014 | }
|
| 20015 | @media (min-width: 42rem) {
|
| 20016 | .cds--actionable-notification__action-button.cds--btn--ghost {
|
| 20017 | margin: 0.5rem 0;
|
| 20018 | }
|
| 20019 | }
|
| 20020 |
|
| 20021 | .cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--ghost {
|
| 20022 | color: var(--cds-link-inverse, #78a9ff);
|
| 20023 | }
|
| 20024 |
|
| 20025 | .cds--actionable-notification__action-button.cds--btn--ghost:active,
|
| 20026 | .cds--actionable-notification__action-button.cds--btn--ghost:hover {
|
| 20027 | background-color: var(--cds-background-inverse-hover, #474747);
|
| 20028 | }
|
| 20029 |
|
| 20030 | .cds--actionable-notification--low-contrast .cds--actionable-notification__action-button.cds--btn--ghost:active,
|
| 20031 | .cds--actionable-notification--low-contrast .cds--actionable-notification__action-button.cds--btn--ghost:hover {
|
| 20032 | background-color: var(--cds-notification-action-hover, #ffffff);
|
| 20033 | }
|
| 20034 |
|
| 20035 | .cds--actionable-notification__action-button.cds--btn--ghost:focus {
|
| 20036 | border-color: transparent;
|
| 20037 | box-shadow: none;
|
| 20038 | outline: 2px solid var(--cds-focus-inverse, #ffffff);
|
| 20039 | outline-offset: -2px;
|
| 20040 | }
|
| 20041 |
|
| 20042 | .cds--actionable-notification--low-contrast .cds--actionable-notification__action-button.cds--btn--ghost:focus {
|
| 20043 | outline-color: var(--cds-focus, #0f62fe);
|
| 20044 | }
|
| 20045 |
|
| 20046 | .cds--actionable-notification--hide-close-button .cds--actionable-notification__action-button.cds--btn--ghost {
|
| 20047 | margin-inline-end: 0.5rem;
|
| 20048 | }
|
| 20049 |
|
| 20050 |
|
| 20051 | .cds--actionable-notification__action-button.cds--btn--tertiary {
|
| 20052 | margin-block-end: 1rem;
|
| 20053 | margin-inline-start: calc(
|
| 20054 | 2rem + 1.25rem - 0.125rem
|
| 20055 | );
|
| 20056 | padding-inline-end: 1rem;
|
| 20057 | padding-inline-start: 1rem;
|
| 20058 | }
|
| 20059 |
|
| 20060 | .cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary {
|
| 20061 | border-width: 1px;
|
| 20062 | border-style: solid;
|
| 20063 | border-color: var(--cds-notification-action-tertiary-inverse, #ffffff);
|
| 20064 | background-color: transparent;
|
| 20065 | color: var(--cds-notification-action-tertiary-inverse, #ffffff);
|
| 20066 | }
|
| 20067 | .cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary:hover {
|
| 20068 | background-color: var(--cds-notification-action-tertiary-inverse-hover, #f4f4f4);
|
| 20069 | }
|
| 20070 | .cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary:focus {
|
| 20071 | border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
|
| 20072 | box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
|
| 20073 | }
|
| 20074 | .cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary:active {
|
| 20075 | background-color: var(--cds-notification-action-tertiary-inverse-active, #c6c6c6);
|
| 20076 | }
|
| 20077 | .cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary .cds--btn__icon,
|
| 20078 | .cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
|
| 20079 | fill: currentColor;
|
| 20080 | }
|
| 20081 |
|
| 20082 | .cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary:hover {
|
| 20083 | color: var(--cds-notification-action-tertiary-inverse-text, #161616);
|
| 20084 | }
|
| 20085 |
|
| 20086 | .cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary:focus {
|
| 20087 | border-color: var(--cds-focus-inverse, #ffffff);
|
| 20088 | background-color: var(--cds-notification-action-tertiary-inverse, #ffffff);
|
| 20089 | box-shadow: inset 0 0 0 1px var(--cds-focus-inverse, #ffffff), inset 0 0 0 2px var(--cds-background-inverse, #393939);
|
| 20090 | color: var(--cds-notification-action-tertiary-inverse-text, #161616);
|
| 20091 | }
|
| 20092 |
|
| 20093 | .cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary:active {
|
| 20094 | border-color: transparent;
|
| 20095 | background-color: var(--cds-notification-action-tertiary-inverse-active, #c6c6c6);
|
| 20096 | color: var(--cds-notification-action-tertiary-inverse-text, #161616);
|
| 20097 | }
|
| 20098 |
|
| 20099 | .cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary:disabled,
|
| 20100 | .cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary:hover:disabled,
|
| 20101 | .cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary:focus:disabled,
|
| 20102 | .cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary.cds--btn--disabled,
|
| 20103 | .cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary.cds--btn--disabled:hover,
|
| 20104 | .cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary.cds--btn--disabled:focus {
|
| 20105 | background: transparent;
|
| 20106 | color: var(--cds-notification-action-tertiary-inverse-text-on-color-disabled, rgba(255, 255, 255, 0.25));
|
| 20107 | outline: none;
|
| 20108 | }
|
| 20109 |
|
| 20110 | .cds--actionable-notification--hide-close-button .cds--actionable-notification__action-button.cds--btn--tertiary {
|
| 20111 | margin-inline-end: 0.5rem;
|
| 20112 | }
|
| 20113 |
|
| 20114 | .cds--actionable-notification__close-button {
|
| 20115 | outline: 2px solid transparent;
|
| 20116 | outline-offset: -2px;
|
| 20117 | position: absolute;
|
| 20118 | display: flex;
|
| 20119 | flex-direction: column;
|
| 20120 | align-items: center;
|
| 20121 | justify-content: center;
|
| 20122 | padding: 0;
|
| 20123 | border: none;
|
| 20124 | background: transparent;
|
| 20125 | block-size: 3rem;
|
| 20126 | cursor: pointer;
|
| 20127 | inline-size: 3rem;
|
| 20128 | inset-block-start: 0;
|
| 20129 | inset-inline-end: 0;
|
| 20130 | max-inline-size: 3rem;
|
| 20131 | min-inline-size: 3rem;
|
| 20132 | transition: outline 110ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 20133 | }
|
| 20134 | .cds--actionable-notification__close-button:focus {
|
| 20135 | outline: 2px solid var(--cds-focus-inverse, #ffffff);
|
| 20136 | outline-offset: -2px;
|
| 20137 | }
|
| 20138 | .cds--actionable-notification__close-button .cds--actionable-notification__close-icon {
|
| 20139 | fill: var(--cds-icon-inverse, #ffffff);
|
| 20140 | }
|
| 20141 | @media (min-width: 42rem) {
|
| 20142 | .cds--actionable-notification__close-button {
|
| 20143 | position: static;
|
| 20144 | }
|
| 20145 | }
|
| 20146 |
|
| 20147 | @media (min-width: 42rem) {
|
| 20148 | .cds--actionable-notification--toast .cds--actionable-notification__close-button {
|
| 20149 | position: absolute;
|
| 20150 | }
|
| 20151 | }
|
| 20152 |
|
| 20153 | .cds--actionable-notification--low-contrast .cds--actionable-notification__close-button:focus {
|
| 20154 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 20155 | outline-offset: -2px;
|
| 20156 | }
|
| 20157 | @media screen and (prefers-contrast) {
|
| 20158 | .cds--actionable-notification--low-contrast .cds--actionable-notification__close-button:focus {
|
| 20159 | outline-style: dotted;
|
| 20160 | }
|
| 20161 | }
|
| 20162 |
|
| 20163 | .cds--actionable-notification--low-contrast .cds--actionable-notification__close-button .cds--actionable-notification__close-icon {
|
| 20164 | fill: var(--cds-icon-primary, #161616);
|
| 20165 | }
|
| 20166 |
|
| 20167 |
|
| 20168 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 20169 | .cds--actionable-notification {
|
| 20170 | outline: 1px solid transparent;
|
| 20171 | }
|
| 20172 | }
|
| 20173 |
|
| 20174 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 20175 | .cds--actionable-notification__close-button:focus,
|
| 20176 | .cds--btn.cds--btn--ghost.cds--actionable-notification__action-button:focus {
|
| 20177 | color: Highlight;
|
| 20178 | outline: 1px solid Highlight;
|
| 20179 | }
|
| 20180 | }
|
| 20181 |
|
| 20182 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 20183 | .cds--actionable-notification .cds--inline-notification__icon,
|
| 20184 | .cds--actionable-notification .cds--toast-notification__icon,
|
| 20185 | .cds--actionable-notification .cds--actionable-notification__close-icon {
|
| 20186 | fill: ButtonText;
|
| 20187 | }
|
| 20188 | }
|
| 20189 |
|
| 20190 |
|
| 20191 | .cds--data-table-container + .cds--pagination {
|
| 20192 | border-block-start: 0;
|
| 20193 | }
|
| 20194 |
|
| 20195 | .cds--pagination {
|
| 20196 | box-sizing: border-box;
|
| 20197 | padding: 0;
|
| 20198 | border: 0;
|
| 20199 | margin: 0;
|
| 20200 | font-family: inherit;
|
| 20201 | font-size: 100%;
|
| 20202 | vertical-align: baseline;
|
| 20203 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 20204 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 20205 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 20206 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 20207 | display: flex;
|
| 20208 | align-items: center;
|
| 20209 | justify-content: space-between;
|
| 20210 | background-color: var(--cds-layer);
|
| 20211 | border-block-start: 1px solid var(--cds-border-subtle);
|
| 20212 | inline-size: calc(100% - 1px);
|
| 20213 | min-block-size: 2.5rem;
|
| 20214 | overflow-x: auto;
|
| 20215 | }
|
| 20216 | .cds--pagination *,
|
| 20217 | .cds--pagination *::before,
|
| 20218 | .cds--pagination *::after {
|
| 20219 | box-sizing: inherit;
|
| 20220 | }
|
| 20221 | @media (min-width: 42rem) {
|
| 20222 | .cds--pagination {
|
| 20223 | overflow: initial;
|
| 20224 | }
|
| 20225 | .cds--pagination .cds--pagination__control-buttons {
|
| 20226 | display: flex;
|
| 20227 | }
|
| 20228 | }
|
| 20229 | @media (max-width: 41.98rem) {
|
| 20230 | .cds--pagination .cds--pagination__left > *,
|
| 20231 | .cds--pagination .cds--pagination__right > * {
|
| 20232 | display: none;
|
| 20233 | }
|
| 20234 | .cds--pagination .cds--pagination__items-count {
|
| 20235 | display: initial;
|
| 20236 | }
|
| 20237 | .cds--pagination .cds--pagination__control-buttons {
|
| 20238 | display: flex;
|
| 20239 | }
|
| 20240 | }
|
| 20241 |
|
| 20242 | .cds--pagination--sm {
|
| 20243 | min-block-size: 2rem;
|
| 20244 | }
|
| 20245 |
|
| 20246 | .cds--pagination--lg {
|
| 20247 | min-block-size: 3rem;
|
| 20248 | }
|
| 20249 |
|
| 20250 | .cds--pagination .cds--select {
|
| 20251 | align-items: center;
|
| 20252 | block-size: 100%;
|
| 20253 | }
|
| 20254 |
|
| 20255 | .cds--pagination .cds--select-input--inline__wrapper {
|
| 20256 | display: flex;
|
| 20257 | block-size: 100%;
|
| 20258 | }
|
| 20259 |
|
| 20260 | .cds--pagination .cds--select-input {
|
| 20261 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 20262 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 20263 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 20264 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 20265 | block-size: 100%;
|
| 20266 | inline-size: auto;
|
| 20267 | line-height: 2.5rem;
|
| 20268 | min-inline-size: auto;
|
| 20269 | }
|
| 20270 |
|
| 20271 | .cds--pagination .cds--select--inline .cds--select-input {
|
| 20272 | padding-inline: 1rem 2.25rem;
|
| 20273 | }
|
| 20274 |
|
| 20275 | .cds--pagination--sm .cds--select-input {
|
| 20276 | line-height: 2rem;
|
| 20277 | }
|
| 20278 |
|
| 20279 | .cds--pagination--lg .cds--select-input {
|
| 20280 | line-height: 3rem;
|
| 20281 | }
|
| 20282 |
|
| 20283 | .cds--pagination .cds--select-input:hover {
|
| 20284 | background: var(--cds-layer-hover);
|
| 20285 | }
|
| 20286 |
|
| 20287 | .cds--pagination .cds--select--inline .cds--select-input:focus,
|
| 20288 | .cds--pagination .cds--select--inline .cds--select-input:focus option,
|
| 20289 | .cds--pagination .cds--select--inline .cds--select-input:focus optgroup {
|
| 20290 | background-color: var(--cds-layer);
|
| 20291 | }
|
| 20292 |
|
| 20293 | .cds--pagination .cds--select__arrow {
|
| 20294 | inset-block-start: 50%;
|
| 20295 | transform: translate(-0.5rem, -50%);
|
| 20296 | }
|
| 20297 |
|
| 20298 | .cds--pagination .cds--select__item-count .cds--select-input {
|
| 20299 | border-inline-end: 1px solid var(--cds-border-subtle);
|
| 20300 | }
|
| 20301 |
|
| 20302 | .cds--pagination__right {
|
| 20303 | border-inline-start: 1px solid var(--cds-border-subtle);
|
| 20304 | }
|
| 20305 |
|
| 20306 | .cds--pagination__left,
|
| 20307 | .cds--pagination__right {
|
| 20308 | display: flex;
|
| 20309 | align-items: center;
|
| 20310 | block-size: 100%;
|
| 20311 | }
|
| 20312 |
|
| 20313 | .cds--pagination__left > .cds--form-item,
|
| 20314 | .cds--pagination__right > .cds--form-item {
|
| 20315 | block-size: 100%;
|
| 20316 | }
|
| 20317 |
|
| 20318 | .cds--pagination__left .cds--pagination__text,
|
| 20319 | .cds--pagination__right .cds--pagination__text {
|
| 20320 | white-space: nowrap;
|
| 20321 | }
|
| 20322 |
|
| 20323 | .cds--pagination__left .cds--pagination__text {
|
| 20324 | margin-inline-end: 0.0625rem;
|
| 20325 | }
|
| 20326 |
|
| 20327 | .cds--pagination__right .cds--pagination__text {
|
| 20328 | margin-inline-end: 1rem;
|
| 20329 | margin-inline-start: 0.0625rem;
|
| 20330 | }
|
| 20331 |
|
| 20332 | .cds--pagination__right .cds--pagination__text.cds--pagination__page-text {
|
| 20333 | margin-inline-end: 0.0625rem;
|
| 20334 | margin-inline-start: 1rem;
|
| 20335 | }
|
| 20336 |
|
| 20337 | .cds--pagination__right .cds--pagination__text.cds--pagination__page-text.cds--pagination__unknown-pages-text {
|
| 20338 | margin-inline-end: 1rem;
|
| 20339 | }
|
| 20340 |
|
| 20341 | .cds--pagination__right .cds--pagination__text:empty {
|
| 20342 | margin: 0;
|
| 20343 | }
|
| 20344 |
|
| 20345 | .cds--pagination__left {
|
| 20346 | padding: 0 1rem 0 0;
|
| 20347 | }
|
| 20348 | @media (min-width: 42rem) {
|
| 20349 | .cds--pagination__left {
|
| 20350 | padding: 0 1rem;
|
| 20351 | }
|
| 20352 | }
|
| 20353 |
|
| 20354 | @media (min-width: 42rem) {
|
| 20355 | .cds--pagination__text {
|
| 20356 | display: inline-block;
|
| 20357 | }
|
| 20358 | }
|
| 20359 |
|
| 20360 | span.cds--pagination__text {
|
| 20361 | color: var(--cds-text-primary, #161616);
|
| 20362 | margin-inline-start: 1rem;
|
| 20363 | }
|
| 20364 |
|
| 20365 | span.cds--pagination__text.cds--pagination__items-count {
|
| 20366 | color: var(--cds-text-secondary, #525252);
|
| 20367 | }
|
| 20368 |
|
| 20369 | .cds--pagination__button,
|
| 20370 | .cds--btn--ghost.cds--pagination__button {
|
| 20371 | box-sizing: border-box;
|
| 20372 | padding: 0;
|
| 20373 | border: 0;
|
| 20374 | margin: 0;
|
| 20375 | font-family: inherit;
|
| 20376 | font-size: 100%;
|
| 20377 | vertical-align: baseline;
|
| 20378 | display: flex;
|
| 20379 | align-items: center;
|
| 20380 | justify-content: center;
|
| 20381 | border: none;
|
| 20382 | margin: 0;
|
| 20383 | background: none;
|
| 20384 | block-size: 2.5rem;
|
| 20385 | border-inline-start: 1px solid var(--cds-border-subtle);
|
| 20386 | cursor: pointer;
|
| 20387 | fill: var(--cds-icon-primary, #161616);
|
| 20388 | inline-size: 2.5rem;
|
| 20389 | min-block-size: 2rem;
|
| 20390 | transition: outline 110ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 20391 | }
|
| 20392 | .cds--pagination__button *,
|
| 20393 | .cds--pagination__button *::before,
|
| 20394 | .cds--pagination__button *::after,
|
| 20395 | .cds--btn--ghost.cds--pagination__button *,
|
| 20396 | .cds--btn--ghost.cds--pagination__button *::before,
|
| 20397 | .cds--btn--ghost.cds--pagination__button *::after {
|
| 20398 | box-sizing: inherit;
|
| 20399 | }
|
| 20400 |
|
| 20401 | .cds--pagination__button > svg,
|
| 20402 | .cds--btn--ghost.cds--pagination__button > svg {
|
| 20403 | margin-block-start: 0;
|
| 20404 | }
|
| 20405 |
|
| 20406 | [dir=rtl] .cds--pagination__button > svg,
|
| 20407 | [dir=rtl] .cds--btn--ghost.cds--pagination__button > svg {
|
| 20408 | transform: rotate(0.5turn);
|
| 20409 | }
|
| 20410 |
|
| 20411 | .cds--pagination--sm .cds--pagination__button,
|
| 20412 | .cds--pagination--sm .cds--btn--ghost.cds--pagination__button {
|
| 20413 | block-size: 2rem;
|
| 20414 | inline-size: 2rem;
|
| 20415 | }
|
| 20416 |
|
| 20417 | .cds--pagination--lg .cds--pagination__button,
|
| 20418 | .cds--pagination--lg .cds--btn--ghost.cds--pagination__button {
|
| 20419 | block-size: 3rem;
|
| 20420 | inline-size: 3rem;
|
| 20421 | }
|
| 20422 |
|
| 20423 | .cds--pagination__button:focus,
|
| 20424 | .cds--btn--ghost:focus.cds--pagination__button {
|
| 20425 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 20426 | outline-offset: -2px;
|
| 20427 | border-inline-start: 0;
|
| 20428 | }
|
| 20429 | @media screen and (prefers-contrast) {
|
| 20430 | .cds--pagination__button:focus,
|
| 20431 | .cds--btn--ghost:focus.cds--pagination__button {
|
| 20432 | outline-style: dotted;
|
| 20433 | }
|
| 20434 | }
|
| 20435 |
|
| 20436 | .cds--pagination__button:hover,
|
| 20437 | .cds--btn--ghost:hover.cds--pagination__button {
|
| 20438 | background: var(--cds-layer-hover);
|
| 20439 | }
|
| 20440 |
|
| 20441 | .cds--pagination__button--no-index,
|
| 20442 | .cds--btn--ghost.cds--pagination__button--no-index {
|
| 20443 | cursor: not-allowed;
|
| 20444 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 20445 | }
|
| 20446 |
|
| 20447 | .cds--pagination__button:disabled:hover,
|
| 20448 | .cds--pagination__button--no-index:hover,
|
| 20449 | .cds--btn--ghost:disabled:hover.cds--pagination__button,
|
| 20450 | .cds--btn--ghost:hover.cds--pagination__button--no-index {
|
| 20451 | border-color: var(--cds-border-subtle);
|
| 20452 | background: var(--cds-layer);
|
| 20453 | cursor: not-allowed;
|
| 20454 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 20455 | }
|
| 20456 |
|
| 20457 | .cds--pagination.cds--skeleton .cds--skeleton__text {
|
| 20458 | margin-block-end: 0;
|
| 20459 | margin-inline-end: 1rem;
|
| 20460 | }
|
| 20461 |
|
| 20462 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 20463 | .cds--pagination__button,
|
| 20464 | .cds--btn--ghost.cds--pagination__button {
|
| 20465 | outline: 1px solid transparent;
|
| 20466 | }
|
| 20467 | }
|
| 20468 |
|
| 20469 | [dir=rtl] .cds--pagination .cds--select__arrow {
|
| 20470 | transform: translate(0.5rem, -50%);
|
| 20471 | }
|
| 20472 |
|
| 20473 | .cds--unstable-pagination {
|
| 20474 | box-sizing: border-box;
|
| 20475 | padding: 0;
|
| 20476 | border: 0;
|
| 20477 | margin: 0;
|
| 20478 | font-family: inherit;
|
| 20479 | font-size: 100%;
|
| 20480 | vertical-align: baseline;
|
| 20481 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 20482 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 20483 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 20484 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 20485 | display: flex;
|
| 20486 | align-items: center;
|
| 20487 | justify-content: space-between;
|
| 20488 | background-color: var(--cds-layer);
|
| 20489 | border-block-end: 1px solid transparent;
|
| 20490 | border-block-start: 1px solid var(--cds-border-subtle);
|
| 20491 | inline-size: 100%;
|
| 20492 | min-block-size: 2.5rem;
|
| 20493 | }
|
| 20494 | .cds--unstable-pagination *,
|
| 20495 | .cds--unstable-pagination *::before,
|
| 20496 | .cds--unstable-pagination *::after {
|
| 20497 | box-sizing: inherit;
|
| 20498 | }
|
| 20499 |
|
| 20500 | .cds--unstable-pagination__text {
|
| 20501 | margin: 0 1rem;
|
| 20502 | color: var(--cds-text-secondary, #525252);
|
| 20503 | }
|
| 20504 | @media (min-width: 42rem) {
|
| 20505 | .cds--unstable-pagination__text {
|
| 20506 | display: inline-block;
|
| 20507 | }
|
| 20508 | }
|
| 20509 |
|
| 20510 | .cds--unstable-pagination__left,
|
| 20511 | .cds--unstable-pagination__right {
|
| 20512 | display: flex;
|
| 20513 | align-items: center;
|
| 20514 | block-size: 100%;
|
| 20515 | }
|
| 20516 |
|
| 20517 | .cds--unstable-pagination__left {
|
| 20518 | padding: 0 1rem 0 0;
|
| 20519 | }
|
| 20520 |
|
| 20521 | .cds--unstable-pagination__left > .cds--form-item,
|
| 20522 | .cds--unstable-pagination__right > .cds--form-item {
|
| 20523 | block-size: 100%;
|
| 20524 | }
|
| 20525 |
|
| 20526 | .cds--unstable-pagination__left .cds--unstable-pagination__text {
|
| 20527 | margin-inline-end: 0.0625rem;
|
| 20528 | }
|
| 20529 |
|
| 20530 | .cds--unstable-pagination__right .cds--unstable-pagination__text {
|
| 20531 | margin-inline-end: 1rem;
|
| 20532 | margin-inline-start: 0.0625rem;
|
| 20533 | }
|
| 20534 |
|
| 20535 | .cds--unstable-pagination__button {
|
| 20536 | box-sizing: border-box;
|
| 20537 | padding: 0;
|
| 20538 | border: 0;
|
| 20539 | margin: 0;
|
| 20540 | font-family: inherit;
|
| 20541 | font-size: 100%;
|
| 20542 | vertical-align: baseline;
|
| 20543 | display: flex;
|
| 20544 | align-items: center;
|
| 20545 | justify-content: center;
|
| 20546 | border: none;
|
| 20547 | margin: 0;
|
| 20548 | background: none;
|
| 20549 | block-size: 2.5rem;
|
| 20550 | border-inline-start: 1px solid var(--cds-border-subtle);
|
| 20551 | color: var(--cds-icon-primary, #161616);
|
| 20552 | cursor: pointer;
|
| 20553 | fill: var(--cds-icon-primary, #161616);
|
| 20554 | inline-size: 2.5rem;
|
| 20555 | min-block-size: 2rem;
|
| 20556 | transition: outline 110ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 20557 | }
|
| 20558 | .cds--unstable-pagination__button *,
|
| 20559 | .cds--unstable-pagination__button *::before,
|
| 20560 | .cds--unstable-pagination__button *::after {
|
| 20561 | box-sizing: inherit;
|
| 20562 | }
|
| 20563 |
|
| 20564 | .cds--unstable-pagination__button .cds--btn__icon {
|
| 20565 | block-size: initial;
|
| 20566 | inline-size: initial;
|
| 20567 | }
|
| 20568 |
|
| 20569 | .cds--unstable-pagination__button.cds--btn--icon-only.cds--tooltip__trigger:focus {
|
| 20570 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 20571 | outline-offset: -2px;
|
| 20572 | }
|
| 20573 | @media screen and (prefers-contrast) {
|
| 20574 | .cds--unstable-pagination__button.cds--btn--icon-only.cds--tooltip__trigger:focus {
|
| 20575 | outline-style: dotted;
|
| 20576 | }
|
| 20577 | }
|
| 20578 |
|
| 20579 | .cds--unstable-pagination__button:hover {
|
| 20580 | background: var(--cds-layer-hover);
|
| 20581 | color: var(--cds-icon-primary, #161616);
|
| 20582 | }
|
| 20583 |
|
| 20584 | .cds--unstable-pagination__button--no-index {
|
| 20585 | cursor: not-allowed;
|
| 20586 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 20587 | }
|
| 20588 |
|
| 20589 | .cds--unstable-pagination__button.cds--btn:disabled {
|
| 20590 | border-color: var(--cds-border-subtle);
|
| 20591 | background: transparent;
|
| 20592 | }
|
| 20593 |
|
| 20594 | .cds--unstable-pagination__button:disabled:hover,
|
| 20595 | .cds--unstable-pagination__button--no-index:hover {
|
| 20596 | background: transparent;
|
| 20597 | cursor: not-allowed;
|
| 20598 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 20599 | }
|
| 20600 |
|
| 20601 | .cds--unstable-pagination__page-selector,
|
| 20602 | .cds--unstable-pagination__page-sizer {
|
| 20603 | align-items: center;
|
| 20604 | block-size: 100%;
|
| 20605 | }
|
| 20606 |
|
| 20607 | .cds--unstable-pagination__page-selector .cds--select-input--inline__wrapper,
|
| 20608 | .cds--unstable-pagination__page-sizer .cds--select-input--inline__wrapper {
|
| 20609 | display: flex;
|
| 20610 | block-size: 100%;
|
| 20611 | }
|
| 20612 |
|
| 20613 | .cds--unstable-pagination__page-selector .cds--select-input,
|
| 20614 | .cds--unstable-pagination__page-sizer .cds--select-input {
|
| 20615 | font-size: var(--cds-body-short-01-font-size, 0.875rem);
|
| 20616 | font-weight: var(--cds-body-short-01-font-weight, 400);
|
| 20617 | line-height: var(--cds-body-short-01-line-height, 1.28572);
|
| 20618 | letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
|
| 20619 | padding: 0 2.25rem 0 1rem;
|
| 20620 | block-size: 100%;
|
| 20621 | inline-size: auto;
|
| 20622 | line-height: 2.5rem;
|
| 20623 | min-inline-size: auto;
|
| 20624 | }
|
| 20625 |
|
| 20626 | .cds--unstable-pagination__page-selector .cds--select-input:hover,
|
| 20627 | .cds--unstable-pagination__page-sizer .cds--select-input:hover {
|
| 20628 | background: var(--cds-layer-hover);
|
| 20629 | }
|
| 20630 |
|
| 20631 | .cds--unstable-pagination__page-selector .cds--select__arrow,
|
| 20632 | .cds--unstable-pagination__page-sizer .cds--select__arrow {
|
| 20633 | inset-block-start: 50%;
|
| 20634 | transform: translateY(-50%);
|
| 20635 | }
|
| 20636 | @media (min-width: 42rem) {
|
| 20637 | .cds--unstable-pagination__page-selector .cds--select__arrow,
|
| 20638 | .cds--unstable-pagination__page-sizer .cds--select__arrow {
|
| 20639 | inset-inline-end: 1rem;
|
| 20640 | }
|
| 20641 | }
|
| 20642 |
|
| 20643 | .cds--unstable-pagination__page-selector {
|
| 20644 | border-inline-start: 1px solid var(--cds-border-subtle);
|
| 20645 | }
|
| 20646 |
|
| 20647 | .cds--unstable-pagination__page-sizer {
|
| 20648 | border-inline-end: 1px solid var(--cds-border-subtle);
|
| 20649 | }
|
| 20650 |
|
| 20651 | .cds--pagination-nav {
|
| 20652 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 20653 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 20654 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 20655 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 20656 | line-height: 0;
|
| 20657 | }
|
| 20658 | .cds--pagination-nav html {
|
| 20659 | font-size: 100%;
|
| 20660 | }
|
| 20661 | .cds--pagination-nav body {
|
| 20662 | font-weight: 400;
|
| 20663 | font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
|
| 20664 | -moz-osx-font-smoothing: grayscale;
|
| 20665 | -webkit-font-smoothing: antialiased;
|
| 20666 | text-rendering: optimizeLegibility;
|
| 20667 | }
|
| 20668 | .cds--pagination-nav code {
|
| 20669 | font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
|
| 20670 | }
|
| 20671 | .cds--pagination-nav strong {
|
| 20672 | font-weight: 600;
|
| 20673 | }
|
| 20674 |
|
| 20675 | .cds--pagination-nav__list {
|
| 20676 | display: flex;
|
| 20677 | align-items: center;
|
| 20678 | list-style: none;
|
| 20679 | }
|
| 20680 |
|
| 20681 | .cds--pagination-nav__list-item {
|
| 20682 | padding: 0;
|
| 20683 | }
|
| 20684 | .cds--pagination-nav__list-item:first-child {
|
| 20685 | padding-inline-start: 0;
|
| 20686 | }
|
| 20687 | .cds--pagination-nav__list-item:last-child {
|
| 20688 | padding-inline-end: 0;
|
| 20689 | }
|
| 20690 |
|
| 20691 | .cds--pagination-nav__page {
|
| 20692 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 20693 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 20694 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 20695 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 20696 | box-sizing: border-box;
|
| 20697 | padding: 0;
|
| 20698 | border: 0;
|
| 20699 | margin: 0;
|
| 20700 | font-family: inherit;
|
| 20701 | font-size: 100%;
|
| 20702 | vertical-align: baseline;
|
| 20703 | display: inline-block;
|
| 20704 | padding: 0;
|
| 20705 | border: 0;
|
| 20706 | -webkit-appearance: none;
|
| 20707 | -moz-appearance: none;
|
| 20708 | appearance: none;
|
| 20709 | background: none;
|
| 20710 | cursor: pointer;
|
| 20711 | text-align: start;
|
| 20712 | position: relative;
|
| 20713 | display: block;
|
| 20714 | padding: 1.0625rem 0.25rem;
|
| 20715 | border-radius: 0;
|
| 20716 | color: var(--cds-text-primary, #161616);
|
| 20717 | font-weight: 400;
|
| 20718 | line-height: 1;
|
| 20719 | min-inline-size: 3rem;
|
| 20720 | outline: 0;
|
| 20721 | text-align: center;
|
| 20722 | text-decoration: none;
|
| 20723 | transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9), color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 20724 | -webkit-user-select: none;
|
| 20725 | -moz-user-select: none;
|
| 20726 | user-select: none;
|
| 20727 | }
|
| 20728 | .cds--pagination-nav__page *,
|
| 20729 | .cds--pagination-nav__page *::before,
|
| 20730 | .cds--pagination-nav__page *::after {
|
| 20731 | box-sizing: inherit;
|
| 20732 | }
|
| 20733 | .cds--pagination-nav__page::-moz-focus-inner {
|
| 20734 | border: 0;
|
| 20735 | }
|
| 20736 | .cds--pagination-nav__page:hover {
|
| 20737 | background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
|
| 20738 | color: var(--cds-text-primary, #161616);
|
| 20739 | }
|
| 20740 | .cds--pagination-nav__page:focus {
|
| 20741 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 20742 | outline-offset: -2px;
|
| 20743 | }
|
| 20744 | @media screen and (prefers-contrast) {
|
| 20745 | .cds--pagination-nav__page:focus {
|
| 20746 | outline-style: dotted;
|
| 20747 | }
|
| 20748 | }
|
| 20749 | .cds--pagination-nav__page:disabled, .cds--pagination-nav__page.cds--pagination-nav__page--disabled {
|
| 20750 | background: none;
|
| 20751 | color: rgba(var(--cds-text-secondary, #525252), 0.5);
|
| 20752 | outline: none;
|
| 20753 | pointer-events: none;
|
| 20754 | }
|
| 20755 | .cds--pagination-nav__page:not(.cds--pagination-nav__page--direction)::after {
|
| 20756 | position: absolute;
|
| 20757 | display: block;
|
| 20758 | background-color: var(--cds-border-interactive, #0f62fe);
|
| 20759 | block-size: 0.25rem;
|
| 20760 | content: "";
|
| 20761 | inline-size: 0;
|
| 20762 | inset-block-end: 0;
|
| 20763 | inset-inline-start: 50%;
|
| 20764 | opacity: 0;
|
| 20765 | transition: width 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 20766 | }
|
| 20767 | @media screen and (prefers-reduced-motion: reduce) {
|
| 20768 | .cds--pagination-nav__page:not(.cds--pagination-nav__page--direction)::after {
|
| 20769 | transition: none;
|
| 20770 | }
|
| 20771 | }
|
| 20772 | .cds--pagination-nav__page--active + .cds--pagination-nav__page::after, .cds--pagination-nav__page.cds--pagination-nav__page--active::after {
|
| 20773 | inline-size: 1rem;
|
| 20774 | inset-inline-start: calc(50% - 0.5rem);
|
| 20775 | opacity: 1;
|
| 20776 | }
|
| 20777 | .cds--pagination-nav__page.cds--pagination-nav__page--active {
|
| 20778 | background-color: initial;
|
| 20779 | color: var(--cds-text-primary, #161616);
|
| 20780 | font-weight: 600;
|
| 20781 | }
|
| 20782 | .cds--pagination-nav__page .cds--pagination-nav__icon {
|
| 20783 | fill: currentColor;
|
| 20784 | pointer-events: none;
|
| 20785 | }
|
| 20786 |
|
| 20787 | .cds--pagination-nav__page--direction {
|
| 20788 | display: flex;
|
| 20789 | align-items: center;
|
| 20790 | justify-content: center;
|
| 20791 | block-size: 3rem;
|
| 20792 | inline-size: 3rem;
|
| 20793 | line-height: 0;
|
| 20794 | }
|
| 20795 |
|
| 20796 | .cds--pagination-nav__select {
|
| 20797 | position: relative;
|
| 20798 | }
|
| 20799 |
|
| 20800 | .cds--pagination-nav__page--select {
|
| 20801 | -webkit-appearance: none;
|
| 20802 | -moz-appearance: none;
|
| 20803 | appearance: none;
|
| 20804 | max-block-size: 3rem;
|
| 20805 | text-indent: calc(50% - 4.5px);
|
| 20806 | }
|
| 20807 | @-moz-document url-prefix() {
|
| 20808 | .cds--pagination-nav__page--select {
|
| 20809 | text-indent: 0;
|
| 20810 | }
|
| 20811 | }
|
| 20812 |
|
| 20813 | .cds--pagination-nav__select-icon-wrapper {
|
| 20814 | position: absolute;
|
| 20815 | block-size: 100%;
|
| 20816 | inline-size: 100%;
|
| 20817 | inset-block-start: 0;
|
| 20818 | pointer-events: none;
|
| 20819 | }
|
| 20820 | .cds--pagination-nav__select-icon-wrapper:not(.cds--pagination-nav__page--direction)::after {
|
| 20821 | position: absolute;
|
| 20822 | display: block;
|
| 20823 | background-color: var(--cds-border-interactive, #0f62fe);
|
| 20824 | block-size: 0.25rem;
|
| 20825 | content: "";
|
| 20826 | inline-size: 0;
|
| 20827 | inset-block-end: 0;
|
| 20828 | inset-inline-start: 50%;
|
| 20829 | opacity: 0;
|
| 20830 | transition: width 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 20831 | }
|
| 20832 | @media screen and (prefers-reduced-motion: reduce) {
|
| 20833 | .cds--pagination-nav__select-icon-wrapper:not(.cds--pagination-nav__page--direction)::after {
|
| 20834 | transition: none;
|
| 20835 | }
|
| 20836 | }
|
| 20837 | .cds--pagination-nav__page--active + .cds--pagination-nav__select-icon-wrapper::after, .cds--pagination-nav__select-icon-wrapper.cds--pagination-nav__page--active::after {
|
| 20838 | inline-size: 1rem;
|
| 20839 | inset-inline-start: calc(50% - 0.5rem);
|
| 20840 | opacity: 1;
|
| 20841 | }
|
| 20842 | .cds--pagination-nav__page--active + .cds--pagination-nav__select-icon-wrapper .cds--pagination-nav__select-icon {
|
| 20843 | display: none;
|
| 20844 | }
|
| 20845 |
|
| 20846 | .cds--pagination-nav__select-icon {
|
| 20847 | position: absolute;
|
| 20848 | inset-block-start: calc(50% - 0.5rem);
|
| 20849 | inset-inline-start: calc(50% - 0.5rem);
|
| 20850 | pointer-events: none;
|
| 20851 | }
|
| 20852 |
|
| 20853 | .cds--pagination-nav__accessibility-label {
|
| 20854 | position: absolute;
|
| 20855 | overflow: hidden;
|
| 20856 | padding: 0;
|
| 20857 | border: 0;
|
| 20858 | margin: -1px;
|
| 20859 | block-size: 1px;
|
| 20860 | clip: rect(0, 0, 0, 0);
|
| 20861 | inline-size: 1px;
|
| 20862 | visibility: inherit;
|
| 20863 | white-space: nowrap;
|
| 20864 | }
|
| 20865 |
|
| 20866 | [dir=rtl] .cds--pagination-nav__list-item svg {
|
| 20867 | transform: rotate(0.5turn);
|
| 20868 | }
|
| 20869 |
|
| 20870 | .cds--progress-bar {
|
| 20871 | --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
|
| 20872 | }
|
| 20873 |
|
| 20874 | .cds--progress-bar__label {
|
| 20875 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 20876 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 20877 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 20878 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 20879 | display: flex;
|
| 20880 | justify-content: space-between;
|
| 20881 | color: var(--cds-text-primary, #161616);
|
| 20882 | margin-block-end: 0.5rem;
|
| 20883 | min-inline-size: 3rem;
|
| 20884 | }
|
| 20885 |
|
| 20886 | .cds--progress-bar__label-text {
|
| 20887 | overflow: hidden;
|
| 20888 | text-overflow: ellipsis;
|
| 20889 | white-space: nowrap;
|
| 20890 | }
|
| 20891 |
|
| 20892 | .cds--progress-bar__track {
|
| 20893 | position: relative;
|
| 20894 | background-color: var(--cds-layer);
|
| 20895 | block-size: 0.5rem;
|
| 20896 | inline-size: 100%;
|
| 20897 | min-inline-size: 3rem;
|
| 20898 | }
|
| 20899 |
|
| 20900 | .cds--progress-bar--big .cds--progress-bar__track {
|
| 20901 | block-size: 0.5rem;
|
| 20902 | }
|
| 20903 |
|
| 20904 | .cds--progress-bar--small .cds--progress-bar__track {
|
| 20905 | block-size: 0.25rem;
|
| 20906 | }
|
| 20907 |
|
| 20908 | .cds--progress-bar__bar {
|
| 20909 | display: block;
|
| 20910 | background-color: currentColor;
|
| 20911 | block-size: 100%;
|
| 20912 | color: var(--cds-interactive, #0f62fe);
|
| 20913 | inline-size: 100%;
|
| 20914 | transform: scaleX(0);
|
| 20915 | transform-origin: 0 center;
|
| 20916 | transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 20917 | }
|
| 20918 |
|
| 20919 | [dir=rtl] .cds--progress-bar__bar {
|
| 20920 | transform-origin: 100% center;
|
| 20921 | }
|
| 20922 |
|
| 20923 | .cds--progress-bar--indeterminate .cds--progress-bar__track::after {
|
| 20924 | position: absolute;
|
| 20925 | animation-duration: 1400ms;
|
| 20926 | animation-iteration-count: infinite;
|
| 20927 | animation-name: cds--progress-bar-indeterminate;
|
| 20928 | animation-timing-function: linear;
|
| 20929 | background-image: linear-gradient(90deg, var(--cds-interactive, #0f62fe) 12.5%, transparent 12.5%);
|
| 20930 | background-position-x: 0%;
|
| 20931 | background-size: 200% 100%;
|
| 20932 | content: "";
|
| 20933 | inset: 0;
|
| 20934 | }
|
| 20935 |
|
| 20936 | [dir=rtl] .cds--progress-bar--indeterminate .cds--progress-bar__track::after {
|
| 20937 | animation-name: cds--progress-bar-indeterminate-rtl;
|
| 20938 | }
|
| 20939 |
|
| 20940 | .cds--progress-bar__helper-text {
|
| 20941 | font-size: var(--cds-helper-text-01-font-size, 0.75rem);
|
| 20942 | line-height: var(--cds-helper-text-01-line-height, 1.33333);
|
| 20943 | letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
|
| 20944 | color: var(--cds-text-secondary, #525252);
|
| 20945 | margin-block-start: 0.5rem;
|
| 20946 | }
|
| 20947 |
|
| 20948 | .cds--progress-bar__status-icon {
|
| 20949 | flex-shrink: 0;
|
| 20950 | margin-inline-start: var(--cds-layout-density-padding-inline-local);
|
| 20951 | }
|
| 20952 |
|
| 20953 | .cds--progress-bar--finished .cds--progress-bar__bar,
|
| 20954 | .cds--progress-bar--finished .cds--progress-bar__status-icon {
|
| 20955 | color: var(--cds-support-success, #24a148);
|
| 20956 | }
|
| 20957 |
|
| 20958 | .cds--progress-bar--error .cds--progress-bar__bar,
|
| 20959 | .cds--progress-bar--error .cds--progress-bar__status-icon,
|
| 20960 | .cds--progress-bar--error .cds--progress-bar__helper-text {
|
| 20961 | color: var(--cds-support-error, #da1e28);
|
| 20962 | }
|
| 20963 |
|
| 20964 | .cds--progress-bar--finished .cds--progress-bar__bar,
|
| 20965 | .cds--progress-bar--error .cds--progress-bar__bar {
|
| 20966 | transform: scaleX(1);
|
| 20967 | }
|
| 20968 |
|
| 20969 | .cds--progress-bar--finished.cds--progress-bar--inline .cds--progress-bar__track,
|
| 20970 | .cds--progress-bar--error.cds--progress-bar--inline .cds--progress-bar__track {
|
| 20971 | position: absolute;
|
| 20972 | overflow: hidden;
|
| 20973 | padding: 0;
|
| 20974 | border: 0;
|
| 20975 | margin: -1px;
|
| 20976 | block-size: 1px;
|
| 20977 | clip: rect(0, 0, 0, 0);
|
| 20978 | inline-size: 1px;
|
| 20979 | visibility: inherit;
|
| 20980 | white-space: nowrap;
|
| 20981 | }
|
| 20982 |
|
| 20983 | .cds--progress-bar--finished.cds--progress-bar--inline .cds--progress-bar__label,
|
| 20984 | .cds--progress-bar--error.cds--progress-bar--inline .cds--progress-bar__label {
|
| 20985 | flex-shrink: 1;
|
| 20986 | justify-content: flex-start;
|
| 20987 | margin-inline-end: 0;
|
| 20988 | }
|
| 20989 |
|
| 20990 | @keyframes cds--progress-bar-indeterminate {
|
| 20991 | 0% {
|
| 20992 | background-position-x: 25%;
|
| 20993 | }
|
| 20994 | 80%, 100% {
|
| 20995 | background-position-x: -105%;
|
| 20996 | }
|
| 20997 | }
|
| 20998 | @keyframes cds--progress-bar-indeterminate-rtl {
|
| 20999 | 0% {
|
| 21000 | background-position-x: -105%;
|
| 21001 | }
|
| 21002 | 80%, 100% {
|
| 21003 | background-position-x: 25%;
|
| 21004 | }
|
| 21005 | }
|
| 21006 | .cds--progress-bar--inline {
|
| 21007 | display: flex;
|
| 21008 | align-items: center;
|
| 21009 | }
|
| 21010 |
|
| 21011 | .cds--progress-bar--inline .cds--progress-bar__label {
|
| 21012 | flex-shrink: 0;
|
| 21013 | margin-block-end: 0;
|
| 21014 | margin-inline-end: var(--cds-layout-density-padding-inline-local);
|
| 21015 | }
|
| 21016 |
|
| 21017 | .cds--progress-bar--inline .cds--progress-bar__track {
|
| 21018 | flex-basis: 0;
|
| 21019 | flex-grow: 1;
|
| 21020 | }
|
| 21021 |
|
| 21022 | .cds--progress-bar--inline .cds--progress-bar__helper-text {
|
| 21023 | position: absolute;
|
| 21024 | overflow: hidden;
|
| 21025 | padding: 0;
|
| 21026 | border: 0;
|
| 21027 | margin: -1px;
|
| 21028 | block-size: 1px;
|
| 21029 | clip: rect(0, 0, 0, 0);
|
| 21030 | inline-size: 1px;
|
| 21031 | visibility: inherit;
|
| 21032 | white-space: nowrap;
|
| 21033 | }
|
| 21034 |
|
| 21035 | .cds--progress-bar--indented .cds--progress-bar__label,
|
| 21036 | .cds--progress-bar--indented .cds--progress-bar__helper-text {
|
| 21037 | padding-inline: var(--cds-layout-density-padding-inline-local);
|
| 21038 | }
|
| 21039 |
|
| 21040 | .cds--progress {
|
| 21041 | box-sizing: border-box;
|
| 21042 | padding: 0;
|
| 21043 | border: 0;
|
| 21044 | margin: 0;
|
| 21045 | font-family: inherit;
|
| 21046 | font-size: 100%;
|
| 21047 | vertical-align: baseline;
|
| 21048 | display: flex;
|
| 21049 | list-style: none;
|
| 21050 | }
|
| 21051 | .cds--progress *,
|
| 21052 | .cds--progress *::before,
|
| 21053 | .cds--progress *::after {
|
| 21054 | box-sizing: inherit;
|
| 21055 | }
|
| 21056 |
|
| 21057 | .cds--progress-step {
|
| 21058 | position: relative;
|
| 21059 | display: inline-flex;
|
| 21060 | overflow: visible;
|
| 21061 | flex-direction: row;
|
| 21062 | inline-size: 8rem;
|
| 21063 | min-inline-size: 7rem;
|
| 21064 | }
|
| 21065 | .cds--progress-step .cds--tooltip__label {
|
| 21066 | display: block;
|
| 21067 | }
|
| 21068 |
|
| 21069 | .cds--progress--space-equal .cds--progress-step {
|
| 21070 | flex-grow: 1;
|
| 21071 | min-inline-size: 8rem;
|
| 21072 | }
|
| 21073 |
|
| 21074 | .cds--progress-line {
|
| 21075 | position: absolute;
|
| 21076 | border: 1px inset transparent;
|
| 21077 | block-size: 2px;
|
| 21078 | inline-size: 8rem;
|
| 21079 | inset-inline-start: 0;
|
| 21080 | }
|
| 21081 |
|
| 21082 | .cds--progress--space-equal .cds--progress-line {
|
| 21083 | inline-size: 100%;
|
| 21084 | min-inline-size: 8rem;
|
| 21085 | }
|
| 21086 |
|
| 21087 | .cds--progress-step svg {
|
| 21088 | position: relative;
|
| 21089 | z-index: 1;
|
| 21090 | flex-shrink: 0;
|
| 21091 | border-radius: 50%;
|
| 21092 | block-size: 1rem;
|
| 21093 | fill: var(--cds-interactive, #0f62fe);
|
| 21094 | inline-size: 1rem;
|
| 21095 | margin-block-start: 0.625rem;
|
| 21096 | margin-inline-end: 0.5rem;
|
| 21097 | }
|
| 21098 |
|
| 21099 | .cds--progress--space-equal .cds--progress-text {
|
| 21100 | overflow: hidden;
|
| 21101 | }
|
| 21102 |
|
| 21103 | .cds--progress-label {
|
| 21104 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 21105 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 21106 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 21107 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 21108 | overflow: hidden;
|
| 21109 | margin: 0.5rem 0 0 0;
|
| 21110 | color: var(--cds-text-primary, #161616);
|
| 21111 | line-height: 1.45;
|
| 21112 | max-inline-size: 5.5rem;
|
| 21113 | text-overflow: ellipsis;
|
| 21114 | transition: box-shadow 110ms cubic-bezier(0.2, 0, 0.38, 0.9), color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 21115 | white-space: nowrap;
|
| 21116 | }
|
| 21117 | .cds--progress-label::before {
|
| 21118 | display: block;
|
| 21119 | content: "";
|
| 21120 | }
|
| 21121 |
|
| 21122 | .cds--progress-label:hover {
|
| 21123 | box-shadow: 0 0.0625rem var(--cds-link-primary-hover, #0043ce);
|
| 21124 | color: var(--cds-link-primary-hover, #0043ce);
|
| 21125 | cursor: pointer;
|
| 21126 | }
|
| 21127 |
|
| 21128 | .cds--progress--space-equal .cds--progress-label {
|
| 21129 | margin-inline-end: 0.75rem;
|
| 21130 | max-inline-size: 100%;
|
| 21131 | }
|
| 21132 |
|
| 21133 | .cds--progress-step-button:not(.cds--progress-step-button--unclickable):focus {
|
| 21134 | outline: none;
|
| 21135 | }
|
| 21136 | .cds--progress-step-button:not(.cds--progress-step-button--unclickable):focus-visible .cds--progress-label {
|
| 21137 | color: var(--cds-focus, #0f62fe);
|
| 21138 | outline: 0.0625rem solid var(--cds-focus, #0f62fe);
|
| 21139 | }
|
| 21140 | .cds--progress-step-button:not(.cds--progress-step-button--unclickable) .cds--progress-label:active {
|
| 21141 | box-shadow: 0 0.0625rem 0 0 var(--cds-text-primary, #161616);
|
| 21142 | color: var(--cds-text-primary, #161616);
|
| 21143 | }
|
| 21144 |
|
| 21145 | .cds--progress-label-overflow:hover ~ .cds--tooltip,
|
| 21146 | .cds--progress-label-overflow:focus ~ .cds--tooltip {
|
| 21147 | visibility: inherit;
|
| 21148 | }
|
| 21149 |
|
| 21150 | .cds--progress-step .cds--tooltip .cds--tooltip__caret {
|
| 21151 | margin-inline-start: 0.625rem;
|
| 21152 | }
|
| 21153 |
|
| 21154 | .cds--tooltip__text {
|
| 21155 | padding: 0;
|
| 21156 | margin: 0;
|
| 21157 | font-weight: normal;
|
| 21158 | }
|
| 21159 |
|
| 21160 | .cds--progress-step .cds--tooltip {
|
| 21161 | font-size: var(--cds-body-01-font-size, 0.875rem);
|
| 21162 | font-weight: var(--cds-body-01-font-weight, 400);
|
| 21163 | line-height: var(--cds-body-01-line-height, 1.42857);
|
| 21164 | letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
|
| 21165 | display: block;
|
| 21166 | padding: 0.5rem 1rem;
|
| 21167 | color: var(--cds-text-inverse, #ffffff);
|
| 21168 | inline-size: 7.8125rem;
|
| 21169 | margin-block-start: 2.5rem;
|
| 21170 | margin-inline-start: 1.375rem;
|
| 21171 | min-block-size: 1.5rem;
|
| 21172 | min-inline-size: 7.1875rem;
|
| 21173 | visibility: hidden;
|
| 21174 | }
|
| 21175 |
|
| 21176 | .cds--progress-step .cds--tooltip_multi {
|
| 21177 | font-size: var(--cds-body-01-font-size, 0.875rem);
|
| 21178 | font-weight: var(--cds-body-01-font-weight, 400);
|
| 21179 | line-height: var(--cds-body-01-line-height, 1.42857);
|
| 21180 | letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
|
| 21181 | block-size: auto;
|
| 21182 | color: var(--cds-text-inverse, #ffffff);
|
| 21183 | inline-size: 9.375rem;
|
| 21184 | }
|
| 21185 |
|
| 21186 | .cds--progress-optional {
|
| 21187 | font-size: var(--cds-label-01-font-size, 0.75rem);
|
| 21188 | font-weight: var(--cds-label-01-font-weight, 400);
|
| 21189 | line-height: var(--cds-label-01-line-height, 1.33333);
|
| 21190 | letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
|
| 21191 | position: absolute;
|
| 21192 | color: var(--cds-text-secondary, #525252);
|
| 21193 | inset-inline-start: 0;
|
| 21194 | margin-block-start: 1.75rem;
|
| 21195 | margin-inline-start: 1.5rem;
|
| 21196 | text-align: start;
|
| 21197 | }
|
| 21198 |
|
| 21199 | .cds--progress-step--current .cds--progress-line {
|
| 21200 | background-color: var(--cds-interactive, #0f62fe);
|
| 21201 | }
|
| 21202 |
|
| 21203 | .cds--progress-step--incomplete svg {
|
| 21204 | fill: var(--cds-icon-primary, #161616);
|
| 21205 | }
|
| 21206 | .cds--progress-step--incomplete .cds--progress-line {
|
| 21207 | background-color: var(--cds-border-subtle);
|
| 21208 | }
|
| 21209 |
|
| 21210 | .cds--progress-step--complete .cds--progress-line {
|
| 21211 | background-color: var(--cds-interactive, #0f62fe);
|
| 21212 | }
|
| 21213 |
|
| 21214 | .cds--progress-step-button {
|
| 21215 | box-sizing: border-box;
|
| 21216 | padding: 0;
|
| 21217 | border: 0;
|
| 21218 | margin: 0;
|
| 21219 | font-family: inherit;
|
| 21220 | font-size: 100%;
|
| 21221 | vertical-align: baseline;
|
| 21222 | display: inline-block;
|
| 21223 | padding: 0;
|
| 21224 | border: 0;
|
| 21225 | -webkit-appearance: none;
|
| 21226 | -moz-appearance: none;
|
| 21227 | appearance: none;
|
| 21228 | background: none;
|
| 21229 | cursor: pointer;
|
| 21230 | text-align: start;
|
| 21231 | inline-size: 100%;
|
| 21232 | display: flex;
|
| 21233 | text-align: start;
|
| 21234 | }
|
| 21235 | .cds--progress-step-button *,
|
| 21236 | .cds--progress-step-button *::before,
|
| 21237 | .cds--progress-step-button *::after {
|
| 21238 | box-sizing: inherit;
|
| 21239 | }
|
| 21240 | .cds--progress-step-button::-moz-focus-inner {
|
| 21241 | border: 0;
|
| 21242 | }
|
| 21243 |
|
| 21244 | .cds--progress-step-button--unclickable {
|
| 21245 | cursor: default;
|
| 21246 | outline: none;
|
| 21247 | }
|
| 21248 |
|
| 21249 | .cds--progress-step-button--unclickable .cds--progress-label:hover {
|
| 21250 | box-shadow: none;
|
| 21251 | color: var(--cds-text-primary, #161616);
|
| 21252 | cursor: default;
|
| 21253 | }
|
| 21254 |
|
| 21255 | .cds--progress-step-button--unclickable .cds--tooltip__label:hover {
|
| 21256 | box-shadow: 0 0.0625rem var(--cds-link-primary, #0f62fe);
|
| 21257 | color: var(--cds-link-primary, #0f62fe);
|
| 21258 | cursor: pointer;
|
| 21259 | }
|
| 21260 |
|
| 21261 | .cds--progress-step--disabled {
|
| 21262 | cursor: not-allowed;
|
| 21263 | pointer-events: none;
|
| 21264 | }
|
| 21265 | .cds--progress-step--disabled svg {
|
| 21266 | cursor: not-allowed;
|
| 21267 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 21268 | }
|
| 21269 | .cds--progress-step--disabled .cds--progress-label,
|
| 21270 | .cds--progress-step--disabled .cds--progress-label:hover {
|
| 21271 | box-shadow: none;
|
| 21272 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 21273 | cursor: not-allowed;
|
| 21274 | }
|
| 21275 | .cds--progress-step--disabled .cds--progress-line {
|
| 21276 | cursor: not-allowed;
|
| 21277 | }
|
| 21278 | .cds--progress-step--disabled .cds--progress-label-overflow:hover ~ .cds--tooltip--definition .cds--tooltip--definition__bottom {
|
| 21279 | display: none;
|
| 21280 | }
|
| 21281 |
|
| 21282 | .cds--progress__warning > * {
|
| 21283 | fill: var(--cds-support-error, #da1e28);
|
| 21284 | }
|
| 21285 |
|
| 21286 | .cds--progress.cds--skeleton .cds--progress-label {
|
| 21287 | position: relative;
|
| 21288 | padding: 0;
|
| 21289 | border: none;
|
| 21290 | background: var(--cds-skeleton-background, #e8e8e8);
|
| 21291 | box-shadow: none;
|
| 21292 | pointer-events: none;
|
| 21293 | block-size: 0.875rem;
|
| 21294 | inline-size: 2.5rem;
|
| 21295 | margin-block-start: 0.625rem;
|
| 21296 | }
|
| 21297 | .cds--progress.cds--skeleton .cds--progress-label:hover, .cds--progress.cds--skeleton .cds--progress-label:focus, .cds--progress.cds--skeleton .cds--progress-label:active {
|
| 21298 | border: none;
|
| 21299 | cursor: default;
|
| 21300 | outline: none;
|
| 21301 | }
|
| 21302 | .cds--progress.cds--skeleton .cds--progress-label::before {
|
| 21303 | position: absolute;
|
| 21304 | animation: 3000ms ease-in-out cds--skeleton infinite;
|
| 21305 | background: var(--cds-skeleton-element, #c6c6c6);
|
| 21306 | block-size: 100%;
|
| 21307 | content: "";
|
| 21308 | inline-size: 100%;
|
| 21309 | will-change: transform-origin, transform, opacity;
|
| 21310 | }
|
| 21311 | @media (prefers-reduced-motion: reduce) {
|
| 21312 | .cds--progress.cds--skeleton .cds--progress-label::before {
|
| 21313 | animation: none;
|
| 21314 | }
|
| 21315 | }
|
| 21316 |
|
| 21317 | .cds--progress.cds--progress--vertical.cds--skeleton .cds--progress-label {
|
| 21318 | margin-block-start: 0.0625rem;
|
| 21319 | }
|
| 21320 |
|
| 21321 | .cds--progress--vertical {
|
| 21322 | display: flex;
|
| 21323 | flex-direction: column;
|
| 21324 | }
|
| 21325 |
|
| 21326 | .cds--progress--vertical,
|
| 21327 | .cds--progress-text {
|
| 21328 | display: flex;
|
| 21329 | flex-direction: column;
|
| 21330 | }
|
| 21331 |
|
| 21332 | .cds--progress--vertical .cds--progress-step,
|
| 21333 | .cds--progress--vertical .cds--progress-step-button {
|
| 21334 | align-content: flex-start;
|
| 21335 | inline-size: initial;
|
| 21336 | min-block-size: 3.625rem;
|
| 21337 | min-inline-size: initial;
|
| 21338 | }
|
| 21339 |
|
| 21340 | .cds--progress--vertical .cds--progress-step svg,
|
| 21341 | .cds--progress--vertical .cds--progress-step-button svg {
|
| 21342 | display: inline-block;
|
| 21343 | margin: 0.0625rem 0.5rem 0;
|
| 21344 | }
|
| 21345 |
|
| 21346 | .cds--progress--vertical .cds--progress-label {
|
| 21347 | display: inline-block;
|
| 21348 | margin: 0;
|
| 21349 | inline-size: initial;
|
| 21350 | max-inline-size: 10rem;
|
| 21351 | vertical-align: top;
|
| 21352 | white-space: initial;
|
| 21353 | }
|
| 21354 |
|
| 21355 | .cds--progress--vertical .cds--progress-step .cds--tooltip {
|
| 21356 | margin-block-start: 0.5rem;
|
| 21357 | }
|
| 21358 |
|
| 21359 | .cds--progress--vertical .cds--progress-optional {
|
| 21360 | position: static;
|
| 21361 | margin: 0 0 auto;
|
| 21362 | inline-size: 100%;
|
| 21363 | }
|
| 21364 |
|
| 21365 | .cds--progress--vertical .cds--progress-line {
|
| 21366 | position: absolute;
|
| 21367 | block-size: 100%;
|
| 21368 | inline-size: 1px;
|
| 21369 | inset-block-start: 0;
|
| 21370 | inset-inline-start: 0;
|
| 21371 | }
|
| 21372 |
|
| 21373 | @keyframes ai-skeleton-animation {
|
| 21374 | 0% {
|
| 21375 | transform: translateX(-100%);
|
| 21376 | }
|
| 21377 | 100% {
|
| 21378 | transform: translateX(100%);
|
| 21379 | }
|
| 21380 | }
|
| 21381 | .cds--icon--skeleton {
|
| 21382 | position: relative;
|
| 21383 | padding: 0;
|
| 21384 | border: none;
|
| 21385 | background: var(--cds-skeleton-background, #e8e8e8);
|
| 21386 | box-shadow: none;
|
| 21387 | pointer-events: none;
|
| 21388 | display: inline-block;
|
| 21389 | block-size: 1rem;
|
| 21390 | inline-size: 1rem;
|
| 21391 | }
|
| 21392 | .cds--icon--skeleton:hover, .cds--icon--skeleton:focus, .cds--icon--skeleton:active {
|
| 21393 | border: none;
|
| 21394 | cursor: default;
|
| 21395 | outline: none;
|
| 21396 | }
|
| 21397 | .cds--icon--skeleton::before {
|
| 21398 | position: absolute;
|
| 21399 | animation: 3000ms ease-in-out cds--skeleton infinite;
|
| 21400 | background: var(--cds-skeleton-element, #c6c6c6);
|
| 21401 | block-size: 100%;
|
| 21402 | content: "";
|
| 21403 | inline-size: 100%;
|
| 21404 | will-change: transform-origin, transform, opacity;
|
| 21405 | }
|
| 21406 | @media (prefers-reduced-motion: reduce) {
|
| 21407 | .cds--icon--skeleton::before {
|
| 21408 | animation: none;
|
| 21409 | }
|
| 21410 | }
|
| 21411 |
|
| 21412 | .cds--skeleton__placeholder {
|
| 21413 | position: relative;
|
| 21414 | padding: 0;
|
| 21415 | border: none;
|
| 21416 | background: var(--cds-skeleton-background, #e8e8e8);
|
| 21417 | box-shadow: none;
|
| 21418 | pointer-events: none;
|
| 21419 | block-size: 6.25rem;
|
| 21420 | inline-size: 6.25rem;
|
| 21421 | }
|
| 21422 | .cds--skeleton__placeholder:hover, .cds--skeleton__placeholder:focus, .cds--skeleton__placeholder:active {
|
| 21423 | border: none;
|
| 21424 | cursor: default;
|
| 21425 | outline: none;
|
| 21426 | }
|
| 21427 | .cds--skeleton__placeholder::before {
|
| 21428 | position: absolute;
|
| 21429 | animation: 3000ms ease-in-out cds--skeleton infinite;
|
| 21430 | background: var(--cds-skeleton-element, #c6c6c6);
|
| 21431 | block-size: 100%;
|
| 21432 | content: "";
|
| 21433 | inline-size: 100%;
|
| 21434 | will-change: transform-origin, transform, opacity;
|
| 21435 | }
|
| 21436 | @media (prefers-reduced-motion: reduce) {
|
| 21437 | .cds--skeleton__placeholder::before {
|
| 21438 | animation: none;
|
| 21439 | }
|
| 21440 | }
|
| 21441 |
|
| 21442 | .cds--skeleton__text {
|
| 21443 | position: relative;
|
| 21444 | padding: 0;
|
| 21445 | border: none;
|
| 21446 | background: var(--cds-skeleton-background, #e8e8e8);
|
| 21447 | box-shadow: none;
|
| 21448 | pointer-events: none;
|
| 21449 | block-size: 1rem;
|
| 21450 | inline-size: 100%;
|
| 21451 | margin-block-end: 0.5rem;
|
| 21452 | }
|
| 21453 | .cds--skeleton__text:hover, .cds--skeleton__text:focus, .cds--skeleton__text:active {
|
| 21454 | border: none;
|
| 21455 | cursor: default;
|
| 21456 | outline: none;
|
| 21457 | }
|
| 21458 | .cds--skeleton__text::before {
|
| 21459 | position: absolute;
|
| 21460 | animation: 3000ms ease-in-out cds--skeleton infinite;
|
| 21461 | background: var(--cds-skeleton-element, #c6c6c6);
|
| 21462 | block-size: 100%;
|
| 21463 | content: "";
|
| 21464 | inline-size: 100%;
|
| 21465 | will-change: transform-origin, transform, opacity;
|
| 21466 | }
|
| 21467 | @media (prefers-reduced-motion: reduce) {
|
| 21468 | .cds--skeleton__text::before {
|
| 21469 | animation: none;
|
| 21470 | }
|
| 21471 | }
|
| 21472 |
|
| 21473 | .cds--skeleton__heading {
|
| 21474 | block-size: 1.5rem;
|
| 21475 | }
|
| 21476 |
|
| 21477 | .cds--skeleton__text--ai,
|
| 21478 | .cds--skeleton__placeholder--ai,
|
| 21479 | .cds--skeleton__icon--ai {
|
| 21480 | overflow: hidden;
|
| 21481 | background: var(--cds-ai-skeleton-background, #d0e2ff);
|
| 21482 | }
|
| 21483 |
|
| 21484 | .cds--skeleton__text--ai::before,
|
| 21485 | .cds--skeleton__placeholder--ai::before,
|
| 21486 | .cds--skeleton__icon--ai::before {
|
| 21487 | animation: 1250ms ease-in-out ai-skeleton-animation infinite;
|
| 21488 | background: linear-gradient(to right, rgba(69, 137, 255, 0) 0%, rgba(69, 137, 255, 0.5) 50%, rgba(69, 137, 255, 0) 100%);
|
| 21489 | }
|
| 21490 |
|
| 21491 | .cds--skeleton__placeholder--ai::before,
|
| 21492 | .cds--skeleton__icon--ai::before {
|
| 21493 | inline-size: 200%;
|
| 21494 | }
|
| 21495 |
|
| 21496 | .cds--skeleton__placeholder--ai {
|
| 21497 | border-radius: 0.5rem;
|
| 21498 | }
|
| 21499 |
|
| 21500 | .cds--skeleton__text--ai {
|
| 21501 | border-radius: 1rem;
|
| 21502 | }
|
| 21503 |
|
| 21504 | .cds--skeleton__icon--ai {
|
| 21505 | border-radius: 0.125rem;
|
| 21506 | }
|
| 21507 |
|
| 21508 | .cds--slider-container {
|
| 21509 | position: relative;
|
| 21510 | display: flex;
|
| 21511 | align-items: center;
|
| 21512 | gap: 1rem;
|
| 21513 | -webkit-user-select: none;
|
| 21514 | -moz-user-select: none;
|
| 21515 | user-select: none;
|
| 21516 | }
|
| 21517 |
|
| 21518 | .cds--slider {
|
| 21519 | position: relative;
|
| 21520 | padding: 1rem 0;
|
| 21521 | cursor: pointer;
|
| 21522 | inline-size: 100%;
|
| 21523 | max-inline-size: 40rem;
|
| 21524 | min-inline-size: 12.5rem;
|
| 21525 | }
|
| 21526 | .cds--slider-container--two-handles .cds--slider {
|
| 21527 | margin-inline: 0.25rem;
|
| 21528 | }
|
| 21529 |
|
| 21530 | .cds--slider__range-label {
|
| 21531 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 21532 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 21533 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 21534 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 21535 | color: var(--cds-text-primary, #161616);
|
| 21536 | white-space: nowrap;
|
| 21537 | }
|
| 21538 |
|
| 21539 | .cds--slider__track {
|
| 21540 | position: absolute;
|
| 21541 | background: var(--cds-border-subtle);
|
| 21542 | block-size: 0.125rem;
|
| 21543 | inline-size: 100%;
|
| 21544 | transform: translate(0%, -50%);
|
| 21545 | }
|
| 21546 |
|
| 21547 | .cds--slider__track:before {
|
| 21548 | position: absolute;
|
| 21549 | display: inline-block;
|
| 21550 | background: var(--cds-border-subtle);
|
| 21551 | block-size: 0.25rem;
|
| 21552 | content: "";
|
| 21553 | inline-size: 0.125rem;
|
| 21554 | inset-block-start: -0.3125rem;
|
| 21555 | inset-inline-start: 50%;
|
| 21556 | transform: translate(-50%, 0);
|
| 21557 | }
|
| 21558 |
|
| 21559 | .cds--slider__filled-track {
|
| 21560 | position: absolute;
|
| 21561 | background: var(--cds-layer-selected-inverse, #161616);
|
| 21562 | block-size: 0.125rem;
|
| 21563 | inline-size: 100%;
|
| 21564 | pointer-events: none;
|
| 21565 | transform: translate(0%, -50%);
|
| 21566 | transform-origin: left;
|
| 21567 | transition: background 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 21568 | }
|
| 21569 |
|
| 21570 | .cds--slider__thumb-wrapper {
|
| 21571 | position: absolute;
|
| 21572 | z-index: 3;
|
| 21573 | block-size: 0.875rem;
|
| 21574 | inline-size: 0.875rem;
|
| 21575 | transform: translate(-50%, -50%);
|
| 21576 | --cds-tooltip-padding-inline: 0.5rem;
|
| 21577 | --cds-popover-offset: 0.5rem;
|
| 21578 | }
|
| 21579 | .cds--slider-container--rtl .cds--slider__thumb-wrapper {
|
| 21580 | transform: translate(50%, -50%);
|
| 21581 | }
|
| 21582 |
|
| 21583 | .cds--slider__thumb-wrapper--lower,
|
| 21584 | .cds--slider__thumb-wrapper--upper {
|
| 21585 | block-size: 24px;
|
| 21586 | inline-size: 16px;
|
| 21587 | --cds-popover-offset: var(--cds-popover-caret-height, 0.5rem);
|
| 21588 | }
|
| 21589 |
|
| 21590 | .cds--slider__thumb-wrapper--lower {
|
| 21591 | transform: translate(-100%, -50%);
|
| 21592 | }
|
| 21593 | .cds--slider__thumb-wrapper--lower > .cds--popover > .cds--popover-content {
|
| 21594 | transform: translate(50%, calc(-100% - var(--cds-popover-offset, 0rem)));
|
| 21595 | }
|
| 21596 | .cds--slider__thumb-wrapper--lower > .cds--popover > .cds--popover-caret {
|
| 21597 | inset-inline-start: revert;
|
| 21598 | transform: translate(50%, calc(-1 * var(--cds-popover-offset, 0rem)));
|
| 21599 | }
|
| 21600 |
|
| 21601 | .cds--slider-container--rtl .cds--slider__thumb-wrapper--lower {
|
| 21602 | transform: translate(100%, -50%);
|
| 21603 | }
|
| 21604 | .cds--slider-container--rtl .cds--slider__thumb-wrapper--lower > .cds--popover > .cds--popover-content {
|
| 21605 | transform: translate(0, calc(-100% - var(--cds-popover-offset, 0rem)));
|
| 21606 | }
|
| 21607 | .cds--slider-container--rtl .cds--slider__thumb-wrapper--lower > .cds--popover > .cds--popover-caret {
|
| 21608 | transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem)));
|
| 21609 | }
|
| 21610 |
|
| 21611 | .cds--slider__thumb-wrapper--upper {
|
| 21612 | transform: translate(0, -50%);
|
| 21613 | }
|
| 21614 | .cds--slider__thumb-wrapper--upper > .cds--popover > .cds--popover-content {
|
| 21615 | transform: translate(-50%, calc(-100% - var(--cds-popover-offset, 0rem)));
|
| 21616 | }
|
| 21617 | .cds--slider__thumb-wrapper--upper > .cds--popover > .cds--popover-caret {
|
| 21618 | transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem)));
|
| 21619 | }
|
| 21620 |
|
| 21621 | .cds--slider-container--rtl .cds--slider__thumb-wrapper--upper {
|
| 21622 | transform: translate(0, -50%);
|
| 21623 | }
|
| 21624 | .cds--slider-container--rtl .cds--slider__thumb-wrapper--upper > .cds--popover > .cds--popover-content {
|
| 21625 | transform: translate(0, calc(-100% - var(--cds-popover-offset, 0rem)));
|
| 21626 | }
|
| 21627 | .cds--slider-container--rtl .cds--slider__thumb-wrapper--upper > .cds--popover > .cds--popover-caret {
|
| 21628 | transform: translate(50%, calc(-1 * var(--cds-popover-offset, 0rem)));
|
| 21629 | }
|
| 21630 |
|
| 21631 | .cds--slider__thumb {
|
| 21632 | position: absolute;
|
| 21633 | border-radius: 50%;
|
| 21634 | background: var(--cds-layer-selected-inverse, #161616);
|
| 21635 | box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px transparent;
|
| 21636 | inset: 0;
|
| 21637 | outline: none;
|
| 21638 | transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), background 110ms cubic-bezier(0.2, 0, 0.38, 0.9), box-shadow 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 21639 | }
|
| 21640 | .cds--slider__thumb:hover {
|
| 21641 | transform: scale(1.4286);
|
| 21642 | }
|
| 21643 | .cds--slider__thumb:focus {
|
| 21644 | background-color: var(--cds-interactive, #0f62fe);
|
| 21645 | box-shadow: inset 0 0 0 2px var(--cds-interactive, #0f62fe), inset 0 0 0 3px var(--cds-layer);
|
| 21646 | transform: scale(1.4286);
|
| 21647 | }
|
| 21648 | .cds--slider__thumb:active {
|
| 21649 | box-shadow: inset 0 0 0 2px var(--cds-interactive, #0f62fe);
|
| 21650 | transform: scale(1.4286);
|
| 21651 | }
|
| 21652 |
|
| 21653 | .cds--slider__thumb-icon {
|
| 21654 | fill: var(--cds-layer-selected-inverse, #161616);
|
| 21655 | }
|
| 21656 |
|
| 21657 | .cds--slider__thumb-icon--focus {
|
| 21658 | display: none;
|
| 21659 | fill: var(--cds-interactive, #0f62fe);
|
| 21660 | }
|
| 21661 |
|
| 21662 | .cds--slider__thumb--lower,
|
| 21663 | .cds--slider__thumb--upper {
|
| 21664 | position: absolute;
|
| 21665 |
|
| 21666 | border-radius: unset;
|
| 21667 | background-color: transparent;
|
| 21668 | box-shadow: none;
|
| 21669 | inset: 0;
|
| 21670 | transition: none;
|
| 21671 | }
|
| 21672 | .cds--slider__thumb--lower::before,
|
| 21673 | .cds--slider__thumb--upper::before {
|
| 21674 | position: absolute;
|
| 21675 | z-index: -1;
|
| 21676 | display: block;
|
| 21677 | background: var(--cds-background, #ffffff);
|
| 21678 | block-size: 0.125rem;
|
| 21679 | content: "";
|
| 21680 | inline-size: 0.375rem;
|
| 21681 | inset-block-start: calc(50% - 0.0625rem);
|
| 21682 | inset-inline-end: 0;
|
| 21683 | }
|
| 21684 | .cds--slider__thumb--lower:hover,
|
| 21685 | .cds--slider__thumb--upper:hover {
|
| 21686 | transform: none;
|
| 21687 | }
|
| 21688 | .cds--slider__thumb--lower:hover .cds--slider__thumb-icon,
|
| 21689 | .cds--slider__thumb--upper:hover .cds--slider__thumb-icon {
|
| 21690 | fill: var(--cds-text-secondary, #525252);
|
| 21691 | }
|
| 21692 | .cds--slider__thumb--lower:active,
|
| 21693 | .cds--slider__thumb--upper:active {
|
| 21694 | box-shadow: none;
|
| 21695 | transform: none;
|
| 21696 | }
|
| 21697 | .cds--slider__thumb--lower:focus,
|
| 21698 | .cds--slider__thumb--upper:focus {
|
| 21699 | background-color: transparent;
|
| 21700 | box-shadow: none;
|
| 21701 | transform: none;
|
| 21702 | }
|
| 21703 | .cds--slider__thumb--lower:focus .cds--slider__thumb-icon,
|
| 21704 | .cds--slider__thumb--upper:focus .cds--slider__thumb-icon {
|
| 21705 | display: none;
|
| 21706 | fill: var(--cds-interactive, #0f62fe);
|
| 21707 | }
|
| 21708 | .cds--slider__thumb--lower:focus .cds--slider__thumb-icon--focus,
|
| 21709 | .cds--slider__thumb--upper:focus .cds--slider__thumb-icon--focus {
|
| 21710 | display: block;
|
| 21711 | }
|
| 21712 |
|
| 21713 | .cds--slider__thumb--lower:focus::before,
|
| 21714 | .cds--slider__thumb--upper:focus::before {
|
| 21715 | inline-size: 100%;
|
| 21716 | }
|
| 21717 |
|
| 21718 | .cds--slider__thumb--upper {
|
| 21719 | transform: none;
|
| 21720 | }
|
| 21721 | .cds--slider__thumb--upper::before {
|
| 21722 | inset-inline-end: auto;
|
| 21723 | inset-inline-start: 0;
|
| 21724 | }
|
| 21725 | .cds--slider__thumb--upper:hover, .cds--slider__thumb--upper:active, .cds--slider__thumb--upper:focus {
|
| 21726 | transform: none;
|
| 21727 | }
|
| 21728 |
|
| 21729 | .cds--slider__input {
|
| 21730 | display: none;
|
| 21731 | }
|
| 21732 |
|
| 21733 | .cds--slider-text-input-wrapper {
|
| 21734 | position: relative;
|
| 21735 | }
|
| 21736 |
|
| 21737 | .cds--slider-text-input-wrapper--hidden {
|
| 21738 | display: none;
|
| 21739 | }
|
| 21740 |
|
| 21741 | .cds--slider-text-input,
|
| 21742 | .cds-slider-text-input {
|
| 21743 | -moz-appearance: textfield;
|
| 21744 | -webkit-appearance: textfield;
|
| 21745 | appearance: textfield;
|
| 21746 | block-size: 2.5rem;
|
| 21747 | inline-size: 4rem;
|
| 21748 | }
|
| 21749 | .cds--slider-text-input::-webkit-outer-spin-button, .cds--slider-text-input::-webkit-inner-spin-button,
|
| 21750 | .cds-slider-text-input::-webkit-outer-spin-button,
|
| 21751 | .cds-slider-text-input::-webkit-inner-spin-button {
|
| 21752 | display: none;
|
| 21753 | }
|
| 21754 |
|
| 21755 | .cds--slider__thumb:focus ~ .cds--slider__filled-track,
|
| 21756 | .cds--slider__thumb-wrapper:focus-within ~ .cds--slider__filled-track {
|
| 21757 | background-color: var(--cds-border-interactive, #0f62fe);
|
| 21758 | }
|
| 21759 |
|
| 21760 | .cds--slider-text-input.cds--text-input--invalid,
|
| 21761 | .cds--slider-text-input--warn {
|
| 21762 | inline-size: 6rem;
|
| 21763 | padding-inline-end: 3rem;
|
| 21764 | }
|
| 21765 |
|
| 21766 | .cds--slider__invalid-icon {
|
| 21767 | position: absolute;
|
| 21768 | fill: var(--cds-support-error, #da1e28);
|
| 21769 | inset-block-start: 50%;
|
| 21770 | inset-inline-end: 1rem;
|
| 21771 | transform: translateY(-50%);
|
| 21772 | }
|
| 21773 |
|
| 21774 | .cds--slider__validation-msg.cds--form-requirement {
|
| 21775 | display: block;
|
| 21776 | overflow: visible;
|
| 21777 | max-block-size: 100%;
|
| 21778 | }
|
| 21779 |
|
| 21780 | .cds--slider__validation-msg--invalid {
|
| 21781 | color: var(--cds-text-error, #da1e28);
|
| 21782 | }
|
| 21783 |
|
| 21784 | .cds--slider__invalid-icon.cds--slider__invalid-icon--warning {
|
| 21785 | fill: var(--cds-support-warning, #f1c21b);
|
| 21786 | }
|
| 21787 |
|
| 21788 | .cds--slider__invalid-icon--warning path:first-of-type {
|
| 21789 | fill: #000000;
|
| 21790 | opacity: 1;
|
| 21791 | }
|
| 21792 |
|
| 21793 | .cds--label--disabled ~ .cds--slider-container > .cds--slider__range-label {
|
| 21794 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 21795 | }
|
| 21796 |
|
| 21797 | .cds--slider--disabled.cds--slider {
|
| 21798 | cursor: not-allowed;
|
| 21799 | }
|
| 21800 |
|
| 21801 | .cds--slider--disabled .cds--slider__thumb {
|
| 21802 | background-color: var(--cds-border-disabled, #c6c6c6);
|
| 21803 | }
|
| 21804 | .cds--slider--disabled .cds--slider__thumb:hover {
|
| 21805 | cursor: not-allowed;
|
| 21806 | transform: translate(-50%, -50%);
|
| 21807 | }
|
| 21808 | .cds--slider--disabled .cds--slider__thumb:focus {
|
| 21809 | background-color: var(--cds-border-disabled, #c6c6c6);
|
| 21810 | box-shadow: none;
|
| 21811 | outline: none;
|
| 21812 | transform: translate(-50%, -50%);
|
| 21813 | }
|
| 21814 | .cds--slider--disabled .cds--slider__thumb:active {
|
| 21815 | background: var(--cds-border-disabled, #c6c6c6);
|
| 21816 | transform: translate(-50%, -50%);
|
| 21817 | }
|
| 21818 |
|
| 21819 | .cds--slider--disabled .cds--slider__track,
|
| 21820 | .cds--slider--disabled .cds--slider__filled-track,
|
| 21821 | .cds--slider--disabled .cds--slider__thumb:focus ~ .cds--slider__filled-track {
|
| 21822 | background-color: var(--cds-border-disabled, #c6c6c6);
|
| 21823 | }
|
| 21824 |
|
| 21825 | .cds--slider--disabled ~ .cds--form-item .cds--slider-text-input,
|
| 21826 | .cds--slider--disabled ~ .cds--slider-text-input {
|
| 21827 | border: none;
|
| 21828 | background-color: var(--cds-field);
|
| 21829 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 21830 | cursor: not-allowed;
|
| 21831 | transition: none;
|
| 21832 | }
|
| 21833 | .cds--slider--disabled ~ .cds--form-item .cds--slider-text-input:active, .cds--slider--disabled ~ .cds--form-item .cds--slider-text-input:focus, .cds--slider--disabled ~ .cds--form-item .cds--slider-text-input:hover,
|
| 21834 | .cds--slider--disabled ~ .cds--slider-text-input:active,
|
| 21835 | .cds--slider--disabled ~ .cds--slider-text-input:focus,
|
| 21836 | .cds--slider--disabled ~ .cds--slider-text-input:hover {
|
| 21837 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 21838 | outline: none;
|
| 21839 | }
|
| 21840 |
|
| 21841 | .cds--slider--readonly {
|
| 21842 | cursor: default;
|
| 21843 | }
|
| 21844 |
|
| 21845 | .cds--slider-container--readonly .cds--slider__thumb {
|
| 21846 | block-size: 0;
|
| 21847 | inline-size: 0;
|
| 21848 | }
|
| 21849 | .cds--slider-container--readonly .cds--slider__thumb::before, .cds--slider-container--readonly .cds--slider__thumb::after {
|
| 21850 | display: none;
|
| 21851 | }
|
| 21852 |
|
| 21853 | .cds--slider-container--readonly .cds--slider-text-input {
|
| 21854 | background-color: transparent;
|
| 21855 | }
|
| 21856 |
|
| 21857 | .cds--slider__status-msg.cds--form-requirement {
|
| 21858 | display: block;
|
| 21859 | overflow: visible;
|
| 21860 | max-block-size: 100%;
|
| 21861 | }
|
| 21862 |
|
| 21863 | .cds--slider-container.cds--skeleton .cds--slider__range-label {
|
| 21864 | position: relative;
|
| 21865 | padding: 0;
|
| 21866 | border: none;
|
| 21867 | background: var(--cds-skeleton-background, #e8e8e8);
|
| 21868 | box-shadow: none;
|
| 21869 | pointer-events: none;
|
| 21870 | block-size: 0.75rem;
|
| 21871 | inline-size: 1.25rem;
|
| 21872 | }
|
| 21873 | .cds--slider-container.cds--skeleton .cds--slider__range-label:hover, .cds--slider-container.cds--skeleton .cds--slider__range-label:focus, .cds--slider-container.cds--skeleton .cds--slider__range-label:active {
|
| 21874 | border: none;
|
| 21875 | cursor: default;
|
| 21876 | outline: none;
|
| 21877 | }
|
| 21878 | .cds--slider-container.cds--skeleton .cds--slider__range-label::before {
|
| 21879 | position: absolute;
|
| 21880 | animation: 3000ms ease-in-out cds--skeleton infinite;
|
| 21881 | background: var(--cds-skeleton-element, #c6c6c6);
|
| 21882 | block-size: 100%;
|
| 21883 | content: "";
|
| 21884 | inline-size: 100%;
|
| 21885 | will-change: transform-origin, transform, opacity;
|
| 21886 | }
|
| 21887 | @media (prefers-reduced-motion: reduce) {
|
| 21888 | .cds--slider-container.cds--skeleton .cds--slider__range-label::before {
|
| 21889 | animation: none;
|
| 21890 | }
|
| 21891 | }
|
| 21892 |
|
| 21893 | .cds--slider-container.cds--skeleton .cds--slider__track {
|
| 21894 | cursor: default;
|
| 21895 | pointer-events: none;
|
| 21896 | }
|
| 21897 |
|
| 21898 | .cds--slider-container.cds--skeleton .cds--slider__thumb-wrapper {
|
| 21899 | inset-inline-start: 50%;
|
| 21900 | }
|
| 21901 | .cds--slider-container.cds--skeleton .cds--slider__thumb {
|
| 21902 | cursor: default;
|
| 21903 | pointer-events: none;
|
| 21904 | }
|
| 21905 | .cds--slider-container.cds--skeleton .cds--slider__thumb-wrapper--lower {
|
| 21906 | inset-inline-start: 0;
|
| 21907 | }
|
| 21908 | .cds--slider-container.cds--skeleton .cds--slider__thumb-wrapper--upper {
|
| 21909 | inset-inline-start: 100%;
|
| 21910 | }
|
| 21911 |
|
| 21912 | .cds--popover-container.cds--slider__thumb-wrapper {
|
| 21913 | position: absolute;
|
| 21914 | }
|
| 21915 |
|
| 21916 |
|
| 21917 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 21918 | .cds--slider__thumb {
|
| 21919 | outline: 1px solid transparent;
|
| 21920 | }
|
| 21921 | }
|
| 21922 |
|
| 21923 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 21924 | .cds--slider__thumb:focus {
|
| 21925 | color: Highlight;
|
| 21926 | outline: 1px solid Highlight;
|
| 21927 | }
|
| 21928 | }
|
| 21929 |
|
| 21930 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 21931 | .cds--slider__track {
|
| 21932 | outline: 1px solid transparent;
|
| 21933 | }
|
| 21934 | }
|
| 21935 |
|
| 21936 |
|
| 21937 | .cds--stack-horizontal {
|
| 21938 | display: inline-grid;
|
| 21939 | -moz-column-gap: var(--cds-stack-gap, 0);
|
| 21940 | column-gap: var(--cds-stack-gap, 0);
|
| 21941 | grid-auto-flow: column;
|
| 21942 | }
|
| 21943 |
|
| 21944 | .cds--stack-vertical {
|
| 21945 | display: grid;
|
| 21946 | grid-auto-flow: row;
|
| 21947 | row-gap: var(--cds-stack-gap, 0);
|
| 21948 | }
|
| 21949 |
|
| 21950 | .cds--stack-scale-1 {
|
| 21951 | --cds-stack-gap: 0.125rem;
|
| 21952 | }
|
| 21953 |
|
| 21954 | .cds--stack-scale-2 {
|
| 21955 | --cds-stack-gap: 0.25rem;
|
| 21956 | }
|
| 21957 |
|
| 21958 | .cds--stack-scale-3 {
|
| 21959 | --cds-stack-gap: 0.5rem;
|
| 21960 | }
|
| 21961 |
|
| 21962 | .cds--stack-scale-4 {
|
| 21963 | --cds-stack-gap: 0.75rem;
|
| 21964 | }
|
| 21965 |
|
| 21966 | .cds--stack-scale-5 {
|
| 21967 | --cds-stack-gap: 1rem;
|
| 21968 | }
|
| 21969 |
|
| 21970 | .cds--stack-scale-6 {
|
| 21971 | --cds-stack-gap: 1.5rem;
|
| 21972 | }
|
| 21973 |
|
| 21974 | .cds--stack-scale-7 {
|
| 21975 | --cds-stack-gap: 2rem;
|
| 21976 | }
|
| 21977 |
|
| 21978 | .cds--stack-scale-8 {
|
| 21979 | --cds-stack-gap: 2.5rem;
|
| 21980 | }
|
| 21981 |
|
| 21982 | .cds--stack-scale-9 {
|
| 21983 | --cds-stack-gap: 3rem;
|
| 21984 | }
|
| 21985 |
|
| 21986 | .cds--stack-scale-10 {
|
| 21987 | --cds-stack-gap: 4rem;
|
| 21988 | }
|
| 21989 |
|
| 21990 | .cds--stack-scale-11 {
|
| 21991 | --cds-stack-gap: 5rem;
|
| 21992 | }
|
| 21993 |
|
| 21994 | .cds--stack-scale-12 {
|
| 21995 | --cds-stack-gap: 6rem;
|
| 21996 | }
|
| 21997 |
|
| 21998 | .cds--stack-scale-13 {
|
| 21999 | --cds-stack-gap: 10rem;
|
| 22000 | }
|
| 22001 |
|
| 22002 | .cds--structured-list--selection .cds--structured-list-td,
|
| 22003 | .cds--structured-list--selection .cds--structured-list-th {
|
| 22004 | padding-inline-end: 1rem;
|
| 22005 | padding-inline-start: 1rem;
|
| 22006 | }
|
| 22007 | .cds--structured-list--selection .cds--structured-list-td:first-child,
|
| 22008 | .cds--structured-list--selection .cds--structured-list-th:first-child {
|
| 22009 | padding-inline-end: 1rem;
|
| 22010 | padding-inline-start: 1rem;
|
| 22011 | }
|
| 22012 |
|
| 22013 | .cds--structured-list-row--focused-within {
|
| 22014 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 22015 | outline-offset: -2px;
|
| 22016 | }
|
| 22017 | @media screen and (prefers-contrast) {
|
| 22018 | .cds--structured-list-row--focused-within {
|
| 22019 | outline-style: dotted;
|
| 22020 | }
|
| 22021 | }
|
| 22022 |
|
| 22023 | .cds--structured-list {
|
| 22024 | box-sizing: border-box;
|
| 22025 | padding: 0;
|
| 22026 | border: 0;
|
| 22027 | margin: 0;
|
| 22028 | font-family: inherit;
|
| 22029 | font-size: 100%;
|
| 22030 | vertical-align: baseline;
|
| 22031 | display: table;
|
| 22032 | background-color: var(--cds-layer) transparent;
|
| 22033 | border-collapse: collapse;
|
| 22034 | border-spacing: 0;
|
| 22035 | inline-size: 100%;
|
| 22036 | overflow-x: auto;
|
| 22037 | }
|
| 22038 | .cds--structured-list *,
|
| 22039 | .cds--structured-list *::before,
|
| 22040 | .cds--structured-list *::after {
|
| 22041 | box-sizing: inherit;
|
| 22042 | }
|
| 22043 | .cds--structured-list.cds--structured-list--condensed .cds--structured-list-td, .cds--structured-list.cds--structured-list--condensed .cds--structured-list-th {
|
| 22044 | padding: 0.5rem;
|
| 22045 | }
|
| 22046 | .cds--structured-list .cds--structured-list-row .cds--structured-list-td:first-of-type,
|
| 22047 | .cds--structured-list .cds--structured-list-row .cds--structured-list-th:first-of-type {
|
| 22048 | padding-inline-start: 1rem;
|
| 22049 | }
|
| 22050 | .cds--structured-list.cds--structured-list--flush .cds--structured-list-row .cds--structured-list-td, .cds--structured-list.cds--structured-list--flush .cds--structured-list-row .cds--structured-list-th, .cds--structured-list.cds--structured-list--flush .cds--structured-list-row .cds--structured-list-td:first-of-type, .cds--structured-list.cds--structured-list--flush .cds--structured-list-row .cds--structured-list-th:first-of-type {
|
| 22051 | padding-inline-end: 1rem;
|
| 22052 | padding-inline-start: 0;
|
| 22053 | }
|
| 22054 |
|
| 22055 | .cds--structured-list-row {
|
| 22056 | display: table-row;
|
| 22057 | border-block-start: 1px solid var(--cds-border-subtle);
|
| 22058 | transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 22059 | }
|
| 22060 |
|
| 22061 | .cds--structured-list-tbody .cds--structured-list-row:last-child {
|
| 22062 | border-block-end: 1px solid var(--cds-border-subtle);
|
| 22063 | }
|
| 22064 |
|
| 22065 | .cds--structured-list-row--header-row {
|
| 22066 | border: none;
|
| 22067 | }
|
| 22068 |
|
| 22069 | .cds--structured-list--selection .cds--structured-list-row:hover:not(.cds--structured-list-row--header-row):not(.cds--structured-list-row--selected) {
|
| 22070 | border-color: var(--cds-layer-hover);
|
| 22071 | background-color: var(--cds-layer-hover);
|
| 22072 | cursor: pointer;
|
| 22073 | }
|
| 22074 |
|
| 22075 | .cds--structured-list--selection .cds--structured-list-row:hover:not(.cds--structured-list-row--header-row):not(.cds--structured-list-row--selected) + .cds--structured-list-row {
|
| 22076 | border-color: var(--cds-layer-hover);
|
| 22077 | }
|
| 22078 |
|
| 22079 | .cds--structured-list--selection .cds--structured-list-row.cds--structured-list-row--selected {
|
| 22080 | border-color: var(--cds-layer-selected);
|
| 22081 | background-color: var(--cds-layer-selected);
|
| 22082 | }
|
| 22083 |
|
| 22084 | .cds--structured-list--selection .cds--structured-list-row--selected + .cds--structured-list-row {
|
| 22085 | border-color: var(--cds-layer-selected);
|
| 22086 | }
|
| 22087 |
|
| 22088 | .cds--structured-list--selection .cds--structured-list-row.cds--structured-list-row--selected .cds--structured-list-td {
|
| 22089 | color: var(--cds-text-primary, #161616);
|
| 22090 | }
|
| 22091 |
|
| 22092 | .cds--structured-list-row.cds--structured-list-row--header-row {
|
| 22093 | cursor: inherit;
|
| 22094 | }
|
| 22095 |
|
| 22096 | .cds--structured-list--selection .cds--structured-list-row:hover:not(.cds--structured-list-row--header-row) > .cds--structured-list-td,
|
| 22097 | .cds--structured-list--selection .cds--structured-list-row.cds--structured-list-row--selected > .cds--structured-list-td {
|
| 22098 | color: var(--cds-text-primary, #161616);
|
| 22099 | }
|
| 22100 |
|
| 22101 | .cds--structured-list-thead {
|
| 22102 | display: table-header-group;
|
| 22103 | vertical-align: middle;
|
| 22104 | }
|
| 22105 |
|
| 22106 | .cds--structured-list-th {
|
| 22107 | box-sizing: border-box;
|
| 22108 | padding: 0;
|
| 22109 | border: 0;
|
| 22110 | margin: 0;
|
| 22111 | font-family: inherit;
|
| 22112 | font-size: 100%;
|
| 22113 | vertical-align: baseline;
|
| 22114 | padding: 1rem 0.5rem 0.5rem 0.5rem;
|
| 22115 | font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
|
| 22116 | font-weight: var(--cds-heading-compact-01-font-weight, 600);
|
| 22117 | line-height: var(--cds-heading-compact-01-line-height, 1.28572);
|
| 22118 | letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
|
| 22119 | display: table-cell;
|
| 22120 | block-size: 2.5rem;
|
| 22121 | color: var(--cds-text-primary, #161616);
|
| 22122 | font-weight: 600;
|
| 22123 | text-align: start;
|
| 22124 | text-transform: none;
|
| 22125 | vertical-align: top;
|
| 22126 | }
|
| 22127 | .cds--structured-list-th *,
|
| 22128 | .cds--structured-list-th *::before,
|
| 22129 | .cds--structured-list-th *::after {
|
| 22130 | box-sizing: inherit;
|
| 22131 | }
|
| 22132 |
|
| 22133 | .cds--structured-list-tbody {
|
| 22134 | display: table-row-group;
|
| 22135 | vertical-align: middle;
|
| 22136 | }
|
| 22137 |
|
| 22138 | .cds--structured-list-td {
|
| 22139 | box-sizing: border-box;
|
| 22140 | padding: 0;
|
| 22141 | border: 0;
|
| 22142 | margin: 0;
|
| 22143 | font-family: inherit;
|
| 22144 | font-size: 100%;
|
| 22145 | vertical-align: baseline;
|
| 22146 | font-size: var(--cds-body-01-font-size, 0.875rem);
|
| 22147 | font-weight: var(--cds-body-01-font-weight, 400);
|
| 22148 | line-height: var(--cds-body-01-line-height, 1.42857);
|
| 22149 | letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
|
| 22150 | padding: 1rem 0.5rem 1.5rem 0.5rem;
|
| 22151 | position: relative;
|
| 22152 | display: table-cell;
|
| 22153 | color: var(--cds-text-secondary, #525252);
|
| 22154 | max-inline-size: 36rem;
|
| 22155 | transition: color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 22156 | }
|
| 22157 | .cds--structured-list-td *,
|
| 22158 | .cds--structured-list-td *::before,
|
| 22159 | .cds--structured-list-td *::after {
|
| 22160 | box-sizing: inherit;
|
| 22161 | }
|
| 22162 |
|
| 22163 | .cds--structured-list-content--nowrap {
|
| 22164 | white-space: nowrap;
|
| 22165 | }
|
| 22166 |
|
| 22167 | .cds--structured-list-input + .cds--structured-list-td {
|
| 22168 | text-align: end;
|
| 22169 | }
|
| 22170 |
|
| 22171 | .cds--structured-list-svg {
|
| 22172 | display: inline-block;
|
| 22173 | margin-block-start: 0.125rem;
|
| 22174 | transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 22175 | vertical-align: top;
|
| 22176 | }
|
| 22177 |
|
| 22178 | .cds--structured-list-input:checked + .cds--structured-list-row .cds--structured-list-svg,
|
| 22179 | .cds--structured-list-input:checked + .cds--structured-list-td .cds--structured-list-svg {
|
| 22180 | fill: var(--cds-icon-primary, #161616);
|
| 22181 | }
|
| 22182 |
|
| 22183 | .cds--structured-list-svg {
|
| 22184 | fill: transparent;
|
| 22185 | }
|
| 22186 |
|
| 22187 | .cds--structured-list--selection .cds--structured-list-td:last-child {
|
| 22188 | inline-size: 2rem;
|
| 22189 | padding-inline-start: 0;
|
| 22190 | }
|
| 22191 |
|
| 22192 | .cds--structured-list.cds--skeleton .cds--structured-list-th:first-child {
|
| 22193 | inline-size: 8%;
|
| 22194 | }
|
| 22195 | .cds--structured-list.cds--skeleton .cds--structured-list-th:nth-child(3n+2) {
|
| 22196 | inline-size: 30%;
|
| 22197 | }
|
| 22198 | .cds--structured-list.cds--skeleton .cds--structured-list-th:nth-child(3n+3) {
|
| 22199 | inline-size: 15%;
|
| 22200 | }
|
| 22201 | .cds--structured-list.cds--skeleton span {
|
| 22202 | position: relative;
|
| 22203 | padding: 0;
|
| 22204 | border: none;
|
| 22205 | background: var(--cds-skeleton-background, #e8e8e8);
|
| 22206 | box-shadow: none;
|
| 22207 | pointer-events: none;
|
| 22208 | display: block;
|
| 22209 | block-size: 1rem;
|
| 22210 | inline-size: 75%;
|
| 22211 | }
|
| 22212 | .cds--structured-list.cds--skeleton span:hover, .cds--structured-list.cds--skeleton span:focus, .cds--structured-list.cds--skeleton span:active {
|
| 22213 | border: none;
|
| 22214 | cursor: default;
|
| 22215 | outline: none;
|
| 22216 | }
|
| 22217 | .cds--structured-list.cds--skeleton span::before {
|
| 22218 | position: absolute;
|
| 22219 | animation: 3000ms ease-in-out cds--skeleton infinite;
|
| 22220 | background: var(--cds-skeleton-element, #c6c6c6);
|
| 22221 | block-size: 100%;
|
| 22222 | content: "";
|
| 22223 | inline-size: 100%;
|
| 22224 | will-change: transform-origin, transform, opacity;
|
| 22225 | }
|
| 22226 | @media (prefers-reduced-motion: reduce) {
|
| 22227 | .cds--structured-list.cds--skeleton span::before {
|
| 22228 | animation: none;
|
| 22229 | }
|
| 22230 | }
|
| 22231 |
|
| 22232 | .cds--structured-list.cds--structured-list--selection.cds--skeleton .cds--structured-list-th:first-child {
|
| 22233 | inline-size: 5%;
|
| 22234 | }
|
| 22235 | .cds--structured-list.cds--structured-list--selection.cds--skeleton .cds--structured-list-th:first-child span {
|
| 22236 | display: none;
|
| 22237 | }
|
| 22238 |
|
| 22239 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 22240 | .cds--structured-list-input:checked + .cds--structured-list-td .cds--structured-list-svg {
|
| 22241 | fill: ButtonText;
|
| 22242 | }
|
| 22243 | }
|
| 22244 |
|
| 22245 | .cds--structured-list__icon {
|
| 22246 | margin-block-start: 0.125rem;
|
| 22247 | vertical-align: top;
|
| 22248 | }
|
| 22249 |
|
| 22250 | .cds--structured-list--selection .cds--structured-list-td:first-child:has(.cds--structured-list__icon) {
|
| 22251 | inline-size: 2rem;
|
| 22252 | padding-inline-end: 0;
|
| 22253 | }
|
| 22254 |
|
| 22255 | .cds--tabs.cds--tabs--contained.cds--tabs--full-width .cds--tab--list {
|
| 22256 | display: grid;
|
| 22257 | grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
| 22258 | inline-size: 100%;
|
| 22259 | }
|
| 22260 | .cds--tabs.cds--tabs--contained.cds--tabs--full-width .cds--tab--list .cds--tabs__nav-link .cds--tabs__nav-item-label,
|
| 22261 | .cds--tabs.cds--tabs--contained.cds--tabs--full-width .cds--tab--list .cds--tabs__nav-link .cds--tabs__nav-item-secondary-label {
|
| 22262 | overflow: hidden;
|
| 22263 | text-overflow: ellipsis;
|
| 22264 | }
|
| 22265 | .cds--tabs.cds--tabs--contained.cds--tabs--full-width .cds--tab--list .cds--tabs__nav-link .cds--tabs__nav-item--icon {
|
| 22266 | margin-inline-start: auto;
|
| 22267 | }
|
| 22268 |
|
| 22269 | .cds--tabs.cds--tabs--vertical .cds--tabs__nav-link .cds--tabs__nav-item-label {
|
| 22270 | display: -webkit-box;
|
| 22271 | overflow: hidden;
|
| 22272 | -webkit-box-orient: vertical;
|
| 22273 | -webkit-line-clamp: 2;
|
| 22274 | text-overflow: ellipsis;
|
| 22275 | white-space: normal;
|
| 22276 | }
|
| 22277 |
|
| 22278 | .cds--tabs,
|
| 22279 | .cds--tab-content {
|
| 22280 | --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
|
| 22281 | }
|
| 22282 |
|
| 22283 | .cds--tabs.cds--tabs--tall,
|
| 22284 | .cds--tabs.cds--tabs--contained.cds--tabs--tall {
|
| 22285 | --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-lg)), var(--cds-layout-size-height, var(--cds-layout-size-height-xl)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-xl)));
|
| 22286 | }
|
| 22287 |
|
| 22288 | .cds--tabs {
|
| 22289 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 22290 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 22291 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 22292 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 22293 | --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-lg)));
|
| 22294 | position: relative;
|
| 22295 | display: flex;
|
| 22296 | block-size: auto;
|
| 22297 | color: var(--cds-text-primary, #161616);
|
| 22298 | inline-size: 100%;
|
| 22299 | max-block-size: var(--cds-layout-size-height-xl);
|
| 22300 | min-block-size: var(--cds-layout-size-height-local);
|
| 22301 | overflow-x: hidden;
|
| 22302 | }
|
| 22303 | .cds--tabs html {
|
| 22304 | font-size: 100%;
|
| 22305 | }
|
| 22306 | .cds--tabs body {
|
| 22307 | font-weight: 400;
|
| 22308 | font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
|
| 22309 | -moz-osx-font-smoothing: grayscale;
|
| 22310 | -webkit-font-smoothing: antialiased;
|
| 22311 | text-rendering: optimizeLegibility;
|
| 22312 | }
|
| 22313 | .cds--tabs code {
|
| 22314 | font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
|
| 22315 | }
|
| 22316 | .cds--tabs strong {
|
| 22317 | font-weight: 600;
|
| 22318 | }
|
| 22319 | .cds--tabs.cds--tabs--contained {
|
| 22320 | --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-lg)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-xl)));
|
| 22321 | }
|
| 22322 | .cds--tabs .cds--tab--list {
|
| 22323 | display: flex;
|
| 22324 | inline-size: auto;
|
| 22325 | overflow-x: auto;
|
| 22326 | scroll-behavior: smooth;
|
| 22327 | scrollbar-width: none;
|
| 22328 | will-change: scroll-position;
|
| 22329 | }
|
| 22330 | .cds--tabs .cds--tab--list::-webkit-scrollbar {
|
| 22331 | display: none;
|
| 22332 | }
|
| 22333 | .cds--tabs.cds--tabs--vertical {
|
| 22334 | background: var(--cds-layer);
|
| 22335 | box-shadow: inset -1px 0 var(--cds-border-subtle);
|
| 22336 | grid-column: span 2;
|
| 22337 | max-block-size: none;
|
| 22338 | }
|
| 22339 | @media (min-width: 66rem) {
|
| 22340 | .cds--tabs.cds--tabs--vertical {
|
| 22341 | grid-column: span 4;
|
| 22342 | }
|
| 22343 | }
|
| 22344 | .cds--tabs.cds--tabs--vertical .cds--tab--list {
|
| 22345 | flex-direction: column;
|
| 22346 | inline-size: 100%;
|
| 22347 | overflow-x: visible;
|
| 22348 | overflow-y: auto;
|
| 22349 | }
|
| 22350 | .cds--tabs.cds--tabs--vertical .cds--tab--list-gradient_bottom {
|
| 22351 | position: absolute;
|
| 22352 | background: linear-gradient(to bottom, transparent, var(--cds-layer));
|
| 22353 | block-size: 4rem;
|
| 22354 | inset-block-end: 0;
|
| 22355 | inset-inline: 0;
|
| 22356 | pointer-events: none;
|
| 22357 | }
|
| 22358 | .cds--tabs.cds--tabs--vertical .cds--tab--list-gradient_top {
|
| 22359 | position: absolute;
|
| 22360 | background: linear-gradient(to top, transparent, var(--cds-layer));
|
| 22361 | block-size: 4rem;
|
| 22362 | inset-block-start: 0;
|
| 22363 | inset-inline: 0;
|
| 22364 | pointer-events: none;
|
| 22365 | }
|
| 22366 | .cds--tabs .cds--tabs__nav {
|
| 22367 | box-sizing: border-box;
|
| 22368 | padding: 0;
|
| 22369 | border: 0;
|
| 22370 | margin: 0;
|
| 22371 | font-family: inherit;
|
| 22372 | font-size: 100%;
|
| 22373 | vertical-align: baseline;
|
| 22374 | display: flex;
|
| 22375 | }
|
| 22376 | .cds--tabs .cds--tabs__nav *,
|
| 22377 | .cds--tabs .cds--tabs__nav *::before,
|
| 22378 | .cds--tabs .cds--tabs__nav *::after {
|
| 22379 | box-sizing: inherit;
|
| 22380 | }
|
| 22381 | .cds--tabs .cds--tab--overflow-nav-button {
|
| 22382 | box-sizing: border-box;
|
| 22383 | padding: 0;
|
| 22384 | border: 0;
|
| 22385 | margin: 0;
|
| 22386 | font-family: inherit;
|
| 22387 | font-size: 100%;
|
| 22388 | vertical-align: baseline;
|
| 22389 | display: inline-block;
|
| 22390 | padding: 0;
|
| 22391 | border: 0;
|
| 22392 | -webkit-appearance: none;
|
| 22393 | -moz-appearance: none;
|
| 22394 | appearance: none;
|
| 22395 | background: none;
|
| 22396 | cursor: pointer;
|
| 22397 | text-align: start;
|
| 22398 | inline-size: 100%;
|
| 22399 | display: flex;
|
| 22400 | flex-shrink: 0;
|
| 22401 | align-items: center;
|
| 22402 | justify-content: center;
|
| 22403 | background-color: var(--cds-background, #ffffff);
|
| 22404 | inline-size: 2.5rem;
|
| 22405 | }
|
| 22406 | .cds--tabs .cds--tab--overflow-nav-button *,
|
| 22407 | .cds--tabs .cds--tab--overflow-nav-button *::before,
|
| 22408 | .cds--tabs .cds--tab--overflow-nav-button *::after {
|
| 22409 | box-sizing: inherit;
|
| 22410 | }
|
| 22411 | .cds--tabs .cds--tab--overflow-nav-button::-moz-focus-inner {
|
| 22412 | border: 0;
|
| 22413 | }
|
| 22414 | .cds--tabs .cds--tab--overflow-nav-button:focus {
|
| 22415 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 22416 | outline-offset: -2px;
|
| 22417 | }
|
| 22418 | @media screen and (prefers-contrast) {
|
| 22419 | .cds--tabs .cds--tab--overflow-nav-button:focus {
|
| 22420 | outline-style: dotted;
|
| 22421 | }
|
| 22422 | }
|
| 22423 | .cds--tabs .cds--tab--overflow-nav-button--hidden {
|
| 22424 | display: none;
|
| 22425 | }
|
| 22426 | .cds--tabs.cds--tabs--contained .cds--tab--overflow-nav-button {
|
| 22427 | margin: 0;
|
| 22428 | background-color: var(--cds-layer-accent);
|
| 22429 | inline-size: 3rem;
|
| 22430 | }
|
| 22431 | .cds--tabs .cds--tab--overflow-nav-button svg {
|
| 22432 | z-index: 2;
|
| 22433 | fill: var(--cds-icon-primary, #161616);
|
| 22434 | }
|
| 22435 | .cds--tabs .cds--tab--overflow-nav-button--next {
|
| 22436 | position: absolute;
|
| 22437 | inset-block-end: 0;
|
| 22438 | inset-block-start: 0;
|
| 22439 | inset-inline-end: 0;
|
| 22440 | }
|
| 22441 | .cds--tabs .cds--tab--overflow-nav-button--next::before {
|
| 22442 | position: absolute;
|
| 22443 | z-index: 1;
|
| 22444 | background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--cds-background, #ffffff));
|
| 22445 | block-size: 100%;
|
| 22446 | content: "";
|
| 22447 | inline-size: 0.5rem;
|
| 22448 | inset-inline-start: -0.5rem;
|
| 22449 | }
|
| 22450 | .cds--tabs.cds--tabs--contained .cds--tab--overflow-nav-button--next::before {
|
| 22451 | background-image: linear-gradient(to right, rgba(255, 255, 255, 0), var(--cds-layer-accent));
|
| 22452 | }
|
| 22453 | .cds--tabs .cds--tab--overflow-nav-button--previous {
|
| 22454 | position: absolute;
|
| 22455 | inset-block-end: 0;
|
| 22456 | inset-block-start: 0;
|
| 22457 | inset-inline-start: 0;
|
| 22458 | }
|
| 22459 | .cds--tabs .cds--tab--overflow-nav-button--previous::before {
|
| 22460 | position: absolute;
|
| 22461 | z-index: 1;
|
| 22462 | background: var(--cds-background, #ffffff);
|
| 22463 | block-size: 100%;
|
| 22464 | content: "";
|
| 22465 | inline-size: 2.5rem;
|
| 22466 | inset-inline-end: 0;
|
| 22467 | }
|
| 22468 | .cds--tabs.cds--tabs--contained .cds--tab--overflow-nav-button--previous::before {
|
| 22469 | background: linear-gradient(to left, rgba(255, 255, 255, 0), var(--cds-layer-accent));
|
| 22470 | }
|
| 22471 | .cds--tabs .cds--tabs--light .cds--tabs__overflow-indicator--left {
|
| 22472 | background-image: linear-gradient(to left, rgba(255, 255, 255, 0), var(--cds-layer));
|
| 22473 | }
|
| 22474 | .cds--tabs .cds--tabs--light .cds--tabs__overflow-indicator--right {
|
| 22475 | background-image: linear-gradient(to right, rgba(255, 255, 255, 0), var(--cds-layer));
|
| 22476 | }
|
| 22477 | .cds--tabs.cds--tabs--contained .cds--tabs__overflow-indicator--left {
|
| 22478 | background-image: linear-gradient(to left, rgba(255, 255, 255, 0), var(--cds-layer-accent));
|
| 22479 | }
|
| 22480 | .cds--tabs.cds--tabs--contained .cds--tabs__overflow-indicator--right {
|
| 22481 | background-image: linear-gradient(to right, rgba(255, 255, 255, 0), var(--cds-layer-accent));
|
| 22482 | }
|
| 22483 | @media not all and (resolution >= 0.001dpcm) {
|
| 22484 | @supports (-webkit-appearance: none) and (stroke-color: transparent) {
|
| 22485 | .cds--tabs .cds--tabs__overflow-indicator--left {
|
| 22486 | background-image: linear-gradient(to left, rgba(var(--cds-background, #ffffff), 0), var(--cds-background, #ffffff));
|
| 22487 | }
|
| 22488 | .cds--tabs .cds--tabs__overflow-indicator--right {
|
| 22489 | background-image: linear-gradient(to right, rgba(var(--cds-background, #ffffff), 0), var(--cds-background, #ffffff));
|
| 22490 | }
|
| 22491 | .cds--tabs.cds--tabs--contained .cds--tabs__overflow-indicator--left {
|
| 22492 | background-image: linear-gradient(to left, rgba(var(--cds-layer-accent), 0), var(--cds-layer-accent));
|
| 22493 | }
|
| 22494 | .cds--tabs.cds--tabs--contained .cds--tabs__overflow-indicator--right {
|
| 22495 | background-image: linear-gradient(to right, rgba(var(--cds-layer-accent), 0), var(--cds-layer-accent));
|
| 22496 | }
|
| 22497 | }
|
| 22498 | }
|
| 22499 | .cds--tabs .cds--tabs__nav-item-label-wrapper {
|
| 22500 | display: flex;
|
| 22501 | }
|
| 22502 | .cds--tabs:not(.cds--tabs--contained) .cds--tabs__nav-item-label-wrapper {
|
| 22503 | position: relative;
|
| 22504 | inset-block-start: 0.0625rem;
|
| 22505 | }
|
| 22506 | .cds--tabs .cds--tabs__nav-item {
|
| 22507 | display: flex;
|
| 22508 | flex: 1 0 auto;
|
| 22509 | padding: 0;
|
| 22510 | cursor: pointer;
|
| 22511 | transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 22512 | }
|
| 22513 | .cds--tabs .cds--tabs__nav-item html {
|
| 22514 | font-size: 100%;
|
| 22515 | }
|
| 22516 | .cds--tabs .cds--tabs__nav-item body {
|
| 22517 | font-weight: 400;
|
| 22518 | font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
|
| 22519 | -moz-osx-font-smoothing: grayscale;
|
| 22520 | -webkit-font-smoothing: antialiased;
|
| 22521 | text-rendering: optimizeLegibility;
|
| 22522 | }
|
| 22523 | .cds--tabs .cds--tabs__nav-item code {
|
| 22524 | font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
|
| 22525 | }
|
| 22526 | .cds--tabs .cds--tabs__nav-item strong {
|
| 22527 | font-weight: 600;
|
| 22528 | }
|
| 22529 | .cds--tabs .cds--tabs__nav-item + .cds--tabs__nav-item {
|
| 22530 | margin-inline-start: 0.0625rem;
|
| 22531 | }
|
| 22532 | .cds--tabs.cds--tabs--contained .cds--tabs__nav-item {
|
| 22533 | background-color: var(--cds-layer-accent);
|
| 22534 | box-shadow: -0.0625rem 0 0 0 var(--cds-border-strong);
|
| 22535 | margin-inline-start: 0;
|
| 22536 | }
|
| 22537 | .cds--tabs.cds--tabs--vertical .cds--tabs__nav-item {
|
| 22538 | flex: none;
|
| 22539 | background-color: var(--cds-layer-01, #f4f4f4);
|
| 22540 | block-size: 4rem;
|
| 22541 | border-block-end: 1px solid var(--cds-border-subtle);
|
| 22542 | border-inline-end: 1px solid var(--cds-border-subtle);
|
| 22543 | box-shadow: inset 3px 0 0 0 var(--cds-border-subtle);
|
| 22544 | inline-size: 100%;
|
| 22545 | margin-inline-start: 0;
|
| 22546 | }
|
| 22547 | .cds--tabs.cds--tabs--contained:not(.cds--tabs--vertical) .cds--tabs__nav-item--selected + div + .cds--tabs__nav-item {
|
| 22548 | box-shadow: -0.0625rem 0 0 0 transparent;
|
| 22549 | }
|
| 22550 | .cds--tabs .cds--tabs__nav-item .cds--tabs__nav-link {
|
| 22551 | transition: color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), border-bottom-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 22552 | }
|
| 22553 | .cds--tabs.cds--tabs--dismissable .cds--tabs__nav-link {
|
| 22554 | padding-inline-end: 2.5rem;
|
| 22555 | }
|
| 22556 | .cds--tabs.cds--tabs--dismissable.cds--tabs--contained .cds--tabs__nav-link {
|
| 22557 | padding-inline-end: calc(3rem - 1px);
|
| 22558 | }
|
| 22559 | .cds--tabs .cds--tabs__nav-item--close {
|
| 22560 | position: relative;
|
| 22561 | display: flex;
|
| 22562 | align-items: center;
|
| 22563 | inset-inline-start: calc(-0.75rem - 1px);
|
| 22564 | margin-inline-start: calc(-1.5rem + 1px);
|
| 22565 | }
|
| 22566 | .cds--tabs:not(.cds--tabs--contained) .cds--tabs__nav-item--close--hidden {
|
| 22567 | position: absolute;
|
| 22568 | overflow: hidden;
|
| 22569 | padding: 0;
|
| 22570 | border: 0;
|
| 22571 | margin: -1px;
|
| 22572 | block-size: 1px;
|
| 22573 | clip: rect(0, 0, 0, 0);
|
| 22574 | inline-size: 1px;
|
| 22575 | visibility: inherit;
|
| 22576 | white-space: nowrap;
|
| 22577 | position: static;
|
| 22578 | inline-size: 0.1875rem;
|
| 22579 | }
|
| 22580 | .cds--tabs.cds--tabs--contained.cds--tabs--full-width .cds--tabs__nav-item--close--hidden {
|
| 22581 | display: none;
|
| 22582 | }
|
| 22583 | .cds--tabs .cds--tabs__nav-item--close-icon {
|
| 22584 | box-sizing: border-box;
|
| 22585 | padding: 0;
|
| 22586 | border: 0;
|
| 22587 | margin: 0;
|
| 22588 | font-family: inherit;
|
| 22589 | font-size: 100%;
|
| 22590 | vertical-align: baseline;
|
| 22591 | display: inline-block;
|
| 22592 | padding: 0;
|
| 22593 | border: 0;
|
| 22594 | -webkit-appearance: none;
|
| 22595 | -moz-appearance: none;
|
| 22596 | appearance: none;
|
| 22597 | background: none;
|
| 22598 | cursor: pointer;
|
| 22599 | text-align: start;
|
| 22600 | inline-size: 100%;
|
| 22601 | block-size: 1.5rem;
|
| 22602 | inline-size: 1.5rem;
|
| 22603 | padding-block: 0.25rem;
|
| 22604 | padding-inline: 0.25rem;
|
| 22605 | pointer-events: auto;
|
| 22606 | }
|
| 22607 | .cds--tabs .cds--tabs__nav-item--close-icon *,
|
| 22608 | .cds--tabs .cds--tabs__nav-item--close-icon *::before,
|
| 22609 | .cds--tabs .cds--tabs__nav-item--close-icon *::after {
|
| 22610 | box-sizing: inherit;
|
| 22611 | }
|
| 22612 | .cds--tabs .cds--tabs__nav-item--close-icon::-moz-focus-inner {
|
| 22613 | border: 0;
|
| 22614 | }
|
| 22615 | .cds--tabs .cds--tabs__nav-item--close-icon svg {
|
| 22616 | block-size: 1rem;
|
| 22617 | fill: var(--cds-text-secondary, #525252);
|
| 22618 | inline-size: 1rem;
|
| 22619 | }
|
| 22620 | .cds--tabs .cds--tabs__nav-item--close-icon svg:hover {
|
| 22621 | fill: var(--cds-text-primary, #161616);
|
| 22622 | }
|
| 22623 | .cds--tabs .cds--tabs__nav-item--close-icon:hover {
|
| 22624 | background-color: var(--cds-layer-hover);
|
| 22625 | }
|
| 22626 | .cds--tabs .cds--tabs__nav-item--close-icon:focus, .cds--tabs .cds--tabs__nav-item--close-icon:active {
|
| 22627 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 22628 | outline-offset: -2px;
|
| 22629 | }
|
| 22630 | @media screen and (prefers-contrast) {
|
| 22631 | .cds--tabs .cds--tabs__nav-item--close-icon:focus, .cds--tabs .cds--tabs__nav-item--close-icon:active {
|
| 22632 | outline-style: dotted;
|
| 22633 | }
|
| 22634 | }
|
| 22635 | .cds--tabs .cds--tabs__nav-item:hover + .cds--tabs__nav-item--close .cds--tabs__nav-item--close-icon svg {
|
| 22636 | fill: var(--cds-text-primary, #161616);
|
| 22637 | }
|
| 22638 | .cds--tabs .cds--tabs__nav-item--close-icon--selected svg {
|
| 22639 | fill: var(--cds-text-primary, #161616);
|
| 22640 | }
|
| 22641 | .cds--tabs .cds--tabs__nav-item:hover + .cds--tabs__nav-item--close .cds--tabs__nav-item--close-icon--disabled,
|
| 22642 | .cds--tabs .cds--tabs__nav-item--close-icon--disabled,
|
| 22643 | .cds--tabs .cds--tabs__nav-item--close-icon--disabled:hover {
|
| 22644 | background-color: inherit;
|
| 22645 | cursor: not-allowed;
|
| 22646 | }
|
| 22647 | .cds--tabs .cds--tabs__nav-item:hover + .cds--tabs__nav-item--close .cds--tabs__nav-item--close-icon--disabled svg,
|
| 22648 | .cds--tabs .cds--tabs__nav-item--close-icon--disabled svg,
|
| 22649 | .cds--tabs .cds--tabs__nav-item--close-icon--disabled:hover svg {
|
| 22650 | fill: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 22651 | }
|
| 22652 | .cds--tabs .cds--tabs__nav-item:hover + .cds--tabs__nav-item--close .cds--tabs__nav-item--close-icon--disabled:focus, .cds--tabs .cds--tabs__nav-item:hover + .cds--tabs__nav-item--close .cds--tabs__nav-item--close-icon--disabled:active,
|
| 22653 | .cds--tabs .cds--tabs__nav-item--close-icon--disabled:focus,
|
| 22654 | .cds--tabs .cds--tabs__nav-item--close-icon--disabled:active,
|
| 22655 | .cds--tabs .cds--tabs__nav-item--close-icon--disabled:hover:focus,
|
| 22656 | .cds--tabs .cds--tabs__nav-item--close-icon--disabled:hover:active {
|
| 22657 | outline: 2px solid transparent;
|
| 22658 | outline-offset: -2px;
|
| 22659 | }
|
| 22660 | .cds--tabs .cds--tabs__nav-item--icon {
|
| 22661 | display: flex;
|
| 22662 | align-items: center;
|
| 22663 | padding-inline-start: 0.5rem;
|
| 22664 | }
|
| 22665 | .cds--tabs .cds--tabs__nav-item--icon-left {
|
| 22666 | display: flex;
|
| 22667 | align-items: center;
|
| 22668 | margin-block-start: -2px;
|
| 22669 | padding-inline-end: 0.5rem;
|
| 22670 | }
|
| 22671 | .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon {
|
| 22672 | padding-inline-start: var(--cds-layout-density-padding-inline-local);
|
| 22673 | }
|
| 22674 | .cds--tabs .cds--tabs__nav-link {
|
| 22675 | box-sizing: border-box;
|
| 22676 | padding: 0;
|
| 22677 | border: 0;
|
| 22678 | margin: 0;
|
| 22679 | font-family: inherit;
|
| 22680 | font-size: 100%;
|
| 22681 | vertical-align: baseline;
|
| 22682 | display: inline-block;
|
| 22683 | padding: 0;
|
| 22684 | border: 0;
|
| 22685 | -webkit-appearance: none;
|
| 22686 | -moz-appearance: none;
|
| 22687 | appearance: none;
|
| 22688 | background: none;
|
| 22689 | cursor: pointer;
|
| 22690 | text-align: start;
|
| 22691 | outline: 2px solid transparent;
|
| 22692 | outline-offset: -2px;
|
| 22693 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 22694 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 22695 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 22696 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 22697 | overflow: hidden;
|
| 22698 | border-block-end: 2px solid var(--cds-border-subtle);
|
| 22699 | color: var(--cds-text-secondary, #525252);
|
| 22700 | padding-inline: var(--cds-layout-density-padding-inline-local);
|
| 22701 | text-align: start;
|
| 22702 | text-decoration: none;
|
| 22703 | text-overflow: ellipsis;
|
| 22704 | transition: border 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 22705 | white-space: nowrap;
|
| 22706 | }
|
| 22707 | .cds--tabs .cds--tabs__nav-link *,
|
| 22708 | .cds--tabs .cds--tabs__nav-link *::before,
|
| 22709 | .cds--tabs .cds--tabs__nav-link *::after {
|
| 22710 | box-sizing: inherit;
|
| 22711 | }
|
| 22712 | .cds--tabs .cds--tabs__nav-link::-moz-focus-inner {
|
| 22713 | border: 0;
|
| 22714 | }
|
| 22715 | .cds--tabs .cds--tabs__nav-link:focus, .cds--tabs .cds--tabs__nav-link:active {
|
| 22716 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 22717 | outline-offset: -2px;
|
| 22718 | }
|
| 22719 | @media screen and (prefers-contrast) {
|
| 22720 | .cds--tabs .cds--tabs__nav-link:focus, .cds--tabs .cds--tabs__nav-link:active {
|
| 22721 | outline-style: dotted;
|
| 22722 | }
|
| 22723 | }
|
| 22724 | .cds--tabs.cds--tabs--contained:not(.cds--tabs--vertical) .cds--tabs__nav-link {
|
| 22725 | border-block-end: 0;
|
| 22726 | padding-inline: var(--cds-layout-density-padding-inline-local);
|
| 22727 | }
|
| 22728 | .cds--tabs.cds--tabs--contained:not(.cds--tabs--tall) .cds--tabs__nav-item-label {
|
| 22729 | line-height: calc(3rem - (0.5rem * 2));
|
| 22730 | }
|
| 22731 | .cds--tabs.cds--tabs--contained .cds--tabs__nav-item-secondary-label {
|
| 22732 | font-size: var(--cds-label-01-font-size, 0.75rem);
|
| 22733 | font-weight: var(--cds-label-01-font-weight, 400);
|
| 22734 | line-height: var(--cds-label-01-line-height, 1.33333);
|
| 22735 | letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
|
| 22736 | min-block-size: 1rem;
|
| 22737 | }
|
| 22738 | .cds--tabs.cds--tabs--vertical:not(.cds--tabs--tall) .cds--tabs__nav-item-label {
|
| 22739 | line-height: var(--cds-body-compact-01-line-height);
|
| 22740 | }
|
| 22741 | .cds--tabs.cds--tabs__icon--default .cds--tab--list, .cds--tabs.cds--tabs__icon--lg .cds--tab--list {
|
| 22742 | overflow-x: visible;
|
| 22743 | }
|
| 22744 | .cds--tabs .cds--tabs__nav-item--icon-only, .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon-only {
|
| 22745 | display: flex;
|
| 22746 | align-items: center;
|
| 22747 | justify-content: center;
|
| 22748 | padding: 0;
|
| 22749 | block-size: var(--cds-layout-size-height-local);
|
| 22750 | inline-size: var(--cds-layout-size-height-local);
|
| 22751 | }
|
| 22752 | .cds--tabs .cds--tabs__nav-item--icon-only .cds--tabs__nav-item-label, .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon-only .cds--tabs__nav-item-label {
|
| 22753 | line-height: 0;
|
| 22754 | }
|
| 22755 | .cds--tabs:not(.cds--tabs--contained) .cds--tabs__nav-item:not(.cds--tabs__nav-item--selected):not(.cds--tabs__nav-item--disabled):hover {
|
| 22756 | border-block-end: 2px solid var(--cds-border-strong);
|
| 22757 | color: var(--cds-text-primary, #161616);
|
| 22758 | }
|
| 22759 | .cds--tabs.cds--tabs--contained .cds--tabs__nav-item:not(.cds--tabs__nav-item--selected):not(.cds--tabs__nav-item--disabled):not(.cds--tabs__nav-item--hover-off):hover {
|
| 22760 | background-color: var(--cds-layer-accent-hover);
|
| 22761 | color: var(--cds-text-primary, #161616);
|
| 22762 | }
|
| 22763 | .cds--tabs.cds--tabs--vertical .cds--tabs__nav-item:not(.cds--tabs__nav-item--selected):not(.cds--tabs__nav-item--disabled):not(.cds--tabs__nav-item--hover-off):hover {
|
| 22764 | background-color: var(--cds-layer-hover);
|
| 22765 | box-shadow: inset 3px 0 0 0 var(--cds-border-strong);
|
| 22766 | }
|
| 22767 | .cds--tabs .cds--tabs__nav-item--selected {
|
| 22768 | border-block-end: 2px solid var(--cds-border-interactive, #0f62fe);
|
| 22769 | transition: color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 22770 | }
|
| 22771 | .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--selected + .cds--tabs__nav-item {
|
| 22772 | box-shadow: none;
|
| 22773 | }
|
| 22774 | .cds--tabs.cds--tabs--contained .cds--tabs__nav-item.cds--tabs__nav-item--selected {
|
| 22775 | box-shadow: inset 0 2px 0 0 var(--cds-border-interactive, #0f62fe);
|
| 22776 | }
|
| 22777 | .cds--tabs.cds--tabs--vertical .cds--tabs__nav-item.cds--tabs__nav-item--selected {
|
| 22778 | border-inline: none;
|
| 22779 | box-shadow: inset 3px 0 0 0 var(--cds-border-interactive, #0f62fe);
|
| 22780 | }
|
| 22781 | .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--selected,
|
| 22782 | .cds--tabs .cds--tabs__nav-item--selected,
|
| 22783 | .cds--tabs .cds--tabs__nav-item--selected:focus .cds--tabs__nav-link:focus,
|
| 22784 | .cds--tabs .cds--tabs__nav-item--selected:active .cds--tabs__nav-link:active {
|
| 22785 | font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
|
| 22786 | font-weight: var(--cds-heading-compact-01-font-weight, 600);
|
| 22787 | line-height: var(--cds-heading-compact-01-line-height, 1.28572);
|
| 22788 | letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
|
| 22789 | color: var(--cds-text-primary, #161616);
|
| 22790 | }
|
| 22791 | .cds--tabs.cds--tabs--contained:not(.cds--tabs--tall) .cds--tabs__nav-item--selected, .cds--tabs.cds--tabs--contained:not(.cds--tabs--tall) .cds--tabs__nav-item--selected:hover {
|
| 22792 | line-height: calc(3rem - (0.5rem * 2));
|
| 22793 | }
|
| 22794 | .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--selected, .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--selected:hover {
|
| 22795 | background-color: var(--cds-layer);
|
| 22796 | }
|
| 22797 | .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--selected .cds--tabs__nav-link:focus,
|
| 22798 | .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--selected .cds--tabs__nav-link:active, .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--selected:hover .cds--tabs__nav-link:focus,
|
| 22799 | .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--selected:hover .cds--tabs__nav-link:active {
|
| 22800 | box-shadow: none;
|
| 22801 | }
|
| 22802 | .cds--tabs.cds--tabs--light.cds--tabs--contained .cds--tabs__nav-item--selected, .cds--tabs.cds--tabs--light.cds--tabs--contained .cds--tabs__nav-item--selected:hover {
|
| 22803 | background-color: var(--cds-background, #ffffff);
|
| 22804 | }
|
| 22805 | .cds--tabs .cds--tabs__nav-item--disabled {
|
| 22806 | background-color: transparent;
|
| 22807 | border-block-end: 2px solid var(--cds-border-disabled, #c6c6c6);
|
| 22808 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 22809 | outline: none;
|
| 22810 | }
|
| 22811 | .cds--tabs .cds--tabs__nav-item--disabled:hover {
|
| 22812 | border-block-end: 2px solid var(--cds-border-disabled, #c6c6c6);
|
| 22813 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 22814 | cursor: not-allowed;
|
| 22815 | }
|
| 22816 | .cds--tabs.cds--tabs--contained .cds--tabs__nav-item.cds--tabs__nav-item--disabled, .cds--tabs.cds--tabs--contained .cds--tabs__nav-item.cds--tabs__nav-item--disabled:hover {
|
| 22817 | background-color: var(--cds-button-disabled, #c6c6c6);
|
| 22818 | }
|
| 22819 | .cds--tabs.cds--tabs--vertical .cds--tabs__nav-item.cds--tabs__nav-item--disabled, .cds--tabs.cds--tabs--vertical .cds--tabs__nav-item.cds--tabs__nav-item--disabled:hover {
|
| 22820 | background-color: var(--cds-layer);
|
| 22821 | border-block-end: 1px solid var(--cds-border-subtle);
|
| 22822 | }
|
| 22823 | .cds--tabs .cds--tabs__nav-item--disabled:focus,
|
| 22824 | .cds--tabs .cds--tabs__nav-item--disabled:active {
|
| 22825 | border-block-end: 2px solid var(--cds-border-disabled, #c6c6c6);
|
| 22826 | outline: none;
|
| 22827 | pointer-events: none;
|
| 22828 | }
|
| 22829 | .cds--tabs .cds--tabs--light .cds--tabs__nav-item--disabled .cds--tabs__nav-link {
|
| 22830 | border-block-end-color: var(--cds-border-subtle);
|
| 22831 | }
|
| 22832 | .cds--tabs .cds--tabs--light .cds--tabs__nav-item--disabled:hover .cds--tabs__nav-link {
|
| 22833 | border-block-end-color: var(--cds-border-subtle);
|
| 22834 | }
|
| 22835 | .cds--tabs .cds--tabs--light .cds--tabs__nav-item--disabled .cds--tabs__nav-link:focus,
|
| 22836 | .cds--tabs .cds--tabs--light .cds--tabs__nav-item--disabled .cds--tabs__nav-link:active {
|
| 22837 | border-block-end-color: var(--cds-border-subtle);
|
| 22838 | }
|
| 22839 | .cds--tabs.cds--tabs--contained:not(.cds--tabs--vertical) .cds--tabs__nav-item--disabled {
|
| 22840 | border-block-end: none;
|
| 22841 | color: var(--cds-text-on-color-disabled, #8d8d8d);
|
| 22842 | }
|
| 22843 |
|
| 22844 | .cds--tab-content {
|
| 22845 | padding: var(--cds-layout-density-padding-inline-local);
|
| 22846 | }
|
| 22847 | .cds--tab-content:focus {
|
| 22848 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 22849 | outline-offset: -2px;
|
| 22850 | }
|
| 22851 | @media screen and (prefers-contrast) {
|
| 22852 | .cds--tab-content:focus {
|
| 22853 | outline-style: dotted;
|
| 22854 | }
|
| 22855 | }
|
| 22856 |
|
| 22857 | .cds--tabs--contained ~ .cds--tab-content {
|
| 22858 | background: var(--cds-layer);
|
| 22859 | }
|
| 22860 | .cds--tabs--contained ~ .cds--tab-content > * {
|
| 22861 | --cds-layer: var(--cds-layer-02, #ffffff);
|
| 22862 | --cds-layer-active: var(--cds-layer-active-02, #c6c6c6);
|
| 22863 | --cds-layer-hover: var(--cds-layer-hover-02, #e8e8e8);
|
| 22864 | --cds-layer-selected: var(--cds-layer-selected-02, #e0e0e0);
|
| 22865 | --cds-layer-selected-hover: var(--cds-layer-selected-hover-02, #d1d1d1);
|
| 22866 | --cds-layer-accent: var(--cds-layer-accent-02, #e0e0e0);
|
| 22867 | --cds-layer-accent-hover: var(--cds-layer-accent-hover-02, #d1d1d1);
|
| 22868 | --cds-layer-accent-active: var(--cds-layer-accent-active-02, #a8a8a8);
|
| 22869 | --cds-field: var(--cds-field-02, #ffffff);
|
| 22870 | --cds-field-hover: var(--cds-field-hover-02, #e8e8e8);
|
| 22871 | --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
|
| 22872 | --cds-border-subtle-selected: var(--cds-border-subtle-selected-02, #c6c6c6);
|
| 22873 | --cds-border-strong: var(--cds-border-strong-02, #8d8d8d);
|
| 22874 | --cds-border-tile: var(--cds-border-tile-02, #a8a8a8);
|
| 22875 | }
|
| 22876 |
|
| 22877 | .cds--tabs--vertical ~ .cds--tab-content {
|
| 22878 | grid-column: 3/-1;
|
| 22879 | overflow-y: auto;
|
| 22880 | }
|
| 22881 | .cds--tabs--vertical ~ .cds--tab-content .cds--text-input--fluid .cds--text-input,
|
| 22882 | .cds--tabs--vertical ~ .cds--tab-content .cds--text-area--fluid .cds--text-area__wrapper,
|
| 22883 | .cds--tabs--vertical ~ .cds--tab-content .cds--text-area--fluid .cds--text-area,
|
| 22884 | .cds--tabs--vertical ~ .cds--tab-content .cds--search--fluid .cds--search-input,
|
| 22885 | .cds--tabs--vertical ~ .cds--tab-content .cds--select--fluid .cds--select-input,
|
| 22886 | .cds--tabs--vertical ~ .cds--tab-content .cds--text-area--fluid .cds--text-area__wrapper[data-invalid] .cds--text-area__divider + .cds--form-requirement,
|
| 22887 | .cds--tabs--vertical ~ .cds--tab-content .cds--list-box__wrapper--fluid .cds--list-box,
|
| 22888 | .cds--tabs--vertical ~ .cds--tab-content .cds--list-box__wrapper--fluid.cds--list-box__wrapper,
|
| 22889 | .cds--tabs--vertical ~ .cds--tab-content .cds--number-input--fluid input[type=number],
|
| 22890 | .cds--tabs--vertical ~ .cds--tab-content .cds--number-input--fluid .cds--number__control-btn::before,
|
| 22891 | .cds--tabs--vertical ~ .cds--tab-content .cds--number-input--fluid .cds--number__control-btn::after,
|
| 22892 | .cds--tabs--vertical ~ .cds--tab-content .cds--date-picker--fluid .ccdsds--date-picker-input__wrapper .cds--date-picker__input {
|
| 22893 | background-color: var(--cds-field-01, #f4f4f4);
|
| 22894 | }
|
| 22895 | .cds--tabs--vertical ~ .cds--tab-content .cds--list-box__wrapper--fluid .cds--list-box__menu {
|
| 22896 | background-color: var(--cds-layer-01, #f4f4f4);
|
| 22897 | }
|
| 22898 | .cds--tabs--vertical ~ .cds--tab-content .cds--list-box__menu-item:hover {
|
| 22899 | background-color: var(--cds-layer-hover-02, #e8e8e8);
|
| 22900 | }
|
| 22901 | .cds--tabs--vertical ~ .cds--tab-content .cds--list-box__menu-item--active {
|
| 22902 | background-color: var(--cds-layer-selected-02, #e0e0e0);
|
| 22903 | }
|
| 22904 | .cds--tabs--vertical ~ .cds--tab-content .cds--list-box__menu-item--active:hover {
|
| 22905 | background-color: var(--cds-layer-selected-hover-02, #d1d1d1);
|
| 22906 | }
|
| 22907 | .cds--tabs--vertical ~ .cds--tab-content .cds--number-input--fluid .cds--number__control-btn:hover::before,
|
| 22908 | .cds--tabs--vertical ~ .cds--tab-content .cds--number-input--fluid .cds--number__control-btn:hover::after {
|
| 22909 | background-color: var(--cds-field-hover);
|
| 22910 | }
|
| 22911 | .cds--tabs--vertical ~ .cds--tab-content .cds--number-input--fluid .cds--number__control-btn:focus::before,
|
| 22912 | .cds--tabs--vertical ~ .cds--tab-content .cds--number-input--fluid .cds--number__control-btn:focus::after {
|
| 22913 | border-inline-start: 2px solid var(--cds-focus, #0f62fe);
|
| 22914 | }
|
| 22915 | @media (min-width: 66rem) {
|
| 22916 | .cds--tabs--vertical ~ .cds--tab-content {
|
| 22917 | grid-column: 5/-1;
|
| 22918 | }
|
| 22919 | }
|
| 22920 |
|
| 22921 | .cds--tab-content--interactive:focus {
|
| 22922 | outline: none;
|
| 22923 | }
|
| 22924 |
|
| 22925 | .cds--tabs.cds--skeleton {
|
| 22926 | cursor: default;
|
| 22927 | pointer-events: none;
|
| 22928 | }
|
| 22929 |
|
| 22930 | .cds--skeleton.cds--tabs:not(.cds--tabs--contained) .cds--tabs__nav-link {
|
| 22931 | border-block-end: 2px solid var(--cds-skeleton-element, #c6c6c6);
|
| 22932 | }
|
| 22933 |
|
| 22934 | .cds--tabs.cds--skeleton .cds--tabs__nav-link {
|
| 22935 | display: flex;
|
| 22936 | align-items: center;
|
| 22937 | padding: 0 var(--cds-layout-density-padding-inline-local);
|
| 22938 | block-size: 100%;
|
| 22939 | inline-size: 10rem;
|
| 22940 | }
|
| 22941 |
|
| 22942 | .cds--tabs.cds--skeleton .cds--tabs__nav-link span {
|
| 22943 | position: relative;
|
| 22944 | padding: 0;
|
| 22945 | border: none;
|
| 22946 | background: var(--cds-skeleton-background, #e8e8e8);
|
| 22947 | box-shadow: none;
|
| 22948 | pointer-events: none;
|
| 22949 | display: block;
|
| 22950 | block-size: 0.875rem;
|
| 22951 | inline-size: 100%;
|
| 22952 | }
|
| 22953 | .cds--tabs.cds--skeleton .cds--tabs__nav-link span:hover, .cds--tabs.cds--skeleton .cds--tabs__nav-link span:focus, .cds--tabs.cds--skeleton .cds--tabs__nav-link span:active {
|
| 22954 | border: none;
|
| 22955 | cursor: default;
|
| 22956 | outline: none;
|
| 22957 | }
|
| 22958 | .cds--tabs.cds--skeleton .cds--tabs__nav-link span::before {
|
| 22959 | position: absolute;
|
| 22960 | animation: 3000ms ease-in-out cds--skeleton infinite;
|
| 22961 | background: var(--cds-skeleton-element, #c6c6c6);
|
| 22962 | block-size: 100%;
|
| 22963 | content: "";
|
| 22964 | inline-size: 100%;
|
| 22965 | will-change: transform-origin, transform, opacity;
|
| 22966 | }
|
| 22967 | @media (prefers-reduced-motion: reduce) {
|
| 22968 | .cds--tabs.cds--skeleton .cds--tabs__nav-link span::before {
|
| 22969 | animation: none;
|
| 22970 | }
|
| 22971 | }
|
| 22972 |
|
| 22973 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 22974 | .cds--tabs__nav-item .cds--tabs__nav-item--selected .cds--tabs__nav-item--selected {
|
| 22975 | color: Highlight;
|
| 22976 | outline: 1px solid Highlight;
|
| 22977 | }
|
| 22978 | }
|
| 22979 |
|
| 22980 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 22981 | .cds--tabs .cds--tabs__nav-item--disabled .cds--tabs__nav-link {
|
| 22982 | color: GrayText;
|
| 22983 | fill: GrayText;
|
| 22984 | }
|
| 22985 | }
|
| 22986 |
|
| 22987 | .cds--tile-group html {
|
| 22988 | font-size: 100%;
|
| 22989 | }
|
| 22990 | .cds--tile-group body {
|
| 22991 | font-weight: 400;
|
| 22992 | font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
|
| 22993 | -moz-osx-font-smoothing: grayscale;
|
| 22994 | -webkit-font-smoothing: antialiased;
|
| 22995 | text-rendering: optimizeLegibility;
|
| 22996 | }
|
| 22997 | .cds--tile-group code {
|
| 22998 | font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
|
| 22999 | }
|
| 23000 | .cds--tile-group strong {
|
| 23001 | font-weight: 600;
|
| 23002 | }
|
| 23003 |
|
| 23004 | .cds--tile {
|
| 23005 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 23006 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 23007 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 23008 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 23009 | --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
|
| 23010 | position: relative;
|
| 23011 | display: block;
|
| 23012 | padding: var(--cds-layout-density-padding-inline-local);
|
| 23013 | background-color: var(--cds-layer);
|
| 23014 | min-block-size: 4rem;
|
| 23015 | min-inline-size: 8rem;
|
| 23016 | outline: 2px solid transparent;
|
| 23017 | outline-offset: -2px;
|
| 23018 | }
|
| 23019 | .cds--tile:focus {
|
| 23020 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 23021 | outline-offset: -2px;
|
| 23022 | }
|
| 23023 | @media screen and (prefers-contrast) {
|
| 23024 | .cds--tile:focus {
|
| 23025 | outline-style: dotted;
|
| 23026 | }
|
| 23027 | }
|
| 23028 |
|
| 23029 | .cds--tile--light {
|
| 23030 | background-color: var(--cds-layer-02, #ffffff);
|
| 23031 | }
|
| 23032 |
|
| 23033 | .cds--tile--clickable,
|
| 23034 | .cds--tile--selectable {
|
| 23035 | box-sizing: border-box;
|
| 23036 | padding: 0;
|
| 23037 | border: 0;
|
| 23038 | margin: 0;
|
| 23039 | font-family: inherit;
|
| 23040 | font-size: 100%;
|
| 23041 | vertical-align: baseline;
|
| 23042 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 23043 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 23044 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 23045 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 23046 | padding: var(--cds-layout-density-padding-inline-local);
|
| 23047 | cursor: pointer;
|
| 23048 | transition: 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 23049 | }
|
| 23050 | .cds--tile--clickable *,
|
| 23051 | .cds--tile--clickable *::before,
|
| 23052 | .cds--tile--clickable *::after,
|
| 23053 | .cds--tile--selectable *,
|
| 23054 | .cds--tile--selectable *::before,
|
| 23055 | .cds--tile--selectable *::after {
|
| 23056 | box-sizing: inherit;
|
| 23057 | }
|
| 23058 | .cds--tile--clickable:hover,
|
| 23059 | .cds--tile--selectable:hover {
|
| 23060 | background: var(--cds-layer-hover);
|
| 23061 | }
|
| 23062 |
|
| 23063 | .cds--tile--clickable {
|
| 23064 | color: var(--cds-text-primary, #161616);
|
| 23065 | text-decoration: none;
|
| 23066 | }
|
| 23067 | .cds--tile--clickable:focus {
|
| 23068 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 23069 | outline-offset: -2px;
|
| 23070 | text-decoration: none;
|
| 23071 | }
|
| 23072 | @media screen and (prefers-contrast) {
|
| 23073 | .cds--tile--clickable:focus {
|
| 23074 | outline-style: dotted;
|
| 23075 | }
|
| 23076 | }
|
| 23077 | .cds--tile--clickable:hover .cds--tile__checkmark, .cds--tile--clickable:focus .cds--tile__checkmark {
|
| 23078 | opacity: 1;
|
| 23079 | }
|
| 23080 |
|
| 23081 | .cds--tile--expandable::-moz-focus-inner {
|
| 23082 | border: 0;
|
| 23083 | }
|
| 23084 |
|
| 23085 | .cds--tile--clickable:hover,
|
| 23086 | .cds--tile--clickable:active,
|
| 23087 | .cds--tile--clickable:visited,
|
| 23088 | .cds--tile--clickable:visited:hover {
|
| 23089 | color: var(--cds-text-primary, #161616);
|
| 23090 | text-decoration: none;
|
| 23091 | }
|
| 23092 |
|
| 23093 | .cds--tile--clickable.cds--link--disabled,
|
| 23094 | .cds--tile--clickable:hover.cds--link--disabled {
|
| 23095 | display: block;
|
| 23096 | padding: var(--cds-layout-density-padding-inline-local);
|
| 23097 | background-color: var(--cds-layer);
|
| 23098 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 23099 | cursor: not-allowed;
|
| 23100 | }
|
| 23101 |
|
| 23102 | .cds--tile--clickable .cds--tile--icon,
|
| 23103 | .cds--tile--clickable.cds--link--disabled .cds--tile--disabled-icon {
|
| 23104 | position: absolute;
|
| 23105 | inset-block-end: var(--cds-layout-density-padding-inline-local);
|
| 23106 | inset-inline-end: var(--cds-layout-density-padding-inline-local);
|
| 23107 | }
|
| 23108 |
|
| 23109 | .cds--tile--clickable .cds--tile--icon {
|
| 23110 | fill: var(--cds-icon-interactive, #0f62fe);
|
| 23111 | }
|
| 23112 |
|
| 23113 | .cds--tile--clickable.cds--link--disabled .cds--tile--disabled-icon {
|
| 23114 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 23115 | }
|
| 23116 |
|
| 23117 | .cds--tile--clickable.cds--link--disabled .cds--tile--icon {
|
| 23118 | display: none;
|
| 23119 | }
|
| 23120 |
|
| 23121 | .cds--tile--selectable {
|
| 23122 | border: 1px solid transparent;
|
| 23123 | padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);
|
| 23124 | }
|
| 23125 |
|
| 23126 | .cds--tile__checkmark {
|
| 23127 | position: absolute;
|
| 23128 | border: none;
|
| 23129 | background: transparent;
|
| 23130 | block-size: 1rem;
|
| 23131 | inset-block-start: var(--cds-layout-density-padding-inline-local);
|
| 23132 | inset-inline-end: var(--cds-layout-density-padding-inline-local);
|
| 23133 | transition: 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 23134 | opacity: 0;
|
| 23135 | }
|
| 23136 | .cds--tile__checkmark svg {
|
| 23137 | border-radius: 50%;
|
| 23138 | fill: var(--cds-icon-secondary, #525252);
|
| 23139 | }
|
| 23140 | .cds--tile__checkmark:focus {
|
| 23141 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 23142 | outline-offset: -2px;
|
| 23143 | }
|
| 23144 | @media screen and (prefers-contrast) {
|
| 23145 | .cds--tile__checkmark:focus {
|
| 23146 | outline-style: dotted;
|
| 23147 | }
|
| 23148 | }
|
| 23149 |
|
| 23150 | .cds--tile__checkmark--persistent {
|
| 23151 | opacity: 1;
|
| 23152 | }
|
| 23153 |
|
| 23154 | .cds--tile__chevron {
|
| 23155 | position: absolute;
|
| 23156 | display: flex;
|
| 23157 | align-items: center;
|
| 23158 | justify-content: center;
|
| 23159 | block-size: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);
|
| 23160 | inline-size: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);
|
| 23161 | inset-block-end: 0;
|
| 23162 | inset-inline-end: 0;
|
| 23163 | }
|
| 23164 | .cds--tile__chevron svg {
|
| 23165 | fill: var(--cds-icon-primary, #161616);
|
| 23166 | transform-origin: center;
|
| 23167 | transition: 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 23168 | }
|
| 23169 | @media screen and (prefers-reduced-motion: reduce) {
|
| 23170 | .cds--tile__chevron svg {
|
| 23171 | transition: none;
|
| 23172 | }
|
| 23173 | }
|
| 23174 | @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
|
| 23175 | .cds--tile__chevron svg {
|
| 23176 | fill: ButtonText;
|
| 23177 | }
|
| 23178 | }
|
| 23179 |
|
| 23180 | .cds--tile__chevron--interactive {
|
| 23181 | box-sizing: border-box;
|
| 23182 | padding: 0;
|
| 23183 | border: 0;
|
| 23184 | margin: 0;
|
| 23185 | font-family: inherit;
|
| 23186 | font-size: 100%;
|
| 23187 | vertical-align: baseline;
|
| 23188 | display: inline-block;
|
| 23189 | padding: 0;
|
| 23190 | border: 0;
|
| 23191 | -webkit-appearance: none;
|
| 23192 | -moz-appearance: none;
|
| 23193 | appearance: none;
|
| 23194 | background: none;
|
| 23195 | cursor: pointer;
|
| 23196 | text-align: start;
|
| 23197 | inline-size: 100%;
|
| 23198 | position: absolute;
|
| 23199 | display: flex;
|
| 23200 | align-items: center;
|
| 23201 | justify-content: center;
|
| 23202 | block-size: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);
|
| 23203 | inline-size: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);
|
| 23204 | inset-block-end: 0;
|
| 23205 | inset-inline-end: 0;
|
| 23206 | }
|
| 23207 | .cds--tile__chevron--interactive *,
|
| 23208 | .cds--tile__chevron--interactive *::before,
|
| 23209 | .cds--tile__chevron--interactive *::after {
|
| 23210 | box-sizing: inherit;
|
| 23211 | }
|
| 23212 | .cds--tile__chevron--interactive::-moz-focus-inner {
|
| 23213 | border: 0;
|
| 23214 | }
|
| 23215 | .cds--tile__chevron--interactive:focus {
|
| 23216 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 23217 | outline-offset: -2px;
|
| 23218 | }
|
| 23219 | .cds--tile__chevron--interactive:hover {
|
| 23220 | background-color: var(--cds-layer-hover);
|
| 23221 | cursor: pointer;
|
| 23222 | }
|
| 23223 |
|
| 23224 | .cds--tile--expandable {
|
| 23225 | position: relative;
|
| 23226 | overflow: hidden;
|
| 23227 | border: 0;
|
| 23228 | color: inherit;
|
| 23229 | cursor: pointer;
|
| 23230 | font-family: inherit;
|
| 23231 | font-size: inherit;
|
| 23232 | inline-size: 100%;
|
| 23233 | text-align: start;
|
| 23234 | transition: max-height 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 23235 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 23236 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 23237 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 23238 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 23239 | }
|
| 23240 | .cds--tile--expandable:hover {
|
| 23241 | background: var(--cds-layer-hover);
|
| 23242 | }
|
| 23243 |
|
| 23244 | .cds--tile--expandable.cds--tile--expandable--interactive {
|
| 23245 | border: none;
|
| 23246 | cursor: default;
|
| 23247 | transition: max-height 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 23248 | }
|
| 23249 | .cds--tile--expandable.cds--tile--expandable--interactive:hover {
|
| 23250 | background-color: var(--cds-layer);
|
| 23251 | }
|
| 23252 | .cds--tile--expandable.cds--tile--expandable--interactive:focus {
|
| 23253 | outline: none;
|
| 23254 | }
|
| 23255 |
|
| 23256 | .cds--tile--expandable--interactive:focus {
|
| 23257 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 23258 | outline-offset: -2px;
|
| 23259 | }
|
| 23260 | @media screen and (prefers-contrast) {
|
| 23261 | .cds--tile--expandable--interactive:focus {
|
| 23262 | outline-style: dotted;
|
| 23263 | }
|
| 23264 | }
|
| 23265 |
|
| 23266 | .cds--tile-content__below-the-fold {
|
| 23267 | display: block;
|
| 23268 | opacity: 0;
|
| 23269 | transition: opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9), visibility 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 23270 | visibility: hidden;
|
| 23271 | }
|
| 23272 |
|
| 23273 | .cds--tile--is-expanded {
|
| 23274 | overflow: visible;
|
| 23275 | transition: max-height 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 23276 | }
|
| 23277 | .cds--tile--is-expanded .cds--tile__chevron svg {
|
| 23278 | transform: rotate(180deg);
|
| 23279 | }
|
| 23280 | .cds--tile--is-expanded .cds--tile-content__below-the-fold {
|
| 23281 | opacity: 1;
|
| 23282 | transition: opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9), visibility 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 23283 | visibility: inherit;
|
| 23284 | }
|
| 23285 | @media not all and (resolution >= 0.001dpcm) {
|
| 23286 | @supports (-webkit-appearance: none) and (stroke-color: transparent) {
|
| 23287 | .cds--tile--is-expanded .cds--tile-content__below-the-fold {
|
| 23288 | overflow-y: auto;
|
| 23289 | }
|
| 23290 | }
|
| 23291 | }
|
| 23292 |
|
| 23293 | .cds--tile--is-selected {
|
| 23294 | border: 1px solid var(--cds-layer-selected-inverse, #161616);
|
| 23295 | }
|
| 23296 |
|
| 23297 | .cds--tile--is-selected .cds--tile__checkmark {
|
| 23298 | opacity: 1;
|
| 23299 | }
|
| 23300 |
|
| 23301 | .cds--tile--is-selected .cds--tile__checkmark svg {
|
| 23302 | fill: var(--cds-icon-primary, #161616);
|
| 23303 | }
|
| 23304 | @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
|
| 23305 | .cds--tile--is-selected .cds--tile__checkmark svg {
|
| 23306 | fill: ButtonText;
|
| 23307 | }
|
| 23308 | }
|
| 23309 |
|
| 23310 | .cds--tile-content {
|
| 23311 | block-size: 100%;
|
| 23312 | inline-size: 100%;
|
| 23313 | }
|
| 23314 |
|
| 23315 | .cds--tile-input {
|
| 23316 | position: absolute;
|
| 23317 | overflow: hidden;
|
| 23318 | padding: 0;
|
| 23319 | border: 0;
|
| 23320 | margin: -1px;
|
| 23321 | block-size: 1px;
|
| 23322 | clip: rect(0, 0, 0, 0);
|
| 23323 | inline-size: 1px;
|
| 23324 | visibility: inherit;
|
| 23325 | white-space: nowrap;
|
| 23326 | }
|
| 23327 |
|
| 23328 | .cds--tile-input:focus + .cds--tile {
|
| 23329 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 23330 | outline-offset: -2px;
|
| 23331 | }
|
| 23332 | @media screen and (prefers-contrast) {
|
| 23333 | .cds--tile-input:focus + .cds--tile {
|
| 23334 | outline-style: dotted;
|
| 23335 | }
|
| 23336 | }
|
| 23337 |
|
| 23338 | .cds--tile--disabled.cds--tile--selectable {
|
| 23339 | background-color: var(--cds-layer);
|
| 23340 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 23341 | cursor: not-allowed;
|
| 23342 | }
|
| 23343 |
|
| 23344 | .cds--tile--disabled.cds--tile--selectable.cds--tile--light {
|
| 23345 | background-color: var(--cds-layer-02, #ffffff);
|
| 23346 | }
|
| 23347 |
|
| 23348 | .cds--tile--disabled.cds--tile--is-selected {
|
| 23349 | border-color: var(--cds-border-disabled, #c6c6c6);
|
| 23350 | }
|
| 23351 |
|
| 23352 | .cds--tile--disabled .cds--tile__checkmark svg {
|
| 23353 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 23354 | }
|
| 23355 |
|
| 23356 | .cds--tile > .cds--slug,
|
| 23357 | .cds--tile--expandable > div > .cds--slug,
|
| 23358 | .cds--tile--clickable .cds--tile--slug-icon {
|
| 23359 | position: absolute;
|
| 23360 | inset-block-start: 1rem;
|
| 23361 | inset-inline-end: 1rem;
|
| 23362 | }
|
| 23363 |
|
| 23364 | .cds--tile.cds--tile--selectable > .cds--slug {
|
| 23365 | inset-inline-end: 2.5rem;
|
| 23366 | }
|
| 23367 |
|
| 23368 | .cds--tile.cds--tile--selectable.cds--tile--radio > .cds--slug {
|
| 23369 | inset-inline-end: 1rem;
|
| 23370 | transition: inset-inline-end 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 23371 | }
|
| 23372 |
|
| 23373 | .cds--tile.cds--tile--selectable.cds--tile--radio.cds--tile--is-selected > .cds--slug {
|
| 23374 | inset-inline-end: 2.5rem;
|
| 23375 | }
|
| 23376 |
|
| 23377 | .cds--tile.cds--tile--clickable > .cds--slug {
|
| 23378 | pointer-events: none;
|
| 23379 | }
|
| 23380 |
|
| 23381 | .cds--tile--slug.cds--tile {
|
| 23382 | background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
|
| 23383 | border: 1px solid transparent;
|
| 23384 | box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 4px 8px 0 var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
|
| 23385 | }
|
| 23386 |
|
| 23387 | .cds--tile--slug.cds--tile--expandable:hover {
|
| 23388 | background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
|
| 23389 | }
|
| 23390 |
|
| 23391 | .cds--tile--slug.cds--tile--selectable::before,
|
| 23392 | .cds--tile--slug.cds--tile--selectable::after,
|
| 23393 | .cds--tile--slug.cds--tile--clickable::before {
|
| 23394 | position: absolute;
|
| 23395 | display: block;
|
| 23396 | block-size: 100%;
|
| 23397 | content: "";
|
| 23398 | inline-size: 100%;
|
| 23399 | inset-block-start: 0;
|
| 23400 | inset-inline-start: 0;
|
| 23401 | opacity: 0;
|
| 23402 | transition: opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 23403 | }
|
| 23404 |
|
| 23405 | .cds--tile--slug.cds--tile--selectable::before,
|
| 23406 | .cds--tile--slug.cds--tile--clickable::before {
|
| 23407 | background: linear-gradient(to top, var(--cds-ai-aura-hover-start, rgba(69, 137, 255, 0.32)) 0%, 15%, var(--cds-ai-aura-hover-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-ai-aura-hover-background, #edf5ff), var(--cds-ai-aura-hover-background, #edf5ff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-ai-aura-hover-background, #edf5ff), var(--cds-ai-aura-hover-background, #edf5ff)) border-box;
|
| 23408 | box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
|
| 23409 | }
|
| 23410 |
|
| 23411 | .cds--tile--slug.cds--tile--selectable:hover::before,
|
| 23412 | .cds--tile--slug.cds--tile--clickable:hover::before {
|
| 23413 | opacity: 1;
|
| 23414 | }
|
| 23415 |
|
| 23416 | .cds--tile--slug.cds--tile--selectable:focus,
|
| 23417 | .cds--tile--slug.cds--tile--clickable:focus,
|
| 23418 | .cds--tile-input:focus + .cds--tile--slug.cds--tile {
|
| 23419 | outline-offset: -1px;
|
| 23420 | }
|
| 23421 |
|
| 23422 | .cds--tile--slug.cds--tile--selectable::after {
|
| 23423 | background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box, linear-gradient(to bottom, var(--cds-border-inverse, #161616), var(--cds-border-inverse, #161616)) border-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
|
| 23424 | box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 4px 8px 0 var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
|
| 23425 | }
|
| 23426 |
|
| 23427 | .cds--tile--slug.cds--tile--selectable:hover::after {
|
| 23428 | opacity: 0;
|
| 23429 | }
|
| 23430 |
|
| 23431 | .cds--tile--slug.cds--tile--is-selected::after {
|
| 23432 | opacity: 1;
|
| 23433 | }
|
| 23434 |
|
| 23435 | .cds--tile--slug.cds--tile--is-selected {
|
| 23436 | border-color: var(--cds-border-inverse, #161616);
|
| 23437 | }
|
| 23438 |
|
| 23439 | .cds--tile--slug.cds--tile--selectable .cds--tile-content,
|
| 23440 | .cds--tile--slug.cds--tile--clickable .cds--tile-content {
|
| 23441 | position: relative;
|
| 23442 | cursor: pointer;
|
| 23443 | }
|
| 23444 |
|
| 23445 | .cds--tile--slug.cds--tile--selectable .cds--tile-content,
|
| 23446 | .cds--tile--slug.cds--tile--clickable .cds--tile-content,
|
| 23447 | .cds--tile--slug.cds--tile--selectable > .cds--tile__checkmark,
|
| 23448 | .cds--tile--slug.cds--tile--is-selected .cds--slug {
|
| 23449 | z-index: 1;
|
| 23450 | }
|
| 23451 |
|
| 23452 | .cds--tile--slug.cds--tile--selectable .cds--slug:has(> .cds--popover--open) {
|
| 23453 | z-index: 2;
|
| 23454 | }
|
| 23455 |
|
| 23456 | .cds--tile--slug.cds--tile--selectable > .cds--slug,
|
| 23457 | .cds--tile--slug.cds--tile--selectable > .cds--tile__checkmark {
|
| 23458 | z-index: 1;
|
| 23459 | }
|
| 23460 |
|
| 23461 | .cds--tile--expandable:has(.cds--slug > .cds--popover--open) {
|
| 23462 | overflow: visible;
|
| 23463 | }
|
| 23464 |
|
| 23465 | .cds--tile--clickable .cds--tile--slug-icon rect {
|
| 23466 | stroke: var(--cds-icon-primary, #161616);
|
| 23467 | }
|
| 23468 |
|
| 23469 | .cds--tile--clickable .cds--tile--slug-icon path {
|
| 23470 | fill: var(--cds-icon-primary, #161616);
|
| 23471 | }
|
| 23472 |
|
| 23473 | .cds--tile--slug-rounded,
|
| 23474 | .cds--tile--slug-rounded.cds--tile--selectable::before,
|
| 23475 | .cds--tile--slug-rounded.cds--tile--selectable::after,
|
| 23476 | .cds--tile--slug-rounded.cds--tile--clickable::before {
|
| 23477 | border-radius: 0.5rem;
|
| 23478 | }
|
| 23479 |
|
| 23480 | .cds--tile--slug-rounded .cds--tile__chevron {
|
| 23481 | border-end-end-radius: 0.5rem;
|
| 23482 | }
|
| 23483 |
|
| 23484 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 23485 | .cds--tile__chevron svg,
|
| 23486 | .cds--tile__checkmark svg,
|
| 23487 | .cds--tile--is-selected .cds--tile__checkmark svg {
|
| 23488 | fill: ButtonText;
|
| 23489 | }
|
| 23490 | }
|
| 23491 |
|
| 23492 | .cds--time-picker {
|
| 23493 | display: flex;
|
| 23494 | align-items: flex-end;
|
| 23495 | }
|
| 23496 |
|
| 23497 | .cds--time-picker__select {
|
| 23498 | justify-content: center;
|
| 23499 | margin-inline-start: 0.125rem;
|
| 23500 | }
|
| 23501 |
|
| 23502 | .cds--time-picker__input {
|
| 23503 | position: relative;
|
| 23504 | display: flex;
|
| 23505 | flex-direction: column;
|
| 23506 | }
|
| 23507 |
|
| 23508 | .cds--time-picker__error__icon {
|
| 23509 | position: absolute;
|
| 23510 | display: flex;
|
| 23511 | block-size: 100%;
|
| 23512 | inset-block-start: 50%;
|
| 23513 | inset-inline-end: 1rem;
|
| 23514 | place-items: center;
|
| 23515 | transform: translateY(-50%);
|
| 23516 | }
|
| 23517 |
|
| 23518 | .cds--time-picker__error__icon .cds--checkbox__invalid-icon {
|
| 23519 | fill: var(--cds-support-error, #da1e28);
|
| 23520 | }
|
| 23521 |
|
| 23522 | .cds--time-picker .cds--select-input {
|
| 23523 | margin: 0;
|
| 23524 | inline-size: auto;
|
| 23525 | line-height: 1;
|
| 23526 | min-inline-size: auto;
|
| 23527 | padding-inline-end: 3rem;
|
| 23528 | }
|
| 23529 |
|
| 23530 | .cds--time-picker__input-field {
|
| 23531 | outline: 2px solid transparent;
|
| 23532 | outline-offset: -2px;
|
| 23533 | font-family: var(--cds-code-02-font-family, 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace);
|
| 23534 | font-size: var(--cds-code-02-font-size, 0.875rem);
|
| 23535 | font-weight: var(--cds-code-02-font-weight, 400);
|
| 23536 | line-height: var(--cds-code-02-line-height, 1.42857);
|
| 23537 | letter-spacing: var(--cds-code-02-letter-spacing, 0.32px);
|
| 23538 | display: flex;
|
| 23539 | align-items: center;
|
| 23540 | block-size: 2.5rem;
|
| 23541 | inline-size: 4.875rem;
|
| 23542 | transition: outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 23543 | }
|
| 23544 | .cds--time-picker__input-field::-moz-placeholder {
|
| 23545 | color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4));
|
| 23546 | opacity: 1;
|
| 23547 | }
|
| 23548 | .cds--time-picker__input-field::placeholder {
|
| 23549 | color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4));
|
| 23550 | opacity: 1;
|
| 23551 | }
|
| 23552 |
|
| 23553 | .cds--time-picker__input-field-error {
|
| 23554 | inline-size: 6.175rem;
|
| 23555 | }
|
| 23556 |
|
| 23557 | .cds--time-picker--light .cds--select-input {
|
| 23558 | background-color: var(--cds-field-02, #ffffff);
|
| 23559 | }
|
| 23560 | .cds--time-picker--light .cds--select-input:hover {
|
| 23561 | background-color: var(--cds-field-hover);
|
| 23562 | }
|
| 23563 | .cds--time-picker--light .cds--select-input:disabled, .cds--time-picker--light .cds--select-input:hover:disabled {
|
| 23564 | background-color: transparent;
|
| 23565 | border-block-end: 1px solid transparent;
|
| 23566 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 23567 | cursor: not-allowed;
|
| 23568 | }
|
| 23569 |
|
| 23570 | .cds--time-picker--sm .cds--select-input,
|
| 23571 | .cds--time-picker--sm .cds--time-picker__input-field {
|
| 23572 | block-size: 2rem;
|
| 23573 | max-block-size: 2rem;
|
| 23574 | }
|
| 23575 |
|
| 23576 | .cds--time-picker--lg .cds--select-input,
|
| 23577 | .cds--time-picker--lg .cds--time-picker__input-field {
|
| 23578 | block-size: 3rem;
|
| 23579 | max-block-size: 3rem;
|
| 23580 | }
|
| 23581 |
|
| 23582 | .cds--time-picker--readonly .cds--time-picker__input-field {
|
| 23583 | background-color: transparent;
|
| 23584 | border-block-end-color: var(--cds-border-subtle);
|
| 23585 | }
|
| 23586 |
|
| 23587 | .cds--time-picker--readonly .cds--select-input {
|
| 23588 | background-color: transparent;
|
| 23589 | border-block-end-color: var(--cds-border-subtle);
|
| 23590 | cursor: default;
|
| 23591 | }
|
| 23592 |
|
| 23593 | .cds--time-picker--readonly .cds--select-input + .cds--select__arrow {
|
| 23594 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 23595 | }
|
| 23596 |
|
| 23597 | .cds--toggle {
|
| 23598 | display: inline-block;
|
| 23599 | -webkit-user-select: none;
|
| 23600 | -moz-user-select: none;
|
| 23601 | user-select: none;
|
| 23602 | }
|
| 23603 |
|
| 23604 | .cds--toggle__label-text {
|
| 23605 | font-size: var(--cds-label-01-font-size, 0.75rem);
|
| 23606 | font-weight: var(--cds-label-01-font-weight, 400);
|
| 23607 | line-height: var(--cds-label-01-line-height, 1.33333);
|
| 23608 | letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
|
| 23609 | display: block;
|
| 23610 | color: var(--cds-text-secondary, #525252);
|
| 23611 | margin-block-end: 1rem;
|
| 23612 | }
|
| 23613 |
|
| 23614 | .cds--toggle__button {
|
| 23615 | position: absolute;
|
| 23616 | overflow: hidden;
|
| 23617 | padding: 0;
|
| 23618 | border: 0;
|
| 23619 | margin: -1px;
|
| 23620 | block-size: 1px;
|
| 23621 | clip: rect(0, 0, 0, 0);
|
| 23622 | inline-size: 1px;
|
| 23623 | visibility: inherit;
|
| 23624 | white-space: nowrap;
|
| 23625 | }
|
| 23626 | .cds--toggle__button:focus {
|
| 23627 | outline: none;
|
| 23628 | }
|
| 23629 |
|
| 23630 | .cds--toggle__appearance {
|
| 23631 | display: inline-grid;
|
| 23632 | align-items: center;
|
| 23633 | -moz-column-gap: 0.5rem;
|
| 23634 | column-gap: 0.5rem;
|
| 23635 | cursor: pointer;
|
| 23636 | grid-template-columns: max-content max-content;
|
| 23637 | }
|
| 23638 |
|
| 23639 | .cds--toggle__switch {
|
| 23640 | position: relative;
|
| 23641 | border-radius: 0.75rem;
|
| 23642 | background-color: var(--cds-toggle-off, #8d8d8d);
|
| 23643 | block-size: 1.5rem;
|
| 23644 | inline-size: 3rem;
|
| 23645 | transition: background-color 70ms cubic-bezier(0.2, 0, 1, 0.9);
|
| 23646 | }
|
| 23647 | .cds--toggle__switch::before {
|
| 23648 | position: absolute;
|
| 23649 | border-radius: 50%;
|
| 23650 | background-color: var(--cds-icon-on-color, #ffffff);
|
| 23651 | block-size: 1.125rem;
|
| 23652 | content: "";
|
| 23653 | inline-size: 1.125rem;
|
| 23654 | inset-block-start: 0.1875rem;
|
| 23655 | inset-inline-start: 0.1875rem;
|
| 23656 | transition: transform 70ms cubic-bezier(0.2, 0, 1, 0.9);
|
| 23657 | }
|
| 23658 | @media screen and (prefers-reduced-motion: reduce) {
|
| 23659 | .cds--toggle__switch::before {
|
| 23660 | transition: none;
|
| 23661 | }
|
| 23662 | }
|
| 23663 |
|
| 23664 | .cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch,
|
| 23665 | .cds--toggle:not(.cds--toggle--disabled):active .cds--toggle__switch {
|
| 23666 | box-shadow: 0 0 0 1px var(--cds-focus-inset, #ffffff), 0 0 0 3px var(--cds-focus, #0f62fe);
|
| 23667 | }
|
| 23668 |
|
| 23669 | .cds--toggle__switch--checked {
|
| 23670 | background-color: var(--cds-support-success, #24a148);
|
| 23671 | }
|
| 23672 | .cds--toggle__switch--checked::before {
|
| 23673 | transform: translateX(1.5rem);
|
| 23674 | }
|
| 23675 |
|
| 23676 | .cds--toggle__text {
|
| 23677 | font-size: var(--cds-body-01-font-size, 0.875rem);
|
| 23678 | font-weight: var(--cds-body-01-font-weight, 400);
|
| 23679 | line-height: var(--cds-body-01-line-height, 1.42857);
|
| 23680 | letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
|
| 23681 | color: var(--cds-text-primary, #161616);
|
| 23682 | }
|
| 23683 |
|
| 23684 | .cds--toggle__appearance--sm .cds--toggle__switch {
|
| 23685 | block-size: 1rem;
|
| 23686 | inline-size: 2rem;
|
| 23687 | }
|
| 23688 | .cds--toggle__appearance--sm .cds--toggle__switch::before {
|
| 23689 | block-size: 0.625rem;
|
| 23690 | inline-size: 0.625rem;
|
| 23691 | }
|
| 23692 |
|
| 23693 | .cds--toggle__appearance--sm .cds--toggle__switch--checked::before {
|
| 23694 | transform: translateX(1rem);
|
| 23695 | }
|
| 23696 |
|
| 23697 | .cds--toggle__check {
|
| 23698 | position: absolute;
|
| 23699 | block-size: 0.3125rem;
|
| 23700 | fill: var(--cds-support-success, #24a148);
|
| 23701 | inline-size: 0.375rem;
|
| 23702 | inset-block-start: 0.375rem;
|
| 23703 | inset-inline-end: 0.3125rem;
|
| 23704 | visibility: hidden;
|
| 23705 | }
|
| 23706 |
|
| 23707 | .cds--toggle__switch--checked .cds--toggle__check {
|
| 23708 | visibility: visible;
|
| 23709 | }
|
| 23710 |
|
| 23711 | .cds--toggle--disabled .cds--toggle__appearance {
|
| 23712 | cursor: not-allowed;
|
| 23713 | }
|
| 23714 |
|
| 23715 | .cds--toggle--disabled .cds--toggle__label-text,
|
| 23716 | .cds--toggle--disabled .cds--toggle__text {
|
| 23717 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 23718 | }
|
| 23719 |
|
| 23720 | .cds--toggle--disabled .cds--toggle__switch {
|
| 23721 | background-color: var(--cds-button-disabled, #c6c6c6);
|
| 23722 | }
|
| 23723 | .cds--toggle--disabled .cds--toggle__switch::before {
|
| 23724 | background-color: var(--cds-icon-on-color-disabled, #8d8d8d);
|
| 23725 | }
|
| 23726 |
|
| 23727 | .cds--toggle--disabled .cds--toggle__check {
|
| 23728 | fill: var(--cds-button-disabled, #c6c6c6);
|
| 23729 | }
|
| 23730 |
|
| 23731 | .cds--toggle--readonly .cds--toggle__appearance {
|
| 23732 | cursor: default;
|
| 23733 | }
|
| 23734 |
|
| 23735 | .cds--toggle--readonly .cds--toggle__switch {
|
| 23736 | border: 1px solid var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 23737 | background-color: transparent;
|
| 23738 | }
|
| 23739 | .cds--toggle--readonly .cds--toggle__switch::before {
|
| 23740 | background-color: var(--cds-text-primary, #161616);
|
| 23741 | inset-block-start: 0.125rem;
|
| 23742 | inset-inline-start: 0.125rem;
|
| 23743 | }
|
| 23744 |
|
| 23745 | .cds--toggle--readonly .cds--toggle__check {
|
| 23746 | fill: var(--cds-background, #ffffff);
|
| 23747 | inset-block-start: 0.3125rem;
|
| 23748 | inset-inline-end: 0.25rem;
|
| 23749 | }
|
| 23750 |
|
| 23751 | .cds--toggle--readonly .cds--toggle__text {
|
| 23752 | cursor: text;
|
| 23753 | -webkit-user-select: text;
|
| 23754 | -moz-user-select: text;
|
| 23755 | user-select: text;
|
| 23756 | }
|
| 23757 |
|
| 23758 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 23759 | .cds--toggle__switch,
|
| 23760 | .cds--toggle__switch::before {
|
| 23761 | outline: 1px solid transparent;
|
| 23762 | }
|
| 23763 | }
|
| 23764 |
|
| 23765 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 23766 | .cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch,
|
| 23767 | .cds--toggle:not(.cds--toggle--disabled):active .cds--toggle__switch {
|
| 23768 | color: Highlight;
|
| 23769 | outline: 1px solid Highlight;
|
| 23770 | }
|
| 23771 | }
|
| 23772 |
|
| 23773 | .cds--toggle--skeleton {
|
| 23774 | display: flex;
|
| 23775 | align-items: center;
|
| 23776 | }
|
| 23777 |
|
| 23778 | .cds--toggle--skeleton .cds--toggle__skeleton-circle {
|
| 23779 | position: relative;
|
| 23780 | overflow: hidden;
|
| 23781 | border-radius: 50%;
|
| 23782 | background: var(--cds-skeleton-background, #e8e8e8);
|
| 23783 | border-radius: 50%;
|
| 23784 | block-size: 1.125rem;
|
| 23785 | inline-size: 1.125rem;
|
| 23786 | }
|
| 23787 | .cds--toggle--skeleton .cds--toggle__skeleton-circle::before {
|
| 23788 | position: absolute;
|
| 23789 | animation: 3000ms ease-in-out cds--skeleton infinite;
|
| 23790 | background: var(--cds-skeleton-element, #c6c6c6);
|
| 23791 | block-size: 100%;
|
| 23792 | content: "";
|
| 23793 | inline-size: 200%;
|
| 23794 | will-change: transform-origin, transform, opacity;
|
| 23795 | }
|
| 23796 | @media (prefers-reduced-motion: reduce) {
|
| 23797 | .cds--toggle--skeleton .cds--toggle__skeleton-circle::before {
|
| 23798 | animation: none;
|
| 23799 | }
|
| 23800 | }
|
| 23801 |
|
| 23802 | .cds--toggle--skeleton .cds--toggle__skeleton-rectangle {
|
| 23803 | position: relative;
|
| 23804 | padding: 0;
|
| 23805 | border: none;
|
| 23806 | background: var(--cds-skeleton-background, #e8e8e8);
|
| 23807 | box-shadow: none;
|
| 23808 | pointer-events: none;
|
| 23809 | block-size: 0.5rem;
|
| 23810 | inline-size: 1.5rem;
|
| 23811 | margin-inline-start: 0.5rem;
|
| 23812 | }
|
| 23813 | .cds--toggle--skeleton .cds--toggle__skeleton-rectangle:hover, .cds--toggle--skeleton .cds--toggle__skeleton-rectangle:focus, .cds--toggle--skeleton .cds--toggle__skeleton-rectangle:active {
|
| 23814 | border: none;
|
| 23815 | cursor: default;
|
| 23816 | outline: none;
|
| 23817 | }
|
| 23818 | .cds--toggle--skeleton .cds--toggle__skeleton-rectangle::before {
|
| 23819 | position: absolute;
|
| 23820 | animation: 3000ms ease-in-out cds--skeleton infinite;
|
| 23821 | background: var(--cds-skeleton-element, #c6c6c6);
|
| 23822 | block-size: 100%;
|
| 23823 | content: "";
|
| 23824 | inline-size: 100%;
|
| 23825 | will-change: transform-origin, transform, opacity;
|
| 23826 | }
|
| 23827 | @media (prefers-reduced-motion: reduce) {
|
| 23828 | .cds--toggle--skeleton .cds--toggle__skeleton-rectangle::before {
|
| 23829 | animation: none;
|
| 23830 | }
|
| 23831 | }
|
| 23832 |
|
| 23833 | [dir=rtl] .cds--toggle__switch--checked::before {
|
| 23834 | transform: translateX(-1.5rem);
|
| 23835 | }
|
| 23836 |
|
| 23837 | [dir=rtl] .cds--toggle__appearance--sm .cds--toggle__switch--checked::before {
|
| 23838 | transform: translateX(-1rem);
|
| 23839 | }
|
| 23840 |
|
| 23841 | .cds--tree {
|
| 23842 | box-sizing: border-box;
|
| 23843 | padding: 0;
|
| 23844 | border: 0;
|
| 23845 | margin: 0;
|
| 23846 | font-family: inherit;
|
| 23847 | font-size: 100%;
|
| 23848 | vertical-align: baseline;
|
| 23849 | overflow: hidden;
|
| 23850 | }
|
| 23851 | .cds--tree *,
|
| 23852 | .cds--tree *::before,
|
| 23853 | .cds--tree *::after {
|
| 23854 | box-sizing: inherit;
|
| 23855 | }
|
| 23856 |
|
| 23857 | .cds--tree-node {
|
| 23858 | background-color: var(--cds-layer-01, #f4f4f4);
|
| 23859 | color: var(--cds-text-secondary, #525252);
|
| 23860 | padding-inline-start: 1rem;
|
| 23861 | }
|
| 23862 | .cds--tree-node:focus {
|
| 23863 | outline: none;
|
| 23864 | }
|
| 23865 | .cds--tree-node:hover {
|
| 23866 | cursor: pointer;
|
| 23867 | }
|
| 23868 |
|
| 23869 | .cds--tree-node__children {
|
| 23870 | box-sizing: border-box;
|
| 23871 | padding: 0;
|
| 23872 | border: 0;
|
| 23873 | margin: 0;
|
| 23874 | font-family: inherit;
|
| 23875 | font-size: 100%;
|
| 23876 | vertical-align: baseline;
|
| 23877 | list-style-type: none;
|
| 23878 | }
|
| 23879 | .cds--tree-node__children *,
|
| 23880 | .cds--tree-node__children *::before,
|
| 23881 | .cds--tree-node__children *::after {
|
| 23882 | box-sizing: inherit;
|
| 23883 | }
|
| 23884 |
|
| 23885 | .cds--tree-node--with-icon .cds--tree-node {
|
| 23886 | margin-inline-start: 0.5rem;
|
| 23887 | }
|
| 23888 |
|
| 23889 | .cds--tree-node:focus > .cds--tree-node__label {
|
| 23890 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 23891 | outline-offset: -2px;
|
| 23892 | }
|
| 23893 | @media screen and (prefers-contrast) {
|
| 23894 | .cds--tree-node:focus > .cds--tree-node__label {
|
| 23895 | outline-style: dotted;
|
| 23896 | }
|
| 23897 | }
|
| 23898 |
|
| 23899 | .cds--tree-node--disabled:focus > .cds--tree-node__label {
|
| 23900 | outline: none;
|
| 23901 | }
|
| 23902 |
|
| 23903 | .cds--tree-node--disabled,
|
| 23904 | .cds--tree-node--disabled .cds--tree-node__label:hover,
|
| 23905 | .cds--tree-node--disabled .cds--tree-node__label:hover .cds--tree-node__label__details {
|
| 23906 | background-color: var(--cds-field-01, #f4f4f4);
|
| 23907 | color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
| 23908 | }
|
| 23909 |
|
| 23910 | .cds--tree-node--disabled .cds--tree-parent-node__toggle-icon,
|
| 23911 | .cds--tree-node--disabled .cds--tree-node__icon,
|
| 23912 | .cds--tree-node--disabled .cds--tree-node__label:hover .cds--tree-parent-node__toggle-icon,
|
| 23913 | .cds--tree-node--disabled .cds--tree-node__label:hover .cds--tree-node__icon {
|
| 23914 | fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
| 23915 | }
|
| 23916 |
|
| 23917 | .cds--tree-node--disabled,
|
| 23918 | .cds--tree-node--disabled .cds--tree-parent-node__toggle-icon:hover {
|
| 23919 | cursor: not-allowed;
|
| 23920 | }
|
| 23921 |
|
| 23922 | .cds--tree-node__label {
|
| 23923 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 23924 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 23925 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 23926 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 23927 | display: flex;
|
| 23928 | flex: 1 1;
|
| 23929 | align-items: center;
|
| 23930 | min-block-size: 2rem;
|
| 23931 | }
|
| 23932 | .cds--tree-node__label:hover {
|
| 23933 | background-color: var(--cds-layer-hover-01, #e8e8e8);
|
| 23934 | color: var(--cds-text-primary, #161616);
|
| 23935 | }
|
| 23936 |
|
| 23937 | .cds--tree-node:not(.cds--tree-parent-node) .cds--tree-node__label {
|
| 23938 | padding-block-end: 0.4375rem;
|
| 23939 | padding-block-start: 0.4375rem;
|
| 23940 | }
|
| 23941 |
|
| 23942 | .cds--tree-node__label:hover .cds--tree-node__label__details {
|
| 23943 | color: var(--cds-text-primary, #161616);
|
| 23944 | }
|
| 23945 |
|
| 23946 | .cds--tree-node__label:hover .cds--tree-parent-node__toggle-icon,
|
| 23947 | .cds--tree-node__label:hover .cds--tree-node__icon {
|
| 23948 | fill: var(--cds-icon-primary, #161616);
|
| 23949 | }
|
| 23950 |
|
| 23951 | .cds--tree-leaf-node {
|
| 23952 | display: flex;
|
| 23953 | padding-inline-start: 2.5rem;
|
| 23954 | }
|
| 23955 |
|
| 23956 | .cds--tree-leaf-node.cds--tree-node--with-icon {
|
| 23957 | padding-inline-start: 2rem;
|
| 23958 | }
|
| 23959 |
|
| 23960 | .cds--tree-leaf-node.cds--tree-node--with-icon .cds--tree-leaf-node {
|
| 23961 | padding-inline-start: 1.5rem;
|
| 23962 | }
|
| 23963 |
|
| 23964 | .cds--tree-node__label__details {
|
| 23965 | display: flex;
|
| 23966 | align-items: center;
|
| 23967 | }
|
| 23968 |
|
| 23969 | .cds--tree-node--with-icon .cds--tree-parent-node__toggle {
|
| 23970 | margin-inline-end: 0;
|
| 23971 | }
|
| 23972 |
|
| 23973 | .cds--tree-parent-node__toggle {
|
| 23974 | display: flex;
|
| 23975 | align-items: center;
|
| 23976 | align-self: flex-start;
|
| 23977 | border: 0;
|
| 23978 | block-size: 1.5rem;
|
| 23979 | inline-size: 1.5rem;
|
| 23980 | margin-block-start: 0.25rem;
|
| 23981 | margin-inline-end: 0.25rem;
|
| 23982 | margin-inline-start: -0.25rem;
|
| 23983 | padding-inline-start: 0.25rem;
|
| 23984 | }
|
| 23985 | .cds--tree-parent-node__toggle:hover {
|
| 23986 | cursor: pointer;
|
| 23987 | }
|
| 23988 | .cds--tree-parent-node__toggle:focus {
|
| 23989 | outline: none;
|
| 23990 | }
|
| 23991 |
|
| 23992 | .cds--tree-parent-node__toggle-icon {
|
| 23993 | fill: var(--cds-icon-secondary, #525252);
|
| 23994 | transform: rotate(-90deg);
|
| 23995 | transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
| 23996 | }
|
| 23997 |
|
| 23998 | .cds--tree-parent-node__toggle-icon--expanded {
|
| 23999 | transform: rotate(0);
|
| 24000 | }
|
| 24001 |
|
| 24002 | .cds--tree-node__icon {
|
| 24003 | align-self: flex-start;
|
| 24004 | fill: var(--cds-icon-secondary, #525252);
|
| 24005 | margin-block-start: 0.0625rem;
|
| 24006 | margin-inline-end: 0.5rem;
|
| 24007 | margin-inline-start: 0.5rem;
|
| 24008 | min-block-size: 1rem;
|
| 24009 | min-inline-size: 1rem;
|
| 24010 | }
|
| 24011 |
|
| 24012 | .cds--tree-parent-node__toggle + .cds--tree-node__label__details .cds--tree-node__icon {
|
| 24013 | margin-inline-start: 0.25rem;
|
| 24014 | }
|
| 24015 |
|
| 24016 | .cds--tree-node--selected > .cds--tree-node__label {
|
| 24017 | background-color: var(--cds-layer-selected-01, #e0e0e0);
|
| 24018 | color: var(--cds-text-primary, #161616);
|
| 24019 | }
|
| 24020 | .cds--tree-node--selected > .cds--tree-node__label:hover {
|
| 24021 | background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
|
| 24022 | }
|
| 24023 |
|
| 24024 | .cds--tree-node--selected > .cds--tree-node__label .cds--tree-parent-node__toggle-icon,
|
| 24025 | .cds--tree-node--selected > .cds--tree-node__label .cds--tree-node__icon {
|
| 24026 | fill: var(--cds-icon-primary, #161616);
|
| 24027 | }
|
| 24028 |
|
| 24029 | .cds--tree-node--active > .cds--tree-node__label {
|
| 24030 | position: relative;
|
| 24031 | }
|
| 24032 | .cds--tree-node--active > .cds--tree-node__label::before {
|
| 24033 | position: absolute;
|
| 24034 | background-color: var(--cds-interactive, #0f62fe);
|
| 24035 | block-size: 100%;
|
| 24036 | content: "";
|
| 24037 | inline-size: 0.25rem;
|
| 24038 | inset-block-start: 0;
|
| 24039 | inset-inline-start: 0;
|
| 24040 | }
|
| 24041 |
|
| 24042 | .cds--tree--xs .cds--tree-node__label {
|
| 24043 | min-block-size: 1.5rem;
|
| 24044 | }
|
| 24045 |
|
| 24046 | .cds--tree--xs .cds--tree-node:not(.cds--tree-parent-node) .cds--tree-node__label {
|
| 24047 | padding: 0;
|
| 24048 | }
|
| 24049 |
|
| 24050 | .cds--tree--xs .cds--tree-parent-node__toggle {
|
| 24051 | margin-block-start: 0;
|
| 24052 | }
|
| 24053 |
|
| 24054 | .cds--content {
|
| 24055 | padding: 2rem;
|
| 24056 | color: var(--cds-text-primary, #161616);
|
| 24057 | will-change: margin-left;
|
| 24058 | }
|
| 24059 |
|
| 24060 | .cds--header ~ .cds--content,
|
| 24061 | div:has(.cds--header) ~ .cds--content {
|
| 24062 | margin-block-start: 3rem;
|
| 24063 | }
|
| 24064 |
|
| 24065 | .cds--side-nav ~ .cds--content {
|
| 24066 | margin-inline-start: 3rem;
|
| 24067 | }
|
| 24068 |
|
| 24069 | .cds--side-nav.cds--side-nav--expanded ~ .cds--content {
|
| 24070 | margin-inline-start: 16rem;
|
| 24071 | }
|
| 24072 |
|
| 24073 | .cds--header {
|
| 24074 | box-sizing: border-box;
|
| 24075 | padding: 0;
|
| 24076 | border: 0;
|
| 24077 | margin: 0;
|
| 24078 | font-family: inherit;
|
| 24079 | font-size: 100%;
|
| 24080 | vertical-align: baseline;
|
| 24081 | position: fixed;
|
| 24082 | z-index: 8000;
|
| 24083 | display: flex;
|
| 24084 | align-items: center;
|
| 24085 | background-color: var(--cds-background, #ffffff);
|
| 24086 | block-size: 3rem;
|
| 24087 | border-block-end: 1px solid var(--cds-border-subtle);
|
| 24088 | inset-block-start: 0;
|
| 24089 | inset-inline-end: 0;
|
| 24090 | inset-inline-start: 0;
|
| 24091 | }
|
| 24092 | .cds--header *,
|
| 24093 | .cds--header *::before,
|
| 24094 | .cds--header *::after {
|
| 24095 | box-sizing: inherit;
|
| 24096 | }
|
| 24097 |
|
| 24098 | .cds--header__action {
|
| 24099 | box-sizing: border-box;
|
| 24100 | padding: 0;
|
| 24101 | border: 0;
|
| 24102 | margin: 0;
|
| 24103 | font-family: inherit;
|
| 24104 | font-size: 100%;
|
| 24105 | vertical-align: baseline;
|
| 24106 | display: inline-block;
|
| 24107 | padding: 0;
|
| 24108 | border: 0;
|
| 24109 | -webkit-appearance: none;
|
| 24110 | -moz-appearance: none;
|
| 24111 | appearance: none;
|
| 24112 | background: none;
|
| 24113 | cursor: pointer;
|
| 24114 | text-align: start;
|
| 24115 | inline-size: 100%;
|
| 24116 | display: inline-flex;
|
| 24117 | border: 0.0625rem solid transparent;
|
| 24118 | block-size: 3rem;
|
| 24119 | inline-size: 3rem;
|
| 24120 | transition: background-color 110ms, border-color 110ms;
|
| 24121 | }
|
| 24122 | .cds--header__action *,
|
| 24123 | .cds--header__action *::before,
|
| 24124 | .cds--header__action *::after {
|
| 24125 | box-sizing: inherit;
|
| 24126 | }
|
| 24127 | .cds--header__action::-moz-focus-inner {
|
| 24128 | border: 0;
|
| 24129 | }
|
| 24130 | @media (max-width: 41.98rem) {
|
| 24131 | .cds--header__action {
|
| 24132 | min-inline-size: 3rem;
|
| 24133 | }
|
| 24134 | }
|
| 24135 |
|
| 24136 | .cds--header__global .cds--popover {
|
| 24137 | z-index: 8001;
|
| 24138 | }
|
| 24139 |
|
| 24140 | .cds--header__action > :first-child {
|
| 24141 | margin-block-start: 0;
|
| 24142 | }
|
| 24143 |
|
| 24144 | .cds--header__action > svg.cds--navigation-menu-panel-collapse-icon,
|
| 24145 | .cds--header__action--active > svg.cds--navigation-menu-panel-expand-icon {
|
| 24146 | display: none;
|
| 24147 | }
|
| 24148 |
|
| 24149 | .cds--header__action--active > svg.cds--navigation-menu-panel-collapse-icon {
|
| 24150 | display: inline;
|
| 24151 | }
|
| 24152 |
|
| 24153 | .cds--header__action:hover {
|
| 24154 | background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
|
| 24155 | }
|
| 24156 |
|
| 24157 | .cds--header__action--active {
|
| 24158 | background: var(--cds-layer);
|
| 24159 | border-block-end: 1px solid transparent;
|
| 24160 | border-inline-end: 1px solid var(--cds-border-subtle);
|
| 24161 | border-inline-start: 1px solid var(--cds-border-subtle);
|
| 24162 | }
|
| 24163 |
|
| 24164 | .cds--header__action--active > svg {
|
| 24165 | fill: var(--cds-icon-primary, #161616);
|
| 24166 | }
|
| 24167 |
|
| 24168 | .cds--header__action:focus {
|
| 24169 | border-color: var(--cds-focus, #0f62fe);
|
| 24170 | outline: none;
|
| 24171 | }
|
| 24172 |
|
| 24173 | .cds--header__action:active {
|
| 24174 | background-color: var(--cds-background-active, rgba(141, 141, 141, 0.5));
|
| 24175 | }
|
| 24176 |
|
| 24177 | .cds--header__action.cds--btn--icon-only {
|
| 24178 | align-items: center;
|
| 24179 | justify-content: center;
|
| 24180 | }
|
| 24181 |
|
| 24182 | .cds--btn.cds--btn--icon-only.cds--header__action svg {
|
| 24183 | fill: var(--cds-icon-secondary, #525252);
|
| 24184 | }
|
| 24185 |
|
| 24186 | .cds--btn.cds--btn--icon-only.cds--header__action:hover svg,
|
| 24187 | .cds--btn.cds--btn--icon-only.cds--header__action:active svg,
|
| 24188 | .cds--btn.cds--btn--icon-only.cds--header__action--active svg {
|
| 24189 | fill: var(--cds-icon-primary, #161616);
|
| 24190 | }
|
| 24191 |
|
| 24192 | .cds--header__menu-trigger > svg {
|
| 24193 | fill: var(--cds-icon-primary, #161616);
|
| 24194 | }
|
| 24195 |
|
| 24196 | .cds--header__menu-trigger:hover > svg {
|
| 24197 | fill: var(--cds-icon-primary, #161616);
|
| 24198 | }
|
| 24199 |
|
| 24200 | .cds--header__menu-toggle {
|
| 24201 | display: flex;
|
| 24202 | align-items: center;
|
| 24203 | justify-content: center;
|
| 24204 | }
|
| 24205 |
|
| 24206 | @media (min-width: 66rem) {
|
| 24207 | .cds--header__menu-toggle__hidden {
|
| 24208 | display: none;
|
| 24209 | }
|
| 24210 | }
|
| 24211 |
|
| 24212 | a.cds--header__name {
|
| 24213 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 24214 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 24215 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 24216 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 24217 | display: flex;
|
| 24218 | align-items: center;
|
| 24219 | padding: 0 2rem 0 1rem;
|
| 24220 | border: 0.125rem solid transparent;
|
| 24221 | block-size: 100%;
|
| 24222 | font-weight: 600;
|
| 24223 | letter-spacing: 0.1px;
|
| 24224 | line-height: 1.25rem;
|
| 24225 | outline: none;
|
| 24226 | text-decoration: none;
|
| 24227 | transition: border-color 110ms;
|
| 24228 | -webkit-user-select: none;
|
| 24229 | -moz-user-select: none;
|
| 24230 | user-select: none;
|
| 24231 | }
|
| 24232 | @media (max-width: 41.98rem) {
|
| 24233 | a.cds--header__name {
|
| 24234 | padding: 0 1rem;
|
| 24235 | }
|
| 24236 | }
|
| 24237 |
|
| 24238 | a.cds--header__name:focus {
|
| 24239 | border-color: var(--cds-focus, #0f62fe);
|
| 24240 | }
|
| 24241 |
|
| 24242 | .cds--header__name--prefix {
|
| 24243 | font-weight: 400;
|
| 24244 | }
|
| 24245 |
|
| 24246 | a.cds--header__name,
|
| 24247 | a.cds--header__name:hover {
|
| 24248 | color: var(--cds-text-primary, #161616);
|
| 24249 | }
|
| 24250 |
|
| 24251 | .cds--header__menu-toggle:not(.cds--header__menu-toggle__hidden) ~ .cds--header__name {
|
| 24252 | padding-inline-start: 0.5rem;
|
| 24253 | }
|
| 24254 |
|
| 24255 | .cds--header__nav {
|
| 24256 | position: relative;
|
| 24257 | display: none;
|
| 24258 | block-size: 100%;
|
| 24259 | padding-inline-start: 1rem;
|
| 24260 | }
|
| 24261 | @media (min-width: 66rem) {
|
| 24262 | .cds--header__nav {
|
| 24263 | display: block;
|
| 24264 | }
|
| 24265 | }
|
| 24266 | .cds--header__nav::before {
|
| 24267 | position: absolute;
|
| 24268 | display: block;
|
| 24269 | background-color: var(--cds-border-subtle);
|
| 24270 | block-size: 1.5rem;
|
| 24271 | content: "";
|
| 24272 | inline-size: 0.0625rem;
|
| 24273 | inset-block-start: 50%;
|
| 24274 | inset-inline-start: 0;
|
| 24275 | transform: translateY(-50%);
|
| 24276 | }
|
| 24277 |
|
| 24278 | .cds--header__menu-bar {
|
| 24279 | box-sizing: border-box;
|
| 24280 | padding: 0;
|
| 24281 | border: 0;
|
| 24282 | margin: 0;
|
| 24283 | font-family: inherit;
|
| 24284 | font-size: 100%;
|
| 24285 | vertical-align: baseline;
|
| 24286 | display: flex;
|
| 24287 | padding: 0;
|
| 24288 | margin: 0;
|
| 24289 | block-size: 100%;
|
| 24290 | list-style: none;
|
| 24291 | }
|
| 24292 | .cds--header__menu-bar *,
|
| 24293 | .cds--header__menu-bar *::before,
|
| 24294 | .cds--header__menu-bar *::after {
|
| 24295 | box-sizing: inherit;
|
| 24296 | }
|
| 24297 |
|
| 24298 | a.cds--header__menu-item {
|
| 24299 | position: relative;
|
| 24300 | display: flex;
|
| 24301 | align-items: center;
|
| 24302 | padding: 0 1rem;
|
| 24303 | border: 2px solid transparent;
|
| 24304 | background-color: var(--cds-background, #ffffff);
|
| 24305 | block-size: 100%;
|
| 24306 | color: var(--cds-text-secondary, #525252);
|
| 24307 | font-size: 0.875rem;
|
| 24308 | font-weight: 400;
|
| 24309 | letter-spacing: 0;
|
| 24310 | line-height: 1.125rem;
|
| 24311 | text-decoration: none;
|
| 24312 | transition: background-color 110ms, border-color 110ms, color 110ms;
|
| 24313 | -webkit-user-select: none;
|
| 24314 | -moz-user-select: none;
|
| 24315 | user-select: none;
|
| 24316 | }
|
| 24317 |
|
| 24318 | a.cds--header__menu-item:hover {
|
| 24319 | background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
|
| 24320 | color: var(--cds-text-primary, #161616);
|
| 24321 | }
|
| 24322 |
|
| 24323 | .cds--header__action:active,
|
| 24324 | a.cds--header__menu-item:active {
|
| 24325 | background-color: var(--cds-background-active, rgba(141, 141, 141, 0.5));
|
| 24326 | color: var(--cds-text-primary, #161616);
|
| 24327 | }
|
| 24328 |
|
| 24329 | a.cds--header__menu-item:focus {
|
| 24330 | border-color: var(--cds-focus, #0f62fe);
|
| 24331 | outline: none;
|
| 24332 | }
|
| 24333 |
|
| 24334 | a.cds--header__menu-item:hover > svg,
|
| 24335 | a.cds--header__menu-item:active > svg {
|
| 24336 | fill: var(--cds-icon-primary, #161616);
|
| 24337 | }
|
| 24338 |
|
| 24339 | a.cds--header__menu-item[aria-current=page],
|
| 24340 | .cds--header__menu-item--current {
|
| 24341 | color: var(--cds-text-primary, #161616);
|
| 24342 | }
|
| 24343 |
|
| 24344 | a.cds--header__menu-item[aria-current=page]::after,
|
| 24345 | .cds--header__menu-item--current::after {
|
| 24346 | position: absolute;
|
| 24347 | background-color: var(--cds-border-interactive, #0f62fe);
|
| 24348 | block-size: 3px;
|
| 24349 | content: "";
|
| 24350 | inline-size: calc(100% + 4px);
|
| 24351 | inset-block-end: -2px;
|
| 24352 | inset-inline-start: -2px;
|
| 24353 | }
|
| 24354 |
|
| 24355 | a.cds--header__menu-item[aria-current=page]:focus::after,
|
| 24356 | .cds--header__menu-item--current:focus::after {
|
| 24357 | border: 0;
|
| 24358 | }
|
| 24359 |
|
| 24360 | .cds--header__submenu .cds--header__menu a.cds--header__menu-item[aria-current=page]::after,
|
| 24361 | .cds--header__submenu .cds--header__menu .cds--header__menu-item--current::after {
|
| 24362 | background-color: var(--cds-border-interactive, #0f62fe);
|
| 24363 | block-size: calc(100% + 4px);
|
| 24364 | inline-size: 3px;
|
| 24365 | inset-block-start: -2px;
|
| 24366 | inset-inline-start: -2px;
|
| 24367 | }
|
| 24368 | .cds--header__submenu .cds--header__menu a.cds--header__menu-item[aria-current=page]:focus::after,
|
| 24369 | .cds--header__submenu .cds--header__menu .cds--header__menu-item--current:focus::after {
|
| 24370 | background-color: var(--cds-border-interactive, #0f62fe);
|
| 24371 | block-size: calc(100% + 4px);
|
| 24372 | inline-size: 5px;
|
| 24373 | inset-block-start: -2px;
|
| 24374 | inset-inline-start: -2px;
|
| 24375 | }
|
| 24376 |
|
| 24377 | a.cds--header__menu-item[aria-current=page]:focus,
|
| 24378 | a.cds--header__menu-item.cds--header__menu-item--current:focus {
|
| 24379 | border: 2px solid var(--cds-focus, #0f62fe);
|
| 24380 | }
|
| 24381 |
|
| 24382 | .cds--header__submenu {
|
| 24383 | position: relative;
|
| 24384 | }
|
| 24385 |
|
| 24386 | .cds--header__menu-title[aria-haspopup=true] {
|
| 24387 | position: relative;
|
| 24388 | }
|
| 24389 |
|
| 24390 | .cds--header__menu-title[aria-expanded=true] {
|
| 24391 | z-index: 8002;
|
| 24392 | background-color: var(--cds-layer);
|
| 24393 | color: var(--cds-text-secondary, #525252);
|
| 24394 | }
|
| 24395 |
|
| 24396 | .cds--header__menu-title[aria-expanded=true] > .cds--header__menu-arrow {
|
| 24397 | transform: rotate(180deg);
|
| 24398 | }
|
| 24399 |
|
| 24400 | .cds--header__menu {
|
| 24401 | display: none;
|
| 24402 | padding: 0;
|
| 24403 | margin: 0;
|
| 24404 | list-style: none;
|
| 24405 | }
|
| 24406 |
|
| 24407 | .cds--header__menu-title[aria-expanded=true] + .cds--header__menu {
|
| 24408 | position: absolute;
|
| 24409 | z-index: 8001;
|
| 24410 | display: flex;
|
| 24411 | flex-direction: column;
|
| 24412 | background-color: var(--cds-layer);
|
| 24413 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
|
| 24414 | inline-size: 12.5rem;
|
| 24415 | inset-block-end: 0;
|
| 24416 | inset-inline-start: 0;
|
| 24417 | transform: translateY(100%);
|
| 24418 | }
|
| 24419 |
|
| 24420 | .cds--header__menu-title[aria-expanded=true] + .cds--header__menu .cds--header__menu-item {
|
| 24421 | background-color: var(--cds-layer);
|
| 24422 | }
|
| 24423 |
|
| 24424 | .cds--header__menu-title[aria-expanded=true] + .cds--header__menu .cds--header__menu-item:hover {
|
| 24425 | background-color: var(--cds-layer-hover);
|
| 24426 | color: var(--cds-text-primary, #161616);
|
| 24427 | }
|
| 24428 |
|
| 24429 | .cds--header__menu-title[aria-expanded=true] + .cds--header__menu .cds--header__menu-item:active {
|
| 24430 | background-color: var(--cds-layer-active);
|
| 24431 | color: var(--cds-text-primary, #161616);
|
| 24432 | }
|
| 24433 |
|
| 24434 | .cds--header__menu-title[aria-expanded=true] + .cds--header__menu .cds--header__menu-item.cds--header__menu-item--current {
|
| 24435 | background-color: var(--cds-layer-selected);
|
| 24436 | }
|
| 24437 | .cds--header__menu-title[aria-expanded=true] + .cds--header__menu .cds--header__menu-item.cds--header__menu-item--current:hover {
|
| 24438 | background-color: var(--cds-layer-selected-hover);
|
| 24439 | }
|
| 24440 |
|
| 24441 | .cds--header__menu .cds--header__menu-item {
|
| 24442 | block-size: 3rem;
|
| 24443 | }
|
| 24444 |
|
| 24445 | .cds--header__menu-arrow {
|
| 24446 | fill: var(--cds-icon-secondary, #525252);
|
| 24447 | margin-inline-start: 0.5rem;
|
| 24448 | transition: transform 110ms, fill 110ms;
|
| 24449 | }
|
| 24450 |
|
| 24451 | .cds--header__global {
|
| 24452 | display: flex;
|
| 24453 | flex: 1 1;
|
| 24454 | justify-content: flex-end;
|
| 24455 | block-size: 100%;
|
| 24456 | }
|
| 24457 |
|
| 24458 | .cds--skip-to-content {
|
| 24459 | position: absolute;
|
| 24460 | overflow: hidden;
|
| 24461 | padding: 0;
|
| 24462 | border: 0;
|
| 24463 | margin: -1px;
|
| 24464 | block-size: 1px;
|
| 24465 | clip: rect(0, 0, 0, 0);
|
| 24466 | inline-size: 1px;
|
| 24467 | visibility: inherit;
|
| 24468 | white-space: nowrap;
|
| 24469 | }
|
| 24470 |
|
| 24471 | .cds--skip-to-content:focus {
|
| 24472 | z-index: 9999;
|
| 24473 | display: flex;
|
| 24474 | align-items: center;
|
| 24475 | padding: 0 1rem;
|
| 24476 | border: 4px solid var(--cds-focus, #0f62fe);
|
| 24477 | background-color: var(--cds-background, #ffffff);
|
| 24478 | block-size: 3rem;
|
| 24479 | clip: auto;
|
| 24480 | color: var(--cds-text-secondary, #525252);
|
| 24481 | inline-size: auto;
|
| 24482 | inset-block-start: 0;
|
| 24483 | inset-inline-start: 0;
|
| 24484 | outline: none;
|
| 24485 | }
|
| 24486 |
|
| 24487 | .cds--header-panel {
|
| 24488 | position: fixed;
|
| 24489 | z-index: 8000;
|
| 24490 | overflow: hidden;
|
| 24491 | border: none;
|
| 24492 | background-color: var(--cds-layer);
|
| 24493 | color: var(--cds-text-secondary, #525252);
|
| 24494 | inline-size: 0;
|
| 24495 | inset-block-end: 0;
|
| 24496 | inset-block-start: 3rem;
|
| 24497 | inset-inline-end: 0;
|
| 24498 | transition: width 110ms cubic-bezier(0.2, 0, 1, 0.9);
|
| 24499 | will-change: width;
|
| 24500 | }
|
| 24501 |
|
| 24502 | .cds--header-panel--expanded {
|
| 24503 | border-inline-end: 1px solid var(--cds-border-subtle);
|
| 24504 | border-inline-start: 1px solid var(--cds-border-subtle);
|
| 24505 | inline-size: 16rem;
|
| 24506 | }
|
| 24507 |
|
| 24508 | .cds--side-nav {
|
| 24509 | position: fixed;
|
| 24510 | z-index: 8000;
|
| 24511 | overflow: hidden;
|
| 24512 | background-color: var(--cds-background, #ffffff);
|
| 24513 | color: var(--cds-text-secondary, #525252);
|
| 24514 | inline-size: 3rem;
|
| 24515 | inset-block-end: 0;
|
| 24516 | inset-block-start: 0;
|
| 24517 | inset-inline-start: 0;
|
| 24518 | max-inline-size: 16rem;
|
| 24519 | transition: inline-size 0.11s cubic-bezier(0.2, 0, 1, 0.9), transform 0.11s cubic-bezier(0.2, 0, 1, 0.9);
|
| 24520 | will-change: inline-size;
|
| 24521 | }
|
| 24522 |
|
| 24523 | .cds--side-nav--ux {
|
| 24524 | inline-size: 16rem;
|
| 24525 | inset-block-start: 3rem;
|
| 24526 | }
|
| 24527 | @media (max-width: 65.98rem) {
|
| 24528 | .cds--side-nav--ux {
|
| 24529 | inline-size: 0;
|
| 24530 | }
|
| 24531 | }
|
| 24532 |
|
| 24533 | .cds--side-nav--rail {
|
| 24534 | inline-size: 3rem;
|
| 24535 | }
|
| 24536 |
|
| 24537 | .cds--side-nav--hidden {
|
| 24538 | inline-size: 0;
|
| 24539 | }
|
| 24540 |
|
| 24541 | .cds--side-nav--expanded {
|
| 24542 | inline-size: 16rem;
|
| 24543 | }
|
| 24544 |
|
| 24545 | .cds--side-nav__overlay {
|
| 24546 | position: fixed;
|
| 24547 | background-color: transparent;
|
| 24548 | block-size: 0;
|
| 24549 | inline-size: 0;
|
| 24550 | inset-block-start: 3rem;
|
| 24551 | inset-inline-start: 0;
|
| 24552 | opacity: 0;
|
| 24553 | transition: opacity 300ms cubic-bezier(0.5, 0, 0.1, 1), background-color 300ms cubic-bezier(0.5, 0, 0.1, 1);
|
| 24554 | }
|
| 24555 |
|
| 24556 | @media (max-width: 65.98rem) {
|
| 24557 | .cds--side-nav__overlay-active {
|
| 24558 | z-index: 6000;
|
| 24559 | background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
|
| 24560 | block-size: 100vh;
|
| 24561 | inline-size: 100vw;
|
| 24562 | opacity: 1;
|
| 24563 | transition: opacity 300ms cubic-bezier(0.5, 0, 0.1, 1), background-color 300ms cubic-bezier(0.5, 0, 0.1, 1);
|
| 24564 | }
|
| 24565 | }
|
| 24566 |
|
| 24567 | .cds--header ~ .cds--side-nav {
|
| 24568 | block-size: calc(100% - 48px);
|
| 24569 | inset-block-start: 3rem;
|
| 24570 | }
|
| 24571 |
|
| 24572 | .cds--side-nav--fixed {
|
| 24573 | inline-size: 16rem;
|
| 24574 | }
|
| 24575 |
|
| 24576 | .cds--side-nav--collapsed {
|
| 24577 | inline-size: 16rem;
|
| 24578 | transform: translateX(-16rem);
|
| 24579 | }
|
| 24580 |
|
| 24581 | .cds--side-nav__navigation {
|
| 24582 | display: flex;
|
| 24583 | flex-direction: column;
|
| 24584 | }
|
| 24585 |
|
| 24586 | .cds--side-nav__items {
|
| 24587 | box-sizing: border-box;
|
| 24588 | padding: 0;
|
| 24589 | border: 0;
|
| 24590 | margin: 0;
|
| 24591 | font-family: inherit;
|
| 24592 | font-size: 100%;
|
| 24593 | vertical-align: baseline;
|
| 24594 | overflow: hidden;
|
| 24595 | flex: 1 1;
|
| 24596 | padding: 1rem 0 0;
|
| 24597 | }
|
| 24598 | .cds--side-nav__items *,
|
| 24599 | .cds--side-nav__items *::before,
|
| 24600 | .cds--side-nav__items *::after {
|
| 24601 | box-sizing: inherit;
|
| 24602 | }
|
| 24603 | .cds--side-nav:hover .cds--side-nav__items, .cds--side-nav--fixed .cds--side-nav__items, .cds--side-nav--expanded .cds--side-nav__items {
|
| 24604 | overflow-y: auto;
|
| 24605 | }
|
| 24606 |
|
| 24607 | .cds--side-nav--ux .cds--side-nav__items {
|
| 24608 | overflow-y: auto;
|
| 24609 | }
|
| 24610 |
|
| 24611 | .cds--side-nav__item {
|
| 24612 | overflow: hidden;
|
| 24613 | block-size: auto;
|
| 24614 | inline-size: auto;
|
| 24615 | }
|
| 24616 |
|
| 24617 | .cds--side-nav--ux .cds--side-nav__item {
|
| 24618 | block-size: auto;
|
| 24619 | inline-size: auto;
|
| 24620 | }
|
| 24621 |
|
| 24622 | .cds--side-nav__item:not(.cds--side-nav__item--active):hover .cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__submenu:hover,
|
| 24623 | .cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__link:hover,
|
| 24624 | .cds--side-nav__menu a.cds--side-nav__link:not(.cds--side-nav__link--current):not([aria-current=page]):hover,
|
| 24625 | .cds--side-nav a.cds--header__menu-item:hover,
|
| 24626 | .cds--side-nav .cds--header__menu-title[aria-expanded=true]:hover {
|
| 24627 | background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
|
| 24628 | color: var(--cds-text-primary, #161616);
|
| 24629 | }
|
| 24630 |
|
| 24631 | .cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__link:hover > span,
|
| 24632 | .cds--side-nav__item:not(.cds--side-nav__item--active) .cds--side-nav__menu-item > .cds--side-nav__link:hover > span {
|
| 24633 | color: var(--cds-text-primary, #161616);
|
| 24634 | }
|
| 24635 |
|
| 24636 | .cds--side-nav__item--large {
|
| 24637 | block-size: auto;
|
| 24638 | }
|
| 24639 |
|
| 24640 | .cds--side-nav__divider {
|
| 24641 | margin: 0.5rem 1rem;
|
| 24642 | background-color: var(--cds-border-subtle);
|
| 24643 | block-size: 1px;
|
| 24644 | list-style-type: none;
|
| 24645 | }
|
| 24646 |
|
| 24647 | .cds--side-nav__divider hr {
|
| 24648 | border: none;
|
| 24649 | }
|
| 24650 |
|
| 24651 | .cds--side-nav__submenu {
|
| 24652 | box-sizing: border-box;
|
| 24653 | padding: 0;
|
| 24654 | border: 0;
|
| 24655 | margin: 0;
|
| 24656 | font-family: inherit;
|
| 24657 | font-size: 100%;
|
| 24658 | vertical-align: baseline;
|
| 24659 | display: inline-block;
|
| 24660 | padding: 0;
|
| 24661 | border: 0;
|
| 24662 | -webkit-appearance: none;
|
| 24663 | -moz-appearance: none;
|
| 24664 | appearance: none;
|
| 24665 | background: none;
|
| 24666 | cursor: pointer;
|
| 24667 | text-align: start;
|
| 24668 | inline-size: 100%;
|
| 24669 | font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
|
| 24670 | font-weight: var(--cds-heading-compact-01-font-weight, 600);
|
| 24671 | line-height: var(--cds-heading-compact-01-line-height, 1.28572);
|
| 24672 | letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
|
| 24673 | outline: 2px solid transparent;
|
| 24674 | outline-offset: -2px;
|
| 24675 | display: flex;
|
| 24676 | align-items: center;
|
| 24677 | padding: 0 1rem;
|
| 24678 | block-size: 2rem;
|
| 24679 | color: var(--cds-text-secondary, #525252);
|
| 24680 | transition: color 110ms, background-color 110ms, outline 110ms;
|
| 24681 | -webkit-user-select: none;
|
| 24682 | -moz-user-select: none;
|
| 24683 | user-select: none;
|
| 24684 | }
|
| 24685 | .cds--side-nav__submenu *,
|
| 24686 | .cds--side-nav__submenu *::before,
|
| 24687 | .cds--side-nav__submenu *::after {
|
| 24688 | box-sizing: inherit;
|
| 24689 | }
|
| 24690 | .cds--side-nav__submenu::-moz-focus-inner {
|
| 24691 | border: 0;
|
| 24692 | }
|
| 24693 |
|
| 24694 | .cds--side-nav__submenu:hover {
|
| 24695 | background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
|
| 24696 | color: var(--cds-text-primary, #161616);
|
| 24697 | }
|
| 24698 |
|
| 24699 | .cds--side-nav__submenu:focus {
|
| 24700 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 24701 | outline-offset: -2px;
|
| 24702 | }
|
| 24703 | @media screen and (prefers-contrast) {
|
| 24704 | .cds--side-nav__submenu:focus {
|
| 24705 | outline-style: dotted;
|
| 24706 | }
|
| 24707 | }
|
| 24708 |
|
| 24709 | .cds--side-nav__submenu-title {
|
| 24710 | overflow: hidden;
|
| 24711 | text-overflow: ellipsis;
|
| 24712 | white-space: nowrap;
|
| 24713 | text-align: start;
|
| 24714 | }
|
| 24715 |
|
| 24716 | .cds--side-nav__icon.cds--side-nav__submenu-chevron {
|
| 24717 | display: flex;
|
| 24718 | flex: 1 1;
|
| 24719 | justify-content: flex-end;
|
| 24720 | }
|
| 24721 |
|
| 24722 | .cds--side-nav__submenu-chevron > svg {
|
| 24723 | block-size: 1rem;
|
| 24724 | inline-size: 1rem;
|
| 24725 | transition: transform 110ms;
|
| 24726 | }
|
| 24727 |
|
| 24728 | .cds--side-nav__submenu[aria-expanded=true] .cds--side-nav__submenu-chevron > svg {
|
| 24729 | transform: rotate(180deg);
|
| 24730 | }
|
| 24731 |
|
| 24732 | .cds--side-nav__item--large .cds--side-nav__submenu {
|
| 24733 | block-size: 3rem;
|
| 24734 | }
|
| 24735 |
|
| 24736 | .cds--side-nav__item--active .cds--side-nav__submenu:hover {
|
| 24737 | background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
|
| 24738 | color: var(--cds-text-primary, #161616);
|
| 24739 | }
|
| 24740 |
|
| 24741 | .cds--side-nav__item--active .cds--side-nav__submenu[aria-expanded=false] {
|
| 24742 | position: relative;
|
| 24743 | background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
|
| 24744 | color: var(--cds-text-primary, #161616);
|
| 24745 | }
|
| 24746 | .cds--side-nav__item--active .cds--side-nav__submenu[aria-expanded=false]::before {
|
| 24747 | position: absolute;
|
| 24748 | background-color: var(--cds-border-interactive, #0f62fe);
|
| 24749 | content: "";
|
| 24750 | inline-size: 3px;
|
| 24751 | inset-block-end: 0;
|
| 24752 | inset-block-start: 0;
|
| 24753 | inset-inline-start: 0;
|
| 24754 | }
|
| 24755 |
|
| 24756 | .cds--side-nav__item--active .cds--side-nav__submenu-title {
|
| 24757 | color: var(--cds-text-primary, #161616);
|
| 24758 | font-weight: 600;
|
| 24759 | }
|
| 24760 |
|
| 24761 | .cds--side-nav__item--active .cds--side-nav__icon > svg {
|
| 24762 | fill: var(--cds-icon-primary, #161616);
|
| 24763 | }
|
| 24764 |
|
| 24765 | .cds--side-nav__menu {
|
| 24766 | box-sizing: border-box;
|
| 24767 | padding: 0;
|
| 24768 | border: 0;
|
| 24769 | margin: 0;
|
| 24770 | font-family: inherit;
|
| 24771 | font-size: 100%;
|
| 24772 | vertical-align: baseline;
|
| 24773 | display: block;
|
| 24774 | max-block-size: 0;
|
| 24775 | visibility: hidden;
|
| 24776 | }
|
| 24777 | .cds--side-nav__menu *,
|
| 24778 | .cds--side-nav__menu *::before,
|
| 24779 | .cds--side-nav__menu *::after {
|
| 24780 | box-sizing: inherit;
|
| 24781 | }
|
| 24782 |
|
| 24783 | .cds--side-nav__submenu[aria-expanded=true] + .cds--side-nav__menu {
|
| 24784 | max-block-size: 93.75rem;
|
| 24785 | visibility: inherit;
|
| 24786 | }
|
| 24787 |
|
| 24788 | .cds--side-nav__menu a.cds--side-nav__link {
|
| 24789 | block-size: 2rem;
|
| 24790 | font-weight: 400;
|
| 24791 | min-block-size: 2rem;
|
| 24792 | padding-inline-start: 2rem;
|
| 24793 | }
|
| 24794 |
|
| 24795 | .cds--side-nav__item.cds--side-nav__item--icon a.cds--side-nav__link {
|
| 24796 | padding-inline-start: 4.5rem;
|
| 24797 | }
|
| 24798 |
|
| 24799 | .cds--side-nav__menu a.cds--side-nav__link--current,
|
| 24800 | .cds--side-nav__menu a.cds--side-nav__link[aria-current=page],
|
| 24801 | a.cds--side-nav__link--current {
|
| 24802 | background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
|
| 24803 | }
|
| 24804 | .cds--side-nav__menu a.cds--side-nav__link--current > span,
|
| 24805 | .cds--side-nav__menu a.cds--side-nav__link[aria-current=page] > span,
|
| 24806 | a.cds--side-nav__link--current > span {
|
| 24807 | color: var(--cds-text-primary, #161616);
|
| 24808 | font-weight: 600;
|
| 24809 | }
|
| 24810 |
|
| 24811 | a.cds--side-nav__link,
|
| 24812 | .cds--side-nav a.cds--header__menu-item,
|
| 24813 | .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu {
|
| 24814 | outline: 2px solid transparent;
|
| 24815 | outline-offset: -2px;
|
| 24816 | font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
|
| 24817 | font-weight: var(--cds-heading-compact-01-font-weight, 600);
|
| 24818 | line-height: var(--cds-heading-compact-01-line-height, 1.28572);
|
| 24819 | letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
|
| 24820 | position: relative;
|
| 24821 | display: flex;
|
| 24822 | align-items: center;
|
| 24823 | padding: 0 1rem;
|
| 24824 | min-block-size: 2rem;
|
| 24825 | text-decoration: none;
|
| 24826 | transition: color 110ms, background-color 110ms, outline 110ms;
|
| 24827 | }
|
| 24828 |
|
| 24829 | .cds--side-nav__item--large a.cds--side-nav__link {
|
| 24830 | block-size: 3rem;
|
| 24831 | }
|
| 24832 |
|
| 24833 | a.cds--side-nav__link > .cds--side-nav__link-text,
|
| 24834 | .cds--side-nav a.cds--header__menu-item .cds--text-truncate-end {
|
| 24835 | overflow: hidden;
|
| 24836 | text-overflow: ellipsis;
|
| 24837 | white-space: nowrap;
|
| 24838 | color: var(--cds-text-secondary, #525252);
|
| 24839 | font-size: 0.875rem;
|
| 24840 | letter-spacing: 0.1px;
|
| 24841 | line-height: 1.25rem;
|
| 24842 | -webkit-user-select: none;
|
| 24843 | -moz-user-select: none;
|
| 24844 | user-select: none;
|
| 24845 | }
|
| 24846 |
|
| 24847 | a.cds--side-nav__link:focus,
|
| 24848 | .cds--side-nav a.cds--header__menu-item:focus {
|
| 24849 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 24850 | outline-offset: -2px;
|
| 24851 | }
|
| 24852 | @media screen and (prefers-contrast) {
|
| 24853 | a.cds--side-nav__link:focus,
|
| 24854 | .cds--side-nav a.cds--header__menu-item:focus {
|
| 24855 | outline-style: dotted;
|
| 24856 | }
|
| 24857 | }
|
| 24858 |
|
| 24859 | a.cds--side-nav__link[aria-current=page],
|
| 24860 | a.cds--side-nav__link--current {
|
| 24861 | background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
|
| 24862 | font-weight: 600;
|
| 24863 | }
|
| 24864 |
|
| 24865 | a.cds--side-nav__link[aria-current=page] .cds--side-nav__link-text,
|
| 24866 | a.cds--side-nav__link--current .cds--side-nav__link-text {
|
| 24867 | color: var(--cds-text-primary, #161616);
|
| 24868 | }
|
| 24869 |
|
| 24870 | a.cds--side-nav__link[aria-current=page]::before,
|
| 24871 | a.cds--side-nav__link--current::before {
|
| 24872 | position: absolute;
|
| 24873 | background-color: var(--cds-border-interactive, #0f62fe);
|
| 24874 | content: "";
|
| 24875 | inline-size: 3px;
|
| 24876 | inset-block-end: 0;
|
| 24877 | inset-block-start: 0;
|
| 24878 | inset-inline-start: 0;
|
| 24879 | }
|
| 24880 |
|
| 24881 | .cds--side-nav__icon {
|
| 24882 | display: flex;
|
| 24883 | flex: 0 0 1rem;
|
| 24884 | align-items: center;
|
| 24885 | justify-content: center;
|
| 24886 | }
|
| 24887 |
|
| 24888 | .cds--side-nav__icon:not(.cds--side-nav__submenu-chevron) {
|
| 24889 | margin-inline-end: 1.5rem;
|
| 24890 | }
|
| 24891 |
|
| 24892 | .cds--side-nav__icon > svg {
|
| 24893 | block-size: 1rem;
|
| 24894 | fill: var(--cds-icon-secondary, #525252);
|
| 24895 | inline-size: 1rem;
|
| 24896 | }
|
| 24897 |
|
| 24898 | .cds--side-nav__icon > svg.cds--side-nav-collapse-icon {
|
| 24899 | display: none;
|
| 24900 | }
|
| 24901 |
|
| 24902 | .cds--side-nav--expanded .cds--side-nav__icon > svg.cds--side-nav-expand-icon {
|
| 24903 | display: none;
|
| 24904 | }
|
| 24905 |
|
| 24906 | .cds--side-nav--expanded .cds--side-nav__icon > svg.cds--side-nav-collapse-icon {
|
| 24907 | display: block;
|
| 24908 | }
|
| 24909 |
|
| 24910 | .cds--side-nav--fixed a.cds--side-nav__link,
|
| 24911 | .cds--side-nav--fixed .cds--side-nav__submenu {
|
| 24912 | padding-inline-start: 1rem;
|
| 24913 | }
|
| 24914 |
|
| 24915 | .cds--side-nav--fixed .cds--side-nav__item:not(.cds--side-nav__item--icon) .cds--side-nav__menu a.cds--side-nav__link {
|
| 24916 | padding-inline-start: 2rem;
|
| 24917 | }
|
| 24918 |
|
| 24919 | @media (max-width: 65.98rem) {
|
| 24920 | .cds--side-nav .cds--header__nav {
|
| 24921 | display: block;
|
| 24922 | }
|
| 24923 | }
|
| 24924 |
|
| 24925 | .cds--side-nav__header-navigation {
|
| 24926 | box-sizing: border-box;
|
| 24927 | padding: 0;
|
| 24928 | border: 0;
|
| 24929 | margin: 0;
|
| 24930 | font-family: inherit;
|
| 24931 | font-size: 100%;
|
| 24932 | vertical-align: baseline;
|
| 24933 | display: none;
|
| 24934 | }
|
| 24935 | .cds--side-nav__header-navigation *,
|
| 24936 | .cds--side-nav__header-navigation *::before,
|
| 24937 | .cds--side-nav__header-navigation *::after {
|
| 24938 | box-sizing: inherit;
|
| 24939 | }
|
| 24940 | @media (max-width: 65.98rem) {
|
| 24941 | .cds--side-nav__header-navigation {
|
| 24942 | position: relative;
|
| 24943 | display: block;
|
| 24944 | margin-block-end: 2rem;
|
| 24945 | }
|
| 24946 | }
|
| 24947 |
|
| 24948 | .cds--side-nav__header-divider::after {
|
| 24949 | position: absolute;
|
| 24950 | background: var(--cds-border-subtle);
|
| 24951 | block-size: 0.0625rem;
|
| 24952 | content: "";
|
| 24953 | inline-size: calc(100% - 32px);
|
| 24954 | inset-block-end: -1rem;
|
| 24955 | inset-inline-start: 1rem;
|
| 24956 | }
|
| 24957 |
|
| 24958 | .cds--side-nav a.cds--header__menu-item {
|
| 24959 | justify-content: space-between;
|
| 24960 | color: var(--cds-text-secondary, #525252);
|
| 24961 | white-space: nowrap;
|
| 24962 | }
|
| 24963 | .cds--side-nav a.cds--header__menu-item[aria-expanded=true] {
|
| 24964 | background-color: transparent;
|
| 24965 | }
|
| 24966 |
|
| 24967 | .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu {
|
| 24968 | padding: 0;
|
| 24969 | background-color: transparent;
|
| 24970 | box-shadow: none;
|
| 24971 | inline-size: 100%;
|
| 24972 | inset-block-end: inherit;
|
| 24973 | transform: none;
|
| 24974 | }
|
| 24975 | .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu li {
|
| 24976 | inline-size: 100%;
|
| 24977 | }
|
| 24978 | .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item {
|
| 24979 | font-weight: 400;
|
| 24980 | padding-inline-start: 4.25rem;
|
| 24981 | }
|
| 24982 | .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item:hover {
|
| 24983 | background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
|
| 24984 | color: var(--cds-text-primary, #161616);
|
| 24985 | }
|
| 24986 | .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item--current:hover {
|
| 24987 | background-color: var(--cds-layer-selected-hover);
|
| 24988 | }
|
| 24989 |
|
| 24990 | .cds--side-nav .cds--side-nav__header-navigation a.cds--header__menu-item[aria-current=page]::after,
|
| 24991 | .cds--side-nav .cds--side-nav__header-navigation .cds--header__menu-item--current::after {
|
| 24992 | block-size: calc(100% + 4px);
|
| 24993 | inline-size: 3px;
|
| 24994 | }
|
| 24995 |
|
| 24996 | .cds--side-nav .cds--header__menu a.cds--header__menu-item {
|
| 24997 | block-size: inherit;
|
| 24998 | }
|
| 24999 |
|
| 25000 | .cds--side-nav a.cds--header__menu-item:hover .cds--header__menu-arrow,
|
| 25001 | .cds--side-nav a.cds--header__menu-item:focus .cds--header__menu-arrow,
|
| 25002 | .cds--side-nav .cds--header__menu-arrow {
|
| 25003 | fill: var(--cds-icon-secondary, #525252);
|
| 25004 | }
|
| 25005 |
|
| 25006 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 25007 | .cds--side-nav__icon > svg,
|
| 25008 | .cds--side-nav a.cds--header__menu-item:hover .cds--header__menu-arrow,
|
| 25009 | .cds--side-nav a.cds--header__menu-item:focus .cds--header__menu-arrow,
|
| 25010 | .cds--side-nav .cds--header__menu-arrow {
|
| 25011 | fill: ButtonText;
|
| 25012 | }
|
| 25013 | }
|
| 25014 |
|
| 25015 | .cds--switcher {
|
| 25016 | box-sizing: border-box;
|
| 25017 | padding: 0;
|
| 25018 | border: 0;
|
| 25019 | margin: 0;
|
| 25020 | font-family: inherit;
|
| 25021 | font-size: 100%;
|
| 25022 | vertical-align: baseline;
|
| 25023 | display: flex;
|
| 25024 | flex-direction: column;
|
| 25025 | align-items: center;
|
| 25026 | justify-content: center;
|
| 25027 | color: var(--cds-text-secondary, #525252);
|
| 25028 | }
|
| 25029 | .cds--switcher *,
|
| 25030 | .cds--switcher *::before,
|
| 25031 | .cds--switcher *::after {
|
| 25032 | box-sizing: inherit;
|
| 25033 | }
|
| 25034 |
|
| 25035 | .cds--switcher__item {
|
| 25036 | block-size: 2rem;
|
| 25037 | inline-size: 100%;
|
| 25038 | }
|
| 25039 |
|
| 25040 | .cds--switcher__item:nth-child(1) {
|
| 25041 | margin-block-start: 1rem;
|
| 25042 | }
|
| 25043 |
|
| 25044 | .cds--switcher__item--divider {
|
| 25045 | display: block;
|
| 25046 | border: none;
|
| 25047 | margin: 0.5rem 1rem;
|
| 25048 | background: var(--cds-border-subtle);
|
| 25049 | block-size: 1px;
|
| 25050 | inline-size: 14rem;
|
| 25051 | }
|
| 25052 |
|
| 25053 | .cds--switcher__item-link {
|
| 25054 | font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
|
| 25055 | font-weight: var(--cds-heading-compact-01-font-weight, 600);
|
| 25056 | line-height: var(--cds-heading-compact-01-line-height, 1.28572);
|
| 25057 | letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
|
| 25058 | display: block;
|
| 25059 | padding: 0.375rem 1rem;
|
| 25060 | block-size: 2rem;
|
| 25061 | color: var(--cds-text-secondary, #525252);
|
| 25062 | text-decoration: none;
|
| 25063 | }
|
| 25064 | .cds--switcher__item-link:hover:not(.cds--switcher__item-link--selected) {
|
| 25065 | background: var(--cds-layer-hover);
|
| 25066 | color: var(--cds-text-primary, #161616);
|
| 25067 | cursor: pointer;
|
| 25068 | }
|
| 25069 | .cds--switcher__item-link:focus {
|
| 25070 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 25071 | outline-offset: -2px;
|
| 25072 | }
|
| 25073 | .cds--switcher__item-link:active {
|
| 25074 | background: var(--cds-layer-active);
|
| 25075 | color: var(--cds-text-primary, #161616);
|
| 25076 | }
|
| 25077 |
|
| 25078 | .cds--switcher__item-link--selected {
|
| 25079 | background: var(--cds-layer-selected);
|
| 25080 | color: var(--cds-text-primary, #161616);
|
| 25081 | }
|
| 25082 |
|
| 25083 | .cds--content {
|
| 25084 | padding: 2rem;
|
| 25085 | color: var(--cds-text-primary, #161616);
|
| 25086 | will-change: margin-left;
|
| 25087 | }
|
| 25088 |
|
| 25089 | .cds--header ~ .cds--content,
|
| 25090 | div:has(.cds--header) ~ .cds--content {
|
| 25091 | margin-block-start: 3rem;
|
| 25092 | }
|
| 25093 |
|
| 25094 | .cds--side-nav ~ .cds--content {
|
| 25095 | margin-inline-start: 3rem;
|
| 25096 | }
|
| 25097 |
|
| 25098 | .cds--side-nav.cds--side-nav--expanded ~ .cds--content {
|
| 25099 | margin-inline-start: 16rem;
|
| 25100 | }
|
| 25101 |
|
| 25102 | .cds--header {
|
| 25103 | box-sizing: border-box;
|
| 25104 | padding: 0;
|
| 25105 | border: 0;
|
| 25106 | margin: 0;
|
| 25107 | font-family: inherit;
|
| 25108 | font-size: 100%;
|
| 25109 | vertical-align: baseline;
|
| 25110 | position: fixed;
|
| 25111 | z-index: 8000;
|
| 25112 | display: flex;
|
| 25113 | align-items: center;
|
| 25114 | background-color: var(--cds-background, #ffffff);
|
| 25115 | block-size: 3rem;
|
| 25116 | border-block-end: 1px solid var(--cds-border-subtle);
|
| 25117 | inset-block-start: 0;
|
| 25118 | inset-inline-end: 0;
|
| 25119 | inset-inline-start: 0;
|
| 25120 | }
|
| 25121 | .cds--header *,
|
| 25122 | .cds--header *::before,
|
| 25123 | .cds--header *::after {
|
| 25124 | box-sizing: inherit;
|
| 25125 | }
|
| 25126 |
|
| 25127 | .cds--header__action {
|
| 25128 | box-sizing: border-box;
|
| 25129 | padding: 0;
|
| 25130 | border: 0;
|
| 25131 | margin: 0;
|
| 25132 | font-family: inherit;
|
| 25133 | font-size: 100%;
|
| 25134 | vertical-align: baseline;
|
| 25135 | display: inline-block;
|
| 25136 | padding: 0;
|
| 25137 | border: 0;
|
| 25138 | -webkit-appearance: none;
|
| 25139 | -moz-appearance: none;
|
| 25140 | appearance: none;
|
| 25141 | background: none;
|
| 25142 | cursor: pointer;
|
| 25143 | text-align: start;
|
| 25144 | inline-size: 100%;
|
| 25145 | display: inline-flex;
|
| 25146 | border: 0.0625rem solid transparent;
|
| 25147 | block-size: 3rem;
|
| 25148 | inline-size: 3rem;
|
| 25149 | transition: background-color 110ms, border-color 110ms;
|
| 25150 | }
|
| 25151 | .cds--header__action *,
|
| 25152 | .cds--header__action *::before,
|
| 25153 | .cds--header__action *::after {
|
| 25154 | box-sizing: inherit;
|
| 25155 | }
|
| 25156 | .cds--header__action::-moz-focus-inner {
|
| 25157 | border: 0;
|
| 25158 | }
|
| 25159 | @media (max-width: 41.98rem) {
|
| 25160 | .cds--header__action {
|
| 25161 | min-inline-size: 3rem;
|
| 25162 | }
|
| 25163 | }
|
| 25164 |
|
| 25165 | .cds--header__global .cds--popover {
|
| 25166 | z-index: 8001;
|
| 25167 | }
|
| 25168 |
|
| 25169 | .cds--header__action > :first-child {
|
| 25170 | margin-block-start: 0;
|
| 25171 | }
|
| 25172 |
|
| 25173 | .cds--header__action > svg.cds--navigation-menu-panel-collapse-icon,
|
| 25174 | .cds--header__action--active > svg.cds--navigation-menu-panel-expand-icon {
|
| 25175 | display: none;
|
| 25176 | }
|
| 25177 |
|
| 25178 | .cds--header__action--active > svg.cds--navigation-menu-panel-collapse-icon {
|
| 25179 | display: inline;
|
| 25180 | }
|
| 25181 |
|
| 25182 | .cds--header__action:hover {
|
| 25183 | background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
|
| 25184 | }
|
| 25185 |
|
| 25186 | .cds--header__action--active {
|
| 25187 | background: var(--cds-layer);
|
| 25188 | border-block-end: 1px solid transparent;
|
| 25189 | border-inline-end: 1px solid var(--cds-border-subtle);
|
| 25190 | border-inline-start: 1px solid var(--cds-border-subtle);
|
| 25191 | }
|
| 25192 |
|
| 25193 | .cds--header__action--active > svg {
|
| 25194 | fill: var(--cds-icon-primary, #161616);
|
| 25195 | }
|
| 25196 |
|
| 25197 | .cds--header__action:focus {
|
| 25198 | border-color: var(--cds-focus, #0f62fe);
|
| 25199 | outline: none;
|
| 25200 | }
|
| 25201 |
|
| 25202 | .cds--header__action:active {
|
| 25203 | background-color: var(--cds-background-active, rgba(141, 141, 141, 0.5));
|
| 25204 | }
|
| 25205 |
|
| 25206 | .cds--header__action.cds--btn--icon-only {
|
| 25207 | align-items: center;
|
| 25208 | justify-content: center;
|
| 25209 | }
|
| 25210 |
|
| 25211 | .cds--btn.cds--btn--icon-only.cds--header__action svg {
|
| 25212 | fill: var(--cds-icon-secondary, #525252);
|
| 25213 | }
|
| 25214 |
|
| 25215 | .cds--btn.cds--btn--icon-only.cds--header__action:hover svg,
|
| 25216 | .cds--btn.cds--btn--icon-only.cds--header__action:active svg,
|
| 25217 | .cds--btn.cds--btn--icon-only.cds--header__action--active svg {
|
| 25218 | fill: var(--cds-icon-primary, #161616);
|
| 25219 | }
|
| 25220 |
|
| 25221 | .cds--header__menu-trigger > svg {
|
| 25222 | fill: var(--cds-icon-primary, #161616);
|
| 25223 | }
|
| 25224 |
|
| 25225 | .cds--header__menu-trigger:hover > svg {
|
| 25226 | fill: var(--cds-icon-primary, #161616);
|
| 25227 | }
|
| 25228 |
|
| 25229 | .cds--header__menu-toggle {
|
| 25230 | display: flex;
|
| 25231 | align-items: center;
|
| 25232 | justify-content: center;
|
| 25233 | }
|
| 25234 |
|
| 25235 | @media (min-width: 66rem) {
|
| 25236 | .cds--header__menu-toggle__hidden {
|
| 25237 | display: none;
|
| 25238 | }
|
| 25239 | }
|
| 25240 |
|
| 25241 | a.cds--header__name {
|
| 25242 | font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
| 25243 | font-weight: var(--cds-body-compact-01-font-weight, 400);
|
| 25244 | line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
| 25245 | letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
| 25246 | display: flex;
|
| 25247 | align-items: center;
|
| 25248 | padding: 0 2rem 0 1rem;
|
| 25249 | border: 0.125rem solid transparent;
|
| 25250 | block-size: 100%;
|
| 25251 | font-weight: 600;
|
| 25252 | letter-spacing: 0.1px;
|
| 25253 | line-height: 1.25rem;
|
| 25254 | outline: none;
|
| 25255 | text-decoration: none;
|
| 25256 | transition: border-color 110ms;
|
| 25257 | -webkit-user-select: none;
|
| 25258 | -moz-user-select: none;
|
| 25259 | user-select: none;
|
| 25260 | }
|
| 25261 | @media (max-width: 41.98rem) {
|
| 25262 | a.cds--header__name {
|
| 25263 | padding: 0 1rem;
|
| 25264 | }
|
| 25265 | }
|
| 25266 |
|
| 25267 | a.cds--header__name:focus {
|
| 25268 | border-color: var(--cds-focus, #0f62fe);
|
| 25269 | }
|
| 25270 |
|
| 25271 | .cds--header__name--prefix {
|
| 25272 | font-weight: 400;
|
| 25273 | }
|
| 25274 |
|
| 25275 | a.cds--header__name,
|
| 25276 | a.cds--header__name:hover {
|
| 25277 | color: var(--cds-text-primary, #161616);
|
| 25278 | }
|
| 25279 |
|
| 25280 | .cds--header__menu-toggle:not(.cds--header__menu-toggle__hidden) ~ .cds--header__name {
|
| 25281 | padding-inline-start: 0.5rem;
|
| 25282 | }
|
| 25283 |
|
| 25284 | .cds--header__nav {
|
| 25285 | position: relative;
|
| 25286 | display: none;
|
| 25287 | block-size: 100%;
|
| 25288 | padding-inline-start: 1rem;
|
| 25289 | }
|
| 25290 | @media (min-width: 66rem) {
|
| 25291 | .cds--header__nav {
|
| 25292 | display: block;
|
| 25293 | }
|
| 25294 | }
|
| 25295 | .cds--header__nav::before {
|
| 25296 | position: absolute;
|
| 25297 | display: block;
|
| 25298 | background-color: var(--cds-border-subtle);
|
| 25299 | block-size: 1.5rem;
|
| 25300 | content: "";
|
| 25301 | inline-size: 0.0625rem;
|
| 25302 | inset-block-start: 50%;
|
| 25303 | inset-inline-start: 0;
|
| 25304 | transform: translateY(-50%);
|
| 25305 | }
|
| 25306 |
|
| 25307 | .cds--header__menu-bar {
|
| 25308 | box-sizing: border-box;
|
| 25309 | padding: 0;
|
| 25310 | border: 0;
|
| 25311 | margin: 0;
|
| 25312 | font-family: inherit;
|
| 25313 | font-size: 100%;
|
| 25314 | vertical-align: baseline;
|
| 25315 | display: flex;
|
| 25316 | padding: 0;
|
| 25317 | margin: 0;
|
| 25318 | block-size: 100%;
|
| 25319 | list-style: none;
|
| 25320 | }
|
| 25321 | .cds--header__menu-bar *,
|
| 25322 | .cds--header__menu-bar *::before,
|
| 25323 | .cds--header__menu-bar *::after {
|
| 25324 | box-sizing: inherit;
|
| 25325 | }
|
| 25326 |
|
| 25327 | a.cds--header__menu-item {
|
| 25328 | position: relative;
|
| 25329 | display: flex;
|
| 25330 | align-items: center;
|
| 25331 | padding: 0 1rem;
|
| 25332 | border: 2px solid transparent;
|
| 25333 | background-color: var(--cds-background, #ffffff);
|
| 25334 | block-size: 100%;
|
| 25335 | color: var(--cds-text-secondary, #525252);
|
| 25336 | font-size: 0.875rem;
|
| 25337 | font-weight: 400;
|
| 25338 | letter-spacing: 0;
|
| 25339 | line-height: 1.125rem;
|
| 25340 | text-decoration: none;
|
| 25341 | transition: background-color 110ms, border-color 110ms, color 110ms;
|
| 25342 | -webkit-user-select: none;
|
| 25343 | -moz-user-select: none;
|
| 25344 | user-select: none;
|
| 25345 | }
|
| 25346 |
|
| 25347 | a.cds--header__menu-item:hover {
|
| 25348 | background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
|
| 25349 | color: var(--cds-text-primary, #161616);
|
| 25350 | }
|
| 25351 |
|
| 25352 | .cds--header__action:active,
|
| 25353 | a.cds--header__menu-item:active {
|
| 25354 | background-color: var(--cds-background-active, rgba(141, 141, 141, 0.5));
|
| 25355 | color: var(--cds-text-primary, #161616);
|
| 25356 | }
|
| 25357 |
|
| 25358 | a.cds--header__menu-item:focus {
|
| 25359 | border-color: var(--cds-focus, #0f62fe);
|
| 25360 | outline: none;
|
| 25361 | }
|
| 25362 |
|
| 25363 | a.cds--header__menu-item:hover > svg,
|
| 25364 | a.cds--header__menu-item:active > svg {
|
| 25365 | fill: var(--cds-icon-primary, #161616);
|
| 25366 | }
|
| 25367 |
|
| 25368 | a.cds--header__menu-item[aria-current=page],
|
| 25369 | .cds--header__menu-item--current {
|
| 25370 | color: var(--cds-text-primary, #161616);
|
| 25371 | }
|
| 25372 |
|
| 25373 | a.cds--header__menu-item[aria-current=page]::after,
|
| 25374 | .cds--header__menu-item--current::after {
|
| 25375 | position: absolute;
|
| 25376 | background-color: var(--cds-border-interactive, #0f62fe);
|
| 25377 | block-size: 3px;
|
| 25378 | content: "";
|
| 25379 | inline-size: calc(100% + 4px);
|
| 25380 | inset-block-end: -2px;
|
| 25381 | inset-inline-start: -2px;
|
| 25382 | }
|
| 25383 |
|
| 25384 | a.cds--header__menu-item[aria-current=page]:focus::after,
|
| 25385 | .cds--header__menu-item--current:focus::after {
|
| 25386 | border: 0;
|
| 25387 | }
|
| 25388 |
|
| 25389 | .cds--header__submenu .cds--header__menu a.cds--header__menu-item[aria-current=page]::after,
|
| 25390 | .cds--header__submenu .cds--header__menu .cds--header__menu-item--current::after {
|
| 25391 | background-color: var(--cds-border-interactive, #0f62fe);
|
| 25392 | block-size: calc(100% + 4px);
|
| 25393 | inline-size: 3px;
|
| 25394 | inset-block-start: -2px;
|
| 25395 | inset-inline-start: -2px;
|
| 25396 | }
|
| 25397 | .cds--header__submenu .cds--header__menu a.cds--header__menu-item[aria-current=page]:focus::after,
|
| 25398 | .cds--header__submenu .cds--header__menu .cds--header__menu-item--current:focus::after {
|
| 25399 | background-color: var(--cds-border-interactive, #0f62fe);
|
| 25400 | block-size: calc(100% + 4px);
|
| 25401 | inline-size: 5px;
|
| 25402 | inset-block-start: -2px;
|
| 25403 | inset-inline-start: -2px;
|
| 25404 | }
|
| 25405 |
|
| 25406 | a.cds--header__menu-item[aria-current=page]:focus,
|
| 25407 | a.cds--header__menu-item.cds--header__menu-item--current:focus {
|
| 25408 | border: 2px solid var(--cds-focus, #0f62fe);
|
| 25409 | }
|
| 25410 |
|
| 25411 | .cds--header__submenu {
|
| 25412 | position: relative;
|
| 25413 | }
|
| 25414 |
|
| 25415 | .cds--header__menu-title[aria-haspopup=true] {
|
| 25416 | position: relative;
|
| 25417 | }
|
| 25418 |
|
| 25419 | .cds--header__menu-title[aria-expanded=true] {
|
| 25420 | z-index: 8002;
|
| 25421 | background-color: var(--cds-layer);
|
| 25422 | color: var(--cds-text-secondary, #525252);
|
| 25423 | }
|
| 25424 |
|
| 25425 | .cds--header__menu-title[aria-expanded=true] > .cds--header__menu-arrow {
|
| 25426 | transform: rotate(180deg);
|
| 25427 | }
|
| 25428 |
|
| 25429 | .cds--header__menu {
|
| 25430 | display: none;
|
| 25431 | padding: 0;
|
| 25432 | margin: 0;
|
| 25433 | list-style: none;
|
| 25434 | }
|
| 25435 |
|
| 25436 | .cds--header__menu-title[aria-expanded=true] + .cds--header__menu {
|
| 25437 | position: absolute;
|
| 25438 | z-index: 8001;
|
| 25439 | display: flex;
|
| 25440 | flex-direction: column;
|
| 25441 | background-color: var(--cds-layer);
|
| 25442 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
|
| 25443 | inline-size: 12.5rem;
|
| 25444 | inset-block-end: 0;
|
| 25445 | inset-inline-start: 0;
|
| 25446 | transform: translateY(100%);
|
| 25447 | }
|
| 25448 |
|
| 25449 | .cds--header__menu-title[aria-expanded=true] + .cds--header__menu .cds--header__menu-item {
|
| 25450 | background-color: var(--cds-layer);
|
| 25451 | }
|
| 25452 |
|
| 25453 | .cds--header__menu-title[aria-expanded=true] + .cds--header__menu .cds--header__menu-item:hover {
|
| 25454 | background-color: var(--cds-layer-hover);
|
| 25455 | color: var(--cds-text-primary, #161616);
|
| 25456 | }
|
| 25457 |
|
| 25458 | .cds--header__menu-title[aria-expanded=true] + .cds--header__menu .cds--header__menu-item:active {
|
| 25459 | background-color: var(--cds-layer-active);
|
| 25460 | color: var(--cds-text-primary, #161616);
|
| 25461 | }
|
| 25462 |
|
| 25463 | .cds--header__menu-title[aria-expanded=true] + .cds--header__menu .cds--header__menu-item.cds--header__menu-item--current {
|
| 25464 | background-color: var(--cds-layer-selected);
|
| 25465 | }
|
| 25466 | .cds--header__menu-title[aria-expanded=true] + .cds--header__menu .cds--header__menu-item.cds--header__menu-item--current:hover {
|
| 25467 | background-color: var(--cds-layer-selected-hover);
|
| 25468 | }
|
| 25469 |
|
| 25470 | .cds--header__menu .cds--header__menu-item {
|
| 25471 | block-size: 3rem;
|
| 25472 | }
|
| 25473 |
|
| 25474 | .cds--header__menu-arrow {
|
| 25475 | fill: var(--cds-icon-secondary, #525252);
|
| 25476 | margin-inline-start: 0.5rem;
|
| 25477 | transition: transform 110ms, fill 110ms;
|
| 25478 | }
|
| 25479 |
|
| 25480 | .cds--header__global {
|
| 25481 | display: flex;
|
| 25482 | flex: 1 1;
|
| 25483 | justify-content: flex-end;
|
| 25484 | block-size: 100%;
|
| 25485 | }
|
| 25486 |
|
| 25487 | .cds--skip-to-content {
|
| 25488 | position: absolute;
|
| 25489 | overflow: hidden;
|
| 25490 | padding: 0;
|
| 25491 | border: 0;
|
| 25492 | margin: -1px;
|
| 25493 | block-size: 1px;
|
| 25494 | clip: rect(0, 0, 0, 0);
|
| 25495 | inline-size: 1px;
|
| 25496 | visibility: inherit;
|
| 25497 | white-space: nowrap;
|
| 25498 | }
|
| 25499 |
|
| 25500 | .cds--skip-to-content:focus {
|
| 25501 | z-index: 9999;
|
| 25502 | display: flex;
|
| 25503 | align-items: center;
|
| 25504 | padding: 0 1rem;
|
| 25505 | border: 4px solid var(--cds-focus, #0f62fe);
|
| 25506 | background-color: var(--cds-background, #ffffff);
|
| 25507 | block-size: 3rem;
|
| 25508 | clip: auto;
|
| 25509 | color: var(--cds-text-secondary, #525252);
|
| 25510 | inline-size: auto;
|
| 25511 | inset-block-start: 0;
|
| 25512 | inset-inline-start: 0;
|
| 25513 | outline: none;
|
| 25514 | }
|
| 25515 |
|
| 25516 | .cds--header-panel {
|
| 25517 | position: fixed;
|
| 25518 | z-index: 8000;
|
| 25519 | overflow: hidden;
|
| 25520 | border: none;
|
| 25521 | background-color: var(--cds-layer);
|
| 25522 | color: var(--cds-text-secondary, #525252);
|
| 25523 | inline-size: 0;
|
| 25524 | inset-block-end: 0;
|
| 25525 | inset-block-start: 3rem;
|
| 25526 | inset-inline-end: 0;
|
| 25527 | transition: width 110ms cubic-bezier(0.2, 0, 1, 0.9);
|
| 25528 | will-change: width;
|
| 25529 | }
|
| 25530 |
|
| 25531 | .cds--header-panel--expanded {
|
| 25532 | border-inline-end: 1px solid var(--cds-border-subtle);
|
| 25533 | border-inline-start: 1px solid var(--cds-border-subtle);
|
| 25534 | inline-size: 16rem;
|
| 25535 | }
|
| 25536 |
|
| 25537 | .cds--side-nav {
|
| 25538 | position: fixed;
|
| 25539 | z-index: 8000;
|
| 25540 | overflow: hidden;
|
| 25541 | background-color: var(--cds-background, #ffffff);
|
| 25542 | color: var(--cds-text-secondary, #525252);
|
| 25543 | inline-size: 3rem;
|
| 25544 | inset-block-end: 0;
|
| 25545 | inset-block-start: 0;
|
| 25546 | inset-inline-start: 0;
|
| 25547 | max-inline-size: 16rem;
|
| 25548 | transition: inline-size 0.11s cubic-bezier(0.2, 0, 1, 0.9), transform 0.11s cubic-bezier(0.2, 0, 1, 0.9);
|
| 25549 | will-change: inline-size;
|
| 25550 | }
|
| 25551 |
|
| 25552 | .cds--side-nav--ux {
|
| 25553 | inline-size: 16rem;
|
| 25554 | inset-block-start: 3rem;
|
| 25555 | }
|
| 25556 | @media (max-width: 65.98rem) {
|
| 25557 | .cds--side-nav--ux {
|
| 25558 | inline-size: 0;
|
| 25559 | }
|
| 25560 | }
|
| 25561 |
|
| 25562 | .cds--side-nav--rail {
|
| 25563 | inline-size: 3rem;
|
| 25564 | }
|
| 25565 |
|
| 25566 | .cds--side-nav--hidden {
|
| 25567 | inline-size: 0;
|
| 25568 | }
|
| 25569 |
|
| 25570 | .cds--side-nav--expanded {
|
| 25571 | inline-size: 16rem;
|
| 25572 | }
|
| 25573 |
|
| 25574 | .cds--side-nav__overlay {
|
| 25575 | position: fixed;
|
| 25576 | background-color: transparent;
|
| 25577 | block-size: 0;
|
| 25578 | inline-size: 0;
|
| 25579 | inset-block-start: 3rem;
|
| 25580 | inset-inline-start: 0;
|
| 25581 | opacity: 0;
|
| 25582 | transition: opacity 300ms cubic-bezier(0.5, 0, 0.1, 1), background-color 300ms cubic-bezier(0.5, 0, 0.1, 1);
|
| 25583 | }
|
| 25584 |
|
| 25585 | @media (max-width: 65.98rem) {
|
| 25586 | .cds--side-nav__overlay-active {
|
| 25587 | z-index: 6000;
|
| 25588 | background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
|
| 25589 | block-size: 100vh;
|
| 25590 | inline-size: 100vw;
|
| 25591 | opacity: 1;
|
| 25592 | transition: opacity 300ms cubic-bezier(0.5, 0, 0.1, 1), background-color 300ms cubic-bezier(0.5, 0, 0.1, 1);
|
| 25593 | }
|
| 25594 | }
|
| 25595 |
|
| 25596 | .cds--header ~ .cds--side-nav {
|
| 25597 | block-size: calc(100% - 48px);
|
| 25598 | inset-block-start: 3rem;
|
| 25599 | }
|
| 25600 |
|
| 25601 | .cds--side-nav--fixed {
|
| 25602 | inline-size: 16rem;
|
| 25603 | }
|
| 25604 |
|
| 25605 | .cds--side-nav--collapsed {
|
| 25606 | inline-size: 16rem;
|
| 25607 | transform: translateX(-16rem);
|
| 25608 | }
|
| 25609 |
|
| 25610 | .cds--side-nav__navigation {
|
| 25611 | display: flex;
|
| 25612 | flex-direction: column;
|
| 25613 | }
|
| 25614 |
|
| 25615 | .cds--side-nav__items {
|
| 25616 | box-sizing: border-box;
|
| 25617 | padding: 0;
|
| 25618 | border: 0;
|
| 25619 | margin: 0;
|
| 25620 | font-family: inherit;
|
| 25621 | font-size: 100%;
|
| 25622 | vertical-align: baseline;
|
| 25623 | overflow: hidden;
|
| 25624 | flex: 1 1;
|
| 25625 | padding: 1rem 0 0;
|
| 25626 | }
|
| 25627 | .cds--side-nav__items *,
|
| 25628 | .cds--side-nav__items *::before,
|
| 25629 | .cds--side-nav__items *::after {
|
| 25630 | box-sizing: inherit;
|
| 25631 | }
|
| 25632 | .cds--side-nav:hover .cds--side-nav__items, .cds--side-nav--fixed .cds--side-nav__items, .cds--side-nav--expanded .cds--side-nav__items {
|
| 25633 | overflow-y: auto;
|
| 25634 | }
|
| 25635 |
|
| 25636 | .cds--side-nav--ux .cds--side-nav__items {
|
| 25637 | overflow-y: auto;
|
| 25638 | }
|
| 25639 |
|
| 25640 | .cds--side-nav__item {
|
| 25641 | overflow: hidden;
|
| 25642 | block-size: auto;
|
| 25643 | inline-size: auto;
|
| 25644 | }
|
| 25645 |
|
| 25646 | .cds--side-nav--ux .cds--side-nav__item {
|
| 25647 | block-size: auto;
|
| 25648 | inline-size: auto;
|
| 25649 | }
|
| 25650 |
|
| 25651 | .cds--side-nav__item:not(.cds--side-nav__item--active):hover .cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__submenu:hover,
|
| 25652 | .cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__link:hover,
|
| 25653 | .cds--side-nav__menu a.cds--side-nav__link:not(.cds--side-nav__link--current):not([aria-current=page]):hover,
|
| 25654 | .cds--side-nav a.cds--header__menu-item:hover,
|
| 25655 | .cds--side-nav .cds--header__menu-title[aria-expanded=true]:hover {
|
| 25656 | background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
|
| 25657 | color: var(--cds-text-primary, #161616);
|
| 25658 | }
|
| 25659 |
|
| 25660 | .cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__link:hover > span,
|
| 25661 | .cds--side-nav__item:not(.cds--side-nav__item--active) .cds--side-nav__menu-item > .cds--side-nav__link:hover > span {
|
| 25662 | color: var(--cds-text-primary, #161616);
|
| 25663 | }
|
| 25664 |
|
| 25665 | .cds--side-nav__item--large {
|
| 25666 | block-size: auto;
|
| 25667 | }
|
| 25668 |
|
| 25669 | .cds--side-nav__divider {
|
| 25670 | margin: 0.5rem 1rem;
|
| 25671 | background-color: var(--cds-border-subtle);
|
| 25672 | block-size: 1px;
|
| 25673 | list-style-type: none;
|
| 25674 | }
|
| 25675 |
|
| 25676 | .cds--side-nav__divider hr {
|
| 25677 | border: none;
|
| 25678 | }
|
| 25679 |
|
| 25680 | .cds--side-nav__submenu {
|
| 25681 | box-sizing: border-box;
|
| 25682 | padding: 0;
|
| 25683 | border: 0;
|
| 25684 | margin: 0;
|
| 25685 | font-family: inherit;
|
| 25686 | font-size: 100%;
|
| 25687 | vertical-align: baseline;
|
| 25688 | display: inline-block;
|
| 25689 | padding: 0;
|
| 25690 | border: 0;
|
| 25691 | -webkit-appearance: none;
|
| 25692 | -moz-appearance: none;
|
| 25693 | appearance: none;
|
| 25694 | background: none;
|
| 25695 | cursor: pointer;
|
| 25696 | text-align: start;
|
| 25697 | inline-size: 100%;
|
| 25698 | font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
|
| 25699 | font-weight: var(--cds-heading-compact-01-font-weight, 600);
|
| 25700 | line-height: var(--cds-heading-compact-01-line-height, 1.28572);
|
| 25701 | letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
|
| 25702 | outline: 2px solid transparent;
|
| 25703 | outline-offset: -2px;
|
| 25704 | display: flex;
|
| 25705 | align-items: center;
|
| 25706 | padding: 0 1rem;
|
| 25707 | block-size: 2rem;
|
| 25708 | color: var(--cds-text-secondary, #525252);
|
| 25709 | transition: color 110ms, background-color 110ms, outline 110ms;
|
| 25710 | -webkit-user-select: none;
|
| 25711 | -moz-user-select: none;
|
| 25712 | user-select: none;
|
| 25713 | }
|
| 25714 | .cds--side-nav__submenu *,
|
| 25715 | .cds--side-nav__submenu *::before,
|
| 25716 | .cds--side-nav__submenu *::after {
|
| 25717 | box-sizing: inherit;
|
| 25718 | }
|
| 25719 | .cds--side-nav__submenu::-moz-focus-inner {
|
| 25720 | border: 0;
|
| 25721 | }
|
| 25722 |
|
| 25723 | .cds--side-nav__submenu:hover {
|
| 25724 | background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
|
| 25725 | color: var(--cds-text-primary, #161616);
|
| 25726 | }
|
| 25727 |
|
| 25728 | .cds--side-nav__submenu:focus {
|
| 25729 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 25730 | outline-offset: -2px;
|
| 25731 | }
|
| 25732 | @media screen and (prefers-contrast) {
|
| 25733 | .cds--side-nav__submenu:focus {
|
| 25734 | outline-style: dotted;
|
| 25735 | }
|
| 25736 | }
|
| 25737 |
|
| 25738 | .cds--side-nav__submenu-title {
|
| 25739 | overflow: hidden;
|
| 25740 | text-overflow: ellipsis;
|
| 25741 | white-space: nowrap;
|
| 25742 | text-align: start;
|
| 25743 | }
|
| 25744 |
|
| 25745 | .cds--side-nav__icon.cds--side-nav__submenu-chevron {
|
| 25746 | display: flex;
|
| 25747 | flex: 1 1;
|
| 25748 | justify-content: flex-end;
|
| 25749 | }
|
| 25750 |
|
| 25751 | .cds--side-nav__submenu-chevron > svg {
|
| 25752 | block-size: 1rem;
|
| 25753 | inline-size: 1rem;
|
| 25754 | transition: transform 110ms;
|
| 25755 | }
|
| 25756 |
|
| 25757 | .cds--side-nav__submenu[aria-expanded=true] .cds--side-nav__submenu-chevron > svg {
|
| 25758 | transform: rotate(180deg);
|
| 25759 | }
|
| 25760 |
|
| 25761 | .cds--side-nav__item--large .cds--side-nav__submenu {
|
| 25762 | block-size: 3rem;
|
| 25763 | }
|
| 25764 |
|
| 25765 | .cds--side-nav__item--active .cds--side-nav__submenu:hover {
|
| 25766 | background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
|
| 25767 | color: var(--cds-text-primary, #161616);
|
| 25768 | }
|
| 25769 |
|
| 25770 | .cds--side-nav__item--active .cds--side-nav__submenu[aria-expanded=false] {
|
| 25771 | position: relative;
|
| 25772 | background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
|
| 25773 | color: var(--cds-text-primary, #161616);
|
| 25774 | }
|
| 25775 | .cds--side-nav__item--active .cds--side-nav__submenu[aria-expanded=false]::before {
|
| 25776 | position: absolute;
|
| 25777 | background-color: var(--cds-border-interactive, #0f62fe);
|
| 25778 | content: "";
|
| 25779 | inline-size: 3px;
|
| 25780 | inset-block-end: 0;
|
| 25781 | inset-block-start: 0;
|
| 25782 | inset-inline-start: 0;
|
| 25783 | }
|
| 25784 |
|
| 25785 | .cds--side-nav__item--active .cds--side-nav__submenu-title {
|
| 25786 | color: var(--cds-text-primary, #161616);
|
| 25787 | font-weight: 600;
|
| 25788 | }
|
| 25789 |
|
| 25790 | .cds--side-nav__item--active .cds--side-nav__icon > svg {
|
| 25791 | fill: var(--cds-icon-primary, #161616);
|
| 25792 | }
|
| 25793 |
|
| 25794 | .cds--side-nav__menu {
|
| 25795 | box-sizing: border-box;
|
| 25796 | padding: 0;
|
| 25797 | border: 0;
|
| 25798 | margin: 0;
|
| 25799 | font-family: inherit;
|
| 25800 | font-size: 100%;
|
| 25801 | vertical-align: baseline;
|
| 25802 | display: block;
|
| 25803 | max-block-size: 0;
|
| 25804 | visibility: hidden;
|
| 25805 | }
|
| 25806 | .cds--side-nav__menu *,
|
| 25807 | .cds--side-nav__menu *::before,
|
| 25808 | .cds--side-nav__menu *::after {
|
| 25809 | box-sizing: inherit;
|
| 25810 | }
|
| 25811 |
|
| 25812 | .cds--side-nav__submenu[aria-expanded=true] + .cds--side-nav__menu {
|
| 25813 | max-block-size: 93.75rem;
|
| 25814 | visibility: inherit;
|
| 25815 | }
|
| 25816 |
|
| 25817 | .cds--side-nav__menu a.cds--side-nav__link {
|
| 25818 | block-size: 2rem;
|
| 25819 | font-weight: 400;
|
| 25820 | min-block-size: 2rem;
|
| 25821 | padding-inline-start: 2rem;
|
| 25822 | }
|
| 25823 |
|
| 25824 | .cds--side-nav__item.cds--side-nav__item--icon a.cds--side-nav__link {
|
| 25825 | padding-inline-start: 4.5rem;
|
| 25826 | }
|
| 25827 |
|
| 25828 | .cds--side-nav__menu a.cds--side-nav__link--current,
|
| 25829 | .cds--side-nav__menu a.cds--side-nav__link[aria-current=page],
|
| 25830 | a.cds--side-nav__link--current {
|
| 25831 | background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
|
| 25832 | }
|
| 25833 | .cds--side-nav__menu a.cds--side-nav__link--current > span,
|
| 25834 | .cds--side-nav__menu a.cds--side-nav__link[aria-current=page] > span,
|
| 25835 | a.cds--side-nav__link--current > span {
|
| 25836 | color: var(--cds-text-primary, #161616);
|
| 25837 | font-weight: 600;
|
| 25838 | }
|
| 25839 |
|
| 25840 | a.cds--side-nav__link,
|
| 25841 | .cds--side-nav a.cds--header__menu-item,
|
| 25842 | .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu {
|
| 25843 | outline: 2px solid transparent;
|
| 25844 | outline-offset: -2px;
|
| 25845 | font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
|
| 25846 | font-weight: var(--cds-heading-compact-01-font-weight, 600);
|
| 25847 | line-height: var(--cds-heading-compact-01-line-height, 1.28572);
|
| 25848 | letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
|
| 25849 | position: relative;
|
| 25850 | display: flex;
|
| 25851 | align-items: center;
|
| 25852 | padding: 0 1rem;
|
| 25853 | min-block-size: 2rem;
|
| 25854 | text-decoration: none;
|
| 25855 | transition: color 110ms, background-color 110ms, outline 110ms;
|
| 25856 | }
|
| 25857 |
|
| 25858 | .cds--side-nav__item--large a.cds--side-nav__link {
|
| 25859 | block-size: 3rem;
|
| 25860 | }
|
| 25861 |
|
| 25862 | a.cds--side-nav__link > .cds--side-nav__link-text,
|
| 25863 | .cds--side-nav a.cds--header__menu-item .cds--text-truncate-end {
|
| 25864 | overflow: hidden;
|
| 25865 | text-overflow: ellipsis;
|
| 25866 | white-space: nowrap;
|
| 25867 | color: var(--cds-text-secondary, #525252);
|
| 25868 | font-size: 0.875rem;
|
| 25869 | letter-spacing: 0.1px;
|
| 25870 | line-height: 1.25rem;
|
| 25871 | -webkit-user-select: none;
|
| 25872 | -moz-user-select: none;
|
| 25873 | user-select: none;
|
| 25874 | }
|
| 25875 |
|
| 25876 | a.cds--side-nav__link:focus,
|
| 25877 | .cds--side-nav a.cds--header__menu-item:focus {
|
| 25878 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 25879 | outline-offset: -2px;
|
| 25880 | }
|
| 25881 | @media screen and (prefers-contrast) {
|
| 25882 | a.cds--side-nav__link:focus,
|
| 25883 | .cds--side-nav a.cds--header__menu-item:focus {
|
| 25884 | outline-style: dotted;
|
| 25885 | }
|
| 25886 | }
|
| 25887 |
|
| 25888 | a.cds--side-nav__link[aria-current=page],
|
| 25889 | a.cds--side-nav__link--current {
|
| 25890 | background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
|
| 25891 | font-weight: 600;
|
| 25892 | }
|
| 25893 |
|
| 25894 | a.cds--side-nav__link[aria-current=page] .cds--side-nav__link-text,
|
| 25895 | a.cds--side-nav__link--current .cds--side-nav__link-text {
|
| 25896 | color: var(--cds-text-primary, #161616);
|
| 25897 | }
|
| 25898 |
|
| 25899 | a.cds--side-nav__link[aria-current=page]::before,
|
| 25900 | a.cds--side-nav__link--current::before {
|
| 25901 | position: absolute;
|
| 25902 | background-color: var(--cds-border-interactive, #0f62fe);
|
| 25903 | content: "";
|
| 25904 | inline-size: 3px;
|
| 25905 | inset-block-end: 0;
|
| 25906 | inset-block-start: 0;
|
| 25907 | inset-inline-start: 0;
|
| 25908 | }
|
| 25909 |
|
| 25910 | .cds--side-nav__icon {
|
| 25911 | display: flex;
|
| 25912 | flex: 0 0 1rem;
|
| 25913 | align-items: center;
|
| 25914 | justify-content: center;
|
| 25915 | }
|
| 25916 |
|
| 25917 | .cds--side-nav__icon:not(.cds--side-nav__submenu-chevron) {
|
| 25918 | margin-inline-end: 1.5rem;
|
| 25919 | }
|
| 25920 |
|
| 25921 | .cds--side-nav__icon > svg {
|
| 25922 | block-size: 1rem;
|
| 25923 | fill: var(--cds-icon-secondary, #525252);
|
| 25924 | inline-size: 1rem;
|
| 25925 | }
|
| 25926 |
|
| 25927 | .cds--side-nav__icon > svg.cds--side-nav-collapse-icon {
|
| 25928 | display: none;
|
| 25929 | }
|
| 25930 |
|
| 25931 | .cds--side-nav--expanded .cds--side-nav__icon > svg.cds--side-nav-expand-icon {
|
| 25932 | display: none;
|
| 25933 | }
|
| 25934 |
|
| 25935 | .cds--side-nav--expanded .cds--side-nav__icon > svg.cds--side-nav-collapse-icon {
|
| 25936 | display: block;
|
| 25937 | }
|
| 25938 |
|
| 25939 | .cds--side-nav--fixed a.cds--side-nav__link,
|
| 25940 | .cds--side-nav--fixed .cds--side-nav__submenu {
|
| 25941 | padding-inline-start: 1rem;
|
| 25942 | }
|
| 25943 |
|
| 25944 | .cds--side-nav--fixed .cds--side-nav__item:not(.cds--side-nav__item--icon) .cds--side-nav__menu a.cds--side-nav__link {
|
| 25945 | padding-inline-start: 2rem;
|
| 25946 | }
|
| 25947 |
|
| 25948 | @media (max-width: 65.98rem) {
|
| 25949 | .cds--side-nav .cds--header__nav {
|
| 25950 | display: block;
|
| 25951 | }
|
| 25952 | }
|
| 25953 |
|
| 25954 | .cds--side-nav__header-navigation {
|
| 25955 | box-sizing: border-box;
|
| 25956 | padding: 0;
|
| 25957 | border: 0;
|
| 25958 | margin: 0;
|
| 25959 | font-family: inherit;
|
| 25960 | font-size: 100%;
|
| 25961 | vertical-align: baseline;
|
| 25962 | display: none;
|
| 25963 | }
|
| 25964 | .cds--side-nav__header-navigation *,
|
| 25965 | .cds--side-nav__header-navigation *::before,
|
| 25966 | .cds--side-nav__header-navigation *::after {
|
| 25967 | box-sizing: inherit;
|
| 25968 | }
|
| 25969 | @media (max-width: 65.98rem) {
|
| 25970 | .cds--side-nav__header-navigation {
|
| 25971 | position: relative;
|
| 25972 | display: block;
|
| 25973 | margin-block-end: 2rem;
|
| 25974 | }
|
| 25975 | }
|
| 25976 |
|
| 25977 | .cds--side-nav__header-divider::after {
|
| 25978 | position: absolute;
|
| 25979 | background: var(--cds-border-subtle);
|
| 25980 | block-size: 0.0625rem;
|
| 25981 | content: "";
|
| 25982 | inline-size: calc(100% - 32px);
|
| 25983 | inset-block-end: -1rem;
|
| 25984 | inset-inline-start: 1rem;
|
| 25985 | }
|
| 25986 |
|
| 25987 | .cds--side-nav a.cds--header__menu-item {
|
| 25988 | justify-content: space-between;
|
| 25989 | color: var(--cds-text-secondary, #525252);
|
| 25990 | white-space: nowrap;
|
| 25991 | }
|
| 25992 | .cds--side-nav a.cds--header__menu-item[aria-expanded=true] {
|
| 25993 | background-color: transparent;
|
| 25994 | }
|
| 25995 |
|
| 25996 | .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu {
|
| 25997 | padding: 0;
|
| 25998 | background-color: transparent;
|
| 25999 | box-shadow: none;
|
| 26000 | inline-size: 100%;
|
| 26001 | inset-block-end: inherit;
|
| 26002 | transform: none;
|
| 26003 | }
|
| 26004 | .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu li {
|
| 26005 | inline-size: 100%;
|
| 26006 | }
|
| 26007 | .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item {
|
| 26008 | font-weight: 400;
|
| 26009 | padding-inline-start: 4.25rem;
|
| 26010 | }
|
| 26011 | .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item:hover {
|
| 26012 | background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
|
| 26013 | color: var(--cds-text-primary, #161616);
|
| 26014 | }
|
| 26015 | .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item--current:hover {
|
| 26016 | background-color: var(--cds-layer-selected-hover);
|
| 26017 | }
|
| 26018 |
|
| 26019 | .cds--side-nav .cds--side-nav__header-navigation a.cds--header__menu-item[aria-current=page]::after,
|
| 26020 | .cds--side-nav .cds--side-nav__header-navigation .cds--header__menu-item--current::after {
|
| 26021 | block-size: calc(100% + 4px);
|
| 26022 | inline-size: 3px;
|
| 26023 | }
|
| 26024 |
|
| 26025 | .cds--side-nav .cds--header__menu a.cds--header__menu-item {
|
| 26026 | block-size: inherit;
|
| 26027 | }
|
| 26028 |
|
| 26029 | .cds--side-nav a.cds--header__menu-item:hover .cds--header__menu-arrow,
|
| 26030 | .cds--side-nav a.cds--header__menu-item:focus .cds--header__menu-arrow,
|
| 26031 | .cds--side-nav .cds--header__menu-arrow {
|
| 26032 | fill: var(--cds-icon-secondary, #525252);
|
| 26033 | }
|
| 26034 |
|
| 26035 | @media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
| 26036 | .cds--side-nav__icon > svg,
|
| 26037 | .cds--side-nav a.cds--header__menu-item:hover .cds--header__menu-arrow,
|
| 26038 | .cds--side-nav a.cds--header__menu-item:focus .cds--header__menu-arrow,
|
| 26039 | .cds--side-nav .cds--header__menu-arrow {
|
| 26040 | fill: ButtonText;
|
| 26041 | }
|
| 26042 | }
|
| 26043 |
|
| 26044 | .cds--switcher {
|
| 26045 | box-sizing: border-box;
|
| 26046 | padding: 0;
|
| 26047 | border: 0;
|
| 26048 | margin: 0;
|
| 26049 | font-family: inherit;
|
| 26050 | font-size: 100%;
|
| 26051 | vertical-align: baseline;
|
| 26052 | display: flex;
|
| 26053 | flex-direction: column;
|
| 26054 | align-items: center;
|
| 26055 | justify-content: center;
|
| 26056 | color: var(--cds-text-secondary, #525252);
|
| 26057 | }
|
| 26058 | .cds--switcher *,
|
| 26059 | .cds--switcher *::before,
|
| 26060 | .cds--switcher *::after {
|
| 26061 | box-sizing: inherit;
|
| 26062 | }
|
| 26063 |
|
| 26064 | .cds--switcher__item {
|
| 26065 | block-size: 2rem;
|
| 26066 | inline-size: 100%;
|
| 26067 | }
|
| 26068 |
|
| 26069 | .cds--switcher__item:nth-child(1) {
|
| 26070 | margin-block-start: 1rem;
|
| 26071 | }
|
| 26072 |
|
| 26073 | .cds--switcher__item--divider {
|
| 26074 | display: block;
|
| 26075 | border: none;
|
| 26076 | margin: 0.5rem 1rem;
|
| 26077 | background: var(--cds-border-subtle);
|
| 26078 | block-size: 1px;
|
| 26079 | inline-size: 14rem;
|
| 26080 | }
|
| 26081 |
|
| 26082 | .cds--switcher__item-link {
|
| 26083 | font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
|
| 26084 | font-weight: var(--cds-heading-compact-01-font-weight, 600);
|
| 26085 | line-height: var(--cds-heading-compact-01-line-height, 1.28572);
|
| 26086 | letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
|
| 26087 | display: block;
|
| 26088 | padding: 0.375rem 1rem;
|
| 26089 | block-size: 2rem;
|
| 26090 | color: var(--cds-text-secondary, #525252);
|
| 26091 | text-decoration: none;
|
| 26092 | }
|
| 26093 | .cds--switcher__item-link:hover:not(.cds--switcher__item-link--selected) {
|
| 26094 | background: var(--cds-layer-hover);
|
| 26095 | color: var(--cds-text-primary, #161616);
|
| 26096 | cursor: pointer;
|
| 26097 | }
|
| 26098 | .cds--switcher__item-link:focus {
|
| 26099 | outline: 2px solid var(--cds-focus, #0f62fe);
|
| 26100 | outline-offset: -2px;
|
| 26101 | }
|
| 26102 | .cds--switcher__item-link:active {
|
| 26103 | background: var(--cds-layer-active);
|
| 26104 | color: var(--cds-text-primary, #161616);
|
| 26105 | }
|
| 26106 |
|
| 26107 | .cds--switcher__item-link--selected {
|
| 26108 | background: var(--cds-layer-selected);
|
| 26109 | color: var(--cds-text-primary, #161616);
|
| 26110 | } |
| \ | No newline at end of file |