@ory/elements-react/dist/theme/default/index.css.map

Ory Elements React - a collection of React components for authentication UIs.

{"version":3,"sources":["../../../src/theme/default/global.css"],"sourcesContent":["/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer ory-elements;\n@layer ory-elements {\n  .ory-elements *, .ory-elements ::after, .ory-elements ::before, .ory-elements ::backdrop, .ory-elements ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  .ory-elements, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    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');\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  .ory-elements hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  .ory-elements abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  .ory-elements h1, .ory-elements h2, .ory-elements h3, .ory-elements h4, .ory-elements h5, .ory-elements h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  .ory-elements a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  .ory-elements b, .ory-elements strong {\n    font-weight: bolder;\n  }\n  .ory-elements code, .ory-elements kbd, .ory-elements samp, .ory-elements pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  .ory-elements small {\n    font-size: 80%;\n  }\n  .ory-elements sub, .ory-elements sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  .ory-elements sub {\n    bottom: -0.25em;\n  }\n  .ory-elements sup {\n    top: -0.5em;\n  }\n  .ory-elements table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  .ory-elements :-moz-focusring {\n    outline: auto;\n  }\n  .ory-elements progress {\n    vertical-align: baseline;\n  }\n  .ory-elements summary {\n    display: list-item;\n  }\n  .ory-elements ol, .ory-elements ul, .ory-elements menu {\n    list-style: none;\n  }\n  .ory-elements img, .ory-elements svg, .ory-elements video, .ory-elements canvas, .ory-elements audio, .ory-elements iframe, .ory-elements embed, .ory-elements object {\n    display: block;\n    vertical-align: middle;\n  }\n  .ory-elements img, .ory-elements video {\n    max-width: 100%;\n    height: auto;\n  }\n  .ory-elements button, .ory-elements input, .ory-elements select, .ory-elements optgroup, .ory-elements textarea, .ory-elements ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  .ory-elements :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  .ory-elements :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  .ory-elements ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  .ory-elements ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    .ory-elements ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  .ory-elements textarea {\n    resize: vertical;\n  }\n  .ory-elements ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  .ory-elements ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  .ory-elements ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  .ory-elements ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  .ory-elements ::-webkit-datetime-edit, .ory-elements ::-webkit-datetime-edit-year-field, .ory-elements ::-webkit-datetime-edit-month-field, .ory-elements ::-webkit-datetime-edit-day-field, .ory-elements ::-webkit-datetime-edit-hour-field, .ory-elements ::-webkit-datetime-edit-minute-field, .ory-elements ::-webkit-datetime-edit-second-field, .ory-elements ::-webkit-datetime-edit-millisecond-field, .ory-elements ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  .ory-elements ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n  .ory-elements :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  .ory-elements button, .ory-elements input:where([type='button'], [type='reset'], [type='submit']), .ory-elements ::file-selector-button {\n    appearance: button;\n  }\n  .ory-elements ::-webkit-inner-spin-button, .ory-elements ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  .ory-elements [hidden]:where(:not([hidden='until-found'])) {\n    display: none !important;\n  }\n}\n@layer ory-elements {\n  .ory-elements .pointer-events-none {\n    pointer-events: none;\n  }\n  .ory-elements .invisible {\n    visibility: hidden;\n  }\n  .ory-elements .visible {\n    visibility: visible;\n  }\n  .ory-elements .absolute {\n    position: absolute;\n  }\n  .ory-elements .fixed {\n    position: fixed;\n  }\n  .ory-elements .relative {\n    position: relative;\n  }\n  .ory-elements .static {\n    position: static;\n  }\n  .ory-elements .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .ory-elements .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .ory-elements .right-4 {\n    right: calc(var(--spacing) * 4);\n  }\n  .ory-elements .z-50 {\n    z-index: 50;\n  }\n  .ory-elements .col-span-2 {\n    grid-column: span 2 / span 2;\n  }\n  .ory-elements .col-span-full {\n    grid-column: 1 / -1;\n  }\n  .ory-elements .container {\n    width: 100%;\n    @media (width >= 40rem) {\n      max-width: 40rem;\n    }\n    @media (width >= 48rem) {\n      max-width: 48rem;\n    }\n    @media (width >= 64rem) {\n      max-width: 64rem;\n    }\n    @media (width >= 80rem) {\n      max-width: 80rem;\n    }\n    @media (width >= 96rem) {\n      max-width: 96rem;\n    }\n  }\n  .ory-elements .-m-3 {\n    margin: calc(var(--spacing) * -3);\n  }\n  .ory-elements .m-auto {\n    margin: auto;\n  }\n  .ory-elements .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .ory-elements .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .ory-elements .mr-auto {\n    margin-right: auto;\n  }\n  .ory-elements .ml-auto {\n    margin-left: auto;\n  }\n  .ory-elements .\\!block {\n    display: block !important;\n  }\n  .ory-elements .\\!hidden {\n    display: none !important;\n  }\n  .ory-elements .block {\n    display: block;\n  }\n  .ory-elements .contents {\n    display: contents;\n  }\n  .ory-elements .flex {\n    display: flex;\n  }\n  .ory-elements .grid {\n    display: grid;\n  }\n  .ory-elements .hidden {\n    display: none;\n  }\n  .ory-elements .inline {\n    display: inline;\n  }\n  .ory-elements .inline-block {\n    display: inline-block;\n  }\n  .ory-elements .inline-flex {\n    display: inline-flex;\n  }\n  .ory-elements .table {\n    display: table;\n  }\n  .ory-elements .aspect-square {\n    aspect-ratio: 1 / 1;\n  }\n  .ory-elements .size-2 {\n    width: calc(var(--spacing) * 2);\n    height: calc(var(--spacing) * 2);\n  }\n  .ory-elements .size-4 {\n    width: calc(var(--spacing) * 4);\n    height: calc(var(--spacing) * 4);\n  }\n  .ory-elements .size-5 {\n    width: calc(var(--spacing) * 5);\n    height: calc(var(--spacing) * 5);\n  }\n  .ory-elements .size-6 {\n    width: calc(var(--spacing) * 6);\n    height: calc(var(--spacing) * 6);\n  }\n  .ory-elements .size-8 {\n    width: calc(var(--spacing) * 8);\n    height: calc(var(--spacing) * 8);\n  }\n  .ory-elements .size-10 {\n    width: calc(var(--spacing) * 10);\n    height: calc(var(--spacing) * 10);\n  }\n  .ory-elements .size-full {\n    width: 100%;\n    height: 100%;\n  }\n  .ory-elements .\\!h-\\[65px\\] {\n    height: 65px !important;\n  }\n  .ory-elements .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .ory-elements .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .ory-elements .h-9 {\n    height: calc(var(--spacing) * 9);\n  }\n  .ory-elements .h-44 {\n    height: calc(var(--spacing) * 44);\n  }\n  .ory-elements .h-full {\n    height: 100%;\n  }\n  .ory-elements .max-h-9 {\n    max-height: calc(var(--spacing) * 9);\n  }\n  .ory-elements .max-h-10 {\n    max-height: calc(var(--spacing) * 10);\n  }\n  .ory-elements .min-h-5 {\n    min-height: calc(var(--spacing) * 5);\n  }\n  .ory-elements .min-h-\\[72px\\] {\n    min-height: 72px;\n  }\n  .ory-elements .\\!w-full {\n    width: 100% !important;\n  }\n  .ory-elements .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .ory-elements .w-7 {\n    width: calc(var(--spacing) * 7);\n  }\n  .ory-elements .w-full {\n    width: 100%;\n  }\n  .ory-elements .w-px {\n    width: 1px;\n  }\n  .ory-elements .max-w-\\(--breakpoint-sm\\) {\n    max-width: var(--breakpoint-sm);\n  }\n  .ory-elements .max-w-\\[60\\%\\] {\n    max-width: 60%;\n  }\n  .ory-elements .max-w-\\[488px\\] {\n    max-width: 488px;\n  }\n  .ory-elements .max-w-full {\n    max-width: 100%;\n  }\n  .ory-elements .\\!min-w-\\[300px\\] {\n    min-width: 300px !important;\n  }\n  .ory-elements .min-w-1 {\n    min-width: calc(var(--spacing) * 1);\n  }\n  .ory-elements .min-w-76 {\n    min-width: calc(var(--spacing) * 76);\n  }\n  .ory-elements .flex-1 {\n    flex: 1;\n  }\n  .ory-elements .shrink-0 {\n    flex-shrink: 0;\n  }\n  .ory-elements .grow {\n    flex-grow: 1;\n  }\n  .ory-elements .origin-top-right {\n    transform-origin: top right;\n  }\n  .ory-elements .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .ory-elements .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .ory-elements .animate-caret-blink {\n    animation: var(--animate-caret-blink);\n  }\n  .ory-elements .animate-drop-down-in {\n    animation: var(--animate-drop-down-in);\n  }\n  .ory-elements .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .ory-elements .cursor-pointer {\n    cursor: pointer;\n  }\n  .ory-elements .appearance-none {\n    appearance: none;\n  }\n  .ory-elements .grid-cols-1 {\n    grid-template-columns: repeat(1, minmax(0, 1fr));\n  }\n  .ory-elements .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .ory-elements .grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  .ory-elements .grid-cols-4 {\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n  }\n  .ory-elements .flex-col {\n    flex-direction: column;\n  }\n  .ory-elements .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .ory-elements .items-center {\n    align-items: center;\n  }\n  .ory-elements .items-end {\n    align-items: flex-end;\n  }\n  .ory-elements .items-start {\n    align-items: flex-start;\n  }\n  .ory-elements .justify-between {\n    justify-content: space-between;\n  }\n  .ory-elements .justify-center {\n    justify-content: center;\n  }\n  .ory-elements .justify-start {\n    justify-content: flex-start;\n  }\n  .ory-elements .justify-stretch {\n    justify-content: stretch;\n  }\n  .ory-elements .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .ory-elements .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .ory-elements .gap-3 {\n    gap: calc(var(--spacing) * 3);\n  }\n  .ory-elements .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .ory-elements .gap-6 {\n    gap: calc(var(--spacing) * 6);\n  }\n  .ory-elements .gap-8 {\n    gap: calc(var(--spacing) * 8);\n  }\n  .ory-elements .self-start {\n    align-self: flex-start;\n  }\n  .ory-elements .self-stretch {\n    align-self: stretch;\n  }\n  .ory-elements .truncate {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .ory-elements .overflow-hidden {\n    overflow: hidden;\n  }\n  .ory-elements .rounded-\\[999px\\] {\n    border-radius: 999px;\n  }\n  .ory-elements .rounded-buttons {\n    border-radius: var(--radius-buttons);\n  }\n  .ory-elements .rounded-cards {\n    border-radius: var(--radius-cards);\n  }\n  .ory-elements .rounded-forms {\n    border-radius: var(--radius-forms);\n  }\n  .ory-elements .rounded-general {\n    border-radius: var(--radius-general);\n  }\n  .ory-elements .rounded-identifier {\n    border-radius: var(--radius-identifier);\n  }\n  .ory-elements .rounded-t-cards {\n    border-top-left-radius: var(--radius-cards);\n    border-top-right-radius: var(--radius-cards);\n  }\n  .ory-elements .rounded-l-forms {\n    border-top-left-radius: var(--radius-forms);\n    border-bottom-left-radius: var(--radius-forms);\n  }\n  .ory-elements .rounded-r-none {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n  .ory-elements .rounded-b-cards {\n    border-bottom-right-radius: var(--radius-cards);\n    border-bottom-left-radius: var(--radius-cards);\n  }\n  .ory-elements .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .ory-elements .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .ory-elements .border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .ory-elements .border-b-0 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 0px;\n  }\n  .ory-elements .border-solid {\n    --tw-border-style: solid;\n    border-style: solid;\n  }\n  .ory-elements .border-button-identifier-border-border-default {\n    border-color: var(--color-button-identifier-border-border-default);\n  }\n  .ory-elements .border-button-secondary-border-default {\n    border-color: var(--color-button-secondary-border-default);\n  }\n  .ory-elements .border-button-social-border-generic-provider {\n    border-color: var(--color-button-social-border-generic-provider);\n  }\n  .ory-elements .border-checkbox-border-checkbox-border-default {\n    border-color: var(--color-checkbox-border-checkbox-border-default);\n  }\n  .ory-elements .border-form-border-default {\n    border-color: var(--color-form-border-default);\n  }\n  .ory-elements .border-input-border-default {\n    border-color: var(--color-input-border-default);\n  }\n  .ory-elements .border-input-border-focus {\n    border-color: var(--color-input-border-focus);\n  }\n  .ory-elements .border-interface-border-default-primary {\n    border-color: var(--color-interface-border-default-primary);\n  }\n  .ory-elements .border-interface-border-validation-danger {\n    border-color: var(--color-interface-border-validation-danger);\n  }\n  .ory-elements .border-ory-border-default {\n    border-color: var(--color-ory-border-default);\n  }\n  .ory-elements .border-toggle-border-default {\n    border-color: var(--color-toggle-border-default);\n  }\n  .ory-elements .bg-\\[white\\] {\n    background-color: white;\n  }\n  .ory-elements .bg-button-identifier-background-default {\n    background-color: var(--color-button-identifier-background-default);\n  }\n  .ory-elements .bg-button-primary-background-default {\n    background-color: var(--color-button-primary-background-default);\n  }\n  .ory-elements .bg-button-secondary-background-default {\n    background-color: var(--color-button-secondary-background-default);\n  }\n  .ory-elements .bg-button-social-background-default {\n    background-color: var(--color-button-social-background-default);\n  }\n  .ory-elements .bg-button-social-background-generic-provider {\n    background-color: var(--color-button-social-background-generic-provider);\n  }\n  .ory-elements .bg-checkbox-background-default {\n    background-color: var(--color-checkbox-background-default);\n  }\n  .ory-elements .bg-form-background-default {\n    background-color: var(--color-form-background-default);\n  }\n  .ory-elements .bg-input-background-default {\n    background-color: var(--color-input-background-default);\n  }\n  .ory-elements .bg-interface-background-brand-primary {\n    background-color: var(--color-interface-background-brand-primary);\n  }\n  .ory-elements .bg-interface-background-default-inverted {\n    background-color: var(--color-interface-background-default-inverted);\n  }\n  .ory-elements .bg-interface-background-default-primary {\n    background-color: var(--color-interface-background-default-primary);\n  }\n  .ory-elements .bg-interface-background-default-secondary {\n    background-color: var(--color-interface-background-default-secondary);\n  }\n  .ory-elements .bg-ory-background-default {\n    background-color: var(--color-ory-background-default);\n  }\n  .ory-elements .bg-toggle-background-default {\n    background-color: var(--color-toggle-background-default);\n  }\n  .ory-elements .bg-toggle-foreground-default {\n    background-color: var(--color-toggle-foreground-default);\n  }\n  .ory-elements .bg-transparent {\n    background-color: transparent;\n  }\n  .ory-elements .fill-checkbox-foreground-checked {\n    fill: var(--color-checkbox-foreground-checked);\n  }\n  .ory-elements .stroke-button-primary-foreground-default {\n    stroke: var(--color-button-primary-foreground-default);\n  }\n  .ory-elements .stroke-button-secondary-foreground-default {\n    stroke: var(--color-button-secondary-foreground-default);\n  }\n  .ory-elements .stroke-button-social-foreground-default {\n    stroke: var(--color-button-social-foreground-default);\n  }\n  .ory-elements .object-contain {\n    object-fit: contain;\n  }\n  .ory-elements .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .ory-elements .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .ory-elements .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .ory-elements .p-8 {\n    padding: calc(var(--spacing) * 8);\n  }\n  .ory-elements .p-\\[3px\\] {\n    padding: 3px;\n  }\n  .ory-elements .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n  .ory-elements .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .ory-elements .px-5 {\n    padding-inline: calc(var(--spacing) * 5);\n  }\n  .ory-elements .px-6 {\n    padding-inline: calc(var(--spacing) * 6);\n  }\n  .ory-elements .px-8 {\n    padding-inline: calc(var(--spacing) * 8);\n  }\n  .ory-elements .px-\\[11px\\] {\n    padding-inline: 11px;\n  }\n  .ory-elements .py-1\\.5 {\n    padding-block: calc(var(--spacing) * 1.5);\n  }\n  .ory-elements .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .ory-elements .py-3 {\n    padding-block: calc(var(--spacing) * 3);\n  }\n  .ory-elements .py-3\\.5 {\n    padding-block: calc(var(--spacing) * 3.5);\n  }\n  .ory-elements .py-4 {\n    padding-block: calc(var(--spacing) * 4);\n  }\n  .ory-elements .py-4\\.5 {\n    padding-block: calc(var(--spacing) * 4.5);\n  }\n  .ory-elements .py-8 {\n    padding-block: calc(var(--spacing) * 8);\n  }\n  .ory-elements .py-12 {\n    padding-block: calc(var(--spacing) * 12);\n  }\n  .ory-elements .py-\\[5px\\] {\n    padding-block: 5px;\n  }\n  .ory-elements .py-\\[13px\\] {\n    padding-block: 13px;\n  }\n  .ory-elements .py-\\[15px\\] {\n    padding-block: 15px;\n  }\n  .ory-elements .pr-10 {\n    padding-right: calc(var(--spacing) * 10);\n  }\n  .ory-elements .pb-12 {\n    padding-bottom: calc(var(--spacing) * 12);\n  }\n  .ory-elements .pl-8 {\n    padding-left: calc(var(--spacing) * 8);\n  }\n  .ory-elements .text-center {\n    text-align: center;\n  }\n  .ory-elements .text-left {\n    text-align: left;\n  }\n  .ory-elements .font-sans-default {\n    font-family: var(--font-sans-default);\n  }\n  .ory-elements .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .ory-elements .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .ory-elements .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .ory-elements .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .ory-elements .leading-none {\n    --tw-leading: 1;\n    line-height: 1;\n  }\n  .ory-elements .leading-normal {\n    --tw-leading: var(--leading-normal);\n    line-height: var(--leading-normal);\n  }\n  .ory-elements .leading-tight {\n    --tw-leading: var(--leading-tight);\n    line-height: var(--leading-tight);\n  }\n  .ory-elements .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .ory-elements .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .ory-elements .font-normal {\n    --tw-font-weight: var(--font-weight-normal);\n    font-weight: var(--font-weight-normal);\n  }\n  .ory-elements .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .ory-elements .text-nowrap {\n    text-wrap: nowrap;\n  }\n  .ory-elements .break-words {\n    overflow-wrap: break-word;\n  }\n  .ory-elements .text-ellipsis {\n    text-overflow: ellipsis;\n  }\n  .ory-elements .text-button-identifier-foreground-default {\n    color: var(--color-button-identifier-foreground-default);\n  }\n  .ory-elements .text-button-link-brand-brand {\n    color: var(--color-button-link-brand-brand);\n  }\n  .ory-elements .text-button-link-default-primary {\n    color: var(--color-button-link-default-primary);\n  }\n  .ory-elements .text-button-link-default-secondary {\n    color: var(--color-button-link-default-secondary);\n  }\n  .ory-elements .text-button-primary-foreground-default {\n    color: var(--color-button-primary-foreground-default);\n  }\n  .ory-elements .text-button-secondary-foreground-default {\n    color: var(--color-button-secondary-foreground-default);\n  }\n  .ory-elements .text-button-social-foreground-default {\n    color: var(--color-button-social-foreground-default);\n  }\n  .ory-elements .text-button-social-foreground-generic-provider {\n    color: var(--color-button-social-foreground-generic-provider);\n  }\n  .ory-elements .text-input-foreground-primary {\n    color: var(--color-input-foreground-primary);\n  }\n  .ory-elements .text-interface-foreground-brand-primary {\n    color: var(--color-interface-foreground-brand-primary);\n  }\n  .ory-elements .text-interface-foreground-default-inverted {\n    color: var(--color-interface-foreground-default-inverted);\n  }\n  .ory-elements .text-interface-foreground-default-primary {\n    color: var(--color-interface-foreground-default-primary);\n  }\n  .ory-elements .text-interface-foreground-default-secondary {\n    color: var(--color-interface-foreground-default-secondary);\n  }\n  .ory-elements .text-interface-foreground-default-tertiary {\n    color: var(--color-interface-foreground-default-tertiary);\n  }\n  .ory-elements .text-interface-foreground-validation-danger {\n    color: var(--color-interface-foreground-validation-danger);\n  }\n  .ory-elements .text-interface-foreground-validation-success {\n    color: var(--color-interface-foreground-validation-success);\n  }\n  .ory-elements .text-interface-foreground-validation-warning {\n    color: var(--color-interface-foreground-validation-warning);\n  }\n  .ory-elements .text-ory-foreground-default {\n    color: var(--color-ory-foreground-default);\n  }\n  .ory-elements .capitalize {\n    text-transform: capitalize;\n  }\n  .ory-elements .underline {\n    text-decoration-line: underline;\n  }\n  .ory-elements .antialiased {\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .ory-elements .mix-blend-multiply {\n    mix-blend-mode: multiply;\n  }\n  .ory-elements .ring {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ory-elements .ring-1 {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ory-elements .ring-button-primary-border-default {\n    --tw-ring-color: var(--color-button-primary-border-default);\n  }\n  .ory-elements .ring-button-secondary-border-default {\n    --tw-ring-color: var(--color-button-secondary-border-default);\n  }\n  .ory-elements .ring-button-social-border-default {\n    --tw-ring-color: var(--color-button-social-border-default);\n  }\n  .ory-elements .outline-hidden {\n    --tw-outline-style: none;\n    outline-style: none;\n    @media (forced-colors: active) {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n    }\n  }\n  .ory-elements .filter {\n    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,);\n  }\n  .ory-elements .transition {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .ory-elements .transition-all {\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .ory-elements .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .ory-elements .duration-100 {\n    --tw-duration: 100ms;\n    transition-duration: 100ms;\n  }\n  .ory-elements .duration-700 {\n    --tw-duration: 700ms;\n    transition-duration: 700ms;\n  }\n  .ory-elements .ease-linear {\n    --tw-ease: linear;\n    transition-timing-function: linear;\n  }\n  .ory-elements .will-change-\\[opacity\\,transform\\] {\n    will-change: opacity,transform;\n  }\n  .ory-elements .select-none {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n  .ory-elements .ring-inset {\n    --tw-ring-inset: inset;\n  }\n  .ory-elements .group-hover\\:text-button-identifier-foreground-hover {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        color: var(--color-button-identifier-foreground-hover);\n      }\n    }\n  }\n  .ory-elements .group-disabled\\:opacity-20 {\n    &:is(:where(.group):disabled *) {\n      opacity: 20%;\n    }\n  }\n  .ory-elements .group-loading\\:opacity-20 {\n    &:is(:where(.group)[data-loading=\"true\"] *) {\n      opacity: 20%;\n    }\n  }\n  .ory-elements .peer-checked\\:block {\n    &:is(:where(.peer):checked ~ *) {\n      display: block;\n    }\n  }\n  .ory-elements .placeholder\\:h-\\[20px\\] {\n    &::placeholder {\n      height: 20px;\n    }\n  }\n  .ory-elements .placeholder\\:text-input-foreground-tertiary {\n    &::placeholder {\n      color: var(--color-input-foreground-tertiary);\n    }\n  }\n  .ory-elements .first\\:border-0 {\n    &:first-child {\n      border-style: var(--tw-border-style);\n      border-width: 0px;\n    }\n  }\n  .ory-elements .checked\\:border-checkbox-border-checkbox-border-checked {\n    &:checked {\n      border-color: var(--color-checkbox-border-checkbox-border-checked);\n    }\n  }\n  .ory-elements .checked\\:bg-checkbox-background-checked {\n    &:checked {\n      background-color: var(--color-checkbox-background-checked);\n    }\n  }\n  .ory-elements .focus-within\\:border-input-border-focus {\n    &:focus-within {\n      border-color: var(--color-input-border-focus);\n    }\n  }\n  .ory-elements .hover\\:border-button-identifier-border-border-hover {\n    &:hover {\n      @media (hover: hover) {\n        border-color: var(--color-button-identifier-border-border-hover);\n      }\n    }\n  }\n  .ory-elements .hover\\:border-button-social-border-hover {\n    &:hover {\n      @media (hover: hover) {\n        border-color: var(--color-button-social-border-hover);\n      }\n    }\n  }\n  .ory-elements .hover\\:border-input-border-hover {\n    &:hover {\n      @media (hover: hover) {\n        border-color: var(--color-input-border-hover);\n      }\n    }\n  }\n  .ory-elements .hover\\:bg-button-identifier-background-hover {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-button-identifier-background-hover);\n      }\n    }\n  }\n  .ory-elements .hover\\:bg-button-primary-background-hover {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-button-primary-background-hover);\n      }\n    }\n  }\n  .ory-elements .hover\\:bg-button-secondary-background-hover {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-button-secondary-background-hover);\n      }\n    }\n  }\n  .ory-elements .hover\\:bg-button-social-background-hover {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-button-social-background-hover);\n      }\n    }\n  }\n  .ory-elements .hover\\:bg-input-background-hover {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-input-background-hover);\n      }\n    }\n  }\n  .ory-elements .hover\\:bg-interface-background-default-primary-hover {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-interface-background-default-primary-hover);\n      }\n    }\n  }\n  .ory-elements .hover\\:text-button-link-brand-brand-hover {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-button-link-brand-brand-hover);\n      }\n    }\n  }\n  .ory-elements .hover\\:text-button-link-default-primary-hover {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-button-link-default-primary-hover);\n      }\n    }\n  }\n  .ory-elements .hover\\:text-button-link-default-secondary-hover {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-button-link-default-secondary-hover);\n      }\n    }\n  }\n  .ory-elements .hover\\:text-button-primary-foreground-hover {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-button-primary-foreground-hover);\n      }\n    }\n  }\n  .ory-elements .hover\\:text-button-secondary-foreground-hover {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-button-secondary-foreground-hover);\n      }\n    }\n  }\n  .ory-elements .hover\\:text-button-social-foreground-hover {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-button-social-foreground-hover);\n      }\n    }\n  }\n  .ory-elements .hover\\:ring-button-primary-border-hover {\n    &:hover {\n      @media (hover: hover) {\n        --tw-ring-color: var(--color-button-primary-border-hover);\n      }\n    }\n  }\n  .ory-elements .hover\\:ring-button-secondary-border-hover {\n    &:hover {\n      @media (hover: hover) {\n        --tw-ring-color: var(--color-button-secondary-border-hover);\n      }\n    }\n  }\n  .ory-elements .hover\\:ring-button-social-border-hover {\n    &:hover {\n      @media (hover: hover) {\n        --tw-ring-color: var(--color-button-social-border-hover);\n      }\n    }\n  }\n  .ory-elements .not-focus-within\\:hover\\:border-input-border-hover {\n    &:not(*:focus-within) {\n      &:hover {\n        @media (hover: hover) {\n          border-color: var(--color-input-border-hover);\n        }\n      }\n    }\n  }\n  .ory-elements .focus\\:ring-0 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .ory-elements .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .ory-elements .focus-visible\\:border-input-border-focus {\n    &:focus-visible {\n      border-color: var(--color-input-border-focus);\n    }\n  }\n  .ory-elements .focus-visible\\:outline-hidden {\n    &:focus-visible {\n      --tw-outline-style: none;\n      outline-style: none;\n      @media (forced-colors: active) {\n        outline: 2px solid transparent;\n        outline-offset: 2px;\n      }\n    }\n  }\n  .ory-elements .focus-visible\\:outline-none {\n    &:focus-visible {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .ory-elements .disabled\\:cursor-default {\n    &:disabled {\n      cursor: default;\n    }\n  }\n  .ory-elements .disabled\\:cursor-not-allowed {\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n  .ory-elements .disabled\\:border-input-border-disabled {\n    &:disabled {\n      border-color: var(--color-input-border-disabled);\n    }\n  }\n  .ory-elements .disabled\\:bg-button-primary-background-disabled {\n    &:disabled {\n      background-color: var(--color-button-primary-background-disabled);\n    }\n  }\n  .ory-elements .disabled\\:bg-button-secondary-background-disabled {\n    &:disabled {\n      background-color: var(--color-button-secondary-background-disabled);\n    }\n  }\n  .ory-elements .disabled\\:bg-button-social-background-disabled {\n    &:disabled {\n      background-color: var(--color-button-social-background-disabled);\n    }\n  }\n  .ory-elements .disabled\\:bg-input-background-disabled {\n    &:disabled {\n      background-color: var(--color-input-background-disabled);\n    }\n  }\n  .ory-elements .disabled\\:text-button-primary-foreground-disabled {\n    &:disabled {\n      color: var(--color-button-primary-foreground-disabled);\n    }\n  }\n  .ory-elements .disabled\\:text-button-secondary-foreground-disabled {\n    &:disabled {\n      color: var(--color-button-secondary-foreground-disabled);\n    }\n  }\n  .ory-elements .disabled\\:text-button-social-foreground-disabled {\n    &:disabled {\n      color: var(--color-button-social-foreground-disabled);\n    }\n  }\n  .ory-elements .disabled\\:text-input-foreground-disabled {\n    &:disabled {\n      color: var(--color-input-foreground-disabled);\n    }\n  }\n  .ory-elements .disabled\\:opacity-50 {\n    &:disabled {\n      opacity: 50%;\n    }\n  }\n  .ory-elements .disabled\\:ring-button-primary-border-disabled {\n    &:disabled {\n      --tw-ring-color: var(--color-button-primary-border-disabled);\n    }\n  }\n  .ory-elements .disabled\\:ring-button-secondary-border-disabled {\n    &:disabled {\n      --tw-ring-color: var(--color-button-secondary-border-disabled);\n    }\n  }\n  .ory-elements .disabled\\:ring-button-social-border-disabled {\n    &:disabled {\n      --tw-ring-color: var(--color-button-social-border-disabled);\n    }\n  }\n  .ory-elements .disabled\\:hover\\:bg-ui-transparent {\n    &:disabled {\n      &:hover {\n        @media (hover: hover) {\n          background-color: var(--color-ui-transparent);\n        }\n      }\n    }\n  }\n  .ory-elements .has-disabled\\:opacity-50 {\n    &:has(*:disabled) {\n      opacity: 50%;\n    }\n  }\n  .ory-elements .data-disabled\\:pointer-events-none {\n    &[data-disabled] {\n      pointer-events: none;\n    }\n  }\n  .ory-elements .data-\\[disabled\\]\\:bg-button-secondary-background-disabled {\n    &[data-disabled] {\n      background-color: var(--color-button-secondary-background-disabled);\n    }\n  }\n  .ory-elements .data-\\[disabled\\]\\:text-button-secondary-foreground-disabled {\n    &[data-disabled] {\n      color: var(--color-button-secondary-foreground-disabled);\n    }\n  }\n  .ory-elements .data-\\[disabled\\=true\\]\\:border-input-border-disabled {\n    &[data-disabled=\"true\"] {\n      border-color: var(--color-input-border-disabled);\n    }\n  }\n  .ory-elements .data-\\[disabled\\=true\\]\\:bg-input-background-disabled {\n    &[data-disabled=\"true\"] {\n      background-color: var(--color-input-background-disabled);\n    }\n  }\n  .ory-elements .data-\\[disabled\\=true\\]\\:text-input-foreground-disabled {\n    &[data-disabled=\"true\"] {\n      color: var(--color-input-foreground-disabled);\n    }\n  }\n  .ory-elements .data-\\[state\\=checked\\]\\:translate-x-3 {\n    &[data-state=\"checked\"] {\n      --tw-translate-x: calc(var(--spacing) * 3);\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n  .ory-elements .data-\\[state\\=checked\\]\\:border-toggle-border-checked {\n    &[data-state=\"checked\"] {\n      border-color: var(--color-toggle-border-checked);\n    }\n  }\n  .ory-elements .data-\\[state\\=checked\\]\\:bg-toggle-background-checked {\n    &[data-state=\"checked\"] {\n      background-color: var(--color-toggle-background-checked);\n    }\n  }\n  .ory-elements .data-\\[state\\=checked\\]\\:bg-toggle-foreground-checked {\n    &[data-state=\"checked\"] {\n      background-color: var(--color-toggle-foreground-checked);\n    }\n  }\n  .ory-elements .data-\\[state\\=closed\\]\\:animate-drop-down-out {\n    &[data-state=\"closed\"] {\n      animation: var(--animate-drop-down-out);\n    }\n  }\n  .ory-elements .max-sm\\:bottom-0 {\n    @media (width < 40rem) {\n      bottom: calc(var(--spacing) * 0);\n    }\n  }\n  .ory-elements .max-sm\\:left-8 {\n    @media (width < 40rem) {\n      left: calc(var(--spacing) * 8);\n    }\n  }\n  .ory-elements .max-sm\\:hidden {\n    @media (width < 40rem) {\n      display: none;\n    }\n  }\n  .ory-elements .max-sm\\:translate-y-full {\n    @media (width < 40rem) {\n      --tw-translate-y: 100%;\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n  .ory-elements .max-sm\\:rounded-b-branding {\n    @media (width < 40rem) {\n      border-bottom-right-radius: var(--radius-branding);\n      border-bottom-left-radius: var(--radius-branding);\n    }\n  }\n  .ory-elements .max-sm\\:py-\\[7px\\] {\n    @media (width < 40rem) {\n      padding-block: 7px;\n    }\n  }\n  .ory-elements .sm\\:top-8 {\n    @media (width >= 40rem) {\n      top: calc(var(--spacing) * 8);\n    }\n  }\n  .ory-elements .sm\\:right-0 {\n    @media (width >= 40rem) {\n      right: calc(var(--spacing) * 0);\n    }\n  }\n  .ory-elements .sm\\:block {\n    @media (width >= 40rem) {\n      display: block;\n    }\n  }\n  .ory-elements .sm\\:hidden {\n    @media (width >= 40rem) {\n      display: none;\n    }\n  }\n  .ory-elements .sm\\:w-\\[480px\\] {\n    @media (width >= 40rem) {\n      width: 480px;\n    }\n  }\n  .ory-elements .sm\\:max-w-\\[480px\\] {\n    @media (width >= 40rem) {\n      max-width: 480px;\n    }\n  }\n  .ory-elements .sm\\:translate-x-full {\n    @media (width >= 40rem) {\n      --tw-translate-x: 100%;\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n  .ory-elements .sm\\:grid-cols-2 {\n    @media (width >= 40rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n  }\n  .ory-elements .sm\\:grid-cols-3 {\n    @media (width >= 40rem) {\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n  }\n  .ory-elements .sm\\:flex-row {\n    @media (width >= 40rem) {\n      flex-direction: row;\n    }\n  }\n  .ory-elements .sm\\:items-center {\n    @media (width >= 40rem) {\n      align-items: center;\n    }\n  }\n  .ory-elements .sm\\:items-end {\n    @media (width >= 40rem) {\n      align-items: flex-end;\n    }\n  }\n  .ory-elements .sm\\:rounded-cards {\n    @media (width >= 40rem) {\n      border-radius: var(--radius-cards);\n    }\n  }\n  .ory-elements .sm\\:rounded-r-branding {\n    @media (width >= 40rem) {\n      border-top-right-radius: var(--radius-branding);\n      border-bottom-right-radius: var(--radius-branding);\n    }\n  }\n  .ory-elements .sm\\:border {\n    @media (width >= 40rem) {\n      border-style: var(--tw-border-style);\n      border-width: 1px;\n    }\n  }\n  .ory-elements .sm\\:px-12 {\n    @media (width >= 40rem) {\n      padding-inline: calc(var(--spacing) * 12);\n    }\n  }\n  .ory-elements .sm\\:py-14 {\n    @media (width >= 40rem) {\n      padding-block: calc(var(--spacing) * 14);\n    }\n  }\n  .ory-elements .sm\\:pl-\\[7px\\] {\n    @media (width >= 40rem) {\n      padding-left: 7px;\n    }\n  }\n  .ory-elements .md\\:mt-16 {\n    @media (width >= 48rem) {\n      margin-top: calc(var(--spacing) * 16);\n    }\n  }\n  .ory-elements .md\\:max-w-96 {\n    @media (width >= 48rem) {\n      max-width: calc(var(--spacing) * 96);\n    }\n  }\n  .ory-elements .md\\:max-w-\\[712px\\] {\n    @media (width >= 48rem) {\n      max-width: 712px;\n    }\n  }\n  .ory-elements .md\\:grid-cols-2 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n  }\n  .ory-elements .md\\:grid-cols-3 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n  }\n  .ory-elements .md\\:grid-cols-5 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(5, minmax(0, 1fr));\n    }\n  }\n  .ory-elements .md\\:flex-row {\n    @media (width >= 48rem) {\n      flex-direction: row;\n    }\n  }\n  .ory-elements .md\\:items-center {\n    @media (width >= 48rem) {\n      align-items: center;\n    }\n  }\n  .ory-elements .md\\:justify-between {\n    @media (width >= 48rem) {\n      justify-content: space-between;\n    }\n  }\n  .ory-elements .md\\:gap-12 {\n    @media (width >= 48rem) {\n      gap: calc(var(--spacing) * 12);\n    }\n  }\n  .ory-elements .lg\\:max-w-\\[802px\\] {\n    @media (width >= 64rem) {\n      max-width: 802px;\n    }\n  }\n  .ory-elements .lg\\:py-4\\.5 {\n    @media (width >= 64rem) {\n      padding-block: calc(var(--spacing) * 4.5);\n    }\n  }\n  .ory-elements .xl\\:max-w-\\[896px\\] {\n    @media (width >= 80rem) {\n      max-width: 896px;\n    }\n  }\n  .ory-elements .loading\\:pointer-events-none {\n    &[data-loading=\"true\"] {\n      pointer-events: none;\n    }\n  }\n  .ory-elements .loading\\:cursor-wait {\n    &[data-loading=\"true\"] {\n      cursor: wait;\n    }\n  }\n  .ory-elements .loading\\:bg-button-primary-background-default {\n    &[data-loading=\"true\"] {\n      background-color: var(--color-button-primary-background-default);\n    }\n  }\n  .ory-elements .loading\\:bg-button-secondary-background-default {\n    &[data-loading=\"true\"] {\n      background-color: var(--color-button-secondary-background-default);\n    }\n  }\n  .ory-elements .loading\\:bg-button-social-background-default {\n    &[data-loading=\"true\"] {\n      background-color: var(--color-button-social-background-default);\n    }\n  }\n  .ory-elements .loading\\:text-button-primary-foreground-default {\n    &[data-loading=\"true\"] {\n      color: var(--color-button-primary-foreground-default);\n    }\n  }\n  .ory-elements .loading\\:text-button-secondary-foreground-default {\n    &[data-loading=\"true\"] {\n      color: var(--color-button-secondary-foreground-default);\n    }\n  }\n  .ory-elements .loading\\:text-button-social-foreground-default {\n    &[data-loading=\"true\"] {\n      color: var(--color-button-social-foreground-default);\n    }\n  }\n  .ory-elements .loading\\:ring-button-primary-border-default {\n    &[data-loading=\"true\"] {\n      --tw-ring-color: var(--color-button-primary-border-default);\n    }\n  }\n  .ory-elements .loading\\:ring-button-secondary-border-default {\n    &[data-loading=\"true\"] {\n      --tw-ring-color: var(--color-button-secondary-border-default);\n    }\n  }\n  .ory-elements .loading\\:ring-button-social-border-default {\n    &[data-loading=\"true\"] {\n      --tw-ring-color: var(--color-button-social-border-default);\n    }\n  }\n}\n@layer ory-elements {\n  .ory-elements, :host {\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',\n    monospace;\n    --spacing: 0.25rem;\n    --breakpoint-sm: 40rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --font-weight-normal: 400;\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --leading-tight: 1.25;\n    --leading-normal: 1.5;\n    --animate-spin: spin 1s linear infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-mono-font-family: var(--font-mono);\n    --ui-100: #f1f5f9;\n    --ui-200: #e2e8f0;\n    --ui-300: #cbd5e1;\n    --ui-400: #94a3b8;\n    --ui-50: #f8fafc;\n    --ui-500: #64748b;\n    --ui-600: #475569;\n    --ui-700: #334155;\n    --ui-800: #1e293b;\n    --ui-900: #0f172a;\n    --ui-950: #020617;\n    --ui-black: #000000;\n    --ui-danger: #dc2626;\n    --ui-success: #22c55e;\n    --ui-transparent: #ffffff00;\n    --ui-warning: #eab308;\n    --ui-white: #ffffff;\n    --button-identifier-background-default: var(\n    --interface-background-brand-secondary\n  );\n    --button-identifier-background-hover: var(\n    --interface-background-brand-secondary-hover\n  );\n    --button-identifier-border-border-default: var(\n    --interface-border-brand-brand\n  );\n    --button-identifier-border-border-hover: var(--interface-border-brand-brand);\n    --button-identifier-foreground-default: var(\n    --interface-foreground-brand-on-secondary\n  );\n    --button-identifier-foreground-hover: var(\n    --interface-foreground-brand-on-secondary\n  );\n    --button-link-brand-brand: var(--interface-foreground-brand-primary);\n    --button-link-brand-brand-hover: var(--interface-foreground-default-primary);\n    --button-link-default-primary: var(--interface-foreground-default-primary);\n    --button-link-default-primary-hover: var(\n    --interface-foreground-brand-primary\n  );\n    --button-link-default-secondary: var(\n    --interface-foreground-default-secondary\n  );\n    --button-link-default-secondary-hover: var(\n    --interface-foreground-default-tertiary\n  );\n    --button-link-disabled-disabled: var(\n    --interface-foreground-disabled-disabled\n  );\n    --button-primary-background-default: var(\n    --interface-background-brand-primary\n  );\n    --button-primary-background-disabled: var(\n    --interface-background-disabled-disabled\n  );\n    --button-primary-background-hover: var(\n    --interface-background-brand-primary-hover\n  );\n    --button-primary-border-default: var(--interface-border-default-none);\n    --button-primary-border-disabled: var(--interface-border-disabled-disabled);\n    --button-primary-border-hover: var(--interface-border-default-none);\n    --button-primary-foreground-default: var(\n    --interface-foreground-brand-on-primary\n  );\n    --button-primary-foreground-disabled: var(\n    --interface-foreground-disabled-on-disabled\n  );\n    --button-primary-foreground-hover: var(\n    --interface-foreground-brand-on-primary\n  );\n    --button-secondary-background-default: var(\n    --interface-background-default-primary\n  );\n    --button-secondary-background-disabled: var(\n    --interface-background-disabled-disabled\n  );\n    --button-secondary-background-hover: var(\n    --interface-background-default-primary-hover\n  );\n    --button-secondary-border-default: var(--interface-border-default-primary);\n    --button-secondary-border-disabled: var(--interface-border-disabled-disabled);\n    --button-secondary-border-hover: var(--interface-border-default-primary);\n    --button-secondary-foreground-default: var(\n    --interface-foreground-default-primary\n  );\n    --button-secondary-foreground-disabled: var(\n    --interface-foreground-disabled-on-disabled\n  );\n    --button-secondary-foreground-hover: var(\n    --interface-foreground-default-secondary\n  );\n    --button-social-background-default: var(\n    --interface-background-default-primary\n  );\n    --button-social-background-disabled: var(\n    --interface-background-disabled-disabled\n  );\n    --button-social-background-generic-provider: var(\n    --interface-background-default-inverted\n  );\n    --button-social-background-hover: var(\n    --interface-background-default-primary-hover\n  );\n    --button-social-border-default: var(--interface-border-default-primary);\n    --button-social-border-disabled: var(--interface-border-disabled-disabled);\n    --button-social-border-generic-provider: var(--interface-border-default-none);\n    --button-social-border-hover: var(--interface-border-default-primary);\n    --button-social-foreground-default: var(\n    --interface-foreground-default-primary\n  );\n    --button-social-foreground-disabled: var(\n    --interface-foreground-disabled-on-disabled\n  );\n    --button-social-foreground-generic-provider: var(\n    --interface-foreground-default-inverted\n  )