npm - @i-cell/ids-styles - Versions diffs - 0.0.17 → 0.0.18 - Mend

@i-cell/ids-styles 0.0.17 → 0.0.18

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 (16) hide show

package/dist/accordion/accordion.css +7 -20
package/dist/accordion/accordion.min.css +1 -1
package/dist/accordion/accordion.plugin.js +4 -21
package/dist/avatar/avatar.css +0 -3
package/dist/avatar/avatar.min.css +1 -1
package/dist/avatar/avatar.plugin.js +0 -1
package/dist/chip/chip.css +696 -0
package/dist/chip/chip.min.css +1 -0
package/dist/chip/chip.plugin.js +675 -0
package/dist/components.css +1506 -824
package/dist/components.min.css +1 -1
package/dist/components.plugin.js +2024 -1376
package/dist/select/select.css +1 -0
package/dist/select/select.min.css +1 -1
package/dist/select/select.plugin.js +1 -1
package/package.json +1 -1

package/dist/components.plugin.js CHANGED Viewed

@@ -2,7 +2,7 @@
 module.exports = function ComponentsPlugin() {
   return function ({ addComponents }) {
     const cssObj = {
-      '.ids-accordion': { display: 'flex', width: '100%', flexDirection: 'column', alignItems: 'flex-start' },
+      '.ids-accordion': { display: 'flex', width: '100%', flexDirection: 'column', alignItems: 'flex-start', borderStyle: 'solid' },
       '.ids-accordion>.ids-accordion-controls': { display: 'flex', alignItems: 'flex-start', alignSelf: 'stretch' },
       '.ids-accordion>.ids-accordion-item': {
         display: 'flex',
@@ -16,7 +16,10 @@ module.exports = function ComponentsPlugin() {
         alignItems: 'center',
         width: '100%',
         flex: '1 0 0',
+        borderStyle: 'solid',
       },
+      '.ids-accordion>.ids-accordion-item>.ids-accordion-item-summary:focus,.ids-accordion>.ids-accordion-item>.ids-accordion-item-summary:focus-visible':
+        { outlineOffset: '2px', outlineStyle: 'solid', zIndex: 1 },
       '.ids-accordion>.ids-accordion-item>.ids-accordion-item-summary>.ids-accordion-item-title': {
         flex: '1 0 0',
         whiteSpace: 'nowrap',
@@ -38,7 +41,6 @@ module.exports = function ComponentsPlugin() {
         gap: 'var(--ids-comp-accordion-container-size-gap-compact)',
         borderRadius: 'var(--ids-comp-accordion-container-size-border-radius-compact)',
         borderWidth: 'var(--ids-comp-accordion-container-size-border-width-compact)',
-        borderStyle: 'solid',
       },
       '.ids-accordion.ids-accordion-compact>.ids-accordion-controls': {
         padding: 'var(--ids-comp-accordion-controls-size-padding-y-compact) var(--ids-comp-accordion-controls-size-padding-x-compact)',
@@ -54,15 +56,11 @@ module.exports = function ComponentsPlugin() {
         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)',
-        borderStyle: 'solid',
       },
       '.ids-accordion.ids-accordion-compact>.ids-accordion-item>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-compact>.ids-accordion-item>.ids-accordion-item-summary:focus-visible':
         {
-          outlineOffset: '2px',
           outlineWidth: 'var(--ids-comp-accordion-summary-focused-outline-size-outline-compact)',
-          outlineStyle: 'solid',
           outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)',
-          zIndex: 1,
         },
       '.ids-accordion.ids-accordion-compact>.ids-accordion-item>.ids-accordion-item-summary>.ids-accordion-item-title': {
         fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-compact)',
@@ -88,7 +86,6 @@ module.exports = function ComponentsPlugin() {
         gap: 'var(--ids-comp-accordion-container-size-gap-comfortable)',
         borderRadius: 'var(--ids-comp-accordion-container-size-border-radius-comfortable)',
         borderWidth: 'var(--ids-comp-accordion-container-size-border-width-comfortable)',
-        borderStyle: 'solid',
       },
       '.ids-accordion.ids-accordion-comfortable>.ids-accordion-controls': {
         padding:
@@ -106,15 +103,11 @@ module.exports = function ComponentsPlugin() {
         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)',
-        borderStyle: 'solid',
       },
       '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>.ids-accordion-item-summary:focus-visible':
         {
-          outlineOffset: '2px',
           outlineWidth: 'var(--ids-comp-accordion-summary-focused-outline-size-outline-comfortable)',
-          outlineStyle: 'solid',
           outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)',
-          zIndex: 1,
         },
       '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>.ids-accordion-item-summary>.ids-accordion-item-title': {
         fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-comfortable)',
@@ -140,7 +133,6 @@ module.exports = function ComponentsPlugin() {
         gap: 'var(--ids-comp-accordion-container-size-gap-spacious)',
         borderRadius: 'var(--ids-comp-accordion-container-size-border-radius-spacious)',
         borderWidth: 'var(--ids-comp-accordion-container-size-border-width-spacious)',
-        borderStyle: 'solid',
       },
       '.ids-accordion.ids-accordion-spacious>.ids-accordion-controls': {
         padding: 'var(--ids-comp-accordion-controls-size-padding-y-spacious) var(--ids-comp-accordion-controls-size-padding-x-spacious)',
@@ -156,15 +148,11 @@ module.exports = function ComponentsPlugin() {
         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)',
-        borderStyle: 'solid',
       },
       '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-spacious>.ids-accordion-item>.ids-accordion-item-summary:focus-visible':
         {
-          outlineOffset: '2px',
           outlineWidth: 'var(--ids-comp-accordion-summary-focused-outline-size-outline-spacious)',
-          outlineStyle: 'solid',
           outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)',
-          zIndex: 1,
         },
       '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>.ids-accordion-item-summary>.ids-accordion-item-title': {
         fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-spacious)',
@@ -189,7 +177,6 @@ module.exports = function ComponentsPlugin() {
         gap: 'var(--ids-comp-accordion-container-size-gap-dense)',
         borderRadius: 'var(--ids-comp-accordion-container-size-border-radius-dense)',
         borderWidth: 'var(--ids-comp-accordion-container-size-border-width-dense)',
-        borderStyle: 'solid',
       },
       '.ids-accordion.ids-accordion-dense>.ids-accordion-controls': {
         padding: 'var(--ids-comp-accordion-controls-size-padding-y-dense) var(--ids-comp-accordion-controls-size-padding-x-dense)',
@@ -205,15 +192,11 @@ module.exports = function ComponentsPlugin() {
         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)',
-        borderStyle: 'solid',
       },
       '.ids-accordion.ids-accordion-dense>.ids-accordion-item>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-dense>.ids-accordion-item>.ids-accordion-item-summary:focus-visible':
         {
-          outlineOffset: '2px',
           outlineWidth: 'var(--ids-comp-accordion-summary-focused-outline-size-outline-dense)',
-          outlineStyle: 'solid',
           outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)',
-          zIndex: 1,
         },
       '.ids-accordion.ids-accordion-dense>.ids-accordion-item>.ids-accordion-item-summary>.ids-accordion-item-title': {
         fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-dense)',
@@ -331,7 +314,6 @@ module.exports = function ComponentsPlugin() {
       },
       '.ids-avatar.ids-avatar-type-initials': { flexDirection: 'column', textAlign: 'center', fontStyle: 'normal', color: 'inherit' },
       '.ids-avatar.ids-avatar-type-icon': { flexShrink: 0 },
-      '.ids-avatar.ids-avatar-type-icon>.ids-icon': { color: 'inherit' },
       '.ids-avatar.ids-avatar-type-image>img': { width: '100%', height: '100%', objectFit: 'cover' },
       '.ids-avatar.ids-avatar-smallcollection-compact': {
         width: 'var(--ids-comp-avatar-size-smallcollection-width-compact)',
@@ -1705,1937 +1687,2603 @@ module.exports = function ComponentsPlugin() {
       '.ids-button.ids-button-text.ids-button-surface:disabled>.ids-icon': {
         color: 'var(--ids-comp-button-text-color-fg-icon-surface-disabled)',
       },
-      '.ids-checkbox-group': { display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'flex-start' },
-      '.ids-checkbox-group>.ids-checkbox-group__label': { fontStyle: 'normal' },
-      '.ids-checkbox-group>.ids-checkbox-group__list': { display: 'flex' },
-      '.ids-checkbox-group.ids-checkbox-group-horizontal>.ids-checkbox-group__list': { flexDirection: 'row', alignItems: 'center' },
-      '.ids-checkbox-group.ids-checkbox-group-vertical>.ids-checkbox-group__list': { flexDirection: 'column', alignItems: 'flex-start' },
-      '.ids-checkbox-group.ids-checkbox-group-compact': {
-        padding:
-          'var(--ids-comp-checkbox-group-vertical-container-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-compact)',
-        gap: 'var(--ids-comp-checkbox-group-vertical-container-size-gap-compact)',
-      },
-      '.ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__label': {
-        fontFamily: 'var(--ids-comp-checkbox-group-label-typography-font-family-compact)',
-        fontSize: 'var(--ids-comp-checkbox-group-label-typography-font-size-compact)',
-        fontWeight: 'var(--ids-comp-checkbox-group-label-typography-font-weight-compact)',
-        lineHeight: 'var(--ids-comp-checkbox-group-label-typography-line-height-compact)',
-        letterSpacing: 'var(--ids-comp-checkbox-group-label-typography-letter-spacing-compact)',
+      '.ids-card': { display: 'flex', borderStyle: 'solid', boxSizing: 'border-box' },
+      '.ids-card.ids-card-clickable': { pointerEvents: 'auto', cursor: 'pointer' },
+      '.ids-card.ids-card-clickable:focus,.ids-card.ids-card-clickable:focus-visible': { outlineOffset: '2px', outlineStyle: 'solid' },
+      '.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-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__list': {
-        padding:
-          'var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-compact)',
-        gap: 'var(--ids-comp-checkbox-group-horizontal-list-size-gap-compact)',
+      '.ids-card.ids-card-vertical .ids-card-section:last-child': {
+        paddingTop: '0px',
+        borderBottomLeftRadius: 'inherit',
+        borderBottomRightRadius: 'inherit',
       },
-      '.ids-checkbox-group.ids-checkbox-group-comfortable': {
-        padding:
-          'var(--ids-comp-checkbox-group-vertical-container-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-comfortable)',
-        gap: 'var(--ids-comp-checkbox-group-vertical-container-size-gap-comfortable)',
+      '.ids-card.ids-card-vertical .ids-card-section.ids-card-section-stretched': {
+        paddingLeft: '0px',
+        paddingRight: '0px',
+        width: '100%',
       },
-      '.ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__label': {
-        fontFamily: 'var(--ids-comp-checkbox-group-label-typography-font-family-comfortable)',
-        fontSize: 'var(--ids-comp-checkbox-group-label-typography-font-size-comfortable)',
-        fontWeight: 'var(--ids-comp-checkbox-group-label-typography-font-weight-comfortable)',
-        lineHeight: 'var(--ids-comp-checkbox-group-label-typography-line-height-comfortable)',
-        letterSpacing: 'var(--ids-comp-checkbox-group-label-typography-letter-spacing-comfortable)',
+      '.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-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__list': {
-        padding:
-          'var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-comfortable)',
-        gap: 'var(--ids-comp-checkbox-group-horizontal-list-size-gap-comfortable)',
+      '.ids-card.ids-card-horizontal .ids-card-section:last-child': {
+        paddingLeft: '0px',
+        borderTopRightRadius: 'inherit',
+        borderBottomRightRadius: 'inherit',
       },
-      '.ids-checkbox-group.ids-checkbox-group-spacious': {
-        padding:
-          'var(--ids-comp-checkbox-group-vertical-container-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-spacious)',
-        gap: 'var(--ids-comp-checkbox-group-vertical-container-size-gap-spacious)',
+      '.ids-card.ids-card-horizontal .ids-card-section.ids-card-section-stretched': {
+        paddingTop: '0px',
+        paddingBottom: '0px',
+        height: '100%',
       },
-      '.ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__label': {
-        fontFamily: 'var(--ids-comp-checkbox-group-label-typography-font-family-spacious)',
-        fontSize: 'var(--ids-comp-checkbox-group-label-typography-font-size-spacious)',
-        fontWeight: 'var(--ids-comp-checkbox-group-label-typography-font-weight-spacious)',
-        lineHeight: 'var(--ids-comp-checkbox-group-label-typography-line-height-spacious)',
-        letterSpacing: 'var(--ids-comp-checkbox-group-label-typography-letter-spacing-spacious)',
+      '.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-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__list': {
-        padding:
-          'var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-spacious)',
-        gap: 'var(--ids-comp-checkbox-group-horizontal-list-size-gap-spacious)',
+      '.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-checkbox-group.ids-checkbox-group-dense': {
-        padding:
-          'var(--ids-comp-checkbox-group-vertical-container-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-dense)',
-        gap: 'var(--ids-comp-checkbox-group-vertical-container-size-gap-dense)',
+      '.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-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__label': {
-        fontFamily: 'var(--ids-comp-checkbox-group-label-typography-font-family-dense)',
-        fontSize: 'var(--ids-comp-checkbox-group-label-typography-font-size-dense)',
-        fontWeight: 'var(--ids-comp-checkbox-group-label-typography-font-weight-dense)',
-        lineHeight: 'var(--ids-comp-checkbox-group-label-typography-line-height-dense)',
-        letterSpacing: 'var(--ids-comp-checkbox-group-label-typography-letter-spacing-dense)',
+      '.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-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__list': {
+      '.ids-card.ids-card-compact.ids-card-horizontal': {
         padding:
-          'var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-dense)',
-        gap: 'var(--ids-comp-checkbox-group-horizontal-list-size-gap-dense)',
+          '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-checkbox-group.ids-checkbox-group-light>.ids-checkbox-group__label': {
-        color: 'var(--ids-comp-checkbox-label-color-fg-light-default)',
+      '.ids-card.ids-card-compact.ids-card-horizontal.ids-card-outlined': {
+        borderWidth: 'var(--ids-comp-card-container-horizontal-size-border-width-compact)',
       },
-      '.ids-checkbox-group.ids-checkbox-group-dark>.ids-checkbox-group__label': {
-        color: 'var(--ids-comp-checkbox-label-color-fg-dark-default)',
+      '.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-checkbox-group.ids-checkbox-group-surface>.ids-checkbox-group__label': {
-        color: 'var(--ids-comp-checkbox-label-color-fg-surface-default)',
+      '.ids-card.ids-card-compact.ids-card-vertical.ids-card-outlined': {
+        borderWidth: 'var(--ids-comp-card-container-vertical-size-border-width-compact)',
       },
-      '.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-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-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',
-        margin: '0',
+      '.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-checkbox .ids-checkbox__input-wrapper input[type=checkbox]:focus,.ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox]:focus-visible':
-        { outlineOffset: '2px', outlineStyle: 'solid' },
-      '.ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox]+.ids-checkbox__icon': { position: 'absolute' },
-      '.ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox]+.ids-checkbox__icon>.ids-icon': { color: 'inherit' },
-      '.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-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-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-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-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-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-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper input[type=checkbox]:focus,.ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper input[type=checkbox]:focus-visible':
-        { 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)',
-        lineHeight: 'var(--ids-comp-checkbox-input-size-icon-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-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper .ids-checkbox__icon>.ids-icon': {
-        height: 'var(--ids-comp-checkbox-input-size-icon-compact)',
-        width: 'var(--ids-comp-checkbox-input-size-icon-compact)',
-        fontSize: 'var(--ids-comp-checkbox-input-icon-typography-font-size-compact)',
-        fontWeight: 'var(--ids-comp-checkbox-input-icon-typography-font-weight-compact)',
-        lineHeight: 'var(--ids-comp-checkbox-input-icon-typography-line-height-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-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-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-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-card.ids-card-comfortable.ids-card-horizontal.ids-card-outlined': {
+        borderWidth: 'var(--ids-comp-card-container-horizontal-size-border-width-comfortable)',
       },
-      '.ids-checkbox.ids-checkbox-comfortable': {
+      '.ids-card.ids-card-comfortable.ids-card-vertical': {
         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)',
+          '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-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-card.ids-card-comfortable.ids-card-vertical.ids-card-outlined': {
+        borderWidth: 'var(--ids-comp-card-container-vertical-size-border-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-card.ids-card-comfortable.ids-card-clickable:focus': {
+        outlineWidth: 'var(--ids-comp-card-focused-outline-outline-comfortable)',
       },
-      '.ids-checkbox.ids-checkbox-comfortable .ids-checkbox__input-wrapper input[type=checkbox]:focus,.ids-checkbox.ids-checkbox-comfortable .ids-checkbox__input-wrapper input[type=checkbox]:focus-visible':
-        { 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)',
-        lineHeight: 'var(--ids-comp-checkbox-input-size-icon-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-checkbox.ids-checkbox-comfortable .ids-checkbox__input-wrapper .ids-checkbox__icon>.ids-icon': {
-        height: 'var(--ids-comp-checkbox-input-size-icon-comfortable)',
-        width: 'var(--ids-comp-checkbox-input-size-icon-comfortable)',
-        fontSize: 'var(--ids-comp-checkbox-input-icon-typography-font-size-comfortable)',
-        fontWeight: 'var(--ids-comp-checkbox-input-icon-typography-font-weight-comfortable)',
-        lineHeight: 'var(--ids-comp-checkbox-input-icon-typography-line-height-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-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-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-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-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-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-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-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-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-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-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-checkbox.ids-checkbox-spacious .ids-checkbox__input-wrapper input[type=checkbox]:focus,.ids-checkbox.ids-checkbox-spacious .ids-checkbox__input-wrapper input[type=checkbox]:focus-visible':
-        { 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)',
-        lineHeight: 'var(--ids-comp-checkbox-input-size-icon-spacious)',
+      '.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-checkbox.ids-checkbox-spacious .ids-checkbox__input-wrapper .ids-checkbox__icon>.ids-icon': {
-        height: 'var(--ids-comp-checkbox-input-size-icon-spacious)',
-        width: 'var(--ids-comp-checkbox-input-size-icon-spacious)',
-        fontSize: 'var(--ids-comp-checkbox-input-icon-typography-font-size-spacious)',
-        fontWeight: 'var(--ids-comp-checkbox-input-icon-typography-font-weight-spacious)',
-        lineHeight: 'var(--ids-comp-checkbox-input-icon-typography-line-height-spacious)',
+      '.ids-card.ids-card-spacious.ids-card-horizontal.ids-card-outlined': {
+        borderWidth: 'var(--ids-comp-card-container-horizontal-size-border-width-spacious)',
       },
-      '.ids-checkbox.ids-checkbox-spacious .ids-checkbox__label-wrapper': {
+      '.ids-card.ids-card-spacious.ids-card-vertical': {
         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)',
+          '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-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-card.ids-card-spacious.ids-card-vertical.ids-card-outlined': {
+        borderWidth: 'var(--ids-comp-card-container-vertical-size-border-width-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-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-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-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-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-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-checkbox.ids-checkbox-dense .ids-checkbox__input-wrapper input[type=checkbox]:focus,.ids-checkbox.ids-checkbox-dense .ids-checkbox__input-wrapper input[type=checkbox]:focus-visible':
-        { 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)',
-        lineHeight: 'var(--ids-comp-checkbox-input-size-icon-dense)',
+      '.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-checkbox.ids-checkbox-dense .ids-checkbox__input-wrapper .ids-checkbox__icon>.ids-icon': {
-        height: 'var(--ids-comp-checkbox-input-size-icon-dense)',
-        width: 'var(--ids-comp-checkbox-input-size-icon-dense)',
-        fontSize: 'var(--ids-comp-checkbox-input-icon-typography-font-size-dense)',
-        fontWeight: 'var(--ids-comp-checkbox-input-icon-typography-font-weight-dense)',
-        lineHeight: 'var(--ids-comp-checkbox-input-icon-typography-line-height-dense)',
+      '.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-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-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-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-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-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-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-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-card.ids-card-dense.ids-card-horizontal.ids-card-outlined': {
+        borderWidth: 'var(--ids-comp-card-container-horizontal-size-border-width-dense)',
       },
-      '.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-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-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
-        {
-          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-card.ids-card-dense.ids-card-vertical.ids-card-outlined': {
+        borderWidth: 'var(--ids-comp-card-container-vertical-size-border-width-dense)',
       },
-      '.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]:checked:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
-        {
-          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]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.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-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-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-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-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-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-checkbox.ids-checkbox-light .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:focus,.ids-checkbox.ids-checkbox-light .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:focus-visible':
-        { 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-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-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-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-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-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-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
-        {
-          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-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-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':
+      '.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,.ids-card.ids-card-filled.ids-card-primary.ids-card-clickable:focus-visible':
         {
-          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-hovered)',
-          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered)',
+          backgroundColor: 'var(--ids-comp-card-filled-color-bg-primary-focused)',
+          borderColor: 'var(--ids-comp-card-filled-color-border-primary-focused)',
+          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
         },
-      '.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]:checked:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
-        {
-          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]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.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-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-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-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-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-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-checkbox.ids-checkbox-dark .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:focus,.ids-checkbox.ids-checkbox-dark .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:focus-visible':
-        { 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-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-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-card.ids-card-filled.ids-card-secondary.ids-card-clickable:focus,.ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable:focus-visible':
+        {
+          backgroundColor: 'var(--ids-comp-card-filled-color-bg-secondary-focused)',
+          borderColor: 'var(--ids-comp-card-filled-color-border-secondary-focused)',
+          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-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-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-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-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
+      '.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,.ids-card.ids-card-filled.ids-card-brand.ids-card-clickable:focus-visible':
         {
-          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)',
+          backgroundColor: 'var(--ids-comp-card-filled-color-bg-brand-focused)',
+          borderColor: 'var(--ids-comp-card-filled-color-border-brand-focused)',
+          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-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-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-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)':
+      '.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,.ids-card.ids-card-filled.ids-card-error.ids-card-clickable:focus-visible':
         {
-          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-default)',
-          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-default)',
+          backgroundColor: 'var(--ids-comp-card-filled-color-bg-error-focused)',
+          borderColor: 'var(--ids-comp-card-filled-color-border-error-focused)',
+          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
         },
-      '.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':
+      '.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,.ids-card.ids-card-filled.ids-card-success.ids-card-clickable:focus-visible':
         {
-          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-hovered)',
-          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered)',
+          backgroundColor: 'var(--ids-comp-card-filled-color-bg-success-focused)',
+          borderColor: 'var(--ids-comp-card-filled-color-border-success-focused)',
+          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
         },
-      '.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':
+      '.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,.ids-card.ids-card-filled.ids-card-warning.ids-card-clickable:focus-visible':
         {
-          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-pressed)',
-          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed)',
+          backgroundColor: 'var(--ids-comp-card-filled-color-bg-warning-focused)',
+          borderColor: 'var(--ids-comp-card-filled-color-border-warning-focused)',
+          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
         },
-      '.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]:checked:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
+      '.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,.ids-card.ids-card-filled.ids-card-info.ids-card-clickable:focus-visible':
         {
-          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)',
+          backgroundColor: 'var(--ids-comp-card-filled-color-bg-info-focused)',
+          borderColor: 'var(--ids-comp-card-filled-color-border-info-focused)',
+          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-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':
+      '.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,.ids-card.ids-card-filled.ids-card-light.ids-card-clickable:focus-visible':
         {
-          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)',
+          backgroundColor: 'var(--ids-comp-card-filled-color-bg-light-focused)',
+          borderColor: 'var(--ids-comp-card-filled-color-border-light-focused)',
+          outlineColor: 'var(--ids-comp-card-focused-outline-color-light-focused)',
         },
-      '.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]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.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-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-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-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-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-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-checkbox.ids-checkbox-surface .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:focus,.ids-checkbox.ids-checkbox-surface .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:focus-visible':
-        { 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 .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-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-checkbox.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': {
-        cursor: 'not-allowed',
+      '.ids-card.ids-card-filled.ids-card-dark.ids-card-clickable:focus,.ids-card.ids-card-filled.ids-card-dark.ids-card-clickable:focus-visible':
+        {
+          backgroundColor: 'var(--ids-comp-card-filled-color-bg-dark-focused)',
+          borderColor: 'var(--ids-comp-card-filled-color-border-dark-focused)',
+          outlineColor: 'var(--ids-comp-card-focused-outline-color-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-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-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-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': {
-        cursor: 'pointer',
+      '.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-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled)':
+      '.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,.ids-card.ids-card-filled.ids-card-surface.ids-card-clickable:focus-visible':
         {
-          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-error-default)',
-          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-default)',
+          backgroundColor: 'var(--ids-comp-card-filled-color-bg-surface-focused)',
+          borderColor: 'var(--ids-comp-card-filled-color-border-surface-focused)',
+          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.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-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.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-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
-        {
-          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-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)':
+      '.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,.ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable:focus-visible':
         {
-          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-error-default)',
-          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-default)',
+          backgroundColor: 'var(--ids-comp-card-outlined-color-bg-primary-focused)',
+          borderColor: 'var(--ids-comp-card-outlined-color-border-primary-focused)',
+          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover':
+      '.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,.ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable:focus-visible':
         {
-          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-error-hovered)',
-          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-hovered)',
+          backgroundColor: 'var(--ids-comp-card-outlined-color-bg-secondary-focused)',
+          borderColor: 'var(--ids-comp-card-outlined-color-border-secondary-focused)',
+          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active':
+      '.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,.ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable:focus-visible':
         {
-          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-error-pressed)',
-          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-pressed)',
+          backgroundColor: 'var(--ids-comp-card-outlined-color-bg-brand-focused)',
+          borderColor: 'var(--ids-comp-card-outlined-color-border-brand-focused)',
+          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
+      '.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,.ids-card.ids-card-outlined.ids-card-error.ids-card-clickable:focus-visible':
         {
-          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-error-focused)',
-          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-focused)',
+          backgroundColor: 'var(--ids-comp-card-outlined-color-bg-error-focused)',
+          borderColor: 'var(--ids-comp-card-outlined-color-border-error-focused)',
+          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.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-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.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-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.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-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon':
-        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-focused)' },
-      '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled)':
+      '.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,.ids-card.ids-card-outlined.ids-card-success.ids-card-clickable:focus-visible':
         {
-          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-error-default)',
-          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-default)',
+          backgroundColor: 'var(--ids-comp-card-outlined-color-bg-success-focused)',
+          borderColor: 'var(--ids-comp-card-outlined-color-border-success-focused)',
+          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover':
+      '.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,.ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable:focus-visible':
         {
-          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-error-hovered)',
-          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-hovered)',
+          backgroundColor: 'var(--ids-comp-card-outlined-color-bg-warning-focused)',
+          borderColor: 'var(--ids-comp-card-outlined-color-border-warning-focused)',
+          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active':
+      '.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,.ids-card.ids-card-outlined.ids-card-info.ids-card-clickable:focus-visible':
         {
-          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-error-pressed)',
-          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed)',
+          backgroundColor: 'var(--ids-comp-card-outlined-color-bg-info-focused)',
+          borderColor: 'var(--ids-comp-card-outlined-color-border-info-focused)',
+          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
+      '.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,.ids-card.ids-card-outlined.ids-card-light.ids-card-clickable:focus-visible':
         {
-          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-error-focused)',
-          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused)',
+          backgroundColor: 'var(--ids-comp-card-outlined-color-bg-light-focused)',
+          borderColor: 'var(--ids-comp-card-outlined-color-border-light-focused)',
+          outlineColor: 'var(--ids-comp-card-focused-outline-color-light-focused)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)':
+      '.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,.ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable:focus-visible':
         {
-          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-error-default)',
-          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-default)',
+          backgroundColor: 'var(--ids-comp-card-outlined-color-bg-dark-focused)',
+          borderColor: 'var(--ids-comp-card-outlined-color-border-dark-focused)',
+          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover':
+      '.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,.ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable:focus-visible':
         {
-          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-error-hovered)',
-          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered)',
+          backgroundColor: 'var(--ids-comp-card-outlined-color-bg-surface-focused)',
+          borderColor: 'var(--ids-comp-card-outlined-color-border-surface-focused)',
+          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active':
+      '.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,.ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable:focus-visible':
         {
-          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-error-pressed)',
-          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed)',
+          backgroundColor: 'var(--ids-comp-card-elevated-color-bg-primary-focused)',
+          borderColor: 'var(--ids-comp-card-elevated-color-border-primary-focused)',
+          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
-        {
-          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-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.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-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.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-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.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-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon':
-        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-focused)' },
-      '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled),.ids-checkbox.ids-checkbox-invalid.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-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover':
+      '.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,.ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable:focus-visible':
         {
-          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-error-hovered)',
-          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-hovered)',
+          backgroundColor: 'var(--ids-comp-card-elevated-color-bg-secondary-focused)',
+          borderColor: 'var(--ids-comp-card-elevated-color-border-secondary-focused)',
+          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active':
+      '.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,.ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable:focus-visible':
         {
-          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-error-pressed)',
-          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed)',
+          backgroundColor: 'var(--ids-comp-card-elevated-color-bg-brand-focused)',
+          borderColor: 'var(--ids-comp-card-elevated-color-border-brand-focused)',
+          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
+      '.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,.ids-card.ids-card-elevated.ids-card-error.ids-card-clickable:focus-visible':
         {
-          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-error-focused)',
-          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-focused)',
+          backgroundColor: 'var(--ids-comp-card-elevated-color-bg-error-focused)',
+          borderColor: 'var(--ids-comp-card-elevated-color-border-error-focused)',
+          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)':
+      '.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,.ids-card.ids-card-elevated.ids-card-success.ids-card-clickable:focus-visible':
         {
-          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-error-default)',
-          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-default)',
+          backgroundColor: 'var(--ids-comp-card-elevated-color-bg-success-focused)',
+          borderColor: 'var(--ids-comp-card-elevated-color-border-success-focused)',
+          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover':
+      '.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,.ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable:focus-visible':
         {
-          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-error-hovered)',
-          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered)',
+          backgroundColor: 'var(--ids-comp-card-elevated-color-bg-warning-focused)',
+          borderColor: 'var(--ids-comp-card-elevated-color-border-warning-focused)',
+          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active':
+      '.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,.ids-card.ids-card-elevated.ids-card-info.ids-card-clickable:focus-visible':
         {
-          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-error-pressed)',
-          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed)',
+          backgroundColor: 'var(--ids-comp-card-elevated-color-bg-info-focused)',
+          borderColor: 'var(--ids-comp-card-elevated-color-border-info-focused)',
+          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
+      '.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,.ids-card.ids-card-elevated.ids-card-light.ids-card-clickable:focus-visible':
         {
-          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-error-focused)',
-          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-focused)',
+          backgroundColor: 'var(--ids-comp-card-elevated-color-bg-light-focused)',
+          borderColor: 'var(--ids-comp-card-elevated-color-border-light-focused)',
+          outlineColor: 'var(--ids-comp-card-focused-outline-color-light-focused)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.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-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.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-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.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-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon':
-        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-focused)' },
-      '.ids-pseudo-checkbox': { display: 'inline-flex', alignSelf: 'stretch' },
-      '.ids-pseudo-checkbox .ids-pseudo-checkbox__input-wrapper': {
-        position: 'relative',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
+      '.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-pseudo-checkbox .ids-pseudo-checkbox__input-wrapper input[type=checkbox]': {
-        appearance: 'none',
-        WebkitAppearance: 'none',
-        flexShrink: 0,
-        borderStyle: 'solid',
-        margin: '0',
+      '.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-pseudo-checkbox .ids-pseudo-checkbox__input-wrapper input[type=checkbox]+.ids-pseudo-checkbox__icon': { position: 'absolute' },
-      '.ids-pseudo-checkbox .ids-pseudo-checkbox__input-wrapper input[type=checkbox]+.ids-pseudo-checkbox__icon>.ids-icon': {
-        color: 'inherit',
+      '.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-pseudo-checkbox.ids-pseudo-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-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-pseudo-checkbox.ids-pseudo-checkbox-compact .ids-pseudo-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-card.ids-card-elevated.ids-card-dark.ids-card-clickable:focus,.ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable:focus-visible':
+        {
+          backgroundColor: 'var(--ids-comp-card-elevated-color-bg-dark-focused)',
+          borderColor: 'var(--ids-comp-card-elevated-color-border-dark-focused)',
+          outlineColor: 'var(--ids-comp-card-focused-outline-color-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-pseudo-checkbox.ids-pseudo-checkbox-compact .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-compact .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus-visible':
-        { outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-compact)' },
-      '.ids-pseudo-checkbox.ids-pseudo-checkbox-compact .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__icon': {
-        height: 'var(--ids-comp-checkbox-input-size-icon-compact)',
-        width: 'var(--ids-comp-checkbox-input-size-icon-compact)',
-        lineHeight: 'var(--ids-comp-checkbox-input-size-icon-compact)',
+      '.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-pseudo-checkbox.ids-pseudo-checkbox-compact .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__icon>.ids-icon': {
-        height: 'var(--ids-comp-checkbox-input-size-icon-compact)',
-        width: 'var(--ids-comp-checkbox-input-size-icon-compact)',
-        fontSize: 'var(--ids-comp-checkbox-input-icon-typography-font-size-compact)',
-        fontWeight: 'var(--ids-comp-checkbox-input-icon-typography-font-weight-compact)',
-        lineHeight: 'var(--ids-comp-checkbox-input-icon-typography-line-height-compact)',
+      '.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-pseudo-checkbox.ids-pseudo-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-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-pseudo-checkbox.ids-pseudo-checkbox-comfortable .ids-pseudo-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-card.ids-card-elevated.ids-card-surface.ids-card-clickable:focus,.ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable:focus-visible':
+        {
+          backgroundColor: 'var(--ids-comp-card-elevated-color-bg-surface-focused)',
+          borderColor: 'var(--ids-comp-card-elevated-color-border-surface-focused)',
+          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-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-pseudo-checkbox.ids-pseudo-checkbox-comfortable .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-comfortable .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus-visible':
-        { outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-comfortable)' },
-      '.ids-pseudo-checkbox.ids-pseudo-checkbox-comfortable .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__icon': {
+      '.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-checkbox-group': { display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'flex-start' },
+      '.ids-checkbox-group>.ids-checkbox-group__label': { fontStyle: 'normal' },
+      '.ids-checkbox-group>.ids-checkbox-group__list': { display: 'flex' },
+      '.ids-checkbox-group.ids-checkbox-group-horizontal>.ids-checkbox-group__list': { flexDirection: 'row', alignItems: 'center' },
+      '.ids-checkbox-group.ids-checkbox-group-vertical>.ids-checkbox-group__list': { flexDirection: 'column', alignItems: 'flex-start' },
+      '.ids-checkbox-group.ids-checkbox-group-compact': {
+        padding:
+          'var(--ids-comp-checkbox-group-vertical-container-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-compact)',
+        gap: 'var(--ids-comp-checkbox-group-vertical-container-size-gap-compact)',
+      },
+      '.ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__label': {
+        fontFamily: 'var(--ids-comp-checkbox-group-label-typography-font-family-compact)',
+        fontSize: 'var(--ids-comp-checkbox-group-label-typography-font-size-compact)',
+        fontWeight: 'var(--ids-comp-checkbox-group-label-typography-font-weight-compact)',
+        lineHeight: 'var(--ids-comp-checkbox-group-label-typography-line-height-compact)',
+        letterSpacing: 'var(--ids-comp-checkbox-group-label-typography-letter-spacing-compact)',
+      },
+      '.ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__list': {
+        padding:
+          'var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-compact)',
+        gap: 'var(--ids-comp-checkbox-group-horizontal-list-size-gap-compact)',
+      },
+      '.ids-checkbox-group.ids-checkbox-group-comfortable': {
+        padding:
+          'var(--ids-comp-checkbox-group-vertical-container-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-comfortable)',
+        gap: 'var(--ids-comp-checkbox-group-vertical-container-size-gap-comfortable)',
+      },
+      '.ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__label': {
+        fontFamily: 'var(--ids-comp-checkbox-group-label-typography-font-family-comfortable)',
+        fontSize: 'var(--ids-comp-checkbox-group-label-typography-font-size-comfortable)',
+        fontWeight: 'var(--ids-comp-checkbox-group-label-typography-font-weight-comfortable)',
+        lineHeight: 'var(--ids-comp-checkbox-group-label-typography-line-height-comfortable)',
+        letterSpacing: 'var(--ids-comp-checkbox-group-label-typography-letter-spacing-comfortable)',
+      },
+      '.ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__list': {
+        padding:
+          'var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-comfortable)',
+        gap: 'var(--ids-comp-checkbox-group-horizontal-list-size-gap-comfortable)',
+      },
+      '.ids-checkbox-group.ids-checkbox-group-spacious': {
+        padding:
+          'var(--ids-comp-checkbox-group-vertical-container-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-spacious)',
+        gap: 'var(--ids-comp-checkbox-group-vertical-container-size-gap-spacious)',
+      },
+      '.ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__label': {
+        fontFamily: 'var(--ids-comp-checkbox-group-label-typography-font-family-spacious)',
+        fontSize: 'var(--ids-comp-checkbox-group-label-typography-font-size-spacious)',
+        fontWeight: 'var(--ids-comp-checkbox-group-label-typography-font-weight-spacious)',
+        lineHeight: 'var(--ids-comp-checkbox-group-label-typography-line-height-spacious)',
+        letterSpacing: 'var(--ids-comp-checkbox-group-label-typography-letter-spacing-spacious)',
+      },
+      '.ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__list': {
+        padding:
+          'var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-spacious)',
+        gap: 'var(--ids-comp-checkbox-group-horizontal-list-size-gap-spacious)',
+      },
+      '.ids-checkbox-group.ids-checkbox-group-dense': {
+        padding:
+          'var(--ids-comp-checkbox-group-vertical-container-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-dense)',
+        gap: 'var(--ids-comp-checkbox-group-vertical-container-size-gap-dense)',
+      },
+      '.ids-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__label': {
+        fontFamily: 'var(--ids-comp-checkbox-group-label-typography-font-family-dense)',
+        fontSize: 'var(--ids-comp-checkbox-group-label-typography-font-size-dense)',
+        fontWeight: 'var(--ids-comp-checkbox-group-label-typography-font-weight-dense)',
+        lineHeight: 'var(--ids-comp-checkbox-group-label-typography-line-height-dense)',
+        letterSpacing: 'var(--ids-comp-checkbox-group-label-typography-letter-spacing-dense)',
+      },
+      '.ids-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__list': {
+        padding:
+          'var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-dense)',
+        gap: 'var(--ids-comp-checkbox-group-horizontal-list-size-gap-dense)',
+      },
+      '.ids-checkbox-group.ids-checkbox-group-light>.ids-checkbox-group__label': {
+        color: 'var(--ids-comp-checkbox-label-color-fg-light-default)',
+      },
+      '.ids-checkbox-group.ids-checkbox-group-dark>.ids-checkbox-group__label': {
+        color: 'var(--ids-comp-checkbox-label-color-fg-dark-default)',
+      },
+      '.ids-checkbox-group.ids-checkbox-group-surface>.ids-checkbox-group__label': {
+        color: 'var(--ids-comp-checkbox-label-color-fg-surface-default)',
+      },
+      '.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',
+        margin: '0',
+      },
+      '.ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox]:focus,.ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox]:focus-visible':
+        { outlineOffset: '2px', outlineStyle: 'solid' },
+      '.ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox]+.ids-checkbox__icon': { position: 'absolute' },
+      '.ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox]+.ids-checkbox__icon>.ids-icon': { color: 'inherit' },
+      '.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,.ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper input[type=checkbox]:focus-visible':
+        { 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)',
+        lineHeight: 'var(--ids-comp-checkbox-input-size-icon-compact)',
+      },
+      '.ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper .ids-checkbox__icon>.ids-icon': {
+        height: 'var(--ids-comp-checkbox-input-size-icon-compact)',
+        width: 'var(--ids-comp-checkbox-input-size-icon-compact)',
+        fontSize: 'var(--ids-comp-checkbox-input-icon-typography-font-size-compact)',
+        fontWeight: 'var(--ids-comp-checkbox-input-icon-typography-font-weight-compact)',
+        lineHeight: 'var(--ids-comp-checkbox-input-icon-typography-line-height-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,.ids-checkbox.ids-checkbox-comfortable .ids-checkbox__input-wrapper input[type=checkbox]:focus-visible':
+        { 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)',
         lineHeight: 'var(--ids-comp-checkbox-input-size-icon-comfortable)',
       },
-      '.ids-pseudo-checkbox.ids-pseudo-checkbox-comfortable .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__icon>.ids-icon': {
+      '.ids-checkbox.ids-checkbox-comfortable .ids-checkbox__input-wrapper .ids-checkbox__icon>.ids-icon': {
         height: 'var(--ids-comp-checkbox-input-size-icon-comfortable)',
         width: 'var(--ids-comp-checkbox-input-size-icon-comfortable)',
         fontSize: 'var(--ids-comp-checkbox-input-icon-typography-font-size-comfortable)',
         fontWeight: 'var(--ids-comp-checkbox-input-icon-typography-font-weight-comfortable)',
         lineHeight: 'var(--ids-comp-checkbox-input-icon-typography-line-height-comfortable)',
       },
-      '.ids-pseudo-checkbox.ids-pseudo-checkbox-spacious': {
+      '.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-pseudo-checkbox.ids-pseudo-checkbox-spacious .ids-pseudo-checkbox__input-wrapper input[type=checkbox]': {
+      '.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-pseudo-checkbox.ids-pseudo-checkbox-spacious .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-spacious .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus-visible':
+      '.ids-checkbox.ids-checkbox-spacious .ids-checkbox__input-wrapper input[type=checkbox]:focus,.ids-checkbox.ids-checkbox-spacious .ids-checkbox__input-wrapper input[type=checkbox]:focus-visible':
         { outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-spacious)' },
-      '.ids-pseudo-checkbox.ids-pseudo-checkbox-spacious .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__icon': {
+      '.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)',
         lineHeight: 'var(--ids-comp-checkbox-input-size-icon-spacious)',
       },
-      '.ids-pseudo-checkbox.ids-pseudo-checkbox-spacious .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__icon>.ids-icon': {
+      '.ids-checkbox.ids-checkbox-spacious .ids-checkbox__input-wrapper .ids-checkbox__icon>.ids-icon': {
         height: 'var(--ids-comp-checkbox-input-size-icon-spacious)',
         width: 'var(--ids-comp-checkbox-input-size-icon-spacious)',
         fontSize: 'var(--ids-comp-checkbox-input-icon-typography-font-size-spacious)',
         fontWeight: 'var(--ids-comp-checkbox-input-icon-typography-font-weight-spacious)',
         lineHeight: 'var(--ids-comp-checkbox-input-icon-typography-line-height-spacious)',
       },
-      '.ids-pseudo-checkbox.ids-pseudo-checkbox-dense': {
+      '.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-pseudo-checkbox.ids-pseudo-checkbox-dense .ids-pseudo-checkbox__input-wrapper input[type=checkbox]': {
+      '.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-pseudo-checkbox.ids-pseudo-checkbox-dense .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-dense .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus-visible':
+      '.ids-checkbox.ids-checkbox-dense .ids-checkbox__input-wrapper input[type=checkbox]:focus,.ids-checkbox.ids-checkbox-dense .ids-checkbox__input-wrapper input[type=checkbox]:focus-visible':
         { outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-dense)' },
-      '.ids-pseudo-checkbox.ids-pseudo-checkbox-dense .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__icon': {
+      '.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)',
         lineHeight: 'var(--ids-comp-checkbox-input-size-icon-dense)',
       },
-      '.ids-pseudo-checkbox.ids-pseudo-checkbox-dense .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__icon>.ids-icon': {
+      '.ids-checkbox.ids-checkbox-dense .ids-checkbox__input-wrapper .ids-checkbox__icon>.ids-icon': {
         height: 'var(--ids-comp-checkbox-input-size-icon-dense)',
         width: 'var(--ids-comp-checkbox-input-size-icon-dense)',
         fontSize: 'var(--ids-comp-checkbox-input-icon-typography-font-size-dense)',
         fontWeight: 'var(--ids-comp-checkbox-input-icon-typography-font-weight-dense)',
         lineHeight: 'var(--ids-comp-checkbox-input-icon-typography-line-height-dense)',
       },
-      '.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled)': {
+      '.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-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover': {
+      '.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-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active': {
+      '.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-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
         {
           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-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:disabled': {
+      '.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-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(: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-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover':
+      '.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-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active':
+      '.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-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
+      '.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]:checked:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
         {
           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-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:disabled,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled':
+      '.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-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-pseudo-checkbox__icon':
+      '.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-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-pseudo-checkbox__icon':
+      '.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-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon':
+      '.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-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon':
+      '.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]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon':
         { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-focused)' },
-      '.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled)': {
+      '.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,.ids-checkbox.ids-checkbox-light .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:focus-visible':
+        { 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-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover': {
+      '.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-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active': {
+      '.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-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
         {
           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-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:disabled': {
+      '.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-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(: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-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover':
+      '.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-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active':
+      '.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-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
+      '.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]:checked:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
         {
           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-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:disabled,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled':
+      '.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-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-pseudo-checkbox__icon':
+      '.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-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-pseudo-checkbox__icon':
+      '.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-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon':
+      '.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-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon':
+      '.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]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon':
         { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-focused)' },
-      '.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled)': {
+      '.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,.ids-checkbox.ids-checkbox-dark .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:focus-visible':
+        { 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-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover': {
+      '.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-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active': {
+      '.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-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
         {
           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-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:disabled': {
+      '.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-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(: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-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover':
+      '.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-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active':
+      '.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-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
+      '.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]:checked:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
         {
           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-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:disabled,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled':
+      '.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-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-pseudo-checkbox__icon':
+      '.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-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-pseudo-checkbox__icon':
+      '.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-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon':
+      '.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-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon':
+      '.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]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon':
         { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-focused)' },
-      '.ids-pseudo-checkbox.ids-pseudo-checkbox-disabled .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__touch-target': {
+      '.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,.ids-checkbox.ids-checkbox-surface .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:focus-visible':
+        { 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 .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-pseudo-checkbox.ids-pseudo-checkbox-disabled .ids-pseudo-checkbox__input-wrapper input[type=checkbox]': {
+      '.ids-checkbox.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': {
         cursor: 'not-allowed',
       },
-      '.ids-pseudo-checkbox.ids-pseudo-checkbox-disabled .ids-pseudo-checkbox__input-wrapper input[type=checkbox]+.ids-pseudo-checkbox__icon':
-        { cursor: 'not-allowed' },
-      '.ids-pseudo-checkbox:not(.ids-pseudo-checkbox-disabled) .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__touch-target': {
+      '.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-pseudo-checkbox:not(.ids-pseudo-checkbox-disabled) .ids-pseudo-checkbox__input-wrapper input[type=checkbox]': {
+      '.ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': {
         cursor: 'pointer',
       },
-      '.ids-pseudo-checkbox:not(.ids-pseudo-checkbox-disabled) .ids-pseudo-checkbox__input-wrapper input[type=checkbox]+.ids-pseudo-checkbox__icon':
-        { cursor: 'pointer' },
-      '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled)':
+      '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled),.ids-checkbox.ids-checkbox-invalid.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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover':
+      '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active':
+      '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
+      '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
         {
           borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-error-focused)',
           backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-focused)',
         },
-      '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)':
+      '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ids-checkbox-invalid.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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover':
+      '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active':
+      '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
+      '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
         {
           borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-error-focused)',
           backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-focused)',
         },
-      '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-pseudo-checkbox__icon':
+      '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-pseudo-checkbox__icon':
+      '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon':
+      '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon':
+      '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon':
         { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-focused)' },
-      '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled)':
+      '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled),.ids-checkbox.ids-checkbox-invalid.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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover':
+      '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active':
+      '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
+      '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
         {
           borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-error-focused)',
           backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused)',
         },
-      '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)':
+      '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ids-checkbox-invalid.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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover':
+      '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active':
+      '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
+      '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
         {
           borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-error-focused)',
           backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-focused)',
         },
-      '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-pseudo-checkbox__icon':
+      '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-pseudo-checkbox__icon':
+      '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon':
+      '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon':
+      '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon':
         { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-focused)' },
-      '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled)':
+      '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled),.ids-checkbox.ids-checkbox-invalid.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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover':
+      '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active':
+      '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
+      '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
         {
           borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-error-focused)',
           backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-focused)',
         },
-      '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)':
+      '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ids-checkbox-invalid.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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover':
+      '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active':
+      '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
+      '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
         {
           borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-error-focused)',
           backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-focused)',
         },
-      '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-pseudo-checkbox__icon':
+      '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-pseudo-checkbox__icon':
+      '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon':
+      '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon':
+      '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.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,.ids-card.ids-card-clickable:focus-visible': { outlineOffset: '2px', outlineStyle: 'solid' },
-      '.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-pseudo-checkbox': { display: 'inline-flex', alignSelf: 'stretch' },
+      '.ids-pseudo-checkbox .ids-pseudo-checkbox__input-wrapper': {
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
       },
-      '.ids-card.ids-card-vertical .ids-card-section:last-child': {
-        paddingTop: '0px',
-        borderBottomLeftRadius: 'inherit',
-        borderBottomRightRadius: 'inherit',
+      '.ids-pseudo-checkbox .ids-pseudo-checkbox__input-wrapper input[type=checkbox]': {
+        appearance: 'none',
+        WebkitAppearance: 'none',
+        flexShrink: 0,
+        borderStyle: 'solid',
+        margin: '0',
       },
-      '.ids-card.ids-card-vertical .ids-card-section.ids-card-section-stretched': {
-        paddingLeft: '0px',
-        paddingRight: '0px',
-        width: '100%',
+      '.ids-pseudo-checkbox .ids-pseudo-checkbox__input-wrapper input[type=checkbox]+.ids-pseudo-checkbox__icon': { position: 'absolute' },
+      '.ids-pseudo-checkbox .ids-pseudo-checkbox__input-wrapper input[type=checkbox]+.ids-pseudo-checkbox__icon>.ids-icon': {
+        color: 'inherit',
       },
-      '.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-pseudo-checkbox.ids-pseudo-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-card.ids-card-horizontal .ids-card-section:last-child': {
-        paddingLeft: '0px',
-        borderTopRightRadius: 'inherit',
-        borderBottomRightRadius: 'inherit',
+      '.ids-pseudo-checkbox.ids-pseudo-checkbox-compact .ids-pseudo-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-card.ids-card-horizontal .ids-card-section.ids-card-section-stretched': {
-        paddingTop: '0px',
-        paddingBottom: '0px',
-        height: '100%',
+      '.ids-pseudo-checkbox.ids-pseudo-checkbox-compact .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-compact .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus-visible':
+        { outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-compact)' },
+      '.ids-pseudo-checkbox.ids-pseudo-checkbox-compact .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__icon': {
+        height: 'var(--ids-comp-checkbox-input-size-icon-compact)',
+        width: 'var(--ids-comp-checkbox-input-size-icon-compact)',
+        lineHeight: 'var(--ids-comp-checkbox-input-size-icon-compact)',
       },
-      '.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-pseudo-checkbox.ids-pseudo-checkbox-compact .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__icon>.ids-icon': {
+        height: 'var(--ids-comp-checkbox-input-size-icon-compact)',
+        width: 'var(--ids-comp-checkbox-input-size-icon-compact)',
+        fontSize: 'var(--ids-comp-checkbox-input-icon-typography-font-size-compact)',
+        fontWeight: 'var(--ids-comp-checkbox-input-icon-typography-font-weight-compact)',
+        lineHeight: 'var(--ids-comp-checkbox-input-icon-typography-line-height-compact)',
       },
-      '.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-pseudo-checkbox.ids-pseudo-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-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-pseudo-checkbox.ids-pseudo-checkbox-comfortable .ids-pseudo-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-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-pseudo-checkbox.ids-pseudo-checkbox-comfortable .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-comfortable .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus-visible':
+        { outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-comfortable)' },
+      '.ids-pseudo-checkbox.ids-pseudo-checkbox-comfortable .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__icon': {
+        height: 'var(--ids-comp-checkbox-input-size-icon-comfortable)',
+        width: 'var(--ids-comp-checkbox-input-size-icon-comfortable)',
+        lineHeight: 'var(--ids-comp-checkbox-input-size-icon-comfortable)',
       },
-      '.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-pseudo-checkbox.ids-pseudo-checkbox-comfortable .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__icon>.ids-icon': {
+        height: 'var(--ids-comp-checkbox-input-size-icon-comfortable)',
+        width: 'var(--ids-comp-checkbox-input-size-icon-comfortable)',
+        fontSize: 'var(--ids-comp-checkbox-input-icon-typography-font-size-comfortable)',
+        fontWeight: 'var(--ids-comp-checkbox-input-icon-typography-font-weight-comfortable)',
+        lineHeight: 'var(--ids-comp-checkbox-input-icon-typography-line-height-comfortable)',
       },
-      '.ids-card.ids-card-compact.ids-card-horizontal.ids-card-outlined': {
-        borderWidth: 'var(--ids-comp-card-container-horizontal-size-border-width-compact)',
+      '.ids-pseudo-checkbox.ids-pseudo-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-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-pseudo-checkbox.ids-pseudo-checkbox-spacious .ids-pseudo-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-card.ids-card-compact.ids-card-vertical.ids-card-outlined': {
-        borderWidth: 'var(--ids-comp-card-container-vertical-size-border-width-compact)',
+      '.ids-pseudo-checkbox.ids-pseudo-checkbox-spacious .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-spacious .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus-visible':
+        { outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-spacious)' },
+      '.ids-pseudo-checkbox.ids-pseudo-checkbox-spacious .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__icon': {
+        height: 'var(--ids-comp-checkbox-input-size-icon-spacious)',
+        width: 'var(--ids-comp-checkbox-input-size-icon-spacious)',
+        lineHeight: 'var(--ids-comp-checkbox-input-size-icon-spacious)',
       },
-      '.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-pseudo-checkbox.ids-pseudo-checkbox-spacious .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__icon>.ids-icon': {
+        height: 'var(--ids-comp-checkbox-input-size-icon-spacious)',
+        width: 'var(--ids-comp-checkbox-input-size-icon-spacious)',
+        fontSize: 'var(--ids-comp-checkbox-input-icon-typography-font-size-spacious)',
+        fontWeight: 'var(--ids-comp-checkbox-input-icon-typography-font-weight-spacious)',
+        lineHeight: 'var(--ids-comp-checkbox-input-icon-typography-line-height-spacious)',
       },
-      '.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-pseudo-checkbox.ids-pseudo-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-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-pseudo-checkbox.ids-pseudo-checkbox-dense .ids-pseudo-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-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-pseudo-checkbox.ids-pseudo-checkbox-dense .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-dense .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus-visible':
+        { outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-dense)' },
+      '.ids-pseudo-checkbox.ids-pseudo-checkbox-dense .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__icon': {
+        height: 'var(--ids-comp-checkbox-input-size-icon-dense)',
+        width: 'var(--ids-comp-checkbox-input-size-icon-dense)',
+        lineHeight: 'var(--ids-comp-checkbox-input-size-icon-dense)',
       },
-      '.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-pseudo-checkbox.ids-pseudo-checkbox-dense .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__icon>.ids-icon': {
+        height: 'var(--ids-comp-checkbox-input-size-icon-dense)',
+        width: 'var(--ids-comp-checkbox-input-size-icon-dense)',
+        fontSize: 'var(--ids-comp-checkbox-input-icon-typography-font-size-dense)',
+        fontWeight: 'var(--ids-comp-checkbox-input-icon-typography-font-weight-dense)',
+        lineHeight: 'var(--ids-comp-checkbox-input-icon-typography-line-height-dense)',
       },
-      '.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-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-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-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-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-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-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-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-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-card.ids-card-comfortable.ids-card-horizontal.ids-card-outlined': {
-        borderWidth: 'var(--ids-comp-card-container-horizontal-size-border-width-comfortable)',
+      '.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
+        {
+          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-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-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-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-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-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-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-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-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-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-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
+        {
+          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-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:disabled,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-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-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-pseudo-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-default)' },
+      '.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-pseudo-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-hovered)' },
+      '.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-pressed)' },
+      '.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-focused)' },
+      '.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-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-card.ids-card-comfortable.ids-card-vertical.ids-card-outlined': {
-        borderWidth: 'var(--ids-comp-card-container-vertical-size-border-width-comfortable)',
+      '.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-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-card.ids-card-comfortable.ids-card-clickable:focus': {
-        outlineWidth: 'var(--ids-comp-card-focused-outline-outline-comfortable)',
+      '.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-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-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-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
+        {
+          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-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-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-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-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-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-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-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-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-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-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
+        {
+          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-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:disabled,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-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-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-pseudo-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-default)' },
+      '.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-pseudo-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-hovered)' },
+      '.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-pressed)' },
+      '.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-focused)' },
+      '.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-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-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-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-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-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-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-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-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,.ids-card.ids-card-filled.ids-card-primary.ids-card-clickable:focus-visible':
+      '.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
         {
-          backgroundColor: 'var(--ids-comp-card-filled-color-bg-primary-focused)',
-          borderColor: 'var(--ids-comp-card-filled-color-border-primary-focused)',
-          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
+          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-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-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-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-card.ids-card-filled.ids-card-secondary.ids-card-clickable:focus,.ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable:focus-visible':
+      '.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)':
         {
-          backgroundColor: 'var(--ids-comp-card-filled-color-bg-secondary-focused)',
-          borderColor: 'var(--ids-comp-card-filled-color-border-secondary-focused)',
-          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-default)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-default)',
         },
-      '.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-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-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-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-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-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
+        {
+          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-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:disabled,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-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-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-pseudo-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-default)' },
+      '.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-pseudo-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-hovered)' },
+      '.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-pressed)' },
+      '.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-focused)' },
+      '.ids-pseudo-checkbox.ids-pseudo-checkbox-disabled .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__touch-target': {
+        cursor: 'not-allowed',
       },
-      '.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-pseudo-checkbox.ids-pseudo-checkbox-disabled .ids-pseudo-checkbox__input-wrapper input[type=checkbox]': {
+        cursor: 'not-allowed',
       },
-      '.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-pseudo-checkbox.ids-pseudo-checkbox-disabled .ids-pseudo-checkbox__input-wrapper input[type=checkbox]+.ids-pseudo-checkbox__icon':
+        { cursor: 'not-allowed' },
+      '.ids-pseudo-checkbox:not(.ids-pseudo-checkbox-disabled) .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__touch-target': {
+        cursor: 'pointer',
       },
-      '.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-pseudo-checkbox:not(.ids-pseudo-checkbox-disabled) .ids-pseudo-checkbox__input-wrapper input[type=checkbox]': {
+        cursor: 'pointer',
       },
-      '.ids-card.ids-card-filled.ids-card-brand.ids-card-clickable:focus,.ids-card.ids-card-filled.ids-card-brand.ids-card-clickable:focus-visible':
+      '.ids-pseudo-checkbox:not(.ids-pseudo-checkbox-disabled) .ids-pseudo-checkbox__input-wrapper input[type=checkbox]+.ids-pseudo-checkbox__icon':
+        { cursor: 'pointer' },
+      '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-error-focused)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-focused)',
+        },
+      '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-error-focused)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-focused)',
+        },
+      '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-pseudo-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-default)' },
+      '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-pseudo-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-hovered)' },
+      '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-pressed)' },
+      '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-focused)' },
+      '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-error-focused)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused)',
+        },
+      '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-error-focused)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-focused)',
+        },
+      '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-pseudo-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-default)' },
+      '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-pseudo-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-hovered)' },
+      '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-pressed)' },
+      '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-focused)' },
+      '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active':
         {
-          backgroundColor: 'var(--ids-comp-card-filled-color-bg-brand-focused)',
-          borderColor: 'var(--ids-comp-card-filled-color-border-brand-focused)',
-          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-error-pressed)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed)',
         },
-      '.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,.ids-card.ids-card-filled.ids-card-error.ids-card-clickable:focus-visible':
+      '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
         {
-          backgroundColor: 'var(--ids-comp-card-filled-color-bg-error-focused)',
-          borderColor: 'var(--ids-comp-card-filled-color-border-error-focused)',
-          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-error-focused)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-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,.ids-card.ids-card-filled.ids-card-success.ids-card-clickable:focus-visible':
+      '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)':
         {
-          backgroundColor: 'var(--ids-comp-card-filled-color-bg-success-focused)',
-          borderColor: 'var(--ids-comp-card-filled-color-border-success-focused)',
-          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-error-default)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-default)',
         },
-      '.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,.ids-card.ids-card-filled.ids-card-warning.ids-card-clickable:focus-visible':
+      '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover':
         {
-          backgroundColor: 'var(--ids-comp-card-filled-color-bg-warning-focused)',
-          borderColor: 'var(--ids-comp-card-filled-color-border-warning-focused)',
-          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-error-hovered)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered)',
         },
-      '.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,.ids-card.ids-card-filled.ids-card-info.ids-card-clickable:focus-visible':
+      '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active':
         {
-          backgroundColor: 'var(--ids-comp-card-filled-color-bg-info-focused)',
-          borderColor: 'var(--ids-comp-card-filled-color-border-info-focused)',
-          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-error-pressed)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed)',
         },
-      '.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-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-error-focused)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-focused)',
+        },
+      '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-pseudo-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-default)' },
+      '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-pseudo-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-hovered)' },
+      '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-pressed)' },
+      '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-focused)' },
+      '.ids-chip': { display: 'inline-flex', alignItems: 'center', borderStyle: 'solid', boxSizing: 'border-box' },
+      '.ids-chip[role=button]:focus,.ids-chip[role=button]:focus-visible': { outlineOffset: '2px', outlineStyle: 'solid' },
+      '.ids-chip:not([role=button]):focus,.ids-chip:not([role=button]):focus-visible': { outlineStyle: 'none' },
+      '.ids-chip.ids-chip-disabled': { cursor: 'not-allowed' },
+      '.ids-chip>.ids-chip__label': { display: 'flex', alignItems: 'center' },
+      '.ids-chip.ids-chip-compact': {
+        height: 'var(--ids-comp-chip-container-size-height-compact)',
+        padding: 'var(--ids-comp-chip-container-size-padding-y-compact) var(--ids-comp-chip-container-size-padding-x-compact)',
+        borderRadius: 'var(--ids-comp-chip-container-size-border-radius-compact)',
+        borderWidth: 'var(--ids-comp-chip-container-size-border-width-compact)',
+      },
+      '.ids-chip.ids-chip-compact:focus,.ids-chip.ids-chip-compact:focus-visible': {
+        outlineWidth: 'var(--ids-comp-chip-focused-outline-size-outline-compact)',
+      },
+      '.ids-chip.ids-chip-compact>.ids-avatar': {
+        width: 'var(--ids-comp-chip-avatar-size-avatar-compact)',
+        height: 'var(--ids-comp-chip-avatar-size-avatar-compact)',
+      },
+      '.ids-chip.ids-chip-compact>[idsLeadingIcon]': {
+        paddingLeft: 'var(--ids-comp-chip-icon-size-padding-left-compact)',
+        paddingRight: 'var(--ids-comp-chip-icon-size-padding-right-compact)',
+      },
+      '.ids-chip.ids-chip-compact>.ids-chip__label': {
+        padding: '0 var(--ids-comp-chip-label-size-padding-x-compact)',
+        fontFamily: 'var(--ids-comp-chip-label-typography-font-family-compact)',
+        fontSize: 'var(--ids-comp-chip-label-typography-font-size-compact)',
+        fontWeight: 'var(--ids-comp-chip-label-typography-font-weight-compact)',
+        lineHeight: 'var(--ids-comp-chip-label-typography-line-height-compact)',
+      },
+      '.ids-chip.ids-chip-compact>.ids-icon-button': {
+        width: 'var(--ids-comp-chip-icon-button-size-icon-button-compact)',
+        height: 'var(--ids-comp-chip-icon-button-size-icon-button-compact)',
+      },
+      '.ids-chip.ids-chip-compact .ids-icon': {
+        width: 'var(--ids-comp-chip-icon-size-icon-compact)',
+        height: 'var(--ids-comp-chip-icon-size-icon-compact)',
+        fontSize: 'var(--ids-comp-chip-icon-typography-font-size-compact)',
+        fontWeight: 'var(--ids-comp-chip-icon-typography-font-weight-compact)',
+        lineHeight: 'var(--ids-comp-chip-icon-typography-line-height-compact)',
+      },
+      '.ids-chip.ids-chip-comfortable': {
+        height: 'var(--ids-comp-chip-container-size-height-comfortable)',
+        padding: 'var(--ids-comp-chip-container-size-padding-y-comfortable) var(--ids-comp-chip-container-size-padding-x-comfortable)',
+        borderRadius: 'var(--ids-comp-chip-container-size-border-radius-comfortable)',
+        borderWidth: 'var(--ids-comp-chip-container-size-border-width-comfortable)',
+      },
+      '.ids-chip.ids-chip-comfortable:focus,.ids-chip.ids-chip-comfortable:focus-visible': {
+        outlineWidth: 'var(--ids-comp-chip-focused-outline-size-outline-comfortable)',
+      },
+      '.ids-chip.ids-chip-comfortable>.ids-avatar': {
+        width: 'var(--ids-comp-chip-avatar-size-avatar-comfortable)',
+        height: 'var(--ids-comp-chip-avatar-size-avatar-comfortable)',
+      },
+      '.ids-chip.ids-chip-comfortable>[idsLeadingIcon]': {
+        paddingLeft: 'var(--ids-comp-chip-icon-size-padding-left-comfortable)',
+        paddingRight: 'var(--ids-comp-chip-icon-size-padding-right-comfortable)',
+      },
+      '.ids-chip.ids-chip-comfortable>.ids-chip__label': {
+        padding: '0 var(--ids-comp-chip-label-size-padding-x-comfortable)',
+        fontFamily: 'var(--ids-comp-chip-label-typography-font-family-comfortable)',
+        fontSize: 'var(--ids-comp-chip-label-typography-font-size-comfortable)',
+        fontWeight: 'var(--ids-comp-chip-label-typography-font-weight-comfortable)',
+        lineHeight: 'var(--ids-comp-chip-label-typography-line-height-comfortable)',
+      },
+      '.ids-chip.ids-chip-comfortable>.ids-icon-button': {
+        width: 'var(--ids-comp-chip-icon-button-size-icon-button-comfortable)',
+        height: 'var(--ids-comp-chip-icon-button-size-icon-button-comfortable)',
+      },
+      '.ids-chip.ids-chip-comfortable .ids-icon': {
+        width: 'var(--ids-comp-chip-icon-size-icon-comfortable)',
+        height: 'var(--ids-comp-chip-icon-size-icon-comfortable)',
+        fontSize: 'var(--ids-comp-chip-icon-typography-font-size-comfortable)',
+        fontWeight: 'var(--ids-comp-chip-icon-typography-font-weight-comfortable)',
+        lineHeight: 'var(--ids-comp-chip-icon-typography-line-height-comfortable)',
+      },
+      '.ids-chip.ids-chip-spacious': {
+        height: 'var(--ids-comp-chip-container-size-height-spacious)',
+        padding: 'var(--ids-comp-chip-container-size-padding-y-spacious) var(--ids-comp-chip-container-size-padding-x-spacious)',
+        borderRadius: 'var(--ids-comp-chip-container-size-border-radius-spacious)',
+        borderWidth: 'var(--ids-comp-chip-container-size-border-width-spacious)',
+      },
+      '.ids-chip.ids-chip-spacious:focus,.ids-chip.ids-chip-spacious:focus-visible': {
+        outlineWidth: 'var(--ids-comp-chip-focused-outline-size-outline-spacious)',
+      },
+      '.ids-chip.ids-chip-spacious>.ids-avatar': {
+        width: 'var(--ids-comp-chip-avatar-size-avatar-spacious)',
+        height: 'var(--ids-comp-chip-avatar-size-avatar-spacious)',
+      },
+      '.ids-chip.ids-chip-spacious>[idsLeadingIcon]': {
+        paddingLeft: 'var(--ids-comp-chip-icon-size-padding-left-spacious)',
+        paddingRight: 'var(--ids-comp-chip-icon-size-padding-right-spacious)',
+      },
+      '.ids-chip.ids-chip-spacious>.ids-chip__label': {
+        padding: '0 var(--ids-comp-chip-label-size-padding-x-spacious)',
+        fontFamily: 'var(--ids-comp-chip-label-typography-font-family-spacious)',
+        fontSize: 'var(--ids-comp-chip-label-typography-font-size-spacious)',
+        fontWeight: 'var(--ids-comp-chip-label-typography-font-weight-spacious)',
+        lineHeight: 'var(--ids-comp-chip-label-typography-line-height-spacious)',
+      },
+      '.ids-chip.ids-chip-spacious>.ids-icon-button': {
+        width: 'var(--ids-comp-chip-icon-button-size-icon-button-spacious)',
+        height: 'var(--ids-comp-chip-icon-button-size-icon-button-spacious)',
+      },
+      '.ids-chip.ids-chip-spacious .ids-icon': {
+        width: 'var(--ids-comp-chip-icon-size-icon-spacious)',
+        height: 'var(--ids-comp-chip-icon-size-icon-spacious)',
+        fontSize: 'var(--ids-comp-chip-icon-typography-font-size-spacious)',
+        fontWeight: 'var(--ids-comp-chip-icon-typography-font-weight-spacious)',
+        lineHeight: 'var(--ids-comp-chip-icon-typography-line-height-spacious)',
+      },
+      '.ids-chip.ids-chip-dense': {
+        height: 'var(--ids-comp-chip-container-size-height-dense)',
+        padding: 'var(--ids-comp-chip-container-size-padding-y-dense) var(--ids-comp-chip-container-size-padding-x-dense)',
+        borderRadius: 'var(--ids-comp-chip-container-size-border-radius-dense)',
+        borderWidth: 'var(--ids-comp-chip-container-size-border-width-dense)',
+      },
+      '.ids-chip.ids-chip-dense:focus,.ids-chip.ids-chip-dense:focus-visible': {
+        outlineWidth: 'var(--ids-comp-chip-focused-outline-size-outline-dense)',
+      },
+      '.ids-chip.ids-chip-dense>.ids-avatar': {
+        width: 'var(--ids-comp-chip-avatar-size-avatar-dense)',
+        height: 'var(--ids-comp-chip-avatar-size-avatar-dense)',
+      },
+      '.ids-chip.ids-chip-dense>[idsLeadingIcon]': {
+        paddingLeft: 'var(--ids-comp-chip-icon-size-padding-left-dense)',
+        paddingRight: 'var(--ids-comp-chip-icon-size-padding-right-dense)',
+      },
+      '.ids-chip.ids-chip-dense>.ids-chip__label': {
+        padding: '0 var(--ids-comp-chip-label-size-padding-x-dense)',
+        fontFamily: 'var(--ids-comp-chip-label-typography-font-family-dense)',
+        fontSize: 'var(--ids-comp-chip-label-typography-font-size-dense)',
+        fontWeight: 'var(--ids-comp-chip-label-typography-font-weight-dense)',
+        lineHeight: 'var(--ids-comp-chip-label-typography-line-height-dense)',
+      },
+      '.ids-chip.ids-chip-dense>.ids-icon-button': {
+        width: 'var(--ids-comp-chip-icon-button-size-icon-button-dense)',
+        height: 'var(--ids-comp-chip-icon-button-size-icon-button-dense)',
+      },
+      '.ids-chip.ids-chip-dense .ids-icon': {
+        width: 'var(--ids-comp-chip-icon-size-icon-dense)',
+        height: 'var(--ids-comp-chip-icon-size-icon-dense)',
+        fontSize: 'var(--ids-comp-chip-icon-typography-font-size-dense)',
+        fontWeight: 'var(--ids-comp-chip-icon-typography-font-weight-dense)',
+        lineHeight: 'var(--ids-comp-chip-icon-typography-line-height-dense)',
+      },
+      '.ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)': {
+        background: 'var(--ids-comp-chip-filled-color-bg-primary-default)',
+        borderColor: 'var(--ids-comp-chip-filled-color-border-primary-default)',
+      },
+      '.ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)>.ids-icon': {
+        color: 'var(--ids-comp-chip-filled-color-fg-icon-primary-default)',
+      },
+      '.ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-filled-color-fg-label-primary-default)',
+      },
+      '.ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)[role=button]:hover': {
+        background: 'var(--ids-comp-chip-filled-color-bg-primary-hovered)',
+        borderColor: 'var(--ids-comp-chip-filled-color-border-primary-hovered)',
+      },
+      '.ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)[role=button]:hover>.ids-icon': {
+        color: 'var(--ids-comp-chip-filled-color-fg-icon-primary-hovered)',
       },
-      '.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-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)[role=button]:hover>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-filled-color-fg-label-primary-hovered)',
       },
-      '.ids-card.ids-card-filled.ids-card-light.ids-card-clickable:focus,.ids-card.ids-card-filled.ids-card-light.ids-card-clickable:focus-visible':
+      '.ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)[role=button]:focus,.ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)[role=button]:focus-visible':
         {
-          backgroundColor: 'var(--ids-comp-card-filled-color-bg-light-focused)',
-          borderColor: 'var(--ids-comp-card-filled-color-border-light-focused)',
-          outlineColor: 'var(--ids-comp-card-focused-outline-color-light-focused)',
+          background: 'var(--ids-comp-chip-filled-color-bg-primary-focused)',
+          borderColor: 'var(--ids-comp-chip-filled-color-border-primary-focused)',
+          outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-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-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)[role=button]:focus>.ids-icon,.ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-icon':
+        { color: 'var(--ids-comp-chip-filled-color-fg-icon-primary-focused)' },
+      '.ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)[role=button]:focus>.ids-chip__label,.ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-chip__label':
+        { color: 'var(--ids-comp-chip-filled-color-fg-label-primary-focused)' },
+      '.ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)[role=button]:active': {
+        background: 'var(--ids-comp-chip-filled-color-bg-primary-pressed)',
+        borderColor: 'var(--ids-comp-chip-filled-color-border-primary-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-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)[role=button]:active>.ids-icon': {
+        color: 'var(--ids-comp-chip-filled-color-fg-icon-primary-pressed)',
       },
-      '.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-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)[role=button]:active>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-filled-color-fg-label-primary-pressed)',
       },
-      '.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-chip.ids-chip-filled.ids-chip-primary.ids-chip-disabled': {
+        background: 'var(--ids-comp-chip-filled-color-bg-primary-disabled)',
+        borderColor: 'var(--ids-comp-chip-filled-color-border-primary-disabled)',
       },
-      '.ids-card.ids-card-filled.ids-card-dark.ids-card-clickable:focus,.ids-card.ids-card-filled.ids-card-dark.ids-card-clickable:focus-visible':
-        {
-          backgroundColor: 'var(--ids-comp-card-filled-color-bg-dark-focused)',
-          borderColor: 'var(--ids-comp-card-filled-color-border-dark-focused)',
-          outlineColor: 'var(--ids-comp-card-focused-outline-color-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-chip.ids-chip-filled.ids-chip-primary.ids-chip-disabled>.ids-icon': {
+        color: 'var(--ids-comp-chip-filled-color-fg-icon-primary-disabled)',
       },
-      '.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-chip.ids-chip-filled.ids-chip-primary.ids-chip-disabled>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-filled-color-fg-label-primary-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-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)': {
+        background: 'var(--ids-comp-chip-filled-color-bg-secondary-default)',
+        borderColor: 'var(--ids-comp-chip-filled-color-border-secondary-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-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)>.ids-icon': {
+        color: 'var(--ids-comp-chip-filled-color-fg-icon-secondary-default)',
       },
-      '.ids-card.ids-card-filled.ids-card-surface.ids-card-clickable:focus,.ids-card.ids-card-filled.ids-card-surface.ids-card-clickable:focus-visible':
-        {
-          backgroundColor: 'var(--ids-comp-card-filled-color-bg-surface-focused)',
-          borderColor: 'var(--ids-comp-card-filled-color-border-surface-focused)',
-          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-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-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-filled-color-fg-label-secondary-default)',
       },
-      '.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-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:hover': {
+        background: 'var(--ids-comp-chip-filled-color-bg-secondary-hovered)',
+        borderColor: 'var(--ids-comp-chip-filled-color-border-secondary-hovered)',
       },
-      '.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-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:hover>.ids-icon': {
+        color: 'var(--ids-comp-chip-filled-color-fg-icon-secondary-hovered)',
       },
-      '.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-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:hover>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-filled-color-fg-label-secondary-hovered)',
       },
-      '.ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable:focus,.ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable:focus-visible':
+      '.ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:focus,.ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:focus-visible':
         {
-          backgroundColor: 'var(--ids-comp-card-outlined-color-bg-primary-focused)',
-          borderColor: 'var(--ids-comp-card-outlined-color-border-primary-focused)',
-          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
+          background: 'var(--ids-comp-chip-filled-color-bg-secondary-focused)',
+          borderColor: 'var(--ids-comp-chip-filled-color-border-secondary-focused)',
+          outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-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-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:focus>.ids-icon,.ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-icon':
+        { color: 'var(--ids-comp-chip-filled-color-fg-icon-secondary-focused)' },
+      '.ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:focus>.ids-chip__label,.ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-chip__label':
+        { color: 'var(--ids-comp-chip-filled-color-fg-label-secondary-focused)' },
+      '.ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:active': {
+        background: 'var(--ids-comp-chip-filled-color-bg-secondary-pressed)',
+        borderColor: 'var(--ids-comp-chip-filled-color-border-secondary-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-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:active>.ids-icon': {
+        color: 'var(--ids-comp-chip-filled-color-fg-icon-secondary-pressed)',
       },
-      '.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-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:active>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-filled-color-fg-label-secondary-pressed)',
       },
-      '.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-chip.ids-chip-filled.ids-chip-secondary.ids-chip-disabled': {
+        background: 'var(--ids-comp-chip-filled-color-bg-secondary-disabled)',
+        borderColor: 'var(--ids-comp-chip-filled-color-border-secondary-disabled)',
       },
-      '.ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable:focus,.ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable:focus-visible':
-        {
-          backgroundColor: 'var(--ids-comp-card-outlined-color-bg-secondary-focused)',
-          borderColor: 'var(--ids-comp-card-outlined-color-border-secondary-focused)',
-          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-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-chip.ids-chip-filled.ids-chip-secondary.ids-chip-disabled>.ids-icon': {
+        color: 'var(--ids-comp-chip-filled-color-fg-icon-secondary-disabled)',
       },
-      '.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-chip.ids-chip-filled.ids-chip-secondary.ids-chip-disabled>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-filled-color-fg-label-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-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)': {
+        background: 'var(--ids-comp-chip-filled-color-bg-surface-default)',
+        borderColor: 'var(--ids-comp-chip-filled-color-border-surface-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-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)>.ids-icon': {
+        color: 'var(--ids-comp-chip-filled-color-fg-icon-surface-default)',
       },
-      '.ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable:focus,.ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable:focus-visible':
-        {
-          backgroundColor: 'var(--ids-comp-card-outlined-color-bg-brand-focused)',
-          borderColor: 'var(--ids-comp-card-outlined-color-border-brand-focused)',
-          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-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-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-filled-color-fg-label-surface-default)',
       },
-      '.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-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:hover': {
+        background: 'var(--ids-comp-chip-filled-color-bg-surface-hovered)',
+        borderColor: 'var(--ids-comp-chip-filled-color-border-surface-hovered)',
       },
-      '.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-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:hover>.ids-icon': {
+        color: 'var(--ids-comp-chip-filled-color-fg-icon-surface-hovered)',
       },
-      '.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-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:hover>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-filled-color-fg-label-surface-hovered)',
       },
-      '.ids-card.ids-card-outlined.ids-card-error.ids-card-clickable:focus,.ids-card.ids-card-outlined.ids-card-error.ids-card-clickable:focus-visible':
+      '.ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:focus,.ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:focus-visible':
         {
-          backgroundColor: 'var(--ids-comp-card-outlined-color-bg-error-focused)',
-          borderColor: 'var(--ids-comp-card-outlined-color-border-error-focused)',
-          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
+          background: 'var(--ids-comp-chip-filled-color-bg-surface-focused)',
+          borderColor: 'var(--ids-comp-chip-filled-color-border-surface-focused)',
+          outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-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-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:focus>.ids-icon,.ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-icon':
+        { color: 'var(--ids-comp-chip-filled-color-fg-icon-surface-focused)' },
+      '.ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:focus>.ids-chip__label,.ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-chip__label':
+        { color: 'var(--ids-comp-chip-filled-color-fg-label-surface-focused)' },
+      '.ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:active': {
+        background: 'var(--ids-comp-chip-filled-color-bg-surface-pressed)',
+        borderColor: 'var(--ids-comp-chip-filled-color-border-surface-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-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:active>.ids-icon': {
+        color: 'var(--ids-comp-chip-filled-color-fg-icon-surface-pressed)',
       },
-      '.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-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:active>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-filled-color-fg-label-surface-pressed)',
       },
-      '.ids-card.ids-card-outlined.ids-card-success.ids-card-clickable:focus,.ids-card.ids-card-outlined.ids-card-success.ids-card-clickable:focus-visible':
-        {
-          backgroundColor: 'var(--ids-comp-card-outlined-color-bg-success-focused)',
-          borderColor: 'var(--ids-comp-card-outlined-color-border-success-focused)',
-          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-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-chip.ids-chip-filled.ids-chip-surface.ids-chip-disabled': {
+        background: 'var(--ids-comp-chip-filled-color-bg-surface-disabled)',
+        borderColor: 'var(--ids-comp-chip-filled-color-border-surface-disabled)',
       },
-      '.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-chip.ids-chip-filled.ids-chip-surface.ids-chip-disabled>.ids-icon': {
+        color: 'var(--ids-comp-chip-filled-color-fg-icon-surface-disabled)',
       },
-      '.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-chip.ids-chip-filled.ids-chip-surface.ids-chip-disabled>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-filled-color-fg-label-surface-disabled)',
       },
-      '.ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable:focus,.ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable:focus-visible':
-        {
-          backgroundColor: 'var(--ids-comp-card-outlined-color-bg-warning-focused)',
-          borderColor: 'var(--ids-comp-card-outlined-color-border-warning-focused)',
-          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-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-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)': {
+        background: 'var(--ids-comp-chip-filled-color-bg-light-default)',
+        borderColor: 'var(--ids-comp-chip-filled-color-border-light-default)',
+      },
+      '.ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)>.ids-icon': {
+        color: 'var(--ids-comp-chip-filled-color-fg-icon-light-default)',
+      },
+      '.ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-filled-color-fg-label-light-default)',
+      },
+      '.ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:hover': {
+        background: 'var(--ids-comp-chip-filled-color-bg-light-hovered)',
+        borderColor: 'var(--ids-comp-chip-filled-color-border-light-hovered)',
       },
-      '.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-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:hover>.ids-icon': {
+        color: 'var(--ids-comp-chip-filled-color-fg-icon-light-hovered)',
       },
-      '.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-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:hover>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-filled-color-fg-label-light-hovered)',
       },
-      '.ids-card.ids-card-outlined.ids-card-info.ids-card-clickable:focus,.ids-card.ids-card-outlined.ids-card-info.ids-card-clickable:focus-visible':
+      '.ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:focus,.ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:focus-visible':
         {
-          backgroundColor: 'var(--ids-comp-card-outlined-color-bg-info-focused)',
-          borderColor: 'var(--ids-comp-card-outlined-color-border-info-focused)',
-          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
+          background: 'var(--ids-comp-chip-filled-color-bg-light-focused)',
+          borderColor: 'var(--ids-comp-chip-filled-color-border-light-focused)',
+          outlineColor: 'var(--ids-comp-button-focused-outline-color-light-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-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:focus>.ids-icon,.ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-icon':
+        { color: 'var(--ids-comp-chip-filled-color-fg-icon-light-focused)' },
+      '.ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:focus>.ids-chip__label,.ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-chip__label':
+        { color: 'var(--ids-comp-chip-filled-color-fg-label-light-focused)' },
+      '.ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:active': {
+        background: 'var(--ids-comp-chip-filled-color-bg-light-pressed)',
+        borderColor: 'var(--ids-comp-chip-filled-color-border-light-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-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:active>.ids-icon': {
+        color: 'var(--ids-comp-chip-filled-color-fg-icon-light-pressed)',
       },
-      '.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-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:active>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-filled-color-fg-label-light-pressed)',
       },
-      '.ids-card.ids-card-outlined.ids-card-light.ids-card-clickable:focus,.ids-card.ids-card-outlined.ids-card-light.ids-card-clickable:focus-visible':
-        {
-          backgroundColor: 'var(--ids-comp-card-outlined-color-bg-light-focused)',
-          borderColor: 'var(--ids-comp-card-outlined-color-border-light-focused)',
-          outlineColor: 'var(--ids-comp-card-focused-outline-color-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-chip.ids-chip-filled.ids-chip-light.ids-chip-disabled': {
+        background: 'var(--ids-comp-chip-filled-color-bg-light-disabled)',
+        borderColor: 'var(--ids-comp-chip-filled-color-border-light-disabled)',
       },
-      '.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-chip.ids-chip-filled.ids-chip-light.ids-chip-disabled>.ids-icon': {
+        color: 'var(--ids-comp-chip-filled-color-fg-icon-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-chip.ids-chip-filled.ids-chip-light.ids-chip-disabled>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-filled-color-fg-label-light-disabled)',
       },
-      '.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-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)': {
+        background: 'var(--ids-comp-chip-filled-color-bg-dark-default)',
+        borderColor: 'var(--ids-comp-chip-filled-color-border-dark-default)',
       },
-      '.ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable:focus,.ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable:focus-visible':
-        {
-          backgroundColor: 'var(--ids-comp-card-outlined-color-bg-dark-focused)',
-          borderColor: 'var(--ids-comp-card-outlined-color-border-dark-focused)',
-          outlineColor: 'var(--ids-comp-card-focused-outline-color-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-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)>.ids-icon': {
+        color: 'var(--ids-comp-chip-filled-color-fg-icon-dark-default)',
       },
-      '.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-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-filled-color-fg-label-dark-default)',
       },
-      '.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-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:hover': {
+        background: 'var(--ids-comp-chip-filled-color-bg-dark-hovered)',
+        borderColor: 'var(--ids-comp-chip-filled-color-border-dark-hovered)',
       },
-      '.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-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:hover>.ids-icon': {
+        color: 'var(--ids-comp-chip-filled-color-fg-icon-dark-hovered)',
       },
-      '.ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable:focus,.ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable:focus-visible':
+      '.ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:hover>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-filled-color-fg-label-dark-hovered)',
+      },
+      '.ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:focus,.ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:focus-visible':
         {
-          backgroundColor: 'var(--ids-comp-card-outlined-color-bg-surface-focused)',
-          borderColor: 'var(--ids-comp-card-outlined-color-border-surface-focused)',
-          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
+          background: 'var(--ids-comp-chip-filled-color-bg-dark-focused)',
+          borderColor: 'var(--ids-comp-chip-filled-color-border-dark-focused)',
+          outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-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-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:focus>.ids-icon,.ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-icon':
+        { color: 'var(--ids-comp-chip-filled-color-fg-icon-dark-focused)' },
+      '.ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:focus>.ids-chip__label,.ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-chip__label':
+        { color: 'var(--ids-comp-chip-filled-color-fg-label-dark-focused)' },
+      '.ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:active': {
+        background: 'var(--ids-comp-chip-filled-color-bg-dark-pressed)',
+        borderColor: 'var(--ids-comp-chip-filled-color-border-dark-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-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:active>.ids-icon': {
+        color: 'var(--ids-comp-chip-filled-color-fg-icon-dark-pressed)',
       },
-      '.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-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:active>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-filled-color-fg-label-dark-pressed)',
       },
-      '.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-chip.ids-chip-filled.ids-chip-dark.ids-chip-disabled': {
+        background: 'var(--ids-comp-chip-filled-color-bg-dark-disabled)',
+        borderColor: 'var(--ids-comp-chip-filled-color-border-dark-disabled)',
       },
-      '.ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable:focus,.ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable:focus-visible':
-        {
-          backgroundColor: 'var(--ids-comp-card-elevated-color-bg-primary-focused)',
-          borderColor: 'var(--ids-comp-card-elevated-color-border-primary-focused)',
-          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-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-chip.ids-chip-filled.ids-chip-dark.ids-chip-disabled>.ids-icon': {
+        color: 'var(--ids-comp-chip-filled-color-fg-icon-dark-disabled)',
       },
-      '.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-chip.ids-chip-filled.ids-chip-dark.ids-chip-disabled>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-filled-color-fg-label-dark-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-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)': {
+        background: 'var(--ids-comp-chip-outlined-color-bg-primary-default)',
+        borderColor: 'var(--ids-comp-chip-outlined-color-border-primary-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-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)>.ids-icon': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-icon-primary-default)',
       },
-      '.ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable:focus,.ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable:focus-visible':
-        {
-          backgroundColor: 'var(--ids-comp-card-elevated-color-bg-secondary-focused)',
-          borderColor: 'var(--ids-comp-card-elevated-color-border-secondary-focused)',
-          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-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-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-label-primary-default)',
       },
-      '.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-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:hover': {
+        background: 'var(--ids-comp-chip-outlined-color-bg-primary-hovered)',
+        borderColor: 'var(--ids-comp-chip-outlined-color-border-primary-hovered)',
       },
-      '.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-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:hover>.ids-icon': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-icon-primary-hovered)',
       },
-      '.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-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:hover>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-label-primary-hovered)',
       },
-      '.ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable:focus,.ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable:focus-visible':
+      '.ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:focus,.ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:focus-visible':
         {
-          backgroundColor: 'var(--ids-comp-card-elevated-color-bg-brand-focused)',
-          borderColor: 'var(--ids-comp-card-elevated-color-border-brand-focused)',
-          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
+          background: 'var(--ids-comp-chip-outlined-color-bg-primary-focused)',
+          borderColor: 'var(--ids-comp-chip-outlined-color-border-primary-focused)',
+          outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-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-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:focus>.ids-icon,.ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-icon':
+        { color: 'var(--ids-comp-chip-outlined-color-fg-icon-primary-focused)' },
+      '.ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:focus>.ids-chip__label,.ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-chip__label':
+        { color: 'var(--ids-comp-chip-outlined-color-fg-label-primary-focused)' },
+      '.ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:active': {
+        background: 'var(--ids-comp-chip-outlined-color-bg-primary-pressed)',
+        borderColor: 'var(--ids-comp-chip-outlined-color-border-primary-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-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:active>.ids-icon': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-icon-primary-pressed)',
       },
-      '.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-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:active>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-label-primary-pressed)',
       },
-      '.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-chip.ids-chip-outlined.ids-chip-primary.ids-chip-disabled': {
+        background: 'var(--ids-comp-chip-outlined-color-bg-primary-disabled)',
+        borderColor: 'var(--ids-comp-chip-outlined-color-border-primary-disabled)',
       },
-      '.ids-card.ids-card-elevated.ids-card-error.ids-card-clickable:focus,.ids-card.ids-card-elevated.ids-card-error.ids-card-clickable:focus-visible':
-        {
-          backgroundColor: 'var(--ids-comp-card-elevated-color-bg-error-focused)',
-          borderColor: 'var(--ids-comp-card-elevated-color-border-error-focused)',
-          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-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-chip.ids-chip-outlined.ids-chip-primary.ids-chip-disabled>.ids-icon': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-icon-primary-disabled)',
       },
-      '.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-chip.ids-chip-outlined.ids-chip-primary.ids-chip-disabled>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-label-primary-disabled)',
       },
-      '.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-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)': {
+        background: 'var(--ids-comp-chip-outlined-color-bg-secondary-default)',
+        borderColor: 'var(--ids-comp-chip-outlined-color-border-secondary-default)',
       },
-      '.ids-card.ids-card-elevated.ids-card-success.ids-card-clickable:focus,.ids-card.ids-card-elevated.ids-card-success.ids-card-clickable:focus-visible':
-        {
-          backgroundColor: 'var(--ids-comp-card-elevated-color-bg-success-focused)',
-          borderColor: 'var(--ids-comp-card-elevated-color-border-success-focused)',
-          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-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-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)>.ids-icon': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-icon-secondary-default)',
       },
-      '.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-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-label-secondary-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-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:hover': {
+        background: 'var(--ids-comp-chip-outlined-color-bg-secondary-hovered)',
+        borderColor: 'var(--ids-comp-chip-outlined-color-border-secondary-hovered)',
       },
-      '.ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable:focus,.ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable:focus-visible':
+      '.ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:hover>.ids-icon': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-icon-secondary-hovered)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:hover>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-label-secondary-hovered)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:focus,.ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:focus-visible':
         {
-          backgroundColor: 'var(--ids-comp-card-elevated-color-bg-warning-focused)',
-          borderColor: 'var(--ids-comp-card-elevated-color-border-warning-focused)',
-          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
+          background: 'var(--ids-comp-chip-outlined-color-bg-secondary-focused)',
+          borderColor: 'var(--ids-comp-chip-outlined-color-border-secondary-focused)',
+          outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-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-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:focus>.ids-icon,.ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-icon':
+        { color: 'var(--ids-comp-chip-outlined-color-fg-icon-secondary-focused)' },
+      '.ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:focus>.ids-chip__label,.ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-chip__label':
+        { color: 'var(--ids-comp-chip-outlined-color-fg-label-secondary-focused)' },
+      '.ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:active': {
+        background: 'var(--ids-comp-chip-outlined-color-bg-secondary-pressed)',
+        borderColor: 'var(--ids-comp-chip-outlined-color-border-secondary-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-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:active>.ids-icon': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-icon-secondary-pressed)',
       },
-      '.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-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:active>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-label-secondary-pressed)',
       },
-      '.ids-card.ids-card-elevated.ids-card-info.ids-card-clickable:focus,.ids-card.ids-card-elevated.ids-card-info.ids-card-clickable:focus-visible':
-        {
-          backgroundColor: 'var(--ids-comp-card-elevated-color-bg-info-focused)',
-          borderColor: 'var(--ids-comp-card-elevated-color-border-info-focused)',
-          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-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-chip.ids-chip-outlined.ids-chip-secondary.ids-chip-disabled': {
+        background: 'var(--ids-comp-chip-outlined-color-bg-secondary-disabled)',
+        borderColor: 'var(--ids-comp-chip-outlined-color-border-secondary-disabled)',
       },
-      '.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-chip.ids-chip-outlined.ids-chip-secondary.ids-chip-disabled>.ids-icon': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-icon-secondary-disabled)',
       },
-      '.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-chip.ids-chip-outlined.ids-chip-secondary.ids-chip-disabled>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-label-secondary-disabled)',
       },
-      '.ids-card.ids-card-elevated.ids-card-light.ids-card-clickable:focus,.ids-card.ids-card-elevated.ids-card-light.ids-card-clickable:focus-visible':
+      '.ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)': {
+        background: 'var(--ids-comp-chip-outlined-color-bg-surface-default)',
+        borderColor: 'var(--ids-comp-chip-outlined-color-border-surface-default)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)>.ids-icon': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-icon-surface-default)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-label-surface-default)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)[role=button]:hover': {
+        background: 'var(--ids-comp-chip-outlined-color-bg-surface-hovered)',
+        borderColor: 'var(--ids-comp-chip-outlined-color-border-surface-hovered)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)[role=button]:hover>.ids-icon': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-icon-surface-hovered)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)[role=button]:hover>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-label-surface-hovered)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)[role=button]:focus,.ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)[role=button]:focus-visible':
         {
-          backgroundColor: 'var(--ids-comp-card-elevated-color-bg-light-focused)',
-          borderColor: 'var(--ids-comp-card-elevated-color-border-light-focused)',
-          outlineColor: 'var(--ids-comp-card-focused-outline-color-light-focused)',
+          background: 'var(--ids-comp-chip-outlined-color-bg-surface-focused)',
+          borderColor: 'var(--ids-comp-chip-outlined-color-border-surface-focused)',
+          outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-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-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)[role=button]:focus>.ids-icon,.ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-icon':
+        { color: 'var(--ids-comp-chip-outlined-color-fg-icon-surface-focused)' },
+      '.ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)[role=button]:focus>.ids-chip__label,.ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-chip__label':
+        { color: 'var(--ids-comp-chip-outlined-color-fg-label-surface-focused)' },
+      '.ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)[role=button]:active': {
+        background: 'var(--ids-comp-chip-outlined-color-bg-surface-pressed)',
+        borderColor: 'var(--ids-comp-chip-outlined-color-border-surface-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-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)[role=button]:active>.ids-icon': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-icon-surface-pressed)',
       },
-      '.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-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)[role=button]:active>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-label-surface-pressed)',
       },
-      '.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-chip.ids-chip-outlined.ids-chip-surface.ids-chip-disabled': {
+        background: 'var(--ids-comp-chip-outlined-color-bg-surface-disabled)',
+        borderColor: 'var(--ids-comp-chip-outlined-color-border-surface-disabled)',
       },
-      '.ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable:focus,.ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable:focus-visible':
+      '.ids-chip.ids-chip-outlined.ids-chip-surface.ids-chip-disabled>.ids-icon': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-icon-surface-disabled)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-surface.ids-chip-disabled>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-label-surface-disabled)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)': {
+        background: 'var(--ids-comp-chip-outlined-color-bg-light-default)',
+        borderColor: 'var(--ids-comp-chip-outlined-color-border-light-default)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)>.ids-icon': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-icon-light-default)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-label-light-default)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)[role=button]:hover': {
+        background: 'var(--ids-comp-chip-outlined-color-bg-light-hovered)',
+        borderColor: 'var(--ids-comp-chip-outlined-color-border-light-hovered)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)[role=button]:hover>.ids-icon': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-icon-light-hovered)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)[role=button]:hover>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-label-light-hovered)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)[role=button]:focus,.ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)[role=button]:focus-visible':
         {
-          backgroundColor: 'var(--ids-comp-card-elevated-color-bg-dark-focused)',
-          borderColor: 'var(--ids-comp-card-elevated-color-border-dark-focused)',
-          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
+          background: 'var(--ids-comp-chip-outlined-color-bg-light-focused)',
+          borderColor: 'var(--ids-comp-chip-outlined-color-border-light-focused)',
+          outlineColor: 'var(--ids-comp-button-focused-outline-color-light-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-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)[role=button]:focus>.ids-icon,.ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-icon':
+        { color: 'var(--ids-comp-chip-outlined-color-fg-icon-light-focused)' },
+      '.ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)[role=button]:focus>.ids-chip__label,.ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-chip__label':
+        { color: 'var(--ids-comp-chip-outlined-color-fg-label-light-focused)' },
+      '.ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)[role=button]:active': {
+        background: 'var(--ids-comp-chip-outlined-color-bg-light-pressed)',
+        borderColor: 'var(--ids-comp-chip-outlined-color-border-light-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-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)[role=button]:active>.ids-icon': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-icon-light-pressed)',
       },
-      '.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-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)[role=button]:active>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-label-light-pressed)',
       },
-      '.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-chip.ids-chip-outlined.ids-chip-light.ids-chip-disabled': {
+        background: 'var(--ids-comp-chip-outlined-color-bg-light-disabled)',
+        borderColor: 'var(--ids-comp-chip-outlined-color-border-light-disabled)',
       },
-      '.ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable:focus,.ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable:focus-visible':
+      '.ids-chip.ids-chip-outlined.ids-chip-light.ids-chip-disabled>.ids-icon': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-icon-light-disabled)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-light.ids-chip-disabled>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-label-light-disabled)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)': {
+        background: 'var(--ids-comp-chip-outlined-color-bg-dark-default)',
+        borderColor: 'var(--ids-comp-chip-outlined-color-border-dark-default)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)>.ids-icon': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-icon-dark-default)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-label-dark-default)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)[role=button]:hover': {
+        background: 'var(--ids-comp-chip-outlined-color-bg-dark-hovered)',
+        borderColor: 'var(--ids-comp-chip-outlined-color-border-dark-hovered)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)[role=button]:hover>.ids-icon': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-icon-dark-hovered)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)[role=button]:hover>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-label-dark-hovered)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)[role=button]:focus,.ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)[role=button]:focus-visible':
         {
-          backgroundColor: 'var(--ids-comp-card-elevated-color-bg-surface-focused)',
-          borderColor: 'var(--ids-comp-card-elevated-color-border-surface-focused)',
-          outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
+          background: 'var(--ids-comp-chip-outlined-color-bg-dark-focused)',
+          borderColor: 'var(--ids-comp-chip-outlined-color-border-dark-focused)',
+          outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-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-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)[role=button]:focus>.ids-icon,.ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-icon':
+        { color: 'var(--ids-comp-chip-outlined-color-fg-icon-dark-focused)' },
+      '.ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)[role=button]:focus>.ids-chip__label,.ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-chip__label':
+        { color: 'var(--ids-comp-chip-outlined-color-fg-label-dark-focused)' },
+      '.ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)[role=button]:active': {
+        background: 'var(--ids-comp-chip-outlined-color-bg-dark-pressed)',
+        borderColor: 'var(--ids-comp-chip-outlined-color-border-dark-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-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)[role=button]:active>.ids-icon': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-icon-dark-pressed)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)[role=button]:active>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-label-dark-pressed)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-dark.ids-chip-disabled': {
+        background: 'var(--ids-comp-chip-outlined-color-bg-dark-disabled)',
+        borderColor: 'var(--ids-comp-chip-outlined-color-border-dark-disabled)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-dark.ids-chip-disabled>.ids-icon': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-icon-dark-disabled)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-dark.ids-chip-disabled>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-label-dark-disabled)',
+      },
+      '.ids-chip-group': { display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap' },
+      '.ids-chip-group.ids-chip-group-compact': {
+        padding: 'var(--ids-comp-chip-group-size-padding-y-compact) var(--ids-comp-chip-group-size-padding-x-compact)',
+        columnGap: 'var(--ids-comp-chip-group-size-column-gap-compact)',
+        rowGap: 'var(--ids-comp-chip-group-size-row-gap-compact)',
+      },
+      '.ids-chip-group.ids-chip-group-comfortable': {
+        padding: 'var(--ids-comp-chip-group-size-padding-y-comfortable) var(--ids-comp-chip-group-size-padding-x-comfortable)',
+        columnGap: 'var(--ids-comp-chip-group-size-column-gap-comfortable)',
+        rowGap: 'var(--ids-comp-chip-group-size-row-gap-comfortable)',
+      },
+      '.ids-chip-group.ids-chip-group-spacious': {
+        padding: 'var(--ids-comp-chip-group-size-padding-y-spacious) var(--ids-comp-chip-group-size-padding-x-spacious)',
+        columnGap: 'var(--ids-comp-chip-group-size-column-gap-spacious)',
+        rowGap: 'var(--ids-comp-chip-group-size-row-gap-spacious)',
+      },
+      '.ids-chip-group.ids-chip-group-dense': {
+        padding: 'var(--ids-comp-chip-group-size-padding-y-dense) var(--ids-comp-chip-group-size-padding-x-dense)',
+        columnGap: 'var(--ids-comp-chip-group-size-column-gap-dense)',
+        rowGap: 'var(--ids-comp-chip-group-size-row-gap-dense)',
       },
       '.ids-dialog': {
         boxSizing: 'border-box',
@@ -8733,7 +9381,7 @@ module.exports = function ComponentsPlugin() {
         whiteSpace: 'nowrap',
         display: 'block',
       },
-      '.ids-select>.ids-select__trigger>.ids-select__arrow': { flexShrink: 0 },
+      '.ids-select>.ids-select__trigger>.ids-select__arrow': { display: 'flex', flexShrink: 0 },
       '.ids-select.ids-select-compact>.ids-select__trigger': { gap: 'var(--ids-comp-forms-select-size-gap-compact)' },
       '.ids-select.ids-select-compact>.ids-select__trigger>.ids-select__value>.ids-select__placeholder': {
         fontFamily: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-family-compact)',