/* __ (oo) //||\\ PostCSS Obfuscator V 1.6.0 Beta https://github.com/n4j1Br4ch1D/postcss-obfuscator ** this only appears on Dev Mode ** */ /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */ @layer properties; @layer theme, base, components, utilities; @layer theme { :root, :host { --font-sans: 'Rubik', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-300: oklch(80.8% 0.114 19.571); --color-red-500: oklch(63.7% 0.237 25.331); --color-orange-300: oklch(83.7% 0.128 66.29); --color-orange-500: oklch(70.5% 0.213 47.604); --color-amber-400: oklch(82.8% 0.189 84.429); --color-yellow-400: oklch(85.2% 0.199 91.936); --color-lime-300: oklch(89.7% 0.196 126.665); --color-green-400: oklch(79.2% 0.209 151.711); --color-emerald-500: oklch(69.6% 0.17 162.48); --color-teal-600: oklch(60% 0.118 184.704); --color-cyan-800: oklch(45% 0.085 224.283); --color-sky-950: oklch(29.3% 0.066 243.157); --color-blue-100: oklch(93.2% 0.032 255.585); --color-blue-300: oklch(80.9% 0.105 251.813); --color-blue-500: oklch(62.3% 0.214 259.815); --color-blue-600: oklch(54.6% 0.245 262.881); --color-blue-700: oklch(48.8% 0.243 264.376); --color-blue-800: oklch(42.4% 0.199 265.638); --color-violet-600: oklch(54.1% 0.281 293.009); --color-purple-300: oklch(82.7% 0.119 306.383); --color-purple-400: oklch(71.4% 0.203 305.504); --color-purple-950: oklch(29.1% 0.149 302.717); --color-pink-100: oklch(94.8% 0.028 342.258); --color-pink-500: oklch(65.6% 0.241 354.308); --color-gray-50: oklch(98.5% 0.002 247.839); --color-gray-100: oklch(96.7% 0.003 264.542); --color-gray-200: oklch(92.8% 0.006 264.531); --color-gray-500: oklch(55.1% 0.027 264.364); --color-gray-600: oklch(44.6% 0.03 256.802); --color-gray-700: oklch(37.3% 0.034 259.733); --color-gray-800: oklch(27.8% 0.033 256.848); --color-gray-900: oklch(21% 0.034 264.665); --color-neutral-500: oklch(55.6% 0 0); --color-neutral-800: oklch(26.9% 0 0); --color-stone-300: oklch(86.9% 0.005 56.366); --color-stone-500: oklch(55.3% 0.013 58.071); --color-black: #000; --color-white: #fff; --spacing: 0.25rem; --container-2xs: 18rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; --text-xs: 0.75rem; --text-xs--line-height: calc(1 / 0.75); --text-sm: 0.875rem; --text-sm--line-height: calc(1.25 / 0.875); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --leading-relaxed: 1.625; --radius-xs: 0.125rem; --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --animate-spin: spin 1s linear infinite; --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; --blur-sm: 8px; --blur-md: 12px; --blur-2xl: 40px; --blur-3xl: 64px; --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); --animate-marqueeRight: marqueeRight 20s linear infinite; --animate-marqueeLeft: marqueeLeft 20s linear infinite; --animate-marqueeTop: marqueeTop 7s linear infinite; --animate-marqueeBottom: marqueeBottom 7s linear infinite; } } @layer base { *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; } html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; 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"); font-feature-settings: var(--default-font-feature-settings, normal); font-variation-settings: var(--default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--default-mono-font-feature-settings, normal); font-variation-settings: var(--default-mono-font-variation-settings, normal); font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } :-moz-focusring { outline: auto; } progress { vertical-align: baseline; } summary { display: list-item; } ol, ul, menu { list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } button, input, select, optgroup, textarea, ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; border-radius: 0; background-color: transparent; opacity: 1; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; } @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { ::placeholder { color: currentcolor; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, currentcolor 50%, transparent); } } } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } ::-webkit-calendar-picker-indicator { line-height: 1; } :-moz-ui-invalid { box-shadow: none; } button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [hidden]:where(:not([hidden="until-found"])) { display: none !important; } } @layer utilities { .eu9db { position: relative; display: grid; width: 100%; overflow: hidden; container-type: inline-size; grid-template-columns: auto 1fr; } .zcbgs { pointer-events: none; position: fixed; inset: calc(0.25rem * 0); z-index: 80; margin: calc(0.25rem * 0); display: grid; width: 100%; height: 100%; justify-items: center; overflow-x: hidden; overflow-y: auto; padding: calc(0.25rem * 4); opacity: 0%; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .carousel-prev { position: absolute; inset-block: calc(0.25rem * 0); margin-block: auto; display: inline-flex; height: max-content; cursor: pointer; align-items: center; justify-content: center; &.disabled { pointer-events: none; } border-start-start-radius: var(--radius-2xl); border-end-start-radius: var(--radius-2xl); } .carousel-next { position: absolute; inset-block: calc(0.25rem * 0); margin-block: auto; display: inline-flex; height: max-content; cursor: pointer; align-items: center; justify-content: center; &.disabled { pointer-events: none; } border-start-end-radius: var(--radius-2xl); border-end-end-radius: var(--radius-2xl); } .rou4l { position: relative; grid-column-start: 1; grid-row-start: 1; &:after { pointer-events: none; position: absolute; inset-inline-end: 1px; top: calc(1/2 * 100%); bottom: calc(0.25rem * 0); z-index: 1; width: calc(0.25rem * 5); height: calc(0.25rem * 5); rotate: 45deg; border-style: var(--tw-border-style); border-width: 2px; border-color: var(--color-base-100); background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 40%, transparent); } --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-shadow-color: var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent); } outline-style: var(--tw-outline-style); outline-width: 1px; outline-offset: calc(2px * -1); outline-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { outline-color: color-mix(in oklab, var(--color-base-content) 5%, transparent); } --tw-backdrop-blur: blur(8px); webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: blur(8px); --tw-content: ''; content: var(--tw-content); translate: 50% -50%; } & > * { pointer-events: none; position: absolute; inset-inline-start: calc(0.25rem * 0); top: calc(0.25rem * 0); bottom: calc(0.25rem * 0); height: 100%; width: 100cqi; max-width: none; object-fit: cover; object-position: center; } [dir="rtl"] &:after { right: auto; left: 1px; translate: -50% -50%; } [dir="rtl"] & > * { left: auto; right: 0; } } .q838s { position: relative; grid-column-start: 1; grid-row-start: 1; overflow: hidden; border-inline-end-style: var(--tw-border-style); border-inline-end-width: 2px; border-color: var(--color-base-100); & > * { pointer-events: none; position: absolute; inset-inline-start: calc(0.25rem * 0); top: calc(0.25rem * 0); bottom: calc(0.25rem * 0); height: 100%; width: 100cqi; max-width: none; object-fit: cover; object-position: center; } [dir="rtl"] & > * { left: auto; right: 0; } } .usjs4 { display: flex; flex-direction: column; flex-wrap: wrap; gap: calc(0.25rem * 0.5); border-radius: var(--radius-box); padding: calc(0.25rem * 2); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --menu-active-fg: var(--color-primary); --menu-active-bg: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { --menu-active-bg: color-mix(in oklab, var(--color-primary) 10%, #0000); } --menu-hover-fg: var(--color-base-content); --menu-hover-bg: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { --menu-hover-bg: color-mix(in oklab, var(--color-neutral) 10%, #0000); } :where(li ul) { position: relative; white-space: nowrap; } :where(li:not(.dropdown) ul) { margin-inline-start: calc(0.25rem * 4); padding-inline-start: calc(0.25rem * 2); &:before { position: absolute; inset-inline-start: calc(0.25rem * 0); top: calc(0.25rem * 3); bottom: calc(0.25rem * 2.5); background-color: var(--color-base-content); opacity: 10%; width: var(--border); content: ""; } } :where(li > .suil4:not(.suil4-show)) { display: none; } :where(.usjs4 li:empty) { background-color: var(--color-base-content); opacity: 10%; margin: 0.5rem 1rem; height: 1px; } :where(li:not(.rgc5h, .tooltip) > *:not(ul, .collapse, .accordion-content, .rgc5h, .btn)) { border-radius: var(--radius-field); padding-inline: calc(0.25rem * 4); padding-block: calc(0.25rem * 2.5); text-align: start; 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; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: var(--ease-out); transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: 200ms; --tw-duration: 200ms; --tw-ease: var(--ease-out); text-wrap: balance; } :where(li:not(.rgc5h) > *:not(ul, .collapse, .accordion-content, .rgc5h, .btn)) { display: grid; grid-auto-flow: column; align-content: flex-start; align-items: center; gap: calc(0.25rem * 2); grid-auto-columns: minmax(auto, max-content) auto max-content; user-select: none; } :where(li.tooltip) > * { border-radius: var(--radius-field); padding-inline: calc(0.25rem * 4); padding-block: calc(0.25rem * 2.5); text-align: start; } :where(.usjs4 li:not(.rgc5h, .usjs4-disabled)) { color: var(--color-base-content); } :where( .usjs4 li:not(.rgc5h, .usjs4-disabled) > *:not(ul, .collapse, .accordion-content, .dropdown-active, .usjs4-title) ) { &:not(.btn):focus-visible { cursor: pointer; --tw-outline-style: none; outline-style: none; color: var(--menu-hover-fg); background-color: var(--menu-hover-bg); } &:hover { cursor: pointer; --tw-outline-style: none; outline-style: none; color: var(--menu-hover-fg); background-color: var(--menu-hover-bg); } } li:not(.rgc5h, .wxbtu) > :not(ul, .rgc5h, .collapse, .accordion-content, .btn).menu-active { color: var(--menu-active-fg); background-color: var(--menu-active-bg); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); } li.wxbtu { pointer-events: none; opacity: 50%; webkit-user-select: none; user-select: none; } :where(& li) { position: relative; display: flex; flex-shrink: 0; flex-direction: column; flex-wrap: wrap; align-items: stretch; .badge { justify-self: flex-end; } } } .y92ur { pointer-events: none; position: absolute; inset-inline-start: calc(0.25rem * 0); margin-inline-start: calc(0.25rem * 3); width: fit-content; overflow: hidden; background-color: transparent; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); text-overflow: ellipsis; color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } top: calc(var(--size-field, 0.25rem) * 9.5 / 2); translate: 0 -50%; transition: top 0.1s ease-out, translate 0.1s ease-out, scale 0.1s ease-out, opacity 0.1s ease-out; } .a7mcv { pointer-events: none; position: absolute; inset-inline-start: calc(0.25rem * 0); inset-inline-start: 1px; margin-inline-start: calc(0.25rem * 4); width: fit-content; overflow: hidden; background-color: transparent; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); text-overflow: ellipsis; color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } top: 9px; transition: top 0.1s ease-out, translate 0.1s ease-out, scale 0.1s ease-out, opacity 0.1s ease-out; } .hu72o { --link-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --link-color: color-mix(in oklab, var(--color-base-content) 80%, #0000); } display: inline-block; cursor: pointer; --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); text-decoration-line: underline; color: var(--link-color); &:hover { color: var(--link-color); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--link-color) 80%, #000); } } &:focus { --tw-outline-style: none; outline-style: none; } &:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } &.disabled, &[disabled], &:disabled { pointer-events: none; opacity: 50%; } &:where(.ndd0f) { text-decoration-line: none; @media (hover:hover) { &:hover { @media (hover: hover) { text-decoration-line: underline; } } } } &:where(.gip9p) { position: relative; text-decoration-line: none; &::before { content: var(--tw-content); pointer-events: none; position: absolute; inset-inline-start: calc(0.25rem * 0); bottom: calc(0.25rem * 0); height: 1px; width: 100%; background-color: currentColor; transition-property: transform, translate, scale, rotate; transition-timing-function: var(--ease-in-out); transition-duration: 300ms; --tw-duration: 300ms; --tw-ease: var(--ease-in-out); --tw-content: ''; } } &:where(.gip9p)::before { transform-origin: 100% 50%; transform: scale3d(0, 1, 1); } &:where(.gip9p):hover::before { transform-origin: 0% 50%; transform: scale3d(1, 1, 1); } } .gip9p { .hu72o:where(&) { position: relative; text-decoration-line: none; &::before { content: var(--tw-content); pointer-events: none; position: absolute; inset-inline-start: calc(0.25rem * 0); bottom: calc(0.25rem * 0); height: 1px; width: 100%; background-color: currentColor; transition-property: transform, translate, scale, rotate; transition-timing-function: var(--ease-in-out); transition-duration: 300ms; --tw-duration: 300ms; --tw-ease: var(--ease-in-out); --tw-content: ''; } } .hu72o:where(&)::before { transform-origin: 100% 50%; transform: scale3d(0, 1, 1); } .hu72o:where(&):hover::before { transform-origin: 0% 50%; transform: scale3d(1, 1, 1); } } .erjrn { .g7kzo:has(> &) { padding: calc(0.25rem * 0); :where(.erjrn:first-child) > textarea { padding-block: calc(0.25rem * 2); padding-inline-start: calc(0.25rem * 4); } :where(.erjrn:nth-child(2)) > textarea { padding-block: calc(0.25rem * 2); } :where(.erjrn:last-child) > textarea { padding-block: calc(0.25rem * 2); padding-inline-end: calc(0.25rem * 4); } :where(.erjrn:nth-child(2)) .a7mcv, :where(.erjrn:last-child) .a7mcv { margin-inline-start: calc(0.25rem * 0); } & * > textarea { width: 100%; height: 100%; min-height: calc(0.25rem * 20); } } .g7kzo:has(> &) textarea { &::placeholder { color: transparent; } &:focus { &::placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } } } position: relative; display: block; width: 100%; .g7kzo { &::placeholder { color: transparent; } &:focus { &::placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } } field-sizing: content; &:has(> textarea[disabled]), &:is(:disabled, [disabled]) { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 40%, transparent); } background-color: transparent; opacity: 50%; &::placeholder { color: transparent; } & ~ .a7mcv { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 30%, transparent); } } } } &:focus-within, &:not(:has(textarea:placeholder-shown)), &:has(.g7kzo:focus) { .a7mcv { pointer-events: auto; top: calc(0.25rem * 0); background-color: var(--color-base-100); padding-inline: calc(0.25rem * 1); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } translate: -12.5% calc(-50% - 0.125em); scale: 0.75; } } &:focus-within, &:has(.g7kzo:focus) { .a7mcv { --input-color: var(--color-primary); color: var(--input-color); } } &:has(.fjc8l) .a7mcv { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } &:has(.l4uju) .a7mcv { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } &:has(.t22re) .a7mcv { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } &:has(.xp64d) .a7mcv { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } &:has(.k1toe) .a7mcv { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } } .im4zz { .dhrcb:has(> &) input { &::placeholder { color: transparent; } &:focus { &::placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } } } position: relative; display: block; width: 100%; .dhrcb { &::placeholder { color: transparent; } &:focus { &::placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } } &:has(> input[disabled]), &:is(:disabled, [disabled]) { border-style: var(--tw-border-style); border-width: 1px; background-color: transparent; opacity: 50%; & ~ .y92ur { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 30%, transparent); } } } } &:focus-within, &:not(:has(input:placeholder-shown)), &:has(.dhrcb:focus) { .y92ur { pointer-events: auto; top: calc(0.25rem * 0); background-color: var(--color-base-100); padding-inline: calc(0.25rem * 1); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } translate: -12.5% calc(-50% - 0.125em); scale: 0.75; } } &:focus-within, &:has(.dhrcb:focus) { .y92ur { --input-color: var(--color-primary); color: var(--input-color); } } &:has(.nnav1) .y92ur { margin-inline-start: calc(0.25rem * 2.5); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); top: calc(var(--size-field, 0.25rem) * 6 / 2); } &:has(.v9d15) .y92ur { margin-inline-start: calc(0.25rem * 2.5); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); top: calc(var(--size-field, 0.25rem) * 7.5 / 2); } &:has(.mq7ho) .y92ur { margin-inline-start: calc(0.25rem * 3); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); top: calc(var(--size-field, 0.25rem) * 9.5 / 2); } &:has(.ub558) .y92ur { margin-inline-start: calc(0.25rem * 4); font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); top: calc(var(--size-field, 0.25rem) * 11.5 / 2); } &:has(.vltuq) .y92ur { margin-inline-start: calc(0.25rem * 4.5); font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); top: calc(var(--size-field, 0.25rem) * 14 / 2); } } .bylme { appearance: none; webkit-appearance: none; --range-color: var(--color-base-content); --range-thumb-border-width: 3px; --range-track-height: 8px; --range-thumb-size: 16px; position: relative; width: 100%; border-radius: calc(infinity * 1px); background-color: transparent; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); height: var(--range-track-height); &::-webkit-slider-runnable-track { width: 100%; border-radius: calc(infinity * 1px); background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } height: var(--range-track-height); } &::-moz-range-track { width: 100%; border-radius: calc(infinity * 1px); background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } height: var(--range-track-height); } &::-webkit-slider-thumb { position: relative; top: calc(1/2 * 100%); --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); border-radius: calc(infinity * 1px); background-color: var(--color-base-100); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-shadow-color: var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent); } transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: var(--ease-in-out); transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: 150ms; --tw-duration: 150ms; --tw-ease: var(--ease-in-out); &:hover { @media (hover: hover) { --tw-scale-x: 125%; --tw-scale-y: 125%; --tw-scale-z: 125%; scale: var(--tw-scale-x) var(--tw-scale-y); } cursor: grab; box-shadow: 0 0 0 2px var(--range-color); } &:active { --tw-scale-x: 125%; --tw-scale-y: 125%; --tw-scale-z: 125%; scale: var(--tw-scale-x) var(--tw-scale-y); cursor: grabbing; box-shadow: 0 0 0 3px var(--range-color); } appearance: none; box-sizing: border-box; webkit-appearance: none; color: var(--range-color); border-color: var(--range-color); border-style: solid; border-width: var(--range-thumb-border-width); height: var(--range-thumb-size); width: var(--range-thumb-size); } &::-moz-range-thumb { position: relative; border-radius: calc(infinity * 1px); background-color: var(--color-base-100); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: var(--ease-in-out); transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: 150ms; --tw-duration: 150ms; --tw-ease: var(--ease-in-out); top: 50%; color: var(--range-color); box-sizing: border-box; border-color: var(--range-color); border-style: solid; border-width: var(--range-thumb-border-width); height: var(--range-thumb-size); width: var(--range-thumb-size); &:hover { cursor: grab; box-shadow: 0 0 0 2px var(--range-color); } &:active { cursor: grabbing; box-shadow: 0 0 0 3px var(--range-color); } } &:focus { outline: none; } &.disabled { pointer-events: none; opacity: 50%; } &:disabled { pointer-events: none; opacity: 50%; } &[disabled] { pointer-events: none; opacity: 50%; } [dir="rtl"] &::-webkit-slider-thumb { transform: scaleX(-1); } [dir="rtl"] &::-moz-range-thumb { transform: scaleX(-1); } [dir="rtl"] &::-webkit-slider-runnable-track { direction: rtl; } [dir="rtl"] &::-moz-range-track { direction: rtl; } } .o1ezv { .jm0bt > &:focus-visible { border-end-end-radius: 0; border-end-start-radius: 0; } position: relative; display: inline-flex; cursor: pointer; appearance: none; align-items: center; justify-content: center; text-align: center; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); color: var(--color-base-content); webkit-user-select: none; user-select: none; height: var(--size); --size: calc(var(--size-field, 0.25rem) * 9.5); --tab-p: 1rem; --tab-bg: var(--color-base-100); --tab-border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --tab-border-color: color-mix(in oklab, var(--color-base-content), #0000 90%); } padding-inline: var(--tab-p, 1rem); &:focus, &:focus-visible { --tw-outline-style: none; outline-style: none; } &[disabled] { pointer-events: none; opacity: 40%; } @media (hover: hover) { &[disabled]:hover { pointer-events: none; opacity: 40%; } } .bakjs > & { border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } @media (hover:hover) { &:hover { @media (hover: hover) { border-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary) 30%, transparent); } } } } @media (hover:hover) { &:hover { @media (hover: hover) { color: var(--color-primary); } } } border-style: solid; border-bottom-width: calc(var(--border, 1px) + 1px); } .jm0bt > & { @media (hover:hover) { &:hover { @media (hover: hover) { border-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary) 30%, transparent); } } } } @media (hover:hover) { &:hover { @media (hover: hover) { color: var(--color-primary); } } } border: var(--tab-border, 1px) solid transparent; border-width: 0 0 var(--tab-border, 1px) 0; border-radius: var(--radius-field, 0.375rem); border-bottom-color: var(--tab-border-color); padding-inline-start: var(--tab-p, 1rem); padding-inline-end: var(--tab-p, 1rem); padding-top: var(--tab-border, 1px); } .jm0bt > &.y6wci:not([disabled]) { background-color: var(--tab-bg); border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px); border-color: var(--tab-border-color); border-end-start-radius: 0; border-end-end-radius: 0; padding-inline-start: calc(var(--tab-p, 1rem) - var(--tab-border, 1px)); padding-inline-end: calc(var(--tab-p, 1rem) - var(--tab-border, 1px)); padding-bottom: var(--tab-border, 1px); padding-top: 0; } .jm0bt > &.y6wci:not([disabled]):before { content: ""; display: block; position: absolute; z-index: 1; width: calc(100% + var(--radius-field, 0.375rem) * 2); height: var(--radius-field, 0.375rem); bottom: 0; background-size: var(--radius-field, 0.375rem); background-repeat: no-repeat; background-position: top left, top right; --tab-grad: calc(69% - var(--tab-border, 1px)); --radius-start: radial-gradient( circle at top left, transparent var(--tab-grad), var(--tab-border-color) calc(var(--tab-grad) + 0.25px), var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)), var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px) ); --radius-end: radial-gradient( circle at top right, transparent var(--tab-grad), var(--tab-border-color) calc(var(--tab-grad) + 0.25px), var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)), var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px) ); background-image: var(--radius-start), var(--radius-end); } .jm0bt > &.y6wci:not([disabled]):first-child:before { background-image: var(--radius-end); background-position: top right; } .jm0bt > &.y6wci:not([disabled]):last-child:before { background-image: var(--radius-start); background-position: top left; } [dir="rtl"] .jm0bt > &.y6wci:not([disabled]):first-child:before { background-image: var(--radius-start); background-position: top left; } [dir="rtl"] .jm0bt > &.y6wci:not([disabled]):last-child:before { background-image: var(--radius-end); background-position: top right; } .l7fhj :where(&) { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); --size: calc(var(--size-field, 0.25rem) * 14); --tab-p: 1.5rem; } .z8aj2 :where(&) { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --size: calc(var(--size-field, 0.25rem) * 11.5); --tab-p: 1.25rem; } .iuz2a :where(&) { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --size: calc(var(--size-field, 0.25rem) * 9.5); --tab-p: 1rem; } .hipaa :where(&) { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --size: calc(var(--size-field, 0.25rem) * 7.5); --tab-p: 0.75rem; } .kho7f :where(&) { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --size: calc(var(--size-field, 0.25rem) * 6); --tab-p: 0.5rem; } } .btn { display: inline-flex; flex-shrink: 0; cursor: pointer; flex-wrap: nowrap; align-items: center; justify-content: center; gap: calc(0.25rem * 2); text-align: center; vertical-align: middle; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); text-decoration-line: none; webkit-user-select: none; user-select: none; @media (prefers-reduced-motion: reduce) { transition-property: none; } padding-inline: var(--btn-p); color: var(--btn-fg); height: var(--size); outline-color: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { outline-color: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, var(--color-base-100)); } transition-property: color, background-color, border-color, box-shadow; transition-timing-function: cubic-bezier(0, 0, 0.96, 1.03); transition-duration: 0.25s; border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); background-color: var(--btn-bg); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--btn-noise); border: var(--border) solid var(--btn-border); box-shadow: 0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 8%)) inset, var(--btn-shadow); --size: calc(var(--size-field, 0.25rem) * 9.5); --btn-bg: var(--btn-color, var(--color-neutral)); --btn-fg: var(--color-neutral-content); --btn-p: 1rem; --btn-border: var(--btn-bg); @supports (color: color-mix(in lab, red, red)) { --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%)); } --btn-shadow: 0px 1px 3px 0px var(--color-base-300), 0px 1px 2px -1px var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { --btn-shadow: 0px 1px 3px 0px color-mix(in oklab, var(--color-base-300) 40%, #0000), 0px 1px 2px -1px color-mix(in oklab, var(--color-base-300) 40%, #0000); } --btn-noise: var(--fx-noise); @media (hover: hover) { &:hover { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 90%, #000); } } } &:active:hover:not(.fpdxq), &:active:focus:not(.fpdxq) { --tw-scale-x: 95%; --tw-scale-y: 95%; --tw-scale-z: 95%; scale: var(--tw-scale-x) var(--tw-scale-y); transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: ease-out; transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: 300ms; --tw-duration: 300ms; } &:focus-visible { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)), #000 10%); } outline-width: 2px; outline-style: solid; } &:is(:disabled, [disabled], .z56ha) { pointer-events: none; opacity: 50%; --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } &:is(input[type="checkbox"], input[type="radio"]) { appearance: none; &::after { content: attr(aria-label); } &:checked { background: var(--color-primary); color: var(--color-primary-content); outline-color: var(--color-primary); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0); isolation: isolate; } } } .gncnb { border-radius: var(--radius-field); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 25%, transparent); } background-color: var(--color-base-100); text-align: center; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); &::placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 80%, transparent); } } height: var(--size); width: var(--size); transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; --size: calc(var(--size-field, 0.25rem) * 9.5); &:hover:not(:focus, :focus-within) { border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 60%, transparent); } } &:focus, &:focus-within { border-color: var(--color-primary); --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-shadow-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-primary) 30%, #0000); } outline: 1px solid var(--color-primary); isolation: isolate; } &.disabled, &:disabled, &[disabled] { pointer-events: none; border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 25%, transparent); } background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content) 5%, transparent); } color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } &::placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 40%, transparent); } } } } .dropdown-item { clear: both; display: flex; width: 100%; align-items: center; column-gap: calc(0.25rem * 2); border-radius: var(--radius-field); background-color: transparent; padding-inline: calc(0.25rem * 4); padding-block: calc(0.25rem * 2.5); color: var(--color-base-content); text-decoration-line: none; text-decoration-thickness: 0px; text-align: inherit; &:hover:not(.dropdown-active), &:focus:not(.dropdown-active), &:focus-within:not(.dropdown-active), &:focus-visible:not(.dropdown-active) { background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } --tw-outline-style: none; outline-style: none; } &.a5u3p, &:disabled, &[disabled] { pointer-events: none; background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 5%, transparent); } color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } } .loading { pointer-events: none; display: inline-block; aspect-ratio: 1 / 1; background-color: currentColor; vertical-align: middle; width: calc(var(--size-selector, 0.25rem) * 6); mask-size: 100%; mask-repeat: no-repeat; mask-position: center; mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } .kdfyb { pointer-events: auto; display: flex; flex-direction: column; border-radius: var(--radius-lg); background-color: var(--color-base-100); --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-shadow-color: var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent); } max-height: calc(100vh - 2rem); overscroll-behavior: contain; } .accordion-toggle { width: 100%; cursor: pointer; padding-inline: calc(0.25rem * 5); padding-block: calc(0.25rem * 4); font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-base-content); &:disabled { pointer-events: none; opacity: 50%; } } .disabled { .bylme& { pointer-events: none; opacity: 50%; } } .disabled { .carousel-prev& { pointer-events: none; } .carousel-next& { pointer-events: none; } } .j1ki1 { pointer-events: none; } .tooltip-content { visibility: hidden; position: absolute; display: inline-block; padding: calc(0.25rem * 2); opacity: 0%; transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); width: max-content; z-index: 20; } .collapse { visibility: collapse; } .collapse { &:not(td):not(tr):not(colgroup) { visibility: visible; } } .ct5yu { visibility: hidden; } .l3isz { visibility: visible; } .d08lt { position: relative; box-sizing: content-box; display: inline-grid; place-content: center; border-radius: calc(infinity * 1px); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-base-content); vertical-align: middle; height: var(--size); width: var(--size); --value: 0; --size: 5rem; --thickness: calc(var(--size) / 10); --radialprogress: calc(var(--value) * 1%); transition: --radialprogress 0.3s linear; &:before { position: absolute; inset: calc(0.25rem * 0); border-radius: calc(infinity * 1px); content: ""; background: radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness) var(--thickness) no-repeat, conic-gradient( currentColor var(--radialprogress), var(--color-base-content) 0 ); @supports (color: color-mix(in lab, red, red)) { background: radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness) var(--thickness) no-repeat, conic-gradient( currentColor var(--radialprogress), color-mix(in oklab, var(--color-base-content) 20%, transparent) 0 ); } webkit-mask: radial-gradient( farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + 0.5px - var(--thickness)) ); mask: radial-gradient( farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + 0.5px - var(--thickness)) ); } &:after { position: absolute; border-radius: calc(infinity * 1px); background-color: currentColor; transition: transform 0.3s linear; content: ""; inset: calc(50% - var(--thickness) / 2); transform: rotate(calc(var(--value) * 3.6deg - 90deg)) translate(calc(var(--size) / 2 - 50%)); } } .y3pll { position: relative; display: inline-flex; width: max-content; :where(.zh5ne) { z-index: 1; position: absolute; white-space: nowrap; top: var(--indicator-t, 0); bottom: var(--indicator-b, auto); inset-inline-start: var(--indicator-s, auto); inset-inline-end: var(--indicator-e, 0); translate: var(--indicator-x, 50%) var(--indicator-y, -50%); [dir="rtl"] & { --indicator-x: -50%; } } } .iaq6m { position: relative; width: 100%; overflow-x: auto; overflow-y: hidden; border-radius: var(--radius-box); pre[data-prefix] { &:before { content: attr(data-prefix); display: inline-block; text-align: right; } } .g0cu0 { margin-block: calc(0.25rem * 3); display: inline-flex; width: 100%; align-items: center; padding-inline-end: 1.4em; direction: ltr; &:before { content: ""; margin-inline-end: 4.8rem; display: inline-block; aspect-ratio: 1 / 1; height: calc(0.25rem * 3); border-radius: calc(infinity * 1px); opacity: 30%; box-shadow: 1.4em 0, 2.8em 0, 4.2em 0; } .dhrcb { position: relative; margin-inline: auto; display: block; height: calc(0.25rem * 7); width: calc(0.25rem * 96); overflow: hidden; padding-inline-start: calc(0.25rem * 8); padding-top: calc(0.25rem * 0.5); text-overflow: ellipsis; white-space: nowrap; &:before { content: ""; position: absolute; inset-inline-start: calc(0.25rem * 2); top: calc(1/2 * 100%); aspect-ratio: 1 / 1; height: calc(0.25rem * 3); --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); border-radius: calc(infinity * 1px); border-style: var(--tw-border-style); border-width: 2px; border-color: currentColor; opacity: 60%; } &:after { content: ""; position: absolute; inset-inline-start: calc(0.25rem * 5); top: calc(1/2 * 100%); height: calc(0.25rem * 2); --tw-translate-y: calc(1/4 * 100%); translate: var(--tw-translate-x) var(--tw-translate-y); rotate: calc(45deg * -1); border-radius: calc(infinity * 1px); border-style: var(--tw-border-style); border-width: 1px; border-color: currentColor; opacity: 60%; } } } } .g12m2 { position: relative; margin-inline-start: calc(0.25rem * 4); padding-inline-start: calc(0.25rem * 4); &::before { content: var(--tw-content); position: absolute; inset-inline-start: calc(0.25rem * 0); top: calc(0.25rem * 0); margin-inline-start: calc(0.25rem * -0.5); height: 100%; width: calc(0.25rem * 0.5); background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content) 40%, transparent); } } } .jcikf { position: absolute; inset-inline-start: calc(0.25rem * 0); top: calc(0.25rem * 0); margin-inline-start: calc(0.25rem * 3); width: fit-content; overflow: hidden; background-color: var(--color-base-100); padding-inline: calc(0.25rem * 1); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); text-overflow: ellipsis; color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } scale: 0.75; translate: -12.5% calc(-50% - 0.125em); } .chat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(0.25rem * 4); padding-block: calc(0.25rem * 1); .tfdmr { grid-row: span 2 / span 2; align-self: flex-end; } .gmiwk { grid-row-start: 1; margin-bottom: calc(0.25rem * 1); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .d7498 { grid-row-start: 3; margin-top: calc(0.25rem * 1); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .gxs21 { position: relative; display: block; width: fit-content; border-radius: var(--radius-box); padding: calc(0.25rem * 3); max-width: 90%; min-height: 2.75rem; min-width: 2.75rem; &:before { position: absolute; bottom: calc(0.25rem * 0); width: calc(0.25rem * 4); height: calc(0.25rem * 4); background-color: inherit; content: ""; mask-size: contain; mask-repeat: no-repeat; mask-position: center; } } &.wir72 { place-items: start; grid-template-columns: auto 1fr; .gmiwk { grid-column-start: 2; } .d7498 { grid-column-start: 2; } .tfdmr { grid-column-start: 1; } .gxs21 { grid-column-start: 2; border-end-start-radius: 0; background-color: var(--color-base-100); color: var(--color-base-content); &:before { inset-inline-start: -0.749rem; mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e"); } [dir="rtl"] &:before { mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e"); } } } &.oizl1 { place-items: end; grid-template-columns: 1fr auto; .gmiwk { grid-column-start: 1; } .d7498 { grid-column-start: 1; } .tfdmr { grid-column-start: 2; } .gxs21 { grid-column-start: 1; border-end-end-radius: 0; background-color: var(--color-primary); text-align: end; color: var(--color-primary-content); &:before { inset-inline-start: 99.9%; mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e"); } [dir="rtl"] &:before { mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e"); } } } } .switch { border: var(--border) solid #0000; color: var(--color-base-100); position: relative; display: inline-grid; flex-shrink: 0; cursor: pointer; appearance: none; place-content: center; vertical-align: middle; webkit-user-select: none; user-select: none; @media print { outline: .25rem solid; } grid-template-columns: 0fr 1fr 1fr; padding: var(--switch-p); box-shadow: 0 1px currentColor inset; @supports (color: color-mix(in lab, red, red)) { box-shadow: 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) inset; } background-color: var(--input-color); --radius-selector-max: calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector)); border-radius: calc( var(--radius-selector) + min(var(--switch-p), var(--radius-selector-max)) + min(var(--border), var(--radius-selector-max)) ); transition: color 0.3s, grid-template-columns 0.2s; --input-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { --input-color: color-mix(in oklab, var(--color-neutral) 22%, #0000); } --switch-p: 0.1875rem; --size: calc(var(--size-selector, 0.25rem) * 6); width: calc((var(--size) * 2) - (var(--border) + var(--switch-p)) * 2); height: var(--size); &:before { position: relative; inset-inline-start: calc(0.25rem * 0); grid-column-start: 2; grid-row-start: 1; aspect-ratio: 1 / 1; height: 100%; border-radius: var(--radius-selector); background-color: currentColor; @media print { outline: .25rem solid; } @media print { outline-offset: -1rem; } translate: 0; --tw-content: ""; content: var(--tw-content); transition: background-color 0.1s, translate 0.2s, inset-inline-start 0.2s; box-shadow: 0 -1px oklch(59.99% 0 0 / calc(var(--depth) * 0.08)) inset, 0 8px 0 -4px oklch(59.99% 0 0 / calc(var(--depth) * 0.08)) inset, 0 1px 2px 0 oklch(0% 0 0 / 0.2); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); @media (forced-colors: active) { outline-style: var(--tw-outline-style); outline-width: 1px; outline-offset: calc(1px * -1); } } &:focus-visible, &:has(:focus-visible) { outline: 2px solid var(--input-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { outline: 2px solid color-mix(in oklab, var(--input-color, var(--color-neutral)) 30%, #0000); } outline-offset: 0px; } &:checked, &[aria-checked="true"], &:has(> input:checked) { grid-template-columns: 1fr 1fr 0fr; --input-color: var(--color-neutral); background-color: var(--input-color); &:before { background-color: currentColor; @starting-style { opacity: 0; } } } &:indeterminate { grid-template-columns: 0.5fr 1fr 0.5fr; } &:disabled { cursor: not-allowed; opacity: 50%; &:before { background-color: transparent; } } } .qz699 { position: relative; width: 100%; overflow-x: hidden; overflow-y: auto; border-radius: var(--radius-box); text-align: left; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { text-align: right; } tr.bsnfb { &, &:nth-child(even) { &:hover { @media (hover: hover) { background-color: var(--color-base-200); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-200) 80%, transparent); } } } } } tr.wgkb6 { &, &:nth-child(even) { background-color: var(--color-base-200); } } :where(th, td) { padding-inline: calc(0.25rem * 5); padding-block: calc(0.25rem * 3); vertical-align: middle; text-wrap: nowrap; } :where(thead, tfoot) { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); white-space: nowrap; color: var(--color-base-content); text-transform: uppercase; letter-spacing: 1px; } :where(th) { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } :where(.z8e7n thead tr) { position: sticky; top: calc(0.25rem * 0); z-index: 1; background-color: var(--color-base-100); } :where(.z8e7n tfoot tr) { position: sticky; bottom: calc(0.25rem * 0); z-index: 1; background-color: var(--color-base-100); } :where(.hm072 tr th) { position: sticky; right: calc(0.25rem * 0); left: calc(0.25rem * 0); background-color: var(--color-base-100); } :where(thead tr) { border-bottom: var(--border) solid var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 25%, #0000); } } :where(tbody tr:not(:last-child)) { border-bottom: var(--border) solid var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 10%, #0000); } } :where(tfoot) { border-top: var(--border) solid var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-top: var(--border) solid color-mix(in oklch, var(--color-base-content) 25%, #0000); } } } .w7py9 { display: inline-block; border: 4px solid #4e4d4d; border-radius: 50px; background-color: #000; padding: 6px; margin: 0 auto; overflow: hidden; .varyu { border-radius: calc(infinity * 1px); position: relative; top: 5px; left: 0px; background: #000; height: 25px; width: 33%; margin: 0 auto; &:after { content: ""; position: absolute; top: 25%; right: 8%; width: 12px; height: 12px; border-radius: 5px; background-color: #2a292d; } } .m18kf { overflow: hidden; border-radius: 40px; margin-top: -25px; } } .hngni { &:before { content: ""; position: absolute; z-index: 10; display: block; border-radius: calc(infinity * 1px); background-color: var(--color-warning); outline-style: var(--tw-outline-style); outline-width: 1px; outline-width: 2px; outline-color: var(--color-base-100); width: 20%; height: 20%; top: 3%; right: 3%; } } .euwvy { &:before { content: ""; position: absolute; z-index: 10; display: block; border-radius: calc(infinity * 1px); background-color: var(--color-error); outline-style: var(--tw-outline-style); outline-width: 1px; outline-width: 2px; outline-color: var(--color-base-100); width: 20%; height: 20%; top: 3%; right: 3%; } } .xoa7i { &:before { content: ""; position: absolute; z-index: 10; display: block; border-radius: calc(infinity * 1px); background-color: var(--color-base-200); outline-style: var(--tw-outline-style); outline-width: 1px; outline-width: 2px; outline-color: var(--color-base-100); width: 20%; height: 20%; top: 3%; right: 3%; } } .ootou { &:before { content: ""; position: absolute; z-index: 10; display: block; border-radius: calc(infinity * 1px); background-color: var(--color-success); outline-style: var(--tw-outline-style); outline-width: 1px; outline-width: 2px; outline-color: var(--color-base-100); width: 20%; height: 20%; top: 3%; right: 3%; } } .s4970 { top: calc(1/2 * 100%); z-index: 1; height: calc(0.25rem * 1.5); width: 25rem; max-width: calc(100cqi - 1rem); min-width: calc(0.25rem * 4); --tw-translate-x: 0.335rem; translate: var(--tw-translate-x) var(--tw-translate-y); --tw-translate-y: calc(0.18rem * -1); --tw-scale-y: 400%; scale: var(--tw-scale-x) var(--tw-scale-y); resize: horizontal; overflow: hidden; opacity: 0%; clip-path: inset(calc(100% - 0.75rem) 0 0 calc(100% - 0.75rem)); position: relative; grid-column-start: 1; grid-row-start: 1; [dir="rtl"] & { transform-origin: 0 100%; translate: -0.29rem 0.37rem; clip-path: inset(calc(100% - 0.75rem) calc(100% - 0.75rem) 0 0); } } .nwdxd { &:before { content: ""; position: absolute; z-index: 10; display: block; border-radius: calc(infinity * 1px); background-color: var(--color-warning); outline-style: var(--tw-outline-style); outline-width: 1px; outline-width: 2px; outline-color: var(--color-base-100); width: 20%; height: 20%; bottom: 3%; right: 3%; } } .xary4 { &:before { content: ""; position: absolute; z-index: 10; display: block; border-radius: calc(infinity * 1px); background-color: var(--color-error); outline-style: var(--tw-outline-style); outline-width: 1px; outline-width: 2px; outline-color: var(--color-base-100); width: 20%; height: 20%; bottom: 3%; right: 3%; } } .azd15 { &:before { content: ""; position: absolute; z-index: 10; display: block; border-radius: calc(infinity * 1px); background-color: var(--color-base-200); outline-style: var(--tw-outline-style); outline-width: 1px; outline-width: 2px; outline-color: var(--color-base-100); width: 20%; height: 20%; bottom: 3%; right: 3%; } } .x553w { &:before { content: ""; position: absolute; z-index: 10; display: block; border-radius: calc(infinity * 1px); background-color: var(--color-success); outline-style: var(--tw-outline-style); outline-width: 1px; outline-width: 2px; outline-color: var(--color-base-100); width: 20%; height: 20%; bottom: 3%; right: 3%; } } .jm0bt { & > .o1ezv:focus-visible { border-end-end-radius: 0; border-end-start-radius: 0; } & > .o1ezv { @media (hover:hover) { &:hover { @media (hover: hover) { border-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary) 30%, transparent); } } } } @media (hover:hover) { &:hover { @media (hover: hover) { color: var(--color-primary); } } } border: var(--tab-border, 1px) solid transparent; border-width: 0 0 var(--tab-border, 1px) 0; border-radius: var(--radius-field, 0.375rem); border-bottom-color: var(--tab-border-color); padding-inline-start: var(--tab-p, 1rem); padding-inline-end: var(--tab-p, 1rem); padding-top: var(--tab-border, 1px); } & > .o1ezv.y6wci:not([disabled]) { background-color: var(--tab-bg); border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px); border-color: var(--tab-border-color); border-end-start-radius: 0; border-end-end-radius: 0; padding-inline-start: calc(var(--tab-p, 1rem) - var(--tab-border, 1px)); padding-inline-end: calc(var(--tab-p, 1rem) - var(--tab-border, 1px)); padding-bottom: var(--tab-border, 1px); padding-top: 0; } & > .o1ezv.y6wci:not([disabled]):before { content: ""; display: block; position: absolute; z-index: 1; width: calc(100% + var(--radius-field, 0.375rem) * 2); height: var(--radius-field, 0.375rem); bottom: 0; background-size: var(--radius-field, 0.375rem); background-repeat: no-repeat; background-position: top left, top right; --tab-grad: calc(69% - var(--tab-border, 1px)); --radius-start: radial-gradient( circle at top left, transparent var(--tab-grad), var(--tab-border-color) calc(var(--tab-grad) + 0.25px), var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)), var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px) ); --radius-end: radial-gradient( circle at top right, transparent var(--tab-grad), var(--tab-border-color) calc(var(--tab-grad) + 0.25px), var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)), var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px) ); background-image: var(--radius-start), var(--radius-end); } & > .o1ezv.y6wci:not([disabled]):first-child:before { background-image: var(--radius-end); background-position: top right; } & > .o1ezv.y6wci:not([disabled]):last-child:before { background-image: var(--radius-start); background-position: top left; } [dir="rtl"] & > .o1ezv.y6wci:not([disabled]):first-child:before { background-image: var(--radius-start); background-position: top left; } [dir="rtl"] & > .o1ezv.y6wci:not([disabled]):last-child:before { background-image: var(--radius-end); background-position: top right; } & > .y6wci:not([disabled]) + .jm0bt .y6wci:not([disabled]) { &:before { background-image: var(--radius-end); background-position: top right; } } .jm0bt > .y6wci:not([disabled]) + & .y6wci:not([disabled]) { &:before { background-image: var(--radius-end); background-position: top right; } } &:has(.qwlrk[class^="rounded-"]) .o1ezv:first-child:not(.o1ezv-active), &:has(.qwlrk[class*=" rounded-"]) .o1ezv:first-child:not(.o1ezv-active) { border-bottom-color: transparent; } } .select { position: relative; display: inline-flex; width: 100%; flex-shrink: 1; cursor: pointer; appearance: none; background-color: var(--color-base-100); padding-inline-start: calc(0.25rem * 3); padding-inline-end: calc(0.25rem * 10); vertical-align: middle; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); color: var(--color-base-content); webkit-user-select: none; user-select: none; height: var(--size); border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); background-image: url("data:image/svg+xml;utf8,"); background-size: 1.3em; background-position: calc(100% - 0.5rem) center; background-repeat: no-repeat; touch-action: manipulation; text-overflow: ellipsis; border: var(--border) solid #0000; border-color: var(--input-color); --input-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --input-color: color-mix(in oklab, var(--color-base-content) 40%, #0000); } --size: calc(var(--size-field, 0.25rem) * 9.5); &:hover:not(:focus, :focus-within), &:has(:hover):not(:focus, :focus-within) { border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 60%, transparent); } } [dir="rtl"] & { background-position: calc(0% + 1.3em) center; } select { margin-inline-end: calc(0.25rem * -10); height: 100%; width: calc(100% + 2.75rem); appearance: none; padding-inline-start: calc(0.25rem * 3); padding-inline-end: calc(0.25rem * 10); background-color: transparent; border-style: none; &:focus, &:focus-within { --tw-outline-style: none; outline-style: none; } } &[multiple] { background-image: none; } &:focus, &:focus-within { --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --input-color: var(--color-primary); --tw-shadow-color: var(--input-color); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--input-color) 30%, #0000); } outline: 1px solid var(--input-color); border-color: var(--input-color); isolation: isolate; } &:has(> select[disabled]), &:is(:disabled, [disabled]) { cursor: not-allowed; border-style: var(--tw-border-style); border-width: 0px; border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } &::placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } } &:has(> select[disabled]) > select[disabled] { cursor: not-allowed; } .dhrcb > & { height: auto; border-style: var(--tw-border-style); border-width: 0px; &:focus, &:focus-within { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); outline-style: var(--tw-outline-style); outline-width: 0px; } } &:has(> .lc1fa) select { &::placeholder { color: transparent; } &:focus { &::placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } } } } .advance-select-toggle { position: relative; display: inline-flex; width: 100%; flex-shrink: 1; cursor: pointer; appearance: none; align-items: center; background-color: var(--color-base-100); padding-inline-start: calc(0.25rem * 3); padding-inline-end: calc(0.25rem * 10); vertical-align: middle; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); color: var(--color-base-content); webkit-user-select: none; user-select: none; height: var(--size); border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); text-overflow: ellipsis; border: var(--border) solid #0000; border-color: var(--input-color); --input-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --input-color: color-mix(in oklab, var(--color-base-content) 40%, #0000); } --size: calc(var(--size-field, 0.25rem) * 9.5); &:focus, &:focus-within { --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --input-color: var(--color-primary); --tw-shadow-color: var(--input-color); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--input-color) 30%, #0000); } outline: 1px solid var(--input-color); border-color: var(--input-color); isolation: isolate; } &:focus-visible { outline: unset; } } .cnyqf { position: relative; display: flex; width: 100%; cursor: pointer; align-items: center; border-radius: var(--radius-field); border-style: var(--tw-border-style); border-width: 1px; background-color: var(--color-base-100); padding-inline-start: calc(0.25rem * 1.5); padding-inline-end: calc(0.25rem * 10); text-align: start; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); text-wrap: nowrap; color: var(--color-base-content); &:hover { @media (hover: hover) { border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 60%, transparent); } } } border-color: var(--input-color); --input-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --input-color: color-mix(in oklab, var(--color-base-content) 40%, #0000); } &:focus, &:focus-within { --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --input-color: var(--color-primary); --tw-shadow-color: var(--input-color); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--input-color) 30%, #0000); } outline: 1px solid var(--input-color); border-color: var(--input-color); isolation: isolate; } &:focus-visible { outline: unset; } } .zaq3r { position: fixed; z-index: 80; display: flex; width: 100%; height: 100%; max-width: calc(0.25rem * 96); flex-direction: column; justify-content: space-between; background-color: var(--color-base-100); --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-shadow-color: var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent); } } .p0nqm { position: relative; display: flex; > li { position: relative; display: grid; flex-shrink: 0; align-items: center; grid-template-rows: var(--timeline-row-start, minmax(0, 1fr)) auto var(--timeline-row-end, minmax(0, 1fr)); grid-template-columns: var(--timeline-col-start, minmax(0, 1fr)) auto var(--timeline-col-end, minmax(0, 1fr)); > hr { border: none; width: 100%; @media print { border: .1px solid var(--color-base-300); } &:first-child { grid-column-start: 1; grid-row-start: 2; } &:last-child { grid-column-start: 3; grid-column-end: none; grid-row-start: 2; grid-row-end: auto; } } } :where(hr) { height: 1.5px; border-color: transparent; background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } } &:has(.p76gi hr) { &:first-child { border-start-start-radius: 0; border-end-start-radius: 0; border-start-end-radius: var(--radius-selector); border-end-end-radius: var(--radius-selector); } &:last-child { border-start-start-radius: var(--radius-selector); border-end-start-radius: var(--radius-selector); border-start-end-radius: 0; border-end-end-radius: 0; } } &:not(:has(.p76gi)) { :first-child hr:last-child { border-start-start-radius: var(--radius-selector); border-end-start-radius: var(--radius-selector); border-start-end-radius: 0; border-end-end-radius: 0; } :last-child hr:first-child { border-start-start-radius: 0; border-end-start-radius: 0; border-start-end-radius: var(--radius-selector); border-end-end-radius: var(--radius-selector); } } } .gj4r3 { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-box); --tw-border-style: solid; border-style: solid; border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); } background-color: var(--color-base-100); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 80%, transparent); } --tw-outline-style: none; outline-style: none; box-shadow: var( --card-shadow, 0 1px 3px 0 var(--color-base-300), 0 1px 2px -1px var(--color-base-300) ); @supports (color: color-mix(in lab, red, red)) { box-shadow: var( --card-shadow, 0 1px 3px 0 color-mix(in oklab, var(--color-base-300) 20%, #0000), 0 1px 2px -1px color-mix(in oklab, var(--color-base-300) 20%, #0000) ); } border-width: var(--card-border, 0px); &:focus { --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { outline: 2px solid transparent; outline-offset: 2px; } } :where(figure:first-child) { overflow: hidden; border-start-start-radius: inherit; border-start-end-radius: inherit; border-end-start-radius: unset; border-end-end-radius: unset; } :where(figure:last-child) { overflow: hidden; border-start-start-radius: unset; border-start-end-radius: unset; border-end-start-radius: inherit; border-end-end-radius: inherit; } &:where(.qvh9c) { border: var(--border) solid var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border: var(--border) solid color-mix(in oklab, var(--color-base-content) 20%, transparent); } } &.ujp4y { display: grid; &:before { position: relative; grid-column-start: 1; grid-row-start: 1; border-radius: var(--radius-box); background-color: var(--color-neutral); opacity: 75%; content: ""; } > * { grid-column-start: 1; grid-row-start: 1; } > .ye9hj { position: relative; color: var(--color-neutral-content); } :where(figure) { overflow: hidden; border-radius: inherit; } > figure img { height: 100%; object-fit: cover; } } figure { display: flex; align-items: center; justify-content: center; } &:has(> input:is(input[type="checkbox"], input[type="radio"])) { cursor: pointer; user-select: none; } &:has(> :checked) { outline: 2px solid currentColor; } & .a2xpj { border-radius: 0; &:first-child { border-top-left-radius: var(--radius-box); border-top-right-radius: var(--radius-box); } &:last-child { border-bottom-right-radius: var(--radius-box); border-bottom-left-radius: var(--radius-box); } } } .aussy { position: relative; display: inline-grid; cursor: pointer; place-content: center; vertical-align: middle; webkit-user-select: none; user-select: none; input { appearance: none; border: none; } > * { grid-column-start: 1; grid-row-start: 1; transition-property: transform, rotate, opacity; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } .i69pz, .zrnvh, input:indeterminate ~ .i69pz { opacity: 0%; } input:is(:checked, :indeterminate) { & ~ .cupmn { opacity: 0%; } } input:checked ~ .i69pz, input:indeterminate ~ .zrnvh { opacity: 100%; backface-visibility: visible; } } .gsvpd { position: static; display: flex; align-items: center; border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); } padding-inline: calc(0.25rem * 4); padding-block: calc(0.25rem * 2.5); color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 80%, transparent); } margin: calc(0.25rem * -2); margin-bottom: calc(0.25rem * 2); border-top-left-radius: var(--radius-box); border-top-right-radius: var(--radius-box); border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .iwfy6 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-width: 0; } .bqloj { position: static; display: flex; align-items: center; border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); } padding-inline: calc(0.25rem * 4); padding-block: calc(0.25rem * 2.5); color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 80%, transparent); } margin-inline: calc(0.25rem * -2); margin-bottom: calc(0.25rem * -2) !important; border-bottom-right-radius: var(--radius-box); border-bottom-left-radius: var(--radius-box); border-top-style: var(--tw-border-style); border-top-width: 1px; } .m40u1 { display: inline-flex; flex-direction: row; & > li:not(.rgc5h) > .collapse > ul { position: absolute; margin-inline-start: calc(0.25rem * 0); margin-top: calc(0.25rem * 4); padding-block: calc(0.25rem * 2); padding-inline-end: calc(0.25rem * 2); } & > li > .collapse > ul { &:before { content: none; } } :where(& > li:not(.rgc5h) > .collapse > ul) { border-radius: var(--radius-box); background-color: var(--color-base-100); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-shadow-color: var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent); } } } .p5l2p { display: flex; flex-direction: column; & > li:not(.rgc5h) > .collapse > ul { position: relative; margin-inline-start: calc(0.25rem * 4); margin-top: calc(0.25rem * 0); padding-block: calc(0.25rem * 0); padding-inline-end: calc(0.25rem * 0); } } .lc1fa { .select:has(> &) select { &::placeholder { color: transparent; } &:focus { &::placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } } } position: relative; display: block; width: 100%; .select { &::placeholder { color: transparent; } &:focus { &::placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } } &:has(> select[disabled]), &:is(:disabled, [disabled]) { border-style: var(--tw-border-style); border-width: 1px; background-color: transparent; opacity: 50%; & ~ .jcikf { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 30%, transparent); } } } } &:focus-within, &:has(.select:focus) { .jcikf { --input-color: var(--color-primary); color: var(--input-color); } } &:has(.fk7d0) .jcikf { margin-inline-start: calc(0.25rem * 2.5); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } &:has(.bm7g1) .jcikf { margin-inline-start: calc(0.25rem * 2.5); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } &:has(.egnwb) .jcikf { margin-inline-start: calc(0.25rem * 3); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } &:has(.ojueq) .jcikf { margin-inline-start: calc(0.25rem * 4); font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } &:has(.vtd17) .jcikf { margin-inline-start: calc(0.25rem * 4.5); font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } } .yvk8x { position: relative; min-width: calc(0.25rem * 72); overflow-x: auto; overflow-y: hidden; border-radius: var(--radius-box); background-color: var(--color-base-200); padding-block: calc(0.25rem * 5); color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 80%, transparent); } direction: ltr; &:before { content: ""; margin-bottom: calc(0.25rem * 4); display: block; height: calc(0.25rem * 3); width: calc(0.25rem * 3); border-radius: calc(infinity * 1px); opacity: 30%; box-shadow: 1.4em 0, 2.8em 0, 4.2em 0; } pre { padding-inline-end: calc(0.25rem * 5); &:before { content: ""; margin-right: 2.2ch; } } pre[data-prefix] { &:before { content: attr(data-prefix); display: inline-block; width: calc(0.25rem * 8); text-align: right; opacity: 50%; } } } .ii946 { position: relative; display: flex; width: 100%; flex-direction: column; overflow-x: auto; overflow-y: hidden; border-radius: var(--radius-box); padding-top: calc(0.25rem * 5); &:before { content: ""; margin-bottom: calc(0.25rem * 4); display: block; aspect-ratio: 1 / 1; height: calc(0.25rem * 3); flex-shrink: 0; align-self: flex-start; border-radius: calc(infinity * 1px); opacity: 30%; box-shadow: 1.4em 0, 2.8em 0, 4.2em 0; } [dir="rtl"] &:before { align-self: flex-end; } pre[data-prefix] { &:before { content: attr(data-prefix); display: inline-block; text-align: right; } } } .avatar { position: relative; display: inline-flex; vertical-align: middle; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); & > div { display: block; aspect-ratio: 1 / 1; overflow: hidden; } & > span { display: block; aspect-ratio: 1 / 1; overflow: hidden; } :where(&) img { height: 100%; width: 100%; object-fit: cover; } } .checkbox { position: relative; flex-shrink: 0; cursor: pointer; appearance: none; border-radius: var(--radius-selector); padding: calc(0.25rem * 1); vertical-align: middle; color: var(--color-neutral-content); border: var(--border) solid var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border: var(--border) solid color-mix(in oklab, var(--color-base-content) 40%, #0000); } --input-color: var(--color-neutral); box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 0 #0000 inset, 0 0 #0000; transition: background-color 0.2s, box-shadow 0.2s; --size: calc(var(--size-selector, 0.25rem) * 6); width: var(--size); height: var(--size); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); &:before { --tw-content: ""; content: var(--tw-content); display: block; width: 100%; height: 100%; rotate: 45deg; background-color: currentColor; opacity: 0%; transition: clip-path 0.3s, opacity 0.1s, rotate 0.3s, translate 0.3s; transition-delay: 0.1s; clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%); box-shadow: 0px 3px 0 0px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; font-size: 1rem; line-height: 0.75; } &:focus-visible { outline: 2px solid var(--input-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { outline: 2px solid color-mix(in oklab, var(--input-color, var(--color-neutral)) 30%, #0000); } outline-offset: 0px; } &:checked, &[aria-checked="true"] { background-color: var(--input-color, #0000); border-color: var(--input-color, #0000); box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px 2px 0 var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px 2px 0 color-mix(in oklab, var(--color-base-300) 20%, #0000); } &:before { clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%); opacity: 100%; } @media (forced-colors: active) { &:before { rotate: 0deg; background-color: transparent; --tw-content: "✔︎"; clip-path: none; } } @media print { &:before { rotate: 0deg; background-color: transparent; --tw-content: "✔︎"; clip-path: none; } } } &:indeterminate { background-color: var(--color-neutral); &:before { rotate: 0deg; opacity: 100%; translate: 0 -35%; clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%); } } &:disabled { cursor: not-allowed; opacity: 50%; } } .radio { position: relative; flex-shrink: 0; cursor: pointer; appearance: none; border-radius: calc(infinity * 1px); padding: calc(0.25rem * 1); vertical-align: middle; border: var(--border) solid var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border: var(--border) solid color-mix(in oklab, var(--color-base-content) 40%, #0000); } box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset; --size: calc(var(--size-selector, 0.25rem) * 6); width: var(--size); height: var(--size); color: var(--input-color, var(--color-neutral)); &:before { display: block; width: 100%; height: 100%; border-radius: calc(infinity * 1px); --tw-content: ""; content: var(--tw-content); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); } &:focus-visible { outline: 2px solid var(--input-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { outline: 2px solid color-mix(in oklab, var(--input-color, var(--color-neutral)) 30%, #0000); } outline-offset: 0px; } &:checked, &[aria-checked="true"] { animation: radio 0.2s ease-out; border-color: currentColor; background-color: var(--color-base-100); box-shadow: 0 1px 2px 0 var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { box-shadow: 0 1px 2px 0 color-mix(in oklab, var(--color-base-300) 30%, #0000); } &:before { background-color: currentColor; box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)); } @media (forced-colors: active) { &:before { outline-style: var(--tw-outline-style); outline-width: 1px; outline-offset: calc(1px * -1); } } @media print { &:before { outline: 0.25rem solid; outline-offset: -1rem; } } } &:disabled { cursor: not-allowed; opacity: 50%; } } .ejr14 { position: relative; display: inline; width: fit-content; border-radius: var(--radius-sm); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 25%, transparent); } padding-inline: calc(0.25rem * 1.5); padding-block: calc(0.25rem * 0.5); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .ftzqy { position: relative; display: flex; align-items: center; justify-content: space-between; padding: calc(0.25rem * 6); :where(&) + .apz43 { padding-top: 0; } } .carousel { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius-2xl); } .ywppt { position: relative; width: 100%; border-radius: var(--radius-box); padding: calc(0.25rem * 4); color: var(--color-neutral-content); text-align: start; background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); background-color: var(--alert-bg); border: var(--border) solid var(--alert-border); box-shadow: 0 0.1875rem 0 -0.125rem oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset; --alert-bg: var(--alert-color, var(--color-neutral)); --alert-border: var(--alert-color, var(--color-neutral)); &.vwvt2 { color: var(--alert-color, var(--color-neutral)); --alert-bg: transparent; box-shadow: none; background-image: none; } &.il9wu { color: var(--alert-color, var(--color-neutral)); --alert-bg: var(--alert-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --alert-bg: color-mix(in oklab, var(--alert-color, var(--color-neutral)) 10%, var(--color-base-100)); } box-shadow: none; background-image: none; } } .absolute { position: absolute; } .fixed { position: fixed; } .relative { position: relative; } .v2h6e { position: static; } .sticky { position: sticky; } .inset-0 { inset: calc(var(--spacing) * 0); } .fojn9 { inset-inline: calc(0.25rem * 0); top: calc(0.25rem * 0); max-height: calc(0.25rem * 60); max-width: none; --tw-translate-y: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: var(--ease-in-out); transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: 300ms; --tw-duration: 300ms; --tw-ease: var(--ease-in-out); } .eicpn { inset-inline: calc(0.25rem * 0); bottom: calc(0.25rem * 0); max-height: calc(0.25rem * 60); max-width: none; --tw-translate-y: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: var(--ease-in-out); transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: 300ms; --tw-duration: 300ms; --tw-ease: var(--ease-in-out); } .xzy8k { inset-inline: calc(var(--spacing) * 0); } .orveo { inset-block: calc(var(--spacing) * 0); } .tv09j { inset-inline-start: auto; inset-inline-end: calc(0.25rem * 0); top: calc(0.25rem * 0); --tw-translate-x: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: var(--ease-in-out); transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: 300ms; --tw-duration: 300ms; --tw-ease: var(--ease-in-out); &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { --tw-translate-x: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); } } .xpyis { inset-inline-start: calc(0.25rem * 0); inset-inline-end: auto; top: calc(0.25rem * 0); --tw-translate-x: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: var(--ease-in-out); transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: 300ms; --tw-duration: 300ms; --tw-ease: var(--ease-in-out); &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { --tw-translate-x: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); } } .-start-1 { inset-inline-start: calc(var(--spacing) * -1); } .nijq6 { inset-inline-start: calc(var(--spacing) * -1.5); } .d09na { inset-inline-start: calc(calc(1/5 * 100%) * -1); } .f92yw { inset-inline-start: calc(var(--spacing) * -2); } .wjljv { inset-inline-start: calc(var(--spacing) * -4.75); } .jnqpf { inset-inline-start: calc(var(--spacing) * -6); } .rqu8o { inset-inline-start: calc(var(--spacing) * -10); } .duzp6 { inset-inline-start: calc(var(--spacing) * -12); } .jtc47 { inset-inline-start: calc(var(--spacing) * -20); } .-start-\[5\%\] { inset-inline-start: calc(5% * -1); } .-start-\[5\.5\%\] { inset-inline-start: calc(5.5% * -1); } .-start-\[8\%\] { inset-inline-start: calc(8% * -1); } .-start-\[10\%\] { inset-inline-start: calc(10% * -1); } .-start-\[17\%\] { inset-inline-start: calc(17% * -1); } .-start-\[24\%\] { inset-inline-start: calc(24% * -1); } .-start-\[25\%\] { inset-inline-start: calc(25% * -1); } .-start-\[30\%\] { inset-inline-start: calc(30% * -1); } .ofs8g { inset-inline-start: calc(var(--spacing) * 0); } .ya4qk { inset-inline-start: calc(1/2 * 100%); } .b7gxx { inset-inline-start: calc(1/10 * 100%); } .hvx09 { inset-inline-start: calc(var(--spacing) * 2); } .gxv30 { inset-inline-start: calc(var(--spacing) * 3); } .vkt76 { inset-inline-start: calc(var(--spacing) * 3.25); } .f0po8 { inset-inline-start: calc(var(--spacing) * 4); } .c4oom { inset-inline-start: calc(var(--spacing) * 5); } .sp5fo { inset-inline-start: calc(var(--spacing) * 6); } .y01oa { inset-inline-start: calc(var(--spacing) * 8); } .ps34t { inset-inline-start: calc(var(--spacing) * 13); } .dzdq9 { inset-inline-start: calc(var(--spacing) * 15); } .doab6 { inset-inline-start: calc(var(--spacing) * 21); } .mp6ju { inset-inline-start: calc(var(--spacing) * 23); } .start-\[4\%\] { inset-inline-start: 4%; } .start-\[7\%\] { inset-inline-start: 7%; } .start-\[8\%\] { inset-inline-start: 8%; } .start-\[10\%\] { inset-inline-start: 10%; } .start-\[11\%\] { inset-inline-start: 11%; } .start-\[13\%\] { inset-inline-start: 13%; } .start-\[15\%\] { inset-inline-start: 15%; } .start-\[18\%\] { inset-inline-start: 18%; } .start-\[19\%\] { inset-inline-start: 19%; } .start-\[20\%\] { inset-inline-start: 20%; } .start-\[23\%\] { inset-inline-start: 23%; } .start-\[25\%\] { inset-inline-start: 25%; } .start-\[30\%\] { inset-inline-start: 30%; } .start-\[35\%\] { inset-inline-start: 35%; } .start-\[40\%\] { inset-inline-start: 40%; } .start-\[45\%\] { inset-inline-start: 45%; } .start-\[50\%\] { inset-inline-start: 50%; } .start-\[51\%\] { inset-inline-start: 51%; } .c0ola { inset-inline-start: 100%; } .-end-1 { inset-inline-end: calc(var(--spacing) * -1); } .mhe3i { inset-inline-end: calc(var(--spacing) * -2); } .x4k6e { inset-inline-end: calc(var(--spacing) * -3); } .dta5f { inset-inline-end: calc(var(--spacing) * -4.75); } .fe8nq { inset-inline-end: calc(var(--spacing) * -6); } .imz7i { inset-inline-end: calc(var(--spacing) * -8); } .govtp { inset-inline-end: calc(var(--spacing) * -60); } .-end-\[10\%\] { inset-inline-end: calc(10% * -1); } .-end-\[15\%\] { inset-inline-end: calc(15% * -1); } .-end-\[19\%\] { inset-inline-end: calc(19% * -1); } .-end-\[20\%\] { inset-inline-end: calc(20% * -1); } .-end-\[23\%\] { inset-inline-end: calc(23% * -1); } .-end-\[27\%\] { inset-inline-end: calc(27% * -1); } .-end-\[28\%\] { inset-inline-end: calc(28% * -1); } .-end-\[29\%\] { inset-inline-end: calc(29% * -1); } .-end-\[68\%\] { inset-inline-end: calc(68% * -1); } .end-0 { inset-inline-end: calc(var(--spacing) * 0); } .gdlob { inset-inline-end: calc(var(--spacing) * 2); } .q8p96 { inset-inline-end: calc(var(--spacing) * 2.5); } .rr5is { inset-inline-end: calc(var(--spacing) * 3); } .u624s { inset-inline-end: calc(var(--spacing) * 3.5); } .v4wo0 { inset-inline-end: calc(var(--spacing) * 4); } .rzv8k { inset-inline-end: calc(var(--spacing) * 6); } .dx43d { inset-inline-end: calc(var(--spacing) * 7); } .cmazm { inset-inline-end: calc(var(--spacing) * 8); } .xoacv { inset-inline-end: calc(var(--spacing) * 12); } .kxtuu { inset-inline-end: calc(var(--spacing) * 15); } .zz4m1 { inset-inline-end: calc(var(--spacing) * 20); } .w4arm { inset-inline-end: calc(var(--spacing) * 25); } .ahd1h { inset-inline-end: calc(var(--spacing) * 27); } .sud0v { inset-inline-end: calc(var(--spacing) * 85); } .qyuxy { inset-inline-end: calc(var(--spacing) * 90); } .end-\[-20\%\] { inset-inline-end: -20%; } .end-\[4\%\] { inset-inline-end: 4%; } .end-\[5\%\] { inset-inline-end: 5%; } .end-\[7\%\] { inset-inline-end: 7%; } .end-\[8\%\] { inset-inline-end: 8%; } .end-\[9\.5\%\] { inset-inline-end: 9.5%; } .end-\[12\%\] { inset-inline-end: 12%; } .end-\[14\%\] { inset-inline-end: 14%; } .end-\[15\%\] { inset-inline-end: 15%; } .end-\[17\%\] { inset-inline-end: 17%; } .end-\[19\%\] { inset-inline-end: 19%; } .end-\[20\%\] { inset-inline-end: 20%; } .end-\[21\%\] { inset-inline-end: 21%; } .end-\[30\%\] { inset-inline-end: 30%; } .end-\[35\%\] { inset-inline-end: 35%; } .end-\[50\%\] { inset-inline-end: 50%; } .-top-1 { top: calc(var(--spacing) * -1); } .gum6j { top: calc(calc(1/5 * 100%) * -1); } .hy9lo { top: calc(var(--spacing) * -3); } .uo6zv { top: calc(var(--spacing) * -5); } .g7nus { top: calc(var(--spacing) * -8); } .nclgq { top: calc(var(--spacing) * -10); } .qsy6y { top: calc(var(--spacing) * -30); } .s45z7 { top: calc(var(--spacing) * -35); } .egwgc { top: calc(var(--spacing) * -50); } .m95w1 { top: calc(var(--spacing) * -85); } .-top-\[5\%\] { top: calc(5% * -1); } .-top-\[6\%\] { top: calc(6% * -1); } .-top-\[8\%\] { top: calc(8% * -1); } .-top-\[12\%\] { top: calc(12% * -1); } .-top-\[17\%\] { top: calc(17% * -1); } .-top-\[23\%\] { top: calc(23% * -1); } .-top-\[33\%\] { top: calc(33% * -1); } .-top-\[36\%\] { top: calc(36% * -1); } .top-0 { top: calc(var(--spacing) * 0); } .top-1\/2 { top: calc(1/2 * 100%); } .qs3cg { top: calc(1/5 * 100%); } .peulz { top: calc(var(--spacing) * 2); } .jae0y { top: calc(var(--spacing) * 2.5); } .okm0d { top: calc(var(--spacing) * 3); } .yrvkz { top: calc(var(--spacing) * 3.5); } .og9qi { top: calc(var(--spacing) * 3.25); } .c61cz { top: calc(var(--spacing) * 4); } .fgat1 { top: calc(var(--spacing) * 5); } .qhd0c { top: calc(var(--spacing) * 6); } .o0kcr { top: calc(var(--spacing) * 7); } .rgcw9 { top: calc(var(--spacing) * 8); } .tf0h5 { top: calc(var(--spacing) * 10); } .ypw5r { top: calc(var(--spacing) * 12); } .ft6ot { top: calc(var(--spacing) * 14); } .e77dh { top: calc(var(--spacing) * 15); } .tjwl9 { top: calc(var(--spacing) * 18); } .dq8gx { top: calc(var(--spacing) * 19); } .xfm2k { top: calc(var(--spacing) * 20); } .l0dri { top: calc(var(--spacing) * 24); } .ftrm1 { top: calc(var(--spacing) * 34); } .s6nq5 { top: calc(var(--spacing) * 40); } .top-\[-1\.75\%\] { top: -1.75%; } .top-\[0\%\] { top: 0%; } .top-\[5\%\] { top: 5%; } .top-\[8\%\] { top: 8%; } .top-\[10\%\] { top: 10%; } .top-\[12\%\] { top: 12%; } .top-\[15\%\] { top: 15%; } .top-\[17\%\] { top: 17%; } .top-\[18\%\] { top: 18%; } .top-\[20\%\] { top: 20%; } .top-\[21\%\] { top: 21%; } .top-\[22\%\] { top: 22%; } .top-\[24\%\] { top: 24%; } .top-\[25\%\] { top: 25%; } .top-\[26\%\] { top: 26%; } .top-\[27\%\] { top: 27%; } .top-\[30\%\] { top: 30%; } .top-\[35\%\] { top: 35%; } .top-\[40\%\] { top: 40%; } .top-\[44\%\] { top: 44%; } .top-\[47\%\] { top: 47%; } .top-\[50\%\] { top: 50%; } .top-\[53\%\] { top: 53%; } .top-\[55\%\] { top: 55%; } .top-\[58\%\] { top: 58%; } .top-\[66\%\] { top: 66%; } .top-\[80\%\] { top: 80%; } .top-full { top: 100%; } .pz8cs { right: calc(var(--spacing) * -8); } .-right-\[10\%\] { right: calc(10% * -1); } .nah7c { right: calc(var(--spacing) * 0); } .oqx9x { right: calc(var(--spacing) * 4); } .e5ap2 { right: calc(var(--spacing) * 6); } .t1jbt { right: calc(var(--spacing) * 8); } .lnx3i { right: calc(var(--spacing) * 17); } .-bottom-1 { bottom: calc(var(--spacing) * -1); } .w82ue { bottom: calc(var(--spacing) * -1.5); } .ji837 { bottom: calc(var(--spacing) * -2); } .gof30 { bottom: calc(calc(2/5 * 100%) * -1); } .r75ub { bottom: calc(var(--spacing) * -3); } .sk1ez { bottom: calc(var(--spacing) * -5); } .ojqiu { bottom: calc(var(--spacing) * -6); } .s9rc3 { bottom: calc(var(--spacing) * -6.25); } .hgbmk { bottom: calc(var(--spacing) * -7); } .mf7tc { bottom: calc(var(--spacing) * -8); } .dgo1k { bottom: calc(var(--spacing) * -10); } .colsn { bottom: calc(var(--spacing) * -12); } .nsuhu { bottom: calc(var(--spacing) * -13); } .n45j3 { bottom: calc(var(--spacing) * -15); } .kc9fp { bottom: calc(var(--spacing) * -20); } .gn18m { bottom: calc(var(--spacing) * -21); } .gq3dz { bottom: calc(var(--spacing) * -27); } .m0xy6 { bottom: calc(var(--spacing) * -50); } .-bottom-\[8\%\] { bottom: calc(8% * -1); } .-bottom-\[10\%\] { bottom: calc(10% * -1); } .-bottom-\[16\%\] { bottom: calc(16% * -1); } .-bottom-\[20\%\] { bottom: calc(20% * -1); } .-bottom-\[22\%\] { bottom: calc(22% * -1); } .-bottom-\[23\%\] { bottom: calc(23% * -1); } .-bottom-\[25\%\] { bottom: calc(25% * -1); } .-bottom-\[40\%\] { bottom: calc(40% * -1); } .u2q0w { bottom: calc(var(--spacing) * 0); } .lgwmn { bottom: calc(var(--spacing) * 1); } .uzznk { bottom: calc(1/5 * 100%); } .t539q { bottom: calc(var(--spacing) * 2); } .rwjov { bottom: calc(var(--spacing) * 3); } .ubrsg { bottom: calc(var(--spacing) * 5); } .oqkve { bottom: calc(var(--spacing) * 6); } .tbh4i { bottom: calc(var(--spacing) * 8); } .hyzyt { bottom: calc(var(--spacing) * 13); } .awhny { bottom: calc(var(--spacing) * 14); } .xll1y { bottom: calc(var(--spacing) * 20); } .qado4 { bottom: calc(var(--spacing) * 22); } .fhwta { bottom: calc(var(--spacing) * 27); } .nutp3 { bottom: calc(var(--spacing) * 43); } .bottom-\[-1\.5\%\] { bottom: -1.5%; } .bottom-\[0\%\] { bottom: 0%; } .bottom-\[5\%\] { bottom: 5%; } .bottom-\[10\%\] { bottom: 10%; } .bottom-\[11\%\] { bottom: 11%; } .bottom-\[17\%\] { bottom: 17%; } .bottom-\[20\%\] { bottom: 20%; } .bottom-\[25\%\] { bottom: 25%; } .bottom-\[27\%\] { bottom: 27%; } .bottom-\[28\%\] { bottom: 28%; } .bottom-\[45\%\] { bottom: 45%; } .bottom-full { bottom: 100%; } .-left-\[10\%\] { left: calc(10% * -1); } .left-0 { left: calc(var(--spacing) * 0); } .flnll { left: calc(1/2 * 100%); } .kxau7 { left: calc(var(--spacing) * 6); } .ct4ti { left: calc(var(--spacing) * 13); } .wh7w6 { left: calc(var(--spacing) * 25); } .left-\[18px\] { left: 18px; } .left-\[27\%\] { left: 27%; } .left-\[30\%\] { left: 30%; } .left-\[calc\(50\%\+2rem\)\] { left: calc(50% + 2rem); } .dhrcb { display: inline-flex; width: 100%; flex-shrink: 1; cursor: text; appearance: none; background-color: var(--color-base-100); padding-inline: calc(0.25rem * 3); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); color: var(--color-base-content); &::placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } &:focus-visible { --tw-outline-style: none; outline-style: none; } border: var(--border) solid #0000; height: var(--size); touch-action: manipulation; border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); border-color: var(--input-color); --input-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --input-color: color-mix(in oklab, var(--color-base-content) 40%, #0000); } --size: calc(var(--size-field, 0.25rem) * 9.5); &:hover:not(:focus, :focus-within), &:has(:hover):not(:focus, :focus-within) { border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 60%, transparent); } } &:where(input) { display: inline-block; } :where(input:not([type="checkbox"]):not([type="radio"])) { display: inline-block; height: 100%; width: 100%; appearance: none; background-color: transparent; border: none; &:focus, &:focus-within, &:focus-visible { --tw-outline-style: none; outline-style: none; } } &:focus, &:focus-within { --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --input-color: var(--color-primary); --tw-shadow-color: var(--input-color); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--input-color) 30%, #0000); } outline: 1px solid var(--input-color); isolation: isolate; } &:has(> input[disabled]), &:is(:disabled, [disabled]) { cursor: not-allowed; border-style: var(--tw-border-style); border-width: 0px; background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } box-shadow: none; } &:has(> input[disabled]) > input[disabled] { cursor: not-allowed; } &::-webkit-date-and-time-value { text-align: inherit; } &[type="number"] { &::-webkit-inner-spin-button { margin-block: calc(0.25rem * -3); margin-inline-end: calc(0.25rem * -3); } } &:has(> .im4zz) input { &::placeholder { color: transparent; } &:focus { &::placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } } } } .g7kzo { display: inline-flex; min-height: calc(0.25rem * 20); width: 100%; flex-shrink: 1; appearance: none; border-radius: var(--radius-field); background-color: var(--color-base-100); padding-inline: calc(0.25rem * 4); padding-block: calc(0.25rem * 2); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); color: var(--color-base-content); &::placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } &:hover { @media (hover: hover) { border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 60%, transparent); } } } &:focus-visible { --tw-outline-style: none; outline-style: none; } border: var(--border) solid #0000; border-color: var(--input-color); touch-action: manipulation; --input-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --input-color: color-mix(in oklab, var(--color-base-content) 40%, #0000); } :where(textarea) { appearance: none; background-color: transparent; border: none; &:focus, &:focus-within { --tw-outline-style: none; outline-style: none; } } &:focus, &:focus-within { --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --input-color: var(--color-primary); --tw-shadow-color: var(--input-color); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--input-color) 30%, #0000); } outline: 1px solid var(--input-color); border-color: var(--input-color); isolation: isolate; } &:has(> textarea[disabled]), &:is(:disabled, [disabled]) { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 40%, transparent); } &::placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 20%, transparent); } } } &:has(> textarea[disabled]) > textarea[disabled] { cursor: not-allowed; } &:has(> textarea) { padding: calc(0.25rem * 0); textarea { height: auto; min-height: calc(0.25rem * 20); width: 100%; &:first-child { padding-block: calc(0.25rem * 2); padding-inline-start: calc(0.25rem * 4); } &:nth-child(2) { padding-block: calc(0.25rem * 2); } &:last-child { padding-block: calc(0.25rem * 2); padding-inline-end: calc(0.25rem * 4); } } } &:has(> .erjrn) { padding: calc(0.25rem * 0); :where(.erjrn:first-child) > textarea { padding-block: calc(0.25rem * 2); padding-inline-start: calc(0.25rem * 4); } :where(.erjrn:nth-child(2)) > textarea { padding-block: calc(0.25rem * 2); } :where(.erjrn:last-child) > textarea { padding-block: calc(0.25rem * 2); padding-inline-end: calc(0.25rem * 4); } :where(.erjrn:nth-child(2)) .a7mcv, :where(.erjrn:last-child) .a7mcv { margin-inline-start: calc(0.25rem * 0); } & * > textarea { width: 100%; height: 100%; min-height: calc(0.25rem * 20); } } &:has(> .erjrn) textarea { &::placeholder { color: transparent; } &:focus { &::placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } } } } .fpdxq { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 90%, #000); } isolation: isolate; .btn-soft& { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 20%, var(--color-base-100)); } } .d2fx0& { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } } .btn-text& { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } } .fzr24& { --btn-shadow: 0px 4px 6px -1px var(--btn-color, var(--color-neutral)), 0px 2px 4px -2px var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-shadow: 0px 4px 6px -1px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000), 0px 2px 4px -2px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000); } background-position: 99% center; } } .mvudw { isolation: isolate; } .x7wx4 { display: inline-grid; place-items: center; align-items: flex-end; & > * { grid-column-start: 1; grid-row-start: 1; height: 100%; width: 100%; opacity: 60%; transform: translateY(14%) scale(0.9); z-index: 1; } & > *:nth-child(2) { opacity: 80%; transform: translateY(7%) scale(0.95); z-index: 2; } & > *:nth-child(1) { opacity: 100%; transform: translateY(0) scale(1) translateX(0); z-index: 3; } } .dropdown-menu { z-index: 10; margin-top: calc(0.25rem * 2); :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(0.25rem * 1) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(0.25rem * 1) * calc(1 - var(--tw-space-y-reverse))); } border-radius: var(--radius-box); background-color: var(--color-base-100); padding: calc(0.25rem * 2); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); text-wrap: nowrap; opacity: 0%; --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-shadow-color: var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent); } transition-property: opacity,margin; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: 300ms; --tw-duration: 300ms; } .advance-select-menu { z-index: 10; width: 100%; :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(0.25rem * 0.5) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(0.25rem * 0.5) * calc(1 - var(--tw-space-y-reverse))); } border-radius: var(--radius-box); background-color: var(--color-base-100); background-image: none; padding: calc(0.25rem * 2); --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-shadow-color: var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent); } } .pull-up { .avatar { transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: var(--ease-in); transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: 250ms; --tw-duration: 250ms; --tw-ease: var(--ease-in); &:hover { z-index: 30; --tw-translate-y: calc(0.25rem * -1); translate: var(--tw-translate-x) var(--tw-translate-y); transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); border-radius: calc(infinity * 1px); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-shadow-color: var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent); } } } } .u8hed { & > * { transform: translateY(14%) scale(0.9) translateX(14%); z-index: 1; } & > *:nth-child(2) { transform: translateY(7%) scale(0.95) translateX(7%); z-index: 2; } &.nsao0:hover > * { transform: translateY(7%) scale(1) translateX(7%); transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: var(--ease-in-out); transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: 300ms; --tw-duration: 300ms; --tw-ease: var(--ease-in-out); } } .dqhcu { & > * { transform: translateY(14%) scale(0.9) translateX(-14%); z-index: 1; } & > *:nth-child(2) { transform: translateY(7%) scale(0.95) translateX(-7%); z-index: 2; } &.nsao0:hover > * { transform: translateY(7%) scale(1) translateX(-7%); transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: var(--ease-in-out); transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: 300ms; --tw-duration: 300ms; --tw-ease: var(--ease-in-out); } } .j1ya2 { & > * { transform: translateY(-14%) scale(0.9); z-index: 1; } & > *:nth-child(2) { transform: translateY(-7%) scale(0.95); z-index: 2; } &.nsao0:hover > * { transform: translateY(-7%) scale(1); transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: var(--ease-in-out); transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: 300ms; --tw-duration: 300ms; --tw-ease: var(--ease-in-out); } } .nywk9 { & > * { transform: translateY(-14%) scale(0.9) translateX(14%); z-index: 1; } & > *:nth-child(2) { transform: translateY(-7%) scale(0.95) translateX(7%); z-index: 2; } &.nsao0:hover > * { transform: translateY(-7%) scale(1) translateX(7%); transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: var(--ease-in-out); transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: 300ms; --tw-duration: 300ms; --tw-ease: var(--ease-in-out); } } .zvrsd { & > * { transform: translateY(-14%) scale(0.9) translateX(-14%); z-index: 1; } & > *:nth-child(2) { transform: translateY(-7%) scale(0.95) translateX(-7%); z-index: 2; } &.nsao0:hover > * { transform: translateY(-7%) scale(1) translateX(-7%); transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: var(--ease-in-out); transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: 300ms; --tw-duration: 300ms; --tw-ease: var(--ease-in-out); } } .xhm07 { & > * { transform: translateX(14%) scale(0.9); z-index: 1; } & > *:nth-child(2) { transform: translateX(7%) scale(0.95); z-index: 2; } } .h5eez { & > * { transform: translateX(-14%) scale(0.9); z-index: 1; } & > *:nth-child(2) { transform: translateX(-7%) scale(0.95); z-index: 2; } } .-z-1 { z-index: calc(1 * -1); } .z-0 { z-index: 0; } .z-1 { z-index: 1; } .jh1n3 { z-index: 2; } .wt7kk { z-index: 8; } .um9z1 { z-index: 10; } .w6d58 { z-index: 11; } .x477t { z-index: 20; } .hlhbj { z-index: 40; } .mznhg { z-index: 50; } .oe6s3 { z-index: 80; } .z-\[3\] { z-index: 3; } .z-\[9999\] { z-index: 9999; } .order-1 { order: 1; } .order-2 { order: 2; } .order-3 { order: 3; } .bmnzj { grid-column: span 1 / span 1; } .zn0el { grid-column: span 2 / span 2; } .ork5l { grid-column: span 3 / span 3; } .z0pa9 { grid-column: span 4 / span 4; } .zg0y2 { grid-column: span 5 / span 5; } .t7sh8 { grid-column: span 12 / span 12; } .gvxqy { &, &.n6ifb { --timeline-row-start: 0; .gjs6d { grid-column-start: 1; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; margin: calc(0.25rem * 2); align-self: flex-start; justify-self: center; } li:has(.gjs6d) { .mrdo1 { grid-column-start: none; grid-row-start: auto; } } } &.cv1e2 { > li { --timeline-col-start: 0; } .gjs6d { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 4; align-self: center; justify-self: flex-start; } li:has(.gjs6d) { .mrdo1 { grid-column-start: auto; grid-row-start: none; } } .hd3xh { .gjs6d { grid-column-start: 3; grid-column-end: 4; grid-row-start: 3; } .mrdo1 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; } } } } .mrdo1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; margin: calc(0.25rem * 2); align-self: flex-start; justify-self: center; } .gjs6d { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; margin: calc(0.25rem * 2); align-self: flex-end; justify-self: center; } .n6ifb { flex-direction: row; > li { align-items: center; > hr { height: 1.5px; min-height: calc(0.25rem * 0); width: 100%; &:first-child { grid-column-start: 1; grid-row-start: 2; } &:last-child { grid-column-start: 3; grid-column-end: none; grid-row-start: 2; grid-row-end: auto; } } } .gjs6d { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; align-self: flex-end; justify-self: center; } .mrdo1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; align-self: flex-start; justify-self: center; } &:has(.p76gi) { > li { > hr { &:first-child { border-start-start-radius: 0; border-end-start-radius: 0; border-start-end-radius: var(--radius-selector); border-end-end-radius: var(--radius-selector); } &:last-child { border-start-start-radius: var(--radius-selector); border-end-start-radius: var(--radius-selector); border-start-end-radius: 0; border-end-end-radius: 0; } } } } &:not(:has(.p76gi)) { :first-child { > hr:last-child { border-start-start-radius: var(--radius-selector); border-end-start-radius: var(--radius-selector); border-start-end-radius: 0; border-end-end-radius: 0; } } :last-child { > hr:first-child { border-start-start-radius: 0; border-end-start-radius: 0; border-start-end-radius: var(--radius-selector); border-end-end-radius: var(--radius-selector); } } } } .cv1e2 { flex-direction: column; > li { justify-items: center; --timeline-row-start: minmax(0, 1fr); --timeline-row-end: minmax(0, 1fr); > hr { height: 100%; width: 1.5px; &:first-child { grid-column-start: 2; grid-row-start: 1; } &:last-child { grid-column-start: 2; grid-column-end: auto; grid-row-start: 3; grid-row-end: none; } } } .gjs6d { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 4; align-self: center; justify-self: flex-end; } .mrdo1 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 4; align-self: center; justify-self: flex-start; } &:has(.p76gi) { > li { > hr { &:first-child { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: var(--radius-selector); border-bottom-left-radius: var(--radius-selector); } &:last-child { border-top-left-radius: var(--radius-selector); border-top-right-radius: var(--radius-selector); border-bottom-right-radius: 0; border-bottom-left-radius: 0; } } } } &:not(:has(.p76gi)) { :first-child { > hr:last-child { border-top-left-radius: var(--radius-selector); border-top-right-radius: var(--radius-selector); border-bottom-right-radius: 0; border-bottom-left-radius: 0; } } :last-child { > hr:first-child { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: var(--radius-selector); border-bottom-left-radius: var(--radius-selector); } } } &:where(.iijgy) { > li { --timeline-col-start: minmax(0, 1fr); --timeline-row-start: 0.5rem; } } } .xz6kb { grid-column-start: 2; grid-row: span 3 / span 3; grid-row-start: 1; place-self: center; justify-self: flex-end; } .p76gi { grid-column-start: 2; grid-row-start: 2; display: flex; width: calc(0.25rem * 9); height: calc(0.25rem * 9); align-items: center; justify-content: center; } .zzzx8 { grid-column-start: 1; margin-top: calc(0.25rem * 3); white-space: nowrap; } .mfzvw { grid-column-start: 1; font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); white-space: nowrap; color: var(--color-base-content); } .snwd3 { grid-column-start: 1; font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); white-space: nowrap; color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } .rt9qe { grid-column-start: 1; white-space: nowrap; color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 80%, transparent); } } .h1l1p { width: 100%; @media (width >= 40rem) { max-width: 40rem; } @media (width >= 48rem) { max-width: 48rem; } @media (width >= 64rem) { max-width: 64rem; } @media (width >= 80rem) { max-width: 80rem; } @media (width >= 96rem) { max-width: 96rem; } } .v5705 { margin: calc(var(--spacing) * 1); } .d8b4k { margin: calc(var(--spacing) * 2); } .nqt1l { margin: calc(var(--spacing) * 3); } .dktbh { margin: calc(var(--spacing) * 4); } .xkw0s { display: flex; flex-wrap: wrap; input[type="radio"] { width: auto; } input { overflow: hidden; opacity: 100%; scale: 1; border-width: 0; transition: margin 0.1s, opacity 0.3s, padding 0.3s, border-width 0.1s; &:not(:last-child) { margin-inline-end: calc(0.25rem * 1); } &.vy0ed { aspect-ratio: 1 / 1; &::after { content: "×"; } } } &:not(:has(input:checked:not(.vy0ed))) { .vy0ed, input[type="reset"] { scale: 0; border-width: 0; margin-inline: calc(0.25rem * 0); width: calc(0.25rem * 0); padding-inline: calc(0.25rem * 0); opacity: 0%; } } &:has(input:checked:not(.vy0ed)) { input:not(:checked, .vy0ed, input[type="reset"]) { scale: 0; border-width: 0; margin-inline: calc(0.25rem * 0); width: calc(0.25rem * 0); padding-inline: calc(0.25rem * 0); opacity: 0%; } } } .f5j8b { margin-inline: calc(0.25rem * 2); display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } .itjj4 { margin-inline: auto; width: 100%; @media (width >= 40rem) { max-width: calc(0.25rem * 128); } } .-mx-2 { margin-inline: calc(var(--spacing) * -2); } .bvv7r { margin-inline: calc(var(--spacing) * -3); } .txq14 { margin-inline: calc(var(--spacing) * -6); } .bshck { margin-inline: calc(var(--spacing) * 1.5); } .hrmeu { margin-inline: calc(var(--spacing) * 2); } .lmdue { margin-inline: calc(var(--spacing) * 3); } .ly122 { margin-inline: calc(var(--spacing) * 4); } .e93zq { margin-inline: calc(var(--spacing) * 12); } .yc0y4 { margin-inline: auto; } .ub558 { padding-inline: calc(0.25rem * 4); font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --size: calc(var(--size-field, 0.25rem) * 11.5); &[type="number"] { &::-webkit-inner-spin-button { margin-block: calc(0.25rem * -3); margin-inline-end: calc(0.25rem * -3); } } } .mq7ho { padding-inline: calc(0.25rem * 3); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --size: calc(var(--size-field, 0.25rem) * 9.5); &[type="number"] { &::-webkit-inner-spin-button { margin-block: calc(0.25rem * -3); margin-inline-end: calc(0.25rem * -3); } } } .v9d15 { padding-inline: calc(0.25rem * 2.5); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --size: calc(var(--size-field, 0.25rem) * 7.5); &[type="number"] { &::-webkit-inner-spin-button { margin-block: calc(0.25rem * -2); margin-inline-end: calc(0.25rem * -3); } } } .vltuq { padding-inline: calc(0.25rem * 4.5); font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); --size: calc(var(--size-field, 0.25rem) * 14); &[type="number"] { &::-webkit-inner-spin-button { margin-block: calc(0.25rem * -4); margin-inline-end: calc(0.25rem * -3); } } } .nnav1 { padding-inline: calc(0.25rem * 2.5); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --size: calc(var(--size-field, 0.25rem) * 6); &[type="number"] { &::-webkit-inner-spin-button { margin-block: calc(0.25rem * -1); margin-inline-end: calc(0.25rem * -3); } } } .accordion-item { .bszm3 :where(&) { margin-block: calc(0.25rem * 2); border-radius: var(--radius-box); background-color: var(--color-base-100); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-shadow-color: var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent); } .accordion-item:first-of-type { margin-top: calc(0.25rem * 0); } .accordion-item:last-of-type { margin-bottom: calc(0.25rem * 0); } & > *:first-child { border-top-left-radius: var(--radius-box); border-top-right-radius: var(--radius-box); } & > *:last-child { border-bottom-right-radius: var(--radius-box); border-bottom-left-radius: var(--radius-box); } } } .bszm3 { & :where(.accordion-item) { margin-block: calc(0.25rem * 2); border-radius: var(--radius-box); background-color: var(--color-base-100); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-shadow-color: var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent); } .accordion-item:first-of-type { margin-top: calc(0.25rem * 0); } .accordion-item:last-of-type { margin-bottom: calc(0.25rem * 0); } & > *:first-child { border-top-left-radius: var(--radius-box); border-top-right-radius: var(--radius-box); } & > *:last-child { border-bottom-right-radius: var(--radius-box); border-bottom-left-radius: var(--radius-box); } } } .r66rq { margin-block: calc(var(--spacing) * 1); } .r3or0 { margin-block: calc(var(--spacing) * 1.5); } .pxghb { margin-block: calc(var(--spacing) * 1.25); } .zya8c { margin-block: calc(var(--spacing) * 2); } .aoib9 { margin-block: calc(var(--spacing) * 2.5); } .kurw0 { margin-block: calc(var(--spacing) * 3); } .f3j9v { margin-block: calc(var(--spacing) * 3.5); } .d0yag { margin-block: calc(var(--spacing) * 4); } .p049g { margin-block: calc(var(--spacing) * 5); } .fljjq { margin-block: calc(var(--spacing) * 6); } .gx2kl { margin-block: calc(var(--spacing) * 12); } .zgebe { margin-block: calc(var(--spacing) * 13); } .my-\[26\.5px\] { margin-block: 26.5px; } .pxwvl { margin-block: auto; } .btnf5 { flex-direction: row; > .rmlfx:first-child { --join-ss: var(--radius-field); --join-se: 0; --join-es: var(--radius-field); --join-ee: 0; } :first-child:not(:last-child) { .rmlfx { --join-ss: var(--radius-field); --join-se: 0; --join-es: var(--radius-field); --join-ee: 0; } } > .rmlfx:last-child { --join-ss: 0; --join-se: var(--radius-field); --join-es: 0; --join-ee: var(--radius-field); } :last-child:not(:first-child) { .rmlfx { --join-ss: 0; --join-se: var(--radius-field); --join-es: 0; --join-ee: var(--radius-field); } } > .rmlfx:only-child { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: var(--radius-field); --join-ee: var(--radius-field); } :only-child { .rmlfx { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: var(--radius-field); --join-ee: var(--radius-field); } } .rmlfx { &:where(*:not(:first-child)) { margin-inline-start: calc(var(--border, 1px) * -1); margin-block-start: 0; } } } .ohuhl { flex-direction: column; > .rmlfx:first-child { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: 0; --join-ee: 0; } :first-child:not(:last-child) { .rmlfx { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: 0; --join-ee: 0; } } > .rmlfx:last-child { --join-ss: 0; --join-se: 0; --join-es: var(--radius-field); --join-ee: var(--radius-field); } :last-child:not(:first-child) { .rmlfx { --join-ss: 0; --join-se: 0; --join-es: var(--radius-field); --join-ee: var(--radius-field); } } > .rmlfx:only-child { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: var(--radius-field); --join-ee: var(--radius-field); } :only-child { .rmlfx { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: var(--radius-field); --join-ee: var(--radius-field); } } .rmlfx { &:where(*:not(:first-child)) { margin-inline-start: 0; margin-block-start: calc(var(--border, 1px) * -1); } } } .rmlfx { &:where(*:not(:first-child, :disabled, [disabled], .z56ha)) { margin-inline-start: calc(var(--border, 1px) * -1); margin-block-start: 0; } &:where(*:is(:disabled, [disabled], .z56ha)) { border-width: var(--border, 1px) 0 var(--border, 1px) var(--border, 1px); } } .\!ms-auto { margin-inline-start: auto !important; } .mxyvc { margin-inline-start: calc(var(--spacing) * -1); } .j7pjh { margin-inline-start: calc(var(--spacing) * 0); } .ms-0\.5 { margin-inline-start: calc(var(--spacing) * 0.5); } .o4626 { margin-inline-start: calc(var(--spacing) * 1); } .maqhy { margin-inline-start: calc(var(--spacing) * 1.5); } .ms-2 { margin-inline-start: calc(var(--spacing) * 2); } .jeaqh { margin-inline-start: calc(var(--spacing) * 3); } .r820m { margin-inline-start: calc(var(--spacing) * 4); } .q7q7o { margin-inline-start: calc(var(--spacing) * 4.5); } .ms-auto { margin-inline-start: auto; } .dhrcb { &::file-selector-button { margin-inline-end: calc(0.25rem * 4); display: inline-flex; height: 100%; flex-shrink: 0; cursor: pointer; flex-wrap: wrap; align-items: center; justify-content: center; border-style: var(--tw-border-style); border-width: 0px; background-color: var(--color-primary); padding-inline: calc(0.25rem * 4); text-align: center; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-leading: 1; --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); color: var(--color-primary-content); text-transform: uppercase; text-decoration-line: none; webkit-user-select: none; user-select: none; --input-color: var(--color-primary); &.v9d15 { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } &.mq7ho { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } &.ub558 { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } &.vltuq { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } } &[type="file"] { overflow: hidden; padding-inline-start: calc(0.25rem * 0); } .im4zz &::file-selector-button { background-color: var(--color-base-100); color: var(--color-base-content); border-inline-end: var(--border) solid var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-inline-end: var(--border) solid color-mix(in oklab, var(--color-base-content) 40%, #0000); } outline: none; } } .ojueq { --size: calc(var(--size-field, 0.25rem) * 11.5); padding-inline: calc(0.25rem * 4); padding-inline-end: calc(0.25rem * 10); font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); select { margin-inline-end: calc(0.25rem * -10); padding-inline-start: calc(0.25rem * 4); padding-inline-end: calc(0.25rem * 10); } } .vtd17 { --size: calc(var(--size-field, 0.25rem) * 14); padding-inline: calc(0.25rem * 4.5); padding-inline-end: calc(0.25rem * 10); font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); select { margin-inline-end: calc(0.25rem * -10); padding-inline-start: calc(0.25rem * 4.5); padding-inline-end: calc(0.25rem * 10); } } .egnwb { --size: calc(var(--size-field, 0.25rem) * 9.5); padding-inline-start: calc(0.25rem * 3); padding-inline-end: calc(0.25rem * 10); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); select { margin-inline-end: calc(0.25rem * -10); padding-inline-start: calc(0.25rem * 3); padding-inline-end: calc(0.25rem * 10); } } .bm7g1 { --size: calc(var(--size-field, 0.25rem) * 7.5); padding-inline-start: calc(0.25rem * 2.5); padding-inline-end: calc(0.25rem * 8); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); select { margin-inline-end: calc(0.25rem * -8); padding-inline-start: calc(0.25rem * 2.5); padding-inline-end: calc(0.25rem * 8); } } .fk7d0 { --size: calc(var(--size-field, 0.25rem) * 6); padding-inline-start: calc(0.25rem * 2.5); padding-inline-end: calc(0.25rem * 8); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); select { margin-inline-end: calc(0.25rem * -8); padding-inline-start: calc(0.25rem * 2.5); padding-inline-end: calc(0.25rem * 8); } } .\!me-1\.5 { margin-inline-end: calc(var(--spacing) * 1.5) !important; } .sckfs { margin-inline-end: calc(var(--spacing) * 1); } .me-2 { margin-inline-end: calc(var(--spacing) * 2); } .n3g43 { margin-inline-end: calc(var(--spacing) * 3); } .me-4 { margin-inline-end: calc(var(--spacing) * 4); } .qzef7 { margin-inline-end: calc(var(--spacing) * 6); } .noek8 { margin-inline-end: calc(var(--spacing) * 15); } .poulh { margin-inline-end: auto; } .t803b { margin-top: calc(var(--spacing) * -1); } .yozpp { margin-top: calc(var(--spacing) * -3); } .ahy8z { margin-top: calc(var(--spacing) * -6); } .quqfu { margin-top: calc(var(--spacing) * -9); } .he81i { margin-top: calc(var(--spacing) * -9.25); } .nxc7x { margin-top: calc(var(--spacing) * -15); } .sh783 { margin-top: calc(var(--spacing) * -17); } .bqgrs { margin-top: calc(var(--spacing) * -105); } .l6917 { margin-top: calc(var(--spacing) * 0.5); } .hdx8z { margin-top: calc(var(--spacing) * 0.75); } .w4yf1 { margin-top: calc(var(--spacing) * 1); } .om5re { margin-top: calc(var(--spacing) * 1.5); } .rnavm { margin-top: calc(var(--spacing) * 1.75); } .udh13 { margin-top: calc(var(--spacing) * 2); } .wdhy7 { margin-top: calc(var(--spacing) * 2.5); } .flyly { margin-top: calc(var(--spacing) * 2.75); } .trx7a { margin-top: calc(var(--spacing) * 3); } .gi4no { margin-top: calc(var(--spacing) * 3.5); } .lr63c { margin-top: calc(var(--spacing) * 4); } .gor3n { margin-top: calc(var(--spacing) * 5); } .ggfr0 { margin-top: calc(var(--spacing) * 6); } .i54e6 { margin-top: calc(var(--spacing) * 6.25); } .rue55 { margin-top: calc(var(--spacing) * 7); } .bpj8s { margin-top: calc(var(--spacing) * 8); } .ohgf9 { margin-top: calc(var(--spacing) * 10); } .uwcvn { margin-top: calc(var(--spacing) * 12); } .j0was { margin-top: calc(var(--spacing) * 16); } .gs69f { margin-top: calc(var(--spacing) * 18); } .avvog { margin-top: calc(var(--spacing) * 18.5); } .poz2a { margin-top: calc(var(--spacing) * 24); } .nkmj1 { margin-top: auto; } .nd1qi { margin-bottom: calc(0.25rem * 1); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-base-content); } .idz7v { margin-bottom: calc(var(--spacing) * 0); } .mb-0\.5 { margin-bottom: calc(var(--spacing) * 0.5); } .mb-1 { margin-bottom: calc(var(--spacing) * 1); } .pk0tk { margin-bottom: calc(var(--spacing) * 1.5); } .kzj60 { margin-bottom: calc(var(--spacing) * 1.25); } .mb-2 { margin-bottom: calc(var(--spacing) * 2); } .j33n2 { margin-bottom: calc(var(--spacing) * 2.5); } .rndtm { margin-bottom: calc(var(--spacing) * 3); } .ijb0i { margin-bottom: calc(var(--spacing) * 3.5); } .aofcp { margin-bottom: calc(var(--spacing) * 4); } .mavoc { margin-bottom: calc(var(--spacing) * 4.5); } .r5woo { margin-bottom: calc(var(--spacing) * 5); } .my0ol { margin-bottom: calc(var(--spacing) * 5.5); } .tstqb { margin-bottom: calc(var(--spacing) * 6); } .dv4gf { margin-bottom: calc(var(--spacing) * 7); } .w1vu2 { margin-bottom: calc(var(--spacing) * 8); } .zcukf { margin-bottom: calc(var(--spacing) * 9); } .pvhkv { margin-bottom: calc(var(--spacing) * 9.5); } .vxn2y { margin-bottom: calc(var(--spacing) * 10); } .wyiye { margin-bottom: calc(var(--spacing) * 12); } .vu2un { margin-bottom: calc(var(--spacing) * 16); } .iriyh { margin-bottom: calc(var(--spacing) * 20); } .mb-\[7\.4px\] { margin-bottom: 7.4px; } .gogtf { margin-bottom: auto; } .a6tn5 { margin-bottom: 1px; } .xyc9h { margin-left: calc(var(--spacing) * 1); } .ml-2 { margin-left: calc(var(--spacing) * 2); } .ad39k { margin-left: calc(var(--spacing) * 6); } .pyx3k { margin-left: auto; } .uyzsx { display: inline-block; aspect-ratio: 1 / 1; width: calc(0.25rem * 2.5); height: calc(0.25rem * 2.5); border-radius: calc(infinity * 1px); background-color: var(--color-neutral); background-position: center; background-repeat: no-repeat; vertical-align: middle; color: var(--color-neutral); background-image: radial-gradient(circle at 35% 30%, oklch(1 0 0 / calc(var(--depth) * 0.5)), #0000); box-shadow: 0 2px 3px -1px currentColor; @supports (color: color-mix(in lab, red, red)) { box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000); } } .wehvw { display: flex; width: 100%; align-items: center; align-self: stretch; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); white-space: nowrap; &:not(:empty) { gap: calc(0.25rem * 4); } &:before { content: ""; height: 1px; width: 100%; flex-grow: 1; border-inline-end-style: var(--tw-border-style); border-inline-end-width: 0px; border-top-style: var(--tw-border-style); border-top-width: 1px; --tw-border-style: solid; border-style: solid; border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); } } &:after { content: ""; height: 1px; width: 100%; flex-grow: 1; border-inline-end-style: var(--tw-border-style); border-inline-end-width: 0px; border-top-style: var(--tw-border-style); border-top-width: 1px; --tw-border-style: solid; border-style: solid; border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); } } } .b8yft { display: flex; height: calc(0.25rem * 1.5); width: 100%; flex-direction: column; justify-content: center; background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } text-align: center; font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); white-space: nowrap; color: var(--color-base-100); } .badge { display: inline-flex; align-items: center; justify-content: center; gap: calc(0.25rem * 1.5); border-radius: var(--radius-selector); text-align: center; vertical-align: middle; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); border: var(--border) solid var(--badge-border); padding-inline: calc(0.25rem * 3); width: fit-content; color: var(--badge-fg); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); background-color: var(--badge-bg); --badge-border: var(--badge-color, var(--color-neutral)); --badge-bg: var(--badge-color, var(--color-neutral)); --badge-fg: var(--color-neutral-content); --size: calc(var(--size-selector, 0.25rem) * 6); height: var(--size); &.f1ejy { --badge-fg: var(--badge-color, var(--color-neutral)); --badge-bg: transparent; background-image: none; } &.badge-soft { --badge-border: none; --badge-fg: var(--badge-color, var(--color-neutral)); --badge-bg: var(--badge-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --badge-bg: color-mix(in oklab, var(--badge-color, var(--color-neutral)) 10%, var(--color-base-100)); } background-image: none; } } .progress { display: flex; height: calc(0.25rem * 1.5); width: 100%; overflow: hidden; border-radius: var(--radius-box); background-color: var(--color-base-200); } .icon-\[solar--bell-off-bold-duotone\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M18.75 9v.704c0 .845.24 1.671.692 2.374l1.108 1.723c1.011 1.574.239 3.713-1.52 4.21a25.8 25.8 0 0 1-14.06 0c-1.759-.497-2.531-2.636-1.52-4.21l1.108-1.723a4.4 4.4 0 0 0 .693-2.374V9c0-3.866 3.022-7 6.749-7s6.75 3.134 6.75 7' opacity='.5'/%3E%3Cpath fill='black' d='M7.243 18.545a5.002 5.002 0 0 0 9.513 0c-3.145.59-6.367.59-9.513 0M9.349 9c0 .414.323.75.723.75h2.11L9.56 12.47a.77.77 0 0 0-.156.817c.112.28.375.463.668.463h3.856c.4 0 .723-.336.723-.75a.737.737 0 0 0-.723-.75h-2.11l2.622-2.72a.77.77 0 0 0 .157-.817a.72.72 0 0 0-.669-.463h-3.856c-.4 0-.723.336-.723.75'/%3E%3C/svg%3E"); } .icon-\[solar--box-minimalistic-bold-duotone\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M8.422 20.618C10.178 21.54 11.056 22 12 22V12L2.638 7.073l-.04.067C2 8.154 2 9.417 2 11.942v.117c0 2.524 0 3.787.597 4.801c.598 1.015 1.674 1.58 3.825 2.709z'/%3E%3Cpath fill='black' d='m17.577 4.432l-2-1.05C13.822 2.461 12.944 2 12 2c-.945 0-1.822.46-3.578 1.382l-2 1.05C4.318 5.536 3.242 6.1 2.638 7.072L12 12l9.362-4.927c-.606-.973-1.68-1.537-3.785-2.641' opacity='.7'/%3E%3Cpath fill='black' d='m21.403 7.14l-.041-.067L12 12v10c.944 0 1.822-.46 3.578-1.382l2-1.05c2.151-1.129 3.227-1.693 3.825-2.708c.597-1.014.597-2.277.597-4.8v-.117c0-2.525 0-3.788-.597-4.802' opacity='.5'/%3E%3C/svg%3E"); } .icon-\[solar--buildings-bold\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M15 2h2c1.886 0 2.828 0 3.414.586S21 4.114 21 6v15.25h1a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1 0-1.5h1V9c0-1.886 0-2.828.586-3.414S5.114 5 7 5h4c1.886 0 2.828 0 3.414.586S15 7.114 15 9v12.25h1.5V8.91c0-.865 0-1.659-.087-2.304c-.095-.711-.32-1.463-.938-2.08c-.618-.619-1.37-.844-2.08-.94c-.637-.085-1.418-.086-2.269-.086c.084-.387.225-.68.46-.914C12.172 2 13.114 2 15 2M5.25 8A.75.75 0 0 1 6 7.25h6a.75.75 0 0 1 0 1.5H6A.75.75 0 0 1 5.25 8m0 3a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5H6a.75.75 0 0 1-.75-.75m0 3a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5H6a.75.75 0 0 1-.75-.75M9 18.25a.75.75 0 0 1 .75.75v2.25h-1.5V19a.75.75 0 0 1 .75-.75' clip-rule='evenodd'/%3E%3C/svg%3E"); } .icon-\[solar--calendar-date-bold\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M7.75 2.5a.75.75 0 0 0-1.5 0v1.58c-1.44.115-2.384.397-3.078 1.092c-.695.694-.977 1.639-1.093 3.078h19.842c-.116-1.44-.398-2.384-1.093-3.078c-.694-.695-1.639-.977-3.078-1.093V2.5a.75.75 0 0 0-1.5 0v1.513C15.585 4 14.839 4 14 4h-4c-.839 0-1.585 0-2.25.013z'/%3E%3Cpath fill='black' fill-rule='evenodd' d='M22 12c0-.839 0-1.585-.013-2.25H2.013C2 10.415 2 11.161 2 12v2c0 3.771 0 5.657 1.172 6.828S6.229 22 10 22h4c3.771 0 5.657 0 6.828-1.172S22 17.771 22 14zm-8 .25A1.75 1.75 0 0 0 12.25 14v2a1.75 1.75 0 1 0 3.5 0v-2A1.75 1.75 0 0 0 14 12.25m0 1.5a.25.25 0 0 0-.25.25v2a.25.25 0 1 0 .5 0v-2a.25.25 0 0 0-.25-.25m-3.213-1.443a.75.75 0 0 1 .463.693v4a.75.75 0 0 1-1.5 0v-2.19l-.22.22a.75.75 0 0 1-1.06-1.06l1.5-1.5a.75.75 0 0 1 .817-.163' clip-rule='evenodd'/%3E%3C/svg%3E"); } .icon-\[solar--card-bold-duotone\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M10 20h4c3.771 0 5.657 0 6.828-1.172S22 15.771 22 12c0-.442-.002-1.608-.004-2H2c-.002.392 0 1.558 0 2c0 3.771 0 5.657 1.171 6.828S6.23 20 10 20' opacity='.5'/%3E%3Cpath fill='black' d='M9.995 4h4.01c3.781 0 5.672 0 6.846 1.116c.846.803 1.083 1.96 1.149 3.884v1H2V9c.066-1.925.303-3.08 1.149-3.884C4.323 4 6.214 4 9.995 4M12.5 15.25a.75.75 0 0 0 0 1.5H14a.75.75 0 0 0 0-1.5zm-6.5 0a.75.75 0 0 0 0 1.5h4a.75.75 0 0 0 0-1.5z'/%3E%3C/svg%3E"); } .icon-\[solar--chart-2-bold\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M17.293 2.293C17 2.586 17 3.057 17 4v13c0 .943 0 1.414.293 1.707S18.057 19 19 19s1.414 0 1.707-.293S21 17.943 21 17V4c0-.943 0-1.414-.293-1.707S19.943 2 19 2s-1.414 0-1.707.293M10 7c0-.943 0-1.414.293-1.707S11.057 5 12 5s1.414 0 1.707.293S14 6.057 14 7v10c0 .943 0 1.414-.293 1.707S12.943 19 12 19s-1.414 0-1.707-.293S10 17.943 10 17zM3.293 9.293C3 9.586 3 10.057 3 11v6c0 .943 0 1.414.293 1.707S4.057 19 5 19s1.414 0 1.707-.293S7 17.943 7 17v-6c0-.943 0-1.414-.293-1.707S5.943 9 5 9s-1.414 0-1.707.293M3 21.25a.75.75 0 0 0 0 1.5h18a.75.75 0 0 0 0-1.5z'/%3E%3C/svg%3E"); } .icon-\[solar--chart-bold-duotone\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M14 20.5V4.25c0-.728-.002-1.2-.048-1.546c-.044-.325-.115-.427-.172-.484s-.159-.128-.484-.172C12.949 2.002 12.478 2 11.75 2s-1.2.002-1.546.048c-.325.044-.427.115-.484.172s-.128.159-.172.484c-.046.347-.048.818-.048 1.546V20.5z' clip-rule='evenodd'/%3E%3Cpath fill='black' d='M8 8.75A.75.75 0 0 0 7.25 8h-3a.75.75 0 0 0-.75.75V20.5H8zm12 5a.75.75 0 0 0-.75-.75h-3a.75.75 0 0 0-.75.75v6.75H20z' opacity='.7'/%3E%3Cpath fill='black' d='M1.75 20.5a.75.75 0 0 0 0 1.5h20a.75.75 0 0 0 0-1.5z' opacity='.5'/%3E%3C/svg%3E"); } .icon-\[solar--chat-square-code-bold\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' fill-rule='evenodd' d='m13.087 21.388l.542-.916c.42-.71.63-1.066.968-1.262c.338-.197.763-.204 1.613-.219c1.256-.021 2.043-.098 2.703-.372a5 5 0 0 0 2.706-2.706C22 14.995 22 13.83 22 11.5v-1c0-3.273 0-4.91-.737-6.112a5 5 0 0 0-1.65-1.651C18.41 2 16.773 2 13.5 2h-3c-3.273 0-4.91 0-6.112.737a5 5 0 0 0-1.651 1.65C2 5.59 2 7.228 2 10.5v1c0 2.33 0 3.495.38 4.413a5 5 0 0 0 2.707 2.706c.66.274 1.447.35 2.703.372c.85.015 1.275.022 1.613.219c.337.196.548.551.968 1.262l.542.916c.483.816 1.69.816 2.174 0M14.97 7.299a.75.75 0 0 1 1.06 0l.209.209c.635.635 1.165 1.165 1.529 1.642c.384.503.654 1.035.654 1.68c0 .644-.27 1.176-.654 1.68c-.364.476-.894 1.006-1.53 1.642l-.208.208a.75.75 0 1 1-1.06-1.06l.171-.172c.682-.682 1.139-1.141 1.434-1.528c.283-.37.347-.586.347-.77s-.064-.4-.347-.77c-.295-.388-.752-.847-1.434-1.529l-.171-.171a.75.75 0 0 1 0-1.06m-.952-1.105a.75.75 0 1 0-1.449-.388l-2.588 9.66a.75.75 0 1 0 1.45.387zM9.03 7.3a.75.75 0 0 1 0 1.06l-.171.172c-.682.682-1.139 1.141-1.434 1.529c-.283.37-.347.585-.347.77c0 .184.064.4.347.77c.295.387.752.846 1.434 1.528l.171.171a.75.75 0 1 1-1.06 1.06l-.172-.17l-.037-.037c-.635-.636-1.165-1.165-1.529-1.643c-.384-.503-.654-1.035-.654-1.68c0-.644.27-1.176.654-1.68c.364-.476.894-1.006 1.53-1.641l.036-.037l.172-.172a.75.75 0 0 1 1.06 0' clip-rule='evenodd'/%3E%3C/svg%3E"); } .icon-\[solar--clock-circle-bold\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cdefs%3E%3Cmask id='SVGnNgsclOC'%3E%3Cg fill='none'%3E%3Cpath fill='%23fff' d='M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10'/%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12 7.25a.75.75 0 0 1 .75.75v3.69l2.28 2.28a.75.75 0 1 1-1.06 1.06l-2.5-2.5a.75.75 0 0 1-.22-.53V8a.75.75 0 0 1 .75-.75' clip-rule='evenodd'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Cpath fill='black' d='M0 0h24v24H0z' mask='url(%23SVGnNgsclOC)'/%3E%3C/svg%3E"); } .icon-\[solar--code-scan-bold-duotone\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M14 2.75c1.907 0 3.262.002 4.29.14c1.005.135 1.585.389 2.008.812s.677 1.003.812 2.009c.138 1.028.14 2.382.14 4.289a.75.75 0 0 0 1.5 0v-.056c0-1.838 0-3.294-.153-4.433c-.158-1.172-.49-2.121-1.238-2.87c-.749-.748-1.698-1.08-2.87-1.238c-1.14-.153-2.595-.153-4.433-.153H14a.75.75 0 0 0 0 1.5m-4.056-1.5H10a.75.75 0 0 1 0 1.5c-1.907 0-3.261.002-4.29.14c-1.005.135-1.585.389-2.008.812S3.025 4.705 2.89 5.71c-.138 1.029-.14 2.383-.14 4.29a.75.75 0 0 1-1.5 0v-.056c0-1.838 0-3.294.153-4.433c.158-1.172.49-2.121 1.238-2.87c.749-.748 1.698-1.08 2.87-1.238c1.14-.153 2.595-.153 4.433-.153M22 13.25a.75.75 0 0 1 .75.75v.056c0 1.838 0 3.294-.153 4.433c-.158 1.172-.49 2.121-1.238 2.87c-.749.748-1.698 1.08-2.87 1.238c-1.14.153-2.595.153-4.433.153H14a.75.75 0 0 1 0-1.5c1.907 0 3.262-.002 4.29-.14c1.005-.135 1.585-.389 2.008-.812s.677-1.003.812-2.009c.138-1.027.14-2.382.14-4.289a.75.75 0 0 1 .75-.75M2.75 14a.75.75 0 0 0-1.5 0v.056c0 1.838 0 3.294.153 4.433c.158 1.172.49 2.121 1.238 2.87c.749.748 1.698 1.08 2.87 1.238c1.14.153 2.595.153 4.433.153H10a.75.75 0 0 0 0-1.5c-1.907 0-3.261-.002-4.29-.14c-1.005-.135-1.585-.389-2.008-.812s-.677-1.003-.812-2.009c-.138-1.027-.14-2.382-.14-4.289' opacity='.5'/%3E%3Cpath fill='black' d='M5.527 5.527C5 6.054 5 6.903 5 8.6c0 1.131 0 1.697.351 2.049C5.703 11 6.27 11 7.4 11h1.2c1.131 0 1.697 0 2.049-.351C11 10.297 11 9.73 11 8.6V7.4c0-1.131 0-1.697-.351-2.049C10.297 5 9.73 5 8.6 5c-1.697 0-2.546 0-3.073.527m0 12.946C5 17.946 5 17.097 5 15.4c0-1.131 0-1.697.351-2.049C5.703 13 6.27 13 7.4 13h1.2c1.131 0 1.697 0 2.049.351c.351.352.351.918.351 2.049v1.2c0 1.131 0 1.697-.351 2.048C10.297 19 9.73 19 8.6 19c-1.697 0-2.546 0-3.073-.527M13 7.4c0-1.131 0-1.697.351-2.049C13.704 5 14.27 5 15.4 5c1.697 0 2.546 0 3.073.527S19 6.903 19 8.6c0 1.131 0 1.697-.352 2.049c-.35.351-.917.351-2.048.351h-1.2c-1.131 0-1.697 0-2.049-.351C13 10.297 13 9.73 13 8.6zm.352 11.249C13 18.297 13 17.73 13 16.6v-1.2c0-1.131 0-1.697.351-2.049C13.704 13 14.27 13 15.4 13h1.2c1.131 0 1.697 0 2.048.351c.352.352.352.918.352 2.049c0 1.697 0 2.546-.527 3.073S17.097 19 15.4 19c-1.131 0-1.697 0-2.049-.352'/%3E%3C/svg%3E"); } .icon-\[solar--devices-bold\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M2 14.5c0-1.405 0-2.107.337-2.611a2 2 0 0 1 .552-.552C3.393 11 4.096 11 5.5 11s2.107 0 2.611.337a2 2 0 0 1 .552.552C9 12.393 9 13.096 9 14.5v4c0 1.404 0 2.107-.337 2.611a2 2 0 0 1-.552.552C7.607 22 6.904 22 5.5 22s-2.107 0-2.611-.337a2 2 0 0 1-.552-.552C2 20.607 2 19.904 2 18.5z'/%3E%3Cpath fill='black' fill-rule='evenodd' d='M22 10v4c0 3.771 0 5.657-1.172 6.828S17.771 22 14 22c-1.7 0-3.015 0-4.056-.107c.335-.525.454-1.082.506-1.598c.05-.491.05-1.084.05-1.729v-4.132c0-.645 0-1.238-.05-1.729c-.054-.533-.18-1.11-.54-1.65a3.5 3.5 0 0 0-.966-.965c-.54-.36-1.116-.486-1.65-.54A14 14 0 0 0 6 9.5c.002-3.44.053-5.21 1.172-6.328C8.343 2 10.229 2 14 2s5.657 0 6.828 1.172S22 6.229 22 10m-10.75 9a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75' clip-rule='evenodd'/%3E%3C/svg%3E"); } .icon-\[solar--dollar-minimalistic-bold\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10m.75-16a.75.75 0 0 0-1.5 0v.317c-1.63.292-3 1.517-3 3.183c0 1.917 1.813 3.25 3.75 3.25c1.377 0 2.25.906 2.25 1.75s-.873 1.75-2.25 1.75c-1.376 0-2.25-.906-2.25-1.75a.75.75 0 0 0-1.5 0c0 1.666 1.37 2.891 3 3.183V18a.75.75 0 0 0 1.5 0v-.317c1.63-.292 3-1.517 3-3.183c0-1.917-1.813-3.25-3.75-3.25c-1.376 0-2.25-.906-2.25-1.75s.874-1.75 2.25-1.75c1.377 0 2.25.906 2.25 1.75a.75.75 0 0 0 1.5 0c0-1.666-1.37-2.891-3-3.183z' clip-rule='evenodd'/%3E%3C/svg%3E"); } .icon-\[solar--figma-bold\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M8.667 9.417a2.583 2.583 0 1 0 0 5.166h2.583V9.417zm2.583-1.5H8.667a2.583 2.583 0 0 1 0-5.167h2.583zm1.5-5.167v5.167h2.583a2.584 2.584 0 0 0 0-5.167zm2.583 6.666a2.583 2.583 0 0 0-2.583 2.542v.083a2.583 2.583 0 1 0 2.583-2.625m-6.666 6.667a2.584 2.584 0 1 0 2.583 2.584v-2.584z' clip-rule='evenodd'/%3E%3C/svg%3E"); } .icon-\[solar--gamepad-bold-duotone\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m10.667 6.134l-.502-.355A4.24 4.24 0 0 0 7.715 5h-.612c-.405 0-.813.025-1.194.16c-2.383.846-4.022 3.935-3.903 10.943c.024 1.412.354 2.972 1.628 3.581A3.2 3.2 0 0 0 5.027 20a2.74 2.74 0 0 0 1.53-.437c.41-.268.77-.616 1.13-.964c.444-.43.888-.86 1.424-1.138a4.1 4.1 0 0 1 1.89-.461H13c.658 0 1.306.158 1.89.46c.536.279.98.709 1.425 1.139c.36.348.72.696 1.128.964c.39.256.895.437 1.531.437a3.2 3.2 0 0 0 1.393-.316c1.274-.609 1.604-2.17 1.628-3.581c.119-7.008-1.52-10.097-3.903-10.942C17.71 5.025 17.3 5 16.897 5h-.612a4.24 4.24 0 0 0-2.45.78l-.502.354a2.31 2.31 0 0 1-2.666 0' opacity='.5'/%3E%3Cpath fill='black' d='M16.75 9a.75.75 0 1 1 0 1.5a.75.75 0 0 1 0-1.5m-9.25.25a.75.75 0 0 1 .75.75v.75H9a.75.75 0 0 1 0 1.5h-.75V13a.75.75 0 0 1-1.5 0v-.75H6a.75.75 0 0 1 0-1.5h.75V10a.75.75 0 0 1 .75-.75m11.5 2a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0m-3.75.75a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5m2.25.75a.75.75 0 1 0-1.5 0a.75.75 0 0 0 1.5 0'/%3E%3C/svg%3E"); } .icon-\[solar--home-angle-bold-duotone\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M13.106 22h-2.212c-3.447 0-5.17 0-6.345-1.012s-1.419-2.705-1.906-6.093l-.279-1.937c-.38-2.637-.57-3.956-.029-5.083s1.691-1.813 3.992-3.183l1.385-.825C9.8 2.622 10.846 2 12 2s2.199.622 4.288 1.867l1.385.825c2.3 1.37 3.451 2.056 3.992 3.183s.35 2.446-.03 5.083l-.278 1.937c-.487 3.388-.731 5.081-1.906 6.093S16.553 22 13.106 22' opacity='.5'/%3E%3Cpath fill='black' d='M8.25 18a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1-.75-.75'/%3E%3C/svg%3E"); } .icon-\[solar--laptop-minimalistic-bold\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M1 20.24c0-.42.344-.76.767-.76h20.466c.423 0 .767.34.767.76s-.344.76-.767.76H1.767A.764.764 0 0 1 1 20.24M3.69 3.89c-.9.89-.9 2.324-.9 5.19v5.067c0 1.91 0 2.866.6 3.46s1.564.593 3.494.593h10.232c1.93 0 2.895 0 3.494-.594c.6-.593.6-1.549.6-3.46V9.08c0-2.866 0-4.3-.9-5.19C19.411 3 17.964 3 15.07 3H8.93c-2.894 0-4.341 0-5.24.89m4.473 11.27c0-.42.343-.76.767-.76h6.14c.424 0 .767.34.767.76s-.343.76-.767.76H8.93a.764.764 0 0 1-.767-.76' clip-rule='evenodd'/%3E%3C/svg%3E"); } .icon-\[solar--layers-bold\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M4.979 9.685C2.993 8.891 2 8.494 2 8s.993-.89 2.979-1.685l2.808-1.123C9.773 4.397 10.767 4 12 4s2.227.397 4.213 1.192l2.808 1.123C21.007 7.109 22 7.506 22 8s-.993.89-2.979 1.685l-2.808 1.124C14.227 11.603 13.233 12 12 12s-2.227-.397-4.213-1.191z'/%3E%3Cpath fill='black' fill-rule='evenodd' d='M2 8c0 .494.993.89 2.979 1.685l2.808 1.124C9.773 11.603 10.767 12 12 12s2.227-.397 4.213-1.191l2.808-1.124C21.007 8.891 22 8.494 22 8s-.993-.89-2.979-1.685l-2.808-1.123C14.227 4.397 13.233 4 12 4s-2.227.397-4.213 1.192L4.98 6.315C2.993 7.109 2 7.506 2 8' clip-rule='evenodd'/%3E%3Cpath fill='black' d='m19.021 13.685l-2.808 1.124C14.227 15.603 13.233 16 12 16s-2.227-.397-4.213-1.191L4.98 13.685C2.993 12.891 2 12.493 2 12c0-.445.807-.812 2.42-1.461l3.141 1.256C9.411 12.535 10.572 13 12 13s2.59-.465 4.439-1.205l3.14-1.256C21.194 11.189 22 11.555 22 12c0 .493-.993.89-2.979 1.685'/%3E%3Cpath fill='black' d='m19.021 17.685l-2.808 1.123C14.227 19.603 13.233 20 12 20s-2.227-.397-4.213-1.192L4.98 17.685C2.993 16.89 2 16.493 2 16c0-.445.807-.812 2.42-1.461l3.141 1.256C9.411 16.535 10.572 17 12 17s2.59-.465 4.439-1.205l3.14-1.256c1.614.65 2.421 1.016 2.421 1.46c0 .494-.993.891-2.979 1.686'/%3E%3C/svg%3E"); } .icon-\[solar--map-point-bold-duotone\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 2c-4.418 0-8 4.003-8 8.5c0 4.462 2.553 9.312 6.537 11.174a3.45 3.45 0 0 0 2.926 0C17.447 19.812 20 14.962 20 10.5C20 6.003 16.418 2 12 2' opacity='.5'/%3E%3Cpath fill='black' d='M12 12.5a2.5 2.5 0 1 0 0-5a2.5 2.5 0 0 0 0 5'/%3E%3C/svg%3E"); } .icon-\[solar--pen-bold\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m11.4 18.161l7.396-7.396a10.3 10.3 0 0 1-3.326-2.234a10.3 10.3 0 0 1-2.235-3.327L5.839 12.6c-.577.577-.866.866-1.114 1.184a6.6 6.6 0 0 0-.749 1.211c-.173.364-.302.752-.56 1.526l-1.362 4.083a1.06 1.06 0 0 0 1.342 1.342l4.083-1.362c.775-.258 1.162-.387 1.526-.56q.647-.308 1.211-.749c.318-.248.607-.537 1.184-1.114m9.448-9.448a3.932 3.932 0 0 0-5.561-5.561l-.887.887l.038.111a8.75 8.75 0 0 0 2.092 3.32a8.75 8.75 0 0 0 3.431 2.13z'/%3E%3C/svg%3E"); } .icon-\[solar--pie-chart-bold-duotone\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M9.163 3.775a.75.75 0 0 1-.49.94A8.465 8.465 0 0 0 2.75 12.79a8.46 8.46 0 0 0 8.46 8.461a8.465 8.465 0 0 0 8.075-5.922a.75.75 0 1 1 1.43.45c-1.268 4.04-5.043 6.972-9.504 6.972c-5.501 0-9.961-4.46-9.961-9.96c0-4.462 2.932-8.236 6.973-9.506a.75.75 0 0 1 .94.491' clip-rule='evenodd' opacity='.5'/%3E%3Cpath fill='black' d='M21.913 9.947a11.35 11.35 0 0 0-7.86-7.86C12.409 1.628 11 3.054 11 4.76v6.694c0 .853.692 1.545 1.545 1.545h6.694c1.707 0 3.133-1.41 2.674-3.053'/%3E%3C/svg%3E"); } .icon-\[solar--rounded-magnifer-bold\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M17.82 19.7a1.77 1.77 0 0 1 1.9-1.917c.189.016.414.084.643.154l.066.02l.06.018c.211.063.42.126.58.212a1.786 1.786 0 0 1 .638 2.55c-.1.151-.255.307-.41.464l-.045.044l-.044.045c-.156.157-.31.313-.46.414a1.754 1.754 0 0 1-2.528-.643a3.3 3.3 0 0 1-.21-.585l-.018-.06l-.02-.067c-.07-.232-.137-.459-.153-.648' clip-rule='evenodd'/%3E%3Cpath fill='black' d='M20.128 11.143c0 5.05-4.058 9.143-9.064 9.143S2 16.192 2 11.143S6.058 2 11.064 2s9.064 4.093 9.064 9.143'/%3E%3C/svg%3E"); } .icon-\[solar--share-bold\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M13.803 5.333c0-1.84 1.5-3.333 3.348-3.333A3.34 3.34 0 0 1 20.5 5.333c0 1.841-1.5 3.334-3.349 3.334a3.35 3.35 0 0 1-2.384-.994l-4.635 3.156a3.34 3.34 0 0 1-.182 1.917l5.082 3.34a3.35 3.35 0 0 1 2.12-.753a3.34 3.34 0 0 1 3.348 3.334C20.5 20.507 19 22 17.151 22a3.34 3.34 0 0 1-3.348-3.333a3.3 3.3 0 0 1 .289-1.356L9.05 14a3.35 3.35 0 0 1-2.202.821A3.34 3.34 0 0 1 3.5 11.487a3.34 3.34 0 0 1 3.348-3.333c1.064 0 2.01.493 2.623 1.261l4.493-3.059a3.3 3.3 0 0 1-.161-1.023' clip-rule='evenodd'/%3E%3C/svg%3E"); } .icon-\[solar--unread-bold\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M22 12c0 4.714 0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12s0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12m-4.546-5.097a.75.75 0 0 1 .143 1.052l-6.858 9a.75.75 0 0 1-1.161.038l-3.143-3.6a.75.75 0 1 1 1.13-.986l2.538 2.907l6.3-8.269a.75.75 0 0 1 1.052-.142' clip-rule='evenodd'/%3E%3C/svg%3E"); } .icon-\[solar--user-bold\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Ccircle cx='12' cy='6' r='4' fill='black'/%3E%3Cpath fill='black' d='M20 17.5c0 2.485 0 4.5-8 4.5s-8-2.015-8-4.5S7.582 13 12 13s8 2.015 8 4.5'/%3E%3C/svg%3E"); } .icon-\[solar--user-rounded-bold-duotone\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Ccircle cx='12' cy='6' r='4' fill='black'/%3E%3Cellipse cx='12' cy='17' fill='black' opacity='.5' rx='7' ry='4'/%3E%3C/svg%3E"); } .icon-\[solar--user-speak-bold-duotone\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M18.357 1.364a.75.75 0 0 1 1.029-.257L19 1.75l.386-.643h.001l.002.002l.003.002l.01.006a2 2 0 0 1 .114.076q.107.074.277.212c.222.185.512.462.802.838c.582.758 1.155 1.914 1.155 3.507s-.573 2.75-1.155 3.507c-.29.376-.58.653-.802.838a4 4 0 0 1-.378.28l-.013.008l-.01.006l-.003.002l-.002.001s-.001.001-.387-.642l.386.643a.75.75 0 0 1-.776-1.283l.005-.004l.04-.027q.061-.042.177-.136c.153-.128.363-.326.573-.6c.418-.542.845-1.386.845-2.593s-.427-2.05-.844-2.593a3.8 3.8 0 0 0-.574-.6a3 3 0 0 0-.217-.163l-.005-.003a.75.75 0 0 1-.253-1.027M10 9.75a4 4 0 1 0 0-8a4 4 0 0 0 0 8'/%3E%3Cpath fill='black' d='M17.386 3.107a.75.75 0 0 0-1.03.257l.25 1.024l.007.005l.063.049c.06.05.144.129.23.24a1.7 1.7 0 0 1 .344 1.068a1.7 1.7 0 0 1-.344 1.068a1.5 1.5 0 0 1-.293.29l-.008.004a.75.75 0 0 0 .78 1.281L17 7.75l.386.643h.001l.002-.001l.003-.002l.007-.005l.02-.012a2 2 0 0 0 .217-.162c.129-.107.294-.265.459-.479a3.2 3.2 0 0 0 .655-1.982a3.2 3.2 0 0 0-.655-1.982a3 3 0 0 0-.622-.604l-.054-.037l-.02-.012l-.007-.004l-.003-.002l-.002-.001s-.001-.001-.387.642z'/%3E%3Cpath fill='black' d='M2 17.25c0 2.485 0 4.5 8 4.5s8-2.015 8-4.5s-3.582-4.5-8-4.5s-8 2.015-8 4.5' opacity='.5'/%3E%3C/svg%3E"); } .icon-\[solar--videocamera-add-bold-duotone\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M2 11.5c0-3.287 0-4.931.908-6.038a4 4 0 0 1 .554-.554C4.57 4 6.212 4 9.5 4c3.287 0 4.931 0 6.038.908a4 4 0 0 1 .554.554C17 6.57 17 8.212 17 11.5v1c0 3.287 0 4.931-.908 6.038a4 4 0 0 1-.554.554C14.43 20 12.788 20 9.5 20c-3.287 0-4.931 0-6.038-.908a4 4 0 0 1-.554-.554C2 17.43 2 15.788 2 12.5z' opacity='.5'/%3E%3Cpath fill='black' d='m17 9.5l.658-.329c1.946-.973 2.92-1.46 3.63-1.02c.712.44.712 1.528.712 3.703v.292c0 2.176 0 3.263-.711 3.703c-.712.44-1.685-.047-3.63-1.02L17 14.5zm-6.75 0a.75.75 0 0 0-1.5 0v1.75H7a.75.75 0 0 0 0 1.5h1.75v1.75a.75.75 0 0 0 1.5 0v-1.75H12a.75.75 0 0 0 0-1.5h-1.75z'/%3E%3C/svg%3E"); } .icon-\[solar--widget-bold\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M2 6.5c0-2.121 0-3.182.659-3.841S4.379 2 6.5 2s3.182 0 3.841.659S11 4.379 11 6.5s0 3.182-.659 3.841S8.621 11 6.5 11s-3.182 0-3.841-.659S2 8.621 2 6.5m11 11c0-2.121 0-3.182.659-3.841S15.379 13 17.5 13s3.182 0 3.841.659S22 15.379 22 17.5s0 3.182-.659 3.841S19.621 22 17.5 22s-3.182 0-3.841-.659S13 19.621 13 17.5m-11 0c0-2.121 0-3.182.659-3.841S4.379 13 6.5 13s3.182 0 3.841.659S11 15.379 11 17.5s0 3.182-.659 3.841S8.621 22 6.5 22s-3.182 0-3.841-.659S2 19.621 2 17.5m11-11c0-2.121 0-3.182.659-3.841S15.379 2 17.5 2s3.182 0 3.841.659S22 4.379 22 6.5s0 3.182-.659 3.841S19.621 11 17.5 11s-3.182 0-3.841-.659S13 8.621 13 6.5'/%3E%3C/svg%3E"); } .icon-\[tabler--activity\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 12h4l3 8l4-16l3 8h4'/%3E%3C/svg%3E"); } .icon-\[tabler--ad-2\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M11.933 5H5v16h13v-8m-4 4H9'/%3E%3Cpath d='M9 13h5V9H9zm6-8V3m3 3l2-2m-1 5h2'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--affiliate\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.931 6.936l1.275 4.249m5.607 5.609l4.251 1.275m-5.381-5.752l5.759-5.759M4 5.5a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0-3 0m13 0a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0-3 0m0 13a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0-3 0m-13-3a4.5 4.5 0 1 0 9 0a4.5 4.5 0 1 0-9 0'/%3E%3C/svg%3E"); } .icon-\[tabler--alert-circle\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m9-4v4m0 4h.01'/%3E%3C/svg%3E"); } .icon-\[tabler--alert-octagon\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m12.802 2.165l5.575 2.389c.48.206.863.589 1.07 1.07l2.388 5.574c.22.512.22 1.092 0 1.604l-2.389 5.575c-.206.48-.589.863-1.07 1.07l-5.574 2.388c-.512.22-1.092.22-1.604 0l-5.575-2.389a2.04 2.04 0 0 1-1.07-1.07l-2.388-5.574a2.04 2.04 0 0 1 0-1.604l2.389-5.575c.206-.48.589-.863 1.07-1.07l5.574-2.388a2.04 2.04 0 0 1 1.604 0M12 8v4m0 4h.01'/%3E%3C/svg%3E"); } .icon-\[tabler--alert-triangle\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 9v4m-1.637-9.409L2.257 17.125a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87L13.637 3.59a1.914 1.914 0 0 0-3.274 0zM12 16h.01'/%3E%3C/svg%3E"); } .icon-\[tabler--apps\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zm0 10a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zm10 0a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1zm0-8h6m-3-3v6'/%3E%3C/svg%3E"); } .icon-\[tabler--archive\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2m2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8m-9 4h4'/%3E%3C/svg%3E"); } .icon-\[tabler--armchair\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M5 11a2 2 0 0 1 2 2v2h10v-2a2 2 0 1 1 4 0v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2'/%3E%3Cpath d='M5 11V6a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v5M6 19v2m12-2v2'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--arrow-back\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 11l-4 4l4 4m-4-4h11a4 4 0 0 0 0-8h-1'/%3E%3C/svg%3E"); } .icon-\[tabler--arrow-down\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 5v14m6-6l-6 6m-6-6l6 6'/%3E%3C/svg%3E"); } .icon-\[tabler--arrow-left\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14M5 12l6 6m-6-6l6-6'/%3E%3C/svg%3E"); } .icon-\[tabler--arrow-loop-left\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M13 21V8a4 4 0 1 1 4 4H4'/%3E%3Cpath d='m8 16l-4-4l4-4'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--arrow-narrow-right\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14m-4 4l4-4m-4-4l4 4'/%3E%3C/svg%3E"); } .icon-\[tabler--arrow-right\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14m-6 6l6-6m-6-6l6 6'/%3E%3C/svg%3E"); } .icon-\[tabler--arrow-up-right\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17 7L7 17M8 7h9v9'/%3E%3C/svg%3E"); } .icon-\[tabler--arrow-up\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 5v14m6-8l-6-6m-6 6l6-6'/%3E%3C/svg%3E"); } .icon-\[tabler--arrows-join-2\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 7h1.948c1.913 0 3.705.933 4.802 2.5a5.86 5.86 0 0 0 4.802 2.5H21'/%3E%3Cpath d='M3 17h1.95a5.85 5.85 0 0 0 4.798-2.5a5.85 5.85 0 0 1 4.798-2.5H20'/%3E%3Cpath d='m18 15l3-3l-3-3'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--arrows-left-right\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 17H3m3-7L3 7l3-3M3 7h18m-3 13l3-3l-3-3'/%3E%3C/svg%3E"); } .icon-\[tabler--arrows-right-left\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 7H3m15 3l3-3l-3-3M6 20l-3-3l3-3m-3 3h18'/%3E%3C/svg%3E"); } .icon-\[tabler--article\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm4 2h10M7 12h10M7 16h10'/%3E%3C/svg%3E"); } .icon-\[tabler--award\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M6 9a6 6 0 1 0 12 0A6 6 0 1 0 6 9'/%3E%3Cpath d='m12 15l3.4 5.89l1.598-3.233l3.598.232l-3.4-5.889M6.802 12l-3.4 5.89L7 17.657l1.598 3.232l3.4-5.889'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--ball-basketball\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m2.65-6.35l12.7 12.7m-12.7 0l12.7-12.7'/%3E%3Cpath d='M12 3a9 9 0 0 0 9 9M3 12a9 9 0 0 1 9 9'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--ban\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m2.7-6.3l12.6 12.6'/%3E%3C/svg%3E"); } .icon-\[tabler--barrier-block\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zm3 8v4m.5-4l9-9m-3 9L20 9.5m-16 4L10.5 7m6.5 9v4M5 20h4m6 0h4M17 7V5M7 7V5'/%3E%3C/svg%3E"); } .icon-\[tabler--bell\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6M9 17v1a3 3 0 0 0 6 0v-1'/%3E%3C/svg%3E"); } .icon-\[tabler--book-download\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 20H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12v5'/%3E%3Cpath d='M13 16H6a2 2 0 0 0-2 2m11 1l3 3l3-3m-3 3v-9'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--book\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0M3 6v13m9-13v13m9-13v13'/%3E%3C/svg%3E"); } .icon-\[tabler--box\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m12 3l8 4.5v9L12 21l-8-4.5v-9zm0 9l8-4.5M12 12v9m0-9L4 7.5'/%3E%3C/svg%3E"); } .icon-\[tabler--brand-android\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 10v6m16-6v6M7 9h10v8a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1za5 5 0 0 1 10 0M8 3l1 2m7-2l-1 2M9 18v3m6-3v3'/%3E%3C/svg%3E"); } .icon-\[tabler--brand-angular\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m5.428 17.245l6.076 3.471a1 1 0 0 0 .992 0l6.076-3.471a1 1 0 0 0 .495-.734l1.323-9.704a1 1 0 0 0-.658-1.078l-7.4-2.612a1 1 0 0 0-.665 0L4.268 5.73a1 1 0 0 0-.658 1.078l1.323 9.704a1 1 0 0 0 .495.734z'/%3E%3Cpath d='m9 15l3-8l3 8m-5-2h4'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--brand-apple-filled\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m15.079 5.999l.239.012c1.43.097 3.434 1.013 4.508 2.586a1 1 0 0 1-.344 1.44c-.05.028-.372.158-.497.217a4 4 0 0 0-.722.431c-.614.461-.948 1.009-.942 1.694c.01.885.339 1.454.907 1.846c.208.143.436.253.666.33c.126.043.426.116.444.122a1 1 0 0 1 .662.942C20 18.24 16.96 22 14.714 22c-.79 0-1.272-.091-1.983-.315l-.098-.031c-.463-.146-.702-.192-1.133-.192c-.52 0-.863.06-1.518.237l-.197.053c-.575.153-.964.226-1.5.248C5.536 22 3 16.907 3 12.928c0-3.87 1.786-6.92 5.286-6.92q.444.002.909.128c.403.107.774.26 1.296.508c.787.374.948.44 1.009.44h.016c.03-.003.128-.047 1.056-.457c1.061-.467 1.864-.685 2.746-.616l-.24-.012zM14 1a1 1 0 0 1 1 1a3 3 0 0 1-3 3a1 1 0 0 1-1-1a3 3 0 0 1 3-3'/%3E%3C/svg%3E"); } .icon-\[tabler--brand-aws\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17 18.5a15.2 15.2 0 0 1-7.37 1.44A14.6 14.6 0 0 1 3 17m16.5 4c.907-1.411 1.451-3.323 1.5-5c-1.197-.773-2.577-.935-4-1M3 11V6.5a1.5 1.5 0 0 1 3 0V11M3 9h3m3-4l1.2 6L12 7l1.8 4L15 5m3 5.25c0 .414.336.75.75.75H20a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1h-1a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1.25a.75.75 0 0 1 .75.75'/%3E%3C/svg%3E"); } .icon-\[tabler--brand-cashapp\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17.1 8.648a.57.57 0 0 1-.761.011a5.68 5.68 0 0 0-3.659-1.34c-1.102 0-2.205.363-2.205 1.374c0 1.023 1.182 1.364 2.546 1.875c2.386.796 4.363 1.796 4.363 4.137c0 2.545-1.977 4.295-5.204 4.488l-.295 1.364a.56.56 0 0 1-.546.443H9.305l-.102-.011a.57.57 0 0 1-.432-.67l.318-1.444a7.4 7.4 0 0 1-3.273-1.784v-.011a.545.545 0 0 1 0-.773l1.137-1.102c.214-.2.547-.2.761 0a5.5 5.5 0 0 0 3.852 1.5c1.478 0 2.466-.625 2.466-1.614s-1-1.25-2.886-1.954c-2-.716-3.898-1.728-3.898-4.091c0-2.75 2.284-4.091 4.989-4.216l.284-1.398A.545.545 0 0 1 13.066 3h2.023l.114.012a.544.544 0 0 1 .42.647l-.307 1.557a8.5 8.5 0 0 1 2.818 1.58l.023.022c.216.228.216.569 0 .773z'/%3E%3C/svg%3E"); } .icon-\[tabler--brand-discord\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M8 12a1 1 0 1 0 2 0a1 1 0 0 0-2 0m6 0a1 1 0 1 0 2 0a1 1 0 0 0-2 0'/%3E%3Cpath d='M15.5 17c0 1 1.5 3 2 3c1.5 0 2.833-1.667 3.5-3c.667-1.667.5-5.833-1.5-11.5c-1.457-1.015-3-1.34-4.5-1.5l-.972 1.923a11.9 11.9 0 0 0-4.053 0L9 4c-1.5.16-3.043.485-4.5 1.5c-2 5.667-2.167 9.833-1.5 11.5c.667 1.333 2 3 3.5 3c.5 0 2-2 2-3'/%3E%3Cpath d='M7 16.5c3.5 1 6.5 1 10 0'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--brand-facebook\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 10v4h3v7h4v-7h3l1-4h-4V8a1 1 0 0 1 1-1h3V3h-3a5 5 0 0 0-5 5v2z'/%3E%3C/svg%3E"); } .icon-\[tabler--brand-firebase\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m4.53 17.05l6.15-11.72h-.02c.38-.74 1.28-1.02 2.01-.63c.26.14.48.36.62.62l1.06 2.01'/%3E%3Cpath d='M15.47 6.45c.58-.59 1.53-.59 2.11-.01c.22.22.36.5.41.81l1.5 9.11c.1.62-.2 1.24-.76 1.54l-6.07 2.9c-.46.25-1.01.26-1.46 0l-6.02-2.92c-.55-.31-.85-.92-.75-1.54L6.39 4.3c.12-.82.89-1.38 1.7-1.25c.46.07.87.36 1.09.77l1.24 1.76m-5.85 11.6L15.5 6.5'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--brand-github\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2c2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2a4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6c-.6.6-.6 1.2-.5 2V21'/%3E%3C/svg%3E"); } .icon-\[tabler--brand-google-analytics\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 10.105A1.105 1.105 0 0 1 11.105 9h1.79A1.105 1.105 0 0 1 14 10.105v9.79A1.105 1.105 0 0 1 12.895 21h-1.79A1.105 1.105 0 0 1 10 19.895zm7-6A1.105 1.105 0 0 1 18.105 3h1.79A1.105 1.105 0 0 1 21 4.105v15.79A1.105 1.105 0 0 1 19.895 21h-1.79A1.105 1.105 0 0 1 17 19.895zM3 19a2 2 0 1 0 4 0a2 2 0 1 0-4 0'/%3E%3C/svg%3E"); } .icon-\[tabler--brand-google\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20.945 11a9 9 0 1 1-3.284-5.997l-2.655 2.392A5.5 5.5 0 1 0 17.125 14H13v-3z'/%3E%3C/svg%3E"); } .icon-\[tabler--brand-hipchat\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M17.802 17.292s.077-.055.2-.149c1.843-1.425 3-3.49 3-5.789c0-4.286-4.03-7.764-9-7.764s-9 3.478-9 7.764c0 4.288 4.03 7.646 9 7.646q.636 0 2.088-.084c1.262.82 3.104 1.493 4.716 1.493c.499 0 .734-.41.414-.828c-.486-.596-1.156-1.551-1.416-2.29z'/%3E%3Cpath d='M7.5 13.5c2.5 2.5 6.5 2.5 9 0'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--brand-html5\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m20 4l-2 14.5l-6 2l-6-2L4 4z'/%3E%3Cpath d='M15.5 8h-7l.5 4h6l-.5 3.5l-2.5.75l-2.5-.75l-.1-.5'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--brand-instagram\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M4 8a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4z'/%3E%3Cpath d='M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0m7.5-4.5v.01'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--brand-linkedin\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M8 11v5m0-8v.01M12 16v-5m4 5v-3a2 2 0 1 0-4 0'/%3E%3Cpath d='M3 7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4z'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--brand-mastercard\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M11 12a3 3 0 1 0 6 0a3 3 0 1 0-6 0'/%3E%3Cpath d='M12 9.765a3 3 0 1 0 0 4.47'/%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--brand-paypal\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 13h2.5c2.5 0 5-2.5 5-5c0-3-1.9-5-5-5H7c-.5 0-1 .5-1 1L4 18c0 .5.5 1 1 1h2.8L9 14c.1-.6.4-1 1-1m7.5-5.8C19.2 8.2 20 10 20 12c0 2.5-2.5 4.5-5 4.5h-2.6l-.6 3.6a1 1 0 0 1-1 .8H8.1a.5.5 0 0 1-.5-.6l.2-1.4'/%3E%3C/svg%3E"); } .icon-\[tabler--brand-react\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M6.306 8.711C3.704 9.434 2 10.637 2 12c0 2.21 4.477 4 10 4c.773 0 1.526-.035 2.248-.102m3.444-.609C20.295 14.567 22 13.363 22 12c0-2.21-4.477-4-10-4c-.773 0-1.526.035-2.25.102'/%3E%3Cpath d='M6.305 15.287C5.629 17.902 5.82 19.98 7 20.66c1.913 1.105 5.703-1.877 8.464-6.66q.581-1.007 1.036-2m1.194-3.284C18.371 6.1 18.181 4.02 17 3.34C15.087 2.235 11.297 5.217 8.536 10c-.387.67-.733 1.34-1.037 2'/%3E%3Cpath d='M12 5.424C10.075 3.532 8.18 2.658 7 3.34C5.087 4.444 5.774 9.217 8.536 14c.386.67.793 1.304 1.212 1.896M12 18.574c1.926 1.893 3.821 2.768 5 2.086c1.913-1.104 1.226-5.877-1.536-10.66q-.563-.976-1.212-1.897M11.5 12.866a1 1 0 1 0 1-1.732a1 1 0 0 0-1 1.732'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--brand-stripe\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11.453 8.056c0-.623.518-.979 1.442-.979c1.69 0 3.41.343 4.605.923l.5-4c-.948-.449-2.82-1-5.5-1c-1.895 0-3.373.087-4.5 1c-1.172.956-2 2.33-2 4c0 3.03 1.958 4.906 5 6c1.961.69 3 .743 3 1.5c0 .735-.851 1.5-2 1.5c-1.423 0-3.963-.609-5.5-1.5l-.5 4c1.321.734 3.474 1.5 6 1.5c2 0 3.957-.468 5.084-1.36C18.347 18.661 19 17.372 19 15.5c0-3.096-1.915-4.547-5-5.637c-1.646-.605-2.544-1.07-2.544-1.807z'/%3E%3C/svg%3E"); } .icon-\[tabler--brand-twitter\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M22 4.01c-1 .49-1.98.689-3 .99c-1.121-1.265-2.783-1.335-4.38-.737S11.977 6.323 12 8v1c-3.245.083-6.135-1.395-8-4c0 0-4.182 7.433 4 11c-1.872 1.247-3.739 2.088-6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58-1.04 6.522-3.723 7.651-7.742a13.8 13.8 0 0 0 .497-3.753c0-.249 1.51-2.772 1.818-4.013z'/%3E%3C/svg%3E"); } .icon-\[tabler--brand-vue\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M16.5 4L12 12L7.5 4'/%3E%3Cpath d='m3 4l9 16l9-16'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--brand-wechat\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M16.5 10c3.038 0 5.5 2.015 5.5 4.5c0 1.397-.778 2.645-2 3.47V20l-1.964-1.178A6.7 6.7 0 0 1 16.5 19c-3.038 0-5.5-2.015-5.5-4.5s2.462-4.5 5.5-4.5'/%3E%3Cpath d='M11.197 15.698c-.69.196-1.43.302-2.197.302a8 8 0 0 1-2.612-.432L4 17v-2.801C2.763 13.117 2 11.635 2 10c0-3.314 3.134-6 7-6c3.782 0 6.863 2.57 7 5.785v.233M10 8h.01M7 8h.01M15 14h.01M18 14h.01'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--brand-whatsapp\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m3 21l1.65-3.8a9 9 0 1 1 3.4 2.9z'/%3E%3Cpath d='M9 10a.5.5 0 0 0 1 0V9a.5.5 0 0 0-1 0za5 5 0 0 0 5 5h1a.5.5 0 0 0 0-1h-1a.5.5 0 0 0 0 1'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--brand-windows-filled\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M21 13v5c0 1.57-1.248 2.832-2.715 2.923l-.113.003l-.042.018a1 1 0 0 1-.336.056l-.118-.008L13 20.407V13zm-10 0v7.157l-5.3-.662C4.186 19.344 3 18.112 3 16.6V13zm0-9.158V11H3V7.4c0-1.454 1.096-2.648 2.505-2.87zM21 5.9V11h-8V3.591l4.717-.589C19.476 2.857 21 4.191 21 5.9'/%3E%3C/svg%3E"); } .icon-\[tabler--brand-x\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 4l11.733 16H20L8.267 4zm0 16l6.768-6.768m2.46-2.46L20 4'/%3E%3C/svg%3E"); } .icon-\[tabler--brand-youtube\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M2 8a4 4 0 0 1 4-4h12a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4z'/%3E%3Cpath d='m10 9l5 3l-5 3z'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--briefcase-2\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 9a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm5-2V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E"); } .icon-\[tabler--briefcase\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 9a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm5-2V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m-4 5v.01'/%3E%3Cpath d='M3 13a20 20 0 0 0 18 0'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--building-arch\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 21h18M4 21V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v15'/%3E%3Cpath d='M9 21v-8a3 3 0 0 1 6 0v8'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--building-community\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m8 9l5 5v7H8v-4m0 4H3v-7l5-5m1 1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v17h-8m0-14v.01M17 7v.01M17 11v.01M17 15v.01'/%3E%3C/svg%3E"); } .icon-\[tabler--building-cottage\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 21h18M4 21V10l2.5-4.5L12 3l5.5 2.5L20 10v11'/%3E%3Cpath d='M10 9a2 2 0 1 0 4 0a2 2 0 1 0-4 0M9 21v-5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v5'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--building-store\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 21h18M3 7v1a3 3 0 0 0 6 0V7m0 1a3 3 0 0 0 6 0V7m0 1a3 3 0 0 0 6 0V7H3l2-4h14l2 4M5 21V10.85M19 21V10.85M9 21v-4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v4'/%3E%3C/svg%3E"); } .icon-\[tabler--building\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 21h18M9 8h1m-1 4h1m-1 4h1m4-8h1m-1 4h1m-1 4h1M5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16'/%3E%3C/svg%3E"); } .icon-\[tabler--bulb\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 12h1m8-9v1m8 8h1M5.6 5.6l.7.7m12.1-.7l-.7.7M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0-1 3a2 2 0 0 1-4 0a3.5 3.5 0 0 0-1-3m.7 1h4.6'/%3E%3C/svg%3E"); } .icon-\[tabler--calendar-event\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm12-4v4M8 3v4m-4 4h16'/%3E%3Cpath d='M8 15h2v2H8z'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--calendar-time\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M11.795 21H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4'/%3E%3Cpath d='M14 18a4 4 0 1 0 8 0a4 4 0 1 0-8 0m1-15v4M7 3v4m-4 4h16'/%3E%3Cpath d='M18 16.496V18l1 1'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--calendar-week\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm12-4v4M8 3v4m-4 4h16M7 14h.013m2.997 0h.005m2.995 0h.005m3 0h.005m-3.005 3h.005m-6.01 0h.005m2.995 0h.005'/%3E%3C/svg%3E"); } .icon-\[tabler--calendar\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm12-4v4M8 3v4m-4 4h16m-9 4h1m0 0v3'/%3E%3C/svg%3E"); } .icon-\[tabler--camera\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M5 7h1a2 2 0 0 0 2-2a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2'/%3E%3Cpath d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0-6 0'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--car-crane\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 17a2 2 0 1 0 4 0a2 2 0 1 0-4 0m12 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0'/%3E%3Cpath d='M7 18h8m4 0h2v-6a5 5 0 0 0-5-5h-1l1.5 5H21m-9 6V7h3M3 17v-5h9'/%3E%3Cpath d='M4 12V6l18-3v2'/%3E%3Cpath d='M8 12V8L4 6'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--car\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M5 17a2 2 0 1 0 4 0a2 2 0 1 0-4 0m10 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0'/%3E%3Cpath d='M5 17H3v-6l2-5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0H9m-6-6h15m-6 0V6'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--caret-up-down\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m18 10l-6-6l-6 6zm0 4l-6 6l-6-6z'/%3E%3C/svg%3E"); } .icon-\[tabler--certificate\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 15a3 3 0 1 0 6 0a3 3 0 1 0-6 0'/%3E%3Cpath d='M13 17.5V22l2-1.5l2 1.5v-4.5'/%3E%3Cpath d='M10 19H5a2 2 0 0 1-2-2V7c0-1.1.9-2 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-1 1.73M6 9h12M6 12h3m-3 3h2'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--chart-bar\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 13a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm12-4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1zM9 5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1zM4 20h14'/%3E%3C/svg%3E"); } .icon-\[tabler--chart-infographic\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 7a4 4 0 1 0 8 0a4 4 0 1 0-8 0'/%3E%3Cpath d='M7 3v4h4M9 17v4m8-7v7m-4-8v8m8-9v9'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--chart-line\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 19h16M4 15l4-6l4 2l4-5l4 4'/%3E%3C/svg%3E"); } .icon-\[tabler--chart-pie-2\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 3v9h9'/%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--chart-pie\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M10 3.2A9 9 0 1 0 20.8 14a1 1 0 0 0-1-1H13a2 2 0 0 1-2-2V4a.9.9 0 0 0-1-.8'/%3E%3Cpath d='M15 3.5A9 9 0 0 1 20.5 9H16a1 1 0 0 1-1-1z'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--check\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5 12l5 5L20 7'/%3E%3C/svg%3E"); } .icon-\[tabler--checkbox\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m9 11l3 3l8-8'/%3E%3Cpath d='M20 12v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h9'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--checklist\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9.615 20H7a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8m-3 5l2 2l4-4M9 8h4m-4 4h2'/%3E%3C/svg%3E"); } .icon-\[tabler--checks\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m7 12l5 5L22 7M2 12l5 5m5-5l5-5'/%3E%3C/svg%3E"); } .icon-\[tabler--chevron-down\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9l6 6l6-6'/%3E%3C/svg%3E"); } .icon-\[tabler--chevron-left\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m15 6l-6 6l6 6'/%3E%3C/svg%3E"); } .icon-\[tabler--chevron-right\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 6l6 6l-6 6'/%3E%3C/svg%3E"); } .icon-\[tabler--chevron-up\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 15l6-6l6 6'/%3E%3C/svg%3E"); } .icon-\[tabler--chevrons-left\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m11 7l-5 5l5 5m6-10l-5 5l5 5'/%3E%3C/svg%3E"); } .icon-\[tabler--chevrons-right\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m7 7l5 5l-5 5m6-10l5 5l-5 5'/%3E%3C/svg%3E"); } .icon-\[tabler--circle-check\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0'/%3E%3Cpath d='m9 12l2 2l4-4'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--circle-dashed-letter-p\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 12h2a2 2 0 1 0 0-4h-2v8M8.56 3.69a9 9 0 0 0-2.92 1.95M3.69 8.56A9 9 0 0 0 3 12m.69 3.44a9 9 0 0 0 1.95 2.92m2.92 1.95A9 9 0 0 0 12 21m3.44-.69a9 9 0 0 0 2.92-1.95m1.95-2.92A9 9 0 0 0 21 12m-.69-3.44a9 9 0 0 0-1.95-2.92m-2.92-1.95A9 9 0 0 0 12 3'/%3E%3C/svg%3E"); } .icon-\[tabler--circle-filled\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M7 3.34a10 10 0 1 1-4.995 8.984L2 12l.005-.324A10 10 0 0 1 7 3.34'/%3E%3C/svg%3E"); } .icon-\[tabler--circle-plus\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m6 0h6m-3-3v6'/%3E%3C/svg%3E"); } .icon-\[tabler--circle-x-filled\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M17 3.34a10 10 0 1 1-14.995 8.984L2 12l.005-.324A10 10 0 0 1 17 3.34m-6.489 5.8a1 1 0 0 0-1.218 1.567L10.585 12l-1.292 1.293l-.083.094a1 1 0 0 0 1.497 1.32L12 13.415l1.293 1.292l.094.083a1 1 0 0 0 1.32-1.497L13.415 12l1.292-1.293l.083-.094a1 1 0 0 0-1.497-1.32L12 10.585l-1.293-1.292l-.094-.083z'/%3E%3C/svg%3E"); } .icon-\[tabler--circle-x\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m7-2l4 4m0-4l-4 4'/%3E%3C/svg%3E"); } .icon-\[tabler--circle\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0'/%3E%3C/svg%3E"); } .icon-\[tabler--clipboard-copy\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h3m9-9V7a2 2 0 0 0-2-2h-2m-2 12v-1a1 1 0 0 1 1-1h1m3 0h1a1 1 0 0 1 1 1v1m0 3v1a1 1 0 0 1-1 1h-1m-3 0h-1a1 1 0 0 1-1-1v-1'/%3E%3Cpath d='M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--clock\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--cloud-upload\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M7 18a4.6 4.4 0 0 1 0-9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1'/%3E%3Cpath d='m9 15l3-3l3 3m-3-3v9'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--code\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m7 8l-4 4l4 4m10-8l4 4l-4 4M14 4l-4 16'/%3E%3C/svg%3E"); } .icon-\[tabler--coins\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M9 14c0 1.657 2.686 3 6 3s6-1.343 6-3s-2.686-3-6-3s-6 1.343-6 3'/%3E%3Cpath d='M9 14v4c0 1.656 2.686 3 6 3s6-1.344 6-3v-4M3 6c0 1.072 1.144 2.062 3 2.598s4.144.536 6 0S15 7.072 15 6s-1.144-2.062-3-2.598s-4.144-.536-6 0S3 4.928 3 6'/%3E%3Cpath d='M3 6v10c0 .888.772 1.45 2 2'/%3E%3Cpath d='M3 11c0 .888.772 1.45 2 2'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--color-swatch\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M19 3h-4a2 2 0 0 0-2 2v12a4 4 0 0 0 8 0V5a2 2 0 0 0-2-2'/%3E%3Cpath d='m13 7.35l-2-2a2 2 0 0 0-2.828 0L5.344 8.178a2 2 0 0 0 0 2.828l9 9'/%3E%3Cpath d='M7.3 13H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h12m0-4v.01'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--confetti\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 5h2M5 4v2m6.5-2L11 6m7-1h2m-1-1v2m-4 3l-1 1m4 3l2-.5M18 19h2m-1-1v2m-5-3.482L7.482 10l-4.39 9.58a1 1 0 0 0 1.329 1.329z'/%3E%3C/svg%3E"); } .icon-\[tabler--copy-check\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M7 9.667A2.667 2.667 0 0 1 9.667 7h8.666A2.667 2.667 0 0 1 21 9.667v8.666A2.667 2.667 0 0 1 18.333 21H9.667A2.667 2.667 0 0 1 7 18.333z'/%3E%3Cpath d='M4.012 16.737A2 2 0 0 1 3 15V5c0-1.1.9-2 2-2h10c.75 0 1.158.385 1.5 1M11 14l2 2l4-4'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--copy\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M7 9.667A2.667 2.667 0 0 1 9.667 7h8.666A2.667 2.667 0 0 1 21 9.667v8.666A2.667 2.667 0 0 1 18.333 21H9.667A2.667 2.667 0 0 1 7 18.333z'/%3E%3Cpath d='M4.012 16.737A2 2 0 0 1 3 15V5c0-1.1.9-2 2-2h10c.75 0 1.158.385 1.5 1'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--corner-left-down\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 6h-6a3 3 0 0 0-3 3v10l-4-4m8 0l-4 4'/%3E%3C/svg%3E"); } .icon-\[tabler--credit-card-pay\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 19H6a3 3 0 0 1-3-3V8a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v4.5M3 10h18m-5 9h6m-3-3l3 3l-3 3M7.005 15h.005M11 15h2'/%3E%3C/svg%3E"); } .icon-\[tabler--credit-card\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 8a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm0 2h18M7 15h.01M11 15h2'/%3E%3C/svg%3E"); } .icon-\[tabler--crown\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m12 6l4 6l5-4l-2 10H5L3 8l5 4z'/%3E%3C/svg%3E"); } .icon-\[tabler--cube\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 16.008V7.99a1.98 1.98 0 0 0-1-1.717l-7-4.008a2.02 2.02 0 0 0-2 0L4 6.273c-.619.355-1 1.01-1 1.718v8.018c0 .709.381 1.363 1 1.717l7 4.008a2.02 2.02 0 0 0 2 0l7-4.008c.619-.355 1-1.01 1-1.718M12 22V12m0 0l8.73-5.04m-17.46 0L12 12'/%3E%3C/svg%3E"); } .icon-\[tabler--currency-dollar\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M16.7 8A3 3 0 0 0 14 6h-4a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6h-4a3 3 0 0 1-2.7-2M12 3v3m0 12v3'/%3E%3C/svg%3E"); } .icon-\[tabler--current-location-filled\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 1a1 1 0 0 1 1 1v1.055A9.004 9.004 0 0 1 20.946 11H22a1 1 0 0 1 0 2h-1.055a9.004 9.004 0 0 1-7.944 7.945L13 22a1 1 0 0 1-2 0v-1.055a9.004 9.004 0 0 1-7.945-7.944L2 13a1 1 0 0 1 0-2h1.055A9.004 9.004 0 0 1 11 3.055V2a1 1 0 0 1 1-1m0 4a7 7 0 1 0 0 14a7 7 0 0 0 0-14m0 3a4 4 0 1 1-4 4l.005-.2A4 4 0 0 1 12 8'/%3E%3C/svg%3E"); } .icon-\[tabler--current-location\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M9 12a3 3 0 1 0 6 0a3 3 0 1 0-6 0'/%3E%3Cpath d='M4 12a8 8 0 1 0 16 0a8 8 0 1 0-16 0m8-10v2m0 16v2m8-10h2M2 12h2'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--dashboard\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M10 13a2 2 0 1 0 4 0a2 2 0 1 0-4 0m3.45-1.45L15.5 9.5'/%3E%3Cpath d='M6.4 20a9 9 0 1 1 11.2 0z'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--database\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M4 6a8 3 0 1 0 16 0A8 3 0 1 0 4 6'/%3E%3Cpath d='M4 6v6a8 3 0 0 0 16 0V6'/%3E%3Cpath d='M4 12v6a8 3 0 0 0 16 0v-6'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--device-desktop-analytics\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 5a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm4 15h10m-8-4v4m6-4v4m-6-8V8m3 4v-1m3 1v-2m-3 2v-1'/%3E%3C/svg%3E"); } .icon-\[tabler--device-desktop\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 5a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm4 15h10m-8-4v4m6-4v4'/%3E%3C/svg%3E"); } .icon-\[tabler--device-laptop\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 19h18M5 7a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); } .icon-\[tabler--device-mobile\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2zm5-1h2m-1 13v.01'/%3E%3C/svg%3E"); } .icon-\[tabler--device-tablet\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M5 4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z'/%3E%3Cpath d='M11 17a1 1 0 1 0 2 0a1 1 0 0 0-2 0'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--device-watch-filled\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M15 2a1 1 0 0 1 1 1v2.126c1.726.445 3 2.01 3 3.874v6a4 4 0 0 1-3 3.874V21a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2.126A4 4 0 0 1 5 15V9a4 4 0 0 1 3-3.874V3a1 1 0 0 1 1-1zm-1 17h-4v1h4zm0-15h-4v1h4z'/%3E%3C/svg%3E"); } .icon-\[tabler--devices\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M13 9a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1z'/%3E%3Cpath d='M18 8V5a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h9m3-9h2'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--diamond\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M6 5h12l3 5l-8.5 9.5a.7.7 0 0 1-1 0L3 10z'/%3E%3Cpath d='M10 12L8 9.8l.6-1'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--diamonds-filled\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 2.005c-.777 0-1.508.367-1.971.99L4.667 9.89c-.89 1.136-.89 3.083 0 4.227l5.375 6.911a2.457 2.457 0 0 0 3.93-.017l5.361-6.894c.89-1.136.89-3.083 0-4.227l-5.375-6.911A2.45 2.45 0 0 0 12 2.005'/%3E%3C/svg%3E"); } .icon-\[tabler--discount-2\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m9 15l6-6'/%3E%3Ccircle cx='9.5' cy='9.5' r='.5' fill='black'/%3E%3Ccircle cx='14.5' cy='14.5' r='.5' fill='black'/%3E%3Cpath d='M5 7.2A2.2 2.2 0 0 1 7.2 5h1a2.2 2.2 0 0 0 1.55-.64l.7-.7a2.2 2.2 0 0 1 3.12 0l.7.7a2.2 2.2 0 0 0 1.55.64h1a2.2 2.2 0 0 1 2.2 2.2v1a2.2 2.2 0 0 0 .64 1.55l.7.7a2.2 2.2 0 0 1 0 3.12l-.7.7a2.2 2.2 0 0 0-.64 1.55v1a2.2 2.2 0 0 1-2.2 2.2h-1a2.2 2.2 0 0 0-1.55.64l-.7.7a2.2 2.2 0 0 1-3.12 0l-.7-.7a2.2 2.2 0 0 0-1.55-.64h-1a2.2 2.2 0 0 1-2.2-2.2v-1a2.2 2.2 0 0 0-.64-1.55l-.7-.7a2.2 2.2 0 0 1 0-3.12l.7-.7A2.2 2.2 0 0 0 5 8.2z'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--discount-check\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M5 7.2A2.2 2.2 0 0 1 7.2 5h1a2.2 2.2 0 0 0 1.55-.64l.7-.7a2.2 2.2 0 0 1 3.12 0l.7.7c.412.41.97.64 1.55.64h1a2.2 2.2 0 0 1 2.2 2.2v1c0 .58.23 1.138.64 1.55l.7.7a2.2 2.2 0 0 1 0 3.12l-.7.7a2.2 2.2 0 0 0-.64 1.55v1a2.2 2.2 0 0 1-2.2 2.2h-1a2.2 2.2 0 0 0-1.55.64l-.7.7a2.2 2.2 0 0 1-3.12 0l-.7-.7a2.2 2.2 0 0 0-1.55-.64h-1a2.2 2.2 0 0 1-2.2-2.2v-1a2.2 2.2 0 0 0-.64-1.55l-.7-.7a2.2 2.2 0 0 1 0-3.12l.7-.7A2.2 2.2 0 0 0 5 8.2z'/%3E%3Cpath d='m9 12l2 2l4-4'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--discount\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m9 15l6-6'/%3E%3Ccircle cx='9.5' cy='9.5' r='.5' fill='black'/%3E%3Ccircle cx='14.5' cy='14.5' r='.5' fill='black'/%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--door-enter\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 12v.01M3 21h18M5 21V5a2 2 0 0 1 2-2h6m4 10.5V21m4-14h-7m3-3l-3 3l3 3'/%3E%3C/svg%3E"); } .icon-\[tabler--dots-vertical\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0m0 7a1 1 0 1 0 2 0a1 1 0 1 0-2 0m0-14a1 1 0 1 0 2 0a1 1 0 1 0-2 0'/%3E%3C/svg%3E"); } .icon-\[tabler--dots\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0'/%3E%3C/svg%3E"); } .icon-\[tabler--download\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 11l5 5l5-5m-5-7v12'/%3E%3C/svg%3E"); } .icon-\[tabler--edit\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M7 7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-1'/%3E%3Cpath d='M20.385 6.585a2.1 2.1 0 0 0-2.97-2.97L9 12v3h3zM16 5l3 3'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--exchange\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 18a2 2 0 1 0 4 0a2 2 0 1 0-4 0M17 6a2 2 0 1 0 4 0a2 2 0 1 0-4 0'/%3E%3Cpath d='M19 8v5a5 5 0 0 1-5 5h-3l3-3m0 6l-3-3m-6-2v-5a5 5 0 0 1 5-5h3l-3-3m0 6l3-3'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--external-link\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6m-7 1l9-9m-5 0h5v5'/%3E%3C/svg%3E"); } .icon-\[tabler--eye-off\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M10.585 10.587a2 2 0 0 0 2.829 2.828'/%3E%3Cpath d='M16.681 16.673A8.7 8.7 0 0 1 12 18q-5.4 0-9-6q1.908-3.18 4.32-4.674m2.86-1.146A9 9 0 0 1 12 6q5.4 0 9 6q-1 1.665-2.138 2.87M3 3l18 18'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--eye\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M10 12a2 2 0 1 0 4 0a2 2 0 0 0-4 0'/%3E%3Cpath d='M21 12q-3.6 6-9 6t-9-6q3.6-6 9-6t9 6'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--file-description\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2m-8-4h6m-6-4h6'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--file-excel\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2m-7-9l4 5m-4 0l4-5'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--file-horizontal\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M16 5v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M3 7v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7l-5-5H5a2 2 0 0 0-2 2'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--file-invoice\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2M9 7h1m-1 6h6m-2 4h2'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--file-search\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M12 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v4.5'/%3E%3Cpath d='M14 17.5a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0-5 0m4.5 2L21 22'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--file-text\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2M9 9h1m-1 4h6m-6 4h6'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--file-type-csv\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M5 12V5a2 2 0 0 1 2-2h7l5 5v4M7 16.5a1.5 1.5 0 0 0-3 0v3a1.5 1.5 0 0 0 3 0m3 .75c0 .414.336.75.75.75H12a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1h-1a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h1.25a.75.75 0 0 1 .75.75m3-.75l2 6l2-6'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--file-type-pdf\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M5 12V5a2 2 0 0 1 2-2h7l5 5v4M5 18h1.5a1.5 1.5 0 0 0 0-3H5v6m12-3h2m1-3h-3v6m-6-6v6h1a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2z'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--file-upload\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2m-5-10v6'/%3E%3Cpath d='M9.5 13.5L12 11l2.5 2.5'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--file\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--files\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M15 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M18 17h-7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4l5 5v7a2 2 0 0 1-2 2'/%3E%3Cpath d='M16 17v2a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h2'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--filter\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 4h16v2.172a2 2 0 0 1-.586 1.414L15 12v7l-6 2v-8.5L4.52 7.572A2 2 0 0 1 4 6.227z'/%3E%3C/svg%3E"); } .icon-\[tabler--flag\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 5a5 5 0 0 1 7 0a5 5 0 0 0 7 0v9a5 5 0 0 1-7 0a5 5 0 0 0-7 0zm0 16v-7'/%3E%3C/svg%3E"); } .icon-\[tabler--flare-filled\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M11.106 2.553a1 1 0 0 1 1.788 0l2.851 5.701l5.702 2.852a1 1 0 0 1 .11 1.725l-.11.063l-5.702 2.851l-2.85 5.702a1 1 0 0 1-1.726.11l-.063-.11l-2.852-5.702l-5.701-2.85a1 1 0 0 1-.11-1.726l.11-.063l5.701-2.852z'/%3E%3C/svg%3E"); } .icon-\[tabler--folder-plus\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 19H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h4l3 3h7a2 2 0 0 1 2 2v3.5M16 19h6m-3-3v6'/%3E%3C/svg%3E"); } .icon-\[tabler--folder\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); } .icon-\[tabler--gift-card\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 8a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3z'/%3E%3Cpath d='m7 16l3-3l3 3m-5-3c-.789 0-2-.672-2-1.5S6.711 10 7.5 10c1.128-.02 2.077 1.17 2.5 3c.423-1.83 1.372-3.02 2.5-3c.789 0 1.5.672 1.5 1.5S12.789 13 12 13z'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--gift\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 9a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm9-1v13'/%3E%3Cpath d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7m2.5-4a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--grid-dots\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 5a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0M4 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0M4 19a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0'/%3E%3C/svg%3E"); } .icon-\[tabler--hand-click\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M8 13V4.5a1.5 1.5 0 0 1 3 0V12m0-.5v-2a1.5 1.5 0 0 1 3 0V12m0-1.5a1.5 1.5 0 0 1 3 0V12'/%3E%3Cpath d='M17 11.5a1.5 1.5 0 0 1 3 0V16a6 6 0 0 1-6 6h-2h.208a6 6 0 0 1-5.012-2.7L7 19q-.468-.718-3.286-5.728a1.5 1.5 0 0 1 .536-2.022a1.87 1.87 0 0 1 2.28.28L8 13M5 3L4 2m0 5H3m11-4l1-1m0 4h1'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--hanger\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14 6a2 2 0 1 0-4 0c0 1.667.67 3 2 4h-.008l7.971 4.428a2 2 0 0 1 1.029 1.749V17a2 2 0 0 1-2 2h-14a2 2 0 0 1-2-2v-.823a2 2 0 0 1 1.029-1.749L11.992 10'/%3E%3C/svg%3E"); } .icon-\[tabler--headphones\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M4 15a2 2 0 0 1 2-2h1a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm11 0a2 2 0 0 1 2-2h1a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2z'/%3E%3Cpath d='M4 15v-3a8 8 0 0 1 16 0v3'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--heart-filled\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M6.979 3.074a6 6 0 0 1 4.988 1.425l.037.033l.034-.03a6 6 0 0 1 4.733-1.44l.246.036a6 6 0 0 1 3.364 10.008l-.18.185l-.048.041l-7.45 7.379a1 1 0 0 1-1.313.082l-.094-.082l-7.493-7.422A6 6 0 0 1 6.979 3.074'/%3E%3C/svg%3E"); } .icon-\[tabler--heart-rate-monitor\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 5a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm4 15h10m-8-4v4m6-4v4'/%3E%3Cpath d='M7 10h2l2 3l2-6l1 3h3'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--heart\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19.5 12.572L12 20l-7.5-7.428A5 5 0 1 1 12 6.006a5 5 0 1 1 7.5 6.572'/%3E%3C/svg%3E"); } .icon-\[tabler--help-circle\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m9 4v.01'/%3E%3Cpath d='M12 13a2 2 0 0 0 .914-3.782a1.98 1.98 0 0 0-2.414.483'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--help\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m9 5v.01'/%3E%3Cpath d='M12 13.5a1.5 1.5 0 0 1 1-1.5a2.6 2.6 0 1 0-3-4'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--home-2\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M5 12H3l9-9l9 9h-2M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M10 12h4v4h-4z'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--home\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M5 12H3l9-9l9 9h-2M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M9 21v-6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v6'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--id-badge\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M5 6a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3z'/%3E%3Cpath d='M10 13a2 2 0 1 0 4 0a2 2 0 1 0-4 0m0-7h4M9 18h6'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--infinity\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9.828 9.172a4 4 0 1 0 0 5.656A10 10 0 0 0 12 12a10 10 0 0 1 2.172-2.828a4 4 0 1 1 0 5.656A10 10 0 0 1 12 12a10 10 0 0 0-2.172-2.828'/%3E%3C/svg%3E"); } .icon-\[tabler--info-circle\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m9-3h.01'/%3E%3Cpath d='M11 12h1v4h1'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--key-off\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10.17 6.159l2.316-2.316a2.877 2.877 0 0 1 4.069 0l3.602 3.602a2.877 2.877 0 0 1 0 4.069l-2.33 2.33m-2.896 1.104a2.86 2.86 0 0 1-1.486-.79l-.301-.302l-6.558 6.558a2 2 0 0 1-1.239.578L5.172 21H4a1 1 0 0 1-.993-.883L3 20v-1.172a2 2 0 0 1 .467-1.284l.119-.13L4 17h2v-2h2v-2l2.144-2.144l-.301-.301a2.86 2.86 0 0 1-.794-1.504M15 9h.01M3 3l18 18'/%3E%3C/svg%3E"); } .icon-\[tabler--language\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M9 6.371C9 10.789 6.761 13 4 13m0-6.629h7'/%3E%3Cpath d='M5 9c0 2.144 2.252 3.908 6 4m1 7l4-9l4 9m-.9-2h-6.2M6.694 3l.793.582'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--layers-intersect\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M8 6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2z'/%3E%3Cpath d='M4 10a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--layout-grid-add\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zm10 0a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1zM4 15a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zm10 2h6m-3-3v6'/%3E%3C/svg%3E"); } .icon-\[tabler--layout-grid\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zm10 0a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1zM4 15a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zm10 0a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); } .icon-\[tabler--layout-sidebar\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm5-2v16'/%3E%3C/svg%3E"); } .icon-\[tabler--lifebuoy\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M8 12a4 4 0 1 0 8 0a4 4 0 1 0-8 0'/%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m12 3l3.35 3.35M9 15l-3.35 3.35m0-12.7L9 9m9.35-3.35L15 9'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--link\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 15l6-6m-4-3l.463-.536a5 5 0 0 1 7.071 7.072L18 13m-5 5l-.397.534a5.07 5.07 0 0 1-7.127 0a4.97 4.97 0 0 1 0-7.071L6 11'/%3E%3C/svg%3E"); } .icon-\[tabler--list-check\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3.5 5.5L5 7l2.5-2.5m-4 7L5 13l2.5-2.5m-4 7L5 19l2.5-2.5M11 6h9m-9 6h9m-9 6h9'/%3E%3C/svg%3E"); } .icon-\[tabler--list-details\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 5h8m-8 4h5m-5 6h8m-8 4h5M3 5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm0 10a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); } .icon-\[tabler--list-letters\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11 6h9m-9 6h9m-9 6h9M4 10V5.5a1.5 1.5 0 0 1 3 0V10M4 8h3M4 20h1.5a1.5 1.5 0 0 0 0-3H4h1.5a1.5 1.5 0 0 0 0-3H4z'/%3E%3C/svg%3E"); } .icon-\[tabler--list-numbers\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11 6h9m-9 6h9m-8 6h8M4 16a2 2 0 1 1 4 0c0 .591-.5 1-1 1.5L4 20h4M6 10V4L4 6'/%3E%3C/svg%3E"); } .icon-\[tabler--list-search\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11 15a4 4 0 1 0 8 0a4 4 0 1 0-8 0m7.5 3.5L21 21M4 6h16M4 12h4m-4 6h4'/%3E%3C/svg%3E"); } .icon-\[tabler--list\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 6h11M9 12h11M9 18h11M5 6v.01M5 12v.01M5 18v.01'/%3E%3C/svg%3E"); } .icon-\[tabler--location\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m21 3l-6.5 18a.55.55 0 0 1-1 0L10 14l-7-3.5a.55.55 0 0 1 0-1z'/%3E%3C/svg%3E"); } .icon-\[tabler--lock-open\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M5 13a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2z'/%3E%3Cpath d='M11 16a1 1 0 1 0 2 0a1 1 0 1 0-2 0m-3-5V6a4 4 0 0 1 8 0'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--lock\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M5 13a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2z'/%3E%3Cpath d='M11 16a1 1 0 1 0 2 0a1 1 0 0 0-2 0m-3-5V7a4 4 0 1 1 8 0v4'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--login\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M15 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2'/%3E%3Cpath d='M21 12H8l3-3m0 6l-3-3'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--logout\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M14 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2'/%3E%3Cpath d='M9 12h12l-3-3m0 6l3-3'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--mail-opened\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m3 9l9 6l9-6l-9-6z'/%3E%3Cpath d='M21 9v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9m0 10l6-6m6 0l6 6'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--mail\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='m3 7l9 6l9-6'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--map-pin\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M9 11a3 3 0 1 0 6 0a3 3 0 0 0-6 0'/%3E%3Cpath d='M17.657 16.657L13.414 20.9a2 2 0 0 1-2.827 0l-4.244-4.243a8 8 0 1 1 11.314 0'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--menu-2\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E"); } .icon-\[tabler--message-2\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 9h8m-8 4h6m-5 5H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-3l-3 3z'/%3E%3C/svg%3E"); } .icon-\[tabler--message-circle-2\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 20l1.3-3.9A9 8 0 1 1 7.7 19z'/%3E%3C/svg%3E"); } .icon-\[tabler--message\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 9h8m-8 4h6m4-9a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-5l-5 3v-3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3z'/%3E%3C/svg%3E"); } .icon-\[tabler--microphone-2\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 12.9A5 5 0 1 0 11.098 9M15 12.9l-3.902-3.899l-7.513 8.584a2 2 0 1 0 2.827 2.83z'/%3E%3C/svg%3E"); } .icon-\[tabler--minus\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14'/%3E%3C/svg%3E"); } .icon-\[tabler--moneybag\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M9.5 3h5A1.5 1.5 0 0 1 16 4.5A3.5 3.5 0 0 1 12.5 8h-1A3.5 3.5 0 0 1 8 4.5A1.5 1.5 0 0 1 9.5 3'/%3E%3Cpath d='M4 17v-1a8 8 0 1 1 16 0v1a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--mood-happy\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m6-3h.01M15 9h.01'/%3E%3Cpath d='M8 13a4 4 0 1 0 8 0z'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--moon\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 3h.393a7.5 7.5 0 0 0 7.92 12.446A9 9 0 1 1 12 2.992z'/%3E%3C/svg%3E"); } .icon-\[tabler--mouse\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 7a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4zm6 0v4'/%3E%3C/svg%3E"); } .icon-\[tabler--notes\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2zm4 2h6m-6 4h6m-6 4h4'/%3E%3C/svg%3E"); } .icon-\[tabler--notification\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 6H7a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-3m-4-7a3 3 0 1 0 6 0a3 3 0 1 0-6 0'/%3E%3C/svg%3E"); } .icon-\[tabler--package\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m12 3l8 4.5v9L12 21l-8-4.5v-9zm0 9l8-4.5M12 12v9m0-9L4 7.5m12-2.25l-8 4.5'/%3E%3C/svg%3E"); } .icon-\[tabler--packages\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m7 16.5l-5-3l5-3l5 3V19l-5 3z'/%3E%3Cpath d='M2 13.5V19l5 3m0-5.455l5-3.03m5 2.985l-5-3l5-3l5 3V19l-5 3zM12 19l5 3m0-5.5l5-3m-10 0V8L7 5l5-3l5 3v5.5M7 5.03v5.455M12 8l5-3'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--palette\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 21a9 9 0 0 1 0-18c4.97 0 9 3.582 9 8c0 1.06-.474 2.078-1.318 2.828S17.693 15 16.5 15H14a2 2 0 0 0-1 3.75A1.3 1.3 0 0 1 12 21'/%3E%3Cpath d='M7.5 10.5a1 1 0 1 0 2 0a1 1 0 1 0-2 0m4-3a1 1 0 1 0 2 0a1 1 0 1 0-2 0m4 3a1 1 0 1 0 2 0a1 1 0 1 0-2 0'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--pencil\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 20h4L18.5 9.5a2.828 2.828 0 1 0-4-4L4 16zm9.5-13.5l4 4'/%3E%3C/svg%3E"); } .icon-\[tabler--percentage\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M16 17a1 1 0 1 0 2 0a1 1 0 1 0-2 0M6 7a1 1 0 1 0 2 0a1 1 0 1 0-2 0m0 11L18 6'/%3E%3C/svg%3E"); } .icon-\[tabler--phone-call\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2m10 3a2 2 0 0 1 2 2m-2-6a6 6 0 0 1 6 6'/%3E%3C/svg%3E"); } .icon-\[tabler--phone\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); } .icon-\[tabler--photo-search\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M15 8h.01M11.5 21H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v5.5'/%3E%3Cpath d='M15 18a3 3 0 1 0 6 0a3 3 0 1 0-6 0m5.2 2.2L22 22M3 16l5-5c.928-.893 2.072-.893 3 0l2 2'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--photo\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M15 8h.01M3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3z'/%3E%3Cpath d='m3 16l5-5c.928-.893 2.072-.893 3 0l5 5'/%3E%3Cpath d='m14 14l1-1c.928-.893 2.072-.893 3 0l3 3'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--plane-tilt\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14.5 6.5l3-2.9a2.05 2.05 0 0 1 2.9 2.9l-2.9 3L20 17l-2.5 2.55L14 13l-3 3v3l-2 2l-1.5-4.5L3 15l2-2h3l3-3l-6.5-3.5L7 4z'/%3E%3C/svg%3E"); } .icon-\[tabler--play\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M5 5v14a2 2 0 0 0 2.75 1.84L20 13.74a2 2 0 0 0 0-3.5L7.75 3.14A2 2 0 0 0 5 4.89' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .icon-\[tabler--playlist-add\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 8H5m0 4h9m-3 4H5m10 0h6m-3-3v6'/%3E%3C/svg%3E"); } .icon-\[tabler--plug-connected\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m7 12l5 5l-1.5 1.5a3.536 3.536 0 1 1-5-5zm10 0l-5-5l1.5-1.5a3.536 3.536 0 1 1 5 5zM3 21l2.5-2.5m13-13L21 3m-11 8l-2 2m5 1l-2 2'/%3E%3C/svg%3E"); } .icon-\[tabler--plus\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 5v14m-7-7h14'/%3E%3C/svg%3E"); } .icon-\[tabler--presentation\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 4h18M4 4v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4m-8 12v4m-3 0h6'/%3E%3Cpath d='m8 12l3-3l2 2l3-3'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--printer\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M17 17h2a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h2m10-8V5a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v4'/%3E%3Cpath d='M7 15a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2z'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--question-mark\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 8a3.5 3 0 0 1 3.5-3h1A3.5 3 0 0 1 16 8a3 3 0 0 1-2 3a3 4 0 0 0-2 4m0 4v.01'/%3E%3C/svg%3E"); } .icon-\[tabler--receipt-2\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16l-3-2l-2 2l-2-2l-2 2l-2-2z'/%3E%3Cpath d='M14 8h-2.5a1.5 1.5 0 0 0 0 3h1a1.5 1.5 0 0 1 0 3H10m2 0v1.5m0-9V8'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--receipt-refund\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16l-3-2l-2 2l-2-2l-2 2l-2-2z'/%3E%3Cpath d='M15 14v-2a2 2 0 0 0-2-2H9l2-2m0 4l-2-2'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--receipt\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16l-3-2l-2 2l-2-2l-2 2l-2-2zM9 7h6m-6 4h6m-2 4h2'/%3E%3C/svg%3E"); } .icon-\[tabler--refresh\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 11A8.1 8.1 0 0 0 4.5 9M4 5v4h4m-4 4a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4'/%3E%3C/svg%3E"); } .icon-\[tabler--repeat\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 12V9a3 3 0 0 1 3-3h13m-3-3l3 3l-3 3m3 3v3a3 3 0 0 1-3 3H4m3 3l-3-3l3-3'/%3E%3C/svg%3E"); } .icon-\[tabler--report-money\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3Cpath d='M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2m5 6h-2.5a1.5 1.5 0 0 0 0 3h1a1.5 1.5 0 0 1 0 3H10m2 0v1m0-8v1'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--report\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M8 5H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h5.697M18 14v4h4m-4-7V7a2 2 0 0 0-2-2h-2'/%3E%3Cpath d='M8 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2m6 13a4 4 0 1 0 8 0a4 4 0 1 0-8 0m-6-7h4m-4 4h3'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--rocket\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3-5a9 9 0 0 0 6-8a3 3 0 0 0-3-3a9 9 0 0 0-8 6a6 6 0 0 0-5 3'/%3E%3Cpath d='M7 14a6 6 0 0 0-3 6a6 6 0 0 0 6-3m4-8a1 1 0 1 0 2 0a1 1 0 1 0-2 0'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--rotate-clockwise-2\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 4.55a8 8 0 0 1 6 14.9M15 15v5h5M5.63 7.16v.01M4.06 11v.01m.57 4.09v.01m2.53 3.26v.01M11 19.94v.01'/%3E%3C/svg%3E"); } .icon-\[tabler--rotate-clockwise\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.05 11a8 8 0 1 1 .5 4m-.5 5v-5h5'/%3E%3C/svg%3E"); } .icon-\[tabler--rotate\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19.95 11a8 8 0 1 0-.5 4m.5 5v-5h-5'/%3E%3C/svg%3E"); } .icon-\[tabler--run\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 4a1 1 0 1 0 2 0a1 1 0 1 0-2 0M4 17l5 1l.75-1.5M15 21v-4l-4-3l1-6'/%3E%3Cpath d='M7 12V9l5-1l3 3l3 1'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--sailboat\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 20a2.4 2.4 0 0 0 2 1a2.4 2.4 0 0 0 2-1a2.4 2.4 0 0 1 2-1a2.4 2.4 0 0 1 2 1a2.4 2.4 0 0 0 2 1a2.4 2.4 0 0 0 2-1a2.4 2.4 0 0 1 2-1a2.4 2.4 0 0 1 2 1a2.4 2.4 0 0 0 2 1a2.4 2.4 0 0 0 2-1M4 18l-1-3h18l-1 3m-9-6h7l-7-9zM8 7l-2 5'/%3E%3C/svg%3E"); } .icon-\[tabler--scale\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 20h10M6 6l6-1l6 1m-6-3v17m-3-8L6 6l-3 6a3 3 0 0 0 6 0m12 0l-3-6l-3 6a3 3 0 0 0 6 0'/%3E%3C/svg%3E"); } .icon-\[tabler--school\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M22 9L12 5L2 9l10 4zv6'/%3E%3Cpath d='M6 10.6V16a6 3 0 0 0 12 0v-5.4'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--screen-share\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 12v3a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h9M7 20h10m-8-4v4m6-4v4m2-16h4v4m-5 1l5-5'/%3E%3C/svg%3E"); } .icon-\[tabler--search\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 10a7 7 0 1 0 14 0a7 7 0 1 0-14 0m18 11l-6-6'/%3E%3C/svg%3E"); } .icon-\[tabler--send\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 14L21 3m0 0l-6.5 18a.55.55 0 0 1-1 0L10 14l-7-3.5a.55.55 0 0 1 0-1z'/%3E%3C/svg%3E"); } .icon-\[tabler--settings\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065'/%3E%3Cpath d='M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--share-3\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 4v4C6.425 9.028 3.98 14.788 3 20c-.037.206 5.384-5.962 10-6v4l8-7z'/%3E%3C/svg%3E"); } .icon-\[tabler--share\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 12a3 3 0 1 0 6 0a3 3 0 1 0-6 0m12-6a3 3 0 1 0 6 0a3 3 0 1 0-6 0m0 12a3 3 0 1 0 6 0a3 3 0 1 0-6 0m-6.3-7.3l6.6-3.4m-6.6 6l6.6 3.4'/%3E%3C/svg%3E"); } .icon-\[tabler--shield-check-filled\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m11.998 2l.118.007l.059.008l.061.013l.111.034a1 1 0 0 1 .217.112l.104.082l.255.218a11 11 0 0 0 7.189 2.537l.342-.01a1 1 0 0 1 1.005.717a13 13 0 0 1-9.208 16.25a1 1 0 0 1-.502 0A13 13 0 0 1 2.54 5.718a1 1 0 0 1 1.005-.717a11 11 0 0 0 7.531-2.527l.263-.225l.096-.075a1 1 0 0 1 .217-.112l.112-.034a1 1 0 0 1 .119-.021zm3.71 7.293a1 1 0 0 0-1.415 0L11 12.585l-1.293-1.292l-.094-.083a1 1 0 0 0-1.32 1.497l2 2l.094.083a1 1 0 0 0 1.32-.083l4-4l.083-.094a1 1 0 0 0-.083-1.32z'/%3E%3C/svg%3E"); } .icon-\[tabler--shield-check\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11.46 20.846A12 12 0 0 1 3.5 6A12 12 0 0 0 12 3a12 12 0 0 0 8.5 3a12 12 0 0 1-.09 7.06M15 19l2 2l4-4'/%3E%3C/svg%3E"); } .icon-\[tabler--shield-checkered\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 3a12 12 0 0 0 8.5 3A12 12 0 0 1 12 21A12 12 0 0 1 3.5 6A12 12 0 0 0 12 3m0 0v18m-8.5-9h17'/%3E%3C/svg%3E"); } .icon-\[tabler--shield-chevron\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 3a12 12 0 0 0 8.5 3A12 12 0 0 1 12 21A12 12 0 0 1 3.5 6A12 12 0 0 0 12 3'/%3E%3Cpath d='m4 14l8-3l8 3'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--shield-lock\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 3a12 12 0 0 0 8.5 3A12 12 0 0 1 12 21A12 12 0 0 1 3.5 6A12 12 0 0 0 12 3'/%3E%3Cpath d='M11 11a1 1 0 1 0 2 0a1 1 0 1 0-2 0m1 1v2.5'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--shopping-bag\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M6.331 8H17.67a2 2 0 0 1 1.977 2.304l-1.255 8.152A3 3 0 0 1 15.426 21H8.574a3 3 0 0 1-2.965-2.544l-1.255-8.152A2 2 0 0 1 6.331 8'/%3E%3Cpath d='M9 11V6a3 3 0 0 1 6 0v5'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--shopping-cart-x\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M4 19a2 2 0 1 0 4 0a2 2 0 0 0-4 0'/%3E%3Cpath d='M13 17H6V3H4'/%3E%3Cpath d='m6 5l14 1l-1 7H6m16 9l-5-5m0 5l5-5'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--shopping-cart\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M4 19a2 2 0 1 0 4 0a2 2 0 1 0-4 0m11 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0'/%3E%3Cpath d='M17 17H6V3H4'/%3E%3Cpath d='m6 5l14 1l-1 7H6'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--slideshow\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M15 6h.01M3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3z'/%3E%3Cpath d='m3 13l4-4a3 5 0 0 1 3 0l4 4'/%3E%3Cpath d='m13 12l2-2a3 5 0 0 1 3 0l3 3M8 21h.01M12 21h.01M16 21h.01'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--smart-home\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m19 8.71l-5.333-4.148a2.666 2.666 0 0 0-3.274 0L5.059 8.71a2.67 2.67 0 0 0-1.029 2.105v7.2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.2c0-.823-.38-1.6-1.03-2.105'/%3E%3Cpath d='M16 15c-2.21 1.333-5.792 1.333-8 0'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--social\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 5a2 2 0 1 0 4 0a2 2 0 1 0-4 0M3 19a2 2 0 1 0 4 0a2 2 0 1 0-4 0m14 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0m-8-5a3 3 0 1 0 6 0a3 3 0 1 0-6 0m3-7v4m-5.3 6.8l2.8-2m7.8 2l-2.8-2'/%3E%3C/svg%3E"); } .icon-\[tabler--sparkles\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M16 18a2 2 0 0 1 2 2a2 2 0 0 1 2-2a2 2 0 0 1-2-2a2 2 0 0 1-2 2m0-12a2 2 0 0 1 2 2a2 2 0 0 1 2-2a2 2 0 0 1-2-2a2 2 0 0 1-2 2M9 18a6 6 0 0 1 6-6a6 6 0 0 1-6-6a6 6 0 0 1-6 6a6 6 0 0 1 6 6'/%3E%3C/svg%3E"); } .icon-\[tabler--square\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); } .icon-\[tabler--star-filled\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m8.243 7.34l-6.38.925l-.113.023a1 1 0 0 0-.44 1.684l4.622 4.499l-1.09 6.355l-.013.11a1 1 0 0 0 1.464.944l5.706-3l5.693 3l.1.046a1 1 0 0 0 1.352-1.1l-1.091-6.355l4.624-4.5l.078-.085a1 1 0 0 0-.633-1.62l-6.38-.926l-2.852-5.78a1 1 0 0 0-1.794 0z'/%3E%3C/svg%3E"); } .icon-\[tabler--star-half-filled\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 1a1 1 0 0 1 .823.443l.067.116l2.852 5.781l6.38.925c.741.108 1.08.94.703 1.526l-.07.095l-.078.086l-4.624 4.499l1.09 6.355a1 1 0 0 1-1.249 1.135l-.101-.035l-.101-.046l-5.693-3l-5.706 3q-.158.082-.32.106l-.106.01a1.003 1.003 0 0 1-1.038-1.06l.013-.11l1.09-6.355l-4.623-4.5a1 1 0 0 1 .328-1.647l.113-.036l.114-.023l6.379-.925l2.853-5.78A.97.97 0 0 1 12 1m0 3.274V16.75a1 1 0 0 1 .239.029l.115.036l.112.05l4.363 2.299l-.836-4.873a1 1 0 0 1 .136-.696l.07-.099l.082-.09l3.546-3.453l-4.891-.708a1 1 0 0 1-.62-.344l-.073-.097l-.06-.106z'/%3E%3C/svg%3E"); } .icon-\[tabler--star\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m12 17.75l-6.172 3.245l1.179-6.873l-5-4.867l6.9-1l3.086-6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z'/%3E%3C/svg%3E"); } .icon-\[tabler--sun-moon\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M9.173 14.83a4 4 0 1 1 5.657-5.657'/%3E%3Cpath d='m11.294 12.707l.174.247a7.5 7.5 0 0 0 8.845 2.492A9 9 0 0 1 5.642 18.36M3 12h1m8-9v1M5.6 5.6l.7.7M3 21L21 3'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--sun\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 12a4 4 0 1 0 8 0a4 4 0 1 0-8 0m-5 0h1m8-9v1m8 8h1m-9 8v1M5.6 5.6l.7.7m12.1-.7l-.7.7m0 11.4l.7.7m-12.1-.7l-.7.7'/%3E%3C/svg%3E"); } .icon-\[tabler--table\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm0 5h18M10 3v18'/%3E%3C/svg%3E"); } .icon-\[tabler--tag\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M6.5 7.5a1 1 0 1 0 2 0a1 1 0 1 0-2 0'/%3E%3Cpath d='M3 6v5.172a2 2 0 0 0 .586 1.414l7.71 7.71a2.41 2.41 0 0 0 3.408 0l5.592-5.592a2.41 2.41 0 0 0 0-3.408l-7.71-7.71A2 2 0 0 0 11.172 3H6a3 3 0 0 0-3 3'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--tags\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 8v4.172a2 2 0 0 0 .586 1.414l5.71 5.71a2.41 2.41 0 0 0 3.408 0l3.592-3.592a2.41 2.41 0 0 0 0-3.408l-5.71-5.71A2 2 0 0 0 9.172 6H5a2 2 0 0 0-2 2'/%3E%3Cpath d='m18 19l1.592-1.592a4.82 4.82 0 0 0 0-6.816L15 6m-8 4h-.01'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--text-direction-ltr\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 19h14m-2 2l2-2l-2-2M16 4H9.5a3.5 3.5 0 0 0 0 7h.5m4 4V4m-4 11V4'/%3E%3C/svg%3E"); } .icon-\[tabler--text-direction-rtl\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M16 4H9.5a3.5 3.5 0 0 0 0 7h.5m4 4V4m-4 11V4M5 19h14M7 21l-2-2l2-2'/%3E%3C/svg%3E"); } .icon-\[tabler--ticket\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 5v2m0 4v2m0 4v2M5 5h14a2 2 0 0 1 2 2v3a2 2 0 0 0 0 4v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3a2 2 0 0 0 0-4V7a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); } .icon-\[tabler--trash\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3'/%3E%3C/svg%3E"); } .icon-\[tabler--trending-down\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m3 7l6 6l4-4l8 8'/%3E%3Cpath d='M21 10v7h-7'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--trending-up\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m3 17l6-6l4 4l8-8'/%3E%3Cpath d='M14 7h7v7'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--truck-delivery\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M5 17a2 2 0 1 0 4 0a2 2 0 1 0-4 0m10 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0'/%3E%3Cpath d='M5 17H3v-4M2 5h11v12m-4 0h6m4 0h2v-6h-8m0-5h5l3 5M3 9h4'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--truck\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M5 17a2 2 0 1 0 4 0a2 2 0 1 0-4 0m10 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0'/%3E%3Cpath d='M5 17H3V6a1 1 0 0 1 1-1h9v12m-4 0h6m4 0h2v-6h-8m0-5h5l3 5'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--upload\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 9l5-5l5 5m-5-5v12'/%3E%3C/svg%3E"); } .icon-\[tabler--user-check\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h4m1 4l2 2l4-4'/%3E%3C/svg%3E"); } .icon-\[tabler--user-circle\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0'/%3E%3Cpath d='M9 10a3 3 0 1 0 6 0a3 3 0 1 0-6 0m-2.832 8.849A4 4 0 0 1 10 16h4a4 4 0 0 1 3.834 2.855'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--user-dollar\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h3m8 0h-2.5a1.5 1.5 0 0 0 0 3h1a1.5 1.5 0 0 1 0 3H17m2 0v1m0-8v1'/%3E%3C/svg%3E"); } .icon-\[tabler--user-edit\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h3.5m4.92.61a2.1 2.1 0 0 1 2.97 2.97L18 22h-3v-3z'/%3E%3C/svg%3E"); } .icon-\[tabler--user-heart\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h.5m7.5 7l3.35-3.284a2.143 2.143 0 0 0 .005-3.071a2.24 2.24 0 0 0-3.129-.006l-.224.22l-.223-.22a2.24 2.24 0 0 0-3.128-.006a2.143 2.143 0 0 0-.006 3.071z'/%3E%3C/svg%3E"); } .icon-\[tabler--user-plus\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0m8 12h6m-3-3v6M6 21v-2a4 4 0 0 1 4-4h4'/%3E%3C/svg%3E"); } .icon-\[tabler--user-screen\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M19.03 17.818A3 3 0 0 0 21 15V7a3 3 0 0 0-3-3H6a3 3 0 0 0-3 3v8c0 1.317.85 2.436 2.03 2.84'/%3E%3Cpath d='M10 14a2 2 0 1 0 4 0a2 2 0 0 0-4 0m-2 7a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--user-share\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h3m3 7l5-5m0 4.5V17h-4.5'/%3E%3C/svg%3E"); } .icon-\[tabler--user-x\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h3.5m8.5 7l-5-5m0 5l5-5'/%3E%3C/svg%3E"); } .icon-\[tabler--user\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E"); } .icon-\[tabler--users-group\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 13a2 2 0 1 0 4 0a2 2 0 0 0-4 0m-2 8v-1a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1M15 5a2 2 0 1 0 4 0a2 2 0 0 0-4 0m2 5h2a2 2 0 0 1 2 2v1M5 5a2 2 0 1 0 4 0a2 2 0 0 0-4 0m-2 8v-1a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E"); } .icon-\[tabler--users\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 7a4 4 0 1 0 8 0a4 4 0 1 0-8 0M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2m1-17.87a4 4 0 0 1 0 7.75M21 21v-2a4 4 0 0 0-3-3.85'/%3E%3C/svg%3E"); } .icon-\[tabler--video\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m15 10l4.553-2.276A1 1 0 0 1 21 8.618v6.764a1 1 0 0 1-1.447.894L15 14zM3 8a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); } .icon-\[tabler--volume-2\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 8a5 5 0 0 1 0 8m-9-1H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l3.5-4.5A.8.8 0 0 1 11 5v14a.8.8 0 0 1-1.5.5z'/%3E%3C/svg%3E"); } .icon-\[tabler--wallet\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M17 8V5a1 1 0 0 0-1-1H6a2 2 0 0 0 0 4h12a1 1 0 0 1 1 1v3m0 4v3a1 1 0 0 1-1 1H6a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M20 12v4h-4a2 2 0 0 1 0-4z'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--world\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m.6-3h16.8M3.6 15h16.8'/%3E%3Cpath d='M11.5 3a17 17 0 0 0 0 18m1-18a17 17 0 0 1 0 18'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--x\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E"); } .icon-\[flag--ru-1x1\] { display: inline-block; width: 1em; height: 1em; background-repeat: no-repeat; background-size: 100% 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='512' height='512'%3E%3Cpath fill='%23fff' d='M0 0h512v170.7H0z'/%3E%3Cpath fill='%230039a6' d='M0 170.7h512v170.6H0z'/%3E%3Cpath fill='%23d52b1e' d='M0 341.3h512V512H0z'/%3E%3C/svg%3E"); } .l0r9q { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-field); background-color: var(--color-base-200); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-200) 20%, transparent); } font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); padding-left: 0.5em; padding-right: 0.5em; border: var(--border) solid var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border: var(--border) solid color-mix(in oklab, var(--color-base-content) 25%, #0000); } border-bottom-width: calc(var(--border) + 1px); --size: calc(var(--size-selector, 0.25rem) * 6.5); height: var(--size); min-width: var(--size); } .sd5bi { display: flex; --tabs-height: auto; --tabs-direction: row; height: var(--tabs-height); flex-direction: var(--tabs-direction); } .rakqj { max-width: 100%; overflow-x: auto; :where(& > ul) { display: flex; align-items: center; padding-inline: calc(0.25rem * 1); padding-block: calc(0.25rem * 2); white-space: nowrap; min-height: min-content; } :where(& > ol) { display: flex; align-items: center; padding-inline: calc(0.25rem * 1); padding-block: calc(0.25rem * 2); white-space: nowrap; min-height: min-content; } :where(& > ul > li) { display: inline-flex; align-items: center; } :where(& > ol > li) { display: inline-flex; align-items: center; } :where(& > ul > li > a) { display: inline-flex; align-items: center; gap: calc(0.25rem * 1); &:hover { @media (hover: hover) { color: var(--color-primary); } } &:focus { --tw-outline-style: none; outline-style: none; } &:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } } :where(& > ol > li > a) { display: inline-flex; align-items: center; gap: calc(0.25rem * 1); &:hover { @media (hover: hover) { color: var(--color-primary); } } &:focus { --tw-outline-style: none; outline-style: none; } &:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } } :where(& > ul > li:last-child) { cursor: text; --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-base-content); } :where(& > ol > li:last-child) { cursor: text; --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-base-content); } } .progress-bar { display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--radius-box); background-color: var(--color-neutral); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); white-space: nowrap; color: var(--color-neutral-content); 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; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: var(--ease-in-out); transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: 500ms; --tw-duration: 500ms; --tw-ease: var(--ease-in-out); &.jwlvq { width: 100%; background: linear-gradient(90deg, rgba(0, 0, 0, 0) 50%, var(--progress-color) 50%); background-size: 50% 100%; background-repeat: no-repeat; animation: indeterminate-progress 4s infinite ease-in-out; } } .me0et { display: grid; width: 100%; grid-auto-flow: row; place-items: start; column-gap: calc(0.25rem * 4); row-gap: calc(0.25rem * 10); @media (width >= 48rem) { grid-auto-flow: column; } & > * { display: grid; place-items: start; gap: calc(0.25rem * 3); } &.lohoz { place-items: center; text-align: center; @media (width >= 48rem) { grid-auto-flow: row dense; } & > * { place-items: center; } } :where(.hu72o) { --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } } .g7252 { display: inline-grid; width: 100%; column-gap: calc(0.25rem * 4); row-gap: calc(0.25rem * 1); padding-inline: calc(0.25rem * 6); padding-block: calc(0.25rem * 4); grid-template-columns: repeat(1, 1fr); border-color: inherit; } .qlxka { display: flex; width: 100%; align-items: center; background-color: var(--color-base-100); padding-inline: calc(0.25rem * 6); padding-block: calc(0.25rem * 3); } .fbqa7 { display: flex; width: calc(1/2 * 100%); justify-content: flex-end; } .g15um { display: flex; width: calc(1/2 * 100%); justify-content: flex-start; } .ye9hj { display: flex; flex: auto; flex-direction: column; gap: calc(0.25rem * 2); padding: var(--card-p, 1.5rem); :where(p) { flex-grow: 1; } :where(.ggjud) + & { padding-top: 0; } :where(&) + .szlfn { padding-top: 0; } } .l148e { display: block; cursor: pointer; padding: calc(0.25rem * 1); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--color-base-content); } .u9qhl { display: inline-grid; grid-auto-flow: column; :where(& > :not(:last-child)) { --tw-divide-x-reverse: 0; border-inline-style: var(--tw-border-style); border-inline-start-width: calc(1px * var(--tw-divide-x-reverse)); border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); --tw-divide-y-reverse: 0; border-bottom-style: var(--tw-border-style); border-top-style: var(--tw-border-style); border-top-width: calc(0px * var(--tw-divide-y-reverse)); border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse))); } overflow-x: auto; border-radius: var(--radius-box); --tw-border-style: solid; border-style: solid; border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); } background-color: var(--color-base-100); box-shadow: var( --card-shadow, 0 1px 3px 0 var(--color-base-300), 0 1px 2px -1px var(--color-base-300) ); @supports (color: color-mix(in lab, red, red)) { box-shadow: var( --card-shadow, 0 1px 3px 0 color-mix(in oklab, var(--color-base-300) 20%, #0000), 0 1px 2px -1px color-mix(in oklab, var(--color-base-300) 20%, #0000) ); } border-width: var(--card-border, 0px); &:where(.zvhsu) { border: var(--border) solid var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border: var(--border) solid color-mix(in oklab, var(--color-base-content) 20%, transparent); } } } .h4uul { display: flex; flex-wrap: wrap; align-items: flex-start; gap: calc(0.25rem * 3); } .carousel-body { display: flex; flex-wrap: nowrap; transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: 700ms; --tw-duration: 700ms; } .gr8wp { display: flex; align-items: center; justify-content: flex-end; gap: calc(0.25rem * 3); padding: calc(0.25rem * 6); :where(.apz43) + & { padding-top: 0; } } .w7k69 { display: flex; align-items: center; justify-content: flex-end; gap: calc(0.25rem * 3); padding: calc(0.25rem * 6); } .e3esn { display: flex; align-items: center; justify-content: space-between; padding: calc(0.25rem * 6); } .avatar-placeholder { & > div { display: flex; align-items: center; justify-content: center; } & > span { display: flex; align-items: center; justify-content: center; } } .rptou { display: inline-flex; align-items: stretch; --join-ss: 0; --join-se: 0; --join-es: 0; --join-ee: 0; :where(.rmlfx) { border-start-start-radius: var(--join-ss, 0); border-start-end-radius: var(--join-se, 0); border-end-start-radius: var(--join-es, 0); border-end-end-radius: var(--join-ee, 0); * { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: var(--radius-field); --join-ee: var(--radius-field); } } > .rmlfx:where(:first-child) { --join-ss: var(--radius-field); --join-se: 0; --join-es: var(--radius-field); --join-ee: 0; } :first-child:not(:last-child) { :where(.rmlfx) { --join-ss: var(--radius-field); --join-se: 0; --join-es: var(--radius-field); --join-ee: 0; } } > .rmlfx:where(:last-child) { --join-ss: 0; --join-se: var(--radius-field); --join-es: 0; --join-ee: var(--radius-field); } :last-child:not(:first-child) { :where(.rmlfx) { --join-ss: 0; --join-se: var(--radius-field); --join-es: 0; --join-ee: var(--radius-field); } } > .rmlfx:where(:only-child) { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: var(--radius-field); --join-ee: var(--radius-field); } :only-child { :where(.rmlfx) { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: var(--radius-field); --join-ee: var(--radius-field); } } } .avatar-group { display: flex; :where(.avatar) { overflow: hidden; border-radius: calc(infinity * 1px); border: 2px solid var(--color-base-100); } } .a2xgi { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .ao7iv { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .zewp5 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .rh3m1 { :root & { --tw-prose-body: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --tw-prose-body: color-mix(in oklab, var(--color-base-content) 80%, #0000); } --tw-prose-headings: var(--color-base-content); --tw-prose-lead: var(--tw-prose-body); --tw-prose-links: var(--color-primary); --tw-prose-kbd: var(--tw-prose-body); --tw-prose-bold: var(--tw-prose-headings); --tw-prose-counters: var(--tw-prose-headings); --tw-prose-bullets: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --tw-prose-bullets: color-mix(in oklab, var(--color-base-content) 50%, #0000); } --tw-prose-hr: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --tw-prose-hr: color-mix(in oklab, var(--color-base-content) 20%, #0000); } --tw-prose-quotes: var(--tw-prose-headings); --tw-prose-quote-borders: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --tw-prose-quote-borders: color-mix(in oklab, var(--color-base-content) 20%, #0000); } --tw-prose-captions: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --tw-prose-captions: color-mix(in oklab, var(--color-base-content) 40%, #0000); } --tw-prose-code: #e83e8c; --tw-prose-pre-code: var(--color-neutral-content); --tw-prose-pre-bg: var(--color-neutral); --tw-prose-th-borders: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --tw-prose-th-borders: color-mix(in oklab, var(--color-base-content) 24%, #0000); } --tw-prose-td-borders: var(--tw-prose-th-borders); line-height: 1.5rem; } & :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before, & :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::after { display: none; } pre { code { border-radius: 0; padding: 0; } } & :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-weight: 500; font-size: 0.875rem; } & :where(kbd):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding: calc(0.25rem * 0); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .validate { & *:valid ~ .twlxl { display: block; } & *:has(:valid) ~ .twlxl { display: block; } & *:invalid ~ .h0omp { display: block; } & *:has(:invalid) ~ .h0omp { display: block; } & .dhrcb:valid::file-selector-button { background-color: var(--color-success); color: var(--color-success-content); --input-color: var(--color-success); } & .dhrcb:invalid::file-selector-button { background-color: var(--color-error); color: var(--color-error-content); --input-color: var(--color-error); } & .im4zz > .dhrcb:valid::file-selector-button { background-color: var(--color-base-100); color: var(--color-base-content); border-inline-end: var(--border) solid var(--color-success); } & .im4zz > .dhrcb:invalid::file-selector-button { background-color: var(--color-base-100); color: var(--color-base-content); border-inline-end: var(--border) solid var(--color-error); } & .l148e:has(~ :valid) { color: var(--color-success); } & .l148e:has(~ * :valid) { color: var(--color-success); } & :is(:valid) ~ .ipz2q { color: var(--color-success); } & *:has(:valid) ~ .ipz2q { color: var(--color-success); } & :is(:valid) ~ .l148e { color: var(--color-success); } & :is(:valid) ~ .l148e * { color: var(--color-success); } & :is(:valid) ~ * >.l148e { color: var(--color-success); } & .l148e:has(~ :invalid) { color: var(--color-error); } & .l148e:has(~ * :invalid) { color: var(--color-error); } & :is(:invalid) ~ .ipz2q { color: var(--color-error); } & *:has(:invalid) ~ .ipz2q { color: var(--color-error); } & :is(:invalid) ~ .l148e { color: var(--color-error); } & :is(:invalid) ~ .l148e * { color: var(--color-error); } & :is(:invalid) ~ * >.l148e { color: var(--color-error); } & select:has(~ * > .selected) + .advance-select-toggle { --input-color: var(--color-success); &:focus, &:focus-within { --input-color: var(--color-success); } } & select:not(:has(~ * > .selected)) + .advance-select-toggle { --input-color: var(--color-error); &:focus, &:focus-within { --input-color: var(--color-error); } } & .im4zz:has(:valid) { &:hover { @media (hover: hover) { border-color: var(--color-success); } } .y92ur { color: var(--color-success); } &:focus-within, &:not(:has(input:placeholder-shown)), &:has(.dhrcb:focus) { .y92ur { color: var(--color-success); } } } & .im4zz:has(:invalid) { &:hover { @media (hover: hover) { border-color: var(--color-error); } } .y92ur { color: var(--color-error); } &:focus-within, &:not(:has(input:placeholder-shown)), &:has(.dhrcb:focus) { .y92ur { color: var(--color-error); } } } & .erjrn:has(:valid) { .a7mcv { color: var(--color-success); } &:focus-within, &:not(:has(textarea:placeholder-shown)), &:has(.g7kzo:focus) { .a7mcv { color: var(--color-success); } } } & .erjrn:has(:invalid) { .a7mcv { color: var(--color-error); } &:focus-within, &:not(:has(textarea:placeholder-shown)), &:has(.g7kzo:focus) { .a7mcv { color: var(--color-error); } } } & .lc1fa:has(:valid) { .jcikf { color: var(--color-success); } &:focus-within, &:not(:has(select:placeholder-shown)), &:has(.select:focus) { .jcikf { color: var(--color-success); } } } & .lc1fa:has(:invalid) { .jcikf { color: var(--color-error); } &:focus-within, &:not(:has(select:placeholder-shown)), &:has(.select:focus) { .jcikf { color: var(--color-error); } } } } .h0omp { display: none; padding: calc(0.25rem * 1); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--color-error); webkit-user-select: none; user-select: none; } .ipz2q { display: block; padding: calc(0.25rem * 1); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 80%, transparent); } webkit-user-select: none; user-select: none; } .twlxl { display: none; padding: calc(0.25rem * 1); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--color-success); webkit-user-select: none; user-select: none; } .pgv1q { display: block; padding-inline: calc(0.25rem * 5); padding-block: calc(0.25rem * 1.5); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } text-transform: uppercase; } .tooltip { display: inline-block; text-align: center; } .h0omp { .validate *:invalid ~ & { display: block; } .validate *:has(:invalid) ~ & { display: block; } } .twlxl { .validate *:valid ~ & { display: block; } .validate *:has(:valid) ~ & { display: block; } } .\!flex { display: flex !important; } .block { display: block; } .hfocl { display: contents; } .flex { display: flex; } .xh07i { display: grid; } .hidden { display: none; } .lrnp5 { display: inline; } .inline-block { display: inline-block; } .inline-flex { display: inline-flex; } .f3rxb { display: inline-grid; } .qz699 { display: table; } .qrs9a { aspect-ratio: 4/5; } .dc090 { aspect-ratio: 1 / 1; } .sxrpn { align-items: stretch; flex-direction: row; :where(figure:first-child) { overflow: hidden; border-start-start-radius: inherit; border-start-end-radius: unset; border-end-start-radius: inherit; border-end-end-radius: unset; } :where(figure:last-child) { overflow: hidden; border-start-start-radius: unset; border-start-end-radius: inherit; border-end-start-radius: unset; border-end-end-radius: inherit; } figure > * { max-width: unset; } :where(figure > *) { width: 100%; height: 100%; object-fit: cover; } } .m46p3 { width: calc(0.25rem * 3); height: calc(0.25rem * 3); cursor: pointer; border-radius: calc(infinity * 1px); background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 30%, transparent); } } .wmzks { height: calc(0.25rem * 1); width: calc(0.25rem * 10); cursor: pointer; background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 30%, transparent); } } .nb94s { height: calc(0.25rem * 1.5); width: 100%; flex-direction: row; justify-content: flex-start; border-radius: var(--radius-box); } .gw7qj { height: 100%; width: calc(0.25rem * 1.5); flex-direction: column; justify-content: flex-end; border-radius: var(--radius-box); } .cwqik { &.wehvw { height: auto; width: auto; flex-direction: column; &:before, &:after { height: 100%; width: 1px; border-inline-end-style: var(--tw-border-style); border-inline-end-width: 1px; border-top-style: var(--tw-border-style); border-top-width: 0px; } } } .h2052 { &.wehvw { height: auto; width: auto; flex-direction: row; &:before, &:after { height: 1px; border-inline-end-style: var(--tw-border-style); border-inline-end-width: 0px; border-top-style: var(--tw-border-style); border-top-width: 1px; } } } .btn-circle { border-radius: calc(infinity * 1px); padding-inline: calc(0.25rem * 0); width: var(--size); height: var(--size); } .btn-square { padding-inline: calc(0.25rem * 0); width: var(--size); height: var(--size); } .atoc0 { width: calc(var(--spacing) * 1.5); height: calc(var(--spacing) * 1.5); } .r26p4 { width: calc(var(--spacing) * 1.75); height: calc(var(--spacing) * 1.75); } .eybsb { width: calc(var(--spacing) * 2); height: calc(var(--spacing) * 2); } .m9v1a { width: calc(var(--spacing) * 2.5); height: calc(var(--spacing) * 2.5); } .i9hwi { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); } .gltdg { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); } .ljhtk { width: calc(var(--spacing) * 3.75); height: calc(var(--spacing) * 3.75); } .size-4 { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .size-4\.5 { width: calc(var(--spacing) * 4.5); height: calc(var(--spacing) * 4.5); } .size-5 { width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); } .size-5\.5 { width: calc(var(--spacing) * 5.5); height: calc(var(--spacing) * 5.5); } .size-6 { width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); } .n8267 { width: calc(var(--spacing) * 6.5); height: calc(var(--spacing) * 6.5); } .m9yt6 { width: calc(var(--spacing) * 7); height: calc(var(--spacing) * 7); } .size-7\.5 { width: calc(var(--spacing) * 7.5); height: calc(var(--spacing) * 7.5); } .tvi20 { width: calc(var(--spacing) * 7.25); height: calc(var(--spacing) * 7.25); } .size-8 { width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); } .ear4h { width: calc(var(--spacing) * 8.5); height: calc(var(--spacing) * 8.5); } .n110f { width: calc(var(--spacing) * 8.75); height: calc(var(--spacing) * 8.75); } .rw790 { width: calc(var(--spacing) * 9); height: calc(var(--spacing) * 9); } .z1agf { width: calc(var(--spacing) * 9.5); height: calc(var(--spacing) * 9.5); } .d4jcn { width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); } .x8y03 { width: calc(var(--spacing) * 10.5); height: calc(var(--spacing) * 10.5); } .y11yv { width: calc(var(--spacing) * 11); height: calc(var(--spacing) * 11); } .ijevn { width: calc(var(--spacing) * 11.5); height: calc(var(--spacing) * 11.5); } .b472t { width: calc(var(--spacing) * 11.25); height: calc(var(--spacing) * 11.25); } .ozpyh { width: calc(var(--spacing) * 12); height: calc(var(--spacing) * 12); } .g7ou5 { width: calc(var(--spacing) * 12.5); height: calc(var(--spacing) * 12.5); } .nq72j { width: calc(var(--spacing) * 13); height: calc(var(--spacing) * 13); } .c87f3 { width: calc(var(--spacing) * 14); height: calc(var(--spacing) * 14); } .azero { width: calc(var(--spacing) * 14.5); height: calc(var(--spacing) * 14.5); } .q626w { width: calc(var(--spacing) * 15); height: calc(var(--spacing) * 15); } .re8c2 { width: calc(var(--spacing) * 15.5); height: calc(var(--spacing) * 15.5); } .d32l0 { width: calc(var(--spacing) * 16); height: calc(var(--spacing) * 16); } .of2lu { width: calc(var(--spacing) * 16.5); height: calc(var(--spacing) * 16.5); } .y9ld5 { width: calc(var(--spacing) * 17); height: calc(var(--spacing) * 17); } .mwnyg { width: calc(var(--spacing) * 17.5); height: calc(var(--spacing) * 17.5); } .sv7dt { width: calc(var(--spacing) * 17.25); height: calc(var(--spacing) * 17.25); } .eckvp { width: calc(var(--spacing) * 18); height: calc(var(--spacing) * 18); } .e1nb3 { width: calc(var(--spacing) * 20); height: calc(var(--spacing) * 20); } .yx3fl { width: calc(var(--spacing) * 22); height: calc(var(--spacing) * 22); } .hzd1g { width: calc(var(--spacing) * 25); height: calc(var(--spacing) * 25); } .e4xda { width: calc(var(--spacing) * 28); height: calc(var(--spacing) * 28); } .jha48 { width: calc(var(--spacing) * 30); height: calc(var(--spacing) * 30); } .ox2wh { width: calc(var(--spacing) * 31); height: calc(var(--spacing) * 31); } .buahs { width: calc(var(--spacing) * 32.5); height: calc(var(--spacing) * 32.5); } .p0xbt { width: calc(var(--spacing) * 35.25); height: calc(var(--spacing) * 35.25); } .e9ccq { width: calc(var(--spacing) * 37.5); height: calc(var(--spacing) * 37.5); } .pt2dk { width: calc(var(--spacing) * 48); height: calc(var(--spacing) * 48); } .in1sx { width: calc(var(--spacing) * 50); height: calc(var(--spacing) * 50); } .qbvh4 { width: calc(var(--spacing) * 52.5); height: calc(var(--spacing) * 52.5); } .fb2hu { width: calc(var(--spacing) * 60); height: calc(var(--spacing) * 60); } .jz7qq { width: calc(var(--spacing) * 61); height: calc(var(--spacing) * 61); } .syjyp { width: calc(var(--spacing) * 65); height: calc(var(--spacing) * 65); } .jzbqv { width: calc(var(--spacing) * 65.75); height: calc(var(--spacing) * 65.75); } .y2l0q { width: calc(var(--spacing) * 68); height: calc(var(--spacing) * 68); } .efy0n { width: calc(var(--spacing) * 70); height: calc(var(--spacing) * 70); } .q6mbh { width: calc(var(--spacing) * 76); height: calc(var(--spacing) * 76); } .ro08s { width: calc(var(--spacing) * 85); height: calc(var(--spacing) * 85); } .w1995 { width: calc(var(--spacing) * 90); height: calc(var(--spacing) * 90); } .x9ag4 { width: calc(var(--spacing) * 93); height: calc(var(--spacing) * 93); } .b8gh5 { width: calc(var(--spacing) * 100); height: calc(var(--spacing) * 100); } .fn6sr { width: calc(var(--spacing) * 101.5); height: calc(var(--spacing) * 101.5); } .g771z { width: calc(var(--spacing) * 115); height: calc(var(--spacing) * 115); } .kdx4h { width: calc(var(--spacing) * 120); height: calc(var(--spacing) * 120); } .jun5r { width: calc(var(--spacing) * 121.5); height: calc(var(--spacing) * 121.5); } .gxesi { width: calc(var(--spacing) * 130); height: calc(var(--spacing) * 130); } .wlpwr { width: calc(var(--spacing) * 140); height: calc(var(--spacing) * 140); } .qdouf { width: calc(var(--spacing) * 200); height: calc(var(--spacing) * 200); } .vx77v { width: auto; height: auto; } .size-full { width: 100%; height: 100%; } .bfeug { width: calc(0.25rem * 3); height: calc(0.25rem * 3); } .owoai { width: calc(0.25rem * 2.5); height: calc(0.25rem * 2.5); } .gwk59 { width: calc(0.25rem * 2); height: calc(0.25rem * 2); } .ys9fq { width: calc(0.25rem * 3.5); height: calc(0.25rem * 3.5); } .uxhu0 { width: calc(0.25rem * 1.5); height: calc(0.25rem * 1.5); } .dhrcb { & > .select { height: auto; border-style: var(--tw-border-style); border-width: 0px; &:focus, &:focus-within { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); outline-style: var(--tw-outline-style); outline-width: 0px; } } } .\!h-2\.5 { height: calc(var(--spacing) * 2.5) !important; } .o7b6j { height: calc(var(--spacing) * 0.5); } .kvns4 { height: calc(var(--spacing) * 1); } .b2flw { height: calc(1/2 * 100%); } .h-2 { height: calc(var(--spacing) * 2); } .leftd { height: calc(var(--spacing) * 2.5); } .h-3 { height: calc(var(--spacing) * 3); } .m799h { height: calc(var(--spacing) * 3.5); } .h-4 { height: calc(var(--spacing) * 4); } .kbi00 { height: calc(var(--spacing) * 4.5); } .twv43 { height: calc(var(--spacing) * 5); } .mew2v { height: calc(var(--spacing) * 6); } .lggso { height: calc(var(--spacing) * 6.25); } .izn7t { height: calc(var(--spacing) * 7); } .f4k5c { height: calc(var(--spacing) * 7.5); } .r1o67 { height: calc(var(--spacing) * 8); } .t91o6 { height: calc(var(--spacing) * 8.5); } .eux9q { height: calc(var(--spacing) * 8.25); } .akos0 { height: calc(var(--spacing) * 9); } .dqt61 { height: calc(var(--spacing) * 9.5); } .f0wbc { height: calc(var(--spacing) * 10); } .uwogf { height: calc(var(--spacing) * 11); } .vnpf7 { height: calc(var(--spacing) * 11.5); } .uza3c { height: calc(var(--spacing) * 12); } .x26ll { height: calc(var(--spacing) * 13); } .yhp1t { height: calc(var(--spacing) * 13.75); } .k0jbh { height: calc(var(--spacing) * 14); } .at6dk { height: calc(var(--spacing) * 15); } .gk5xd { height: calc(var(--spacing) * 16); } .wmeqi { height: calc(var(--spacing) * 16.5); } .sn8r4 { height: calc(var(--spacing) * 17); } .w4816 { height: calc(var(--spacing) * 18); } .o0pn2 { height: calc(var(--spacing) * 18.5); } .hmm2j { height: calc(var(--spacing) * 18.25); } .oxry2 { height: calc(var(--spacing) * 20); } .j5sha { height: calc(var(--spacing) * 20.5); } .islem { height: calc(var(--spacing) * 21); } .bvkte { height: calc(var(--spacing) * 25); } .dhi3s { height: calc(var(--spacing) * 27.5); } .e6crn { height: calc(var(--spacing) * 27.75); } .fzuzc { height: calc(var(--spacing) * 28); } .pexh6 { height: calc(var(--spacing) * 28.75); } .i77vq { height: calc(var(--spacing) * 29); } .sd185 { height: calc(var(--spacing) * 31.25); } .xp13u { height: calc(var(--spacing) * 32); } .vezq0 { height: calc(var(--spacing) * 36); } .k5nwh { height: calc(var(--spacing) * 37.5); } .be05w { height: calc(var(--spacing) * 40); } .tb90s { height: calc(var(--spacing) * 47.75); } .jk893 { height: calc(var(--spacing) * 48); } .cpdci { height: calc(var(--spacing) * 51); } .bnu9y { height: calc(var(--spacing) * 51.25); } .d9yz6 { height: calc(var(--spacing) * 52); } .ametc { height: calc(var(--spacing) * 53); } .evtpe { height: calc(var(--spacing) * 55); } .nv9zl { height: calc(var(--spacing) * 57.25); } .brutv { height: calc(var(--spacing) * 58); } .eyy21 { height: calc(var(--spacing) * 60); } .vbx9o { height: calc(var(--spacing) * 62); } .y8fji { height: calc(var(--spacing) * 62.75); } .pqnix { height: calc(var(--spacing) * 63.5); } .u8ujw { height: calc(var(--spacing) * 64); } .pz2jo { height: calc(var(--spacing) * 65); } .r6ltn { height: calc(var(--spacing) * 66.5); } .lkky7 { height: calc(var(--spacing) * 68); } .gzmff { height: calc(var(--spacing) * 69.75); } .jxi9m { height: calc(var(--spacing) * 70); } .bi5lf { height: calc(var(--spacing) * 70.5); } .jenv1 { height: calc(var(--spacing) * 72); } .ns2je { height: calc(var(--spacing) * 75); } .k62fs { height: calc(var(--spacing) * 76.75); } .c6hb1 { height: calc(var(--spacing) * 77); } .gst3j { height: calc(var(--spacing) * 80); } .byxud { height: calc(var(--spacing) * 80.75); } .ah3xh { height: calc(var(--spacing) * 83.25); } .l550r { height: calc(var(--spacing) * 84.5); } .h9jpn { height: calc(var(--spacing) * 87.25); } .esiil { height: calc(var(--spacing) * 88.25); } .ll61x { height: calc(var(--spacing) * 90); } .h4i4f { height: calc(var(--spacing) * 96); } .pisi5 { height: calc(var(--spacing) * 98); } .rp73k { height: calc(var(--spacing) * 105); } .fa5e6 { height: calc(var(--spacing) * 118); } .tpc04 { height: calc(var(--spacing) * 120); } .lqdip { height: calc(var(--spacing) * 122); } .pmltr { height: calc(var(--spacing) * 125); } .im155 { height: calc(var(--spacing) * 125.5); } .m5fwj { height: calc(var(--spacing) * 128); } .hdawe { height: calc(var(--spacing) * 135); } .abh0f { height: calc(var(--spacing) * 146); } .a2z5v { height: calc(var(--spacing) * 148); } .qyhtj { height: calc(var(--spacing) * 167.5); } .ns39u { height: calc(var(--spacing) * 170); } .fz75s { height: calc(var(--spacing) * 200); } .dljah { height: calc(var(--spacing) * 375); } .h-\[calc\(100\%_-_32px\)\] { height: calc(100% - 32px); } .h-\[clamp\(300px\,50vh\,600px\)\] { height: clamp(300px, 50vh, 600px); } .kv5wi { height: auto; } .h-dvh { height: 100dvh; } .kclws { height: fit-content; } .v2w4s { height: 100%; } .p5kmt { height: max-content; } .robps { height: 1px; } .h-screen { height: 100vh; } .ksdr1 { max-height: calc(var(--spacing) * 44); } .xa0qj { max-height: calc(var(--spacing) * 48); } .fagcy { max-height: calc(var(--spacing) * 52); } .myf9h { max-height: calc(var(--spacing) * 90); } .ktj9s { max-height: calc(var(--spacing) * 92); } .aqnfc { max-height: calc(var(--spacing) * 110); } .hllpk { max-height: 100%; } .ude5m { min-height: calc(var(--spacing) * 0); } .aon0m { min-height: calc(var(--spacing) * 7.5); } .x5rdm { min-height: calc(var(--spacing) * 20); } .xpa1y { min-height: calc(var(--spacing) * 67); } .min-h-screen { min-height: 100vh; } .cfhai { width: 100%; max-width: calc(0.25rem * 64); } .wyc27 { flex-grow: 1; overflow-x: hidden; overflow-y: auto; padding-inline: calc(0.25rem * 6); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); &::-webkit-scrollbar { width: calc(0.25rem * 2); } &:where(:last-child) { padding-bottom: calc(0.25rem * 6); } } .jwlvq { .progress-bar& { width: 100%; background: linear-gradient(90deg, rgba(0, 0, 0, 0) 50%, var(--progress-color) 50%); background-size: 50% 100%; background-repeat: no-repeat; animation: indeterminate-progress 4s infinite ease-in-out; } } .v0hk9 { width: 100%; cursor: pointer; overflow: hidden; border-radius: var(--radius-box); border-style: var(--tw-border-style); border-width: 1px; padding: calc(0.25rem * 4); border: var(--border) solid var(--input-color, var(--color-base-content)); @supports (color: color-mix(in lab, red, red)) { border: var(--border) solid var(--input-color, color-mix(in oklab, var(--color-base-content) 40%, #0000)); } &:hover { border-color: var(--input-color, var(--color-base-content)); @supports (color: color-mix(in lab, red, red)) { border-color: var(--input-color, color-mix(in oklab, var(--color-base-content) 40%, #0000)); } outline: 1px solid var(--input-color, var(--color-base-content)); @supports (color: color-mix(in lab, red, red)) { outline: 1px solid var(--input-color, color-mix(in oklab, var(--color-base-content) 40%, #0000)); } } & > .l148e { padding: calc(0.25rem * 0); } background-color: var(--input-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--input-color, var(--color-neutral)) 5%, #0000); } &:has(:checked) { border-color: var(--input-color, var(--color-primary)); background-color: var(--input-color, var(--color-primary)); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--input-color, var(--color-primary)) 10%, #0000); } outline: 1px solid var(--input-color, var(--color-primary)); } } .j9km8 { width: 100%; cursor: pointer; overflow: hidden; border-radius: var(--radius-box); border-style: var(--tw-border-style); border-width: 1px; padding: calc(0.25rem * 4); border: var(--border) solid var(--input-color, var(--color-base-content)); @supports (color: color-mix(in lab, red, red)) { border: var(--border) solid var(--input-color, color-mix(in oklab, var(--color-base-content) 40%, #0000)); } &:hover { border-color: var(--input-color, var(--color-base-content)); @supports (color: color-mix(in lab, red, red)) { border-color: var(--input-color, color-mix(in oklab, var(--color-base-content) 40%, #0000)); } outline: 1px solid var(--input-color, var(--color-base-content)); @supports (color: color-mix(in lab, red, red)) { outline: 1px solid var(--input-color, color-mix(in oklab, var(--color-base-content) 40%, #0000)); } } & > .l148e { padding: calc(0.25rem * 0); } &:has(:checked) { border-color: var(--input-color, var(--color-primary)); outline: 1px solid var(--input-color, var(--color-primary)); } } .advance-select-option { width: 100%; cursor: pointer; border-radius: var(--radius-field); padding-inline: calc(0.25rem * 4); padding-block: calc(0.25rem * 2.5); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); color: var(--color-base-content); &:hover { @media (hover: hover) { background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } } } &:focus { background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } --tw-outline-style: none; outline-style: none; } } .lalei { --size: calc(var(--size-field, 0.25rem) * 9.5); padding-inline-start: calc(0.25rem * 3); padding-inline-end: calc(0.25rem * 10); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); & ~ .advance-select-menu { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); & .advance-select-option { width: 100%; cursor: pointer; padding-inline: calc(0.25rem * 2); padding-block: calc(0.25rem * 1.5); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } } } .mdesz { --size: calc(var(--size-field, 0.25rem) * 7.5); padding-inline-start: calc(0.25rem * 2.5); padding-inline-end: calc(0.25rem * 8); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); & ~ .advance-select-menu { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); & .advance-select-option { width: 100%; cursor: pointer; padding-inline: calc(0.25rem * 2); padding-block: calc(0.25rem * 1.5); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } } } .muw3k { --size: calc(var(--size-field, 0.25rem) * 6); padding-inline-start: calc(0.25rem * 2.5); padding-inline-end: calc(0.25rem * 8); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); & ~ .advance-select-menu { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); & .advance-select-option { width: 100%; cursor: pointer; padding-inline: calc(0.25rem * 2); padding-block: calc(0.25rem * 1); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } } } .vyxx5 { --size: calc(var(--size-field, 0.25rem) * 14); padding-inline: calc(0.25rem * 4.5); padding-inline: calc(0.25rem * 4); padding-inline-end: calc(0.25rem * 10); font-size: var(--text-xl); font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-xl--line-height)); line-height: var(--tw-leading, var(--text-lg--line-height)); & ~ .advance-select-menu .advance-select-option { width: 100%; cursor: pointer; padding-inline: calc(0.25rem * 4); padding-block: calc(0.25rem * 3); font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } } .lrxr0 { --size: calc(var(--size-field, 0.25rem) * 11.5); padding-inline: calc(0.25rem * 4); padding-inline-end: calc(0.25rem * 10); font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); & ~ .advance-select-menu .advance-select-option { width: 100%; cursor: pointer; padding-inline: calc(0.25rem * 4); padding-block: calc(0.25rem * 3); font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } } .bakjs { & > .o1ezv { border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } @media (hover:hover) { &:hover { @media (hover: hover) { border-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary) 30%, transparent); } } } } @media (hover:hover) { &:hover { @media (hover: hover) { color: var(--color-primary); } } } border-style: solid; border-bottom-width: calc(var(--border, 1px) + 1px); } &.wzapm { --tabs-direction: column; & > .o1ezv { width: 100%; justify-content: flex-start; border-bottom-style: var(--tw-border-style); border-bottom-width: 0px; border-inline-end-width: calc(var(--border, 1px) + 1px); } } } .wzapm { .bakjs& { --tabs-direction: column; & > .o1ezv { width: 100%; justify-content: flex-start; border-bottom-style: var(--tw-border-style); border-bottom-width: 0px; border-inline-end-width: calc(var(--border, 1px) + 1px); } } } .apz43 { overflow-x: hidden; overflow-y: auto; padding: calc(0.25rem * 6); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); &::-webkit-scrollbar { width: calc(0.25rem * 2); } :where(.ftzqy) + & { padding-top: 0; } :where(&) + .gr8wp { padding-top: 0; } } .\!w-2\.5 { width: calc(var(--spacing) * 2.5) !important; } .cu1a0 { width: 100%; } .jeg7f { width: calc(var(--size-selector, 0.25rem) * 7); } .pzc82 { width: calc(var(--size-selector, 0.25rem) * 6); } .i3y19 { width: calc(var(--size-selector, 0.25rem) * 5); } .yq1qy { width: calc(var(--size-selector, 0.25rem) * 8); } .qqbpl { width: calc(var(--size-selector, 0.25rem) * 4); } .fdqcx { width: calc(var(--spacing) * 0.5); } .w5mxg { width: calc(var(--spacing) * 1.5); } .m712w { width: calc(1/2 * 100%); } .zdlvg { width: calc(1/4 * 100%); } .mrb3e { width: calc(1/10 * 100%); } .rdouu { width: calc(var(--spacing) * 2); } .qxind { width: calc(2/4 * 100%); } .l5d0o { width: calc(var(--spacing) * 3); } .sgut4 { width: calc(var(--spacing) * 3.5); } .svocr { width: calc(3/4 * 100%); } .djoj4 { width: calc(3/5 * 100%); } .ulp86 { width: calc(3/10 * 100%); } .w-5 { width: calc(var(--spacing) * 5); } .p5q9o { width: calc(var(--spacing) * 5.75); } .w-6 { width: calc(var(--spacing) * 6); } .u5bod { width: calc(var(--spacing) * 7); } .w-7\.5 { width: calc(var(--spacing) * 7.5); } .eztl1 { width: calc(var(--spacing) * 7.25); } .g4hwn { width: calc(var(--spacing) * 8); } .a4tr9 { width: calc(var(--spacing) * 9); } .by0f7 { width: calc(var(--spacing) * 9.5); } .jnddy { width: calc(var(--spacing) * 10); } .kud83 { width: calc(var(--spacing) * 11); } .u8ubk { width: calc(var(--spacing) * 11.5); } .wx1qn { width: calc(var(--spacing) * 12); } .fpo50 { width: calc(var(--spacing) * 12.5); } .gg1el { width: calc(var(--spacing) * 13); } .v734b { width: calc(var(--spacing) * 14); } .pw8j2 { width: calc(var(--spacing) * 15); } .fbpfr { width: calc(var(--spacing) * 17); } .drtnb { width: calc(var(--spacing) * 18); } .c6yme { width: calc(var(--spacing) * 19); } .r15jh { width: calc(var(--spacing) * 20); } .halqk { width: calc(var(--spacing) * 21); } .otsmk { width: calc(var(--spacing) * 22); } .hy1wr { width: calc(var(--spacing) * 22.25); } .psnty { width: calc(var(--spacing) * 23); } .aeorc { width: calc(var(--spacing) * 24); } .ejxez { width: calc(var(--spacing) * 24.5); } .ztluq { width: calc(var(--spacing) * 25); } .rhoyp { width: calc(var(--spacing) * 26.5); } .kvny9 { width: calc(var(--spacing) * 27); } .rek88 { width: calc(var(--spacing) * 27.5); } .g8ekw { width: calc(var(--spacing) * 27.75); } .gv4kg { width: calc(var(--spacing) * 28.75); } .r7y0e { width: calc(var(--spacing) * 29); } .ly7f3 { width: calc(var(--spacing) * 29.25); } .b5jey { width: calc(var(--spacing) * 30); } .fopw6 { width: calc(var(--spacing) * 31); } .wpojd { width: calc(var(--spacing) * 31.25); } .az95q { width: calc(var(--spacing) * 32); } .eiu39 { width: calc(var(--spacing) * 33); } .rfm26 { width: calc(var(--spacing) * 34.5); } .um6vz { width: calc(var(--spacing) * 35); } .ca1i9 { width: calc(35/100 * 100%); } .upfcp { width: calc(var(--spacing) * 36); } .b80pj { width: calc(var(--spacing) * 36.25); } .fjww0 { width: calc(var(--spacing) * 38); } .toeky { width: calc(var(--spacing) * 38.5); } .jpwpf { width: calc(var(--spacing) * 38.25); } .aejyz { width: calc(var(--spacing) * 40); } .dv8hh { width: calc(var(--spacing) * 40.75); } .b7k0g { width: calc(var(--spacing) * 42); } .nndl4 { width: calc(42/100 * 100%); } .hx3x1 { width: calc(var(--spacing) * 43); } .k6rff { width: calc(var(--spacing) * 44.5); } .hdlil { width: calc(var(--spacing) * 45); } .jfjrv { width: calc(var(--spacing) * 47); } .tvyvx { width: calc(var(--spacing) * 48); } .p9rf8 { width: calc(var(--spacing) * 48.75); } .sw1ar { width: calc(var(--spacing) * 49); } .w-50 { width: calc(var(--spacing) * 50); } .f90mj { width: calc(var(--spacing) * 52); } .ye8vl { width: calc(var(--spacing) * 53.25); } .l41tn { width: calc(var(--spacing) * 54); } .w-56 { width: calc(var(--spacing) * 56); } .h2nq7 { width: calc(var(--spacing) * 57); } .j6p4l { width: calc(var(--spacing) * 60); } .fb28h { width: calc(var(--spacing) * 62); } .ihqzq { width: calc(var(--spacing) * 65); } .hmow9 { width: calc(var(--spacing) * 66); } .cw0uf { width: calc(68/100 * 100%); } .htvwl { width: calc(var(--spacing) * 70); } .vra2a { width: calc(72/100 * 100%); } .n2xaa { width: calc(var(--spacing) * 75); } .i8bz4 { width: calc(var(--spacing) * 80); } .yfy5o { width: calc(var(--spacing) * 82); } .yo90r { width: calc(var(--spacing) * 83); } .nnljj { width: calc(var(--spacing) * 84.5); } .ayt9r { width: calc(var(--spacing) * 85); } .pjjbf { width: calc(var(--spacing) * 86); } .m4va1 { width: calc(95/100 * 100%); } .y377f { width: calc(var(--spacing) * 100); } .kli06 { width: calc(var(--spacing) * 115); } .wfyrc { width: calc(var(--spacing) * 120); } .vvheq { width: calc(var(--spacing) * 131); } .reabx { width: calc(var(--spacing) * 135.25); } .e7z3w { width: calc(var(--spacing) * 149); } .bcmgb { width: calc(var(--spacing) * 162.75); } .v64g5 { width: calc(var(--spacing) * 173); } .w-\[40\%\] { width: 40%; } .w-\[45\%\] { width: 45%; } .w-\[50\%\] { width: 50%; } .w-\[54\%\] { width: 54%; } .w-\[70\%\] { width: 70%; } .w-\[80\%\] { width: 80%; } .w-\[94\%\] { width: 94%; } .w-\[95px\] { width: 95px; } .w-\[500px\] { width: 500px; } .w-\[calc\(100\%\+0rem\)\] { width: calc(100% + 0rem); } .wjb2z { width: auto; } .x73oq { width: fit-content; } .w-full { width: 100%; } .jrjhi { width: max-content; } .c4rp4 { width: 1px; } .hkfg8 { max-width: var(--container-2xl); } .l624u { max-width: var(--container-3xl); } .urjo4 { max-width: var(--container-4xl); } .jqvk9 { max-width: var(--container-5xl); } .vthez { max-width: var(--container-6xl); } .lgnub { max-width: var(--container-7xl); } .ddl4r { max-width: calc(var(--spacing) * 25); } .nfzsg { max-width: calc(var(--spacing) * 32); } .hzmck { max-width: calc(var(--spacing) * 35); } .max-w-40 { max-width: calc(var(--spacing) * 40); } .dhlkf { max-width: calc(var(--spacing) * 45); } .dzgz4 { max-width: calc(var(--spacing) * 60); } .go1rs { max-width: calc(var(--spacing) * 64.5); } .e2vv8 { max-width: calc(var(--spacing) * 69.25); } .bn6md { max-width: calc(var(--spacing) * 75); } .d3qfd { max-width: calc(var(--spacing) * 80); } .sl0zu { max-width: calc(var(--spacing) * 82); } .uqo6u { max-width: calc(var(--spacing) * 96); } .gpvn1 { max-width: calc(var(--spacing) * 98); } .kj0j4 { max-width: calc(var(--spacing) * 100); } .ibtz0 { max-width: calc(var(--spacing) * 115); } .vnjeq { max-width: calc(var(--spacing) * 122); } .l8y03 { max-width: calc(var(--spacing) * 125); } .uzj1f { max-width: calc(var(--spacing) * 145); } .u2srg { max-width: calc(var(--spacing) * 147); } .d1md0 { max-width: calc(var(--spacing) * 155); } .zehsp { max-width: calc(var(--spacing) * 156.75); } .ub5az { max-width: calc(var(--spacing) * 162.5); } .rz9z0 { max-width: calc(var(--spacing) * 169.25); } .b8d10 { max-width: calc(var(--spacing) * 175); } .c9mf1 { max-width: calc(var(--spacing) * 177.75); } .vooim { max-width: calc(var(--spacing) * 185.25); } .mtkgl { max-width: calc(var(--spacing) * 200); } .j3rm5 { max-width: calc(var(--spacing) * 348); } .d3guq { max-width: calc(var(--spacing) * 384); } .max-w-\[72px\] { max-width: 72px; } .max-w-\[1388px\] { max-width: 1388px; } .max-w-\[1536px\] { max-width: 1536px; } .e9h6g { max-width: fit-content; } .yfut6 { max-width: 100%; } .k67hd { max-width: var(--container-lg); } .aw4u5 { max-width: var(--container-md); } .jotj0 { max-width: var(--container-sm); } .tps0h { max-width: var(--container-xl); } .y6y0f { max-width: var(--container-xs); } .jxj0b { max-width: calc(0.25rem * 192); } .pr7xr { max-width: calc(0.25rem * 128); } .eh75l { max-width: calc(0.25rem * 96); } .mz4hj { max-width: calc(0.25rem * 256); } .zftcu { min-width: var(--container-2xs); } .z998f { min-width: calc(var(--spacing) * 7.5); } .zzl0y { min-width: calc(var(--spacing) * 26); } .min-w-28 { min-width: calc(var(--spacing) * 28); } .vcqbx { min-width: calc(var(--spacing) * 30); } .min-w-32 { min-width: calc(var(--spacing) * 32); } .p0g8d { min-width: calc(var(--spacing) * 35); } .n4zgv { min-width: calc(var(--spacing) * 40); } .min-w-48 { min-width: calc(var(--spacing) * 48); } .min-w-60 { min-width: calc(var(--spacing) * 60); } .eor2v { min-width: calc(var(--spacing) * 64); } .ptdno { min-width: calc(var(--spacing) * 70); } .min-w-\[141px\] { min-width: 141px; } .kimfw { min-width: 100%; } .sh5e4 { min-width: var(--container-sm); } .srhkf { overflow: hidden; border-radius: var(--radius-box); box-shadow: var( --card-shadow, 0 1px 3px 0 var(--color-base-300), 0 1px 2px -1px var(--color-base-300) ); @supports (color: color-mix(in lab, red, red)) { box-shadow: var( --card-shadow, 0 1px 3px 0 color-mix(in oklab, var(--color-base-300) 20%, #0000), 0 1px 2px -1px color-mix(in oklab, var(--color-base-300) 20%, #0000) ); } border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 30%, transparent); } border-width: var(--card-border, 0px); & > .gj4r3 { flex: 1 0 0%; border-radius: 0; --card-shadow: none; --card-border: 0; } } .dpf52 { flex: 1; } .fkkxx { flex: none; } .lq7b6 { flex-shrink: 1; } .hxaki { flex-shrink: 0; } .zqi4f { flex-shrink: 1; } .shrink-0 { flex-shrink: 0; } .rzl4o { flex-grow: 1; } .rpc2u { flex-grow: 1; } .grow\! { flex-grow: 1 !important; } .w7zus { flex-grow: 1; } .te70e { flex-basis: calc(var(--spacing) * 0); } .exbtu { flex-basis: 100%; } .origin-\[0_0\] { transform-origin: 0 0; } .gdk6z { --tw-translate-x: calc(calc(1/2 * 100%) * -1); --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .r625a { --tw-translate-x: calc(1/2 * 100%); --tw-translate-y: calc(1/2 * 100%); translate: var(--tw-translate-x) var(--tw-translate-y); } .cw4j5 { --tw-translate-x: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .dist1 { --tw-translate-x: calc(1/2 * 100%); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-x-2\/4 { --tw-translate-x: calc(2/4 * 100%); translate: var(--tw-translate-x) var(--tw-translate-y); } .rv7dc { --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-y-2\/4 { --tw-translate-y: calc(calc(2/4 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .cvyt5 { --tw-translate-y: calc(calc(2/5 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .vuine { --tw-scale-x: 140%; scale: var(--tw-scale-x) var(--tw-scale-y); } .zmwbt { .i69pz, input:indeterminate ~ .i69pz { rotate: 45deg; } input:is(:checked, :indeterminate) ~ .i69pz, &.bugro .i69pz { rotate: 0deg; } input:is(:checked, :indeterminate) ~ .cupmn, &.bugro .cupmn { rotate: calc(45deg * -1); } } .v0wzp { rotate: calc(10deg * -1); } .bhj29 { rotate: calc(20deg * -1); } .x9xrm { rotate: calc(35deg * -1); } .qsmtr { rotate: calc(45deg * -1); } .b13dz { rotate: calc(135deg * -1); } .ayn9q { rotate: calc(145deg * -1); } .uuw4s { rotate: calc(225deg * -1); } .przf2 { rotate: calc(315deg * -1); } .-rotate-\[8deg\] { rotate: calc(8deg * -1); } .-rotate-\[10\.5deg\] { rotate: calc(10.5deg * -1); } .-rotate-\[10deg\] { rotate: calc(10deg * -1); } .-rotate-\[18deg\] { rotate: calc(18deg * -1); } .-rotate-\[20deg\] { rotate: calc(20deg * -1); } .-rotate-\[36deg\] { rotate: calc(36deg * -1); } .ptj4z { rotate: 10deg; } .fdv5e { rotate: 45deg; } .txqk8 { rotate: 90deg; } .rotate-\[-2\.14deg\] { rotate: -2.14deg; } .rotate-\[-6deg\] { rotate: -6deg; } .rotate-\[-8deg\] { rotate: -8deg; } .rotate-\[-10deg\] { rotate: -10deg; } .rotate-\[-11deg\] { rotate: -11deg; } .rotate-\[-15deg\] { rotate: -15deg; } .rotate-\[-18deg\] { rotate: -18deg; } .rotate-\[-20deg\] { rotate: -20deg; } .rotate-\[5deg\] { rotate: 5deg; } .rotate-\[10deg\] { rotate: 10deg; } .rotate-\[11deg\] { rotate: 11deg; } .rotate-\[12deg\] { rotate: 12deg; } .rotate-\[13deg\] { rotate: 13deg; } .rotate-\[14\.2deg\] { rotate: 14.2deg; } .rotate-\[15deg\] { rotate: 15deg; } .rotate-\[16deg\] { rotate: 16deg; } .rotate-\[18deg\] { rotate: 18deg; } .rotate-\[26deg\] { rotate: 26deg; } .rotate-\[40deg\] { rotate: 40deg; } .rotate-\[45deg\] { rotate: 45deg; } .g6pch { --tw-rotate-y: rotateY(180deg); transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } .o3qtv { transform-style: preserve-3d; perspective: 20rem; .i69pz, .zrnvh, input:indeterminate ~ .i69pz { transform: rotateY(180deg); backface-visibility: hidden; opacity: 100%; } input:is(:checked, :indeterminate) ~ .i69pz, &.bugro .i69pz { transform: rotateY(0deg); } input:is(:checked, :indeterminate) ~ .cupmn, &.bugro .cupmn { transform: rotateY(-180deg); backface-visibility: hidden; opacity: 100%; } } .a466o { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } .radio-inset { &:checked, &[aria-checked="true"] { animation: radio-inset 0.2s ease-out; background-color: currentColor; box-shadow: 0 6px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)), 0 1px 2px 0 var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { box-shadow: 0 6px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)), 0 1px 2px 0 color-mix(in oklab, var(--color-base-content) 30%, #0000); } &:before { background-color: var(--color-base-100); box-shadow: none; } } } .trwmx { @media (prefers-reduced-motion: reduce) { transition-duration: 15s; } animation: skeleton 1.8s ease-in-out infinite; } .d53yt { --motion-duration: 300ms; --motion-origin-rotate: 15deg; --motion-origin-translate-x: -25%; --motion-origin-translate-y: -10%; --motion-origin-opacity: 0; --motion-timing: var(--motion-spring-bounciest); --motion-perceptual-duration-multiplier: 5.285; --motion-opacity-timing: var(--motion-spring-smooth); --motion-opacity-perceptual-duration-multiplier: 2.035; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .d53yt { --motion-duration: 300ms; --motion-origin-rotate: 15deg; --motion-origin-translate-x: -25%; --motion-origin-translate-y: -10%; --motion-origin-opacity: 0; --motion-timing: var(--motion-spring-bounciest); --motion-perceptual-duration-multiplier: 5.285; --motion-opacity-timing: var(--motion-spring-smooth); --motion-opacity-perceptual-duration-multiplier: 2.035; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .d53yt { --motion-duration: 300ms; --motion-origin-rotate: 15deg; --motion-origin-translate-x: -25%; --motion-origin-translate-y: -10%; --motion-origin-opacity: 0; --motion-timing: var(--motion-spring-bounciest); --motion-perceptual-duration-multiplier: 5.285; --motion-opacity-timing: var(--motion-spring-smooth); --motion-opacity-perceptual-duration-multiplier: 2.035; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .d53yt { --motion-duration: 300ms; --motion-origin-rotate: 15deg; --motion-origin-translate-x: -25%; --motion-origin-translate-y: -10%; --motion-origin-opacity: 0; --motion-timing: var(--motion-spring-bounciest); --motion-perceptual-duration-multiplier: 5.285; --motion-opacity-timing: var(--motion-spring-smooth); --motion-opacity-perceptual-duration-multiplier: 2.035; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .d53yt { --motion-duration: 300ms; --motion-origin-rotate: 15deg; --motion-origin-translate-x: -25%; --motion-origin-translate-y: -10%; --motion-origin-opacity: 0; --motion-timing: var(--motion-spring-bounciest); --motion-perceptual-duration-multiplier: 5.285; --motion-opacity-timing: var(--motion-spring-smooth); --motion-opacity-perceptual-duration-multiplier: 2.035; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .d53yt { --motion-duration: 300ms; --motion-origin-rotate: 15deg; --motion-origin-translate-x: -25%; --motion-origin-translate-y: -10%; --motion-origin-opacity: 0; --motion-timing: var(--motion-spring-bounciest); --motion-perceptual-duration-multiplier: 5.285; --motion-opacity-timing: var(--motion-spring-smooth); --motion-opacity-perceptual-duration-multiplier: 2.035; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .d53yt { --motion-duration: 300ms; --motion-origin-rotate: 15deg; --motion-origin-translate-x: -25%; --motion-origin-translate-y: -10%; --motion-origin-opacity: 0; --motion-timing: var(--motion-spring-bounciest); --motion-perceptual-duration-multiplier: 5.285; --motion-opacity-timing: var(--motion-spring-smooth); --motion-opacity-perceptual-duration-multiplier: 2.035; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .d53yt { --motion-duration: 300ms; --motion-origin-rotate: 15deg; --motion-origin-translate-x: -25%; --motion-origin-translate-y: -10%; --motion-origin-opacity: 0; --motion-timing: var(--motion-spring-bounciest); --motion-perceptual-duration-multiplier: 5.285; --motion-opacity-timing: var(--motion-spring-smooth); --motion-opacity-perceptual-duration-multiplier: 2.035; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .toahy { --motion-duration: 300ms; --motion-translate-timing: var(--motion-bounce); --motion-translate-perceptual-duration-multiplier: 2; --motion-origin-opacity: 0; --motion-origin-translate-y: -25%; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .toahy { --motion-duration: 300ms; --motion-translate-timing: var(--motion-bounce); --motion-translate-perceptual-duration-multiplier: 2; --motion-origin-opacity: 0; --motion-origin-translate-y: -25%; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .toahy { --motion-duration: 300ms; --motion-translate-timing: var(--motion-bounce); --motion-translate-perceptual-duration-multiplier: 2; --motion-origin-opacity: 0; --motion-origin-translate-y: -25%; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .toahy { --motion-duration: 300ms; --motion-translate-timing: var(--motion-bounce); --motion-translate-perceptual-duration-multiplier: 2; --motion-origin-opacity: 0; --motion-origin-translate-y: -25%; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .toahy { --motion-duration: 300ms; --motion-translate-timing: var(--motion-bounce); --motion-translate-perceptual-duration-multiplier: 2; --motion-origin-opacity: 0; --motion-origin-translate-y: -25%; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .toahy { --motion-duration: 300ms; --motion-translate-timing: var(--motion-bounce); --motion-translate-perceptual-duration-multiplier: 2; --motion-origin-opacity: 0; --motion-origin-translate-y: -25%; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .toahy { --motion-duration: 300ms; --motion-translate-timing: var(--motion-bounce); --motion-translate-perceptual-duration-multiplier: 2; --motion-origin-opacity: 0; --motion-origin-translate-y: -25%; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .toahy { --motion-duration: 300ms; --motion-translate-timing: var(--motion-bounce); --motion-translate-perceptual-duration-multiplier: 2; --motion-origin-opacity: 0; --motion-origin-translate-y: -25%; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .sp742 { --motion-origin-blur: 5px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .sp742 { --motion-origin-blur: 5px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .sp742 { --motion-origin-blur: 5px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .sp742 { --motion-origin-blur: 5px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .sp742 { --motion-origin-blur: 5px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .sp742 { --motion-origin-blur: 5px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .sp742 { --motion-origin-blur: 5px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .sp742 { --motion-origin-blur: 5px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .qehrg { --motion-origin-translate-x: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .qehrg { --motion-origin-translate-x: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .qehrg { --motion-origin-translate-x: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .qehrg { --motion-origin-translate-x: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .qehrg { --motion-origin-translate-x: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .qehrg { --motion-origin-translate-x: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .qehrg { --motion-origin-translate-x: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .qehrg { --motion-origin-translate-x: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .bwwu5 { --motion-origin-translate-x: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .bwwu5 { --motion-origin-translate-x: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .bwwu5 { --motion-origin-translate-x: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .bwwu5 { --motion-origin-translate-x: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .bwwu5 { --motion-origin-translate-x: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .bwwu5 { --motion-origin-translate-x: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .bwwu5 { --motion-origin-translate-x: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .bwwu5 { --motion-origin-translate-x: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .xnw0v { --motion-origin-translate-x: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .xnw0v { --motion-origin-translate-x: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .xnw0v { --motion-origin-translate-x: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .xnw0v { --motion-origin-translate-x: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .xnw0v { --motion-origin-translate-x: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .xnw0v { --motion-origin-translate-x: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .xnw0v { --motion-origin-translate-x: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .xnw0v { --motion-origin-translate-x: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .txmv5 { --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .txmv5 { --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .txmv5 { --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .txmv5 { --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .txmv5 { --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .txmv5 { --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .txmv5 { --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .txmv5 { --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .tg9x7 { --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .tg9x7 { --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .tg9x7 { --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .tg9x7 { --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .tg9x7 { --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .tg9x7 { --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .tg9x7 { --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .tg9x7 { --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .g9s29 { --motion-origin-opacity: 0; --motion-duration: 500ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .g9s29 { --motion-origin-opacity: 0; --motion-duration: 500ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .g9s29 { --motion-origin-opacity: 0; --motion-duration: 500ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .g9s29 { --motion-origin-opacity: 0; --motion-duration: 500ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .g9s29 { --motion-origin-opacity: 0; --motion-duration: 500ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .g9s29 { --motion-origin-opacity: 0; --motion-duration: 500ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .g9s29 { --motion-origin-opacity: 0; --motion-duration: 500ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .g9s29 { --motion-origin-opacity: 0; --motion-duration: 500ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .jp38x { --motion-origin-opacity: 0; --motion-duration: 500ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .jp38x { --motion-origin-opacity: 0; --motion-duration: 500ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .jp38x { --motion-origin-opacity: 0; --motion-duration: 500ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .jp38x { --motion-origin-opacity: 0; --motion-duration: 500ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .jp38x { --motion-origin-opacity: 0; --motion-duration: 500ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .jp38x { --motion-origin-opacity: 0; --motion-duration: 500ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .jp38x { --motion-origin-opacity: 0; --motion-duration: 500ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .jp38x { --motion-origin-opacity: 0; --motion-duration: 500ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .og10t { --motion-loop-translate-y: 5%; --motion-timing: cubic-bezier(0.4, 0, 0.2, 1); --motion-translate-loop-animation: motion-translate-loop-mirror calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both var(--motion-translate-loop-count, var(--motion-loop-count)); animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .og10t { --motion-loop-translate-y: 5%; --motion-timing: cubic-bezier(0.4, 0, 0.2, 1); --motion-translate-loop-animation: motion-translate-loop-mirror calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both var(--motion-translate-loop-count, var(--motion-loop-count)); animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .og10t { --motion-loop-translate-y: 5%; --motion-timing: cubic-bezier(0.4, 0, 0.2, 1); --motion-translate-loop-animation: motion-translate-loop-mirror calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both var(--motion-translate-loop-count, var(--motion-loop-count)); animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .og10t { --motion-loop-translate-y: 5%; --motion-timing: cubic-bezier(0.4, 0, 0.2, 1); --motion-translate-loop-animation: motion-translate-loop-mirror calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both var(--motion-translate-loop-count, var(--motion-loop-count)); animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .og10t { --motion-loop-translate-y: 5%; --motion-timing: cubic-bezier(0.4, 0, 0.2, 1); --motion-translate-loop-animation: motion-translate-loop-mirror calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both var(--motion-translate-loop-count, var(--motion-loop-count)); animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .og10t { --motion-loop-translate-y: 5%; --motion-timing: cubic-bezier(0.4, 0, 0.2, 1); --motion-translate-loop-animation: motion-translate-loop-mirror calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both var(--motion-translate-loop-count, var(--motion-loop-count)); animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .og10t { --motion-loop-translate-y: 5%; --motion-timing: cubic-bezier(0.4, 0, 0.2, 1); --motion-translate-loop-animation: motion-translate-loop-mirror calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both var(--motion-translate-loop-count, var(--motion-loop-count)); animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .og10t { --motion-loop-translate-y: 5%; --motion-timing: cubic-bezier(0.4, 0, 0.2, 1); --motion-translate-loop-animation: motion-translate-loop-mirror calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both var(--motion-translate-loop-count, var(--motion-loop-count)); animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .mjz80 { --motion-loop-rotate: 360deg; --motion-timing: linear; --motion-rotate-loop-animation: motion-rotate-loop-reset calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both var(--motion-rotate-loop-count, var(--motion-loop-count)); animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .mjz80 { --motion-loop-rotate: 360deg; --motion-timing: linear; --motion-rotate-loop-animation: motion-rotate-loop-reset calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both var(--motion-rotate-loop-count, var(--motion-loop-count)); animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .mjz80 { --motion-loop-rotate: 360deg; --motion-timing: linear; --motion-rotate-loop-animation: motion-rotate-loop-reset calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both var(--motion-rotate-loop-count, var(--motion-loop-count)); animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .mjz80 { --motion-loop-rotate: 360deg; --motion-timing: linear; --motion-rotate-loop-animation: motion-rotate-loop-reset calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both var(--motion-rotate-loop-count, var(--motion-loop-count)); animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .mjz80 { --motion-loop-rotate: 360deg; --motion-timing: linear; --motion-rotate-loop-animation: motion-rotate-loop-reset calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both var(--motion-rotate-loop-count, var(--motion-loop-count)); animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .mjz80 { --motion-loop-rotate: 360deg; --motion-timing: linear; --motion-rotate-loop-animation: motion-rotate-loop-reset calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both var(--motion-rotate-loop-count, var(--motion-loop-count)); animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .mjz80 { --motion-loop-rotate: 360deg; --motion-timing: linear; --motion-rotate-loop-animation: motion-rotate-loop-reset calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both var(--motion-rotate-loop-count, var(--motion-loop-count)); animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .mjz80 { --motion-loop-rotate: 360deg; --motion-timing: linear; --motion-rotate-loop-animation: motion-rotate-loop-reset calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both var(--motion-rotate-loop-count, var(--motion-loop-count)); animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .fos4z { --motion-origin-opacity: 0.001; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .fos4z { --motion-origin-opacity: 0.001; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .fos4z { --motion-origin-opacity: 0.001; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .fos4z { --motion-origin-opacity: 0.001; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .fos4z { --motion-origin-opacity: 0.001; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .fos4z { --motion-origin-opacity: 0.001; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .fos4z { --motion-origin-opacity: 0.001; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .fos4z { --motion-origin-opacity: 0.001; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } .ih6vu { animation: var(--animate-marqueeBottom); } .cxf8l { animation: var(--animate-marqueeLeft); } .vfud5 { animation: var(--animate-marqueeRight); } .pi7b8 { animation: var(--animate-marqueeTop); } .e5o28 { animation: var(--animate-pulse); } .i1fcp { animation: progress-bar-stripes 1s linear infinite; } .xr5je { cursor: crosshair; } .ocicn { cursor: default; } .cursor-pointer { cursor: pointer; } .qqjuw { resize: both; } .rcb7y { resize: none; } .ooql8 { list-style-position: inside; } .lfhjr { list-style-type: disc; } .gevni { list-style-type: none; } .ir0id { appearance: none; } .triy8 { grid-auto-flow: column; :where(& > :not(:last-child)) { --tw-divide-x-reverse: 0; border-inline-style: var(--tw-border-style); border-inline-start-width: calc(1px * var(--tw-divide-x-reverse)); border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); --tw-divide-y-reverse: 0; border-bottom-style: var(--tw-border-style); border-top-style: var(--tw-border-style); border-top-width: calc(0px * var(--tw-divide-y-reverse)); border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse))); } overflow-x: auto; } .mb2e8 { grid-auto-flow: row; :where(& > :not(:last-child)) { --tw-divide-x-reverse: 0; border-inline-style: var(--tw-border-style); border-inline-start-width: calc(0px * var(--tw-divide-x-reverse)); border-inline-end-width: calc(0px * calc(1 - var(--tw-divide-x-reverse))); --tw-divide-y-reverse: 0; border-bottom-style: var(--tw-border-style); border-top-style: var(--tw-border-style); border-top-width: calc(1px * var(--tw-divide-y-reverse)); border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); } overflow-y: auto; } .l95h8 { grid-auto-flow: row; } .vkaai { background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 22%, #0000); } color: var(--input-color); &::before { background-color: var(--color-base-100); box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px 2px 0 oklch(0% 0 0 / 0.2); } &:checked, &[aria-checked="true"], &:has(> input:checked) { grid-template-columns: 1fr 1fr 0fr; color: var(--input-color); background-color: var(--color-base-100); border-color: var(--input-color); &:before { background-color: currentColor; @starting-style { opacity: 0; } } } } .u0ts5 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .lv2bp { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wpq5d { grid-template-columns: repeat(3, minmax(0, 1fr)); } .l3k4b { grid-template-columns: repeat(4, minmax(0, 1fr)); } .t5knj { grid-template-columns: repeat(5, minmax(0, 1fr)); } .cfuya { grid-template-columns: repeat(7, minmax(0, 1fr)); } .su9vv { grid-template-columns: repeat(12, minmax(0, 1fr)); } .flex-col { flex-direction: column; } .hebar { flex-direction: row; } .flex-nowrap { flex-wrap: nowrap; } .rstcw { flex-wrap: wrap; } .f7j16 { place-content: center; } .jpaty { place-items: end; justify-content: flex-end; } .ql3un { place-items: end; justify-content: flex-start; } .gsua4 { place-items: center; justify-content: flex-end; } .oxzuw { place-items: center; justify-content: flex-start; } .amyl8 { place-items: end; } .r0yod { place-items: center; } .xqpux { place-items: start; } .yne7o { place-items: center; } .oxhm8 { align-content: center; } .lul7i { align-items: baseline; } .items-center { align-items: center; } .vjrx8 { align-items: flex-end; } .hszfx { align-items: flex-start; } .\!justify-between { justify-content: space-between !important; } .bom0f { justify-content: space-around; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .panst { justify-content: flex-end; } .o4ov9 { justify-content: space-evenly; } .wtfov { justify-content: flex-start; } .by4f1 { justify-content: flex-end; } .vpf0e { justify-content: flex-start; } .r6qu1 { gap: calc(var(--spacing) * 0); } .gap-0\.5 { gap: calc(var(--spacing) * 0.5); } .s50zu { gap: calc(var(--spacing) * 0.25); } .s76zf { gap: calc(var(--spacing) * 1); } .pnul4 { gap: calc(var(--spacing) * 1.5); } .imwfh { gap: calc(var(--spacing) * 1.25); } .gap-2 { gap: calc(var(--spacing) * 2); } .uor50 { gap: calc(var(--spacing) * 2.5); } .gap-3 { gap: calc(var(--spacing) * 3); } .ok7pg { gap: calc(var(--spacing) * 3.5); } .gap-4 { gap: calc(var(--spacing) * 4); } .dh5um { gap: calc(var(--spacing) * 4.5); } .hq6jc { gap: calc(var(--spacing) * 4.25); } .g7dkt { gap: calc(var(--spacing) * 5); } .gwstg { gap: calc(var(--spacing) * 6); } .wsp6v { gap: calc(var(--spacing) * 6.5); } .qiwkh { gap: calc(var(--spacing) * 7); } .bsfs4 { gap: calc(var(--spacing) * 7.5); } .xyqg8 { gap: calc(var(--spacing) * 8); } .rwxds { gap: calc(var(--spacing) * 9); } .n2e5l { gap: calc(var(--spacing) * 10); } .fglfe { gap: calc(var(--spacing) * 11); } .y1qj2 { gap: calc(var(--spacing) * 12); } .jmtia { gap: calc(var(--spacing) * 14); } .hd3p0 { gap: calc(var(--spacing) * 16); } .ao83v { gap: calc(var(--spacing) * 18); } .edgfd { gap: calc(var(--spacing) * 19); } .uork9 { gap: calc(var(--spacing) * 23); } .suv0g { gap: calc(var(--spacing) * 24); } .n6x5i { gap: calc(var(--spacing) * 28); } .vbki4 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse))); } } .k47ct { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse))); } } .space-y-1 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse))); } } .n5kvg { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse))); } } .ul8h8 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))); } } .e1ki1 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse))); } } .fg70l { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse))); } } .p25di { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 3.5) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 3.5) * calc(1 - var(--tw-space-y-reverse))); } } .j8p9n { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 3.75) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 3.75) * calc(1 - var(--tw-space-y-reverse))); } } .ex0d3 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); } } .ixo57 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 4.5) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 4.5) * calc(1 - var(--tw-space-y-reverse))); } } .mckne { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse))); } } .wdl99 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 5.5) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 5.5) * calc(1 - var(--tw-space-y-reverse))); } } .wqzec { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))); } } .y51uu { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 7) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 7) * calc(1 - var(--tw-space-y-reverse))); } } .jo35k { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse))); } } .vvsts { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 9) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 9) * calc(1 - var(--tw-space-y-reverse))); } } .ojchp { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 9.5) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 9.5) * calc(1 - var(--tw-space-y-reverse))); } } .iewja { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse))); } } .bcxci { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 11) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 11) * calc(1 - var(--tw-space-y-reverse))); } } .sy2kp { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse))); } } .guyin { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 16) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 16) * calc(1 - var(--tw-space-y-reverse))); } } .gap-x-1 { column-gap: calc(var(--spacing) * 1); } .gap-x-2 { column-gap: calc(var(--spacing) * 2); } .px2ga { column-gap: calc(var(--spacing) * 2.5); } .gap-x-3 { column-gap: calc(var(--spacing) * 3); } .wuxy8 { column-gap: calc(var(--spacing) * 4); } .qmczr { column-gap: calc(var(--spacing) * 6); } .zecds { column-gap: calc(var(--spacing) * 8); } .x597n { column-gap: calc(var(--spacing) * 10); } .en581 { column-gap: calc(var(--spacing) * 12); } .kn7mn { :where(& > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse))); } } .-space-x-3 { :where(& > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * -3) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * -3) * calc(1 - var(--tw-space-x-reverse))); } } .bw0k7 { :where(& > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * -4) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * -4) * calc(1 - var(--tw-space-x-reverse))); } } .eg7lx { :where(& > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * -5) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * -5) * calc(1 - var(--tw-space-x-reverse))); } } .snt2z { :where(& > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse))); } } .jcdbx { :where(& > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-x-reverse))); } } .j1ijv { :where(& > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse))); } } .evzc6 { :where(& > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse))); } } .lv1fo { :where(& > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse))); } } .sxnzr { row-gap: calc(var(--spacing) * 2); } .sevvl { row-gap: calc(var(--spacing) * 3); } .qx9wx { row-gap: calc(var(--spacing) * 3.5); } .f6ktc { row-gap: calc(var(--spacing) * 4); } .vlnww { row-gap: calc(var(--spacing) * 5); } .yc7di { row-gap: calc(var(--spacing) * 6); } .onpak { row-gap: calc(var(--spacing) * 8); } .wwkue { row-gap: calc(var(--spacing) * 31); } .a43t3 { :where(& > :not(:last-child)) { --tw-divide-y-reverse: 0; border-bottom-style: var(--tw-border-style); border-top-style: var(--tw-border-style); border-top-width: calc(1px * var(--tw-divide-y-reverse)); border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); } } .accordion { &:where(.wnmgm) { :where(& > :not(:last-child)) { --tw-divide-y-reverse: 0; border-bottom-style: var(--tw-border-style); border-top-style: var(--tw-border-style); border-top-width: calc(1px * var(--tw-divide-y-reverse)); border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 25%, transparent); } } border-radius: var(--radius-box); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 25%, transparent); } background-color: var(--color-base-100); } } .ig1zs { :where(& > :not(:last-child)) { border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); } } } .jf3jq { :where(& > :not(:last-child)) { border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 25%, transparent); } } } .tnk34 { :where(& > :not(:last-child)) { border-color: var(--color-gray-200); } } .s4wcu { :where(& > :not(:last-child)) { border-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-neutral) 20%, transparent); } } } .b8zvl { .gjs6d { align-self: flex-start; } .mrdo1 { align-self: flex-start; } } .z7qs6 { align-self: center; } .f30ha { align-self: flex-end; } .hwbg7 { align-self: flex-start; } .x5b9r { justify-self: center; } .l6e6g { justify-self: flex-start; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cx852 { overflow: auto; } .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .u94tj { overflow-x: hidden; } .gbiad { overflow-x: scroll; } .overflow-y-auto { overflow-y: auto; } .ej8eq { overflow-y: hidden; } .pcnco { scroll-behavior: smooth; } .a2xpj { .gj4r3 & { border-radius: 0; &:first-child { border-top-left-radius: var(--radius-box); border-top-right-radius: var(--radius-box); } &:last-child { border-bottom-right-radius: var(--radius-box); border-bottom-left-radius: var(--radius-box); } } } .zy3sj { border-radius: 0; border-style: var(--tw-border-style); border-width: 0px; border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 40%, transparent); } background-color: transparent; &:focus, &:focus-within { border-bottom-style: var(--tw-border-style); border-bottom-width: 2px; border-color: var(--color-primary); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; outline-style: none; } } .lh70o { border: var(--border) solid; border-radius: var(--radius-box); border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } background-color: var(--color-base-100); padding-inline: calc(0.25rem * 4); padding-block: calc(0.25rem * 1); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-shadow-color: var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent); } } .skeleton { border-radius: var(--radius-box); background-color: var(--color-base-200); will-change: background-position; background-image: linear-gradient(105deg, #0000 0% 40%, var(--color-base-100) 50%, #0000 60% 100%); background-size: 200% auto; background-repeat: no-repeat; background-position-x: -50%; } .fftg9 { --tooltip-color: var(--color-neutral); --tooltip-text-color: var(--color-neutral-content); border-radius: var(--radius-selector); padding-inline: calc(0.25rem * 3); padding-block: calc(0.25rem * 1); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); line-height: calc(0.25rem * 5); --tw-leading: calc(0.25rem * 5); --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-shadow-color: var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent); } background-color: var(--tooltip-color); color: var(--tooltip-text-color); } .collapse { :where(.m40u1 > li:not(.rgc5h) > & > ul) { border-radius: var(--radius-box); background-color: var(--color-base-100); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-shadow-color: var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent); } } } .ehms4 { :where(li:not(.rgc5h) > *:not(ul, .collapse, .accordion-content, .rgc5h)) { border-radius: var(--radius-field); padding-inline: calc(0.25rem * 5); padding-block: calc(0.25rem * 3); font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } .rgc5h { padding-inline: calc(0.25rem * 6); padding-block: calc(0.25rem * 3); } } .ozy5f { :where(li:not(.rgc5h) > *:not(ul, .collapse, .accordion-content, .rgc5h)) { border-radius: var(--radius-field); padding-inline: calc(0.25rem * 4); padding-block: calc(0.25rem * 2.5); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } .rgc5h { padding-inline: calc(0.25rem * 4); padding-block: calc(0.25rem * 2); } } .menu-sm { :where(li:not(.rgc5h) > *:not(ul, .collapse, .accordion-content, .rgc5h)) { border-radius: var(--radius-field); padding-inline: calc(0.25rem * 3); padding-block: calc(0.25rem * 2); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .rgc5h { padding-inline: calc(0.25rem * 3); padding-block: calc(0.25rem * 2); } } .k0e62 { :where(li:not(.rgc5h) > *:not(ul, .collapse, .accordion-content, .rgc5h)) { border-radius: var(--radius-field); padding-inline: calc(0.25rem * 6); padding-block: calc(0.25rem * 3.5); font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } .rgc5h { padding-inline: calc(0.25rem * 6); padding-block: calc(0.25rem * 3); } } .p2xrw { :where(li:not(.rgc5h) > *:not(ul, .collapse, .accordion-content, .rgc5h)) { border-radius: var(--radius-field); padding-inline: calc(0.25rem * 2); padding-block: calc(0.25rem * 1); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .rgc5h { padding-inline: calc(0.25rem * 2); padding-block: calc(0.25rem * 1); } } .\!rounded-full { border-radius: calc(infinity * 1px) !important; } .yqeay { border-radius: var(--radius-xs) !important; } .n98ny { border-radius: 0.25rem; } .ruam3 { border-radius: var(--radius-2xl); } .xky00 { border-radius: var(--radius-3xl); } .e3nnr { border-radius: var(--radius-4xl); } .rounded-\[5px\] { border-radius: 5px; } .rounded-\[9\.17px\] { border-radius: 9.17px; } .rounded-box { border-radius: var(--radius-box); } .rounded-box { border-radius: var(--radius-box); } .rounded-field { border-radius: var(--radius-field); } .rounded-field { border-radius: var(--radius-field); } .rounded-full { border-radius: calc(infinity * 1px); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-md { border-radius: var(--radius-md); } .wbiaj { border-radius: 0; } .apz5k { border-radius: var(--radius-selector); } .apz5k { border-radius: var(--radius-selector); } .rounded-sm { border-radius: var(--radius-sm); } .o52cw { border-radius: var(--radius-xl); } .rounded-s-full { border-start-start-radius: calc(infinity * 1px); border-end-start-radius: calc(infinity * 1px); } .ggjud { border-top-left-radius: var(--radius-box); border-top-right-radius: var(--radius-box); padding: var(--card-p, 1.5rem); :where(&) + .ye9hj { padding-top: 0; } } .c0s18 { border-top-left-radius: var(--radius-3xl); border-top-right-radius: var(--radius-3xl); } .qkoi0 { border-top-left-radius: var(--radius-box); border-top-right-radius: var(--radius-box); } .qkoi0 { border-top-left-radius: var(--radius-box); border-top-right-radius: var(--radius-box); } .jblps { border-top-left-radius: var(--radius-field); border-top-right-radius: var(--radius-field); } .jblps { border-top-left-radius: var(--radius-field); border-top-right-radius: var(--radius-field); } .xxw5m { border-top-left-radius: calc(infinity * 1px); border-top-right-radius: calc(infinity * 1px); } .rounded-t-lg { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); } .lkgaj { border-top-left-radius: var(--radius-selector); border-top-right-radius: var(--radius-selector); } .lkgaj { border-top-left-radius: var(--radius-selector); border-top-right-radius: var(--radius-selector); } .lbfpf { border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-xl); } .peaoj { border-top-left-radius: var(--radius-box); border-bottom-left-radius: var(--radius-box); } .peaoj { border-top-left-radius: var(--radius-box); border-bottom-left-radius: var(--radius-box); } .frjve { border-top-left-radius: var(--radius-field); border-bottom-left-radius: var(--radius-field); } .frjve { border-top-left-radius: var(--radius-field); border-bottom-left-radius: var(--radius-field); } .kzewr { border-top-left-radius: var(--radius-selector); border-bottom-left-radius: var(--radius-selector); } .kzewr { border-top-left-radius: var(--radius-selector); border-bottom-left-radius: var(--radius-selector); } .uqi2u { border-top-left-radius: var(--radius-box); } .uqi2u { border-top-left-radius: var(--radius-box); } .woxel { border-top-left-radius: var(--radius-field); } .woxel { border-top-left-radius: var(--radius-field); } .gdoq2 { border-top-left-radius: var(--radius-selector); } .gdoq2 { border-top-left-radius: var(--radius-selector); } .klevu { border-top-right-radius: var(--radius-box); border-bottom-right-radius: var(--radius-box); } .klevu { border-top-right-radius: var(--radius-box); border-bottom-right-radius: var(--radius-box); } .achni { border-top-right-radius: var(--radius-field); border-bottom-right-radius: var(--radius-field); } .achni { border-top-right-radius: var(--radius-field); border-bottom-right-radius: var(--radius-field); } .zfz2h { border-top-right-radius: var(--radius-selector); border-bottom-right-radius: var(--radius-selector); } .zfz2h { border-top-right-radius: var(--radius-selector); border-bottom-right-radius: var(--radius-selector); } .k5jhb { border-top-right-radius: var(--radius-box); } .k5jhb { border-top-right-radius: var(--radius-box); } .it3jx { border-top-right-radius: var(--radius-field); } .it3jx { border-top-right-radius: var(--radius-field); } .b2zty { border-top-right-radius: var(--radius-selector); } .b2zty { border-top-right-radius: var(--radius-selector); } .szlfn { border-bottom-right-radius: var(--radius-box); border-bottom-left-radius: var(--radius-box); padding: var(--card-p, 1.5rem); :where(.ye9hj) + & { padding-top: 0; } } .uaq01 { border-bottom-right-radius: var(--radius-3xl); border-bottom-left-radius: var(--radius-3xl); } .rounded-b-\[80px\] { border-bottom-right-radius: 80px; border-bottom-left-radius: 80px; } .dclla { border-bottom-left-radius: var(--radius-box); border-bottom-right-radius: var(--radius-box); } .dclla { border-bottom-right-radius: var(--radius-box); border-bottom-left-radius: var(--radius-box); } .kae8g { border-bottom-left-radius: var(--radius-field); border-bottom-right-radius: var(--radius-field); } .kae8g { border-bottom-right-radius: var(--radius-field); border-bottom-left-radius: var(--radius-field); } .jchdh { border-bottom-right-radius: calc(infinity * 1px); border-bottom-left-radius: calc(infinity * 1px); } .athdl { border-bottom-left-radius: var(--radius-selector); border-bottom-right-radius: var(--radius-selector); } .athdl { border-bottom-right-radius: var(--radius-selector); border-bottom-left-radius: var(--radius-selector); } .uxpl1 { border-bottom-right-radius: var(--radius-xl); border-bottom-left-radius: var(--radius-xl); } .nvf1k { border-bottom-right-radius: var(--radius-3xl); } .f9fh1 { border-bottom-right-radius: var(--radius-box); } .f9fh1 { border-bottom-right-radius: var(--radius-box); } .yoakk { border-bottom-right-radius: var(--radius-field); } .yoakk { border-bottom-right-radius: var(--radius-field); } .t1gw9 { border-bottom-right-radius: var(--radius-selector); } .t1gw9 { border-bottom-right-radius: var(--radius-selector); } .rounded-bl-\[140px\] { border-bottom-left-radius: 140px; } .js2ss { border-bottom-left-radius: var(--radius-box); } .js2ss { border-bottom-left-radius: var(--radius-box); } .fe58b { border-bottom-left-radius: var(--radius-field); } .fe58b { border-bottom-left-radius: var(--radius-field); } .cp032 { border-bottom-left-radius: var(--radius-selector); } .cp032 { border-bottom-left-radius: var(--radius-selector); } .z72v1 { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-accent); background-color: var(--color-base-100); color: var(--color-accent); } .b5t7x { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-error); background-color: var(--color-base-100); color: var(--color-error); } .g30rw { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-info); background-color: var(--color-base-100); color: var(--color-info); } .p8ff3 { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-neutral); background-color: var(--color-base-100); color: var(--color-neutral); } .m72c9 { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-primary); background-color: var(--color-base-100); color: var(--color-primary); } .irdl3 { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-secondary); background-color: var(--color-base-100); color: var(--color-secondary); } .aytrt { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-success); background-color: var(--color-base-100); color: var(--color-success); } .ssp7o { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-warning); background-color: var(--color-base-100); color: var(--color-warning); } .border { border-style: var(--tw-border-style); border-width: 1px; } .yc6lh { border-style: var(--tw-border-style); border-width: 0px; } .y6iyp { border-style: var(--tw-border-style); border-width: 1px; } .sarpz { border-style: var(--tw-border-style); border-width: 2px; } .xdyhl { border-style: var(--tw-border-style); border-width: 3px; } .border-4 { border-style: var(--tw-border-style); border-width: 4px; } .ijd4w { border-style: var(--tw-border-style); border-width: 5px; } .border-\[0\.5px\] { border-style: var(--tw-border-style); border-width: 0.5px; } .border-\[3px\] { border-style: var(--tw-border-style); border-width: 3px; } .fzr24 { border-width: 2px; transition-property: background-position, box-shadow; transition-timing-function: ease-in-out; transition-duration: 0.4s; background-color: transparent; --btn-shadow: 0px 1px 3px 0px var(--btn-color, var(--color-neutral)), 0px 1px 2px -1px var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-shadow: 0px 1px 3px 0px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000), 0px 1px 2px -1px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000); } --btn-border: var(--btn-color, var(--color-neutral)); --dark-shade: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --dark-shade: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 80%, black); } background-size: 200% auto; background-image: linear-gradient( 102deg, var(--btn-color, var(--color-neutral)) 0%, var(--dark-shade) 51%, var(--btn-color, var(--color-neutral)) 100% ); @media (hover: hover) { &:hover { --btn-shadow: 0px 4px 6px -1px var(--btn-color, var(--color-neutral)), 0px 2px 4px -2px var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-shadow: 0px 4px 6px -1px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000), 0px 2px 4px -2px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000); } background-position: 99% center; } } &:focus-visible { --btn-shadow: 0px 4px 6px -1px var(--btn-color, var(--color-neutral)), 0px 2px 4px -2px var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-shadow: 0px 4px 6px -1px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000), 0px 2px 4px -2px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000); } background-position: 99% center; } &.fpdxq { --btn-shadow: 0px 4px 6px -1px var(--btn-color, var(--color-neutral)), 0px 2px 4px -2px var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-shadow: 0px 4px 6px -1px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000), 0px 2px 4px -2px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000); } background-position: 99% center; } } .btn-text { --btn-shadow: ""; color: var(--btn-color, var(--color-neutral)); --btn-bg: ""; --btn-border: ""; --btn-noise: none; border-width: 0; outline-color: var(--btn-color, var(--color-neutral)); @media (hover: hover) { &:hover { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } } } &:focus-visible { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } } &.fpdxq { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } } } .btn-soft { --btn-shadow: ""; color: var(--btn-color, var(--color-neutral)); --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, var(--color-base-100)); } border-width: 0; --btn-noise: none; &:focus-visible { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 20%, var(--color-base-100)); } } @media (hover: hover) { &:hover { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 20%, var(--color-base-100)); } } } &.fpdxq { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 20%, var(--color-base-100)); } } } .bkgk4 { border-inline-style: var(--tw-border-style); border-inline-width: 1px; } .beecb { border-inline-style: var(--tw-border-style); border-inline-width: 1px; } .rpik5 { border-block-style: var(--tw-border-style); border-block-width: 1px; } .t031v { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 1px; } .wu3qj { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 2px; } .caoth { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 3px; } .dvmo4 { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 1px; } .i2x9k { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 1px; } .sjjuj { border-top-style: var(--tw-border-style); border-top-width: 1px; } .igkva { border-top-style: var(--tw-border-style); border-top-width: 1px; } .xxqgc { border-top-style: var(--tw-border-style); border-top-width: 2px; } .qj5z5 { border-right-style: var(--tw-border-style); border-right-width: 1px; } .js1tq { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .evk6y { border-bottom-style: var(--tw-border-style); border-bottom-width: 0px; } .bthzh { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .d8vvc { &:focus, &:focus-within { --tw-border-style: none; border-style: none; --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; outline-style: none; } } .uq69g { --tw-border-style: none; border-style: none; :where(thead, tbody) { :where(tr:not(:last-child)), :where(tr:first-child:last-child) { --tw-border-style: none; border-style: none; } } } .\!border-none { --tw-border-style: none !important; border-style: none !important; } .pm2fu { --tw-border-style: dashed; border-style: dashed; } .osopx { --tw-border-style: none; border-style: none; } .s99w3 { &:before, &:after { --tw-border-style: dashed; border-style: dashed; } } .no2ye { &:before, &:after { --tw-border-style: dotted; border-style: dotted; } } .dhrcb { &.is-valid, &:has(.is-valid), .validate &:valid, .validate &:has(:valid) { border-color: var(--color-success); &:hover { @media (hover: hover) { border-color: var(--color-success); } } &:has(:hover):not(:focus, :focus-within) { border-color: var(--color-success); } &:focus, &:focus-within { --input-color: var(--color-success); } } &.is-invalid, &:has(.is-invalid), .validate &:invalid, .validate &:has(:invalid) { border-color: var(--color-error); &:hover { @media (hover: hover) { border-color: var(--color-error); } } &:has(:hover):not(:focus, :focus-within) { border-color: var(--color-error); } &:focus, &:focus-within { --input-color: var(--color-error); } } &.is-valid::file-selector-button { background-color: var(--color-success); color: var(--color-success-content); --input-color: var(--color-success); } .validate &:valid::file-selector-button { background-color: var(--color-success); color: var(--color-success-content); --input-color: var(--color-success); } &.is-invalid::file-selector-button { background-color: var(--color-error); color: var(--color-error-content); --input-color: var(--color-error); } .validate &:invalid::file-selector-button { background-color: var(--color-error); color: var(--color-error-content); --input-color: var(--color-error); } .im4zz > &.is-valid::file-selector-button { background-color: var(--color-base-100); color: var(--color-base-content); border-inline-end: var(--border) solid var(--color-success); } .validate .im4zz > &:valid::file-selector-button { background-color: var(--color-base-100); color: var(--color-base-content); border-inline-end: var(--border) solid var(--color-success); } .im4zz > &.is-invalid::file-selector-button { background-color: var(--color-base-100); color: var(--color-base-content); border-inline-end: var(--border) solid var(--color-error); } .validate .im4zz > &:invalid::file-selector-button { background-color: var(--color-base-100); color: var(--color-base-content); border-inline-end: var(--border) solid var(--color-error); } } .im4zz { & > .dhrcb.is-valid::file-selector-button { background-color: var(--color-base-100); color: var(--color-base-content); border-inline-end: var(--border) solid var(--color-success); } .validate & > .dhrcb:valid::file-selector-button { background-color: var(--color-base-100); color: var(--color-base-content); border-inline-end: var(--border) solid var(--color-success); } & > .dhrcb.is-invalid::file-selector-button { background-color: var(--color-base-100); color: var(--color-base-content); border-inline-end: var(--border) solid var(--color-error); } .validate & > .dhrcb:invalid::file-selector-button { background-color: var(--color-base-100); color: var(--color-base-content); border-inline-end: var(--border) solid var(--color-error); } &:has(.is-valid) { &:hover { @media (hover: hover) { border-color: var(--color-success); } } .y92ur { color: var(--color-success); } &:focus-within, &:not(:has(input:placeholder-shown)), &:has(.dhrcb:focus) { .y92ur { color: var(--color-success); } } } .validate &:has(:valid) { &:hover { @media (hover: hover) { border-color: var(--color-success); } } .y92ur { color: var(--color-success); } &:focus-within, &:not(:has(input:placeholder-shown)), &:has(.dhrcb:focus) { .y92ur { color: var(--color-success); } } } &:has(.is-invalid) { &:hover { @media (hover: hover) { border-color: var(--color-error); } } .y92ur { color: var(--color-error); } &:focus-within, &:not(:has(input:placeholder-shown)), &:has(.dhrcb:focus) { .y92ur { color: var(--color-error); } } } .validate &:has(:invalid) { &:hover { @media (hover: hover) { border-color: var(--color-error); } } .y92ur { color: var(--color-error); } &:focus-within, &:not(:has(input:placeholder-shown)), &:has(.dhrcb:focus) { .y92ur { color: var(--color-error); } } } } .is-invalid { .dhrcb&::file-selector-button { background-color: var(--color-error); color: var(--color-error-content); --input-color: var(--color-error); } .im4zz > .dhrcb&::file-selector-button { background-color: var(--color-base-100); color: var(--color-base-content); border-inline-end: var(--border) solid var(--color-error); } .l148e:has(~ &) { color: var(--color-error); } .l148e:has(~ * &) { color: var(--color-error); } :is(&) ~ .ipz2q { color: var(--color-error); } *:has(&) ~ .ipz2q { color: var(--color-error); } :is(&) ~ .l148e { color: var(--color-error); } :is(&) ~ .l148e * { color: var(--color-error); } :is(&) ~ * >.l148e { color: var(--color-error); } select& + .advance-select-toggle { --input-color: var(--color-error); &:focus, &:focus-within { --input-color: var(--color-error); } } .cnyqf:has(> &) { --input-color: var(--color-error); &:focus, &:focus-within { --input-color: var(--color-error); } } .im4zz:has(&) { &:hover { @media (hover: hover) { border-color: var(--color-error); } } .y92ur { color: var(--color-error); } &:focus-within, &:not(:has(input:placeholder-shown)), &:has(.dhrcb:focus) { .y92ur { color: var(--color-error); } } } .erjrn:has(&) { .a7mcv { color: var(--color-error); } &:focus-within, &:not(:has(textarea:placeholder-shown)), &:has(.g7kzo:focus) { .a7mcv { color: var(--color-error); } } } .lc1fa:has(&) { .jcikf { color: var(--color-error); } &:focus-within, &:not(:has(select:placeholder-shown)), &:has(.select:focus) { .jcikf { color: var(--color-error); } } } } .is-valid { .dhrcb&::file-selector-button { background-color: var(--color-success); color: var(--color-success-content); --input-color: var(--color-success); } .im4zz > .dhrcb&::file-selector-button { background-color: var(--color-base-100); color: var(--color-base-content); border-inline-end: var(--border) solid var(--color-success); } .l148e:has(~ &) { color: var(--color-success); } .l148e:has(~ * &) { color: var(--color-success); } :is(&) ~ .ipz2q { color: var(--color-success); } *:has(&) ~ .ipz2q { color: var(--color-success); } :is(&) ~ .l148e { color: var(--color-success); } :is(&) ~ .l148e * { color: var(--color-success); } :is(&) ~ * >.l148e { color: var(--color-success); } select& + .advance-select-toggle { --input-color: var(--color-success); &:focus, &:focus-within { --input-color: var(--color-success); } } .cnyqf:has(> &) { --input-color: var(--color-success); &:focus, &:focus-within { --input-color: var(--color-success); } } .im4zz:has(&) { &:hover { @media (hover: hover) { border-color: var(--color-success); } } .y92ur { color: var(--color-success); } &:focus-within, &:not(:has(input:placeholder-shown)), &:has(.dhrcb:focus) { .y92ur { color: var(--color-success); } } } .erjrn:has(&) { .a7mcv { color: var(--color-success); } &:focus-within, &:not(:has(textarea:placeholder-shown)), &:has(.g7kzo:focus) { .a7mcv { color: var(--color-success); } } } .lc1fa:has(&) { .jcikf { color: var(--color-success); } &:focus-within, &:not(:has(select:placeholder-shown)), &:has(.select:focus) { .jcikf { color: var(--color-success); } } } } .checkbox { &.is-valid, &:has(.is-valid), .validate &:valid, .validate &:has(:valid) { --input-color: var(--color-success); border-color: var(--input-color); &:checked, &[aria-checked="true"], &:has(> input:checked) { --input-color: var(--color-success); } } &.is-invalid, &:has(.is-invalid), .validate &:invalid, .validate &:has(:invalid) { --input-color: var(--color-error); border-color: var(--input-color); &:checked, &[aria-checked="true"], &:has(> input:checked) { --input-color: var(--color-error); } } &.is-valid, &:has(.is-valid), .validate &:valid, .validate &:has(:valid) { color: var(--color-success-content); } &.is-invalid, &:has(.is-invalid), .validate &:invalid, .validate &:has(:invalid) { color: var(--color-error-content); } } .select { &.is-valid, &:has(.is-valid), .validate &:valid, .validate &:has(:valid) { border-color: var(--color-success); &:hover { @media (hover: hover) { border-color: var(--color-success); } } &:has(:hover):not(:focus, :focus-within) { border-color: var(--color-success); } &:focus, &:focus-within { --input-color: var(--color-success); } } &.is-invalid, &:has(.is-invalid), .validate &:invalid, .validate &:has(:invalid) { border-color: var(--color-error); &:hover { @media (hover: hover) { border-color: var(--color-error); } } &:has(:hover):not(:focus, :focus-within) { border-color: var(--color-error); } &:focus, &:focus-within { --input-color: var(--color-error); } } } .g7kzo { &.is-valid, &:has(.is-valid), .validate &:valid, .validate &:has(:valid) { border-color: var(--color-success); &:hover { @media (hover: hover) { border-color: var(--color-success); } } &:has(:hover):not(:focus, :focus-within) { border-color: var(--color-success); } &:focus, &:focus-within { --input-color: var(--color-success); } } &.is-invalid, &:has(.is-invalid), .validate &:invalid, .validate &:has(:invalid) { border-color: var(--color-error); &:hover { @media (hover: hover) { border-color: var(--color-error); } } &:has(:hover):not(:focus, :focus-within) { border-color: var(--color-error); } &:focus, &:focus-within { --input-color: var(--color-error); } } } .radio { &.is-valid, &:has(.is-valid), .validate &:valid, .validate &:has(:valid) { --input-color: var(--color-success); border-color: var(--input-color); &:checked, &[aria-checked="true"], &:has(> input:checked) { --input-color: var(--color-success); } } &.is-invalid, &:has(.is-invalid), .validate &:invalid, .validate &:has(:invalid) { --input-color: var(--color-error); border-color: var(--input-color); &:checked, &[aria-checked="true"], &:has(> input:checked) { --input-color: var(--color-error); } } } .radio-inset { &.is-valid, &:has(.is-valid), .validate &:valid, .validate &:has(:valid) { --input-color: var(--color-success); border-color: var(--input-color); &:checked, &[aria-checked="true"], &:has(> input:checked) { --input-color: var(--color-success); } } &.is-invalid, &:has(.is-invalid), .validate &:invalid, .validate &:has(:invalid) { --input-color: var(--color-error); border-color: var(--input-color); &:checked, &[aria-checked="true"], &:has(> input:checked) { --input-color: var(--color-error); } } } .switch { &.is-valid, &:has(.is-valid), .validate &:valid, .validate &:has(:valid) { --input-color: var(--color-success); border-color: var(--input-color); &:checked, &[aria-checked="true"], &:has(> input:checked) { --input-color: var(--color-success); } } &.is-invalid, &:has(.is-invalid), .validate &:invalid, .validate &:has(:invalid) { --input-color: var(--color-error); border-color: var(--input-color); &:checked, &[aria-checked="true"], &:has(> input:checked) { --input-color: var(--color-error); } } } .\!border-base-content\/40 { border-color: var(--color-base-content) !important; @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 40%, transparent) !important; } } .zxhkg { border-color: var(--color-accent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-accent) 10%, transparent); } } .vs64y { border-color: var(--color-base-100); } .fszab { border-color: var(--color-base-content); } .rk66e { border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 0%, transparent); } } .lslkt { border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } } .border-base-content\/15 { border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 15%, transparent); } } .border-base-content\/20 { border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); } } .mc8aa { border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 25%, transparent); } } .border-base-content\/40 { border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 40%, transparent); } } .v72nh { border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } .i8exa { border-color: var(--color-error); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-error) 20%, transparent); } } .aokby { border-color: var(--color-info); } .okdhi { border-color: var(--color-info); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-info) 10%, transparent); } } .idohz { border-color: var(--color-info); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-info) 20%, transparent); } } .q5k9g { border-color: var(--color-info); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-info) 30%, transparent); } } .border-primary { border-color: var(--color-primary); } .wwup6 { border-color: var(--color-primary-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary-content) 40%, transparent); } } .ak9rl { border-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary) 10%, transparent); } } .mtcm0 { border-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary) 15%, transparent); } } .sofzg { border-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary) 20%, transparent); } } .reqd3 { border-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary) 30%, transparent); } } .nahd9 { border-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary) 50%, transparent); } } .t5dl9 { border-color: var(--color-secondary-content); } .j0k4a { border-color: var(--color-secondary); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-secondary) 50%, transparent); } } .b3eng { border-color: var(--color-success); } .l22ec { border-color: var(--color-success); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-success) 10%, transparent); } } .neui5 { border-color: var(--color-success); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-success) 20%, transparent); } } .fvt8a { border-color: var(--color-warning); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-warning) 10%, transparent); } } .mxw9o { border-color: var(--color-warning); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-warning) 20%, transparent); } } .zxjov { border-color: var(--color-warning); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-warning) 30%, transparent); } } .rrlx2 { border-color: color-mix(in srgb, #fff 10%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } .ttc0q { border-color: color-mix(in srgb, #fff 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 20%, transparent); } } .rswq8 { border-color: color-mix(in srgb, #fff 40%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 40%, transparent); } } .j17sf { border-color: color-mix(in srgb, #fff 80%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 80%, transparent); } } .ay41c { &:before, &:after { border-color: var(--color-accent); } } .svm94 { &:before, &:after { border-color: var(--color-error); } } .s5a2o { &:before, &:after { border-color: var(--color-info); } } .tt4by { &:before, &:after { border-color: var(--color-neutral); } } .kgzp9 { &:before, &:after { border-color: var(--color-primary); } } .l43jy { &:before, &:after { border-color: var(--color-secondary); } } .lhr2y { &:before, &:after { border-color: var(--color-success); } } .wp50a { &:before, &:after { border-color: var(--color-warning); } } .cydqm { border-inline-start-color: transparent; } .h6kat { border: none; backdrop-filter: blur(var(--glass-blur, 40px)); background-color: #0000; background-image: linear-gradient(135deg, oklch(100% 0 0 / var(--glass-opacity, 30%)) 0%, oklch(0% 0 0 / 0%) 100%), linear-gradient( var(--glass-reflect-degree, 100deg), oklch(100% 0 0 / var(--glass-reflect-opacity, 5%)) 25%, oklch(0% 0 0 / 0%) 25% ); box-shadow: 0 0 0 1px oklch(100% 0 0 / var(--glass-border-opacity, 20%)) inset, 0 0 0 2px oklch(0% 0 0 / 5%); text-shadow: 0 1px oklch(0% 0 0 / var(--glass-text-shadow-opacity, 5%)); } .im4zz { & .dhrcb::file-selector-button { background-color: var(--color-base-100); color: var(--color-base-content); border-inline-end: var(--border) solid var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-inline-end: var(--border) solid color-mix(in oklab, var(--color-base-content) 40%, #0000); } outline: none; } } .dropdown-active { background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 10%, transparent); } color: var(--color-primary); } .xj05d { background-color: var(--color-accent); color: var(--color-accent-content); } .fvrsd { background-color: var(--color-error); color: var(--color-error-content); } .k36pm { background-color: var(--color-info); color: var(--color-info-content); } .progress-primary { background-color: var(--color-primary); color: var(--color-primary-content); } .tgk31 { background-color: var(--color-secondary); color: var(--color-secondary-content); } .baqku { background-color: var(--color-success); color: var(--color-success-content); } .ecllv { background-color: var(--color-warning); color: var(--color-warning-content); } .select-active { background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 10%, transparent); } color: var(--color-primary); } .bhlu7 { background-color: var(--color-accent); color: var(--color-accent); } .wh65g { background-color: var(--color-error); color: var(--color-error); } .f1f6o { background-color: var(--color-info); color: var(--color-info); } .hl0xi { background-color: var(--color-primary); color: var(--color-primary); } .ekkzj { background-color: var(--color-secondary); color: var(--color-secondary); } .eqxpp { background-color: var(--color-success); color: var(--color-success); } .hcitv { background-color: var(--color-warning); color: var(--color-warning); } .rhgj0 { background-color: var(--color-accent); color: var(--color-accent-content); } .k54et { background-color: var(--color-error); color: var(--color-error-content); } .jkmz5 { background-color: var(--color-info); color: var(--color-info-content); } .foq4f { background-color: var(--color-neutral); color: var(--color-neutral-content); } .vh9tb { background-color: var(--color-primary); color: var(--color-primary-content); } .b2rel { background-color: var(--color-secondary); color: var(--color-secondary-content); } .bcu9u { color: var(--color-accent); background-color: var(--color-accent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-accent) 10%, var(--color-base-100)); } } .gcsr0 { color: var(--color-error); background-color: var(--color-error); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-error) 10%, var(--color-base-100)); } } .t841z { color: var(--color-info); background-color: var(--color-info); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-info) 10%, var(--color-base-100)); } } .m0q8s { color: var(--color-neutral); background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, var(--color-base-100)); } } .u4br4 { color: var(--color-primary); background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 10%, var(--color-base-100)); } } .jgtlq { color: var(--color-secondary); background-color: var(--color-secondary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-secondary) 10%, var(--color-base-100)); } } .e1330 { color: var(--color-success); background-color: var(--color-success); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-success) 10%, var(--color-base-100)); } } .h9x0s { color: var(--color-warning); background-color: var(--color-warning); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-warning) 10%, var(--color-base-100)); } } .u9m9h { background-color: var(--color-success); color: var(--color-success-content); } .enxw7 { background-color: var(--color-warning); color: var(--color-warning-content); } .pay07 { tbody { tr { &:nth-child(even) { background-color: var(--color-base-200); :where(.hm072 tr th) { background-color: var(--color-base-200); } } &.bsnfb { &, &:nth-child(even) { &:hover { @media (hover: hover) { background-color: var(--color-base-200); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-200) 80%, transparent); } } } } } &.wgkb6 { &, &:nth-child(even) { &:hover { @media (hover: hover) { background-color: var(--color-base-200); } } } } } } } .\!bg-base-100 { background-color: var(--color-base-100) !important; } .elkxe { background-color: var(--color-accent); } .w6dz7 { background-color: var(--color-accent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-accent) 5%, transparent); } } .cye65 { background-color: var(--color-accent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-accent) 10%, transparent); } } .dtwq9 { background-color: var(--color-accent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-accent) 20%, transparent); } } .b7yw7 { background-color: var(--color-accent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-accent) 50%, transparent); } } .wqfsl { background-color: var(--color-amber-400); } .bg-base-100 { background-color: var(--color-base-100); } .bg-base-200 { background-color: var(--color-base-200); } .wng2h { background-color: var(--color-base-200); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-200) 50%, transparent); } } .rlwsz { background-color: var(--color-base-200); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-200) 60%, transparent); } } .u4chj { background-color: var(--color-base-200); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-200) 80%, transparent); } } .vfofu { background-color: var(--color-base-300); } .gjwbn { background-color: var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-300) 5%, transparent); } } .zerog { background-color: var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-300) 6%, transparent); } } .bg-base-300\/60 { background-color: var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-300) 60%, transparent); } } .wf2px { background-color: var(--color-base-content); } .le84y { background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content) 5%, transparent); } } .sdnml { background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content) 6%, transparent); } } .wkju0 { background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } } .evynt { background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); } } .gk2r5 { background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content) 80%, transparent); } } .zvpil { background-color: var(--color-black); } .rhadb { background-color: color-mix(in srgb, #000 40%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 40%, transparent); } } .jswdp { background-color: var(--color-blue-100); } .g19j1 { background-color: var(--color-blue-300); } .eoigd { background-color: var(--color-blue-600); } .uxt9l { background-color: var(--color-blue-700); } .w86kj { background-color: var(--color-cyan-800); } .djr2n { background-color: var(--color-emerald-500); } .vmqxb { background-color: var(--color-error); } .sjl3e { background-color: var(--color-error); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-error) 5%, transparent); } } .bg-error\/10 { background-color: var(--color-error); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-error) 10%, transparent); } } .oqyyk { background-color: var(--color-error); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-error) 20%, transparent); } } .y3ezy { background-color: var(--color-gray-50); } .l94ix { background-color: var(--color-gray-100); } .mjhq3 { background-color: var(--color-gray-900); } .xk8k1 { background-color: var(--color-green-400); } .xikx7 { background-color: var(--color-info); } .bg-info\/10 { background-color: var(--color-info); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-info) 10%, transparent); } } .swrhx { background-color: var(--color-info); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-info) 20%, transparent); } } .h1ui3 { background-color: var(--color-info); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-info) 50%, transparent); } } .f1qyb { background-color: var(--color-lime-300); } .bb4xy { background-color: var(--color-neutral); } .eo69s { background-color: var(--color-neutral-800); } .m96c4 { background-color: var(--color-neutral-content); } .bg-neutral\/10 { background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } } .u97tc { background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent); } } .i8buq { background-color: var(--color-orange-300); } .s523w { background-color: var(--color-orange-500); } .ghtxa { background-color: var(--color-pink-100); } .cpvil { background-color: var(--color-pink-500); } .bg-primary { background-color: var(--color-primary); } .gohht { background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 1%, transparent); } } .bg-primary\/5 { background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 5%, transparent); } } .bg-primary\/10 { background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 10%, transparent); } } .do5bt { background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 15%, transparent); } } .gbvbw { background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 20%, transparent); } } .scg42 { background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 30%, transparent); } } .czca6 { background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 45%, transparent); } } .usu37 { background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 50%, transparent); } } .v7hzd { background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 51%, transparent); } } .aowpc { background-color: var(--color-purple-400); } .dll2n { background-color: var(--color-purple-950); } .sbon9 { background-color: var(--color-red-300); } .v1lh1 { background-color: var(--color-red-500); } .l0ek7 { background-color: var(--color-secondary); } .bg-secondary\/10 { background-color: var(--color-secondary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-secondary) 10%, transparent); } } .d3stg { background-color: var(--color-secondary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-secondary) 20%, transparent); } } .p42tz { background-color: var(--color-secondary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-secondary) 30%, transparent); } } .v1y1s { background-color: var(--color-sky-950); } .dpxv5 { background-color: var(--color-stone-300); } .d5ltf { background-color: var(--color-stone-500); } .dht2q { background-color: var(--color-success); } .zavfa { background-color: var(--color-success); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-success) 5%, transparent); } } .bg-success\/10 { background-color: var(--color-success); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-success) 10%, transparent); } } .ye5ar { background-color: var(--color-success); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-success) 20%, transparent); } } .ttf3j { background-color: var(--color-success); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-success) 50%, transparent); } } .t6m9g { background-color: var(--color-teal-600); } .rgg26 { background-color: transparent; } .bg-transparent\! { background-color: transparent !important; } .bhbpe { background-color: var(--color-violet-600); } .f1dig { background-color: var(--color-warning); } .v6ba5 { background-color: var(--color-warning); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-warning) 4%, transparent); } } .rbpwl { background-color: var(--color-warning); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-warning) 5%, transparent); } } .bg-warning\/10 { background-color: var(--color-warning); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-warning) 10%, transparent); } } .fp5mw { background-color: var(--color-warning); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-warning) 20%, transparent); } } .j0zd6 { background-color: var(--color-warning); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-warning) 50%, transparent); } } .vsfcc { background-color: var(--color-white); } .faj6i { background-color: color-mix(in srgb, #fff 60%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 60%, transparent); } } .nnb9f { td:nth-child(even), th:nth-child(even) { background-color: var(--color-base-200); } } .s8z7w { --tw-gradient-position: to bottom; @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: to bottom in oklab; } background-image: linear-gradient(var(--tw-gradient-stops)); } .e58fx { --tw-gradient-position: to right; @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: to right in oklab; } background-image: linear-gradient(var(--tw-gradient-stops)); } .b4e1x { --tw-gradient-position: to bottom in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .tnumv { --tw-gradient-position: to bottom right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .b1zdx { --tw-gradient-position: to right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-radial-\[at_50\%_100\%\] { --tw-gradient-position: at 50% 100%; background-image: radial-gradient(var(--tw-gradient-stops,at 50% 100%)); } .bg-radial-\[at_94\%_92\%\] { --tw-gradient-position: at 94% 92%; background-image: radial-gradient(var(--tw-gradient-stops,at 94% 92%)); } .zkfx1 { background-image: linear-gradient( 45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent ); background-size: 0.75rem 0.75rem; } .ycxk7 { --darker-shade: var(--gradient-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --darker-shade: color-mix(in oklab, var(--gradient-color, var(--color-neutral)) 80%, black); } background-image: linear-gradient( var(--gradient-angle, 135deg), var(--gradient-color, var(--color-neutral)) 0%, var(--darker-shade) 100% ); } .bg-\[url\(\'\.\.\/\.\.\/img\/ai-tool-landing-page\/blur-layers\/ai-tool-layer-blur\.png\'\)\] { background-image: url('../../img/ai-tool-landing-page/blur-layers/ai-tool-layer-blur.png'); } .bg-\[url\(\'\.\.\/\.\.\/img\/common\/illustrations\/auth-background-2\.png\'\)\] { background-image: url('../../img/common/illustrations/auth-background-2.png'); } .bg-\[url\(\'\.\.\/\.\.\/img\/common\/illustrations\/auth-background\.png\'\)\] { background-image: url('../../img/common/illustrations/auth-background.png'); } .bg-\[url\(\'\.\.\/\.\.\/img\/free-landing-page\/free-layer-blur\.png\'\)\] { background-image: url('../../img/free-landing-page/free-layer-blur.png'); } .bg-\[url\(\'\.\.\/\.\.\/img\/mobile-app-landing-page\/grid-bg\.png\'\)\] { background-image: url('../../img/mobile-app-landing-page/grid-bg.png'); } .bg-\[url\(\'\.\.\/\.\.\/img\/mobile-app-landing-page\/layer-blur-2\.png\'\)\] { background-image: url('../../img/mobile-app-landing-page/layer-blur-2.png'); } .bg-\[url\(\'\.\.\/\.\.\/img\/saas-landing-page\/layer-blur\.png\'\)\] { background-image: url('../../img/saas-landing-page/layer-blur.png'); } .bg-\[url\(\'\.\.\/\.\.\/img\/saas-landing-page\/saas-login-background\.png\'\)\] { background-image: url('../../img/saas-landing-page/saas-login-background.png'); } .bg-\[url\(\'\.\.\/\.\.\/img\/template-agency\/cta-pattern\.png\'\)\] { background-image: url('../../img/template-agency/cta-pattern.png'); } .bg-\[url\(\'\.\.\/\.\.\/img\/template-agency\/home-page\/vertical-bar-bg\.png\'\)\] { background-image: url('../../img/template-agency/home-page/vertical-bar-bg.png'); } .nw7lj { background-image: repeating-linear-gradient( 45deg, var(--color-base-200), var(--color-base-200) 2px, var(--color-base-100) 3px, var(--color-base-100) 6px ); } .m6wmf { --tw-gradient-from: color-mix(in srgb, #000 0%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-black) 0%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .x1pga { --tw-gradient-from: var(--color-info); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .f5dee { --tw-gradient-from: var(--color-info); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-info) 10%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .wcf3m { --tw-gradient-from: var(--color-primary); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .jwue2 { --tw-gradient-from: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-primary) 5%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .swkk5 { --tw-gradient-from: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-primary) 6%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .uoik8 { --tw-gradient-from: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-primary) 10%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .hkdwa { --tw-gradient-from: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-primary) 15%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .h6m0o { --tw-gradient-from: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-primary) 20%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .ccnwt { --tw-gradient-from: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-primary) 30%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .b7axh { --tw-gradient-from: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-primary) 40%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .dy3mu { --tw-gradient-from: var(--color-success); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-success) 10%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .me7pg { --tw-gradient-from: transparent; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .rly36 { --tw-gradient-from: var(--color-warning); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-warning) 10%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .ksi9r { --tw-gradient-from: var(--color-white); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .sdlio { --tw-gradient-from: color-mix(in srgb, #fff 2%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-white) 2%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .azfd9 { --tw-gradient-from-position: 5%; } .b11n8 { --tw-gradient-via: var(--color-error); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .zr7kp { --tw-gradient-via: var(--color-error); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-via: color-mix(in oklab, var(--color-error) 10%, transparent); } --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .ovan0 { --tw-gradient-via: var(--color-primary); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .fsstl { --tw-gradient-via: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-via: color-mix(in oklab, var(--color-primary) 10%, transparent); } --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .ot7oy { --tw-gradient-via: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-via: color-mix(in oklab, var(--color-primary) 20%, transparent); } --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .xdgbn { --tw-gradient-via: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-via: color-mix(in oklab, var(--color-primary) 30%, transparent); } --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .pynwn { --tw-gradient-via: var(--color-warning); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-via: color-mix(in oklab, var(--color-warning) 10%, transparent); } --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .l2ivk { --tw-gradient-to: var(--color-accent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--color-accent) 10%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .v9mno { --tw-gradient-to: var(--color-base-200); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .j5c9i { --tw-gradient-to: color-mix(in srgb, #000 80%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--color-black) 80%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .xaqq4 { --tw-gradient-to: color-mix(in srgb, #000 85%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--color-black) 85%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .bd3uq { --tw-gradient-to: var(--color-error); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .x90ca { --tw-gradient-to: var(--color-error); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--color-error) 6%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .lhsbr { --tw-gradient-to: var(--color-error); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--color-error) 30%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .ombt3 { --tw-gradient-to: var(--color-gray-100); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .tlohw { --tw-gradient-to: var(--color-gray-200); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .sscqo { --tw-gradient-to: var(--color-info); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .pomnr { --tw-gradient-to: var(--color-primary); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .fykk7 { --tw-gradient-to: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--color-primary) 10%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .vda4t { --tw-gradient-to: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--color-primary) 60%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .cjozo { --tw-gradient-to: var(--color-success); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .gn9xr { --tw-gradient-to: var(--color-success); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--color-success) 10%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .f6u5t { --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .oo868 { --tw-gradient-to: var(--color-warning); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .brcj3 { --tw-gradient-to-position: 30%; } .erojf { --tw-gradient-to-position: 40%; } .rkxop { --tw-gradient-to-position: 45%; } .fe1be { --tw-gradient-to-position: 50%; } .ituj2 { --tw-gradient-to-position: 60%; } .ut7pl { --tw-gradient-to-position: 80%; } .uxuib { --tw-gradient-to-position: 85%; } .e0ktx { --tw-gradient-to-position: 90%; } .bebc6 { --tw-gradient-to-position: 95%; } .cpm3u { --tw-gradient-to-position: 98%; } .a7yym { --tw-gradient-to-position: 100%; } .wx2fa { mask-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_rXNP%7Banimation:spinner_YeBj .8s infinite%7D@keyframes spinner_YeBj%7B0%25%7Banimation-timing-function:cubic-bezier(0.33,0,.66,.33);cy:5px%7D46.875%25%7Bcy:20px;rx:4px;ry:4px%7D50%25%7Banimation-timing-function:cubic-bezier(0.33,.66,.66,1);cy:20.5px;rx:4.8px;ry:3px%7D53.125%25%7Brx:4px;ry:4px%7D100%25%7Bcy:5px%7D%7D%3C/style%3E%3Cellipse class='spinner_rXNP' cx='12' cy='5' rx='4' ry='4'/%3E%3C/svg%3E"); } .gd3ea { mask-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_hzlK%7Banimation:spinner_vc4H .8s linear infinite;animation-delay:-.8s%7D.spinner_koGT%7Banimation-delay:-.65s%7D.spinner_YF1u%7Banimation-delay:-.5s%7D@keyframes spinner_vc4H%7B0%25%7By:1px;height:22px%7D93.75%25%7By:5px;height:14px;opacity:.2%7D%7D%3C/style%3E%3Crect class='spinner_hzlK' x='1' y='1' width='6' height='22'/%3E%3Crect class='spinner_hzlK spinner_koGT' x='9' y='1' width='6' height='22'/%3E%3Crect class='spinner_hzlK spinner_YF1u' x='17' y='1' width='6' height='22'/%3E%3C/svg%3E"); } .eomik { mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_qM83%7Banimation:spinner_8HQG 1.05s infinite%7D.spinner_oXPr%7Banimation-delay:.1s%7D.spinner_ZTLf%7Banimation-delay:.2s%7D@keyframes spinner_8HQG%7B0%25,57.14%25%7Banimation-timing-function:cubic-bezier(0.33,.66,.66,1);transform:translate(0)%7D28.57%25%7Banimation-timing-function:cubic-bezier(0.33,0,.66,.33);transform:translateY(-6px)%7D100%25%7Btransform:translate(0)%7D%7D%3C/style%3E%3Ccircle class='spinner_qM83' cx='4' cy='12' r='3'/%3E%3Ccircle class='spinner_qM83 spinner_oXPr' cx='12' cy='12' r='3'/%3E%3Ccircle class='spinner_qM83 spinner_ZTLf' cx='20' cy='12' r='3'/%3E%3C/svg%3E"); } .u9ysh { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='shape-rendering: auto;' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Cpath fill='none' stroke='%230a0a0a' stroke-width='10' stroke-dasharray='205.271142578125 51.317785644531256' d='M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z' stroke-linecap='round' style='transform:scale(0.8);transform-origin:50px 50px'%3E%3Canimate attributeName='stroke-dashoffset' repeatCount='indefinite' dur='2s' keyTimes='0;1' values='0;256.58892822265625'%3E%3C/animate%3E%3C/path%3E%3C/svg%3E"); } .i1584 { mask-image: url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg' stroke='%23fff'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite' /%3E%3Canimate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite' /%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite' /%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite' /%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); } .loading-spinner { mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } .mask-\[linear-gradient\(var\(--color-base-200\)\,var\(--color-base-200\)_18\%\,transparent_100\%\)\] { mask-image: linear-gradient(var(--color-base-200),var(--color-base-200) 18%,transparent 100%); } .mx2fn { mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle fill='black' cx='100' cy='100' r='100' fill-rule='evenodd'/%3e%3c/svg%3e"); } .f4wya { mask-image: url("data:image/svg+xml,%3csvg width='192' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 0 58.779 19.098 36.327 50v61.804l-36.327 50L96 200l-58.779-19.098-36.327-50V69.098l36.327-50z' fill-rule='evenodd'/%3e%3c/svg%3e"); } .kukb3 { mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m100 0 100 100-100 100L0 100z' fill-rule='evenodd'/%3e%3c/svg%3e"); } .pokf2 { mask-image: url("data:image/svg+xml,%3csvg width='200' height='185' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e"); } .nmgci { mask-image: url("data:image/svg+xml,%3csvg width='182' height='201' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M.3 65.486c0-9.196 6.687-20.063 14.211-25.078l61.86-35.946c8.36-5.016 20.899-5.016 29.258 0l61.86 35.946c8.36 5.015 14.211 15.882 14.211 25.078v71.055c0 9.196-6.687 20.063-14.211 25.079l-61.86 35.945c-8.36 4.18-20.899 4.18-29.258 0L14.51 161.62C6.151 157.44.3 145.737.3 136.54V65.486Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e"); } .yu5b1 { mask-image: url("data:image/svg+xml,%3csvg width='200' height='182' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M64.786 181.4c-9.196 0-20.063-6.687-25.079-14.21L3.762 105.33c-5.016-8.36-5.016-20.9 0-29.259l35.945-61.86C44.723 5.851 55.59 0 64.786 0h71.055c9.196 0 20.063 6.688 25.079 14.211l35.945 61.86c4.18 8.36 4.18 20.899 0 29.258l-35.945 61.86c-4.18 8.36-15.883 14.211-25.079 14.211H64.786Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e"); } .c4aav { mask-image: url("data:image/svg+xml,%3csvg width='200' height='154' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M46.154 0H200l-46.154 153.846H0z' fill-rule='evenodd'/%3e%3c/svg%3e"); } .z5gfw { mask-image: url("data:image/svg+xml,%3csvg width='200' height='154' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M153.846 0H0l46.154 153.846H200z' fill-rule='evenodd'/%3e%3c/svg%3e"); } .wuxpq { mask-image: url("data:image/svg+xml,%3csvg width='154' height='201' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M.077 47.077v153.846l153.846-46.154V.923z' fill-rule='evenodd'/%3e%3c/svg%3e"); } .blzro { mask-image: url("data:image/svg+xml,%3csvg width='154' height='201' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M153.923 47.077v153.846L.077 154.77V.923z' fill-rule='evenodd'/%3e%3c/svg%3e"); } .g88y7 { mask-image: url("data:image/svg+xml,%3csvg width='192' height='181' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 0 95.106 69.098-36.327 111.804H37.22L.894 69.098z' fill-rule='evenodd'/%3e%3c/svg%3e"); } .rmmno { mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 0h200v200H0z' fill-rule='evenodd'/%3e%3c/svg%3e"); } .hyhak { mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 0C20 0 0 20 0 100s20 100 100 100 100-20 100-100S180 0 100 0Z'/%3e%3c/svg%3e"); } .okgs4 { mask-image: url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z' fill-rule='evenodd'/%3e%3c/svg%3e"); } .up9fq { mask-image: url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 153.044-58.779 26.243 7.02-63.513L.894 68.481l63.117-13.01L96 0l31.989 55.472 63.117 13.01-43.347 47.292 7.02 63.513z' fill-rule='evenodd'/%3e%3c/svg%3e"); } .p8fob { mask-image: url("data:image/svg+xml,%3csvg width='174' height='149' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m87 148.476-86.603.185L43.86 74.423 87 0l43.14 74.423 43.463 74.238z' fill-rule='evenodd'/%3e%3c/svg%3e"); } .spk7k { mask-image: url("data:image/svg+xml,%3csvg width='174' height='150' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m87 .738 86.603-.184-43.463 74.238L87 149.214 43.86 74.792.397.554z' fill-rule='evenodd'/%3e%3c/svg%3e"); } .wdzil { mask-image: url("data:image/svg+xml,%3csvg width='150' height='174' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m149.369 87.107.185 86.603-74.239-43.463L.893 87.107l74.422-43.14L149.554.505z' fill-rule='evenodd'/%3e%3c/svg%3e"); } .wokvl { mask-image: url("data:image/svg+xml,%3csvg width='150' height='174' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M.631 87.107.446.505l74.239 43.462 74.422 43.14-74.422 43.14L.446 173.71z' fill-rule='evenodd'/%3e%3c/svg%3e"); } .mx2fn { --tw-mask-radial-shape: circle; } .ocvh9 { background-size: contain; } .x6eay { background-size: cover; } .yupln { background-clip: text; } .n1w69 { background-position: center; } .khd9q { background-repeat: no-repeat; } .fbqi8 { mask-size: contain; mask-repeat: no-repeat; mask-position: center; } .h1q5q { mask-size: 200%; mask-position: left; &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { mask-position: right; } } .lbca4 { mask-size: 200%; mask-position: right; &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { mask-position: left; } } .zg5er { mask-repeat: repeat; } .fill-black { fill: var(--color-black); } .fill-gray-200 { fill: var(--color-gray-200); } .r6d6q { object-fit: contain; } .fdjmf { object-fit: cover; } .ux4zn { object-position: left; } .ijcjd { object-position: top; } .rvxv7 { padding: calc(0.25rem * 1); --size: calc(var(--size-selector, 0.25rem) * 7); } .js4we { padding: calc(0.25rem * 0.5); --size: calc(var(--size-selector, 0.25rem) * 6); } .checkbox-sm { padding: calc(0.25rem * 0.5); --size: calc(var(--size-selector, 0.25rem) * 5); } .byaoj { padding: calc(0.25rem * 1.5); --size: calc(var(--size-selector, 0.25rem) * 8); } .b8edb { padding: calc(0.25rem * 0.5); --size: calc(var(--size-selector, 0.25rem) * 4); } .klp54 { padding: 0.3125rem; &:is([type="radio"]) { --size: calc(var(--size-selector, 0.25rem) * 7); } } .qbb2n { padding: 0.25rem; &:is([type="radio"]) { --size: calc(var(--size-selector, 0.25rem) * 6); } } .dl534 { padding: 0.1875rem; &:is([type="radio"]) { --size: calc(var(--size-selector, 0.25rem) * 5); } } .zrleq { padding: 0.375rem; &:is([type="radio"]) { --size: calc(var(--size-selector, 0.25rem) * 8); } } .n15gf { padding: 0.1875rem; &:is([type="radio"]) { --size: calc(var(--size-selector, 0.25rem) * 4); } } .sr7n6 { padding: calc(var(--spacing) * 0); } .p-0\.5 { padding: calc(var(--spacing) * 0.5); } .hdorq { padding: calc(var(--spacing) * 0.25); } .wmzhi { padding: calc(var(--spacing) * 1); } .j0xyu { padding: calc(var(--spacing) * 1.75); } .p-2 { padding: calc(var(--spacing) * 2); } .v88wa { padding: calc(var(--spacing) * 2.5); } .p-3 { padding: calc(var(--spacing) * 3); } .fnpvi { padding: calc(var(--spacing) * 3.5); } .p-4 { padding: calc(var(--spacing) * 4); } .cnm22 { padding: calc(var(--spacing) * 5); } .lon1p { padding: calc(var(--spacing) * 6); } .ftrle { padding: calc(var(--spacing) * 8); } .st2uc { padding: calc(var(--spacing) * 10); } .wc52r { padding: calc(var(--spacing) * 12); } .io9ge { padding: 1px; } .rgc5h { padding-inline: calc(0.25rem * 4); padding-block: calc(0.25rem * 2); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-base-content); } .vgw2f { :where(thead, tfoot) { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } :not(thead, tfoot) tr { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } :where(th, td) { padding-inline: calc(0.25rem * 6); padding-block: calc(0.25rem * 4); } } .z3ag3 { :where(thead, tfoot) { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } :not(thead, tfoot) tr { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } :where(th, td) { padding-inline: calc(0.25rem * 5); padding-block: calc(0.25rem * 3); } } .mqgsz { :where(thead, tfoot) { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } :not(thead, tfoot) tr { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } :where(th, td) { padding-inline: calc(0.25rem * 3); padding-block: calc(0.25rem * 2); } } .eorb8 { :where(thead, tfoot) { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } :not(thead, tfoot) tr { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } :where(th, td) { padding-inline: calc(0.25rem * 6); padding-block: calc(0.25rem * 5); } } .wssdu { :where(thead, tfoot) { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } :not(thead, tfoot) tr { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } :where(th, td) { padding-inline: calc(0.25rem * 2); padding-block: calc(0.25rem * 1); } } .svgeq { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --size: calc(var(--size-selector, 0.25rem) * 7); padding-inline: calc(0.25rem * 3.5); } .ux5vw { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --size: calc(var(--size-selector, 0.25rem) * 6); padding-inline: calc(0.25rem * 3); } .f8e5t { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --size: calc(var(--size-selector, 0.25rem) * 5); padding-inline: calc(0.25rem * 2); } .uo0q6 { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --size: calc(var(--size-selector, 0.25rem) * 8); padding-inline: calc(0.25rem * 4); } .pi9fx { --size: calc(var(--size-selector, 0.25rem) * 4); font-size: 0.625rem; padding-inline: calc(0.25rem * 1.5); } .\!px-2\.5 { padding-inline: calc(var(--spacing) * 2.5) !important; } .g2nyp { padding-inline: calc(var(--spacing) * 0); } .ftslg { padding-inline: calc(var(--spacing) * 0.5); } .iupj6 { padding-inline: calc(var(--spacing) * 1); } .x923f { padding-inline: calc(var(--spacing) * 1.5); } .px-2 { padding-inline: calc(var(--spacing) * 2); } .s2gwj { padding-inline: calc(var(--spacing) * 2.5); } .zewrv { padding-inline: calc(var(--spacing) * 2.25); } .px-3 { padding-inline: calc(var(--spacing) * 3); } .zagyk { padding-inline: calc(var(--spacing) * 3.5); } .geo6r { padding-inline: calc(var(--spacing) * 3.75); } .jg6o1 { padding-inline: calc(var(--spacing) * 4); } .bwbc9 { padding-inline: calc(var(--spacing) * 4.5); } .d06kq { padding-inline: calc(var(--spacing) * 5); } .r688b { padding-inline: calc(var(--spacing) * 6); } .kac9r { padding-inline: calc(var(--spacing) * 6.25); } .qha27 { padding-inline: calc(var(--spacing) * 7); } .rdtkd { padding-inline: calc(var(--spacing) * 8); } .fyxtl { padding-inline: calc(var(--spacing) * 10); } .bed3y { padding-inline: calc(var(--spacing) * 14); } .\!py-0\.5 { padding-block: calc(var(--spacing) * 0.5) !important; } .cx8yf { padding-block: calc(var(--spacing) * 0); } .zdvn3 { padding-block: calc(var(--spacing) * 0.5); } .c491g { padding-block: calc(var(--spacing) * 0.25); } .ra4dd { padding-block: calc(var(--spacing) * 0.75); } .s4xwu { padding-block: calc(var(--spacing) * 1); } .lg5zu { padding-block: calc(var(--spacing) * 1.5); } .py-2 { padding-block: calc(var(--spacing) * 2); } .adykd { padding-block: calc(var(--spacing) * 2.5); } .dqcaz { padding-block: calc(var(--spacing) * 3); } .b169d { padding-block: calc(var(--spacing) * 3.5); } .zi8x7 { padding-block: calc(var(--spacing) * 3.75); } .j2yjb { padding-block: calc(var(--spacing) * 4); } .c12ir { padding-block: calc(var(--spacing) * 4.5); } .zzuvb { padding-block: calc(var(--spacing) * 4.75); } .whv09 { padding-block: calc(var(--spacing) * 5); } .avdkq { padding-block: calc(var(--spacing) * 5.5); } .gdkxl { padding-block: calc(var(--spacing) * 6); } .larcd { padding-block: calc(var(--spacing) * 6.5); } .ea6ol { padding-block: calc(var(--spacing) * 8); } .rfcxe { padding-block: calc(var(--spacing) * 8.25); } .coikx { padding-block: calc(var(--spacing) * 9); } .ksr7w { padding-block: calc(var(--spacing) * 9.5); } .nrhlo { padding-block: calc(var(--spacing) * 10); } .mfp6n { padding-block: calc(var(--spacing) * 12); } .kstkf { padding-block: calc(var(--spacing) * 14); } .it6ol { padding-block: calc(var(--spacing) * 16); } .hvkyf { padding-block: calc(var(--spacing) * 17.25); } .ps5po { padding-block: calc(var(--spacing) * 19.5); } .py-\[2\.5px\] { padding-block: 2.5px; } .py-\[2\.6px\] { padding-block: 2.6px; } .il49l { padding-inline-start: calc(var(--spacing) * 2) !important; } .tg8ui { padding-inline-start: calc(var(--spacing) * 0); } .k4gvc { padding-inline-start: calc(var(--spacing) * 3.5); } .i60a0 { padding-inline-start: calc(var(--spacing) * 4); } .b0s89 { padding-inline-start: calc(var(--spacing) * 5); } .y5ezs { padding-inline-start: calc(var(--spacing) * 6); } .hv6mg { padding-inline-start: calc(var(--spacing) * 8); } .bquj5 { padding-inline-start: calc(var(--spacing) * 10); } .r0ve9 { padding-inline-start: calc(var(--spacing) * 12); } .z6woz { padding-inline-end: calc(var(--spacing) * 8) !important; } .i14mn { padding-inline-end: calc(var(--spacing) * 0); } .gv96g { padding-inline-end: calc(var(--spacing) * 0.75); } .chaea { padding-inline-end: calc(var(--spacing) * 1.5); } .ic4yb { padding-inline-end: calc(var(--spacing) * 1.25); } .nqyul { padding-inline-end: calc(var(--spacing) * 3); } .q51iv { padding-inline-end: calc(var(--spacing) * 4); } .gjpmv { padding-top: calc(var(--spacing) * 0); } .r6gip { padding-top: calc(var(--spacing) * 0.5); } .w860q { padding-top: calc(var(--spacing) * 0.25); } .up8bf { padding-top: calc(var(--spacing) * 1); } .nlte9 { padding-top: calc(var(--spacing) * 2.5); } .pt-3 { padding-top: calc(var(--spacing) * 3); } .ralcb { padding-top: calc(var(--spacing) * 4); } .gpsmv { padding-top: calc(var(--spacing) * 4.5); } .xiz7p { padding-top: calc(var(--spacing) * 5); } .ri9pf { padding-top: calc(var(--spacing) * 6); } .x050r { padding-top: calc(var(--spacing) * 8); } .h4h80 { padding-top: calc(var(--spacing) * 8.5); } .w4tdp { padding-top: calc(var(--spacing) * 10); } .qucu5 { padding-top: calc(var(--spacing) * 10.5); } .nev12 { padding-top: calc(var(--spacing) * 12); } .so1m7 { padding-top: calc(var(--spacing) * 15); } .q07r8 { padding-top: calc(var(--spacing) * 16); } .x5so3 { padding-top: calc(var(--spacing) * 18); } .z5ze0 { padding-top: calc(var(--spacing) * 20); } .veirl { padding-top: calc(var(--spacing) * 28); } .od4au { padding-top: calc(var(--spacing) * 34.5); } .tg43q { padding-top: calc(var(--spacing) * 40); } .e04pk { padding-right: calc(var(--spacing) * 1); } .kt36m { padding-bottom: calc(var(--spacing) * 0) !important; } .i8777 { padding-bottom: calc(var(--spacing) * 0); } .iouls { padding-bottom: calc(var(--spacing) * 2); } .afbo5 { padding-bottom: calc(var(--spacing) * 3); } .a0x4g { padding-bottom: calc(var(--spacing) * 3.5); } .j8pnm { padding-bottom: calc(var(--spacing) * 4); } .mxs84 { padding-bottom: calc(var(--spacing) * 5); } .gcxxl { padding-bottom: calc(var(--spacing) * 6); } .mdfnm { padding-bottom: calc(var(--spacing) * 7); } .g824a { padding-bottom: calc(var(--spacing) * 8); } .dz3hl { padding-bottom: calc(var(--spacing) * 9.5); } .hcjf0 { padding-bottom: calc(var(--spacing) * 14); } .bvf4o { padding-bottom: calc(var(--spacing) * 16); } .ko5we { padding-bottom: calc(var(--spacing) * 20); } .ewj9x { padding-bottom: calc(var(--spacing) * 24); } .itlka { padding-bottom: calc(var(--spacing) * 28); } .ict3m { padding-bottom: calc(var(--spacing) * 32); } .text-center { text-align: center; } .vqkgy { text-align: end; } .cafm1 { text-align: left; } .zl497 { text-align: start; } .align-bottom { vertical-align: bottom; } .kyl6s { vertical-align: middle; } .zm8th { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); color: var(--color-base-content); } .i0xs0 { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-base-content); } .itowd { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); color: var(--color-base-content); } .yj0bf { --card-p: 2rem; font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); .zm8th { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } } .kr60j { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --card-p: 1.5rem; .zm8th { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } } .dxofv { --card-p: 1rem; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); .zm8th { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } } .alaq6 { --card-p: 2.5rem; font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); .zm8th { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } } .v9bv1 { --card-p: 0.5rem; font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); .zm8th { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } .zu6it { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --btn-p: 1.25rem; --size: calc(var(--size-field, 0.25rem) * 11.5); } .xms07 { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --btn-p: 1rem; --size: calc(var(--size-field, 0.25rem) * 9.5); } .btn-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --btn-p: 0.75rem; --size: calc(var(--size-field, 0.25rem) * 7.5); } .jlxjq { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --btn-p: 1.5rem; --size: calc(var(--size-field, 0.25rem) * 14); } .eo67p { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --btn-p: 0.5rem; --size: calc(var(--size-field, 0.25rem) * 6); } .z8aj2 { & :where(.o1ezv) { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --size: calc(var(--size-field, 0.25rem) * 11.5); --tab-p: 1.25rem; } } .iuz2a { & :where(.o1ezv) { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --size: calc(var(--size-field, 0.25rem) * 9.5); --tab-p: 1rem; } } .hipaa { & :where(.o1ezv) { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --size: calc(var(--size-field, 0.25rem) * 7.5); --tab-p: 0.75rem; } } .l7fhj { & :where(.o1ezv) { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); --size: calc(var(--size-field, 0.25rem) * 14); --tab-p: 1.5rem; } } .kho7f { & :where(.o1ezv) { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --size: calc(var(--size-field, 0.25rem) * 6); --tab-p: 0.5rem; } } .y9wpt { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --size: calc(var(--size-selector, 0.25rem) * 7.5); } .go84f { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --size: calc(var(--size-selector, 0.25rem) * 6.5); } .d2oau { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --size: calc(var(--size-selector, 0.25rem) * 5.5); } .uycvh { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --size: calc(var(--size-selector, 0.25rem) * 8.5); } .rqc9x { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --size: calc(var(--size-field, 0.25rem) * 11.5); } .b2oou { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --size: calc(var(--size-field, 0.25rem) * 9.5); } .bf5jw { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --size: calc(var(--size-field, 0.25rem) * 7.5); } .pov5y { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); --size: calc(var(--size-field, 0.25rem) * 14); } .zgj6w { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --size: calc(var(--size-field, 0.25rem) * 6); } .\!text-sm { font-size: var(--text-sm) !important; line-height: var(--tw-leading, var(--text-sm--line-height)) !important; } .ub558 { &::file-selector-button { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } } .mq7ho { &::file-selector-button { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } .v9d15 { &::file-selector-button { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .vltuq { &::file-selector-button { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } } .nnav1 { &::file-selector-button { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } } .kjid9 { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } .uvgsn { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } .wbo0w { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } .o02de { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); } .b1z3t { font-size: var(--text-6xl); line-height: var(--tw-leading, var(--text-6xl--line-height)); } .y3o4r { font-size: var(--text-7xl); line-height: var(--tw-leading, var(--text-7xl--line-height)); } .hx71m { font-size: var(--text-8xl); line-height: var(--tw-leading, var(--text-8xl--line-height)); } .jdvuc { font-size: var(--text-9xl); line-height: var(--tw-leading, var(--text-9xl--line-height)); } .text-base { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } .vbksn { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .rxrs3 { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } .text-xs { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .xp64d { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } .t22re { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } .l4uju { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .k1toe { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } .fjc8l { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .rizms { --size: calc(var(--size-selector, 0.25rem) * 4.5); font-size: 0.625rem; } .text-\[6px\] { font-size: 6px; } .text-\[8px\] { font-size: 8px; } .text-\[10\.5px\] { font-size: 10.5px; } .text-\[10px\] { font-size: 10px; } .text-\[11px\] { font-size: 11px; } .text-\[22px\] { font-size: 22px; } .text-\[24\.7px\] { font-size: 24.7px; } .text-\[50px\] { font-size: 50px; } .vfz92 { --tw-leading: calc(var(--spacing) * 6); line-height: calc(var(--spacing) * 6); } .leading-\[1\.2\] { --tw-leading: 1.2; line-height: 1.2; } .leading-\[1\.15\] { --tw-leading: 1.15; line-height: 1.15; } .leading-\[1\.25\] { --tw-leading: 1.25; line-height: 1.25; } .leading-\[18px\] { --tw-leading: 18px; line-height: 18px; } .iv2jo { --tw-leading: 1; line-height: 1; } .xqqwc { --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); } .\!font-medium { --tw-font-weight: var(--font-weight-medium) !important; font-weight: var(--font-weight-medium) !important; } .\!font-semibold { --tw-font-weight: var(--font-weight-semibold) !important; font-weight: var(--font-weight-semibold) !important; } .dlofz { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .w52ei { --tw-font-weight: var(--font-weight-light); font-weight: var(--font-weight-light); } .font-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .b2wp1 { --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } .c6j2u { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .wvgwk { --tw-tracking: var(--tracking-wide); letter-spacing: var(--tracking-wide); } .we8pu { --tw-tracking: var(--tracking-wider); letter-spacing: var(--tracking-wider); } .myv0i { text-wrap: balance; } .text-nowrap { text-wrap: nowrap; } .text-wrap { text-wrap: wrap; } .g5op1 { word-break: break-all; } .whitespace-nowrap { white-space: nowrap; } .d2fx0 { --btn-shadow: ""; --btn-bg: ""; color: var(--btn-color, var(--color-neutral)); --btn-border: var(--btn-color, var(--color-neutral)); --btn-noise: none; outline-color: var(--btn-color, var(--color-neutral)); @media (hover: hover) { &:hover { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } } } &:focus-visible { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } outline-width: 1px; } &.fpdxq { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } } } .l148e { &:has(~ .is-valid) { color: var(--color-success); } &:has(~ * .is-valid) { color: var(--color-success); } .validate &:has(~ :valid) { color: var(--color-success); } .validate &:has(~ * :valid) { color: var(--color-success); } :is(.is-valid) ~ & { color: var(--color-success); } :is(.is-valid) ~ & * { color: var(--color-success); } :is(.is-valid) ~ * >& { color: var(--color-success); } .validate :is(:valid) ~ & { color: var(--color-success); } .validate :is(:valid) ~ & * { color: var(--color-success); } .validate :is(:valid) ~ * >& { color: var(--color-success); } &:has(~ .is-invalid) { color: var(--color-error); } &:has(~ * .is-invalid) { color: var(--color-error); } .validate &:has(~ :invalid) { color: var(--color-error); } .validate &:has(~ * :invalid) { color: var(--color-error); } :is(.is-invalid) ~ & { color: var(--color-error); } :is(.is-invalid) ~ & * { color: var(--color-error); } :is(.is-invalid) ~ * >& { color: var(--color-error); } .validate :is(:invalid) ~ & { color: var(--color-error); } .validate :is(:invalid) ~ & * { color: var(--color-error); } .validate :is(:invalid) ~ * >& { color: var(--color-error); } } .ipz2q { :is(.is-valid) ~ & { color: var(--color-success); } *:has(.is-valid) ~ & { color: var(--color-success); } .validate :is(:valid) ~ & { color: var(--color-success); } .validate *:has(:valid) ~ & { color: var(--color-success); } :is(.is-invalid) ~ & { color: var(--color-error); } *:has(.is-invalid) ~ & { color: var(--color-error); } .validate :is(:invalid) ~ & { color: var(--color-error); } .validate *:has(:invalid) ~ & { color: var(--color-error); } } .lc1fa { &:has(.is-valid) { .jcikf { color: var(--color-success); } &:focus-within, &:not(:has(select:placeholder-shown)), &:has(.select:focus) { .jcikf { color: var(--color-success); } } } .validate &:has(:valid) { .jcikf { color: var(--color-success); } &:focus-within, &:not(:has(select:placeholder-shown)), &:has(.select:focus) { .jcikf { color: var(--color-success); } } } &:has(.is-invalid) { .jcikf { color: var(--color-error); } &:focus-within, &:not(:has(select:placeholder-shown)), &:has(.select:focus) { .jcikf { color: var(--color-error); } } } .validate &:has(:invalid) { .jcikf { color: var(--color-error); } &:focus-within, &:not(:has(select:placeholder-shown)), &:has(.select:focus) { .jcikf { color: var(--color-error); } } } } .erjrn { &:has(.is-valid) { .a7mcv { color: var(--color-success); } &:focus-within, &:not(:has(textarea:placeholder-shown)), &:has(.g7kzo:focus) { .a7mcv { color: var(--color-success); } } } .validate &:has(:valid) { .a7mcv { color: var(--color-success); } &:focus-within, &:not(:has(textarea:placeholder-shown)), &:has(.g7kzo:focus) { .a7mcv { color: var(--color-success); } } } &:has(.is-invalid) { .a7mcv { color: var(--color-error); } &:focus-within, &:not(:has(textarea:placeholder-shown)), &:has(.g7kzo:focus) { .a7mcv { color: var(--color-error); } } } .validate &:has(:invalid) { .a7mcv { color: var(--color-error); } &:focus-within, &:not(:has(textarea:placeholder-shown)), &:has(.g7kzo:focus) { .a7mcv { color: var(--color-error); } } } } .fvddo { color: var(--color-error-content); --alert-color: var(--color-error); } .p7n6o { color: var(--color-info-content); --alert-color: var(--color-info); } .jxkwf { color: var(--color-primary-content); --alert-color: var(--color-primary); } .zs929 { color: var(--color-success-content); --alert-color: var(--color-success); } .kttmv { color: var(--color-warning-content); --alert-color: var(--color-warning); } .mip19 { color: var(--color-accent-content); --input-color: var(--color-accent); } .flldx { color: var(--color-error-content); --input-color: var(--color-error); } .wh366 { color: var(--color-info-content); --input-color: var(--color-info); } .checkbox-primary { color: var(--color-primary-content); --input-color: var(--color-primary); } .eo3qr { color: var(--color-secondary-content); --input-color: var(--color-secondary); } .v562j { color: var(--color-success-content); --input-color: var(--color-success); } .emi05 { color: var(--color-warning-content); --input-color: var(--color-warning); } .ubbqx { color: var(--color-accent); } .njqtf { color: var(--color-base-100); } .text-base-100\! { color: var(--color-base-100) !important; } .kl777 { color: var(--color-base-100); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-100) 80%, transparent); } } .text-base-content { color: var(--color-base-content); } .text-base-content\/50 { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } .g10v8 { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 60%, transparent); } } .t3nxs { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 70%, transparent); } } .text-base-content\/80 { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 80%, transparent); } } .fmey2 { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 90%, transparent); } } .c8o8k { color: var(--color-black); } .pynml { color: color-mix(in srgb, #000 60%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-black) 60%, transparent); } } .tkm29 { color: var(--color-blue-500); } .qit39 { color: var(--color-blue-600); } .text-error { color: var(--color-error); } .one4y { color: var(--color-error-content); } .lr97b { color: var(--color-gray-500); } .mgwoh { color: var(--color-gray-600); } .ptas2 { color: var(--color-gray-700); } .dfs9h { color: var(--color-gray-800); } .gdp50 { color: var(--color-gray-900); } .text-info { color: var(--color-info); } .wg35v { color: var(--color-neutral); } .l7dhj { color: var(--color-neutral-content); } .ltdrj { color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-neutral) 80%, transparent); } } .lc9ro { color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-neutral) 90%, transparent); } } .bkk8v { color: var(--color-pink-500); } .text-primary { color: var(--color-primary); } .rec7q { color: var(--color-primary-content); } .azg8b { color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-primary) 50%, transparent); } } .text-secondary { color: var(--color-secondary); } .dkboi { color: var(--color-secondary-content); } .text-success { color: var(--color-success); } .gkd1z { color: var(--color-success-content); } .e4qoh { color: transparent; } .text-warning { color: var(--color-warning); } .psprt { color: var(--color-warning-content); } .zp04a { color: var(--color-white); } .ag7z7 { color: color-mix(in srgb, #fff 60%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 60%, transparent); } } .duyww { color: color-mix(in srgb, #fff 80%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 80%, transparent); } } .mg1gn { color: color-mix(in srgb, #fff 90%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 90%, transparent); } } .srh7x { color: var(--color-yellow-400); } .f5clr { text-transform: capitalize; } .vuw3k { text-transform: lowercase; } .agxhj { text-transform: none; } .uppercase { text-transform: uppercase; } .ya9ex { font-style: normal; } .ndd0f { .hu72o:where(&) { text-decoration-line: none; @media (hover:hover) { &:hover { @media (hover: hover) { text-decoration-line: underline; } } } } } .tp2r0 { text-decoration-line: line-through; } .ky3yk { text-decoration-line: none; } .h7x0t { text-decoration-line: underline; } .jlpsw { text-underline-offset: 2px; } .fgqxl { text-underline-offset: 3px; } .bugro { .cupmn { opacity: 0%; } .i69pz { opacity: 100%; } } .opacity-0 { opacity: 0%; } .mrje7 { opacity: 10%; } .h2g63 { opacity: 14%; } .r54sv { opacity: 20%; } .as3wo { opacity: 30%; } .m3c8e { opacity: 40%; } .p71g6 { opacity: 80%; } .opacity-100 { opacity: 100%; } .c19ri { --tw-shadow: 0 0 #0000 !important; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important; } .bnzzl { --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-lg { --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-md { --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .lptl6 { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-sm { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .e8a5n { --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .nm5wp { --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .sjay8 { --tw-shadow-color: var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 10%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-base-300\/20 { --tw-shadow-color: var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent); } } .pf367 { --tw-shadow-color: var(--color-error); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-error) 40%, transparent) var(--tw-shadow-alpha), transparent); } } .mtq5q { --tw-shadow-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 30%, transparent) var(--tw-shadow-alpha), transparent); } } .ring-primary { --tw-ring-color: var(--color-primary); } .cvzwp { outline-style: var(--tw-outline-style); outline-width: 1px; } .outline-\[3\.5px\] { outline-style: var(--tw-outline-style); outline-width: 3.5px; } .jptri { outline-offset: 10px; } .bahbs { outline-color: var(--color-accent); } .qm4z4 { outline-color: var(--color-success); } .lec4j { outline-color: var(--color-success); @supports (color: color-mix(in lab, red, red)) { outline-color: color-mix(in oklab, var(--color-success) 40%, transparent); } } .xgh9u { --tw-blur: blur(8px); 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,); } .blur-2xl { --tw-blur: blur(var(--blur-2xl)); 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,); } .mgp47 { --tw-blur: blur(var(--blur-3xl)); 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,); } .l7cx9 { --tw-grayscale: grayscale(100%); 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,); } .xkw0s { 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,); } .n3yjq { --tw-backdrop-blur: blur(var(--blur-md)); -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } .tc2dt { --tw-backdrop-blur: blur(var(--blur-sm)); -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } .grth1 { --tw-backdrop-saturate: saturate(200%); -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } .enggc { -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } .carousel-slide { transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: 700ms; --tw-duration: 700ms; } .transition { 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, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-\[height\] { transition-property: height; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-all { transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .z0dwk { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .ue40f { transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .mz6b3 { transition-property: box-shadow; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .qwypx { transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .g6luf { --tw-duration: 100ms; transition-duration: 100ms; } .u84b4 { --tw-duration: 200ms; transition-duration: 200ms; } .duration-300 { --tw-duration: 300ms; transition-duration: 300ms; } .duration-500 { --tw-duration: 500ms; transition-duration: 500ms; } .e0pl5 { --tw-duration: 800ms; transition-duration: 800ms; } .bkyb7 { --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } .aycxs { --tw-ease: var(--ease-out); transition-timing-function: var(--ease-out); } .advance-select-toggle { select.is-valid + & { --input-color: var(--color-success); &:focus, &:focus-within { --input-color: var(--color-success); } } .validate select:has(~ * > .selected) + & { --input-color: var(--color-success); &:focus, &:focus-within { --input-color: var(--color-success); } } select.is-invalid + & { --input-color: var(--color-error); &:focus, &:focus-within { --input-color: var(--color-error); } } .validate select:not(:has(~ * > .selected)) + & { --input-color: var(--color-error); &:focus, &:focus-within { --input-color: var(--color-error); } } } .cnyqf { &:has(> .is-valid) { --input-color: var(--color-success); &:focus, &:focus-within { --input-color: var(--color-success); } } &:has(> .is-invalid) { --input-color: var(--color-error); &:focus, &:focus-within { --input-color: var(--color-error); } } } .k02r0 { --indicator-s: 50%; --indicator-e: 50%; --indicator-x: -50%; [dir="rtl"] & { --indicator-x: 50%; } } .uz4jy { --indicator-s: auto; --indicator-e: 0; --indicator-x: 50%; [dir="rtl"] & { --indicator-x: -50%; } } .vid98 { --indicator-s: 0; --indicator-e: auto; --indicator-x: -50%; [dir="rtl"] & { --indicator-x: 50%; } } .rfsfh { --indicator-t: auto; --indicator-b: 0; --indicator-y: 50%; } .mhoiw { --indicator-t: 50%; --indicator-b: 50%; --indicator-y: -50%; } .dtj8h { --indicator-t: 0; --indicator-b: auto; --indicator-y: -50%; } .yqv0p { --range-thumb-border-width: 4px; --range-track-height: 10px; --range-thumb-size: 18px; } .s749d { --range-thumb-border-width: 3px; --range-track-height: 8px; --range-thumb-size: 16px; } .dmkj0 { --range-thumb-border-width: 2.5px; --range-track-height: 6px; --range-thumb-size: 12px; } .yd486 { --range-thumb-border-width: 4px; --range-track-height: 12px; --range-thumb-size: 20px; } .vjicg { --range-thumb-border-width: 2.5px; --range-track-height: 4px; --range-thumb-size: 10px; } .ksqnj { --tw-outline-style: none !important; outline-style: none !important; } .lvocf { --badge-color: var(--color-accent); --badge-fg: var(--color-accent-content); } .badge-error { --badge-color: var(--color-error); --badge-fg: var(--color-error-content); } .badge-info { --badge-color: var(--color-info); --badge-fg: var(--color-info-content); } .badge-primary { --badge-color: var(--color-primary); --badge-fg: var(--color-primary-content); } .badge-secondary { --badge-color: var(--color-secondary); --badge-fg: var(--color-secondary-content); } .badge-success { --badge-color: var(--color-success); --badge-fg: var(--color-success-content); } .badge-warning { --badge-color: var(--color-warning); --badge-fg: var(--color-warning-content); } .jc8wi { --btn-color: var(--color-accent); --btn-fg: var(--color-accent-content); } .mhx0w { --btn-color: var(--color-error); --btn-fg: var(--color-error-content); } .wtdlg { --btn-color: var(--color-info); --btn-fg: var(--color-info-content); } .kmsa0 { --btn-color: var(--color-neutral); --btn-fg: var(--color-neutral-content); } .btn-primary { --btn-color: var(--color-primary); --btn-fg: var(--color-primary-content); } .vwrdi { --btn-color: var(--color-secondary); --btn-fg: var(--color-secondary-content); } .q99v6 { --btn-color: var(--color-success); --btn-fg: var(--color-success-content); } .kmxtk { --btn-color: var(--color-warning); --btn-fg: var(--color-warning-content); } .j9km8 { .validate &:has(:valid), &:has(.is-valid) { --input-color: var(--color-success); } .validate &:has(:invalid), &:has(.is-invalid) { --input-color: var(--color-error); } } .v0hk9 { .validate &:has(:valid), &:has(.is-valid) { --input-color: var(--color-success); } .validate &:has(:invalid), &:has(.is-invalid) { --input-color: var(--color-error); } } .c4x7j { --motion-timing: cubic-bezier(0, 0, 0.2, 1); --motion-perceptual-duration-multiplier: 1; } .c4x7j { --motion-timing: cubic-bezier(0, 0, 0.2, 1); --motion-perceptual-duration-multiplier: 1; } .c4x7j { --motion-timing: cubic-bezier(0, 0, 0.2, 1); --motion-perceptual-duration-multiplier: 1; } .c4x7j { --motion-timing: cubic-bezier(0, 0, 0.2, 1); --motion-perceptual-duration-multiplier: 1; } .c4x7j { --motion-timing: cubic-bezier(0, 0, 0.2, 1); --motion-perceptual-duration-multiplier: 1; } .c4x7j { --motion-timing: cubic-bezier(0, 0, 0.2, 1); --motion-perceptual-duration-multiplier: 1; } .c4x7j { --motion-timing: cubic-bezier(0, 0, 0.2, 1); --motion-perceptual-duration-multiplier: 1; } .c4x7j { --motion-timing: cubic-bezier(0, 0, 0.2, 1); --motion-perceptual-duration-multiplier: 1; } .t2dot { --tw-outline-style: none; outline-style: none; } .selected { .validate select:has(~ * > &) + .advance-select-toggle { --input-color: var(--color-success); &:focus, &:focus-within { --input-color: var(--color-success); } } } .lh2op { &:is([type="checkbox"]), &:has([type="checkbox"]) { --switch-p: 0.25rem; --size: calc(var(--size-selector, 0.25rem) * 7); } } .hfr2s { &:is([type="checkbox"]), &:has([type="checkbox"]) { --switch-p: 0.1875rem; --size: calc(var(--size-selector, 0.25rem) * 6); } } .switch-sm { &:is([type="checkbox"]), &:has([type="checkbox"]) { --switch-p: 0.125rem; --size: calc(var(--size-selector, 0.25rem) * 5); } } .qencl { &:is([type="checkbox"]), &:has([type="checkbox"]) { --switch-p: 0.3125rem; --size: calc(var(--size-selector, 0.25rem) * 8); } } .ujgtf { &:is([type="checkbox"]), &:has([type="checkbox"]) { --switch-p: 0.125rem; --size: calc(var(--size-selector, 0.25rem) * 4); } } .iijgy { > :where(li) { --timeline-col-start: 0.5rem; --timeline-row-start: minmax(0, 1fr); } } .f3pdi { --tooltip-color: var(--color-accent); --tooltip-text-color: var(--color-accent-content); } .pczbn { --tooltip-color: var(--color-error); --tooltip-text-color: var(--color-error-content); } .abmjo { --tooltip-color: var(--color-info); --tooltip-text-color: var(--color-info-content); } .bm958 { --tooltip-color: var(--color-primary); --tooltip-text-color: var(--color-primary-content); } .oclxm { --tooltip-color: var(--color-secondary); --tooltip-text-color: var(--color-secondary-content); } .ra2nw { --tooltip-color: var(--color-success); --tooltip-text-color: var(--color-success-content); } .o3twc { --tooltip-color: var(--color-warning); --tooltip-text-color: var(--color-warning-content); } .\[--adaptive\:adaptive\] { --adaptive: adaptive; } .\[--adaptive\:none\] { --adaptive: none; } .\[--auto-close\:inside\] { --auto-close: inside; } .\[--auto-close\:lg\] { --auto-close: lg; } .\[--auto-close\:xl\] { --auto-close: xl; } .\[--btn-color\:\#24202D\] { --btn-color: #24202D; } .\[--btn-color\:\#FDFDFE\] { --btn-color: #FDFDFE; } .\[--btn-color\:\#fff\] { --btn-color: #fff; } .\[--btn-color\:var\(--color-base-100\)\] { --btn-color: var(--color-base-100); } .\[--btn-color\:var\(--color-base-200\)\] { --btn-color: var(--color-base-200); } .\[--btn-color\:white\] { --btn-color: white; } .\[--link-color\:var\(--color-base-content\)\] { --link-color: var(--color-base-content); } .\[--mega-menu\:true\] { --mega-menu: true; } .\[--offset\:5\] { --offset: 5; } .\[--offset\:9\] { --offset: 9; } .\[--offset\:15\] { --offset: 15; } .\[--offset\:21\] { --offset: 21; } .\[--offset\:24\] { --offset: 24; } .\[--placement\:bottom-end\] { --placement: bottom-end; } .\[--placement\:bottom\] { --placement: bottom; } .\[--placement\:left-start\] { --placement: left-start; } .\[--placement\:right-start\] { --placement: right-start; } .\[--placement\:right\] { --placement: right; } .\[--placement\:top\] { --placement: top; } .\[--strategy\:static\] { --strategy: static; } .\[--trigger\:hover\] { --trigger: hover; } .\[scrollbar-width\:thin\] { scrollbar-width: thin; } .kr5oo { --gradient-color: var(--color-accent); } .yo3dw { --gradient-color: var(--color-error); } .e9bba { --gradient-color: var(--color-info); } .pi7dz { --gradient-color: var(--color-primary); } .ep3u3 { --gradient-color: var(--color-secondary); } .qfgz3 { --gradient-color: var(--color-success); } .ey38d { --gradient-color: var(--color-warning); } .ymiaj { --link-color: var(--color-accent); } .pyhtr { --link-color: var(--color-error); } .eyu8v { --link-color: var(--color-info); } .c8bz7 { --link-color: var(--color-neutral); } .hd1nj { --link-color: var(--color-primary); } .gfqh5 { --link-color: var(--color-secondary); } .n5imr { --link-color: var(--color-success); } .x1yd6 { --link-color: var(--color-warning); } .yzj7g { --motion-delay: 100ms; } .yzj7g { --motion-delay: 100ms; } .yzj7g { --motion-delay: 100ms; } .yzj7g { --motion-delay: 100ms; } .yzj7g { --motion-delay: 100ms; } .yzj7g { --motion-delay: 100ms; } .yzj7g { --motion-delay: 100ms; } .yzj7g { --motion-delay: 100ms; } .bqx38 { --motion-delay: 200ms; } .bqx38 { --motion-delay: 200ms; } .bqx38 { --motion-delay: 200ms; } .bqx38 { --motion-delay: 200ms; } .bqx38 { --motion-delay: 200ms; } .bqx38 { --motion-delay: 200ms; } .bqx38 { --motion-delay: 200ms; } .bqx38 { --motion-delay: 200ms; } .nanml { --motion-delay: 300ms; } .nanml { --motion-delay: 300ms; } .nanml { --motion-delay: 300ms; } .nanml { --motion-delay: 300ms; } .nanml { --motion-delay: 300ms; } .nanml { --motion-delay: 300ms; } .nanml { --motion-delay: 300ms; } .nanml { --motion-delay: 300ms; } .f5une { --motion-delay: 400ms; } .f5une { --motion-delay: 400ms; } .f5une { --motion-delay: 400ms; } .f5une { --motion-delay: 400ms; } .f5une { --motion-delay: 400ms; } .f5une { --motion-delay: 400ms; } .f5une { --motion-delay: 400ms; } .f5une { --motion-delay: 400ms; } .vgfpr { --motion-delay: 600ms; } .vgfpr { --motion-delay: 600ms; } .vgfpr { --motion-delay: 600ms; } .vgfpr { --motion-delay: 600ms; } .vgfpr { --motion-delay: 600ms; } .vgfpr { --motion-delay: 600ms; } .vgfpr { --motion-delay: 600ms; } .vgfpr { --motion-delay: 600ms; } .aebyt { --motion-delay: 700ms; } .aebyt { --motion-delay: 700ms; } .aebyt { --motion-delay: 700ms; } .aebyt { --motion-delay: 700ms; } .aebyt { --motion-delay: 700ms; } .aebyt { --motion-delay: 700ms; } .aebyt { --motion-delay: 700ms; } .aebyt { --motion-delay: 700ms; } .qyefh { --motion-delay: 800ms; } .qyefh { --motion-delay: 800ms; } .qyefh { --motion-delay: 800ms; } .qyefh { --motion-delay: 800ms; } .qyefh { --motion-delay: 800ms; } .qyefh { --motion-delay: 800ms; } .qyefh { --motion-delay: 800ms; } .qyefh { --motion-delay: 800ms; } .uukl6 { --motion-delay: 900ms; } .uukl6 { --motion-delay: 900ms; } .uukl6 { --motion-delay: 900ms; } .uukl6 { --motion-delay: 900ms; } .uukl6 { --motion-delay: 900ms; } .uukl6 { --motion-delay: 900ms; } .uukl6 { --motion-delay: 900ms; } .uukl6 { --motion-delay: 900ms; } .lgsm1 { --motion-delay: 1000ms; } .lgsm1 { --motion-delay: 1000ms; } .lgsm1 { --motion-delay: 1000ms; } .lgsm1 { --motion-delay: 1000ms; } .lgsm1 { --motion-delay: 1000ms; } .lgsm1 { --motion-delay: 1000ms; } .lgsm1 { --motion-delay: 1000ms; } .lgsm1 { --motion-delay: 1000ms; } .b12ko { --motion-delay: 1100ms; } .b12ko { --motion-delay: 1100ms; } .b12ko { --motion-delay: 1100ms; } .b12ko { --motion-delay: 1100ms; } .b12ko { --motion-delay: 1100ms; } .b12ko { --motion-delay: 1100ms; } .b12ko { --motion-delay: 1100ms; } .b12ko { --motion-delay: 1100ms; } .riwxx { --motion-delay: 1200ms; } .riwxx { --motion-delay: 1200ms; } .riwxx { --motion-delay: 1200ms; } .riwxx { --motion-delay: 1200ms; } .riwxx { --motion-delay: 1200ms; } .riwxx { --motion-delay: 1200ms; } .riwxx { --motion-delay: 1200ms; } .riwxx { --motion-delay: 1200ms; } .jx50i { --motion-delay: 1300ms; } .jx50i { --motion-delay: 1300ms; } .jx50i { --motion-delay: 1300ms; } .jx50i { --motion-delay: 1300ms; } .jx50i { --motion-delay: 1300ms; } .jx50i { --motion-delay: 1300ms; } .jx50i { --motion-delay: 1300ms; } .jx50i { --motion-delay: 1300ms; } .delnf { --motion-delay: 1400ms; } .delnf { --motion-delay: 1400ms; } .delnf { --motion-delay: 1400ms; } .delnf { --motion-delay: 1400ms; } .delnf { --motion-delay: 1400ms; } .delnf { --motion-delay: 1400ms; } .delnf { --motion-delay: 1400ms; } .delnf { --motion-delay: 1400ms; } .a2yrn { --motion-delay: 1500ms; } .a2yrn { --motion-delay: 1500ms; } .a2yrn { --motion-delay: 1500ms; } .a2yrn { --motion-delay: 1500ms; } .a2yrn { --motion-delay: 1500ms; } .a2yrn { --motion-delay: 1500ms; } .a2yrn { --motion-delay: 1500ms; } .a2yrn { --motion-delay: 1500ms; } .lt1h0 { --motion-delay: 1700ms; } .lt1h0 { --motion-delay: 1700ms; } .lt1h0 { --motion-delay: 1700ms; } .lt1h0 { --motion-delay: 1700ms; } .lt1h0 { --motion-delay: 1700ms; } .lt1h0 { --motion-delay: 1700ms; } .lt1h0 { --motion-delay: 1700ms; } .lt1h0 { --motion-delay: 1700ms; } .e80lg { --motion-delay: 1900ms; } .e80lg { --motion-delay: 1900ms; } .e80lg { --motion-delay: 1900ms; } .e80lg { --motion-delay: 1900ms; } .e80lg { --motion-delay: 1900ms; } .e80lg { --motion-delay: 1900ms; } .e80lg { --motion-delay: 1900ms; } .e80lg { --motion-delay: 1900ms; } .zdwu4 { --motion-delay: 2000ms; } .zdwu4 { --motion-delay: 2000ms; } .zdwu4 { --motion-delay: 2000ms; } .zdwu4 { --motion-delay: 2000ms; } .zdwu4 { --motion-delay: 2000ms; } .zdwu4 { --motion-delay: 2000ms; } .zdwu4 { --motion-delay: 2000ms; } .zdwu4 { --motion-delay: 2000ms; } .o9i1d { --motion-delay: 2100ms; } .o9i1d { --motion-delay: 2100ms; } .o9i1d { --motion-delay: 2100ms; } .o9i1d { --motion-delay: 2100ms; } .o9i1d { --motion-delay: 2100ms; } .o9i1d { --motion-delay: 2100ms; } .o9i1d { --motion-delay: 2100ms; } .o9i1d { --motion-delay: 2100ms; } .wjy8t { --motion-delay: 2200ms; } .wjy8t { --motion-delay: 2200ms; } .wjy8t { --motion-delay: 2200ms; } .wjy8t { --motion-delay: 2200ms; } .wjy8t { --motion-delay: 2200ms; } .wjy8t { --motion-delay: 2200ms; } .wjy8t { --motion-delay: 2200ms; } .wjy8t { --motion-delay: 2200ms; } .o8gis { --motion-delay: 2300ms; } .o8gis { --motion-delay: 2300ms; } .o8gis { --motion-delay: 2300ms; } .o8gis { --motion-delay: 2300ms; } .o8gis { --motion-delay: 2300ms; } .o8gis { --motion-delay: 2300ms; } .o8gis { --motion-delay: 2300ms; } .o8gis { --motion-delay: 2300ms; } .kb9ui { --motion-delay: 2400ms; } .kb9ui { --motion-delay: 2400ms; } .kb9ui { --motion-delay: 2400ms; } .kb9ui { --motion-delay: 2400ms; } .kb9ui { --motion-delay: 2400ms; } .kb9ui { --motion-delay: 2400ms; } .kb9ui { --motion-delay: 2400ms; } .kb9ui { --motion-delay: 2400ms; } .yhxpz { --motion-delay: 2700ms; } .yhxpz { --motion-delay: 2700ms; } .yhxpz { --motion-delay: 2700ms; } .yhxpz { --motion-delay: 2700ms; } .yhxpz { --motion-delay: 2700ms; } .yhxpz { --motion-delay: 2700ms; } .yhxpz { --motion-delay: 2700ms; } .yhxpz { --motion-delay: 2700ms; } .iw4bc { --motion-delay: 3000ms; } .iw4bc { --motion-delay: 3000ms; } .iw4bc { --motion-delay: 3000ms; } .iw4bc { --motion-delay: 3000ms; } .iw4bc { --motion-delay: 3000ms; } .iw4bc { --motion-delay: 3000ms; } .iw4bc { --motion-delay: 3000ms; } .iw4bc { --motion-delay: 3000ms; } .bwvif { --motion-delay: 3300ms; } .bwvif { --motion-delay: 3300ms; } .bwvif { --motion-delay: 3300ms; } .bwvif { --motion-delay: 3300ms; } .bwvif { --motion-delay: 3300ms; } .bwvif { --motion-delay: 3300ms; } .bwvif { --motion-delay: 3300ms; } .bwvif { --motion-delay: 3300ms; } .l7hgy { --motion-delay: 3600ms; } .l7hgy { --motion-delay: 3600ms; } .l7hgy { --motion-delay: 3600ms; } .l7hgy { --motion-delay: 3600ms; } .l7hgy { --motion-delay: 3600ms; } .l7hgy { --motion-delay: 3600ms; } .l7hgy { --motion-delay: 3600ms; } .l7hgy { --motion-delay: 3600ms; } .ui2c0 { --motion-delay: 3900ms; } .ui2c0 { --motion-delay: 3900ms; } .ui2c0 { --motion-delay: 3900ms; } .ui2c0 { --motion-delay: 3900ms; } .ui2c0 { --motion-delay: 3900ms; } .ui2c0 { --motion-delay: 3900ms; } .ui2c0 { --motion-delay: 3900ms; } .ui2c0 { --motion-delay: 3900ms; } .facjg { --motion-duration: 500ms; } .facjg { --motion-duration: 500ms; } .facjg { --motion-duration: 500ms; } .facjg { --motion-duration: 500ms; } .facjg { --motion-duration: 500ms; } .facjg { --motion-duration: 500ms; } .facjg { --motion-duration: 500ms; } .facjg { --motion-duration: 500ms; } .g7r6p { --motion-duration: 600ms; } .g7r6p { --motion-duration: 600ms; } .g7r6p { --motion-duration: 600ms; } .g7r6p { --motion-duration: 600ms; } .g7r6p { --motion-duration: 600ms; } .g7r6p { --motion-duration: 600ms; } .g7r6p { --motion-duration: 600ms; } .g7r6p { --motion-duration: 600ms; } .k1yx5 { --motion-duration: 700ms; } .k1yx5 { --motion-duration: 700ms; } .k1yx5 { --motion-duration: 700ms; } .k1yx5 { --motion-duration: 700ms; } .k1yx5 { --motion-duration: 700ms; } .k1yx5 { --motion-duration: 700ms; } .k1yx5 { --motion-duration: 700ms; } .k1yx5 { --motion-duration: 700ms; } .me5kk { --motion-duration: 800ms; } .me5kk { --motion-duration: 800ms; } .me5kk { --motion-duration: 800ms; } .me5kk { --motion-duration: 800ms; } .me5kk { --motion-duration: 800ms; } .me5kk { --motion-duration: 800ms; } .me5kk { --motion-duration: 800ms; } .me5kk { --motion-duration: 800ms; } .qdbp4 { --motion-duration: 1000ms; } .qdbp4 { --motion-duration: 1000ms; } .qdbp4 { --motion-duration: 1000ms; } .qdbp4 { --motion-duration: 1000ms; } .qdbp4 { --motion-duration: 1000ms; } .qdbp4 { --motion-duration: 1000ms; } .qdbp4 { --motion-duration: 1000ms; } .qdbp4 { --motion-duration: 1000ms; } .v7j4a { --motion-duration: 1500ms; } .v7j4a { --motion-duration: 1500ms; } .v7j4a { --motion-duration: 1500ms; } .v7j4a { --motion-duration: 1500ms; } .v7j4a { --motion-duration: 1500ms; } .v7j4a { --motion-duration: 1500ms; } .v7j4a { --motion-duration: 1500ms; } .v7j4a { --motion-duration: 1500ms; } .cgtpr { --motion-duration: 3500ms; } .cgtpr { --motion-duration: 3500ms; } .cgtpr { --motion-duration: 3500ms; } .cgtpr { --motion-duration: 3500ms; } .cgtpr { --motion-duration: 3500ms; } .cgtpr { --motion-duration: 3500ms; } .cgtpr { --motion-duration: 3500ms; } .cgtpr { --motion-duration: 3500ms; } .ezu56 { --motion-duration: 10000ms; } .ezu56 { --motion-duration: 10000ms; } .ezu56 { --motion-duration: 10000ms; } .ezu56 { --motion-duration: 10000ms; } .ezu56 { --motion-duration: 10000ms; } .ezu56 { --motion-duration: 10000ms; } .ezu56 { --motion-duration: 10000ms; } .ezu56 { --motion-duration: 10000ms; } .sza80 { --input-color: var(--color-accent); } .h6t0p { --input-color: var(--color-error); } .w7q4d { --input-color: var(--color-info); } .ghnhk { --input-color: var(--color-primary); } .c7yku { --input-color: var(--color-secondary); } .yhwoy { --input-color: var(--color-success); } .dhsfl { --input-color: var(--color-warning); } .c5n5f { --range-color: var(--color-accent); } .wv02j { --range-color: var(--color-error); } .jvah2 { --range-color: var(--color-info); } .mfsql { --range-color: var(--color-primary); } .lkx0n { --range-color: var(--color-secondary); } .o98fc { --range-color: var(--color-success); } .avjlq { --range-color: var(--color-warning); } .wu6wr { &:checked, &[aria-checked="true"] { --input-color: var(--color-accent); } } .bx6v2 { &:checked, &[aria-checked="true"] { --input-color: var(--color-error); } } .n0qrs { &:checked, &[aria-checked="true"] { --input-color: var(--color-info); } } .switch-primary { &:checked, &[aria-checked="true"] { --input-color: var(--color-primary); } } .ef0rz { &:checked, &[aria-checked="true"] { --input-color: var(--color-secondary); } } .vj2oa { &:checked, &[aria-checked="true"] { --input-color: var(--color-success); } } .ldean { &:checked, &[aria-checked="true"] { --input-color: var(--color-warning); } } .\*\:flex { :is(& > *) { display: flex; } } .\*\:h-fit { :is(& > *) { height: fit-content; } } .\*\:min-h-80 { :is(& > *) { min-height: calc(var(--spacing) * 80); } } .\*\:cursor-pointer { :is(& > *) { cursor: pointer; } } .\*\:items-center { :is(& > *) { align-items: center; } } .\*\:items-start { :is(& > *) { align-items: flex-start; } } .\*\:gap-2 { :is(& > *) { gap: calc(var(--spacing) * 2); } } .\*\:gap-3 { :is(& > *) { gap: calc(var(--spacing) * 3); } } .\*\:rounded-box { :is(& > *) { border-radius: var(--radius-box); } } .\*\:rounded-box { :is(& > *) { border-radius: var(--radius-box); } } .\*\:rounded-none { :is(& > *) { border-radius: 0; } } .\*\:p-1 { :is(& > *) { padding: calc(var(--spacing) * 1); } } .\*\:p-3 { :is(& > *) { padding: calc(var(--spacing) * 3); } } .\*\:py-1 { :is(& > *) { padding-block: calc(var(--spacing) * 1); } } .\*\:font-normal { :is(& > *) { --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } } .\*\:text-nowrap { :is(& > *) { text-wrap: nowrap; } } .\*\:text-base-content { :is(& > *) { color: var(--color-base-content); } } .\*\:text-white { :is(& > *) { color: var(--color-white); } } .not-group-hover\:btn-outline { &:not(*:is(:where(.group):hover *)) { --btn-shadow: ""; --btn-bg: ""; color: var(--btn-color, var(--color-neutral)); --btn-border: var(--btn-color, var(--color-neutral)); --btn-noise: none; outline-color: var(--btn-color, var(--color-neutral)); @media (hover: hover) { &:hover { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } } } &:focus-visible { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } outline-width: 1px; } &.fpdxq { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } } } @media not (hover: hover) { --btn-shadow: ""; --btn-bg: ""; color: var(--btn-color, var(--color-neutral)); --btn-border: var(--btn-color, var(--color-neutral)); --btn-noise: none; outline-color: var(--btn-color, var(--color-neutral)); @media (hover: hover) { &:hover { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } } } &:focus-visible { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } outline-width: 1px; } &.fpdxq { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } } } } .\*\:not-last\:border-b { :is(& > *) { &:not(*:last-child) { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } } } .\*\:not-last\:border-base-content\/20 { :is(& > *) { &:not(*:last-child) { border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); } } } } .\*\:not-last\:border-base-content\/25 { :is(& > *) { &:not(*:last-child) { border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 25%, transparent); } } } } .not-hover\:btn-outline { &:not(*:hover) { --btn-shadow: ""; --btn-bg: ""; color: var(--btn-color, var(--color-neutral)); --btn-border: var(--btn-color, var(--color-neutral)); --btn-noise: none; outline-color: var(--btn-color, var(--color-neutral)); @media (hover: hover) { &:hover { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } } } &:focus-visible { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } outline-width: 1px; } &.fpdxq { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } } } @media not (hover: hover) { --btn-shadow: ""; --btn-bg: ""; color: var(--btn-color, var(--color-neutral)); --btn-border: var(--btn-color, var(--color-neutral)); --btn-noise: none; outline-color: var(--btn-color, var(--color-neutral)); @media (hover: hover) { &:hover { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } } } &:focus-visible { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } outline-width: 1px; } &.fpdxq { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } } } } .not-hover\:text-base-content { &:not(*:hover) { color: var(--color-base-content); } @media not (hover: hover) { color: var(--color-base-content); } } .not-aria-\[current\=page\]\:btn-text { &:not(*[aria-current="page"]) { --btn-shadow: ""; color: var(--btn-color, var(--color-neutral)); --btn-bg: ""; --btn-border: ""; --btn-noise: none; border-width: 0; outline-color: var(--btn-color, var(--color-neutral)); @media (hover: hover) { &:hover { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } } } &:focus-visible { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } } &.fpdxq { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } } } } .group-last\:hidden { &:is(:where(.group):last-child *) { display: none; } } .group-hover\:-translate-x-1 { &:is(:where(.group):hover *) { @media (hover: hover) { --tw-translate-x: calc(var(--spacing) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } } } .group-hover\:translate-x-0\.5 { &:is(:where(.group):hover *) { @media (hover: hover) { --tw-translate-x: calc(var(--spacing) * 0.5); translate: var(--tw-translate-x) var(--tw-translate-y); } } } .group-hover\:-translate-y-0\.5 { &:is(:where(.group):hover *) { @media (hover: hover) { --tw-translate-y: calc(var(--spacing) * -0.5); translate: var(--tw-translate-x) var(--tw-translate-y); } } } .group-hover\:scale-105 { &:is(:where(.group):hover *) { @media (hover: hover) { --tw-scale-x: 105%; --tw-scale-y: 105%; --tw-scale-z: 105%; scale: var(--tw-scale-x) var(--tw-scale-y); } } } .group-hover\:scale-110 { &:is(:where(.group):hover *) { @media (hover: hover) { --tw-scale-x: 110%; --tw-scale-y: 110%; --tw-scale-z: 110%; scale: var(--tw-scale-x) var(--tw-scale-y); } } } .group-hover\:-rotate-3 { &:is(:where(.group):hover *) { @media (hover: hover) { rotate: calc(3deg * -1); } } } .group-hover\:-rotate-45 { &:is(:where(.group):hover *) { @media (hover: hover) { rotate: calc(45deg * -1); } } } .group-hover\:rotate-3 { &:is(:where(.group):hover *) { @media (hover: hover) { rotate: 3deg; } } } .group-hover\:motion-preset-focus { &:is(:where(.group):hover *) { @media (hover: hover) { --motion-origin-blur: 5px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } } .group-hover\:motion-preset-focus { &:is(:where(.group):hover *) { @media (hover: hover) { --motion-origin-blur: 5px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } } .group-hover\:motion-preset-focus { &:is(:where(.group):hover *) { @media (hover: hover) { --motion-origin-blur: 5px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } } .group-hover\:motion-preset-focus { &:is(:where(.group):hover *) { @media (hover: hover) { --motion-origin-blur: 5px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } } .group-hover\:motion-preset-focus { &:is(:where(.group):hover *) { @media (hover: hover) { --motion-origin-blur: 5px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } } .group-hover\:motion-preset-focus { &:is(:where(.group):hover *) { @media (hover: hover) { --motion-origin-blur: 5px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } } .group-hover\:motion-preset-focus { &:is(:where(.group):hover *) { @media (hover: hover) { --motion-origin-blur: 5px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } } .group-hover\:motion-preset-focus { &:is(:where(.group):hover *) { @media (hover: hover) { --motion-origin-blur: 5px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } } .group-hover\:animate-spin { &:is(:where(.group):hover *) { @media (hover: hover) { animation: var(--animate-spin); } } } .group-hover\:bg-primary-content { &:is(:where(.group):hover *) { @media (hover: hover) { background-color: var(--color-primary-content); } } } .group-hover\:bg-primary\/20 { &:is(:where(.group):hover *) { @media (hover: hover) { background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 20%, transparent); } } } } .group-hover\:text-base-100 { &:is(:where(.group):hover *) { @media (hover: hover) { color: var(--color-base-100); } } } .group-hover\:text-error { &:is(:where(.group):hover *) { @media (hover: hover) { color: var(--color-error); } } } .group-hover\:text-info { &:is(:where(.group):hover *) { @media (hover: hover) { color: var(--color-info); } } } .group-hover\:text-primary { &:is(:where(.group):hover *) { @media (hover: hover) { color: var(--color-primary); } } } .group-hover\:text-primary-content { &:is(:where(.group):hover *) { @media (hover: hover) { color: var(--color-primary-content); } } } .group-hover\:text-success { &:is(:where(.group):hover *) { @media (hover: hover) { color: var(--color-success); } } } .group-hover\:text-warning { &:is(:where(.group):hover *) { @media (hover: hover) { color: var(--color-warning); } } } .group-hover\:text-white { &:is(:where(.group):hover *) { @media (hover: hover) { color: var(--color-white); } } } .group-hover\:opacity-0 { &:is(:where(.group):hover *) { @media (hover: hover) { opacity: 0%; } } } .group-hover\:opacity-80 { &:is(:where(.group):hover *) { @media (hover: hover) { opacity: 80%; } } } .group-hover\:opacity-100 { &:is(:where(.group):hover *) { @media (hover: hover) { opacity: 100%; } } } .group-hover\:shadow-xl { &:is(:where(.group):hover *) { @media (hover: hover) { --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } } .group-hover\:ring-2 { &:is(:where(.group):hover *) { @media (hover: hover) { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } } .group-hover\:ring-primary { &:is(:where(.group):hover *) { @media (hover: hover) { --tw-ring-color: var(--color-primary); } } } .group-hover\:\[--btn-color\:var\(--color-base-100\)\] { &:is(:where(.group):hover *) { @media (hover: hover) { --btn-color: var(--color-base-100); } } } .group-has-checked\:text-bg-primary { &:is(:where(.group):has(*:checked) *) { background-color: var(--color-primary); color: var(--color-primary-content); } } .group-has-checked\:text-primary { &:is(:where(.group):has(*:checked) *) { color: var(--color-primary); } } .group-has-\[\.menu-active\]\:bg-base-100\! { &:is(:where(.group):has(*:is(.menu-active)) *) { background-color: var(--color-base-100) !important; } } .group-has-\[\.menu-active\]\:bg-neutral\/10 { &:is(:where(.group):has(*:is(.menu-active)) *) { background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } } } .group-has-\[\.menu-active\]\:text-base-content\! { &:is(:where(.group):has(*:is(.menu-active)) *) { color: var(--color-base-content) !important; } } .group-has-\[\.menu-active\]\:text-primary { &:is(:where(.group):has(*:is(.menu-active)) *) { color: var(--color-primary); } } .group-\[\.dropdown-active\]\:block { &:is(:where(.group):is(.dropdown-active) *) { display: block; } } .group-\[\.theme-active\]\:block { &:is(:where(.group):is(.theme-active) *) { display: block; } } .group-\[\.theme-active\]\:hidden { &:is(:where(.group):is(.theme-active) *) { display: none; } } .group-\[\.theme-active\]\:text-primary { &:is(:where(.group):is(.theme-active) *) { color: var(--color-primary); } } .group-\[\.update-customizer\]\:block { &:is(:where(.group):is(.update-customizer) *) { display: block; } } .placeholder\:text-sm { &::placeholder { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .placeholder\:text-black\/50 { &::placeholder { color: color-mix(in srgb, #000 50%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-black) 50%, transparent); } } } .placeholder\:text-black\/60 { &::placeholder { color: color-mix(in srgb, #000 60%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-black) 60%, transparent); } } } .before\:absolute { &::before { content: var(--tw-content); position: absolute; } } .before\:inset-0 { &::before { content: var(--tw-content); inset: calc(var(--spacing) * 0); } } .before\:-start-3 { &::before { content: var(--tw-content); inset-inline-start: calc(var(--spacing) * -3); } } .before\:start-0 { &::before { content: var(--tw-content); inset-inline-start: calc(var(--spacing) * 0); } } .before\:top-0 { &::before { content: var(--tw-content); top: calc(var(--spacing) * 0); } } .before\:top-1\/2 { &::before { content: var(--tw-content); top: calc(1/2 * 100%); } } .before\:top-3 { &::before { content: var(--tw-content); top: calc(var(--spacing) * 3); } } .before\:bottom-3 { &::before { content: var(--tw-content); bottom: calc(var(--spacing) * 3); } } .before\:left-1\/2 { &::before { content: var(--tw-content); left: calc(1/2 * 100%); } } .before\:-z-1 { &::before { content: var(--tw-content); z-index: calc(1 * -1); } } .before\:mb-2 { &::before { content: var(--tw-content); margin-bottom: calc(var(--spacing) * 2); } } .before\:block { &::before { content: var(--tw-content); display: block; } } .before\:hidden { &::before { content: var(--tw-content); display: none; } } .before\:h-0\.5 { &::before { content: var(--tw-content); height: calc(var(--spacing) * 0.5); } } .before\:h-\[101\%\] { &::before { content: var(--tw-content); height: 101%; } } .before\:w-2\.5 { &::before { content: var(--tw-content); width: calc(var(--spacing) * 2.5); } } .before\:w-\[100\.5\%\] { &::before { content: var(--tw-content); width: 100.5%; } } .before\:w-px { &::before { content: var(--tw-content); width: 1px; } } .before\:-translate-x-1\/2 { &::before { content: var(--tw-content); --tw-translate-x: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } } .before\:-translate-y-1\/2 { &::before { content: var(--tw-content); --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } } .before\:rounded-box { &::before { content: var(--tw-content); border-radius: var(--radius-box); } } .before\:rounded-box { &::before { content: var(--tw-content); border-radius: var(--radius-box); } } .before\:border-white { &::before { content: var(--tw-content); border-color: var(--color-white); } } .before\:bg-base-content { &::before { content: var(--tw-content); background-color: var(--color-base-content); } } .before\:bg-base-content\/20 { &::before { content: var(--tw-content); background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); } } } .before\:bg-gradient-to-b { &::before { content: var(--tw-content); --tw-gradient-position: to bottom in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } } .before\:bg-gradient-to-l { &::before { content: var(--tw-content); --tw-gradient-position: to left in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } } .before\:bg-gradient-to-r { &::before { content: var(--tw-content); --tw-gradient-position: to right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } } .before\:bg-gradient-to-t { &::before { content: var(--tw-content); --tw-gradient-position: to top in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } } .before\:bg-\[linear-gradient\(92deg\,var\(--color-primary\)_65\.3\%\,var\(--color-error\)_71\.9\%\)\] { &::before { content: var(--tw-content); background-image: linear-gradient(92deg,var(--color-primary) 65.3%,var(--color-error) 71.9%); } } .before\:from-base-100\/0 { &::before { content: var(--tw-content); --tw-gradient-from: var(--color-base-100); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-base-100) 0%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } } .before\:from-base-200\/0 { &::before { content: var(--tw-content); --tw-gradient-from: var(--color-base-200); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-base-200) 0%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } } .before\:from-80\% { &::before { content: var(--tw-content); --tw-gradient-from-position: 80%; } } .before\:to-base-100 { &::before { content: var(--tw-content); --tw-gradient-to: var(--color-base-100); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } } .before\:to-base-200 { &::before { content: var(--tw-content); --tw-gradient-to: var(--color-base-200); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } } .before\:opacity-0 { &::before { content: var(--tw-content); opacity: 0%; } } .before\:opacity-60 { &::before { content: var(--tw-content); opacity: 60%; } } .before\:opacity-90 { &::before { content: var(--tw-content); opacity: 90%; } } .before\:shadow-sm { &::before { content: var(--tw-content); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .before\:shadow-primary { &::before { content: var(--tw-content); --tw-shadow-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-primary) var(--tw-shadow-alpha), transparent); } } } .before\:transition-all { &::before { content: var(--tw-content); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } } .before\:duration-300 { &::before { content: var(--tw-content); --tw-duration: 300ms; transition-duration: 300ms; } } .after\:border-white { &::after { content: var(--tw-content); border-color: var(--color-white); } } .\*\:first\:rounded-t-md { :is(& > *) { &:first-child { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); } } } .\*\:last\:rounded-b-md { :is(& > *) { &:last-child { border-bottom-right-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } } } .empty\:m-0 { &:empty { margin: calc(var(--spacing) * 0); } } .empty\:my-0 { &:empty { margin-block: calc(var(--spacing) * 0); } } .empty\:mt-0 { &:empty { margin-top: calc(var(--spacing) * 0); } } .empty\:gap-0 { &:empty { gap: calc(var(--spacing) * 0); } } .focus-within\:bg-base-200 { &:focus-within { background-color: var(--color-base-200); } } .focus-within\:shadow-none { &:focus-within { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .focus-within\:outline-0 { &:focus-within { outline-style: var(--tw-outline-style); outline-width: 0px; } } .hover\:-translate-y-1 { &:hover { @media (hover: hover) { --tw-translate-y: calc(var(--spacing) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } } } .hover\:scale-101 { &:hover { @media (hover: hover) { --tw-scale-x: 101%; --tw-scale-y: 101%; --tw-scale-z: 101%; scale: var(--tw-scale-x) var(--tw-scale-y); } } } .hover\:scale-103 { &:hover { @media (hover: hover) { --tw-scale-x: 103%; --tw-scale-y: 103%; --tw-scale-z: 103%; scale: var(--tw-scale-x) var(--tw-scale-y); } } } .hover\:scale-105 { &:hover { @media (hover: hover) { --tw-scale-x: 105%; --tw-scale-y: 105%; --tw-scale-z: 105%; scale: var(--tw-scale-x) var(--tw-scale-y); } } } .hover\:scale-107 { &:hover { @media (hover: hover) { --tw-scale-x: 107%; --tw-scale-y: 107%; --tw-scale-z: 107%; scale: var(--tw-scale-x) var(--tw-scale-y); } } } .hover\:-rotate-45 { &:hover { @media (hover: hover) { rotate: calc(45deg * -1); } } } .hover\:cursor-grab { &:hover { @media (hover: hover) { cursor: grab; } } } .hover\:gap-4 { &:hover { @media (hover: hover) { gap: calc(var(--spacing) * 4); } } } .hover\:btn-gradient { &:hover { @media (hover: hover) { border-width: 2px; transition-property: background-position, box-shadow; transition-timing-function: ease-in-out; transition-duration: 0.4s; background-color: transparent; --btn-shadow: 0px 1px 3px 0px var(--btn-color, var(--color-neutral)), 0px 1px 2px -1px var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-shadow: 0px 1px 3px 0px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000), 0px 1px 2px -1px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000); } --btn-border: var(--btn-color, var(--color-neutral)); --dark-shade: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --dark-shade: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 80%, black); } background-size: 200% auto; background-image: linear-gradient( 102deg, var(--btn-color, var(--color-neutral)) 0%, var(--dark-shade) 51%, var(--btn-color, var(--color-neutral)) 100% ); @media (hover: hover) { &:hover { --btn-shadow: 0px 4px 6px -1px var(--btn-color, var(--color-neutral)), 0px 2px 4px -2px var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-shadow: 0px 4px 6px -1px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000), 0px 2px 4px -2px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000); } background-position: 99% center; } } &:focus-visible { --btn-shadow: 0px 4px 6px -1px var(--btn-color, var(--color-neutral)), 0px 2px 4px -2px var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-shadow: 0px 4px 6px -1px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000), 0px 2px 4px -2px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000); } background-position: 99% center; } &.fpdxq { --btn-shadow: 0px 4px 6px -1px var(--btn-color, var(--color-neutral)), 0px 2px 4px -2px var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-shadow: 0px 4px 6px -1px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000), 0px 2px 4px -2px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000); } background-position: 99% center; } } } } .hover\:border-accent { &:hover { @media (hover: hover) { border-color: var(--color-accent); } } } .hover\:border-base-content\/20 { &:hover { @media (hover: hover) { border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); } } } } .hover\:border-base-content\/40 { &:hover { @media (hover: hover) { border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 40%, transparent); } } } } .hover\:border-info { &:hover { @media (hover: hover) { border-color: var(--color-info); } } } .hover\:border-primary { &:hover { @media (hover: hover) { border-color: var(--color-primary); } } } .hover\:border-primary\/30 { &:hover { @media (hover: hover) { border-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary) 30%, transparent); } } } } .hover\:border-primary\/50 { &:hover { @media (hover: hover) { border-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary) 50%, transparent); } } } } .hover\:border-success { &:hover { @media (hover: hover) { border-color: var(--color-success); } } } .hover\:border-warning { &:hover { @media (hover: hover) { border-color: var(--color-warning); } } } .hover\:text-bg-soft-primary { &:hover { @media (hover: hover) { color: var(--color-primary); background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 10%, var(--color-base-100)); } } } } .hover\:bg-base-100 { &:hover { @media (hover: hover) { background-color: var(--color-base-100); } } } .hover\:bg-base-200 { &:hover { @media (hover: hover) { background-color: var(--color-base-200); } } } .hover\:bg-base-content { &:hover { @media (hover: hover) { background-color: var(--color-base-content); } } } .hover\:bg-info { &:hover { @media (hover: hover) { background-color: var(--color-info); } } } .hover\:bg-neutral\/10 { &:hover { @media (hover: hover) { background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } } } } .hover\:bg-neutral\/20 { &:hover { @media (hover: hover) { background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent); } } } } .hover\:bg-primary { &:hover { @media (hover: hover) { background-color: var(--color-primary); } } } .hover\:bg-primary\/10 { &:hover { @media (hover: hover) { background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 10%, transparent); } } } } .hover\:bg-primary\/20 { &:hover { @media (hover: hover) { background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 20%, transparent); } } } } .hover\:bg-secondary { &:hover { @media (hover: hover) { background-color: var(--color-secondary); } } } .hover\:bg-secondary\! { &:hover { @media (hover: hover) { background-color: var(--color-secondary) !important; } } } .hover\:bg-transparent { &:hover { @media (hover: hover) { background-color: transparent; } } } .hover\:bg-warning { &:hover { @media (hover: hover) { background-color: var(--color-warning); } } } .hover\:bg-white { &:hover { @media (hover: hover) { background-color: var(--color-white); } } } .hover\:text-base-100 { &:hover { @media (hover: hover) { color: var(--color-base-100); } } } .hover\:text-base-content { &:hover { @media (hover: hover) { color: var(--color-base-content); } } } .hover\:text-base-content\/50 { &:hover { @media (hover: hover) { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } } } .hover\:text-blue-600 { &:hover { @media (hover: hover) { color: var(--color-blue-600); } } } .hover\:text-blue-800 { &:hover { @media (hover: hover) { color: var(--color-blue-800); } } } .hover\:text-primary { &:hover { @media (hover: hover) { color: var(--color-primary); } } } .hover\:text-primary-content { &:hover { @media (hover: hover) { color: var(--color-primary-content); } } } .hover\:text-primary-content\! { &:hover { @media (hover: hover) { color: var(--color-primary-content) !important; } } } .hover\:text-white { &:hover { @media (hover: hover) { color: var(--color-white); } } } .hover\:text-white\/70 { &:hover { @media (hover: hover) { color: color-mix(in srgb, #fff 70%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 70%, transparent); } } } } .hover\:underline { &:hover { @media (hover: hover) { text-decoration-line: underline; } } } .hover\:opacity-80 { &:hover { @media (hover: hover) { opacity: 80%; } } } .hover\:shadow-lg { &:hover { @media (hover: hover) { --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } } .hover\:shadow-md { &:hover { @media (hover: hover) { --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } } .hover\:ring { &:hover { @media (hover: hover) { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } } .hover\:ring-1 { &:hover { @media (hover: hover) { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } } .hover\:ring-2 { &:hover { @media (hover: hover) { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } } .hover\:shadow-primary\/10 { &:hover { @media (hover: hover) { --tw-shadow-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 10%, transparent) var(--tw-shadow-alpha), transparent); } } } } .hover\:ring-accent\/30 { &:hover { @media (hover: hover) { --tw-ring-color: var(--color-accent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-accent) 30%, transparent); } } } } .hover\:ring-error\/30 { &:hover { @media (hover: hover) { --tw-ring-color: var(--color-error); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-error) 30%, transparent); } } } } .hover\:ring-info\/30 { &:hover { @media (hover: hover) { --tw-ring-color: var(--color-info); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-info) 30%, transparent); } } } } .hover\:ring-primary { &:hover { @media (hover: hover) { --tw-ring-color: var(--color-primary); } } } .hover\:ring-primary\/30 { &:hover { @media (hover: hover) { --tw-ring-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-primary) 30%, transparent); } } } } .hover\:ring-success\/30 { &:hover { @media (hover: hover) { --tw-ring-color: var(--color-success); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-success) 30%, transparent); } } } } .hover\:ring-warning\/30 { &:hover { @media (hover: hover) { --tw-ring-color: var(--color-warning); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-warning) 30%, transparent); } } } } .hover\:btn-primary { &:hover { @media (hover: hover) { --btn-color: var(--color-primary); --btn-fg: var(--color-primary-content); } } } .\*\:hover\:bg-neutral\/10 { :is(& > *) { &:hover { @media (hover: hover) { background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } } } } } .\*\:hover\:bg-linear-to-b { :is(& > *) { &:hover { @media (hover: hover) { --tw-gradient-position: to bottom; @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: to bottom in oklab; } background-image: linear-gradient(var(--tw-gradient-stops)); } } } } .\*\:hover\:from-purple-300 { :is(& > *) { &:hover { @media (hover: hover) { --tw-gradient-from: var(--color-purple-300); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } } } } .\*\:hover\:to-primary { :is(& > *) { &:hover { @media (hover: hover) { --tw-gradient-to: var(--color-primary); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } } } } .\*\:hover\:bg-clip-text { :is(& > *) { &:hover { @media (hover: hover) { background-clip: text; } } } } .\*\:hover\:text-primary { :is(& > *) { &:hover { @media (hover: hover) { color: var(--color-primary); } } } } .\*\:hover\:text-transparent { :is(& > *) { &:hover { @media (hover: hover) { color: transparent; } } } } .hover\:not-\[\.menu-active\]\:bg-secondary\! { &:hover { @media (hover: hover) { &:not(*:is(.menu-active)) { background-color: var(--color-secondary) !important; } } } } .hover\:not-\[\.menu-active\]\:text-primary-content\! { &:hover { @media (hover: hover) { &:not(*:is(.menu-active)) { color: var(--color-primary-content) !important; } } } } .hover\:before\:opacity-100 { &:hover { @media (hover: hover) { &::before { content: var(--tw-content); opacity: 100%; } } } } .focus\:border-primary { &:focus { border-color: var(--color-primary); } } .focus\:text-bg-soft-primary { &:focus { color: var(--color-primary); background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 10%, var(--color-base-100)); } } } .focus\:bg-transparent { &:focus { background-color: transparent; } } .focus\:text-blue-600 { &:focus { color: var(--color-blue-600); } } .focus\:shadow-none { &:focus { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .focus\:outline-hidden { &:focus { --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { outline: 2px solid transparent; outline-offset: 2px; } } } .focus\:outline-0 { &:focus { outline-style: var(--tw-outline-style); outline-width: 0px; } } .focus\:outline-1 { &:focus { outline-style: var(--tw-outline-style); outline-width: 1px; } } .focus\:outline-primary { &:focus { outline-color: var(--color-primary); } } .focus\:outline-none { &:focus { --tw-outline-style: none; outline-style: none; } } .not-group-has-\[\.menu-active\]\:focus\:bg-secondary\! { &:not(*:is(:where(.group):has(*:is(.menu-active)) *)) { &:focus { background-color: var(--color-secondary) !important; } } } .not-group-has-\[\.menu-active\]\:focus\:text-primary-content\! { &:not(*:is(:where(.group):has(*:is(.menu-active)) *)) { &:focus { color: var(--color-primary-content) !important; } } } .focus-visible\:bg-secondary\! { &:focus-visible { background-color: var(--color-secondary) !important; } } .focus-visible\:bg-transparent { &:focus-visible { background-color: transparent; } } .focus-visible\:text-primary-content\! { &:focus-visible { color: var(--color-primary-content) !important; } } .active\:cursor-grabbing { &:active { cursor: grabbing; } } .active\:ring-\[3px\] { &:active { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .\*\:active\:text-primary { :is(& > *) { &:active { color: var(--color-primary); } } } .hover\:active\:scale-97 { &:hover { @media (hover: hover) { &:active { --tw-scale-x: 97%; --tw-scale-y: 97%; --tw-scale-z: 97%; scale: var(--tw-scale-x) var(--tw-scale-y); } } } } .disabled\:text-base-content\/50 { &:disabled { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } } .disabled\:opacity-100 { &:disabled { opacity: 100%; } } .disabled\:shadow-xs { &:disabled { --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .has-checked\:border-primary { &:has(*:checked) { border-color: var(--color-primary); } } .has-checked\:border-success { &:has(*:checked) { border-color: var(--color-success); } } .has-checked\:text-bg-primary { &:has(*:checked) { background-color: var(--color-primary); color: var(--color-primary-content); } } .has-checked\:text-primary { &:has(*:checked) { color: var(--color-primary); } } .has-checked\:ring-4 { &:has(*:checked) { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .has-checked\:ring-5 { &:has(*:checked) { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(5px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .has-checked\:ring-primary { &:has(*:checked) { --tw-ring-color: var(--color-primary); } } .has-checked\:ring-success { &:has(*:checked) { --tw-ring-color: var(--color-success); } } .has-checked\:ring-inset { &:has(*:checked) { --tw-ring-inset: inset; } } .has-disabled\:cursor-not-allowed { &:has(*:disabled) { cursor: not-allowed; } } .has-disabled\:text-gray-700 { &:has(*:disabled) { color: var(--color-gray-700); } } .has-disabled\:line-through { &:has(*:disabled) { text-decoration-line: line-through; } } .has-\[\.link-active\]\:border-primary { &:has(*:is(.npoer)) { border-color: var(--color-primary); } } .has-\[\.link-active\]\:bg-primary { &:has(*:is(.npoer)) { background-color: var(--color-primary); } } .has-\[\.link-active\]\:text-white { &:has(*:is(.npoer)) { color: var(--color-white); } } .has-\[\+ul_\.menu-active\]\:\!bg-neutral\/10 { &:has(+ul .menu-active) { background-color: var(--color-neutral) !important; @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent) !important; } } } .aria-\[current\=page\]\:btn-gradient { &[aria-current="page"] { border-width: 2px; transition-property: background-position, box-shadow; transition-timing-function: ease-in-out; transition-duration: 0.4s; background-color: transparent; --btn-shadow: 0px 1px 3px 0px var(--btn-color, var(--color-neutral)), 0px 1px 2px -1px var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-shadow: 0px 1px 3px 0px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000), 0px 1px 2px -1px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000); } --btn-border: var(--btn-color, var(--color-neutral)); --dark-shade: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --dark-shade: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 80%, black); } background-size: 200% auto; background-image: linear-gradient( 102deg, var(--btn-color, var(--color-neutral)) 0%, var(--dark-shade) 51%, var(--btn-color, var(--color-neutral)) 100% ); @media (hover: hover) { &:hover { --btn-shadow: 0px 4px 6px -1px var(--btn-color, var(--color-neutral)), 0px 2px 4px -2px var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-shadow: 0px 4px 6px -1px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000), 0px 2px 4px -2px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000); } background-position: 99% center; } } &:focus-visible { --btn-shadow: 0px 4px 6px -1px var(--btn-color, var(--color-neutral)), 0px 2px 4px -2px var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-shadow: 0px 4px 6px -1px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000), 0px 2px 4px -2px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000); } background-position: 99% center; } &.fpdxq { --btn-shadow: 0px 4px 6px -1px var(--btn-color, var(--color-neutral)), 0px 2px 4px -2px var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-shadow: 0px 4px 6px -1px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000), 0px 2px 4px -2px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000); } background-position: 99% center; } } } .aria-\[current\=page\]\:btn-primary { &[aria-current="page"] { --btn-color: var(--color-primary); --btn-fg: var(--color-primary-content); } } .supports-\[backdrop-filter\]\:bg-base-200\/60 { @supports (backdrop-filter: var(--tw)) { background-color: var(--color-base-200); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-200) 60%, transparent); } } } .motion-reduce\:animate-none { @media (prefers-reduced-motion: reduce) { animation: none; } } .max-\[1600px\]\:-start-1 { @media (width < 1600px) { inset-inline-start: calc(var(--spacing) * -1); } } .max-\[1600px\]\:-start-7 { @media (width < 1600px) { inset-inline-start: calc(var(--spacing) * -7); } } .max-\[1600px\]\:start-2\/5 { @media (width < 1600px) { inset-inline-start: calc(2/5 * 100%); } } .max-\[1600px\]\:start-7 { @media (width < 1600px) { inset-inline-start: calc(var(--spacing) * 7); } } .max-\[1600px\]\:start-8 { @media (width < 1600px) { inset-inline-start: calc(var(--spacing) * 8); } } .max-\[1600px\]\:start-12 { @media (width < 1600px) { inset-inline-start: calc(var(--spacing) * 12); } } .max-\[1600px\]\:start-16 { @media (width < 1600px) { inset-inline-start: calc(var(--spacing) * 16); } } .max-\[1600px\]\:start-\[15\%\] { @media (width < 1600px) { inset-inline-start: 15%; } } .max-\[1600px\]\:start-\[25\%\] { @media (width < 1600px) { inset-inline-start: 25%; } } .max-\[1600px\]\:-end-1\/3 { @media (width < 1600px) { inset-inline-end: calc(calc(1/3 * 100%) * -1); } } .max-\[1600px\]\:-end-10 { @media (width < 1600px) { inset-inline-end: calc(var(--spacing) * -10); } } .max-\[1600px\]\:-end-18 { @media (width < 1600px) { inset-inline-end: calc(var(--spacing) * -18); } } .max-\[1600px\]\:-end-20 { @media (width < 1600px) { inset-inline-end: calc(var(--spacing) * -20); } } .max-\[1600px\]\:-end-25 { @media (width < 1600px) { inset-inline-end: calc(var(--spacing) * -25); } } .max-\[1600px\]\:-top-5\/7 { @media (width < 1600px) { top: calc(calc(5/7 * 100%) * -1); } } .max-\[1600px\]\:-top-17 { @media (width < 1600px) { top: calc(var(--spacing) * -17); } } .max-\[1600px\]\:-top-\[8\%\] { @media (width < 1600px) { top: calc(8% * -1); } } .max-\[1600px\]\:-top-\[12\%\] { @media (width < 1600px) { top: calc(12% * -1); } } .max-\[1600px\]\:-top-\[23\%\] { @media (width < 1600px) { top: calc(23% * -1); } } .max-\[1600px\]\:-top-\[36\%\] { @media (width < 1600px) { top: calc(36% * -1); } } .max-\[1600px\]\:-bottom-1 { @media (width < 1600px) { bottom: calc(var(--spacing) * -1); } } .max-\[1600px\]\:-bottom-3 { @media (width < 1600px) { bottom: calc(var(--spacing) * -3); } } .max-\[1600px\]\:-bottom-5 { @media (width < 1600px) { bottom: calc(var(--spacing) * -5); } } .max-\[1600px\]\:-bottom-8 { @media (width < 1600px) { bottom: calc(var(--spacing) * -8); } } .max-\[1600px\]\:bottom-0 { @media (width < 1600px) { bottom: calc(var(--spacing) * 0); } } .max-\[1600px\]\:bottom-9 { @media (width < 1600px) { bottom: calc(var(--spacing) * 9); } } .max-\[1600px\]\:bottom-15 { @media (width < 1600px) { bottom: calc(var(--spacing) * 15); } } .max-\[1600px\]\:mt-30 { @media (width < 1600px) { margin-top: calc(var(--spacing) * 30); } } .max-\[1600px\]\:h-170 { @media (width < 1600px) { height: calc(var(--spacing) * 170); } } .max-\[1600px\]\:w-160 { @media (width < 1600px) { width: calc(var(--spacing) * 160); } } .max-2xl\:hidden { @media (width < 96rem) { display: none; } } .max-xl\:order-2 { @media (width < 80rem) { order: 2; } } .max-xl\:mt-1\.25 { @media (width < 80rem) { margin-top: calc(var(--spacing) * 1.25); } } .max-xl\:mt-2\.5 { @media (width < 80rem) { margin-top: calc(var(--spacing) * 2.5); } } .max-xl\:mt-8\.5 { @media (width < 80rem) { margin-top: calc(var(--spacing) * 8.5); } } .max-xl\:hidden { @media (width < 80rem) { display: none; } } .max-xl\:h-69 { @media (width < 80rem) { height: calc(var(--spacing) * 69); } } .max-xl\:btn-block { @media (width < 80rem) { width: 100%; } } .max-xl\:flex-col { @media (width < 80rem) { flex-direction: column; } } .max-xl\:justify-center { @media (width < 80rem) { justify-content: center; } } .max-xl\:space-y-8 { @media (width < 80rem) { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse))); } } } .max-xl\:text-center { @media (width < 80rem) { text-align: center; } } .max-lg\:-bottom-\[20\%\] { @media (width < 64rem) { bottom: calc(20% * -1); } } .max-lg\:left-4 { @media (width < 64rem) { left: calc(var(--spacing) * 4); } } .max-lg\:timeline-compact { @media (width < 64rem) { &, &.n6ifb { --timeline-row-start: 0; .gjs6d { grid-column-start: 1; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; margin: calc(0.25rem * 2); align-self: flex-start; justify-self: center; } li:has(.gjs6d) { .mrdo1 { grid-column-start: none; grid-row-start: auto; } } } &.cv1e2 { > li { --timeline-col-start: 0; } .gjs6d { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 4; align-self: center; justify-self: flex-start; } li:has(.gjs6d) { .mrdo1 { grid-column-start: auto; grid-row-start: none; } } .hd3xh { .gjs6d { grid-column-start: 3; grid-column-end: 4; grid-row-start: 3; } .mrdo1 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; } } } } } .max-lg\:row-start-1\! { @media (width < 64rem) { grid-row-start: 1 !important; } } .max-lg\:my-1 { @media (width < 64rem) { margin-block: calc(var(--spacing) * 1); } } .max-lg\:ms-4 { @media (width < 64rem) { margin-inline-start: calc(var(--spacing) * 4); } } .max-lg\:-mt-2 { @media (width < 64rem) { margin-top: calc(var(--spacing) * -2); } } .max-lg\:mt-1 { @media (width < 64rem) { margin-top: calc(var(--spacing) * 1); } } .max-lg\:mt-1\.75 { @media (width < 64rem) { margin-top: calc(var(--spacing) * 1.75); } } .max-lg\:mt-2 { @media (width < 64rem) { margin-top: calc(var(--spacing) * 2); } } .max-lg\:mt-4 { @media (width < 64rem) { margin-top: calc(var(--spacing) * 4); } } .max-lg\:mb-0 { @media (width < 64rem) { margin-bottom: calc(var(--spacing) * 0); } } .max-lg\:flex { @media (width < 64rem) { display: flex; } } .max-lg\:hidden { @media (width < 64rem) { display: none; } } .max-lg\:h-90 { @media (width < 64rem) { height: calc(var(--spacing) * 90); } } .max-lg\:h-full { @media (width < 64rem) { height: 100%; } } .max-lg\:w-full { @media (width < 64rem) { width: 100%; } } .max-lg\:stats-vertical { @media (width < 64rem) { grid-auto-flow: row; :where(& > :not(:last-child)) { --tw-divide-x-reverse: 0; border-inline-style: var(--tw-border-style); border-inline-start-width: calc(0px * var(--tw-divide-x-reverse)); border-inline-end-width: calc(0px * calc(1 - var(--tw-divide-x-reverse))); --tw-divide-y-reverse: 0; border-bottom-style: var(--tw-border-style); border-top-style: var(--tw-border-style); border-top-width: calc(1px * var(--tw-divide-y-reverse)); border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); } overflow-y: auto; } } .max-lg\:grid-cols-1 { @media (width < 64rem) { grid-template-columns: repeat(1, minmax(0, 1fr)); } } .max-lg\:flex-col { @media (width < 64rem) { flex-direction: column; } } .max-lg\:flex-wrap { @media (width < 64rem) { flex-wrap: wrap; } } .max-lg\:items-start { @media (width < 64rem) { align-items: flex-start; } } .max-lg\:gap-2 { @media (width < 64rem) { gap: calc(var(--spacing) * 2); } } .max-lg\:gap-10 { @media (width < 64rem) { gap: calc(var(--spacing) * 10); } } .max-lg\:space-y-6 { @media (width < 64rem) { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))); } } } .max-lg\:space-y-8 { @media (width < 64rem) { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse))); } } } .max-lg\:overflow-hidden { @media (width < 64rem) { overflow: hidden; } } .max-lg\:bg-base-100\/10 { @media (width < 64rem) { background-color: var(--color-base-100); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-100) 10%, transparent); } } } .max-lg\:bg-transparent { @media (width < 64rem) { background-color: transparent; } } .max-lg\:p-0 { @media (width < 64rem) { padding: calc(var(--spacing) * 0); } } .max-lg\:ps-2 { @media (width < 64rem) { padding-inline-start: calc(var(--spacing) * 2); } } .max-lg\:text-center { @media (width < 64rem) { text-align: center; } } .max-lg\:\!text-base-100 { @media (width < 64rem) { color: var(--color-base-100) !important; } } .max-lg\:text-base-100 { @media (width < 64rem) { color: var(--color-base-100); } } .max-lg\:shadow-none { @media (width < 64rem) { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .max-lg\:duration-100 { @media (width < 64rem) { --tw-duration: 100ms; transition-duration: 100ms; } } .max-lg\:duration-400 { @media (width < 64rem) { --tw-duration: 400ms; transition-duration: 400ms; } } .max-lg\:\[--strategy\:static\] { @media (width < 64rem) { --strategy: static; } } .max-lg\:before\:bottom-3 { @media (width < 64rem) { &::before { content: var(--tw-content); bottom: calc(var(--spacing) * 3); } } } .max-lg\:before\:bg-base-100\/10 { @media (width < 64rem) { &::before { content: var(--tw-content); background-color: var(--color-base-100); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-100) 10%, transparent); } } } } .max-lg\:before\:bg-base-content\/10 { @media (width < 64rem) { &::before { content: var(--tw-content); background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } } } } .max-lg\:hover\:text-primary-content { @media (width < 64rem) { &:hover { @media (hover: hover) { color: var(--color-primary-content); } } } } .max-lg\:focus\:text-base-100 { @media (width < 64rem) { &:focus { color: var(--color-base-100); } } } .max-lg\:has-\[\+ul_\.menu-active\]\:\!bg-base-100\/20 { @media (width < 64rem) { &:has(+ul .menu-active) { background-color: var(--color-base-100) !important; @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-100) 20%, transparent) !important; } } } } .max-md\:my-1 { @media (width < 48rem) { margin-block: calc(var(--spacing) * 1); } } .max-md\:my-4 { @media (width < 48rem) { margin-block: calc(var(--spacing) * 4); } } .max-md\:mt-1 { @media (width < 48rem) { margin-top: calc(var(--spacing) * 1); } } .max-md\:mt-1\.75 { @media (width < 48rem) { margin-top: calc(var(--spacing) * 1.75); } } .max-md\:mt-4 { @media (width < 48rem) { margin-top: calc(var(--spacing) * 4); } } .max-md\:mt-6 { @media (width < 48rem) { margin-top: calc(var(--spacing) * 6); } } .max-md\:mt-20 { @media (width < 48rem) { margin-top: calc(var(--spacing) * 20); } } .max-md\:mb-12 { @media (width < 48rem) { margin-bottom: calc(var(--spacing) * 12); } } .max-md\:hidden { @media (width < 48rem) { display: none; } } .max-md\:btn-block { @media (width < 48rem) { width: 100%; } } .max-md\:w-full { @media (width < 48rem) { width: 100%; } } .max-md\:flex-col { @media (width < 48rem) { flex-direction: column; } } .max-md\:flex-col-reverse { @media (width < 48rem) { flex-direction: column-reverse; } } .max-md\:flex-wrap { @media (width < 48rem) { flex-wrap: wrap; } } .max-md\:justify-center { @media (width < 48rem) { justify-content: center; } } .max-md\:gap-10 { @media (width < 48rem) { gap: calc(var(--spacing) * 10); } } .max-md\:space-y-8 { @media (width < 48rem) { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse))); } } } .max-md\:gap-x-6 { @media (width < 48rem) { column-gap: calc(var(--spacing) * 6); } } .max-md\:divide-y { @media (width < 48rem) { :where(& > :not(:last-child)) { --tw-divide-y-reverse: 0; border-bottom-style: var(--tw-border-style); border-top-style: var(--tw-border-style); border-top-width: calc(1px * var(--tw-divide-y-reverse)); border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); } } } .max-md\:rounded-box { @media (width < 48rem) { border-radius: var(--radius-box); } } .max-md\:rounded-box { @media (width < 48rem) { border-radius: var(--radius-box); } } .max-md\:border-b { @media (width < 48rem) { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } } .max-md\:bg-base-100 { @media (width < 48rem) { background-color: var(--color-base-100); } } .max-md\:p-0 { @media (width < 48rem) { padding: calc(var(--spacing) * 0); } } .max-md\:px-0 { @media (width < 48rem) { padding-inline: calc(var(--spacing) * 0); } } .max-md\:px-8 { @media (width < 48rem) { padding-inline: calc(var(--spacing) * 8); } } .max-md\:px-10 { @media (width < 48rem) { padding-inline: calc(var(--spacing) * 10); } } .max-md\:pt-10 { @media (width < 48rem) { padding-top: calc(var(--spacing) * 10); } } .max-md\:text-center { @media (width < 48rem) { text-align: center; } } .max-md\:text-2xl { @media (width < 48rem) { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } } .max-md\:text-3xl { @media (width < 48rem) { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } } .max-md\:text-5xl { @media (width < 48rem) { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); } } .max-md\:shadow-none { @media (width < 48rem) { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .max-md\:duration-100 { @media (width < 48rem) { --tw-duration: 100ms; transition-duration: 100ms; } } .max-md\:\[--strategy\:static\] { @media (width < 48rem) { --strategy: static; } } .max-md\:\*\:not-last\:border-b { @media (width < 48rem) { :is(& > *) { &:not(*:last-child) { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } } } } .max-md\:before\:bottom-3 { @media (width < 48rem) { &::before { content: var(--tw-content); bottom: calc(var(--spacing) * 3); } } } .max-md\:before\:w-px { @media (width < 48rem) { &::before { content: var(--tw-content); width: 1px; } } } .max-md\:before\:bg-base-content { @media (width < 48rem) { &::before { content: var(--tw-content); background-color: var(--color-base-content); } } } .max-sm\:btn { @media (width < 40rem) { display: inline-flex; flex-shrink: 0; cursor: pointer; flex-wrap: nowrap; align-items: center; justify-content: center; gap: calc(0.25rem * 2); text-align: center; vertical-align: middle; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); text-decoration-line: none; webkit-user-select: none; user-select: none; @media (prefers-reduced-motion: reduce) { transition-property: none; } padding-inline: var(--btn-p); color: var(--btn-fg); height: var(--size); outline-color: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { outline-color: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, var(--color-base-100)); } transition-property: color, background-color, border-color, box-shadow; transition-timing-function: cubic-bezier(0, 0, 0.96, 1.03); transition-duration: 0.25s; border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); background-color: var(--btn-bg); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--btn-noise); border: var(--border) solid var(--btn-border); box-shadow: 0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 8%)) inset, var(--btn-shadow); --size: calc(var(--size-field, 0.25rem) * 9.5); --btn-bg: var(--btn-color, var(--color-neutral)); --btn-fg: var(--color-neutral-content); --btn-p: 1rem; --btn-border: var(--btn-bg); @supports (color: color-mix(in lab, red, red)) { --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%)); } --btn-shadow: 0px 1px 3px 0px var(--color-base-300), 0px 1px 2px -1px var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { --btn-shadow: 0px 1px 3px 0px color-mix(in oklab, var(--color-base-300) 40%, #0000), 0px 1px 2px -1px color-mix(in oklab, var(--color-base-300) 40%, #0000); } --btn-noise: var(--fx-noise); @media (hover: hover) { &:hover { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 90%, #000); } } } &:active:hover:not(.fpdxq), &:active:focus:not(.fpdxq) { --tw-scale-x: 95%; --tw-scale-y: 95%; --tw-scale-z: 95%; scale: var(--tw-scale-x) var(--tw-scale-y); transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: ease-out; transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: 300ms; --tw-duration: 300ms; } &:focus-visible { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)), #000 10%); } outline-width: 2px; outline-style: solid; } &:is(:disabled, [disabled], .z56ha) { pointer-events: none; opacity: 50%; --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } &:is(input[type="checkbox"], input[type="radio"]) { appearance: none; &::after { content: attr(aria-label); } &:checked { background: var(--color-primary); color: var(--color-primary-content); outline-color: var(--color-primary); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0); isolation: isolate; } } } } .max-sm\:-start-1 { @media (width < 40rem) { inset-inline-start: calc(var(--spacing) * -1); } } .max-sm\:start-3 { @media (width < 40rem) { inset-inline-start: calc(var(--spacing) * 3); } } .max-sm\:-end-1 { @media (width < 40rem) { inset-inline-end: calc(var(--spacing) * -1); } } .max-sm\:end-3 { @media (width < 40rem) { inset-inline-end: calc(var(--spacing) * 3); } } .max-sm\:top-32 { @media (width < 40rem) { top: calc(var(--spacing) * 32); } } .max-sm\:-bottom-7 { @media (width < 40rem) { bottom: calc(var(--spacing) * -7); } } .max-sm\:-bottom-18 { @media (width < 40rem) { bottom: calc(var(--spacing) * -18); } } .max-sm\:timeline-compact { @media (width < 40rem) { &, &.n6ifb { --timeline-row-start: 0; .gjs6d { grid-column-start: 1; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; margin: calc(0.25rem * 2); align-self: flex-start; justify-self: center; } li:has(.gjs6d) { .mrdo1 { grid-column-start: none; grid-row-start: auto; } } } &.cv1e2 { > li { --timeline-col-start: 0; } .gjs6d { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 4; align-self: center; justify-self: flex-start; } li:has(.gjs6d) { .mrdo1 { grid-column-start: auto; grid-row-start: none; } } .hd3xh { .gjs6d { grid-column-start: 3; grid-column-end: 4; grid-row-start: 3; } .mrdo1 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; } } } } } .max-sm\:m-5 { @media (width < 40rem) { margin: calc(var(--spacing) * 5); } } .max-sm\:mx-3 { @media (width < 40rem) { margin-inline: calc(var(--spacing) * 3); } } .max-sm\:mx-auto { @media (width < 40rem) { margin-inline: auto; } } .max-sm\:-ms-2 { @media (width < 40rem) { margin-inline-start: calc(var(--spacing) * -2); } } .max-sm\:-mt-0\.5 { @media (width < 40rem) { margin-top: calc(var(--spacing) * -0.5); } } .max-sm\:mt-8 { @media (width < 40rem) { margin-top: calc(var(--spacing) * 8); } } .max-sm\:mt-auto { @media (width < 40rem) { margin-top: auto; } } .max-sm\:mb-19\.5 { @media (width < 40rem) { margin-bottom: calc(var(--spacing) * 19.5); } } .max-sm\:block { @media (width < 40rem) { display: block; } } .max-sm\:hidden { @media (width < 40rem) { display: none; } } .max-sm\:btn-square { @media (width < 40rem) { padding-inline: calc(0.25rem * 0); width: var(--size); height: var(--size); } } .max-sm\:h-25 { @media (width < 40rem) { height: calc(var(--spacing) * 25); } } .max-sm\:h-70 { @media (width < 40rem) { height: calc(var(--spacing) * 70); } } .max-sm\:h-90 { @media (width < 40rem) { height: calc(var(--spacing) * 90); } } .max-sm\:w-\[80\%\] { @media (width < 40rem) { width: 80%; } } .max-sm\:w-\[81\%\] { @media (width < 40rem) { width: 81%; } } .max-sm\:w-full { @media (width < 40rem) { width: 100%; } } .max-sm\:max-w-xs { @media (width < 40rem) { max-width: var(--container-xs); } } .max-sm\:grid-cols-2 { @media (width < 40rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .max-sm\:flex-col { @media (width < 40rem) { flex-direction: column; } } .max-sm\:flex-col-reverse { @media (width < 40rem) { flex-direction: column-reverse; } } .max-sm\:flex-wrap { @media (width < 40rem) { flex-wrap: wrap; } } .max-sm\:items-center { @media (width < 40rem) { align-items: center; } } .max-sm\:gap-1 { @media (width < 40rem) { gap: calc(var(--spacing) * 1); } } .max-sm\:gap-2 { @media (width < 40rem) { gap: calc(var(--spacing) * 2); } } .max-sm\:gap-4 { @media (width < 40rem) { gap: calc(var(--spacing) * 4); } } .max-sm\:gap-6 { @media (width < 40rem) { gap: calc(var(--spacing) * 6); } } .max-sm\:space-y-6 { @media (width < 40rem) { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))); } } } .max-sm\:btn-text { @media (width < 40rem) { --btn-shadow: ""; color: var(--btn-color, var(--color-neutral)); --btn-bg: ""; --btn-border: ""; --btn-noise: none; border-width: 0; outline-color: var(--btn-color, var(--color-neutral)); @media (hover: hover) { &:hover { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } } } &:focus-visible { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } } &.fpdxq { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } } } } .max-sm\:border-b-4 { @media (width < 40rem) { border-bottom-style: var(--tw-border-style); border-bottom-width: 4px; } } .max-sm\:border-none { @media (width < 40rem) { --tw-border-style: none; border-style: none; } } .max-sm\:bg-base-100 { @media (width < 40rem) { background-color: var(--color-base-100); } } .max-sm\:p-6 { @media (width < 40rem) { padding: calc(var(--spacing) * 6); } } .max-sm\:p-10 { @media (width < 40rem) { padding: calc(var(--spacing) * 10); } } .max-sm\:px-4 { @media (width < 40rem) { padding-inline: calc(var(--spacing) * 4); } } .max-sm\:px-8 { @media (width < 40rem) { padding-inline: calc(var(--spacing) * 8); } } .max-sm\:px-10 { @media (width < 40rem) { padding-inline: calc(var(--spacing) * 10); } } .max-sm\:ps-4 { @media (width < 40rem) { padding-inline-start: calc(var(--spacing) * 4); } } .max-sm\:pt-10 { @media (width < 40rem) { padding-top: calc(var(--spacing) * 10); } } .max-sm\:pb-15 { @media (width < 40rem) { padding-bottom: calc(var(--spacing) * 15); } } .max-sm\:text-center { @media (width < 40rem) { text-align: center; } } .max-sm\:btn-sm { @media (width < 40rem) { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --btn-p: 0.75rem; --size: calc(var(--size-field, 0.25rem) * 7.5); } } .max-sm\:text-base { @media (width < 40rem) { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } .max-sm\:placeholder\:text-sm { @media (width < 40rem) { &::placeholder { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } } .sm\:absolute { @media (width >= 40rem) { position: absolute; } } .sm\:top-4\.75 { @media (width >= 40rem) { top: calc(var(--spacing) * 4.75); } } .sm\:col-span-1 { @media (width >= 40rem) { grid-column: span 1 / span 1; } } .sm\:col-span-2 { @media (width >= 40rem) { grid-column: span 2 / span 2; } } .sm\:col-span-3 { @media (width >= 40rem) { grid-column: span 3 / span 3; } } .sm\:col-span-4 { @media (width >= 40rem) { grid-column: span 4 / span 4; } } .sm\:timeline-horizontal { @media (width >= 40rem) { flex-direction: row; > li { align-items: center; > hr { height: 1.5px; min-height: calc(0.25rem * 0); width: 100%; &:first-child { grid-column-start: 1; grid-row-start: 2; } &:last-child { grid-column-start: 3; grid-column-end: none; grid-row-start: 2; grid-row-end: auto; } } } .gjs6d { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; align-self: flex-end; justify-self: center; } .mrdo1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; align-self: flex-start; justify-self: center; } &:has(.p76gi) { > li { > hr { &:first-child { border-start-start-radius: 0; border-end-start-radius: 0; border-start-end-radius: var(--radius-selector); border-end-end-radius: var(--radius-selector); } &:last-child { border-start-start-radius: var(--radius-selector); border-end-start-radius: var(--radius-selector); border-start-end-radius: 0; border-end-end-radius: 0; } } } } &:not(:has(.p76gi)) { :first-child { > hr:last-child { border-start-start-radius: var(--radius-selector); border-end-start-radius: var(--radius-selector); border-start-end-radius: 0; border-end-end-radius: 0; } } :last-child { > hr:first-child { border-start-start-radius: 0; border-end-start-radius: 0; border-start-end-radius: var(--radius-selector); border-end-end-radius: var(--radius-selector); } } } } } .sm\:ms-auto { @media (width >= 40rem) { margin-inline-start: auto; } } .sm\:me-6 { @media (width >= 40rem) { margin-inline-end: calc(var(--spacing) * 6); } } .sm\:me-auto { @media (width >= 40rem) { margin-inline-end: auto; } } .sm\:mt-16 { @media (width >= 40rem) { margin-top: calc(var(--spacing) * 16); } } .sm\:mb-0 { @media (width >= 40rem) { margin-bottom: calc(var(--spacing) * 0); } } .sm\:mb-8 { @media (width >= 40rem) { margin-bottom: calc(var(--spacing) * 8); } } .sm\:mb-9 { @media (width >= 40rem) { margin-bottom: calc(var(--spacing) * 9); } } .sm\:mb-10 { @media (width >= 40rem) { margin-bottom: calc(var(--spacing) * 10); } } .sm\:mb-12 { @media (width >= 40rem) { margin-bottom: calc(var(--spacing) * 12); } } .sm\:mb-16 { @media (width >= 40rem) { margin-bottom: calc(var(--spacing) * 16); } } .sm\:block { @media (width >= 40rem) { display: block; } } .sm\:flex { @media (width >= 40rem) { display: flex; } } .sm\:grid { @media (width >= 40rem) { display: grid; } } .sm\:hidden { @media (width >= 40rem) { display: none; } } .sm\:inline { @media (width >= 40rem) { display: inline; } } .sm\:divider-horizontal { @media (width >= 40rem) { &.wehvw { height: auto; width: auto; flex-direction: column; &:before, &:after { height: 100%; width: 1px; border-inline-end-style: var(--tw-border-style); border-inline-end-width: 1px; border-top-style: var(--tw-border-style); border-top-width: 0px; } } } } .sm\:size-6 { @media (width >= 40rem) { width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); } } .sm\:h-13 { @media (width >= 40rem) { height: calc(var(--spacing) * 13); } } .sm\:h-14\.5 { @media (width >= 40rem) { height: calc(var(--spacing) * 14.5); } } .sm\:h-28 { @media (width >= 40rem) { height: calc(var(--spacing) * 28); } } .sm\:h-40 { @media (width >= 40rem) { height: calc(var(--spacing) * 40); } } .sm\:h-46 { @media (width >= 40rem) { height: calc(var(--spacing) * 46); } } .sm\:h-85 { @media (width >= 40rem) { height: calc(var(--spacing) * 85); } } .sm\:h-98 { @media (width >= 40rem) { height: calc(var(--spacing) * 98); } } .sm\:h-115 { @media (width >= 40rem) { height: calc(var(--spacing) * 115); } } .sm\:h-197 { @media (width >= 40rem) { height: calc(var(--spacing) * 197); } } .sm\:w-1\/2 { @media (width >= 40rem) { width: calc(1/2 * 100%); } } .sm\:w-15 { @media (width >= 40rem) { width: calc(var(--spacing) * 15); } } .sm\:w-20 { @media (width >= 40rem) { width: calc(var(--spacing) * 20); } } .sm\:w-23 { @media (width >= 40rem) { width: calc(var(--spacing) * 23); } } .sm\:w-27\.5 { @media (width >= 40rem) { width: calc(var(--spacing) * 27.5); } } .sm\:w-28\.75 { @media (width >= 40rem) { width: calc(var(--spacing) * 28.75); } } .sm\:w-65 { @media (width >= 40rem) { width: calc(var(--spacing) * 65); } } .sm\:w-72 { @media (width >= 40rem) { width: calc(var(--spacing) * 72); } } .sm\:w-75 { @media (width >= 40rem) { width: calc(var(--spacing) * 75); } } .sm\:w-93 { @media (width >= 40rem) { width: calc(var(--spacing) * 93); } } .sm\:w-100 { @media (width >= 40rem) { width: calc(var(--spacing) * 100); } } .sm\:w-\[70\%\] { @media (width >= 40rem) { width: 70%; } } .sm\:w-\[80\%\] { @media (width >= 40rem) { width: 80%; } } .sm\:w-\[97\.4px\] { @media (width >= 40rem) { width: 97.4px; } } .sm\:w-md { @media (width >= 40rem) { width: var(--container-md); } } .sm\:w-sm { @media (width >= 40rem) { width: var(--container-sm); } } .sm\:max-w-5xl { @media (width >= 40rem) { max-width: var(--container-5xl); } } .sm\:max-w-104 { @media (width >= 40rem) { max-width: calc(var(--spacing) * 104); } } .sm\:max-w-md { @media (width >= 40rem) { max-width: var(--container-md); } } .sm\:max-w-sm { @media (width >= 40rem) { max-width: var(--container-sm); } } .sm\:min-w-md { @media (width >= 40rem) { min-width: var(--container-md); } } .sm\:rotate-\[-2deg\] { @media (width >= 40rem) { rotate: -2deg; } } .sm\:rotate-\[2deg\] { @media (width >= 40rem) { rotate: 2deg; } } .sm\:grid-cols-2 { @media (width >= 40rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .sm\:grid-cols-3 { @media (width >= 40rem) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .sm\:grid-cols-4 { @media (width >= 40rem) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .sm\:grid-cols-5 { @media (width >= 40rem) { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .sm\:flex-col { @media (width >= 40rem) { flex-direction: column; } } .sm\:flex-row { @media (width >= 40rem) { flex-direction: row; } } .sm\:flex-nowrap { @media (width >= 40rem) { flex-wrap: nowrap; } } .sm\:items-center { @media (width >= 40rem) { align-items: center; } } .sm\:items-end { @media (width >= 40rem) { align-items: flex-end; } } .sm\:justify-between { @media (width >= 40rem) { justify-content: space-between; } } .sm\:justify-end { @media (width >= 40rem) { justify-content: flex-end; } } .sm\:gap-4 { @media (width >= 40rem) { gap: calc(var(--spacing) * 4); } } .sm\:gap-6 { @media (width >= 40rem) { gap: calc(var(--spacing) * 6); } } .sm\:gap-8 { @media (width >= 40rem) { gap: calc(var(--spacing) * 8); } } .sm\:gap-9 { @media (width >= 40rem) { gap: calc(var(--spacing) * 9); } } .sm\:gap-12 { @media (width >= 40rem) { gap: calc(var(--spacing) * 12); } } .sm\:gap-16 { @media (width >= 40rem) { gap: calc(var(--spacing) * 16); } } .sm\:gap-y-35 { @media (width >= 40rem) { row-gap: calc(var(--spacing) * 35); } } .sm\:rounded-t-none { @media (width >= 40rem) { border-top-left-radius: 0; border-top-right-radius: 0; } } .sm\:rounded-l-lg { @media (width >= 40rem) { border-top-left-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); } } .sm\:p-2 { @media (width >= 40rem) { padding: calc(var(--spacing) * 2); } } .sm\:p-12 { @media (width >= 40rem) { padding: calc(var(--spacing) * 12); } } .sm\:p-16 { @media (width >= 40rem) { padding: calc(var(--spacing) * 16); } } .sm\:px-0 { @media (width >= 40rem) { padding-inline: calc(var(--spacing) * 0); } } .sm\:px-4\.75 { @media (width >= 40rem) { padding-inline: calc(var(--spacing) * 4.75); } } .sm\:px-6 { @media (width >= 40rem) { padding-inline: calc(var(--spacing) * 6); } } .sm\:px-8 { @media (width >= 40rem) { padding-inline: calc(var(--spacing) * 8); } } .sm\:px-16 { @media (width >= 40rem) { padding-inline: calc(var(--spacing) * 16); } } .sm\:px-20 { @media (width >= 40rem) { padding-inline: calc(var(--spacing) * 20); } } .sm\:py-2 { @media (width >= 40rem) { padding-block: calc(var(--spacing) * 2); } } .sm\:py-6 { @media (width >= 40rem) { padding-block: calc(var(--spacing) * 6); } } .sm\:py-10 { @media (width >= 40rem) { padding-block: calc(var(--spacing) * 10); } } .sm\:py-14 { @media (width >= 40rem) { padding-block: calc(var(--spacing) * 14); } } .sm\:py-16 { @media (width >= 40rem) { padding-block: calc(var(--spacing) * 16); } } .sm\:pe-2 { @media (width >= 40rem) { padding-inline-end: calc(var(--spacing) * 2); } } .sm\:pt-6 { @media (width >= 40rem) { padding-top: calc(var(--spacing) * 6); } } .sm\:pt-10 { @media (width >= 40rem) { padding-top: calc(var(--spacing) * 10); } } .sm\:pt-14 { @media (width >= 40rem) { padding-top: calc(var(--spacing) * 14); } } .sm\:pt-16 { @media (width >= 40rem) { padding-top: calc(var(--spacing) * 16); } } .sm\:pt-20 { @media (width >= 40rem) { padding-top: calc(var(--spacing) * 20); } } .sm\:pt-24 { @media (width >= 40rem) { padding-top: calc(var(--spacing) * 24); } } .sm\:pb-14\.5 { @media (width >= 40rem) { padding-bottom: calc(var(--spacing) * 14.5); } } .sm\:pb-36 { @media (width >= 40rem) { padding-bottom: calc(var(--spacing) * 36); } } .sm\:btn-lg { @media (width >= 40rem) { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --btn-p: 1.25rem; --size: calc(var(--size-field, 0.25rem) * 11.5); } } .sm\:pin-input-lg { @media (width >= 40rem) { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --size: calc(var(--size-field, 0.25rem) * 11.5); } } .sm\:text-2xl { @media (width >= 40rem) { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } } .sm\:text-4xl { @media (width >= 40rem) { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } } .sm\:text-lg { @media (width >= 40rem) { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } } .sm\:text-xl { @media (width >= 40rem) { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } } .sm\:text-\[42px\] { @media (width >= 40rem) { font-size: 42px; } } .max-lg\:sm\:mt-16 { @media (width < 64rem) { @media (width >= 40rem) { margin-top: calc(var(--spacing) * 16); } } } .sm\:max-lg\:grid-cols-2 { @media (width >= 40rem) { @media (width < 64rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } } .sm\:max-md\:end-\[5\%\] { @media (width >= 40rem) { @media (width < 48rem) { inset-inline-end: 5%; } } } .md\:start-8 { @media (width >= 48rem) { inset-inline-start: calc(var(--spacing) * 8); } } .md\:start-23 { @media (width >= 48rem) { inset-inline-start: calc(var(--spacing) * 23); } } .md\:start-27 { @media (width >= 48rem) { inset-inline-start: calc(var(--spacing) * 27); } } .md\:start-36 { @media (width >= 48rem) { inset-inline-start: calc(var(--spacing) * 36); } } .md\:start-40 { @media (width >= 48rem) { inset-inline-start: calc(var(--spacing) * 40); } } .md\:start-42 { @media (width >= 48rem) { inset-inline-start: calc(var(--spacing) * 42); } } .md\:start-46 { @media (width >= 48rem) { inset-inline-start: calc(var(--spacing) * 46); } } .md\:start-47 { @media (width >= 48rem) { inset-inline-start: calc(var(--spacing) * 47); } } .md\:start-75 { @media (width >= 48rem) { inset-inline-start: calc(var(--spacing) * 75); } } .md\:start-\[7\%\] { @media (width >= 48rem) { inset-inline-start: 7%; } } .md\:start-\[23\%\] { @media (width >= 48rem) { inset-inline-start: 23%; } } .md\:start-\[30\%\] { @media (width >= 48rem) { inset-inline-start: 30%; } } .md\:end-2 { @media (width >= 48rem) { inset-inline-end: calc(var(--spacing) * 2); } } .md\:end-20 { @media (width >= 48rem) { inset-inline-end: calc(var(--spacing) * 20); } } .md\:end-25 { @media (width >= 48rem) { inset-inline-end: calc(var(--spacing) * 25); } } .md\:end-35 { @media (width >= 48rem) { inset-inline-end: calc(var(--spacing) * 35); } } .md\:end-38 { @media (width >= 48rem) { inset-inline-end: calc(var(--spacing) * 38); } } .md\:end-42 { @media (width >= 48rem) { inset-inline-end: calc(var(--spacing) * 42); } } .md\:end-45 { @media (width >= 48rem) { inset-inline-end: calc(var(--spacing) * 45); } } .md\:end-48 { @media (width >= 48rem) { inset-inline-end: calc(var(--spacing) * 48); } } .md\:end-\[20\%\] { @media (width >= 48rem) { inset-inline-end: 20%; } } .md\:end-\[25\%\] { @media (width >= 48rem) { inset-inline-end: 25%; } } .md\:end-\[37\%\] { @media (width >= 48rem) { inset-inline-end: 37%; } } .md\:top-13 { @media (width >= 48rem) { top: calc(var(--spacing) * 13); } } .md\:top-14 { @media (width >= 48rem) { top: calc(var(--spacing) * 14); } } .md\:top-15 { @media (width >= 48rem) { top: calc(var(--spacing) * 15); } } .md\:top-20 { @media (width >= 48rem) { top: calc(var(--spacing) * 20); } } .md\:top-53 { @media (width >= 48rem) { top: calc(var(--spacing) * 53); } } .md\:top-\[29\%\] { @media (width >= 48rem) { top: 29%; } } .md\:top-\[34\%\] { @media (width >= 48rem) { top: 34%; } } .md\:bottom-0 { @media (width >= 48rem) { bottom: calc(var(--spacing) * 0); } } .md\:bottom-23 { @media (width >= 48rem) { bottom: calc(var(--spacing) * 23); } } .md\:bottom-33 { @media (width >= 48rem) { bottom: calc(var(--spacing) * 33); } } .md\:order-1 { @media (width >= 48rem) { order: 1; } } .md\:order-2 { @media (width >= 48rem) { order: 2; } } .md\:col-span-1 { @media (width >= 48rem) { grid-column: span 1 / span 1; } } .md\:col-span-2 { @media (width >= 48rem) { grid-column: span 2 / span 2; } } .md\:col-span-3 { @media (width >= 48rem) { grid-column: span 3 / span 3; } } .md\:col-span-4 { @media (width >= 48rem) { grid-column: span 4 / span 4; } } .md\:col-span-5 { @media (width >= 48rem) { grid-column: span 5 / span 5; } } .md\:col-span-8 { @media (width >= 48rem) { grid-column: span 8 / span 8; } } .md\:mx-0 { @media (width >= 48rem) { margin-inline: calc(var(--spacing) * 0); } } .md\:mx-6 { @media (width >= 48rem) { margin-inline: calc(var(--spacing) * 6); } } .md\:input-lg { @media (width >= 48rem) { padding-inline: calc(0.25rem * 4); font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --size: calc(var(--size-field, 0.25rem) * 11.5); &[type="number"] { &::-webkit-inner-spin-button { margin-block: calc(0.25rem * -3); margin-inline-end: calc(0.25rem * -3); } } } } .md\:my-2 { @media (width >= 48rem) { margin-block: calc(var(--spacing) * 2); } } .md\:my-12 { @media (width >= 48rem) { margin-block: calc(var(--spacing) * 12); } } .md\:-ms-50 { @media (width >= 48rem) { margin-inline-start: calc(var(--spacing) * -50); } } .md\:ms-2 { @media (width >= 48rem) { margin-inline-start: calc(var(--spacing) * 2); } } .md\:ms-6 { @media (width >= 48rem) { margin-inline-start: calc(var(--spacing) * 6); } } .md\:ms-auto { @media (width >= 48rem) { margin-inline-start: auto; } } .md\:me-4 { @media (width >= 48rem) { margin-inline-end: calc(var(--spacing) * 4); } } .md\:-mt-10 { @media (width >= 48rem) { margin-top: calc(var(--spacing) * -10); } } .md\:-mt-12 { @media (width >= 48rem) { margin-top: calc(var(--spacing) * -12); } } .md\:-mt-25 { @media (width >= 48rem) { margin-top: calc(var(--spacing) * -25); } } .md\:mt-0 { @media (width >= 48rem) { margin-top: calc(var(--spacing) * 0); } } .md\:mt-2\.5 { @media (width >= 48rem) { margin-top: calc(var(--spacing) * 2.5); } } .md\:mt-14 { @media (width >= 48rem) { margin-top: calc(var(--spacing) * 14); } } .md\:mt-16 { @media (width >= 48rem) { margin-top: calc(var(--spacing) * 16); } } .md\:mt-27 { @media (width >= 48rem) { margin-top: calc(var(--spacing) * 27); } } .md\:mb-8 { @media (width >= 48rem) { margin-bottom: calc(var(--spacing) * 8); } } .md\:mb-12 { @media (width >= 48rem) { margin-bottom: calc(var(--spacing) * 12); } } .md\:mb-14 { @media (width >= 48rem) { margin-bottom: calc(var(--spacing) * 14); } } .md\:mb-16 { @media (width >= 48rem) { margin-bottom: calc(var(--spacing) * 16); } } .md\:mb-24 { @media (width >= 48rem) { margin-bottom: calc(var(--spacing) * 24); } } .md\:navbar-end { @media (width >= 48rem) { display: flex; width: calc(1/2 * 100%); justify-content: flex-end; } } .md\:block { @media (width >= 48rem) { display: block; } } .md\:flex { @media (width >= 48rem) { display: flex; } } .md\:grid { @media (width >= 48rem) { display: grid; } } .md\:hidden { @media (width >= 48rem) { display: none; } } .md\:inline-block { @media (width >= 48rem) { display: inline-block; } } .md\:inline-flex { @media (width >= 48rem) { display: inline-flex; } } .md\:divider-horizontal { @media (width >= 48rem) { &.wehvw { height: auto; width: auto; flex-direction: column; &:before, &:after { height: 100%; width: 1px; border-inline-end-style: var(--tw-border-style); border-inline-end-width: 1px; border-top-style: var(--tw-border-style); border-top-width: 0px; } } } } .md\:size-50 { @media (width >= 48rem) { width: calc(var(--spacing) * 50); height: calc(var(--spacing) * 50); } } .md\:size-70 { @media (width >= 48rem) { width: calc(var(--spacing) * 70); height: calc(var(--spacing) * 70); } } .md\:size-90 { @media (width >= 48rem) { width: calc(var(--spacing) * 90); height: calc(var(--spacing) * 90); } } .md\:size-110 { @media (width >= 48rem) { width: calc(var(--spacing) * 110); height: calc(var(--spacing) * 110); } } .md\:h-16 { @media (width >= 48rem) { height: calc(var(--spacing) * 16); } } .md\:h-33\.75 { @media (width >= 48rem) { height: calc(var(--spacing) * 33.75); } } .md\:h-40 { @media (width >= 48rem) { height: calc(var(--spacing) * 40); } } .md\:h-65\.5 { @media (width >= 48rem) { height: calc(var(--spacing) * 65.5); } } .md\:h-85 { @media (width >= 48rem) { height: calc(var(--spacing) * 85); } } .md\:h-94 { @media (width >= 48rem) { height: calc(var(--spacing) * 94); } } .md\:h-96\.5 { @media (width >= 48rem) { height: calc(var(--spacing) * 96.5); } } .md\:h-120 { @media (width >= 48rem) { height: calc(var(--spacing) * 120); } } .md\:h-auto { @media (width >= 48rem) { height: auto; } } .md\:h-px { @media (width >= 48rem) { height: 1px; } } .md\:w-2\/4 { @media (width >= 48rem) { width: calc(2/4 * 100%); } } .md\:w-12\.25 { @media (width >= 48rem) { width: calc(var(--spacing) * 12.25); } } .md\:w-23 { @media (width >= 48rem) { width: calc(var(--spacing) * 23); } } .md\:w-50 { @media (width >= 48rem) { width: calc(var(--spacing) * 50); } } .md\:w-53 { @media (width >= 48rem) { width: calc(var(--spacing) * 53); } } .md\:w-60 { @media (width >= 48rem) { width: calc(var(--spacing) * 60); } } .md\:w-100 { @media (width >= 48rem) { width: calc(var(--spacing) * 100); } } .md\:w-103 { @media (width >= 48rem) { width: calc(var(--spacing) * 103); } } .md\:w-112\.5 { @media (width >= 48rem) { width: calc(var(--spacing) * 112.5); } } .md\:w-116 { @media (width >= 48rem) { width: calc(var(--spacing) * 116); } } .md\:w-\[60\%\] { @media (width >= 48rem) { width: 60%; } } .md\:w-full { @media (width >= 48rem) { width: 100%; } } .md\:max-w-2xl { @media (width >= 48rem) { max-width: var(--container-2xl); } } .md\:max-w-3xl { @media (width >= 48rem) { max-width: var(--container-3xl); } } .md\:max-w-96 { @media (width >= 48rem) { max-width: calc(var(--spacing) * 96); } } .md\:max-w-lg { @media (width >= 48rem) { max-width: var(--container-lg); } } .md\:flex-1 { @media (width >= 48rem) { flex: 1; } } .md\:navbar-center { @media (width >= 48rem) { flex-shrink: 0; } } .md\:shrink { @media (width >= 48rem) { flex-shrink: 1; } } .md\:grow { @media (width >= 48rem) { flex-grow: 1; } } .md\:grow-0 { @media (width >= 48rem) { flex-grow: 0; } } .md\:basis-0 { @media (width >= 48rem) { flex-basis: calc(var(--spacing) * 0); } } .md\:basis-1\/3 { @media (width >= 48rem) { flex-basis: calc(1/3 * 100%); } } .md\:basis-2\/3 { @media (width >= 48rem) { flex-basis: calc(2/3 * 100%); } } .md\:grid-cols-1 { @media (width >= 48rem) { grid-template-columns: repeat(1, minmax(0, 1fr)); } } .md\:grid-cols-2 { @media (width >= 48rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .md\:grid-cols-3 { @media (width >= 48rem) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .md\:grid-cols-4 { @media (width >= 48rem) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .md\:grid-cols-5 { @media (width >= 48rem) { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .md\:grid-cols-6 { @media (width >= 48rem) { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .md\:grid-cols-7 { @media (width >= 48rem) { grid-template-columns: repeat(7, minmax(0, 1fr)); } } .md\:grid-cols-8 { @media (width >= 48rem) { grid-template-columns: repeat(8, minmax(0, 1fr)); } } .md\:grid-cols-12 { @media (width >= 48rem) { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .md\:flex-col { @media (width >= 48rem) { flex-direction: column; } } .md\:flex-row { @media (width >= 48rem) { flex-direction: row; } } .md\:flex-wrap { @media (width >= 48rem) { flex-wrap: wrap; } } .md\:items-center { @media (width >= 48rem) { align-items: center; } } .md\:items-end { @media (width >= 48rem) { align-items: flex-end; } } .min-md\:items-center { @media (width >= 48rem) { align-items: center; } } .min-md\:items-end { @media (width >= 48rem) { align-items: flex-end; } } .md\:justify-between { @media (width >= 48rem) { justify-content: space-between; } } .md\:justify-center { @media (width >= 48rem) { justify-content: center; } } .md\:justify-end { @media (width >= 48rem) { justify-content: flex-end; } } .md\:gap-2 { @media (width >= 48rem) { gap: calc(var(--spacing) * 2); } } .md\:gap-3 { @media (width >= 48rem) { gap: calc(var(--spacing) * 3); } } .md\:gap-4 { @media (width >= 48rem) { gap: calc(var(--spacing) * 4); } } .md\:gap-5 { @media (width >= 48rem) { gap: calc(var(--spacing) * 5); } } .md\:gap-6 { @media (width >= 48rem) { gap: calc(var(--spacing) * 6); } } .md\:gap-7 { @media (width >= 48rem) { gap: calc(var(--spacing) * 7); } } .md\:gap-8 { @media (width >= 48rem) { gap: calc(var(--spacing) * 8); } } .md\:gap-9 { @media (width >= 48rem) { gap: calc(var(--spacing) * 9); } } .md\:gap-10 { @media (width >= 48rem) { gap: calc(var(--spacing) * 10); } } .md\:gap-12 { @media (width >= 48rem) { gap: calc(var(--spacing) * 12); } } .md\:gap-14 { @media (width >= 48rem) { gap: calc(var(--spacing) * 14); } } .md\:gap-16 { @media (width >= 48rem) { gap: calc(var(--spacing) * 16); } } .md\:gap-20 { @media (width >= 48rem) { gap: calc(var(--spacing) * 20); } } .md\:gap-22 { @media (width >= 48rem) { gap: calc(var(--spacing) * 22); } } .md\:gap-24 { @media (width >= 48rem) { gap: calc(var(--spacing) * 24); } } .md\:space-y-6 { @media (width >= 48rem) { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))); } } } .md\:space-y-10 { @media (width >= 48rem) { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse))); } } } .md\:space-y-14 { @media (width >= 48rem) { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 14) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 14) * calc(1 - var(--tw-space-y-reverse))); } } } .md\:space-y-16 { @media (width >= 48rem) { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 16) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 16) * calc(1 - var(--tw-space-y-reverse))); } } } .md\:space-y-24 { @media (width >= 48rem) { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 24) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 24) * calc(1 - var(--tw-space-y-reverse))); } } } .md\:divide-x { @media (width >= 48rem) { :where(& > :not(:last-child)) { --tw-divide-x-reverse: 0; border-inline-style: var(--tw-border-style); border-inline-start-width: calc(1px * var(--tw-divide-x-reverse)); border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } } } .md\:rounded-e-none { @media (width >= 48rem) { border-start-end-radius: 0; border-end-end-radius: 0; } } .md\:rounded-t-3xl { @media (width >= 48rem) { border-top-left-radius: var(--radius-3xl); border-top-right-radius: var(--radius-3xl); } } .md\:border-e { @media (width >= 48rem) { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 1px; } } .md\:border-r { @media (width >= 48rem) { border-right-style: var(--tw-border-style); border-right-width: 1px; } } .md\:border-r-4 { @media (width >= 48rem) { border-right-style: var(--tw-border-style); border-right-width: 4px; } } .md\:p-6 { @media (width >= 48rem) { padding: calc(var(--spacing) * 6); } } .md\:p-12 { @media (width >= 48rem) { padding: calc(var(--spacing) * 12); } } .md\:px-8 { @media (width >= 48rem) { padding-inline: calc(var(--spacing) * 8); } } .md\:px-19 { @media (width >= 48rem) { padding-inline: calc(var(--spacing) * 19); } } .md\:px-32 { @media (width >= 48rem) { padding-inline: calc(var(--spacing) * 32); } } .md\:py-16 { @media (width >= 48rem) { padding-block: calc(var(--spacing) * 16); } } .md\:py-19\.75 { @media (width >= 48rem) { padding-block: calc(var(--spacing) * 19.75); } } .md\:ps-12 { @media (width >= 48rem) { padding-inline-start: calc(var(--spacing) * 12); } } .md\:pe-4 { @media (width >= 48rem) { padding-inline-end: calc(var(--spacing) * 4); } } .md\:pt-6 { @media (width >= 48rem) { padding-top: calc(var(--spacing) * 6); } } .md\:pt-14 { @media (width >= 48rem) { padding-top: calc(var(--spacing) * 14); } } .md\:pt-45 { @media (width >= 48rem) { padding-top: calc(var(--spacing) * 45); } } .md\:pb-14 { @media (width >= 48rem) { padding-bottom: calc(var(--spacing) * 14); } } .md\:text-end { @media (width >= 48rem) { text-align: end; } } .md\:text-left { @media (width >= 48rem) { text-align: left; } } .md\:btn-lg { @media (width >= 48rem) { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --btn-p: 1.25rem; --size: calc(var(--size-field, 0.25rem) * 11.5); } } .md\:input-lg { @media (width >= 48rem) { &::file-selector-button { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } } } .md\:text-2xl { @media (width >= 48rem) { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } } .md\:text-3xl { @media (width >= 48rem) { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } } .md\:text-4xl { @media (width >= 48rem) { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } } .md\:text-6xl { @media (width >= 48rem) { font-size: var(--text-6xl); line-height: var(--tw-leading, var(--text-6xl--line-height)); } } .md\:text-lg { @media (width >= 48rem) { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } } .md\:text-xl { @media (width >= 48rem) { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } } .md\:\[--adaptive\:adaptive\] { @media (width >= 48rem) { --adaptive: adaptive; } } .md\:\*\:not-last\:border-e { @media (width >= 48rem) { :is(& > *) { &:not(*:last-child) { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 1px; } } } } .md\:max-xl\:col-span-2 { @media (width >= 48rem) { @media (width < 80rem) { grid-column: span 2 / span 2; } } } .max-lg\:md\:col-span-2 { @media (width < 64rem) { @media (width >= 48rem) { grid-column: span 2 / span 2; } } } .md\:max-lg\:col-span-2 { @media (width >= 48rem) { @media (width < 64rem) { grid-column: span 2 / span 2; } } } .md\:max-lg\:col-span-4 { @media (width >= 48rem) { @media (width < 64rem) { grid-column: span 4 / span 4; } } } .max-lg\:md\:w-\[33\%\] { @media (width < 64rem) { @media (width >= 48rem) { width: 33%; } } } .max-lg\:md\:grid-cols-3 { @media (width < 64rem) { @media (width >= 48rem) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } } .md\:max-lg\:grid-cols-1 { @media (width >= 48rem) { @media (width < 64rem) { grid-template-columns: repeat(1, minmax(0, 1fr)); } } } .md\:max-lg\:grid-cols-5 { @media (width >= 48rem) { @media (width < 64rem) { grid-template-columns: repeat(5, minmax(0, 1fr)); } } } .md\:max-lg\:flex-col { @media (width >= 48rem) { @media (width < 64rem) { flex-direction: column; } } } .max-lg\:md\:gap-4 { @media (width < 64rem) { @media (width >= 48rem) { gap: calc(var(--spacing) * 4); } } } .max-lg\:md\:border-none { @media (width < 64rem) { @media (width >= 48rem) { --tw-border-style: none; border-style: none; } } } .max-lg\:md\:ps-4 { @media (width < 64rem) { @media (width >= 48rem) { padding-inline-start: calc(var(--spacing) * 4); } } } .lg\:menu-horizontal { @media (width >= 64rem) { display: inline-flex; flex-direction: row; & > li:not(.rgc5h) > .collapse > ul { position: absolute; margin-inline-start: calc(0.25rem * 0); margin-top: calc(0.25rem * 4); padding-block: calc(0.25rem * 2); padding-inline-end: calc(0.25rem * 2); } & > li > .collapse > ul { &:before { content: none; } } :where(& > li:not(.rgc5h) > .collapse > ul) { border-radius: var(--radius-box); background-color: var(--color-base-100); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-shadow-color: var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent); } } } } .lg\:absolute { @media (width >= 64rem) { position: absolute; } } .lg\:start-9 { @media (width >= 64rem) { inset-inline-start: calc(var(--spacing) * 9); } } .lg\:start-12 { @media (width >= 64rem) { inset-inline-start: calc(var(--spacing) * 12); } } .lg\:start-14 { @media (width >= 64rem) { inset-inline-start: calc(var(--spacing) * 14); } } .lg\:start-18 { @media (width >= 64rem) { inset-inline-start: calc(var(--spacing) * 18); } } .lg\:start-20 { @media (width >= 64rem) { inset-inline-start: calc(var(--spacing) * 20); } } .lg\:start-45 { @media (width >= 64rem) { inset-inline-start: calc(var(--spacing) * 45); } } .lg\:start-56 { @media (width >= 64rem) { inset-inline-start: calc(var(--spacing) * 56); } } .lg\:start-\[5\%\] { @media (width >= 64rem) { inset-inline-start: 5%; } } .lg\:start-\[8\%\] { @media (width >= 64rem) { inset-inline-start: 8%; } } .lg\:start-\[23\%\] { @media (width >= 64rem) { inset-inline-start: 23%; } } .lg\:start-\[44\%\] { @media (width >= 64rem) { inset-inline-start: 44%; } } .lg\:end-3 { @media (width >= 64rem) { inset-inline-end: calc(var(--spacing) * 3); } } .lg\:end-5 { @media (width >= 64rem) { inset-inline-end: calc(var(--spacing) * 5); } } .lg\:end-11 { @media (width >= 64rem) { inset-inline-end: calc(var(--spacing) * 11); } } .lg\:end-20 { @media (width >= 64rem) { inset-inline-end: calc(var(--spacing) * 20); } } .lg\:end-44 { @media (width >= 64rem) { inset-inline-end: calc(var(--spacing) * 44); } } .lg\:end-50 { @media (width >= 64rem) { inset-inline-end: calc(var(--spacing) * 50); } } .lg\:end-55 { @media (width >= 64rem) { inset-inline-end: calc(var(--spacing) * 55); } } .lg\:end-\[2\%\] { @media (width >= 64rem) { inset-inline-end: 2%; } } .lg\:end-\[8\%\] { @media (width >= 64rem) { inset-inline-end: 8%; } } .lg\:end-\[10\%\] { @media (width >= 64rem) { inset-inline-end: 10%; } } .lg\:end-\[30\%\] { @media (width >= 64rem) { inset-inline-end: 30%; } } .lg\:top-3 { @media (width >= 64rem) { top: calc(var(--spacing) * 3); } } .lg\:top-6 { @media (width >= 64rem) { top: calc(var(--spacing) * 6); } } .lg\:top-15 { @media (width >= 64rem) { top: calc(var(--spacing) * 15); } } .lg\:top-17 { @media (width >= 64rem) { top: calc(var(--spacing) * 17); } } .lg\:top-25 { @media (width >= 64rem) { top: calc(var(--spacing) * 25); } } .lg\:top-57 { @media (width >= 64rem) { top: calc(var(--spacing) * 57); } } .lg\:top-\[18px\] { @media (width >= 64rem) { top: 18px; } } .lg\:top-\[19\%\] { @media (width >= 64rem) { top: 19%; } } .lg\:top-\[22\%\] { @media (width >= 64rem) { top: 22%; } } .lg\:-right-8 { @media (width >= 64rem) { right: calc(var(--spacing) * -8); } } .lg\:-bottom-25 { @media (width >= 64rem) { bottom: calc(var(--spacing) * -25); } } .lg\:left-1\/2 { @media (width >= 64rem) { left: calc(1/2 * 100%); } } .lg\:left-auto { @media (width >= 64rem) { left: auto; } } .lg\:z-50 { @media (width >= 64rem) { z-index: 50; } } .lg\:order-1 { @media (width >= 64rem) { order: 1; } } .lg\:order-2 { @media (width >= 64rem) { order: 2; } } .lg\:order-3 { @media (width >= 64rem) { order: 3; } } .lg\:order-4 { @media (width >= 64rem) { order: 4; } } .lg\:col-span-1 { @media (width >= 64rem) { grid-column: span 1 / span 1; } } .lg\:col-span-2 { @media (width >= 64rem) { grid-column: span 2 / span 2; } } .lg\:col-span-3 { @media (width >= 64rem) { grid-column: span 3 / span 3; } } .lg\:col-span-4 { @media (width >= 64rem) { grid-column: span 4 / span 4; } } .lg\:col-span-5 { @media (width >= 64rem) { grid-column: span 5 / span 5; } } .lg\:col-span-6 { @media (width >= 64rem) { grid-column: span 6 / span 6; } } .lg\:col-span-8 { @media (width >= 64rem) { grid-column: span 8 / span 8; } } .lg\:col-span-9 { @media (width >= 64rem) { grid-column: span 9 / span 9; } } .lg\:mx-0 { @media (width >= 64rem) { margin-inline: calc(var(--spacing) * 0); } } .lg\:mx-4 { @media (width >= 64rem) { margin-inline: calc(var(--spacing) * 4); } } .lg\:mx-45 { @media (width >= 64rem) { margin-inline: calc(var(--spacing) * 45); } } .lg\:my-19\.25 { @media (width >= 64rem) { margin-block: calc(var(--spacing) * 19.25); } } .lg\:me-2\.25 { @media (width >= 64rem) { margin-inline-end: calc(var(--spacing) * 2.25); } } .lg\:me-\[15\%\] { @media (width >= 64rem) { margin-inline-end: 15%; } } .lg\:-mt-2\.5 { @media (width >= 64rem) { margin-top: calc(var(--spacing) * -2.5); } } .lg\:-mt-4\.25 { @media (width >= 64rem) { margin-top: calc(var(--spacing) * -4.25); } } .lg\:-mt-22 { @media (width >= 64rem) { margin-top: calc(var(--spacing) * -22); } } .lg\:-mt-29 { @media (width >= 64rem) { margin-top: calc(var(--spacing) * -29); } } .lg\:-mt-30 { @media (width >= 64rem) { margin-top: calc(var(--spacing) * -30); } } .lg\:mt-2\.5 { @media (width >= 64rem) { margin-top: calc(var(--spacing) * 2.5); } } .lg\:mt-6 { @media (width >= 64rem) { margin-top: calc(var(--spacing) * 6); } } .lg\:mt-10 { @media (width >= 64rem) { margin-top: calc(var(--spacing) * 10); } } .lg\:mt-10\.5 { @media (width >= 64rem) { margin-top: calc(var(--spacing) * 10.5); } } .lg\:mt-18\.5 { @media (width >= 64rem) { margin-top: calc(var(--spacing) * 18.5); } } .lg\:mt-20 { @media (width >= 64rem) { margin-top: calc(var(--spacing) * 20); } } .lg\:mt-23 { @media (width >= 64rem) { margin-top: calc(var(--spacing) * 23); } } .lg\:mt-24 { @media (width >= 64rem) { margin-top: calc(var(--spacing) * 24); } } .lg\:mt-30 { @media (width >= 64rem) { margin-top: calc(var(--spacing) * 30); } } .lg\:mb-8 { @media (width >= 64rem) { margin-bottom: calc(var(--spacing) * 8); } } .lg\:mb-10 { @media (width >= 64rem) { margin-bottom: calc(var(--spacing) * 10); } } .lg\:mb-12 { @media (width >= 64rem) { margin-bottom: calc(var(--spacing) * 12); } } .lg\:mb-14 { @media (width >= 64rem) { margin-bottom: calc(var(--spacing) * 14); } } .lg\:mb-16 { @media (width >= 64rem) { margin-bottom: calc(var(--spacing) * 16); } } .lg\:mb-24 { @media (width >= 64rem) { margin-bottom: calc(var(--spacing) * 24); } } .lg\:mb-36 { @media (width >= 64rem) { margin-bottom: calc(var(--spacing) * 36); } } .lg\:ml-0 { @media (width >= 64rem) { margin-left: calc(var(--spacing) * 0); } } .lg\:ml-8 { @media (width >= 64rem) { margin-left: calc(var(--spacing) * 8); } } .lg\:block { @media (width >= 64rem) { display: block; } } .lg\:flex { @media (width >= 64rem) { display: flex; } } .lg\:grid { @media (width >= 64rem) { display: grid; } } .lg\:hidden { @media (width >= 64rem) { display: none; } } .lg\:inline-block { @media (width >= 64rem) { display: inline-block; } } .lg\:size-54 { @media (width >= 64rem) { width: calc(var(--spacing) * 54); height: calc(var(--spacing) * 54); } } .lg\:size-75 { @media (width >= 64rem) { width: calc(var(--spacing) * 75); height: calc(var(--spacing) * 75); } } .lg\:size-79 { @media (width >= 64rem) { width: calc(var(--spacing) * 79); height: calc(var(--spacing) * 79); } } .lg\:size-99 { @media (width >= 64rem) { width: calc(var(--spacing) * 99); height: calc(var(--spacing) * 99); } } .lg\:size-100 { @media (width >= 64rem) { width: calc(var(--spacing) * 100); height: calc(var(--spacing) * 100); } } .lg\:size-120 { @media (width >= 64rem) { width: calc(var(--spacing) * 120); height: calc(var(--spacing) * 120); } } .lg\:h-10 { @media (width >= 64rem) { height: calc(var(--spacing) * 10); } } .lg\:h-31\.25 { @media (width >= 64rem) { height: calc(var(--spacing) * 31.25); } } .lg\:h-41 { @media (width >= 64rem) { height: calc(var(--spacing) * 41); } } .lg\:h-60 { @media (width >= 64rem) { height: calc(var(--spacing) * 60); } } .lg\:h-62\.5 { @media (width >= 64rem) { height: calc(var(--spacing) * 62.5); } } .lg\:h-115 { @media (width >= 64rem) { height: calc(var(--spacing) * 115); } } .lg\:h-119\.5 { @media (width >= 64rem) { height: calc(var(--spacing) * 119.5); } } .lg\:h-141 { @media (width >= 64rem) { height: calc(var(--spacing) * 141); } } .lg\:h-161 { @media (width >= 64rem) { height: calc(var(--spacing) * 161); } } .lg\:h-auto { @media (width >= 64rem) { height: auto; } } .lg\:h-px { @media (width >= 64rem) { height: 1px; } } .lg\:max-h-121 { @media (width >= 64rem) { max-height: calc(var(--spacing) * 121); } } .lg\:min-h-179 { @media (width >= 64rem) { min-height: calc(var(--spacing) * 179); } } .lg\:w-1\/2 { @media (width >= 64rem) { width: calc(1/2 * 100%); } } .lg\:w-3\/4 { @media (width >= 64rem) { width: calc(3/4 * 100%); } } .lg\:w-10\/12 { @media (width >= 64rem) { width: calc(10/12 * 100%); } } .lg\:w-16\.25 { @media (width >= 64rem) { width: calc(var(--spacing) * 16.25); } } .lg\:w-22\.25 { @media (width >= 64rem) { width: calc(var(--spacing) * 22.25); } } .lg\:w-32 { @media (width >= 64rem) { width: calc(var(--spacing) * 32); } } .lg\:w-120 { @media (width >= 64rem) { width: calc(var(--spacing) * 120); } } .lg\:w-150 { @media (width >= 64rem) { width: calc(var(--spacing) * 150); } } .lg\:w-\[calc\(100\%\+1rem\)\] { @media (width >= 64rem) { width: calc(100% + 1rem); } } .lg\:w-\[calc\(100\%_-_17px\)\] { @media (width >= 64rem) { width: calc(100% - 17px); } } .lg\:w-full { @media (width >= 64rem) { width: 100%; } } .lg\:max-w-7xl { @media (width >= 64rem) { max-width: var(--container-7xl); } } .lg\:max-w-135\.25 { @media (width >= 64rem) { max-width: calc(var(--spacing) * 135.25); } } .lg\:max-w-200 { @media (width >= 64rem) { max-width: calc(var(--spacing) * 200); } } .lg\:max-w-lg { @media (width >= 64rem) { max-width: var(--container-lg); } } .lg\:max-w-md { @media (width >= 64rem) { max-width: var(--container-md); } } .lg\:navbar-center { @media (width >= 64rem) { flex-shrink: 0; } } .lg\:basis-auto { @media (width >= 64rem) { flex-basis: auto; } } .lg\:-translate-x-1\/2 { @media (width >= 64rem) { --tw-translate-x: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } } .lg\:translate-x-0 { @media (width >= 64rem) { --tw-translate-x: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); } } .lg\:grid-cols-1 { @media (width >= 64rem) { grid-template-columns: repeat(1, minmax(0, 1fr)); } } .lg\:grid-cols-2 { @media (width >= 64rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .lg\:grid-cols-3 { @media (width >= 64rem) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .lg\:grid-cols-4 { @media (width >= 64rem) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .lg\:grid-cols-5 { @media (width >= 64rem) { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .lg\:grid-cols-6 { @media (width >= 64rem) { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .lg\:grid-cols-7 { @media (width >= 64rem) { grid-template-columns: repeat(7, minmax(0, 1fr)); } } .lg\:grid-cols-8 { @media (width >= 64rem) { grid-template-columns: repeat(8, minmax(0, 1fr)); } } .lg\:grid-cols-9 { @media (width >= 64rem) { grid-template-columns: repeat(9, minmax(0, 1fr)); } } .lg\:grid-cols-10 { @media (width >= 64rem) { grid-template-columns: repeat(10, minmax(0, 1fr)); } } .lg\:grid-cols-11 { @media (width >= 64rem) { grid-template-columns: repeat(11, minmax(0, 1fr)); } } .lg\:grid-cols-12 { @media (width >= 64rem) { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .lg\:flex-col { @media (width >= 64rem) { flex-direction: column; } } .lg\:flex-row { @media (width >= 64rem) { flex-direction: row; } } .lg\:flex-nowrap { @media (width >= 64rem) { flex-wrap: nowrap; } } .lg\:items-center { @media (width >= 64rem) { align-items: center; } } .lg\:items-end { @media (width >= 64rem) { align-items: flex-end; } } .min-lg\:items-end { @media (width >= 64rem) { align-items: flex-end; } } .lg\:justify-end { @media (width >= 64rem) { justify-content: flex-end; } } .lg\:gap-2 { @media (width >= 64rem) { gap: calc(var(--spacing) * 2); } } .lg\:gap-6 { @media (width >= 64rem) { gap: calc(var(--spacing) * 6); } } .lg\:gap-7\.5 { @media (width >= 64rem) { gap: calc(var(--spacing) * 7.5); } } .lg\:gap-8 { @media (width >= 64rem) { gap: calc(var(--spacing) * 8); } } .lg\:gap-12 { @media (width >= 64rem) { gap: calc(var(--spacing) * 12); } } .lg\:gap-16 { @media (width >= 64rem) { gap: calc(var(--spacing) * 16); } } .lg\:gap-20 { @media (width >= 64rem) { gap: calc(var(--spacing) * 20); } } .lg\:gap-22 { @media (width >= 64rem) { gap: calc(var(--spacing) * 22); } } .lg\:gap-24 { @media (width >= 64rem) { gap: calc(var(--spacing) * 24); } } .lg\:gap-28 { @media (width >= 64rem) { gap: calc(var(--spacing) * 28); } } .lg\:gap-35 { @media (width >= 64rem) { gap: calc(var(--spacing) * 35); } } .lg\:space-y-10 { @media (width >= 64rem) { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse))); } } } .lg\:space-y-14 { @media (width >= 64rem) { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 14) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 14) * calc(1 - var(--tw-space-y-reverse))); } } } .lg\:space-y-24 { @media (width >= 64rem) { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 24) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 24) * calc(1 - var(--tw-space-y-reverse))); } } } .lg\:gap-x-14 { @media (width >= 64rem) { column-gap: calc(var(--spacing) * 14); } } .lg\:gap-y-43 { @media (width >= 64rem) { row-gap: calc(var(--spacing) * 43); } } .lg\:rounded-2xl { @media (width >= 64rem) { border-radius: var(--radius-2xl); } } .lg\:rounded-s-none { @media (width >= 64rem) { border-start-start-radius: 0; border-end-start-radius: 0; } } .lg\:rounded-t-none { @media (width >= 64rem) { border-top-left-radius: 0; border-top-right-radius: 0; } } .lg\:rounded-l-3xl { @media (width >= 64rem) { border-top-left-radius: var(--radius-3xl); border-bottom-left-radius: var(--radius-3xl); } } .lg\:rounded-r-3xl { @media (width >= 64rem) { border-top-right-radius: var(--radius-3xl); border-bottom-right-radius: var(--radius-3xl); } } .lg\:rounded-b-none { @media (width >= 64rem) { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } } .lg\:p-0 { @media (width >= 64rem) { padding: calc(var(--spacing) * 0); } } .lg\:p-3 { @media (width >= 64rem) { padding: calc(var(--spacing) * 3); } } .lg\:p-8 { @media (width >= 64rem) { padding: calc(var(--spacing) * 8); } } .lg\:p-16 { @media (width >= 64rem) { padding: calc(var(--spacing) * 16); } } .lg\:p-21 { @media (width >= 64rem) { padding: calc(var(--spacing) * 21); } } .lg\:p-24 { @media (width >= 64rem) { padding: calc(var(--spacing) * 24); } } .lg\:badge-lg { @media (width >= 64rem) { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --size: calc(var(--size-selector, 0.25rem) * 7); padding-inline: calc(0.25rem * 3.5); } } .lg\:px-7 { @media (width >= 64rem) { padding-inline: calc(var(--spacing) * 7); } } .lg\:px-8 { @media (width >= 64rem) { padding-inline: calc(var(--spacing) * 8); } } .lg\:px-11\.75 { @media (width >= 64rem) { padding-inline: calc(var(--spacing) * 11.75); } } .lg\:py-4 { @media (width >= 64rem) { padding-block: calc(var(--spacing) * 4); } } .lg\:py-6 { @media (width >= 64rem) { padding-block: calc(var(--spacing) * 6); } } .lg\:py-8 { @media (width >= 64rem) { padding-block: calc(var(--spacing) * 8); } } .lg\:py-12 { @media (width >= 64rem) { padding-block: calc(var(--spacing) * 12); } } .lg\:py-12\.75 { @media (width >= 64rem) { padding-block: calc(var(--spacing) * 12.75); } } .lg\:py-14 { @media (width >= 64rem) { padding-block: calc(var(--spacing) * 14); } } .lg\:py-16\.5 { @media (width >= 64rem) { padding-block: calc(var(--spacing) * 16.5); } } .lg\:py-18 { @media (width >= 64rem) { padding-block: calc(var(--spacing) * 18); } } .lg\:py-20 { @media (width >= 64rem) { padding-block: calc(var(--spacing) * 20); } } .lg\:py-22 { @media (width >= 64rem) { padding-block: calc(var(--spacing) * 22); } } .lg\:py-24 { @media (width >= 64rem) { padding-block: calc(var(--spacing) * 24); } } .min-lg\:py-0 { @media (width >= 64rem) { padding-block: calc(var(--spacing) * 0); } } .lg\:ps-75 { @media (width >= 64rem) { padding-inline-start: calc(var(--spacing) * 75); } } .lg\:pe-16 { @media (width >= 64rem) { padding-inline-end: calc(var(--spacing) * 16); } } .lg\:pt-8 { @media (width >= 64rem) { padding-top: calc(var(--spacing) * 8); } } .lg\:pt-14 { @media (width >= 64rem) { padding-top: calc(var(--spacing) * 14); } } .lg\:pt-21 { @media (width >= 64rem) { padding-top: calc(var(--spacing) * 21); } } .lg\:pt-24 { @media (width >= 64rem) { padding-top: calc(var(--spacing) * 24); } } .lg\:pt-26\.5 { @media (width >= 64rem) { padding-top: calc(var(--spacing) * 26.5); } } .lg\:pt-28 { @media (width >= 64rem) { padding-top: calc(var(--spacing) * 28); } } .lg\:pt-45 { @media (width >= 64rem) { padding-top: calc(var(--spacing) * 45); } } .lg\:pt-47\.5 { @media (width >= 64rem) { padding-top: calc(var(--spacing) * 47.5); } } .lg\:pb-0 { @media (width >= 64rem) { padding-bottom: calc(var(--spacing) * 0); } } .lg\:pb-10 { @media (width >= 64rem) { padding-bottom: calc(var(--spacing) * 10); } } .lg\:pb-14 { @media (width >= 64rem) { padding-bottom: calc(var(--spacing) * 14); } } .lg\:pb-35 { @media (width >= 64rem) { padding-bottom: calc(var(--spacing) * 35); } } .lg\:pb-40 { @media (width >= 64rem) { padding-bottom: calc(var(--spacing) * 40); } } .lg\:pb-43 { @media (width >= 64rem) { padding-bottom: calc(var(--spacing) * 43); } } .lg\:btn-lg { @media (width >= 64rem) { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --btn-p: 1.25rem; --size: calc(var(--size-field, 0.25rem) * 11.5); } } .lg\:text-2xl { @media (width >= 64rem) { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } } .lg\:text-3xl { @media (width >= 64rem) { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } } .lg\:text-4xl { @media (width >= 64rem) { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } } .lg\:text-5xl { @media (width >= 64rem) { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); } } .lg\:text-lg { @media (width >= 64rem) { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } } .lg\:text-xl { @media (width >= 64rem) { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } } .lg\:shadow-none { @media (width >= 64rem) { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .lg\:\[--adaptive\:adaptive\] { @media (width >= 64rem) { --adaptive: adaptive; } } .lg\:before\:-top-4 { @media (width >= 64rem) { &::before { content: var(--tw-content); top: calc(var(--spacing) * -4); } } } .lg\:before\:h-5 { @media (width >= 64rem) { &::before { content: var(--tw-content); height: calc(var(--spacing) * 5); } } } .lg\:before\:w-full { @media (width >= 64rem) { &::before { content: var(--tw-content); width: 100%; } } } .lg\:max-xl\:start-\[6\%\] { @media (width >= 64rem) { @media (width < 80rem) { inset-inline-start: 6%; } } } .max-xl\:lg\:-start-\[5\%\] { @media (width < 80rem) { @media (width >= 64rem) { inset-inline-start: calc(5% * -1); } } } .max-xl\:lg\:top-\[20\%\] { @media (width < 80rem) { @media (width >= 64rem) { top: 20%; } } } .lg\:max-xl\:bottom-\[4\%\] { @media (width >= 64rem) { @media (width < 80rem) { bottom: 4%; } } } .lg\:max-xl\:col-span-2 { @media (width >= 64rem) { @media (width < 80rem) { grid-column: span 2 / span 2; } } } .max-xl\:lg\:-me-10 { @media (width < 80rem) { @media (width >= 64rem) { margin-inline-end: calc(var(--spacing) * -10); } } } .lg\:max-xl\:max-w-140 { @media (width >= 64rem) { @media (width < 80rem) { max-width: calc(var(--spacing) * 140); } } } .lg\:max-xl\:scale-80 { @media (width >= 64rem) { @media (width < 80rem) { --tw-scale-x: 80%; --tw-scale-y: 80%; --tw-scale-z: 80%; scale: var(--tw-scale-x) var(--tw-scale-y); } } } .lg\:max-xl\:grid-cols-4 { @media (width >= 64rem) { @media (width < 80rem) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } } .max-xl\:lg\:flex-col { @media (width < 80rem) { @media (width >= 64rem) { flex-direction: column; } } } .max-xl\:lg\:items-start { @media (width < 80rem) { @media (width >= 64rem) { align-items: flex-start; } } } .max-xl\:lg\:pt-4 { @media (width < 80rem) { @media (width >= 64rem) { padding-top: calc(var(--spacing) * 4); } } } .xl\:start-0 { @media (width >= 80rem) { inset-inline-start: calc(var(--spacing) * 0); } } .xl\:start-2 { @media (width >= 80rem) { inset-inline-start: calc(var(--spacing) * 2); } } .xl\:start-10 { @media (width >= 80rem) { inset-inline-start: calc(var(--spacing) * 10); } } .xl\:start-12 { @media (width >= 80rem) { inset-inline-start: calc(var(--spacing) * 12); } } .xl\:start-22 { @media (width >= 80rem) { inset-inline-start: calc(var(--spacing) * 22); } } .xl\:start-27 { @media (width >= 80rem) { inset-inline-start: calc(var(--spacing) * 27); } } .xl\:start-28 { @media (width >= 80rem) { inset-inline-start: calc(var(--spacing) * 28); } } .xl\:start-30 { @media (width >= 80rem) { inset-inline-start: calc(var(--spacing) * 30); } } .xl\:start-32 { @media (width >= 80rem) { inset-inline-start: calc(var(--spacing) * 32); } } .xl\:start-64 { @media (width >= 80rem) { inset-inline-start: calc(var(--spacing) * 64); } } .xl\:start-\[8\%\] { @media (width >= 80rem) { inset-inline-start: 8%; } } .xl\:start-\[12\%\] { @media (width >= 80rem) { inset-inline-start: 12%; } } .xl\:start-\[17\%\] { @media (width >= 80rem) { inset-inline-start: 17%; } } .xl\:-end-5 { @media (width >= 80rem) { inset-inline-end: calc(var(--spacing) * -5); } } .xl\:end-9 { @media (width >= 80rem) { inset-inline-end: calc(var(--spacing) * 9); } } .xl\:end-10 { @media (width >= 80rem) { inset-inline-end: calc(var(--spacing) * 10); } } .xl\:end-12 { @media (width >= 80rem) { inset-inline-end: calc(var(--spacing) * 12); } } .xl\:end-15 { @media (width >= 80rem) { inset-inline-end: calc(var(--spacing) * 15); } } .xl\:end-20 { @media (width >= 80rem) { inset-inline-end: calc(var(--spacing) * 20); } } .xl\:end-28 { @media (width >= 80rem) { inset-inline-end: calc(var(--spacing) * 28); } } .xl\:end-\[8\%\] { @media (width >= 80rem) { inset-inline-end: 8%; } } .xl\:end-\[9\%\] { @media (width >= 80rem) { inset-inline-end: 9%; } } .xl\:end-\[12\%\] { @media (width >= 80rem) { inset-inline-end: 12%; } } .xl\:end-\[12\.33\%\] { @media (width >= 80rem) { inset-inline-end: 12.33%; } } .xl\:top-15 { @media (width >= 80rem) { top: calc(var(--spacing) * 15); } } .xl\:top-19 { @media (width >= 80rem) { top: calc(var(--spacing) * 19); } } .xl\:top-22 { @media (width >= 80rem) { top: calc(var(--spacing) * 22); } } .xl\:top-32 { @media (width >= 80rem) { top: calc(var(--spacing) * 32); } } .xl\:top-62 { @media (width >= 80rem) { top: calc(var(--spacing) * 62); } } .xl\:top-\[25\%\] { @media (width >= 80rem) { top: 25%; } } .xl\:top-\[31\%\] { @media (width >= 80rem) { top: 31%; } } .xl\:bottom-0 { @media (width >= 80rem) { bottom: calc(var(--spacing) * 0); } } .xl\:bottom-14 { @media (width >= 80rem) { bottom: calc(var(--spacing) * 14); } } .xl\:bottom-28 { @media (width >= 80rem) { bottom: calc(var(--spacing) * 28); } } .xl\:bottom-38 { @media (width >= 80rem) { bottom: calc(var(--spacing) * 38); } } .xl\:z-50 { @media (width >= 80rem) { z-index: 50; } } .xl\:order-1 { @media (width >= 80rem) { order: 1; } } .xl\:order-2 { @media (width >= 80rem) { order: 2; } } .xl\:col-span-1 { @media (width >= 80rem) { grid-column: span 1 / span 1; } } .xl\:col-span-2 { @media (width >= 80rem) { grid-column: span 2 / span 2; } } .xl\:col-span-3 { @media (width >= 80rem) { grid-column: span 3 / span 3; } } .xl\:col-span-4 { @media (width >= 80rem) { grid-column: span 4 / span 4; } } .xl\:col-span-7 { @media (width >= 80rem) { grid-column: span 7 / span 7; } } .xl\:mx-0 { @media (width >= 80rem) { margin-inline: calc(var(--spacing) * 0); } } .xl\:-mt-3\.5 { @media (width >= 80rem) { margin-top: calc(var(--spacing) * -3.5); } } .xl\:-mt-7\.25 { @media (width >= 80rem) { margin-top: calc(var(--spacing) * -7.25); } } .xl\:mt-14\.25 { @media (width >= 80rem) { margin-top: calc(var(--spacing) * 14.25); } } .xl\:mt-42 { @media (width >= 80rem) { margin-top: calc(var(--spacing) * 42); } } .xl\:block { @media (width >= 80rem) { display: block; } } .xl\:grid { @media (width >= 80rem) { display: grid; } } .xl\:hidden { @media (width >= 80rem) { display: none; } } .xl\:divider-horizontal { @media (width >= 80rem) { &.wehvw { height: auto; width: auto; flex-direction: column; &:before, &:after { height: 100%; width: 1px; border-inline-end-style: var(--tw-border-style); border-inline-end-width: 1px; border-top-style: var(--tw-border-style); border-top-width: 0px; } } } } .xl\:size-51 { @media (width >= 80rem) { width: calc(var(--spacing) * 51); height: calc(var(--spacing) * 51); } } .xl\:size-55\.5 { @media (width >= 80rem) { width: calc(var(--spacing) * 55.5); height: calc(var(--spacing) * 55.5); } } .xl\:size-75\.5 { @media (width >= 80rem) { width: calc(var(--spacing) * 75.5); height: calc(var(--spacing) * 75.5); } } .xl\:size-80 { @media (width >= 80rem) { width: calc(var(--spacing) * 80); height: calc(var(--spacing) * 80); } } .xl\:size-82 { @media (width >= 80rem) { width: calc(var(--spacing) * 82); height: calc(var(--spacing) * 82); } } .xl\:size-97\.5 { @media (width >= 80rem) { width: calc(var(--spacing) * 97.5); height: calc(var(--spacing) * 97.5); } } .xl\:size-100 { @media (width >= 80rem) { width: calc(var(--spacing) * 100); height: calc(var(--spacing) * 100); } } .xl\:size-106 { @media (width >= 80rem) { width: calc(var(--spacing) * 106); height: calc(var(--spacing) * 106); } } .xl\:size-109 { @media (width >= 80rem) { width: calc(var(--spacing) * 109); height: calc(var(--spacing) * 109); } } .xl\:size-114 { @media (width >= 80rem) { width: calc(var(--spacing) * 114); height: calc(var(--spacing) * 114); } } .xl\:size-130 { @media (width >= 80rem) { width: calc(var(--spacing) * 130); height: calc(var(--spacing) * 130); } } .xl\:size-138 { @media (width >= 80rem) { width: calc(var(--spacing) * 138); height: calc(var(--spacing) * 138); } } .xl\:h-16\.5 { @media (width >= 80rem) { height: calc(var(--spacing) * 16.5); } } .xl\:h-72\.75 { @media (width >= 80rem) { height: calc(var(--spacing) * 72.75); } } .xl\:h-81 { @media (width >= 80rem) { height: calc(var(--spacing) * 81); } } .xl\:h-104 { @media (width >= 80rem) { height: calc(var(--spacing) * 104); } } .xl\:h-121 { @media (width >= 80rem) { height: calc(var(--spacing) * 121); } } .xl\:h-screen { @media (width >= 80rem) { height: 100vh; } } .xl\:w-80 { @media (width >= 80rem) { width: calc(var(--spacing) * 80); } } .xl\:w-183 { @media (width >= 80rem) { width: calc(var(--spacing) * 183); } } .xl\:w-\[85\%\] { @media (width >= 80rem) { width: 85%; } } .xl\:w-max { @media (width >= 80rem) { width: max-content; } } .xl\:max-w-2xl { @media (width >= 80rem) { max-width: var(--container-2xl); } } .xl\:max-w-md { @media (width >= 80rem) { max-width: var(--container-md); } } .xl\:translate-x-0 { @media (width >= 80rem) { --tw-translate-x: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); } } .xl\:translate-y-1\/2 { @media (width >= 80rem) { --tw-translate-y: calc(1/2 * 100%); translate: var(--tw-translate-x) var(--tw-translate-y); } } .xl\:grid-cols-2 { @media (width >= 80rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .xl\:grid-cols-3 { @media (width >= 80rem) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .xl\:grid-cols-4 { @media (width >= 80rem) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .xl\:grid-cols-5 { @media (width >= 80rem) { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .xl\:grid-cols-6 { @media (width >= 80rem) { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .xl\:grid-cols-7 { @media (width >= 80rem) { grid-template-columns: repeat(7, minmax(0, 1fr)); } } .xl\:grid-cols-10 { @media (width >= 80rem) { grid-template-columns: repeat(10, minmax(0, 1fr)); } } .xl\:flex-col { @media (width >= 80rem) { flex-direction: column; } } .xl\:flex-row { @media (width >= 80rem) { flex-direction: row; } } .xl\:justify-end { @media (width >= 80rem) { justify-content: flex-end; } } .xl\:gap-14 { @media (width >= 80rem) { gap: calc(var(--spacing) * 14); } } .xl\:gap-20 { @media (width >= 80rem) { gap: calc(var(--spacing) * 20); } } .xl\:gap-24 { @media (width >= 80rem) { gap: calc(var(--spacing) * 24); } } .xl\:gap-44 { @media (width >= 80rem) { gap: calc(var(--spacing) * 44); } } .xl\:gap-x-8 { @media (width >= 80rem) { column-gap: calc(var(--spacing) * 8); } } .xl\:p-6 { @media (width >= 80rem) { padding: calc(var(--spacing) * 6); } } .xl\:px-25 { @media (width >= 80rem) { padding-inline: calc(var(--spacing) * 25); } } .xl\:py-0 { @media (width >= 80rem) { padding-block: calc(var(--spacing) * 0); } } .xl\:py-16 { @media (width >= 80rem) { padding-block: calc(var(--spacing) * 16); } } .xl\:py-24 { @media (width >= 80rem) { padding-block: calc(var(--spacing) * 24); } } .xl\:ps-8 { @media (width >= 80rem) { padding-inline-start: calc(var(--spacing) * 8); } } .xl\:ps-65 { @media (width >= 80rem) { padding-inline-start: calc(var(--spacing) * 65); } } .xl\:pt-57 { @media (width >= 80rem) { padding-top: calc(var(--spacing) * 57); } } .xl\:text-4xl { @media (width >= 80rem) { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } } .xl\:text-5xl { @media (width >= 80rem) { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); } } .xl\:text-9xl { @media (width >= 80rem) { font-size: var(--text-9xl); line-height: var(--tw-leading, var(--text-9xl--line-height)); } } .xl\:text-xl { @media (width >= 80rem) { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } } .xl\:text-nowrap { @media (width >= 80rem) { text-wrap: nowrap; } } .xl\:shadow-none { @media (width >= 80rem) { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .xl\:transition-none { @media (width >= 80rem) { transition-property: none; } } .\32 xl\:grid-cols-3 { @media (width >= 96rem) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .rtl\:start-0 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { inset-inline-start: calc(var(--spacing) * 0); } } .rtl\:start-12 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { inset-inline-start: calc(var(--spacing) * 12); } } .rtl\:start-\[11\%\] { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { inset-inline-start: 11%; } } .rtl\:start-\[13\%\] { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { inset-inline-start: 13%; } } .rtl\:end-44 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { inset-inline-end: calc(var(--spacing) * 44); } } .rtl\:end-\[100\%\] { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { inset-inline-end: 100%; } } .rtl\:top-\[33\%\] { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { top: 33%; } } .rtl\:right-\[calc\(50\%\+2rem\)\] { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { right: calc(50% + 2rem); } } .rtl\:left-auto { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { left: auto; } } .rtl\:\!mr-0 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { margin-right: calc(var(--spacing) * 0) !important; } } .rtl\:ml-20 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { margin-left: calc(var(--spacing) * 20); } } .rtl\:-translate-x-1\/2 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { --tw-translate-x: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } } .rtl\:translate-x-1\/2 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { --tw-translate-x: calc(1/2 * 100%); translate: var(--tw-translate-x) var(--tw-translate-y); } } .rtl\:-rotate-\[11deg\] { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { rotate: calc(11deg * -1); } } .rtl\:-rotate-\[19deg\] { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { rotate: calc(19deg * -1); } } .rtl\:-rotate-\[26deg\] { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { rotate: calc(26deg * -1); } } .rtl\:rotate-180 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { rotate: 180deg; } } .rtl\:rotate-y-0 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { --tw-rotate-y: rotateY(0deg); transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } } .rtl\:rotate-y-180 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { --tw-rotate-y: rotateY(180deg); transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } } .rtl\:animate-marqueeLeft { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { animation: var(--animate-marqueeLeft); } } .rtl\:animate-marqueeRight { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { animation: var(--animate-marqueeRight); } } .rtl\:flex-row-reverse { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { flex-direction: row-reverse; } } .rtl\:rounded-l-3xl { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { border-top-left-radius: var(--radius-3xl); border-bottom-left-radius: var(--radius-3xl); } } .rtl\:group-hover\:rotate-45 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group):hover *) { @media (hover: hover) { rotate: 45deg; } } } } .rtl\:group-hover\:rotate-225 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group):hover *) { @media (hover: hover) { rotate: 225deg; } } } } .rtl\:before\:start-1\/2 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &::before { content: var(--tw-content); inset-inline-start: calc(1/2 * 100%); } } } .rtl\:before\:translate-x-1\/2 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &::before { content: var(--tw-content); --tw-translate-x: calc(1/2 * 100%); translate: var(--tw-translate-x) var(--tw-translate-y); } } } .rtl\:hover\:rotate-225 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:hover { @media (hover: hover) { rotate: 225deg; } } } } .rtl\:lg\:rounded-l-3xl { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { @media (width >= 64rem) { border-top-left-radius: var(--radius-3xl); border-bottom-left-radius: var(--radius-3xl); } } } .dark\:block { @media (prefers-color-scheme: dark) { display: block; } } .dark\:hidden { @media (prefers-color-scheme: dark) { display: none; } } .dark\:text-neutral-500 { @media (prefers-color-scheme: dark) { color: var(--color-neutral-500); } } .dark\:opacity-0 { @media (prefers-color-scheme: dark) { opacity: 0%; } } .dark\:hover\:text-blue-500 { @media (prefers-color-scheme: dark) { &:hover { @media (hover: hover) { color: var(--color-blue-500); } } } } .dark\:focus\:text-blue-500 { @media (prefers-color-scheme: dark) { &:focus { color: var(--color-blue-500); } } } .dropdown-open\:rotate-180 { &.dropdown-menu.open { rotate: 180deg; } .dropdown.open > & { rotate: 180deg; } .dropdown.open > .dropdown-toggle & { rotate: 180deg; } .dropdown.open > .dropdown-menu > & { rotate: 180deg; } } .dropdown-open\:bg-base-100 { &.dropdown-menu.open { background-color: var(--color-base-100); } .dropdown.open > & { background-color: var(--color-base-100); } .dropdown.open > .dropdown-toggle & { background-color: var(--color-base-100); } .dropdown.open > .dropdown-menu > & { background-color: var(--color-base-100); } } .dropdown-open\:bg-base-content\/10 { &.dropdown-menu.open { background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } } .dropdown.open > & { background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } } .dropdown.open > .dropdown-toggle & { background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } } .dropdown.open > .dropdown-menu > & { background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } } } .dropdown-open\:bg-transparent { &.dropdown-menu.open { background-color: transparent; } .dropdown.open > & { background-color: transparent; } .dropdown.open > .dropdown-toggle & { background-color: transparent; } .dropdown.open > .dropdown-menu > & { background-color: transparent; } } .dropdown-open\:text-base-content { &.dropdown-menu.open { color: var(--color-base-content); } .dropdown.open > & { color: var(--color-base-content); } .dropdown.open > .dropdown-toggle & { color: var(--color-base-content); } .dropdown.open > .dropdown-menu > & { color: var(--color-base-content); } } .dropdown-open\:text-primary { &.dropdown-menu.open { color: var(--color-primary); } .dropdown.open > & { color: var(--color-primary); } .dropdown.open > .dropdown-toggle & { color: var(--color-primary); } .dropdown.open > .dropdown-menu > & { color: var(--color-primary); } } .dropdown-open\:opacity-100 { &.dropdown-menu.open { opacity: 100%; } .dropdown.open > & { opacity: 100%; } .dropdown.open > .dropdown-toggle & { opacity: 100%; } .dropdown.open > .dropdown-menu > & { opacity: 100%; } } .removing\:translate-x-5 { &.removing { --tw-translate-x: calc(var(--spacing) * 5); translate: var(--tw-translate-x) var(--tw-translate-y); } } .removing\:opacity-0 { &.removing { opacity: 0%; } } .tooltip-shown\:visible { &.tooltip-content.show { visibility: visible; } .tooltip.show & { visibility: visible; } } .tooltip-shown\:opacity-100 { &.tooltip-content.show { opacity: 100%; } .tooltip.show & { opacity: 100%; } } .accordion-item-active\:block { &.accordion-item.active { display: block; } .accordion-item.active > & { display: block; } .accordion-item.active > .accordion-toggle & { display: block; } .accordion-item.active > .accordion-heading > .accordion-toggle & { display: block; } &.accordion-toggle { .accordion-item.active > & { display: block; } } &.accordion-toggle { .accordion-item.active > .accordion-heading > & { display: block; } } &.accordion-force-active { .accordion-item.active & { display: block; } } } .accordion-item-active\:hidden { &.accordion-item.active { display: none; } .accordion-item.active > & { display: none; } .accordion-item.active > .accordion-toggle & { display: none; } .accordion-item.active > .accordion-heading > .accordion-toggle & { display: none; } &.accordion-toggle { .accordion-item.active > & { display: none; } } &.accordion-toggle { .accordion-item.active > .accordion-heading > & { display: none; } } &.accordion-force-active { .accordion-item.active & { display: none; } } } .accordion-item-active\:-rotate-90 { &.accordion-item.active { rotate: calc(90deg * -1); } .accordion-item.active > & { rotate: calc(90deg * -1); } .accordion-item.active > .accordion-toggle & { rotate: calc(90deg * -1); } .accordion-item.active > .accordion-heading > .accordion-toggle & { rotate: calc(90deg * -1); } &.accordion-toggle { .accordion-item.active > & { rotate: calc(90deg * -1); } } &.accordion-toggle { .accordion-item.active > .accordion-heading > & { rotate: calc(90deg * -1); } } &.accordion-force-active { .accordion-item.active & { rotate: calc(90deg * -1); } } } .accordion-item-active\:-rotate-180 { &.accordion-item.active { rotate: calc(180deg * -1); } .accordion-item.active > & { rotate: calc(180deg * -1); } .accordion-item.active > .accordion-toggle & { rotate: calc(180deg * -1); } .accordion-item.active > .accordion-heading > .accordion-toggle & { rotate: calc(180deg * -1); } &.accordion-toggle { .accordion-item.active > & { rotate: calc(180deg * -1); } } &.accordion-toggle { .accordion-item.active > .accordion-heading > & { rotate: calc(180deg * -1); } } &.accordion-force-active { .accordion-item.active & { rotate: calc(180deg * -1); } } } .accordion-item-active\:rotate-90 { &.accordion-item.active { rotate: 90deg; } .accordion-item.active > & { rotate: 90deg; } .accordion-item.active > .accordion-toggle & { rotate: 90deg; } .accordion-item.active > .accordion-heading > .accordion-toggle & { rotate: 90deg; } &.accordion-toggle { .accordion-item.active > & { rotate: 90deg; } } &.accordion-toggle { .accordion-item.active > .accordion-heading > & { rotate: 90deg; } } &.accordion-force-active { .accordion-item.active & { rotate: 90deg; } } } .accordion-item-active\:rotate-180 { &.accordion-item.active { rotate: 180deg; } .accordion-item.active > & { rotate: 180deg; } .accordion-item.active > .accordion-toggle & { rotate: 180deg; } .accordion-item.active > .accordion-heading > .accordion-toggle & { rotate: 180deg; } &.accordion-toggle { .accordion-item.active > & { rotate: 180deg; } } &.accordion-toggle { .accordion-item.active > .accordion-heading > & { rotate: 180deg; } } &.accordion-force-active { .accordion-item.active & { rotate: 180deg; } } } .accordion-item-active\:bg-neutral\/10 { &.accordion-item.active { background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } } .accordion-item.active > & { background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } } .accordion-item.active > .accordion-toggle & { background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } } .accordion-item.active > .accordion-heading > .accordion-toggle & { background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } } &.accordion-toggle { .accordion-item.active > & { background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } } } &.accordion-toggle { .accordion-item.active > .accordion-heading > & { background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } } } &.accordion-force-active { .accordion-item.active & { background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } } } } .accordion-item-active\:opacity-100 { &.accordion-item.active { opacity: 100%; } .accordion-item.active > & { opacity: 100%; } .accordion-item.active > .accordion-toggle & { opacity: 100%; } .accordion-item.active > .accordion-heading > .accordion-toggle & { opacity: 100%; } &.accordion-toggle { .accordion-item.active > & { opacity: 100%; } } &.accordion-toggle { .accordion-item.active > .accordion-heading > & { opacity: 100%; } } &.accordion-force-active { .accordion-item.active & { opacity: 100%; } } } .\*\:accordion-item-active\:shadow-md { :is(& > *) { &.accordion-item.active { --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .accordion-item.active > & { --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .accordion-item.active > .accordion-toggle & { --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .accordion-item.active > .accordion-heading > .accordion-toggle & { --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } &.accordion-toggle { .accordion-item.active > & { --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } &.accordion-toggle { .accordion-item.active > .accordion-heading > & { --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } &.accordion-force-active { .accordion-item.active & { --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } } } .collapse-open\:block { &.collapse.open { display: block; } &.collapse-toggle.open { display: block; } .collapse.open > & { display: block; } .collapse-toggle.open > & { display: block; } } .collapse-open\:flex { &.collapse.open { display: flex; } &.collapse-toggle.open { display: flex; } .collapse.open > & { display: flex; } .collapse-toggle.open > & { display: flex; } } .collapse-open\:hidden { &.collapse.open { display: none; } &.collapse-toggle.open { display: none; } .collapse.open > & { display: none; } .collapse-toggle.open > & { display: none; } } .collapse-open\:rotate-180 { &.collapse.open { rotate: 180deg; } &.collapse-toggle.open { rotate: 180deg; } .collapse.open > & { rotate: 180deg; } .collapse-toggle.open > & { rotate: 180deg; } } .active-tab\:tab-active { &[data-tab].active { &:not([disabled]) { border-color: var(--color-primary); color: var(--color-primary); } .jm0bt > .o1ezv&:not([disabled]) { background-color: var(--tab-bg); border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px); border-color: var(--tab-border-color); border-end-start-radius: 0; border-end-end-radius: 0; padding-inline-start: calc(var(--tab-p, 1rem) - var(--tab-border, 1px)); padding-inline-end: calc(var(--tab-p, 1rem) - var(--tab-border, 1px)); padding-bottom: var(--tab-border, 1px); padding-top: 0; } .jm0bt > .o1ezv&:not([disabled]):before { content: ""; display: block; position: absolute; z-index: 1; width: calc(100% + var(--radius-field, 0.375rem) * 2); height: var(--radius-field, 0.375rem); bottom: 0; background-size: var(--radius-field, 0.375rem); background-repeat: no-repeat; background-position: top left, top right; --tab-grad: calc(69% - var(--tab-border, 1px)); --radius-start: radial-gradient( circle at top left, transparent var(--tab-grad), var(--tab-border-color) calc(var(--tab-grad) + 0.25px), var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)), var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px) ); --radius-end: radial-gradient( circle at top right, transparent var(--tab-grad), var(--tab-border-color) calc(var(--tab-grad) + 0.25px), var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)), var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px) ); background-image: var(--radius-start), var(--radius-end); } .jm0bt > .o1ezv&:not([disabled]):first-child:before { background-image: var(--radius-end); background-position: top right; } .jm0bt > .o1ezv&:not([disabled]):last-child:before { background-image: var(--radius-start); background-position: top left; } [dir="rtl"] .jm0bt > .o1ezv&:not([disabled]):first-child:before { background-image: var(--radius-start); background-position: top left; } [dir="rtl"] .jm0bt > .o1ezv&:not([disabled]):last-child:before { background-image: var(--radius-end); background-position: top right; } .jm0bt > &:not([disabled]) + .jm0bt .active-tab\:tab-active:not([disabled]) { &:before { background-image: var(--radius-end); background-position: top right; } } .jm0bt > .active-tab\:tab-active:not([disabled]) + .jm0bt &:not([disabled]) { &:before { background-image: var(--radius-end); background-position: top right; } } } [data-tab].active & { &:not([disabled]) { border-color: var(--color-primary); color: var(--color-primary); } .jm0bt > .o1ezv&:not([disabled]) { background-color: var(--tab-bg); border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px); border-color: var(--tab-border-color); border-end-start-radius: 0; border-end-end-radius: 0; padding-inline-start: calc(var(--tab-p, 1rem) - var(--tab-border, 1px)); padding-inline-end: calc(var(--tab-p, 1rem) - var(--tab-border, 1px)); padding-bottom: var(--tab-border, 1px); padding-top: 0; } .jm0bt > .o1ezv&:not([disabled]):before { content: ""; display: block; position: absolute; z-index: 1; width: calc(100% + var(--radius-field, 0.375rem) * 2); height: var(--radius-field, 0.375rem); bottom: 0; background-size: var(--radius-field, 0.375rem); background-repeat: no-repeat; background-position: top left, top right; --tab-grad: calc(69% - var(--tab-border, 1px)); --radius-start: radial-gradient( circle at top left, transparent var(--tab-grad), var(--tab-border-color) calc(var(--tab-grad) + 0.25px), var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)), var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px) ); --radius-end: radial-gradient( circle at top right, transparent var(--tab-grad), var(--tab-border-color) calc(var(--tab-grad) + 0.25px), var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)), var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px) ); background-image: var(--radius-start), var(--radius-end); } .jm0bt > .o1ezv&:not([disabled]):first-child:before { background-image: var(--radius-end); background-position: top right; } .jm0bt > .o1ezv&:not([disabled]):last-child:before { background-image: var(--radius-start); background-position: top left; } [dir="rtl"] .jm0bt > .o1ezv&:not([disabled]):first-child:before { background-image: var(--radius-start); background-position: top left; } [dir="rtl"] .jm0bt > .o1ezv&:not([disabled]):last-child:before { background-image: var(--radius-end); background-position: top right; } .jm0bt > &:not([disabled]) + .jm0bt .active-tab\:tab-active:not([disabled]) { &:before { background-image: var(--radius-end); background-position: top right; } } .jm0bt > .active-tab\:tab-active:not([disabled]) + .jm0bt &:not([disabled]) { &:before { background-image: var(--radius-end); background-position: top right; } } } } .active-tab\:border-white { &[data-tab].active { border-color: var(--color-white); } [data-tab].active & { border-color: var(--color-white); } } .active-tab\:bg-primary { &[data-tab].active { background-color: var(--color-primary); } [data-tab].active & { background-color: var(--color-primary); } } .active-tab\:bg-linear-to-r { &[data-tab].active { --tw-gradient-position: to right; @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: to right in oklab; } background-image: linear-gradient(var(--tw-gradient-stops)); } [data-tab].active & { --tw-gradient-position: to right; @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: to right in oklab; } background-image: linear-gradient(var(--tw-gradient-stops)); } } .active-tab\:gradient-bg { &[data-tab].active { --darker-shade: var(--gradient-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --darker-shade: color-mix(in oklab, var(--gradient-color, var(--color-neutral)) 80%, black); } background-image: linear-gradient( var(--gradient-angle, 135deg), var(--gradient-color, var(--color-neutral)) 0%, var(--darker-shade) 100% ); } [data-tab].active & { --darker-shade: var(--gradient-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --darker-shade: color-mix(in oklab, var(--gradient-color, var(--color-neutral)) 80%, black); } background-image: linear-gradient( var(--gradient-angle, 135deg), var(--gradient-color, var(--color-neutral)) 0%, var(--darker-shade) 100% ); } } .active-tab\:from-primary { &[data-tab].active { --tw-gradient-from: var(--color-primary); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } [data-tab].active & { --tw-gradient-from: var(--color-primary); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } } .active-tab\:bg-clip-text { &[data-tab].active { background-clip: text; } [data-tab].active & { background-clip: text; } } .active-tab\:text-base-100 { &[data-tab].active { color: var(--color-base-100); } [data-tab].active & { color: var(--color-base-100); } } .active-tab\:text-transparent { &[data-tab].active { color: transparent; } [data-tab].active & { color: transparent; } } .active-tab\:text-white { &[data-tab].active { color: var(--color-white); } [data-tab].active & { color: var(--color-white); } } .active-tab\:gradient-bg-primary { &[data-tab].active { --gradient-color: var(--color-primary); } [data-tab].active & { --gradient-color: var(--color-primary); } } .overlay-open\:translate-x-0 { &.open { --tw-translate-x: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); } .open & { --tw-translate-x: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); } } .overlay-open\:opacity-100 { &.open { opacity: 100%; } .open & { opacity: 100%; } } .overlay-open\:duration-300 { &.open { --tw-duration: 300ms; transition-duration: 300ms; } .open & { --tw-duration: 300ms; transition-duration: 300ms; } } .carousel-active\:border-primary { &.active { border-color: var(--color-primary); } .active & { border-color: var(--color-primary); } } .carousel-active\:bg-primary { &.active { background-color: var(--color-primary); } .active & { background-color: var(--color-primary); } } .carousel-active\:bg-primary\/30 { &.active { background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 30%, transparent); } } .active & { background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 30%, transparent); } } } .carousel-disabled\:btn-soft { &.disabled { --btn-shadow: ""; color: var(--btn-color, var(--color-neutral)); --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, var(--color-base-100)); } border-width: 0; --btn-noise: none; &:focus-visible { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 20%, var(--color-base-100)); } } @media (hover: hover) { &:hover { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 20%, var(--color-base-100)); } } } &.fpdxq { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 20%, var(--color-base-100)); } } } .disabled & { --btn-shadow: ""; color: var(--btn-color, var(--color-neutral)); --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, var(--color-base-100)); } border-width: 0; --btn-noise: none; &:focus-visible { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 20%, var(--color-base-100)); } } @media (hover: hover) { &:hover { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 20%, var(--color-base-100)); } } } &.fpdxq { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 20%, var(--color-base-100)); } } } } .carousel-disabled\:btn-outline { &.disabled { --btn-shadow: ""; --btn-bg: ""; color: var(--btn-color, var(--color-neutral)); --btn-border: var(--btn-color, var(--color-neutral)); --btn-noise: none; outline-color: var(--btn-color, var(--color-neutral)); @media (hover: hover) { &:hover { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } } } &:focus-visible { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } outline-width: 1px; } &.fpdxq { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } } } .disabled & { --btn-shadow: ""; --btn-bg: ""; color: var(--btn-color, var(--color-neutral)); --btn-border: var(--btn-color, var(--color-neutral)); --btn-noise: none; outline-color: var(--btn-color, var(--color-neutral)); @media (hover: hover) { &:hover { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } } } &:focus-visible { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } outline-width: 1px; } &.fpdxq { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } } } } .carousel-disabled\:text-base-content\/50 { &.disabled { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } .disabled & { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } } .carousel-disabled\:opacity-50 { &.disabled { opacity: 50%; } .disabled & { opacity: 50%; } } .carousel-disabled\:opacity-100 { &.disabled { opacity: 100%; } .disabled & { opacity: 100%; } } .carousel-disabled\:btn-neutral { &.disabled { --btn-color: var(--color-neutral); --btn-fg: var(--color-neutral-content); } .disabled & { --btn-color: var(--color-neutral); --btn-fg: var(--color-neutral-content); } } .selected\:block { &.selected { display: block; } .selected & { display: block; } } .selected\:select-active { &.selected { background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 10%, transparent); } color: var(--color-primary); } .selected & { background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 10%, transparent); } color: var(--color-primary); } } .select-disabled\:pointer-events-none { &.disabled { pointer-events: none; } .disabled & { pointer-events: none; } } .select-disabled\:opacity-40 { &.disabled { opacity: 40%; } .disabled & { opacity: 40%; } } .password-active\:block { &.active { display: block; } .active & { display: block; } } .password-active\:hidden { &.active { display: none; } .active & { display: none; } } .stepper-active\:text-bg-primary { &.active { background-color: var(--color-primary); color: var(--color-primary-content); } .active & { background-color: var(--color-primary); color: var(--color-primary-content); } } .stepper-active\:text-primary { &.active { color: var(--color-primary); } .active & { color: var(--color-primary); } } .stepper-success\:text-bg-primary { &.is-valid { background-color: var(--color-primary); color: var(--color-primary-content); } .is-valid & { background-color: var(--color-primary); color: var(--color-primary-content); } } .stepper-success\:text-bg-soft-primary { &.is-valid { color: var(--color-primary); background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 10%, var(--color-base-100)); } } .is-valid & { color: var(--color-primary); background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 10%, var(--color-base-100)); } } } .stepper-success\:bg-primary { &.is-valid { background-color: var(--color-primary); } .is-valid & { background-color: var(--color-primary); } } .stepper-success\:bg-success { &.is-valid { background-color: var(--color-success); } .is-valid & { background-color: var(--color-success); } } .stepper-success\:text-base-content\/50 { &.is-valid { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } .is-valid & { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } } .stepper-success\:text-primary { &.is-valid { color: var(--color-primary); } .is-valid & { color: var(--color-primary); } } .stepper-completed\:text-bg-success { &.completed { background-color: var(--color-success); color: var(--color-success-content); } .completed & { background-color: var(--color-success); color: var(--color-success-content); } } .stepper-completed\:bg-success { &.completed { background-color: var(--color-success); } .completed & { background-color: var(--color-success); } } .stepper-completed\:text-success { &.completed { color: var(--color-success); } .completed & { color: var(--color-success); } } .stepper-error\:text-bg-error { &.is-invalid { background-color: var(--color-error); color: var(--color-error-content); } .is-invalid & { background-color: var(--color-error); color: var(--color-error-content); } } .combo-box-selected\:block { &.selected { display: block; } .selected & { display: block; } } .combo-box-selected\:dropdown-active { &.selected { background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 10%, transparent); } color: var(--color-primary); } .selected & { background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 10%, transparent); } color: var(--color-primary); } } .datatable-ordering-asc\:block { &.dt-ordering-asc { display: block; } .dt-ordering-asc & { display: block; } } .datatable-ordering-desc\:block { &.dt-ordering-desc { display: block; } .dt-ordering-desc & { display: block; } } .range-slider-disabled\:pointer-events-none { &.disabled { pointer-events: none; } .disabled & { pointer-events: none; } } .range-slider-disabled\:opacity-50 { &.disabled { opacity: 50%; } .disabled & { opacity: 50%; } } .file-upload-complete\:progress-primary { &.complete { background-color: var(--color-primary); color: var(--color-primary-content); } .complete & { background-color: var(--color-primary); color: var(--color-primary-content); } } .file-upload-complete\:progress-success { &.complete { background-color: var(--color-success); color: var(--color-success-content); } .complete & { background-color: var(--color-success); color: var(--color-success-content); } } .intersect\:motion-preset-bounce { &:not([no-intersect]) { --motion-duration: 300ms; --motion-translate-timing: var(--motion-bounce); --motion-translate-perceptual-duration-multiplier: 2; --motion-origin-opacity: 0; --motion-origin-translate-y: -25%; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-bounce { &:not([no-intersect]) { --motion-duration: 300ms; --motion-translate-timing: var(--motion-bounce); --motion-translate-perceptual-duration-multiplier: 2; --motion-origin-opacity: 0; --motion-origin-translate-y: -25%; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-bounce { &:not([no-intersect]) { --motion-duration: 300ms; --motion-translate-timing: var(--motion-bounce); --motion-translate-perceptual-duration-multiplier: 2; --motion-origin-opacity: 0; --motion-origin-translate-y: -25%; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-bounce { &:not([no-intersect]) { --motion-duration: 300ms; --motion-translate-timing: var(--motion-bounce); --motion-translate-perceptual-duration-multiplier: 2; --motion-origin-opacity: 0; --motion-origin-translate-y: -25%; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-bounce { &:not([no-intersect]) { --motion-duration: 300ms; --motion-translate-timing: var(--motion-bounce); --motion-translate-perceptual-duration-multiplier: 2; --motion-origin-opacity: 0; --motion-origin-translate-y: -25%; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-bounce { &:not([no-intersect]) { --motion-duration: 300ms; --motion-translate-timing: var(--motion-bounce); --motion-translate-perceptual-duration-multiplier: 2; --motion-origin-opacity: 0; --motion-origin-translate-y: -25%; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-bounce { &:not([no-intersect]) { --motion-duration: 300ms; --motion-translate-timing: var(--motion-bounce); --motion-translate-perceptual-duration-multiplier: 2; --motion-origin-opacity: 0; --motion-origin-translate-y: -25%; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-bounce { &:not([no-intersect]) { --motion-duration: 300ms; --motion-translate-timing: var(--motion-bounce); --motion-translate-perceptual-duration-multiplier: 2; --motion-origin-opacity: 0; --motion-origin-translate-y: -25%; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-compress { &:not([no-intersect]) { --motion-origin-scale-x: 150%; --motion-origin-scale-y: 150%; --motion-origin-opacity: 0; --motion-scale-timing: var(--motion-spring-bouncier); --motion-scale-perceptual-duration-multiplier: 2.035; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-compress { &:not([no-intersect]) { --motion-origin-scale-x: 150%; --motion-origin-scale-y: 150%; --motion-origin-opacity: 0; --motion-scale-timing: var(--motion-spring-bouncier); --motion-scale-perceptual-duration-multiplier: 2.035; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-compress { &:not([no-intersect]) { --motion-origin-scale-x: 150%; --motion-origin-scale-y: 150%; --motion-origin-opacity: 0; --motion-scale-timing: var(--motion-spring-bouncier); --motion-scale-perceptual-duration-multiplier: 2.035; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-compress { &:not([no-intersect]) { --motion-origin-scale-x: 150%; --motion-origin-scale-y: 150%; --motion-origin-opacity: 0; --motion-scale-timing: var(--motion-spring-bouncier); --motion-scale-perceptual-duration-multiplier: 2.035; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-compress { &:not([no-intersect]) { --motion-origin-scale-x: 150%; --motion-origin-scale-y: 150%; --motion-origin-opacity: 0; --motion-scale-timing: var(--motion-spring-bouncier); --motion-scale-perceptual-duration-multiplier: 2.035; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-compress { &:not([no-intersect]) { --motion-origin-scale-x: 150%; --motion-origin-scale-y: 150%; --motion-origin-opacity: 0; --motion-scale-timing: var(--motion-spring-bouncier); --motion-scale-perceptual-duration-multiplier: 2.035; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-compress { &:not([no-intersect]) { --motion-origin-scale-x: 150%; --motion-origin-scale-y: 150%; --motion-origin-opacity: 0; --motion-scale-timing: var(--motion-spring-bouncier); --motion-scale-perceptual-duration-multiplier: 2.035; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-compress { &:not([no-intersect]) { --motion-origin-scale-x: 150%; --motion-origin-scale-y: 150%; --motion-origin-opacity: 0; --motion-scale-timing: var(--motion-spring-bouncier); --motion-scale-perceptual-duration-multiplier: 2.035; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-pop { &:not([no-intersect]) { --motion-origin-scale-x: 50%; --motion-origin-scale-y: 50%; --motion-origin-opacity: 0; --motion-scale-timing: var(--motion-spring-bouncier); --motion-scale-perceptual-duration-multiplier: 2.035; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-pop { &:not([no-intersect]) { --motion-origin-scale-x: 50%; --motion-origin-scale-y: 50%; --motion-origin-opacity: 0; --motion-scale-timing: var(--motion-spring-bouncier); --motion-scale-perceptual-duration-multiplier: 2.035; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-pop { &:not([no-intersect]) { --motion-origin-scale-x: 50%; --motion-origin-scale-y: 50%; --motion-origin-opacity: 0; --motion-scale-timing: var(--motion-spring-bouncier); --motion-scale-perceptual-duration-multiplier: 2.035; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-pop { &:not([no-intersect]) { --motion-origin-scale-x: 50%; --motion-origin-scale-y: 50%; --motion-origin-opacity: 0; --motion-scale-timing: var(--motion-spring-bouncier); --motion-scale-perceptual-duration-multiplier: 2.035; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-pop { &:not([no-intersect]) { --motion-origin-scale-x: 50%; --motion-origin-scale-y: 50%; --motion-origin-opacity: 0; --motion-scale-timing: var(--motion-spring-bouncier); --motion-scale-perceptual-duration-multiplier: 2.035; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-pop { &:not([no-intersect]) { --motion-origin-scale-x: 50%; --motion-origin-scale-y: 50%; --motion-origin-opacity: 0; --motion-scale-timing: var(--motion-spring-bouncier); --motion-scale-perceptual-duration-multiplier: 2.035; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-pop { &:not([no-intersect]) { --motion-origin-scale-x: 50%; --motion-origin-scale-y: 50%; --motion-origin-opacity: 0; --motion-scale-timing: var(--motion-spring-bouncier); --motion-scale-perceptual-duration-multiplier: 2.035; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-pop { &:not([no-intersect]) { --motion-origin-scale-x: 50%; --motion-origin-scale-y: 50%; --motion-origin-opacity: 0; --motion-scale-timing: var(--motion-spring-bouncier); --motion-scale-perceptual-duration-multiplier: 2.035; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-down { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-y: -5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-down { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-y: -5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-down { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-y: -5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-down { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-y: -5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-down { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-y: -5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-down { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-y: -5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-down { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-y: -5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-down { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-y: -5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-down-md { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-y: -5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-down-md { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-y: -5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-down-md { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-y: -5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-down-md { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-y: -5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-down-md { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-y: -5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-down-md { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-y: -5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-down-md { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-y: -5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-down-md { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-y: -5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-left { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-x: 5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-left { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-x: 5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-left { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-x: 5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-left { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-x: 5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-left { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-x: 5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-left { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-x: 5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-left { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-x: 5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-left { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-x: 5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-right { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-x: -5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-right { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-x: -5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-right { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-x: -5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-right { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-x: -5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-right { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-x: -5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-right { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-x: -5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-right { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-x: -5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-right { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-x: -5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-up { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-y: 5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-up { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-y: 5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-up { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-y: 5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-up { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-y: 5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-up { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-y: 5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-up { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-y: 5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-up { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-y: 5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-up { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-y: 5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-up-lg { &:not([no-intersect]) { --motion-origin-blur: 10px; --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-up-lg { &:not([no-intersect]) { --motion-origin-blur: 10px; --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-up-lg { &:not([no-intersect]) { --motion-origin-blur: 10px; --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-up-lg { &:not([no-intersect]) { --motion-origin-blur: 10px; --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-up-lg { &:not([no-intersect]) { --motion-origin-blur: 10px; --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-up-lg { &:not([no-intersect]) { --motion-origin-blur: 10px; --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-up-lg { &:not([no-intersect]) { --motion-origin-blur: 10px; --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-up-lg { &:not([no-intersect]) { --motion-origin-blur: 10px; --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-up-md { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-y: 5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-up-md { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-y: 5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-up-md { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-y: 5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-up-md { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-y: 5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-up-md { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-y: 5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-up-md { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-y: 5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-up-md { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-y: 5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-blur-up-md { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-translate-y: 5%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-expand { &:not([no-intersect]) { --motion-origin-scale-x: 50%; --motion-origin-scale-y: 50%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-expand { &:not([no-intersect]) { --motion-origin-scale-x: 50%; --motion-origin-scale-y: 50%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-expand { &:not([no-intersect]) { --motion-origin-scale-x: 50%; --motion-origin-scale-y: 50%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-expand { &:not([no-intersect]) { --motion-origin-scale-x: 50%; --motion-origin-scale-y: 50%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-expand { &:not([no-intersect]) { --motion-origin-scale-x: 50%; --motion-origin-scale-y: 50%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-expand { &:not([no-intersect]) { --motion-origin-scale-x: 50%; --motion-origin-scale-y: 50%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-expand { &:not([no-intersect]) { --motion-origin-scale-x: 50%; --motion-origin-scale-y: 50%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-expand { &:not([no-intersect]) { --motion-origin-scale-x: 50%; --motion-origin-scale-y: 50%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-shrink { &:not([no-intersect]) { --motion-origin-scale-x: 150%; --motion-origin-scale-y: 150%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-shrink { &:not([no-intersect]) { --motion-origin-scale-x: 150%; --motion-origin-scale-y: 150%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-shrink { &:not([no-intersect]) { --motion-origin-scale-x: 150%; --motion-origin-scale-y: 150%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-shrink { &:not([no-intersect]) { --motion-origin-scale-x: 150%; --motion-origin-scale-y: 150%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-shrink { &:not([no-intersect]) { --motion-origin-scale-x: 150%; --motion-origin-scale-y: 150%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-shrink { &:not([no-intersect]) { --motion-origin-scale-x: 150%; --motion-origin-scale-y: 150%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-shrink { &:not([no-intersect]) { --motion-origin-scale-x: 150%; --motion-origin-scale-y: 150%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-shrink { &:not([no-intersect]) { --motion-origin-scale-x: 150%; --motion-origin-scale-y: 150%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-focus { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-focus { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-focus { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-focus { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-focus { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-focus { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-focus { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-focus { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-focus-lg { &:not([no-intersect]) { --motion-origin-blur: 10px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-focus-lg { &:not([no-intersect]) { --motion-origin-blur: 10px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-focus-lg { &:not([no-intersect]) { --motion-origin-blur: 10px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-focus-lg { &:not([no-intersect]) { --motion-origin-blur: 10px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-focus-lg { &:not([no-intersect]) { --motion-origin-blur: 10px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-focus-lg { &:not([no-intersect]) { --motion-origin-blur: 10px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-focus-lg { &:not([no-intersect]) { --motion-origin-blur: 10px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-focus-lg { &:not([no-intersect]) { --motion-origin-blur: 10px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-focus-md { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-focus-md { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-focus-md { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-focus-md { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-focus-md { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-focus-md { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-focus-md { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-focus-md { &:not([no-intersect]) { --motion-origin-blur: 5px; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-down { &:not([no-intersect]) { --motion-origin-translate-y: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-down { &:not([no-intersect]) { --motion-origin-translate-y: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-down { &:not([no-intersect]) { --motion-origin-translate-y: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-down { &:not([no-intersect]) { --motion-origin-translate-y: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-down { &:not([no-intersect]) { --motion-origin-translate-y: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-down { &:not([no-intersect]) { --motion-origin-translate-y: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-down { &:not([no-intersect]) { --motion-origin-translate-y: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-down { &:not([no-intersect]) { --motion-origin-translate-y: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-down-lg { &:not([no-intersect]) { --motion-origin-translate-y: -100%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-down-lg { &:not([no-intersect]) { --motion-origin-translate-y: -100%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-down-lg { &:not([no-intersect]) { --motion-origin-translate-y: -100%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-down-lg { &:not([no-intersect]) { --motion-origin-translate-y: -100%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-down-lg { &:not([no-intersect]) { --motion-origin-translate-y: -100%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-down-lg { &:not([no-intersect]) { --motion-origin-translate-y: -100%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-down-lg { &:not([no-intersect]) { --motion-origin-translate-y: -100%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-down-lg { &:not([no-intersect]) { --motion-origin-translate-y: -100%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-down-md { &:not([no-intersect]) { --motion-origin-translate-y: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-down-md { &:not([no-intersect]) { --motion-origin-translate-y: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-down-md { &:not([no-intersect]) { --motion-origin-translate-y: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-down-md { &:not([no-intersect]) { --motion-origin-translate-y: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-down-md { &:not([no-intersect]) { --motion-origin-translate-y: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-down-md { &:not([no-intersect]) { --motion-origin-translate-y: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-down-md { &:not([no-intersect]) { --motion-origin-translate-y: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-down-md { &:not([no-intersect]) { --motion-origin-translate-y: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-left { &:not([no-intersect]) { --motion-origin-translate-x: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-left { &:not([no-intersect]) { --motion-origin-translate-x: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-left { &:not([no-intersect]) { --motion-origin-translate-x: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-left { &:not([no-intersect]) { --motion-origin-translate-x: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-left { &:not([no-intersect]) { --motion-origin-translate-x: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-left { &:not([no-intersect]) { --motion-origin-translate-x: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-left { &:not([no-intersect]) { --motion-origin-translate-x: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-left { &:not([no-intersect]) { --motion-origin-translate-x: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-left-lg { &:not([no-intersect]) { --motion-origin-translate-x: 100%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-left-lg { &:not([no-intersect]) { --motion-origin-translate-x: 100%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-left-lg { &:not([no-intersect]) { --motion-origin-translate-x: 100%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-left-lg { &:not([no-intersect]) { --motion-origin-translate-x: 100%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-left-lg { &:not([no-intersect]) { --motion-origin-translate-x: 100%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-left-lg { &:not([no-intersect]) { --motion-origin-translate-x: 100%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-left-lg { &:not([no-intersect]) { --motion-origin-translate-x: 100%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-left-lg { &:not([no-intersect]) { --motion-origin-translate-x: 100%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-left-md { &:not([no-intersect]) { --motion-origin-translate-x: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-left-md { &:not([no-intersect]) { --motion-origin-translate-x: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-left-md { &:not([no-intersect]) { --motion-origin-translate-x: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-left-md { &:not([no-intersect]) { --motion-origin-translate-x: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-left-md { &:not([no-intersect]) { --motion-origin-translate-x: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-left-md { &:not([no-intersect]) { --motion-origin-translate-x: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-left-md { &:not([no-intersect]) { --motion-origin-translate-x: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-left-md { &:not([no-intersect]) { --motion-origin-translate-x: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-right { &:not([no-intersect]) { --motion-origin-translate-x: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-right { &:not([no-intersect]) { --motion-origin-translate-x: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-right { &:not([no-intersect]) { --motion-origin-translate-x: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-right { &:not([no-intersect]) { --motion-origin-translate-x: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-right { &:not([no-intersect]) { --motion-origin-translate-x: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-right { &:not([no-intersect]) { --motion-origin-translate-x: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-right { &:not([no-intersect]) { --motion-origin-translate-x: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-right { &:not([no-intersect]) { --motion-origin-translate-x: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-right-lg { &:not([no-intersect]) { --motion-origin-translate-x: -100%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-right-lg { &:not([no-intersect]) { --motion-origin-translate-x: -100%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-right-lg { &:not([no-intersect]) { --motion-origin-translate-x: -100%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-right-lg { &:not([no-intersect]) { --motion-origin-translate-x: -100%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-right-lg { &:not([no-intersect]) { --motion-origin-translate-x: -100%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-right-lg { &:not([no-intersect]) { --motion-origin-translate-x: -100%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-right-lg { &:not([no-intersect]) { --motion-origin-translate-x: -100%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-right-lg { &:not([no-intersect]) { --motion-origin-translate-x: -100%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-right-md { &:not([no-intersect]) { --motion-origin-translate-x: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-right-md { &:not([no-intersect]) { --motion-origin-translate-x: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-right-md { &:not([no-intersect]) { --motion-origin-translate-x: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-right-md { &:not([no-intersect]) { --motion-origin-translate-x: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-right-md { &:not([no-intersect]) { --motion-origin-translate-x: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-right-md { &:not([no-intersect]) { --motion-origin-translate-x: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-right-md { &:not([no-intersect]) { --motion-origin-translate-x: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-right-md { &:not([no-intersect]) { --motion-origin-translate-x: -25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-up { &:not([no-intersect]) { --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-up { &:not([no-intersect]) { --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-up { &:not([no-intersect]) { --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-up { &:not([no-intersect]) { --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-up { &:not([no-intersect]) { --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-up { &:not([no-intersect]) { --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-up { &:not([no-intersect]) { --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-up { &:not([no-intersect]) { --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-up-md { &:not([no-intersect]) { --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-up-md { &:not([no-intersect]) { --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-up-md { &:not([no-intersect]) { --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-up-md { &:not([no-intersect]) { --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-up-md { &:not([no-intersect]) { --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-up-md { &:not([no-intersect]) { --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-up-md { &:not([no-intersect]) { --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-slide-up-md { &:not([no-intersect]) { --motion-origin-translate-y: 25%; --motion-origin-opacity: 0; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-fade { &:not([no-intersect]) { --motion-origin-opacity: 0; --motion-duration: 500ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-fade { &:not([no-intersect]) { --motion-origin-opacity: 0; --motion-duration: 500ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-fade { &:not([no-intersect]) { --motion-origin-opacity: 0; --motion-duration: 500ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-fade { &:not([no-intersect]) { --motion-origin-opacity: 0; --motion-duration: 500ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-fade { &:not([no-intersect]) { --motion-origin-opacity: 0; --motion-duration: 500ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-fade { &:not([no-intersect]) { --motion-origin-opacity: 0; --motion-duration: 500ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-fade { &:not([no-intersect]) { --motion-origin-opacity: 0; --motion-duration: 500ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-fade { &:not([no-intersect]) { --motion-origin-opacity: 0; --motion-duration: 500ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-fade-lg { &:not([no-intersect]) { --motion-origin-opacity: 0; --motion-duration: 800ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-fade-lg { &:not([no-intersect]) { --motion-origin-opacity: 0; --motion-duration: 800ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-fade-lg { &:not([no-intersect]) { --motion-origin-opacity: 0; --motion-duration: 800ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-fade-lg { &:not([no-intersect]) { --motion-origin-opacity: 0; --motion-duration: 800ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-fade-lg { &:not([no-intersect]) { --motion-origin-opacity: 0; --motion-duration: 800ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-fade-lg { &:not([no-intersect]) { --motion-origin-opacity: 0; --motion-duration: 800ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-fade-lg { &:not([no-intersect]) { --motion-origin-opacity: 0; --motion-duration: 800ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-fade-lg { &:not([no-intersect]) { --motion-origin-opacity: 0; --motion-duration: 800ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-fade-md { &:not([no-intersect]) { --motion-origin-opacity: 0; --motion-duration: 500ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-fade-md { &:not([no-intersect]) { --motion-origin-opacity: 0; --motion-duration: 500ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-fade-md { &:not([no-intersect]) { --motion-origin-opacity: 0; --motion-duration: 500ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-fade-md { &:not([no-intersect]) { --motion-origin-opacity: 0; --motion-duration: 500ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-fade-md { &:not([no-intersect]) { --motion-origin-opacity: 0; --motion-duration: 500ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-fade-md { &:not([no-intersect]) { --motion-origin-opacity: 0; --motion-duration: 500ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-fade-md { &:not([no-intersect]) { --motion-origin-opacity: 0; --motion-duration: 500ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-preset-fade-md { &:not([no-intersect]) { --motion-origin-opacity: 0; --motion-duration: 500ms; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-scale-in-0 { &:not([no-intersect]) { --motion-origin-scale-x: 0; --motion-origin-scale-y: 0; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-scale-in-0 { &:not([no-intersect]) { --motion-origin-scale-x: 0; --motion-origin-scale-y: 0; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-scale-in-0 { &:not([no-intersect]) { --motion-origin-scale-x: 0; --motion-origin-scale-y: 0; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-scale-in-0 { &:not([no-intersect]) { --motion-origin-scale-x: 0; --motion-origin-scale-y: 0; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-scale-in-0 { &:not([no-intersect]) { --motion-origin-scale-x: 0; --motion-origin-scale-y: 0; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-scale-in-0 { &:not([no-intersect]) { --motion-origin-scale-x: 0; --motion-origin-scale-y: 0; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-scale-in-0 { &:not([no-intersect]) { --motion-origin-scale-x: 0; --motion-origin-scale-y: 0; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-scale-in-0 { &:not([no-intersect]) { --motion-origin-scale-x: 0; --motion-origin-scale-y: 0; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-scale-in-\[0\.5\] { &:not([no-intersect]) { --motion-origin-scale-x: 0.5; --motion-origin-scale-y: 0.5; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-scale-in-\[0\.5\] { &:not([no-intersect]) { --motion-origin-scale-x: 0.5; --motion-origin-scale-y: 0.5; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-scale-in-\[0\.5\] { &:not([no-intersect]) { --motion-origin-scale-x: 0.5; --motion-origin-scale-y: 0.5; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-scale-in-\[0\.5\] { &:not([no-intersect]) { --motion-origin-scale-x: 0.5; --motion-origin-scale-y: 0.5; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-scale-in-\[0\.5\] { &:not([no-intersect]) { --motion-origin-scale-x: 0.5; --motion-origin-scale-y: 0.5; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-scale-in-\[0\.5\] { &:not([no-intersect]) { --motion-origin-scale-x: 0.5; --motion-origin-scale-y: 0.5; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-scale-in-\[0\.5\] { &:not([no-intersect]) { --motion-origin-scale-x: 0.5; --motion-origin-scale-y: 0.5; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-scale-in-\[0\.5\] { &:not([no-intersect]) { --motion-origin-scale-x: 0.5; --motion-origin-scale-y: 0.5; --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-opacity-in-0 { &:not([no-intersect]) { --motion-origin-opacity: 0.001; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-opacity-in-0 { &:not([no-intersect]) { --motion-origin-opacity: 0.001; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-opacity-in-0 { &:not([no-intersect]) { --motion-origin-opacity: 0.001; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-opacity-in-0 { &:not([no-intersect]) { --motion-origin-opacity: 0.001; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-opacity-in-0 { &:not([no-intersect]) { --motion-origin-opacity: 0.001; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-opacity-in-0 { &:not([no-intersect]) { --motion-origin-opacity: 0.001; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-opacity-in-0 { &:not([no-intersect]) { --motion-origin-opacity: 0.001; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-opacity-in-0 { &:not([no-intersect]) { --motion-origin-opacity: 0.001; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-opacity-in-\[0\%\] { &:not([no-intersect]) { --motion-origin-opacity: 0%; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-opacity-in-\[0\%\] { &:not([no-intersect]) { --motion-origin-opacity: 0%; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-opacity-in-\[0\%\] { &:not([no-intersect]) { --motion-origin-opacity: 0%; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-opacity-in-\[0\%\] { &:not([no-intersect]) { --motion-origin-opacity: 0%; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-opacity-in-\[0\%\] { &:not([no-intersect]) { --motion-origin-opacity: 0%; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-opacity-in-\[0\%\] { &:not([no-intersect]) { --motion-origin-opacity: 0%; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-opacity-in-\[0\%\] { &:not([no-intersect]) { --motion-origin-opacity: 0%; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-opacity-in-\[0\%\] { &:not([no-intersect]) { --motion-origin-opacity: 0%; --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-10deg\] { &:not([no-intersect]) { --motion-origin-rotate: -10deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-10deg\] { &:not([no-intersect]) { --motion-origin-rotate: -10deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-10deg\] { &:not([no-intersect]) { --motion-origin-rotate: -10deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-10deg\] { &:not([no-intersect]) { --motion-origin-rotate: -10deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-10deg\] { &:not([no-intersect]) { --motion-origin-rotate: -10deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-10deg\] { &:not([no-intersect]) { --motion-origin-rotate: -10deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-10deg\] { &:not([no-intersect]) { --motion-origin-rotate: -10deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-10deg\] { &:not([no-intersect]) { --motion-origin-rotate: -10deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-21deg\] { &:not([no-intersect]) { --motion-origin-rotate: -21deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-21deg\] { &:not([no-intersect]) { --motion-origin-rotate: -21deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-21deg\] { &:not([no-intersect]) { --motion-origin-rotate: -21deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-21deg\] { &:not([no-intersect]) { --motion-origin-rotate: -21deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-21deg\] { &:not([no-intersect]) { --motion-origin-rotate: -21deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-21deg\] { &:not([no-intersect]) { --motion-origin-rotate: -21deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-21deg\] { &:not([no-intersect]) { --motion-origin-rotate: -21deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-21deg\] { &:not([no-intersect]) { --motion-origin-rotate: -21deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-26deg\] { &:not([no-intersect]) { --motion-origin-rotate: -26deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-26deg\] { &:not([no-intersect]) { --motion-origin-rotate: -26deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-26deg\] { &:not([no-intersect]) { --motion-origin-rotate: -26deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-26deg\] { &:not([no-intersect]) { --motion-origin-rotate: -26deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-26deg\] { &:not([no-intersect]) { --motion-origin-rotate: -26deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-26deg\] { &:not([no-intersect]) { --motion-origin-rotate: -26deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-26deg\] { &:not([no-intersect]) { --motion-origin-rotate: -26deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-26deg\] { &:not([no-intersect]) { --motion-origin-rotate: -26deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-35deg\] { &:not([no-intersect]) { --motion-origin-rotate: -35deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-35deg\] { &:not([no-intersect]) { --motion-origin-rotate: -35deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-35deg\] { &:not([no-intersect]) { --motion-origin-rotate: -35deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-35deg\] { &:not([no-intersect]) { --motion-origin-rotate: -35deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-35deg\] { &:not([no-intersect]) { --motion-origin-rotate: -35deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-35deg\] { &:not([no-intersect]) { --motion-origin-rotate: -35deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-35deg\] { &:not([no-intersect]) { --motion-origin-rotate: -35deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-35deg\] { &:not([no-intersect]) { --motion-origin-rotate: -35deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-36deg\] { &:not([no-intersect]) { --motion-origin-rotate: -36deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-36deg\] { &:not([no-intersect]) { --motion-origin-rotate: -36deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-36deg\] { &:not([no-intersect]) { --motion-origin-rotate: -36deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-36deg\] { &:not([no-intersect]) { --motion-origin-rotate: -36deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-36deg\] { &:not([no-intersect]) { --motion-origin-rotate: -36deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-36deg\] { &:not([no-intersect]) { --motion-origin-rotate: -36deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-36deg\] { &:not([no-intersect]) { --motion-origin-rotate: -36deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[-36deg\] { &:not([no-intersect]) { --motion-origin-rotate: -36deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[17deg\] { &:not([no-intersect]) { --motion-origin-rotate: 17deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[17deg\] { &:not([no-intersect]) { --motion-origin-rotate: 17deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[17deg\] { &:not([no-intersect]) { --motion-origin-rotate: 17deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[17deg\] { &:not([no-intersect]) { --motion-origin-rotate: 17deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[17deg\] { &:not([no-intersect]) { --motion-origin-rotate: 17deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[17deg\] { &:not([no-intersect]) { --motion-origin-rotate: 17deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[17deg\] { &:not([no-intersect]) { --motion-origin-rotate: 17deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[17deg\] { &:not([no-intersect]) { --motion-origin-rotate: 17deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[20deg\] { &:not([no-intersect]) { --motion-origin-rotate: 20deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[20deg\] { &:not([no-intersect]) { --motion-origin-rotate: 20deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[20deg\] { &:not([no-intersect]) { --motion-origin-rotate: 20deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[20deg\] { &:not([no-intersect]) { --motion-origin-rotate: 20deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[20deg\] { &:not([no-intersect]) { --motion-origin-rotate: 20deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[20deg\] { &:not([no-intersect]) { --motion-origin-rotate: 20deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[20deg\] { &:not([no-intersect]) { --motion-origin-rotate: 20deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[20deg\] { &:not([no-intersect]) { --motion-origin-rotate: 20deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[40deg\] { &:not([no-intersect]) { --motion-origin-rotate: 40deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[40deg\] { &:not([no-intersect]) { --motion-origin-rotate: 40deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[40deg\] { &:not([no-intersect]) { --motion-origin-rotate: 40deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[40deg\] { &:not([no-intersect]) { --motion-origin-rotate: 40deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[40deg\] { &:not([no-intersect]) { --motion-origin-rotate: 40deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[40deg\] { &:not([no-intersect]) { --motion-origin-rotate: 40deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[40deg\] { &:not([no-intersect]) { --motion-origin-rotate: 40deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-rotate-in-\[40deg\] { &:not([no-intersect]) { --motion-origin-rotate: 40deg; --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-100 { &:not([no-intersect]) { --motion-origin-translate-x: 100%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-100 { &:not([no-intersect]) { --motion-origin-translate-x: 100%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-100 { &:not([no-intersect]) { --motion-origin-translate-x: 100%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-100 { &:not([no-intersect]) { --motion-origin-translate-x: 100%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-100 { &:not([no-intersect]) { --motion-origin-translate-x: 100%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-100 { &:not([no-intersect]) { --motion-origin-translate-x: 100%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-100 { &:not([no-intersect]) { --motion-origin-translate-x: 100%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-100 { &:not([no-intersect]) { --motion-origin-translate-x: 100%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-6\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -6%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-6\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -6%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-6\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -6%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-6\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -6%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-6\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -6%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-6\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -6%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-6\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -6%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-6\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -6%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-41\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -41%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-41\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -41%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-41\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -41%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-41\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -41%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-41\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -41%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-41\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -41%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-41\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -41%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-41\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -41%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-56\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -56%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-56\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -56%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-56\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -56%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-56\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -56%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-56\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -56%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-56\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -56%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-56\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -56%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-56\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -56%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-89\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -89%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-89\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -89%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-89\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -89%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-89\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -89%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-89\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -89%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-89\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -89%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-89\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -89%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-89\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -89%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-175\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -175%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-175\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -175%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-175\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -175%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-175\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -175%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-175\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -175%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-175\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -175%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-175\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -175%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-175\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -175%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-200\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -200%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-200\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -200%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-200\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -200%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-200\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -200%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-200\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -200%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-200\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -200%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-200\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -200%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[-200\%\] { &:not([no-intersect]) { --motion-origin-translate-x: -200%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[80\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 80%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[80\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 80%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[80\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 80%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[80\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 80%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[80\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 80%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[80\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 80%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[80\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 80%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[80\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 80%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[82\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 82%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[82\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 82%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[82\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 82%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[82\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 82%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[82\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 82%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[82\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 82%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[82\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 82%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[82\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 82%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[127\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 127%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[127\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 127%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[127\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 127%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[127\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 127%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[127\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 127%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[127\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 127%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[127\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 127%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[127\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 127%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[151\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 151%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[151\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 151%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[151\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 151%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[151\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 151%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[151\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 151%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[151\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 151%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[151\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 151%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[151\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 151%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[191\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 191%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[191\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 191%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[191\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 191%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[191\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 191%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[191\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 191%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[191\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 191%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[191\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 191%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[191\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 191%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[200\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 200%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[200\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 200%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[200\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 200%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[200\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 200%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[200\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 200%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[200\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 200%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[200\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 200%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-x-in-\[200\%\] { &:not([no-intersect]) { --motion-origin-translate-x: 200%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-12\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -12%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-12\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -12%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-12\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -12%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-12\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -12%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-12\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -12%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-12\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -12%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-12\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -12%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-12\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -12%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-69\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -69%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-69\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -69%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-69\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -69%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-69\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -69%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-69\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -69%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-69\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -69%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-69\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -69%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-69\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -69%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-76\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -76%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-76\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -76%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-76\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -76%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-76\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -76%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-76\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -76%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-76\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -76%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-76\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -76%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-76\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -76%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-124\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -124%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-124\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -124%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-124\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -124%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-124\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -124%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-124\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -124%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-124\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -124%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-124\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -124%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-124\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -124%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-187\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -187%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-187\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -187%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-187\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -187%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-187\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -187%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-187\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -187%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-187\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -187%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-187\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -187%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-187\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -187%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-200\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -200%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-200\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -200%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-200\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -200%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-200\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -200%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-200\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -200%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-200\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -200%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-200\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -200%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[-200\%\] { &:not([no-intersect]) { --motion-origin-translate-y: -200%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[1\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 1%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[1\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 1%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[1\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 1%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[1\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 1%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[1\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 1%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[1\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 1%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[1\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 1%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[1\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 1%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[12\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 12%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[12\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 12%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[12\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 12%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[12\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 12%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[12\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 12%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[12\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 12%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[12\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 12%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[12\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 12%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[64\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 64%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[64\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 64%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[64\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 64%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[64\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 64%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[64\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 64%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[64\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 64%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[64\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 64%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[64\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 64%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[82\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 82%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[82\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 82%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[82\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 82%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[82\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 82%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[82\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 82%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[82\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 82%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[82\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 82%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[82\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 82%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[86\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 86%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[86\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 86%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[86\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 86%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[86\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 86%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[86\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 86%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[86\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 86%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[86\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 86%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[86\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 86%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[158\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 158%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[158\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 158%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[158\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 158%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[158\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 158%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[158\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 158%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[158\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 158%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[158\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 158%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[158\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 158%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[159\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 159%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[159\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 159%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[159\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 159%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[159\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 159%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[159\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 159%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[159\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 159%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[159\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 159%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[159\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 159%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[180\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 180%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[180\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 180%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[180\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 180%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[180\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 180%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[180\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 180%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[180\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 180%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[180\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 180%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[180\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 180%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[193\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 193%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[193\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 193%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[193\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 193%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[193\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 193%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[193\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 193%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[193\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 193%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[193\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 193%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[193\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 193%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[200\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 200%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[200\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 200%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[200\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 200%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[200\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 200%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[200\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 200%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[200\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 200%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[200\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 200%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-translate-y-in-\[200\%\] { &:not([no-intersect]) { --motion-origin-translate-y: 200%; --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both; animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation); } } .intersect\:motion-ease-spring-bouncier { &:not([no-intersect]) { --motion-timing: var(--motion-spring-bouncier); --motion-perceptual-duration-multiplier: 2.035; --motion-filter-timing: var(--motion-spring-smooth); --motion-opacity-timing: var(--motion-spring-smooth); --motion-background-color-timing: var(--motion-spring-smooth); --motion-text-color-timing: var(--motion-spring-smooth); --motion-filter-perceptual-duration-multiplier: 1.66; --motion-opacity-perceptual-duration-multiplier: 1.66; --motion-background-color-perceptual-duration-multiplier: 1.66; --motion-text-color-perceptual-duration-multiplier: 1.66; } } .intersect\:motion-ease-spring-bouncier { &:not([no-intersect]) { --motion-timing: var(--motion-spring-bouncier); --motion-perceptual-duration-multiplier: 2.035; --motion-filter-timing: var(--motion-spring-smooth); --motion-opacity-timing: var(--motion-spring-smooth); --motion-background-color-timing: var(--motion-spring-smooth); --motion-text-color-timing: var(--motion-spring-smooth); --motion-filter-perceptual-duration-multiplier: 1.66; --motion-opacity-perceptual-duration-multiplier: 1.66; --motion-background-color-perceptual-duration-multiplier: 1.66; --motion-text-color-perceptual-duration-multiplier: 1.66; } } .intersect\:motion-ease-spring-bouncier { &:not([no-intersect]) { --motion-timing: var(--motion-spring-bouncier); --motion-perceptual-duration-multiplier: 2.035; --motion-filter-timing: var(--motion-spring-smooth); --motion-opacity-timing: var(--motion-spring-smooth); --motion-background-color-timing: var(--motion-spring-smooth); --motion-text-color-timing: var(--motion-spring-smooth); --motion-filter-perceptual-duration-multiplier: 1.66; --motion-opacity-perceptual-duration-multiplier: 1.66; --motion-background-color-perceptual-duration-multiplier: 1.66; --motion-text-color-perceptual-duration-multiplier: 1.66; } } .intersect\:motion-ease-spring-bouncier { &:not([no-intersect]) { --motion-timing: var(--motion-spring-bouncier); --motion-perceptual-duration-multiplier: 2.035; --motion-filter-timing: var(--motion-spring-smooth); --motion-opacity-timing: var(--motion-spring-smooth); --motion-background-color-timing: var(--motion-spring-smooth); --motion-text-color-timing: var(--motion-spring-smooth); --motion-filter-perceptual-duration-multiplier: 1.66; --motion-opacity-perceptual-duration-multiplier: 1.66; --motion-background-color-perceptual-duration-multiplier: 1.66; --motion-text-color-perceptual-duration-multiplier: 1.66; } } .intersect\:motion-ease-spring-bouncier { &:not([no-intersect]) { --motion-timing: var(--motion-spring-bouncier); --motion-perceptual-duration-multiplier: 2.035; --motion-filter-timing: var(--motion-spring-smooth); --motion-opacity-timing: var(--motion-spring-smooth); --motion-background-color-timing: var(--motion-spring-smooth); --motion-text-color-timing: var(--motion-spring-smooth); --motion-filter-perceptual-duration-multiplier: 1.66; --motion-opacity-perceptual-duration-multiplier: 1.66; --motion-background-color-perceptual-duration-multiplier: 1.66; --motion-text-color-perceptual-duration-multiplier: 1.66; } } .intersect\:motion-ease-spring-bouncier { &:not([no-intersect]) { --motion-timing: var(--motion-spring-bouncier); --motion-perceptual-duration-multiplier: 2.035; --motion-filter-timing: var(--motion-spring-smooth); --motion-opacity-timing: var(--motion-spring-smooth); --motion-background-color-timing: var(--motion-spring-smooth); --motion-text-color-timing: var(--motion-spring-smooth); --motion-filter-perceptual-duration-multiplier: 1.66; --motion-opacity-perceptual-duration-multiplier: 1.66; --motion-background-color-perceptual-duration-multiplier: 1.66; --motion-text-color-perceptual-duration-multiplier: 1.66; } } .intersect\:motion-ease-spring-bouncier { &:not([no-intersect]) { --motion-timing: var(--motion-spring-bouncier); --motion-perceptual-duration-multiplier: 2.035; --motion-filter-timing: var(--motion-spring-smooth); --motion-opacity-timing: var(--motion-spring-smooth); --motion-background-color-timing: var(--motion-spring-smooth); --motion-text-color-timing: var(--motion-spring-smooth); --motion-filter-perceptual-duration-multiplier: 1.66; --motion-opacity-perceptual-duration-multiplier: 1.66; --motion-background-color-perceptual-duration-multiplier: 1.66; --motion-text-color-perceptual-duration-multiplier: 1.66; } } .intersect\:motion-ease-spring-bouncier { &:not([no-intersect]) { --motion-timing: var(--motion-spring-bouncier); --motion-perceptual-duration-multiplier: 2.035; --motion-filter-timing: var(--motion-spring-smooth); --motion-opacity-timing: var(--motion-spring-smooth); --motion-background-color-timing: var(--motion-spring-smooth); --motion-text-color-timing: var(--motion-spring-smooth); --motion-filter-perceptual-duration-multiplier: 1.66; --motion-opacity-perceptual-duration-multiplier: 1.66; --motion-background-color-perceptual-duration-multiplier: 1.66; --motion-text-color-perceptual-duration-multiplier: 1.66; } } .intersect\:motion-delay-0 { &:not([no-intersect]) { --motion-delay: 0s; } } .intersect\:motion-delay-0 { &:not([no-intersect]) { --motion-delay: 0s; } } .intersect\:motion-delay-0 { &:not([no-intersect]) { --motion-delay: 0s; } } .intersect\:motion-delay-0 { &:not([no-intersect]) { --motion-delay: 0s; } } .intersect\:motion-delay-0 { &:not([no-intersect]) { --motion-delay: 0s; } } .intersect\:motion-delay-0 { &:not([no-intersect]) { --motion-delay: 0s; } } .intersect\:motion-delay-0 { &:not([no-intersect]) { --motion-delay: 0s; } } .intersect\:motion-delay-0 { &:not([no-intersect]) { --motion-delay: 0s; } } .intersect\:motion-delay-100 { &:not([no-intersect]) { --motion-delay: 100ms; } } .intersect\:motion-delay-100 { &:not([no-intersect]) { --motion-delay: 100ms; } } .intersect\:motion-delay-100 { &:not([no-intersect]) { --motion-delay: 100ms; } } .intersect\:motion-delay-100 { &:not([no-intersect]) { --motion-delay: 100ms; } } .intersect\:motion-delay-100 { &:not([no-intersect]) { --motion-delay: 100ms; } } .intersect\:motion-delay-100 { &:not([no-intersect]) { --motion-delay: 100ms; } } .intersect\:motion-delay-100 { &:not([no-intersect]) { --motion-delay: 100ms; } } .intersect\:motion-delay-100 { &:not([no-intersect]) { --motion-delay: 100ms; } } .intersect\:motion-delay-200 { &:not([no-intersect]) { --motion-delay: 200ms; } } .intersect\:motion-delay-200 { &:not([no-intersect]) { --motion-delay: 200ms; } } .intersect\:motion-delay-200 { &:not([no-intersect]) { --motion-delay: 200ms; } } .intersect\:motion-delay-200 { &:not([no-intersect]) { --motion-delay: 200ms; } } .intersect\:motion-delay-200 { &:not([no-intersect]) { --motion-delay: 200ms; } } .intersect\:motion-delay-200 { &:not([no-intersect]) { --motion-delay: 200ms; } } .intersect\:motion-delay-200 { &:not([no-intersect]) { --motion-delay: 200ms; } } .intersect\:motion-delay-200 { &:not([no-intersect]) { --motion-delay: 200ms; } } .intersect\:motion-delay-300 { &:not([no-intersect]) { --motion-delay: 300ms; } } .intersect\:motion-delay-300 { &:not([no-intersect]) { --motion-delay: 300ms; } } .intersect\:motion-delay-300 { &:not([no-intersect]) { --motion-delay: 300ms; } } .intersect\:motion-delay-300 { &:not([no-intersect]) { --motion-delay: 300ms; } } .intersect\:motion-delay-300 { &:not([no-intersect]) { --motion-delay: 300ms; } } .intersect\:motion-delay-300 { &:not([no-intersect]) { --motion-delay: 300ms; } } .intersect\:motion-delay-300 { &:not([no-intersect]) { --motion-delay: 300ms; } } .intersect\:motion-delay-300 { &:not([no-intersect]) { --motion-delay: 300ms; } } .intersect\:motion-delay-400 { &:not([no-intersect]) { --motion-delay: 400ms; } } .intersect\:motion-delay-400 { &:not([no-intersect]) { --motion-delay: 400ms; } } .intersect\:motion-delay-400 { &:not([no-intersect]) { --motion-delay: 400ms; } } .intersect\:motion-delay-400 { &:not([no-intersect]) { --motion-delay: 400ms; } } .intersect\:motion-delay-400 { &:not([no-intersect]) { --motion-delay: 400ms; } } .intersect\:motion-delay-400 { &:not([no-intersect]) { --motion-delay: 400ms; } } .intersect\:motion-delay-400 { &:not([no-intersect]) { --motion-delay: 400ms; } } .intersect\:motion-delay-400 { &:not([no-intersect]) { --motion-delay: 400ms; } } .intersect\:motion-delay-500 { &:not([no-intersect]) { --motion-delay: 500ms; } } .intersect\:motion-delay-500 { &:not([no-intersect]) { --motion-delay: 500ms; } } .intersect\:motion-delay-500 { &:not([no-intersect]) { --motion-delay: 500ms; } } .intersect\:motion-delay-500 { &:not([no-intersect]) { --motion-delay: 500ms; } } .intersect\:motion-delay-500 { &:not([no-intersect]) { --motion-delay: 500ms; } } .intersect\:motion-delay-500 { &:not([no-intersect]) { --motion-delay: 500ms; } } .intersect\:motion-delay-500 { &:not([no-intersect]) { --motion-delay: 500ms; } } .intersect\:motion-delay-500 { &:not([no-intersect]) { --motion-delay: 500ms; } } .intersect\:motion-delay-600 { &:not([no-intersect]) { --motion-delay: 600ms; } } .intersect\:motion-delay-600 { &:not([no-intersect]) { --motion-delay: 600ms; } } .intersect\:motion-delay-600 { &:not([no-intersect]) { --motion-delay: 600ms; } } .intersect\:motion-delay-600 { &:not([no-intersect]) { --motion-delay: 600ms; } } .intersect\:motion-delay-600 { &:not([no-intersect]) { --motion-delay: 600ms; } } .intersect\:motion-delay-600 { &:not([no-intersect]) { --motion-delay: 600ms; } } .intersect\:motion-delay-600 { &:not([no-intersect]) { --motion-delay: 600ms; } } .intersect\:motion-delay-600 { &:not([no-intersect]) { --motion-delay: 600ms; } } .intersect\:motion-delay-700 { &:not([no-intersect]) { --motion-delay: 700ms; } } .intersect\:motion-delay-700 { &:not([no-intersect]) { --motion-delay: 700ms; } } .intersect\:motion-delay-700 { &:not([no-intersect]) { --motion-delay: 700ms; } } .intersect\:motion-delay-700 { &:not([no-intersect]) { --motion-delay: 700ms; } } .intersect\:motion-delay-700 { &:not([no-intersect]) { --motion-delay: 700ms; } } .intersect\:motion-delay-700 { &:not([no-intersect]) { --motion-delay: 700ms; } } .intersect\:motion-delay-700 { &:not([no-intersect]) { --motion-delay: 700ms; } } .intersect\:motion-delay-700 { &:not([no-intersect]) { --motion-delay: 700ms; } } .intersect\:motion-delay-750 { &:not([no-intersect]) { --motion-delay: 750ms; } } .intersect\:motion-delay-750 { &:not([no-intersect]) { --motion-delay: 750ms; } } .intersect\:motion-delay-750 { &:not([no-intersect]) { --motion-delay: 750ms; } } .intersect\:motion-delay-750 { &:not([no-intersect]) { --motion-delay: 750ms; } } .intersect\:motion-delay-750 { &:not([no-intersect]) { --motion-delay: 750ms; } } .intersect\:motion-delay-750 { &:not([no-intersect]) { --motion-delay: 750ms; } } .intersect\:motion-delay-750 { &:not([no-intersect]) { --motion-delay: 750ms; } } .intersect\:motion-delay-750 { &:not([no-intersect]) { --motion-delay: 750ms; } } .intersect\:motion-delay-800 { &:not([no-intersect]) { --motion-delay: 800ms; } } .intersect\:motion-delay-800 { &:not([no-intersect]) { --motion-delay: 800ms; } } .intersect\:motion-delay-800 { &:not([no-intersect]) { --motion-delay: 800ms; } } .intersect\:motion-delay-800 { &:not([no-intersect]) { --motion-delay: 800ms; } } .intersect\:motion-delay-800 { &:not([no-intersect]) { --motion-delay: 800ms; } } .intersect\:motion-delay-800 { &:not([no-intersect]) { --motion-delay: 800ms; } } .intersect\:motion-delay-800 { &:not([no-intersect]) { --motion-delay: 800ms; } } .intersect\:motion-delay-800 { &:not([no-intersect]) { --motion-delay: 800ms; } } .intersect\:motion-delay-850 { &:not([no-intersect]) { --motion-delay: 850ms; } } .intersect\:motion-delay-850 { &:not([no-intersect]) { --motion-delay: 850ms; } } .intersect\:motion-delay-850 { &:not([no-intersect]) { --motion-delay: 850ms; } } .intersect\:motion-delay-850 { &:not([no-intersect]) { --motion-delay: 850ms; } } .intersect\:motion-delay-850 { &:not([no-intersect]) { --motion-delay: 850ms; } } .intersect\:motion-delay-850 { &:not([no-intersect]) { --motion-delay: 850ms; } } .intersect\:motion-delay-850 { &:not([no-intersect]) { --motion-delay: 850ms; } } .intersect\:motion-delay-850 { &:not([no-intersect]) { --motion-delay: 850ms; } } .intersect\:motion-delay-900 { &:not([no-intersect]) { --motion-delay: 900ms; } } .intersect\:motion-delay-900 { &:not([no-intersect]) { --motion-delay: 900ms; } } .intersect\:motion-delay-900 { &:not([no-intersect]) { --motion-delay: 900ms; } } .intersect\:motion-delay-900 { &:not([no-intersect]) { --motion-delay: 900ms; } } .intersect\:motion-delay-900 { &:not([no-intersect]) { --motion-delay: 900ms; } } .intersect\:motion-delay-900 { &:not([no-intersect]) { --motion-delay: 900ms; } } .intersect\:motion-delay-900 { &:not([no-intersect]) { --motion-delay: 900ms; } } .intersect\:motion-delay-900 { &:not([no-intersect]) { --motion-delay: 900ms; } } .intersect\:motion-delay-950 { &:not([no-intersect]) { --motion-delay: 950ms; } } .intersect\:motion-delay-950 { &:not([no-intersect]) { --motion-delay: 950ms; } } .intersect\:motion-delay-950 { &:not([no-intersect]) { --motion-delay: 950ms; } } .intersect\:motion-delay-950 { &:not([no-intersect]) { --motion-delay: 950ms; } } .intersect\:motion-delay-950 { &:not([no-intersect]) { --motion-delay: 950ms; } } .intersect\:motion-delay-950 { &:not([no-intersect]) { --motion-delay: 950ms; } } .intersect\:motion-delay-950 { &:not([no-intersect]) { --motion-delay: 950ms; } } .intersect\:motion-delay-950 { &:not([no-intersect]) { --motion-delay: 950ms; } } .intersect\:motion-delay-1000 { &:not([no-intersect]) { --motion-delay: 1000ms; } } .intersect\:motion-delay-1000 { &:not([no-intersect]) { --motion-delay: 1000ms; } } .intersect\:motion-delay-1000 { &:not([no-intersect]) { --motion-delay: 1000ms; } } .intersect\:motion-delay-1000 { &:not([no-intersect]) { --motion-delay: 1000ms; } } .intersect\:motion-delay-1000 { &:not([no-intersect]) { --motion-delay: 1000ms; } } .intersect\:motion-delay-1000 { &:not([no-intersect]) { --motion-delay: 1000ms; } } .intersect\:motion-delay-1000 { &:not([no-intersect]) { --motion-delay: 1000ms; } } .intersect\:motion-delay-1000 { &:not([no-intersect]) { --motion-delay: 1000ms; } } .intersect\:motion-delay-1050 { &:not([no-intersect]) { --motion-delay: 1050ms; } } .intersect\:motion-delay-1050 { &:not([no-intersect]) { --motion-delay: 1050ms; } } .intersect\:motion-delay-1050 { &:not([no-intersect]) { --motion-delay: 1050ms; } } .intersect\:motion-delay-1050 { &:not([no-intersect]) { --motion-delay: 1050ms; } } .intersect\:motion-delay-1050 { &:not([no-intersect]) { --motion-delay: 1050ms; } } .intersect\:motion-delay-1050 { &:not([no-intersect]) { --motion-delay: 1050ms; } } .intersect\:motion-delay-1050 { &:not([no-intersect]) { --motion-delay: 1050ms; } } .intersect\:motion-delay-1050 { &:not([no-intersect]) { --motion-delay: 1050ms; } } .intersect\:motion-delay-1100 { &:not([no-intersect]) { --motion-delay: 1100ms; } } .intersect\:motion-delay-1100 { &:not([no-intersect]) { --motion-delay: 1100ms; } } .intersect\:motion-delay-1100 { &:not([no-intersect]) { --motion-delay: 1100ms; } } .intersect\:motion-delay-1100 { &:not([no-intersect]) { --motion-delay: 1100ms; } } .intersect\:motion-delay-1100 { &:not([no-intersect]) { --motion-delay: 1100ms; } } .intersect\:motion-delay-1100 { &:not([no-intersect]) { --motion-delay: 1100ms; } } .intersect\:motion-delay-1100 { &:not([no-intersect]) { --motion-delay: 1100ms; } } .intersect\:motion-delay-1100 { &:not([no-intersect]) { --motion-delay: 1100ms; } } .intersect\:motion-delay-1150 { &:not([no-intersect]) { --motion-delay: 1150ms; } } .intersect\:motion-delay-1150 { &:not([no-intersect]) { --motion-delay: 1150ms; } } .intersect\:motion-delay-1150 { &:not([no-intersect]) { --motion-delay: 1150ms; } } .intersect\:motion-delay-1150 { &:not([no-intersect]) { --motion-delay: 1150ms; } } .intersect\:motion-delay-1150 { &:not([no-intersect]) { --motion-delay: 1150ms; } } .intersect\:motion-delay-1150 { &:not([no-intersect]) { --motion-delay: 1150ms; } } .intersect\:motion-delay-1150 { &:not([no-intersect]) { --motion-delay: 1150ms; } } .intersect\:motion-delay-1150 { &:not([no-intersect]) { --motion-delay: 1150ms; } } .intersect\:motion-delay-1200 { &:not([no-intersect]) { --motion-delay: 1200ms; } } .intersect\:motion-delay-1200 { &:not([no-intersect]) { --motion-delay: 1200ms; } } .intersect\:motion-delay-1200 { &:not([no-intersect]) { --motion-delay: 1200ms; } } .intersect\:motion-delay-1200 { &:not([no-intersect]) { --motion-delay: 1200ms; } } .intersect\:motion-delay-1200 { &:not([no-intersect]) { --motion-delay: 1200ms; } } .intersect\:motion-delay-1200 { &:not([no-intersect]) { --motion-delay: 1200ms; } } .intersect\:motion-delay-1200 { &:not([no-intersect]) { --motion-delay: 1200ms; } } .intersect\:motion-delay-1200 { &:not([no-intersect]) { --motion-delay: 1200ms; } } .intersect\:motion-delay-1250 { &:not([no-intersect]) { --motion-delay: 1250ms; } } .intersect\:motion-delay-1250 { &:not([no-intersect]) { --motion-delay: 1250ms; } } .intersect\:motion-delay-1250 { &:not([no-intersect]) { --motion-delay: 1250ms; } } .intersect\:motion-delay-1250 { &:not([no-intersect]) { --motion-delay: 1250ms; } } .intersect\:motion-delay-1250 { &:not([no-intersect]) { --motion-delay: 1250ms; } } .intersect\:motion-delay-1250 { &:not([no-intersect]) { --motion-delay: 1250ms; } } .intersect\:motion-delay-1250 { &:not([no-intersect]) { --motion-delay: 1250ms; } } .intersect\:motion-delay-1250 { &:not([no-intersect]) { --motion-delay: 1250ms; } } .intersect\:motion-delay-1300 { &:not([no-intersect]) { --motion-delay: 1300ms; } } .intersect\:motion-delay-1300 { &:not([no-intersect]) { --motion-delay: 1300ms; } } .intersect\:motion-delay-1300 { &:not([no-intersect]) { --motion-delay: 1300ms; } } .intersect\:motion-delay-1300 { &:not([no-intersect]) { --motion-delay: 1300ms; } } .intersect\:motion-delay-1300 { &:not([no-intersect]) { --motion-delay: 1300ms; } } .intersect\:motion-delay-1300 { &:not([no-intersect]) { --motion-delay: 1300ms; } } .intersect\:motion-delay-1300 { &:not([no-intersect]) { --motion-delay: 1300ms; } } .intersect\:motion-delay-1300 { &:not([no-intersect]) { --motion-delay: 1300ms; } } .intersect\:motion-delay-1400 { &:not([no-intersect]) { --motion-delay: 1400ms; } } .intersect\:motion-delay-1400 { &:not([no-intersect]) { --motion-delay: 1400ms; } } .intersect\:motion-delay-1400 { &:not([no-intersect]) { --motion-delay: 1400ms; } } .intersect\:motion-delay-1400 { &:not([no-intersect]) { --motion-delay: 1400ms; } } .intersect\:motion-delay-1400 { &:not([no-intersect]) { --motion-delay: 1400ms; } } .intersect\:motion-delay-1400 { &:not([no-intersect]) { --motion-delay: 1400ms; } } .intersect\:motion-delay-1400 { &:not([no-intersect]) { --motion-delay: 1400ms; } } .intersect\:motion-delay-1400 { &:not([no-intersect]) { --motion-delay: 1400ms; } } .intersect\:motion-delay-1450 { &:not([no-intersect]) { --motion-delay: 1450ms; } } .intersect\:motion-delay-1450 { &:not([no-intersect]) { --motion-delay: 1450ms; } } .intersect\:motion-delay-1450 { &:not([no-intersect]) { --motion-delay: 1450ms; } } .intersect\:motion-delay-1450 { &:not([no-intersect]) { --motion-delay: 1450ms; } } .intersect\:motion-delay-1450 { &:not([no-intersect]) { --motion-delay: 1450ms; } } .intersect\:motion-delay-1450 { &:not([no-intersect]) { --motion-delay: 1450ms; } } .intersect\:motion-delay-1450 { &:not([no-intersect]) { --motion-delay: 1450ms; } } .intersect\:motion-delay-1450 { &:not([no-intersect]) { --motion-delay: 1450ms; } } .intersect\:motion-delay-1500 { &:not([no-intersect]) { --motion-delay: 1500ms; } } .intersect\:motion-delay-1500 { &:not([no-intersect]) { --motion-delay: 1500ms; } } .intersect\:motion-delay-1500 { &:not([no-intersect]) { --motion-delay: 1500ms; } } .intersect\:motion-delay-1500 { &:not([no-intersect]) { --motion-delay: 1500ms; } } .intersect\:motion-delay-1500 { &:not([no-intersect]) { --motion-delay: 1500ms; } } .intersect\:motion-delay-1500 { &:not([no-intersect]) { --motion-delay: 1500ms; } } .intersect\:motion-delay-1500 { &:not([no-intersect]) { --motion-delay: 1500ms; } } .intersect\:motion-delay-1500 { &:not([no-intersect]) { --motion-delay: 1500ms; } } .intersect\:motion-delay-1600 { &:not([no-intersect]) { --motion-delay: 1600ms; } } .intersect\:motion-delay-1600 { &:not([no-intersect]) { --motion-delay: 1600ms; } } .intersect\:motion-delay-1600 { &:not([no-intersect]) { --motion-delay: 1600ms; } } .intersect\:motion-delay-1600 { &:not([no-intersect]) { --motion-delay: 1600ms; } } .intersect\:motion-delay-1600 { &:not([no-intersect]) { --motion-delay: 1600ms; } } .intersect\:motion-delay-1600 { &:not([no-intersect]) { --motion-delay: 1600ms; } } .intersect\:motion-delay-1600 { &:not([no-intersect]) { --motion-delay: 1600ms; } } .intersect\:motion-delay-1600 { &:not([no-intersect]) { --motion-delay: 1600ms; } } .intersect\:motion-delay-1650 { &:not([no-intersect]) { --motion-delay: 1650ms; } } .intersect\:motion-delay-1650 { &:not([no-intersect]) { --motion-delay: 1650ms; } } .intersect\:motion-delay-1650 { &:not([no-intersect]) { --motion-delay: 1650ms; } } .intersect\:motion-delay-1650 { &:not([no-intersect]) { --motion-delay: 1650ms; } } .intersect\:motion-delay-1650 { &:not([no-intersect]) { --motion-delay: 1650ms; } } .intersect\:motion-delay-1650 { &:not([no-intersect]) { --motion-delay: 1650ms; } } .intersect\:motion-delay-1650 { &:not([no-intersect]) { --motion-delay: 1650ms; } } .intersect\:motion-delay-1650 { &:not([no-intersect]) { --motion-delay: 1650ms; } } .intersect\:motion-delay-1700 { &:not([no-intersect]) { --motion-delay: 1700ms; } } .intersect\:motion-delay-1700 { &:not([no-intersect]) { --motion-delay: 1700ms; } } .intersect\:motion-delay-1700 { &:not([no-intersect]) { --motion-delay: 1700ms; } } .intersect\:motion-delay-1700 { &:not([no-intersect]) { --motion-delay: 1700ms; } } .intersect\:motion-delay-1700 { &:not([no-intersect]) { --motion-delay: 1700ms; } } .intersect\:motion-delay-1700 { &:not([no-intersect]) { --motion-delay: 1700ms; } } .intersect\:motion-delay-1700 { &:not([no-intersect]) { --motion-delay: 1700ms; } } .intersect\:motion-delay-1700 { &:not([no-intersect]) { --motion-delay: 1700ms; } } .intersect\:motion-delay-1800 { &:not([no-intersect]) { --motion-delay: 1800ms; } } .intersect\:motion-delay-1800 { &:not([no-intersect]) { --motion-delay: 1800ms; } } .intersect\:motion-delay-1800 { &:not([no-intersect]) { --motion-delay: 1800ms; } } .intersect\:motion-delay-1800 { &:not([no-intersect]) { --motion-delay: 1800ms; } } .intersect\:motion-delay-1800 { &:not([no-intersect]) { --motion-delay: 1800ms; } } .intersect\:motion-delay-1800 { &:not([no-intersect]) { --motion-delay: 1800ms; } } .intersect\:motion-delay-1800 { &:not([no-intersect]) { --motion-delay: 1800ms; } } .intersect\:motion-delay-1800 { &:not([no-intersect]) { --motion-delay: 1800ms; } } .intersect\:motion-delay-1850 { &:not([no-intersect]) { --motion-delay: 1850ms; } } .intersect\:motion-delay-1850 { &:not([no-intersect]) { --motion-delay: 1850ms; } } .intersect\:motion-delay-1850 { &:not([no-intersect]) { --motion-delay: 1850ms; } } .intersect\:motion-delay-1850 { &:not([no-intersect]) { --motion-delay: 1850ms; } } .intersect\:motion-delay-1850 { &:not([no-intersect]) { --motion-delay: 1850ms; } } .intersect\:motion-delay-1850 { &:not([no-intersect]) { --motion-delay: 1850ms; } } .intersect\:motion-delay-1850 { &:not([no-intersect]) { --motion-delay: 1850ms; } } .intersect\:motion-delay-1850 { &:not([no-intersect]) { --motion-delay: 1850ms; } } .intersect\:motion-delay-1900 { &:not([no-intersect]) { --motion-delay: 1900ms; } } .intersect\:motion-delay-1900 { &:not([no-intersect]) { --motion-delay: 1900ms; } } .intersect\:motion-delay-1900 { &:not([no-intersect]) { --motion-delay: 1900ms; } } .intersect\:motion-delay-1900 { &:not([no-intersect]) { --motion-delay: 1900ms; } } .intersect\:motion-delay-1900 { &:not([no-intersect]) { --motion-delay: 1900ms; } } .intersect\:motion-delay-1900 { &:not([no-intersect]) { --motion-delay: 1900ms; } } .intersect\:motion-delay-1900 { &:not([no-intersect]) { --motion-delay: 1900ms; } } .intersect\:motion-delay-1900 { &:not([no-intersect]) { --motion-delay: 1900ms; } } .intersect\:motion-delay-2000 { &:not([no-intersect]) { --motion-delay: 2000ms; } } .intersect\:motion-delay-2000 { &:not([no-intersect]) { --motion-delay: 2000ms; } } .intersect\:motion-delay-2000 { &:not([no-intersect]) { --motion-delay: 2000ms; } } .intersect\:motion-delay-2000 { &:not([no-intersect]) { --motion-delay: 2000ms; } } .intersect\:motion-delay-2000 { &:not([no-intersect]) { --motion-delay: 2000ms; } } .intersect\:motion-delay-2000 { &:not([no-intersect]) { --motion-delay: 2000ms; } } .intersect\:motion-delay-2000 { &:not([no-intersect]) { --motion-delay: 2000ms; } } .intersect\:motion-delay-2000 { &:not([no-intersect]) { --motion-delay: 2000ms; } } .intersect\:motion-delay-2100 { &:not([no-intersect]) { --motion-delay: 2100ms; } } .intersect\:motion-delay-2100 { &:not([no-intersect]) { --motion-delay: 2100ms; } } .intersect\:motion-delay-2100 { &:not([no-intersect]) { --motion-delay: 2100ms; } } .intersect\:motion-delay-2100 { &:not([no-intersect]) { --motion-delay: 2100ms; } } .intersect\:motion-delay-2100 { &:not([no-intersect]) { --motion-delay: 2100ms; } } .intersect\:motion-delay-2100 { &:not([no-intersect]) { --motion-delay: 2100ms; } } .intersect\:motion-delay-2100 { &:not([no-intersect]) { --motion-delay: 2100ms; } } .intersect\:motion-delay-2100 { &:not([no-intersect]) { --motion-delay: 2100ms; } } .intersect\:motion-delay-2200 { &:not([no-intersect]) { --motion-delay: 2200ms; } } .intersect\:motion-delay-2200 { &:not([no-intersect]) { --motion-delay: 2200ms; } } .intersect\:motion-delay-2200 { &:not([no-intersect]) { --motion-delay: 2200ms; } } .intersect\:motion-delay-2200 { &:not([no-intersect]) { --motion-delay: 2200ms; } } .intersect\:motion-delay-2200 { &:not([no-intersect]) { --motion-delay: 2200ms; } } .intersect\:motion-delay-2200 { &:not([no-intersect]) { --motion-delay: 2200ms; } } .intersect\:motion-delay-2200 { &:not([no-intersect]) { --motion-delay: 2200ms; } } .intersect\:motion-delay-2200 { &:not([no-intersect]) { --motion-delay: 2200ms; } } .intersect\:motion-delay-2300 { &:not([no-intersect]) { --motion-delay: 2300ms; } } .intersect\:motion-delay-2300 { &:not([no-intersect]) { --motion-delay: 2300ms; } } .intersect\:motion-delay-2300 { &:not([no-intersect]) { --motion-delay: 2300ms; } } .intersect\:motion-delay-2300 { &:not([no-intersect]) { --motion-delay: 2300ms; } } .intersect\:motion-delay-2300 { &:not([no-intersect]) { --motion-delay: 2300ms; } } .intersect\:motion-delay-2300 { &:not([no-intersect]) { --motion-delay: 2300ms; } } .intersect\:motion-delay-2300 { &:not([no-intersect]) { --motion-delay: 2300ms; } } .intersect\:motion-delay-2300 { &:not([no-intersect]) { --motion-delay: 2300ms; } } .intersect\:motion-delay-2400 { &:not([no-intersect]) { --motion-delay: 2400ms; } } .intersect\:motion-delay-2400 { &:not([no-intersect]) { --motion-delay: 2400ms; } } .intersect\:motion-delay-2400 { &:not([no-intersect]) { --motion-delay: 2400ms; } } .intersect\:motion-delay-2400 { &:not([no-intersect]) { --motion-delay: 2400ms; } } .intersect\:motion-delay-2400 { &:not([no-intersect]) { --motion-delay: 2400ms; } } .intersect\:motion-delay-2400 { &:not([no-intersect]) { --motion-delay: 2400ms; } } .intersect\:motion-delay-2400 { &:not([no-intersect]) { --motion-delay: 2400ms; } } .intersect\:motion-delay-2400 { &:not([no-intersect]) { --motion-delay: 2400ms; } } .intersect\:motion-delay-2500 { &:not([no-intersect]) { --motion-delay: 2500ms; } } .intersect\:motion-delay-2500 { &:not([no-intersect]) { --motion-delay: 2500ms; } } .intersect\:motion-delay-2500 { &:not([no-intersect]) { --motion-delay: 2500ms; } } .intersect\:motion-delay-2500 { &:not([no-intersect]) { --motion-delay: 2500ms; } } .intersect\:motion-delay-2500 { &:not([no-intersect]) { --motion-delay: 2500ms; } } .intersect\:motion-delay-2500 { &:not([no-intersect]) { --motion-delay: 2500ms; } } .intersect\:motion-delay-2500 { &:not([no-intersect]) { --motion-delay: 2500ms; } } .intersect\:motion-delay-2500 { &:not([no-intersect]) { --motion-delay: 2500ms; } } .intersect\:motion-delay-2600 { &:not([no-intersect]) { --motion-delay: 2600ms; } } .intersect\:motion-delay-2600 { &:not([no-intersect]) { --motion-delay: 2600ms; } } .intersect\:motion-delay-2600 { &:not([no-intersect]) { --motion-delay: 2600ms; } } .intersect\:motion-delay-2600 { &:not([no-intersect]) { --motion-delay: 2600ms; } } .intersect\:motion-delay-2600 { &:not([no-intersect]) { --motion-delay: 2600ms; } } .intersect\:motion-delay-2600 { &:not([no-intersect]) { --motion-delay: 2600ms; } } .intersect\:motion-delay-2600 { &:not([no-intersect]) { --motion-delay: 2600ms; } } .intersect\:motion-delay-2600 { &:not([no-intersect]) { --motion-delay: 2600ms; } } .intersect\:motion-delay-2700 { &:not([no-intersect]) { --motion-delay: 2700ms; } } .intersect\:motion-delay-2700 { &:not([no-intersect]) { --motion-delay: 2700ms; } } .intersect\:motion-delay-2700 { &:not([no-intersect]) { --motion-delay: 2700ms; } } .intersect\:motion-delay-2700 { &:not([no-intersect]) { --motion-delay: 2700ms; } } .intersect\:motion-delay-2700 { &:not([no-intersect]) { --motion-delay: 2700ms; } } .intersect\:motion-delay-2700 { &:not([no-intersect]) { --motion-delay: 2700ms; } } .intersect\:motion-delay-2700 { &:not([no-intersect]) { --motion-delay: 2700ms; } } .intersect\:motion-delay-2700 { &:not([no-intersect]) { --motion-delay: 2700ms; } } .intersect\:motion-delay-3000 { &:not([no-intersect]) { --motion-delay: 3000ms; } } .intersect\:motion-delay-3000 { &:not([no-intersect]) { --motion-delay: 3000ms; } } .intersect\:motion-delay-3000 { &:not([no-intersect]) { --motion-delay: 3000ms; } } .intersect\:motion-delay-3000 { &:not([no-intersect]) { --motion-delay: 3000ms; } } .intersect\:motion-delay-3000 { &:not([no-intersect]) { --motion-delay: 3000ms; } } .intersect\:motion-delay-3000 { &:not([no-intersect]) { --motion-delay: 3000ms; } } .intersect\:motion-delay-3000 { &:not([no-intersect]) { --motion-delay: 3000ms; } } .intersect\:motion-delay-3000 { &:not([no-intersect]) { --motion-delay: 3000ms; } } .intersect\:motion-delay-4100 { &:not([no-intersect]) { --motion-delay: 4100ms; } } .intersect\:motion-delay-4100 { &:not([no-intersect]) { --motion-delay: 4100ms; } } .intersect\:motion-delay-4100 { &:not([no-intersect]) { --motion-delay: 4100ms; } } .intersect\:motion-delay-4100 { &:not([no-intersect]) { --motion-delay: 4100ms; } } .intersect\:motion-delay-4100 { &:not([no-intersect]) { --motion-delay: 4100ms; } } .intersect\:motion-delay-4100 { &:not([no-intersect]) { --motion-delay: 4100ms; } } .intersect\:motion-delay-4100 { &:not([no-intersect]) { --motion-delay: 4100ms; } } .intersect\:motion-delay-4100 { &:not([no-intersect]) { --motion-delay: 4100ms; } } .intersect\:motion-delay-\[400ms\] { &:not([no-intersect]) { --motion-delay: 400ms; } } .intersect\:motion-delay-\[400ms\] { &:not([no-intersect]) { --motion-delay: 400ms; } } .intersect\:motion-delay-\[400ms\] { &:not([no-intersect]) { --motion-delay: 400ms; } } .intersect\:motion-delay-\[400ms\] { &:not([no-intersect]) { --motion-delay: 400ms; } } .intersect\:motion-delay-\[400ms\] { &:not([no-intersect]) { --motion-delay: 400ms; } } .intersect\:motion-delay-\[400ms\] { &:not([no-intersect]) { --motion-delay: 400ms; } } .intersect\:motion-delay-\[400ms\] { &:not([no-intersect]) { --motion-delay: 400ms; } } .intersect\:motion-delay-\[400ms\] { &:not([no-intersect]) { --motion-delay: 400ms; } } .intersect\:motion-delay-\[800ms\] { &:not([no-intersect]) { --motion-delay: 800ms; } } .intersect\:motion-delay-\[800ms\] { &:not([no-intersect]) { --motion-delay: 800ms; } } .intersect\:motion-delay-\[800ms\] { &:not([no-intersect]) { --motion-delay: 800ms; } } .intersect\:motion-delay-\[800ms\] { &:not([no-intersect]) { --motion-delay: 800ms; } } .intersect\:motion-delay-\[800ms\] { &:not([no-intersect]) { --motion-delay: 800ms; } } .intersect\:motion-delay-\[800ms\] { &:not([no-intersect]) { --motion-delay: 800ms; } } .intersect\:motion-delay-\[800ms\] { &:not([no-intersect]) { --motion-delay: 800ms; } } .intersect\:motion-delay-\[800ms\] { &:not([no-intersect]) { --motion-delay: 800ms; } } .intersect\:motion-delay-\[1000ms\] { &:not([no-intersect]) { --motion-delay: 1000ms; } } .intersect\:motion-delay-\[1000ms\] { &:not([no-intersect]) { --motion-delay: 1000ms; } } .intersect\:motion-delay-\[1000ms\] { &:not([no-intersect]) { --motion-delay: 1000ms; } } .intersect\:motion-delay-\[1000ms\] { &:not([no-intersect]) { --motion-delay: 1000ms; } } .intersect\:motion-delay-\[1000ms\] { &:not([no-intersect]) { --motion-delay: 1000ms; } } .intersect\:motion-delay-\[1000ms\] { &:not([no-intersect]) { --motion-delay: 1000ms; } } .intersect\:motion-delay-\[1000ms\] { &:not([no-intersect]) { --motion-delay: 1000ms; } } .intersect\:motion-delay-\[1000ms\] { &:not([no-intersect]) { --motion-delay: 1000ms; } } .intersect\:motion-delay-\[1200ms\] { &:not([no-intersect]) { --motion-delay: 1200ms; } } .intersect\:motion-delay-\[1200ms\] { &:not([no-intersect]) { --motion-delay: 1200ms; } } .intersect\:motion-delay-\[1200ms\] { &:not([no-intersect]) { --motion-delay: 1200ms; } } .intersect\:motion-delay-\[1200ms\] { &:not([no-intersect]) { --motion-delay: 1200ms; } } .intersect\:motion-delay-\[1200ms\] { &:not([no-intersect]) { --motion-delay: 1200ms; } } .intersect\:motion-delay-\[1200ms\] { &:not([no-intersect]) { --motion-delay: 1200ms; } } .intersect\:motion-delay-\[1200ms\] { &:not([no-intersect]) { --motion-delay: 1200ms; } } .intersect\:motion-delay-\[1200ms\] { &:not([no-intersect]) { --motion-delay: 1200ms; } } .intersect\:motion-duration-300 { &:not([no-intersect]) { --motion-duration: 300ms; } } .intersect\:motion-duration-300 { &:not([no-intersect]) { --motion-duration: 300ms; } } .intersect\:motion-duration-300 { &:not([no-intersect]) { --motion-duration: 300ms; } } .intersect\:motion-duration-300 { &:not([no-intersect]) { --motion-duration: 300ms; } } .intersect\:motion-duration-300 { &:not([no-intersect]) { --motion-duration: 300ms; } } .intersect\:motion-duration-300 { &:not([no-intersect]) { --motion-duration: 300ms; } } .intersect\:motion-duration-300 { &:not([no-intersect]) { --motion-duration: 300ms; } } .intersect\:motion-duration-300 { &:not([no-intersect]) { --motion-duration: 300ms; } } .intersect\:motion-duration-500 { &:not([no-intersect]) { --motion-duration: 500ms; } } .intersect\:motion-duration-500 { &:not([no-intersect]) { --motion-duration: 500ms; } } .intersect\:motion-duration-500 { &:not([no-intersect]) { --motion-duration: 500ms; } } .intersect\:motion-duration-500 { &:not([no-intersect]) { --motion-duration: 500ms; } } .intersect\:motion-duration-500 { &:not([no-intersect]) { --motion-duration: 500ms; } } .intersect\:motion-duration-500 { &:not([no-intersect]) { --motion-duration: 500ms; } } .intersect\:motion-duration-500 { &:not([no-intersect]) { --motion-duration: 500ms; } } .intersect\:motion-duration-500 { &:not([no-intersect]) { --motion-duration: 500ms; } } .intersect\:motion-duration-600 { &:not([no-intersect]) { --motion-duration: 600ms; } } .intersect\:motion-duration-600 { &:not([no-intersect]) { --motion-duration: 600ms; } } .intersect\:motion-duration-600 { &:not([no-intersect]) { --motion-duration: 600ms; } } .intersect\:motion-duration-600 { &:not([no-intersect]) { --motion-duration: 600ms; } } .intersect\:motion-duration-600 { &:not([no-intersect]) { --motion-duration: 600ms; } } .intersect\:motion-duration-600 { &:not([no-intersect]) { --motion-duration: 600ms; } } .intersect\:motion-duration-600 { &:not([no-intersect]) { --motion-duration: 600ms; } } .intersect\:motion-duration-600 { &:not([no-intersect]) { --motion-duration: 600ms; } } .intersect\:motion-duration-800 { &:not([no-intersect]) { --motion-duration: 800ms; } } .intersect\:motion-duration-800 { &:not([no-intersect]) { --motion-duration: 800ms; } } .intersect\:motion-duration-800 { &:not([no-intersect]) { --motion-duration: 800ms; } } .intersect\:motion-duration-800 { &:not([no-intersect]) { --motion-duration: 800ms; } } .intersect\:motion-duration-800 { &:not([no-intersect]) { --motion-duration: 800ms; } } .intersect\:motion-duration-800 { &:not([no-intersect]) { --motion-duration: 800ms; } } .intersect\:motion-duration-800 { &:not([no-intersect]) { --motion-duration: 800ms; } } .intersect\:motion-duration-800 { &:not([no-intersect]) { --motion-duration: 800ms; } } .intersect\:motion-duration-900 { &:not([no-intersect]) { --motion-duration: 900ms; } } .intersect\:motion-duration-900 { &:not([no-intersect]) { --motion-duration: 900ms; } } .intersect\:motion-duration-900 { &:not([no-intersect]) { --motion-duration: 900ms; } } .intersect\:motion-duration-900 { &:not([no-intersect]) { --motion-duration: 900ms; } } .intersect\:motion-duration-900 { &:not([no-intersect]) { --motion-duration: 900ms; } } .intersect\:motion-duration-900 { &:not([no-intersect]) { --motion-duration: 900ms; } } .intersect\:motion-duration-900 { &:not([no-intersect]) { --motion-duration: 900ms; } } .intersect\:motion-duration-900 { &:not([no-intersect]) { --motion-duration: 900ms; } } .intersect\:motion-duration-1000 { &:not([no-intersect]) { --motion-duration: 1000ms; } } .intersect\:motion-duration-1000 { &:not([no-intersect]) { --motion-duration: 1000ms; } } .intersect\:motion-duration-1000 { &:not([no-intersect]) { --motion-duration: 1000ms; } } .intersect\:motion-duration-1000 { &:not([no-intersect]) { --motion-duration: 1000ms; } } .intersect\:motion-duration-1000 { &:not([no-intersect]) { --motion-duration: 1000ms; } } .intersect\:motion-duration-1000 { &:not([no-intersect]) { --motion-duration: 1000ms; } } .intersect\:motion-duration-1000 { &:not([no-intersect]) { --motion-duration: 1000ms; } } .intersect\:motion-duration-1000 { &:not([no-intersect]) { --motion-duration: 1000ms; } } .intersect\:motion-duration-\[0\.35s\] { &:not([no-intersect]) { --motion-duration: 0.35s; } } .intersect\:motion-duration-\[0\.35s\] { &:not([no-intersect]) { --motion-duration: 0.35s; } } .intersect\:motion-duration-\[0\.35s\] { &:not([no-intersect]) { --motion-duration: 0.35s; } } .intersect\:motion-duration-\[0\.35s\] { &:not([no-intersect]) { --motion-duration: 0.35s; } } .intersect\:motion-duration-\[0\.35s\] { &:not([no-intersect]) { --motion-duration: 0.35s; } } .intersect\:motion-duration-\[0\.35s\] { &:not([no-intersect]) { --motion-duration: 0.35s; } } .intersect\:motion-duration-\[0\.35s\] { &:not([no-intersect]) { --motion-duration: 0.35s; } } .intersect\:motion-duration-\[0\.35s\] { &:not([no-intersect]) { --motion-duration: 0.35s; } } .intersect\:motion-duration-\[0\.53s\]\/scale { &:not([no-intersect]) { --motion-scale-duration: 0.53s; } } .intersect\:motion-duration-\[0\.53s\]\/scale { &:not([no-intersect]) { --motion-scale-duration: 0.53s; } } .intersect\:motion-duration-\[0\.53s\]\/scale { &:not([no-intersect]) { --motion-scale-duration: 0.53s; } } .intersect\:motion-duration-\[0\.53s\]\/scale { &:not([no-intersect]) { --motion-scale-duration: 0.53s; } } .intersect\:motion-duration-\[0\.53s\]\/scale { &:not([no-intersect]) { --motion-scale-duration: 0.53s; } } .intersect\:motion-duration-\[0\.53s\]\/scale { &:not([no-intersect]) { --motion-scale-duration: 0.53s; } } .intersect\:motion-duration-\[0\.53s\]\/scale { &:not([no-intersect]) { --motion-scale-duration: 0.53s; } } .intersect\:motion-duration-\[0\.53s\]\/scale { &:not([no-intersect]) { --motion-scale-duration: 0.53s; } } .intersect\:motion-duration-\[0\.53s\]\/translate { &:not([no-intersect]) { --motion-translate-duration: 0.53s; } } .intersect\:motion-duration-\[0\.53s\]\/translate { &:not([no-intersect]) { --motion-translate-duration: 0.53s; } } .intersect\:motion-duration-\[0\.53s\]\/translate { &:not([no-intersect]) { --motion-translate-duration: 0.53s; } } .intersect\:motion-duration-\[0\.53s\]\/translate { &:not([no-intersect]) { --motion-translate-duration: 0.53s; } } .intersect\:motion-duration-\[0\.53s\]\/translate { &:not([no-intersect]) { --motion-translate-duration: 0.53s; } } .intersect\:motion-duration-\[0\.53s\]\/translate { &:not([no-intersect]) { --motion-translate-duration: 0.53s; } } .intersect\:motion-duration-\[0\.53s\]\/translate { &:not([no-intersect]) { --motion-translate-duration: 0.53s; } } .intersect\:motion-duration-\[0\.53s\]\/translate { &:not([no-intersect]) { --motion-translate-duration: 0.53s; } } .intersect\:motion-duration-\[0\.63s\]\/rotate { &:not([no-intersect]) { --motion-rotate-duration: 0.63s; } } .intersect\:motion-duration-\[0\.63s\]\/rotate { &:not([no-intersect]) { --motion-rotate-duration: 0.63s; } } .intersect\:motion-duration-\[0\.63s\]\/rotate { &:not([no-intersect]) { --motion-rotate-duration: 0.63s; } } .intersect\:motion-duration-\[0\.63s\]\/rotate { &:not([no-intersect]) { --motion-rotate-duration: 0.63s; } } .intersect\:motion-duration-\[0\.63s\]\/rotate { &:not([no-intersect]) { --motion-rotate-duration: 0.63s; } } .intersect\:motion-duration-\[0\.63s\]\/rotate { &:not([no-intersect]) { --motion-rotate-duration: 0.63s; } } .intersect\:motion-duration-\[0\.63s\]\/rotate { &:not([no-intersect]) { --motion-rotate-duration: 0.63s; } } .intersect\:motion-duration-\[0\.63s\]\/rotate { &:not([no-intersect]) { --motion-rotate-duration: 0.63s; } } .intersect\:motion-reduce\:animate-none { &:not([no-intersect]) { @media (prefers-reduced-motion: reduce) { animation: none; } } } .\[\&\.direction-active\]\:border-primary { &.direction-active { border-color: var(--color-primary); } } .\[\&\.direction-active\]\:bg-primary\/10 { &.direction-active { background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 10%, transparent); } } } .\[\&\.direction-active\]\:text-primary { &.direction-active { color: var(--color-primary); } } .\[\&\.theme-active\]\:ring { &.theme-active { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .\[\.menu-active\]\:bg-base-100\! { &:is(.menu-active) { background-color: var(--color-base-100) !important; } } .\[\.menu-active\]\:bg-primary\! { &:is(.menu-active) { background-color: var(--color-primary) !important; } } .\[\.menu-active\]\:text-base-content\! { &:is(.menu-active) { color: var(--color-base-content) !important; } } .\[\.menu-active\]\:text-primary-content\! { &:is(.menu-active) { color: var(--color-primary-content) !important; } } .max-lg\:\[\.menu-active\]\:bg-base-100\/30\! { @media (width < 64rem) { &:is(.menu-active) { background-color: var(--color-base-100) !important; @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-100) 30%, transparent) !important; } } } } .\[\&\>\.active\]\:text-bg-soft-primary { &>.active { color: var(--color-primary); background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 10%, var(--color-base-100)); } } } } [data-theme='dark'] li:not(.rgc5h, .wxbtu) > :not(ul, .rgc5h, .collapse, .accordion-content, .btn).menu-active { background-color: var(--color-primary); color: var(--color-primary-content); } body { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 80%, transparent); } } .dt-layout-row:has(.cxvbq), .dt-layout-row:has(.jar8a), .dt-layout-row:has(.f72j5), .fzu4f thead { display: none !important; } .flatpickr-calendar { visibility: hidden; position: absolute; display: flex; max-width: calc(var(--spacing) * 72); touch-action: manipulation; flex-direction: row; gap: calc(var(--spacing) * 1.5); overflow: hidden; border-radius: var(--radius-box); border-color: transparent; background-color: var(--color-base-100); --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent); &.hasWeeks { max-width: 21rem; } &::after, &::before { content: none; } } .flatpickr-current-month { position: absolute; inset-inline-start: calc(var(--spacing) * 4); display: flex; width: auto; align-items: center; justify-content: center; gap: calc(var(--spacing) * 1); padding-top: calc(var(--spacing) * 0); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-base-content); &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { inset-inline-start: auto; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { inset-inline-end: calc(var(--spacing) * 4); } .flatpickr-monthDropdown-months, input.cur-year { display: flex; cursor: pointer; align-items: center; justify-content: center; border-radius: 0; border-style: var(--tw-border-style); border-width: 0px; vertical-align: middle; --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); --tw-outline-style: none; outline-style: none; font-size: inherit; font-family: inherit; line-height: inherit; color: inherit; } span.svyq9 { margin: calc(var(--spacing) * 0); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); &:hover { @media (hover: hover) { background-color: transparent; } } } .numInputWrapper { display: inline-block; width: 6ch; &:hover { @media (hover: hover) { background-color: transparent; } } } .flatpickr-monthDropdown-months { position: relative; margin-top: -1px; cursor: pointer; background-color: var(--color-base-100) !important; padding: calc(var(--spacing) * 0); } input.cur-year { margin: calc(var(--spacing) * 0); height: calc(var(--spacing) * 5); cursor: default; padding-inline-start: calc(var(--spacing) * 1); &:focus { --tw-outline-style: none; outline-style: none; } &[disabled], &[disabled]:hover { pointer-events: none; background-color: transparent; } } } .flatpickr-months { .flatpickr-month { position: relative; display: flex; height: calc(var(--spacing) * 15); align-items: center; overflow: hidden; border-top-left-radius: var(--radius-box); border-top-right-radius: var(--radius-box); padding-inline: calc(var(--spacing) * 4); text-align: center; -webkit-user-select: none; user-select: none; } .flatpickr-prev-month, .flatpickr-next-month { position: absolute; top: calc(var(--spacing) * 4); display: flex; width: calc(var(--spacing) * 7); height: calc(var(--spacing) * 7); align-items: center; justify-content: center; border-radius: calc(infinity * 1px); background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } padding: calc(var(--spacing) * 0); color: var(--color-base-content); text-decoration-line: none; &:hover { @media (hover: hover) { fill: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { fill: color-mix(in oklab, var(--color-base-content) 90%, transparent); } } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { rotate: 180deg; } svg { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); fill: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { fill: color-mix(in oklab, var(--color-base-content) 90%, transparent); } vertical-align: middle; color: var(--color-base-content); } } .flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { fill: color-mix(in oklab, var(--color-base-content) 90%, transparent); } } .flatpickr-prev-month { &.flatpickr-prev-month { inset-inline-start: auto; inset-inline-end: 50px; &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { inset-inline-start: calc(var(--spacing) * 14); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { inset-inline-end: auto; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { --tw-skew-x: skewX(calc(1deg * -1)); transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } } } .flatpickr-next-month { &.flatpickr-prev-month { inset-inline-start: calc(var(--spacing) * 0); inset-inline-end: calc(var(--spacing) * 0); } &.flatpickr-next-month { inset-inline-end: calc(var(--spacing) * 4); &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { inset-inline-start: calc(var(--spacing) * 4); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { inset-inline-end: auto; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { --tw-skew-x: skewX(calc(1deg * -1)); transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } } } } .flatpickr-weekdays { display: flex; width: 100%; align-items: center; overflow: hidden; padding-inline: calc(var(--spacing) * 3); text-align: center; } .flatpickr-weekdaycontainer { display: flex; width: 100%; } span.flatpickr-weekday, .kmkpx .flatpickr-weekday { margin: calc(var(--spacing) * 0); display: block; cursor: default; text-align: center; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-base-content); } .flatpickr-days { position: relative; display: flex; width: 100%; max-width: calc(var(--spacing) * 72); flex-wrap: wrap; overflow: hidden; padding-inline: calc(var(--spacing) * 2.5); padding-block: calc(var(--spacing) * 2); &:focus { --tw-outline-style: none; outline-style: none; } .flatpickr-calendar.diy4h & { border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-bottom-style: var(--tw-border-style); border-bottom-width: 0px; } & .dayContainer { display: flex; max-width: 100%; min-width: 100%; flex-wrap: wrap; justify-content: center; row-gap: calc(var(--spacing) * 0.5); padding: calc(var(--spacing) * 0); opacity: 100%; --tw-outline-style: none; outline-style: none; } } .flatpickr-day { position: relative; margin: calc(var(--spacing) * 0); display: flex; width: calc(var(--spacing) * 9.5); height: calc(var(--spacing) * 9.5); max-width: calc(var(--spacing) * 9.5); cursor: pointer; align-items: center; justify-content: center; text-align: center; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); color: var(--color-base-content); &.today:not(.selected) { border-color: transparent; background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 20%, transparent); } color: var(--color-primary); } &.inRange, &.prevMonthDay.inRange, &.nextMonthDay.inRange, &.today.inRange, &.prevMonthDay.today.inRange, &.nextMonthDay.today.inRange, &:hover, &.prevMonthDay:hover, &.nextMonthDay:hover, &:focus, &.prevMonthDay:focus, &.nextMonthDay:focus { cursor: pointer; --tw-outline-style: none; outline-style: none; } &:hover:not(.selected, .today, .inRange, .endRange), &:focus:not(.selected, .today, .inRange, .endRange), &.prevMonthDay:hover:not(.selected, .today, .inRange, .endRange), &.nextMonthDay:hover:not(.selected, .today, .inRange, .endRange), &.prevMonthDay:focus:not(.selected, .today, .inRange, .endRange), &.nextMonthDay:focus:not(.selected, .today, .inRange, .endRange) { border-color: transparent; background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } } &.selected, &.startRange, &.endRange, &.selected.inRange, &.startRange.inRange, &.endRange.inRange, &.selected:focus, &.startRange:focus, &.endRange:focus, &.selected:hover, &.startRange:hover, &.endRange:hover, &.selected.prevMonthDay, &.startRange.prevMonthDay, &.endRange.prevMonthDay, &.selected.nextMonthDay, &.startRange.nextMonthDay, &.endRange.nextMonthDay { border-color: transparent; background-color: var(--color-primary); color: var(--color-primary-content); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-shadow-color: var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent); } } &.inRange:not(.startRange):not(.endRange) { border-radius: 0; border-color: transparent; } z &.disabled, &.disabled:hover { pointer-events: none; border-color: transparent; background-color: transparent; color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } &.prevMonthDay, &.nextMonthDay, &.notAllowed, &.notAllowed.prevMonthDay, &.notAllowed.nextMonthDay { border-color: transparent; background-color: transparent; } &.week.selected { border-radius: 0; } &.selected.startRange, &.startRange.startRange, &.endRange.startRange { border-start-end-radius: 0; border-end-end-radius: 0; } &.selected.endRange, &.startRange.endRange, &.endRange.endRange { border-start-start-radius: 0; border-end-start-radius: 0; } &.flatpickr-disabled, &.flatpickr-disabled:hover, &.prevMonthDay, &.nextMonthDay, &.notAllowed, &.notAllowed.prevMonthDay, &.notAllowed.nextMonthDay { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } } .flatpickr-day.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.inRange:hover { background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 20%, transparent); } color: var(--color-primary); box-shadow: unset; } .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) { box-shadow: unset; } .kmkpx { & span.flatpickr-day, & span.flatpickr-day:hover { margin: calc(var(--spacing) * 0); display: flex; width: calc(var(--spacing) * 9.5); height: calc(var(--spacing) * 9.5); max-width: calc(var(--spacing) * 9.5); cursor: pointer; align-items: center; justify-content: center; text-align: center; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); color: var(--color-base-content); &:not(:last-child) { margin-bottom: calc(var(--spacing) * 0.5); } } & .flatpickr-weeks { padding-block: calc(var(--spacing) * 2); padding-inline-start: calc(var(--spacing) * 2.5); padding-inline-end: calc(var(--spacing) * 0); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } & .flatpickr-weekday { padding-inline-start: calc(var(--spacing) * 3); line-height: 28px; } } .flatpickr-calendar .flatpickr-innerContainer:has(> .kmkpx) { & > .flatpickr-rContainer .flatpickr-weekdays, & > .flatpickr-rContainer .flatpickr-days { padding-inline-start: calc(var(--spacing) * 0); } } .flatpickr-calendar.diy4h .flatpickr-time { height: 100%; border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } padding-inline: calc(var(--spacing) * 4.5); padding-block: calc(var(--spacing) * 3); } .flatpickr-time { max-height: unset; gap: calc(var(--spacing) * 2); --tw-leading: 30px; line-height: 30px; & .numInputWrapper { border-radius: var(--radius-field); height: inherit; } & input:hover, & .flatpickr-am-pm:hover, & input:focus, & .flatpickr-am-pm:focus { background: unset; } & .numInputWrapper span.arrowUp { top: 10%; } & .flatpickr-time-separator { color: var(--color-base-content); } } .flatpickr-time:after { content: none; } .flatpickr-calendar.diy4h.zsocc > .flatpickr-time { border-color: transparent; } .flatpickr-time input.flatpickr-hour { height: auto; border-radius: var(--radius-field); border-style: var(--tw-border-style); border-width: 1px; --tw-border-style: solid; border-style: solid; border-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-leading: inherit; line-height: inherit; --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); color: var(--color-base-content); } .flatpickr-time input.flatpickr-minute { height: auto; border-radius: var(--radius-field); border-style: var(--tw-border-style); border-width: 1px; --tw-border-style: solid; border-style: solid; border-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-leading: inherit; line-height: inherit; color: var(--color-base-content); } .flatpickr-time .flatpickr-am-pm { display: flex; align-items: center; justify-content: center; border-radius: var(--radius-field); border-style: var(--tw-border-style); border-width: 1px; border-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-leading: inherit; line-height: inherit; color: var(--color-base-content); } .numInputWrapper:hover, .numInputWrapper span:hover { background: unset; } .flatpickr-current-month .numInputWrapper span.arrowUp:after, .flatpickr-time .numInputWrapper span.arrowUp:after { border-bottom-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-bottom-color: color-mix(in oklab, var(--color-base-content) 80%, transparent); } } .flatpickr-current-month .numInputWrapper span.arrowDown:after, .flatpickr-time .numInputWrapper span.arrowDown:after { border-top-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-top-color: color-mix(in oklab, var(--color-base-content) 80%, transparent); } } .numInputWrapper span { border-style: var(--tw-border-style); border-width: 0px; } .flatpickr-calendar:not(.lrnp5):not(.open) { display: none; } .apexcharts-tooltip-series-group.apexcharts-active { padding-bottom: calc(var(--spacing) * 0) !important; } .apexcharts-tooltip.apexcharts-theme-light, .apexcharts-tooltip.apexcharts-theme-dark { --tw-border-style: none !important; border-style: none !important; background-color: var(--color-base-100) !important; --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)) !important; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important; } .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title, .apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title { border-color: var(--color-base-content) !important; @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent) !important; } background-color: var(--color-base-100) !important; } .dt-layout-row:has(.cxvbq), .dt-layout-row:has(.jar8a), .dt-layout-row:has(.f72j5), .fzu4f thead { display: none !important; } .flatpickr-calendar { visibility: hidden; position: absolute; display: flex; max-width: calc(var(--spacing) * 72); touch-action: manipulation; flex-direction: row; gap: calc(var(--spacing) * 1.5); overflow: hidden; border-radius: var(--radius-box); border-color: transparent; background-color: var(--color-base-100); --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent); &.hasWeeks { max-width: 21rem; } &::after, &::before { content: none; } } .flatpickr-current-month { position: absolute; inset-inline-start: calc(var(--spacing) * 4); display: flex; width: auto; align-items: center; justify-content: center; gap: calc(var(--spacing) * 1); padding-top: calc(var(--spacing) * 0); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-base-content); &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { inset-inline-start: auto; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { inset-inline-end: calc(var(--spacing) * 4); } .flatpickr-monthDropdown-months, input.cur-year { display: flex; cursor: pointer; align-items: center; justify-content: center; border-radius: 0; border-style: var(--tw-border-style); border-width: 0px; vertical-align: middle; --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); --tw-outline-style: none; outline-style: none; font-size: inherit; font-family: inherit; line-height: inherit; color: inherit; } span.svyq9 { margin: calc(var(--spacing) * 0); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); &:hover { @media (hover: hover) { background-color: transparent; } } } .numInputWrapper { display: inline-block; width: 6ch; &:hover { @media (hover: hover) { background-color: transparent; } } } .flatpickr-monthDropdown-months { position: relative; margin-top: -1px; cursor: pointer; background-color: var(--color-base-100) !important; padding: calc(var(--spacing) * 0); } input.cur-year { margin: calc(var(--spacing) * 0); height: calc(var(--spacing) * 5); cursor: default; padding-inline-start: calc(var(--spacing) * 1); &:focus { --tw-outline-style: none; outline-style: none; } &[disabled], &[disabled]:hover { pointer-events: none; background-color: transparent; } } } .flatpickr-months { .flatpickr-month { position: relative; display: flex; height: calc(var(--spacing) * 15); align-items: center; overflow: hidden; border-top-left-radius: var(--radius-box); border-top-right-radius: var(--radius-box); padding-inline: calc(var(--spacing) * 4); text-align: center; -webkit-user-select: none; user-select: none; } .flatpickr-prev-month, .flatpickr-next-month { position: absolute; top: calc(var(--spacing) * 4); display: flex; width: calc(var(--spacing) * 7); height: calc(var(--spacing) * 7); align-items: center; justify-content: center; border-radius: calc(infinity * 1px); background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } padding: calc(var(--spacing) * 0); color: var(--color-base-content); text-decoration-line: none; &:hover { @media (hover: hover) { fill: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { fill: color-mix(in oklab, var(--color-base-content) 90%, transparent); } } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { rotate: 180deg; } svg { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); fill: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { fill: color-mix(in oklab, var(--color-base-content) 90%, transparent); } vertical-align: middle; color: var(--color-base-content); } } .flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { fill: color-mix(in oklab, var(--color-base-content) 90%, transparent); } } .flatpickr-prev-month { &.flatpickr-prev-month { inset-inline-start: auto; inset-inline-end: 50px; &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { inset-inline-start: calc(var(--spacing) * 14); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { inset-inline-end: auto; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { --tw-skew-x: skewX(calc(1deg * -1)); transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } } } .flatpickr-next-month { &.flatpickr-prev-month { inset-inline-start: calc(var(--spacing) * 0); inset-inline-end: calc(var(--spacing) * 0); } &.flatpickr-next-month { inset-inline-end: calc(var(--spacing) * 4); &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { inset-inline-start: calc(var(--spacing) * 4); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { inset-inline-end: auto; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { --tw-skew-x: skewX(calc(1deg * -1)); transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } } } } .flatpickr-weekdays { display: flex; width: 100%; align-items: center; overflow: hidden; padding-inline: calc(var(--spacing) * 3); text-align: center; } .flatpickr-weekdaycontainer { display: flex; width: 100%; } span.flatpickr-weekday, .kmkpx .flatpickr-weekday { margin: calc(var(--spacing) * 0); display: block; cursor: default; text-align: center; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-base-content); } .flatpickr-days { position: relative; display: flex; width: 100%; max-width: calc(var(--spacing) * 72); flex-wrap: wrap; overflow: hidden; padding-inline: calc(var(--spacing) * 2.5); padding-block: calc(var(--spacing) * 2); &:focus { --tw-outline-style: none; outline-style: none; } .flatpickr-calendar.diy4h & { border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-bottom-style: var(--tw-border-style); border-bottom-width: 0px; } & .dayContainer { display: flex; max-width: 100%; min-width: 100%; flex-wrap: wrap; justify-content: center; row-gap: calc(var(--spacing) * 0.5); padding: calc(var(--spacing) * 0); opacity: 100%; --tw-outline-style: none; outline-style: none; } } .flatpickr-day { position: relative; margin: calc(var(--spacing) * 0); display: flex; width: calc(var(--spacing) * 9.5); height: calc(var(--spacing) * 9.5); max-width: calc(var(--spacing) * 9.5); cursor: pointer; align-items: center; justify-content: center; text-align: center; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); color: var(--color-base-content); &.today:not(.selected) { border-color: transparent; background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 20%, transparent); } color: var(--color-primary); } &.inRange, &.prevMonthDay.inRange, &.nextMonthDay.inRange, &.today.inRange, &.prevMonthDay.today.inRange, &.nextMonthDay.today.inRange, &:hover, &.prevMonthDay:hover, &.nextMonthDay:hover, &:focus, &.prevMonthDay:focus, &.nextMonthDay:focus { cursor: pointer; --tw-outline-style: none; outline-style: none; } &:hover:not(.selected, .today, .inRange, .endRange), &:focus:not(.selected, .today, .inRange, .endRange), &.prevMonthDay:hover:not(.selected, .today, .inRange, .endRange), &.nextMonthDay:hover:not(.selected, .today, .inRange, .endRange), &.prevMonthDay:focus:not(.selected, .today, .inRange, .endRange), &.nextMonthDay:focus:not(.selected, .today, .inRange, .endRange) { border-color: transparent; background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } } &.selected, &.startRange, &.endRange, &.selected.inRange, &.startRange.inRange, &.endRange.inRange, &.selected:focus, &.startRange:focus, &.endRange:focus, &.selected:hover, &.startRange:hover, &.endRange:hover, &.selected.prevMonthDay, &.startRange.prevMonthDay, &.endRange.prevMonthDay, &.selected.nextMonthDay, &.startRange.nextMonthDay, &.endRange.nextMonthDay { border-color: transparent; background-color: var(--color-primary); color: var(--color-primary-content); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-shadow-color: var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent); } } &.inRange:not(.startRange):not(.endRange) { border-radius: 0; border-color: transparent; } z &.disabled, &.disabled:hover { pointer-events: none; border-color: transparent; background-color: transparent; color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } &.prevMonthDay, &.nextMonthDay, &.notAllowed, &.notAllowed.prevMonthDay, &.notAllowed.nextMonthDay { border-color: transparent; background-color: transparent; } &.week.selected { border-radius: 0; } &.selected.startRange, &.startRange.startRange, &.endRange.startRange { border-start-end-radius: 0; border-end-end-radius: 0; } &.selected.endRange, &.startRange.endRange, &.endRange.endRange { border-start-start-radius: 0; border-end-start-radius: 0; } &.flatpickr-disabled, &.flatpickr-disabled:hover, &.prevMonthDay, &.nextMonthDay, &.notAllowed, &.notAllowed.prevMonthDay, &.notAllowed.nextMonthDay { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } } .flatpickr-day.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.inRange:hover { background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 20%, transparent); } color: var(--color-primary); box-shadow: unset; } .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) { box-shadow: unset; } .kmkpx { & span.flatpickr-day, & span.flatpickr-day:hover { margin: calc(var(--spacing) * 0); display: flex; width: calc(var(--spacing) * 9.5); height: calc(var(--spacing) * 9.5); max-width: calc(var(--spacing) * 9.5); cursor: pointer; align-items: center; justify-content: center; text-align: center; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); color: var(--color-base-content); &:not(:last-child) { margin-bottom: calc(var(--spacing) * 0.5); } } & .flatpickr-weeks { padding-block: calc(var(--spacing) * 2); padding-inline-start: calc(var(--spacing) * 2.5); padding-inline-end: calc(var(--spacing) * 0); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } & .flatpickr-weekday { padding-inline-start: calc(var(--spacing) * 3); line-height: 28px; } } .flatpickr-calendar .flatpickr-innerContainer:has(> .kmkpx) { & > .flatpickr-rContainer .flatpickr-weekdays, & > .flatpickr-rContainer .flatpickr-days { padding-inline-start: calc(var(--spacing) * 0); } } .flatpickr-calendar.diy4h .flatpickr-time { height: 100%; border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } padding-inline: calc(var(--spacing) * 4.5); padding-block: calc(var(--spacing) * 3); } .flatpickr-time { max-height: unset; gap: calc(var(--spacing) * 2); --tw-leading: 30px; line-height: 30px; & .numInputWrapper { border-radius: var(--radius-field); height: inherit; } & input:hover, & .flatpickr-am-pm:hover, & input:focus, & .flatpickr-am-pm:focus { background: unset; } & .numInputWrapper span.arrowUp { top: 10%; } & .flatpickr-time-separator { color: var(--color-base-content); } } .flatpickr-time:after { content: none; } .flatpickr-calendar.diy4h.zsocc > .flatpickr-time { border-color: transparent; } .flatpickr-time input.flatpickr-hour { height: auto; border-radius: var(--radius-field); border-style: var(--tw-border-style); border-width: 1px; --tw-border-style: solid; border-style: solid; border-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-leading: inherit; line-height: inherit; --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); color: var(--color-base-content); } .flatpickr-time input.flatpickr-minute { height: auto; border-radius: var(--radius-field); border-style: var(--tw-border-style); border-width: 1px; --tw-border-style: solid; border-style: solid; border-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-leading: inherit; line-height: inherit; color: var(--color-base-content); } .flatpickr-time .flatpickr-am-pm { display: flex; align-items: center; justify-content: center; border-radius: var(--radius-field); border-style: var(--tw-border-style); border-width: 1px; border-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-leading: inherit; line-height: inherit; color: var(--color-base-content); } .numInputWrapper:hover, .numInputWrapper span:hover { background: unset; } .flatpickr-current-month .numInputWrapper span.arrowUp:after, .flatpickr-time .numInputWrapper span.arrowUp:after { border-bottom-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-bottom-color: color-mix(in oklab, var(--color-base-content) 80%, transparent); } } .flatpickr-current-month .numInputWrapper span.arrowDown:after, .flatpickr-time .numInputWrapper span.arrowDown:after { border-top-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-top-color: color-mix(in oklab, var(--color-base-content) 80%, transparent); } } .numInputWrapper span { border-style: var(--tw-border-style); border-width: 0px; } .flatpickr-calendar:not(.lrnp5):not(.open) { display: none; } .apexcharts-tooltip-series-group.apexcharts-active { padding-bottom: calc(var(--spacing) * 0) !important; } .apexcharts-tooltip.apexcharts-theme-light, .apexcharts-tooltip.apexcharts-theme-dark { --tw-border-style: none !important; border-style: none !important; background-color: var(--color-base-100) !important; --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)) !important; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important; } .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title, .apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title { border-color: var(--color-base-content) !important; @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent) !important; } background-color: var(--color-base-100) !important; } .apexcharts-tooltip-series-group.apexcharts-active { padding-bottom: calc(var(--spacing) * 0) !important; } .apexcharts-tooltip.apexcharts-theme-light, .apexcharts-tooltip.apexcharts-theme-dark { --tw-border-style: none !important; border-style: none !important; background-color: var(--color-base-100) !important; --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)) !important; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important; } .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title, .apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title { border-color: var(--color-base-content) !important; @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent) !important; } background-color: var(--color-base-100) !important; } .flatpickr-calendar { visibility: hidden; position: absolute; display: flex; max-width: calc(var(--spacing) * 72); touch-action: manipulation; flex-direction: row; gap: calc(var(--spacing) * 1.5); overflow: hidden; border-radius: var(--radius-box); border-color: transparent; background-color: var(--color-base-100); --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent); &.hasWeeks { max-width: 21rem; } &::after, &::before { content: none; } } .flatpickr-current-month { position: absolute; inset-inline-start: calc(var(--spacing) * 4); display: flex; width: auto; align-items: center; justify-content: center; gap: calc(var(--spacing) * 1); padding-top: calc(var(--spacing) * 0); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-base-content); &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { inset-inline-start: auto; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { inset-inline-end: calc(var(--spacing) * 4); } .flatpickr-monthDropdown-months, input.cur-year { display: flex; cursor: pointer; align-items: center; justify-content: center; border-radius: 0; border-style: var(--tw-border-style); border-width: 0px; vertical-align: middle; --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); --tw-outline-style: none; outline-style: none; font-size: inherit; font-family: inherit; line-height: inherit; color: inherit; } span.svyq9 { margin: calc(var(--spacing) * 0); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); &:hover { @media (hover: hover) { background-color: transparent; } } } .numInputWrapper { display: inline-block; width: 6ch; &:hover { @media (hover: hover) { background-color: transparent; } } } .flatpickr-monthDropdown-months { position: relative; margin-top: -1px; cursor: pointer; background-color: var(--color-base-100) !important; padding: calc(var(--spacing) * 0); } input.cur-year { margin: calc(var(--spacing) * 0); height: calc(var(--spacing) * 5); cursor: default; padding-inline-start: calc(var(--spacing) * 1); &:focus { --tw-outline-style: none; outline-style: none; } &[disabled], &[disabled]:hover { pointer-events: none; background-color: transparent; } } } .flatpickr-months { .flatpickr-month { position: relative; display: flex; height: calc(var(--spacing) * 15); align-items: center; overflow: hidden; border-top-left-radius: var(--radius-box); border-top-right-radius: var(--radius-box); padding-inline: calc(var(--spacing) * 4); text-align: center; -webkit-user-select: none; user-select: none; } .flatpickr-prev-month, .flatpickr-next-month { position: absolute; top: calc(var(--spacing) * 4); display: flex; width: calc(var(--spacing) * 7); height: calc(var(--spacing) * 7); align-items: center; justify-content: center; border-radius: calc(infinity * 1px); background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } padding: calc(var(--spacing) * 0); color: var(--color-base-content); text-decoration-line: none; &:hover { @media (hover: hover) { fill: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { fill: color-mix(in oklab, var(--color-base-content) 90%, transparent); } } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { rotate: 180deg; } svg { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); fill: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { fill: color-mix(in oklab, var(--color-base-content) 90%, transparent); } vertical-align: middle; color: var(--color-base-content); } } .flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { fill: color-mix(in oklab, var(--color-base-content) 90%, transparent); } } .flatpickr-prev-month { &.flatpickr-prev-month { inset-inline-start: auto; inset-inline-end: 50px; &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { inset-inline-start: calc(var(--spacing) * 14); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { inset-inline-end: auto; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { --tw-skew-x: skewX(calc(1deg * -1)); transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } } } .flatpickr-next-month { &.flatpickr-prev-month { inset-inline-start: calc(var(--spacing) * 0); inset-inline-end: calc(var(--spacing) * 0); } &.flatpickr-next-month { inset-inline-end: calc(var(--spacing) * 4); &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { inset-inline-start: calc(var(--spacing) * 4); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { inset-inline-end: auto; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { --tw-skew-x: skewX(calc(1deg * -1)); transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } } } } .flatpickr-weekdays { display: flex; width: 100%; align-items: center; overflow: hidden; padding-inline: calc(var(--spacing) * 3); text-align: center; } .flatpickr-weekdaycontainer { display: flex; width: 100%; } span.flatpickr-weekday, .kmkpx .flatpickr-weekday { margin: calc(var(--spacing) * 0); display: block; cursor: default; text-align: center; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-base-content); } .flatpickr-days { position: relative; display: flex; width: 100%; max-width: calc(var(--spacing) * 72); flex-wrap: wrap; overflow: hidden; padding-inline: calc(var(--spacing) * 2.5); padding-block: calc(var(--spacing) * 2); &:focus { --tw-outline-style: none; outline-style: none; } .flatpickr-calendar.diy4h & { border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-bottom-style: var(--tw-border-style); border-bottom-width: 0px; } & .dayContainer { display: flex; max-width: 100%; min-width: 100%; flex-wrap: wrap; justify-content: center; row-gap: calc(var(--spacing) * 0.5); padding: calc(var(--spacing) * 0); opacity: 100%; --tw-outline-style: none; outline-style: none; } } .flatpickr-day { position: relative; margin: calc(var(--spacing) * 0); display: flex; width: calc(var(--spacing) * 9.5); height: calc(var(--spacing) * 9.5); max-width: calc(var(--spacing) * 9.5); cursor: pointer; align-items: center; justify-content: center; text-align: center; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); color: var(--color-base-content); &.today:not(.selected) { border-color: transparent; background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 20%, transparent); } color: var(--color-primary); } &.inRange, &.prevMonthDay.inRange, &.nextMonthDay.inRange, &.today.inRange, &.prevMonthDay.today.inRange, &.nextMonthDay.today.inRange, &:hover, &.prevMonthDay:hover, &.nextMonthDay:hover, &:focus, &.prevMonthDay:focus, &.nextMonthDay:focus { cursor: pointer; --tw-outline-style: none; outline-style: none; } &:hover:not(.selected, .today, .inRange, .endRange), &:focus:not(.selected, .today, .inRange, .endRange), &.prevMonthDay:hover:not(.selected, .today, .inRange, .endRange), &.nextMonthDay:hover:not(.selected, .today, .inRange, .endRange), &.prevMonthDay:focus:not(.selected, .today, .inRange, .endRange), &.nextMonthDay:focus:not(.selected, .today, .inRange, .endRange) { border-color: transparent; background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } } &.selected, &.startRange, &.endRange, &.selected.inRange, &.startRange.inRange, &.endRange.inRange, &.selected:focus, &.startRange:focus, &.endRange:focus, &.selected:hover, &.startRange:hover, &.endRange:hover, &.selected.prevMonthDay, &.startRange.prevMonthDay, &.endRange.prevMonthDay, &.selected.nextMonthDay, &.startRange.nextMonthDay, &.endRange.nextMonthDay { border-color: transparent; background-color: var(--color-primary); color: var(--color-primary-content); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-shadow-color: var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent); } } &.inRange:not(.startRange):not(.endRange) { border-radius: 0; border-color: transparent; } z &.disabled, &.disabled:hover { pointer-events: none; border-color: transparent; background-color: transparent; color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } &.prevMonthDay, &.nextMonthDay, &.notAllowed, &.notAllowed.prevMonthDay, &.notAllowed.nextMonthDay { border-color: transparent; background-color: transparent; } &.week.selected { border-radius: 0; } &.selected.startRange, &.startRange.startRange, &.endRange.startRange { border-start-end-radius: 0; border-end-end-radius: 0; } &.selected.endRange, &.startRange.endRange, &.endRange.endRange { border-start-start-radius: 0; border-end-start-radius: 0; } &.flatpickr-disabled, &.flatpickr-disabled:hover, &.prevMonthDay, &.nextMonthDay, &.notAllowed, &.notAllowed.prevMonthDay, &.notAllowed.nextMonthDay { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } } .flatpickr-day.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.inRange:hover { background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 20%, transparent); } color: var(--color-primary); box-shadow: unset; } .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) { box-shadow: unset; } .kmkpx { & span.flatpickr-day, & span.flatpickr-day:hover { margin: calc(var(--spacing) * 0); display: flex; width: calc(var(--spacing) * 9.5); height: calc(var(--spacing) * 9.5); max-width: calc(var(--spacing) * 9.5); cursor: pointer; align-items: center; justify-content: center; text-align: center; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); color: var(--color-base-content); &:not(:last-child) { margin-bottom: calc(var(--spacing) * 0.5); } } & .flatpickr-weeks { padding-block: calc(var(--spacing) * 2); padding-inline-start: calc(var(--spacing) * 2.5); padding-inline-end: calc(var(--spacing) * 0); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } & .flatpickr-weekday { padding-inline-start: calc(var(--spacing) * 3); line-height: 28px; } } .flatpickr-calendar .flatpickr-innerContainer:has(> .kmkpx) { & > .flatpickr-rContainer .flatpickr-weekdays, & > .flatpickr-rContainer .flatpickr-days { padding-inline-start: calc(var(--spacing) * 0); } } .flatpickr-calendar.diy4h .flatpickr-time { height: 100%; border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } padding-inline: calc(var(--spacing) * 4.5); padding-block: calc(var(--spacing) * 3); } .flatpickr-time { max-height: unset; gap: calc(var(--spacing) * 2); --tw-leading: 30px; line-height: 30px; & .numInputWrapper { border-radius: var(--radius-field); height: inherit; } & input:hover, & .flatpickr-am-pm:hover, & input:focus, & .flatpickr-am-pm:focus { background: unset; } & .numInputWrapper span.arrowUp { top: 10%; } & .flatpickr-time-separator { color: var(--color-base-content); } } .flatpickr-time:after { content: none; } .flatpickr-calendar.diy4h.zsocc > .flatpickr-time { border-color: transparent; } .flatpickr-time input.flatpickr-hour { height: auto; border-radius: var(--radius-field); border-style: var(--tw-border-style); border-width: 1px; --tw-border-style: solid; border-style: solid; border-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-leading: inherit; line-height: inherit; --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); color: var(--color-base-content); } .flatpickr-time input.flatpickr-minute { height: auto; border-radius: var(--radius-field); border-style: var(--tw-border-style); border-width: 1px; --tw-border-style: solid; border-style: solid; border-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-leading: inherit; line-height: inherit; color: var(--color-base-content); } .flatpickr-time .flatpickr-am-pm { display: flex; align-items: center; justify-content: center; border-radius: var(--radius-field); border-style: var(--tw-border-style); border-width: 1px; border-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-leading: inherit; line-height: inherit; color: var(--color-base-content); } .numInputWrapper:hover, .numInputWrapper span:hover { background: unset; } .flatpickr-current-month .numInputWrapper span.arrowUp:after, .flatpickr-time .numInputWrapper span.arrowUp:after { border-bottom-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-bottom-color: color-mix(in oklab, var(--color-base-content) 80%, transparent); } } .flatpickr-current-month .numInputWrapper span.arrowDown:after, .flatpickr-time .numInputWrapper span.arrowDown:after { border-top-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-top-color: color-mix(in oklab, var(--color-base-content) 80%, transparent); } } .numInputWrapper span { border-style: var(--tw-border-style); border-width: 0px; } .flatpickr-calendar:not(.lrnp5):not(.open) { display: none; } @keyframes slideOut { 0% { transform: translateX(0); } 100% { transform: translateX(100%); } } #slide { animation: slideOut 4s forwards; animation-delay: 2s; } @keyframes draw { to { stroke-dashoffset: 0; } } @keyframes fadeIn { from { fill-opacity: 0; } to { fill-opacity: 1; } } .uj389 { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw 5s ease-in-out forwards, fadeIn 5s ease-in-out forwards; } .dot { position: absolute; border-radius: 50%; opacity: 0.7; animation: moveDots linear infinite; } @keyframes moveDots { 0% { transform: translate(0, 0); } 100% { transform: translate(var(--move-x), var(--move-y)); } } .glaxa { .l6pa0 { fill: none; stroke-dasharray: 400; stroke-dashoffset: 400; animation-duration: 2s; animation-fill-mode: forwards; animation-name: draw; animation-iteration-count: infinite; &.zzk42 { animation-delay: 0.2s infinite; } &.goapi { animation-delay: 0.5s infinite; } } } @keyframes draw { 0% { stroke-dashoffset: 400; } 50% { stroke-dashoffset: 10; } 100% { stroke-dashoffset: 400; } } .flatpickr-calendar { visibility: hidden; position: absolute; display: flex; max-width: calc(var(--spacing) * 72); touch-action: manipulation; flex-direction: row; gap: calc(var(--spacing) * 1.5); overflow: hidden; border-radius: var(--radius-box); border-color: transparent; background-color: var(--color-base-100); --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent); &.hasWeeks { max-width: 21rem; } &::after, &::before { content: none; } } .flatpickr-current-month { position: absolute; inset-inline-start: calc(var(--spacing) * 4); display: flex; width: auto; align-items: center; justify-content: center; gap: calc(var(--spacing) * 1); padding-top: calc(var(--spacing) * 0); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-base-content); &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { inset-inline-start: auto; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { inset-inline-end: calc(var(--spacing) * 4); } .flatpickr-monthDropdown-months, input.cur-year { display: flex; cursor: pointer; align-items: center; justify-content: center; border-radius: 0; border-style: var(--tw-border-style); border-width: 0px; vertical-align: middle; --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); --tw-outline-style: none; outline-style: none; font-size: inherit; font-family: inherit; line-height: inherit; color: inherit; } span.svyq9 { margin: calc(var(--spacing) * 0); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); &:hover { @media (hover: hover) { background-color: transparent; } } } .numInputWrapper { display: inline-block; width: 6ch; &:hover { @media (hover: hover) { background-color: transparent; } } } .flatpickr-monthDropdown-months { position: relative; margin-top: -1px; cursor: pointer; background-color: var(--color-base-100) !important; padding: calc(var(--spacing) * 0); } input.cur-year { margin: calc(var(--spacing) * 0); height: calc(var(--spacing) * 5); cursor: default; padding-inline-start: calc(var(--spacing) * 1); &:focus { --tw-outline-style: none; outline-style: none; } &[disabled], &[disabled]:hover { pointer-events: none; background-color: transparent; } } } .flatpickr-months { .flatpickr-month { position: relative; display: flex; height: calc(var(--spacing) * 15); align-items: center; overflow: hidden; border-top-left-radius: var(--radius-box); border-top-right-radius: var(--radius-box); padding-inline: calc(var(--spacing) * 4); text-align: center; -webkit-user-select: none; user-select: none; } .flatpickr-prev-month, .flatpickr-next-month { position: absolute; top: calc(var(--spacing) * 4); display: flex; width: calc(var(--spacing) * 7); height: calc(var(--spacing) * 7); align-items: center; justify-content: center; border-radius: calc(infinity * 1px); background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } padding: calc(var(--spacing) * 0); color: var(--color-base-content); text-decoration-line: none; &:hover { @media (hover: hover) { fill: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { fill: color-mix(in oklab, var(--color-base-content) 90%, transparent); } } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { rotate: 180deg; } svg { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); fill: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { fill: color-mix(in oklab, var(--color-base-content) 90%, transparent); } vertical-align: middle; color: var(--color-base-content); } } .flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { fill: color-mix(in oklab, var(--color-base-content) 90%, transparent); } } .flatpickr-prev-month { &.flatpickr-prev-month { inset-inline-start: auto; inset-inline-end: 50px; &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { inset-inline-start: calc(var(--spacing) * 14); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { inset-inline-end: auto; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { --tw-skew-x: skewX(calc(1deg * -1)); transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } } } .flatpickr-next-month { &.flatpickr-prev-month { inset-inline-start: calc(var(--spacing) * 0); inset-inline-end: calc(var(--spacing) * 0); } &.flatpickr-next-month { inset-inline-end: calc(var(--spacing) * 4); &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { inset-inline-start: calc(var(--spacing) * 4); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { inset-inline-end: auto; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { --tw-skew-x: skewX(calc(1deg * -1)); transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } } } } .flatpickr-weekdays { display: flex; width: 100%; align-items: center; overflow: hidden; padding-inline: calc(var(--spacing) * 3); text-align: center; } .flatpickr-weekdaycontainer { display: flex; width: 100%; } span.flatpickr-weekday, .kmkpx .flatpickr-weekday { margin: calc(var(--spacing) * 0); display: block; cursor: default; text-align: center; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-base-content); } .flatpickr-days { position: relative; display: flex; width: 100%; max-width: calc(var(--spacing) * 72); flex-wrap: wrap; overflow: hidden; padding-inline: calc(var(--spacing) * 2.5); padding-block: calc(var(--spacing) * 2); &:focus { --tw-outline-style: none; outline-style: none; } .flatpickr-calendar.diy4h & { border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-bottom-style: var(--tw-border-style); border-bottom-width: 0px; } & .dayContainer { display: flex; max-width: 100%; min-width: 100%; flex-wrap: wrap; justify-content: center; row-gap: calc(var(--spacing) * 0.5); padding: calc(var(--spacing) * 0); opacity: 100%; --tw-outline-style: none; outline-style: none; } } .flatpickr-day { position: relative; margin: calc(var(--spacing) * 0); display: flex; width: calc(var(--spacing) * 9.5); height: calc(var(--spacing) * 9.5); max-width: calc(var(--spacing) * 9.5); cursor: pointer; align-items: center; justify-content: center; text-align: center; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); color: var(--color-base-content); &.today:not(.selected) { border-color: transparent; background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 20%, transparent); } color: var(--color-primary); } &.inRange, &.prevMonthDay.inRange, &.nextMonthDay.inRange, &.today.inRange, &.prevMonthDay.today.inRange, &.nextMonthDay.today.inRange, &:hover, &.prevMonthDay:hover, &.nextMonthDay:hover, &:focus, &.prevMonthDay:focus, &.nextMonthDay:focus { cursor: pointer; --tw-outline-style: none; outline-style: none; } &:hover:not(.selected, .today, .inRange, .endRange), &:focus:not(.selected, .today, .inRange, .endRange), &.prevMonthDay:hover:not(.selected, .today, .inRange, .endRange), &.nextMonthDay:hover:not(.selected, .today, .inRange, .endRange), &.prevMonthDay:focus:not(.selected, .today, .inRange, .endRange), &.nextMonthDay:focus:not(.selected, .today, .inRange, .endRange) { border-color: transparent; background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } } &.selected, &.startRange, &.endRange, &.selected.inRange, &.startRange.inRange, &.endRange.inRange, &.selected:focus, &.startRange:focus, &.endRange:focus, &.selected:hover, &.startRange:hover, &.endRange:hover, &.selected.prevMonthDay, &.startRange.prevMonthDay, &.endRange.prevMonthDay, &.selected.nextMonthDay, &.startRange.nextMonthDay, &.endRange.nextMonthDay { border-color: transparent; background-color: var(--color-primary); color: var(--color-primary-content); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-shadow-color: var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent); } } &.inRange:not(.startRange):not(.endRange) { border-radius: 0; border-color: transparent; } z &.disabled, &.disabled:hover { pointer-events: none; border-color: transparent; background-color: transparent; color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } &.prevMonthDay, &.nextMonthDay, &.notAllowed, &.notAllowed.prevMonthDay, &.notAllowed.nextMonthDay { border-color: transparent; background-color: transparent; } &.week.selected { border-radius: 0; } &.selected.startRange, &.startRange.startRange, &.endRange.startRange { border-start-end-radius: 0; border-end-end-radius: 0; } &.selected.endRange, &.startRange.endRange, &.endRange.endRange { border-start-start-radius: 0; border-end-start-radius: 0; } &.flatpickr-disabled, &.flatpickr-disabled:hover, &.prevMonthDay, &.nextMonthDay, &.notAllowed, &.notAllowed.prevMonthDay, &.notAllowed.nextMonthDay { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } } .flatpickr-day.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.inRange:hover { background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 20%, transparent); } color: var(--color-primary); box-shadow: unset; } .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) { box-shadow: unset; } .kmkpx { & span.flatpickr-day, & span.flatpickr-day:hover { margin: calc(var(--spacing) * 0); display: flex; width: calc(var(--spacing) * 9.5); height: calc(var(--spacing) * 9.5); max-width: calc(var(--spacing) * 9.5); cursor: pointer; align-items: center; justify-content: center; text-align: center; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); color: var(--color-base-content); &:not(:last-child) { margin-bottom: calc(var(--spacing) * 0.5); } } & .flatpickr-weeks { padding-block: calc(var(--spacing) * 2); padding-inline-start: calc(var(--spacing) * 2.5); padding-inline-end: calc(var(--spacing) * 0); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } & .flatpickr-weekday { padding-inline-start: calc(var(--spacing) * 3); line-height: 28px; } } .flatpickr-calendar .flatpickr-innerContainer:has(> .kmkpx) { & > .flatpickr-rContainer .flatpickr-weekdays, & > .flatpickr-rContainer .flatpickr-days { padding-inline-start: calc(var(--spacing) * 0); } } .flatpickr-calendar.diy4h .flatpickr-time { height: 100%; border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } padding-inline: calc(var(--spacing) * 4.5); padding-block: calc(var(--spacing) * 3); } .flatpickr-time { max-height: unset; gap: calc(var(--spacing) * 2); --tw-leading: 30px; line-height: 30px; & .numInputWrapper { border-radius: var(--radius-field); height: inherit; } & input:hover, & .flatpickr-am-pm:hover, & input:focus, & .flatpickr-am-pm:focus { background: unset; } & .numInputWrapper span.arrowUp { top: 10%; } & .flatpickr-time-separator { color: var(--color-base-content); } } .flatpickr-time:after { content: none; } .flatpickr-calendar.diy4h.zsocc > .flatpickr-time { border-color: transparent; } .flatpickr-time input.flatpickr-hour { height: auto; border-radius: var(--radius-field); border-style: var(--tw-border-style); border-width: 1px; --tw-border-style: solid; border-style: solid; border-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-leading: inherit; line-height: inherit; --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); color: var(--color-base-content); } .flatpickr-time input.flatpickr-minute { height: auto; border-radius: var(--radius-field); border-style: var(--tw-border-style); border-width: 1px; --tw-border-style: solid; border-style: solid; border-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-leading: inherit; line-height: inherit; color: var(--color-base-content); } .flatpickr-time .flatpickr-am-pm { display: flex; align-items: center; justify-content: center; border-radius: var(--radius-field); border-style: var(--tw-border-style); border-width: 1px; border-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-leading: inherit; line-height: inherit; color: var(--color-base-content); } .numInputWrapper:hover, .numInputWrapper span:hover { background: unset; } .flatpickr-current-month .numInputWrapper span.arrowUp:after, .flatpickr-time .numInputWrapper span.arrowUp:after { border-bottom-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-bottom-color: color-mix(in oklab, var(--color-base-content) 80%, transparent); } } .flatpickr-current-month .numInputWrapper span.arrowDown:after, .flatpickr-time .numInputWrapper span.arrowDown:after { border-top-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-top-color: color-mix(in oklab, var(--color-base-content) 80%, transparent); } } .numInputWrapper span { border-style: var(--tw-border-style); border-width: 0px; } .flatpickr-calendar:not(.lrnp5):not(.open) { display: none; } @keyframes rating-jump { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-0.3em) scale(1.1); } } .raty-jump { animation: rating-jump 0.5s ease-in-out; } .raty-cancel { margin-inline-start: calc(var(--spacing) * 2); } .cancel-off-png { color: var(--color-error); } .kwo92:before { content: "\f005"; opacity: 0.2; } .dg3le { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: rotate-clockwise 30s linear infinite; } .o48ti { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(var(--angle)); } .k6h1g { animation-direction: reverse; } .feavc .o48ti:not(.p9j9y) { transform: translate(-50%, -50%) rotate(var(--angle)) translate(0, -150px); } .feavc .o48ti.p9j9y { transform: translate(-50%, -50%) rotate(var(--angle)) translate(0, -85px); } .mrcoi { .feavc .o48ti:not(.p9j9y) { transform: translate(-50%, -50%) rotate(var(--angle)) translate(0, -227px); } .feavc .o48ti.p9j9y { transform: translate(-50%, -50%) rotate(var(--angle)) translate(0, -119px); } } .x44n4 { animation: rotate-counterclockwise 30s linear infinite; } .p9j9y .x44n4 { animation: rotate-clockwise 30s linear infinite; } @layer base { :where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light] { color-scheme: light; --color-base-100: oklch(100% 0 0); --color-base-200: oklch(97.8% 0.005 297.73); --color-base-300: oklch(37.01% 0.0069 297.49); --color-base-content: oklch(37.57% 0.022 281.8); --color-primary: oklch(57.59% 0.247 287.24); --color-primary-content: oklch(96.57% 0.017 289.61); --color-secondary: oklch(55.79% 0.022 301.91); --color-secondary-content: oklch(97.64% 0.001 286.38); --color-accent: oklch(62.31% 0.188 259.81); --color-accent-content: oklch(97.05% 0.014 254.6); --color-neutral: oklch(37.57% 0.0222 281.8); --color-neutral-content: oklch(0.98 0.0013 286.38); --color-info: oklch(71.48% 0.126 215.22); --color-info-content: oklch(98.41% 0.019 200.87); --color-success: oklch(73.11% 0.217 147.04); --color-success-content: oklch(98.1% 0.014 174.18); --color-warning: oklch(79.87% 0.164 73.09); --color-warning-content: oklch(99.34% 0.011 95.16); --color-error: oklch(65.39% 0.222 25.86); --color-error-content: oklch(98.76% 0.009 67.73); --radius-selector: 0.25rem; --radius-field: 0.375rem; --radius-box: 0.5rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 0; --noise: 0; } } @layer base { @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --color-base-100: oklch(31.23% 0.026 301.24); --color-base-200: oklch(25.39% 0.025 298.72); --color-base-300: oklch(23.44% 0.0194 298.63); --color-base-content: oklch(84.98% 0.014 295.28); --color-primary: oklch(53.93% 0.271 286.75); --color-primary-content: oklch(88.22% 0.062 290.17); --color-secondary: oklch(49.12% 0.021 303.05); --color-secondary-content: oklch(88.83% 0.007 304.23); --color-accent: oklch(54.61% 0.215 262.88); --color-accent-content: oklch(88.23% 0.057 254.13); --color-neutral: oklch(65.75% 0.022 294.95); --color-neutral-content: oklch(18.51% 0.017 301.92); --color-info: oklch(60.89% 0.111 221.72); --color-info-content: oklch(91.67% 0.077 205.04); --color-success: oklch(67.35% 0.201 146.84); --color-success-content: oklch(91.38% 0.069 168.24); --color-warning: oklch(72.59% 0.152 69.05); --color-warning-content: oklch(96.07% 0.057 93.2); --color-error: oklch(59.54% 0.208 26.28); --color-error-content: oklch(93.4% 0.039 54.86); --radius-selector: 0.25rem; --radius-field: 0.375rem; --radius-box: 0.5rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 0; --noise: 0; } } } @layer base { :root:has(input.theme-controller[value=light]:checked),[data-theme=light] { color-scheme: light; --color-base-100: oklch(100% 0 0); --color-base-200: oklch(97.8% 0.005 297.73); --color-base-300: oklch(37.01% 0.0069 297.49); --color-base-content: oklch(37.57% 0.022 281.8); --color-primary: oklch(57.59% 0.247 287.24); --color-primary-content: oklch(96.57% 0.017 289.61); --color-secondary: oklch(55.79% 0.022 301.91); --color-secondary-content: oklch(97.64% 0.001 286.38); --color-accent: oklch(62.31% 0.188 259.81); --color-accent-content: oklch(97.05% 0.014 254.6); --color-neutral: oklch(37.57% 0.0222 281.8); --color-neutral-content: oklch(0.98 0.0013 286.38); --color-info: oklch(71.48% 0.126 215.22); --color-info-content: oklch(98.41% 0.019 200.87); --color-success: oklch(73.11% 0.217 147.04); --color-success-content: oklch(98.1% 0.014 174.18); --color-warning: oklch(79.87% 0.164 73.09); --color-warning-content: oklch(99.34% 0.011 95.16); --color-error: oklch(65.39% 0.222 25.86); --color-error-content: oklch(98.76% 0.009 67.73); --radius-selector: 0.25rem; --radius-field: 0.375rem; --radius-box: 0.5rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 0; --noise: 0; } } @layer base { :root:has(input.theme-controller[value=dark]:checked),[data-theme=dark] { color-scheme: dark; --color-base-100: oklch(31.23% 0.026 301.24); --color-base-200: oklch(25.39% 0.025 298.72); --color-base-300: oklch(23.44% 0.0194 298.63); --color-base-content: oklch(84.98% 0.014 295.28); --color-primary: oklch(53.93% 0.271 286.75); --color-primary-content: oklch(88.22% 0.062 290.17); --color-secondary: oklch(49.12% 0.021 303.05); --color-secondary-content: oklch(88.83% 0.007 304.23); --color-accent: oklch(54.61% 0.215 262.88); --color-accent-content: oklch(88.23% 0.057 254.13); --color-neutral: oklch(65.75% 0.022 294.95); --color-neutral-content: oklch(18.51% 0.017 301.92); --color-info: oklch(60.89% 0.111 221.72); --color-info-content: oklch(91.67% 0.077 205.04); --color-success: oklch(67.35% 0.201 146.84); --color-success-content: oklch(91.38% 0.069 168.24); --color-warning: oklch(72.59% 0.152 69.05); --color-warning-content: oklch(96.07% 0.057 93.2); --color-error: oklch(59.54% 0.208 26.28); --color-error-content: oklch(93.4% 0.039 54.86); --radius-selector: 0.25rem; --radius-field: 0.375rem; --radius-box: 0.5rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 0; --noise: 0; } } @layer base { :root:has(input.theme-controller[value=black]:checked),[data-theme=black] { color-scheme: dark; --color-base-100: oklch(23.2% 0.006 285.95); --color-base-200: oklch(14% 0.005 285.823); --color-base-300: oklch(14% 0 0); --color-base-content: oklch(96% 0.001 286.375); --color-primary: oklch(58% 0.233 277.117); --color-primary-content: oklch(98% 0.022 95.277); --color-secondary: oklch(60% 0.118 184.704); --color-secondary-content: oklch(98% 0.014 180.72); --color-accent: oklch(0.51 0.27 271.36); --color-accent-content: oklch(100% 0 0); --color-neutral: oklch(98% 0 0); --color-neutral-content: oklch(37% 0.044 257.287); --color-info: oklch(58% 0.158 241.966); --color-info-content: oklch(97% 0.013 236.62); --color-success: oklch(64% 0.2 131.684); --color-success-content: oklch(98% 0.031 120.757); --color-warning: oklch(55% 0.163 48.998); --color-warning-content: oklch(98% 0.026 102.212); --color-error: oklch(63% 0.237 25.331); --color-error-content: oklch(97% 0.013 17.38); --radius-selector: 2rem; --radius-field: 0.25rem; --radius-box: 0.5rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 2px; --depth: 1; --noise: 0; } } @layer base { :root:has(input.theme-controller[value=claude]:checked),[data-theme=claude] { color-scheme: "light"; --color-base-100: oklch(98% 0.01 93.48); --color-base-200: oklch(94.95% 0.01 87.47); --color-base-300: oklch(0.8685 0.0109 100.85); --color-base-content: oklch(34% 0.03 94.42); --color-primary: oklch(62% 0.14 39.15); --color-primary-content: oklch(100% 0 0); --color-secondary: oklch(69% 0.16 290.41); --color-secondary-content: oklch(14% 0 0); --color-accent: oklch(42.621% 0.074 224.389); --color-accent-content: oklch(88.524% 0.014 224.389); --color-neutral: oklch(20% 0 0); --color-neutral-content: oklch(98% 0 0); --color-info: oklch(56% 0.13 42.95); --color-info-content: oklch(100% 0 0); --color-success: oklch(60% 0.1 120.29); --color-success-content: oklch(100% 0 0); --color-warning: oklch(85% 0.12 80.65); --color-warning-content: oklch(0% 0 0); --color-error: oklch(64% 0.25 19.69); --color-error-content: oklch(100% 0 0); --radius-selector: 1rem; --radius-field: 1rem; --radius-box: 1rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; } } @layer base { :root:has(input.theme-controller[value=corporate]:checked),[data-theme=corporate] { color-scheme: light; --color-base-100: oklch(99.43% 0.001 286.38); --color-base-200: oklch(97.33% 0.008 271.33); --color-base-300: oklch(48.52% 0.0225 279.09); --color-base-content: oklch(42.06% 0.049 276.53); --color-primary: oklch(62.31% 0.188 259.81); --color-primary-content: oklch(97.05% 0.014 254.6); --color-secondary: oklch(55.79% 0.022 301.91); --color-secondary-content: oklch(95.05% 0.003 308.43); --color-accent: oklch(65.59% 0.212 354.31); --color-accent-content: oklch(97.14% 0.014 343.2); --color-neutral: oklch(0.447 0.0732 274.26); --color-neutral-content: oklch(82.15% 0.055 277.12); --color-info: oklch(70.38% 0.123 182.5); --color-info-content: oklch(98.36% 0.014 180.72); --color-success: oklch(76.81% 0.204 130.85); --color-success-content: oklch(98.57% 0.031 120.76); --color-warning: oklch(79.52% 0.162 86.05); --color-warning-content: oklch(98.73% 0.026 102.21); --color-error: oklch(64.5% 0.215 16.44); --color-error-content: oklch(96.94% 0.015 12.42); --radius-selector: 0.125rem; --radius-field: 0.25rem; --radius-box: 0.375rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; } } @layer base { :root:has(input.theme-controller[value=ghibli]:checked),[data-theme=ghibli] { color-scheme: light; --color-base-100: oklch(0.94 0.0262 82.38); --color-base-200: oklch(0.91 0.0326 80.99); --color-base-300: oklch(0.34 0.0131 81.73 / 20%); --color-base-content: oklch(41% 0.077 79.04); --color-primary: oklch(0.62 0.0868 111.8); --color-primary-content: oklch(97% 0.009 106.57); --color-secondary: oklch(44% 0.043 257.281); --color-secondary-content: oklch(92% 0.013 255.508); --color-accent: oklch(70% 0.14 182.503); --color-accent-content: oklch(98% 0.014 180.72); --color-neutral: oklch(41% 0.025 282.21); --color-neutral-content: oklch(98% 0.001 286.38); --color-info: oklch(62% 0.214 259.815); --color-info-content: oklch(97% 0.014 254.604); --color-success: oklch(64% 0.2 131.684); --color-success-content: oklch(98% 0.031 120.757); --color-warning: oklch(68% 0.162 75.834); --color-warning-content: oklch(28% 0.066 53.813); --color-error: oklch(63% 0.237 25.331); --color-error-content: oklch(97% 0.013 17.38); --radius-selector: 0.25rem; --radius-field: 1rem; --radius-box: 2rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 0; --noise: 0; } } @layer base { :root:has(input.theme-controller[value=gourmet]:checked),[data-theme=gourmet] { color-scheme: light; --color-base-100: oklch(99.45% 0.002 67.8); --color-base-200: oklch(98.19% 0.008 61.46); --color-base-300: oklch(47% 0.0131 54.28); --color-base-content: oklch(32.38% 0.009 67.5); --color-primary: oklch(70.49% 0.187 47.6); --color-primary-content: oklch(97.96% 0.016 73.68); --color-secondary: oklch(55.79% 0.022 301.91); --color-secondary-content: oklch(95.05% 0.003 308.43); --color-accent: oklch(65.59% 0.212 354.31); --color-accent-content: oklch(97.14% 0.014 343.2); --color-neutral: oklch(32.38% 0.009 67.5); --color-neutral-content: oklch(99.45% 0.002 67.8); --color-info: oklch(68.47% 0.148 237.32); --color-info-content: oklch(97.71% 0.012 236.62); --color-success: oklch(69.59% 0.149 162.48); --color-success-content: oklch(97.93% 0.021 166.11); --color-warning: oklch(57.59% 0.247 287.24); --color-warning-content: oklch(96.57% 0.017 289.61); --color-error: oklch(65.39% 0.222 25.86); --color-error-content: oklch(98.76% 0.009 67.73); --radius-selector: 2rem; --radius-field: 2rem; --radius-box: 0.75rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; } } @layer base { :root:has(input.theme-controller[value=luxury]:checked),[data-theme=luxury] { color-scheme: dark; --color-base-100: oklch(24.97% 0.0235 60.71); --color-base-200: oklch(20.19% 0.0212 56.18); --color-base-300: oklch(13.67% 0.0208 68.4); --color-base-content: oklch(89.79% 0.0323 68.91); --color-primary: oklch(68.75% 0.0948 67.23); --color-primary-content: oklch(92.24% 0.0235 69.59); --color-secondary: oklch(55.79% 0.0221 301.91); --color-secondary-content: oklch(97.64% 0.0013 286.38); --color-accent: oklch(64.45% 0.1596 354.64); --color-accent-content: oklch(89.57% 0.0416 348.79); --color-neutral: oklch(0.51 0.0449 70.29); --color-neutral-content: oklch(16.74% 0.0325 59.58); --color-info: oklch(55.75% 0.0746 234.15); --color-info-content: oklch(87.94% 0.0196 230.73); --color-success: oklch(52.65% 0.0537 188.98); --color-success-content: oklch(84.44% 0.0185 192.54); --color-warning: oklch(57.37% 0.149 296.3); --color-warning-content: oklch(88.26% 0.0392 300.25); --color-error: oklch(50.81% 0.097 4.98); --color-error-content: oklch(87.99% 0.021 358.74); --radius-selector: 0.1875rem; --radius-field: 0.375rem; --radius-box: 0.5625rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; } } @layer base { :root:has(input.theme-controller[value=mintlify]:checked),[data-theme=mintlify] { color-scheme: light; --color-base-100: oklch(98.69% 0.007 145.52); --color-base-200: oklch(95.89% 0.019 145.43); --color-base-300: oklch(48.75% 0.0326 146.64); --color-base-content: oklch(21% 0.006 56.043); --color-primary: oklch(62% 0.194 149.214); --color-primary-content: oklch(98% 0.018 155.826); --color-secondary: oklch(84.42% 0.172 84.934); --color-secondary-content: oklch(47% 0.137 46.201); --color-accent: oklch(55% 0.016 285.938); --color-accent-content: oklch(98% 0 0); --color-neutral: oklch(26% 0.007 34.298); --color-neutral-content: oklch(97% 0.001 106.424); --color-info: oklch(65.52% 0.111 212.17); --color-info-content: oklch(39% 0.07 227.392); --color-success: oklch(64.01% 0.175 146.74); --color-success-content: oklch(26% 0.065 152.934); --color-warning: oklch(77.03% 0.174 64.05); --color-warning-content: oklch(47% 0.137 46.201); --color-error: oklch(59.15% 0.202 21.24); --color-error-content: oklch(97% 0.014 343.198); --radius-selector: 2rem; --radius-field: 1rem; --radius-box: 0.5rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; } } @layer base { :root:has(input.theme-controller[value=pastel]:checked),[data-theme=pastel] { color-scheme: "dark"; --color-base-100: oklch(0.28 0.0292 308.75); --color-base-200: oklch(0.2182 0.0098 52.95); --color-base-300: oklch(0.3467 0.0053 301.25); --color-base-content: oklch(98% 0.003 247.858); --color-primary: oklch(79% 0.12 295.97); --color-primary-content: oklch(100% 0 0); --color-secondary: oklch(91% 0.05 306.07); --color-secondary-content: oklch(45% 0.03 257.68); --color-accent: oklch(72% 0.2 210); --color-accent-content: oklch(37% 0.03 259.73); --color-neutral: oklch(1 0 0); --color-neutral-content: oklch(14% 0.004 49.25); --color-info: oklch(50% 0.25 255.25); --color-info-content: oklch(100% 0 0); --color-success: oklch(69% 0.17 162.48); --color-success-content: oklch(100% 0 0); --color-warning: oklch(79% 0.184 86.047); --color-warning-content: oklch(0% 0 0); --color-error: oklch(64% 0.246 16.439); --color-error-content: oklch(100% 0 0); --radius-selector: 2rem; --radius-field: 2rem; --radius-box: 2rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; } } @layer base { :root:has(input.theme-controller[value=perplexity]:checked),[data-theme=perplexity] { color-scheme: "light"; --color-base-100: oklch(95.36% 0.011 196.98); --color-base-200: oklch(0.9393 0.0096 196.99); --color-base-300: oklch(85.94% 0.009 258.34); --color-base-content: oklch(23.72% 0.034 208.26); --color-primary: oklch(72% 0.12 210.36); --color-primary-content: oklch(100% 0 0); --color-secondary: oklch(66.11% 0.123 228.63); --color-secondary-content: oklch(98% 0 0); --color-accent: oklch(67% 0.182 276.935); --color-accent-content: oklch(25% 0.09 281.288); --color-neutral: oklch(14% 0 0); --color-neutral-content: oklch(100% 0 0); --color-info: oklch(58% 0.1 218.29); --color-info-content: oklch(100% 0 0); --color-success: oklch(73% 0.14 118.63); --color-success-content: oklch(100% 0 0); --color-warning: oklch(85% 0.16 72.74); --color-warning-content: oklch(0% 0 0); --color-error: oklch(64% 0.21 25.39); --color-error-content: oklch(100% 0 0); --radius-selector: 1rem; --radius-field: 1rem; --radius-box: 1rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; } } @layer base { :root:has(input.theme-controller[value=shadcn]:checked),[data-theme=shadcn] { color-scheme: light; --color-base-100: oklch(100% 0 0); --color-base-200: oklch(96.74% 0.0013 286.38); --color-base-300: oklch(0% 0 0); --color-base-content: oklch(21.03% 0.0059 285.89); --color-primary: oklch(27.39% 0.0055 286.03); --color-primary-content: oklch(98.51% 0 0); --color-secondary: oklch(55.79% 0.0221 301.91); --color-secondary-content: oklch(97.64% 0.0013 286.38); --color-accent: oklch(62.31% 0.188 259.81); --color-accent-content: oklch(97.05% 0.0142 254.6); --color-neutral: oklch(40.66% 0.0251 282.21); --color-neutral-content: oklch(97.64% 0.0013 286.38); --color-info: oklch(71.48% 0.1257 215.22); --color-info-content: oklch(98.41% 0.0189 200.87); --color-success: oklch(69.59% 0.1491 162.48); --color-success-content: oklch(97.93% 0.0207 166.11); --color-warning: oklch(70.49% 0.1867 47.6); --color-warning-content: oklch(97.96% 0.0158 73.68); --color-error: oklch(65.39% 0.2221 25.86); --color-error-content: oklch(98.76% 0.0085 67.73); --radius-selector: 0.125rem; --radius-field: 0.25rem; --radius-box: 0.375rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; } } @layer base { :root:has(input.theme-controller[value=slack]:checked),[data-theme=slack] { color-scheme: light; --color-base-100: oklch(97.31% 0 0); --color-base-200: oklch(93.7% 0 0); --color-base-300: oklch(38.87% 0.0052 301.28); --color-base-content: oklch(21% 0.006 56.043); --color-primary: oklch(30.65% 0.108 327.06); --color-primary-content: oklch(97% 0.014 254.604); --color-secondary: oklch(0% 0 0); --color-secondary-content: oklch(100% 0 0); --color-accent: oklch(55% 0.016 285.938); --color-accent-content: oklch(98% 0 0); --color-neutral: oklch(14% 0.004 49.25); --color-neutral-content: oklch(98% 0.001 106.423); --color-info: oklch(76.8% 0.131 223.2); --color-info-content: oklch(45% 0.085 224.283); --color-success: oklch(69.11% 0.142 160.24); --color-success-content: oklch(39% 0.095 152.535); --color-warning: oklch(79.66% 0.152 82.65); --color-warning-content: oklch(47% 0.137 46.201); --color-error: oklch(58.8% 0.222 11.49); --color-error-content: oklch(97% 0.014 343.198); --radius-selector: 2rem; --radius-field: 0.25rem; --radius-box: 0.5rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; } } @layer base { :root:has(input.theme-controller[value=soft]:checked),[data-theme=soft] { color-scheme: light; --color-base-100: oklch(98.8% 0.0069 304.24); --color-base-200: oklch(96.95% 0.0114 308.33); --color-base-300: oklch(40.47% 0.0142 308.07); --color-base-content: oklch(32.61% 0.0705 305.29); --color-primary: oklch(62.68% 0.2325 303.9); --color-primary-content: oklch(97.68% 0.0142 308.3); --color-secondary: oklch(55.79% 0.0221 301.91); --color-secondary-content: oklch(97.64% 0.0013 286.38); --color-accent: oklch(62.31% 0.188 259.81); --color-accent-content: oklch(97.05% 0.0142 254.6); --color-neutral: oklch(32.61% 0.0705 305.29); --color-neutral-content: oklch(99.54% 0.0028 308.43); --color-info: oklch(71.48% 0.1257 215.22); --color-info-content: oklch(98.41% 0.0189 200.87); --color-success: oklch(69.59% 0.1491 162.48); --color-success-content: oklch(97.93% 0.0207 166.11); --color-warning: oklch(70.49% 0.1867 47.6); --color-warning-content: oklch(97.96% 0.0158 73.68); --color-error: oklch(65.39% 0.2221 25.86); --color-error-content: oklch(98.76% 0.0085 67.73); --radius-selector: 0.5rem; --radius-field: 0.75rem; --radius-box: 1rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; } } @layer base { :root:has(input.theme-controller[value=spotify]:checked),[data-theme=spotify] { color-scheme: "dark"; --color-base-100: oklch(0.1964 0.0168 268.77); --color-base-200: oklch(9.3% 0.007 145); --color-base-300: oklch(55% 0.046 257.417); --color-base-content: oklch(98% 0.003 247.858); --color-primary: oklch(70% 0.18 153.85); --color-primary-content: oklch(1 0 0); --color-secondary: oklch(98% 0.031 120.757); --color-secondary-content: oklch(27% 0.072 132.109); --color-accent: oklch(45% 0.05 250.05); --color-accent-content: oklch(95% 0.01 238.46); --color-neutral: oklch(1 0 0); --color-neutral-content: oklch(14% 0 0); --color-info: oklch(60% 0.1 269.83); --color-info-content: oklch(95% 0.01 238.46); --color-success: oklch(72% 0.12 201.79); --color-success-content: oklch(95% 0.01 238.46); --color-warning: oklch(80% 0.1 100.65); --color-warning-content: oklch(0% 0 0); --color-error: oklch(64% 0.25 19.69); --color-error-content: oklch(95% 0.01 238.46); --radius-selector: 1rem; --radius-field: 1rem; --radius-box: 1rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; } } @layer base { :root:has(input.theme-controller[value=valorant]:checked),[data-theme=valorant] { color-scheme: light; --color-base-100: oklch(99.14% 0.0044 359.99); --color-base-200: oklch(96.72% 0.0163 12.78); --color-base-300: oklch(27.67% 0.0779 19.29); --color-base-content: oklch(21% 0.006 56.043); --color-primary: oklch(66.77% 0.2199 21.34); --color-primary-content: oklch(97% 0.013 17.38); --color-secondary: oklch(30.12% 0 0); --color-secondary-content: oklch(100% 0 0); --color-accent: oklch(55% 0.016 285.938); --color-accent-content: oklch(98% 0 0); --color-neutral: oklch(20.89% 0.0248 249.09); --color-neutral-content: oklch(98% 0.001 106.423); --color-info: oklch(58% 0.158 241.966); --color-info-content: oklch(98% 0.019 200.873); --color-success: oklch(76.82% 0.1855 152.24); --color-success-content: oklch(39% 0.095 152.535); --color-warning: oklch(80.16% 0.1705 73.27); --color-warning-content: oklch(47% 0.137 46.201); --color-error: oklch(67.08% 0.2165 25.19); --color-error-content: oklch(97% 0.014 343.198); --radius-selector: 0rem; --radius-field: 0rem; --radius-box: 0rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 1; } } @layer base { :root:has(input.theme-controller[value=vscode]:checked),[data-theme=vscode] { color-scheme: "dark"; --color-base-100: oklch(0.18 0.02 271.27); --color-base-200: oklch(0.22 0.02 271.67); --color-base-300: oklch(0.28 0.03 270.91); --color-base-content: oklch(0.994 0 0); --color-primary: oklch(0.71 0.15 239.15); --color-primary-content: oklch(0.94 0.03 232.39); --color-secondary: oklch(88% 0.059 254.128); --color-secondary-content: oklch(0 0 0); --color-accent: oklch(0.5636 0.0173 273.66); --color-accent-content: oklch(86% 0.022 252.894); --color-neutral: oklch(86% 0.022 252.894); --color-neutral-content: oklch(14% 0 0); --color-info: oklch(0.6 0.1 269.83); --color-info-content: oklch(0.9 0.01 238.47); --color-success: oklch(0.7 0.15 159.83); --color-success-content: oklch(0.9 0.01 238.47); --color-warning: oklch(0.8 0.1 100.65); --color-warning-content: oklch(0 0 0); --color-error: oklch(0.64 0.25 19.69); --color-error-content: oklch(0.9 0.01 238.47); --radius-selector: 0rem; --radius-field: 0rem; --radius-box: 0rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; } } @layer base { :root { --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E"); } .chat { --mask-chat: url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e"); } .tooltip { --mask-tooltip: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A"); } } @layer base { :root { scrollbar-color: currentColor #0000; @supports (color: color-mix(in lab, red, red)) { scrollbar-color: color-mix(in oklch, currentColor 20%, #0000) #0000; } } } @layer base { @property --radialprogress { syntax: ""; inherits: true; initial-value: 0%; } } @layer base { :root, [data-theme] { background-color: var(--root-bg, var(--color-base-100)); color: var(--color-base-content); } } @layer base { button:not(:disabled), [role="button"]:not(:disabled) { cursor: pointer; } } @keyframes radio { 0% { padding: 5px; } 50% { padding: 3px; } } @keyframes radio-inset { 0% { padding: 1px; } 50% { padding: 4px; } } @keyframes skeleton { 0% { background-position: 150%; } 100% { background-position: -50%; } } @keyframes indeterminate-progress { 0% { background-position-x: -75%; } 50% { background-position-x: 125%; } 100% { background-position-x: -75%; } } @keyframes progress-bar-stripes { 0% { background-position-x: 0.75rem; } } @layer base { :root:has(input.theme-controller[value=corporate]:checked),[data-theme="corporate"] { color-scheme: normal; --color-base-100: oklch(99.43% 0.001 286.38); --color-base-200: oklch(97.33% 0.008 271.33); --color-base-300: oklch(48.52% 0.0225 279.09); --color-base-content: oklch(42.06% 0.049 276.53); --color-primary: oklch(62.31% 0.188 259.81); --color-primary-content: oklch(97.05% 0.014 254.6); --color-secondary: oklch(55.79% 0.022 301.91); --color-secondary-content: oklch(95.05% 0.003 308.43); --color-accent: oklch(65.59% 0.212 354.31); --color-accent-content: oklch(97.14% 0.014 343.2); --color-neutral: oklch(0.447 0.0732 274.26); --color-neutral-content: oklch(82.15% 0.055 277.12); --color-info: oklch(70.38% 0.123 182.5); --color-info-content: oklch(98.36% 0.014 180.72); --color-success: oklch(76.81% 0.204 130.85); --color-success-content: oklch(98.57% 0.031 120.76); --color-warning: oklch(79.52% 0.162 86.05); --color-warning-content: oklch(98.73% 0.026 102.21); --color-error: oklch(64.5% 0.215 16.44); --color-error-content: oklch(96.94% 0.015 12.42); --radius-selector: 0.125rem; --radius-field: 0.25rem; --radius-box: 0.375rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; font-family: Public Sans; } } @layer base { :root:has(input.theme-controller[value=ghibli]:checked),[data-theme="ghibli"] { color-scheme: normal; --color-base-100: oklch(0.94 0.0262 82.38); --color-base-200: oklch(0.91 0.0326 80.99); --color-base-300: oklch(0.34 0.0131 81.73 / 20%); --color-base-content: oklch(41% 0.077 79.04); --color-primary: oklch(0.62 0.0868 111.8); --color-primary-content: oklch(97% 0.009 106.57); --color-secondary: oklch(44% 0.043 257.281); --color-secondary-content: oklch(92% 0.013 255.508); --color-accent: oklch(70% 0.14 182.503); --color-accent-content: oklch(98% 0.014 180.72); --color-neutral: oklch(41% 0.025 282.21); --color-neutral-content: oklch(98% 0.001 286.38); --color-info: oklch(62% 0.214 259.815); --color-info-content: oklch(97% 0.014 254.604); --color-success: oklch(64% 0.2 131.684); --color-success-content: oklch(98% 0.031 120.757); --color-warning: oklch(68% 0.162 75.834); --color-warning-content: oklch(28% 0.066 53.813); --color-error: oklch(63% 0.237 25.331); --color-error-content: oklch(97% 0.013 17.38); --radius-selector: 0.25rem; --radius-field: 1rem; --radius-box: 2rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 0; --noise: 0; font-family: Amaranth; } } @layer base { :root:has(input.theme-controller[value=gourmet]:checked),[data-theme="gourmet"] { color-scheme: normal; --color-base-100: oklch(99.45% 0.002 67.8); --color-base-200: oklch(98.19% 0.008 61.46); --color-base-300: oklch(47% 0.0131 54.28); --color-base-content: oklch(32.38% 0.009 67.5); --color-primary: oklch(70.49% 0.187 47.6); --color-primary-content: oklch(97.96% 0.016 73.68); --color-secondary: oklch(55.79% 0.022 301.91); --color-secondary-content: oklch(95.05% 0.003 308.43); --color-accent: oklch(65.59% 0.212 354.31); --color-accent-content: oklch(97.14% 0.014 343.2); --color-neutral: oklch(32.38% 0.009 67.5); --color-neutral-content: oklch(99.45% 0.002 67.8); --color-info: oklch(68.47% 0.148 237.32); --color-info-content: oklch(97.71% 0.012 236.62); --color-success: oklch(69.59% 0.149 162.48); --color-success-content: oklch(97.93% 0.021 166.11); --color-warning: oklch(57.59% 0.247 287.24); --color-warning-content: oklch(96.57% 0.017 289.61); --color-error: oklch(65.39% 0.222 25.86); --color-error-content: oklch(98.76% 0.009 67.73); --radius-selector: 2rem; --radius-field: 2rem; --radius-box: 0.75rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; font-family: Rubik; } } @layer base { :root:has(input.theme-controller[value=luxury]:checked),[data-theme="luxury"] { color-scheme: normal; --color-base-100: oklch(24.97% 0.0235 60.71); --color-base-200: oklch(20.19% 0.0212 56.18); --color-base-300: oklch(13.67% 0.0208 68.4); --color-base-content: oklch(89.79% 0.0323 68.91); --color-primary: oklch(68.75% 0.0948 67.23); --color-primary-content: oklch(92.24% 0.0235 69.59); --color-secondary: oklch(55.79% 0.0221 301.91); --color-secondary-content: oklch(97.64% 0.0013 286.38); --color-accent: oklch(64.45% 0.1596 354.64); --color-accent-content: oklch(89.57% 0.0416 348.79); --color-neutral: oklch(0.51 0.0449 70.29); --color-neutral-content: oklch(16.74% 0.0325 59.58); --color-info: oklch(55.75% 0.0746 234.15); --color-info-content: oklch(87.94% 0.0196 230.73); --color-success: oklch(52.65% 0.0537 188.98); --color-success-content: oklch(84.44% 0.0185 192.54); --color-warning: oklch(57.37% 0.149 296.3); --color-warning-content: oklch(88.26% 0.0392 300.25); --color-error: oklch(50.81% 0.097 4.98); --color-error-content: oklch(87.99% 0.021 358.74); --radius-selector: 0.1875rem; --radius-field: 0.375rem; --radius-box: 0.5625rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; font-family: Archivo; } } @layer base { :root:has(input.theme-controller[value=slack]:checked),[data-theme="slack"] { color-scheme: normal; --color-base-100: oklch(97.31% 0 0); --color-base-200: oklch(93.7% 0 0); --color-base-300: oklch(38.87% 0.0052 301.28); --color-base-content: oklch(21% 0.006 56.043); --color-primary: oklch(30.65% 0.108 327.06); --color-primary-content: oklch(97% 0.014 254.604); --color-secondary: oklch(0% 0 0); --color-secondary-content: oklch(100% 0 0); --color-accent: oklch(55% 0.016 285.938); --color-accent-content: oklch(98% 0 0); --color-neutral: oklch(14% 0.004 49.25); --color-neutral-content: oklch(98% 0.001 106.423); --color-info: oklch(76.8% 0.131 223.2); --color-info-content: oklch(45% 0.085 224.283); --color-success: oklch(69.11% 0.142 160.24); --color-success-content: oklch(39% 0.095 152.535); --color-warning: oklch(79.66% 0.152 82.65); --color-warning-content: oklch(47% 0.137 46.201); --color-error: oklch(58.8% 0.222 11.49); --color-error-content: oklch(97% 0.014 343.198); --radius-selector: 2rem; --radius-field: 0.25rem; --radius-box: 0.5rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; font-family: lato; } } @layer base { :root:has(input.theme-controller[value=soft]:checked),[data-theme="soft"] { color-scheme: normal; --color-base-100: oklch(98.8% 0.0069 304.24); --color-base-200: oklch(96.95% 0.0114 308.33); --color-base-300: oklch(40.47% 0.0142 308.07); --color-base-content: oklch(32.61% 0.0705 305.29); --color-primary: oklch(62.68% 0.2325 303.9); --color-primary-content: oklch(97.68% 0.0142 308.3); --color-secondary: oklch(55.79% 0.0221 301.91); --color-secondary-content: oklch(97.64% 0.0013 286.38); --color-accent: oklch(62.31% 0.188 259.81); --color-accent-content: oklch(97.05% 0.0142 254.6); --color-neutral: oklch(32.61% 0.0705 305.29); --color-neutral-content: oklch(99.54% 0.0028 308.43); --color-info: oklch(71.48% 0.1257 215.22); --color-info-content: oklch(98.41% 0.0189 200.87); --color-success: oklch(69.59% 0.1491 162.48); --color-success-content: oklch(97.93% 0.0207 166.11); --color-warning: oklch(70.49% 0.1867 47.6); --color-warning-content: oklch(97.96% 0.0158 73.68); --color-error: oklch(65.39% 0.2221 25.86); --color-error-content: oklch(98.76% 0.0085 67.73); --radius-selector: 0.5rem; --radius-field: 0.75rem; --radius-box: 1rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; font-family: Montserrat; } } @layer base { :root:has(input.theme-controller[value=valorant]:checked),[data-theme="valorant"] { color-scheme: normal; --color-base-100: oklch(99.14% 0.0044 359.99); --color-base-200: oklch(96.72% 0.0163 12.78); --color-base-300: oklch(27.67% 0.0779 19.29); --color-base-content: oklch(21% 0.006 56.043); --color-primary: oklch(66.77% 0.2199 21.34); --color-primary-content: oklch(97% 0.013 17.38); --color-secondary: oklch(30.12% 0 0); --color-secondary-content: oklch(100% 0 0); --color-accent: oklch(55% 0.016 285.938); --color-accent-content: oklch(98% 0 0); --color-neutral: oklch(20.89% 0.0248 249.09); --color-neutral-content: oklch(98% 0.001 106.423); --color-info: oklch(58% 0.158 241.966); --color-info-content: oklch(98% 0.019 200.873); --color-success: oklch(76.82% 0.1855 152.24); --color-success-content: oklch(39% 0.095 152.535); --color-warning: oklch(80.16% 0.1705 73.27); --color-warning-content: oklch(47% 0.137 46.201); --color-error: oklch(67.08% 0.2165 25.19); --color-error-content: oklch(97% 0.014 343.198); --radius-selector: 0rem; --radius-field: 0rem; --radius-box: 0rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 1; font-family: work sans; } } @layer base { :root:has(input.theme-controller[value=spotify]:checked),[data-theme="spotify"] { color-scheme: normal; --color-base-100: oklch(0.1964 0.0168 268.77); --color-base-200: oklch(9.3% 0.007 145); --color-base-300: oklch(55% 0.046 257.417); --color-base-content: oklch(98% 0.003 247.858); --color-primary: oklch(70% 0.18 153.85); --color-primary-content: oklch(1 0 0); --color-secondary: oklch(98% 0.031 120.757); --color-secondary-content: oklch(27% 0.072 132.109); --color-accent: oklch(45% 0.05 250.05); --color-accent-content: oklch(95% 0.01 238.46); --color-neutral: oklch(1 0 0); --color-neutral-content: oklch(14% 0 0); --color-info: oklch(60% 0.1 269.83); --color-info-content: oklch(95% 0.01 238.46); --color-success: oklch(72% 0.12 201.79); --color-success-content: oklch(95% 0.01 238.46); --color-warning: oklch(80% 0.1 100.65); --color-warning-content: oklch(0% 0 0); --color-error: oklch(64% 0.25 19.69); --color-error-content: oklch(95% 0.01 238.46); --radius-selector: 1rem; --radius-field: 1rem; --radius-box: 1rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; font-family: lato; } } @layer base { :root:has(input.theme-controller[value=vscode]:checked),[data-theme="vscode"] { color-scheme: normal; --color-base-100: oklch(0.18 0.02 271.27); --color-base-200: oklch(0.22 0.02 271.67); --color-base-300: oklch(0.28 0.03 270.91); --color-base-content: oklch(0.994 0 0); --color-primary: oklch(0.71 0.15 239.15); --color-primary-content: oklch(0.94 0.03 232.39); --color-secondary: oklch(88% 0.059 254.128); --color-secondary-content: oklch(0 0 0); --color-accent: oklch(0.5636 0.0173 273.66); --color-accent-content: oklch(86% 0.022 252.894); --color-neutral: oklch(86% 0.022 252.894); --color-neutral-content: oklch(14% 0 0); --color-info: oklch(0.6 0.1 269.83); --color-info-content: oklch(0.9 0.01 238.47); --color-success: oklch(0.7 0.15 159.83); --color-success-content: oklch(0.9 0.01 238.47); --color-warning: oklch(0.8 0.1 100.65); --color-warning-content: oklch(0 0 0); --color-error: oklch(0.64 0.25 19.69); --color-error-content: oklch(0.9 0.01 238.47); --radius-selector: 0rem; --radius-field: 0rem; --radius-box: 0rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; font-family: Fira Code; } } @layer base { :root:has(input.theme-controller[value=claude]:checked),[data-theme="claude"] { color-scheme: normal; --color-base-100: oklch(98% 0.01 93.48); --color-base-200: oklch(94.95% 0.01 87.47); --color-base-300: oklch(0.8685 0.0109 100.85); --color-base-content: oklch(34% 0.03 94.42); --color-primary: oklch(62% 0.14 39.15); --color-primary-content: oklch(100% 0 0); --color-secondary: oklch(69% 0.16 290.41); --color-secondary-content: oklch(14% 0 0); --color-accent: oklch(42.621% 0.074 224.389); --color-accent-content: oklch(88.524% 0.014 224.389); --color-neutral: oklch(20% 0 0); --color-neutral-content: oklch(98% 0 0); --color-info: oklch(56% 0.13 42.95); --color-info-content: oklch(100% 0 0); --color-success: oklch(60% 0.1 120.29); --color-success-content: oklch(100% 0 0); --color-warning: oklch(85% 0.12 80.65); --color-warning-content: oklch(0% 0 0); --color-error: oklch(64% 0.25 19.69); --color-error-content: oklch(100% 0 0); --radius-selector: 1rem; --radius-field: 1rem; --radius-box: 1rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; font-family: Geist; } } @layer base { :root:has(input.theme-controller[value=pastel]:checked),[data-theme="pastel"] { color-scheme: normal; --color-base-100: oklch(0.28 0.0292 308.75); --color-base-200: oklch(0.2182 0.0098 52.95); --color-base-300: oklch(0.3467 0.0053 301.25); --color-base-content: oklch(98% 0.003 247.858); --color-primary: oklch(79% 0.12 295.97); --color-primary-content: oklch(100% 0 0); --color-secondary: oklch(91% 0.05 306.07); --color-secondary-content: oklch(45% 0.03 257.68); --color-accent: oklch(72% 0.2 210); --color-accent-content: oklch(37% 0.03 259.73); --color-neutral: oklch(1 0 0); --color-neutral-content: oklch(14% 0.004 49.25); --color-info: oklch(50% 0.25 255.25); --color-info-content: oklch(100% 0 0); --color-success: oklch(69% 0.17 162.48); --color-success-content: oklch(100% 0 0); --color-warning: oklch(79% 0.184 86.047); --color-warning-content: oklch(0% 0 0); --color-error: oklch(64% 0.246 16.439); --color-error-content: oklch(100% 0 0); --radius-selector: 2rem; --radius-field: 2rem; --radius-box: 2rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; font-family: open sans; } } @layer base { :root:has(input.theme-controller[value=corporate]:checked),[data-theme="corporate"] { color-scheme: normal; --color-base-100: oklch(99.43% 0.001 286.38); --color-base-200: oklch(97.33% 0.008 271.33); --color-base-300: oklch(48.52% 0.0225 279.09); --color-base-content: oklch(42.06% 0.049 276.53); --color-primary: oklch(62.31% 0.188 259.81); --color-primary-content: oklch(97.05% 0.014 254.6); --color-secondary: oklch(55.79% 0.022 301.91); --color-secondary-content: oklch(95.05% 0.003 308.43); --color-accent: oklch(65.59% 0.212 354.31); --color-accent-content: oklch(97.14% 0.014 343.2); --color-neutral: oklch(0.447 0.0732 274.26); --color-neutral-content: oklch(82.15% 0.055 277.12); --color-info: oklch(70.38% 0.123 182.5); --color-info-content: oklch(98.36% 0.014 180.72); --color-success: oklch(76.81% 0.204 130.85); --color-success-content: oklch(98.57% 0.031 120.76); --color-warning: oklch(79.52% 0.162 86.05); --color-warning-content: oklch(98.73% 0.026 102.21); --color-error: oklch(64.5% 0.215 16.44); --color-error-content: oklch(96.94% 0.015 12.42); --radius-selector: 0.125rem; --radius-field: 0.25rem; --radius-box: 0.375rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; --font-sans: 'Public Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto; } } @layer base { :root:has(input.theme-controller[value=corporate-dark]:checked),[data-theme="corporate-dark"] { color-scheme: normal; --font-sans: 'Public Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto; } } @layer base { :root:has(input.theme-controller[value=corporate-dark]:checked),[data-theme="corporate-dark"] { color-scheme: dark; --color-base-100: oklch(23.2% 0.006 285.95); --color-base-200: oklch(0.2694 0.0037 286.15); --color-base-300: oklch(14% 0 0); --color-base-content: oklch(96% 0.001 286.375); --color-primary: oklch(62.31% 0.188 259.81); --color-primary-content: oklch(97.05% 0.014 254.6); --color-secondary: oklch(55.79% 0.022 301.91); --color-secondary-content: oklch(95.05% 0.003 308.43); --color-accent: oklch(65.59% 0.212 354.31); --color-accent-content: oklch(97.14% 0.014 343.2); --color-neutral: oklch(0.8681 0.033 285.69); --color-neutral-content: oklch(82.15% 0.055 277.12); --color-info: oklch(70.38% 0.123 182.5); --color-info-content: oklch(98.36% 0.014 180.72); --color-success: oklch(76.81% 0.204 130.85); --color-success-content: oklch(98.57% 0.031 120.76); --color-warning: oklch(79.52% 0.162 86.05); --color-warning-content: oklch(98.73% 0.026 102.21); --color-error: oklch(64.5% 0.215 16.44); --color-error-content: oklch(96.94% 0.015 12.42); --radius-selector: 0.125rem; --radius-field: 0.25rem; --radius-box: 0.375rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; } } @layer base { @property --motion-bounce { syntax: "*"; inherits: false; initial-value: linear(0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765,1, 0.891 40.9%, 0.848, 0.813, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785,0.813, 0.848, 0.891 68.2%, 1 72.7%, 0.973, 0.953, 0.941, 0.938, 0.941, 0.953,0.973, 1, 0.988, 0.984, 0.988, 1); } @property --motion-spring-smooth { syntax: "*"; inherits: false; initial-value: linear(0, 0.001 0.44%, 0.0045 0.94%, 0.0195 2.03%, 0.0446 3.19%, 0.0811 4.5%, 0.1598 6.82%, 0.3685 12.34%, 0.4693 15.17%, 0.5663, 0.6498 21.27%, 0.7215 24.39%, 0.7532 25.98%, 0.7829 27.65%, 0.8105, 0.8349 31.14%, 0.8573 32.95%, 0.8776 34.84%, 0.8964 36.87%, 0.9136 39.05%, 0.929 41.37%, 0.9421 43.77%, 0.9537 46.38%, 0.9636 49.14%, 0.9789 55.31%, 0.9888 62.35%, 0.9949 71.06%, 0.9982 82.52%, 0.9997 99.94%); } @property --motion-spring-snappy { syntax: "*"; inherits: false; initial-value: linear(0, 0.0014, 0.0053 1.02%, 0.0126, 0.0227 2.18%, 0.0517 3.41%, 0.094 4.79%, 0.1865 7.26%, 0.4182 12.77%, 0.5246 15.46%, 0.6249, 0.7112, 0.7831 23.95%, 0.8146 25.4%, 0.844, 0.8699 28.45%, 0.8935, 0.9139 31.64%, 0.932, 0.9473, 0.9601 36.65%, 0.9714 38.47%, 0.9808 40.35%, 0.9948 44.49%, 1.0031 49.43%, 1.0057 53.35%, 1.0063 58.14%, 1.0014 80.78%, 1.0001 99.94%); } @property --motion-spring-bouncy { syntax: "*"; inherits: false; initial-value: linear(0, 0.0018, 0.0069, 0.0151 1.74%, 0.0277 2.4%, 0.062 3.7%, 0.1115 5.15%, 0.2211 7.77%, 0.4778 13.21%, 0.5912 15.75%, 0.6987 18.44%, 0.7862 20.98%, 0.861 23.59%, 0.8926, 0.9205, 0.945 27.51%, 0.9671 28.89%, 0.9868, 1.003 31.79%, 1.0224 34.11%, 1.0358 36.58%, 1.0436 39.27%, 1.046 42.31%, 1.0446 44.71%, 1.0406 47.47%, 1.0118 61.84%, 1.0027 69.53%, 0.9981 80.49%, 0.9991 99.94%); } @property --motion-spring-bouncier { syntax: "*"; inherits: false; initial-value: linear(0, 0.0023, 0.0088, 0.0194 1.59%, 0.035 2.17%, 0.078 3.33%, 0.1415 4.64%, 0.2054 5.75%, 0.2821 6.95%, 0.5912 11.45%, 0.7205 13.43%, 0.8393 15.45%, 0.936 17.39%, 0.9778, 1.015, 1.0477, 1.0759, 1.0998 22.22%, 1.1203, 1.1364, 1.1484 25.26%, 1.1586 26.61%, 1.1629 28.06%, 1.1613 29.56%, 1.1537 31.2%, 1.1434 32.6%, 1.1288 34.19%, 1.0508 41.29%, 1.0174 44.87%, 1.0025 46.89%, 0.9911 48.87%, 0.9826 50.9%, 0.9769 53.03%, 0.9735 56.02%, 0.9748 59.45%, 0.9964 72.64%, 1.0031 79.69%, 1.0042 86.83%, 1.0008 99.97%); } @property --motion-spring-bounciest { syntax: "*"; inherits: false; initial-value: linear(0, 0.0032, 0.0131, 0.0294, 0.0524, 0.0824, 0.1192 1.54%, 0.2134 2.11%, 0.3102 2.59%, 0.4297 3.13%, 0.8732 4.95%, 1.0373, 1.1827 6.36%, 1.2972 7.01%, 1.3444, 1.3859, 1.4215, 1.4504, 1.4735, 1.4908, 1.5024, 1.5084 9.5%, 1.5091, 1.5061, 1.4993, 1.4886, 1.4745, 1.4565 11.11%, 1.4082 11.7%, 1.3585 12.2%, 1.295 12.77%, 1.0623 14.64%, 0.9773, 0.9031 16.08%, 0.8449 16.73%, 0.8014, 0.7701 17.95%, 0.7587, 0.7501, 0.7443, 0.7412 19.16%, 0.7421 19.68%, 0.7508 20.21%, 0.7672 20.77%, 0.7917 21.37%, 0.8169 21.87%, 0.8492 22.43%, 0.9681 24.32%, 1.0114, 1.0492 25.75%, 1.0789 26.41%, 1.1008, 1.1167, 1.1271, 1.1317 28.81%, 1.1314, 1.1271 29.87%, 1.1189 30.43%, 1.1063 31.03%, 1.0769 32.11%, 0.9941 34.72%, 0.9748 35.43%, 0.9597 36.09%, 0.9487, 0.9407, 0.9355, 0.933 38.46%, 0.9344 39.38%, 0.9421 40.38%, 0.9566 41.5%, 0.9989 44.12%, 1.0161 45.37%, 1.029 46.75%, 1.0341 48.1%, 1.0335 49.04%, 1.0295 50.05%, 1.0221 51.18%, 0.992 55.02%, 0.9854 56.38%, 0.9827 57.72%, 0.985 59.73%, 1.004 64.67%, 1.0088 67.34%, 1.0076 69.42%, 0.9981 74.28%, 0.9956 76.85%, 0.9961 79.06%, 1.0023 86.46%, 0.999 95.22%, 0.9994 100%); } @property --motion-origin-scale-x { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-origin-scale-y { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-origin-translate-x { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-origin-translate-y { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-origin-rotate { syntax: "*"; inherits: false; initial-value: 0deg; } @property --motion-origin-blur { syntax: "*"; inherits: false; initial-value: 0px; } @property --motion-origin-grayscale { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-origin-opacity { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-origin-background-color { syntax: "*"; inherits: false; } @property --motion-origin-text-color { syntax: "*"; inherits: false; } @property --motion-end-scale-x { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-end-scale-y { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-end-translate-x { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-end-translate-y { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-end-rotate { syntax: "*"; inherits: false; initial-value: 0deg; } @property --motion-end-blur { syntax: "*"; inherits: false; initial-value: 0px; } @property --motion-end-grayscale { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-end-opacity { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-end-background-color { syntax: "*"; inherits: false; } @property --motion-end-text-color { syntax: "*"; inherits: false; } @property --motion-loop-scale-x { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-loop-scale-y { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-loop-translate-x { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-loop-translate-y { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-loop-rotate { syntax: "*"; inherits: false; initial-value: 0deg; } @property --motion-loop-blur { syntax: "*"; inherits: false; initial-value: 0px; } @property --motion-loop-grayscale { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-loop-opacity { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-loop-background-color { syntax: "*"; inherits: false; } @property --motion-loop-text-color { syntax: "*"; inherits: false; } @property --motion-duration { syntax: "*"; inherits: false; initial-value: 700ms; } @property --motion-timing { syntax: "*"; inherits: false; initial-value: cubic-bezier(.165, .84, .44, 1); } @property --motion-perceptual-duration-multiplier { syntax: "*"; inherits: false; initial-value: 1; } @property --motion-delay { syntax: "*"; inherits: false; initial-value: 0ms; } @property --motion-loop-count { syntax: "*"; inherits: false; initial-value: infinite; } @property --motion-scale-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-translate-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-rotate-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-filter-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-opacity-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-background-color-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-text-color-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-scale-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-translate-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-rotate-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-filter-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-opacity-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-background-color-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-text-color-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-scale-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-translate-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-rotate-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-filter-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-opacity-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-background-color-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-text-color-loop-animation { syntax: "*"; inherits: false; initial-value: none; } } @layer base { @media screen and (prefers-reduced-motion: no-preference) { @keyframes motion-scale-in { 0% { scale: var(--motion-origin-scale-x) var(--motion-origin-scale-y); } 100% { scale: 1 1; } } @keyframes motion-scale-out { 0% { scale: 1 1; } 100% { scale: var(--motion-end-scale-x) var(--motion-end-scale-y); } } @keyframes motion-scale-loop-mirror { 0%, 100% { scale: 1 1; } 50% { scale: var(--motion-loop-scale-x) var(--motion-loop-scale-y); } } @keyframes motion-scale-loop-reset { 0% { scale: 1 1; } 100% { scale: var(--motion-loop-scale-x) var(--motion-loop-scale-y); } } @keyframes motion-translate-in { 0% { translate: var(--motion-origin-translate-x) var(--motion-origin-translate-y); } 100% { translate: 0 0; } } @keyframes motion-translate-out { 0% { translate: 0 0; } 100% { translate: var(--motion-end-translate-x) var(--motion-end-translate-y); } } @keyframes motion-translate-loop-mirror { 0%, 100% { translate: 0 0; } 50% { translate: var(--motion-loop-translate-x) var(--motion-loop-translate-y); } } @keyframes motion-translate-loop-reset { 0% { translate: 0 0; } 100% { translate: var(--motion-loop-translate-x) var(--motion-loop-translate-y); } } @keyframes motion-rotate-in { 0% { rotate: var(--motion-origin-rotate); } 100% { rotate: 0; } } @keyframes motion-rotate-out { 0% { rotate: 0; } 100% { rotate: var(--motion-end-rotate); } } @keyframes motion-rotate-loop-mirror { 0%, 100% { rotate: 0deg; } 50% { rotate: var(--motion-loop-rotate); } } @keyframes motion-rotate-loop-reset { 100% { rotate: var(--motion-loop-rotate); } } } @keyframes motion-filter-in { 0% { filter: blur(var(--motion-origin-blur)) grayscale(var(--motion-origin-grayscale)); } 100% { filter: blur(0) grayscale(0); } } @keyframes motion-filter-out { 0% { filter: blur(0) grayscale(0); } 100% { filter: blur(var(--motion-end-blur)) grayscale(var(--motion-end-grayscale)); } } @keyframes motion-filter-loop-mirror { 0%, 100% { filter: blur(0) grayscale(0); } 50% { filter: blur(var(--motion-loop-blur)) grayscale(var(--motion-loop-grayscale)); } } @keyframes motion-filter-loop-reset { 0% { filter: blur(0) grayscale(0); } 100% { filter: blur(var(--motion-loop-blur)) grayscale(var(--motion-loop-grayscale)); } } @keyframes motion-opacity-in { 0% { opacity: var(--motion-origin-opacity); } } @keyframes motion-opacity-out { 100% { opacity: var(--motion-end-opacity); } } @keyframes motion-opacity-loop-mirror { 50% { opacity: var(--motion-loop-opacity); } } @keyframes motion-opacity-loop-reset { 100% { opacity: var(--motion-loop-opacity); } } @keyframes motion-background-color-in { 0% { background-color: var(--motion-origin-background-color); } } @keyframes motion-background-color-out { 100% { background-color: var(--motion-end-background-color); } } @keyframes motion-background-color-loop-mirror { 50% { background-color: var(--motion-loop-background-color); } } @keyframes motion-background-color-loop-reset { 100% { background-color: var(--motion-loop-background-color); } } @keyframes motion-text-color-in { 0% { color: var(--motion-origin-text-color); } } @keyframes motion-text-color-out { 100% { color: var(--motion-end-text-color); } } @keyframes motion-text-color-loop-mirror { 50% { color: var(--motion-loop-text-color); } } @keyframes motion-text-color-loop-reset { 100% { color: var(--motion-loop-text-color); } } } @layer base { @property --motion-bounce { syntax: "*"; inherits: false; initial-value: linear(0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765,1, 0.891 40.9%, 0.848, 0.813, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785,0.813, 0.848, 0.891 68.2%, 1 72.7%, 0.973, 0.953, 0.941, 0.938, 0.941, 0.953,0.973, 1, 0.988, 0.984, 0.988, 1); } @property --motion-spring-smooth { syntax: "*"; inherits: false; initial-value: linear(0, 0.001 0.44%, 0.0045 0.94%, 0.0195 2.03%, 0.0446 3.19%, 0.0811 4.5%, 0.1598 6.82%, 0.3685 12.34%, 0.4693 15.17%, 0.5663, 0.6498 21.27%, 0.7215 24.39%, 0.7532 25.98%, 0.7829 27.65%, 0.8105, 0.8349 31.14%, 0.8573 32.95%, 0.8776 34.84%, 0.8964 36.87%, 0.9136 39.05%, 0.929 41.37%, 0.9421 43.77%, 0.9537 46.38%, 0.9636 49.14%, 0.9789 55.31%, 0.9888 62.35%, 0.9949 71.06%, 0.9982 82.52%, 0.9997 99.94%); } @property --motion-spring-snappy { syntax: "*"; inherits: false; initial-value: linear(0, 0.0014, 0.0053 1.02%, 0.0126, 0.0227 2.18%, 0.0517 3.41%, 0.094 4.79%, 0.1865 7.26%, 0.4182 12.77%, 0.5246 15.46%, 0.6249, 0.7112, 0.7831 23.95%, 0.8146 25.4%, 0.844, 0.8699 28.45%, 0.8935, 0.9139 31.64%, 0.932, 0.9473, 0.9601 36.65%, 0.9714 38.47%, 0.9808 40.35%, 0.9948 44.49%, 1.0031 49.43%, 1.0057 53.35%, 1.0063 58.14%, 1.0014 80.78%, 1.0001 99.94%); } @property --motion-spring-bouncy { syntax: "*"; inherits: false; initial-value: linear(0, 0.0018, 0.0069, 0.0151 1.74%, 0.0277 2.4%, 0.062 3.7%, 0.1115 5.15%, 0.2211 7.77%, 0.4778 13.21%, 0.5912 15.75%, 0.6987 18.44%, 0.7862 20.98%, 0.861 23.59%, 0.8926, 0.9205, 0.945 27.51%, 0.9671 28.89%, 0.9868, 1.003 31.79%, 1.0224 34.11%, 1.0358 36.58%, 1.0436 39.27%, 1.046 42.31%, 1.0446 44.71%, 1.0406 47.47%, 1.0118 61.84%, 1.0027 69.53%, 0.9981 80.49%, 0.9991 99.94%); } @property --motion-spring-bouncier { syntax: "*"; inherits: false; initial-value: linear(0, 0.0023, 0.0088, 0.0194 1.59%, 0.035 2.17%, 0.078 3.33%, 0.1415 4.64%, 0.2054 5.75%, 0.2821 6.95%, 0.5912 11.45%, 0.7205 13.43%, 0.8393 15.45%, 0.936 17.39%, 0.9778, 1.015, 1.0477, 1.0759, 1.0998 22.22%, 1.1203, 1.1364, 1.1484 25.26%, 1.1586 26.61%, 1.1629 28.06%, 1.1613 29.56%, 1.1537 31.2%, 1.1434 32.6%, 1.1288 34.19%, 1.0508 41.29%, 1.0174 44.87%, 1.0025 46.89%, 0.9911 48.87%, 0.9826 50.9%, 0.9769 53.03%, 0.9735 56.02%, 0.9748 59.45%, 0.9964 72.64%, 1.0031 79.69%, 1.0042 86.83%, 1.0008 99.97%); } @property --motion-spring-bounciest { syntax: "*"; inherits: false; initial-value: linear(0, 0.0032, 0.0131, 0.0294, 0.0524, 0.0824, 0.1192 1.54%, 0.2134 2.11%, 0.3102 2.59%, 0.4297 3.13%, 0.8732 4.95%, 1.0373, 1.1827 6.36%, 1.2972 7.01%, 1.3444, 1.3859, 1.4215, 1.4504, 1.4735, 1.4908, 1.5024, 1.5084 9.5%, 1.5091, 1.5061, 1.4993, 1.4886, 1.4745, 1.4565 11.11%, 1.4082 11.7%, 1.3585 12.2%, 1.295 12.77%, 1.0623 14.64%, 0.9773, 0.9031 16.08%, 0.8449 16.73%, 0.8014, 0.7701 17.95%, 0.7587, 0.7501, 0.7443, 0.7412 19.16%, 0.7421 19.68%, 0.7508 20.21%, 0.7672 20.77%, 0.7917 21.37%, 0.8169 21.87%, 0.8492 22.43%, 0.9681 24.32%, 1.0114, 1.0492 25.75%, 1.0789 26.41%, 1.1008, 1.1167, 1.1271, 1.1317 28.81%, 1.1314, 1.1271 29.87%, 1.1189 30.43%, 1.1063 31.03%, 1.0769 32.11%, 0.9941 34.72%, 0.9748 35.43%, 0.9597 36.09%, 0.9487, 0.9407, 0.9355, 0.933 38.46%, 0.9344 39.38%, 0.9421 40.38%, 0.9566 41.5%, 0.9989 44.12%, 1.0161 45.37%, 1.029 46.75%, 1.0341 48.1%, 1.0335 49.04%, 1.0295 50.05%, 1.0221 51.18%, 0.992 55.02%, 0.9854 56.38%, 0.9827 57.72%, 0.985 59.73%, 1.004 64.67%, 1.0088 67.34%, 1.0076 69.42%, 0.9981 74.28%, 0.9956 76.85%, 0.9961 79.06%, 1.0023 86.46%, 0.999 95.22%, 0.9994 100%); } @property --motion-origin-scale-x { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-origin-scale-y { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-origin-translate-x { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-origin-translate-y { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-origin-rotate { syntax: "*"; inherits: false; initial-value: 0deg; } @property --motion-origin-blur { syntax: "*"; inherits: false; initial-value: 0px; } @property --motion-origin-grayscale { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-origin-opacity { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-origin-background-color { syntax: "*"; inherits: false; } @property --motion-origin-text-color { syntax: "*"; inherits: false; } @property --motion-end-scale-x { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-end-scale-y { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-end-translate-x { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-end-translate-y { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-end-rotate { syntax: "*"; inherits: false; initial-value: 0deg; } @property --motion-end-blur { syntax: "*"; inherits: false; initial-value: 0px; } @property --motion-end-grayscale { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-end-opacity { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-end-background-color { syntax: "*"; inherits: false; } @property --motion-end-text-color { syntax: "*"; inherits: false; } @property --motion-loop-scale-x { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-loop-scale-y { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-loop-translate-x { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-loop-translate-y { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-loop-rotate { syntax: "*"; inherits: false; initial-value: 0deg; } @property --motion-loop-blur { syntax: "*"; inherits: false; initial-value: 0px; } @property --motion-loop-grayscale { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-loop-opacity { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-loop-background-color { syntax: "*"; inherits: false; } @property --motion-loop-text-color { syntax: "*"; inherits: false; } @property --motion-duration { syntax: "*"; inherits: false; initial-value: 700ms; } @property --motion-timing { syntax: "*"; inherits: false; initial-value: cubic-bezier(.165, .84, .44, 1); } @property --motion-perceptual-duration-multiplier { syntax: "*"; inherits: false; initial-value: 1; } @property --motion-delay { syntax: "*"; inherits: false; initial-value: 0ms; } @property --motion-loop-count { syntax: "*"; inherits: false; initial-value: infinite; } @property --motion-scale-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-translate-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-rotate-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-filter-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-opacity-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-background-color-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-text-color-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-scale-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-translate-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-rotate-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-filter-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-opacity-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-background-color-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-text-color-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-scale-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-translate-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-rotate-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-filter-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-opacity-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-background-color-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-text-color-loop-animation { syntax: "*"; inherits: false; initial-value: none; } } @layer base { @media screen and (prefers-reduced-motion: no-preference) { @keyframes motion-scale-in { 0% { scale: var(--motion-origin-scale-x) var(--motion-origin-scale-y); } 100% { scale: 1 1; } } @keyframes motion-scale-out { 0% { scale: 1 1; } 100% { scale: var(--motion-end-scale-x) var(--motion-end-scale-y); } } @keyframes motion-scale-loop-mirror { 0%, 100% { scale: 1 1; } 50% { scale: var(--motion-loop-scale-x) var(--motion-loop-scale-y); } } @keyframes motion-scale-loop-reset { 0% { scale: 1 1; } 100% { scale: var(--motion-loop-scale-x) var(--motion-loop-scale-y); } } @keyframes motion-translate-in { 0% { translate: var(--motion-origin-translate-x) var(--motion-origin-translate-y); } 100% { translate: 0 0; } } @keyframes motion-translate-out { 0% { translate: 0 0; } 100% { translate: var(--motion-end-translate-x) var(--motion-end-translate-y); } } @keyframes motion-translate-loop-mirror { 0%, 100% { translate: 0 0; } 50% { translate: var(--motion-loop-translate-x) var(--motion-loop-translate-y); } } @keyframes motion-translate-loop-reset { 0% { translate: 0 0; } 100% { translate: var(--motion-loop-translate-x) var(--motion-loop-translate-y); } } @keyframes motion-rotate-in { 0% { rotate: var(--motion-origin-rotate); } 100% { rotate: 0; } } @keyframes motion-rotate-out { 0% { rotate: 0; } 100% { rotate: var(--motion-end-rotate); } } @keyframes motion-rotate-loop-mirror { 0%, 100% { rotate: 0deg; } 50% { rotate: var(--motion-loop-rotate); } } @keyframes motion-rotate-loop-reset { 100% { rotate: var(--motion-loop-rotate); } } } @keyframes motion-filter-in { 0% { filter: blur(var(--motion-origin-blur)) grayscale(var(--motion-origin-grayscale)); } 100% { filter: blur(0) grayscale(0); } } @keyframes motion-filter-out { 0% { filter: blur(0) grayscale(0); } 100% { filter: blur(var(--motion-end-blur)) grayscale(var(--motion-end-grayscale)); } } @keyframes motion-filter-loop-mirror { 0%, 100% { filter: blur(0) grayscale(0); } 50% { filter: blur(var(--motion-loop-blur)) grayscale(var(--motion-loop-grayscale)); } } @keyframes motion-filter-loop-reset { 0% { filter: blur(0) grayscale(0); } 100% { filter: blur(var(--motion-loop-blur)) grayscale(var(--motion-loop-grayscale)); } } @keyframes motion-opacity-in { 0% { opacity: var(--motion-origin-opacity); } } @keyframes motion-opacity-out { 100% { opacity: var(--motion-end-opacity); } } @keyframes motion-opacity-loop-mirror { 50% { opacity: var(--motion-loop-opacity); } } @keyframes motion-opacity-loop-reset { 100% { opacity: var(--motion-loop-opacity); } } @keyframes motion-background-color-in { 0% { background-color: var(--motion-origin-background-color); } } @keyframes motion-background-color-out { 100% { background-color: var(--motion-end-background-color); } } @keyframes motion-background-color-loop-mirror { 50% { background-color: var(--motion-loop-background-color); } } @keyframes motion-background-color-loop-reset { 100% { background-color: var(--motion-loop-background-color); } } @keyframes motion-text-color-in { 0% { color: var(--motion-origin-text-color); } } @keyframes motion-text-color-out { 100% { color: var(--motion-end-text-color); } } @keyframes motion-text-color-loop-mirror { 50% { color: var(--motion-loop-text-color); } } @keyframes motion-text-color-loop-reset { 100% { color: var(--motion-loop-text-color); } } } @layer base { :root:has(input.theme-controller[value=corporate-dark]:checked),[data-theme="corporate-dark"] { color-scheme: normal; --font-sans: 'Public Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto; } } @layer base { :root:has(input.theme-controller[value=corporate-dark]:checked),[data-theme="corporate-dark"] { color-scheme: dark; --color-base-100: oklch(23.2% 0.006 285.95); --color-base-200: oklch(0.2694 0.0037 286.15); --color-base-300: oklch(14% 0 0); --color-base-content: oklch(96% 0.001 286.375); --color-primary: oklch(62.31% 0.188 259.81); --color-primary-content: oklch(97.05% 0.014 254.6); --color-secondary: oklch(55.79% 0.022 301.91); --color-secondary-content: oklch(95.05% 0.003 308.43); --color-accent: oklch(65.59% 0.212 354.31); --color-accent-content: oklch(97.14% 0.014 343.2); --color-neutral: oklch(0.8681 0.033 285.69); --color-neutral-content: oklch(82.15% 0.055 277.12); --color-info: oklch(70.38% 0.123 182.5); --color-info-content: oklch(98.36% 0.014 180.72); --color-success: oklch(76.81% 0.204 130.85); --color-success-content: oklch(98.57% 0.031 120.76); --color-warning: oklch(79.52% 0.162 86.05); --color-warning-content: oklch(98.73% 0.026 102.21); --color-error: oklch(64.5% 0.215 16.44); --color-error-content: oklch(96.94% 0.015 12.42); --radius-selector: 0.125rem; --radius-field: 0.25rem; --radius-box: 0.375rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; } } @layer base { @property --motion-bounce { syntax: "*"; inherits: false; initial-value: linear(0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765,1, 0.891 40.9%, 0.848, 0.813, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785,0.813, 0.848, 0.891 68.2%, 1 72.7%, 0.973, 0.953, 0.941, 0.938, 0.941, 0.953,0.973, 1, 0.988, 0.984, 0.988, 1); } @property --motion-spring-smooth { syntax: "*"; inherits: false; initial-value: linear(0, 0.001 0.44%, 0.0045 0.94%, 0.0195 2.03%, 0.0446 3.19%, 0.0811 4.5%, 0.1598 6.82%, 0.3685 12.34%, 0.4693 15.17%, 0.5663, 0.6498 21.27%, 0.7215 24.39%, 0.7532 25.98%, 0.7829 27.65%, 0.8105, 0.8349 31.14%, 0.8573 32.95%, 0.8776 34.84%, 0.8964 36.87%, 0.9136 39.05%, 0.929 41.37%, 0.9421 43.77%, 0.9537 46.38%, 0.9636 49.14%, 0.9789 55.31%, 0.9888 62.35%, 0.9949 71.06%, 0.9982 82.52%, 0.9997 99.94%); } @property --motion-spring-snappy { syntax: "*"; inherits: false; initial-value: linear(0, 0.0014, 0.0053 1.02%, 0.0126, 0.0227 2.18%, 0.0517 3.41%, 0.094 4.79%, 0.1865 7.26%, 0.4182 12.77%, 0.5246 15.46%, 0.6249, 0.7112, 0.7831 23.95%, 0.8146 25.4%, 0.844, 0.8699 28.45%, 0.8935, 0.9139 31.64%, 0.932, 0.9473, 0.9601 36.65%, 0.9714 38.47%, 0.9808 40.35%, 0.9948 44.49%, 1.0031 49.43%, 1.0057 53.35%, 1.0063 58.14%, 1.0014 80.78%, 1.0001 99.94%); } @property --motion-spring-bouncy { syntax: "*"; inherits: false; initial-value: linear(0, 0.0018, 0.0069, 0.0151 1.74%, 0.0277 2.4%, 0.062 3.7%, 0.1115 5.15%, 0.2211 7.77%, 0.4778 13.21%, 0.5912 15.75%, 0.6987 18.44%, 0.7862 20.98%, 0.861 23.59%, 0.8926, 0.9205, 0.945 27.51%, 0.9671 28.89%, 0.9868, 1.003 31.79%, 1.0224 34.11%, 1.0358 36.58%, 1.0436 39.27%, 1.046 42.31%, 1.0446 44.71%, 1.0406 47.47%, 1.0118 61.84%, 1.0027 69.53%, 0.9981 80.49%, 0.9991 99.94%); } @property --motion-spring-bouncier { syntax: "*"; inherits: false; initial-value: linear(0, 0.0023, 0.0088, 0.0194 1.59%, 0.035 2.17%, 0.078 3.33%, 0.1415 4.64%, 0.2054 5.75%, 0.2821 6.95%, 0.5912 11.45%, 0.7205 13.43%, 0.8393 15.45%, 0.936 17.39%, 0.9778, 1.015, 1.0477, 1.0759, 1.0998 22.22%, 1.1203, 1.1364, 1.1484 25.26%, 1.1586 26.61%, 1.1629 28.06%, 1.1613 29.56%, 1.1537 31.2%, 1.1434 32.6%, 1.1288 34.19%, 1.0508 41.29%, 1.0174 44.87%, 1.0025 46.89%, 0.9911 48.87%, 0.9826 50.9%, 0.9769 53.03%, 0.9735 56.02%, 0.9748 59.45%, 0.9964 72.64%, 1.0031 79.69%, 1.0042 86.83%, 1.0008 99.97%); } @property --motion-spring-bounciest { syntax: "*"; inherits: false; initial-value: linear(0, 0.0032, 0.0131, 0.0294, 0.0524, 0.0824, 0.1192 1.54%, 0.2134 2.11%, 0.3102 2.59%, 0.4297 3.13%, 0.8732 4.95%, 1.0373, 1.1827 6.36%, 1.2972 7.01%, 1.3444, 1.3859, 1.4215, 1.4504, 1.4735, 1.4908, 1.5024, 1.5084 9.5%, 1.5091, 1.5061, 1.4993, 1.4886, 1.4745, 1.4565 11.11%, 1.4082 11.7%, 1.3585 12.2%, 1.295 12.77%, 1.0623 14.64%, 0.9773, 0.9031 16.08%, 0.8449 16.73%, 0.8014, 0.7701 17.95%, 0.7587, 0.7501, 0.7443, 0.7412 19.16%, 0.7421 19.68%, 0.7508 20.21%, 0.7672 20.77%, 0.7917 21.37%, 0.8169 21.87%, 0.8492 22.43%, 0.9681 24.32%, 1.0114, 1.0492 25.75%, 1.0789 26.41%, 1.1008, 1.1167, 1.1271, 1.1317 28.81%, 1.1314, 1.1271 29.87%, 1.1189 30.43%, 1.1063 31.03%, 1.0769 32.11%, 0.9941 34.72%, 0.9748 35.43%, 0.9597 36.09%, 0.9487, 0.9407, 0.9355, 0.933 38.46%, 0.9344 39.38%, 0.9421 40.38%, 0.9566 41.5%, 0.9989 44.12%, 1.0161 45.37%, 1.029 46.75%, 1.0341 48.1%, 1.0335 49.04%, 1.0295 50.05%, 1.0221 51.18%, 0.992 55.02%, 0.9854 56.38%, 0.9827 57.72%, 0.985 59.73%, 1.004 64.67%, 1.0088 67.34%, 1.0076 69.42%, 0.9981 74.28%, 0.9956 76.85%, 0.9961 79.06%, 1.0023 86.46%, 0.999 95.22%, 0.9994 100%); } @property --motion-origin-scale-x { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-origin-scale-y { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-origin-translate-x { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-origin-translate-y { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-origin-rotate { syntax: "*"; inherits: false; initial-value: 0deg; } @property --motion-origin-blur { syntax: "*"; inherits: false; initial-value: 0px; } @property --motion-origin-grayscale { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-origin-opacity { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-origin-background-color { syntax: "*"; inherits: false; } @property --motion-origin-text-color { syntax: "*"; inherits: false; } @property --motion-end-scale-x { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-end-scale-y { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-end-translate-x { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-end-translate-y { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-end-rotate { syntax: "*"; inherits: false; initial-value: 0deg; } @property --motion-end-blur { syntax: "*"; inherits: false; initial-value: 0px; } @property --motion-end-grayscale { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-end-opacity { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-end-background-color { syntax: "*"; inherits: false; } @property --motion-end-text-color { syntax: "*"; inherits: false; } @property --motion-loop-scale-x { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-loop-scale-y { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-loop-translate-x { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-loop-translate-y { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-loop-rotate { syntax: "*"; inherits: false; initial-value: 0deg; } @property --motion-loop-blur { syntax: "*"; inherits: false; initial-value: 0px; } @property --motion-loop-grayscale { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-loop-opacity { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-loop-background-color { syntax: "*"; inherits: false; } @property --motion-loop-text-color { syntax: "*"; inherits: false; } @property --motion-duration { syntax: "*"; inherits: false; initial-value: 700ms; } @property --motion-timing { syntax: "*"; inherits: false; initial-value: cubic-bezier(.165, .84, .44, 1); } @property --motion-perceptual-duration-multiplier { syntax: "*"; inherits: false; initial-value: 1; } @property --motion-delay { syntax: "*"; inherits: false; initial-value: 0ms; } @property --motion-loop-count { syntax: "*"; inherits: false; initial-value: infinite; } @property --motion-scale-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-translate-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-rotate-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-filter-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-opacity-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-background-color-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-text-color-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-scale-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-translate-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-rotate-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-filter-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-opacity-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-background-color-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-text-color-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-scale-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-translate-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-rotate-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-filter-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-opacity-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-background-color-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-text-color-loop-animation { syntax: "*"; inherits: false; initial-value: none; } } @layer base { @media screen and (prefers-reduced-motion: no-preference) { @keyframes motion-scale-in { 0% { scale: var(--motion-origin-scale-x) var(--motion-origin-scale-y); } 100% { scale: 1 1; } } @keyframes motion-scale-out { 0% { scale: 1 1; } 100% { scale: var(--motion-end-scale-x) var(--motion-end-scale-y); } } @keyframes motion-scale-loop-mirror { 0%, 100% { scale: 1 1; } 50% { scale: var(--motion-loop-scale-x) var(--motion-loop-scale-y); } } @keyframes motion-scale-loop-reset { 0% { scale: 1 1; } 100% { scale: var(--motion-loop-scale-x) var(--motion-loop-scale-y); } } @keyframes motion-translate-in { 0% { translate: var(--motion-origin-translate-x) var(--motion-origin-translate-y); } 100% { translate: 0 0; } } @keyframes motion-translate-out { 0% { translate: 0 0; } 100% { translate: var(--motion-end-translate-x) var(--motion-end-translate-y); } } @keyframes motion-translate-loop-mirror { 0%, 100% { translate: 0 0; } 50% { translate: var(--motion-loop-translate-x) var(--motion-loop-translate-y); } } @keyframes motion-translate-loop-reset { 0% { translate: 0 0; } 100% { translate: var(--motion-loop-translate-x) var(--motion-loop-translate-y); } } @keyframes motion-rotate-in { 0% { rotate: var(--motion-origin-rotate); } 100% { rotate: 0; } } @keyframes motion-rotate-out { 0% { rotate: 0; } 100% { rotate: var(--motion-end-rotate); } } @keyframes motion-rotate-loop-mirror { 0%, 100% { rotate: 0deg; } 50% { rotate: var(--motion-loop-rotate); } } @keyframes motion-rotate-loop-reset { 100% { rotate: var(--motion-loop-rotate); } } } @keyframes motion-filter-in { 0% { filter: blur(var(--motion-origin-blur)) grayscale(var(--motion-origin-grayscale)); } 100% { filter: blur(0) grayscale(0); } } @keyframes motion-filter-out { 0% { filter: blur(0) grayscale(0); } 100% { filter: blur(var(--motion-end-blur)) grayscale(var(--motion-end-grayscale)); } } @keyframes motion-filter-loop-mirror { 0%, 100% { filter: blur(0) grayscale(0); } 50% { filter: blur(var(--motion-loop-blur)) grayscale(var(--motion-loop-grayscale)); } } @keyframes motion-filter-loop-reset { 0% { filter: blur(0) grayscale(0); } 100% { filter: blur(var(--motion-loop-blur)) grayscale(var(--motion-loop-grayscale)); } } @keyframes motion-opacity-in { 0% { opacity: var(--motion-origin-opacity); } } @keyframes motion-opacity-out { 100% { opacity: var(--motion-end-opacity); } } @keyframes motion-opacity-loop-mirror { 50% { opacity: var(--motion-loop-opacity); } } @keyframes motion-opacity-loop-reset { 100% { opacity: var(--motion-loop-opacity); } } @keyframes motion-background-color-in { 0% { background-color: var(--motion-origin-background-color); } } @keyframes motion-background-color-out { 100% { background-color: var(--motion-end-background-color); } } @keyframes motion-background-color-loop-mirror { 50% { background-color: var(--motion-loop-background-color); } } @keyframes motion-background-color-loop-reset { 100% { background-color: var(--motion-loop-background-color); } } @keyframes motion-text-color-in { 0% { color: var(--motion-origin-text-color); } } @keyframes motion-text-color-out { 100% { color: var(--motion-end-text-color); } } @keyframes motion-text-color-loop-mirror { 50% { color: var(--motion-loop-text-color); } } @keyframes motion-text-color-loop-reset { 100% { color: var(--motion-loop-text-color); } } } @layer base { @property --motion-bounce { syntax: "*"; inherits: false; initial-value: linear(0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765,1, 0.891 40.9%, 0.848, 0.813, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785,0.813, 0.848, 0.891 68.2%, 1 72.7%, 0.973, 0.953, 0.941, 0.938, 0.941, 0.953,0.973, 1, 0.988, 0.984, 0.988, 1); } @property --motion-spring-smooth { syntax: "*"; inherits: false; initial-value: linear(0, 0.001 0.44%, 0.0045 0.94%, 0.0195 2.03%, 0.0446 3.19%, 0.0811 4.5%, 0.1598 6.82%, 0.3685 12.34%, 0.4693 15.17%, 0.5663, 0.6498 21.27%, 0.7215 24.39%, 0.7532 25.98%, 0.7829 27.65%, 0.8105, 0.8349 31.14%, 0.8573 32.95%, 0.8776 34.84%, 0.8964 36.87%, 0.9136 39.05%, 0.929 41.37%, 0.9421 43.77%, 0.9537 46.38%, 0.9636 49.14%, 0.9789 55.31%, 0.9888 62.35%, 0.9949 71.06%, 0.9982 82.52%, 0.9997 99.94%); } @property --motion-spring-snappy { syntax: "*"; inherits: false; initial-value: linear(0, 0.0014, 0.0053 1.02%, 0.0126, 0.0227 2.18%, 0.0517 3.41%, 0.094 4.79%, 0.1865 7.26%, 0.4182 12.77%, 0.5246 15.46%, 0.6249, 0.7112, 0.7831 23.95%, 0.8146 25.4%, 0.844, 0.8699 28.45%, 0.8935, 0.9139 31.64%, 0.932, 0.9473, 0.9601 36.65%, 0.9714 38.47%, 0.9808 40.35%, 0.9948 44.49%, 1.0031 49.43%, 1.0057 53.35%, 1.0063 58.14%, 1.0014 80.78%, 1.0001 99.94%); } @property --motion-spring-bouncy { syntax: "*"; inherits: false; initial-value: linear(0, 0.0018, 0.0069, 0.0151 1.74%, 0.0277 2.4%, 0.062 3.7%, 0.1115 5.15%, 0.2211 7.77%, 0.4778 13.21%, 0.5912 15.75%, 0.6987 18.44%, 0.7862 20.98%, 0.861 23.59%, 0.8926, 0.9205, 0.945 27.51%, 0.9671 28.89%, 0.9868, 1.003 31.79%, 1.0224 34.11%, 1.0358 36.58%, 1.0436 39.27%, 1.046 42.31%, 1.0446 44.71%, 1.0406 47.47%, 1.0118 61.84%, 1.0027 69.53%, 0.9981 80.49%, 0.9991 99.94%); } @property --motion-spring-bouncier { syntax: "*"; inherits: false; initial-value: linear(0, 0.0023, 0.0088, 0.0194 1.59%, 0.035 2.17%, 0.078 3.33%, 0.1415 4.64%, 0.2054 5.75%, 0.2821 6.95%, 0.5912 11.45%, 0.7205 13.43%, 0.8393 15.45%, 0.936 17.39%, 0.9778, 1.015, 1.0477, 1.0759, 1.0998 22.22%, 1.1203, 1.1364, 1.1484 25.26%, 1.1586 26.61%, 1.1629 28.06%, 1.1613 29.56%, 1.1537 31.2%, 1.1434 32.6%, 1.1288 34.19%, 1.0508 41.29%, 1.0174 44.87%, 1.0025 46.89%, 0.9911 48.87%, 0.9826 50.9%, 0.9769 53.03%, 0.9735 56.02%, 0.9748 59.45%, 0.9964 72.64%, 1.0031 79.69%, 1.0042 86.83%, 1.0008 99.97%); } @property --motion-spring-bounciest { syntax: "*"; inherits: false; initial-value: linear(0, 0.0032, 0.0131, 0.0294, 0.0524, 0.0824, 0.1192 1.54%, 0.2134 2.11%, 0.3102 2.59%, 0.4297 3.13%, 0.8732 4.95%, 1.0373, 1.1827 6.36%, 1.2972 7.01%, 1.3444, 1.3859, 1.4215, 1.4504, 1.4735, 1.4908, 1.5024, 1.5084 9.5%, 1.5091, 1.5061, 1.4993, 1.4886, 1.4745, 1.4565 11.11%, 1.4082 11.7%, 1.3585 12.2%, 1.295 12.77%, 1.0623 14.64%, 0.9773, 0.9031 16.08%, 0.8449 16.73%, 0.8014, 0.7701 17.95%, 0.7587, 0.7501, 0.7443, 0.7412 19.16%, 0.7421 19.68%, 0.7508 20.21%, 0.7672 20.77%, 0.7917 21.37%, 0.8169 21.87%, 0.8492 22.43%, 0.9681 24.32%, 1.0114, 1.0492 25.75%, 1.0789 26.41%, 1.1008, 1.1167, 1.1271, 1.1317 28.81%, 1.1314, 1.1271 29.87%, 1.1189 30.43%, 1.1063 31.03%, 1.0769 32.11%, 0.9941 34.72%, 0.9748 35.43%, 0.9597 36.09%, 0.9487, 0.9407, 0.9355, 0.933 38.46%, 0.9344 39.38%, 0.9421 40.38%, 0.9566 41.5%, 0.9989 44.12%, 1.0161 45.37%, 1.029 46.75%, 1.0341 48.1%, 1.0335 49.04%, 1.0295 50.05%, 1.0221 51.18%, 0.992 55.02%, 0.9854 56.38%, 0.9827 57.72%, 0.985 59.73%, 1.004 64.67%, 1.0088 67.34%, 1.0076 69.42%, 0.9981 74.28%, 0.9956 76.85%, 0.9961 79.06%, 1.0023 86.46%, 0.999 95.22%, 0.9994 100%); } @property --motion-origin-scale-x { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-origin-scale-y { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-origin-translate-x { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-origin-translate-y { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-origin-rotate { syntax: "*"; inherits: false; initial-value: 0deg; } @property --motion-origin-blur { syntax: "*"; inherits: false; initial-value: 0px; } @property --motion-origin-grayscale { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-origin-opacity { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-origin-background-color { syntax: "*"; inherits: false; } @property --motion-origin-text-color { syntax: "*"; inherits: false; } @property --motion-end-scale-x { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-end-scale-y { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-end-translate-x { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-end-translate-y { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-end-rotate { syntax: "*"; inherits: false; initial-value: 0deg; } @property --motion-end-blur { syntax: "*"; inherits: false; initial-value: 0px; } @property --motion-end-grayscale { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-end-opacity { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-end-background-color { syntax: "*"; inherits: false; } @property --motion-end-text-color { syntax: "*"; inherits: false; } @property --motion-loop-scale-x { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-loop-scale-y { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-loop-translate-x { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-loop-translate-y { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-loop-rotate { syntax: "*"; inherits: false; initial-value: 0deg; } @property --motion-loop-blur { syntax: "*"; inherits: false; initial-value: 0px; } @property --motion-loop-grayscale { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-loop-opacity { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-loop-background-color { syntax: "*"; inherits: false; } @property --motion-loop-text-color { syntax: "*"; inherits: false; } @property --motion-duration { syntax: "*"; inherits: false; initial-value: 700ms; } @property --motion-timing { syntax: "*"; inherits: false; initial-value: cubic-bezier(.165, .84, .44, 1); } @property --motion-perceptual-duration-multiplier { syntax: "*"; inherits: false; initial-value: 1; } @property --motion-delay { syntax: "*"; inherits: false; initial-value: 0ms; } @property --motion-loop-count { syntax: "*"; inherits: false; initial-value: infinite; } @property --motion-scale-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-translate-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-rotate-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-filter-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-opacity-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-background-color-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-text-color-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-scale-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-translate-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-rotate-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-filter-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-opacity-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-background-color-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-text-color-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-scale-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-translate-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-rotate-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-filter-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-opacity-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-background-color-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-text-color-loop-animation { syntax: "*"; inherits: false; initial-value: none; } } @layer base { @media screen and (prefers-reduced-motion: no-preference) { @keyframes motion-scale-in { 0% { scale: var(--motion-origin-scale-x) var(--motion-origin-scale-y); } 100% { scale: 1 1; } } @keyframes motion-scale-out { 0% { scale: 1 1; } 100% { scale: var(--motion-end-scale-x) var(--motion-end-scale-y); } } @keyframes motion-scale-loop-mirror { 0%, 100% { scale: 1 1; } 50% { scale: var(--motion-loop-scale-x) var(--motion-loop-scale-y); } } @keyframes motion-scale-loop-reset { 0% { scale: 1 1; } 100% { scale: var(--motion-loop-scale-x) var(--motion-loop-scale-y); } } @keyframes motion-translate-in { 0% { translate: var(--motion-origin-translate-x) var(--motion-origin-translate-y); } 100% { translate: 0 0; } } @keyframes motion-translate-out { 0% { translate: 0 0; } 100% { translate: var(--motion-end-translate-x) var(--motion-end-translate-y); } } @keyframes motion-translate-loop-mirror { 0%, 100% { translate: 0 0; } 50% { translate: var(--motion-loop-translate-x) var(--motion-loop-translate-y); } } @keyframes motion-translate-loop-reset { 0% { translate: 0 0; } 100% { translate: var(--motion-loop-translate-x) var(--motion-loop-translate-y); } } @keyframes motion-rotate-in { 0% { rotate: var(--motion-origin-rotate); } 100% { rotate: 0; } } @keyframes motion-rotate-out { 0% { rotate: 0; } 100% { rotate: var(--motion-end-rotate); } } @keyframes motion-rotate-loop-mirror { 0%, 100% { rotate: 0deg; } 50% { rotate: var(--motion-loop-rotate); } } @keyframes motion-rotate-loop-reset { 100% { rotate: var(--motion-loop-rotate); } } } @keyframes motion-filter-in { 0% { filter: blur(var(--motion-origin-blur)) grayscale(var(--motion-origin-grayscale)); } 100% { filter: blur(0) grayscale(0); } } @keyframes motion-filter-out { 0% { filter: blur(0) grayscale(0); } 100% { filter: blur(var(--motion-end-blur)) grayscale(var(--motion-end-grayscale)); } } @keyframes motion-filter-loop-mirror { 0%, 100% { filter: blur(0) grayscale(0); } 50% { filter: blur(var(--motion-loop-blur)) grayscale(var(--motion-loop-grayscale)); } } @keyframes motion-filter-loop-reset { 0% { filter: blur(0) grayscale(0); } 100% { filter: blur(var(--motion-loop-blur)) grayscale(var(--motion-loop-grayscale)); } } @keyframes motion-opacity-in { 0% { opacity: var(--motion-origin-opacity); } } @keyframes motion-opacity-out { 100% { opacity: var(--motion-end-opacity); } } @keyframes motion-opacity-loop-mirror { 50% { opacity: var(--motion-loop-opacity); } } @keyframes motion-opacity-loop-reset { 100% { opacity: var(--motion-loop-opacity); } } @keyframes motion-background-color-in { 0% { background-color: var(--motion-origin-background-color); } } @keyframes motion-background-color-out { 100% { background-color: var(--motion-end-background-color); } } @keyframes motion-background-color-loop-mirror { 50% { background-color: var(--motion-loop-background-color); } } @keyframes motion-background-color-loop-reset { 100% { background-color: var(--motion-loop-background-color); } } @keyframes motion-text-color-in { 0% { color: var(--motion-origin-text-color); } } @keyframes motion-text-color-out { 100% { color: var(--motion-end-text-color); } } @keyframes motion-text-color-loop-mirror { 50% { color: var(--motion-loop-text-color); } } @keyframes motion-text-color-loop-reset { 100% { color: var(--motion-loop-text-color); } } } @layer base { @property --motion-bounce { syntax: "*"; inherits: false; initial-value: linear(0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765,1, 0.891 40.9%, 0.848, 0.813, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785,0.813, 0.848, 0.891 68.2%, 1 72.7%, 0.973, 0.953, 0.941, 0.938, 0.941, 0.953,0.973, 1, 0.988, 0.984, 0.988, 1); } @property --motion-spring-smooth { syntax: "*"; inherits: false; initial-value: linear(0, 0.001 0.44%, 0.0045 0.94%, 0.0195 2.03%, 0.0446 3.19%, 0.0811 4.5%, 0.1598 6.82%, 0.3685 12.34%, 0.4693 15.17%, 0.5663, 0.6498 21.27%, 0.7215 24.39%, 0.7532 25.98%, 0.7829 27.65%, 0.8105, 0.8349 31.14%, 0.8573 32.95%, 0.8776 34.84%, 0.8964 36.87%, 0.9136 39.05%, 0.929 41.37%, 0.9421 43.77%, 0.9537 46.38%, 0.9636 49.14%, 0.9789 55.31%, 0.9888 62.35%, 0.9949 71.06%, 0.9982 82.52%, 0.9997 99.94%); } @property --motion-spring-snappy { syntax: "*"; inherits: false; initial-value: linear(0, 0.0014, 0.0053 1.02%, 0.0126, 0.0227 2.18%, 0.0517 3.41%, 0.094 4.79%, 0.1865 7.26%, 0.4182 12.77%, 0.5246 15.46%, 0.6249, 0.7112, 0.7831 23.95%, 0.8146 25.4%, 0.844, 0.8699 28.45%, 0.8935, 0.9139 31.64%, 0.932, 0.9473, 0.9601 36.65%, 0.9714 38.47%, 0.9808 40.35%, 0.9948 44.49%, 1.0031 49.43%, 1.0057 53.35%, 1.0063 58.14%, 1.0014 80.78%, 1.0001 99.94%); } @property --motion-spring-bouncy { syntax: "*"; inherits: false; initial-value: linear(0, 0.0018, 0.0069, 0.0151 1.74%, 0.0277 2.4%, 0.062 3.7%, 0.1115 5.15%, 0.2211 7.77%, 0.4778 13.21%, 0.5912 15.75%, 0.6987 18.44%, 0.7862 20.98%, 0.861 23.59%, 0.8926, 0.9205, 0.945 27.51%, 0.9671 28.89%, 0.9868, 1.003 31.79%, 1.0224 34.11%, 1.0358 36.58%, 1.0436 39.27%, 1.046 42.31%, 1.0446 44.71%, 1.0406 47.47%, 1.0118 61.84%, 1.0027 69.53%, 0.9981 80.49%, 0.9991 99.94%); } @property --motion-spring-bouncier { syntax: "*"; inherits: false; initial-value: linear(0, 0.0023, 0.0088, 0.0194 1.59%, 0.035 2.17%, 0.078 3.33%, 0.1415 4.64%, 0.2054 5.75%, 0.2821 6.95%, 0.5912 11.45%, 0.7205 13.43%, 0.8393 15.45%, 0.936 17.39%, 0.9778, 1.015, 1.0477, 1.0759, 1.0998 22.22%, 1.1203, 1.1364, 1.1484 25.26%, 1.1586 26.61%, 1.1629 28.06%, 1.1613 29.56%, 1.1537 31.2%, 1.1434 32.6%, 1.1288 34.19%, 1.0508 41.29%, 1.0174 44.87%, 1.0025 46.89%, 0.9911 48.87%, 0.9826 50.9%, 0.9769 53.03%, 0.9735 56.02%, 0.9748 59.45%, 0.9964 72.64%, 1.0031 79.69%, 1.0042 86.83%, 1.0008 99.97%); } @property --motion-spring-bounciest { syntax: "*"; inherits: false; initial-value: linear(0, 0.0032, 0.0131, 0.0294, 0.0524, 0.0824, 0.1192 1.54%, 0.2134 2.11%, 0.3102 2.59%, 0.4297 3.13%, 0.8732 4.95%, 1.0373, 1.1827 6.36%, 1.2972 7.01%, 1.3444, 1.3859, 1.4215, 1.4504, 1.4735, 1.4908, 1.5024, 1.5084 9.5%, 1.5091, 1.5061, 1.4993, 1.4886, 1.4745, 1.4565 11.11%, 1.4082 11.7%, 1.3585 12.2%, 1.295 12.77%, 1.0623 14.64%, 0.9773, 0.9031 16.08%, 0.8449 16.73%, 0.8014, 0.7701 17.95%, 0.7587, 0.7501, 0.7443, 0.7412 19.16%, 0.7421 19.68%, 0.7508 20.21%, 0.7672 20.77%, 0.7917 21.37%, 0.8169 21.87%, 0.8492 22.43%, 0.9681 24.32%, 1.0114, 1.0492 25.75%, 1.0789 26.41%, 1.1008, 1.1167, 1.1271, 1.1317 28.81%, 1.1314, 1.1271 29.87%, 1.1189 30.43%, 1.1063 31.03%, 1.0769 32.11%, 0.9941 34.72%, 0.9748 35.43%, 0.9597 36.09%, 0.9487, 0.9407, 0.9355, 0.933 38.46%, 0.9344 39.38%, 0.9421 40.38%, 0.9566 41.5%, 0.9989 44.12%, 1.0161 45.37%, 1.029 46.75%, 1.0341 48.1%, 1.0335 49.04%, 1.0295 50.05%, 1.0221 51.18%, 0.992 55.02%, 0.9854 56.38%, 0.9827 57.72%, 0.985 59.73%, 1.004 64.67%, 1.0088 67.34%, 1.0076 69.42%, 0.9981 74.28%, 0.9956 76.85%, 0.9961 79.06%, 1.0023 86.46%, 0.999 95.22%, 0.9994 100%); } @property --motion-origin-scale-x { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-origin-scale-y { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-origin-translate-x { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-origin-translate-y { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-origin-rotate { syntax: "*"; inherits: false; initial-value: 0deg; } @property --motion-origin-blur { syntax: "*"; inherits: false; initial-value: 0px; } @property --motion-origin-grayscale { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-origin-opacity { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-origin-background-color { syntax: "*"; inherits: false; } @property --motion-origin-text-color { syntax: "*"; inherits: false; } @property --motion-end-scale-x { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-end-scale-y { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-end-translate-x { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-end-translate-y { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-end-rotate { syntax: "*"; inherits: false; initial-value: 0deg; } @property --motion-end-blur { syntax: "*"; inherits: false; initial-value: 0px; } @property --motion-end-grayscale { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-end-opacity { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-end-background-color { syntax: "*"; inherits: false; } @property --motion-end-text-color { syntax: "*"; inherits: false; } @property --motion-loop-scale-x { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-loop-scale-y { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-loop-translate-x { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-loop-translate-y { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-loop-rotate { syntax: "*"; inherits: false; initial-value: 0deg; } @property --motion-loop-blur { syntax: "*"; inherits: false; initial-value: 0px; } @property --motion-loop-grayscale { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-loop-opacity { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-loop-background-color { syntax: "*"; inherits: false; } @property --motion-loop-text-color { syntax: "*"; inherits: false; } @property --motion-duration { syntax: "*"; inherits: false; initial-value: 700ms; } @property --motion-timing { syntax: "*"; inherits: false; initial-value: cubic-bezier(.165, .84, .44, 1); } @property --motion-perceptual-duration-multiplier { syntax: "*"; inherits: false; initial-value: 1; } @property --motion-delay { syntax: "*"; inherits: false; initial-value: 0ms; } @property --motion-loop-count { syntax: "*"; inherits: false; initial-value: infinite; } @property --motion-scale-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-translate-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-rotate-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-filter-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-opacity-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-background-color-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-text-color-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-scale-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-translate-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-rotate-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-filter-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-opacity-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-background-color-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-text-color-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-scale-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-translate-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-rotate-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-filter-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-opacity-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-background-color-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-text-color-loop-animation { syntax: "*"; inherits: false; initial-value: none; } } @layer base { @media screen and (prefers-reduced-motion: no-preference) { @keyframes motion-scale-in { 0% { scale: var(--motion-origin-scale-x) var(--motion-origin-scale-y); } 100% { scale: 1 1; } } @keyframes motion-scale-out { 0% { scale: 1 1; } 100% { scale: var(--motion-end-scale-x) var(--motion-end-scale-y); } } @keyframes motion-scale-loop-mirror { 0%, 100% { scale: 1 1; } 50% { scale: var(--motion-loop-scale-x) var(--motion-loop-scale-y); } } @keyframes motion-scale-loop-reset { 0% { scale: 1 1; } 100% { scale: var(--motion-loop-scale-x) var(--motion-loop-scale-y); } } @keyframes motion-translate-in { 0% { translate: var(--motion-origin-translate-x) var(--motion-origin-translate-y); } 100% { translate: 0 0; } } @keyframes motion-translate-out { 0% { translate: 0 0; } 100% { translate: var(--motion-end-translate-x) var(--motion-end-translate-y); } } @keyframes motion-translate-loop-mirror { 0%, 100% { translate: 0 0; } 50% { translate: var(--motion-loop-translate-x) var(--motion-loop-translate-y); } } @keyframes motion-translate-loop-reset { 0% { translate: 0 0; } 100% { translate: var(--motion-loop-translate-x) var(--motion-loop-translate-y); } } @keyframes motion-rotate-in { 0% { rotate: var(--motion-origin-rotate); } 100% { rotate: 0; } } @keyframes motion-rotate-out { 0% { rotate: 0; } 100% { rotate: var(--motion-end-rotate); } } @keyframes motion-rotate-loop-mirror { 0%, 100% { rotate: 0deg; } 50% { rotate: var(--motion-loop-rotate); } } @keyframes motion-rotate-loop-reset { 100% { rotate: var(--motion-loop-rotate); } } } @keyframes motion-filter-in { 0% { filter: blur(var(--motion-origin-blur)) grayscale(var(--motion-origin-grayscale)); } 100% { filter: blur(0) grayscale(0); } } @keyframes motion-filter-out { 0% { filter: blur(0) grayscale(0); } 100% { filter: blur(var(--motion-end-blur)) grayscale(var(--motion-end-grayscale)); } } @keyframes motion-filter-loop-mirror { 0%, 100% { filter: blur(0) grayscale(0); } 50% { filter: blur(var(--motion-loop-blur)) grayscale(var(--motion-loop-grayscale)); } } @keyframes motion-filter-loop-reset { 0% { filter: blur(0) grayscale(0); } 100% { filter: blur(var(--motion-loop-blur)) grayscale(var(--motion-loop-grayscale)); } } @keyframes motion-opacity-in { 0% { opacity: var(--motion-origin-opacity); } } @keyframes motion-opacity-out { 100% { opacity: var(--motion-end-opacity); } } @keyframes motion-opacity-loop-mirror { 50% { opacity: var(--motion-loop-opacity); } } @keyframes motion-opacity-loop-reset { 100% { opacity: var(--motion-loop-opacity); } } @keyframes motion-background-color-in { 0% { background-color: var(--motion-origin-background-color); } } @keyframes motion-background-color-out { 100% { background-color: var(--motion-end-background-color); } } @keyframes motion-background-color-loop-mirror { 50% { background-color: var(--motion-loop-background-color); } } @keyframes motion-background-color-loop-reset { 100% { background-color: var(--motion-loop-background-color); } } @keyframes motion-text-color-in { 0% { color: var(--motion-origin-text-color); } } @keyframes motion-text-color-out { 100% { color: var(--motion-end-text-color); } } @keyframes motion-text-color-loop-mirror { 50% { color: var(--motion-loop-text-color); } } @keyframes motion-text-color-loop-reset { 100% { color: var(--motion-loop-text-color); } } } @layer base { :root:has(input.theme-controller[value=gourmet-dark]:checked),[data-theme="gourmet-dark"] { color-scheme: dark; --color-base-100: oklch(32.38% 0.009 67.5); --color-base-200: oklch(0.35 0.01 59.3); --color-base-300: oklch(0.48 0.05 54.27); --color-base-content: oklch(0.96 0.01 54.55); --color-primary: oklch(70.49% 0.187 47.6); --color-primary-content: oklch(97.96% 0.016 73.68); --color-secondary: oklch(55.79% 0.022 301.91); --color-secondary-content: oklch(95.05% 0.003 308.43); --color-accent: oklch(65.59% 0.212 354.31); --color-accent-content: oklch(97.14% 0.014 343.2); --color-neutral: oklch(0.82 0.03 67.39); --color-neutral-content: oklch(99.45% 0.002 67.8); --color-info: oklch(68.47% 0.148 237.32); --color-info-content: oklch(97.71% 0.012 236.62); --color-success: oklch(69.59% 0.149 162.48); --color-success-content: oklch(97.93% 0.021 166.11); --color-warning: oklch(57.59% 0.247 287.24); --color-warning-content: oklch(96.57% 0.017 289.61); --color-error: oklch(65.39% 0.222 25.86); --color-error-content: oklch(98.76% 0.009 67.73); --radius-selector: 2rem; --radius-field: 2rem; --radius-box: 0.75rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; } } @layer base { @property --motion-bounce { syntax: "*"; inherits: false; initial-value: linear(0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765,1, 0.891 40.9%, 0.848, 0.813, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785,0.813, 0.848, 0.891 68.2%, 1 72.7%, 0.973, 0.953, 0.941, 0.938, 0.941, 0.953,0.973, 1, 0.988, 0.984, 0.988, 1); } @property --motion-spring-smooth { syntax: "*"; inherits: false; initial-value: linear(0, 0.001 0.44%, 0.0045 0.94%, 0.0195 2.03%, 0.0446 3.19%, 0.0811 4.5%, 0.1598 6.82%, 0.3685 12.34%, 0.4693 15.17%, 0.5663, 0.6498 21.27%, 0.7215 24.39%, 0.7532 25.98%, 0.7829 27.65%, 0.8105, 0.8349 31.14%, 0.8573 32.95%, 0.8776 34.84%, 0.8964 36.87%, 0.9136 39.05%, 0.929 41.37%, 0.9421 43.77%, 0.9537 46.38%, 0.9636 49.14%, 0.9789 55.31%, 0.9888 62.35%, 0.9949 71.06%, 0.9982 82.52%, 0.9997 99.94%); } @property --motion-spring-snappy { syntax: "*"; inherits: false; initial-value: linear(0, 0.0014, 0.0053 1.02%, 0.0126, 0.0227 2.18%, 0.0517 3.41%, 0.094 4.79%, 0.1865 7.26%, 0.4182 12.77%, 0.5246 15.46%, 0.6249, 0.7112, 0.7831 23.95%, 0.8146 25.4%, 0.844, 0.8699 28.45%, 0.8935, 0.9139 31.64%, 0.932, 0.9473, 0.9601 36.65%, 0.9714 38.47%, 0.9808 40.35%, 0.9948 44.49%, 1.0031 49.43%, 1.0057 53.35%, 1.0063 58.14%, 1.0014 80.78%, 1.0001 99.94%); } @property --motion-spring-bouncy { syntax: "*"; inherits: false; initial-value: linear(0, 0.0018, 0.0069, 0.0151 1.74%, 0.0277 2.4%, 0.062 3.7%, 0.1115 5.15%, 0.2211 7.77%, 0.4778 13.21%, 0.5912 15.75%, 0.6987 18.44%, 0.7862 20.98%, 0.861 23.59%, 0.8926, 0.9205, 0.945 27.51%, 0.9671 28.89%, 0.9868, 1.003 31.79%, 1.0224 34.11%, 1.0358 36.58%, 1.0436 39.27%, 1.046 42.31%, 1.0446 44.71%, 1.0406 47.47%, 1.0118 61.84%, 1.0027 69.53%, 0.9981 80.49%, 0.9991 99.94%); } @property --motion-spring-bouncier { syntax: "*"; inherits: false; initial-value: linear(0, 0.0023, 0.0088, 0.0194 1.59%, 0.035 2.17%, 0.078 3.33%, 0.1415 4.64%, 0.2054 5.75%, 0.2821 6.95%, 0.5912 11.45%, 0.7205 13.43%, 0.8393 15.45%, 0.936 17.39%, 0.9778, 1.015, 1.0477, 1.0759, 1.0998 22.22%, 1.1203, 1.1364, 1.1484 25.26%, 1.1586 26.61%, 1.1629 28.06%, 1.1613 29.56%, 1.1537 31.2%, 1.1434 32.6%, 1.1288 34.19%, 1.0508 41.29%, 1.0174 44.87%, 1.0025 46.89%, 0.9911 48.87%, 0.9826 50.9%, 0.9769 53.03%, 0.9735 56.02%, 0.9748 59.45%, 0.9964 72.64%, 1.0031 79.69%, 1.0042 86.83%, 1.0008 99.97%); } @property --motion-spring-bounciest { syntax: "*"; inherits: false; initial-value: linear(0, 0.0032, 0.0131, 0.0294, 0.0524, 0.0824, 0.1192 1.54%, 0.2134 2.11%, 0.3102 2.59%, 0.4297 3.13%, 0.8732 4.95%, 1.0373, 1.1827 6.36%, 1.2972 7.01%, 1.3444, 1.3859, 1.4215, 1.4504, 1.4735, 1.4908, 1.5024, 1.5084 9.5%, 1.5091, 1.5061, 1.4993, 1.4886, 1.4745, 1.4565 11.11%, 1.4082 11.7%, 1.3585 12.2%, 1.295 12.77%, 1.0623 14.64%, 0.9773, 0.9031 16.08%, 0.8449 16.73%, 0.8014, 0.7701 17.95%, 0.7587, 0.7501, 0.7443, 0.7412 19.16%, 0.7421 19.68%, 0.7508 20.21%, 0.7672 20.77%, 0.7917 21.37%, 0.8169 21.87%, 0.8492 22.43%, 0.9681 24.32%, 1.0114, 1.0492 25.75%, 1.0789 26.41%, 1.1008, 1.1167, 1.1271, 1.1317 28.81%, 1.1314, 1.1271 29.87%, 1.1189 30.43%, 1.1063 31.03%, 1.0769 32.11%, 0.9941 34.72%, 0.9748 35.43%, 0.9597 36.09%, 0.9487, 0.9407, 0.9355, 0.933 38.46%, 0.9344 39.38%, 0.9421 40.38%, 0.9566 41.5%, 0.9989 44.12%, 1.0161 45.37%, 1.029 46.75%, 1.0341 48.1%, 1.0335 49.04%, 1.0295 50.05%, 1.0221 51.18%, 0.992 55.02%, 0.9854 56.38%, 0.9827 57.72%, 0.985 59.73%, 1.004 64.67%, 1.0088 67.34%, 1.0076 69.42%, 0.9981 74.28%, 0.9956 76.85%, 0.9961 79.06%, 1.0023 86.46%, 0.999 95.22%, 0.9994 100%); } @property --motion-origin-scale-x { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-origin-scale-y { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-origin-translate-x { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-origin-translate-y { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-origin-rotate { syntax: "*"; inherits: false; initial-value: 0deg; } @property --motion-origin-blur { syntax: "*"; inherits: false; initial-value: 0px; } @property --motion-origin-grayscale { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-origin-opacity { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-origin-background-color { syntax: "*"; inherits: false; } @property --motion-origin-text-color { syntax: "*"; inherits: false; } @property --motion-end-scale-x { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-end-scale-y { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-end-translate-x { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-end-translate-y { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-end-rotate { syntax: "*"; inherits: false; initial-value: 0deg; } @property --motion-end-blur { syntax: "*"; inherits: false; initial-value: 0px; } @property --motion-end-grayscale { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-end-opacity { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-end-background-color { syntax: "*"; inherits: false; } @property --motion-end-text-color { syntax: "*"; inherits: false; } @property --motion-loop-scale-x { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-loop-scale-y { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-loop-translate-x { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-loop-translate-y { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-loop-rotate { syntax: "*"; inherits: false; initial-value: 0deg; } @property --motion-loop-blur { syntax: "*"; inherits: false; initial-value: 0px; } @property --motion-loop-grayscale { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-loop-opacity { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-loop-background-color { syntax: "*"; inherits: false; } @property --motion-loop-text-color { syntax: "*"; inherits: false; } @property --motion-duration { syntax: "*"; inherits: false; initial-value: 700ms; } @property --motion-timing { syntax: "*"; inherits: false; initial-value: cubic-bezier(.165, .84, .44, 1); } @property --motion-perceptual-duration-multiplier { syntax: "*"; inherits: false; initial-value: 1; } @property --motion-delay { syntax: "*"; inherits: false; initial-value: 0ms; } @property --motion-loop-count { syntax: "*"; inherits: false; initial-value: infinite; } @property --motion-scale-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-translate-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-rotate-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-filter-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-opacity-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-background-color-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-text-color-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-scale-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-translate-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-rotate-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-filter-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-opacity-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-background-color-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-text-color-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-scale-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-translate-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-rotate-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-filter-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-opacity-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-background-color-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-text-color-loop-animation { syntax: "*"; inherits: false; initial-value: none; } } @layer base { @media screen and (prefers-reduced-motion: no-preference) { @keyframes motion-scale-in { 0% { scale: var(--motion-origin-scale-x) var(--motion-origin-scale-y); } 100% { scale: 1 1; } } @keyframes motion-scale-out { 0% { scale: 1 1; } 100% { scale: var(--motion-end-scale-x) var(--motion-end-scale-y); } } @keyframes motion-scale-loop-mirror { 0%, 100% { scale: 1 1; } 50% { scale: var(--motion-loop-scale-x) var(--motion-loop-scale-y); } } @keyframes motion-scale-loop-reset { 0% { scale: 1 1; } 100% { scale: var(--motion-loop-scale-x) var(--motion-loop-scale-y); } } @keyframes motion-translate-in { 0% { translate: var(--motion-origin-translate-x) var(--motion-origin-translate-y); } 100% { translate: 0 0; } } @keyframes motion-translate-out { 0% { translate: 0 0; } 100% { translate: var(--motion-end-translate-x) var(--motion-end-translate-y); } } @keyframes motion-translate-loop-mirror { 0%, 100% { translate: 0 0; } 50% { translate: var(--motion-loop-translate-x) var(--motion-loop-translate-y); } } @keyframes motion-translate-loop-reset { 0% { translate: 0 0; } 100% { translate: var(--motion-loop-translate-x) var(--motion-loop-translate-y); } } @keyframes motion-rotate-in { 0% { rotate: var(--motion-origin-rotate); } 100% { rotate: 0; } } @keyframes motion-rotate-out { 0% { rotate: 0; } 100% { rotate: var(--motion-end-rotate); } } @keyframes motion-rotate-loop-mirror { 0%, 100% { rotate: 0deg; } 50% { rotate: var(--motion-loop-rotate); } } @keyframes motion-rotate-loop-reset { 100% { rotate: var(--motion-loop-rotate); } } } @keyframes motion-filter-in { 0% { filter: blur(var(--motion-origin-blur)) grayscale(var(--motion-origin-grayscale)); } 100% { filter: blur(0) grayscale(0); } } @keyframes motion-filter-out { 0% { filter: blur(0) grayscale(0); } 100% { filter: blur(var(--motion-end-blur)) grayscale(var(--motion-end-grayscale)); } } @keyframes motion-filter-loop-mirror { 0%, 100% { filter: blur(0) grayscale(0); } 50% { filter: blur(var(--motion-loop-blur)) grayscale(var(--motion-loop-grayscale)); } } @keyframes motion-filter-loop-reset { 0% { filter: blur(0) grayscale(0); } 100% { filter: blur(var(--motion-loop-blur)) grayscale(var(--motion-loop-grayscale)); } } @keyframes motion-opacity-in { 0% { opacity: var(--motion-origin-opacity); } } @keyframes motion-opacity-out { 100% { opacity: var(--motion-end-opacity); } } @keyframes motion-opacity-loop-mirror { 50% { opacity: var(--motion-loop-opacity); } } @keyframes motion-opacity-loop-reset { 100% { opacity: var(--motion-loop-opacity); } } @keyframes motion-background-color-in { 0% { background-color: var(--motion-origin-background-color); } } @keyframes motion-background-color-out { 100% { background-color: var(--motion-end-background-color); } } @keyframes motion-background-color-loop-mirror { 50% { background-color: var(--motion-loop-background-color); } } @keyframes motion-background-color-loop-reset { 100% { background-color: var(--motion-loop-background-color); } } @keyframes motion-text-color-in { 0% { color: var(--motion-origin-text-color); } } @keyframes motion-text-color-out { 100% { color: var(--motion-end-text-color); } } @keyframes motion-text-color-loop-mirror { 50% { color: var(--motion-loop-text-color); } } @keyframes motion-text-color-loop-reset { 100% { color: var(--motion-loop-text-color); } } } @layer base { @property --motion-bounce { syntax: "*"; inherits: false; initial-value: linear(0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765,1, 0.891 40.9%, 0.848, 0.813, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785,0.813, 0.848, 0.891 68.2%, 1 72.7%, 0.973, 0.953, 0.941, 0.938, 0.941, 0.953,0.973, 1, 0.988, 0.984, 0.988, 1); } @property --motion-spring-smooth { syntax: "*"; inherits: false; initial-value: linear(0, 0.001 0.44%, 0.0045 0.94%, 0.0195 2.03%, 0.0446 3.19%, 0.0811 4.5%, 0.1598 6.82%, 0.3685 12.34%, 0.4693 15.17%, 0.5663, 0.6498 21.27%, 0.7215 24.39%, 0.7532 25.98%, 0.7829 27.65%, 0.8105, 0.8349 31.14%, 0.8573 32.95%, 0.8776 34.84%, 0.8964 36.87%, 0.9136 39.05%, 0.929 41.37%, 0.9421 43.77%, 0.9537 46.38%, 0.9636 49.14%, 0.9789 55.31%, 0.9888 62.35%, 0.9949 71.06%, 0.9982 82.52%, 0.9997 99.94%); } @property --motion-spring-snappy { syntax: "*"; inherits: false; initial-value: linear(0, 0.0014, 0.0053 1.02%, 0.0126, 0.0227 2.18%, 0.0517 3.41%, 0.094 4.79%, 0.1865 7.26%, 0.4182 12.77%, 0.5246 15.46%, 0.6249, 0.7112, 0.7831 23.95%, 0.8146 25.4%, 0.844, 0.8699 28.45%, 0.8935, 0.9139 31.64%, 0.932, 0.9473, 0.9601 36.65%, 0.9714 38.47%, 0.9808 40.35%, 0.9948 44.49%, 1.0031 49.43%, 1.0057 53.35%, 1.0063 58.14%, 1.0014 80.78%, 1.0001 99.94%); } @property --motion-spring-bouncy { syntax: "*"; inherits: false; initial-value: linear(0, 0.0018, 0.0069, 0.0151 1.74%, 0.0277 2.4%, 0.062 3.7%, 0.1115 5.15%, 0.2211 7.77%, 0.4778 13.21%, 0.5912 15.75%, 0.6987 18.44%, 0.7862 20.98%, 0.861 23.59%, 0.8926, 0.9205, 0.945 27.51%, 0.9671 28.89%, 0.9868, 1.003 31.79%, 1.0224 34.11%, 1.0358 36.58%, 1.0436 39.27%, 1.046 42.31%, 1.0446 44.71%, 1.0406 47.47%, 1.0118 61.84%, 1.0027 69.53%, 0.9981 80.49%, 0.9991 99.94%); } @property --motion-spring-bouncier { syntax: "*"; inherits: false; initial-value: linear(0, 0.0023, 0.0088, 0.0194 1.59%, 0.035 2.17%, 0.078 3.33%, 0.1415 4.64%, 0.2054 5.75%, 0.2821 6.95%, 0.5912 11.45%, 0.7205 13.43%, 0.8393 15.45%, 0.936 17.39%, 0.9778, 1.015, 1.0477, 1.0759, 1.0998 22.22%, 1.1203, 1.1364, 1.1484 25.26%, 1.1586 26.61%, 1.1629 28.06%, 1.1613 29.56%, 1.1537 31.2%, 1.1434 32.6%, 1.1288 34.19%, 1.0508 41.29%, 1.0174 44.87%, 1.0025 46.89%, 0.9911 48.87%, 0.9826 50.9%, 0.9769 53.03%, 0.9735 56.02%, 0.9748 59.45%, 0.9964 72.64%, 1.0031 79.69%, 1.0042 86.83%, 1.0008 99.97%); } @property --motion-spring-bounciest { syntax: "*"; inherits: false; initial-value: linear(0, 0.0032, 0.0131, 0.0294, 0.0524, 0.0824, 0.1192 1.54%, 0.2134 2.11%, 0.3102 2.59%, 0.4297 3.13%, 0.8732 4.95%, 1.0373, 1.1827 6.36%, 1.2972 7.01%, 1.3444, 1.3859, 1.4215, 1.4504, 1.4735, 1.4908, 1.5024, 1.5084 9.5%, 1.5091, 1.5061, 1.4993, 1.4886, 1.4745, 1.4565 11.11%, 1.4082 11.7%, 1.3585 12.2%, 1.295 12.77%, 1.0623 14.64%, 0.9773, 0.9031 16.08%, 0.8449 16.73%, 0.8014, 0.7701 17.95%, 0.7587, 0.7501, 0.7443, 0.7412 19.16%, 0.7421 19.68%, 0.7508 20.21%, 0.7672 20.77%, 0.7917 21.37%, 0.8169 21.87%, 0.8492 22.43%, 0.9681 24.32%, 1.0114, 1.0492 25.75%, 1.0789 26.41%, 1.1008, 1.1167, 1.1271, 1.1317 28.81%, 1.1314, 1.1271 29.87%, 1.1189 30.43%, 1.1063 31.03%, 1.0769 32.11%, 0.9941 34.72%, 0.9748 35.43%, 0.9597 36.09%, 0.9487, 0.9407, 0.9355, 0.933 38.46%, 0.9344 39.38%, 0.9421 40.38%, 0.9566 41.5%, 0.9989 44.12%, 1.0161 45.37%, 1.029 46.75%, 1.0341 48.1%, 1.0335 49.04%, 1.0295 50.05%, 1.0221 51.18%, 0.992 55.02%, 0.9854 56.38%, 0.9827 57.72%, 0.985 59.73%, 1.004 64.67%, 1.0088 67.34%, 1.0076 69.42%, 0.9981 74.28%, 0.9956 76.85%, 0.9961 79.06%, 1.0023 86.46%, 0.999 95.22%, 0.9994 100%); } @property --motion-origin-scale-x { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-origin-scale-y { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-origin-translate-x { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-origin-translate-y { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-origin-rotate { syntax: "*"; inherits: false; initial-value: 0deg; } @property --motion-origin-blur { syntax: "*"; inherits: false; initial-value: 0px; } @property --motion-origin-grayscale { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-origin-opacity { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-origin-background-color { syntax: "*"; inherits: false; } @property --motion-origin-text-color { syntax: "*"; inherits: false; } @property --motion-end-scale-x { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-end-scale-y { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-end-translate-x { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-end-translate-y { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-end-rotate { syntax: "*"; inherits: false; initial-value: 0deg; } @property --motion-end-blur { syntax: "*"; inherits: false; initial-value: 0px; } @property --motion-end-grayscale { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-end-opacity { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-end-background-color { syntax: "*"; inherits: false; } @property --motion-end-text-color { syntax: "*"; inherits: false; } @property --motion-loop-scale-x { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-loop-scale-y { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-loop-translate-x { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-loop-translate-y { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-loop-rotate { syntax: "*"; inherits: false; initial-value: 0deg; } @property --motion-loop-blur { syntax: "*"; inherits: false; initial-value: 0px; } @property --motion-loop-grayscale { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-loop-opacity { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-loop-background-color { syntax: "*"; inherits: false; } @property --motion-loop-text-color { syntax: "*"; inherits: false; } @property --motion-duration { syntax: "*"; inherits: false; initial-value: 700ms; } @property --motion-timing { syntax: "*"; inherits: false; initial-value: cubic-bezier(.165, .84, .44, 1); } @property --motion-perceptual-duration-multiplier { syntax: "*"; inherits: false; initial-value: 1; } @property --motion-delay { syntax: "*"; inherits: false; initial-value: 0ms; } @property --motion-loop-count { syntax: "*"; inherits: false; initial-value: infinite; } @property --motion-scale-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-translate-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-rotate-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-filter-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-opacity-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-background-color-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-text-color-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-scale-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-translate-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-rotate-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-filter-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-opacity-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-background-color-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-text-color-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-scale-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-translate-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-rotate-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-filter-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-opacity-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-background-color-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-text-color-loop-animation { syntax: "*"; inherits: false; initial-value: none; } } @layer base { @media screen and (prefers-reduced-motion: no-preference) { @keyframes motion-scale-in { 0% { scale: var(--motion-origin-scale-x) var(--motion-origin-scale-y); } 100% { scale: 1 1; } } @keyframes motion-scale-out { 0% { scale: 1 1; } 100% { scale: var(--motion-end-scale-x) var(--motion-end-scale-y); } } @keyframes motion-scale-loop-mirror { 0%, 100% { scale: 1 1; } 50% { scale: var(--motion-loop-scale-x) var(--motion-loop-scale-y); } } @keyframes motion-scale-loop-reset { 0% { scale: 1 1; } 100% { scale: var(--motion-loop-scale-x) var(--motion-loop-scale-y); } } @keyframes motion-translate-in { 0% { translate: var(--motion-origin-translate-x) var(--motion-origin-translate-y); } 100% { translate: 0 0; } } @keyframes motion-translate-out { 0% { translate: 0 0; } 100% { translate: var(--motion-end-translate-x) var(--motion-end-translate-y); } } @keyframes motion-translate-loop-mirror { 0%, 100% { translate: 0 0; } 50% { translate: var(--motion-loop-translate-x) var(--motion-loop-translate-y); } } @keyframes motion-translate-loop-reset { 0% { translate: 0 0; } 100% { translate: var(--motion-loop-translate-x) var(--motion-loop-translate-y); } } @keyframes motion-rotate-in { 0% { rotate: var(--motion-origin-rotate); } 100% { rotate: 0; } } @keyframes motion-rotate-out { 0% { rotate: 0; } 100% { rotate: var(--motion-end-rotate); } } @keyframes motion-rotate-loop-mirror { 0%, 100% { rotate: 0deg; } 50% { rotate: var(--motion-loop-rotate); } } @keyframes motion-rotate-loop-reset { 100% { rotate: var(--motion-loop-rotate); } } } @keyframes motion-filter-in { 0% { filter: blur(var(--motion-origin-blur)) grayscale(var(--motion-origin-grayscale)); } 100% { filter: blur(0) grayscale(0); } } @keyframes motion-filter-out { 0% { filter: blur(0) grayscale(0); } 100% { filter: blur(var(--motion-end-blur)) grayscale(var(--motion-end-grayscale)); } } @keyframes motion-filter-loop-mirror { 0%, 100% { filter: blur(0) grayscale(0); } 50% { filter: blur(var(--motion-loop-blur)) grayscale(var(--motion-loop-grayscale)); } } @keyframes motion-filter-loop-reset { 0% { filter: blur(0) grayscale(0); } 100% { filter: blur(var(--motion-loop-blur)) grayscale(var(--motion-loop-grayscale)); } } @keyframes motion-opacity-in { 0% { opacity: var(--motion-origin-opacity); } } @keyframes motion-opacity-out { 100% { opacity: var(--motion-end-opacity); } } @keyframes motion-opacity-loop-mirror { 50% { opacity: var(--motion-loop-opacity); } } @keyframes motion-opacity-loop-reset { 100% { opacity: var(--motion-loop-opacity); } } @keyframes motion-background-color-in { 0% { background-color: var(--motion-origin-background-color); } } @keyframes motion-background-color-out { 100% { background-color: var(--motion-end-background-color); } } @keyframes motion-background-color-loop-mirror { 50% { background-color: var(--motion-loop-background-color); } } @keyframes motion-background-color-loop-reset { 100% { background-color: var(--motion-loop-background-color); } } @keyframes motion-text-color-in { 0% { color: var(--motion-origin-text-color); } } @keyframes motion-text-color-out { 100% { color: var(--motion-end-text-color); } } @keyframes motion-text-color-loop-mirror { 50% { color: var(--motion-loop-text-color); } } @keyframes motion-text-color-loop-reset { 100% { color: var(--motion-loop-text-color); } } } @layer base { :root:has(input.theme-controller[value=corporate]:checked),[data-theme="corporate"] { color-scheme: normal; --color-base-100: oklch(99.43% 0.001 286.38); --color-base-200: oklch(97.33% 0.008 271.33); --color-base-300: oklch(48.52% 0.0225 279.09); --color-base-content: oklch(42.06% 0.049 276.53); --color-primary: oklch(62.31% 0.188 259.81); --color-primary-content: oklch(97.05% 0.014 254.6); --color-secondary: oklch(55.79% 0.022 301.91); --color-secondary-content: oklch(95.05% 0.003 308.43); --color-accent: oklch(65.59% 0.212 354.31); --color-accent-content: oklch(97.14% 0.014 343.2); --color-neutral: oklch(0.447 0.0732 274.26); --color-neutral-content: oklch(82.15% 0.055 277.12); --color-info: oklch(70.38% 0.123 182.5); --color-info-content: oklch(98.36% 0.014 180.72); --color-success: oklch(76.81% 0.204 130.85); --color-success-content: oklch(98.57% 0.031 120.76); --color-warning: oklch(79.52% 0.162 86.05); --color-warning-content: oklch(98.73% 0.026 102.21); --color-error: oklch(64.5% 0.215 16.44); --color-error-content: oklch(96.94% 0.015 12.42); --radius-selector: 0.125rem; --radius-field: 0.25rem; --radius-box: 0.375rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; --font-sans: 'Public Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto; } } @layer base { :root:has(input.theme-controller[value=corporate-dark]:checked),[data-theme="corporate-dark"] { color-scheme: normal; --font-sans: 'Public Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto; } } @layer base { :root:has(input.theme-controller[value=corporate-dark]:checked),[data-theme="corporate-dark"] { color-scheme: dark; --color-base-100: oklch(23.2% 0.006 285.95); --color-base-200: oklch(0.2694 0.0037 286.15); --color-base-300: oklch(14% 0 0); --color-base-content: oklch(96% 0.001 286.375); --color-primary: oklch(62.31% 0.188 259.81); --color-primary-content: oklch(97.05% 0.014 254.6); --color-secondary: oklch(55.79% 0.022 301.91); --color-secondary-content: oklch(95.05% 0.003 308.43); --color-accent: oklch(65.59% 0.212 354.31); --color-accent-content: oklch(97.14% 0.014 343.2); --color-neutral: oklch(0.8681 0.033 285.69); --color-neutral-content: oklch(82.15% 0.055 277.12); --color-info: oklch(70.38% 0.123 182.5); --color-info-content: oklch(98.36% 0.014 180.72); --color-success: oklch(76.81% 0.204 130.85); --color-success-content: oklch(98.57% 0.031 120.76); --color-warning: oklch(79.52% 0.162 86.05); --color-warning-content: oklch(98.73% 0.026 102.21); --color-error: oklch(64.5% 0.215 16.44); --color-error-content: oklch(96.94% 0.015 12.42); --radius-selector: 0.125rem; --radius-field: 0.25rem; --radius-box: 0.375rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; } } @layer base { @property --motion-bounce { syntax: "*"; inherits: false; initial-value: linear(0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765,1, 0.891 40.9%, 0.848, 0.813, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785,0.813, 0.848, 0.891 68.2%, 1 72.7%, 0.973, 0.953, 0.941, 0.938, 0.941, 0.953,0.973, 1, 0.988, 0.984, 0.988, 1); } @property --motion-spring-smooth { syntax: "*"; inherits: false; initial-value: linear(0, 0.001 0.44%, 0.0045 0.94%, 0.0195 2.03%, 0.0446 3.19%, 0.0811 4.5%, 0.1598 6.82%, 0.3685 12.34%, 0.4693 15.17%, 0.5663, 0.6498 21.27%, 0.7215 24.39%, 0.7532 25.98%, 0.7829 27.65%, 0.8105, 0.8349 31.14%, 0.8573 32.95%, 0.8776 34.84%, 0.8964 36.87%, 0.9136 39.05%, 0.929 41.37%, 0.9421 43.77%, 0.9537 46.38%, 0.9636 49.14%, 0.9789 55.31%, 0.9888 62.35%, 0.9949 71.06%, 0.9982 82.52%, 0.9997 99.94%); } @property --motion-spring-snappy { syntax: "*"; inherits: false; initial-value: linear(0, 0.0014, 0.0053 1.02%, 0.0126, 0.0227 2.18%, 0.0517 3.41%, 0.094 4.79%, 0.1865 7.26%, 0.4182 12.77%, 0.5246 15.46%, 0.6249, 0.7112, 0.7831 23.95%, 0.8146 25.4%, 0.844, 0.8699 28.45%, 0.8935, 0.9139 31.64%, 0.932, 0.9473, 0.9601 36.65%, 0.9714 38.47%, 0.9808 40.35%, 0.9948 44.49%, 1.0031 49.43%, 1.0057 53.35%, 1.0063 58.14%, 1.0014 80.78%, 1.0001 99.94%); } @property --motion-spring-bouncy { syntax: "*"; inherits: false; initial-value: linear(0, 0.0018, 0.0069, 0.0151 1.74%, 0.0277 2.4%, 0.062 3.7%, 0.1115 5.15%, 0.2211 7.77%, 0.4778 13.21%, 0.5912 15.75%, 0.6987 18.44%, 0.7862 20.98%, 0.861 23.59%, 0.8926, 0.9205, 0.945 27.51%, 0.9671 28.89%, 0.9868, 1.003 31.79%, 1.0224 34.11%, 1.0358 36.58%, 1.0436 39.27%, 1.046 42.31%, 1.0446 44.71%, 1.0406 47.47%, 1.0118 61.84%, 1.0027 69.53%, 0.9981 80.49%, 0.9991 99.94%); } @property --motion-spring-bouncier { syntax: "*"; inherits: false; initial-value: linear(0, 0.0023, 0.0088, 0.0194 1.59%, 0.035 2.17%, 0.078 3.33%, 0.1415 4.64%, 0.2054 5.75%, 0.2821 6.95%, 0.5912 11.45%, 0.7205 13.43%, 0.8393 15.45%, 0.936 17.39%, 0.9778, 1.015, 1.0477, 1.0759, 1.0998 22.22%, 1.1203, 1.1364, 1.1484 25.26%, 1.1586 26.61%, 1.1629 28.06%, 1.1613 29.56%, 1.1537 31.2%, 1.1434 32.6%, 1.1288 34.19%, 1.0508 41.29%, 1.0174 44.87%, 1.0025 46.89%, 0.9911 48.87%, 0.9826 50.9%, 0.9769 53.03%, 0.9735 56.02%, 0.9748 59.45%, 0.9964 72.64%, 1.0031 79.69%, 1.0042 86.83%, 1.0008 99.97%); } @property --motion-spring-bounciest { syntax: "*"; inherits: false; initial-value: linear(0, 0.0032, 0.0131, 0.0294, 0.0524, 0.0824, 0.1192 1.54%, 0.2134 2.11%, 0.3102 2.59%, 0.4297 3.13%, 0.8732 4.95%, 1.0373, 1.1827 6.36%, 1.2972 7.01%, 1.3444, 1.3859, 1.4215, 1.4504, 1.4735, 1.4908, 1.5024, 1.5084 9.5%, 1.5091, 1.5061, 1.4993, 1.4886, 1.4745, 1.4565 11.11%, 1.4082 11.7%, 1.3585 12.2%, 1.295 12.77%, 1.0623 14.64%, 0.9773, 0.9031 16.08%, 0.8449 16.73%, 0.8014, 0.7701 17.95%, 0.7587, 0.7501, 0.7443, 0.7412 19.16%, 0.7421 19.68%, 0.7508 20.21%, 0.7672 20.77%, 0.7917 21.37%, 0.8169 21.87%, 0.8492 22.43%, 0.9681 24.32%, 1.0114, 1.0492 25.75%, 1.0789 26.41%, 1.1008, 1.1167, 1.1271, 1.1317 28.81%, 1.1314, 1.1271 29.87%, 1.1189 30.43%, 1.1063 31.03%, 1.0769 32.11%, 0.9941 34.72%, 0.9748 35.43%, 0.9597 36.09%, 0.9487, 0.9407, 0.9355, 0.933 38.46%, 0.9344 39.38%, 0.9421 40.38%, 0.9566 41.5%, 0.9989 44.12%, 1.0161 45.37%, 1.029 46.75%, 1.0341 48.1%, 1.0335 49.04%, 1.0295 50.05%, 1.0221 51.18%, 0.992 55.02%, 0.9854 56.38%, 0.9827 57.72%, 0.985 59.73%, 1.004 64.67%, 1.0088 67.34%, 1.0076 69.42%, 0.9981 74.28%, 0.9956 76.85%, 0.9961 79.06%, 1.0023 86.46%, 0.999 95.22%, 0.9994 100%); } @property --motion-origin-scale-x { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-origin-scale-y { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-origin-translate-x { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-origin-translate-y { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-origin-rotate { syntax: "*"; inherits: false; initial-value: 0deg; } @property --motion-origin-blur { syntax: "*"; inherits: false; initial-value: 0px; } @property --motion-origin-grayscale { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-origin-opacity { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-origin-background-color { syntax: "*"; inherits: false; } @property --motion-origin-text-color { syntax: "*"; inherits: false; } @property --motion-end-scale-x { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-end-scale-y { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-end-translate-x { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-end-translate-y { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-end-rotate { syntax: "*"; inherits: false; initial-value: 0deg; } @property --motion-end-blur { syntax: "*"; inherits: false; initial-value: 0px; } @property --motion-end-grayscale { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-end-opacity { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-end-background-color { syntax: "*"; inherits: false; } @property --motion-end-text-color { syntax: "*"; inherits: false; } @property --motion-loop-scale-x { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-loop-scale-y { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-loop-translate-x { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-loop-translate-y { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-loop-rotate { syntax: "*"; inherits: false; initial-value: 0deg; } @property --motion-loop-blur { syntax: "*"; inherits: false; initial-value: 0px; } @property --motion-loop-grayscale { syntax: "*"; inherits: false; initial-value: 0%; } @property --motion-loop-opacity { syntax: "*"; inherits: false; initial-value: 100%; } @property --motion-loop-background-color { syntax: "*"; inherits: false; } @property --motion-loop-text-color { syntax: "*"; inherits: false; } @property --motion-duration { syntax: "*"; inherits: false; initial-value: 700ms; } @property --motion-timing { syntax: "*"; inherits: false; initial-value: cubic-bezier(.165, .84, .44, 1); } @property --motion-perceptual-duration-multiplier { syntax: "*"; inherits: false; initial-value: 1; } @property --motion-delay { syntax: "*"; inherits: false; initial-value: 0ms; } @property --motion-loop-count { syntax: "*"; inherits: false; initial-value: infinite; } @property --motion-scale-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-translate-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-rotate-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-filter-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-opacity-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-background-color-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-text-color-in-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-scale-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-translate-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-rotate-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-filter-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-opacity-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-background-color-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-text-color-out-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-scale-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-translate-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-rotate-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-filter-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-opacity-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-background-color-loop-animation { syntax: "*"; inherits: false; initial-value: none; } @property --motion-text-color-loop-animation { syntax: "*"; inherits: false; initial-value: none; } } @layer base { @media screen and (prefers-reduced-motion: no-preference) { @keyframes motion-scale-in { 0% { scale: var(--motion-origin-scale-x) var(--motion-origin-scale-y); } 100% { scale: 1 1; } } @keyframes motion-scale-out { 0% { scale: 1 1; } 100% { scale: var(--motion-end-scale-x) var(--motion-end-scale-y); } } @keyframes motion-scale-loop-mirror { 0%, 100% { scale: 1 1; } 50% { scale: var(--motion-loop-scale-x) var(--motion-loop-scale-y); } } @keyframes motion-scale-loop-reset { 0% { scale: 1 1; } 100% { scale: var(--motion-loop-scale-x) var(--motion-loop-scale-y); } } @keyframes motion-translate-in { 0% { translate: var(--motion-origin-translate-x) var(--motion-origin-translate-y); } 100% { translate: 0 0; } } @keyframes motion-translate-out { 0% { translate: 0 0; } 100% { translate: var(--motion-end-translate-x) var(--motion-end-translate-y); } } @keyframes motion-translate-loop-mirror { 0%, 100% { translate: 0 0; } 50% { translate: var(--motion-loop-translate-x) var(--motion-loop-translate-y); } } @keyframes motion-translate-loop-reset { 0% { translate: 0 0; } 100% { translate: var(--motion-loop-translate-x) var(--motion-loop-translate-y); } } @keyframes motion-rotate-in { 0% { rotate: var(--motion-origin-rotate); } 100% { rotate: 0; } } @keyframes motion-rotate-out { 0% { rotate: 0; } 100% { rotate: var(--motion-end-rotate); } } @keyframes motion-rotate-loop-mirror { 0%, 100% { rotate: 0deg; } 50% { rotate: var(--motion-loop-rotate); } } @keyframes motion-rotate-loop-reset { 100% { rotate: var(--motion-loop-rotate); } } } @keyframes motion-filter-in { 0% { filter: blur(var(--motion-origin-blur)) grayscale(var(--motion-origin-grayscale)); } 100% { filter: blur(0) grayscale(0); } } @keyframes motion-filter-out { 0% { filter: blur(0) grayscale(0); } 100% { filter: blur(var(--motion-end-blur)) grayscale(var(--motion-end-grayscale)); } } @keyframes motion-filter-loop-mirror { 0%, 100% { filter: blur(0) grayscale(0); } 50% { filter: blur(var(--motion-loop-blur)) grayscale(var(--motion-loop-grayscale)); } } @keyframes motion-filter-loop-reset { 0% { filter: blur(0) grayscale(0); } 100% { filter: blur(var(--motion-loop-blur)) grayscale(var(--motion-loop-grayscale)); } } @keyframes motion-opacity-in { 0% { opacity: var(--motion-origin-opacity); } } @keyframes motion-opacity-out { 100% { opacity: var(--motion-end-opacity); } } @keyframes motion-opacity-loop-mirror { 50% { opacity: var(--motion-loop-opacity); } } @keyframes motion-opacity-loop-reset { 100% { opacity: var(--motion-loop-opacity); } } @keyframes motion-background-color-in { 0% { background-color: var(--motion-origin-background-color); } } @keyframes motion-background-color-out { 100% { background-color: var(--motion-end-background-color); } } @keyframes motion-background-color-loop-mirror { 50% { background-color: var(--motion-loop-background-color); } } @keyframes motion-background-color-loop-reset { 100% { background-color: var(--motion-loop-background-color); } } @keyframes motion-text-color-in { 0% { color: var(--motion-origin-text-color); } } @keyframes motion-text-color-out { 100% { color: var(--motion-end-text-color); } } @keyframes motion-text-color-loop-mirror { 50% { color: var(--motion-loop-text-color); } } @keyframes motion-text-color-loop-reset { 100% { color: var(--motion-loop-text-color); } } } @layer base { :root:has(input.theme-controller[value=gourmet-dark]:checked),[data-theme="gourmet-dark"] { color-scheme: dark; --color-base-100: oklch(32.38% 0.009 67.5); --color-base-200: oklch(0.35 0.01 59.3); --color-base-300: oklch(0.48 0.05 54.27); --color-base-content: oklch(0.96 0.01 54.55); --color-primary: oklch(70.49% 0.187 47.6); --color-primary-content: oklch(97.96% 0.016 73.68); --color-secondary: oklch(55.79% 0.022 301.91); --color-secondary-content: oklch(95.05% 0.003 308.43); --color-accent: oklch(65.59% 0.212 354.31); --color-accent-content: oklch(97.14% 0.014 343.2); --color-neutral: oklch(0.82 0.03 67.39); --color-neutral-content: oklch(99.45% 0.002 67.8); --color-info: oklch(68.47% 0.148 237.32); --color-info-content: oklch(97.71% 0.012 236.62); --color-success: oklch(69.59% 0.149 162.48); --color-success-content: oklch(97.93% 0.021 166.11); --color-warning: oklch(57.59% 0.247 287.24); --color-warning-content: oklch(96.57% 0.017 289.61); --color-error: oklch(65.39% 0.222 25.86); --color-error-content: oklch(98.76% 0.009 67.73); --radius-selector: 2rem; --radius-field: 2rem; --radius-box: 0.75rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; } } @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-rotate-x { syntax: "*"; inherits: false; } @property --tw-rotate-y { syntax: "*"; inherits: false; } @property --tw-rotate-z { syntax: "*"; inherits: false; } @property --tw-skew-x { syntax: "*"; inherits: false; } @property --tw-skew-y { syntax: "*"; inherits: false; } @property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-divide-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-gradient-position { syntax: "*"; inherits: false; } @property --tw-gradient-from { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-via { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-to { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-stops { syntax: "*"; inherits: false; } @property --tw-gradient-via-stops { syntax: "*"; inherits: false; } @property --tw-gradient-from-position { syntax: ""; inherits: false; initial-value: 0%; } @property --tw-gradient-via-position { syntax: ""; inherits: false; initial-value: 50%; } @property --tw-gradient-to-position { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-leading { syntax: "*"; inherits: false; } @property --tw-font-weight { syntax: "*"; inherits: false; } @property --tw-tracking { syntax: "*"; inherits: false; } @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-shadow-color { syntax: "*"; inherits: false; } @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-shadow-color { syntax: "*"; inherits: false; } @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-ring-color { syntax: "*"; inherits: false; } @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-ring-color { syntax: "*"; inherits: false; } @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-ring-inset { syntax: "*"; inherits: false; } @property --tw-ring-offset-width { syntax: ""; inherits: false; initial-value: 0px; } @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-blur { syntax: "*"; inherits: false; } @property --tw-brightness { syntax: "*"; inherits: false; } @property --tw-contrast { syntax: "*"; inherits: false; } @property --tw-grayscale { syntax: "*"; inherits: false; } @property --tw-hue-rotate { syntax: "*"; inherits: false; } @property --tw-invert { syntax: "*"; inherits: false; } @property --tw-opacity { syntax: "*"; inherits: false; } @property --tw-saturate { syntax: "*"; inherits: false; } @property --tw-sepia { syntax: "*"; inherits: false; } @property --tw-drop-shadow { syntax: "*"; inherits: false; } @property --tw-drop-shadow-color { syntax: "*"; inherits: false; } @property --tw-drop-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-drop-shadow-size { syntax: "*"; inherits: false; } @property --tw-backdrop-blur { syntax: "*"; inherits: false; } @property --tw-backdrop-brightness { syntax: "*"; inherits: false; } @property --tw-backdrop-contrast { syntax: "*"; inherits: false; } @property --tw-backdrop-grayscale { syntax: "*"; inherits: false; } @property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false; } @property --tw-backdrop-invert { syntax: "*"; inherits: false; } @property --tw-backdrop-opacity { syntax: "*"; inherits: false; } @property --tw-backdrop-saturate { syntax: "*"; inherits: false; } @property --tw-backdrop-sepia { syntax: "*"; inherits: false; } @property --tw-duration { syntax: "*"; inherits: false; } @property --tw-ease { syntax: "*"; inherits: false; } @property --tw-content { syntax: "*"; initial-value: ""; inherits: false; } @property --tw-divide-x-reverse { syntax: "*"; inherits: false; initial-value: 0; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 50% { opacity: 0.5; } } @keyframes marqueeLeft { 0% { left: 0%; } 100% { left: -100%; } } @keyframes marqueeRight { 0% { left: -100%; } 100% { left: 0%; } } @keyframes marqueeLeft { 0% { left: 0%; } 100% { left: -100%; } } @keyframes marqueeRight { 0% { left: -100%; } 100% { left: 0%; } } @keyframes marqueeLeft { 0% { left: 0%; } 100% { left: -100%; } } @keyframes marqueeRight { 0% { left: -100%; } 100% { left: 0%; } } @keyframes marqueeTop { 0% { top: 0%; } 100% { top: -100%; } } @keyframes marqueeBottom { 0% { top: -100%; } 100% { top: 0%; } } @keyframes marqueeLeft { 0% { left: 0%; } 100% { left: -100%; } } @keyframes marqueeRight { 0% { left: -100%; } 100% { left: 0%; } } @keyframes marqueeLeft { 0% { left: 0%; } 100% { left: -100%; } } @keyframes marqueeRight { 0% { left: -100%; } 100% { left: 0%; } } @keyframes marqueeLeft { 0% { left: 0%; } 100% { left: -100%; } } @keyframes marqueeRight { 0% { left: -100%; } 100% { left: 0%; } } @keyframes marqueeLeft { 0% { left: 0%; } 100% { left: -100%; } } @keyframes marqueeRight { 0% { left: -100%; } 100% { left: 0%; } } @keyframes marqueeTop { 0% { top: 0%; } 100% { top: -100%; } } @keyframes marqueeBottom { 0% { top: -100%; } 100% { top: 0%; } } @keyframes rotate-clockwise { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes rotate-counterclockwise { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } } @layer properties { @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { *, ::before, ::after, ::backdrop { --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scale-z: 1; --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-space-y-reverse: 0; --tw-space-x-reverse: 0; --tw-divide-y-reverse: 0; --tw-border-style: solid; --tw-gradient-position: initial; --tw-gradient-from: #0000; --tw-gradient-via: #0000; --tw-gradient-to: #0000; --tw-gradient-stops: initial; --tw-gradient-via-stops: initial; --tw-gradient-from-position: 0%; --tw-gradient-via-position: 50%; --tw-gradient-to-position: 100%; --tw-leading: initial; --tw-font-weight: initial; --tw-tracking: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-outline-style: solid; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; --tw-grayscale: initial; --tw-hue-rotate: initial; --tw-invert: initial; --tw-opacity: initial; --tw-saturate: initial; --tw-sepia: initial; --tw-drop-shadow: initial; --tw-drop-shadow-color: initial; --tw-drop-shadow-alpha: 100%; --tw-drop-shadow-size: initial; --tw-backdrop-blur: initial; --tw-backdrop-brightness: initial; --tw-backdrop-contrast: initial; --tw-backdrop-grayscale: initial; --tw-backdrop-hue-rotate: initial; --tw-backdrop-invert: initial; --tw-backdrop-opacity: initial; --tw-backdrop-saturate: initial; --tw-backdrop-sepia: initial; --tw-duration: initial; --tw-ease: initial; --tw-content: ""; --tw-divide-x-reverse: 0; } } }