@i-cell/ids-styles 0.0.57 → 0.0.59

package/dist/components.css

@@ -7207,160 +7207,160 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
   width: inherit;
 }
 .ids-message.ids-message-compact {
-  gap: var(--ids-comp-forms-message-size-gap-compact);
-  padding: var(--ids-comp-forms-message-size-padding-y-compact) var(--ids-comp-forms-message-size-padding-x-compact);
-  font-family: var(--ids-comp-forms-message-typography-font-family-compact);
-  font-size: var(--ids-comp-forms-message-typography-font-size-compact);
-  font-weight: var(--ids-comp-forms-message-typography-font-weight-compact);
-  letter-spacing: var(--ids-comp-forms-message-typography-letter-spacing-compact);
-  line-height: var(--ids-comp-forms-message-typography-line-height-compact);
+  gap: var(--ids-comp-message-size-gap-compact);
+  padding: var(--ids-comp-message-size-padding-y-compact) var(--ids-comp-message-size-padding-x-compact);
+  font-family: var(--ids-comp-message-typography-font-family-compact);
+  font-size: var(--ids-comp-message-typography-font-size-compact);
+  font-weight: var(--ids-comp-message-typography-font-weight-compact);
+  letter-spacing: var(--ids-comp-message-typography-letter-spacing-compact);
+  line-height: var(--ids-comp-message-typography-line-height-compact);
 }
 .ids-message.ids-message-compact .ids-message__prefix {
-  height: var(--ids-comp-forms-message-size-icon-height-compact);
-  width: var(--ids-comp-forms-message-size-icon-width-compact);
+  height: var(--ids-comp-message-size-icon-height-compact);
+  width: var(--ids-comp-message-size-icon-width-compact);
 }
 .ids-message.ids-message-compact .ids-message__prefix > .ids-icon {
-  font-size: var(--ids-comp-forms-message-icon-typography-font-size-compact);
-  font-weight: var(--ids-comp-forms-message-icon-typography-font-weight-compact);
-  line-height: var(--ids-comp-forms-message-icon-typography-line-height-compact);
+  font-size: var(--ids-comp-message-icon-typography-font-size-compact);
+  font-weight: var(--ids-comp-message-icon-typography-font-weight-compact);
+  line-height: var(--ids-comp-message-icon-typography-line-height-compact);
 }
 .ids-message.ids-message-comfortable {
-  gap: var(--ids-comp-forms-message-size-gap-comfortable);
-  padding: var(--ids-comp-forms-message-size-padding-y-comfortable) var(--ids-comp-forms-message-size-padding-x-comfortable);
-  font-family: var(--ids-comp-forms-message-typography-font-family-comfortable);
-  font-size: var(--ids-comp-forms-message-typography-font-size-comfortable);
-  font-weight: var(--ids-comp-forms-message-typography-font-weight-comfortable);
-  letter-spacing: var(--ids-comp-forms-message-typography-letter-spacing-comfortable);
-  line-height: var(--ids-comp-forms-message-typography-line-height-comfortable);
+  gap: var(--ids-comp-message-size-gap-comfortable);
+  padding: var(--ids-comp-message-size-padding-y-comfortable) var(--ids-comp-message-size-padding-x-comfortable);
+  font-family: var(--ids-comp-message-typography-font-family-comfortable);
+  font-size: var(--ids-comp-message-typography-font-size-comfortable);
+  font-weight: var(--ids-comp-message-typography-font-weight-comfortable);
+  letter-spacing: var(--ids-comp-message-typography-letter-spacing-comfortable);
+  line-height: var(--ids-comp-message-typography-line-height-comfortable);
 }
 .ids-message.ids-message-comfortable .ids-message__prefix {
-  height: var(--ids-comp-forms-message-size-icon-height-comfortable);
-  width: var(--ids-comp-forms-message-size-icon-width-comfortable);
+  height: var(--ids-comp-message-size-icon-height-comfortable);
+  width: var(--ids-comp-message-size-icon-width-comfortable);
 }
 .ids-message.ids-message-comfortable .ids-message__prefix > .ids-icon {
-  font-size: var(--ids-comp-forms-message-icon-typography-font-size-comfortable);
-  font-weight: var(--ids-comp-forms-message-icon-typography-font-weight-comfortable);
-  line-height: var(--ids-comp-forms-message-icon-typography-line-height-comfortable);
+  font-size: var(--ids-comp-message-icon-typography-font-size-comfortable);
+  font-weight: var(--ids-comp-message-icon-typography-font-weight-comfortable);
+  line-height: var(--ids-comp-message-icon-typography-line-height-comfortable);
 }
 .ids-message.ids-message-spacious {
-  gap: var(--ids-comp-forms-message-size-gap-spacious);
-  padding: var(--ids-comp-forms-message-size-padding-y-spacious) var(--ids-comp-forms-message-size-padding-x-spacious);
-  font-family: var(--ids-comp-forms-message-typography-font-family-spacious);
-  font-size: var(--ids-comp-forms-message-typography-font-size-spacious);
-  font-weight: var(--ids-comp-forms-message-typography-font-weight-spacious);
-  letter-spacing: var(--ids-comp-forms-message-typography-letter-spacing-spacious);
-  line-height: var(--ids-comp-forms-message-typography-line-height-spacious);
+  gap: var(--ids-comp-message-size-gap-spacious);
+  padding: var(--ids-comp-message-size-padding-y-spacious) var(--ids-comp-message-size-padding-x-spacious);
+  font-family: var(--ids-comp-message-typography-font-family-spacious);
+  font-size: var(--ids-comp-message-typography-font-size-spacious);
+  font-weight: var(--ids-comp-message-typography-font-weight-spacious);
+  letter-spacing: var(--ids-comp-message-typography-letter-spacing-spacious);
+  line-height: var(--ids-comp-message-typography-line-height-spacious);
 }
 .ids-message.ids-message-spacious .ids-message__prefix {
-  height: var(--ids-comp-forms-message-size-icon-height-spacious);
-  width: var(--ids-comp-forms-message-size-icon-width-spacious);
+  height: var(--ids-comp-message-size-icon-height-spacious);
+  width: var(--ids-comp-message-size-icon-width-spacious);
 }
 .ids-message.ids-message-spacious .ids-message__prefix > .ids-icon {
-  font-size: var(--ids-comp-forms-message-icon-typography-font-size-spacious);
-  font-weight: var(--ids-comp-forms-message-icon-typography-font-weight-spacious);
-  line-height: var(--ids-comp-forms-message-icon-typography-line-height-spacious);
+  font-size: var(--ids-comp-message-icon-typography-font-size-spacious);
+  font-weight: var(--ids-comp-message-icon-typography-font-weight-spacious);
+  line-height: var(--ids-comp-message-icon-typography-line-height-spacious);
 }
 .ids-message.ids-message-dense {
-  gap: var(--ids-comp-forms-message-size-gap-dense);
-  padding: var(--ids-comp-forms-message-size-padding-y-dense) var(--ids-comp-forms-message-size-padding-x-dense);
-  font-family: var(--ids-comp-forms-message-typography-font-family-dense);
-  font-size: var(--ids-comp-forms-message-typography-font-size-dense);
-  font-weight: var(--ids-comp-forms-message-typography-font-weight-dense);
-  letter-spacing: var(--ids-comp-forms-message-typography-letter-spacing-dense);
-  line-height: var(--ids-comp-forms-message-typography-line-height-dense);
+  gap: var(--ids-comp-message-size-gap-dense);
+  padding: var(--ids-comp-message-size-padding-y-dense) var(--ids-comp-message-size-padding-x-dense);
+  font-family: var(--ids-comp-message-typography-font-family-dense);
+  font-size: var(--ids-comp-message-typography-font-size-dense);
+  font-weight: var(--ids-comp-message-typography-font-weight-dense);
+  letter-spacing: var(--ids-comp-message-typography-letter-spacing-dense);
+  line-height: var(--ids-comp-message-typography-line-height-dense);
 }
 .ids-message.ids-message-dense .ids-message__prefix {
-  height: var(--ids-comp-forms-message-size-icon-height-dense);
-  width: var(--ids-comp-forms-message-size-icon-width-dense);
+  height: var(--ids-comp-message-size-icon-height-dense);
+  width: var(--ids-comp-message-size-icon-width-dense);
 }
 .ids-message.ids-message-dense .ids-message__prefix > .ids-icon {
-  font-size: var(--ids-comp-forms-message-icon-typography-font-size-dense);
-  font-weight: var(--ids-comp-forms-message-icon-typography-font-weight-dense);
-  line-height: var(--ids-comp-forms-message-icon-typography-line-height-dense);
+  font-size: var(--ids-comp-message-icon-typography-font-size-dense);
+  font-weight: var(--ids-comp-message-icon-typography-font-weight-dense);
+  line-height: var(--ids-comp-message-icon-typography-line-height-dense);
 }
 .ids-message.ids-message-light .ids-message__prefix {
-  color: var(--ids-comp-forms-message-color-fg-icon-light-default);
+  color: var(--ids-comp-message-color-fg-icon-light-default);
 }
 .ids-message.ids-message-light .ids-message__text,
 .ids-message.ids-message-light .ids-message__suffix {
-  color: var(--ids-comp-forms-message-color-fg-text-light-default);
+  color: var(--ids-comp-message-color-fg-text-light-default);
 }
 .ids-message.ids-message-light.ids-message-disabled .ids-message__prefix .ids-icon {
-  color: var(--ids-comp-forms-message-color-fg-icon-light-disabled);
+  color: var(--ids-comp-message-color-fg-icon-light-disabled);
 }
 .ids-message.ids-message-light.ids-message-disabled .ids-message__text,
 .ids-message.ids-message-light.ids-message-disabled .ids-message__suffix {
-  color: var(--ids-comp-forms-message-color-fg-text-light-disabled) !important;
+  color: var(--ids-comp-message-color-fg-text-light-disabled) !important;
 }
 .ids-message.ids-message-light.ids-error-message .ids-message__prefix {
-  color: var(--ids-comp-forms-message-color-fg-icon-light-error-default);
+  color: var(--ids-comp-message-color-fg-icon-light-error-default);
 }
 .ids-message.ids-message-light.ids-error-message .ids-message__text,
 .ids-message.ids-message-light.ids-error-message .ids-message__suffix {
-  color: var(--ids-comp-forms-message-color-fg-text-light-error-default);
+  color: var(--ids-comp-message-color-fg-text-light-error-default);
 }
 .ids-message.ids-success-message .ids-message__prefix {
-  color: var(--ids-comp-forms-message-color-fg-icon-light-success-default);
+  color: var(--ids-comp-message-color-fg-icon-light-success-default);
 }
 .ids-message.ids-success-message .ids-message__text,
 .ids-message.ids-success-message .ids-message__suffix {
-  color: var(--ids-comp-forms-message-color-fg-text-light-success-default);
+  color: var(--ids-comp-message-color-fg-text-light-success-default);
 }
 .ids-message.ids-message-dark .ids-message__prefix {
-  color: var(--ids-comp-forms-message-color-fg-icon-dark-default);
+  color: var(--ids-comp-message-color-fg-icon-dark-default);
 }
 .ids-message.ids-message-dark .ids-message__text,
 .ids-message.ids-message-dark .ids-message__suffix {
-  color: var(--ids-comp-forms-message-color-fg-text-dark-default);
+  color: var(--ids-comp-message-color-fg-text-dark-default);
 }
 .ids-message.ids-message-dark.ids-message-disabled .ids-message__prefix .ids-icon {
-  color: var(--ids-comp-forms-message-color-fg-icon-dark-disabled);
+  color: var(--ids-comp-message-color-fg-icon-dark-disabled);
 }
 .ids-message.ids-message-dark.ids-message-disabled .ids-message__text,
 .ids-message.ids-message-dark.ids-message-disabled .ids-message__suffix {
-  color: var(--ids-comp-forms-message-color-fg-text-dark-disabled) !important;
+  color: var(--ids-comp-message-color-fg-text-dark-disabled) !important;
 }
 .ids-message.ids-message-dark.ids-error-message .ids-message__prefix {
-  color: var(--ids-comp-forms-message-color-fg-icon-dark-error-default);
+  color: var(--ids-comp-message-color-fg-icon-dark-error-default);
 }
 .ids-message.ids-message-dark.ids-error-message .ids-message__text,
 .ids-message.ids-message-dark.ids-error-message .ids-message__suffix {
-  color: var(--ids-comp-forms-message-color-fg-text-dark-error-default);
+  color: var(--ids-comp-message-color-fg-text-dark-error-default);
 }
 .ids-message.ids-success-message .ids-message__prefix {
-  color: var(--ids-comp-forms-message-color-fg-icon-dark-success-default);
+  color: var(--ids-comp-message-color-fg-icon-dark-success-default);
 }
 .ids-message.ids-success-message .ids-message__text,
 .ids-message.ids-success-message .ids-message__suffix {
-  color: var(--ids-comp-forms-message-color-fg-text-dark-success-default);
+  color: var(--ids-comp-message-color-fg-text-dark-success-default);
 }
 .ids-message.ids-message-surface .ids-message__prefix {
-  color: var(--ids-comp-forms-message-color-fg-icon-surface-default);
+  color: var(--ids-comp-message-color-fg-icon-surface-default);
 }
 .ids-message.ids-message-surface .ids-message__text,
 .ids-message.ids-message-surface .ids-message__suffix {
-  color: var(--ids-comp-forms-message-color-fg-text-surface-default);
+  color: var(--ids-comp-message-color-fg-text-surface-default);
 }
 .ids-message.ids-message-surface.ids-message-disabled .ids-message__prefix .ids-icon {
-  color: var(--ids-comp-forms-message-color-fg-icon-surface-disabled);
+  color: var(--ids-comp-message-color-fg-icon-surface-disabled);
 }
 .ids-message.ids-message-surface.ids-message-disabled .ids-message__text,
 .ids-message.ids-message-surface.ids-message-disabled .ids-message__suffix {
-  color: var(--ids-comp-forms-message-color-fg-text-surface-disabled) !important;
+  color: var(--ids-comp-message-color-fg-text-surface-disabled) !important;
 }
 .ids-message.ids-message-surface.ids-error-message .ids-message__prefix {
-  color: var(--ids-comp-forms-message-color-fg-icon-surface-error-default);
+  color: var(--ids-comp-message-color-fg-icon-surface-error-default);
 }
 .ids-message.ids-message-surface.ids-error-message .ids-message__text,
 .ids-message.ids-message-surface.ids-error-message .ids-message__suffix {
-  color: var(--ids-comp-forms-message-color-fg-text-surface-error-default);
+  color: var(--ids-comp-message-color-fg-text-surface-error-default);
 }
 .ids-message.ids-success-message .ids-message__prefix {
-  color: var(--ids-comp-forms-message-color-fg-icon-surface-success-default);
+  color: var(--ids-comp-message-color-fg-icon-surface-success-default);
 }
 .ids-message.ids-success-message .ids-message__text,
 .ids-message.ids-success-message .ids-message__suffix {
-  color: var(--ids-comp-forms-message-color-fg-text-surface-success-default);
+  color: var(--ids-comp-message-color-fg-text-surface-success-default);
 }
 
 .ids-form-field__required-marker::after {
@@ -9847,19 +9847,19 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
   color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-default);
 }
 .ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow.active:not(:disabled) {
-  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-default);
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-active);
 }
 .ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:focus, .ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:focus-visible {
-  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-default);
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-focused);
 }
 .ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:hover {
-  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-default);
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-hovered);
 }
 .ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:active {
-  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-default);
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-pressed);
 }
 .ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:disabled {
-  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-default);
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-disabled);
 }
 .ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-truncation {
   color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-disabled);
@@ -9898,19 +9898,19 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
   color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-default);
 }
 .ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow.active:not(:disabled) {
-  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-default);
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-active);
 }
 .ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:focus, .ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:focus-visible {
-  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-default);
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-focused);
 }
 .ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:hover {
-  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-default);
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-hovered);
 }
 .ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:active {
-  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-default);
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-pressed);
 }
 .ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:disabled {
-  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-default);
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-disabled);
 }
 .ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-truncation {
   color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-disabled);
@@ -9949,19 +9949,19 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
   color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-default);
 }
 .ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow.active:not(:disabled) {
-  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-default);
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-active);
 }
 .ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:focus, .ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:focus-visible {
-  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-default);
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-focused);
 }
 .ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:hover {
-  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-default);
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-hovered);
 }
 .ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:active {
-  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-default);
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-pressed);
 }
 .ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:disabled {
-  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-default);
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-disabled);
 }
 .ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-truncation {
   color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-disabled);
@@ -10000,19 +10000,19 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
   color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-default);
 }
 .ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow.active:not(:disabled) {
-  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-default);
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-active);
 }
 .ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:focus, .ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:focus-visible {
-  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-default);
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-focused);
 }
 .ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:hover {
-  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-default);
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-hovered);
 }
 .ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:active {
-  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-default);
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-pressed);
 }
 .ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:disabled {
-  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-default);
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-disabled);
 }
 .ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-truncation {
   color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-disabled);
@@ -11279,301 +11279,301 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
 .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined {
   background-color: var(--ids-comp-segmented-control-toggle-container-outlined-color-bg-light-default);
 }
-.ids-segmented-control-toggle .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle .ids-segmented-control-toggle-item > button:focus-visible {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-primary .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-primary .ids-segmented-control-toggle-item > button:focus-visible {
   outline-color: var(--ids-comp-segmented-control-toggle-focused-outline-color-dark-focused);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button {
   background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-default);
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-default);
   border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-default);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-default);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
   background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-active);
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-active);
   border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-active);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-active);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:hover {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:hover {
   background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-hovered);
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-hovered);
   border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-hovered);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:hover .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:hover .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-hovered);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:active {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:active {
   background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-pressed);
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-pressed);
   border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-pressed);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:active .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:active .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-pressed);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:focus-visible {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:focus-visible {
   background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-focused);
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-focused);
   border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-focused);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:focus-visible .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:focus-visible .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-focused);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:disabled {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:disabled {
   background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-disabled);
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-disabled);
   border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-disabled);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:disabled .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:disabled .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-disabled);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button {
   background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-default);
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-default);
   border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-default);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-default);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
   background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-active);
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-active);
   border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-active);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-active);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:hover {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:hover {
   background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-hovered);
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-hovered);
   border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-hovered);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:hover .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:hover .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-hovered);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:active {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:active {
   background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-pressed);
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-pressed);
   border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-pressed);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:active .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:active .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-pressed);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:focus-visible {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:focus-visible {
   background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-focused);
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-focused);
   border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-focused);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:focus-visible .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:focus-visible .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-focused);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:disabled {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:disabled {
   background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-disabled);
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-disabled);
   border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-disabled);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:disabled .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:disabled .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-disabled);
 }
-.ids-segmented-control-toggle .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle .ids-segmented-control-toggle-item > button:focus-visible {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-surface .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-surface .ids-segmented-control-toggle-item > button:focus-visible {
   outline-color: var(--ids-comp-segmented-control-toggle-focused-outline-color-dark-focused);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button {
   background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-default);
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-default);
   border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-default);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-default);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
   background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-active);
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-active);
   border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-active);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-active);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:hover {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:hover {
   background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-hovered);
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-hovered);
   border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-hovered);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:hover .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:hover .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-hovered);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:active {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:active {
   background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-pressed);
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-pressed);
   border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-pressed);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:active .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:active .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-pressed);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:focus-visible {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:focus-visible {
   background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-focused);
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-focused);
   border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-focused);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:focus-visible .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:focus-visible .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-focused);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:disabled {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:disabled {
   background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-disabled);
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-disabled);
   border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-disabled);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:disabled .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:disabled .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-disabled);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button {
   background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-default);
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-default);
   border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-default);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-default);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
   background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-active);
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-active);
   border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-active);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-active);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:hover {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:hover {
   background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-hovered);
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-hovered);
   border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-hovered);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:hover .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:hover .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-hovered);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:active {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:active {
   background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-pressed);
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-pressed);
   border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-pressed);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:active .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:active .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-pressed);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:focus-visible {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:focus-visible {
   background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-focused);
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-focused);
   border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-focused);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:focus-visible .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:focus-visible .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-focused);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:disabled {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:disabled {
   background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-disabled);
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-disabled);
   border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-disabled);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:disabled .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:disabled .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-disabled);
 }
-.ids-segmented-control-toggle .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle .ids-segmented-control-toggle-item > button:focus-visible {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-light .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-light .ids-segmented-control-toggle-item > button:focus-visible {
   outline-color: var(--ids-comp-segmented-control-toggle-focused-outline-color-light-focused);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button {
   background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-default);
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-default);
   border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-default);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-default);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
   background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-active);
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-active);
   border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-active);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-active);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:hover {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:hover {
   background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-hovered);
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-hovered);
   border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-hovered);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:hover .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:hover .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-hovered);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:active {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:active {
   background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-pressed);
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-pressed);
   border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-pressed);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:active .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:active .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-pressed);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:focus-visible {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:focus-visible {
   background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-focused);
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-focused);
   border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-focused);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:focus-visible .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:focus-visible .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-focused);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:disabled {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:disabled {
   background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-disabled);
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-disabled);
   border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-disabled);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:disabled .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:disabled .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-disabled);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button {
   background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-default);
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-default);
   border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-default);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-default);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
   background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-active);
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-active);
   border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-active);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-active);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:hover {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:hover {
   background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-hovered);
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-hovered);
   border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-hovered);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:hover .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:hover .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-hovered);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:active {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:active {
   background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-pressed);
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-pressed);
   border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-pressed);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:active .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:active .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-pressed);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:focus-visible {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:focus-visible {
   background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-focused);
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-focused);
   border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-focused);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:focus-visible .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:focus-visible .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-focused);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:disabled {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:disabled {
   background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-disabled);
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-disabled);
   border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-disabled);
 }
-.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:disabled .ids-icon {
+.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:disabled .ids-icon {
   color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-disabled);
 }