@scania/tegel 0.0.1-beta.6 → 0.0.1-beta.9

package/dist/collection/components/dropdown/dropdown.css

@@ -1,891 +0,0 @@
-/* https://medium.com/swlh/full-text-styling-with-a-single-line-of-css-838e8c666f4d */
-:root {
-  /* FUNCTIONAL TYPOGRAPHY */
-  --sdds-headline-01: normal normal bold 40px/40px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-01-ls: 0;
-  --sdds-headline-02: normal normal bold 32px/32px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-02-ls: -0.04em;
-  --sdds-headline-03: normal normal bold 24px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-03-ls: -0.03em;
-  --sdds-headline-04: normal normal bold 20px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-04-ls: -0.02em;
-  --sdds-headline-05: normal normal bold 14px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-05-ls: -0.02em;
-  --sdds-headline-06: normal normal bold 14px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-06-ls: -0.02em;
-  --sdds-headline-07: normal normal bold 14px/16px "Scania Sans Semi Condensed", arial, helvetica,
-    sans-serif;
-  --sdds-headline-07-ls: -0.01em;
-  --sdds-paragraph-01: normal normal normal 24px/32px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-paragraph-01-ls: -0.03em;
-  --sdds-paragraph-02: normal normal normal 20px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-paragraph-02-ls: -0.01em;
-  --sdds-body-01: normal normal normal 16px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-body-01-ls: -0.02em;
-  --sdds-body-02: normal normal normal 14px/20px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-body-02-ls: -0.02em;
-  --sdds-detail-01: normal normal normal 16px/24px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-01-ls: -0.01em;
-  --sdds-detail-02: normal normal normal 14px/16px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-02-ls: -0.01em;
-  --sdds-detail-03: normal normal normal 14px/20px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-03-ls: -0.01em;
-  --sdds-detail-04: normal normal bold 12px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-detail-04-ls: 0.08em;
-  --sdds-detail-04-tt: uppercase;
-  --sdds-detail-05: normal normal normal 12px/16px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-05-ls: 0;
-  --sdds-detail-06: normal normal bold 10px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-detail-06-ls: 0.08em;
-  --sdds-detail-06-tt: uppercase;
-  --sdds-detail-07: normal normal normal 10px/8px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-07-ls: 0;
-  /* EXPRESSIVE TYPOGRAPHY */
-  --sdds-expressive-headline-01: normal normal bold 80px/80px "Scania Sans Headline", arial,
-    helvetica, sans-serif;
-  --sdds-expressive-headline-01-ls: 0;
-  --sdds-expressive-headline-02: normal normal bold 56px/56px "Scania Sans Headline", arial,
-    helvetica, sans-serif;
-  --sdds-expressive-headline-02-ls: 0;
-  --sdds-headline-ex-01: normal normal bold 40px/40px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-01-ls: 0;
-  --sdds-headline-ex-02: normal normal bold 32px/32px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-02-ls: -0.04em;
-  --sdds-headline-ex-03: normal normal bold 24px/24px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-03-ls: -0.03em;
-  --sdds-headline-ex-04: normal normal bold 20px/24px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-04-ls: -0.01em;
-  --sdds-headline-ex-05: normal normal bold 16px/24px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-05-ls: -0.02em;
-  --sdds-headline-ex-06: normal normal bold 14px/16px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-06-ls: -0.02em;
-  --sdds-headline-ex-07: normal normal bold 14px/16px "Scania Sans Semi Condensed", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-07-ls: -0.01em;
-  --sdds-paragraph-ex-01: normal normal normal 24px/32px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-paragraph-ex-01-ls: -0.03em;
-  --sdds-paragraph-ex-02: normal normal normal 20px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-paragraph-ex-02-ls: -0.01em;
-  --sdds-body-ex-01: normal normal normal 16px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-body-ex-01-ls: -0.02em;
-  --sdds-body-ex-02: normal normal normal 14px/20px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-body-ex-02-ls: -0.01em;
-  --sdds-detail-ex-01: normal normal normal 16px/24px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-01-ls: -0.01em;
-  --sdds-detail-ex-02: normal normal normal 14px/16px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-02-ls: -0.01em;
-  --sdds-detail-ex-03: normal normal normal 14px/20px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-03-ls: -0.01em;
-  --sdds-detail-ex-04: normal normal bold 12px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-detail-ex-04-ls: 0.08em;
-  --sdds-detail-ex-04-tt: uppercase;
-  --sdds-detail-ex-05: normal normal normal 12px/16px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-05-ls: 0;
-  --sdds-detail-ex-06: normal normal bold 10px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-detail-ex-06-ls: 0.08em;
-  --sdds-detail-ex-06-tt: uppercase;
-  --sdds-detail-ex-07: normal normal normal 10px/8px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-07-ls: 0;
-}
-
-:root,
-:host,
-::slotted(*),
-.sdds-theme-light {
-  --sdds-link: var(--sdds-grey-958);
-  --sdds-link-text-decoration: none;
-  --sdds-dropdown-bg: var(--sdds-white);
-  --sdds-dropdown-bg-hover: var(--sdds-grey-50);
-}
-:root .sdds-on-white-bg,
-:host .sdds-on-white-bg,
-::slotted(*) .sdds-on-white-bg,
-.sdds-theme-light .sdds-on-white-bg {
-  --sdds-dropdown-bg: var(--sdds-grey-50);
-  --sdds-dropdown-bg-hover: var(--sdds-grey-100);
-}
-
-.sdds-dropdown-helper {
-  font: var(--sdds-detail-ex-05);
-  letter-spacing: var(--sdds-detail-ex-05-ls);
-  color: var(--sdds-grey-700);
-  margin-top: var(--sdds-spacing-element-4);
-  display: flex;
-}
-.sdds-dropdown-helper .sdds-dropdown-error-icon {
-  width: 16px;
-  height: 16px;
-  padding-right: 9px;
-  display: none;
-}
-
-.sdds-dropdown-label-inside {
-  font: var(--sdds-detail-ex-07);
-  letter-spacing: var(--sdds-detail-ex-07-ls);
-  color: var(--sdds-grey-700);
-}
-
-.sdds-dropdown-label-outside {
-  font: var(--sdds-detail-ex-05);
-  letter-spacing: var(--sdds-detail-ex-05-ls);
-  display: block;
-  color: var(--sdds-grey-958);
-  margin-bottom: var(--sdds-spacing-element-8);
-}
-
-/* https://medium.com/swlh/full-text-styling-with-a-single-line-of-css-838e8c666f4d */
-:root {
-  /* FUNCTIONAL TYPOGRAPHY */
-  --sdds-headline-01: normal normal bold 40px/40px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-01-ls: 0;
-  --sdds-headline-02: normal normal bold 32px/32px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-02-ls: -0.04em;
-  --sdds-headline-03: normal normal bold 24px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-03-ls: -0.03em;
-  --sdds-headline-04: normal normal bold 20px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-04-ls: -0.02em;
-  --sdds-headline-05: normal normal bold 14px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-05-ls: -0.02em;
-  --sdds-headline-06: normal normal bold 14px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-06-ls: -0.02em;
-  --sdds-headline-07: normal normal bold 14px/16px "Scania Sans Semi Condensed", arial, helvetica,
-    sans-serif;
-  --sdds-headline-07-ls: -0.01em;
-  --sdds-paragraph-01: normal normal normal 24px/32px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-paragraph-01-ls: -0.03em;
-  --sdds-paragraph-02: normal normal normal 20px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-paragraph-02-ls: -0.01em;
-  --sdds-body-01: normal normal normal 16px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-body-01-ls: -0.02em;
-  --sdds-body-02: normal normal normal 14px/20px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-body-02-ls: -0.02em;
-  --sdds-detail-01: normal normal normal 16px/24px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-01-ls: -0.01em;
-  --sdds-detail-02: normal normal normal 14px/16px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-02-ls: -0.01em;
-  --sdds-detail-03: normal normal normal 14px/20px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-03-ls: -0.01em;
-  --sdds-detail-04: normal normal bold 12px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-detail-04-ls: 0.08em;
-  --sdds-detail-04-tt: uppercase;
-  --sdds-detail-05: normal normal normal 12px/16px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-05-ls: 0;
-  --sdds-detail-06: normal normal bold 10px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-detail-06-ls: 0.08em;
-  --sdds-detail-06-tt: uppercase;
-  --sdds-detail-07: normal normal normal 10px/8px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-07-ls: 0;
-  /* EXPRESSIVE TYPOGRAPHY */
-  --sdds-expressive-headline-01: normal normal bold 80px/80px "Scania Sans Headline", arial,
-    helvetica, sans-serif;
-  --sdds-expressive-headline-01-ls: 0;
-  --sdds-expressive-headline-02: normal normal bold 56px/56px "Scania Sans Headline", arial,
-    helvetica, sans-serif;
-  --sdds-expressive-headline-02-ls: 0;
-  --sdds-headline-ex-01: normal normal bold 40px/40px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-01-ls: 0;
-  --sdds-headline-ex-02: normal normal bold 32px/32px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-02-ls: -0.04em;
-  --sdds-headline-ex-03: normal normal bold 24px/24px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-03-ls: -0.03em;
-  --sdds-headline-ex-04: normal normal bold 20px/24px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-04-ls: -0.01em;
-  --sdds-headline-ex-05: normal normal bold 16px/24px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-05-ls: -0.02em;
-  --sdds-headline-ex-06: normal normal bold 14px/16px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-06-ls: -0.02em;
-  --sdds-headline-ex-07: normal normal bold 14px/16px "Scania Sans Semi Condensed", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-07-ls: -0.01em;
-  --sdds-paragraph-ex-01: normal normal normal 24px/32px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-paragraph-ex-01-ls: -0.03em;
-  --sdds-paragraph-ex-02: normal normal normal 20px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-paragraph-ex-02-ls: -0.01em;
-  --sdds-body-ex-01: normal normal normal 16px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-body-ex-01-ls: -0.02em;
-  --sdds-body-ex-02: normal normal normal 14px/20px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-body-ex-02-ls: -0.01em;
-  --sdds-detail-ex-01: normal normal normal 16px/24px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-01-ls: -0.01em;
-  --sdds-detail-ex-02: normal normal normal 14px/16px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-02-ls: -0.01em;
-  --sdds-detail-ex-03: normal normal normal 14px/20px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-03-ls: -0.01em;
-  --sdds-detail-ex-04: normal normal bold 12px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-detail-ex-04-ls: 0.08em;
-  --sdds-detail-ex-04-tt: uppercase;
-  --sdds-detail-ex-05: normal normal normal 12px/16px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-05-ls: 0;
-  --sdds-detail-ex-06: normal normal bold 10px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-detail-ex-06-ls: 0.08em;
-  --sdds-detail-ex-06-tt: uppercase;
-  --sdds-detail-ex-07: normal normal normal 10px/8px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-07-ls: 0;
-}
-
-:root,
-:host,
-::slotted(*),
-.sdds-theme-light {
-  --sdds-link: var(--sdds-grey-958);
-  --sdds-link-text-decoration: none;
-  --sdds-dropdown-bg: var(--sdds-white);
-  --sdds-dropdown-bg-hover: var(--sdds-grey-50);
-}
-:root .sdds-on-white-bg,
-:host .sdds-on-white-bg,
-::slotted(*) .sdds-on-white-bg,
-.sdds-theme-light .sdds-on-white-bg {
-  --sdds-dropdown-bg: var(--sdds-grey-50);
-  --sdds-dropdown-bg-hover: var(--sdds-grey-100);
-}
-
-/* https://medium.com/swlh/full-text-styling-with-a-single-line-of-css-838e8c666f4d */
-:root {
-  /* FUNCTIONAL TYPOGRAPHY */
-  --sdds-headline-01: normal normal bold 40px/40px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-01-ls: 0;
-  --sdds-headline-02: normal normal bold 32px/32px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-02-ls: -0.04em;
-  --sdds-headline-03: normal normal bold 24px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-03-ls: -0.03em;
-  --sdds-headline-04: normal normal bold 20px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-04-ls: -0.02em;
-  --sdds-headline-05: normal normal bold 14px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-05-ls: -0.02em;
-  --sdds-headline-06: normal normal bold 14px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-06-ls: -0.02em;
-  --sdds-headline-07: normal normal bold 14px/16px "Scania Sans Semi Condensed", arial, helvetica,
-    sans-serif;
-  --sdds-headline-07-ls: -0.01em;
-  --sdds-paragraph-01: normal normal normal 24px/32px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-paragraph-01-ls: -0.03em;
-  --sdds-paragraph-02: normal normal normal 20px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-paragraph-02-ls: -0.01em;
-  --sdds-body-01: normal normal normal 16px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-body-01-ls: -0.02em;
-  --sdds-body-02: normal normal normal 14px/20px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-body-02-ls: -0.02em;
-  --sdds-detail-01: normal normal normal 16px/24px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-01-ls: -0.01em;
-  --sdds-detail-02: normal normal normal 14px/16px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-02-ls: -0.01em;
-  --sdds-detail-03: normal normal normal 14px/20px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-03-ls: -0.01em;
-  --sdds-detail-04: normal normal bold 12px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-detail-04-ls: 0.08em;
-  --sdds-detail-04-tt: uppercase;
-  --sdds-detail-05: normal normal normal 12px/16px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-05-ls: 0;
-  --sdds-detail-06: normal normal bold 10px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-detail-06-ls: 0.08em;
-  --sdds-detail-06-tt: uppercase;
-  --sdds-detail-07: normal normal normal 10px/8px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-07-ls: 0;
-  /* EXPRESSIVE TYPOGRAPHY */
-  --sdds-expressive-headline-01: normal normal bold 80px/80px "Scania Sans Headline", arial,
-    helvetica, sans-serif;
-  --sdds-expressive-headline-01-ls: 0;
-  --sdds-expressive-headline-02: normal normal bold 56px/56px "Scania Sans Headline", arial,
-    helvetica, sans-serif;
-  --sdds-expressive-headline-02-ls: 0;
-  --sdds-headline-ex-01: normal normal bold 40px/40px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-01-ls: 0;
-  --sdds-headline-ex-02: normal normal bold 32px/32px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-02-ls: -0.04em;
-  --sdds-headline-ex-03: normal normal bold 24px/24px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-03-ls: -0.03em;
-  --sdds-headline-ex-04: normal normal bold 20px/24px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-04-ls: -0.01em;
-  --sdds-headline-ex-05: normal normal bold 16px/24px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-05-ls: -0.02em;
-  --sdds-headline-ex-06: normal normal bold 14px/16px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-06-ls: -0.02em;
-  --sdds-headline-ex-07: normal normal bold 14px/16px "Scania Sans Semi Condensed", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-07-ls: -0.01em;
-  --sdds-paragraph-ex-01: normal normal normal 24px/32px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-paragraph-ex-01-ls: -0.03em;
-  --sdds-paragraph-ex-02: normal normal normal 20px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-paragraph-ex-02-ls: -0.01em;
-  --sdds-body-ex-01: normal normal normal 16px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-body-ex-01-ls: -0.02em;
-  --sdds-body-ex-02: normal normal normal 14px/20px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-body-ex-02-ls: -0.01em;
-  --sdds-detail-ex-01: normal normal normal 16px/24px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-01-ls: -0.01em;
-  --sdds-detail-ex-02: normal normal normal 14px/16px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-02-ls: -0.01em;
-  --sdds-detail-ex-03: normal normal normal 14px/20px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-03-ls: -0.01em;
-  --sdds-detail-ex-04: normal normal bold 12px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-detail-ex-04-ls: 0.08em;
-  --sdds-detail-ex-04-tt: uppercase;
-  --sdds-detail-ex-05: normal normal normal 12px/16px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-05-ls: 0;
-  --sdds-detail-ex-06: normal normal bold 10px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-detail-ex-06-ls: 0.08em;
-  --sdds-detail-ex-06-tt: uppercase;
-  --sdds-detail-ex-07: normal normal normal 10px/8px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-07-ls: 0;
-}
-
-:root,
-.sdds-theme-light {
-  --sdds-checkbox-color: var(--sdds-grey-900);
-  --sdds-checkbox-interaction-01: var(--sdds-blue-800);
-  --sdds-checkbox-interaction-02: var(--sdds-white);
-  --sdds-checkbox-bg-hover: var(--sdds-blue-800);
-  --sdds-checkbox-bg-focus: var(--sdds-blue-800);
-  --sdds-checkbox-disabled: var(--sdds-grey-400);
-  --sdds-checkbox-bg-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-  --sdds-checkbox-bg-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23b0b7c4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-  --sdds-checkbox-border-color-disabled-after: var(--sdds-grey-500);
-  --sdds-checkbox-color-disabled-after: var(--sdds-grey-500);
-}
-:root .sdds-theme-dark,
-.sdds-theme-light .sdds-theme-dark {
-  --sdds-checkbox-color: var(--sdds-white);
-  --sdds-checkbox-interaction-01: var(--sdds-white);
-  --sdds-checkbox-interaction-02: var(--sdds-grey-958);
-  --sdds-checkbox-bg-hover: white;
-  --sdds-checkbox-bg-focus: white;
-  --sdds-checkbox-disabled: white;
-  --sdds-checkbox-bg-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-  --sdds-checkbox-bg-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-  --sdds-checkbox-border-color-disabled-after: var(--sdds-grey-700);
-  --sdds-checkbox-color-disabled-after: var(--sdds-grey-700);
-}
-
-.sdds-checkbox-item {
-  box-sizing: border-box;
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-  color: var(--sdds-checkbox-text);
-  display: flex;
-  align-items: center;
-  margin-left: -4px;
-}
-.sdds-checkbox-item * {
-  box-sizing: border-box;
-}
-.sdds-checkbox-item .sdds-form-input[type=checkbox] {
-  appearance: none;
-  outline: none;
-  margin: 0;
-  border: 0;
-  border-radius: 2px;
-  width: 24px;
-  height: 24px;
-  position: relative;
-  cursor: pointer;
-}
-.sdds-checkbox-item .sdds-form-input[type=checkbox] + label {
-  color: var(--sdds-checkbox-color);
-  padding-left: var(--sdds-spacing-element-8);
-  padding-top: var(--sdds-spacing-element-4);
-  padding-bottom: var(--sdds-spacing-element-4);
-  cursor: pointer;
-}
-.sdds-checkbox-item .sdds-form-input[type=checkbox]::before, .sdds-checkbox-item .sdds-form-input[type=checkbox]::after {
-  content: "";
-  position: absolute;
-  box-sizing: border-box;
-  border-radius: 2px;
-}
-.sdds-checkbox-item .sdds-form-input[type=checkbox]::before {
-  width: 24px;
-  height: 24px;
-  left: 0;
-  top: 0;
-}
-.sdds-checkbox-item .sdds-form-input[type=checkbox]::after {
-  border: 1px solid var(--sdds-checkbox-interaction-01);
-  background-color: var(--sdds-checkbox-interaction-02);
-  width: 16px;
-  height: 16px;
-  left: 4px;
-  top: 4px;
-}
-.sdds-checkbox-item .sdds-form-input[type=checkbox]:hover::before {
-  background-color: var(--sdds-checkbox-bg-hover);
-  opacity: 0.12;
-}
-.sdds-checkbox-item .sdds-form-input[type=checkbox]:focus::before {
-  background-color: var(--sdds-checkbox-bg-focus);
-  opacity: 0.24;
-  animation: cb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards;
-}
-.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled, .sdds-checkbox-item .sdds-form-input[type=checkbox].disabled {
-  cursor: not-allowed;
-}
-.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled::after, .sdds-checkbox-item .sdds-form-input[type=checkbox].disabled::after {
-  border-color: var(--sdds-checkbox-border-color-disabled-after);
-}
-.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled + label, .sdds-checkbox-item .sdds-form-input[type=checkbox].disabled + label {
-  color: var(--sdds-grey-600);
-  cursor: not-allowed;
-}
-.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled:hover::before, .sdds-checkbox-item .sdds-form-input[type=checkbox].disabled:hover::before {
-  display: none;
-}
-
-.sdds-form-input[type=checkbox]:checked::after {
-  background-image: var(--sdds-checkbox-bg-img);
-  background-color: var(--sdds-checkbox-interaction-01);
-  background-repeat: no-repeat;
-  background-position: center;
-}
-.sdds-form-input[type=checkbox]:checked:disabled:hover::before, .sdds-form-input[type=checkbox]:checked:disabled::before, .sdds-form-input[type=checkbox]:checked.disabled:hover::before, .sdds-form-input[type=checkbox]:checked.disabled::before {
-  display: block;
-  width: 16px;
-  height: 16px;
-  left: 4px;
-  top: 4px;
-  border: 1px solid #b0b7c4;
-}
-.sdds-form-input[type=checkbox]:checked:disabled::after, .sdds-form-input[type=checkbox]:checked.disabled::after {
-  background-image: var(--sdds-checkbox-bg-img-disabled);
-  background-color: var(--sdds-checkbox-interaction-02);
-  color: var(--sdds-checkbox-color-disabled-after);
-}
-
-@keyframes cb-focus {
-  0% {
-    transform: scale(0);
-    opacity: 0;
-  }
-  50% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 0;
-  }
-}
-:host,
-::slotted(*) {
-  color: var(--sdds-grey-958);
-  box-sizing: border-box;
-  box-sizing: border-box;
-}
-:host *,
-::slotted(*) * {
-  box-sizing: border-box;
-}
-
-:host,
-::slotted(*) {
-  --sdds-link: var(--sdds-grey-958);
-  --sdds-link-text-decoration: none;
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-  color: var(--sdds-grey-958);
-  box-sizing: border-box;
-}
-
-:host {
-  position: relative;
-  z-index: auto;
-}
-:host::part(dropdown-filter-disabled) {
-  cursor: not-allowed;
-  caret-color: transparent;
-  pointer-events: none;
-  color: var(--sdds-grey-400);
-  border: none;
-}
-:host::part(dropdown-filter-disabled)::placeholder {
-  color: var(--sdds-grey-400);
-}
-
-.sdds-dropdown {
-  position: relative;
-  display: flex;
-  flex-flow: column wrap;
-  width: 100%;
-  border: 0;
-}
-.sdds-dropdown,
-.sdds-dropdown * {
-  box-sizing: border-box;
-}
-.sdds-dropdown .sdds-dropdown-toggle {
-  font: var(--sdds-detail-ex-02);
-  letter-spacing: var(--sdds-detail-ex-02-ls);
-  color: var(--sdds-grey-958);
-  display: flex;
-  align-items: center;
-  background-color: var(--sdds-dropdown-bg);
-  cursor: pointer;
-  transition: box-shadow 0.1s ease-in, border-bottom-color 150ms ease;
-  border-radius: 4px 4px 0 0;
-  border: none;
-  border-bottom: 1px solid var(--sdds-grey-400);
-  box-shadow: none;
-  width: 100%;
-  text-align: left;
-  outline: none;
-  padding: 20px 16px;
-  display: flex;
-  align-items: center;
-}
-.sdds-dropdown .sdds-dropdown-toggle:hover {
-  border-bottom-color: var(--sdds-grey-600);
-}
-.sdds-dropdown .sdds-dropdown-toggle:focus::before {
-  content: " ";
-  position: absolute;
-  z-index: 2;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  border-bottom: 2px solid var(--sdds-blue-400);
-}
-.sdds-dropdown .sdds-dropdown-toggle:active, .sdds-dropdown .sdds-dropdown-toggle.active .sdds-dropdown .sdds-dropdown-toggle.selected {
-  border-bottom-color: var(--sdds-grey-800);
-}
-.sdds-dropdown .sdds-dropdown-toggle.is-filter {
-  transition: border 0.1s ease-in 0.1s;
-  cursor: text;
-}
-.sdds-dropdown .sdds-dropdown-toggle-lg {
-  padding: 20px 16px;
-}
-.sdds-dropdown .sdds-dropdown-toggle-md {
-  padding: 16px;
-}
-.sdds-dropdown .sdds-dropdown-toggle-sm {
-  padding: 12px 16px;
-}
-.sdds-dropdown .sdds-dropdown-toggle.sdds-dropdown-toggle-label-inside-lg {
-  padding: 20px 16px 16px;
-}
-.sdds-dropdown .sdds-dropdown-toggle.sdds-dropdown-toggle-label-inside-md {
-  padding: 16px 16px 12px;
-}
-.sdds-dropdown .sdds-dropdown-toggle--selected:not(:focus) {
-  border-bottom: 1px solid var(--sdds-grey-800);
-}
-.sdds-dropdown .sdds-dropdown-arrow {
-  width: 20px;
-  position: absolute;
-  right: 16px;
-  color: inherit;
-  transform: rotate(0);
-  transition: transform ease 250ms;
-}
-.sdds-dropdown .sdds-dropdown-placeholder {
-  color: var(--sdds-grey-700);
-}
-.sdds-dropdown .sdds-dropdown-label {
-  display: grid;
-  width: calc(100% - 25px);
-}
-.sdds-dropdown .sdds-dropdown-label-container {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.sdds-dropdown.sdds-dropdown.sdds-dropdown-sm .sdds-dropdown-label-container--label-inside {
-  padding-bottom: 12px;
-}
-.sdds-dropdown .sdds-dropdown-filter {
-  border: 0;
-  outline: none;
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-  color: var(--sdds-grey-958);
-  width: 100%;
-  background: transparent;
-}
-.sdds-dropdown .sdds-dropdown-filter:focus {
-  outline: none;
-}
-.sdds-dropdown .sdds-dropdown-filter::placeholder {
-  color: var(--sdds-grey-700);
-  opacity: 1;
-}
-.sdds-dropdown .sdds-dropdown-menu {
-  z-index: 10000;
-  background-color: var(--sdds-white);
-  position: absolute;
-  top: 100%;
-  left: 0;
-  min-width: 100%;
-  max-height: 360px;
-  border-color: transparent;
-  border-style: solid;
-  border-width: 0 1px;
-  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
-  border-left-color: var(--sdds-grey-100);
-  border-right-color: var(--sdds-grey-100);
-  overflow-x: hidden;
-  overflow-y: auto;
-  transform: scaleY(0);
-  transform-origin: top;
-  transition: transform 250ms ease;
-}
-.sdds-dropdown .sdds-dropdown-menu::-webkit-scrollbar {
-  width: 4px;
-  background-color: inherit;
-}
-.sdds-dropdown .sdds-dropdown-menu::-webkit-scrollbar-thumb {
-  background-color: var(--sdds-grey-300);
-}
-.sdds-dropdown .sdds-dropdown-menu ::-webkit-scrollbar-button {
-  height: 0;
-  width: 0;
-}
-.sdds-dropdown.sdds-dropdown-lg .sdds-dropdown-toggle {
-  height: 56px;
-}
-.sdds-dropdown.sdds-dropdown-md .sdds-dropdown-toggle {
-  height: 48px;
-}
-.sdds-dropdown.sdds-dropdown-sm .sdds-dropdown-toggle {
-  height: 40px;
-}
-
-:host(.sdds-dropdown--open-upwards) .sdds-dropdown .sdds-dropdown-menu {
-  top: auto;
-  bottom: 100%;
-  box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.1);
-  transform-origin: bottom;
-}
-
-:host(.sdds-dropdown--open-upwards[label-position=outside]) span.sdds-dropdown-menu {
-  bottom: calc(100% - 24px);
-}
-
-:host([disabled=true]) {
-  cursor: not-allowed;
-}
-:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle {
-  pointer-events: none;
-  color: var(--sdds-grey-400);
-  border: none;
-  padding: 0 16px;
-}
-:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle .sdds-dropdown-placeholder {
-  color: var(--sdds-grey-400);
-}
-:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle .sdds-dropdown-label-inside {
-  color: var(--sdds-grey-400);
-}
-:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle:focus::before {
-  content: none;
-}
-
-:host(.sdds-dropdown--error) .sdds-dropdown .sdds-dropdown-toggle {
-  border-color: var(--sdds-negative);
-}
-:host(.sdds-dropdown--error) .sdds-dropdown .sdds-dropdown-toggle:focus::before {
-  border-color: var(--sdds-negative);
-}
-:host(.sdds-dropdown--error) .sdds-dropdown-helper {
-  color: var(--sdds-negative);
-}
-:host(.sdds-dropdown--error) .sdds-dropdown-helper .sdds-dropdown-error-icon {
-  display: flex;
-}
-
-:host ::slotted(sdds-dropdown-option) {
-  display: flex;
-  padding: var(--sdds-spacing-element-16);
-  background-color: var(--sdds-white);
-  border-top: 1px solid transparent;
-  border-bottom: 1px solid var(--sdds-grey-100);
-  opacity: 0;
-  visibility: hidden;
-  cursor: pointer;
-  box-sizing: border-box;
-}
-:host ::slotted(sdds-dropdown-option:last-child) {
-  border-bottom-color: transparent;
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-:host ::slotted(sdds-dropdown-option:hover),
-:host ::slotted(sdds-dropdown-option:focus) {
-  background-color: var(--sdds-dropdown-bg-hover);
-}
-:host ::slotted(sdds-dropdown-option:hover:not(:focus):not(sdds-dropdown-option.selected)) {
-  background-color: var(--sdds-dropdown-bg-hover);
-}
-:host ::slotted(sdds-dropdown-option:hover:focus) {
-  outline: none;
-}
-:host ::slotted(sdds-dropdown-option:focus) {
-  outline: 2px solid var(--sdds-blue-400);
-  outline-offset: -2px;
-}
-:host ::slotted(sdds-dropdown-option.sdds-dropdown--selected),
-:host ::slotted(sdds-dropdown-option.selected),
-:host ::slotted(sdds-dropdown-option.active),
-:host ::slotted(sdds-dropdown-option:active) {
-  background-color: var(--sdds-grey-300);
-  border-top: 1px solid var(--sdds-grey-300);
-  border-bottom: 1px solid var(--sdds-grey-300);
-}
-:host ::slotted(sdds-dropdown-option.sdds-option--no-result) {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-:host ::slotted(sdds-dropdown-option.sdds-dropdown-option-disabled),
-:host ::slotted(sdds-dropdown-option.selected.sdds-dropdown-option-disabled) {
-  cursor: not-allowed;
-  color: var(--sdds-grey-400);
-  background-color: var(--sdds-white);
-}
-
-:host(.sdds-dropdown--open-upwards) ::slotted(sdds-dropdown-option:first-child) {
-  border-radius: 4px 4px 0 0;
-}
-:host(.sdds-dropdown--open-upwards) ::slotted(sdds-dropdown-option:last-child) {
-  border-radius: 0;
-  border-bottom: 1px solid var(--sdds-grey-300);
-}
-
-.sdds-option-label {
-  margin: auto 0;
-  display: flex;
-  align-content: center;
-  text-decoration: none;
-  flex-grow: 2;
-}
-
-.sdds-option-checkmark {
-  color: inherit;
-  opacity: 0;
-  transition: opacity 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);
-  margin-left: var(--sdds-spacing-element-16);
-}
-
-:host([size=sm]) ::slotted(sdds-dropdown-option) {
-  padding: var(--sdds-spacing-element-12) var(--sdds-spacing-element-16);
-}
-
-:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-toggle {
-  box-shadow: 0 -1px 3px -1px rgba(0, 0, 0, 0.1);
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-toggle.is-filter::before {
-  content: " ";
-  position: absolute;
-  z-index: 2;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  border-bottom: 1px solid var(--sdds-blue-400);
-}
-:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-arrow {
-  transform: rotate(180deg);
-}
-:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-menu {
-  transform: scaleY(1);
-}
-:host(.sdds-dropdown--open) ::slotted(sdds-dropdown-option) {
-  visibility: visible;
-  opacity: 1;
-}
-
-:host(.selected) .sdds-option-checkmark {
-  opacity: 1;
-}
-
-.sdds-dropdown-label-inside {
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-  color: var(--sdds-grey-700);
-  position: absolute;
-  transition: transform 250ms ease, color 200ms ease;
-  width: calc(100% - 63px);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  transform: translate(0, -10px);
-  font-size: 10px;
-}
-
-.sdds-dropdown-label-container.sdds-dropdown-label-container--label-inside .sdds-dropdown-placeholder {
-  display: block;
-  padding-top: 4px;
-}
-
-.sdds-dropdown-lg .sdds-dropdown-label-inside {
-  display: block;
-  top: 16px;
-}
-
-.sdds-dropdown-md .sdds-dropdown-label-inside {
-  display: block;
-  top: 12px;
-}
-
-.sdds-dropdown.sdds-dropdown-sm .sdds-dropdown-label-inside {
-  display: none;
-}
-
-.sdds-dropdown-multiselect-result {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.sdds-option-checkbox {
-  margin-right: 8px;
-}
-
-.sdds-form-label {
-  display: flex;
-}