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

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