/** @bloomberg/crescent-tokens - 3.17.3 */ @layer crescent { @layer tokens { @layer core { :root, :host { --cds-color-core-none: transparent; --cds-color-core-white: #FFFFFF; --cds-color-core-black: #000000; --cds-color-core-grey-10: #646464; --cds-color-core-grey-11: #505050; --cds-color-core-grey-12: #414141; --cds-color-core-grey-13: #373737; --cds-color-core-grey-14: #282828; --cds-color-core-grey-15: #232323; --cds-color-core-grey-16: #1E1E1E; --cds-color-core-grey-17: #191919; --cds-color-core-grey-18: #141414; --cds-color-core-grey-01: #F0F0F0; --cds-color-core-grey-02: #EBEBEB; --cds-color-core-grey-03: #E1E1E1; --cds-color-core-grey-04: #D7D7D7; --cds-color-core-grey-05: #CDCDCD; --cds-color-core-grey-06: #BEBEBE; --cds-color-core-grey-07: #A5A5A5; --cds-color-core-grey-08: #8C8C8C; --cds-color-core-grey-09: #787878; --cds-color-core-red-10: #390014; --cds-color-core-red-01: #FFCCD2; --cds-color-core-red-02: #FF7486; --cds-color-core-red-03: #FF415C; --cds-color-core-red-04: #FF2C4A; --cds-color-core-red-05: #E61E3C; --cds-color-core-red-06: #C31834; --cds-color-core-red-07: #A1122C; --cds-color-core-red-08: #7E0C24; --cds-color-core-red-09: #5C061C; --cds-color-core-orange-10: #471A0B; --cds-color-core-orange-01: #FDC8B7; --cds-color-core-orange-02: #FDAC93; --cds-color-core-orange-03: #FC9170; --cds-color-core-orange-04: #FB754C; --cds-color-core-orange-05: #FA5A28; --cds-color-core-orange-06: #D64D22; --cds-color-core-orange-07: #B3401D; --cds-color-core-orange-08: #8F3317; --cds-color-core-orange-09: #6B2711; --cds-color-core-amber-10: #492600; --cds-color-core-amber-01: #FFDFB7; --cds-color-core-amber-02: #FFD093; --cds-color-core-amber-03: #FFC070; --cds-color-core-amber-04: #FFB04C; --cds-color-core-amber-05: #FFA028; --cds-color-core-amber-06: #DB7500; --cds-color-core-amber-07: #B76100; --cds-color-core-amber-08: #924E00; --cds-color-core-amber-09: #6E3A00; --cds-color-core-yellow-10: #393200; --cds-color-core-yellow-01: #FFF9CC; --cds-color-core-yellow-02: #FFF399; --cds-color-core-yellow-03: #FFED66; --cds-color-core-yellow-04: #FFE733; --cds-color-core-yellow-05: #FFE100; --cds-color-core-yellow-06: #D7BE00; --cds-color-core-yellow-07: #B09B00; --cds-color-core-yellow-08: #887800; --cds-color-core-yellow-09: #615500; --cds-color-core-green-10: #002C09; --cds-color-core-green-01: #C5FACF; --cds-color-core-green-02: #8AF59E; --cds-color-core-green-03: #50F06E; --cds-color-core-green-04: #35D655; --cds-color-core-green-05: #1BBC3C; --cds-color-core-green-06: #00A223; --cds-color-core-green-07: #00851C; --cds-color-core-green-08: #006716; --cds-color-core-green-09: #004A0F; --cds-color-core-teal-10: #003339; --cds-color-core-teal-01: #DFFCFF; --cds-color-core-teal-02: #BFF9FF; --cds-color-core-teal-03: #80F3FF; --cds-color-core-teal-04: #40ECFF; --cds-color-core-teal-05: #00E6FF; --cds-color-core-teal-06: #00C2D7; --cds-color-core-teal-07: #009EB0; --cds-color-core-teal-08: #007B88; --cds-color-core-teal-09: #005761; --cds-color-core-blue-10: #001F53; --cds-color-core-blue-01: #CCE3FF; --cds-color-core-blue-02: #99C7FF; --cds-color-core-blue-03: #66ABFF; --cds-color-core-blue-04: #2B8EFF; --cds-color-core-blue-05: #0073FF; --cds-color-core-blue-06: #0062DD; --cds-color-core-blue-07: #0051BA; --cds-color-core-blue-08: #004098; --cds-color-core-blue-09: #003075; --cds-color-core-purple-10: #392149; --cds-color-core-purple-01: #EDD0FF; --cds-color-core-purple-02: #E4B9FF; --cds-color-core-purple-03: #DAA2FF; --cds-color-core-purple-04: #D18AFF; --cds-color-core-purple-05: #C873FF; --cds-color-core-purple-06: #AB63DB; --cds-color-core-purple-07: #8F52B6; --cds-color-core-purple-08: #724292; --cds-color-core-purple-09: #56316D; --cds-color-core-magenta-10: #450B35; --cds-color-core-magenta-01: #FBB7E8; --cds-color-core-magenta-02: #F993DD; --cds-color-core-magenta-03: #F770D2; --cds-color-core-magenta-04: #F54CC6; --cds-color-core-magenta-05: #F328BB; --cds-color-core-magenta-06: #D022A0; --cds-color-core-magenta-07: #AE1D86; --cds-color-core-magenta-08: #8B176B; --cds-color-core-magenta-09: #681150; --cds-font-core-family-avenir: AvenirNextP2ForBBG, Arial, Helvetica, sans-serif; --cds-font-core-family-bloombergQ: BloombergQ, Arial, Helvetica, sans-serif; --cds-font-core-family-bloombergsans: BloombergSansSpaced, Arial, Helvetica, sans-serif; --cds-font-core-family-roboto: RobotoMono, monospace; --cds-font-core-decoration-none: none; --cds-font-core-decoration-underline: underline; --cds-font-core-transform-uppercase: uppercase; --cds-font-core-weight-thin: 100; --cds-font-core-weight-light: 300; --cds-font-core-weight-regular: 400; --cds-font-core-weight-medium: 500; --cds-font-core-weight-semibold: 600; --cds-font-core-weight-bold: 700; --cds-font-core-weight-heavy: 900; --cds-font-core-letterspacing-tightest: -0.05em; --cds-font-core-letterspacing-tighter: -0.025em; --cds-font-core-letterspacing-tight: -0.0125em; --cds-font-core-letterspacing-normal: normal; --cds-font-core-letterspacing-wide: 0.0125em; --cds-font-core-scale-10-fontsize: 2.75rem; --cds-font-core-scale-10-lineheight: 1.273; --cds-font-core-scale-11-fontsize: 3.25rem; --cds-font-core-scale-11-lineheight: 1.154; --cds-font-core-scale-12-fontsize: 4.25rem; --cds-font-core-scale-12-lineheight: 1.088; --cds-font-core-scale-13-fontsize: 5.25rem; --cds-font-core-scale-13-lineheight: 1.143; --cds-font-core-scale-14-fontsize: 6.25rem; --cds-font-core-scale-14-lineheight: 1.12; --cds-font-core-scale-01-fontsize: 0.5rem; --cds-font-core-scale-01-lineheight: 1.375; --cds-font-core-scale-02-fontsize: 0.625rem; --cds-font-core-scale-02-lineheight: 1.2; --cds-font-core-scale-03-fontsize: 0.75rem; --cds-font-core-scale-03-lineheight: 1.3; --cds-font-core-scale-04-fontsize: 0.875rem; --cds-font-core-scale-04-lineheight: 1.429; --cds-font-core-scale-05-fontsize: 1rem; --cds-font-core-scale-05-lineheight: 1.5; --cds-font-core-scale-06-fontsize: 1.25rem; --cds-font-core-scale-06-lineheight: 1.3; --cds-font-core-scale-07-fontsize: 1.5rem; --cds-font-core-scale-07-lineheight: 1.25; --cds-font-core-scale-08-fontsize: 1.75rem; --cds-font-core-scale-08-lineheight: 1.214; --cds-font-core-scale-09-fontsize: 2.25rem; --cds-font-core-scale-09-lineheight: 1.167; --cds-font-core-b-scale-10-fontsize: 2.563rem; --cds-font-core-b-scale-10-lineheight: 1.366; --cds-font-core-b-scale-11-fontsize: 3.063rem; --cds-font-core-b-scale-11-lineheight: 1.224; --cds-font-core-b-scale-12-fontsize: 3.938rem; --cds-font-core-b-scale-12-lineheight: 1.175; --cds-font-core-b-scale-13-fontsize: 4.938rem; --cds-font-core-b-scale-13-lineheight: 1.215; --cds-font-core-b-scale-14-fontsize: 5.938rem; --cds-font-core-b-scale-14-lineheight: 1.179; --cds-font-core-b-scale-01-fontsize: 0.563rem; --cds-font-core-b-scale-01-lineheight: 1.2; --cds-font-core-b-scale-02-fontsize: 0.625rem; --cds-font-core-b-scale-02-lineheight: 1.2; --cds-font-core-b-scale-03-fontsize: 0.75rem; --cds-font-core-b-scale-03-lineheight: 1.333; --cds-font-core-b-scale-04-fontsize: 0.813rem; --cds-font-core-b-scale-04-lineheight: 1.538; --cds-font-core-b-scale-05-fontsize: 0.875rem; --cds-font-core-b-scale-05-lineheight: 1.714; --cds-font-core-b-scale-06-fontsize: 1.063rem; --cds-font-core-b-scale-06-lineheight: 1.529; --cds-font-core-b-scale-07-fontsize: 1.313rem; --cds-font-core-b-scale-07-lineheight: 1.429; --cds-font-core-b-scale-08-fontsize: 1.563rem; --cds-font-core-b-scale-08-lineheight: 1.36; --cds-font-core-b-scale-09-fontsize: 2.063rem; --cds-font-core-b-scale-09-lineheight: 1.273; --cds-size-core-100-px: 40px; --cds-size-core-100-rem: 2.5rem; --cds-size-core-120-px: 48px; --cds-size-core-120-rem: 3rem; --cds-size-core-140-px: 56px; --cds-size-core-140-rem: 3.5rem; --cds-size-core-160-px: 64px; --cds-size-core-160-rem: 4rem; --cds-size-core-200-px: 80px; --cds-size-core-200-rem: 5rem; --cds-size-core-230-px: 92px; --cds-size-core-230-rem: 5.75rem; --cds-size-core-000-px: 0px; --cds-size-core-000-rem: 0rem; --cds-size-core-005-px: 2px; --cds-size-core-005-rem: 0.125rem; --cds-size-core-010-px: 4px; --cds-size-core-010-rem: 0.25rem; --cds-size-core-020-px: 8px; --cds-size-core-020-rem: 0.5rem; --cds-size-core-030-px: 12px; --cds-size-core-030-rem: 0.75rem; --cds-size-core-040-px: 16px; --cds-size-core-040-rem: 1rem; --cds-size-core-050-px: 20px; --cds-size-core-050-rem: 1.25rem; --cds-size-core-060-px: 24px; --cds-size-core-060-rem: 1.5rem; --cds-size-core-080-px: 32px; --cds-size-core-080-rem: 2rem; --cds-opacity-core-10: 0.95; --cds-opacity-core-01: 0.05; --cds-opacity-core-02: 0.15; --cds-opacity-core-03: 0.25; --cds-opacity-core-04: 0.35; --cds-opacity-core-05: 0.45; --cds-opacity-core-06: 0.55; --cds-opacity-core-07: 0.65; --cds-opacity-core-08: 0.75; --cds-opacity-core-09: 0.85; } /* Bloomberg Sans Enablement - overwrite core tokens with their "b" variants */ .cds-bbsans { --cds-font-core-scale-10-fontsize: var(--cds-font-core-b-scale-10-fontsize); --cds-font-core-scale-10-lineheight: var(--cds-font-core-b-scale-10-lineheight); --cds-font-core-scale-11-fontsize: var(--cds-font-core-b-scale-11-fontsize); --cds-font-core-scale-11-lineheight: var(--cds-font-core-b-scale-11-lineheight); --cds-font-core-scale-12-fontsize: var(--cds-font-core-b-scale-12-fontsize); --cds-font-core-scale-12-lineheight: var(--cds-font-core-b-scale-12-lineheight); --cds-font-core-scale-13-fontsize: var(--cds-font-core-b-scale-13-fontsize); --cds-font-core-scale-13-lineheight: var(--cds-font-core-b-scale-13-lineheight); --cds-font-core-scale-14-fontsize: var(--cds-font-core-b-scale-14-fontsize); --cds-font-core-scale-14-lineheight: var(--cds-font-core-b-scale-14-lineheight); --cds-font-core-scale-01-fontsize: var(--cds-font-core-b-scale-01-fontsize); --cds-font-core-scale-01-lineheight: var(--cds-font-core-b-scale-01-lineheight); --cds-font-core-scale-02-fontsize: var(--cds-font-core-b-scale-02-fontsize); --cds-font-core-scale-02-lineheight: var(--cds-font-core-b-scale-02-lineheight); --cds-font-core-scale-03-fontsize: var(--cds-font-core-b-scale-03-fontsize); --cds-font-core-scale-03-lineheight: var(--cds-font-core-b-scale-03-lineheight); --cds-font-core-scale-04-fontsize: var(--cds-font-core-b-scale-04-fontsize); --cds-font-core-scale-04-lineheight: var(--cds-font-core-b-scale-04-lineheight); --cds-font-core-scale-05-fontsize: var(--cds-font-core-b-scale-05-fontsize); --cds-font-core-scale-05-lineheight: var(--cds-font-core-b-scale-05-lineheight); --cds-font-core-scale-06-fontsize: var(--cds-font-core-b-scale-06-fontsize); --cds-font-core-scale-06-lineheight: var(--cds-font-core-b-scale-06-lineheight); --cds-font-core-scale-07-fontsize: var(--cds-font-core-b-scale-07-fontsize); --cds-font-core-scale-07-lineheight: var(--cds-font-core-b-scale-07-lineheight); --cds-font-core-scale-08-fontsize: var(--cds-font-core-b-scale-08-fontsize); --cds-font-core-scale-08-lineheight: var(--cds-font-core-b-scale-08-lineheight); --cds-font-core-scale-09-fontsize: var(--cds-font-core-b-scale-09-fontsize); --cds-font-core-scale-09-lineheight: var(--cds-font-core-b-scale-09-lineheight); } } @layer semantic { :root, :host, .cds-bbsans { --cds-font-base-size: var(--cds-font-core-scale-04-fontsize); --cds-font-base-height: var(--cds-font-core-scale-04-lineheight); --cds-font-base-family: var(--cds-font-core-family-avenir); --cds-font-body-large-fontsize: var(--cds-font-core-scale-05-fontsize); --cds-font-body-large-lineheight: var(--cds-font-core-scale-05-lineheight); --cds-font-body-large-letterspacing: var(--cds-font-core-letterspacing-normal); --cds-font-body-large-weight: var(--cds-font-core-weight-regular); --cds-font-body-default-fontsize: var(--cds-font-core-scale-04-fontsize); --cds-font-body-default-lineheight: var(--cds-font-core-scale-04-lineheight); --cds-font-body-default-letterspacing: var(--cds-font-core-letterspacing-normal); --cds-font-body-default-weight: var(--cds-font-core-weight-regular); --cds-font-body-default-weight-bold: var(--cds-font-core-weight-medium); --cds-font-body-small-fontsize: var(--cds-font-core-scale-03-fontsize); --cds-font-body-small-lineheight: var(--cds-font-core-scale-03-lineheight); --cds-font-body-small-letterspacing: var(--cds-font-core-letterspacing-normal); --cds-font-body-small-weight: var(--cds-font-core-weight-regular); --cds-font-heading-01-fontsize: var(--cds-font-core-scale-09-fontsize); --cds-font-heading-01-lineheight: var(--cds-font-core-scale-09-lineheight); --cds-font-heading-01-letterspacing: var(--cds-font-core-letterspacing-normal); --cds-font-heading-01-weight: var(--cds-font-core-weight-medium); --cds-font-heading-02-fontsize: var(--cds-font-core-scale-08-fontsize); --cds-font-heading-02-lineheight: var(--cds-font-core-scale-08-lineheight); --cds-font-heading-02-letterspacing: var(--cds-font-core-letterspacing-normal); --cds-font-heading-02-weight: var(--cds-font-core-weight-medium); --cds-font-heading-03-fontsize: var(--cds-font-core-scale-07-fontsize); --cds-font-heading-03-lineheight: var(--cds-font-core-scale-07-lineheight); --cds-font-heading-03-letterspacing: var(--cds-font-core-letterspacing-normal); --cds-font-heading-03-weight: var(--cds-font-core-weight-medium); --cds-font-heading-04-fontsize: var(--cds-font-core-scale-06-fontsize); --cds-font-heading-04-lineheight: var(--cds-font-core-scale-06-lineheight); --cds-font-heading-04-letterspacing: var(--cds-font-core-letterspacing-normal); --cds-font-heading-04-weight: var(--cds-font-core-weight-medium); --cds-font-heading-05-fontsize: var(--cds-font-core-scale-05-fontsize); --cds-font-heading-05-lineheight: var(--cds-font-core-scale-05-lineheight); --cds-font-heading-05-letterspacing: var(--cds-font-core-letterspacing-normal); --cds-font-heading-05-weight: var(--cds-font-core-weight-semibold); --cds-font-heading-06-fontsize: var(--cds-font-core-scale-04-fontsize); --cds-font-heading-06-lineheight: var(--cds-font-core-scale-04-lineheight); --cds-font-heading-06-letterspacing: var(--cds-font-core-letterspacing-normal); --cds-font-heading-06-weight: var(--cds-font-core-weight-semibold); --cds-font-heading-07-fontsize: var(--cds-font-core-scale-03-fontsize); --cds-font-heading-07-lineheight: var(--cds-font-core-scale-03-lineheight); --cds-font-heading-07-letterspacing: var(--cds-font-core-letterspacing-normal); --cds-font-heading-07-weight: var(--cds-font-core-weight-semibold); --cds-font-groupheading-01-fontsize: var(--cds-font-heading-06-fontsize); --cds-font-groupheading-01-lineheight: var(--cds-font-heading-06-lineheight); --cds-font-groupheading-01-letterspacing: var(--cds-font-core-letterspacing-normal); --cds-font-groupheading-01-weight: var(--cds-font-core-weight-medium); --cds-font-groupheading-01-transform: var(--cds-font-core-transform-uppercase); --cds-font-groupheading-02-fontsize: var(--cds-font-heading-07-fontsize); --cds-font-groupheading-02-lineheight: var(--cds-font-heading-07-lineheight); --cds-font-groupheading-02-letterspacing: var(--cds-font-core-letterspacing-normal); --cds-font-groupheading-02-weight: var(--cds-font-heading-07-weight); --cds-font-groupheading-02-transform: var(--cds-font-core-transform-uppercase); --cds-font-label-default-fontsize: var(--cds-font-core-scale-04-fontsize); --cds-font-label-default-lineheight: var(--cds-font-core-scale-04-lineheight); --cds-font-label-default-letterspacing: var(--cds-font-core-letterspacing-normal); --cds-font-label-default-weight: var(--cds-font-core-weight-medium); --cds-font-label-default-weight-bold: var(--cds-font-core-weight-semibold); --cds-font-label-small-fontsize: var(--cds-font-core-scale-03-fontsize); --cds-font-label-small-lineheight: var(--cds-font-core-scale-03-lineheight); --cds-font-label-small-letterspacing: var(--cds-font-core-letterspacing-normal); --cds-font-label-small-weight: var(--cds-font-core-weight-semibold); --cds-font-label-xsmall-fontsize: var(--cds-font-core-scale-02-fontsize); --cds-font-label-xsmall-lineheight: var(--cds-font-core-scale-02-lineheight); --cds-font-label-xsmall-letterspacing: var(--cds-font-core-letterspacing-normal); --cds-font-label-xsmall-weight: var(--cds-font-core-weight-bold); --cds-font-label-xsmall-transform: var(--cds-font-core-transform-uppercase); --cds-font-button-label-fontsize: var(--cds-font-core-scale-04-fontsize); --cds-font-button-label-lineheight: var(--cds-font-core-scale-04-lineheight); --cds-font-button-label-letterspacing: var(--cds-font-core-letterspacing-normal); --cds-font-button-label-weight: var(--cds-font-core-weight-medium); --cds-font-datadisplay-01-fontsize: var(--cds-font-heading-02-fontsize); --cds-font-datadisplay-01-lineheight: var(--cds-font-heading-02-lineheight); --cds-font-datadisplay-01-letterspacing: var(--cds-font-core-letterspacing-normal); --cds-font-datadisplay-01-weight: var(--cds-font-core-weight-regular); --cds-font-datadisplay-02-fontsize: var(--cds-font-heading-03-fontsize); --cds-font-datadisplay-02-lineheight: var(--cds-font-heading-03-lineheight); --cds-font-datadisplay-02-letterspacing: var(--cds-font-core-letterspacing-normal); --cds-font-datadisplay-02-weight: var(--cds-font-core-weight-regular); --cds-font-link-default-decoration: var(--cds-font-core-decoration-underline); --cds-font-code-family: var(--cds-font-core-family-roboto); --cds-font-display-01-fontsize: var(--cds-font-core-scale-12-fontsize); --cds-font-display-01-lineheight: var(--cds-font-core-scale-12-lineheight); --cds-font-display-01-letterspacing: var(--cds-font-core-letterspacing-normal); --cds-font-display-01-weight: var(--cds-font-core-weight-regular); --cds-font-display-01-weight-bold: var(--cds-font-core-weight-bold); --cds-font-display-02-fontsize: var(--cds-font-core-scale-11-fontsize); --cds-font-display-02-lineheight: var(--cds-font-core-scale-11-lineheight); --cds-font-display-02-letterspacing: var(--cds-font-core-letterspacing-normal); --cds-font-display-02-weight: var(--cds-font-core-weight-regular); --cds-font-display-02-weight-bold: var(--cds-font-core-weight-bold); --cds-font-display-03-fontsize: var(--cds-font-core-scale-10-fontsize); --cds-font-display-03-lineheight: var(--cds-font-core-scale-10-lineheight); --cds-font-display-03-letterspacing: var(--cds-font-core-letterspacing-normal); --cds-font-display-03-weight: var(--cds-font-core-weight-regular); --cds-font-display-03-weight-bold: var(--cds-font-core-weight-bold); --cds-font-b-base-family: var(--cds-font-core-family-bloombergsans); --cds-font-b-heading-01-fontsize: var(--cds-font-core-scale-09-fontsize); --cds-font-b-heading-01-lineheight: var(--cds-font-core-scale-09-lineheight); --cds-font-b-heading-01-letterspacing: var(--cds-font-core-letterspacing-tighter); --cds-font-b-heading-01-weight: var(--cds-font-core-weight-medium); --cds-font-b-heading-02-fontsize: var(--cds-font-core-scale-08-fontsize); --cds-font-b-heading-02-lineheight: var(--cds-font-core-scale-08-lineheight); --cds-font-b-heading-02-letterspacing: var(--cds-font-core-letterspacing-tight); --cds-font-b-heading-02-weight: var(--cds-font-core-weight-medium); --cds-font-b-heading-03-fontsize: var(--cds-font-core-scale-07-fontsize); --cds-font-b-heading-03-lineheight: var(--cds-font-core-scale-07-lineheight); --cds-font-b-heading-03-letterspacing: var(--cds-font-core-letterspacing-tight); --cds-font-b-heading-03-weight: var(--cds-font-core-weight-medium); --cds-font-b-heading-04-fontsize: var(--cds-font-core-scale-06-fontsize); --cds-font-b-heading-04-lineheight: var(--cds-font-core-scale-06-lineheight); --cds-font-b-heading-04-letterspacing: var(--cds-font-core-letterspacing-tight); --cds-font-b-heading-04-weight: var(--cds-font-core-weight-medium); --cds-font-b-heading-05-fontsize: var(--cds-font-core-scale-05-fontsize); --cds-font-b-heading-05-lineheight: var(--cds-font-core-scale-05-lineheight); --cds-font-b-heading-05-letterspacing: var(--cds-font-core-letterspacing-normal); --cds-font-b-heading-05-weight: var(--cds-font-core-weight-medium); --cds-font-b-heading-06-fontsize: var(--cds-font-core-scale-04-fontsize); --cds-font-b-heading-06-lineheight: var(--cds-font-core-scale-04-lineheight); --cds-font-b-heading-06-letterspacing: var(--cds-font-core-letterspacing-normal); --cds-font-b-heading-06-weight: var(--cds-font-core-weight-medium); --cds-font-b-heading-07-fontsize: var(--cds-font-core-scale-03-fontsize); --cds-font-b-heading-07-lineheight: var(--cds-font-core-scale-03-lineheight); --cds-font-b-heading-07-letterspacing: var(--cds-font-core-letterspacing-normal); --cds-font-b-heading-07-weight: var(--cds-font-core-weight-medium); --cds-font-b-groupheading-02-fontsize: var(--cds-font-core-scale-03-fontsize); --cds-font-b-groupheading-02-lineheight: var(--cds-font-core-scale-03-lineheight); --cds-font-b-groupheading-02-letterspacing: var(--cds-font-core-letterspacing-normal); --cds-font-b-groupheading-02-weight: var(--cds-font-core-weight-medium); --cds-font-b-groupheading-02-transform: var(--cds-font-core-transform-uppercase); --cds-font-b-label-default-fontsize: var(--cds-font-core-scale-04-fontsize); --cds-font-b-label-default-lineheight: var(--cds-font-core-scale-04-lineheight); --cds-font-b-label-default-letterspacing: var(--cds-font-core-letterspacing-normal); --cds-font-b-label-default-weight: var(--cds-font-core-weight-medium); --cds-font-b-label-default-weight-bold: var(--cds-font-core-weight-medium); --cds-font-b-label-small-fontsize: var(--cds-font-core-scale-03-fontsize); --cds-font-b-label-small-lineheight: var(--cds-font-core-scale-03-lineheight); --cds-font-b-label-small-letterspacing: var(--cds-font-core-letterspacing-normal); --cds-font-b-label-small-weight: var(--cds-font-core-weight-medium); --cds-font-b-label-xsmall-fontsize: var(--cds-font-core-scale-02-fontsize); --cds-font-b-label-xsmall-lineheight: var(--cds-font-core-scale-02-lineheight); --cds-font-b-label-xsmall-letterspacing: var(--cds-font-core-letterspacing-wide); --cds-font-b-label-xsmall-weight: var(--cds-font-core-weight-bold); --cds-font-b-label-xsmall-transform: var(--cds-font-core-transform-uppercase); --cds-font-b-datadisplay-01-fontsize: var(--cds-font-core-scale-08-fontsize); --cds-font-b-datadisplay-01-lineheight: var(--cds-font-core-scale-08-lineheight); --cds-font-b-datadisplay-01-letterspacing: var(--cds-font-core-letterspacing-tight); --cds-font-b-datadisplay-01-weight: var(--cds-font-core-weight-regular); --cds-font-b-datadisplay-02-fontsize: var(--cds-font-core-scale-07-fontsize); --cds-font-b-datadisplay-02-lineheight: var(--cds-font-core-scale-07-lineheight); --cds-font-b-datadisplay-02-letterspacing: var(--cds-font-core-letterspacing-tight); --cds-font-b-datadisplay-02-weight: var(--cds-font-core-weight-regular); --cds-font-b-display-01-fontsize: var(--cds-font-core-scale-12-fontsize); --cds-font-b-display-01-lineheight: var(--cds-font-core-scale-12-lineheight); --cds-font-b-display-01-letterspacing: var(--cds-font-core-letterspacing-tightest); --cds-font-b-display-01-weight: var(--cds-font-core-weight-regular); --cds-font-b-display-01-weight-bold: var(--cds-font-core-weight-bold); --cds-font-b-display-02-fontsize: var(--cds-font-core-scale-11-fontsize); --cds-font-b-display-02-lineheight: var(--cds-font-core-scale-11-lineheight); --cds-font-b-display-02-letterspacing: var(--cds-font-core-letterspacing-tighter); --cds-font-b-display-02-weight: var(--cds-font-core-weight-regular); --cds-font-b-display-02-weight-bold: var(--cds-font-core-weight-bold); --cds-font-b-display-03-fontsize: var(--cds-font-core-scale-10-fontsize); --cds-font-b-display-03-lineheight: var(--cds-font-core-scale-10-lineheight); --cds-font-b-display-03-letterspacing: var(--cds-font-core-letterspacing-tighter); --cds-font-b-display-03-weight: var(--cds-font-core-weight-regular); --cds-font-b-display-03-weight-bold: var(--cds-font-core-weight-bold); } :root, :host, .cds-bbsans, [data-cds-sizing="regular"], [data-cds-sizing="regular*"] *, [data-cds-sizing="regular[*]"] tbody :where(td,th) *, [data-cds-sizing="compact"] [data-cds-sizing="regular"], [data-cds-sizing="compact*"] [data-cds-sizing="regular"], [data-cds-sizing="compact*"] [data-cds-sizing="regular"] *, [data-cds-sizing="compact[*]"] [data-cds-sizing="regular"], [data-cds-sizing="compact[*]"] [data-cds-sizing="regular"] * { --cds-button-size-padding-left: var(--cds-size-core-030-px); --cds-button-size-padding-right: var(--cds-size-core-030-px); --cds-button-size-padding-top: var(--cds-size-core-020-px); --cds-button-size-padding-bottom: var(--cds-size-core-020-px); --cds-button-size-minheight: var(--cds-size-core-100-px); --cds-button-size-minwidth: var(--cds-size-core-100-px); --cds-button-size-icongap: var(--cds-size-core-020-px); --cds-inlinecode-size-padding-left: var(--cds-size-core-010-px); --cds-inlinecode-size-padding-right: var(--cds-size-core-010-px); --cds-inlinecode-size-borderradius: var(--cds-size-core-005-px); --cds-input-size-padding-left: var(--cds-size-core-030-px); --cds-input-size-padding-right: var(--cds-size-core-030-px); --cds-input-size-padding-top: var(--cds-size-core-020-px); --cds-input-size-padding-bottom: var(--cds-size-core-020-px); --cds-input-size-minheight: var(--cds-size-core-100-px); --cds-input-size-minwidth: var(--cds-size-core-000-px); --cds-input-size-icongap: var(--cds-size-core-020-px); --cds-input-size-icon: var(--cds-size-core-040-rem); --cds-input-label-size-margin-bottom: var(--cds-size-core-020-px); --cds-input-label-size-icongap: var(--cds-size-core-010-px); --cds-input-token-size-padding-left: 10px; --cds-input-token-size-padding-right: 10px; --cds-input-token-size-padding-top: var(--cds-size-core-005-px); --cds-input-token-size-padding-bottom: var(--cds-size-core-005-px); --cds-input-token-size-margin-top: var(--cds-size-core-020-px); --cds-input-helpertext-size-margin-top: var(--cds-size-core-010-px); --cds-menu-filter-size-padding-top: var(--cds-size-core-020-px); --cds-menu-filter-size-padding-bottom: var(--cds-size-core-020-px); --cds-menu-scroll-size-padding-top: var(--cds-size-core-020-px); --cds-menu-scroll-size-padding-bottom: 6px; --cds-menu-item-size-padding-top: 6px; --cds-menu-item-size-padding-bottom: 6px; --cds-menu-item-size-padding-left: 14px; --cds-menu-item-size-padding-right: 14px; --cds-menu-item-size-minheight: var(--cds-size-core-080-px); --cds-menu-group-size-margin-top: var(--cds-size-core-030-px); --cds-menu-tag-size-padding-top: var(--cds-size-core-005-px); --cds-menu-tag-size-padding-bottom: var(--cds-size-core-005-px); --cds-menu-tag-size-padding-left: var(--cds-size-core-010-px); --cds-menu-tag-size-padding-right: var(--cds-size-core-010-px); --cds-menu-actionitem-size-padding-top: 9px; --cds-menu-actionitem-size-padding-bottom: 9px; --cds-menu-actionitem-size-minheight: var(--cds-size-core-100-px); --cds-size-page-gutter: var(--cds-size-core-080-px); --cds-size-page-margin-top-medium: var(--cds-size-core-100-px); --cds-size-page-margin-top-small: var(--cds-size-core-050-px); --cds-size-page-margin-bottom-medium: var(--cds-size-core-100-px); --cds-size-page-margin-bottom-small: var(--cds-size-core-050-px); --cds-size-sidebar-margin: var(--cds-size-core-050-px); --cds-size-grid-gap: var(--cds-size-core-050-px); --cds-size-section-margin-block-medium: var(--cds-size-core-100-px); --cds-size-section-margin-block-small: var(--cds-size-core-050-px); --cds-size-panel-padding-medium: var(--cds-size-core-100-px); --cds-size-panel-padding-small: var(--cds-size-core-050-px); --cds-component-margin-block-medium: var(--cds-size-core-050-px); --cds-header-text-margin-block-medium: var(--cds-size-core-050-px); --cds-header-text-margin-block-small: var(--cds-size-core-020-px); --cds-header-image-padding-block-large: var(--cds-size-core-200-px); --cds-header-image-padding-block-medium: var(--cds-size-core-100-px); --cds-header-image-padding-block-small: var(--cds-size-core-050-px); --cds-actionbar-padding-block-medium: var(--cds-size-core-030-px); --cds-buttons-gap-inline-medium: var(--cds-size-core-030-px); --cds-buttons-gap-inline-small: var(--cds-size-core-020-px); --cds-buttons-gap-inline-xsmall: var(--cds-size-core-010-px); --cds-title-padding-block-medium: var(--cds-size-core-020-px); --cds-form-field-margin-block: var(--cds-size-core-050-px); --cds-form-fieldset-margin-block: var(--cds-size-core-100-px); --cds-form-fieldset-introduction-gap: var(--cds-size-core-010-px); --cds-prose-title-margin-block: var(--cds-size-core-020-px); --cds-prose-section-margin-block: var(--cds-size-core-100-px); --cds-prose-subsection-margin-block: var(--cds-size-core-050-px); --cds-pagination-size-textgap: var(--cds-size-core-030-px); --cds-splitbutton-divider-size-padding-block: var(--cds-size-core-020-px); --cds-cell-size-padding-left: 6px; --cds-cell-size-padding-right: 6px; --cds-cell-size-padding-top: var(--cds-size-core-020-px); --cds-cell-size-padding-bottom: var(--cds-size-core-020-px); --cds-cell-size-minheight: var(--cds-size-core-100-px); --cds-cell-size-minwidth: var(--cds-size-core-080-px); --cds-tablerow-size-padding-left: 6px; --cds-tablerow-size-padding-right: 6px; --cds-token-size-padding-left: var(--cds-size-core-030-px); --cds-token-size-padding-right: var(--cds-size-core-030-px); --cds-token-size-padding-top: var(--cds-size-core-010-px); --cds-token-size-padding-bottom: var(--cds-size-core-010-px); --cds-token-size-padding-lefticon: var(--cds-size-core-020-px); --cds-token-size-padding-rightaction: var(--cds-size-core-010-px); --cds-token-size-minheight: var(--cds-size-core-080-px); --cds-token-size-minwidth: var(--cds-size-core-080-px); --cds-token-size-icongap: var(--cds-size-core-010-px); --cds-token-size-actiongap: var(--cds-size-core-020-px); --cds-tree-size-padding-right: var(--cds-size-core-020-px); --cds-tree-size-arrowsize: var(--cds-size-core-050-rem); --cds-tree-size-indentgap: var(--cds-size-core-060-px); --cds-tree-size-columngap: var(--cds-size-core-010-px); --cds-tree-size-borderwidth: var(--cds-size-core-010-px); --cds-tree-size-textgap: var(--cds-size-core-060-px); --cds-tree-actions-size-separatormargin: var(--cds-size-core-010-px); } [data-cds-sizing="compact"], [data-cds-sizing="compact*"] *, [data-cds-sizing="compact[*]"] tbody :where(td,th) *, [data-cds-sizing="regular"] [data-cds-sizing="compact"], [data-cds-sizing="regular*"] [data-cds-sizing="compact"], [data-cds-sizing="regular*"] [data-cds-sizing="compact"] *, [data-cds-sizing="regular[*]"] [data-cds-sizing="compact"], [data-cds-sizing="regular[*]"] [data-cds-sizing="compact"] * { --cds-button-size-padding-left: var(--cds-size-core-030-px); --cds-button-size-padding-right: var(--cds-size-core-030-px); --cds-button-size-padding-top: 1px; --cds-button-size-padding-bottom: 1px; --cds-button-size-minheight: var(--cds-size-core-060-px); --cds-button-size-minwidth: var(--cds-size-core-060-px); --cds-button-size-icongap: var(--cds-size-core-010-px); --cds-input-size-padding-left: var(--cds-size-core-030-px); --cds-input-size-padding-right: var(--cds-size-core-030-px); --cds-input-size-padding-top: var(--cds-size-core-005-px); --cds-input-size-padding-bottom: var(--cds-size-core-005-px); --cds-input-size-minheight: var(--cds-size-core-060-px); --cds-input-size-minwidth: var(--cds-size-core-000-px); --cds-input-size-icongap: var(--cds-size-core-020-px); --cds-input-size-icon: var(--cds-size-core-030-rem); --cds-input-label-size-margin-bottom: var(--cds-size-core-020-px); --cds-input-label-size-icongap: var(--cds-size-core-010-px); --cds-input-token-size-padding-left: var(--cds-size-core-020-px); --cds-input-token-size-padding-right: var(--cds-size-core-020-px); --cds-input-token-size-padding-top: 0px; --cds-input-token-size-padding-bottom: 0px; --cds-input-token-size-margin-top: 1px; --cds-input-helpertext-size-margin-top: var(--cds-size-core-010-px); --cds-menu-filter-size-padding-top: var(--cds-size-core-020-px); --cds-menu-filter-size-padding-bottom: var(--cds-size-core-020-px); --cds-menu-scroll-size-padding-top: var(--cds-size-core-020-px); --cds-menu-scroll-size-padding-bottom: 6px; --cds-menu-item-size-padding-top: 6px; --cds-menu-item-size-padding-bottom: 6px; --cds-menu-item-size-padding-left: 14px; --cds-menu-item-size-padding-right: 14px; --cds-menu-item-size-minheight: var(--cds-size-core-080-px); --cds-menu-group-size-margin-top: 6px; --cds-menu-tag-size-padding-top: var(--cds-size-core-005-px); --cds-menu-tag-size-padding-bottom: var(--cds-size-core-005-px); --cds-menu-tag-size-padding-left: var(--cds-size-core-010-px); --cds-menu-tag-size-padding-right: var(--cds-size-core-010-px); --cds-menu-actionitem-size-padding-top: 5px; --cds-menu-actionitem-size-padding-bottom: 5px; --cds-menu-actionitem-size-minheight: var(--cds-size-core-080-px); --cds-pagination-size-textgap: var(--cds-size-core-030-px); --cds-splitbutton-divider-size-padding-block: var(--cds-size-core-010-px); --cds-cell-size-padding-left: 6px; --cds-cell-size-padding-right: 6px; --cds-cell-size-padding-top: var(--cds-size-core-010-px); --cds-cell-size-padding-bottom: var(--cds-size-core-010-px); --cds-cell-size-minheight: var(--cds-size-core-080-px); --cds-cell-size-minwidth: var(--cds-size-core-080-px); --cds-tablerow-size-padding-left: 6px; --cds-tablerow-size-padding-right: 6px; --cds-token-size-padding-left: var(--cds-size-core-030-px); --cds-token-size-padding-right: var(--cds-size-core-030-px); --cds-token-size-padding-top: var(--cds-size-core-005-px); --cds-token-size-padding-bottom: var(--cds-size-core-005-px); --cds-token-size-padding-lefticon: var(--cds-size-core-020-px); --cds-token-size-padding-rightaction: var(--cds-size-core-010-px); --cds-token-size-minheight: var(--cds-size-core-060-px); --cds-token-size-minwidth: var(--cds-size-core-060-px); --cds-token-size-icongap: var(--cds-size-core-010-px); --cds-token-size-actiongap: var(--cds-size-core-030-px); } /* Bloomberg Sans Enablement - overwrite semantic tokens with their "b" variants */ .cds-bbsans { --cds-font-base-family: var(--cds-font-b-base-family); --cds-font-heading-01-fontsize: var(--cds-font-b-heading-01-fontsize); --cds-font-heading-01-lineheight: var(--cds-font-b-heading-01-lineheight); --cds-font-heading-01-letterspacing: var(--cds-font-b-heading-01-letterspacing); --cds-font-heading-01-weight: var(--cds-font-b-heading-01-weight); --cds-font-heading-02-fontsize: var(--cds-font-b-heading-02-fontsize); --cds-font-heading-02-lineheight: var(--cds-font-b-heading-02-lineheight); --cds-font-heading-02-letterspacing: var(--cds-font-b-heading-02-letterspacing); --cds-font-heading-02-weight: var(--cds-font-b-heading-02-weight); --cds-font-heading-03-fontsize: var(--cds-font-b-heading-03-fontsize); --cds-font-heading-03-lineheight: var(--cds-font-b-heading-03-lineheight); --cds-font-heading-03-letterspacing: var(--cds-font-b-heading-03-letterspacing); --cds-font-heading-03-weight: var(--cds-font-b-heading-03-weight); --cds-font-heading-04-fontsize: var(--cds-font-b-heading-04-fontsize); --cds-font-heading-04-lineheight: var(--cds-font-b-heading-04-lineheight); --cds-font-heading-04-letterspacing: var(--cds-font-b-heading-04-letterspacing); --cds-font-heading-04-weight: var(--cds-font-b-heading-04-weight); --cds-font-heading-05-fontsize: var(--cds-font-b-heading-05-fontsize); --cds-font-heading-05-lineheight: var(--cds-font-b-heading-05-lineheight); --cds-font-heading-05-letterspacing: var(--cds-font-b-heading-05-letterspacing); --cds-font-heading-05-weight: var(--cds-font-b-heading-05-weight); --cds-font-heading-06-fontsize: var(--cds-font-b-heading-06-fontsize); --cds-font-heading-06-lineheight: var(--cds-font-b-heading-06-lineheight); --cds-font-heading-06-letterspacing: var(--cds-font-b-heading-06-letterspacing); --cds-font-heading-06-weight: var(--cds-font-b-heading-06-weight); --cds-font-heading-07-fontsize: var(--cds-font-b-heading-07-fontsize); --cds-font-heading-07-lineheight: var(--cds-font-b-heading-07-lineheight); --cds-font-heading-07-letterspacing: var(--cds-font-b-heading-07-letterspacing); --cds-font-heading-07-weight: var(--cds-font-b-heading-07-weight); --cds-font-groupheading-02-fontsize: var(--cds-font-b-groupheading-02-fontsize); --cds-font-groupheading-02-lineheight: var(--cds-font-b-groupheading-02-lineheight); --cds-font-groupheading-02-letterspacing: var(--cds-font-b-groupheading-02-letterspacing); --cds-font-groupheading-02-weight: var(--cds-font-b-groupheading-02-weight); --cds-font-groupheading-02-transform: var(--cds-font-b-groupheading-02-transform); --cds-font-label-default-fontsize: var(--cds-font-b-label-default-fontsize); --cds-font-label-default-lineheight: var(--cds-font-b-label-default-lineheight); --cds-font-label-default-letterspacing: var(--cds-font-b-label-default-letterspacing); --cds-font-label-default-weight: var(--cds-font-b-label-default-weight); --cds-font-label-default-weight-bold: var(--cds-font-b-label-default-weight-bold); --cds-font-label-small-fontsize: var(--cds-font-b-label-small-fontsize); --cds-font-label-small-lineheight: var(--cds-font-b-label-small-lineheight); --cds-font-label-small-letterspacing: var(--cds-font-b-label-small-letterspacing); --cds-font-label-small-weight: var(--cds-font-b-label-small-weight); --cds-font-label-xsmall-fontsize: var(--cds-font-b-label-xsmall-fontsize); --cds-font-label-xsmall-lineheight: var(--cds-font-b-label-xsmall-lineheight); --cds-font-label-xsmall-letterspacing: var(--cds-font-b-label-xsmall-letterspacing); --cds-font-label-xsmall-weight: var(--cds-font-b-label-xsmall-weight); --cds-font-label-xsmall-transform: var(--cds-font-b-label-xsmall-transform); --cds-font-datadisplay-01-fontsize: var(--cds-font-b-datadisplay-01-fontsize); --cds-font-datadisplay-01-lineheight: var(--cds-font-b-datadisplay-01-lineheight); --cds-font-datadisplay-01-letterspacing: var(--cds-font-b-datadisplay-01-letterspacing); --cds-font-datadisplay-01-weight: var(--cds-font-b-datadisplay-01-weight); --cds-font-datadisplay-02-fontsize: var(--cds-font-b-datadisplay-02-fontsize); --cds-font-datadisplay-02-lineheight: var(--cds-font-b-datadisplay-02-lineheight); --cds-font-datadisplay-02-letterspacing: var(--cds-font-b-datadisplay-02-letterspacing); --cds-font-datadisplay-02-weight: var(--cds-font-b-datadisplay-02-weight); --cds-font-display-01-fontsize: var(--cds-font-b-display-01-fontsize); --cds-font-display-01-lineheight: var(--cds-font-b-display-01-lineheight); --cds-font-display-01-letterspacing: var(--cds-font-b-display-01-letterspacing); --cds-font-display-01-weight: var(--cds-font-b-display-01-weight); --cds-font-display-01-weight-bold: var(--cds-font-b-display-01-weight-bold); --cds-font-display-02-fontsize: var(--cds-font-b-display-02-fontsize); --cds-font-display-02-lineheight: var(--cds-font-b-display-02-lineheight); --cds-font-display-02-letterspacing: var(--cds-font-b-display-02-letterspacing); --cds-font-display-02-weight: var(--cds-font-b-display-02-weight); --cds-font-display-02-weight-bold: var(--cds-font-b-display-02-weight-bold); --cds-font-display-03-fontsize: var(--cds-font-b-display-03-fontsize); --cds-font-display-03-lineheight: var(--cds-font-b-display-03-lineheight); --cds-font-display-03-letterspacing: var(--cds-font-b-display-03-letterspacing); --cds-font-display-03-weight: var(--cds-font-b-display-03-weight); --cds-font-display-03-weight-bold: var(--cds-font-b-display-03-weight-bold); } } @layer semantic { :root, :host, [data-cds-theme="light"] { color-scheme: light; --cds-color-background: var(--cds-color-core-white); --cds-color-background-secondary: var(--cds-color-core-grey-01); --cds-color-background-hover: var(--cds-color-core-grey-02); --cds-color-background-selected: #CCE3FF8C; --cds-color-background-selectedhover: #CCE3FF8C; --cds-color-background-none: var(--cds-color-core-none); --cds-color-text: var(--cds-color-core-grey-15); --cds-color-text-secondary: var(--cds-color-core-grey-10); --cds-color-icon-strong: var(--cds-color-core-grey-15); --cds-color-icon-moderate: var(--cds-color-core-grey-09); --cds-color-border-strong: var(--cds-color-core-grey-10); --cds-color-border-moderate: var(--cds-color-core-grey-07); --cds-color-border-subtle: var(--cds-color-core-grey-04); --cds-color-link-text-idle: var(--cds-color-core-blue-06); --cds-color-link-text-hover: var(--cds-color-core-blue-09); --cds-color-link-text-visited: var(--cds-color-core-purple-08); --cds-color-link-icon-idle: var(--cds-color-core-blue-06); --cds-color-link-icon-hover: var(--cds-color-core-blue-09); --cds-color-link-icon-visited: var(--cds-color-core-purple-08); --cds-color-scrollbar-bar: var(--cds-color-core-grey-08); --cds-color-scrollbar-track: var(--cds-color-core-none); --cds-color-overlay-background: #FFFFFFD9; --cds-color-inverse-background: var(--cds-color-core-grey-18); --cds-color-inverse-text: var(--cds-color-core-white); --cds-color-inverse-icon: var(--cds-color-core-white); --cds-color-dropshadow-default: #00000059; --cds-color-popover-background: var(--cds-color-core-white); --cds-color-highlighttext-background: var(--cds-color-core-blue-04); --cds-color-highlighttext-text: var(--cds-color-core-white); --cds-color-indicator-greya-background: var(--cds-color-core-grey-04); --cds-color-indicator-greya-text: var(--cds-color-core-grey-15); --cds-color-indicator-greyb-background: var(--cds-color-core-grey-06); --cds-color-indicator-greyb-text: var(--cds-color-core-grey-15); --cds-color-indicator-green-background: var(--cds-color-core-green-03); --cds-color-indicator-green-text: var(--cds-color-core-grey-15); --cds-color-indicator-blue-background: var(--cds-color-core-blue-02); --cds-color-indicator-blue-text: var(--cds-color-core-grey-15); --cds-color-indicator-teal-background: var(--cds-color-core-teal-06); --cds-color-indicator-teal-text: var(--cds-color-core-grey-15); --cds-color-indicator-purple-background: var(--cds-color-core-purple-04); --cds-color-indicator-purple-text: var(--cds-color-core-black); --cds-color-indicator-red-background: var(--cds-color-core-red-05); --cds-color-indicator-red-text: var(--cds-color-core-white); --cds-color-indicator-magenta-background: var(--cds-color-core-magenta-03); --cds-color-indicator-magenta-text: var(--cds-color-core-black); --cds-color-indicator-yellow-background: var(--cds-color-core-yellow-03); --cds-color-indicator-yellow-text: var(--cds-color-core-grey-15); --cds-color-indicator-orange-background: var(--cds-color-core-orange-04); --cds-color-indicator-orange-text: var(--cds-color-core-black); --cds-color-indicator-amber-background: var(--cds-color-core-amber-04); --cds-color-indicator-amber-text: var(--cds-color-core-grey-15); --cds-color-placeholder-text: var(--cds-color-core-grey-10); --cds-color-insensitive-background: var(--cds-color-core-grey-02); --cds-color-insensitive-text: var(--cds-color-core-grey-07); --cds-color-insensitive-icon: var(--cds-color-core-grey-07); --cds-color-insensitive-border: var(--cds-color-core-grey-04); --cds-color-readonly-background: var(--cds-color-core-none); --cds-color-readonly-text: var(--cds-color-core-grey-15); --cds-color-readonly-icon: var(--cds-color-core-grey-07); --cds-color-readonly-border: var(--cds-color-core-grey-04); --cds-color-focus-border: var(--cds-color-core-blue-06); --cds-color-destruction-text: var(--cds-color-core-white); --cds-color-destruction-icon: var(--cds-color-core-white); --cds-color-destruction-background-idle: var(--cds-color-core-red-05); --cds-color-destruction-background-hover: var(--cds-color-core-red-04); --cds-color-destruction-background-pressed: var(--cds-color-core-red-06); --cds-color-selectedgraphics-background-primary: var(--cds-color-core-blue-06); --cds-color-selectedgraphics-background-secondary: var(--cds-color-core-blue-06); --cds-color-success-text: var(--cds-color-core-green-08); --cds-color-success-icon: var(--cds-color-core-green-07); --cds-color-success-border: var(--cds-color-core-green-06); --cds-color-success-background-idle: #C5FACFA6; --cds-color-success-background-hover: var(--cds-color-core-green-01); --cds-color-success-background-selected: #C5FACFA6; --cds-color-success-backgroundbar-selected: var(--cds-color-core-blue-06); --cds-color-successpanel-text: var(--cds-color-core-grey-15); --cds-color-successpanel-icon: var(--cds-color-core-grey-15); --cds-color-successpanel-link: var(--cds-color-core-grey-15); --cds-color-successpanel-border-moderate: var(--cds-color-core-green-06); --cds-color-successpanel-border-subtle: var(--cds-color-core-green-05); --cds-color-successpanel-background-idle: var(--cds-color-core-green-03); --cds-color-successpanel-background-hover: var(--cds-color-core-green-02); --cds-color-warning-text: var(--cds-color-core-yellow-09); --cds-color-warning-icon: var(--cds-color-core-yellow-06); --cds-color-warning-icon-secondary: var(--cds-color-core-grey-18); --cds-color-warning-border: var(--cds-color-core-yellow-06); --cds-color-warning-background-idle: #FFF9CCA6; --cds-color-warning-background-hover: var(--cds-color-core-yellow-01); --cds-color-warning-background-selected: #FFF9CCA6; --cds-color-warning-backgroundbar-selected: var(--cds-color-core-blue-06); --cds-color-warningpanel-text: var(--cds-color-core-grey-15); --cds-color-warningpanel-icon: var(--cds-color-core-grey-15); --cds-color-warningpanel-link: var(--cds-color-core-grey-15); --cds-color-warningpanel-border-moderate: var(--cds-color-core-yellow-07); --cds-color-warningpanel-border-subtle: var(--cds-color-core-yellow-06); --cds-color-warningpanel-background-idle: var(--cds-color-core-yellow-03); --cds-color-warningpanel-background-hover: var(--cds-color-core-yellow-02); --cds-color-error-text: var(--cds-color-core-red-06); --cds-color-error-icon: var(--cds-color-core-red-06); --cds-color-error-border: var(--cds-color-core-red-06); --cds-color-error-background-idle: #FFCCD2A6; --cds-color-error-background-hover: var(--cds-color-core-red-01); --cds-color-error-background-selected: #FFCCD2A6; --cds-color-error-backgroundbar-selected: var(--cds-color-core-blue-06); --cds-color-errorpanel-text: var(--cds-color-core-white); --cds-color-errorpanel-icon: var(--cds-color-core-white); --cds-color-errorpanel-link: var(--cds-color-core-white); --cds-color-errorpanel-border-moderate: var(--cds-color-core-red-07); --cds-color-errorpanel-border-subtle: var(--cds-color-core-red-06); --cds-color-errorpanel-background-idle: var(--cds-color-core-red-05); --cds-color-errorpanel-background-hover: var(--cds-color-core-red-04); --cds-color-information-text: var(--cds-color-core-grey-15); --cds-color-information-icon-strong: var(--cds-color-core-grey-15); --cds-color-information-background-idle: var(--cds-color-core-grey-04); --cds-color-informationpanel-text: var(--cds-color-core-grey-15); --cds-color-informationpanel-icon: var(--cds-color-core-grey-15); --cds-color-informationpanel-link: var(--cds-color-core-grey-15); --cds-color-informationpanel-border-moderate: var(--cds-color-core-blue-06); --cds-color-informationpanel-border-subtle: var(--cds-color-core-blue-03); --cds-color-informationpanel-background-idle: var(--cds-color-core-blue-02); --cds-color-informationpanel-background-hover: var(--cds-color-core-blue-01); --cds-color-progress-text: var(--cds-color-core-purple-07); --cds-color-progress-icon: var(--cds-color-core-purple-07); --cds-color-progress-border: var(--cds-color-core-purple-07); --cds-color-progress-background-idle: #EDD0FFA6; --cds-color-progress-background-hover: var(--cds-color-core-purple-01); --cds-color-progress-background-selected: #EDD0FFA6; --cds-color-progress-backgroundbar-selected: var(--cds-color-core-blue-06);--cds-button-primary-color-text: var(--cds-color-core-white); --cds-button-primary-color-text-idle: var(--cds-color-core-white); --cds-button-primary-color-text-hover: var(--cds-color-core-white); --cds-button-primary-color-text-pressed: var(--cds-color-core-white); --cds-button-primary-color-icon: var(--cds-color-core-white); --cds-button-primary-color-icon-idle: var(--cds-color-core-white); --cds-button-primary-color-icon-hover: var(--cds-color-core-white); --cds-button-primary-color-icon-pressed: var(--cds-color-core-white); --cds-button-primary-color-border: var(--cds-color-core-none); --cds-button-primary-color-background-idle: var(--cds-color-core-blue-06); --cds-button-primary-color-background-hover: var(--cds-color-core-blue-04); --cds-button-primary-color-background-pressed: var(--cds-color-core-blue-07); --cds-button-secondary-color-text-idle: var(--cds-color-core-blue-07); --cds-button-secondary-color-text-hover: var(--cds-color-core-blue-09); --cds-button-secondary-color-text-pressed: var(--cds-color-core-blue-09); --cds-button-secondary-color-icon-idle: var(--cds-color-core-blue-07); --cds-button-secondary-color-icon-hover: var(--cds-color-core-blue-09); --cds-button-secondary-color-icon-pressed: var(--cds-color-core-blue-09); --cds-button-secondary-color-background-idle: var(--cds-color-core-blue-01); --cds-button-secondary-color-background-hover: var(--cds-color-core-blue-02); --cds-button-secondary-color-background-pressed: var(--cds-color-core-blue-03); --cds-button-secondary-color-border: var(--cds-color-core-none); --cds-button-tertiary-color-text-idle: var(--cds-color-core-blue-06); --cds-button-tertiary-color-text-hover: var(--cds-color-core-blue-09); --cds-button-tertiary-color-text-pressed: var(--cds-color-core-blue-09); --cds-button-tertiary-color-icon-idle: var(--cds-color-core-blue-06); --cds-button-tertiary-color-icon-hover: var(--cds-color-core-blue-09); --cds-button-tertiary-color-icon-pressed: var(--cds-color-core-blue-09); --cds-button-tertiary-color-background-idle: var(--cds-color-core-none); --cds-button-tertiary-color-background-hover: var(--cds-color-core-blue-02); --cds-button-tertiary-color-background-pressed: var(--cds-color-core-blue-03); --cds-button-tertiary-color-border: var(--cds-color-core-none); --cds-button-destruction-color-text: var(--cds-color-core-white); --cds-button-destruction-color-text-idle: var(--cds-color-core-white); --cds-button-destruction-color-text-hover: var(--cds-color-core-white); --cds-button-destruction-color-text-pressed: var(--cds-color-core-white); --cds-button-destruction-color-icon: var(--cds-color-core-white); --cds-button-destruction-color-icon-idle: var(--cds-color-core-white); --cds-button-destruction-color-icon-hover: var(--cds-color-core-white); --cds-button-destruction-color-icon-pressed: var(--cds-color-core-white); --cds-button-destruction-color-border: var(--cds-color-core-none); --cds-button-destruction-color-background-idle: var(--cds-color-core-red-05); --cds-button-destruction-color-background-hover: var(--cds-color-core-red-04); --cds-button-destruction-color-background-pressed: var(--cds-color-core-red-06); --cds-button-tertiaryicon-color-icon: var(--cds-color-core-grey-15); --cds-button-tertiaryicon-color-background-idle: var(--cds-color-core-none); --cds-button-tertiaryicon-color-background-hover: var(--cds-color-core-blue-02); --cds-button-tertiaryicon-color-background-pressed: var(--cds-color-core-blue-03); --cds-button-tertiaryicon-color-border: var(--cds-color-core-none); --cds-color-chart-dot-a: var(--cds-color-core-black); --cds-color-chart-dot-b: var(--cds-color-core-blue-05); --cds-color-chart-dot-c: var(--cds-color-core-orange-05); --cds-color-chart-dot-d: var(--cds-color-core-purple-06); --cds-color-chart-dot-e: var(--cds-color-core-yellow-07); --cds-color-chart-dot-f: var(--cds-color-core-teal-07); --cds-color-chart-dot-g: var(--cds-color-core-amber-06); --cds-color-chart-dot-h: var(--cds-color-core-magenta-05); --cds-color-chart-dot-i: var(--cds-color-core-green-05); --cds-color-chart-dot-j: var(--cds-color-core-purple-05); --cds-color-chart-dot-k: var(--cds-color-core-yellow-06); --cds-color-chart-dot-l: var(--cds-color-core-teal-06); --cds-color-chart-dot-m: var(--cds-color-core-red-04); --cds-color-chart-dot-n: var(--cds-color-core-blue-04); --cds-color-chart-dot-o: var(--cds-color-core-green-04); --cds-color-chart-dot-p: var(--cds-color-core-magenta-04); --cds-color-chart-dot-q: var(--cds-color-core-orange-04); --cds-color-chart-dot-r: var(--cds-color-core-grey-08); --cds-color-chart-dot-s: var(--cds-color-core-amber-05); --cds-color-chart-dot-t: var(--cds-color-core-red-06); --cds-color-chart-line-a: var(--cds-color-core-black); --cds-color-chart-line-b: var(--cds-color-core-blue-05); --cds-color-chart-line-c: var(--cds-color-core-orange-05); --cds-color-chart-line-d: var(--cds-color-core-purple-06); --cds-color-chart-line-e: var(--cds-color-core-yellow-07); --cds-color-chart-line-f: var(--cds-color-core-teal-07); --cds-color-chart-line-g: var(--cds-color-core-amber-06); --cds-color-chart-line-h: var(--cds-color-core-magenta-05); --cds-color-chart-line-i: var(--cds-color-core-green-05); --cds-color-chart-line-j: var(--cds-color-core-purple-05); --cds-color-chart-line-k: var(--cds-color-core-yellow-06); --cds-color-chart-line-l: var(--cds-color-core-teal-06); --cds-color-chart-line-m: var(--cds-color-core-red-04); --cds-color-chart-line-n: var(--cds-color-core-blue-04); --cds-color-chart-line-o: var(--cds-color-core-green-04); --cds-color-chart-line-p: var(--cds-color-core-magenta-04); --cds-color-chart-line-q: var(--cds-color-core-orange-04); --cds-color-chart-line-r: var(--cds-color-core-grey-08); --cds-color-chart-line-s: var(--cds-color-core-amber-05); --cds-color-chart-line-t: var(--cds-color-core-red-06); --cds-color-chart-bar-a: var(--cds-color-core-grey-05); --cds-color-chart-bar-b: var(--cds-color-core-blue-02); --cds-color-chart-bar-c: var(--cds-color-core-orange-02); --cds-color-chart-bar-d: var(--cds-color-core-purple-02); --cds-color-chart-bar-e: var(--cds-color-core-yellow-03); --cds-color-chart-bar-f: var(--cds-color-core-teal-03); --cds-color-chart-bar-g: var(--cds-color-core-amber-02); --cds-color-chart-bar-h: var(--cds-color-core-magenta-02); --cds-color-chart-bar-i: var(--cds-color-core-green-02); --cds-color-chart-bar-j: var(--cds-color-core-purple-01); --cds-color-chart-bar-k: var(--cds-color-core-yellow-02); --cds-color-chart-bar-l: var(--cds-color-core-teal-02); --cds-color-chart-bar-m: var(--cds-color-core-red-01); --cds-color-chart-bar-n: var(--cds-color-core-blue-01); --cds-color-chart-bar-o: var(--cds-color-core-green-01); --cds-color-chart-bar-p: var(--cds-color-core-magenta-01); --cds-color-chart-bar-q: var(--cds-color-core-orange-01); --cds-color-chart-bar-r: var(--cds-color-core-grey-04); --cds-color-chart-bar-s: var(--cds-color-core-amber-01); --cds-color-chart-bar-t: var(--cds-color-core-red-02); --cds-color-chart-neutral-high-a: var(--cds-color-core-blue-10); --cds-color-chart-neutral-high-b: var(--cds-color-core-blue-08); --cds-color-chart-neutral-high-c: var(--cds-color-core-blue-06); --cds-color-chart-neutral-high-d: var(--cds-color-core-blue-04); --cds-color-chart-neutral-high-e: var(--cds-color-core-blue-02); --cds-datepicker-color-default-background-idle: var(--cds-color-core-white); --cds-datepicker-color-default-background-hover: var(--cds-color-core-grey-02); --cds-datepicker-color-default-background-focus: var(--cds-color-core-grey-02); --cds-datepicker-color-default-border-pressed: var(--cds-color-core-grey-06); --cds-datepicker-color-default-dropshadow: #00000059; --cds-datepicker-color-default-text-idle: var(--cds-color-core-grey-15); --cds-datepicker-color-default-text-othermonths: var(--cds-color-core-grey-10); --cds-datepicker-color-default-text-insensitive: var(--cds-color-core-grey-07); --cds-datepicker-color-today-text-idle: var(--cds-color-core-blue-06); --cds-datepicker-color-selected-border-idle: var(--cds-color-core-blue-06); --cds-datepicker-color-selected-text-idle: var(--cds-color-core-grey-15); --cds-datepicker-color-selected-background-hover: var(--cds-color-core-blue-08); --cds-daterange-color-default-background-idle: var(--cds-color-core-white); --cds-daterange-color-default-background-hover: var(--cds-color-core-grey-02); --cds-daterange-color-default-background-focus: var(--cds-color-core-grey-02); --cds-daterange-color-default-border-pressed: var(--cds-color-core-grey-06); --cds-daterange-color-default-dropshadow: #00000059; --cds-daterange-color-default-text-idle: var(--cds-color-core-grey-15); --cds-daterange-color-default-text-insensitive: var(--cds-color-core-grey-07); --cds-daterange-color-today-text-idle: var(--cds-color-core-blue-06); --cds-daterange-color-inrange-background-idle: var(--cds-color-core-blue-06); --cds-daterange-color-inrange-background-hover: var(--cds-color-core-blue-08); --cds-daterange-color-inrange-border-pressed: var(--cds-color-core-white); --cds-daterange-color-inrange-border-focus: var(--cds-color-core-white); --cds-daterange-color-inrange-text-idle: var(--cds-color-core-white); --cds-daterange-color-rangestartend-background-focus: var(--cds-color-core-grey-04); --cds-daterange-color-rangestartend-border-idle: var(--cds-color-core-blue-06); --cds-datetimepicker-color-default-background-idle: var(--cds-color-core-white); --cds-datetimepicker-color-default-background-hover: var(--cds-color-core-grey-02); --cds-datetimepicker-color-default-background-focus: var(--cds-color-core-grey-02); --cds-datetimepicker-color-default-border-pressed: var(--cds-color-core-grey-06); --cds-datetimepicker-color-default-dropshadow: #00000059; --cds-datetimepicker-color-default-text-idle: var(--cds-color-core-grey-15); --cds-datetimepicker-color-default-text-othermonths: var(--cds-color-core-grey-10); --cds-datetimepicker-color-default-text-insensitive: var(--cds-color-core-grey-07); --cds-datetimepicker-color-today-text-idle: var(--cds-color-core-blue-06); --cds-datetimepicker-color-selected-border-idle: var(--cds-color-core-blue-06); --cds-dropzone-color-background-selected: #E3F0FF; --cds-dropzone-color-background-inprogress: #E3F0FF; --cds-footer-color-background: var(--cds-color-core-black); --cds-footer-color-border: var(--cds-color-core-grey-10); --cds-footer-color-text: var(--cds-color-core-white); --cds-monthpicker-color-default-background-idle: var(--cds-color-core-white); --cds-monthpicker-color-default-background-hover: var(--cds-color-core-grey-02); --cds-monthpicker-color-default-background-focus: var(--cds-color-core-grey-02); --cds-monthpicker-color-default-border-pressed: var(--cds-color-core-grey-06); --cds-monthpicker-color-default-dropshadow: #00000059; --cds-monthpicker-color-default-text-idle: var(--cds-color-core-grey-15); --cds-monthpicker-color-default-text-insensitive: var(--cds-color-core-grey-07); --cds-monthpicker-color-today-text-idle: var(--cds-color-core-blue-06); --cds-monthpicker-color-selected-border-idle: var(--cds-color-core-blue-06); --cds-progress-color-background: var(--cds-color-core-blue-06); --cds-progress-color-background-secondary: var(--cds-color-core-grey-04); --cds-progressspinner-color-background: var(--cds-color-core-amber-05); --cds-skeletonpulse-color-background-a: var(--cds-color-core-grey-01); --cds-skeletonpulse-color-background-b: var(--cds-color-core-grey-04); --cds-skeletonpulse-color-background-c: var(--cds-color-core-grey-01); --cds-slider-color-background: var(--cds-color-core-blue-06); --cds-slider-color-background-secondary: var(--cds-color-core-grey-04); --cds-slider-color-background-insensitive: var(--cds-color-core-grey-07); --cds-slider-color-background-hover: #0062DD59; --cds-switch-color-icon: var(--cds-color-core-white); --cds-table-color-resize-border: var(--cds-color-core-grey-15); --cds-table-color-resize-border-secondary: var(--cds-color-core-grey-06); --cds-tabletoolbar-color-background: var(--cds-color-core-grey-03); --cds-tabs-color-background-idle: var(--cds-color-core-grey-01); --cds-tabs-color-background-hover: var(--cds-color-core-grey-02); --cds-titlebar-color-background: var(--cds-color-core-black); --cds-titlebar-color-icon: var(--cds-color-core-white); --cds-titlebar-color-border: var(--cds-color-core-grey-10); --cds-titlebar-color-text: var(--cds-color-core-white); --cds-titlebar-color-text-secondary: var(--cds-color-core-teal-05); --cds-titlebar-color-dropdown-background: var(--cds-color-core-grey-16); --cds-titlebar-color-dropdown-hover: var(--cds-color-core-grey-14); --cds-titlebar-color-dropdown-dropshadow: #000000BF; --cds-togglebuttonbar-color-background-idle: var(--cds-color-core-grey-01); --cds-togglebuttonbar-color-background-hover: var(--cds-color-core-grey-02); --cds-togglebuttonbar-color-background-insensitive: var(--cds-color-core-grey-01); --cds-tooltip-color-background: var(--cds-color-core-white); } [data-cds-theme="dark"] { color-scheme: dark; --cds-color-background: var(--cds-color-core-grey-18); --cds-color-background-secondary: var(--cds-color-core-grey-16); --cds-color-background-hover: var(--cds-color-core-grey-14); --cds-color-background-selected: #0073FF40; --cds-color-background-selectedhover: #0073FF40; --cds-color-background-none: var(--cds-color-core-none); --cds-color-text: var(--cds-color-core-white); --cds-color-text-secondary: var(--cds-color-core-grey-07); --cds-color-icon-strong: var(--cds-color-core-white); --cds-color-icon-moderate: var(--cds-color-core-grey-07); --cds-color-border-strong: var(--cds-color-core-grey-03); --cds-color-border-moderate: var(--cds-color-core-grey-08); --cds-color-border-subtle: var(--cds-color-core-grey-12); --cds-color-link-text-idle: var(--cds-color-core-blue-03); --cds-color-link-text-hover: var(--cds-color-core-blue-02); --cds-color-link-text-visited: var(--cds-color-core-purple-04); --cds-color-link-icon-idle: var(--cds-color-core-blue-03); --cds-color-link-icon-hover: var(--cds-color-core-blue-02); --cds-color-link-icon-visited: var(--cds-color-core-purple-04); --cds-color-scrollbar-bar: var(--cds-color-core-grey-09); --cds-color-scrollbar-track: var(--cds-color-core-none); --cds-color-overlay-background: #000000BF; --cds-color-inverse-background: var(--cds-color-core-white); --cds-color-inverse-text: var(--cds-color-core-grey-15); --cds-color-inverse-icon: var(--cds-color-core-grey-15); --cds-color-dropshadow-default: #000000BF; --cds-color-popover-background: var(--cds-color-core-grey-16); --cds-color-highlighttext-background: var(--cds-color-core-blue-04); --cds-color-highlighttext-text: var(--cds-color-core-white); --cds-color-indicator-greya-background: var(--cds-color-core-grey-13); --cds-color-indicator-greya-text: var(--cds-color-core-white); --cds-color-indicator-greyb-background: var(--cds-color-core-grey-10); --cds-color-indicator-greyb-text: var(--cds-color-core-white); --cds-color-indicator-green-background: var(--cds-color-core-green-03); --cds-color-indicator-green-text: var(--cds-color-core-grey-15); --cds-color-indicator-blue-background: var(--cds-color-core-blue-02); --cds-color-indicator-blue-text: var(--cds-color-core-grey-15); --cds-color-indicator-teal-background: var(--cds-color-core-teal-06); --cds-color-indicator-teal-text: var(--cds-color-core-grey-15); --cds-color-indicator-purple-background: var(--cds-color-core-purple-04); --cds-color-indicator-purple-text: var(--cds-color-core-black); --cds-color-indicator-red-background: var(--cds-color-core-red-05); --cds-color-indicator-red-text: var(--cds-color-core-white); --cds-color-indicator-magenta-background: var(--cds-color-core-magenta-03); --cds-color-indicator-magenta-text: var(--cds-color-core-black); --cds-color-indicator-yellow-background: var(--cds-color-core-yellow-03); --cds-color-indicator-yellow-text: var(--cds-color-core-grey-15); --cds-color-indicator-orange-background: var(--cds-color-core-orange-04); --cds-color-indicator-orange-text: var(--cds-color-core-black); --cds-color-indicator-amber-background: var(--cds-color-core-amber-04); --cds-color-indicator-amber-text: var(--cds-color-core-grey-15); --cds-color-placeholder-text: var(--cds-color-core-grey-07); --cds-color-insensitive-background: var(--cds-color-core-grey-13); --cds-color-insensitive-text: var(--cds-color-core-grey-09); --cds-color-insensitive-icon: var(--cds-color-core-grey-10); --cds-color-insensitive-border: var(--cds-color-core-grey-12); --cds-color-readonly-background: var(--cds-color-core-none); --cds-color-readonly-text: var(--cds-color-core-white); --cds-color-readonly-icon: var(--cds-color-core-grey-10); --cds-color-readonly-border: var(--cds-color-core-grey-12); --cds-color-focus-border: var(--cds-color-core-blue-06); --cds-color-destruction-text: var(--cds-color-core-white); --cds-color-destruction-icon: var(--cds-color-core-white); --cds-color-destruction-background-idle: var(--cds-color-core-red-05); --cds-color-destruction-background-hover: var(--cds-color-core-red-04); --cds-color-destruction-background-pressed: var(--cds-color-core-red-06); --cds-color-selectedgraphics-background-primary: var(--cds-color-core-blue-06); --cds-color-selectedgraphics-background-secondary: var(--cds-color-core-blue-06); --cds-color-success-text: var(--cds-color-core-green-05); --cds-color-success-icon: var(--cds-color-core-green-06); --cds-color-success-border: var(--cds-color-core-green-06); --cds-color-success-background-idle: #002C09A6; --cds-color-success-background-hover: var(--cds-color-core-green-09); --cds-color-success-background-selected: #002C09A6; --cds-color-success-backgroundbar-selected: var(--cds-color-core-blue-06); --cds-color-successpanel-text: var(--cds-color-core-grey-15); --cds-color-successpanel-icon: var(--cds-color-core-grey-15); --cds-color-successpanel-link: var(--cds-color-core-grey-15); --cds-color-successpanel-border-moderate: var(--cds-color-core-green-06); --cds-color-successpanel-border-subtle: var(--cds-color-core-green-05); --cds-color-successpanel-background-idle: var(--cds-color-core-green-03); --cds-color-successpanel-background-hover: var(--cds-color-core-green-02); --cds-color-warning-text: var(--cds-color-core-yellow-03); --cds-color-warning-icon: var(--cds-color-core-yellow-03); --cds-color-warning-icon-secondary: var(--cds-color-core-grey-18); --cds-color-warning-border: var(--cds-color-core-yellow-03); --cds-color-warning-background-idle: #393200A6; --cds-color-warning-background-hover: var(--cds-color-core-yellow-09); --cds-color-warning-background-selected: #393200A6; --cds-color-warning-backgroundbar-selected: var(--cds-color-core-blue-06); --cds-color-warningpanel-text: var(--cds-color-core-grey-15); --cds-color-warningpanel-icon: var(--cds-color-core-grey-15); --cds-color-warningpanel-link: var(--cds-color-core-grey-15); --cds-color-warningpanel-border-moderate: var(--cds-color-core-yellow-07); --cds-color-warningpanel-border-subtle: var(--cds-color-core-yellow-06); --cds-color-warningpanel-background-idle: var(--cds-color-core-yellow-03); --cds-color-warningpanel-background-hover: var(--cds-color-core-yellow-02); --cds-color-error-text: var(--cds-color-core-red-03); --cds-color-error-icon: var(--cds-color-core-red-05); --cds-color-error-border: var(--cds-color-core-red-05); --cds-color-error-background-idle: #390014A6; --cds-color-error-background-hover: var(--cds-color-core-red-09); --cds-color-error-background-selected: #390014A6; --cds-color-error-backgroundbar-selected: var(--cds-color-core-blue-06); --cds-color-errorpanel-text: var(--cds-color-core-white); --cds-color-errorpanel-icon: var(--cds-color-core-white); --cds-color-errorpanel-link: var(--cds-color-core-white); --cds-color-errorpanel-border-moderate: var(--cds-color-core-red-07); --cds-color-errorpanel-border-subtle: var(--cds-color-core-red-06); --cds-color-errorpanel-background-idle: var(--cds-color-core-red-05); --cds-color-errorpanel-background-hover: var(--cds-color-core-red-04); --cds-color-information-text: var(--cds-color-core-white); --cds-color-information-icon-strong: var(--cds-color-core-white); --cds-color-information-background-idle: var(--cds-color-core-grey-14); --cds-color-informationpanel-text: var(--cds-color-core-grey-15); --cds-color-informationpanel-icon: var(--cds-color-core-grey-15); --cds-color-informationpanel-link: var(--cds-color-core-grey-15); --cds-color-informationpanel-border-moderate: var(--cds-color-core-blue-06); --cds-color-informationpanel-border-subtle: var(--cds-color-core-blue-03); --cds-color-informationpanel-background-idle: var(--cds-color-core-blue-02); --cds-color-informationpanel-background-hover: var(--cds-color-core-blue-01); --cds-color-progress-text: var(--cds-color-core-purple-06); --cds-color-progress-icon: var(--cds-color-core-purple-06); --cds-color-progress-border: var(--cds-color-core-purple-06); --cds-color-progress-background-idle: #392149A6; --cds-color-progress-background-hover: var(--cds-color-core-purple-09); --cds-color-progress-background-selected: #392149A6; --cds-color-progress-backgroundbar-selected: var(--cds-color-core-blue-06);--cds-button-primary-color-text: var(--cds-color-core-white); --cds-button-primary-color-text-idle: var(--cds-color-core-white); --cds-button-primary-color-text-hover: var(--cds-color-core-white); --cds-button-primary-color-text-pressed: var(--cds-color-core-white); --cds-button-primary-color-icon: var(--cds-color-core-white); --cds-button-primary-color-icon-idle: var(--cds-color-core-white); --cds-button-primary-color-icon-hover: var(--cds-color-core-white); --cds-button-primary-color-icon-pressed: var(--cds-color-core-white); --cds-button-primary-color-border: var(--cds-color-core-none); --cds-button-primary-color-background-idle: var(--cds-color-core-blue-06); --cds-button-primary-color-background-hover: var(--cds-color-core-blue-04); --cds-button-primary-color-background-pressed: var(--cds-color-core-blue-07); --cds-button-secondary-color-text-idle: var(--cds-color-core-white); --cds-button-secondary-color-text-hover: var(--cds-color-core-white); --cds-button-secondary-color-text-pressed: var(--cds-color-core-white); --cds-button-secondary-color-icon-idle: var(--cds-color-core-white); --cds-button-secondary-color-icon-hover: var(--cds-color-core-white); --cds-button-secondary-color-icon-pressed: var(--cds-color-core-white); --cds-button-secondary-color-background-idle: var(--cds-color-core-blue-09); --cds-button-secondary-color-background-hover: var(--cds-color-core-blue-07); --cds-button-secondary-color-background-pressed: var(--cds-color-core-blue-08); --cds-button-secondary-color-border: var(--cds-color-core-none); --cds-button-tertiary-color-text-idle: var(--cds-color-core-blue-03); --cds-button-tertiary-color-text-hover: var(--cds-color-core-white); --cds-button-tertiary-color-text-pressed: var(--cds-color-core-white); --cds-button-tertiary-color-icon-idle: var(--cds-color-core-blue-03); --cds-button-tertiary-color-icon-hover: var(--cds-color-core-white); --cds-button-tertiary-color-icon-pressed: var(--cds-color-core-white); --cds-button-tertiary-color-background-idle: var(--cds-color-core-none); --cds-button-tertiary-color-background-hover: var(--cds-color-core-blue-07); --cds-button-tertiary-color-background-pressed: var(--cds-color-core-blue-08); --cds-button-tertiary-color-border: var(--cds-color-core-none); --cds-button-destruction-color-text: var(--cds-color-core-white); --cds-button-destruction-color-text-idle: var(--cds-color-core-white); --cds-button-destruction-color-text-hover: var(--cds-color-core-white); --cds-button-destruction-color-text-pressed: var(--cds-color-core-white); --cds-button-destruction-color-icon: var(--cds-color-core-white); --cds-button-destruction-color-icon-idle: var(--cds-color-core-white); --cds-button-destruction-color-icon-hover: var(--cds-color-core-white); --cds-button-destruction-color-icon-pressed: var(--cds-color-core-white); --cds-button-destruction-color-border: var(--cds-color-core-none); --cds-button-destruction-color-background-idle: var(--cds-color-core-red-05); --cds-button-destruction-color-background-hover: var(--cds-color-core-red-04); --cds-button-destruction-color-background-pressed: var(--cds-color-core-red-06); --cds-button-tertiaryicon-color-icon: var(--cds-color-core-white); --cds-button-tertiaryicon-color-background-idle: var(--cds-color-core-none); --cds-button-tertiaryicon-color-background-hover: var(--cds-color-core-blue-07); --cds-button-tertiaryicon-color-background-pressed: var(--cds-color-core-blue-08); --cds-button-tertiaryicon-color-border: var(--cds-color-core-none); --cds-color-chart-dot-a: var(--cds-color-core-white); --cds-color-chart-dot-b: var(--cds-color-core-blue-03); --cds-color-chart-dot-c: var(--cds-color-core-orange-04); --cds-color-chart-dot-d: var(--cds-color-core-purple-04); --cds-color-chart-dot-e: var(--cds-color-core-yellow-04); --cds-color-chart-dot-f: var(--cds-color-core-teal-04); --cds-color-chart-dot-g: var(--cds-color-core-amber-04); --cds-color-chart-dot-h: var(--cds-color-core-magenta-04); --cds-color-chart-dot-i: var(--cds-color-core-green-04); --cds-color-chart-dot-j: var(--cds-color-core-purple-06); --cds-color-chart-dot-k: var(--cds-color-core-yellow-06); --cds-color-chart-dot-l: var(--cds-color-core-teal-06); --cds-color-chart-dot-m: var(--cds-color-core-red-04); --cds-color-chart-dot-n: var(--cds-color-core-blue-05); --cds-color-chart-dot-o: var(--cds-color-core-green-06); --cds-color-chart-dot-p: var(--cds-color-core-magenta-06); --cds-color-chart-dot-q: var(--cds-color-core-orange-06); --cds-color-chart-dot-r: var(--cds-color-core-grey-06); --cds-color-chart-dot-s: var(--cds-color-core-amber-06); --cds-color-chart-dot-t: var(--cds-color-core-red-06); --cds-color-chart-line-a: var(--cds-color-core-white); --cds-color-chart-line-b: var(--cds-color-core-blue-03); --cds-color-chart-line-c: var(--cds-color-core-orange-04); --cds-color-chart-line-d: var(--cds-color-core-purple-04); --cds-color-chart-line-e: var(--cds-color-core-yellow-04); --cds-color-chart-line-f: var(--cds-color-core-teal-04); --cds-color-chart-line-g: var(--cds-color-core-amber-04); --cds-color-chart-line-h: var(--cds-color-core-magenta-04); --cds-color-chart-line-i: var(--cds-color-core-green-04); --cds-color-chart-line-j: var(--cds-color-core-purple-06); --cds-color-chart-line-k: var(--cds-color-core-yellow-06); --cds-color-chart-line-l: var(--cds-color-core-teal-06); --cds-color-chart-line-m: var(--cds-color-core-red-04); --cds-color-chart-line-n: var(--cds-color-core-blue-05); --cds-color-chart-line-o: var(--cds-color-core-green-06); --cds-color-chart-line-p: var(--cds-color-core-magenta-06); --cds-color-chart-line-q: var(--cds-color-core-orange-06); --cds-color-chart-line-r: var(--cds-color-core-grey-06); --cds-color-chart-line-s: var(--cds-color-core-amber-06); --cds-color-chart-line-t: var(--cds-color-core-red-06); --cds-color-chart-bar-a: var(--cds-color-core-grey-08); --cds-color-chart-bar-b: var(--cds-color-core-blue-07); --cds-color-chart-bar-c: var(--cds-color-core-orange-07); --cds-color-chart-bar-d: var(--cds-color-core-purple-07); --cds-color-chart-bar-e: var(--cds-color-core-yellow-07); --cds-color-chart-bar-f: var(--cds-color-core-teal-07); --cds-color-chart-bar-g: var(--cds-color-core-amber-07); --cds-color-chart-bar-h: var(--cds-color-core-magenta-07); --cds-color-chart-bar-i: var(--cds-color-core-green-07); --cds-color-chart-bar-j: var(--cds-color-core-purple-09); --cds-color-chart-bar-k: var(--cds-color-core-yellow-09); --cds-color-chart-bar-l: var(--cds-color-core-teal-09); --cds-color-chart-bar-m: var(--cds-color-core-red-07); --cds-color-chart-bar-n: var(--cds-color-core-blue-09); --cds-color-chart-bar-o: var(--cds-color-core-green-09); --cds-color-chart-bar-p: var(--cds-color-core-magenta-09); --cds-color-chart-bar-q: var(--cds-color-core-orange-09); --cds-color-chart-bar-r: var(--cds-color-core-grey-11); --cds-color-chart-bar-s: var(--cds-color-core-amber-09); --cds-color-chart-bar-t: var(--cds-color-core-red-09); --cds-color-chart-neutral-high-a: var(--cds-color-core-blue-02); --cds-color-chart-neutral-high-b: var(--cds-color-core-blue-04); --cds-color-chart-neutral-high-c: var(--cds-color-core-blue-06); --cds-color-chart-neutral-high-d: var(--cds-color-core-blue-08); --cds-color-chart-neutral-high-e: var(--cds-color-core-blue-10); --cds-datepicker-color-default-background-idle: var(--cds-color-core-grey-16); --cds-datepicker-color-default-background-hover: var(--cds-color-core-grey-13); --cds-datepicker-color-default-background-focus: var(--cds-color-core-grey-13); --cds-datepicker-color-default-border-pressed: var(--cds-color-core-grey-10); --cds-datepicker-color-default-dropshadow: #000000BF; --cds-datepicker-color-default-text-idle: var(--cds-color-core-white); --cds-datepicker-color-default-text-othermonths: var(--cds-color-core-grey-08); --cds-datepicker-color-default-text-insensitive: var(--cds-color-core-grey-11); --cds-datepicker-color-today-text-idle: var(--cds-color-core-blue-06); --cds-datepicker-color-selected-border-idle: var(--cds-color-core-blue-06); --cds-datepicker-color-selected-text-idle: var(--cds-color-core-white); --cds-datepicker-color-selected-background-hover: var(--cds-color-core-blue-08); --cds-daterange-color-default-background-idle: var(--cds-color-core-grey-16); --cds-daterange-color-default-background-hover: var(--cds-color-core-grey-13); --cds-daterange-color-default-background-focus: var(--cds-color-core-grey-13); --cds-daterange-color-default-border-pressed: var(--cds-color-core-grey-10); --cds-daterange-color-default-dropshadow: #000000BF; --cds-daterange-color-default-text-idle: var(--cds-color-core-white); --cds-daterange-color-default-text-insensitive: var(--cds-color-core-grey-11); --cds-daterange-color-today-text-idle: var(--cds-color-core-blue-06); --cds-daterange-color-inrange-background-idle: var(--cds-color-core-blue-06); --cds-daterange-color-inrange-background-hover: var(--cds-color-core-blue-08); --cds-daterange-color-inrange-border-pressed: var(--cds-color-core-white); --cds-daterange-color-inrange-border-focus: var(--cds-color-core-white); --cds-daterange-color-inrange-text-idle: var(--cds-color-core-white); --cds-daterange-color-rangestartend-background-focus: var(--cds-color-core-grey-13); --cds-daterange-color-rangestartend-border-idle: var(--cds-color-core-blue-06); --cds-datetimepicker-color-default-background-idle: var(--cds-color-core-grey-16); --cds-datetimepicker-color-default-background-hover: var(--cds-color-core-grey-13); --cds-datetimepicker-color-default-background-focus: var(--cds-color-core-grey-13); --cds-datetimepicker-color-default-border-pressed: var(--cds-color-core-grey-10); --cds-datetimepicker-color-default-dropshadow: #000000BF; --cds-datetimepicker-color-default-text-idle: var(--cds-color-core-white); --cds-datetimepicker-color-default-text-othermonths: var(--cds-color-core-grey-08); --cds-datetimepicker-color-default-text-insensitive: var(--cds-color-core-grey-11); --cds-datetimepicker-color-today-text-idle: var(--cds-color-core-blue-06); --cds-datetimepicker-color-selected-border-idle: var(--cds-color-core-blue-06); --cds-dropzone-color-background-selected: #0F2C4F; --cds-dropzone-color-background-inprogress: #0F2C4F; --cds-footer-color-background: var(--cds-color-core-black); --cds-footer-color-border: var(--cds-color-core-grey-10); --cds-footer-color-text: var(--cds-color-core-white); --cds-monthpicker-color-default-background-idle: var(--cds-color-core-grey-16); --cds-monthpicker-color-default-background-hover: var(--cds-color-core-grey-13); --cds-monthpicker-color-default-background-focus: var(--cds-color-core-grey-13); --cds-monthpicker-color-default-border-pressed: var(--cds-color-core-grey-10); --cds-monthpicker-color-default-dropshadow: #000000BF; --cds-monthpicker-color-default-text-idle: var(--cds-color-core-white); --cds-monthpicker-color-default-text-insensitive: var(--cds-color-core-grey-11); --cds-monthpicker-color-today-text-idle: var(--cds-color-core-blue-06); --cds-monthpicker-color-selected-border-idle: var(--cds-color-core-blue-06); --cds-progress-color-background: var(--cds-color-core-blue-06); --cds-progress-color-background-secondary: var(--cds-color-core-grey-12); --cds-progressspinner-color-background: var(--cds-color-core-amber-05); --cds-skeletonpulse-color-background-a: var(--cds-color-core-grey-15); --cds-skeletonpulse-color-background-b: var(--cds-color-core-grey-12); --cds-skeletonpulse-color-background-c: var(--cds-color-core-grey-15); --cds-slider-color-background: var(--cds-color-core-blue-06); --cds-slider-color-background-secondary: var(--cds-color-core-grey-12); --cds-slider-color-background-insensitive: var(--cds-color-core-grey-10); --cds-slider-color-background-hover: #0062DD8C; --cds-switch-color-icon: var(--cds-color-core-white); --cds-table-color-resize-border: var(--cds-color-core-grey-04); --cds-table-color-resize-border-secondary: var(--cds-color-core-grey-10); --cds-tabletoolbar-color-background: var(--cds-color-core-grey-14); --cds-tabs-color-background-idle: var(--cds-color-core-grey-16); --cds-tabs-color-background-hover: var(--cds-color-core-grey-14); --cds-titlebar-color-background: var(--cds-color-core-black); --cds-titlebar-color-icon: var(--cds-color-core-white); --cds-titlebar-color-border: var(--cds-color-core-grey-10); --cds-titlebar-color-text: var(--cds-color-core-white); --cds-titlebar-color-text-secondary: var(--cds-color-core-teal-05); --cds-titlebar-color-dropdown-background: var(--cds-color-core-grey-16); --cds-titlebar-color-dropdown-hover: var(--cds-color-core-grey-14); --cds-titlebar-color-dropdown-dropshadow: #000000BF; --cds-togglebuttonbar-color-background-idle: var(--cds-color-core-grey-16); --cds-togglebuttonbar-color-background-hover: var(--cds-color-core-grey-14); --cds-togglebuttonbar-color-background-insensitive: var(--cds-color-core-grey-16); --cds-tooltip-color-background: var(--cds-color-core-grey-16); } @media(prefers-color-scheme: dark) { :root, :host { color-scheme: dark; --cds-color-background: var(--cds-color-core-grey-18); --cds-color-background-secondary: var(--cds-color-core-grey-16); --cds-color-background-hover: var(--cds-color-core-grey-14); --cds-color-background-selected: #0073FF40; --cds-color-background-selectedhover: #0073FF40; --cds-color-background-none: var(--cds-color-core-none); --cds-color-text: var(--cds-color-core-white); --cds-color-text-secondary: var(--cds-color-core-grey-07); --cds-color-icon-strong: var(--cds-color-core-white); --cds-color-icon-moderate: var(--cds-color-core-grey-07); --cds-color-border-strong: var(--cds-color-core-grey-03); --cds-color-border-moderate: var(--cds-color-core-grey-08); --cds-color-border-subtle: var(--cds-color-core-grey-12); --cds-color-link-text-idle: var(--cds-color-core-blue-03); --cds-color-link-text-hover: var(--cds-color-core-blue-02); --cds-color-link-text-visited: var(--cds-color-core-purple-04); --cds-color-link-icon-idle: var(--cds-color-core-blue-03); --cds-color-link-icon-hover: var(--cds-color-core-blue-02); --cds-color-link-icon-visited: var(--cds-color-core-purple-04); --cds-color-scrollbar-bar: var(--cds-color-core-grey-09); --cds-color-scrollbar-track: var(--cds-color-core-none); --cds-color-overlay-background: #000000BF; --cds-color-inverse-background: var(--cds-color-core-white); --cds-color-inverse-text: var(--cds-color-core-grey-15); --cds-color-inverse-icon: var(--cds-color-core-grey-15); --cds-color-dropshadow-default: #000000BF; --cds-color-popover-background: var(--cds-color-core-grey-16); --cds-color-highlighttext-background: var(--cds-color-core-blue-04); --cds-color-highlighttext-text: var(--cds-color-core-white); --cds-color-indicator-greya-background: var(--cds-color-core-grey-13); --cds-color-indicator-greya-text: var(--cds-color-core-white); --cds-color-indicator-greyb-background: var(--cds-color-core-grey-10); --cds-color-indicator-greyb-text: var(--cds-color-core-white); --cds-color-indicator-green-background: var(--cds-color-core-green-03); --cds-color-indicator-green-text: var(--cds-color-core-grey-15); --cds-color-indicator-blue-background: var(--cds-color-core-blue-02); --cds-color-indicator-blue-text: var(--cds-color-core-grey-15); --cds-color-indicator-teal-background: var(--cds-color-core-teal-06); --cds-color-indicator-teal-text: var(--cds-color-core-grey-15); --cds-color-indicator-purple-background: var(--cds-color-core-purple-04); --cds-color-indicator-purple-text: var(--cds-color-core-black); --cds-color-indicator-red-background: var(--cds-color-core-red-05); --cds-color-indicator-red-text: var(--cds-color-core-white); --cds-color-indicator-magenta-background: var(--cds-color-core-magenta-03); --cds-color-indicator-magenta-text: var(--cds-color-core-black); --cds-color-indicator-yellow-background: var(--cds-color-core-yellow-03); --cds-color-indicator-yellow-text: var(--cds-color-core-grey-15); --cds-color-indicator-orange-background: var(--cds-color-core-orange-04); --cds-color-indicator-orange-text: var(--cds-color-core-black); --cds-color-indicator-amber-background: var(--cds-color-core-amber-04); --cds-color-indicator-amber-text: var(--cds-color-core-grey-15); --cds-color-placeholder-text: var(--cds-color-core-grey-07); --cds-color-insensitive-background: var(--cds-color-core-grey-13); --cds-color-insensitive-text: var(--cds-color-core-grey-09); --cds-color-insensitive-icon: var(--cds-color-core-grey-10); --cds-color-insensitive-border: var(--cds-color-core-grey-12); --cds-color-readonly-background: var(--cds-color-core-none); --cds-color-readonly-text: var(--cds-color-core-white); --cds-color-readonly-icon: var(--cds-color-core-grey-10); --cds-color-readonly-border: var(--cds-color-core-grey-12); --cds-color-focus-border: var(--cds-color-core-blue-06); --cds-color-destruction-text: var(--cds-color-core-white); --cds-color-destruction-icon: var(--cds-color-core-white); --cds-color-destruction-background-idle: var(--cds-color-core-red-05); --cds-color-destruction-background-hover: var(--cds-color-core-red-04); --cds-color-destruction-background-pressed: var(--cds-color-core-red-06); --cds-color-selectedgraphics-background-primary: var(--cds-color-core-blue-06); --cds-color-selectedgraphics-background-secondary: var(--cds-color-core-blue-06); --cds-color-success-text: var(--cds-color-core-green-05); --cds-color-success-icon: var(--cds-color-core-green-06); --cds-color-success-border: var(--cds-color-core-green-06); --cds-color-success-background-idle: #002C09A6; --cds-color-success-background-hover: var(--cds-color-core-green-09); --cds-color-success-background-selected: #002C09A6; --cds-color-success-backgroundbar-selected: var(--cds-color-core-blue-06); --cds-color-successpanel-text: var(--cds-color-core-grey-15); --cds-color-successpanel-icon: var(--cds-color-core-grey-15); --cds-color-successpanel-link: var(--cds-color-core-grey-15); --cds-color-successpanel-border-moderate: var(--cds-color-core-green-06); --cds-color-successpanel-border-subtle: var(--cds-color-core-green-05); --cds-color-successpanel-background-idle: var(--cds-color-core-green-03); --cds-color-successpanel-background-hover: var(--cds-color-core-green-02); --cds-color-warning-text: var(--cds-color-core-yellow-03); --cds-color-warning-icon: var(--cds-color-core-yellow-03); --cds-color-warning-icon-secondary: var(--cds-color-core-grey-18); --cds-color-warning-border: var(--cds-color-core-yellow-03); --cds-color-warning-background-idle: #393200A6; --cds-color-warning-background-hover: var(--cds-color-core-yellow-09); --cds-color-warning-background-selected: #393200A6; --cds-color-warning-backgroundbar-selected: var(--cds-color-core-blue-06); --cds-color-warningpanel-text: var(--cds-color-core-grey-15); --cds-color-warningpanel-icon: var(--cds-color-core-grey-15); --cds-color-warningpanel-link: var(--cds-color-core-grey-15); --cds-color-warningpanel-border-moderate: var(--cds-color-core-yellow-07); --cds-color-warningpanel-border-subtle: var(--cds-color-core-yellow-06); --cds-color-warningpanel-background-idle: var(--cds-color-core-yellow-03); --cds-color-warningpanel-background-hover: var(--cds-color-core-yellow-02); --cds-color-error-text: var(--cds-color-core-red-03); --cds-color-error-icon: var(--cds-color-core-red-05); --cds-color-error-border: var(--cds-color-core-red-05); --cds-color-error-background-idle: #390014A6; --cds-color-error-background-hover: var(--cds-color-core-red-09); --cds-color-error-background-selected: #390014A6; --cds-color-error-backgroundbar-selected: var(--cds-color-core-blue-06); --cds-color-errorpanel-text: var(--cds-color-core-white); --cds-color-errorpanel-icon: var(--cds-color-core-white); --cds-color-errorpanel-link: var(--cds-color-core-white); --cds-color-errorpanel-border-moderate: var(--cds-color-core-red-07); --cds-color-errorpanel-border-subtle: var(--cds-color-core-red-06); --cds-color-errorpanel-background-idle: var(--cds-color-core-red-05); --cds-color-errorpanel-background-hover: var(--cds-color-core-red-04); --cds-color-information-text: var(--cds-color-core-white); --cds-color-information-icon-strong: var(--cds-color-core-white); --cds-color-information-background-idle: var(--cds-color-core-grey-14); --cds-color-informationpanel-text: var(--cds-color-core-grey-15); --cds-color-informationpanel-icon: var(--cds-color-core-grey-15); --cds-color-informationpanel-link: var(--cds-color-core-grey-15); --cds-color-informationpanel-border-moderate: var(--cds-color-core-blue-06); --cds-color-informationpanel-border-subtle: var(--cds-color-core-blue-03); --cds-color-informationpanel-background-idle: var(--cds-color-core-blue-02); --cds-color-informationpanel-background-hover: var(--cds-color-core-blue-01); --cds-color-progress-text: var(--cds-color-core-purple-06); --cds-color-progress-icon: var(--cds-color-core-purple-06); --cds-color-progress-border: var(--cds-color-core-purple-06); --cds-color-progress-background-idle: #392149A6; --cds-color-progress-background-hover: var(--cds-color-core-purple-09); --cds-color-progress-background-selected: #392149A6; --cds-color-progress-backgroundbar-selected: var(--cds-color-core-blue-06);--cds-button-primary-color-text: var(--cds-color-core-white); --cds-button-primary-color-text-idle: var(--cds-color-core-white); --cds-button-primary-color-text-hover: var(--cds-color-core-white); --cds-button-primary-color-text-pressed: var(--cds-color-core-white); --cds-button-primary-color-icon: var(--cds-color-core-white); --cds-button-primary-color-icon-idle: var(--cds-color-core-white); --cds-button-primary-color-icon-hover: var(--cds-color-core-white); --cds-button-primary-color-icon-pressed: var(--cds-color-core-white); --cds-button-primary-color-border: var(--cds-color-core-none); --cds-button-primary-color-background-idle: var(--cds-color-core-blue-06); --cds-button-primary-color-background-hover: var(--cds-color-core-blue-04); --cds-button-primary-color-background-pressed: var(--cds-color-core-blue-07); --cds-button-secondary-color-text-idle: var(--cds-color-core-white); --cds-button-secondary-color-text-hover: var(--cds-color-core-white); --cds-button-secondary-color-text-pressed: var(--cds-color-core-white); --cds-button-secondary-color-icon-idle: var(--cds-color-core-white); --cds-button-secondary-color-icon-hover: var(--cds-color-core-white); --cds-button-secondary-color-icon-pressed: var(--cds-color-core-white); --cds-button-secondary-color-background-idle: var(--cds-color-core-blue-09); --cds-button-secondary-color-background-hover: var(--cds-color-core-blue-07); --cds-button-secondary-color-background-pressed: var(--cds-color-core-blue-08); --cds-button-secondary-color-border: var(--cds-color-core-none); --cds-button-tertiary-color-text-idle: var(--cds-color-core-blue-03); --cds-button-tertiary-color-text-hover: var(--cds-color-core-white); --cds-button-tertiary-color-text-pressed: var(--cds-color-core-white); --cds-button-tertiary-color-icon-idle: var(--cds-color-core-blue-03); --cds-button-tertiary-color-icon-hover: var(--cds-color-core-white); --cds-button-tertiary-color-icon-pressed: var(--cds-color-core-white); --cds-button-tertiary-color-background-idle: var(--cds-color-core-none); --cds-button-tertiary-color-background-hover: var(--cds-color-core-blue-07); --cds-button-tertiary-color-background-pressed: var(--cds-color-core-blue-08); --cds-button-tertiary-color-border: var(--cds-color-core-none); --cds-button-destruction-color-text: var(--cds-color-core-white); --cds-button-destruction-color-text-idle: var(--cds-color-core-white); --cds-button-destruction-color-text-hover: var(--cds-color-core-white); --cds-button-destruction-color-text-pressed: var(--cds-color-core-white); --cds-button-destruction-color-icon: var(--cds-color-core-white); --cds-button-destruction-color-icon-idle: var(--cds-color-core-white); --cds-button-destruction-color-icon-hover: var(--cds-color-core-white); --cds-button-destruction-color-icon-pressed: var(--cds-color-core-white); --cds-button-destruction-color-border: var(--cds-color-core-none); --cds-button-destruction-color-background-idle: var(--cds-color-core-red-05); --cds-button-destruction-color-background-hover: var(--cds-color-core-red-04); --cds-button-destruction-color-background-pressed: var(--cds-color-core-red-06); --cds-button-tertiaryicon-color-icon: var(--cds-color-core-white); --cds-button-tertiaryicon-color-background-idle: var(--cds-color-core-none); --cds-button-tertiaryicon-color-background-hover: var(--cds-color-core-blue-07); --cds-button-tertiaryicon-color-background-pressed: var(--cds-color-core-blue-08); --cds-button-tertiaryicon-color-border: var(--cds-color-core-none); --cds-color-chart-dot-a: var(--cds-color-core-white); --cds-color-chart-dot-b: var(--cds-color-core-blue-03); --cds-color-chart-dot-c: var(--cds-color-core-orange-04); --cds-color-chart-dot-d: var(--cds-color-core-purple-04); --cds-color-chart-dot-e: var(--cds-color-core-yellow-04); --cds-color-chart-dot-f: var(--cds-color-core-teal-04); --cds-color-chart-dot-g: var(--cds-color-core-amber-04); --cds-color-chart-dot-h: var(--cds-color-core-magenta-04); --cds-color-chart-dot-i: var(--cds-color-core-green-04); --cds-color-chart-dot-j: var(--cds-color-core-purple-06); --cds-color-chart-dot-k: var(--cds-color-core-yellow-06); --cds-color-chart-dot-l: var(--cds-color-core-teal-06); --cds-color-chart-dot-m: var(--cds-color-core-red-04); --cds-color-chart-dot-n: var(--cds-color-core-blue-05); --cds-color-chart-dot-o: var(--cds-color-core-green-06); --cds-color-chart-dot-p: var(--cds-color-core-magenta-06); --cds-color-chart-dot-q: var(--cds-color-core-orange-06); --cds-color-chart-dot-r: var(--cds-color-core-grey-06); --cds-color-chart-dot-s: var(--cds-color-core-amber-06); --cds-color-chart-dot-t: var(--cds-color-core-red-06); --cds-color-chart-line-a: var(--cds-color-core-white); --cds-color-chart-line-b: var(--cds-color-core-blue-03); --cds-color-chart-line-c: var(--cds-color-core-orange-04); --cds-color-chart-line-d: var(--cds-color-core-purple-04); --cds-color-chart-line-e: var(--cds-color-core-yellow-04); --cds-color-chart-line-f: var(--cds-color-core-teal-04); --cds-color-chart-line-g: var(--cds-color-core-amber-04); --cds-color-chart-line-h: var(--cds-color-core-magenta-04); --cds-color-chart-line-i: var(--cds-color-core-green-04); --cds-color-chart-line-j: var(--cds-color-core-purple-06); --cds-color-chart-line-k: var(--cds-color-core-yellow-06); --cds-color-chart-line-l: var(--cds-color-core-teal-06); --cds-color-chart-line-m: var(--cds-color-core-red-04); --cds-color-chart-line-n: var(--cds-color-core-blue-05); --cds-color-chart-line-o: var(--cds-color-core-green-06); --cds-color-chart-line-p: var(--cds-color-core-magenta-06); --cds-color-chart-line-q: var(--cds-color-core-orange-06); --cds-color-chart-line-r: var(--cds-color-core-grey-06); --cds-color-chart-line-s: var(--cds-color-core-amber-06); --cds-color-chart-line-t: var(--cds-color-core-red-06); --cds-color-chart-bar-a: var(--cds-color-core-grey-08); --cds-color-chart-bar-b: var(--cds-color-core-blue-07); --cds-color-chart-bar-c: var(--cds-color-core-orange-07); --cds-color-chart-bar-d: var(--cds-color-core-purple-07); --cds-color-chart-bar-e: var(--cds-color-core-yellow-07); --cds-color-chart-bar-f: var(--cds-color-core-teal-07); --cds-color-chart-bar-g: var(--cds-color-core-amber-07); --cds-color-chart-bar-h: var(--cds-color-core-magenta-07); --cds-color-chart-bar-i: var(--cds-color-core-green-07); --cds-color-chart-bar-j: var(--cds-color-core-purple-09); --cds-color-chart-bar-k: var(--cds-color-core-yellow-09); --cds-color-chart-bar-l: var(--cds-color-core-teal-09); --cds-color-chart-bar-m: var(--cds-color-core-red-07); --cds-color-chart-bar-n: var(--cds-color-core-blue-09); --cds-color-chart-bar-o: var(--cds-color-core-green-09); --cds-color-chart-bar-p: var(--cds-color-core-magenta-09); --cds-color-chart-bar-q: var(--cds-color-core-orange-09); --cds-color-chart-bar-r: var(--cds-color-core-grey-11); --cds-color-chart-bar-s: var(--cds-color-core-amber-09); --cds-color-chart-bar-t: var(--cds-color-core-red-09); --cds-color-chart-neutral-high-a: var(--cds-color-core-blue-02); --cds-color-chart-neutral-high-b: var(--cds-color-core-blue-04); --cds-color-chart-neutral-high-c: var(--cds-color-core-blue-06); --cds-color-chart-neutral-high-d: var(--cds-color-core-blue-08); --cds-color-chart-neutral-high-e: var(--cds-color-core-blue-10); --cds-datepicker-color-default-background-idle: var(--cds-color-core-grey-16); --cds-datepicker-color-default-background-hover: var(--cds-color-core-grey-13); --cds-datepicker-color-default-background-focus: var(--cds-color-core-grey-13); --cds-datepicker-color-default-border-pressed: var(--cds-color-core-grey-10); --cds-datepicker-color-default-dropshadow: #000000BF; --cds-datepicker-color-default-text-idle: var(--cds-color-core-white); --cds-datepicker-color-default-text-othermonths: var(--cds-color-core-grey-08); --cds-datepicker-color-default-text-insensitive: var(--cds-color-core-grey-11); --cds-datepicker-color-today-text-idle: var(--cds-color-core-blue-06); --cds-datepicker-color-selected-border-idle: var(--cds-color-core-blue-06); --cds-datepicker-color-selected-text-idle: var(--cds-color-core-white); --cds-datepicker-color-selected-background-hover: var(--cds-color-core-blue-08); --cds-daterange-color-default-background-idle: var(--cds-color-core-grey-16); --cds-daterange-color-default-background-hover: var(--cds-color-core-grey-13); --cds-daterange-color-default-background-focus: var(--cds-color-core-grey-13); --cds-daterange-color-default-border-pressed: var(--cds-color-core-grey-10); --cds-daterange-color-default-dropshadow: #000000BF; --cds-daterange-color-default-text-idle: var(--cds-color-core-white); --cds-daterange-color-default-text-insensitive: var(--cds-color-core-grey-11); --cds-daterange-color-today-text-idle: var(--cds-color-core-blue-06); --cds-daterange-color-inrange-background-idle: var(--cds-color-core-blue-06); --cds-daterange-color-inrange-background-hover: var(--cds-color-core-blue-08); --cds-daterange-color-inrange-border-pressed: var(--cds-color-core-white); --cds-daterange-color-inrange-border-focus: var(--cds-color-core-white); --cds-daterange-color-inrange-text-idle: var(--cds-color-core-white); --cds-daterange-color-rangestartend-background-focus: var(--cds-color-core-grey-13); --cds-daterange-color-rangestartend-border-idle: var(--cds-color-core-blue-06); --cds-datetimepicker-color-default-background-idle: var(--cds-color-core-grey-16); --cds-datetimepicker-color-default-background-hover: var(--cds-color-core-grey-13); --cds-datetimepicker-color-default-background-focus: var(--cds-color-core-grey-13); --cds-datetimepicker-color-default-border-pressed: var(--cds-color-core-grey-10); --cds-datetimepicker-color-default-dropshadow: #000000BF; --cds-datetimepicker-color-default-text-idle: var(--cds-color-core-white); --cds-datetimepicker-color-default-text-othermonths: var(--cds-color-core-grey-08); --cds-datetimepicker-color-default-text-insensitive: var(--cds-color-core-grey-11); --cds-datetimepicker-color-today-text-idle: var(--cds-color-core-blue-06); --cds-datetimepicker-color-selected-border-idle: var(--cds-color-core-blue-06); --cds-dropzone-color-background-selected: #0F2C4F; --cds-dropzone-color-background-inprogress: #0F2C4F; --cds-footer-color-background: var(--cds-color-core-black); --cds-footer-color-border: var(--cds-color-core-grey-10); --cds-footer-color-text: var(--cds-color-core-white); --cds-monthpicker-color-default-background-idle: var(--cds-color-core-grey-16); --cds-monthpicker-color-default-background-hover: var(--cds-color-core-grey-13); --cds-monthpicker-color-default-background-focus: var(--cds-color-core-grey-13); --cds-monthpicker-color-default-border-pressed: var(--cds-color-core-grey-10); --cds-monthpicker-color-default-dropshadow: #000000BF; --cds-monthpicker-color-default-text-idle: var(--cds-color-core-white); --cds-monthpicker-color-default-text-insensitive: var(--cds-color-core-grey-11); --cds-monthpicker-color-today-text-idle: var(--cds-color-core-blue-06); --cds-monthpicker-color-selected-border-idle: var(--cds-color-core-blue-06); --cds-progress-color-background: var(--cds-color-core-blue-06); --cds-progress-color-background-secondary: var(--cds-color-core-grey-12); --cds-progressspinner-color-background: var(--cds-color-core-amber-05); --cds-skeletonpulse-color-background-a: var(--cds-color-core-grey-15); --cds-skeletonpulse-color-background-b: var(--cds-color-core-grey-12); --cds-skeletonpulse-color-background-c: var(--cds-color-core-grey-15); --cds-slider-color-background: var(--cds-color-core-blue-06); --cds-slider-color-background-secondary: var(--cds-color-core-grey-12); --cds-slider-color-background-insensitive: var(--cds-color-core-grey-10); --cds-slider-color-background-hover: #0062DD8C; --cds-switch-color-icon: var(--cds-color-core-white); --cds-table-color-resize-border: var(--cds-color-core-grey-04); --cds-table-color-resize-border-secondary: var(--cds-color-core-grey-10); --cds-tabletoolbar-color-background: var(--cds-color-core-grey-14); --cds-tabs-color-background-idle: var(--cds-color-core-grey-16); --cds-tabs-color-background-hover: var(--cds-color-core-grey-14); --cds-titlebar-color-background: var(--cds-color-core-black); --cds-titlebar-color-icon: var(--cds-color-core-white); --cds-titlebar-color-border: var(--cds-color-core-grey-10); --cds-titlebar-color-text: var(--cds-color-core-white); --cds-titlebar-color-text-secondary: var(--cds-color-core-teal-05); --cds-titlebar-color-dropdown-background: var(--cds-color-core-grey-16); --cds-titlebar-color-dropdown-hover: var(--cds-color-core-grey-14); --cds-titlebar-color-dropdown-dropshadow: #000000BF; --cds-togglebuttonbar-color-background-idle: var(--cds-color-core-grey-16); --cds-togglebuttonbar-color-background-hover: var(--cds-color-core-grey-14); --cds-togglebuttonbar-color-background-insensitive: var(--cds-color-core-grey-16); --cds-tooltip-color-background: var(--cds-color-core-grey-16); } } } } @layer normalize { /* Normalize fixes inconsistencies between browsers. It is not applying Crescent Styles at this point todo - this could be imported from an npm package instead of copying here */ /*! modern-normalize v2.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ /* Document ======== */ /** Use a better box model (opinionated). */ *, ::before, ::after { box-sizing: border-box; } html { /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */ font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; line-height: 1.15; /* 1. Correct the line height in all browsers. */ -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */ -moz-tab-size: 4; /* 3. Use a more readable tab size (opinionated). */ tab-size: 4; /* 3 */ } /* Sections ======== */ body { margin: 0; /* Remove the margin in all browsers. */ } /* Grouping content ================ */ /** 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ } /* Text-level semantics ==================== */ /** Add the correct text decoration in Chrome, Edge, and Safari. */ abbr[title] { text-decoration: underline dotted; } /** Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /** 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) 2. Correct the odd 'em' font sizing in all browsers. */ code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** Add the correct font size in all browsers. */ small { font-size: 80%; } /** Prevent 'sub' and 'sup' elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Tabular data ============ */ /** 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ } /* Forms ===== */ /** 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** Remove the inheritance of text transform in Edge and Firefox. */ button, select { text-transform: none; } /** Correct the inability to style clickable types in iOS and Safari. */ button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; } /** Remove the inner border and padding in Firefox. */ ::-moz-focus-inner { border-style: none; padding: 0; } /** Restore the focus styles unset by the previous rule. */ :-moz-focusring { outline: 1px dotted ButtonText; } /** Remove the additional ':invalid' styles in Firefox. See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 */ :-moz-ui-invalid { box-shadow: none; } /** Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. */ legend { padding: 0; } /** Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /** Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /** 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to 'inherit' in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive =========== */ /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } } @layer reset { /** After Normalize has fixed inconsistencies between browsers, there are some sensible resets to be added This is largely based around the opinions of the Tailwind reset: https://tailwindcss.com/docs/preflight This is chosen as it has some sensible defaults for removing default styling, forcing you to set correct semantics but also making it easier to develop with */ hr { /* Ensure horizontal rules are visible by default. */ border-top-width: 1px; } /* Remove the default font size and weight for headings. This is to ensure that you use the correct semantic element and don't choose the incorrect one based only on size. Apply the correct `.cds-h1` etc. styles to choose the size. To get back all the default heading styles and spacing in large blocks of prose, use the `.cds-prose` component */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; text-wrap: balance; } /* Removes the default spacing and border for appropriate elements, as this is the most common state development requires. Spacing is usually handled by a surrounding layout component. */ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; border: 0; } legend { padding: 0; } /* Practically all uses of lists don't actually want list styles. */ ol, ul, menu { list-style-type: ''; /* "list-style: none" removes list semantics from screen readers */ margin: 0; padding: 0; } /* Reset default styling for dialogs. */ dialog { padding: 0; } /* Prevent resizing textareas horizontally by default. */ textarea { resize: vertical; } /* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ img, video, canvas, audio, iframe, embed, object { display: block; /* 1 */ vertical-align: middle; /* 2 */ } /* Constrain images and videos to the parent width. (https://github.com/mozdevs/cssremedy/issues/14) */ img, video { max-width: 100%; } /* Make elements with the HTML hidden attribute stay hidden by default */ [hidden] { display: none; } } @layer baseline { /* Crescent styles for default elements */ :root { interpolate-size: allow-keywords; /* allow animation to auto sizes (in browsers that support it) */ } body { color: var(--cds-color-text); background-color: var(--cds-color-background); /* https://stackoverflow.com/a/45979108 */ -moz-osx-font-smoothing: grayscale; /*(For Firefox)*/ -webkit-font-smoothing: antialiased; /*(For Chrome and Safari)*/ font-family: var(--cds-font-base-family); } /* Scrollbars: Set the color for all scrollbars, but don't set the width on the root because Safari puts the app-theme-color under the scrollbar if it is set to thin https://bbgithub.dev.bloomberg.com/Crescent/design-tokens/issues/104 */ * { scrollbar-color: var(--cds-color-scrollbar-bar) var(--cds-color-scrollbar-track); &:not(:root) { scrollbar-width: thin; } } /* Webkit scrollbar definitions */ ::-webkit-scrollbar { width: var(--cds-size-core-020-px); } ::-webkit-scrollbar:horizontal { height: var(--cds-size-core-020-px); } ::-webkit-scrollbar-thumb { border-radius: 4px; background-color: var(--cds-color-scrollbar-bar); } ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background-color: var(--cds-color-scrollbar-track); } .cds-monospace, code { font-family: var(--cds-font-code-family); font-size: 0.875em; } strong, b { font-weight: var(--cds-font-core-weight-bold); } /** Crescent Link Styles The default link will just be the size of the surrounding text These styles can used on buttons too, so that buttons can look like links. This means links and button styles have to undo all of each others settings. */ a, .cds-link, button.cds-link { font-size: inherit; line-height: inherit; font-weight: inherit; text-decoration: var(--cds-font-link-default-decoration); color: var(--cds-color-link-text-idle); background: none; border: none; cursor: pointer; padding: 0; display: inline; min-width: auto; min-height: auto; box-shadow: none; } a:visited, .cds-link:visited, button.cds-link:visited { color: var(--cds-color-link-text-visited); background: none; } a:not(:disabled, .cds-disabled):hover, a:not(:disabled, .cds-disabled):active, .cds-link:not(:disabled, .cds-disabled):hover, .cds-link:not(:disabled, .cds-disabled):active { color: var(--cds-color-link-text-hover); background: none; } :focus { outline: none; } :focus-visible { outline: var(--cds-color-focus-border) solid 2px; } /* Normalize sets Firefox's button targeting with quite high specificity, * so we have to purposefully set (only) the outline with the same selector. */ button:-moz-focusring, [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring { outline: var(--cds-color-focus-border) solid 2px; } /** Crescent Button styles These styles can used on links too, so that links can look like buttons. This means links and button styles have to undo all of each others settings. A default button is secondary styles */ button:not(:where(.cds-neutral)), .cds-button, a.cds-button, [class*="cds-button-"], ::file-selector-button { --_cds-button-border: 1px; --_cds-button-color-text: var(--cds-button-secondary-color-text-idle); --_cds-button-color-border: var(--cds-button-secondary-color-border); --_cds-button-color-background: var(--cds-button-secondary-color-background-idle); --_cds-button-hover-text: var(--cds-button-secondary-color-text-hover); --_cds-button-hover-background: var(--cds-button-secondary-color-background-hover); --_cds-button-active-text: var(--cds-button-secondary-color-text-pressed); --_cds-button-active-background: var(--cds-button-secondary-color-background-pressed); -webkit-appearance: none; appearance: none; border-radius: 0; text-decoration: none; display: inline-flex; align-items: center; gap: var(--cds-button-size-icongap); touch-action: manipulation; user-select: none; inline-size: fit-content; font-family: inherit; flex-shrink: 0; border: solid var(--_cds-button-border) var(--_cds-button-color-border); /** Buttons always have their label centered so this is simple */ padding: var(--cds-button-size-padding-top) var(--cds-button-size-padding-right) var(--cds-button-size-padding-bottom) var(--cds-button-size-padding-left); font-size: var(--cds-font-button-label-fontsize); line-height: var(--cds-font-button-label-lineheight); font-weight: var(--cds-font-button-label-weight); color: var(--_cds-button-color-text); border-color: var(--_cds-button-color-border); background: var(--_cds-button-color-background); } .cds-button, a.cds-button, [class*="cds-button-"] { /* Only put these on explicitly opted in Crescent Button styles, so that other global buttons don't break */ min-height: var(--cds-button-size-minheight); min-width: fit-content; } :is(.cds-button, a.cds-button):has(> .bb-icon:only-child), :is(.cds-button, a.cds-button):has(> .cds-icon:only-child), :is(.cds-button, a.cds-button):has(> .cds-button__icon:only-child) { justify-content: center; } .cds-button .bb-icon, .cds-button .cds-icon, .cds-button__icon { width: 1em; height: 1em; } button:not(:disabled, .cds-disabled):not(:where(.cds-neutral)):hover, .cds-button:not(:disabled, .cds-disabled):not(:where(.cds-neutral)):hover, a.cds-button:not(:disabled, .cds-disabled):not(:where(.cds-neutral)):hover, button:not(:disabled, .cds-disabled):not(:where(.cds-neutral)):focus-visible, .cds-button:not(:disabled, .cds-disabled):not(:where(.cds-neutral)):focus-visible, a.cds-button:not(:disabled, .cds-disabled):not(:where(.cds-neutral)):focus-visible { color: var(--_cds-button-hover-text); background: var(--_cds-button-hover-background); } button:not(:disabled, .cds-disabled):not(:where(.cds-neutral)):active, button:not(:disabled, .cds-disabled):not(:where(.cds-neutral)).cds-active, .cds-button:not(:disabled, .cds-disabled):not(:where(.cds-neutral)):active, .cds-button:not(:disabled, .cds-disabled):not(:where(.cds-neutral)).cds-active, a.cds-button:not(:disabled, .cds-disabled):not(:where(.cds-neutral)):active, a.cds-button:not(:disabled, .cds-disabled):not(:where(.cds-neutral)).cds-active { color: var(--_cds-button-active-text); background: var(--_cds-button-active-background); } .cds-button--primary, a.cds-button--primary { --_cds-button-color-text: var(--cds-button-primary-color-text-idle, var(--cds-button-primary-color-text)); --_cds-button-color-border: var(--cds-button-primary-color-border); --_cds-button-color-background: var(--cds-button-primary-color-background-idle); --_cds-button-hover-text: var(--cds-button-primary-color-text-hover, var(--cds-button-primary-color-text)); --_cds-button-hover-background: var(--cds-button-primary-color-background-hover); --_cds-button-active-text: var(--cds-button-primary-color-text-pressed, var(--cds-button-primary-color-text)); --_cds-button-active-background: var(--cds-button-primary-color-background-pressed); } .cds-button--tertiary, a.cds-button--tertiary { --_cds-button-color-text: var(--cds-button-tertiary-color-text-idle); --_cds-button-color-border: var(--cds-button-tertiary-color-border); --_cds-button-color-background: var(--cds-button-tertiary-color-background-idle); --_cds-button-hover-text: var(--cds-button-tertiary-color-text-hover); --_cds-button-hover-background: var(--cds-button-tertiary-color-background-hover); --_cds-button-active-text: var(--cds-button-tertiary-color-text-pressed); --_cds-button-active-background: var(--cds-button-tertiary-color-background-pressed); } :where(.cds-button--tertiary, a.cds-button--tertiary).cds-button--icon { --_cds-button-color-text: var(--cds-button-tertiaryicon-color-icon); --_cds-button-color-border: var(--cds-button-tertiaryicon-color-border); --_cds-button-color-background: var(--cds-button-tertiaryicon-color-background-idle); --_cds-button-hover-background: var(--cds-button-tertiaryicon-color-background-hover); --_cds-button-active-background: var(--cds-button-tertiaryicon-color-background-pressed); } .cds-button--destruction, a.cds-button--destruction { --_cds-button-color-text: var(--cds-button-destruction-color-text-idle); --_cds-button-color-border: var(--cds-button-destruction-color-border); --_cds-button-color-background: var(--cds-button-destruction-color-background-idle); --_cds-button-hover-text: var(--cds-button-destruction-color-text-hover); --_cds-button-hover-background: var(--cds-button-destruction-color-background-hover); --_cds-button-active-text: var(--cds-button-destruction-color-text-pressed); --_cds-button-active-background: var(--cds-button-destruction-color-background-pressed); } button.cds-disabled, button:disabled, .cds-button.cds-disabled, .cds-button:disabled { --_cds-button-color-text: var(--cds-color-insensitive-text); --_cds-button-color-border: var(--cds-color-insensitive-border); --_cds-button-color-background: transparent; } .cds-button--primary.cds-disabled, a.cds-button--primary.cds-disabled, .cds-button--primary:disabled { --_cds-button-color-text: var(--cds-color-insensitive-text); --_cds-button-color-border: var(--cds-color-insensitive-background); --_cds-button-color-background: var(--cds-color-insensitive-background); --_cds-button-hover-background: var(--cds-color-insensitive-background); --_cds-button-active-background: var(--cds-color-insensitive-background); } .cds-button--tertiary.cds-disabled, a.cds-button--tertiary.cds-disabled, .cds-button--tertiary:disabled { --_cds-button-color-text: var(--cds-color-insensitive-text); --_cds-button-color-border: transparent; --_cds-button-color-background: transparent; --_cds-button-hover-background: transparent; --_cds-button-active-background: transparent; } .cds-button--destruction.cds-disabled, a.cds-button--destruction.cds-disabled, .cds-button--destruction:disabled { --_cds-button-color-text: var(--cds-color-insensitive-text); --_cds-button-color-border: var(--cds-color-insensitive-background); --_cds-button-color-background: var(--cds-color-insensitive-background); --_cds-button-hover-background: var(--cds-color-insensitive-background); --_cds-button-active-background: var(--cds-color-insensitive-background); } /** Crescent Table styles * For basic use of the HTML element or opt-in via `.cds-table`/`.cds-td` etc * todo - once browser nesting support is more widespread, this code can be minimised */ :is(table, .cds-table) { width: 100%; border-collapse: collapse; } :is(table, .cds-table) :is(tr, .cds-tr) { border-bottom: 1px solid var(--cds-color-border-subtle); } /* Last row doesn't have a border. Ideally everybody uses thead/tbody properly, but also need to capture when they don't */ :is(table, .cds-table) :is(tbody, .cds-tbody) :is(tr, .cds-tr):last-child, :is(table, .cds-table) > :is(tr, .cds-tr):last-child { border-bottom: none; } :is(table, .cds-table) :is(th, .cds-th, td, .cds-td) { padding: var(--cds-cell-size-padding-top) var(--cds-cell-size-padding-right) var(--cds-cell-size-padding-bottom) var(--cds-cell-size-padding-left); /** * min-height does not work for table elements, but height works like it in this case. * Table cells will grow when the content does not fit. */ height: var(--cds-cell-size-minheight); } :is(table, .cds-table) :is(th, .cds-th, td, .cds-td):first-child { /* Row padding can't be added to `tr` so we have to add it to the existing cell padding */ padding-left: calc(var(--cds-cell-size-padding-left) + var(--cds-tablerow-size-padding-left)); } :is(table, .cds-table) :is(th, .cds-th, td, .cds-td):last-child { /* Row padding can't be added to `tr` so we have to add it to the existing cell padding */ padding-right: calc(var(--cds-cell-size-padding-right) + var(--cds-tablerow-size-padding-right)); } :is(table, .cds-table) :is(th, td, .cds-th, .cds-td).cds-flush { padding: 0; } :is(table, .cds-table) :is(th, .cds-th) { text-align: left; font-weight: var(--cds-font-label-default-weight-bold); } :is(table, .cds-table) :is(td, .cds-td, tbody th, .cds-tbody .cds-th) { vertical-align: top; } :is(.cds-table--data) :is(td, .cds-td, tbody th, .cds-tbody .cds-th)::first-line { /* vertical-align: middle; works on Firefox, but not others */ line-height: calc( var(--cds-cell-size-minheight) - var(--cds-cell-size-padding-top) - var(--cds-cell-size-padding-bottom) ); } /* For Crescent Input styles */ input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; box-sizing: border-box; } /* Base form styles */ input:not([type]), input[type='text'], input[type='email'], input[type='number'], input[type='date'], input[type='search'], input[type='tel'], input[type='password'], input[type='url'], select, textarea, .cds-input { --_cds-input-border-color: var(--cds-state-color-input-border, var(--cds-color-border-moderate)); --_cds-input-border-addition: 0; appearance: none; display: block; border-radius: 0; width: 100%; min-width: 0; /*https://medium.com/@pascalokereke18/why-i-use-min-width-0-d8d067aa1a1d*/ background-color: var(--cds-color-background); border: solid 1px var(--_cds-input-border-color); color: var(--cds-color-text); line-height: var(--cds-font-button-label-lineheight); font-size: var(--cds-font-button-label-fontsize); box-shadow: 0 0 0 var(--cds-state-input-border-addition, var(--_cds-input-border-addition)) inset var(--_cds-input-border-color); /** Inputs always have their value vertically centered so this is simple */ padding: var(--cds-input-size-padding-top) var(--cds-input-size-padding-left) var(--cds-input-size-padding-bottom) var(--cds-input-size-padding-left); min-height: var(--cds-input-size-minheight); } :is( input:not([type]), input[type='text'], input[type='email'], input[type='number'], input[type='date'], input[type='search'], input[type='tel'], input[type='password'], input[type='url'], select, textarea, .cds-input ):is(:focus, :focus-visible) { --_cds-input-border-color: var(--cds-state-color-input-focus-border, var(--cds-color-focus-border)); outline: none; /* Double the border on focus. Changing the border+padding itself results in a visible jump on Windows HiDPI. * Therefore, use an inset box shadow to achieve the effect without changing the element dimensions */ --_cds-input-border-addition: 1px; } /* re-apply a dropdown arrow (as appearance: none removed it) */ select:not([multiple]) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23888' viewBox='0 0 16 16' %3E%3Cpath d='M8 8.843 2.225 2.938l-2.1 2.109L8 13.063l7.875-8.016-2.1-2.109z'%3E%3C/path%3E%3C/svg%3E"); background-position: calc(100% - 8px) center; background-repeat: no-repeat; background-size: 12px; } :is( input:not([type]), input[type='text'], input[type='email'], input[type='number'], input[type='date'], input[type='search'], input[type='tel'], input[type='password'], input[type='url'], textarea ):is(:read-only, .cds-read-only) { --_cds-input-border-color: var(--cds-color-readonly-border); background: var(--cds-color-readonly-background); color: var(--cds-color-readonly-text); } :is( input:not([type]), input[type='text'], input[type='email'], input[type='number'], input[type='date'], input[type='search'], input[type='tel'], input[type='password'], input[type='url'], select, textarea, .cds-input, .cds-input--select, .cds-input--field, .cds-input--textarea ):is(:disabled, .cds-disabled) { --_cds-input-border-color: var(--cds-color-readonly-border); background: var(--cds-color-insensitive-background); color: var(--cds-color-insensitive-text); /* Fix for Safari rendering disabled text in white */ -webkit-text-fill-color: var(--cds-color-insensitive-text); } :is( input:not([type]), input[type='text'], input[type='email'], input[type='number'], input[type='date'], input[type='search'], input[type='tel'], input[type='password'], input[type='url'], select, textarea, .cds-input, .cds-input--select, .cds-input--field, .cds-input--textarea ):is(:disabled, .cds-disabled)::placeholder { color: var(--cds-color-insensitive-text); } :is( input:not([type]), input[type='text'], input[type='email'], input[type='number'], input[type='date'], input[type='search'], input[type='tel'], input[type='password'], input[type='url'], select, textarea, .cds-input, .cds-input--select, .cds-input--field, .cds-input--textarea ):user-invalid { --_cds-input-border-addition: 1px; --_cds-input-border-color: var(--cds-color-error-border); } :is( input:not([type]), input[type='text'], input[type='email'], input[type='number'], input[type='date'], input[type='search'], input[type='tel'], input[type='password'], input[type='url'], select, textarea, .cds-input, .cds-input--select, .cds-input--field, .cds-input--textarea ):-moz-ui-invalid { --_cds-input-border-addition: 1px; --_cds-input-border-color: var(--cds-color-error-border); } @supports not selector(:user-invalid) { :is( input:not([type]), input[type='text'], input[type='email'], input[type='number'], input[type='date'], input[type='search'], input[type='tel'], input[type='password'], input[type='url'], select, textarea, .cds-input, .cds-input--select, .cds-input--field, .cds-input--textarea ):invalid { --_cds-input-border-addition: 1px; --_cds-input-border-color: var(--cds-color-error-border); } } :is( input:not([type]), input[type='text'], input[type='email'], input[type='number'], input[type='date'], input[type='search'], input[type='tel'], input[type='password'], input[type='url'], select, textarea, .cds-input, .cds-input--select, .cds-input--field, .cds-input--textarea )::-ms-clear { /* Hide the cancel button for Edge/IE*/ display: none; } /* :is does not support pseudo elements, so this is a lot of noise, until we can support nesting */ :is( input:not([type]), input[type='text'], input[type='email'], input[type='number'], input[type='date'], input[type='search'], input[type='tel'], input[type='password'], input[type='url'], select, textarea, .cds-input, .cds-input--select, .cds-input--field, .cds-input--textarea )[type='search']::-webkit-search-decoration, :is( input:not([type]), input[type='text'], input[type='email'], input[type='number'], input[type='date'], input[type='search'], input[type='tel'], input[type='password'], input[type='url'], select, textarea, .cds-input, .cds-input--select, .cds-input--field, .cds-input--textarea )[type='search']::-webkit-search-cancel-button, :is( input:not([type]), input[type='text'], input[type='email'], input[type='number'], input[type='date'], input[type='search'], input[type='tel'], input[type='password'], input[type='url'], select, textarea, .cds-input, .cds-input--select, .cds-input--field, .cds-input--textarea )[type='search']::-webkit-search-results-button, :is( input:not([type]), input[type='text'], input[type='email'], input[type='number'], input[type='date'], input[type='search'], input[type='tel'], input[type='password'], input[type='url'], select, textarea, .cds-input, .cds-input--select, .cds-input--field, .cds-input--textarea )[type='search']::-webkit-search-results-decoration { /* Hide the default cancel button for Chrome/Safari */ appearance: none !important; } textarea, .cds-input--textarea { resize: vertical; } input[type='radio'], input[type='checkbox'] { accent-color: var(--cds-color-selectedgraphics-background-primary); width: 1em; /* Match the text it is next to */ height: 1em; line-height: 0; cursor: pointer; flex-shrink: 0; /* Never let flexbox squeeze the checkbox */ } ::placeholder { font-style: italic; overflow: visible; color: var(--cds-color-placeholder-text); } ::selection { background: var(--cds-color-core-blue-06); color: var(--cds-color-core-white); } label { font-size: var(--cds-font-label-default-fontsize); line-height: var(--cds-font-label-default-lineheight); font-weight: var(--cds-font-label-default-weight); } /* When using the Crescent Icons library */ .bb-icon, .cds-icon { /* ensure icons don't get squished when in a flex container */ flex-shrink: 0; /* The reset sets all SVGs to block, but icons are most commonly needed to be inline-block */ display: inline-block; } } @layer utils { /** Set default font size for naked elements in BBSans, without affecting the root font-size */ :root.cds-bbsans > *, .cds-bbsans:not(:root) { font-size: var(--cds-font-body-default-fontsize); } :root.cds-bbsans--large > *, .cds-bbsans--large:not(:root) { font-size: var(--cds-font-body-large-fontsize); } /** Classes for the Crescent typography tokens Wrap large portions of text in `.cds-prose` to auto-apply heading styles and spacing based on just HTML elements */ .cds-t-body { font-size: var(--cds-font-body-default-fontsize); line-height: var(--cds-font-body-default-lineheight); font-weight: var(--cds-font-body-default-weight); letter-spacing: var(--cds-font-body-default-letterspacing); } /* Prose has the larger body font by default */ .cds-t-body-large, .cds-prose { font-size: var(--cds-font-body-large-fontsize); line-height: var(--cds-font-body-large-lineheight); font-weight: var(--cds-font-body-large-weight); letter-spacing: var(--cds-font-body-large-letterspacing); } .cds-t-body-small { font-size: var(--cds-font-body-small-fontsize); line-height: var(--cds-font-body-small-lineheight); font-weight: var(--cds-font-body-small-weight); letter-spacing: var(--cds-font-body-small-letterspacing); } .cds-t-body--b { font-weight: var(--cds-font-body-default-weight-bold); } .cds-t-h1, .cds-prose h1 { font-size: var(--cds-font-heading-01-fontsize); line-height: var(--cds-font-heading-01-lineheight); font-weight: var(--cds-font-heading-01-weight); letter-spacing: var(--cds-font-heading-01-letterspacing); } .cds-t-h2, .cds-prose h2 { font-size: var(--cds-font-heading-02-fontsize); line-height: var(--cds-font-heading-02-lineheight); font-weight: var(--cds-font-heading-02-weight); letter-spacing: var(--cds-font-heading-02-letterspacing); } .cds-t-h3, .cds-prose h3 { font-size: var(--cds-font-heading-03-fontsize); line-height: var(--cds-font-heading-03-lineheight); font-weight: var(--cds-font-heading-03-weight); letter-spacing: var(--cds-font-heading-03-letterspacing); } .cds-t-h4, .cds-prose h4 { font-size: var(--cds-font-heading-04-fontsize); line-height: var(--cds-font-heading-04-lineheight); font-weight: var(--cds-font-heading-04-weight); letter-spacing: var(--cds-font-heading-04-letterspacing); } .cds-t-h5, .cds-prose h5 { font-size: var(--cds-font-heading-05-fontsize); line-height: var(--cds-font-heading-05-lineheight); font-weight: var(--cds-font-heading-05-weight); letter-spacing: var(--cds-font-heading-05-letterspacing); } .cds-t-h6, .cds-prose h6 { font-size: var(--cds-font-heading-06-fontsize); line-height: var(--cds-font-heading-06-lineheight); font-weight: var(--cds-font-heading-06-weight); letter-spacing: var(--cds-font-heading-06-letterspacing); } .cds-t-group-heading1 { font-size: var(--cds-font-groupheading-01-fontsize); line-height: var(--cds-font-groupheading-01-lineheight); font-weight: var(--cds-font-groupheading-01-weight); text-transform: var(--cds-font-groupheading-01-transform); letter-spacing: var(--cds-font-groupheading-01-letterspacing); } .cds-t-group-heading2 { font-size: var(--cds-font-groupheading-02-fontsize); line-height: var(--cds-font-groupheading-02-lineheight); font-weight: var(--cds-font-groupheading-02-weight); text-transform: var(--cds-font-groupheading-02-transform); letter-spacing: var(--cds-font-groupheading-02-letterspacing); } .cds-t-label { font-size: var(--cds-font-label-default-fontsize); line-height: var(--cds-font-label-default-lineheight); font-weight: var(--cds-font-label-default-weight); letter-spacing: var(--cds-font-label-default-letterspacing) } .cds-t-label--b { font-weight: var(--cds-font-label-default-weight-bold); } /** @deprecated - renamed to cds-t-label-small - todo - will be removed in v3 version (part of tokens repo) */ .cds-t-label--small { font-size: var(--cds-font-label-small-fontsize); line-height: var(--cds-font-label-small-lineheight); font-weight: var(--cds-font-label-small-weight); letter-spacing: var(--cds-font-label-small-letterspacing); } .cds-t-label-small { font-size: var(--cds-font-label-small-fontsize); line-height: var(--cds-font-label-small-lineheight); font-weight: var(--cds-font-label-small-weight); letter-spacing: var(--cds-font-label-small-letterspacing); } .cds-t-label-xsmall { font-size: var(--cds-font-label-xsmall-fontsize); line-height: var(--cds-font-label-xsmall-lineheight); font-weight: var(--cds-font-label-xsmall-weight); text-transform: var(--cds-font-label-xsmall-transform); letter-spacing: var(--cds-font-label-xsmall-letterspacing); } .cds-t-datadisplay1 { font-size: var(--cds-font-datadisplay-01-fontsize); line-height: var(--cds-font-datadisplay-01-lineheight); font-weight: var(--cds-font-datadisplay-01-weight); letter-spacing: var(--cds-font-datadisplay-01-letterspacing); } .cds-t-datadisplay2 { font-size: var(--cds-font-datadisplay-02-fontsize); line-height: var(--cds-font-datadisplay-02-lineheight); font-weight: var(--cds-font-datadisplay-02-weight); letter-spacing: var(--cds-font-datadisplay-02-letterspacing); } .cds-t-d1 { font-size: var(--cds-font-display-01-fontsize); line-height: var(--cds-font-display-01-lineheight); font-weight: var(--cds-font-display-01-weight); letter-spacing: var(--cds-font-display-01-letterspacing); text-wrap: balance; } .cds-t-d1--b { font-weight: var(--cds-font-display-01-weight-bold); } .cds-t-d2 { font-size: var(--cds-font-display-02-fontsize); line-height: var(--cds-font-display-02-lineheight); font-weight: var(--cds-font-display-02-weight); letter-spacing: var(--cds-font-display-02-letterspacing); text-wrap: balance; } .cds-t-d2--b { font-weight: var(--cds-font-display-02-weight-bold); } .cds-t-d3 { font-size: var(--cds-font-display-03-fontsize); line-height: var(--cds-font-display-03-lineheight); font-weight: var(--cds-font-display-03-weight); letter-spacing: var(--cds-font-display-03-letterspacing); text-wrap: balance; } .cds-t-d3--b { font-weight: var(--cds-font-display-03-weight-bold); } .cds-t-code { background-color: var(--cds-color-background-secondary); color: var(--cds-color-text); padding-left: var(--cds-inlinecode-size-padding-left); padding-right: var(--cds-inlinecode-size-padding-right); border-radius: var(--cds-inlinecode-size-borderradius); outline: 1px solid var(--cds-color-border-subtle); } /* `.cds-prose` is for large amounts of text and handles proper spacing and sizing using natural HTML elements */ .cds-prose :is(p,ul,ol,h1,h2,h3,h4,h5,h6,table,figure,blockquote,iframe,pre,.cds-prose__block):not(:last-child) { margin-bottom: 0.625rem; /* todo - a crescent spacing token, once available */ } .cds-prose--limit-line :is(p,li,h1,h2,h3,h4,h5,h6) { max-width: var(--cds-config-prose-line-limit, 70ch); } /* headings starting a new section have a much bigger gap */ .cds-prose :is(p,ul,ol,h1,h2,h3,h4,h5,h6,table,figure,blockquote,iframe,pre,.cds-prose__block) + :is(h1,h2,h3,h4,h5,h6) { margin-top: 2.5rem; /* todo - a crescent spacing token, once available */ } .cds-ul, .cds-ol, .cds-prose ul, .cds-prose ol { padding-left: 1em; list-style-position: outside; } .cds-ul, .cds-prose ul { list-style-type: disc; } .cds-ol, .cds-prose ol { list-style-type: decimal; } .cds-li:not(:last-child), .cds-prose li:not(:last-child) { margin-bottom: 0.25em; } .cds-prose :is(p, ul, ol) { text-wrap: pretty; } .cds-prose--preformatted p { white-space: pre-wrap; } /* Validation States */ :root, [data-cds-theme] { --cds-state-color-input-border: var(--cds-color-border-moderate); /* todo #CrescentToken for input border */ --cds-state-color-input-focus-border: var(--cds-color-focus-border); --cds-state-color-background-hover: transparent; --cds-state-color-background-idle: transparent; --cds-state-color-background-selected: transparent; } [data-cds-state="information"] { --cds-state-color-input-border: var(--cds-color-informationpanel-border-moderate); --cds-state-color-input-focus-border: var(--cds-color-informationpanel-border-moderate); --cds-state-input-border-addition: 1px; --cds-state-color-background-hover: var(--cds-color-information-background-idle); --cds-state-color-background-idle: var(--cds-color-information-background-idle); --cds-state-color-background-selected: var(--cds-color-information-background-idle); --cds-state-color-backgroundbar-selected: var(--cds-color-informationpanel-border-subtle); --cds-state-color-border: var(--cds-color-informationpanel-border-moderate); --cds-state-color-icon: var(--cds-color-information-text); --cds-state-color-text: var(--cds-color-information-text); --cds-state-color-panel-background-hover: var(--cds-color-informationpanel-background-hover); --cds-state-color-panel-background-idle: var(--cds-color-informationpanel-background-idle); --cds-state-color-panel-border-moderate: var(--cds-color-informationpanel-border-moderate); --cds-state-color-panel-border-subtle: var(--cds-color-informationpanel-border-subtle); --cds-state-color-panel-icon: var(--cds-color-informationpanel-icon); --cds-state-color-panel-link: var(--cds-color-informationpanel-link); --cds-state-color-panel-text: var(--cds-color-informationpanel-text); } [data-cds-state="success"] { --cds-state-color-input-border: var(--cds-color-success-border); --cds-state-color-input-focus-border: var(--cds-color-success-border); --cds-state-input-border-addition: 1px; --cds-state-color-background-hover: var(--cds-color-success-background-hover); --cds-state-color-background-idle: var(--cds-color-success-background-idle); --cds-state-color-background-selected: var(--cds-color-success-background-selected); --cds-state-color-backgroundbar-selected: var(--cds-color-success-backgroundbar-selected); --cds-state-color-border: var(--cds-color-success-border); --cds-state-color-icon: var(--cds-color-success-icon); --cds-state-color-text: var(--cds-color-success-text); --cds-state-color-panel-background-hover: var(--cds-color-successpanel-background-hover); --cds-state-color-panel-background-idle: var(--cds-color-successpanel-background-idle); --cds-state-color-panel-border-moderate: var(--cds-color-successpanel-border-moderate); --cds-state-color-panel-border-subtle: var(--cds-color-successpanel-border-subtle); --cds-state-color-panel-icon: var(--cds-color-successpanel-icon); --cds-state-color-panel-link: var(--cds-color-successpanel-link); --cds-state-color-panel-text: var(--cds-color-successpanel-text); } [data-cds-state="warning"] { --cds-state-color-input-border: var(--cds-color-warning-border); --cds-state-color-input-focus-border: var(--cds-color-warning-border); --cds-state-input-border-addition: 1px; --cds-state-color-background-hover: var(--cds-color-warning-background-hover); --cds-state-color-background-idle: var(--cds-color-warning-background-idle); --cds-state-color-background-selected: var(--cds-color-warning-background-selected); --cds-state-color-backgroundbar-selected: var(--cds-color-warning-backgroundbar-selected); --cds-state-color-border: var(--cds-color-warning-border); --cds-state-color-icon: var(--cds-color-warning-icon); --cds-state-color-text: var(--cds-color-warning-text); --cds-state-color-panel-background-hover: var(--cds-color-warningpanel-background-hover); --cds-state-color-panel-background-idle: var(--cds-color-warningpanel-background-idle); --cds-state-color-panel-border-moderate: var(--cds-color-warningpanel-border-moderate); --cds-state-color-panel-border-subtle: var(--cds-color-warningpanel-border-subtle); --cds-state-color-panel-icon: var(--cds-color-warningpanel-icon); --cds-state-color-panel-link: var(--cds-color-warningpanel-link); --cds-state-color-panel-text: var(--cds-color-warningpanel-text); } [data-cds-state="error"] { --cds-state-color-input-border: var(--cds-color-error-border); --cds-state-color-input-focus-border: var(--cds-color-error-border); --cds-state-input-border-addition: 1px; --cds-state-color-background-hover: var(--cds-color-error-background-hover); --cds-state-color-background-idle: var(--cds-color-error-background-idle); --cds-state-color-background-selected: var(--cds-color-error-background-selected); --cds-state-color-backgroundbar-selected: var(--cds-color-error-backgroundbar-selected); --cds-state-color-border: var(--cds-color-error-border); --cds-state-color-icon: var(--cds-color-error-icon); --cds-state-color-text: var(--cds-color-error-text); --cds-state-color-panel-background-hover: var(--cds-color-errorpanel-background-hover); --cds-state-color-panel-background-idle: var(--cds-color-errorpanel-background-idle); --cds-state-color-panel-border-moderate: var(--cds-color-errorpanel-border-moderate); --cds-state-color-panel-border-subtle: var(--cds-color-errorpanel-border-subtle); --cds-state-color-panel-icon: var(--cds-color-errorpanel-icon); --cds-state-color-panel-link: var(--cds-color-errorpanel-link); --cds-state-color-panel-text: var(--cds-color-errorpanel-text); } .cds-state { background: var(--cds-state-color-background-idle); } .cds-state--hover:hover { background: var(--cds-state-color-background-hover); } .cds-state--selected { background: var(--cds-state-color-background-selected); } .cds-state__text { color: var(--cds-state-color-text); } .cds-state__icon { color: var(--cds-state-color-icon); } .cds-state-panel { background: var(--cds-state-color-panel-background-idle); color: var(--cds-state-color-panel-text); } .cds-state-panel :is(.cds-state-panel__link, a:is(:link,:hover,:focus,:visited,:active)) { color: var(--cds-state-color-panel-link); text-decoration: underline; } .cds-state-panel .cds-state__icon { color: var(--cds-state-color-panel-icon); } .cds-state-panel--hover:hover { background: var(--cds-state-color-panel-background-hover); } /* Input Group: Removes borders from inner inputs, and moves it to the containing element */ .cds-input-group { /* Copied from the input styles (until CSS can support native mixins) */ --_cds-input-border-color: var(--cds-state-color-input-border, var(--cds-color-border-moderate)); --_cds-input-border-width: 1px; --_cds-input-border-addition: 0; display: flex; align-items: center; background-color: var(--cds-color-background); border: solid var(--_cds-input-border-width) var(--_cds-input-border-color); min-height: var(--cds-input-size-minheight); box-shadow: 0 0 0 var(--cds-state-input-border-addition, var(--_cds-input-border-addition)) inset var(--_cds-input-border-color); } /** remove default input styles as the group is imitating them. reduce the height and padding slightly to cater for the input-group border */ .cds-input-group input { flex: 1; border: none; box-shadow: none; background: transparent; padding: calc(var(--cds-input-size-padding-top) - var(--_cds-input-border-width)) calc(var(--cds-input-size-padding-left) - var(--_cds-input-border-width)) calc(var(--cds-input-size-padding-bottom) - var(--_cds-input-border-width)) calc(var(--cds-input-size-padding-left) - var(--_cds-input-border-width)); min-height: calc(var(--cds-input-size-minheight) - (2 * var(--_cds-input-border-width))); } .cds-input-group input:not(:first-child) { padding-left: 0; } .cds-input-group input:not(:last-child) { padding-right: 0; } .cds-input-group input:is(:focus, :focus-visible) { box-shadow: none; } /** pull the button into the border space */ .cds-input-group :is(button .cds-button, a.cds-button, [class*="cds-button-"]) { margin-block: calc(-1 * var(--_cds-input-border-width)); } .cds-input-group :is(button .cds-button, a.cds-button, [class*="cds-button-"]):last-child, .cds-input-group :last-child :is(button .cds-button, a.cds-button, [class*="cds-button-"]) { margin-inline-end: calc(-1 * var(--_cds-input-border-width)); } .cds-input-group :is(button .cds-button, a.cds-button, [class*="cds-button-"]):first-child, .cds-input-group :first-child :is(button .cds-button, a.cds-button, [class*="cds-button-"]) { margin-inline-start: calc(-1 * var(--_cds-input-border-width)); } .cds-input-group:focus-within { --_cds-input-border-color: var(--cds-state-color-input-focus-border, var(--cds-color-focus-border)); outline: none; /* Double the border on focus. Changing the border+padding itself results in a visible jump on Windows HiDPI. * Therefore, use an inset box shadow to achieve the effect without changing the element dimensions */ --_cds-input-border-addition: 1px; } .cds-input-group:has(:user-invalid), .cds-input-group--invalid { --_cds-input-border-addition: 1px; --_cds-input-border-color: var(--cds-color-error-border); } /* Patterned Backgrounds */ .cds-pattern-hexgrid { --_lineColor: var(--cds-config-pattern-linecolor, rgba(0, 0, 0, 0.3)); --_patternSize: var(--cds-config-pattern-size, 96px); --_lineAngle: 30deg; background-position-x: -1px; background-image: linear-gradient( var(--_lineAngle), var(--_lineColor) 1px, transparent 1px, transparent 50%, var(--_lineColor) 50%, var(--_lineColor) 50.78%, transparent 50.78%, transparent 100% ), linear-gradient( calc(-1 * var(--_lineAngle)), var(--_lineColor) 1px, transparent 1px, transparent 50%, var(--_lineColor) 50%, var(--_lineColor) 50.78%, transparent 50.78%, transparent 100% ), linear-gradient(90deg, var(--_lineColor) 0px, var(--_lineColor) 1px, transparent 1px); background-size: var(--_patternSize) calc(var(--_patternSize) * tan(30deg)), var(--_patternSize) calc(var(--_patternSize) * tan(30deg)), calc(var(--_patternSize) / 2) calc(var(--_patternSize) / 2); } /** Accessibly hide an element from visibility */ .cds-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } } }