@i-cell/ids-styles 0.0.6 → 0.0.8

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/action-item/action-item.css +6 -0
  2. package/dist/action-item/action-item.min.css +1 -1
  3. package/dist/action-item/action-item.plugin.js +2 -0
  4. package/dist/action-panel/action-panel.css +2 -2
  5. package/dist/action-panel/action-panel.min.css +1 -1
  6. package/dist/action-panel/action-panel.plugin.js +3 -2
  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 +248 -106
  17. package/dist/components.min.css +1 -1
  18. package/dist/components.plugin.js +216 -106
  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 +6 -0
  23. package/dist/paginator/paginator.min.css +1 -1
  24. package/dist/paginator/paginator.plugin.js +2 -0
  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 +1 -1
package/dist/components.css CHANGED
@@ -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;
@@ -424,10 +430,10 @@
424
430
  border: var(--ids-comp-action-panel-size-border-dense) solid var(--ids-comp-action-panel-elevated-color-border-light-default);
425
431
  }
426
432
  .ids-action-panel.ids-action-panel-filled {
427
- box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0);
433
+ box-shadow: none;
428
434
  }
429
435
  .ids-action-panel.ids-action-panel-outlined {
430
- box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0);
436
+ box-shadow: var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxs) var(--ids-smc-reference-container-effects-shadow-blur-xxs) var(--ids-smc-reference-container-effects-shadow-spread-none) var(--ids-smc-reference-container-effects-shadow-color-dark-lighter);
431
437
  }
432
438
  .ids-action-panel.ids-action-panel-elevated {
433
439
  box-shadow: var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-default);
@@ -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);
@@ -3949,6 +3978,12 @@
3949
3978
  outline-style: solid;
3950
3979
  outline-offset: 2px;
3951
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
+ }
3952
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 {
3953
3988
  order: 1;
3954
3989
  }
@@ -4286,6 +4321,12 @@
4286
4321
  outline-style: solid;
4287
4322
  outline-offset: 2px;
4288
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
+ }
4289
4330
  .ids-segmented-control.ids-segmented-control-compact {
4290
4331
  padding: var(--ids-comp-segmented-control-container-size-padding-y-compact) var(--ids-comp-segmented-control-container-size-padding-x-compact);
4291
4332
  gap: var(--ids-comp-segmented-control-container-size-gap-compact);
@@ -4440,6 +4481,7 @@
4440
4481
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button {
4441
4482
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-default);
4442
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);
4443
4485
  }
4444
4486
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button .ids-icon {
4445
4487
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-default);
@@ -4447,6 +4489,7 @@
4447
4489
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
4448
4490
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-active);
4449
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);
4450
4493
  }
4451
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 {
4452
4495
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-active);
@@ -4454,6 +4497,7 @@
4454
4497
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:hover {
4455
4498
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-hovered);
4456
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);
4457
4501
  }
4458
4502
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:hover .ids-icon {
4459
4503
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-hovered);
@@ -4461,6 +4505,7 @@
4461
4505
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:active {
4462
4506
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-pressed);
4463
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);
4464
4509
  }
4465
4510
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:active .ids-icon {
4466
4511
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-pressed);
@@ -4468,6 +4513,7 @@
4468
4513
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:focus {
4469
4514
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-focused);
4470
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);
4471
4517
  }
4472
4518
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:focus .ids-icon {
4473
4519
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-focused);
@@ -4475,6 +4521,7 @@
4475
4521
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:disabled {
4476
4522
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-disabled);
4477
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);
4478
4525
  }
4479
4526
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:disabled .ids-icon {
4480
4527
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-disabled);
@@ -4485,45 +4532,51 @@
4485
4532
  }
4486
4533
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button {
4487
4534
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-primary-default);
4488
- 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);
4489
4537
  }
4490
4538
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button .ids-icon {
4491
- 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);
4492
4540
  }
4493
4541
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
4494
4542
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-primary-active);
4495
- 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);
4496
4545
  }
4497
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 {
4498
- 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);
4499
4548
  }
4500
4549
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:hover {
4501
4550
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-primary-hovered);
4502
- 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);
4503
4553
  }
4504
4554
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:hover .ids-icon {
4505
- 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);
4506
4556
  }
4507
4557
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:active {
4508
4558
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-primary-pressed);
4509
- 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);
4510
4561
  }
4511
4562
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:active .ids-icon {
4512
- 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);
4513
4564
  }
4514
4565
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:focus {
4515
4566
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-primary-focused);
4516
- 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);
4517
4569
  }
4518
4570
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:focus .ids-icon {
4519
- 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);
4520
4572
  }
4521
4573
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled {
4522
4574
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-primary-disabled);
4523
- 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);
4524
4577
  }
4525
4578
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled .ids-icon {
4526
- 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);
4527
4580
  }
4528
4581
  .ids-segmented-control.ids-segmented-control-surface .ids-segmented-control-item > button:focus {
4529
4582
  outline-color: var(--ids-comp-segmented-control-focused-outline-color-dark-focused);
@@ -4535,6 +4588,7 @@
4535
4588
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button {
4536
4589
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-default);
4537
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);
4538
4592
  }
4539
4593
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button .ids-icon {
4540
4594
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-default);
@@ -4542,6 +4596,7 @@
4542
4596
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
4543
4597
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-active);
4544
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);
4545
4600
  }
4546
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 {
4547
4602
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-active);
@@ -4549,6 +4604,7 @@
4549
4604
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:hover {
4550
4605
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-hovered);
4551
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);
4552
4608
  }
4553
4609
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:hover .ids-icon {
4554
4610
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-hovered);
@@ -4556,6 +4612,7 @@
4556
4612
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:active {
4557
4613
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-pressed);
4558
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);
4559
4616
  }
4560
4617
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:active .ids-icon {
4561
4618
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-pressed);
@@ -4563,6 +4620,7 @@
4563
4620
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:focus {
4564
4621
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-focused);
4565
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);
4566
4624
  }
4567
4625
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:focus .ids-icon {
4568
4626
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-focused);
@@ -4570,6 +4628,7 @@
4570
4628
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:disabled {
4571
4629
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-disabled);
4572
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);
4573
4632
  }
4574
4633
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:disabled .ids-icon {
4575
4634
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-disabled);
@@ -4580,45 +4639,51 @@
4580
4639
  }
4581
4640
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button {
4582
4641
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-surface-default);
4583
- 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);
4584
4644
  }
4585
4645
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button .ids-icon {
4586
- 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);
4587
4647
  }
4588
4648
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
4589
4649
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-surface-active);
4590
- 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);
4591
4652
  }
4592
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 {
4593
- 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);
4594
4655
  }
4595
4656
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:hover {
4596
4657
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-surface-hovered);
4597
- 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);
4598
4660
  }
4599
4661
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:hover .ids-icon {
4600
- 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);
4601
4663
  }
4602
4664
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:active {
4603
4665
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-surface-pressed);
4604
- 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);
4605
4668
  }
4606
4669
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:active .ids-icon {
4607
- 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);
4608
4671
  }
4609
4672
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:focus {
4610
4673
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-surface-focused);
4611
- 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);
4612
4676
  }
4613
4677
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:focus .ids-icon {
4614
- 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);
4615
4679
  }
4616
4680
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled {
4617
4681
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-surface-disabled);
4618
- 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);
4619
4684
  }
4620
4685
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled .ids-icon {
4621
- 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);
4622
4687
  }
4623
4688
  .ids-segmented-control.ids-segmented-control-light .ids-segmented-control-item > button:focus {
4624
4689
  outline-color: var(--ids-comp-segmented-control-focused-outline-color-light-focused);
@@ -4630,6 +4695,7 @@
4630
4695
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button {
4631
4696
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-default);
4632
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);
4633
4699
  }
4634
4700
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button .ids-icon {
4635
4701
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-default);
@@ -4637,6 +4703,7 @@
4637
4703
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
4638
4704
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-active);
4639
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);
4640
4707
  }
4641
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 {
4642
4709
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-active);
@@ -4644,6 +4711,7 @@
4644
4711
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:hover {
4645
4712
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-hovered);
4646
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);
4647
4715
  }
4648
4716
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:hover .ids-icon {
4649
4717
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-hovered);
@@ -4651,6 +4719,7 @@
4651
4719
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:active {
4652
4720
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-pressed);
4653
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);
4654
4723
  }
4655
4724
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:active .ids-icon {
4656
4725
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-pressed);
@@ -4658,6 +4727,7 @@
4658
4727
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:focus {
4659
4728
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-focused);
4660
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);
4661
4731
  }
4662
4732
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:focus .ids-icon {
4663
4733
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-focused);
@@ -4665,6 +4735,7 @@
4665
4735
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:disabled {
4666
4736
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-disabled);
4667
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);
4668
4739
  }
4669
4740
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:disabled .ids-icon {
4670
4741
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-disabled);
@@ -4675,45 +4746,51 @@
4675
4746
  }
4676
4747
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button {
4677
4748
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-light-default);
4678
- 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);
4679
4751
  }
4680
4752
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button .ids-icon {
4681
- 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);
4682
4754
  }
4683
4755
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
4684
4756
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-light-active);
4685
- 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);
4686
4759
  }
4687
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 {
4688
- 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);
4689
4762
  }
4690
4763
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:hover {
4691
4764
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-light-hovered);
4692
- 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);
4693
4767
  }
4694
4768
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:hover .ids-icon {
4695
- 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);
4696
4770
  }
4697
4771
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:active {
4698
4772
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-light-pressed);
4699
- 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);
4700
4775
  }
4701
4776
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:active .ids-icon {
4702
- 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);
4703
4778
  }
4704
4779
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:focus {
4705
4780
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-light-focused);
4706
- 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);
4707
4783
  }
4708
4784
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:focus .ids-icon {
4709
- 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);
4710
4786
  }
4711
4787
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled {
4712
4788
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-light-disabled);
4713
- 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);
4714
4791
  }
4715
4792
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled .ids-icon {
4716
- 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);
4717
4794
  }
4718
4795
  .ids-segmented-control.ids-segmented-control-dark .ids-segmented-control-item > button:focus {
4719
4796
  outline-color: var(--ids-comp-segmented-control-focused-outline-color-dark-focused);
@@ -4725,6 +4802,7 @@
4725
4802
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button {
4726
4803
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-default);
4727
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);
4728
4806
  }
4729
4807
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button .ids-icon {
4730
4808
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-default);
@@ -4732,6 +4810,7 @@
4732
4810
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
4733
4811
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-active);
4734
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);
4735
4814
  }
4736
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 {
4737
4816
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-active);
@@ -4739,6 +4818,7 @@
4739
4818
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:hover {
4740
4819
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-hovered);
4741
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);
4742
4822
  }
4743
4823
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:hover .ids-icon {
4744
4824
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-hovered);
@@ -4746,6 +4826,7 @@
4746
4826
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:active {
4747
4827
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-pressed);
4748
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);
4749
4830
  }
4750
4831
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:active .ids-icon {
4751
4832
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-pressed);
@@ -4753,6 +4834,7 @@
4753
4834
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:focus {
4754
4835
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-focused);
4755
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);
4756
4838
  }
4757
4839
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:focus .ids-icon {
4758
4840
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-focused);
@@ -4760,6 +4842,7 @@
4760
4842
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:disabled {
4761
4843
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-disabled);
4762
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);
4763
4846
  }
4764
4847
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:disabled .ids-icon {
4765
4848
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-disabled);
@@ -4770,45 +4853,51 @@
4770
4853
  }
4771
4854
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button {
4772
4855
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-default);
4773
- 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);
4774
4858
  }
4775
4859
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button .ids-icon {
4776
- 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);
4777
4861
  }
4778
4862
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
4779
4863
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-active);
4780
- 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);
4781
4866
  }
4782
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 {
4783
- 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);
4784
4869
  }
4785
4870
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:hover {
4786
4871
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-hovered);
4787
- 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);
4788
4874
  }
4789
4875
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:hover .ids-icon {
4790
- 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);
4791
4877
  }
4792
4878
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:active {
4793
4879
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-pressed);
4794
- 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);
4795
4882
  }
4796
4883
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:active .ids-icon {
4797
- 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);
4798
4885
  }
4799
4886
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:focus {
4800
4887
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-focused);
4801
- 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);
4802
4890
  }
4803
4891
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:focus .ids-icon {
4804
- 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);
4805
4893
  }
4806
4894
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled {
4807
4895
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-disabled);
4808
- 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);
4809
4898
  }
4810
4899
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled .ids-icon {
4811
- 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);
4812
4901
  }
4813
4902
 
4814
4903
  .ids-segmented-control-toggle {
@@ -4832,6 +4921,12 @@
4832
4921
  .ids-segmented-control-toggle .ids-segmented-control-toggle-item > button.selected {
4833
4922
  pointer-events: none;
4834
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
+ }
4835
4930
  .ids-segmented-control-toggle.ids-segmented-control-toggle-compact {
4836
4931
  padding: var(--ids-comp-segmented-control-toggle-container-size-padding-y-compact) var(--ids-comp-segmented-control-toggle-container-size-padding-x-compact);
4837
4932
  gap: var(--ids-comp-segmented-control-toggle-container-size-gap-compact);
@@ -4941,11 +5036,11 @@
4941
5036
  }
4942
5037
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled {
4943
5038
  background-color: var(--ids-comp-segmented-control-toggle-container-filled-color-bg-primary-default);
4944
- border-color: var(--ids-comp-segmented-control-toggle-container-filled-color-border-primary-default);
4945
5039
  }
4946
5040
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button {
4947
5041
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-default);
4948
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);
4949
5044
  }
4950
5045
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button .ids-icon {
4951
5046
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-default);
@@ -4953,6 +5048,7 @@
4953
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) {
4954
5049
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-active);
4955
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);
4956
5052
  }
4957
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 {
4958
5054
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-active);
@@ -4960,6 +5056,7 @@
4960
5056
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:hover {
4961
5057
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-hovered);
4962
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);
4963
5060
  }
4964
5061
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:hover .ids-icon {
4965
5062
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-hovered);
@@ -4967,6 +5064,7 @@
4967
5064
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:active {
4968
5065
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-pressed);
4969
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);
4970
5068
  }
4971
5069
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:active .ids-icon {
4972
5070
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-pressed);
@@ -4974,6 +5072,7 @@
4974
5072
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus {
4975
5073
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-focused);
4976
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);
4977
5076
  }
4978
5077
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus .ids-icon {
4979
5078
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-focused);
@@ -4981,66 +5080,72 @@
4981
5080
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:disabled {
4982
5081
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-disabled);
4983
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);
4984
5084
  }
4985
5085
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:disabled .ids-icon {
4986
5086
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-disabled);
4987
5087
  }
4988
5088
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined {
4989
5089
  background-color: var(--ids-comp-segmented-control-toggle-container-outlined-color-bg-primary-default);
4990
- border-color: var(--ids-comp-segmented-control-toggle-container-outlined-color-border-primary-default);
4991
5090
  }
4992
5091
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button {
4993
5092
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-default);
4994
- 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);
4995
5095
  }
4996
5096
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button .ids-icon {
4997
- 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);
4998
5098
  }
4999
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) {
5000
5100
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-active);
5001
- 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);
5002
5103
  }
5003
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 {
5004
- 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);
5005
5106
  }
5006
5107
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:hover {
5007
5108
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-hovered);
5008
- 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);
5009
5111
  }
5010
5112
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:hover .ids-icon {
5011
- 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);
5012
5114
  }
5013
5115
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:active {
5014
5116
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-pressed);
5015
- 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);
5016
5119
  }
5017
5120
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:active .ids-icon {
5018
- 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);
5019
5122
  }
5020
5123
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus {
5021
5124
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-focused);
5022
- 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);
5023
5127
  }
5024
5128
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus .ids-icon {
5025
- 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);
5026
5130
  }
5027
5131
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:disabled {
5028
5132
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-disabled);
5029
- 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);
5030
5135
  }
5031
5136
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:disabled .ids-icon {
5032
- 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);
5033
5138
  }
5034
5139
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface .ids-segmented-control-toggle-item > button:focus {
5035
5140
  outline-color: var(--ids-comp-segmented-control-toggle-focused-outline-color-dark-focused);
5036
5141
  }
5037
5142
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled {
5038
5143
  background-color: var(--ids-comp-segmented-control-toggle-container-filled-color-bg-surface-default);
5039
- border-color: var(--ids-comp-segmented-control-toggle-container-filled-color-border-surface-default);
5040
5144
  }
5041
5145
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button {
5042
5146
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-default);
5043
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);
5044
5149
  }
5045
5150
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button .ids-icon {
5046
5151
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-default);
@@ -5048,6 +5153,7 @@
5048
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) {
5049
5154
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-active);
5050
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);
5051
5157
  }
5052
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 {
5053
5159
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-active);
@@ -5055,6 +5161,7 @@
5055
5161
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:hover {
5056
5162
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-hovered);
5057
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);
5058
5165
  }
5059
5166
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:hover .ids-icon {
5060
5167
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-hovered);
@@ -5062,6 +5169,7 @@
5062
5169
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:active {
5063
5170
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-pressed);
5064
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);
5065
5173
  }
5066
5174
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:active .ids-icon {
5067
5175
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-pressed);
@@ -5069,6 +5177,7 @@
5069
5177
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus {
5070
5178
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-focused);
5071
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);
5072
5181
  }
5073
5182
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus .ids-icon {
5074
5183
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-focused);
@@ -5076,66 +5185,72 @@
5076
5185
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:disabled {
5077
5186
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-disabled);
5078
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);
5079
5189
  }
5080
5190
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:disabled .ids-icon {
5081
5191
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-disabled);
5082
5192
  }
5083
5193
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined {
5084
5194
  background-color: var(--ids-comp-segmented-control-toggle-container-outlined-color-bg-surface-default);
5085
- border-color: var(--ids-comp-segmented-control-toggle-container-outlined-color-border-surface-default);
5086
5195
  }
5087
5196
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button {
5088
5197
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-default);
5089
- 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);
5090
5200
  }
5091
5201
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button .ids-icon {
5092
- 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);
5093
5203
  }
5094
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) {
5095
5205
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-active);
5096
- 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);
5097
5208
  }
5098
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 {
5099
- 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);
5100
5211
  }
5101
5212
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:hover {
5102
5213
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-hovered);
5103
- 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);
5104
5216
  }
5105
5217
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:hover .ids-icon {
5106
- 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);
5107
5219
  }
5108
5220
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:active {
5109
5221
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-pressed);
5110
- 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);
5111
5224
  }
5112
5225
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:active .ids-icon {
5113
- 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);
5114
5227
  }
5115
5228
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus {
5116
5229
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-focused);
5117
- 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);
5118
5232
  }
5119
5233
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus .ids-icon {
5120
- 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);
5121
5235
  }
5122
5236
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:disabled {
5123
5237
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-disabled);
5124
- 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);
5125
5240
  }
5126
5241
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:disabled .ids-icon {
5127
- 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);
5128
5243
  }
5129
5244
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light .ids-segmented-control-toggle-item > button:focus {
5130
5245
  outline-color: var(--ids-comp-segmented-control-toggle-focused-outline-color-light-focused);
5131
5246
  }
5132
5247
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled {
5133
5248
  background-color: var(--ids-comp-segmented-control-toggle-container-filled-color-bg-light-default);
5134
- border-color: var(--ids-comp-segmented-control-toggle-container-filled-color-border-light-default);
5135
5249
  }
5136
5250
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button {
5137
5251
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-default);
5138
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);
5139
5254
  }
5140
5255
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button .ids-icon {
5141
5256
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-default);
@@ -5143,6 +5258,7 @@
5143
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) {
5144
5259
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-active);
5145
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);
5146
5262
  }
5147
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 {
5148
5264
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-active);
@@ -5150,6 +5266,7 @@
5150
5266
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:hover {
5151
5267
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-hovered);
5152
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);
5153
5270
  }
5154
5271
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:hover .ids-icon {
5155
5272
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-hovered);
@@ -5157,6 +5274,7 @@
5157
5274
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:active {
5158
5275
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-pressed);
5159
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);
5160
5278
  }
5161
5279
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:active .ids-icon {
5162
5280
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-pressed);
@@ -5164,6 +5282,7 @@
5164
5282
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus {
5165
5283
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-focused);
5166
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);
5167
5286
  }
5168
5287
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus .ids-icon {
5169
5288
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-focused);
@@ -5171,66 +5290,72 @@
5171
5290
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:disabled {
5172
5291
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-disabled);
5173
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);
5174
5294
  }
5175
5295
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:disabled .ids-icon {
5176
5296
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-disabled);
5177
5297
  }
5178
5298
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined {
5179
5299
  background-color: var(--ids-comp-segmented-control-toggle-container-outlined-color-bg-light-default);
5180
- border-color: var(--ids-comp-segmented-control-toggle-container-outlined-color-border-light-default);
5181
5300
  }
5182
5301
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button {
5183
5302
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-default);
5184
- 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);
5185
5305
  }
5186
5306
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button .ids-icon {
5187
- 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);
5188
5308
  }
5189
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) {
5190
5310
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-active);
5191
- 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);
5192
5313
  }
5193
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 {
5194
- 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);
5195
5316
  }
5196
5317
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:hover {
5197
5318
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-hovered);
5198
- 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);
5199
5321
  }
5200
5322
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:hover .ids-icon {
5201
- 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);
5202
5324
  }
5203
5325
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:active {
5204
5326
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-pressed);
5205
- 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);
5206
5329
  }
5207
5330
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:active .ids-icon {
5208
- 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);
5209
5332
  }
5210
5333
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus {
5211
5334
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-focused);
5212
- 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);
5213
5337
  }
5214
5338
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus .ids-icon {
5215
- 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);
5216
5340
  }
5217
5341
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:disabled {
5218
5342
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-disabled);
5219
- 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);
5220
5345
  }
5221
5346
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:disabled .ids-icon {
5222
- 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);
5223
5348
  }
5224
5349
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark .ids-segmented-control-toggle-item > button:focus {
5225
5350
  outline-color: var(--ids-comp-segmented-control-toggle-focused-outline-color-dark-focused);
5226
5351
  }
5227
5352
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled {
5228
5353
  background-color: var(--ids-comp-segmented-control-toggle-container-filled-color-bg-dark-default);
5229
- border-color: var(--ids-comp-segmented-control-toggle-container-filled-color-border-dark-default);
5230
5354
  }
5231
5355
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button {
5232
5356
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-dark-default);
5233
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);
5234
5359
  }
5235
5360
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button .ids-icon {
5236
5361
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-default);
@@ -5238,6 +5363,7 @@
5238
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) {
5239
5364
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-dark-active);
5240
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);
5241
5367
  }
5242
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 {
5243
5369
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-active);
@@ -5245,6 +5371,7 @@
5245
5371
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:hover {
5246
5372
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-dark-hovered);
5247
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);
5248
5375
  }
5249
5376
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:hover .ids-icon {
5250
5377
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-hovered);
@@ -5252,6 +5379,7 @@
5252
5379
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:active {
5253
5380
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-dark-pressed);
5254
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);
5255
5383
  }
5256
5384
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:active .ids-icon {
5257
5385
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-pressed);
@@ -5259,6 +5387,7 @@
5259
5387
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus {
5260
5388
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-dark-focused);
5261
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);
5262
5391
  }
5263
5392
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus .ids-icon {
5264
5393
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-focused);
@@ -5266,55 +5395,61 @@
5266
5395
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:disabled {
5267
5396
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-dark-disabled);
5268
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);
5269
5399
  }
5270
5400
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:disabled .ids-icon {
5271
5401
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-disabled);
5272
5402
  }
5273
5403
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined {
5274
5404
  background-color: var(--ids-comp-segmented-control-toggle-container-outlined-color-bg-dark-default);
5275
- border-color: var(--ids-comp-segmented-control-toggle-container-outlined-color-border-dark-default);
5276
5405
  }
5277
5406
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button {
5278
5407
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-dark-default);
5279
- 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);
5280
5410
  }
5281
5411
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button .ids-icon {
5282
- 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);
5283
5413
  }
5284
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) {
5285
5415
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-dark-active);
5286
- 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);
5287
5418
  }
5288
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 {
5289
- 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);
5290
5421
  }
5291
5422
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:hover {
5292
5423
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-dark-hovered);
5293
- 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);
5294
5426
  }
5295
5427
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:hover .ids-icon {
5296
- 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);
5297
5429
  }
5298
5430
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:active {
5299
5431
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-dark-pressed);
5300
- 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);
5301
5434
  }
5302
5435
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:active .ids-icon {
5303
- 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);
5304
5437
  }
5305
5438
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus {
5306
5439
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-dark-focused);
5307
- 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);
5308
5442
  }
5309
5443
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus .ids-icon {
5310
- 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);
5311
5445
  }
5312
5446
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:disabled {
5313
5447
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-dark-disabled);
5314
- 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);
5315
5450
  }
5316
5451
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:disabled .ids-icon {
5317
- 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);
5318
5453
  }
5319
5454
 
5320
5455
  .ids-tag {
@@ -5778,4 +5913,11 @@
5778
5913
  color: var(--ids-comp-tag-outlined-color-fg-label-surface-pressed);
5779
5914
  background: var(--ids-comp-tag-outlined-color-bg-surface-pressed);
5780
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;
5781
5923
  }