@i-cell/ids-styles 0.0.4 → 0.0.6

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.
@@ -1384,7 +1384,7 @@ module.exports = function ComponentsPlugin() {
1384
1384
  flexShrink: 0,
1385
1385
  borderStyle: 'solid',
1386
1386
  },
1387
- '.ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox]:focus': { outlineOffset: '3px', outlineStyle: 'solid' },
1387
+ '.ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox]:focus': { outlineOffset: '2px', outlineStyle: 'solid' },
1388
1388
  '.ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox]+.ids-checkbox__icon': { position: 'absolute' },
1389
1389
  '.ids-checkbox .ids-checkbox__label-wrapper': { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', flex: '1 0 0' },
1390
1390
  '.ids-checkbox .ids-checkbox__label-wrapper .ids-checkbox__label-container': { textAlign: 'start' },
@@ -3712,10 +3712,12 @@ module.exports = function ComponentsPlugin() {
3712
3712
  justifyContent: 'center',
3713
3713
  alignItems: 'center',
3714
3714
  fontStyle: 'normal',
3715
+ borderStyle: 'none',
3715
3716
  },
3716
3717
  '.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button:focus': {
3717
3718
  outlineWidth: 'var(--ids-comp-paginator-page-links-focused-outline-size-outline)',
3718
3719
  outlineStyle: 'solid',
3720
+ outlineOffset: '2px',
3719
3721
  },
3720
3722
  '.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-arrow.first,.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-arrow.previous':
3721
3723
  { order: 1 },
@@ -3729,9 +3731,7 @@ module.exports = function ComponentsPlugin() {
3729
3731
  alignItems: 'center',
3730
3732
  whiteSpace: 'nowrap',
3731
3733
  },
3732
- '.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container': {
3733
- gap: 'var(--ids-comp-paginator-size-gap-comfortable)',
3734
- },
3734
+ '.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container': { gap: 'var(--ids-comp-paginator-size-gap-compact)' },
3735
3735
  '.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button': {
3736
3736
  height: 'var(--ids-comp-paginator-page-links-size-height-compact)',
3737
3737
  minWidth: 'var(--ids-comp-paginator-page-links-size-min-width-compact)',
@@ -3743,6 +3743,13 @@ module.exports = function ComponentsPlugin() {
3743
3743
  lineHeight: 'var(--ids-comp-paginator-page-links-label-typography-line-height-compact)',
3744
3744
  borderRadius: 'var(--ids-comp-paginator-page-links-page-link-size-border-radius-compact)',
3745
3745
  },
3746
+ '.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-arrow': {
3747
+ gap: 'var(--ids-comp-paginator-page-links-size-gap-compact)',
3748
+ },
3749
+ '.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-arrow.previous>.ids-paginator__page-button-arrow__label':
3750
+ { paddingRight: 'var(--ids-comp-paginator-page-links-label-size-padding-right-compact)' },
3751
+ '.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-arrow.next>.ids-paginator__page-button-arrow__label':
3752
+ { paddingLeft: 'var(--ids-comp-paginator-page-links-label-size-padding-left-compact)' },
3746
3753
  '.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-truncation': {
3747
3754
  height: 'var(--ids-comp-paginator-page-links-size-height-compact)',
3748
3755
  width: 'var(--ids-comp-paginator-page-links-size-min-width-compact)',
@@ -3772,6 +3779,13 @@ module.exports = function ComponentsPlugin() {
3772
3779
  lineHeight: 'var(--ids-comp-paginator-page-links-label-typography-line-height-comfortable)',
3773
3780
  borderRadius: 'var(--ids-comp-paginator-page-links-page-link-size-border-radius-comfortable)',
3774
3781
  },
3782
+ '.ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button-arrow': {
3783
+ gap: 'var(--ids-comp-paginator-page-links-size-gap-comfortable)',
3784
+ },
3785
+ '.ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button-arrow.previous>.ids-paginator__page-button-arrow__label':
3786
+ { paddingRight: 'var(--ids-comp-paginator-page-links-label-size-padding-right-comfortable)' },
3787
+ '.ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button-arrow.next>.ids-paginator__page-button-arrow__label':
3788
+ { paddingLeft: 'var(--ids-comp-paginator-page-links-label-size-padding-left-comfortable)' },
3775
3789
  '.ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button-truncation': {
3776
3790
  height: 'var(--ids-comp-paginator-page-links-size-height-comfortable)',
3777
3791
  width: 'var(--ids-comp-paginator-page-links-size-min-width-comfortable)',
@@ -3786,9 +3800,7 @@ module.exports = function ComponentsPlugin() {
3786
3800
  height: 'var(--ids-comp-paginator-help-text-size-height-comfortable)',
3787
3801
  padding: 'var(--ids-comp-paginator-help-text-size-padding-y-comfortable)',
3788
3802
  },
3789
- '.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container': {
3790
- gap: 'var(--ids-comp-paginator-size-gap-comfortable)',
3791
- },
3803
+ '.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container': { gap: 'var(--ids-comp-paginator-size-gap-spacious)' },
3792
3804
  '.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button': {
3793
3805
  height: 'var(--ids-comp-paginator-page-links-size-height-spacious)',
3794
3806
  minWidth: 'var(--ids-comp-paginator-page-links-size-min-width-spacious)',
@@ -3801,6 +3813,13 @@ module.exports = function ComponentsPlugin() {
3801
3813
  lineHeight: 'var(--ids-comp-paginator-page-links-label-typography-line-height-spacious)',
3802
3814
  borderRadius: 'var(--ids-comp-paginator-page-links-page-link-size-border-radius-spacious)',
3803
3815
  },
3816
+ '.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button-arrow': {
3817
+ gap: 'var(--ids-comp-paginator-page-links-size-gap-spacious)',
3818
+ },
3819
+ '.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button-arrow.previous>.ids-paginator__page-button-arrow__label':
3820
+ { paddingRight: 'var(--ids-comp-paginator-page-links-label-size-padding-right-spacious)' },
3821
+ '.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button-arrow.next>.ids-paginator__page-button-arrow__label':
3822
+ { paddingLeft: 'var(--ids-comp-paginator-page-links-label-size-padding-left-spacious)' },
3804
3823
  '.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button-truncation': {
3805
3824
  height: 'var(--ids-comp-paginator-page-links-size-height-spacious)',
3806
3825
  width: 'var(--ids-comp-paginator-page-links-size-min-width-spacious)',
@@ -3815,7 +3834,7 @@ module.exports = function ComponentsPlugin() {
3815
3834
  height: 'var(--ids-comp-paginator-help-text-size-height-spacious)',
3816
3835
  padding: 'var(--ids-comp-paginator-help-text-size-padding-y-spacious)',
3817
3836
  },
3818
- '.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container': { gap: 'var(--ids-comp-paginator-size-gap-comfortable)' },
3837
+ '.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container': { gap: 'var(--ids-comp-paginator-size-gap-dense)' },
3819
3838
  '.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button': {
3820
3839
  height: 'var(--ids-comp-paginator-page-links-size-height-dense)',
3821
3840
  minWidth: 'var(--ids-comp-paginator-page-links-size-min-width-dense)',
@@ -3827,6 +3846,13 @@ module.exports = function ComponentsPlugin() {
3827
3846
  lineHeight: 'var(--ids-comp-paginator-page-links-label-typography-line-height-dense)',
3828
3847
  borderRadius: 'var(--ids-comp-paginator-page-links-page-link-size-border-radius-dense)',
3829
3848
  },
3849
+ '.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button-arrow': {
3850
+ gap: 'var(--ids-comp-paginator-page-links-size-gap-dense)',
3851
+ },
3852
+ '.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button-arrow.previous>.ids-paginator__page-button-arrow__label':
3853
+ { paddingRight: 'var(--ids-comp-paginator-page-links-label-size-padding-right-dense)' },
3854
+ '.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button-arrow.next>.ids-paginator__page-button-arrow__label':
3855
+ { paddingLeft: 'var(--ids-comp-paginator-page-links-label-size-padding-left-dense)' },
3830
3856
  '.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button-truncation': {
3831
3857
  height: 'var(--ids-comp-paginator-page-links-size-height-dense)',
3832
3858
  width: 'var(--ids-comp-paginator-page-links-size-min-width-dense)',
@@ -4005,10 +4031,1028 @@ module.exports = function ComponentsPlugin() {
4005
4031
  '.ids-paginator.ids-paginator-surface .ids-paginator__help-text': {
4006
4032
  color: 'var(--ids-comp-paginator-help-text-color-fg-surface-default)',
4007
4033
  },
4008
- '.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-container': {
4034
+ '.ids-paginator.ids-paginator-compact-layout .ids-paginator__navigation-container .ids-paginator__page-button-container': {
4009
4035
  display: 'none',
4010
4036
  },
4011
- '.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__help-text': { order: 2, marginLeft: '0' },
4037
+ '.ids-paginator.ids-paginator-compact-layout .ids-paginator__navigation-container .ids-paginator__help-text': {
4038
+ order: 2,
4039
+ marginLeft: '0',
4040
+ },
4041
+ '.ids-segmented-control': { display: 'inline-flex', flexDirection: 'row', flexWrap: 'nowrap', alignItems: 'center' },
4042
+ '.ids-segmented-control .ids-segmented-control-item>button': {
4043
+ display: 'flex',
4044
+ alignItems: 'center',
4045
+ borderStyle: 'solid',
4046
+ position: 'relative',
4047
+ textWrap: 'nowrap',
4048
+ },
4049
+ '.ids-segmented-control .ids-segmented-control-item>button:focus': { zIndex: 1, outlineStyle: 'solid', outlineOffset: '2px' },
4050
+ '.ids-segmented-control.ids-segmented-control-compact': {
4051
+ padding:
4052
+ 'var(--ids-comp-segmented-control-container-size-padding-y-compact) var(--ids-comp-segmented-control-container-size-padding-x-compact)',
4053
+ gap: 'var(--ids-comp-segmented-control-container-size-gap-compact)',
4054
+ borderTopLeftRadius: 'var(--ids-comp-segmented-control-container-size-border-radius-left-compact)',
4055
+ borderBottomLeftRadius: 'var(--ids-comp-segmented-control-container-size-border-radius-left-compact)',
4056
+ borderTopRightRadius: 'var(--ids-comp-segmented-control-container-size-border-radius-right-compact)',
4057
+ borderBottomRightRadius: 'var(--ids-comp-segmented-control-container-size-border-radius-right-compact)',
4058
+ },
4059
+ '.ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item>button': {
4060
+ borderWidth: 'var(--ids-comp-segmented-control-button-size-border-width-compact)',
4061
+ padding:
4062
+ 'var(--ids-comp-segmented-control-button-size-padding-y-compact) var(--ids-comp-segmented-control-button-size-padding-x-compact)',
4063
+ gap: 'var(--ids-comp-segmented-control-button-size-gap-compact)',
4064
+ fontFamily: 'var(--ids-comp-segmented-control-button-typography-font-family-compact)',
4065
+ fontSize: 'var(--ids-comp-segmented-control-button-typography-font-size-compact)',
4066
+ fontWeight: 'var(--ids-comp-segmented-control-button-typography-font-weight-compact)',
4067
+ letterSpacing: 'var(--ids-comp-segmented-control-button-typography-letter-spacing-compact)',
4068
+ lineHeight: 'var(--ids-comp-segmented-control-button-typography-line-height-compact)',
4069
+ },
4070
+ '.ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item>button:focus': {
4071
+ outlineWidth: 'var(--ids-comp-segmented-control-focused-outline-size-outline-width-compact)',
4072
+ },
4073
+ '.ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item:first-of-type>button': {
4074
+ borderTopLeftRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-compact)',
4075
+ borderBottomLeftRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-compact)',
4076
+ },
4077
+ '.ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item:last-of-type>button': {
4078
+ borderTopRightRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-compact)',
4079
+ borderBottomRightRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-compact)',
4080
+ },
4081
+ '.ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item:not(:last-of-type)>button': {
4082
+ borderRightWidth: '0',
4083
+ },
4084
+ '.ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item .ids-icon': {
4085
+ height: 'var(--ids-comp-segmented-control-button-size-icon-compact)',
4086
+ width: 'var(--ids-comp-segmented-control-button-size-icon-compact)',
4087
+ },
4088
+ '.ids-segmented-control.ids-segmented-control-comfortable': {
4089
+ padding:
4090
+ 'var(--ids-comp-segmented-control-container-size-padding-y-comfortable) var(--ids-comp-segmented-control-container-size-padding-x-comfortable)',
4091
+ gap: 'var(--ids-comp-segmented-control-container-size-gap-comfortable)',
4092
+ borderTopLeftRadius: 'var(--ids-comp-segmented-control-container-size-border-radius-left-comfortable)',
4093
+ borderBottomLeftRadius: 'var(--ids-comp-segmented-control-container-size-border-radius-left-comfortable)',
4094
+ borderTopRightRadius: 'var(--ids-comp-segmented-control-container-size-border-radius-right-comfortable)',
4095
+ borderBottomRightRadius: 'var(--ids-comp-segmented-control-container-size-border-radius-right-comfortable)',
4096
+ },
4097
+ '.ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item>button': {
4098
+ borderWidth: 'var(--ids-comp-segmented-control-button-size-border-width-comfortable)',
4099
+ padding:
4100
+ 'var(--ids-comp-segmented-control-button-size-padding-y-comfortable) var(--ids-comp-segmented-control-button-size-padding-x-comfortable)',
4101
+ gap: 'var(--ids-comp-segmented-control-button-size-gap-comfortable)',
4102
+ fontFamily: 'var(--ids-comp-segmented-control-button-typography-font-family-comfortable)',
4103
+ fontSize: 'var(--ids-comp-segmented-control-button-typography-font-size-comfortable)',
4104
+ fontWeight: 'var(--ids-comp-segmented-control-button-typography-font-weight-comfortable)',
4105
+ letterSpacing: 'var(--ids-comp-segmented-control-button-typography-letter-spacing-comfortable)',
4106
+ lineHeight: 'var(--ids-comp-segmented-control-button-typography-line-height-comfortable)',
4107
+ },
4108
+ '.ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item>button:focus': {
4109
+ outlineWidth: 'var(--ids-comp-segmented-control-focused-outline-size-outline-width-comfortable)',
4110
+ },
4111
+ '.ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item:first-of-type>button': {
4112
+ borderTopLeftRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-comfortable)',
4113
+ borderBottomLeftRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-comfortable)',
4114
+ },
4115
+ '.ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item:last-of-type>button': {
4116
+ borderTopRightRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-comfortable)',
4117
+ borderBottomRightRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-comfortable)',
4118
+ },
4119
+ '.ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item:not(:last-of-type)>button': {
4120
+ borderRightWidth: '0',
4121
+ },
4122
+ '.ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item .ids-icon': {
4123
+ height: 'var(--ids-comp-segmented-control-button-size-icon-comfortable)',
4124
+ width: 'var(--ids-comp-segmented-control-button-size-icon-comfortable)',
4125
+ },
4126
+ '.ids-segmented-control.ids-segmented-control-spacious': {
4127
+ padding:
4128
+ 'var(--ids-comp-segmented-control-container-size-padding-y-spacious) var(--ids-comp-segmented-control-container-size-padding-x-spacious)',
4129
+ gap: 'var(--ids-comp-segmented-control-container-size-gap-spacious)',
4130
+ borderTopLeftRadius: 'var(--ids-comp-segmented-control-container-size-border-radius-left-spacious)',
4131
+ borderBottomLeftRadius: 'var(--ids-comp-segmented-control-container-size-border-radius-left-spacious)',
4132
+ borderTopRightRadius: 'var(--ids-comp-segmented-control-container-size-border-radius-right-spacious)',
4133
+ borderBottomRightRadius: 'var(--ids-comp-segmented-control-container-size-border-radius-right-spacious)',
4134
+ },
4135
+ '.ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item>button': {
4136
+ borderWidth: 'var(--ids-comp-segmented-control-button-size-border-width-spacious)',
4137
+ padding:
4138
+ 'var(--ids-comp-segmented-control-button-size-padding-y-spacious) var(--ids-comp-segmented-control-button-size-padding-x-spacious)',
4139
+ gap: 'var(--ids-comp-segmented-control-button-size-gap-spacious)',
4140
+ fontFamily: 'var(--ids-comp-segmented-control-button-typography-font-family-spacious)',
4141
+ fontSize: 'var(--ids-comp-segmented-control-button-typography-font-size-spacious)',
4142
+ fontWeight: 'var(--ids-comp-segmented-control-button-typography-font-weight-spacious)',
4143
+ letterSpacing: 'var(--ids-comp-segmented-control-button-typography-letter-spacing-spacious)',
4144
+ lineHeight: 'var(--ids-comp-segmented-control-button-typography-line-height-spacious)',
4145
+ },
4146
+ '.ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item>button:focus': {
4147
+ outlineWidth: 'var(--ids-comp-segmented-control-focused-outline-size-outline-width-spacious)',
4148
+ },
4149
+ '.ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item:first-of-type>button': {
4150
+ borderTopLeftRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-spacious)',
4151
+ borderBottomLeftRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-spacious)',
4152
+ },
4153
+ '.ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item:last-of-type>button': {
4154
+ borderTopRightRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-spacious)',
4155
+ borderBottomRightRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-spacious)',
4156
+ },
4157
+ '.ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item:not(:last-of-type)>button': {
4158
+ borderRightWidth: '0',
4159
+ },
4160
+ '.ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item .ids-icon': {
4161
+ height: 'var(--ids-comp-segmented-control-button-size-icon-spacious)',
4162
+ width: 'var(--ids-comp-segmented-control-button-size-icon-spacious)',
4163
+ },
4164
+ '.ids-segmented-control.ids-segmented-control-dense': {
4165
+ padding:
4166
+ 'var(--ids-comp-segmented-control-container-size-padding-y-dense) var(--ids-comp-segmented-control-container-size-padding-x-dense)',
4167
+ gap: 'var(--ids-comp-segmented-control-container-size-gap-dense)',
4168
+ borderTopLeftRadius: 'var(--ids-comp-segmented-control-container-size-border-radius-left-dense)',
4169
+ borderBottomLeftRadius: 'var(--ids-comp-segmented-control-container-size-border-radius-left-dense)',
4170
+ borderTopRightRadius: 'var(--ids-comp-segmented-control-container-size-border-radius-right-dense)',
4171
+ borderBottomRightRadius: 'var(--ids-comp-segmented-control-container-size-border-radius-right-dense)',
4172
+ },
4173
+ '.ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item>button': {
4174
+ borderWidth: 'var(--ids-comp-segmented-control-button-size-border-width-dense)',
4175
+ padding:
4176
+ 'var(--ids-comp-segmented-control-button-size-padding-y-dense) var(--ids-comp-segmented-control-button-size-padding-x-dense)',
4177
+ gap: 'var(--ids-comp-segmented-control-button-size-gap-dense)',
4178
+ fontFamily: 'var(--ids-comp-segmented-control-button-typography-font-family-dense)',
4179
+ fontSize: 'var(--ids-comp-segmented-control-button-typography-font-size-dense)',
4180
+ fontWeight: 'var(--ids-comp-segmented-control-button-typography-font-weight-dense)',
4181
+ letterSpacing: 'var(--ids-comp-segmented-control-button-typography-letter-spacing-dense)',
4182
+ lineHeight: 'var(--ids-comp-segmented-control-button-typography-line-height-dense)',
4183
+ },
4184
+ '.ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item>button:focus': {
4185
+ outlineWidth: 'var(--ids-comp-segmented-control-focused-outline-size-outline-width-dense)',
4186
+ },
4187
+ '.ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item:first-of-type>button': {
4188
+ borderTopLeftRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-dense)',
4189
+ borderBottomLeftRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-dense)',
4190
+ },
4191
+ '.ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item:last-of-type>button': {
4192
+ borderTopRightRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-dense)',
4193
+ borderBottomRightRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-dense)',
4194
+ },
4195
+ '.ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item:not(:last-of-type)>button': { borderRightWidth: '0' },
4196
+ '.ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item .ids-icon': {
4197
+ height: 'var(--ids-comp-segmented-control-button-size-icon-dense)',
4198
+ width: 'var(--ids-comp-segmented-control-button-size-icon-dense)',
4199
+ },
4200
+ '.ids-segmented-control.ids-segmented-control-primary .ids-segmented-control-item>button:focus': {
4201
+ outlineColor: 'var(--ids-comp-segmented-control-focused-outline-color-dark-focused)',
4202
+ },
4203
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled': {
4204
+ backgroundColor: 'var(--ids-comp-segmented-control-container-filled-color-bg-primary-default)',
4205
+ borderColor: 'var(--ids-comp-segmented-control-container-filled-color-border-primary-default)',
4206
+ },
4207
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button': {
4208
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-primary-default)',
4209
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-default)',
4210
+ },
4211
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button .ids-icon': {
4212
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-default)',
4213
+ },
4214
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled)':
4215
+ {
4216
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-primary-active)',
4217
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-active)',
4218
+ },
4219
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled) .ids-icon':
4220
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-active)' },
4221
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:hover': {
4222
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-primary-hovered)',
4223
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-hovered)',
4224
+ },
4225
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:hover .ids-icon':
4226
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-hovered)' },
4227
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:active': {
4228
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-primary-pressed)',
4229
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-pressed)',
4230
+ },
4231
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:active .ids-icon':
4232
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-pressed)' },
4233
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:focus': {
4234
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-primary-focused)',
4235
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-focused)',
4236
+ },
4237
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:focus .ids-icon':
4238
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-focused)' },
4239
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:disabled': {
4240
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-primary-disabled)',
4241
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-disabled)',
4242
+ },
4243
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:disabled .ids-icon':
4244
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-disabled)' },
4245
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined': {
4246
+ backgroundColor: 'var(--ids-comp-segmented-control-container-outlined-color-bg-primary-default)',
4247
+ borderColor: 'var(--ids-comp-segmented-control-container-outlined-color-border-primary-default)',
4248
+ },
4249
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button': {
4250
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-primary-default)',
4251
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-default)',
4252
+ },
4253
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button .ids-icon': {
4254
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-default)',
4255
+ },
4256
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled)':
4257
+ {
4258
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-primary-active)',
4259
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-active)',
4260
+ },
4261
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled) .ids-icon':
4262
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-active)' },
4263
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:hover': {
4264
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-primary-hovered)',
4265
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-hovered)',
4266
+ },
4267
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:hover .ids-icon':
4268
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-hovered)' },
4269
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:active': {
4270
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-primary-pressed)',
4271
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-pressed)',
4272
+ },
4273
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:active .ids-icon':
4274
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-pressed)' },
4275
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:focus': {
4276
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-primary-focused)',
4277
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-focused)',
4278
+ },
4279
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:focus .ids-icon':
4280
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-focused)' },
4281
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled': {
4282
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-primary-disabled)',
4283
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-disabled)',
4284
+ },
4285
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled .ids-icon':
4286
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-disabled)' },
4287
+ '.ids-segmented-control.ids-segmented-control-surface .ids-segmented-control-item>button:focus': {
4288
+ outlineColor: 'var(--ids-comp-segmented-control-focused-outline-color-dark-focused)',
4289
+ },
4290
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled': {
4291
+ backgroundColor: 'var(--ids-comp-segmented-control-container-filled-color-bg-surface-default)',
4292
+ borderColor: 'var(--ids-comp-segmented-control-container-filled-color-border-surface-default)',
4293
+ },
4294
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button': {
4295
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-surface-default)',
4296
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-default)',
4297
+ },
4298
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button .ids-icon': {
4299
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-default)',
4300
+ },
4301
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled)':
4302
+ {
4303
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-surface-active)',
4304
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-active)',
4305
+ },
4306
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled) .ids-icon':
4307
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-active)' },
4308
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:hover': {
4309
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-surface-hovered)',
4310
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-hovered)',
4311
+ },
4312
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:hover .ids-icon':
4313
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-hovered)' },
4314
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:active': {
4315
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-surface-pressed)',
4316
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-pressed)',
4317
+ },
4318
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:active .ids-icon':
4319
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-pressed)' },
4320
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:focus': {
4321
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-surface-focused)',
4322
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-focused)',
4323
+ },
4324
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:focus .ids-icon':
4325
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-focused)' },
4326
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:disabled': {
4327
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-surface-disabled)',
4328
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-disabled)',
4329
+ },
4330
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:disabled .ids-icon':
4331
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-disabled)' },
4332
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined': {
4333
+ backgroundColor: 'var(--ids-comp-segmented-control-container-outlined-color-bg-surface-default)',
4334
+ borderColor: 'var(--ids-comp-segmented-control-container-outlined-color-border-surface-default)',
4335
+ },
4336
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button': {
4337
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-surface-default)',
4338
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-default)',
4339
+ },
4340
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button .ids-icon': {
4341
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-default)',
4342
+ },
4343
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled)':
4344
+ {
4345
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-surface-active)',
4346
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-active)',
4347
+ },
4348
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled) .ids-icon':
4349
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-active)' },
4350
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:hover': {
4351
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-surface-hovered)',
4352
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-hovered)',
4353
+ },
4354
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:hover .ids-icon':
4355
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-hovered)' },
4356
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:active': {
4357
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-surface-pressed)',
4358
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-pressed)',
4359
+ },
4360
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:active .ids-icon':
4361
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-pressed)' },
4362
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:focus': {
4363
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-surface-focused)',
4364
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-focused)',
4365
+ },
4366
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:focus .ids-icon':
4367
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-focused)' },
4368
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled': {
4369
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-surface-disabled)',
4370
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-disabled)',
4371
+ },
4372
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled .ids-icon':
4373
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-disabled)' },
4374
+ '.ids-segmented-control.ids-segmented-control-light .ids-segmented-control-item>button:focus': {
4375
+ outlineColor: 'var(--ids-comp-segmented-control-focused-outline-color-light-focused)',
4376
+ },
4377
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled': {
4378
+ backgroundColor: 'var(--ids-comp-segmented-control-container-filled-color-bg-light-default)',
4379
+ borderColor: 'var(--ids-comp-segmented-control-container-filled-color-border-light-default)',
4380
+ },
4381
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button': {
4382
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-light-default)',
4383
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-light-default)',
4384
+ },
4385
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button .ids-icon': {
4386
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-default)',
4387
+ },
4388
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled)':
4389
+ {
4390
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-light-active)',
4391
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-light-active)',
4392
+ },
4393
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled) .ids-icon':
4394
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-active)' },
4395
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:hover': {
4396
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-light-hovered)',
4397
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-light-hovered)',
4398
+ },
4399
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:hover .ids-icon':
4400
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-hovered)' },
4401
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:active': {
4402
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-light-pressed)',
4403
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-light-pressed)',
4404
+ },
4405
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:active .ids-icon':
4406
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-pressed)' },
4407
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:focus': {
4408
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-light-focused)',
4409
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-light-focused)',
4410
+ },
4411
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:focus .ids-icon':
4412
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-focused)' },
4413
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:disabled': {
4414
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-light-disabled)',
4415
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-light-disabled)',
4416
+ },
4417
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:disabled .ids-icon':
4418
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-disabled)' },
4419
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined': {
4420
+ backgroundColor: 'var(--ids-comp-segmented-control-container-outlined-color-bg-light-default)',
4421
+ borderColor: 'var(--ids-comp-segmented-control-container-outlined-color-border-light-default)',
4422
+ },
4423
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button': {
4424
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-light-default)',
4425
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-light-default)',
4426
+ },
4427
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button .ids-icon': {
4428
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-default)',
4429
+ },
4430
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled)':
4431
+ {
4432
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-light-active)',
4433
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-light-active)',
4434
+ },
4435
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled) .ids-icon':
4436
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-active)' },
4437
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:hover': {
4438
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-light-hovered)',
4439
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-light-hovered)',
4440
+ },
4441
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:hover .ids-icon':
4442
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-hovered)' },
4443
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:active': {
4444
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-light-pressed)',
4445
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-light-pressed)',
4446
+ },
4447
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:active .ids-icon':
4448
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-pressed)' },
4449
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:focus': {
4450
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-light-focused)',
4451
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-light-focused)',
4452
+ },
4453
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:focus .ids-icon':
4454
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-focused)' },
4455
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled': {
4456
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-light-disabled)',
4457
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-light-disabled)',
4458
+ },
4459
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled .ids-icon':
4460
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-disabled)' },
4461
+ '.ids-segmented-control.ids-segmented-control-dark .ids-segmented-control-item>button:focus': {
4462
+ outlineColor: 'var(--ids-comp-segmented-control-focused-outline-color-dark-focused)',
4463
+ },
4464
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled': {
4465
+ backgroundColor: 'var(--ids-comp-segmented-control-container-filled-color-bg-dark-default)',
4466
+ borderColor: 'var(--ids-comp-segmented-control-container-filled-color-border-dark-default)',
4467
+ },
4468
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button': {
4469
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-dark-default)',
4470
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-default)',
4471
+ },
4472
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button .ids-icon': {
4473
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-default)',
4474
+ },
4475
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled)':
4476
+ {
4477
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-dark-active)',
4478
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-active)',
4479
+ },
4480
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled) .ids-icon':
4481
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-active)' },
4482
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:hover': {
4483
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-dark-hovered)',
4484
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-hovered)',
4485
+ },
4486
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:hover .ids-icon': {
4487
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-hovered)',
4488
+ },
4489
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:active': {
4490
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-dark-pressed)',
4491
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-pressed)',
4492
+ },
4493
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:active .ids-icon':
4494
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-pressed)' },
4495
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:focus': {
4496
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-dark-focused)',
4497
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-focused)',
4498
+ },
4499
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:focus .ids-icon': {
4500
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-focused)',
4501
+ },
4502
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:disabled': {
4503
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-dark-disabled)',
4504
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-disabled)',
4505
+ },
4506
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:disabled .ids-icon':
4507
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-disabled)' },
4508
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined': {
4509
+ backgroundColor: 'var(--ids-comp-segmented-control-container-outlined-color-bg-dark-default)',
4510
+ borderColor: 'var(--ids-comp-segmented-control-container-outlined-color-border-dark-default)',
4511
+ },
4512
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button': {
4513
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-dark-default)',
4514
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-default)',
4515
+ },
4516
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button .ids-icon': {
4517
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-default)',
4518
+ },
4519
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled)':
4520
+ {
4521
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-dark-active)',
4522
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-active)',
4523
+ },
4524
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled) .ids-icon':
4525
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-active)' },
4526
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:hover': {
4527
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-dark-hovered)',
4528
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-hovered)',
4529
+ },
4530
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:hover .ids-icon':
4531
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-hovered)' },
4532
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:active': {
4533
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-dark-pressed)',
4534
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-pressed)',
4535
+ },
4536
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:active .ids-icon':
4537
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-pressed)' },
4538
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:focus': {
4539
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-dark-focused)',
4540
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-focused)',
4541
+ },
4542
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:focus .ids-icon':
4543
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-focused)' },
4544
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled': {
4545
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-dark-disabled)',
4546
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-disabled)',
4547
+ },
4548
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled .ids-icon':
4549
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-disabled)' },
4550
+ '.ids-segmented-control-toggle': { display: 'inline-flex', flexDirection: 'row', flexWrap: 'nowrap', alignItems: 'center' },
4551
+ '.ids-segmented-control-toggle .ids-segmented-control-toggle-item>button': {
4552
+ display: 'flex',
4553
+ alignItems: 'center',
4554
+ borderStyle: 'solid',
4555
+ position: 'relative',
4556
+ textWrap: 'nowrap',
4557
+ },
4558
+ '.ids-segmented-control-toggle .ids-segmented-control-toggle-item>button:focus': {
4559
+ zIndex: 1,
4560
+ outlineStyle: 'solid',
4561
+ outlineOffset: '2px',
4562
+ },
4563
+ '.ids-segmented-control-toggle .ids-segmented-control-toggle-item>button.selected': { pointerEvents: 'none' },
4564
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-compact': {
4565
+ padding:
4566
+ 'var(--ids-comp-segmented-control-toggle-container-size-padding-y-compact) var(--ids-comp-segmented-control-toggle-container-size-padding-x-compact)',
4567
+ gap: 'var(--ids-comp-segmented-control-toggle-container-size-gap-compact)',
4568
+ borderTopLeftRadius: 'var(--ids-comp-segmented-control-toggle-container-size-border-radius-left-compact)',
4569
+ borderTopRightRadius: 'var(--ids-comp-segmented-control-toggle-container-size-border-radius-right-compact)',
4570
+ borderBottomLeftRadius: 'var(--ids-comp-segmented-control-toggle-container-size-border-radius-left-compact)',
4571
+ borderBottomRightRadius: 'var(--ids-comp-segmented-control-toggle-container-size-border-radius-right-compact)',
4572
+ },
4573
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-compact .ids-segmented-control-toggle-item>button': {
4574
+ borderRadius: 'var(--ids-comp-segmented-control-toggle-button-size-border-radius-compact)',
4575
+ borderWidth: 'var(--ids-comp-segmented-control-toggle-button-size-border-width-compact)',
4576
+ padding:
4577
+ 'var(--ids-comp-segmented-control-toggle-button-size-padding-y-compact) var(--ids-comp-segmented-control-toggle-button-size-padding-x-compact)',
4578
+ gap: 'var(--ids-comp-segmented-control-toggle-button-size-gap-compact)',
4579
+ fontFamily: 'var(--ids-comp-segmented-control-toggle-button-typography-font-family-compact)',
4580
+ fontSize: 'var(--ids-comp-segmented-control-toggle-button-typography-font-size-compact)',
4581
+ fontWeight: 'var(--ids-comp-segmented-control-toggle-button-typography-font-weight-compact)',
4582
+ letterSpacing: 'var(--ids-comp-segmented-control-toggle-button-typography-letter-spacing-compact)',
4583
+ lineHeight: 'var(--ids-comp-segmented-control-toggle-button-typography-line-height-compact)',
4584
+ },
4585
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-compact .ids-segmented-control-toggle-item>button:focus': {
4586
+ outlineWidth: 'var(--ids-comp-segmented-control-toggle-focused-outline-size-outline-width-compact)',
4587
+ },
4588
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-compact .ids-segmented-control-toggle-item .ids-icon': {
4589
+ height: 'var(--ids-comp-segmented-control-toggle-button-size-icon-compact)',
4590
+ width: 'var(--ids-comp-segmented-control-toggle-button-size-icon-compact)',
4591
+ },
4592
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-comfortable': {
4593
+ padding:
4594
+ 'var(--ids-comp-segmented-control-toggle-container-size-padding-y-comfortable) var(--ids-comp-segmented-control-toggle-container-size-padding-x-comfortable)',
4595
+ gap: 'var(--ids-comp-segmented-control-toggle-container-size-gap-comfortable)',
4596
+ borderTopLeftRadius: 'var(--ids-comp-segmented-control-toggle-container-size-border-radius-left-comfortable)',
4597
+ borderTopRightRadius: 'var(--ids-comp-segmented-control-toggle-container-size-border-radius-right-comfortable)',
4598
+ borderBottomLeftRadius: 'var(--ids-comp-segmented-control-toggle-container-size-border-radius-left-comfortable)',
4599
+ borderBottomRightRadius: 'var(--ids-comp-segmented-control-toggle-container-size-border-radius-right-comfortable)',
4600
+ },
4601
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-comfortable .ids-segmented-control-toggle-item>button': {
4602
+ borderRadius: 'var(--ids-comp-segmented-control-toggle-button-size-border-radius-comfortable)',
4603
+ borderWidth: 'var(--ids-comp-segmented-control-toggle-button-size-border-width-comfortable)',
4604
+ padding:
4605
+ 'var(--ids-comp-segmented-control-toggle-button-size-padding-y-comfortable) var(--ids-comp-segmented-control-toggle-button-size-padding-x-comfortable)',
4606
+ gap: 'var(--ids-comp-segmented-control-toggle-button-size-gap-comfortable)',
4607
+ fontFamily: 'var(--ids-comp-segmented-control-toggle-button-typography-font-family-comfortable)',
4608
+ fontSize: 'var(--ids-comp-segmented-control-toggle-button-typography-font-size-comfortable)',
4609
+ fontWeight: 'var(--ids-comp-segmented-control-toggle-button-typography-font-weight-comfortable)',
4610
+ letterSpacing: 'var(--ids-comp-segmented-control-toggle-button-typography-letter-spacing-comfortable)',
4611
+ lineHeight: 'var(--ids-comp-segmented-control-toggle-button-typography-line-height-comfortable)',
4612
+ },
4613
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-comfortable .ids-segmented-control-toggle-item>button:focus': {
4614
+ outlineWidth: 'var(--ids-comp-segmented-control-toggle-focused-outline-size-outline-width-comfortable)',
4615
+ },
4616
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-comfortable .ids-segmented-control-toggle-item .ids-icon': {
4617
+ height: 'var(--ids-comp-segmented-control-toggle-button-size-icon-comfortable)',
4618
+ width: 'var(--ids-comp-segmented-control-toggle-button-size-icon-comfortable)',
4619
+ },
4620
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-spacious': {
4621
+ padding:
4622
+ 'var(--ids-comp-segmented-control-toggle-container-size-padding-y-spacious) var(--ids-comp-segmented-control-toggle-container-size-padding-x-spacious)',
4623
+ gap: 'var(--ids-comp-segmented-control-toggle-container-size-gap-spacious)',
4624
+ borderTopLeftRadius: 'var(--ids-comp-segmented-control-toggle-container-size-border-radius-left-spacious)',
4625
+ borderTopRightRadius: 'var(--ids-comp-segmented-control-toggle-container-size-border-radius-right-spacious)',
4626
+ borderBottomLeftRadius: 'var(--ids-comp-segmented-control-toggle-container-size-border-radius-left-spacious)',
4627
+ borderBottomRightRadius: 'var(--ids-comp-segmented-control-toggle-container-size-border-radius-right-spacious)',
4628
+ },
4629
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-spacious .ids-segmented-control-toggle-item>button': {
4630
+ borderRadius: 'var(--ids-comp-segmented-control-toggle-button-size-border-radius-spacious)',
4631
+ borderWidth: 'var(--ids-comp-segmented-control-toggle-button-size-border-width-spacious)',
4632
+ padding:
4633
+ 'var(--ids-comp-segmented-control-toggle-button-size-padding-y-spacious) var(--ids-comp-segmented-control-toggle-button-size-padding-x-spacious)',
4634
+ gap: 'var(--ids-comp-segmented-control-toggle-button-size-gap-spacious)',
4635
+ fontFamily: 'var(--ids-comp-segmented-control-toggle-button-typography-font-family-spacious)',
4636
+ fontSize: 'var(--ids-comp-segmented-control-toggle-button-typography-font-size-spacious)',
4637
+ fontWeight: 'var(--ids-comp-segmented-control-toggle-button-typography-font-weight-spacious)',
4638
+ letterSpacing: 'var(--ids-comp-segmented-control-toggle-button-typography-letter-spacing-spacious)',
4639
+ lineHeight: 'var(--ids-comp-segmented-control-toggle-button-typography-line-height-spacious)',
4640
+ },
4641
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-spacious .ids-segmented-control-toggle-item>button:focus': {
4642
+ outlineWidth: 'var(--ids-comp-segmented-control-toggle-focused-outline-size-outline-width-spacious)',
4643
+ },
4644
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-spacious .ids-segmented-control-toggle-item .ids-icon': {
4645
+ height: 'var(--ids-comp-segmented-control-toggle-button-size-icon-spacious)',
4646
+ width: 'var(--ids-comp-segmented-control-toggle-button-size-icon-spacious)',
4647
+ },
4648
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-dense': {
4649
+ padding:
4650
+ 'var(--ids-comp-segmented-control-toggle-container-size-padding-y-dense) var(--ids-comp-segmented-control-toggle-container-size-padding-x-dense)',
4651
+ gap: 'var(--ids-comp-segmented-control-toggle-container-size-gap-dense)',
4652
+ borderTopLeftRadius: 'var(--ids-comp-segmented-control-toggle-container-size-border-radius-left-dense)',
4653
+ borderTopRightRadius: 'var(--ids-comp-segmented-control-toggle-container-size-border-radius-right-dense)',
4654
+ borderBottomLeftRadius: 'var(--ids-comp-segmented-control-toggle-container-size-border-radius-left-dense)',
4655
+ borderBottomRightRadius: 'var(--ids-comp-segmented-control-toggle-container-size-border-radius-right-dense)',
4656
+ },
4657
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-dense .ids-segmented-control-toggle-item>button': {
4658
+ borderRadius: 'var(--ids-comp-segmented-control-toggle-button-size-border-radius-dense)',
4659
+ borderWidth: 'var(--ids-comp-segmented-control-toggle-button-size-border-width-dense)',
4660
+ padding:
4661
+ 'var(--ids-comp-segmented-control-toggle-button-size-padding-y-dense) var(--ids-comp-segmented-control-toggle-button-size-padding-x-dense)',
4662
+ gap: 'var(--ids-comp-segmented-control-toggle-button-size-gap-dense)',
4663
+ fontFamily: 'var(--ids-comp-segmented-control-toggle-button-typography-font-family-dense)',
4664
+ fontSize: 'var(--ids-comp-segmented-control-toggle-button-typography-font-size-dense)',
4665
+ fontWeight: 'var(--ids-comp-segmented-control-toggle-button-typography-font-weight-dense)',
4666
+ letterSpacing: 'var(--ids-comp-segmented-control-toggle-button-typography-letter-spacing-dense)',
4667
+ lineHeight: 'var(--ids-comp-segmented-control-toggle-button-typography-line-height-dense)',
4668
+ },
4669
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-dense .ids-segmented-control-toggle-item>button:focus': {
4670
+ outlineWidth: 'var(--ids-comp-segmented-control-toggle-focused-outline-size-outline-width-dense)',
4671
+ },
4672
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-dense .ids-segmented-control-toggle-item .ids-icon': {
4673
+ height: 'var(--ids-comp-segmented-control-toggle-button-size-icon-dense)',
4674
+ width: 'var(--ids-comp-segmented-control-toggle-button-size-icon-dense)',
4675
+ },
4676
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary .ids-segmented-control-toggle-item>button:focus': {
4677
+ outlineColor: 'var(--ids-comp-segmented-control-toggle-focused-outline-color-dark-focused)',
4678
+ },
4679
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled': {
4680
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-container-filled-color-bg-primary-default)',
4681
+ borderColor: 'var(--ids-comp-segmented-control-toggle-container-filled-color-border-primary-default)',
4682
+ },
4683
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button':
4684
+ {
4685
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-default)',
4686
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-default)',
4687
+ },
4688
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button .ids-icon':
4689
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-default)' },
4690
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button.ids-segmented-control-toggle-item-selected:not(:disabled)':
4691
+ {
4692
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-active)',
4693
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-active)',
4694
+ },
4695
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon':
4696
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-active)' },
4697
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button:hover':
4698
+ {
4699
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-hovered)',
4700
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-hovered)',
4701
+ },
4702
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button:hover .ids-icon':
4703
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-hovered)' },
4704
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button:active':
4705
+ {
4706
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-pressed)',
4707
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-pressed)',
4708
+ },
4709
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button:active .ids-icon':
4710
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-pressed)' },
4711
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button:focus':
4712
+ {
4713
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-focused)',
4714
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-focused)',
4715
+ },
4716
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button:focus .ids-icon':
4717
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-focused)' },
4718
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button:disabled':
4719
+ {
4720
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-disabled)',
4721
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-disabled)',
4722
+ },
4723
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button:disabled .ids-icon':
4724
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-disabled)' },
4725
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined': {
4726
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-container-outlined-color-bg-primary-default)',
4727
+ borderColor: 'var(--ids-comp-segmented-control-toggle-container-outlined-color-border-primary-default)',
4728
+ },
4729
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button':
4730
+ {
4731
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-default)',
4732
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-default)',
4733
+ },
4734
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button .ids-icon':
4735
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-default)' },
4736
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button.ids-segmented-control-toggle-item-selected:not(:disabled)':
4737
+ {
4738
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-active)',
4739
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-active)',
4740
+ },
4741
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon':
4742
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-active)' },
4743
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button:hover':
4744
+ {
4745
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-hovered)',
4746
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-hovered)',
4747
+ },
4748
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button:hover .ids-icon':
4749
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-hovered)' },
4750
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button:active':
4751
+ {
4752
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-pressed)',
4753
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-pressed)',
4754
+ },
4755
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button:active .ids-icon':
4756
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-pressed)' },
4757
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button:focus':
4758
+ {
4759
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-focused)',
4760
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-focused)',
4761
+ },
4762
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button:focus .ids-icon':
4763
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-focused)' },
4764
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button:disabled':
4765
+ {
4766
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-disabled)',
4767
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-disabled)',
4768
+ },
4769
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button:disabled .ids-icon':
4770
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-disabled)' },
4771
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface .ids-segmented-control-toggle-item>button:focus': {
4772
+ outlineColor: 'var(--ids-comp-segmented-control-toggle-focused-outline-color-dark-focused)',
4773
+ },
4774
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled': {
4775
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-container-filled-color-bg-surface-default)',
4776
+ borderColor: 'var(--ids-comp-segmented-control-toggle-container-filled-color-border-surface-default)',
4777
+ },
4778
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button':
4779
+ {
4780
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-default)',
4781
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-default)',
4782
+ },
4783
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button .ids-icon':
4784
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-default)' },
4785
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button.ids-segmented-control-toggle-item-selected:not(:disabled)':
4786
+ {
4787
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-active)',
4788
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-active)',
4789
+ },
4790
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon':
4791
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-active)' },
4792
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button:hover':
4793
+ {
4794
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-hovered)',
4795
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-hovered)',
4796
+ },
4797
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button:hover .ids-icon':
4798
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-hovered)' },
4799
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button:active':
4800
+ {
4801
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-pressed)',
4802
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-pressed)',
4803
+ },
4804
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button:active .ids-icon':
4805
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-pressed)' },
4806
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button:focus':
4807
+ {
4808
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-focused)',
4809
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-focused)',
4810
+ },
4811
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button:focus .ids-icon':
4812
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-focused)' },
4813
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button:disabled':
4814
+ {
4815
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-disabled)',
4816
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-disabled)',
4817
+ },
4818
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button:disabled .ids-icon':
4819
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-disabled)' },
4820
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined': {
4821
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-container-outlined-color-bg-surface-default)',
4822
+ borderColor: 'var(--ids-comp-segmented-control-toggle-container-outlined-color-border-surface-default)',
4823
+ },
4824
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button':
4825
+ {
4826
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-default)',
4827
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-default)',
4828
+ },
4829
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button .ids-icon':
4830
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-default)' },
4831
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button.ids-segmented-control-toggle-item-selected:not(:disabled)':
4832
+ {
4833
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-active)',
4834
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-active)',
4835
+ },
4836
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon':
4837
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-active)' },
4838
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button:hover':
4839
+ {
4840
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-hovered)',
4841
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-hovered)',
4842
+ },
4843
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button:hover .ids-icon':
4844
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-hovered)' },
4845
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button:active':
4846
+ {
4847
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-pressed)',
4848
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-pressed)',
4849
+ },
4850
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button:active .ids-icon':
4851
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-pressed)' },
4852
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button:focus':
4853
+ {
4854
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-focused)',
4855
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-focused)',
4856
+ },
4857
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button:focus .ids-icon':
4858
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-focused)' },
4859
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button:disabled':
4860
+ {
4861
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-disabled)',
4862
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-disabled)',
4863
+ },
4864
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button:disabled .ids-icon':
4865
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-disabled)' },
4866
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-light .ids-segmented-control-toggle-item>button:focus': {
4867
+ outlineColor: 'var(--ids-comp-segmented-control-toggle-focused-outline-color-light-focused)',
4868
+ },
4869
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled': {
4870
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-container-filled-color-bg-light-default)',
4871
+ borderColor: 'var(--ids-comp-segmented-control-toggle-container-filled-color-border-light-default)',
4872
+ },
4873
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button':
4874
+ {
4875
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-default)',
4876
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-default)',
4877
+ },
4878
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button .ids-icon':
4879
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-default)' },
4880
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button.ids-segmented-control-toggle-item-selected:not(:disabled)':
4881
+ {
4882
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-active)',
4883
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-active)',
4884
+ },
4885
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon':
4886
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-active)' },
4887
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button:hover':
4888
+ {
4889
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-hovered)',
4890
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-hovered)',
4891
+ },
4892
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button:hover .ids-icon':
4893
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-hovered)' },
4894
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button:active':
4895
+ {
4896
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-pressed)',
4897
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-pressed)',
4898
+ },
4899
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button:active .ids-icon':
4900
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-pressed)' },
4901
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button:focus':
4902
+ {
4903
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-focused)',
4904
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-focused)',
4905
+ },
4906
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button:focus .ids-icon':
4907
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-focused)' },
4908
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button:disabled':
4909
+ {
4910
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-disabled)',
4911
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-disabled)',
4912
+ },
4913
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button:disabled .ids-icon':
4914
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-disabled)' },
4915
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined': {
4916
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-container-outlined-color-bg-light-default)',
4917
+ borderColor: 'var(--ids-comp-segmented-control-toggle-container-outlined-color-border-light-default)',
4918
+ },
4919
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button':
4920
+ {
4921
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-default)',
4922
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-default)',
4923
+ },
4924
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button .ids-icon':
4925
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-default)' },
4926
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button.ids-segmented-control-toggle-item-selected:not(:disabled)':
4927
+ {
4928
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-active)',
4929
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-active)',
4930
+ },
4931
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon':
4932
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-active)' },
4933
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button:hover':
4934
+ {
4935
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-hovered)',
4936
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-hovered)',
4937
+ },
4938
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button:hover .ids-icon':
4939
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-hovered)' },
4940
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button:active':
4941
+ {
4942
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-pressed)',
4943
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-pressed)',
4944
+ },
4945
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button:active .ids-icon':
4946
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-pressed)' },
4947
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button:focus':
4948
+ {
4949
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-focused)',
4950
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-focused)',
4951
+ },
4952
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button:focus .ids-icon':
4953
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-focused)' },
4954
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button:disabled':
4955
+ {
4956
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-disabled)',
4957
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-disabled)',
4958
+ },
4959
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button:disabled .ids-icon':
4960
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-disabled)' },
4961
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-dark .ids-segmented-control-toggle-item>button:focus': {
4962
+ outlineColor: 'var(--ids-comp-segmented-control-toggle-focused-outline-color-dark-focused)',
4963
+ },
4964
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled': {
4965
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-container-filled-color-bg-dark-default)',
4966
+ borderColor: 'var(--ids-comp-segmented-control-toggle-container-filled-color-border-dark-default)',
4967
+ },
4968
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button':
4969
+ {
4970
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-dark-default)',
4971
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-dark-default)',
4972
+ },
4973
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button .ids-icon':
4974
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-default)' },
4975
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button.ids-segmented-control-toggle-item-selected:not(:disabled)':
4976
+ {
4977
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-dark-active)',
4978
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-dark-active)',
4979
+ },
4980
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon':
4981
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-active)' },
4982
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button:hover':
4983
+ {
4984
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-dark-hovered)',
4985
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-dark-hovered)',
4986
+ },
4987
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button:hover .ids-icon':
4988
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-hovered)' },
4989
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button:active':
4990
+ {
4991
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-dark-pressed)',
4992
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-dark-pressed)',
4993
+ },
4994
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button:active .ids-icon':
4995
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-pressed)' },
4996
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button:focus':
4997
+ {
4998
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-dark-focused)',
4999
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-dark-focused)',
5000
+ },
5001
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button:focus .ids-icon':
5002
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-focused)' },
5003
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button:disabled':
5004
+ {
5005
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-dark-disabled)',
5006
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-dark-disabled)',
5007
+ },
5008
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item>button:disabled .ids-icon':
5009
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-disabled)' },
5010
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined': {
5011
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-container-outlined-color-bg-dark-default)',
5012
+ borderColor: 'var(--ids-comp-segmented-control-toggle-container-outlined-color-border-dark-default)',
5013
+ },
5014
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button':
5015
+ {
5016
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-dark-default)',
5017
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-dark-default)',
5018
+ },
5019
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button .ids-icon':
5020
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-default)' },
5021
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button.ids-segmented-control-toggle-item-selected:not(:disabled)':
5022
+ {
5023
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-dark-active)',
5024
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-dark-active)',
5025
+ },
5026
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon':
5027
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-active)' },
5028
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button:hover':
5029
+ {
5030
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-dark-hovered)',
5031
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-dark-hovered)',
5032
+ },
5033
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button:hover .ids-icon':
5034
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-hovered)' },
5035
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button:active':
5036
+ {
5037
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-dark-pressed)',
5038
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-dark-pressed)',
5039
+ },
5040
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button:active .ids-icon':
5041
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-pressed)' },
5042
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button:focus':
5043
+ {
5044
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-dark-focused)',
5045
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-dark-focused)',
5046
+ },
5047
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button:focus .ids-icon':
5048
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-focused)' },
5049
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button:disabled':
5050
+ {
5051
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-dark-disabled)',
5052
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-dark-disabled)',
5053
+ },
5054
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item>button:disabled .ids-icon':
5055
+ { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-disabled)' },
4012
5056
  '.ids-tag': {
4013
5057
  flexShrink: 0,
4014
5058
  width: 'fit-content',