/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */ @layer properties; @layer theme, base, components, utilities; @layer theme { :root, :host { --font-sans: "Inter", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-50: oklch(0.971 0.013 17.38); --color-red-100: oklch(0.936 0.032 17.717); --color-red-300: oklch(0.808 0.114 19.571); --color-red-400: oklch(0.704 0.191 22.216); --color-red-500: oklch(0.637 0.237 25.331); --color-red-600: oklch(0.577 0.245 27.325); --color-red-700: oklch(0.505 0.213 27.518); --color-red-800: oklch(0.444 0.177 26.899); --color-orange-50: oklch(0.98 0.016 73.684); --color-orange-100: oklch(0.954 0.038 75.164); --color-orange-200: oklch(0.901 0.076 70.697); --color-orange-300: oklch(0.837 0.128 66.29); --color-orange-400: oklch(0.75 0.183 55.934); --color-orange-500: oklch(0.705 0.213 47.604); --color-orange-600: oklch(0.646 0.222 41.116); --color-orange-700: oklch(0.553 0.195 38.402); --color-amber-50: oklch(0.987 0.022 95.277); --color-amber-100: oklch(0.962 0.059 95.617); --color-amber-200: oklch(0.924 0.12 95.746); --color-amber-400: oklch(0.828 0.189 84.429); --color-amber-500: oklch(0.769 0.188 70.08); --color-amber-600: oklch(0.666 0.179 58.318); --color-amber-700: oklch(0.555 0.163 48.998); --color-yellow-50: oklch(0.987 0.026 102.212); --color-yellow-100: oklch(0.973 0.071 103.193); --color-yellow-300: oklch(0.905 0.182 98.111); --color-yellow-400: oklch(0.852 0.199 91.936); --color-yellow-500: oklch(0.795 0.184 86.047); --color-yellow-600: oklch(0.681 0.162 75.834); --color-yellow-800: oklch(0.476 0.114 61.907); --color-lime-300: oklch(0.897 0.196 126.665); --color-lime-400: oklch(0.841 0.238 128.85); --color-lime-500: oklch(0.768 0.233 130.85); --color-green-50: oklch(0.982 0.018 155.826); --color-green-100: oklch(0.962 0.044 156.743); --color-green-200: oklch(0.925 0.084 155.995); --color-green-300: oklch(0.871 0.15 154.449); --color-green-400: oklch(0.792 0.209 151.711); --color-green-500: oklch(0.723 0.219 149.579); --color-green-600: oklch(0.627 0.194 149.214); --color-green-700: oklch(0.527 0.154 150.069); --color-green-800: oklch(0.448 0.119 151.328); --color-green-900: oklch(0.393 0.095 152.535); --color-emerald-50: oklch(0.979 0.021 166.113); --color-emerald-100: oklch(0.95 0.052 163.051); --color-emerald-200: oklch(0.905 0.093 164.15); --color-emerald-300: oklch(0.845 0.143 164.978); --color-emerald-400: oklch(0.765 0.177 163.223); --color-emerald-500: oklch(0.696 0.17 162.48); --color-emerald-600: oklch(0.596 0.145 163.225); --color-emerald-700: oklch(0.508 0.118 165.612); --color-teal-300: oklch(0.855 0.138 181.071); --color-teal-400: oklch(0.777 0.152 181.912); --color-teal-500: oklch(0.704 0.14 182.503); --color-cyan-300: oklch(0.865 0.127 207.078); --color-cyan-400: oklch(0.789 0.154 211.53); --color-sky-50: oklch(0.977 0.013 236.62); --color-sky-300: oklch(0.828 0.111 230.318); --color-sky-500: oklch(0.685 0.169 237.323); --color-sky-600: oklch(0.588 0.158 241.966); --color-sky-700: oklch(0.5 0.134 242.749); --color-sky-900: oklch(0.391 0.09 240.876); --color-sky-950: oklch(0.293 0.066 243.157); --color-blue-50: oklch(0.97 0.014 254.604); --color-blue-100: oklch(0.932 0.032 255.585); --color-blue-200: oklch(0.882 0.059 254.128); --color-blue-300: oklch(0.809 0.105 251.813); --color-blue-400: oklch(0.707 0.165 254.624); --color-blue-500: oklch(0.623 0.214 259.815); --color-blue-600: oklch(0.546 0.245 262.881); --color-blue-700: oklch(0.488 0.243 264.376); --color-blue-800: oklch(0.424 0.199 265.638); --color-blue-900: oklch(0.379 0.146 265.522); --color-indigo-50: oklch(0.962 0.018 272.314); --color-indigo-100: oklch(0.93 0.034 272.788); --color-indigo-300: oklch(0.785 0.115 274.713); --color-indigo-400: oklch(0.673 0.182 276.935); --color-indigo-500: oklch(0.585 0.233 277.117); --color-indigo-600: oklch(0.511 0.262 276.966); --color-indigo-700: oklch(0.457 0.24 277.023); --color-indigo-800: oklch(0.398 0.195 277.366); --color-indigo-900: oklch(0.359 0.144 278.697); --color-violet-500: oklch(0.606 0.25 292.717); --color-purple-50: oklch(0.977 0.014 308.299); --color-purple-100: oklch(0.946 0.033 307.174); --color-purple-200: oklch(0.902 0.063 306.703); --color-purple-300: oklch(0.827 0.119 306.383); --color-purple-400: oklch(0.714 0.203 305.504); --color-purple-500: oklch(0.627 0.265 303.9); --color-purple-600: oklch(0.558 0.288 302.321); --color-purple-700: oklch(0.496 0.265 301.924); --color-purple-900: oklch(0.381 0.176 304.987); --color-purple-950: oklch(0.291 0.149 302.717); --color-fuchsia-300: oklch(0.833 0.145 321.434); --color-fuchsia-400: oklch(0.74 0.238 322.16); --color-fuchsia-500: oklch(0.667 0.295 322.15); --color-pink-300: oklch(0.823 0.12 346.018); --color-pink-400: oklch(0.718 0.202 349.761); --color-pink-500: oklch(0.656 0.241 354.308); --color-pink-600: oklch(0.592 0.249 0.584); --color-pink-700: oklch(0.525 0.223 3.958); --color-slate-50: oklch(0.984 0.003 247.858); --color-slate-100: oklch(0.968 0.007 247.896); --color-slate-200: oklch(0.929 0.013 255.508); --color-slate-300: oklch(0.869 0.022 252.894); --color-slate-400: oklch(0.704 0.04 256.788); --color-slate-500: oklch(0.554 0.046 257.417); --color-slate-600: oklch(0.446 0.043 257.281); --color-slate-700: oklch(0.372 0.044 257.287); --color-slate-800: oklch(0.279 0.041 260.031); --color-slate-900: oklch(0.208 0.042 265.755); --color-slate-950: oklch(0.129 0.042 264.695); --color-gray-50: oklch(0.985 0.002 247.839); --color-gray-100: oklch(0.967 0.003 264.542); --color-gray-200: oklch(0.928 0.006 264.531); --color-gray-300: oklch(0.872 0.01 258.338); --color-gray-400: oklch(0.707 0.022 261.325); --color-gray-500: oklch(0.551 0.027 264.364); --color-gray-600: oklch(0.446 0.03 256.802); --color-gray-700: oklch(0.373 0.034 259.733); --color-gray-800: oklch(0.278 0.033 256.848); --color-gray-900: oklch(0.21 0.034 264.665); --color-gray-950: oklch(0.13 0.028 261.692); --color-zinc-950: oklch(0.141 0.005 285.823); --color-neutral-950: oklch(0.145 0 0); --color-stone-950: oklch(0.147 0.004 49.25); --color-black: #000; --color-white: #fff; --spacing: 0.25rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --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: 0.9063rem; --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; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --tracking-tight: -0.025em; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --leading-tight: 1.25; --leading-normal: 1.5; --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; --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15); --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-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; --blur-xs: 4px; --blur-sm: 8px; --blur-md: 12px; --blur-xl: 24px; --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); --font-body: "Inter", sans-serif; --font-heading: "Inter", sans-serif; --font-remix: remixicon; --spacing-sidebar: 15rem; --spacing-sidebar-medium: 10rem; --spacing-sidebar-small: 4.6875rem; --spacing-sidebar-boxed: 2rem; --spacing-topbar: 0rem; --spacing-sidebar-icon: 4.375rem; --spacing-btn-icon: 2.5rem; --spacing-space: 1.25rem; --text-11: 0.6875rem; --text-13: 0.8125rem; --text-14: 0.875rem; --text-15: 0.9375rem; --text-16: 1rem; --text-card-title: 0.9375rem; --color-body-invoice: oklch(12.29% 0.0611 278.48); --color-muted-invoice: oklch(58.87% 0.0549 293.56); --color-body: var(--color-white); --color-primary-50: oklch(97.17% 0.0144 244.71); --color-primary-100: oklch(93.75% 0.0317 246.7); --color-primary-200: oklch(89.16% 0.0566 245.22); --color-primary-300: oklch(82.52% 0.0944 244.01); --color-primary-400: oklch(74.02% 0.1408 248.22); --color-primary-500: oklch(65.26% 0.1828 255.54); --color-primary-600: oklch(59.52% 0.1981 259.78); --color-primary-700: oklch(51.28% 0.213 262.22); --color-primary-800: oklch(44.5% 0.1777 262.99); --color-primary-900: oklch(39.34% 0.1351 262.6); --color-primary-950: oklch(29.24% 0.0856 263.87); --color-dark-50: var(--color-slate-50); --color-dark-100: var(--color-slate-100); --color-dark-200: var(--color-slate-200); --color-dark-300: var(--color-slate-300); --color-dark-400: var(--color-slate-400); --color-dark-500: var(--color-slate-500); --color-dark-600: var(--color-slate-600); --color-dark-700: var(--color-slate-700); --color-dark-800: var(--color-slate-800); --color-dark-850: oklch(23.13% 0.0399 270.37); --color-dark-900: var(--color-slate-900); --color-dark-950: var(--color-slate-950); --color-sidebar: var(--color-white); --color-sidebar-border: var(--color-gray-200); --color-menu-title: var(--color-gray-600); --color-sidebar-text: var(--color-gray-500); --color-sidebar-text-hover: var(--color-primary-500); --color-sidebar-text-active: var(--color-primary-500); --color-sidebar-bg-active: var(--color-primary-500); --color-effect: var(--color-gray-100); --animate-shimmer: shimmer 3s ease-out infinite; --animate-jvm-line: jvm-line 10s linear forwards 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; } :-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 { .\@container { container-type: inline-size; } .\@container-\[inline-size\] { container-type: inline-size; } .pointer-events-auto { pointer-events: auto; } .pointer-events-none { pointer-events: none; } .tabs-animation { display: flex; flex-wrap: wrap; align-items: center; .nav-item { position: relative; display: block; height: calc(var(--spacing) * 11); overflow: hidden; border-radius: var(--radius-md); text-align: center; --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 200ms; transition-duration: 200ms; --tw-ease: linear; transition-timing-function: linear; .icon { margin-inline: auto; display: inline-block; width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); --tw-translate-y: calc(var(--spacing) * 2.5); translate: var(--tw-translate-x) var(--tw-translate-y); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 200ms; transition-duration: 200ms; --tw-ease: linear; transition-timing-function: linear; } .content { visibility: hidden; display: block; --tw-translate-y: calc(var(--spacing) * -10); translate: var(--tw-translate-x) var(--tw-translate-y); vertical-align: middle; transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 200ms; transition-duration: 200ms; --tw-ease: linear; transition-timing-function: linear; } } &.ng-animation { .nav-item { .icon { width: auto; height: auto; --tw-translate-y: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); svg { margin-inline: auto; display: inline-block; width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); --tw-translate-y: calc(var(--spacing) * 2.5); translate: var(--tw-translate-x) var(--tw-translate-y); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 200ms; transition-duration: 200ms; --tw-ease: linear; transition-timing-function: linear; } } &:hover { .icon { svg { --tw-translate-y: calc(var(--spacing) * 11); translate: var(--tw-translate-x) var(--tw-translate-y); } } } } } } .\!visible { visibility: visible !important; } .collapse { visibility: collapse; } .invisible { visibility: hidden; } .visible { visibility: visible; } .visible\! { visibility: visible !important; } .progress-animate { position: absolute; inset: calc(var(--spacing) * 0); top: calc(var(--spacing) * 0); height: calc(var(--spacing) * 4); --tw-translate-x: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); animation: var(--animate-shimmer); border-radius: var(--radius-sm); background-color: color-mix(in srgb, #fff 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 20%, transparent); } } .modal { position: fixed; inset: calc(var(--spacing) * 0); z-index: 1050; display: flex; min-height: 100vh; flex-direction: column; overflow-y: auto; padding: var(--spacing-space); opacity: 100%; transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); .modal-top { margin-inline: auto; transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } .modal-center { margin: auto; transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } .modal-br { margin-top: auto; transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { margin-left: auto; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { margin-right: auto; } } .modal-bl { margin-top: auto; transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { margin-right: auto; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { margin-left: auto; } } .modal-tl { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { margin-right: auto; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { margin-left: auto; } } .modal-tr { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { margin-left: auto; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { margin-right: auto; } } &.show { --tw-translate-y: calc(50px * -1); translate: var(--tw-translate-x) var(--tw-translate-y); opacity: 0%; } } .backdrop-overlay { position: fixed; inset: calc(var(--spacing) * 0); z-index: 1049; background-color: color-mix(in srgb, oklch(0.21 0.034 264.665) 40%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-gray-900) 40%, transparent); } &:where([data-mode=dark], [data-mode=dark] *) { background-color: color-mix(in srgb, oklch(0.129 0.042 264.695) 80%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-dark-950) 80%, transparent); } } } .main-topbar { position: fixed; top: calc(var(--spacing) * 0); right: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); z-index: 1003; height: var(--spacing-topbar); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 200ms; transition-duration: 200ms; --tw-ease: linear; transition-timing-function: linear; @media (width >= 64rem) { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="modern"] *) { left: var(--spacing-sidebar); } } } @media (width >= 64rem) { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-sidebar="icon"] *) { left: var(--spacing-sidebar-icon); } } } @media (width >= 64rem) { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="modern"] *) { right: var(--spacing-sidebar); } } } @media (width >= 64rem) { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-sidebar="icon"] *) { right: var(--spacing-sidebar-icon); } } } @media print { display: none; } @media (width >= 64rem) { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-sidebar="medium"] *) { left: var(--spacing-sidebar-medium); } } } @media (width >= 64rem) { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="default"] *) { &:is(:where(.group)[data-sidebar="medium"] *) { left: calc(var(--spacing) * 0); } } } } @media (width >= 64rem) { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-sidebar="medium"] *) { right: var(--spacing-sidebar-medium); } } } @media (width >= 64rem) { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="default"] *) { &:is(:where(.group)[data-sidebar="medium"] *) { right: calc(var(--spacing) * 0); } } } } @media (width >= 64rem) { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-sidebar="small"] *) { left: var(--spacing-sidebar-small); } } } @media (width >= 64rem) { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="default"] *) { &:is(:where(.group)[data-sidebar="small"] *) { left: calc(var(--spacing) * 0); } } } } @media (width >= 64rem) { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-sidebar="small"] *) { right: var(--spacing-sidebar-small); } } } @media (width >= 64rem) { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="default"] *) { &:is(:where(.group)[data-sidebar="small"] *) { right: calc(var(--spacing) * 0); } } } } .navbar-brand { display: flex; height: var(--spacing-topbar); flex-shrink: 0; align-items: center; @media (width >= 48rem) { &:is(:where(.group)[data-layout="default"] *) { width: var(--spacing-sidebar); } } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { padding-left: calc(var(--spacing) * 4); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { padding-right: calc(var(--spacing) * 4); } .logos { &:is(:where(.group)[data-layout="semibox"] *) { display: none; } } } .main-topbar-wrapper { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-gray-200); background-color: var(--color-white); &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-900); } } @media (max-width: 575.98px) { .notification-dropdown { inset-inline: calc(var(--spacing) * 4) !important; min-width: calc(var(--spacing) * 72); } } } .btn-navigation { position: relative; display: inline-flex; border-radius: var(--radius-md); --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); --tw-shadow-color: oklch(0.928 0.006 264.531); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-gray-200) var(--tw-shadow-alpha), transparent); } &:where([data-mode=dark], [data-mode=dark] *) { --tw-shadow-color: oklch(23.13% 0.0399 270.37); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-dark-850) var(--tw-shadow-alpha), transparent); } } a { position: relative; display: inline-block; flex-grow: 1; padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 6); color: var(--color-gray-500); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 200ms; transition-duration: 200ms; --tw-ease: linear; transition-timing-function: linear; &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-500); } } &.navigation-border { a { &::after { content: var(--tw-content); position: absolute; } &::after { content: var(--tw-content); inset-inline: calc(var(--spacing) * 0); } &::after { content: var(--tw-content); bottom: calc(var(--spacing) * 0); } &::after { content: var(--tw-content); margin-inline: auto; } &::after { content: var(--tw-content); height: 2px; } &::after { content: var(--tw-content); width: calc(var(--spacing) * 0); } &::after { content: var(--tw-content); border-radius: calc(infinity * 1px); } &::after { content: var(--tw-content); opacity: 0%; } &::after { 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)); } &::after { content: var(--tw-content); --tw-duration: 200ms; transition-duration: 200ms; } &:hover { @media (hover: hover) { &::after { content: var(--tw-content); width: 100%; } } } &:hover { @media (hover: hover) { &::after { content: var(--tw-content); opacity: 100%; } } } &.active { &::after { content: var(--tw-content); width: 100%; } } &.active { &::after { content: var(--tw-content); opacity: 100%; } } } &.border-top { a { &::after { content: var(--tw-content); top: calc(var(--spacing) * 0); } &::after { content: var(--tw-content); bottom: auto; } } } } } .landing-navbar { position: fixed; inset-inline: calc(var(--spacing) * 0); z-index: 50; display: flex; height: calc(var(--spacing) * 20); align-items: center; transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 500ms; transition-duration: 500ms; --tw-ease: linear; transition-timing-function: linear; .navbar-collapase { position: absolute; inset-inline: calc(var(--spacing) * 0); top: calc(var(--spacing) * 20); background-color: var(--color-white); padding: calc(var(--spacing) * 5); --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); --tw-shadow-color: oklch(0.928 0.006 264.531); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-gray-200) var(--tw-shadow-alpha), transparent); } @media (width >= 80rem) { position: relative; } @media (width >= 80rem) { top: auto; } @media (width >= 80rem) { background-color: transparent; } @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); } &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-850); } &:where([data-mode=dark], [data-mode=dark] *) { --tw-shadow-color: oklch(0.279 0.041 260.031); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-dark-800) var(--tw-shadow-alpha), transparent); } } &:where([data-mode=dark], [data-mode=dark] *) { @media (width >= 80rem) { background-color: transparent; } } } } .main-footer { position: absolute; inset-inline: calc(var(--spacing) * 0); bottom: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); margin-inline: calc(var(--spacing) * 5); display: flex; height: calc(var(--spacing) * 14); align-items: center; border-top-style: var(--tw-border-style); border-top-width: 1px; border-color: var(--color-gray-200); padding-inline: calc(var(--spacing) * 4); @media (width >= 80rem) { margin-inline: calc(var(--spacing) * 28); } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { @media (width >= 64rem) { left: var(--spacing-sidebar); } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { @media (width >= 64rem) { right: var(--spacing-sidebar); } } &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="modern"] *) { @media (width >= 64rem) { left: var(--spacing-sidebar); } } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="modern"] *) { @media (width >= 64rem) { right: var(--spacing-sidebar); } } } @media print { display: none; } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-sidebar="medium"] *) { @media (width >= 64rem) { left: var(--spacing-sidebar-medium); } } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-sidebar="medium"] *) { @media (width >= 64rem) { right: var(--spacing-sidebar-medium); } } } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-sidebar="small"] *) { @media (width >= 64rem) { left: var(--spacing-sidebar-small); } } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-sidebar="small"] *) { @media (width >= 64rem) { right: var(--spacing-sidebar-small); } } } } .tabs { display: flex; flex-wrap: wrap; align-items: center; .nav-item { position: relative; display: block; padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 2); text-align: center; --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 200ms; transition-duration: 200ms; --tw-ease: linear; transition-timing-function: linear; &::after { content: var(--tw-content); position: absolute; } &::after { content: var(--tw-content); inset-inline: calc(var(--spacing) * 0); } &::after { content: var(--tw-content); bottom: calc(var(--spacing) * 0); } &::after { content: var(--tw-content); margin-inline: auto; } &::after { content: var(--tw-content); height: 1px; } &::after { content: var(--tw-content); width: calc(var(--spacing) * 0); } &::after { content: var(--tw-content); border-radius: calc(infinity * 1px); } &::after { content: var(--tw-content); background-color: var(--color-primary-500); } &::after { content: var(--tw-content); opacity: 0%; } &::after { 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)); } &::after { content: var(--tw-content); --tw-duration: 200ms; transition-duration: 200ms; } &:hover { @media (hover: hover) { &::after { content: var(--tw-content); width: 100%; } } } &:hover { @media (hover: hover) { &::after { content: var(--tw-content); opacity: 100%; } } } } } .animate-navigation { a { &::after { content: var(--tw-content); position: absolute; } &::after { content: var(--tw-content); inset-inline: calc(var(--spacing) * 0); } &::after { content: var(--tw-content); bottom: calc(var(--spacing) * 0); } &::after { content: var(--tw-content); margin-inline: auto; } &::after { content: var(--tw-content); width: calc(var(--spacing) * 1.5); height: calc(var(--spacing) * 1.5); } &::after { content: var(--tw-content); border-radius: calc(infinity * 1px); } &::after { content: var(--tw-content); opacity: 0%; } &::after { 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)); } &::after { content: var(--tw-content); --tw-duration: 200ms; transition-duration: 200ms; } &:hover { @media (hover: hover) { &::after { content: var(--tw-content); bottom: calc(var(--spacing) * 3); } } } &:hover { @media (hover: hover) { &::after { content: var(--tw-content); opacity: 100%; } } } &.active { &::after { content: var(--tw-content); bottom: calc(var(--spacing) * 3); } } &.active { &::after { content: var(--tw-content); opacity: 100%; } } } } .alert { position: relative; border-radius: var(--radius-md); border-style: var(--tw-border-style); border-width: 1px; padding-inline: calc(var(--spacing) * 5); padding-block: calc(var(--spacing) * 3); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { padding-right: calc(var(--spacing) * 10); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { padding-left: calc(var(--spacing) * 10); } .btn-close { position: absolute; top: calc(var(--spacing) * 2); font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 200ms; transition-duration: 200ms; --tw-ease: linear; transition-timing-function: linear; &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { right: calc(var(--spacing) * 5); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { left: calc(var(--spacing) * 5); } } &.alert-icon { position: relative; &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { padding-right: calc(var(--spacing) * 10); } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { padding-left: calc(var(--spacing) * 16); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { padding-right: calc(var(--spacing) * 16); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { padding-left: calc(var(--spacing) * 10); } .icon { position: absolute; inset-block: calc(var(--spacing) * 0); display: flex; width: calc(var(--spacing) * 11); align-items: center; justify-content: center; &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { left: calc(var(--spacing) * 0); } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { border-right-style: var(--tw-border-style); border-right-width: 1px; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { right: calc(var(--spacing) * 0); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { border-left-style: var(--tw-border-style); border-left-width: 1px; } } } &.alert-border { position: relative; gap: calc(var(--spacing) * 3); border-top-style: var(--tw-border-style) !important; border-top-width: 4px !important; background-color: var(--color-white); padding: calc(var(--spacing) * 5); @media (width >= 40rem) { display: flex; } &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-900); } } &.alert-gray { &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-850); } } } .drawer { position: fixed; inset-block: calc(var(--spacing) * 0); z-index: 1050; display: flex; width: calc(var(--spacing) * 48); transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); flex-direction: column; background-color: var(--color-white); 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)); --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); @media (width >= 48rem) { width: calc(var(--spacing) * 80); } &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-900); } &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-100); } } .main-sidebar { position: fixed; top: calc(var(--spacing) * 0); bottom: calc(var(--spacing) * 0); z-index: 1005; width: var(--spacing-sidebar); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 200ms; transition-duration: 200ms; --tw-ease: linear; transition-timing-function: linear; @media (width >= 64rem) { top: var(--spacing-topbar); } @media (width >= 64rem) { z-index: 1002; } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { left: calc(var(--spacing) * 0); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { right: calc(var(--spacing) * 0); } &:is(:where(.group)[data-layout="modern"] *) { top: calc(var(--spacing) * 0); } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="dualcolumn"] *) { left: calc(var(--spacing) * 20); } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="dualcolumn"] *) { right: calc(var(--spacing) * 20); } } &:is(:where(.group)[data-sidebar="icon"] *) { width: var(--spacing-sidebar-icon); } &:is(:where(.group)[data-sidebar="small"] *) { width: var(--spacing-sidebar-small); } &:is(:where(.group)[data-sidebar="medium"] *) { width: var(--spacing-sidebar-medium); } @media print { display: none; } .sidebar-wrapper { height: 100%; border-color: var(--color-sidebar-border); background-color: var(--color-sidebar); &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { border-right-style: var(--tw-border-style); border-right-width: 1px; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { border-left-style: var(--tw-border-style); border-left-width: 1px; } &:is(:where(.group)[data-sidebar-colors="light"] *) { &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } } &:is(:where(.group)[data-sidebar-colors="light"] *) { &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-900); } } } .navbar-brand { display: flex; height: var(--spacing-topbar); width: var(--spacing-sidebar); align-items: center; &:is(:where(.group)[data-layout="default"] *) { display: none; } &:is(:where(.group)[data-layout="default"] *) { padding-inline: calc(var(--spacing) * 4); } &:is(:where(.group)[data-sidebar="icon"] *) { width: var(--spacing-sidebar-icon); } &:is(:where(.group)[data-sidebar="medium"] *) { width: var(--spacing-sidebar-medium); } &:is(:where(.group)[data-sidebar="small"] *) { width: var(--spacing-sidebar-small); } } .menu-title { padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 2); font-size: 0.75rem; color: var(--color-menu-title); text-transform: uppercase; &:is(:where(.group)[data-layout="horizontal"] *) { display: none; } &:is(:where(.group)[data-sidebar="medium"] *) { text-align: center; } &:is(:where(.group)[data-sidebar-colors="light"] *) { &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-500); } } } .nav-link { display: flex; width: 100%; align-items: center; border-radius: var(--radius-md); padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 2.5); font-size: var(--text-15); -webkit-hyphens: auto; hyphens: auto; color: var(--color-sidebar-text); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 200ms; transition-duration: 200ms; --tw-ease: linear; transition-timing-function: linear; &:is(:where(.group)[data-sidebar="small"] *) { padding-block: calc(var(--spacing) * 3); } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { text-align: left; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { text-align: right; } &:is(:where(.group)[data-sidebar="medium"] *) { margin-inline: calc(var(--spacing) * 3); } &:is(:where(.group)[data-sidebar="medium"] *) { margin-block: calc(var(--spacing) * 2); } &:is(:where(.group)[data-sidebar="medium"] *) { width: calc(10rem - 24px) !important; } &:is(:where(.group)[data-sidebar="medium"] *) { flex-direction: column; } &:is(:where(.group)[data-sidebar="medium"] *) { gap: calc(var(--spacing) * 3); } &:is(:where(.group)[data-sidebar="medium"] *) { padding-block: calc(var(--spacing) * 3); } &:is(:where(.group)[data-sidebar="medium"] *) { text-align: center; } &:is(:where(.group)[data-sidebar="medium"] *) { &.active { background-color: color-mix(in srgb, oklch(65.26% 0.1828 255.54) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-sidebar-bg-active) 10%, transparent); } } } &:is(:where(.group)[data-sidebar="small"] *) { margin-inline: auto; } &:is(:where(.group)[data-sidebar="small"] *) { width: calc(4.6875rem - 24px) !important; } &:is(:where(.group)[data-sidebar="small"] *) { &.active { background-color: color-mix(in srgb, oklch(65.26% 0.1828 255.54) 10%, transparent) !important; @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-sidebar-bg-active) 10%, transparent) !important; } } } .content { &:is(:where(.group)[data-sidebar="small"] *) { display: none; } } .arrow { width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); color: currentcolor; 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)); --tw-duration: 300ms; transition-duration: 300ms; &:is(:where(.group)[data-sidebar="small"] *) { display: none; } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { margin-left: auto; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { margin-right: auto; } &:is(:where(.group)[data-sidebar="medium"] *) { display: none; } } &:hover { @media (hover: hover) { color: var(--color-sidebar-text-hover); } } &.active { color: var(--color-sidebar-text-active); } &:is(:where(.group)[data-sidebar-colors="light"] *) { &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-500); } } &:is(:where(.group)[data-sidebar-colors="light"] *) { &:where([data-mode=dark], [data-mode=dark] *) { &:hover { @media (hover: hover) { color: var(--color-sidebar-text-hover); } } } } &:is(:where(.group)[data-sidebar-colors="light"] *) { &:where([data-mode=dark], [data-mode=dark] *) { &.active { color: var(--color-sidebar-text-active); } } } } .navbar-menu { height: calc(100% - 5rem); &:is(:where(.group)[data-layout="boxed"] *) { height: calc(100% - 5rem); } &:is(:where(.group)[data-layout="modern"] *) { height: calc(100% - 10rem); } .dropdown-menu { position: static; &:is(:where(.group)[data-sidebar="small"] *) { position: fixed; } &:is(:where(.group)[data-sidebar="small"] *) { z-index: 30; } &:is(:where(.group)[data-sidebar="small"] *) { width: calc(var(--spacing) * 48); } &:is(:where(.group)[data-sidebar="small"] *) { background-color: var(--color-sidebar); } &:is(:where(.group)[data-sidebar="small"] *) { --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); } &:is(:where(.group)[data-sidebar="small"] *) { &:is(:where(.group)[data-sidebar-colors="light"] *) { &:where([data-mode=dark], [data-mode=dark] *) { border-style: var(--tw-border-style); border-width: 1px; } } } &:is(:where(.group)[data-sidebar="small"] *) { &:is(:where(.group)[data-sidebar-colors="light"] *) { &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } } } &:is(:where(.group)[data-sidebar="small"] *) { &:is(:where(.group)[data-sidebar-colors="light"] *) { &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-900); } } } .dropdown-wrapper { &:is(:where(.group)[data-sidebar="small"] *) { padding-block: calc(var(--spacing) * 2); } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { margin-left: calc(var(--spacing) * 6); } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-sidebar="medium"] *) { margin-left: calc(var(--spacing) * 0); } } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-sidebar="small"] *) { margin-left: calc(var(--spacing) * 0); } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { margin-right: calc(var(--spacing) * 6); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-sidebar="medium"] *) { margin-right: calc(var(--spacing) * 0); } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-sidebar="small"] *) { margin-right: calc(var(--spacing) * 0); } } &::-webkit-scrollbar { width: 8px; } &::-webkit-scrollbar-track { background-color: transparent; } &::-webkit-scrollbar-thumb { border-radius: calc(infinity * 1px); background-color: var(--color-gray-200); opacity: 0%; &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-800); } } &::-webkit-scrollbar-thumb:hover { opacity: 100%; } } li { a, button { display: flex; align-items: center; padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 1.5); font-size: 14.5px; -webkit-hyphens: auto; hyphens: auto; color: var(--color-sidebar-text); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 200ms; transition-duration: 200ms; --tw-ease: linear; transition-timing-function: linear; &:is(:where(.group)[data-sidebar="medium"] *) { justify-content: center; } &:is(:where(.group)[data-sidebar="medium"] *) { text-align: center; } position: relative; &::before { content: var(--tw-content); position: absolute; } &::before { content: var(--tw-content); top: calc(var(--spacing) * 3); } &::before { content: var(--tw-content); z-index: 10; } &::before { content: var(--tw-content); width: calc(var(--spacing) * 2); height: calc(var(--spacing) * 2); } &::before { content: var(--tw-content); border-radius: calc(infinity * 1px); } &::before { content: var(--tw-content); background-color: var(--color-effect); } &::before { content: var(--tw-content); outline-style: var(--tw-outline-style); outline-width: 1px; } &::before { content: var(--tw-content); outline-color: var(--color-sidebar-text); } &::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 { content: var(--tw-content); --tw-duration: 300ms; transition-duration: 300ms; } &::before { content: var(--tw-content); --tw-ease: linear; transition-timing-function: linear; } &::before { content: var(--tw-content); --tw-outline-style: dashed; outline-style: dashed; } &:hover { @media (hover: hover) { &::before { content: var(--tw-content); animation: var(--animate-spin); } } } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &::before { content: var(--tw-content); left: calc(var(--spacing) * -1); } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &::before { content: var(--tw-content); right: calc(var(--spacing) * -1); } } &:is(:where(.group)[data-sidebar-colors="light"] *) { &:where([data-mode=dark], [data-mode=dark] *) { &::before { content: var(--tw-content); background-color: var(--color-dark-900); } } } &:is(:where(.group)[data-sidebar="medium"] *) { &::before { content: var(--tw-content); display: none; } } &:is(:where(.group)[data-sidebar="small"] *) { padding-inline: calc(var(--spacing) * 6); } &:is(:where(.group)[data-sidebar="small"] *) { padding-block: calc(var(--spacing) * 2); } &:is(:where(.group)[data-sidebar="small"] *) { &::before { content: var(--tw-content); display: none; } } &:hover { @media (hover: hover) { color: var(--color-sidebar-text-hover); } } &:hover { @media (hover: hover) { &::before { content: var(--tw-content); outline-color: var(--color-sidebar-text-hover); } } } &.active { color: var(--color-sidebar-text-active); } &.active { &::before { content: var(--tw-content); outline-color: var(--color-sidebar-text-hover); } } &:is(:where(.group)[data-sidebar-colors="light"] *) { &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-500); } } &:is(:where(.group)[data-sidebar-colors="light"] *) { &:where([data-mode=dark], [data-mode=dark] *) { &:hover { @media (hover: hover) { color: var(--color-sidebar-text-hover); } } } } &:is(:where(.group)[data-sidebar-colors="light"] *) { &.active { color: var(--color-sidebar-text-active); } } } .nav-link { padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 1.5); &:is(:where(.group)[data-sidebar="medium"] *) { margin: calc(var(--spacing) * 0); } &:is(:where(.group)[data-sidebar="medium"] *) { width: 100% !important; } &:is(:where(.group)[data-sidebar="small"] *) { margin: calc(var(--spacing) * 0); } &:is(:where(.group)[data-sidebar="small"] *) { width: 100%; } &:is(:where(.group)[data-sidebar="small"] *) { padding-block: calc(var(--spacing) * 1.5); } &:is(:where(.group)[data-sidebar="medium"] *) { &.active { background-color: transparent; } } &:is(:where(.group)[data-sidebar="small"] *) { &.active { background-color: transparent; } } .content { &:is(:where(.group)[data-sidebar="small"] *) { display: block; } } .arrow { &:is(:where(.group)[data-sidebar="small"] *) { display: inline-block; } } } } } } } .dropdown { position: relative; display: inline-block; .dropdown-menu { position: absolute; z-index: 10; width: calc(var(--spacing) * 40); border-radius: var(--radius-md); background-color: var(--color-white); --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: oklch(0.928 0.006 264.531); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-gray-200) var(--tw-shadow-alpha), transparent); } &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-900); } &:where([data-mode=dark], [data-mode=dark] *) { --tw-shadow-color: oklch(0.279 0.041 260.031); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-dark-800) var(--tw-shadow-alpha), transparent); } } .dropdown-item { display: flex; width: 100%; align-items: center; gap: calc(var(--spacing) * 2); padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 2.5); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: linear; transition-timing-function: linear; &:first-of-type { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); } &:last-of-type { border-bottom-right-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } &:hover { @media (hover: hover) { background-color: var(--color-gray-50); } } &:hover { @media (hover: hover) { color: var(--color-primary-500); } } &:disabled { color: var(--color-gray-500); } &:where([data-mode=dark], [data-mode=dark] *) { &:hover { @media (hover: hover) { background-color: var(--color-dark-850); } } } &:where([data-mode=dark], [data-mode=dark] *) { &:disabled { color: var(--color-dark-500); } } } &.dropdown-right { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { right: calc(var(--spacing) * 0); } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { left: auto; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { right: auto; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { left: calc(var(--spacing) * 0); } } &.dropdown-top { bottom: 100%; } &.dropdown-top-right { @media (width >= 64rem) { top: calc(var(--spacing) * 0); } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { @media (width >= 64rem) { left: 100%; } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { @media (width >= 64rem) { right: 100%; } } } &.dropdown-top-left { @media (width >= 64rem) { top: calc(var(--spacing) * 0); } @media (width >= 64rem) { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { right: 100%; } } @media (width >= 64rem) { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { left: auto; } } @media (width >= 64rem) { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { right: auto; } } @media (width >= 64rem) { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { left: 100%; } } } } } .main-sidebar { &:is(:where(.group)[data-layout="horizontal"] *) { top: var(--spacing-topbar); } &:is(:where(.group)[data-layout="horizontal"] *) { bottom: auto; } &:is(:where(.group)[data-layout="horizontal"] *) { width: 100%; } &:is(:where(.group)[data-layout="horizontal"] *) { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { right: calc(var(--spacing) * 0); } } &:is(:where(.group)[data-layout="horizontal"] *) { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { left: calc(var(--spacing) * 0); } } .sidebar-wrapper { &:is(:where(.group)[data-layout="horizontal"] *) { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } } .navbar-brand { &:is(:where(.group)[data-layout="horizontal"] *) { display: none; } } .nav-link { &:is(:where(.group)[data-layout="horizontal"] *) { padding: calc(var(--spacing) * 3); } &:is(:where(.group)[data-layout="horizontal"] *) { &::before { content: var(--tw-content); display: none; } } &:is(:where(.group)[data-layout="horizontal"] *) { @media (width >= 48rem) { padding: calc(var(--spacing) * 4); } } } .navbar-menu { &:is(:where(.group)[data-layout="horizontal"] *) { height: calc(var(--spacing) * 64); } &:is(:where(.group)[data-layout="horizontal"] *) { @media (width >= 48rem) { height: auto; } } } .dropdown-menu { &:is(:where(.group)[data-layout="horizontal"] *) { position: static; } &:is(:where(.group)[data-layout="horizontal"] *) { background-color: var(--color-white); } &:is(:where(.group)[data-layout="horizontal"] *) { padding-block: calc(var(--spacing) * 0); } &:is(:where(.group)[data-layout="horizontal"] *) { @media (width >= 48rem) { position: fixed; } } &:is(:where(.group)[data-layout="horizontal"] *) { @media (width >= 48rem) { width: calc(var(--spacing) * 40); } } &:is(:where(.group)[data-layout="horizontal"] *) { @media (width >= 48rem) { padding-block: calc(var(--spacing) * 2); } } &:is(:where(.group)[data-layout="horizontal"] *) { @media (width >= 48rem) { --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); } } &:where([data-mode=dark], [data-mode=dark] *) { &:is(:where(.group)[data-layout="horizontal"] *) { background-color: var(--color-dark-850); } } .dropdown-wrapper { &:is(:where(.group)[data-layout="horizontal"] *) { overflow-y: auto; } &:is(:where(.group)[data-layout="horizontal"] *) { @media (width >= 48rem) { max-height: calc(100vh - 10rem); } } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="horizontal"] *) { @media (width >= 48rem) { margin-left: calc(var(--spacing) * 0); } } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="horizontal"] *) { @media (width >= 48rem) { margin-right: calc(var(--spacing) * 0); } } } } &.mega-menu { &:is(:where(.group)[data-layout="horizontal"] *) { @media (width >= 48rem) { width: calc(var(--spacing) * 96); } } } li { a, button { &:is(:where(.group)[data-layout="horizontal"] *) { padding-block: calc(var(--spacing) * 2); } &:is(:where(.group)[data-layout="horizontal"] *) { &::before { content: var(--tw-content); display: none; } } } } .nav-link { &:is(:where(.group)[data-layout="horizontal"] *) { &::before { content: var(--tw-content); display: none; } } } } } .timeline { display: flex; flex-direction: column; :is(& > *) { position: relative; } :is(& > *) { padding-bottom: calc(var(--spacing) * 3); } :is(& > *) { &::before { content: var(--tw-content); position: absolute; } } :is(& > *) { &::before { content: var(--tw-content); top: calc(var(--spacing) * 2); } } :is(& > *) { &::before { content: var(--tw-content); bottom: calc(var(--spacing) * -2); } } :is(& > *) { &::before { content: var(--tw-content); width: calc(var(--spacing) * 0.5); } } :is(& > *) { &::before { content: var(--tw-content); background-color: var(--color-gray-200); } } :is(& > *) { &::after { content: var(--tw-content); position: absolute; } } :is(& > *) { &::after { content: var(--tw-content); top: calc(var(--spacing) * 2); } } :is(& > *) { &::after { content: var(--tw-content); width: calc(var(--spacing) * 1.5); height: calc(var(--spacing) * 1.5); } } :is(& > *) { &::after { content: var(--tw-content); border-radius: calc(infinity * 1px); } } :is(& > *) { &::after { content: var(--tw-content); background-color: var(--color-gray-300); } } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { :is(& > *) { padding-left: calc(var(--spacing) * 5); } } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { :is(& > *) { &::before { content: var(--tw-content); left: calc(var(--spacing) * 0.5); } } } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { :is(& > *) { &::after { content: var(--tw-content); left: calc(var(--spacing) * 0); } } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { :is(& > *) { padding-right: calc(var(--spacing) * 5); } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { :is(& > *) { &::before { content: var(--tw-content); right: calc(var(--spacing) * 0.5); } } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { :is(& > *) { &::after { content: var(--tw-content); right: calc(var(--spacing) * 0); } } } &:where([data-mode=dark], [data-mode=dark] *) { :is(& > *) { &::before { content: var(--tw-content); background-color: var(--color-dark-800); } } } &:where([data-mode=dark], [data-mode=dark] *) { :is(& > *) { &::after { content: var(--tw-content); background-color: var(--color-gray-800); } } } li { &:last-child { padding-bottom: calc(var(--spacing) * 0); } &:last-child { &::before { content: var(--tw-content); display: none; } } } &.timeline-square { :is(& > *) { &::after { content: var(--tw-content); border-radius: var(--radius-xs); } } } } .switch-group { display: flex; cursor: pointer; align-items: center; -webkit-user-select: none; user-select: none; .switch-wrapper { display: block; height: calc(var(--spacing) * 7); width: calc(var(--spacing) * 12); border-radius: calc(infinity * 1px); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-gray-200); &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } } .switch-dot { position: absolute; top: calc(var(--spacing) * 1); width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); border-radius: calc(infinity * 1px); background-color: var(--color-gray-200); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { left: calc(var(--spacing) * 1); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { right: calc(var(--spacing) * 1); } &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-800); } } &.switch-soft { .switch-wrapper { border-style: var(--tw-border-style); border-width: 0px; background-color: var(--color-gray-200); &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-800); } } .switch-dot { background-color: var(--color-white); &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-900); } } } &.switch-text { .switch-dot { display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); &::after { content: var(--tw-content); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } &::after { content: var(--tw-content); --tw-content: "N"; content: var(--tw-content); } &:is(:where(.peer):checked ~ *) { &::after { content: var(--tw-content); --tw-content: "Y"; content: var(--tw-content); } } } } &.switch-3d { .switch-wrapper { --tw-shadow: inset 0 2px 4px 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: oklch(0.872 0.01 258.338); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-gray-300) var(--tw-shadow-alpha), transparent); } &:where([data-mode=dark], [data-mode=dark] *) { --tw-shadow-color: oklch(23.13% 0.0399 270.37); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-dark-850) var(--tw-shadow-alpha), transparent); } } } .switch-dot { background-color: var(--color-white); --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); --tw-shadow-color: oklch(0.707 0.022 261.325); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-gray-400) var(--tw-shadow-alpha), transparent); } &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-800); } &:where([data-mode=dark], [data-mode=dark] *) { --tw-shadow-color: oklch(23.13% 0.0399 270.37); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-dark-850) var(--tw-shadow-alpha), transparent); } } } } } .breadcrumb { margin-bottom: calc(var(--spacing) * 3); display: flex; flex-shrink: 0; align-items: center; :is(& > *) { position: relative; } :is(& > *) { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } :is(& > *) { &::before { content: var(--tw-content); position: absolute; } } :is(& > *) { &::before { content: var(--tw-content); font-family: var(--font-remix); } } :is(& > *) { &::before { content: var(--tw-content); color: var(--color-gray-500); } } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { :is(& > *) { padding-right: calc(var(--spacing) * 6); } } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { :is(& > *) { &::before { content: var(--tw-content); right: calc(var(--spacing) * 1); } } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { :is(& > *) { padding-left: calc(var(--spacing) * 6); } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { :is(& > *) { &::before { content: var(--tw-content); left: calc(var(--spacing) * 1); } } } &:where([data-mode=dark], [data-mode=dark] *) { :is(& > *) { &::before { content: var(--tw-content); color: var(--color-dark-500); } } } .breadcrumb-item { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:last-child { padding-right: calc(var(--spacing) * 0); } } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:last-child { &::before { content: var(--tw-content); display: none; } } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:last-child { padding-left: calc(var(--spacing) * 0); } } a { color: var(--color-gray-500); &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-500); } } &.active { color: var(--color-gray-800); &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-50); } } } } .modal-wrap { position: relative; z-index: 1099; display: flex; width: 100%; flex-direction: column; border-radius: var(--radius-md); background-color: var(--color-white); --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); --tw-shadow-color: color-mix(in srgb, oklch(0.928 0.006 264.531) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-gray-200) 30%, transparent) var(--tw-shadow-alpha), transparent); } @media (width >= 48rem) { width: 30rem !important; } &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-900); } &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-100); } &:where([data-mode=dark], [data-mode=dark] *) { --tw-shadow-color: oklch(0.208 0.042 265.755); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-dark-900) var(--tw-shadow-alpha), transparent); } } &.modal-xs { width: 100%; @media (width >= 48rem) { width: 20rem !important; } } &.modal-sm { width: 100%; @media (width >= 48rem) { width: 26rem !important; } } &.modal-lg { width: 100%; @media (width >= 64rem) { width: 40rem !important; } } &.modal-xl { width: 100%; @media (width >= 64rem) { width: 52rem !important; } } &.modal-2xl { width: 100%; @media (width >= 80rem) { width: 64rem !important; } } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .not-sr-only { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; } .tabs-pills { display: flex; flex-wrap: wrap; align-items: center; .nav-item { position: relative; display: block; border-radius: var(--radius-md); padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 2); text-align: center; --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 200ms; transition-duration: 200ms; --tw-ease: linear; transition-timing-function: linear; } &.tabs-icon { .nav-item { display: flex; width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); align-items: center; justify-content: center; padding: calc(var(--spacing) * 0); } } } .accordion-boxed { position: relative; .accordion-button { display: block; width: 100%; border-radius: var(--radius-md); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-gray-200); padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2.5); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 200ms; transition-duration: 200ms; --tw-ease: linear; transition-timing-function: linear; &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } } } .accordion { position: relative; border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-gray-200); &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } .accordion-button { display: block; width: 100%; padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2.5); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 200ms; transition-duration: 200ms; --tw-ease: linear; transition-timing-function: linear; } } .progress-bar { position: relative; height: calc(var(--spacing) * 4); width: 100%; border-radius: calc(infinity * 1px); background-color: var(--color-gray-100); &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-800); } &.progress-1 { height: calc(var(--spacing) * 2); .progress-bar-wrap { height: calc(var(--spacing) * 2); } } &.progress-2 { height: calc(var(--spacing) * 2.5); .progress-bar-wrap { height: calc(var(--spacing) * 2.5); } } &.progress-3 { height: calc(var(--spacing) * 3); .progress-bar-wrap { height: calc(var(--spacing) * 3); } } &.progress-4 { height: calc(var(--spacing) * 4); .progress-bar-wrap { height: calc(var(--spacing) * 4); } } &.progress-5 { height: calc(var(--spacing) * 5); .progress-bar-wrap { height: calc(var(--spacing) * 5); } } &.progress-6 { height: calc(var(--spacing) * 6); .progress-bar-wrap { height: calc(var(--spacing) * 6); } } &.progress-7 { height: calc(var(--spacing) * 8); .progress-bar-wrap { height: calc(var(--spacing) * 8); } } } .accordion-main-content { position: relative; max-height: calc(var(--spacing) * 0); overflow: hidden; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 700ms; transition-duration: 700ms; .content { padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2.5); } } .\!fixed { position: fixed !important; } .absolute { position: absolute; } .fixed { position: fixed; } .relative { position: relative; } .static { position: static; } .sticky { position: sticky; } .inset-0 { inset: calc(var(--spacing) * 0); } .main-topbar { &:is(:where(.group)[data-layout="boxed"] *) { inset-inline: calc(var(--spacing) * 8); } &:is(:where(.group)[data-layout="boxed"] *) { top: calc(var(--spacing) * 8); } &:is(:where(.group)[data-layout="boxed"] *) { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); } } .\!inset-x-4 { inset-inline: calc(var(--spacing) * 4) !important; } .inset-x-0 { inset-inline: calc(var(--spacing) * 0); } .inset-y-0 { inset-block: calc(var(--spacing) * 0); } .start-0 { inset-inline-start: calc(var(--spacing) * 0); } .start-50 { inset-inline-start: calc(var(--spacing) * 50); } .start-100 { inset-inline-start: calc(var(--spacing) * 100); } .end-0 { inset-inline-end: calc(var(--spacing) * 0); } .end-1 { inset-inline-end: calc(var(--spacing) * 1); } .end-50 { inset-inline-end: calc(var(--spacing) * 50); } .end-100 { inset-inline-end: calc(var(--spacing) * 100); } .main-sidebar { &:is(:where(.group)[data-layout="semibox"] *) { top: calc(var(--spacing) * 3); } &:is(:where(.group)[data-layout="semibox"] *) { bottom: calc(var(--spacing) * 3); } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="semibox"] *) { left: calc(var(--spacing) * 3); } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="semibox"] *) { right: calc(var(--spacing) * 3); } } .navbar-menu { &:is(:where(.group)[data-layout="semibox"] *) { height: calc(100% - 10rem); } } .sidebar-wrapper { &:is(:where(.group)[data-layout="semibox"] *) { border-radius: var(--radius-md); } &:is(:where(.group)[data-layout="semibox"] *) { border-style: var(--tw-border-style); border-width: 1px; } } } .main-topbar { &:is(:where(.group)[data-layout="semibox"] *) { top: calc(var(--spacing) * 3); } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="semibox"] *) { right: calc(var(--spacing) * 3); } } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="semibox"] *) { left: calc(var(--spacing) * 3); } } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { @media (width >= 64rem) { &:is(:where(.group)[data-layout="semibox"] *) { left: calc(15rem + 0.75rem + 0.75rem); } } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="semibox"] *) { right: calc(15rem + 0.75rem + 0.75rem); } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="semibox"] *) { left: calc(var(--spacing) * 3); } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="semibox"] *) { right: calc(var(--spacing) * 3); } } } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="semibox"] *) { &:is(:where(.group)[data-sidebar="small"] *) { left: calc(4.6875rem + 0.75rem + 0.75rem); } } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="semibox"] *) { &:is(:where(.group)[data-sidebar="small"] *) { right: calc(4.6875rem + 0.75rem + 0.75rem); } } } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="semibox"] *) { &:is(:where(.group)[data-sidebar="medium"] *) { left: calc(10rem + 0.75rem + 0.75rem); } } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="semibox"] *) { &:is(:where(.group)[data-sidebar="medium"] *) { right: calc(10rem + 0.75rem + 0.75rem); } } } .main-topbar-wrapper { &:is(:where(.group)[data-layout="semibox"] *) { border-radius: var(--radius-md); } &:is(:where(.group)[data-layout="semibox"] *) { border-style: var(--tw-border-style); border-width: 1px; } } } .-top-6 { top: calc(var(--spacing) * -6); } .-top-10 { top: calc(var(--spacing) * -10); } .-top-20 { top: calc(var(--spacing) * -20); } .-top-40 { top: calc(var(--spacing) * -40); } .-top-64 { top: calc(var(--spacing) * -64); } .top-0 { top: calc(var(--spacing) * 0); } .top-1 { top: calc(var(--spacing) * 1); } .top-1\/2 { top: calc(1/2 * 100%); } .top-2 { top: calc(var(--spacing) * 2); } .top-5 { top: calc(var(--spacing) * 5); } .top-20 { top: calc(var(--spacing) * 20); } .top-50 { top: calc(var(--spacing) * 50); } .top-100 { top: calc(var(--spacing) * 100); } .main-sidebar { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="boxed"] *) { left: calc(var(--spacing) * 8); } } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="boxed"] *) { border-bottom-left-radius: var(--radius-md); } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="boxed"] *) { right: calc(var(--spacing) * 8); } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="boxed"] *) { border-bottom-right-radius: var(--radius-md); } } .navbar-brand { &:is(:where(.group)[data-layout="boxed"] *) { display: none; } } } .main-footer { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="horizontal"] *) { left: calc(var(--spacing) * 0); } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="horizontal"] *) { right: calc(var(--spacing) * 0); } } } .-right-6 { right: calc(var(--spacing) * -6); } .-right-8 { right: calc(var(--spacing) * -8); } .-right-10 { right: calc(var(--spacing) * -10); } .-right-20 { right: calc(var(--spacing) * -20); } .-right-40 { right: calc(var(--spacing) * -40); } .right-0 { right: calc(var(--spacing) * 0); } .-bottom-20 { bottom: calc(var(--spacing) * -20); } .-bottom-40 { bottom: calc(var(--spacing) * -40); } .bottom-0 { bottom: calc(var(--spacing) * 0); } .bottom-50 { bottom: calc(var(--spacing) * 50); } .bottom-100 { bottom: calc(var(--spacing) * 100); } .bottom-full { bottom: 100%; } .\!left-3 { left: calc(var(--spacing) * 3) !important; } .-left-20 { left: calc(var(--spacing) * -20); } .-left-40 { left: calc(var(--spacing) * -40); } .left-0 { left: calc(var(--spacing) * 0); } .left-1 { left: calc(var(--spacing) * 1); } .left-5 { left: calc(var(--spacing) * 5); } .isolate { isolation: isolate; } .isolation-auto { isolation: auto; } .main-topbar { &:is(:where(.group)[data-layout="horizontal"] *) { z-index: 1005; } } .z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-30 { z-index: 30; } .z-50 { z-index: 50; } .z-100 { z-index: 100; } .z-\[1003\] { z-index: 1003; } .z-\[1004\] { z-index: 1004; } .z-\[1005\] { z-index: 1005; } .z-\[1049\] { z-index: 1049; } .z-\[1050\] { z-index: 1050; } .z-\[1099\] { z-index: 1099; } .z-auto { z-index: auto; } .order-0 { order: 0; } .order-1 { order: 1; } .order-2 { order: 2; } .order-3 { order: 3; } .order-4 { order: 4; } .order-5 { order: 5; } .order-first { order: -9999; } .order-last { order: 9999; } .order-none { order: 0; } .col-1 { grid-column: 1; } .col-2 { grid-column: 2; } .col-3 { grid-column: 3; } .col-4 { grid-column: 4; } .col-5 { grid-column: 5; } .col-6 { grid-column: 6; } .col-7 { grid-column: 7; } .col-8 { grid-column: 8; } .col-9 { grid-column: 9; } .col-10 { grid-column: 10; } .col-11 { grid-column: 11; } .col-12 { grid-column: 12; } .col-auto { grid-column: auto; } .col-span-1 { grid-column: span 1 / span 1; } .col-span-2 { grid-column: span 2 / span 2; } .col-span-3 { grid-column: span 3 / span 3; } .col-span-9 { grid-column: span 9 / span 9; } .col-span-10 { grid-column: span 10 / span 10; } .col-span-11 { grid-column: span 11 / span 11; } .col-span-12 { grid-column: span 12 / span 12; } .col-span-full { grid-column: 1 / -1; } .col-start-auto { grid-column-start: auto; } .col-end-auto { grid-column-end: auto; } .row-auto { grid-row: auto; } .row-span-full { grid-row: 1 / -1; } .row-start-auto { grid-row-start: auto; } .row-end-auto { grid-row-end: auto; } .float-end { float: inline-end; } .float-left { float: left; } .float-none { float: none; } .float-right { float: right; } .float-start { float: inline-start; } .clear-both { clear: both; } .clear-end { clear: inline-end; } .clear-left { clear: left; } .clear-none { clear: none; } .clear-right { clear: right; } .clear-start { clear: inline-start; } .container { 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; } } .m-0 { margin: calc(var(--spacing) * 0); } .m-1 { margin: calc(var(--spacing) * 1); } .m-2 { margin: calc(var(--spacing) * 2); } .m-3 { margin: calc(var(--spacing) * 3); } .m-4 { margin: calc(var(--spacing) * 4); } .m-5 { margin: calc(var(--spacing) * 5); } .m-auto { margin: auto; } .-mx-5 { margin-inline: calc(var(--spacing) * -5); } .main-footer { &:is(:where(.group)[data-content-width="fluid"] *) { margin-inline: var(--spacing-space); } } .mx-0 { margin-inline: calc(var(--spacing) * 0); } .mx-1 { margin-inline: calc(var(--spacing) * 1); } .mx-2 { margin-inline: calc(var(--spacing) * 2); } .mx-3 { margin-inline: calc(var(--spacing) * 3); } .mx-4 { margin-inline: calc(var(--spacing) * 4); } .mx-5 { margin-inline: calc(var(--spacing) * 5); } .mx-12 { margin-inline: calc(var(--spacing) * 12); } .mx-auto { margin-inline: auto; } .my-0 { margin-block: calc(var(--spacing) * 0); } .my-1 { margin-block: calc(var(--spacing) * 1); } .my-2 { margin-block: calc(var(--spacing) * 2); } .my-3 { margin-block: calc(var(--spacing) * 3); } .my-4 { margin-block: calc(var(--spacing) * 4); } .my-5 { margin-block: calc(var(--spacing) * 5); } .my-auto { margin-block: auto; } .ms-0 { margin-inline-start: calc(var(--spacing) * 0); } .ms-1 { margin-inline-start: calc(var(--spacing) * 1); } .ms-2 { margin-inline-start: calc(var(--spacing) * 2); } .ms-3 { margin-inline-start: calc(var(--spacing) * 3); } .ms-4 { margin-inline-start: calc(var(--spacing) * 4); } .ms-5 { margin-inline-start: calc(var(--spacing) * 5); } .ms-auto { margin-inline-start: auto; } .me-0 { margin-inline-end: calc(var(--spacing) * 0); } .me-1 { margin-inline-end: calc(var(--spacing) * 1); } .me-2 { margin-inline-end: calc(var(--spacing) * 2); } .me-3 { margin-inline-end: calc(var(--spacing) * 3); } .me-4 { margin-inline-end: calc(var(--spacing) * 4); } .me-5 { margin-inline-end: calc(var(--spacing) * 5); } .me-auto { margin-inline-end: auto; } .modal-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; border-top-style: var(--tw-border-style); border-top-width: 1px; border-color: var(--color-gray-200); padding: calc(var(--spacing) * 5); &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } } .-mt-20 { margin-top: calc(var(--spacing) * -20); } .mt-0 { margin-top: calc(var(--spacing) * 0); } .mt-0\.5 { margin-top: calc(var(--spacing) * 0.5); } .mt-1 { margin-top: calc(var(--spacing) * 1); } .mt-1\.5 { margin-top: calc(var(--spacing) * 1.5); } .mt-2 { margin-top: calc(var(--spacing) * 2); } .mt-3 { margin-top: calc(var(--spacing) * 3); } .mt-4 { margin-top: calc(var(--spacing) * 4); } .mt-5 { margin-top: calc(var(--spacing) * 5); } .mt-6 { margin-top: calc(var(--spacing) * 6); } .mt-8 { margin-top: calc(var(--spacing) * 8); } .mt-9 { margin-top: calc(var(--spacing) * 9); } .mt-auto { margin-top: auto; } .sidebar-toggle { display: flex; width: calc(var(--spacing) * 9); height: calc(var(--spacing) * 9); align-items: center; justify-content: center; border-radius: var(--radius-md); border-style: var(--tw-border-style); border-width: 1px; border-color: transparent; color: var(--color-gray-500); &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="default"] *) { margin-left: calc(var(--spacing) * 2); } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="default"] *) { margin-right: calc(var(--spacing) * 2); } } &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-500); } } .page-wrapper { padding-inline: calc(var(--spacing) * 5); padding-top: calc(0rem * 1.2); padding-bottom: calc(var(--spacing) * 14); &:is(:where(.group)[data-layout="horizontal"] *) { padding-top: calc(0rem * 1.9); } @media (width >= 80rem) { padding-inline: calc(var(--spacing) * 28); } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { margin-left: calc(var(--spacing) * 0); } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { @media (width >= 64rem) { margin-left: var(--spacing-sidebar); } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { margin-right: calc(var(--spacing) * 0); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { @media (width >= 64rem) { margin-right: var(--spacing-sidebar); } } @media print { padding: calc(var(--spacing) * 0); } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { @media print { margin-left: calc(var(--spacing) * 0); } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { @media print { margin-right: calc(var(--spacing) * 0); } } @media (width >= 64rem) { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-sidebar="small"] *) { margin-left: var(--spacing-sidebar-small); } } } @media (width >= 64rem) { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-sidebar="small"] *) { margin-right: var(--spacing-sidebar-small); } } } @media (width >= 64rem) { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-sidebar="medium"] *) { margin-left: var(--spacing-sidebar-medium); } } } @media (width >= 64rem) { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-sidebar="small"] *) { margin-left: var(--spacing-sidebar-small); } } } @media (width >= 64rem) { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-sidebar="medium"] *) { margin-right: var(--spacing-sidebar-medium); } } } @media (width >= 64rem) { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-sidebar="small"] *) { margin-right: var(--spacing-sidebar-small); } } } } .page-wrapper { &:is(:where(.group)[data-content-width="fluid"] *) { padding-inline: var(--spacing-space); } &:is(:where(.group)[data-layout="semibox"] *) { padding-top: calc(0rem * 1.3); } &:is(:where(.group)[data-content-width="fluid"] *) { &:is(:where(.group)[data-layout="semibox"] *) { padding-inline: calc(var(--spacing) * 3); } } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="semibox"] *) { margin-left: calc(var(--spacing) * 0); } } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { @media (width >= 64rem) { &:is(:where(.group)[data-layout="semibox"] *) { margin-left: calc(var(--spacing-sidebar) + 0.75rem); } } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="semibox"] *) { margin-right: calc(var(--spacing) * 0); } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { @media (width >= 64rem) { &:is(:where(.group)[data-layout="semibox"] *) { margin-right: calc(var(--spacing-sidebar) + 0.75rem); } } } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="semibox"] *) { &:is(:where(.group)[data-sidebar="small"] *) { margin-left: calc(4.6875rem + 0.75rem); } } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="semibox"] *) { &:is(:where(.group)[data-sidebar="small"] *) { margin-right: calc(4.6875rem + 0.75rem); } } } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="semibox"] *) { &:is(:where(.group)[data-sidebar="medium"] *) { margin-left: calc(10rem + 0.75rem); } } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="semibox"] *) { &:is(:where(.group)[data-sidebar="medium"] *) { margin-right: calc(10rem + 0.75rem); } } } } .page-wrapper { &:is(:where(.group)[data-layout="horizontal"] *) { padding-top: calc(0rem * 1.2); } &:is(:where(.group)[data-layout="horizontal"] *) { @media (width >= 64rem) { padding-top: calc(0rem * 1.9); } } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="horizontal"] *) { margin-left: calc(var(--spacing) * 0); } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="horizontal"] *) { margin-right: calc(var(--spacing) * 0); } } } .-mr-20 { margin-right: calc(var(--spacing) * -20); } .mr-1 { margin-right: calc(var(--spacing) * 1); } .mr-2 { margin-right: calc(var(--spacing) * 2); } .mr-3 { margin-right: calc(var(--spacing) * 3); } .mr-4 { margin-right: calc(var(--spacing) * 4); } .page-heading { margin-bottom: calc(var(--spacing) * 3); display: flex; align-items: center; @media print { display: none; } .breadcrumb { margin-bottom: calc(var(--spacing) * 0); .breadcrumb-item { &:is(:where(.group)[data-nav-type="pattern"] *) { &::before { content: var(--tw-content); color: color-mix(in srgb, #fff 50%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 50%, transparent); } } } a { &:is(:where(.group)[data-nav-type="pattern"] *) { color: color-mix(in srgb, #fff 50%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 50%, transparent); } } } &.active { &:is(:where(.group)[data-nav-type="pattern"] *) { color: var(--color-white); } } } } } .form-label { margin-bottom: calc(var(--spacing) * 2); display: block; 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); } .card { margin-bottom: calc(var(--spacing) * 5); border-radius: var(--radius-md); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-gray-200); background-color: var(--color-white); --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); --tw-shadow-color: oklch(0.967 0.003 264.542); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-gray-100) var(--tw-shadow-alpha), transparent); } &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-900); } &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-100); } &:where([data-mode=dark], [data-mode=dark] *) { --tw-shadow-color: oklch(0.208 0.042 265.755); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-dark-900) var(--tw-shadow-alpha), transparent); } } .card-title { font-size: var(--text-card-title); } &.hovered { transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 200ms; transition-duration: 200ms; --tw-ease: linear; transition-timing-function: linear; &:hover { @media (hover: hover) { --tw-translate-y: calc(var(--spacing) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } } } } .-mb-16 { margin-bottom: calc(var(--spacing) * -16); } .mb-0 { margin-bottom: calc(var(--spacing) * 0); } .mb-1 { margin-bottom: calc(var(--spacing) * 1); } .mb-1\.5 { margin-bottom: calc(var(--spacing) * 1.5); } .mb-2 { margin-bottom: calc(var(--spacing) * 2); } .mb-3 { margin-bottom: calc(var(--spacing) * 3); } .mb-4 { margin-bottom: calc(var(--spacing) * 4); } .mb-5 { margin-bottom: calc(var(--spacing) * 5); } .mb-6 { margin-bottom: calc(var(--spacing) * 6); } .mb-8 { margin-bottom: calc(var(--spacing) * 8); } .mb-10 { margin-bottom: calc(var(--spacing) * 10); } .mb-12 { margin-bottom: calc(var(--spacing) * 12); } .mb-auto { margin-bottom: auto; } .-ml-16 { margin-left: calc(var(--spacing) * -16); } .ml-1 { margin-left: calc(var(--spacing) * 1); } .ml-2 { margin-left: calc(var(--spacing) * 2); } .ml-3 { margin-left: calc(var(--spacing) * 3); } .ml-auto { margin-left: auto; } .box-border { box-sizing: border-box; } .box-content { box-sizing: content-box; } .input-spin-group { display: flex; width: calc(var(--spacing) * 32); align-items: center; text-align: center; .input-spin-minus { display: flex; width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); flex-shrink: 0; align-items: center; justify-content: center; border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-gray-200); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 200ms; transition-duration: 200ms; --tw-ease: linear; transition-timing-function: linear; &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { border-right-style: var(--tw-border-style); border-right-width: 0px; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { border-left-style: var(--tw-border-style); border-left-width: 0px; } &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } } .input-spin-plus { display: flex; width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); flex-shrink: 0; align-items: center; justify-content: center; border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-gray-200); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 200ms; transition-duration: 200ms; --tw-ease: linear; transition-timing-function: linear; &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { border-left-style: var(--tw-border-style); border-left-width: 0px; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { border-right-style: var(--tw-border-style); border-right-width: 0px; } &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } } .input-spin { border-radius: 0; padding: calc(var(--spacing) * 0); text-align: center; &:focus { border-color: var(--color-gray-200); } &:where([data-mode=dark], [data-mode=dark] *) { &:focus { border-color: var(--color-dark-800); } } } } .form-input { display: block; height: calc(var(--spacing) * 10); width: 100%; border-radius: var(--radius-md); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-gray-200); background-color: var(--color-white); padding-inline: calc(var(--spacing) * 4); padding-block: 0.5625rem; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); &::placeholder { color: var(--color-gray-400); } &:focus { border-color: var(--color-primary-500); } &: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 { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + 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); } &:focus { outline-style: var(--tw-outline-style); outline-width: 0px; } &:disabled { cursor: none; } &:disabled { border-color: var(--color-gray-200); } &:disabled { background-color: var(--color-gray-100); } &:disabled { color: var(--color-gray-500); } &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-900); } &:where([data-mode=dark], [data-mode=dark] *) { &::placeholder { color: var(--color-dark-500); } } &:where([data-mode=dark], [data-mode=dark] *) { &:focus { border-color: var(--color-primary-500); } } &:where([data-mode=dark], [data-mode=dark] *) { &:disabled { border-color: var(--color-dark-800); } } &:where([data-mode=dark], [data-mode=dark] *) { &:disabled { background-color: var(--color-dark-850); } } &:where([data-mode=dark], [data-mode=dark] *) { &:disabled { color: var(--color-dark-500); } } &.input-sm { height: 1.625rem; padding-inline: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * 1); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } &.input-md { height: 2.125rem; padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 1.5); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } &.input-lg { height: 2.7813rem; padding-inline: calc(var(--spacing) * 5); padding-block: calc(var(--spacing) * 2.5); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } .form-select { display: block; height: calc(var(--spacing) * 10); width: 100%; appearance: none; border-radius: var(--radius-md); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-gray-200); background-repeat: no-repeat; padding-inline: calc(var(--spacing) * 4); padding-block: 0.5625rem; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); &: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 { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + 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); } &:focus { outline-style: var(--tw-outline-style); outline-width: 0px; } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { padding-right: calc(var(--spacing) * 10); } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { padding-left: calc(var(--spacing) * 3); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { padding-right: calc(var(--spacing) * 3); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { padding-left: calc(var(--spacing) * 10); } background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231f242e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-position: right 0.70rem center; background-repeat: no-repeat; background-size: 0.70em 0.70em; &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-900); } } .pagination { display: inline-flex; flex-wrap: wrap; align-items: center; gap: calc(var(--spacing) * 2); .pagination-item { display: flex; width: calc(var(--spacing) * 9); height: calc(var(--spacing) * 9); align-items: center; justify-content: center; border-radius: var(--radius-md); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-gray-200); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 200ms; transition-duration: 200ms; --tw-ease: linear; transition-timing-function: linear; &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } } .pagination-pre, .pagination-next { display: flex; height: calc(var(--spacing) * 9); align-items: center; justify-content: center; border-radius: var(--radius-md); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-gray-200); padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 1); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 200ms; transition-duration: 200ms; --tw-ease: linear; transition-timing-function: linear; &:disabled { color: var(--color-gray-500); } &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } &:where([data-mode=dark], [data-mode=dark] *) { &:disabled { color: var(--color-dark-500); } } } &.pagination-md { .pagination-item { width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); } } &.pagination-sm { .pagination-item { width: calc(var(--spacing) * 7); height: calc(var(--spacing) * 7); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .pagination-pre, .pagination-next { height: calc(var(--spacing) * 7); padding-inline: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * 0.5); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } } &.pagination-xs { .pagination-item { width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .pagination-pre, .pagination-next { height: calc(var(--spacing) * 6); padding-inline: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * 0.5); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } } &.pagination-lg { .pagination-item { width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); font-size: var(--text-15); } .pagination-pre, .pagination-next { height: calc(var(--spacing) * 10); padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 1); font-size: var(--text-15); } } &.pagination-flush { .pagination-item { --tw-border-style: none; border-style: none; } .pagination-pre, .pagination-next { --tw-border-style: none; border-style: none; } } } .topbar-link { display: flex; width: calc(var(--spacing) * 9); height: calc(var(--spacing) * 9); height: var(--spacing-topbar); align-items: center; justify-content: center; border-radius: var(--radius-md); border-style: var(--tw-border-style); border-width: 1px; border-color: transparent; color: var(--color-gray-500); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 200ms; transition-duration: 200ms; --tw-ease: linear; transition-timing-function: linear; &:is(:where(.group)[data-nav-type="pattern"] *) { color: color-mix(in srgb, #fff 75%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 75%, transparent); } } &:hover { @media (hover: hover) { color: var(--color-gray-800); } } &:is(:where(.group)[data-nav-type="pattern"] *) { &:hover { @media (hover: hover) { color: var(--color-white); } } } &:where([data-mode=dark], [data-mode=dark] *) { &:hover { @media (hover: hover) { color: var(--color-dark-200); } } } } .badge-square { display: inline-flex; height: calc(var(--spacing) * 5.5); width: calc(var(--spacing) * 5.5); align-items: center; justify-content: center; border-radius: var(--radius-md); border-style: var(--tw-border-style); border-width: 1px; font-size: var(--text-11); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .spin { display: inline-block; width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); border-radius: calc(infinity * 1px); border-style: var(--tw-border-style); border-width: 2px; } .form-file { display: block; width: 100%; border-radius: var(--radius-md); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-gray-200); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); &::file-selector-button { background-color: var(--color-gray-900); } &::file-selector-button { color: var(--color-gray-100); } &: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 { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + 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); } &:focus { outline-style: var(--tw-outline-style); outline-width: 0px; } &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } &:where([data-mode=dark], [data-mode=dark] *) { &::file-selector-button { background-color: var(--color-dark-800); } } &:where([data-mode=dark], [data-mode=dark] *) { &::file-selector-button { color: var(--color-dark-100); } } &::-webkit-file-upload-button { cursor: pointer; --tw-border-style: none; border-style: none; padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 2); --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; @media (forced-colors: active) { outline: 2px solid transparent; outline-offset: 2px; } } &.form-file-sm { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); &::-webkit-file-upload-button { padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 1); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } } &.form-file-md { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); &::-webkit-file-upload-button { padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 1.5); font-size: var(--text-14); } } &.form-file-light { &::file-selector-button { background-color: var(--color-gray-100); } &::file-selector-button { color: var(--color-gray-500); } &:where([data-mode=dark], [data-mode=dark] *) { &::file-selector-button { background-color: var(--color-dark-850); } } &:where([data-mode=dark], [data-mode=dark] *) { &::file-selector-button { color: var(--color-dark-400); } } } &.form-file-lg { &::-webkit-file-upload-button { padding-inline: calc(var(--spacing) * 5); padding-block: calc(var(--spacing) * 3); } } } .btn-group-vertical { display: flex; flex-direction: column; align-items: flex-start; .btn { border-radius: 0; &:first-child { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); } &:last-child { border-bottom-right-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } } } .input-label-group { display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-gray-200); padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 1.5); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { border-top-right-radius: 0; border-bottom-right-radius: 0; } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { border-right-style: var(--tw-border-style); border-right-width: 0px; } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group).right *) { border-top-left-radius: 0; border-bottom-left-radius: 0; } } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group).right *) { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group).right *) { border-right-style: var(--tw-border-style); border-right-width: 1px; } } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group).right *) { border-left-style: var(--tw-border-style); border-left-width: 0px; } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { border-top-left-radius: 0; border-bottom-left-radius: 0; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { border-left-style: var(--tw-border-style); border-left-width: 0px; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group).right *) { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group).right *) { border-top-right-radius: 0; border-bottom-right-radius: 0; } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group).right *) { border-right-style: var(--tw-border-style); border-right-width: 0px; } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group).right *) { border-left-style: var(--tw-border-style); border-left-width: 1px; } } &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } } .drawer-footer { display: flex; align-items: center; justify-content: space-between; border-top-style: var(--tw-border-style); border-top-width: 1px; border-color: var(--color-gray-200); padding: calc(var(--spacing) * 5); &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } } .drawer-header { display: flex; align-items: center; justify-content: space-between; border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-gray-200); padding: calc(var(--spacing) * 5); padding: calc(var(--spacing) * 5); &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } } .modal-header { display: flex; align-items: center; justify-content: space-between; border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-gray-200); padding: calc(var(--spacing) * 5); &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } } .btn-group { display: flex; align-items: center; gap: calc(var(--spacing) * 0); .btn { border-radius: 0; &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:first-child { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:last-child { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:first-child { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:last-child { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } } } } .input-check-group { :is(&, .input-radio-group) { display: flex; align-items: center; gap: calc(var(--spacing) * 2); } } .input-radio-group { :is(.input-check-group, &) { display: flex; align-items: center; gap: calc(var(--spacing) * 2); } } .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .line-clamp-none { overflow: visible; display: block; -webkit-box-orient: horizontal; -webkit-line-clamp: unset; } .badge { display: inline-block; border-radius: var(--radius-md); border-style: var(--tw-border-style); border-width: 1px; padding-inline: calc(var(--spacing) * 1.5); padding-block: calc(var(--spacing) * 0.5); font-size: var(--text-11); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .\!hidden { display: none !important; } .block { display: block; } .contents { display: contents; } .flex { display: flex; } .flow-root { display: flow-root; } .grid { display: grid; } .hidden { display: none; } .inline { display: inline; } .inline-block { display: inline-block; } .inline-flex { display: inline-flex; } .inline-grid { display: inline-grid; } .inline-table { display: inline-table; } .list-item { display: list-item; } .table { display: table; } .table\! { display: table !important; } .table-caption { display: table-caption; } .table-cell { display: table-cell; } .table-column { display: table-column; } .table-column-group { display: table-column-group; } .table-footer-group { display: table-footer-group; } .table-header-group { display: table-header-group; } .table-row { display: table-row; } .table-row-group { display: table-row-group; } .field-sizing-content { field-sizing: content; } .field-sizing-fixed { field-sizing: fixed; } .aspect-auto { aspect-ratio: auto; } .aspect-square { aspect-ratio: 1 / 1; } .ping-spin { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); animation: var(--animate-ping); } .input-radio { width: 1.125rem; height: 1.125rem; cursor: pointer; appearance: none; border-radius: calc(infinity * 1px); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-gray-300); &:focus { &:checked { --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); } } &:focus { &:checked { --tw-ring-offset-width: 1px; --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } } &:focus { &:checked { --tw-ring-offset-color: var(--color-white); } } &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } &:where([data-mode=dark], [data-mode=dark] *) { &:focus { &:checked { --tw-ring-offset-color: var(--color-dark-900); } } } } .input-check { width: 1.125rem; height: 1.125rem; cursor: pointer; appearance: none; border-radius: var(--radius-xs); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-gray-300); &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } } .input-range { height: calc(var(--spacing) * 2); width: 100%; appearance: none; border-radius: var(--radius-md); background-color: var(--color-gray-200); &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-800); } } .\!size-8 { width: calc(var(--spacing) * 8) !important; height: calc(var(--spacing) * 8) !important; } .size-1 { width: calc(var(--spacing) * 1); height: calc(var(--spacing) * 1); } .size-1\.5 { width: calc(var(--spacing) * 1.5); height: calc(var(--spacing) * 1.5); } .size-3 { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); } .size-4 { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .size-5 { width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); } .size-6 { width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); } .size-7 { width: calc(var(--spacing) * 7); height: calc(var(--spacing) * 7); } .size-8 { width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); } .size-9 { width: calc(var(--spacing) * 9); height: calc(var(--spacing) * 9); } .size-10 { width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); } .size-12 { width: calc(var(--spacing) * 12); height: calc(var(--spacing) * 12); } .size-\[1\.125rem\] { width: 1.125rem; height: 1.125rem; } .size-\[auto\] { width: auto; height: auto; } .drawer-content { height: 100%; overflow-y: auto; padding: calc(var(--spacing) * 5); } .progress-bar-wrap { height: calc(var(--spacing) * 4); border-radius: calc(infinity * 1px); text-align: center; font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .h-1 { height: calc(var(--spacing) * 1); } .h-1\.5 { height: calc(var(--spacing) * 1.5); } .h-2 { height: calc(var(--spacing) * 2); } .h-2\.5 { height: calc(var(--spacing) * 2.5); } .h-3 { height: calc(var(--spacing) * 3); } .h-3\.5 { height: calc(var(--spacing) * 3.5); } .h-4 { height: calc(var(--spacing) * 4); } .h-5 { height: calc(var(--spacing) * 5); } .h-5\.5 { height: calc(var(--spacing) * 5.5); } .h-6 { height: calc(var(--spacing) * 6); } .h-7 { height: calc(var(--spacing) * 7); } .h-8 { height: calc(var(--spacing) * 8); } .h-9 { height: calc(var(--spacing) * 9); } .h-10 { height: calc(var(--spacing) * 10); } .h-11 { height: calc(var(--spacing) * 11); } .h-12 { height: calc(var(--spacing) * 12); } .h-14 { height: calc(var(--spacing) * 14); } .h-16 { height: calc(var(--spacing) * 16); } .h-20 { height: calc(var(--spacing) * 20); } .h-24 { height: calc(var(--spacing) * 24); } .h-25 { height: calc(var(--spacing) * 25); } .h-28 { height: calc(var(--spacing) * 28); } .h-32 { height: calc(var(--spacing) * 32); } .h-40 { height: calc(var(--spacing) * 40); } .h-50 { height: calc(var(--spacing) * 50); } .h-64 { height: calc(var(--spacing) * 64); } .h-75 { height: calc(var(--spacing) * 75); } .h-80 { height: calc(var(--spacing) * 80); } .h-96 { height: calc(var(--spacing) * 96); } .h-100 { height: calc(var(--spacing) * 100); } .h-200 { height: calc(var(--spacing) * 200); } .h-\[1\.625rem\] { height: 1.625rem; } .h-\[2\.125rem\] { height: 2.125rem; } .h-\[2\.7813rem\] { height: 2.7813rem; } .h-\[calc\(100\%_-_5rem\)\] { height: calc(100% - 5rem); } .h-\[calc\(100\%_-_8px\)\] { height: calc(100% - 8px); } .h-auto { height: auto; } .h-full { height: 100%; } .h-screen { height: 100vh; } .h-topbar { height: var(--spacing-topbar); } .max-h-0 { max-height: calc(var(--spacing) * 0); } .max-h-48 { max-height: calc(var(--spacing) * 48); } .max-h-60 { max-height: calc(var(--spacing) * 60); } .max-h-\[36rem\] { max-height: 36rem; } .max-h-none { max-height: none; } .max-h-screen { max-height: 100vh; } .page-wrapper { &:is(:where(.group)[data-layout="boxed"] *) { min-height: 100vh; } &:is(:where(.group)[data-layout="boxed"] *) { background-color: var(--color-white); } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="boxed"] *) { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="boxed"] *) { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } } &:is(:where(.group)[data-layout="boxed"] *) { &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-950); } } } .min-h-64 { min-height: calc(var(--spacing) * 64); } .min-h-\[26px\] { min-height: 26px; } .min-h-\[28px\] { min-height: 28px; } .min-h-\[400px\] { min-height: 400px; } .min-h-\[calc\(100vh-200px\)\] { min-height: calc(100vh - 200px); } .min-h-full { min-height: 100%; } .min-h-screen { min-height: 100vh; } .\!w-64 { width: calc(var(--spacing) * 64) !important; } .\!w-\[51\%\] { width: 51% !important; } .\!w-\[78\%\] { width: 78% !important; } .\!w-\[80\%\] { width: 80% !important; } .\!w-\[90\%\] { width: 90% !important; } .\!w-auto { width: auto !important; } .drawer-half { width: calc(1/2 * 100%); } .drawer-lg { width: calc(var(--spacing) * 96); } .drawer-sm { width: calc(var(--spacing) * 28); } .w-1 { width: calc(var(--spacing) * 1); } .w-1\.5 { width: calc(var(--spacing) * 1.5); } .w-1\/2 { width: calc(1/2 * 100%); } .w-1\/3 { width: calc(1/3 * 100%); } .w-2 { width: calc(var(--spacing) * 2); } .w-2\/3 { width: calc(2/3 * 100%); } .w-3 { width: calc(var(--spacing) * 3); } .w-3\.5 { width: calc(var(--spacing) * 3.5); } .w-4 { width: calc(var(--spacing) * 4); } .w-5 { width: calc(var(--spacing) * 5); } .w-5\.5 { width: calc(var(--spacing) * 5.5); } .w-6 { width: calc(var(--spacing) * 6); } .w-8 { width: calc(var(--spacing) * 8); } .w-9 { width: calc(var(--spacing) * 9); } .w-10 { width: calc(var(--spacing) * 10); } .w-11 { width: calc(var(--spacing) * 11); } .w-12 { width: calc(var(--spacing) * 12); } .w-16 { width: calc(var(--spacing) * 16); } .w-20 { width: calc(var(--spacing) * 20); } .w-24 { width: calc(var(--spacing) * 24); } .w-25 { width: calc(var(--spacing) * 25); } .w-28 { width: calc(var(--spacing) * 28); } .w-32 { width: calc(var(--spacing) * 32); } .w-36 { width: calc(var(--spacing) * 36); } .w-40 { width: calc(var(--spacing) * 40); } .w-48 { width: calc(var(--spacing) * 48); } .w-50 { width: calc(var(--spacing) * 50); } .w-56 { width: calc(var(--spacing) * 56); } .w-64 { width: calc(var(--spacing) * 64); } .w-75 { width: calc(var(--spacing) * 75); } .w-80 { width: calc(var(--spacing) * 80); } .w-96 { width: calc(var(--spacing) * 96); } .w-100 { width: calc(var(--spacing) * 100); } .w-auto { width: auto; } .w-full { width: 100%; } .w-px { width: 1px; } .w-screen { width: 100vw; } .w-sidebar { width: var(--spacing-sidebar); } .max-w-2xl { max-width: var(--container-2xl); } .max-w-4xl { max-width: var(--container-4xl); } .max-w-5xl { max-width: var(--container-5xl); } .max-w-6xl { max-width: var(--container-6xl); } .max-w-7xl { max-width: var(--container-7xl); } .max-w-\[1350px\] { max-width: 1350px; } .max-w-\[1920px\] { max-width: 1920px; } .max-w-lg { max-width: var(--container-lg); } .max-w-md { max-width: var(--container-md); } .max-w-none { max-width: none; } .max-w-screen { max-width: 100vw; } .max-w-sm { max-width: var(--container-sm); } .max-w-xl { max-width: var(--container-xl); } .max-w-xs { max-width: var(--container-xs); } .min-w-0 { min-width: calc(var(--spacing) * 0); } .min-w-64 { min-width: calc(var(--spacing) * 64); } .min-w-72 { min-width: calc(var(--spacing) * 72); } .min-w-\[3rem\] { min-width: 3rem; } .min-w-\[80px\] { min-width: 80px; } .min-w-\[150px\] { min-width: 150px; } .min-w-\[250px\] { min-width: 250px; } .min-w-full { min-width: 100%; } .min-w-screen { min-width: 100vw; } .flex-1 { flex: 1; } .flex-auto { flex: auto; } .flex-initial { flex: 0 auto; } .flex-none { flex: none; } .flex-shrink { flex-shrink: 1; } .flex-shrink-0 { flex-shrink: 0; } .flex-shrink-1 { flex-shrink: 1; } .shrink { flex-shrink: 1; } .shrink-0 { flex-shrink: 0; } .flex-grow { flex-grow: 1; } .flex-grow-0 { flex-grow: 0; } .flex-grow-1 { flex-grow: 1; } .grow { flex-grow: 1; } .basis-auto { flex-basis: auto; } .basis-full { flex-basis: 100%; } .table-auto { table-layout: auto; } .table-fixed { table-layout: fixed; } .caption-bottom { caption-side: bottom; } .caption-top { caption-side: top; } .border-collapse { border-collapse: collapse; } .border-separate { border-collapse: separate; } .origin-bottom { transform-origin: bottom; } .origin-bottom-left { transform-origin: bottom left; } .origin-bottom-right { transform-origin: bottom right; } .origin-center { transform-origin: center; } .origin-left { transform-origin: left; } .origin-right { transform-origin: right; } .origin-top { transform-origin: top; } .origin-top-left { transform-origin: top left; } .origin-top-right { transform-origin: top right; } .-translate-full { --tw-translate-x: -100%; --tw-translate-y: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-2 { --tw-translate-x: calc(var(--spacing) * 2); --tw-translate-y: calc(var(--spacing) * 2); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-full { --tw-translate-x: 100%; --tw-translate-y: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-x-full { --tw-translate-x: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-y-1\/2 { --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-y-10 { --tw-translate-y: calc(var(--spacing) * -10); translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-y-\[50px\] { --tw-translate-y: calc(50px * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-y-0 { --tw-translate-y: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-y-2\.5 { --tw-translate-y: calc(var(--spacing) * 2.5); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-y-4 { --tw-translate-y: calc(var(--spacing) * 4); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-y-11 { --tw-translate-y: calc(var(--spacing) * 11); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-3d { translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z); } .translate-none { translate: none; } .scale-95 { --tw-scale-x: 95%; --tw-scale-y: 95%; --tw-scale-z: 95%; scale: var(--tw-scale-x) var(--tw-scale-y); } .scale-100 { --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); } .scale-3d { scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z); } .scale-none { scale: none; } .-rotate-45 { rotate: calc(45deg * -1); } .rotate-180 { rotate: 180deg; } .rotate-none { rotate: none; } .\!transform { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,) !important; } .transform { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } .transform\! { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,) !important; } .transform-cpu { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } .transform-gpu { transform: translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } .transform-none { transform: none; } .modern-spin { animation: var(--animate-spin); border-inline-color: transparent !important; } .loader-spin { animation: var(--animate-spin); &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { border-left-color: transparent !important; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { border-right-color: transparent !important; } } .animate-none { animation: none; } .animate-ping { animation: var(--animate-ping); } .animate-pulse { animation: var(--animate-pulse); } .animate-shimmer { animation: var(--animate-shimmer); } .animate-spin { animation: var(--animate-spin); } .input-check-label { :is(&, .input-radio-label) { cursor: pointer; --tw-leading: 1; line-height: 1; } } .input-radio-label { :is(.input-check-label, &) { cursor: pointer; --tw-leading: 1; line-height: 1; } } .cursor-grab { cursor: grab; } .cursor-pointer { cursor: pointer; } .touch-pinch-zoom { --tw-pinch-zoom: pinch-zoom; touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,); } .resize { resize: both; } .resize-none { resize: none; } .resize-x { resize: horizontal; } .resize-y { resize: vertical; } .snap-none { scroll-snap-type: none; } .snap-mandatory { --tw-scroll-snap-strictness: mandatory; } .snap-proximity { --tw-scroll-snap-strictness: proximity; } .snap-align-none { scroll-snap-align: none; } .snap-center { scroll-snap-align: center; } .snap-end { scroll-snap-align: end; } .snap-start { scroll-snap-align: start; } .snap-always { scroll-snap-stop: always; } .snap-normal { scroll-snap-stop: normal; } .list-inside { list-style-position: inside; } .list-outside { list-style-position: outside; } .list-decimal { list-style-type: decimal; } .list-disc { list-style-type: disc; } .list-none { list-style-type: none; } .list-image-none { list-style-image: none; } .appearance-auto { appearance: auto; } .appearance-none { appearance: none; } .columns-2 { columns: 2; } .columns-3 { columns: 3; } .columns-4 { columns: 4; } .columns-auto { columns: auto; } .auto-cols-auto { grid-auto-columns: auto; } .auto-cols-fr { grid-auto-columns: minmax(0, 1fr); } .auto-cols-max { grid-auto-columns: max-content; } .auto-cols-min { grid-auto-columns: min-content; } .grid-flow-col { grid-auto-flow: column; } .grid-flow-col-dense { grid-auto-flow: column dense; } .grid-flow-dense { grid-auto-flow: dense; } .grid-flow-row { grid-auto-flow: row; } .grid-flow-row-dense { grid-auto-flow: row dense; } .auto-rows-auto { grid-auto-rows: auto; } .auto-rows-fr { grid-auto-rows: minmax(0, 1fr); } .auto-rows-max { grid-auto-rows: max-content; } .auto-rows-min { grid-auto-rows: min-content; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .grid-cols-none { grid-template-columns: none; } .grid-cols-subgrid { grid-template-columns: subgrid; } .grid-rows-none { grid-template-rows: none; } .grid-rows-subgrid { grid-template-rows: subgrid; } .flex-col { flex-direction: column; } .flex-col-reverse { flex-direction: column-reverse; } .flex-row { flex-direction: row; } .flex-row-reverse { flex-direction: row-reverse; } .flex-nowrap { flex-wrap: nowrap; } .flex-wrap { flex-wrap: wrap; } .flex-wrap-reverse { flex-wrap: wrap-reverse; } .place-content-around { place-content: space-around; } .place-content-baseline { place-content: baseline; } .place-content-between { place-content: space-between; } .place-content-center { place-content: center; } .place-content-end { place-content: end; } .place-content-evenly { place-content: space-evenly; } .place-content-start { place-content: start; } .place-content-stretch { place-content: stretch; } .place-items-baseline { place-items: baseline; } .place-items-center { place-items: center; } .place-items-end { place-items: end; } .place-items-start { place-items: start; } .place-items-stretch { place-items: stretch; } .content-around { align-content: space-around; } .content-baseline { align-content: baseline; } .content-between { align-content: space-between; } .content-center { align-content: center; } .content-end { align-content: flex-end; } .content-evenly { align-content: space-evenly; } .content-normal { align-content: normal; } .content-start { align-content: flex-start; } .content-stretch { align-content: stretch; } .items-baseline { align-items: baseline; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .items-start { align-items: flex-start; } .items-stretch { align-items: stretch; } .justify-around { justify-content: space-around; } .justify-baseline { justify-content: baseline; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .justify-evenly { justify-content: space-evenly; } .justify-normal { justify-content: normal; } .justify-start { justify-content: flex-start; } .justify-stretch { justify-content: stretch; } .justify-items-center { justify-items: center; } .justify-items-end { justify-items: end; } .justify-items-normal { justify-items: normal; } .justify-items-start { justify-items: start; } .justify-items-stretch { justify-items: stretch; } .gap-0 { gap: calc(var(--spacing) * 0); } .gap-1 { gap: calc(var(--spacing) * 1); } .gap-1\.5 { gap: calc(var(--spacing) * 1.5); } .gap-2 { gap: calc(var(--spacing) * 2); } .gap-3 { gap: calc(var(--spacing) * 3); } .gap-4 { gap: calc(var(--spacing) * 4); } .gap-5 { gap: calc(var(--spacing) * 5); } .gap-6 { gap: calc(var(--spacing) * 6); } .gap-8 { gap: calc(var(--spacing) * 8); } .gap-space { gap: var(--spacing-space); } .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))); } } .space-y-2 { :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))); } } .space-y-3 { :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))); } } .space-y-4 { :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))); } } .space-y-5 { :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))); } } .space-y-6 { :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))); } } .space-y-8 { :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))); } } .space-y-reverse { :where(& > :not(:last-child)) { --tw-space-y-reverse: 1; } } .gap-x-2 { column-gap: calc(var(--spacing) * 2); } .gap-x-4 { column-gap: calc(var(--spacing) * 4); } .gap-x-6 { column-gap: calc(var(--spacing) * 6); } .gap-x-8 { column-gap: calc(var(--spacing) * 8); } .gap-x-space { column-gap: var(--spacing-space); } .-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))); } } .-space-x-px { :where(& > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(-1px * var(--tw-space-x-reverse)); margin-inline-end: calc(-1px * calc(1 - var(--tw-space-x-reverse))); } } .space-x-1 { :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))); } } .space-x-2 { :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))); } } .space-x-reverse { :where(& > :not(:last-child)) { --tw-space-x-reverse: 1; } } .gap-y-1 { row-gap: calc(var(--spacing) * 1); } .gap-y-6 { row-gap: calc(var(--spacing) * 6); } .divide-x { :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))); } } .divide-y { :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))); } } .divide-y-reverse { :where(& > :not(:last-child)) { --tw-divide-y-reverse: 1; } } .divide-gray-200 { :where(& > :not(:last-child)) { border-color: var(--color-gray-200); } } .place-self-auto { place-self: auto; } .place-self-center { place-self: center; } .place-self-end { place-self: end; } .place-self-start { place-self: start; } .place-self-stretch { place-self: stretch; } .self-auto { align-self: auto; } .self-baseline { align-self: baseline; } .self-center { align-self: center; } .self-end { align-self: flex-end; } .self-start { align-self: flex-start; } .self-stretch { align-self: stretch; } .justify-self-auto { justify-self: auto; } .justify-self-center { justify-self: center; } .justify-self-end { justify-self: flex-end; } .justify-self-start { justify-self: flex-start; } .justify-self-stretch { justify-self: stretch; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .overflow-scroll { overflow: scroll; } .overflow-visible { overflow: visible; } .overflow-x-auto { overflow-x: auto; } .overflow-x-hidden { overflow-x: hidden; } .overflow-y-auto { overflow-y: auto; } .scroll-auto { scroll-behavior: auto; } .scroll-smooth { scroll-behavior: smooth; } .rounded { border-radius: 0.25rem; } .rounded-2xl { border-radius: var(--radius-2xl); } .rounded-3xl { border-radius: var(--radius-3xl); } .rounded-full { border-radius: calc(infinity * 1px); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-md { border-radius: var(--radius-md); } .rounded-none { border-radius: 0; } .rounded-sm { border-radius: var(--radius-sm); } .rounded-xl { border-radius: var(--radius-xl); } .rounded-xs { border-radius: var(--radius-xs); } .rounded-s { border-start-start-radius: 0.25rem; border-end-start-radius: 0.25rem; } .rounded-ss { border-start-start-radius: 0.25rem; } .rounded-e { border-start-end-radius: 0.25rem; border-end-end-radius: 0.25rem; } .rounded-se { border-start-end-radius: 0.25rem; } .rounded-ee { border-end-end-radius: 0.25rem; } .rounded-es { border-end-start-radius: 0.25rem; } .card-header { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-gray-200); padding: calc(var(--spacing) * 5); &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } } .rounded-t { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } .rounded-t-lg { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); } .rounded-t-md { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); } .rounded-l { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; } .rounded-l-md { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } .rounded-l-none { border-top-left-radius: 0; border-bottom-left-radius: 0; } .rounded-tl { border-top-left-radius: 0.25rem; } .rounded-r { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } .rounded-r-md { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } .rounded-tr { border-top-right-radius: 0.25rem; } .card-footer { border-bottom-right-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); border-top-style: var(--tw-border-style); border-top-width: 1px; border-color: var(--color-gray-200); padding: calc(var(--spacing) * 5); &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } } .rounded-b { border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; } .rounded-b-lg { border-bottom-right-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); } .rounded-b-md { border-bottom-right-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } .rounded-b-sm { border-bottom-right-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); } .rounded-br { border-bottom-right-radius: 0.25rem; } .rounded-bl { border-bottom-left-radius: 0.25rem; } .border { border-style: var(--tw-border-style); border-width: 1px; } .border\! { border-style: var(--tw-border-style) !important; border-width: 1px !important; } .border-0 { border-style: var(--tw-border-style); border-width: 0px; } .border-1 { border-style: var(--tw-border-style); border-width: 1px; } .border-2 { border-style: var(--tw-border-style); border-width: 2px; } .border-3 { border-style: var(--tw-border-style); border-width: 3px; } .border-4 { border-style: var(--tw-border-style); border-width: 4px; } .border-5 { border-style: var(--tw-border-style); border-width: 5px; } .border-x { border-inline-style: var(--tw-border-style); border-inline-width: 1px; } .border-y { border-block-style: var(--tw-border-style); border-block-width: 1px; } .border-s { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 1px; } .border-e { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 1px; } .\!border-t-4 { border-top-style: var(--tw-border-style) !important; border-top-width: 4px !important; } .border-t { border-top-style: var(--tw-border-style); border-top-width: 1px; } .border-r { border-right-style: var(--tw-border-style); border-right-width: 1px; } .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .border-b-2 { border-bottom-style: var(--tw-border-style); border-bottom-width: 2px; } .border-l { border-left-style: var(--tw-border-style); border-left-width: 1px; } .border-l-0 { border-left-style: var(--tw-border-style); border-left-width: 0px; } .border-l-4 { border-left-style: var(--tw-border-style); border-left-width: 4px; } .btn-sub-gray { .btn& { &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-gray-400); } &:where([data-mode=dark], [data-mode=dark] *) { &:hover { @media (hover: hover) { color: var(--color-gray-300); } } } } --tw-border-style: none; border-style: none; background-color: color-mix(in srgb, oklch(0.551 0.027 264.364) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-gray-500) 10%, transparent); } color: var(--color-gray-500); &:hover { @media (hover: hover) { background-color: color-mix(in srgb, oklch(0.551 0.027 264.364) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-gray-500) 20%, transparent); } } } &:hover { @media (hover: hover) { color: var(--color-gray-600); } } &:focus { background-color: color-mix(in srgb, oklch(0.551 0.027 264.364) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-gray-500) 20%, transparent); } } &:focus { color: var(--color-gray-600); } } .border-dashed { --tw-border-style: dashed; border-style: dashed; } .border-dotted { --tw-border-style: dotted; border-style: dotted; } .border-double { --tw-border-style: double; border-style: double; } .border-hidden { --tw-border-style: hidden; border-style: hidden; } .border-none { --tw-border-style: none; border-style: none; } .border-solid { --tw-border-style: solid; border-style: solid; } .input-spin-minus { .input-spin-inherit :is(&, .input-spin-plus):hover { color: inherit; } .input-spin-current :is(&, .input-spin-plus):hover { color: current; } .input-spin-transparent :is(&, .input-spin-plus):hover { color: transparent; } .input-spin-black :is(&, .input-spin-plus):hover { color: black; } .input-spin-white :is(&, .input-spin-plus):hover { color: white; } .input-spin-slate :is(&, .input-spin-plus):hover { color: oklch(0.554 0.046 257.417); } .input-spin-gray :is(&, .input-spin-plus):hover { color: oklch(0.551 0.027 264.364); } .input-spin-zinc :is(&, .input-spin-plus):hover { color: oklch(0.552 0.016 285.938); } .input-spin-neutral :is(&, .input-spin-plus):hover { color: oklch(0.556 0 0); } .input-spin-stone :is(&, .input-spin-plus):hover { color: oklch(0.553 0.013 58.071); } .input-spin-red :is(&, .input-spin-plus):hover { color: oklch(0.637 0.237 25.331); } .input-spin-orange :is(&, .input-spin-plus):hover { color: oklch(0.705 0.213 47.604); } .input-spin-amber :is(&, .input-spin-plus):hover { color: oklch(0.769 0.188 70.08); } .input-spin-yellow :is(&, .input-spin-plus):hover { color: oklch(0.795 0.184 86.047); } .input-spin-lime :is(&, .input-spin-plus):hover { color: oklch(0.768 0.233 130.85); } .input-spin-green :is(&, .input-spin-plus):hover { color: oklch(0.723 0.219 149.579); } .input-spin-emerald :is(&, .input-spin-plus):hover { color: oklch(0.696 0.17 162.48); } .input-spin-teal :is(&, .input-spin-plus):hover { color: oklch(0.704 0.14 182.503); } .input-spin-cyan :is(&, .input-spin-plus):hover { color: oklch(0.715 0.143 215.221); } .input-spin-sky :is(&, .input-spin-plus):hover { color: oklch(0.685 0.169 237.323); } .input-spin-blue :is(&, .input-spin-plus):hover { color: oklch(0.623 0.214 259.815); } .input-spin-indigo :is(&, .input-spin-plus):hover { color: oklch(0.585 0.233 277.117); } .input-spin-violet :is(&, .input-spin-plus):hover { color: oklch(0.606 0.25 292.717); } .input-spin-purple :is(&, .input-spin-plus):hover { color: oklch(0.627 0.265 303.9); } .input-spin-fuchsia :is(&, .input-spin-plus):hover { color: oklch(0.667 0.295 322.15); } .input-spin-pink :is(&, .input-spin-plus):hover { color: oklch(0.656 0.241 354.308); } .input-spin-rose :is(&, .input-spin-plus):hover { color: oklch(0.645 0.246 16.439); } .input-spin-primary :is(&, .input-spin-plus):hover { color: oklch(65.26% 0.1828 255.54); } .input-spin-solid-inherit :is(&, .input-spin-plus) { background-color: inherit; border-color: inherit; color: inherit; } .input-spin-solid-current :is(&, .input-spin-plus) { background-color: current; border-color: current; color: current; } .input-spin-solid-transparent :is(&, .input-spin-plus) { background-color: transparent; border-color: transparent; color: transparent; } .input-spin-solid-black :is(&, .input-spin-plus) { background-color: black; border-color: black; color: black; } .input-spin-solid-white :is(&, .input-spin-plus) { background-color: white; border-color: white; color: white; } .input-spin-solid-slate :is(&, .input-spin-plus) { background-color: oklch(0.554 0.046 257.417); border-color: oklch(0.554 0.046 257.417); color: oklch(0.984 0.003 247.858); } .input-spin-solid-gray :is(&, .input-spin-plus) { background-color: oklch(0.551 0.027 264.364); border-color: oklch(0.551 0.027 264.364); color: oklch(0.985 0.002 247.839); } .input-spin-solid-zinc :is(&, .input-spin-plus) { background-color: oklch(0.552 0.016 285.938); border-color: oklch(0.552 0.016 285.938); color: oklch(0.985 0 0); } .input-spin-solid-neutral :is(&, .input-spin-plus) { background-color: oklch(0.556 0 0); border-color: oklch(0.556 0 0); color: oklch(0.985 0 0); } .input-spin-solid-stone :is(&, .input-spin-plus) { background-color: oklch(0.553 0.013 58.071); border-color: oklch(0.553 0.013 58.071); color: oklch(0.985 0.001 106.423); } .input-spin-solid-red :is(&, .input-spin-plus) { background-color: oklch(0.637 0.237 25.331); border-color: oklch(0.637 0.237 25.331); color: oklch(0.971 0.013 17.38); } .input-spin-solid-orange :is(&, .input-spin-plus) { background-color: oklch(0.705 0.213 47.604); border-color: oklch(0.705 0.213 47.604); color: oklch(0.98 0.016 73.684); } .input-spin-solid-amber :is(&, .input-spin-plus) { background-color: oklch(0.769 0.188 70.08); border-color: oklch(0.769 0.188 70.08); color: oklch(0.987 0.022 95.277); } .input-spin-solid-yellow :is(&, .input-spin-plus) { background-color: oklch(0.795 0.184 86.047); border-color: oklch(0.795 0.184 86.047); color: oklch(0.987 0.026 102.212); } .input-spin-solid-lime :is(&, .input-spin-plus) { background-color: oklch(0.768 0.233 130.85); border-color: oklch(0.768 0.233 130.85); color: oklch(0.986 0.031 120.757); } .input-spin-solid-green :is(&, .input-spin-plus) { background-color: oklch(0.723 0.219 149.579); border-color: oklch(0.723 0.219 149.579); color: oklch(0.982 0.018 155.826); } .input-spin-solid-emerald :is(&, .input-spin-plus) { background-color: oklch(0.696 0.17 162.48); border-color: oklch(0.696 0.17 162.48); color: oklch(0.979 0.021 166.113); } .input-spin-solid-teal :is(&, .input-spin-plus) { background-color: oklch(0.704 0.14 182.503); border-color: oklch(0.704 0.14 182.503); color: oklch(0.984 0.014 180.72); } .input-spin-solid-cyan :is(&, .input-spin-plus) { background-color: oklch(0.715 0.143 215.221); border-color: oklch(0.715 0.143 215.221); color: oklch(0.984 0.019 200.873); } .input-spin-solid-sky :is(&, .input-spin-plus) { background-color: oklch(0.685 0.169 237.323); border-color: oklch(0.685 0.169 237.323); color: oklch(0.977 0.013 236.62); } .input-spin-solid-blue :is(&, .input-spin-plus) { background-color: oklch(0.623 0.214 259.815); border-color: oklch(0.623 0.214 259.815); color: oklch(0.97 0.014 254.604); } .input-spin-solid-indigo :is(&, .input-spin-plus) { background-color: oklch(0.585 0.233 277.117); border-color: oklch(0.585 0.233 277.117); color: oklch(0.962 0.018 272.314); } .input-spin-solid-violet :is(&, .input-spin-plus) { background-color: oklch(0.606 0.25 292.717); border-color: oklch(0.606 0.25 292.717); color: oklch(0.969 0.016 293.756); } .input-spin-solid-purple :is(&, .input-spin-plus) { background-color: oklch(0.627 0.265 303.9); border-color: oklch(0.627 0.265 303.9); color: oklch(0.977 0.014 308.299); } .input-spin-solid-fuchsia :is(&, .input-spin-plus) { background-color: oklch(0.667 0.295 322.15); border-color: oklch(0.667 0.295 322.15); color: oklch(0.977 0.017 320.058); } .input-spin-solid-pink :is(&, .input-spin-plus) { background-color: oklch(0.656 0.241 354.308); border-color: oklch(0.656 0.241 354.308); color: oklch(0.971 0.014 343.198); } .input-spin-solid-rose :is(&, .input-spin-plus) { background-color: oklch(0.645 0.246 16.439); border-color: oklch(0.645 0.246 16.439); color: oklch(0.969 0.015 12.422); } .input-spin-solid-primary :is(&, .input-spin-plus) { background-color: oklch(65.26% 0.1828 255.54); border-color: oklch(65.26% 0.1828 255.54); color: oklch(97.17% 0.0144 244.71); } } .input-spin-plus { .input-spin-inherit :is(.input-spin-minus, &):hover { color: inherit; } .input-spin-current :is(.input-spin-minus, &):hover { color: current; } .input-spin-transparent :is(.input-spin-minus, &):hover { color: transparent; } .input-spin-black :is(.input-spin-minus, &):hover { color: black; } .input-spin-white :is(.input-spin-minus, &):hover { color: white; } .input-spin-slate :is(.input-spin-minus, &):hover { color: oklch(0.554 0.046 257.417); } .input-spin-gray :is(.input-spin-minus, &):hover { color: oklch(0.551 0.027 264.364); } .input-spin-zinc :is(.input-spin-minus, &):hover { color: oklch(0.552 0.016 285.938); } .input-spin-neutral :is(.input-spin-minus, &):hover { color: oklch(0.556 0 0); } .input-spin-stone :is(.input-spin-minus, &):hover { color: oklch(0.553 0.013 58.071); } .input-spin-red :is(.input-spin-minus, &):hover { color: oklch(0.637 0.237 25.331); } .input-spin-orange :is(.input-spin-minus, &):hover { color: oklch(0.705 0.213 47.604); } .input-spin-amber :is(.input-spin-minus, &):hover { color: oklch(0.769 0.188 70.08); } .input-spin-yellow :is(.input-spin-minus, &):hover { color: oklch(0.795 0.184 86.047); } .input-spin-lime :is(.input-spin-minus, &):hover { color: oklch(0.768 0.233 130.85); } .input-spin-green :is(.input-spin-minus, &):hover { color: oklch(0.723 0.219 149.579); } .input-spin-emerald :is(.input-spin-minus, &):hover { color: oklch(0.696 0.17 162.48); } .input-spin-teal :is(.input-spin-minus, &):hover { color: oklch(0.704 0.14 182.503); } .input-spin-cyan :is(.input-spin-minus, &):hover { color: oklch(0.715 0.143 215.221); } .input-spin-sky :is(.input-spin-minus, &):hover { color: oklch(0.685 0.169 237.323); } .input-spin-blue :is(.input-spin-minus, &):hover { color: oklch(0.623 0.214 259.815); } .input-spin-indigo :is(.input-spin-minus, &):hover { color: oklch(0.585 0.233 277.117); } .input-spin-violet :is(.input-spin-minus, &):hover { color: oklch(0.606 0.25 292.717); } .input-spin-purple :is(.input-spin-minus, &):hover { color: oklch(0.627 0.265 303.9); } .input-spin-fuchsia :is(.input-spin-minus, &):hover { color: oklch(0.667 0.295 322.15); } .input-spin-pink :is(.input-spin-minus, &):hover { color: oklch(0.656 0.241 354.308); } .input-spin-rose :is(.input-spin-minus, &):hover { color: oklch(0.645 0.246 16.439); } .input-spin-primary :is(.input-spin-minus, &):hover { color: oklch(65.26% 0.1828 255.54); } .input-spin-solid-inherit :is(.input-spin-minus, &) { background-color: inherit; border-color: inherit; color: inherit; } .input-spin-solid-current :is(.input-spin-minus, &) { background-color: current; border-color: current; color: current; } .input-spin-solid-transparent :is(.input-spin-minus, &) { background-color: transparent; border-color: transparent; color: transparent; } .input-spin-solid-black :is(.input-spin-minus, &) { background-color: black; border-color: black; color: black; } .input-spin-solid-white :is(.input-spin-minus, &) { background-color: white; border-color: white; color: white; } .input-spin-solid-slate :is(.input-spin-minus, &) { background-color: oklch(0.554 0.046 257.417); border-color: oklch(0.554 0.046 257.417); color: oklch(0.984 0.003 247.858); } .input-spin-solid-gray :is(.input-spin-minus, &) { background-color: oklch(0.551 0.027 264.364); border-color: oklch(0.551 0.027 264.364); color: oklch(0.985 0.002 247.839); } .input-spin-solid-zinc :is(.input-spin-minus, &) { background-color: oklch(0.552 0.016 285.938); border-color: oklch(0.552 0.016 285.938); color: oklch(0.985 0 0); } .input-spin-solid-neutral :is(.input-spin-minus, &) { background-color: oklch(0.556 0 0); border-color: oklch(0.556 0 0); color: oklch(0.985 0 0); } .input-spin-solid-stone :is(.input-spin-minus, &) { background-color: oklch(0.553 0.013 58.071); border-color: oklch(0.553 0.013 58.071); color: oklch(0.985 0.001 106.423); } .input-spin-solid-red :is(.input-spin-minus, &) { background-color: oklch(0.637 0.237 25.331); border-color: oklch(0.637 0.237 25.331); color: oklch(0.971 0.013 17.38); } .input-spin-solid-orange :is(.input-spin-minus, &) { background-color: oklch(0.705 0.213 47.604); border-color: oklch(0.705 0.213 47.604); color: oklch(0.98 0.016 73.684); } .input-spin-solid-amber :is(.input-spin-minus, &) { background-color: oklch(0.769 0.188 70.08); border-color: oklch(0.769 0.188 70.08); color: oklch(0.987 0.022 95.277); } .input-spin-solid-yellow :is(.input-spin-minus, &) { background-color: oklch(0.795 0.184 86.047); border-color: oklch(0.795 0.184 86.047); color: oklch(0.987 0.026 102.212); } .input-spin-solid-lime :is(.input-spin-minus, &) { background-color: oklch(0.768 0.233 130.85); border-color: oklch(0.768 0.233 130.85); color: oklch(0.986 0.031 120.757); } .input-spin-solid-green :is(.input-spin-minus, &) { background-color: oklch(0.723 0.219 149.579); border-color: oklch(0.723 0.219 149.579); color: oklch(0.982 0.018 155.826); } .input-spin-solid-emerald :is(.input-spin-minus, &) { background-color: oklch(0.696 0.17 162.48); border-color: oklch(0.696 0.17 162.48); color: oklch(0.979 0.021 166.113); } .input-spin-solid-teal :is(.input-spin-minus, &) { background-color: oklch(0.704 0.14 182.503); border-color: oklch(0.704 0.14 182.503); color: oklch(0.984 0.014 180.72); } .input-spin-solid-cyan :is(.input-spin-minus, &) { background-color: oklch(0.715 0.143 215.221); border-color: oklch(0.715 0.143 215.221); color: oklch(0.984 0.019 200.873); } .input-spin-solid-sky :is(.input-spin-minus, &) { background-color: oklch(0.685 0.169 237.323); border-color: oklch(0.685 0.169 237.323); color: oklch(0.977 0.013 236.62); } .input-spin-solid-blue :is(.input-spin-minus, &) { background-color: oklch(0.623 0.214 259.815); border-color: oklch(0.623 0.214 259.815); color: oklch(0.97 0.014 254.604); } .input-spin-solid-indigo :is(.input-spin-minus, &) { background-color: oklch(0.585 0.233 277.117); border-color: oklch(0.585 0.233 277.117); color: oklch(0.962 0.018 272.314); } .input-spin-solid-violet :is(.input-spin-minus, &) { background-color: oklch(0.606 0.25 292.717); border-color: oklch(0.606 0.25 292.717); color: oklch(0.969 0.016 293.756); } .input-spin-solid-purple :is(.input-spin-minus, &) { background-color: oklch(0.627 0.265 303.9); border-color: oklch(0.627 0.265 303.9); color: oklch(0.977 0.014 308.299); } .input-spin-solid-fuchsia :is(.input-spin-minus, &) { background-color: oklch(0.667 0.295 322.15); border-color: oklch(0.667 0.295 322.15); color: oklch(0.977 0.017 320.058); } .input-spin-solid-pink :is(.input-spin-minus, &) { background-color: oklch(0.656 0.241 354.308); border-color: oklch(0.656 0.241 354.308); color: oklch(0.971 0.014 343.198); } .input-spin-solid-rose :is(.input-spin-minus, &) { background-color: oklch(0.645 0.246 16.439); border-color: oklch(0.645 0.246 16.439); color: oklch(0.969 0.015 12.422); } .input-spin-solid-primary :is(.input-spin-minus, &) { background-color: oklch(65.26% 0.1828 255.54); border-color: oklch(65.26% 0.1828 255.54); color: oklch(97.17% 0.0144 244.71); } } .btn-outline-gray { border-color: var(--color-gray-500); background-color: transparent; color: var(--color-gray-500); &:hover { @media (hover: hover) { border-color: var(--color-gray-500); } } &:hover { @media (hover: hover) { background-color: var(--color-gray-500); } } &:hover { @media (hover: hover) { color: var(--color-white); } } &:focus { border-color: var(--color-gray-500); } &:focus { background-color: var(--color-gray-500); } &:focus { color: var(--color-white); } } .btn-outline-primary { border-color: var(--color-primary-500); background-color: transparent; color: var(--color-primary-500); &:hover { @media (hover: hover) { border-color: var(--color-primary-500); } } &:hover { @media (hover: hover) { background-color: var(--color-primary-500); } } &:hover { @media (hover: hover) { color: var(--color-white); } } &:focus { border-color: var(--color-primary-500); } &:focus { background-color: var(--color-primary-500); } &:focus { color: var(--color-white); } } .btn-primary { border-color: var(--color-primary-500); background-color: var(--color-primary-500); color: var(--color-white); &:hover { @media (hover: hover) { border-color: var(--color-primary-600); } } &:hover { @media (hover: hover) { background-color: var(--color-primary-600); } } &:hover { @media (hover: hover) { color: var(--color-white); } } &:focus { border-color: var(--color-primary-600); } &:focus { background-color: var(--color-primary-600); } &:focus { color: var(--color-white); } } .btn-red { border-color: var(--color-red-500); background-color: var(--color-red-500); color: var(--color-white); &:hover { @media (hover: hover) { border-color: var(--color-red-600); } } &:hover { @media (hover: hover) { background-color: var(--color-red-600); } } &:hover { @media (hover: hover) { color: var(--color-white); } } &:focus { border-color: var(--color-red-600); } &:focus { background-color: var(--color-red-600); } &:focus { color: var(--color-white); } } .pagination-green { .pagination-item { &:hover { @media (hover: hover) { color: var(--color-green-500); } } &.active { border-color: var(--color-green-500); } &.active { background-color: var(--color-green-500); } &.active { color: var(--color-green-50); } } .pagination-pre, .pagination-next { &:hover { @media (hover: hover) { color: var(--color-green-500); } } &.active { border-color: var(--color-green-500); } &.active { background-color: var(--color-green-500); } &.active { color: var(--color-green-50); } } } .pagination-primary { .pagination-item { &:hover { @media (hover: hover) { color: var(--color-primary-500); } } &.active { border-color: var(--color-primary-500); } &.active { background-color: var(--color-primary-500); } &.active { color: var(--color-primary-50); } } .pagination-pre, .pagination-next { &:hover { @media (hover: hover) { color: var(--color-primary-500); } } &.active { border-color: var(--color-primary-500); } &.active { background-color: var(--color-primary-500); } &.active { color: var(--color-primary-50); } } } .pagination-purple { .pagination-item { &:hover { @media (hover: hover) { color: var(--color-purple-500); } } &.active { border-color: var(--color-purple-500); } &.active { background-color: var(--color-purple-500); } &.active { color: var(--color-purple-50); } } .pagination-pre, .pagination-next { &:hover { @media (hover: hover) { color: var(--color-purple-500); } } &.active { border-color: var(--color-purple-500); } &.active { background-color: var(--color-purple-500); } &.active { color: var(--color-purple-50); } } } .pagination-red { .pagination-item { &:hover { @media (hover: hover) { color: var(--color-red-500); } } &.active { border-color: var(--color-red-500); } &.active { background-color: var(--color-red-500); } &.active { color: var(--color-red-50); } } .pagination-pre, .pagination-next { &:hover { @media (hover: hover) { color: var(--color-red-500); } } &.active { border-color: var(--color-red-500); } &.active { background-color: var(--color-red-500); } &.active { color: var(--color-red-50); } } } .pagination-sky { .pagination-item { &:hover { @media (hover: hover) { color: var(--color-sky-500); } } &.active { border-color: var(--color-sky-500); } &.active { background-color: var(--color-sky-500); } &.active { color: var(--color-sky-50); } } .pagination-pre, .pagination-next { &:hover { @media (hover: hover) { color: var(--color-sky-500); } } &.active { border-color: var(--color-sky-500); } &.active { background-color: var(--color-sky-500); } &.active { color: var(--color-sky-50); } } } .pagination-yellow { .pagination-item { &:hover { @media (hover: hover) { color: var(--color-yellow-500); } } &.active { border-color: var(--color-yellow-500); } &.active { background-color: var(--color-yellow-500); } &.active { color: var(--color-yellow-50); } } .pagination-pre, .pagination-next { &:hover { @media (hover: hover) { color: var(--color-yellow-500); } } &.active { border-color: var(--color-yellow-500); } &.active { background-color: var(--color-yellow-500); } &.active { color: var(--color-yellow-50); } } } .alert-gray { border-color: var(--color-gray-200); background-color: var(--color-gray-100); color: var(--color-gray-500); &:where([data-mode=dark], [data-mode=dark] *) { border-color: color-mix(in srgb, oklch(0.551 0.027 264.364) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-gray-500) 30%, transparent); } } &:where([data-mode=dark], [data-mode=dark] *) { background-color: color-mix(in srgb, oklch(0.551 0.027 264.364) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-gray-500) 20%, transparent); } } } .alert-primary { border-color: var(--color-primary-200); background-color: var(--color-primary-100); color: var(--color-primary-500); &:where([data-mode=dark], [data-mode=dark] *) { border-color: color-mix(in srgb, oklch(65.26% 0.1828 255.54) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary-500) 30%, transparent); } } &:where([data-mode=dark], [data-mode=dark] *) { background-color: color-mix(in srgb, oklch(65.26% 0.1828 255.54) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary-500) 20%, transparent); } } } .active-date { border-color: var(--color-primary-500); background-color: var(--color-primary-500); color: var(--color-primary-50); p { color: var(--color-primary-200); } } .input-radio-primary { &:checked { border-color: var(--color-primary-500) !important; } &:checked { background-color: var(--color-primary-500); } &:checked { &:hover { @media (hover: hover) { background-color: var(--color-primary-500); } } } &:focus { &:checked { background-color: var(--color-primary-500); } } &:focus { &:checked { --tw-ring-color: var(--color-primary-500); } } } .input-check-primary { &:checked { border-color: var(--color-primary-500) !important; } &:checked { background-color: var(--color-primary-500); } &:focus { &:checked { background-color: var(--color-primary-500); } } } .border-amber-200 { border-color: var(--color-amber-200); } .border-blue-200 { border-color: var(--color-blue-200); } .border-blue-400 { border-color: var(--color-blue-400); } .border-blue-500 { border-color: var(--color-blue-500); } .border-dark-700 { border-color: var(--color-dark-700); } .border-emerald-200 { border-color: var(--color-emerald-200); } .border-gray-50 { border-color: var(--color-gray-50); } .border-gray-100 { border-color: var(--color-gray-100); } .border-gray-200 { border-color: var(--color-gray-200); } .border-gray-200\/80 { border-color: color-mix(in srgb, oklch(0.928 0.006 264.531) 80%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-gray-200) 80%, transparent); } } .border-gray-300 { border-color: var(--color-gray-300); } .border-gray-600 { border-color: var(--color-gray-600); } .border-green-500 { border-color: var(--color-green-500); } .border-indigo-500 { border-color: var(--color-indigo-500); } .border-orange-200 { border-color: var(--color-orange-200); } .border-primary-500 { border-color: var(--color-primary-500); } .border-purple-200 { border-color: var(--color-purple-200); } .border-red-300 { border-color: var(--color-red-300); } .border-red-500 { border-color: var(--color-red-500); } .border-sidebar-border { border-color: var(--color-sidebar-border); } .border-slate-200 { border-color: var(--color-slate-200); } .border-transparent { border-color: transparent; } .border-white { border-color: var(--color-white); } .border-white\/20 { 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); } } .\!border-x-transparent { border-inline-color: transparent !important; } .border-t-blue-600 { border-top-color: var(--color-blue-600); } .flatpickr-monthDropdown-months { background-color: var(--color-white); &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-900); } } .\!bg-green-300 { background-color: var(--color-green-300) !important; } .\!bg-red-300 { background-color: var(--color-red-300) !important; } .bg-\(--my_variable\) { background-color: var(--my_variable); } .bg-\(color\:--my-color\) { background-color: var(--my-color); } .bg-\[\#1acd81\] { background-color: #1acd81; } .bg-\[\#0088cc\] { background-color: #0088cc; } .bg-\[\#358ffc\] { background-color: #358ffc; } .bg-\[\#f04b1f\] { background-color: #f04b1f; } .bg-\[color\:var\(--my-color\)\] { background-color: var(--my-color); } .bg-\[var\(--my_variable\)\] { background-color: var(--my_variable); } .bg-amber-50 { background-color: var(--color-amber-50); } .bg-amber-100 { background-color: var(--color-amber-100); } .bg-amber-500 { background-color: var(--color-amber-500); } .bg-black { background-color: var(--color-black); } .bg-blue-50 { background-color: var(--color-blue-50); } .bg-blue-100 { background-color: var(--color-blue-100); } .bg-blue-200 { background-color: var(--color-blue-200); } .bg-blue-400\/20 { background-color: color-mix(in srgb, oklch(0.707 0.165 254.624) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-blue-400) 20%, transparent); } } .bg-blue-500 { background-color: var(--color-blue-500); } .bg-blue-600 { background-color: var(--color-blue-600); } .bg-body { background-color: var(--color-body); } .bg-cyan-400\/20 { background-color: color-mix(in srgb, oklch(0.789 0.154 211.53) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-cyan-400) 20%, transparent); } } .bg-dark-700\/50 { background-color: color-mix(in srgb, oklch(0.372 0.044 257.287) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-dark-700) 50%, transparent); } } .bg-dark-800 { background-color: var(--color-dark-800); } .bg-dark-900 { background-color: var(--color-dark-900); } .bg-dark-950 { background-color: var(--color-dark-950); } .bg-emerald-50 { background-color: var(--color-emerald-50); } .bg-emerald-100 { background-color: var(--color-emerald-100); } .bg-emerald-500 { background-color: var(--color-emerald-500); } .bg-fuchsia-400\/20 { background-color: color-mix(in srgb, oklch(0.74 0.238 322.16) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-fuchsia-400) 20%, transparent); } } .bg-fuchsia-500 { background-color: var(--color-fuchsia-500); } .bg-gray-50 { background-color: var(--color-gray-50); } .bg-gray-50\/50 { background-color: color-mix(in srgb, oklch(0.985 0.002 247.839) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-gray-50) 50%, transparent); } } .bg-gray-100 { background-color: var(--color-gray-100); } .bg-gray-100\/50 { background-color: color-mix(in srgb, oklch(0.967 0.003 264.542) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-gray-100) 50%, transparent); } } .bg-gray-200 { background-color: var(--color-gray-200); } .bg-gray-200\/20 { background-color: color-mix(in srgb, oklch(0.928 0.006 264.531) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-gray-200) 20%, transparent); } } .bg-gray-200\/50 { background-color: color-mix(in srgb, oklch(0.928 0.006 264.531) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-gray-200) 50%, transparent); } } .bg-gray-300 { background-color: var(--color-gray-300); } .bg-gray-500\/15 { background-color: color-mix(in srgb, oklch(0.551 0.027 264.364) 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-gray-500) 15%, transparent); } } .bg-gray-500\/75 { background-color: color-mix(in srgb, oklch(0.551 0.027 264.364) 75%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-gray-500) 75%, transparent); } } .bg-gray-700 { background-color: var(--color-gray-700); } .bg-gray-800 { background-color: var(--color-gray-800); } .bg-gray-900\/40 { background-color: color-mix(in srgb, oklch(0.21 0.034 264.665) 40%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-gray-900) 40%, transparent); } } .bg-gray-950 { background-color: var(--color-gray-950); } .bg-green-50 { background-color: var(--color-green-50); } .bg-green-100 { background-color: var(--color-green-100); } .bg-green-400\/20 { background-color: color-mix(in srgb, oklch(0.792 0.209 151.711) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-green-400) 20%, transparent); } } .bg-green-500 { background-color: var(--color-green-500); } .bg-green-500\/15 { background-color: color-mix(in srgb, oklch(0.723 0.219 149.579) 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-green-500) 15%, transparent); } } .bg-green-600 { background-color: var(--color-green-600); } .bg-indigo-100 { background-color: var(--color-indigo-100); } .bg-indigo-300 { background-color: var(--color-indigo-300); } .bg-indigo-400 { background-color: var(--color-indigo-400); } .bg-indigo-400\/20 { background-color: color-mix(in srgb, oklch(0.673 0.182 276.935) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-indigo-400) 20%, transparent); } } .bg-indigo-500 { background-color: var(--color-indigo-500); } .bg-indigo-500\/15 { background-color: color-mix(in srgb, oklch(0.585 0.233 277.117) 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-indigo-500) 15%, transparent); } } .bg-indigo-600 { background-color: var(--color-indigo-600); } .bg-lime-400\/20 { background-color: color-mix(in srgb, oklch(0.841 0.238 128.85) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-lime-400) 20%, transparent); } } .bg-lime-500 { background-color: var(--color-lime-500); } .bg-neutral-950 { background-color: var(--color-neutral-950); } .bg-orange-100 { background-color: var(--color-orange-100); } .bg-orange-400\/20 { background-color: color-mix(in srgb, oklch(0.75 0.183 55.934) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-orange-400) 20%, transparent); } } .bg-orange-500\/15 { background-color: color-mix(in srgb, oklch(0.705 0.213 47.604) 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-orange-500) 15%, transparent); } } .bg-pink-400\/20 { background-color: color-mix(in srgb, oklch(0.718 0.202 349.761) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-pink-400) 20%, transparent); } } .bg-pink-500 { background-color: var(--color-pink-500); } .bg-pink-500\/15 { background-color: color-mix(in srgb, oklch(0.656 0.241 354.308) 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-pink-500) 15%, transparent); } } .bg-pink-500\/20 { background-color: color-mix(in srgb, oklch(0.656 0.241 354.308) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-pink-500) 20%, transparent); } } .bg-primary-500 { background-color: var(--color-primary-500); } .bg-primary-500\/15 { background-color: color-mix(in srgb, oklch(65.26% 0.1828 255.54) 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary-500) 15%, transparent); } } .bg-primary-800 { background-color: var(--color-primary-800); } .bg-primary-900 { background-color: var(--color-primary-900); } .bg-purple-50 { background-color: var(--color-purple-50); } .bg-purple-300 { background-color: var(--color-purple-300); } .bg-purple-400\/20 { background-color: color-mix(in srgb, oklch(0.714 0.203 305.504) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-purple-400) 20%, transparent); } } .bg-purple-500 { background-color: var(--color-purple-500); } .bg-purple-950 { background-color: var(--color-purple-950); } .bg-red-50 { background-color: var(--color-red-50); } .bg-red-100 { background-color: var(--color-red-100); } .bg-red-400 { background-color: var(--color-red-400); } .bg-red-400\/20 { background-color: color-mix(in srgb, oklch(0.704 0.191 22.216) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-red-400) 20%, transparent); } } .bg-red-500 { background-color: var(--color-red-500); } .bg-red-500\/10 { background-color: color-mix(in srgb, oklch(0.637 0.237 25.331) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent); } } .bg-red-500\/15 { background-color: color-mix(in srgb, oklch(0.637 0.237 25.331) 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-red-500) 15%, transparent); } } .bg-red-500\/50 { background-color: color-mix(in srgb, oklch(0.637 0.237 25.331) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } .bg-red-500\/\[50\%\] { background-color: color-mix(in srgb, oklch(0.637 0.237 25.331) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } .bg-red-600 { background-color: var(--color-red-600); } .bg-red-700 { background-color: var(--color-red-700); } .bg-sidebar { background-color: var(--color-sidebar); } .bg-sky-500 { background-color: var(--color-sky-500); } .bg-sky-500\/15 { background-color: color-mix(in srgb, oklch(0.685 0.169 237.323) 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-sky-500) 15%, transparent); } } .bg-sky-950 { background-color: var(--color-sky-950); } .bg-slate-300 { background-color: var(--color-slate-300); } .bg-stone-950 { background-color: var(--color-stone-950); } .bg-teal-400\/20 { background-color: color-mix(in srgb, oklch(0.777 0.152 181.912) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-teal-400) 20%, transparent); } } .bg-teal-500 { background-color: var(--color-teal-500); } .bg-transparent { background-color: transparent; } .bg-violet-500 { background-color: var(--color-violet-500); } .bg-white { background-color: var(--color-white); } .bg-white\/10 { background-color: color-mix(in srgb, #fff 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } .bg-white\/20 { background-color: color-mix(in srgb, #fff 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 20%, transparent); } } .bg-white\/40 { background-color: color-mix(in srgb, #fff 40%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 40%, transparent); } } .bg-white\/80 { background-color: color-mix(in srgb, #fff 80%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 80%, transparent); } } .bg-white\/95 { background-color: color-mix(in srgb, #fff 95%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 95%, transparent); } } .bg-white\/98 { background-color: color-mix(in srgb, #fff 98%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 98%, transparent); } } .bg-yellow-400\/20 { background-color: color-mix(in srgb, oklch(0.852 0.199 91.936) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-yellow-400) 20%, transparent); } } .bg-yellow-500 { background-color: var(--color-yellow-500); } .bg-yellow-500\/15 { background-color: color-mix(in srgb, oklch(0.795 0.184 86.047) 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-yellow-500) 15%, transparent); } } .bg-zinc-950 { background-color: var(--color-zinc-950); } .-bg-conic { --tw-gradient-position: in oklab; background-image: conic-gradient(var(--tw-gradient-stops)); } .bg-conic { --tw-gradient-position: in oklab; background-image: conic-gradient(var(--tw-gradient-stops)); } .bg-gradient-to-br { --tw-gradient-position: to bottom right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-gradient-to-r { --tw-gradient-position: to right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-gradient-to-t { --tw-gradient-position: to top in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-gradient-to-tr { --tw-gradient-position: to top right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-radial { --tw-gradient-position: in oklab; background-image: radial-gradient(var(--tw-gradient-stops)); } .bg-\[url\(\'data\:image\/svg\+xml\;base64\,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI\+PHBhdGggZD0iTTM2IDE2YzAtNC40MTggMy41ODItOCA4LThzOCAzLjU4MiA4IDgtMy41ODIgOC04IDgtOC0zLjU4Mi04LTh6TTAgMTZjMC00LjQxOCAzLjU4Mi04IDgtOHM4IDMuNTgyIDggOC0zLjU4MiA4LTggOC04LTMuNTgyLTgtOHptMCAzNmMwLTQuNDE4IDMuNTgyLTggOC04czggMy41ODIgOCA4LTMuNTgyIDgtOCA4LTgtMy41ODItOC04em0zNiAwYzAtNC40MTggMy41ODItOCA4LThzOCAzLjU4MiA4IDgtMy41ODIgOC04IDgtOC0zLjU4Mi04LTh6Ii8\+PC9nPjwvZz48L3N2Zz4\=\'\)\] { background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDE2YzAtNC40MTggMy41ODItOCA4LThzOCAzLjU4MiA4IDgtMy41ODIgOC04IDgtOC0zLjU4Mi04LTh6TTAgMTZjMC00LjQxOCAzLjU4Mi04IDgtOHM4IDMuNTgyIDggOC0zLjU4MiA4LTggOC04LTMuNTgyLTgtOHptMCAzNmMwLTQuNDE4IDMuNTgyLTggOC04czggMy41ODIgOCA4LTMuNTgyIDgtOCA4LTgtMy41ODItOC04em0zNiAwYzAtNC40MTggMy41ODItOCA4LThzOCAzLjU4MiA4IDgtMy41ODIgOC04IDgtOC0zLjU4Mi04LTh6Ii8+PC9nPjwvZz48L3N2Zz4='); } .bg-none { background-image: none; } .via-none { --tw-gradient-via-stops: initial; } .from-amber-500 { --tw-gradient-from: var(--color-amber-500); --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)); } .from-amber-600 { --tw-gradient-from: var(--color-amber-600); --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)); } .from-black\/20 { --tw-gradient-from: color-mix(in srgb, #000 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-black) 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)); } .from-blue-50 { --tw-gradient-from: var(--color-blue-50); --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)); } .from-blue-500 { --tw-gradient-from: var(--color-blue-500); --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)); } .from-blue-600 { --tw-gradient-from: var(--color-blue-600); --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)); } .from-emerald-50 { --tw-gradient-from: var(--color-emerald-50); --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)); } .from-emerald-400\/20 { --tw-gradient-from: color-mix(in srgb, oklch(0.765 0.177 163.223) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-emerald-400) 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)); } .from-emerald-500 { --tw-gradient-from: var(--color-emerald-500); --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)); } .from-emerald-600 { --tw-gradient-from: var(--color-emerald-600); --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)); } .from-gray-50 { --tw-gradient-from: var(--color-gray-50); --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)); } .from-gray-200 { --tw-gradient-from: 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)); } .from-indigo-500 { --tw-gradient-from: var(--color-indigo-500); --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)); } .from-indigo-500\/5 { --tw-gradient-from: color-mix(in srgb, oklch(0.585 0.233 277.117) 5%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-indigo-500) 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)); } .from-indigo-600 { --tw-gradient-from: var(--color-indigo-600); --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)); } .from-orange-50 { --tw-gradient-from: var(--color-orange-50); --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)); } .from-orange-400\/20 { --tw-gradient-from: color-mix(in srgb, oklch(0.75 0.183 55.934) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-orange-400) 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)); } .from-orange-500 { --tw-gradient-from: var(--color-orange-500); --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)); } .from-orange-600 { --tw-gradient-from: var(--color-orange-600); --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)); } .from-pink-500\/5 { --tw-gradient-from: color-mix(in srgb, oklch(0.656 0.241 354.308) 5%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-pink-500) 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)); } .from-pink-600 { --tw-gradient-from: var(--color-pink-600); --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)); } .from-primary-500 { --tw-gradient-from: var(--color-primary-500); --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)); } .from-purple-500 { --tw-gradient-from: var(--color-purple-500); --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)); } .from-purple-600 { --tw-gradient-from: var(--color-purple-600); --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)); } .from-red-500 { --tw-gradient-from: var(--color-red-500); --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)); } .from-slate-50 { --tw-gradient-from: var(--color-slate-50); --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)); } .from-white { --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)); } .via-gray-50 { --tw-gradient-via: var(--color-gray-50); --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); } .via-indigo-500 { --tw-gradient-via: var(--color-indigo-500); --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); } .via-indigo-600 { --tw-gradient-via: var(--color-indigo-600); --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); } .via-purple-600 { --tw-gradient-via: var(--color-purple-600); --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); } .via-white { --tw-gradient-via: var(--color-white); --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); } .to-amber-500 { --tw-gradient-to: var(--color-amber-500); --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)); } .to-amber-600 { --tw-gradient-to: var(--color-amber-600); --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)); } .to-blue-500 { --tw-gradient-to: var(--color-blue-500); --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)); } .to-blue-600 { --tw-gradient-to: var(--color-blue-600); --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)); } .to-cyan-400 { --tw-gradient-to: var(--color-cyan-400); --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)); } .to-emerald-50 { --tw-gradient-to: var(--color-emerald-50); --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)); } .to-emerald-500 { --tw-gradient-to: var(--color-emerald-500); --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)); } .to-emerald-600 { --tw-gradient-to: var(--color-emerald-600); --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)); } .to-emerald-600\/20 { --tw-gradient-to: color-mix(in srgb, oklch(0.596 0.145 163.225) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--color-emerald-600) 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)); } .to-gray-50 { --tw-gradient-to: var(--color-gray-50); --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)); } .to-gray-300 { --tw-gradient-to: var(--color-gray-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)); } .to-indigo-50 { --tw-gradient-to: var(--color-indigo-50); --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)); } .to-indigo-500\/5 { --tw-gradient-to: color-mix(in srgb, oklch(0.585 0.233 277.117) 5%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--color-indigo-500) 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)); } .to-indigo-600 { --tw-gradient-to: var(--color-indigo-600); --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)); } .to-indigo-700 { --tw-gradient-to: var(--color-indigo-700); --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)); } .to-orange-50 { --tw-gradient-to: var(--color-orange-50); --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)); } .to-orange-500 { --tw-gradient-to: var(--color-orange-500); --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)); } .to-orange-600 { --tw-gradient-to: var(--color-orange-600); --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)); } .to-orange-600\/20 { --tw-gradient-to: color-mix(in srgb, oklch(0.646 0.222 41.116) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--color-orange-600) 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)); } .to-pink-500 { --tw-gradient-to: var(--color-pink-500); --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)); } .to-pink-600 { --tw-gradient-to: var(--color-pink-600); --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)); } .to-purple-500 { --tw-gradient-to: var(--color-purple-500); --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)); } .to-purple-500\/5 { --tw-gradient-to: color-mix(in srgb, oklch(0.627 0.265 303.9) 5%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--color-purple-500) 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)); } .to-purple-600 { --tw-gradient-to: var(--color-purple-600); --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)); } .to-slate-100 { --tw-gradient-to: var(--color-slate-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)); } .to-transparent { --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)); } .to-white { --tw-gradient-to: 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)); } .box-decoration-clone { -webkit-box-decoration-break: clone; box-decoration-break: clone; } .box-decoration-slice { -webkit-box-decoration-break: slice; box-decoration-break: slice; } .decoration-clone { -webkit-box-decoration-break: clone; box-decoration-break: clone; } .decoration-slice { -webkit-box-decoration-break: slice; box-decoration-break: slice; } .bg-auto { background-size: auto; } .bg-contain { background-size: contain; } .bg-cover { background-size: cover; } .bg-fixed { background-attachment: fixed; } .bg-local { background-attachment: local; } .bg-scroll { background-attachment: scroll; } .bg-clip-border { background-clip: border-box; } .bg-clip-content { background-clip: content-box; } .bg-clip-padding { background-clip: padding-box; } .bg-clip-text { background-clip: text; } .bg-bottom { background-position: bottom; } .bg-center { background-position: center; } .bg-left { background-position: left; } .bg-left-bottom { background-position: left bottom; } .bg-left-top { background-position: left top; } .bg-right { background-position: right; } .bg-right-bottom { background-position: right bottom; } .bg-right-top { background-position: right top; } .bg-top { background-position: top; } .bg-no-repeat { background-repeat: no-repeat; } .bg-repeat { background-repeat: repeat; } .bg-repeat-round { background-repeat: round; } .bg-repeat-space { background-repeat: space; } .bg-repeat-x { background-repeat: repeat-x; } .bg-repeat-y { background-repeat: repeat-y; } .bg-origin-border { background-origin: border-box; } .bg-origin-content { background-origin: content-box; } .bg-origin-padding { background-origin: padding-box; } .fill-none { fill: none; } .stroke-none { stroke: none; } .object-contain { object-fit: contain; } .object-cover { object-fit: cover; } .object-fill { object-fit: fill; } .object-none { object-fit: none; } .object-scale-down { object-fit: scale-down; } .object-bottom { object-position: bottom; } .object-center { object-position: center; } .object-left { object-position: left; } .object-left-bottom { object-position: left bottom; } .object-left-top { object-position: left top; } .object-right { object-position: right; } .object-right-bottom { object-position: right bottom; } .object-right-top { object-position: right top; } .object-top { object-position: top; } .\!p-2 { padding: calc(var(--spacing) * 2) !important; } .card-body { padding: calc(var(--spacing) * 5); } .modal-content { padding: calc(var(--spacing) * 5); } .p-0 { padding: calc(var(--spacing) * 0); } .p-1 { padding: calc(var(--spacing) * 1); } .p-1\.5 { padding: calc(var(--spacing) * 1.5); } .p-2 { padding: calc(var(--spacing) * 2); } .p-3 { padding: calc(var(--spacing) * 3); } .p-3\.5 { padding: calc(var(--spacing) * 3.5); } .p-4 { padding: calc(var(--spacing) * 4); } .p-5 { padding: calc(var(--spacing) * 5); } .p-6 { padding: calc(var(--spacing) * 6); } .p-8 { padding: calc(var(--spacing) * 8); } .p-12 { padding: calc(var(--spacing) * 12); } .p-space { padding: var(--spacing-space); } .fc-timeline-events { .fc-timeline-event { padding-inline: calc(var(--spacing) * 5); padding-block: calc(var(--spacing) * 2); } } .\!px-0 { padding-inline: calc(var(--spacing) * 0) !important; } .px-0 { padding-inline: calc(var(--spacing) * 0); } .px-1 { padding-inline: calc(var(--spacing) * 1); } .px-1\.5 { padding-inline: calc(var(--spacing) * 1.5); } .px-2 { padding-inline: calc(var(--spacing) * 2); } .px-2\.5 { padding-inline: calc(var(--spacing) * 2.5); } .px-3 { padding-inline: calc(var(--spacing) * 3); } .px-3\.5 { padding-inline: calc(var(--spacing) * 3.5); } .px-4 { padding-inline: calc(var(--spacing) * 4); } .px-5 { padding-inline: calc(var(--spacing) * 5); } .px-6 { padding-inline: calc(var(--spacing) * 6); } .px-8 { padding-inline: calc(var(--spacing) * 8); } .\!py-1\.5 { padding-block: calc(var(--spacing) * 1.5) !important; } .py-0 { padding-block: calc(var(--spacing) * 0); } .py-0\.5 { padding-block: calc(var(--spacing) * 0.5); } .py-1 { padding-block: calc(var(--spacing) * 1); } .py-1\.5 { padding-block: calc(var(--spacing) * 1.5); } .py-2 { padding-block: calc(var(--spacing) * 2); } .py-2\.5 { padding-block: calc(var(--spacing) * 2.5); } .py-3 { padding-block: calc(var(--spacing) * 3); } .py-3\.5 { padding-block: calc(var(--spacing) * 3.5); } .py-4 { padding-block: calc(var(--spacing) * 4); } .py-5 { padding-block: calc(var(--spacing) * 5); } .py-6 { padding-block: calc(var(--spacing) * 6); } .py-8 { padding-block: calc(var(--spacing) * 8); } .py-9 { padding-block: calc(var(--spacing) * 9); } .py-12 { padding-block: calc(var(--spacing) * 12); } .py-20 { padding-block: calc(var(--spacing) * 20); } .py-\[0\.5625rem\] { padding-block: 0.5625rem; } .ps-0 { padding-inline-start: calc(var(--spacing) * 0); } .ps-1 { padding-inline-start: calc(var(--spacing) * 1); } .ps-2 { padding-inline-start: calc(var(--spacing) * 2); } .ps-3 { padding-inline-start: calc(var(--spacing) * 3); } .ps-4 { padding-inline-start: calc(var(--spacing) * 4); } .ps-5 { padding-inline-start: calc(var(--spacing) * 5); } .pe-0 { padding-inline-end: calc(var(--spacing) * 0); } .pe-1 { padding-inline-end: calc(var(--spacing) * 1); } .pe-2 { padding-inline-end: calc(var(--spacing) * 2); } .pe-3 { padding-inline-end: calc(var(--spacing) * 3); } .pe-4 { padding-inline-end: calc(var(--spacing) * 4); } .pe-5 { padding-inline-end: calc(var(--spacing) * 5); } .pe-404 { padding-inline-end: calc(var(--spacing) * 404); } .pe-500 { padding-inline-end: calc(var(--spacing) * 500); } .pt-0 { padding-top: calc(var(--spacing) * 0); } .pt-1 { padding-top: calc(var(--spacing) * 1); } .pt-2 { padding-top: calc(var(--spacing) * 2); } .pt-3 { padding-top: calc(var(--spacing) * 3); } .pt-4 { padding-top: calc(var(--spacing) * 4); } .pt-5 { padding-top: calc(var(--spacing) * 5); } .pt-6 { padding-top: calc(var(--spacing) * 6); } .pt-\[calc\(theme\(\"spacing\.topbar\"\)_\*_1\.2\)\] { padding-top: calc(0rem * 1.2); } .pr-3 { padding-right: calc(var(--spacing) * 3); } .pr-4 { padding-right: calc(var(--spacing) * 4); } .pr-8 { padding-right: calc(var(--spacing) * 8); } .pr-12 { padding-right: calc(var(--spacing) * 12); } .pb-0 { padding-bottom: calc(var(--spacing) * 0); } .pb-1 { padding-bottom: calc(var(--spacing) * 1); } .pb-2 { padding-bottom: calc(var(--spacing) * 2); } .pb-3 { padding-bottom: calc(var(--spacing) * 3); } .pb-4 { padding-bottom: calc(var(--spacing) * 4); } .pb-5 { padding-bottom: calc(var(--spacing) * 5); } .pb-6 { padding-bottom: calc(var(--spacing) * 6); } .pb-14 { padding-bottom: calc(var(--spacing) * 14); } .pl-3 { padding-left: calc(var(--spacing) * 3); } .pl-3\.5 { padding-left: calc(var(--spacing) * 3.5); } .pl-4 { padding-left: calc(var(--spacing) * 4); } .pl-8 { padding-left: calc(var(--spacing) * 8); } .pl-9 { padding-left: calc(var(--spacing) * 9); } .pl-11 { padding-left: calc(var(--spacing) * 11); } .pl-12 { padding-left: calc(var(--spacing) * 12); } .text-center { text-align: center; } .text-end { text-align: end; } .text-justify { text-align: justify; } .text-left { text-align: left; } .text-right { text-align: right; } .text-start { text-align: start; } .indent-1 { text-indent: calc(var(--spacing) * 1); } .align-baseline { vertical-align: baseline; } .align-bottom { vertical-align: bottom; } .align-middle { vertical-align: middle; } .align-sub { vertical-align: sub; } .align-super { vertical-align: super; } .align-text-bottom { vertical-align: text-bottom; } .align-text-top { vertical-align: text-top; } .align-top { vertical-align: top; } .font-mono { font-family: var(--font-mono); } .font-sans { font-family: var(--font-sans); } .text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } .text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } .text-4xl { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } .text-base { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } .text-lg { 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)); } .text-xl { 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)); } .text-11 { font-size: var(--text-11); } .text-14 { font-size: var(--text-14); } .text-15 { font-size: var(--text-15); } .text-16 { font-size: var(--text-16); } .text-\[0\.75rem\] { font-size: 0.75rem; } .text-\[10px\] { font-size: 10px; } .text-\[14\.5px\] { font-size: 14.5px; } .text-card-title { font-size: var(--text-card-title); } .leading-6 { --tw-leading: calc(var(--spacing) * 6); line-height: calc(var(--spacing) * 6); } .leading-none { --tw-leading: 1; line-height: 1; } .leading-normal { --tw-leading: var(--leading-normal); line-height: var(--leading-normal); } .leading-relaxed { --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); } .leading-tight { --tw-leading: var(--leading-tight); line-height: var(--leading-tight); } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .font-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .font-normal { --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } .font-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .tracking-tight { --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .tracking-wider { --tw-tracking: var(--tracking-wider); letter-spacing: var(--tracking-wider); } .text-balance { text-wrap: balance; } .text-nowrap { text-wrap: nowrap; } .text-pretty { text-wrap: pretty; } .text-wrap { text-wrap: wrap; } .break-normal { overflow-wrap: normal; word-break: normal; } .break-words { overflow-wrap: break-word; } .break-all { word-break: break-all; } .break-keep { word-break: keep-all; } .overflow-ellipsis { text-overflow: ellipsis; } .text-clip { text-overflow: clip; } .text-ellipsis { text-overflow: ellipsis; } .hyphens-auto { -webkit-hyphens: auto; hyphens: auto; } .hyphens-manual { -webkit-hyphens: manual; hyphens: manual; } .hyphens-none { -webkit-hyphens: none; hyphens: none; } .whitespace-break-spaces { white-space: break-spaces; } .whitespace-normal { white-space: normal; } .whitespace-nowrap { white-space: nowrap; } .whitespace-pre { white-space: pre; } .whitespace-pre-line { white-space: pre-line; } .whitespace-pre-wrap { white-space: pre-wrap; } .\!link { color: var(--color-gray-500) !important; transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events !important; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important; transition-duration: var(--tw-duration, var(--default-transition-duration)) !important; --tw-duration: 200ms !important; transition-duration: 200ms !important; --tw-ease: linear !important; transition-timing-function: linear !important; &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-500) !important; } } .link { color: var(--color-gray-500); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 200ms; transition-duration: 200ms; --tw-ease: linear; transition-timing-function: linear; &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-500); } } .arrow-icon { color: var(--color-gray-500); &:where([data-mode=dark], [data-mode=dark] *) { color: currentcolor; } &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-500); } &.active { color: currentcolor; } } .btn { &.btn-sub-gray { &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-gray-400); } &:where([data-mode=dark], [data-mode=dark] *) { &:hover { @media (hover: hover) { color: var(--color-gray-300); } } } } } .\!text-green-600 { color: var(--color-green-600) !important; } .\!text-red-600 { color: var(--color-red-600) !important; } .\[color\:red\] { color: red; } .\[color\:red\]\/50 { color: color-mix(in oklab, red 50%, transparent); } .\[color\:red\]\/50\! { color: color-mix(in oklab, red 50%, transparent) !important; } .link-primary { &:hover { @media (hover: hover) { color: var(--color-primary-500); } } } .link-red { &:hover { @media (hover: hover) { color: var(--color-red-500); } } } .text-amber-100 { color: var(--color-amber-100); } .text-amber-600 { color: var(--color-amber-600); } .text-amber-700 { color: var(--color-amber-700); } .text-black { color: var(--color-black); } .text-blue-100 { color: var(--color-blue-100); } .text-blue-300 { color: var(--color-blue-300); } .text-blue-500 { color: var(--color-blue-500); } .text-blue-600 { color: var(--color-blue-600); } .text-blue-700 { color: var(--color-blue-700); } .text-blue-800 { color: var(--color-blue-800); } .text-blue-900 { color: var(--color-blue-900); } .text-body { color: var(--color-body); } .text-current { color: currentcolor; } .text-cyan-300 { color: var(--color-cyan-300); } .text-emerald-100 { color: var(--color-emerald-100); } .text-emerald-600 { color: var(--color-emerald-600); } .text-emerald-700 { color: var(--color-emerald-700); } .text-fuchsia-300 { color: var(--color-fuchsia-300); } .text-gray-100 { color: var(--color-gray-100); } .text-gray-400 { color: var(--color-gray-400); } .text-gray-500 { color: var(--color-gray-500); } .text-gray-600 { color: var(--color-gray-600); } .text-gray-700 { color: var(--color-gray-700); } .text-gray-800 { color: var(--color-gray-800); } .text-gray-900 { color: var(--color-gray-900); } .text-green-50 { color: var(--color-green-50); } .text-green-300 { color: var(--color-green-300); } .text-green-500 { color: var(--color-green-500); } .text-green-600 { color: var(--color-green-600); } .text-green-800 { color: var(--color-green-800); } .text-indigo-300 { color: var(--color-indigo-300); } .text-indigo-400 { color: var(--color-indigo-400); } .text-indigo-500 { color: var(--color-indigo-500); } .text-indigo-600 { color: var(--color-indigo-600); } .text-indigo-800 { color: var(--color-indigo-800); } .text-lime-300 { color: var(--color-lime-300); } .text-menu-title { color: var(--color-menu-title); } .text-orange-300 { color: var(--color-orange-300); } .text-orange-500 { color: var(--color-orange-500); } .text-orange-600 { color: var(--color-orange-600); } .text-pink-300 { color: var(--color-pink-300); } .text-primary-50 { color: var(--color-primary-50); } .text-primary-200 { color: var(--color-primary-200); } .text-primary-500 { color: var(--color-primary-500); } .text-primary-600 { color: var(--color-primary-600); } .text-purple-50 { color: var(--color-purple-50); } .text-purple-100 { color: var(--color-purple-100); } .text-purple-300 { color: var(--color-purple-300); } .text-purple-600 { color: var(--color-purple-600); } .text-purple-700 { color: var(--color-purple-700); } .text-red-300 { color: var(--color-red-300); } .text-red-400 { color: var(--color-red-400); } .text-red-500 { color: var(--color-red-500); } .text-red-600 { color: var(--color-red-600); } .text-red-700 { color: var(--color-red-700); } .text-red-800 { color: var(--color-red-800); } .text-sidebar-text { color: var(--color-sidebar-text); } .text-sidebar-text-active { color: var(--color-sidebar-text-active); } .text-sky-50 { color: var(--color-sky-50); } .text-slate-500 { color: var(--color-slate-500); } .text-slate-600 { color: var(--color-slate-600); } .text-slate-800 { color: var(--color-slate-800); } .text-teal-300 { color: var(--color-teal-300); } .text-transparent { color: transparent; } .text-white { color: var(--color-white); } .text-white\/70 { 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); } } .text-white\/90 { 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); } } .text-yellow-300 { color: var(--color-yellow-300); } .text-yellow-500 { color: var(--color-yellow-500); } .capitalize { text-transform: capitalize; } .lowercase { text-transform: lowercase; } .normal-case { text-transform: none; } .uppercase { text-transform: uppercase; } .italic { font-style: italic; } .italic\! { font-style: italic !important; } .not-italic { font-style: normal; } .font-stretch-condensed { font-stretch: condensed; } .font-stretch-expanded { font-stretch: expanded; } .font-stretch-extra-condensed { font-stretch: extra-condensed; } .font-stretch-extra-expanded { font-stretch: extra-expanded; } .font-stretch-normal { font-stretch: normal; } .font-stretch-semi-condensed { font-stretch: semi-condensed; } .font-stretch-semi-expanded { font-stretch: semi-expanded; } .font-stretch-ultra-condensed { font-stretch: ultra-condensed; } .font-stretch-ultra-expanded { font-stretch: ultra-expanded; } .diagonal-fractions { --tw-numeric-fraction: diagonal-fractions; font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); } .lining-nums { --tw-numeric-figure: lining-nums; font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); } .oldstyle-nums { --tw-numeric-figure: oldstyle-nums; font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); } .ordinal { --tw-ordinal: ordinal; font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); } .proportional-nums { --tw-numeric-spacing: proportional-nums; font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); } .slashed-zero { --tw-slashed-zero: slashed-zero; font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); } .stacked-fractions { --tw-numeric-fraction: stacked-fractions; font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); } .tabular-nums { --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); } .normal-nums { font-variant-numeric: normal; } .line-through { text-decoration-line: line-through; } .no-underline { text-decoration-line: none; } .overline { text-decoration-line: overline; } .underline { text-decoration-line: underline; } .underline\! { text-decoration-line: underline !important; } .decoration-dashed { text-decoration-style: dashed; } .decoration-dotted { text-decoration-style: dotted; } .decoration-double { text-decoration-style: double; } .decoration-solid { text-decoration-style: solid; } .decoration-wavy { text-decoration-style: wavy; } .decoration-auto { text-decoration-thickness: auto; } .decoration-from-font { text-decoration-thickness: from-font; } .underline-offset-2 { text-underline-offset: 2px; } .underline-offset-auto { text-underline-offset: auto; } .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .subpixel-antialiased { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .placeholder-gray-400 { &::placeholder { color: var(--color-gray-400); } } .accent-auto { accent-color: auto; } .scheme-dark { color-scheme: dark; } .scheme-light { color-scheme: light; } .scheme-light-dark { color-scheme: light dark; } .scheme-normal { color-scheme: normal; } .scheme-only-dark { color-scheme: only dark; } .scheme-only-light { color-scheme: only light; } .opacity-0 { opacity: 0%; } .opacity-20 { opacity: 20%; } .opacity-25 { opacity: 25%; } .opacity-50 { opacity: 50%; } .opacity-60 { opacity: 60%; } .opacity-75 { opacity: 75%; } .opacity-100 { opacity: 100%; } .mix-blend-multiply { mix-blend-mode: multiply; } .mix-blend-plus-darker { mix-blend-mode: plus-darker; } .mix-blend-plus-lighter { mix-blend-mode: plus-lighter; } .shadow { --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); } .shadow-2xl { --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-inner { --tw-shadow: inset 0 2px 4px 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); } .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); } .shadow-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); } .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); } .shadow-xl { --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); } .shadow-xs { --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); } .ring { --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); } .ring-1 { --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); } .ring-2 { --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); } .inset-ring { --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-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); } .shadow-amber-500\/30 { --tw-shadow-color: color-mix(in srgb, oklch(0.769 0.188 70.08) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-amber-500) 30%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-blue-500\/30 { --tw-shadow-color: color-mix(in srgb, oklch(0.623 0.214 259.815) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 30%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-emerald-500\/30 { --tw-shadow-color: color-mix(in srgb, oklch(0.696 0.17 162.48) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-emerald-500) 30%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-gray-100 { --tw-shadow-color: oklch(0.967 0.003 264.542); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-gray-100) var(--tw-shadow-alpha), transparent); } } .shadow-gray-200 { --tw-shadow-color: oklch(0.928 0.006 264.531); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-gray-200) var(--tw-shadow-alpha), transparent); } } .shadow-gray-200\/30 { --tw-shadow-color: color-mix(in srgb, oklch(0.928 0.006 264.531) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-gray-200) 30%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-gray-300 { --tw-shadow-color: oklch(0.872 0.01 258.338); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-gray-300) var(--tw-shadow-alpha), transparent); } } .shadow-gray-400 { --tw-shadow-color: oklch(0.707 0.022 261.325); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-gray-400) var(--tw-shadow-alpha), transparent); } } .shadow-indigo-500\/10 { --tw-shadow-color: color-mix(in srgb, oklch(0.585 0.233 277.117) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-indigo-500) 10%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-indigo-500\/20 { --tw-shadow-color: color-mix(in srgb, oklch(0.585 0.233 277.117) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-indigo-500) 20%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-indigo-500\/30 { --tw-shadow-color: color-mix(in srgb, oklch(0.585 0.233 277.117) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-indigo-500) 30%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-indigo-500\/50 { --tw-shadow-color: color-mix(in srgb, oklch(0.585 0.233 277.117) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-indigo-500) 50%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-initial { --tw-shadow-color: initial; } .shadow-orange-500\/30 { --tw-shadow-color: color-mix(in srgb, oklch(0.705 0.213 47.604) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-orange-500) 30%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-purple-500\/30 { --tw-shadow-color: color-mix(in srgb, oklch(0.627 0.265 303.9) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-purple-500) 30%, transparent) var(--tw-shadow-alpha), transparent); } } .ring-amber-600\/20 { --tw-ring-color: color-mix(in srgb, oklch(0.666 0.179 58.318) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-amber-600) 20%, transparent); } } .ring-black\/5 { --tw-ring-color: color-mix(in srgb, #000 5%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent); } } .ring-blue-100 { --tw-ring-color: var(--color-blue-100); } .ring-blue-600\/20 { --tw-ring-color: color-mix(in srgb, oklch(0.546 0.245 262.881) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-blue-600) 20%, transparent); } } .ring-emerald-600\/20 { --tw-ring-color: color-mix(in srgb, oklch(0.596 0.145 163.225) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-emerald-600) 20%, transparent); } } .ring-gray-100 { --tw-ring-color: var(--color-gray-100); } .ring-gray-200 { --tw-ring-color: var(--color-gray-200); } .ring-gray-200\/80 { --tw-ring-color: color-mix(in srgb, oklch(0.928 0.006 264.531) 80%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-gray-200) 80%, transparent); } } .ring-gray-300 { --tw-ring-color: var(--color-gray-300); } .ring-gray-500\/10 { --tw-ring-color: color-mix(in srgb, oklch(0.551 0.027 264.364) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-gray-500) 10%, transparent); } } .ring-gray-900\/5 { --tw-ring-color: color-mix(in srgb, oklch(0.21 0.034 264.665) 5%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-gray-900) 5%, transparent); } } .ring-indigo-100 { --tw-ring-color: var(--color-indigo-100); } .ring-red-100 { --tw-ring-color: var(--color-red-100); } .inset-shadow-initial { --tw-inset-shadow-color: initial; } .outline-hidden { --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { outline: 2px solid transparent; outline-offset: 2px; } } .outline { outline-style: var(--tw-outline-style); outline-width: 1px; } .blur { --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,); } .blur-3xl { --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,); } .blur-none { --tw-blur: ; 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-xl { --tw-blur: blur(var(--blur-xl)); 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,); } .drop-shadow { --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.1))) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.06))); --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow( 0 1px 1px rgb(0 0 0 / 0.06)); 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,); } .drop-shadow-lg { --tw-drop-shadow-size: drop-shadow(0 4px 4px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15))); --tw-drop-shadow: drop-shadow(var(--drop-shadow-lg)); 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,); } .drop-shadow-none { --tw-drop-shadow: ; 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,); } .grayscale { --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,); } .invert { --tw-invert: invert(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,); } .sepia { --tw-sepia: sepia(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,); } .\!filter { 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,) !important; } .filter { 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,); } .filter\! { 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,) !important; } .backdrop-blur { --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-blur-md { --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,); } .backdrop-blur-none { --tw-backdrop-blur: ; -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-blur-sm { --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,); } .backdrop-blur-xl { --tw-backdrop-blur: blur(var(--blur-xl)); -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-blur-xs { --tw-backdrop-blur: blur(var(--blur-xs)); -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-grayscale { --tw-backdrop-grayscale: grayscale(100%); -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-invert { --tw-backdrop-invert: invert(100%); -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-sepia { --tw-backdrop-sepia: sepia(100%); -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 { -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,); } .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, visibility, 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-all { transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-colors { 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)); } .transition-opacity { transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-shadow { transition-property: box-shadow; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-transform { 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-none { transition-property: none; } .transition-discrete { transition-behavior: allow-discrete; } .transition-normal { transition-behavior: normal; } .duration-100 { --tw-duration: 100ms; transition-duration: 100ms; } .duration-150 { --tw-duration: 150ms; transition-duration: 150ms; } .duration-200 { --tw-duration: 200ms; transition-duration: 200ms; } .duration-300 { --tw-duration: 300ms; transition-duration: 300ms; } .duration-500 { --tw-duration: 500ms; transition-duration: 500ms; } .duration-700 { --tw-duration: 700ms; transition-duration: 700ms; } .duration-1000 { --tw-duration: 1000ms; transition-duration: 1000ms; } .ease-in { --tw-ease: var(--ease-in); transition-timing-function: var(--ease-in); } .ease-in-out { --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } .ease-linear { --tw-ease: linear; transition-timing-function: linear; } .ease-out { --tw-ease: var(--ease-out); transition-timing-function: var(--ease-out); } .will-change-auto { will-change: auto; } .will-change-contents { will-change: contents; } .will-change-scroll { will-change: scroll-position; } .will-change-transform { will-change: transform; } .contain-inline-size { --tw-contain-size: inline-size; contain: var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,); } .contain-layout { --tw-contain-layout: layout; contain: var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,); } .contain-paint { --tw-contain-paint: paint; contain: var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,); } .contain-size { --tw-contain-size: size; contain: var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,); } .contain-style { --tw-contain-style: style; contain: var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,); } .contain-content { contain: content; } .contain-none { contain: none; } .contain-strict { contain: strict; } .content-none { --tw-content: none; content: none; } .forced-color-adjust-auto { forced-color-adjust: auto; } .forced-color-adjust-none { forced-color-adjust: none; } .outline-dashed { --tw-outline-style: dashed; outline-style: dashed; } .outline-dotted { --tw-outline-style: dotted; outline-style: dotted; } .outline-double { --tw-outline-style: double; outline-style: double; } .outline-none { --tw-outline-style: none; outline-style: none; } .outline-solid { --tw-outline-style: solid; outline-style: solid; } .select-all { -webkit-user-select: all; user-select: all; } .select-none { -webkit-user-select: none; user-select: none; } .backface-hidden { backface-visibility: hidden; } .backface-visible { backface-visibility: visible; } .clip-path-plus { clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%); } .clip-path-triangle { clip-path: polygon(50% 0%, 100% 38%, 100% 100%, 0 99%, 0% 38%); } .divide-x-reverse { :where(& > :not(:last-child)) { --tw-divide-x-reverse: 1; } } .duration-initial { --tw-duration: initial; } .ease-initial { --tw-ease: initial; } .perspective-none { perspective: none; } .perspective-origin-bottom { perspective-origin: bottom; } .perspective-origin-bottom-left { perspective-origin: bottom left; } .perspective-origin-bottom-right { perspective-origin: bottom right; } .perspective-origin-center { perspective-origin: center; } .perspective-origin-left { perspective-origin: left; } .perspective-origin-right { perspective-origin: right; } .perspective-origin-top { perspective-origin: top; } .perspective-origin-top-left { perspective-origin: top left; } .perspective-origin-top-right { perspective-origin: top right; } .ring-inset { --tw-ring-inset: inset; } .transform-3d { transform-style: preserve-3d; } .transform-border { transform-box: border-box; } .transform-content { transform-box: content-box; } .transform-fill { transform-box: fill-box; } .transform-flat { transform-style: flat; } .transform-stroke { transform-box: stroke-box; } .transform-view { transform-box: view-box; } .\*\:relative { :is(& > *) { position: relative; } } .\*\:py-2\.5 { :is(& > *) { padding-block: calc(var(--spacing) * 2.5); } } .\*\:pb-3 { :is(& > *) { padding-bottom: calc(var(--spacing) * 3); } } .\*\:font-medium { :is(& > *) { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } } .group-focus-within\:text-blue-600 { &:is(:where(.group):focus-within *) { color: var(--color-blue-600); } } .group-focus-within\:text-indigo-500 { &:is(:where(.group):focus-within *) { color: var(--color-indigo-500); } } .group-focus-within\:text-indigo-600 { &:is(:where(.group):focus-within *) { color: var(--color-indigo-600); } } .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\: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\:scale-150 { &:is(:where(.group):hover *) { @media (hover: hover) { --tw-scale-x: 150%; --tw-scale-y: 150%; --tw-scale-z: 150%; scale: var(--tw-scale-x) var(--tw-scale-y); } } } .group-hover\:bg-amber-200 { &:is(:where(.group):hover *) { @media (hover: hover) { background-color: var(--color-amber-200); } } } .group-hover\:bg-blue-200 { &:is(:where(.group):hover *) { @media (hover: hover) { background-color: var(--color-blue-200); } } } .group-hover\:bg-gray-50 { &:is(:where(.group):hover *) { @media (hover: hover) { background-color: var(--color-gray-50); } } } .group-hover\:bg-green-200 { &:is(:where(.group):hover *) { @media (hover: hover) { background-color: var(--color-green-200); } } } .group-hover\:text-blue-600 { &:is(:where(.group):hover *) { @media (hover: hover) { color: var(--color-blue-600); } } } .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-data-\[content-width\=fluid\]\:mx-space { &:is(:where(.group)[data-content-width="fluid"] *) { margin-inline: var(--spacing-space); } } .group-data-\[content-width\=fluid\]\:px-space { &:is(:where(.group)[data-content-width="fluid"] *) { padding-inline: var(--spacing-space); } } .group-data-\[layout\=boxed\]\:inset-x-8 { &:is(:where(.group)[data-layout="boxed"] *) { inset-inline: calc(var(--spacing) * 8); } } .group-data-\[layout\=boxed\]\:\!top-topbar { &:is(:where(.group)[data-layout="boxed"] *) { top: var(--spacing-topbar) !important; } } .group-data-\[layout\=boxed\]\:top-0 { &:is(:where(.group)[data-layout="boxed"] *) { top: calc(var(--spacing) * 0); } } .group-data-\[layout\=boxed\]\:top-8 { &:is(:where(.group)[data-layout="boxed"] *) { top: calc(var(--spacing) * 8); } } .group-data-\[layout\=boxed\]\:top-\[calc\(theme\(\'spacing\.topbar\'\)_\+_theme\(\'spacing\.sidebar-boxed\'\)\)\] { &:is(:where(.group)[data-layout="boxed"] *) { top: calc(0rem + 2rem); } } .group-data-\[layout\=boxed\]\:hidden { &:is(:where(.group)[data-layout="boxed"] *) { display: none; } } .group-data-\[layout\=boxed\]\:h-\[calc\(100\%_-_5rem\)\] { &:is(:where(.group)[data-layout="boxed"] *) { height: calc(100% - 5rem); } } .group-data-\[layout\=boxed\]\:min-h-screen { &:is(:where(.group)[data-layout="boxed"] *) { min-height: 100vh; } } .group-data-\[layout\=boxed\]\:rounded-md { &:is(:where(.group)[data-layout="boxed"] *) { border-radius: var(--radius-md); } } .group-data-\[layout\=boxed\]\:rounded-t-md { &:is(:where(.group)[data-layout="boxed"] *) { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); } } .group-data-\[layout\=boxed\]\:bg-white { &:is(:where(.group)[data-layout="boxed"] *) { background-color: var(--color-white); } } .group-data-\[layout\=default\]\:hidden { &:is(:where(.group)[data-layout="default"] *) { display: none; } } .group-data-\[layout\=default\]\:px-4 { &:is(:where(.group)[data-layout="default"] *) { padding-inline: calc(var(--spacing) * 4); } } .group-data-\[layout\=doulcolumn\]\:block { &:is(:where(.group)[data-layout="doulcolumn"] *) { display: block; } } .group-data-\[layout\=horizontal\]\:static { &:is(:where(.group)[data-layout="horizontal"] *) { position: static; } } .group-data-\[layout\=horizontal\]\:top-topbar { &:is(:where(.group)[data-layout="horizontal"] *) { top: var(--spacing-topbar); } } .group-data-\[layout\=horizontal\]\:bottom-auto { &:is(:where(.group)[data-layout="horizontal"] *) { bottom: auto; } } .group-data-\[layout\=horizontal\]\:z-\[1005\] { &:is(:where(.group)[data-layout="horizontal"] *) { z-index: 1005; } } .group-data-\[layout\=horizontal\]\:hidden { &:is(:where(.group)[data-layout="horizontal"] *) { display: none; } } .group-data-\[layout\=horizontal\]\:h-64 { &:is(:where(.group)[data-layout="horizontal"] *) { height: calc(var(--spacing) * 64); } } .group-data-\[layout\=horizontal\]\:w-full { &:is(:where(.group)[data-layout="horizontal"] *) { width: 100%; } } .group-data-\[layout\=horizontal\]\:overflow-y-auto { &:is(:where(.group)[data-layout="horizontal"] *) { overflow-y: auto; } } .group-data-\[layout\=horizontal\]\:border-b { &:is(:where(.group)[data-layout="horizontal"] *) { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } } .group-data-\[layout\=horizontal\]\:bg-white { &:is(:where(.group)[data-layout="horizontal"] *) { background-color: var(--color-white); } } .group-data-\[layout\=horizontal\]\:p-3 { &:is(:where(.group)[data-layout="horizontal"] *) { padding: calc(var(--spacing) * 3); } } .group-data-\[layout\=horizontal\]\:py-0 { &:is(:where(.group)[data-layout="horizontal"] *) { padding-block: calc(var(--spacing) * 0); } } .group-data-\[layout\=horizontal\]\:py-2 { &:is(:where(.group)[data-layout="horizontal"] *) { padding-block: calc(var(--spacing) * 2); } } .group-data-\[layout\=horizontal\]\:pt-\[calc\(theme\(\"spacing\.topbar\"\)_\*_1\.2\)\] { &:is(:where(.group)[data-layout="horizontal"] *) { padding-top: calc(0rem * 1.2); } } .group-data-\[layout\=horizontal\]\:pt-\[calc\(theme\(\"spacing\.topbar\"\)_\*_1\.9\)\] { &:is(:where(.group)[data-layout="horizontal"] *) { padding-top: calc(0rem * 1.9); } } .group-data-\[layout\=horizontal\]\:\*\:shrink-0 { &:is(:where(.group)[data-layout="horizontal"] *) { :is(& > *) { flex-shrink: 0; } } } .group-data-\[layout\=modern\]\:top-0 { &:is(:where(.group)[data-layout="modern"] *) { top: calc(var(--spacing) * 0); } } .group-data-\[layout\=modern\]\:hidden { &:is(:where(.group)[data-layout="modern"] *) { display: none; } } .group-data-\[layout\=modern\]\:h-\[calc\(100\%_-_10rem\)\] { &:is(:where(.group)[data-layout="modern"] *) { height: calc(100% - 10rem); } } .group-data-\[layout\=semibox\]\:top-0 { &:is(:where(.group)[data-layout="semibox"] *) { top: calc(var(--spacing) * 0); } } .group-data-\[layout\=semibox\]\:top-3 { &:is(:where(.group)[data-layout="semibox"] *) { top: calc(var(--spacing) * 3); } } .group-data-\[layout\=semibox\]\:bottom-3 { &:is(:where(.group)[data-layout="semibox"] *) { bottom: calc(var(--spacing) * 3); } } .group-data-\[layout\=semibox\]\:hidden { &:is(:where(.group)[data-layout="semibox"] *) { display: none; } } .group-data-\[layout\=semibox\]\:h-\[calc\(100\%_-_10rem\)\] { &:is(:where(.group)[data-layout="semibox"] *) { height: calc(100% - 10rem); } } .group-data-\[layout\=semibox\]\:rounded-md { &:is(:where(.group)[data-layout="semibox"] *) { border-radius: var(--radius-md); } } .group-data-\[layout\=semibox\]\:border { &:is(:where(.group)[data-layout="semibox"] *) { border-style: var(--tw-border-style); border-width: 1px; } } .group-data-\[layout\=semibox\]\:pt-\[calc\(theme\(\"spacing\.topbar\"\)_\*_1\.3\)\] { &:is(:where(.group)[data-layout="semibox"] *) { padding-top: calc(0rem * 1.3); } } .group-data-\[content-width\=fluid\]\:group-data-\[layout\=semibox\]\:px-3 { &:is(:where(.group)[data-content-width="fluid"] *) { &:is(:where(.group)[data-layout="semibox"] *) { padding-inline: calc(var(--spacing) * 3); } } } .group-data-\[nav-type\=pattern\]\:\!border-primary-400 { &:is(:where(.group)[data-nav-type="pattern"] *) { border-color: var(--color-primary-400) !important; } } .group-data-\[nav-type\=pattern\]\:text-white { &:is(:where(.group)[data-nav-type="pattern"] *) { color: var(--color-white); } } .group-data-\[nav-type\=pattern\]\:text-white\/50 { &:is(:where(.group)[data-nav-type="pattern"] *) { color: color-mix(in srgb, #fff 50%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 50%, transparent); } } } .group-data-\[nav-type\=pattern\]\:text-white\/75 { &:is(:where(.group)[data-nav-type="pattern"] *) { color: color-mix(in srgb, #fff 75%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 75%, transparent); } } } .group-data-\[sidebar-colors\=brand\]\:hidden { &:is(:where(.group)[data-sidebar-colors="brand"] *) { display: none; } } .group-data-\[sidebar-colors\=dark\]\:hidden { &:is(:where(.group)[data-sidebar-colors="dark"] *) { display: none; } } .group-data-\[sidebar-colors\=light\]\:hidden { &:is(:where(.group)[data-sidebar-colors="light"] *) { display: none; } } .group-data-\[sidebar-colors\=purple\]\:hidden { &:is(:where(.group)[data-sidebar-colors="purple"] *) { display: none; } } .group-data-\[sidebar-colors\=sky\]\:hidden { &:is(:where(.group)[data-sidebar-colors="sky"] *) { display: none; } } .group-data-\[sidebar\=icon\]\:hidden { &:is(:where(.group)[data-sidebar="icon"] *) { display: none; } } .group-data-\[sidebar\=icon\]\:w-sidebar-icon { &:is(:where(.group)[data-sidebar="icon"] *) { width: var(--spacing-sidebar-icon); } } .group-data-\[sidebar\=medium\]\:m-0 { &:is(:where(.group)[data-sidebar="medium"] *) { margin: calc(var(--spacing) * 0); } } .group-data-\[sidebar\=medium\]\:mx-3 { &:is(:where(.group)[data-sidebar="medium"] *) { margin-inline: calc(var(--spacing) * 3); } } .group-data-\[sidebar\=medium\]\:my-2 { &:is(:where(.group)[data-sidebar="medium"] *) { margin-block: calc(var(--spacing) * 2); } } .group-data-\[sidebar\=medium\]\:hidden { &:is(:where(.group)[data-sidebar="medium"] *) { display: none; } } .group-data-\[sidebar\=medium\]\:size-5 { &:is(:where(.group)[data-sidebar="medium"] *) { width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); } } .group-data-\[sidebar\=medium\]\:\!w-\[calc\(theme\(\"spacing\.sidebar-medium\"\)_-_24px\)\] { &:is(:where(.group)[data-sidebar="medium"] *) { width: calc(10rem - 24px) !important; } } .group-data-\[sidebar\=medium\]\:\!w-full { &:is(:where(.group)[data-sidebar="medium"] *) { width: 100% !important; } } .group-data-\[sidebar\=medium\]\:w-sidebar-medium { &:is(:where(.group)[data-sidebar="medium"] *) { width: var(--spacing-sidebar-medium); } } .group-data-\[sidebar\=medium\]\:flex-col { &:is(:where(.group)[data-sidebar="medium"] *) { flex-direction: column; } } .group-data-\[sidebar\=medium\]\:justify-center { &:is(:where(.group)[data-sidebar="medium"] *) { justify-content: center; } } .group-data-\[sidebar\=medium\]\:gap-3 { &:is(:where(.group)[data-sidebar="medium"] *) { gap: calc(var(--spacing) * 3); } } .group-data-\[sidebar\=medium\]\:py-3 { &:is(:where(.group)[data-sidebar="medium"] *) { padding-block: calc(var(--spacing) * 3); } } .group-data-\[sidebar\=medium\]\:text-center { &:is(:where(.group)[data-sidebar="medium"] *) { text-align: center; } } .group-data-\[sidebar\=small\]\:fixed { &:is(:where(.group)[data-sidebar="small"] *) { position: fixed; } } .group-data-\[sidebar\=small\]\:z-30 { &:is(:where(.group)[data-sidebar="small"] *) { z-index: 30; } } .group-data-\[sidebar\=small\]\:m-0 { &:is(:where(.group)[data-sidebar="small"] *) { margin: calc(var(--spacing) * 0); } } .group-data-\[sidebar\=small\]\:mx-auto { &:is(:where(.group)[data-sidebar="small"] *) { margin-inline: auto; } } .group-data-\[sidebar\=small\]\:block { &:is(:where(.group)[data-sidebar="small"] *) { display: block; } } .group-data-\[sidebar\=small\]\:hidden { &:is(:where(.group)[data-sidebar="small"] *) { display: none; } } .group-data-\[sidebar\=small\]\:inline-block { &:is(:where(.group)[data-sidebar="small"] *) { display: inline-block; } } .group-data-\[sidebar\=small\]\:size-5 { &:is(:where(.group)[data-sidebar="small"] *) { width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); } } .group-data-\[sidebar\=small\]\:\!w-\[calc\(theme\(\"spacing\.sidebar-small\"\)_-_24px\)\] { &:is(:where(.group)[data-sidebar="small"] *) { width: calc(4.6875rem - 24px) !important; } } .group-data-\[sidebar\=small\]\:w-48 { &:is(:where(.group)[data-sidebar="small"] *) { width: calc(var(--spacing) * 48); } } .group-data-\[sidebar\=small\]\:w-full { &:is(:where(.group)[data-sidebar="small"] *) { width: 100%; } } .group-data-\[sidebar\=small\]\:w-sidebar-small { &:is(:where(.group)[data-sidebar="small"] *) { width: var(--spacing-sidebar-small); } } .group-data-\[sidebar\=small\]\:bg-sidebar { &:is(:where(.group)[data-sidebar="small"] *) { background-color: var(--color-sidebar); } } .group-data-\[sidebar\=small\]\:px-0 { &:is(:where(.group)[data-sidebar="small"] *) { padding-inline: calc(var(--spacing) * 0); } } .group-data-\[sidebar\=small\]\:px-6 { &:is(:where(.group)[data-sidebar="small"] *) { padding-inline: calc(var(--spacing) * 6); } } .group-data-\[sidebar\=small\]\:py-1\.5 { &:is(:where(.group)[data-sidebar="small"] *) { padding-block: calc(var(--spacing) * 1.5); } } .group-data-\[sidebar\=small\]\:py-2 { &:is(:where(.group)[data-sidebar="small"] *) { padding-block: calc(var(--spacing) * 2); } } .group-data-\[sidebar\=small\]\:py-3 { &:is(:where(.group)[data-sidebar="small"] *) { padding-block: calc(var(--spacing) * 3); } } .group-data-\[sidebar\=small\]\:shadow-lg { &:is(:where(.group)[data-sidebar="small"] *) { --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); } } .group-data-\[nav-type\=pattern\]\:group-\[\&\.nav-sticky\]\/topbar\:\!border-primary-400 { &:is(:where(.group)[data-nav-type="pattern"] *) { &:is(:where(.group\/topbar).nav-sticky *) { border-color: var(--color-primary-400) !important; } } } .group-data-\[nav-type\=pattern\]\:group-\[\&\.nav-sticky\]\/topbar\:\!bg-primary-500 { &:is(:where(.group)[data-nav-type="pattern"] *) { &:is(:where(.group\/topbar).nav-sticky *) { background-color: var(--color-primary-500) !important; } } } .peer-checked\:border-primary-500 { &:is(:where(.peer):checked ~ *) { border-color: var(--color-primary-500); } } .peer-checked\:bg-blue-600 { &:is(:where(.peer):checked ~ *) { background-color: var(--color-blue-600); } } .peer-checked\:ring-1 { &:is(:where(.peer):checked ~ *) { --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); } } .peer-checked\:ring-primary-400 { &:is(:where(.peer):checked ~ *) { --tw-ring-color: var(--color-primary-400); } } .peer-checked\:ring-offset-2 { &:is(:where(.peer):checked ~ *) { --tw-ring-offset-width: 2px; --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } } .peer-focus\:ring-4 { &:is(:where(.peer):focus ~ *) { --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); } } .peer-focus\:ring-blue-300 { &:is(:where(.peer):focus ~ *) { --tw-ring-color: var(--color-blue-300); } } .peer-focus\:outline-none { &:is(:where(.peer):focus ~ *) { --tw-outline-style: none; outline-style: none; } } .file\:bg-gray-100 { &::file-selector-button { background-color: var(--color-gray-100); } } .file\:bg-gray-900 { &::file-selector-button { background-color: var(--color-gray-900); } } .file\:text-gray-100 { &::file-selector-button { color: var(--color-gray-100); } } .file\:text-gray-500 { &::file-selector-button { color: var(--color-gray-500); } } .placeholder\:text-gray-400 { &::placeholder { color: var(--color-gray-400); } } .placeholder\:text-slate-400 { &::placeholder { color: var(--color-slate-400); } } .before\:absolute { &::before { content: var(--tw-content); position: absolute; } } .before\:inset-y-0 { &::before { content: var(--tw-content); inset-block: calc(var(--spacing) * 0); } } .before\:top-2\.5 { &::before { content: var(--tw-content); top: calc(var(--spacing) * 2.5); } } .before\:top-3 { &::before { content: var(--tw-content); top: calc(var(--spacing) * 3); } } .before\:right-0 { &::before { content: var(--tw-content); right: calc(var(--spacing) * 0); } } .before\:z-10 { &::before { content: var(--tw-content); z-index: 10; } } .before\:hidden { &::before { content: var(--tw-content); display: none; } } .before\:size-2 { &::before { content: var(--tw-content); width: calc(var(--spacing) * 2); height: calc(var(--spacing) * 2); } } .before\:w-1\/2 { &::before { content: var(--tw-content); width: calc(1/2 * 100%); } } .before\:w-full { &::before { content: var(--tw-content); width: 100%; } } .before\:rounded-full { &::before { content: var(--tw-content); border-radius: calc(infinity * 1px); } } .before\:border-b { &::before { content: var(--tw-content); border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } } .before\:border-dashed { &::before { content: var(--tw-content); --tw-border-style: dashed; border-style: dashed; } } .before\:border-gray-200 { &::before { content: var(--tw-content); border-color: var(--color-gray-200); } } .before\:bg-effect { &::before { content: var(--tw-content); background-color: var(--color-effect); } } .before\:bg-gray-950 { &::before { content: var(--tw-content); background-color: var(--color-gray-950); } } .before\:outline-1 { &::before { content: var(--tw-content); outline-style: var(--tw-outline-style); outline-width: 1px; } } .before\:outline-sidebar-text { &::before { content: var(--tw-content); outline-color: var(--color-sidebar-text); } } .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; } } .before\:ease-linear { &::before { content: var(--tw-content); --tw-ease: linear; transition-timing-function: linear; } } .before\:outline-dashed { &::before { content: var(--tw-content); --tw-outline-style: dashed; outline-style: dashed; } } .\*\:before\:absolute { :is(& > *) { &::before { content: var(--tw-content); position: absolute; } } } .\*\:before\:top-2 { :is(& > *) { &::before { content: var(--tw-content); top: calc(var(--spacing) * 2); } } } .\*\:before\:-bottom-2 { :is(& > *) { &::before { content: var(--tw-content); bottom: calc(var(--spacing) * -2); } } } .\*\:before\:w-0\.5 { :is(& > *) { &::before { content: var(--tw-content); width: calc(var(--spacing) * 0.5); } } } .\*\:before\:bg-gray-200 { :is(& > *) { &::before { content: var(--tw-content); background-color: var(--color-gray-200); } } } .\*\:before\:font-remix { :is(& > *) { &::before { content: var(--tw-content); font-family: var(--font-remix); } } } .\*\:before\:text-gray-500 { :is(& > *) { &::before { content: var(--tw-content); color: var(--color-gray-500); } } } .\*\:before\:content-\[\'\\EA6E\'\] { :is(& > *) { &::before { content: var(--tw-content); --tw-content: '\EA6E'; content: var(--tw-content); } } } .group-data-\[layout\=horizontal\]\:before\:hidden { &:is(:where(.group)[data-layout="horizontal"] *) { &::before { content: var(--tw-content); display: none; } } } .group-data-\[nav-type\=pattern\]\:before\:text-white\/50 { &:is(:where(.group)[data-nav-type="pattern"] *) { &::before { content: var(--tw-content); color: color-mix(in srgb, #fff 50%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 50%, transparent); } } } } .group-data-\[sidebar\=medium\]\:before\:hidden { &:is(:where(.group)[data-sidebar="medium"] *) { &::before { content: var(--tw-content); display: none; } } } .group-data-\[sidebar\=small\]\:before\:hidden { &:is(:where(.group)[data-sidebar="small"] *) { &::before { content: var(--tw-content); display: none; } } } .after\:absolute { &::after { content: var(--tw-content); position: absolute; } } .after\:inset-x-0 { &::after { content: var(--tw-content); inset-inline: calc(var(--spacing) * 0); } } .after\:start-\[2px\] { &::after { content: var(--tw-content); inset-inline-start: 2px; } } .after\:top-0 { &::after { content: var(--tw-content); top: calc(var(--spacing) * 0); } } .after\:top-\[2px\] { &::after { content: var(--tw-content); top: 2px; } } .after\:bottom-0 { &::after { content: var(--tw-content); bottom: calc(var(--spacing) * 0); } } .after\:bottom-auto { &::after { content: var(--tw-content); bottom: auto; } } .after\:mx-auto { &::after { content: var(--tw-content); margin-inline: auto; } } .after\:size-1\.5 { &::after { content: var(--tw-content); width: calc(var(--spacing) * 1.5); height: calc(var(--spacing) * 1.5); } } .after\:h-5 { &::after { content: var(--tw-content); height: calc(var(--spacing) * 5); } } .after\:h-\[1px\] { &::after { content: var(--tw-content); height: 1px; } } .after\:h-\[2px\] { &::after { content: var(--tw-content); height: 2px; } } .after\:w-0 { &::after { content: var(--tw-content); width: calc(var(--spacing) * 0); } } .after\:w-5 { &::after { content: var(--tw-content); width: calc(var(--spacing) * 5); } } .after\:rounded-full { &::after { content: var(--tw-content); border-radius: calc(infinity * 1px); } } .after\:border { &::after { content: var(--tw-content); border-style: var(--tw-border-style); border-width: 1px; } } .after\:border-gray-300 { &::after { content: var(--tw-content); border-color: var(--color-gray-300); } } .after\:bg-primary-500 { &::after { content: var(--tw-content); background-color: var(--color-primary-500); } } .after\:bg-white { &::after { content: var(--tw-content); background-color: var(--color-white); } } .after\:font-semibold { &::after { content: var(--tw-content); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } } .after\:opacity-0 { &::after { content: var(--tw-content); opacity: 0%; } } .after\:transition-all { &::after { 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)); } } .after\:duration-200 { &::after { content: var(--tw-content); --tw-duration: 200ms; transition-duration: 200ms; } } .after\:content-\[\"N\"\] { &::after { content: var(--tw-content); --tw-content: "N"; content: var(--tw-content); } } .after\:content-\[\'\'\] { &::after { content: var(--tw-content); --tw-content: ''; content: var(--tw-content); } } .\*\:after\:absolute { :is(& > *) { &::after { content: var(--tw-content); position: absolute; } } } .\*\:after\:top-2 { :is(& > *) { &::after { content: var(--tw-content); top: calc(var(--spacing) * 2); } } } .\*\:after\:size-1\.5 { :is(& > *) { &::after { content: var(--tw-content); width: calc(var(--spacing) * 1.5); height: calc(var(--spacing) * 1.5); } } } .\*\:after\:rounded-full { :is(& > *) { &::after { content: var(--tw-content); border-radius: calc(infinity * 1px); } } } .\*\:after\:rounded-xs { :is(& > *) { &::after { content: var(--tw-content); border-radius: var(--radius-xs); } } } .\*\:after\:bg-gray-300 { :is(& > *) { &::after { content: var(--tw-content); background-color: var(--color-gray-300); } } } .peer-checked\:after\:translate-x-full { &:is(:where(.peer):checked ~ *) { &::after { content: var(--tw-content); --tw-translate-x: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); } } } .peer-checked\:after\:border-white { &:is(:where(.peer):checked ~ *) { &::after { content: var(--tw-content); border-color: var(--color-white); } } } .peer-checked\:after\:content-\[\"Y\"\] { &:is(:where(.peer):checked ~ *) { &::after { content: var(--tw-content); --tw-content: "Y"; content: var(--tw-content); } } } .first\:rounded-t-md { &:first-child { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); } } .first\:\!pl-5 { &:first-child { padding-left: calc(var(--spacing) * 5) !important; } } .last\:rounded-b-md { &:last-child { border-bottom-right-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } } .last\:\!pr-5 { &:last-child { padding-right: calc(var(--spacing) * 5) !important; } } .last\:pb-0 { &:last-child { padding-bottom: calc(var(--spacing) * 0); } } .last\:before\:hidden { &:last-child { &::before { content: var(--tw-content); display: none; } } } .odd\:bg-gray-100 { &:nth-child(odd) { background-color: var(--color-gray-100); } } .odd\:bg-white { &:nth-child(odd) { background-color: var(--color-white); } } .even\:bg-gray-100 { &:nth-child(even) { background-color: var(--color-gray-100); } } .even\:bg-white { &:nth-child(even) { background-color: var(--color-white); } } .first-of-type\:rounded-t-md { &:first-of-type { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); } } .last-of-type\:rounded-b-md { &:last-of-type { border-bottom-right-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } } .hover\:-translate-y-0\.5 { &:hover { @media (hover: hover) { --tw-translate-y: calc(var(--spacing) * -0.5); translate: var(--tw-translate-x) var(--tw-translate-y); } } } .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-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-\[1\.02\] { &:hover { @media (hover: hover) { scale: 1.02; } } } .hover\:border-emerald-400 { &:hover { @media (hover: hover) { border-color: var(--color-emerald-400); } } } .hover\:border-gray-300 { &:hover { @media (hover: hover) { border-color: var(--color-gray-300); } } } .hover\:border-gray-400 { &:hover { @media (hover: hover) { border-color: var(--color-gray-400); } } } .hover\:border-orange-400 { &:hover { @media (hover: hover) { border-color: var(--color-orange-400); } } } .hover\:\!bg-gray-200\/50 { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, oklch(0.928 0.006 264.531) 50%, transparent) !important; @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-gray-200) 50%, transparent) !important; } } } } .hover\:bg-amber-100 { &:hover { @media (hover: hover) { background-color: var(--color-amber-100); } } } .hover\:bg-blue-50 { &:hover { @media (hover: hover) { background-color: var(--color-blue-50); } } } .hover\:bg-blue-100 { &:hover { @media (hover: hover) { background-color: var(--color-blue-100); } } } .hover\:bg-blue-500 { &:hover { @media (hover: hover) { background-color: var(--color-blue-500); } } } .hover\:bg-blue-600 { &:hover { @media (hover: hover) { background-color: var(--color-blue-600); } } } .hover\:bg-blue-700 { &:hover { @media (hover: hover) { background-color: var(--color-blue-700); } } } .hover\:bg-gray-50 { &:hover { @media (hover: hover) { background-color: var(--color-gray-50); } } } .hover\:bg-gray-100 { &:hover { @media (hover: hover) { background-color: var(--color-gray-100); } } } .hover\:bg-gray-200 { &:hover { @media (hover: hover) { background-color: var(--color-gray-200); } } } .hover\:bg-green-100 { &:hover { @media (hover: hover) { background-color: var(--color-green-100); } } } .hover\:bg-green-500 { &:hover { @media (hover: hover) { background-color: var(--color-green-500); } } } .hover\:bg-green-600 { &:hover { @media (hover: hover) { background-color: var(--color-green-600); } } } .hover\:bg-green-700 { &:hover { @media (hover: hover) { background-color: var(--color-green-700); } } } .hover\:bg-orange-50 { &:hover { @media (hover: hover) { background-color: var(--color-orange-50); } } } .hover\:bg-primary-100 { &:hover { @media (hover: hover) { background-color: var(--color-primary-100); } } } .hover\:bg-primary-500 { &:hover { @media (hover: hover) { background-color: var(--color-primary-500); } } } .hover\:bg-primary-600 { &:hover { @media (hover: hover) { background-color: var(--color-primary-600); } } } .hover\:bg-purple-50 { &:hover { @media (hover: hover) { background-color: var(--color-purple-50); } } } .hover\:bg-purple-500 { &:hover { @media (hover: hover) { background-color: var(--color-purple-500); } } } .hover\:bg-red-50 { &:hover { @media (hover: hover) { background-color: var(--color-red-50); } } } .hover\:bg-sky-500 { &:hover { @media (hover: hover) { background-color: var(--color-sky-500); } } } .hover\:bg-sky-600 { &:hover { @media (hover: hover) { background-color: var(--color-sky-600); } } } .hover\:bg-white { &:hover { @media (hover: hover) { background-color: var(--color-white); } } } .hover\:bg-white\/15 { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 15%, transparent); } } } } .hover\:bg-white\/50 { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 50%, transparent); } } } } .hover\:bg-white\/60 { &:hover { @media (hover: hover) { 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); } } } } .hover\:from-indigo-700 { &:hover { @media (hover: hover) { --tw-gradient-from: var(--color-indigo-700); --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\:via-purple-700 { &:hover { @media (hover: hover) { --tw-gradient-via: var(--color-purple-700); --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); } } } .hover\:to-pink-700 { &:hover { @media (hover: hover) { --tw-gradient-to: var(--color-pink-700); --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\:text-amber-700 { &:hover { @media (hover: hover) { color: var(--color-amber-700); } } } .hover\:text-black { &:hover { @media (hover: hover) { color: var(--color-black); } } } .hover\:text-blue-500 { &:hover { @media (hover: hover) { color: var(--color-blue-500); } } } .hover\:text-blue-600 { &:hover { @media (hover: hover) { color: var(--color-blue-600); } } } .hover\:text-blue-700 { &:hover { @media (hover: hover) { color: var(--color-blue-700); } } } .hover\:text-gray-800 { &:hover { @media (hover: hover) { color: var(--color-gray-800); } } } .hover\:text-gray-900 { &:hover { @media (hover: hover) { color: var(--color-gray-900); } } } .hover\:text-green-500 { &:hover { @media (hover: hover) { color: var(--color-green-500); } } } .hover\:text-green-700 { &:hover { @media (hover: hover) { color: var(--color-green-700); } } } .hover\:text-indigo-500 { &:hover { @media (hover: hover) { color: var(--color-indigo-500); } } } .hover\:text-indigo-700 { &:hover { @media (hover: hover) { color: var(--color-indigo-700); } } } .hover\:text-orange-700 { &:hover { @media (hover: hover) { color: var(--color-orange-700); } } } .hover\:text-primary-500 { &:hover { @media (hover: hover) { color: var(--color-primary-500); } } } .hover\:text-purple-500 { &:hover { @media (hover: hover) { color: var(--color-purple-500); } } } .hover\:text-purple-700 { &:hover { @media (hover: hover) { color: var(--color-purple-700); } } } .hover\:text-red-500 { &:hover { @media (hover: hover) { color: var(--color-red-500); } } } .hover\:text-red-600 { &:hover { @media (hover: hover) { color: var(--color-red-600); } } } .hover\:text-red-700 { &:hover { @media (hover: hover) { color: var(--color-red-700); } } } .hover\:text-sidebar-text-hover { &:hover { @media (hover: hover) { color: var(--color-sidebar-text-hover); } } } .hover\:text-sky-500 { &:hover { @media (hover: hover) { color: var(--color-sky-500); } } } .hover\:text-white { &:hover { @media (hover: hover) { color: var(--color-white); } } } .hover\:text-yellow-500 { &:hover { @media (hover: hover) { color: var(--color-yellow-500); } } } .hover\:opacity-100 { &:hover { @media (hover: hover) { opacity: 100%; } } } .hover\:shadow-2xl { &:hover { @media (hover: hover) { --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); } } } .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\:shadow-xl { &: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); } } } .hover\:shadow-amber-500\/25 { &:hover { @media (hover: hover) { --tw-shadow-color: color-mix(in srgb, oklch(0.769 0.188 70.08) 25%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-amber-500) 25%, transparent) var(--tw-shadow-alpha), transparent); } } } } .hover\:shadow-amber-500\/40 { &:hover { @media (hover: hover) { --tw-shadow-color: color-mix(in srgb, oklch(0.769 0.188 70.08) 40%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-amber-500) 40%, transparent) var(--tw-shadow-alpha), transparent); } } } } .hover\:shadow-blue-500\/25 { &:hover { @media (hover: hover) { --tw-shadow-color: color-mix(in srgb, oklch(0.623 0.214 259.815) 25%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 25%, transparent) var(--tw-shadow-alpha), transparent); } } } } .hover\:shadow-blue-500\/40 { &:hover { @media (hover: hover) { --tw-shadow-color: color-mix(in srgb, oklch(0.623 0.214 259.815) 40%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 40%, transparent) var(--tw-shadow-alpha), transparent); } } } } .hover\:shadow-emerald-500\/20 { &:hover { @media (hover: hover) { --tw-shadow-color: color-mix(in srgb, oklch(0.696 0.17 162.48) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-emerald-500) 20%, transparent) var(--tw-shadow-alpha), transparent); } } } } .hover\:shadow-emerald-500\/25 { &:hover { @media (hover: hover) { --tw-shadow-color: color-mix(in srgb, oklch(0.696 0.17 162.48) 25%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-emerald-500) 25%, transparent) var(--tw-shadow-alpha), transparent); } } } } .hover\:shadow-emerald-500\/40 { &:hover { @media (hover: hover) { --tw-shadow-color: color-mix(in srgb, oklch(0.696 0.17 162.48) 40%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-emerald-500) 40%, transparent) var(--tw-shadow-alpha), transparent); } } } } .hover\:shadow-indigo-500\/60 { &:hover { @media (hover: hover) { --tw-shadow-color: color-mix(in srgb, oklch(0.585 0.233 277.117) 60%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-indigo-500) 60%, transparent) var(--tw-shadow-alpha), transparent); } } } } .hover\:shadow-orange-500\/20 { &:hover { @media (hover: hover) { --tw-shadow-color: color-mix(in srgb, oklch(0.705 0.213 47.604) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-orange-500) 20%, transparent) var(--tw-shadow-alpha), transparent); } } } } .hover\:shadow-orange-500\/40 { &:hover { @media (hover: hover) { --tw-shadow-color: color-mix(in srgb, oklch(0.705 0.213 47.604) 40%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-orange-500) 40%, transparent) var(--tw-shadow-alpha), transparent); } } } } .hover\:shadow-purple-500\/25 { &:hover { @media (hover: hover) { --tw-shadow-color: color-mix(in srgb, oklch(0.627 0.265 303.9) 25%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-purple-500) 25%, transparent) var(--tw-shadow-alpha), transparent); } } } } .hover\:shadow-purple-500\/40 { &:hover { @media (hover: hover) { --tw-shadow-color: color-mix(in srgb, oklch(0.627 0.265 303.9) 40%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-purple-500) 40%, transparent) var(--tw-shadow-alpha), transparent); } } } } .hover\:ring-gray-300 { &:hover { @media (hover: hover) { --tw-ring-color: var(--color-gray-300); } } } .hover\:ring-orange-200 { &:hover { @media (hover: hover) { --tw-ring-color: var(--color-orange-200); } } } .hover\:ring-purple-200 { &:hover { @media (hover: hover) { --tw-ring-color: var(--color-purple-200); } } } .group-data-\[nav-type\=pattern\]\:hover\:text-white { &:is(:where(.group)[data-nav-type="pattern"] *) { &:hover { @media (hover: hover) { color: var(--color-white); } } } } .hover\:before\:animate-spin { &:hover { @media (hover: hover) { &::before { content: var(--tw-content); animation: var(--animate-spin); } } } } .hover\:before\:outline-sidebar-text-hover { &:hover { @media (hover: hover) { &::before { content: var(--tw-content); outline-color: var(--color-sidebar-text-hover); } } } } .hover\:after\:bottom-3 { &:hover { @media (hover: hover) { &::after { content: var(--tw-content); bottom: calc(var(--spacing) * 3); } } } } .hover\:after\:w-full { &:hover { @media (hover: hover) { &::after { content: var(--tw-content); width: 100%; } } } } .hover\:after\:opacity-100 { &:hover { @media (hover: hover) { &::after { content: var(--tw-content); opacity: 100%; } } } } .focus\:z-20 { &:focus { z-index: 20; } } .focus\:border-gray-200 { &:focus { border-color: var(--color-gray-200); } } .focus\:border-primary-500 { &:focus { border-color: var(--color-primary-500); } } .focus\:border-transparent { &:focus { border-color: transparent; } } .focus\:text-white { &:focus { color: var(--color-white); } } .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\:ring-0 { &:focus { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + 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); } } .focus\:ring-1 { &:focus { --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); } } .focus\:ring-2 { &:focus { --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); } } .focus\:ring-blue-500 { &:focus { --tw-ring-color: var(--color-blue-500); } } .focus\:ring-blue-600 { &:focus { --tw-ring-color: var(--color-blue-600); } } .focus\:ring-green-500 { &:focus { --tw-ring-color: var(--color-green-500); } } .focus\:ring-indigo-500 { &:focus { --tw-ring-color: var(--color-indigo-500); } } .focus\:ring-primary-500 { &:focus { --tw-ring-color: var(--color-primary-500); } } .focus\:ring-red-500 { &:focus { --tw-ring-color: var(--color-red-500); } } .focus\:ring-offset-2 { &:focus { --tw-ring-offset-width: 2px; --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } } .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-offset-0 { &:focus { outline-offset: 0px; } } .focus\:outline-none { &:focus { --tw-outline-style: none; outline-style: none; } } .focus\:ring-inset { &:focus { --tw-ring-inset: inset; } } .focus\:checked\:ring-1 { &:focus { &:checked { --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); } } } .focus\:checked\:ring-offset-1 { &:focus { &:checked { --tw-ring-offset-width: 1px; --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } } } .focus\:checked\:ring-offset-white { &:focus { &:checked { --tw-ring-offset-color: var(--color-white); } } } .focus-visible\:outline { &:focus-visible { outline-style: var(--tw-outline-style); outline-width: 1px; } } .focus-visible\:outline-2 { &:focus-visible { outline-style: var(--tw-outline-style); outline-width: 2px; } } .focus-visible\:outline-offset-2 { &:focus-visible { outline-offset: 2px; } } .focus-visible\:outline-blue-600 { &:focus-visible { outline-color: var(--color-blue-600); } } .focus-visible\:outline-blue-700 { &:focus-visible { outline-color: var(--color-blue-700); } } .focus-visible\:outline-green-700 { &:focus-visible { outline-color: var(--color-green-700); } } .focus-visible\:outline-sky-700 { &:focus-visible { outline-color: var(--color-sky-700); } } .active\:translate-y-0 { &:active { --tw-translate-y: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); } } .active\:scale-95 { &:active { --tw-scale-x: 95%; --tw-scale-y: 95%; --tw-scale-z: 95%; scale: var(--tw-scale-x) var(--tw-scale-y); } } .active\:scale-\[0\.98\] { &:active { scale: 0.98; } } .active\:cursor-grabbing { &:active { cursor: grabbing; } } .active\:bg-blue-100 { &:active { background-color: var(--color-blue-100); } } .active\:bg-gray-100 { &:active { background-color: var(--color-gray-100); } } .disabled\:cursor-none { &:disabled { cursor: none; } } .disabled\:border-gray-200 { &:disabled { border-color: var(--color-gray-200); } } .disabled\:border-slate-300 { &:disabled { border-color: var(--color-slate-300); } } .disabled\:bg-gray-100 { &:disabled { background-color: var(--color-gray-100); } } .disabled\:bg-slate-100 { &:disabled { background-color: var(--color-slate-100); } } .disabled\:text-gray-500 { &:disabled { color: var(--color-gray-500); } } .disabled\:text-slate-500 { &:disabled { color: var(--color-slate-500); } } .disabled\:opacity-50 { &:disabled { opacity: 50%; } } .has-\[\:checked\]\:border-blue-500 { &:has(*:is(:checked)) { border-color: var(--color-blue-500); } } .has-\[\:checked\]\:border-green-500 { &:has(*:is(:checked)) { border-color: var(--color-green-500); } } .has-\[\:checked\]\:border-red-500 { &:has(*:is(:checked)) { border-color: var(--color-red-500); } } .has-\[\:checked\]\:bg-blue-50 { &:has(*:is(:checked)) { background-color: var(--color-blue-50); } } .has-\[\:checked\]\:bg-green-50 { &:has(*:is(:checked)) { background-color: var(--color-green-50); } } .has-\[\:checked\]\:bg-red-50 { &:has(*:is(:checked)) { background-color: var(--color-red-50); } } .sm\:mx-0 { @media (width >= 40rem) { margin-inline: calc(var(--spacing) * 0); } } .sm\:my-8 { @media (width >= 40rem) { margin-block: calc(var(--spacing) * 8); } } .sm\:mt-0 { @media (width >= 40rem) { margin-top: calc(var(--spacing) * 0); } } .sm\:ml-3 { @media (width >= 40rem) { margin-left: calc(var(--spacing) * 3); } } .sm\:ml-4 { @media (width >= 40rem) { margin-left: calc(var(--spacing) * 4); } } .sm\:block { @media (width >= 40rem) { display: block; } } .sm\:flex { @media (width >= 40rem) { display: flex; } } .sm\:hidden { @media (width >= 40rem) { display: none; } } .sm\:inline { @media (width >= 40rem) { display: inline; } } .sm\:h-10 { @media (width >= 40rem) { height: calc(var(--spacing) * 10); } } .sm\:w-10 { @media (width >= 40rem) { width: calc(var(--spacing) * 10); } } .sm\:w-72 { @media (width >= 40rem) { width: calc(var(--spacing) * 72); } } .sm\:w-auto { @media (width >= 40rem) { width: auto; } } .sm\:w-full { @media (width >= 40rem) { width: 100%; } } .sm\:max-w-lg { @media (width >= 40rem) { max-width: var(--container-lg); } } .sm\:flex-1 { @media (width >= 40rem) { flex: 1; } } .sm\:translate-y-0 { @media (width >= 40rem) { --tw-translate-y: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); } } .sm\:scale-95 { @media (width >= 40rem) { --tw-scale-x: 95%; --tw-scale-y: 95%; --tw-scale-z: 95%; scale: var(--tw-scale-x) var(--tw-scale-y); } } .sm\:scale-100 { @media (width >= 40rem) { --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); } } .sm\:grid-cols-2 { @media (width >= 40rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .sm\:flex-row { @media (width >= 40rem) { flex-direction: row; } } .sm\:flex-row-reverse { @media (width >= 40rem) { flex-direction: row-reverse; } } .sm\:items-center { @media (width >= 40rem) { align-items: center; } } .sm\:items-start { @media (width >= 40rem) { align-items: flex-start; } } .sm\:justify-between { @media (width >= 40rem) { justify-content: space-between; } } .sm\:rounded-lg { @media (width >= 40rem) { border-radius: var(--radius-lg); } } .sm\:p-0 { @media (width >= 40rem) { padding: calc(var(--spacing) * 0); } } .sm\:p-2 { @media (width >= 40rem) { padding: calc(var(--spacing) * 2); } } .sm\:p-6 { @media (width >= 40rem) { padding: calc(var(--spacing) * 6); } } .sm\:p-10 { @media (width >= 40rem) { padding: calc(var(--spacing) * 10); } } .sm\:px-6 { @media (width >= 40rem) { padding-inline: calc(var(--spacing) * 6); } } .sm\:pb-4 { @media (width >= 40rem) { padding-bottom: calc(var(--spacing) * 4); } } .sm\:text-left { @media (width >= 40rem) { text-align: left; } } .sm\:text-sm { @media (width >= 40rem) { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .sm\:leading-6 { @media (width >= 40rem) { --tw-leading: calc(var(--spacing) * 6); line-height: calc(var(--spacing) * 6); } } .md\:col-span-2 { @media (width >= 48rem) { grid-column: span 2 / span 2; } } .md\:col-span-6 { @media (width >= 48rem) { grid-column: span 6 / span 6; } } .md\:col-start-2 { @media (width >= 48rem) { grid-column-start: 2; } } .md\:mx-12 { @media (width >= 48rem) { margin-inline: calc(var(--spacing) * 12); } } .md\:mb-0 { @media (width >= 48rem) { margin-bottom: calc(var(--spacing) * 0); } } .md\:\!w-\[20rem\] { @media (width >= 48rem) { width: 20rem !important; } } .md\:\!w-\[26rem\] { @media (width >= 48rem) { width: 26rem !important; } } .md\:\!w-\[30rem\] { @media (width >= 48rem) { width: 30rem !important; } } .md\:w-1\/3 { @media (width >= 48rem) { width: calc(1/3 * 100%); } } .md\:w-2\/3 { @media (width >= 48rem) { width: calc(2/3 * 100%); } } .md\:w-80 { @media (width >= 48rem) { width: calc(var(--spacing) * 80); } } .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\:flex-row { @media (width >= 48rem) { flex-direction: row; } } .md\:items-center { @media (width >= 48rem) { align-items: center; } } .md\:justify-between { @media (width >= 48rem) { justify-content: space-between; } } .md\:justify-self-end { @media (width >= 48rem) { justify-self: flex-end; } } .md\:justify-self-start { @media (width >= 48rem) { justify-self: flex-start; } } .md\:p-4 { @media (width >= 48rem) { padding: calc(var(--spacing) * 4); } } .md\:p-9 { @media (width >= 48rem) { padding: calc(var(--spacing) * 9); } } .md\:p-10 { @media (width >= 48rem) { padding: calc(var(--spacing) * 10); } } .md\:p-12 { @media (width >= 48rem) { padding: calc(var(--spacing) * 12); } } .md\:py-12 { @media (width >= 48rem) { padding-block: calc(var(--spacing) * 12); } } .md\:text-4xl { @media (width >= 48rem) { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } } .md\:leading-tight { @media (width >= 48rem) { --tw-leading: var(--leading-tight); line-height: var(--leading-tight); } } .md\:group-data-\[layout\=default\]\:w-sidebar { @media (width >= 48rem) { &:is(:where(.group)[data-layout="default"] *) { width: var(--spacing-sidebar); } } } .group-data-\[layout\=horizontal\]\:md\:fixed { &:is(:where(.group)[data-layout="horizontal"] *) { @media (width >= 48rem) { position: fixed; } } } .group-data-\[layout\=horizontal\]\:md\:flex { &:is(:where(.group)[data-layout="horizontal"] *) { @media (width >= 48rem) { display: flex; } } } .group-data-\[layout\=horizontal\]\:md\:grid { &:is(:where(.group)[data-layout="horizontal"] *) { @media (width >= 48rem) { display: grid; } } } .group-data-\[layout\=horizontal\]\:md\:h-auto { &:is(:where(.group)[data-layout="horizontal"] *) { @media (width >= 48rem) { height: auto; } } } .group-data-\[layout\=horizontal\]\:md\:max-h-\[calc\(100vh_-_10rem\)\] { &:is(:where(.group)[data-layout="horizontal"] *) { @media (width >= 48rem) { max-height: calc(100vh - 10rem); } } } .group-data-\[layout\=horizontal\]\:md\:w-40 { &:is(:where(.group)[data-layout="horizontal"] *) { @media (width >= 48rem) { width: calc(var(--spacing) * 40); } } } .group-data-\[layout\=horizontal\]\:md\:w-96 { &:is(:where(.group)[data-layout="horizontal"] *) { @media (width >= 48rem) { width: calc(var(--spacing) * 96); } } } .group-data-\[layout\=horizontal\]\:md\:grid-cols-2 { &:is(:where(.group)[data-layout="horizontal"] *) { @media (width >= 48rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } } .group-data-\[layout\=horizontal\]\:md\:p-4 { &:is(:where(.group)[data-layout="horizontal"] *) { @media (width >= 48rem) { padding: calc(var(--spacing) * 4); } } } .group-data-\[layout\=horizontal\]\:md\:py-2 { &:is(:where(.group)[data-layout="horizontal"] *) { @media (width >= 48rem) { padding-block: calc(var(--spacing) * 2); } } } .group-data-\[layout\=horizontal\]\:md\:shadow-sm { &:is(:where(.group)[data-layout="horizontal"] *) { @media (width >= 48rem) { --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); } } } .lg\:top-0 { @media (width >= 64rem) { top: calc(var(--spacing) * 0); } } .lg\:top-topbar { @media (width >= 64rem) { top: var(--spacing-topbar); } } .lg\:z-\[1002\] { @media (width >= 64rem) { z-index: 1002; } } .lg\:col-span-6 { @media (width >= 64rem) { grid-column: span 6 / span 6; } } .lg\:block { @media (width >= 64rem) { display: block; } } .lg\:flex { @media (width >= 64rem) { display: flex; } } .lg\:hidden { @media (width >= 64rem) { display: none; } } .lg\:min-h-screen { @media (width >= 64rem) { min-height: 100vh; } } .lg\:\!w-\[40rem\] { @media (width >= 64rem) { width: 40rem !important; } } .lg\:\!w-\[52rem\] { @media (width >= 64rem) { width: 52rem !important; } } .lg\:w-1\/2 { @media (width >= 64rem) { width: calc(1/2 * 100%); } } .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\:flex-row { @media (width >= 64rem) { flex-direction: row; } } .lg\:flex-wrap { @media (width >= 64rem) { flex-wrap: wrap; } } .lg\:justify-end { @media (width >= 64rem) { justify-content: flex-end; } } .lg\:px-8 { @media (width >= 64rem) { padding-inline: calc(var(--spacing) * 8); } } .group-data-\[layout\=horizontal\]\:lg\:hidden { &:is(:where(.group)[data-layout="horizontal"] *) { @media (width >= 64rem) { display: none; } } } .group-data-\[layout\=horizontal\]\:lg\:pt-\[calc\(theme\(\"spacing\.topbar\"\)_\*_1\.9\)\] { &:is(:where(.group)[data-layout="horizontal"] *) { @media (width >= 64rem) { padding-top: calc(0rem * 1.9); } } } .xl\:absolute { @media (width >= 80rem) { position: absolute; } } .xl\:relative { @media (width >= 80rem) { position: relative; } } .xl\:top-\[315px\] { @media (width >= 80rem) { top: 315px; } } .xl\:top-auto { @media (width >= 80rem) { top: auto; } } .xl\:left-\[115px\] { @media (width >= 80rem) { left: 115px; } } .xl\:col-span-8 { @media (width >= 80rem) { grid-column: span 8 / span 8; } } .xl\:col-start-3 { @media (width >= 80rem) { grid-column-start: 3; } } .xl\:mx-28 { @media (width >= 80rem) { margin-inline: calc(var(--spacing) * 28); } } .xl\:mt-0 { @media (width >= 80rem) { margin-top: calc(var(--spacing) * 0); } } .xl\:block { @media (width >= 80rem) { display: block; } } .xl\:\!w-\[64rem\] { @media (width >= 80rem) { width: 64rem !important; } } .xl\:w-2\/5 { @media (width >= 80rem) { width: calc(2/5 * 100%); } } .xl\:w-3\/5 { @media (width >= 80rem) { width: calc(3/5 * 100%); } } .xl\:scale-110 { @media (width >= 80rem) { --tw-scale-x: 110%; --tw-scale-y: 110%; --tw-scale-z: 110%; scale: var(--tw-scale-x) var(--tw-scale-y); } } .xl\:grid-cols-4 { @media (width >= 80rem) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .xl\:bg-transparent { @media (width >= 80rem) { background-color: transparent; } } .xl\:p-12 { @media (width >= 80rem) { padding: calc(var(--spacing) * 12); } } .xl\:px-28 { @media (width >= 80rem) { padding-inline: calc(var(--spacing) * 28); } } .xl\:text-5xl { @media (width >= 80rem) { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); } } .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); } } .\32 xl\:col-span-8 { @media (width >= 96rem) { grid-column: span 8 / span 8; } } .\32 xl\:col-start-3 { @media (width >= 96rem) { grid-column-start: 3; } } .ltr\:right-0 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { right: calc(var(--spacing) * 0); } } .ltr\:right-3 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { right: calc(var(--spacing) * 3); } } .ltr\:right-5 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { right: calc(var(--spacing) * 5); } } .ltr\:left-0 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { left: calc(var(--spacing) * 0); } } .ltr\:left-1 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { left: calc(var(--spacing) * 1); } } .ltr\:left-3 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { left: calc(var(--spacing) * 3); } } .ltr\:left-auto { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { left: auto; } } .ltr\:mr-1 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { margin-right: calc(var(--spacing) * 1); } } .ltr\:mr-2 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { margin-right: calc(var(--spacing) * 2); } } .ltr\:mr-auto { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { margin-right: auto; } } .ltr\:ml-0 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { margin-left: calc(var(--spacing) * 0); } } .ltr\:ml-2 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { margin-left: calc(var(--spacing) * 2); } } .ltr\:ml-3 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { margin-left: calc(var(--spacing) * 3); } } .ltr\:ml-6 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { margin-left: calc(var(--spacing) * 6); } } .ltr\:ml-auto { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { margin-left: auto; } } .ltr\:rounded-l-md { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } } .ltr\:rounded-r-md { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } } .ltr\:rounded-r-none { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { border-top-right-radius: 0; border-bottom-right-radius: 0; } } .ltr\:border-r { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { border-right-style: var(--tw-border-style); border-right-width: 1px; } } .ltr\:border-r-0 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { border-right-style: var(--tw-border-style); border-right-width: 0px; } } .ltr\:border-l-0 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { border-left-style: var(--tw-border-style); border-left-width: 0px; } } .ltr\:\!border-l-transparent { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { border-left-color: transparent !important; } } .ltr\:bg-gradient-to-r { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { --tw-gradient-position: to right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } } .ltr\:pr-4 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { padding-right: calc(var(--spacing) * 4); } } .ltr\:pr-8 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { padding-right: calc(var(--spacing) * 8); } } .ltr\:pr-10 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { padding-right: calc(var(--spacing) * 10); } } .ltr\:pl-3 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { padding-left: calc(var(--spacing) * 3); } } .ltr\:pl-4 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { padding-left: calc(var(--spacing) * 4); } } .ltr\:pl-5 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { padding-left: calc(var(--spacing) * 5); } } .ltr\:pl-9 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { padding-left: calc(var(--spacing) * 9); } } .ltr\:pl-16 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { padding-left: calc(var(--spacing) * 16); } } .ltr\:text-left { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { text-align: left; } } .ltr\:\*\:pr-6 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { :is(& > *) { padding-right: calc(var(--spacing) * 6); } } } .ltr\:\*\:pl-5 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { :is(& > *) { padding-left: calc(var(--spacing) * 5); } } } .ltr\:group-data-\[layout\=boxed\]\:left-8 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="boxed"] *) { left: calc(var(--spacing) * 8); } } } .ltr\:group-data-\[layout\=boxed\]\:rounded-r-md { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="boxed"] *) { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } } } .ltr\:group-data-\[layout\=boxed\]\:rounded-bl-md { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="boxed"] *) { border-bottom-left-radius: var(--radius-md); } } } .ltr\:group-data-\[layout\=default\]\:ml-2 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="default"] *) { margin-left: calc(var(--spacing) * 2); } } } .ltr\:group-data-\[layout\=dualcolumn\]\:left-20 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="dualcolumn"] *) { left: calc(var(--spacing) * 20); } } } .group-data-\[layout\=horizontal\]\:ltr\:right-0 { &:is(:where(.group)[data-layout="horizontal"] *) { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { right: calc(var(--spacing) * 0); } } } .ltr\:group-data-\[layout\=horizontal\]\:left-0 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="horizontal"] *) { left: calc(var(--spacing) * 0); } } } .ltr\:group-data-\[layout\=horizontal\]\:ml-0 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="horizontal"] *) { margin-left: calc(var(--spacing) * 0); } } } .ltr\:group-data-\[layout\=semibox\]\:right-3 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="semibox"] *) { right: calc(var(--spacing) * 3); } } } .ltr\:group-data-\[layout\=semibox\]\:left-3 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="semibox"] *) { left: calc(var(--spacing) * 3); } } } .ltr\:group-data-\[layout\=semibox\]\:ml-0 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="semibox"] *) { margin-left: calc(var(--spacing) * 0); } } } .ltr\:group-data-\[sidebar\=medium\]\:ml-0 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-sidebar="medium"] *) { margin-left: calc(var(--spacing) * 0); } } } .ltr\:group-data-\[layout\=semibox\]\:group-data-\[sidebar\=medium\]\:left-\[calc\(theme\(\"height\.sidebar-medium\"\)_\+_theme\(\"spacing\.3\"\)_\+_theme\(\"spacing\.3\"\)\)\] { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="semibox"] *) { &:is(:where(.group)[data-sidebar="medium"] *) { left: calc(10rem + 0.75rem + 0.75rem); } } } } .ltr\:group-data-\[layout\=semibox\]\:group-data-\[sidebar\=medium\]\:ml-\[calc\(theme\(\"spacing\.sidebar-medium\"\)_\+_theme\(\"spacing\.3\"\)\)\] { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="semibox"] *) { &:is(:where(.group)[data-sidebar="medium"] *) { margin-left: calc(10rem + 0.75rem); } } } } .ltr\:group-data-\[sidebar\=small\]\:ml-0 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-sidebar="small"] *) { margin-left: calc(var(--spacing) * 0); } } } .ltr\:group-data-\[layout\=semibox\]\:group-data-\[sidebar\=small\]\:left-\[calc\(theme\(\"height\.sidebar-small\"\)_\+_theme\(\"spacing\.3\"\)_\+_theme\(\"spacing\.3\"\)\)\] { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="semibox"] *) { &:is(:where(.group)[data-sidebar="small"] *) { left: calc(4.6875rem + 0.75rem + 0.75rem); } } } } .ltr\:group-data-\[layout\=semibox\]\:group-data-\[sidebar\=small\]\:ml-\[calc\(theme\(\"spacing\.sidebar-small\"\)_\+_theme\(\"spacing\.3\"\)\)\] { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="semibox"] *) { &:is(:where(.group)[data-sidebar="small"] *) { margin-left: calc(4.6875rem + 0.75rem); } } } } .ltr\:group-\[\&\.right\]\:rounded-l-none { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group).right *) { border-top-left-radius: 0; border-bottom-left-radius: 0; } } } .ltr\:group-\[\&\.right\]\:rounded-r-md { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group).right *) { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } } } .ltr\:group-\[\&\.right\]\:border-r { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group).right *) { border-right-style: var(--tw-border-style); border-right-width: 1px; } } } .ltr\:group-\[\&\.right\]\:border-l-0 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group).right *) { border-left-style: var(--tw-border-style); border-left-width: 0px; } } } .ltr\:before\:-left-1 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &::before { content: var(--tw-content); left: calc(var(--spacing) * -1); } } } .ltr\:before\:left-0 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &::before { content: var(--tw-content); left: calc(var(--spacing) * 0); } } } .ltr\:\*\:before\:right-1 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { :is(& > *) { &::before { content: var(--tw-content); right: calc(var(--spacing) * 1); } } } } .ltr\:\*\:before\:left-0\.5 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { :is(& > *) { &::before { content: var(--tw-content); left: calc(var(--spacing) * 0.5); } } } } .ltr\:\*\:after\:left-0 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { :is(& > *) { &::after { content: var(--tw-content); left: calc(var(--spacing) * 0); } } } } .ltr\:first\:rounded-l-md { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:first-child { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } } } .ltr\:last\:rounded-r-md { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:last-child { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } } } .ltr\:last\:pr-0 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:last-child { padding-right: calc(var(--spacing) * 0); } } } .ltr\:last\:before\:hidden { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:last-child { &::before { content: var(--tw-content); display: none; } } } } .ltr\:group-data-\[layout\=horizontal\]\:md\:ml-0 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="horizontal"] *) { @media (width >= 48rem) { margin-left: calc(var(--spacing) * 0); } } } } .lg\:ltr\:right-full { @media (width >= 64rem) { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { right: 100%; } } } .lg\:ltr\:left-auto { @media (width >= 64rem) { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { left: auto; } } } .ltr\:lg\:left-full { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { @media (width >= 64rem) { left: 100%; } } } .ltr\:lg\:left-sidebar { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { @media (width >= 64rem) { left: var(--spacing-sidebar); } } } .ltr\:lg\:ml-sidebar { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { @media (width >= 64rem) { margin-left: var(--spacing-sidebar); } } } .lg\:ltr\:group-data-\[layout\=modern\]\:left-sidebar { @media (width >= 64rem) { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="modern"] *) { left: var(--spacing-sidebar); } } } } .ltr\:group-data-\[layout\=modern\]\:lg\:left-sidebar { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="modern"] *) { @media (width >= 64rem) { left: var(--spacing-sidebar); } } } } .ltr\:lg\:group-data-\[layout\=semibox\]\:left-\[calc\(theme\(\"height\.sidebar\"\)_\+_theme\(\"spacing\.3\"\)_\+_theme\(\"spacing\.3\"\)\)\] { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { @media (width >= 64rem) { &:is(:where(.group)[data-layout="semibox"] *) { left: calc(15rem + 0.75rem + 0.75rem); } } } } .ltr\:lg\:group-data-\[layout\=semibox\]\:ml-\[calc\(var\(--spacing-sidebar\)_\+_theme\(\"spacing\.3\"\)\)\] { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { @media (width >= 64rem) { &:is(:where(.group)[data-layout="semibox"] *) { margin-left: calc(var(--spacing-sidebar) + 0.75rem); } } } } .lg\:ltr\:group-data-\[sidebar\=icon\]\:left-sidebar-icon { @media (width >= 64rem) { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-sidebar="icon"] *) { left: var(--spacing-sidebar-icon); } } } } .lg\:ltr\:group-data-\[sidebar\=medium\]\:left-sidebar-medium { @media (width >= 64rem) { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-sidebar="medium"] *) { left: var(--spacing-sidebar-medium); } } } } .ltr\:group-data-\[sidebar\=medium\]\:lg\:left-sidebar-medium { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-sidebar="medium"] *) { @media (width >= 64rem) { left: var(--spacing-sidebar-medium); } } } } .lg\:ltr\:group-data-\[sidebar\=medium\]\:ml-sidebar-medium { @media (width >= 64rem) { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-sidebar="medium"] *) { margin-left: var(--spacing-sidebar-medium); } } } } .lg\:ltr\:group-data-\[layout\=default\]\:group-data-\[sidebar\=medium\]\:left-0 { @media (width >= 64rem) { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="default"] *) { &:is(:where(.group)[data-sidebar="medium"] *) { left: calc(var(--spacing) * 0); } } } } } .lg\:ltr\:group-data-\[sidebar\=small\]\:left-sidebar-small { @media (width >= 64rem) { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-sidebar="small"] *) { left: var(--spacing-sidebar-small); } } } } .ltr\:group-data-\[sidebar\=small\]\:lg\:left-sidebar-small { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-sidebar="small"] *) { @media (width >= 64rem) { left: var(--spacing-sidebar-small); } } } } .lg\:ltr\:group-data-\[sidebar\=small\]\:ml-sidebar-small { @media (width >= 64rem) { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-sidebar="small"] *) { margin-left: var(--spacing-sidebar-small); } } } } .lg\:ltr\:group-data-\[layout\=default\]\:group-data-\[sidebar\=small\]\:left-0 { @media (width >= 64rem) { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="default"] *) { &:is(:where(.group)[data-sidebar="small"] *) { left: calc(var(--spacing) * 0); } } } } } .ltr\:xl\:left-\[115px\] { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { @media (width >= 80rem) { left: 115px; } } } .rtl\:right-0 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { right: calc(var(--spacing) * 0); } } .rtl\:right-1 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { right: calc(var(--spacing) * 1); } } .rtl\:right-3 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { right: calc(var(--spacing) * 3); } } .rtl\:right-auto { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { right: auto; } } .rtl\:left-0 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { left: calc(var(--spacing) * 0); } } .rtl\:left-3 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { left: calc(var(--spacing) * 3); } } .rtl\:left-5 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { left: calc(var(--spacing) * 5); } } .rtl\:mr-0 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { margin-right: calc(var(--spacing) * 0); } } .rtl\:mr-2 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { margin-right: calc(var(--spacing) * 2); } } .rtl\:mr-3 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { margin-right: calc(var(--spacing) * 3); } } .rtl\:mr-6 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { margin-right: calc(var(--spacing) * 6); } } .rtl\:mr-auto { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { margin-right: auto; } } .rtl\:ml-1 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { margin-left: calc(var(--spacing) * 1); } } .rtl\:ml-2 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { margin-left: calc(var(--spacing) * 2); } } .rtl\:ml-auto { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { margin-left: auto; } } .rtl\:rounded-l-md { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } } .rtl\:rounded-l-none { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { border-top-left-radius: 0; border-bottom-left-radius: 0; } } .rtl\:rounded-r-md { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } } .rtl\:border-r-0 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { border-right-style: var(--tw-border-style); border-right-width: 0px; } } .rtl\:border-l { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { border-left-style: var(--tw-border-style); border-left-width: 1px; } } .rtl\:border-l-0 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { border-left-style: var(--tw-border-style); border-left-width: 0px; } } .rtl\:\!border-r-transparent { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { border-right-color: transparent !important; } } .rtl\:bg-gradient-to-l { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { --tw-gradient-position: to left in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } } .rtl\:pr-3 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { padding-right: calc(var(--spacing) * 3); } } .rtl\:pr-4 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { padding-right: calc(var(--spacing) * 4); } } .rtl\:pr-5 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { padding-right: calc(var(--spacing) * 5); } } .rtl\:pr-9 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { padding-right: calc(var(--spacing) * 9); } } .rtl\:pr-16 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { padding-right: calc(var(--spacing) * 16); } } .rtl\:pl-4 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { padding-left: calc(var(--spacing) * 4); } } .rtl\:pl-8 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { padding-left: calc(var(--spacing) * 8); } } .rtl\:pl-10 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { padding-left: calc(var(--spacing) * 10); } } .rtl\:text-right { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { text-align: right; } } .rtl\:\*\:pr-5 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { :is(& > *) { padding-right: calc(var(--spacing) * 5); } } } .rtl\:\*\:pl-6 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { :is(& > *) { padding-left: calc(var(--spacing) * 6); } } } .rtl\:group-data-\[layout\=boxed\]\:right-8 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="boxed"] *) { right: calc(var(--spacing) * 8); } } } .rtl\:group-data-\[layout\=boxed\]\:rounded-l-md { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="boxed"] *) { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } } } .rtl\:group-data-\[layout\=boxed\]\:rounded-br-md { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="boxed"] *) { border-bottom-right-radius: var(--radius-md); } } } .rtl\:group-data-\[layout\=default\]\:mr-2 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="default"] *) { margin-right: calc(var(--spacing) * 2); } } } .rtl\:group-data-\[layout\=dualcolumn\]\:right-20 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="dualcolumn"] *) { right: calc(var(--spacing) * 20); } } } .rtl\:group-data-\[layout\=horizontal\]\:right-0 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="horizontal"] *) { right: calc(var(--spacing) * 0); } } } .group-data-\[layout\=horizontal\]\:rtl\:left-0 { &:is(:where(.group)[data-layout="horizontal"] *) { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { left: calc(var(--spacing) * 0); } } } .rtl\:group-data-\[layout\=horizontal\]\:mr-0 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="horizontal"] *) { margin-right: calc(var(--spacing) * 0); } } } .rtl\:group-data-\[layout\=semibox\]\:right-3 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="semibox"] *) { right: calc(var(--spacing) * 3); } } } .rtl\:group-data-\[layout\=semibox\]\:right-\[calc\(theme\(\"height\.sidebar\"\)_\+_theme\(\"spacing\.3\"\)_\+_theme\(\"spacing\.3\"\)\)\] { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="semibox"] *) { right: calc(15rem + 0.75rem + 0.75rem); } } } .rtl\:group-data-\[layout\=semibox\]\:left-3 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="semibox"] *) { left: calc(var(--spacing) * 3); } } } .rtl\:group-data-\[layout\=semibox\]\:mr-0 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="semibox"] *) { margin-right: calc(var(--spacing) * 0); } } } .rtl\:group-data-\[sidebar\=medium\]\:mr-0 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-sidebar="medium"] *) { margin-right: calc(var(--spacing) * 0); } } } .rtl\:group-data-\[layout\=semibox\]\:group-data-\[sidebar\=medium\]\:right-\[calc\(theme\(\"height\.sidebar-medium\"\)_\+_theme\(\"spacing\.3\"\)_\+_theme\(\"spacing\.3\"\)\)\] { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="semibox"] *) { &:is(:where(.group)[data-sidebar="medium"] *) { right: calc(10rem + 0.75rem + 0.75rem); } } } } .rtl\:group-data-\[layout\=semibox\]\:group-data-\[sidebar\=medium\]\:mr-\[calc\(theme\(\"spacing\.sidebar-medium\"\)_\+_theme\(\"spacing\.3\"\)\)\] { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="semibox"] *) { &:is(:where(.group)[data-sidebar="medium"] *) { margin-right: calc(10rem + 0.75rem); } } } } .rtl\:group-data-\[sidebar\=small\]\:mr-0 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-sidebar="small"] *) { margin-right: calc(var(--spacing) * 0); } } } .rtl\:group-data-\[layout\=semibox\]\:group-data-\[sidebar\=small\]\:right-\[calc\(theme\(\"height\.sidebar-small\"\)_\+_theme\(\"spacing\.3\"\)_\+_theme\(\"spacing\.3\"\)\)\] { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="semibox"] *) { &:is(:where(.group)[data-sidebar="small"] *) { right: calc(4.6875rem + 0.75rem + 0.75rem); } } } } .rtl\:group-data-\[layout\=semibox\]\:group-data-\[sidebar\=small\]\:mr-\[calc\(theme\(\"spacing\.sidebar-small\"\)_\+_theme\(\"spacing\.3\"\)\)\] { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="semibox"] *) { &:is(:where(.group)[data-sidebar="small"] *) { margin-right: calc(4.6875rem + 0.75rem); } } } } .rtl\:group-\[\&\.right\]\:rounded-l-md { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group).right *) { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } } } .rtl\:group-\[\&\.right\]\:rounded-r-none { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group).right *) { border-top-right-radius: 0; border-bottom-right-radius: 0; } } } .rtl\:group-\[\&\.right\]\:border-r-0 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group).right *) { border-right-style: var(--tw-border-style); border-right-width: 0px; } } } .rtl\:group-\[\&\.right\]\:border-l { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group).right *) { border-left-style: var(--tw-border-style); border-left-width: 1px; } } } .rtl\:before\:-right-1 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &::before { content: var(--tw-content); right: calc(var(--spacing) * -1); } } } .rtl\:before\:right-0 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &::before { content: var(--tw-content); right: calc(var(--spacing) * 0); } } } .rtl\:\*\:before\:right-0\.5 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { :is(& > *) { &::before { content: var(--tw-content); right: calc(var(--spacing) * 0.5); } } } } .rtl\:\*\:before\:left-1 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { :is(& > *) { &::before { content: var(--tw-content); left: calc(var(--spacing) * 1); } } } } .rtl\:\*\:after\:right-0 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { :is(& > *) { &::after { content: var(--tw-content); right: calc(var(--spacing) * 0); } } } } .rtl\:peer-checked\:after\:-translate-x-full { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.peer):checked ~ *) { &::after { content: var(--tw-content); --tw-translate-x: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); } } } } .rtl\:first\:rounded-r-md { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:first-child { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } } } .rtl\:last\:rounded-l-md { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:last-child { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } } } .rtl\:last\:pl-0 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:last-child { padding-left: calc(var(--spacing) * 0); } } } .rtl\:group-data-\[layout\=horizontal\]\:md\:mr-0 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="horizontal"] *) { @media (width >= 48rem) { margin-right: calc(var(--spacing) * 0); } } } } .lg\:rtl\:right-auto { @media (width >= 64rem) { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { right: auto; } } } .rtl\:lg\:right-full { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { @media (width >= 64rem) { right: 100%; } } } .rtl\:lg\:right-sidebar { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { @media (width >= 64rem) { right: var(--spacing-sidebar); } } } .lg\:rtl\:left-full { @media (width >= 64rem) { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { left: 100%; } } } .rtl\:lg\:mr-sidebar { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { @media (width >= 64rem) { margin-right: var(--spacing-sidebar); } } } .lg\:rtl\:group-data-\[layout\=modern\]\:right-sidebar { @media (width >= 64rem) { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="modern"] *) { right: var(--spacing-sidebar); } } } } .rtl\:group-data-\[layout\=modern\]\:lg\:right-sidebar { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="modern"] *) { @media (width >= 64rem) { right: var(--spacing-sidebar); } } } } .rtl\:lg\:group-data-\[layout\=semibox\]\:mr-\[calc\(var\(--spacing-sidebar\)_\+_theme\(\"spacing\.3\"\)\)\] { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { @media (width >= 64rem) { &:is(:where(.group)[data-layout="semibox"] *) { margin-right: calc(var(--spacing-sidebar) + 0.75rem); } } } } .lg\:rtl\:group-data-\[sidebar\=icon\]\:right-sidebar-icon { @media (width >= 64rem) { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-sidebar="icon"] *) { right: var(--spacing-sidebar-icon); } } } } .lg\:rtl\:group-data-\[sidebar\=medium\]\:right-sidebar-medium { @media (width >= 64rem) { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-sidebar="medium"] *) { right: var(--spacing-sidebar-medium); } } } } .rtl\:group-data-\[sidebar\=medium\]\:lg\:right-sidebar-medium { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-sidebar="medium"] *) { @media (width >= 64rem) { right: var(--spacing-sidebar-medium); } } } } .lg\:rtl\:group-data-\[sidebar\=medium\]\:mr-sidebar-medium { @media (width >= 64rem) { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-sidebar="medium"] *) { margin-right: var(--spacing-sidebar-medium); } } } } .lg\:rtl\:group-data-\[layout\=default\]\:group-data-\[sidebar\=medium\]\:right-0 { @media (width >= 64rem) { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="default"] *) { &:is(:where(.group)[data-sidebar="medium"] *) { right: calc(var(--spacing) * 0); } } } } } .lg\:rtl\:group-data-\[sidebar\=small\]\:right-sidebar-small { @media (width >= 64rem) { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-sidebar="small"] *) { right: var(--spacing-sidebar-small); } } } } .rtl\:group-data-\[sidebar\=small\]\:lg\:right-sidebar-small { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-sidebar="small"] *) { @media (width >= 64rem) { right: var(--spacing-sidebar-small); } } } } .lg\:rtl\:group-data-\[sidebar\=small\]\:mr-sidebar-small { @media (width >= 64rem) { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-sidebar="small"] *) { margin-right: var(--spacing-sidebar-small); } } } } .lg\:rtl\:group-data-\[layout\=default\]\:group-data-\[sidebar\=small\]\:right-0 { @media (width >= 64rem) { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:is(:where(.group)[data-layout="default"] *) { &:is(:where(.group)[data-sidebar="small"] *) { right: calc(var(--spacing) * 0); } } } } } .rtl\:xl\:right-\[115px\] { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { @media (width >= 80rem) { right: 115px; } } } .rtl\:ltr\:group-data-\[layout\=semibox\]\:right-3 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &:is(:where(.group)[data-layout="semibox"] *) { right: calc(var(--spacing) * 3); } } } } .dark\:hidden { &:where([data-mode=dark], [data-mode=dark] *) { display: none; } } .dark\:inline-block { &:where([data-mode=dark], [data-mode=dark] *) { display: inline-block; } } .dark\:divide-dark-700 { &:where([data-mode=dark], [data-mode=dark] *) { :where(& > :not(:last-child)) { border-color: var(--color-dark-700); } } } .dark\:divide-dark-800 { &:where([data-mode=dark], [data-mode=dark] *) { :where(& > :not(:last-child)) { border-color: var(--color-dark-800); } } } .dark\:\!border-slate-300\/10 { &:where([data-mode=dark], [data-mode=dark] *) { border-color: color-mix(in srgb, oklch(0.869 0.022 252.894) 10%, transparent) !important; @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-slate-300) 10%, transparent) !important; } } } .dark\:border-dark-500 { &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-500); } } .dark\:border-dark-600 { &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-600); } } .dark\:border-dark-700 { &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-700); } } .dark\:border-dark-800 { &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } } .dark\:border-gray-600 { &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-gray-600); } } .dark\:border-gray-700 { &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-gray-700); } } .dark\:border-red-600 { &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-red-600); } } .dark\:border-slate-300\/10 { &:where([data-mode=dark], [data-mode=dark] *) { border-color: color-mix(in srgb, oklch(0.869 0.022 252.894) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-slate-300) 10%, transparent); } } } .dark\:\!bg-body-invoice { &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-body-invoice) !important; } } .dark\:\!bg-body-invoice\/50 { &:where([data-mode=dark], [data-mode=dark] *) { background-color: color-mix(in srgb, oklch(12.29% 0.0611 278.48) 50%, transparent) !important; @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-body-invoice) 50%, transparent) !important; } } } .dark\:bg-blue-900\/30 { &:where([data-mode=dark], [data-mode=dark] *) { background-color: color-mix(in srgb, oklch(0.379 0.146 265.522) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-blue-900) 30%, transparent); } } } .dark\:bg-body-invoice { &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-body-invoice); } } .dark\:bg-dark-600 { &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-600); } } .dark\:bg-dark-700 { &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-700); } } .dark\:bg-dark-800 { &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-800); } } .dark\:bg-dark-800\/20 { &:where([data-mode=dark], [data-mode=dark] *) { background-color: color-mix(in srgb, oklch(0.279 0.041 260.031) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-dark-800) 20%, transparent); } } } .dark\:bg-dark-800\/50 { &:where([data-mode=dark], [data-mode=dark] *) { background-color: color-mix(in srgb, oklch(0.279 0.041 260.031) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-dark-800) 50%, transparent); } } } .dark\:bg-dark-850 { &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-850); } } .dark\:bg-dark-900 { &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-900); } } .dark\:bg-dark-950\/80 { &:where([data-mode=dark], [data-mode=dark] *) { background-color: color-mix(in srgb, oklch(0.129 0.042 264.695) 80%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-dark-950) 80%, transparent); } } } .dark\:bg-gray-600 { &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-gray-600); } } .dark\:bg-gray-700 { &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-gray-700); } } .dark\:bg-gray-700\/50 { &:where([data-mode=dark], [data-mode=dark] *) { background-color: color-mix(in srgb, oklch(0.373 0.034 259.733) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-gray-700) 50%, transparent); } } } .dark\:bg-gray-800 { &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-gray-800); } } .dark\:bg-green-900\/30 { &:where([data-mode=dark], [data-mode=dark] *) { background-color: color-mix(in srgb, oklch(0.393 0.095 152.535) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-green-900) 30%, transparent); } } } .dark\:bg-indigo-900 { &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-indigo-900); } } .dark\:bg-purple-900 { &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-purple-900); } } .dark\:bg-purple-900\/30 { &:where([data-mode=dark], [data-mode=dark] *) { background-color: color-mix(in srgb, oklch(0.381 0.176 304.987) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-purple-900) 30%, transparent); } } } .dark\:from-dark-850 { &:where([data-mode=dark], [data-mode=dark] *) { --tw-gradient-from: var(--color-dark-850); --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)); } } .dark\:from-dark-900 { &:where([data-mode=dark], [data-mode=dark] *) { --tw-gradient-from: var(--color-dark-900); --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)); } } .dark\:via-dark-850 { &:where([data-mode=dark], [data-mode=dark] *) { --tw-gradient-via: var(--color-dark-850); --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); } } .dark\:to-dark-800 { &:where([data-mode=dark], [data-mode=dark] *) { --tw-gradient-to: var(--color-dark-800); --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)); } } .dark\:to-dark-900 { &:where([data-mode=dark], [data-mode=dark] *) { --tw-gradient-to: var(--color-dark-900); --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)); } } .dark\:fill-muted-invoice { &:where([data-mode=dark], [data-mode=dark] *) { fill: var(--color-muted-invoice); } } .dark\:\!stroke-slate-300\/10 { &:where([data-mode=dark], [data-mode=dark] *) { stroke: color-mix(in srgb, oklch(0.869 0.022 252.894) 10%, transparent) !important; @supports (color: color-mix(in lab, red, red)) { stroke: color-mix(in oklab, var(--color-slate-300) 10%, transparent) !important; } } } .dark\:text-blue-400 { &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-blue-400); } } .dark\:text-current { &:where([data-mode=dark], [data-mode=dark] *) { color: currentcolor; } } .dark\:text-dark-50 { &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-50); } } .dark\:text-dark-100 { &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-100); } } .dark\:text-dark-300 { &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-300); } } .dark\:text-dark-400 { &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-400); } } .dark\:text-dark-500 { &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-500); } } .dark\:text-gray-100 { &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-gray-100); } } .dark\:text-gray-200 { &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-gray-200); } } .dark\:text-gray-300 { &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-gray-300); } } .dark\:text-gray-400 { &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-gray-400); } } .dark\:text-gray-500 { &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-gray-500); } } .dark\:text-green-400 { &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-green-400); } } .dark\:text-indigo-400 { &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-indigo-400); } } .dark\:text-primary-400 { &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-primary-400); } } .dark\:text-purple-400 { &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-purple-400); } } .dark\:text-white { &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-white); } } .dark\:placeholder-dark-500 { &:where([data-mode=dark], [data-mode=dark] *) { &::placeholder { color: var(--color-dark-500); } } } .dark\:mix-blend-soft-light { &:where([data-mode=dark], [data-mode=dark] *) { mix-blend-mode: soft-light; } } .dark\:shadow-2xl { &:where([data-mode=dark], [data-mode=dark] *) { --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); } } .dark\:shadow-inner { &:where([data-mode=dark], [data-mode=dark] *) { --tw-shadow: inset 0 2px 4px 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); } } .dark\:shadow-lg { &:where([data-mode=dark], [data-mode=dark] *) { --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); } } .dark\:shadow-md { &:where([data-mode=dark], [data-mode=dark] *) { --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); } } .dark\:shadow-none { &:where([data-mode=dark], [data-mode=dark] *) { --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); } } .dark\:shadow-sm { &:where([data-mode=dark], [data-mode=dark] *) { --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); } } .dark\:shadow-xl { &:where([data-mode=dark], [data-mode=dark] *) { --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); } } .dark\:shadow-xs { &:where([data-mode=dark], [data-mode=dark] *) { --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); } } .dark\:shadow-dark-800 { &:where([data-mode=dark], [data-mode=dark] *) { --tw-shadow-color: oklch(0.279 0.041 260.031); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-dark-800) var(--tw-shadow-alpha), transparent); } } } .dark\:shadow-dark-850 { &:where([data-mode=dark], [data-mode=dark] *) { --tw-shadow-color: oklch(23.13% 0.0399 270.37); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-dark-850) var(--tw-shadow-alpha), transparent); } } } .dark\:shadow-dark-900 { &:where([data-mode=dark], [data-mode=dark] *) { --tw-shadow-color: oklch(0.208 0.042 265.755); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-dark-900) var(--tw-shadow-alpha), transparent); } } } .dark\:group-focus-within\:text-indigo-400 { &:where([data-mode=dark], [data-mode=dark] *) { &:is(:where(.group):focus-within *) { color: var(--color-indigo-400); } } } .group-data-\[layout\=boxed\]\:dark\:bg-dark-950 { &:is(:where(.group)[data-layout="boxed"] *) { &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-950); } } } .dark\:group-data-\[layout\=horizontal\]\:bg-dark-850 { &:where([data-mode=dark], [data-mode=dark] *) { &:is(:where(.group)[data-layout="horizontal"] *) { background-color: var(--color-dark-850); } } } .group-data-\[sidebar-colors\=light\]\:dark\:hidden { &:is(:where(.group)[data-sidebar-colors="light"] *) { &:where([data-mode=dark], [data-mode=dark] *) { display: none; } } } .group-data-\[sidebar-colors\=light\]\:dark\:inline-block { &:is(:where(.group)[data-sidebar-colors="light"] *) { &:where([data-mode=dark], [data-mode=dark] *) { display: inline-block; } } } .group-data-\[sidebar-colors\=light\]\:dark\:border-dark-800 { &:is(:where(.group)[data-sidebar-colors="light"] *) { &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } } } .group-data-\[sidebar-colors\=light\]\:dark\:bg-dark-900 { &:is(:where(.group)[data-sidebar-colors="light"] *) { &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-900); } } } .group-data-\[sidebar-colors\=light\]\:dark\:text-dark-500 { &:is(:where(.group)[data-sidebar-colors="light"] *) { &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-500); } } } .group-data-\[sidebar\=small\]\:group-data-\[sidebar-colors\=light\]\:dark\:border { &:is(:where(.group)[data-sidebar="small"] *) { &:is(:where(.group)[data-sidebar-colors="light"] *) { &:where([data-mode=dark], [data-mode=dark] *) { border-style: var(--tw-border-style); border-width: 1px; } } } } .group-data-\[sidebar\=small\]\:group-data-\[sidebar-colors\=light\]\:dark\:border-dark-800 { &:is(:where(.group)[data-sidebar="small"] *) { &:is(:where(.group)[data-sidebar-colors="light"] *) { &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } } } } .group-data-\[sidebar\=small\]\:group-data-\[sidebar-colors\=light\]\:dark\:bg-dark-900 { &:is(:where(.group)[data-sidebar="small"] *) { &:is(:where(.group)[data-sidebar-colors="light"] *) { &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-900); } } } } .dark\:peer-checked\:ring-offset-dark-900 { &:where([data-mode=dark], [data-mode=dark] *) { &:is(:where(.peer):checked ~ *) { --tw-ring-offset-color: var(--color-dark-900); } } } .dark\:peer-focus\:ring-blue-800 { &:where([data-mode=dark], [data-mode=dark] *) { &:is(:where(.peer):focus ~ *) { --tw-ring-color: var(--color-blue-800); } } } .dark\:file\:bg-dark-800 { &:where([data-mode=dark], [data-mode=dark] *) { &::file-selector-button { background-color: var(--color-dark-800); } } } .dark\:file\:bg-dark-850 { &:where([data-mode=dark], [data-mode=dark] *) { &::file-selector-button { background-color: var(--color-dark-850); } } } .dark\:file\:text-dark-100 { &:where([data-mode=dark], [data-mode=dark] *) { &::file-selector-button { color: var(--color-dark-100); } } } .dark\:file\:text-dark-400 { &:where([data-mode=dark], [data-mode=dark] *) { &::file-selector-button { color: var(--color-dark-400); } } } .dark\:placeholder\:text-dark-500 { &:where([data-mode=dark], [data-mode=dark] *) { &::placeholder { color: var(--color-dark-500); } } } .dark\:before\:border-dark-800 { &:where([data-mode=dark], [data-mode=dark] *) { &::before { content: var(--tw-content); border-color: var(--color-dark-800); } } } .dark\:\*\:before\:bg-dark-800 { &:where([data-mode=dark], [data-mode=dark] *) { :is(& > *) { &::before { content: var(--tw-content); background-color: var(--color-dark-800); } } } } .dark\:\*\:before\:text-dark-500 { &:where([data-mode=dark], [data-mode=dark] *) { :is(& > *) { &::before { content: var(--tw-content); color: var(--color-dark-500); } } } } .group-data-\[sidebar-colors\=light\]\:dark\:before\:bg-dark-900 { &:is(:where(.group)[data-sidebar-colors="light"] *) { &:where([data-mode=dark], [data-mode=dark] *) { &::before { content: var(--tw-content); background-color: var(--color-dark-900); } } } } .dark\:\*\:after\:bg-gray-800 { &:where([data-mode=dark], [data-mode=dark] *) { :is(& > *) { &::after { content: var(--tw-content); background-color: var(--color-gray-800); } } } } .dark\:odd\:bg-dark-850 { &:where([data-mode=dark], [data-mode=dark] *) { &:nth-child(odd) { background-color: var(--color-dark-850); } } } .dark\:odd\:bg-dark-900 { &:where([data-mode=dark], [data-mode=dark] *) { &:nth-child(odd) { background-color: var(--color-dark-900); } } } .dark\:even\:bg-dark-850 { &:where([data-mode=dark], [data-mode=dark] *) { &:nth-child(even) { background-color: var(--color-dark-850); } } } .dark\:even\:bg-dark-900 { &:where([data-mode=dark], [data-mode=dark] *) { &:nth-child(even) { background-color: var(--color-dark-900); } } } .dark\:hover\:\!bg-dark-850 { &:where([data-mode=dark], [data-mode=dark] *) { &:hover { @media (hover: hover) { background-color: var(--color-dark-850) !important; } } } } .dark\:hover\:bg-dark-500 { &:where([data-mode=dark], [data-mode=dark] *) { &:hover { @media (hover: hover) { background-color: var(--color-dark-500); } } } } .dark\:hover\:bg-dark-800 { &:where([data-mode=dark], [data-mode=dark] *) { &:hover { @media (hover: hover) { background-color: var(--color-dark-800); } } } } .dark\:hover\:bg-dark-850 { &:where([data-mode=dark], [data-mode=dark] *) { &:hover { @media (hover: hover) { background-color: var(--color-dark-850); } } } } .dark\:hover\:bg-gray-700 { &:where([data-mode=dark], [data-mode=dark] *) { &:hover { @media (hover: hover) { background-color: var(--color-gray-700); } } } } .dark\:hover\:bg-primary-900\/50 { &:where([data-mode=dark], [data-mode=dark] *) { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, oklch(39.34% 0.1351 262.6) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary-900) 50%, transparent); } } } } } .dark\:hover\:text-dark-100 { &:where([data-mode=dark], [data-mode=dark] *) { &:hover { @media (hover: hover) { color: var(--color-dark-100); } } } } .dark\:hover\:text-dark-200 { &:where([data-mode=dark], [data-mode=dark] *) { &:hover { @media (hover: hover) { color: var(--color-dark-200); } } } } .dark\:hover\:text-gray-300 { &:where([data-mode=dark], [data-mode=dark] *) { &:hover { @media (hover: hover) { color: var(--color-gray-300); } } } } .dark\:hover\:text-indigo-300 { &:where([data-mode=dark], [data-mode=dark] *) { &:hover { @media (hover: hover) { color: var(--color-indigo-300); } } } } .dark\:hover\:text-primary-500 { &:where([data-mode=dark], [data-mode=dark] *) { &:hover { @media (hover: hover) { color: var(--color-primary-500); } } } } .group-data-\[sidebar-colors\=light\]\:dark\:hover\:text-sidebar-text-hover { &:is(:where(.group)[data-sidebar-colors="light"] *) { &:where([data-mode=dark], [data-mode=dark] *) { &:hover { @media (hover: hover) { color: var(--color-sidebar-text-hover); } } } } } .dark\:focus\:border-dark-800 { &:where([data-mode=dark], [data-mode=dark] *) { &:focus { border-color: var(--color-dark-800); } } } .dark\:focus\:border-primary-500 { &:where([data-mode=dark], [data-mode=dark] *) { &:focus { border-color: var(--color-primary-500); } } } .dark\:focus\:checked\:ring-offset-dark-900 { &:where([data-mode=dark], [data-mode=dark] *) { &:focus { &:checked { --tw-ring-offset-color: var(--color-dark-900); } } } } .dark\:disabled\:border-dark-800 { &:where([data-mode=dark], [data-mode=dark] *) { &:disabled { border-color: var(--color-dark-800); } } } .dark\:disabled\:bg-dark-850 { &:where([data-mode=dark], [data-mode=dark] *) { &:disabled { background-color: var(--color-dark-850); } } } .dark\:disabled\:text-dark-500 { &:where([data-mode=dark], [data-mode=dark] *) { &:disabled { color: var(--color-dark-500); } } } .dark\:xl\:bg-transparent { &:where([data-mode=dark], [data-mode=dark] *) { @media (width >= 80rem) { background-color: transparent; } } } .print\:hidden { @media print { display: none; } } .print\:p-0 { @media print { padding: calc(var(--spacing) * 0); } } .ltr\:print\:ml-0 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { @media print { margin-left: calc(var(--spacing) * 0); } } } .rtl\:print\:mr-0 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { @media print { margin-right: calc(var(--spacing) * 0); } } } .\[\&\.active\]\:border-green-500 { &.active { border-color: var(--color-green-500); } } .\[\&\.active\]\:border-primary-500 { &.active { border-color: var(--color-primary-500); } } .\[\&\.active\]\:border-purple-500 { &.active { border-color: var(--color-purple-500); } } .\[\&\.active\]\:border-red-500 { &.active { border-color: var(--color-red-500); } } .\[\&\.active\]\:border-sky-500 { &.active { border-color: var(--color-sky-500); } } .\[\&\.active\]\:border-yellow-500 { &.active { border-color: var(--color-yellow-500); } } .\[\&\.active\]\:bg-green-500 { &.active { background-color: var(--color-green-500); } } .\[\&\.active\]\:bg-primary-500 { &.active { background-color: var(--color-primary-500); } } .\[\&\.active\]\:bg-purple-500 { &.active { background-color: var(--color-purple-500); } } .\[\&\.active\]\:bg-red-500 { &.active { background-color: var(--color-red-500); } } .\[\&\.active\]\:bg-sky-500 { &.active { background-color: var(--color-sky-500); } } .\[\&\.active\]\:bg-yellow-500 { &.active { background-color: var(--color-yellow-500); } } .\[\&\.active\]\:text-current { &.active { color: currentcolor; } } .\[\&\.active\]\:text-green-50 { &.active { color: var(--color-green-50); } } .\[\&\.active\]\:text-primary-50 { &.active { color: var(--color-primary-50); } } .\[\&\.active\]\:text-purple-50 { &.active { color: var(--color-purple-50); } } .\[\&\.active\]\:text-red-50 { &.active { color: var(--color-red-50); } } .\[\&\.active\]\:text-sidebar-text-active { &.active { color: var(--color-sidebar-text-active); } } .\[\&\.active\]\:text-sky-50 { &.active { color: var(--color-sky-50); } } .\[\&\.active\]\:text-yellow-50 { &.active { color: var(--color-yellow-50); } } .group-data-\[sidebar-colors\=light\]\:\[\&\.active\]\:text-sidebar-text-active { &:is(:where(.group)[data-sidebar-colors="light"] *) { &.active { color: var(--color-sidebar-text-active); } } } .group-data-\[sidebar\=medium\]\:\[\&\.active\]\:bg-sidebar-bg-active\/10 { &:is(:where(.group)[data-sidebar="medium"] *) { &.active { background-color: color-mix(in srgb, oklch(65.26% 0.1828 255.54) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-sidebar-bg-active) 10%, transparent); } } } } .group-data-\[sidebar\=medium\]\:\[\&\.active\]\:bg-transparent { &:is(:where(.group)[data-sidebar="medium"] *) { &.active { background-color: transparent; } } } .group-data-\[sidebar\=small\]\:\[\&\.active\]\:\!bg-sidebar-bg-active\/10 { &:is(:where(.group)[data-sidebar="small"] *) { &.active { background-color: color-mix(in srgb, oklch(65.26% 0.1828 255.54) 10%, transparent) !important; @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-sidebar-bg-active) 10%, transparent) !important; } } } } .group-data-\[sidebar\=small\]\:\[\&\.active\]\:bg-transparent { &:is(:where(.group)[data-sidebar="small"] *) { &.active { background-color: transparent; } } } .\[\&\.active\]\:before\:outline-sidebar-text-hover { &.active { &::before { content: var(--tw-content); outline-color: var(--color-sidebar-text-hover); } } } .\[\&\.active\]\:after\:bottom-3 { &.active { &::after { content: var(--tw-content); bottom: calc(var(--spacing) * 3); } } } .\[\&\.active\]\:after\:w-full { &.active { &::after { content: var(--tw-content); width: 100%; } } } .\[\&\.active\]\:after\:opacity-100 { &.active { &::after { content: var(--tw-content); opacity: 100%; } } } .group-data-\[sidebar-colors\=light\]\:dark\:\[\&\.active\]\:text-sidebar-text-active { &:is(:where(.group)[data-sidebar-colors="light"] *) { &:where([data-mode=dark], [data-mode=dark] *) { &.active { color: var(--color-sidebar-text-active); } } } } } @import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap'); [data-colors=green] { --color-primary-50: oklch(98.4% 0.0182 166.4); --color-primary-100: oklch(96.73% 0.0421 168.38); --color-primary-200: oklch(93.31% 0.077 165.84); --color-primary-300: oklch(88.6% 0.1269 164.02); --color-primary-400: oklch(82.25% 0.1654 160.37); --color-primary-500: oklch(74.88% 0.1723 157.44); --color-primary-600: oklch(64.79% 0.1512 157.06); --color-primary-700: oklch(54.51% 0.1228 158.21); --color-primary-800: oklch(46.24% 0.0982 159.81); --color-primary-900: oklch(40.38% 0.0818 161.07); --color-primary-950: oklch(27.46% 0.057 162.48); } [data-colors=orange] { --color-primary-50: oklch(97.33% 0.0134 53.35); --color-primary-100: oklch(93.76% 0.0324 52.33); --color-primary-200: oklch(86.91% 0.0692 47.91); --color-primary-300: oklch(78.54% 0.1178 44.51); --color-primary-400: oklch(70.79% 0.1638 38.6); --color-primary-500: oklch(64.19% 0.2084 34.96); --color-primary-600: oklch(59.32% 0.2139 31.82); --color-primary-700: oklch(51.23% 0.1897 30.2); --color-primary-800: oklch(43.72% 0.1565 28.53); --color-primary-900: oklch(37.95% 0.1283 28.1); --color-primary-950: oklch(24.88% 0.084 26.62); } [data-colors=teal] { --color-primary-50: oklch(0.984 0.014 180.72); --color-primary-100: oklch(0.953 0.051 180.801); --color-primary-200: oklch(0.91 0.096 180.426); --color-primary-300: oklch(0.855 0.138 181.071); --color-primary-400: oklch(0.777 0.152 181.912); --color-primary-500: oklch(0.704 0.14 182.503); --color-primary-600: oklch(0.6 0.118 184.704); --color-primary-700: oklch(0.511 0.096 186.391); --color-primary-800: oklch(0.437 0.078 188.216); --color-primary-900: oklch(0.386 0.063 188.416); --color-primary-950: oklch(0.277 0.046 192.524); } [data-colors=violet] { --color-primary-50: oklch(0.969 0.016 293.756); --color-primary-100: oklch(0.943 0.029 294.588); --color-primary-200: oklch(0.894 0.057 293.283); --color-primary-300: oklch(0.811 0.111 293.571); --color-primary-400: oklch(0.702 0.183 293.541); --color-primary-500: oklch(0.606 0.25 292.717); --color-primary-600: oklch(0.541 0.281 293.009); --color-primary-700: oklch(0.491 0.27 292.581); --color-primary-800: oklch(0.432 0.232 292.759); --color-primary-900: oklch(0.38 0.189 293.745); --color-primary-950: oklch(0.283 0.141 291.089); } [data-colors=fuchsia] { --color-primary-50: oklch(0.977 0.017 320.058); --color-primary-100: oklch(0.952 0.037 318.852); --color-primary-200: oklch(0.903 0.076 319.62); --color-primary-300: oklch(0.833 0.145 321.434); --color-primary-400: oklch(0.74 0.238 322.16); --color-primary-500: oklch(0.667 0.295 322.15); --color-primary-600: oklch(0.591 0.293 322.896); --color-primary-700: oklch(0.518 0.253 323.949); --color-primary-800: oklch(0.452 0.211 324.591); --color-primary-900: oklch(0.401 0.17 325.612); --color-primary-950: oklch(0.293 0.136 325.661); } [data-colors=lime] { --color-primary-50: oklch(0.986 0.031 120.757); --color-primary-100: oklch(0.967 0.067 122.328); --color-primary-200: oklch(0.938 0.127 124.321); --color-primary-300: oklch(0.897 0.196 126.665); --color-primary-400: oklch(0.841 0.238 128.85); --color-primary-500: oklch(0.768 0.233 130.85); --color-primary-600: oklch(0.648 0.2 131.684); --color-primary-700: oklch(0.532 0.157 131.589); --color-primary-800: oklch(0.453 0.124 130.933); --color-primary-900: oklch(0.405 0.101 131.063); --color-primary-950: oklch(0.274 0.072 132.109); } [data-colors=amber] { --color-primary-50: oklch(0.987 0.022 95.277); --color-primary-100: oklch(0.962 0.059 95.617); --color-primary-200: oklch(0.924 0.12 95.746); --color-primary-300: oklch(0.879 0.169 91.605); --color-primary-400: oklch(0.828 0.189 84.429); --color-primary-500: oklch(0.769 0.188 70.08); --color-primary-600: oklch(0.666 0.179 58.318); --color-primary-700: oklch(0.555 0.163 48.998); --color-primary-800: oklch(0.473 0.137 46.201); --color-primary-900: oklch(0.414 0.112 45.904); --color-primary-950: oklch(0.279 0.077 45.635); } [data-sidebar-colors="dark"] { --color-sidebar: var(--color-gray-800); --color-sidebar-border: var(--color-gray-800); --color-menu-title: var(--color-gray-500); --color-sidebar-text: var(--color-gray-400); --color-sidebar-bg: var(--color-primary-500); --color-sidebar-text-hover: var(--color-gray-50); --color-sidebar-bg-hover: var(--color-primary-200); --color-sidebar-text-active: var(--color-gray-50); --color-sidebar-bg-active: var(--color-gray-200); --color-effect: var(--color-gray-800); } [data-sidebar-colors="brand"] { --color-sidebar: #1a57d4; --color-sidebar-border: #1a57d4; --color-menu-title: #bcc5e6; --color-sidebar-text: #c0c8f8; --color-sidebar-bg: var(--color-primary-500); --color-sidebar-text-hover: #ffffff; --color-sidebar-bg-hover: var(--color-primary-50); --color-sidebar-text-active: #ffffff; --color-sidebar-bg-active: var(--color-primary-50); --color-effect: #1a57d4; } [data-sidebar-colors="purple"] { --color-sidebar: var(--color-purple-950); --color-sidebar-border: var(--color-purple-950); --color-menu-title: #b98fd7; --color-sidebar-text: #b98fd7; --color-sidebar-bg: var(--color-purple-950); --color-sidebar-text-hover: #dfd3eb; --color-sidebar-bg-hover: var(--color-purple-50); --color-sidebar-text-active: #dfd3eb; --color-sidebar-bg-active: var(--color-purple-50); --color-effect: var(--color-purple-950); } [data-sidebar-colors="sky"] { --color-sidebar: var(--color-sky-900); --color-sidebar-border: var(--color-sky-900); --color-menu-title: #8ea2b5; --color-sidebar-text: #8ea2b5; --color-sidebar-bg: var(--color-sky-900); --color-sidebar-text-hover: var(--color-sky-50); --color-sidebar-bg-hover: var(--color-sky-50); --color-sidebar-text-active: var(--color-sky-50); --color-sidebar-bg-active: var(--color-sky-50); --color-effect: var(--color-sky-900); } [data-mode=dark].zinc { --color-dark-50: oklch(0.985 0 0); --color-dark-100: oklch(0.967 0.001 286.375); --color-dark-200: oklch(0.92 0.004 286.32); --color-dark-300: oklch(0.871 0.006 286.286); --color-dark-400: oklch(0.705 0.015 286.067); --color-dark-500: oklch(0.552 0.016 285.938); --color-dark-600: oklch(0.442 0.017 285.786); --color-dark-700: oklch(0.37 0.013 285.805); --color-dark-800: oklch(0.274 0.006 286.033); --color-dark-850: oklch(30.12% 0 0); --color-dark-900: oklch(0.21 0.006 285.885); --color-dark-950: oklch(0.141 0.005 285.823); } [data-mode=dark].stone { --color-dark-50: oklch(0.985 0.001 106.423); --color-dark-100: oklch(0.97 0.001 106.424); --color-dark-200: oklch(0.923 0.003 48.717); --color-dark-300: oklch(0.869 0.005 56.366); --color-dark-400: oklch(0.709 0.01 56.259); --color-dark-500: oklch(0.553 0.013 58.071); --color-dark-600: oklch(0.444 0.011 73.639); --color-dark-700: oklch(0.374 0.01 67.558); --color-dark-800: oklch(0.268 0.007 34.298); --color-dark-850: oklch(25.53% 0.0082 59.29); --color-dark-900: oklch(0.216 0.006 56.043); --color-dark-950: oklch(0.147 0.004 49.25); } [data-mode=dark].neutral { --color-dark-50: oklch(0.985 0 0); --color-dark-100: oklch(0.97 0 0); --color-dark-200: oklch(0.922 0 0); --color-dark-300: oklch(0.87 0 0); --color-dark-400: oklch(0.708 0 0); --color-dark-500: oklch(0.556 0 0); --color-dark-600: oklch(0.439 0 0); --color-dark-700: oklch(0.371 0 0); --color-dark-800: oklch(0.269 0 0); --color-dark-850: oklch(23.5% 0 0); --color-dark-900: oklch(0.205 0 0); --color-dark-950: oklch(0.145 0 0); } [data-mode=dark].gray { --color-dark-50: oklch(0.985 0.002 247.839); --color-dark-100: oklch(0.967 0.003 264.542); --color-dark-200: oklch(0.928 0.006 264.531); --color-dark-300: oklch(0.872 0.01 258.338); --color-dark-400: oklch(0.707 0.022 261.325); --color-dark-500: oklch(0.551 0.027 264.364); --color-dark-600: oklch(0.446 0.03 256.802); --color-dark-700: oklch(0.373 0.034 259.733); --color-dark-800: oklch(0.278 0.033 256.848); --color-dark-850: oklch(25.89% 0.0374 268.25); --color-dark-900: oklch(0.21 0.034 264.665); --color-dark-950: oklch(0.13 0.028 261.692); } [data-nav-type="boxed"] { .main-topbar { margin: calc(var(--spacing) * 3); &.nav-sticky { margin-top: calc(var(--spacing) * 0); } .main-topbar-wrapper { border-radius: var(--radius-md); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-gray-200); &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } } } .page-wrapper { padding-top: calc(var(--spacing-topbar) * 1.3); } } [data-nav-type="floating"] { .main-topbar { position: absolute; } } [data-nav-type="pattern"] { .main-topbar { .main-topbar-wrapper { background-color: transparent; } } .sidebar-toggle { color: color-mix(in srgb, #fff 75%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 75%, transparent); } } .nav-pattern { position: absolute; inset: calc(var(--spacing) * 0); top: calc(var(--spacing) * 0); display: inline-block; height: calc(var(--spacing) * 52); background-color: var(--color-primary-500); } } [data-layout="horizontal"][data-mode="dark"] { --color-sidebar: var(--color-dark-900); --color-sidebar-border: var(--color-dark-800); --color-sidebar-divider: var(--color-dark-800); --color-menu-title: var(--color-dark-500); --color-sidebar-text: var(--color-dark-500); --color-sidebar-bg: var(--color-primary-500); --color-sidebar-text-hover: var(--color-primary-500); --color-sidebar-bg-hover: var(--color-primary-500); --color-sidebar-text-active: var(--color-primary-500); --color-sidebar-bg-active: var(--color-primary-500); } @layer components { [drawer-start] { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { left: calc(var(--spacing) * 0); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { right: calc(var(--spacing) * 0); } } [drawer-start].show { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { --tw-translate-x: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { --tw-translate-x: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); } } [drawer-end] { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { right: calc(var(--spacing) * 0); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { left: calc(var(--spacing) * 0); } } [drawer-end].show { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { --tw-translate-x: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { --tw-translate-x: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); } } [drawer-bottom] { inset-inline: calc(var(--spacing) * 0); top: auto !important; bottom: calc(var(--spacing) * 0); height: calc(var(--spacing) * 80) !important; width: 100%; } [drawer-bottom].show { --tw-translate-y: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); } [drawer-top] { inset-inline: calc(var(--spacing) * 0); height: calc(var(--spacing) * 80) !important; width: 100%; } [drawer-top].show { --tw-translate-y: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); } } @layer base { [data-mode=black-white] { --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,); } body { background-color: var(--color-body); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); &:is(:where(.group)[data-layout="boxed"] *) { margin: calc(var(--spacing) * 8); } &:is(:where(.group)[data-layout="boxed"] *) { background-color: var(--color-sky-500); } &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-950); } &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-100); } } :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-heading); font-weight: var(--font-weight-semibold); } h1 { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } h2 { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } h3 { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } h4 { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } h5 { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } h6 { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } .list-circle { list-style-type: circle; } .list-square { list-style-type: square; } .list-roman { list-style-type: upper-roman; } } @layer components { button { cursor: pointer; } .btn { display: inline-block; cursor: pointer; border-radius: var(--radius-md); border-style: var(--tw-border-style); border-width: 1px; border-color: transparent; background-color: transparent; padding-inline: calc(var(--spacing) * 6); padding-block: 0.5625rem; text-align: center; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 200ms; transition-duration: 200ms; --tw-ease: linear; transition-timing-function: linear; } .btn.btn-icon { display: flex; width: var(--spacing-btn-icon); height: var(--spacing-btn-icon); align-items: center; justify-content: center; padding: calc(var(--spacing) * 0); } .btn.btn-xs { padding-inline: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * 1); font-size: var(--text-11); } .btn.btn-sm { padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 1.5); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .btn.btn-md { padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 2); font-size: var(--text-13); } .btn.btn-lg { padding-inline: calc(var(--spacing) * 7); padding-block: calc(var(--spacing) * 3); font-size: var(--text-16); } .btn.btn-sub-gray { &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-850); } &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-200); } &:where([data-mode=dark], [data-mode=dark] *) { &:hover { @media (hover: hover) { background-color: var(--color-dark-800); } } } &:where([data-mode=dark], [data-mode=dark] *) { &:hover { @media (hover: hover) { color: var(--color-dark-100); } } } } .btn-icon-text { display: flex; align-items: center; justify-content: center; gap: calc(var(--spacing) * 2); } .btn-icon-overlay { position: relative; display: flex; overflow: hidden; &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { padding-left: calc(var(--spacing) * 16); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { padding-right: calc(var(--spacing) * 16); } } .btn-icon-overlay .icon { position: absolute; inset-block: calc(var(--spacing) * 0); display: flex; width: 38px; align-items: center; justify-content: center; background-color: color-mix(in srgb, #fff 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 10%, transparent); } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { left: calc(var(--spacing) * 0); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { right: calc(var(--spacing) * 0); } } .btn-icon-overlay.right { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { padding-right: calc(var(--spacing) * 16); } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { padding-left: calc(var(--spacing) * 6); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { padding-right: calc(var(--spacing) * 6); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { padding-left: calc(var(--spacing) * 16); } } .btn-icon-overlay.right .icon { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { right: calc(var(--spacing) * 0); } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { left: auto; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { right: auto; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { left: calc(var(--spacing) * 0); } } } @layer components { [type="checkbox"]:checked { &:focus { --tw-ring-color: transparent; } background-repeat: no-repeat; background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEyODAgMTI0NCIgd2lkdGg9IjEyODAiIGhlaWdodD0iMTI0NCI+DQoJPHRpdGxlPjI3ODIwLXN2ZzwvdGl0bGU+DQoJPHN0eWxlPg0KCQkuczAgeyBmaWxsOiAjZmZmZmZmIH0gDQoJPC9zdHlsZT4NCgk8ZyBpZD0iTGF5ZXIiPg0KCQk8cGF0aCBpZD0iTGF5ZXIiIGNsYXNzPSJzMCIgZD0ibTEyMzcuOCAxLjVjLTMyIDYuNC03OC4yIDM3LTE0NC4zIDk1LjQtMzAuMyAyNi44LTU0LjEgNDkuNi0xMDYuNiAxMDIuMS04NC41IDg0LjUtMTQyLjQgMTQ2LTI5Ni40IDMxNS03Mi45IDgwLTExNi40IDEyNy41LTE0My45IDE1Ny03Ni4yIDgxLjgtMTIyLjYgMTI2LjYtMTMzLjIgMTI4LjYtNy41IDEuNC0zNS41LTAuMy01MS40LTMuMS0zNS4xLTYuMS04Ni0yMC40LTE2NS41LTQ2LjUtMTA5LjktMzYtMTMzLjgtNDIuNS0xNTguNS00Mi41LTEyLjggMC0xMy44IDAuMS0xOS44IDIuOS03LjYgMy41LTEzLjMgOS42LTE2LjIgMTcuMi00LjIgMTEuMi0yLjcgMTcgMTEuNSA0NS45IDQ1LjQgOTIuMSAxMjUuMiAxOTguNCAyMjQuNSAyOTguOSA5My4yIDk0LjMgMTczIDE1My41IDIyNy41IDE2OC43IDEwLjYgMyAyOC4yIDMuMyAzNi45IDAuNiA4LjctMi43IDE3LjQtMTEuMyAyMi42LTIyLjQgMTIuNC0yNi42IDU2LjUtOTguOSAxMzMuOC0yMTkuOCA0OS41LTc3LjIgMTAzLjYtMTYwLjUgMjk3LjctNDU3LjUgMTYxLjctMjQ3LjQgMjQwLjYtMzcwLjUgMjg2LjUtNDQ3IDE0LTIzLjIgMzQtNTguOSAzNC02MC41IDAtMC42LTMuOS04LjQtOC42LTE3LjItNi4yLTExLjYtOS4yLTE2LjMtMTAuNy0xNi43LTMuNS0wLjktMTIuNy0wLjUtMTkuOSAwLjl6Ii8+DQoJPC9nPg0KPC9zdmc+"); background-size: .65rem .65rem; background-position: 50%; } [type="radio"]:checked { background-repeat: no-repeat; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9Jy00IC00IDggOCc+PGNpcmNsZSByPScyJyBmaWxsPScjZmZmJy8+PC9zdmc+"); background-size: -0.15rem .85rem; background-position: 50%; } [type="checkbox"].arrow-none:checked, [type="radio"].arrow-none:checked { background-repeat: no-repeat; } [dir="rtl"] .form-select { background-position: left 0.70rem center; } input[type="range"] { &::-webkit-slider-thumb { width: calc(var(--spacing) * 4) !important; height: calc(var(--spacing) * 4) !important; cursor: pointer; appearance: none; border-radius: calc(infinity * 1px); background-color: var(--color-primary-500); } &:focus::-webkit-slider-thumb { background-color: var(--color-primary-600); --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); --tw-shadow-color: oklch(82.52% 0.0944 244.01); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-primary-300) var(--tw-shadow-alpha), transparent); } } } input[type="range"].range-green { &::-webkit-slider-thumb { background-color: var(--color-green-500) !important; } &:focus::-webkit-slider-thumb { background-color: var(--color-green-600) !important; --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)) !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; --tw-shadow-color: oklch(0.871 0.15 154.449) !important; @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-green-300) var(--tw-shadow-alpha), transparent) !important; } } } input[type="range"].range-orange { &::-webkit-slider-thumb { background-color: var(--color-orange-500) !important; } &:focus::-webkit-slider-thumb { background-color: var(--color-orange-600) !important; --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)) !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; --tw-shadow-color: oklch(0.837 0.128 66.29) !important; @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-orange-300) var(--tw-shadow-alpha), transparent) !important; } } } input[type="range"].range-sky { &::-webkit-slider-thumb { background-color: var(--color-sky-500) !important; } &:focus::-webkit-slider-thumb { background-color: var(--color-sky-600) !important; --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)) !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; --tw-shadow-color: oklch(0.828 0.111 230.318) !important; @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-sky-300) var(--tw-shadow-alpha), transparent) !important; } } } input[type="range"].range-yellow { &::-webkit-slider-thumb { background-color: var(--color-yellow-500) !important; } &:focus::-webkit-slider-thumb { background-color: var(--color-yellow-600) !important; --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)) !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; --tw-shadow-color: oklch(0.905 0.182 98.111) !important; @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-yellow-300) var(--tw-shadow-alpha), transparent) !important; } } } input[type="range"].range-red { &::-webkit-slider-thumb { background-color: var(--color-red-500) !important; } &:focus::-webkit-slider-thumb { background-color: var(--color-red-600) !important; --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)) !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; --tw-shadow-color: oklch(0.808 0.114 19.571) !important; @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-red-300) var(--tw-shadow-alpha), transparent) !important; } } } input[type="range"].range-purple { &::-webkit-slider-thumb { background-color: var(--color-purple-500) !important; } &:focus::-webkit-slider-thumb { background-color: var(--color-purple-600) !important; --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)) !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; --tw-shadow-color: oklch(0.827 0.119 306.383) !important; @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-purple-300) var(--tw-shadow-alpha), transparent) !important; } } } input[type="range"].range-pink { &::-webkit-slider-thumb { background-color: var(--color-pink-500) !important; } &:focus::-webkit-slider-thumb { background-color: var(--color-pink-600) !important; --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)) !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; --tw-shadow-color: oklch(0.823 0.12 346.018) !important; @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-pink-300) var(--tw-shadow-alpha), transparent) !important; } } } input[type="range"].range-indigo { &::-webkit-slider-thumb { background-color: var(--color-indigo-500) !important; } &:focus::-webkit-slider-thumb { background-color: var(--color-indigo-600) !important; --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)) !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; --tw-shadow-color: oklch(0.785 0.115 274.713) !important; @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-indigo-300) var(--tw-shadow-alpha), transparent) !important; } } } input[type="range"].range-dark { &::-webkit-slider-thumb { background-color: var(--color-gray-600) !important; } &:focus::-webkit-slider-thumb { background-color: var(--color-gray-800) !important; --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); --tw-shadow-color: oklch(0.872 0.01 258.338) !important; @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-gray-300) var(--tw-shadow-alpha), transparent) !important; } } } } @layer base { .animate-shimmer { animation: shimmer 3s ease-out infinite; } @keyframes shimmer { 100% { transform: translateX(0%); opacity: 0; } } } @layer components { .apexcharts-tooltip.apexcharts-theme-light { border-radius: var(--radius-md); border-color: var(--color-gray-200) !important; background-color: var(--color-white) !important; --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; &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800) !important; } &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-900) !important; } } .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title { border-bottom-style: var(--tw-border-style) !important; border-bottom-width: 0px !important; background-color: var(--color-white) !important; padding-bottom: calc(var(--spacing) * 0) !important; font-family: var(--font-body) !important; --tw-font-weight: var(--font-weight-semibold) !important; font-weight: var(--font-weight-semibold) !important; &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-900) !important; } } .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-text { font-family: var(--font-body) !important; font-size: var(--text-xs) !important; line-height: var(--tw-leading, var(--text-xs--line-height)) !important; } :is(.apexcharts-text, .apexcharts-title-text) { font-family: var(--font-body) !important; &:where([data-mode=dark], [data-mode=dark] *) { fill: var(--color-dark-300); } } .apexcharts-legend-text { font-family: var(--font-body) !important; font-size: var(--text-xs) !important; line-height: var(--tw-leading, var(--text-xs--line-height)) !important; color: var(--color-gray-800) !important; &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-50) !important; } } .apexcharts-xaxistooltip, .apexcharts-yaxistooltip { border-color: var(--color-gray-200) !important; background-color: var(--color-white) !important; font-family: var(--font-body) !important; font-size: var(--text-xs) !important; line-height: var(--tw-leading, var(--text-xs--line-height)) !important; color: var(--color-gray-500) !important; &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800) !important; } &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-900) !important; } &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-500) !important; } } .apexcharts-xaxistooltip-bottom:before { border-bottom-color: var(--color-gray-200) !important; &:where([data-mode=dark], [data-mode=dark] *) { border-bottom-color: var(--color-dark-800) !important; } } .apexcharts-gridline, .apexcharts-xcrosshairs, .apexcharts-xaxis-tick { stroke: var(--color-gray-200) !important; &:where([data-mode=dark], [data-mode=dark] *) { stroke: var(--color-dark-800) !important; } } .apexcharts-xaxis line { stroke: var(--color-gray-200); &:where([data-mode=dark], [data-mode=dark] *) { stroke: var(--color-dark-800); } } .apexcharts-grid-borders line { stroke: var(--color-gray-200); &:where([data-mode=dark], [data-mode=dark] *) { stroke: var(--color-dark-800); } } .apexcharts-series-markers :is(circle, path) { stroke: var(--color-white); &:where([data-mode=dark], [data-mode=dark] *) { stroke: var(--color-dark-900); } } .apexcharts-bar-series path { stroke: var(--color-white); &:where([data-mode=dark], [data-mode=dark] *) { stroke: var(--color-dark-900); } } .apexcharts-boxPlot-series path { stroke: var(--color-gray-200); &:where([data-mode=dark], [data-mode=dark] *) { stroke: var(--color-dark-800); } } :is(.apexcharts-heatmap, .apexcharts-treemap) rect { stroke: var(--color-white); &:where([data-mode=dark], [data-mode=dark] *) { stroke: var(--color-dark-900); } } .apexcharts-pie-series path { stroke: var(--color-white); &:where([data-mode=dark], [data-mode=dark] *) { stroke: var(--color-dark-900); } } .apexcharts-pie :is(line, circle) { stroke: transparent; } .apexcharts-radar-series :is(polygon, line) { stroke: var(--color-gray-200); &:where([data-mode=dark], [data-mode=dark] *) { stroke: var(--color-dark-800); } } .apexcharts-radialbar-track path { stroke: var(--color-gray-100); &:where([data-mode=dark], [data-mode=dark] *) { stroke: var(--color-dark-850); } } .apexcharts-data-labels rect { stroke: var(--color-gray-100); &:where([data-mode=dark], [data-mode=dark] *) { stroke: var(--color-dark-850); } } .apexcharts-menu { border-color: var(--color-gray-200); background-color: var(--color-white); &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-900); } } } @layer components { .fc-theme-standard { --fc-page-bg-color: var(--color-white); --fc-border-color: var(--color-gray-200); --fc-neutral-text-color: var(--color-gray-500); --fc-button-text-color: var(--color-white); --fc-button-bg-color: var(--color-sky-500); --fc-button-border-color: var(--color-sky-500); --fc-button-hover-bg-color: var(--color-sky-600); --fc-button-hover-border-color: var(--color-sky-600); --fc-button-active-bg-color: var(--color-sky-600); --fc-button-active-border-color: var(--color-sky-600); --fc-event-bg-color: var(--color-sky-500); --fc-event-border-color: var(--color-sky-500); --fc-event-text-color: colors.white; --fc-today-bg-color: colors.sky[100]; --fc-now-indicator-color: colors.red[500]; --fc-neutral-bg-color: colors.gray[100]; } th.fc-col-header-cell { padding: calc(var(--spacing) * 2.5); } .fc .fc-toolbar-title { font-size: var(--text-16); } .fc .fc-toolbar.fc-header-toolbar { margin-bottom: var(--spacing-space); } [data-mode="dark"] .fc-theme-standard { --fc-page-bg-color: var(--color-dark-900); --fc-border-color: var(--color-dark-800); --fc-neutral-text-color: var(--color-dark-500); --fc-today-bg-color: #429fe617; --fc-highlight-color: #429fe617; --fc-neutral-bg-color: var(--color-dark-850); } .fc-license-message { display: none; } .fc-daygrid-event { border-radius: var(--radius-md); padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 1.5); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } .fc .fc-list-event:hover td { &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-850); } } .fc-h-event .fc-event-title, .fc-event-time { color: var(--color-white); } .fc-timeline-event { padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 1.5); color: var(--color-white); text-transform: capitalize; } @media (max-width: 767px) { .fc-toolbar.fc-header-toolbar { flex-direction: column; gap: 10px; } .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk:nth-child(1) { order: 3; } .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk:nth-child(2) { order: 1; } .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk:nth-child(3) { order: 2; } } .fc-license-message { display: none; } } @layer components { .simplebar-scrollbar::before { background-color: var(--color-gray-300) !important; } [data-mode=dark] .simplebar-scrollbar::before { background-color: var(--color-dark-800) !important; } [data-simplebar-scroll=primary] .simplebar-scrollbar::before { background-color: var(--color-primary-500) !important; } [data-simplebar-scroll=green] .simplebar-scrollbar::before { background-color: var(--color-green-500) !important; } [data-simplebar-scroll=purple] .simplebar-scrollbar::before { background-color: var(--color-purple-500) !important; } [data-simplebar-scroll=yellow] .simplebar-scrollbar::before { background-color: var(--color-yellow-500) !important; } [data-simplebar-scroll=red] .simplebar-scrollbar::before { background-color: var(--color-red-500) !important; } [data-simplebar-scroll=sky] .simplebar-scrollbar::before { background-color: var(--color-sky-500) !important; } [data-simplebar-scroll=pink] .simplebar-scrollbar::before { background-color: var(--color-pink-500) !important; } } ::-webkit-scrollbar-track { border-radius: 10px; background-color: #fff; } ::-webkit-scrollbar { width: 12px; background-color: #fff; } ::-webkit-scrollbar-thumb { width: 10px; border-radius: 10px; background-color: oklch(0.872 0.01 258.338); } [data-mode=dark] { ::-webkit-scrollbar-track { border-radius: 10px; background-color: oklch(0.208 0.042 265.755); } ::-webkit-scrollbar { width: 12px; background-color: oklch(0.208 0.042 265.755); } ::-webkit-scrollbar-thumb { width: 10px; border-radius: 10px; background-color: oklch(0.279 0.041 260.031); } } .flatpickr-calendar { border-style: var(--tw-border-style); border-width: 1px; --tw-border-style: solid; border-style: solid; border-color: var(--color-gray-200); --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); --tw-shadow-color: oklch(0.928 0.006 264.531); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-gray-200) var(--tw-shadow-alpha), transparent); } &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-900); } &:where([data-mode=dark], [data-mode=dark] *) { --tw-shadow-color: oklch(23.13% 0.0399 270.37); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-dark-850) var(--tw-shadow-alpha), transparent); } } } .flatpickr-day { color: color-mix(in srgb, oklch(0.278 0.033 256.848) 80%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-gray-800) 80%, transparent); } &:where([data-mode=dark], [data-mode=dark] *) { color: color-mix(in srgb, oklch(0.968 0.007 247.896) 80%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-dark-100) 80%, transparent); } } &:is(.inRange, .prevMonthDay.inRange, .nextMonthDay.inRange, .today.inRange, .prevMonthDay.today.inRange, .nextMonthDay.today.inRange, :hover, .prevMonthDay:hover, .nextMonthDay:hover, :focus, .prevMonthDay:focus, .nextMonthDay:focus) { border-color: var(--color-gray-100); background-color: var(--color-gray-100); &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-850); } &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-850); } } &:is(.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: var(--color-primary-500) !important; background-color: var(--color-primary-500) !important; } &:is(.flatpickr-disabled, .flatpickr-disabled:hover, .prevMonthDay, .nextMonthDay, .notAllowed, .notAllowed.prevMonthDay, .notAllowed.nextMonthDay) { color: var(--color-gray-400); &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-500); } } &.today { border-color: var(--color-gray-200); &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } } } .flatpickr-months { .flatpickr-month { height: calc(var(--spacing) * 10); color: var(--color-gray-800); &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-100); } } :is(.flatpickr-prev-month, .flatpickr-next-month) { display: flex; height: calc(var(--spacing) * 10); align-items: center; fill: var(--color-gray-500); color: var(--color-gray-500); &:where([data-mode=dark], [data-mode=dark] *) { fill: var(--color-dark-500); } &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-500); } } } span.flatpickr-weekday { color: var(--color-gray-500); &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-500); } } .flatpickr-weekdays { height: calc(var(--spacing) * 8); background-color: var(--color-gray-100); &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-850); } } .flatpickr-current-month { padding-top: calc(var(--spacing) * 2.5); input { &.cur-year { font-size: var(--text-16); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } } .flatpickr-monthDropdown-months { font-size: var(--text-16); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); &:hover { @media (hover: hover) { background-color: var(--color-gray-100) !important; } } &:where([data-mode=dark], [data-mode=dark] *) { &:hover { @media (hover: hover) { background-color: var(--color-dark-850) !important; } } } } } .numInputWrapper { &:hover { @media (hover: hover) { background-color: var(--color-gray-100) !important; } } &:where([data-mode=dark], [data-mode=dark] *) { &:hover { @media (hover: hover) { background-color: var(--color-dark-850) !important; } } } } .flatpickr-calendar.hasTime .flatpickr-time { border-color: var(--color-gray-200); &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } } .flatpickr-time { input { color: var(--color-gray-500); &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-500); } } :is(.flatpickr-time-separator, .flatpickr-am-pm) { color: var(--color-gray-500); &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-500); } } :is(input:hover, .flatpickr-am-pm:hover, input:focus, .flatpickr-am-pm:focus) { background-color: var(--color-gray-100); &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-850); } } } .flatpickr-day.inRange { --tw-shadow: -5px 0 0 var(--tw-shadow-color, var(--tw-shadow-color)); 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: oklch(0.967 0.003 264.542); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-gray-100) var(--tw-shadow-alpha), transparent); } &:where([data-mode=dark], [data-mode=dark] *) { --tw-shadow-color: oklch(23.13% 0.0399 270.37); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-dark-850) var(--tw-shadow-alpha), transparent); } } } .flatpickr-weekwrapper { .flatpickr-weeks { --tw-shadow: 1px 0 0 var(--tw-shadow-color, var(--tw-shadow-color)); 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: oklch(0.928 0.006 264.531); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-gray-200) var(--tw-shadow-alpha), transparent); } &:where([data-mode=dark], [data-mode=dark] *) { --tw-shadow-color: oklch(0.279 0.041 260.031); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-dark-800) var(--tw-shadow-alpha), transparent); } } } span { &:is(.flatpickr-day, .flatpickr-day:hover) { background-color: transparent !important; color: var(--color-gray-500); &:where([data-mode=dark], [data-mode=dark] *) { background-color: transparent !important; } &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-500); } } } } .flatpickr-calendar.arrowTop:before { border-bottom-color: var(--color-gray-200); &:where([data-mode=dark], [data-mode=dark] *) { border-bottom-color: var(--color-dark-800); } } .flatpickr-calendar.arrowTop:after { border-bottom-color: var(--color-white); &:where([data-mode=dark], [data-mode=dark] *) { border-bottom-color: var(--color-dark-900); } } .flatpickr-calendar.arrowBottom:before { border-top-color: var(--color-gray-200); &:where([data-mode=dark], [data-mode=dark] *) { border-top-color: var(--color-dark-800); } } .flatpickr-calendar.arrowBottom:after { border-top-color: var(--color-white); &:where([data-mode=dark], [data-mode=dark] *) { border-top-color: var(--color-dark-900); } } .flatpickr-current-month input.cur-year[disabled], .flatpickr-current-month input.cur-year[disabled]:hover { color: inherit !important; } @layer components { .deckgo-highlight-code-carbon { --deckgo-highlight-code-carbon-background: var(--color-gray-800); --deckgo-highlight-code-carbon-color: #ffffff; --deckgo-highlight-code-token-atrule: var(--color-pink-500); --deckgo-highlight-code-token-function: var(--color-yellow-500); --deckgo-highlight-code-carbon-header-button-red-background: var(--color-red-500); --deckgo-highlight-code-token-selector: var(--color-green-400); } [data-mode="dark"] .deckgo-highlight-code-carbon { --deckgo-highlight-code-carbon-background: var(--color-dark-850); } } @layer components { svg { touch-action: none; } image, text, .jvm-zoomin, .jvm-zoomout { -webkit-user-select: none; user-select: none; } .jvm-container { position: relative; height: 100%; width: 100%; touch-action: none; overflow: hidden; path { fill: var(--color-gray-100) !important; &:where([data-mode=dark], [data-mode=dark] *) { fill: var(--color-dark-700) !important; } } } .jvm-tooltip { position: absolute; display: none; border-radius: var(--radius-md); background-color: var(--color-primary-500); padding-inline: calc(var(--spacing) * 2.5); padding-block: calc(var(--spacing) * 1); font-family: var(--font-body); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); white-space: nowrap; color: var(--color-white); --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); --tw-shadow-color: oklch(0.928 0.006 264.531); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-gray-200) var(--tw-shadow-alpha), transparent); } &:where([data-mode=dark], [data-mode=dark] *) { --tw-shadow-color: oklch(23.13% 0.0399 270.37); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-dark-850) var(--tw-shadow-alpha), transparent); } } &.active { display: block; } } .jvm-zoom-btn { position: absolute; box-sizing: border-box; display: flex; width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); cursor: pointer; align-items: center; justify-content: center; border-radius: var(--radius-md); background-color: var(--color-gray-800); --tw-leading: 10px; line-height: 10px; color: var(--color-white); &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { left: calc(var(--spacing) * 2.5); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { right: calc(var(--spacing) * 2.5); } &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-500); } &.jvm-zoomout { top: calc(var(--spacing) * 7); } &.jvm-zoomin { top: calc(var(--spacing) * 2.5); } } .jvm-series-container { position: absolute; &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { right: calc(var(--spacing) * 3.5); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { left: calc(var(--spacing) * 3.5); } &.jvm-series-h { bottom: calc(var(--spacing) * 3.5); } &.jvm-series-v { top: calc(var(--spacing) * 3.5); } .jvm-legend { border-radius: var(--radius-md); border-color: var(--color-gray-200); background-color: var(--color-white); padding: 0.6rem; --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); --tw-shadow-color: oklch(0.872 0.01 258.338); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-gray-300) var(--tw-shadow-alpha), transparent); } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { float: left; } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { margin-left: 0.75rem; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { float: right; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { margin-right: 0.75rem; } &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-800); } &:where([data-mode=dark], [data-mode=dark] *) { --tw-shadow-color: oklch(23.13% 0.0399 270.37); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-dark-850) var(--tw-shadow-alpha), transparent); } } .jvm-legend-title { margin-bottom: 0.575rem; border-bottom-color: var(--color-gray-200); padding-bottom: 0.5rem; --tw-leading: 1; line-height: 1; &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { text-align: left; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { text-align: right; } &:where([data-mode=dark], [data-mode=dark] *) { border-bottom-color: var(--color-dark-200); } } .jvm-legend-inner { overflow: hidden; .jvm-legend-tick { min-width: calc(var(--spacing) * 10); overflow: hidden; &:not(:first-child) { margin-top: 0.575rem; } .jvm-legend-tick-sample { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); border-radius: var(--radius-md); &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { float: left; } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { margin-right: 0.65rem; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { float: right; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { margin-left: 0.65rem; } } .jvm-legend-tick-text { text-align: center; font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { float: left; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { float: right; } } } } } } .jvm-line[animation="true"] { animation: var(--animate-jvm-line); } } @layer components { .ql-container.ql-snow { border-color: var(--color-gray-200); &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } } .ql-editor td { border-color: var(--color-gray-200); font-family: var(--font-body); &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } } .ql-toolbar { &.ql-snow { border-color: var(--color-gray-200); &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } .ql-picker-options { --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); --tw-shadow-color: oklch(0.928 0.006 264.531); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-gray-200) var(--tw-shadow-alpha), transparent); } &:where([data-mode=dark], [data-mode=dark] *) { --tw-shadow-color: oklch(0.279 0.041 260.031); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-dark-800) var(--tw-shadow-alpha), transparent); } } } .ql-picker.ql-expanded { .ql-picker-label, .ql-picker-options { border-color: var(--color-gray-200); &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } } } } } .ql-editor { li[data-list=checked]>.ql-ui, li[data-list=unchecked]>.ql-ui { color: var(--color-gray-500); &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-500); } } &.ql-blank::before { color: var(--color-gray-500); &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-500); } } } .ql-snow { .ql-stroke, .ql-stroke-miter, .ql-fill, .ql-stroke.ql-fill { stroke: var(--color-gray-500); &:where([data-mode=dark], [data-mode=dark] *) { stroke: var(--color-dark-500); } } .ql-editor blockquote { border-color: var(--color-gray-200); &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } } .ql-editor code, .ql-editor .ql-code-block-container { background-color: var(--color-gray-200); &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-850); } } .ql-editor .ql-code-block-container { background-color: var(--color-gray-800); color: var(--color-gray-50); &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-700); } &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-50); } } .ql-picker-options { background-color: var(--color-white); &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-900); } } .ql-color-picker { &.ql-background .ql-picker-item { background-color: var(--color-white); &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-900); } } &.ql-color .ql-picker-item { background-color: var(--color-gray-800); &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-700); } } } .ql-color-picker { .ql-picker-item.ql-selected, .ql-picker-item:hover { border-color: var(--color-gray-800); &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-700); } } } .ql-tooltip { border-color: var(--color-gray-200); background-color: var(--color-white); --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); --tw-shadow-color: oklch(0.928 0.006 264.531); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-gray-200) var(--tw-shadow-alpha), transparent); } &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-900); } &:where([data-mode=dark], [data-mode=dark] *) { --tw-shadow-color: oklch(23.13% 0.0399 270.37); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-dark-850) var(--tw-shadow-alpha), transparent); } } } .ql-tooltip input[type=text], .ql-tooltip a.ql-action::after { border-color: var(--color-gray-200); &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } } } .ql-snow .ql-picker { color: var(--color-gray-500); &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-500); } } } @layer components { .vscomp-wrapper { font-size: var(--text-base) !important; line-height: var(--tw-leading, var(--text-base--line-height)) !important; color: var(--color-gray-800) !important; &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-50) !important; } &.show-value-as-tags.has-value .vscomp-clear-button { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { right: auto !important; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { left: calc(var(--spacing) * 0.5) !important; } } } .vscomp-wrapper.has-clear-button { .vscomp-toggle-button { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { padding-right: calc(var(--spacing) * 14) !important; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { padding-right: calc(var(--spacing) * 4) !important; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { padding-left: calc(var(--spacing) * 14) !important; } } } .vscomp-ele { width: 100% !important; max-width: 100% !important; } .vscomp-toggle-button { border-radius: var(--radius-md); border-color: var(--color-gray-200) !important; background-color: var(--color-white) !important; padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 2); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800) !important; } &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-900) !important; } } .vscomp-arrow { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { right: calc(var(--spacing) * 0) !important; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { right: auto !important; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { left: calc(var(--spacing) * 0) !important; } &::after { content: var(--tw-content); border-right-color: var(--color-gray-800) !important; } &::after { content: var(--tw-content); border-bottom-color: var(--color-gray-800) !important; } &:where([data-mode=dark], [data-mode=dark] *) { &::after { content: var(--tw-content); border-right-color: var(--color-dark-500) !important; } } &:where([data-mode=dark], [data-mode=dark] *) { &::after { content: var(--tw-content); border-bottom-color: var(--color-dark-500) !important; } } } .vscomp-clear-icon, .vscomp-clear-icon { &::before { content: var(--tw-content); background-color: var(--color-gray-400) !important; } &::after { content: var(--tw-content); background-color: var(--color-gray-400) !important; } &:hover { @media (hover: hover) { &::before { content: var(--tw-content); background-color: var(--color-gray-500) !important; } } } &:hover { @media (hover: hover) { &::after { content: var(--tw-content); background-color: var(--color-gray-500) !important; } } } &:where([data-mode=dark], [data-mode=dark] *) { &::before { content: var(--tw-content); background-color: var(--color-dark-800) !important; } } &:where([data-mode=dark], [data-mode=dark] *) { &::after { content: var(--tw-content); background-color: var(--color-dark-800) !important; } } &:where([data-mode=dark], [data-mode=dark] *) { &:hover { @media (hover: hover) { &::before { content: var(--tw-content); background-color: var(--color-dark-500) !important; } } } } &:where([data-mode=dark], [data-mode=dark] *) { &:hover { @media (hover: hover) { &::after { content: var(--tw-content); background-color: var(--color-dark-500) !important; } } } } } .vscomp-clear-button { &:hover { @media (hover: hover) { background-color: var(--color-gray-100) !important; } } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { right: calc(var(--spacing) * 7) !important; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { right: auto !important; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { left: calc(var(--spacing) * 7) !important; } &:where([data-mode=dark], [data-mode=dark] *) { &:hover { @media (hover: hover) { background-color: var(--color-dark-850) !important; } } } &:hover { .vscomp-clear-icon::before, .vscomp-clear-icon::after { &:hover { @media (hover: hover) { background-color: var(--color-gray-200) !important; } } &:where([data-mode=dark], [data-mode=dark] *) { &:hover { @media (hover: hover) { background-color: var(--color-dark-800) !important; } } } } } } .vscomp-option { outline-style: var(--tw-outline-style); outline-width: 0px; } .vscomp-option-text { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { text-align: right !important; } } .pop-comp-wrapper { background-color: var(--color-white) !important; color: var(--color-gray-800) !important; --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)) !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; --tw-shadow-color: oklch(0.928 0.006 264.531) !important; @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-gray-200) var(--tw-shadow-alpha), transparent) !important; } &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-900) !important; } &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-100) !important; } &:where([data-mode=dark], [data-mode=dark] *) { --tw-shadow-color: oklch(0.279 0.041 260.031) !important; @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-dark-800) var(--tw-shadow-alpha), transparent) !important; } } } .vscomp-wrapper.focused .vscomp-toggle-button, .vscomp-wrapper:focus .vscomp-toggle-button { border-color: var(--color-primary-500); --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); --tw-shadow-color: oklch(0.928 0.006 264.531); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-gray-200) var(--tw-shadow-alpha), transparent); } &:where([data-mode=dark], [data-mode=dark] *) { --tw-shadow-color: oklch(0.279 0.041 260.031); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-dark-800) var(--tw-shadow-alpha), transparent); } } } .vscomp-wrapper:not(.has-value) .vscomp-value { color: var(--color-gray-500); opacity: 100%; &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-500); } } .vscomp-option.focused { background-color: var(--color-gray-100) !important; &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-850) !important; } } .vscomp-wrapper { color: var(--color-gray-800) !important; &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-100) !important; } } .vscomp-option.selected { background-color: var(--color-gray-100) !important; &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-850) !important; } } .vscomp-wrapper .checkbox-icon { &::after { content: var(--tw-content); border-style: var(--tw-border-style) !important; border-width: 1px !important; } &::after { content: var(--tw-content); border-color: var(--color-gray-200) !important; } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { margin-right: calc(var(--spacing) * 2.5) !important; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { margin-right: auto !important; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { margin-left: calc(var(--spacing) * 2.5) !important; } &:where([data-mode=dark], [data-mode=dark] *) { &::after { content: var(--tw-content); border-color: var(--color-dark-800) !important; } } } .vscomp-wrapper.multiple .vscomp-option.selected .checkbox-icon { &::after { content: var(--tw-content); border-top-style: var(--tw-border-style) !important; border-top-width: 0px !important; } &::after { content: var(--tw-content); border-color: var(--color-primary-500) !important; } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { &::after { content: var(--tw-content); border-left-style: var(--tw-border-style) !important; border-left-width: 0px !important; } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &::after { content: var(--tw-content); --tw-translate-x: calc(var(--spacing) * -1) !important; translate: var(--tw-translate-x) var(--tw-translate-y) !important; } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &::after { content: var(--tw-content); --tw-translate-y: calc(var(--spacing) * -1) !important; translate: var(--tw-translate-x) var(--tw-translate-y) !important; } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &::after { content: var(--tw-content); rotate: calc(45deg * -1) !important; } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &::after { content: var(--tw-content); border-right-style: var(--tw-border-style) !important; border-right-width: 0px !important; } } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { &::after { content: var(--tw-content); border-left-style: var(--tw-border-style) !important; border-left-width: 1px !important; } } } .vscomp-option-description { color: var(--color-gray-500) !important; &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-500) !important; } } .vscomp-search-clear { color: var(--color-gray-500) !important; &:hover { @media (hover: hover) { color: var(--color-red-500) !important; } } &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-500) !important; } &:where([data-mode=dark], [data-mode=dark] *) { &:hover { @media (hover: hover) { color: var(--color-red-500) !important; } } } } .vscomp-search-container { border-color: var(--color-gray-200) !important; &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { padding-right: calc(var(--spacing) * 1.5) !important; } &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { padding-left: calc(var(--spacing) * 4) !important; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { padding-right: calc(var(--spacing) * 4) !important; } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { padding-left: calc(var(--spacing) * 1.5) !important; } &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800) !important; } } .vscomp-wrapper.show-value-as-tags .vscomp-toggle-button { padding: 6px 22px 2px 10px; } .vscomp-new-option-icon::before { border-color: var(--color-primary-500) !important; border-bottom-color: transparent !important; border-left-color: transparent !important; } .vscomp-dropbox { background-color: var(--color-white) !important; &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-900) !important; } } .vscomp-wrapper.show-value-as-tags .vscomp-value-tag { border-color: var(--color-gray-200) !important; &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800) !important; } } .vscomp-wrapper.show-as-popup .vscomp-dropbox-container { background-color: #00000080 !important; } } .tippy-box { border-radius: var(--radius-md); background-color: var(--color-gray-600); color: var(--color-gray-50); &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-800); } &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-50); } } .tippy-arrow { color: var(--color-gray-600); &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-800); } } .noUi-target { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-gray-200); background-color: var(--color-white); --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); --tw-shadow-color: oklch(0.985 0.002 247.839); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-gray-50) var(--tw-shadow-alpha), transparent); } &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-900); } &:where([data-mode=dark], [data-mode=dark] *) { --tw-shadow-color: oklch(0.208 0.042 265.755); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-dark-900) var(--tw-shadow-alpha), transparent); } } } .noUi-connect { background-color: var(--color-primary-500); } .noUi-horizontal { height: calc(var(--spacing) * 3); .noUi-handle { right: calc(var(--spacing) * -1); height: calc(var(--spacing) * 6); width: calc(var(--spacing) * 2); border-color: var(--color-gray-200); background-color: var(--color-white); --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); &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-900); } } } .noUi-handle { border-color: var(--color-gray-200); background-color: var(--color-white); --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); &::before { content: var(--tw-content); display: none; } &::after { content: var(--tw-content); display: none; } &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-900); } } .noUi-tooltip { border-color: var(--color-gray-200); background-color: var(--color-white); color: var(--color-gray-800); &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-900); } &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-50); } } :is(.noUi-marker-large, .noUi-marker) { background-color: var(--color-gray-200); &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-800); } } .noUi-value-sub { color: var(--color-gray-500); &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-500); } } .c-1-color { background-color: var(--color-red-500); } .c-2-color { background-color: var(--color-yellow-500) !important; } .c-3-color { background-color: var(--color-green-500) !important; } .c-4-color { background-color: var(--color-purple-500) !important; } .c-5-color { background-color: var(--color-primary-500) !important; } #slider-toggle { height: 3.125rem; } #slider-toggle.off .noUi-handle { border-color: var(--color-red-500); background-color: var(--color-red-500); } #colorpicker { margin-inline: auto; } :is(#red, #green, #blue) { margin: calc(var(--spacing) * 5); display: inline-block; height: calc(var(--spacing) * 52); } #result { margin: calc(var(--spacing) * 10); display: inline-block; width: calc(var(--spacing) * 32); height: calc(var(--spacing) * 32); border-radius: var(--radius-md); background-color: var(--color-gray-800); vertical-align: top; color: var(--color-gray-800); --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); --tw-shadow-color: oklch(0.928 0.006 264.531); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-gray-200) var(--tw-shadow-alpha), transparent); } &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-dark-700); } &:where([data-mode=dark], [data-mode=dark] *) { color: var(--color-dark-100); } &:where([data-mode=dark], [data-mode=dark] *) { --tw-shadow-color: oklch(0.208 0.042 265.755); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-dark-900) var(--tw-shadow-alpha), transparent); } } } #red .noUi-connect { background-color: var(--color-red-500) !important; } #green .noUi-connect { background-color: var(--color-green-500) !important; } #blue .noUi-connect { background-color: var(--color-sky-500) !important; } @layer components { .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { width: calc(var(--spacing) * 3) !important; height: calc(var(--spacing) * 3) !important; border-style: var(--tw-border-style) !important; border-width: 3px !important; border-color: var(--color-green-500) !important; background-color: var(--color-white) !important; } .swiper-pagination .swiper-pagination-bullet { width: calc(var(--spacing) * 3) !important; height: calc(var(--spacing) * 3) !important; border-style: var(--tw-border-style) !important; border-width: 3px !important; border-color: var(--color-green-500) !important; background-color: var(--color-green-500) !important; } .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { border-color: var(--color-green-500) !important; background-color: var(--color-white) !important; } } @layer base { .table { width: 100%; border-collapse: collapse; vertical-align: middle; tr { td { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-gray-200); padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 3.5); &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } } th { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-gray-200); padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 3.5); text-align: start; --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } } } &.bordered { tr { td, th { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-gray-200); &:where([data-mode=dark], [data-mode=dark] *) { border-color: var(--color-dark-800); } } } } &.table-sm { tr { td, th { padding-inline: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * 1.5); } } } &.flush { tr { td { border-style: var(--tw-border-style); border-width: 0px; } } } &.hovered { tr { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 200ms; transition-duration: 200ms; --tw-ease: linear; transition-timing-function: linear; &:hover { @media (hover: hover) { background-color: color-mix(in srgb, oklch(0.928 0.006 264.531) 50%, transparent) !important; @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-gray-200) 50%, transparent) !important; } } } &:where([data-mode=dark], [data-mode=dark] *) { &:hover { @media (hover: hover) { background-color: var(--color-dark-850) !important; } } } } } &.even-striped { tr { &:nth-child(odd) { background-color: var(--color-white); } &:nth-child(even) { background-color: var(--color-gray-100); } &:where([data-mode=dark], [data-mode=dark] *) { &:nth-child(odd) { background-color: var(--color-dark-900); } } &:where([data-mode=dark], [data-mode=dark] *) { &:nth-child(even) { background-color: var(--color-dark-850); } } } } &.odd-striped { tr { &:nth-child(odd) { background-color: var(--color-gray-100); } &:nth-child(even) { background-color: var(--color-white); } &:where([data-mode=dark], [data-mode=dark] *) { &:nth-child(odd) { background-color: var(--color-dark-850); } } &:where([data-mode=dark], [data-mode=dark] *) { &:nth-child(even) { background-color: var(--color-dark-900); } } } } } .table-box { margin-inline: calc(var(--spacing) * -5); td, th { &:first-child { padding-left: calc(var(--spacing) * 5) !important; } &:last-child { padding-right: calc(var(--spacing) * 5) !important; } } .table-sm { td, th { &:first-child { padding-left: calc(var(--spacing) * 5) !important; } &:last-child { padding-right: calc(var(--spacing) * 5) !important; } } } } .dtr-details { :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))); } :where(& > :not(:last-child)) { border-color: var(--color-gray-200); } :is(& > *) { padding-block: calc(var(--spacing) * 2.5); } &:where([data-mode=dark], [data-mode=dark] *) { :where(& > :not(:last-child)) { border-color: var(--color-dark-800); } } .dtr-title { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } } .dt-length { text-transform: capitalize; } } @layer base { .invoice-landing-chart { .apexcharts-text { &:where([data-mode=dark], [data-mode=dark] *) { fill: var(--color-muted-invoice); } } .apexcharts-gridline, .apexcharts-xaxis-tick, .apexcharts-xcrosshairs, .apexcharts-xaxis-tick { &:where([data-mode=dark], [data-mode=dark] *) { stroke: color-mix(in srgb, oklch(0.869 0.022 252.894) 10%, transparent) !important; @supports (color: color-mix(in lab, red, red)) { stroke: color-mix(in oklab, var(--color-slate-300) 10%, transparent) !important; } } } .apexcharts-grid-borders { line { &:where([data-mode=dark], [data-mode=dark] *) { stroke: color-mix(in srgb, oklch(0.869 0.022 252.894) 10%, transparent) !important; @supports (color: color-mix(in lab, red, red)) { stroke: color-mix(in oklab, var(--color-slate-300) 10%, transparent) !important; } } } } .apexcharts-tooltip { &.apexcharts-theme-light { &:where([data-mode=dark], [data-mode=dark] *) { border-color: color-mix(in srgb, oklch(0.869 0.022 252.894) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-slate-300) 10%, transparent); } } &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-body-invoice); } } .apexcharts-tooltip-title { &:where([data-mode=dark], [data-mode=dark] *) { border-color: color-mix(in srgb, oklch(0.869 0.022 252.894) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-slate-300) 10%, transparent); } } &:where([data-mode=dark], [data-mode=dark] *) { background-color: color-mix(in srgb, oklch(12.29% 0.0611 278.48) 50%, transparent) !important; @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-body-invoice) 50%, transparent) !important; } } } } .apexcharts-xaxistooltip, .apexcharts-yaxistooltip { &:where([data-mode=dark], [data-mode=dark] *) { border-color: color-mix(in srgb, oklch(0.869 0.022 252.894) 10%, transparent) !important; @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-slate-300) 10%, transparent) !important; } } &:where([data-mode=dark], [data-mode=dark] *) { background-color: var(--color-body-invoice) !important; } } } } @property --tw-font-weight { syntax: "*"; inherits: false; } @property --tw-duration { syntax: "*"; inherits: false; } @property --tw-ease { syntax: "*"; inherits: false; } @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-border-style { syntax: "*"; inherits: false; initial-value: solid; } @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-content { syntax: "*"; initial-value: ""; inherits: false; } @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-outline-style { syntax: "*"; inherits: false; initial-value: solid; } @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-leading { syntax: "*"; inherits: false; } @property --tw-pan-x { syntax: "*"; inherits: false; } @property --tw-pan-y { syntax: "*"; inherits: false; } @property --tw-pinch-zoom { syntax: "*"; inherits: false; } @property --tw-scroll-snap-strictness { syntax: "*"; inherits: false; initial-value: proximity; } @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-x-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-divide-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @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-tracking { syntax: "*"; inherits: false; } @property --tw-ordinal { syntax: "*"; inherits: false; } @property --tw-slashed-zero { syntax: "*"; inherits: false; } @property --tw-numeric-figure { syntax: "*"; inherits: false; } @property --tw-numeric-spacing { syntax: "*"; inherits: false; } @property --tw-numeric-fraction { syntax: "*"; inherits: false; } @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-contain-size { syntax: "*"; inherits: false; } @property --tw-contain-layout { syntax: "*"; inherits: false; } @property --tw-contain-paint { syntax: "*"; inherits: false; } @property --tw-contain-style { syntax: "*"; inherits: false; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 50% { opacity: 0.5; } } @keyframes shimmer { 100% { transform: translate(0); opacity: 0; } } @keyframes jvm-line { from { stroke-dashoffset: 250; } } @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-font-weight: initial; --tw-duration: initial; --tw-ease: initial; --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; --tw-border-style: solid; --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-content: ""; --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-outline-style: solid; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scale-z: 1; --tw-leading: initial; --tw-pan-x: initial; --tw-pan-y: initial; --tw-pinch-zoom: initial; --tw-scroll-snap-strictness: proximity; --tw-space-y-reverse: 0; --tw-space-x-reverse: 0; --tw-divide-x-reverse: 0; --tw-divide-y-reverse: 0; --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-tracking: initial; --tw-ordinal: initial; --tw-slashed-zero: initial; --tw-numeric-figure: initial; --tw-numeric-spacing: initial; --tw-numeric-fraction: initial; --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-contain-size: initial; --tw-contain-layout: initial; --tw-contain-paint: initial; --tw-contain-style: initial; } } }