npm - @i-cell/ids-styles - Versions diffs - 0.0.1 → 0.0.3 - Mend

@i-cell/ids-styles 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (43) hide show

package/dist/accordion/accordion.css +78 -62
package/dist/accordion/accordion.min.css +1 -1
package/dist/accordion/accordion.plugin.js +189 -0
package/dist/action-item/action-item.css +67 -55
package/dist/action-item/action-item.min.css +1 -1
package/dist/action-item/action-item.plugin.js +174 -0
package/dist/action-panel/action-panel.css +29 -28
package/dist/action-panel/action-panel.min.css +1 -1
package/dist/action-panel/action-panel.plugin.js +90 -0
package/dist/avatar/avatar.css +92 -173
package/dist/avatar/avatar.min.css +1 -1
package/dist/avatar/avatar.plugin.js +198 -0
package/dist/button/button.css +241 -278
package/dist/button/button.min.css +1 -1
package/dist/button/button.plugin.js +762 -0
package/dist/card/card.css +137 -184
package/dist/card/card.min.css +1 -1
package/dist/card/card.plugin.js +798 -0
package/dist/checkbox/checkbox.css +554 -0
package/dist/checkbox/checkbox.min.css +1 -0
package/dist/checkbox/checkbox.plugin.js +539 -0
package/dist/components.css +1895 -1574
package/dist/components.min.css +1 -1
package/dist/components.plugin.js +4148 -0
package/dist/dialog/dialog.css +163 -110
package/dist/dialog/dialog.min.css +1 -1
package/dist/dialog/dialog.plugin.js +225 -0
package/dist/divider/divider.css +21 -23
package/dist/divider/divider.min.css +1 -1
package/dist/divider/divider.plugin.js +31 -0
package/dist/form-elements/message/message.css +165 -0
package/dist/form-elements/message/message.min.css +1 -0
package/dist/form-elements/message/message.plugin.js +116 -0
package/dist/form-elements/required-marker/required-marker.css +6 -0
package/dist/form-elements/required-marker/required-marker.min.css +1 -0
package/dist/form-elements/required-marker/required-marker.plugin.js +15 -0
package/dist/icon-button/icon-button.css +173 -196
package/dist/icon-button/icon-button.min.css +1 -1
package/dist/icon-button/icon-button.plugin.js +657 -0
package/dist/tag/tag.css +166 -465
package/dist/tag/tag.min.css +1 -1
package/dist/tag/tag.plugin.js +462 -0
package/package.json +16 -4

package/dist/components.plugin.js ADDED Viewed

@@ -0,0 +1,4148 @@
+// Tailwind CSS plugin for the components component in the i-Cell Design System
+module.exports = function ComponentsPlugin() {
+  return function ({ addComponents }) {
+    const cssObj = {
+      '.ids-accordion': {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        width: '100%',
+        background: 'var(--ids-comp-accordion-item-color-bg-default)',
+      },
+      '.ids-accordion>.ids-accordion-summary': {
+        display: 'flex',
+        alignItems: 'center',
+        width: '100%',
+        boxSizing: 'border-box',
+        borderStyle: 'solid',
+        cursor: 'pointer',
+      },
+      '.ids-accordion>.ids-accordion-summary:focus': {
+        outlineOffset: '2px',
+        outlineStyle: 'solid',
+        outlineWidth: 'var(--ids-comp-accordion-summary-focused-outline-size-outline)',
+        outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)',
+      },
+      '.ids-theme-dark .ids-accordion>.ids-accordion-summary:focus': {
+        outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-light-focused)',
+      },
+      '.ids-accordion>.ids-accordion-summary>.ids-accordion-title': {
+        flex: '1 0 0',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        fontStyle: 'normal',
+      },
+      '.ids-accordion.ids-accordion-disabled>.ids-accordion-summary': { pointerEvents: 'none', userSelect: 'none' },
+      '.ids-accordion>.ids-accordion-content': {
+        display: 'flex',
+        flexDirection: 'column',
+        background: 'var(--ids-comp-accordion-details-color-bg-default)',
+      },
+      '.ids-accordion.ids-accordion-compact': {
+        padding: 'var(--ids-comp-accordion-item-size-padding-y-compact) var(--ids-comp-accordion-item-size-padding-x-compact)',
+        gap: 'var(--ids-comp-accordion-item-size-gap-compact)',
+        borderRadius: 'var(--ids-comp-accordion-item-size-border-radius-compact)',
+      },
+      '.ids-accordion.ids-accordion-compact>.ids-accordion-summary': {
+        height: 'var(--ids-comp-accordion-summary-size-height-compact)',
+        padding: 'var(--ids-comp-accordion-summary-size-padding-y-compact) var(--ids-comp-accordion-summary-size-padding-x-compact)',
+        gap: 'var(--ids-comp-accordion-summary-size-gap-compact)',
+        borderRadius: 'var(--ids-comp-accordion-summary-size-border-radius-compact)',
+        borderWidth: 'var(--ids-comp-accordion-summary-size-border-width-compact)',
+      },
+      '.ids-accordion.ids-accordion-compact>.ids-accordion-summary>.ids-accordion-title': {
+        fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-compact)',
+        fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-compact)',
+        fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-compact)',
+        letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-compact)',
+        lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-compact)',
+      },
+      '.ids-accordion.ids-accordion-compact>.ids-accordion-content': {
+        padding: 'var(--ids-comp-accordion-details-size-padding-y-compact) var(--ids-comp-accordion-details-size-padding-x-compact)',
+        gap: 'var(--ids-comp-accordion-details-size-gap-compact)',
+      },
+      '.ids-accordion.ids-accordion-comfortable': {
+        padding: 'var(--ids-comp-accordion-item-size-padding-y-comfortable) var(--ids-comp-accordion-item-size-padding-x-comfortable)',
+        gap: 'var(--ids-comp-accordion-item-size-gap-comfortable)',
+        borderRadius: 'var(--ids-comp-accordion-item-size-border-radius-comfortable)',
+      },
+      '.ids-accordion.ids-accordion-comfortable>.ids-accordion-summary': {
+        height: 'var(--ids-comp-accordion-summary-size-height-comfortable)',
+        padding:
+          'var(--ids-comp-accordion-summary-size-padding-y-comfortable) var(--ids-comp-accordion-summary-size-padding-x-comfortable)',
+        gap: 'var(--ids-comp-accordion-summary-size-gap-comfortable)',
+        borderRadius: 'var(--ids-comp-accordion-summary-size-border-radius-comfortable)',
+        borderWidth: 'var(--ids-comp-accordion-summary-size-border-width-comfortable)',
+      },
+      '.ids-accordion.ids-accordion-comfortable>.ids-accordion-summary>.ids-accordion-title': {
+        fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-comfortable)',
+        fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-comfortable)',
+        fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-comfortable)',
+        letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-comfortable)',
+        lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-comfortable)',
+      },
+      '.ids-accordion.ids-accordion-comfortable>.ids-accordion-content': {
+        padding:
+          'var(--ids-comp-accordion-details-size-padding-y-comfortable) var(--ids-comp-accordion-details-size-padding-x-comfortable)',
+        gap: 'var(--ids-comp-accordion-details-size-gap-comfortable)',
+      },
+      '.ids-accordion.ids-accordion-spacious': {
+        padding: 'var(--ids-comp-accordion-item-size-padding-y-spacious) var(--ids-comp-accordion-item-size-padding-x-spacious)',
+        gap: 'var(--ids-comp-accordion-item-size-gap-spacious)',
+        borderRadius: 'var(--ids-comp-accordion-item-size-border-radius-spacious)',
+      },
+      '.ids-accordion.ids-accordion-spacious>.ids-accordion-summary': {
+        height: 'var(--ids-comp-accordion-summary-size-height-spacious)',
+        padding: 'var(--ids-comp-accordion-summary-size-padding-y-spacious) var(--ids-comp-accordion-summary-size-padding-x-spacious)',
+        gap: 'var(--ids-comp-accordion-summary-size-gap-spacious)',
+        borderRadius: 'var(--ids-comp-accordion-summary-size-border-radius-spacious)',
+        borderWidth: 'var(--ids-comp-accordion-summary-size-border-width-spacious)',
+      },
+      '.ids-accordion.ids-accordion-spacious>.ids-accordion-summary>.ids-accordion-title': {
+        fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-spacious)',
+        fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-spacious)',
+        fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-spacious)',
+        letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-spacious)',
+        lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-spacious)',
+      },
+      '.ids-accordion.ids-accordion-spacious>.ids-accordion-content': {
+        padding: 'var(--ids-comp-accordion-details-size-padding-y-spacious) var(--ids-comp-accordion-details-size-padding-x-spacious)',
+        gap: 'var(--ids-comp-accordion-details-size-gap-spacious)',
+      },
+      '.ids-accordion.ids-accordion-dense': {
+        padding: 'var(--ids-comp-accordion-item-size-padding-y-dense) var(--ids-comp-accordion-item-size-padding-x-dense)',
+        gap: 'var(--ids-comp-accordion-item-size-gap-dense)',
+        borderRadius: 'var(--ids-comp-accordion-item-size-border-radius-dense)',
+      },
+      '.ids-accordion.ids-accordion-dense>.ids-accordion-summary': {
+        height: 'var(--ids-comp-accordion-summary-size-height-dense)',
+        padding: 'var(--ids-comp-accordion-summary-size-padding-y-dense) var(--ids-comp-accordion-summary-size-padding-x-dense)',
+        gap: 'var(--ids-comp-accordion-summary-size-gap-dense)',
+        borderRadius: 'var(--ids-comp-accordion-summary-size-border-radius-dense)',
+        borderWidth: 'var(--ids-comp-accordion-summary-size-border-width-dense)',
+      },
+      '.ids-accordion.ids-accordion-dense>.ids-accordion-summary>.ids-accordion-title': {
+        fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-dense)',
+        fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-dense)',
+        fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-dense)',
+        letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-dense)',
+        lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-dense)',
+      },
+      '.ids-accordion.ids-accordion-dense>.ids-accordion-content': {
+        padding: 'var(--ids-comp-accordion-details-size-padding-y-dense) var(--ids-comp-accordion-details-size-padding-x-dense)',
+        gap: 'var(--ids-comp-accordion-details-size-gap-dense)',
+      },
+      '.ids-accordion.ids-accordion-text>.ids-accordion-summary': {
+        background: 'var(--ids-comp-accordion-summary-text-color-bg-default)',
+        borderColor: 'var(--ids-comp-accordion-summary-text-color-border-default)',
+        color: 'var(--ids-comp-accordion-summary-text-color-fg-label-default)',
+      },
+      '.ids-accordion.ids-accordion-text>.ids-accordion-summary:hover': {
+        background: 'var(--ids-comp-accordion-summary-text-color-bg-hovered)',
+        borderColor: 'var(--ids-comp-accordion-summary-text-color-border-hovered)',
+        color: 'var(--ids-comp-accordion-summary-text-color-fg-label-hovered)',
+      },
+      '.ids-accordion.ids-accordion-text>.ids-accordion-summary:focus': {
+        background: 'var(--ids-comp-accordion-summary-text-color-bg-focused)',
+        borderColor: 'var(--ids-comp-accordion-summary-text-color-border-focused)',
+        color: 'var(--ids-comp-accordion-summary-text-color-fg-label-focused)',
+      },
+      '.ids-accordion.ids-accordion-text>.ids-accordion-summary:active': {
+        background: 'var(--ids-comp-accordion-summary-text-color-bg-pressed)',
+        borderColor: 'var(--ids-comp-accordion-summary-text-color-border-pressed)',
+        color: 'var(--ids-comp-accordion-summary-text-color-fg-label-pressed)',
+      },
+      '.ids-accordion.ids-accordion-text.ids-accordion-disabled>.ids-accordion-summary': {
+        background: 'var(--ids-comp-accordion-summary-text-color-bg-disabled)',
+        borderColor: 'var(--ids-comp-accordion-summary-text-color-border-disabled)',
+        color: 'var(--ids-comp-accordion-summary-text-color-fg-label-disabled)',
+      },
+      '.ids-accordion.ids-accordion-filled>.ids-accordion-summary': {
+        background: 'var(--ids-comp-accordion-summary-filled-color-bg-default)',
+        borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-default)',
+        color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-default)',
+      },
+      '.ids-accordion.ids-accordion-filled>.ids-accordion-summary:hover': {
+        background: 'var(--ids-comp-accordion-summary-filled-color-bg-hovered)',
+        borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-hovered)',
+        color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-hovered)',
+      },
+      '.ids-accordion.ids-accordion-filled>.ids-accordion-summary:focus': {
+        background: 'var(--ids-comp-accordion-summary-filled-color-bg-focused)',
+        borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-focused)',
+        color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-focused)',
+      },
+      '.ids-accordion.ids-accordion-filled>.ids-accordion-summary:active': {
+        background: 'var(--ids-comp-accordion-summary-filled-color-bg-pressed)',
+        borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-pressed)',
+        color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-pressed)',
+      },
+      '.ids-accordion.ids-accordion-filled.ids-accordion-disabled>.ids-accordion-summary': {
+        background: 'var(--ids-comp-accordion-summary-filled-color-bg-disabled)',
+        borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-disabled)',
+        color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-disabled)',
+      },
+      '.ids-action-item': { width: '100%', display: 'inline-flex', flexShrink: 0, alignItems: 'center', justifyContent: 'center' },
+      '.ids-action-item .ids-action-item-label': { overflow: 'hidden', textOverflow: 'ellipsis', fontStyle: 'normal' },
+      '.ids-action-item *[icon-leading],.ids-action-item *[icon-trailing]': {
+        gap: '10px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      '.ids-action-item.ids-action-item-compact': {
+        gap: 'var(--ids-comp-action-item-size-gap-compact)',
+        borderRadius: 'var(--ids-comp-action-item-size-border-radius-compact)',
+        padding: 'var(--ids-comp-action-item-size-padding-y-compact) var(--ids-comp-action-item-size-padding-x-compact)',
+        height: 'var(--ids-comp-action-item-size-height-compact)',
+        fontFamily: 'var(--ids-comp-action-item-label-typography-font-family-compact)',
+        fontSize: 'var(--ids-comp-action-item-label-typography-font-size-compact)',
+        fontWeight: 'var(--ids-comp-action-item-label-typography-font-weight-compact)',
+        letterSpacing: 'var(--ids-comp-action-item-label-typography-letter-spacing-compact)',
+        lineHeight: 'var(--ids-comp-action-item-label-typography-line-height-compact)',
+      },
+      '.ids-action-item.ids-action-item-compact *[icon-leading],.ids-action-item.ids-action-item-compact *[icon-trailing]': {
+        width: 'var(--ids-comp-action-item-size-icon-compact)',
+        height: 'var(--ids-comp-action-item-size-icon-compact)',
+      },
+      '.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface': {
+        borderStyle: 'solid',
+        borderWidth: 'var(--ids-comp-action-item-size-border-width-compact)',
+        borderColor: 'var(--ids-comp-action-item-text-color-border-surface-default)',
+      },
+      '.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface:hover': {
+        borderColor: 'var(--ids-comp-action-item-text-color-border-surface-hovered)',
+      },
+      '.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface:disabled': {
+        borderColor: 'var(--ids-comp-action-item-text-color-border-surface-disabled)',
+      },
+      '.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface': {
+        borderStyle: 'solid',
+        borderWidth: 'var(--ids-comp-action-item-size-border-width-compact)',
+        borderColor: 'var(--ids-comp-action-item-filled-color-border-surface-default)',
+      },
+      '.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface:hover': {
+        borderColor: 'var(--ids-comp-action-item-filled-color-border-surface-hovered)',
+      },
+      '.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface:disabled': {
+        borderColor: 'var(--ids-comp-action-item-filled-color-border-surface-disabled)',
+      },
+      '.ids-action-item.ids-action-item-comfortable': {
+        gap: 'var(--ids-comp-action-item-size-gap-comfortable)',
+        borderRadius: 'var(--ids-comp-action-item-size-border-radius-comfortable)',
+        padding: 'var(--ids-comp-action-item-size-padding-y-comfortable) var(--ids-comp-action-item-size-padding-x-comfortable)',
+        height: 'var(--ids-comp-action-item-size-height-comfortable)',
+        fontFamily: 'var(--ids-comp-action-item-label-typography-font-family-comfortable)',
+        fontSize: 'var(--ids-comp-action-item-label-typography-font-size-comfortable)',
+        fontWeight: 'var(--ids-comp-action-item-label-typography-font-weight-comfortable)',
+        letterSpacing: 'var(--ids-comp-action-item-label-typography-letter-spacing-comfortable)',
+        lineHeight: 'var(--ids-comp-action-item-label-typography-line-height-comfortable)',
+      },
+      '.ids-action-item.ids-action-item-comfortable *[icon-leading],.ids-action-item.ids-action-item-comfortable *[icon-trailing]': {
+        width: 'var(--ids-comp-action-item-size-icon-comfortable)',
+        height: 'var(--ids-comp-action-item-size-icon-comfortable)',
+      },
+      '.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface': {
+        borderStyle: 'solid',
+        borderWidth: 'var(--ids-comp-action-item-size-border-width-comfortable)',
+        borderColor: 'var(--ids-comp-action-item-text-color-border-surface-default)',
+      },
+      '.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface:hover': {
+        borderColor: 'var(--ids-comp-action-item-text-color-border-surface-hovered)',
+      },
+      '.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface:disabled': {
+        borderColor: 'var(--ids-comp-action-item-text-color-border-surface-disabled)',
+      },
+      '.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface': {
+        borderStyle: 'solid',
+        borderWidth: 'var(--ids-comp-action-item-size-border-width-comfortable)',
+        borderColor: 'var(--ids-comp-action-item-filled-color-border-surface-default)',
+      },
+      '.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface:hover': {
+        borderColor: 'var(--ids-comp-action-item-filled-color-border-surface-hovered)',
+      },
+      '.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface:disabled': {
+        borderColor: 'var(--ids-comp-action-item-filled-color-border-surface-disabled)',
+      },
+      '.ids-action-item.ids-action-item-spacious': {
+        gap: 'var(--ids-comp-action-item-size-gap-spacious)',
+        borderRadius: 'var(--ids-comp-action-item-size-border-radius-spacious)',
+        padding: 'var(--ids-comp-action-item-size-padding-y-spacious) var(--ids-comp-action-item-size-padding-x-spacious)',
+        height: 'var(--ids-comp-action-item-size-height-spacious)',
+        fontFamily: 'var(--ids-comp-action-item-label-typography-font-family-spacious)',
+        fontSize: 'var(--ids-comp-action-item-label-typography-font-size-spacious)',
+        fontWeight: 'var(--ids-comp-action-item-label-typography-font-weight-spacious)',
+        letterSpacing: 'var(--ids-comp-action-item-label-typography-letter-spacing-spacious)',
+        lineHeight: 'var(--ids-comp-action-item-label-typography-line-height-spacious)',
+      },
+      '.ids-action-item.ids-action-item-spacious *[icon-leading],.ids-action-item.ids-action-item-spacious *[icon-trailing]': {
+        width: 'var(--ids-comp-action-item-size-icon-spacious)',
+        height: 'var(--ids-comp-action-item-size-icon-spacious)',
+      },
+      '.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface': {
+        borderStyle: 'solid',
+        borderWidth: 'var(--ids-comp-action-item-size-border-width-spacious)',
+        borderColor: 'var(--ids-comp-action-item-text-color-border-surface-default)',
+      },
+      '.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface:hover': {
+        borderColor: 'var(--ids-comp-action-item-text-color-border-surface-hovered)',
+      },
+      '.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface:disabled': {
+        borderColor: 'var(--ids-comp-action-item-text-color-border-surface-disabled)',
+      },
+      '.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface': {
+        borderStyle: 'solid',
+        borderWidth: 'var(--ids-comp-action-item-size-border-width-spacious)',
+        borderColor: 'var(--ids-comp-action-item-filled-color-border-surface-default)',
+      },
+      '.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface:hover': {
+        borderColor: 'var(--ids-comp-action-item-filled-color-border-surface-hovered)',
+      },
+      '.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface:disabled': {
+        borderColor: 'var(--ids-comp-action-item-filled-color-border-surface-disabled)',
+      },
+      '.ids-action-item.ids-action-item-text.ids-action-item-surface': {
+        color: 'var(--ids-comp-action-item-text-color-fg-label-surface-default)',
+        background: 'var(--ids-comp-action-item-text-color-bg-surface-default)',
+      },
+      '.ids-action-item.ids-action-item-text.ids-action-item-surface.ids-action-item-active': {
+        color: 'var(--ids-comp-action-item-text-color-fg-label-surface-active)',
+        background: 'var(--ids-comp-action-item-text-color-bg-surface-active)',
+      },
+      '.ids-action-item.ids-action-item-text.ids-action-item-surface:hover': {
+        color: 'var(--ids-comp-action-item-text-color-fg-label-surface-hovered)',
+        background: 'var(--ids-comp-action-item-text-color-bg-surface-hovered)',
+      },
+      '.ids-action-item.ids-action-item-text.ids-action-item-surface:focus': {
+        color: 'var(--ids-comp-action-item-text-color-fg-label-surface-focused)',
+        background: 'var(--ids-comp-action-item-text-color-bg-surface-focused)',
+      },
+      '.ids-action-item.ids-action-item-text.ids-action-item-surface:active': {
+        background: 'var(--ids-comp-action-item-text-color-bg-surface-pressed)',
+      },
+      '.ids-action-item.ids-action-item-text.ids-action-item-surface:disabled': {
+        color: 'var(--ids-comp-action-item-text-color-fg-label-surface-disabled)',
+        background: 'var(--ids-comp-action-item-text-color-bg-surface-disabled)',
+      },
+      '.ids-action-item.ids-action-item-filled.ids-action-item-surface': {
+        color: 'var(--ids-comp-action-item-filled-color-fg-label-surface-default)',
+        background: 'var(--ids-comp-action-item-filled-color-bg-surface-default)',
+      },
+      '.ids-action-item.ids-action-item-filled.ids-action-item-surface.ids-action-item-active': {
+        color: 'var(--ids-comp-action-item-filled-color-fg-label-surface-active)',
+        background: 'var(--ids-comp-action-item-filled-color-bg-surface-active)',
+      },
+      '.ids-action-item.ids-action-item-filled.ids-action-item-surface:hover': {
+        color: 'var(--ids-comp-action-item-filled-color-fg-label-surface-hovered)',
+        background: 'var(--ids-comp-action-item-filled-color-bg-surface-hovered)',
+      },
+      '.ids-action-item.ids-action-item-filled.ids-action-item-surface:focus': {
+        color: 'var(--ids-comp-action-item-filled-color-fg-label-surface-focused)',
+        background: 'var(--ids-comp-action-item-filled-color-bg-surface-focused)',
+      },
+      '.ids-action-item.ids-action-item-filled.ids-action-item-surface:active': {
+        background: 'var(--ids-comp-action-item-filled-color-bg-surface-pressed)',
+      },
+      '.ids-action-item.ids-action-item-filled.ids-action-item-surface:disabled': {
+        color: 'var(--ids-comp-action-item-filled-color-fg-label-surface-disabled)',
+        background: 'var(--ids-comp-action-item-filled-color-bg-surface-disabled)',
+      },
+      '.ids-action-panel': {
+        display: 'flex',
+        width: '22.25rem',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        boxSizing: 'border-box',
+      },
+      '.ids-action-panel.ids-action-panel-compact': {
+        gap: 'var(--ids-comp-action-panel-size-gap-compact)',
+        padding: 'var(--ids-comp-action-panel-size-padding-y-compact) var(--ids-comp-action-panel-size-padding-x-compact)',
+        borderRadius: 'var(--ids-comp-action-panel-size-border-radius-compact)',
+      },
+      '.ids-action-panel.ids-action-panel-compact.ids-action-panel-filled.ids-action-panel-outlined': {
+        border: 'var(--ids-comp-action-panel-size-border-compact) solid var(--ids-comp-action-panel-filled-color-border-light-default)',
+      },
+      '.ids-action-panel.ids-action-panel-compact.ids-action-panel-outlined.ids-action-panel-outlined': {
+        border: 'var(--ids-comp-action-panel-size-border-compact) solid var(--ids-comp-action-panel-outlined-color-border-light-default)',
+      },
+      '.ids-action-panel.ids-action-panel-compact.ids-action-panel-elevated.ids-action-panel-outlined': {
+        border: 'var(--ids-comp-action-panel-size-border-compact) solid var(--ids-comp-action-panel-elevated-color-border-light-default)',
+      },
+      '.ids-action-panel.ids-action-panel-comfortable': {
+        gap: 'var(--ids-comp-action-panel-size-gap-comfortable)',
+        padding: 'var(--ids-comp-action-panel-size-padding-y-comfortable) var(--ids-comp-action-panel-size-padding-x-comfortable)',
+        borderRadius: 'var(--ids-comp-action-panel-size-border-radius-comfortable)',
+      },
+      '.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-filled.ids-action-panel-outlined': {
+        border: 'var(--ids-comp-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-filled-color-border-light-default)',
+      },
+      '.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-outlined.ids-action-panel-outlined': {
+        border:
+          'var(--ids-comp-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-outlined-color-border-light-default)',
+      },
+      '.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-elevated.ids-action-panel-outlined': {
+        border:
+          'var(--ids-comp-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-elevated-color-border-light-default)',
+      },
+      '.ids-action-panel.ids-action-panel-spacious': {
+        gap: 'var(--ids-comp-action-panel-size-gap-spacious)',
+        padding: 'var(--ids-comp-action-panel-size-padding-y-spacious) var(--ids-comp-action-panel-size-padding-x-spacious)',
+        borderRadius: 'var(--ids-comp-action-panel-size-border-radius-spacious)',
+      },
+      '.ids-action-panel.ids-action-panel-spacious.ids-action-panel-filled.ids-action-panel-outlined': {
+        border: 'var(--ids-comp-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-filled-color-border-light-default)',
+      },
+      '.ids-action-panel.ids-action-panel-spacious.ids-action-panel-outlined.ids-action-panel-outlined': {
+        border: 'var(--ids-comp-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-outlined-color-border-light-default)',
+      },
+      '.ids-action-panel.ids-action-panel-spacious.ids-action-panel-elevated.ids-action-panel-outlined': {
+        border: 'var(--ids-comp-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-elevated-color-border-light-default)',
+      },
+      '.ids-action-panel.ids-action-panel-dense': {
+        gap: 'var(--ids-comp-action-panel-size-gap-dense)',
+        padding: 'var(--ids-comp-action-panel-size-padding-y-dense) var(--ids-comp-action-panel-size-padding-x-dense)',
+        borderRadius: 'var(--ids-comp-action-panel-size-border-radius-dense)',
+      },
+      '.ids-action-panel.ids-action-panel-dense.ids-action-panel-filled.ids-action-panel-outlined': {
+        border: 'var(--ids-comp-action-panel-size-border-dense) solid var(--ids-comp-action-panel-filled-color-border-light-default)',
+      },
+      '.ids-action-panel.ids-action-panel-dense.ids-action-panel-outlined.ids-action-panel-outlined': {
+        border: 'var(--ids-comp-action-panel-size-border-dense) solid var(--ids-comp-action-panel-outlined-color-border-light-default)',
+      },
+      '.ids-action-panel.ids-action-panel-dense.ids-action-panel-elevated.ids-action-panel-outlined': {
+        border: 'var(--ids-comp-action-panel-size-border-dense) solid var(--ids-comp-action-panel-elevated-color-border-light-default)',
+      },
+      '.ids-action-panel.ids-action-panel-filled': {
+        boxShadow: '0px 0px 0px 0px rgba(0,0,0,0),0px 0px 0px 0px rgba(0,0,0,0)',
+        background: 'var(--ids-comp-action-panel-filled-color-bg-light-default)',
+      },
+      '.ids-action-panel.ids-action-panel-outlined': {
+        boxShadow: '0px 0px 0px 0px rgba(0,0,0,0),0px 0px 0px 0px rgba(0,0,0,0)',
+        background: 'var(--ids-comp-action-panel-outlined-color-bg-light-default)',
+      },
+      '.ids-action-panel.ids-action-panel-elevated': {
+        boxShadow:
+          'var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-default)',
+        background: 'var(--ids-comp-action-panel-elevated-color-bg-light-default)',
+      },
+      '.ids-action-panel button:hover': { borderColor: 'rgba(0,0,0,0)' },
+      '.ids-action-panel button:focus': { outline: 'none !important' },
+      '.cdk-overlay-connected-position-bounding-box:first-of-type .cdk-overlay-pane:has(.ids-action-panel)': { '@apply py-3': true },
+      '.ids-avatar': {
+        display: 'flex',
+        fontStyle: 'normal',
+        textAlign: 'center',
+        alignItems: 'center',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        borderStyle: 'solid',
+      },
+      '.ids-avatar .ids-avatar-icon': {
+        gap: '10px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'column',
+        width: '100%',
+        height: '100%',
+      },
+      '.ids-avatar .ids-avatar-image': { borderRadius: '50%', verticalAlign: 'middle', maxWidth: 'none' },
+      '.ids-avatar:focus': {
+        outlineOffset: '2px',
+        outlineStyle: 'solid',
+        outlineWidth: 'var(--ids-comp-avatar-focused-outline-size-outline)',
+        outlineColor: 'var(--ids-comp-avatar-focused-outline-color-dark-focused)',
+      },
+      '.ids-avatar:focus.ids-avatar-light': { outlineColor: 'var(--ids-comp-avatar-focused-outline-color-light-focused)' },
+      '.ids-avatar:active': { outline: 'none' },
+      '.ids-avatar.ids-avatar-compact': {
+        width: 'var(--ids-comp-avatar-size-height-compact)',
+        height: 'var(--ids-comp-avatar-size-width-compact)',
+        gap: 'var(--ids-comp-avatar-size-gap-compact)',
+        borderRadius: 'var(--ids-comp-avatar-size-border-radius-compact)',
+        padding: 'var(--ids-comp-avatar-size-padding-y-compact) var(--ids-comp-avatar-size-padding-x-compact)',
+        border: 'var(--ids-comp-avatar-size-border-compact)',
+        fontFamily: 'var(--ids-comp-avatar-initials-typography-font-family-compact)',
+        fontSize: 'var(--ids-comp-avatar-initials-typography-font-size-compact)',
+        fontWeight: 'var(--ids-comp-avatar-initials-typography-font-weight-compact)',
+        letterSpacing: 'var(--ids-comp-avatar-initials-typography-letter-spacing-compact)',
+        lineHeight: 'var(--ids-comp-avatar-initials-typography-line-height-compact)',
+      },
+      '.ids-avatar.ids-avatar-compact:has(.ids-avatar-image)': { padding: '0' },
+      '.ids-avatar.ids-avatar-compact .ids-avatar-image': {
+        width: 'var(--ids-comp-avatar-size-width-compact)',
+        height: 'var(--ids-comp-avatar-size-height-compact)',
+      },
+      '.ids-avatar.ids-avatar-comfortable': {
+        width: 'var(--ids-comp-avatar-size-height-comfortable)',
+        height: 'var(--ids-comp-avatar-size-width-comfortable)',
+        gap: 'var(--ids-comp-avatar-size-gap-comfortable)',
+        borderRadius: 'var(--ids-comp-avatar-size-border-radius-comfortable)',
+        padding: 'var(--ids-comp-avatar-size-padding-y-comfortable) var(--ids-comp-avatar-size-padding-x-comfortable)',
+        border: 'var(--ids-comp-avatar-size-border-comfortable)',
+        fontFamily: 'var(--ids-comp-avatar-initials-typography-font-family-comfortable)',
+        fontSize: 'var(--ids-comp-avatar-initials-typography-font-size-comfortable)',
+        fontWeight: 'var(--ids-comp-avatar-initials-typography-font-weight-comfortable)',
+        letterSpacing: 'var(--ids-comp-avatar-initials-typography-letter-spacing-comfortable)',
+        lineHeight: 'var(--ids-comp-avatar-initials-typography-line-height-comfortable)',
+      },
+      '.ids-avatar.ids-avatar-comfortable:has(.ids-avatar-image)': { padding: '0' },
+      '.ids-avatar.ids-avatar-comfortable .ids-avatar-image': {
+        width: 'var(--ids-comp-avatar-size-width-comfortable)',
+        height: 'var(--ids-comp-avatar-size-height-comfortable)',
+      },
+      '.ids-avatar.ids-avatar-spacious': {
+        width: 'var(--ids-comp-avatar-size-height-spacious)',
+        height: 'var(--ids-comp-avatar-size-width-spacious)',
+        gap: 'var(--ids-comp-avatar-size-gap-spacious)',
+        borderRadius: 'var(--ids-comp-avatar-size-border-radius-spacious)',
+        padding: 'var(--ids-comp-avatar-size-padding-y-spacious) var(--ids-comp-avatar-size-padding-x-spacious)',
+        border: 'var(--ids-comp-avatar-size-border-spacious)',
+        fontFamily: 'var(--ids-comp-avatar-initials-typography-font-family-spacious)',
+        fontSize: 'var(--ids-comp-avatar-initials-typography-font-size-spacious)',
+        fontWeight: 'var(--ids-comp-avatar-initials-typography-font-weight-spacious)',
+        letterSpacing: 'var(--ids-comp-avatar-initials-typography-letter-spacing-spacious)',
+        lineHeight: 'var(--ids-comp-avatar-initials-typography-line-height-spacious)',
+      },
+      '.ids-avatar.ids-avatar-spacious:has(.ids-avatar-image)': { padding: '0' },
+      '.ids-avatar.ids-avatar-spacious .ids-avatar-image': {
+        width: 'var(--ids-comp-avatar-size-width-spacious)',
+        height: 'var(--ids-comp-avatar-size-height-spacious)',
+      },
+      '.ids-avatar.ids-avatar-dense': {
+        width: 'var(--ids-comp-avatar-size-height-dense)',
+        height: 'var(--ids-comp-avatar-size-width-dense)',
+        gap: 'var(--ids-comp-avatar-size-gap-dense)',
+        borderRadius: 'var(--ids-comp-avatar-size-border-radius-dense)',
+        padding: 'var(--ids-comp-avatar-size-padding-y-dense) var(--ids-comp-avatar-size-padding-x-dense)',
+        border: 'var(--ids-comp-avatar-size-border-dense)',
+        fontFamily: 'var(--ids-comp-avatar-initials-typography-font-family-dense)',
+        fontSize: 'var(--ids-comp-avatar-initials-typography-font-size-dense)',
+        fontWeight: 'var(--ids-comp-avatar-initials-typography-font-weight-dense)',
+        letterSpacing: 'var(--ids-comp-avatar-initials-typography-letter-spacing-dense)',
+        lineHeight: 'var(--ids-comp-avatar-initials-typography-line-height-dense)',
+      },
+      '.ids-avatar.ids-avatar-dense:has(.ids-avatar-image)': { padding: '0' },
+      '.ids-avatar.ids-avatar-dense .ids-avatar-image': {
+        width: 'var(--ids-comp-avatar-size-width-dense)',
+        height: 'var(--ids-comp-avatar-size-height-dense)',
+      },
+      '.ids-avatar.ids-avatar-primary': {
+        color: 'var(--ids-comp-avatar-color-fg-primary-default)',
+        background: 'var(--ids-comp-avatar-color-bg-primary-default)',
+        borderColor: 'var(--ids-comp-avatar-color-border-primary-default)',
+      },
+      '.ids-avatar.ids-avatar-primary:hover': {
+        background: 'var(--ids-comp-avatar-color-bg-primary-hovered)',
+        borderColor: 'var(--ids-comp-avatar-color-border-primary-hovered)',
+      },
+      '.ids-avatar.ids-avatar-primary:focus': {
+        background: 'var(--ids-comp-avatar-color-bg-primary-focused)',
+        borderColor: 'var(--ids-comp-avatar-color-border-primary-focused)',
+      },
+      '.ids-avatar.ids-avatar-primary:active': {
+        background: 'var(--ids-comp-avatar-color-bg-primary-pressed)',
+        borderColor: 'var(--ids-comp-avatar-color-border-primary-pressed)',
+      },
+      '.ids-avatar.ids-avatar-primary .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-primary-default)' },
+      '.ids-avatar.ids-avatar-secondary': {
+        color: 'var(--ids-comp-avatar-color-fg-secondary-default)',
+        background: 'var(--ids-comp-avatar-color-bg-secondary-default)',
+        borderColor: 'var(--ids-comp-avatar-color-border-secondary-default)',
+      },
+      '.ids-avatar.ids-avatar-secondary:hover': {
+        background: 'var(--ids-comp-avatar-color-bg-secondary-hovered)',
+        borderColor: 'var(--ids-comp-avatar-color-border-secondary-hovered)',
+      },
+      '.ids-avatar.ids-avatar-secondary:focus': {
+        background: 'var(--ids-comp-avatar-color-bg-secondary-focused)',
+        borderColor: 'var(--ids-comp-avatar-color-border-secondary-focused)',
+      },
+      '.ids-avatar.ids-avatar-secondary:active': {
+        background: 'var(--ids-comp-avatar-color-bg-secondary-pressed)',
+        borderColor: 'var(--ids-comp-avatar-color-border-secondary-pressed)',
+      },
+      '.ids-avatar.ids-avatar-secondary .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-secondary-default)' },
+      '.ids-avatar.ids-avatar-light': {
+        color: 'var(--ids-comp-avatar-color-fg-light-default)',
+        background: 'var(--ids-comp-avatar-color-bg-light-default)',
+        borderColor: 'var(--ids-comp-avatar-color-border-light-default)',
+      },
+      '.ids-avatar.ids-avatar-light:hover': {
+        background: 'var(--ids-comp-avatar-color-bg-light-hovered)',
+        borderColor: 'var(--ids-comp-avatar-color-border-light-hovered)',
+      },
+      '.ids-avatar.ids-avatar-light:focus': {
+        background: 'var(--ids-comp-avatar-color-bg-light-focused)',
+        borderColor: 'var(--ids-comp-avatar-color-border-light-focused)',
+      },
+      '.ids-avatar.ids-avatar-light:active': {
+        background: 'var(--ids-comp-avatar-color-bg-light-pressed)',
+        borderColor: 'var(--ids-comp-avatar-color-border-light-pressed)',
+      },
+      '.ids-avatar.ids-avatar-light .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-light-default)' },
+      '.ids-avatar.ids-avatar-dark': {
+        color: 'var(--ids-comp-avatar-color-fg-dark-default)',
+        background: 'var(--ids-comp-avatar-color-bg-dark-default)',
+        borderColor: 'var(--ids-comp-avatar-color-border-dark-default)',
+      },
+      '.ids-avatar.ids-avatar-dark:hover': {
+        background: 'var(--ids-comp-avatar-color-bg-dark-hovered)',
+        borderColor: 'var(--ids-comp-avatar-color-border-dark-hovered)',
+      },
+      '.ids-avatar.ids-avatar-dark:focus': {
+        background: 'var(--ids-comp-avatar-color-bg-dark-focused)',
+        borderColor: 'var(--ids-comp-avatar-color-border-dark-focused)',
+      },
+      '.ids-avatar.ids-avatar-dark:active': {
+        background: 'var(--ids-comp-avatar-color-bg-dark-pressed)',
+        borderColor: 'var(--ids-comp-avatar-color-border-dark-pressed)',
+      },
+      '.ids-avatar.ids-avatar-dark .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-dark-default)' },
+      '.ids-avatar.ids-avatar-surface': {
+        color: 'var(--ids-comp-avatar-color-fg-surface-default)',
+        background: 'var(--ids-comp-avatar-color-bg-surface-default)',
+        borderColor: 'var(--ids-comp-avatar-color-border-surface-default)',
+      },
+      '.ids-avatar.ids-avatar-surface:hover': {
+        background: 'var(--ids-comp-avatar-color-bg-surface-hovered)',
+        borderColor: 'var(--ids-comp-avatar-color-border-surface-hovered)',
+      },
+      '.ids-avatar.ids-avatar-surface:focus': {
+        background: 'var(--ids-comp-avatar-color-bg-surface-focused)',
+        borderColor: 'var(--ids-comp-avatar-color-border-surface-focused)',
+      },
+      '.ids-avatar.ids-avatar-surface:active': {
+        background: 'var(--ids-comp-avatar-color-bg-surface-pressed)',
+        borderColor: 'var(--ids-comp-avatar-color-border-surface-pressed)',
+      },
+      '.ids-avatar.ids-avatar-surface .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-surface-default)' },
+      '.ids-button': {
+        flexShrink: 0,
+        width: 'fit-content',
+        alignItems: 'center',
+        display: 'inline-flex',
+        justifyContent: 'center',
+        borderStyle: 'solid',
+      },
+      '.ids-button:focus': {
+        outlineOffset: '2px',
+        outline: 'var(--ids-comp-buttons-focused-outline-size-outline) solid var(--ids-comp-buttons-focused-outline-color-dark-focused)',
+      },
+      '.ids-button:focus.ids-button-light': { outlineColor: 'var(--ids-comp-buttons-focused-outline-color-light-focused)' },
+      '.ids-button:active': { outline: 'none' },
+      '.ids-button *[icon-leading],.ids-button *[icon-trailing]': {
+        gap: '10px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      '.ids-button.ids-button-compact': {
+        gap: 'var(--ids-comp-buttons-size-gap-compact)',
+        height: 'var(--ids-comp-buttons-size-height-compact)',
+        minWidth: 'var(--ids-comp-buttons-size-min-width-compact)',
+        padding: 'var(--ids-comp-buttons-size-padding-y-compact) var(--ids-comp-buttons-size-padding-x-compact)',
+        borderRadius: 'var(--ids-comp-buttons-size-border-radius-compact)',
+        borderWidth: 'var(--ids-comp-buttons-size-border-width-compact)',
+      },
+      '.ids-button.ids-button-compact>.ids-button-label': {
+        fontFamily: 'var(--ids-comp-buttons-label-typography-font-family-compact)',
+        fontSize: 'var(--ids-comp-buttons-label-typography-font-size-compact)',
+        fontWeight: 'var(--ids-comp-buttons-label-typography-font-weight-compact)',
+        letterSpacing: 'var(--ids-comp-buttons-label-typography-letter-spacing-compact)',
+        lineHeight: 'var(--ids-comp-buttons-label-typography-line-height-compact)',
+      },
+      '.ids-button.ids-button-compact *[icon-leading],.ids-button.ids-button-compact *[icon-trailing]': {
+        width: 'var(--ids-comp-buttons-size-icon-compact)',
+        height: 'var(--ids-comp-buttons-size-icon-compact)',
+      },
+      '.ids-button.ids-button-comfortable': {
+        gap: 'var(--ids-comp-buttons-size-gap-comfortable)',
+        height: 'var(--ids-comp-buttons-size-height-comfortable)',
+        minWidth: 'var(--ids-comp-buttons-size-min-width-comfortable)',
+        padding: 'var(--ids-comp-buttons-size-padding-y-comfortable) var(--ids-comp-buttons-size-padding-x-comfortable)',
+        borderRadius: 'var(--ids-comp-buttons-size-border-radius-comfortable)',
+        borderWidth: 'var(--ids-comp-buttons-size-border-width-comfortable)',
+      },
+      '.ids-button.ids-button-comfortable>.ids-button-label': {
+        fontFamily: 'var(--ids-comp-buttons-label-typography-font-family-comfortable)',
+        fontSize: 'var(--ids-comp-buttons-label-typography-font-size-comfortable)',
+        fontWeight: 'var(--ids-comp-buttons-label-typography-font-weight-comfortable)',
+        letterSpacing: 'var(--ids-comp-buttons-label-typography-letter-spacing-comfortable)',
+        lineHeight: 'var(--ids-comp-buttons-label-typography-line-height-comfortable)',
+      },
+      '.ids-button.ids-button-comfortable *[icon-leading],.ids-button.ids-button-comfortable *[icon-trailing]': {
+        width: 'var(--ids-comp-buttons-size-icon-comfortable)',
+        height: 'var(--ids-comp-buttons-size-icon-comfortable)',
+      },
+      '.ids-button.ids-button-spacious': {
+        gap: 'var(--ids-comp-buttons-size-gap-spacious)',
+        height: 'var(--ids-comp-buttons-size-height-spacious)',
+        minWidth: 'var(--ids-comp-buttons-size-min-width-spacious)',
+        padding: 'var(--ids-comp-buttons-size-padding-y-spacious) var(--ids-comp-buttons-size-padding-x-spacious)',
+        borderRadius: 'var(--ids-comp-buttons-size-border-radius-spacious)',
+        borderWidth: 'var(--ids-comp-buttons-size-border-width-spacious)',
+      },
+      '.ids-button.ids-button-spacious>.ids-button-label': {
+        fontFamily: 'var(--ids-comp-buttons-label-typography-font-family-spacious)',
+        fontSize: 'var(--ids-comp-buttons-label-typography-font-size-spacious)',
+        fontWeight: 'var(--ids-comp-buttons-label-typography-font-weight-spacious)',
+        letterSpacing: 'var(--ids-comp-buttons-label-typography-letter-spacing-spacious)',
+        lineHeight: 'var(--ids-comp-buttons-label-typography-line-height-spacious)',
+      },
+      '.ids-button.ids-button-spacious *[icon-leading],.ids-button.ids-button-spacious *[icon-trailing]': {
+        width: 'var(--ids-comp-buttons-size-icon-spacious)',
+        height: 'var(--ids-comp-buttons-size-icon-spacious)',
+      },
+      '.ids-button.ids-button-dense': {
+        gap: 'var(--ids-comp-buttons-size-gap-dense)',
+        height: 'var(--ids-comp-buttons-size-height-dense)',
+        minWidth: 'var(--ids-comp-buttons-size-min-width-dense)',
+        padding: 'var(--ids-comp-buttons-size-padding-y-dense) var(--ids-comp-buttons-size-padding-x-dense)',
+        borderRadius: 'var(--ids-comp-buttons-size-border-radius-dense)',
+        borderWidth: 'var(--ids-comp-buttons-size-border-width-dense)',
+      },
+      '.ids-button.ids-button-dense>.ids-button-label': {
+        fontFamily: 'var(--ids-comp-buttons-label-typography-font-family-dense)',
+        fontSize: 'var(--ids-comp-buttons-label-typography-font-size-dense)',
+        fontWeight: 'var(--ids-comp-buttons-label-typography-font-weight-dense)',
+        letterSpacing: 'var(--ids-comp-buttons-label-typography-letter-spacing-dense)',
+        lineHeight: 'var(--ids-comp-buttons-label-typography-line-height-dense)',
+      },
+      '.ids-button.ids-button-dense *[icon-leading],.ids-button.ids-button-dense *[icon-trailing]': {
+        width: 'var(--ids-comp-buttons-size-icon-dense)',
+        height: 'var(--ids-comp-buttons-size-icon-dense)',
+      },
+      '.ids-button.ids-button-filled.ids-button-primary': {
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-primary-default)',
+        background: 'var(--ids-comp-buttons-filled-color-bg-primary-default)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-primary-default)',
+      },
+      '.ids-button.ids-button-filled.ids-button-primary:hover': {
+        background: 'var(--ids-comp-buttons-filled-color-bg-primary-hovered)',
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-primary-hovered)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-primary-hovered)',
+      },
+      '.ids-button.ids-button-filled.ids-button-primary:focus': {
+        outlineOffset: '2px',
+        background: 'var(--ids-comp-buttons-filled-color-bg-primary-focused)',
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-primary-focused)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-primary-focused)',
+      },
+      '.ids-button.ids-button-filled.ids-button-primary:active': {
+        background: 'var(--ids-comp-buttons-filled-color-bg-primary-pressed)',
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-primary-pressed)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-primary-pressed)',
+      },
+      '.ids-button.ids-button-filled.ids-button-primary:disabled': {
+        background: 'var(--ids-comp-buttons-filled-color-bg-primary-disabled)',
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-primary-disabled)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-primary-disabled)',
+      },
+      '.ids-button.ids-button-filled.ids-button-secondary': {
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-secondary-default)',
+        background: 'var(--ids-comp-buttons-filled-color-bg-secondary-default)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-secondary-default)',
+      },
+      '.ids-button.ids-button-filled.ids-button-secondary:hover': {
+        background: 'var(--ids-comp-buttons-filled-color-bg-secondary-hovered)',
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-secondary-hovered)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-secondary-hovered)',
+      },
+      '.ids-button.ids-button-filled.ids-button-secondary:focus': {
+        outlineOffset: '2px',
+        background: 'var(--ids-comp-buttons-filled-color-bg-secondary-focused)',
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-secondary-focused)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-secondary-focused)',
+      },
+      '.ids-button.ids-button-filled.ids-button-secondary:active': {
+        background: 'var(--ids-comp-buttons-filled-color-bg-secondary-pressed)',
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-secondary-pressed)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-secondary-pressed)',
+      },
+      '.ids-button.ids-button-filled.ids-button-secondary:disabled': {
+        background: 'var(--ids-comp-buttons-filled-color-bg-secondary-disabled)',
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-secondary-disabled)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-secondary-disabled)',
+      },
+      '.ids-button.ids-button-filled.ids-button-brand': {
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-brand-default)',
+        background: 'var(--ids-comp-buttons-filled-color-bg-brand-default)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-brand-default)',
+      },
+      '.ids-button.ids-button-filled.ids-button-brand:hover': {
+        background: 'var(--ids-comp-buttons-filled-color-bg-brand-hovered)',
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-brand-hovered)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-brand-hovered)',
+      },
+      '.ids-button.ids-button-filled.ids-button-brand:focus': {
+        outlineOffset: '2px',
+        background: 'var(--ids-comp-buttons-filled-color-bg-brand-focused)',
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-brand-focused)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-brand-focused)',
+      },
+      '.ids-button.ids-button-filled.ids-button-brand:active': {
+        background: 'var(--ids-comp-buttons-filled-color-bg-brand-pressed)',
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-brand-pressed)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-brand-pressed)',
+      },
+      '.ids-button.ids-button-filled.ids-button-brand:disabled': {
+        background: 'var(--ids-comp-buttons-filled-color-bg-brand-disabled)',
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-brand-disabled)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-brand-disabled)',
+      },
+      '.ids-button.ids-button-filled.ids-button-error': {
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-error-default)',
+        background: 'var(--ids-comp-buttons-filled-color-bg-error-default)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-error-default)',
+      },
+      '.ids-button.ids-button-filled.ids-button-error:hover': {
+        background: 'var(--ids-comp-buttons-filled-color-bg-error-hovered)',
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-error-hovered)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-error-hovered)',
+      },
+      '.ids-button.ids-button-filled.ids-button-error:focus': {
+        outlineOffset: '2px',
+        background: 'var(--ids-comp-buttons-filled-color-bg-error-focused)',
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-error-focused)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-error-focused)',
+      },
+      '.ids-button.ids-button-filled.ids-button-error:active': {
+        background: 'var(--ids-comp-buttons-filled-color-bg-error-pressed)',
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-error-pressed)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-error-pressed)',
+      },
+      '.ids-button.ids-button-filled.ids-button-success': {
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-success-default)',
+        background: 'var(--ids-comp-buttons-filled-color-bg-success-default)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-success-default)',
+      },
+      '.ids-button.ids-button-filled.ids-button-success:hover': {
+        background: 'var(--ids-comp-buttons-filled-color-bg-success-hovered)',
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-success-hovered)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-success-hovered)',
+      },
+      '.ids-button.ids-button-filled.ids-button-success:focus': {
+        outlineOffset: '2px',
+        background: 'var(--ids-comp-buttons-filled-color-bg-success-focused)',
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-success-focused)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-success-focused)',
+      },
+      '.ids-button.ids-button-filled.ids-button-success:active': {
+        background: 'var(--ids-comp-buttons-filled-color-bg-success-pressed)',
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-success-pressed)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-success-pressed)',
+      },
+      '.ids-button.ids-button-filled.ids-button-warning': {
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-warning-default)',
+        background: 'var(--ids-comp-buttons-filled-color-bg-warning-default)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-warning-default)',
+      },
+      '.ids-button.ids-button-filled.ids-button-warning:hover': {
+        background: 'var(--ids-comp-buttons-filled-color-bg-warning-hovered)',
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-warning-hovered)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-warning-hovered)',
+      },
+      '.ids-button.ids-button-filled.ids-button-warning:focus': {
+        outlineOffset: '2px',
+        background: 'var(--ids-comp-buttons-filled-color-bg-warning-focused)',
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-warning-focused)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-warning-focused)',
+      },
+      '.ids-button.ids-button-filled.ids-button-warning:active': {
+        background: 'var(--ids-comp-buttons-filled-color-bg-warning-pressed)',
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-warning-pressed)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-warning-pressed)',
+      },
+      '.ids-button.ids-button-filled.ids-button-light': {
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-light-default)',
+        background: 'var(--ids-comp-buttons-filled-color-bg-light-default)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-light-default)',
+      },
+      '.ids-button.ids-button-filled.ids-button-light:hover': {
+        background: 'var(--ids-comp-buttons-filled-color-bg-light-hovered)',
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-light-hovered)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-light-hovered)',
+      },
+      '.ids-button.ids-button-filled.ids-button-light:focus': {
+        outlineOffset: '2px',
+        background: 'var(--ids-comp-buttons-filled-color-bg-light-focused)',
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-light-focused)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-light-focused)',
+      },
+      '.ids-button.ids-button-filled.ids-button-light:active': {
+        background: 'var(--ids-comp-buttons-filled-color-bg-light-pressed)',
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-light-pressed)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-light-pressed)',
+      },
+      '.ids-button.ids-button-filled.ids-button-light:disabled': {
+        background: 'var(--ids-comp-buttons-filled-color-bg-light-disabled)',
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-light-disabled)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-light-disabled)',
+      },
+      '.ids-button.ids-button-filled.ids-button-dark': {
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-dark-default)',
+        background: 'var(--ids-comp-buttons-filled-color-bg-dark-default)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-dark-default)',
+      },
+      '.ids-button.ids-button-filled.ids-button-dark:hover': {
+        background: 'var(--ids-comp-buttons-filled-color-bg-dark-hovered)',
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-dark-hovered)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-dark-hovered)',
+      },
+      '.ids-button.ids-button-filled.ids-button-dark:focus': {
+        outlineOffset: '2px',
+        background: 'var(--ids-comp-buttons-filled-color-bg-dark-focused)',
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-dark-focused)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-dark-focused)',
+      },
+      '.ids-button.ids-button-filled.ids-button-dark:active': {
+        background: 'var(--ids-comp-buttons-filled-color-bg-dark-pressed)',
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-dark-pressed)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-dark-pressed)',
+      },
+      '.ids-button.ids-button-filled.ids-button-dark:disabled': {
+        background: 'var(--ids-comp-buttons-filled-color-bg-dark-disabled)',
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-dark-disabled)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-dark-disabled)',
+      },
+      '.ids-button.ids-button-filled.ids-button-surface': {
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-surface-default)',
+        background: 'var(--ids-comp-buttons-filled-color-bg-surface-default)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-surface-default)',
+      },
+      '.ids-button.ids-button-filled.ids-button-surface:hover': {
+        background: 'var(--ids-comp-buttons-filled-color-bg-surface-hovered)',
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-surface-hovered)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-surface-hovered)',
+      },
+      '.ids-button.ids-button-filled.ids-button-surface:focus': {
+        outlineOffset: '2px',
+        background: 'var(--ids-comp-buttons-filled-color-bg-surface-focused)',
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-surface-focused)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-surface-focused)',
+      },
+      '.ids-button.ids-button-filled.ids-button-surface:active': {
+        background: 'var(--ids-comp-buttons-filled-color-bg-surface-pressed)',
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-surface-pressed)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-surface-pressed)',
+      },
+      '.ids-button.ids-button-filled.ids-button-surface:disabled': {
+        background: 'var(--ids-comp-buttons-filled-color-bg-surface-disabled)',
+        color: 'var(--ids-comp-buttons-filled-color-fg-label-surface-disabled)',
+        borderColor: 'var(--ids-comp-buttons-filled-color-border-surface-disabled)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-primary': {
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-primary-default)',
+        background: 'var(--ids-comp-buttons-outlined-color-bg-primary-default)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-primary-default)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-primary:hover': {
+        background: 'var(--ids-comp-buttons-outlined-color-bg-primary-hovered)',
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-primary-hovered)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-primary-hovered)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-primary:focus': {
+        outlineOffset: '2px',
+        background: 'var(--ids-comp-buttons-outlined-color-bg-primary-focused)',
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-primary-focused)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-primary-focused)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-primary:active': {
+        background: 'var(--ids-comp-buttons-outlined-color-bg-primary-pressed)',
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-primary-pressed)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-primary-pressed)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-primary:disabled': {
+        background: 'var(--ids-comp-buttons-outlined-color-bg-primary-disabled)',
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-primary-disabled)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-primary-disabled)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-secondary': {
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-secondary-default)',
+        background: 'var(--ids-comp-buttons-outlined-color-bg-secondary-default)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-secondary-default)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-secondary:hover': {
+        background: 'var(--ids-comp-buttons-outlined-color-bg-secondary-hovered)',
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-secondary-hovered)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-secondary-hovered)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-secondary:focus': {
+        outlineOffset: '2px',
+        background: 'var(--ids-comp-buttons-outlined-color-bg-secondary-focused)',
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-secondary-focused)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-secondary-focused)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-secondary:active': {
+        background: 'var(--ids-comp-buttons-outlined-color-bg-secondary-pressed)',
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-secondary-pressed)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-secondary-pressed)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-secondary:disabled': {
+        background: 'var(--ids-comp-buttons-outlined-color-bg-secondary-disabled)',
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-secondary-disabled)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-secondary-disabled)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-brand': {
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-brand-default)',
+        background: 'var(--ids-comp-buttons-outlined-color-bg-brand-default)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-brand-default)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-brand:hover': {
+        background: 'var(--ids-comp-buttons-outlined-color-bg-brand-hovered)',
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-brand-hovered)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-brand-hovered)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-brand:focus': {
+        outlineOffset: '2px',
+        background: 'var(--ids-comp-buttons-outlined-color-bg-brand-focused)',
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-brand-focused)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-brand-focused)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-brand:active': {
+        background: 'var(--ids-comp-buttons-outlined-color-bg-brand-pressed)',
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-brand-pressed)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-brand-pressed)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-brand:disabled': {
+        background: 'var(--ids-comp-buttons-outlined-color-bg-brand-disabled)',
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-brand-disabled)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-brand-disabled)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-error': {
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-error-default)',
+        background: 'var(--ids-comp-buttons-outlined-color-bg-error-default)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-error-default)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-error:hover': {
+        background: 'var(--ids-comp-buttons-outlined-color-bg-error-hovered)',
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-error-hovered)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-error-hovered)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-error:focus': {
+        outlineOffset: '2px',
+        background: 'var(--ids-comp-buttons-outlined-color-bg-error-focused)',
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-error-focused)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-error-focused)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-error:active': {
+        background: 'var(--ids-comp-buttons-outlined-color-bg-error-pressed)',
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-error-pressed)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-error-pressed)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-success': {
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-success-default)',
+        background: 'var(--ids-comp-buttons-outlined-color-bg-success-default)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-success-default)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-success:hover': {
+        background: 'var(--ids-comp-buttons-outlined-color-bg-success-hovered)',
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-success-hovered)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-success-hovered)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-success:focus': {
+        outlineOffset: '2px',
+        background: 'var(--ids-comp-buttons-outlined-color-bg-success-focused)',
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-success-focused)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-success-focused)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-success:active': {
+        background: 'var(--ids-comp-buttons-outlined-color-bg-success-pressed)',
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-success-pressed)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-success-pressed)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-warning': {
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-warning-default)',
+        background: 'var(--ids-comp-buttons-outlined-color-bg-warning-default)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-warning-default)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-warning:hover': {
+        background: 'var(--ids-comp-buttons-outlined-color-bg-warning-hovered)',
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-warning-hovered)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-warning-hovered)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-warning:focus': {
+        outlineOffset: '2px',
+        background: 'var(--ids-comp-buttons-outlined-color-bg-warning-focused)',
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-warning-focused)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-warning-focused)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-warning:active': {
+        background: 'var(--ids-comp-buttons-outlined-color-bg-warning-pressed)',
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-warning-pressed)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-warning-pressed)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-light': {
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-light-default)',
+        background: 'var(--ids-comp-buttons-outlined-color-bg-light-default)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-light-default)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-light:hover': {
+        background: 'var(--ids-comp-buttons-outlined-color-bg-light-hovered)',
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-light-hovered)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-light-hovered)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-light:focus': {
+        outlineOffset: '2px',
+        background: 'var(--ids-comp-buttons-outlined-color-bg-light-focused)',
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-light-focused)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-light-focused)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-light:active': {
+        background: 'var(--ids-comp-buttons-outlined-color-bg-light-pressed)',
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-light-pressed)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-light-pressed)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-light:disabled': {
+        background: 'var(--ids-comp-buttons-outlined-color-bg-light-disabled)',
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-light-disabled)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-light-disabled)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-dark': {
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-dark-default)',
+        background: 'var(--ids-comp-buttons-outlined-color-bg-dark-default)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-dark-default)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-dark:hover': {
+        background: 'var(--ids-comp-buttons-outlined-color-bg-dark-hovered)',
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-dark-hovered)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-dark-hovered)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-dark:focus': {
+        outlineOffset: '2px',
+        background: 'var(--ids-comp-buttons-outlined-color-bg-dark-focused)',
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-dark-focused)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-dark-focused)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-dark:active': {
+        background: 'var(--ids-comp-buttons-outlined-color-bg-dark-pressed)',
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-dark-pressed)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-dark-pressed)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-dark:disabled': {
+        background: 'var(--ids-comp-buttons-outlined-color-bg-dark-disabled)',
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-dark-disabled)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-dark-disabled)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-surface': {
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-surface-default)',
+        background: 'var(--ids-comp-buttons-outlined-color-bg-surface-default)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-surface-default)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-surface:hover': {
+        background: 'var(--ids-comp-buttons-outlined-color-bg-surface-hovered)',
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-surface-hovered)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-surface-hovered)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-surface:focus': {
+        outlineOffset: '2px',
+        background: 'var(--ids-comp-buttons-outlined-color-bg-surface-focused)',
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-surface-focused)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-surface-focused)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-surface:active': {
+        background: 'var(--ids-comp-buttons-outlined-color-bg-surface-pressed)',
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-surface-pressed)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-surface-pressed)',
+      },
+      '.ids-button.ids-button-outlined.ids-button-surface:disabled': {
+        background: 'var(--ids-comp-buttons-outlined-color-bg-surface-disabled)',
+        color: 'var(--ids-comp-buttons-outlined-color-fg-label-surface-disabled)',
+        borderColor: 'var(--ids-comp-buttons-outlined-color-border-surface-disabled)',
+      },
+      '.ids-button.ids-button-text.ids-button-primary': {
+        color: 'var(--ids-comp-buttons-text-color-fg-label-primary-default)',
+        background: 'var(--ids-comp-buttons-text-color-bg-primary-default)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-primary-default)',
+      },
+      '.ids-button.ids-button-text.ids-button-primary:hover': {
+        background: 'var(--ids-comp-buttons-text-color-bg-primary-hovered)',
+        color: 'var(--ids-comp-buttons-text-color-fg-label-primary-hovered)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-primary-hovered)',
+      },
+      '.ids-button.ids-button-text.ids-button-primary:focus': {
+        outlineOffset: '2px',
+        background: 'var(--ids-comp-buttons-text-color-bg-primary-focused)',
+        color: 'var(--ids-comp-buttons-text-color-fg-label-primary-focused)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-primary-focused)',
+      },
+      '.ids-button.ids-button-text.ids-button-primary:active': {
+        background: 'var(--ids-comp-buttons-text-color-bg-primary-pressed)',
+        color: 'var(--ids-comp-buttons-text-color-fg-label-primary-pressed)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-primary-pressed)',
+      },
+      '.ids-button.ids-button-text.ids-button-primary:disabled': {
+        background: 'var(--ids-comp-buttons-text-color-bg-primary-disabled)',
+        color: 'var(--ids-comp-buttons-text-color-fg-label-primary-disabled)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-primary-disabled)',
+      },
+      '.ids-button.ids-button-text.ids-button-secondary': {
+        color: 'var(--ids-comp-buttons-text-color-fg-label-secondary-default)',
+        background: 'var(--ids-comp-buttons-text-color-bg-secondary-default)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-secondary-default)',
+      },
+      '.ids-button.ids-button-text.ids-button-secondary:hover': {
+        background: 'var(--ids-comp-buttons-text-color-bg-secondary-hovered)',
+        color: 'var(--ids-comp-buttons-text-color-fg-label-secondary-hovered)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-secondary-hovered)',
+      },
+      '.ids-button.ids-button-text.ids-button-secondary:focus': {
+        outlineOffset: '2px',
+        background: 'var(--ids-comp-buttons-text-color-bg-secondary-focused)',
+        color: 'var(--ids-comp-buttons-text-color-fg-label-secondary-focused)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-secondary-focused)',
+      },
+      '.ids-button.ids-button-text.ids-button-secondary:active': {
+        background: 'var(--ids-comp-buttons-text-color-bg-secondary-pressed)',
+        color: 'var(--ids-comp-buttons-text-color-fg-label-secondary-pressed)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-secondary-pressed)',
+      },
+      '.ids-button.ids-button-text.ids-button-secondary:disabled': {
+        background: 'var(--ids-comp-buttons-text-color-bg-secondary-disabled)',
+        color: 'var(--ids-comp-buttons-text-color-fg-label-secondary-disabled)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-secondary-disabled)',
+      },
+      '.ids-button.ids-button-text.ids-button-brand': {
+        color: 'var(--ids-comp-buttons-text-color-fg-label-brand-default)',
+        background: 'var(--ids-comp-buttons-text-color-bg-brand-default)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-brand-default)',
+      },
+      '.ids-button.ids-button-text.ids-button-brand:hover': {
+        background: 'var(--ids-comp-buttons-text-color-bg-brand-hovered)',
+        color: 'var(--ids-comp-buttons-text-color-fg-label-brand-hovered)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-brand-hovered)',
+      },
+      '.ids-button.ids-button-text.ids-button-brand:focus': {
+        outlineOffset: '2px',
+        background: 'var(--ids-comp-buttons-text-color-bg-brand-focused)',
+        color: 'var(--ids-comp-buttons-text-color-fg-label-brand-focused)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-brand-focused)',
+      },
+      '.ids-button.ids-button-text.ids-button-brand:active': {
+        background: 'var(--ids-comp-buttons-text-color-bg-brand-pressed)',
+        color: 'var(--ids-comp-buttons-text-color-fg-label-brand-pressed)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-brand-pressed)',
+      },
+      '.ids-button.ids-button-text.ids-button-brand:disabled': {
+        background: 'var(--ids-comp-buttons-text-color-bg-brand-disabled)',
+        color: 'var(--ids-comp-buttons-text-color-fg-label-brand-disabled)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-brand-disabled)',
+      },
+      '.ids-button.ids-button-text.ids-button-error': {
+        color: 'var(--ids-comp-buttons-text-color-fg-label-error-default)',
+        background: 'var(--ids-comp-buttons-text-color-bg-error-default)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-error-default)',
+      },
+      '.ids-button.ids-button-text.ids-button-error:hover': {
+        background: 'var(--ids-comp-buttons-text-color-bg-error-hovered)',
+        color: 'var(--ids-comp-buttons-text-color-fg-label-error-hovered)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-error-hovered)',
+      },
+      '.ids-button.ids-button-text.ids-button-error:focus': {
+        outlineOffset: '2px',
+        background: 'var(--ids-comp-buttons-text-color-bg-error-focused)',
+        color: 'var(--ids-comp-buttons-text-color-fg-label-error-focused)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-error-focused)',
+      },
+      '.ids-button.ids-button-text.ids-button-error:active': {
+        background: 'var(--ids-comp-buttons-text-color-bg-error-pressed)',
+        color: 'var(--ids-comp-buttons-text-color-fg-label-error-pressed)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-error-pressed)',
+      },
+      '.ids-button.ids-button-text.ids-button-success': {
+        color: 'var(--ids-comp-buttons-text-color-fg-label-success-default)',
+        background: 'var(--ids-comp-buttons-text-color-bg-success-default)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-success-default)',
+      },
+      '.ids-button.ids-button-text.ids-button-success:hover': {
+        background: 'var(--ids-comp-buttons-text-color-bg-success-hovered)',
+        color: 'var(--ids-comp-buttons-text-color-fg-label-success-hovered)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-success-hovered)',
+      },
+      '.ids-button.ids-button-text.ids-button-success:focus': {
+        outlineOffset: '2px',
+        background: 'var(--ids-comp-buttons-text-color-bg-success-focused)',
+        color: 'var(--ids-comp-buttons-text-color-fg-label-success-focused)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-success-focused)',
+      },
+      '.ids-button.ids-button-text.ids-button-success:active': {
+        background: 'var(--ids-comp-buttons-text-color-bg-success-pressed)',
+        color: 'var(--ids-comp-buttons-text-color-fg-label-success-pressed)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-success-pressed)',
+      },
+      '.ids-button.ids-button-text.ids-button-warning': {
+        color: 'var(--ids-comp-buttons-text-color-fg-label-warning-default)',
+        background: 'var(--ids-comp-buttons-text-color-bg-warning-default)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-warning-default)',
+      },
+      '.ids-button.ids-button-text.ids-button-warning:hover': {
+        background: 'var(--ids-comp-buttons-text-color-bg-warning-hovered)',
+        color: 'var(--ids-comp-buttons-text-color-fg-label-warning-hovered)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-warning-hovered)',
+      },
+      '.ids-button.ids-button-text.ids-button-warning:focus': {
+        outlineOffset: '2px',
+        background: 'var(--ids-comp-buttons-text-color-bg-warning-focused)',
+        color: 'var(--ids-comp-buttons-text-color-fg-label-warning-focused)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-warning-focused)',
+      },
+      '.ids-button.ids-button-text.ids-button-warning:active': {
+        background: 'var(--ids-comp-buttons-text-color-bg-warning-pressed)',
+        color: 'var(--ids-comp-buttons-text-color-fg-label-warning-pressed)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-warning-pressed)',
+      },
+      '.ids-button.ids-button-text.ids-button-light': {
+        color: 'var(--ids-comp-buttons-text-color-fg-label-light-default)',
+        background: 'var(--ids-comp-buttons-text-color-bg-light-default)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-light-default)',
+      },
+      '.ids-button.ids-button-text.ids-button-light:hover': {
+        background: 'var(--ids-comp-buttons-text-color-bg-light-hovered)',
+        color: 'var(--ids-comp-buttons-text-color-fg-label-light-hovered)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-light-hovered)',
+      },
+      '.ids-button.ids-button-text.ids-button-light:focus': {
+        outlineOffset: '2px',
+        background: 'var(--ids-comp-buttons-text-color-bg-light-focused)',
+        color: 'var(--ids-comp-buttons-text-color-fg-label-light-focused)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-light-focused)',
+      },
+      '.ids-button.ids-button-text.ids-button-light:active': {
+        background: 'var(--ids-comp-buttons-text-color-bg-light-pressed)',
+        color: 'var(--ids-comp-buttons-text-color-fg-label-light-pressed)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-light-pressed)',
+      },
+      '.ids-button.ids-button-text.ids-button-light:disabled': {
+        background: 'var(--ids-comp-buttons-text-color-bg-light-disabled)',
+        color: 'var(--ids-comp-buttons-text-color-fg-label-light-disabled)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-light-disabled)',
+      },
+      '.ids-button.ids-button-text.ids-button-dark': {
+        color: 'var(--ids-comp-buttons-text-color-fg-label-dark-default)',
+        background: 'var(--ids-comp-buttons-text-color-bg-dark-default)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-dark-default)',
+      },
+      '.ids-button.ids-button-text.ids-button-dark:hover': {
+        background: 'var(--ids-comp-buttons-text-color-bg-dark-hovered)',
+        color: 'var(--ids-comp-buttons-text-color-fg-label-dark-hovered)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-dark-hovered)',
+      },
+      '.ids-button.ids-button-text.ids-button-dark:focus': {
+        outlineOffset: '2px',
+        background: 'var(--ids-comp-buttons-text-color-bg-dark-focused)',
+        color: 'var(--ids-comp-buttons-text-color-fg-label-dark-focused)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-dark-focused)',
+      },
+      '.ids-button.ids-button-text.ids-button-dark:active': {
+        background: 'var(--ids-comp-buttons-text-color-bg-dark-pressed)',
+        color: 'var(--ids-comp-buttons-text-color-fg-label-dark-pressed)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-dark-pressed)',
+      },
+      '.ids-button.ids-button-text.ids-button-dark:disabled': {
+        background: 'var(--ids-comp-buttons-text-color-bg-dark-disabled)',
+        color: 'var(--ids-comp-buttons-text-color-fg-label-dark-disabled)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-dark-disabled)',
+      },
+      '.ids-button.ids-button-text.ids-button-surface': {
+        color: 'var(--ids-comp-buttons-text-color-fg-label-surface-default)',
+        background: 'var(--ids-comp-buttons-text-color-bg-surface-default)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-surface-default)',
+      },
+      '.ids-button.ids-button-text.ids-button-surface:hover': {
+        background: 'var(--ids-comp-buttons-text-color-bg-surface-hovered)',
+        color: 'var(--ids-comp-buttons-text-color-fg-label-surface-hovered)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-surface-hovered)',
+      },
+      '.ids-button.ids-button-text.ids-button-surface:focus': {
+        outlineOffset: '2px',
+        background: 'var(--ids-comp-buttons-text-color-bg-surface-focused)',
+        color: 'var(--ids-comp-buttons-text-color-fg-label-surface-focused)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-surface-focused)',
+      },
+      '.ids-button.ids-button-text.ids-button-surface:active': {
+        background: 'var(--ids-comp-buttons-text-color-bg-surface-pressed)',
+        color: 'var(--ids-comp-buttons-text-color-fg-label-surface-pressed)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-surface-pressed)',
+      },
+      '.ids-button.ids-button-text.ids-button-surface:disabled': {
+        background: 'var(--ids-comp-buttons-text-color-bg-surface-disabled)',
+        color: 'var(--ids-comp-buttons-text-color-fg-label-surface-disabled)',
+        borderColor: 'var(--ids-comp-buttons-text-color-border-surface-disabled)',
+      },
+      '.ids-checkbox': { display: 'inline-flex', alignSelf: 'stretch', alignItems: 'flex-start' },
+      '.ids-checkbox .ids-checkbox__input-wrapper': {
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      '.ids-checkbox .ids-checkbox__input-wrapper .ids-checkbox__touch-target': { position: 'absolute', zIndex: 1 },
+      '.ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox]': {
+        appearance: 'none',
+        WebkitAppearance: 'none',
+        flexShrink: 0,
+        borderStyle: 'solid',
+      },
+      '.ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox]:focus': { outlineOffset: '3px', outlineStyle: 'solid' },
+      '.ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox]+.ids-checkbox__icon': { position: 'absolute' },
+      '.ids-checkbox .ids-checkbox__label-wrapper': { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', flex: '1 0 0' },
+      '.ids-checkbox .ids-checkbox__label-wrapper .ids-checkbox__label-container': { textAlign: 'start' },
+      '.ids-checkbox .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': { fontStyle: 'normal' },
+      '.ids-checkbox .ids-checkbox__label-wrapper .ids-checkbox__message-container': { width: '100%' },
+      '.ids-checkbox.ids-checkbox-compact': {
+        padding: 'var(--ids-comp-checkbox-container-size-padding-y-compact) var(--ids-comp-checkbox-container-size-padding-x-compact)',
+        gap: 'var(--ids-comp-checkbox-container-size-gap-compact)',
+      },
+      '.ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper .ids-checkbox__touch-target': {
+        top: 'calc((var(--ids-comp-checkbox-input-size-height-compact) - var(--ids-comp-checkbox-input-size-touchtarget-height-compact))/2)',
+        left: 'calc((var(--ids-comp-checkbox-input-size-width-compact) - var(--ids-comp-checkbox-input-size-touchtarget-width-compact))/2)',
+        height: 'var(--ids-comp-checkbox-input-size-touchtarget-height-compact)',
+        width: 'var(--ids-comp-checkbox-input-size-touchtarget-width-compact)',
+      },
+      '.ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper input[type=checkbox]': {
+        width: 'var(--ids-comp-checkbox-input-size-width-compact)',
+        height: 'var(--ids-comp-checkbox-input-size-height-compact)',
+        borderRadius: 'var(--ids-comp-checkbox-input-size-border-radius-compact)',
+        borderWidth: 'var(--ids-comp-checkbox-input-size-border-width-compact)',
+      },
+      '.ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper input[type=checkbox]:focus': {
+        outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-compact)',
+      },
+      '.ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper .ids-checkbox__icon': {
+        height: 'var(--ids-comp-checkbox-input-size-icon-compact)',
+        width: 'var(--ids-comp-checkbox-input-size-icon-compact)',
+      },
+      '.ids-checkbox.ids-checkbox-compact .ids-checkbox__label-wrapper': {
+        padding: 'var(--ids-comp-checkbox-label-group-size-padding-y-compact) var(--ids-comp-checkbox-label-group-size-padding-x-compact)',
+        gap: 'var(--ids-comp-checkbox-label-group-size-gap-compact)',
+      },
+      '.ids-checkbox.ids-checkbox-compact .ids-checkbox__label-wrapper .ids-checkbox__label-container': {
+        fontFamily: 'var(--ids-comp-checkbox-label-typography-font-family-compact)',
+        fontWeight: 'var(--ids-comp-checkbox-label-typography-font-weight-compact)',
+        letterSpacing: 'var(--ids-comp-checkbox-label-typography-letter-spacing-compact)',
+        fontSize: 'var(--ids-comp-checkbox-label-typography-font-size-compact)',
+        lineHeight: 'var(--ids-comp-checkbox-label-typography-line-height-compact)',
+      },
+      '.ids-checkbox.ids-checkbox-comfortable': {
+        padding:
+          'var(--ids-comp-checkbox-container-size-padding-y-comfortable) var(--ids-comp-checkbox-container-size-padding-x-comfortable)',
+        gap: 'var(--ids-comp-checkbox-container-size-gap-comfortable)',
+      },
+      '.ids-checkbox.ids-checkbox-comfortable .ids-checkbox__input-wrapper .ids-checkbox__touch-target': {
+        top: 'calc((var(--ids-comp-checkbox-input-size-height-comfortable) - var(--ids-comp-checkbox-input-size-touchtarget-height-comfortable))/2)',
+        left: 'calc((var(--ids-comp-checkbox-input-size-width-comfortable) - var(--ids-comp-checkbox-input-size-touchtarget-width-comfortable))/2)',
+        height: 'var(--ids-comp-checkbox-input-size-touchtarget-height-comfortable)',
+        width: 'var(--ids-comp-checkbox-input-size-touchtarget-width-comfortable)',
+      },
+      '.ids-checkbox.ids-checkbox-comfortable .ids-checkbox__input-wrapper input[type=checkbox]': {
+        width: 'var(--ids-comp-checkbox-input-size-width-comfortable)',
+        height: 'var(--ids-comp-checkbox-input-size-height-comfortable)',
+        borderRadius: 'var(--ids-comp-checkbox-input-size-border-radius-comfortable)',
+        borderWidth: 'var(--ids-comp-checkbox-input-size-border-width-comfortable)',
+      },
+      '.ids-checkbox.ids-checkbox-comfortable .ids-checkbox__input-wrapper input[type=checkbox]:focus': {
+        outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-comfortable)',
+      },
+      '.ids-checkbox.ids-checkbox-comfortable .ids-checkbox__input-wrapper .ids-checkbox__icon': {
+        height: 'var(--ids-comp-checkbox-input-size-icon-comfortable)',
+        width: 'var(--ids-comp-checkbox-input-size-icon-comfortable)',
+      },
+      '.ids-checkbox.ids-checkbox-comfortable .ids-checkbox__label-wrapper': {
+        padding:
+          'var(--ids-comp-checkbox-label-group-size-padding-y-comfortable) var(--ids-comp-checkbox-label-group-size-padding-x-comfortable)',
+        gap: 'var(--ids-comp-checkbox-label-group-size-gap-comfortable)',
+      },
+      '.ids-checkbox.ids-checkbox-comfortable .ids-checkbox__label-wrapper .ids-checkbox__label-container': {
+        fontFamily: 'var(--ids-comp-checkbox-label-typography-font-family-comfortable)',
+        fontWeight: 'var(--ids-comp-checkbox-label-typography-font-weight-comfortable)',
+        letterSpacing: 'var(--ids-comp-checkbox-label-typography-letter-spacing-comfortable)',
+        fontSize: 'var(--ids-comp-checkbox-label-typography-font-size-comfortable)',
+        lineHeight: 'var(--ids-comp-checkbox-label-typography-line-height-comfortable)',
+      },
+      '.ids-checkbox.ids-checkbox-spacious': {
+        padding: 'var(--ids-comp-checkbox-container-size-padding-y-spacious) var(--ids-comp-checkbox-container-size-padding-x-spacious)',
+        gap: 'var(--ids-comp-checkbox-container-size-gap-spacious)',
+      },
+      '.ids-checkbox.ids-checkbox-spacious .ids-checkbox__input-wrapper .ids-checkbox__touch-target': {
+        top: 'calc((var(--ids-comp-checkbox-input-size-height-spacious) - var(--ids-comp-checkbox-input-size-touchtarget-height-spacious))/2)',
+        left: 'calc((var(--ids-comp-checkbox-input-size-width-spacious) - var(--ids-comp-checkbox-input-size-touchtarget-width-spacious))/2)',
+        height: 'var(--ids-comp-checkbox-input-size-touchtarget-height-spacious)',
+        width: 'var(--ids-comp-checkbox-input-size-touchtarget-width-spacious)',
+      },
+      '.ids-checkbox.ids-checkbox-spacious .ids-checkbox__input-wrapper input[type=checkbox]': {
+        width: 'var(--ids-comp-checkbox-input-size-width-spacious)',
+        height: 'var(--ids-comp-checkbox-input-size-height-spacious)',
+        borderRadius: 'var(--ids-comp-checkbox-input-size-border-radius-spacious)',
+        borderWidth: 'var(--ids-comp-checkbox-input-size-border-width-spacious)',
+      },
+      '.ids-checkbox.ids-checkbox-spacious .ids-checkbox__input-wrapper input[type=checkbox]:focus': {
+        outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-spacious)',
+      },
+      '.ids-checkbox.ids-checkbox-spacious .ids-checkbox__input-wrapper .ids-checkbox__icon': {
+        height: 'var(--ids-comp-checkbox-input-size-icon-spacious)',
+        width: 'var(--ids-comp-checkbox-input-size-icon-spacious)',
+      },
+      '.ids-checkbox.ids-checkbox-spacious .ids-checkbox__label-wrapper': {
+        padding:
+          'var(--ids-comp-checkbox-label-group-size-padding-y-spacious) var(--ids-comp-checkbox-label-group-size-padding-x-spacious)',
+        gap: 'var(--ids-comp-checkbox-label-group-size-gap-spacious)',
+      },
+      '.ids-checkbox.ids-checkbox-spacious .ids-checkbox__label-wrapper .ids-checkbox__label-container': {
+        fontFamily: 'var(--ids-comp-checkbox-label-typography-font-family-spacious)',
+        fontWeight: 'var(--ids-comp-checkbox-label-typography-font-weight-spacious)',
+        letterSpacing: 'var(--ids-comp-checkbox-label-typography-letter-spacing-spacious)',
+        fontSize: 'var(--ids-comp-checkbox-label-typography-font-size-spacious)',
+        lineHeight: 'var(--ids-comp-checkbox-label-typography-line-height-spacious)',
+      },
+      '.ids-checkbox.ids-checkbox-dense': {
+        padding: 'var(--ids-comp-checkbox-container-size-padding-y-dense) var(--ids-comp-checkbox-container-size-padding-x-dense)',
+        gap: 'var(--ids-comp-checkbox-container-size-gap-dense)',
+      },
+      '.ids-checkbox.ids-checkbox-dense .ids-checkbox__input-wrapper .ids-checkbox__touch-target': {
+        top: 'calc((var(--ids-comp-checkbox-input-size-height-dense) - var(--ids-comp-checkbox-input-size-touchtarget-height-dense))/2)',
+        left: 'calc((var(--ids-comp-checkbox-input-size-width-dense) - var(--ids-comp-checkbox-input-size-touchtarget-width-dense))/2)',
+        height: 'var(--ids-comp-checkbox-input-size-touchtarget-height-dense)',
+        width: 'var(--ids-comp-checkbox-input-size-touchtarget-width-dense)',
+      },
+      '.ids-checkbox.ids-checkbox-dense .ids-checkbox__input-wrapper input[type=checkbox]': {
+        width: 'var(--ids-comp-checkbox-input-size-width-dense)',
+        height: 'var(--ids-comp-checkbox-input-size-height-dense)',
+        borderRadius: 'var(--ids-comp-checkbox-input-size-border-radius-dense)',
+        borderWidth: 'var(--ids-comp-checkbox-input-size-border-width-dense)',
+      },
+      '.ids-checkbox.ids-checkbox-dense .ids-checkbox__input-wrapper input[type=checkbox]:focus': {
+        outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-dense)',
+      },
+      '.ids-checkbox.ids-checkbox-dense .ids-checkbox__input-wrapper .ids-checkbox__icon': {
+        height: 'var(--ids-comp-checkbox-input-size-icon-dense)',
+        width: 'var(--ids-comp-checkbox-input-size-icon-dense)',
+      },
+      '.ids-checkbox.ids-checkbox-dense .ids-checkbox__label-wrapper': {
+        padding: 'var(--ids-comp-checkbox-label-group-size-padding-y-dense) var(--ids-comp-checkbox-label-group-size-padding-x-dense)',
+        gap: 'var(--ids-comp-checkbox-label-group-size-gap-dense)',
+      },
+      '.ids-checkbox.ids-checkbox-dense .ids-checkbox__label-wrapper .ids-checkbox__label-container': {
+        fontFamily: 'var(--ids-comp-checkbox-label-typography-font-family-dense)',
+        fontWeight: 'var(--ids-comp-checkbox-label-typography-font-weight-dense)',
+        letterSpacing: 'var(--ids-comp-checkbox-label-typography-letter-spacing-dense)',
+        fontSize: 'var(--ids-comp-checkbox-label-typography-font-size-dense)',
+        lineHeight: 'var(--ids-comp-checkbox-label-typography-line-height-dense)',
+      },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled)': {
+        borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-default)',
+        backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-default)',
+      },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover': {
+        borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-hovered)',
+        backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-hovered)',
+      },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active': {
+        borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-pressed)',
+        backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed)',
+      },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus': {
+        borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-focused)',
+        backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-focused)',
+        outlineColor: 'var(--ids-comp-checkbox-input-selected-color-focused-outline-light-focused)',
+      },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:disabled': {
+        borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-disabled)',
+        backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-disabled)',
+      },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-default)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-default)',
+        },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-hovered)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-hovered)',
+        },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-pressed)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-pressed)',
+        },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-focused)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-focused)',
+          outlineColor: 'var(--ids-comp-checkbox-input-selected-color-focused-outline-light-focused)',
+        },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-disabled)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-disabled)',
+          color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-disabled)',
+        },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-default)' },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-hovered)' },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-pressed)' },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-focused)' },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': {
+        color: 'var(--ids-comp-checkbox-label-color-fg-light-default)',
+      },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:hover': {
+        color: 'var(--ids-comp-checkbox-label-color-fg-light-hovered)',
+      },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:active': {
+        color: 'var(--ids-comp-checkbox-label-color-fg-light-pressed)',
+      },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:focus': {
+        color: 'var(--ids-comp-checkbox-label-color-fg-light-focused)',
+      },
+      '.ids-checkbox.ids-checkbox-light.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label':
+        { color: 'var(--ids-comp-checkbox-label-color-fg-light-disabled)' },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled)': {
+        borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-default)',
+        backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-default)',
+      },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover': {
+        borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-hovered)',
+        backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-hovered)',
+      },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active': {
+        borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-pressed)',
+        backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed)',
+      },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus': {
+        borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-focused)',
+        backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused)',
+        outlineColor: 'var(--ids-comp-checkbox-input-selected-color-focused-outline-dark-focused)',
+      },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:disabled': {
+        borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-disabled)',
+        backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-disabled)',
+      },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-default)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-default)',
+        },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-hovered)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered)',
+        },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-pressed)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed)',
+        },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-focused)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-focused)',
+          outlineColor: 'var(--ids-comp-checkbox-input-selected-color-focused-outline-dark-focused)',
+        },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-disabled)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-disabled)',
+          color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-disabled)',
+        },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-default)' },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-hovered)' },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-pressed)' },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-focused)' },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': {
+        color: 'var(--ids-comp-checkbox-label-color-fg-dark-default)',
+      },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:hover': {
+        color: 'var(--ids-comp-checkbox-label-color-fg-dark-hovered)',
+      },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:active': {
+        color: 'var(--ids-comp-checkbox-label-color-fg-dark-pressed)',
+      },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:focus': {
+        color: 'var(--ids-comp-checkbox-label-color-fg-dark-focused)',
+      },
+      '.ids-checkbox.ids-checkbox-dark.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label':
+        { color: 'var(--ids-comp-checkbox-label-color-fg-dark-disabled)' },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled)': {
+        borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-default)',
+        backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-default)',
+      },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover': {
+        borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-hovered)',
+        backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-hovered)',
+      },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active': {
+        borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-pressed)',
+        backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed)',
+      },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus': {
+        borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-focused)',
+        backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-focused)',
+        outlineColor: 'var(--ids-comp-checkbox-input-selected-color-focused-outline-surface-focused)',
+      },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:disabled': {
+        borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-disabled)',
+        backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-disabled)',
+      },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-default)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-default)',
+        },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-hovered)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered)',
+        },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-pressed)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed)',
+        },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-focused)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-focused)',
+          outlineColor: 'var(--ids-comp-checkbox-input-selected-color-focused-outline-surface-focused)',
+        },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-disabled)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-disabled)',
+          color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-disabled)',
+        },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-default)' },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-hovered)' },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-pressed)' },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-focused)' },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': {
+        color: 'var(--ids-comp-checkbox-label-color-fg-surface-default)',
+      },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:hover': {
+        color: 'var(--ids-comp-checkbox-label-color-fg-surface-hovered)',
+      },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:active': {
+        color: 'var(--ids-comp-checkbox-label-color-fg-surface-pressed)',
+      },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:focus': {
+        color: 'var(--ids-comp-checkbox-label-color-fg-surface-focused)',
+      },
+      '.ids-checkbox.ids-checkbox-surface.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label':
+        { color: 'var(--ids-comp-checkbox-label-color-fg-surface-disabled)' },
+      '.ids-checkbox.ids-checkbox-disabled': { opacity: 'var(--ids-comp-checkbox-disabled)' },
+      '.ids-checkbox.ids-checkbox-disabled .ids-checkbox__input-wrapper .ids-checkbox__touch-target': { cursor: 'not-allowed' },
+      '.ids-checkbox.ids-checkbox-disabled .ids-checkbox__input-wrapper input[type=checkbox]': { cursor: 'not-allowed' },
+      '.ids-checkbox.ids-checkbox-disabled .ids-checkbox__input-wrapper input[type=checkbox]+.ids-checkbox__icon': {
+        cursor: 'not-allowed',
+      },
+      '.ids-checkbox.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': {
+        cursor: 'not-allowed',
+      },
+      '.ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__input-wrapper .ids-checkbox__touch-target': { cursor: 'pointer' },
+      '.ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__input-wrapper input[type=checkbox]': { cursor: 'pointer' },
+      '.ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__input-wrapper input[type=checkbox]+.ids-checkbox__icon': {
+        cursor: 'pointer',
+      },
+      '.ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': {
+        cursor: 'pointer',
+      },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled)':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-error-default)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-default)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-error-hovered)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-hovered)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-error-pressed)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-error-focused)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-focused)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-error-default)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-default)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-error-hovered)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-hovered)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-error-pressed)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-pressed)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-error-focused)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-focused)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-default)' },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-hovered)' },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-pressed)' },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-focused)' },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled)':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-error-default)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-default)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-error-hovered)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-hovered)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-error-pressed)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-error-focused)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-error-default)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-default)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-error-hovered)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-error-pressed)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-error-focused)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-focused)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-default)' },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-hovered)' },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-pressed)' },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-focused)' },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled)':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-error-default)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-default)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-error-hovered)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-hovered)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-error-pressed)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-error-focused)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-focused)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-error-default)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-default)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-error-hovered)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-error-pressed)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-error-focused)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-focused)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-default)' },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-hovered)' },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-pressed)' },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-focused)' },
+      '.ids-card': { display: 'flex', borderStyle: 'solid', boxSizing: 'border-box' },
+      '.ids-card.ids-card-clickable': { pointerEvents: 'auto', cursor: 'pointer' },
+      '.ids-card.ids-card-clickable:focus': {
+        outlineOffset: '2px',
+        outlineStyle: 'solid',
+        outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
+      },
+      '.ids-card.ids-card-clickable:focus.ids-button-light': { outlineColor: 'var(--ids-comp-card-focused-outline-color-light-focused)' },
+      '.ids-card.ids-card-clickable.ids-card-disabled': { pointerEvents: 'none', cursor: 'not-allowed' },
+      '.ids-card.ids-card-vertical': { flexDirection: 'column' },
+      '.ids-card.ids-card-vertical .ids-card-section:first-child': {
+        paddingBottom: '0px',
+        borderTopLeftRadius: 'inherit',
+        borderTopRightRadius: 'inherit',
+      },
+      '.ids-card.ids-card-vertical .ids-card-section:last-child': {
+        paddingTop: '0px',
+        borderBottomLeftRadius: 'inherit',
+        borderBottomRightRadius: 'inherit',
+      },
+      '.ids-card.ids-card-vertical .ids-card-section.ids-card-section-stretched': {
+        paddingLeft: '0px',
+        paddingRight: '0px',
+        width: '100%',
+      },
+      '.ids-card.ids-card-vertical .ids-card-section .ids-card-header-headline': { display: 'flex', flexDirection: 'column' },
+      '.ids-card.ids-card-horizontal .ids-card-section:first-child': {
+        paddingRight: '0px',
+        borderTopLeftRadius: 'inherit',
+        borderBottomLeftRadius: 'inherit',
+      },
+      '.ids-card.ids-card-horizontal .ids-card-section:last-child': {
+        paddingLeft: '0px',
+        borderTopRightRadius: 'inherit',
+        borderBottomRightRadius: 'inherit',
+      },
+      '.ids-card.ids-card-horizontal .ids-card-section.ids-card-section-stretched': {
+        paddingTop: '0px',
+        paddingBottom: '0px',
+        height: '100%',
+      },
+      '.ids-card.ids-card-horizontal .ids-card-section.ids-card-header,.ids-card.ids-card-horizontal .ids-card-section.ids-card-footer': {
+        display: 'none',
+      },
+      '.ids-card .ids-card-title': {
+        color: 'var(--ids-smc-reference-container-color-fg-surface-darker-95)',
+        fontSize: '24px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '32px',
+      },
+      '.ids-card .ids-card-subtitle': {
+        color: 'var(--ids-smc-reference-container-color-fg-surface-darker-70)',
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: '24px',
+        letterSpacing: '.15px',
+      },
+      '.ids-card.ids-card-elevated': {
+        boxShadow:
+          'var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-sm) var(--ids-smc-reference-container-effects-shadow-blur-md) var(--ids-smc-reference-container-effects-shadow-spread-xxl) 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-xs) var(--ids-smc-reference-container-effects-shadow-blur-sm) var(--ids-smc-reference-container-effects-shadow-spread-xl) var(--ids-smc-reference-container-effects-shadow-color-dark-light)',
+      },
+      '.ids-card.ids-card-compact.ids-card-horizontal': {
+        padding:
+          'var(--ids-comp-card-container-horizontal-size-padding-y-compact) var(--ids-comp-card-container-horizontal-size-padding-x-compact)',
+        gap: 'var(--ids-comp-card-container-horizontal-size-gap-compact)',
+        borderRadius: 'var(--ids-comp-card-container-horizontal-size-border-radius-compact)',
+      },
+      '.ids-card.ids-card-compact.ids-card-horizontal.ids-card-outlined': {
+        borderWidth: 'var(--ids-comp-card-container-horizontal-size-border-width-compact)',
+      },
+      '.ids-card.ids-card-compact.ids-card-vertical': {
+        padding:
+          'var(--ids-comp-card-container-vertical-size-padding-y-compact) var(--ids-comp-card-container-vertical-size-padding-x-compact)',
+        gap: 'var(--ids-comp-card-container-vertical-size-gap-compact)',
+        borderRadius: 'var(--ids-comp-card-container-vertical-size-border-radius-compact)',
+      },
+      '.ids-card.ids-card-compact.ids-card-vertical.ids-card-outlined': {
+        borderWidth: 'var(--ids-comp-card-container-vertical-size-border-width-compact)',
+      },
+      '.ids-card.ids-card-compact.ids-card-clickable:focus': { outlineWidth: 'var(--ids-comp-card-focused-outline-outline-compact)' },
+      '.ids-card.ids-card-compact .ids-card-header-headline': {
+        gap: 'var(--ids-comp-card-header-headline-gap-compact)',
+        padding: 'var(--ids-comp-card-header-headline-padding-y-compact) var(--ids-comp-card-header-headline-padding-x-compact)',
+      },
+      '.ids-card.ids-card-compact.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child': {
+        paddingTop: 'var(--ids-comp-card-slot-size-padding-top-compact)',
+      },
+      '.ids-card.ids-card-compact.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child': {
+        paddingBottom: 'var(--ids-comp-card-slot-size-padding-bottom-compact)',
+      },
+      '.ids-card.ids-card-compact.ids-card-vertical .ids-card-section.ids-card-section-padded': {
+        paddingLeft: 'var(--ids-comp-card-slot-size-padding-x-compact)',
+        paddingRight: 'var(--ids-comp-card-slot-size-padding-x-compact)',
+      },
+      '.ids-card.ids-card-compact.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child': {
+        paddingLeft: 'var(--ids-comp-card-slot-size-padding-top-compact)',
+      },
+      '.ids-card.ids-card-compact.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child': {
+        paddingRight: 'var(--ids-comp-card-slot-size-padding-bottom-compact)',
+      },
+      '.ids-card.ids-card-compact.ids-card-horizontal .ids-card-section.ids-card-section-padded': {
+        paddingTop: 'var(--ids-comp-card-slot-size-padding-x-compact)',
+        paddingBottom: 'var(--ids-comp-card-slot-size-padding-x-compact)',
+      },
+      '.ids-card.ids-card-comfortable.ids-card-horizontal': {
+        padding:
+          'var(--ids-comp-card-container-horizontal-size-padding-y-comfortable) var(--ids-comp-card-container-horizontal-size-padding-x-comfortable)',
+        gap: 'var(--ids-comp-card-container-horizontal-size-gap-comfortable)',
+        borderRadius: 'var(--ids-comp-card-container-horizontal-size-border-radius-comfortable)',
+      },
+      '.ids-card.ids-card-comfortable.ids-card-horizontal.ids-card-outlined': {
+        borderWidth: 'var(--ids-comp-card-container-horizontal-size-border-width-comfortable)',
+      },
+      '.ids-card.ids-card-comfortable.ids-card-vertical': {
+        padding:
+          'var(--ids-comp-card-container-vertical-size-padding-y-comfortable) var(--ids-comp-card-container-vertical-size-padding-x-comfortable)',
+        gap: 'var(--ids-comp-card-container-vertical-size-gap-comfortable)',
+        borderRadius: 'var(--ids-comp-card-container-vertical-size-border-radius-comfortable)',
+      },
+      '.ids-card.ids-card-comfortable.ids-card-vertical.ids-card-outlined': {
+        borderWidth: 'var(--ids-comp-card-container-vertical-size-border-width-comfortable)',
+      },
+      '.ids-card.ids-card-comfortable.ids-card-clickable:focus': {
+        outlineWidth: 'var(--ids-comp-card-focused-outline-outline-comfortable)',
+      },
+      '.ids-card.ids-card-comfortable .ids-card-header-headline': {
+        gap: 'var(--ids-comp-card-header-headline-gap-comfortable)',
+        padding: 'var(--ids-comp-card-header-headline-padding-y-comfortable) var(--ids-comp-card-header-headline-padding-x-comfortable)',
+      },
+      '.ids-card.ids-card-comfortable.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child': {
+        paddingTop: 'var(--ids-comp-card-slot-size-padding-top-comfortable)',
+      },
+      '.ids-card.ids-card-comfortable.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child': {
+        paddingBottom: 'var(--ids-comp-card-slot-size-padding-bottom-comfortable)',
+      },
+      '.ids-card.ids-card-comfortable.ids-card-vertical .ids-card-section.ids-card-section-padded': {
+        paddingLeft: 'var(--ids-comp-card-slot-size-padding-x-comfortable)',
+        paddingRight: 'var(--ids-comp-card-slot-size-padding-x-comfortable)',
+      },
+      '.ids-card.ids-card-comfortable.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child': {
+        paddingLeft: 'var(--ids-comp-card-slot-size-padding-top-comfortable)',
+      },
+      '.ids-card.ids-card-comfortable.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child': {
+        paddingRight: 'var(--ids-comp-card-slot-size-padding-bottom-comfortable)',
+      },
+      '.ids-card.ids-card-comfortable.ids-card-horizontal .ids-card-section.ids-card-section-padded': {
+        paddingTop: 'var(--ids-comp-card-slot-size-padding-x-comfortable)',
+        paddingBottom: 'var(--ids-comp-card-slot-size-padding-x-comfortable)',
+      },
+      '.ids-card.ids-card-spacious.ids-card-horizontal': {
+        padding:
+          'var(--ids-comp-card-container-horizontal-size-padding-y-spacious) var(--ids-comp-card-container-horizontal-size-padding-x-spacious)',
+        gap: 'var(--ids-comp-card-container-horizontal-size-gap-spacious)',
+        borderRadius: 'var(--ids-comp-card-container-horizontal-size-border-radius-spacious)',
+      },
+      '.ids-card.ids-card-spacious.ids-card-horizontal.ids-card-outlined': {
+        borderWidth: 'var(--ids-comp-card-container-horizontal-size-border-width-spacious)',
+      },
+      '.ids-card.ids-card-spacious.ids-card-vertical': {
+        padding:
+          'var(--ids-comp-card-container-vertical-size-padding-y-spacious) var(--ids-comp-card-container-vertical-size-padding-x-spacious)',
+        gap: 'var(--ids-comp-card-container-vertical-size-gap-spacious)',
+        borderRadius: 'var(--ids-comp-card-container-vertical-size-border-radius-spacious)',
+      },
+      '.ids-card.ids-card-spacious.ids-card-vertical.ids-card-outlined': {
+        borderWidth: 'var(--ids-comp-card-container-vertical-size-border-width-spacious)',
+      },
+      '.ids-card.ids-card-spacious.ids-card-clickable:focus': { outlineWidth: 'var(--ids-comp-card-focused-outline-outline-spacious)' },
+      '.ids-card.ids-card-spacious .ids-card-header-headline': {
+        gap: 'var(--ids-comp-card-header-headline-gap-spacious)',
+        padding: 'var(--ids-comp-card-header-headline-padding-y-spacious) var(--ids-comp-card-header-headline-padding-x-spacious)',
+      },
+      '.ids-card.ids-card-spacious.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child': {
+        paddingTop: 'var(--ids-comp-card-slot-size-padding-top-spacious)',
+      },
+      '.ids-card.ids-card-spacious.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child': {
+        paddingBottom: 'var(--ids-comp-card-slot-size-padding-bottom-spacious)',
+      },
+      '.ids-card.ids-card-spacious.ids-card-vertical .ids-card-section.ids-card-section-padded': {
+        paddingLeft: 'var(--ids-comp-card-slot-size-padding-x-spacious)',
+        paddingRight: 'var(--ids-comp-card-slot-size-padding-x-spacious)',
+      },
+      '.ids-card.ids-card-spacious.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child': {
+        paddingLeft: 'var(--ids-comp-card-slot-size-padding-top-spacious)',
+      },
+      '.ids-card.ids-card-spacious.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child': {
+        paddingRight: 'var(--ids-comp-card-slot-size-padding-bottom-spacious)',
+      },
+      '.ids-card.ids-card-spacious.ids-card-horizontal .ids-card-section.ids-card-section-padded': {
+        paddingTop: 'var(--ids-comp-card-slot-size-padding-x-spacious)',
+        paddingBottom: 'var(--ids-comp-card-slot-size-padding-x-spacious)',
+      },
+      '.ids-card.ids-card-dense.ids-card-horizontal': {
+        padding:
+          'var(--ids-comp-card-container-horizontal-size-padding-y-dense) var(--ids-comp-card-container-horizontal-size-padding-x-dense)',
+        gap: 'var(--ids-comp-card-container-horizontal-size-gap-dense)',
+        borderRadius: 'var(--ids-comp-card-container-horizontal-size-border-radius-dense)',
+      },
+      '.ids-card.ids-card-dense.ids-card-horizontal.ids-card-outlined': {
+        borderWidth: 'var(--ids-comp-card-container-horizontal-size-border-width-dense)',
+      },
+      '.ids-card.ids-card-dense.ids-card-vertical': {
+        padding:
+          'var(--ids-comp-card-container-vertical-size-padding-y-dense) var(--ids-comp-card-container-vertical-size-padding-x-dense)',
+        gap: 'var(--ids-comp-card-container-vertical-size-gap-dense)',
+        borderRadius: 'var(--ids-comp-card-container-vertical-size-border-radius-dense)',
+      },
+      '.ids-card.ids-card-dense.ids-card-vertical.ids-card-outlined': {
+        borderWidth: 'var(--ids-comp-card-container-vertical-size-border-width-dense)',
+      },
+      '.ids-card.ids-card-dense.ids-card-clickable:focus': { outlineWidth: 'var(--ids-comp-card-focused-outline-outline-dense)' },
+      '.ids-card.ids-card-dense .ids-card-header-headline': {
+        gap: 'var(--ids-comp-card-header-headline-gap-dense)',
+        padding: 'var(--ids-comp-card-header-headline-padding-y-dense) var(--ids-comp-card-header-headline-padding-x-dense)',
+      },
+      '.ids-card.ids-card-dense.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child': {
+        paddingTop: 'var(--ids-comp-card-slot-size-padding-top-dense)',
+      },
+      '.ids-card.ids-card-dense.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child': {
+        paddingBottom: 'var(--ids-comp-card-slot-size-padding-bottom-dense)',
+      },
+      '.ids-card.ids-card-dense.ids-card-vertical .ids-card-section.ids-card-section-padded': {
+        paddingLeft: 'var(--ids-comp-card-slot-size-padding-x-dense)',
+        paddingRight: 'var(--ids-comp-card-slot-size-padding-x-dense)',
+      },
+      '.ids-card.ids-card-dense.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child': {
+        paddingLeft: 'var(--ids-comp-card-slot-size-padding-top-dense)',
+      },
+      '.ids-card.ids-card-dense.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child': {
+        paddingRight: 'var(--ids-comp-card-slot-size-padding-bottom-dense)',
+      },
+      '.ids-card.ids-card-dense.ids-card-horizontal .ids-card-section.ids-card-section-padded': {
+        paddingTop: 'var(--ids-comp-card-slot-size-padding-x-dense)',
+        paddingBottom: 'var(--ids-comp-card-slot-size-padding-x-dense)',
+      },
+      '.ids-card.ids-card-filled.ids-card-primary': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-primary-default)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-primary-default)',
+      },
+      '.ids-card.ids-card-filled.ids-card-primary.ids-card-clickable:hover': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-primary-hovered)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-primary-hovered)',
+      },
+      '.ids-card.ids-card-filled.ids-card-primary.ids-card-clickable:focus': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-primary-focused)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-primary-focused)',
+      },
+      '.ids-card.ids-card-filled.ids-card-primary.ids-card-clickable:active': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-primary-pressed)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-primary-pressed)',
+      },
+      '.ids-card.ids-card-filled.ids-card-primary.ids-card-clickable.ids-card-disabled': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-primary-disabled)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-primary-disabled)',
+      },
+      '.ids-card.ids-card-filled.ids-card-secondary': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-secondary-default)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-secondary-default)',
+      },
+      '.ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable:hover': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-secondary-hovered)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-secondary-hovered)',
+      },
+      '.ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable:focus': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-secondary-focused)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-secondary-focused)',
+      },
+      '.ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable:active': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-secondary-pressed)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-secondary-pressed)',
+      },
+      '.ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable.ids-card-disabled': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-secondary-disabled)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-secondary-disabled)',
+      },
+      '.ids-card.ids-card-filled.ids-card-brand': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-brand-default)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-brand-default)',
+      },
+      '.ids-card.ids-card-filled.ids-card-brand.ids-card-clickable:hover': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-brand-hovered)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-brand-hovered)',
+      },
+      '.ids-card.ids-card-filled.ids-card-brand.ids-card-clickable:focus': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-brand-focused)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-brand-focused)',
+      },
+      '.ids-card.ids-card-filled.ids-card-brand.ids-card-clickable:active': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-brand-pressed)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-brand-pressed)',
+      },
+      '.ids-card.ids-card-filled.ids-card-brand.ids-card-clickable.ids-card-disabled': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-brand-disabled)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-brand-disabled)',
+      },
+      '.ids-card.ids-card-filled.ids-card-error': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-error-default)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-error-default)',
+      },
+      '.ids-card.ids-card-filled.ids-card-error.ids-card-clickable:hover': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-error-hovered)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-error-hovered)',
+      },
+      '.ids-card.ids-card-filled.ids-card-error.ids-card-clickable:focus': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-error-focused)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-error-focused)',
+      },
+      '.ids-card.ids-card-filled.ids-card-error.ids-card-clickable:active': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-error-pressed)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-error-pressed)',
+      },
+      '.ids-card.ids-card-filled.ids-card-success': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-success-default)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-success-default)',
+      },
+      '.ids-card.ids-card-filled.ids-card-success.ids-card-clickable:hover': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-success-hovered)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-success-hovered)',
+      },
+      '.ids-card.ids-card-filled.ids-card-success.ids-card-clickable:focus': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-success-focused)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-success-focused)',
+      },
+      '.ids-card.ids-card-filled.ids-card-success.ids-card-clickable:active': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-success-pressed)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-success-pressed)',
+      },
+      '.ids-card.ids-card-filled.ids-card-warning': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-warning-default)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-warning-default)',
+      },
+      '.ids-card.ids-card-filled.ids-card-warning.ids-card-clickable:hover': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-warning-hovered)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-warning-hovered)',
+      },
+      '.ids-card.ids-card-filled.ids-card-warning.ids-card-clickable:focus': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-warning-focused)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-warning-focused)',
+      },
+      '.ids-card.ids-card-filled.ids-card-warning.ids-card-clickable:active': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-warning-pressed)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-warning-pressed)',
+      },
+      '.ids-card.ids-card-filled.ids-card-info': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-info-default)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-info-default)',
+      },
+      '.ids-card.ids-card-filled.ids-card-info.ids-card-clickable:hover': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-info-hovered)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-info-hovered)',
+      },
+      '.ids-card.ids-card-filled.ids-card-info.ids-card-clickable:focus': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-info-focused)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-info-focused)',
+      },
+      '.ids-card.ids-card-filled.ids-card-info.ids-card-clickable:active': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-info-pressed)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-info-pressed)',
+      },
+      '.ids-card.ids-card-filled.ids-card-light': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-light-default)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-light-default)',
+      },
+      '.ids-card.ids-card-filled.ids-card-light.ids-card-clickable:hover': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-light-hovered)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-light-hovered)',
+      },
+      '.ids-card.ids-card-filled.ids-card-light.ids-card-clickable:focus': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-light-focused)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-light-focused)',
+      },
+      '.ids-card.ids-card-filled.ids-card-light.ids-card-clickable:active': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-light-pressed)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-light-pressed)',
+      },
+      '.ids-card.ids-card-filled.ids-card-light.ids-card-clickable.ids-card-disabled': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-light-disabled)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-light-disabled)',
+      },
+      '.ids-card.ids-card-filled.ids-card-dark': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-dark-default)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-dark-default)',
+      },
+      '.ids-card.ids-card-filled.ids-card-dark.ids-card-clickable:hover': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-dark-hovered)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-dark-hovered)',
+      },
+      '.ids-card.ids-card-filled.ids-card-dark.ids-card-clickable:focus': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-dark-focused)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-dark-focused)',
+      },
+      '.ids-card.ids-card-filled.ids-card-dark.ids-card-clickable:active': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-dark-pressed)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-dark-pressed)',
+      },
+      '.ids-card.ids-card-filled.ids-card-dark.ids-card-clickable.ids-card-disabled': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-dark-disabled)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-dark-disabled)',
+      },
+      '.ids-card.ids-card-filled.ids-card-surface': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-surface-default)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-surface-default)',
+      },
+      '.ids-card.ids-card-filled.ids-card-surface.ids-card-clickable:hover': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-surface-hovered)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-surface-hovered)',
+      },
+      '.ids-card.ids-card-filled.ids-card-surface.ids-card-clickable:focus': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-surface-focused)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-surface-focused)',
+      },
+      '.ids-card.ids-card-filled.ids-card-surface.ids-card-clickable:active': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-surface-pressed)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-surface-pressed)',
+      },
+      '.ids-card.ids-card-filled.ids-card-surface.ids-card-clickable.ids-card-disabled': {
+        backgroundColor: 'var(--ids-comp-card-filled-color-bg-surface-disabled)',
+        borderColor: 'var(--ids-comp-card-filled-color-border-surface-disabled)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-primary': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-primary-default)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-primary-default)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable:hover': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-primary-hovered)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-primary-hovered)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable:focus': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-primary-focused)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-primary-focused)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable:active': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-primary-pressed)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-primary-pressed)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable.ids-card-disabled': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-primary-disabled)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-primary-disabled)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-secondary': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-secondary-default)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-secondary-default)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable:hover': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-secondary-hovered)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-secondary-hovered)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable:focus': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-secondary-focused)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-secondary-focused)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable:active': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-secondary-pressed)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-secondary-pressed)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable.ids-card-disabled': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-secondary-disabled)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-secondary-disabled)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-brand': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-brand-default)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-brand-default)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable:hover': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-brand-hovered)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-brand-hovered)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable:focus': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-brand-focused)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-brand-focused)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable:active': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-brand-pressed)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-brand-pressed)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable.ids-card-disabled': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-brand-disabled)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-brand-disabled)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-error': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-error-default)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-error-default)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-error.ids-card-clickable:hover': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-error-hovered)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-error-hovered)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-error.ids-card-clickable:focus': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-error-focused)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-error-focused)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-error.ids-card-clickable:active': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-error-pressed)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-error-pressed)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-success': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-success-default)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-success-default)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-success.ids-card-clickable:hover': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-success-hovered)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-success-hovered)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-success.ids-card-clickable:focus': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-success-focused)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-success-focused)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-success.ids-card-clickable:active': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-success-pressed)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-success-pressed)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-warning': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-warning-default)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-warning-default)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable:hover': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-warning-hovered)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-warning-hovered)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable:focus': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-warning-focused)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-warning-focused)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable:active': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-warning-pressed)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-warning-pressed)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-info': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-info-default)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-info-default)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-info.ids-card-clickable:hover': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-info-hovered)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-info-hovered)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-info.ids-card-clickable:focus': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-info-focused)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-info-focused)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-info.ids-card-clickable:active': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-info-pressed)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-info-pressed)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-light': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-light-default)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-light-default)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-light.ids-card-clickable:hover': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-light-hovered)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-light-hovered)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-light.ids-card-clickable:focus': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-light-focused)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-light-focused)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-light.ids-card-clickable:active': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-light-pressed)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-light-pressed)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-light.ids-card-clickable.ids-card-disabled': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-light-disabled)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-light-disabled)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-dark': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-dark-default)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-dark-default)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable:hover': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-dark-hovered)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-dark-hovered)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable:focus': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-dark-focused)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-dark-focused)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable:active': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-dark-pressed)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-dark-pressed)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable.ids-card-disabled': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-dark-disabled)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-dark-disabled)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-surface': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-surface-default)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-surface-default)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable:hover': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-surface-hovered)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-surface-hovered)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable:focus': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-surface-focused)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-surface-focused)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable:active': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-surface-pressed)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-surface-pressed)',
+      },
+      '.ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable.ids-card-disabled': {
+        backgroundColor: 'var(--ids-comp-card-outlined-color-bg-surface-disabled)',
+        borderColor: 'var(--ids-comp-card-outlined-color-border-surface-disabled)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-primary': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-primary-default)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-primary-default)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable:hover': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-primary-hovered)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-primary-hovered)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable:focus': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-primary-focused)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-primary-focused)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable:active': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-primary-pressed)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-primary-pressed)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable.ids-card-disabled': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-primary-disabled)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-primary-disabled)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-secondary': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-secondary-default)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-secondary-default)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable:hover': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-secondary-hovered)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-secondary-hovered)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable:focus': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-secondary-focused)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-secondary-focused)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable:active': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-secondary-pressed)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-secondary-pressed)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable.ids-card-disabled': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-secondary-disabled)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-secondary-disabled)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-brand': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-brand-default)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-brand-default)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable:hover': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-brand-hovered)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-brand-hovered)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable:focus': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-brand-focused)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-brand-focused)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable:active': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-brand-pressed)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-brand-pressed)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable.ids-card-disabled': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-brand-disabled)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-brand-disabled)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-error': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-error-default)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-error-default)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-error.ids-card-clickable:hover': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-error-hovered)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-error-hovered)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-error.ids-card-clickable:focus': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-error-focused)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-error-focused)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-error.ids-card-clickable:active': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-error-pressed)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-error-pressed)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-success': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-success-default)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-success-default)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-success.ids-card-clickable:hover': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-success-hovered)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-success-hovered)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-success.ids-card-clickable:focus': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-success-focused)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-success-focused)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-success.ids-card-clickable:active': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-success-pressed)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-success-pressed)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-warning': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-warning-default)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-warning-default)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable:hover': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-warning-hovered)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-warning-hovered)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable:focus': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-warning-focused)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-warning-focused)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable:active': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-warning-pressed)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-warning-pressed)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-info': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-info-default)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-info-default)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-info.ids-card-clickable:hover': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-info-hovered)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-info-hovered)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-info.ids-card-clickable:focus': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-info-focused)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-info-focused)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-info.ids-card-clickable:active': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-info-pressed)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-info-pressed)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-light': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-light-default)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-light-default)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-light.ids-card-clickable:hover': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-light-hovered)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-light-hovered)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-light.ids-card-clickable:focus': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-light-focused)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-light-focused)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-light.ids-card-clickable:active': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-light-pressed)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-light-pressed)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-light.ids-card-clickable.ids-card-disabled': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-light-disabled)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-light-disabled)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-dark': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-dark-default)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-dark-default)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable:hover': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-dark-hovered)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-dark-hovered)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable:focus': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-dark-focused)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-dark-focused)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable:active': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-dark-pressed)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-dark-pressed)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable.ids-card-disabled': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-dark-disabled)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-dark-disabled)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-surface': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-surface-default)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-surface-default)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable:hover': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-surface-hovered)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-surface-hovered)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable:focus': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-surface-focused)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-surface-focused)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable:active': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-surface-pressed)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-surface-pressed)',
+      },
+      '.ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable.ids-card-disabled': {
+        backgroundColor: 'var(--ids-comp-card-elevated-color-bg-surface-disabled)',
+        borderColor: 'var(--ids-comp-card-elevated-color-border-surface-disabled)',
+      },
+      '.ids-dialog': {
+        boxSizing: 'border-box',
+        borderStyle: 'solid',
+        borderColor: 'var(--ids-comp-dialog-container-color-border-surface-default)',
+        backgroundColor: 'var(--ids-comp-dialog-container-color-bg-default)',
+        boxShadow:
+          'var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-default)',
+      },
+      '.ids-dialog::backdrop': { backgroundColor: 'rgba(0,0,0,0)' },
+      '.ids-dialog.ids-dialog-with-backdrop::backdrop': {
+        opacity: 'var(--ids-comp-dialog-backdrop-opacity)',
+        backgroundColor: 'var(--ids-comp-dialog-backdrop-background)',
+      },
+      '.ids-dialog .ids-dialog-container': {
+        boxSizing: 'border-box',
+        display: 'grid',
+        gridTemplateRows: 'auto 1fr auto',
+        position: 'relative',
+        maxHeight: '80vh',
+      },
+      '.ids-dialog .ids-dialog-container .ids-dialog-header': { display: 'flex', alignItems: 'stretch' },
+      '.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title': { fontStyle: 'normal' },
+      '.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title.hidden': { display: 'none' },
+      '.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle': { fontStyle: 'normal' },
+      '.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content': {
+        display: 'flex',
+        flexDirection: 'column',
+        flex: '1 0 0',
+        alignItems: 'flex-start',
+      },
+      '.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-close-button': { position: 'absolute', top: '12px', right: '12px' },
+      '.ids-dialog .ids-dialog-container .ids-dialog-content': {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflowY: 'auto',
+        background: 'var(--ids-comp-dialog-content-color-bg-default)',
+      },
+      '.ids-dialog .ids-dialog-container .ids-dialog-content .ids-dialog-content-overflow': { overflowY: 'auto', height: '100%' },
+      '.ids-dialog .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable': {
+        borderTopStyle: 'solid',
+        borderBottomStyle: 'solid',
+        borderTopColor: 'var(--ids-comp-dialog-content-color-border-surface-default)',
+        borderBottomColor: 'var(--ids-comp-dialog-content-color-border-surface-default)',
+      },
+      '.ids-dialog .ids-dialog-container .ids-dialog-actions': {
+        display: 'flex',
+        background: 'var(--ids-comp-dialog-footer-color-bg-default)',
+        justifyContent: 'flex-end',
+        alignItems: 'flex-start',
+        alignContent: 'flex-start',
+        alignSelf: 'stretch',
+        flexWrap: 'wrap',
+      },
+      '.ids-dialog.ids-dialog-compact': {
+        borderRadius: 'var(--ids-comp-dialog-container-size-border-radius-compact)',
+        borderWidth: 'var(--ids-comp-dialog-container-size-border-width-compact)',
+      },
+      '.ids-dialog.ids-dialog-compact .ids-dialog-container': {
+        width: 'var(--ids-comp-dialog-container-size-width-compact)',
+        minHeight: 'var(--ids-comp-dialog-container-size-min-height-compact)',
+        padding: 'var(--ids-comp-dialog-container-size-padding-y-compact) var(--ids-comp-dialog-container-size-padding-x-compact)',
+        gap: 'var(--ids-comp-dialog-container-size-gap-compact)',
+      },
+      '.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-title': {
+        fontFamily: 'var(--ids-comp-dialog-header-title-typography-font-family-compact)',
+        fontSize: 'var(--ids-comp-dialog-header-title-typography-font-size-compact)',
+        fontWeight: 'var(--ids-comp-dialog-header-title-typography-font-weight-compact)',
+        letterSpacing: 'var(--ids-comp-dialog-header-title-typography-letter-spacing-compact)',
+        lineHeight: 'var(--ids-comp-dialog-header-title-typography-line-height-compact)',
+      },
+      '.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle': {
+        fontFamily: 'var(--ids-comp-dialog-header-subtitle-typography-font-family-compact)',
+        fontSize: 'var(--ids-comp-dialog-header-subtitle-typography-font-size-compact)',
+        fontWeight: 'var(--ids-comp-dialog-header-subtitle-typography-font-weight-compact)',
+        letterSpacing: 'var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-compact)',
+        lineHeight: 'var(--ids-comp-dialog-header-subtitle-typography-line-height-compact)',
+      },
+      '.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content': {
+        gap: 'var(--ids-comp-dialog-header-size-gap-compact)',
+        padding: 'var(--ids-comp-dialog-header-size-padding-y-compact) var(--ids-comp-dialog-header-size-padding-x-compact)',
+      },
+      '.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-content': {
+        padding: 'var(--ids-comp-dialog-content-fixed-size-padding-y-compact) var(--ids-comp-dialog-content-fixed-size-padding-x-compact)',
+      },
+      '.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable': {
+        padding:
+          'var(--ids-comp-dialog-content-scrollable-size-padding-y-compact) var(--ids-comp-dialog-content-scrollable-size-padding-x-compact)',
+        borderTopWidth: 'var(--ids-comp-dialog-content-scrollable-size-border-width-compact)',
+        borderBottomWidth: 'var(--ids-comp-dialog-content-scrollable-size-border-width-compact)',
+      },
+      '.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-actions': {
+        padding: 'var(--ids-comp-dialog-footer-padding-y-compact) var(--ids-comp-dialog-footer-padding-x-compact)',
+      },
+      '.ids-dialog.ids-dialog-comfortable': {
+        borderRadius: 'var(--ids-comp-dialog-container-size-border-radius-comfortable)',
+        borderWidth: 'var(--ids-comp-dialog-container-size-border-width-comfortable)',
+      },
+      '.ids-dialog.ids-dialog-comfortable .ids-dialog-container': {
+        width: 'var(--ids-comp-dialog-container-size-width-comfortable)',
+        minHeight: 'var(--ids-comp-dialog-container-size-min-height-comfortable)',
+        padding: 'var(--ids-comp-dialog-container-size-padding-y-comfortable) var(--ids-comp-dialog-container-size-padding-x-comfortable)',
+        gap: 'var(--ids-comp-dialog-container-size-gap-comfortable)',
+      },
+      '.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-title': {
+        fontFamily: 'var(--ids-comp-dialog-header-title-typography-font-family-comfortable)',
+        fontSize: 'var(--ids-comp-dialog-header-title-typography-font-size-comfortable)',
+        fontWeight: 'var(--ids-comp-dialog-header-title-typography-font-weight-comfortable)',
+        letterSpacing: 'var(--ids-comp-dialog-header-title-typography-letter-spacing-comfortable)',
+        lineHeight: 'var(--ids-comp-dialog-header-title-typography-line-height-comfortable)',
+      },
+      '.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle': {
+        fontFamily: 'var(--ids-comp-dialog-header-subtitle-typography-font-family-comfortable)',
+        fontSize: 'var(--ids-comp-dialog-header-subtitle-typography-font-size-comfortable)',
+        fontWeight: 'var(--ids-comp-dialog-header-subtitle-typography-font-weight-comfortable)',
+        letterSpacing: 'var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-comfortable)',
+        lineHeight: 'var(--ids-comp-dialog-header-subtitle-typography-line-height-comfortable)',
+      },
+      '.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content': {
+        gap: 'var(--ids-comp-dialog-header-size-gap-comfortable)',
+        padding: 'var(--ids-comp-dialog-header-size-padding-y-comfortable) var(--ids-comp-dialog-header-size-padding-x-comfortable)',
+      },
+      '.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-content': {
+        padding:
+          'var(--ids-comp-dialog-content-fixed-size-padding-y-comfortable) var(--ids-comp-dialog-content-fixed-size-padding-x-comfortable)',
+      },
+      '.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable': {
+        padding:
+          'var(--ids-comp-dialog-content-scrollable-size-padding-y-comfortable) var(--ids-comp-dialog-content-scrollable-size-padding-x-comfortable)',
+        borderTopWidth: 'var(--ids-comp-dialog-content-scrollable-size-border-width-comfortable)',
+        borderBottomWidth: 'var(--ids-comp-dialog-content-scrollable-size-border-width-comfortable)',
+      },
+      '.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-actions': {
+        padding: 'var(--ids-comp-dialog-footer-padding-y-comfortable) var(--ids-comp-dialog-footer-padding-x-comfortable)',
+      },
+      '.ids-dialog.ids-dialog-spacious': {
+        borderRadius: 'var(--ids-comp-dialog-container-size-border-radius-spacious)',
+        borderWidth: 'var(--ids-comp-dialog-container-size-border-width-spacious)',
+      },
+      '.ids-dialog.ids-dialog-spacious .ids-dialog-container': {
+        width: 'var(--ids-comp-dialog-container-size-width-spacious)',
+        minHeight: 'var(--ids-comp-dialog-container-size-min-height-spacious)',
+        padding: 'var(--ids-comp-dialog-container-size-padding-y-spacious) var(--ids-comp-dialog-container-size-padding-x-spacious)',
+        gap: 'var(--ids-comp-dialog-container-size-gap-spacious)',
+      },
+      '.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-title': {
+        fontFamily: 'var(--ids-comp-dialog-header-title-typography-font-family-spacious)',
+        fontSize: 'var(--ids-comp-dialog-header-title-typography-font-size-spacious)',
+        fontWeight: 'var(--ids-comp-dialog-header-title-typography-font-weight-spacious)',
+        letterSpacing: 'var(--ids-comp-dialog-header-title-typography-letter-spacing-spacious)',
+        lineHeight: 'var(--ids-comp-dialog-header-title-typography-line-height-spacious)',
+      },
+      '.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle': {
+        fontFamily: 'var(--ids-comp-dialog-header-subtitle-typography-font-family-spacious)',
+        fontSize: 'var(--ids-comp-dialog-header-subtitle-typography-font-size-spacious)',
+        fontWeight: 'var(--ids-comp-dialog-header-subtitle-typography-font-weight-spacious)',
+        letterSpacing: 'var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-spacious)',
+        lineHeight: 'var(--ids-comp-dialog-header-subtitle-typography-line-height-spacious)',
+      },
+      '.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content': {
+        gap: 'var(--ids-comp-dialog-header-size-gap-spacious)',
+        padding: 'var(--ids-comp-dialog-header-size-padding-y-spacious) var(--ids-comp-dialog-header-size-padding-x-spacious)',
+      },
+      '.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-content': {
+        padding:
+          'var(--ids-comp-dialog-content-fixed-size-padding-y-spacious) var(--ids-comp-dialog-content-fixed-size-padding-x-spacious)',
+      },
+      '.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable': {
+        padding:
+          'var(--ids-comp-dialog-content-scrollable-size-padding-y-spacious) var(--ids-comp-dialog-content-scrollable-size-padding-x-spacious)',
+        borderTopWidth: 'var(--ids-comp-dialog-content-scrollable-size-border-width-spacious)',
+        borderBottomWidth: 'var(--ids-comp-dialog-content-scrollable-size-border-width-spacious)',
+      },
+      '.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-actions': {
+        padding: 'var(--ids-comp-dialog-footer-padding-y-spacious) var(--ids-comp-dialog-footer-padding-x-spacious)',
+      },
+      '.ids-dialog.ids-dialog-dense': {
+        borderRadius: 'var(--ids-comp-dialog-container-size-border-radius-dense)',
+        borderWidth: 'var(--ids-comp-dialog-container-size-border-width-dense)',
+      },
+      '.ids-dialog.ids-dialog-dense .ids-dialog-container': {
+        width: 'var(--ids-comp-dialog-container-size-width-dense)',
+        minHeight: 'var(--ids-comp-dialog-container-size-min-height-dense)',
+        padding: 'var(--ids-comp-dialog-container-size-padding-y-dense) var(--ids-comp-dialog-container-size-padding-x-dense)',
+        gap: 'var(--ids-comp-dialog-container-size-gap-dense)',
+      },
+      '.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-title': {
+        fontFamily: 'var(--ids-comp-dialog-header-title-typography-font-family-dense)',
+        fontSize: 'var(--ids-comp-dialog-header-title-typography-font-size-dense)',
+        fontWeight: 'var(--ids-comp-dialog-header-title-typography-font-weight-dense)',
+        letterSpacing: 'var(--ids-comp-dialog-header-title-typography-letter-spacing-dense)',
+        lineHeight: 'var(--ids-comp-dialog-header-title-typography-line-height-dense)',
+      },
+      '.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle': {
+        fontFamily: 'var(--ids-comp-dialog-header-subtitle-typography-font-family-dense)',
+        fontSize: 'var(--ids-comp-dialog-header-subtitle-typography-font-size-dense)',
+        fontWeight: 'var(--ids-comp-dialog-header-subtitle-typography-font-weight-dense)',
+        letterSpacing: 'var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-dense)',
+        lineHeight: 'var(--ids-comp-dialog-header-subtitle-typography-line-height-dense)',
+      },
+      '.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content': {
+        gap: 'var(--ids-comp-dialog-header-size-gap-dense)',
+        padding: 'var(--ids-comp-dialog-header-size-padding-y-dense) var(--ids-comp-dialog-header-size-padding-x-dense)',
+      },
+      '.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-content': {
+        padding: 'var(--ids-comp-dialog-content-fixed-size-padding-y-dense) var(--ids-comp-dialog-content-fixed-size-padding-x-dense)',
+      },
+      '.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable': {
+        padding:
+          'var(--ids-comp-dialog-content-scrollable-size-padding-y-dense) var(--ids-comp-dialog-content-scrollable-size-padding-x-dense)',
+        borderTopWidth: 'var(--ids-comp-dialog-content-scrollable-size-border-width-dense)',
+        borderBottomWidth: 'var(--ids-comp-dialog-content-scrollable-size-border-width-dense)',
+      },
+      '.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-actions': {
+        padding: 'var(--ids-comp-dialog-footer-padding-y-dense) var(--ids-comp-dialog-footer-padding-x-dense)',
+      },
+      '.ids-divider': { flexShrink: [0, 0], display: 'flex', alignItems: 'center', justifyContent: 'center', alignSelf: 'stretch' },
+      '.ids-divider.ids-divider-compact': { borderRadius: 'var(--ids-comp-divider-size-border-radius-compact)' },
+      '.ids-divider.ids-divider-compact.ids-divider-horizontal': { height: 'var(--ids-comp-divider-size-height-compact)' },
+      '.ids-divider.ids-divider-compact.ids-divider-vertical': { width: 'var(--ids-comp-divider-size-width-compact)' },
+      '.ids-divider.ids-divider-comfortable': { borderRadius: 'var(--ids-comp-divider-size-border-radius-comfortable)' },
+      '.ids-divider.ids-divider-comfortable.ids-divider-horizontal': { height: 'var(--ids-comp-divider-size-height-comfortable)' },
+      '.ids-divider.ids-divider-comfortable.ids-divider-vertical': { width: 'var(--ids-comp-divider-size-width-comfortable)' },
+      '.ids-divider.ids-divider-spacious': { borderRadius: 'var(--ids-comp-divider-size-border-radius-spacious)' },
+      '.ids-divider.ids-divider-spacious.ids-divider-horizontal': { height: 'var(--ids-comp-divider-size-height-spacious)' },
+      '.ids-divider.ids-divider-spacious.ids-divider-vertical': { width: 'var(--ids-comp-divider-size-width-spacious)' },
+      '.ids-divider.ids-divider-dense': { borderRadius: 'var(--ids-comp-divider-size-border-radius-dense)' },
+      '.ids-divider.ids-divider-dense.ids-divider-horizontal': { height: 'var(--ids-comp-divider-size-height-dense)' },
+      '.ids-divider.ids-divider-dense.ids-divider-vertical': { width: 'var(--ids-comp-divider-size-width-dense)' },
+      '.ids-divider.ids-divider-primary': { background: 'var(--ids-comp-divider-color-bg-primary-default)' },
+      '.ids-divider.ids-divider-secondary': { background: 'var(--ids-comp-divider-color-bg-secondary-default)' },
+      '.ids-divider.ids-divider-brand': { background: 'var(--ids-comp-divider-color-bg-brand-default)' },
+      '.ids-divider.ids-divider-error': { background: 'var(--ids-comp-divider-color-bg-error-default)' },
+      '.ids-divider.ids-divider-success': { background: 'var(--ids-comp-divider-color-bg-success-default)' },
+      '.ids-divider.ids-divider-warning': { background: 'var(--ids-comp-divider-color-bg-warning-default)' },
+      '.ids-divider.ids-divider-light': { background: 'var(--ids-comp-divider-color-bg-light-default)' },
+      '.ids-divider.ids-divider-dark': { background: 'var(--ids-comp-divider-color-bg-dark-default)' },
+      '.ids-divider.ids-divider-surface': { background: 'var(--ids-comp-divider-color-bg-surface-default)' },
+      '.ids-message': { display: 'flex', justifyContent: 'flex-start', alignItems: 'center', fontStyle: 'normal' },
+      '.ids-message .ids-message__prefix': { display: 'flex' },
+      '.ids-message .ids-message__text': { flexGrow: 1, textAlign: 'start' },
+      '.ids-message.ids-message-compact': {
+        gap: 'var(--ids-comp-forms-message-size-gap-compact)',
+        padding: 'var(--ids-comp-forms-message-size-padding-y-compact) var(--ids-comp-forms-message-size-padding-x-compact)',
+        fontFamily: 'var(--ids-comp-forms-message-typography-font-family-compact)',
+        fontSize: 'var(--ids-comp-forms-message-typography-font-size-compact)',
+        fontWeight: 'var(--ids-comp-forms-message-typography-font-weight-compact)',
+        letterSpacing: 'var(--ids-comp-forms-message-typography-letter-spacing-compact)',
+        lineHeight: 'var(--ids-comp-forms-message-typography-line-height-compact)',
+      },
+      '.ids-message.ids-message-compact .ids-message__prefix': {
+        height: 'var(--ids-comp-forms-message-size-icon-height-compact)',
+        width: 'var(--ids-comp-forms-message-size-icon-width-compact)',
+      },
+      '.ids-message.ids-message-compact .ids-message__prefix>ids-icon': { height: 'inherit', width: 'inherit' },
+      '.ids-message.ids-message-comfortable': {
+        gap: 'var(--ids-comp-forms-message-size-gap-comfortable)',
+        padding: 'var(--ids-comp-forms-message-size-padding-y-comfortable) var(--ids-comp-forms-message-size-padding-x-comfortable)',
+        fontFamily: 'var(--ids-comp-forms-message-typography-font-family-comfortable)',
+        fontSize: 'var(--ids-comp-forms-message-typography-font-size-comfortable)',
+        fontWeight: 'var(--ids-comp-forms-message-typography-font-weight-comfortable)',
+        letterSpacing: 'var(--ids-comp-forms-message-typography-letter-spacing-comfortable)',
+        lineHeight: 'var(--ids-comp-forms-message-typography-line-height-comfortable)',
+      },
+      '.ids-message.ids-message-comfortable .ids-message__prefix': {
+        height: 'var(--ids-comp-forms-message-size-icon-height-comfortable)',
+        width: 'var(--ids-comp-forms-message-size-icon-width-comfortable)',
+      },
+      '.ids-message.ids-message-comfortable .ids-message__prefix>ids-icon': { height: 'inherit', width: 'inherit' },
+      '.ids-message.ids-message-spacious': {
+        gap: 'var(--ids-comp-forms-message-size-gap-spacious)',
+        padding: 'var(--ids-comp-forms-message-size-padding-y-spacious) var(--ids-comp-forms-message-size-padding-x-spacious)',
+        fontFamily: 'var(--ids-comp-forms-message-typography-font-family-spacious)',
+        fontSize: 'var(--ids-comp-forms-message-typography-font-size-spacious)',
+        fontWeight: 'var(--ids-comp-forms-message-typography-font-weight-spacious)',
+        letterSpacing: 'var(--ids-comp-forms-message-typography-letter-spacing-spacious)',
+        lineHeight: 'var(--ids-comp-forms-message-typography-line-height-spacious)',
+      },
+      '.ids-message.ids-message-spacious .ids-message__prefix': {
+        height: 'var(--ids-comp-forms-message-size-icon-height-spacious)',
+        width: 'var(--ids-comp-forms-message-size-icon-width-spacious)',
+      },
+      '.ids-message.ids-message-spacious .ids-message__prefix>ids-icon': { height: 'inherit', width: 'inherit' },
+      '.ids-message.ids-message-dense': {
+        gap: 'var(--ids-comp-forms-message-size-gap-dense)',
+        padding: 'var(--ids-comp-forms-message-size-padding-y-dense) var(--ids-comp-forms-message-size-padding-x-dense)',
+        fontFamily: 'var(--ids-comp-forms-message-typography-font-family-dense)',
+        fontSize: 'var(--ids-comp-forms-message-typography-font-size-dense)',
+        fontWeight: 'var(--ids-comp-forms-message-typography-font-weight-dense)',
+        letterSpacing: 'var(--ids-comp-forms-message-typography-letter-spacing-dense)',
+        lineHeight: 'var(--ids-comp-forms-message-typography-line-height-dense)',
+      },
+      '.ids-message.ids-message-dense .ids-message__prefix': {
+        height: 'var(--ids-comp-forms-message-size-icon-height-dense)',
+        width: 'var(--ids-comp-forms-message-size-icon-width-dense)',
+      },
+      '.ids-message.ids-message-dense .ids-message__prefix>ids-icon': { height: 'inherit', width: 'inherit' },
+      '.ids-message.ids-message-light .ids-message__prefix': { color: 'var(--ids-comp-forms-message-color-fg-icon-light-default)' },
+      '.ids-message.ids-message-light .ids-message__text,.ids-message.ids-message-light .ids-message__suffix': {
+        color: 'var(--ids-comp-forms-message-color-fg-text-light-default)',
+      },
+      '.ids-message.ids-message-light.ids-message-disabled .ids-message__prefix': {
+        color: 'var(--ids-comp-forms-message-color-fg-icon-light-disabled)',
+      },
+      '.ids-message.ids-message-light.ids-message-disabled .ids-message__text,.ids-message.ids-message-light.ids-message-disabled .ids-message__suffix':
+        { color: 'var(--ids-comp-forms-message-color-fg-text-light-disabled)' },
+      '.ids-message.ids-message-light.ids-error-message .ids-message__prefix': {
+        color: 'var(--ids-comp-forms-message-color-fg-icon-light-error-default)',
+      },
+      '.ids-message.ids-message-light.ids-error-message .ids-message__text,.ids-message.ids-message-light.ids-error-message .ids-message__suffix':
+        { color: 'var(--ids-comp-forms-message-color-fg-text-light-error-default)' },
+      '.ids-message.ids-success-message .ids-message__prefix': {
+        color: 'var(--ids-comp-forms-message-color-fg-icon-surface-success-default)',
+      },
+      '.ids-message.ids-success-message .ids-message__text,.ids-message.ids-success-message .ids-message__suffix': {
+        color: 'var(--ids-comp-forms-message-color-fg-text-surface-success-default)',
+      },
+      '.ids-message.ids-message-dark .ids-message__prefix': { color: 'var(--ids-comp-forms-message-color-fg-icon-dark-default)' },
+      '.ids-message.ids-message-dark .ids-message__text,.ids-message.ids-message-dark .ids-message__suffix': {
+        color: 'var(--ids-comp-forms-message-color-fg-text-dark-default)',
+      },
+      '.ids-message.ids-message-dark.ids-message-disabled .ids-message__prefix': {
+        color: 'var(--ids-comp-forms-message-color-fg-icon-dark-disabled)',
+      },
+      '.ids-message.ids-message-dark.ids-message-disabled .ids-message__text,.ids-message.ids-message-dark.ids-message-disabled .ids-message__suffix':
+        { color: 'var(--ids-comp-forms-message-color-fg-text-dark-disabled)' },
+      '.ids-message.ids-message-dark.ids-error-message .ids-message__prefix': {
+        color: 'var(--ids-comp-forms-message-color-fg-icon-dark-error-default)',
+      },
+      '.ids-message.ids-message-dark.ids-error-message .ids-message__text,.ids-message.ids-message-dark.ids-error-message .ids-message__suffix':
+        { color: 'var(--ids-comp-forms-message-color-fg-text-dark-error-default)' },
+      '.ids-message.ids-message-surface .ids-message__prefix': { color: 'var(--ids-comp-forms-message-color-fg-icon-surface-default)' },
+      '.ids-message.ids-message-surface .ids-message__text,.ids-message.ids-message-surface .ids-message__suffix': {
+        color: 'var(--ids-comp-forms-message-color-fg-text-surface-default)',
+      },
+      '.ids-message.ids-message-surface.ids-message-disabled .ids-message__prefix': {
+        color: 'var(--ids-comp-forms-message-color-fg-icon-surface-disabled)',
+      },
+      '.ids-message.ids-message-surface.ids-message-disabled .ids-message__text,.ids-message.ids-message-surface.ids-message-disabled .ids-message__suffix':
+        { color: 'var(--ids-comp-forms-message-color-fg-text-surface-disabled)' },
+      '.ids-message.ids-message-surface.ids-error-message .ids-message__prefix': {
+        color: 'var(--ids-comp-forms-message-color-fg-icon-surface-error-default)',
+      },
+      '.ids-message.ids-message-surface.ids-error-message .ids-message__text,.ids-message.ids-message-surface.ids-error-message .ids-message__suffix':
+        { color: 'var(--ids-comp-forms-message-color-fg-text-surface-error-default)' },
+      '.ids-form-field__required-marker::after': {
+        content: '"*"',
+        color: 'var(--ids-comp-forms-asterisk-color-fg-default)',
+        marginLeft: '1px',
+        marginRight: '0',
+      },
+      '.ids-icon-button': {
+        padding: '0px',
+        display: 'flex',
+        flexShrink: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderStyle: 'solid',
+      },
+      '.ids-icon-button:focus': {
+        outlineOffset: '2px',
+        outline:
+          'var(--ids-comp-icon-button-focused-outline-size-outline) solid var(--ids-comp-icon-button-focused-outline-color-dark-focused)',
+      },
+      '.ids-icon-button:focus.ids-icon-button-light': { outlineColor: 'var(--ids-comp-icon-button-focused-outline-color-light-focused)' },
+      '.ids-icon-button:active': { outline: 'none' },
+      '.ids-icon-button.ids-icon-button-compact': {
+        padding: 'var(--ids-comp-icon-button-size-padding-y-compact) var(--ids-comp-icon-button-size-padding-x-compact)',
+        width: 'var(--ids-comp-icon-button-size-width-compact)',
+        height: 'var(--ids-comp-icon-button-size-height-compact)',
+        borderRadius: 'var(--ids-comp-icon-button-size-border-radius-compact)',
+        borderWidth: 'var(--ids-comp-icon-button-size-border-compact)',
+      },
+      '.ids-icon-button.ids-icon-button-compact *[icon]': {
+        width: 'var(--ids-comp-icon-button-size-icon-compact)',
+        height: 'var(--ids-comp-icon-button-size-icon-compact)',
+      },
+      '.ids-icon-button.ids-icon-button-comfortable': {
+        padding: 'var(--ids-comp-icon-button-size-padding-y-comfortable) var(--ids-comp-icon-button-size-padding-x-comfortable)',
+        width: 'var(--ids-comp-icon-button-size-width-comfortable)',
+        height: 'var(--ids-comp-icon-button-size-height-comfortable)',
+        borderRadius: 'var(--ids-comp-icon-button-size-border-radius-comfortable)',
+        borderWidth: 'var(--ids-comp-icon-button-size-border-comfortable)',
+      },
+      '.ids-icon-button.ids-icon-button-comfortable *[icon]': {
+        width: 'var(--ids-comp-icon-button-size-icon-comfortable)',
+        height: 'var(--ids-comp-icon-button-size-icon-comfortable)',
+      },
+      '.ids-icon-button.ids-icon-button-spacious': {
+        padding: 'var(--ids-comp-icon-button-size-padding-y-spacious) var(--ids-comp-icon-button-size-padding-x-spacious)',
+        width: 'var(--ids-comp-icon-button-size-width-spacious)',
+        height: 'var(--ids-comp-icon-button-size-height-spacious)',
+        borderRadius: 'var(--ids-comp-icon-button-size-border-radius-spacious)',
+        borderWidth: 'var(--ids-comp-icon-button-size-border-spacious)',
+      },
+      '.ids-icon-button.ids-icon-button-spacious *[icon]': {
+        width: 'var(--ids-comp-icon-button-size-icon-spacious)',
+        height: 'var(--ids-comp-icon-button-size-icon-spacious)',
+      },
+      '.ids-icon-button.ids-icon-button-dense': {
+        padding: 'var(--ids-comp-icon-button-size-padding-y-dense) var(--ids-comp-icon-button-size-padding-x-dense)',
+        width: 'var(--ids-comp-icon-button-size-width-dense)',
+        height: 'var(--ids-comp-icon-button-size-height-dense)',
+        borderRadius: 'var(--ids-comp-icon-button-size-border-radius-dense)',
+        borderWidth: 'var(--ids-comp-icon-button-size-border-dense)',
+      },
+      '.ids-icon-button.ids-icon-button-dense *[icon]': {
+        width: 'var(--ids-comp-icon-button-size-icon-dense)',
+        height: 'var(--ids-comp-icon-button-size-icon-dense)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-primary': {
+        color: 'var(--ids-comp-icon-button-filled-color-fg-primary-default)',
+        background: 'var(--ids-comp-icon-button-filled-color-bg-primary-default)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-primary-default)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-primary:hover': {
+        background: 'var(--ids-comp-icon-button-filled-color-bg-primary-hovered)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-primary-hovered)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-primary:focus': {
+        background: 'var(--ids-comp-icon-button-filled-color-bg-primary-focused)',
+        color: 'var(--ids-comp-icon-button-filled-color-fg-primary-focused)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-primary-focused)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-primary:active': {
+        background: 'var(--ids-comp-icon-button-filled-color-bg-primary-pressed)',
+        color: 'var(--ids-comp-icon-button-filled-color-fg-primary-pressed)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-primary-pressed)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-primary:disabled': {
+        background: 'var(--ids-comp-icon-button-filled-color-bg-primary-disabled)',
+        color: 'var(--ids-comp-icon-button-filled-color-fg-primary-disabled)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-primary-disabled)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-secondary': {
+        color: 'var(--ids-comp-icon-button-filled-color-fg-secondary-default)',
+        background: 'var(--ids-comp-icon-button-filled-color-bg-secondary-default)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-secondary-default)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-secondary:hover': {
+        background: 'var(--ids-comp-icon-button-filled-color-bg-secondary-hovered)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-secondary-hovered)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-secondary:focus': {
+        background: 'var(--ids-comp-icon-button-filled-color-bg-secondary-focused)',
+        color: 'var(--ids-comp-icon-button-filled-color-fg-secondary-focused)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-secondary-focused)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-secondary:active': {
+        background: 'var(--ids-comp-icon-button-filled-color-bg-secondary-pressed)',
+        color: 'var(--ids-comp-icon-button-filled-color-fg-secondary-pressed)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-secondary-pressed)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-secondary:disabled': {
+        background: 'var(--ids-comp-icon-button-filled-color-bg-secondary-disabled)',
+        color: 'var(--ids-comp-icon-button-filled-color-fg-secondary-disabled)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-secondary-disabled)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-brand': {
+        color: 'var(--ids-comp-icon-button-filled-color-fg-brand-default)',
+        background: 'var(--ids-comp-icon-button-filled-color-bg-brand-default)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-brand-default)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-brand:hover': {
+        background: 'var(--ids-comp-icon-button-filled-color-bg-brand-hovered)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-brand-hovered)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-brand:focus': {
+        background: 'var(--ids-comp-icon-button-filled-color-bg-brand-focused)',
+        color: 'var(--ids-comp-icon-button-filled-color-fg-brand-focused)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-brand-focused)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-brand:active': {
+        background: 'var(--ids-comp-icon-button-filled-color-bg-brand-pressed)',
+        color: 'var(--ids-comp-icon-button-filled-color-fg-brand-pressed)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-brand-pressed)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-brand:disabled': {
+        background: 'var(--ids-comp-icon-button-filled-color-bg-brand-disabled)',
+        color: 'var(--ids-comp-icon-button-filled-color-fg-brand-disabled)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-brand-disabled)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-error': {
+        color: 'var(--ids-comp-icon-button-filled-color-fg-error-default)',
+        background: 'var(--ids-comp-icon-button-filled-color-bg-error-default)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-error-default)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-error:hover': {
+        background: 'var(--ids-comp-icon-button-filled-color-bg-error-hovered)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-error-hovered)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-error:focus': {
+        background: 'var(--ids-comp-icon-button-filled-color-bg-error-focused)',
+        color: 'var(--ids-comp-icon-button-filled-color-fg-error-focused)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-error-focused)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-error:active': {
+        background: 'var(--ids-comp-icon-button-filled-color-bg-error-pressed)',
+        color: 'var(--ids-comp-icon-button-filled-color-fg-error-pressed)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-error-pressed)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-error:disabled': {
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-error-disabled)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-success': {
+        color: 'var(--ids-comp-icon-button-filled-color-fg-success-default)',
+        background: 'var(--ids-comp-icon-button-filled-color-bg-success-default)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-success-default)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-success:hover': {
+        background: 'var(--ids-comp-icon-button-filled-color-bg-success-hovered)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-success-hovered)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-success:focus': {
+        background: 'var(--ids-comp-icon-button-filled-color-bg-success-focused)',
+        color: 'var(--ids-comp-icon-button-filled-color-fg-success-focused)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-success-focused)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-success:active': {
+        background: 'var(--ids-comp-icon-button-filled-color-bg-success-pressed)',
+        color: 'var(--ids-comp-icon-button-filled-color-fg-success-pressed)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-success-pressed)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-success:disabled': {
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-success-disabled)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-warning': {
+        color: 'var(--ids-comp-icon-button-filled-color-fg-warning-default)',
+        background: 'var(--ids-comp-icon-button-filled-color-bg-warning-default)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-warning-default)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-warning:hover': {
+        background: 'var(--ids-comp-icon-button-filled-color-bg-warning-hovered)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-warning-hovered)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-warning:focus': {
+        background: 'var(--ids-comp-icon-button-filled-color-bg-warning-focused)',
+        color: 'var(--ids-comp-icon-button-filled-color-fg-warning-focused)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-warning-focused)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-warning:active': {
+        background: 'var(--ids-comp-icon-button-filled-color-bg-warning-pressed)',
+        color: 'var(--ids-comp-icon-button-filled-color-fg-warning-pressed)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-warning-pressed)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-warning:disabled': {
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-warning-disabled)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-light': {
+        color: 'var(--ids-comp-icon-button-filled-color-fg-light-default)',
+        background: 'var(--ids-comp-icon-button-filled-color-bg-light-default)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-light-default)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-light:hover': {
+        background: 'var(--ids-comp-icon-button-filled-color-bg-light-hovered)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-light-hovered)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-light:focus': {
+        background: 'var(--ids-comp-icon-button-filled-color-bg-light-focused)',
+        color: 'var(--ids-comp-icon-button-filled-color-fg-light-focused)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-light-focused)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-light:active': {
+        background: 'var(--ids-comp-icon-button-filled-color-bg-light-pressed)',
+        color: 'var(--ids-comp-icon-button-filled-color-fg-light-pressed)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-light-pressed)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-light:disabled': {
+        background: 'var(--ids-comp-icon-button-filled-color-bg-light-disabled)',
+        color: 'var(--ids-comp-icon-button-filled-color-fg-light-disabled)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-light-disabled)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-dark': {
+        color: 'var(--ids-comp-icon-button-filled-color-fg-dark-default)',
+        background: 'var(--ids-comp-icon-button-filled-color-bg-dark-default)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-dark-default)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-dark:hover': {
+        background: 'var(--ids-comp-icon-button-filled-color-bg-dark-hovered)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-dark-hovered)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-dark:focus': {
+        background: 'var(--ids-comp-icon-button-filled-color-bg-dark-focused)',
+        color: 'var(--ids-comp-icon-button-filled-color-fg-dark-focused)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-dark-focused)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-dark:active': {
+        background: 'var(--ids-comp-icon-button-filled-color-bg-dark-pressed)',
+        color: 'var(--ids-comp-icon-button-filled-color-fg-dark-pressed)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-dark-pressed)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-dark:disabled': {
+        background: 'var(--ids-comp-icon-button-filled-color-bg-dark-disabled)',
+        color: 'var(--ids-comp-icon-button-filled-color-fg-dark-disabled)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-dark-disabled)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-surface': {
+        color: 'var(--ids-comp-icon-button-filled-color-fg-surface-default)',
+        background: 'var(--ids-comp-icon-button-filled-color-bg-surface-default)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-surface-default)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-surface:hover': {
+        background: 'var(--ids-comp-icon-button-filled-color-bg-surface-hovered)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-surface-hovered)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-surface:focus': {
+        background: 'var(--ids-comp-icon-button-filled-color-bg-surface-focused)',
+        color: 'var(--ids-comp-icon-button-filled-color-fg-surface-focused)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-surface-focused)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-surface:active': {
+        background: 'var(--ids-comp-icon-button-filled-color-bg-surface-pressed)',
+        color: 'var(--ids-comp-icon-button-filled-color-fg-surface-pressed)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-surface-pressed)',
+      },
+      '.ids-icon-button.ids-icon-button-filled.ids-icon-button-surface:disabled': {
+        background: 'var(--ids-comp-icon-button-filled-color-bg-surface-disabled)',
+        color: 'var(--ids-comp-icon-button-filled-color-fg-surface-disabled)',
+        borderColor: 'var(--ids-comp-icon-button-filled-color-border-surface-disabled)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-primary': {
+        color: 'var(--ids-comp-icon-button-outlined-color-fg-primary-default)',
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-primary-default)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-primary-default)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-primary:hover': {
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-primary-hovered)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-primary-hovered)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-primary:focus': {
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-primary-focused)',
+        color: 'var(--ids-comp-icon-button-outlined-color-fg-primary-focused)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-primary-focused)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-primary:active': {
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-primary-pressed)',
+        color: 'var(--ids-comp-icon-button-outlined-color-fg-primary-pressed)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-primary-pressed)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-primary:disabled': {
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-primary-disabled)',
+        color: 'var(--ids-comp-icon-button-outlined-color-fg-primary-disabled)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-primary-disabled)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-secondary': {
+        color: 'var(--ids-comp-icon-button-outlined-color-fg-secondary-default)',
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-secondary-default)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-secondary-default)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-secondary:hover': {
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-secondary-hovered)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-secondary-hovered)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-secondary:focus': {
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-secondary-focused)',
+        color: 'var(--ids-comp-icon-button-outlined-color-fg-secondary-focused)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-secondary-focused)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-secondary:active': {
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-secondary-pressed)',
+        color: 'var(--ids-comp-icon-button-outlined-color-fg-secondary-pressed)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-secondary-pressed)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-secondary:disabled': {
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-secondary-disabled)',
+        color: 'var(--ids-comp-icon-button-outlined-color-fg-secondary-disabled)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-secondary-disabled)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-brand': {
+        color: 'var(--ids-comp-icon-button-outlined-color-fg-brand-default)',
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-brand-default)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-brand-default)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-brand:hover': {
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-brand-hovered)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-brand-hovered)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-brand:focus': {
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-brand-focused)',
+        color: 'var(--ids-comp-icon-button-outlined-color-fg-brand-focused)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-brand-focused)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-brand:active': {
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-brand-pressed)',
+        color: 'var(--ids-comp-icon-button-outlined-color-fg-brand-pressed)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-brand-pressed)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-brand:disabled': {
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-brand-disabled)',
+        color: 'var(--ids-comp-icon-button-outlined-color-fg-brand-disabled)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-brand-disabled)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-error': {
+        color: 'var(--ids-comp-icon-button-outlined-color-fg-error-default)',
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-error-default)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-error-default)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-error:hover': {
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-error-hovered)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-error-hovered)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-error:focus': {
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-error-focused)',
+        color: 'var(--ids-comp-icon-button-outlined-color-fg-error-focused)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-error-focused)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-error:active': {
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-error-pressed)',
+        color: 'var(--ids-comp-icon-button-outlined-color-fg-error-pressed)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-error-pressed)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-error:disabled': {
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-error-disabled)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-success': {
+        color: 'var(--ids-comp-icon-button-outlined-color-fg-success-default)',
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-success-default)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-success-default)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-success:hover': {
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-success-hovered)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-success-hovered)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-success:focus': {
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-success-focused)',
+        color: 'var(--ids-comp-icon-button-outlined-color-fg-success-focused)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-success-focused)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-success:active': {
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-success-pressed)',
+        color: 'var(--ids-comp-icon-button-outlined-color-fg-success-pressed)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-success-pressed)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-success:disabled': {
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-success-disabled)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-warning': {
+        color: 'var(--ids-comp-icon-button-outlined-color-fg-warning-default)',
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-warning-default)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-warning-default)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-warning:hover': {
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-warning-hovered)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-warning-hovered)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-warning:focus': {
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-warning-focused)',
+        color: 'var(--ids-comp-icon-button-outlined-color-fg-warning-focused)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-warning-focused)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-warning:active': {
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-warning-pressed)',
+        color: 'var(--ids-comp-icon-button-outlined-color-fg-warning-pressed)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-warning-pressed)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-warning:disabled': {
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-warning-disabled)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-light': {
+        color: 'var(--ids-comp-icon-button-outlined-color-fg-light-default)',
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-light-default)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-light-default)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-light:hover': {
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-light-hovered)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-light-hovered)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-light:focus': {
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-light-focused)',
+        color: 'var(--ids-comp-icon-button-outlined-color-fg-light-focused)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-light-focused)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-light:active': {
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-light-pressed)',
+        color: 'var(--ids-comp-icon-button-outlined-color-fg-light-pressed)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-light-pressed)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-light:disabled': {
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-light-disabled)',
+        color: 'var(--ids-comp-icon-button-outlined-color-fg-light-disabled)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-light-disabled)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-dark': {
+        color: 'var(--ids-comp-icon-button-outlined-color-fg-dark-default)',
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-dark-default)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-dark-default)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-dark:hover': {
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-dark-hovered)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-dark-hovered)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-dark:focus': {
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-dark-focused)',
+        color: 'var(--ids-comp-icon-button-outlined-color-fg-dark-focused)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-dark-focused)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-dark:active': {
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-dark-pressed)',
+        color: 'var(--ids-comp-icon-button-outlined-color-fg-dark-pressed)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-dark-pressed)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-dark:disabled': {
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-dark-disabled)',
+        color: 'var(--ids-comp-icon-button-outlined-color-fg-dark-disabled)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-dark-disabled)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-surface': {
+        color: 'var(--ids-comp-icon-button-outlined-color-fg-surface-default)',
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-surface-default)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-surface-default)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-surface:hover': {
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-surface-hovered)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-surface-hovered)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-surface:focus': {
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-surface-focused)',
+        color: 'var(--ids-comp-icon-button-outlined-color-fg-surface-focused)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-surface-focused)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-surface:active': {
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-surface-pressed)',
+        color: 'var(--ids-comp-icon-button-outlined-color-fg-surface-pressed)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-surface-pressed)',
+      },
+      '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-surface:disabled': {
+        background: 'var(--ids-comp-icon-button-outlined-color-bg-surface-disabled)',
+        color: 'var(--ids-comp-icon-button-outlined-color-fg-surface-disabled)',
+        borderColor: 'var(--ids-comp-icon-button-outlined-color-border-surface-disabled)',
+      },
+      '.ids-icon-button.ids-icon-button-standard': { border: 'none' },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-primary': {
+        color: 'var(--ids-comp-icon-button-standard-color-fg-primary-default)',
+        background: 'var(--ids-comp-icon-button-standard-color-bg-primary-default)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-primary:hover': {
+        background: 'var(--ids-comp-icon-button-standard-color-bg-primary-hovered)',
+        color: 'var(--ids-comp-icon-button-standard-color-fg-primary-hovered)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-primary:focus': {
+        background: 'var(--ids-comp-icon-button-standard-color-bg-primary-focused)',
+        color: 'var(--ids-comp-icon-button-standard-color-fg-primary-focused)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-primary:active': {
+        background: 'var(--ids-comp-icon-button-standard-color-bg-primary-pressed)',
+        color: 'var(--ids-comp-icon-button-standard-color-fg-primary-pressed)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-primary:disabled': {
+        background: 'var(--ids-comp-icon-button-standard-color-bg-primary-disabled)',
+        color: 'var(--ids-comp-icon-button-standard-color-fg-primary-disabled)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-secondary': {
+        color: 'var(--ids-comp-icon-button-standard-color-fg-secondary-default)',
+        background: 'var(--ids-comp-icon-button-standard-color-bg-secondary-default)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-secondary:hover': {
+        background: 'var(--ids-comp-icon-button-standard-color-bg-secondary-hovered)',
+        color: 'var(--ids-comp-icon-button-standard-color-fg-secondary-hovered)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-secondary:focus': {
+        background: 'var(--ids-comp-icon-button-standard-color-bg-secondary-focused)',
+        color: 'var(--ids-comp-icon-button-standard-color-fg-secondary-focused)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-secondary:active': {
+        background: 'var(--ids-comp-icon-button-standard-color-bg-secondary-pressed)',
+        color: 'var(--ids-comp-icon-button-standard-color-fg-secondary-pressed)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-secondary:disabled': {
+        background: 'var(--ids-comp-icon-button-standard-color-bg-secondary-disabled)',
+        color: 'var(--ids-comp-icon-button-standard-color-fg-secondary-disabled)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-brand': {
+        color: 'var(--ids-comp-icon-button-standard-color-fg-brand-default)',
+        background: 'var(--ids-comp-icon-button-standard-color-bg-brand-default)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-brand:hover': {
+        background: 'var(--ids-comp-icon-button-standard-color-bg-brand-hovered)',
+        color: 'var(--ids-comp-icon-button-standard-color-fg-brand-hovered)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-brand:focus': {
+        background: 'var(--ids-comp-icon-button-standard-color-bg-brand-focused)',
+        color: 'var(--ids-comp-icon-button-standard-color-fg-brand-focused)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-brand:active': {
+        background: 'var(--ids-comp-icon-button-standard-color-bg-brand-pressed)',
+        color: 'var(--ids-comp-icon-button-standard-color-fg-brand-pressed)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-brand:disabled': {
+        background: 'var(--ids-comp-icon-button-standard-color-bg-brand-disabled)',
+        color: 'var(--ids-comp-icon-button-standard-color-fg-brand-disabled)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-error': {
+        color: 'var(--ids-comp-icon-button-standard-color-fg-error-default)',
+        background: 'var(--ids-comp-icon-button-standard-color-bg-error-default)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-error:hover': {
+        background: 'var(--ids-comp-icon-button-standard-color-bg-error-hovered)',
+        color: 'var(--ids-comp-icon-button-standard-color-fg-error-hovered)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-error:focus': {
+        background: 'var(--ids-comp-icon-button-standard-color-bg-error-focused)',
+        color: 'var(--ids-comp-icon-button-standard-color-fg-error-focused)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-error:active': {
+        background: 'var(--ids-comp-icon-button-standard-color-bg-error-pressed)',
+        color: 'var(--ids-comp-icon-button-standard-color-fg-error-pressed)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-success': {
+        color: 'var(--ids-comp-icon-button-standard-color-fg-success-default)',
+        background: 'var(--ids-comp-icon-button-standard-color-bg-success-default)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-success:hover': {
+        background: 'var(--ids-comp-icon-button-standard-color-bg-success-hovered)',
+        color: 'var(--ids-comp-icon-button-standard-color-fg-success-hovered)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-success:focus': {
+        background: 'var(--ids-comp-icon-button-standard-color-bg-success-focused)',
+        color: 'var(--ids-comp-icon-button-standard-color-fg-success-focused)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-success:active': {
+        background: 'var(--ids-comp-icon-button-standard-color-bg-success-pressed)',
+        color: 'var(--ids-comp-icon-button-standard-color-fg-success-pressed)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-warning': {
+        color: 'var(--ids-comp-icon-button-standard-color-fg-warning-default)',
+        background: 'var(--ids-comp-icon-button-standard-color-bg-warning-default)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-warning:hover': {
+        background: 'var(--ids-comp-icon-button-standard-color-bg-warning-hovered)',
+        color: 'var(--ids-comp-icon-button-standard-color-fg-warning-hovered)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-warning:focus': {
+        background: 'var(--ids-comp-icon-button-standard-color-bg-warning-focused)',
+        color: 'var(--ids-comp-icon-button-standard-color-fg-warning-focused)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-warning:active': {
+        background: 'var(--ids-comp-icon-button-standard-color-bg-warning-pressed)',
+        color: 'var(--ids-comp-icon-button-standard-color-fg-warning-pressed)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-light': {
+        color: 'var(--ids-comp-icon-button-standard-color-fg-light-default)',
+        background: 'var(--ids-comp-icon-button-standard-color-bg-light-default)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-light:hover': {
+        background: 'var(--ids-comp-icon-button-standard-color-bg-light-hovered)',
+        color: 'var(--ids-comp-icon-button-standard-color-fg-light-hovered)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-light:focus': {
+        background: 'var(--ids-comp-icon-button-standard-color-bg-light-focused)',
+        color: 'var(--ids-comp-icon-button-standard-color-fg-light-focused)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-light:active': {
+        background: 'var(--ids-comp-icon-button-standard-color-bg-light-pressed)',
+        color: 'var(--ids-comp-icon-button-standard-color-fg-light-pressed)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-light:disabled': {
+        background: 'var(--ids-comp-icon-button-standard-color-bg-light-disabled)',
+        color: 'var(--ids-comp-icon-button-standard-color-fg-light-disabled)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-dark': {
+        color: 'var(--ids-comp-icon-button-standard-color-fg-dark-default)',
+        background: 'var(--ids-comp-icon-button-standard-color-bg-dark-default)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-dark:hover': {
+        background: 'var(--ids-comp-icon-button-standard-color-bg-dark-hovered)',
+        color: 'var(--ids-comp-icon-button-standard-color-fg-dark-hovered)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-dark:focus': {
+        background: 'var(--ids-comp-icon-button-standard-color-bg-dark-focused)',
+        color: 'var(--ids-comp-icon-button-standard-color-fg-dark-focused)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-dark:active': {
+        background: 'var(--ids-comp-icon-button-standard-color-bg-dark-pressed)',
+        color: 'var(--ids-comp-icon-button-standard-color-fg-dark-pressed)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-dark:disabled': {
+        background: 'var(--ids-comp-icon-button-standard-color-bg-dark-disabled)',
+        color: 'var(--ids-comp-icon-button-standard-color-fg-dark-disabled)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-surface': {
+        color: 'var(--ids-comp-icon-button-standard-color-fg-surface-default)',
+        background: 'var(--ids-comp-icon-button-standard-color-bg-surface-default)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-surface:hover': {
+        background: 'var(--ids-comp-icon-button-standard-color-bg-surface-hovered)',
+        color: 'var(--ids-comp-icon-button-standard-color-fg-surface-hovered)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-surface:focus': {
+        background: 'var(--ids-comp-icon-button-standard-color-bg-surface-focused)',
+        color: 'var(--ids-comp-icon-button-standard-color-fg-surface-focused)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-surface:active': {
+        background: 'var(--ids-comp-icon-button-standard-color-bg-surface-pressed)',
+        color: 'var(--ids-comp-icon-button-standard-color-fg-surface-pressed)',
+      },
+      '.ids-icon-button.ids-icon-button-standard.ids-icon-button-surface:disabled': {
+        background: 'var(--ids-comp-icon-button-standard-color-bg-surface-disabled)',
+        color: 'var(--ids-comp-icon-button-standard-color-fg-surface-disabled)',
+      },
+      '.ids-tag': {
+        flexShrink: 0,
+        width: 'fit-content',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderStyle: 'solid',
+        boxSizing: 'border-box',
+      },
+      '.ids-tag:focus': {
+        outlineOffset: '2px',
+        outline: 'var(--ids-comp-tag-focused-outline-size-outline) solid var(--ids-comp-tag-focused-outline-color-dark-focused)',
+      },
+      '.ids-tag:focus.ids-tag-light': { outlineColor: 'var(--ids-comp-tag-focused-outline-color-light-focused)' },
+      '.ids-tag:active': { outline: 'none' },
+      '.ids-tag *[icon-leading],.ids-tag *[icon-trailing]': {
+        gap: '10px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      '.ids-tag.ids-tag-compact': {
+        gap: 'var(--ids-comp-tag-size-gap-compact)',
+        height: 'var(--ids-comp-tag-size-height-compact)',
+        padding: 'var(--ids-comp-tag-size-padding-y-compact) var(--ids-comp-tag-size-padding-x-compact)',
+        borderRadius: 'var(--ids-comp-tag-size-border-radius-compact)',
+        border: 'var(--ids-comp-tag-size-border-width-compact)',
+      },
+      '.ids-tag.ids-tag-compact>.ids-tag-label': {
+        fontFamily: 'var(--ids-comp-tag-label-typography-font-family-compact)',
+        fontSize: 'var(--ids-comp-tag-label-typography-font-size-compact)',
+        fontWeight: 'var(--ids-comp-tag-label-typography-font-weight-compact)',
+        letterSpacing: 'var(--ids-comp-tag-label-typography-letter-spacing-compact)',
+        lineHeight: 'var(--ids-comp-tag-label-typography-line-height-compact)',
+      },
+      '.ids-tag.ids-tag-compact *[icon-leading],.ids-tag.ids-tag-compact *[icon-trailing]': {
+        width: 'var(--ids-comp-tag-size-icon-compact)',
+        height: 'var(--ids-comp-tag-size-icon-compact)',
+      },
+      '.ids-tag.ids-tag-comfortable': {
+        gap: 'var(--ids-comp-tag-size-gap-comfortable)',
+        height: 'var(--ids-comp-tag-size-height-comfortable)',
+        padding: 'var(--ids-comp-tag-size-padding-y-comfortable) var(--ids-comp-tag-size-padding-x-comfortable)',
+        borderRadius: 'var(--ids-comp-tag-size-border-radius-comfortable)',
+        border: 'var(--ids-comp-tag-size-border-width-comfortable)',
+      },
+      '.ids-tag.ids-tag-comfortable>.ids-tag-label': {
+        fontFamily: 'var(--ids-comp-tag-label-typography-font-family-comfortable)',
+        fontSize: 'var(--ids-comp-tag-label-typography-font-size-comfortable)',
+        fontWeight: 'var(--ids-comp-tag-label-typography-font-weight-comfortable)',
+        letterSpacing: 'var(--ids-comp-tag-label-typography-letter-spacing-comfortable)',
+        lineHeight: 'var(--ids-comp-tag-label-typography-line-height-comfortable)',
+      },
+      '.ids-tag.ids-tag-comfortable *[icon-leading],.ids-tag.ids-tag-comfortable *[icon-trailing]': {
+        width: 'var(--ids-comp-tag-size-icon-comfortable)',
+        height: 'var(--ids-comp-tag-size-icon-comfortable)',
+      },
+      '.ids-tag.ids-tag-spacious': {
+        gap: 'var(--ids-comp-tag-size-gap-spacious)',
+        height: 'var(--ids-comp-tag-size-height-spacious)',
+        padding: 'var(--ids-comp-tag-size-padding-y-spacious) var(--ids-comp-tag-size-padding-x-spacious)',
+        borderRadius: 'var(--ids-comp-tag-size-border-radius-spacious)',
+        border: 'var(--ids-comp-tag-size-border-width-spacious)',
+      },
+      '.ids-tag.ids-tag-spacious>.ids-tag-label': {
+        fontFamily: 'var(--ids-comp-tag-label-typography-font-family-spacious)',
+        fontSize: 'var(--ids-comp-tag-label-typography-font-size-spacious)',
+        fontWeight: 'var(--ids-comp-tag-label-typography-font-weight-spacious)',
+        letterSpacing: 'var(--ids-comp-tag-label-typography-letter-spacing-spacious)',
+        lineHeight: 'var(--ids-comp-tag-label-typography-line-height-spacious)',
+      },
+      '.ids-tag.ids-tag-spacious *[icon-leading],.ids-tag.ids-tag-spacious *[icon-trailing]': {
+        width: 'var(--ids-comp-tag-size-icon-spacious)',
+        height: 'var(--ids-comp-tag-size-icon-spacious)',
+      },
+      '.ids-tag.ids-tag-dense': {
+        gap: 'var(--ids-comp-tag-size-gap-dense)',
+        height: 'var(--ids-comp-tag-size-height-dense)',
+        padding: 'var(--ids-comp-tag-size-padding-y-dense) var(--ids-comp-tag-size-padding-x-dense)',
+        borderRadius: 'var(--ids-comp-tag-size-border-radius-dense)',
+        border: 'var(--ids-comp-tag-size-border-width-dense)',
+      },
+      '.ids-tag.ids-tag-dense>.ids-tag-label': {
+        fontFamily: 'var(--ids-comp-tag-label-typography-font-family-dense)',
+        fontSize: 'var(--ids-comp-tag-label-typography-font-size-dense)',
+        fontWeight: 'var(--ids-comp-tag-label-typography-font-weight-dense)',
+        letterSpacing: 'var(--ids-comp-tag-label-typography-letter-spacing-dense)',
+        lineHeight: 'var(--ids-comp-tag-label-typography-line-height-dense)',
+      },
+      '.ids-tag.ids-tag-dense *[icon-leading],.ids-tag.ids-tag-dense *[icon-trailing]': {
+        width: 'var(--ids-comp-tag-size-icon-dense)',
+        height: 'var(--ids-comp-tag-size-icon-dense)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-primary': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-primary-default)',
+        background: 'var(--ids-comp-tag-filled-color-bg-primary-default)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-primary-default)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-primary:hover': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-primary-hovered)',
+        background: 'var(--ids-comp-tag-filled-color-bg-primary-hovered)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-primary-hovered)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-primary:focus': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-primary-focused)',
+        background: 'var(--ids-comp-tag-filled-color-bg-primary-focused)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-primary-focused)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-primary:active': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-primary-pressed)',
+        background: 'var(--ids-comp-tag-filled-color-bg-primary-pressed)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-primary-pressed)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-secondary': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-default)',
+        background: 'var(--ids-comp-tag-filled-color-bg-secondary-default)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-default)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-secondary:hover': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-hovered)',
+        background: 'var(--ids-comp-tag-filled-color-bg-secondary-hovered)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-hovered)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-secondary:focus': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-focused)',
+        background: 'var(--ids-comp-tag-filled-color-bg-secondary-focused)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-focused)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-secondary:active': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-pressed)',
+        background: 'var(--ids-comp-tag-filled-color-bg-secondary-pressed)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-pressed)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-brand': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-brand-default)',
+        background: 'var(--ids-comp-tag-filled-color-bg-brand-default)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-brand-default)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-brand:hover': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-brand-hovered)',
+        background: 'var(--ids-comp-tag-filled-color-bg-brand-hovered)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-brand-hovered)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-brand:focus': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-brand-focused)',
+        background: 'var(--ids-comp-tag-filled-color-bg-brand-focused)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-brand-focused)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-brand:active': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-brand-pressed)',
+        background: 'var(--ids-comp-tag-filled-color-bg-brand-pressed)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-brand-pressed)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-error': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-error-default)',
+        background: 'var(--ids-comp-tag-filled-color-bg-error-default)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-error-default)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-error:hover': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-error-hovered)',
+        background: 'var(--ids-comp-tag-filled-color-bg-error-hovered)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-error-hovered)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-error:focus': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-error-focused)',
+        background: 'var(--ids-comp-tag-filled-color-bg-error-focused)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-error-focused)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-error:active': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-error-pressed)',
+        background: 'var(--ids-comp-tag-filled-color-bg-error-pressed)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-error-pressed)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-success': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-success-default)',
+        background: 'var(--ids-comp-tag-filled-color-bg-success-default)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-success-default)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-success:hover': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-success-hovered)',
+        background: 'var(--ids-comp-tag-filled-color-bg-success-hovered)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-success-hovered)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-success:focus': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-success-focused)',
+        background: 'var(--ids-comp-tag-filled-color-bg-success-focused)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-success-focused)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-success:active': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-success-pressed)',
+        background: 'var(--ids-comp-tag-filled-color-bg-success-pressed)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-success-pressed)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-warning': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-warning-default)',
+        background: 'var(--ids-comp-tag-filled-color-bg-warning-default)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-warning-default)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-warning:hover': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-warning-hovered)',
+        background: 'var(--ids-comp-tag-filled-color-bg-warning-hovered)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-warning-hovered)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-warning:focus': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-warning-focused)',
+        background: 'var(--ids-comp-tag-filled-color-bg-warning-focused)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-warning-focused)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-warning:active': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-warning-pressed)',
+        background: 'var(--ids-comp-tag-filled-color-bg-warning-pressed)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-warning-pressed)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-light': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-light-default)',
+        background: 'var(--ids-comp-tag-filled-color-bg-light-default)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-light-default)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-light:hover': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-light-hovered)',
+        background: 'var(--ids-comp-tag-filled-color-bg-light-hovered)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-light-hovered)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-light:focus': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-light-focused)',
+        background: 'var(--ids-comp-tag-filled-color-bg-light-focused)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-light-focused)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-light:active': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-light-pressed)',
+        background: 'var(--ids-comp-tag-filled-color-bg-light-pressed)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-light-pressed)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-dark': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-dark-default)',
+        background: 'var(--ids-comp-tag-filled-color-bg-dark-default)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-dark-default)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-dark:hover': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-dark-hovered)',
+        background: 'var(--ids-comp-tag-filled-color-bg-dark-hovered)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-dark-hovered)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-dark:focus': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-dark-focused)',
+        background: 'var(--ids-comp-tag-filled-color-bg-dark-focused)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-dark-focused)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-dark:active': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-dark-pressed)',
+        background: 'var(--ids-comp-tag-filled-color-bg-dark-pressed)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-dark-pressed)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-surface': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-surface-default)',
+        background: 'var(--ids-comp-tag-filled-color-bg-surface-default)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-surface-default)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-surface:hover': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-surface-hovered)',
+        background: 'var(--ids-comp-tag-filled-color-bg-surface-hovered)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-surface-hovered)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-surface:focus': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-surface-focused)',
+        background: 'var(--ids-comp-tag-filled-color-bg-surface-focused)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-surface-focused)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-surface:active': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-surface-pressed)',
+        background: 'var(--ids-comp-tag-filled-color-bg-surface-pressed)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-surface-pressed)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-primary': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-default)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-primary-default)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-default)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-primary:hover': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-hovered)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-primary-hovered)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-hovered)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-primary:focus': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-focused)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-primary-focused)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-focused)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-primary:active': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-pressed)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-primary-pressed)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-pressed)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-secondary': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-default)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-secondary-default)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-default)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-secondary:hover': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-hovered)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-secondary-hovered)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-hovered)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-secondary:focus': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-focused)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-secondary-focused)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-focused)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-secondary:active': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-pressed)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-secondary-pressed)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-pressed)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-brand': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-default)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-brand-default)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-default)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-brand:hover': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-hovered)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-brand-hovered)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-hovered)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-brand:focus': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-focused)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-brand-focused)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-focused)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-brand:active': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-pressed)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-brand-pressed)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-pressed)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-error': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-error-default)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-error-default)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-error-default)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-error:hover': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-error-hovered)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-error-hovered)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-error-hovered)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-error:focus': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-error-focused)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-error-focused)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-error-focused)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-error:active': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-error-pressed)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-error-pressed)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-error-pressed)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-success': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-success-default)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-success-default)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-success-default)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-success:hover': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-success-hovered)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-success-hovered)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-success-hovered)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-success:focus': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-success-focused)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-success-focused)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-success-focused)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-success:active': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-success-pressed)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-success-pressed)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-success-pressed)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-warning': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-default)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-warning-default)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-default)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-warning:hover': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-hovered)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-warning-hovered)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-hovered)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-warning:focus': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-focused)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-warning-focused)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-focused)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-warning:active': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-pressed)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-warning-pressed)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-pressed)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-light': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-light-default)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-light-default)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-light-default)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-light:hover': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-light-hovered)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-light-hovered)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-light-hovered)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-light:focus': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-light-focused)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-light-focused)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-light-focused)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-light:active': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-light-pressed)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-light-pressed)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-light-pressed)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-dark': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-default)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-dark-default)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-default)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-dark:hover': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-hovered)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-dark-hovered)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-hovered)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-dark:focus': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-focused)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-dark-focused)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-focused)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-dark:active': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-pressed)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-dark-pressed)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-pressed)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-surface': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-default)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-surface-default)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-default)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-surface:hover': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-hovered)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-surface-hovered)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-hovered)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-surface:focus': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-focused)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-surface-focused)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-focused)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-surface:active': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-pressed)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-surface-pressed)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-pressed)',
+      },
+    };
+    addComponents(cssObj);
+  };
+};