@i-cell/ids-styles 0.0.19 → 0.0.21

package/dist/components.css

@@ -3748,16 +3748,6 @@
   border-style: solid;
   box-sizing: border-box;
 }
-.ids-chip[role=button]:focus, .ids-chip[role=button]:focus-visible {
-  outline-offset: 2px;
-  outline-style: solid;
-}
-.ids-chip:not([role=button]):focus, .ids-chip:not([role=button]):focus-visible {
-  outline-style: none;
-}
-.ids-chip.ids-chip-disabled {
-  cursor: not-allowed;
-}
 .ids-chip > .ids-chip__label {
   display: flex;
   align-items: center;
@@ -3768,9 +3758,6 @@
   border-radius: var(--ids-comp-chip-container-size-border-radius-compact);
   border-width: var(--ids-comp-chip-container-size-border-width-compact);
 }
-.ids-chip.ids-chip-compact:focus, .ids-chip.ids-chip-compact:focus-visible {
-  outline-width: 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);
@@ -3803,9 +3790,6 @@
   border-radius: var(--ids-comp-chip-container-size-border-radius-comfortable);
   border-width: var(--ids-comp-chip-container-size-border-width-comfortable);
 }
-.ids-chip.ids-chip-comfortable:focus, .ids-chip.ids-chip-comfortable:focus-visible {
-  outline-width: 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);
@@ -3838,9 +3822,6 @@
   border-radius: var(--ids-comp-chip-container-size-border-radius-spacious);
   border-width: var(--ids-comp-chip-container-size-border-width-spacious);
 }
-.ids-chip.ids-chip-spacious:focus, .ids-chip.ids-chip-spacious:focus-visible {
-  outline-width: 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);
@@ -3873,9 +3854,6 @@
   border-radius: var(--ids-comp-chip-container-size-border-radius-dense);
   border-width: var(--ids-comp-chip-container-size-border-width-dense);
 }
-.ids-chip.ids-chip-dense:focus, .ids-chip.ids-chip-dense:focus-visible {
-  outline-width: 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);
@@ -3902,521 +3880,552 @@
   font-weight: var(--ids-comp-chip-icon-typography-font-weight-dense);
   line-height: var(--ids-comp-chip-icon-typography-line-height-dense);
 }
-.ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled) {
+.ids-chip.ids-chip-filled.ids-chip-primary:not(:disabled) {
   background: var(--ids-comp-chip-filled-color-bg-primary-default);
   border-color: var(--ids-comp-chip-filled-color-border-primary-default);
 }
-.ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled) > .ids-icon {
+.ids-chip.ids-chip-filled.ids-chip-primary:not(: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 {
+.ids-chip.ids-chip-filled.ids-chip-primary:not(: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 {
+.ids-chip.ids-chip-filled.ids-chip-primary:disabled {
+  background: var(--ids-comp-chip-filled-color-bg-primary-disabled);
+  border-color: var(--ids-comp-chip-filled-color-border-primary-disabled);
+}
+.ids-chip.ids-chip-filled.ids-chip-primary:disabled > .ids-icon {
+  color: var(--ids-comp-chip-filled-color-fg-icon-primary-disabled);
+}
+.ids-chip.ids-chip-filled.ids-chip-primary:disabled > .ids-chip__label {
+  color: var(--ids-comp-chip-filled-color-fg-label-primary-disabled);
+}
+.ids-chip.ids-chip-filled.ids-chip-secondary:not(:disabled) {
+  background: var(--ids-comp-chip-filled-color-bg-secondary-default);
+  border-color: var(--ids-comp-chip-filled-color-border-secondary-default);
+}
+.ids-chip.ids-chip-filled.ids-chip-secondary:not(:disabled) > .ids-icon {
+  color: var(--ids-comp-chip-filled-color-fg-icon-secondary-default);
+}
+.ids-chip.ids-chip-filled.ids-chip-secondary:not(:disabled) > .ids-chip__label {
+  color: var(--ids-comp-chip-filled-color-fg-label-secondary-default);
+}
+.ids-chip.ids-chip-filled.ids-chip-secondary:disabled {
+  background: var(--ids-comp-chip-filled-color-bg-secondary-disabled);
+  border-color: var(--ids-comp-chip-filled-color-border-secondary-disabled);
+}
+.ids-chip.ids-chip-filled.ids-chip-secondary:disabled > .ids-icon {
+  color: var(--ids-comp-chip-filled-color-fg-icon-secondary-disabled);
+}
+.ids-chip.ids-chip-filled.ids-chip-secondary:disabled > .ids-chip__label {
+  color: var(--ids-comp-chip-filled-color-fg-label-secondary-disabled);
+}
+.ids-chip.ids-chip-filled.ids-chip-surface:not(:disabled) {
+  background: var(--ids-comp-chip-filled-color-bg-surface-default);
+  border-color: var(--ids-comp-chip-filled-color-border-surface-default);
+}
+.ids-chip.ids-chip-filled.ids-chip-surface:not(:disabled) > .ids-icon {
+  color: var(--ids-comp-chip-filled-color-fg-icon-surface-default);
+}
+.ids-chip.ids-chip-filled.ids-chip-surface:not(:disabled) > .ids-chip__label {
+  color: var(--ids-comp-chip-filled-color-fg-label-surface-default);
+}
+.ids-chip.ids-chip-filled.ids-chip-surface:disabled {
+  background: var(--ids-comp-chip-filled-color-bg-surface-disabled);
+  border-color: var(--ids-comp-chip-filled-color-border-surface-disabled);
+}
+.ids-chip.ids-chip-filled.ids-chip-surface:disabled > .ids-icon {
+  color: var(--ids-comp-chip-filled-color-fg-icon-surface-disabled);
+}
+.ids-chip.ids-chip-filled.ids-chip-surface:disabled > .ids-chip__label {
+  color: var(--ids-comp-chip-filled-color-fg-label-surface-disabled);
+}
+.ids-chip.ids-chip-filled.ids-chip-light:not(:disabled) {
+  background: var(--ids-comp-chip-filled-color-bg-light-default);
+  border-color: var(--ids-comp-chip-filled-color-border-light-default);
+}
+.ids-chip.ids-chip-filled.ids-chip-light:not(:disabled) > .ids-icon {
+  color: var(--ids-comp-chip-filled-color-fg-icon-light-default);
+}
+.ids-chip.ids-chip-filled.ids-chip-light:not(:disabled) > .ids-chip__label {
+  color: var(--ids-comp-chip-filled-color-fg-label-light-default);
+}
+.ids-chip.ids-chip-filled.ids-chip-light:disabled {
+  background: var(--ids-comp-chip-filled-color-bg-light-disabled);
+  border-color: var(--ids-comp-chip-filled-color-border-light-disabled);
+}
+.ids-chip.ids-chip-filled.ids-chip-light:disabled > .ids-icon {
+  color: var(--ids-comp-chip-filled-color-fg-icon-light-disabled);
+}
+.ids-chip.ids-chip-filled.ids-chip-light:disabled > .ids-chip__label {
+  color: var(--ids-comp-chip-filled-color-fg-label-light-disabled);
+}
+.ids-chip.ids-chip-filled.ids-chip-dark:not(:disabled) {
+  background: var(--ids-comp-chip-filled-color-bg-dark-default);
+  border-color: var(--ids-comp-chip-filled-color-border-dark-default);
+}
+.ids-chip.ids-chip-filled.ids-chip-dark:not(:disabled) > .ids-icon {
+  color: var(--ids-comp-chip-filled-color-fg-icon-dark-default);
+}
+.ids-chip.ids-chip-filled.ids-chip-dark:not(:disabled) > .ids-chip__label {
+  color: var(--ids-comp-chip-filled-color-fg-label-dark-default);
+}
+.ids-chip.ids-chip-filled.ids-chip-dark:disabled {
+  background: var(--ids-comp-chip-filled-color-bg-dark-disabled);
+  border-color: var(--ids-comp-chip-filled-color-border-dark-disabled);
+}
+.ids-chip.ids-chip-filled.ids-chip-dark:disabled > .ids-icon {
+  color: var(--ids-comp-chip-filled-color-fg-icon-dark-disabled);
+}
+.ids-chip.ids-chip-filled.ids-chip-dark:disabled > .ids-chip__label {
+  color: var(--ids-comp-chip-filled-color-fg-label-dark-disabled);
+}
+.ids-chip.ids-chip-outlined.ids-chip-primary:not(:disabled) {
+  background: var(--ids-comp-chip-outlined-color-bg-primary-default);
+  border-color: var(--ids-comp-chip-outlined-color-border-primary-default);
+}
+.ids-chip.ids-chip-outlined.ids-chip-primary:not(:disabled) > .ids-icon {
+  color: var(--ids-comp-chip-outlined-color-fg-icon-primary-default);
+}
+.ids-chip.ids-chip-outlined.ids-chip-primary:not(:disabled) > .ids-chip__label {
+  color: var(--ids-comp-chip-outlined-color-fg-label-primary-default);
+}
+.ids-chip.ids-chip-outlined.ids-chip-primary:disabled {
+  background: var(--ids-comp-chip-outlined-color-bg-primary-disabled);
+  border-color: var(--ids-comp-chip-outlined-color-border-primary-disabled);
+}
+.ids-chip.ids-chip-outlined.ids-chip-primary:disabled > .ids-icon {
+  color: var(--ids-comp-chip-outlined-color-fg-icon-primary-disabled);
+}
+.ids-chip.ids-chip-outlined.ids-chip-primary:disabled > .ids-chip__label {
+  color: var(--ids-comp-chip-outlined-color-fg-label-primary-disabled);
+}
+.ids-chip.ids-chip-outlined.ids-chip-secondary:not(:disabled) {
+  background: var(--ids-comp-chip-outlined-color-bg-secondary-default);
+  border-color: var(--ids-comp-chip-outlined-color-border-secondary-default);
+}
+.ids-chip.ids-chip-outlined.ids-chip-secondary:not(:disabled) > .ids-icon {
+  color: var(--ids-comp-chip-outlined-color-fg-icon-secondary-default);
+}
+.ids-chip.ids-chip-outlined.ids-chip-secondary:not(:disabled) > .ids-chip__label {
+  color: var(--ids-comp-chip-outlined-color-fg-label-secondary-default);
+}
+.ids-chip.ids-chip-outlined.ids-chip-secondary:disabled {
+  background: var(--ids-comp-chip-outlined-color-bg-secondary-disabled);
+  border-color: var(--ids-comp-chip-outlined-color-border-secondary-disabled);
+}
+.ids-chip.ids-chip-outlined.ids-chip-secondary:disabled > .ids-icon {
+  color: var(--ids-comp-chip-outlined-color-fg-icon-secondary-disabled);
+}
+.ids-chip.ids-chip-outlined.ids-chip-secondary:disabled > .ids-chip__label {
+  color: var(--ids-comp-chip-outlined-color-fg-label-secondary-disabled);
+}
+.ids-chip.ids-chip-outlined.ids-chip-surface:not(:disabled) {
+  background: var(--ids-comp-chip-outlined-color-bg-surface-default);
+  border-color: var(--ids-comp-chip-outlined-color-border-surface-default);
+}
+.ids-chip.ids-chip-outlined.ids-chip-surface:not(:disabled) > .ids-icon {
+  color: var(--ids-comp-chip-outlined-color-fg-icon-surface-default);
+}
+.ids-chip.ids-chip-outlined.ids-chip-surface:not(:disabled) > .ids-chip__label {
+  color: var(--ids-comp-chip-outlined-color-fg-label-surface-default);
+}
+.ids-chip.ids-chip-outlined.ids-chip-surface:disabled {
+  background: var(--ids-comp-chip-outlined-color-bg-surface-disabled);
+  border-color: var(--ids-comp-chip-outlined-color-border-surface-disabled);
+}
+.ids-chip.ids-chip-outlined.ids-chip-surface:disabled > .ids-icon {
+  color: var(--ids-comp-chip-outlined-color-fg-icon-surface-disabled);
+}
+.ids-chip.ids-chip-outlined.ids-chip-surface:disabled > .ids-chip__label {
+  color: var(--ids-comp-chip-outlined-color-fg-label-surface-disabled);
+}
+.ids-chip.ids-chip-outlined.ids-chip-light:not(:disabled) {
+  background: var(--ids-comp-chip-outlined-color-bg-light-default);
+  border-color: var(--ids-comp-chip-outlined-color-border-light-default);
+}
+.ids-chip.ids-chip-outlined.ids-chip-light:not(:disabled) > .ids-icon {
+  color: var(--ids-comp-chip-outlined-color-fg-icon-light-default);
+}
+.ids-chip.ids-chip-outlined.ids-chip-light:not(:disabled) > .ids-chip__label {
+  color: var(--ids-comp-chip-outlined-color-fg-label-light-default);
+}
+.ids-chip.ids-chip-outlined.ids-chip-light:disabled {
+  background: var(--ids-comp-chip-outlined-color-bg-light-disabled);
+  border-color: var(--ids-comp-chip-outlined-color-border-light-disabled);
+}
+.ids-chip.ids-chip-outlined.ids-chip-light:disabled > .ids-icon {
+  color: var(--ids-comp-chip-outlined-color-fg-icon-light-disabled);
+}
+.ids-chip.ids-chip-outlined.ids-chip-light:disabled > .ids-chip__label {
+  color: var(--ids-comp-chip-outlined-color-fg-label-light-disabled);
+}
+.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled) {
+  background: var(--ids-comp-chip-outlined-color-bg-dark-default);
+  border-color: var(--ids-comp-chip-outlined-color-border-dark-default);
+}
+.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled) > .ids-icon {
+  color: var(--ids-comp-chip-outlined-color-fg-icon-dark-default);
+}
+.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled) > .ids-chip__label {
+  color: var(--ids-comp-chip-outlined-color-fg-label-dark-default);
+}
+.ids-chip.ids-chip-outlined.ids-chip-dark:disabled {
+  background: var(--ids-comp-chip-outlined-color-bg-dark-disabled);
+  border-color: var(--ids-comp-chip-outlined-color-border-dark-disabled);
+}
+.ids-chip.ids-chip-outlined.ids-chip-dark:disabled > .ids-icon {
+  color: var(--ids-comp-chip-outlined-color-fg-icon-dark-disabled);
+}
+.ids-chip.ids-chip-outlined.ids-chip-dark:disabled > .ids-chip__label {
+  color: var(--ids-comp-chip-outlined-color-fg-label-dark-disabled);
+}
+
+ids-chip {
+  cursor: default;
+}
+ids-chip:focus, ids-chip:focus-visible {
+  outline-style: none;
+}
+
+button.ids-chip {
+  cursor: pointer;
+}
+button.ids-chip:focus, button.ids-chip:focus-visible {
+  outline-offset: 2px;
+  outline-style: solid;
+}
+button.ids-chip:disabled {
+  cursor: not-allowed;
+}
+button.ids-chip.ids-chip-compact:focus, button.ids-chip.ids-chip-compact:focus-visible {
+  outline-width: var(--ids-comp-chip-focused-outline-size-outline-compact);
+}
+button.ids-chip.ids-chip-comfortable:focus, button.ids-chip.ids-chip-comfortable:focus-visible {
+  outline-width: var(--ids-comp-chip-focused-outline-size-outline-comfortable);
+}
+button.ids-chip.ids-chip-spacious:focus, button.ids-chip.ids-chip-spacious:focus-visible {
+  outline-width: var(--ids-comp-chip-focused-outline-size-outline-spacious);
+}
+button.ids-chip.ids-chip-dense:focus, button.ids-chip.ids-chip-dense:focus-visible {
+  outline-width: var(--ids-comp-chip-focused-outline-size-outline-dense);
+}
+button.ids-chip.ids-chip-filled.ids-chip-primary:not(:disabled):hover {
   background: var(--ids-comp-chip-filled-color-bg-primary-hovered);
   border-color: 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 {
+button.ids-chip.ids-chip-filled.ids-chip-primary:not(:disabled):hover > .ids-icon {
   color: var(--ids-comp-chip-filled-color-fg-icon-primary-hovered);
 }
-.ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)[role=button]:hover > .ids-chip__label {
+button.ids-chip.ids-chip-filled.ids-chip-primary:not(:disabled):hover > .ids-chip__label {
   color: var(--ids-comp-chip-filled-color-fg-label-primary-hovered);
 }
-.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 {
+button.ids-chip.ids-chip-filled.ids-chip-primary:not(:disabled):focus, button.ids-chip.ids-chip-filled.ids-chip-primary:not(:disabled):focus-visible {
   background: var(--ids-comp-chip-filled-color-bg-primary-focused);
   border-color: var(--ids-comp-chip-filled-color-border-primary-focused);
   outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
 }
-.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 {
+button.ids-chip.ids-chip-filled.ids-chip-primary:not(:disabled):focus > .ids-icon, button.ids-chip.ids-chip-filled.ids-chip-primary:not(:disabled):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 {
+button.ids-chip.ids-chip-filled.ids-chip-primary:not(:disabled):focus > .ids-chip__label, button.ids-chip.ids-chip-filled.ids-chip-primary:not(:disabled):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 {
+button.ids-chip.ids-chip-filled.ids-chip-primary:not(:disabled):active {
   background: var(--ids-comp-chip-filled-color-bg-primary-pressed);
   border-color: var(--ids-comp-chip-filled-color-border-primary-pressed);
 }
-.ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)[role=button]:active > .ids-icon {
+button.ids-chip.ids-chip-filled.ids-chip-primary:not(:disabled):active > .ids-icon {
   color: var(--ids-comp-chip-filled-color-fg-icon-primary-pressed);
 }
-.ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)[role=button]:active > .ids-chip__label {
+button.ids-chip.ids-chip-filled.ids-chip-primary:not(:disabled):active > .ids-chip__label {
   color: var(--ids-comp-chip-filled-color-fg-label-primary-pressed);
 }
-.ids-chip.ids-chip-filled.ids-chip-primary.ids-chip-disabled {
-  background: var(--ids-comp-chip-filled-color-bg-primary-disabled);
-  border-color: var(--ids-comp-chip-filled-color-border-primary-disabled);
-}
-.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-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-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled) {
-  background: var(--ids-comp-chip-filled-color-bg-secondary-default);
-  border-color: var(--ids-comp-chip-filled-color-border-secondary-default);
-}
-.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-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-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:hover {
+button.ids-chip.ids-chip-filled.ids-chip-secondary:not(:disabled):hover {
   background: var(--ids-comp-chip-filled-color-bg-secondary-hovered);
   border-color: var(--ids-comp-chip-filled-color-border-secondary-hovered);
 }
-.ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:hover > .ids-icon {
+button.ids-chip.ids-chip-filled.ids-chip-secondary:not(:disabled):hover > .ids-icon {
   color: var(--ids-comp-chip-filled-color-fg-icon-secondary-hovered);
 }
-.ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:hover > .ids-chip__label {
+button.ids-chip.ids-chip-filled.ids-chip-secondary:not(:disabled):hover > .ids-chip__label {
   color: var(--ids-comp-chip-filled-color-fg-label-secondary-hovered);
 }
-.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 {
+button.ids-chip.ids-chip-filled.ids-chip-secondary:not(:disabled):focus, button.ids-chip.ids-chip-filled.ids-chip-secondary:not(:disabled):focus-visible {
   background: var(--ids-comp-chip-filled-color-bg-secondary-focused);
   border-color: var(--ids-comp-chip-filled-color-border-secondary-focused);
   outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
 }
-.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 {
+button.ids-chip.ids-chip-filled.ids-chip-secondary:not(:disabled):focus > .ids-icon, button.ids-chip.ids-chip-filled.ids-chip-secondary:not(:disabled):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 {
+button.ids-chip.ids-chip-filled.ids-chip-secondary:not(:disabled):focus > .ids-chip__label, button.ids-chip.ids-chip-filled.ids-chip-secondary:not(:disabled):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 {
+button.ids-chip.ids-chip-filled.ids-chip-secondary:not(:disabled):active {
   background: var(--ids-comp-chip-filled-color-bg-secondary-pressed);
   border-color: var(--ids-comp-chip-filled-color-border-secondary-pressed);
 }
-.ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:active > .ids-icon {
+button.ids-chip.ids-chip-filled.ids-chip-secondary:not(:disabled):active > .ids-icon {
   color: var(--ids-comp-chip-filled-color-fg-icon-secondary-pressed);
 }
-.ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:active > .ids-chip__label {
+button.ids-chip.ids-chip-filled.ids-chip-secondary:not(:disabled):active > .ids-chip__label {
   color: var(--ids-comp-chip-filled-color-fg-label-secondary-pressed);
 }
-.ids-chip.ids-chip-filled.ids-chip-secondary.ids-chip-disabled {
-  background: var(--ids-comp-chip-filled-color-bg-secondary-disabled);
-  border-color: var(--ids-comp-chip-filled-color-border-secondary-disabled);
-}
-.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-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-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled) {
-  background: var(--ids-comp-chip-filled-color-bg-surface-default);
-  border-color: var(--ids-comp-chip-filled-color-border-surface-default);
-}
-.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-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-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:hover {
+button.ids-chip.ids-chip-filled.ids-chip-surface:not(:disabled):hover {
   background: var(--ids-comp-chip-filled-color-bg-surface-hovered);
   border-color: var(--ids-comp-chip-filled-color-border-surface-hovered);
 }
-.ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:hover > .ids-icon {
+button.ids-chip.ids-chip-filled.ids-chip-surface:not(:disabled):hover > .ids-icon {
   color: var(--ids-comp-chip-filled-color-fg-icon-surface-hovered);
 }
-.ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:hover > .ids-chip__label {
+button.ids-chip.ids-chip-filled.ids-chip-surface:not(:disabled):hover > .ids-chip__label {
   color: var(--ids-comp-chip-filled-color-fg-label-surface-hovered);
 }
-.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 {
+button.ids-chip.ids-chip-filled.ids-chip-surface:not(:disabled):focus, button.ids-chip.ids-chip-filled.ids-chip-surface:not(:disabled):focus-visible {
   background: var(--ids-comp-chip-filled-color-bg-surface-focused);
   border-color: var(--ids-comp-chip-filled-color-border-surface-focused);
   outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
 }
-.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 {
+button.ids-chip.ids-chip-filled.ids-chip-surface:not(:disabled):focus > .ids-icon, button.ids-chip.ids-chip-filled.ids-chip-surface:not(:disabled):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 {
+button.ids-chip.ids-chip-filled.ids-chip-surface:not(:disabled):focus > .ids-chip__label, button.ids-chip.ids-chip-filled.ids-chip-surface:not(:disabled):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 {
+button.ids-chip.ids-chip-filled.ids-chip-surface:not(:disabled):active {
   background: var(--ids-comp-chip-filled-color-bg-surface-pressed);
   border-color: var(--ids-comp-chip-filled-color-border-surface-pressed);
 }
-.ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:active > .ids-icon {
+button.ids-chip.ids-chip-filled.ids-chip-surface:not(:disabled):active > .ids-icon {
   color: var(--ids-comp-chip-filled-color-fg-icon-surface-pressed);
 }
-.ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:active > .ids-chip__label {
+button.ids-chip.ids-chip-filled.ids-chip-surface:not(:disabled):active > .ids-chip__label {
   color: var(--ids-comp-chip-filled-color-fg-label-surface-pressed);
 }
-.ids-chip.ids-chip-filled.ids-chip-surface.ids-chip-disabled {
-  background: var(--ids-comp-chip-filled-color-bg-surface-disabled);
-  border-color: var(--ids-comp-chip-filled-color-border-surface-disabled);
-}
-.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-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-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled) {
-  background: var(--ids-comp-chip-filled-color-bg-light-default);
-  border-color: 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 {
+button.ids-chip.ids-chip-filled.ids-chip-light:not(:disabled):hover {
   background: var(--ids-comp-chip-filled-color-bg-light-hovered);
   border-color: var(--ids-comp-chip-filled-color-border-light-hovered);
 }
-.ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:hover > .ids-icon {
+button.ids-chip.ids-chip-filled.ids-chip-light:not(:disabled):hover > .ids-icon {
   color: var(--ids-comp-chip-filled-color-fg-icon-light-hovered);
 }
-.ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:hover > .ids-chip__label {
+button.ids-chip.ids-chip-filled.ids-chip-light:not(:disabled):hover > .ids-chip__label {
   color: var(--ids-comp-chip-filled-color-fg-label-light-hovered);
 }
-.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 {
+button.ids-chip.ids-chip-filled.ids-chip-light:not(:disabled):focus, button.ids-chip.ids-chip-filled.ids-chip-light:not(:disabled):focus-visible {
   background: var(--ids-comp-chip-filled-color-bg-light-focused);
   border-color: var(--ids-comp-chip-filled-color-border-light-focused);
   outline-color: var(--ids-comp-button-focused-outline-color-light-focused);
 }
-.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 {
+button.ids-chip.ids-chip-filled.ids-chip-light:not(:disabled):focus > .ids-icon, button.ids-chip.ids-chip-filled.ids-chip-light:not(:disabled):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 {
+button.ids-chip.ids-chip-filled.ids-chip-light:not(:disabled):focus > .ids-chip__label, button.ids-chip.ids-chip-filled.ids-chip-light:not(:disabled):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 {
+button.ids-chip.ids-chip-filled.ids-chip-light:not(:disabled):active {
   background: var(--ids-comp-chip-filled-color-bg-light-pressed);
   border-color: var(--ids-comp-chip-filled-color-border-light-pressed);
 }
-.ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:active > .ids-icon {
+button.ids-chip.ids-chip-filled.ids-chip-light:not(:disabled):active > .ids-icon {
   color: var(--ids-comp-chip-filled-color-fg-icon-light-pressed);
 }
-.ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:active > .ids-chip__label {
+button.ids-chip.ids-chip-filled.ids-chip-light:not(:disabled):active > .ids-chip__label {
   color: var(--ids-comp-chip-filled-color-fg-label-light-pressed);
 }
-.ids-chip.ids-chip-filled.ids-chip-light.ids-chip-disabled {
-  background: var(--ids-comp-chip-filled-color-bg-light-disabled);
-  border-color: var(--ids-comp-chip-filled-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-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-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled) {
-  background: var(--ids-comp-chip-filled-color-bg-dark-default);
-  border-color: var(--ids-comp-chip-filled-color-border-dark-default);
-}
-.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-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-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:hover {
+button.ids-chip.ids-chip-filled.ids-chip-dark:not(:disabled):hover {
   background: var(--ids-comp-chip-filled-color-bg-dark-hovered);
   border-color: var(--ids-comp-chip-filled-color-border-dark-hovered);
 }
-.ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:hover > .ids-icon {
+button.ids-chip.ids-chip-filled.ids-chip-dark:not(:disabled):hover > .ids-icon {
   color: var(--ids-comp-chip-filled-color-fg-icon-dark-hovered);
 }
-.ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:hover > .ids-chip__label {
+button.ids-chip.ids-chip-filled.ids-chip-dark:not(:disabled):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 {
+button.ids-chip.ids-chip-filled.ids-chip-dark:not(:disabled):focus, button.ids-chip.ids-chip-filled.ids-chip-dark:not(:disabled):focus-visible {
   background: var(--ids-comp-chip-filled-color-bg-dark-focused);
   border-color: var(--ids-comp-chip-filled-color-border-dark-focused);
   outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
 }
-.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 {
+button.ids-chip.ids-chip-filled.ids-chip-dark:not(:disabled):focus > .ids-icon, button.ids-chip.ids-chip-filled.ids-chip-dark:not(:disabled):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 {
+button.ids-chip.ids-chip-filled.ids-chip-dark:not(:disabled):focus > .ids-chip__label, button.ids-chip.ids-chip-filled.ids-chip-dark:not(:disabled):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 {
+button.ids-chip.ids-chip-filled.ids-chip-dark:not(:disabled):active {
   background: var(--ids-comp-chip-filled-color-bg-dark-pressed);
   border-color: var(--ids-comp-chip-filled-color-border-dark-pressed);
 }
-.ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:active > .ids-icon {
+button.ids-chip.ids-chip-filled.ids-chip-dark:not(:disabled):active > .ids-icon {
   color: var(--ids-comp-chip-filled-color-fg-icon-dark-pressed);
 }
-.ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:active > .ids-chip__label {
+button.ids-chip.ids-chip-filled.ids-chip-dark:not(:disabled):active > .ids-chip__label {
   color: var(--ids-comp-chip-filled-color-fg-label-dark-pressed);
 }
-.ids-chip.ids-chip-filled.ids-chip-dark.ids-chip-disabled {
-  background: var(--ids-comp-chip-filled-color-bg-dark-disabled);
-  border-color: var(--ids-comp-chip-filled-color-border-dark-disabled);
-}
-.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-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-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled) {
-  background: var(--ids-comp-chip-outlined-color-bg-primary-default);
-  border-color: var(--ids-comp-chip-outlined-color-border-primary-default);
-}
-.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-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-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:hover {
+button.ids-chip.ids-chip-outlined.ids-chip-primary:not(:disabled):hover {
   background: var(--ids-comp-chip-outlined-color-bg-primary-hovered);
   border-color: var(--ids-comp-chip-outlined-color-border-primary-hovered);
 }
-.ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:hover > .ids-icon {
+button.ids-chip.ids-chip-outlined.ids-chip-primary:not(:disabled):hover > .ids-icon {
   color: var(--ids-comp-chip-outlined-color-fg-icon-primary-hovered);
 }
-.ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:hover > .ids-chip__label {
+button.ids-chip.ids-chip-outlined.ids-chip-primary:not(:disabled):hover > .ids-chip__label {
   color: var(--ids-comp-chip-outlined-color-fg-label-primary-hovered);
 }
-.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 {
+button.ids-chip.ids-chip-outlined.ids-chip-primary:not(:disabled):focus, button.ids-chip.ids-chip-outlined.ids-chip-primary:not(:disabled):focus-visible {
   background: var(--ids-comp-chip-outlined-color-bg-primary-focused);
   border-color: var(--ids-comp-chip-outlined-color-border-primary-focused);
   outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
 }
-.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 {
+button.ids-chip.ids-chip-outlined.ids-chip-primary:not(:disabled):focus > .ids-icon, button.ids-chip.ids-chip-outlined.ids-chip-primary:not(:disabled):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 {
+button.ids-chip.ids-chip-outlined.ids-chip-primary:not(:disabled):focus > .ids-chip__label, button.ids-chip.ids-chip-outlined.ids-chip-primary:not(:disabled):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 {
+button.ids-chip.ids-chip-outlined.ids-chip-primary:not(:disabled):active {
   background: var(--ids-comp-chip-outlined-color-bg-primary-pressed);
   border-color: var(--ids-comp-chip-outlined-color-border-primary-pressed);
 }
-.ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:active > .ids-icon {
+button.ids-chip.ids-chip-outlined.ids-chip-primary:not(:disabled):active > .ids-icon {
   color: var(--ids-comp-chip-outlined-color-fg-icon-primary-pressed);
 }
-.ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:active > .ids-chip__label {
+button.ids-chip.ids-chip-outlined.ids-chip-primary:not(:disabled):active > .ids-chip__label {
   color: var(--ids-comp-chip-outlined-color-fg-label-primary-pressed);
 }
-.ids-chip.ids-chip-outlined.ids-chip-primary.ids-chip-disabled {
-  background: var(--ids-comp-chip-outlined-color-bg-primary-disabled);
-  border-color: var(--ids-comp-chip-outlined-color-border-primary-disabled);
-}
-.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-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-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled) {
-  background: var(--ids-comp-chip-outlined-color-bg-secondary-default);
-  border-color: var(--ids-comp-chip-outlined-color-border-secondary-default);
-}
-.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-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-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:hover {
+button.ids-chip.ids-chip-outlined.ids-chip-secondary:not(:disabled):hover {
   background: var(--ids-comp-chip-outlined-color-bg-secondary-hovered);
   border-color: var(--ids-comp-chip-outlined-color-border-secondary-hovered);
 }
-.ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:hover > .ids-icon {
+button.ids-chip.ids-chip-outlined.ids-chip-secondary:not(:disabled):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 {
+button.ids-chip.ids-chip-outlined.ids-chip-secondary:not(:disabled):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 {
+button.ids-chip.ids-chip-outlined.ids-chip-secondary:not(:disabled):focus, button.ids-chip.ids-chip-outlined.ids-chip-secondary:not(:disabled):focus-visible {
   background: var(--ids-comp-chip-outlined-color-bg-secondary-focused);
   border-color: var(--ids-comp-chip-outlined-color-border-secondary-focused);
   outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
 }
-.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 {
+button.ids-chip.ids-chip-outlined.ids-chip-secondary:not(:disabled):focus > .ids-icon, button.ids-chip.ids-chip-outlined.ids-chip-secondary:not(:disabled):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 {
+button.ids-chip.ids-chip-outlined.ids-chip-secondary:not(:disabled):focus > .ids-chip__label, button.ids-chip.ids-chip-outlined.ids-chip-secondary:not(:disabled):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 {
+button.ids-chip.ids-chip-outlined.ids-chip-secondary:not(:disabled):active {
   background: var(--ids-comp-chip-outlined-color-bg-secondary-pressed);
   border-color: var(--ids-comp-chip-outlined-color-border-secondary-pressed);
 }
-.ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:active > .ids-icon {
+button.ids-chip.ids-chip-outlined.ids-chip-secondary:not(:disabled):active > .ids-icon {
   color: var(--ids-comp-chip-outlined-color-fg-icon-secondary-pressed);
 }
-.ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:active > .ids-chip__label {
+button.ids-chip.ids-chip-outlined.ids-chip-secondary:not(:disabled):active > .ids-chip__label {
   color: var(--ids-comp-chip-outlined-color-fg-label-secondary-pressed);
 }
-.ids-chip.ids-chip-outlined.ids-chip-secondary.ids-chip-disabled {
-  background: var(--ids-comp-chip-outlined-color-bg-secondary-disabled);
-  border-color: var(--ids-comp-chip-outlined-color-border-secondary-disabled);
-}
-.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-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-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled) {
-  background: var(--ids-comp-chip-outlined-color-bg-surface-default);
-  border-color: 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 {
+button.ids-chip.ids-chip-outlined.ids-chip-surface:not(:disabled):hover {
   background: var(--ids-comp-chip-outlined-color-bg-surface-hovered);
   border-color: 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 {
+button.ids-chip.ids-chip-outlined.ids-chip-surface:not(:disabled):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 {
+button.ids-chip.ids-chip-outlined.ids-chip-surface:not(:disabled):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 {
+button.ids-chip.ids-chip-outlined.ids-chip-surface:not(:disabled):focus, button.ids-chip.ids-chip-outlined.ids-chip-surface:not(:disabled):focus-visible {
   background: var(--ids-comp-chip-outlined-color-bg-surface-focused);
   border-color: var(--ids-comp-chip-outlined-color-border-surface-focused);
   outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
 }
-.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 {
+button.ids-chip.ids-chip-outlined.ids-chip-surface:not(:disabled):focus > .ids-icon, button.ids-chip.ids-chip-outlined.ids-chip-surface:not(:disabled):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 {
+button.ids-chip.ids-chip-outlined.ids-chip-surface:not(:disabled):focus > .ids-chip__label, button.ids-chip.ids-chip-outlined.ids-chip-surface:not(:disabled):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 {
+button.ids-chip.ids-chip-outlined.ids-chip-surface:not(:disabled):active {
   background: var(--ids-comp-chip-outlined-color-bg-surface-pressed);
   border-color: var(--ids-comp-chip-outlined-color-border-surface-pressed);
 }
-.ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)[role=button]:active > .ids-icon {
+button.ids-chip.ids-chip-outlined.ids-chip-surface:not(:disabled):active > .ids-icon {
   color: var(--ids-comp-chip-outlined-color-fg-icon-surface-pressed);
 }
-.ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)[role=button]:active > .ids-chip__label {
+button.ids-chip.ids-chip-outlined.ids-chip-surface:not(:disabled):active > .ids-chip__label {
   color: var(--ids-comp-chip-outlined-color-fg-label-surface-pressed);
 }
-.ids-chip.ids-chip-outlined.ids-chip-surface.ids-chip-disabled {
-  background: var(--ids-comp-chip-outlined-color-bg-surface-disabled);
-  border-color: var(--ids-comp-chip-outlined-color-border-surface-disabled);
-}
-.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);
-  border-color: 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 {
+button.ids-chip.ids-chip-outlined.ids-chip-light:not(:disabled):hover {
   background: var(--ids-comp-chip-outlined-color-bg-light-hovered);
   border-color: 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 {
+button.ids-chip.ids-chip-outlined.ids-chip-light:not(:disabled):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 {
+button.ids-chip.ids-chip-outlined.ids-chip-light:not(:disabled):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 {
+button.ids-chip.ids-chip-outlined.ids-chip-light:not(:disabled):focus, button.ids-chip.ids-chip-outlined.ids-chip-light:not(:disabled):focus-visible {
   background: var(--ids-comp-chip-outlined-color-bg-light-focused);
   border-color: var(--ids-comp-chip-outlined-color-border-light-focused);
   outline-color: var(--ids-comp-button-focused-outline-color-light-focused);
 }
-.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 {
+button.ids-chip.ids-chip-outlined.ids-chip-light:not(:disabled):focus > .ids-icon, button.ids-chip.ids-chip-outlined.ids-chip-light:not(:disabled):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 {
+button.ids-chip.ids-chip-outlined.ids-chip-light:not(:disabled):focus > .ids-chip__label, button.ids-chip.ids-chip-outlined.ids-chip-light:not(:disabled):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 {
+button.ids-chip.ids-chip-outlined.ids-chip-light:not(:disabled):active {
   background: var(--ids-comp-chip-outlined-color-bg-light-pressed);
   border-color: var(--ids-comp-chip-outlined-color-border-light-pressed);
 }
-.ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)[role=button]:active > .ids-icon {
+button.ids-chip.ids-chip-outlined.ids-chip-light:not(:disabled):active > .ids-icon {
   color: var(--ids-comp-chip-outlined-color-fg-icon-light-pressed);
 }
-.ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)[role=button]:active > .ids-chip__label {
+button.ids-chip.ids-chip-outlined.ids-chip-light:not(:disabled):active > .ids-chip__label {
   color: var(--ids-comp-chip-outlined-color-fg-label-light-pressed);
 }
-.ids-chip.ids-chip-outlined.ids-chip-light.ids-chip-disabled {
-  background: var(--ids-comp-chip-outlined-color-bg-light-disabled);
-  border-color: var(--ids-comp-chip-outlined-color-border-light-disabled);
-}
-.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);
-  border-color: 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 {
+button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):hover {
   background: var(--ids-comp-chip-outlined-color-bg-dark-hovered);
   border-color: 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 {
+button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):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 {
+button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):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 {
+button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):focus, button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):focus-visible {
   background: var(--ids-comp-chip-outlined-color-bg-dark-focused);
   border-color: var(--ids-comp-chip-outlined-color-border-dark-focused);
   outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
 }
-.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 {
+button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):focus > .ids-icon, button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):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 {
+button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):focus > .ids-chip__label, button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):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 {
+button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active {
   background: var(--ids-comp-chip-outlined-color-bg-dark-pressed);
   border-color: var(--ids-comp-chip-outlined-color-border-dark-pressed);
 }
-.ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)[role=button]:active > .ids-icon {
+button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):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 {
+button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):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);
-  border-color: 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;
-  align-items: center;
   flex-wrap: wrap;
+  align-items: center;
+  align-content: center;
 }
 .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);
@@ -7125,6 +7134,605 @@
   background: var(--ids-comp-menu-item-filled-color-bg-surface-disabled);
 }
 
+.ids-notification > .ids-notification__content-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  align-content: flex-start;
+  flex-wrap: wrap;
+  border-style: solid;
+}
+.ids-notification > .ids-notification__content-wrapper > .ids-notification__leading-element {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.ids-notification > .ids-notification__content-wrapper > .ids-notification__container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  align-content: center;
+  flex: 1 0 0;
+  flex-wrap: wrap;
+}
+.ids-notification > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container {
+  display: flex;
+  flex-direction: column;
+}
+.ids-notification > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
+  font-style: normal;
+}
+.ids-notification > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
+  flex: 1 0 0;
+  font-style: normal;
+}
+.ids-notification > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__action {
+  display: flex;
+  align-items: center;
+}
+.ids-notification > .ids-notification__content-wrapper > .ids-notification__close-btn-container.ids-notification__label-btn {
+  display: flex;
+  align-self: center;
+}
+.ids-notification.ids-notification-filled.ids-notification-error > .ids-notification__content-wrapper {
+  border-color: var(--ids-comp-notification-filled-color-border-error-default);
+  background: var(--ids-comp-notification-filled-color-bg-error-default);
+}
+.ids-notification.ids-notification-filled.ids-notification-error > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
+  color: var(--ids-comp-notification-filled-color-fg-icon-error-default);
+}
+.ids-notification.ids-notification-filled.ids-notification-error > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
+  color: var(--ids-comp-notification-filled-color-fg-title-error-default);
+}
+.ids-notification.ids-notification-filled.ids-notification-error > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
+  color: var(--ids-comp-notification-filled-color-fg-message-error-default);
+}
+.ids-notification.ids-notification-filled.ids-notification-success > .ids-notification__content-wrapper {
+  border-color: var(--ids-comp-notification-filled-color-border-success-default);
+  background: var(--ids-comp-notification-filled-color-bg-success-default);
+}
+.ids-notification.ids-notification-filled.ids-notification-success > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
+  color: var(--ids-comp-notification-filled-color-fg-icon-success-default);
+}
+.ids-notification.ids-notification-filled.ids-notification-success > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
+  color: var(--ids-comp-notification-filled-color-fg-title-success-default);
+}
+.ids-notification.ids-notification-filled.ids-notification-success > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
+  color: var(--ids-comp-notification-filled-color-fg-message-success-default);
+}
+.ids-notification.ids-notification-filled.ids-notification-warning > .ids-notification__content-wrapper {
+  border-color: var(--ids-comp-notification-filled-color-border-warning-default);
+  background: var(--ids-comp-notification-filled-color-bg-warning-default);
+}
+.ids-notification.ids-notification-filled.ids-notification-warning > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
+  color: var(--ids-comp-notification-filled-color-fg-icon-warning-default);
+}
+.ids-notification.ids-notification-filled.ids-notification-warning > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
+  color: var(--ids-comp-notification-filled-color-fg-title-warning-default);
+}
+.ids-notification.ids-notification-filled.ids-notification-warning > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
+  color: var(--ids-comp-notification-filled-color-fg-message-warning-default);
+}
+.ids-notification.ids-notification-filled.ids-notification-light > .ids-notification__content-wrapper {
+  border-color: var(--ids-comp-notification-filled-color-border-light-default);
+  background: var(--ids-comp-notification-filled-color-bg-light-default);
+}
+.ids-notification.ids-notification-filled.ids-notification-light > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
+  color: var(--ids-comp-notification-filled-color-fg-icon-light-default);
+}
+.ids-notification.ids-notification-filled.ids-notification-light > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
+  color: var(--ids-comp-notification-filled-color-fg-title-light-default);
+}
+.ids-notification.ids-notification-filled.ids-notification-light > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
+  color: var(--ids-comp-notification-filled-color-fg-message-light-default);
+}
+.ids-notification.ids-notification-filled.ids-notification-dark > .ids-notification__content-wrapper {
+  border-color: var(--ids-comp-notification-filled-color-border-dark-default);
+  background: var(--ids-comp-notification-filled-color-bg-dark-default);
+}
+.ids-notification.ids-notification-filled.ids-notification-dark > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
+  color: var(--ids-comp-notification-filled-color-fg-icon-dark-default);
+}
+.ids-notification.ids-notification-filled.ids-notification-dark > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
+  color: var(--ids-comp-notification-filled-color-fg-title-dark-default);
+}
+.ids-notification.ids-notification-filled.ids-notification-dark > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
+  color: var(--ids-comp-notification-filled-color-fg-message-dark-default);
+}
+.ids-notification.ids-notification-filled.ids-notification-surface > .ids-notification__content-wrapper {
+  border-color: var(--ids-comp-notification-filled-color-border-surface-default);
+  background: var(--ids-comp-notification-filled-color-bg-surface-default);
+}
+.ids-notification.ids-notification-filled.ids-notification-surface > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
+  color: var(--ids-comp-notification-filled-color-fg-icon-surface-default);
+}
+.ids-notification.ids-notification-filled.ids-notification-surface > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
+  color: var(--ids-comp-notification-filled-color-fg-title-surface-default);
+}
+.ids-notification.ids-notification-filled.ids-notification-surface > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
+  color: var(--ids-comp-notification-filled-color-fg-message-surface-default);
+}
+.ids-notification.ids-notification-filled.ids-notification-info > .ids-notification__content-wrapper {
+  border-color: var(--ids-comp-notification-filled-color-border-info-default);
+  background: var(--ids-comp-notification-filled-color-bg-info-default);
+}
+.ids-notification.ids-notification-filled.ids-notification-info > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
+  color: var(--ids-comp-notification-filled-color-fg-icon-info-default);
+}
+.ids-notification.ids-notification-filled.ids-notification-info > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
+  color: var(--ids-comp-notification-filled-color-fg-title-info-default);
+}
+.ids-notification.ids-notification-filled.ids-notification-info > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
+  color: var(--ids-comp-notification-filled-color-fg-message-info-default);
+}
+.ids-notification.ids-notification-compact > .ids-notification__content-wrapper {
+  gap: var(--ids-comp-notification-filled-container-size-gap-compact);
+  padding: var(--ids-comp-notification-filled-container-size-padding-y-compact) var(--ids-comp-notification-filled-container-size-padding-x-compact);
+  border-radius: var(--ids-comp-notification-filled-container-size-border-radius-compact);
+  border-top-width: var(--ids-comp-notification-filled-container-size-border-top-width-compact);
+  border-right-width: var(--ids-comp-notification-filled-container-size-border-right-width-compact);
+  border-bottom-width: var(--ids-comp-notification-filled-container-size-border-bottom-width-compact);
+  border-left-width: var(--ids-comp-notification-filled-container-size-border-left-width-compact);
+}
+.ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__leading-element {
+  padding-left: var(--ids-comp-notification-icon-size-padding-left-compact);
+  padding-right: var(--ids-comp-notification-icon-size-padding-right-compact);
+}
+.ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
+  width: var(--ids-comp-notification-icon-size-icon-compact);
+  height: var(--ids-comp-notification-icon-size-icon-compact);
+  font-size: var(--ids-comp-notification-icon-typography-font-size-compact);
+  font-weight: var(--ids-comp-notification-icon-typography-font-weight-compact);
+  line-height: var(--ids-comp-notification-icon-typography-line-height-compact);
+}
+.ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container {
+  min-width: var(--ids-comp-notification-filled-container-size-min-width-compact);
+  padding-right: var(--ids-comp-notification-message-size-padding-right-compact);
+  gap: var(--ids-comp-notification-message-size-gap-compact);
+}
+.ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container {
+  row-gap: var(--ids-comp-notification-message-size-gap-compact);
+}
+.ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
+  font-size: var(--ids-comp-notification-title-typography-font-size-compact);
+  font-weight: var(--ids-comp-notification-title-typography-font-weight-compact);
+  line-height: var(--ids-comp-notification-title-typography-line-height-compact);
+  letter-spacing: var(--ids-comp-notification-title-typography-letter-spacing-compact);
+}
+.ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
+  font-size: var(--ids-comp-notification-message-typography-font-size-compact);
+  font-weight: var(--ids-comp-notification-message-typography-font-weight-compact);
+  line-height: var(--ids-comp-notification-message-typography-line-height-compact);
+  letter-spacing: var(--ids-comp-notification-message-typography-letter-spacing-compact);
+}
+.ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__action {
+  gap: var(--ids-comp-notification-actions-size-gap-compact);
+}
+.ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__close-btn-container > .ids-icon-button > .ids-icon {
+  width: var(--ids-comp-notification-icon-button-size-icon-button-compact);
+  height: var(--ids-comp-notification-icon-button-size-icon-button-compact);
+}
+.ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper {
+  gap: var(--ids-comp-notification-filled-container-size-gap-comfortable);
+  padding: var(--ids-comp-notification-filled-container-size-padding-y-comfortable) var(--ids-comp-notification-filled-container-size-padding-x-comfortable);
+  border-radius: var(--ids-comp-notification-filled-container-size-border-radius-comfortable);
+  border-top-width: var(--ids-comp-notification-filled-container-size-border-top-width-comfortable);
+  border-right-width: var(--ids-comp-notification-filled-container-size-border-right-width-comfortable);
+  border-bottom-width: var(--ids-comp-notification-filled-container-size-border-bottom-width-comfortable);
+  border-left-width: var(--ids-comp-notification-filled-container-size-border-left-width-comfortable);
+}
+.ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__leading-element {
+  padding-left: var(--ids-comp-notification-icon-size-padding-left-comfortable);
+  padding-right: var(--ids-comp-notification-icon-size-padding-right-comfortable);
+}
+.ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
+  width: var(--ids-comp-notification-icon-size-icon-comfortable);
+  height: var(--ids-comp-notification-icon-size-icon-comfortable);
+  font-size: var(--ids-comp-notification-icon-typography-font-size-comfortable);
+  font-weight: var(--ids-comp-notification-icon-typography-font-weight-comfortable);
+  line-height: var(--ids-comp-notification-icon-typography-line-height-comfortable);
+}
+.ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container {
+  min-width: var(--ids-comp-notification-filled-container-size-min-width-comfortable);
+  padding-right: var(--ids-comp-notification-message-size-padding-right-comfortable);
+  gap: var(--ids-comp-notification-message-size-gap-comfortable);
+}
+.ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container {
+  row-gap: var(--ids-comp-notification-message-size-gap-comfortable);
+}
+.ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
+  font-size: var(--ids-comp-notification-title-typography-font-size-comfortable);
+  font-weight: var(--ids-comp-notification-title-typography-font-weight-comfortable);
+  line-height: var(--ids-comp-notification-title-typography-line-height-comfortable);
+  letter-spacing: var(--ids-comp-notification-title-typography-letter-spacing-comfortable);
+}
+.ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
+  font-size: var(--ids-comp-notification-message-typography-font-size-comfortable);
+  font-weight: var(--ids-comp-notification-message-typography-font-weight-comfortable);
+  line-height: var(--ids-comp-notification-message-typography-line-height-comfortable);
+  letter-spacing: var(--ids-comp-notification-message-typography-letter-spacing-comfortable);
+}
+.ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__action {
+  gap: var(--ids-comp-notification-actions-size-gap-comfortable);
+}
+.ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__close-btn-container > .ids-icon-button > .ids-icon {
+  width: var(--ids-comp-notification-icon-button-size-icon-button-comfortable);
+  height: var(--ids-comp-notification-icon-button-size-icon-button-comfortable);
+}
+.ids-notification.ids-notification-spacious > .ids-notification__content-wrapper {
+  gap: var(--ids-comp-notification-filled-container-size-gap-spacious);
+  padding: var(--ids-comp-notification-filled-container-size-padding-y-spacious) var(--ids-comp-notification-filled-container-size-padding-x-spacious);
+  border-radius: var(--ids-comp-notification-filled-container-size-border-radius-spacious);
+  border-top-width: var(--ids-comp-notification-filled-container-size-border-top-width-spacious);
+  border-right-width: var(--ids-comp-notification-filled-container-size-border-right-width-spacious);
+  border-bottom-width: var(--ids-comp-notification-filled-container-size-border-bottom-width-spacious);
+  border-left-width: var(--ids-comp-notification-filled-container-size-border-left-width-spacious);
+}
+.ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__leading-element {
+  padding-left: var(--ids-comp-notification-icon-size-padding-left-spacious);
+  padding-right: var(--ids-comp-notification-icon-size-padding-right-spacious);
+}
+.ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
+  width: var(--ids-comp-notification-icon-size-icon-spacious);
+  height: var(--ids-comp-notification-icon-size-icon-spacious);
+  font-size: var(--ids-comp-notification-icon-typography-font-size-spacious);
+  font-weight: var(--ids-comp-notification-icon-typography-font-weight-spacious);
+  line-height: var(--ids-comp-notification-icon-typography-line-height-spacious);
+}
+.ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container {
+  min-width: var(--ids-comp-notification-filled-container-size-min-width-spacious);
+  padding-right: var(--ids-comp-notification-message-size-padding-right-spacious);
+  gap: var(--ids-comp-notification-message-size-gap-spacious);
+}
+.ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container {
+  row-gap: var(--ids-comp-notification-message-size-gap-spacious);
+}
+.ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
+  font-size: var(--ids-comp-notification-title-typography-font-size-spacious);
+  font-weight: var(--ids-comp-notification-title-typography-font-weight-spacious);
+  line-height: var(--ids-comp-notification-title-typography-line-height-spacious);
+  letter-spacing: var(--ids-comp-notification-title-typography-letter-spacing-spacious);
+}
+.ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
+  font-size: var(--ids-comp-notification-message-typography-font-size-spacious);
+  font-weight: var(--ids-comp-notification-message-typography-font-weight-spacious);
+  line-height: var(--ids-comp-notification-message-typography-line-height-spacious);
+  letter-spacing: var(--ids-comp-notification-message-typography-letter-spacing-spacious);
+}
+.ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__action {
+  gap: var(--ids-comp-notification-actions-size-gap-spacious);
+}
+.ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__close-btn-container > .ids-icon-button > .ids-icon {
+  width: var(--ids-comp-notification-icon-button-size-icon-button-spacious);
+  height: var(--ids-comp-notification-icon-button-size-icon-button-spacious);
+}
+.ids-notification.ids-notification-dense > .ids-notification__content-wrapper {
+  gap: var(--ids-comp-notification-filled-container-size-gap-dense);
+  padding: var(--ids-comp-notification-filled-container-size-padding-y-dense) var(--ids-comp-notification-filled-container-size-padding-x-dense);
+  border-radius: var(--ids-comp-notification-filled-container-size-border-radius-dense);
+  border-top-width: var(--ids-comp-notification-filled-container-size-border-top-width-dense);
+  border-right-width: var(--ids-comp-notification-filled-container-size-border-right-width-dense);
+  border-bottom-width: var(--ids-comp-notification-filled-container-size-border-bottom-width-dense);
+  border-left-width: var(--ids-comp-notification-filled-container-size-border-left-width-dense);
+}
+.ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__leading-element {
+  padding-left: var(--ids-comp-notification-icon-size-padding-left-dense);
+  padding-right: var(--ids-comp-notification-icon-size-padding-right-dense);
+}
+.ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
+  width: var(--ids-comp-notification-icon-size-icon-dense);
+  height: var(--ids-comp-notification-icon-size-icon-dense);
+  font-size: var(--ids-comp-notification-icon-typography-font-size-dense);
+  font-weight: var(--ids-comp-notification-icon-typography-font-weight-dense);
+  line-height: var(--ids-comp-notification-icon-typography-line-height-dense);
+}
+.ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container {
+  min-width: var(--ids-comp-notification-filled-container-size-min-width-dense);
+  padding-right: var(--ids-comp-notification-message-size-padding-right-dense);
+  gap: var(--ids-comp-notification-message-size-gap-dense);
+}
+.ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container {
+  row-gap: var(--ids-comp-notification-message-size-gap-dense);
+}
+.ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
+  font-size: var(--ids-comp-notification-title-typography-font-size-dense);
+  font-weight: var(--ids-comp-notification-title-typography-font-weight-dense);
+  line-height: var(--ids-comp-notification-title-typography-line-height-dense);
+  letter-spacing: var(--ids-comp-notification-title-typography-letter-spacing-dense);
+}
+.ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
+  font-size: var(--ids-comp-notification-message-typography-font-size-dense);
+  font-weight: var(--ids-comp-notification-message-typography-font-weight-dense);
+  line-height: var(--ids-comp-notification-message-typography-line-height-dense);
+  letter-spacing: var(--ids-comp-notification-message-typography-letter-spacing-dense);
+}
+.ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__action {
+  gap: var(--ids-comp-notification-actions-size-gap-dense);
+}
+.ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__close-btn-container > .ids-icon-button > .ids-icon {
+  width: var(--ids-comp-notification-icon-button-size-icon-button-dense);
+  height: var(--ids-comp-notification-icon-button-size-icon-button-dense);
+}
+.ids-notification.ids-notification-outlined.ids-notification-error > .ids-notification__content-wrapper {
+  border-color: var(--ids-comp-notification-outlined-color-border-error-default);
+  background: var(--ids-comp-notification-outlined-color-bg-error-default);
+}
+.ids-notification.ids-notification-outlined.ids-notification-error > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
+  color: var(--ids-comp-notification-outlined-color-fg-icon-error-default);
+}
+.ids-notification.ids-notification-outlined.ids-notification-error > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
+  color: var(--ids-comp-notification-outlined-color-fg-title-error-default);
+}
+.ids-notification.ids-notification-outlined.ids-notification-error > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
+  color: var(--ids-comp-notification-outlined-color-fg-message-error-default);
+}
+.ids-notification.ids-notification-outlined.ids-notification-success > .ids-notification__content-wrapper {
+  border-color: var(--ids-comp-notification-outlined-color-border-success-default);
+  background: var(--ids-comp-notification-outlined-color-bg-success-default);
+}
+.ids-notification.ids-notification-outlined.ids-notification-success > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
+  color: var(--ids-comp-notification-outlined-color-fg-icon-success-default);
+}
+.ids-notification.ids-notification-outlined.ids-notification-success > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
+  color: var(--ids-comp-notification-outlined-color-fg-title-success-default);
+}
+.ids-notification.ids-notification-outlined.ids-notification-success > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
+  color: var(--ids-comp-notification-outlined-color-fg-message-success-default);
+}
+.ids-notification.ids-notification-outlined.ids-notification-warning > .ids-notification__content-wrapper {
+  border-color: var(--ids-comp-notification-outlined-color-border-warning-default);
+  background: var(--ids-comp-notification-outlined-color-bg-warning-default);
+}
+.ids-notification.ids-notification-outlined.ids-notification-warning > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
+  color: var(--ids-comp-notification-outlined-color-fg-icon-warning-default);
+}
+.ids-notification.ids-notification-outlined.ids-notification-warning > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
+  color: var(--ids-comp-notification-outlined-color-fg-title-warning-default);
+}
+.ids-notification.ids-notification-outlined.ids-notification-warning > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
+  color: var(--ids-comp-notification-outlined-color-fg-message-warning-default);
+}
+.ids-notification.ids-notification-outlined.ids-notification-light > .ids-notification__content-wrapper {
+  border-color: var(--ids-comp-notification-outlined-color-border-light-default);
+  background: var(--ids-comp-notification-outlined-color-bg-light-default);
+}
+.ids-notification.ids-notification-outlined.ids-notification-light > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
+  color: var(--ids-comp-notification-outlined-color-fg-icon-light-default);
+}
+.ids-notification.ids-notification-outlined.ids-notification-light > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
+  color: var(--ids-comp-notification-outlined-color-fg-title-light-default);
+}
+.ids-notification.ids-notification-outlined.ids-notification-light > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
+  color: var(--ids-comp-notification-outlined-color-fg-message-light-default);
+}
+.ids-notification.ids-notification-outlined.ids-notification-dark > .ids-notification__content-wrapper {
+  border-color: var(--ids-comp-notification-outlined-color-border-dark-default);
+  background: var(--ids-comp-notification-outlined-color-bg-dark-default);
+}
+.ids-notification.ids-notification-outlined.ids-notification-dark > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
+  color: var(--ids-comp-notification-outlined-color-fg-icon-dark-default);
+}
+.ids-notification.ids-notification-outlined.ids-notification-dark > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
+  color: var(--ids-comp-notification-outlined-color-fg-title-dark-default);
+}
+.ids-notification.ids-notification-outlined.ids-notification-dark > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
+  color: var(--ids-comp-notification-outlined-color-fg-message-dark-default);
+}
+.ids-notification.ids-notification-outlined.ids-notification-surface > .ids-notification__content-wrapper {
+  border-color: var(--ids-comp-notification-outlined-color-border-surface-default);
+  background: var(--ids-comp-notification-outlined-color-bg-surface-default);
+}
+.ids-notification.ids-notification-outlined.ids-notification-surface > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
+  color: var(--ids-comp-notification-outlined-color-fg-icon-surface-default);
+}
+.ids-notification.ids-notification-outlined.ids-notification-surface > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
+  color: var(--ids-comp-notification-outlined-color-fg-title-surface-default);
+}
+.ids-notification.ids-notification-outlined.ids-notification-surface > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
+  color: var(--ids-comp-notification-outlined-color-fg-message-surface-default);
+}
+.ids-notification.ids-notification-outlined.ids-notification-info > .ids-notification__content-wrapper {
+  border-color: var(--ids-comp-notification-outlined-color-border-info-default);
+  background: var(--ids-comp-notification-outlined-color-bg-info-default);
+}
+.ids-notification.ids-notification-outlined.ids-notification-info > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
+  color: var(--ids-comp-notification-outlined-color-fg-icon-info-default);
+}
+.ids-notification.ids-notification-outlined.ids-notification-info > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
+  color: var(--ids-comp-notification-outlined-color-fg-title-info-default);
+}
+.ids-notification.ids-notification-outlined.ids-notification-info > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
+  color: var(--ids-comp-notification-outlined-color-fg-message-info-default);
+}
+.ids-notification.ids-notification-compact > .ids-notification__content-wrapper {
+  gap: var(--ids-comp-notification-outlined-container-size-gap-compact);
+  padding: var(--ids-comp-notification-outlined-container-size-padding-y-compact) var(--ids-comp-notification-outlined-container-size-padding-x-compact);
+  border-radius: var(--ids-comp-notification-outlined-container-size-border-radius-compact);
+  border-top-width: var(--ids-comp-notification-outlined-container-size-border-top-width-compact);
+  border-right-width: var(--ids-comp-notification-outlined-container-size-border-right-width-compact);
+  border-bottom-width: var(--ids-comp-notification-outlined-container-size-border-bottom-width-compact);
+  border-left-width: var(--ids-comp-notification-outlined-container-size-border-left-width-compact);
+}
+.ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__leading-element {
+  padding-left: var(--ids-comp-notification-icon-size-padding-left-compact);
+  padding-right: var(--ids-comp-notification-icon-size-padding-right-compact);
+}
+.ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
+  width: var(--ids-comp-notification-icon-size-icon-compact);
+  height: var(--ids-comp-notification-icon-size-icon-compact);
+  font-size: var(--ids-comp-notification-icon-typography-font-size-compact);
+  font-weight: var(--ids-comp-notification-icon-typography-font-weight-compact);
+  line-height: var(--ids-comp-notification-icon-typography-line-height-compact);
+}
+.ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container {
+  min-width: var(--ids-comp-notification-outlined-container-size-min-width-compact);
+  padding-right: var(--ids-comp-notification-message-size-padding-right-compact);
+  gap: var(--ids-comp-notification-message-size-gap-compact);
+}
+.ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container {
+  row-gap: var(--ids-comp-notification-message-size-gap-compact);
+}
+.ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
+  font-size: var(--ids-comp-notification-title-typography-font-size-compact);
+  font-weight: var(--ids-comp-notification-title-typography-font-weight-compact);
+  line-height: var(--ids-comp-notification-title-typography-line-height-compact);
+  letter-spacing: var(--ids-comp-notification-title-typography-letter-spacing-compact);
+}
+.ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
+  font-size: var(--ids-comp-notification-message-typography-font-size-compact);
+  font-weight: var(--ids-comp-notification-message-typography-font-weight-compact);
+  line-height: var(--ids-comp-notification-message-typography-line-height-compact);
+  letter-spacing: var(--ids-comp-notification-message-typography-letter-spacing-compact);
+}
+.ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__action {
+  gap: var(--ids-comp-notification-actions-size-gap-compact);
+}
+.ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__close-btn-container > .ids-icon-button > .ids-icon {
+  width: var(--ids-comp-notification-icon-button-size-icon-button-compact);
+  height: var(--ids-comp-notification-icon-button-size-icon-button-compact);
+}
+.ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper {
+  gap: var(--ids-comp-notification-outlined-container-size-gap-comfortable);
+  padding: var(--ids-comp-notification-outlined-container-size-padding-y-comfortable) var(--ids-comp-notification-outlined-container-size-padding-x-comfortable);
+  border-radius: var(--ids-comp-notification-outlined-container-size-border-radius-comfortable);
+  border-top-width: var(--ids-comp-notification-outlined-container-size-border-top-width-comfortable);
+  border-right-width: var(--ids-comp-notification-outlined-container-size-border-right-width-comfortable);
+  border-bottom-width: var(--ids-comp-notification-outlined-container-size-border-bottom-width-comfortable);
+  border-left-width: var(--ids-comp-notification-outlined-container-size-border-left-width-comfortable);
+}
+.ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__leading-element {
+  padding-left: var(--ids-comp-notification-icon-size-padding-left-comfortable);
+  padding-right: var(--ids-comp-notification-icon-size-padding-right-comfortable);
+}
+.ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
+  width: var(--ids-comp-notification-icon-size-icon-comfortable);
+  height: var(--ids-comp-notification-icon-size-icon-comfortable);
+  font-size: var(--ids-comp-notification-icon-typography-font-size-comfortable);
+  font-weight: var(--ids-comp-notification-icon-typography-font-weight-comfortable);
+  line-height: var(--ids-comp-notification-icon-typography-line-height-comfortable);
+}
+.ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container {
+  min-width: var(--ids-comp-notification-outlined-container-size-min-width-comfortable);
+  padding-right: var(--ids-comp-notification-message-size-padding-right-comfortable);
+  gap: var(--ids-comp-notification-message-size-gap-comfortable);
+}
+.ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container {
+  row-gap: var(--ids-comp-notification-message-size-gap-comfortable);
+}
+.ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
+  font-size: var(--ids-comp-notification-title-typography-font-size-comfortable);
+  font-weight: var(--ids-comp-notification-title-typography-font-weight-comfortable);
+  line-height: var(--ids-comp-notification-title-typography-line-height-comfortable);
+  letter-spacing: var(--ids-comp-notification-title-typography-letter-spacing-comfortable);
+}
+.ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
+  font-size: var(--ids-comp-notification-message-typography-font-size-comfortable);
+  font-weight: var(--ids-comp-notification-message-typography-font-weight-comfortable);
+  line-height: var(--ids-comp-notification-message-typography-line-height-comfortable);
+  letter-spacing: var(--ids-comp-notification-message-typography-letter-spacing-comfortable);
+}
+.ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__action {
+  gap: var(--ids-comp-notification-actions-size-gap-comfortable);
+}
+.ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__close-btn-container > .ids-icon-button > .ids-icon {
+  width: var(--ids-comp-notification-icon-button-size-icon-button-comfortable);
+  height: var(--ids-comp-notification-icon-button-size-icon-button-comfortable);
+}
+.ids-notification.ids-notification-spacious > .ids-notification__content-wrapper {
+  gap: var(--ids-comp-notification-outlined-container-size-gap-spacious);
+  padding: var(--ids-comp-notification-outlined-container-size-padding-y-spacious) var(--ids-comp-notification-outlined-container-size-padding-x-spacious);
+  border-radius: var(--ids-comp-notification-outlined-container-size-border-radius-spacious);
+  border-top-width: var(--ids-comp-notification-outlined-container-size-border-top-width-spacious);
+  border-right-width: var(--ids-comp-notification-outlined-container-size-border-right-width-spacious);
+  border-bottom-width: var(--ids-comp-notification-outlined-container-size-border-bottom-width-spacious);
+  border-left-width: var(--ids-comp-notification-outlined-container-size-border-left-width-spacious);
+}
+.ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__leading-element {
+  padding-left: var(--ids-comp-notification-icon-size-padding-left-spacious);
+  padding-right: var(--ids-comp-notification-icon-size-padding-right-spacious);
+}
+.ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
+  width: var(--ids-comp-notification-icon-size-icon-spacious);
+  height: var(--ids-comp-notification-icon-size-icon-spacious);
+  font-size: var(--ids-comp-notification-icon-typography-font-size-spacious);
+  font-weight: var(--ids-comp-notification-icon-typography-font-weight-spacious);
+  line-height: var(--ids-comp-notification-icon-typography-line-height-spacious);
+}
+.ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container {
+  min-width: var(--ids-comp-notification-outlined-container-size-min-width-spacious);
+  padding-right: var(--ids-comp-notification-message-size-padding-right-spacious);
+  gap: var(--ids-comp-notification-message-size-gap-spacious);
+}
+.ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container {
+  row-gap: var(--ids-comp-notification-message-size-gap-spacious);
+}
+.ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
+  font-size: var(--ids-comp-notification-title-typography-font-size-spacious);
+  font-weight: var(--ids-comp-notification-title-typography-font-weight-spacious);
+  line-height: var(--ids-comp-notification-title-typography-line-height-spacious);
+  letter-spacing: var(--ids-comp-notification-title-typography-letter-spacing-spacious);
+}
+.ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
+  font-size: var(--ids-comp-notification-message-typography-font-size-spacious);
+  font-weight: var(--ids-comp-notification-message-typography-font-weight-spacious);
+  line-height: var(--ids-comp-notification-message-typography-line-height-spacious);
+  letter-spacing: var(--ids-comp-notification-message-typography-letter-spacing-spacious);
+}
+.ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__action {
+  gap: var(--ids-comp-notification-actions-size-gap-spacious);
+}
+.ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__close-btn-container > .ids-icon-button > .ids-icon {
+  width: var(--ids-comp-notification-icon-button-size-icon-button-spacious);
+  height: var(--ids-comp-notification-icon-button-size-icon-button-spacious);
+}
+.ids-notification.ids-notification-dense > .ids-notification__content-wrapper {
+  gap: var(--ids-comp-notification-outlined-container-size-gap-dense);
+  padding: var(--ids-comp-notification-outlined-container-size-padding-y-dense) var(--ids-comp-notification-outlined-container-size-padding-x-dense);
+  border-radius: var(--ids-comp-notification-outlined-container-size-border-radius-dense);
+  border-top-width: var(--ids-comp-notification-outlined-container-size-border-top-width-dense);
+  border-right-width: var(--ids-comp-notification-outlined-container-size-border-right-width-dense);
+  border-bottom-width: var(--ids-comp-notification-outlined-container-size-border-bottom-width-dense);
+  border-left-width: var(--ids-comp-notification-outlined-container-size-border-left-width-dense);
+}
+.ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__leading-element {
+  padding-left: var(--ids-comp-notification-icon-size-padding-left-dense);
+  padding-right: var(--ids-comp-notification-icon-size-padding-right-dense);
+}
+.ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
+  width: var(--ids-comp-notification-icon-size-icon-dense);
+  height: var(--ids-comp-notification-icon-size-icon-dense);
+  font-size: var(--ids-comp-notification-icon-typography-font-size-dense);
+  font-weight: var(--ids-comp-notification-icon-typography-font-weight-dense);
+  line-height: var(--ids-comp-notification-icon-typography-line-height-dense);
+}
+.ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container {
+  min-width: var(--ids-comp-notification-outlined-container-size-min-width-dense);
+  padding-right: var(--ids-comp-notification-message-size-padding-right-dense);
+  gap: var(--ids-comp-notification-message-size-gap-dense);
+}
+.ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container {
+  row-gap: var(--ids-comp-notification-message-size-gap-dense);
+}
+.ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
+  font-size: var(--ids-comp-notification-title-typography-font-size-dense);
+  font-weight: var(--ids-comp-notification-title-typography-font-weight-dense);
+  line-height: var(--ids-comp-notification-title-typography-line-height-dense);
+  letter-spacing: var(--ids-comp-notification-title-typography-letter-spacing-dense);
+}
+.ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
+  font-size: var(--ids-comp-notification-message-typography-font-size-dense);
+  font-weight: var(--ids-comp-notification-message-typography-font-weight-dense);
+  line-height: var(--ids-comp-notification-message-typography-line-height-dense);
+  letter-spacing: var(--ids-comp-notification-message-typography-letter-spacing-dense);
+}
+.ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__action {
+  gap: var(--ids-comp-notification-actions-size-gap-dense);
+}
+.ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__close-btn-container > .ids-icon-button > .ids-icon {
+  width: var(--ids-comp-notification-icon-button-size-icon-button-dense);
+  height: var(--ids-comp-notification-icon-button-size-icon-button-dense);
+}
+
 .ids-option {
   display: flex;
   align-items: center;
@@ -11039,8 +11647,6 @@
 }
 
 .ids-tag {
-  flex-shrink: 0;
-  width: fit-content;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -11062,7 +11668,7 @@
   height: var(--ids-comp-tag-size-height-compact);
   padding: var(--ids-comp-tag-size-padding-y-compact) var(--ids-comp-tag-size-padding-x-compact);
   border-radius: var(--ids-comp-tag-size-border-radius-compact);
-  border: var(--ids-comp-tag-size-border-width-compact);
+  border-width: var(--ids-comp-tag-size-border-width-compact);
 }
 .ids-tag.ids-tag-compact:focus, .ids-tag.ids-tag-compact:focus-visible {
   outline-width: var(--ids-comp-tag-focused-outline-size-outline-compact);
@@ -11086,7 +11692,7 @@
   height: var(--ids-comp-tag-size-height-comfortable);
   padding: var(--ids-comp-tag-size-padding-y-comfortable) var(--ids-comp-tag-size-padding-x-comfortable);
   border-radius: var(--ids-comp-tag-size-border-radius-comfortable);
-  border: var(--ids-comp-tag-size-border-width-comfortable);
+  border-width: var(--ids-comp-tag-size-border-width-comfortable);
 }
 .ids-tag.ids-tag-comfortable:focus, .ids-tag.ids-tag-comfortable:focus-visible {
   outline-width: var(--ids-comp-tag-focused-outline-size-outline-comfortable);
@@ -11110,7 +11716,7 @@
   height: var(--ids-comp-tag-size-height-spacious);
   padding: var(--ids-comp-tag-size-padding-y-spacious) var(--ids-comp-tag-size-padding-x-spacious);
   border-radius: var(--ids-comp-tag-size-border-radius-spacious);
-  border: var(--ids-comp-tag-size-border-width-spacious);
+  border-width: var(--ids-comp-tag-size-border-width-spacious);
 }
 .ids-tag.ids-tag-spacious:focus, .ids-tag.ids-tag-spacious:focus-visible {
   outline-width: var(--ids-comp-tag-focused-outline-size-outline-spacious);
@@ -11134,7 +11740,7 @@
   height: var(--ids-comp-tag-size-height-dense);
   padding: var(--ids-comp-tag-size-padding-y-dense) var(--ids-comp-tag-size-padding-x-dense);
   border-radius: var(--ids-comp-tag-size-border-radius-dense);
-  border: var(--ids-comp-tag-size-border-width-dense);
+  border-width: var(--ids-comp-tag-size-border-width-dense);
 }
 .ids-tag.ids-tag-dense:focus, .ids-tag.ids-tag-dense:focus-visible {
   outline-width: var(--ids-comp-tag-focused-outline-size-outline-dense);
@@ -11158,385 +11764,500 @@
   background: var(--ids-comp-tag-filled-color-bg-primary-default);
   border-color: var(--ids-comp-tag-filled-color-border-primary-default);
 }
-.ids-tag.ids-tag-filled.ids-tag-primary:hover {
-  color: var(--ids-comp-tag-filled-color-fg-label-primary-default);
-  background: var(--ids-comp-tag-filled-color-bg-primary-default);
-  border-color: var(--ids-comp-tag-filled-color-border-primary-default);
+.ids-tag.ids-tag-filled.ids-tag-secondary {
+  color: var(--ids-comp-tag-filled-color-fg-label-secondary-default);
+  background: var(--ids-comp-tag-filled-color-bg-secondary-default);
+  border-color: var(--ids-comp-tag-filled-color-border-secondary-default);
+}
+.ids-tag.ids-tag-filled.ids-tag-brand {
+  color: var(--ids-comp-tag-filled-color-fg-label-brand-default);
+  background: var(--ids-comp-tag-filled-color-bg-brand-default);
+  border-color: var(--ids-comp-tag-filled-color-border-brand-default);
+}
+.ids-tag.ids-tag-filled.ids-tag-error {
+  color: var(--ids-comp-tag-filled-color-fg-label-error-default);
+  background: var(--ids-comp-tag-filled-color-bg-error-default);
+  border-color: var(--ids-comp-tag-filled-color-border-error-default);
+}
+.ids-tag.ids-tag-filled.ids-tag-success {
+  color: var(--ids-comp-tag-filled-color-fg-label-success-default);
+  background: var(--ids-comp-tag-filled-color-bg-success-default);
+  border-color: var(--ids-comp-tag-filled-color-border-success-default);
+}
+.ids-tag.ids-tag-filled.ids-tag-warning {
+  color: var(--ids-comp-tag-filled-color-fg-label-warning-default);
+  background: var(--ids-comp-tag-filled-color-bg-warning-default);
+  border-color: var(--ids-comp-tag-filled-color-border-warning-default);
+}
+.ids-tag.ids-tag-filled.ids-tag-light {
+  color: var(--ids-comp-tag-filled-color-fg-label-light-default);
+  background: var(--ids-comp-tag-filled-color-bg-light-default);
+  border-color: var(--ids-comp-tag-filled-color-border-light-default);
+}
+.ids-tag.ids-tag-filled.ids-tag-dark {
+  color: var(--ids-comp-tag-filled-color-fg-label-dark-default);
+  background: var(--ids-comp-tag-filled-color-bg-dark-default);
+  border-color: var(--ids-comp-tag-filled-color-border-dark-default);
+}
+.ids-tag.ids-tag-filled.ids-tag-surface {
+  color: var(--ids-comp-tag-filled-color-fg-label-surface-default);
+  background: var(--ids-comp-tag-filled-color-bg-surface-default);
+  border-color: var(--ids-comp-tag-filled-color-border-surface-default);
+}
+.ids-tag.ids-tag-outlined.ids-tag-primary {
+  color: var(--ids-comp-tag-outlined-color-fg-label-primary-default);
+  background: var(--ids-comp-tag-outlined-color-bg-primary-default);
+  border-color: var(--ids-comp-tag-outlined-color-border-primary-default);
+}
+.ids-tag.ids-tag-outlined.ids-tag-secondary {
+  color: var(--ids-comp-tag-outlined-color-fg-label-secondary-default);
+  background: var(--ids-comp-tag-outlined-color-bg-secondary-default);
+  border-color: var(--ids-comp-tag-outlined-color-border-secondary-default);
+}
+.ids-tag.ids-tag-outlined.ids-tag-brand {
+  color: var(--ids-comp-tag-outlined-color-fg-label-brand-default);
+  background: var(--ids-comp-tag-outlined-color-bg-brand-default);
+  border-color: var(--ids-comp-tag-outlined-color-border-brand-default);
+}
+.ids-tag.ids-tag-outlined.ids-tag-error {
+  color: var(--ids-comp-tag-outlined-color-fg-label-error-default);
+  background: var(--ids-comp-tag-outlined-color-bg-error-default);
+  border-color: var(--ids-comp-tag-outlined-color-border-error-default);
+}
+.ids-tag.ids-tag-outlined.ids-tag-success {
+  color: var(--ids-comp-tag-outlined-color-fg-label-success-default);
+  background: var(--ids-comp-tag-outlined-color-bg-success-default);
+  border-color: var(--ids-comp-tag-outlined-color-border-success-default);
+}
+.ids-tag.ids-tag-outlined.ids-tag-warning {
+  color: var(--ids-comp-tag-outlined-color-fg-label-warning-default);
+  background: var(--ids-comp-tag-outlined-color-bg-warning-default);
+  border-color: var(--ids-comp-tag-outlined-color-border-warning-default);
+}
+.ids-tag.ids-tag-outlined.ids-tag-light {
+  color: var(--ids-comp-tag-outlined-color-fg-label-light-default);
+  background: var(--ids-comp-tag-outlined-color-bg-light-default);
+  border-color: var(--ids-comp-tag-outlined-color-border-light-default);
+}
+.ids-tag.ids-tag-outlined.ids-tag-dark {
+  color: var(--ids-comp-tag-outlined-color-fg-label-dark-default);
+  background: var(--ids-comp-tag-outlined-color-bg-dark-default);
+  border-color: var(--ids-comp-tag-outlined-color-border-dark-default);
+}
+.ids-tag.ids-tag-outlined.ids-tag-surface {
+  color: var(--ids-comp-tag-outlined-color-fg-label-surface-default);
+  background: var(--ids-comp-tag-outlined-color-bg-surface-default);
+  border-color: var(--ids-comp-tag-outlined-color-border-surface-default);
+}
+
+ids-tag {
+  cursor: default;
+}
+
+a.ids-tag {
+  cursor: pointer;
+  text-decoration: none;
 }
-.ids-tag.ids-tag-filled.ids-tag-primary:focus, .ids-tag.ids-tag-filled.ids-tag-primary:focus-visible {
+a.ids-tag.ids-tag-filled.ids-tag-primary {
   color: var(--ids-comp-tag-filled-color-fg-label-primary-default);
   background: var(--ids-comp-tag-filled-color-bg-primary-default);
   border-color: var(--ids-comp-tag-filled-color-border-primary-default);
+}
+a.ids-tag.ids-tag-filled.ids-tag-primary:hover {
+  color: var(--ids-comp-tag-filled-color-fg-label-primary-hovered);
+  background: var(--ids-comp-tag-filled-color-bg-primary-hovered);
+  border-color: var(--ids-comp-tag-filled-color-border-primary-hovered);
+}
+a.ids-tag.ids-tag-filled.ids-tag-primary:focus, a.ids-tag.ids-tag-filled.ids-tag-primary:focus-visible {
+  color: var(--ids-comp-tag-filled-color-fg-label-primary-focused);
+  background: var(--ids-comp-tag-filled-color-bg-primary-focused);
+  border-color: var(--ids-comp-tag-filled-color-border-primary-focused);
   outline-color: var(--ids-comp-tag-focused-outline-color-dark-focused);
 }
-.ids-tag.ids-tag-filled.ids-tag-primary:active {
-  color: var(--ids-comp-tag-filled-color-fg-label-primary-default);
-  background: var(--ids-comp-tag-filled-color-bg-primary-default);
-  border-color: var(--ids-comp-tag-filled-color-border-primary-default);
+a.ids-tag.ids-tag-filled.ids-tag-primary:active {
+  color: var(--ids-comp-tag-filled-color-fg-label-primary-pressed);
+  background: var(--ids-comp-tag-filled-color-bg-primary-pressed);
+  border-color: var(--ids-comp-tag-filled-color-border-primary-pressed);
 }
-.ids-tag.ids-tag-filled.ids-tag-secondary {
+a.ids-tag.ids-tag-filled.ids-tag-secondary {
   color: var(--ids-comp-tag-filled-color-fg-label-secondary-default);
   background: var(--ids-comp-tag-filled-color-bg-secondary-default);
   border-color: var(--ids-comp-tag-filled-color-border-secondary-default);
 }
-.ids-tag.ids-tag-filled.ids-tag-secondary:hover {
-  color: var(--ids-comp-tag-filled-color-fg-label-secondary-default);
-  background: var(--ids-comp-tag-filled-color-bg-secondary-default);
-  border-color: var(--ids-comp-tag-filled-color-border-secondary-default);
+a.ids-tag.ids-tag-filled.ids-tag-secondary:hover {
+  color: var(--ids-comp-tag-filled-color-fg-label-secondary-hovered);
+  background: var(--ids-comp-tag-filled-color-bg-secondary-hovered);
+  border-color: var(--ids-comp-tag-filled-color-border-secondary-hovered);
 }
-.ids-tag.ids-tag-filled.ids-tag-secondary:focus, .ids-tag.ids-tag-filled.ids-tag-secondary:focus-visible {
-  color: var(--ids-comp-tag-filled-color-fg-label-secondary-default);
-  background: var(--ids-comp-tag-filled-color-bg-secondary-default);
-  border-color: var(--ids-comp-tag-filled-color-border-secondary-default);
+a.ids-tag.ids-tag-filled.ids-tag-secondary:focus, a.ids-tag.ids-tag-filled.ids-tag-secondary:focus-visible {
+  color: var(--ids-comp-tag-filled-color-fg-label-secondary-focused);
+  background: var(--ids-comp-tag-filled-color-bg-secondary-focused);
+  border-color: var(--ids-comp-tag-filled-color-border-secondary-focused);
   outline-color: var(--ids-comp-tag-focused-outline-color-dark-focused);
 }
-.ids-tag.ids-tag-filled.ids-tag-secondary:active {
-  color: var(--ids-comp-tag-filled-color-fg-label-secondary-default);
-  background: var(--ids-comp-tag-filled-color-bg-secondary-default);
-  border-color: var(--ids-comp-tag-filled-color-border-secondary-default);
+a.ids-tag.ids-tag-filled.ids-tag-secondary:active {
+  color: var(--ids-comp-tag-filled-color-fg-label-secondary-pressed);
+  background: var(--ids-comp-tag-filled-color-bg-secondary-pressed);
+  border-color: var(--ids-comp-tag-filled-color-border-secondary-pressed);
 }
-.ids-tag.ids-tag-filled.ids-tag-brand {
+a.ids-tag.ids-tag-filled.ids-tag-brand {
   color: var(--ids-comp-tag-filled-color-fg-label-brand-default);
   background: var(--ids-comp-tag-filled-color-bg-brand-default);
   border-color: var(--ids-comp-tag-filled-color-border-brand-default);
 }
-.ids-tag.ids-tag-filled.ids-tag-brand:hover {
-  color: var(--ids-comp-tag-filled-color-fg-label-brand-default);
-  background: var(--ids-comp-tag-filled-color-bg-brand-default);
-  border-color: var(--ids-comp-tag-filled-color-border-brand-default);
+a.ids-tag.ids-tag-filled.ids-tag-brand:hover {
+  color: var(--ids-comp-tag-filled-color-fg-label-brand-hovered);
+  background: var(--ids-comp-tag-filled-color-bg-brand-hovered);
+  border-color: var(--ids-comp-tag-filled-color-border-brand-hovered);
 }
-.ids-tag.ids-tag-filled.ids-tag-brand:focus, .ids-tag.ids-tag-filled.ids-tag-brand:focus-visible {
-  color: var(--ids-comp-tag-filled-color-fg-label-brand-default);
-  background: var(--ids-comp-tag-filled-color-bg-brand-default);
-  border-color: var(--ids-comp-tag-filled-color-border-brand-default);
+a.ids-tag.ids-tag-filled.ids-tag-brand:focus, a.ids-tag.ids-tag-filled.ids-tag-brand:focus-visible {
+  color: var(--ids-comp-tag-filled-color-fg-label-brand-focused);
+  background: var(--ids-comp-tag-filled-color-bg-brand-focused);
+  border-color: var(--ids-comp-tag-filled-color-border-brand-focused);
   outline-color: var(--ids-comp-tag-focused-outline-color-dark-focused);
 }
-.ids-tag.ids-tag-filled.ids-tag-brand:active {
-  color: var(--ids-comp-tag-filled-color-fg-label-brand-default);
-  background: var(--ids-comp-tag-filled-color-bg-brand-default);
-  border-color: var(--ids-comp-tag-filled-color-border-brand-default);
+a.ids-tag.ids-tag-filled.ids-tag-brand:active {
+  color: var(--ids-comp-tag-filled-color-fg-label-brand-pressed);
+  background: var(--ids-comp-tag-filled-color-bg-brand-pressed);
+  border-color: var(--ids-comp-tag-filled-color-border-brand-pressed);
 }
-.ids-tag.ids-tag-filled.ids-tag-error {
+a.ids-tag.ids-tag-filled.ids-tag-error {
   color: var(--ids-comp-tag-filled-color-fg-label-error-default);
   background: var(--ids-comp-tag-filled-color-bg-error-default);
   border-color: var(--ids-comp-tag-filled-color-border-error-default);
 }
-.ids-tag.ids-tag-filled.ids-tag-error:hover {
-  color: var(--ids-comp-tag-filled-color-fg-label-error-default);
-  background: var(--ids-comp-tag-filled-color-bg-error-default);
-  border-color: var(--ids-comp-tag-filled-color-border-error-default);
+a.ids-tag.ids-tag-filled.ids-tag-error:hover {
+  color: var(--ids-comp-tag-filled-color-fg-label-error-hovered);
+  background: var(--ids-comp-tag-filled-color-bg-error-hovered);
+  border-color: var(--ids-comp-tag-filled-color-border-error-hovered);
 }
-.ids-tag.ids-tag-filled.ids-tag-error:focus, .ids-tag.ids-tag-filled.ids-tag-error:focus-visible {
-  color: var(--ids-comp-tag-filled-color-fg-label-error-default);
-  background: var(--ids-comp-tag-filled-color-bg-error-default);
-  border-color: var(--ids-comp-tag-filled-color-border-error-default);
+a.ids-tag.ids-tag-filled.ids-tag-error:focus, a.ids-tag.ids-tag-filled.ids-tag-error:focus-visible {
+  color: var(--ids-comp-tag-filled-color-fg-label-error-focused);
+  background: var(--ids-comp-tag-filled-color-bg-error-focused);
+  border-color: var(--ids-comp-tag-filled-color-border-error-focused);
   outline-color: var(--ids-comp-tag-focused-outline-color-dark-focused);
 }
-.ids-tag.ids-tag-filled.ids-tag-error:active {
-  color: var(--ids-comp-tag-filled-color-fg-label-error-default);
-  background: var(--ids-comp-tag-filled-color-bg-error-default);
-  border-color: var(--ids-comp-tag-filled-color-border-error-default);
+a.ids-tag.ids-tag-filled.ids-tag-error:active {
+  color: var(--ids-comp-tag-filled-color-fg-label-error-pressed);
+  background: var(--ids-comp-tag-filled-color-bg-error-pressed);
+  border-color: var(--ids-comp-tag-filled-color-border-error-pressed);
 }
-.ids-tag.ids-tag-filled.ids-tag-success {
+a.ids-tag.ids-tag-filled.ids-tag-success {
   color: var(--ids-comp-tag-filled-color-fg-label-success-default);
   background: var(--ids-comp-tag-filled-color-bg-success-default);
   border-color: var(--ids-comp-tag-filled-color-border-success-default);
 }
-.ids-tag.ids-tag-filled.ids-tag-success:hover {
-  color: var(--ids-comp-tag-filled-color-fg-label-success-default);
-  background: var(--ids-comp-tag-filled-color-bg-success-default);
-  border-color: var(--ids-comp-tag-filled-color-border-success-default);
+a.ids-tag.ids-tag-filled.ids-tag-success:hover {
+  color: var(--ids-comp-tag-filled-color-fg-label-success-hovered);
+  background: var(--ids-comp-tag-filled-color-bg-success-hovered);
+  border-color: var(--ids-comp-tag-filled-color-border-success-hovered);
 }
-.ids-tag.ids-tag-filled.ids-tag-success:focus, .ids-tag.ids-tag-filled.ids-tag-success:focus-visible {
-  color: var(--ids-comp-tag-filled-color-fg-label-success-default);
-  background: var(--ids-comp-tag-filled-color-bg-success-default);
-  border-color: var(--ids-comp-tag-filled-color-border-success-default);
+a.ids-tag.ids-tag-filled.ids-tag-success:focus, a.ids-tag.ids-tag-filled.ids-tag-success:focus-visible {
+  color: var(--ids-comp-tag-filled-color-fg-label-success-focused);
+  background: var(--ids-comp-tag-filled-color-bg-success-focused);
+  border-color: var(--ids-comp-tag-filled-color-border-success-focused);
   outline-color: var(--ids-comp-tag-focused-outline-color-dark-focused);
 }
-.ids-tag.ids-tag-filled.ids-tag-success:active {
-  color: var(--ids-comp-tag-filled-color-fg-label-success-default);
-  background: var(--ids-comp-tag-filled-color-bg-success-default);
-  border-color: var(--ids-comp-tag-filled-color-border-success-default);
+a.ids-tag.ids-tag-filled.ids-tag-success:active {
+  color: var(--ids-comp-tag-filled-color-fg-label-success-pressed);
+  background: var(--ids-comp-tag-filled-color-bg-success-pressed);
+  border-color: var(--ids-comp-tag-filled-color-border-success-pressed);
 }
-.ids-tag.ids-tag-filled.ids-tag-warning {
+a.ids-tag.ids-tag-filled.ids-tag-warning {
   color: var(--ids-comp-tag-filled-color-fg-label-warning-default);
   background: var(--ids-comp-tag-filled-color-bg-warning-default);
   border-color: var(--ids-comp-tag-filled-color-border-warning-default);
 }
-.ids-tag.ids-tag-filled.ids-tag-warning:hover {
-  color: var(--ids-comp-tag-filled-color-fg-label-warning-default);
-  background: var(--ids-comp-tag-filled-color-bg-warning-default);
-  border-color: var(--ids-comp-tag-filled-color-border-warning-default);
+a.ids-tag.ids-tag-filled.ids-tag-warning:hover {
+  color: var(--ids-comp-tag-filled-color-fg-label-warning-hovered);
+  background: var(--ids-comp-tag-filled-color-bg-warning-hovered);
+  border-color: var(--ids-comp-tag-filled-color-border-warning-hovered);
 }
-.ids-tag.ids-tag-filled.ids-tag-warning:focus, .ids-tag.ids-tag-filled.ids-tag-warning:focus-visible {
-  color: var(--ids-comp-tag-filled-color-fg-label-warning-default);
-  background: var(--ids-comp-tag-filled-color-bg-warning-default);
-  border-color: var(--ids-comp-tag-filled-color-border-warning-default);
+a.ids-tag.ids-tag-filled.ids-tag-warning:focus, a.ids-tag.ids-tag-filled.ids-tag-warning:focus-visible {
+  color: var(--ids-comp-tag-filled-color-fg-label-warning-focused);
+  background: var(--ids-comp-tag-filled-color-bg-warning-focused);
+  border-color: var(--ids-comp-tag-filled-color-border-warning-focused);
   outline-color: var(--ids-comp-tag-focused-outline-color-dark-focused);
 }
-.ids-tag.ids-tag-filled.ids-tag-warning:active {
-  color: var(--ids-comp-tag-filled-color-fg-label-warning-default);
-  background: var(--ids-comp-tag-filled-color-bg-warning-default);
-  border-color: var(--ids-comp-tag-filled-color-border-warning-default);
+a.ids-tag.ids-tag-filled.ids-tag-warning:active {
+  color: var(--ids-comp-tag-filled-color-fg-label-warning-pressed);
+  background: var(--ids-comp-tag-filled-color-bg-warning-pressed);
+  border-color: var(--ids-comp-tag-filled-color-border-warning-pressed);
 }
-.ids-tag.ids-tag-filled.ids-tag-light {
+a.ids-tag.ids-tag-filled.ids-tag-light {
   color: var(--ids-comp-tag-filled-color-fg-label-light-default);
   background: var(--ids-comp-tag-filled-color-bg-light-default);
   border-color: var(--ids-comp-tag-filled-color-border-light-default);
 }
-.ids-tag.ids-tag-filled.ids-tag-light:hover {
-  color: var(--ids-comp-tag-filled-color-fg-label-light-default);
-  background: var(--ids-comp-tag-filled-color-bg-light-default);
-  border-color: var(--ids-comp-tag-filled-color-border-light-default);
+a.ids-tag.ids-tag-filled.ids-tag-light:hover {
+  color: var(--ids-comp-tag-filled-color-fg-label-light-hovered);
+  background: var(--ids-comp-tag-filled-color-bg-light-hovered);
+  border-color: var(--ids-comp-tag-filled-color-border-light-hovered);
 }
-.ids-tag.ids-tag-filled.ids-tag-light:focus, .ids-tag.ids-tag-filled.ids-tag-light:focus-visible {
-  color: var(--ids-comp-tag-filled-color-fg-label-light-default);
-  background: var(--ids-comp-tag-filled-color-bg-light-default);
-  border-color: var(--ids-comp-tag-filled-color-border-light-default);
+a.ids-tag.ids-tag-filled.ids-tag-light:focus, a.ids-tag.ids-tag-filled.ids-tag-light:focus-visible {
+  color: var(--ids-comp-tag-filled-color-fg-label-light-focused);
+  background: var(--ids-comp-tag-filled-color-bg-light-focused);
+  border-color: var(--ids-comp-tag-filled-color-border-light-focused);
   outline-color: var(--ids-comp-tag-focused-outline-color-light-focused);
 }
-.ids-tag.ids-tag-filled.ids-tag-light:active {
-  color: var(--ids-comp-tag-filled-color-fg-label-light-default);
-  background: var(--ids-comp-tag-filled-color-bg-light-default);
-  border-color: var(--ids-comp-tag-filled-color-border-light-default);
+a.ids-tag.ids-tag-filled.ids-tag-light:active {
+  color: var(--ids-comp-tag-filled-color-fg-label-light-pressed);
+  background: var(--ids-comp-tag-filled-color-bg-light-pressed);
+  border-color: var(--ids-comp-tag-filled-color-border-light-pressed);
 }
-.ids-tag.ids-tag-filled.ids-tag-dark {
+a.ids-tag.ids-tag-filled.ids-tag-dark {
   color: var(--ids-comp-tag-filled-color-fg-label-dark-default);
   background: var(--ids-comp-tag-filled-color-bg-dark-default);
   border-color: var(--ids-comp-tag-filled-color-border-dark-default);
 }
-.ids-tag.ids-tag-filled.ids-tag-dark:hover {
-  color: var(--ids-comp-tag-filled-color-fg-label-dark-default);
-  background: var(--ids-comp-tag-filled-color-bg-dark-default);
-  border-color: var(--ids-comp-tag-filled-color-border-dark-default);
+a.ids-tag.ids-tag-filled.ids-tag-dark:hover {
+  color: var(--ids-comp-tag-filled-color-fg-label-dark-hovered);
+  background: var(--ids-comp-tag-filled-color-bg-dark-hovered);
+  border-color: var(--ids-comp-tag-filled-color-border-dark-hovered);
 }
-.ids-tag.ids-tag-filled.ids-tag-dark:focus, .ids-tag.ids-tag-filled.ids-tag-dark:focus-visible {
-  color: var(--ids-comp-tag-filled-color-fg-label-dark-default);
-  background: var(--ids-comp-tag-filled-color-bg-dark-default);
-  border-color: var(--ids-comp-tag-filled-color-border-dark-default);
+a.ids-tag.ids-tag-filled.ids-tag-dark:focus, a.ids-tag.ids-tag-filled.ids-tag-dark:focus-visible {
+  color: var(--ids-comp-tag-filled-color-fg-label-dark-focused);
+  background: var(--ids-comp-tag-filled-color-bg-dark-focused);
+  border-color: var(--ids-comp-tag-filled-color-border-dark-focused);
   outline-color: var(--ids-comp-tag-focused-outline-color-dark-focused);
 }
-.ids-tag.ids-tag-filled.ids-tag-dark:active {
-  color: var(--ids-comp-tag-filled-color-fg-label-dark-default);
-  background: var(--ids-comp-tag-filled-color-bg-dark-default);
-  border-color: var(--ids-comp-tag-filled-color-border-dark-default);
+a.ids-tag.ids-tag-filled.ids-tag-dark:active {
+  color: var(--ids-comp-tag-filled-color-fg-label-dark-pressed);
+  background: var(--ids-comp-tag-filled-color-bg-dark-pressed);
+  border-color: var(--ids-comp-tag-filled-color-border-dark-pressed);
 }
-.ids-tag.ids-tag-filled.ids-tag-surface {
+a.ids-tag.ids-tag-filled.ids-tag-surface {
   color: var(--ids-comp-tag-filled-color-fg-label-surface-default);
   background: var(--ids-comp-tag-filled-color-bg-surface-default);
   border-color: var(--ids-comp-tag-filled-color-border-surface-default);
 }
-.ids-tag.ids-tag-filled.ids-tag-surface:hover {
-  color: var(--ids-comp-tag-filled-color-fg-label-surface-default);
-  background: var(--ids-comp-tag-filled-color-bg-surface-default);
-  border-color: var(--ids-comp-tag-filled-color-border-surface-default);
+a.ids-tag.ids-tag-filled.ids-tag-surface:hover {
+  color: var(--ids-comp-tag-filled-color-fg-label-surface-hovered);
+  background: var(--ids-comp-tag-filled-color-bg-surface-hovered);
+  border-color: var(--ids-comp-tag-filled-color-border-surface-hovered);
 }
-.ids-tag.ids-tag-filled.ids-tag-surface:focus, .ids-tag.ids-tag-filled.ids-tag-surface:focus-visible {
-  color: var(--ids-comp-tag-filled-color-fg-label-surface-default);
-  background: var(--ids-comp-tag-filled-color-bg-surface-default);
-  border-color: var(--ids-comp-tag-filled-color-border-surface-default);
+a.ids-tag.ids-tag-filled.ids-tag-surface:focus, a.ids-tag.ids-tag-filled.ids-tag-surface:focus-visible {
+  color: var(--ids-comp-tag-filled-color-fg-label-surface-focused);
+  background: var(--ids-comp-tag-filled-color-bg-surface-focused);
+  border-color: var(--ids-comp-tag-filled-color-border-surface-focused);
   outline-color: var(--ids-comp-tag-focused-outline-color-dark-focused);
 }
-.ids-tag.ids-tag-filled.ids-tag-surface:active {
-  color: var(--ids-comp-tag-filled-color-fg-label-surface-default);
-  background: var(--ids-comp-tag-filled-color-bg-surface-default);
-  border-color: var(--ids-comp-tag-filled-color-border-surface-default);
+a.ids-tag.ids-tag-filled.ids-tag-surface:active {
+  color: var(--ids-comp-tag-filled-color-fg-label-surface-pressed);
+  background: var(--ids-comp-tag-filled-color-bg-surface-pressed);
+  border-color: var(--ids-comp-tag-filled-color-border-surface-pressed);
 }
-.ids-tag.ids-tag-outlined.ids-tag-primary {
+a.ids-tag.ids-tag-outlined.ids-tag-primary {
   color: var(--ids-comp-tag-outlined-color-fg-label-primary-default);
   background: var(--ids-comp-tag-outlined-color-bg-primary-default);
   border-color: var(--ids-comp-tag-outlined-color-border-primary-default);
 }
-.ids-tag.ids-tag-outlined.ids-tag-primary:hover {
-  color: var(--ids-comp-tag-outlined-color-fg-label-primary-default);
-  background: var(--ids-comp-tag-outlined-color-bg-primary-default);
-  border-color: var(--ids-comp-tag-outlined-color-border-primary-default);
+a.ids-tag.ids-tag-outlined.ids-tag-primary:hover {
+  color: var(--ids-comp-tag-outlined-color-fg-label-primary-hovered);
+  background: var(--ids-comp-tag-outlined-color-bg-primary-hovered);
+  border-color: var(--ids-comp-tag-outlined-color-border-primary-hovered);
 }
-.ids-tag.ids-tag-outlined.ids-tag-primary:focus, .ids-tag.ids-tag-outlined.ids-tag-primary:focus-visible {
-  color: var(--ids-comp-tag-outlined-color-fg-label-primary-default);
-  background: var(--ids-comp-tag-outlined-color-bg-primary-default);
-  border-color: var(--ids-comp-tag-outlined-color-border-primary-default);
+a.ids-tag.ids-tag-outlined.ids-tag-primary:focus, a.ids-tag.ids-tag-outlined.ids-tag-primary:focus-visible {
+  color: var(--ids-comp-tag-outlined-color-fg-label-primary-focused);
+  background: var(--ids-comp-tag-outlined-color-bg-primary-focused);
+  border-color: var(--ids-comp-tag-outlined-color-border-primary-focused);
   outline-color: var(--ids-comp-tag-focused-outline-color-dark-focused);
 }
-.ids-tag.ids-tag-outlined.ids-tag-primary:active {
-  color: var(--ids-comp-tag-outlined-color-fg-label-primary-default);
-  background: var(--ids-comp-tag-outlined-color-bg-primary-default);
-  border-color: var(--ids-comp-tag-outlined-color-border-primary-default);
+a.ids-tag.ids-tag-outlined.ids-tag-primary:active {
+  color: var(--ids-comp-tag-outlined-color-fg-label-primary-pressed);
+  background: var(--ids-comp-tag-outlined-color-bg-primary-pressed);
+  border-color: var(--ids-comp-tag-outlined-color-border-primary-pressed);
 }
-.ids-tag.ids-tag-outlined.ids-tag-secondary {
+a.ids-tag.ids-tag-outlined.ids-tag-secondary {
   color: var(--ids-comp-tag-outlined-color-fg-label-secondary-default);
   background: var(--ids-comp-tag-outlined-color-bg-secondary-default);
   border-color: var(--ids-comp-tag-outlined-color-border-secondary-default);
 }
-.ids-tag.ids-tag-outlined.ids-tag-secondary:hover {
-  color: var(--ids-comp-tag-outlined-color-fg-label-secondary-default);
-  background: var(--ids-comp-tag-outlined-color-bg-secondary-default);
-  border-color: var(--ids-comp-tag-outlined-color-border-secondary-default);
+a.ids-tag.ids-tag-outlined.ids-tag-secondary:hover {
+  color: var(--ids-comp-tag-outlined-color-fg-label-secondary-hovered);
+  background: var(--ids-comp-tag-outlined-color-bg-secondary-hovered);
+  border-color: var(--ids-comp-tag-outlined-color-border-secondary-hovered);
 }
-.ids-tag.ids-tag-outlined.ids-tag-secondary:focus, .ids-tag.ids-tag-outlined.ids-tag-secondary:focus-visible {
-  color: var(--ids-comp-tag-outlined-color-fg-label-secondary-default);
-  background: var(--ids-comp-tag-outlined-color-bg-secondary-default);
-  border-color: var(--ids-comp-tag-outlined-color-border-secondary-default);
+a.ids-tag.ids-tag-outlined.ids-tag-secondary:focus, a.ids-tag.ids-tag-outlined.ids-tag-secondary:focus-visible {
+  color: var(--ids-comp-tag-outlined-color-fg-label-secondary-focused);
+  background: var(--ids-comp-tag-outlined-color-bg-secondary-focused);
+  border-color: var(--ids-comp-tag-outlined-color-border-secondary-focused);
   outline-color: var(--ids-comp-tag-focused-outline-color-dark-focused);
 }
-.ids-tag.ids-tag-outlined.ids-tag-secondary:active {
-  color: var(--ids-comp-tag-outlined-color-fg-label-secondary-default);
-  background: var(--ids-comp-tag-outlined-color-bg-secondary-default);
-  border-color: var(--ids-comp-tag-outlined-color-border-secondary-default);
+a.ids-tag.ids-tag-outlined.ids-tag-secondary:active {
+  color: var(--ids-comp-tag-outlined-color-fg-label-secondary-pressed);
+  background: var(--ids-comp-tag-outlined-color-bg-secondary-pressed);
+  border-color: var(--ids-comp-tag-outlined-color-border-secondary-pressed);
 }
-.ids-tag.ids-tag-outlined.ids-tag-brand {
+a.ids-tag.ids-tag-outlined.ids-tag-brand {
   color: var(--ids-comp-tag-outlined-color-fg-label-brand-default);
   background: var(--ids-comp-tag-outlined-color-bg-brand-default);
   border-color: var(--ids-comp-tag-outlined-color-border-brand-default);
 }
-.ids-tag.ids-tag-outlined.ids-tag-brand:hover {
-  color: var(--ids-comp-tag-outlined-color-fg-label-brand-default);
-  background: var(--ids-comp-tag-outlined-color-bg-brand-default);
-  border-color: var(--ids-comp-tag-outlined-color-border-brand-default);
+a.ids-tag.ids-tag-outlined.ids-tag-brand:hover {
+  color: var(--ids-comp-tag-outlined-color-fg-label-brand-hovered);
+  background: var(--ids-comp-tag-outlined-color-bg-brand-hovered);
+  border-color: var(--ids-comp-tag-outlined-color-border-brand-hovered);
 }
-.ids-tag.ids-tag-outlined.ids-tag-brand:focus, .ids-tag.ids-tag-outlined.ids-tag-brand:focus-visible {
-  color: var(--ids-comp-tag-outlined-color-fg-label-brand-default);
-  background: var(--ids-comp-tag-outlined-color-bg-brand-default);
-  border-color: var(--ids-comp-tag-outlined-color-border-brand-default);
+a.ids-tag.ids-tag-outlined.ids-tag-brand:focus, a.ids-tag.ids-tag-outlined.ids-tag-brand:focus-visible {
+  color: var(--ids-comp-tag-outlined-color-fg-label-brand-focused);
+  background: var(--ids-comp-tag-outlined-color-bg-brand-focused);
+  border-color: var(--ids-comp-tag-outlined-color-border-brand-focused);
   outline-color: var(--ids-comp-tag-focused-outline-color-dark-focused);
 }
-.ids-tag.ids-tag-outlined.ids-tag-brand:active {
-  color: var(--ids-comp-tag-outlined-color-fg-label-brand-default);
-  background: var(--ids-comp-tag-outlined-color-bg-brand-default);
-  border-color: var(--ids-comp-tag-outlined-color-border-brand-default);
+a.ids-tag.ids-tag-outlined.ids-tag-brand:active {
+  color: var(--ids-comp-tag-outlined-color-fg-label-brand-pressed);
+  background: var(--ids-comp-tag-outlined-color-bg-brand-pressed);
+  border-color: var(--ids-comp-tag-outlined-color-border-brand-pressed);
 }
-.ids-tag.ids-tag-outlined.ids-tag-error {
+a.ids-tag.ids-tag-outlined.ids-tag-error {
   color: var(--ids-comp-tag-outlined-color-fg-label-error-default);
   background: var(--ids-comp-tag-outlined-color-bg-error-default);
   border-color: var(--ids-comp-tag-outlined-color-border-error-default);
 }
-.ids-tag.ids-tag-outlined.ids-tag-error:hover {
-  color: var(--ids-comp-tag-outlined-color-fg-label-error-default);
-  background: var(--ids-comp-tag-outlined-color-bg-error-default);
-  border-color: var(--ids-comp-tag-outlined-color-border-error-default);
+a.ids-tag.ids-tag-outlined.ids-tag-error:hover {
+  color: var(--ids-comp-tag-outlined-color-fg-label-error-hovered);
+  background: var(--ids-comp-tag-outlined-color-bg-error-hovered);
+  border-color: var(--ids-comp-tag-outlined-color-border-error-hovered);
 }
-.ids-tag.ids-tag-outlined.ids-tag-error:focus, .ids-tag.ids-tag-outlined.ids-tag-error:focus-visible {
-  color: var(--ids-comp-tag-outlined-color-fg-label-error-default);
-  background: var(--ids-comp-tag-outlined-color-bg-error-default);
-  border-color: var(--ids-comp-tag-outlined-color-border-error-default);
+a.ids-tag.ids-tag-outlined.ids-tag-error:focus, a.ids-tag.ids-tag-outlined.ids-tag-error:focus-visible {
+  color: var(--ids-comp-tag-outlined-color-fg-label-error-focused);
+  background: var(--ids-comp-tag-outlined-color-bg-error-focused);
+  border-color: var(--ids-comp-tag-outlined-color-border-error-focused);
   outline-color: var(--ids-comp-tag-focused-outline-color-dark-focused);
 }
-.ids-tag.ids-tag-outlined.ids-tag-error:active {
-  color: var(--ids-comp-tag-outlined-color-fg-label-error-default);
-  background: var(--ids-comp-tag-outlined-color-bg-error-default);
-  border-color: var(--ids-comp-tag-outlined-color-border-error-default);
+a.ids-tag.ids-tag-outlined.ids-tag-error:active {
+  color: var(--ids-comp-tag-outlined-color-fg-label-error-pressed);
+  background: var(--ids-comp-tag-outlined-color-bg-error-pressed);
+  border-color: var(--ids-comp-tag-outlined-color-border-error-pressed);
 }
-.ids-tag.ids-tag-outlined.ids-tag-success {
+a.ids-tag.ids-tag-outlined.ids-tag-success {
   color: var(--ids-comp-tag-outlined-color-fg-label-success-default);
   background: var(--ids-comp-tag-outlined-color-bg-success-default);
   border-color: var(--ids-comp-tag-outlined-color-border-success-default);
 }
-.ids-tag.ids-tag-outlined.ids-tag-success:hover {
-  color: var(--ids-comp-tag-outlined-color-fg-label-success-default);
-  background: var(--ids-comp-tag-outlined-color-bg-success-default);
-  border-color: var(--ids-comp-tag-outlined-color-border-success-default);
+a.ids-tag.ids-tag-outlined.ids-tag-success:hover {
+  color: var(--ids-comp-tag-outlined-color-fg-label-success-hovered);
+  background: var(--ids-comp-tag-outlined-color-bg-success-hovered);
+  border-color: var(--ids-comp-tag-outlined-color-border-success-hovered);
 }
-.ids-tag.ids-tag-outlined.ids-tag-success:focus, .ids-tag.ids-tag-outlined.ids-tag-success:focus-visible {
-  color: var(--ids-comp-tag-outlined-color-fg-label-success-default);
-  background: var(--ids-comp-tag-outlined-color-bg-success-default);
-  border-color: var(--ids-comp-tag-outlined-color-border-success-default);
+a.ids-tag.ids-tag-outlined.ids-tag-success:focus, a.ids-tag.ids-tag-outlined.ids-tag-success:focus-visible {
+  color: var(--ids-comp-tag-outlined-color-fg-label-success-focused);
+  background: var(--ids-comp-tag-outlined-color-bg-success-focused);
+  border-color: var(--ids-comp-tag-outlined-color-border-success-focused);
   outline-color: var(--ids-comp-tag-focused-outline-color-dark-focused);
 }
-.ids-tag.ids-tag-outlined.ids-tag-success:active {
-  color: var(--ids-comp-tag-outlined-color-fg-label-success-default);
-  background: var(--ids-comp-tag-outlined-color-bg-success-default);
-  border-color: var(--ids-comp-tag-outlined-color-border-success-default);
+a.ids-tag.ids-tag-outlined.ids-tag-success:active {
+  color: var(--ids-comp-tag-outlined-color-fg-label-success-pressed);
+  background: var(--ids-comp-tag-outlined-color-bg-success-pressed);
+  border-color: var(--ids-comp-tag-outlined-color-border-success-pressed);
 }
-.ids-tag.ids-tag-outlined.ids-tag-warning {
+a.ids-tag.ids-tag-outlined.ids-tag-warning {
   color: var(--ids-comp-tag-outlined-color-fg-label-warning-default);
   background: var(--ids-comp-tag-outlined-color-bg-warning-default);
   border-color: var(--ids-comp-tag-outlined-color-border-warning-default);
 }
-.ids-tag.ids-tag-outlined.ids-tag-warning:hover {
-  color: var(--ids-comp-tag-outlined-color-fg-label-warning-default);
-  background: var(--ids-comp-tag-outlined-color-bg-warning-default);
-  border-color: var(--ids-comp-tag-outlined-color-border-warning-default);
+a.ids-tag.ids-tag-outlined.ids-tag-warning:hover {
+  color: var(--ids-comp-tag-outlined-color-fg-label-warning-hovered);
+  background: var(--ids-comp-tag-outlined-color-bg-warning-hovered);
+  border-color: var(--ids-comp-tag-outlined-color-border-warning-hovered);
 }
-.ids-tag.ids-tag-outlined.ids-tag-warning:focus, .ids-tag.ids-tag-outlined.ids-tag-warning:focus-visible {
-  color: var(--ids-comp-tag-outlined-color-fg-label-warning-default);
-  background: var(--ids-comp-tag-outlined-color-bg-warning-default);
-  border-color: var(--ids-comp-tag-outlined-color-border-warning-default);
+a.ids-tag.ids-tag-outlined.ids-tag-warning:focus, a.ids-tag.ids-tag-outlined.ids-tag-warning:focus-visible {
+  color: var(--ids-comp-tag-outlined-color-fg-label-warning-focused);
+  background: var(--ids-comp-tag-outlined-color-bg-warning-focused);
+  border-color: var(--ids-comp-tag-outlined-color-border-warning-focused);
   outline-color: var(--ids-comp-tag-focused-outline-color-dark-focused);
 }
-.ids-tag.ids-tag-outlined.ids-tag-warning:active {
-  color: var(--ids-comp-tag-outlined-color-fg-label-warning-default);
-  background: var(--ids-comp-tag-outlined-color-bg-warning-default);
-  border-color: var(--ids-comp-tag-outlined-color-border-warning-default);
+a.ids-tag.ids-tag-outlined.ids-tag-warning:active {
+  color: var(--ids-comp-tag-outlined-color-fg-label-warning-pressed);
+  background: var(--ids-comp-tag-outlined-color-bg-warning-pressed);
+  border-color: var(--ids-comp-tag-outlined-color-border-warning-pressed);
 }
-.ids-tag.ids-tag-outlined.ids-tag-light {
+a.ids-tag.ids-tag-outlined.ids-tag-light {
   color: var(--ids-comp-tag-outlined-color-fg-label-light-default);
   background: var(--ids-comp-tag-outlined-color-bg-light-default);
   border-color: var(--ids-comp-tag-outlined-color-border-light-default);
 }
-.ids-tag.ids-tag-outlined.ids-tag-light:hover {
-  color: var(--ids-comp-tag-outlined-color-fg-label-light-default);
-  background: var(--ids-comp-tag-outlined-color-bg-light-default);
-  border-color: var(--ids-comp-tag-outlined-color-border-light-default);
+a.ids-tag.ids-tag-outlined.ids-tag-light:hover {
+  color: var(--ids-comp-tag-outlined-color-fg-label-light-hovered);
+  background: var(--ids-comp-tag-outlined-color-bg-light-hovered);
+  border-color: var(--ids-comp-tag-outlined-color-border-light-hovered);
 }
-.ids-tag.ids-tag-outlined.ids-tag-light:focus, .ids-tag.ids-tag-outlined.ids-tag-light:focus-visible {
-  color: var(--ids-comp-tag-outlined-color-fg-label-light-default);
-  background: var(--ids-comp-tag-outlined-color-bg-light-default);
-  border-color: var(--ids-comp-tag-outlined-color-border-light-default);
+a.ids-tag.ids-tag-outlined.ids-tag-light:focus, a.ids-tag.ids-tag-outlined.ids-tag-light:focus-visible {
+  color: var(--ids-comp-tag-outlined-color-fg-label-light-focused);
+  background: var(--ids-comp-tag-outlined-color-bg-light-focused);
+  border-color: var(--ids-comp-tag-outlined-color-border-light-focused);
   outline-color: var(--ids-comp-tag-focused-outline-color-light-focused);
 }
-.ids-tag.ids-tag-outlined.ids-tag-light:active {
-  color: var(--ids-comp-tag-outlined-color-fg-label-light-default);
-  background: var(--ids-comp-tag-outlined-color-bg-light-default);
-  border-color: var(--ids-comp-tag-outlined-color-border-light-default);
+a.ids-tag.ids-tag-outlined.ids-tag-light:active {
+  color: var(--ids-comp-tag-outlined-color-fg-label-light-pressed);
+  background: var(--ids-comp-tag-outlined-color-bg-light-pressed);
+  border-color: var(--ids-comp-tag-outlined-color-border-light-pressed);
 }
-.ids-tag.ids-tag-outlined.ids-tag-dark {
+a.ids-tag.ids-tag-outlined.ids-tag-dark {
   color: var(--ids-comp-tag-outlined-color-fg-label-dark-default);
   background: var(--ids-comp-tag-outlined-color-bg-dark-default);
   border-color: var(--ids-comp-tag-outlined-color-border-dark-default);
 }
-.ids-tag.ids-tag-outlined.ids-tag-dark:hover {
-  color: var(--ids-comp-tag-outlined-color-fg-label-dark-default);
-  background: var(--ids-comp-tag-outlined-color-bg-dark-default);
-  border-color: var(--ids-comp-tag-outlined-color-border-dark-default);
+a.ids-tag.ids-tag-outlined.ids-tag-dark:hover {
+  color: var(--ids-comp-tag-outlined-color-fg-label-dark-hovered);
+  background: var(--ids-comp-tag-outlined-color-bg-dark-hovered);
+  border-color: var(--ids-comp-tag-outlined-color-border-dark-hovered);
 }
-.ids-tag.ids-tag-outlined.ids-tag-dark:focus, .ids-tag.ids-tag-outlined.ids-tag-dark:focus-visible {
-  color: var(--ids-comp-tag-outlined-color-fg-label-dark-default);
-  background: var(--ids-comp-tag-outlined-color-bg-dark-default);
-  border-color: var(--ids-comp-tag-outlined-color-border-dark-default);
+a.ids-tag.ids-tag-outlined.ids-tag-dark:focus, a.ids-tag.ids-tag-outlined.ids-tag-dark:focus-visible {
+  color: var(--ids-comp-tag-outlined-color-fg-label-dark-focused);
+  background: var(--ids-comp-tag-outlined-color-bg-dark-focused);
+  border-color: var(--ids-comp-tag-outlined-color-border-dark-focused);
   outline-color: var(--ids-comp-tag-focused-outline-color-dark-focused);
 }
-.ids-tag.ids-tag-outlined.ids-tag-dark:active {
-  color: var(--ids-comp-tag-outlined-color-fg-label-dark-default);
-  background: var(--ids-comp-tag-outlined-color-bg-dark-default);
-  border-color: var(--ids-comp-tag-outlined-color-border-dark-default);
+a.ids-tag.ids-tag-outlined.ids-tag-dark:active {
+  color: var(--ids-comp-tag-outlined-color-fg-label-dark-pressed);
+  background: var(--ids-comp-tag-outlined-color-bg-dark-pressed);
+  border-color: var(--ids-comp-tag-outlined-color-border-dark-pressed);
 }
-.ids-tag.ids-tag-outlined.ids-tag-surface {
+a.ids-tag.ids-tag-outlined.ids-tag-surface {
   color: var(--ids-comp-tag-outlined-color-fg-label-surface-default);
   background: var(--ids-comp-tag-outlined-color-bg-surface-default);
   border-color: var(--ids-comp-tag-outlined-color-border-surface-default);
 }
-.ids-tag.ids-tag-outlined.ids-tag-surface:hover {
-  color: var(--ids-comp-tag-outlined-color-fg-label-surface-default);
-  background: var(--ids-comp-tag-outlined-color-bg-surface-default);
-  border-color: var(--ids-comp-tag-outlined-color-border-surface-default);
+a.ids-tag.ids-tag-outlined.ids-tag-surface:hover {
+  color: var(--ids-comp-tag-outlined-color-fg-label-surface-hovered);
+  background: var(--ids-comp-tag-outlined-color-bg-surface-hovered);
+  border-color: var(--ids-comp-tag-outlined-color-border-surface-hovered);
 }
-.ids-tag.ids-tag-outlined.ids-tag-surface:focus, .ids-tag.ids-tag-outlined.ids-tag-surface:focus-visible {
-  color: var(--ids-comp-tag-outlined-color-fg-label-surface-default);
-  background: var(--ids-comp-tag-outlined-color-bg-surface-default);
-  border-color: var(--ids-comp-tag-outlined-color-border-surface-default);
+a.ids-tag.ids-tag-outlined.ids-tag-surface:focus, a.ids-tag.ids-tag-outlined.ids-tag-surface:focus-visible {
+  color: var(--ids-comp-tag-outlined-color-fg-label-surface-focused);
+  background: var(--ids-comp-tag-outlined-color-bg-surface-focused);
+  border-color: var(--ids-comp-tag-outlined-color-border-surface-focused);
   outline-color: var(--ids-comp-tag-focused-outline-color-dark-focused);
 }
-.ids-tag.ids-tag-outlined.ids-tag-surface:active {
-  color: var(--ids-comp-tag-outlined-color-fg-label-surface-default);
-  background: var(--ids-comp-tag-outlined-color-bg-surface-default);
-  border-color: var(--ids-comp-tag-outlined-color-border-surface-default);
+a.ids-tag.ids-tag-outlined.ids-tag-surface:active {
+  color: var(--ids-comp-tag-outlined-color-fg-label-surface-pressed);
+  background: var(--ids-comp-tag-outlined-color-bg-surface-pressed);
+  border-color: var(--ids-comp-tag-outlined-color-border-surface-pressed);
 }
 
-button.ids-tag :not(:disabled) {
-  cursor: pointer;
+.ids-tag-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  align-content: center;
 }
-button.ids-tag :disabled {
-  cursor: not-allowed;
+.ids-tag-group.ids-tag-group-compact {
+  gap: var(--ids-comp-tag-group-size-row-gap-compact) var(--ids-comp-tag-group-size-column-gap-compact);
+  padding: var(--ids-comp-tag-group-size-padding-y-compact) var(--ids-comp-tag-group-size-padding-x-compact);
+}
+.ids-tag-group.ids-tag-group-comfortable {
+  gap: var(--ids-comp-tag-group-size-row-gap-comfortable) var(--ids-comp-tag-group-size-column-gap-comfortable);
+  padding: var(--ids-comp-tag-group-size-padding-y-comfortable) var(--ids-comp-tag-group-size-padding-x-comfortable);
+}
+.ids-tag-group.ids-tag-group-spacious {
+  gap: var(--ids-comp-tag-group-size-row-gap-spacious) var(--ids-comp-tag-group-size-column-gap-spacious);
+  padding: var(--ids-comp-tag-group-size-padding-y-spacious) var(--ids-comp-tag-group-size-padding-x-spacious);
+}
+.ids-tag-group.ids-tag-group-dense {
+  gap: var(--ids-comp-tag-group-size-row-gap-dense) var(--ids-comp-tag-group-size-column-gap-dense);
+  padding: var(--ids-comp-tag-group-size-padding-y-dense) var(--ids-comp-tag-group-size-padding-x-dense);
 }
 
 .ids-tooltip {