@i-cell/ids-styles 0.0.14 → 0.0.15-beta.0

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/components.css +473 -160
  2. package/dist/components.min.css +1 -1
  3. package/dist/components.plugin.js +408 -82
  4. package/dist/form-elements/form-field/form-field.css +58 -148
  5. package/dist/form-elements/form-field/form-field.min.css +1 -1
  6. package/dist/form-elements/form-field/form-field.plugin.js +62 -64
  7. package/dist/option/option.css +273 -0
  8. package/dist/option/option.min.css +1 -0
  9. package/dist/option/option.plugin.js +252 -0
  10. package/dist/select/select.css +131 -0
  11. package/dist/select/select.min.css +1 -0
  12. package/dist/select/select.plugin.js +103 -0
  13. package/dist/switch/switch.css +9 -12
  14. package/dist/switch/switch.min.css +1 -1
  15. package/dist/switch/switch.plugin.js +9 -18
  16. package/package.json +2 -2
package/dist/select/select.css ADDED
@@ -0,0 +1,131 @@
1
+ .ids-select {
2
+ width: 100%;
3
+ }
4
+ .ids-select > .ids-select__trigger {
5
+ display: flex;
6
+ justify-content: space-between;
7
+ align-items: center;
8
+ }
9
+ .ids-select > .ids-select__trigger > .ids-select__value {
10
+ flex-grow: 1;
11
+ overflow: hidden;
12
+ }
13
+ .ids-select > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
14
+ user-select: none;
15
+ }
16
+ .ids-select > .ids-select__trigger > .ids-select__value > .ids-select__value-text {
17
+ text-overflow: ellipsis;
18
+ overflow: hidden;
19
+ white-space: nowrap;
20
+ display: block;
21
+ }
22
+ .ids-select > .ids-select__trigger > .ids-select__arrow {
23
+ flex-shrink: 0;
24
+ }
25
+ .ids-select.ids-select-compact > .ids-select__trigger {
26
+ gap: var(--ids-comp-forms-select-size-gap-compact);
27
+ }
28
+ .ids-select.ids-select-compact > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
29
+ font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-family-compact);
30
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-size-compact);
31
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-weight-compact);
32
+ letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-letter-spacing-compact);
33
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-line-height-compact);
34
+ }
35
+ .ids-select.ids-select-comfortable > .ids-select__trigger {
36
+ gap: var(--ids-comp-forms-select-size-gap-comfortable);
37
+ }
38
+ .ids-select.ids-select-comfortable > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
39
+ font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-family-comfortable);
40
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-size-comfortable);
41
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-weight-comfortable);
42
+ letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-letter-spacing-comfortable);
43
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-line-height-comfortable);
44
+ }
45
+ .ids-select.ids-select-spacious > .ids-select__trigger {
46
+ gap: var(--ids-comp-forms-select-size-gap-spacious);
47
+ }
48
+ .ids-select.ids-select-spacious > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
49
+ font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-family-spacious);
50
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-size-spacious);
51
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-weight-spacious);
52
+ letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-letter-spacing-spacious);
53
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-line-height-spacious);
54
+ }
55
+ .ids-select.ids-select-dense > .ids-select__trigger {
56
+ gap: var(--ids-comp-forms-select-size-gap-dense);
57
+ }
58
+ .ids-select.ids-select-dense > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
59
+ font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-family-dense);
60
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-size-dense);
61
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-weight-dense);
62
+ letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-letter-spacing-dense);
63
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-line-height-dense);
64
+ }
65
+
66
+ .ids-select-panel {
67
+ display: flex;
68
+ flex-direction: column;
69
+ align-items: flex-start;
70
+ flex-shrink: 0;
71
+ width: 100%;
72
+ box-sizing: border-box;
73
+ overflow-y: auto;
74
+ box-shadow: var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-default);
75
+ }
76
+ .ids-select-panel.ids-select-panel-compact {
77
+ padding: var(--ids-comp-forms-select-panel-size-padding-y-compact) var(--ids-comp-forms-select-panel-size-padding-x-compact);
78
+ gap: var(--ids-comp-forms-select-panel-size-gap-compact);
79
+ border-radius: var(--ids-comp-forms-select-panel-size-border-radius-compact);
80
+ }
81
+ .ids-select-panel.ids-select-panel-comfortable {
82
+ padding: var(--ids-comp-forms-select-panel-size-padding-y-comfortable) var(--ids-comp-forms-select-panel-size-padding-x-comfortable);
83
+ gap: var(--ids-comp-forms-select-panel-size-gap-comfortable);
84
+ border-radius: var(--ids-comp-forms-select-panel-size-border-radius-comfortable);
85
+ }
86
+ .ids-select-panel.ids-select-panel-spacious {
87
+ padding: var(--ids-comp-forms-select-panel-size-padding-y-spacious) var(--ids-comp-forms-select-panel-size-padding-x-spacious);
88
+ gap: var(--ids-comp-forms-select-panel-size-gap-spacious);
89
+ border-radius: var(--ids-comp-forms-select-panel-size-border-radius-spacious);
90
+ }
91
+ .ids-select-panel.ids-select-panel-dense {
92
+ padding: var(--ids-comp-forms-select-panel-size-padding-y-dense) var(--ids-comp-forms-select-panel-size-padding-x-dense);
93
+ gap: var(--ids-comp-forms-select-panel-size-gap-dense);
94
+ border-radius: var(--ids-comp-forms-select-panel-size-border-radius-dense);
95
+ }
96
+ .ids-select-panel.ids-select-panel-surface {
97
+ background: var(--ids-comp-forms-select-panel-color-bg-surface-default);
98
+ }
99
+ .ids-select-panel.ids-select-panel-light {
100
+ background: var(--ids-comp-forms-select-panel-color-bg-light-default);
101
+ }
102
+
103
+ .ids-form-field > .ids-form-field__field-wrapper:has(.ids-select) {
104
+ cursor: pointer;
105
+ }
106
+
107
+ .ids-form-field > .ids-form-field__field-wrapper .ids-select.ids-select-surface > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
108
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-default);
109
+ }
110
+ .ids-form-field > .ids-form-field__field-wrapper:hover .ids-select.ids-select-surface > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
111
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-hovered);
112
+ }
113
+ .ids-form-field > .ids-form-field__field-wrapper:focus .ids-select.ids-select-surface > .ids-select__trigger > .ids-select__value > .ids-select__placeholder, .ids-form-field > .ids-form-field__field-wrapper:focus-visible .ids-select.ids-select-surface > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
114
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-focused);
115
+ }
116
+ .ids-form-field > .ids-form-field__field-wrapper:active .ids-select.ids-select-surface > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
117
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-pressed);
118
+ }
119
+
120
+ .ids-form-field > .ids-form-field__field-wrapper .ids-select.ids-select-light > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
121
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-default);
122
+ }
123
+ .ids-form-field > .ids-form-field__field-wrapper:hover .ids-select.ids-select-light > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
124
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-hovered);
125
+ }
126
+ .ids-form-field > .ids-form-field__field-wrapper:focus .ids-select.ids-select-light > .ids-select__trigger > .ids-select__value > .ids-select__placeholder, .ids-form-field > .ids-form-field__field-wrapper:focus-visible .ids-select.ids-select-light > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
127
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-focused);
128
+ }
129
+ .ids-form-field > .ids-form-field__field-wrapper:active .ids-select.ids-select-light > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
130
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-pressed);
131
+ }
package/dist/select/select.min.css ADDED
@@ -0,0 +1 @@
1
+ .ids-select{width:100%}.ids-select>.ids-select__trigger{display:flex;justify-content:space-between;align-items:center}.ids-select>.ids-select__trigger>.ids-select__value{flex-grow:1;overflow:hidden}.ids-select>.ids-select__trigger>.ids-select__value>.ids-select__placeholder{user-select:none}.ids-select>.ids-select__trigger>.ids-select__value>.ids-select__value-text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:block}.ids-select>.ids-select__trigger>.ids-select__arrow{flex-shrink:0}.ids-select.ids-select-compact>.ids-select__trigger{gap:var(--ids-comp-forms-select-size-gap-compact)}.ids-select.ids-select-compact>.ids-select__trigger>.ids-select__value>.ids-select__placeholder{font-family:var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-family-compact);font-size:var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-size-compact);font-weight:var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-weight-compact);letter-spacing:var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-letter-spacing-compact);line-height:var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-line-height-compact)}.ids-select.ids-select-comfortable>.ids-select__trigger{gap:var(--ids-comp-forms-select-size-gap-comfortable)}.ids-select.ids-select-comfortable>.ids-select__trigger>.ids-select__value>.ids-select__placeholder{font-family:var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-family-comfortable);font-size:var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-size-comfortable);font-weight:var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-weight-comfortable);letter-spacing:var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-letter-spacing-comfortable);line-height:var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-line-height-comfortable)}.ids-select.ids-select-spacious>.ids-select__trigger{gap:var(--ids-comp-forms-select-size-gap-spacious)}.ids-select.ids-select-spacious>.ids-select__trigger>.ids-select__value>.ids-select__placeholder{font-family:var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-family-spacious);font-size:var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-size-spacious);font-weight:var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-weight-spacious);letter-spacing:var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-letter-spacing-spacious);line-height:var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-line-height-spacious)}.ids-select.ids-select-dense>.ids-select__trigger{gap:var(--ids-comp-forms-select-size-gap-dense)}.ids-select.ids-select-dense>.ids-select__trigger>.ids-select__value>.ids-select__placeholder{font-family:var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-family-dense);font-size:var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-size-dense);font-weight:var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-weight-dense);letter-spacing:var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-letter-spacing-dense);line-height:var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-line-height-dense)}.ids-select-panel{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;width:100%;box-sizing:border-box;overflow-y:auto;box-shadow:var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-default)}.ids-select-panel.ids-select-panel-compact{padding:var(--ids-comp-forms-select-panel-size-padding-y-compact) var(--ids-comp-forms-select-panel-size-padding-x-compact);gap:var(--ids-comp-forms-select-panel-size-gap-compact);border-radius:var(--ids-comp-forms-select-panel-size-border-radius-compact)}.ids-select-panel.ids-select-panel-comfortable{padding:var(--ids-comp-forms-select-panel-size-padding-y-comfortable) var(--ids-comp-forms-select-panel-size-padding-x-comfortable);gap:var(--ids-comp-forms-select-panel-size-gap-comfortable);border-radius:var(--ids-comp-forms-select-panel-size-border-radius-comfortable)}.ids-select-panel.ids-select-panel-spacious{padding:var(--ids-comp-forms-select-panel-size-padding-y-spacious) var(--ids-comp-forms-select-panel-size-padding-x-spacious);gap:var(--ids-comp-forms-select-panel-size-gap-spacious);border-radius:var(--ids-comp-forms-select-panel-size-border-radius-spacious)}.ids-select-panel.ids-select-panel-dense{padding:var(--ids-comp-forms-select-panel-size-padding-y-dense) var(--ids-comp-forms-select-panel-size-padding-x-dense);gap:var(--ids-comp-forms-select-panel-size-gap-dense);border-radius:var(--ids-comp-forms-select-panel-size-border-radius-dense)}.ids-select-panel.ids-select-panel-surface{background:var(--ids-comp-forms-select-panel-color-bg-surface-default)}.ids-select-panel.ids-select-panel-light{background:var(--ids-comp-forms-select-panel-color-bg-light-default)}.ids-form-field>.ids-form-field__field-wrapper:has(.ids-select){cursor:pointer}.ids-form-field>.ids-form-field__field-wrapper .ids-select.ids-select-surface>.ids-select__trigger>.ids-select__value>.ids-select__placeholder{color:var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-default)}.ids-form-field>.ids-form-field__field-wrapper:hover .ids-select.ids-select-surface>.ids-select__trigger>.ids-select__value>.ids-select__placeholder{color:var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-hovered)}.ids-form-field>.ids-form-field__field-wrapper:focus .ids-select.ids-select-surface>.ids-select__trigger>.ids-select__value>.ids-select__placeholder,.ids-form-field>.ids-form-field__field-wrapper:focus-visible .ids-select.ids-select-surface>.ids-select__trigger>.ids-select__value>.ids-select__placeholder{color:var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-focused)}.ids-form-field>.ids-form-field__field-wrapper:active .ids-select.ids-select-surface>.ids-select__trigger>.ids-select__value>.ids-select__placeholder{color:var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-pressed)}.ids-form-field>.ids-form-field__field-wrapper .ids-select.ids-select-light>.ids-select__trigger>.ids-select__value>.ids-select__placeholder{color:var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-default)}.ids-form-field>.ids-form-field__field-wrapper:hover .ids-select.ids-select-light>.ids-select__trigger>.ids-select__value>.ids-select__placeholder{color:var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-hovered)}.ids-form-field>.ids-form-field__field-wrapper:focus .ids-select.ids-select-light>.ids-select__trigger>.ids-select__value>.ids-select__placeholder,.ids-form-field>.ids-form-field__field-wrapper:focus-visible .ids-select.ids-select-light>.ids-select__trigger>.ids-select__value>.ids-select__placeholder{color:var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-focused)}.ids-form-field>.ids-form-field__field-wrapper:active .ids-select.ids-select-light>.ids-select__trigger>.ids-select__value>.ids-select__placeholder{color:var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-pressed)}
package/dist/select/select.plugin.js ADDED
@@ -0,0 +1,103 @@
1
+ // Tailwind CSS plugin for the select component in the i-Cell Design System
2
+ module.exports = function SelectPlugin() {
3
+ return function ({ addComponents }) {
4
+ const cssObj = {
5
+ '.ids-select': { width: '100%' },
6
+ '.ids-select>.ids-select__trigger': { display: 'flex', justifyContent: 'space-between', alignItems: 'center' },
7
+ '.ids-select>.ids-select__trigger>.ids-select__value': { flexGrow: 1, overflow: 'hidden' },
8
+ '.ids-select>.ids-select__trigger>.ids-select__value>.ids-select__placeholder': { userSelect: 'none' },
9
+ '.ids-select>.ids-select__trigger>.ids-select__value>.ids-select__value-text': {
10
+ textOverflow: 'ellipsis',
11
+ overflow: 'hidden',
12
+ whiteSpace: 'nowrap',
13
+ display: 'block',
14
+ },
15
+ '.ids-select>.ids-select__trigger>.ids-select__arrow': { flexShrink: 0 },
16
+ '.ids-select.ids-select-compact>.ids-select__trigger': { gap: 'var(--ids-comp-forms-select-size-gap-compact)' },
17
+ '.ids-select.ids-select-compact>.ids-select__trigger>.ids-select__value>.ids-select__placeholder': {
18
+ fontFamily: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-family-compact)',
19
+ fontSize: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-size-compact)',
20
+ fontWeight: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-weight-compact)',
21
+ letterSpacing: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-letter-spacing-compact)',
22
+ lineHeight: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-line-height-compact)',
23
+ },
24
+ '.ids-select.ids-select-comfortable>.ids-select__trigger': { gap: 'var(--ids-comp-forms-select-size-gap-comfortable)' },
25
+ '.ids-select.ids-select-comfortable>.ids-select__trigger>.ids-select__value>.ids-select__placeholder': {
26
+ fontFamily: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-family-comfortable)',
27
+ fontSize: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-size-comfortable)',
28
+ fontWeight: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-weight-comfortable)',
29
+ letterSpacing: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-letter-spacing-comfortable)',
30
+ lineHeight: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-line-height-comfortable)',
31
+ },
32
+ '.ids-select.ids-select-spacious>.ids-select__trigger': { gap: 'var(--ids-comp-forms-select-size-gap-spacious)' },
33
+ '.ids-select.ids-select-spacious>.ids-select__trigger>.ids-select__value>.ids-select__placeholder': {
34
+ fontFamily: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-family-spacious)',
35
+ fontSize: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-size-spacious)',
36
+ fontWeight: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-weight-spacious)',
37
+ letterSpacing: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-letter-spacing-spacious)',
38
+ lineHeight: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-line-height-spacious)',
39
+ },
40
+ '.ids-select.ids-select-dense>.ids-select__trigger': { gap: 'var(--ids-comp-forms-select-size-gap-dense)' },
41
+ '.ids-select.ids-select-dense>.ids-select__trigger>.ids-select__value>.ids-select__placeholder': {
42
+ fontFamily: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-family-dense)',
43
+ fontSize: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-size-dense)',
44
+ fontWeight: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-weight-dense)',
45
+ letterSpacing: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-letter-spacing-dense)',
46
+ lineHeight: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-line-height-dense)',
47
+ },
48
+ '.ids-select-panel': {
49
+ display: 'flex',
50
+ flexDirection: 'column',
51
+ alignItems: 'flex-start',
52
+ flexShrink: 0,
53
+ width: '100%',
54
+ boxSizing: 'border-box',
55
+ overflowY: 'auto',
56
+ boxShadow:
57
+ 'var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-default)',
58
+ },
59
+ '.ids-select-panel.ids-select-panel-compact': {
60
+ padding: 'var(--ids-comp-forms-select-panel-size-padding-y-compact) var(--ids-comp-forms-select-panel-size-padding-x-compact)',
61
+ gap: 'var(--ids-comp-forms-select-panel-size-gap-compact)',
62
+ borderRadius: 'var(--ids-comp-forms-select-panel-size-border-radius-compact)',
63
+ },
64
+ '.ids-select-panel.ids-select-panel-comfortable': {
65
+ padding:
66
+ 'var(--ids-comp-forms-select-panel-size-padding-y-comfortable) var(--ids-comp-forms-select-panel-size-padding-x-comfortable)',
67
+ gap: 'var(--ids-comp-forms-select-panel-size-gap-comfortable)',
68
+ borderRadius: 'var(--ids-comp-forms-select-panel-size-border-radius-comfortable)',
69
+ },
70
+ '.ids-select-panel.ids-select-panel-spacious': {
71
+ padding: 'var(--ids-comp-forms-select-panel-size-padding-y-spacious) var(--ids-comp-forms-select-panel-size-padding-x-spacious)',
72
+ gap: 'var(--ids-comp-forms-select-panel-size-gap-spacious)',
73
+ borderRadius: 'var(--ids-comp-forms-select-panel-size-border-radius-spacious)',
74
+ },
75
+ '.ids-select-panel.ids-select-panel-dense': {
76
+ padding: 'var(--ids-comp-forms-select-panel-size-padding-y-dense) var(--ids-comp-forms-select-panel-size-padding-x-dense)',
77
+ gap: 'var(--ids-comp-forms-select-panel-size-gap-dense)',
78
+ borderRadius: 'var(--ids-comp-forms-select-panel-size-border-radius-dense)',
79
+ },
80
+ '.ids-select-panel.ids-select-panel-surface': { background: 'var(--ids-comp-forms-select-panel-color-bg-surface-default)' },
81
+ '.ids-select-panel.ids-select-panel-light': { background: 'var(--ids-comp-forms-select-panel-color-bg-light-default)' },
82
+ '.ids-form-field>.ids-form-field__field-wrapper:has(.ids-select)': { cursor: 'pointer' },
83
+ '.ids-form-field>.ids-form-field__field-wrapper .ids-select.ids-select-surface>.ids-select__trigger>.ids-select__value>.ids-select__placeholder':
84
+ { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-default)' },
85
+ '.ids-form-field>.ids-form-field__field-wrapper:hover .ids-select.ids-select-surface>.ids-select__trigger>.ids-select__value>.ids-select__placeholder':
86
+ { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-hovered)' },
87
+ '.ids-form-field>.ids-form-field__field-wrapper:focus .ids-select.ids-select-surface>.ids-select__trigger>.ids-select__value>.ids-select__placeholder,.ids-form-field>.ids-form-field__field-wrapper:focus-visible .ids-select.ids-select-surface>.ids-select__trigger>.ids-select__value>.ids-select__placeholder':
88
+ { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-focused)' },
89
+ '.ids-form-field>.ids-form-field__field-wrapper:active .ids-select.ids-select-surface>.ids-select__trigger>.ids-select__value>.ids-select__placeholder':
90
+ { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-pressed)' },
91
+ '.ids-form-field>.ids-form-field__field-wrapper .ids-select.ids-select-light>.ids-select__trigger>.ids-select__value>.ids-select__placeholder':
92
+ { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-default)' },
93
+ '.ids-form-field>.ids-form-field__field-wrapper:hover .ids-select.ids-select-light>.ids-select__trigger>.ids-select__value>.ids-select__placeholder':
94
+ { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-hovered)' },
95
+ '.ids-form-field>.ids-form-field__field-wrapper:focus .ids-select.ids-select-light>.ids-select__trigger>.ids-select__value>.ids-select__placeholder,.ids-form-field>.ids-form-field__field-wrapper:focus-visible .ids-select.ids-select-light>.ids-select__trigger>.ids-select__value>.ids-select__placeholder':
96
+ { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-focused)' },
97
+ '.ids-form-field>.ids-form-field__field-wrapper:active .ids-select.ids-select-light>.ids-select__trigger>.ids-select__value>.ids-select__placeholder':
98
+ { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-pressed)' },
99
+ };
100
+
101
+ addComponents(cssObj);
102
+ };
103
+ };
package/dist/switch/switch.css CHANGED
@@ -51,11 +51,8 @@
51
51
  top: auto;
52
52
  bottom: auto;
53
53
  }
54
- .ids-switch > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
55
- position: absolute;
56
- }
57
54
  .ids-switch > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
58
- position: absolute;
55
+ position: relative;
59
56
  display: flex;
60
57
  justify-content: center;
61
58
  align-items: center;
@@ -115,10 +112,10 @@
115
112
  letter-spacing: var(--ids-comp-switch-label-typography-letter-spacing-compact);
116
113
  }
117
114
  .ids-switch.ids-switch-compact:not(.ids-switch-on) > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
118
- left: var(--ids-comp-switch-track-size-padding-x-compact);
115
+ left: 0;
119
116
  }
120
117
  .ids-switch.ids-switch-compact.ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
121
- left: calc(100% - var(--ids-comp-switch-track-size-padding-x-compact) - var(--ids-comp-switch-handle-size-width-compact));
118
+ left: calc(var(--ids-comp-switch-track-size-width-compact) - var(--ids-comp-switch-handle-size-width-compact));
122
119
  }
123
120
  .ids-switch.ids-switch-comfortable {
124
121
  gap: var(--ids-comp-switch-container-size-gap-comfortable);
@@ -168,10 +165,10 @@
168
165
  letter-spacing: var(--ids-comp-switch-label-typography-letter-spacing-comfortable);
169
166
  }
170
167
  .ids-switch.ids-switch-comfortable:not(.ids-switch-on) > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
171
- left: var(--ids-comp-switch-track-size-padding-x-comfortable);
168
+ left: 0;
172
169
  }
173
170
  .ids-switch.ids-switch-comfortable.ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
174
- left: calc(100% - var(--ids-comp-switch-track-size-padding-x-comfortable) - var(--ids-comp-switch-handle-size-width-comfortable));
171
+ left: calc(var(--ids-comp-switch-track-size-width-comfortable) - var(--ids-comp-switch-handle-size-width-comfortable));
175
172
  }
176
173
  .ids-switch.ids-switch-spacious {
177
174
  gap: var(--ids-comp-switch-container-size-gap-spacious);
@@ -221,10 +218,10 @@
221
218
  letter-spacing: var(--ids-comp-switch-label-typography-letter-spacing-spacious);
222
219
  }
223
220
  .ids-switch.ids-switch-spacious:not(.ids-switch-on) > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
224
- left: var(--ids-comp-switch-track-size-padding-x-spacious);
221
+ left: 0;
225
222
  }
226
223
  .ids-switch.ids-switch-spacious.ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
227
- left: calc(100% - var(--ids-comp-switch-track-size-padding-x-spacious) - var(--ids-comp-switch-handle-size-width-spacious));
224
+ left: calc(var(--ids-comp-switch-track-size-width-spacious) - var(--ids-comp-switch-handle-size-width-spacious));
228
225
  }
229
226
  .ids-switch.ids-switch-dense {
230
227
  gap: var(--ids-comp-switch-container-size-gap-dense);
@@ -274,10 +271,10 @@
274
271
  letter-spacing: var(--ids-comp-switch-label-typography-letter-spacing-dense);
275
272
  }
276
273
  .ids-switch.ids-switch-dense:not(.ids-switch-on) > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
277
- left: var(--ids-comp-switch-track-size-padding-x-dense);
274
+ left: 0;
278
275
  }
279
276
  .ids-switch.ids-switch-dense.ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
280
- left: calc(100% - var(--ids-comp-switch-track-size-padding-x-dense) - var(--ids-comp-switch-handle-size-width-dense));
277
+ left: calc(var(--ids-comp-switch-track-size-width-dense) - var(--ids-comp-switch-handle-size-width-dense));
281
278
  }
282
279
  .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button > .ids-switch__track {
283
280
  background-color: var(--ids-comp-switch-track-off-color-bg-surface-default);
package/dist/switch/switch.min.css CHANGED
@@ -1 +1 @@
1
- .ids-switch-group{display:flex;flex-direction:column}.ids-switch-group.ids-switch-group-compact{gap:var(--ids-comp-switch-group-container-size-gap-compact);padding:var(--ids-comp-switch-group-container-size-padding-y-compact) var(--ids-comp-switch-group-container-size-padding-x-compact)}.ids-switch-group.ids-switch-group-comfortable{gap:var(--ids-comp-switch-group-container-size-gap-comfortable);padding:var(--ids-comp-switch-group-container-size-padding-y-comfortable) var(--ids-comp-switch-group-container-size-padding-x-comfortable)}.ids-switch-group.ids-switch-group-spacious{gap:var(--ids-comp-switch-group-container-size-gap-spacious);padding:var(--ids-comp-switch-group-container-size-padding-y-spacious) var(--ids-comp-switch-group-container-size-padding-x-spacious)}.ids-switch-group.ids-switch-group-dense{gap:var(--ids-comp-switch-group-container-size-gap-dense);padding:var(--ids-comp-switch-group-container-size-padding-y-dense) var(--ids-comp-switch-group-container-size-padding-x-dense)}.ids-switch{display:inline-flex;align-items:center}.ids-switch>.ids-switch__button{background:none;border:none;margin:0;padding:0;cursor:pointer}.ids-switch>.ids-switch__button:disabled{pointer-events:none}.ids-switch>.ids-switch__button:focus,.ids-switch>.ids-switch__button:focus-visible{outline-offset:2px;outline-style:solid}.ids-switch>.ids-switch__button>.ids-switch__track{position:relative;display:flex;align-items:center;justify-content:space-between}.ids-switch>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon{position:absolute;display:flex;align-items:center;justify-content:center;top:auto;bottom:auto}.ids-switch>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon{position:absolute}.ids-switch>.ids-switch__button>.ids-switch__track>.ids-switch__handle{position:absolute;display:flex;justify-content:center;align-items:center;flex-shrink:0}.ids-switch>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{position:absolute}.ids-switch>.ids-switch__label{font-style:normal}.ids-switch.ids-switch-compact{gap:var(--ids-comp-switch-container-size-gap-compact)}.ids-switch.ids-switch-compact>.ids-switch__button{border-radius:var(--ids-comp-switch-handle-size-border-radius-compact)}.ids-switch.ids-switch-compact>.ids-switch__button:focus,.ids-switch.ids-switch-compact>.ids-switch__button:focus-visible{outline-width:var(--ids-comp-switch-focused-outline-outline-compact)}.ids-switch.ids-switch-compact>.ids-switch__button>.ids-switch__track{width:var(--ids-comp-switch-track-size-width-compact);height:var(--ids-comp-switch-handle-size-height-compact);padding:var(--ids-comp-switch-track-size-padding-y-compact) var(--ids-comp-switch-track-size-padding-x-compact);border-radius:var(--ids-comp-switch-track-size-border-radius-compact);box-sizing:content-box}.ids-switch.ids-switch-compact>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon{width:var(--ids-comp-switch-handle-size-width-compact);height:var(--ids-comp-switch-handle-size-height-compact)}.ids-switch.ids-switch-compact>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon{width:var(--ids-comp-switch-icon-size-width-compact);height:var(--ids-comp-switch-icon-size-height-compact)}.ids-switch.ids-switch-compact>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon:nth-child(1){left:var(--ids-comp-switch-track-size-padding-x-compact)}.ids-switch.ids-switch-compact>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon:nth-child(2){right:var(--ids-comp-switch-track-size-padding-x-compact)}.ids-switch.ids-switch-compact>.ids-switch__button>.ids-switch__track>.ids-switch__handle{width:var(--ids-comp-switch-handle-size-width-compact);height:var(--ids-comp-switch-handle-size-height-compact);border-radius:var(--ids-comp-switch-handle-size-border-radius-compact);transition:left 100ms ease-in-out}.ids-switch.ids-switch-compact>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{width:var(--ids-comp-switch-icon-size-width-compact);height:var(--ids-comp-switch-icon-size-height-compact)}.ids-switch.ids-switch-compact>.ids-switch__label{font-family:var(--ids-comp-switch-label-typography-font-family-compact);font-size:var(--ids-comp-switch-label-typography-font-size-compact);font-weight:var(--ids-comp-switch-label-typography-font-weight-compact);line-height:var(--ids-comp-switch-label-typography-line-height-compact);letter-spacing:var(--ids-comp-switch-label-typography-letter-spacing-compact)}.ids-switch.ids-switch-compact:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__handle{left:var(--ids-comp-switch-track-size-padding-x-compact)}.ids-switch.ids-switch-compact.ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle{left:calc(100% - var(--ids-comp-switch-track-size-padding-x-compact) - var(--ids-comp-switch-handle-size-width-compact))}.ids-switch.ids-switch-comfortable{gap:var(--ids-comp-switch-container-size-gap-comfortable)}.ids-switch.ids-switch-comfortable>.ids-switch__button{border-radius:var(--ids-comp-switch-handle-size-border-radius-comfortable)}.ids-switch.ids-switch-comfortable>.ids-switch__button:focus,.ids-switch.ids-switch-comfortable>.ids-switch__button:focus-visible{outline-width:var(--ids-comp-switch-focused-outline-outline-comfortable)}.ids-switch.ids-switch-comfortable>.ids-switch__button>.ids-switch__track{width:var(--ids-comp-switch-track-size-width-comfortable);height:var(--ids-comp-switch-handle-size-height-comfortable);padding:var(--ids-comp-switch-track-size-padding-y-comfortable) var(--ids-comp-switch-track-size-padding-x-comfortable);border-radius:var(--ids-comp-switch-track-size-border-radius-comfortable);box-sizing:content-box}.ids-switch.ids-switch-comfortable>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon{width:var(--ids-comp-switch-handle-size-width-comfortable);height:var(--ids-comp-switch-handle-size-height-comfortable)}.ids-switch.ids-switch-comfortable>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon{width:var(--ids-comp-switch-icon-size-width-comfortable);height:var(--ids-comp-switch-icon-size-height-comfortable)}.ids-switch.ids-switch-comfortable>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon:nth-child(1){left:var(--ids-comp-switch-track-size-padding-x-comfortable)}.ids-switch.ids-switch-comfortable>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon:nth-child(2){right:var(--ids-comp-switch-track-size-padding-x-comfortable)}.ids-switch.ids-switch-comfortable>.ids-switch__button>.ids-switch__track>.ids-switch__handle{width:var(--ids-comp-switch-handle-size-width-comfortable);height:var(--ids-comp-switch-handle-size-height-comfortable);border-radius:var(--ids-comp-switch-handle-size-border-radius-comfortable);transition:left 100ms ease-in-out}.ids-switch.ids-switch-comfortable>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{width:var(--ids-comp-switch-icon-size-width-comfortable);height:var(--ids-comp-switch-icon-size-height-comfortable)}.ids-switch.ids-switch-comfortable>.ids-switch__label{font-family:var(--ids-comp-switch-label-typography-font-family-comfortable);font-size:var(--ids-comp-switch-label-typography-font-size-comfortable);font-weight:var(--ids-comp-switch-label-typography-font-weight-comfortable);line-height:var(--ids-comp-switch-label-typography-line-height-comfortable);letter-spacing:var(--ids-comp-switch-label-typography-letter-spacing-comfortable)}.ids-switch.ids-switch-comfortable:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__handle{left:var(--ids-comp-switch-track-size-padding-x-comfortable)}.ids-switch.ids-switch-comfortable.ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle{left:calc(100% - var(--ids-comp-switch-track-size-padding-x-comfortable) - var(--ids-comp-switch-handle-size-width-comfortable))}.ids-switch.ids-switch-spacious{gap:var(--ids-comp-switch-container-size-gap-spacious)}.ids-switch.ids-switch-spacious>.ids-switch__button{border-radius:var(--ids-comp-switch-handle-size-border-radius-spacious)}.ids-switch.ids-switch-spacious>.ids-switch__button:focus,.ids-switch.ids-switch-spacious>.ids-switch__button:focus-visible{outline-width:var(--ids-comp-switch-focused-outline-outline-spacious)}.ids-switch.ids-switch-spacious>.ids-switch__button>.ids-switch__track{width:var(--ids-comp-switch-track-size-width-spacious);height:var(--ids-comp-switch-handle-size-height-spacious);padding:var(--ids-comp-switch-track-size-padding-y-spacious) var(--ids-comp-switch-track-size-padding-x-spacious);border-radius:var(--ids-comp-switch-track-size-border-radius-spacious);box-sizing:content-box}.ids-switch.ids-switch-spacious>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon{width:var(--ids-comp-switch-handle-size-width-spacious);height:var(--ids-comp-switch-handle-size-height-spacious)}.ids-switch.ids-switch-spacious>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon{width:var(--ids-comp-switch-icon-size-width-spacious);height:var(--ids-comp-switch-icon-size-height-spacious)}.ids-switch.ids-switch-spacious>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon:nth-child(1){left:var(--ids-comp-switch-track-size-padding-x-spacious)}.ids-switch.ids-switch-spacious>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon:nth-child(2){right:var(--ids-comp-switch-track-size-padding-x-spacious)}.ids-switch.ids-switch-spacious>.ids-switch__button>.ids-switch__track>.ids-switch__handle{width:var(--ids-comp-switch-handle-size-width-spacious);height:var(--ids-comp-switch-handle-size-height-spacious);border-radius:var(--ids-comp-switch-handle-size-border-radius-spacious);transition:left 100ms ease-in-out}.ids-switch.ids-switch-spacious>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{width:var(--ids-comp-switch-icon-size-width-spacious);height:var(--ids-comp-switch-icon-size-height-spacious)}.ids-switch.ids-switch-spacious>.ids-switch__label{font-family:var(--ids-comp-switch-label-typography-font-family-spacious);font-size:var(--ids-comp-switch-label-typography-font-size-spacious);font-weight:var(--ids-comp-switch-label-typography-font-weight-spacious);line-height:var(--ids-comp-switch-label-typography-line-height-spacious);letter-spacing:var(--ids-comp-switch-label-typography-letter-spacing-spacious)}.ids-switch.ids-switch-spacious:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__handle{left:var(--ids-comp-switch-track-size-padding-x-spacious)}.ids-switch.ids-switch-spacious.ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle{left:calc(100% - var(--ids-comp-switch-track-size-padding-x-spacious) - var(--ids-comp-switch-handle-size-width-spacious))}.ids-switch.ids-switch-dense{gap:var(--ids-comp-switch-container-size-gap-dense)}.ids-switch.ids-switch-dense>.ids-switch__button{border-radius:var(--ids-comp-switch-handle-size-border-radius-dense)}.ids-switch.ids-switch-dense>.ids-switch__button:focus,.ids-switch.ids-switch-dense>.ids-switch__button:focus-visible{outline-width:var(--ids-comp-switch-focused-outline-outline-dense)}.ids-switch.ids-switch-dense>.ids-switch__button>.ids-switch__track{width:var(--ids-comp-switch-track-size-width-dense);height:var(--ids-comp-switch-handle-size-height-dense);padding:var(--ids-comp-switch-track-size-padding-y-dense) var(--ids-comp-switch-track-size-padding-x-dense);border-radius:var(--ids-comp-switch-track-size-border-radius-dense);box-sizing:content-box}.ids-switch.ids-switch-dense>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon{width:var(--ids-comp-switch-handle-size-width-dense);height:var(--ids-comp-switch-handle-size-height-dense)}.ids-switch.ids-switch-dense>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon{width:var(--ids-comp-switch-icon-size-width-dense);height:var(--ids-comp-switch-icon-size-height-dense)}.ids-switch.ids-switch-dense>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon:nth-child(1){left:var(--ids-comp-switch-track-size-padding-x-dense)}.ids-switch.ids-switch-dense>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon:nth-child(2){right:var(--ids-comp-switch-track-size-padding-x-dense)}.ids-switch.ids-switch-dense>.ids-switch__button>.ids-switch__track>.ids-switch__handle{width:var(--ids-comp-switch-handle-size-width-dense);height:var(--ids-comp-switch-handle-size-height-dense);border-radius:var(--ids-comp-switch-handle-size-border-radius-dense);transition:left 100ms ease-in-out}.ids-switch.ids-switch-dense>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{width:var(--ids-comp-switch-icon-size-width-dense);height:var(--ids-comp-switch-icon-size-height-dense)}.ids-switch.ids-switch-dense>.ids-switch__label{font-family:var(--ids-comp-switch-label-typography-font-family-dense);font-size:var(--ids-comp-switch-label-typography-font-size-dense);font-weight:var(--ids-comp-switch-label-typography-font-weight-dense);line-height:var(--ids-comp-switch-label-typography-line-height-dense);letter-spacing:var(--ids-comp-switch-label-typography-letter-spacing-dense)}.ids-switch.ids-switch-dense:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__handle{left:var(--ids-comp-switch-track-size-padding-x-dense)}.ids-switch.ids-switch-dense.ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle{left:calc(100% - var(--ids-comp-switch-track-size-padding-x-dense) - var(--ids-comp-switch-handle-size-width-dense))}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button>.ids-switch__track{background-color:var(--ids-comp-switch-track-off-color-bg-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-off-color-fg-icon-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-off-color-bg-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-off-color-fg-icon-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button+.ids-switch__label{color:var(--ids-comp-switch-label-color-fg-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track{background-color:var(--ids-comp-switch-track-off-color-bg-surface-hovered)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-off-color-fg-icon-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-off-color-bg-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-off-color-fg-icon-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:hover+.ids-switch__label{color:var(--ids-comp-switch-label-color-fg-surface-hovered)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:active>.ids-switch__track{background-color:var(--ids-comp-switch-track-off-color-bg-surface-pressed)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:active>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-off-color-fg-icon-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:active>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-off-color-bg-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:active>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-off-color-fg-icon-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:active+.ids-switch__label{color:var(--ids-comp-switch-label-color-fg-surface-pressed)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:focus,.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:focus-visible{outline-color:var(--ids-comp-switch-focused-outline-color-surface-focused)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:focus>.ids-switch__track,.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:focus-visible>.ids-switch__track{background-color:var(--ids-comp-switch-track-off-color-bg-surface-focused)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:focus>.ids-switch__track>.ids-switch__track-icon>.ids-icon,.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:focus-visible>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-off-color-fg-icon-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle,.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:focus-visible>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-off-color-bg-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle>.ids-icon,.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:focus-visible>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-off-color-fg-icon-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:focus+.ids-switch__label,.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:focus-visible+.ids-switch__label{color:var(--ids-comp-switch-label-color-fg-surface-focused)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button>.ids-switch__track{background-color:var(--ids-comp-switch-track-on-color-bg-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-on-color-fg-icon-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-on-color-bg-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-on-color-fg-icon-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track{background-color:var(--ids-comp-switch-track-on-color-bg-surface-hovered)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-on-color-fg-icon-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-on-color-bg-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-on-color-fg-icon-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:active>.ids-switch__track{background-color:var(--ids-comp-switch-track-on-color-bg-surface-pressed)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:active>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-on-color-fg-icon-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:active>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-on-color-bg-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:active>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-on-color-fg-icon-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track{background-color:var(--ids-comp-switch-track-on-color-bg-surface-focused)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-on-color-fg-icon-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-on-color-bg-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-on-color-fg-icon-surface-default)}.ids-switch.ids-switch-surface.ids-switch-disabled>.ids-switch__button+.ids-switch__label{color:var(--ids-comp-switch-label-color-fg-surface-disabled)}.ids-switch.ids-switch-surface.ids-switch-disabled:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track{background-color:var(--ids-comp-switch-track-off-color-bg-surface-disabled)}.ids-switch.ids-switch-surface.ids-switch-disabled:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-off-color-fg-icon-surface-disabled)}.ids-switch.ids-switch-surface.ids-switch-disabled:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-off-color-bg-surface-disabled)}.ids-switch.ids-switch-surface.ids-switch-disabled:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-off-color-fg-icon-surface-disabled)}.ids-switch.ids-switch-surface.ids-switch-disabled.ids-switch-on>.ids-switch__button>.ids-switch__track{background-color:var(--ids-comp-switch-track-on-color-bg-surface-disabled)}.ids-switch.ids-switch-surface.ids-switch-disabled.ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-on-color-fg-icon-surface-disabled)}.ids-switch.ids-switch-surface.ids-switch-disabled.ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-on-color-bg-surface-disabled)}.ids-switch.ids-switch-surface.ids-switch-disabled.ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-on-color-fg-icon-surface-disabled)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button>.ids-switch__track{background-color:var(--ids-comp-switch-track-off-color-bg-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-off-color-fg-icon-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-off-color-bg-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-off-color-fg-icon-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button+.ids-switch__label{color:var(--ids-comp-switch-label-color-fg-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track{background-color:var(--ids-comp-switch-track-off-color-bg-light-hovered)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-off-color-fg-icon-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-off-color-bg-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-off-color-fg-icon-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:hover+.ids-switch__label{color:var(--ids-comp-switch-label-color-fg-light-hovered)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:active>.ids-switch__track{background-color:var(--ids-comp-switch-track-off-color-bg-light-pressed)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:active>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-off-color-fg-icon-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:active>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-off-color-bg-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:active>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-off-color-fg-icon-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:active+.ids-switch__label{color:var(--ids-comp-switch-label-color-fg-light-pressed)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:focus,.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:focus-visible{outline-color:var(--ids-comp-switch-focused-outline-color-light-focused)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:focus>.ids-switch__track,.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:focus-visible>.ids-switch__track{background-color:var(--ids-comp-switch-track-off-color-bg-light-focused)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:focus>.ids-switch__track>.ids-switch__track-icon>.ids-icon,.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:focus-visible>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-off-color-fg-icon-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle,.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:focus-visible>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-off-color-bg-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle>.ids-icon,.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:focus-visible>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-off-color-fg-icon-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:focus+.ids-switch__label,.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:focus-visible+.ids-switch__label{color:var(--ids-comp-switch-label-color-fg-light-focused)}.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button>.ids-switch__track{background-color:var(--ids-comp-switch-track-on-color-bg-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-on-color-fg-icon-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-on-color-bg-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-on-color-fg-icon-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track{background-color:var(--ids-comp-switch-track-on-color-bg-light-hovered)}.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-on-color-fg-icon-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-on-color-bg-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-on-color-fg-icon-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:active>.ids-switch__track{background-color:var(--ids-comp-switch-track-on-color-bg-light-pressed)}.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:active>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-on-color-fg-icon-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:active>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-on-color-bg-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:active>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-on-color-fg-icon-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track{background-color:var(--ids-comp-switch-track-on-color-bg-light-focused)}.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-on-color-fg-icon-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-on-color-bg-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-on-color-fg-icon-light-default)}.ids-switch.ids-switch-light.ids-switch-disabled>.ids-switch__button+.ids-switch__label{color:var(--ids-comp-switch-label-color-fg-light-disabled)}.ids-switch.ids-switch-light.ids-switch-disabled:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track{background-color:var(--ids-comp-switch-track-off-color-bg-light-disabled)}.ids-switch.ids-switch-light.ids-switch-disabled:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-off-color-fg-icon-light-disabled)}.ids-switch.ids-switch-light.ids-switch-disabled:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-off-color-bg-light-disabled)}.ids-switch.ids-switch-light.ids-switch-disabled:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-off-color-fg-icon-light-disabled)}.ids-switch.ids-switch-light.ids-switch-disabled.ids-switch-on>.ids-switch__button>.ids-switch__track{background-color:var(--ids-comp-switch-track-on-color-bg-light-disabled)}.ids-switch.ids-switch-light.ids-switch-disabled.ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-on-color-fg-icon-light-disabled)}.ids-switch.ids-switch-light.ids-switch-disabled.ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-on-color-bg-light-disabled)}.ids-switch.ids-switch-light.ids-switch-disabled.ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-on-color-fg-icon-light-disabled)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button>.ids-switch__track{background-color:var(--ids-comp-switch-track-off-color-bg-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-off-color-fg-icon-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-off-color-bg-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-off-color-fg-icon-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button+.ids-switch__label{color:var(--ids-comp-switch-label-color-fg-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track{background-color:var(--ids-comp-switch-track-off-color-bg-primary-hovered)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-off-color-fg-icon-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-off-color-bg-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-off-color-fg-icon-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:hover+.ids-switch__label{color:var(--ids-comp-switch-label-color-fg-primary-hovered)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:active>.ids-switch__track{background-color:var(--ids-comp-switch-track-off-color-bg-primary-pressed)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:active>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-off-color-fg-icon-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:active>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-off-color-bg-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:active>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-off-color-fg-icon-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:active+.ids-switch__label{color:var(--ids-comp-switch-label-color-fg-primary-pressed)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:focus,.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:focus-visible{outline-color:var(--ids-comp-switch-focused-outline-color-primary-focused)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:focus>.ids-switch__track,.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:focus-visible>.ids-switch__track{background-color:var(--ids-comp-switch-track-off-color-bg-primary-focused)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:focus>.ids-switch__track>.ids-switch__track-icon>.ids-icon,.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:focus-visible>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-off-color-fg-icon-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle,.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:focus-visible>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-off-color-bg-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle>.ids-icon,.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:focus-visible>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-off-color-fg-icon-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:focus+.ids-switch__label,.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:focus-visible+.ids-switch__label{color:var(--ids-comp-switch-label-color-fg-primary-focused)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button>.ids-switch__track{background-color:var(--ids-comp-switch-track-on-color-bg-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-on-color-fg-icon-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-on-color-bg-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-on-color-fg-icon-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track{background-color:var(--ids-comp-switch-track-on-color-bg-primary-hovered)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-on-color-fg-icon-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-on-color-bg-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-on-color-fg-icon-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:active>.ids-switch__track{background-color:var(--ids-comp-switch-track-on-color-bg-primary-pressed)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:active>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-on-color-fg-icon-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:active>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-on-color-bg-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:active>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-on-color-fg-icon-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track{background-color:var(--ids-comp-switch-track-on-color-bg-primary-focused)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-on-color-fg-icon-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-on-color-bg-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-on-color-fg-icon-primary-default)}.ids-switch.ids-switch-primary.ids-switch-disabled>.ids-switch__button+.ids-switch__label{color:var(--ids-comp-switch-label-color-fg-primary-disabled)}.ids-switch.ids-switch-primary.ids-switch-disabled:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track{background-color:var(--ids-comp-switch-track-off-color-bg-primary-disabled)}.ids-switch.ids-switch-primary.ids-switch-disabled:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-off-color-fg-icon-primary-disabled)}.ids-switch.ids-switch-primary.ids-switch-disabled:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-off-color-bg-primary-disabled)}.ids-switch.ids-switch-primary.ids-switch-disabled:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-off-color-fg-icon-primary-disabled)}.ids-switch.ids-switch-primary.ids-switch-disabled.ids-switch-on>.ids-switch__button>.ids-switch__track{background-color:var(--ids-comp-switch-track-on-color-bg-primary-disabled)}.ids-switch.ids-switch-primary.ids-switch-disabled.ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-on-color-fg-icon-primary-disabled)}.ids-switch.ids-switch-primary.ids-switch-disabled.ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-on-color-bg-primary-disabled)}.ids-switch.ids-switch-primary.ids-switch-disabled.ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-on-color-fg-icon-primary-disabled)}.ids-switch.ids-switch-disabled{cursor:not-allowed}
1
+ .ids-switch-group{display:flex;flex-direction:column}.ids-switch-group.ids-switch-group-compact{gap:var(--ids-comp-switch-group-container-size-gap-compact);padding:var(--ids-comp-switch-group-container-size-padding-y-compact) var(--ids-comp-switch-group-container-size-padding-x-compact)}.ids-switch-group.ids-switch-group-comfortable{gap:var(--ids-comp-switch-group-container-size-gap-comfortable);padding:var(--ids-comp-switch-group-container-size-padding-y-comfortable) var(--ids-comp-switch-group-container-size-padding-x-comfortable)}.ids-switch-group.ids-switch-group-spacious{gap:var(--ids-comp-switch-group-container-size-gap-spacious);padding:var(--ids-comp-switch-group-container-size-padding-y-spacious) var(--ids-comp-switch-group-container-size-padding-x-spacious)}.ids-switch-group.ids-switch-group-dense{gap:var(--ids-comp-switch-group-container-size-gap-dense);padding:var(--ids-comp-switch-group-container-size-padding-y-dense) var(--ids-comp-switch-group-container-size-padding-x-dense)}.ids-switch{display:inline-flex;align-items:center}.ids-switch>.ids-switch__button{background:none;border:none;margin:0;padding:0;cursor:pointer}.ids-switch>.ids-switch__button:disabled{pointer-events:none}.ids-switch>.ids-switch__button:focus,.ids-switch>.ids-switch__button:focus-visible{outline-offset:2px;outline-style:solid}.ids-switch>.ids-switch__button>.ids-switch__track{position:relative;display:flex;align-items:center;justify-content:space-between}.ids-switch>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon{position:absolute;display:flex;align-items:center;justify-content:center;top:auto;bottom:auto}.ids-switch>.ids-switch__button>.ids-switch__track>.ids-switch__handle{position:relative;display:flex;justify-content:center;align-items:center;flex-shrink:0}.ids-switch>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{position:absolute}.ids-switch>.ids-switch__label{font-style:normal}.ids-switch.ids-switch-compact{gap:var(--ids-comp-switch-container-size-gap-compact)}.ids-switch.ids-switch-compact>.ids-switch__button{border-radius:var(--ids-comp-switch-handle-size-border-radius-compact)}.ids-switch.ids-switch-compact>.ids-switch__button:focus,.ids-switch.ids-switch-compact>.ids-switch__button:focus-visible{outline-width:var(--ids-comp-switch-focused-outline-outline-compact)}.ids-switch.ids-switch-compact>.ids-switch__button>.ids-switch__track{width:var(--ids-comp-switch-track-size-width-compact);height:var(--ids-comp-switch-handle-size-height-compact);padding:var(--ids-comp-switch-track-size-padding-y-compact) var(--ids-comp-switch-track-size-padding-x-compact);border-radius:var(--ids-comp-switch-track-size-border-radius-compact);box-sizing:content-box}.ids-switch.ids-switch-compact>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon{width:var(--ids-comp-switch-handle-size-width-compact);height:var(--ids-comp-switch-handle-size-height-compact)}.ids-switch.ids-switch-compact>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon{width:var(--ids-comp-switch-icon-size-width-compact);height:var(--ids-comp-switch-icon-size-height-compact)}.ids-switch.ids-switch-compact>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon:nth-child(1){left:var(--ids-comp-switch-track-size-padding-x-compact)}.ids-switch.ids-switch-compact>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon:nth-child(2){right:var(--ids-comp-switch-track-size-padding-x-compact)}.ids-switch.ids-switch-compact>.ids-switch__button>.ids-switch__track>.ids-switch__handle{width:var(--ids-comp-switch-handle-size-width-compact);height:var(--ids-comp-switch-handle-size-height-compact);border-radius:var(--ids-comp-switch-handle-size-border-radius-compact);transition:left 100ms ease-in-out}.ids-switch.ids-switch-compact>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{width:var(--ids-comp-switch-icon-size-width-compact);height:var(--ids-comp-switch-icon-size-height-compact)}.ids-switch.ids-switch-compact>.ids-switch__label{font-family:var(--ids-comp-switch-label-typography-font-family-compact);font-size:var(--ids-comp-switch-label-typography-font-size-compact);font-weight:var(--ids-comp-switch-label-typography-font-weight-compact);line-height:var(--ids-comp-switch-label-typography-line-height-compact);letter-spacing:var(--ids-comp-switch-label-typography-letter-spacing-compact)}.ids-switch.ids-switch-compact:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__handle{left:0}.ids-switch.ids-switch-compact.ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle{left:calc(var(--ids-comp-switch-track-size-width-compact) - var(--ids-comp-switch-handle-size-width-compact))}.ids-switch.ids-switch-comfortable{gap:var(--ids-comp-switch-container-size-gap-comfortable)}.ids-switch.ids-switch-comfortable>.ids-switch__button{border-radius:var(--ids-comp-switch-handle-size-border-radius-comfortable)}.ids-switch.ids-switch-comfortable>.ids-switch__button:focus,.ids-switch.ids-switch-comfortable>.ids-switch__button:focus-visible{outline-width:var(--ids-comp-switch-focused-outline-outline-comfortable)}.ids-switch.ids-switch-comfortable>.ids-switch__button>.ids-switch__track{width:var(--ids-comp-switch-track-size-width-comfortable);height:var(--ids-comp-switch-handle-size-height-comfortable);padding:var(--ids-comp-switch-track-size-padding-y-comfortable) var(--ids-comp-switch-track-size-padding-x-comfortable);border-radius:var(--ids-comp-switch-track-size-border-radius-comfortable);box-sizing:content-box}.ids-switch.ids-switch-comfortable>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon{width:var(--ids-comp-switch-handle-size-width-comfortable);height:var(--ids-comp-switch-handle-size-height-comfortable)}.ids-switch.ids-switch-comfortable>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon{width:var(--ids-comp-switch-icon-size-width-comfortable);height:var(--ids-comp-switch-icon-size-height-comfortable)}.ids-switch.ids-switch-comfortable>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon:nth-child(1){left:var(--ids-comp-switch-track-size-padding-x-comfortable)}.ids-switch.ids-switch-comfortable>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon:nth-child(2){right:var(--ids-comp-switch-track-size-padding-x-comfortable)}.ids-switch.ids-switch-comfortable>.ids-switch__button>.ids-switch__track>.ids-switch__handle{width:var(--ids-comp-switch-handle-size-width-comfortable);height:var(--ids-comp-switch-handle-size-height-comfortable);border-radius:var(--ids-comp-switch-handle-size-border-radius-comfortable);transition:left 100ms ease-in-out}.ids-switch.ids-switch-comfortable>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{width:var(--ids-comp-switch-icon-size-width-comfortable);height:var(--ids-comp-switch-icon-size-height-comfortable)}.ids-switch.ids-switch-comfortable>.ids-switch__label{font-family:var(--ids-comp-switch-label-typography-font-family-comfortable);font-size:var(--ids-comp-switch-label-typography-font-size-comfortable);font-weight:var(--ids-comp-switch-label-typography-font-weight-comfortable);line-height:var(--ids-comp-switch-label-typography-line-height-comfortable);letter-spacing:var(--ids-comp-switch-label-typography-letter-spacing-comfortable)}.ids-switch.ids-switch-comfortable:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__handle{left:0}.ids-switch.ids-switch-comfortable.ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle{left:calc(var(--ids-comp-switch-track-size-width-comfortable) - var(--ids-comp-switch-handle-size-width-comfortable))}.ids-switch.ids-switch-spacious{gap:var(--ids-comp-switch-container-size-gap-spacious)}.ids-switch.ids-switch-spacious>.ids-switch__button{border-radius:var(--ids-comp-switch-handle-size-border-radius-spacious)}.ids-switch.ids-switch-spacious>.ids-switch__button:focus,.ids-switch.ids-switch-spacious>.ids-switch__button:focus-visible{outline-width:var(--ids-comp-switch-focused-outline-outline-spacious)}.ids-switch.ids-switch-spacious>.ids-switch__button>.ids-switch__track{width:var(--ids-comp-switch-track-size-width-spacious);height:var(--ids-comp-switch-handle-size-height-spacious);padding:var(--ids-comp-switch-track-size-padding-y-spacious) var(--ids-comp-switch-track-size-padding-x-spacious);border-radius:var(--ids-comp-switch-track-size-border-radius-spacious);box-sizing:content-box}.ids-switch.ids-switch-spacious>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon{width:var(--ids-comp-switch-handle-size-width-spacious);height:var(--ids-comp-switch-handle-size-height-spacious)}.ids-switch.ids-switch-spacious>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon{width:var(--ids-comp-switch-icon-size-width-spacious);height:var(--ids-comp-switch-icon-size-height-spacious)}.ids-switch.ids-switch-spacious>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon:nth-child(1){left:var(--ids-comp-switch-track-size-padding-x-spacious)}.ids-switch.ids-switch-spacious>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon:nth-child(2){right:var(--ids-comp-switch-track-size-padding-x-spacious)}.ids-switch.ids-switch-spacious>.ids-switch__button>.ids-switch__track>.ids-switch__handle{width:var(--ids-comp-switch-handle-size-width-spacious);height:var(--ids-comp-switch-handle-size-height-spacious);border-radius:var(--ids-comp-switch-handle-size-border-radius-spacious);transition:left 100ms ease-in-out}.ids-switch.ids-switch-spacious>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{width:var(--ids-comp-switch-icon-size-width-spacious);height:var(--ids-comp-switch-icon-size-height-spacious)}.ids-switch.ids-switch-spacious>.ids-switch__label{font-family:var(--ids-comp-switch-label-typography-font-family-spacious);font-size:var(--ids-comp-switch-label-typography-font-size-spacious);font-weight:var(--ids-comp-switch-label-typography-font-weight-spacious);line-height:var(--ids-comp-switch-label-typography-line-height-spacious);letter-spacing:var(--ids-comp-switch-label-typography-letter-spacing-spacious)}.ids-switch.ids-switch-spacious:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__handle{left:0}.ids-switch.ids-switch-spacious.ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle{left:calc(var(--ids-comp-switch-track-size-width-spacious) - var(--ids-comp-switch-handle-size-width-spacious))}.ids-switch.ids-switch-dense{gap:var(--ids-comp-switch-container-size-gap-dense)}.ids-switch.ids-switch-dense>.ids-switch__button{border-radius:var(--ids-comp-switch-handle-size-border-radius-dense)}.ids-switch.ids-switch-dense>.ids-switch__button:focus,.ids-switch.ids-switch-dense>.ids-switch__button:focus-visible{outline-width:var(--ids-comp-switch-focused-outline-outline-dense)}.ids-switch.ids-switch-dense>.ids-switch__button>.ids-switch__track{width:var(--ids-comp-switch-track-size-width-dense);height:var(--ids-comp-switch-handle-size-height-dense);padding:var(--ids-comp-switch-track-size-padding-y-dense) var(--ids-comp-switch-track-size-padding-x-dense);border-radius:var(--ids-comp-switch-track-size-border-radius-dense);box-sizing:content-box}.ids-switch.ids-switch-dense>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon{width:var(--ids-comp-switch-handle-size-width-dense);height:var(--ids-comp-switch-handle-size-height-dense)}.ids-switch.ids-switch-dense>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon{width:var(--ids-comp-switch-icon-size-width-dense);height:var(--ids-comp-switch-icon-size-height-dense)}.ids-switch.ids-switch-dense>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon:nth-child(1){left:var(--ids-comp-switch-track-size-padding-x-dense)}.ids-switch.ids-switch-dense>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon:nth-child(2){right:var(--ids-comp-switch-track-size-padding-x-dense)}.ids-switch.ids-switch-dense>.ids-switch__button>.ids-switch__track>.ids-switch__handle{width:var(--ids-comp-switch-handle-size-width-dense);height:var(--ids-comp-switch-handle-size-height-dense);border-radius:var(--ids-comp-switch-handle-size-border-radius-dense);transition:left 100ms ease-in-out}.ids-switch.ids-switch-dense>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{width:var(--ids-comp-switch-icon-size-width-dense);height:var(--ids-comp-switch-icon-size-height-dense)}.ids-switch.ids-switch-dense>.ids-switch__label{font-family:var(--ids-comp-switch-label-typography-font-family-dense);font-size:var(--ids-comp-switch-label-typography-font-size-dense);font-weight:var(--ids-comp-switch-label-typography-font-weight-dense);line-height:var(--ids-comp-switch-label-typography-line-height-dense);letter-spacing:var(--ids-comp-switch-label-typography-letter-spacing-dense)}.ids-switch.ids-switch-dense:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__handle{left:0}.ids-switch.ids-switch-dense.ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle{left:calc(var(--ids-comp-switch-track-size-width-dense) - var(--ids-comp-switch-handle-size-width-dense))}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button>.ids-switch__track{background-color:var(--ids-comp-switch-track-off-color-bg-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-off-color-fg-icon-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-off-color-bg-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-off-color-fg-icon-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button+.ids-switch__label{color:var(--ids-comp-switch-label-color-fg-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track{background-color:var(--ids-comp-switch-track-off-color-bg-surface-hovered)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-off-color-fg-icon-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-off-color-bg-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-off-color-fg-icon-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:hover+.ids-switch__label{color:var(--ids-comp-switch-label-color-fg-surface-hovered)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:active>.ids-switch__track{background-color:var(--ids-comp-switch-track-off-color-bg-surface-pressed)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:active>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-off-color-fg-icon-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:active>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-off-color-bg-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:active>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-off-color-fg-icon-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:active+.ids-switch__label{color:var(--ids-comp-switch-label-color-fg-surface-pressed)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:focus,.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:focus-visible{outline-color:var(--ids-comp-switch-focused-outline-color-surface-focused)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:focus>.ids-switch__track,.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:focus-visible>.ids-switch__track{background-color:var(--ids-comp-switch-track-off-color-bg-surface-focused)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:focus>.ids-switch__track>.ids-switch__track-icon>.ids-icon,.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:focus-visible>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-off-color-fg-icon-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle,.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:focus-visible>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-off-color-bg-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle>.ids-icon,.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:focus-visible>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-off-color-fg-icon-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:focus+.ids-switch__label,.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:focus-visible+.ids-switch__label{color:var(--ids-comp-switch-label-color-fg-surface-focused)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button>.ids-switch__track{background-color:var(--ids-comp-switch-track-on-color-bg-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-on-color-fg-icon-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-on-color-bg-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-on-color-fg-icon-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track{background-color:var(--ids-comp-switch-track-on-color-bg-surface-hovered)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-on-color-fg-icon-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-on-color-bg-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-on-color-fg-icon-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:active>.ids-switch__track{background-color:var(--ids-comp-switch-track-on-color-bg-surface-pressed)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:active>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-on-color-fg-icon-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:active>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-on-color-bg-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:active>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-on-color-fg-icon-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track{background-color:var(--ids-comp-switch-track-on-color-bg-surface-focused)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-on-color-fg-icon-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-on-color-bg-surface-default)}.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-on-color-fg-icon-surface-default)}.ids-switch.ids-switch-surface.ids-switch-disabled>.ids-switch__button+.ids-switch__label{color:var(--ids-comp-switch-label-color-fg-surface-disabled)}.ids-switch.ids-switch-surface.ids-switch-disabled:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track{background-color:var(--ids-comp-switch-track-off-color-bg-surface-disabled)}.ids-switch.ids-switch-surface.ids-switch-disabled:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-off-color-fg-icon-surface-disabled)}.ids-switch.ids-switch-surface.ids-switch-disabled:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-off-color-bg-surface-disabled)}.ids-switch.ids-switch-surface.ids-switch-disabled:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-off-color-fg-icon-surface-disabled)}.ids-switch.ids-switch-surface.ids-switch-disabled.ids-switch-on>.ids-switch__button>.ids-switch__track{background-color:var(--ids-comp-switch-track-on-color-bg-surface-disabled)}.ids-switch.ids-switch-surface.ids-switch-disabled.ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-on-color-fg-icon-surface-disabled)}.ids-switch.ids-switch-surface.ids-switch-disabled.ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-on-color-bg-surface-disabled)}.ids-switch.ids-switch-surface.ids-switch-disabled.ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-on-color-fg-icon-surface-disabled)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button>.ids-switch__track{background-color:var(--ids-comp-switch-track-off-color-bg-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-off-color-fg-icon-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-off-color-bg-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-off-color-fg-icon-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button+.ids-switch__label{color:var(--ids-comp-switch-label-color-fg-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track{background-color:var(--ids-comp-switch-track-off-color-bg-light-hovered)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-off-color-fg-icon-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-off-color-bg-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-off-color-fg-icon-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:hover+.ids-switch__label{color:var(--ids-comp-switch-label-color-fg-light-hovered)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:active>.ids-switch__track{background-color:var(--ids-comp-switch-track-off-color-bg-light-pressed)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:active>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-off-color-fg-icon-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:active>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-off-color-bg-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:active>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-off-color-fg-icon-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:active+.ids-switch__label{color:var(--ids-comp-switch-label-color-fg-light-pressed)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:focus,.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:focus-visible{outline-color:var(--ids-comp-switch-focused-outline-color-light-focused)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:focus>.ids-switch__track,.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:focus-visible>.ids-switch__track{background-color:var(--ids-comp-switch-track-off-color-bg-light-focused)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:focus>.ids-switch__track>.ids-switch__track-icon>.ids-icon,.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:focus-visible>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-off-color-fg-icon-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle,.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:focus-visible>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-off-color-bg-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle>.ids-icon,.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:focus-visible>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-off-color-fg-icon-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:focus+.ids-switch__label,.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:focus-visible+.ids-switch__label{color:var(--ids-comp-switch-label-color-fg-light-focused)}.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button>.ids-switch__track{background-color:var(--ids-comp-switch-track-on-color-bg-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-on-color-fg-icon-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-on-color-bg-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-on-color-fg-icon-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track{background-color:var(--ids-comp-switch-track-on-color-bg-light-hovered)}.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-on-color-fg-icon-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-on-color-bg-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-on-color-fg-icon-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:active>.ids-switch__track{background-color:var(--ids-comp-switch-track-on-color-bg-light-pressed)}.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:active>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-on-color-fg-icon-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:active>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-on-color-bg-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:active>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-on-color-fg-icon-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track{background-color:var(--ids-comp-switch-track-on-color-bg-light-focused)}.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-on-color-fg-icon-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-on-color-bg-light-default)}.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-on-color-fg-icon-light-default)}.ids-switch.ids-switch-light.ids-switch-disabled>.ids-switch__button+.ids-switch__label{color:var(--ids-comp-switch-label-color-fg-light-disabled)}.ids-switch.ids-switch-light.ids-switch-disabled:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track{background-color:var(--ids-comp-switch-track-off-color-bg-light-disabled)}.ids-switch.ids-switch-light.ids-switch-disabled:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-off-color-fg-icon-light-disabled)}.ids-switch.ids-switch-light.ids-switch-disabled:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-off-color-bg-light-disabled)}.ids-switch.ids-switch-light.ids-switch-disabled:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-off-color-fg-icon-light-disabled)}.ids-switch.ids-switch-light.ids-switch-disabled.ids-switch-on>.ids-switch__button>.ids-switch__track{background-color:var(--ids-comp-switch-track-on-color-bg-light-disabled)}.ids-switch.ids-switch-light.ids-switch-disabled.ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-on-color-fg-icon-light-disabled)}.ids-switch.ids-switch-light.ids-switch-disabled.ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-on-color-bg-light-disabled)}.ids-switch.ids-switch-light.ids-switch-disabled.ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-on-color-fg-icon-light-disabled)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button>.ids-switch__track{background-color:var(--ids-comp-switch-track-off-color-bg-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-off-color-fg-icon-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-off-color-bg-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-off-color-fg-icon-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button+.ids-switch__label{color:var(--ids-comp-switch-label-color-fg-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track{background-color:var(--ids-comp-switch-track-off-color-bg-primary-hovered)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-off-color-fg-icon-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-off-color-bg-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-off-color-fg-icon-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:hover+.ids-switch__label{color:var(--ids-comp-switch-label-color-fg-primary-hovered)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:active>.ids-switch__track{background-color:var(--ids-comp-switch-track-off-color-bg-primary-pressed)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:active>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-off-color-fg-icon-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:active>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-off-color-bg-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:active>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-off-color-fg-icon-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:active+.ids-switch__label{color:var(--ids-comp-switch-label-color-fg-primary-pressed)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:focus,.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:focus-visible{outline-color:var(--ids-comp-switch-focused-outline-color-primary-focused)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:focus>.ids-switch__track,.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:focus-visible>.ids-switch__track{background-color:var(--ids-comp-switch-track-off-color-bg-primary-focused)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:focus>.ids-switch__track>.ids-switch__track-icon>.ids-icon,.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:focus-visible>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-off-color-fg-icon-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle,.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:focus-visible>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-off-color-bg-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle>.ids-icon,.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:focus-visible>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-off-color-fg-icon-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:focus+.ids-switch__label,.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:focus-visible+.ids-switch__label{color:var(--ids-comp-switch-label-color-fg-primary-focused)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button>.ids-switch__track{background-color:var(--ids-comp-switch-track-on-color-bg-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-on-color-fg-icon-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-on-color-bg-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-on-color-fg-icon-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track{background-color:var(--ids-comp-switch-track-on-color-bg-primary-hovered)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-on-color-fg-icon-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-on-color-bg-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-on-color-fg-icon-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:active>.ids-switch__track{background-color:var(--ids-comp-switch-track-on-color-bg-primary-pressed)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:active>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-on-color-fg-icon-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:active>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-on-color-bg-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:active>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-on-color-fg-icon-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track{background-color:var(--ids-comp-switch-track-on-color-bg-primary-focused)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-on-color-fg-icon-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-on-color-bg-primary-default)}.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-on-color-fg-icon-primary-default)}.ids-switch.ids-switch-primary.ids-switch-disabled>.ids-switch__button+.ids-switch__label{color:var(--ids-comp-switch-label-color-fg-primary-disabled)}.ids-switch.ids-switch-primary.ids-switch-disabled:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track{background-color:var(--ids-comp-switch-track-off-color-bg-primary-disabled)}.ids-switch.ids-switch-primary.ids-switch-disabled:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-off-color-fg-icon-primary-disabled)}.ids-switch.ids-switch-primary.ids-switch-disabled:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-off-color-bg-primary-disabled)}.ids-switch.ids-switch-primary.ids-switch-disabled:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-off-color-fg-icon-primary-disabled)}.ids-switch.ids-switch-primary.ids-switch-disabled.ids-switch-on>.ids-switch__button>.ids-switch__track{background-color:var(--ids-comp-switch-track-on-color-bg-primary-disabled)}.ids-switch.ids-switch-primary.ids-switch-disabled.ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon{color:var(--ids-comp-switch-track-on-color-fg-icon-primary-disabled)}.ids-switch.ids-switch-primary.ids-switch-disabled.ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle{background-color:var(--ids-comp-switch-handle-on-color-bg-primary-disabled)}.ids-switch.ids-switch-primary.ids-switch-disabled.ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon{color:var(--ids-comp-switch-handle-on-color-fg-icon-primary-disabled)}.ids-switch.ids-switch-disabled{cursor:not-allowed}
package/dist/switch/switch.plugin.js CHANGED
@@ -43,9 +43,8 @@ module.exports = function SwitchPlugin() {
43
43
  top: 'auto',
44
44
  bottom: 'auto',
45
45
  },
46
- '.ids-switch>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon': { position: 'absolute' },
47
46
  '.ids-switch>.ids-switch__button>.ids-switch__track>.ids-switch__handle': {
48
- position: 'absolute',
47
+ position: 'relative',
49
48
  display: 'flex',
50
49
  justifyContent: 'center',
51
50
  alignItems: 'center',
@@ -96,11 +95,9 @@ module.exports = function SwitchPlugin() {
96
95
  lineHeight: 'var(--ids-comp-switch-label-typography-line-height-compact)',
97
96
  letterSpacing: 'var(--ids-comp-switch-label-typography-letter-spacing-compact)',
98
97
  },
99
- '.ids-switch.ids-switch-compact:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__handle': {
100
- left: 'var(--ids-comp-switch-track-size-padding-x-compact)',
101
- },
98
+ '.ids-switch.ids-switch-compact:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__handle': { left: '0' },
102
99
  '.ids-switch.ids-switch-compact.ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle': {
103
- left: 'calc(100% - var(--ids-comp-switch-track-size-padding-x-compact) - var(--ids-comp-switch-handle-size-width-compact))',
100
+ left: 'calc(var(--ids-comp-switch-track-size-width-compact) - var(--ids-comp-switch-handle-size-width-compact))',
104
101
  },
105
102
  '.ids-switch.ids-switch-comfortable': { gap: 'var(--ids-comp-switch-container-size-gap-comfortable)' },
106
103
  '.ids-switch.ids-switch-comfortable>.ids-switch__button': {
@@ -147,11 +144,9 @@ module.exports = function SwitchPlugin() {
147
144
  lineHeight: 'var(--ids-comp-switch-label-typography-line-height-comfortable)',
148
145
  letterSpacing: 'var(--ids-comp-switch-label-typography-letter-spacing-comfortable)',
149
146
  },
150
- '.ids-switch.ids-switch-comfortable:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__handle': {
151
- left: 'var(--ids-comp-switch-track-size-padding-x-comfortable)',
152
- },
147
+ '.ids-switch.ids-switch-comfortable:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__handle': { left: '0' },
153
148
  '.ids-switch.ids-switch-comfortable.ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle': {
154
- left: 'calc(100% - var(--ids-comp-switch-track-size-padding-x-comfortable) - var(--ids-comp-switch-handle-size-width-comfortable))',
149
+ left: 'calc(var(--ids-comp-switch-track-size-width-comfortable) - var(--ids-comp-switch-handle-size-width-comfortable))',
155
150
  },
156
151
  '.ids-switch.ids-switch-spacious': { gap: 'var(--ids-comp-switch-container-size-gap-spacious)' },
157
152
  '.ids-switch.ids-switch-spacious>.ids-switch__button': { borderRadius: 'var(--ids-comp-switch-handle-size-border-radius-spacious)' },
@@ -196,11 +191,9 @@ module.exports = function SwitchPlugin() {
196
191
  lineHeight: 'var(--ids-comp-switch-label-typography-line-height-spacious)',
197
192
  letterSpacing: 'var(--ids-comp-switch-label-typography-letter-spacing-spacious)',
198
193
  },
199
- '.ids-switch.ids-switch-spacious:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__handle': {
200
- left: 'var(--ids-comp-switch-track-size-padding-x-spacious)',
201
- },
194
+ '.ids-switch.ids-switch-spacious:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__handle': { left: '0' },
202
195
  '.ids-switch.ids-switch-spacious.ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle': {
203
- left: 'calc(100% - var(--ids-comp-switch-track-size-padding-x-spacious) - var(--ids-comp-switch-handle-size-width-spacious))',
196
+ left: 'calc(var(--ids-comp-switch-track-size-width-spacious) - var(--ids-comp-switch-handle-size-width-spacious))',
204
197
  },
205
198
  '.ids-switch.ids-switch-dense': { gap: 'var(--ids-comp-switch-container-size-gap-dense)' },
206
199
  '.ids-switch.ids-switch-dense>.ids-switch__button': { borderRadius: 'var(--ids-comp-switch-handle-size-border-radius-dense)' },
@@ -245,11 +238,9 @@ module.exports = function SwitchPlugin() {
245
238
  lineHeight: 'var(--ids-comp-switch-label-typography-line-height-dense)',
246
239
  letterSpacing: 'var(--ids-comp-switch-label-typography-letter-spacing-dense)',
247
240
  },
248
- '.ids-switch.ids-switch-dense:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__handle': {
249
- left: 'var(--ids-comp-switch-track-size-padding-x-dense)',
250
- },
241
+ '.ids-switch.ids-switch-dense:not(.ids-switch-on)>.ids-switch__button>.ids-switch__track>.ids-switch__handle': { left: '0' },
251
242
  '.ids-switch.ids-switch-dense.ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle': {
252
- left: 'calc(100% - var(--ids-comp-switch-track-size-padding-x-dense) - var(--ids-comp-switch-handle-size-width-dense))',
243
+ left: 'calc(var(--ids-comp-switch-track-size-width-dense) - var(--ids-comp-switch-handle-size-width-dense))',
253
244
  },
254
245
  '.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button>.ids-switch__track': {
255
246
  backgroundColor: 'var(--ids-comp-switch-track-off-color-bg-surface-default)',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@i-cell/ids-styles",
3
- "version": "0.0.14",
3
+ "version": "0.0.15-beta.0",
4
4
  "private": false,
5
5
  "description": "Stylesheets for i-Cell Design System UI Kit components (currently Vue and Angular)",
6
6
  "scripts": {
@@ -35,7 +35,7 @@
35
35
  },
36
36
  "homepage": "https://github.com/i-Cell-Mobilsoft-Open-Source/ids-styles#readme",
37
37
  "devDependencies": {
38
- "@i-cell/ids-tokens": "0.0.23",
38
+ "@i-cell/ids-tokens": "0.0.24-beta.5",
39
39
  "commander": "^12.1.0",
40
40
  "gulp": "^5.0.0",
41
41
  "gulp-prettier": "^6.0.0",