@db-ux/core-foundations 4.2.2 → 4.2.3

package/build/styles/defaults/default-root.css

@@ -1,4 +1,4 @@
-@layer variables{:is(:root,:host){--db-adaptive-bg-basic-level-1-default:var(
+@layer variables{:host,:root{--db-adaptive-bg-basic-level-1-default:var(
     	--db-neutral-bg-basic-level-1-default
     );--db-adaptive-bg-basic-level-1-hovered:var(
     	--db-neutral-bg-basic-level-1-hovered
@@ -94,4 +94,4 @@
     	--db-neutral-on-bg-vibrant-hovered
     );--db-adaptive-on-bg-vibrant-pressed:var(
     	--db-neutral-on-bg-vibrant-pressed
-    )}}:is(:root,:host){background-color:var(--db-neutral-bg-basic-level-1-default);color:var(--db-neutral-on-bg-basic-emphasis-100-default)}:is(:root,:host):after,:is(:root,:host):before{--db-icon-color:var(--db-neutral-on-bg-basic-emphasis-100-default)}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}:is(:root,:host){font:var(--db-type-body-md)}@layer variables{:is(:root,:host){--db-icon-font-weight:var(--db-base-body-icon-weight-md);--db-icon-font-size:var(--db-base-body-icon-font-size-md)}}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{:is(:root,:host){--db-sizing-3xs:var(--db-sizing-regular-3xs);--db-sizing-2xs:var(--db-sizing-regular-2xs);--db-sizing-xs:var(--db-sizing-regular-xs);--db-sizing-sm:var(--db-sizing-regular-sm);--db-sizing-md:var(--db-sizing-regular-md);--db-sizing-lg:var(--db-sizing-regular-lg);--db-sizing-xl:var(--db-sizing-regular-xl);--db-sizing-2xl:var(--db-sizing-regular-2xl);--db-sizing-3xl:var(--db-sizing-regular-3xl);--db-spacing-fixed-3xs:var(--db-spacing-fixed-regular-3xs);--db-spacing-fixed-2xs:var(--db-spacing-fixed-regular-2xs);--db-spacing-fixed-xs:var(--db-spacing-fixed-regular-xs);--db-spacing-fixed-sm:var(--db-spacing-fixed-regular-sm);--db-spacing-fixed-md:var(--db-spacing-fixed-regular-md);--db-spacing-fixed-lg:var(--db-spacing-fixed-regular-lg);--db-spacing-fixed-xl:var(--db-spacing-fixed-regular-xl);--db-spacing-fixed-2xl:var(--db-spacing-fixed-regular-2xl);--db-spacing-fixed-3xl:var(--db-spacing-fixed-regular-3xl)}@media screen and (width <= 48em){:is(:root,:host){--db-spacing-responsive-3xs:var(--db-spacing-responsive-regular-mobile-3xs);--db-spacing-responsive-2xs:var(--db-spacing-responsive-regular-mobile-2xs);--db-spacing-responsive-xs:var(--db-spacing-responsive-regular-mobile-xs);--db-spacing-responsive-sm:var(--db-spacing-responsive-regular-mobile-sm);--db-spacing-responsive-md:var(--db-spacing-responsive-regular-mobile-md);--db-spacing-responsive-lg:var(--db-spacing-responsive-regular-mobile-lg);--db-spacing-responsive-xl:var(--db-spacing-responsive-regular-mobile-xl);--db-spacing-responsive-2xl:var(--db-spacing-responsive-regular-mobile-2xl);--db-spacing-responsive-3xl:var(--db-spacing-responsive-regular-mobile-3xl)}}@media screen and (48em < width <= 64em){:is(:root,:host){--db-spacing-responsive-3xs:var(--db-spacing-responsive-regular-tablet-3xs);--db-spacing-responsive-2xs:var(--db-spacing-responsive-regular-tablet-2xs);--db-spacing-responsive-xs:var(--db-spacing-responsive-regular-tablet-xs);--db-spacing-responsive-sm:var(--db-spacing-responsive-regular-tablet-sm);--db-spacing-responsive-md:var(--db-spacing-responsive-regular-tablet-md);--db-spacing-responsive-lg:var(--db-spacing-responsive-regular-tablet-lg);--db-spacing-responsive-xl:var(--db-spacing-responsive-regular-tablet-xl);--db-spacing-responsive-2xl:var(--db-spacing-responsive-regular-tablet-2xl);--db-spacing-responsive-3xl:var(--db-spacing-responsive-regular-tablet-3xl)}}@media screen and (64em < width){:is(:root,:host){--db-spacing-responsive-3xs:var(--db-spacing-responsive-regular-desktop-3xs);--db-spacing-responsive-2xs:var(--db-spacing-responsive-regular-desktop-2xs);--db-spacing-responsive-xs:var(--db-spacing-responsive-regular-desktop-xs);--db-spacing-responsive-sm:var(--db-spacing-responsive-regular-desktop-sm);--db-spacing-responsive-md:var(--db-spacing-responsive-regular-desktop-md);--db-spacing-responsive-lg:var(--db-spacing-responsive-regular-desktop-lg);--db-spacing-responsive-xl:var(--db-spacing-responsive-regular-desktop-xl);--db-spacing-responsive-2xl:var(--db-spacing-responsive-regular-desktop-2xl);--db-spacing-responsive-3xl:var(--db-spacing-responsive-regular-desktop-3xl)}}}@layer variables{}@layer variables{}@layer variables{}@layer variables{@media screen and (width <= 48em){:is(:root,:host){--db-type-headline-3xs:var(--db-typography-regular-mobile-headline-3xs);--db-base-headline-icon-weight-3xs:var(--db-base-icon-weight-regular-mobile-headline-3xs);--db-base-headline-icon-font-size-3xs:var(--db-base-icon-font-size-regular-mobile-headline-3xs);--db-type-headline-2xs:var(--db-typography-regular-mobile-headline-2xs);--db-base-headline-icon-weight-2xs:var(--db-base-icon-weight-regular-mobile-headline-2xs);--db-base-headline-icon-font-size-2xs:var(--db-base-icon-font-size-regular-mobile-headline-2xs);--db-type-headline-xs:var(--db-typography-regular-mobile-headline-xs);--db-base-headline-icon-weight-xs:var(--db-base-icon-weight-regular-mobile-headline-xs);--db-base-headline-icon-font-size-xs:var(--db-base-icon-font-size-regular-mobile-headline-xs);--db-type-headline-sm:var(--db-typography-regular-mobile-headline-sm);--db-base-headline-icon-weight-sm:var(--db-base-icon-weight-regular-mobile-headline-sm);--db-base-headline-icon-font-size-sm:var(--db-base-icon-font-size-regular-mobile-headline-sm);--db-type-headline-md:var(--db-typography-regular-mobile-headline-md);--db-base-headline-icon-weight-md:var(--db-base-icon-weight-regular-mobile-headline-md);--db-base-headline-icon-font-size-md:var(--db-base-icon-font-size-regular-mobile-headline-md);--db-type-headline-lg:var(--db-typography-regular-mobile-headline-lg);--db-base-headline-icon-weight-lg:var(--db-base-icon-weight-regular-mobile-headline-lg);--db-base-headline-icon-font-size-lg:var(--db-base-icon-font-size-regular-mobile-headline-lg);--db-type-headline-xl:var(--db-typography-regular-mobile-headline-xl);--db-base-headline-icon-weight-xl:var(--db-base-icon-weight-regular-mobile-headline-xl);--db-base-headline-icon-font-size-xl:var(--db-base-icon-font-size-regular-mobile-headline-xl);--db-type-headline-2xl:var(--db-typography-regular-mobile-headline-2xl);--db-base-headline-icon-weight-2xl:var(--db-base-icon-weight-regular-mobile-headline-2xl);--db-base-headline-icon-font-size-2xl:var(--db-base-icon-font-size-regular-mobile-headline-2xl);--db-type-headline-3xl:var(--db-typography-regular-mobile-headline-3xl);--db-base-headline-icon-weight-3xl:var(--db-base-icon-weight-regular-mobile-headline-3xl);--db-base-headline-icon-font-size-3xl:var(--db-base-icon-font-size-regular-mobile-headline-3xl)}}@media screen and (48em < width <= 64em){:is(:root,:host){--db-type-headline-3xs:var(--db-typography-regular-tablet-headline-3xs);--db-base-headline-icon-weight-3xs:var(--db-base-icon-weight-regular-tablet-headline-3xs);--db-base-headline-icon-font-size-3xs:var(--db-base-icon-font-size-regular-tablet-headline-3xs);--db-type-headline-2xs:var(--db-typography-regular-tablet-headline-2xs);--db-base-headline-icon-weight-2xs:var(--db-base-icon-weight-regular-tablet-headline-2xs);--db-base-headline-icon-font-size-2xs:var(--db-base-icon-font-size-regular-tablet-headline-2xs);--db-type-headline-xs:var(--db-typography-regular-tablet-headline-xs);--db-base-headline-icon-weight-xs:var(--db-base-icon-weight-regular-tablet-headline-xs);--db-base-headline-icon-font-size-xs:var(--db-base-icon-font-size-regular-tablet-headline-xs);--db-type-headline-sm:var(--db-typography-regular-tablet-headline-sm);--db-base-headline-icon-weight-sm:var(--db-base-icon-weight-regular-tablet-headline-sm);--db-base-headline-icon-font-size-sm:var(--db-base-icon-font-size-regular-tablet-headline-sm);--db-type-headline-md:var(--db-typography-regular-tablet-headline-md);--db-base-headline-icon-weight-md:var(--db-base-icon-weight-regular-tablet-headline-md);--db-base-headline-icon-font-size-md:var(--db-base-icon-font-size-regular-tablet-headline-md);--db-type-headline-lg:var(--db-typography-regular-tablet-headline-lg);--db-base-headline-icon-weight-lg:var(--db-base-icon-weight-regular-tablet-headline-lg);--db-base-headline-icon-font-size-lg:var(--db-base-icon-font-size-regular-tablet-headline-lg);--db-type-headline-xl:var(--db-typography-regular-tablet-headline-xl);--db-base-headline-icon-weight-xl:var(--db-base-icon-weight-regular-tablet-headline-xl);--db-base-headline-icon-font-size-xl:var(--db-base-icon-font-size-regular-tablet-headline-xl);--db-type-headline-2xl:var(--db-typography-regular-tablet-headline-2xl);--db-base-headline-icon-weight-2xl:var(--db-base-icon-weight-regular-tablet-headline-2xl);--db-base-headline-icon-font-size-2xl:var(--db-base-icon-font-size-regular-tablet-headline-2xl);--db-type-headline-3xl:var(--db-typography-regular-tablet-headline-3xl);--db-base-headline-icon-weight-3xl:var(--db-base-icon-weight-regular-tablet-headline-3xl);--db-base-headline-icon-font-size-3xl:var(--db-base-icon-font-size-regular-tablet-headline-3xl)}}@media screen and (64em < width){:is(:root,:host){--db-type-headline-3xs:var(--db-typography-regular-desktop-headline-3xs);--db-base-headline-icon-weight-3xs:var(--db-base-icon-weight-regular-desktop-headline-3xs);--db-base-headline-icon-font-size-3xs:var(--db-base-icon-font-size-regular-desktop-headline-3xs);--db-type-headline-2xs:var(--db-typography-regular-desktop-headline-2xs);--db-base-headline-icon-weight-2xs:var(--db-base-icon-weight-regular-desktop-headline-2xs);--db-base-headline-icon-font-size-2xs:var(--db-base-icon-font-size-regular-desktop-headline-2xs);--db-type-headline-xs:var(--db-typography-regular-desktop-headline-xs);--db-base-headline-icon-weight-xs:var(--db-base-icon-weight-regular-desktop-headline-xs);--db-base-headline-icon-font-size-xs:var(--db-base-icon-font-size-regular-desktop-headline-xs);--db-type-headline-sm:var(--db-typography-regular-desktop-headline-sm);--db-base-headline-icon-weight-sm:var(--db-base-icon-weight-regular-desktop-headline-sm);--db-base-headline-icon-font-size-sm:var(--db-base-icon-font-size-regular-desktop-headline-sm);--db-type-headline-md:var(--db-typography-regular-desktop-headline-md);--db-base-headline-icon-weight-md:var(--db-base-icon-weight-regular-desktop-headline-md);--db-base-headline-icon-font-size-md:var(--db-base-icon-font-size-regular-desktop-headline-md);--db-type-headline-lg:var(--db-typography-regular-desktop-headline-lg);--db-base-headline-icon-weight-lg:var(--db-base-icon-weight-regular-desktop-headline-lg);--db-base-headline-icon-font-size-lg:var(--db-base-icon-font-size-regular-desktop-headline-lg);--db-type-headline-xl:var(--db-typography-regular-desktop-headline-xl);--db-base-headline-icon-weight-xl:var(--db-base-icon-weight-regular-desktop-headline-xl);--db-base-headline-icon-font-size-xl:var(--db-base-icon-font-size-regular-desktop-headline-xl);--db-type-headline-2xl:var(--db-typography-regular-desktop-headline-2xl);--db-base-headline-icon-weight-2xl:var(--db-base-icon-weight-regular-desktop-headline-2xl);--db-base-headline-icon-font-size-2xl:var(--db-base-icon-font-size-regular-desktop-headline-2xl);--db-type-headline-3xl:var(--db-typography-regular-desktop-headline-3xl);--db-base-headline-icon-weight-3xl:var(--db-base-icon-weight-regular-desktop-headline-3xl);--db-base-headline-icon-font-size-3xl:var(--db-base-icon-font-size-regular-desktop-headline-3xl)}}}@layer variables{@media screen and (width <= 48em){:is(:root,:host){--db-type-body-3xs:var(--db-typography-regular-mobile-body-3xs);--db-base-body-icon-weight-3xs:var(--db-base-icon-weight-regular-mobile-body-3xs);--db-base-body-icon-font-size-3xs:var(--db-base-icon-font-size-regular-mobile-body-3xs);--db-type-body-2xs:var(--db-typography-regular-mobile-body-2xs);--db-base-body-icon-weight-2xs:var(--db-base-icon-weight-regular-mobile-body-2xs);--db-base-body-icon-font-size-2xs:var(--db-base-icon-font-size-regular-mobile-body-2xs);--db-type-body-xs:var(--db-typography-regular-mobile-body-xs);--db-base-body-icon-weight-xs:var(--db-base-icon-weight-regular-mobile-body-xs);--db-base-body-icon-font-size-xs:var(--db-base-icon-font-size-regular-mobile-body-xs);--db-type-body-sm:var(--db-typography-regular-mobile-body-sm);--db-base-body-icon-weight-sm:var(--db-base-icon-weight-regular-mobile-body-sm);--db-base-body-icon-font-size-sm:var(--db-base-icon-font-size-regular-mobile-body-sm);--db-type-body-md:var(--db-typography-regular-mobile-body-md);--db-base-body-icon-weight-md:var(--db-base-icon-weight-regular-mobile-body-md);--db-base-body-icon-font-size-md:var(--db-base-icon-font-size-regular-mobile-body-md);--db-type-body-lg:var(--db-typography-regular-mobile-body-lg);--db-base-body-icon-weight-lg:var(--db-base-icon-weight-regular-mobile-body-lg);--db-base-body-icon-font-size-lg:var(--db-base-icon-font-size-regular-mobile-body-lg);--db-type-body-xl:var(--db-typography-regular-mobile-body-xl);--db-base-body-icon-weight-xl:var(--db-base-icon-weight-regular-mobile-body-xl);--db-base-body-icon-font-size-xl:var(--db-base-icon-font-size-regular-mobile-body-xl);--db-type-body-2xl:var(--db-typography-regular-mobile-body-2xl);--db-base-body-icon-weight-2xl:var(--db-base-icon-weight-regular-mobile-body-2xl);--db-base-body-icon-font-size-2xl:var(--db-base-icon-font-size-regular-mobile-body-2xl);--db-type-body-3xl:var(--db-typography-regular-mobile-body-3xl);--db-base-body-icon-weight-3xl:var(--db-base-icon-weight-regular-mobile-body-3xl);--db-base-body-icon-font-size-3xl:var(--db-base-icon-font-size-regular-mobile-body-3xl)}}@media screen and (48em < width <= 64em){:is(:root,:host){--db-type-body-3xs:var(--db-typography-regular-tablet-body-3xs);--db-base-body-icon-weight-3xs:var(--db-base-icon-weight-regular-tablet-body-3xs);--db-base-body-icon-font-size-3xs:var(--db-base-icon-font-size-regular-tablet-body-3xs);--db-type-body-2xs:var(--db-typography-regular-tablet-body-2xs);--db-base-body-icon-weight-2xs:var(--db-base-icon-weight-regular-tablet-body-2xs);--db-base-body-icon-font-size-2xs:var(--db-base-icon-font-size-regular-tablet-body-2xs);--db-type-body-xs:var(--db-typography-regular-tablet-body-xs);--db-base-body-icon-weight-xs:var(--db-base-icon-weight-regular-tablet-body-xs);--db-base-body-icon-font-size-xs:var(--db-base-icon-font-size-regular-tablet-body-xs);--db-type-body-sm:var(--db-typography-regular-tablet-body-sm);--db-base-body-icon-weight-sm:var(--db-base-icon-weight-regular-tablet-body-sm);--db-base-body-icon-font-size-sm:var(--db-base-icon-font-size-regular-tablet-body-sm);--db-type-body-md:var(--db-typography-regular-tablet-body-md);--db-base-body-icon-weight-md:var(--db-base-icon-weight-regular-tablet-body-md);--db-base-body-icon-font-size-md:var(--db-base-icon-font-size-regular-tablet-body-md);--db-type-body-lg:var(--db-typography-regular-tablet-body-lg);--db-base-body-icon-weight-lg:var(--db-base-icon-weight-regular-tablet-body-lg);--db-base-body-icon-font-size-lg:var(--db-base-icon-font-size-regular-tablet-body-lg);--db-type-body-xl:var(--db-typography-regular-tablet-body-xl);--db-base-body-icon-weight-xl:var(--db-base-icon-weight-regular-tablet-body-xl);--db-base-body-icon-font-size-xl:var(--db-base-icon-font-size-regular-tablet-body-xl);--db-type-body-2xl:var(--db-typography-regular-tablet-body-2xl);--db-base-body-icon-weight-2xl:var(--db-base-icon-weight-regular-tablet-body-2xl);--db-base-body-icon-font-size-2xl:var(--db-base-icon-font-size-regular-tablet-body-2xl);--db-type-body-3xl:var(--db-typography-regular-tablet-body-3xl);--db-base-body-icon-weight-3xl:var(--db-base-icon-weight-regular-tablet-body-3xl);--db-base-body-icon-font-size-3xl:var(--db-base-icon-font-size-regular-tablet-body-3xl)}}@media screen and (64em < width){:is(:root,:host){--db-type-body-3xs:var(--db-typography-regular-desktop-body-3xs);--db-base-body-icon-weight-3xs:var(--db-base-icon-weight-regular-desktop-body-3xs);--db-base-body-icon-font-size-3xs:var(--db-base-icon-font-size-regular-desktop-body-3xs);--db-type-body-2xs:var(--db-typography-regular-desktop-body-2xs);--db-base-body-icon-weight-2xs:var(--db-base-icon-weight-regular-desktop-body-2xs);--db-base-body-icon-font-size-2xs:var(--db-base-icon-font-size-regular-desktop-body-2xs);--db-type-body-xs:var(--db-typography-regular-desktop-body-xs);--db-base-body-icon-weight-xs:var(--db-base-icon-weight-regular-desktop-body-xs);--db-base-body-icon-font-size-xs:var(--db-base-icon-font-size-regular-desktop-body-xs);--db-type-body-sm:var(--db-typography-regular-desktop-body-sm);--db-base-body-icon-weight-sm:var(--db-base-icon-weight-regular-desktop-body-sm);--db-base-body-icon-font-size-sm:var(--db-base-icon-font-size-regular-desktop-body-sm);--db-type-body-md:var(--db-typography-regular-desktop-body-md);--db-base-body-icon-weight-md:var(--db-base-icon-weight-regular-desktop-body-md);--db-base-body-icon-font-size-md:var(--db-base-icon-font-size-regular-desktop-body-md);--db-type-body-lg:var(--db-typography-regular-desktop-body-lg);--db-base-body-icon-weight-lg:var(--db-base-icon-weight-regular-desktop-body-lg);--db-base-body-icon-font-size-lg:var(--db-base-icon-font-size-regular-desktop-body-lg);--db-type-body-xl:var(--db-typography-regular-desktop-body-xl);--db-base-body-icon-weight-xl:var(--db-base-icon-weight-regular-desktop-body-xl);--db-base-body-icon-font-size-xl:var(--db-base-icon-font-size-regular-desktop-body-xl);--db-type-body-2xl:var(--db-typography-regular-desktop-body-2xl);--db-base-body-icon-weight-2xl:var(--db-base-icon-weight-regular-desktop-body-2xl);--db-base-body-icon-font-size-2xl:var(--db-base-icon-font-size-regular-desktop-body-2xl);--db-type-body-3xl:var(--db-typography-regular-desktop-body-3xl);--db-base-body-icon-weight-3xl:var(--db-base-icon-weight-regular-desktop-body-3xl);--db-base-body-icon-font-size-3xl:var(--db-base-icon-font-size-regular-desktop-body-3xl)}}}@layer variables{}@layer variables{}
+    )}}:host,:root{background-color:var(--db-neutral-bg-basic-level-1-default);color:var(--db-neutral-on-bg-basic-emphasis-100-default)}:root:after,:root:before{--db-icon-color:var(--db-neutral-on-bg-basic-emphasis-100-default)}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}:host,:root{font:var(--db-type-body-md)}@layer variables{:host,:root{--db-icon-font-weight:var(--db-base-body-icon-weight-md);--db-icon-font-size:var(--db-base-body-icon-font-size-md)}}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{:host,:root{--db-sizing-3xs:var(--db-sizing-regular-3xs);--db-sizing-2xs:var(--db-sizing-regular-2xs);--db-sizing-xs:var(--db-sizing-regular-xs);--db-sizing-sm:var(--db-sizing-regular-sm);--db-sizing-md:var(--db-sizing-regular-md);--db-sizing-lg:var(--db-sizing-regular-lg);--db-sizing-xl:var(--db-sizing-regular-xl);--db-sizing-2xl:var(--db-sizing-regular-2xl);--db-sizing-3xl:var(--db-sizing-regular-3xl);--db-spacing-fixed-3xs:var(--db-spacing-fixed-regular-3xs);--db-spacing-fixed-2xs:var(--db-spacing-fixed-regular-2xs);--db-spacing-fixed-xs:var(--db-spacing-fixed-regular-xs);--db-spacing-fixed-sm:var(--db-spacing-fixed-regular-sm);--db-spacing-fixed-md:var(--db-spacing-fixed-regular-md);--db-spacing-fixed-lg:var(--db-spacing-fixed-regular-lg);--db-spacing-fixed-xl:var(--db-spacing-fixed-regular-xl);--db-spacing-fixed-2xl:var(--db-spacing-fixed-regular-2xl);--db-spacing-fixed-3xl:var(--db-spacing-fixed-regular-3xl)}@media screen and (width <= 48em){:host,:root{--db-spacing-responsive-3xs:var(--db-spacing-responsive-regular-mobile-3xs);--db-spacing-responsive-2xs:var(--db-spacing-responsive-regular-mobile-2xs);--db-spacing-responsive-xs:var(--db-spacing-responsive-regular-mobile-xs);--db-spacing-responsive-sm:var(--db-spacing-responsive-regular-mobile-sm);--db-spacing-responsive-md:var(--db-spacing-responsive-regular-mobile-md);--db-spacing-responsive-lg:var(--db-spacing-responsive-regular-mobile-lg);--db-spacing-responsive-xl:var(--db-spacing-responsive-regular-mobile-xl);--db-spacing-responsive-2xl:var(--db-spacing-responsive-regular-mobile-2xl);--db-spacing-responsive-3xl:var(--db-spacing-responsive-regular-mobile-3xl)}}@media screen and (48em < width <= 64em){:host,:root{--db-spacing-responsive-3xs:var(--db-spacing-responsive-regular-tablet-3xs);--db-spacing-responsive-2xs:var(--db-spacing-responsive-regular-tablet-2xs);--db-spacing-responsive-xs:var(--db-spacing-responsive-regular-tablet-xs);--db-spacing-responsive-sm:var(--db-spacing-responsive-regular-tablet-sm);--db-spacing-responsive-md:var(--db-spacing-responsive-regular-tablet-md);--db-spacing-responsive-lg:var(--db-spacing-responsive-regular-tablet-lg);--db-spacing-responsive-xl:var(--db-spacing-responsive-regular-tablet-xl);--db-spacing-responsive-2xl:var(--db-spacing-responsive-regular-tablet-2xl);--db-spacing-responsive-3xl:var(--db-spacing-responsive-regular-tablet-3xl)}}@media screen and (64em < width){:host,:root{--db-spacing-responsive-3xs:var(--db-spacing-responsive-regular-desktop-3xs);--db-spacing-responsive-2xs:var(--db-spacing-responsive-regular-desktop-2xs);--db-spacing-responsive-xs:var(--db-spacing-responsive-regular-desktop-xs);--db-spacing-responsive-sm:var(--db-spacing-responsive-regular-desktop-sm);--db-spacing-responsive-md:var(--db-spacing-responsive-regular-desktop-md);--db-spacing-responsive-lg:var(--db-spacing-responsive-regular-desktop-lg);--db-spacing-responsive-xl:var(--db-spacing-responsive-regular-desktop-xl);--db-spacing-responsive-2xl:var(--db-spacing-responsive-regular-desktop-2xl);--db-spacing-responsive-3xl:var(--db-spacing-responsive-regular-desktop-3xl)}}}@layer variables{}@layer variables{}@layer variables{}@layer variables{@media screen and (width <= 48em){:host,:root{--db-type-headline-3xs:var(--db-typography-regular-mobile-headline-3xs);--db-base-headline-icon-weight-3xs:var(--db-base-icon-weight-regular-mobile-headline-3xs);--db-base-headline-icon-font-size-3xs:var(--db-base-icon-font-size-regular-mobile-headline-3xs);--db-type-headline-2xs:var(--db-typography-regular-mobile-headline-2xs);--db-base-headline-icon-weight-2xs:var(--db-base-icon-weight-regular-mobile-headline-2xs);--db-base-headline-icon-font-size-2xs:var(--db-base-icon-font-size-regular-mobile-headline-2xs);--db-type-headline-xs:var(--db-typography-regular-mobile-headline-xs);--db-base-headline-icon-weight-xs:var(--db-base-icon-weight-regular-mobile-headline-xs);--db-base-headline-icon-font-size-xs:var(--db-base-icon-font-size-regular-mobile-headline-xs);--db-type-headline-sm:var(--db-typography-regular-mobile-headline-sm);--db-base-headline-icon-weight-sm:var(--db-base-icon-weight-regular-mobile-headline-sm);--db-base-headline-icon-font-size-sm:var(--db-base-icon-font-size-regular-mobile-headline-sm);--db-type-headline-md:var(--db-typography-regular-mobile-headline-md);--db-base-headline-icon-weight-md:var(--db-base-icon-weight-regular-mobile-headline-md);--db-base-headline-icon-font-size-md:var(--db-base-icon-font-size-regular-mobile-headline-md);--db-type-headline-lg:var(--db-typography-regular-mobile-headline-lg);--db-base-headline-icon-weight-lg:var(--db-base-icon-weight-regular-mobile-headline-lg);--db-base-headline-icon-font-size-lg:var(--db-base-icon-font-size-regular-mobile-headline-lg);--db-type-headline-xl:var(--db-typography-regular-mobile-headline-xl);--db-base-headline-icon-weight-xl:var(--db-base-icon-weight-regular-mobile-headline-xl);--db-base-headline-icon-font-size-xl:var(--db-base-icon-font-size-regular-mobile-headline-xl);--db-type-headline-2xl:var(--db-typography-regular-mobile-headline-2xl);--db-base-headline-icon-weight-2xl:var(--db-base-icon-weight-regular-mobile-headline-2xl);--db-base-headline-icon-font-size-2xl:var(--db-base-icon-font-size-regular-mobile-headline-2xl);--db-type-headline-3xl:var(--db-typography-regular-mobile-headline-3xl);--db-base-headline-icon-weight-3xl:var(--db-base-icon-weight-regular-mobile-headline-3xl);--db-base-headline-icon-font-size-3xl:var(--db-base-icon-font-size-regular-mobile-headline-3xl)}}@media screen and (48em < width <= 64em){:host,:root{--db-type-headline-3xs:var(--db-typography-regular-tablet-headline-3xs);--db-base-headline-icon-weight-3xs:var(--db-base-icon-weight-regular-tablet-headline-3xs);--db-base-headline-icon-font-size-3xs:var(--db-base-icon-font-size-regular-tablet-headline-3xs);--db-type-headline-2xs:var(--db-typography-regular-tablet-headline-2xs);--db-base-headline-icon-weight-2xs:var(--db-base-icon-weight-regular-tablet-headline-2xs);--db-base-headline-icon-font-size-2xs:var(--db-base-icon-font-size-regular-tablet-headline-2xs);--db-type-headline-xs:var(--db-typography-regular-tablet-headline-xs);--db-base-headline-icon-weight-xs:var(--db-base-icon-weight-regular-tablet-headline-xs);--db-base-headline-icon-font-size-xs:var(--db-base-icon-font-size-regular-tablet-headline-xs);--db-type-headline-sm:var(--db-typography-regular-tablet-headline-sm);--db-base-headline-icon-weight-sm:var(--db-base-icon-weight-regular-tablet-headline-sm);--db-base-headline-icon-font-size-sm:var(--db-base-icon-font-size-regular-tablet-headline-sm);--db-type-headline-md:var(--db-typography-regular-tablet-headline-md);--db-base-headline-icon-weight-md:var(--db-base-icon-weight-regular-tablet-headline-md);--db-base-headline-icon-font-size-md:var(--db-base-icon-font-size-regular-tablet-headline-md);--db-type-headline-lg:var(--db-typography-regular-tablet-headline-lg);--db-base-headline-icon-weight-lg:var(--db-base-icon-weight-regular-tablet-headline-lg);--db-base-headline-icon-font-size-lg:var(--db-base-icon-font-size-regular-tablet-headline-lg);--db-type-headline-xl:var(--db-typography-regular-tablet-headline-xl);--db-base-headline-icon-weight-xl:var(--db-base-icon-weight-regular-tablet-headline-xl);--db-base-headline-icon-font-size-xl:var(--db-base-icon-font-size-regular-tablet-headline-xl);--db-type-headline-2xl:var(--db-typography-regular-tablet-headline-2xl);--db-base-headline-icon-weight-2xl:var(--db-base-icon-weight-regular-tablet-headline-2xl);--db-base-headline-icon-font-size-2xl:var(--db-base-icon-font-size-regular-tablet-headline-2xl);--db-type-headline-3xl:var(--db-typography-regular-tablet-headline-3xl);--db-base-headline-icon-weight-3xl:var(--db-base-icon-weight-regular-tablet-headline-3xl);--db-base-headline-icon-font-size-3xl:var(--db-base-icon-font-size-regular-tablet-headline-3xl)}}@media screen and (64em < width){:host,:root{--db-type-headline-3xs:var(--db-typography-regular-desktop-headline-3xs);--db-base-headline-icon-weight-3xs:var(--db-base-icon-weight-regular-desktop-headline-3xs);--db-base-headline-icon-font-size-3xs:var(--db-base-icon-font-size-regular-desktop-headline-3xs);--db-type-headline-2xs:var(--db-typography-regular-desktop-headline-2xs);--db-base-headline-icon-weight-2xs:var(--db-base-icon-weight-regular-desktop-headline-2xs);--db-base-headline-icon-font-size-2xs:var(--db-base-icon-font-size-regular-desktop-headline-2xs);--db-type-headline-xs:var(--db-typography-regular-desktop-headline-xs);--db-base-headline-icon-weight-xs:var(--db-base-icon-weight-regular-desktop-headline-xs);--db-base-headline-icon-font-size-xs:var(--db-base-icon-font-size-regular-desktop-headline-xs);--db-type-headline-sm:var(--db-typography-regular-desktop-headline-sm);--db-base-headline-icon-weight-sm:var(--db-base-icon-weight-regular-desktop-headline-sm);--db-base-headline-icon-font-size-sm:var(--db-base-icon-font-size-regular-desktop-headline-sm);--db-type-headline-md:var(--db-typography-regular-desktop-headline-md);--db-base-headline-icon-weight-md:var(--db-base-icon-weight-regular-desktop-headline-md);--db-base-headline-icon-font-size-md:var(--db-base-icon-font-size-regular-desktop-headline-md);--db-type-headline-lg:var(--db-typography-regular-desktop-headline-lg);--db-base-headline-icon-weight-lg:var(--db-base-icon-weight-regular-desktop-headline-lg);--db-base-headline-icon-font-size-lg:var(--db-base-icon-font-size-regular-desktop-headline-lg);--db-type-headline-xl:var(--db-typography-regular-desktop-headline-xl);--db-base-headline-icon-weight-xl:var(--db-base-icon-weight-regular-desktop-headline-xl);--db-base-headline-icon-font-size-xl:var(--db-base-icon-font-size-regular-desktop-headline-xl);--db-type-headline-2xl:var(--db-typography-regular-desktop-headline-2xl);--db-base-headline-icon-weight-2xl:var(--db-base-icon-weight-regular-desktop-headline-2xl);--db-base-headline-icon-font-size-2xl:var(--db-base-icon-font-size-regular-desktop-headline-2xl);--db-type-headline-3xl:var(--db-typography-regular-desktop-headline-3xl);--db-base-headline-icon-weight-3xl:var(--db-base-icon-weight-regular-desktop-headline-3xl);--db-base-headline-icon-font-size-3xl:var(--db-base-icon-font-size-regular-desktop-headline-3xl)}}}@layer variables{@media screen and (width <= 48em){:host,:root{--db-type-body-3xs:var(--db-typography-regular-mobile-body-3xs);--db-base-body-icon-weight-3xs:var(--db-base-icon-weight-regular-mobile-body-3xs);--db-base-body-icon-font-size-3xs:var(--db-base-icon-font-size-regular-mobile-body-3xs);--db-type-body-2xs:var(--db-typography-regular-mobile-body-2xs);--db-base-body-icon-weight-2xs:var(--db-base-icon-weight-regular-mobile-body-2xs);--db-base-body-icon-font-size-2xs:var(--db-base-icon-font-size-regular-mobile-body-2xs);--db-type-body-xs:var(--db-typography-regular-mobile-body-xs);--db-base-body-icon-weight-xs:var(--db-base-icon-weight-regular-mobile-body-xs);--db-base-body-icon-font-size-xs:var(--db-base-icon-font-size-regular-mobile-body-xs);--db-type-body-sm:var(--db-typography-regular-mobile-body-sm);--db-base-body-icon-weight-sm:var(--db-base-icon-weight-regular-mobile-body-sm);--db-base-body-icon-font-size-sm:var(--db-base-icon-font-size-regular-mobile-body-sm);--db-type-body-md:var(--db-typography-regular-mobile-body-md);--db-base-body-icon-weight-md:var(--db-base-icon-weight-regular-mobile-body-md);--db-base-body-icon-font-size-md:var(--db-base-icon-font-size-regular-mobile-body-md);--db-type-body-lg:var(--db-typography-regular-mobile-body-lg);--db-base-body-icon-weight-lg:var(--db-base-icon-weight-regular-mobile-body-lg);--db-base-body-icon-font-size-lg:var(--db-base-icon-font-size-regular-mobile-body-lg);--db-type-body-xl:var(--db-typography-regular-mobile-body-xl);--db-base-body-icon-weight-xl:var(--db-base-icon-weight-regular-mobile-body-xl);--db-base-body-icon-font-size-xl:var(--db-base-icon-font-size-regular-mobile-body-xl);--db-type-body-2xl:var(--db-typography-regular-mobile-body-2xl);--db-base-body-icon-weight-2xl:var(--db-base-icon-weight-regular-mobile-body-2xl);--db-base-body-icon-font-size-2xl:var(--db-base-icon-font-size-regular-mobile-body-2xl);--db-type-body-3xl:var(--db-typography-regular-mobile-body-3xl);--db-base-body-icon-weight-3xl:var(--db-base-icon-weight-regular-mobile-body-3xl);--db-base-body-icon-font-size-3xl:var(--db-base-icon-font-size-regular-mobile-body-3xl)}}@media screen and (48em < width <= 64em){:host,:root{--db-type-body-3xs:var(--db-typography-regular-tablet-body-3xs);--db-base-body-icon-weight-3xs:var(--db-base-icon-weight-regular-tablet-body-3xs);--db-base-body-icon-font-size-3xs:var(--db-base-icon-font-size-regular-tablet-body-3xs);--db-type-body-2xs:var(--db-typography-regular-tablet-body-2xs);--db-base-body-icon-weight-2xs:var(--db-base-icon-weight-regular-tablet-body-2xs);--db-base-body-icon-font-size-2xs:var(--db-base-icon-font-size-regular-tablet-body-2xs);--db-type-body-xs:var(--db-typography-regular-tablet-body-xs);--db-base-body-icon-weight-xs:var(--db-base-icon-weight-regular-tablet-body-xs);--db-base-body-icon-font-size-xs:var(--db-base-icon-font-size-regular-tablet-body-xs);--db-type-body-sm:var(--db-typography-regular-tablet-body-sm);--db-base-body-icon-weight-sm:var(--db-base-icon-weight-regular-tablet-body-sm);--db-base-body-icon-font-size-sm:var(--db-base-icon-font-size-regular-tablet-body-sm);--db-type-body-md:var(--db-typography-regular-tablet-body-md);--db-base-body-icon-weight-md:var(--db-base-icon-weight-regular-tablet-body-md);--db-base-body-icon-font-size-md:var(--db-base-icon-font-size-regular-tablet-body-md);--db-type-body-lg:var(--db-typography-regular-tablet-body-lg);--db-base-body-icon-weight-lg:var(--db-base-icon-weight-regular-tablet-body-lg);--db-base-body-icon-font-size-lg:var(--db-base-icon-font-size-regular-tablet-body-lg);--db-type-body-xl:var(--db-typography-regular-tablet-body-xl);--db-base-body-icon-weight-xl:var(--db-base-icon-weight-regular-tablet-body-xl);--db-base-body-icon-font-size-xl:var(--db-base-icon-font-size-regular-tablet-body-xl);--db-type-body-2xl:var(--db-typography-regular-tablet-body-2xl);--db-base-body-icon-weight-2xl:var(--db-base-icon-weight-regular-tablet-body-2xl);--db-base-body-icon-font-size-2xl:var(--db-base-icon-font-size-regular-tablet-body-2xl);--db-type-body-3xl:var(--db-typography-regular-tablet-body-3xl);--db-base-body-icon-weight-3xl:var(--db-base-icon-weight-regular-tablet-body-3xl);--db-base-body-icon-font-size-3xl:var(--db-base-icon-font-size-regular-tablet-body-3xl)}}@media screen and (64em < width){:host,:root{--db-type-body-3xs:var(--db-typography-regular-desktop-body-3xs);--db-base-body-icon-weight-3xs:var(--db-base-icon-weight-regular-desktop-body-3xs);--db-base-body-icon-font-size-3xs:var(--db-base-icon-font-size-regular-desktop-body-3xs);--db-type-body-2xs:var(--db-typography-regular-desktop-body-2xs);--db-base-body-icon-weight-2xs:var(--db-base-icon-weight-regular-desktop-body-2xs);--db-base-body-icon-font-size-2xs:var(--db-base-icon-font-size-regular-desktop-body-2xs);--db-type-body-xs:var(--db-typography-regular-desktop-body-xs);--db-base-body-icon-weight-xs:var(--db-base-icon-weight-regular-desktop-body-xs);--db-base-body-icon-font-size-xs:var(--db-base-icon-font-size-regular-desktop-body-xs);--db-type-body-sm:var(--db-typography-regular-desktop-body-sm);--db-base-body-icon-weight-sm:var(--db-base-icon-weight-regular-desktop-body-sm);--db-base-body-icon-font-size-sm:var(--db-base-icon-font-size-regular-desktop-body-sm);--db-type-body-md:var(--db-typography-regular-desktop-body-md);--db-base-body-icon-weight-md:var(--db-base-icon-weight-regular-desktop-body-md);--db-base-body-icon-font-size-md:var(--db-base-icon-font-size-regular-desktop-body-md);--db-type-body-lg:var(--db-typography-regular-desktop-body-lg);--db-base-body-icon-weight-lg:var(--db-base-icon-weight-regular-desktop-body-lg);--db-base-body-icon-font-size-lg:var(--db-base-icon-font-size-regular-desktop-body-lg);--db-type-body-xl:var(--db-typography-regular-desktop-body-xl);--db-base-body-icon-weight-xl:var(--db-base-icon-weight-regular-desktop-body-xl);--db-base-body-icon-font-size-xl:var(--db-base-icon-font-size-regular-desktop-body-xl);--db-type-body-2xl:var(--db-typography-regular-desktop-body-2xl);--db-base-body-icon-weight-2xl:var(--db-base-icon-weight-regular-desktop-body-2xl);--db-base-body-icon-font-size-2xl:var(--db-base-icon-font-size-regular-desktop-body-2xl);--db-type-body-3xl:var(--db-typography-regular-desktop-body-3xl);--db-base-body-icon-weight-3xl:var(--db-base-icon-weight-regular-desktop-body-3xl);--db-base-body-icon-font-size-3xl:var(--db-base-icon-font-size-regular-desktop-body-3xl)}}}@layer variables{}@layer variables{}

package/build/styles/defaults/default-root.scss

@@ -3,7 +3,8 @@
 @forward "../density";
 
 // Setup default styles for
-:is(:root, :host) {
+:root,
+:host {
 	@extend %db-neutral-bg-basic-level-1;
 	@extend %db-density-regular;
 }

package/build/styles/helpers/_functions.scss

@@ -3,11 +3,11 @@
 @use "clearfix";
 
 @function px-to-rem($pxValue) {
-	@return #{$pxValue * 0.0625}rem;
+	@return ($pxValue * 0.0625) * 1rem;
 }
 
 @function px-to-em($pxValue) {
-	@return #{$pxValue * 0.0625}em;
+	@return ($pxValue * 0.0625) * 1em;
 }
 
 $cursor-pointer: var(--db-overwrite-cursor, pointer);

package/build/styles/index.css

@@ -1,11 +1,13 @@
 @charset "UTF-8";
 /* Use this file if you want the default color and density in your project */
 /* Variants for adaptive components like input, select, notification, ... */
-blockquote:not([class]), :is(:root, :host) {
+blockquote:not([class]), :root,
+:host {
   /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
 }
 @layer variables {
-  blockquote:not([class]), :is(:root, :host) {
+  blockquote:not([class]), :root,
+  :host {
     --db-adaptive-bg-basic-level-1-default: var(
     	--db-neutral-bg-basic-level-1-default
     );
@@ -156,11 +158,12 @@ blockquote:not([class]), :is(:root, :host) {
   }
 }
 
-:is(:root, :host) {
+:root,
+:host {
   background-color: var(--db-neutral-bg-basic-level-1-default);
   color: var(--db-neutral-on-bg-basic-emphasis-100-default);
 }
-:is(:root, :host)::before, :is(:root, :host)::after {
+:root::before, :root::after {
   --db-icon-color: var(--db-neutral-on-bg-basic-emphasis-100-default);
 }
 
@@ -280,16 +283,19 @@ select,
 
 @layer variables {}
 
-:is(:root, :host) {
+:root,
+:host {
   font: var(--db-type-body-md);
 }
 
-:is(:root, :host) {
+:root,
+:host {
   font: var(--db-type-body-md);
   /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
 }
 @layer variables {
-  :is(:root, :host) {
+  :root,
+  :host {
     /* Those variables are only for components to calculate heights and change icons */
     --db-icon-font-weight: var(--db-base-body-icon-weight-md);
     --db-icon-font-size: var(--db-base-body-icon-font-size-md);
@@ -342,11 +348,13 @@ code {
  */
 @layer variables {}
 
-:is(:root, :host) {
+:root,
+:host {
   /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
 }
 @layer variables {
-  :is(:root, :host) {
+  :root,
+  :host {
     --db-sizing-3xs: var(--db-sizing-regular-3xs);
     --db-sizing-2xs: var(--db-sizing-regular-2xs);
     --db-sizing-xs: var(--db-sizing-regular-xs);
@@ -373,7 +381,8 @@ code {
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
   @media screen and (width <= 48em) {
-    :is(:root, :host) {
+    :root,
+    :host {
       --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-mobile-3xs);
       --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-mobile-2xs);
       --db-spacing-responsive-xs: var(--db-spacing-responsive-regular-mobile-xs);
@@ -386,7 +395,8 @@ code {
     }
   }
   @media screen and (48em < width <= 64em) {
-    :is(:root, :host) {
+    :root,
+    :host {
       --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-tablet-3xs);
       --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-tablet-2xs);
       --db-spacing-responsive-xs: var(--db-spacing-responsive-regular-tablet-xs);
@@ -399,7 +409,8 @@ code {
     }
   }
   @media screen and (64em < width) {
-    :is(:root, :host) {
+    :root,
+    :host {
       --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-desktop-3xs);
       --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-desktop-2xs);
       --db-spacing-responsive-xs: var(--db-spacing-responsive-regular-desktop-xs);
@@ -419,11 +430,13 @@ code {
 
 @layer variables {}
 
-:is(:root, :host) {
+:root,
+:host {
   /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
 }
 @layer variables {
-  :is(:root, :host) {
+  :root,
+  :host {
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
     /* stylelint-disable-next-line media-query-no-invalid */
@@ -432,7 +445,8 @@ code {
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
   @media screen and (width <= 48em) {
-    :is(:root, :host) {
+    :root,
+    :host {
       --db-type-headline-3xs: var(--db-typography-regular-mobile-headline-3xs);
       --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-regular-mobile-headline-3xs);
       --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-regular-mobile-headline-3xs);
@@ -463,7 +477,8 @@ code {
     }
   }
   @media screen and (48em < width <= 64em) {
-    :is(:root, :host) {
+    :root,
+    :host {
       --db-type-headline-3xs: var(--db-typography-regular-tablet-headline-3xs);
       --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-regular-tablet-headline-3xs);
       --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-regular-tablet-headline-3xs);
@@ -494,7 +509,8 @@ code {
     }
   }
   @media screen and (64em < width) {
-    :is(:root, :host) {
+    :root,
+    :host {
       --db-type-headline-3xs: var(--db-typography-regular-desktop-headline-3xs);
       --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-regular-desktop-headline-3xs);
       --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-regular-desktop-headline-3xs);
@@ -526,11 +542,13 @@ code {
   }
 }
 
-:is(:root, :host) {
+:root,
+:host {
   /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
 }
 @layer variables {
-  :is(:root, :host) {
+  :root,
+  :host {
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
     /* stylelint-disable-next-line media-query-no-invalid */
@@ -539,7 +557,8 @@ code {
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
   @media screen and (width <= 48em) {
-    :is(:root, :host) {
+    :root,
+    :host {
       --db-type-body-3xs: var(--db-typography-regular-mobile-body-3xs);
       --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-regular-mobile-body-3xs);
       --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-regular-mobile-body-3xs);
@@ -570,7 +589,8 @@ code {
     }
   }
   @media screen and (48em < width <= 64em) {
-    :is(:root, :host) {
+    :root,
+    :host {
       --db-type-body-3xs: var(--db-typography-regular-tablet-body-3xs);
       --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-regular-tablet-body-3xs);
       --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-regular-tablet-body-3xs);
@@ -601,7 +621,8 @@ code {
     }
   }
   @media screen and (64em < width) {
-    :is(:root, :host) {
+    :root,
+    :host {
       --db-type-body-3xs: var(--db-typography-regular-desktop-body-3xs);
       --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-regular-desktop-body-3xs);
       --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-regular-desktop-body-3xs);
@@ -964,7 +985,8 @@ blockquote:not([class]) {
 
 /* Required styles to normalize default css */
 @layer variables {
-  :is(:root, :host) {
+  :root,
+  :host {
     --db-neutral-origin-default: light-dark(
     	var(--db-neutral-origin-light-default),
     	var(--db-neutral-origin-dark-default)
@@ -4683,32 +4705,46 @@ blockquote:not([class]) {
 }
 /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
 @layer variables {
-  :is(:root, :host) {
+  :root,
+  :host {
     /* COLORS */
     --db-textarea-resizer-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjUgMTYuNWEuOTk5Ljk5OSAwIDAgMSAtLjcwNy0xLjcwN2w0LTRhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTQgNGEuOTk3Ljk5NyAwIDAgMSAtLjcwNy4yOTN6bS03IDBhLjk5OS45OTkgMCAwIDEgLS43MDctMS43MDdsMTEtMTFhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTExIDExYS45OTcuOTk3IDAgMCAxIC0uNzA3LjI5M3oiIGZpbGw9IiMyODJkMzciIHN0eWxlPSJ2YXIoLS1kYi1pY29uLWNvbG9yLCBjdXJyZW50Q29sb3IpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4NCg==");
     --db-textarea-scrollbar-button-decrement: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDEzYS45OTguOTk4IDAgMCAxIC0uOTk0LS45OTVjMC0uMjY2LjEzMy0uNTMxLjI5OC0uNjk3bDUuMDA2LTUuMDFjLjE5OS0uMTk4LjQ2NC0uMjk4LjY5Ni0uMjk4LjIyNyAwIC40NTUuMDczLjYyLjIybDUuMDgyIDUuMDg4Yy4xOTkuMTY2LjI5OC40MzEuMjk4LjY5N2EuOTk4Ljk5OCAwIDAgMSAtLjk5NC45OTVjLS4yNjYgMC0uNTMtLjEtLjczLS4yOTlsLTQuMjc2LTQuMjgtNC4yNzYgNC4yOGMtLjIuMi0uNDY0LjI5OS0uNzMuMjk5eiIgZmlsbD0iIzI4MmQzNyIgc3R5bGU9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg0K");
     --db-textarea-scrollbar-button-increment: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTEwLjQ3MiA4LjY5Ni0zLjUzMiAzLjUzNGEuOTk4Ljk5OCAwIDEgMSAtMS40MTMtMS40MTNsMi44MjUtMi44MjUtMi44MjUtMi44MjVhLjk5OC45OTggMCAxIDEgMS40MTMtMS40MTNsMy41MzIgMy41MzJhLjk5OS45OTkgMCAwIDEgMCAxLjQxMnoiIGZpbGw9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJtYXRyaXgoMCAxIC0xIDAgMTUuOTkxIC0uMDA5KSIvPjwvc3ZnPg0K");
   }
   @media (prefers-color-scheme: dark) {
-    :is(:root, :host) {
+    :root,
+    :host {
       --db-textarea-resizer-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjUgMTYuNWEuOTk5Ljk5OSAwIDAgMSAtLjcwNy0xLjcwN2w0LTRhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTQgNGEuOTk3Ljk5NyAwIDAgMSAtLjcwNy4yOTN6bS03IDBhLjk5OS45OTkgMCAwIDEgLS43MDctMS43MDdsMTEtMTFhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTExIDExYS45OTcuOTk3IDAgMCAxIC0uNzA3LjI5M3oiIGZpbGw9IiNmOGY4ZjkiIHN0eWxlPSJ2YXIoLS1kYi1pY29uLWNvbG9yLCBjdXJyZW50Q29sb3IpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4NCg==");
       --db-textarea-scrollbar-button-decrement: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDEzYS45OTguOTk4IDAgMCAxIC0uOTk0LS45OTVjMC0uMjY2LjEzMy0uNTMxLjI5OC0uNjk3bDUuMDA2LTUuMDFjLjE5OS0uMTk4LjQ2NC0uMjk4LjY5Ni0uMjk4LjIyNyAwIC40NTUuMDczLjYyLjIybDUuMDgyIDUuMDg4Yy4xOTkuMTY2LjI5OC40MzEuMjk4LjY5N2EuOTk4Ljk5OCAwIDAgMSAtLjk5NC45OTVjLS4yNjYgMC0uNTMtLjEtLjczLS4yOTlsLTQuMjc2LTQuMjgtNC4yNzYgNC4yOGMtLjIuMi0uNDY0LjI5OS0uNzMuMjk5eiIgZmlsbD0iI2Y4ZjhmOSIgc3R5bGU9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg0K");
       --db-textarea-scrollbar-button-increment: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDdhLjk5OC45OTggMCAwIDAgLS45OTQuOTk1YzAgLjI2Ni4xMzMuNTMxLjI5OC42OTdsNS4wMDYgNS4wMWMuMTk5LjE5OC40NjQuMjk4LjY5Ni4yOThhLjkzNi45MzYgMCAwIDAgLjYyLS4yMmw1LjA4Mi01LjA4OGMuMTk5LS4xNjYuMjk4LS40MzEuMjk4LS42OTdhLjk5OC45OTggMCAwIDAgLS45OTQtLjk5NWMtLjI2NiAwLS41My4xLS43My4yOTlsLTQuMjc2IDQuMjgtNC4yNzYtNC4yOGExLjAyOCAxLjAyOCAwIDAgMCAtLjczLS4yOTl6IiBmaWxsPSIjZjhmOGY5IiBzdHlsZT0idmFyKC0tZGItaWNvbi1jb2xvciwgY3VycmVudENvbG9yKSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+DQo=");
     }
   }
-  :is(:root, :host) [data-mode=dark] {
+  :root [data-mode=dark],
+  :host [data-mode=dark] {
     --db-textarea-resizer-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjUgMTYuNWEuOTk5Ljk5OSAwIDAgMSAtLjcwNy0xLjcwN2w0LTRhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTQgNGEuOTk3Ljk5NyAwIDAgMSAtLjcwNy4yOTN6bS03IDBhLjk5OS45OTkgMCAwIDEgLS43MDctMS43MDdsMTEtMTFhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTExIDExYS45OTcuOTk3IDAgMCAxIC0uNzA3LjI5M3oiIGZpbGw9IiNmOGY4ZjkiIHN0eWxlPSJ2YXIoLS1kYi1pY29uLWNvbG9yLCBjdXJyZW50Q29sb3IpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4NCg==");
     --db-textarea-scrollbar-button-decrement: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDEzYS45OTguOTk4IDAgMCAxIC0uOTk0LS45OTVjMC0uMjY2LjEzMy0uNTMxLjI5OC0uNjk3bDUuMDA2LTUuMDFjLjE5OS0uMTk4LjQ2NC0uMjk4LjY5Ni0uMjk4LjIyNyAwIC40NTUuMDczLjYyLjIybDUuMDgyIDUuMDg4Yy4xOTkuMTY2LjI5OC40MzEuMjk4LjY5N2EuOTk4Ljk5OCAwIDAgMSAtLjk5NC45OTVjLS4yNjYgMC0uNTMtLjEtLjczLS4yOTlsLTQuMjc2LTQuMjgtNC4yNzYgNC4yOGMtLjIuMi0uNDY0LjI5OS0uNzMuMjk5eiIgZmlsbD0iI2Y4ZjhmOSIgc3R5bGU9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg0K");
     --db-textarea-scrollbar-button-increment: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDdhLjk5OC45OTggMCAwIDAgLS45OTQuOTk1YzAgLjI2Ni4xMzMuNTMxLjI5OC42OTdsNS4wMDYgNS4wMWMuMTk5LjE5OC40NjQuMjk4LjY5Ni4yOThhLjkzNi45MzYgMCAwIDAgLjYyLS4yMmw1LjA4Mi01LjA4OGMuMTk5LS4xNjYuMjk4LS40MzEuMjk4LS42OTdhLjk5OC45OTggMCAwIDAgLS45OTQtLjk5NWMtLjI2NiAwLS41My4xLS43My4yOTlsLTQuMjc2IDQuMjgtNC4yNzYtNC4yOGExLjAyOCAxLjAyOCAwIDAgMCAtLjczLS4yOTl6IiBmaWxsPSIjZjhmOGY5IiBzdHlsZT0idmFyKC0tZGItaWNvbi1jb2xvciwgY3VycmVudENvbG9yKSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+DQo=");
   }
-  :is(:root, :host) [data-mode=light] {
+  :root [data-mode=light],
+  :host [data-mode=light] {
     --db-textarea-resizer-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjUgMTYuNWEuOTk5Ljk5OSAwIDAgMSAtLjcwNy0xLjcwN2w0LTRhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTQgNGEuOTk3Ljk5NyAwIDAgMSAtLjcwNy4yOTN6bS03IDBhLjk5OS45OTkgMCAwIDEgLS43MDctMS43MDdsMTEtMTFhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTExIDExYS45OTcuOTk3IDAgMCAxIC0uNzA3LjI5M3oiIGZpbGw9IiMyODJkMzciIHN0eWxlPSJ2YXIoLS1kYi1pY29uLWNvbG9yLCBjdXJyZW50Q29sb3IpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4NCg==");
     --db-textarea-scrollbar-button-decrement: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDEzYS45OTguOTk4IDAgMCAxIC0uOTk0LS45OTVjMC0uMjY2LjEzMy0uNTMxLjI5OC0uNjk3bDUuMDA2LTUuMDFjLjE5OS0uMTk4LjQ2NC0uMjk4LjY5Ni0uMjk4LjIyNyAwIC40NTUuMDczLjYyLjIybDUuMDgyIDUuMDg4Yy4xOTkuMTY2LjI5OC40MzEuMjk4LjY5N2EuOTk4Ljk5OCAwIDAgMSAtLjk5NC45OTVjLS4yNjYgMC0uNTMtLjEtLjczLS4yOTlsLTQuMjc2LTQuMjgtNC4yNzYgNC4yOGMtLjIuMi0uNDY0LjI5OS0uNzMuMjk5eiIgZmlsbD0iIzI4MmQzNyIgc3R5bGU9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg0K");
     --db-textarea-scrollbar-button-increment: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTEwLjQ3MiA4LjY5Ni0zLjUzMiAzLjUzNGEuOTk4Ljk5OCAwIDEgMSAtMS40MTMtMS40MTNsMi44MjUtMi44MjUtMi44MjUtMi44MjVhLjk5OC45OTggMCAxIDEgMS40MTMtMS40MTNsMy41MzIgMy41MzJhLjk5OS45OTkgMCAwIDEgMCAxLjQxMnoiIGZpbGw9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJtYXRyaXgoMCAxIC0xIDAgMTUuOTkxIC0uMDA5KSIvPjwvc3ZnPg0K");
   }
 }
-html:not(:has(> head > meta[name=color-scheme])) {
-  color-scheme: light dark;
+:root {
+  color-scheme: var(--db-color-scheme, light dark);
+}
+
+head:has([name=color-scheme][content*=light][content*=dark]) + body {
+  --db-color-scheme: light dark;
+}
+head:has([name=color-scheme][content=light]) + body {
+  --db-color-scheme: light;
+}
+head:has([name=color-scheme][content=dark]) + body {
+  --db-color-scheme: dark;
 }
 
 /* TODO: Switch to attr() as soon as this one is fully supported */
@@ -4738,7 +4774,9 @@ body {
   font-family: var(--db-font-family-sans);
 }
 
-html {
+*,
+::before,
+::after {
   box-sizing: var(--db-box-sizing, border-box);
 }
 
@@ -4749,12 +4787,6 @@ html {
   text-rendering: optimizelegibility;
 }
 
-*,
-::before,
-::after {
-  box-sizing: inherit;
-}
-
 body,
 button,
 input,