@i-cell/ids-styles 0.0.15-beta.9 → 0.0.16

package/dist/segmented-control/segmented-control.plugin.js

@@ -10,7 +10,8 @@ module.exports = function SegmentedControlPlugin() {
         position: 'relative',
         textWrap: 'nowrap',
       },
-      '.ids-segmented-control .ids-segmented-control-item>button:focus': { zIndex: 1, outlineStyle: 'solid', outlineOffset: '2px' },
+      '.ids-segmented-control .ids-segmented-control-item>button:focus,.ids-segmented-control .ids-segmented-control-item>button:focus-visible':
+        { zIndex: 1, outlineStyle: 'solid', outlineOffset: '2px' },
       '.ids-segmented-control .ids-segmented-control-item>button:not(:disabled)': { cursor: 'pointer' },
       '.ids-segmented-control .ids-segmented-control-item>button:disabled': { cursor: 'not-allowed' },
       '.ids-segmented-control.ids-segmented-control-compact': {
@@ -33,9 +34,8 @@ module.exports = function SegmentedControlPlugin() {
         letterSpacing: 'var(--ids-comp-segmented-control-button-typography-letter-spacing-compact)',
         lineHeight: 'var(--ids-comp-segmented-control-button-typography-line-height-compact)',
       },
-      '.ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item>button:focus': {
-        outlineWidth: 'var(--ids-comp-segmented-control-focused-outline-size-outline-width-compact)',
-      },
+      '.ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item>button:focus,.ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item>button:focus-visible':
+        { outlineWidth: 'var(--ids-comp-segmented-control-focused-outline-size-outline-width-compact)' },
       '.ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item:first-of-type>button': {
         borderTopLeftRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-compact)',
         borderBottomLeftRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-compact)',
@@ -50,6 +50,9 @@ module.exports = function SegmentedControlPlugin() {
       '.ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item .ids-icon': {
         height: 'var(--ids-comp-segmented-control-button-size-icon-compact)',
         width: 'var(--ids-comp-segmented-control-button-size-icon-compact)',
+        fontSize: 'var(--ids-comp-segmented-control-button-icon-typography-font-size-compact)',
+        fontWeight: 'var(--ids-comp-segmented-control-button-icon-typography-font-weight-compact)',
+        lineHeight: 'var(--ids-comp-segmented-control-button-icon-typography-line-height-compact)',
       },
       '.ids-segmented-control.ids-segmented-control-comfortable': {
         padding:
@@ -71,9 +74,8 @@ module.exports = function SegmentedControlPlugin() {
         letterSpacing: 'var(--ids-comp-segmented-control-button-typography-letter-spacing-comfortable)',
         lineHeight: 'var(--ids-comp-segmented-control-button-typography-line-height-comfortable)',
       },
-      '.ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item>button:focus': {
-        outlineWidth: 'var(--ids-comp-segmented-control-focused-outline-size-outline-width-comfortable)',
-      },
+      '.ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item>button:focus,.ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item>button:focus-visible':
+        { outlineWidth: 'var(--ids-comp-segmented-control-focused-outline-size-outline-width-comfortable)' },
       '.ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item:first-of-type>button': {
         borderTopLeftRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-comfortable)',
         borderBottomLeftRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-comfortable)',
@@ -88,6 +90,9 @@ module.exports = function SegmentedControlPlugin() {
       '.ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item .ids-icon': {
         height: 'var(--ids-comp-segmented-control-button-size-icon-comfortable)',
         width: 'var(--ids-comp-segmented-control-button-size-icon-comfortable)',
+        fontSize: 'var(--ids-comp-segmented-control-button-icon-typography-font-size-comfortable)',
+        fontWeight: 'var(--ids-comp-segmented-control-button-icon-typography-font-weight-comfortable)',
+        lineHeight: 'var(--ids-comp-segmented-control-button-icon-typography-line-height-comfortable)',
       },
       '.ids-segmented-control.ids-segmented-control-spacious': {
         padding:
@@ -109,9 +114,8 @@ module.exports = function SegmentedControlPlugin() {
         letterSpacing: 'var(--ids-comp-segmented-control-button-typography-letter-spacing-spacious)',
         lineHeight: 'var(--ids-comp-segmented-control-button-typography-line-height-spacious)',
       },
-      '.ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item>button:focus': {
-        outlineWidth: 'var(--ids-comp-segmented-control-focused-outline-size-outline-width-spacious)',
-      },
+      '.ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item>button:focus,.ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item>button:focus-visible':
+        { outlineWidth: 'var(--ids-comp-segmented-control-focused-outline-size-outline-width-spacious)' },
       '.ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item:first-of-type>button': {
         borderTopLeftRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-spacious)',
         borderBottomLeftRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-spacious)',
@@ -126,6 +130,9 @@ module.exports = function SegmentedControlPlugin() {
       '.ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item .ids-icon': {
         height: 'var(--ids-comp-segmented-control-button-size-icon-spacious)',
         width: 'var(--ids-comp-segmented-control-button-size-icon-spacious)',
+        fontSize: 'var(--ids-comp-segmented-control-button-icon-typography-font-size-spacious)',
+        fontWeight: 'var(--ids-comp-segmented-control-button-icon-typography-font-weight-spacious)',
+        lineHeight: 'var(--ids-comp-segmented-control-button-icon-typography-line-height-spacious)',
       },
       '.ids-segmented-control.ids-segmented-control-dense': {
         padding:
@@ -147,9 +154,8 @@ module.exports = function SegmentedControlPlugin() {
         letterSpacing: 'var(--ids-comp-segmented-control-button-typography-letter-spacing-dense)',
         lineHeight: 'var(--ids-comp-segmented-control-button-typography-line-height-dense)',
       },
-      '.ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item>button:focus': {
-        outlineWidth: 'var(--ids-comp-segmented-control-focused-outline-size-outline-width-dense)',
-      },
+      '.ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item>button:focus,.ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item>button:focus-visible':
+        { outlineWidth: 'var(--ids-comp-segmented-control-focused-outline-size-outline-width-dense)' },
       '.ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item:first-of-type>button': {
         borderTopLeftRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-dense)',
         borderBottomLeftRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-dense)',
@@ -162,10 +168,12 @@ module.exports = function SegmentedControlPlugin() {
       '.ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item .ids-icon': {
         height: 'var(--ids-comp-segmented-control-button-size-icon-dense)',
         width: 'var(--ids-comp-segmented-control-button-size-icon-dense)',
+        fontSize: 'var(--ids-comp-segmented-control-button-icon-typography-font-size-dense)',
+        fontWeight: 'var(--ids-comp-segmented-control-button-icon-typography-font-weight-dense)',
+        lineHeight: 'var(--ids-comp-segmented-control-button-icon-typography-line-height-dense)',
       },
-      '.ids-segmented-control.ids-segmented-control-primary .ids-segmented-control-item>button:focus': {
-        outlineColor: 'var(--ids-comp-segmented-control-focused-outline-color-dark-focused)',
-      },
+      '.ids-segmented-control.ids-segmented-control-primary .ids-segmented-control-item>button:focus,.ids-segmented-control.ids-segmented-control-primary .ids-segmented-control-item>button:focus-visible':
+        { outlineColor: 'var(--ids-comp-segmented-control-focused-outline-color-dark-focused)' },
       '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled': {
         backgroundColor: 'var(--ids-comp-segmented-control-container-filled-color-bg-primary-default)',
         borderColor: 'var(--ids-comp-segmented-control-container-filled-color-border-primary-default)',
@@ -200,12 +208,13 @@ module.exports = function SegmentedControlPlugin() {
       },
       '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:active .ids-icon':
         { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-pressed)' },
-      '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:focus': {
-        backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-primary-focused)',
-        color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-focused)',
-        borderColor: 'var(--ids-comp-segmented-control-button-filled-color-border-primary-focused)',
-      },
-      '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:focus .ids-icon':
+      '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:focus,.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:focus-visible':
+        {
+          backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-primary-focused)',
+          color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-focused)',
+          borderColor: 'var(--ids-comp-segmented-control-button-filled-color-border-primary-focused)',
+        },
+      '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:focus .ids-icon,.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:focus-visible .ids-icon':
         { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-focused)' },
       '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:disabled': {
         backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-primary-disabled)',
@@ -248,12 +257,13 @@ module.exports = function SegmentedControlPlugin() {
       },
       '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:active .ids-icon':
         { color: 'var(--ids-comp-segmented-control-button-outlined-color-fg-icon-primary-pressed)' },
-      '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:focus': {
-        backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-primary-focused)',
-        color: 'var(--ids-comp-segmented-control-button-outlined-color-fg-label-primary-focused)',
-        borderColor: 'var(--ids-comp-segmented-control-button-outlined-color-border-primary-focused)',
-      },
-      '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:focus .ids-icon':
+      '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:focus,.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:focus-visible':
+        {
+          backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-primary-focused)',
+          color: 'var(--ids-comp-segmented-control-button-outlined-color-fg-label-primary-focused)',
+          borderColor: 'var(--ids-comp-segmented-control-button-outlined-color-border-primary-focused)',
+        },
+      '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:focus .ids-icon,.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:focus-visible .ids-icon':
         { color: 'var(--ids-comp-segmented-control-button-outlined-color-fg-icon-primary-focused)' },
       '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled': {
         backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-primary-disabled)',
@@ -262,9 +272,8 @@ module.exports = function SegmentedControlPlugin() {
       },
       '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled .ids-icon':
         { color: 'var(--ids-comp-segmented-control-button-outlined-color-fg-icon-primary-disabled)' },
-      '.ids-segmented-control.ids-segmented-control-surface .ids-segmented-control-item>button:focus': {
-        outlineColor: 'var(--ids-comp-segmented-control-focused-outline-color-dark-focused)',
-      },
+      '.ids-segmented-control.ids-segmented-control-surface .ids-segmented-control-item>button:focus,.ids-segmented-control.ids-segmented-control-surface .ids-segmented-control-item>button:focus-visible':
+        { outlineColor: 'var(--ids-comp-segmented-control-focused-outline-color-dark-focused)' },
       '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled': {
         backgroundColor: 'var(--ids-comp-segmented-control-container-filled-color-bg-surface-default)',
         borderColor: 'var(--ids-comp-segmented-control-container-filled-color-border-surface-default)',
@@ -299,12 +308,13 @@ module.exports = function SegmentedControlPlugin() {
       },
       '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:active .ids-icon':
         { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-pressed)' },
-      '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:focus': {
-        backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-surface-focused)',
-        color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-focused)',
-        borderColor: 'var(--ids-comp-segmented-control-button-filled-color-border-surface-focused)',
-      },
-      '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:focus .ids-icon':
+      '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:focus,.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:focus-visible':
+        {
+          backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-surface-focused)',
+          color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-focused)',
+          borderColor: 'var(--ids-comp-segmented-control-button-filled-color-border-surface-focused)',
+        },
+      '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:focus .ids-icon,.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:focus-visible .ids-icon':
         { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-focused)' },
       '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:disabled': {
         backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-surface-disabled)',
@@ -347,12 +357,13 @@ module.exports = function SegmentedControlPlugin() {
       },
       '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:active .ids-icon':
         { color: 'var(--ids-comp-segmented-control-button-outlined-color-fg-icon-surface-pressed)' },
-      '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:focus': {
-        backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-surface-focused)',
-        color: 'var(--ids-comp-segmented-control-button-outlined-color-fg-label-surface-focused)',
-        borderColor: 'var(--ids-comp-segmented-control-button-outlined-color-border-surface-focused)',
-      },
-      '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:focus .ids-icon':
+      '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:focus,.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:focus-visible':
+        {
+          backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-surface-focused)',
+          color: 'var(--ids-comp-segmented-control-button-outlined-color-fg-label-surface-focused)',
+          borderColor: 'var(--ids-comp-segmented-control-button-outlined-color-border-surface-focused)',
+        },
+      '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:focus .ids-icon,.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:focus-visible .ids-icon':
         { color: 'var(--ids-comp-segmented-control-button-outlined-color-fg-icon-surface-focused)' },
       '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled': {
         backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-surface-disabled)',
@@ -361,9 +372,8 @@ module.exports = function SegmentedControlPlugin() {
       },
       '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled .ids-icon':
         { color: 'var(--ids-comp-segmented-control-button-outlined-color-fg-icon-surface-disabled)' },
-      '.ids-segmented-control.ids-segmented-control-light .ids-segmented-control-item>button:focus': {
-        outlineColor: 'var(--ids-comp-segmented-control-focused-outline-color-light-focused)',
-      },
+      '.ids-segmented-control.ids-segmented-control-light .ids-segmented-control-item>button:focus,.ids-segmented-control.ids-segmented-control-light .ids-segmented-control-item>button:focus-visible':
+        { outlineColor: 'var(--ids-comp-segmented-control-focused-outline-color-light-focused)' },
       '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled': {
         backgroundColor: 'var(--ids-comp-segmented-control-container-filled-color-bg-light-default)',
         borderColor: 'var(--ids-comp-segmented-control-container-filled-color-border-light-default)',
@@ -398,12 +408,13 @@ module.exports = function SegmentedControlPlugin() {
       },
       '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:active .ids-icon':
         { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-pressed)' },
-      '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:focus': {
-        backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-light-focused)',
-        color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-light-focused)',
-        borderColor: 'var(--ids-comp-segmented-control-button-filled-color-border-light-focused)',
-      },
-      '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:focus .ids-icon':
+      '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:focus,.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:focus-visible':
+        {
+          backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-light-focused)',
+          color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-light-focused)',
+          borderColor: 'var(--ids-comp-segmented-control-button-filled-color-border-light-focused)',
+        },
+      '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:focus .ids-icon,.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:focus-visible .ids-icon':
         { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-focused)' },
       '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:disabled': {
         backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-light-disabled)',
@@ -446,12 +457,13 @@ module.exports = function SegmentedControlPlugin() {
       },
       '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:active .ids-icon':
         { color: 'var(--ids-comp-segmented-control-button-outlined-color-fg-icon-light-pressed)' },
-      '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:focus': {
-        backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-light-focused)',
-        color: 'var(--ids-comp-segmented-control-button-outlined-color-fg-label-light-focused)',
-        borderColor: 'var(--ids-comp-segmented-control-button-outlined-color-border-light-focused)',
-      },
-      '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:focus .ids-icon':
+      '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:focus,.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:focus-visible':
+        {
+          backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-light-focused)',
+          color: 'var(--ids-comp-segmented-control-button-outlined-color-fg-label-light-focused)',
+          borderColor: 'var(--ids-comp-segmented-control-button-outlined-color-border-light-focused)',
+        },
+      '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:focus .ids-icon,.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:focus-visible .ids-icon':
         { color: 'var(--ids-comp-segmented-control-button-outlined-color-fg-icon-light-focused)' },
       '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled': {
         backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-light-disabled)',
@@ -460,9 +472,8 @@ module.exports = function SegmentedControlPlugin() {
       },
       '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled .ids-icon':
         { color: 'var(--ids-comp-segmented-control-button-outlined-color-fg-icon-light-disabled)' },
-      '.ids-segmented-control.ids-segmented-control-dark .ids-segmented-control-item>button:focus': {
-        outlineColor: 'var(--ids-comp-segmented-control-focused-outline-color-dark-focused)',
-      },
+      '.ids-segmented-control.ids-segmented-control-dark .ids-segmented-control-item>button:focus,.ids-segmented-control.ids-segmented-control-dark .ids-segmented-control-item>button:focus-visible':
+        { outlineColor: 'var(--ids-comp-segmented-control-focused-outline-color-dark-focused)' },
       '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled': {
         backgroundColor: 'var(--ids-comp-segmented-control-container-filled-color-bg-dark-default)',
         borderColor: 'var(--ids-comp-segmented-control-container-filled-color-border-dark-default)',
@@ -498,14 +509,14 @@ module.exports = function SegmentedControlPlugin() {
       },
       '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:active .ids-icon':
         { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-pressed)' },
-      '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:focus': {
-        backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-dark-focused)',
-        color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-focused)',
-        borderColor: 'var(--ids-comp-segmented-control-button-filled-color-border-dark-focused)',
-      },
-      '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:focus .ids-icon': {
-        color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-focused)',
-      },
+      '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:focus,.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:focus-visible':
+        {
+          backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-dark-focused)',
+          color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-focused)',
+          borderColor: 'var(--ids-comp-segmented-control-button-filled-color-border-dark-focused)',
+        },
+      '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:focus .ids-icon,.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:focus-visible .ids-icon':
+        { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-focused)' },
       '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:disabled': {
         backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-dark-disabled)',
         color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-disabled)',
@@ -547,12 +558,13 @@ module.exports = function SegmentedControlPlugin() {
       },
       '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:active .ids-icon':
         { color: 'var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-pressed)' },
-      '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:focus': {
-        backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-dark-focused)',
-        color: 'var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-focused)',
-        borderColor: 'var(--ids-comp-segmented-control-button-outlined-color-border-dark-focused)',
-      },
-      '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:focus .ids-icon':
+      '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:focus,.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:focus-visible':
+        {
+          backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-dark-focused)',
+          color: 'var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-focused)',
+          borderColor: 'var(--ids-comp-segmented-control-button-outlined-color-border-dark-focused)',
+        },
+      '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:focus .ids-icon,.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:focus-visible .ids-icon':
         { color: 'var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-focused)' },
       '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled': {
         backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-dark-disabled)',

package/dist/snackbar/snackbar.css

@@ -148,6 +148,9 @@
 .ids-snackbar-group.ids-snackbar-group-compact > .ids-snackbar > .ids-snackbar__content-wrapper > .ids-snackbar__leading-element > .ids-icon {
   width: var(--ids-comp-snackbar-icon-size-icon-compact);
   height: var(--ids-comp-snackbar-icon-size-icon-compact);
+  font-size: var(--ids-comp-snackbar-icon-typography-font-size-compact);
+  font-weight: var(--ids-comp-snackbar-icon-typography-font-weight-compact);
+  line-height: var(--ids-comp-snackbar-icon-typography-line-height-compact);
 }
 .ids-snackbar-group.ids-snackbar-group-compact > .ids-snackbar > .ids-snackbar__content-wrapper > .ids-snackbar__message-action-container {
   min-width: var(--ids-comp-snackbar-container-size-min-width-compact);
@@ -193,6 +196,9 @@
 .ids-snackbar-group.ids-snackbar-group-comfortable > .ids-snackbar > .ids-snackbar__content-wrapper > .ids-snackbar__leading-element > .ids-icon {
   width: var(--ids-comp-snackbar-icon-size-icon-comfortable);
   height: var(--ids-comp-snackbar-icon-size-icon-comfortable);
+  font-size: var(--ids-comp-snackbar-icon-typography-font-size-comfortable);
+  font-weight: var(--ids-comp-snackbar-icon-typography-font-weight-comfortable);
+  line-height: var(--ids-comp-snackbar-icon-typography-line-height-comfortable);
 }
 .ids-snackbar-group.ids-snackbar-group-comfortable > .ids-snackbar > .ids-snackbar__content-wrapper > .ids-snackbar__message-action-container {
   min-width: var(--ids-comp-snackbar-container-size-min-width-comfortable);
@@ -238,6 +244,9 @@
 .ids-snackbar-group.ids-snackbar-group-spacious > .ids-snackbar > .ids-snackbar__content-wrapper > .ids-snackbar__leading-element > .ids-icon {
   width: var(--ids-comp-snackbar-icon-size-icon-spacious);
   height: var(--ids-comp-snackbar-icon-size-icon-spacious);
+  font-size: var(--ids-comp-snackbar-icon-typography-font-size-spacious);
+  font-weight: var(--ids-comp-snackbar-icon-typography-font-weight-spacious);
+  line-height: var(--ids-comp-snackbar-icon-typography-line-height-spacious);
 }
 .ids-snackbar-group.ids-snackbar-group-spacious > .ids-snackbar > .ids-snackbar__content-wrapper > .ids-snackbar__message-action-container {
   min-width: var(--ids-comp-snackbar-container-size-min-width-spacious);
@@ -283,6 +292,9 @@
 .ids-snackbar-group.ids-snackbar-group-dense > .ids-snackbar > .ids-snackbar__content-wrapper > .ids-snackbar__leading-element > .ids-icon {
   width: var(--ids-comp-snackbar-icon-size-icon-dense);
   height: var(--ids-comp-snackbar-icon-size-icon-dense);
+  font-size: var(--ids-comp-snackbar-icon-typography-font-size-dense);
+  font-weight: var(--ids-comp-snackbar-icon-typography-font-weight-dense);
+  line-height: var(--ids-comp-snackbar-icon-typography-line-height-dense);
 }
 .ids-snackbar-group.ids-snackbar-group-dense > .ids-snackbar > .ids-snackbar__content-wrapper > .ids-snackbar__message-action-container {
   min-width: var(--ids-comp-snackbar-container-size-min-width-dense);

package/dist/snackbar/snackbar.min.css

@@ -1 +1 @@
-.ids-snackbar-group{display:flex}.ids-snackbar-group.ids-snackbar-group-position-top-left,.ids-snackbar-group.ids-snackbar-group-position-top-center,.ids-snackbar-group.ids-snackbar-group-position-top-right{flex-direction:column-reverse}.ids-snackbar-group.ids-snackbar-group-position-top-left.ids-snackbar-group-newest-at-start,.ids-snackbar-group.ids-snackbar-group-position-top-center.ids-snackbar-group-newest-at-start,.ids-snackbar-group.ids-snackbar-group-position-top-right.ids-snackbar-group-newest-at-start{flex-direction:column}.ids-snackbar-group.ids-snackbar-group-position-bottom-left,.ids-snackbar-group.ids-snackbar-group-position-bottom-center,.ids-snackbar-group.ids-snackbar-group-position-bottom-right{flex-direction:column}.ids-snackbar-group.ids-snackbar-group-position-bottom-left.ids-snackbar-group-newest-at-start,.ids-snackbar-group.ids-snackbar-group-position-bottom-center.ids-snackbar-group-newest-at-start,.ids-snackbar-group.ids-snackbar-group-position-bottom-right.ids-snackbar-group-newest-at-start{flex-direction:column-reverse}.ids-snackbar-group.ids-snackbar-group-position-top-left,.ids-snackbar-group.ids-snackbar-group-position-bottom-left{align-items:flex-start}.ids-snackbar-group.ids-snackbar-group-position-top-center,.ids-snackbar-group.ids-snackbar-group-position-bottom-center{align-items:center}.ids-snackbar-group.ids-snackbar-group-position-top-right,.ids-snackbar-group.ids-snackbar-group-position-bottom-right{align-items:flex-end}.ids-snackbar-group .ids-snackbar{min-width:max-content}.ids-snackbar-group .ids-snackbar>.ids-snackbar__content-wrapper{position:relative;display:flex;justify-content:space-between;align-items:flex-start;align-content:flex-start;flex-wrap:wrap;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;box-shadow:var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xl) var(--ids-smc-reference-container-effects-shadow-blur-xxl) var(--ids-smc-reference-container-effects-shadow-spread-sm) var(--ids-smc-reference-container-effects-shadow-color-dark-light),var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-md) var(--ids-smc-reference-container-effects-shadow-blur-lg) var(--ids-smc-reference-container-effects-shadow-spread-xs) var(--ids-smc-reference-container-effects-shadow-color-dark-light)}.ids-snackbar-group .ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__leading-element{display:flex;align-items:center;flex-shrink:0}.ids-snackbar-group .ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container{display:flex;justify-content:space-between;align-items:center;align-content:center;flex:1 0 0;flex-wrap:wrap}.ids-snackbar-group .ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container>.ids-snackbar__message{flex:1 0 0;font-style:normal}.ids-snackbar-group .ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container>.ids-snackbar__action{display:flex;align-items:center}.ids-snackbar-group .ids-snackbar>.ids-snackbar__content-wrapper>.ids-icon-button{position:absolute;top:16px;right:16px}.ids-snackbar-group .ids-snackbar.ids-snackbar-dark>.ids-snackbar__content-wrapper{border-top-color:var(--ids-comp-snackbar-filled-color-border-dark-default);border-right-color:var(--ids-comp-snackbar-filled-color-border-dark-default);border-bottom-color:var(--ids-comp-snackbar-filled-color-border-dark-default);border-left-color:var(--ids-comp-snackbar-filled-color-border-dark-default);background:var(--ids-comp-snackbar-filled-color-bg-dark-default)}.ids-snackbar-group .ids-snackbar.ids-snackbar-dark>.ids-snackbar__content-wrapper>.ids-snackbar__leading-element>.ids-icon{color:var(--ids-comp-snackbar-filled-color-fg-icon-dark-default)}.ids-snackbar-group .ids-snackbar.ids-snackbar-dark>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container>.ids-snackbar__message{color:var(--ids-comp-snackbar-filled-color-fg-message-dark-default)}.ids-snackbar-group .ids-snackbar.ids-snackbar-info>.ids-snackbar__content-wrapper{border-top-color:var(--ids-comp-snackbar-filled-color-border-info-default);border-right-color:var(--ids-comp-snackbar-filled-color-border-info-default);border-bottom-color:var(--ids-comp-snackbar-filled-color-border-info-default);border-left-color:var(--ids-comp-snackbar-filled-color-border-info-default);background:var(--ids-comp-snackbar-filled-color-bg-info-default)}.ids-snackbar-group .ids-snackbar.ids-snackbar-info>.ids-snackbar__content-wrapper>.ids-snackbar__leading-element>.ids-icon{color:var(--ids-comp-snackbar-filled-color-fg-icon-info-default)}.ids-snackbar-group .ids-snackbar.ids-snackbar-info>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container>.ids-snackbar__message{color:var(--ids-comp-snackbar-filled-color-fg-message-info-default)}.ids-snackbar-group .ids-snackbar.ids-snackbar-success>.ids-snackbar__content-wrapper{border-top-color:var(--ids-comp-snackbar-filled-color-border-success-default);border-right-color:var(--ids-comp-snackbar-filled-color-border-success-default);border-bottom-color:var(--ids-comp-snackbar-filled-color-border-success-default);border-left-color:var(--ids-comp-snackbar-filled-color-border-success-default);background:var(--ids-comp-snackbar-filled-color-bg-success-default)}.ids-snackbar-group .ids-snackbar.ids-snackbar-success>.ids-snackbar__content-wrapper>.ids-snackbar__leading-element>.ids-icon{color:var(--ids-comp-snackbar-filled-color-fg-icon-success-default)}.ids-snackbar-group .ids-snackbar.ids-snackbar-success>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container>.ids-snackbar__message{color:var(--ids-comp-snackbar-filled-color-fg-message-success-default)}.ids-snackbar-group .ids-snackbar.ids-snackbar-error>.ids-snackbar__content-wrapper{border-top-color:var(--ids-comp-snackbar-filled-color-border-error-default);border-right-color:var(--ids-comp-snackbar-filled-color-border-error-default);border-bottom-color:var(--ids-comp-snackbar-filled-color-border-error-default);border-left-color:var(--ids-comp-snackbar-filled-color-border-error-default);background:var(--ids-comp-snackbar-filled-color-bg-error-default)}.ids-snackbar-group .ids-snackbar.ids-snackbar-error>.ids-snackbar__content-wrapper>.ids-snackbar__leading-element>.ids-icon{color:var(--ids-comp-snackbar-filled-color-fg-icon-error-default)}.ids-snackbar-group .ids-snackbar.ids-snackbar-error>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container>.ids-snackbar__message{color:var(--ids-comp-snackbar-filled-color-fg-message-error-default)}.ids-snackbar-group .ids-snackbar.ids-snackbar-warning>.ids-snackbar__content-wrapper{border-top-color:var(--ids-comp-snackbar-filled-color-border-warning-default);border-right-color:var(--ids-comp-snackbar-filled-color-border-warning-default);border-bottom-color:var(--ids-comp-snackbar-filled-color-border-warning-default);border-left-color:var(--ids-comp-snackbar-filled-color-border-warning-default);background:var(--ids-comp-snackbar-filled-color-bg-warning-default)}.ids-snackbar-group .ids-snackbar.ids-snackbar-warning>.ids-snackbar__content-wrapper>.ids-snackbar__leading-element>.ids-icon{color:var(--ids-comp-snackbar-filled-color-fg-icon-warning-default)}.ids-snackbar-group .ids-snackbar.ids-snackbar-warning>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container>.ids-snackbar__message{color:var(--ids-comp-snackbar-filled-color-fg-message-warning-default)}.ids-snackbar-group.ids-snackbar-group-compact{gap:var(--ids-comp-snackbar-group-container-size-gap-comfortable)}.ids-snackbar-group.ids-snackbar-group-compact>.ids-snackbar>.ids-snackbar__content-wrapper{gap:var(--ids-comp-snackbar-container-size-gap-compact);padding:var(--ids-comp-snackbar-container-size-padding-y-compact) var(--ids-comp-snackbar-container-size-padding-x-compact);border-radius:var(--ids-comp-snackbar-container-size-border-radius-compact);border-top-width:var(--ids-comp-snackbar-container-size-border-top-width-compact);border-right-width:var(--ids-comp-snackbar-container-size-border-right-width-compact);border-bottom-width:var(--ids-comp-snackbar-container-size-border-bottom-width-compact);border-left-width:var(--ids-comp-snackbar-container-size-border-left-width-compact)}.ids-snackbar-group.ids-snackbar-group-compact>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__leading-element{padding-left:var(--ids-comp-snackbar-icon-size-padding-left-compact);padding-right:var(--ids-comp-snackbar-icon-size-padding-right-compact)}.ids-snackbar-group.ids-snackbar-group-compact>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__leading-element>.ids-icon{width:var(--ids-comp-snackbar-icon-size-icon-compact);height:var(--ids-comp-snackbar-icon-size-icon-compact)}.ids-snackbar-group.ids-snackbar-group-compact>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container{min-width:var(--ids-comp-snackbar-container-size-min-width-compact);row-gap:var(--ids-comp-snackbar-message-action-size-gap-compact)}.ids-snackbar-group.ids-snackbar-group-compact>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container>.ids-snackbar__message{min-width:var(--ids-comp-snackbar-message-size-min-width-compact);max-width:var(--ids-comp-snackbar-message-size-max-width-compact);min-height:var(--ids-comp-snackbar-message-size-min-height-compact);padding-right:var(--ids-comp-snackbar-message-size-padding-right-compact);font-family:var(--ids-comp-snackbar-message-typography-font-family-compact);font-size:var(--ids-comp-snackbar-message-typography-font-size-compact);font-weight:var(--ids-comp-snackbar-message-typography-font-weight-compact);line-height:var(--ids-comp-snackbar-message-typography-line-height-compact);letter-spacing:var(--ids-comp-snackbar-message-typography-letter-spacing-compact)}.ids-snackbar-group.ids-snackbar-group-compact>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container>.ids-snackbar__action{gap:var(--ids-comp-snackbar-actions-size-gap-compact)}.ids-snackbar-group.ids-snackbar-group-compact>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-icon-button>.ids-icon{width:var(--ids-comp-snackbar-icon-button-size-icon-button-compact);height:var(--ids-comp-snackbar-icon-button-size-icon-button-compact)}.ids-snackbar-group.ids-snackbar-group-compact>.ids-snackbar.ids-snackbar-width-close-x-button>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container{padding-right:var(--ids-comp-snackbar-message-action-size-padding-right-compact)}.ids-snackbar-group.ids-snackbar-group-comfortable{gap:var(--ids-comp-snackbar-group-container-size-gap-comfortable)}.ids-snackbar-group.ids-snackbar-group-comfortable>.ids-snackbar>.ids-snackbar__content-wrapper{gap:var(--ids-comp-snackbar-container-size-gap-comfortable);padding:var(--ids-comp-snackbar-container-size-padding-y-comfortable) var(--ids-comp-snackbar-container-size-padding-x-comfortable);border-radius:var(--ids-comp-snackbar-container-size-border-radius-comfortable);border-top-width:var(--ids-comp-snackbar-container-size-border-top-width-comfortable);border-right-width:var(--ids-comp-snackbar-container-size-border-right-width-comfortable);border-bottom-width:var(--ids-comp-snackbar-container-size-border-bottom-width-comfortable);border-left-width:var(--ids-comp-snackbar-container-size-border-left-width-comfortable)}.ids-snackbar-group.ids-snackbar-group-comfortable>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__leading-element{padding-left:var(--ids-comp-snackbar-icon-size-padding-left-comfortable);padding-right:var(--ids-comp-snackbar-icon-size-padding-right-comfortable)}.ids-snackbar-group.ids-snackbar-group-comfortable>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__leading-element>.ids-icon{width:var(--ids-comp-snackbar-icon-size-icon-comfortable);height:var(--ids-comp-snackbar-icon-size-icon-comfortable)}.ids-snackbar-group.ids-snackbar-group-comfortable>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container{min-width:var(--ids-comp-snackbar-container-size-min-width-comfortable);row-gap:var(--ids-comp-snackbar-message-action-size-gap-comfortable)}.ids-snackbar-group.ids-snackbar-group-comfortable>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container>.ids-snackbar__message{min-width:var(--ids-comp-snackbar-message-size-min-width-comfortable);max-width:var(--ids-comp-snackbar-message-size-max-width-comfortable);min-height:var(--ids-comp-snackbar-message-size-min-height-comfortable);padding-right:var(--ids-comp-snackbar-message-size-padding-right-comfortable);font-family:var(--ids-comp-snackbar-message-typography-font-family-comfortable);font-size:var(--ids-comp-snackbar-message-typography-font-size-comfortable);font-weight:var(--ids-comp-snackbar-message-typography-font-weight-comfortable);line-height:var(--ids-comp-snackbar-message-typography-line-height-comfortable);letter-spacing:var(--ids-comp-snackbar-message-typography-letter-spacing-comfortable)}.ids-snackbar-group.ids-snackbar-group-comfortable>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container>.ids-snackbar__action{gap:var(--ids-comp-snackbar-actions-size-gap-comfortable)}.ids-snackbar-group.ids-snackbar-group-comfortable>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-icon-button>.ids-icon{width:var(--ids-comp-snackbar-icon-button-size-icon-button-comfortable);height:var(--ids-comp-snackbar-icon-button-size-icon-button-comfortable)}.ids-snackbar-group.ids-snackbar-group-comfortable>.ids-snackbar.ids-snackbar-width-close-x-button>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container{padding-right:var(--ids-comp-snackbar-message-action-size-padding-right-comfortable)}.ids-snackbar-group.ids-snackbar-group-spacious{gap:var(--ids-comp-snackbar-group-container-size-gap-comfortable)}.ids-snackbar-group.ids-snackbar-group-spacious>.ids-snackbar>.ids-snackbar__content-wrapper{gap:var(--ids-comp-snackbar-container-size-gap-spacious);padding:var(--ids-comp-snackbar-container-size-padding-y-spacious) var(--ids-comp-snackbar-container-size-padding-x-spacious);border-radius:var(--ids-comp-snackbar-container-size-border-radius-spacious);border-top-width:var(--ids-comp-snackbar-container-size-border-top-width-spacious);border-right-width:var(--ids-comp-snackbar-container-size-border-right-width-spacious);border-bottom-width:var(--ids-comp-snackbar-container-size-border-bottom-width-spacious);border-left-width:var(--ids-comp-snackbar-container-size-border-left-width-spacious)}.ids-snackbar-group.ids-snackbar-group-spacious>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__leading-element{padding-left:var(--ids-comp-snackbar-icon-size-padding-left-spacious);padding-right:var(--ids-comp-snackbar-icon-size-padding-right-spacious)}.ids-snackbar-group.ids-snackbar-group-spacious>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__leading-element>.ids-icon{width:var(--ids-comp-snackbar-icon-size-icon-spacious);height:var(--ids-comp-snackbar-icon-size-icon-spacious)}.ids-snackbar-group.ids-snackbar-group-spacious>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container{min-width:var(--ids-comp-snackbar-container-size-min-width-spacious);row-gap:var(--ids-comp-snackbar-message-action-size-gap-spacious)}.ids-snackbar-group.ids-snackbar-group-spacious>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container>.ids-snackbar__message{min-width:var(--ids-comp-snackbar-message-size-min-width-spacious);max-width:var(--ids-comp-snackbar-message-size-max-width-spacious);min-height:var(--ids-comp-snackbar-message-size-min-height-spacious);padding-right:var(--ids-comp-snackbar-message-size-padding-right-spacious);font-family:var(--ids-comp-snackbar-message-typography-font-family-spacious);font-size:var(--ids-comp-snackbar-message-typography-font-size-spacious);font-weight:var(--ids-comp-snackbar-message-typography-font-weight-spacious);line-height:var(--ids-comp-snackbar-message-typography-line-height-spacious);letter-spacing:var(--ids-comp-snackbar-message-typography-letter-spacing-spacious)}.ids-snackbar-group.ids-snackbar-group-spacious>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container>.ids-snackbar__action{gap:var(--ids-comp-snackbar-actions-size-gap-spacious)}.ids-snackbar-group.ids-snackbar-group-spacious>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-icon-button>.ids-icon{width:var(--ids-comp-snackbar-icon-button-size-icon-button-spacious);height:var(--ids-comp-snackbar-icon-button-size-icon-button-spacious)}.ids-snackbar-group.ids-snackbar-group-spacious>.ids-snackbar.ids-snackbar-width-close-x-button>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container{padding-right:var(--ids-comp-snackbar-message-action-size-padding-right-spacious)}.ids-snackbar-group.ids-snackbar-group-dense{gap:var(--ids-comp-snackbar-group-container-size-gap-comfortable)}.ids-snackbar-group.ids-snackbar-group-dense>.ids-snackbar>.ids-snackbar__content-wrapper{gap:var(--ids-comp-snackbar-container-size-gap-dense);padding:var(--ids-comp-snackbar-container-size-padding-y-dense) var(--ids-comp-snackbar-container-size-padding-x-dense);border-radius:var(--ids-comp-snackbar-container-size-border-radius-dense);border-top-width:var(--ids-comp-snackbar-container-size-border-top-width-dense);border-right-width:var(--ids-comp-snackbar-container-size-border-right-width-dense);border-bottom-width:var(--ids-comp-snackbar-container-size-border-bottom-width-dense);border-left-width:var(--ids-comp-snackbar-container-size-border-left-width-dense)}.ids-snackbar-group.ids-snackbar-group-dense>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__leading-element{padding-left:var(--ids-comp-snackbar-icon-size-padding-left-dense);padding-right:var(--ids-comp-snackbar-icon-size-padding-right-dense)}.ids-snackbar-group.ids-snackbar-group-dense>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__leading-element>.ids-icon{width:var(--ids-comp-snackbar-icon-size-icon-dense);height:var(--ids-comp-snackbar-icon-size-icon-dense)}.ids-snackbar-group.ids-snackbar-group-dense>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container{min-width:var(--ids-comp-snackbar-container-size-min-width-dense);row-gap:var(--ids-comp-snackbar-message-action-size-gap-dense)}.ids-snackbar-group.ids-snackbar-group-dense>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container>.ids-snackbar__message{min-width:var(--ids-comp-snackbar-message-size-min-width-dense);max-width:var(--ids-comp-snackbar-message-size-max-width-dense);min-height:var(--ids-comp-snackbar-message-size-min-height-dense);padding-right:var(--ids-comp-snackbar-message-size-padding-right-dense);font-family:var(--ids-comp-snackbar-message-typography-font-family-dense);font-size:var(--ids-comp-snackbar-message-typography-font-size-dense);font-weight:var(--ids-comp-snackbar-message-typography-font-weight-dense);line-height:var(--ids-comp-snackbar-message-typography-line-height-dense);letter-spacing:var(--ids-comp-snackbar-message-typography-letter-spacing-dense)}.ids-snackbar-group.ids-snackbar-group-dense>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container>.ids-snackbar__action{gap:var(--ids-comp-snackbar-actions-size-gap-dense)}.ids-snackbar-group.ids-snackbar-group-dense>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-icon-button>.ids-icon{width:var(--ids-comp-snackbar-icon-button-size-icon-button-dense);height:var(--ids-comp-snackbar-icon-button-size-icon-button-dense)}.ids-snackbar-group.ids-snackbar-group-dense>.ids-snackbar.ids-snackbar-width-close-x-button>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container{padding-right:var(--ids-comp-snackbar-message-action-size-padding-right-dense)}
+.ids-snackbar-group{display:flex}.ids-snackbar-group.ids-snackbar-group-position-top-left,.ids-snackbar-group.ids-snackbar-group-position-top-center,.ids-snackbar-group.ids-snackbar-group-position-top-right{flex-direction:column-reverse}.ids-snackbar-group.ids-snackbar-group-position-top-left.ids-snackbar-group-newest-at-start,.ids-snackbar-group.ids-snackbar-group-position-top-center.ids-snackbar-group-newest-at-start,.ids-snackbar-group.ids-snackbar-group-position-top-right.ids-snackbar-group-newest-at-start{flex-direction:column}.ids-snackbar-group.ids-snackbar-group-position-bottom-left,.ids-snackbar-group.ids-snackbar-group-position-bottom-center,.ids-snackbar-group.ids-snackbar-group-position-bottom-right{flex-direction:column}.ids-snackbar-group.ids-snackbar-group-position-bottom-left.ids-snackbar-group-newest-at-start,.ids-snackbar-group.ids-snackbar-group-position-bottom-center.ids-snackbar-group-newest-at-start,.ids-snackbar-group.ids-snackbar-group-position-bottom-right.ids-snackbar-group-newest-at-start{flex-direction:column-reverse}.ids-snackbar-group.ids-snackbar-group-position-top-left,.ids-snackbar-group.ids-snackbar-group-position-bottom-left{align-items:flex-start}.ids-snackbar-group.ids-snackbar-group-position-top-center,.ids-snackbar-group.ids-snackbar-group-position-bottom-center{align-items:center}.ids-snackbar-group.ids-snackbar-group-position-top-right,.ids-snackbar-group.ids-snackbar-group-position-bottom-right{align-items:flex-end}.ids-snackbar-group .ids-snackbar{min-width:max-content}.ids-snackbar-group .ids-snackbar>.ids-snackbar__content-wrapper{position:relative;display:flex;justify-content:space-between;align-items:flex-start;align-content:flex-start;flex-wrap:wrap;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;box-shadow:var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xl) var(--ids-smc-reference-container-effects-shadow-blur-xxl) var(--ids-smc-reference-container-effects-shadow-spread-sm) var(--ids-smc-reference-container-effects-shadow-color-dark-light),var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-md) var(--ids-smc-reference-container-effects-shadow-blur-lg) var(--ids-smc-reference-container-effects-shadow-spread-xs) var(--ids-smc-reference-container-effects-shadow-color-dark-light)}.ids-snackbar-group .ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__leading-element{display:flex;align-items:center;flex-shrink:0}.ids-snackbar-group .ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container{display:flex;justify-content:space-between;align-items:center;align-content:center;flex:1 0 0;flex-wrap:wrap}.ids-snackbar-group .ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container>.ids-snackbar__message{flex:1 0 0;font-style:normal}.ids-snackbar-group .ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container>.ids-snackbar__action{display:flex;align-items:center}.ids-snackbar-group .ids-snackbar>.ids-snackbar__content-wrapper>.ids-icon-button{position:absolute;top:16px;right:16px}.ids-snackbar-group .ids-snackbar.ids-snackbar-dark>.ids-snackbar__content-wrapper{border-top-color:var(--ids-comp-snackbar-filled-color-border-dark-default);border-right-color:var(--ids-comp-snackbar-filled-color-border-dark-default);border-bottom-color:var(--ids-comp-snackbar-filled-color-border-dark-default);border-left-color:var(--ids-comp-snackbar-filled-color-border-dark-default);background:var(--ids-comp-snackbar-filled-color-bg-dark-default)}.ids-snackbar-group .ids-snackbar.ids-snackbar-dark>.ids-snackbar__content-wrapper>.ids-snackbar__leading-element>.ids-icon{color:var(--ids-comp-snackbar-filled-color-fg-icon-dark-default)}.ids-snackbar-group .ids-snackbar.ids-snackbar-dark>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container>.ids-snackbar__message{color:var(--ids-comp-snackbar-filled-color-fg-message-dark-default)}.ids-snackbar-group .ids-snackbar.ids-snackbar-info>.ids-snackbar__content-wrapper{border-top-color:var(--ids-comp-snackbar-filled-color-border-info-default);border-right-color:var(--ids-comp-snackbar-filled-color-border-info-default);border-bottom-color:var(--ids-comp-snackbar-filled-color-border-info-default);border-left-color:var(--ids-comp-snackbar-filled-color-border-info-default);background:var(--ids-comp-snackbar-filled-color-bg-info-default)}.ids-snackbar-group .ids-snackbar.ids-snackbar-info>.ids-snackbar__content-wrapper>.ids-snackbar__leading-element>.ids-icon{color:var(--ids-comp-snackbar-filled-color-fg-icon-info-default)}.ids-snackbar-group .ids-snackbar.ids-snackbar-info>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container>.ids-snackbar__message{color:var(--ids-comp-snackbar-filled-color-fg-message-info-default)}.ids-snackbar-group .ids-snackbar.ids-snackbar-success>.ids-snackbar__content-wrapper{border-top-color:var(--ids-comp-snackbar-filled-color-border-success-default);border-right-color:var(--ids-comp-snackbar-filled-color-border-success-default);border-bottom-color:var(--ids-comp-snackbar-filled-color-border-success-default);border-left-color:var(--ids-comp-snackbar-filled-color-border-success-default);background:var(--ids-comp-snackbar-filled-color-bg-success-default)}.ids-snackbar-group .ids-snackbar.ids-snackbar-success>.ids-snackbar__content-wrapper>.ids-snackbar__leading-element>.ids-icon{color:var(--ids-comp-snackbar-filled-color-fg-icon-success-default)}.ids-snackbar-group .ids-snackbar.ids-snackbar-success>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container>.ids-snackbar__message{color:var(--ids-comp-snackbar-filled-color-fg-message-success-default)}.ids-snackbar-group .ids-snackbar.ids-snackbar-error>.ids-snackbar__content-wrapper{border-top-color:var(--ids-comp-snackbar-filled-color-border-error-default);border-right-color:var(--ids-comp-snackbar-filled-color-border-error-default);border-bottom-color:var(--ids-comp-snackbar-filled-color-border-error-default);border-left-color:var(--ids-comp-snackbar-filled-color-border-error-default);background:var(--ids-comp-snackbar-filled-color-bg-error-default)}.ids-snackbar-group .ids-snackbar.ids-snackbar-error>.ids-snackbar__content-wrapper>.ids-snackbar__leading-element>.ids-icon{color:var(--ids-comp-snackbar-filled-color-fg-icon-error-default)}.ids-snackbar-group .ids-snackbar.ids-snackbar-error>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container>.ids-snackbar__message{color:var(--ids-comp-snackbar-filled-color-fg-message-error-default)}.ids-snackbar-group .ids-snackbar.ids-snackbar-warning>.ids-snackbar__content-wrapper{border-top-color:var(--ids-comp-snackbar-filled-color-border-warning-default);border-right-color:var(--ids-comp-snackbar-filled-color-border-warning-default);border-bottom-color:var(--ids-comp-snackbar-filled-color-border-warning-default);border-left-color:var(--ids-comp-snackbar-filled-color-border-warning-default);background:var(--ids-comp-snackbar-filled-color-bg-warning-default)}.ids-snackbar-group .ids-snackbar.ids-snackbar-warning>.ids-snackbar__content-wrapper>.ids-snackbar__leading-element>.ids-icon{color:var(--ids-comp-snackbar-filled-color-fg-icon-warning-default)}.ids-snackbar-group .ids-snackbar.ids-snackbar-warning>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container>.ids-snackbar__message{color:var(--ids-comp-snackbar-filled-color-fg-message-warning-default)}.ids-snackbar-group.ids-snackbar-group-compact{gap:var(--ids-comp-snackbar-group-container-size-gap-comfortable)}.ids-snackbar-group.ids-snackbar-group-compact>.ids-snackbar>.ids-snackbar__content-wrapper{gap:var(--ids-comp-snackbar-container-size-gap-compact);padding:var(--ids-comp-snackbar-container-size-padding-y-compact) var(--ids-comp-snackbar-container-size-padding-x-compact);border-radius:var(--ids-comp-snackbar-container-size-border-radius-compact);border-top-width:var(--ids-comp-snackbar-container-size-border-top-width-compact);border-right-width:var(--ids-comp-snackbar-container-size-border-right-width-compact);border-bottom-width:var(--ids-comp-snackbar-container-size-border-bottom-width-compact);border-left-width:var(--ids-comp-snackbar-container-size-border-left-width-compact)}.ids-snackbar-group.ids-snackbar-group-compact>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__leading-element{padding-left:var(--ids-comp-snackbar-icon-size-padding-left-compact);padding-right:var(--ids-comp-snackbar-icon-size-padding-right-compact)}.ids-snackbar-group.ids-snackbar-group-compact>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__leading-element>.ids-icon{width:var(--ids-comp-snackbar-icon-size-icon-compact);height:var(--ids-comp-snackbar-icon-size-icon-compact);font-size:var(--ids-comp-snackbar-icon-typography-font-size-compact);font-weight:var(--ids-comp-snackbar-icon-typography-font-weight-compact);line-height:var(--ids-comp-snackbar-icon-typography-line-height-compact)}.ids-snackbar-group.ids-snackbar-group-compact>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container{min-width:var(--ids-comp-snackbar-container-size-min-width-compact);row-gap:var(--ids-comp-snackbar-message-action-size-gap-compact)}.ids-snackbar-group.ids-snackbar-group-compact>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container>.ids-snackbar__message{min-width:var(--ids-comp-snackbar-message-size-min-width-compact);max-width:var(--ids-comp-snackbar-message-size-max-width-compact);min-height:var(--ids-comp-snackbar-message-size-min-height-compact);padding-right:var(--ids-comp-snackbar-message-size-padding-right-compact);font-family:var(--ids-comp-snackbar-message-typography-font-family-compact);font-size:var(--ids-comp-snackbar-message-typography-font-size-compact);font-weight:var(--ids-comp-snackbar-message-typography-font-weight-compact);line-height:var(--ids-comp-snackbar-message-typography-line-height-compact);letter-spacing:var(--ids-comp-snackbar-message-typography-letter-spacing-compact)}.ids-snackbar-group.ids-snackbar-group-compact>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container>.ids-snackbar__action{gap:var(--ids-comp-snackbar-actions-size-gap-compact)}.ids-snackbar-group.ids-snackbar-group-compact>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-icon-button>.ids-icon{width:var(--ids-comp-snackbar-icon-button-size-icon-button-compact);height:var(--ids-comp-snackbar-icon-button-size-icon-button-compact)}.ids-snackbar-group.ids-snackbar-group-compact>.ids-snackbar.ids-snackbar-width-close-x-button>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container{padding-right:var(--ids-comp-snackbar-message-action-size-padding-right-compact)}.ids-snackbar-group.ids-snackbar-group-comfortable{gap:var(--ids-comp-snackbar-group-container-size-gap-comfortable)}.ids-snackbar-group.ids-snackbar-group-comfortable>.ids-snackbar>.ids-snackbar__content-wrapper{gap:var(--ids-comp-snackbar-container-size-gap-comfortable);padding:var(--ids-comp-snackbar-container-size-padding-y-comfortable) var(--ids-comp-snackbar-container-size-padding-x-comfortable);border-radius:var(--ids-comp-snackbar-container-size-border-radius-comfortable);border-top-width:var(--ids-comp-snackbar-container-size-border-top-width-comfortable);border-right-width:var(--ids-comp-snackbar-container-size-border-right-width-comfortable);border-bottom-width:var(--ids-comp-snackbar-container-size-border-bottom-width-comfortable);border-left-width:var(--ids-comp-snackbar-container-size-border-left-width-comfortable)}.ids-snackbar-group.ids-snackbar-group-comfortable>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__leading-element{padding-left:var(--ids-comp-snackbar-icon-size-padding-left-comfortable);padding-right:var(--ids-comp-snackbar-icon-size-padding-right-comfortable)}.ids-snackbar-group.ids-snackbar-group-comfortable>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__leading-element>.ids-icon{width:var(--ids-comp-snackbar-icon-size-icon-comfortable);height:var(--ids-comp-snackbar-icon-size-icon-comfortable);font-size:var(--ids-comp-snackbar-icon-typography-font-size-comfortable);font-weight:var(--ids-comp-snackbar-icon-typography-font-weight-comfortable);line-height:var(--ids-comp-snackbar-icon-typography-line-height-comfortable)}.ids-snackbar-group.ids-snackbar-group-comfortable>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container{min-width:var(--ids-comp-snackbar-container-size-min-width-comfortable);row-gap:var(--ids-comp-snackbar-message-action-size-gap-comfortable)}.ids-snackbar-group.ids-snackbar-group-comfortable>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container>.ids-snackbar__message{min-width:var(--ids-comp-snackbar-message-size-min-width-comfortable);max-width:var(--ids-comp-snackbar-message-size-max-width-comfortable);min-height:var(--ids-comp-snackbar-message-size-min-height-comfortable);padding-right:var(--ids-comp-snackbar-message-size-padding-right-comfortable);font-family:var(--ids-comp-snackbar-message-typography-font-family-comfortable);font-size:var(--ids-comp-snackbar-message-typography-font-size-comfortable);font-weight:var(--ids-comp-snackbar-message-typography-font-weight-comfortable);line-height:var(--ids-comp-snackbar-message-typography-line-height-comfortable);letter-spacing:var(--ids-comp-snackbar-message-typography-letter-spacing-comfortable)}.ids-snackbar-group.ids-snackbar-group-comfortable>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container>.ids-snackbar__action{gap:var(--ids-comp-snackbar-actions-size-gap-comfortable)}.ids-snackbar-group.ids-snackbar-group-comfortable>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-icon-button>.ids-icon{width:var(--ids-comp-snackbar-icon-button-size-icon-button-comfortable);height:var(--ids-comp-snackbar-icon-button-size-icon-button-comfortable)}.ids-snackbar-group.ids-snackbar-group-comfortable>.ids-snackbar.ids-snackbar-width-close-x-button>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container{padding-right:var(--ids-comp-snackbar-message-action-size-padding-right-comfortable)}.ids-snackbar-group.ids-snackbar-group-spacious{gap:var(--ids-comp-snackbar-group-container-size-gap-comfortable)}.ids-snackbar-group.ids-snackbar-group-spacious>.ids-snackbar>.ids-snackbar__content-wrapper{gap:var(--ids-comp-snackbar-container-size-gap-spacious);padding:var(--ids-comp-snackbar-container-size-padding-y-spacious) var(--ids-comp-snackbar-container-size-padding-x-spacious);border-radius:var(--ids-comp-snackbar-container-size-border-radius-spacious);border-top-width:var(--ids-comp-snackbar-container-size-border-top-width-spacious);border-right-width:var(--ids-comp-snackbar-container-size-border-right-width-spacious);border-bottom-width:var(--ids-comp-snackbar-container-size-border-bottom-width-spacious);border-left-width:var(--ids-comp-snackbar-container-size-border-left-width-spacious)}.ids-snackbar-group.ids-snackbar-group-spacious>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__leading-element{padding-left:var(--ids-comp-snackbar-icon-size-padding-left-spacious);padding-right:var(--ids-comp-snackbar-icon-size-padding-right-spacious)}.ids-snackbar-group.ids-snackbar-group-spacious>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__leading-element>.ids-icon{width:var(--ids-comp-snackbar-icon-size-icon-spacious);height:var(--ids-comp-snackbar-icon-size-icon-spacious);font-size:var(--ids-comp-snackbar-icon-typography-font-size-spacious);font-weight:var(--ids-comp-snackbar-icon-typography-font-weight-spacious);line-height:var(--ids-comp-snackbar-icon-typography-line-height-spacious)}.ids-snackbar-group.ids-snackbar-group-spacious>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container{min-width:var(--ids-comp-snackbar-container-size-min-width-spacious);row-gap:var(--ids-comp-snackbar-message-action-size-gap-spacious)}.ids-snackbar-group.ids-snackbar-group-spacious>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container>.ids-snackbar__message{min-width:var(--ids-comp-snackbar-message-size-min-width-spacious);max-width:var(--ids-comp-snackbar-message-size-max-width-spacious);min-height:var(--ids-comp-snackbar-message-size-min-height-spacious);padding-right:var(--ids-comp-snackbar-message-size-padding-right-spacious);font-family:var(--ids-comp-snackbar-message-typography-font-family-spacious);font-size:var(--ids-comp-snackbar-message-typography-font-size-spacious);font-weight:var(--ids-comp-snackbar-message-typography-font-weight-spacious);line-height:var(--ids-comp-snackbar-message-typography-line-height-spacious);letter-spacing:var(--ids-comp-snackbar-message-typography-letter-spacing-spacious)}.ids-snackbar-group.ids-snackbar-group-spacious>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container>.ids-snackbar__action{gap:var(--ids-comp-snackbar-actions-size-gap-spacious)}.ids-snackbar-group.ids-snackbar-group-spacious>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-icon-button>.ids-icon{width:var(--ids-comp-snackbar-icon-button-size-icon-button-spacious);height:var(--ids-comp-snackbar-icon-button-size-icon-button-spacious)}.ids-snackbar-group.ids-snackbar-group-spacious>.ids-snackbar.ids-snackbar-width-close-x-button>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container{padding-right:var(--ids-comp-snackbar-message-action-size-padding-right-spacious)}.ids-snackbar-group.ids-snackbar-group-dense{gap:var(--ids-comp-snackbar-group-container-size-gap-comfortable)}.ids-snackbar-group.ids-snackbar-group-dense>.ids-snackbar>.ids-snackbar__content-wrapper{gap:var(--ids-comp-snackbar-container-size-gap-dense);padding:var(--ids-comp-snackbar-container-size-padding-y-dense) var(--ids-comp-snackbar-container-size-padding-x-dense);border-radius:var(--ids-comp-snackbar-container-size-border-radius-dense);border-top-width:var(--ids-comp-snackbar-container-size-border-top-width-dense);border-right-width:var(--ids-comp-snackbar-container-size-border-right-width-dense);border-bottom-width:var(--ids-comp-snackbar-container-size-border-bottom-width-dense);border-left-width:var(--ids-comp-snackbar-container-size-border-left-width-dense)}.ids-snackbar-group.ids-snackbar-group-dense>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__leading-element{padding-left:var(--ids-comp-snackbar-icon-size-padding-left-dense);padding-right:var(--ids-comp-snackbar-icon-size-padding-right-dense)}.ids-snackbar-group.ids-snackbar-group-dense>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__leading-element>.ids-icon{width:var(--ids-comp-snackbar-icon-size-icon-dense);height:var(--ids-comp-snackbar-icon-size-icon-dense);font-size:var(--ids-comp-snackbar-icon-typography-font-size-dense);font-weight:var(--ids-comp-snackbar-icon-typography-font-weight-dense);line-height:var(--ids-comp-snackbar-icon-typography-line-height-dense)}.ids-snackbar-group.ids-snackbar-group-dense>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container{min-width:var(--ids-comp-snackbar-container-size-min-width-dense);row-gap:var(--ids-comp-snackbar-message-action-size-gap-dense)}.ids-snackbar-group.ids-snackbar-group-dense>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container>.ids-snackbar__message{min-width:var(--ids-comp-snackbar-message-size-min-width-dense);max-width:var(--ids-comp-snackbar-message-size-max-width-dense);min-height:var(--ids-comp-snackbar-message-size-min-height-dense);padding-right:var(--ids-comp-snackbar-message-size-padding-right-dense);font-family:var(--ids-comp-snackbar-message-typography-font-family-dense);font-size:var(--ids-comp-snackbar-message-typography-font-size-dense);font-weight:var(--ids-comp-snackbar-message-typography-font-weight-dense);line-height:var(--ids-comp-snackbar-message-typography-line-height-dense);letter-spacing:var(--ids-comp-snackbar-message-typography-letter-spacing-dense)}.ids-snackbar-group.ids-snackbar-group-dense>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container>.ids-snackbar__action{gap:var(--ids-comp-snackbar-actions-size-gap-dense)}.ids-snackbar-group.ids-snackbar-group-dense>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-icon-button>.ids-icon{width:var(--ids-comp-snackbar-icon-button-size-icon-button-dense);height:var(--ids-comp-snackbar-icon-button-size-icon-button-dense)}.ids-snackbar-group.ids-snackbar-group-dense>.ids-snackbar.ids-snackbar-width-close-x-button>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container{padding-right:var(--ids-comp-snackbar-message-action-size-padding-right-dense)}

package/dist/snackbar/snackbar.plugin.js

@@ -136,7 +136,13 @@ module.exports = function SnackbarPlugin() {
         paddingRight: 'var(--ids-comp-snackbar-icon-size-padding-right-compact)',
       },
       '.ids-snackbar-group.ids-snackbar-group-compact>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__leading-element>.ids-icon':
-        { width: 'var(--ids-comp-snackbar-icon-size-icon-compact)', height: 'var(--ids-comp-snackbar-icon-size-icon-compact)' },
+        {
+          width: 'var(--ids-comp-snackbar-icon-size-icon-compact)',
+          height: 'var(--ids-comp-snackbar-icon-size-icon-compact)',
+          fontSize: 'var(--ids-comp-snackbar-icon-typography-font-size-compact)',
+          fontWeight: 'var(--ids-comp-snackbar-icon-typography-font-weight-compact)',
+          lineHeight: 'var(--ids-comp-snackbar-icon-typography-line-height-compact)',
+        },
       '.ids-snackbar-group.ids-snackbar-group-compact>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container':
         {
           minWidth: 'var(--ids-comp-snackbar-container-size-min-width-compact)',
@@ -178,7 +184,13 @@ module.exports = function SnackbarPlugin() {
         paddingRight: 'var(--ids-comp-snackbar-icon-size-padding-right-comfortable)',
       },
       '.ids-snackbar-group.ids-snackbar-group-comfortable>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__leading-element>.ids-icon':
-        { width: 'var(--ids-comp-snackbar-icon-size-icon-comfortable)', height: 'var(--ids-comp-snackbar-icon-size-icon-comfortable)' },
+        {
+          width: 'var(--ids-comp-snackbar-icon-size-icon-comfortable)',
+          height: 'var(--ids-comp-snackbar-icon-size-icon-comfortable)',
+          fontSize: 'var(--ids-comp-snackbar-icon-typography-font-size-comfortable)',
+          fontWeight: 'var(--ids-comp-snackbar-icon-typography-font-weight-comfortable)',
+          lineHeight: 'var(--ids-comp-snackbar-icon-typography-line-height-comfortable)',
+        },
       '.ids-snackbar-group.ids-snackbar-group-comfortable>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container':
         {
           minWidth: 'var(--ids-comp-snackbar-container-size-min-width-comfortable)',
@@ -219,7 +231,13 @@ module.exports = function SnackbarPlugin() {
         paddingRight: 'var(--ids-comp-snackbar-icon-size-padding-right-spacious)',
       },
       '.ids-snackbar-group.ids-snackbar-group-spacious>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__leading-element>.ids-icon':
-        { width: 'var(--ids-comp-snackbar-icon-size-icon-spacious)', height: 'var(--ids-comp-snackbar-icon-size-icon-spacious)' },
+        {
+          width: 'var(--ids-comp-snackbar-icon-size-icon-spacious)',
+          height: 'var(--ids-comp-snackbar-icon-size-icon-spacious)',
+          fontSize: 'var(--ids-comp-snackbar-icon-typography-font-size-spacious)',
+          fontWeight: 'var(--ids-comp-snackbar-icon-typography-font-weight-spacious)',
+          lineHeight: 'var(--ids-comp-snackbar-icon-typography-line-height-spacious)',
+        },
       '.ids-snackbar-group.ids-snackbar-group-spacious>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container':
         {
           minWidth: 'var(--ids-comp-snackbar-container-size-min-width-spacious)',
@@ -260,7 +278,13 @@ module.exports = function SnackbarPlugin() {
         paddingRight: 'var(--ids-comp-snackbar-icon-size-padding-right-dense)',
       },
       '.ids-snackbar-group.ids-snackbar-group-dense>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__leading-element>.ids-icon':
-        { width: 'var(--ids-comp-snackbar-icon-size-icon-dense)', height: 'var(--ids-comp-snackbar-icon-size-icon-dense)' },
+        {
+          width: 'var(--ids-comp-snackbar-icon-size-icon-dense)',
+          height: 'var(--ids-comp-snackbar-icon-size-icon-dense)',
+          fontSize: 'var(--ids-comp-snackbar-icon-typography-font-size-dense)',
+          fontWeight: 'var(--ids-comp-snackbar-icon-typography-font-weight-dense)',
+          lineHeight: 'var(--ids-comp-snackbar-icon-typography-line-height-dense)',
+        },
       '.ids-snackbar-group.ids-snackbar-group-dense>.ids-snackbar>.ids-snackbar__content-wrapper>.ids-snackbar__message-action-container': {
         minWidth: 'var(--ids-comp-snackbar-container-size-min-width-dense)',
         rowGap: 'var(--ids-comp-snackbar-message-action-size-gap-dense)',