@ory/elements-react 1.1.0 → 1.2.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/index.d.mts +229 -51
  2. package/dist/index.d.ts +229 -51
  3. package/dist/index.js +24522 -1954
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +24518 -1959
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/theme/default/index.css +1696 -1621
  8. package/dist/theme/default/index.css.map +1 -1
  9. package/dist/theme/default/index.d.mts +1 -6
  10. package/dist/theme/default/index.d.ts +1 -6
  11. package/dist/theme/default/index.js +24888 -2271
  12. package/dist/theme/default/index.js.map +1 -1
  13. package/dist/theme/default/index.mjs +25427 -2810
  14. package/dist/theme/default/index.mjs.map +1 -1
  15. package/package.json +3 -2
  16. package/tailwind/generated/variables.css +0 -3
  17. package/babel.config.js +0 -10
package/dist/theme/default/index.css CHANGED
@@ -1,1765 +1,1840 @@
1
1
  /* src/theme/default/global.css */
2
2
  @layer properties;
3
- .ory-elements *,
4
- .ory-elements ::after,
5
- .ory-elements ::before,
6
- .ory-elements ::backdrop,
7
- .ory-elements ::file-selector-button {
8
- box-sizing: border-box;
9
- margin: 0;
10
- padding: 0;
11
- border: 0 solid;
12
- }
13
- .ory-elements,
14
- :host {
15
- line-height: 1.5;
16
- -webkit-text-size-adjust: 100%;
17
- tab-size: 4;
18
- font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
19
- font-feature-settings: var(--default-font-feature-settings, normal);
20
- font-variation-settings: var(--default-font-variation-settings, normal);
21
- -webkit-tap-highlight-color: transparent;
22
- }
23
- .ory-elements hr {
24
- height: 0;
25
- color: inherit;
26
- border-top-width: 1px;
27
- }
28
- .ory-elements abbr:where([title]) {
29
- -webkit-text-decoration: underline dotted;
30
- text-decoration: underline dotted;
31
- }
32
- .ory-elements h1,
33
- .ory-elements h2,
34
- .ory-elements h3,
35
- .ory-elements h4,
36
- .ory-elements h5,
37
- .ory-elements h6 {
38
- font-size: inherit;
39
- font-weight: inherit;
40
- }
41
- .ory-elements a {
42
- color: inherit;
43
- -webkit-text-decoration: inherit;
44
- text-decoration: inherit;
45
- }
46
- .ory-elements b,
47
- .ory-elements strong {
48
- font-weight: bolder;
49
- }
50
- .ory-elements code,
51
- .ory-elements kbd,
52
- .ory-elements samp,
53
- .ory-elements pre {
54
- font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
55
- font-feature-settings: var(--default-mono-font-feature-settings, normal);
56
- font-variation-settings: var(--default-mono-font-variation-settings, normal);
57
- font-size: 1em;
58
- }
59
- .ory-elements small {
60
- font-size: 80%;
61
- }
62
- .ory-elements sub,
63
- .ory-elements sup {
64
- font-size: 75%;
65
- line-height: 0;
66
- position: relative;
67
- vertical-align: baseline;
68
- }
69
- .ory-elements sub {
70
- bottom: -0.25em;
71
- }
72
- .ory-elements sup {
73
- top: -0.5em;
74
- }
75
- .ory-elements table {
76
- text-indent: 0;
77
- border-color: inherit;
78
- border-collapse: collapse;
79
- }
80
- .ory-elements :-moz-focusring {
81
- outline: auto;
82
- }
83
- .ory-elements progress {
84
- vertical-align: baseline;
85
- }
86
- .ory-elements summary {
87
- display: list-item;
88
- }
89
- .ory-elements ol,
90
- .ory-elements ul,
91
- .ory-elements menu {
92
- list-style: none;
93
- }
94
- .ory-elements img,
95
- .ory-elements svg,
96
- .ory-elements video,
97
- .ory-elements canvas,
98
- .ory-elements audio,
99
- .ory-elements iframe,
100
- .ory-elements embed,
101
- .ory-elements object {
102
- display: block;
103
- vertical-align: middle;
104
- }
105
- .ory-elements img,
106
- .ory-elements video {
107
- max-width: 100%;
108
- height: auto;
109
- }
110
- .ory-elements button,
111
- .ory-elements input,
112
- .ory-elements select,
113
- .ory-elements optgroup,
114
- .ory-elements textarea,
115
- .ory-elements ::file-selector-button {
116
- font: inherit;
117
- font-feature-settings: inherit;
118
- font-variation-settings: inherit;
119
- letter-spacing: inherit;
120
- color: inherit;
121
- border-radius: 0;
122
- background-color: transparent;
123
- opacity: 1;
124
- }
125
- .ory-elements :where(select:is([multiple], [size])) optgroup {
126
- font-weight: bolder;
127
- }
128
- .ory-elements :where(select:is([multiple], [size])) optgroup option {
129
- padding-inline-start: 20px;
130
- }
131
- .ory-elements ::file-selector-button {
132
- margin-inline-end: 4px;
133
- }
134
- .ory-elements ::placeholder {
135
- opacity: 1;
136
- }
137
- @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
3
+ @layer ory-elements;
4
+ @layer ory-elements {
5
+ .ory-elements *,
6
+ .ory-elements ::after,
7
+ .ory-elements ::before,
8
+ .ory-elements ::backdrop,
9
+ .ory-elements ::file-selector-button {
10
+ box-sizing: border-box;
11
+ margin: 0;
12
+ padding: 0;
13
+ border: 0 solid;
14
+ }
15
+ .ory-elements,
16
+ :host {
17
+ line-height: 1.5;
18
+ -webkit-text-size-adjust: 100%;
19
+ tab-size: 4;
20
+ font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
21
+ font-feature-settings: var(--default-font-feature-settings, normal);
22
+ font-variation-settings: var(--default-font-variation-settings, normal);
23
+ -webkit-tap-highlight-color: transparent;
24
+ }
25
+ .ory-elements hr {
26
+ height: 0;
27
+ color: inherit;
28
+ border-top-width: 1px;
29
+ }
30
+ .ory-elements abbr:where([title]) {
31
+ -webkit-text-decoration: underline dotted;
32
+ text-decoration: underline dotted;
33
+ }
34
+ .ory-elements h1,
35
+ .ory-elements h2,
36
+ .ory-elements h3,
37
+ .ory-elements h4,
38
+ .ory-elements h5,
39
+ .ory-elements h6 {
40
+ font-size: inherit;
41
+ font-weight: inherit;
42
+ }
43
+ .ory-elements a {
44
+ color: inherit;
45
+ -webkit-text-decoration: inherit;
46
+ text-decoration: inherit;
47
+ }
48
+ .ory-elements b,
49
+ .ory-elements strong {
50
+ font-weight: bolder;
51
+ }
52
+ .ory-elements code,
53
+ .ory-elements kbd,
54
+ .ory-elements samp,
55
+ .ory-elements pre {
56
+ font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
57
+ font-feature-settings: var(--default-mono-font-feature-settings, normal);
58
+ font-variation-settings: var(--default-mono-font-variation-settings, normal);
59
+ font-size: 1em;
60
+ }
61
+ .ory-elements small {
62
+ font-size: 80%;
63
+ }
64
+ .ory-elements sub,
65
+ .ory-elements sup {
66
+ font-size: 75%;
67
+ line-height: 0;
68
+ position: relative;
69
+ vertical-align: baseline;
70
+ }
71
+ .ory-elements sub {
72
+ bottom: -0.25em;
73
+ }
74
+ .ory-elements sup {
75
+ top: -0.5em;
76
+ }
77
+ .ory-elements table {
78
+ text-indent: 0;
79
+ border-color: inherit;
80
+ border-collapse: collapse;
81
+ }
82
+ .ory-elements :-moz-focusring {
83
+ outline: auto;
84
+ }
85
+ .ory-elements progress {
86
+ vertical-align: baseline;
87
+ }
88
+ .ory-elements summary {
89
+ display: list-item;
90
+ }
91
+ .ory-elements ol,
92
+ .ory-elements ul,
93
+ .ory-elements menu {
94
+ list-style: none;
95
+ }
96
+ .ory-elements img,
97
+ .ory-elements svg,
98
+ .ory-elements video,
99
+ .ory-elements canvas,
100
+ .ory-elements audio,
101
+ .ory-elements iframe,
102
+ .ory-elements embed,
103
+ .ory-elements object {
104
+ display: block;
105
+ vertical-align: middle;
106
+ }
107
+ .ory-elements img,
108
+ .ory-elements video {
109
+ max-width: 100%;
110
+ height: auto;
111
+ }
112
+ .ory-elements button,
113
+ .ory-elements input,
114
+ .ory-elements select,
115
+ .ory-elements optgroup,
116
+ .ory-elements textarea,
117
+ .ory-elements ::file-selector-button {
118
+ font: inherit;
119
+ font-feature-settings: inherit;
120
+ font-variation-settings: inherit;
121
+ letter-spacing: inherit;
122
+ color: inherit;
123
+ border-radius: 0;
124
+ background-color: transparent;
125
+ opacity: 1;
126
+ }
127
+ .ory-elements :where(select:is([multiple], [size])) optgroup {
128
+ font-weight: bolder;
129
+ }
130
+ .ory-elements :where(select:is([multiple], [size])) optgroup option {
131
+ padding-inline-start: 20px;
132
+ }
133
+ .ory-elements ::file-selector-button {
134
+ margin-inline-end: 4px;
135
+ }
138
136
  .ory-elements ::placeholder {
139
- color: currentcolor;
140
- @supports (color: color-mix(in lab, red, red)) {
141
- color: color-mix(in oklab, currentcolor 50%, transparent);
137
+ opacity: 1;
138
+ }
139
+ @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
140
+ .ory-elements ::placeholder {
141
+ color: currentcolor;
142
+ @supports (color: color-mix(in lab, red, red)) {
143
+ color: color-mix(in oklab, currentcolor 50%, transparent);
144
+ }
145
+ }
146
+ }
147
+ .ory-elements textarea {
148
+ resize: vertical;
149
+ }
150
+ .ory-elements ::-webkit-search-decoration {
151
+ -webkit-appearance: none;
152
+ }
153
+ .ory-elements ::-webkit-date-and-time-value {
154
+ min-height: 1lh;
155
+ text-align: inherit;
156
+ }
157
+ .ory-elements ::-webkit-datetime-edit {
158
+ display: inline-flex;
159
+ }
160
+ .ory-elements ::-webkit-datetime-edit-fields-wrapper {
161
+ padding: 0;
162
+ }
163
+ .ory-elements ::-webkit-datetime-edit,
164
+ .ory-elements ::-webkit-datetime-edit-year-field,
165
+ .ory-elements ::-webkit-datetime-edit-month-field,
166
+ .ory-elements ::-webkit-datetime-edit-day-field,
167
+ .ory-elements ::-webkit-datetime-edit-hour-field,
168
+ .ory-elements ::-webkit-datetime-edit-minute-field,
169
+ .ory-elements ::-webkit-datetime-edit-second-field,
170
+ .ory-elements ::-webkit-datetime-edit-millisecond-field,
171
+ .ory-elements ::-webkit-datetime-edit-meridiem-field {
172
+ padding-block: 0;
173
+ }
174
+ .ory-elements ::-webkit-calendar-picker-indicator {
175
+ line-height: 1;
176
+ }
177
+ .ory-elements :-moz-ui-invalid {
178
+ box-shadow: none;
179
+ }
180
+ .ory-elements button,
181
+ .ory-elements input:where([type=button], [type=reset], [type=submit]),
182
+ .ory-elements ::file-selector-button {
183
+ appearance: button;
184
+ }
185
+ .ory-elements ::-webkit-inner-spin-button,
186
+ .ory-elements ::-webkit-outer-spin-button {
187
+ height: auto;
188
+ }
189
+ .ory-elements [hidden]:where(:not([hidden=until-found])) {
190
+ display: none !important;
191
+ }
192
+ }
193
+ @layer ory-elements {
194
+ .ory-elements .pointer-events-none {
195
+ pointer-events: none;
196
+ }
197
+ .ory-elements .invisible {
198
+ visibility: hidden;
199
+ }
200
+ .ory-elements .visible {
201
+ visibility: visible;
202
+ }
203
+ .ory-elements .absolute {
204
+ position: absolute;
205
+ }
206
+ .ory-elements .fixed {
207
+ position: fixed;
208
+ }
209
+ .ory-elements .relative {
210
+ position: relative;
211
+ }
212
+ .ory-elements .inset-0 {
213
+ inset: calc(var(--spacing) * 0);
214
+ }
215
+ .ory-elements .z-50 {
216
+ z-index: 50;
217
+ }
218
+ .ory-elements .col-span-2 {
219
+ grid-column: span 2 / span 2;
220
+ }
221
+ .ory-elements .col-span-full {
222
+ grid-column: 1 / -1;
223
+ }
224
+ .ory-elements .container {
225
+ width: 100%;
226
+ @media (width >= 40rem) {
227
+ max-width: 40rem;
228
+ }
229
+ @media (width >= 48rem) {
230
+ max-width: 48rem;
231
+ }
232
+ @media (width >= 64rem) {
233
+ max-width: 64rem;
234
+ }
235
+ @media (width >= 80rem) {
236
+ max-width: 80rem;
237
+ }
238
+ @media (width >= 96rem) {
239
+ max-width: 96rem;
240
+ }
241
+ }
242
+ .ory-elements .-m-3 {
243
+ margin: calc(var(--spacing) * -3);
244
+ }
245
+ .ory-elements .m-auto {
246
+ margin: auto;
247
+ }
248
+ .ory-elements .mt-1 {
249
+ margin-top: calc(var(--spacing) * 1);
250
+ }
251
+ .ory-elements .mt-16 {
252
+ margin-top: calc(var(--spacing) * 16);
253
+ }
254
+ .ory-elements .mr-auto {
255
+ margin-right: auto;
256
+ }
257
+ .ory-elements .ml-auto {
258
+ margin-left: auto;
259
+ }
260
+ .ory-elements .block {
261
+ display: block;
262
+ }
263
+ .ory-elements .contents {
264
+ display: contents;
265
+ }
266
+ .ory-elements .flex {
267
+ display: flex;
268
+ }
269
+ .ory-elements .grid {
270
+ display: grid;
271
+ }
272
+ .ory-elements .hidden {
273
+ display: none;
274
+ }
275
+ .ory-elements .inline {
276
+ display: inline;
277
+ }
278
+ .ory-elements .inline-block {
279
+ display: inline-block;
280
+ }
281
+ .ory-elements .inline-flex {
282
+ display: inline-flex;
283
+ }
284
+ .ory-elements .table {
285
+ display: table;
286
+ }
287
+ .ory-elements .aspect-square {
288
+ aspect-ratio: 1 / 1;
289
+ }
290
+ .ory-elements .size-2 {
291
+ width: calc(var(--spacing) * 2);
292
+ height: calc(var(--spacing) * 2);
293
+ }
294
+ .ory-elements .size-4 {
295
+ width: calc(var(--spacing) * 4);
296
+ height: calc(var(--spacing) * 4);
297
+ }
298
+ .ory-elements .size-5 {
299
+ width: calc(var(--spacing) * 5);
300
+ height: calc(var(--spacing) * 5);
301
+ }
302
+ .ory-elements .size-8 {
303
+ width: calc(var(--spacing) * 8);
304
+ height: calc(var(--spacing) * 8);
305
+ }
306
+ .ory-elements .size-10 {
307
+ width: calc(var(--spacing) * 10);
308
+ height: calc(var(--spacing) * 10);
309
+ }
310
+ .ory-elements .size-full {
311
+ width: 100%;
312
+ height: 100%;
313
+ }
314
+ .ory-elements .h-4 {
315
+ height: calc(var(--spacing) * 4);
316
+ }
317
+ .ory-elements .h-5 {
318
+ height: calc(var(--spacing) * 5);
319
+ }
320
+ .ory-elements .h-9 {
321
+ height: calc(var(--spacing) * 9);
322
+ }
323
+ .ory-elements .h-44 {
324
+ height: calc(var(--spacing) * 44);
325
+ }
326
+ .ory-elements .h-full {
327
+ height: 100%;
328
+ }
329
+ .ory-elements .max-h-9 {
330
+ max-height: calc(var(--spacing) * 9);
331
+ }
332
+ .ory-elements .max-h-10 {
333
+ max-height: calc(var(--spacing) * 10);
334
+ }
335
+ .ory-elements .min-h-5 {
336
+ min-height: calc(var(--spacing) * 5);
337
+ }
338
+ .ory-elements .min-h-\[72px\] {
339
+ min-height: 72px;
340
+ }
341
+ .ory-elements .w-\(--breakpoint-sm\) {
342
+ width: var(--breakpoint-sm);
343
+ }
344
+ .ory-elements .w-7 {
345
+ width: calc(var(--spacing) * 7);
346
+ }
347
+ .ory-elements .w-full {
348
+ width: 100%;
349
+ }
350
+ .ory-elements .w-px {
351
+ width: 1px;
352
+ }
353
+ .ory-elements .max-w-\(--breakpoint-sm\) {
354
+ max-width: var(--breakpoint-sm);
355
+ }
356
+ .ory-elements .max-w-\[60\%\] {
357
+ max-width: 60%;
358
+ }
359
+ .ory-elements .max-w-\[488px\] {
360
+ max-width: 488px;
361
+ }
362
+ .ory-elements .max-w-full {
363
+ max-width: 100%;
364
+ }
365
+ .ory-elements .min-w-1 {
366
+ min-width: calc(var(--spacing) * 1);
367
+ }
368
+ .ory-elements .min-w-76 {
369
+ min-width: calc(var(--spacing) * 76);
370
+ }
371
+ .ory-elements .flex-1 {
372
+ flex: 1;
373
+ }
374
+ .ory-elements .shrink-0 {
375
+ flex-shrink: 0;
376
+ }
377
+ .ory-elements .grow {
378
+ flex-grow: 1;
379
+ }
380
+ .ory-elements .origin-top-right {
381
+ transform-origin: top right;
382
+ }
383
+ .ory-elements .transform {
384
+ transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
385
+ }
386
+ .ory-elements .animate-caret-blink {
387
+ animation: var(--animate-caret-blink);
388
+ }
389
+ .ory-elements .animate-drop-down-in {
390
+ animation: var(--animate-drop-down-in);
391
+ }
392
+ .ory-elements .animate-spin {
393
+ animation: var(--animate-spin);
394
+ }
395
+ .ory-elements .cursor-pointer {
396
+ cursor: pointer;
397
+ }
398
+ .ory-elements .appearance-none {
399
+ appearance: none;
400
+ }
401
+ .ory-elements .grid-cols-1 {
402
+ grid-template-columns: repeat(1, minmax(0, 1fr));
403
+ }
404
+ .ory-elements .grid-cols-2 {
405
+ grid-template-columns: repeat(2, minmax(0, 1fr));
406
+ }
407
+ .ory-elements .grid-cols-3 {
408
+ grid-template-columns: repeat(3, minmax(0, 1fr));
409
+ }
410
+ .ory-elements .grid-cols-4 {
411
+ grid-template-columns: repeat(4, minmax(0, 1fr));
412
+ }
413
+ .ory-elements .flex-col {
414
+ flex-direction: column;
415
+ }
416
+ .ory-elements .flex-wrap {
417
+ flex-wrap: wrap;
418
+ }
419
+ .ory-elements .items-center {
420
+ align-items: center;
421
+ }
422
+ .ory-elements .items-end {
423
+ align-items: flex-end;
424
+ }
425
+ .ory-elements .items-start {
426
+ align-items: flex-start;
427
+ }
428
+ .ory-elements .justify-between {
429
+ justify-content: space-between;
430
+ }
431
+ .ory-elements .justify-center {
432
+ justify-content: center;
433
+ }
434
+ .ory-elements .justify-start {
435
+ justify-content: flex-start;
436
+ }
437
+ .ory-elements .justify-stretch {
438
+ justify-content: stretch;
439
+ }
440
+ .ory-elements .gap-1 {
441
+ gap: calc(var(--spacing) * 1);
442
+ }
443
+ .ory-elements .gap-2 {
444
+ gap: calc(var(--spacing) * 2);
445
+ }
446
+ .ory-elements .gap-3 {
447
+ gap: calc(var(--spacing) * 3);
448
+ }
449
+ .ory-elements .gap-4 {
450
+ gap: calc(var(--spacing) * 4);
451
+ }
452
+ .ory-elements .gap-6 {
453
+ gap: calc(var(--spacing) * 6);
454
+ }
455
+ .ory-elements .gap-8 {
456
+ gap: calc(var(--spacing) * 8);
457
+ }
458
+ .ory-elements .gap-12 {
459
+ gap: calc(var(--spacing) * 12);
460
+ }
461
+ .ory-elements .self-start {
462
+ align-self: flex-start;
463
+ }
464
+ .ory-elements .self-stretch {
465
+ align-self: stretch;
466
+ }
467
+ .ory-elements .truncate {
468
+ overflow: hidden;
469
+ text-overflow: ellipsis;
470
+ white-space: nowrap;
471
+ }
472
+ .ory-elements .overflow-hidden {
473
+ overflow: hidden;
474
+ }
475
+ .ory-elements .rounded-\[999px\] {
476
+ border-radius: 999px;
477
+ }
478
+ .ory-elements .rounded-buttons {
479
+ border-radius: var(--radius-buttons);
480
+ }
481
+ .ory-elements .rounded-cards {
482
+ border-radius: var(--radius-cards);
483
+ }
484
+ .ory-elements .rounded-forms {
485
+ border-radius: var(--radius-forms);
486
+ }
487
+ .ory-elements .rounded-general {
488
+ border-radius: var(--radius-general);
489
+ }
490
+ .ory-elements .rounded-identifier {
491
+ border-radius: var(--radius-identifier);
492
+ }
493
+ .ory-elements .rounded-t-cards {
494
+ border-top-left-radius: var(--radius-cards);
495
+ border-top-right-radius: var(--radius-cards);
496
+ }
497
+ .ory-elements .rounded-l-forms {
498
+ border-top-left-radius: var(--radius-forms);
499
+ border-bottom-left-radius: var(--radius-forms);
500
+ }
501
+ .ory-elements .rounded-r-none {
502
+ border-top-right-radius: 0;
503
+ border-bottom-right-radius: 0;
504
+ }
505
+ .ory-elements .rounded-b-cards {
506
+ border-bottom-right-radius: var(--radius-cards);
507
+ border-bottom-left-radius: var(--radius-cards);
508
+ }
509
+ .ory-elements .border {
510
+ border-style: var(--tw-border-style);
511
+ border-width: 1px;
512
+ }
513
+ .ory-elements .border-t {
514
+ border-top-style: var(--tw-border-style);
515
+ border-top-width: 1px;
516
+ }
517
+ .ory-elements .border-b {
518
+ border-bottom-style: var(--tw-border-style);
519
+ border-bottom-width: 1px;
520
+ }
521
+ .ory-elements .border-b-0 {
522
+ border-bottom-style: var(--tw-border-style);
523
+ border-bottom-width: 0px;
524
+ }
525
+ .ory-elements .border-solid {
526
+ --tw-border-style: solid;
527
+ border-style: solid;
528
+ }
529
+ .ory-elements .border-button-identifier-border-border-default {
530
+ border-color: var(--color-button-identifier-border-border-default);
531
+ }
532
+ .ory-elements .border-button-secondary-border-default {
533
+ border-color: var(--color-button-secondary-border-default);
534
+ }
535
+ .ory-elements .border-button-social-border-default {
536
+ border-color: var(--color-button-social-border-default);
537
+ }
538
+ .ory-elements .border-button-social-border-generic-provider {
539
+ border-color: var(--color-button-social-border-generic-provider);
540
+ }
541
+ .ory-elements .border-checkbox-border-checkbox-border-default {
542
+ border-color: var(--color-checkbox-border-checkbox-border-default);
543
+ }
544
+ .ory-elements .border-form-border-default {
545
+ border-color: var(--color-form-border-default);
546
+ }
547
+ .ory-elements .border-input-border-default {
548
+ border-color: var(--color-input-border-default);
549
+ }
550
+ .ory-elements .border-input-border-focus {
551
+ border-color: var(--color-input-border-focus);
552
+ }
553
+ .ory-elements .border-interface-border-default-primary {
554
+ border-color: var(--color-interface-border-default-primary);
555
+ }
556
+ .ory-elements .border-interface-border-validation-danger {
557
+ border-color: var(--color-interface-border-validation-danger);
558
+ }
559
+ .ory-elements .border-ory-border-default {
560
+ border-color: var(--color-ory-border-default);
561
+ }
562
+ .ory-elements .border-toggle-border-default {
563
+ border-color: var(--color-toggle-border-default);
564
+ }
565
+ .ory-elements .bg-\[white\] {
566
+ background-color: white;
567
+ }
568
+ .ory-elements .bg-button-identifier-background-default {
569
+ background-color: var(--color-button-identifier-background-default);
570
+ }
571
+ .ory-elements .bg-button-primary-background-default {
572
+ background-color: var(--color-button-primary-background-default);
573
+ }
574
+ .ory-elements .bg-button-secondary-background-default {
575
+ background-color: var(--color-button-secondary-background-default);
576
+ }
577
+ .ory-elements .bg-button-social-background-default {
578
+ background-color: var(--color-button-social-background-default);
579
+ }
580
+ .ory-elements .bg-button-social-background-generic-provider {
581
+ background-color: var(--color-button-social-background-generic-provider);
582
+ }
583
+ .ory-elements .bg-checkbox-background-default {
584
+ background-color: var(--color-checkbox-background-default);
585
+ }
586
+ .ory-elements .bg-form-background-default {
587
+ background-color: var(--color-form-background-default);
588
+ }
589
+ .ory-elements .bg-input-background-default {
590
+ background-color: var(--color-input-background-default);
591
+ }
592
+ .ory-elements .bg-interface-background-brand-primary {
593
+ background-color: var(--color-interface-background-brand-primary);
594
+ }
595
+ .ory-elements .bg-interface-background-default-inverted {
596
+ background-color: var(--color-interface-background-default-inverted);
597
+ }
598
+ .ory-elements .bg-interface-background-default-primary {
599
+ background-color: var(--color-interface-background-default-primary);
600
+ }
601
+ .ory-elements .bg-interface-background-default-secondary {
602
+ background-color: var(--color-interface-background-default-secondary);
603
+ }
604
+ .ory-elements .bg-ory-background-default {
605
+ background-color: var(--color-ory-background-default);
606
+ }
607
+ .ory-elements .bg-toggle-background-default {
608
+ background-color: var(--color-toggle-background-default);
609
+ }
610
+ .ory-elements .bg-toggle-foreground-default {
611
+ background-color: var(--color-toggle-foreground-default);
612
+ }
613
+ .ory-elements .bg-transparent {
614
+ background-color: transparent;
615
+ }
616
+ .ory-elements .fill-checkbox-foreground-checked {
617
+ fill: var(--color-checkbox-foreground-checked);
618
+ }
619
+ .ory-elements .object-contain {
620
+ object-fit: contain;
621
+ }
622
+ .ory-elements .p-2 {
623
+ padding: calc(var(--spacing) * 2);
624
+ }
625
+ .ory-elements .p-4 {
626
+ padding: calc(var(--spacing) * 4);
627
+ }
628
+ .ory-elements .p-6 {
629
+ padding: calc(var(--spacing) * 6);
630
+ }
631
+ .ory-elements .p-8 {
632
+ padding: calc(var(--spacing) * 8);
633
+ }
634
+ .ory-elements .p-\[3px\] {
635
+ padding: 3px;
636
+ }
637
+ .ory-elements .px-2 {
638
+ padding-inline: calc(var(--spacing) * 2);
639
+ }
640
+ .ory-elements .px-4 {
641
+ padding-inline: calc(var(--spacing) * 4);
642
+ }
643
+ .ory-elements .px-5 {
644
+ padding-inline: calc(var(--spacing) * 5);
645
+ }
646
+ .ory-elements .px-6 {
647
+ padding-inline: calc(var(--spacing) * 6);
648
+ }
649
+ .ory-elements .px-8 {
650
+ padding-inline: calc(var(--spacing) * 8);
651
+ }
652
+ .ory-elements .px-\[11px\] {
653
+ padding-inline: 11px;
654
+ }
655
+ .ory-elements .py-1\.5 {
656
+ padding-block: calc(var(--spacing) * 1.5);
657
+ }
658
+ .ory-elements .py-2 {
659
+ padding-block: calc(var(--spacing) * 2);
660
+ }
661
+ .ory-elements .py-3 {
662
+ padding-block: calc(var(--spacing) * 3);
663
+ }
664
+ .ory-elements .py-4 {
665
+ padding-block: calc(var(--spacing) * 4);
666
+ }
667
+ .ory-elements .py-4\.5 {
668
+ padding-block: calc(var(--spacing) * 4.5);
669
+ }
670
+ .ory-elements .py-8 {
671
+ padding-block: calc(var(--spacing) * 8);
672
+ }
673
+ .ory-elements .py-12 {
674
+ padding-block: calc(var(--spacing) * 12);
675
+ }
676
+ .ory-elements .py-\[5px\] {
677
+ padding-block: 5px;
678
+ }
679
+ .ory-elements .py-\[13px\] {
680
+ padding-block: 13px;
681
+ }
682
+ .ory-elements .py-\[15px\] {
683
+ padding-block: 15px;
684
+ }
685
+ .ory-elements .pb-12 {
686
+ padding-bottom: calc(var(--spacing) * 12);
687
+ }
688
+ .ory-elements .pl-8 {
689
+ padding-left: calc(var(--spacing) * 8);
690
+ }
691
+ .ory-elements .text-center {
692
+ text-align: center;
693
+ }
694
+ .ory-elements .text-left {
695
+ text-align: left;
696
+ }
697
+ .ory-elements .font-sans-default {
698
+ font-family: var(--font-sans-default);
699
+ }
700
+ .ory-elements .text-lg {
701
+ font-size: var(--text-lg);
702
+ line-height: var(--tw-leading, var(--text-lg--line-height));
703
+ }
704
+ .ory-elements .text-sm {
705
+ font-size: var(--text-sm);
706
+ line-height: var(--tw-leading, var(--text-sm--line-height));
707
+ }
708
+ .ory-elements .text-xl {
709
+ font-size: var(--text-xl);
710
+ line-height: var(--tw-leading, var(--text-xl--line-height));
711
+ }
712
+ .ory-elements .text-xs {
713
+ font-size: var(--text-xs);
714
+ line-height: var(--tw-leading, var(--text-xs--line-height));
715
+ }
716
+ .ory-elements .leading-none {
717
+ --tw-leading: 1;
718
+ line-height: 1;
719
+ }
720
+ .ory-elements .leading-normal {
721
+ --tw-leading: var(--leading-normal);
722
+ line-height: var(--leading-normal);
723
+ }
724
+ .ory-elements .leading-tight {
725
+ --tw-leading: var(--leading-tight);
726
+ line-height: var(--leading-tight);
727
+ }
728
+ .ory-elements .font-bold {
729
+ --tw-font-weight: var(--font-weight-bold);
730
+ font-weight: var(--font-weight-bold);
731
+ }
732
+ .ory-elements .font-medium {
733
+ --tw-font-weight: var(--font-weight-medium);
734
+ font-weight: var(--font-weight-medium);
735
+ }
736
+ .ory-elements .font-normal {
737
+ --tw-font-weight: var(--font-weight-normal);
738
+ font-weight: var(--font-weight-normal);
739
+ }
740
+ .ory-elements .font-semibold {
741
+ --tw-font-weight: var(--font-weight-semibold);
742
+ font-weight: var(--font-weight-semibold);
743
+ }
744
+ .ory-elements .text-nowrap {
745
+ text-wrap: nowrap;
746
+ }
747
+ .ory-elements .break-words {
748
+ overflow-wrap: break-word;
749
+ }
750
+ .ory-elements .text-ellipsis {
751
+ text-overflow: ellipsis;
752
+ }
753
+ .ory-elements .text-button-identifier-foreground-default {
754
+ color: var(--color-button-identifier-foreground-default);
755
+ }
756
+ .ory-elements .text-button-link-brand-brand {
757
+ color: var(--color-button-link-brand-brand);
758
+ }
759
+ .ory-elements .text-button-link-default-primary {
760
+ color: var(--color-button-link-default-primary);
761
+ }
762
+ .ory-elements .text-button-link-default-secondary {
763
+ color: var(--color-button-link-default-secondary);
764
+ }
765
+ .ory-elements .text-button-primary-foreground-default {
766
+ color: var(--color-button-primary-foreground-default);
767
+ }
768
+ .ory-elements .text-button-secondary-foreground-default {
769
+ color: var(--color-button-secondary-foreground-default);
770
+ }
771
+ .ory-elements .text-button-social-foreground-default {
772
+ color: var(--color-button-social-foreground-default);
773
+ }
774
+ .ory-elements .text-button-social-foreground-generic-provider {
775
+ color: var(--color-button-social-foreground-generic-provider);
776
+ }
777
+ .ory-elements .text-input-foreground-primary {
778
+ color: var(--color-input-foreground-primary);
779
+ }
780
+ .ory-elements .text-interface-foreground-brand-primary {
781
+ color: var(--color-interface-foreground-brand-primary);
782
+ }
783
+ .ory-elements .text-interface-foreground-default-inverted {
784
+ color: var(--color-interface-foreground-default-inverted);
785
+ }
786
+ .ory-elements .text-interface-foreground-default-primary {
787
+ color: var(--color-interface-foreground-default-primary);
788
+ }
789
+ .ory-elements .text-interface-foreground-default-secondary {
790
+ color: var(--color-interface-foreground-default-secondary);
791
+ }
792
+ .ory-elements .text-interface-foreground-default-tertiary {
793
+ color: var(--color-interface-foreground-default-tertiary);
794
+ }
795
+ .ory-elements .text-interface-foreground-validation-danger {
796
+ color: var(--color-interface-foreground-validation-danger);
797
+ }
798
+ .ory-elements .text-interface-foreground-validation-success {
799
+ color: var(--color-interface-foreground-validation-success);
800
+ }
801
+ .ory-elements .text-interface-foreground-validation-warning {
802
+ color: var(--color-interface-foreground-validation-warning);
803
+ }
804
+ .ory-elements .text-ory-foreground-default {
805
+ color: var(--color-ory-foreground-default);
806
+ }
807
+ .ory-elements .capitalize {
808
+ text-transform: capitalize;
809
+ }
810
+ .ory-elements .underline {
811
+ text-decoration-line: underline;
812
+ }
813
+ .ory-elements .antialiased {
814
+ -webkit-font-smoothing: antialiased;
815
+ -moz-osx-font-smoothing: grayscale;
816
+ }
817
+ .ory-elements .mix-blend-multiply {
818
+ mix-blend-mode: multiply;
819
+ }
820
+ .ory-elements .ring {
821
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
822
+ box-shadow:
823
+ var(--tw-inset-shadow),
824
+ var(--tw-inset-ring-shadow),
825
+ var(--tw-ring-offset-shadow),
826
+ var(--tw-ring-shadow),
827
+ var(--tw-shadow);
828
+ }
829
+ .ory-elements .ring-1 {
830
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
831
+ box-shadow:
832
+ var(--tw-inset-shadow),
833
+ var(--tw-inset-ring-shadow),
834
+ var(--tw-ring-offset-shadow),
835
+ var(--tw-ring-shadow),
836
+ var(--tw-shadow);
837
+ }
838
+ .ory-elements .ring-button-primary-border-default {
839
+ --tw-ring-color: var(--color-button-primary-border-default);
840
+ }
841
+ .ory-elements .ring-button-secondary-border-default {
842
+ --tw-ring-color: var(--color-button-secondary-border-default);
843
+ }
844
+ .ory-elements .outline-hidden {
845
+ --tw-outline-style: none;
846
+ outline-style: none;
847
+ @media (forced-colors: active) {
848
+ outline: 2px solid transparent;
849
+ outline-offset: 2px;
850
+ }
851
+ }
852
+ .ory-elements .filter {
853
+ filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
854
+ }
855
+ .ory-elements .transition {
856
+ transition-property:
857
+ color,
858
+ background-color,
859
+ border-color,
860
+ outline-color,
861
+ text-decoration-color,
862
+ fill,
863
+ stroke,
864
+ --tw-gradient-from,
865
+ --tw-gradient-via,
866
+ --tw-gradient-to,
867
+ opacity,
868
+ box-shadow,
869
+ transform,
870
+ translate,
871
+ scale,
872
+ rotate,
873
+ filter,
874
+ -webkit-backdrop-filter,
875
+ backdrop-filter,
876
+ display,
877
+ visibility,
878
+ content-visibility,
879
+ overlay,
880
+ pointer-events;
881
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
882
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
883
+ }
884
+ .ory-elements .transition-all {
885
+ transition-property: all;
886
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
887
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
888
+ }
889
+ .ory-elements .transition-colors {
890
+ transition-property:
891
+ color,
892
+ background-color,
893
+ border-color,
894
+ outline-color,
895
+ text-decoration-color,
896
+ fill,
897
+ stroke,
898
+ --tw-gradient-from,
899
+ --tw-gradient-via,
900
+ --tw-gradient-to;
901
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
902
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
903
+ }
904
+ .ory-elements .duration-100 {
905
+ --tw-duration: 100ms;
906
+ transition-duration: 100ms;
907
+ }
908
+ .ory-elements .duration-700 {
909
+ --tw-duration: 700ms;
910
+ transition-duration: 700ms;
911
+ }
912
+ .ory-elements .ease-linear {
913
+ --tw-ease: linear;
914
+ transition-timing-function: linear;
915
+ }
916
+ .ory-elements .will-change-\[opacity\,transform\] {
917
+ will-change: opacity, transform;
918
+ }
919
+ .ory-elements .select-none {
920
+ -webkit-user-select: none;
921
+ user-select: none;
922
+ }
923
+ .ory-elements .ring-inset {
924
+ --tw-ring-inset: inset;
925
+ }
926
+ .ory-elements .group-hover\:text-button-identifier-foreground-hover {
927
+ &:is(:where(.group):hover *) {
928
+ @media (hover: hover) {
929
+ color: var(--color-button-identifier-foreground-hover);
930
+ }
931
+ }
932
+ }
933
+ .ory-elements .peer-checked\:block {
934
+ &:is(:where(.peer):checked ~ *) {
935
+ display: block;
142
936
  }
143
937
  }
144
- }
145
- .ory-elements textarea {
146
- resize: vertical;
147
- }
148
- .ory-elements ::-webkit-search-decoration {
149
- -webkit-appearance: none;
150
- }
151
- .ory-elements ::-webkit-date-and-time-value {
152
- min-height: 1lh;
153
- text-align: inherit;
154
- }
155
- .ory-elements ::-webkit-datetime-edit {
156
- display: inline-flex;
157
- }
158
- .ory-elements ::-webkit-datetime-edit-fields-wrapper {
159
- padding: 0;
160
- }
161
- .ory-elements ::-webkit-datetime-edit,
162
- .ory-elements ::-webkit-datetime-edit-year-field,
163
- .ory-elements ::-webkit-datetime-edit-month-field,
164
- .ory-elements ::-webkit-datetime-edit-day-field,
165
- .ory-elements ::-webkit-datetime-edit-hour-field,
166
- .ory-elements ::-webkit-datetime-edit-minute-field,
167
- .ory-elements ::-webkit-datetime-edit-second-field,
168
- .ory-elements ::-webkit-datetime-edit-millisecond-field,
169
- .ory-elements ::-webkit-datetime-edit-meridiem-field {
170
- padding-block: 0;
171
- }
172
- .ory-elements ::-webkit-calendar-picker-indicator {
173
- line-height: 1;
174
- }
175
- .ory-elements :-moz-ui-invalid {
176
- box-shadow: none;
177
- }
178
- .ory-elements button,
179
- .ory-elements input:where([type=button], [type=reset], [type=submit]),
180
- .ory-elements ::file-selector-button {
181
- appearance: button;
182
- }
183
- .ory-elements ::-webkit-inner-spin-button,
184
- .ory-elements ::-webkit-outer-spin-button {
185
- height: auto;
186
- }
187
- .ory-elements [hidden]:where(:not([hidden=until-found])) {
188
- display: none !important;
189
- }
190
- .ory-elements .pointer-events-none {
191
- pointer-events: none;
192
- }
193
- .ory-elements .invisible {
194
- visibility: hidden;
195
- }
196
- .ory-elements .visible {
197
- visibility: visible;
198
- }
199
- .ory-elements .absolute {
200
- position: absolute;
201
- }
202
- .ory-elements .fixed {
203
- position: fixed;
204
- }
205
- .ory-elements .relative {
206
- position: relative;
207
- }
208
- .ory-elements .inset-0 {
209
- inset: calc(var(--spacing) * 0);
210
- }
211
- .ory-elements .right-0 {
212
- right: calc(var(--spacing) * 0);
213
- }
214
- .ory-elements .z-50 {
215
- z-index: 50;
216
- }
217
- .ory-elements .col-span-2 {
218
- grid-column: span 2 / span 2;
219
- }
220
- .ory-elements .col-span-full {
221
- grid-column: 1 / -1;
222
- }
223
- .ory-elements .container {
224
- width: 100%;
225
- @media (width >= 40rem) {
226
- max-width: 40rem;
938
+ .ory-elements .placeholder\:h-\[20px\] {
939
+ &::placeholder {
940
+ height: 20px;
941
+ }
227
942
  }
228
- @media (width >= 48rem) {
229
- max-width: 48rem;
943
+ .ory-elements .placeholder\:text-input-foreground-tertiary {
944
+ &::placeholder {
945
+ color: var(--color-input-foreground-tertiary);
946
+ }
230
947
  }
231
- @media (width >= 64rem) {
232
- max-width: 64rem;
948
+ .ory-elements .first\:border-0 {
949
+ &:first-child {
950
+ border-style: var(--tw-border-style);
951
+ border-width: 0px;
952
+ }
233
953
  }
234
- @media (width >= 80rem) {
235
- max-width: 80rem;
954
+ .ory-elements .checked\:border-checkbox-border-checkbox-border-checked {
955
+ &:checked {
956
+ border-color: var(--color-checkbox-border-checkbox-border-checked);
957
+ }
236
958
  }
237
- @media (width >= 96rem) {
238
- max-width: 96rem;
959
+ .ory-elements .checked\:bg-checkbox-background-checked {
960
+ &:checked {
961
+ background-color: var(--color-checkbox-background-checked);
962
+ }
239
963
  }
240
- }
241
- .ory-elements .-m-3 {
242
- margin: calc(var(--spacing) * -3);
243
- }
244
- .ory-elements .m-auto {
245
- margin: auto;
246
- }
247
- .ory-elements .mt-1 {
248
- margin-top: calc(var(--spacing) * 1);
249
- }
250
- .ory-elements .mt-16 {
251
- margin-top: calc(var(--spacing) * 16);
252
- }
253
- .ory-elements .mr-auto {
254
- margin-right: auto;
255
- }
256
- .ory-elements .ml-auto {
257
- margin-left: auto;
258
- }
259
- .ory-elements .block {
260
- display: block;
261
- }
262
- .ory-elements .contents {
263
- display: contents;
264
- }
265
- .ory-elements .flex {
266
- display: flex;
267
- }
268
- .ory-elements .grid {
269
- display: grid;
270
- }
271
- .ory-elements .hidden {
272
- display: none;
273
- }
274
- .ory-elements .inline {
275
- display: inline;
276
- }
277
- .ory-elements .inline-block {
278
- display: inline-block;
279
- }
280
- .ory-elements .inline-flex {
281
- display: inline-flex;
282
- }
283
- .ory-elements .table {
284
- display: table;
285
- }
286
- .ory-elements .aspect-square {
287
- aspect-ratio: 1 / 1;
288
- }
289
- .ory-elements .size-2 {
290
- width: calc(var(--spacing) * 2);
291
- height: calc(var(--spacing) * 2);
292
- }
293
- .ory-elements .size-4 {
294
- width: calc(var(--spacing) * 4);
295
- height: calc(var(--spacing) * 4);
296
- }
297
- .ory-elements .size-5 {
298
- width: calc(var(--spacing) * 5);
299
- height: calc(var(--spacing) * 5);
300
- }
301
- .ory-elements .size-8 {
302
- width: calc(var(--spacing) * 8);
303
- height: calc(var(--spacing) * 8);
304
- }
305
- .ory-elements .size-10 {
306
- width: calc(var(--spacing) * 10);
307
- height: calc(var(--spacing) * 10);
308
- }
309
- .ory-elements .size-full {
310
- width: 100%;
311
- height: 100%;
312
- }
313
- .ory-elements .h-4 {
314
- height: calc(var(--spacing) * 4);
315
- }
316
- .ory-elements .h-5 {
317
- height: calc(var(--spacing) * 5);
318
- }
319
- .ory-elements .h-9 {
320
- height: calc(var(--spacing) * 9);
321
- }
322
- .ory-elements .h-44 {
323
- height: calc(var(--spacing) * 44);
324
- }
325
- .ory-elements .h-full {
326
- height: 100%;
327
- }
328
- .ory-elements .max-h-9 {
329
- max-height: calc(var(--spacing) * 9);
330
- }
331
- .ory-elements .max-h-10 {
332
- max-height: calc(var(--spacing) * 10);
333
- }
334
- .ory-elements .min-h-5 {
335
- min-height: calc(var(--spacing) * 5);
336
- }
337
- .ory-elements .min-h-\[72px\] {
338
- min-height: 72px;
339
- }
340
- .ory-elements .w-7 {
341
- width: calc(var(--spacing) * 7);
342
- }
343
- .ory-elements .w-12 {
344
- width: calc(var(--spacing) * 12);
345
- }
346
- .ory-elements .w-full {
347
- width: 100%;
348
- }
349
- .ory-elements .w-px {
350
- width: 1px;
351
- }
352
- .ory-elements .max-w-\(--breakpoint-sm\) {
353
- max-width: var(--breakpoint-sm);
354
- }
355
- .ory-elements .max-w-\[60\%\] {
356
- max-width: 60%;
357
- }
358
- .ory-elements .max-w-\[488px\] {
359
- max-width: 488px;
360
- }
361
- .ory-elements .max-w-full {
362
- max-width: 100%;
363
- }
364
- .ory-elements .min-w-1 {
365
- min-width: calc(var(--spacing) * 1);
366
- }
367
- .ory-elements .min-w-76 {
368
- min-width: calc(var(--spacing) * 76);
369
- }
370
- .ory-elements .flex-1 {
371
- flex: 1;
372
- }
373
- .ory-elements .shrink-0 {
374
- flex-shrink: 0;
375
- }
376
- .ory-elements .grow {
377
- flex-grow: 1;
378
- }
379
- .ory-elements .origin-top-right {
380
- transform-origin: top right;
381
- }
382
- .ory-elements .transform {
383
- transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
384
- }
385
- .ory-elements .animate-caret-blink {
386
- animation: var(--animate-caret-blink);
387
- }
388
- .ory-elements .animate-drop-down-in {
389
- animation: var(--animate-drop-down-in);
390
- }
391
- .ory-elements .animate-spin {
392
- animation: var(--animate-spin);
393
- }
394
- .ory-elements .cursor-pointer {
395
- cursor: pointer;
396
- }
397
- .ory-elements .appearance-none {
398
- appearance: none;
399
- }
400
- .ory-elements .grid-cols-1 {
401
- grid-template-columns: repeat(1, minmax(0, 1fr));
402
- }
403
- .ory-elements .grid-cols-2 {
404
- grid-template-columns: repeat(2, minmax(0, 1fr));
405
- }
406
- .ory-elements .grid-cols-3 {
407
- grid-template-columns: repeat(3, minmax(0, 1fr));
408
- }
409
- .ory-elements .grid-cols-4 {
410
- grid-template-columns: repeat(4, minmax(0, 1fr));
411
- }
412
- .ory-elements .flex-col {
413
- flex-direction: column;
414
- }
415
- .ory-elements .flex-wrap {
416
- flex-wrap: wrap;
417
- }
418
- .ory-elements .items-center {
419
- align-items: center;
420
- }
421
- .ory-elements .items-end {
422
- align-items: flex-end;
423
- }
424
- .ory-elements .items-start {
425
- align-items: flex-start;
426
- }
427
- .ory-elements .justify-between {
428
- justify-content: space-between;
429
- }
430
- .ory-elements .justify-center {
431
- justify-content: center;
432
- }
433
- .ory-elements .justify-start {
434
- justify-content: flex-start;
435
- }
436
- .ory-elements .justify-stretch {
437
- justify-content: stretch;
438
- }
439
- .ory-elements .gap-1 {
440
- gap: calc(var(--spacing) * 1);
441
- }
442
- .ory-elements .gap-2 {
443
- gap: calc(var(--spacing) * 2);
444
- }
445
- .ory-elements .gap-3 {
446
- gap: calc(var(--spacing) * 3);
447
- }
448
- .ory-elements .gap-4 {
449
- gap: calc(var(--spacing) * 4);
450
- }
451
- .ory-elements .gap-6 {
452
- gap: calc(var(--spacing) * 6);
453
- }
454
- .ory-elements .gap-8 {
455
- gap: calc(var(--spacing) * 8);
456
- }
457
- .ory-elements .gap-12 {
458
- gap: calc(var(--spacing) * 12);
459
- }
460
- .ory-elements .self-start {
461
- align-self: flex-start;
462
- }
463
- .ory-elements .self-stretch {
464
- align-self: stretch;
465
- }
466
- .ory-elements .truncate {
467
- overflow: hidden;
468
- text-overflow: ellipsis;
469
- white-space: nowrap;
470
- }
471
- .ory-elements .overflow-hidden {
472
- overflow: hidden;
473
- }
474
- .ory-elements .rounded-\[999px\] {
475
- border-radius: 999px;
476
- }
477
- .ory-elements .rounded-buttons {
478
- border-radius: var(--radius-buttons);
479
- }
480
- .ory-elements .rounded-cards {
481
- border-radius: var(--radius-cards);
482
- }
483
- .ory-elements .rounded-forms {
484
- border-radius: var(--radius-forms);
485
- }
486
- .ory-elements .rounded-general {
487
- border-radius: var(--radius-general);
488
- }
489
- .ory-elements .rounded-identifier {
490
- border-radius: var(--radius-identifier);
491
- }
492
- .ory-elements .rounded-t-cards {
493
- border-top-left-radius: var(--radius-cards);
494
- border-top-right-radius: var(--radius-cards);
495
- }
496
- .ory-elements .rounded-b-cards {
497
- border-bottom-right-radius: var(--radius-cards);
498
- border-bottom-left-radius: var(--radius-cards);
499
- }
500
- .ory-elements .border {
501
- border-style: var(--tw-border-style);
502
- border-width: 1px;
503
- }
504
- .ory-elements .border-t {
505
- border-top-style: var(--tw-border-style);
506
- border-top-width: 1px;
507
- }
508
- .ory-elements .border-b {
509
- border-bottom-style: var(--tw-border-style);
510
- border-bottom-width: 1px;
511
- }
512
- .ory-elements .border-b-0 {
513
- border-bottom-style: var(--tw-border-style);
514
- border-bottom-width: 0px;
515
- }
516
- .ory-elements .border-solid {
517
- --tw-border-style: solid;
518
- border-style: solid;
519
- }
520
- .ory-elements .border-button-identifier-border-border-default {
521
- border-color: var(--color-button-identifier-border-border-default);
522
- }
523
- .ory-elements .border-button-secondary-border-default {
524
- border-color: var(--color-button-secondary-border-default);
525
- }
526
- .ory-elements .border-button-social-border-default {
527
- border-color: var(--color-button-social-border-default);
528
- }
529
- .ory-elements .border-button-social-border-generic-provider {
530
- border-color: var(--color-button-social-border-generic-provider);
531
- }
532
- .ory-elements .border-checkbox-border-checkbox-border-default {
533
- border-color: var(--color-checkbox-border-checkbox-border-default);
534
- }
535
- .ory-elements .border-form-border-default {
536
- border-color: var(--color-form-border-default);
537
- }
538
- .ory-elements .border-input-border-default {
539
- border-color: var(--color-input-border-default);
540
- }
541
- .ory-elements .border-input-border-focus {
542
- border-color: var(--color-input-border-focus);
543
- }
544
- .ory-elements .border-interface-border-default-primary {
545
- border-color: var(--color-interface-border-default-primary);
546
- }
547
- .ory-elements .border-interface-border-validation-danger {
548
- border-color: var(--color-interface-border-validation-danger);
549
- }
550
- .ory-elements .border-ory-border-default {
551
- border-color: var(--color-ory-border-default);
552
- }
553
- .ory-elements .border-toggle-border-default {
554
- border-color: var(--color-toggle-border-default);
555
- }
556
- .ory-elements .bg-\[white\] {
557
- background-color: white;
558
- }
559
- .ory-elements .bg-button-identifier-background-default {
560
- background-color: var(--color-button-identifier-background-default);
561
- }
562
- .ory-elements .bg-button-primary-background-default {
563
- background-color: var(--color-button-primary-background-default);
564
- }
565
- .ory-elements .bg-button-secondary-background-default {
566
- background-color: var(--color-button-secondary-background-default);
567
- }
568
- .ory-elements .bg-button-social-background-default {
569
- background-color: var(--color-button-social-background-default);
570
- }
571
- .ory-elements .bg-button-social-background-generic-provider {
572
- background-color: var(--color-button-social-background-generic-provider);
573
- }
574
- .ory-elements .bg-checkbox-background-default {
575
- background-color: var(--color-checkbox-background-default);
576
- }
577
- .ory-elements .bg-form-background-default {
578
- background-color: var(--color-form-background-default);
579
- }
580
- .ory-elements .bg-input-background-default {
581
- background-color: var(--color-input-background-default);
582
- }
583
- .ory-elements .bg-interface-background-brand-primary {
584
- background-color: var(--color-interface-background-brand-primary);
585
- }
586
- .ory-elements .bg-interface-background-default-inverted {
587
- background-color: var(--color-interface-background-default-inverted);
588
- }
589
- .ory-elements .bg-interface-background-default-primary {
590
- background-color: var(--color-interface-background-default-primary);
591
- }
592
- .ory-elements .bg-interface-background-default-secondary {
593
- background-color: var(--color-interface-background-default-secondary);
594
- }
595
- .ory-elements .bg-ory-background-default {
596
- background-color: var(--color-ory-background-default);
597
- }
598
- .ory-elements .bg-toggle-background-default {
599
- background-color: var(--color-toggle-background-default);
600
- }
601
- .ory-elements .bg-toggle-foreground-default {
602
- background-color: var(--color-toggle-foreground-default);
603
- }
604
- .ory-elements .fill-checkbox-foreground-checked {
605
- fill: var(--color-checkbox-foreground-checked);
606
- }
607
- .ory-elements .object-contain {
608
- object-fit: contain;
609
- }
610
- .ory-elements .p-2 {
611
- padding: calc(var(--spacing) * 2);
612
- }
613
- .ory-elements .p-4 {
614
- padding: calc(var(--spacing) * 4);
615
- }
616
- .ory-elements .p-5 {
617
- padding: calc(var(--spacing) * 5);
618
- }
619
- .ory-elements .p-6 {
620
- padding: calc(var(--spacing) * 6);
621
- }
622
- .ory-elements .p-8 {
623
- padding: calc(var(--spacing) * 8);
624
- }
625
- .ory-elements .p-\[3px\] {
626
- padding: 3px;
627
- }
628
- .ory-elements .px-2 {
629
- padding-inline: calc(var(--spacing) * 2);
630
- }
631
- .ory-elements .px-4 {
632
- padding-inline: calc(var(--spacing) * 4);
633
- }
634
- .ory-elements .px-5 {
635
- padding-inline: calc(var(--spacing) * 5);
636
- }
637
- .ory-elements .px-6 {
638
- padding-inline: calc(var(--spacing) * 6);
639
- }
640
- .ory-elements .px-8 {
641
- padding-inline: calc(var(--spacing) * 8);
642
- }
643
- .ory-elements .px-\[11px\] {
644
- padding-inline: 11px;
645
- }
646
- .ory-elements .py-1\.5 {
647
- padding-block: calc(var(--spacing) * 1.5);
648
- }
649
- .ory-elements .py-3 {
650
- padding-block: calc(var(--spacing) * 3);
651
- }
652
- .ory-elements .py-4 {
653
- padding-block: calc(var(--spacing) * 4);
654
- }
655
- .ory-elements .py-4\.5 {
656
- padding-block: calc(var(--spacing) * 4.5);
657
- }
658
- .ory-elements .py-8 {
659
- padding-block: calc(var(--spacing) * 8);
660
- }
661
- .ory-elements .py-12 {
662
- padding-block: calc(var(--spacing) * 12);
663
- }
664
- .ory-elements .py-\[5px\] {
665
- padding-block: 5px;
666
- }
667
- .ory-elements .py-\[13px\] {
668
- padding-block: 13px;
669
- }
670
- .ory-elements .py-\[15px\] {
671
- padding-block: 15px;
672
- }
673
- .ory-elements .pb-12 {
674
- padding-bottom: calc(var(--spacing) * 12);
675
- }
676
- .ory-elements .pl-8 {
677
- padding-left: calc(var(--spacing) * 8);
678
- }
679
- .ory-elements .text-center {
680
- text-align: center;
681
- }
682
- .ory-elements .text-left {
683
- text-align: left;
684
- }
685
- .ory-elements .font-sans-default {
686
- font-family: var(--font-sans-default);
687
- }
688
- .ory-elements .text-lg {
689
- font-size: var(--text-lg);
690
- line-height: var(--tw-leading, var(--text-lg--line-height));
691
- }
692
- .ory-elements .text-sm {
693
- font-size: var(--text-sm);
694
- line-height: var(--tw-leading, var(--text-sm--line-height));
695
- }
696
- .ory-elements .text-xl {
697
- font-size: var(--text-xl);
698
- line-height: var(--tw-leading, var(--text-xl--line-height));
699
- }
700
- .ory-elements .text-xs {
701
- font-size: var(--text-xs);
702
- line-height: var(--tw-leading, var(--text-xs--line-height));
703
- }
704
- .ory-elements .leading-none {
705
- --tw-leading: 1;
706
- line-height: 1;
707
- }
708
- .ory-elements .leading-normal {
709
- --tw-leading: var(--leading-normal);
710
- line-height: var(--leading-normal);
711
- }
712
- .ory-elements .leading-tight {
713
- --tw-leading: var(--leading-tight);
714
- line-height: var(--leading-tight);
715
- }
716
- .ory-elements .font-bold {
717
- --tw-font-weight: var(--font-weight-bold);
718
- font-weight: var(--font-weight-bold);
719
- }
720
- .ory-elements .font-medium {
721
- --tw-font-weight: var(--font-weight-medium);
722
- font-weight: var(--font-weight-medium);
723
- }
724
- .ory-elements .font-normal {
725
- --tw-font-weight: var(--font-weight-normal);
726
- font-weight: var(--font-weight-normal);
727
- }
728
- .ory-elements .font-semibold {
729
- --tw-font-weight: var(--font-weight-semibold);
730
- font-weight: var(--font-weight-semibold);
731
- }
732
- .ory-elements .text-nowrap {
733
- text-wrap: nowrap;
734
- }
735
- .ory-elements .break-words {
736
- overflow-wrap: break-word;
737
- }
738
- .ory-elements .text-ellipsis {
739
- text-overflow: ellipsis;
740
- }
741
- .ory-elements .text-button-identifier-foreground-default {
742
- color: var(--color-button-identifier-foreground-default);
743
- }
744
- .ory-elements .text-button-link-brand-brand {
745
- color: var(--color-button-link-brand-brand);
746
- }
747
- .ory-elements .text-button-link-default-primary {
748
- color: var(--color-button-link-default-primary);
749
- }
750
- .ory-elements .text-button-link-default-secondary {
751
- color: var(--color-button-link-default-secondary);
752
- }
753
- .ory-elements .text-button-primary-foreground-default {
754
- color: var(--color-button-primary-foreground-default);
755
- }
756
- .ory-elements .text-button-secondary-foreground-default {
757
- color: var(--color-button-secondary-foreground-default);
758
- }
759
- .ory-elements .text-button-social-foreground-default {
760
- color: var(--color-button-social-foreground-default);
761
- }
762
- .ory-elements .text-button-social-foreground-generic-provider {
763
- color: var(--color-button-social-foreground-generic-provider);
764
- }
765
- .ory-elements .text-input-foreground-primary {
766
- color: var(--color-input-foreground-primary);
767
- }
768
- .ory-elements .text-interface-foreground-brand-primary {
769
- color: var(--color-interface-foreground-brand-primary);
770
- }
771
- .ory-elements .text-interface-foreground-default-inverted {
772
- color: var(--color-interface-foreground-default-inverted);
773
- }
774
- .ory-elements .text-interface-foreground-default-primary {
775
- color: var(--color-interface-foreground-default-primary);
776
- }
777
- .ory-elements .text-interface-foreground-default-secondary {
778
- color: var(--color-interface-foreground-default-secondary);
779
- }
780
- .ory-elements .text-interface-foreground-default-tertiary {
781
- color: var(--color-interface-foreground-default-tertiary);
782
- }
783
- .ory-elements .text-interface-foreground-validation-danger {
784
- color: var(--color-interface-foreground-validation-danger);
785
- }
786
- .ory-elements .text-interface-foreground-validation-success {
787
- color: var(--color-interface-foreground-validation-success);
788
- }
789
- .ory-elements .text-interface-foreground-validation-warning {
790
- color: var(--color-interface-foreground-validation-warning);
791
- }
792
- .ory-elements .text-ory-foreground-default {
793
- color: var(--color-ory-foreground-default);
794
- }
795
- .ory-elements .capitalize {
796
- text-transform: capitalize;
797
- }
798
- .ory-elements .underline {
799
- text-decoration-line: underline;
800
- }
801
- .ory-elements .antialiased {
802
- -webkit-font-smoothing: antialiased;
803
- -moz-osx-font-smoothing: grayscale;
804
- }
805
- .ory-elements .mix-blend-multiply {
806
- mix-blend-mode: multiply;
807
- }
808
- .ory-elements .ring-1 {
809
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
810
- box-shadow:
811
- var(--tw-inset-shadow),
812
- var(--tw-inset-ring-shadow),
813
- var(--tw-ring-offset-shadow),
814
- var(--tw-ring-shadow),
815
- var(--tw-shadow);
816
- }
817
- .ory-elements .ring-button-primary-border-default {
818
- --tw-ring-color: var(--color-button-primary-border-default);
819
- }
820
- .ory-elements .ring-button-secondary-border-default {
821
- --tw-ring-color: var(--color-button-secondary-border-default);
822
- }
823
- .ory-elements .outline-hidden {
824
- --tw-outline-style: none;
825
- outline-style: none;
826
- @media (forced-colors: active) {
827
- outline: 2px solid transparent;
828
- outline-offset: 2px;
964
+ .ory-elements .focus-within\:border-input-border-focus {
965
+ &:focus-within {
966
+ border-color: var(--color-input-border-focus);
967
+ }
829
968
  }
830
- }
831
- .ory-elements .filter {
832
- filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
833
- }
834
- .ory-elements .transition {
835
- transition-property:
836
- color,
837
- background-color,
838
- border-color,
839
- outline-color,
840
- text-decoration-color,
841
- fill,
842
- stroke,
843
- --tw-gradient-from,
844
- --tw-gradient-via,
845
- --tw-gradient-to,
846
- opacity,
847
- box-shadow,
848
- transform,
849
- translate,
850
- scale,
851
- rotate,
852
- filter,
853
- -webkit-backdrop-filter,
854
- backdrop-filter,
855
- display,
856
- visibility,
857
- content-visibility,
858
- overlay,
859
- pointer-events;
860
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
861
- transition-duration: var(--tw-duration, var(--default-transition-duration));
862
- }
863
- .ory-elements .transition-all {
864
- transition-property: all;
865
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
866
- transition-duration: var(--tw-duration, var(--default-transition-duration));
867
- }
868
- .ory-elements .transition-colors {
869
- transition-property:
870
- color,
871
- background-color,
872
- border-color,
873
- outline-color,
874
- text-decoration-color,
875
- fill,
876
- stroke,
877
- --tw-gradient-from,
878
- --tw-gradient-via,
879
- --tw-gradient-to;
880
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
881
- transition-duration: var(--tw-duration, var(--default-transition-duration));
882
- }
883
- .ory-elements .duration-100 {
884
- --tw-duration: 100ms;
885
- transition-duration: 100ms;
886
- }
887
- .ory-elements .duration-700 {
888
- --tw-duration: 700ms;
889
- transition-duration: 700ms;
890
- }
891
- .ory-elements .ease-linear {
892
- --tw-ease: linear;
893
- transition-timing-function: linear;
894
- }
895
- .ory-elements .will-change-\[opacity\,transform\] {
896
- will-change: opacity, transform;
897
- }
898
- .ory-elements .select-none {
899
- -webkit-user-select: none;
900
- user-select: none;
901
- }
902
- .ory-elements .ring-inset {
903
- --tw-ring-inset: inset;
904
- }
905
- .ory-elements .group-hover\:text-button-identifier-foreground-hover {
906
- &:is(:where(.group):hover *) {
907
- @media (hover: hover) {
908
- color: var(--color-button-identifier-foreground-hover);
969
+ .ory-elements .hover\:border-button-identifier-border-border-hover {
970
+ &:hover {
971
+ @media (hover: hover) {
972
+ border-color: var(--color-button-identifier-border-border-hover);
973
+ }
909
974
  }
910
975
  }
911
- }
912
- .ory-elements .peer-checked\:block {
913
- &:is(:where(.peer):checked ~ *) {
914
- display: block;
976
+ .ory-elements .hover\:border-button-social-border-hover {
977
+ &:hover {
978
+ @media (hover: hover) {
979
+ border-color: var(--color-button-social-border-hover);
980
+ }
981
+ }
915
982
  }
916
- }
917
- .ory-elements .placeholder\:h-\[20px\] {
918
- &::placeholder {
919
- height: 20px;
983
+ .ory-elements .hover\:border-input-border-hover {
984
+ &:hover {
985
+ @media (hover: hover) {
986
+ border-color: var(--color-input-border-hover);
987
+ }
988
+ }
920
989
  }
921
- }
922
- .ory-elements .placeholder\:text-input-foreground-tertiary {
923
- &::placeholder {
924
- color: var(--color-input-foreground-tertiary);
990
+ .ory-elements .hover\:bg-button-identifier-background-hover {
991
+ &:hover {
992
+ @media (hover: hover) {
993
+ background-color: var(--color-button-identifier-background-hover);
994
+ }
995
+ }
925
996
  }
926
- }
927
- .ory-elements .first\:border-0 {
928
- &:first-child {
929
- border-style: var(--tw-border-style);
930
- border-width: 0px;
997
+ .ory-elements .hover\:bg-button-primary-background-hover {
998
+ &:hover {
999
+ @media (hover: hover) {
1000
+ background-color: var(--color-button-primary-background-hover);
1001
+ }
1002
+ }
931
1003
  }
932
- }
933
- .ory-elements .checked\:border-checkbox-border-checkbox-border-checked {
934
- &:checked {
935
- border-color: var(--color-checkbox-border-checkbox-border-checked);
1004
+ .ory-elements .hover\:bg-button-secondary-background-hover {
1005
+ &:hover {
1006
+ @media (hover: hover) {
1007
+ background-color: var(--color-button-secondary-background-hover);
1008
+ }
1009
+ }
1010
+ }
1011
+ .ory-elements .hover\:bg-button-social-background-hover {
1012
+ &:hover {
1013
+ @media (hover: hover) {
1014
+ background-color: var(--color-button-social-background-hover);
1015
+ }
1016
+ }
936
1017
  }
937
- }
938
- .ory-elements .checked\:bg-checkbox-background-checked {
939
- &:checked {
940
- background-color: var(--color-checkbox-background-checked);
1018
+ .ory-elements .hover\:bg-input-background-hover {
1019
+ &:hover {
1020
+ @media (hover: hover) {
1021
+ background-color: var(--color-input-background-hover);
1022
+ }
1023
+ }
941
1024
  }
942
- }
943
- .ory-elements .hover\:border-button-identifier-border-border-hover {
944
- &:hover {
945
- @media (hover: hover) {
946
- border-color: var(--color-button-identifier-border-border-hover);
1025
+ .ory-elements .hover\:bg-interface-background-default-primary-hover {
1026
+ &:hover {
1027
+ @media (hover: hover) {
1028
+ background-color: var(--color-interface-background-default-primary-hover);
1029
+ }
947
1030
  }
948
1031
  }
949
- }
950
- .ory-elements .hover\:border-button-social-border-hover {
951
- &:hover {
952
- @media (hover: hover) {
953
- border-color: var(--color-button-social-border-hover);
1032
+ .ory-elements .hover\:text-button-link-brand-brand-hover {
1033
+ &:hover {
1034
+ @media (hover: hover) {
1035
+ color: var(--color-button-link-brand-brand-hover);
1036
+ }
954
1037
  }
955
1038
  }
956
- }
957
- .ory-elements .hover\:border-input-border-hover {
958
- &:hover {
959
- @media (hover: hover) {
960
- border-color: var(--color-input-border-hover);
1039
+ .ory-elements .hover\:text-button-link-default-primary-hover {
1040
+ &:hover {
1041
+ @media (hover: hover) {
1042
+ color: var(--color-button-link-default-primary-hover);
1043
+ }
961
1044
  }
962
1045
  }
963
- }
964
- .ory-elements .hover\:bg-button-identifier-background-hover {
965
- &:hover {
966
- @media (hover: hover) {
967
- background-color: var(--color-button-identifier-background-hover);
1046
+ .ory-elements .hover\:text-button-link-default-secondary-hover {
1047
+ &:hover {
1048
+ @media (hover: hover) {
1049
+ color: var(--color-button-link-default-secondary-hover);
1050
+ }
968
1051
  }
969
1052
  }
970
- }
971
- .ory-elements .hover\:bg-button-primary-background-hover {
972
- &:hover {
973
- @media (hover: hover) {
974
- background-color: var(--color-button-primary-background-hover);
1053
+ .ory-elements .hover\:text-button-primary-foreground-hover {
1054
+ &:hover {
1055
+ @media (hover: hover) {
1056
+ color: var(--color-button-primary-foreground-hover);
1057
+ }
975
1058
  }
976
1059
  }
977
- }
978
- .ory-elements .hover\:bg-button-secondary-background-hover {
979
- &:hover {
980
- @media (hover: hover) {
981
- background-color: var(--color-button-secondary-background-hover);
1060
+ .ory-elements .hover\:text-button-secondary-foreground-hover {
1061
+ &:hover {
1062
+ @media (hover: hover) {
1063
+ color: var(--color-button-secondary-foreground-hover);
1064
+ }
982
1065
  }
983
1066
  }
984
- }
985
- .ory-elements .hover\:bg-button-social-background-hover {
986
- &:hover {
987
- @media (hover: hover) {
988
- background-color: var(--color-button-social-background-hover);
1067
+ .ory-elements .hover\:text-button-social-foreground-hover {
1068
+ &:hover {
1069
+ @media (hover: hover) {
1070
+ color: var(--color-button-social-foreground-hover);
1071
+ }
989
1072
  }
990
1073
  }
991
- }
992
- .ory-elements .hover\:bg-input-background-hover {
993
- &:hover {
994
- @media (hover: hover) {
995
- background-color: var(--color-input-background-hover);
1074
+ .ory-elements .hover\:ring-button-primary-border-hover {
1075
+ &:hover {
1076
+ @media (hover: hover) {
1077
+ --tw-ring-color: var(--color-button-primary-border-hover);
1078
+ }
996
1079
  }
997
1080
  }
998
- }
999
- .ory-elements .hover\:bg-interface-background-default-primary-hover {
1000
- &:hover {
1001
- @media (hover: hover) {
1002
- background-color: var(--color-interface-background-default-primary-hover);
1081
+ .ory-elements .hover\:ring-button-secondary-border-hover {
1082
+ &:hover {
1083
+ @media (hover: hover) {
1084
+ --tw-ring-color: var(--color-button-secondary-border-hover);
1085
+ }
1003
1086
  }
1004
1087
  }
1005
- }
1006
- .ory-elements .hover\:text-button-link-brand-brand-hover {
1007
- &:hover {
1008
- @media (hover: hover) {
1009
- color: var(--color-button-link-brand-brand-hover);
1088
+ .ory-elements .not-focus-within\:hover\:border-input-border-hover {
1089
+ &:not(*:focus-within) {
1090
+ &:hover {
1091
+ @media (hover: hover) {
1092
+ border-color: var(--color-input-border-hover);
1093
+ }
1094
+ }
1010
1095
  }
1011
1096
  }
1012
- }
1013
- .ory-elements .hover\:text-button-link-default-primary-hover {
1014
- &:hover {
1015
- @media (hover: hover) {
1016
- color: var(--color-button-link-default-primary-hover);
1097
+ .ory-elements .focus\:ring-0 {
1098
+ &:focus {
1099
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1100
+ box-shadow:
1101
+ var(--tw-inset-shadow),
1102
+ var(--tw-inset-ring-shadow),
1103
+ var(--tw-ring-offset-shadow),
1104
+ var(--tw-ring-shadow),
1105
+ var(--tw-shadow);
1017
1106
  }
1018
1107
  }
1019
- }
1020
- .ory-elements .hover\:text-button-link-default-secondary-hover {
1021
- &:hover {
1022
- @media (hover: hover) {
1023
- color: var(--color-button-link-default-secondary-hover);
1108
+ .ory-elements .focus\:outline-none {
1109
+ &:focus {
1110
+ --tw-outline-style: none;
1111
+ outline-style: none;
1024
1112
  }
1025
1113
  }
1026
- }
1027
- .ory-elements .hover\:text-button-primary-foreground-hover {
1028
- &:hover {
1029
- @media (hover: hover) {
1030
- color: var(--color-button-primary-foreground-hover);
1114
+ .ory-elements .focus-visible\:border-input-border-focus {
1115
+ &:focus-visible {
1116
+ border-color: var(--color-input-border-focus);
1031
1117
  }
1032
1118
  }
1033
- }
1034
- .ory-elements .hover\:text-button-secondary-foreground-hover {
1035
- &:hover {
1036
- @media (hover: hover) {
1037
- color: var(--color-button-secondary-foreground-hover);
1119
+ .ory-elements .focus-visible\:outline-hidden {
1120
+ &:focus-visible {
1121
+ --tw-outline-style: none;
1122
+ outline-style: none;
1123
+ @media (forced-colors: active) {
1124
+ outline: 2px solid transparent;
1125
+ outline-offset: 2px;
1126
+ }
1038
1127
  }
1039
1128
  }
1040
- }
1041
- .ory-elements .hover\:text-button-social-foreground-hover {
1042
- &:hover {
1043
- @media (hover: hover) {
1044
- color: var(--color-button-social-foreground-hover);
1129
+ .ory-elements .focus-visible\:outline-none {
1130
+ &:focus-visible {
1131
+ --tw-outline-style: none;
1132
+ outline-style: none;
1045
1133
  }
1046
1134
  }
1047
- }
1048
- .ory-elements .hover\:ring-button-primary-border-hover {
1049
- &:hover {
1050
- @media (hover: hover) {
1051
- --tw-ring-color: var(--color-button-primary-border-hover);
1135
+ .ory-elements .disabled\:cursor-default {
1136
+ &:disabled {
1137
+ cursor: default;
1052
1138
  }
1053
1139
  }
1054
- }
1055
- .ory-elements .hover\:ring-button-secondary-border-hover {
1056
- &:hover {
1057
- @media (hover: hover) {
1058
- --tw-ring-color: var(--color-button-secondary-border-hover);
1140
+ .ory-elements .disabled\:cursor-not-allowed {
1141
+ &:disabled {
1142
+ cursor: not-allowed;
1059
1143
  }
1060
1144
  }
1061
- }
1062
- .ory-elements .focus\:border-input-border-focus {
1063
- &:focus {
1064
- border-color: var(--color-input-border-focus);
1145
+ .ory-elements .disabled\:border-input-border-disabled {
1146
+ &:disabled {
1147
+ border-color: var(--color-input-border-disabled);
1148
+ }
1065
1149
  }
1066
- }
1067
- .ory-elements .focus\:ring-0 {
1068
- &:focus {
1069
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1070
- box-shadow:
1071
- var(--tw-inset-shadow),
1072
- var(--tw-inset-ring-shadow),
1073
- var(--tw-ring-offset-shadow),
1074
- var(--tw-ring-shadow),
1075
- var(--tw-shadow);
1150
+ .ory-elements .disabled\:bg-button-primary-background-disabled {
1151
+ &:disabled {
1152
+ background-color: var(--color-button-primary-background-disabled);
1153
+ }
1076
1154
  }
1077
- }
1078
- .ory-elements .focus-visible\:border-input-border-focus {
1079
- &:focus-visible {
1080
- border-color: var(--color-input-border-focus);
1155
+ .ory-elements .disabled\:bg-button-secondary-background-disabled {
1156
+ &:disabled {
1157
+ background-color: var(--color-button-secondary-background-disabled);
1158
+ }
1081
1159
  }
1082
- }
1083
- .ory-elements .focus-visible\:outline-hidden {
1084
- &:focus-visible {
1085
- --tw-outline-style: none;
1086
- outline-style: none;
1087
- @media (forced-colors: active) {
1088
- outline: 2px solid transparent;
1089
- outline-offset: 2px;
1160
+ .ory-elements .disabled\:bg-input-background-disabled {
1161
+ &:disabled {
1162
+ background-color: var(--color-input-background-disabled);
1090
1163
  }
1091
1164
  }
1092
- }
1093
- .ory-elements .disabled\:cursor-default {
1094
- &:disabled {
1095
- cursor: default;
1165
+ .ory-elements .disabled\:text-button-primary-foreground-disabled {
1166
+ &:disabled {
1167
+ color: var(--color-button-primary-foreground-disabled);
1168
+ }
1096
1169
  }
1097
- }
1098
- .ory-elements .disabled\:cursor-not-allowed {
1099
- &:disabled {
1100
- cursor: not-allowed;
1170
+ .ory-elements .disabled\:text-button-secondary-foreground-disabled {
1171
+ &:disabled {
1172
+ color: var(--color-button-secondary-foreground-disabled);
1173
+ }
1101
1174
  }
1102
- }
1103
- .ory-elements .disabled\:border-input-border-disabled {
1104
- &:disabled {
1105
- border-color: var(--color-input-border-disabled);
1175
+ .ory-elements .disabled\:text-input-foreground-disabled {
1176
+ &:disabled {
1177
+ color: var(--color-input-foreground-disabled);
1178
+ }
1106
1179
  }
1107
- }
1108
- .ory-elements .disabled\:bg-button-primary-background-disabled {
1109
- &:disabled {
1110
- background-color: var(--color-button-primary-background-disabled);
1180
+ .ory-elements .disabled\:opacity-50 {
1181
+ &:disabled {
1182
+ opacity: 50%;
1183
+ }
1111
1184
  }
1112
- }
1113
- .ory-elements .disabled\:bg-button-secondary-background-disabled {
1114
- &:disabled {
1115
- background-color: var(--color-button-secondary-background-disabled);
1185
+ .ory-elements .disabled\:ring-button-primary-border-disabled {
1186
+ &:disabled {
1187
+ --tw-ring-color: var(--color-button-primary-border-disabled);
1188
+ }
1116
1189
  }
1117
- }
1118
- .ory-elements .disabled\:bg-input-background-disabled {
1119
- &:disabled {
1120
- background-color: var(--color-input-background-disabled);
1190
+ .ory-elements .disabled\:ring-button-secondary-border-disabled {
1191
+ &:disabled {
1192
+ --tw-ring-color: var(--color-button-secondary-border-disabled);
1193
+ }
1121
1194
  }
1122
- }
1123
- .ory-elements .disabled\:text-button-primary-foreground-disabled {
1124
- &:disabled {
1125
- color: var(--color-button-primary-foreground-disabled);
1195
+ .ory-elements .disabled\:hover\:bg-ui-transparent {
1196
+ &:disabled {
1197
+ &:hover {
1198
+ @media (hover: hover) {
1199
+ background-color: var(--color-ui-transparent);
1200
+ }
1201
+ }
1202
+ }
1126
1203
  }
1127
- }
1128
- .ory-elements .disabled\:text-button-secondary-foreground-disabled {
1129
- &:disabled {
1130
- color: var(--color-button-secondary-foreground-disabled);
1204
+ .ory-elements .has-disabled\:opacity-50 {
1205
+ &:has(*:disabled) {
1206
+ opacity: 50%;
1207
+ }
1131
1208
  }
1132
- }
1133
- .ory-elements .disabled\:text-input-foreground-disabled {
1134
- &:disabled {
1135
- color: var(--color-input-foreground-disabled);
1209
+ .ory-elements .data-disabled\:pointer-events-none {
1210
+ &[data-disabled] {
1211
+ pointer-events: none;
1212
+ }
1136
1213
  }
1137
- }
1138
- .ory-elements .disabled\:opacity-50 {
1139
- &:disabled {
1140
- opacity: 50%;
1214
+ .ory-elements .data-\[disabled\]\:bg-button-secondary-background-disabled {
1215
+ &[data-disabled] {
1216
+ background-color: var(--color-button-secondary-background-disabled);
1217
+ }
1141
1218
  }
1142
- }
1143
- .ory-elements .disabled\:ring-button-primary-border-disabled {
1144
- &:disabled {
1145
- --tw-ring-color: var(--color-button-primary-border-disabled);
1219
+ .ory-elements .data-\[disabled\]\:text-button-secondary-foreground-disabled {
1220
+ &[data-disabled] {
1221
+ color: var(--color-button-secondary-foreground-disabled);
1222
+ }
1146
1223
  }
1147
- }
1148
- .ory-elements .disabled\:ring-button-secondary-border-disabled {
1149
- &:disabled {
1150
- --tw-ring-color: var(--color-button-secondary-border-disabled);
1224
+ .ory-elements .data-\[disabled\=true\]\:border-input-border-disabled {
1225
+ &[data-disabled=true] {
1226
+ border-color: var(--color-input-border-disabled);
1227
+ }
1151
1228
  }
1152
- }
1153
- .ory-elements .disabled\:hover\:bg-ui-transparent {
1154
- &:disabled {
1155
- &:hover {
1156
- @media (hover: hover) {
1157
- background-color: var(--color-ui-transparent);
1158
- }
1229
+ .ory-elements .data-\[disabled\=true\]\:bg-input-background-disabled {
1230
+ &[data-disabled=true] {
1231
+ background-color: var(--color-input-background-disabled);
1159
1232
  }
1160
1233
  }
1161
- }
1162
- .ory-elements .has-disabled\:opacity-50 {
1163
- &:has(*:disabled) {
1164
- opacity: 50%;
1234
+ .ory-elements .data-\[disabled\=true\]\:text-input-foreground-disabled {
1235
+ &[data-disabled=true] {
1236
+ color: var(--color-input-foreground-disabled);
1237
+ }
1165
1238
  }
1166
- }
1167
- .ory-elements .data-disabled\:pointer-events-none {
1168
- &[data-disabled] {
1169
- pointer-events: none;
1239
+ .ory-elements .data-\[state\=checked\]\:translate-x-3 {
1240
+ &[data-state=checked] {
1241
+ --tw-translate-x: calc(var(--spacing) * 3);
1242
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1243
+ }
1170
1244
  }
1171
- }
1172
- .ory-elements .data-\[disabled\]\:bg-button-secondary-background-disabled {
1173
- &[data-disabled] {
1174
- background-color: var(--color-button-secondary-background-disabled);
1245
+ .ory-elements .data-\[state\=checked\]\:border-toggle-border-checked {
1246
+ &[data-state=checked] {
1247
+ border-color: var(--color-toggle-border-checked);
1248
+ }
1175
1249
  }
1176
- }
1177
- .ory-elements .data-\[disabled\]\:text-button-secondary-foreground-disabled {
1178
- &[data-disabled] {
1179
- color: var(--color-button-secondary-foreground-disabled);
1250
+ .ory-elements .data-\[state\=checked\]\:bg-toggle-background-checked {
1251
+ &[data-state=checked] {
1252
+ background-color: var(--color-toggle-background-checked);
1253
+ }
1180
1254
  }
1181
- }
1182
- .ory-elements .data-\[state\=checked\]\:translate-x-3 {
1183
- &[data-state=checked] {
1184
- --tw-translate-x: calc(var(--spacing) * 3);
1185
- translate: var(--tw-translate-x) var(--tw-translate-y);
1255
+ .ory-elements .data-\[state\=checked\]\:bg-toggle-foreground-checked {
1256
+ &[data-state=checked] {
1257
+ background-color: var(--color-toggle-foreground-checked);
1258
+ }
1186
1259
  }
1187
- }
1188
- .ory-elements .data-\[state\=checked\]\:border-toggle-border-checked {
1189
- &[data-state=checked] {
1190
- border-color: var(--color-toggle-border-checked);
1260
+ .ory-elements .data-\[state\=closed\]\:animate-drop-down-out {
1261
+ &[data-state=closed] {
1262
+ animation: var(--animate-drop-down-out);
1263
+ }
1191
1264
  }
1192
- }
1193
- .ory-elements .data-\[state\=checked\]\:bg-toggle-background-checked {
1194
- &[data-state=checked] {
1195
- background-color: var(--color-toggle-background-checked);
1265
+ .ory-elements .max-sm\:bottom-0 {
1266
+ @media (width < 40rem) {
1267
+ bottom: calc(var(--spacing) * 0);
1268
+ }
1196
1269
  }
1197
- }
1198
- .ory-elements .data-\[state\=checked\]\:bg-toggle-foreground-checked {
1199
- &[data-state=checked] {
1200
- background-color: var(--color-toggle-foreground-checked);
1270
+ .ory-elements .max-sm\:left-8 {
1271
+ @media (width < 40rem) {
1272
+ left: calc(var(--spacing) * 8);
1273
+ }
1201
1274
  }
1202
- }
1203
- .ory-elements .data-\[state\=closed\]\:animate-drop-down-out {
1204
- &[data-state=closed] {
1205
- animation: var(--animate-drop-down-out);
1275
+ .ory-elements .max-sm\:hidden {
1276
+ @media (width < 40rem) {
1277
+ display: none;
1278
+ }
1206
1279
  }
1207
- }
1208
- .ory-elements .max-sm\:bottom-0 {
1209
- @media (width < 40rem) {
1210
- bottom: calc(var(--spacing) * 0);
1280
+ .ory-elements .max-sm\:translate-y-full {
1281
+ @media (width < 40rem) {
1282
+ --tw-translate-y: 100%;
1283
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1284
+ }
1211
1285
  }
1212
- }
1213
- .ory-elements .max-sm\:left-8 {
1214
- @media (width < 40rem) {
1215
- left: calc(var(--spacing) * 8);
1286
+ .ory-elements .max-sm\:rounded-b-branding {
1287
+ @media (width < 40rem) {
1288
+ border-bottom-right-radius: var(--radius-branding);
1289
+ border-bottom-left-radius: var(--radius-branding);
1290
+ }
1216
1291
  }
1217
- }
1218
- .ory-elements .max-sm\:hidden {
1219
- @media (width < 40rem) {
1220
- display: none;
1292
+ .ory-elements .max-sm\:py-\[7px\] {
1293
+ @media (width < 40rem) {
1294
+ padding-block: 7px;
1295
+ }
1221
1296
  }
1222
- }
1223
- .ory-elements .max-sm\:translate-y-full {
1224
- @media (width < 40rem) {
1225
- --tw-translate-y: 100%;
1226
- translate: var(--tw-translate-x) var(--tw-translate-y);
1297
+ .ory-elements .sm\:top-8 {
1298
+ @media (width >= 40rem) {
1299
+ top: calc(var(--spacing) * 8);
1300
+ }
1227
1301
  }
1228
- }
1229
- .ory-elements .max-sm\:rounded-b-branding {
1230
- @media (width < 40rem) {
1231
- border-bottom-right-radius: var(--radius-branding);
1232
- border-bottom-left-radius: var(--radius-branding);
1302
+ .ory-elements .sm\:right-0 {
1303
+ @media (width >= 40rem) {
1304
+ right: calc(var(--spacing) * 0);
1305
+ }
1233
1306
  }
1234
- }
1235
- .ory-elements .max-sm\:py-\[7px\] {
1236
- @media (width < 40rem) {
1237
- padding-block: 7px;
1307
+ .ory-elements .sm\:block {
1308
+ @media (width >= 40rem) {
1309
+ display: block;
1310
+ }
1238
1311
  }
1239
- }
1240
- .ory-elements .sm\:top-8 {
1241
- @media (width >= 40rem) {
1242
- top: calc(var(--spacing) * 8);
1312
+ .ory-elements .sm\:hidden {
1313
+ @media (width >= 40rem) {
1314
+ display: none;
1315
+ }
1243
1316
  }
1244
- }
1245
- .ory-elements .sm\:right-0 {
1246
- @media (width >= 40rem) {
1247
- right: calc(var(--spacing) * 0);
1317
+ .ory-elements .sm\:w-\[480px\] {
1318
+ @media (width >= 40rem) {
1319
+ width: 480px;
1320
+ }
1248
1321
  }
1249
- }
1250
- .ory-elements .sm\:block {
1251
- @media (width >= 40rem) {
1252
- display: block;
1322
+ .ory-elements .sm\:max-w-\[480px\] {
1323
+ @media (width >= 40rem) {
1324
+ max-width: 480px;
1325
+ }
1253
1326
  }
1254
- }
1255
- .ory-elements .sm\:hidden {
1256
- @media (width >= 40rem) {
1257
- display: none;
1327
+ .ory-elements .sm\:translate-x-full {
1328
+ @media (width >= 40rem) {
1329
+ --tw-translate-x: 100%;
1330
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1331
+ }
1258
1332
  }
1259
- }
1260
- .ory-elements .sm\:w-\[480px\] {
1261
- @media (width >= 40rem) {
1262
- width: 480px;
1333
+ .ory-elements .sm\:grid-cols-2 {
1334
+ @media (width >= 40rem) {
1335
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1336
+ }
1263
1337
  }
1264
- }
1265
- .ory-elements .sm\:max-w-\[480px\] {
1266
- @media (width >= 40rem) {
1267
- max-width: 480px;
1338
+ .ory-elements .sm\:grid-cols-3 {
1339
+ @media (width >= 40rem) {
1340
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1341
+ }
1268
1342
  }
1269
- }
1270
- .ory-elements .sm\:translate-x-full {
1271
- @media (width >= 40rem) {
1272
- --tw-translate-x: 100%;
1273
- translate: var(--tw-translate-x) var(--tw-translate-y);
1343
+ .ory-elements .sm\:flex-row {
1344
+ @media (width >= 40rem) {
1345
+ flex-direction: row;
1346
+ }
1274
1347
  }
1275
- }
1276
- .ory-elements .sm\:grid-cols-2 {
1277
- @media (width >= 40rem) {
1278
- grid-template-columns: repeat(2, minmax(0, 1fr));
1348
+ .ory-elements .sm\:items-center {
1349
+ @media (width >= 40rem) {
1350
+ align-items: center;
1351
+ }
1279
1352
  }
1280
- }
1281
- .ory-elements .sm\:grid-cols-3 {
1282
- @media (width >= 40rem) {
1283
- grid-template-columns: repeat(3, minmax(0, 1fr));
1353
+ .ory-elements .sm\:items-end {
1354
+ @media (width >= 40rem) {
1355
+ align-items: flex-end;
1356
+ }
1284
1357
  }
1285
- }
1286
- .ory-elements .sm\:flex-row {
1287
- @media (width >= 40rem) {
1288
- flex-direction: row;
1358
+ .ory-elements .sm\:rounded-cards {
1359
+ @media (width >= 40rem) {
1360
+ border-radius: var(--radius-cards);
1361
+ }
1289
1362
  }
1290
- }
1291
- .ory-elements .sm\:items-center {
1292
- @media (width >= 40rem) {
1293
- align-items: center;
1363
+ .ory-elements .sm\:rounded-r-branding {
1364
+ @media (width >= 40rem) {
1365
+ border-top-right-radius: var(--radius-branding);
1366
+ border-bottom-right-radius: var(--radius-branding);
1367
+ }
1294
1368
  }
1295
- }
1296
- .ory-elements .sm\:items-end {
1297
- @media (width >= 40rem) {
1298
- align-items: flex-end;
1369
+ .ory-elements .sm\:border {
1370
+ @media (width >= 40rem) {
1371
+ border-style: var(--tw-border-style);
1372
+ border-width: 1px;
1373
+ }
1299
1374
  }
1300
- }
1301
- .ory-elements .sm\:rounded-cards {
1302
- @media (width >= 40rem) {
1303
- border-radius: var(--radius-cards);
1375
+ .ory-elements .sm\:px-12 {
1376
+ @media (width >= 40rem) {
1377
+ padding-inline: calc(var(--spacing) * 12);
1378
+ }
1304
1379
  }
1305
- }
1306
- .ory-elements .sm\:rounded-r-branding {
1307
- @media (width >= 40rem) {
1308
- border-top-right-radius: var(--radius-branding);
1309
- border-bottom-right-radius: var(--radius-branding);
1380
+ .ory-elements .sm\:py-14 {
1381
+ @media (width >= 40rem) {
1382
+ padding-block: calc(var(--spacing) * 14);
1383
+ }
1310
1384
  }
1311
- }
1312
- .ory-elements .sm\:border {
1313
- @media (width >= 40rem) {
1314
- border-style: var(--tw-border-style);
1315
- border-width: 1px;
1385
+ .ory-elements .sm\:pl-\[7px\] {
1386
+ @media (width >= 40rem) {
1387
+ padding-left: 7px;
1388
+ }
1316
1389
  }
1317
- }
1318
- .ory-elements .sm\:px-12 {
1319
- @media (width >= 40rem) {
1320
- padding-inline: calc(var(--spacing) * 12);
1390
+ .ory-elements .md\:w-\[712px\] {
1391
+ @media (width >= 48rem) {
1392
+ width: 712px;
1393
+ }
1321
1394
  }
1322
- }
1323
- .ory-elements .sm\:py-14 {
1324
- @media (width >= 40rem) {
1325
- padding-block: calc(var(--spacing) * 14);
1395
+ .ory-elements .md\:max-w-96 {
1396
+ @media (width >= 48rem) {
1397
+ max-width: calc(var(--spacing) * 96);
1398
+ }
1326
1399
  }
1327
- }
1328
- .ory-elements .sm\:pl-\[7px\] {
1329
- @media (width >= 40rem) {
1330
- padding-left: 7px;
1400
+ .ory-elements .md\:max-w-\[712px\] {
1401
+ @media (width >= 48rem) {
1402
+ max-width: 712px;
1403
+ }
1331
1404
  }
1332
- }
1333
- .ory-elements .md\:max-w-96 {
1334
- @media (width >= 48rem) {
1335
- max-width: calc(var(--spacing) * 96);
1405
+ .ory-elements .md\:grid-cols-2 {
1406
+ @media (width >= 48rem) {
1407
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1408
+ }
1336
1409
  }
1337
- }
1338
- .ory-elements .md\:max-w-\[712px\] {
1339
- @media (width >= 48rem) {
1340
- max-width: 712px;
1410
+ .ory-elements .md\:grid-cols-3 {
1411
+ @media (width >= 48rem) {
1412
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1413
+ }
1341
1414
  }
1342
- }
1343
- .ory-elements .md\:grid-cols-2 {
1344
- @media (width >= 48rem) {
1345
- grid-template-columns: repeat(2, minmax(0, 1fr));
1415
+ .ory-elements .md\:grid-cols-5 {
1416
+ @media (width >= 48rem) {
1417
+ grid-template-columns: repeat(5, minmax(0, 1fr));
1418
+ }
1346
1419
  }
1347
- }
1348
- .ory-elements .md\:grid-cols-3 {
1349
- @media (width >= 48rem) {
1350
- grid-template-columns: repeat(3, minmax(0, 1fr));
1420
+ .ory-elements .md\:flex-row {
1421
+ @media (width >= 48rem) {
1422
+ flex-direction: row;
1423
+ }
1351
1424
  }
1352
- }
1353
- .ory-elements .md\:grid-cols-5 {
1354
- @media (width >= 48rem) {
1355
- grid-template-columns: repeat(5, minmax(0, 1fr));
1425
+ .ory-elements .md\:items-center {
1426
+ @media (width >= 48rem) {
1427
+ align-items: center;
1428
+ }
1356
1429
  }
1357
- }
1358
- .ory-elements .md\:flex-row {
1359
- @media (width >= 48rem) {
1360
- flex-direction: row;
1430
+ .ory-elements .md\:justify-between {
1431
+ @media (width >= 48rem) {
1432
+ justify-content: space-between;
1433
+ }
1361
1434
  }
1362
- }
1363
- .ory-elements .md\:items-center {
1364
- @media (width >= 48rem) {
1365
- align-items: center;
1435
+ .ory-elements .lg\:w-\[802px\] {
1436
+ @media (width >= 64rem) {
1437
+ width: 802px;
1438
+ }
1366
1439
  }
1367
- }
1368
- .ory-elements .md\:justify-between {
1369
- @media (width >= 48rem) {
1370
- justify-content: space-between;
1440
+ .ory-elements .lg\:max-w-\[802px\] {
1441
+ @media (width >= 64rem) {
1442
+ max-width: 802px;
1443
+ }
1371
1444
  }
1372
- }
1373
- .ory-elements .lg\:max-w-\[802px\] {
1374
- @media (width >= 64rem) {
1375
- max-width: 802px;
1445
+ .ory-elements .lg\:py-4\.5 {
1446
+ @media (width >= 64rem) {
1447
+ padding-block: calc(var(--spacing) * 4.5);
1448
+ }
1376
1449
  }
1377
- }
1378
- .ory-elements .lg\:py-4\.5 {
1379
- @media (width >= 64rem) {
1380
- padding-block: calc(var(--spacing) * 4.5);
1450
+ .ory-elements .xl\:w-\[896px\] {
1451
+ @media (width >= 80rem) {
1452
+ width: 896px;
1453
+ }
1381
1454
  }
1382
- }
1383
- .ory-elements .xl\:max-w-\[896px\] {
1384
- @media (width >= 80rem) {
1385
- max-width: 896px;
1455
+ .ory-elements .xl\:max-w-\[896px\] {
1456
+ @media (width >= 80rem) {
1457
+ max-width: 896px;
1458
+ }
1386
1459
  }
1387
- }
1388
- .ory-elements .loading\:cursor-wait {
1389
- &[data-loading=true] {
1390
- cursor: wait;
1460
+ .ory-elements .loading\:cursor-wait {
1461
+ &[data-loading=true] {
1462
+ cursor: wait;
1463
+ }
1391
1464
  }
1392
- }
1393
- .ory-elements .loading\:border-button-social-border-disabled {
1394
- &[data-loading=true] {
1395
- border-color: var(--color-button-social-border-disabled);
1465
+ .ory-elements .loading\:border-button-social-border-disabled {
1466
+ &[data-loading=true] {
1467
+ border-color: var(--color-button-social-border-disabled);
1468
+ }
1396
1469
  }
1397
- }
1398
- .ory-elements .loading\:bg-button-primary-background-default {
1399
- &[data-loading=true] {
1400
- background-color: var(--color-button-primary-background-default);
1470
+ .ory-elements .loading\:bg-button-primary-background-default {
1471
+ &[data-loading=true] {
1472
+ background-color: var(--color-button-primary-background-default);
1473
+ }
1401
1474
  }
1402
- }
1403
- .ory-elements .loading\:bg-button-secondary-background-default {
1404
- &[data-loading=true] {
1405
- background-color: var(--color-button-secondary-background-default);
1475
+ .ory-elements .loading\:bg-button-secondary-background-default {
1476
+ &[data-loading=true] {
1477
+ background-color: var(--color-button-secondary-background-default);
1478
+ }
1406
1479
  }
1407
- }
1408
- .ory-elements .loading\:bg-button-social-background-disabled {
1409
- &[data-loading=true] {
1410
- background-color: var(--color-button-social-background-disabled);
1480
+ .ory-elements .loading\:bg-button-social-background-disabled {
1481
+ &[data-loading=true] {
1482
+ background-color: var(--color-button-social-background-disabled);
1483
+ }
1411
1484
  }
1412
- }
1413
- .ory-elements .loading\:text-button-primary-foreground-default {
1414
- &[data-loading=true] {
1415
- color: var(--color-button-primary-foreground-default);
1485
+ .ory-elements .loading\:text-button-primary-foreground-default {
1486
+ &[data-loading=true] {
1487
+ color: var(--color-button-primary-foreground-default);
1488
+ }
1416
1489
  }
1417
- }
1418
- .ory-elements .loading\:text-button-secondary-foreground-default {
1419
- &[data-loading=true] {
1420
- color: var(--color-button-secondary-foreground-default);
1490
+ .ory-elements .loading\:text-button-secondary-foreground-default {
1491
+ &[data-loading=true] {
1492
+ color: var(--color-button-secondary-foreground-default);
1493
+ }
1421
1494
  }
1422
- }
1423
- .ory-elements .loading\:text-button-social-foreground-disabled {
1424
- &[data-loading=true] {
1425
- color: var(--color-button-social-foreground-disabled);
1495
+ .ory-elements .loading\:text-button-social-foreground-disabled {
1496
+ &[data-loading=true] {
1497
+ color: var(--color-button-social-foreground-disabled);
1498
+ }
1426
1499
  }
1427
- }
1428
- .ory-elements .loading\:ring-button-primary-border-default {
1429
- &[data-loading=true] {
1430
- --tw-ring-color: var(--color-button-primary-border-default);
1500
+ .ory-elements .loading\:ring-button-primary-border-default {
1501
+ &[data-loading=true] {
1502
+ --tw-ring-color: var(--color-button-primary-border-default);
1503
+ }
1431
1504
  }
1432
- }
1433
- .ory-elements .loading\:ring-button-secondary-border-default {
1434
- &[data-loading=true] {
1435
- --tw-ring-color: var(--color-button-secondary-border-default);
1505
+ .ory-elements .loading\:ring-button-secondary-border-default {
1506
+ &[data-loading=true] {
1507
+ --tw-ring-color: var(--color-button-secondary-border-default);
1508
+ }
1436
1509
  }
1437
- }
1438
- .ory-elements .loading\:before\:pointer-events-none {
1439
- &[data-loading=true] {
1440
- &::before {
1441
- content: var(--tw-content);
1442
- pointer-events: none;
1510
+ .ory-elements .loading\:before\:pointer-events-none {
1511
+ &[data-loading=true] {
1512
+ &::before {
1513
+ content: var(--tw-content);
1514
+ pointer-events: none;
1515
+ }
1443
1516
  }
1444
1517
  }
1445
- }
1446
- .ory-elements .loading\:before\:absolute {
1447
- &[data-loading=true] {
1448
- &::before {
1449
- content: var(--tw-content);
1450
- position: absolute;
1518
+ .ory-elements .loading\:before\:absolute {
1519
+ &[data-loading=true] {
1520
+ &::before {
1521
+ content: var(--tw-content);
1522
+ position: absolute;
1523
+ }
1451
1524
  }
1452
1525
  }
1453
- }
1454
- .ory-elements .loading\:before\:inset-0 {
1455
- &[data-loading=true] {
1456
- &::before {
1457
- content: var(--tw-content);
1458
- inset: calc(var(--spacing) * 0);
1526
+ .ory-elements .loading\:before\:inset-0 {
1527
+ &[data-loading=true] {
1528
+ &::before {
1529
+ content: var(--tw-content);
1530
+ inset: calc(var(--spacing) * 0);
1531
+ }
1459
1532
  }
1460
1533
  }
1461
- }
1462
- .ory-elements .loading\:before\:bg-button-primary-background-default {
1463
- &[data-loading=true] {
1464
- &::before {
1465
- content: var(--tw-content);
1466
- background-color: var(--color-button-primary-background-default);
1534
+ .ory-elements .loading\:before\:bg-button-primary-background-default {
1535
+ &[data-loading=true] {
1536
+ &::before {
1537
+ content: var(--tw-content);
1538
+ background-color: var(--color-button-primary-background-default);
1539
+ }
1467
1540
  }
1468
1541
  }
1469
- }
1470
- .ory-elements .loading\:before\:bg-button-secondary-background-default {
1471
- &[data-loading=true] {
1472
- &::before {
1473
- content: var(--tw-content);
1474
- background-color: var(--color-button-secondary-background-default);
1542
+ .ory-elements .loading\:before\:bg-button-secondary-background-default {
1543
+ &[data-loading=true] {
1544
+ &::before {
1545
+ content: var(--tw-content);
1546
+ background-color: var(--color-button-secondary-background-default);
1547
+ }
1475
1548
  }
1476
1549
  }
1477
- }
1478
- .ory-elements .loading\:before\:opacity-80 {
1479
- &[data-loading=true] {
1480
- &::before {
1481
- content: var(--tw-content);
1482
- opacity: 80%;
1550
+ .ory-elements .loading\:before\:opacity-80 {
1551
+ &[data-loading=true] {
1552
+ &::before {
1553
+ content: var(--tw-content);
1554
+ opacity: 80%;
1555
+ }
1483
1556
  }
1484
1557
  }
1485
- }
1486
- .ory-elements .loading\:before\:content-\[\'\'\] {
1487
- &[data-loading=true] {
1488
- &::before {
1489
- content: var(--tw-content);
1490
- --tw-content: "";
1491
- content: var(--tw-content);
1558
+ .ory-elements .loading\:before\:content-\[\'\'\] {
1559
+ &[data-loading=true] {
1560
+ &::before {
1561
+ content: var(--tw-content);
1562
+ --tw-content: "";
1563
+ content: var(--tw-content);
1564
+ }
1492
1565
  }
1493
1566
  }
1494
1567
  }
1495
- .ory-elements,
1496
- :host {
1497
- --font-mono:
1498
- ui-monospace,
1499
- SFMono-Regular,
1500
- Menlo,
1501
- Monaco,
1502
- Consolas,
1503
- "Liberation Mono",
1504
- "Courier New",
1505
- monospace;
1506
- --spacing: 0.25rem;
1507
- --breakpoint-sm: 40rem;
1508
- --text-xs: 0.75rem;
1509
- --text-xs--line-height: calc(1 / 0.75);
1510
- --text-sm: 0.875rem;
1511
- --text-sm--line-height: calc(1.25 / 0.875);
1512
- --text-lg: 1.125rem;
1513
- --text-lg--line-height: calc(1.75 / 1.125);
1514
- --text-xl: 1.25rem;
1515
- --text-xl--line-height: calc(1.75 / 1.25);
1516
- --font-weight-normal: 400;
1517
- --font-weight-medium: 500;
1518
- --font-weight-semibold: 600;
1519
- --font-weight-bold: 700;
1520
- --leading-tight: 1.25;
1521
- --leading-normal: 1.5;
1522
- --animate-spin: spin 1s linear infinite;
1523
- --default-transition-duration: 150ms;
1524
- --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1525
- --default-mono-font-family: var(--font-mono);
1526
- --ui-100: #f1f5f9;
1527
- --ui-200: #e2e8f0;
1528
- --ui-300: #cbd5e1;
1529
- --ui-400: #94a3b8;
1530
- --ui-50: #f8fafc;
1531
- --ui-500: #64748b;
1532
- --ui-600: #475569;
1533
- --ui-700: #334155;
1534
- --ui-800: #1e293b;
1535
- --ui-900: #0f172a;
1536
- --ui-950: #020617;
1537
- --ui-black: #000000;
1538
- --ui-danger: #dc2626;
1539
- --ui-success: #22c55e;
1540
- --ui-transparent: #ffffff00;
1541
- --ui-warning: #eab308;
1542
- --ui-white: #ffffff;
1543
- --button-identifier-background-default: var( --interface-background-brand-secondary );
1544
- --button-identifier-background-hover: var( --interface-background-brand-secondary-hover );
1545
- --button-identifier-border-border-default: var( --interface-border-brand-brand );
1546
- --button-identifier-border-border-hover: var(--interface-border-brand-brand);
1547
- --button-identifier-foreground-default: var( --interface-foreground-brand-on-secondary );
1548
- --button-identifier-foreground-hover: var( --interface-foreground-brand-on-secondary );
1549
- --button-link-brand-brand: var(--interface-foreground-brand-primary);
1550
- --button-link-brand-brand-hover: var(--interface-foreground-default-primary);
1551
- --button-link-default-primary: var(--interface-foreground-default-primary);
1552
- --button-link-default-primary-hover: var( --interface-foreground-brand-primary );
1553
- --button-link-default-secondary: var( --interface-foreground-default-secondary );
1554
- --button-link-default-secondary-hover: var( --interface-foreground-default-tertiary );
1555
- --button-link-disabled-disabled: var( --interface-foreground-disabled-disabled );
1556
- --button-primary-background-default: var( --interface-background-brand-primary );
1557
- --button-primary-background-disabled: var( --interface-background-disabled-disabled );
1558
- --button-primary-background-hover: var( --interface-background-brand-primary-hover );
1559
- --button-primary-border-default: var(--interface-border-default-none);
1560
- --button-primary-border-disabled: var(--interface-border-disabled-disabled);
1561
- --button-primary-border-hover: var(--interface-border-default-none);
1562
- --button-primary-foreground-default: var( --interface-foreground-brand-on-primary );
1563
- --button-primary-foreground-disabled: var( --interface-foreground-disabled-on-disabled );
1564
- --button-primary-foreground-hover: var( --interface-foreground-brand-on-primary );
1565
- --button-secondary-background-default: var( --interface-background-default-primary );
1566
- --button-secondary-background-disabled: var( --interface-background-disabled-disabled );
1567
- --button-secondary-background-hover: var( --interface-background-default-primary-hover );
1568
- --button-secondary-border-default: var(--interface-border-default-primary);
1569
- --button-secondary-border-disabled: var(--interface-border-disabled-disabled);
1570
- --button-secondary-border-hover: var(--interface-border-default-primary);
1571
- --button-secondary-foreground-default: var( --interface-foreground-default-primary );
1572
- --button-secondary-foreground-disabled: var( --interface-foreground-disabled-on-disabled );
1573
- --button-secondary-foreground-hover: var( --interface-foreground-default-secondary );
1574
- --button-social-background-default: var( --interface-background-default-primary );
1575
- --button-social-background-disabled: var( --interface-background-disabled-disabled );
1576
- --button-social-background-generic-provider: var( --interface-background-default-inverted );
1577
- --button-social-background-hover: var( --interface-background-default-primary-hover );
1578
- --button-social-border-default: var(--interface-border-default-primary);
1579
- --button-social-border-disabled: var(--interface-border-disabled-disabled);
1580
- --button-social-border-generic-provider: var(--interface-border-default-none);
1581
- --button-social-border-hover: var(--interface-border-default-primary);
1582
- --button-social-foreground-default: var( --interface-foreground-default-primary );
1583
- --button-social-foreground-disabled: var( --interface-foreground-disabled-on-disabled );
1584
- --button-social-foreground-generic-provider: var( --interface-foreground-default-inverted );
1585
- --button-social-foreground-hover: var( --interface-foreground-default-secondary );
1586
- --checkbox-background-checked: var(--interface-background-brand-primary);
1587
- --checkbox-background-default: var(--interface-background-default-secondary);
1588
- --checkbox-border-checkbox-border-checked: var( --interface-border-brand-brand );
1589
- --checkbox-border-checkbox-border-default: var( --interface-border-default-primary );
1590
- --checkbox-foreground-checked: var(--interface-foreground-brand-on-primary);
1591
- --checkbox-foreground-default: var(--interface-foreground-default-primary);
1592
- --form-background-default: var(--interface-background-default-primary);
1593
- --form-border-default: var(--interface-border-default-primary);
1594
- --input-background-default: var(--interface-background-default-primary);
1595
- --input-background-disabled: var(--interface-background-disabled-disabled);
1596
- --input-background-hover: var(--interface-background-default-primary-hover);
1597
- --input-border-default: var(--interface-border-default-primary);
1598
- --input-border-disabled: var(--interface-border-disabled-disabled);
1599
- --input-border-focus: var(--interface-border-brand-brand);
1600
- --input-border-hover: var(--interface-border-default-primary);
1601
- --input-foreground-disabled: var(--interface-foreground-disabled-on-disabled);
1602
- --input-foreground-primary: var(--interface-foreground-default-primary);
1603
- --input-foreground-secondary: var(--interface-foreground-default-secondary);
1604
- --input-foreground-tertiary: var(--interface-foreground-default-tertiary);
1605
- --interface-background-brand-primary: var(--brand-500);
1606
- --interface-background-brand-primary-hover: var(--brand-400);
1607
- --interface-background-brand-secondary: var(--brand-50);
1608
- --interface-background-brand-secondary-hover: var(--brand-100);
1609
- --interface-background-default-inverted: var(--ui-900);
1610
- --interface-background-default-inverted-hover: var(--ui-800);
1611
- --interface-background-default-none: var(--ui-transparent);
1612
- --interface-background-default-primary: var(--ui-white);
1613
- --interface-background-default-primary-hover: var(--ui-50);
1614
- --interface-background-default-secondary: var(--ui-50);
1615
- --interface-background-default-secondary-hover: var(--ui-200);
1616
- --interface-background-default-tertiary: var(--ui-200);
1617
- --interface-background-default-tertiary-hover: var(--ui-300);
1618
- --interface-background-disabled-disabled: var(--ui-200);
1619
- --interface-background-validation-danger: var(--ui-danger);
1620
- --interface-background-validation-success: var(--ui-success);
1621
- --interface-background-validation-warning: var(--ui-warning);
1622
- --interface-border-brand-brand: var(--brand-500);
1623
- --interface-border-default-inverted: var(--ui-700);
1624
- --interface-border-default-none: var(--ui-transparent);
1625
- --interface-border-default-primary: var(--ui-300);
1626
- --interface-border-disabled-disabled: var(--ui-300);
1627
- --interface-border-validation-danger: var(--ui-danger);
1628
- --interface-border-validation-success: var(--ui-success);
1629
- --interface-border-validation-warning: var(--ui-warning);
1630
- --interface-foreground-brand-on-primary: var(--brand-50);
1631
- --interface-foreground-brand-on-secondary: var(--brand-950);
1632
- --interface-foreground-brand-primary: var(--brand-500);
1633
- --interface-foreground-brand-secondary: var(--brand-50);
1634
- --interface-foreground-default-inverted: var(--ui-white);
1635
- --interface-foreground-default-primary: var(--ui-900);
1636
- --interface-foreground-default-secondary: var(--ui-700);
1637
- --interface-foreground-default-tertiary: var(--ui-500);
1638
- --interface-foreground-disabled-disabled: var(--ui-300);
1639
- --interface-foreground-disabled-on-disabled: var(--ui-400);
1640
- --interface-foreground-validation-danger: var(--ui-danger);
1641
- --interface-foreground-validation-success: var(--ui-success);
1642
- --interface-foreground-validation-warning: var(--ui-warning);
1643
- --ory-background-default: var(--interface-background-default-primary);
1644
- --ory-border-default: var(--interface-border-default-primary);
1645
- --ory-foreground-default: var(--interface-foreground-default-primary);
1646
- --radio-background-checked: var(--interface-background-brand-primary);
1647
- --radio-background-default: var(--interface-background-default-secondary);
1648
- --radio-border-checked: var(--interface-border-brand-brand);
1649
- --radio-border-default: var(--interface-border-default-primary);
1650
- --radio-foreground-checked: var(--interface-foreground-brand-on-primary);
1651
- --radio-foreground-default: var(--interface-foreground-default-primary);
1652
- --toggle-background-checked: var(--interface-background-brand-primary);
1653
- --toggle-background-default: var(--interface-background-default-secondary);
1654
- --toggle-border-checked: var(--interface-border-default-none);
1655
- --toggle-border-default: var(--interface-border-default-primary);
1656
- --toggle-foreground-checked: var(--interface-foreground-brand-on-primary);
1657
- --toggle-foreground-default: var(--interface-foreground-brand-primary);
1658
- --brand-100: var(--ui-100);
1659
- --brand-200: var(--ui-300);
1660
- --brand-300: var(--ui-500);
1661
- --brand-400: var(--ui-700);
1662
- --brand-50: var(--ui-50);
1663
- --brand-500: var(--ui-900);
1664
- --brand-600: var(--ui-white);
1665
- --brand-700: var(--ui-200);
1666
- --brand-800: var(--ui-400);
1667
- --brand-900: var(--ui-600);
1668
- --brand-950: var(--ui-800);
1669
- --color-ui-transparent: var(--ui-transparent);
1670
- --color-button-identifier-background-default: var( --button-identifier-background-default );
1671
- --color-button-identifier-background-hover: var( --button-identifier-background-hover );
1672
- --color-button-identifier-border-border-default: var( --button-identifier-border-border-default );
1673
- --color-button-identifier-border-border-hover: var( --button-identifier-border-border-hover );
1674
- --color-button-identifier-foreground-default: var( --button-identifier-foreground-default );
1675
- --color-button-identifier-foreground-hover: var( --button-identifier-foreground-hover );
1676
- --color-button-link-brand-brand: var(--button-link-brand-brand);
1677
- --color-button-link-brand-brand-hover: var(--button-link-brand-brand-hover);
1678
- --color-button-link-default-primary: var(--button-link-default-primary);
1679
- --color-button-link-default-primary-hover: var( --button-link-default-primary-hover );
1680
- --color-button-link-default-secondary: var(--button-link-default-secondary);
1681
- --color-button-link-default-secondary-hover: var( --button-link-default-secondary-hover );
1682
- --color-button-primary-background-default: var( --button-primary-background-default );
1683
- --color-button-primary-background-disabled: var( --button-primary-background-disabled );
1684
- --color-button-primary-background-hover: var( --button-primary-background-hover );
1685
- --color-button-primary-border-default: var(--button-primary-border-default);
1686
- --color-button-primary-border-disabled: var(--button-primary-border-disabled);
1687
- --color-button-primary-border-hover: var(--button-primary-border-hover);
1688
- --color-button-primary-foreground-default: var( --button-primary-foreground-default );
1689
- --color-button-primary-foreground-disabled: var( --button-primary-foreground-disabled );
1690
- --color-button-primary-foreground-hover: var( --button-primary-foreground-hover );
1691
- --color-button-secondary-background-default: var( --button-secondary-background-default );
1692
- --color-button-secondary-background-disabled: var( --button-secondary-background-disabled );
1693
- --color-button-secondary-background-hover: var( --button-secondary-background-hover );
1694
- --color-button-secondary-border-default: var( --button-secondary-border-default );
1695
- --color-button-secondary-border-disabled: var( --button-secondary-border-disabled );
1696
- --color-button-secondary-border-hover: var(--button-secondary-border-hover);
1697
- --color-button-secondary-foreground-default: var( --button-secondary-foreground-default );
1698
- --color-button-secondary-foreground-disabled: var( --button-secondary-foreground-disabled );
1699
- --color-button-secondary-foreground-hover: var( --button-secondary-foreground-hover );
1700
- --color-button-social-background-default: var( --button-social-background-default );
1701
- --color-button-social-background-disabled: var( --button-social-background-disabled );
1702
- --color-button-social-background-generic-provider: var( --button-social-background-generic-provider );
1703
- --color-button-social-background-hover: var(--button-social-background-hover);
1704
- --color-button-social-border-default: var(--button-social-border-default);
1705
- --color-button-social-border-disabled: var(--button-social-border-disabled);
1706
- --color-button-social-border-generic-provider: var( --button-social-border-generic-provider );
1707
- --color-button-social-border-hover: var(--button-social-border-hover);
1708
- --color-button-social-foreground-default: var( --button-social-foreground-default );
1709
- --color-button-social-foreground-disabled: var( --button-social-foreground-disabled );
1710
- --color-button-social-foreground-generic-provider: var( --button-social-foreground-generic-provider );
1711
- --color-button-social-foreground-hover: var(--button-social-foreground-hover);
1712
- --color-checkbox-background-checked: var(--checkbox-background-checked);
1713
- --color-checkbox-background-default: var(--checkbox-background-default);
1714
- --color-checkbox-border-checkbox-border-checked: var( --checkbox-border-checkbox-border-checked );
1715
- --color-checkbox-border-checkbox-border-default: var( --checkbox-border-checkbox-border-default );
1716
- --color-checkbox-foreground-checked: var(--checkbox-foreground-checked);
1717
- --color-form-background-default: var(--form-background-default);
1718
- --color-form-border-default: var(--form-border-default);
1719
- --color-input-background-default: var(--input-background-default);
1720
- --color-input-background-disabled: var(--input-background-disabled);
1721
- --color-input-background-hover: var(--input-background-hover);
1722
- --color-input-border-default: var(--input-border-default);
1723
- --color-input-border-disabled: var(--input-border-disabled);
1724
- --color-input-border-focus: var(--input-border-focus);
1725
- --color-input-border-hover: var(--input-border-hover);
1726
- --color-input-foreground-disabled: var(--input-foreground-disabled);
1727
- --color-input-foreground-primary: var(--input-foreground-primary);
1728
- --color-input-foreground-tertiary: var(--input-foreground-tertiary);
1729
- --color-interface-background-brand-primary: var( --interface-background-brand-primary );
1730
- --color-interface-background-default-inverted: var( --interface-background-default-inverted );
1731
- --color-interface-background-default-primary: var( --interface-background-default-primary );
1732
- --color-interface-background-default-primary-hover: var( --interface-background-default-primary-hover );
1733
- --color-interface-background-default-secondary: var( --interface-background-default-secondary );
1734
- --color-interface-border-default-primary: var( --interface-border-default-primary );
1735
- --color-interface-border-validation-danger: var( --interface-border-validation-danger );
1736
- --color-interface-foreground-brand-primary: var( --interface-foreground-brand-primary );
1737
- --color-interface-foreground-default-inverted: var( --interface-foreground-default-inverted );
1738
- --color-interface-foreground-default-primary: var( --interface-foreground-default-primary );
1739
- --color-interface-foreground-default-secondary: var( --interface-foreground-default-secondary );
1740
- --color-interface-foreground-default-tertiary: var( --interface-foreground-default-tertiary );
1741
- --color-interface-foreground-validation-danger: var( --interface-foreground-validation-danger );
1742
- --color-interface-foreground-validation-success: var( --interface-foreground-validation-success );
1743
- --color-interface-foreground-validation-warning: var( --interface-foreground-validation-warning );
1744
- --color-ory-background-default: var(--ory-background-default);
1745
- --color-ory-border-default: var(--ory-border-default);
1746
- --color-ory-foreground-default: var(--ory-foreground-default);
1747
- --color-toggle-background-checked: var(--toggle-background-checked);
1748
- --color-toggle-background-default: var(--toggle-background-default);
1749
- --color-toggle-border-checked: var(--toggle-border-checked);
1750
- --color-toggle-border-default: var(--toggle-border-default);
1751
- --color-toggle-foreground-checked: var(--toggle-foreground-checked);
1752
- --color-toggle-foreground-default: var(--toggle-foreground-default);
1753
- --radius-buttons: 0.25rem;
1754
- --radius-forms: 0.25rem;
1755
- --radius-general: 0.25rem;
1756
- --radius-branding: 0.5rem;
1757
- --radius-cards: 0.75rem;
1758
- --radius-identifier: 62.4375rem;
1759
- --font-sans-default: var(--font-sans);
1760
- --animate-caret-blink: caret-blink 1.25s ease-out infinite;
1761
- --animate-drop-down-in: drop-down-in 400ms cubic-bezier(0.16, 1, 0.3, 1);
1762
- --animate-drop-down-out: drop-down-out 400ms cubic-bezier(0.16, 1, 0.3, 1);
1568
+ @layer ory-elements {
1569
+ .ory-elements,
1570
+ :host {
1571
+ --font-mono:
1572
+ ui-monospace,
1573
+ SFMono-Regular,
1574
+ Menlo,
1575
+ Monaco,
1576
+ Consolas,
1577
+ "Liberation Mono",
1578
+ "Courier New",
1579
+ monospace;
1580
+ --spacing: 0.25rem;
1581
+ --breakpoint-sm: 40rem;
1582
+ --text-xs: 0.75rem;
1583
+ --text-xs--line-height: calc(1 / 0.75);
1584
+ --text-sm: 0.875rem;
1585
+ --text-sm--line-height: calc(1.25 / 0.875);
1586
+ --text-lg: 1.125rem;
1587
+ --text-lg--line-height: calc(1.75 / 1.125);
1588
+ --text-xl: 1.25rem;
1589
+ --text-xl--line-height: calc(1.75 / 1.25);
1590
+ --font-weight-normal: 400;
1591
+ --font-weight-medium: 500;
1592
+ --font-weight-semibold: 600;
1593
+ --font-weight-bold: 700;
1594
+ --leading-tight: 1.25;
1595
+ --leading-normal: 1.5;
1596
+ --animate-spin: spin 1s linear infinite;
1597
+ --default-transition-duration: 150ms;
1598
+ --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1599
+ --default-mono-font-family: var(--font-mono);
1600
+ --ui-100: #f1f5f9;
1601
+ --ui-200: #e2e8f0;
1602
+ --ui-300: #cbd5e1;
1603
+ --ui-400: #94a3b8;
1604
+ --ui-50: #f8fafc;
1605
+ --ui-500: #64748b;
1606
+ --ui-600: #475569;
1607
+ --ui-700: #334155;
1608
+ --ui-800: #1e293b;
1609
+ --ui-900: #0f172a;
1610
+ --ui-950: #020617;
1611
+ --ui-black: #000000;
1612
+ --ui-danger: #dc2626;
1613
+ --ui-success: #22c55e;
1614
+ --ui-transparent: #ffffff00;
1615
+ --ui-warning: #eab308;
1616
+ --ui-white: #ffffff;
1617
+ --button-identifier-background-default: var( --interface-background-brand-secondary );
1618
+ --button-identifier-background-hover: var( --interface-background-brand-secondary-hover );
1619
+ --button-identifier-border-border-default: var( --interface-border-brand-brand );
1620
+ --button-identifier-border-border-hover: var(--interface-border-brand-brand);
1621
+ --button-identifier-foreground-default: var( --interface-foreground-brand-on-secondary );
1622
+ --button-identifier-foreground-hover: var( --interface-foreground-brand-on-secondary );
1623
+ --button-link-brand-brand: var(--interface-foreground-brand-primary);
1624
+ --button-link-brand-brand-hover: var(--interface-foreground-default-primary);
1625
+ --button-link-default-primary: var(--interface-foreground-default-primary);
1626
+ --button-link-default-primary-hover: var( --interface-foreground-brand-primary );
1627
+ --button-link-default-secondary: var( --interface-foreground-default-secondary );
1628
+ --button-link-default-secondary-hover: var( --interface-foreground-default-tertiary );
1629
+ --button-link-disabled-disabled: var( --interface-foreground-disabled-disabled );
1630
+ --button-primary-background-default: var( --interface-background-brand-primary );
1631
+ --button-primary-background-disabled: var( --interface-background-disabled-disabled );
1632
+ --button-primary-background-hover: var( --interface-background-brand-primary-hover );
1633
+ --button-primary-border-default: var(--interface-border-default-none);
1634
+ --button-primary-border-disabled: var(--interface-border-disabled-disabled);
1635
+ --button-primary-border-hover: var(--interface-border-default-none);
1636
+ --button-primary-foreground-default: var( --interface-foreground-brand-on-primary );
1637
+ --button-primary-foreground-disabled: var( --interface-foreground-disabled-on-disabled );
1638
+ --button-primary-foreground-hover: var( --interface-foreground-brand-on-primary );
1639
+ --button-secondary-background-default: var( --interface-background-default-primary );
1640
+ --button-secondary-background-disabled: var( --interface-background-disabled-disabled );
1641
+ --button-secondary-background-hover: var( --interface-background-default-primary-hover );
1642
+ --button-secondary-border-default: var(--interface-border-default-primary);
1643
+ --button-secondary-border-disabled: var(--interface-border-disabled-disabled);
1644
+ --button-secondary-border-hover: var(--interface-border-default-primary);
1645
+ --button-secondary-foreground-default: var( --interface-foreground-default-primary );
1646
+ --button-secondary-foreground-disabled: var( --interface-foreground-disabled-on-disabled );
1647
+ --button-secondary-foreground-hover: var( --interface-foreground-default-secondary );
1648
+ --button-social-background-default: var( --interface-background-default-primary );
1649
+ --button-social-background-disabled: var( --interface-background-disabled-disabled );
1650
+ --button-social-background-generic-provider: var( --interface-background-default-inverted );
1651
+ --button-social-background-hover: var( --interface-background-default-primary-hover );
1652
+ --button-social-border-default: var(--interface-border-default-primary);
1653
+ --button-social-border-disabled: var(--interface-border-disabled-disabled);
1654
+ --button-social-border-generic-provider: var(--interface-border-default-none);
1655
+ --button-social-border-hover: var(--interface-border-default-primary);
1656
+ --button-social-foreground-default: var( --interface-foreground-default-primary );
1657
+ --button-social-foreground-disabled: var( --interface-foreground-disabled-on-disabled );
1658
+ --button-social-foreground-generic-provider: var( --interface-foreground-default-inverted );
1659
+ --button-social-foreground-hover: var( --interface-foreground-default-secondary );
1660
+ --checkbox-background-checked: var(--interface-background-brand-primary);
1661
+ --checkbox-background-default: var(--interface-background-default-secondary);
1662
+ --checkbox-border-checkbox-border-checked: var( --interface-border-brand-brand );
1663
+ --checkbox-border-checkbox-border-default: var( --interface-border-default-primary );
1664
+ --checkbox-foreground-checked: var(--interface-foreground-brand-on-primary);
1665
+ --checkbox-foreground-default: var(--interface-foreground-default-primary);
1666
+ --form-background-default: var(--interface-background-default-primary);
1667
+ --form-border-default: var(--interface-border-default-primary);
1668
+ --input-background-default: var(--interface-background-default-primary);
1669
+ --input-background-disabled: var(--interface-background-disabled-disabled);
1670
+ --input-background-hover: var(--interface-background-default-primary-hover);
1671
+ --input-border-default: var(--interface-border-default-primary);
1672
+ --input-border-disabled: var(--interface-border-disabled-disabled);
1673
+ --input-border-focus: var(--interface-border-brand-brand);
1674
+ --input-border-hover: var(--interface-border-default-primary);
1675
+ --input-foreground-disabled: var(--interface-foreground-disabled-on-disabled);
1676
+ --input-foreground-primary: var(--interface-foreground-default-primary);
1677
+ --input-foreground-secondary: var(--interface-foreground-default-secondary);
1678
+ --input-foreground-tertiary: var(--interface-foreground-default-tertiary);
1679
+ --interface-background-brand-primary: var(--brand-500);
1680
+ --interface-background-brand-primary-hover: var(--brand-400);
1681
+ --interface-background-brand-secondary: var(--brand-50);
1682
+ --interface-background-brand-secondary-hover: var(--brand-100);
1683
+ --interface-background-default-inverted: var(--ui-900);
1684
+ --interface-background-default-inverted-hover: var(--ui-800);
1685
+ --interface-background-default-none: var(--ui-transparent);
1686
+ --interface-background-default-primary: var(--ui-white);
1687
+ --interface-background-default-primary-hover: var(--ui-50);
1688
+ --interface-background-default-secondary: var(--ui-50);
1689
+ --interface-background-default-secondary-hover: var(--ui-200);
1690
+ --interface-background-default-tertiary: var(--ui-200);
1691
+ --interface-background-default-tertiary-hover: var(--ui-300);
1692
+ --interface-background-disabled-disabled: var(--ui-200);
1693
+ --interface-background-validation-danger: var(--ui-danger);
1694
+ --interface-background-validation-success: var(--ui-success);
1695
+ --interface-background-validation-warning: var(--ui-warning);
1696
+ --interface-border-brand-brand: var(--brand-500);
1697
+ --interface-border-default-inverted: var(--ui-700);
1698
+ --interface-border-default-none: var(--ui-transparent);
1699
+ --interface-border-default-primary: var(--ui-300);
1700
+ --interface-border-disabled-disabled: var(--ui-300);
1701
+ --interface-border-validation-danger: var(--ui-danger);
1702
+ --interface-border-validation-success: var(--ui-success);
1703
+ --interface-border-validation-warning: var(--ui-warning);
1704
+ --interface-foreground-brand-on-primary: var(--brand-50);
1705
+ --interface-foreground-brand-on-secondary: var(--brand-950);
1706
+ --interface-foreground-brand-primary: var(--brand-500);
1707
+ --interface-foreground-brand-secondary: var(--brand-50);
1708
+ --interface-foreground-default-inverted: var(--ui-white);
1709
+ --interface-foreground-default-primary: var(--ui-900);
1710
+ --interface-foreground-default-secondary: var(--ui-700);
1711
+ --interface-foreground-default-tertiary: var(--ui-500);
1712
+ --interface-foreground-disabled-disabled: var(--ui-300);
1713
+ --interface-foreground-disabled-on-disabled: var(--ui-400);
1714
+ --interface-foreground-validation-danger: var(--ui-danger);
1715
+ --interface-foreground-validation-success: var(--ui-success);
1716
+ --interface-foreground-validation-warning: var(--ui-warning);
1717
+ --ory-background-default: var(--interface-background-default-primary);
1718
+ --ory-border-default: var(--interface-border-default-primary);
1719
+ --ory-foreground-default: var(--interface-foreground-default-primary);
1720
+ --radio-background-checked: var(--interface-background-brand-primary);
1721
+ --radio-background-default: var(--interface-background-default-secondary);
1722
+ --radio-border-checked: var(--interface-border-brand-brand);
1723
+ --radio-border-default: var(--interface-border-default-primary);
1724
+ --radio-foreground-checked: var(--interface-foreground-brand-on-primary);
1725
+ --radio-foreground-default: var(--interface-foreground-default-primary);
1726
+ --toggle-background-checked: var(--interface-background-brand-primary);
1727
+ --toggle-background-default: var(--interface-background-default-secondary);
1728
+ --toggle-border-checked: var(--interface-border-default-none);
1729
+ --toggle-border-default: var(--interface-border-default-primary);
1730
+ --toggle-foreground-checked: var(--interface-foreground-brand-on-primary);
1731
+ --toggle-foreground-default: var(--interface-foreground-brand-primary);
1732
+ --brand-100: var(--ui-100);
1733
+ --brand-200: var(--ui-300);
1734
+ --brand-300: var(--ui-500);
1735
+ --brand-400: var(--ui-700);
1736
+ --brand-50: var(--ui-50);
1737
+ --brand-500: var(--ui-900);
1738
+ --brand-600: var(--ui-white);
1739
+ --brand-700: var(--ui-200);
1740
+ --brand-800: var(--ui-400);
1741
+ --brand-900: var(--ui-600);
1742
+ --brand-950: var(--ui-800);
1743
+ --color-ui-transparent: var(--ui-transparent);
1744
+ --color-button-identifier-background-default: var( --button-identifier-background-default );
1745
+ --color-button-identifier-background-hover: var( --button-identifier-background-hover );
1746
+ --color-button-identifier-border-border-default: var( --button-identifier-border-border-default );
1747
+ --color-button-identifier-border-border-hover: var( --button-identifier-border-border-hover );
1748
+ --color-button-identifier-foreground-default: var( --button-identifier-foreground-default );
1749
+ --color-button-identifier-foreground-hover: var( --button-identifier-foreground-hover );
1750
+ --color-button-link-brand-brand: var(--button-link-brand-brand);
1751
+ --color-button-link-brand-brand-hover: var(--button-link-brand-brand-hover);
1752
+ --color-button-link-default-primary: var(--button-link-default-primary);
1753
+ --color-button-link-default-primary-hover: var( --button-link-default-primary-hover );
1754
+ --color-button-link-default-secondary: var(--button-link-default-secondary);
1755
+ --color-button-link-default-secondary-hover: var( --button-link-default-secondary-hover );
1756
+ --color-button-primary-background-default: var( --button-primary-background-default );
1757
+ --color-button-primary-background-disabled: var( --button-primary-background-disabled );
1758
+ --color-button-primary-background-hover: var( --button-primary-background-hover );
1759
+ --color-button-primary-border-default: var(--button-primary-border-default);
1760
+ --color-button-primary-border-disabled: var(--button-primary-border-disabled);
1761
+ --color-button-primary-border-hover: var(--button-primary-border-hover);
1762
+ --color-button-primary-foreground-default: var( --button-primary-foreground-default );
1763
+ --color-button-primary-foreground-disabled: var( --button-primary-foreground-disabled );
1764
+ --color-button-primary-foreground-hover: var( --button-primary-foreground-hover );
1765
+ --color-button-secondary-background-default: var( --button-secondary-background-default );
1766
+ --color-button-secondary-background-disabled: var( --button-secondary-background-disabled );
1767
+ --color-button-secondary-background-hover: var( --button-secondary-background-hover );
1768
+ --color-button-secondary-border-default: var( --button-secondary-border-default );
1769
+ --color-button-secondary-border-disabled: var( --button-secondary-border-disabled );
1770
+ --color-button-secondary-border-hover: var(--button-secondary-border-hover);
1771
+ --color-button-secondary-foreground-default: var( --button-secondary-foreground-default );
1772
+ --color-button-secondary-foreground-disabled: var( --button-secondary-foreground-disabled );
1773
+ --color-button-secondary-foreground-hover: var( --button-secondary-foreground-hover );
1774
+ --color-button-social-background-default: var( --button-social-background-default );
1775
+ --color-button-social-background-disabled: var( --button-social-background-disabled );
1776
+ --color-button-social-background-generic-provider: var( --button-social-background-generic-provider );
1777
+ --color-button-social-background-hover: var(--button-social-background-hover);
1778
+ --color-button-social-border-default: var(--button-social-border-default);
1779
+ --color-button-social-border-disabled: var(--button-social-border-disabled);
1780
+ --color-button-social-border-generic-provider: var( --button-social-border-generic-provider );
1781
+ --color-button-social-border-hover: var(--button-social-border-hover);
1782
+ --color-button-social-foreground-default: var( --button-social-foreground-default );
1783
+ --color-button-social-foreground-disabled: var( --button-social-foreground-disabled );
1784
+ --color-button-social-foreground-generic-provider: var( --button-social-foreground-generic-provider );
1785
+ --color-button-social-foreground-hover: var(--button-social-foreground-hover);
1786
+ --color-checkbox-background-checked: var(--checkbox-background-checked);
1787
+ --color-checkbox-background-default: var(--checkbox-background-default);
1788
+ --color-checkbox-border-checkbox-border-checked: var( --checkbox-border-checkbox-border-checked );
1789
+ --color-checkbox-border-checkbox-border-default: var( --checkbox-border-checkbox-border-default );
1790
+ --color-checkbox-foreground-checked: var(--checkbox-foreground-checked);
1791
+ --color-form-background-default: var(--form-background-default);
1792
+ --color-form-border-default: var(--form-border-default);
1793
+ --color-input-background-default: var(--input-background-default);
1794
+ --color-input-background-disabled: var(--input-background-disabled);
1795
+ --color-input-background-hover: var(--input-background-hover);
1796
+ --color-input-border-default: var(--input-border-default);
1797
+ --color-input-border-disabled: var(--input-border-disabled);
1798
+ --color-input-border-focus: var(--input-border-focus);
1799
+ --color-input-border-hover: var(--input-border-hover);
1800
+ --color-input-foreground-disabled: var(--input-foreground-disabled);
1801
+ --color-input-foreground-primary: var(--input-foreground-primary);
1802
+ --color-input-foreground-tertiary: var(--input-foreground-tertiary);
1803
+ --color-interface-background-brand-primary: var( --interface-background-brand-primary );
1804
+ --color-interface-background-default-inverted: var( --interface-background-default-inverted );
1805
+ --color-interface-background-default-primary: var( --interface-background-default-primary );
1806
+ --color-interface-background-default-primary-hover: var( --interface-background-default-primary-hover );
1807
+ --color-interface-background-default-secondary: var( --interface-background-default-secondary );
1808
+ --color-interface-border-default-primary: var( --interface-border-default-primary );
1809
+ --color-interface-border-validation-danger: var( --interface-border-validation-danger );
1810
+ --color-interface-foreground-brand-primary: var( --interface-foreground-brand-primary );
1811
+ --color-interface-foreground-default-inverted: var( --interface-foreground-default-inverted );
1812
+ --color-interface-foreground-default-primary: var( --interface-foreground-default-primary );
1813
+ --color-interface-foreground-default-secondary: var( --interface-foreground-default-secondary );
1814
+ --color-interface-foreground-default-tertiary: var( --interface-foreground-default-tertiary );
1815
+ --color-interface-foreground-validation-danger: var( --interface-foreground-validation-danger );
1816
+ --color-interface-foreground-validation-success: var( --interface-foreground-validation-success );
1817
+ --color-interface-foreground-validation-warning: var( --interface-foreground-validation-warning );
1818
+ --color-ory-background-default: var(--ory-background-default);
1819
+ --color-ory-border-default: var(--ory-border-default);
1820
+ --color-ory-foreground-default: var(--ory-foreground-default);
1821
+ --color-toggle-background-checked: var(--toggle-background-checked);
1822
+ --color-toggle-background-default: var(--toggle-background-default);
1823
+ --color-toggle-border-checked: var(--toggle-border-checked);
1824
+ --color-toggle-border-default: var(--toggle-border-default);
1825
+ --color-toggle-foreground-checked: var(--toggle-foreground-checked);
1826
+ --color-toggle-foreground-default: var(--toggle-foreground-default);
1827
+ --radius-buttons: 0.25rem;
1828
+ --radius-forms: 0.25rem;
1829
+ --radius-general: 0.25rem;
1830
+ --radius-branding: 0.5rem;
1831
+ --radius-cards: 0.75rem;
1832
+ --radius-identifier: 62.4375rem;
1833
+ --font-sans-default: var(--font-sans);
1834
+ --animate-caret-blink: caret-blink 1.25s ease-out infinite;
1835
+ --animate-drop-down-in: drop-down-in 400ms cubic-bezier(0.16, 1, 0.3, 1);
1836
+ --animate-drop-down-out: drop-down-out 400ms cubic-bezier(0.16, 1, 0.3, 1);
1837
+ }
1763
1838
  }
1764
1839
  @property --tw-rotate-x { syntax: "*"; inherits: false; }
1765
1840
  @property --tw-rotate-y { syntax: "*"; inherits: false; }