@i-cell/ids-styles 0.0.5 → 0.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/dist/accessibility.css +11 -0
  2. package/dist/accessibility.min.css +1 -0
  3. package/dist/accessibility.plugin.js +20 -0
  4. package/dist/action-item/action-item.css +6 -0
  5. package/dist/action-item/action-item.min.css +1 -1
  6. package/dist/action-item/action-item.plugin.js +2 -0
  7. package/dist/avatar/avatar.css +6 -0
  8. package/dist/avatar/avatar.min.css +1 -1
  9. package/dist/avatar/avatar.plugin.js +2 -0
  10. package/dist/button/button.css +6 -0
  11. package/dist/button/button.min.css +1 -1
  12. package/dist/button/button.plugin.js +2 -0
  13. package/dist/checkbox/checkbox.css +5 -0
  14. package/dist/checkbox/checkbox.min.css +1 -1
  15. package/dist/checkbox/checkbox.plugin.js +5 -0
  16. package/dist/components.css +291 -112
  17. package/dist/components.min.css +1 -1
  18. package/dist/components.plugin.js +250 -113
  19. package/dist/icon-button/icon-button.css +6 -0
  20. package/dist/icon-button/icon-button.min.css +1 -1
  21. package/dist/icon-button/icon-button.plugin.js +2 -0
  22. package/dist/paginator/paginator.css +51 -8
  23. package/dist/paginator/paginator.min.css +1 -1
  24. package/dist/paginator/paginator.plugin.js +39 -9
  25. package/dist/segmented-control/segmented-control-toggle.css +102 -56
  26. package/dist/segmented-control/segmented-control-toggle.min.css +1 -1
  27. package/dist/segmented-control/segmented-control-toggle.plugin.js +98 -56
  28. package/dist/segmented-control/segmented-control.css +102 -48
  29. package/dist/segmented-control/segmented-control.min.css +1 -1
  30. package/dist/segmented-control/segmented-control.plugin.js +98 -48
  31. package/dist/tag/tag.css +7 -0
  32. package/dist/tag/tag.min.css +1 -1
  33. package/dist/tag/tag.plugin.js +2 -0
  34. package/package.json +2 -2
@@ -192,6 +192,12 @@
192
192
  text-overflow: ellipsis;
193
193
  font-style: normal;
194
194
  }
195
+ .ids-action-item:not(:disabled) {
196
+ cursor: pointer;
197
+ }
198
+ .ids-action-item:disabled {
199
+ cursor: not-allowed;
200
+ }
195
201
  .ids-action-item *[icon-leading],
196
202
  .ids-action-item *[icon-trailing] {
197
203
  gap: 10px;
@@ -461,6 +467,12 @@
461
467
  justify-content: center;
462
468
  border-style: solid;
463
469
  }
470
+ .ids-avatar:not(:disabled) {
471
+ cursor: pointer;
472
+ }
473
+ .ids-avatar:disabled {
474
+ cursor: not-allowed;
475
+ }
464
476
  .ids-avatar .ids-avatar-icon {
465
477
  gap: 10px;
466
478
  display: flex;
@@ -686,6 +698,12 @@
686
698
  .ids-button:active {
687
699
  outline: none;
688
700
  }
701
+ .ids-button:not(:disabled) {
702
+ cursor: pointer;
703
+ }
704
+ .ids-button:disabled {
705
+ cursor: not-allowed;
706
+ }
689
707
  .ids-button *[icon-leading],
690
708
  .ids-button *[icon-trailing] {
691
709
  gap: 10px;
@@ -1451,6 +1469,7 @@
1451
1469
  -webkit-appearance: none;
1452
1470
  flex-shrink: 0;
1453
1471
  border-style: solid;
1472
+ margin: 0;
1454
1473
  }
1455
1474
  .ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox]:focus {
1456
1475
  outline-offset: 2px;
@@ -1496,6 +1515,7 @@
1496
1515
  .ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper .ids-checkbox__icon {
1497
1516
  height: var(--ids-comp-checkbox-input-size-icon-compact);
1498
1517
  width: var(--ids-comp-checkbox-input-size-icon-compact);
1518
+ line-height: var(--ids-comp-checkbox-input-size-icon-compact);
1499
1519
  }
1500
1520
  .ids-checkbox.ids-checkbox-compact .ids-checkbox__label-wrapper {
1501
1521
  padding: var(--ids-comp-checkbox-label-group-size-padding-y-compact) var(--ids-comp-checkbox-label-group-size-padding-x-compact);
@@ -1530,6 +1550,7 @@
1530
1550
  .ids-checkbox.ids-checkbox-comfortable .ids-checkbox__input-wrapper .ids-checkbox__icon {
1531
1551
  height: var(--ids-comp-checkbox-input-size-icon-comfortable);
1532
1552
  width: var(--ids-comp-checkbox-input-size-icon-comfortable);
1553
+ line-height: var(--ids-comp-checkbox-input-size-icon-comfortable);
1533
1554
  }
1534
1555
  .ids-checkbox.ids-checkbox-comfortable .ids-checkbox__label-wrapper {
1535
1556
  padding: var(--ids-comp-checkbox-label-group-size-padding-y-comfortable) var(--ids-comp-checkbox-label-group-size-padding-x-comfortable);
@@ -1564,6 +1585,7 @@
1564
1585
  .ids-checkbox.ids-checkbox-spacious .ids-checkbox__input-wrapper .ids-checkbox__icon {
1565
1586
  height: var(--ids-comp-checkbox-input-size-icon-spacious);
1566
1587
  width: var(--ids-comp-checkbox-input-size-icon-spacious);
1588
+ line-height: var(--ids-comp-checkbox-input-size-icon-spacious);
1567
1589
  }
1568
1590
  .ids-checkbox.ids-checkbox-spacious .ids-checkbox__label-wrapper {
1569
1591
  padding: var(--ids-comp-checkbox-label-group-size-padding-y-spacious) var(--ids-comp-checkbox-label-group-size-padding-x-spacious);
@@ -1598,6 +1620,7 @@
1598
1620
  .ids-checkbox.ids-checkbox-dense .ids-checkbox__input-wrapper .ids-checkbox__icon {
1599
1621
  height: var(--ids-comp-checkbox-input-size-icon-dense);
1600
1622
  width: var(--ids-comp-checkbox-input-size-icon-dense);
1623
+ line-height: var(--ids-comp-checkbox-input-size-icon-dense);
1601
1624
  }
1602
1625
  .ids-checkbox.ids-checkbox-dense .ids-checkbox__label-wrapper {
1603
1626
  padding: var(--ids-comp-checkbox-label-group-size-padding-y-dense) var(--ids-comp-checkbox-label-group-size-padding-x-dense);
@@ -3281,6 +3304,12 @@
3281
3304
  .ids-icon-button:active {
3282
3305
  outline: none;
3283
3306
  }
3307
+ .ids-icon-button:not(:disabled) {
3308
+ cursor: pointer;
3309
+ }
3310
+ .ids-icon-button:disabled {
3311
+ cursor: not-allowed;
3312
+ }
3284
3313
  .ids-icon-button.ids-icon-button-compact {
3285
3314
  padding: var(--ids-comp-icon-button-size-padding-y-compact) var(--ids-comp-icon-button-size-padding-x-compact);
3286
3315
  width: var(--ids-comp-icon-button-size-width-compact);
@@ -3942,21 +3971,28 @@
3942
3971
  justify-content: center;
3943
3972
  align-items: center;
3944
3973
  font-style: normal;
3974
+ border-style: none;
3945
3975
  }
3946
3976
  .ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button:focus {
3947
3977
  outline-width: var(--ids-comp-paginator-page-links-focused-outline-size-outline);
3948
3978
  outline-style: solid;
3949
3979
  outline-offset: 2px;
3950
3980
  }
3981
+ .ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button:not(:disabled) {
3982
+ cursor: pointer;
3983
+ }
3984
+ .ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button:disabled {
3985
+ cursor: not-allowed;
3986
+ }
3951
3987
  .ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-arrow.first, .ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-arrow.previous {
3952
3988
  order: 1;
3953
3989
  }
3954
- .ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-container {
3955
- order: 2;
3956
- }
3957
3990
  .ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-arrow.next, .ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-arrow.last {
3958
3991
  order: 3;
3959
3992
  }
3993
+ .ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-container {
3994
+ order: 2;
3995
+ }
3960
3996
  .ids-paginator .ids-paginator__navigation-container .ids-paginator__help-text {
3961
3997
  order: 4;
3962
3998
  }
@@ -3968,7 +4004,7 @@
3968
4004
  white-space: nowrap;
3969
4005
  }
3970
4006
  .ids-paginator.ids-paginator-compact .ids-paginator__navigation-container {
3971
- gap: var(--ids-comp-paginator-size-gap-comfortable);
4007
+ gap: var(--ids-comp-paginator-size-gap-compact);
3972
4008
  }
3973
4009
  .ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button {
3974
4010
  height: var(--ids-comp-paginator-page-links-size-height-compact);
@@ -3981,6 +4017,15 @@
3981
4017
  line-height: var(--ids-comp-paginator-page-links-label-typography-line-height-compact);
3982
4018
  border-radius: var(--ids-comp-paginator-page-links-page-link-size-border-radius-compact);
3983
4019
  }
4020
+ .ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-arrow {
4021
+ gap: var(--ids-comp-paginator-page-links-size-gap-compact);
4022
+ }
4023
+ .ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-arrow.previous > .ids-paginator__page-button-arrow__label {
4024
+ padding-right: var(--ids-comp-paginator-page-links-label-size-padding-right-compact);
4025
+ }
4026
+ .ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-arrow.next > .ids-paginator__page-button-arrow__label {
4027
+ padding-left: var(--ids-comp-paginator-page-links-label-size-padding-left-compact);
4028
+ }
3984
4029
  .ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-truncation {
3985
4030
  height: var(--ids-comp-paginator-page-links-size-height-compact);
3986
4031
  width: var(--ids-comp-paginator-page-links-size-min-width-compact);
@@ -4009,6 +4054,15 @@
4009
4054
  line-height: var(--ids-comp-paginator-page-links-label-typography-line-height-comfortable);
4010
4055
  border-radius: var(--ids-comp-paginator-page-links-page-link-size-border-radius-comfortable);
4011
4056
  }
4057
+ .ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button-arrow {
4058
+ gap: var(--ids-comp-paginator-page-links-size-gap-comfortable);
4059
+ }
4060
+ .ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button-arrow.previous > .ids-paginator__page-button-arrow__label {
4061
+ padding-right: var(--ids-comp-paginator-page-links-label-size-padding-right-comfortable);
4062
+ }
4063
+ .ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button-arrow.next > .ids-paginator__page-button-arrow__label {
4064
+ padding-left: var(--ids-comp-paginator-page-links-label-size-padding-left-comfortable);
4065
+ }
4012
4066
  .ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button-truncation {
4013
4067
  height: var(--ids-comp-paginator-page-links-size-height-comfortable);
4014
4068
  width: var(--ids-comp-paginator-page-links-size-min-width-comfortable);
@@ -4024,7 +4078,7 @@
4024
4078
  padding: var(--ids-comp-paginator-help-text-size-padding-y-comfortable);
4025
4079
  }
4026
4080
  .ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container {
4027
- gap: var(--ids-comp-paginator-size-gap-comfortable);
4081
+ gap: var(--ids-comp-paginator-size-gap-spacious);
4028
4082
  }
4029
4083
  .ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button {
4030
4084
  height: var(--ids-comp-paginator-page-links-size-height-spacious);
@@ -4037,6 +4091,15 @@
4037
4091
  line-height: var(--ids-comp-paginator-page-links-label-typography-line-height-spacious);
4038
4092
  border-radius: var(--ids-comp-paginator-page-links-page-link-size-border-radius-spacious);
4039
4093
  }
4094
+ .ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button-arrow {
4095
+ gap: var(--ids-comp-paginator-page-links-size-gap-spacious);
4096
+ }
4097
+ .ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button-arrow.previous > .ids-paginator__page-button-arrow__label {
4098
+ padding-right: var(--ids-comp-paginator-page-links-label-size-padding-right-spacious);
4099
+ }
4100
+ .ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button-arrow.next > .ids-paginator__page-button-arrow__label {
4101
+ padding-left: var(--ids-comp-paginator-page-links-label-size-padding-left-spacious);
4102
+ }
4040
4103
  .ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button-truncation {
4041
4104
  height: var(--ids-comp-paginator-page-links-size-height-spacious);
4042
4105
  width: var(--ids-comp-paginator-page-links-size-min-width-spacious);
@@ -4052,7 +4115,7 @@
4052
4115
  padding: var(--ids-comp-paginator-help-text-size-padding-y-spacious);
4053
4116
  }
4054
4117
  .ids-paginator.ids-paginator-dense .ids-paginator__navigation-container {
4055
- gap: var(--ids-comp-paginator-size-gap-comfortable);
4118
+ gap: var(--ids-comp-paginator-size-gap-dense);
4056
4119
  }
4057
4120
  .ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button {
4058
4121
  height: var(--ids-comp-paginator-page-links-size-height-dense);
@@ -4065,6 +4128,15 @@
4065
4128
  line-height: var(--ids-comp-paginator-page-links-label-typography-line-height-dense);
4066
4129
  border-radius: var(--ids-comp-paginator-page-links-page-link-size-border-radius-dense);
4067
4130
  }
4131
+ .ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button-arrow {
4132
+ gap: var(--ids-comp-paginator-page-links-size-gap-dense);
4133
+ }
4134
+ .ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button-arrow.previous > .ids-paginator__page-button-arrow__label {
4135
+ padding-right: var(--ids-comp-paginator-page-links-label-size-padding-right-dense);
4136
+ }
4137
+ .ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button-arrow.next > .ids-paginator__page-button-arrow__label {
4138
+ padding-left: var(--ids-comp-paginator-page-links-label-size-padding-left-dense);
4139
+ }
4068
4140
  .ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button-truncation {
4069
4141
  height: var(--ids-comp-paginator-page-links-size-height-dense);
4070
4142
  width: var(--ids-comp-paginator-page-links-size-min-width-dense);
@@ -4223,10 +4295,10 @@
4223
4295
  .ids-paginator.ids-paginator-surface .ids-paginator__help-text {
4224
4296
  color: var(--ids-comp-paginator-help-text-color-fg-surface-default);
4225
4297
  }
4226
- .ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-container {
4298
+ .ids-paginator.ids-paginator-compact-layout .ids-paginator__navigation-container .ids-paginator__page-button-container {
4227
4299
  display: none;
4228
4300
  }
4229
- .ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__help-text {
4301
+ .ids-paginator.ids-paginator-compact-layout .ids-paginator__navigation-container .ids-paginator__help-text {
4230
4302
  order: 2;
4231
4303
  margin-left: 0;
4232
4304
  }
@@ -4249,6 +4321,12 @@
4249
4321
  outline-style: solid;
4250
4322
  outline-offset: 2px;
4251
4323
  }
4324
+ .ids-segmented-control .ids-segmented-control-item > button:not(:disabled) {
4325
+ cursor: pointer;
4326
+ }
4327
+ .ids-segmented-control .ids-segmented-control-item > button:disabled {
4328
+ cursor: not-allowed;
4329
+ }
4252
4330
  .ids-segmented-control.ids-segmented-control-compact {
4253
4331
  padding: var(--ids-comp-segmented-control-container-size-padding-y-compact) var(--ids-comp-segmented-control-container-size-padding-x-compact);
4254
4332
  gap: var(--ids-comp-segmented-control-container-size-gap-compact);
@@ -4403,6 +4481,7 @@
4403
4481
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button {
4404
4482
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-default);
4405
4483
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-default);
4484
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-primary-default);
4406
4485
  }
4407
4486
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button .ids-icon {
4408
4487
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-default);
@@ -4410,6 +4489,7 @@
4410
4489
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
4411
4490
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-active);
4412
4491
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-active);
4492
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-primary-active);
4413
4493
  }
4414
4494
  .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 {
4415
4495
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-active);
@@ -4417,6 +4497,7 @@
4417
4497
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:hover {
4418
4498
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-hovered);
4419
4499
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-hovered);
4500
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-primary-hovered);
4420
4501
  }
4421
4502
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:hover .ids-icon {
4422
4503
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-hovered);
@@ -4424,6 +4505,7 @@
4424
4505
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:active {
4425
4506
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-pressed);
4426
4507
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-pressed);
4508
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-primary-pressed);
4427
4509
  }
4428
4510
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:active .ids-icon {
4429
4511
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-pressed);
@@ -4431,6 +4513,7 @@
4431
4513
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:focus {
4432
4514
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-focused);
4433
4515
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-focused);
4516
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-primary-focused);
4434
4517
  }
4435
4518
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:focus .ids-icon {
4436
4519
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-focused);
@@ -4438,6 +4521,7 @@
4438
4521
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:disabled {
4439
4522
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-disabled);
4440
4523
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-disabled);
4524
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-primary-disabled);
4441
4525
  }
4442
4526
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:disabled .ids-icon {
4443
4527
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-disabled);
@@ -4448,45 +4532,51 @@
4448
4532
  }
4449
4533
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button {
4450
4534
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-primary-default);
4451
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-default);
4535
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-primary-default);
4536
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-primary-default);
4452
4537
  }
4453
4538
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button .ids-icon {
4454
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-default);
4539
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-primary-default);
4455
4540
  }
4456
4541
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
4457
4542
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-primary-active);
4458
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-active);
4543
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-primary-active);
4544
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-primary-active);
4459
4545
  }
4460
4546
  .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 {
4461
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-active);
4547
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-primary-active);
4462
4548
  }
4463
4549
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:hover {
4464
4550
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-primary-hovered);
4465
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-hovered);
4551
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-primary-hovered);
4552
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-primary-hovered);
4466
4553
  }
4467
4554
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:hover .ids-icon {
4468
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-hovered);
4555
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-primary-hovered);
4469
4556
  }
4470
4557
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:active {
4471
4558
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-primary-pressed);
4472
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-pressed);
4559
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-primary-pressed);
4560
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-primary-pressed);
4473
4561
  }
4474
4562
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:active .ids-icon {
4475
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-pressed);
4563
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-primary-pressed);
4476
4564
  }
4477
4565
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:focus {
4478
4566
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-primary-focused);
4479
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-focused);
4567
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-primary-focused);
4568
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-primary-focused);
4480
4569
  }
4481
4570
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:focus .ids-icon {
4482
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-focused);
4571
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-primary-focused);
4483
4572
  }
4484
4573
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled {
4485
4574
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-primary-disabled);
4486
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-disabled);
4575
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-primary-disabled);
4576
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-primary-disabled);
4487
4577
  }
4488
4578
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled .ids-icon {
4489
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-disabled);
4579
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-primary-disabled);
4490
4580
  }
4491
4581
  .ids-segmented-control.ids-segmented-control-surface .ids-segmented-control-item > button:focus {
4492
4582
  outline-color: var(--ids-comp-segmented-control-focused-outline-color-dark-focused);
@@ -4498,6 +4588,7 @@
4498
4588
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button {
4499
4589
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-default);
4500
4590
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-default);
4591
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-surface-default);
4501
4592
  }
4502
4593
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button .ids-icon {
4503
4594
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-default);
@@ -4505,6 +4596,7 @@
4505
4596
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
4506
4597
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-active);
4507
4598
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-active);
4599
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-surface-active);
4508
4600
  }
4509
4601
  .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 {
4510
4602
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-active);
@@ -4512,6 +4604,7 @@
4512
4604
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:hover {
4513
4605
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-hovered);
4514
4606
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-hovered);
4607
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-surface-hovered);
4515
4608
  }
4516
4609
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:hover .ids-icon {
4517
4610
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-hovered);
@@ -4519,6 +4612,7 @@
4519
4612
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:active {
4520
4613
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-pressed);
4521
4614
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-pressed);
4615
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-surface-pressed);
4522
4616
  }
4523
4617
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:active .ids-icon {
4524
4618
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-pressed);
@@ -4526,6 +4620,7 @@
4526
4620
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:focus {
4527
4621
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-focused);
4528
4622
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-focused);
4623
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-surface-focused);
4529
4624
  }
4530
4625
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:focus .ids-icon {
4531
4626
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-focused);
@@ -4533,6 +4628,7 @@
4533
4628
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:disabled {
4534
4629
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-disabled);
4535
4630
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-disabled);
4631
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-surface-disabled);
4536
4632
  }
4537
4633
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:disabled .ids-icon {
4538
4634
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-disabled);
@@ -4543,45 +4639,51 @@
4543
4639
  }
4544
4640
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button {
4545
4641
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-surface-default);
4546
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-default);
4642
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-surface-default);
4643
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-surface-default);
4547
4644
  }
4548
4645
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button .ids-icon {
4549
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-default);
4646
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-surface-default);
4550
4647
  }
4551
4648
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
4552
4649
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-surface-active);
4553
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-active);
4650
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-surface-active);
4651
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-surface-active);
4554
4652
  }
4555
4653
  .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 {
4556
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-active);
4654
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-surface-active);
4557
4655
  }
4558
4656
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:hover {
4559
4657
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-surface-hovered);
4560
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-hovered);
4658
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-surface-hovered);
4659
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-surface-hovered);
4561
4660
  }
4562
4661
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:hover .ids-icon {
4563
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-hovered);
4662
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-surface-hovered);
4564
4663
  }
4565
4664
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:active {
4566
4665
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-surface-pressed);
4567
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-pressed);
4666
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-surface-pressed);
4667
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-surface-pressed);
4568
4668
  }
4569
4669
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:active .ids-icon {
4570
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-pressed);
4670
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-surface-pressed);
4571
4671
  }
4572
4672
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:focus {
4573
4673
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-surface-focused);
4574
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-focused);
4674
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-surface-focused);
4675
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-surface-focused);
4575
4676
  }
4576
4677
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:focus .ids-icon {
4577
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-focused);
4678
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-surface-focused);
4578
4679
  }
4579
4680
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled {
4580
4681
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-surface-disabled);
4581
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-disabled);
4682
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-surface-disabled);
4683
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-surface-disabled);
4582
4684
  }
4583
4685
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled .ids-icon {
4584
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-disabled);
4686
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-surface-disabled);
4585
4687
  }
4586
4688
  .ids-segmented-control.ids-segmented-control-light .ids-segmented-control-item > button:focus {
4587
4689
  outline-color: var(--ids-comp-segmented-control-focused-outline-color-light-focused);
@@ -4593,6 +4695,7 @@
4593
4695
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button {
4594
4696
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-default);
4595
4697
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-default);
4698
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-light-default);
4596
4699
  }
4597
4700
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button .ids-icon {
4598
4701
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-default);
@@ -4600,6 +4703,7 @@
4600
4703
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
4601
4704
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-active);
4602
4705
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-active);
4706
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-light-active);
4603
4707
  }
4604
4708
  .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 {
4605
4709
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-active);
@@ -4607,6 +4711,7 @@
4607
4711
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:hover {
4608
4712
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-hovered);
4609
4713
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-hovered);
4714
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-light-hovered);
4610
4715
  }
4611
4716
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:hover .ids-icon {
4612
4717
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-hovered);
@@ -4614,6 +4719,7 @@
4614
4719
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:active {
4615
4720
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-pressed);
4616
4721
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-pressed);
4722
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-light-pressed);
4617
4723
  }
4618
4724
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:active .ids-icon {
4619
4725
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-pressed);
@@ -4621,6 +4727,7 @@
4621
4727
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:focus {
4622
4728
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-focused);
4623
4729
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-focused);
4730
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-light-focused);
4624
4731
  }
4625
4732
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:focus .ids-icon {
4626
4733
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-focused);
@@ -4628,6 +4735,7 @@
4628
4735
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:disabled {
4629
4736
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-disabled);
4630
4737
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-disabled);
4738
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-light-disabled);
4631
4739
  }
4632
4740
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:disabled .ids-icon {
4633
4741
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-disabled);
@@ -4638,45 +4746,51 @@
4638
4746
  }
4639
4747
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button {
4640
4748
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-light-default);
4641
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-default);
4749
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-light-default);
4750
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-light-default);
4642
4751
  }
4643
4752
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button .ids-icon {
4644
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-default);
4753
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-light-default);
4645
4754
  }
4646
4755
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
4647
4756
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-light-active);
4648
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-active);
4757
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-light-active);
4758
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-light-active);
4649
4759
  }
4650
4760
  .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 {
4651
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-active);
4761
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-light-active);
4652
4762
  }
4653
4763
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:hover {
4654
4764
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-light-hovered);
4655
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-hovered);
4765
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-light-hovered);
4766
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-light-hovered);
4656
4767
  }
4657
4768
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:hover .ids-icon {
4658
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-hovered);
4769
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-light-hovered);
4659
4770
  }
4660
4771
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:active {
4661
4772
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-light-pressed);
4662
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-pressed);
4773
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-light-pressed);
4774
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-light-pressed);
4663
4775
  }
4664
4776
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:active .ids-icon {
4665
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-pressed);
4777
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-light-pressed);
4666
4778
  }
4667
4779
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:focus {
4668
4780
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-light-focused);
4669
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-focused);
4781
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-light-focused);
4782
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-light-focused);
4670
4783
  }
4671
4784
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:focus .ids-icon {
4672
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-focused);
4785
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-light-focused);
4673
4786
  }
4674
4787
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled {
4675
4788
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-light-disabled);
4676
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-disabled);
4789
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-light-disabled);
4790
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-light-disabled);
4677
4791
  }
4678
4792
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled .ids-icon {
4679
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-disabled);
4793
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-light-disabled);
4680
4794
  }
4681
4795
  .ids-segmented-control.ids-segmented-control-dark .ids-segmented-control-item > button:focus {
4682
4796
  outline-color: var(--ids-comp-segmented-control-focused-outline-color-dark-focused);
@@ -4688,6 +4802,7 @@
4688
4802
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button {
4689
4803
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-default);
4690
4804
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-default);
4805
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-dark-default);
4691
4806
  }
4692
4807
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button .ids-icon {
4693
4808
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-default);
@@ -4695,6 +4810,7 @@
4695
4810
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
4696
4811
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-active);
4697
4812
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-active);
4813
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-dark-active);
4698
4814
  }
4699
4815
  .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 {
4700
4816
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-active);
@@ -4702,6 +4818,7 @@
4702
4818
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:hover {
4703
4819
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-hovered);
4704
4820
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-hovered);
4821
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-dark-hovered);
4705
4822
  }
4706
4823
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:hover .ids-icon {
4707
4824
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-hovered);
@@ -4709,6 +4826,7 @@
4709
4826
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:active {
4710
4827
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-pressed);
4711
4828
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-pressed);
4829
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-dark-pressed);
4712
4830
  }
4713
4831
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:active .ids-icon {
4714
4832
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-pressed);
@@ -4716,6 +4834,7 @@
4716
4834
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:focus {
4717
4835
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-focused);
4718
4836
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-focused);
4837
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-dark-focused);
4719
4838
  }
4720
4839
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:focus .ids-icon {
4721
4840
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-focused);
@@ -4723,6 +4842,7 @@
4723
4842
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:disabled {
4724
4843
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-disabled);
4725
4844
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-disabled);
4845
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-dark-disabled);
4726
4846
  }
4727
4847
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:disabled .ids-icon {
4728
4848
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-disabled);
@@ -4733,45 +4853,51 @@
4733
4853
  }
4734
4854
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button {
4735
4855
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-default);
4736
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-default);
4856
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-default);
4857
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-dark-default);
4737
4858
  }
4738
4859
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button .ids-icon {
4739
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-default);
4860
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-default);
4740
4861
  }
4741
4862
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
4742
4863
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-active);
4743
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-active);
4864
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-active);
4865
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-dark-active);
4744
4866
  }
4745
4867
  .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 {
4746
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-active);
4868
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-active);
4747
4869
  }
4748
4870
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:hover {
4749
4871
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-hovered);
4750
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-hovered);
4872
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-hovered);
4873
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-dark-hovered);
4751
4874
  }
4752
4875
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:hover .ids-icon {
4753
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-hovered);
4876
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-hovered);
4754
4877
  }
4755
4878
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:active {
4756
4879
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-pressed);
4757
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-pressed);
4880
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-pressed);
4881
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-dark-pressed);
4758
4882
  }
4759
4883
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:active .ids-icon {
4760
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-pressed);
4884
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-pressed);
4761
4885
  }
4762
4886
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:focus {
4763
4887
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-focused);
4764
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-focused);
4888
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-focused);
4889
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-dark-focused);
4765
4890
  }
4766
4891
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:focus .ids-icon {
4767
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-focused);
4892
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-focused);
4768
4893
  }
4769
4894
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled {
4770
4895
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-disabled);
4771
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-disabled);
4896
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-disabled);
4897
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-dark-disabled);
4772
4898
  }
4773
4899
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled .ids-icon {
4774
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-disabled);
4900
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-disabled);
4775
4901
  }
4776
4902
 
4777
4903
  .ids-segmented-control-toggle {
@@ -4795,6 +4921,12 @@
4795
4921
  .ids-segmented-control-toggle .ids-segmented-control-toggle-item > button.selected {
4796
4922
  pointer-events: none;
4797
4923
  }
4924
+ .ids-segmented-control-toggle .ids-segmented-control-toggle-item > button:not(:disabled) {
4925
+ cursor: pointer;
4926
+ }
4927
+ .ids-segmented-control-toggle .ids-segmented-control-toggle-item > button:disabled {
4928
+ cursor: not-allowed;
4929
+ }
4798
4930
  .ids-segmented-control-toggle.ids-segmented-control-toggle-compact {
4799
4931
  padding: var(--ids-comp-segmented-control-toggle-container-size-padding-y-compact) var(--ids-comp-segmented-control-toggle-container-size-padding-x-compact);
4800
4932
  gap: var(--ids-comp-segmented-control-toggle-container-size-gap-compact);
@@ -4904,11 +5036,11 @@
4904
5036
  }
4905
5037
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled {
4906
5038
  background-color: var(--ids-comp-segmented-control-toggle-container-filled-color-bg-primary-default);
4907
- border-color: var(--ids-comp-segmented-control-toggle-container-filled-color-border-primary-default);
4908
5039
  }
4909
5040
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button {
4910
5041
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-default);
4911
5042
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-default);
5043
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-default);
4912
5044
  }
4913
5045
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button .ids-icon {
4914
5046
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-default);
@@ -4916,6 +5048,7 @@
4916
5048
  .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) {
4917
5049
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-active);
4918
5050
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-active);
5051
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-default);
4919
5052
  }
4920
5053
  .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 {
4921
5054
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-active);
@@ -4923,6 +5056,7 @@
4923
5056
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:hover {
4924
5057
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-hovered);
4925
5058
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-hovered);
5059
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-default);
4926
5060
  }
4927
5061
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:hover .ids-icon {
4928
5062
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-hovered);
@@ -4930,6 +5064,7 @@
4930
5064
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:active {
4931
5065
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-pressed);
4932
5066
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-pressed);
5067
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-default);
4933
5068
  }
4934
5069
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:active .ids-icon {
4935
5070
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-pressed);
@@ -4937,6 +5072,7 @@
4937
5072
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus {
4938
5073
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-focused);
4939
5074
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-focused);
5075
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-default);
4940
5076
  }
4941
5077
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus .ids-icon {
4942
5078
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-focused);
@@ -4944,66 +5080,72 @@
4944
5080
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:disabled {
4945
5081
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-disabled);
4946
5082
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-disabled);
5083
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-default);
4947
5084
  }
4948
5085
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:disabled .ids-icon {
4949
5086
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-disabled);
4950
5087
  }
4951
5088
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined {
4952
5089
  background-color: var(--ids-comp-segmented-control-toggle-container-outlined-color-bg-primary-default);
4953
- border-color: var(--ids-comp-segmented-control-toggle-container-outlined-color-border-primary-default);
4954
5090
  }
4955
5091
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button {
4956
5092
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-default);
4957
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-default);
5093
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-default);
5094
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-default);
4958
5095
  }
4959
5096
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button .ids-icon {
4960
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-default);
5097
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-default);
4961
5098
  }
4962
5099
  .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) {
4963
5100
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-active);
4964
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-active);
5101
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-active);
5102
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-default);
4965
5103
  }
4966
5104
  .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 {
4967
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-active);
5105
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-active);
4968
5106
  }
4969
5107
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:hover {
4970
5108
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-hovered);
4971
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-hovered);
5109
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-hovered);
5110
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-default);
4972
5111
  }
4973
5112
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:hover .ids-icon {
4974
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-hovered);
5113
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-hovered);
4975
5114
  }
4976
5115
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:active {
4977
5116
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-pressed);
4978
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-pressed);
5117
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-pressed);
5118
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-default);
4979
5119
  }
4980
5120
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:active .ids-icon {
4981
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-pressed);
5121
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-pressed);
4982
5122
  }
4983
5123
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus {
4984
5124
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-focused);
4985
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-focused);
5125
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-focused);
5126
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-default);
4986
5127
  }
4987
5128
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus .ids-icon {
4988
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-focused);
5129
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-focused);
4989
5130
  }
4990
5131
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:disabled {
4991
5132
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-disabled);
4992
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-disabled);
5133
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-disabled);
5134
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-default);
4993
5135
  }
4994
5136
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:disabled .ids-icon {
4995
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-disabled);
5137
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-disabled);
4996
5138
  }
4997
5139
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface .ids-segmented-control-toggle-item > button:focus {
4998
5140
  outline-color: var(--ids-comp-segmented-control-toggle-focused-outline-color-dark-focused);
4999
5141
  }
5000
5142
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled {
5001
5143
  background-color: var(--ids-comp-segmented-control-toggle-container-filled-color-bg-surface-default);
5002
- border-color: var(--ids-comp-segmented-control-toggle-container-filled-color-border-surface-default);
5003
5144
  }
5004
5145
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button {
5005
5146
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-default);
5006
5147
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-default);
5148
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-default);
5007
5149
  }
5008
5150
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button .ids-icon {
5009
5151
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-default);
@@ -5011,6 +5153,7 @@
5011
5153
  .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) {
5012
5154
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-active);
5013
5155
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-active);
5156
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-default);
5014
5157
  }
5015
5158
  .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 {
5016
5159
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-active);
@@ -5018,6 +5161,7 @@
5018
5161
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:hover {
5019
5162
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-hovered);
5020
5163
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-hovered);
5164
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-default);
5021
5165
  }
5022
5166
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:hover .ids-icon {
5023
5167
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-hovered);
@@ -5025,6 +5169,7 @@
5025
5169
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:active {
5026
5170
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-pressed);
5027
5171
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-pressed);
5172
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-default);
5028
5173
  }
5029
5174
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:active .ids-icon {
5030
5175
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-pressed);
@@ -5032,6 +5177,7 @@
5032
5177
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus {
5033
5178
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-focused);
5034
5179
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-focused);
5180
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-default);
5035
5181
  }
5036
5182
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus .ids-icon {
5037
5183
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-focused);
@@ -5039,66 +5185,72 @@
5039
5185
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:disabled {
5040
5186
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-disabled);
5041
5187
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-disabled);
5188
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-default);
5042
5189
  }
5043
5190
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:disabled .ids-icon {
5044
5191
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-disabled);
5045
5192
  }
5046
5193
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined {
5047
5194
  background-color: var(--ids-comp-segmented-control-toggle-container-outlined-color-bg-surface-default);
5048
- border-color: var(--ids-comp-segmented-control-toggle-container-outlined-color-border-surface-default);
5049
5195
  }
5050
5196
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button {
5051
5197
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-default);
5052
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-default);
5198
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-default);
5199
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-default);
5053
5200
  }
5054
5201
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button .ids-icon {
5055
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-default);
5202
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-default);
5056
5203
  }
5057
5204
  .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) {
5058
5205
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-active);
5059
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-active);
5206
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-active);
5207
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-default);
5060
5208
  }
5061
5209
  .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 {
5062
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-active);
5210
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-active);
5063
5211
  }
5064
5212
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:hover {
5065
5213
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-hovered);
5066
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-hovered);
5214
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-hovered);
5215
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-default);
5067
5216
  }
5068
5217
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:hover .ids-icon {
5069
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-hovered);
5218
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-hovered);
5070
5219
  }
5071
5220
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:active {
5072
5221
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-pressed);
5073
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-pressed);
5222
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-pressed);
5223
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-default);
5074
5224
  }
5075
5225
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:active .ids-icon {
5076
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-pressed);
5226
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-pressed);
5077
5227
  }
5078
5228
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus {
5079
5229
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-focused);
5080
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-focused);
5230
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-focused);
5231
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-default);
5081
5232
  }
5082
5233
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus .ids-icon {
5083
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-focused);
5234
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-focused);
5084
5235
  }
5085
5236
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:disabled {
5086
5237
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-disabled);
5087
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-disabled);
5238
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-disabled);
5239
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-default);
5088
5240
  }
5089
5241
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:disabled .ids-icon {
5090
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-disabled);
5242
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-disabled);
5091
5243
  }
5092
5244
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light .ids-segmented-control-toggle-item > button:focus {
5093
5245
  outline-color: var(--ids-comp-segmented-control-toggle-focused-outline-color-light-focused);
5094
5246
  }
5095
5247
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled {
5096
5248
  background-color: var(--ids-comp-segmented-control-toggle-container-filled-color-bg-light-default);
5097
- border-color: var(--ids-comp-segmented-control-toggle-container-filled-color-border-light-default);
5098
5249
  }
5099
5250
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button {
5100
5251
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-default);
5101
5252
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-default);
5253
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-default);
5102
5254
  }
5103
5255
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button .ids-icon {
5104
5256
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-default);
@@ -5106,6 +5258,7 @@
5106
5258
  .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) {
5107
5259
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-active);
5108
5260
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-active);
5261
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-default);
5109
5262
  }
5110
5263
  .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 {
5111
5264
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-active);
@@ -5113,6 +5266,7 @@
5113
5266
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:hover {
5114
5267
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-hovered);
5115
5268
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-hovered);
5269
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-default);
5116
5270
  }
5117
5271
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:hover .ids-icon {
5118
5272
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-hovered);
@@ -5120,6 +5274,7 @@
5120
5274
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:active {
5121
5275
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-pressed);
5122
5276
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-pressed);
5277
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-default);
5123
5278
  }
5124
5279
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:active .ids-icon {
5125
5280
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-pressed);
@@ -5127,6 +5282,7 @@
5127
5282
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus {
5128
5283
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-focused);
5129
5284
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-focused);
5285
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-default);
5130
5286
  }
5131
5287
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus .ids-icon {
5132
5288
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-focused);
@@ -5134,66 +5290,72 @@
5134
5290
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:disabled {
5135
5291
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-disabled);
5136
5292
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-disabled);
5293
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-default);
5137
5294
  }
5138
5295
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:disabled .ids-icon {
5139
5296
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-disabled);
5140
5297
  }
5141
5298
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined {
5142
5299
  background-color: var(--ids-comp-segmented-control-toggle-container-outlined-color-bg-light-default);
5143
- border-color: var(--ids-comp-segmented-control-toggle-container-outlined-color-border-light-default);
5144
5300
  }
5145
5301
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button {
5146
5302
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-default);
5147
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-default);
5303
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-default);
5304
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-default);
5148
5305
  }
5149
5306
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button .ids-icon {
5150
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-default);
5307
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-default);
5151
5308
  }
5152
5309
  .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) {
5153
5310
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-active);
5154
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-active);
5311
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-active);
5312
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-default);
5155
5313
  }
5156
5314
  .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 {
5157
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-active);
5315
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-active);
5158
5316
  }
5159
5317
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:hover {
5160
5318
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-hovered);
5161
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-hovered);
5319
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-hovered);
5320
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-default);
5162
5321
  }
5163
5322
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:hover .ids-icon {
5164
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-hovered);
5323
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-hovered);
5165
5324
  }
5166
5325
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:active {
5167
5326
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-pressed);
5168
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-pressed);
5327
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-pressed);
5328
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-default);
5169
5329
  }
5170
5330
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:active .ids-icon {
5171
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-pressed);
5331
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-pressed);
5172
5332
  }
5173
5333
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus {
5174
5334
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-focused);
5175
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-focused);
5335
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-focused);
5336
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-default);
5176
5337
  }
5177
5338
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus .ids-icon {
5178
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-focused);
5339
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-focused);
5179
5340
  }
5180
5341
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:disabled {
5181
5342
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-disabled);
5182
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-disabled);
5343
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-disabled);
5344
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-default);
5183
5345
  }
5184
5346
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:disabled .ids-icon {
5185
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-disabled);
5347
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-disabled);
5186
5348
  }
5187
5349
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark .ids-segmented-control-toggle-item > button:focus {
5188
5350
  outline-color: var(--ids-comp-segmented-control-toggle-focused-outline-color-dark-focused);
5189
5351
  }
5190
5352
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled {
5191
5353
  background-color: var(--ids-comp-segmented-control-toggle-container-filled-color-bg-dark-default);
5192
- border-color: var(--ids-comp-segmented-control-toggle-container-filled-color-border-dark-default);
5193
5354
  }
5194
5355
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button {
5195
5356
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-dark-default);
5196
5357
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-dark-default);
5358
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-dark-default);
5197
5359
  }
5198
5360
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button .ids-icon {
5199
5361
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-default);
@@ -5201,6 +5363,7 @@
5201
5363
  .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) {
5202
5364
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-dark-active);
5203
5365
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-dark-active);
5366
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-dark-default);
5204
5367
  }
5205
5368
  .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 {
5206
5369
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-active);
@@ -5208,6 +5371,7 @@
5208
5371
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:hover {
5209
5372
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-dark-hovered);
5210
5373
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-dark-hovered);
5374
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-dark-default);
5211
5375
  }
5212
5376
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:hover .ids-icon {
5213
5377
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-hovered);
@@ -5215,6 +5379,7 @@
5215
5379
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:active {
5216
5380
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-dark-pressed);
5217
5381
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-dark-pressed);
5382
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-dark-default);
5218
5383
  }
5219
5384
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:active .ids-icon {
5220
5385
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-pressed);
@@ -5222,6 +5387,7 @@
5222
5387
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus {
5223
5388
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-dark-focused);
5224
5389
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-dark-focused);
5390
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-dark-default);
5225
5391
  }
5226
5392
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus .ids-icon {
5227
5393
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-focused);
@@ -5229,55 +5395,61 @@
5229
5395
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:disabled {
5230
5396
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-dark-disabled);
5231
5397
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-dark-disabled);
5398
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-dark-default);
5232
5399
  }
5233
5400
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:disabled .ids-icon {
5234
5401
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-disabled);
5235
5402
  }
5236
5403
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined {
5237
5404
  background-color: var(--ids-comp-segmented-control-toggle-container-outlined-color-bg-dark-default);
5238
- border-color: var(--ids-comp-segmented-control-toggle-container-outlined-color-border-dark-default);
5239
5405
  }
5240
5406
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button {
5241
5407
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-dark-default);
5242
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-dark-default);
5408
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-dark-default);
5409
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-dark-default);
5243
5410
  }
5244
5411
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button .ids-icon {
5245
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-default);
5412
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-dark-default);
5246
5413
  }
5247
5414
  .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) {
5248
5415
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-dark-active);
5249
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-dark-active);
5416
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-dark-active);
5417
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-dark-default);
5250
5418
  }
5251
5419
  .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 {
5252
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-active);
5420
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-dark-active);
5253
5421
  }
5254
5422
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:hover {
5255
5423
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-dark-hovered);
5256
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-dark-hovered);
5424
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-dark-hovered);
5425
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-dark-default);
5257
5426
  }
5258
5427
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:hover .ids-icon {
5259
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-hovered);
5428
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-dark-hovered);
5260
5429
  }
5261
5430
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:active {
5262
5431
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-dark-pressed);
5263
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-dark-pressed);
5432
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-dark-pressed);
5433
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-dark-default);
5264
5434
  }
5265
5435
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:active .ids-icon {
5266
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-pressed);
5436
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-dark-pressed);
5267
5437
  }
5268
5438
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus {
5269
5439
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-dark-focused);
5270
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-dark-focused);
5440
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-dark-focused);
5441
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-dark-default);
5271
5442
  }
5272
5443
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus .ids-icon {
5273
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-focused);
5444
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-dark-focused);
5274
5445
  }
5275
5446
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:disabled {
5276
5447
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-dark-disabled);
5277
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-dark-disabled);
5448
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-dark-disabled);
5449
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-dark-default);
5278
5450
  }
5279
5451
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:disabled .ids-icon {
5280
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-disabled);
5452
+ color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-dark-disabled);
5281
5453
  }
5282
5454
 
5283
5455
  .ids-tag {
@@ -5741,4 +5913,11 @@
5741
5913
  color: var(--ids-comp-tag-outlined-color-fg-label-surface-pressed);
5742
5914
  background: var(--ids-comp-tag-outlined-color-bg-surface-pressed);
5743
5915
  border-color: var(--ids-comp-tag-outlined-color-border-surface-pressed);
5916
+ }
5917
+
5918
+ button.ids-tag :not(:disabled) {
5919
+ cursor: pointer;
5920
+ }
5921
+ button.ids-tag :disabled {
5922
+ cursor: not-allowed;
5744
5923
  }