@i-cell/ids-styles 0.0.8 → 0.0.9

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.
@@ -4303,6 +4303,712 @@
4303
4303
  margin-left: 0;
4304
4304
  }
4305
4305
 
4306
+ .ids-radio-group {
4307
+ display: inline-flex;
4308
+ align-items: flex-start;
4309
+ justify-content: start;
4310
+ }
4311
+ .ids-radio-group.ids-radio-group-horizontal {
4312
+ flex-direction: row;
4313
+ }
4314
+ .ids-radio-group.ids-radio-group-vertical {
4315
+ flex-direction: column;
4316
+ }
4317
+ .ids-radio-group.ids-radio-group-left {
4318
+ align-items: flex-end;
4319
+ }
4320
+ .ids-radio-group.ids-radio-group-right {
4321
+ align-items: flex-start;
4322
+ }
4323
+ .ids-radio-group .ids-radio-item {
4324
+ display: flex;
4325
+ align-items: center;
4326
+ }
4327
+ .ids-radio-group .ids-radio-item.ids-radio-item-left {
4328
+ flex-direction: row-reverse;
4329
+ justify-content: start;
4330
+ }
4331
+ .ids-radio-group .ids-radio-item.ids-radio-item-righ {
4332
+ flex-direction: row;
4333
+ justify-content: start;
4334
+ }
4335
+ .ids-radio-group .ids-radio-item.ids-radio-item-top {
4336
+ flex-direction: column-reverse;
4337
+ align-items: center;
4338
+ }
4339
+ .ids-radio-group .ids-radio-item.ids-radio-item-bottom {
4340
+ flex-direction: column;
4341
+ align-items: center;
4342
+ }
4343
+ .ids-radio-group .ids-radio-item .ids-radio-item__input-wrapper {
4344
+ position: relative;
4345
+ display: flex;
4346
+ align-items: center;
4347
+ justify-content: center;
4348
+ }
4349
+ .ids-radio-group .ids-radio-item .ids-radio-item__input-wrapper .ids-radio-item__touch-target {
4350
+ position: absolute;
4351
+ cursor: pointer;
4352
+ }
4353
+ .ids-radio-group .ids-radio-item .ids-radio-item__input-wrapper input[type=radio] {
4354
+ appearance: none;
4355
+ -webkit-appearance: none;
4356
+ flex-shrink: 0;
4357
+ border-style: solid;
4358
+ margin: 0;
4359
+ display: flex;
4360
+ justify-content: center;
4361
+ align-items: center;
4362
+ flex-shrink: 0;
4363
+ cursor: pointer;
4364
+ }
4365
+ .ids-radio-group .ids-radio-item .ids-radio-item__input-wrapper input[type=radio] + .ids-radio-item__inner-circle {
4366
+ position: absolute;
4367
+ flex-shrink: 0;
4368
+ border-style: solid;
4369
+ height: 0;
4370
+ width: 0;
4371
+ border-width: 0;
4372
+ cursor: pointer;
4373
+ }
4374
+ .ids-radio-group .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus, .ids-radio-group .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus-visible {
4375
+ outline-offset: 2px;
4376
+ outline-style: solid;
4377
+ }
4378
+ .ids-radio-group .ids-radio-item .ids-radio-item__label {
4379
+ cursor: pointer;
4380
+ }
4381
+ .ids-radio-group .ids-radio-item.ids-radio-item-disabled .ids-radio-item__input-wrapper .ids-radio-item__touch-target {
4382
+ cursor: not-allowed;
4383
+ }
4384
+ .ids-radio-group .ids-radio-item.ids-radio-item-disabled .ids-radio-item__input-wrapper input[type=radio] {
4385
+ cursor: not-allowed;
4386
+ }
4387
+ .ids-radio-group .ids-radio-item.ids-radio-item-disabled .ids-radio-item__input-wrapper input[type=radio] + .ids-radio-item__inner-circle {
4388
+ cursor: not-allowed;
4389
+ }
4390
+ .ids-radio-group .ids-radio-item.ids-radio-item-disabled .ids-radio-item__label {
4391
+ cursor: not-allowed;
4392
+ }
4393
+ .ids-radio-group .ids-radio-item .ids-radio-item__label {
4394
+ display: flex;
4395
+ justify-content: center;
4396
+ align-items: center;
4397
+ flex: 1 0 0;
4398
+ font-style: normal;
4399
+ }
4400
+ .ids-radio-group.ids-radio-group-compact.ids-radio-group-horizontal {
4401
+ padding: var(--ids-comp-radio-group-horizontal-container-size-padding-y-compact) var(--ids-comp-radio-group-horizontal-container-size-padding-x-compact);
4402
+ gap: var(--ids-comp-radio-group-horizontal-container-size-gap-compact);
4403
+ }
4404
+ .ids-radio-group.ids-radio-group-compact.ids-radio-group-vertical {
4405
+ padding: var(--ids-comp-radio-group-vertical-container-size-padding-y-compact) var(--ids-comp-radio-group-vertical-container-size-padding-x-compact);
4406
+ gap: var(--ids-comp-radio-group-vertical-container-size-gap-compact);
4407
+ }
4408
+ .ids-radio-group.ids-radio-group-compact > .ids-radio-item {
4409
+ padding: var(--ids-comp-radio-button-container-size-padding-y-compact) var(--ids-comp-radio-button-container-size-padding-x-compact);
4410
+ gap: var(--ids-comp-radio-button-container-size-gap-compact);
4411
+ }
4412
+ .ids-radio-group.ids-radio-group-compact > .ids-radio-item .ids-radio-item__input-wrapper .ids-radio-item__touch-target {
4413
+ top: calc((var(--ids-comp-radio-button-input-size-height-compact) - var(--ids-comp-radio-button-input-size-touchtarget-height-compact)) / 2);
4414
+ left: calc((var(--ids-comp-radio-button-input-size-width-compact) - var(--ids-comp-radio-button-input-size-touchtarget-width-compact)) / 2);
4415
+ height: var(--ids-comp-radio-button-input-size-touchtarget-height-compact);
4416
+ width: var(--ids-comp-radio-button-input-size-touchtarget-width-compact);
4417
+ }
4418
+ .ids-radio-group.ids-radio-group-compact > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio] {
4419
+ width: var(--ids-comp-radio-button-input-size-width-compact);
4420
+ height: var(--ids-comp-radio-button-input-size-height-compact);
4421
+ border-radius: var(--ids-comp-radio-button-input-size-border-radius-compact);
4422
+ border-width: var(--ids-comp-radio-button-input-size-border-width-compact);
4423
+ }
4424
+ .ids-radio-group.ids-radio-group-compact > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:checked + .ids-radio-item__inner-circle {
4425
+ width: var(--ids-comp-radio-button-input-inner-circle-size-width-compact);
4426
+ height: var(--ids-comp-radio-button-input-inner-circle-size-height-compact);
4427
+ border-radius: var(--ids-comp-radio-button-input-inner-circle-size-border-radius-compact);
4428
+ border-width: var(--ids-comp-radio-button-input-inner-circle-size-border-width-compact);
4429
+ }
4430
+ .ids-radio-group.ids-radio-group-compact > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus {
4431
+ outline-width: var(--ids-comp-radio-focused-outline-outline-compact);
4432
+ }
4433
+ .ids-radio-group.ids-radio-group-compact > .ids-radio-item .ids-radio-item__label {
4434
+ padding: var(--ids-comp-radio-button-label-size-padding-y-compact) 0px;
4435
+ font-family: var(--ids-comp-radio-button-label-typography-font-family-compact);
4436
+ font-size: var(--ids-comp-radio-button-label-typography-font-size-compact);
4437
+ font-weight: var(--ids-comp-radio-button-label-typography-font-weight-compact);
4438
+ line-height: var(--ids-comp-radio-button-label-typography-line-height-compact);
4439
+ letter-spacing: var(--ids-comp-radio-button-label-typography-letter-spacing-compact);
4440
+ }
4441
+ .ids-radio-group.ids-radio-group-comfortable.ids-radio-group-horizontal {
4442
+ padding: var(--ids-comp-radio-group-horizontal-container-size-padding-y-comfortable) var(--ids-comp-radio-group-horizontal-container-size-padding-x-comfortable);
4443
+ gap: var(--ids-comp-radio-group-horizontal-container-size-gap-comfortable);
4444
+ }
4445
+ .ids-radio-group.ids-radio-group-comfortable.ids-radio-group-vertical {
4446
+ padding: var(--ids-comp-radio-group-vertical-container-size-padding-y-comfortable) var(--ids-comp-radio-group-vertical-container-size-padding-x-comfortable);
4447
+ gap: var(--ids-comp-radio-group-vertical-container-size-gap-comfortable);
4448
+ }
4449
+ .ids-radio-group.ids-radio-group-comfortable > .ids-radio-item {
4450
+ padding: var(--ids-comp-radio-button-container-size-padding-y-comfortable) var(--ids-comp-radio-button-container-size-padding-x-comfortable);
4451
+ gap: var(--ids-comp-radio-button-container-size-gap-comfortable);
4452
+ }
4453
+ .ids-radio-group.ids-radio-group-comfortable > .ids-radio-item .ids-radio-item__input-wrapper .ids-radio-item__touch-target {
4454
+ top: calc((var(--ids-comp-radio-button-input-size-height-comfortable) - var(--ids-comp-radio-button-input-size-touchtarget-height-comfortable)) / 2);
4455
+ left: calc((var(--ids-comp-radio-button-input-size-width-comfortable) - var(--ids-comp-radio-button-input-size-touchtarget-width-comfortable)) / 2);
4456
+ height: var(--ids-comp-radio-button-input-size-touchtarget-height-comfortable);
4457
+ width: var(--ids-comp-radio-button-input-size-touchtarget-width-comfortable);
4458
+ }
4459
+ .ids-radio-group.ids-radio-group-comfortable > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio] {
4460
+ width: var(--ids-comp-radio-button-input-size-width-comfortable);
4461
+ height: var(--ids-comp-radio-button-input-size-height-comfortable);
4462
+ border-radius: var(--ids-comp-radio-button-input-size-border-radius-comfortable);
4463
+ border-width: var(--ids-comp-radio-button-input-size-border-width-comfortable);
4464
+ }
4465
+ .ids-radio-group.ids-radio-group-comfortable > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:checked + .ids-radio-item__inner-circle {
4466
+ width: var(--ids-comp-radio-button-input-inner-circle-size-width-comfortable);
4467
+ height: var(--ids-comp-radio-button-input-inner-circle-size-height-comfortable);
4468
+ border-radius: var(--ids-comp-radio-button-input-inner-circle-size-border-radius-comfortable);
4469
+ border-width: var(--ids-comp-radio-button-input-inner-circle-size-border-width-comfortable);
4470
+ }
4471
+ .ids-radio-group.ids-radio-group-comfortable > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus {
4472
+ outline-width: var(--ids-comp-radio-focused-outline-outline-comfortable);
4473
+ }
4474
+ .ids-radio-group.ids-radio-group-comfortable > .ids-radio-item .ids-radio-item__label {
4475
+ padding: var(--ids-comp-radio-button-label-size-padding-y-comfortable) 0px;
4476
+ font-family: var(--ids-comp-radio-button-label-typography-font-family-comfortable);
4477
+ font-size: var(--ids-comp-radio-button-label-typography-font-size-comfortable);
4478
+ font-weight: var(--ids-comp-radio-button-label-typography-font-weight-comfortable);
4479
+ line-height: var(--ids-comp-radio-button-label-typography-line-height-comfortable);
4480
+ letter-spacing: var(--ids-comp-radio-button-label-typography-letter-spacing-comfortable);
4481
+ }
4482
+ .ids-radio-group.ids-radio-group-spacious.ids-radio-group-horizontal {
4483
+ padding: var(--ids-comp-radio-group-horizontal-container-size-padding-y-spacious) var(--ids-comp-radio-group-horizontal-container-size-padding-x-spacious);
4484
+ gap: var(--ids-comp-radio-group-horizontal-container-size-gap-spacious);
4485
+ }
4486
+ .ids-radio-group.ids-radio-group-spacious.ids-radio-group-vertical {
4487
+ padding: var(--ids-comp-radio-group-vertical-container-size-padding-y-spacious) var(--ids-comp-radio-group-vertical-container-size-padding-x-spacious);
4488
+ gap: var(--ids-comp-radio-group-vertical-container-size-gap-spacious);
4489
+ }
4490
+ .ids-radio-group.ids-radio-group-spacious > .ids-radio-item {
4491
+ padding: var(--ids-comp-radio-button-container-size-padding-y-spacious) var(--ids-comp-radio-button-container-size-padding-x-spacious);
4492
+ gap: var(--ids-comp-radio-button-container-size-gap-spacious);
4493
+ }
4494
+ .ids-radio-group.ids-radio-group-spacious > .ids-radio-item .ids-radio-item__input-wrapper .ids-radio-item__touch-target {
4495
+ top: calc((var(--ids-comp-radio-button-input-size-height-spacious) - var(--ids-comp-radio-button-input-size-touchtarget-height-spacious)) / 2);
4496
+ left: calc((var(--ids-comp-radio-button-input-size-width-spacious) - var(--ids-comp-radio-button-input-size-touchtarget-width-spacious)) / 2);
4497
+ height: var(--ids-comp-radio-button-input-size-touchtarget-height-spacious);
4498
+ width: var(--ids-comp-radio-button-input-size-touchtarget-width-spacious);
4499
+ }
4500
+ .ids-radio-group.ids-radio-group-spacious > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio] {
4501
+ width: var(--ids-comp-radio-button-input-size-width-spacious);
4502
+ height: var(--ids-comp-radio-button-input-size-height-spacious);
4503
+ border-radius: var(--ids-comp-radio-button-input-size-border-radius-spacious);
4504
+ border-width: var(--ids-comp-radio-button-input-size-border-width-spacious);
4505
+ }
4506
+ .ids-radio-group.ids-radio-group-spacious > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:checked + .ids-radio-item__inner-circle {
4507
+ width: var(--ids-comp-radio-button-input-inner-circle-size-width-spacious);
4508
+ height: var(--ids-comp-radio-button-input-inner-circle-size-height-spacious);
4509
+ border-radius: var(--ids-comp-radio-button-input-inner-circle-size-border-radius-spacious);
4510
+ border-width: var(--ids-comp-radio-button-input-inner-circle-size-border-width-spacious);
4511
+ }
4512
+ .ids-radio-group.ids-radio-group-spacious > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus {
4513
+ outline-width: var(--ids-comp-radio-focused-outline-outline-spacious);
4514
+ }
4515
+ .ids-radio-group.ids-radio-group-spacious > .ids-radio-item .ids-radio-item__label {
4516
+ padding: var(--ids-comp-radio-button-label-size-padding-y-spacious) 0px;
4517
+ font-family: var(--ids-comp-radio-button-label-typography-font-family-spacious);
4518
+ font-size: var(--ids-comp-radio-button-label-typography-font-size-spacious);
4519
+ font-weight: var(--ids-comp-radio-button-label-typography-font-weight-spacious);
4520
+ line-height: var(--ids-comp-radio-button-label-typography-line-height-spacious);
4521
+ letter-spacing: var(--ids-comp-radio-button-label-typography-letter-spacing-spacious);
4522
+ }
4523
+ .ids-radio-group.ids-radio-group-dense.ids-radio-group-horizontal {
4524
+ padding: var(--ids-comp-radio-group-horizontal-container-size-padding-y-dense) var(--ids-comp-radio-group-horizontal-container-size-padding-x-dense);
4525
+ gap: var(--ids-comp-radio-group-horizontal-container-size-gap-dense);
4526
+ }
4527
+ .ids-radio-group.ids-radio-group-dense.ids-radio-group-vertical {
4528
+ padding: var(--ids-comp-radio-group-vertical-container-size-padding-y-dense) var(--ids-comp-radio-group-vertical-container-size-padding-x-dense);
4529
+ gap: var(--ids-comp-radio-group-vertical-container-size-gap-dense);
4530
+ }
4531
+ .ids-radio-group.ids-radio-group-dense > .ids-radio-item {
4532
+ padding: var(--ids-comp-radio-button-container-size-padding-y-dense) var(--ids-comp-radio-button-container-size-padding-x-dense);
4533
+ gap: var(--ids-comp-radio-button-container-size-gap-dense);
4534
+ }
4535
+ .ids-radio-group.ids-radio-group-dense > .ids-radio-item .ids-radio-item__input-wrapper .ids-radio-item__touch-target {
4536
+ top: calc((var(--ids-comp-radio-button-input-size-height-dense) - var(--ids-comp-radio-button-input-size-touchtarget-height-dense)) / 2);
4537
+ left: calc((var(--ids-comp-radio-button-input-size-width-dense) - var(--ids-comp-radio-button-input-size-touchtarget-width-dense)) / 2);
4538
+ height: var(--ids-comp-radio-button-input-size-touchtarget-height-dense);
4539
+ width: var(--ids-comp-radio-button-input-size-touchtarget-width-dense);
4540
+ }
4541
+ .ids-radio-group.ids-radio-group-dense > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio] {
4542
+ width: var(--ids-comp-radio-button-input-size-width-dense);
4543
+ height: var(--ids-comp-radio-button-input-size-height-dense);
4544
+ border-radius: var(--ids-comp-radio-button-input-size-border-radius-dense);
4545
+ border-width: var(--ids-comp-radio-button-input-size-border-width-dense);
4546
+ }
4547
+ .ids-radio-group.ids-radio-group-dense > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:checked + .ids-radio-item__inner-circle {
4548
+ width: var(--ids-comp-radio-button-input-inner-circle-size-width-dense);
4549
+ height: var(--ids-comp-radio-button-input-inner-circle-size-height-dense);
4550
+ border-radius: var(--ids-comp-radio-button-input-inner-circle-size-border-radius-dense);
4551
+ border-width: var(--ids-comp-radio-button-input-inner-circle-size-border-width-dense);
4552
+ }
4553
+ .ids-radio-group.ids-radio-group-dense > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus {
4554
+ outline-width: var(--ids-comp-radio-focused-outline-outline-dense);
4555
+ }
4556
+ .ids-radio-group.ids-radio-group-dense > .ids-radio-item .ids-radio-item__label {
4557
+ padding: var(--ids-comp-radio-button-label-size-padding-y-dense) 0px;
4558
+ font-family: var(--ids-comp-radio-button-label-typography-font-family-dense);
4559
+ font-size: var(--ids-comp-radio-button-label-typography-font-size-dense);
4560
+ font-weight: var(--ids-comp-radio-button-label-typography-font-weight-dense);
4561
+ line-height: var(--ids-comp-radio-button-label-typography-line-height-dense);
4562
+ letter-spacing: var(--ids-comp-radio-button-label-typography-letter-spacing-dense);
4563
+ }
4564
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
4565
+ border-color: var(--ids-comp-radio-input-unselected-color-border-surface-hovered);
4566
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
4567
+ }
4568
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled) {
4569
+ border-color: var(--ids-comp-radio-input-unselected-color-border-surface-default);
4570
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-default);
4571
+ }
4572
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):hover {
4573
+ border-color: var(--ids-comp-radio-input-unselected-color-border-surface-hovered);
4574
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
4575
+ }
4576
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):active {
4577
+ border-color: var(--ids-comp-radio-input-unselected-color-border-surface-pressed);
4578
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-pressed);
4579
+ }
4580
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible {
4581
+ border-color: var(--ids-comp-radio-input-unselected-color-border-surface-focused);
4582
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-focused);
4583
+ outline-color: var(--ids-comp-radio-input-unselected-color-focused-outline-surface-focused);
4584
+ }
4585
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:disabled {
4586
+ border-color: var(--ids-comp-forms-form-field-standard-container-color-border-surface-disabled);
4587
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-disabled);
4588
+ }
4589
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) {
4590
+ border-color: var(--ids-comp-radio-input-selected-color-border-surface-default);
4591
+ background-color: var(--ids-comp-radio-input-selected-color-bg-surface-default);
4592
+ }
4593
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio-item__inner-circle {
4594
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-default);
4595
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-default);
4596
+ }
4597
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover {
4598
+ border-color: var(--ids-comp-radio-input-selected-color-border-surface-hovered);
4599
+ background-color: var(--ids-comp-radio-input-selected-color-bg-surface-hovered);
4600
+ }
4601
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio-item__inner-circle {
4602
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-hovered);
4603
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-hovered);
4604
+ }
4605
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active {
4606
+ border-color: var(--ids-comp-radio-input-selected-color-border-surface-pressed);
4607
+ background-color: var(--ids-comp-radio-input-selected-color-bg-surface-pressed);
4608
+ }
4609
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio-item__inner-circle {
4610
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-pressed);
4611
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-pressed);
4612
+ }
4613
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
4614
+ border-color: var(--ids-comp-radio-input-selected-color-border-surface-focused);
4615
+ background-color: var(--ids-comp-radio-input-selected-color-bg-surface-focused);
4616
+ outline-color: var(--ids-comp-radio-input-selected-color-focused-outline-surface-focused);
4617
+ }
4618
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio-item__inner-circle, .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio-item__inner-circle {
4619
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-focused);
4620
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-focused);
4621
+ }
4622
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:disabled {
4623
+ border-color: var(--ids-comp-forms-form-field-standard-container-color-border-surface-disabled);
4624
+ background-color: var(--ids-comp-radio-input-selected-color-bg-surface-disabled);
4625
+ }
4626
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:disabled + .ids-radio-item__inner-circle {
4627
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-disabled);
4628
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-disabled);
4629
+ }
4630
+ .ids-radio-group .ids-radio-item-surface:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
4631
+ border-color: var(--ids-comp-radio-input-selected-color-border-surface-hovered);
4632
+ background-color: var(--ids-comp-radio-input-selected-color-bg-surface-hovered);
4633
+ }
4634
+ .ids-radio-group .ids-radio-item-surface:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio-item__inner-circle {
4635
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-hovered);
4636
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-hovered);
4637
+ }
4638
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__label {
4639
+ color: var(--ids-comp-radio-label-color-fg-surface-default);
4640
+ }
4641
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__label:hover {
4642
+ color: var(--ids-comp-radio-label-color-fg-surface-hovered);
4643
+ }
4644
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__label:active {
4645
+ color: var(--ids-comp-radio-label-color-fg-surface-pressed);
4646
+ }
4647
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__label:focus {
4648
+ color: var(--ids-comp-radio-label-color-fg-surface-focused);
4649
+ }
4650
+ .ids-radio-group .ids-radio-item-surface.ids-radio-item-disabled .ids-radio-item__label {
4651
+ color: var(--ids-comp-radio-label-color-fg-surface-disabled);
4652
+ }
4653
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
4654
+ border-color: var(--ids-comp-radio-input-unselected-color-border-light-hovered);
4655
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
4656
+ }
4657
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled) {
4658
+ border-color: var(--ids-comp-radio-input-unselected-color-border-light-default);
4659
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-light-default);
4660
+ }
4661
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):hover {
4662
+ border-color: var(--ids-comp-radio-input-unselected-color-border-light-hovered);
4663
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
4664
+ }
4665
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):active {
4666
+ border-color: var(--ids-comp-radio-input-unselected-color-border-light-pressed);
4667
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-light-pressed);
4668
+ }
4669
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible {
4670
+ border-color: var(--ids-comp-radio-input-unselected-color-border-light-focused);
4671
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-light-focused);
4672
+ outline-color: var(--ids-comp-radio-input-unselected-color-focused-outline-light-focused);
4673
+ }
4674
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:disabled {
4675
+ border-color: var(--ids-comp-forms-form-field-standard-container-color-border-light-disabled);
4676
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-light-disabled);
4677
+ }
4678
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) {
4679
+ border-color: var(--ids-comp-radio-input-selected-color-border-light-default);
4680
+ background-color: var(--ids-comp-radio-input-selected-color-bg-light-default);
4681
+ }
4682
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio-item__inner-circle {
4683
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-default);
4684
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-default);
4685
+ }
4686
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover {
4687
+ border-color: var(--ids-comp-radio-input-selected-color-border-light-hovered);
4688
+ background-color: var(--ids-comp-radio-input-selected-color-bg-light-hovered);
4689
+ }
4690
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio-item__inner-circle {
4691
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-hovered);
4692
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-hovered);
4693
+ }
4694
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active {
4695
+ border-color: var(--ids-comp-radio-input-selected-color-border-light-pressed);
4696
+ background-color: var(--ids-comp-radio-input-selected-color-bg-light-pressed);
4697
+ }
4698
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio-item__inner-circle {
4699
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-pressed);
4700
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-pressed);
4701
+ }
4702
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
4703
+ border-color: var(--ids-comp-radio-input-selected-color-border-light-focused);
4704
+ background-color: var(--ids-comp-radio-input-selected-color-bg-light-focused);
4705
+ outline-color: var(--ids-comp-radio-input-selected-color-focused-outline-light-focused);
4706
+ }
4707
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio-item__inner-circle, .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio-item__inner-circle {
4708
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-focused);
4709
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-focused);
4710
+ }
4711
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:disabled {
4712
+ border-color: var(--ids-comp-forms-form-field-standard-container-color-border-light-disabled);
4713
+ background-color: var(--ids-comp-radio-input-selected-color-bg-light-disabled);
4714
+ }
4715
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:disabled + .ids-radio-item__inner-circle {
4716
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-disabled);
4717
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-disabled);
4718
+ }
4719
+ .ids-radio-group .ids-radio-item-light:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
4720
+ border-color: var(--ids-comp-radio-input-selected-color-border-light-hovered);
4721
+ background-color: var(--ids-comp-radio-input-selected-color-bg-light-hovered);
4722
+ }
4723
+ .ids-radio-group .ids-radio-item-light:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio-item__inner-circle {
4724
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-hovered);
4725
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-hovered);
4726
+ }
4727
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__label {
4728
+ color: var(--ids-comp-radio-label-color-fg-light-default);
4729
+ }
4730
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__label:hover {
4731
+ color: var(--ids-comp-radio-label-color-fg-light-hovered);
4732
+ }
4733
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__label:active {
4734
+ color: var(--ids-comp-radio-label-color-fg-light-pressed);
4735
+ }
4736
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__label:focus {
4737
+ color: var(--ids-comp-radio-label-color-fg-light-focused);
4738
+ }
4739
+ .ids-radio-group .ids-radio-item-light.ids-radio-item-disabled .ids-radio-item__label {
4740
+ color: var(--ids-comp-radio-label-color-fg-light-disabled);
4741
+ }
4742
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
4743
+ border-color: var(--ids-comp-radio-input-unselected-color-border-dark-hovered);
4744
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
4745
+ }
4746
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled) {
4747
+ border-color: var(--ids-comp-radio-input-unselected-color-border-dark-default);
4748
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-default);
4749
+ }
4750
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):hover {
4751
+ border-color: var(--ids-comp-radio-input-unselected-color-border-dark-hovered);
4752
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
4753
+ }
4754
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):active {
4755
+ border-color: var(--ids-comp-radio-input-unselected-color-border-dark-pressed);
4756
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-pressed);
4757
+ }
4758
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible {
4759
+ border-color: var(--ids-comp-radio-input-unselected-color-border-dark-focused);
4760
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-focused);
4761
+ outline-color: var(--ids-comp-radio-input-unselected-color-focused-outline-dark-focused);
4762
+ }
4763
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:disabled {
4764
+ border-color: var(--ids-comp-forms-form-field-standard-container-color-border-dark-disabled);
4765
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-disabled);
4766
+ }
4767
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) {
4768
+ border-color: var(--ids-comp-radio-input-selected-color-border-dark-default);
4769
+ background-color: var(--ids-comp-radio-input-selected-color-bg-dark-default);
4770
+ }
4771
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio-item__inner-circle {
4772
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-default);
4773
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-default);
4774
+ }
4775
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover {
4776
+ border-color: var(--ids-comp-radio-input-selected-color-border-dark-hovered);
4777
+ background-color: var(--ids-comp-radio-input-selected-color-bg-dark-hovered);
4778
+ }
4779
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio-item__inner-circle {
4780
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-hovered);
4781
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-hovered);
4782
+ }
4783
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active {
4784
+ border-color: var(--ids-comp-radio-input-selected-color-border-dark-pressed);
4785
+ background-color: var(--ids-comp-radio-input-selected-color-bg-dark-pressed);
4786
+ }
4787
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio-item__inner-circle {
4788
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-pressed);
4789
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-pressed);
4790
+ }
4791
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
4792
+ border-color: var(--ids-comp-radio-input-selected-color-border-dark-focused);
4793
+ background-color: var(--ids-comp-radio-input-selected-color-bg-dark-focused);
4794
+ outline-color: var(--ids-comp-radio-input-selected-color-focused-outline-dark-focused);
4795
+ }
4796
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio-item__inner-circle, .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio-item__inner-circle {
4797
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-focused);
4798
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-focused);
4799
+ }
4800
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:disabled {
4801
+ border-color: var(--ids-comp-forms-form-field-standard-container-color-border-dark-disabled);
4802
+ background-color: var(--ids-comp-radio-input-selected-color-bg-dark-disabled);
4803
+ }
4804
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:disabled + .ids-radio-item__inner-circle {
4805
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-disabled);
4806
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-disabled);
4807
+ }
4808
+ .ids-radio-group .ids-radio-item-dark:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
4809
+ border-color: var(--ids-comp-radio-input-selected-color-border-dark-hovered);
4810
+ background-color: var(--ids-comp-radio-input-selected-color-bg-dark-hovered);
4811
+ }
4812
+ .ids-radio-group .ids-radio-item-dark:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio-item__inner-circle {
4813
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-hovered);
4814
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-hovered);
4815
+ }
4816
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__label {
4817
+ color: var(--ids-comp-radio-label-color-fg-dark-default);
4818
+ }
4819
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__label:hover {
4820
+ color: var(--ids-comp-radio-label-color-fg-dark-hovered);
4821
+ }
4822
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__label:active {
4823
+ color: var(--ids-comp-radio-label-color-fg-dark-pressed);
4824
+ }
4825
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__label:focus {
4826
+ color: var(--ids-comp-radio-label-color-fg-dark-focused);
4827
+ }
4828
+ .ids-radio-group .ids-radio-item-dark.ids-radio-item-disabled .ids-radio-item__label {
4829
+ color: var(--ids-comp-radio-label-color-fg-dark-disabled);
4830
+ }
4831
+ .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
4832
+ border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-hovered);
4833
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
4834
+ }
4835
+ .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled) {
4836
+ border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-default);
4837
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-default);
4838
+ }
4839
+ .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):hover {
4840
+ border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-hovered);
4841
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
4842
+ }
4843
+ .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):active {
4844
+ border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-pressed);
4845
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-pressed);
4846
+ }
4847
+ .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible {
4848
+ border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-focused);
4849
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-focused);
4850
+ }
4851
+ .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) {
4852
+ border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-default);
4853
+ background-color: var(--ids-comp-radio-input-selected-color-bg-surface-default);
4854
+ }
4855
+ .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio-item__inner-circle {
4856
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-default);
4857
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-default);
4858
+ }
4859
+ .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover {
4860
+ border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-hovered);
4861
+ background-color: var(--ids-comp-radio-input-selected-color-bg-surface-hovered);
4862
+ }
4863
+ .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio-item__inner-circle {
4864
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-hovered);
4865
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-hovered);
4866
+ }
4867
+ .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active {
4868
+ border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-pressed);
4869
+ background-color: var(--ids-comp-radio-input-selected-color-bg-surface-pressed);
4870
+ }
4871
+ .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio-item__inner-circle {
4872
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-pressed);
4873
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-pressed);
4874
+ }
4875
+ .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
4876
+ border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-focused);
4877
+ background-color: var(--ids-comp-radio-input-selected-color-bg-surface-focused);
4878
+ }
4879
+ .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio-item__inner-circle, .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio-item__inner-circle {
4880
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-focused);
4881
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-focused);
4882
+ }
4883
+ .ids-radio-group.ng-invalid .ids-radio-item-surface:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
4884
+ border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-hovered);
4885
+ background-color: var(--ids-comp-radio-input-selected-color-bg-surface-hovered);
4886
+ }
4887
+ .ids-radio-group.ng-invalid .ids-radio-item-surface:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio-item__inner-circle {
4888
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-hovered);
4889
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-hovered);
4890
+ }
4891
+ .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
4892
+ border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-hovered);
4893
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
4894
+ }
4895
+ .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled) {
4896
+ border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-default);
4897
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-light-default);
4898
+ }
4899
+ .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):hover {
4900
+ border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-hovered);
4901
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
4902
+ }
4903
+ .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):active {
4904
+ border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-pressed);
4905
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-light-pressed);
4906
+ }
4907
+ .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible {
4908
+ border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-focused);
4909
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-light-focused);
4910
+ }
4911
+ .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) {
4912
+ border-color: var(--ids-comp-radio-input-selected-color-border-light-error-default);
4913
+ background-color: var(--ids-comp-radio-input-selected-color-bg-light-default);
4914
+ }
4915
+ .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio-item__inner-circle {
4916
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-default);
4917
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-default);
4918
+ }
4919
+ .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover {
4920
+ border-color: var(--ids-comp-radio-input-selected-color-border-light-error-hovered);
4921
+ background-color: var(--ids-comp-radio-input-selected-color-bg-light-hovered);
4922
+ }
4923
+ .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio-item__inner-circle {
4924
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-hovered);
4925
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-hovered);
4926
+ }
4927
+ .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active {
4928
+ border-color: var(--ids-comp-radio-input-selected-color-border-light-error-pressed);
4929
+ background-color: var(--ids-comp-radio-input-selected-color-bg-light-pressed);
4930
+ }
4931
+ .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio-item__inner-circle {
4932
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-pressed);
4933
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-pressed);
4934
+ }
4935
+ .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
4936
+ border-color: var(--ids-comp-radio-input-selected-color-border-light-error-focused);
4937
+ background-color: var(--ids-comp-radio-input-selected-color-bg-light-focused);
4938
+ }
4939
+ .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio-item__inner-circle, .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio-item__inner-circle {
4940
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-focused);
4941
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-focused);
4942
+ }
4943
+ .ids-radio-group.ng-invalid .ids-radio-item-light:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
4944
+ border-color: var(--ids-comp-radio-input-selected-color-border-light-error-hovered);
4945
+ background-color: var(--ids-comp-radio-input-selected-color-bg-light-hovered);
4946
+ }
4947
+ .ids-radio-group.ng-invalid .ids-radio-item-light:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio-item__inner-circle {
4948
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-hovered);
4949
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-hovered);
4950
+ }
4951
+ .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
4952
+ border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-hovered);
4953
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
4954
+ }
4955
+ .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled) {
4956
+ border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-default);
4957
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-default);
4958
+ }
4959
+ .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):hover {
4960
+ border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-hovered);
4961
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
4962
+ }
4963
+ .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):active {
4964
+ border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-pressed);
4965
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-pressed);
4966
+ }
4967
+ .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible {
4968
+ border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-focused);
4969
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-focused);
4970
+ }
4971
+ .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) {
4972
+ border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-default);
4973
+ background-color: var(--ids-comp-radio-input-selected-color-bg-dark-default);
4974
+ }
4975
+ .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio-item__inner-circle {
4976
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-default);
4977
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-default);
4978
+ }
4979
+ .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover {
4980
+ border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-hovered);
4981
+ background-color: var(--ids-comp-radio-input-selected-color-bg-dark-hovered);
4982
+ }
4983
+ .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio-item__inner-circle {
4984
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-hovered);
4985
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-hovered);
4986
+ }
4987
+ .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active {
4988
+ border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-pressed);
4989
+ background-color: var(--ids-comp-radio-input-selected-color-bg-dark-pressed);
4990
+ }
4991
+ .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio-item__inner-circle {
4992
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-pressed);
4993
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-pressed);
4994
+ }
4995
+ .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
4996
+ border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-focused);
4997
+ background-color: var(--ids-comp-radio-input-selected-color-bg-dark-focused);
4998
+ }
4999
+ .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio-item__inner-circle, .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio-item__inner-circle {
5000
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-focused);
5001
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-focused);
5002
+ }
5003
+ .ids-radio-group.ng-invalid .ids-radio-item-dark:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
5004
+ border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-hovered);
5005
+ background-color: var(--ids-comp-radio-input-selected-color-bg-dark-hovered);
5006
+ }
5007
+ .ids-radio-group.ng-invalid .ids-radio-item-dark:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio-item__inner-circle {
5008
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-hovered);
5009
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-hovered);
5010
+ }
5011
+
4306
5012
  .ids-segmented-control {
4307
5013
  display: inline-flex;
4308
5014
  flex-direction: row;