@scania/tegel 0.0.1-beta.9 → 0.0.2

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

@@ -0,0 +1,951 @@
+/* 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-mode-light {
+  /* This one is overriding the --sdds-link css for the link component. */
+  --sdds-link-text-decoration: none;
+  --sdds-dropdown-color: var(--sdds-grey-958);
+  --sdds-dropdown-background: var(--sdds-grey-50);
+  --sdds-dropdown-background-hover: var(--sdds-grey-100);
+  --sdds-dropdown-background-disabled: var(--sdds-white);
+  --sdds-dropdown-disabled: var(--sdds-grey-400);
+  --sdds-dropdown-border: var(--sdds-grey-100);
+  --sdds-dropdown-label-inside: var(--sdds-grey-700);
+  --sdds-dropdown-label-outside: var(--sdds-grey-958);
+  --sdds-dropdown-placeholder: var(--sdds-grey-700);
+  --sdds-dropdown-border-not-focused: var(--sdds-grey-600);
+  --sdds-dropdown-option-color: var(--sdds-grey-900);
+  --sdds-dropdown-option-disabled-color: var(--sdds-grey-400);
+}
+:root .sdds-mode-variant-primary,
+.sdds-mode-light .sdds-mode-variant-primary {
+  --sdds-dropdown-background: var(--sdds-grey-50);
+  --sdds-dropdown-background-hover: var(--sdds-grey-100);
+}
+:root .sdds-mode-variant-secondary,
+.sdds-mode-light .sdds-mode-variant-secondary {
+  --sdds-dropdown-background: var(--sdds-white);
+  --sdds-dropdown-background-hover: var(--sdds-grey-50);
+}
+
+.sdds-mode-dark {
+  --sdds-link-text-decoration: none;
+  --sdds-dropdown-color: var(--sdds-grey-400);
+  --sdds-dropdown-background: var(--sdds-grey-868);
+  --sdds-dropdown-background-hover: var(--sdds-grey-800);
+  --sdds-dropdown-background-disabled: var(--sdds-grey-900);
+  --sdds-dropdown-disabled: var(--sdds-grey-800);
+  --sdds-dropdown-border: var(--sdds-grey-800);
+  --sdds-dropdown-label-inside: var(--sdds-grey-400);
+  --sdds-dropdown-label-outside: var(--sdds-grey-100);
+  --sdds-dropdown-placeholder: var(--sdds-grey-400);
+  --sdds-dropdown-border-not-focused: var(--sdds-grey-600);
+  --sdds-dropdown-option-color: var(--sdds-grey-50);
+  --sdds-dropdown-option-disabled-color: var(--sdds-grey-800);
+}
+.sdds-mode-dark .sdds-mode-variant-primary {
+  --sdds-dropdown-background: var(--sdds-grey-868);
+  --sdds-dropdown-background-hover: var(--sdds-grey-800);
+}
+.sdds-mode-dark .sdds-mode-variant-secondary {
+  --sdds-dropdown-background: var(--sdds-grey-900);
+  --sdds-dropdown-background-hover: var(--sdds-grey-800);
+}
+
+.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-dropdown-label-inside);
+}
+
+.sdds-dropdown-label-outside {
+  font: var(--sdds-detail-ex-05);
+  letter-spacing: var(--sdds-detail-ex-05-ls);
+  display: block;
+  color: var(--sdds-dropdown-label-outside);
+  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,
+.sdds-mode-light {
+  /* This one is overriding the --sdds-link css for the link component. */
+  --sdds-link-text-decoration: none;
+  --sdds-dropdown-color: var(--sdds-grey-958);
+  --sdds-dropdown-background: var(--sdds-grey-50);
+  --sdds-dropdown-background-hover: var(--sdds-grey-100);
+  --sdds-dropdown-background-disabled: var(--sdds-white);
+  --sdds-dropdown-disabled: var(--sdds-grey-400);
+  --sdds-dropdown-border: var(--sdds-grey-100);
+  --sdds-dropdown-label-inside: var(--sdds-grey-700);
+  --sdds-dropdown-label-outside: var(--sdds-grey-958);
+  --sdds-dropdown-placeholder: var(--sdds-grey-700);
+  --sdds-dropdown-border-not-focused: var(--sdds-grey-600);
+  --sdds-dropdown-option-color: var(--sdds-grey-900);
+  --sdds-dropdown-option-disabled-color: var(--sdds-grey-400);
+}
+:root .sdds-mode-variant-primary,
+.sdds-mode-light .sdds-mode-variant-primary {
+  --sdds-dropdown-background: var(--sdds-grey-50);
+  --sdds-dropdown-background-hover: var(--sdds-grey-100);
+}
+:root .sdds-mode-variant-secondary,
+.sdds-mode-light .sdds-mode-variant-secondary {
+  --sdds-dropdown-background: var(--sdds-white);
+  --sdds-dropdown-background-hover: var(--sdds-grey-50);
+}
+
+.sdds-mode-dark {
+  --sdds-link-text-decoration: none;
+  --sdds-dropdown-color: var(--sdds-grey-400);
+  --sdds-dropdown-background: var(--sdds-grey-868);
+  --sdds-dropdown-background-hover: var(--sdds-grey-800);
+  --sdds-dropdown-background-disabled: var(--sdds-grey-900);
+  --sdds-dropdown-disabled: var(--sdds-grey-800);
+  --sdds-dropdown-border: var(--sdds-grey-800);
+  --sdds-dropdown-label-inside: var(--sdds-grey-400);
+  --sdds-dropdown-label-outside: var(--sdds-grey-100);
+  --sdds-dropdown-placeholder: var(--sdds-grey-400);
+  --sdds-dropdown-border-not-focused: var(--sdds-grey-600);
+  --sdds-dropdown-option-color: var(--sdds-grey-50);
+  --sdds-dropdown-option-disabled-color: var(--sdds-grey-800);
+}
+.sdds-mode-dark .sdds-mode-variant-primary {
+  --sdds-dropdown-background: var(--sdds-grey-868);
+  --sdds-dropdown-background-hover: var(--sdds-grey-800);
+}
+.sdds-mode-dark .sdds-mode-variant-secondary {
+  --sdds-dropdown-background: var(--sdds-grey-900);
+  --sdds-dropdown-background-hover: var(--sdds-grey-800);
+}
+
+/* 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-mode-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-background-hover: var(--sdds-blue-800);
+  --sdds-checkbox-background-focus: var(--sdds-blue-800);
+  --sdds-checkbox-disabled: var(--sdds-grey-400);
+  --sdds-checkbox-background-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-background-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-mode-dark,
+.sdds-mode-light .sdds-mode-dark {
+  --sdds-checkbox-color: var(--sdds-white);
+  --sdds-checkbox-interaction-01: var(--sdds-white);
+  --sdds-checkbox-interaction-02: var(--sdds-grey-958);
+  --sdds-checkbox-background-hover: white;
+  --sdds-checkbox-background-focus: white;
+  --sdds-checkbox-disabled: white;
+  --sdds-checkbox-background-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-background-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-4);
+  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-background-hover);
+  opacity: 0.12;
+}
+.sdds-checkbox-item .sdds-form-input[type=checkbox]:focus::before {
+  background-color: var(--sdds-checkbox-background-focus);
+  opacity: 0.24;
+  transition: opacity 0.2s ease-in-out;
+}
+.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-background-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-background-img-disabled);
+  background-color: var(--sdds-checkbox-interaction-02);
+  color: var(--sdds-checkbox-color-disabled-after);
+}
+
+:host,
+::slotted(*) {
+  color: var(--sdds-grey-958);
+  box-sizing: border-box;
+  box-sizing: border-box;
+}
+:host *,
+::slotted(*) * {
+  box-sizing: border-box;
+}
+
+:host,
+::slotted(*) {
+  --sdds-dropdown-label-outside: var(--sdds-dropdown-label-outside);
+  --sdds-dropdown-label-outside-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-dropdown-color);
+  display: flex;
+  align-items: center;
+  background-color: var(--sdds-dropdown-background);
+  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-dropdown-border-not-focused);
+  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-dropdown-border-not-focused);
+}
+.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-dropdown-border-not-focused);
+}
+.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-dropdown-link);
+  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: 100;
+  background-color: var(--sdds-dropdown-background);
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: 100%;
+  max-height: 360px;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 0 1px 1px;
+  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
+  border-left-color: var(--sdds-dropdown-border);
+  border-right-color: var(--sdds-dropdown-border);
+  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-dropdown-option-disabled-color);
+  border: none;
+  padding: 0 16px;
+}
+:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle .sdds-dropdown-placeholder {
+  color: var(--sdds-dropdown-placeholder);
+}
+:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle .sdds-dropdown-label-inside {
+  color: var(--sdds-dropdown-label-inside);
+}
+: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-dropdown-background);
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid var(--sdds-dropdown-border);
+  opacity: 0;
+  visibility: hidden;
+  cursor: pointer;
+  box-sizing: border-box;
+  color: var(--sdds-dropdown-option-color);
+}
+: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-background-hover);
+}
+:host ::slotted(sdds-dropdown-option:hover:not(:focus):not(sdds-dropdown-option.selected)) {
+  background-color: var(--sdds-dropdown-background-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-dropdown-background-hover);
+  border-top: 1px solid var(--sdds-dropdown-border);
+  border-bottom: 1px solid var(--sdds-dropdown-border);
+}
+: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-dropdown-option-disabled-color);
+  background-color: var(--sdds-dropdown-background-disabled);
+}
+
+: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-dropdown-border);
+}
+
+.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);
+}
+.sdds-option-checkmark path {
+  color: var(--sdds-dropdown-option-color);
+}
+
+: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-dropdown-label-inside);
+  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;
+}