@i-cell/ids-styles 0.0.10 → 0.0.11

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.
@@ -3113,14 +3113,1210 @@
3113
3113
  background: var(--ids-comp-divider-color-bg-surface-default);
3114
3114
  }
3115
3115
 
3116
+ .ids-form-field {
3117
+ display: inline-flex;
3118
+ flex-direction: column;
3119
+ align-items: flex-start;
3120
+ }
3121
+ .ids-form-field > .ids-form-field__label {
3122
+ flex: 1 0;
3123
+ overflow: hidden;
3124
+ text-overflow: ellipsis;
3125
+ font-style: normal;
3126
+ }
3127
+ .ids-form-field > .ids-form-field__field-wrapper {
3128
+ display: flex;
3129
+ align-items: center;
3130
+ align-self: stretch;
3131
+ flex-shrink: 0;
3132
+ border-style: solid;
3133
+ box-sizing: border-box;
3134
+ }
3135
+ .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container {
3136
+ display: flex;
3137
+ align-items: center;
3138
+ flex: 1 0 0;
3139
+ }
3140
+ .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon, .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__duffix, .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon {
3141
+ display: flex;
3142
+ align-items: center;
3143
+ }
3144
+ .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3145
+ display: flex;
3146
+ align-items: center;
3147
+ flex: 1 0 0;
3148
+ }
3149
+ .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3150
+ .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3151
+ appearance: none;
3152
+ border: none;
3153
+ background-color: transparent;
3154
+ flex: 1 0 0;
3155
+ padding: 0;
3156
+ }
3157
+ .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input:focus-visible,
3158
+ .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea:focus-visible {
3159
+ outline: none;
3160
+ }
3161
+ .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3162
+ resize: vertical;
3163
+ }
3164
+ .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__action {
3165
+ display: flex;
3166
+ justify-content: center;
3167
+ align-items: center;
3168
+ align-self: stretch;
3169
+ border-left-style: solid;
3170
+ }
3171
+ .ids-form-field > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field > .ids-form-field__field-wrapper:has(textarea:focus) {
3172
+ outline-offset: 2px;
3173
+ outline-style: solid;
3174
+ }
3175
+ .ids-form-field.ids-form-field-compact {
3176
+ gap: var(--ids-comp-forms-form-field-standard-size-gap-compact);
3177
+ }
3178
+ .ids-form-field.ids-form-field-compact > .ids-form-field__label {
3179
+ padding: var(--ids-comp-forms-form-field-standard-label-size-padding-y-compact) 0px;
3180
+ font-family: var(--ids-comp-forms-form-field-standard-label-typography-font-family-compact);
3181
+ font-size: var(--ids-comp-forms-form-field-standard-label-typography-font-size-compact);
3182
+ font-weight: var(--ids-comp-forms-form-field-standard-label-typography-font-weight-compact);
3183
+ letter-spacing: var(--ids-comp-forms-form-field-standard-label-typography-letter-spacing-compact);
3184
+ line-height: var(--ids-comp-forms-form-field-standard-label-typography-line-height-compact);
3185
+ }
3186
+ .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper {
3187
+ padding: var(--ids-comp-forms-form-field-standard-field-wrapper-size-padding-y-compact) var(--ids-comp-forms-form-field-standard-field-wrapper-size-padding-x-compact);
3188
+ gap: var(--ids-comp-forms-form-field-standard-field-wrapper-size-gap-compact);
3189
+ border-radius: var(--ids-comp-forms-form-field-standard-field-wrapper-size-border-radius-compact);
3190
+ border-width: var(--ids-comp-forms-form-field-standard-field-wrapper-size-border-width-compact);
3191
+ }
3192
+ .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container {
3193
+ min-height: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-min-height-compact);
3194
+ padding: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-padding-y-compact) var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-padding-x-compact);
3195
+ gap: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-compact);
3196
+ }
3197
+ .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
3198
+ height: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-size-height-compact);
3199
+ width: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-size-width-compact);
3200
+ }
3201
+ .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3202
+ font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-typography-font-family-compact);
3203
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-typography-font-size-compact);
3204
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-typography-font-weight-compact);
3205
+ letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-typography-letter-spacing-compact);
3206
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-typography-line-height-compact);
3207
+ }
3208
+ .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3209
+ padding: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-size-padding-y-compact) 0;
3210
+ }
3211
+ .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3212
+ .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3213
+ font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-family-compact);
3214
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-size-compact);
3215
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-weight-compact);
3216
+ letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-letter-spacing-compact);
3217
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-line-height-compact);
3218
+ }
3219
+ .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3220
+ .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3221
+ font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-family-compact);
3222
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-size-compact);
3223
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-weight-compact);
3224
+ letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-letter-spacing-compact);
3225
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-line-height-compact);
3226
+ }
3227
+ .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
3228
+ font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-typography-font-family-compact);
3229
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-typography-font-size-compact);
3230
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-typography-font-weight-compact);
3231
+ letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-typography-letter-spacing-compact);
3232
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-typography-line-height-compact);
3233
+ }
3234
+ .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
3235
+ height: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-size-height-compact);
3236
+ width: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-size-width-compact);
3237
+ }
3238
+ .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__action {
3239
+ padding: 0px var(--ids-comp-forms-form-field-standard-field-wrapper-action-size-padding-right-compact) 0px var(--ids-comp-forms-form-field-standard-field-wrapper-action-size-padding-left-compact);
3240
+ border-left-width: var(--ids-comp-forms-form-field-standard-field-wrapper-action-size-border-left-compact);
3241
+ }
3242
+ .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper:has(textarea:focus) {
3243
+ outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact);
3244
+ }
3245
+ .ids-form-field.ids-form-field-comfortable {
3246
+ gap: var(--ids-comp-forms-form-field-standard-size-gap-comfortable);
3247
+ }
3248
+ .ids-form-field.ids-form-field-comfortable > .ids-form-field__label {
3249
+ padding: var(--ids-comp-forms-form-field-standard-label-size-padding-y-comfortable) 0px;
3250
+ font-family: var(--ids-comp-forms-form-field-standard-label-typography-font-family-comfortable);
3251
+ font-size: var(--ids-comp-forms-form-field-standard-label-typography-font-size-comfortable);
3252
+ font-weight: var(--ids-comp-forms-form-field-standard-label-typography-font-weight-comfortable);
3253
+ letter-spacing: var(--ids-comp-forms-form-field-standard-label-typography-letter-spacing-comfortable);
3254
+ line-height: var(--ids-comp-forms-form-field-standard-label-typography-line-height-comfortable);
3255
+ }
3256
+ .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper {
3257
+ padding: var(--ids-comp-forms-form-field-standard-field-wrapper-size-padding-y-comfortable) var(--ids-comp-forms-form-field-standard-field-wrapper-size-padding-x-comfortable);
3258
+ gap: var(--ids-comp-forms-form-field-standard-field-wrapper-size-gap-comfortable);
3259
+ border-radius: var(--ids-comp-forms-form-field-standard-field-wrapper-size-border-radius-comfortable);
3260
+ border-width: var(--ids-comp-forms-form-field-standard-field-wrapper-size-border-width-comfortable);
3261
+ }
3262
+ .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container {
3263
+ min-height: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-min-height-comfortable);
3264
+ padding: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-padding-y-comfortable) var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-padding-x-comfortable);
3265
+ gap: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-comfortable);
3266
+ }
3267
+ .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
3268
+ height: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-size-height-comfortable);
3269
+ width: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-size-width-comfortable);
3270
+ }
3271
+ .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3272
+ font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-typography-font-family-comfortable);
3273
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-typography-font-size-comfortable);
3274
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-typography-font-weight-comfortable);
3275
+ letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-typography-letter-spacing-comfortable);
3276
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-typography-line-height-comfortable);
3277
+ }
3278
+ .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3279
+ padding: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-size-padding-y-comfortable) 0;
3280
+ }
3281
+ .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3282
+ .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3283
+ font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-family-comfortable);
3284
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-size-comfortable);
3285
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-weight-comfortable);
3286
+ letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-letter-spacing-comfortable);
3287
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-line-height-comfortable);
3288
+ }
3289
+ .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3290
+ .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3291
+ font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-family-comfortable);
3292
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-size-comfortable);
3293
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-weight-comfortable);
3294
+ letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-letter-spacing-comfortable);
3295
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-line-height-comfortable);
3296
+ }
3297
+ .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
3298
+ font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-typography-font-family-comfortable);
3299
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-typography-font-size-comfortable);
3300
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-typography-font-weight-comfortable);
3301
+ letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-typography-letter-spacing-comfortable);
3302
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-typography-line-height-comfortable);
3303
+ }
3304
+ .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
3305
+ height: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-size-height-comfortable);
3306
+ width: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-size-width-comfortable);
3307
+ }
3308
+ .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__action {
3309
+ padding: 0px var(--ids-comp-forms-form-field-standard-field-wrapper-action-size-padding-right-comfortable) 0px var(--ids-comp-forms-form-field-standard-field-wrapper-action-size-padding-left-comfortable);
3310
+ border-left-width: var(--ids-comp-forms-form-field-standard-field-wrapper-action-size-border-left-comfortable);
3311
+ }
3312
+ .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper:has(textarea:focus) {
3313
+ outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-comfortable);
3314
+ }
3315
+ .ids-form-field.ids-form-field-spacious {
3316
+ gap: var(--ids-comp-forms-form-field-standard-size-gap-spacious);
3317
+ }
3318
+ .ids-form-field.ids-form-field-spacious > .ids-form-field__label {
3319
+ padding: var(--ids-comp-forms-form-field-standard-label-size-padding-y-spacious) 0px;
3320
+ font-family: var(--ids-comp-forms-form-field-standard-label-typography-font-family-spacious);
3321
+ font-size: var(--ids-comp-forms-form-field-standard-label-typography-font-size-spacious);
3322
+ font-weight: var(--ids-comp-forms-form-field-standard-label-typography-font-weight-spacious);
3323
+ letter-spacing: var(--ids-comp-forms-form-field-standard-label-typography-letter-spacing-spacious);
3324
+ line-height: var(--ids-comp-forms-form-field-standard-label-typography-line-height-spacious);
3325
+ }
3326
+ .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper {
3327
+ padding: var(--ids-comp-forms-form-field-standard-field-wrapper-size-padding-y-spacious) var(--ids-comp-forms-form-field-standard-field-wrapper-size-padding-x-spacious);
3328
+ gap: var(--ids-comp-forms-form-field-standard-field-wrapper-size-gap-spacious);
3329
+ border-radius: var(--ids-comp-forms-form-field-standard-field-wrapper-size-border-radius-spacious);
3330
+ border-width: var(--ids-comp-forms-form-field-standard-field-wrapper-size-border-width-spacious);
3331
+ }
3332
+ .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container {
3333
+ min-height: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-min-height-spacious);
3334
+ padding: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-padding-y-spacious) var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-padding-x-spacious);
3335
+ gap: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-spacious);
3336
+ }
3337
+ .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
3338
+ height: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-size-height-spacious);
3339
+ width: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-size-width-spacious);
3340
+ }
3341
+ .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3342
+ font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-typography-font-family-spacious);
3343
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-typography-font-size-spacious);
3344
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-typography-font-weight-spacious);
3345
+ letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-typography-letter-spacing-spacious);
3346
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-typography-line-height-spacious);
3347
+ }
3348
+ .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3349
+ padding: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-size-padding-y-spacious) 0;
3350
+ }
3351
+ .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3352
+ .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3353
+ font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-family-spacious);
3354
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-size-spacious);
3355
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-weight-spacious);
3356
+ letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-letter-spacing-spacious);
3357
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-line-height-spacious);
3358
+ }
3359
+ .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3360
+ .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3361
+ font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-family-spacious);
3362
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-size-spacious);
3363
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-weight-spacious);
3364
+ letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-letter-spacing-spacious);
3365
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-line-height-spacious);
3366
+ }
3367
+ .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
3368
+ font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-typography-font-family-spacious);
3369
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-typography-font-size-spacious);
3370
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-typography-font-weight-spacious);
3371
+ letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-typography-letter-spacing-spacious);
3372
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-typography-line-height-spacious);
3373
+ }
3374
+ .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
3375
+ height: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-size-height-spacious);
3376
+ width: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-size-width-spacious);
3377
+ }
3378
+ .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__action {
3379
+ padding: 0px var(--ids-comp-forms-form-field-standard-field-wrapper-action-size-padding-right-spacious) 0px var(--ids-comp-forms-form-field-standard-field-wrapper-action-size-padding-left-spacious);
3380
+ border-left-width: var(--ids-comp-forms-form-field-standard-field-wrapper-action-size-border-left-spacious);
3381
+ }
3382
+ .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper:has(textarea:focus) {
3383
+ outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-spacious);
3384
+ }
3385
+ .ids-form-field.ids-form-field-dense {
3386
+ gap: var(--ids-comp-forms-form-field-standard-size-gap-dense);
3387
+ }
3388
+ .ids-form-field.ids-form-field-dense > .ids-form-field__label {
3389
+ padding: var(--ids-comp-forms-form-field-standard-label-size-padding-y-dense) 0px;
3390
+ font-family: var(--ids-comp-forms-form-field-standard-label-typography-font-family-dense);
3391
+ font-size: var(--ids-comp-forms-form-field-standard-label-typography-font-size-dense);
3392
+ font-weight: var(--ids-comp-forms-form-field-standard-label-typography-font-weight-dense);
3393
+ letter-spacing: var(--ids-comp-forms-form-field-standard-label-typography-letter-spacing-dense);
3394
+ line-height: var(--ids-comp-forms-form-field-standard-label-typography-line-height-dense);
3395
+ }
3396
+ .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper {
3397
+ padding: var(--ids-comp-forms-form-field-standard-field-wrapper-size-padding-y-dense) var(--ids-comp-forms-form-field-standard-field-wrapper-size-padding-x-dense);
3398
+ gap: var(--ids-comp-forms-form-field-standard-field-wrapper-size-gap-dense);
3399
+ border-radius: var(--ids-comp-forms-form-field-standard-field-wrapper-size-border-radius-dense);
3400
+ border-width: var(--ids-comp-forms-form-field-standard-field-wrapper-size-border-width-dense);
3401
+ }
3402
+ .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container {
3403
+ min-height: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-min-height-dense);
3404
+ padding: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-padding-y-dense) var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-padding-x-dense);
3405
+ gap: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-dense);
3406
+ }
3407
+ .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
3408
+ height: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-size-height-dense);
3409
+ width: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-size-width-dense);
3410
+ }
3411
+ .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3412
+ font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-typography-font-family-dense);
3413
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-typography-font-size-dense);
3414
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-typography-font-weight-dense);
3415
+ letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-typography-letter-spacing-dense);
3416
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-typography-line-height-dense);
3417
+ }
3418
+ .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3419
+ padding: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-size-padding-y-dense) 0;
3420
+ }
3421
+ .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3422
+ .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3423
+ font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-family-dense);
3424
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-size-dense);
3425
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-weight-dense);
3426
+ letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-letter-spacing-dense);
3427
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-line-height-dense);
3428
+ }
3429
+ .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3430
+ .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3431
+ font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-family-dense);
3432
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-size-dense);
3433
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-weight-dense);
3434
+ letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-letter-spacing-dense);
3435
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-line-height-dense);
3436
+ }
3437
+ .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
3438
+ font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-typography-font-family-dense);
3439
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-typography-font-size-dense);
3440
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-typography-font-weight-dense);
3441
+ letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-typography-letter-spacing-dense);
3442
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-typography-line-height-dense);
3443
+ }
3444
+ .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
3445
+ height: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-size-height-dense);
3446
+ width: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-size-width-dense);
3447
+ }
3448
+ .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__action {
3449
+ padding: 0px var(--ids-comp-forms-form-field-standard-field-wrapper-action-size-padding-right-dense) 0px var(--ids-comp-forms-form-field-standard-field-wrapper-action-size-padding-left-dense);
3450
+ border-left-width: var(--ids-comp-forms-form-field-standard-field-wrapper-action-size-border-left-dense);
3451
+ }
3452
+ .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper:has(textarea:focus) {
3453
+ outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-dense);
3454
+ }
3455
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper {
3456
+ border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-default);
3457
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-default);
3458
+ }
3459
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
3460
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-default);
3461
+ }
3462
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3463
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-default);
3464
+ }
3465
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3466
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3467
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-default);
3468
+ }
3469
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3470
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3471
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-default);
3472
+ }
3473
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
3474
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-default);
3475
+ }
3476
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
3477
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-default);
3478
+ }
3479
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__action {
3480
+ border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-default);
3481
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default);
3482
+ }
3483
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) {
3484
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
3485
+ }
3486
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover {
3487
+ border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-hovered);
3488
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-hovered);
3489
+ }
3490
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
3491
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-hovered);
3492
+ }
3493
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3494
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-hovered);
3495
+ }
3496
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3497
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3498
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-hovered);
3499
+ }
3500
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3501
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3502
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-hovered);
3503
+ }
3504
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
3505
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-hovered);
3506
+ }
3507
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
3508
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-hovered);
3509
+ }
3510
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__action {
3511
+ border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-default);
3512
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default);
3513
+ }
3514
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover:has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover:has(textarea:focus) {
3515
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
3516
+ }
3517
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) {
3518
+ border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-focused);
3519
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-focused);
3520
+ }
3521
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
3522
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-focused);
3523
+ }
3524
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3525
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-focused);
3526
+ }
3527
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3528
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3529
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3530
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-focused);
3531
+ }
3532
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3533
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3534
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3535
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-focused);
3536
+ }
3537
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
3538
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-focused);
3539
+ }
3540
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
3541
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-focused);
3542
+ }
3543
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__action, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__action {
3544
+ border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-default);
3545
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default);
3546
+ }
3547
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus):has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus):has(textarea:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus):has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus):has(textarea:focus) {
3548
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
3549
+ }
3550
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) {
3551
+ border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-pressed);
3552
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-pressed);
3553
+ }
3554
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
3555
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-pressed);
3556
+ }
3557
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3558
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-pressed);
3559
+ }
3560
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3561
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3562
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3563
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-pressed);
3564
+ }
3565
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3566
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3567
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3568
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-pressed);
3569
+ }
3570
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
3571
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-pressed);
3572
+ }
3573
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
3574
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-pressed);
3575
+ }
3576
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__action, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__action {
3577
+ border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-default);
3578
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default);
3579
+ }
3580
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active):has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active):has(textarea:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active):has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active):has(textarea:focus) {
3581
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
3582
+ }
3583
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__label {
3584
+ color: var(--ids-comp-forms-form-field-standard-label-color-fg-surface-default);
3585
+ }
3586
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper {
3587
+ border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-error-default);
3588
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-error-default);
3589
+ }
3590
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
3591
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-default);
3592
+ }
3593
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3594
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-default);
3595
+ }
3596
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3597
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3598
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-default);
3599
+ }
3600
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3601
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3602
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-default);
3603
+ }
3604
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
3605
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-default);
3606
+ }
3607
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
3608
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-default);
3609
+ }
3610
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__action {
3611
+ border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-error-default);
3612
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default);
3613
+ }
3614
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) {
3615
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
3616
+ }
3617
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover {
3618
+ border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-error-hovered);
3619
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-error-hovered);
3620
+ }
3621
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
3622
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-hovered);
3623
+ }
3624
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3625
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-hovered);
3626
+ }
3627
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3628
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3629
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-hovered);
3630
+ }
3631
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3632
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3633
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-hovered);
3634
+ }
3635
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
3636
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-hovered);
3637
+ }
3638
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
3639
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-hovered);
3640
+ }
3641
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__action {
3642
+ border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-error-default);
3643
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default);
3644
+ }
3645
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover:has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover:has(textarea:focus) {
3646
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
3647
+ }
3648
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) {
3649
+ border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-error-focused);
3650
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-error-focused);
3651
+ }
3652
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
3653
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-focused);
3654
+ }
3655
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3656
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-focused);
3657
+ }
3658
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3659
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3660
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3661
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-focused);
3662
+ }
3663
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3664
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3665
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3666
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-focused);
3667
+ }
3668
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
3669
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-focused);
3670
+ }
3671
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
3672
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-focused);
3673
+ }
3674
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__action, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__action {
3675
+ border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-error-default);
3676
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default);
3677
+ }
3678
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus):has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus):has(textarea:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus):has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus):has(textarea:focus) {
3679
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
3680
+ }
3681
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) {
3682
+ border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-error-pressed);
3683
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-error-pressed);
3684
+ }
3685
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
3686
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-pressed);
3687
+ }
3688
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3689
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-pressed);
3690
+ }
3691
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3692
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3693
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3694
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-pressed);
3695
+ }
3696
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3697
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3698
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3699
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-pressed);
3700
+ }
3701
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
3702
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-pressed);
3703
+ }
3704
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
3705
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-pressed);
3706
+ }
3707
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__action, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__action {
3708
+ border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-error-default);
3709
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default);
3710
+ }
3711
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active):has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active):has(textarea:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active):has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active):has(textarea:focus) {
3712
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
3713
+ }
3714
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__label {
3715
+ color: var(--ids-comp-forms-form-field-standard-label-color-fg-surface-error-default);
3716
+ }
3717
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper {
3718
+ border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-success-default);
3719
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-success-default);
3720
+ }
3721
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
3722
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-default);
3723
+ }
3724
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3725
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-default);
3726
+ }
3727
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3728
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3729
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-default);
3730
+ }
3731
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3732
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3733
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-default);
3734
+ }
3735
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
3736
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-default);
3737
+ }
3738
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
3739
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-default);
3740
+ }
3741
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__action {
3742
+ border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-success-default);
3743
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default);
3744
+ }
3745
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) {
3746
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
3747
+ }
3748
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover {
3749
+ border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-success-hovered);
3750
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-success-hovered);
3751
+ }
3752
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
3753
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-hovered);
3754
+ }
3755
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3756
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-hovered);
3757
+ }
3758
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3759
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3760
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-hovered);
3761
+ }
3762
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3763
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3764
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-hovered);
3765
+ }
3766
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
3767
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-hovered);
3768
+ }
3769
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
3770
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-hovered);
3771
+ }
3772
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__action {
3773
+ border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-success-default);
3774
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default);
3775
+ }
3776
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover:has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover:has(textarea:focus) {
3777
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
3778
+ }
3779
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) {
3780
+ border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-success-focused);
3781
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-success-focused);
3782
+ }
3783
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
3784
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-focused);
3785
+ }
3786
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3787
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-focused);
3788
+ }
3789
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3790
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3791
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3792
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-focused);
3793
+ }
3794
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3795
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3796
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3797
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-focused);
3798
+ }
3799
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
3800
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-focused);
3801
+ }
3802
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
3803
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-focused);
3804
+ }
3805
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__action, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__action {
3806
+ border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-success-default);
3807
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default);
3808
+ }
3809
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus):has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus):has(textarea:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus):has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus):has(textarea:focus) {
3810
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
3811
+ }
3812
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) {
3813
+ border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-success-pressed);
3814
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-success-pressed);
3815
+ }
3816
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
3817
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-pressed);
3818
+ }
3819
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3820
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-pressed);
3821
+ }
3822
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3823
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3824
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3825
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-pressed);
3826
+ }
3827
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3828
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3829
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3830
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-pressed);
3831
+ }
3832
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
3833
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-pressed);
3834
+ }
3835
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
3836
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-pressed);
3837
+ }
3838
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__action, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__action {
3839
+ border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-success-default);
3840
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default);
3841
+ }
3842
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active):has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active):has(textarea:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active):has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active):has(textarea:focus) {
3843
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
3844
+ }
3845
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__label {
3846
+ color: var(--ids-comp-forms-form-field-standard-label-color-fg-surface-success-default);
3847
+ }
3848
+ .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper {
3849
+ border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-disabled);
3850
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-disabled);
3851
+ }
3852
+ .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
3853
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-disabled);
3854
+ }
3855
+ .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3856
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-disabled);
3857
+ }
3858
+ .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3859
+ .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3860
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-disabled);
3861
+ }
3862
+ .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3863
+ .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3864
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-disabled);
3865
+ }
3866
+ .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
3867
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-disabled);
3868
+ }
3869
+ .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
3870
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-disabled);
3871
+ }
3872
+ .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__action {
3873
+ border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-default);
3874
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default);
3875
+ }
3876
+ .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper:has(textarea:focus) {
3877
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
3878
+ }
3879
+ .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__label {
3880
+ color: var(--ids-comp-forms-form-field-standard-label-color-fg-surface-disabled);
3881
+ }
3882
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper {
3883
+ border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-default);
3884
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-default);
3885
+ }
3886
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
3887
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-default);
3888
+ }
3889
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3890
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-default);
3891
+ }
3892
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3893
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3894
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-default);
3895
+ }
3896
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3897
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3898
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-default);
3899
+ }
3900
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
3901
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-default);
3902
+ }
3903
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
3904
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-default);
3905
+ }
3906
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__action {
3907
+ border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-default);
3908
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default);
3909
+ }
3910
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) {
3911
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
3912
+ }
3913
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover {
3914
+ border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-hovered);
3915
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-hovered);
3916
+ }
3917
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
3918
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-hovered);
3919
+ }
3920
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3921
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-hovered);
3922
+ }
3923
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3924
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3925
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-hovered);
3926
+ }
3927
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3928
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3929
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-hovered);
3930
+ }
3931
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
3932
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-hovered);
3933
+ }
3934
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
3935
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-hovered);
3936
+ }
3937
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__action {
3938
+ border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-default);
3939
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default);
3940
+ }
3941
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover:has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover:has(textarea:focus) {
3942
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
3943
+ }
3944
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) {
3945
+ border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-focused);
3946
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-focused);
3947
+ }
3948
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
3949
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-focused);
3950
+ }
3951
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3952
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-focused);
3953
+ }
3954
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3955
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3956
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3957
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-focused);
3958
+ }
3959
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3960
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3961
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3962
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-focused);
3963
+ }
3964
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
3965
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-focused);
3966
+ }
3967
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
3968
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-focused);
3969
+ }
3970
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__action, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__action {
3971
+ border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-default);
3972
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default);
3973
+ }
3974
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus):has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus):has(textarea:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus):has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus):has(textarea:focus) {
3975
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
3976
+ }
3977
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) {
3978
+ border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-pressed);
3979
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-pressed);
3980
+ }
3981
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
3982
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-pressed);
3983
+ }
3984
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3985
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-pressed);
3986
+ }
3987
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3988
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3989
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3990
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-pressed);
3991
+ }
3992
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3993
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3994
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3995
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-pressed);
3996
+ }
3997
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
3998
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-pressed);
3999
+ }
4000
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
4001
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-pressed);
4002
+ }
4003
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__action, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__action {
4004
+ border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-default);
4005
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default);
4006
+ }
4007
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active):has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active):has(textarea:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active):has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active):has(textarea:focus) {
4008
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
4009
+ }
4010
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__label {
4011
+ color: var(--ids-comp-forms-form-field-standard-label-color-fg-light-default);
4012
+ }
4013
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper {
4014
+ border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-error-default);
4015
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-error-default);
4016
+ }
4017
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
4018
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-default);
4019
+ }
4020
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4021
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-default);
4022
+ }
4023
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
4024
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
4025
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-default);
4026
+ }
4027
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
4028
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
4029
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-default);
4030
+ }
4031
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
4032
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-default);
4033
+ }
4034
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
4035
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-default);
4036
+ }
4037
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__action {
4038
+ border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-error-default);
4039
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default);
4040
+ }
4041
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) {
4042
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
4043
+ }
4044
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover {
4045
+ border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-error-hovered);
4046
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-error-hovered);
4047
+ }
4048
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
4049
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-hovered);
4050
+ }
4051
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4052
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-hovered);
4053
+ }
4054
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
4055
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
4056
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-hovered);
4057
+ }
4058
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
4059
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
4060
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-hovered);
4061
+ }
4062
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
4063
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-hovered);
4064
+ }
4065
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
4066
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-hovered);
4067
+ }
4068
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__action {
4069
+ border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-error-default);
4070
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default);
4071
+ }
4072
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover:has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover:has(textarea:focus) {
4073
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
4074
+ }
4075
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) {
4076
+ border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-error-focused);
4077
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-error-focused);
4078
+ }
4079
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
4080
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-focused);
4081
+ }
4082
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4083
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-focused);
4084
+ }
4085
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
4086
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
4087
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
4088
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-focused);
4089
+ }
4090
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
4091
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
4092
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
4093
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-focused);
4094
+ }
4095
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
4096
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-focused);
4097
+ }
4098
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
4099
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-focused);
4100
+ }
4101
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__action, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__action {
4102
+ border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-error-default);
4103
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default);
4104
+ }
4105
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus):has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus):has(textarea:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus):has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus):has(textarea:focus) {
4106
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
4107
+ }
4108
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) {
4109
+ border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-error-pressed);
4110
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-error-pressed);
4111
+ }
4112
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
4113
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-pressed);
4114
+ }
4115
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4116
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-pressed);
4117
+ }
4118
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
4119
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
4120
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
4121
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-pressed);
4122
+ }
4123
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
4124
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
4125
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
4126
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-pressed);
4127
+ }
4128
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
4129
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-pressed);
4130
+ }
4131
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
4132
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-pressed);
4133
+ }
4134
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__action, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__action {
4135
+ border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-error-default);
4136
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default);
4137
+ }
4138
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active):has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active):has(textarea:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active):has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active):has(textarea:focus) {
4139
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
4140
+ }
4141
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__label {
4142
+ color: var(--ids-comp-forms-form-field-standard-label-color-fg-light-error-default);
4143
+ }
4144
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper {
4145
+ border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-success-default);
4146
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-success-default);
4147
+ }
4148
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
4149
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-default);
4150
+ }
4151
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4152
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-default);
4153
+ }
4154
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
4155
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
4156
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-default);
4157
+ }
4158
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
4159
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
4160
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-default);
4161
+ }
4162
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
4163
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-default);
4164
+ }
4165
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
4166
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-default);
4167
+ }
4168
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__action {
4169
+ border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-success-default);
4170
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default);
4171
+ }
4172
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) {
4173
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
4174
+ }
4175
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover {
4176
+ border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-success-hovered);
4177
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-success-hovered);
4178
+ }
4179
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
4180
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-hovered);
4181
+ }
4182
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4183
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-hovered);
4184
+ }
4185
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
4186
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
4187
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-hovered);
4188
+ }
4189
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
4190
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
4191
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-hovered);
4192
+ }
4193
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
4194
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-hovered);
4195
+ }
4196
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
4197
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-hovered);
4198
+ }
4199
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__action {
4200
+ border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-success-default);
4201
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default);
4202
+ }
4203
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover:has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover:has(textarea:focus) {
4204
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
4205
+ }
4206
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) {
4207
+ border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-success-focused);
4208
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-success-focused);
4209
+ }
4210
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
4211
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-focused);
4212
+ }
4213
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4214
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-focused);
4215
+ }
4216
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
4217
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
4218
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
4219
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-focused);
4220
+ }
4221
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
4222
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
4223
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
4224
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-focused);
4225
+ }
4226
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
4227
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-focused);
4228
+ }
4229
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
4230
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-focused);
4231
+ }
4232
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__action, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__action {
4233
+ border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-success-default);
4234
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default);
4235
+ }
4236
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus):has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus):has(textarea:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus):has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus):has(textarea:focus) {
4237
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
4238
+ }
4239
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) {
4240
+ border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-success-pressed);
4241
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-success-pressed);
4242
+ }
4243
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
4244
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-pressed);
4245
+ }
4246
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4247
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-pressed);
4248
+ }
4249
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
4250
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
4251
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
4252
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-pressed);
4253
+ }
4254
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
4255
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
4256
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
4257
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-pressed);
4258
+ }
4259
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
4260
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-pressed);
4261
+ }
4262
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
4263
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-pressed);
4264
+ }
4265
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__action, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__action {
4266
+ border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-success-default);
4267
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default);
4268
+ }
4269
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active):has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active):has(textarea:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active):has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active):has(textarea:focus) {
4270
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
4271
+ }
4272
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__label {
4273
+ color: var(--ids-comp-forms-form-field-standard-label-color-fg-light-success-default);
4274
+ }
4275
+ .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper {
4276
+ border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-disabled);
4277
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-disabled);
4278
+ }
4279
+ .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
4280
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-disabled);
4281
+ }
4282
+ .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4283
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-disabled);
4284
+ }
4285
+ .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
4286
+ .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
4287
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-disabled);
4288
+ }
4289
+ .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
4290
+ .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
4291
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-disabled);
4292
+ }
4293
+ .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
4294
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-disabled);
4295
+ }
4296
+ .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
4297
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-disabled);
4298
+ }
4299
+ .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__action {
4300
+ border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-default);
4301
+ background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default);
4302
+ }
4303
+ .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper:has(textarea:focus) {
4304
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
4305
+ }
4306
+ .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__label {
4307
+ color: var(--ids-comp-forms-form-field-standard-label-color-fg-light-disabled);
4308
+ }
4309
+
3116
4310
  .ids-message {
3117
4311
  display: flex;
3118
4312
  justify-content: flex-start;
3119
4313
  align-items: center;
3120
4314
  font-style: normal;
3121
4315
  }
3122
- .ids-message .ids-message__prefix {
4316
+ .ids-message .ids-message__prefix,
4317
+ .ids-message .ids-message__suffix {
3123
4318
  display: flex;
4319
+ align-items: center;
3124
4320
  }
3125
4321
  .ids-message .ids-message__text {
3126
4322
  flex-grow: 1;
@@ -3960,6 +5156,9 @@
3960
5156
  .ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-container {
3961
5157
  display: flex;
3962
5158
  align-items: center;
5159
+ list-style: none;
5160
+ padding: 0;
5161
+ margin: 0;
3963
5162
  }
3964
5163
  .ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-container .ids-paginator__page-button-truncation {
3965
5164
  display: flex;