@i-cell/ids-styles 0.0.18-beta.0 → 0.0.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/accordion/accordion.css +7 -20
  2. package/dist/accordion/accordion.min.css +1 -1
  3. package/dist/accordion/accordion.plugin.js +4 -21
  4. package/dist/avatar/avatar.css +0 -3
  5. package/dist/avatar/avatar.min.css +1 -1
  6. package/dist/avatar/avatar.plugin.js +0 -1
  7. package/dist/chip/chip.css +696 -0
  8. package/dist/chip/chip.min.css +1 -0
  9. package/dist/chip/chip.plugin.js +675 -0
  10. package/dist/components.css +1508 -820
  11. package/dist/components.min.css +1 -1
  12. package/dist/components.plugin.js +2026 -1376
  13. package/dist/switch/switch.css +7 -0
  14. package/dist/switch/switch.min.css +1 -1
  15. package/dist/switch/switch.plugin.js +3 -1
  16. package/package.json +1 -1
package/dist/components.css CHANGED
@@ -3,6 +3,7 @@
3
3
  width: 100%;
4
4
  flex-direction: column;
5
5
  align-items: flex-start;
6
+ border-style: solid;
6
7
  }
7
8
  .ids-accordion > .ids-accordion-controls {
8
9
  display: flex;
@@ -21,6 +22,12 @@
21
22
  align-items: center;
22
23
  width: 100%;
23
24
  flex: 1 0 0;
25
+ border-style: solid;
26
+ }
27
+ .ids-accordion > .ids-accordion-item > .ids-accordion-item-summary:focus, .ids-accordion > .ids-accordion-item > .ids-accordion-item-summary:focus-visible {
28
+ outline-offset: 2px;
29
+ outline-style: solid;
30
+ z-index: 1;
24
31
  }
25
32
  .ids-accordion > .ids-accordion-item > .ids-accordion-item-summary > .ids-accordion-item-title {
26
33
  flex: 1 0 0;
@@ -43,7 +50,6 @@
43
50
  gap: var(--ids-comp-accordion-container-size-gap-compact);
44
51
  border-radius: var(--ids-comp-accordion-container-size-border-radius-compact);
45
52
  border-width: var(--ids-comp-accordion-container-size-border-width-compact);
46
- border-style: solid;
47
53
  }
48
54
  .ids-accordion.ids-accordion-compact > .ids-accordion-controls {
49
55
  padding: var(--ids-comp-accordion-controls-size-padding-y-compact) var(--ids-comp-accordion-controls-size-padding-x-compact);
@@ -59,14 +65,10 @@
59
65
  gap: var(--ids-comp-accordion-summary-size-gap-compact);
60
66
  border-radius: var(--ids-comp-accordion-summary-size-border-radius-compact);
61
67
  border-width: var(--ids-comp-accordion-summary-size-border-width-compact);
62
- border-style: solid;
63
68
  }
64
69
  .ids-accordion.ids-accordion-compact > .ids-accordion-item > .ids-accordion-item-summary:focus, .ids-accordion.ids-accordion-compact > .ids-accordion-item > .ids-accordion-item-summary:focus-visible {
65
- outline-offset: 2px;
66
70
  outline-width: var(--ids-comp-accordion-summary-focused-outline-size-outline-compact);
67
- outline-style: solid;
68
71
  outline-color: var(--ids-comp-accordion-summary-focused-outline-color-dark-focused);
69
- z-index: 1;
70
72
  }
71
73
  .ids-accordion.ids-accordion-compact > .ids-accordion-item > .ids-accordion-item-summary > .ids-accordion-item-title {
72
74
  font-family: var(--ids-comp-accordion-summary-typography-font-family-compact);
@@ -91,7 +93,6 @@
91
93
  gap: var(--ids-comp-accordion-container-size-gap-comfortable);
92
94
  border-radius: var(--ids-comp-accordion-container-size-border-radius-comfortable);
93
95
  border-width: var(--ids-comp-accordion-container-size-border-width-comfortable);
94
- border-style: solid;
95
96
  }
96
97
  .ids-accordion.ids-accordion-comfortable > .ids-accordion-controls {
97
98
  padding: var(--ids-comp-accordion-controls-size-padding-y-comfortable) var(--ids-comp-accordion-controls-size-padding-x-comfortable);
@@ -107,14 +108,10 @@
107
108
  gap: var(--ids-comp-accordion-summary-size-gap-comfortable);
108
109
  border-radius: var(--ids-comp-accordion-summary-size-border-radius-comfortable);
109
110
  border-width: var(--ids-comp-accordion-summary-size-border-width-comfortable);
110
- border-style: solid;
111
111
  }
112
112
  .ids-accordion.ids-accordion-comfortable > .ids-accordion-item > .ids-accordion-item-summary:focus, .ids-accordion.ids-accordion-comfortable > .ids-accordion-item > .ids-accordion-item-summary:focus-visible {
113
- outline-offset: 2px;
114
113
  outline-width: var(--ids-comp-accordion-summary-focused-outline-size-outline-comfortable);
115
- outline-style: solid;
116
114
  outline-color: var(--ids-comp-accordion-summary-focused-outline-color-dark-focused);
117
- z-index: 1;
118
115
  }
119
116
  .ids-accordion.ids-accordion-comfortable > .ids-accordion-item > .ids-accordion-item-summary > .ids-accordion-item-title {
120
117
  font-family: var(--ids-comp-accordion-summary-typography-font-family-comfortable);
@@ -139,7 +136,6 @@
139
136
  gap: var(--ids-comp-accordion-container-size-gap-spacious);
140
137
  border-radius: var(--ids-comp-accordion-container-size-border-radius-spacious);
141
138
  border-width: var(--ids-comp-accordion-container-size-border-width-spacious);
142
- border-style: solid;
143
139
  }
144
140
  .ids-accordion.ids-accordion-spacious > .ids-accordion-controls {
145
141
  padding: var(--ids-comp-accordion-controls-size-padding-y-spacious) var(--ids-comp-accordion-controls-size-padding-x-spacious);
@@ -155,14 +151,10 @@
155
151
  gap: var(--ids-comp-accordion-summary-size-gap-spacious);
156
152
  border-radius: var(--ids-comp-accordion-summary-size-border-radius-spacious);
157
153
  border-width: var(--ids-comp-accordion-summary-size-border-width-spacious);
158
- border-style: solid;
159
154
  }
160
155
  .ids-accordion.ids-accordion-spacious > .ids-accordion-item > .ids-accordion-item-summary:focus, .ids-accordion.ids-accordion-spacious > .ids-accordion-item > .ids-accordion-item-summary:focus-visible {
161
- outline-offset: 2px;
162
156
  outline-width: var(--ids-comp-accordion-summary-focused-outline-size-outline-spacious);
163
- outline-style: solid;
164
157
  outline-color: var(--ids-comp-accordion-summary-focused-outline-color-dark-focused);
165
- z-index: 1;
166
158
  }
167
159
  .ids-accordion.ids-accordion-spacious > .ids-accordion-item > .ids-accordion-item-summary > .ids-accordion-item-title {
168
160
  font-family: var(--ids-comp-accordion-summary-typography-font-family-spacious);
@@ -187,7 +179,6 @@
187
179
  gap: var(--ids-comp-accordion-container-size-gap-dense);
188
180
  border-radius: var(--ids-comp-accordion-container-size-border-radius-dense);
189
181
  border-width: var(--ids-comp-accordion-container-size-border-width-dense);
190
- border-style: solid;
191
182
  }
192
183
  .ids-accordion.ids-accordion-dense > .ids-accordion-controls {
193
184
  padding: var(--ids-comp-accordion-controls-size-padding-y-dense) var(--ids-comp-accordion-controls-size-padding-x-dense);
@@ -203,14 +194,10 @@
203
194
  gap: var(--ids-comp-accordion-summary-size-gap-dense);
204
195
  border-radius: var(--ids-comp-accordion-summary-size-border-radius-dense);
205
196
  border-width: var(--ids-comp-accordion-summary-size-border-width-dense);
206
- border-style: solid;
207
197
  }
208
198
  .ids-accordion.ids-accordion-dense > .ids-accordion-item > .ids-accordion-item-summary:focus, .ids-accordion.ids-accordion-dense > .ids-accordion-item > .ids-accordion-item-summary:focus-visible {
209
- outline-offset: 2px;
210
199
  outline-width: var(--ids-comp-accordion-summary-focused-outline-size-outline-dense);
211
- outline-style: solid;
212
200
  outline-color: var(--ids-comp-accordion-summary-focused-outline-color-dark-focused);
213
- z-index: 1;
214
201
  }
215
202
  .ids-accordion.ids-accordion-dense > .ids-accordion-item > .ids-accordion-item-summary > .ids-accordion-item-title {
216
203
  font-family: var(--ids-comp-accordion-summary-typography-font-family-dense);
@@ -336,9 +323,6 @@
336
323
  .ids-avatar.ids-avatar-type-icon {
337
324
  flex-shrink: 0;
338
325
  }
339
- .ids-avatar.ids-avatar-type-icon > .ids-icon {
340
- color: inherit;
341
- }
342
326
  .ids-avatar.ids-avatar-type-image > img {
343
327
  width: 100%;
344
328
  height: 100%;
@@ -1805,164 +1789,994 @@
1805
1789
  color: var(--ids-comp-button-text-color-fg-icon-surface-disabled);
1806
1790
  }
1807
1791
 
1808
- .ids-checkbox-group {
1792
+ .ids-card {
1809
1793
  display: flex;
1810
- flex-direction: column;
1811
- justify-content: center;
1812
- align-items: flex-start;
1794
+ border-style: solid;
1795
+ box-sizing: border-box;
1813
1796
  }
1814
- .ids-checkbox-group > .ids-checkbox-group__label {
1815
- font-style: normal;
1797
+ .ids-card.ids-card-clickable {
1798
+ pointer-events: auto;
1799
+ cursor: pointer;
1816
1800
  }
1817
- .ids-checkbox-group > .ids-checkbox-group__list {
1818
- display: flex;
1801
+ .ids-card.ids-card-clickable:focus, .ids-card.ids-card-clickable:focus-visible {
1802
+ outline-offset: 2px;
1803
+ outline-style: solid;
1819
1804
  }
1820
- .ids-checkbox-group.ids-checkbox-group-horizontal > .ids-checkbox-group__list {
1821
- flex-direction: row;
1822
- align-items: center;
1805
+ .ids-card.ids-card-clickable.ids-card-disabled {
1806
+ pointer-events: none;
1807
+ cursor: not-allowed;
1823
1808
  }
1824
- .ids-checkbox-group.ids-checkbox-group-vertical > .ids-checkbox-group__list {
1809
+ .ids-card.ids-card-vertical {
1825
1810
  flex-direction: column;
1826
- align-items: flex-start;
1827
1811
  }
1828
- .ids-checkbox-group.ids-checkbox-group-compact {
1829
- padding: var(--ids-comp-checkbox-group-vertical-container-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-compact);
1830
- gap: var(--ids-comp-checkbox-group-vertical-container-size-gap-compact);
1812
+ .ids-card.ids-card-vertical .ids-card-section:first-child {
1813
+ padding-bottom: 0px;
1814
+ border-top-left-radius: inherit;
1815
+ border-top-right-radius: inherit;
1831
1816
  }
1832
- .ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__label {
1833
- font-family: var(--ids-comp-checkbox-group-label-typography-font-family-compact);
1834
- font-size: var(--ids-comp-checkbox-group-label-typography-font-size-compact);
1835
- font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-compact);
1836
- line-height: var(--ids-comp-checkbox-group-label-typography-line-height-compact);
1837
- letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-compact);
1817
+ .ids-card.ids-card-vertical .ids-card-section:last-child {
1818
+ padding-top: 0px;
1819
+ border-bottom-left-radius: inherit;
1820
+ border-bottom-right-radius: inherit;
1838
1821
  }
1839
- .ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__list {
1840
- padding: var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-compact);
1841
- gap: var(--ids-comp-checkbox-group-horizontal-list-size-gap-compact);
1822
+ .ids-card.ids-card-vertical .ids-card-section.ids-card-section-stretched {
1823
+ padding-left: 0px;
1824
+ padding-right: 0px;
1825
+ width: 100%;
1842
1826
  }
1843
- .ids-checkbox-group.ids-checkbox-group-comfortable {
1844
- padding: var(--ids-comp-checkbox-group-vertical-container-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-comfortable);
1845
- gap: var(--ids-comp-checkbox-group-vertical-container-size-gap-comfortable);
1827
+ .ids-card.ids-card-vertical .ids-card-section .ids-card-header-headline {
1828
+ display: flex;
1829
+ flex-direction: column;
1846
1830
  }
1847
- .ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__label {
1848
- font-family: var(--ids-comp-checkbox-group-label-typography-font-family-comfortable);
1849
- font-size: var(--ids-comp-checkbox-group-label-typography-font-size-comfortable);
1850
- font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-comfortable);
1851
- line-height: var(--ids-comp-checkbox-group-label-typography-line-height-comfortable);
1852
- letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-comfortable);
1831
+ .ids-card.ids-card-horizontal .ids-card-section:first-child {
1832
+ padding-right: 0px;
1833
+ border-top-left-radius: inherit;
1834
+ border-bottom-left-radius: inherit;
1853
1835
  }
1854
- .ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__list {
1855
- padding: var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-comfortable);
1856
- gap: var(--ids-comp-checkbox-group-horizontal-list-size-gap-comfortable);
1836
+ .ids-card.ids-card-horizontal .ids-card-section:last-child {
1837
+ padding-left: 0px;
1838
+ border-top-right-radius: inherit;
1839
+ border-bottom-right-radius: inherit;
1857
1840
  }
1858
- .ids-checkbox-group.ids-checkbox-group-spacious {
1859
- padding: var(--ids-comp-checkbox-group-vertical-container-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-spacious);
1860
- gap: var(--ids-comp-checkbox-group-vertical-container-size-gap-spacious);
1841
+ .ids-card.ids-card-horizontal .ids-card-section.ids-card-section-stretched {
1842
+ padding-top: 0px;
1843
+ padding-bottom: 0px;
1844
+ height: 100%;
1861
1845
  }
1862
- .ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__label {
1863
- font-family: var(--ids-comp-checkbox-group-label-typography-font-family-spacious);
1864
- font-size: var(--ids-comp-checkbox-group-label-typography-font-size-spacious);
1865
- font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-spacious);
1866
- line-height: var(--ids-comp-checkbox-group-label-typography-line-height-spacious);
1867
- letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-spacious);
1846
+ .ids-card.ids-card-horizontal .ids-card-section.ids-card-header, .ids-card.ids-card-horizontal .ids-card-section.ids-card-footer {
1847
+ display: none;
1868
1848
  }
1869
- .ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__list {
1870
- padding: var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-spacious);
1871
- gap: var(--ids-comp-checkbox-group-horizontal-list-size-gap-spacious);
1849
+ .ids-card .ids-card-title {
1850
+ color: var(--ids-smc-reference-container-color-fg-surface-darker-95);
1851
+ font-size: 24px;
1852
+ font-style: normal;
1853
+ font-weight: 600;
1854
+ line-height: 32px;
1872
1855
  }
1873
- .ids-checkbox-group.ids-checkbox-group-dense {
1874
- padding: var(--ids-comp-checkbox-group-vertical-container-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-dense);
1875
- gap: var(--ids-comp-checkbox-group-vertical-container-size-gap-dense);
1856
+ .ids-card .ids-card-subtitle {
1857
+ color: var(--ids-smc-reference-container-color-fg-surface-darker-70);
1858
+ font-size: 16px;
1859
+ font-style: normal;
1860
+ font-weight: 500;
1861
+ line-height: 24px;
1862
+ letter-spacing: 0.15px;
1876
1863
  }
1877
- .ids-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__label {
1878
- font-family: var(--ids-comp-checkbox-group-label-typography-font-family-dense);
1879
- font-size: var(--ids-comp-checkbox-group-label-typography-font-size-dense);
1880
- font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-dense);
1881
- line-height: var(--ids-comp-checkbox-group-label-typography-line-height-dense);
1882
- letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-dense);
1864
+ .ids-card.ids-card-elevated {
1865
+ box-shadow: var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-sm) var(--ids-smc-reference-container-effects-shadow-blur-md) var(--ids-smc-reference-container-effects-shadow-spread-xxl) var(--ids-smc-reference-container-effects-shadow-color-dark-light), var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xs) var(--ids-smc-reference-container-effects-shadow-blur-sm) var(--ids-smc-reference-container-effects-shadow-spread-xl) var(--ids-smc-reference-container-effects-shadow-color-dark-light);
1883
1866
  }
1884
- .ids-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__list {
1885
- padding: var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-dense);
1886
- gap: var(--ids-comp-checkbox-group-horizontal-list-size-gap-dense);
1867
+ .ids-card.ids-card-compact.ids-card-horizontal {
1868
+ padding: var(--ids-comp-card-container-horizontal-size-padding-y-compact) var(--ids-comp-card-container-horizontal-size-padding-x-compact);
1869
+ gap: var(--ids-comp-card-container-horizontal-size-gap-compact);
1870
+ border-radius: var(--ids-comp-card-container-horizontal-size-border-radius-compact);
1887
1871
  }
1888
- .ids-checkbox-group.ids-checkbox-group-light > .ids-checkbox-group__label {
1889
- color: var(--ids-comp-checkbox-label-color-fg-light-default);
1872
+ .ids-card.ids-card-compact.ids-card-horizontal.ids-card-outlined {
1873
+ border-width: var(--ids-comp-card-container-horizontal-size-border-width-compact);
1890
1874
  }
1891
- .ids-checkbox-group.ids-checkbox-group-dark > .ids-checkbox-group__label {
1892
- color: var(--ids-comp-checkbox-label-color-fg-dark-default);
1875
+ .ids-card.ids-card-compact.ids-card-vertical {
1876
+ padding: var(--ids-comp-card-container-vertical-size-padding-y-compact) var(--ids-comp-card-container-vertical-size-padding-x-compact);
1877
+ gap: var(--ids-comp-card-container-vertical-size-gap-compact);
1878
+ border-radius: var(--ids-comp-card-container-vertical-size-border-radius-compact);
1893
1879
  }
1894
- .ids-checkbox-group.ids-checkbox-group-surface > .ids-checkbox-group__label {
1895
- color: var(--ids-comp-checkbox-label-color-fg-surface-default);
1880
+ .ids-card.ids-card-compact.ids-card-vertical.ids-card-outlined {
1881
+ border-width: var(--ids-comp-card-container-vertical-size-border-width-compact);
1896
1882
  }
1897
-
1898
- .ids-checkbox {
1899
- display: inline-flex;
1900
- align-self: stretch;
1901
- align-items: flex-start;
1883
+ .ids-card.ids-card-compact.ids-card-clickable:focus {
1884
+ outline-width: var(--ids-comp-card-focused-outline-outline-compact);
1902
1885
  }
1903
- .ids-checkbox .ids-checkbox__input-wrapper {
1904
- position: relative;
1905
- display: flex;
1906
- align-items: center;
1907
- justify-content: center;
1886
+ .ids-card.ids-card-compact .ids-card-header-headline {
1887
+ gap: var(--ids-comp-card-header-headline-gap-compact);
1888
+ padding: var(--ids-comp-card-header-headline-padding-y-compact) var(--ids-comp-card-header-headline-padding-x-compact);
1908
1889
  }
1909
- .ids-checkbox .ids-checkbox__input-wrapper .ids-checkbox__touch-target {
1910
- position: absolute;
1911
- z-index: 1;
1890
+ .ids-card.ids-card-compact.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child {
1891
+ padding-top: var(--ids-comp-card-slot-size-padding-top-compact);
1912
1892
  }
1913
- .ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox] {
1914
- appearance: none;
1915
- -webkit-appearance: none;
1916
- flex-shrink: 0;
1917
- border-style: solid;
1918
- margin: 0;
1893
+ .ids-card.ids-card-compact.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child {
1894
+ padding-bottom: var(--ids-comp-card-slot-size-padding-bottom-compact);
1919
1895
  }
1920
- .ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox]:focus, .ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox]:focus-visible {
1921
- outline-offset: 2px;
1922
- outline-style: solid;
1896
+ .ids-card.ids-card-compact.ids-card-vertical .ids-card-section.ids-card-section-padded {
1897
+ padding-left: var(--ids-comp-card-slot-size-padding-x-compact);
1898
+ padding-right: var(--ids-comp-card-slot-size-padding-x-compact);
1923
1899
  }
1924
- .ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox] + .ids-checkbox__icon {
1925
- position: absolute;
1900
+ .ids-card.ids-card-compact.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child {
1901
+ padding-left: var(--ids-comp-card-slot-size-padding-top-compact);
1926
1902
  }
1927
- .ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox] + .ids-checkbox__icon > .ids-icon {
1928
- color: inherit;
1903
+ .ids-card.ids-card-compact.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child {
1904
+ padding-right: var(--ids-comp-card-slot-size-padding-bottom-compact);
1929
1905
  }
1930
- .ids-checkbox .ids-checkbox__label-wrapper {
1931
- display: flex;
1932
- flex-direction: column;
1933
- align-items: flex-start;
1934
- flex: 1 0 0;
1906
+ .ids-card.ids-card-compact.ids-card-horizontal .ids-card-section.ids-card-section-padded {
1907
+ padding-top: var(--ids-comp-card-slot-size-padding-x-compact);
1908
+ padding-bottom: var(--ids-comp-card-slot-size-padding-x-compact);
1935
1909
  }
1936
- .ids-checkbox .ids-checkbox__label-wrapper .ids-checkbox__label-container {
1937
- text-align: start;
1910
+ .ids-card.ids-card-comfortable.ids-card-horizontal {
1911
+ padding: var(--ids-comp-card-container-horizontal-size-padding-y-comfortable) var(--ids-comp-card-container-horizontal-size-padding-x-comfortable);
1912
+ gap: var(--ids-comp-card-container-horizontal-size-gap-comfortable);
1913
+ border-radius: var(--ids-comp-card-container-horizontal-size-border-radius-comfortable);
1938
1914
  }
1939
- .ids-checkbox .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
1940
- font-style: normal;
1915
+ .ids-card.ids-card-comfortable.ids-card-horizontal.ids-card-outlined {
1916
+ border-width: var(--ids-comp-card-container-horizontal-size-border-width-comfortable);
1941
1917
  }
1942
- .ids-checkbox .ids-checkbox__label-wrapper .ids-checkbox__message-container {
1943
- width: 100%;
1918
+ .ids-card.ids-card-comfortable.ids-card-vertical {
1919
+ padding: var(--ids-comp-card-container-vertical-size-padding-y-comfortable) var(--ids-comp-card-container-vertical-size-padding-x-comfortable);
1920
+ gap: var(--ids-comp-card-container-vertical-size-gap-comfortable);
1921
+ border-radius: var(--ids-comp-card-container-vertical-size-border-radius-comfortable);
1944
1922
  }
1945
- .ids-checkbox.ids-checkbox-compact {
1946
- padding: var(--ids-comp-checkbox-container-size-padding-y-compact) var(--ids-comp-checkbox-container-size-padding-x-compact);
1947
- gap: var(--ids-comp-checkbox-container-size-gap-compact);
1923
+ .ids-card.ids-card-comfortable.ids-card-vertical.ids-card-outlined {
1924
+ border-width: var(--ids-comp-card-container-vertical-size-border-width-comfortable);
1948
1925
  }
1949
- .ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper .ids-checkbox__touch-target {
1950
- top: calc((var(--ids-comp-checkbox-input-size-height-compact) - var(--ids-comp-checkbox-input-size-touchtarget-height-compact)) / 2);
1951
- left: calc((var(--ids-comp-checkbox-input-size-width-compact) - var(--ids-comp-checkbox-input-size-touchtarget-width-compact)) / 2);
1952
- height: var(--ids-comp-checkbox-input-size-touchtarget-height-compact);
1953
- width: var(--ids-comp-checkbox-input-size-touchtarget-width-compact);
1926
+ .ids-card.ids-card-comfortable.ids-card-clickable:focus {
1927
+ outline-width: var(--ids-comp-card-focused-outline-outline-comfortable);
1954
1928
  }
1955
- .ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper input[type=checkbox] {
1956
- width: var(--ids-comp-checkbox-input-size-width-compact);
1957
- height: var(--ids-comp-checkbox-input-size-height-compact);
1958
- border-radius: var(--ids-comp-checkbox-input-size-border-radius-compact);
1959
- border-width: var(--ids-comp-checkbox-input-size-border-width-compact);
1929
+ .ids-card.ids-card-comfortable .ids-card-header-headline {
1930
+ gap: var(--ids-comp-card-header-headline-gap-comfortable);
1931
+ padding: var(--ids-comp-card-header-headline-padding-y-comfortable) var(--ids-comp-card-header-headline-padding-x-comfortable);
1960
1932
  }
1961
- .ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper input[type=checkbox]:focus, .ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper input[type=checkbox]:focus-visible {
1962
- outline-width: var(--ids-comp-checkbox-focused-outline-outline-compact);
1933
+ .ids-card.ids-card-comfortable.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child {
1934
+ padding-top: var(--ids-comp-card-slot-size-padding-top-comfortable);
1963
1935
  }
1964
- .ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper .ids-checkbox__icon {
1965
- height: var(--ids-comp-checkbox-input-size-icon-compact);
1936
+ .ids-card.ids-card-comfortable.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child {
1937
+ padding-bottom: var(--ids-comp-card-slot-size-padding-bottom-comfortable);
1938
+ }
1939
+ .ids-card.ids-card-comfortable.ids-card-vertical .ids-card-section.ids-card-section-padded {
1940
+ padding-left: var(--ids-comp-card-slot-size-padding-x-comfortable);
1941
+ padding-right: var(--ids-comp-card-slot-size-padding-x-comfortable);
1942
+ }
1943
+ .ids-card.ids-card-comfortable.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child {
1944
+ padding-left: var(--ids-comp-card-slot-size-padding-top-comfortable);
1945
+ }
1946
+ .ids-card.ids-card-comfortable.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child {
1947
+ padding-right: var(--ids-comp-card-slot-size-padding-bottom-comfortable);
1948
+ }
1949
+ .ids-card.ids-card-comfortable.ids-card-horizontal .ids-card-section.ids-card-section-padded {
1950
+ padding-top: var(--ids-comp-card-slot-size-padding-x-comfortable);
1951
+ padding-bottom: var(--ids-comp-card-slot-size-padding-x-comfortable);
1952
+ }
1953
+ .ids-card.ids-card-spacious.ids-card-horizontal {
1954
+ padding: var(--ids-comp-card-container-horizontal-size-padding-y-spacious) var(--ids-comp-card-container-horizontal-size-padding-x-spacious);
1955
+ gap: var(--ids-comp-card-container-horizontal-size-gap-spacious);
1956
+ border-radius: var(--ids-comp-card-container-horizontal-size-border-radius-spacious);
1957
+ }
1958
+ .ids-card.ids-card-spacious.ids-card-horizontal.ids-card-outlined {
1959
+ border-width: var(--ids-comp-card-container-horizontal-size-border-width-spacious);
1960
+ }
1961
+ .ids-card.ids-card-spacious.ids-card-vertical {
1962
+ padding: var(--ids-comp-card-container-vertical-size-padding-y-spacious) var(--ids-comp-card-container-vertical-size-padding-x-spacious);
1963
+ gap: var(--ids-comp-card-container-vertical-size-gap-spacious);
1964
+ border-radius: var(--ids-comp-card-container-vertical-size-border-radius-spacious);
1965
+ }
1966
+ .ids-card.ids-card-spacious.ids-card-vertical.ids-card-outlined {
1967
+ border-width: var(--ids-comp-card-container-vertical-size-border-width-spacious);
1968
+ }
1969
+ .ids-card.ids-card-spacious.ids-card-clickable:focus {
1970
+ outline-width: var(--ids-comp-card-focused-outline-outline-spacious);
1971
+ }
1972
+ .ids-card.ids-card-spacious .ids-card-header-headline {
1973
+ gap: var(--ids-comp-card-header-headline-gap-spacious);
1974
+ padding: var(--ids-comp-card-header-headline-padding-y-spacious) var(--ids-comp-card-header-headline-padding-x-spacious);
1975
+ }
1976
+ .ids-card.ids-card-spacious.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child {
1977
+ padding-top: var(--ids-comp-card-slot-size-padding-top-spacious);
1978
+ }
1979
+ .ids-card.ids-card-spacious.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child {
1980
+ padding-bottom: var(--ids-comp-card-slot-size-padding-bottom-spacious);
1981
+ }
1982
+ .ids-card.ids-card-spacious.ids-card-vertical .ids-card-section.ids-card-section-padded {
1983
+ padding-left: var(--ids-comp-card-slot-size-padding-x-spacious);
1984
+ padding-right: var(--ids-comp-card-slot-size-padding-x-spacious);
1985
+ }
1986
+ .ids-card.ids-card-spacious.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child {
1987
+ padding-left: var(--ids-comp-card-slot-size-padding-top-spacious);
1988
+ }
1989
+ .ids-card.ids-card-spacious.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child {
1990
+ padding-right: var(--ids-comp-card-slot-size-padding-bottom-spacious);
1991
+ }
1992
+ .ids-card.ids-card-spacious.ids-card-horizontal .ids-card-section.ids-card-section-padded {
1993
+ padding-top: var(--ids-comp-card-slot-size-padding-x-spacious);
1994
+ padding-bottom: var(--ids-comp-card-slot-size-padding-x-spacious);
1995
+ }
1996
+ .ids-card.ids-card-dense.ids-card-horizontal {
1997
+ padding: var(--ids-comp-card-container-horizontal-size-padding-y-dense) var(--ids-comp-card-container-horizontal-size-padding-x-dense);
1998
+ gap: var(--ids-comp-card-container-horizontal-size-gap-dense);
1999
+ border-radius: var(--ids-comp-card-container-horizontal-size-border-radius-dense);
2000
+ }
2001
+ .ids-card.ids-card-dense.ids-card-horizontal.ids-card-outlined {
2002
+ border-width: var(--ids-comp-card-container-horizontal-size-border-width-dense);
2003
+ }
2004
+ .ids-card.ids-card-dense.ids-card-vertical {
2005
+ padding: var(--ids-comp-card-container-vertical-size-padding-y-dense) var(--ids-comp-card-container-vertical-size-padding-x-dense);
2006
+ gap: var(--ids-comp-card-container-vertical-size-gap-dense);
2007
+ border-radius: var(--ids-comp-card-container-vertical-size-border-radius-dense);
2008
+ }
2009
+ .ids-card.ids-card-dense.ids-card-vertical.ids-card-outlined {
2010
+ border-width: var(--ids-comp-card-container-vertical-size-border-width-dense);
2011
+ }
2012
+ .ids-card.ids-card-dense.ids-card-clickable:focus {
2013
+ outline-width: var(--ids-comp-card-focused-outline-outline-dense);
2014
+ }
2015
+ .ids-card.ids-card-dense .ids-card-header-headline {
2016
+ gap: var(--ids-comp-card-header-headline-gap-dense);
2017
+ padding: var(--ids-comp-card-header-headline-padding-y-dense) var(--ids-comp-card-header-headline-padding-x-dense);
2018
+ }
2019
+ .ids-card.ids-card-dense.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child {
2020
+ padding-top: var(--ids-comp-card-slot-size-padding-top-dense);
2021
+ }
2022
+ .ids-card.ids-card-dense.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child {
2023
+ padding-bottom: var(--ids-comp-card-slot-size-padding-bottom-dense);
2024
+ }
2025
+ .ids-card.ids-card-dense.ids-card-vertical .ids-card-section.ids-card-section-padded {
2026
+ padding-left: var(--ids-comp-card-slot-size-padding-x-dense);
2027
+ padding-right: var(--ids-comp-card-slot-size-padding-x-dense);
2028
+ }
2029
+ .ids-card.ids-card-dense.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child {
2030
+ padding-left: var(--ids-comp-card-slot-size-padding-top-dense);
2031
+ }
2032
+ .ids-card.ids-card-dense.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child {
2033
+ padding-right: var(--ids-comp-card-slot-size-padding-bottom-dense);
2034
+ }
2035
+ .ids-card.ids-card-dense.ids-card-horizontal .ids-card-section.ids-card-section-padded {
2036
+ padding-top: var(--ids-comp-card-slot-size-padding-x-dense);
2037
+ padding-bottom: var(--ids-comp-card-slot-size-padding-x-dense);
2038
+ }
2039
+ .ids-card.ids-card-filled.ids-card-primary {
2040
+ background-color: var(--ids-comp-card-filled-color-bg-primary-default);
2041
+ border-color: var(--ids-comp-card-filled-color-border-primary-default);
2042
+ }
2043
+ .ids-card.ids-card-filled.ids-card-primary.ids-card-clickable:hover {
2044
+ background-color: var(--ids-comp-card-filled-color-bg-primary-hovered);
2045
+ border-color: var(--ids-comp-card-filled-color-border-primary-hovered);
2046
+ }
2047
+ .ids-card.ids-card-filled.ids-card-primary.ids-card-clickable:focus, .ids-card.ids-card-filled.ids-card-primary.ids-card-clickable:focus-visible {
2048
+ background-color: var(--ids-comp-card-filled-color-bg-primary-focused);
2049
+ border-color: var(--ids-comp-card-filled-color-border-primary-focused);
2050
+ outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
2051
+ }
2052
+ .ids-card.ids-card-filled.ids-card-primary.ids-card-clickable:active {
2053
+ background-color: var(--ids-comp-card-filled-color-bg-primary-pressed);
2054
+ border-color: var(--ids-comp-card-filled-color-border-primary-pressed);
2055
+ }
2056
+ .ids-card.ids-card-filled.ids-card-primary.ids-card-clickable.ids-card-disabled {
2057
+ background-color: var(--ids-comp-card-filled-color-bg-primary-disabled);
2058
+ border-color: var(--ids-comp-card-filled-color-border-primary-disabled);
2059
+ }
2060
+ .ids-card.ids-card-filled.ids-card-secondary {
2061
+ background-color: var(--ids-comp-card-filled-color-bg-secondary-default);
2062
+ border-color: var(--ids-comp-card-filled-color-border-secondary-default);
2063
+ }
2064
+ .ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable:hover {
2065
+ background-color: var(--ids-comp-card-filled-color-bg-secondary-hovered);
2066
+ border-color: var(--ids-comp-card-filled-color-border-secondary-hovered);
2067
+ }
2068
+ .ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable:focus, .ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable:focus-visible {
2069
+ background-color: var(--ids-comp-card-filled-color-bg-secondary-focused);
2070
+ border-color: var(--ids-comp-card-filled-color-border-secondary-focused);
2071
+ outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
2072
+ }
2073
+ .ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable:active {
2074
+ background-color: var(--ids-comp-card-filled-color-bg-secondary-pressed);
2075
+ border-color: var(--ids-comp-card-filled-color-border-secondary-pressed);
2076
+ }
2077
+ .ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable.ids-card-disabled {
2078
+ background-color: var(--ids-comp-card-filled-color-bg-secondary-disabled);
2079
+ border-color: var(--ids-comp-card-filled-color-border-secondary-disabled);
2080
+ }
2081
+ .ids-card.ids-card-filled.ids-card-brand {
2082
+ background-color: var(--ids-comp-card-filled-color-bg-brand-default);
2083
+ border-color: var(--ids-comp-card-filled-color-border-brand-default);
2084
+ }
2085
+ .ids-card.ids-card-filled.ids-card-brand.ids-card-clickable:hover {
2086
+ background-color: var(--ids-comp-card-filled-color-bg-brand-hovered);
2087
+ border-color: var(--ids-comp-card-filled-color-border-brand-hovered);
2088
+ }
2089
+ .ids-card.ids-card-filled.ids-card-brand.ids-card-clickable:focus, .ids-card.ids-card-filled.ids-card-brand.ids-card-clickable:focus-visible {
2090
+ background-color: var(--ids-comp-card-filled-color-bg-brand-focused);
2091
+ border-color: var(--ids-comp-card-filled-color-border-brand-focused);
2092
+ outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
2093
+ }
2094
+ .ids-card.ids-card-filled.ids-card-brand.ids-card-clickable:active {
2095
+ background-color: var(--ids-comp-card-filled-color-bg-brand-pressed);
2096
+ border-color: var(--ids-comp-card-filled-color-border-brand-pressed);
2097
+ }
2098
+ .ids-card.ids-card-filled.ids-card-brand.ids-card-clickable.ids-card-disabled {
2099
+ background-color: var(--ids-comp-card-filled-color-bg-brand-disabled);
2100
+ border-color: var(--ids-comp-card-filled-color-border-brand-disabled);
2101
+ }
2102
+ .ids-card.ids-card-filled.ids-card-error {
2103
+ background-color: var(--ids-comp-card-filled-color-bg-error-default);
2104
+ border-color: var(--ids-comp-card-filled-color-border-error-default);
2105
+ }
2106
+ .ids-card.ids-card-filled.ids-card-error.ids-card-clickable:hover {
2107
+ background-color: var(--ids-comp-card-filled-color-bg-error-hovered);
2108
+ border-color: var(--ids-comp-card-filled-color-border-error-hovered);
2109
+ }
2110
+ .ids-card.ids-card-filled.ids-card-error.ids-card-clickable:focus, .ids-card.ids-card-filled.ids-card-error.ids-card-clickable:focus-visible {
2111
+ background-color: var(--ids-comp-card-filled-color-bg-error-focused);
2112
+ border-color: var(--ids-comp-card-filled-color-border-error-focused);
2113
+ outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
2114
+ }
2115
+ .ids-card.ids-card-filled.ids-card-error.ids-card-clickable:active {
2116
+ background-color: var(--ids-comp-card-filled-color-bg-error-pressed);
2117
+ border-color: var(--ids-comp-card-filled-color-border-error-pressed);
2118
+ }
2119
+ .ids-card.ids-card-filled.ids-card-success {
2120
+ background-color: var(--ids-comp-card-filled-color-bg-success-default);
2121
+ border-color: var(--ids-comp-card-filled-color-border-success-default);
2122
+ }
2123
+ .ids-card.ids-card-filled.ids-card-success.ids-card-clickable:hover {
2124
+ background-color: var(--ids-comp-card-filled-color-bg-success-hovered);
2125
+ border-color: var(--ids-comp-card-filled-color-border-success-hovered);
2126
+ }
2127
+ .ids-card.ids-card-filled.ids-card-success.ids-card-clickable:focus, .ids-card.ids-card-filled.ids-card-success.ids-card-clickable:focus-visible {
2128
+ background-color: var(--ids-comp-card-filled-color-bg-success-focused);
2129
+ border-color: var(--ids-comp-card-filled-color-border-success-focused);
2130
+ outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
2131
+ }
2132
+ .ids-card.ids-card-filled.ids-card-success.ids-card-clickable:active {
2133
+ background-color: var(--ids-comp-card-filled-color-bg-success-pressed);
2134
+ border-color: var(--ids-comp-card-filled-color-border-success-pressed);
2135
+ }
2136
+ .ids-card.ids-card-filled.ids-card-warning {
2137
+ background-color: var(--ids-comp-card-filled-color-bg-warning-default);
2138
+ border-color: var(--ids-comp-card-filled-color-border-warning-default);
2139
+ }
2140
+ .ids-card.ids-card-filled.ids-card-warning.ids-card-clickable:hover {
2141
+ background-color: var(--ids-comp-card-filled-color-bg-warning-hovered);
2142
+ border-color: var(--ids-comp-card-filled-color-border-warning-hovered);
2143
+ }
2144
+ .ids-card.ids-card-filled.ids-card-warning.ids-card-clickable:focus, .ids-card.ids-card-filled.ids-card-warning.ids-card-clickable:focus-visible {
2145
+ background-color: var(--ids-comp-card-filled-color-bg-warning-focused);
2146
+ border-color: var(--ids-comp-card-filled-color-border-warning-focused);
2147
+ outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
2148
+ }
2149
+ .ids-card.ids-card-filled.ids-card-warning.ids-card-clickable:active {
2150
+ background-color: var(--ids-comp-card-filled-color-bg-warning-pressed);
2151
+ border-color: var(--ids-comp-card-filled-color-border-warning-pressed);
2152
+ }
2153
+ .ids-card.ids-card-filled.ids-card-info {
2154
+ background-color: var(--ids-comp-card-filled-color-bg-info-default);
2155
+ border-color: var(--ids-comp-card-filled-color-border-info-default);
2156
+ }
2157
+ .ids-card.ids-card-filled.ids-card-info.ids-card-clickable:hover {
2158
+ background-color: var(--ids-comp-card-filled-color-bg-info-hovered);
2159
+ border-color: var(--ids-comp-card-filled-color-border-info-hovered);
2160
+ }
2161
+ .ids-card.ids-card-filled.ids-card-info.ids-card-clickable:focus, .ids-card.ids-card-filled.ids-card-info.ids-card-clickable:focus-visible {
2162
+ background-color: var(--ids-comp-card-filled-color-bg-info-focused);
2163
+ border-color: var(--ids-comp-card-filled-color-border-info-focused);
2164
+ outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
2165
+ }
2166
+ .ids-card.ids-card-filled.ids-card-info.ids-card-clickable:active {
2167
+ background-color: var(--ids-comp-card-filled-color-bg-info-pressed);
2168
+ border-color: var(--ids-comp-card-filled-color-border-info-pressed);
2169
+ }
2170
+ .ids-card.ids-card-filled.ids-card-light {
2171
+ background-color: var(--ids-comp-card-filled-color-bg-light-default);
2172
+ border-color: var(--ids-comp-card-filled-color-border-light-default);
2173
+ }
2174
+ .ids-card.ids-card-filled.ids-card-light.ids-card-clickable:hover {
2175
+ background-color: var(--ids-comp-card-filled-color-bg-light-hovered);
2176
+ border-color: var(--ids-comp-card-filled-color-border-light-hovered);
2177
+ }
2178
+ .ids-card.ids-card-filled.ids-card-light.ids-card-clickable:focus, .ids-card.ids-card-filled.ids-card-light.ids-card-clickable:focus-visible {
2179
+ background-color: var(--ids-comp-card-filled-color-bg-light-focused);
2180
+ border-color: var(--ids-comp-card-filled-color-border-light-focused);
2181
+ outline-color: var(--ids-comp-card-focused-outline-color-light-focused);
2182
+ }
2183
+ .ids-card.ids-card-filled.ids-card-light.ids-card-clickable:active {
2184
+ background-color: var(--ids-comp-card-filled-color-bg-light-pressed);
2185
+ border-color: var(--ids-comp-card-filled-color-border-light-pressed);
2186
+ }
2187
+ .ids-card.ids-card-filled.ids-card-light.ids-card-clickable.ids-card-disabled {
2188
+ background-color: var(--ids-comp-card-filled-color-bg-light-disabled);
2189
+ border-color: var(--ids-comp-card-filled-color-border-light-disabled);
2190
+ }
2191
+ .ids-card.ids-card-filled.ids-card-dark {
2192
+ background-color: var(--ids-comp-card-filled-color-bg-dark-default);
2193
+ border-color: var(--ids-comp-card-filled-color-border-dark-default);
2194
+ }
2195
+ .ids-card.ids-card-filled.ids-card-dark.ids-card-clickable:hover {
2196
+ background-color: var(--ids-comp-card-filled-color-bg-dark-hovered);
2197
+ border-color: var(--ids-comp-card-filled-color-border-dark-hovered);
2198
+ }
2199
+ .ids-card.ids-card-filled.ids-card-dark.ids-card-clickable:focus, .ids-card.ids-card-filled.ids-card-dark.ids-card-clickable:focus-visible {
2200
+ background-color: var(--ids-comp-card-filled-color-bg-dark-focused);
2201
+ border-color: var(--ids-comp-card-filled-color-border-dark-focused);
2202
+ outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
2203
+ }
2204
+ .ids-card.ids-card-filled.ids-card-dark.ids-card-clickable:active {
2205
+ background-color: var(--ids-comp-card-filled-color-bg-dark-pressed);
2206
+ border-color: var(--ids-comp-card-filled-color-border-dark-pressed);
2207
+ }
2208
+ .ids-card.ids-card-filled.ids-card-dark.ids-card-clickable.ids-card-disabled {
2209
+ background-color: var(--ids-comp-card-filled-color-bg-dark-disabled);
2210
+ border-color: var(--ids-comp-card-filled-color-border-dark-disabled);
2211
+ }
2212
+ .ids-card.ids-card-filled.ids-card-surface {
2213
+ background-color: var(--ids-comp-card-filled-color-bg-surface-default);
2214
+ border-color: var(--ids-comp-card-filled-color-border-surface-default);
2215
+ }
2216
+ .ids-card.ids-card-filled.ids-card-surface.ids-card-clickable:hover {
2217
+ background-color: var(--ids-comp-card-filled-color-bg-surface-hovered);
2218
+ border-color: var(--ids-comp-card-filled-color-border-surface-hovered);
2219
+ }
2220
+ .ids-card.ids-card-filled.ids-card-surface.ids-card-clickable:focus, .ids-card.ids-card-filled.ids-card-surface.ids-card-clickable:focus-visible {
2221
+ background-color: var(--ids-comp-card-filled-color-bg-surface-focused);
2222
+ border-color: var(--ids-comp-card-filled-color-border-surface-focused);
2223
+ outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
2224
+ }
2225
+ .ids-card.ids-card-filled.ids-card-surface.ids-card-clickable:active {
2226
+ background-color: var(--ids-comp-card-filled-color-bg-surface-pressed);
2227
+ border-color: var(--ids-comp-card-filled-color-border-surface-pressed);
2228
+ }
2229
+ .ids-card.ids-card-filled.ids-card-surface.ids-card-clickable.ids-card-disabled {
2230
+ background-color: var(--ids-comp-card-filled-color-bg-surface-disabled);
2231
+ border-color: var(--ids-comp-card-filled-color-border-surface-disabled);
2232
+ }
2233
+ .ids-card.ids-card-outlined.ids-card-primary {
2234
+ background-color: var(--ids-comp-card-outlined-color-bg-primary-default);
2235
+ border-color: var(--ids-comp-card-outlined-color-border-primary-default);
2236
+ }
2237
+ .ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable:hover {
2238
+ background-color: var(--ids-comp-card-outlined-color-bg-primary-hovered);
2239
+ border-color: var(--ids-comp-card-outlined-color-border-primary-hovered);
2240
+ }
2241
+ .ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable:focus, .ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable:focus-visible {
2242
+ background-color: var(--ids-comp-card-outlined-color-bg-primary-focused);
2243
+ border-color: var(--ids-comp-card-outlined-color-border-primary-focused);
2244
+ outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
2245
+ }
2246
+ .ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable:active {
2247
+ background-color: var(--ids-comp-card-outlined-color-bg-primary-pressed);
2248
+ border-color: var(--ids-comp-card-outlined-color-border-primary-pressed);
2249
+ }
2250
+ .ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable.ids-card-disabled {
2251
+ background-color: var(--ids-comp-card-outlined-color-bg-primary-disabled);
2252
+ border-color: var(--ids-comp-card-outlined-color-border-primary-disabled);
2253
+ }
2254
+ .ids-card.ids-card-outlined.ids-card-secondary {
2255
+ background-color: var(--ids-comp-card-outlined-color-bg-secondary-default);
2256
+ border-color: var(--ids-comp-card-outlined-color-border-secondary-default);
2257
+ }
2258
+ .ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable:hover {
2259
+ background-color: var(--ids-comp-card-outlined-color-bg-secondary-hovered);
2260
+ border-color: var(--ids-comp-card-outlined-color-border-secondary-hovered);
2261
+ }
2262
+ .ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable:focus, .ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable:focus-visible {
2263
+ background-color: var(--ids-comp-card-outlined-color-bg-secondary-focused);
2264
+ border-color: var(--ids-comp-card-outlined-color-border-secondary-focused);
2265
+ outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
2266
+ }
2267
+ .ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable:active {
2268
+ background-color: var(--ids-comp-card-outlined-color-bg-secondary-pressed);
2269
+ border-color: var(--ids-comp-card-outlined-color-border-secondary-pressed);
2270
+ }
2271
+ .ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable.ids-card-disabled {
2272
+ background-color: var(--ids-comp-card-outlined-color-bg-secondary-disabled);
2273
+ border-color: var(--ids-comp-card-outlined-color-border-secondary-disabled);
2274
+ }
2275
+ .ids-card.ids-card-outlined.ids-card-brand {
2276
+ background-color: var(--ids-comp-card-outlined-color-bg-brand-default);
2277
+ border-color: var(--ids-comp-card-outlined-color-border-brand-default);
2278
+ }
2279
+ .ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable:hover {
2280
+ background-color: var(--ids-comp-card-outlined-color-bg-brand-hovered);
2281
+ border-color: var(--ids-comp-card-outlined-color-border-brand-hovered);
2282
+ }
2283
+ .ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable:focus, .ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable:focus-visible {
2284
+ background-color: var(--ids-comp-card-outlined-color-bg-brand-focused);
2285
+ border-color: var(--ids-comp-card-outlined-color-border-brand-focused);
2286
+ outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
2287
+ }
2288
+ .ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable:active {
2289
+ background-color: var(--ids-comp-card-outlined-color-bg-brand-pressed);
2290
+ border-color: var(--ids-comp-card-outlined-color-border-brand-pressed);
2291
+ }
2292
+ .ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable.ids-card-disabled {
2293
+ background-color: var(--ids-comp-card-outlined-color-bg-brand-disabled);
2294
+ border-color: var(--ids-comp-card-outlined-color-border-brand-disabled);
2295
+ }
2296
+ .ids-card.ids-card-outlined.ids-card-error {
2297
+ background-color: var(--ids-comp-card-outlined-color-bg-error-default);
2298
+ border-color: var(--ids-comp-card-outlined-color-border-error-default);
2299
+ }
2300
+ .ids-card.ids-card-outlined.ids-card-error.ids-card-clickable:hover {
2301
+ background-color: var(--ids-comp-card-outlined-color-bg-error-hovered);
2302
+ border-color: var(--ids-comp-card-outlined-color-border-error-hovered);
2303
+ }
2304
+ .ids-card.ids-card-outlined.ids-card-error.ids-card-clickable:focus, .ids-card.ids-card-outlined.ids-card-error.ids-card-clickable:focus-visible {
2305
+ background-color: var(--ids-comp-card-outlined-color-bg-error-focused);
2306
+ border-color: var(--ids-comp-card-outlined-color-border-error-focused);
2307
+ outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
2308
+ }
2309
+ .ids-card.ids-card-outlined.ids-card-error.ids-card-clickable:active {
2310
+ background-color: var(--ids-comp-card-outlined-color-bg-error-pressed);
2311
+ border-color: var(--ids-comp-card-outlined-color-border-error-pressed);
2312
+ }
2313
+ .ids-card.ids-card-outlined.ids-card-success {
2314
+ background-color: var(--ids-comp-card-outlined-color-bg-success-default);
2315
+ border-color: var(--ids-comp-card-outlined-color-border-success-default);
2316
+ }
2317
+ .ids-card.ids-card-outlined.ids-card-success.ids-card-clickable:hover {
2318
+ background-color: var(--ids-comp-card-outlined-color-bg-success-hovered);
2319
+ border-color: var(--ids-comp-card-outlined-color-border-success-hovered);
2320
+ }
2321
+ .ids-card.ids-card-outlined.ids-card-success.ids-card-clickable:focus, .ids-card.ids-card-outlined.ids-card-success.ids-card-clickable:focus-visible {
2322
+ background-color: var(--ids-comp-card-outlined-color-bg-success-focused);
2323
+ border-color: var(--ids-comp-card-outlined-color-border-success-focused);
2324
+ outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
2325
+ }
2326
+ .ids-card.ids-card-outlined.ids-card-success.ids-card-clickable:active {
2327
+ background-color: var(--ids-comp-card-outlined-color-bg-success-pressed);
2328
+ border-color: var(--ids-comp-card-outlined-color-border-success-pressed);
2329
+ }
2330
+ .ids-card.ids-card-outlined.ids-card-warning {
2331
+ background-color: var(--ids-comp-card-outlined-color-bg-warning-default);
2332
+ border-color: var(--ids-comp-card-outlined-color-border-warning-default);
2333
+ }
2334
+ .ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable:hover {
2335
+ background-color: var(--ids-comp-card-outlined-color-bg-warning-hovered);
2336
+ border-color: var(--ids-comp-card-outlined-color-border-warning-hovered);
2337
+ }
2338
+ .ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable:focus, .ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable:focus-visible {
2339
+ background-color: var(--ids-comp-card-outlined-color-bg-warning-focused);
2340
+ border-color: var(--ids-comp-card-outlined-color-border-warning-focused);
2341
+ outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
2342
+ }
2343
+ .ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable:active {
2344
+ background-color: var(--ids-comp-card-outlined-color-bg-warning-pressed);
2345
+ border-color: var(--ids-comp-card-outlined-color-border-warning-pressed);
2346
+ }
2347
+ .ids-card.ids-card-outlined.ids-card-info {
2348
+ background-color: var(--ids-comp-card-outlined-color-bg-info-default);
2349
+ border-color: var(--ids-comp-card-outlined-color-border-info-default);
2350
+ }
2351
+ .ids-card.ids-card-outlined.ids-card-info.ids-card-clickable:hover {
2352
+ background-color: var(--ids-comp-card-outlined-color-bg-info-hovered);
2353
+ border-color: var(--ids-comp-card-outlined-color-border-info-hovered);
2354
+ }
2355
+ .ids-card.ids-card-outlined.ids-card-info.ids-card-clickable:focus, .ids-card.ids-card-outlined.ids-card-info.ids-card-clickable:focus-visible {
2356
+ background-color: var(--ids-comp-card-outlined-color-bg-info-focused);
2357
+ border-color: var(--ids-comp-card-outlined-color-border-info-focused);
2358
+ outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
2359
+ }
2360
+ .ids-card.ids-card-outlined.ids-card-info.ids-card-clickable:active {
2361
+ background-color: var(--ids-comp-card-outlined-color-bg-info-pressed);
2362
+ border-color: var(--ids-comp-card-outlined-color-border-info-pressed);
2363
+ }
2364
+ .ids-card.ids-card-outlined.ids-card-light {
2365
+ background-color: var(--ids-comp-card-outlined-color-bg-light-default);
2366
+ border-color: var(--ids-comp-card-outlined-color-border-light-default);
2367
+ }
2368
+ .ids-card.ids-card-outlined.ids-card-light.ids-card-clickable:hover {
2369
+ background-color: var(--ids-comp-card-outlined-color-bg-light-hovered);
2370
+ border-color: var(--ids-comp-card-outlined-color-border-light-hovered);
2371
+ }
2372
+ .ids-card.ids-card-outlined.ids-card-light.ids-card-clickable:focus, .ids-card.ids-card-outlined.ids-card-light.ids-card-clickable:focus-visible {
2373
+ background-color: var(--ids-comp-card-outlined-color-bg-light-focused);
2374
+ border-color: var(--ids-comp-card-outlined-color-border-light-focused);
2375
+ outline-color: var(--ids-comp-card-focused-outline-color-light-focused);
2376
+ }
2377
+ .ids-card.ids-card-outlined.ids-card-light.ids-card-clickable:active {
2378
+ background-color: var(--ids-comp-card-outlined-color-bg-light-pressed);
2379
+ border-color: var(--ids-comp-card-outlined-color-border-light-pressed);
2380
+ }
2381
+ .ids-card.ids-card-outlined.ids-card-light.ids-card-clickable.ids-card-disabled {
2382
+ background-color: var(--ids-comp-card-outlined-color-bg-light-disabled);
2383
+ border-color: var(--ids-comp-card-outlined-color-border-light-disabled);
2384
+ }
2385
+ .ids-card.ids-card-outlined.ids-card-dark {
2386
+ background-color: var(--ids-comp-card-outlined-color-bg-dark-default);
2387
+ border-color: var(--ids-comp-card-outlined-color-border-dark-default);
2388
+ }
2389
+ .ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable:hover {
2390
+ background-color: var(--ids-comp-card-outlined-color-bg-dark-hovered);
2391
+ border-color: var(--ids-comp-card-outlined-color-border-dark-hovered);
2392
+ }
2393
+ .ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable:focus, .ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable:focus-visible {
2394
+ background-color: var(--ids-comp-card-outlined-color-bg-dark-focused);
2395
+ border-color: var(--ids-comp-card-outlined-color-border-dark-focused);
2396
+ outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
2397
+ }
2398
+ .ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable:active {
2399
+ background-color: var(--ids-comp-card-outlined-color-bg-dark-pressed);
2400
+ border-color: var(--ids-comp-card-outlined-color-border-dark-pressed);
2401
+ }
2402
+ .ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable.ids-card-disabled {
2403
+ background-color: var(--ids-comp-card-outlined-color-bg-dark-disabled);
2404
+ border-color: var(--ids-comp-card-outlined-color-border-dark-disabled);
2405
+ }
2406
+ .ids-card.ids-card-outlined.ids-card-surface {
2407
+ background-color: var(--ids-comp-card-outlined-color-bg-surface-default);
2408
+ border-color: var(--ids-comp-card-outlined-color-border-surface-default);
2409
+ }
2410
+ .ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable:hover {
2411
+ background-color: var(--ids-comp-card-outlined-color-bg-surface-hovered);
2412
+ border-color: var(--ids-comp-card-outlined-color-border-surface-hovered);
2413
+ }
2414
+ .ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable:focus, .ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable:focus-visible {
2415
+ background-color: var(--ids-comp-card-outlined-color-bg-surface-focused);
2416
+ border-color: var(--ids-comp-card-outlined-color-border-surface-focused);
2417
+ outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
2418
+ }
2419
+ .ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable:active {
2420
+ background-color: var(--ids-comp-card-outlined-color-bg-surface-pressed);
2421
+ border-color: var(--ids-comp-card-outlined-color-border-surface-pressed);
2422
+ }
2423
+ .ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable.ids-card-disabled {
2424
+ background-color: var(--ids-comp-card-outlined-color-bg-surface-disabled);
2425
+ border-color: var(--ids-comp-card-outlined-color-border-surface-disabled);
2426
+ }
2427
+ .ids-card.ids-card-elevated.ids-card-primary {
2428
+ background-color: var(--ids-comp-card-elevated-color-bg-primary-default);
2429
+ border-color: var(--ids-comp-card-elevated-color-border-primary-default);
2430
+ }
2431
+ .ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable:hover {
2432
+ background-color: var(--ids-comp-card-elevated-color-bg-primary-hovered);
2433
+ border-color: var(--ids-comp-card-elevated-color-border-primary-hovered);
2434
+ }
2435
+ .ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable:focus, .ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable:focus-visible {
2436
+ background-color: var(--ids-comp-card-elevated-color-bg-primary-focused);
2437
+ border-color: var(--ids-comp-card-elevated-color-border-primary-focused);
2438
+ outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
2439
+ }
2440
+ .ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable:active {
2441
+ background-color: var(--ids-comp-card-elevated-color-bg-primary-pressed);
2442
+ border-color: var(--ids-comp-card-elevated-color-border-primary-pressed);
2443
+ }
2444
+ .ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable.ids-card-disabled {
2445
+ background-color: var(--ids-comp-card-elevated-color-bg-primary-disabled);
2446
+ border-color: var(--ids-comp-card-elevated-color-border-primary-disabled);
2447
+ }
2448
+ .ids-card.ids-card-elevated.ids-card-secondary {
2449
+ background-color: var(--ids-comp-card-elevated-color-bg-secondary-default);
2450
+ border-color: var(--ids-comp-card-elevated-color-border-secondary-default);
2451
+ }
2452
+ .ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable:hover {
2453
+ background-color: var(--ids-comp-card-elevated-color-bg-secondary-hovered);
2454
+ border-color: var(--ids-comp-card-elevated-color-border-secondary-hovered);
2455
+ }
2456
+ .ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable:focus, .ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable:focus-visible {
2457
+ background-color: var(--ids-comp-card-elevated-color-bg-secondary-focused);
2458
+ border-color: var(--ids-comp-card-elevated-color-border-secondary-focused);
2459
+ outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
2460
+ }
2461
+ .ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable:active {
2462
+ background-color: var(--ids-comp-card-elevated-color-bg-secondary-pressed);
2463
+ border-color: var(--ids-comp-card-elevated-color-border-secondary-pressed);
2464
+ }
2465
+ .ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable.ids-card-disabled {
2466
+ background-color: var(--ids-comp-card-elevated-color-bg-secondary-disabled);
2467
+ border-color: var(--ids-comp-card-elevated-color-border-secondary-disabled);
2468
+ }
2469
+ .ids-card.ids-card-elevated.ids-card-brand {
2470
+ background-color: var(--ids-comp-card-elevated-color-bg-brand-default);
2471
+ border-color: var(--ids-comp-card-elevated-color-border-brand-default);
2472
+ }
2473
+ .ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable:hover {
2474
+ background-color: var(--ids-comp-card-elevated-color-bg-brand-hovered);
2475
+ border-color: var(--ids-comp-card-elevated-color-border-brand-hovered);
2476
+ }
2477
+ .ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable:focus, .ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable:focus-visible {
2478
+ background-color: var(--ids-comp-card-elevated-color-bg-brand-focused);
2479
+ border-color: var(--ids-comp-card-elevated-color-border-brand-focused);
2480
+ outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
2481
+ }
2482
+ .ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable:active {
2483
+ background-color: var(--ids-comp-card-elevated-color-bg-brand-pressed);
2484
+ border-color: var(--ids-comp-card-elevated-color-border-brand-pressed);
2485
+ }
2486
+ .ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable.ids-card-disabled {
2487
+ background-color: var(--ids-comp-card-elevated-color-bg-brand-disabled);
2488
+ border-color: var(--ids-comp-card-elevated-color-border-brand-disabled);
2489
+ }
2490
+ .ids-card.ids-card-elevated.ids-card-error {
2491
+ background-color: var(--ids-comp-card-elevated-color-bg-error-default);
2492
+ border-color: var(--ids-comp-card-elevated-color-border-error-default);
2493
+ }
2494
+ .ids-card.ids-card-elevated.ids-card-error.ids-card-clickable:hover {
2495
+ background-color: var(--ids-comp-card-elevated-color-bg-error-hovered);
2496
+ border-color: var(--ids-comp-card-elevated-color-border-error-hovered);
2497
+ }
2498
+ .ids-card.ids-card-elevated.ids-card-error.ids-card-clickable:focus, .ids-card.ids-card-elevated.ids-card-error.ids-card-clickable:focus-visible {
2499
+ background-color: var(--ids-comp-card-elevated-color-bg-error-focused);
2500
+ border-color: var(--ids-comp-card-elevated-color-border-error-focused);
2501
+ outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
2502
+ }
2503
+ .ids-card.ids-card-elevated.ids-card-error.ids-card-clickable:active {
2504
+ background-color: var(--ids-comp-card-elevated-color-bg-error-pressed);
2505
+ border-color: var(--ids-comp-card-elevated-color-border-error-pressed);
2506
+ }
2507
+ .ids-card.ids-card-elevated.ids-card-success {
2508
+ background-color: var(--ids-comp-card-elevated-color-bg-success-default);
2509
+ border-color: var(--ids-comp-card-elevated-color-border-success-default);
2510
+ }
2511
+ .ids-card.ids-card-elevated.ids-card-success.ids-card-clickable:hover {
2512
+ background-color: var(--ids-comp-card-elevated-color-bg-success-hovered);
2513
+ border-color: var(--ids-comp-card-elevated-color-border-success-hovered);
2514
+ }
2515
+ .ids-card.ids-card-elevated.ids-card-success.ids-card-clickable:focus, .ids-card.ids-card-elevated.ids-card-success.ids-card-clickable:focus-visible {
2516
+ background-color: var(--ids-comp-card-elevated-color-bg-success-focused);
2517
+ border-color: var(--ids-comp-card-elevated-color-border-success-focused);
2518
+ outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
2519
+ }
2520
+ .ids-card.ids-card-elevated.ids-card-success.ids-card-clickable:active {
2521
+ background-color: var(--ids-comp-card-elevated-color-bg-success-pressed);
2522
+ border-color: var(--ids-comp-card-elevated-color-border-success-pressed);
2523
+ }
2524
+ .ids-card.ids-card-elevated.ids-card-warning {
2525
+ background-color: var(--ids-comp-card-elevated-color-bg-warning-default);
2526
+ border-color: var(--ids-comp-card-elevated-color-border-warning-default);
2527
+ }
2528
+ .ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable:hover {
2529
+ background-color: var(--ids-comp-card-elevated-color-bg-warning-hovered);
2530
+ border-color: var(--ids-comp-card-elevated-color-border-warning-hovered);
2531
+ }
2532
+ .ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable:focus, .ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable:focus-visible {
2533
+ background-color: var(--ids-comp-card-elevated-color-bg-warning-focused);
2534
+ border-color: var(--ids-comp-card-elevated-color-border-warning-focused);
2535
+ outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
2536
+ }
2537
+ .ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable:active {
2538
+ background-color: var(--ids-comp-card-elevated-color-bg-warning-pressed);
2539
+ border-color: var(--ids-comp-card-elevated-color-border-warning-pressed);
2540
+ }
2541
+ .ids-card.ids-card-elevated.ids-card-info {
2542
+ background-color: var(--ids-comp-card-elevated-color-bg-info-default);
2543
+ border-color: var(--ids-comp-card-elevated-color-border-info-default);
2544
+ }
2545
+ .ids-card.ids-card-elevated.ids-card-info.ids-card-clickable:hover {
2546
+ background-color: var(--ids-comp-card-elevated-color-bg-info-hovered);
2547
+ border-color: var(--ids-comp-card-elevated-color-border-info-hovered);
2548
+ }
2549
+ .ids-card.ids-card-elevated.ids-card-info.ids-card-clickable:focus, .ids-card.ids-card-elevated.ids-card-info.ids-card-clickable:focus-visible {
2550
+ background-color: var(--ids-comp-card-elevated-color-bg-info-focused);
2551
+ border-color: var(--ids-comp-card-elevated-color-border-info-focused);
2552
+ outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
2553
+ }
2554
+ .ids-card.ids-card-elevated.ids-card-info.ids-card-clickable:active {
2555
+ background-color: var(--ids-comp-card-elevated-color-bg-info-pressed);
2556
+ border-color: var(--ids-comp-card-elevated-color-border-info-pressed);
2557
+ }
2558
+ .ids-card.ids-card-elevated.ids-card-light {
2559
+ background-color: var(--ids-comp-card-elevated-color-bg-light-default);
2560
+ border-color: var(--ids-comp-card-elevated-color-border-light-default);
2561
+ }
2562
+ .ids-card.ids-card-elevated.ids-card-light.ids-card-clickable:hover {
2563
+ background-color: var(--ids-comp-card-elevated-color-bg-light-hovered);
2564
+ border-color: var(--ids-comp-card-elevated-color-border-light-hovered);
2565
+ }
2566
+ .ids-card.ids-card-elevated.ids-card-light.ids-card-clickable:focus, .ids-card.ids-card-elevated.ids-card-light.ids-card-clickable:focus-visible {
2567
+ background-color: var(--ids-comp-card-elevated-color-bg-light-focused);
2568
+ border-color: var(--ids-comp-card-elevated-color-border-light-focused);
2569
+ outline-color: var(--ids-comp-card-focused-outline-color-light-focused);
2570
+ }
2571
+ .ids-card.ids-card-elevated.ids-card-light.ids-card-clickable:active {
2572
+ background-color: var(--ids-comp-card-elevated-color-bg-light-pressed);
2573
+ border-color: var(--ids-comp-card-elevated-color-border-light-pressed);
2574
+ }
2575
+ .ids-card.ids-card-elevated.ids-card-light.ids-card-clickable.ids-card-disabled {
2576
+ background-color: var(--ids-comp-card-elevated-color-bg-light-disabled);
2577
+ border-color: var(--ids-comp-card-elevated-color-border-light-disabled);
2578
+ }
2579
+ .ids-card.ids-card-elevated.ids-card-dark {
2580
+ background-color: var(--ids-comp-card-elevated-color-bg-dark-default);
2581
+ border-color: var(--ids-comp-card-elevated-color-border-dark-default);
2582
+ }
2583
+ .ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable:hover {
2584
+ background-color: var(--ids-comp-card-elevated-color-bg-dark-hovered);
2585
+ border-color: var(--ids-comp-card-elevated-color-border-dark-hovered);
2586
+ }
2587
+ .ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable:focus, .ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable:focus-visible {
2588
+ background-color: var(--ids-comp-card-elevated-color-bg-dark-focused);
2589
+ border-color: var(--ids-comp-card-elevated-color-border-dark-focused);
2590
+ outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
2591
+ }
2592
+ .ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable:active {
2593
+ background-color: var(--ids-comp-card-elevated-color-bg-dark-pressed);
2594
+ border-color: var(--ids-comp-card-elevated-color-border-dark-pressed);
2595
+ }
2596
+ .ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable.ids-card-disabled {
2597
+ background-color: var(--ids-comp-card-elevated-color-bg-dark-disabled);
2598
+ border-color: var(--ids-comp-card-elevated-color-border-dark-disabled);
2599
+ }
2600
+ .ids-card.ids-card-elevated.ids-card-surface {
2601
+ background-color: var(--ids-comp-card-elevated-color-bg-surface-default);
2602
+ border-color: var(--ids-comp-card-elevated-color-border-surface-default);
2603
+ }
2604
+ .ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable:hover {
2605
+ background-color: var(--ids-comp-card-elevated-color-bg-surface-hovered);
2606
+ border-color: var(--ids-comp-card-elevated-color-border-surface-hovered);
2607
+ }
2608
+ .ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable:focus, .ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable:focus-visible {
2609
+ background-color: var(--ids-comp-card-elevated-color-bg-surface-focused);
2610
+ border-color: var(--ids-comp-card-elevated-color-border-surface-focused);
2611
+ outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
2612
+ }
2613
+ .ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable:active {
2614
+ background-color: var(--ids-comp-card-elevated-color-bg-surface-pressed);
2615
+ border-color: var(--ids-comp-card-elevated-color-border-surface-pressed);
2616
+ }
2617
+ .ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable.ids-card-disabled {
2618
+ background-color: var(--ids-comp-card-elevated-color-bg-surface-disabled);
2619
+ border-color: var(--ids-comp-card-elevated-color-border-surface-disabled);
2620
+ }
2621
+
2622
+ .ids-checkbox-group {
2623
+ display: flex;
2624
+ flex-direction: column;
2625
+ justify-content: center;
2626
+ align-items: flex-start;
2627
+ }
2628
+ .ids-checkbox-group > .ids-checkbox-group__label {
2629
+ font-style: normal;
2630
+ }
2631
+ .ids-checkbox-group > .ids-checkbox-group__list {
2632
+ display: flex;
2633
+ }
2634
+ .ids-checkbox-group.ids-checkbox-group-horizontal > .ids-checkbox-group__list {
2635
+ flex-direction: row;
2636
+ align-items: center;
2637
+ }
2638
+ .ids-checkbox-group.ids-checkbox-group-vertical > .ids-checkbox-group__list {
2639
+ flex-direction: column;
2640
+ align-items: flex-start;
2641
+ }
2642
+ .ids-checkbox-group.ids-checkbox-group-compact {
2643
+ padding: var(--ids-comp-checkbox-group-vertical-container-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-compact);
2644
+ gap: var(--ids-comp-checkbox-group-vertical-container-size-gap-compact);
2645
+ }
2646
+ .ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__label {
2647
+ font-family: var(--ids-comp-checkbox-group-label-typography-font-family-compact);
2648
+ font-size: var(--ids-comp-checkbox-group-label-typography-font-size-compact);
2649
+ font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-compact);
2650
+ line-height: var(--ids-comp-checkbox-group-label-typography-line-height-compact);
2651
+ letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-compact);
2652
+ }
2653
+ .ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__list {
2654
+ padding: var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-compact);
2655
+ gap: var(--ids-comp-checkbox-group-horizontal-list-size-gap-compact);
2656
+ }
2657
+ .ids-checkbox-group.ids-checkbox-group-comfortable {
2658
+ padding: var(--ids-comp-checkbox-group-vertical-container-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-comfortable);
2659
+ gap: var(--ids-comp-checkbox-group-vertical-container-size-gap-comfortable);
2660
+ }
2661
+ .ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__label {
2662
+ font-family: var(--ids-comp-checkbox-group-label-typography-font-family-comfortable);
2663
+ font-size: var(--ids-comp-checkbox-group-label-typography-font-size-comfortable);
2664
+ font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-comfortable);
2665
+ line-height: var(--ids-comp-checkbox-group-label-typography-line-height-comfortable);
2666
+ letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-comfortable);
2667
+ }
2668
+ .ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__list {
2669
+ padding: var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-comfortable);
2670
+ gap: var(--ids-comp-checkbox-group-horizontal-list-size-gap-comfortable);
2671
+ }
2672
+ .ids-checkbox-group.ids-checkbox-group-spacious {
2673
+ padding: var(--ids-comp-checkbox-group-vertical-container-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-spacious);
2674
+ gap: var(--ids-comp-checkbox-group-vertical-container-size-gap-spacious);
2675
+ }
2676
+ .ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__label {
2677
+ font-family: var(--ids-comp-checkbox-group-label-typography-font-family-spacious);
2678
+ font-size: var(--ids-comp-checkbox-group-label-typography-font-size-spacious);
2679
+ font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-spacious);
2680
+ line-height: var(--ids-comp-checkbox-group-label-typography-line-height-spacious);
2681
+ letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-spacious);
2682
+ }
2683
+ .ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__list {
2684
+ padding: var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-spacious);
2685
+ gap: var(--ids-comp-checkbox-group-horizontal-list-size-gap-spacious);
2686
+ }
2687
+ .ids-checkbox-group.ids-checkbox-group-dense {
2688
+ padding: var(--ids-comp-checkbox-group-vertical-container-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-dense);
2689
+ gap: var(--ids-comp-checkbox-group-vertical-container-size-gap-dense);
2690
+ }
2691
+ .ids-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__label {
2692
+ font-family: var(--ids-comp-checkbox-group-label-typography-font-family-dense);
2693
+ font-size: var(--ids-comp-checkbox-group-label-typography-font-size-dense);
2694
+ font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-dense);
2695
+ line-height: var(--ids-comp-checkbox-group-label-typography-line-height-dense);
2696
+ letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-dense);
2697
+ }
2698
+ .ids-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__list {
2699
+ padding: var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-dense);
2700
+ gap: var(--ids-comp-checkbox-group-horizontal-list-size-gap-dense);
2701
+ }
2702
+ .ids-checkbox-group.ids-checkbox-group-light > .ids-checkbox-group__label {
2703
+ color: var(--ids-comp-checkbox-label-color-fg-light-default);
2704
+ }
2705
+ .ids-checkbox-group.ids-checkbox-group-dark > .ids-checkbox-group__label {
2706
+ color: var(--ids-comp-checkbox-label-color-fg-dark-default);
2707
+ }
2708
+ .ids-checkbox-group.ids-checkbox-group-surface > .ids-checkbox-group__label {
2709
+ color: var(--ids-comp-checkbox-label-color-fg-surface-default);
2710
+ }
2711
+
2712
+ .ids-checkbox {
2713
+ display: inline-flex;
2714
+ align-self: stretch;
2715
+ align-items: flex-start;
2716
+ }
2717
+ .ids-checkbox .ids-checkbox__input-wrapper {
2718
+ position: relative;
2719
+ display: flex;
2720
+ align-items: center;
2721
+ justify-content: center;
2722
+ }
2723
+ .ids-checkbox .ids-checkbox__input-wrapper .ids-checkbox__touch-target {
2724
+ position: absolute;
2725
+ z-index: 1;
2726
+ }
2727
+ .ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox] {
2728
+ appearance: none;
2729
+ -webkit-appearance: none;
2730
+ flex-shrink: 0;
2731
+ border-style: solid;
2732
+ margin: 0;
2733
+ }
2734
+ .ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox]:focus, .ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox]:focus-visible {
2735
+ outline-offset: 2px;
2736
+ outline-style: solid;
2737
+ }
2738
+ .ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox] + .ids-checkbox__icon {
2739
+ position: absolute;
2740
+ }
2741
+ .ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox] + .ids-checkbox__icon > .ids-icon {
2742
+ color: inherit;
2743
+ }
2744
+ .ids-checkbox .ids-checkbox__label-wrapper {
2745
+ display: flex;
2746
+ flex-direction: column;
2747
+ align-items: flex-start;
2748
+ flex: 1 0 0;
2749
+ }
2750
+ .ids-checkbox .ids-checkbox__label-wrapper .ids-checkbox__label-container {
2751
+ text-align: start;
2752
+ }
2753
+ .ids-checkbox .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
2754
+ font-style: normal;
2755
+ }
2756
+ .ids-checkbox .ids-checkbox__label-wrapper .ids-checkbox__message-container {
2757
+ width: 100%;
2758
+ }
2759
+ .ids-checkbox.ids-checkbox-compact {
2760
+ padding: var(--ids-comp-checkbox-container-size-padding-y-compact) var(--ids-comp-checkbox-container-size-padding-x-compact);
2761
+ gap: var(--ids-comp-checkbox-container-size-gap-compact);
2762
+ }
2763
+ .ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper .ids-checkbox__touch-target {
2764
+ top: calc((var(--ids-comp-checkbox-input-size-height-compact) - var(--ids-comp-checkbox-input-size-touchtarget-height-compact)) / 2);
2765
+ left: calc((var(--ids-comp-checkbox-input-size-width-compact) - var(--ids-comp-checkbox-input-size-touchtarget-width-compact)) / 2);
2766
+ height: var(--ids-comp-checkbox-input-size-touchtarget-height-compact);
2767
+ width: var(--ids-comp-checkbox-input-size-touchtarget-width-compact);
2768
+ }
2769
+ .ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper input[type=checkbox] {
2770
+ width: var(--ids-comp-checkbox-input-size-width-compact);
2771
+ height: var(--ids-comp-checkbox-input-size-height-compact);
2772
+ border-radius: var(--ids-comp-checkbox-input-size-border-radius-compact);
2773
+ border-width: var(--ids-comp-checkbox-input-size-border-width-compact);
2774
+ }
2775
+ .ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper input[type=checkbox]:focus, .ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper input[type=checkbox]:focus-visible {
2776
+ outline-width: var(--ids-comp-checkbox-focused-outline-outline-compact);
2777
+ }
2778
+ .ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper .ids-checkbox__icon {
2779
+ height: var(--ids-comp-checkbox-input-size-icon-compact);
1966
2780
  width: var(--ids-comp-checkbox-input-size-icon-compact);
1967
2781
  line-height: var(--ids-comp-checkbox-input-size-icon-compact);
1968
2782
  }
@@ -2927,835 +3741,702 @@
2927
3741
  .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-pseudo-checkbox__icon {
2928
3742
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-focused);
2929
3743
  }
2930
-
2931
- .ids-card {
2932
- display: flex;
2933
- border-style: solid;
2934
- box-sizing: border-box;
2935
- }
2936
- .ids-card.ids-card-clickable {
2937
- pointer-events: auto;
2938
- cursor: pointer;
2939
- }
2940
- .ids-card.ids-card-clickable:focus, .ids-card.ids-card-clickable:focus-visible {
2941
- outline-offset: 2px;
2942
- outline-style: solid;
2943
- }
2944
- .ids-card.ids-card-clickable.ids-card-disabled {
2945
- pointer-events: none;
2946
- cursor: not-allowed;
2947
- }
2948
- .ids-card.ids-card-vertical {
2949
- flex-direction: column;
2950
- }
2951
- .ids-card.ids-card-vertical .ids-card-section:first-child {
2952
- padding-bottom: 0px;
2953
- border-top-left-radius: inherit;
2954
- border-top-right-radius: inherit;
2955
- }
2956
- .ids-card.ids-card-vertical .ids-card-section:last-child {
2957
- padding-top: 0px;
2958
- border-bottom-left-radius: inherit;
2959
- border-bottom-right-radius: inherit;
2960
- }
2961
- .ids-card.ids-card-vertical .ids-card-section.ids-card-section-stretched {
2962
- padding-left: 0px;
2963
- padding-right: 0px;
2964
- width: 100%;
2965
- }
2966
- .ids-card.ids-card-vertical .ids-card-section .ids-card-header-headline {
2967
- display: flex;
2968
- flex-direction: column;
2969
- }
2970
- .ids-card.ids-card-horizontal .ids-card-section:first-child {
2971
- padding-right: 0px;
2972
- border-top-left-radius: inherit;
2973
- border-bottom-left-radius: inherit;
2974
- }
2975
- .ids-card.ids-card-horizontal .ids-card-section:last-child {
2976
- padding-left: 0px;
2977
- border-top-right-radius: inherit;
2978
- border-bottom-right-radius: inherit;
2979
- }
2980
- .ids-card.ids-card-horizontal .ids-card-section.ids-card-section-stretched {
2981
- padding-top: 0px;
2982
- padding-bottom: 0px;
2983
- height: 100%;
2984
- }
2985
- .ids-card.ids-card-horizontal .ids-card-section.ids-card-header, .ids-card.ids-card-horizontal .ids-card-section.ids-card-footer {
2986
- display: none;
2987
- }
2988
- .ids-card .ids-card-title {
2989
- color: var(--ids-smc-reference-container-color-fg-surface-darker-95);
2990
- font-size: 24px;
2991
- font-style: normal;
2992
- font-weight: 600;
2993
- line-height: 32px;
2994
- }
2995
- .ids-card .ids-card-subtitle {
2996
- color: var(--ids-smc-reference-container-color-fg-surface-darker-70);
2997
- font-size: 16px;
2998
- font-style: normal;
2999
- font-weight: 500;
3000
- line-height: 24px;
3001
- letter-spacing: 0.15px;
3002
- }
3003
- .ids-card.ids-card-elevated {
3004
- box-shadow: var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-sm) var(--ids-smc-reference-container-effects-shadow-blur-md) var(--ids-smc-reference-container-effects-shadow-spread-xxl) var(--ids-smc-reference-container-effects-shadow-color-dark-light), var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xs) var(--ids-smc-reference-container-effects-shadow-blur-sm) var(--ids-smc-reference-container-effects-shadow-spread-xl) var(--ids-smc-reference-container-effects-shadow-color-dark-light);
3005
- }
3006
- .ids-card.ids-card-compact.ids-card-horizontal {
3007
- padding: var(--ids-comp-card-container-horizontal-size-padding-y-compact) var(--ids-comp-card-container-horizontal-size-padding-x-compact);
3008
- gap: var(--ids-comp-card-container-horizontal-size-gap-compact);
3009
- border-radius: var(--ids-comp-card-container-horizontal-size-border-radius-compact);
3010
- }
3011
- .ids-card.ids-card-compact.ids-card-horizontal.ids-card-outlined {
3012
- border-width: var(--ids-comp-card-container-horizontal-size-border-width-compact);
3013
- }
3014
- .ids-card.ids-card-compact.ids-card-vertical {
3015
- padding: var(--ids-comp-card-container-vertical-size-padding-y-compact) var(--ids-comp-card-container-vertical-size-padding-x-compact);
3016
- gap: var(--ids-comp-card-container-vertical-size-gap-compact);
3017
- border-radius: var(--ids-comp-card-container-vertical-size-border-radius-compact);
3018
- }
3019
- .ids-card.ids-card-compact.ids-card-vertical.ids-card-outlined {
3020
- border-width: var(--ids-comp-card-container-vertical-size-border-width-compact);
3021
- }
3022
- .ids-card.ids-card-compact.ids-card-clickable:focus {
3023
- outline-width: var(--ids-comp-card-focused-outline-outline-compact);
3024
- }
3025
- .ids-card.ids-card-compact .ids-card-header-headline {
3026
- gap: var(--ids-comp-card-header-headline-gap-compact);
3027
- padding: var(--ids-comp-card-header-headline-padding-y-compact) var(--ids-comp-card-header-headline-padding-x-compact);
3028
- }
3029
- .ids-card.ids-card-compact.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child {
3030
- padding-top: var(--ids-comp-card-slot-size-padding-top-compact);
3031
- }
3032
- .ids-card.ids-card-compact.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child {
3033
- padding-bottom: var(--ids-comp-card-slot-size-padding-bottom-compact);
3034
- }
3035
- .ids-card.ids-card-compact.ids-card-vertical .ids-card-section.ids-card-section-padded {
3036
- padding-left: var(--ids-comp-card-slot-size-padding-x-compact);
3037
- padding-right: var(--ids-comp-card-slot-size-padding-x-compact);
3038
- }
3039
- .ids-card.ids-card-compact.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child {
3040
- padding-left: var(--ids-comp-card-slot-size-padding-top-compact);
3041
- }
3042
- .ids-card.ids-card-compact.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child {
3043
- padding-right: var(--ids-comp-card-slot-size-padding-bottom-compact);
3044
- }
3045
- .ids-card.ids-card-compact.ids-card-horizontal .ids-card-section.ids-card-section-padded {
3046
- padding-top: var(--ids-comp-card-slot-size-padding-x-compact);
3047
- padding-bottom: var(--ids-comp-card-slot-size-padding-x-compact);
3048
- }
3049
- .ids-card.ids-card-comfortable.ids-card-horizontal {
3050
- padding: var(--ids-comp-card-container-horizontal-size-padding-y-comfortable) var(--ids-comp-card-container-horizontal-size-padding-x-comfortable);
3051
- gap: var(--ids-comp-card-container-horizontal-size-gap-comfortable);
3052
- border-radius: var(--ids-comp-card-container-horizontal-size-border-radius-comfortable);
3053
- }
3054
- .ids-card.ids-card-comfortable.ids-card-horizontal.ids-card-outlined {
3055
- border-width: var(--ids-comp-card-container-horizontal-size-border-width-comfortable);
3056
- }
3057
- .ids-card.ids-card-comfortable.ids-card-vertical {
3058
- padding: var(--ids-comp-card-container-vertical-size-padding-y-comfortable) var(--ids-comp-card-container-vertical-size-padding-x-comfortable);
3059
- gap: var(--ids-comp-card-container-vertical-size-gap-comfortable);
3060
- border-radius: var(--ids-comp-card-container-vertical-size-border-radius-comfortable);
3061
- }
3062
- .ids-card.ids-card-comfortable.ids-card-vertical.ids-card-outlined {
3063
- border-width: var(--ids-comp-card-container-vertical-size-border-width-comfortable);
3064
- }
3065
- .ids-card.ids-card-comfortable.ids-card-clickable:focus {
3066
- outline-width: var(--ids-comp-card-focused-outline-outline-comfortable);
3067
- }
3068
- .ids-card.ids-card-comfortable .ids-card-header-headline {
3069
- gap: var(--ids-comp-card-header-headline-gap-comfortable);
3070
- padding: var(--ids-comp-card-header-headline-padding-y-comfortable) var(--ids-comp-card-header-headline-padding-x-comfortable);
3071
- }
3072
- .ids-card.ids-card-comfortable.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child {
3073
- padding-top: var(--ids-comp-card-slot-size-padding-top-comfortable);
3074
- }
3075
- .ids-card.ids-card-comfortable.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child {
3076
- padding-bottom: var(--ids-comp-card-slot-size-padding-bottom-comfortable);
3077
- }
3078
- .ids-card.ids-card-comfortable.ids-card-vertical .ids-card-section.ids-card-section-padded {
3079
- padding-left: var(--ids-comp-card-slot-size-padding-x-comfortable);
3080
- padding-right: var(--ids-comp-card-slot-size-padding-x-comfortable);
3081
- }
3082
- .ids-card.ids-card-comfortable.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child {
3083
- padding-left: var(--ids-comp-card-slot-size-padding-top-comfortable);
3084
- }
3085
- .ids-card.ids-card-comfortable.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child {
3086
- padding-right: var(--ids-comp-card-slot-size-padding-bottom-comfortable);
3087
- }
3088
- .ids-card.ids-card-comfortable.ids-card-horizontal .ids-card-section.ids-card-section-padded {
3089
- padding-top: var(--ids-comp-card-slot-size-padding-x-comfortable);
3090
- padding-bottom: var(--ids-comp-card-slot-size-padding-x-comfortable);
3091
- }
3092
- .ids-card.ids-card-spacious.ids-card-horizontal {
3093
- padding: var(--ids-comp-card-container-horizontal-size-padding-y-spacious) var(--ids-comp-card-container-horizontal-size-padding-x-spacious);
3094
- gap: var(--ids-comp-card-container-horizontal-size-gap-spacious);
3095
- border-radius: var(--ids-comp-card-container-horizontal-size-border-radius-spacious);
3096
- }
3097
- .ids-card.ids-card-spacious.ids-card-horizontal.ids-card-outlined {
3098
- border-width: var(--ids-comp-card-container-horizontal-size-border-width-spacious);
3099
- }
3100
- .ids-card.ids-card-spacious.ids-card-vertical {
3101
- padding: var(--ids-comp-card-container-vertical-size-padding-y-spacious) var(--ids-comp-card-container-vertical-size-padding-x-spacious);
3102
- gap: var(--ids-comp-card-container-vertical-size-gap-spacious);
3103
- border-radius: var(--ids-comp-card-container-vertical-size-border-radius-spacious);
3104
- }
3105
- .ids-card.ids-card-spacious.ids-card-vertical.ids-card-outlined {
3106
- border-width: var(--ids-comp-card-container-vertical-size-border-width-spacious);
3107
- }
3108
- .ids-card.ids-card-spacious.ids-card-clickable:focus {
3109
- outline-width: var(--ids-comp-card-focused-outline-outline-spacious);
3110
- }
3111
- .ids-card.ids-card-spacious .ids-card-header-headline {
3112
- gap: var(--ids-comp-card-header-headline-gap-spacious);
3113
- padding: var(--ids-comp-card-header-headline-padding-y-spacious) var(--ids-comp-card-header-headline-padding-x-spacious);
3114
- }
3115
- .ids-card.ids-card-spacious.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child {
3116
- padding-top: var(--ids-comp-card-slot-size-padding-top-spacious);
3117
- }
3118
- .ids-card.ids-card-spacious.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child {
3119
- padding-bottom: var(--ids-comp-card-slot-size-padding-bottom-spacious);
3120
- }
3121
- .ids-card.ids-card-spacious.ids-card-vertical .ids-card-section.ids-card-section-padded {
3122
- padding-left: var(--ids-comp-card-slot-size-padding-x-spacious);
3123
- padding-right: var(--ids-comp-card-slot-size-padding-x-spacious);
3744
+
3745
+ .ids-chip {
3746
+ display: inline-flex;
3747
+ align-items: center;
3748
+ border-style: solid;
3749
+ box-sizing: border-box;
3124
3750
  }
3125
- .ids-card.ids-card-spacious.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child {
3126
- padding-left: var(--ids-comp-card-slot-size-padding-top-spacious);
3751
+ .ids-chip[role=button]:focus, .ids-chip[role=button]:focus-visible {
3752
+ outline-offset: 2px;
3753
+ outline-style: solid;
3127
3754
  }
3128
- .ids-card.ids-card-spacious.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child {
3129
- padding-right: var(--ids-comp-card-slot-size-padding-bottom-spacious);
3755
+ .ids-chip:not([role=button]):focus, .ids-chip:not([role=button]):focus-visible {
3756
+ outline-style: none;
3130
3757
  }
3131
- .ids-card.ids-card-spacious.ids-card-horizontal .ids-card-section.ids-card-section-padded {
3132
- padding-top: var(--ids-comp-card-slot-size-padding-x-spacious);
3133
- padding-bottom: var(--ids-comp-card-slot-size-padding-x-spacious);
3758
+ .ids-chip.ids-chip-disabled {
3759
+ cursor: not-allowed;
3134
3760
  }
3135
- .ids-card.ids-card-dense.ids-card-horizontal {
3136
- padding: var(--ids-comp-card-container-horizontal-size-padding-y-dense) var(--ids-comp-card-container-horizontal-size-padding-x-dense);
3137
- gap: var(--ids-comp-card-container-horizontal-size-gap-dense);
3138
- border-radius: var(--ids-comp-card-container-horizontal-size-border-radius-dense);
3761
+ .ids-chip > .ids-chip__label {
3762
+ display: flex;
3763
+ align-items: center;
3139
3764
  }
3140
- .ids-card.ids-card-dense.ids-card-horizontal.ids-card-outlined {
3141
- border-width: var(--ids-comp-card-container-horizontal-size-border-width-dense);
3765
+ .ids-chip.ids-chip-compact {
3766
+ height: var(--ids-comp-chip-container-size-height-compact);
3767
+ padding: var(--ids-comp-chip-container-size-padding-y-compact) var(--ids-comp-chip-container-size-padding-x-compact);
3768
+ border-radius: var(--ids-comp-chip-container-size-border-radius-compact);
3769
+ border-width: var(--ids-comp-chip-container-size-border-width-compact);
3770
+ }
3771
+ .ids-chip.ids-chip-compact:focus, .ids-chip.ids-chip-compact:focus-visible {
3772
+ outline-width: var(--ids-comp-chip-focused-outline-size-outline-compact);
3773
+ }
3774
+ .ids-chip.ids-chip-compact > .ids-avatar {
3775
+ width: var(--ids-comp-chip-avatar-size-avatar-compact);
3776
+ height: var(--ids-comp-chip-avatar-size-avatar-compact);
3777
+ }
3778
+ .ids-chip.ids-chip-compact > [idsLeadingIcon] {
3779
+ padding-left: var(--ids-comp-chip-icon-size-padding-left-compact);
3780
+ padding-right: var(--ids-comp-chip-icon-size-padding-right-compact);
3781
+ }
3782
+ .ids-chip.ids-chip-compact > .ids-chip__label {
3783
+ padding: 0 var(--ids-comp-chip-label-size-padding-x-compact);
3784
+ font-family: var(--ids-comp-chip-label-typography-font-family-compact);
3785
+ font-size: var(--ids-comp-chip-label-typography-font-size-compact);
3786
+ font-weight: var(--ids-comp-chip-label-typography-font-weight-compact);
3787
+ line-height: var(--ids-comp-chip-label-typography-line-height-compact);
3788
+ }
3789
+ .ids-chip.ids-chip-compact > .ids-icon-button {
3790
+ width: var(--ids-comp-chip-icon-button-size-icon-button-compact);
3791
+ height: var(--ids-comp-chip-icon-button-size-icon-button-compact);
3792
+ }
3793
+ .ids-chip.ids-chip-compact .ids-icon {
3794
+ width: var(--ids-comp-chip-icon-size-icon-compact);
3795
+ height: var(--ids-comp-chip-icon-size-icon-compact);
3796
+ font-size: var(--ids-comp-chip-icon-typography-font-size-compact);
3797
+ font-weight: var(--ids-comp-chip-icon-typography-font-weight-compact);
3798
+ line-height: var(--ids-comp-chip-icon-typography-line-height-compact);
3799
+ }
3800
+ .ids-chip.ids-chip-comfortable {
3801
+ height: var(--ids-comp-chip-container-size-height-comfortable);
3802
+ padding: var(--ids-comp-chip-container-size-padding-y-comfortable) var(--ids-comp-chip-container-size-padding-x-comfortable);
3803
+ border-radius: var(--ids-comp-chip-container-size-border-radius-comfortable);
3804
+ border-width: var(--ids-comp-chip-container-size-border-width-comfortable);
3805
+ }
3806
+ .ids-chip.ids-chip-comfortable:focus, .ids-chip.ids-chip-comfortable:focus-visible {
3807
+ outline-width: var(--ids-comp-chip-focused-outline-size-outline-comfortable);
3808
+ }
3809
+ .ids-chip.ids-chip-comfortable > .ids-avatar {
3810
+ width: var(--ids-comp-chip-avatar-size-avatar-comfortable);
3811
+ height: var(--ids-comp-chip-avatar-size-avatar-comfortable);
3812
+ }
3813
+ .ids-chip.ids-chip-comfortable > [idsLeadingIcon] {
3814
+ padding-left: var(--ids-comp-chip-icon-size-padding-left-comfortable);
3815
+ padding-right: var(--ids-comp-chip-icon-size-padding-right-comfortable);
3816
+ }
3817
+ .ids-chip.ids-chip-comfortable > .ids-chip__label {
3818
+ padding: 0 var(--ids-comp-chip-label-size-padding-x-comfortable);
3819
+ font-family: var(--ids-comp-chip-label-typography-font-family-comfortable);
3820
+ font-size: var(--ids-comp-chip-label-typography-font-size-comfortable);
3821
+ font-weight: var(--ids-comp-chip-label-typography-font-weight-comfortable);
3822
+ line-height: var(--ids-comp-chip-label-typography-line-height-comfortable);
3823
+ }
3824
+ .ids-chip.ids-chip-comfortable > .ids-icon-button {
3825
+ width: var(--ids-comp-chip-icon-button-size-icon-button-comfortable);
3826
+ height: var(--ids-comp-chip-icon-button-size-icon-button-comfortable);
3827
+ }
3828
+ .ids-chip.ids-chip-comfortable .ids-icon {
3829
+ width: var(--ids-comp-chip-icon-size-icon-comfortable);
3830
+ height: var(--ids-comp-chip-icon-size-icon-comfortable);
3831
+ font-size: var(--ids-comp-chip-icon-typography-font-size-comfortable);
3832
+ font-weight: var(--ids-comp-chip-icon-typography-font-weight-comfortable);
3833
+ line-height: var(--ids-comp-chip-icon-typography-line-height-comfortable);
3834
+ }
3835
+ .ids-chip.ids-chip-spacious {
3836
+ height: var(--ids-comp-chip-container-size-height-spacious);
3837
+ padding: var(--ids-comp-chip-container-size-padding-y-spacious) var(--ids-comp-chip-container-size-padding-x-spacious);
3838
+ border-radius: var(--ids-comp-chip-container-size-border-radius-spacious);
3839
+ border-width: var(--ids-comp-chip-container-size-border-width-spacious);
3840
+ }
3841
+ .ids-chip.ids-chip-spacious:focus, .ids-chip.ids-chip-spacious:focus-visible {
3842
+ outline-width: var(--ids-comp-chip-focused-outline-size-outline-spacious);
3843
+ }
3844
+ .ids-chip.ids-chip-spacious > .ids-avatar {
3845
+ width: var(--ids-comp-chip-avatar-size-avatar-spacious);
3846
+ height: var(--ids-comp-chip-avatar-size-avatar-spacious);
3847
+ }
3848
+ .ids-chip.ids-chip-spacious > [idsLeadingIcon] {
3849
+ padding-left: var(--ids-comp-chip-icon-size-padding-left-spacious);
3850
+ padding-right: var(--ids-comp-chip-icon-size-padding-right-spacious);
3851
+ }
3852
+ .ids-chip.ids-chip-spacious > .ids-chip__label {
3853
+ padding: 0 var(--ids-comp-chip-label-size-padding-x-spacious);
3854
+ font-family: var(--ids-comp-chip-label-typography-font-family-spacious);
3855
+ font-size: var(--ids-comp-chip-label-typography-font-size-spacious);
3856
+ font-weight: var(--ids-comp-chip-label-typography-font-weight-spacious);
3857
+ line-height: var(--ids-comp-chip-label-typography-line-height-spacious);
3858
+ }
3859
+ .ids-chip.ids-chip-spacious > .ids-icon-button {
3860
+ width: var(--ids-comp-chip-icon-button-size-icon-button-spacious);
3861
+ height: var(--ids-comp-chip-icon-button-size-icon-button-spacious);
3862
+ }
3863
+ .ids-chip.ids-chip-spacious .ids-icon {
3864
+ width: var(--ids-comp-chip-icon-size-icon-spacious);
3865
+ height: var(--ids-comp-chip-icon-size-icon-spacious);
3866
+ font-size: var(--ids-comp-chip-icon-typography-font-size-spacious);
3867
+ font-weight: var(--ids-comp-chip-icon-typography-font-weight-spacious);
3868
+ line-height: var(--ids-comp-chip-icon-typography-line-height-spacious);
3869
+ }
3870
+ .ids-chip.ids-chip-dense {
3871
+ height: var(--ids-comp-chip-container-size-height-dense);
3872
+ padding: var(--ids-comp-chip-container-size-padding-y-dense) var(--ids-comp-chip-container-size-padding-x-dense);
3873
+ border-radius: var(--ids-comp-chip-container-size-border-radius-dense);
3874
+ border-width: var(--ids-comp-chip-container-size-border-width-dense);
3875
+ }
3876
+ .ids-chip.ids-chip-dense:focus, .ids-chip.ids-chip-dense:focus-visible {
3877
+ outline-width: var(--ids-comp-chip-focused-outline-size-outline-dense);
3878
+ }
3879
+ .ids-chip.ids-chip-dense > .ids-avatar {
3880
+ width: var(--ids-comp-chip-avatar-size-avatar-dense);
3881
+ height: var(--ids-comp-chip-avatar-size-avatar-dense);
3882
+ }
3883
+ .ids-chip.ids-chip-dense > [idsLeadingIcon] {
3884
+ padding-left: var(--ids-comp-chip-icon-size-padding-left-dense);
3885
+ padding-right: var(--ids-comp-chip-icon-size-padding-right-dense);
3886
+ }
3887
+ .ids-chip.ids-chip-dense > .ids-chip__label {
3888
+ padding: 0 var(--ids-comp-chip-label-size-padding-x-dense);
3889
+ font-family: var(--ids-comp-chip-label-typography-font-family-dense);
3890
+ font-size: var(--ids-comp-chip-label-typography-font-size-dense);
3891
+ font-weight: var(--ids-comp-chip-label-typography-font-weight-dense);
3892
+ line-height: var(--ids-comp-chip-label-typography-line-height-dense);
3893
+ }
3894
+ .ids-chip.ids-chip-dense > .ids-icon-button {
3895
+ width: var(--ids-comp-chip-icon-button-size-icon-button-dense);
3896
+ height: var(--ids-comp-chip-icon-button-size-icon-button-dense);
3897
+ }
3898
+ .ids-chip.ids-chip-dense .ids-icon {
3899
+ width: var(--ids-comp-chip-icon-size-icon-dense);
3900
+ height: var(--ids-comp-chip-icon-size-icon-dense);
3901
+ font-size: var(--ids-comp-chip-icon-typography-font-size-dense);
3902
+ font-weight: var(--ids-comp-chip-icon-typography-font-weight-dense);
3903
+ line-height: var(--ids-comp-chip-icon-typography-line-height-dense);
3904
+ }
3905
+ .ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled) {
3906
+ background: var(--ids-comp-chip-filled-color-bg-primary-default);
3907
+ border-color: var(--ids-comp-chip-filled-color-border-primary-default);
3908
+ }
3909
+ .ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled) > .ids-icon {
3910
+ color: var(--ids-comp-chip-filled-color-fg-icon-primary-default);
3911
+ }
3912
+ .ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled) > .ids-chip__label {
3913
+ color: var(--ids-comp-chip-filled-color-fg-label-primary-default);
3914
+ }
3915
+ .ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)[role=button]:hover {
3916
+ background: var(--ids-comp-chip-filled-color-bg-primary-hovered);
3917
+ border-color: var(--ids-comp-chip-filled-color-border-primary-hovered);
3918
+ }
3919
+ .ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)[role=button]:hover > .ids-icon {
3920
+ color: var(--ids-comp-chip-filled-color-fg-icon-primary-hovered);
3921
+ }
3922
+ .ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)[role=button]:hover > .ids-chip__label {
3923
+ color: var(--ids-comp-chip-filled-color-fg-label-primary-hovered);
3924
+ }
3925
+ .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 {
3926
+ background: var(--ids-comp-chip-filled-color-bg-primary-focused);
3927
+ border-color: var(--ids-comp-chip-filled-color-border-primary-focused);
3928
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
3142
3929
  }
3143
- .ids-card.ids-card-dense.ids-card-vertical {
3144
- padding: var(--ids-comp-card-container-vertical-size-padding-y-dense) var(--ids-comp-card-container-vertical-size-padding-x-dense);
3145
- gap: var(--ids-comp-card-container-vertical-size-gap-dense);
3146
- border-radius: var(--ids-comp-card-container-vertical-size-border-radius-dense);
3930
+ .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 {
3931
+ color: var(--ids-comp-chip-filled-color-fg-icon-primary-focused);
3147
3932
  }
3148
- .ids-card.ids-card-dense.ids-card-vertical.ids-card-outlined {
3149
- border-width: var(--ids-comp-card-container-vertical-size-border-width-dense);
3933
+ .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 {
3934
+ color: var(--ids-comp-chip-filled-color-fg-label-primary-focused);
3150
3935
  }
3151
- .ids-card.ids-card-dense.ids-card-clickable:focus {
3152
- outline-width: var(--ids-comp-card-focused-outline-outline-dense);
3936
+ .ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)[role=button]:active {
3937
+ background: var(--ids-comp-chip-filled-color-bg-primary-pressed);
3938
+ border-color: var(--ids-comp-chip-filled-color-border-primary-pressed);
3153
3939
  }
3154
- .ids-card.ids-card-dense .ids-card-header-headline {
3155
- gap: var(--ids-comp-card-header-headline-gap-dense);
3156
- padding: var(--ids-comp-card-header-headline-padding-y-dense) var(--ids-comp-card-header-headline-padding-x-dense);
3940
+ .ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)[role=button]:active > .ids-icon {
3941
+ color: var(--ids-comp-chip-filled-color-fg-icon-primary-pressed);
3157
3942
  }
3158
- .ids-card.ids-card-dense.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child {
3159
- padding-top: var(--ids-comp-card-slot-size-padding-top-dense);
3943
+ .ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)[role=button]:active > .ids-chip__label {
3944
+ color: var(--ids-comp-chip-filled-color-fg-label-primary-pressed);
3160
3945
  }
3161
- .ids-card.ids-card-dense.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child {
3162
- padding-bottom: var(--ids-comp-card-slot-size-padding-bottom-dense);
3946
+ .ids-chip.ids-chip-filled.ids-chip-primary.ids-chip-disabled {
3947
+ background: var(--ids-comp-chip-filled-color-bg-primary-disabled);
3948
+ border-color: var(--ids-comp-chip-filled-color-border-primary-disabled);
3163
3949
  }
3164
- .ids-card.ids-card-dense.ids-card-vertical .ids-card-section.ids-card-section-padded {
3165
- padding-left: var(--ids-comp-card-slot-size-padding-x-dense);
3166
- padding-right: var(--ids-comp-card-slot-size-padding-x-dense);
3950
+ .ids-chip.ids-chip-filled.ids-chip-primary.ids-chip-disabled > .ids-icon {
3951
+ color: var(--ids-comp-chip-filled-color-fg-icon-primary-disabled);
3167
3952
  }
3168
- .ids-card.ids-card-dense.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child {
3169
- padding-left: var(--ids-comp-card-slot-size-padding-top-dense);
3953
+ .ids-chip.ids-chip-filled.ids-chip-primary.ids-chip-disabled > .ids-chip__label {
3954
+ color: var(--ids-comp-chip-filled-color-fg-label-primary-disabled);
3170
3955
  }
3171
- .ids-card.ids-card-dense.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child {
3172
- padding-right: var(--ids-comp-card-slot-size-padding-bottom-dense);
3956
+ .ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled) {
3957
+ background: var(--ids-comp-chip-filled-color-bg-secondary-default);
3958
+ border-color: var(--ids-comp-chip-filled-color-border-secondary-default);
3173
3959
  }
3174
- .ids-card.ids-card-dense.ids-card-horizontal .ids-card-section.ids-card-section-padded {
3175
- padding-top: var(--ids-comp-card-slot-size-padding-x-dense);
3176
- padding-bottom: var(--ids-comp-card-slot-size-padding-x-dense);
3960
+ .ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled) > .ids-icon {
3961
+ color: var(--ids-comp-chip-filled-color-fg-icon-secondary-default);
3177
3962
  }
3178
- .ids-card.ids-card-filled.ids-card-primary {
3179
- background-color: var(--ids-comp-card-filled-color-bg-primary-default);
3180
- border-color: var(--ids-comp-card-filled-color-border-primary-default);
3963
+ .ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled) > .ids-chip__label {
3964
+ color: var(--ids-comp-chip-filled-color-fg-label-secondary-default);
3181
3965
  }
3182
- .ids-card.ids-card-filled.ids-card-primary.ids-card-clickable:hover {
3183
- background-color: var(--ids-comp-card-filled-color-bg-primary-hovered);
3184
- border-color: var(--ids-comp-card-filled-color-border-primary-hovered);
3966
+ .ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:hover {
3967
+ background: var(--ids-comp-chip-filled-color-bg-secondary-hovered);
3968
+ border-color: var(--ids-comp-chip-filled-color-border-secondary-hovered);
3185
3969
  }
3186
- .ids-card.ids-card-filled.ids-card-primary.ids-card-clickable:focus, .ids-card.ids-card-filled.ids-card-primary.ids-card-clickable:focus-visible {
3187
- background-color: var(--ids-comp-card-filled-color-bg-primary-focused);
3188
- border-color: var(--ids-comp-card-filled-color-border-primary-focused);
3189
- outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
3970
+ .ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:hover > .ids-icon {
3971
+ color: var(--ids-comp-chip-filled-color-fg-icon-secondary-hovered);
3190
3972
  }
3191
- .ids-card.ids-card-filled.ids-card-primary.ids-card-clickable:active {
3192
- background-color: var(--ids-comp-card-filled-color-bg-primary-pressed);
3193
- border-color: var(--ids-comp-card-filled-color-border-primary-pressed);
3973
+ .ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:hover > .ids-chip__label {
3974
+ color: var(--ids-comp-chip-filled-color-fg-label-secondary-hovered);
3194
3975
  }
3195
- .ids-card.ids-card-filled.ids-card-primary.ids-card-clickable.ids-card-disabled {
3196
- background-color: var(--ids-comp-card-filled-color-bg-primary-disabled);
3197
- border-color: var(--ids-comp-card-filled-color-border-primary-disabled);
3976
+ .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 {
3977
+ background: var(--ids-comp-chip-filled-color-bg-secondary-focused);
3978
+ border-color: var(--ids-comp-chip-filled-color-border-secondary-focused);
3979
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
3198
3980
  }
3199
- .ids-card.ids-card-filled.ids-card-secondary {
3200
- background-color: var(--ids-comp-card-filled-color-bg-secondary-default);
3201
- border-color: var(--ids-comp-card-filled-color-border-secondary-default);
3981
+ .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 {
3982
+ color: var(--ids-comp-chip-filled-color-fg-icon-secondary-focused);
3202
3983
  }
3203
- .ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable:hover {
3204
- background-color: var(--ids-comp-card-filled-color-bg-secondary-hovered);
3205
- border-color: var(--ids-comp-card-filled-color-border-secondary-hovered);
3984
+ .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 {
3985
+ color: var(--ids-comp-chip-filled-color-fg-label-secondary-focused);
3206
3986
  }
3207
- .ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable:focus, .ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable:focus-visible {
3208
- background-color: var(--ids-comp-card-filled-color-bg-secondary-focused);
3209
- border-color: var(--ids-comp-card-filled-color-border-secondary-focused);
3210
- outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
3987
+ .ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:active {
3988
+ background: var(--ids-comp-chip-filled-color-bg-secondary-pressed);
3989
+ border-color: var(--ids-comp-chip-filled-color-border-secondary-pressed);
3211
3990
  }
3212
- .ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable:active {
3213
- background-color: var(--ids-comp-card-filled-color-bg-secondary-pressed);
3214
- border-color: var(--ids-comp-card-filled-color-border-secondary-pressed);
3991
+ .ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:active > .ids-icon {
3992
+ color: var(--ids-comp-chip-filled-color-fg-icon-secondary-pressed);
3215
3993
  }
3216
- .ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable.ids-card-disabled {
3217
- background-color: var(--ids-comp-card-filled-color-bg-secondary-disabled);
3218
- border-color: var(--ids-comp-card-filled-color-border-secondary-disabled);
3994
+ .ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:active > .ids-chip__label {
3995
+ color: var(--ids-comp-chip-filled-color-fg-label-secondary-pressed);
3219
3996
  }
3220
- .ids-card.ids-card-filled.ids-card-brand {
3221
- background-color: var(--ids-comp-card-filled-color-bg-brand-default);
3222
- border-color: var(--ids-comp-card-filled-color-border-brand-default);
3997
+ .ids-chip.ids-chip-filled.ids-chip-secondary.ids-chip-disabled {
3998
+ background: var(--ids-comp-chip-filled-color-bg-secondary-disabled);
3999
+ border-color: var(--ids-comp-chip-filled-color-border-secondary-disabled);
3223
4000
  }
3224
- .ids-card.ids-card-filled.ids-card-brand.ids-card-clickable:hover {
3225
- background-color: var(--ids-comp-card-filled-color-bg-brand-hovered);
3226
- border-color: var(--ids-comp-card-filled-color-border-brand-hovered);
4001
+ .ids-chip.ids-chip-filled.ids-chip-secondary.ids-chip-disabled > .ids-icon {
4002
+ color: var(--ids-comp-chip-filled-color-fg-icon-secondary-disabled);
3227
4003
  }
3228
- .ids-card.ids-card-filled.ids-card-brand.ids-card-clickable:focus, .ids-card.ids-card-filled.ids-card-brand.ids-card-clickable:focus-visible {
3229
- background-color: var(--ids-comp-card-filled-color-bg-brand-focused);
3230
- border-color: var(--ids-comp-card-filled-color-border-brand-focused);
3231
- outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
4004
+ .ids-chip.ids-chip-filled.ids-chip-secondary.ids-chip-disabled > .ids-chip__label {
4005
+ color: var(--ids-comp-chip-filled-color-fg-label-secondary-disabled);
3232
4006
  }
3233
- .ids-card.ids-card-filled.ids-card-brand.ids-card-clickable:active {
3234
- background-color: var(--ids-comp-card-filled-color-bg-brand-pressed);
3235
- border-color: var(--ids-comp-card-filled-color-border-brand-pressed);
4007
+ .ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled) {
4008
+ background: var(--ids-comp-chip-filled-color-bg-surface-default);
4009
+ border-color: var(--ids-comp-chip-filled-color-border-surface-default);
3236
4010
  }
3237
- .ids-card.ids-card-filled.ids-card-brand.ids-card-clickable.ids-card-disabled {
3238
- background-color: var(--ids-comp-card-filled-color-bg-brand-disabled);
3239
- border-color: var(--ids-comp-card-filled-color-border-brand-disabled);
4011
+ .ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled) > .ids-icon {
4012
+ color: var(--ids-comp-chip-filled-color-fg-icon-surface-default);
3240
4013
  }
3241
- .ids-card.ids-card-filled.ids-card-error {
3242
- background-color: var(--ids-comp-card-filled-color-bg-error-default);
3243
- border-color: var(--ids-comp-card-filled-color-border-error-default);
4014
+ .ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled) > .ids-chip__label {
4015
+ color: var(--ids-comp-chip-filled-color-fg-label-surface-default);
3244
4016
  }
3245
- .ids-card.ids-card-filled.ids-card-error.ids-card-clickable:hover {
3246
- background-color: var(--ids-comp-card-filled-color-bg-error-hovered);
3247
- border-color: var(--ids-comp-card-filled-color-border-error-hovered);
4017
+ .ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:hover {
4018
+ background: var(--ids-comp-chip-filled-color-bg-surface-hovered);
4019
+ border-color: var(--ids-comp-chip-filled-color-border-surface-hovered);
3248
4020
  }
3249
- .ids-card.ids-card-filled.ids-card-error.ids-card-clickable:focus, .ids-card.ids-card-filled.ids-card-error.ids-card-clickable:focus-visible {
3250
- background-color: var(--ids-comp-card-filled-color-bg-error-focused);
3251
- border-color: var(--ids-comp-card-filled-color-border-error-focused);
3252
- outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
4021
+ .ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:hover > .ids-icon {
4022
+ color: var(--ids-comp-chip-filled-color-fg-icon-surface-hovered);
3253
4023
  }
3254
- .ids-card.ids-card-filled.ids-card-error.ids-card-clickable:active {
3255
- background-color: var(--ids-comp-card-filled-color-bg-error-pressed);
3256
- border-color: var(--ids-comp-card-filled-color-border-error-pressed);
4024
+ .ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:hover > .ids-chip__label {
4025
+ color: var(--ids-comp-chip-filled-color-fg-label-surface-hovered);
3257
4026
  }
3258
- .ids-card.ids-card-filled.ids-card-success {
3259
- background-color: var(--ids-comp-card-filled-color-bg-success-default);
3260
- border-color: var(--ids-comp-card-filled-color-border-success-default);
4027
+ .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 {
4028
+ background: var(--ids-comp-chip-filled-color-bg-surface-focused);
4029
+ border-color: var(--ids-comp-chip-filled-color-border-surface-focused);
4030
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
3261
4031
  }
3262
- .ids-card.ids-card-filled.ids-card-success.ids-card-clickable:hover {
3263
- background-color: var(--ids-comp-card-filled-color-bg-success-hovered);
3264
- border-color: var(--ids-comp-card-filled-color-border-success-hovered);
4032
+ .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 {
4033
+ color: var(--ids-comp-chip-filled-color-fg-icon-surface-focused);
3265
4034
  }
3266
- .ids-card.ids-card-filled.ids-card-success.ids-card-clickable:focus, .ids-card.ids-card-filled.ids-card-success.ids-card-clickable:focus-visible {
3267
- background-color: var(--ids-comp-card-filled-color-bg-success-focused);
3268
- border-color: var(--ids-comp-card-filled-color-border-success-focused);
3269
- outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
4035
+ .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 {
4036
+ color: var(--ids-comp-chip-filled-color-fg-label-surface-focused);
3270
4037
  }
3271
- .ids-card.ids-card-filled.ids-card-success.ids-card-clickable:active {
3272
- background-color: var(--ids-comp-card-filled-color-bg-success-pressed);
3273
- border-color: var(--ids-comp-card-filled-color-border-success-pressed);
4038
+ .ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:active {
4039
+ background: var(--ids-comp-chip-filled-color-bg-surface-pressed);
4040
+ border-color: var(--ids-comp-chip-filled-color-border-surface-pressed);
3274
4041
  }
3275
- .ids-card.ids-card-filled.ids-card-warning {
3276
- background-color: var(--ids-comp-card-filled-color-bg-warning-default);
3277
- border-color: var(--ids-comp-card-filled-color-border-warning-default);
4042
+ .ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:active > .ids-icon {
4043
+ color: var(--ids-comp-chip-filled-color-fg-icon-surface-pressed);
3278
4044
  }
3279
- .ids-card.ids-card-filled.ids-card-warning.ids-card-clickable:hover {
3280
- background-color: var(--ids-comp-card-filled-color-bg-warning-hovered);
3281
- border-color: var(--ids-comp-card-filled-color-border-warning-hovered);
4045
+ .ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:active > .ids-chip__label {
4046
+ color: var(--ids-comp-chip-filled-color-fg-label-surface-pressed);
3282
4047
  }
3283
- .ids-card.ids-card-filled.ids-card-warning.ids-card-clickable:focus, .ids-card.ids-card-filled.ids-card-warning.ids-card-clickable:focus-visible {
3284
- background-color: var(--ids-comp-card-filled-color-bg-warning-focused);
3285
- border-color: var(--ids-comp-card-filled-color-border-warning-focused);
3286
- outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
4048
+ .ids-chip.ids-chip-filled.ids-chip-surface.ids-chip-disabled {
4049
+ background: var(--ids-comp-chip-filled-color-bg-surface-disabled);
4050
+ border-color: var(--ids-comp-chip-filled-color-border-surface-disabled);
3287
4051
  }
3288
- .ids-card.ids-card-filled.ids-card-warning.ids-card-clickable:active {
3289
- background-color: var(--ids-comp-card-filled-color-bg-warning-pressed);
3290
- border-color: var(--ids-comp-card-filled-color-border-warning-pressed);
4052
+ .ids-chip.ids-chip-filled.ids-chip-surface.ids-chip-disabled > .ids-icon {
4053
+ color: var(--ids-comp-chip-filled-color-fg-icon-surface-disabled);
3291
4054
  }
3292
- .ids-card.ids-card-filled.ids-card-info {
3293
- background-color: var(--ids-comp-card-filled-color-bg-info-default);
3294
- border-color: var(--ids-comp-card-filled-color-border-info-default);
4055
+ .ids-chip.ids-chip-filled.ids-chip-surface.ids-chip-disabled > .ids-chip__label {
4056
+ color: var(--ids-comp-chip-filled-color-fg-label-surface-disabled);
3295
4057
  }
3296
- .ids-card.ids-card-filled.ids-card-info.ids-card-clickable:hover {
3297
- background-color: var(--ids-comp-card-filled-color-bg-info-hovered);
3298
- border-color: var(--ids-comp-card-filled-color-border-info-hovered);
4058
+ .ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled) {
4059
+ background: var(--ids-comp-chip-filled-color-bg-light-default);
4060
+ border-color: var(--ids-comp-chip-filled-color-border-light-default);
3299
4061
  }
3300
- .ids-card.ids-card-filled.ids-card-info.ids-card-clickable:focus, .ids-card.ids-card-filled.ids-card-info.ids-card-clickable:focus-visible {
3301
- background-color: var(--ids-comp-card-filled-color-bg-info-focused);
3302
- border-color: var(--ids-comp-card-filled-color-border-info-focused);
3303
- outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
4062
+ .ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled) > .ids-icon {
4063
+ color: var(--ids-comp-chip-filled-color-fg-icon-light-default);
3304
4064
  }
3305
- .ids-card.ids-card-filled.ids-card-info.ids-card-clickable:active {
3306
- background-color: var(--ids-comp-card-filled-color-bg-info-pressed);
3307
- border-color: var(--ids-comp-card-filled-color-border-info-pressed);
4065
+ .ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled) > .ids-chip__label {
4066
+ color: var(--ids-comp-chip-filled-color-fg-label-light-default);
3308
4067
  }
3309
- .ids-card.ids-card-filled.ids-card-light {
3310
- background-color: var(--ids-comp-card-filled-color-bg-light-default);
3311
- border-color: var(--ids-comp-card-filled-color-border-light-default);
4068
+ .ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:hover {
4069
+ background: var(--ids-comp-chip-filled-color-bg-light-hovered);
4070
+ border-color: var(--ids-comp-chip-filled-color-border-light-hovered);
3312
4071
  }
3313
- .ids-card.ids-card-filled.ids-card-light.ids-card-clickable:hover {
3314
- background-color: var(--ids-comp-card-filled-color-bg-light-hovered);
3315
- border-color: var(--ids-comp-card-filled-color-border-light-hovered);
4072
+ .ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:hover > .ids-icon {
4073
+ color: var(--ids-comp-chip-filled-color-fg-icon-light-hovered);
3316
4074
  }
3317
- .ids-card.ids-card-filled.ids-card-light.ids-card-clickable:focus, .ids-card.ids-card-filled.ids-card-light.ids-card-clickable:focus-visible {
3318
- background-color: var(--ids-comp-card-filled-color-bg-light-focused);
3319
- border-color: var(--ids-comp-card-filled-color-border-light-focused);
3320
- outline-color: var(--ids-comp-card-focused-outline-color-light-focused);
4075
+ .ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:hover > .ids-chip__label {
4076
+ color: var(--ids-comp-chip-filled-color-fg-label-light-hovered);
3321
4077
  }
3322
- .ids-card.ids-card-filled.ids-card-light.ids-card-clickable:active {
3323
- background-color: var(--ids-comp-card-filled-color-bg-light-pressed);
3324
- border-color: var(--ids-comp-card-filled-color-border-light-pressed);
4078
+ .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 {
4079
+ background: var(--ids-comp-chip-filled-color-bg-light-focused);
4080
+ border-color: var(--ids-comp-chip-filled-color-border-light-focused);
4081
+ outline-color: var(--ids-comp-button-focused-outline-color-light-focused);
3325
4082
  }
3326
- .ids-card.ids-card-filled.ids-card-light.ids-card-clickable.ids-card-disabled {
3327
- background-color: var(--ids-comp-card-filled-color-bg-light-disabled);
3328
- border-color: var(--ids-comp-card-filled-color-border-light-disabled);
4083
+ .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 {
4084
+ color: var(--ids-comp-chip-filled-color-fg-icon-light-focused);
3329
4085
  }
3330
- .ids-card.ids-card-filled.ids-card-dark {
3331
- background-color: var(--ids-comp-card-filled-color-bg-dark-default);
3332
- border-color: var(--ids-comp-card-filled-color-border-dark-default);
4086
+ .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 {
4087
+ color: var(--ids-comp-chip-filled-color-fg-label-light-focused);
3333
4088
  }
3334
- .ids-card.ids-card-filled.ids-card-dark.ids-card-clickable:hover {
3335
- background-color: var(--ids-comp-card-filled-color-bg-dark-hovered);
3336
- border-color: var(--ids-comp-card-filled-color-border-dark-hovered);
4089
+ .ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:active {
4090
+ background: var(--ids-comp-chip-filled-color-bg-light-pressed);
4091
+ border-color: var(--ids-comp-chip-filled-color-border-light-pressed);
3337
4092
  }
3338
- .ids-card.ids-card-filled.ids-card-dark.ids-card-clickable:focus, .ids-card.ids-card-filled.ids-card-dark.ids-card-clickable:focus-visible {
3339
- background-color: var(--ids-comp-card-filled-color-bg-dark-focused);
3340
- border-color: var(--ids-comp-card-filled-color-border-dark-focused);
3341
- outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
4093
+ .ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:active > .ids-icon {
4094
+ color: var(--ids-comp-chip-filled-color-fg-icon-light-pressed);
3342
4095
  }
3343
- .ids-card.ids-card-filled.ids-card-dark.ids-card-clickable:active {
3344
- background-color: var(--ids-comp-card-filled-color-bg-dark-pressed);
3345
- border-color: var(--ids-comp-card-filled-color-border-dark-pressed);
4096
+ .ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:active > .ids-chip__label {
4097
+ color: var(--ids-comp-chip-filled-color-fg-label-light-pressed);
3346
4098
  }
3347
- .ids-card.ids-card-filled.ids-card-dark.ids-card-clickable.ids-card-disabled {
3348
- background-color: var(--ids-comp-card-filled-color-bg-dark-disabled);
3349
- border-color: var(--ids-comp-card-filled-color-border-dark-disabled);
4099
+ .ids-chip.ids-chip-filled.ids-chip-light.ids-chip-disabled {
4100
+ background: var(--ids-comp-chip-filled-color-bg-light-disabled);
4101
+ border-color: var(--ids-comp-chip-filled-color-border-light-disabled);
3350
4102
  }
3351
- .ids-card.ids-card-filled.ids-card-surface {
3352
- background-color: var(--ids-comp-card-filled-color-bg-surface-default);
3353
- border-color: var(--ids-comp-card-filled-color-border-surface-default);
4103
+ .ids-chip.ids-chip-filled.ids-chip-light.ids-chip-disabled > .ids-icon {
4104
+ color: var(--ids-comp-chip-filled-color-fg-icon-light-disabled);
3354
4105
  }
3355
- .ids-card.ids-card-filled.ids-card-surface.ids-card-clickable:hover {
3356
- background-color: var(--ids-comp-card-filled-color-bg-surface-hovered);
3357
- border-color: var(--ids-comp-card-filled-color-border-surface-hovered);
4106
+ .ids-chip.ids-chip-filled.ids-chip-light.ids-chip-disabled > .ids-chip__label {
4107
+ color: var(--ids-comp-chip-filled-color-fg-label-light-disabled);
3358
4108
  }
3359
- .ids-card.ids-card-filled.ids-card-surface.ids-card-clickable:focus, .ids-card.ids-card-filled.ids-card-surface.ids-card-clickable:focus-visible {
3360
- background-color: var(--ids-comp-card-filled-color-bg-surface-focused);
3361
- border-color: var(--ids-comp-card-filled-color-border-surface-focused);
3362
- outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
4109
+ .ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled) {
4110
+ background: var(--ids-comp-chip-filled-color-bg-dark-default);
4111
+ border-color: var(--ids-comp-chip-filled-color-border-dark-default);
3363
4112
  }
3364
- .ids-card.ids-card-filled.ids-card-surface.ids-card-clickable:active {
3365
- background-color: var(--ids-comp-card-filled-color-bg-surface-pressed);
3366
- border-color: var(--ids-comp-card-filled-color-border-surface-pressed);
4113
+ .ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled) > .ids-icon {
4114
+ color: var(--ids-comp-chip-filled-color-fg-icon-dark-default);
3367
4115
  }
3368
- .ids-card.ids-card-filled.ids-card-surface.ids-card-clickable.ids-card-disabled {
3369
- background-color: var(--ids-comp-card-filled-color-bg-surface-disabled);
3370
- border-color: var(--ids-comp-card-filled-color-border-surface-disabled);
4116
+ .ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled) > .ids-chip__label {
4117
+ color: var(--ids-comp-chip-filled-color-fg-label-dark-default);
3371
4118
  }
3372
- .ids-card.ids-card-outlined.ids-card-primary {
3373
- background-color: var(--ids-comp-card-outlined-color-bg-primary-default);
3374
- border-color: var(--ids-comp-card-outlined-color-border-primary-default);
4119
+ .ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:hover {
4120
+ background: var(--ids-comp-chip-filled-color-bg-dark-hovered);
4121
+ border-color: var(--ids-comp-chip-filled-color-border-dark-hovered);
3375
4122
  }
3376
- .ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable:hover {
3377
- background-color: var(--ids-comp-card-outlined-color-bg-primary-hovered);
3378
- border-color: var(--ids-comp-card-outlined-color-border-primary-hovered);
4123
+ .ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:hover > .ids-icon {
4124
+ color: var(--ids-comp-chip-filled-color-fg-icon-dark-hovered);
3379
4125
  }
3380
- .ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable:focus, .ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable:focus-visible {
3381
- background-color: var(--ids-comp-card-outlined-color-bg-primary-focused);
3382
- border-color: var(--ids-comp-card-outlined-color-border-primary-focused);
3383
- outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
4126
+ .ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:hover > .ids-chip__label {
4127
+ color: var(--ids-comp-chip-filled-color-fg-label-dark-hovered);
3384
4128
  }
3385
- .ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable:active {
3386
- background-color: var(--ids-comp-card-outlined-color-bg-primary-pressed);
3387
- border-color: var(--ids-comp-card-outlined-color-border-primary-pressed);
4129
+ .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 {
4130
+ background: var(--ids-comp-chip-filled-color-bg-dark-focused);
4131
+ border-color: var(--ids-comp-chip-filled-color-border-dark-focused);
4132
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
3388
4133
  }
3389
- .ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable.ids-card-disabled {
3390
- background-color: var(--ids-comp-card-outlined-color-bg-primary-disabled);
3391
- border-color: var(--ids-comp-card-outlined-color-border-primary-disabled);
4134
+ .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 {
4135
+ color: var(--ids-comp-chip-filled-color-fg-icon-dark-focused);
3392
4136
  }
3393
- .ids-card.ids-card-outlined.ids-card-secondary {
3394
- background-color: var(--ids-comp-card-outlined-color-bg-secondary-default);
3395
- border-color: var(--ids-comp-card-outlined-color-border-secondary-default);
4137
+ .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 {
4138
+ color: var(--ids-comp-chip-filled-color-fg-label-dark-focused);
3396
4139
  }
3397
- .ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable:hover {
3398
- background-color: var(--ids-comp-card-outlined-color-bg-secondary-hovered);
3399
- border-color: var(--ids-comp-card-outlined-color-border-secondary-hovered);
4140
+ .ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:active {
4141
+ background: var(--ids-comp-chip-filled-color-bg-dark-pressed);
4142
+ border-color: var(--ids-comp-chip-filled-color-border-dark-pressed);
3400
4143
  }
3401
- .ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable:focus, .ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable:focus-visible {
3402
- background-color: var(--ids-comp-card-outlined-color-bg-secondary-focused);
3403
- border-color: var(--ids-comp-card-outlined-color-border-secondary-focused);
3404
- outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
4144
+ .ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:active > .ids-icon {
4145
+ color: var(--ids-comp-chip-filled-color-fg-icon-dark-pressed);
3405
4146
  }
3406
- .ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable:active {
3407
- background-color: var(--ids-comp-card-outlined-color-bg-secondary-pressed);
3408
- border-color: var(--ids-comp-card-outlined-color-border-secondary-pressed);
4147
+ .ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:active > .ids-chip__label {
4148
+ color: var(--ids-comp-chip-filled-color-fg-label-dark-pressed);
3409
4149
  }
3410
- .ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable.ids-card-disabled {
3411
- background-color: var(--ids-comp-card-outlined-color-bg-secondary-disabled);
3412
- border-color: var(--ids-comp-card-outlined-color-border-secondary-disabled);
4150
+ .ids-chip.ids-chip-filled.ids-chip-dark.ids-chip-disabled {
4151
+ background: var(--ids-comp-chip-filled-color-bg-dark-disabled);
4152
+ border-color: var(--ids-comp-chip-filled-color-border-dark-disabled);
3413
4153
  }
3414
- .ids-card.ids-card-outlined.ids-card-brand {
3415
- background-color: var(--ids-comp-card-outlined-color-bg-brand-default);
3416
- border-color: var(--ids-comp-card-outlined-color-border-brand-default);
4154
+ .ids-chip.ids-chip-filled.ids-chip-dark.ids-chip-disabled > .ids-icon {
4155
+ color: var(--ids-comp-chip-filled-color-fg-icon-dark-disabled);
3417
4156
  }
3418
- .ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable:hover {
3419
- background-color: var(--ids-comp-card-outlined-color-bg-brand-hovered);
3420
- border-color: var(--ids-comp-card-outlined-color-border-brand-hovered);
4157
+ .ids-chip.ids-chip-filled.ids-chip-dark.ids-chip-disabled > .ids-chip__label {
4158
+ color: var(--ids-comp-chip-filled-color-fg-label-dark-disabled);
3421
4159
  }
3422
- .ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable:focus, .ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable:focus-visible {
3423
- background-color: var(--ids-comp-card-outlined-color-bg-brand-focused);
3424
- border-color: var(--ids-comp-card-outlined-color-border-brand-focused);
3425
- outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
4160
+ .ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled) {
4161
+ background: var(--ids-comp-chip-outlined-color-bg-primary-default);
4162
+ border-color: var(--ids-comp-chip-outlined-color-border-primary-default);
3426
4163
  }
3427
- .ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable:active {
3428
- background-color: var(--ids-comp-card-outlined-color-bg-brand-pressed);
3429
- border-color: var(--ids-comp-card-outlined-color-border-brand-pressed);
4164
+ .ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled) > .ids-icon {
4165
+ color: var(--ids-comp-chip-outlined-color-fg-icon-primary-default);
3430
4166
  }
3431
- .ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable.ids-card-disabled {
3432
- background-color: var(--ids-comp-card-outlined-color-bg-brand-disabled);
3433
- border-color: var(--ids-comp-card-outlined-color-border-brand-disabled);
4167
+ .ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled) > .ids-chip__label {
4168
+ color: var(--ids-comp-chip-outlined-color-fg-label-primary-default);
3434
4169
  }
3435
- .ids-card.ids-card-outlined.ids-card-error {
3436
- background-color: var(--ids-comp-card-outlined-color-bg-error-default);
3437
- border-color: var(--ids-comp-card-outlined-color-border-error-default);
4170
+ .ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:hover {
4171
+ background: var(--ids-comp-chip-outlined-color-bg-primary-hovered);
4172
+ border-color: var(--ids-comp-chip-outlined-color-border-primary-hovered);
3438
4173
  }
3439
- .ids-card.ids-card-outlined.ids-card-error.ids-card-clickable:hover {
3440
- background-color: var(--ids-comp-card-outlined-color-bg-error-hovered);
3441
- border-color: var(--ids-comp-card-outlined-color-border-error-hovered);
4174
+ .ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:hover > .ids-icon {
4175
+ color: var(--ids-comp-chip-outlined-color-fg-icon-primary-hovered);
3442
4176
  }
3443
- .ids-card.ids-card-outlined.ids-card-error.ids-card-clickable:focus, .ids-card.ids-card-outlined.ids-card-error.ids-card-clickable:focus-visible {
3444
- background-color: var(--ids-comp-card-outlined-color-bg-error-focused);
3445
- border-color: var(--ids-comp-card-outlined-color-border-error-focused);
3446
- outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
4177
+ .ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:hover > .ids-chip__label {
4178
+ color: var(--ids-comp-chip-outlined-color-fg-label-primary-hovered);
3447
4179
  }
3448
- .ids-card.ids-card-outlined.ids-card-error.ids-card-clickable:active {
3449
- background-color: var(--ids-comp-card-outlined-color-bg-error-pressed);
3450
- border-color: var(--ids-comp-card-outlined-color-border-error-pressed);
4180
+ .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 {
4181
+ background: var(--ids-comp-chip-outlined-color-bg-primary-focused);
4182
+ border-color: var(--ids-comp-chip-outlined-color-border-primary-focused);
4183
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
3451
4184
  }
3452
- .ids-card.ids-card-outlined.ids-card-success {
3453
- background-color: var(--ids-comp-card-outlined-color-bg-success-default);
3454
- border-color: var(--ids-comp-card-outlined-color-border-success-default);
4185
+ .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 {
4186
+ color: var(--ids-comp-chip-outlined-color-fg-icon-primary-focused);
3455
4187
  }
3456
- .ids-card.ids-card-outlined.ids-card-success.ids-card-clickable:hover {
3457
- background-color: var(--ids-comp-card-outlined-color-bg-success-hovered);
3458
- border-color: var(--ids-comp-card-outlined-color-border-success-hovered);
4188
+ .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 {
4189
+ color: var(--ids-comp-chip-outlined-color-fg-label-primary-focused);
3459
4190
  }
3460
- .ids-card.ids-card-outlined.ids-card-success.ids-card-clickable:focus, .ids-card.ids-card-outlined.ids-card-success.ids-card-clickable:focus-visible {
3461
- background-color: var(--ids-comp-card-outlined-color-bg-success-focused);
3462
- border-color: var(--ids-comp-card-outlined-color-border-success-focused);
3463
- outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
4191
+ .ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:active {
4192
+ background: var(--ids-comp-chip-outlined-color-bg-primary-pressed);
4193
+ border-color: var(--ids-comp-chip-outlined-color-border-primary-pressed);
3464
4194
  }
3465
- .ids-card.ids-card-outlined.ids-card-success.ids-card-clickable:active {
3466
- background-color: var(--ids-comp-card-outlined-color-bg-success-pressed);
3467
- border-color: var(--ids-comp-card-outlined-color-border-success-pressed);
4195
+ .ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:active > .ids-icon {
4196
+ color: var(--ids-comp-chip-outlined-color-fg-icon-primary-pressed);
3468
4197
  }
3469
- .ids-card.ids-card-outlined.ids-card-warning {
3470
- background-color: var(--ids-comp-card-outlined-color-bg-warning-default);
3471
- border-color: var(--ids-comp-card-outlined-color-border-warning-default);
4198
+ .ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:active > .ids-chip__label {
4199
+ color: var(--ids-comp-chip-outlined-color-fg-label-primary-pressed);
3472
4200
  }
3473
- .ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable:hover {
3474
- background-color: var(--ids-comp-card-outlined-color-bg-warning-hovered);
3475
- border-color: var(--ids-comp-card-outlined-color-border-warning-hovered);
4201
+ .ids-chip.ids-chip-outlined.ids-chip-primary.ids-chip-disabled {
4202
+ background: var(--ids-comp-chip-outlined-color-bg-primary-disabled);
4203
+ border-color: var(--ids-comp-chip-outlined-color-border-primary-disabled);
3476
4204
  }
3477
- .ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable:focus, .ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable:focus-visible {
3478
- background-color: var(--ids-comp-card-outlined-color-bg-warning-focused);
3479
- border-color: var(--ids-comp-card-outlined-color-border-warning-focused);
3480
- outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
4205
+ .ids-chip.ids-chip-outlined.ids-chip-primary.ids-chip-disabled > .ids-icon {
4206
+ color: var(--ids-comp-chip-outlined-color-fg-icon-primary-disabled);
3481
4207
  }
3482
- .ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable:active {
3483
- background-color: var(--ids-comp-card-outlined-color-bg-warning-pressed);
3484
- border-color: var(--ids-comp-card-outlined-color-border-warning-pressed);
4208
+ .ids-chip.ids-chip-outlined.ids-chip-primary.ids-chip-disabled > .ids-chip__label {
4209
+ color: var(--ids-comp-chip-outlined-color-fg-label-primary-disabled);
3485
4210
  }
3486
- .ids-card.ids-card-outlined.ids-card-info {
3487
- background-color: var(--ids-comp-card-outlined-color-bg-info-default);
3488
- border-color: var(--ids-comp-card-outlined-color-border-info-default);
4211
+ .ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled) {
4212
+ background: var(--ids-comp-chip-outlined-color-bg-secondary-default);
4213
+ border-color: var(--ids-comp-chip-outlined-color-border-secondary-default);
3489
4214
  }
3490
- .ids-card.ids-card-outlined.ids-card-info.ids-card-clickable:hover {
3491
- background-color: var(--ids-comp-card-outlined-color-bg-info-hovered);
3492
- border-color: var(--ids-comp-card-outlined-color-border-info-hovered);
4215
+ .ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled) > .ids-icon {
4216
+ color: var(--ids-comp-chip-outlined-color-fg-icon-secondary-default);
3493
4217
  }
3494
- .ids-card.ids-card-outlined.ids-card-info.ids-card-clickable:focus, .ids-card.ids-card-outlined.ids-card-info.ids-card-clickable:focus-visible {
3495
- background-color: var(--ids-comp-card-outlined-color-bg-info-focused);
3496
- border-color: var(--ids-comp-card-outlined-color-border-info-focused);
3497
- outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
4218
+ .ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled) > .ids-chip__label {
4219
+ color: var(--ids-comp-chip-outlined-color-fg-label-secondary-default);
3498
4220
  }
3499
- .ids-card.ids-card-outlined.ids-card-info.ids-card-clickable:active {
3500
- background-color: var(--ids-comp-card-outlined-color-bg-info-pressed);
3501
- border-color: var(--ids-comp-card-outlined-color-border-info-pressed);
4221
+ .ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:hover {
4222
+ background: var(--ids-comp-chip-outlined-color-bg-secondary-hovered);
4223
+ border-color: var(--ids-comp-chip-outlined-color-border-secondary-hovered);
3502
4224
  }
3503
- .ids-card.ids-card-outlined.ids-card-light {
3504
- background-color: var(--ids-comp-card-outlined-color-bg-light-default);
3505
- border-color: var(--ids-comp-card-outlined-color-border-light-default);
4225
+ .ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:hover > .ids-icon {
4226
+ color: var(--ids-comp-chip-outlined-color-fg-icon-secondary-hovered);
3506
4227
  }
3507
- .ids-card.ids-card-outlined.ids-card-light.ids-card-clickable:hover {
3508
- background-color: var(--ids-comp-card-outlined-color-bg-light-hovered);
3509
- border-color: var(--ids-comp-card-outlined-color-border-light-hovered);
4228
+ .ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:hover > .ids-chip__label {
4229
+ color: var(--ids-comp-chip-outlined-color-fg-label-secondary-hovered);
3510
4230
  }
3511
- .ids-card.ids-card-outlined.ids-card-light.ids-card-clickable:focus, .ids-card.ids-card-outlined.ids-card-light.ids-card-clickable:focus-visible {
3512
- background-color: var(--ids-comp-card-outlined-color-bg-light-focused);
3513
- border-color: var(--ids-comp-card-outlined-color-border-light-focused);
3514
- outline-color: var(--ids-comp-card-focused-outline-color-light-focused);
4231
+ .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 {
4232
+ background: var(--ids-comp-chip-outlined-color-bg-secondary-focused);
4233
+ border-color: var(--ids-comp-chip-outlined-color-border-secondary-focused);
4234
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
3515
4235
  }
3516
- .ids-card.ids-card-outlined.ids-card-light.ids-card-clickable:active {
3517
- background-color: var(--ids-comp-card-outlined-color-bg-light-pressed);
3518
- border-color: var(--ids-comp-card-outlined-color-border-light-pressed);
4236
+ .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 {
4237
+ color: var(--ids-comp-chip-outlined-color-fg-icon-secondary-focused);
3519
4238
  }
3520
- .ids-card.ids-card-outlined.ids-card-light.ids-card-clickable.ids-card-disabled {
3521
- background-color: var(--ids-comp-card-outlined-color-bg-light-disabled);
3522
- border-color: var(--ids-comp-card-outlined-color-border-light-disabled);
4239
+ .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 {
4240
+ color: var(--ids-comp-chip-outlined-color-fg-label-secondary-focused);
3523
4241
  }
3524
- .ids-card.ids-card-outlined.ids-card-dark {
3525
- background-color: var(--ids-comp-card-outlined-color-bg-dark-default);
3526
- border-color: var(--ids-comp-card-outlined-color-border-dark-default);
4242
+ .ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:active {
4243
+ background: var(--ids-comp-chip-outlined-color-bg-secondary-pressed);
4244
+ border-color: var(--ids-comp-chip-outlined-color-border-secondary-pressed);
3527
4245
  }
3528
- .ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable:hover {
3529
- background-color: var(--ids-comp-card-outlined-color-bg-dark-hovered);
3530
- border-color: var(--ids-comp-card-outlined-color-border-dark-hovered);
4246
+ .ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:active > .ids-icon {
4247
+ color: var(--ids-comp-chip-outlined-color-fg-icon-secondary-pressed);
3531
4248
  }
3532
- .ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable:focus, .ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable:focus-visible {
3533
- background-color: var(--ids-comp-card-outlined-color-bg-dark-focused);
3534
- border-color: var(--ids-comp-card-outlined-color-border-dark-focused);
3535
- outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
4249
+ .ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:active > .ids-chip__label {
4250
+ color: var(--ids-comp-chip-outlined-color-fg-label-secondary-pressed);
3536
4251
  }
3537
- .ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable:active {
3538
- background-color: var(--ids-comp-card-outlined-color-bg-dark-pressed);
3539
- border-color: var(--ids-comp-card-outlined-color-border-dark-pressed);
4252
+ .ids-chip.ids-chip-outlined.ids-chip-secondary.ids-chip-disabled {
4253
+ background: var(--ids-comp-chip-outlined-color-bg-secondary-disabled);
4254
+ border-color: var(--ids-comp-chip-outlined-color-border-secondary-disabled);
3540
4255
  }
3541
- .ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable.ids-card-disabled {
3542
- background-color: var(--ids-comp-card-outlined-color-bg-dark-disabled);
3543
- border-color: var(--ids-comp-card-outlined-color-border-dark-disabled);
4256
+ .ids-chip.ids-chip-outlined.ids-chip-secondary.ids-chip-disabled > .ids-icon {
4257
+ color: var(--ids-comp-chip-outlined-color-fg-icon-secondary-disabled);
3544
4258
  }
3545
- .ids-card.ids-card-outlined.ids-card-surface {
3546
- background-color: var(--ids-comp-card-outlined-color-bg-surface-default);
3547
- border-color: var(--ids-comp-card-outlined-color-border-surface-default);
4259
+ .ids-chip.ids-chip-outlined.ids-chip-secondary.ids-chip-disabled > .ids-chip__label {
4260
+ color: var(--ids-comp-chip-outlined-color-fg-label-secondary-disabled);
3548
4261
  }
3549
- .ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable:hover {
3550
- background-color: var(--ids-comp-card-outlined-color-bg-surface-hovered);
3551
- border-color: var(--ids-comp-card-outlined-color-border-surface-hovered);
4262
+ .ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled) {
4263
+ background: var(--ids-comp-chip-outlined-color-bg-surface-default);
4264
+ border-color: var(--ids-comp-chip-outlined-color-border-surface-default);
3552
4265
  }
3553
- .ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable:focus, .ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable:focus-visible {
3554
- background-color: var(--ids-comp-card-outlined-color-bg-surface-focused);
3555
- border-color: var(--ids-comp-card-outlined-color-border-surface-focused);
3556
- outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
4266
+ .ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled) > .ids-icon {
4267
+ color: var(--ids-comp-chip-outlined-color-fg-icon-surface-default);
3557
4268
  }
3558
- .ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable:active {
3559
- background-color: var(--ids-comp-card-outlined-color-bg-surface-pressed);
3560
- border-color: var(--ids-comp-card-outlined-color-border-surface-pressed);
4269
+ .ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled) > .ids-chip__label {
4270
+ color: var(--ids-comp-chip-outlined-color-fg-label-surface-default);
3561
4271
  }
3562
- .ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable.ids-card-disabled {
3563
- background-color: var(--ids-comp-card-outlined-color-bg-surface-disabled);
3564
- border-color: var(--ids-comp-card-outlined-color-border-surface-disabled);
4272
+ .ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)[role=button]:hover {
4273
+ background: var(--ids-comp-chip-outlined-color-bg-surface-hovered);
4274
+ border-color: var(--ids-comp-chip-outlined-color-border-surface-hovered);
3565
4275
  }
3566
- .ids-card.ids-card-elevated.ids-card-primary {
3567
- background-color: var(--ids-comp-card-elevated-color-bg-primary-default);
3568
- border-color: var(--ids-comp-card-elevated-color-border-primary-default);
4276
+ .ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)[role=button]:hover > .ids-icon {
4277
+ color: var(--ids-comp-chip-outlined-color-fg-icon-surface-hovered);
3569
4278
  }
3570
- .ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable:hover {
3571
- background-color: var(--ids-comp-card-elevated-color-bg-primary-hovered);
3572
- border-color: var(--ids-comp-card-elevated-color-border-primary-hovered);
4279
+ .ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)[role=button]:hover > .ids-chip__label {
4280
+ color: var(--ids-comp-chip-outlined-color-fg-label-surface-hovered);
3573
4281
  }
3574
- .ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable:focus, .ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable:focus-visible {
3575
- background-color: var(--ids-comp-card-elevated-color-bg-primary-focused);
3576
- border-color: var(--ids-comp-card-elevated-color-border-primary-focused);
3577
- outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
4282
+ .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 {
4283
+ background: var(--ids-comp-chip-outlined-color-bg-surface-focused);
4284
+ border-color: var(--ids-comp-chip-outlined-color-border-surface-focused);
4285
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
3578
4286
  }
3579
- .ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable:active {
3580
- background-color: var(--ids-comp-card-elevated-color-bg-primary-pressed);
3581
- border-color: var(--ids-comp-card-elevated-color-border-primary-pressed);
4287
+ .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 {
4288
+ color: var(--ids-comp-chip-outlined-color-fg-icon-surface-focused);
3582
4289
  }
3583
- .ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable.ids-card-disabled {
3584
- background-color: var(--ids-comp-card-elevated-color-bg-primary-disabled);
3585
- border-color: var(--ids-comp-card-elevated-color-border-primary-disabled);
4290
+ .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 {
4291
+ color: var(--ids-comp-chip-outlined-color-fg-label-surface-focused);
3586
4292
  }
3587
- .ids-card.ids-card-elevated.ids-card-secondary {
3588
- background-color: var(--ids-comp-card-elevated-color-bg-secondary-default);
3589
- border-color: var(--ids-comp-card-elevated-color-border-secondary-default);
4293
+ .ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)[role=button]:active {
4294
+ background: var(--ids-comp-chip-outlined-color-bg-surface-pressed);
4295
+ border-color: var(--ids-comp-chip-outlined-color-border-surface-pressed);
3590
4296
  }
3591
- .ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable:hover {
3592
- background-color: var(--ids-comp-card-elevated-color-bg-secondary-hovered);
3593
- border-color: var(--ids-comp-card-elevated-color-border-secondary-hovered);
4297
+ .ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)[role=button]:active > .ids-icon {
4298
+ color: var(--ids-comp-chip-outlined-color-fg-icon-surface-pressed);
3594
4299
  }
3595
- .ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable:focus, .ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable:focus-visible {
3596
- background-color: var(--ids-comp-card-elevated-color-bg-secondary-focused);
3597
- border-color: var(--ids-comp-card-elevated-color-border-secondary-focused);
3598
- outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
4300
+ .ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)[role=button]:active > .ids-chip__label {
4301
+ color: var(--ids-comp-chip-outlined-color-fg-label-surface-pressed);
3599
4302
  }
3600
- .ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable:active {
3601
- background-color: var(--ids-comp-card-elevated-color-bg-secondary-pressed);
3602
- border-color: var(--ids-comp-card-elevated-color-border-secondary-pressed);
4303
+ .ids-chip.ids-chip-outlined.ids-chip-surface.ids-chip-disabled {
4304
+ background: var(--ids-comp-chip-outlined-color-bg-surface-disabled);
4305
+ border-color: var(--ids-comp-chip-outlined-color-border-surface-disabled);
3603
4306
  }
3604
- .ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable.ids-card-disabled {
3605
- background-color: var(--ids-comp-card-elevated-color-bg-secondary-disabled);
3606
- border-color: var(--ids-comp-card-elevated-color-border-secondary-disabled);
4307
+ .ids-chip.ids-chip-outlined.ids-chip-surface.ids-chip-disabled > .ids-icon {
4308
+ color: var(--ids-comp-chip-outlined-color-fg-icon-surface-disabled);
3607
4309
  }
3608
- .ids-card.ids-card-elevated.ids-card-brand {
3609
- background-color: var(--ids-comp-card-elevated-color-bg-brand-default);
3610
- border-color: var(--ids-comp-card-elevated-color-border-brand-default);
4310
+ .ids-chip.ids-chip-outlined.ids-chip-surface.ids-chip-disabled > .ids-chip__label {
4311
+ color: var(--ids-comp-chip-outlined-color-fg-label-surface-disabled);
3611
4312
  }
3612
- .ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable:hover {
3613
- background-color: var(--ids-comp-card-elevated-color-bg-brand-hovered);
3614
- border-color: var(--ids-comp-card-elevated-color-border-brand-hovered);
4313
+ .ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled) {
4314
+ background: var(--ids-comp-chip-outlined-color-bg-light-default);
4315
+ border-color: var(--ids-comp-chip-outlined-color-border-light-default);
3615
4316
  }
3616
- .ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable:focus, .ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable:focus-visible {
3617
- background-color: var(--ids-comp-card-elevated-color-bg-brand-focused);
3618
- border-color: var(--ids-comp-card-elevated-color-border-brand-focused);
3619
- outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
4317
+ .ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled) > .ids-icon {
4318
+ color: var(--ids-comp-chip-outlined-color-fg-icon-light-default);
3620
4319
  }
3621
- .ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable:active {
3622
- background-color: var(--ids-comp-card-elevated-color-bg-brand-pressed);
3623
- border-color: var(--ids-comp-card-elevated-color-border-brand-pressed);
4320
+ .ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled) > .ids-chip__label {
4321
+ color: var(--ids-comp-chip-outlined-color-fg-label-light-default);
3624
4322
  }
3625
- .ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable.ids-card-disabled {
3626
- background-color: var(--ids-comp-card-elevated-color-bg-brand-disabled);
3627
- border-color: var(--ids-comp-card-elevated-color-border-brand-disabled);
4323
+ .ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)[role=button]:hover {
4324
+ background: var(--ids-comp-chip-outlined-color-bg-light-hovered);
4325
+ border-color: var(--ids-comp-chip-outlined-color-border-light-hovered);
3628
4326
  }
3629
- .ids-card.ids-card-elevated.ids-card-error {
3630
- background-color: var(--ids-comp-card-elevated-color-bg-error-default);
3631
- border-color: var(--ids-comp-card-elevated-color-border-error-default);
4327
+ .ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)[role=button]:hover > .ids-icon {
4328
+ color: var(--ids-comp-chip-outlined-color-fg-icon-light-hovered);
3632
4329
  }
3633
- .ids-card.ids-card-elevated.ids-card-error.ids-card-clickable:hover {
3634
- background-color: var(--ids-comp-card-elevated-color-bg-error-hovered);
3635
- border-color: var(--ids-comp-card-elevated-color-border-error-hovered);
4330
+ .ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)[role=button]:hover > .ids-chip__label {
4331
+ color: var(--ids-comp-chip-outlined-color-fg-label-light-hovered);
3636
4332
  }
3637
- .ids-card.ids-card-elevated.ids-card-error.ids-card-clickable:focus, .ids-card.ids-card-elevated.ids-card-error.ids-card-clickable:focus-visible {
3638
- background-color: var(--ids-comp-card-elevated-color-bg-error-focused);
3639
- border-color: var(--ids-comp-card-elevated-color-border-error-focused);
3640
- outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
4333
+ .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 {
4334
+ background: var(--ids-comp-chip-outlined-color-bg-light-focused);
4335
+ border-color: var(--ids-comp-chip-outlined-color-border-light-focused);
4336
+ outline-color: var(--ids-comp-button-focused-outline-color-light-focused);
3641
4337
  }
3642
- .ids-card.ids-card-elevated.ids-card-error.ids-card-clickable:active {
3643
- background-color: var(--ids-comp-card-elevated-color-bg-error-pressed);
3644
- border-color: var(--ids-comp-card-elevated-color-border-error-pressed);
4338
+ .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 {
4339
+ color: var(--ids-comp-chip-outlined-color-fg-icon-light-focused);
3645
4340
  }
3646
- .ids-card.ids-card-elevated.ids-card-success {
3647
- background-color: var(--ids-comp-card-elevated-color-bg-success-default);
3648
- border-color: var(--ids-comp-card-elevated-color-border-success-default);
4341
+ .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 {
4342
+ color: var(--ids-comp-chip-outlined-color-fg-label-light-focused);
3649
4343
  }
3650
- .ids-card.ids-card-elevated.ids-card-success.ids-card-clickable:hover {
3651
- background-color: var(--ids-comp-card-elevated-color-bg-success-hovered);
3652
- border-color: var(--ids-comp-card-elevated-color-border-success-hovered);
4344
+ .ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)[role=button]:active {
4345
+ background: var(--ids-comp-chip-outlined-color-bg-light-pressed);
4346
+ border-color: var(--ids-comp-chip-outlined-color-border-light-pressed);
3653
4347
  }
3654
- .ids-card.ids-card-elevated.ids-card-success.ids-card-clickable:focus, .ids-card.ids-card-elevated.ids-card-success.ids-card-clickable:focus-visible {
3655
- background-color: var(--ids-comp-card-elevated-color-bg-success-focused);
3656
- border-color: var(--ids-comp-card-elevated-color-border-success-focused);
3657
- outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
4348
+ .ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)[role=button]:active > .ids-icon {
4349
+ color: var(--ids-comp-chip-outlined-color-fg-icon-light-pressed);
3658
4350
  }
3659
- .ids-card.ids-card-elevated.ids-card-success.ids-card-clickable:active {
3660
- background-color: var(--ids-comp-card-elevated-color-bg-success-pressed);
3661
- border-color: var(--ids-comp-card-elevated-color-border-success-pressed);
4351
+ .ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)[role=button]:active > .ids-chip__label {
4352
+ color: var(--ids-comp-chip-outlined-color-fg-label-light-pressed);
3662
4353
  }
3663
- .ids-card.ids-card-elevated.ids-card-warning {
3664
- background-color: var(--ids-comp-card-elevated-color-bg-warning-default);
3665
- border-color: var(--ids-comp-card-elevated-color-border-warning-default);
4354
+ .ids-chip.ids-chip-outlined.ids-chip-light.ids-chip-disabled {
4355
+ background: var(--ids-comp-chip-outlined-color-bg-light-disabled);
4356
+ border-color: var(--ids-comp-chip-outlined-color-border-light-disabled);
3666
4357
  }
3667
- .ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable:hover {
3668
- background-color: var(--ids-comp-card-elevated-color-bg-warning-hovered);
3669
- border-color: var(--ids-comp-card-elevated-color-border-warning-hovered);
4358
+ .ids-chip.ids-chip-outlined.ids-chip-light.ids-chip-disabled > .ids-icon {
4359
+ color: var(--ids-comp-chip-outlined-color-fg-icon-light-disabled);
3670
4360
  }
3671
- .ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable:focus, .ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable:focus-visible {
3672
- background-color: var(--ids-comp-card-elevated-color-bg-warning-focused);
3673
- border-color: var(--ids-comp-card-elevated-color-border-warning-focused);
3674
- outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
4361
+ .ids-chip.ids-chip-outlined.ids-chip-light.ids-chip-disabled > .ids-chip__label {
4362
+ color: var(--ids-comp-chip-outlined-color-fg-label-light-disabled);
3675
4363
  }
3676
- .ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable:active {
3677
- background-color: var(--ids-comp-card-elevated-color-bg-warning-pressed);
3678
- border-color: var(--ids-comp-card-elevated-color-border-warning-pressed);
4364
+ .ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled) {
4365
+ background: var(--ids-comp-chip-outlined-color-bg-dark-default);
4366
+ border-color: var(--ids-comp-chip-outlined-color-border-dark-default);
3679
4367
  }
3680
- .ids-card.ids-card-elevated.ids-card-info {
3681
- background-color: var(--ids-comp-card-elevated-color-bg-info-default);
3682
- border-color: var(--ids-comp-card-elevated-color-border-info-default);
4368
+ .ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled) > .ids-icon {
4369
+ color: var(--ids-comp-chip-outlined-color-fg-icon-dark-default);
3683
4370
  }
3684
- .ids-card.ids-card-elevated.ids-card-info.ids-card-clickable:hover {
3685
- background-color: var(--ids-comp-card-elevated-color-bg-info-hovered);
3686
- border-color: var(--ids-comp-card-elevated-color-border-info-hovered);
4371
+ .ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled) > .ids-chip__label {
4372
+ color: var(--ids-comp-chip-outlined-color-fg-label-dark-default);
3687
4373
  }
3688
- .ids-card.ids-card-elevated.ids-card-info.ids-card-clickable:focus, .ids-card.ids-card-elevated.ids-card-info.ids-card-clickable:focus-visible {
3689
- background-color: var(--ids-comp-card-elevated-color-bg-info-focused);
3690
- border-color: var(--ids-comp-card-elevated-color-border-info-focused);
3691
- outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
4374
+ .ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)[role=button]:hover {
4375
+ background: var(--ids-comp-chip-outlined-color-bg-dark-hovered);
4376
+ border-color: var(--ids-comp-chip-outlined-color-border-dark-hovered);
3692
4377
  }
3693
- .ids-card.ids-card-elevated.ids-card-info.ids-card-clickable:active {
3694
- background-color: var(--ids-comp-card-elevated-color-bg-info-pressed);
3695
- border-color: var(--ids-comp-card-elevated-color-border-info-pressed);
4378
+ .ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)[role=button]:hover > .ids-icon {
4379
+ color: var(--ids-comp-chip-outlined-color-fg-icon-dark-hovered);
3696
4380
  }
3697
- .ids-card.ids-card-elevated.ids-card-light {
3698
- background-color: var(--ids-comp-card-elevated-color-bg-light-default);
3699
- border-color: var(--ids-comp-card-elevated-color-border-light-default);
4381
+ .ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)[role=button]:hover > .ids-chip__label {
4382
+ color: var(--ids-comp-chip-outlined-color-fg-label-dark-hovered);
3700
4383
  }
3701
- .ids-card.ids-card-elevated.ids-card-light.ids-card-clickable:hover {
3702
- background-color: var(--ids-comp-card-elevated-color-bg-light-hovered);
3703
- border-color: var(--ids-comp-card-elevated-color-border-light-hovered);
4384
+ .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 {
4385
+ background: var(--ids-comp-chip-outlined-color-bg-dark-focused);
4386
+ border-color: var(--ids-comp-chip-outlined-color-border-dark-focused);
4387
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
3704
4388
  }
3705
- .ids-card.ids-card-elevated.ids-card-light.ids-card-clickable:focus, .ids-card.ids-card-elevated.ids-card-light.ids-card-clickable:focus-visible {
3706
- background-color: var(--ids-comp-card-elevated-color-bg-light-focused);
3707
- border-color: var(--ids-comp-card-elevated-color-border-light-focused);
3708
- outline-color: var(--ids-comp-card-focused-outline-color-light-focused);
4389
+ .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 {
4390
+ color: var(--ids-comp-chip-outlined-color-fg-icon-dark-focused);
3709
4391
  }
3710
- .ids-card.ids-card-elevated.ids-card-light.ids-card-clickable:active {
3711
- background-color: var(--ids-comp-card-elevated-color-bg-light-pressed);
3712
- border-color: var(--ids-comp-card-elevated-color-border-light-pressed);
4392
+ .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 {
4393
+ color: var(--ids-comp-chip-outlined-color-fg-label-dark-focused);
3713
4394
  }
3714
- .ids-card.ids-card-elevated.ids-card-light.ids-card-clickable.ids-card-disabled {
3715
- background-color: var(--ids-comp-card-elevated-color-bg-light-disabled);
3716
- border-color: var(--ids-comp-card-elevated-color-border-light-disabled);
4395
+ .ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)[role=button]:active {
4396
+ background: var(--ids-comp-chip-outlined-color-bg-dark-pressed);
4397
+ border-color: var(--ids-comp-chip-outlined-color-border-dark-pressed);
3717
4398
  }
3718
- .ids-card.ids-card-elevated.ids-card-dark {
3719
- background-color: var(--ids-comp-card-elevated-color-bg-dark-default);
3720
- border-color: var(--ids-comp-card-elevated-color-border-dark-default);
4399
+ .ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)[role=button]:active > .ids-icon {
4400
+ color: var(--ids-comp-chip-outlined-color-fg-icon-dark-pressed);
3721
4401
  }
3722
- .ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable:hover {
3723
- background-color: var(--ids-comp-card-elevated-color-bg-dark-hovered);
3724
- border-color: var(--ids-comp-card-elevated-color-border-dark-hovered);
4402
+ .ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)[role=button]:active > .ids-chip__label {
4403
+ color: var(--ids-comp-chip-outlined-color-fg-label-dark-pressed);
3725
4404
  }
3726
- .ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable:focus, .ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable:focus-visible {
3727
- background-color: var(--ids-comp-card-elevated-color-bg-dark-focused);
3728
- border-color: var(--ids-comp-card-elevated-color-border-dark-focused);
3729
- outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
4405
+ .ids-chip.ids-chip-outlined.ids-chip-dark.ids-chip-disabled {
4406
+ background: var(--ids-comp-chip-outlined-color-bg-dark-disabled);
4407
+ border-color: var(--ids-comp-chip-outlined-color-border-dark-disabled);
3730
4408
  }
3731
- .ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable:active {
3732
- background-color: var(--ids-comp-card-elevated-color-bg-dark-pressed);
3733
- border-color: var(--ids-comp-card-elevated-color-border-dark-pressed);
4409
+ .ids-chip.ids-chip-outlined.ids-chip-dark.ids-chip-disabled > .ids-icon {
4410
+ color: var(--ids-comp-chip-outlined-color-fg-icon-dark-disabled);
3734
4411
  }
3735
- .ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable.ids-card-disabled {
3736
- background-color: var(--ids-comp-card-elevated-color-bg-dark-disabled);
3737
- border-color: var(--ids-comp-card-elevated-color-border-dark-disabled);
4412
+ .ids-chip.ids-chip-outlined.ids-chip-dark.ids-chip-disabled > .ids-chip__label {
4413
+ color: var(--ids-comp-chip-outlined-color-fg-label-dark-disabled);
3738
4414
  }
3739
- .ids-card.ids-card-elevated.ids-card-surface {
3740
- background-color: var(--ids-comp-card-elevated-color-bg-surface-default);
3741
- border-color: var(--ids-comp-card-elevated-color-border-surface-default);
4415
+
4416
+ .ids-chip-group {
4417
+ display: inline-flex;
4418
+ align-items: center;
4419
+ flex-wrap: wrap;
3742
4420
  }
3743
- .ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable:hover {
3744
- background-color: var(--ids-comp-card-elevated-color-bg-surface-hovered);
3745
- border-color: var(--ids-comp-card-elevated-color-border-surface-hovered);
4421
+ .ids-chip-group.ids-chip-group-compact {
4422
+ padding: var(--ids-comp-chip-group-size-padding-y-compact) var(--ids-comp-chip-group-size-padding-x-compact);
4423
+ column-gap: var(--ids-comp-chip-group-size-column-gap-compact);
4424
+ row-gap: var(--ids-comp-chip-group-size-row-gap-compact);
3746
4425
  }
3747
- .ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable:focus, .ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable:focus-visible {
3748
- background-color: var(--ids-comp-card-elevated-color-bg-surface-focused);
3749
- border-color: var(--ids-comp-card-elevated-color-border-surface-focused);
3750
- outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
4426
+ .ids-chip-group.ids-chip-group-comfortable {
4427
+ padding: var(--ids-comp-chip-group-size-padding-y-comfortable) var(--ids-comp-chip-group-size-padding-x-comfortable);
4428
+ column-gap: var(--ids-comp-chip-group-size-column-gap-comfortable);
4429
+ row-gap: var(--ids-comp-chip-group-size-row-gap-comfortable);
3751
4430
  }
3752
- .ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable:active {
3753
- background-color: var(--ids-comp-card-elevated-color-bg-surface-pressed);
3754
- border-color: var(--ids-comp-card-elevated-color-border-surface-pressed);
4431
+ .ids-chip-group.ids-chip-group-spacious {
4432
+ padding: var(--ids-comp-chip-group-size-padding-y-spacious) var(--ids-comp-chip-group-size-padding-x-spacious);
4433
+ column-gap: var(--ids-comp-chip-group-size-column-gap-spacious);
4434
+ row-gap: var(--ids-comp-chip-group-size-row-gap-spacious);
3755
4435
  }
3756
- .ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable.ids-card-disabled {
3757
- background-color: var(--ids-comp-card-elevated-color-bg-surface-disabled);
3758
- border-color: var(--ids-comp-card-elevated-color-border-surface-disabled);
4436
+ .ids-chip-group.ids-chip-group-dense {
4437
+ padding: var(--ids-comp-chip-group-size-padding-y-dense) var(--ids-comp-chip-group-size-padding-x-dense);
4438
+ column-gap: var(--ids-comp-chip-group-size-column-gap-dense);
4439
+ row-gap: var(--ids-comp-chip-group-size-row-gap-dense);
3759
4440
  }
3760
4441
 
3761
4442
  .ids-dialog {
@@ -9731,6 +10412,13 @@
9731
10412
  }
9732
10413
  .ids-switch > .ids-switch__label {
9733
10414
  font-style: normal;
10415
+ flex-grow: 1;
10416
+ }
10417
+ .ids-switch.ids-switch-label-right {
10418
+ flex-direction: row;
10419
+ }
10420
+ .ids-switch.ids-switch-label-left {
10421
+ flex-direction: row-reverse;
9734
10422
  }
9735
10423
  .ids-switch.ids-switch-compact {
9736
10424
  gap: var(--ids-comp-switch-container-size-gap-compact);