@carbon/ibm-products 1.3.0 → 1.4.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (107) hide show
  1. package/css/index-full-carbon.css +1766 -1701
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +2 -2
  4. package/css/index-without-carbon-released-only.css +32 -41
  5. package/css/index-without-carbon-released-only.css.map +1 -1
  6. package/css/index-without-carbon-released-only.min.css +2 -2
  7. package/css/index-without-carbon.css +228 -163
  8. package/css/index-without-carbon.css.map +1 -1
  9. package/css/index-without-carbon.min.css +2 -2
  10. package/css/index.css +1767 -1702
  11. package/css/index.css.map +1 -1
  12. package/css/index.min.css +2 -2
  13. package/es/components/APIKeyModal/APIKeyModal.js +25 -29
  14. package/es/components/ActionBar/ActionBar.js +4 -1
  15. package/es/components/AddSelect/AddSelect.js +65 -19
  16. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +19 -15
  17. package/es/components/CancelableTextEdit/CancelableTextEdit.js +60 -22
  18. package/es/components/CreateFullPage/CreateFullPage.js +78 -259
  19. package/es/components/CreateFullPage/CreateFullPageStep.js +58 -14
  20. package/es/components/CreateFullPage/index.js +1 -2
  21. package/es/components/CreateInfluencer/CreateInfluencer.js +23 -225
  22. package/es/components/CreateTearsheet/CreateTearsheet.js +69 -146
  23. package/es/components/CreateTearsheet/CreateTearsheetStep.js +59 -16
  24. package/es/components/CreateTearsheet/index.js +0 -1
  25. package/es/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +66 -27
  26. package/es/components/ExportModal/ExportModal.js +4 -2
  27. package/es/components/ImportModal/ImportModal.js +2 -1
  28. package/es/components/InlineEdit/InlineEdit.js +224 -0
  29. package/es/components/InlineEdit/index.js +7 -0
  30. package/es/components/MultiAddSelect/MultiAddSelect.js +16 -0
  31. package/es/components/MultiAddSelect/index.js +1 -0
  32. package/es/components/OptionsTile/OptionsTile.js +36 -15
  33. package/es/components/PageHeader/PageHeader.js +54 -33
  34. package/es/components/PageHeader/PageHeaderTitle.js +78 -7
  35. package/es/components/PageHeader/PageHeaderUtils.js +21 -2
  36. package/es/components/RemoveModal/RemoveModal.js +4 -2
  37. package/es/components/SingleAddSelect/SingleAddSelect.js +15 -0
  38. package/es/components/SingleAddSelect/index.js +1 -0
  39. package/es/components/TagSet/TagSet.js +4 -1
  40. package/es/components/Toolbar/Toolbar.js +69 -8
  41. package/es/components/index.js +4 -2
  42. package/es/global/js/hooks/useCreateComponentFocus.js +15 -19
  43. package/es/global/js/hooks/useCreateComponentStepChange.js +44 -74
  44. package/es/global/js/hooks/useValidCreateStepCount.js +4 -7
  45. package/es/global/js/package-settings.js +4 -2
  46. package/lib/components/APIKeyModal/APIKeyModal.js +25 -29
  47. package/lib/components/ActionBar/ActionBar.js +4 -1
  48. package/lib/components/AddSelect/AddSelect.js +64 -19
  49. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +18 -14
  50. package/lib/components/CancelableTextEdit/CancelableTextEdit.js +61 -22
  51. package/lib/components/CreateFullPage/CreateFullPage.js +78 -259
  52. package/lib/components/CreateFullPage/CreateFullPageStep.js +61 -14
  53. package/lib/components/CreateFullPage/index.js +1 -9
  54. package/lib/components/CreateInfluencer/CreateInfluencer.js +21 -236
  55. package/lib/components/CreateTearsheet/CreateTearsheet.js +71 -148
  56. package/lib/components/CreateTearsheet/CreateTearsheetStep.js +61 -15
  57. package/lib/components/CreateTearsheet/index.js +0 -8
  58. package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +67 -35
  59. package/lib/components/ExportModal/ExportModal.js +4 -2
  60. package/lib/components/ImportModal/ImportModal.js +2 -1
  61. package/lib/components/InlineEdit/InlineEdit.js +242 -0
  62. package/lib/components/InlineEdit/index.js +13 -0
  63. package/lib/components/MultiAddSelect/MultiAddSelect.js +37 -0
  64. package/lib/components/MultiAddSelect/index.js +13 -0
  65. package/lib/components/OptionsTile/OptionsTile.js +36 -15
  66. package/lib/components/PageHeader/PageHeader.js +54 -33
  67. package/lib/components/PageHeader/PageHeaderTitle.js +87 -9
  68. package/lib/components/PageHeader/PageHeaderUtils.js +21 -2
  69. package/lib/components/RemoveModal/RemoveModal.js +4 -2
  70. package/lib/components/SingleAddSelect/SingleAddSelect.js +36 -0
  71. package/lib/components/SingleAddSelect/index.js +13 -0
  72. package/lib/components/TagSet/TagSet.js +4 -1
  73. package/lib/components/Toolbar/Toolbar.js +69 -6
  74. package/lib/components/index.js +25 -9
  75. package/lib/global/js/hooks/useCreateComponentFocus.js +15 -19
  76. package/lib/global/js/hooks/useCreateComponentStepChange.js +44 -74
  77. package/lib/global/js/hooks/useValidCreateStepCount.js +4 -7
  78. package/lib/global/js/package-settings.js +4 -2
  79. package/package.json +8 -8
  80. package/scss/components/AddSelect/_add-select.scss +14 -3
  81. package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss +19 -15
  82. package/scss/components/CancelableTextEdit/_cancelable-text-edit.scss +141 -70
  83. package/scss/components/CreateFullPage/_create-full-page.scss +4 -11
  84. package/scss/components/CreateTearsheet/_create-tearsheet.scss +4 -8
  85. package/scss/components/InlineEdit/_index.scss +8 -0
  86. package/scss/components/InlineEdit/_inline-edit.scss +44 -0
  87. package/scss/components/InlineEdit/_storybook-styles.scss +15 -0
  88. package/scss/components/MultiAddSelect/_index.scss +1 -0
  89. package/scss/components/MultiAddSelect/_multi-add-select.scss +1 -0
  90. package/scss/components/MultiAddSelect/_storybook-styles.scss +6 -0
  91. package/scss/components/PageHeader/_page-header.scss +14 -4
  92. package/scss/components/SingleAddSelect/_index.scss +1 -0
  93. package/scss/components/SingleAddSelect/_single-add-select.scss +1 -0
  94. package/scss/components/SingleAddSelect/_storybook-styles.scss +6 -0
  95. package/scss/components/_index.scss +3 -1
  96. package/es/components/CreateFullPage/CreateFullPageSection.js +0 -53
  97. package/es/components/CreateFullPage/constants.js +0 -8
  98. package/es/components/CreateTearsheet/CreateTearsheetSection.js +0 -83
  99. package/es/components/CreateTearsheet/constants.js +0 -8
  100. package/es/components/CreateTearsheet/preview-components/MultiStepWithSectionsTearsheet.js +0 -327
  101. package/es/global/js/utils/hasValidType.js +0 -94
  102. package/lib/components/CreateFullPage/CreateFullPageSection.js +0 -74
  103. package/lib/components/CreateFullPage/constants.js +0 -16
  104. package/lib/components/CreateTearsheet/CreateTearsheetSection.js +0 -105
  105. package/lib/components/CreateTearsheet/constants.js +0 -17
  106. package/lib/components/CreateTearsheet/preview-components/MultiStepWithSectionsTearsheet.js +0 -354
  107. package/lib/global/js/utils/hasValidType.js +0 -110
@@ -3043,296 +3043,6 @@ em {
3043
3043
  font-size: 0;
3044
3044
  }
3045
3045
 
3046
- /* stylelint-disable-line no-invalid-position-at-import-rule */
3047
- /* stylelint-disable-line no-invalid-position-at-import-rule */
3048
- /* stylelint-disable-line no-invalid-position-at-import-rule */
3049
- /* stylelint-disable-line no-invalid-position-at-import-rule */
3050
- /* stylelint-disable-line no-invalid-position-at-import-rule */
3051
- /* stylelint-disable-line no-invalid-position-at-import-rule */
3052
- /* stylelint-disable-line no-invalid-position-at-import-rule */
3053
- /* stylelint-disable-line no-invalid-position-at-import-rule */
3054
- /* stylelint-disable-line no-invalid-position-at-import-rule */
3055
- /* stylelint-disable-line no-invalid-position-at-import-rule */
3056
- /* stylelint-disable-line no-invalid-position-at-import-rule */
3057
- /* stylelint-disable-line no-invalid-position-at-import-rule */
3058
- /* stylelint-disable-line no-invalid-position-at-import-rule */
3059
- /* stylelint-disable-line no-invalid-position-at-import-rule */
3060
- /* stylelint-disable-line no-invalid-position-at-import-rule */
3061
- /* stylelint-disable-line no-invalid-position-at-import-rule */
3062
- /* stylelint-disable-line no-invalid-position-at-import-rule */
3063
- .bx--structured-list--selection .bx--structured-list-td,
3064
- .bx--structured-list--selection .bx--structured-list-th {
3065
- padding-right: 1rem;
3066
- padding-left: 1rem;
3067
- }
3068
- .bx--structured-list--selection .bx--structured-list-td:first-child,
3069
- .bx--structured-list--selection .bx--structured-list-th:first-child {
3070
- padding-right: 1rem;
3071
- padding-left: 1rem;
3072
- }
3073
-
3074
- .bx--structured-list-input {
3075
- display: none;
3076
- }
3077
-
3078
- .bx--structured-list {
3079
- box-sizing: border-box;
3080
- padding: 0;
3081
- border: 0;
3082
- margin: 0;
3083
- font-family: inherit;
3084
- font-size: 100%;
3085
- vertical-align: baseline;
3086
- display: table;
3087
- width: 100%;
3088
- margin-bottom: 5rem;
3089
- background-color: transparent;
3090
- border-collapse: collapse;
3091
- border-spacing: 0;
3092
- overflow-x: auto;
3093
- overflow-y: hidden;
3094
- }
3095
- .bx--structured-list *,
3096
- .bx--structured-list *::before,
3097
- .bx--structured-list *::after {
3098
- box-sizing: inherit;
3099
- }
3100
- .bx--structured-list.bx--structured-list--condensed .bx--structured-list-td, .bx--structured-list.bx--structured-list--condensed .bx--structured-list-th {
3101
- padding: 0.5rem;
3102
- }
3103
- .bx--structured-list .bx--structured-list-row .bx--structured-list-td:first-of-type,
3104
- .bx--structured-list .bx--structured-list-row .bx--structured-list-th:first-of-type {
3105
- padding-left: 1rem;
3106
- }
3107
- .bx--structured-list.bx--structured-list--flush .bx--structured-list-row .bx--structured-list-td, .bx--structured-list.bx--structured-list--flush .bx--structured-list-row .bx--structured-list-th, .bx--structured-list.bx--structured-list--flush .bx--structured-list-row .bx--structured-list-td:first-of-type, .bx--structured-list.bx--structured-list--flush .bx--structured-list-row .bx--structured-list-th:first-of-type {
3108
- padding-right: 1rem;
3109
- padding-left: 0;
3110
- }
3111
-
3112
- .bx--structured-list-row {
3113
- display: table-row;
3114
- border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
3115
- transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
3116
- }
3117
-
3118
- .bx--structured-list--selection .bx--structured-list-row:hover:not(.bx--structured-list-row--header-row):not(.bx--structured-list-row--selected) {
3119
- border-bottom: 1px solid var(--cds-hover-row, #e5e5e5);
3120
- background-color: var(--cds-hover-row, #e5e5e5);
3121
- cursor: pointer;
3122
- }
3123
-
3124
- .bx--structured-list-row.bx--structured-list-row--selected {
3125
- background-color: var(--cds-selected-ui, #e0e0e0);
3126
- }
3127
-
3128
- .bx--structured-list-row.bx--structured-list-row--header-row {
3129
- border-bottom: 1px solid var(--cds-selected-ui, #e0e0e0);
3130
- cursor: inherit;
3131
- }
3132
-
3133
- .bx--structured-list-row:focus:not(.bx--structured-list-row--header-row) {
3134
- outline: 2px solid var(--cds-focus, #0f62fe);
3135
- outline-offset: -2px;
3136
- }
3137
- @media screen and (prefers-contrast) {
3138
- .bx--structured-list-row:focus:not(.bx--structured-list-row--header-row) {
3139
- outline-style: dotted;
3140
- }
3141
- }
3142
-
3143
- .bx--structured-list--selection .bx--structured-list-row:hover:not(.bx--structured-list-row--header-row) > .bx--structured-list-td,
3144
- .bx--structured-list-row.bx--structured-list-row--selected > .bx--structured-list-td {
3145
- color: var(--cds-text-01, #161616);
3146
- }
3147
-
3148
- .bx--structured-list--selection .bx--structured-list-row:hover:not(.bx--structured-list-row--header-row) > .bx--structured-list-td {
3149
- border-top: 1px solid var(--cds-ui-01, #f4f4f4);
3150
- }
3151
-
3152
- .bx--structured-list-thead {
3153
- display: table-header-group;
3154
- vertical-align: middle;
3155
- }
3156
-
3157
- .bx--structured-list-th {
3158
- box-sizing: border-box;
3159
- padding: 0;
3160
- border: 0;
3161
- margin: 0;
3162
- font-family: inherit;
3163
- font-size: 100%;
3164
- vertical-align: baseline;
3165
- padding: 1rem 0.5rem 0.5rem 0.5rem;
3166
- font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
3167
- font-weight: var(--cds-productive-heading-01-font-weight, 600);
3168
- line-height: var(--cds-productive-heading-01-line-height, 1.28572);
3169
- letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
3170
- display: table-cell;
3171
- height: 2.5rem;
3172
- color: var(--cds-text-01, #161616);
3173
- font-weight: 600;
3174
- text-align: left;
3175
- text-transform: none;
3176
- vertical-align: top;
3177
- }
3178
- .bx--structured-list-th *,
3179
- .bx--structured-list-th *::before,
3180
- .bx--structured-list-th *::after {
3181
- box-sizing: inherit;
3182
- }
3183
-
3184
- .bx--structured-list-tbody {
3185
- display: table-row-group;
3186
- vertical-align: middle;
3187
- }
3188
-
3189
- .bx--structured-list-td {
3190
- box-sizing: border-box;
3191
- padding: 0;
3192
- border: 0;
3193
- margin: 0;
3194
- font-family: inherit;
3195
- font-size: 100%;
3196
- vertical-align: baseline;
3197
- font-size: var(--cds-body-long-01-font-size, 0.875rem);
3198
- font-weight: var(--cds-body-long-01-font-weight, 400);
3199
- line-height: var(--cds-body-long-01-line-height, 1.42857);
3200
- letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
3201
- padding: 1rem 0.5rem 1.5rem 0.5rem;
3202
- position: relative;
3203
- display: table-cell;
3204
- max-width: 36rem;
3205
- color: var(--cds-text-02, #525252);
3206
- transition: color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
3207
- }
3208
- .bx--structured-list-td *,
3209
- .bx--structured-list-td *::before,
3210
- .bx--structured-list-td *::after {
3211
- box-sizing: inherit;
3212
- }
3213
-
3214
- .bx--structured-list-content--nowrap {
3215
- white-space: nowrap;
3216
- }
3217
-
3218
- .bx--structured-list-svg {
3219
- display: inline-block;
3220
- fill: transparent;
3221
- transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
3222
- vertical-align: middle;
3223
- }
3224
-
3225
- .bx--structured-list-input:checked + .bx--structured-list-row .bx--structured-list-svg,
3226
- .bx--structured-list-input:checked + .bx--structured-list-td .bx--structured-list-svg {
3227
- fill: var(--cds-icon-01, #161616);
3228
- }
3229
-
3230
- .bx--structured-list.bx--skeleton .bx--structured-list-th:first-child {
3231
- width: 8%;
3232
- }
3233
- .bx--structured-list.bx--skeleton .bx--structured-list-th:nth-child(3n+2) {
3234
- width: 30%;
3235
- }
3236
- .bx--structured-list.bx--skeleton .bx--structured-list-th:nth-child(3n+3) {
3237
- width: 15%;
3238
- }
3239
- .bx--structured-list.bx--skeleton span {
3240
- position: relative;
3241
- padding: 0;
3242
- border: none;
3243
- background: var(--cds-skeleton-01, #e5e5e5);
3244
- box-shadow: none;
3245
- pointer-events: none;
3246
- display: block;
3247
- width: 75%;
3248
- height: 1rem;
3249
- }
3250
- .bx--structured-list.bx--skeleton span:hover, .bx--structured-list.bx--skeleton span:focus, .bx--structured-list.bx--skeleton span:active {
3251
- border: none;
3252
- cursor: default;
3253
- outline: none;
3254
- }
3255
- .bx--structured-list.bx--skeleton span::before {
3256
- position: absolute;
3257
- top: 0;
3258
- left: 0;
3259
- width: 100%;
3260
- height: 100%;
3261
- animation: 3000ms ease-in-out skeleton infinite;
3262
- background: var(--cds-skeleton-02, #c6c6c6);
3263
- content: "";
3264
- will-change: transform-origin, transform, opacity;
3265
- }
3266
- @media (prefers-reduced-motion: reduce) {
3267
- .bx--structured-list.bx--skeleton span::before {
3268
- animation: none;
3269
- }
3270
- }
3271
-
3272
- .bx--structured-list.bx--structured-list--selection.bx--skeleton .bx--structured-list-th:first-child {
3273
- width: 5%;
3274
- }
3275
- .bx--structured-list.bx--structured-list--selection.bx--skeleton .bx--structured-list-th:first-child span {
3276
- display: none;
3277
- }
3278
-
3279
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
3280
- .bx--structured-list-input:checked + .bx--structured-list-td .bx--structured-list-svg {
3281
- fill: ButtonText;
3282
- }
3283
- }
3284
-
3285
- .c4p--add-select__header {
3286
- padding: var(--cds-spacing-05, 1rem);
3287
- padding-bottom: 0;
3288
- border-top: 1px solid var(--cds-ui-03, #e0e0e0);
3289
- }
3290
- .c4p--add-select__header .c4p--add-select__items-label {
3291
- font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
3292
- font-weight: var(--cds-productive-heading-01-font-weight, 600);
3293
- line-height: var(--cds-productive-heading-01-line-height, 1.28572);
3294
- letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
3295
- }
3296
-
3297
- .c4p--add-select__items-label {
3298
- margin-right: var(--cds-spacing-03, 0.5rem);
3299
- }
3300
- .c4p--add-select__items-label-container {
3301
- display: flex;
3302
- align-items: center;
3303
- margin-top: var(--cds-spacing-05, 1rem);
3304
- margin-bottom: var(--cds-spacing-03, 0.5rem);
3305
- }
3306
-
3307
- .c4p--add-select__selections {
3308
- border-top: 1px solid var(--cds-ui-03, #e0e0e0);
3309
- }
3310
-
3311
- .c4p--add-select__influencer-header {
3312
- display: flex;
3313
- padding: var(--cds-spacing-06, 1.5rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-03, 0.5rem) var(--cds-spacing-05, 1rem);
3314
- border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
3315
- }
3316
- .c4p--add-select__influencer-header .c4p--add-select__influencer-title {
3317
- font-size: var(--cds-productive-heading-02-font-size, 1rem);
3318
- font-weight: var(--cds-productive-heading-02-font-weight, 600);
3319
- line-height: var(--cds-productive-heading-02-line-height, 1.375);
3320
- letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
3321
- }
3322
-
3323
- .c4p--add-select__influencer-title {
3324
- margin-right: var(--cds-spacing-03, 0.5rem);
3325
- }
3326
-
3327
- .c4p--add-select__influencer-body {
3328
- padding: var(--cds-spacing-05, 1rem);
3329
- }
3330
-
3331
- .c4p--add-select .c4p--tearsheet .c4p--tearsheet__influencer {
3332
- max-width: 29rem;
3333
- flex: 0 0 50%;
3334
- }
3335
-
3336
3046
  /* stylelint-disable-line no-invalid-position-at-import-rule */
3337
3047
  /* stylelint-disable-line no-invalid-position-at-import-rule */
3338
3048
  /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -12045,20 +11755,14 @@ a.bx--overflow-menu-options__btn::before {
12045
11755
  margin-left: 0;
12046
11756
  }
12047
11757
 
12048
- .c4p--create-full-page .c4p--create-full-page__step--hidden-step,
12049
- .c4p--create-full-page .c4p--create-full-page__step--hidden-section {
11758
+ .c4p--create-full-page .c4p--create-full-page__step__step--hidden-step {
12050
11759
  display: none;
12051
11760
  }
12052
11761
 
12053
- .c4p--create-full-page .c4p--create-full-page__step--visible-section {
11762
+ .c4p--create-full-page .c4p--create-full-page__step__step--visible-step {
12054
11763
  display: block;
12055
11764
  }
12056
11765
 
12057
- .c4p--create-full-page .c4p--create-full-page__step--visible-step {
12058
- opacity: 1;
12059
- }
12060
-
12061
- .c4p--create-full-page .c4p--create-full-page__section-subtitle,
12062
11766
  .c4p--create-full-page .c4p--create-full-page__step-subtitle {
12063
11767
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
12064
11768
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
@@ -12068,7 +11772,6 @@ a.bx--overflow-menu-options__btn::before {
12068
11772
  margin-bottom: var(--cds-spacing-03, 0.5rem);
12069
11773
  }
12070
11774
 
12071
- .c4p--create-full-page .c4p--create-full-page__section-description,
12072
11775
  .c4p--create-full-page .c4p--create-full-page__step-description {
12073
11776
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
12074
11777
  font-weight: var(--cds-body-long-01-font-weight, 400);
@@ -12156,8 +11859,7 @@ a.bx--overflow-menu-options__btn::before {
12156
11859
  content: "";
12157
11860
  }
12158
11861
 
12159
- .c4p--create-full-page .c4p--create-full-page__step-title,
12160
- .c4p--create-full-page .c4p--create-full-page__section-title {
11862
+ .c4p--create-full-page .c4p--create-full-page__step-title {
12161
11863
  font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
12162
11864
  font-weight: var(--cds-productive-heading-04-font-weight, 400);
12163
11865
  line-height: var(--cds-productive-heading-04-line-height, 1.28572);
@@ -14462,16 +14164,11 @@ a.bx--side-nav__link--current::before {
14462
14164
  --c4p--tearsheet-create--total-width: 0;
14463
14165
  }
14464
14166
 
14465
- .c4p--tearsheet-create .c4p--tearsheet-create__step--hidden-step,
14466
- .c4p--tearsheet-create .c4p--tearsheet-create__step--hidden-section {
14167
+ .c4p--tearsheet-create .c4p--tearsheet-create__step__step--hidden-step {
14467
14168
  display: none;
14468
14169
  }
14469
14170
 
14470
- .c4p--tearsheet-create .c4p--tearsheet-create__step--visible-section {
14471
- display: block;
14472
- }
14473
-
14474
- .c4p--tearsheet-create .c4p--tearsheet-create__step--visible-step {
14171
+ .c4p--tearsheet-create .c4p--tearsheet-create__step__step--visible-step {
14475
14172
  animation: 400ms stepContentEntrance;
14476
14173
  animation-fill-mode: forwards;
14477
14174
  animation-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
@@ -14479,7 +14176,7 @@ a.bx--side-nav__link--current::before {
14479
14176
  }
14480
14177
 
14481
14178
  @media (prefers-reduced-motion) {
14482
- .c4p--tearsheet-create .c4p--tearsheet-create__step--visible-step {
14179
+ .c4p--tearsheet-create .c4p--tearsheet-create__step__step--visible-step {
14483
14180
  animation: none;
14484
14181
  opacity: 1;
14485
14182
  }
@@ -14683,91 +14380,403 @@ a.bx--side-nav__link--current::before {
14683
14380
  /* stylelint-disable-line no-invalid-position-at-import-rule */
14684
14381
  /* stylelint-disable-line no-invalid-position-at-import-rule */
14685
14382
  /* stylelint-disable-line no-invalid-position-at-import-rule */
14686
- @keyframes rotate {
14687
- 0% {
14688
- transform: rotate(0deg);
14689
- }
14690
- 100% {
14691
- transform: rotate(360deg);
14692
- }
14693
- }
14694
- @keyframes rotate-end-p1 {
14695
- 100% {
14696
- transform: rotate(360deg);
14697
- }
14698
- }
14699
- @keyframes rotate-end-p2 {
14700
- 100% {
14701
- transform: rotate(-360deg);
14702
- }
14703
- }
14704
- /* Stroke animations */
14705
- @keyframes init-stroke {
14706
- 0% {
14707
- stroke-dashoffset: 276.4608;
14708
- }
14709
- 100% {
14710
- stroke-dashoffset: 52.527552;
14711
- }
14712
- }
14713
- @keyframes stroke-end {
14714
- 0% {
14715
- stroke-dashoffset: 52.527552;
14716
- }
14717
- 100% {
14718
- stroke-dashoffset: 276.4608;
14719
- }
14720
- }
14721
- @keyframes stroke {
14722
- 100% {
14723
- stroke-dashoffset: 0;
14724
- }
14725
- }
14726
- .c4p--create-tearsheet-narrow .bx--modal-header__heading,
14727
- .c4p--create-tearsheet-narrow .bx--modal-header__label,
14728
- .c4p--create-tearsheet-narrow .c4p--tearsheet__header-description {
14729
- max-width: 100%;
14730
- padding-right: calc(20% - var(--cds-spacing-05, 1rem));
14731
- }
14732
-
14733
- .c4p--create-tearsheet-narrow .c4p--tearsheet__header-description {
14734
- margin-top: var(--cds-spacing-02, 0.25rem);
14735
- }
14736
-
14737
- .c4p--create-tearsheet-narrow .c4p--tearsheet__header {
14738
- border-bottom: 1px solid var(--cds-decorative-01, #e0e0e0);
14739
- }
14740
-
14741
- .c4p--create-tearsheet-narrow .c4p--tearsheet__content {
14742
- padding: var(--cds-spacing-05, 1rem);
14743
- }
14744
-
14745
- .c4p--create-tearsheet-narrow .c4p--create-tearsheet-narrow__form {
14746
- padding-top: var(--cds-spacing-05, 1rem);
14747
- }
14748
-
14749
- .c4p--create-tearsheet-narrow .c4p--create-tearsheet-narrow__form > * {
14750
- margin-bottom: var(--cds-spacing-05, 1rem);
14751
- }
14752
- .c4p--create-tearsheet-narrow .c4p--create-tearsheet-narrow__form > *:last-child {
14753
- margin-bottom: 0;
14754
- }
14755
-
14756
- .c4p--create-tearsheet-narrow .c4p--create-tearsheet-narrow__form-title-text {
14757
- font-size: var(--cds-productive-heading-02-font-size, 1rem);
14758
- font-weight: var(--cds-productive-heading-02-font-weight, 600);
14759
- line-height: var(--cds-productive-heading-02-line-height, 1.375);
14760
- letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
14761
- padding-bottom: var(--cds-spacing-03, 0.5rem);
14762
- }
14763
-
14764
- .c4p--create-tearsheet-narrow .c4p--create-tearsheet-narrow__form-description-text {
14765
- font-size: var(--cds-body-long-01-font-size, 0.875rem);
14766
- font-weight: var(--cds-body-long-01-font-weight, 400);
14767
- line-height: var(--cds-body-long-01-line-height, 1.42857);
14768
- letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
14769
- }
14770
-
14383
+ @keyframes rotate {
14384
+ 0% {
14385
+ transform: rotate(0deg);
14386
+ }
14387
+ 100% {
14388
+ transform: rotate(360deg);
14389
+ }
14390
+ }
14391
+ @keyframes rotate-end-p1 {
14392
+ 100% {
14393
+ transform: rotate(360deg);
14394
+ }
14395
+ }
14396
+ @keyframes rotate-end-p2 {
14397
+ 100% {
14398
+ transform: rotate(-360deg);
14399
+ }
14400
+ }
14401
+ /* Stroke animations */
14402
+ @keyframes init-stroke {
14403
+ 0% {
14404
+ stroke-dashoffset: 276.4608;
14405
+ }
14406
+ 100% {
14407
+ stroke-dashoffset: 52.527552;
14408
+ }
14409
+ }
14410
+ @keyframes stroke-end {
14411
+ 0% {
14412
+ stroke-dashoffset: 52.527552;
14413
+ }
14414
+ 100% {
14415
+ stroke-dashoffset: 276.4608;
14416
+ }
14417
+ }
14418
+ @keyframes stroke {
14419
+ 100% {
14420
+ stroke-dashoffset: 0;
14421
+ }
14422
+ }
14423
+ .c4p--create-tearsheet-narrow .bx--modal-header__heading,
14424
+ .c4p--create-tearsheet-narrow .bx--modal-header__label,
14425
+ .c4p--create-tearsheet-narrow .c4p--tearsheet__header-description {
14426
+ max-width: 100%;
14427
+ padding-right: calc(20% - var(--cds-spacing-05, 1rem));
14428
+ }
14429
+
14430
+ .c4p--create-tearsheet-narrow .c4p--tearsheet__header-description {
14431
+ margin-top: var(--cds-spacing-02, 0.25rem);
14432
+ }
14433
+
14434
+ .c4p--create-tearsheet-narrow .c4p--tearsheet__header {
14435
+ border-bottom: 1px solid var(--cds-decorative-01, #e0e0e0);
14436
+ }
14437
+
14438
+ .c4p--create-tearsheet-narrow .c4p--tearsheet__content {
14439
+ padding: var(--cds-spacing-05, 1rem);
14440
+ }
14441
+
14442
+ .c4p--create-tearsheet-narrow .c4p--create-tearsheet-narrow__form {
14443
+ padding-top: var(--cds-spacing-05, 1rem);
14444
+ }
14445
+
14446
+ .c4p--create-tearsheet-narrow .c4p--create-tearsheet-narrow__form > * {
14447
+ margin-bottom: var(--cds-spacing-05, 1rem);
14448
+ }
14449
+ .c4p--create-tearsheet-narrow .c4p--create-tearsheet-narrow__form > *:last-child {
14450
+ margin-bottom: 0;
14451
+ }
14452
+
14453
+ .c4p--create-tearsheet-narrow .c4p--create-tearsheet-narrow__form-title-text {
14454
+ font-size: var(--cds-productive-heading-02-font-size, 1rem);
14455
+ font-weight: var(--cds-productive-heading-02-font-weight, 600);
14456
+ line-height: var(--cds-productive-heading-02-line-height, 1.375);
14457
+ letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
14458
+ padding-bottom: var(--cds-spacing-03, 0.5rem);
14459
+ }
14460
+
14461
+ .c4p--create-tearsheet-narrow .c4p--create-tearsheet-narrow__form-description-text {
14462
+ font-size: var(--cds-body-long-01-font-size, 0.875rem);
14463
+ font-weight: var(--cds-body-long-01-font-weight, 400);
14464
+ line-height: var(--cds-body-long-01-line-height, 1.42857);
14465
+ letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
14466
+ }
14467
+
14468
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14469
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14470
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14471
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14472
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14473
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14474
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14475
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14476
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14477
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14478
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14479
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14480
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14481
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14482
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14483
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14484
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14485
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14486
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14487
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14488
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14489
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14490
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14491
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14492
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14493
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14494
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14495
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14496
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14497
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14498
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14499
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14500
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14501
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14502
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14503
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14504
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14505
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14506
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14507
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14508
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14509
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14510
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14511
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14512
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14513
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14514
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14515
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14516
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14517
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14518
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14519
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14520
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14521
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14522
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14523
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14524
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14525
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14526
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14527
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14528
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14529
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14530
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14531
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14532
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14533
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14534
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14535
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14536
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14537
+ .bx--link {
14538
+ box-sizing: border-box;
14539
+ padding: 0;
14540
+ border: 0;
14541
+ margin: 0;
14542
+ font-family: inherit;
14543
+ font-size: 100%;
14544
+ vertical-align: baseline;
14545
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
14546
+ font-weight: var(--cds-body-short-01-font-weight, 400);
14547
+ line-height: var(--cds-body-short-01-line-height, 1.28572);
14548
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
14549
+ display: inline-flex;
14550
+ color: var(--cds-link-01, #0f62fe);
14551
+ outline: none;
14552
+ text-decoration: none;
14553
+ transition: color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
14554
+ }
14555
+ .bx--link *,
14556
+ .bx--link *::before,
14557
+ .bx--link *::after {
14558
+ box-sizing: inherit;
14559
+ }
14560
+ .bx--link:hover {
14561
+ color: var(--cds-hover-primary-text, #0043ce);
14562
+ text-decoration: underline;
14563
+ }
14564
+ .bx--link:active, .bx--link:active:visited, .bx--link:active:visited:hover {
14565
+ color: var(--cds-text-01, #161616);
14566
+ text-decoration: underline;
14567
+ }
14568
+ .bx--link:focus {
14569
+ outline: 1px solid var(--cds-focus, #0f62fe);
14570
+ }
14571
+ @media screen and (prefers-contrast) {
14572
+ .bx--link:focus {
14573
+ outline-style: dotted;
14574
+ }
14575
+ }
14576
+ .bx--link:visited {
14577
+ color: var(--cds-link-01, #0f62fe);
14578
+ }
14579
+ .bx--link:visited:hover {
14580
+ color: var(--cds-hover-primary-text, #0043ce);
14581
+ }
14582
+
14583
+ .bx--link--disabled,
14584
+ .bx--link--disabled:hover {
14585
+ box-sizing: border-box;
14586
+ padding: 0;
14587
+ border: 0;
14588
+ margin: 0;
14589
+ font-family: inherit;
14590
+ font-size: 100%;
14591
+ vertical-align: baseline;
14592
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
14593
+ font-weight: var(--cds-body-short-01-font-weight, 400);
14594
+ line-height: var(--cds-body-short-01-line-height, 1.28572);
14595
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
14596
+ color: var(--cds-disabled-02, #c6c6c6);
14597
+ cursor: not-allowed;
14598
+ font-weight: 400;
14599
+ text-decoration: none;
14600
+ }
14601
+ .bx--link--disabled *,
14602
+ .bx--link--disabled *::before,
14603
+ .bx--link--disabled *::after,
14604
+ .bx--link--disabled:hover *,
14605
+ .bx--link--disabled:hover *::before,
14606
+ .bx--link--disabled:hover *::after {
14607
+ box-sizing: inherit;
14608
+ }
14609
+
14610
+ .bx--link.bx--link--visited:visited {
14611
+ color: var(--cds-visited-link, #8a3ffc);
14612
+ }
14613
+
14614
+ .bx--link.bx--link--visited:visited:hover {
14615
+ color: var(--cds-hover-primary-text, #0043ce);
14616
+ }
14617
+
14618
+ .bx--link.bx--link--inline {
14619
+ text-decoration: underline;
14620
+ }
14621
+ .bx--link.bx--link--inline:focus, .bx--link.bx--link--inline:visited {
14622
+ text-decoration: none;
14623
+ }
14624
+
14625
+ .bx--link--disabled.bx--link--inline {
14626
+ text-decoration: underline;
14627
+ }
14628
+
14629
+ .bx--link--sm {
14630
+ font-size: var(--cds-helper-text-01-font-size, 0.75rem);
14631
+ line-height: var(--cds-helper-text-01-line-height, 1.33333);
14632
+ letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
14633
+ }
14634
+
14635
+ .bx--link--lg {
14636
+ font-size: var(--cds-body-short-02-font-size, 1rem);
14637
+ font-weight: var(--cds-body-short-02-font-weight, 400);
14638
+ line-height: var(--cds-body-short-02-line-height, 1.375);
14639
+ letter-spacing: var(--cds-body-short-02-letter-spacing, 0);
14640
+ }
14641
+
14642
+ .bx--link__icon {
14643
+ display: inline-flex;
14644
+ align-self: center;
14645
+ margin-left: var(--cds-spacing-03, 0.5rem);
14646
+ }
14647
+
14648
+ .c4p--empty-state {
14649
+ color: var(--cds-text-01, #161616);
14650
+ }
14651
+ .c4p--empty-state .c4p--empty-state__header,
14652
+ .c4p--empty-state .c4p--empty-state__subtitle {
14653
+ padding-bottom: var(--cds-spacing-02, 0.25rem);
14654
+ margin: 0;
14655
+ }
14656
+ .c4p--empty-state .c4p--empty-state__header--small {
14657
+ font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
14658
+ font-weight: var(--cds-productive-heading-03-font-weight, 400);
14659
+ line-height: var(--cds-productive-heading-03-line-height, 1.4);
14660
+ letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
14661
+ }
14662
+ .c4p--empty-state .c4p--empty-state__subtitle--small {
14663
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
14664
+ font-weight: var(--cds-body-short-01-font-weight, 400);
14665
+ line-height: var(--cds-body-short-01-line-height, 1.28572);
14666
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
14667
+ }
14668
+
14669
+ .c4p--empty-state__illustration.c4p--empty-state__illustration--lg {
14670
+ min-width: var(--cds-spacing-11, 5rem);
14671
+ max-width: var(--cds-spacing-11, 5rem);
14672
+ }
14673
+ .c4p--empty-state__illustration.c4p--empty-state__illustration--sm {
14674
+ min-width: var(--cds-spacing-10, 4rem);
14675
+ max-width: var(--cds-spacing-10, 4rem);
14676
+ }
14677
+
14678
+ .c4p--empty-state__action-button,
14679
+ .c4p--empty-state__link {
14680
+ margin-top: var(--cds-spacing-06, 1.5rem);
14681
+ }
14682
+
14683
+ .c4p--empty-state .c4p--empty-state__action-button {
14684
+ display: block;
14685
+ }
14686
+
14687
+ .c4p--empty-state .c4p--empty-state__link {
14688
+ display: block;
14689
+ }
14690
+
14691
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14692
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14693
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14694
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14695
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14696
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14697
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14698
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14699
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14700
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14701
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14702
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14703
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14704
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14705
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14706
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14707
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14708
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14709
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14710
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14711
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14712
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14713
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14714
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14715
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14716
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14717
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14718
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14719
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14720
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14721
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14722
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14723
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14724
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14725
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14726
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14727
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14728
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14729
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14730
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14731
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14732
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14733
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14734
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14735
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14736
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14737
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14738
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14739
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14740
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14741
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14742
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14743
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14744
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14745
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14746
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14747
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14748
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14749
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14750
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14751
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14752
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14753
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14754
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14755
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14756
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14757
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14758
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14759
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14760
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14761
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14762
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14763
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14764
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14765
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14766
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14767
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14768
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14769
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14770
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14771
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14772
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14773
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14774
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14775
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14776
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14777
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14778
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14779
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14771
14780
  /* stylelint-disable-line no-invalid-position-at-import-rule */
14772
14781
  /* stylelint-disable-line no-invalid-position-at-import-rule */
14773
14782
  /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -14837,7 +14846,30 @@ a.bx--side-nav__link--current::before {
14837
14846
  /* stylelint-disable-line no-invalid-position-at-import-rule */
14838
14847
  /* stylelint-disable-line no-invalid-position-at-import-rule */
14839
14848
  /* stylelint-disable-line no-invalid-position-at-import-rule */
14840
- .bx--link {
14849
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14850
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14851
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14852
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14853
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14854
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14855
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14856
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14857
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14858
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14859
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14860
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14861
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14862
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14863
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14864
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14865
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14866
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14867
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14868
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14869
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14870
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14871
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
14872
+ .bx--radio-button-group {
14841
14873
  box-sizing: border-box;
14842
14874
  padding: 0;
14843
14875
  border: 0;
@@ -14845,46 +14877,61 @@ a.bx--side-nav__link--current::before {
14845
14877
  font-family: inherit;
14846
14878
  font-size: 100%;
14847
14879
  vertical-align: baseline;
14848
- font-size: var(--cds-body-short-01-font-size, 0.875rem);
14849
- font-weight: var(--cds-body-short-01-font-weight, 400);
14850
- line-height: var(--cds-body-short-01-line-height, 1.28572);
14851
- letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
14852
- display: inline-flex;
14853
- color: var(--cds-link-01, #0f62fe);
14854
- outline: none;
14855
- text-decoration: none;
14856
- transition: color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
14880
+ position: relative;
14881
+ display: flex;
14882
+ align-items: center;
14857
14883
  }
14858
- .bx--link *,
14859
- .bx--link *::before,
14860
- .bx--link *::after {
14884
+ .bx--radio-button-group *,
14885
+ .bx--radio-button-group *::before,
14886
+ .bx--radio-button-group *::after {
14861
14887
  box-sizing: inherit;
14862
14888
  }
14863
- .bx--link:hover {
14864
- color: var(--cds-hover-primary-text, #0043ce);
14865
- text-decoration: underline;
14889
+
14890
+ .bx--label + .bx--form-item .bx--radio-button-group {
14891
+ margin-top: 0;
14866
14892
  }
14867
- .bx--link:active, .bx--link:active:visited, .bx--link:active:visited:hover {
14868
- color: var(--cds-text-01, #161616);
14869
- text-decoration: underline;
14893
+
14894
+ .bx--radio-button-group--vertical {
14895
+ flex-direction: column;
14896
+ align-items: flex-start;
14870
14897
  }
14871
- .bx--link:focus {
14872
- outline: 1px solid var(--cds-focus, #0f62fe);
14898
+ .bx--radio-button-group--vertical.bx--radio-button-group--label-left {
14899
+ align-items: flex-end;
14873
14900
  }
14874
- @media screen and (prefers-contrast) {
14875
- .bx--link:focus {
14876
- outline-style: dotted;
14877
- }
14901
+ .bx--radio-button-group--vertical .bx--radio-button__label {
14902
+ margin-right: 0;
14903
+ line-height: 1.25rem;
14878
14904
  }
14879
- .bx--link:visited {
14880
- color: var(--cds-link-01, #0f62fe);
14905
+ .bx--radio-button-group--vertical .bx--radio-button__label:not(:last-of-type) {
14906
+ margin-bottom: 0.5rem;
14881
14907
  }
14882
- .bx--link:visited:hover {
14883
- color: var(--cds-hover-primary-text, #0043ce);
14908
+
14909
+ .bx--radio-button {
14910
+ position: absolute;
14911
+ overflow: hidden;
14912
+ width: 1px;
14913
+ height: 1px;
14914
+ padding: 0;
14915
+ border: 0;
14916
+ margin: -1px;
14917
+ clip: rect(0, 0, 0, 0);
14918
+ visibility: inherit;
14919
+ white-space: nowrap;
14920
+ visibility: inherit;
14884
14921
  }
14885
14922
 
14886
- .bx--link--disabled,
14887
- .bx--link--disabled:hover {
14923
+ .bx--radio-button__label {
14924
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
14925
+ font-weight: var(--cds-body-short-01-font-weight, 400);
14926
+ line-height: var(--cds-body-short-01-line-height, 1.28572);
14927
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
14928
+ display: flex;
14929
+ align-items: center;
14930
+ margin-right: 1rem;
14931
+ cursor: pointer;
14932
+ }
14933
+
14934
+ .bx--radio-button__appearance {
14888
14935
  box-sizing: border-box;
14889
14936
  padding: 0;
14890
14937
  border: 0;
@@ -14892,103 +14939,132 @@ a.bx--side-nav__link--current::before {
14892
14939
  font-family: inherit;
14893
14940
  font-size: 100%;
14894
14941
  vertical-align: baseline;
14895
- font-size: var(--cds-body-short-01-font-size, 0.875rem);
14896
- font-weight: var(--cds-body-short-01-font-weight, 400);
14897
- line-height: var(--cds-body-short-01-line-height, 1.28572);
14898
- letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
14899
- color: var(--cds-disabled-02, #c6c6c6);
14900
- cursor: not-allowed;
14901
- font-weight: 400;
14902
- text-decoration: none;
14942
+ width: 1.125rem;
14943
+ height: 1.125rem;
14944
+ flex-shrink: 0;
14945
+ border: 1px solid var(--cds-icon-01, #161616);
14946
+ margin: 0.0625rem 0.5rem 0.125rem 0.125rem;
14947
+ background-color: transparent;
14948
+ border-radius: 50%;
14903
14949
  }
14904
- .bx--link--disabled *,
14905
- .bx--link--disabled *::before,
14906
- .bx--link--disabled *::after,
14907
- .bx--link--disabled:hover *,
14908
- .bx--link--disabled:hover *::before,
14909
- .bx--link--disabled:hover *::after {
14950
+ .bx--radio-button__appearance *,
14951
+ .bx--radio-button__appearance *::before,
14952
+ .bx--radio-button__appearance *::after {
14910
14953
  box-sizing: inherit;
14911
14954
  }
14912
14955
 
14913
- .bx--link.bx--link--visited:visited {
14914
- color: var(--cds-visited-link, #8a3ffc);
14956
+ .bx--radio-button:checked + .bx--radio-button__label .bx--radio-button__appearance {
14957
+ display: flex;
14958
+ align-items: center;
14959
+ justify-content: center;
14960
+ border-color: var(--cds-icon-01, #161616);
14915
14961
  }
14916
-
14917
- .bx--link.bx--link--visited:visited:hover {
14918
- color: var(--cds-hover-primary-text, #0043ce);
14962
+ .bx--radio-button:checked + .bx--radio-button__label .bx--radio-button__appearance::before {
14963
+ position: relative;
14964
+ display: inline-block;
14965
+ width: 100%;
14966
+ height: 100%;
14967
+ background-color: var(--cds-icon-01, #161616);
14968
+ border-radius: 50%;
14969
+ content: "";
14970
+ transform: scale(0.5);
14919
14971
  }
14920
-
14921
- .bx--link.bx--link--inline {
14922
- text-decoration: underline;
14972
+ @media screen and (-ms-high-contrast: active) {
14973
+ .bx--radio-button:checked + .bx--radio-button__label .bx--radio-button__appearance::before {
14974
+ background-color: WindowText;
14975
+ }
14923
14976
  }
14924
- .bx--link.bx--link--inline:focus, .bx--link.bx--link--inline:visited {
14925
- text-decoration: none;
14977
+ @media screen and (prefers-contrast) {
14978
+ .bx--radio-button:checked + .bx--radio-button__label .bx--radio-button__appearance::before {
14979
+ border: 2px solid WindowText;
14980
+ }
14926
14981
  }
14927
14982
 
14928
- .bx--link--disabled.bx--link--inline {
14929
- text-decoration: underline;
14983
+ .bx--radio-button:disabled + .bx--radio-button__label {
14984
+ color: var(--cds-disabled-02, #c6c6c6);
14985
+ cursor: not-allowed;
14930
14986
  }
14931
14987
 
14932
- .bx--link--sm {
14933
- font-size: var(--cds-helper-text-01-font-size, 0.75rem);
14934
- line-height: var(--cds-helper-text-01-line-height, 1.33333);
14935
- letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
14988
+ .bx--radio-button:disabled + .bx--radio-button__label .bx--radio-button__appearance,
14989
+ .bx--radio-button:disabled:checked + .bx--radio-button__label .bx--radio-button__appearance {
14990
+ border-color: var(--cds-disabled-02, #c6c6c6);
14936
14991
  }
14937
-
14938
- .bx--link--lg {
14939
- font-size: var(--cds-body-short-02-font-size, 1rem);
14940
- font-weight: var(--cds-body-short-02-font-weight, 400);
14941
- line-height: var(--cds-body-short-02-line-height, 1.375);
14942
- letter-spacing: var(--cds-body-short-02-letter-spacing, 0);
14992
+ .bx--radio-button:disabled + .bx--radio-button__label .bx--radio-button__appearance::before,
14993
+ .bx--radio-button:disabled:checked + .bx--radio-button__label .bx--radio-button__appearance::before {
14994
+ background-color: var(--cds-disabled-02, #c6c6c6);
14943
14995
  }
14944
14996
 
14945
- .bx--link__icon {
14946
- display: inline-flex;
14947
- align-self: center;
14948
- margin-left: var(--cds-spacing-03, 0.5rem);
14997
+ .bx--radio-button:focus + .bx--radio-button__label .bx--radio-button__appearance {
14998
+ outline: 2px solid var(--cds-focus, #0f62fe);
14999
+ outline-offset: 1.5px;
14949
15000
  }
14950
15001
 
14951
- .c4p--empty-state {
14952
- color: var(--cds-text-01, #161616);
15002
+ .bx--radio-button__label.bx--skeleton {
15003
+ position: relative;
15004
+ padding: 0;
15005
+ border: none;
15006
+ background: var(--cds-skeleton-01, #e5e5e5);
15007
+ box-shadow: none;
15008
+ pointer-events: none;
15009
+ width: 6.25rem;
15010
+ height: 1.125rem;
14953
15011
  }
14954
- .c4p--empty-state .c4p--empty-state__header,
14955
- .c4p--empty-state .c4p--empty-state__subtitle {
14956
- padding-bottom: var(--cds-spacing-02, 0.25rem);
14957
- margin: 0;
15012
+ .bx--radio-button__label.bx--skeleton:hover, .bx--radio-button__label.bx--skeleton:focus, .bx--radio-button__label.bx--skeleton:active {
15013
+ border: none;
15014
+ cursor: default;
15015
+ outline: none;
14958
15016
  }
14959
- .c4p--empty-state .c4p--empty-state__header--small {
14960
- font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
14961
- font-weight: var(--cds-productive-heading-03-font-weight, 400);
14962
- line-height: var(--cds-productive-heading-03-line-height, 1.4);
14963
- letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
15017
+ .bx--radio-button__label.bx--skeleton::before {
15018
+ position: absolute;
15019
+ top: 0;
15020
+ left: 0;
15021
+ width: 100%;
15022
+ height: 100%;
15023
+ animation: 3000ms ease-in-out skeleton infinite;
15024
+ background: var(--cds-skeleton-02, #c6c6c6);
15025
+ content: "";
15026
+ will-change: transform-origin, transform, opacity;
14964
15027
  }
14965
- .c4p--empty-state .c4p--empty-state__subtitle--small {
14966
- font-size: var(--cds-body-short-01-font-size, 0.875rem);
14967
- font-weight: var(--cds-body-short-01-font-weight, 400);
14968
- line-height: var(--cds-body-short-01-line-height, 1.28572);
14969
- letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
15028
+ @media (prefers-reduced-motion: reduce) {
15029
+ .bx--radio-button__label.bx--skeleton::before {
15030
+ animation: none;
15031
+ }
14970
15032
  }
14971
15033
 
14972
- .c4p--empty-state__illustration.c4p--empty-state__illustration--lg {
14973
- min-width: var(--cds-spacing-11, 5rem);
14974
- max-width: var(--cds-spacing-11, 5rem);
15034
+ .bx--radio-button__label.bx--skeleton .bx--radio-button__appearance {
15035
+ display: none;
14975
15036
  }
14976
- .c4p--empty-state__illustration.c4p--empty-state__illustration--sm {
14977
- min-width: var(--cds-spacing-10, 4rem);
14978
- max-width: var(--cds-spacing-10, 4rem);
15037
+
15038
+ .bx--radio-button-wrapper .bx--radio-button__label {
15039
+ display: flex;
15040
+ align-items: flex-start;
15041
+ justify-content: center;
15042
+ margin: 0;
14979
15043
  }
14980
15044
 
14981
- .c4p--empty-state__action-button,
14982
- .c4p--empty-state__link {
14983
- margin-top: var(--cds-spacing-06, 1.5rem);
15045
+ .bx--radio-button-wrapper:not(:last-of-type) {
15046
+ margin-right: 1rem;
15047
+ }
15048
+
15049
+ .bx--radio-button-group--vertical .bx--radio-button-wrapper:not(:last-of-type) {
15050
+ margin-right: 0;
15051
+ margin-bottom: 0.5rem;
15052
+ }
15053
+
15054
+ .bx--radio-button-group--label-right .bx--radio-button__label,
15055
+ .bx--radio-button-wrapper.bx--radio-button-wrapper--label-right .bx--radio-button__label {
15056
+ flex-direction: row;
14984
15057
  }
14985
15058
 
14986
- .c4p--empty-state .c4p--empty-state__action-button {
14987
- display: block;
15059
+ .bx--radio-button-group--label-left .bx--radio-button__label,
15060
+ .bx--radio-button-wrapper.bx--radio-button-wrapper--label-left .bx--radio-button__label {
15061
+ flex-direction: row-reverse;
14988
15062
  }
14989
15063
 
14990
- .c4p--empty-state .c4p--empty-state__link {
14991
- display: block;
15064
+ .bx--radio-button-group--label-left .bx--radio-button__appearance,
15065
+ .bx--radio-button-wrapper.bx--radio-button-wrapper--label-left .bx--radio-button__appearance {
15066
+ margin-right: 0;
15067
+ margin-left: 0.5rem;
14992
15068
  }
14993
15069
 
14994
15070
  /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -15008,6 +15084,75 @@ a.bx--side-nav__link--current::before {
15008
15084
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15009
15085
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15010
15086
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15087
+ @keyframes rotate {
15088
+ 0% {
15089
+ transform: rotate(0deg);
15090
+ }
15091
+ 100% {
15092
+ transform: rotate(360deg);
15093
+ }
15094
+ }
15095
+ @keyframes rotate-end-p1 {
15096
+ 100% {
15097
+ transform: rotate(360deg);
15098
+ }
15099
+ }
15100
+ @keyframes rotate-end-p2 {
15101
+ 100% {
15102
+ transform: rotate(-360deg);
15103
+ }
15104
+ }
15105
+ /* Stroke animations */
15106
+ @keyframes init-stroke {
15107
+ 0% {
15108
+ stroke-dashoffset: 276.4608;
15109
+ }
15110
+ 100% {
15111
+ stroke-dashoffset: 52.527552;
15112
+ }
15113
+ }
15114
+ @keyframes stroke-end {
15115
+ 0% {
15116
+ stroke-dashoffset: 52.527552;
15117
+ }
15118
+ 100% {
15119
+ stroke-dashoffset: 276.4608;
15120
+ }
15121
+ }
15122
+ .c4p--export-modal .bx--modal-footer .bx--btn {
15123
+ max-width: none;
15124
+ }
15125
+
15126
+ .c4p--export-modal.bx--modal .bx--modal-content {
15127
+ padding-right: var(--cds-spacing-05, 1rem);
15128
+ }
15129
+
15130
+ .c4p--export-modal .bx--modal-close {
15131
+ display: none;
15132
+ }
15133
+
15134
+ .c4p--export-modal__body {
15135
+ padding-right: calc(20% - var(--cds-spacing-05, 1rem));
15136
+ margin-bottom: var(--cds-spacing-05, 1rem);
15137
+ }
15138
+
15139
+ .c4p--export-modal__messaging {
15140
+ display: flex;
15141
+ align-items: center;
15142
+ }
15143
+
15144
+ .c4p--export-modal__messaging p {
15145
+ margin-left: var(--cds-spacing-03, 0.5rem);
15146
+ }
15147
+
15148
+ .c4p--export-modal__checkmark-icon {
15149
+ fill: var(--cds-interactive-01, #0f62fe);
15150
+ }
15151
+
15152
+ .c4p--export-modal__error-icon {
15153
+ fill: var(--cds-danger, #da1e28);
15154
+ }
15155
+
15011
15156
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15012
15157
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15013
15158
  /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -15082,6 +15227,119 @@ a.bx--side-nav__link--current::before {
15082
15227
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15083
15228
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15084
15229
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15230
+ .c4p--card {
15231
+ background: var(--cds-ui-01, #f4f4f4);
15232
+ color: var(--cds-text-01, #161616);
15233
+ }
15234
+
15235
+ .c4p--card__clickable {
15236
+ cursor: pointer;
15237
+ transition: background 110ms;
15238
+ }
15239
+
15240
+ .c4p--card__clickable:hover {
15241
+ background: var(--cds-hover-ui, #e5e5e5);
15242
+ }
15243
+
15244
+ .c4p--card__media-left {
15245
+ display: flex;
15246
+ flex-direction: row;
15247
+ }
15248
+
15249
+ .c4p--card__media-left .c4p--card__content-container {
15250
+ display: flex;
15251
+ flex: 1;
15252
+ flex-direction: column;
15253
+ }
15254
+
15255
+ .c4p--card__media-left .c4p--card__footer {
15256
+ align-self: flex-end;
15257
+ margin-top: auto;
15258
+ }
15259
+
15260
+ .c4p--card__media > * {
15261
+ display: block;
15262
+ max-width: 100%;
15263
+ }
15264
+
15265
+ .c4p--card__header {
15266
+ padding: var(--cds-spacing-05, 1rem);
15267
+ }
15268
+
15269
+ .c4p--card__header-label-only {
15270
+ padding-bottom: var(--cds-spacing-03, 0.5rem);
15271
+ }
15272
+
15273
+ .c4p--card__header-label-only .c4p--card__label {
15274
+ margin-bottom: 0;
15275
+ }
15276
+
15277
+ .c4p--card__header-container {
15278
+ display: flex;
15279
+ flex-direction: row;
15280
+ align-items: center;
15281
+ justify-content: space-between;
15282
+ }
15283
+
15284
+ .c4p--card__label {
15285
+ font-size: var(--cds-label-01-font-size, 0.75rem);
15286
+ font-weight: var(--cds-label-01-font-weight, 400);
15287
+ line-height: var(--cds-label-01-line-height, 1.33333);
15288
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
15289
+ margin-bottom: var(--cds-spacing-01, 0.125rem);
15290
+ }
15291
+
15292
+ .c4p--card__description {
15293
+ font-size: var(--cds-caption-01-font-size, 0.75rem);
15294
+ font-weight: var(--cds-caption-01-font-weight, 400);
15295
+ line-height: var(--cds-caption-01-line-height, 1.33333);
15296
+ letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
15297
+ margin-top: var(--cds-spacing-01, 0.125rem);
15298
+ }
15299
+
15300
+ .c4p--card__body {
15301
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
15302
+ font-weight: var(--cds-body-short-01-font-weight, 400);
15303
+ line-height: var(--cds-body-short-01-line-height, 1.28572);
15304
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
15305
+ padding: var(--cds-spacing-05, 1rem);
15306
+ padding-top: 0;
15307
+ }
15308
+
15309
+ .c4p--card__footer {
15310
+ display: flex;
15311
+ justify-content: flex-end;
15312
+ }
15313
+
15314
+ .c4p--card__actions {
15315
+ display: flex;
15316
+ flex-direction: row;
15317
+ margin: var(--cds-spacing-05, 1rem);
15318
+ margin-top: 0;
15319
+ }
15320
+
15321
+ .c4p--card__icon {
15322
+ color: inherit;
15323
+ cursor: pointer;
15324
+ }
15325
+
15326
+ .c4p--card__link {
15327
+ color: inherit;
15328
+ text-decoration: inherit;
15329
+ }
15330
+
15331
+ .c4p--card__pictogram {
15332
+ padding-top: var(--cds-spacing-05, 1rem);
15333
+ padding-left: var(--cds-spacing-05, 1rem);
15334
+ }
15335
+
15336
+ .c4p--card__title {
15337
+ font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
15338
+ font-weight: var(--cds-productive-heading-03-font-weight, 400);
15339
+ line-height: var(--cds-productive-heading-03-line-height, 1.4);
15340
+ letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
15341
+ }
15342
+
15085
15343
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15086
15344
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15087
15345
  /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -15106,270 +15364,67 @@ a.bx--side-nav__link--current::before {
15106
15364
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15107
15365
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15108
15366
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15109
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15110
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15111
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15112
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15113
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15114
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15115
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15116
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15117
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15118
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15119
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15120
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15121
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15122
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15123
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15124
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15125
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15126
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15127
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15128
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15129
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15130
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15131
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15132
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15133
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15134
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15135
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15136
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15137
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15138
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15139
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15140
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15141
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15142
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15143
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15144
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15145
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15146
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15147
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15148
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15149
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15150
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15151
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15152
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15153
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15154
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15155
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15156
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15157
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15158
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15159
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15160
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15161
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15162
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15163
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15164
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15165
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15166
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15167
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15168
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15169
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15170
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15171
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15172
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15173
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15174
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15175
- .bx--radio-button-group {
15176
- box-sizing: border-box;
15177
- padding: 0;
15178
- border: 0;
15179
- margin: 0;
15180
- font-family: inherit;
15181
- font-size: 100%;
15182
- vertical-align: baseline;
15183
- position: relative;
15184
- display: flex;
15185
- align-items: center;
15186
- }
15187
- .bx--radio-button-group *,
15188
- .bx--radio-button-group *::before,
15189
- .bx--radio-button-group *::after {
15190
- box-sizing: inherit;
15367
+ .c4p--http-errors .c4p--http-errors__content {
15368
+ position: fixed;
15369
+ z-index: 2;
15370
+ top: 50%;
15371
+ left: 50%;
15372
+ transform: translate(-50%, -150%);
15191
15373
  }
15192
-
15193
- .bx--label + .bx--form-item .bx--radio-button-group {
15194
- margin-top: 0;
15374
+ @media (min-width: 42rem) {
15375
+ .c4p--http-errors .c4p--http-errors__content {
15376
+ transform: translate(-50%, -50%);
15377
+ }
15195
15378
  }
15196
15379
 
15197
- .bx--radio-button-group--vertical {
15198
- flex-direction: column;
15199
- align-items: flex-start;
15200
- }
15201
- .bx--radio-button-group--vertical.bx--radio-button-group--label-left {
15202
- align-items: flex-end;
15203
- }
15204
- .bx--radio-button-group--vertical .bx--radio-button__label {
15205
- margin-right: 0;
15206
- line-height: 1.25rem;
15207
- }
15208
- .bx--radio-button-group--vertical .bx--radio-button__label:not(:last-of-type) {
15209
- margin-bottom: 0.5rem;
15380
+ .c4p--http-errors .c4p--http-errors__error-code-label {
15381
+ font-size: var(--cds-productive-heading-02-font-size, 1rem);
15382
+ font-weight: var(--cds-productive-heading-02-font-weight, 600);
15383
+ line-height: var(--cds-productive-heading-02-line-height, 1.375);
15384
+ letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
15385
+ margin-bottom: var(--cds-spacing-02, 0.25rem);
15210
15386
  }
15211
15387
 
15212
- .bx--radio-button {
15213
- position: absolute;
15214
- overflow: hidden;
15215
- width: 1px;
15216
- height: 1px;
15217
- padding: 0;
15218
- border: 0;
15219
- margin: -1px;
15220
- clip: rect(0, 0, 0, 0);
15221
- visibility: inherit;
15222
- white-space: nowrap;
15223
- visibility: inherit;
15388
+ .c4p--http-errors .c4p--http-errors__title {
15389
+ font-size: var(--cds-productive-heading-05-font-size, 2rem);
15390
+ font-weight: var(--cds-productive-heading-05-font-weight, 400);
15391
+ line-height: var(--cds-productive-heading-05-line-height, 1.25);
15392
+ letter-spacing: var(--cds-productive-heading-05-letter-spacing, 0);
15393
+ margin-bottom: var(--cds-spacing-04, 0.75rem);
15224
15394
  }
15225
15395
 
15226
- .bx--radio-button__label {
15396
+ .c4p--http-errors .c4p--http-errors__description {
15227
15397
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
15228
15398
  font-weight: var(--cds-body-short-01-font-weight, 400);
15229
15399
  line-height: var(--cds-body-short-01-line-height, 1.28572);
15230
15400
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
15231
- display: flex;
15232
- align-items: center;
15233
- margin-right: 1rem;
15234
- cursor: pointer;
15235
- }
15236
-
15237
- .bx--radio-button__appearance {
15238
- box-sizing: border-box;
15239
- padding: 0;
15240
- border: 0;
15241
- margin: 0;
15242
- font-family: inherit;
15243
- font-size: 100%;
15244
- vertical-align: baseline;
15245
- width: 1.125rem;
15246
- height: 1.125rem;
15247
- flex-shrink: 0;
15248
- border: 1px solid var(--cds-icon-01, #161616);
15249
- margin: 0.0625rem 0.5rem 0.125rem 0.125rem;
15250
- background-color: transparent;
15251
- border-radius: 50%;
15252
- }
15253
- .bx--radio-button__appearance *,
15254
- .bx--radio-button__appearance *::before,
15255
- .bx--radio-button__appearance *::after {
15256
- box-sizing: inherit;
15257
- }
15258
-
15259
- .bx--radio-button:checked + .bx--radio-button__label .bx--radio-button__appearance {
15260
- display: flex;
15261
- align-items: center;
15262
- justify-content: center;
15263
- border-color: var(--cds-icon-01, #161616);
15264
- }
15265
- .bx--radio-button:checked + .bx--radio-button__label .bx--radio-button__appearance::before {
15266
- position: relative;
15267
- display: inline-block;
15268
- width: 100%;
15269
- height: 100%;
15270
- background-color: var(--cds-icon-01, #161616);
15271
- border-radius: 50%;
15272
- content: "";
15273
- transform: scale(0.5);
15274
- }
15275
- @media screen and (-ms-high-contrast: active) {
15276
- .bx--radio-button:checked + .bx--radio-button__label .bx--radio-button__appearance::before {
15277
- background-color: WindowText;
15278
- }
15279
- }
15280
- @media screen and (prefers-contrast) {
15281
- .bx--radio-button:checked + .bx--radio-button__label .bx--radio-button__appearance::before {
15282
- border: 2px solid WindowText;
15283
- }
15284
- }
15285
-
15286
- .bx--radio-button:disabled + .bx--radio-button__label {
15287
- color: var(--cds-disabled-02, #c6c6c6);
15288
- cursor: not-allowed;
15401
+ margin-bottom: var(--cds-spacing-06, 1.5rem);
15289
15402
  }
15290
15403
 
15291
- .bx--radio-button:disabled + .bx--radio-button__label .bx--radio-button__appearance,
15292
- .bx--radio-button:disabled:checked + .bx--radio-button__label .bx--radio-button__appearance {
15293
- border-color: var(--cds-disabled-02, #c6c6c6);
15294
- }
15295
- .bx--radio-button:disabled + .bx--radio-button__label .bx--radio-button__appearance::before,
15296
- .bx--radio-button:disabled:checked + .bx--radio-button__label .bx--radio-button__appearance::before {
15297
- background-color: var(--cds-disabled-02, #c6c6c6);
15404
+ .c4p--http-errors .c4p--http-errors__error-code-label,
15405
+ .c4p--http-errors .c4p--http-errors__title,
15406
+ .c4p--http-errors .c4p--http-errors__description {
15407
+ color: var(--cds-text-01, #161616);
15298
15408
  }
15299
15409
 
15300
- .bx--radio-button:focus + .bx--radio-button__label .bx--radio-button__appearance {
15301
- outline: 2px solid var(--cds-focus, #0f62fe);
15302
- outline-offset: 1.5px;
15410
+ .c4p--http-errors .c4p--http-errors__link {
15411
+ display: block;
15412
+ margin-bottom: var(--cds-spacing-02, 0.25rem);
15303
15413
  }
15304
15414
 
15305
- .bx--radio-button__label.bx--skeleton {
15306
- position: relative;
15307
- padding: 0;
15308
- border: none;
15309
- background: var(--cds-skeleton-01, #e5e5e5);
15310
- box-shadow: none;
15311
- pointer-events: none;
15312
- width: 6.25rem;
15313
- height: 1.125rem;
15314
- }
15315
- .bx--radio-button__label.bx--skeleton:hover, .bx--radio-button__label.bx--skeleton:focus, .bx--radio-button__label.bx--skeleton:active {
15316
- border: none;
15317
- cursor: default;
15318
- outline: none;
15319
- }
15320
- .bx--radio-button__label.bx--skeleton::before {
15321
- position: absolute;
15322
- top: 0;
15323
- left: 0;
15415
+ .c4p--http-errors .c4p--http-errors__image {
15416
+ position: fixed;
15417
+ top: 50%;
15418
+ left: 50%;
15324
15419
  width: 100%;
15325
- height: 100%;
15326
- animation: 3000ms ease-in-out skeleton infinite;
15327
- background: var(--cds-skeleton-02, #c6c6c6);
15328
- content: "";
15329
- will-change: transform-origin, transform, opacity;
15420
+ transform: translate(-50%, -40%);
15330
15421
  }
15331
- @media (prefers-reduced-motion: reduce) {
15332
- .bx--radio-button__label.bx--skeleton::before {
15333
- animation: none;
15422
+ @media (min-width: 42rem) {
15423
+ .c4p--http-errors .c4p--http-errors__image {
15424
+ transform: translate(-50%, -50%);
15334
15425
  }
15335
15426
  }
15336
15427
 
15337
- .bx--radio-button__label.bx--skeleton .bx--radio-button__appearance {
15338
- display: none;
15339
- }
15340
-
15341
- .bx--radio-button-wrapper .bx--radio-button__label {
15342
- display: flex;
15343
- align-items: flex-start;
15344
- justify-content: center;
15345
- margin: 0;
15346
- }
15347
-
15348
- .bx--radio-button-wrapper:not(:last-of-type) {
15349
- margin-right: 1rem;
15350
- }
15351
-
15352
- .bx--radio-button-group--vertical .bx--radio-button-wrapper:not(:last-of-type) {
15353
- margin-right: 0;
15354
- margin-bottom: 0.5rem;
15355
- }
15356
-
15357
- .bx--radio-button-group--label-right .bx--radio-button__label,
15358
- .bx--radio-button-wrapper.bx--radio-button-wrapper--label-right .bx--radio-button__label {
15359
- flex-direction: row;
15360
- }
15361
-
15362
- .bx--radio-button-group--label-left .bx--radio-button__label,
15363
- .bx--radio-button-wrapper.bx--radio-button-wrapper--label-left .bx--radio-button__label {
15364
- flex-direction: row-reverse;
15365
- }
15366
-
15367
- .bx--radio-button-group--label-left .bx--radio-button__appearance,
15368
- .bx--radio-button-wrapper.bx--radio-button-wrapper--label-left .bx--radio-button__appearance {
15369
- margin-right: 0;
15370
- margin-left: 0.5rem;
15371
- }
15372
-
15373
15428
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15374
15429
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15375
15430
  /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -15387,75 +15442,6 @@ a.bx--side-nav__link--current::before {
15387
15442
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15388
15443
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15389
15444
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15390
- @keyframes rotate {
15391
- 0% {
15392
- transform: rotate(0deg);
15393
- }
15394
- 100% {
15395
- transform: rotate(360deg);
15396
- }
15397
- }
15398
- @keyframes rotate-end-p1 {
15399
- 100% {
15400
- transform: rotate(360deg);
15401
- }
15402
- }
15403
- @keyframes rotate-end-p2 {
15404
- 100% {
15405
- transform: rotate(-360deg);
15406
- }
15407
- }
15408
- /* Stroke animations */
15409
- @keyframes init-stroke {
15410
- 0% {
15411
- stroke-dashoffset: 276.4608;
15412
- }
15413
- 100% {
15414
- stroke-dashoffset: 52.527552;
15415
- }
15416
- }
15417
- @keyframes stroke-end {
15418
- 0% {
15419
- stroke-dashoffset: 52.527552;
15420
- }
15421
- 100% {
15422
- stroke-dashoffset: 276.4608;
15423
- }
15424
- }
15425
- .c4p--export-modal .bx--modal-footer .bx--btn {
15426
- max-width: none;
15427
- }
15428
-
15429
- .c4p--export-modal.bx--modal .bx--modal-content {
15430
- padding-right: var(--cds-spacing-05, 1rem);
15431
- }
15432
-
15433
- .c4p--export-modal .bx--modal-close {
15434
- display: none;
15435
- }
15436
-
15437
- .c4p--export-modal__body {
15438
- padding-right: calc(20% - var(--cds-spacing-05, 1rem));
15439
- margin-bottom: var(--cds-spacing-05, 1rem);
15440
- }
15441
-
15442
- .c4p--export-modal__messaging {
15443
- display: flex;
15444
- align-items: center;
15445
- }
15446
-
15447
- .c4p--export-modal__messaging p {
15448
- margin-left: var(--cds-spacing-03, 0.5rem);
15449
- }
15450
-
15451
- .c4p--export-modal__checkmark-icon {
15452
- fill: var(--cds-interactive-01, #0f62fe);
15453
- }
15454
-
15455
- .c4p--export-modal__error-icon {
15456
- fill: var(--cds-danger, #da1e28);
15457
- }
15458
-
15459
15445
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15460
15446
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15461
15447
  /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -15530,204 +15516,435 @@ a.bx--side-nav__link--current::before {
15530
15516
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15531
15517
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15532
15518
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15533
- .c4p--card {
15534
- background: var(--cds-ui-01, #f4f4f4);
15519
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15520
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15521
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15522
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15523
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15524
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15525
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15526
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15527
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15528
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15529
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15530
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15531
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15532
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15533
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15534
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15535
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15536
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15537
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15538
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15539
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15540
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15541
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15542
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15543
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15544
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15545
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15546
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15547
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15548
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15549
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15550
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15551
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15552
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15553
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15554
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15555
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15556
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15557
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15558
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15559
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15560
+ @keyframes rotate {
15561
+ 0% {
15562
+ transform: rotate(0deg);
15563
+ }
15564
+ 100% {
15565
+ transform: rotate(360deg);
15566
+ }
15567
+ }
15568
+ @keyframes rotate-end-p1 {
15569
+ 100% {
15570
+ transform: rotate(360deg);
15571
+ }
15572
+ }
15573
+ @keyframes rotate-end-p2 {
15574
+ 100% {
15575
+ transform: rotate(-360deg);
15576
+ }
15577
+ }
15578
+ /* Stroke animations */
15579
+ @keyframes init-stroke {
15580
+ 0% {
15581
+ stroke-dashoffset: 276.4608;
15582
+ }
15583
+ 100% {
15584
+ stroke-dashoffset: 52.527552;
15585
+ }
15586
+ }
15587
+ @keyframes stroke-end {
15588
+ 0% {
15589
+ stroke-dashoffset: 52.527552;
15590
+ }
15591
+ 100% {
15592
+ stroke-dashoffset: 276.4608;
15593
+ }
15594
+ }
15595
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15596
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15597
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
15598
+ .bx--file {
15599
+ width: 100%;
15600
+ }
15601
+
15602
+ .bx--file--invalid {
15603
+ margin-right: 0.5rem;
15604
+ fill: var(--cds-support-01, #da1e28);
15605
+ }
15606
+
15607
+ .bx--file--label {
15608
+ box-sizing: border-box;
15609
+ padding: 0;
15610
+ border: 0;
15611
+ margin: 0;
15612
+ font-family: inherit;
15613
+ font-size: 100%;
15614
+ vertical-align: baseline;
15615
+ font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
15616
+ font-weight: var(--cds-productive-heading-01-font-weight, 600);
15617
+ line-height: var(--cds-productive-heading-01-line-height, 1.28572);
15618
+ letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
15619
+ margin-bottom: 0.5rem;
15620
+ color: var(--cds-text-01, #161616);
15621
+ }
15622
+ .bx--file--label *,
15623
+ .bx--file--label *::before,
15624
+ .bx--file--label *::after {
15625
+ box-sizing: inherit;
15626
+ }
15627
+
15628
+ .bx--file--label--disabled {
15629
+ color: var(--cds-disabled-02, #c6c6c6);
15630
+ }
15631
+
15632
+ .bx--file-input {
15633
+ position: absolute;
15634
+ overflow: hidden;
15635
+ width: 1px;
15636
+ height: 1px;
15637
+ padding: 0;
15638
+ border: 0;
15639
+ margin: -1px;
15640
+ clip: rect(0, 0, 0, 0);
15641
+ visibility: inherit;
15642
+ white-space: nowrap;
15643
+ }
15644
+
15645
+ .bx--file-btn {
15646
+ display: inline-flex;
15647
+ padding-right: 4rem;
15648
+ margin: 0;
15649
+ }
15650
+
15651
+ .bx--file-browse-btn {
15652
+ display: inline-block;
15653
+ width: 100%;
15654
+ max-width: 20rem;
15655
+ margin-bottom: 0.5rem;
15656
+ color: var(--cds-link-01, #0f62fe);
15657
+ cursor: pointer;
15658
+ outline: 2px solid transparent;
15659
+ outline-offset: -2px;
15660
+ transition: 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
15661
+ }
15662
+ .bx--file-browse-btn:focus, .bx--file-browse-btn:hover {
15663
+ outline: 2px solid var(--cds-interactive-03, #0f62fe);
15664
+ }
15665
+ .bx--file-browse-btn:hover, .bx--file-browse-btn:focus, .bx--file-browse-btn:active, .bx--file-browse-btn:active:visited {
15666
+ text-decoration: underline;
15667
+ }
15668
+ .bx--file-browse-btn:active {
15535
15669
  color: var(--cds-text-01, #161616);
15536
15670
  }
15537
-
15538
- .c4p--card__clickable {
15539
- cursor: pointer;
15540
- transition: background 110ms;
15671
+
15672
+ .bx--file-browse-btn--disabled {
15673
+ color: var(--cds-disabled-02, #c6c6c6);
15674
+ cursor: no-drop;
15675
+ text-decoration: none;
15676
+ }
15677
+ .bx--file-browse-btn--disabled:hover, .bx--file-browse-btn--disabled:focus {
15678
+ color: var(--cds-disabled-02, #c6c6c6);
15679
+ outline: none;
15680
+ text-decoration: none;
15681
+ }
15682
+
15683
+ .bx--file-browse-btn--disabled .bx--file__drop-container {
15684
+ border: 1px dashed var(--cds-disabled-02, #c6c6c6);
15685
+ }
15686
+
15687
+ .bx--label-description {
15688
+ box-sizing: border-box;
15689
+ padding: 0;
15690
+ border: 0;
15691
+ margin: 0;
15692
+ font-family: inherit;
15693
+ font-size: 100%;
15694
+ vertical-align: baseline;
15695
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
15696
+ font-weight: var(--cds-body-short-01-font-weight, 400);
15697
+ line-height: var(--cds-body-short-01-line-height, 1.28572);
15698
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
15699
+ margin-bottom: 1rem;
15700
+ color: var(--cds-text-02, #525252);
15701
+ }
15702
+ .bx--label-description *,
15703
+ .bx--label-description *::before,
15704
+ .bx--label-description *::after {
15705
+ box-sizing: inherit;
15706
+ }
15707
+
15708
+ .bx--label-description--disabled {
15709
+ color: var(--cds-disabled-02, #c6c6c6);
15710
+ }
15711
+
15712
+ .bx--file-btn ~ .bx--file-container {
15713
+ margin-top: 1.5rem;
15714
+ }
15715
+
15716
+ .bx--btn ~ .bx--file-container {
15717
+ margin-top: 1rem;
15718
+ }
15719
+
15720
+ .bx--file .bx--file-container,
15721
+ .bx--file ~ .bx--file-container {
15722
+ margin-top: 0.5rem;
15723
+ }
15724
+
15725
+ .bx--file__selected-file {
15726
+ display: grid;
15727
+ max-width: 20rem;
15728
+ min-height: 3rem;
15729
+ align-items: center;
15730
+ margin-bottom: 0.5rem;
15731
+ background-color: var(--cds-field-01, #f4f4f4);
15732
+ gap: 0.75rem 1rem;
15733
+ grid-auto-rows: auto;
15734
+ grid-template-columns: 1fr auto;
15735
+ word-break: break-word;
15736
+ }
15737
+ .bx--file__selected-file:last-child {
15738
+ margin-bottom: 0;
15739
+ }
15740
+ .bx--file__selected-file .bx--form-requirement {
15741
+ display: block;
15742
+ max-height: none;
15743
+ margin: 0;
15744
+ grid-column: 1/-1;
15745
+ }
15746
+ .bx--file__selected-file .bx--inline-loading__animation .bx--loading {
15747
+ margin-right: 0;
15748
+ }
15749
+ .bx--file__selected-file .bx--file-filename {
15750
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
15751
+ font-weight: var(--cds-body-short-01-font-weight, 400);
15752
+ line-height: var(--cds-body-short-01-line-height, 1.28572);
15753
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
15754
+ overflow: hidden;
15755
+ margin-left: 1rem;
15756
+ text-overflow: ellipsis;
15757
+ white-space: nowrap;
15541
15758
  }
15542
15759
 
15543
- .c4p--card__clickable:hover {
15544
- background: var(--cds-hover-ui, #e5e5e5);
15760
+ .bx--file__selected-file--field,
15761
+ .bx--file__selected-file--md {
15762
+ min-height: 2.5rem;
15763
+ gap: 0.5rem 1rem;
15545
15764
  }
15546
15765
 
15547
- .c4p--card__media-left {
15548
- display: flex;
15549
- flex-direction: row;
15766
+ .bx--file__selected-file--sm {
15767
+ min-height: 2rem;
15768
+ gap: 0.25rem 1rem;
15550
15769
  }
15551
15770
 
15552
- .c4p--card__media-left .c4p--card__content-container {
15553
- display: flex;
15554
- flex: 1;
15555
- flex-direction: column;
15771
+ .bx--file__selected-file--invalid__wrapper {
15772
+ outline: 2px solid var(--cds-support-01, #da1e28);
15773
+ outline-offset: -2px;
15774
+ max-width: 20rem;
15775
+ margin-bottom: 0.5rem;
15776
+ background-color: var(--cds-field-01, #f4f4f4);
15777
+ outline-width: 1px;
15778
+ }
15779
+ @media screen and (prefers-contrast) {
15780
+ .bx--file__selected-file--invalid__wrapper {
15781
+ outline-style: dotted;
15782
+ }
15556
15783
  }
15557
15784
 
15558
- .c4p--card__media-left .c4p--card__footer {
15559
- align-self: flex-end;
15560
- margin-top: auto;
15785
+ .bx--file__selected-file--invalid {
15786
+ outline: 2px solid var(--cds-support-01, #da1e28);
15787
+ outline-offset: -2px;
15788
+ padding: 0.75rem 0;
15789
+ }
15790
+ @media screen and (prefers-contrast) {
15791
+ .bx--file__selected-file--invalid {
15792
+ outline-style: dotted;
15793
+ }
15561
15794
  }
15562
15795
 
15563
- .c4p--card__media > * {
15564
- display: block;
15565
- max-width: 100%;
15796
+ .bx--file__selected-file--invalid.bx--file__selected-file--sm {
15797
+ padding: 0.25rem 0;
15566
15798
  }
15567
15799
 
15568
- .c4p--card__header {
15569
- padding: var(--cds-spacing-05, 1rem);
15800
+ .bx--file__selected-file--invalid.bx--file__selected-file--field,
15801
+ .bx--file__selected-file--invalid.bx--file__selected-file--md {
15802
+ padding: 0.5rem 0;
15570
15803
  }
15571
15804
 
15572
- .c4p--card__header-label-only {
15573
- padding-bottom: var(--cds-spacing-03, 0.5rem);
15805
+ .bx--file__selected-file--invalid .bx--form-requirement {
15806
+ padding-top: 1rem;
15807
+ border-top: 1px solid var(--cds-ui-03, #e0e0e0);
15574
15808
  }
15575
15809
 
15576
- .c4p--card__header-label-only .c4p--card__label {
15577
- margin-bottom: 0;
15810
+ .bx--file__selected-file--invalid.bx--file__selected-file--sm .bx--form-requirement {
15811
+ padding-top: 0.4375rem;
15578
15812
  }
15579
15813
 
15580
- .c4p--card__header-container {
15581
- display: flex;
15582
- flex-direction: row;
15583
- align-items: center;
15584
- justify-content: space-between;
15814
+ .bx--file__selected-file--invalid.bx--file__selected-file--field .bx--form-requirement,
15815
+ .bx--file__selected-file--invalid.bx--file__selected-file--md .bx--form-requirement {
15816
+ padding-top: 0.6875rem;
15585
15817
  }
15586
15818
 
15587
- .c4p--card__label {
15819
+ .bx--file__selected-file--invalid .bx--form-requirement__title,
15820
+ .bx--file__selected-file--invalid .bx--form-requirement__supplement {
15588
15821
  font-size: var(--cds-label-01-font-size, 0.75rem);
15589
15822
  font-weight: var(--cds-label-01-font-weight, 400);
15590
15823
  line-height: var(--cds-label-01-line-height, 1.33333);
15591
15824
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
15592
- margin-bottom: var(--cds-spacing-01, 0.125rem);
15825
+ padding: 0 1rem;
15593
15826
  }
15594
15827
 
15595
- .c4p--card__description {
15828
+ .bx--file__selected-file--invalid .bx--form-requirement__title {
15829
+ color: var(--cds-text-error, #da1e28);
15830
+ }
15831
+
15832
+ .bx--file__selected-file--invalid .bx--form-requirement__supplement {
15833
+ color: var(--cds-text-01, #161616);
15834
+ }
15835
+
15836
+ .bx--file__selected-file--invalid + .bx--form-requirement {
15596
15837
  font-size: var(--cds-caption-01-font-size, 0.75rem);
15597
15838
  font-weight: var(--cds-caption-01-font-weight, 400);
15598
15839
  line-height: var(--cds-caption-01-line-height, 1.33333);
15599
15840
  letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
15600
- margin-top: var(--cds-spacing-01, 0.125rem);
15841
+ display: block;
15842
+ overflow: visible;
15843
+ max-height: 12.5rem;
15844
+ padding: 0.5rem 1rem;
15845
+ color: var(--cds-text-error, #da1e28);
15846
+ font-weight: 400;
15601
15847
  }
15602
15848
 
15603
- .c4p--card__body {
15604
- font-size: var(--cds-body-short-01-font-size, 0.875rem);
15605
- font-weight: var(--cds-body-short-01-font-weight, 400);
15606
- line-height: var(--cds-body-short-01-line-height, 1.28572);
15607
- letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
15608
- padding: var(--cds-spacing-05, 1rem);
15609
- padding-top: 0;
15849
+ .bx--file__selected-file--invalid + .bx--form-requirement .bx--form-requirement__supplement {
15850
+ padding-bottom: 0.5rem;
15851
+ color: var(--cds-text-01, #161616);
15610
15852
  }
15611
15853
 
15612
- .c4p--card__footer {
15854
+ .bx--file__state-container {
15613
15855
  display: flex;
15614
- justify-content: flex-end;
15856
+ min-width: 1.5rem;
15857
+ align-items: center;
15858
+ justify-content: center;
15859
+ padding-right: 1rem;
15615
15860
  }
15616
-
15617
- .c4p--card__actions {
15618
- display: flex;
15619
- flex-direction: row;
15620
- margin: var(--cds-spacing-05, 1rem);
15621
- margin-top: 0;
15861
+ .bx--file__state-container .bx--loading__svg {
15862
+ stroke: var(--cds-ui-05, #161616);
15622
15863
  }
15623
15864
 
15624
- .c4p--card__icon {
15625
- color: inherit;
15865
+ .bx--file__state-container .bx--file-complete {
15626
15866
  cursor: pointer;
15867
+ fill: var(--cds-interactive-04, #0f62fe);
15627
15868
  }
15628
-
15629
- .c4p--card__link {
15630
- color: inherit;
15631
- text-decoration: inherit;
15869
+ .bx--file__state-container .bx--file-complete:focus {
15870
+ outline: 1px solid var(--cds-focus, #0f62fe);
15632
15871
  }
15633
-
15634
- .c4p--card__pictogram {
15635
- padding-top: var(--cds-spacing-05, 1rem);
15636
- padding-left: var(--cds-spacing-05, 1rem);
15872
+ @media screen and (prefers-contrast) {
15873
+ .bx--file__state-container .bx--file-complete:focus {
15874
+ outline-style: dotted;
15875
+ }
15876
+ }
15877
+ .bx--file__state-container .bx--file-complete [data-icon-path=inner-path] {
15878
+ fill: var(--cds-icon-03, #ffffff);
15879
+ opacity: 1;
15637
15880
  }
15638
15881
 
15639
- .c4p--card__title {
15640
- font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
15641
- font-weight: var(--cds-productive-heading-03-font-weight, 400);
15642
- line-height: var(--cds-productive-heading-03-line-height, 1.4);
15643
- letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
15882
+ .bx--file__state-container .bx--file-invalid {
15883
+ width: 1rem;
15884
+ height: 1rem;
15885
+ fill: var(--cds-support-01, #da1e28);
15644
15886
  }
15645
15887
 
15646
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15647
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15648
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15649
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15650
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15651
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15652
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15653
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15654
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15655
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15656
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15657
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15658
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15659
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15660
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15661
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15662
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15663
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15664
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15665
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15666
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15667
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15668
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15669
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15670
- .c4p--http-errors .c4p--http-errors__content {
15671
- position: fixed;
15672
- z-index: 2;
15673
- top: 50%;
15674
- left: 50%;
15675
- transform: translate(-50%, -150%);
15888
+ .bx--file__state-container .bx--file-close {
15889
+ display: flex;
15890
+ width: 1.5rem;
15891
+ height: 1.5rem;
15892
+ align-items: center;
15893
+ justify-content: center;
15894
+ padding: 0;
15895
+ border: none;
15896
+ background-color: transparent;
15897
+ cursor: pointer;
15898
+ fill: var(--cds-icon-01, #161616);
15676
15899
  }
15677
- @media (min-width: 42rem) {
15678
- .c4p--http-errors .c4p--http-errors__content {
15679
- transform: translate(-50%, -50%);
15900
+ .bx--file__state-container .bx--file-close:focus {
15901
+ outline: 2px solid var(--cds-focus, #0f62fe);
15902
+ outline-offset: -2px;
15903
+ }
15904
+ @media screen and (prefers-contrast) {
15905
+ .bx--file__state-container .bx--file-close:focus {
15906
+ outline-style: dotted;
15680
15907
  }
15681
15908
  }
15682
15909
 
15683
- .c4p--http-errors .c4p--http-errors__error-code-label {
15684
- font-size: var(--cds-productive-heading-02-font-size, 1rem);
15685
- font-weight: var(--cds-productive-heading-02-font-weight, 600);
15686
- line-height: var(--cds-productive-heading-02-line-height, 1.375);
15687
- letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
15688
- margin-bottom: var(--cds-spacing-02, 0.25rem);
15910
+ .bx--file__state-container .bx--file-close svg path {
15911
+ fill: var(--cds-icon-01, #161616);
15689
15912
  }
15690
15913
 
15691
- .c4p--http-errors .c4p--http-errors__title {
15692
- font-size: var(--cds-productive-heading-05-font-size, 2rem);
15693
- font-weight: var(--cds-productive-heading-05-font-weight, 400);
15694
- line-height: var(--cds-productive-heading-05-line-height, 1.25);
15695
- letter-spacing: var(--cds-productive-heading-05-letter-spacing, 0);
15696
- margin-bottom: var(--cds-spacing-04, 0.75rem);
15914
+ .bx--file__state-container .bx--inline-loading__animation {
15915
+ margin-right: -0.5rem;
15697
15916
  }
15698
15917
 
15699
- .c4p--http-errors .c4p--http-errors__description {
15700
- font-size: var(--cds-body-short-01-font-size, 0.875rem);
15701
- font-weight: var(--cds-body-short-01-font-weight, 400);
15702
- line-height: var(--cds-body-short-01-line-height, 1.28572);
15703
- letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
15704
- margin-bottom: var(--cds-spacing-06, 1.5rem);
15918
+ .bx--file__drop-container {
15919
+ display: flex;
15920
+ overflow: hidden;
15921
+ height: 6rem;
15922
+ align-items: flex-start;
15923
+ justify-content: space-between;
15924
+ padding: 1rem;
15925
+ border: 1px dashed var(--cds-ui-04, #8d8d8d);
15705
15926
  }
15706
15927
 
15707
- .c4p--http-errors .c4p--http-errors__error-code-label,
15708
- .c4p--http-errors .c4p--http-errors__title,
15709
- .c4p--http-errors .c4p--http-errors__description {
15710
- color: var(--cds-text-01, #161616);
15928
+ .bx--file__drop-container--drag-over {
15929
+ background: none;
15930
+ outline: 2px solid var(--cds-interactive-03, #0f62fe);
15931
+ outline-offset: -2px;
15711
15932
  }
15712
15933
 
15713
- .c4p--http-errors .c4p--http-errors__link {
15714
- display: block;
15715
- margin-bottom: var(--cds-spacing-02, 0.25rem);
15934
+ /* stylelint-disable */
15935
+ @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
15936
+ .bx--file__selected-file {
15937
+ outline: 1px solid transparent;
15938
+ }
15716
15939
  }
15717
15940
 
15718
- .c4p--http-errors .c4p--http-errors__image {
15719
- position: fixed;
15720
- top: 50%;
15721
- left: 50%;
15722
- width: 100%;
15723
- transform: translate(-50%, -40%);
15724
- }
15725
- @media (min-width: 42rem) {
15726
- .c4p--http-errors .c4p--http-errors__image {
15727
- transform: translate(-50%, -50%);
15941
+ @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
15942
+ .bx--file__state-container .bx--file-close svg path {
15943
+ fill: ButtonText;
15728
15944
  }
15729
15945
  }
15730
15946
 
15947
+ /* stylelint-enable */
15731
15948
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15732
15949
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15733
15950
  /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -15820,498 +16037,260 @@ a.bx--side-nav__link--current::before {
15820
16037
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15821
16038
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15822
16039
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15823
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15824
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15825
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15826
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15827
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15828
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15829
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15830
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15831
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15832
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15833
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15834
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15835
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15836
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15837
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15838
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15839
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15840
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15841
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15842
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15843
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15844
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15845
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15846
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15847
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15848
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15849
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15850
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15851
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15852
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15853
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15854
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15855
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15856
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15857
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15858
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15859
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15860
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15861
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15862
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15863
- @keyframes rotate {
15864
- 0% {
15865
- transform: rotate(0deg);
15866
- }
15867
- 100% {
15868
- transform: rotate(360deg);
15869
- }
15870
- }
15871
- @keyframes rotate-end-p1 {
15872
- 100% {
15873
- transform: rotate(360deg);
15874
- }
15875
- }
15876
- @keyframes rotate-end-p2 {
15877
- 100% {
15878
- transform: rotate(-360deg);
15879
- }
15880
- }
15881
- /* Stroke animations */
15882
- @keyframes init-stroke {
15883
- 0% {
15884
- stroke-dashoffset: 276.4608;
15885
- }
15886
- 100% {
15887
- stroke-dashoffset: 52.527552;
15888
- }
15889
- }
15890
- @keyframes stroke-end {
15891
- 0% {
15892
- stroke-dashoffset: 52.527552;
15893
- }
15894
- 100% {
15895
- stroke-dashoffset: 276.4608;
15896
- }
15897
- }
15898
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15899
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15900
- /* stylelint-disable-line no-invalid-position-at-import-rule */
15901
- .bx--file {
15902
- width: 100%;
15903
- }
15904
-
15905
- .bx--file--invalid {
15906
- margin-right: 0.5rem;
15907
- fill: var(--cds-support-01, #da1e28);
15908
- }
15909
-
15910
- .bx--file--label {
15911
- box-sizing: border-box;
15912
- padding: 0;
15913
- border: 0;
15914
- margin: 0;
15915
- font-family: inherit;
15916
- font-size: 100%;
15917
- vertical-align: baseline;
15918
- font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
15919
- font-weight: var(--cds-productive-heading-01-font-weight, 600);
15920
- line-height: var(--cds-productive-heading-01-line-height, 1.28572);
15921
- letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
15922
- margin-bottom: 0.5rem;
15923
- color: var(--cds-text-01, #161616);
15924
- }
15925
- .bx--file--label *,
15926
- .bx--file--label *::before,
15927
- .bx--file--label *::after {
15928
- box-sizing: inherit;
15929
- }
15930
-
15931
- .bx--file--label--disabled {
15932
- color: var(--cds-disabled-02, #c6c6c6);
15933
- }
15934
-
15935
- .bx--file-input {
15936
- position: absolute;
15937
- overflow: hidden;
15938
- width: 1px;
15939
- height: 1px;
15940
- padding: 0;
15941
- border: 0;
15942
- margin: -1px;
15943
- clip: rect(0, 0, 0, 0);
15944
- visibility: inherit;
15945
- white-space: nowrap;
15946
- }
15947
-
15948
- .bx--file-btn {
15949
- display: inline-flex;
15950
- padding-right: 4rem;
15951
- margin: 0;
15952
- }
15953
-
15954
- .bx--file-browse-btn {
15955
- display: inline-block;
15956
- width: 100%;
15957
- max-width: 20rem;
15958
- margin-bottom: 0.5rem;
15959
- color: var(--cds-link-01, #0f62fe);
15960
- cursor: pointer;
15961
- outline: 2px solid transparent;
15962
- outline-offset: -2px;
15963
- transition: 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
15964
- }
15965
- .bx--file-browse-btn:focus, .bx--file-browse-btn:hover {
15966
- outline: 2px solid var(--cds-interactive-03, #0f62fe);
15967
- }
15968
- .bx--file-browse-btn:hover, .bx--file-browse-btn:focus, .bx--file-browse-btn:active, .bx--file-browse-btn:active:visited {
15969
- text-decoration: underline;
15970
- }
15971
- .bx--file-browse-btn:active {
15972
- color: var(--cds-text-01, #161616);
15973
- }
15974
-
15975
- .bx--file-browse-btn--disabled {
15976
- color: var(--cds-disabled-02, #c6c6c6);
15977
- cursor: no-drop;
15978
- text-decoration: none;
15979
- }
15980
- .bx--file-browse-btn--disabled:hover, .bx--file-browse-btn--disabled:focus {
15981
- color: var(--cds-disabled-02, #c6c6c6);
15982
- outline: none;
15983
- text-decoration: none;
15984
- }
15985
-
15986
- .bx--file-browse-btn--disabled .bx--file__drop-container {
15987
- border: 1px dashed var(--cds-disabled-02, #c6c6c6);
15988
- }
15989
-
15990
- .bx--label-description {
15991
- box-sizing: border-box;
15992
- padding: 0;
15993
- border: 0;
15994
- margin: 0;
15995
- font-family: inherit;
15996
- font-size: 100%;
15997
- vertical-align: baseline;
15998
- font-size: var(--cds-body-short-01-font-size, 0.875rem);
15999
- font-weight: var(--cds-body-short-01-font-weight, 400);
16000
- line-height: var(--cds-body-short-01-line-height, 1.28572);
16001
- letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
16002
- margin-bottom: 1rem;
16003
- color: var(--cds-text-02, #525252);
16004
- }
16005
- .bx--label-description *,
16006
- .bx--label-description *::before,
16007
- .bx--label-description *::after {
16008
- box-sizing: inherit;
16009
- }
16010
-
16011
- .bx--label-description--disabled {
16012
- color: var(--cds-disabled-02, #c6c6c6);
16013
- }
16014
-
16015
- .bx--file-btn ~ .bx--file-container {
16016
- margin-top: 1.5rem;
16017
- }
16018
-
16019
- .bx--btn ~ .bx--file-container {
16020
- margin-top: 1rem;
16021
- }
16022
-
16023
- .bx--file .bx--file-container,
16024
- .bx--file ~ .bx--file-container {
16025
- margin-top: 0.5rem;
16026
- }
16027
-
16028
- .bx--file__selected-file {
16029
- display: grid;
16030
- max-width: 20rem;
16031
- min-height: 3rem;
16032
- align-items: center;
16033
- margin-bottom: 0.5rem;
16034
- background-color: var(--cds-field-01, #f4f4f4);
16035
- gap: 0.75rem 1rem;
16036
- grid-auto-rows: auto;
16037
- grid-template-columns: 1fr auto;
16038
- word-break: break-word;
16039
- }
16040
- .bx--file__selected-file:last-child {
16041
- margin-bottom: 0;
16042
- }
16043
- .bx--file__selected-file .bx--form-requirement {
16044
- display: block;
16045
- max-height: none;
16046
- margin: 0;
16047
- grid-column: 1/-1;
16048
- }
16049
- .bx--file__selected-file .bx--inline-loading__animation .bx--loading {
16050
- margin-right: 0;
16051
- }
16052
- .bx--file__selected-file .bx--file-filename {
16053
- font-size: var(--cds-body-short-01-font-size, 0.875rem);
16054
- font-weight: var(--cds-body-short-01-font-weight, 400);
16055
- line-height: var(--cds-body-short-01-line-height, 1.28572);
16056
- letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
16057
- overflow: hidden;
16058
- margin-left: 1rem;
16059
- text-overflow: ellipsis;
16060
- white-space: nowrap;
16040
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
16041
+ .c4p--import-modal .bx--modal-close {
16042
+ display: none;
16061
16043
  }
16062
16044
 
16063
- .bx--file__selected-file--field,
16064
- .bx--file__selected-file--md {
16065
- min-height: 2.5rem;
16066
- gap: 0.5rem 1rem;
16045
+ .c4p--import-modal .bx--modal-footer .bx--btn {
16046
+ max-width: none;
16067
16047
  }
16068
16048
 
16069
- .bx--file__selected-file--sm {
16070
- min-height: 2rem;
16071
- gap: 0.25rem 1rem;
16049
+ .c4p--import-modal.bx--modal .bx--modal-content {
16050
+ padding-right: var(--cds-spacing-05, 1rem);
16072
16051
  }
16073
16052
 
16074
- .bx--file__selected-file--invalid__wrapper {
16075
- outline: 2px solid var(--cds-support-01, #da1e28);
16076
- outline-offset: -2px;
16077
- max-width: 20rem;
16078
- margin-bottom: 0.5rem;
16079
- background-color: var(--cds-field-01, #f4f4f4);
16080
- outline-width: 1px;
16081
- }
16082
- @media screen and (prefers-contrast) {
16083
- .bx--file__selected-file--invalid__wrapper {
16084
- outline-style: dotted;
16085
- }
16053
+ .bx--file .bx--file-container,
16054
+ .bx--file ~ .bx--file-container {
16055
+ margin-top: 0;
16086
16056
  }
16087
16057
 
16088
- .bx--file__selected-file--invalid {
16089
- outline: 2px solid var(--cds-support-01, #da1e28);
16090
- outline-offset: -2px;
16091
- padding: 0.75rem 0;
16092
- }
16093
- @media screen and (prefers-contrast) {
16094
- .bx--file__selected-file--invalid {
16095
- outline-style: dotted;
16096
- }
16058
+ .bx--modal-container--sm .bx--modal-header {
16059
+ padding-right: calc(20% - var(--cds-spacing-05, 1rem));
16097
16060
  }
16098
16061
 
16099
- .bx--file__selected-file--invalid.bx--file__selected-file--sm {
16100
- padding: 0.25rem 0;
16062
+ .c4p--import-modal__input-group {
16063
+ display: flex;
16101
16064
  }
16102
16065
 
16103
- .bx--file__selected-file--invalid.bx--file__selected-file--field,
16104
- .bx--file__selected-file--invalid.bx--file__selected-file--md {
16105
- padding: 0.5rem 0;
16066
+ .c4p--import-modal__import-button.bx--btn {
16067
+ margin-left: var(--cds-spacing-03, 0.5rem);
16106
16068
  }
16107
16069
 
16108
- .bx--file__selected-file--invalid .bx--form-requirement {
16109
- padding-top: 1rem;
16110
- border-top: 1px solid var(--cds-ui-03, #e0e0e0);
16070
+ .c4p--import-modal__file-container {
16071
+ width: 100%;
16111
16072
  }
16112
16073
 
16113
- .bx--file__selected-file--invalid.bx--file__selected-file--sm .bx--form-requirement {
16114
- padding-top: 0.4375rem;
16074
+ .c4p--import-modal .c4p--import-modal__file-drop-header,
16075
+ .c4p--import-modal .c4p--import-modal__label {
16076
+ margin-bottom: var(--cds-spacing-03, 0.5rem);
16077
+ font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
16078
+ font-weight: var(--cds-productive-heading-01-font-weight, 600);
16079
+ line-height: var(--cds-productive-heading-01-line-height, 1.28572);
16080
+ letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
16115
16081
  }
16116
16082
 
16117
- .bx--file__selected-file--invalid.bx--file__selected-file--field .bx--form-requirement,
16118
- .bx--file__selected-file--invalid.bx--file__selected-file--md .bx--form-requirement {
16119
- padding-top: 0.6875rem;
16083
+ .c4p--import-modal__helper-text {
16084
+ margin-top: var(--cds-spacing-06, 1.5rem);
16085
+ margin-bottom: var(--cds-spacing-03, 0.5rem);
16086
+ font-size: var(--cds-helper-text-01-font-size, 0.75rem);
16087
+ line-height: var(--cds-helper-text-01-line-height, 1.33333);
16088
+ letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
16120
16089
  }
16121
16090
 
16122
- .bx--file__selected-file--invalid .bx--form-requirement__title,
16123
- .bx--file__selected-file--invalid .bx--form-requirement__supplement {
16124
- font-size: var(--cds-label-01-font-size, 0.75rem);
16125
- font-weight: var(--cds-label-01-font-weight, 400);
16126
- line-height: var(--cds-label-01-line-height, 1.33333);
16127
- letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
16128
- padding: 0 1rem;
16091
+ .c4p--import-modal__body {
16092
+ padding-right: calc(20% - var(--cds-spacing-05, 1rem));
16093
+ margin-bottom: var(--cds-spacing-06, 1.5rem);
16129
16094
  }
16130
16095
 
16131
- .bx--file__selected-file--invalid .bx--form-requirement__title {
16132
- color: var(--cds-text-error, #da1e28);
16096
+ .c4p--import-modal .bx--file__selected-file {
16097
+ max-width: none;
16098
+ background: var(--cds-ui-02, #ffffff);
16133
16099
  }
16134
16100
 
16135
- .bx--file__selected-file--invalid .bx--form-requirement__supplement {
16136
- color: var(--cds-text-01, #161616);
16101
+ .c4p--import-modal .bx--file {
16102
+ margin-bottom: var(--cds-spacing-05, 1rem);
16137
16103
  }
16138
16104
 
16139
- .bx--file__selected-file--invalid + .bx--form-requirement {
16140
- font-size: var(--cds-caption-01-font-size, 0.75rem);
16141
- font-weight: var(--cds-caption-01-font-weight, 400);
16142
- line-height: var(--cds-caption-01-line-height, 1.33333);
16143
- letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
16144
- display: block;
16145
- overflow: visible;
16146
- max-height: 12.5rem;
16147
- padding: 0.5rem 1rem;
16148
- color: var(--cds-text-error, #da1e28);
16149
- font-weight: 400;
16105
+ .c4p--import-modal .bx--text-input:disabled {
16106
+ background: var(--cds-ui-02, #ffffff);
16150
16107
  }
16151
16108
 
16152
- .bx--file__selected-file--invalid + .bx--form-requirement .bx--form-requirement__supplement {
16153
- padding-bottom: 0.5rem;
16154
- color: var(--cds-text-01, #161616);
16109
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
16110
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
16111
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
16112
+ @keyframes progress-indeterminate {
16113
+ 0% {
16114
+ right: auto;
16115
+ left: 0;
16116
+ width: 0%;
16117
+ }
16118
+ 20% {
16119
+ right: auto;
16120
+ left: 0;
16121
+ width: 100%;
16122
+ }
16123
+ 28% {
16124
+ right: 0;
16125
+ left: auto;
16126
+ width: 100%;
16127
+ }
16128
+ 51% {
16129
+ right: 0;
16130
+ left: auto;
16131
+ width: 0%;
16132
+ }
16133
+ 58% {
16134
+ right: 0;
16135
+ left: auto;
16136
+ width: 0%;
16137
+ }
16138
+ 82% {
16139
+ right: 0;
16140
+ left: auto;
16141
+ width: 100%;
16142
+ }
16143
+ 83% {
16144
+ right: auto;
16145
+ left: 0;
16146
+ width: 100%;
16147
+ }
16148
+ 96% {
16149
+ right: auto;
16150
+ left: 0;
16151
+ width: 0%;
16152
+ }
16153
+ 100% {
16154
+ right: auto;
16155
+ left: 0;
16156
+ width: 0%;
16157
+ }
16155
16158
  }
16156
-
16157
- .bx--file__state-container {
16158
- display: flex;
16159
- min-width: 1.5rem;
16160
- align-items: center;
16161
- justify-content: center;
16162
- padding-right: 1rem;
16159
+ @keyframes progress-linear {
16160
+ 0% {
16161
+ right: auto;
16162
+ left: 0;
16163
+ width: 0%;
16164
+ }
16165
+ 100% {
16166
+ right: auto;
16167
+ left: 0;
16168
+ width: 100%;
16169
+ }
16163
16170
  }
16164
- .bx--file__state-container .bx--loading__svg {
16165
- stroke: var(--cds-ui-05, #161616);
16171
+ @keyframes progress-stop {
16172
+ 0% {
16173
+ right: auto;
16174
+ left: 0;
16175
+ width: 0%;
16176
+ }
16177
+ 92% {
16178
+ right: auto;
16179
+ left: 0;
16180
+ width: 100%;
16181
+ }
16182
+ 100% {
16183
+ right: auto;
16184
+ left: 0;
16185
+ width: 100%;
16186
+ }
16166
16187
  }
16167
-
16168
- .bx--file__state-container .bx--file-complete {
16169
- cursor: pointer;
16170
- fill: var(--cds-interactive-04, #0f62fe);
16188
+ @keyframes loading-bar-stop {
16189
+ 0% {
16190
+ opacity: 1;
16191
+ }
16192
+ 92% {
16193
+ opacity: 1;
16194
+ }
16195
+ 100% {
16196
+ display: none;
16197
+ opacity: 0;
16198
+ }
16171
16199
  }
16172
- .bx--file__state-container .bx--file-complete:focus {
16173
- outline: 1px solid var(--cds-focus, #0f62fe);
16200
+ .c4p--loading-bar .c4p--loading-bar__inner {
16201
+ position: relative;
16202
+ width: 100%;
16203
+ height: 8px;
16204
+ padding: 0;
16205
+ border: none;
16206
+ background-color: var(--cds-hover-ui, #e5e5e5);
16207
+ -webkit-box-shadow: none;
16208
+ box-shadow: none;
16209
+ pointer-events: none;
16174
16210
  }
16175
- @media screen and (prefers-contrast) {
16176
- .bx--file__state-container .bx--file-complete:focus {
16177
- outline-style: dotted;
16178
- }
16211
+
16212
+ .c4p--loading-bar .c4p--loading-bar__inner:hover,
16213
+ .c4p--loading-bar .c4p--loading-bar__inner:focus,
16214
+ .c4p--loading-bar .c4p--loading-bar__inner:active {
16215
+ border: none;
16216
+ cursor: default;
16217
+ outline: none;
16179
16218
  }
16180
- .bx--file__state-container .bx--file-complete [data-icon-path=inner-path] {
16181
- fill: var(--cds-icon-03, #ffffff);
16182
- opacity: 1;
16219
+
16220
+ .c4p--loading-bar__preload {
16221
+ opacity: 0;
16183
16222
  }
16184
16223
 
16185
- .bx--file__state-container .bx--file-invalid {
16186
- width: 1rem;
16187
- height: 1rem;
16188
- fill: var(--cds-support-01, #da1e28);
16224
+ .c4p--loading-bar__progress {
16225
+ position: relative;
16226
+ height: 8px;
16227
+ transition: width 720ms cubic-bezier(0.4, 0.14, 0.3, 1);
16189
16228
  }
16190
16229
 
16191
- .bx--file__state-container .bx--file-close {
16192
- display: flex;
16193
- width: 1.5rem;
16194
- height: 1.5rem;
16195
- align-items: center;
16196
- justify-content: center;
16197
- padding: 0;
16198
- border: none;
16199
- background-color: transparent;
16200
- cursor: pointer;
16201
- fill: var(--cds-icon-01, #161616);
16230
+ .c4p--loading-bar__indicator-wrapper {
16231
+ display: flex;
16232
+ justify-content: flex-end;
16202
16233
  }
16203
- .bx--file__state-container .bx--file-close:focus {
16204
- outline: 2px solid var(--cds-focus, #0f62fe);
16205
- outline-offset: -2px;
16234
+
16235
+ .c4p--loading-bar__indicator {
16236
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
16237
+ font-weight: var(--cds-body-short-01-font-weight, 400);
16238
+ line-height: var(--cds-body-short-01-line-height, 1.28572);
16239
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
16240
+ padding-top: var(--cds-spacing-05, 1rem);
16241
+ padding-bottom: var(--cds-spacing-03, 0.5rem);
16242
+ color: var(--cds-text-01, #161616);
16206
16243
  }
16207
- @media screen and (prefers-contrast) {
16208
- .bx--file__state-container .bx--file-close:focus {
16209
- outline-style: dotted;
16210
- }
16244
+
16245
+ .c4p--loading-bar__small {
16246
+ height: 4px;
16211
16247
  }
16212
16248
 
16213
- .bx--file__state-container .bx--file-close svg path {
16214
- fill: var(--cds-icon-01, #161616);
16249
+ .c4p--loading-bar__small .c4p--loading-bar__progress {
16250
+ height: 4px;
16215
16251
  }
16216
16252
 
16217
- .bx--file__state-container .bx--inline-loading__animation {
16218
- margin-right: -0.5rem;
16253
+ .c4p--loading-bar__linear-stop {
16254
+ display: none;
16219
16255
  }
16220
16256
 
16221
- .bx--file__drop-container {
16222
- display: flex;
16223
- overflow: hidden;
16224
- height: 6rem;
16225
- align-items: flex-start;
16226
- justify-content: space-between;
16227
- padding: 1rem;
16228
- border: 1px dashed var(--cds-ui-04, #8d8d8d);
16257
+ .c4p--loading-bar__indefinite-stop {
16258
+ animation: 1800ms ease-in-out loading-bar-stop forwards;
16229
16259
  }
16230
16260
 
16231
- .bx--file__drop-container--drag-over {
16232
- background: none;
16233
- outline: 2px solid var(--cds-interactive-03, #0f62fe);
16234
- outline-offset: -2px;
16261
+ .c4p--loading-bar__stop-progress:before {
16262
+ position: absolute;
16263
+ top: 0;
16264
+ left: 0;
16265
+ width: 0%;
16266
+ height: 100%;
16267
+ animation: 1800ms ease-in-out progress-stop forwards;
16268
+ background-color: var(--cds-interactive-01, #0f62fe);
16269
+ content: "";
16235
16270
  }
16236
16271
 
16237
- /* stylelint-disable */
16238
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
16239
- .bx--file__selected-file {
16240
- outline: 1px solid transparent;
16241
- }
16272
+ .c4p--loading-bar__indefinite-progress:before {
16273
+ position: absolute;
16274
+ top: 0;
16275
+ left: 0;
16276
+ width: 0%;
16277
+ height: 100%;
16278
+ animation: 3000ms ease-in-out progress-indeterminate infinite;
16279
+ background-color: var(--cds-interactive-01, #0f62fe);
16280
+ content: "";
16242
16281
  }
16243
16282
 
16244
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
16245
- .bx--file__state-container .bx--file-close svg path {
16246
- fill: ButtonText;
16247
- }
16283
+ .c4p--loading-bar__linear-progress:before {
16284
+ position: absolute;
16285
+ top: 0;
16286
+ left: 0;
16287
+ width: 0%;
16288
+ height: 100%;
16289
+ animation: 1000ms ease-in-out progress-linear forwards;
16290
+ background-color: var(--cds-interactive-01, #0f62fe);
16291
+ content: "";
16248
16292
  }
16249
16293
 
16250
- /* stylelint-enable */
16251
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16252
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16253
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16254
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16255
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16256
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16257
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16258
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16259
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16260
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16261
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16262
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16263
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16264
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16265
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16266
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16267
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16268
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16269
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16270
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16271
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16272
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16273
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16274
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16275
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16276
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16277
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16278
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16279
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16280
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16281
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16282
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16283
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16284
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16285
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16286
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16287
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16288
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16289
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16290
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16291
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16292
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16293
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16294
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16295
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16296
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16297
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16298
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16299
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16300
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16301
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16302
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16303
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16304
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16305
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16306
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16307
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16308
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16309
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16310
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16311
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16312
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16313
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16314
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16315
16294
  /* stylelint-disable-line no-invalid-position-at-import-rule */
16316
16295
  /* stylelint-disable-line no-invalid-position-at-import-rule */
16317
16296
  /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -16324,6 +16303,65 @@ a.bx--side-nav__link--current::before {
16324
16303
  /* stylelint-disable-line no-invalid-position-at-import-rule */
16325
16304
  /* stylelint-disable-line no-invalid-position-at-import-rule */
16326
16305
  /* stylelint-disable-line no-invalid-position-at-import-rule */
16306
+ .modified-tabs .modified-tabs__tab-label {
16307
+ display: flex;
16308
+ width: 100%;
16309
+ align-items: flex-end;
16310
+ justify-content: space-between;
16311
+ }
16312
+
16313
+ .modified-tabs .bx--tabs__nav {
16314
+ /* overflow cannot be tweaked to fix tooltip */
16315
+ }
16316
+
16317
+ .modified-tabs__tab-new,
16318
+ .modified-tabs__tab {
16319
+ position: relative;
16320
+ display: inline-block;
16321
+ width: 100%;
16322
+ height: 100%;
16323
+ }
16324
+
16325
+ .modified-tabs__tab-new-img,
16326
+ .modified-tabs__tab-close {
16327
+ position: absolute;
16328
+ top: -var(--cds-spacing-04, 0.75rem);
16329
+ right: -var(--cds-spacing-05, 1rem);
16330
+ overflow: hidden;
16331
+ width: 2.5rem;
16332
+ height: 2.5rem;
16333
+ padding: var(--cds-spacing-04, 0.75rem);
16334
+ border: var(--cds-spacing-01, 0.125rem) solid transparent;
16335
+ background-color: transparent;
16336
+ border-radius: 0;
16337
+ cursor: pointer;
16338
+ transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
16339
+ }
16340
+
16341
+ .modified-tabs__tab-new-icon {
16342
+ display: flex;
16343
+ align-items: center;
16344
+ justify-content: center;
16345
+ padding: 0;
16346
+ margin-top: var(--cds-spacing-01, 0.125rem);
16347
+ }
16348
+
16349
+ .modified-tabs__tab-close:focus {
16350
+ border-color: var(--cds-interactive-01, #0f62fe);
16351
+ outline: none;
16352
+ }
16353
+
16354
+ .modified-tabs__tab-close:hover {
16355
+ background-color: var(--cds-hover-ui, #e5e5e5);
16356
+ }
16357
+
16358
+ .modified-tabs__tab-new-img {
16359
+ display: flex;
16360
+ align-items: center;
16361
+ justify-content: center;
16362
+ padding: 0;
16363
+ }
16364
+
16327
16365
  /* stylelint-disable-line no-invalid-position-at-import-rule */
16328
16366
  /* stylelint-disable-line no-invalid-position-at-import-rule */
16329
16367
  /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -16341,328 +16379,286 @@ a.bx--side-nav__link--current::before {
16341
16379
  /* stylelint-disable-line no-invalid-position-at-import-rule */
16342
16380
  /* stylelint-disable-line no-invalid-position-at-import-rule */
16343
16381
  /* stylelint-disable-line no-invalid-position-at-import-rule */
16344
- .c4p--import-modal .bx--modal-close {
16382
+ .bx--structured-list--selection .bx--structured-list-td,
16383
+ .bx--structured-list--selection .bx--structured-list-th {
16384
+ padding-right: 1rem;
16385
+ padding-left: 1rem;
16386
+ }
16387
+ .bx--structured-list--selection .bx--structured-list-td:first-child,
16388
+ .bx--structured-list--selection .bx--structured-list-th:first-child {
16389
+ padding-right: 1rem;
16390
+ padding-left: 1rem;
16391
+ }
16392
+
16393
+ .bx--structured-list-input {
16345
16394
  display: none;
16346
16395
  }
16347
16396
 
16348
- .c4p--import-modal .bx--modal-footer .bx--btn {
16349
- max-width: none;
16397
+ .bx--structured-list {
16398
+ box-sizing: border-box;
16399
+ padding: 0;
16400
+ border: 0;
16401
+ margin: 0;
16402
+ font-family: inherit;
16403
+ font-size: 100%;
16404
+ vertical-align: baseline;
16405
+ display: table;
16406
+ width: 100%;
16407
+ margin-bottom: 5rem;
16408
+ background-color: transparent;
16409
+ border-collapse: collapse;
16410
+ border-spacing: 0;
16411
+ overflow-x: auto;
16412
+ overflow-y: hidden;
16413
+ }
16414
+ .bx--structured-list *,
16415
+ .bx--structured-list *::before,
16416
+ .bx--structured-list *::after {
16417
+ box-sizing: inherit;
16418
+ }
16419
+ .bx--structured-list.bx--structured-list--condensed .bx--structured-list-td, .bx--structured-list.bx--structured-list--condensed .bx--structured-list-th {
16420
+ padding: 0.5rem;
16421
+ }
16422
+ .bx--structured-list .bx--structured-list-row .bx--structured-list-td:first-of-type,
16423
+ .bx--structured-list .bx--structured-list-row .bx--structured-list-th:first-of-type {
16424
+ padding-left: 1rem;
16425
+ }
16426
+ .bx--structured-list.bx--structured-list--flush .bx--structured-list-row .bx--structured-list-td, .bx--structured-list.bx--structured-list--flush .bx--structured-list-row .bx--structured-list-th, .bx--structured-list.bx--structured-list--flush .bx--structured-list-row .bx--structured-list-td:first-of-type, .bx--structured-list.bx--structured-list--flush .bx--structured-list-row .bx--structured-list-th:first-of-type {
16427
+ padding-right: 1rem;
16428
+ padding-left: 0;
16429
+ }
16430
+
16431
+ .bx--structured-list-row {
16432
+ display: table-row;
16433
+ border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
16434
+ transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
16435
+ }
16436
+
16437
+ .bx--structured-list--selection .bx--structured-list-row:hover:not(.bx--structured-list-row--header-row):not(.bx--structured-list-row--selected) {
16438
+ border-bottom: 1px solid var(--cds-hover-row, #e5e5e5);
16439
+ background-color: var(--cds-hover-row, #e5e5e5);
16440
+ cursor: pointer;
16350
16441
  }
16351
16442
 
16352
- .c4p--import-modal.bx--modal .bx--modal-content {
16353
- padding-right: var(--cds-spacing-05, 1rem);
16443
+ .bx--structured-list-row.bx--structured-list-row--selected {
16444
+ background-color: var(--cds-selected-ui, #e0e0e0);
16354
16445
  }
16355
16446
 
16356
- .bx--file .bx--file-container,
16357
- .bx--file ~ .bx--file-container {
16358
- margin-top: 0;
16447
+ .bx--structured-list-row.bx--structured-list-row--header-row {
16448
+ border-bottom: 1px solid var(--cds-selected-ui, #e0e0e0);
16449
+ cursor: inherit;
16359
16450
  }
16360
16451
 
16361
- .bx--modal-container--sm .bx--modal-header {
16362
- padding-right: calc(20% - var(--cds-spacing-05, 1rem));
16452
+ .bx--structured-list-row:focus:not(.bx--structured-list-row--header-row) {
16453
+ outline: 2px solid var(--cds-focus, #0f62fe);
16454
+ outline-offset: -2px;
16455
+ }
16456
+ @media screen and (prefers-contrast) {
16457
+ .bx--structured-list-row:focus:not(.bx--structured-list-row--header-row) {
16458
+ outline-style: dotted;
16459
+ }
16363
16460
  }
16364
16461
 
16365
- .c4p--import-modal__input-group {
16366
- display: flex;
16462
+ .bx--structured-list--selection .bx--structured-list-row:hover:not(.bx--structured-list-row--header-row) > .bx--structured-list-td,
16463
+ .bx--structured-list-row.bx--structured-list-row--selected > .bx--structured-list-td {
16464
+ color: var(--cds-text-01, #161616);
16367
16465
  }
16368
16466
 
16369
- .c4p--import-modal__import-button.bx--btn {
16370
- margin-left: var(--cds-spacing-03, 0.5rem);
16467
+ .bx--structured-list--selection .bx--structured-list-row:hover:not(.bx--structured-list-row--header-row) > .bx--structured-list-td {
16468
+ border-top: 1px solid var(--cds-ui-01, #f4f4f4);
16371
16469
  }
16372
16470
 
16373
- .c4p--import-modal__file-container {
16374
- width: 100%;
16471
+ .bx--structured-list-thead {
16472
+ display: table-header-group;
16473
+ vertical-align: middle;
16375
16474
  }
16376
16475
 
16377
- .c4p--import-modal .c4p--import-modal__file-drop-header,
16378
- .c4p--import-modal .c4p--import-modal__label {
16379
- margin-bottom: var(--cds-spacing-03, 0.5rem);
16476
+ .bx--structured-list-th {
16477
+ box-sizing: border-box;
16478
+ padding: 0;
16479
+ border: 0;
16480
+ margin: 0;
16481
+ font-family: inherit;
16482
+ font-size: 100%;
16483
+ vertical-align: baseline;
16484
+ padding: 1rem 0.5rem 0.5rem 0.5rem;
16380
16485
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
16381
16486
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
16382
16487
  line-height: var(--cds-productive-heading-01-line-height, 1.28572);
16383
16488
  letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
16489
+ display: table-cell;
16490
+ height: 2.5rem;
16491
+ color: var(--cds-text-01, #161616);
16492
+ font-weight: 600;
16493
+ text-align: left;
16494
+ text-transform: none;
16495
+ vertical-align: top;
16384
16496
  }
16385
-
16386
- .c4p--import-modal__helper-text {
16387
- margin-top: var(--cds-spacing-06, 1.5rem);
16388
- margin-bottom: var(--cds-spacing-03, 0.5rem);
16389
- font-size: var(--cds-helper-text-01-font-size, 0.75rem);
16390
- line-height: var(--cds-helper-text-01-line-height, 1.33333);
16391
- letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
16497
+ .bx--structured-list-th *,
16498
+ .bx--structured-list-th *::before,
16499
+ .bx--structured-list-th *::after {
16500
+ box-sizing: inherit;
16392
16501
  }
16393
16502
 
16394
- .c4p--import-modal__body {
16395
- padding-right: calc(20% - var(--cds-spacing-05, 1rem));
16396
- margin-bottom: var(--cds-spacing-06, 1.5rem);
16503
+ .bx--structured-list-tbody {
16504
+ display: table-row-group;
16505
+ vertical-align: middle;
16397
16506
  }
16398
16507
 
16399
- .c4p--import-modal .bx--file__selected-file {
16400
- max-width: none;
16401
- background: var(--cds-ui-02, #ffffff);
16508
+ .bx--structured-list-td {
16509
+ box-sizing: border-box;
16510
+ padding: 0;
16511
+ border: 0;
16512
+ margin: 0;
16513
+ font-family: inherit;
16514
+ font-size: 100%;
16515
+ vertical-align: baseline;
16516
+ font-size: var(--cds-body-long-01-font-size, 0.875rem);
16517
+ font-weight: var(--cds-body-long-01-font-weight, 400);
16518
+ line-height: var(--cds-body-long-01-line-height, 1.42857);
16519
+ letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
16520
+ padding: 1rem 0.5rem 1.5rem 0.5rem;
16521
+ position: relative;
16522
+ display: table-cell;
16523
+ max-width: 36rem;
16524
+ color: var(--cds-text-02, #525252);
16525
+ transition: color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
16526
+ }
16527
+ .bx--structured-list-td *,
16528
+ .bx--structured-list-td *::before,
16529
+ .bx--structured-list-td *::after {
16530
+ box-sizing: inherit;
16402
16531
  }
16403
16532
 
16404
- .c4p--import-modal .bx--file {
16405
- margin-bottom: var(--cds-spacing-05, 1rem);
16533
+ .bx--structured-list-content--nowrap {
16534
+ white-space: nowrap;
16406
16535
  }
16407
16536
 
16408
- .c4p--import-modal .bx--text-input:disabled {
16409
- background: var(--cds-ui-02, #ffffff);
16537
+ .bx--structured-list-svg {
16538
+ display: inline-block;
16539
+ fill: transparent;
16540
+ transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
16541
+ vertical-align: middle;
16410
16542
  }
16411
16543
 
16412
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16413
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16414
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16415
- @keyframes progress-indeterminate {
16416
- 0% {
16417
- right: auto;
16418
- left: 0;
16419
- width: 0%;
16420
- }
16421
- 20% {
16422
- right: auto;
16423
- left: 0;
16424
- width: 100%;
16425
- }
16426
- 28% {
16427
- right: 0;
16428
- left: auto;
16429
- width: 100%;
16430
- }
16431
- 51% {
16432
- right: 0;
16433
- left: auto;
16434
- width: 0%;
16435
- }
16436
- 58% {
16437
- right: 0;
16438
- left: auto;
16439
- width: 0%;
16440
- }
16441
- 82% {
16442
- right: 0;
16443
- left: auto;
16444
- width: 100%;
16445
- }
16446
- 83% {
16447
- right: auto;
16448
- left: 0;
16449
- width: 100%;
16450
- }
16451
- 96% {
16452
- right: auto;
16453
- left: 0;
16454
- width: 0%;
16455
- }
16456
- 100% {
16457
- right: auto;
16458
- left: 0;
16459
- width: 0%;
16460
- }
16544
+ .bx--structured-list-input:checked + .bx--structured-list-row .bx--structured-list-svg,
16545
+ .bx--structured-list-input:checked + .bx--structured-list-td .bx--structured-list-svg {
16546
+ fill: var(--cds-icon-01, #161616);
16461
16547
  }
16462
- @keyframes progress-linear {
16463
- 0% {
16464
- right: auto;
16465
- left: 0;
16466
- width: 0%;
16467
- }
16468
- 100% {
16469
- right: auto;
16470
- left: 0;
16471
- width: 100%;
16472
- }
16548
+
16549
+ .bx--structured-list.bx--skeleton .bx--structured-list-th:first-child {
16550
+ width: 8%;
16473
16551
  }
16474
- @keyframes progress-stop {
16475
- 0% {
16476
- right: auto;
16477
- left: 0;
16478
- width: 0%;
16479
- }
16480
- 92% {
16481
- right: auto;
16482
- left: 0;
16483
- width: 100%;
16484
- }
16485
- 100% {
16486
- right: auto;
16487
- left: 0;
16488
- width: 100%;
16489
- }
16552
+ .bx--structured-list.bx--skeleton .bx--structured-list-th:nth-child(3n+2) {
16553
+ width: 30%;
16490
16554
  }
16491
- @keyframes loading-bar-stop {
16492
- 0% {
16493
- opacity: 1;
16494
- }
16495
- 92% {
16496
- opacity: 1;
16497
- }
16498
- 100% {
16499
- display: none;
16500
- opacity: 0;
16501
- }
16555
+ .bx--structured-list.bx--skeleton .bx--structured-list-th:nth-child(3n+3) {
16556
+ width: 15%;
16502
16557
  }
16503
- .c4p--loading-bar .c4p--loading-bar__inner {
16558
+ .bx--structured-list.bx--skeleton span {
16504
16559
  position: relative;
16505
- width: 100%;
16506
- height: 8px;
16507
16560
  padding: 0;
16508
16561
  border: none;
16509
- background-color: var(--cds-hover-ui, #e5e5e5);
16510
- -webkit-box-shadow: none;
16562
+ background: var(--cds-skeleton-01, #e5e5e5);
16511
16563
  box-shadow: none;
16512
16564
  pointer-events: none;
16565
+ display: block;
16566
+ width: 75%;
16567
+ height: 1rem;
16513
16568
  }
16514
-
16515
- .c4p--loading-bar .c4p--loading-bar__inner:hover,
16516
- .c4p--loading-bar .c4p--loading-bar__inner:focus,
16517
- .c4p--loading-bar .c4p--loading-bar__inner:active {
16569
+ .bx--structured-list.bx--skeleton span:hover, .bx--structured-list.bx--skeleton span:focus, .bx--structured-list.bx--skeleton span:active {
16518
16570
  border: none;
16519
16571
  cursor: default;
16520
16572
  outline: none;
16521
16573
  }
16522
-
16523
- .c4p--loading-bar__preload {
16524
- opacity: 0;
16525
- }
16526
-
16527
- .c4p--loading-bar__progress {
16528
- position: relative;
16529
- height: 8px;
16530
- transition: width 720ms cubic-bezier(0.4, 0.14, 0.3, 1);
16531
- }
16532
-
16533
- .c4p--loading-bar__indicator-wrapper {
16534
- display: flex;
16535
- justify-content: flex-end;
16536
- }
16537
-
16538
- .c4p--loading-bar__indicator {
16539
- font-size: var(--cds-body-short-01-font-size, 0.875rem);
16540
- font-weight: var(--cds-body-short-01-font-weight, 400);
16541
- line-height: var(--cds-body-short-01-line-height, 1.28572);
16542
- letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
16543
- padding-top: var(--cds-spacing-05, 1rem);
16544
- padding-bottom: var(--cds-spacing-03, 0.5rem);
16545
- color: var(--cds-text-01, #161616);
16574
+ .bx--structured-list.bx--skeleton span::before {
16575
+ position: absolute;
16576
+ top: 0;
16577
+ left: 0;
16578
+ width: 100%;
16579
+ height: 100%;
16580
+ animation: 3000ms ease-in-out skeleton infinite;
16581
+ background: var(--cds-skeleton-02, #c6c6c6);
16582
+ content: "";
16583
+ will-change: transform-origin, transform, opacity;
16546
16584
  }
16547
-
16548
- .c4p--loading-bar__small {
16549
- height: 4px;
16585
+ @media (prefers-reduced-motion: reduce) {
16586
+ .bx--structured-list.bx--skeleton span::before {
16587
+ animation: none;
16588
+ }
16550
16589
  }
16551
16590
 
16552
- .c4p--loading-bar__small .c4p--loading-bar__progress {
16553
- height: 4px;
16591
+ .bx--structured-list.bx--structured-list--selection.bx--skeleton .bx--structured-list-th:first-child {
16592
+ width: 5%;
16554
16593
  }
16555
-
16556
- .c4p--loading-bar__linear-stop {
16594
+ .bx--structured-list.bx--structured-list--selection.bx--skeleton .bx--structured-list-th:first-child span {
16557
16595
  display: none;
16558
16596
  }
16559
16597
 
16560
- .c4p--loading-bar__indefinite-stop {
16561
- animation: 1800ms ease-in-out loading-bar-stop forwards;
16598
+ @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
16599
+ .bx--structured-list-input:checked + .bx--structured-list-td .bx--structured-list-svg {
16600
+ fill: ButtonText;
16601
+ }
16562
16602
  }
16563
16603
 
16564
- .c4p--loading-bar__stop-progress:before {
16565
- position: absolute;
16566
- top: 0;
16567
- left: 0;
16568
- width: 0%;
16569
- height: 100%;
16570
- animation: 1800ms ease-in-out progress-stop forwards;
16571
- background-color: var(--cds-interactive-01, #0f62fe);
16572
- content: "";
16604
+ .c4p--add-select__header {
16605
+ padding: var(--cds-spacing-05, 1rem);
16606
+ padding-bottom: 0;
16607
+ border-top: 1px solid var(--cds-ui-03, #e0e0e0);
16573
16608
  }
16574
16609
 
16575
- .c4p--loading-bar__indefinite-progress:before {
16576
- position: absolute;
16577
- top: 0;
16578
- left: 0;
16579
- width: 0%;
16580
- height: 100%;
16581
- animation: 3000ms ease-in-out progress-indeterminate infinite;
16582
- background-color: var(--cds-interactive-01, #0f62fe);
16583
- content: "";
16610
+ .c4p--add-select__body {
16611
+ padding: var(--cds-spacing-05, 1rem);
16584
16612
  }
16585
16613
 
16586
- .c4p--loading-bar__linear-progress:before {
16587
- position: absolute;
16588
- top: 0;
16589
- left: 0;
16590
- width: 0%;
16591
- height: 100%;
16592
- animation: 1000ms ease-in-out progress-linear forwards;
16593
- background-color: var(--cds-interactive-01, #0f62fe);
16594
- content: "";
16614
+ .c4p--add-select__items-label {
16615
+ margin-right: var(--cds-spacing-03, 0.5rem);
16595
16616
  }
16596
-
16597
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16598
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16599
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16600
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16601
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16602
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16603
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16604
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16605
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16606
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16607
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16608
- /* stylelint-disable-line no-invalid-position-at-import-rule */
16609
- .modified-tabs .modified-tabs__tab-label {
16617
+ .c4p--add-select__items-label-container {
16610
16618
  display: flex;
16611
- width: 100%;
16612
- align-items: flex-end;
16613
- justify-content: space-between;
16619
+ align-items: center;
16620
+ margin-top: var(--cds-spacing-05, 1rem);
16621
+ margin-bottom: var(--cds-spacing-03, 0.5rem);
16614
16622
  }
16615
16623
 
16616
- .modified-tabs .bx--tabs__nav {
16617
- /* overflow cannot be tweaked to fix tooltip */
16624
+ .c4p--add-select__selections {
16625
+ border-top: 1px solid var(--cds-ui-03, #e0e0e0);
16618
16626
  }
16619
16627
 
16620
- .modified-tabs__tab-new,
16621
- .modified-tabs__tab {
16622
- position: relative;
16623
- display: inline-block;
16624
- width: 100%;
16625
- height: 100%;
16628
+ .c4p--add-select__influencer-header {
16629
+ display: flex;
16630
+ padding: var(--cds-spacing-06, 1.5rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-03, 0.5rem) var(--cds-spacing-05, 1rem);
16631
+ border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
16632
+ }
16633
+ .c4p--add-select__influencer-header .c4p--add-select__influencer-title {
16634
+ font-size: var(--cds-productive-heading-02-font-size, 1rem);
16635
+ font-weight: var(--cds-productive-heading-02-font-weight, 600);
16636
+ line-height: var(--cds-productive-heading-02-line-height, 1.375);
16637
+ letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
16626
16638
  }
16627
16639
 
16628
- .modified-tabs__tab-new-img,
16629
- .modified-tabs__tab-close {
16630
- position: absolute;
16631
- top: -var(--cds-spacing-04, 0.75rem);
16632
- right: -var(--cds-spacing-05, 1rem);
16633
- overflow: hidden;
16634
- width: 2.5rem;
16635
- height: 2.5rem;
16636
- padding: var(--cds-spacing-04, 0.75rem);
16637
- border: var(--cds-spacing-01, 0.125rem) solid transparent;
16638
- background-color: transparent;
16639
- border-radius: 0;
16640
- cursor: pointer;
16641
- transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
16640
+ .c4p--add-select__influencer-title {
16641
+ margin-right: var(--cds-spacing-03, 0.5rem);
16642
16642
  }
16643
16643
 
16644
- .modified-tabs__tab-new-icon {
16645
- display: flex;
16646
- align-items: center;
16647
- justify-content: center;
16648
- padding: 0;
16649
- margin-top: var(--cds-spacing-01, 0.125rem);
16644
+ .c4p--add-select__influencer-body {
16645
+ padding: var(--cds-spacing-05, 1rem);
16650
16646
  }
16651
16647
 
16652
- .modified-tabs__tab-close:focus {
16653
- border-color: var(--cds-interactive-01, #0f62fe);
16654
- outline: none;
16648
+ .c4p--add-select .c4p--tearsheet .c4p--tearsheet__influencer {
16649
+ max-width: 29rem;
16650
+ flex: 0 0 50%;
16655
16651
  }
16656
16652
 
16657
- .modified-tabs__tab-close:hover {
16658
- background-color: var(--cds-hover-ui, #e5e5e5);
16653
+ .c4p--add-select .c4p--add-select__items-label {
16654
+ font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
16655
+ font-weight: var(--cds-productive-heading-01-font-weight, 600);
16656
+ line-height: var(--cds-productive-heading-01-line-height, 1.28572);
16657
+ letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
16659
16658
  }
16660
16659
 
16661
- .modified-tabs__tab-new-img {
16662
- display: flex;
16663
- align-items: center;
16664
- justify-content: center;
16665
- padding: 0;
16660
+ .c4p--add-select .bx--modal-container--sm .bx--modal-content p {
16661
+ padding-right: 0;
16666
16662
  }
16667
16663
 
16668
16664
  /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -18343,14 +18339,9 @@ a.bx--side-nav__link--current::before {
18343
18339
  white-space: nowrap;
18344
18340
  }
18345
18341
  .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-container.c4p--breadcrumb-with-overflow__breadcrumb-container-with-items {
18346
- display: none;
18342
+ display: inline-flex;
18347
18343
  width: 100%;
18348
18344
  }
18349
- @media (min-width: 42rem) {
18350
- .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-container.c4p--breadcrumb-with-overflow__breadcrumb-container-with-items {
18351
- display: inline-flex;
18352
- }
18353
- }
18354
18345
  .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-container .bx--breadcrumb {
18355
18346
  width: 100%;
18356
18347
  flex-wrap: nowrap;
@@ -18365,11 +18356,24 @@ a.bx--side-nav__link--current::before {
18365
18356
  pointer-events: none;
18366
18357
  visibility: hidden;
18367
18358
  }
18359
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-back {
18360
+ display: none;
18361
+ }
18362
+ @media (max-width: 41.98rem) {
18363
+ .c4p--breadcrumb-with-overflow .bx--breadcrumb-item {
18364
+ display: none;
18365
+ }
18366
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-back,
18368
18367
  .c4p--breadcrumb-with-overflow .bx--breadcrumb-item:last-child {
18369
- display: inline;
18368
+ display: inline-flex;
18369
+ vertical-align: middle;
18370
+ }
18371
+ }
18372
+ .c4p--breadcrumb-with-overflow .bx--breadcrumb-item:last-child {
18373
+ display: inline-flex;
18370
18374
  }
18371
18375
  .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__displayed-breadcrumb:last-child {
18372
- display: inline;
18376
+ display: inline-flex;
18373
18377
  overflow: hidden;
18374
18378
  }
18375
18379
  .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__displayed-breadcrumb:last-child .bx--link {
@@ -18381,15 +18385,6 @@ a.bx--side-nav__link--current::before {
18381
18385
  .c4p--breadcrumb-with-overflow .bx--link {
18382
18386
  max-height: 18px;
18383
18387
  }
18384
- .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-back-button.bx--btn.bx--btn--icon-only.bx--tooltip__trigger {
18385
- display: inline-flex;
18386
- margin-top: calc(-1 * var(--cds-spacing-04, 0.75rem));
18387
- }
18388
- @media (min-width: 42rem) {
18389
- .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-back-button.bx--btn.bx--btn--icon-only.bx--tooltip__trigger {
18390
- display: none;
18391
- }
18392
- }
18393
18388
 
18394
18389
  /* stylelint-disable-line no-invalid-position-at-import-rule */
18395
18390
  /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -19197,7 +19192,7 @@ a.bx--side-nav__link--current::before {
19197
19192
  height: var(--cds-spacing-02, 0.25rem);
19198
19193
  }
19199
19194
  .c4p--page-header .c4p--page-header__breadcrumb-row:not(.c4p--page-header__breadcrumb-row--has-action-bar) {
19200
- margin-bottom: calc(-1 * var(--cds-spacing-03, 0.5rem));
19195
+ min-height: var(--cds-spacing-07, 2rem);
19201
19196
  }
19202
19197
  .c4p--page-header .c4p--page-header__breadcrumb-row--container {
19203
19198
  display: flex;
@@ -19228,7 +19223,7 @@ a.bx--side-nav__link--current::before {
19228
19223
  transform: translateX(-50%) scaleX(1);
19229
19224
  transition: all 150ms ease-out;
19230
19225
  }
19231
- .c4p--page-header .c4p--page-header__breadcrumb-row--next-to-tabs::after,
19226
+ .c4p--page-header .c4p--page-header__breadcrumb-row--next-to-tabs:not(.c4p--page-header__has-page-actions-without-action-bar)::after,
19232
19227
  .c4p--page-header .c4p--page-header__breadcrumb-row--has-action-bar::after {
19233
19228
  /* creates a full width box shadow without causing scroll */
19234
19229
  box-shadow: 25vw 1px 0 0 var(--cds-ui-03, #e0e0e0), -25vw 1px 0 0 var(--cds-ui-03, #e0e0e0);
@@ -19416,8 +19411,6 @@ a.bx--side-nav__link--current::before {
19416
19411
  top: var(--c4p--page-header--breadcrumb-top);
19417
19412
  }
19418
19413
  .c4p--page-header .c4p--page-header__title-column {
19419
- overflow: hidden;
19420
- /* required for ellipsis in title */
19421
19414
  min-height: 40px;
19422
19415
  flex: 0 0 100%;
19423
19416
  }
@@ -19432,10 +19425,17 @@ a.bx--side-nav__link--current::before {
19432
19425
  font-weight: var(--cds-productive-heading-04-font-weight, 400);
19433
19426
  line-height: var(--cds-productive-heading-04-line-height, 1.28572);
19434
19427
  letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
19435
- overflow: hidden;
19428
+ overflow-x: hidden;
19436
19429
  text-overflow: ellipsis;
19437
19430
  white-space: nowrap;
19438
19431
  }
19432
+ .c4p--page-header .c4p--page-header__title .c4p--inline-edit__value {
19433
+ transform: translateY(-2px);
19434
+ }
19435
+ .c4p--page-header .c4p--page-header__title--editable {
19436
+ display: flex;
19437
+ overflow: visible;
19438
+ }
19439
19439
  .c4p--page-header .c4p--page-header__title-skeleton {
19440
19440
  height: var(--cds-spacing-07, 2rem);
19441
19441
  }
@@ -20199,6 +20199,23 @@ a.bx--side-nav__link--current::before {
20199
20199
  /* stylelint-disable-line no-invalid-position-at-import-rule */
20200
20200
  /* stylelint-disable-line no-invalid-position-at-import-rule */
20201
20201
  /* stylelint-disable-line no-invalid-position-at-import-rule */
20202
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
20203
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
20204
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
20205
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
20206
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
20207
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
20208
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
20209
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
20210
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
20211
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
20212
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
20213
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
20214
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
20215
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
20216
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
20217
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
20218
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
20202
20219
  @keyframes rotating {
20203
20220
  0% {
20204
20221
  transform: scaleY(-1) rotate(360deg);
@@ -22554,99 +22571,147 @@ a.bx--side-nav__link--current::before {
22554
22571
  /* stylelint-disable-line no-invalid-position-at-import-rule */
22555
22572
  /* stylelint-disable-line no-invalid-position-at-import-rule */
22556
22573
  /* stylelint-disable-line no-invalid-position-at-import-rule */
22557
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit {
22574
+ .c4p--cancelable-text-edit {
22558
22575
  --size: var(--cds-spacing-08, 2.5rem);
22559
- position: relative;
22560
- width: 100%;
22561
- min-height: var(--size);
22576
+ --icon-size: var(--cds-spacing-05, 1rem);
22577
+ }
22578
+
22579
+ .c4p--cancelable-text-edit--sm {
22580
+ --size: var(--cds-spacing-07, 2rem);
22581
+ --icon-size: var(--cds-spacing-05, 1rem);
22562
22582
  }
22563
22583
 
22564
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit--xl {
22565
- --size: $spacing-09;
22584
+ .c4p--cancelable-text-edit--lg {
22585
+ --size: var(--cds-spacing-09, 3rem);
22586
+ --icon-size: var(--cds-spacing-05, 1rem);
22566
22587
  }
22567
22588
 
22568
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__input {
22589
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__main {
22590
+ position: relative;
22591
+ display: inline-flex;
22592
+ min-height: var(--size);
22593
+ vertical-align: top;
22594
+ }
22595
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__input {
22569
22596
  height: var(--size);
22570
22597
  padding-right: calc(2 * var(--size));
22571
22598
  }
22572
-
22573
- .c4p--cancelable-text-edit__buttons {
22599
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__buttons {
22574
22600
  position: absolute;
22575
22601
  top: 0;
22576
22602
  right: 0;
22603
+ display: flex;
22604
+ flex-direction: column;
22577
22605
  }
22578
-
22579
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert,
22580
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save {
22581
- width: var(--size);
22582
- height: var(--size);
22583
- min-height: var(--size);
22606
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__buttons-inner {
22607
+ display: flex;
22608
+ }
22609
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert,
22610
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save {
22611
+ border: 1px solid transparent;
22584
22612
  }
22585
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert:hover,
22586
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save:hover {
22613
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert:hover,
22614
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save:hover {
22587
22615
  border-color: var(--cds-hover-field, #e5e5e5);
22588
- border-bottom: 1px solid transparent;
22616
+ border-bottom-color: transparent;
22589
22617
  background-clip: content-box;
22590
22618
  box-shadow: initial;
22619
+ outline: initial;
22591
22620
  }
22592
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert:focus:active, .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert:focus,
22593
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save:focus:active,
22594
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save:focus {
22595
- border-width: 2px;
22621
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert:focus:active, .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert:focus,
22622
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save:focus:active,
22623
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save:focus {
22596
22624
  border-color: var(--cds-focus, #0f62fe);
22597
- box-shadow: initial;
22625
+ box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
22626
+ outline: initial;
22598
22627
  }
22599
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert:focus:active:hover,
22600
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save:focus:active:hover {
22601
- padding: 1px;
22628
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert:focus:active:hover,
22629
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save:focus:active:hover {
22630
+ box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe), inset 0 0 0 2px var(--cds-field-01, #f4f4f4);
22602
22631
  }
22603
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert::before,
22604
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save::before {
22632
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert::before,
22633
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save::before {
22605
22634
  background-color: transparent;
22606
22635
  }
22607
-
22608
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit--invalid .bx--text-input-wrapper ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__revert,
22609
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit--invalid .bx--text-input-wrapper ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__save,
22610
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input-wrapper:focus-within ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__revert,
22611
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input-wrapper:focus-within ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__save {
22612
- border: 2px solid transparent;
22636
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert[disabled],
22637
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save[disabled] {
22638
+ border-color: transparent;
22639
+ }
22640
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit--invalid .c4p--cancelable-text-edit__save:hover,
22641
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit--invalid .c4p--cancelable-text-edit__revert:hover {
22642
+ border: 1px solid transparent;
22643
+ box-shadow: inset 0 1px 0 var(--cds-support-01, #da1e28), inset 0 -1px 0 var(--cds-support-01, #da1e28);
22613
22644
  }
22614
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit--invalid .bx--text-input-wrapper ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__revert:hover,
22615
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit--invalid .bx--text-input-wrapper ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__save:hover,
22616
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input-wrapper:focus-within ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__revert:hover,
22617
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input-wrapper:focus-within ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__save:hover {
22618
- border-top: 2px solid transparent;
22619
- border-bottom: 2px solid transparent;
22645
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit--invalid .c4p--cancelable-text-edit__save:hover {
22646
+ box-shadow: inset 0 1px 0 var(--cds-support-01, #da1e28), inset 0 -1px 0 var(--cds-support-01, #da1e28), inset -1px 0 0 var(--cds-support-01, #da1e28);
22647
+ }
22648
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input-wrapper:focus-within ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__revert,
22649
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input-wrapper:focus-within ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__save {
22650
+ border: 1px solid transparent;
22651
+ box-shadow: inset 0 1px 0 var(--cds-focus, #0f62fe), inset 0 -1px 0 var(--cds-focus, #0f62fe);
22652
+ }
22653
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input-wrapper:focus-within ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__revert:hover,
22654
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input-wrapper:focus-within ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__save:hover {
22620
22655
  background-clip: content-box;
22621
22656
  }
22622
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit--invalid .bx--text-input-wrapper ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__save,
22623
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input-wrapper:focus-within ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__save {
22624
- border-right: 2px solid transparent;
22657
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input-wrapper:focus-within ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__save {
22658
+ box-shadow: inset 0 1px 0 var(--cds-focus, #0f62fe), inset 0 -1px 0 var(--cds-focus, #0f62fe), inset -1px 0 0 var(--cds-focus, #0f62fe);
22625
22659
  }
22626
-
22627
- .c4p--cancelable-text-edit--invalid > .bx--form-requirement,
22628
- .c4p--cancelable-text-edit--warn > .bx--form-requirement {
22660
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert,
22661
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save {
22662
+ display: flex;
22663
+ width: var(--size);
22664
+ height: var(--size);
22665
+ min-height: var(--size);
22666
+ flex-direction: column;
22667
+ align-items: center;
22668
+ justify-content: center;
22669
+ padding: 0;
22670
+ }
22671
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert svg,
22672
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save svg {
22673
+ width: var(--icon-size);
22674
+ height: var(--icon-size);
22675
+ }
22676
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit--invalid .bx--form-requirement, .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit--warn .bx--form-requirement {
22629
22677
  display: block;
22630
22678
  max-height: initial;
22679
+ }
22680
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit--invalid.c4p--cancelable-text-edit--inline .bx--form-requirement, .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit--warn.c4p--cancelable-text-edit--inline .bx--form-requirement {
22631
22681
  margin-left: calc(20% + 1.25rem);
22632
22682
  }
22633
-
22634
- .c4p--cancelable-text-edit--invalid > .bx--form-requirement {
22683
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit--invalid .bx--form-requirement {
22684
+ display: block;
22685
+ overflow: visible;
22635
22686
  color: var(--cds-text-error, #da1e28);
22636
22687
  }
22637
-
22638
- .c4p--cancelable-text-edit .bx--text-input {
22688
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input {
22639
22689
  padding-right: calc(2 * var(--size));
22640
22690
  }
22641
-
22642
- .c4p--cancelable-text-edit .bx--text-input--invalid {
22691
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input--invalid {
22643
22692
  padding-right: calc(3 * var(--size));
22644
22693
  }
22645
-
22646
- .c4p--cancelable-text-edit .bx--text-input__invalid-icon {
22694
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input__invalid-icon {
22647
22695
  margin-right: var(--cds-spacing-11, 5rem);
22648
22696
  }
22649
22697
 
22698
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
22699
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
22700
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
22701
+ .c4p--inline-edit {
22702
+ display: inline-flex;
22703
+ align-content: center;
22704
+ }
22705
+
22706
+ .c4p--inline-edit .c4p--inline-edit__value {
22707
+ display: flex;
22708
+ align-items: center;
22709
+ }
22710
+
22711
+ .c4p--inline-edit .c4p--inline-edit__button {
22712
+ margin-left: var(--cds-spacing-03, 0.5rem);
22713
+ }
22714
+
22650
22715
  /* stylelint-disable-line no-invalid-position-at-import-rule */
22651
22716
  /* stylelint-disable-line no-invalid-position-at-import-rule */
22652
22717
  /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -27691,8 +27756,8 @@ th .bx--table-sort__flex {
27691
27756
  z-index: 1;
27692
27757
  top: 50%;
27693
27758
  right: 1rem;
27694
- cursor: pointer;
27695
27759
  fill: var(--cds-icon-primary, #161616);
27760
+ pointer-events: none;
27696
27761
  transform: translateY(-50%);
27697
27762
  }
27698
27763