qstd
Version:
Standard Block component and utilities library with Panda CSS
1,567 lines (1,566 loc) • 40.6 kB
CSS
/* styled-system/styles.css */
@layer reset, base, tokens, recipes, utilities;
@layer reset {
html,
:host {
--font-fallback:
ui-sans-serif,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
"Noto Sans",
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji";
line-height: 1.5;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-tab-size: 4;
tab-size: 4;
font-family: var(--global-font-body, var(--font-fallback));
-webkit-tap-highlight-color: transparent;
}
*,
::before,
::after,
::backdrop,
::file-selector-button {
margin: 0px;
padding: 0px;
border-width: 0px;
border-style: solid;
border-color: var(--global-color-border, currentcolor);
box-sizing: border-box;
}
hr {
color: inherit;
height: 0px;
border-top-width: 1px;
}
body {
line-height: inherit;
height: 100%;
}
img {
border-style: none;
}
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
vertical-align: middle;
}
img,
video {
max-width: 100%;
height: auto;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-wrap: balance;
font-size: inherit;
font-weight: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
ol,
ul,
menu {
list-style: none;
}
button,
input:where([type=button], [type=reset], [type=submit]),
::file-selector-button {
appearance: button;
-webkit-appearance: button;
}
button,
input,
optgroup,
select,
textarea,
::file-selector-button {
font: inherit;
background: var(--colors-transparent);
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
}
::placeholder {
--placeholder-fallback: rgba(0, 0, 0, 0.5);
opacity: 1;
color: var(--global-color-placeholder, var(--placeholder-fallback));
}
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
::placeholder {
--placeholder-fallback: color-mix(in oklab, currentcolor 50%, transparent);
}
}
::selection {
background-color: var(--global-color-selection, rgba(0, 115, 255, 0.3));
}
textarea {
resize: vertical;
}
table {
border-color: inherit;
text-indent: 0px;
border-collapse: collapse;
}
summary {
display: list-item;
}
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;
}
dialog {
padding: 0px;
}
a {
text-decoration: inherit;
color: inherit;
}
abbr:where([title]) {
text-decoration: underline dotted;
}
b,
strong {
font-weight: bolder;
}
code,
kbd,
samp,
pre {
--font-mono-fallback:
ui-monospace,
SFMono-Regular,
Menlo,
Monaco,
Consolas,
"Liberation Mono",
"Courier New";
font-family: var(--global-font-mono, var(--font-mono-fallback));
font-size: 1em;
font-feature-settings: normal;
font-variation-settings: normal;
}
progress {
vertical-align: baseline;
}
::-webkit-search-decoration,
::-webkit-search-cancel-button {
-webkit-appearance: none;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
:-moz-ui-invalid {
box-shadow: none;
}
:-moz-focusring {
outline: auto;
}
[hidden]:where(:not([hidden=until-found])) {
display: none ;
}
}
@layer base {
:root {
--made-with-panda: "\1f43c";
color-scheme: light dark;
}
html {
font-size: 16px;
line-height: 1.5;
font-family: geologica, sans-serif;
}
*,
::before,
::after,
::backdrop {
--blur: ;
--brightness: ;
--contrast: ;
--grayscale: ;
--hue-rotate: ;
--invert: ;
--saturate: ;
--sepia: ;
--drop-shadow: ;
--backdrop-blur: ;
--backdrop-brightness: ;
--backdrop-contrast: ;
--backdrop-grayscale: ;
--backdrop-hue-rotate: ;
--backdrop-invert: ;
--backdrop-opacity: ;
--backdrop-saturate: ;
--backdrop-sepia: ;
--gradient-from-position: ;
--gradient-to-position: ;
--gradient-via-position: ;
--scroll-snap-strictness: proximity;
--border-spacing-x: 0;
--border-spacing-y: 0;
--translate-x: 0;
--translate-y: 0;
--rotate: 0;
--rotate-x: 0;
--rotate-y: 0;
--skew-x: 0;
--skew-y: 0;
--scale-x: 1;
--scale-y: 1;
}
}
@layer tokens {
:where(:root, :host) {
--aspect-ratios-square: 1 / 1;
--aspect-ratios-landscape: 4 / 3;
--aspect-ratios-portrait: 3 / 4;
--aspect-ratios-wide: 16 / 9;
--aspect-ratios-ultrawide: 18 / 5;
--aspect-ratios-golden: 1.618 / 1;
--borders-none: none;
--easings-default: cubic-bezier(0.4, 0, 0.2, 1);
--easings-linear: linear;
--easings-in: cubic-bezier(0.4, 0, 1, 1);
--easings-out: cubic-bezier(0, 0, 0.2, 1);
--easings-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--durations-fastest: 50ms;
--durations-faster: 100ms;
--durations-fast: 150ms;
--durations-normal: 200ms;
--durations-slow: 300ms;
--durations-slower: 400ms;
--durations-slowest: 500ms;
--radii-xs: 0.125rem;
--radii-sm: 0.25rem;
--radii-md: 0.375rem;
--radii-lg: 0.5rem;
--radii-xl: 0.75rem;
--radii-2xl: 1rem;
--radii-3xl: 1.5rem;
--radii-4xl: 2rem;
--radii-full: 9999px;
--font-weights-thin: 100;
--font-weights-extralight: 200;
--font-weights-light: 300;
--font-weights-normal: 400;
--font-weights-medium: 500;
--font-weights-semibold: 600;
--font-weights-bold: 700;
--font-weights-extrabold: 800;
--font-weights-black: 900;
--line-heights-none: 1;
--line-heights-tight: 1.25;
--line-heights-snug: 1.375;
--line-heights-normal: 1.5;
--line-heights-relaxed: 1.625;
--line-heights-loose: 2;
--fonts-sans:
ui-sans-serif,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
"Noto Sans",
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji";
--fonts-serif:
ui-serif,
Georgia,
Cambria,
"Times New Roman",
Times,
serif;
--fonts-mono:
ui-monospace,
SFMono-Regular,
Menlo,
Monaco,
Consolas,
"Liberation Mono",
"Courier New",
monospace;
--letter-spacings-tighter: -0.05em;
--letter-spacings-tight: -0.025em;
--letter-spacings-normal: 0em;
--letter-spacings-wide: 0.025em;
--letter-spacings-wider: 0.05em;
--letter-spacings-widest: 0.1em;
--font-sizes-2xs: 0.5rem;
--font-sizes-xs: 0.75rem;
--font-sizes-sm: 0.875rem;
--font-sizes-md: 1rem;
--font-sizes-lg: 1.125rem;
--font-sizes-xl: 1.25rem;
--font-sizes-2xl: 1.5rem;
--font-sizes-3xl: 1.875rem;
--font-sizes-4xl: 2.25rem;
--font-sizes-5xl: 3rem;
--font-sizes-6xl: 3.75rem;
--font-sizes-7xl: 4.5rem;
--font-sizes-8xl: 6rem;
--font-sizes-9xl: 8rem;
--shadows-2xs: 0 1px rgb(0 0 0 / 0.05);
--shadows-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadows-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--shadows-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadows-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadows-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--shadows-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--shadows-inset-2xs: inset 0 1px rgb(0 0 0 / 0.05);
--shadows-inset-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
--shadows-inset-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
--colors-current: currentColor;
--colors-black: #000;
--colors-white: #fff;
--colors-transparent: rgb(0 0 0 / 0);
--colors-rose-50: #fff1f2;
--colors-rose-100: #ffe4e6;
--colors-rose-200: #fecdd3;
--colors-rose-300: #fda4af;
--colors-rose-400: #fb7185;
--colors-rose-500: #f43f5e;
--colors-rose-600: #e11d48;
--colors-rose-700: #be123c;
--colors-rose-800: #9f1239;
--colors-rose-900: #881337;
--colors-rose-950: #4c0519;
--colors-pink-50: #fdf2f8;
--colors-pink-100: #fce7f3;
--colors-pink-200: #fbcfe8;
--colors-pink-300: #f9a8d4;
--colors-pink-400: #f472b6;
--colors-pink-500: #ec4899;
--colors-pink-600: #db2777;
--colors-pink-700: #be185d;
--colors-pink-800: #9d174d;
--colors-pink-900: #831843;
--colors-pink-950: #500724;
--colors-fuchsia-50: #fdf4ff;
--colors-fuchsia-100: #fae8ff;
--colors-fuchsia-200: #f5d0fe;
--colors-fuchsia-300: #f0abfc;
--colors-fuchsia-400: #e879f9;
--colors-fuchsia-500: #d946ef;
--colors-fuchsia-600: #c026d3;
--colors-fuchsia-700: #a21caf;
--colors-fuchsia-800: #86198f;
--colors-fuchsia-900: #701a75;
--colors-fuchsia-950: #4a044e;
--colors-purple-50: #faf5ff;
--colors-purple-100: #f3e8ff;
--colors-purple-200: #e9d5ff;
--colors-purple-300: #d8b4fe;
--colors-purple-400: #c084fc;
--colors-purple-500: #a855f7;
--colors-purple-600: #9333ea;
--colors-purple-700: #7e22ce;
--colors-purple-800: #6b21a8;
--colors-purple-900: #581c87;
--colors-purple-950: #3b0764;
--colors-violet-50: #f5f3ff;
--colors-violet-100: #ede9fe;
--colors-violet-200: #ddd6fe;
--colors-violet-300: #c4b5fd;
--colors-violet-400: #a78bfa;
--colors-violet-500: #8b5cf6;
--colors-violet-600: #7c3aed;
--colors-violet-700: #6d28d9;
--colors-violet-800: #5b21b6;
--colors-violet-900: #4c1d95;
--colors-violet-950: #2e1065;
--colors-indigo-50: #eef2ff;
--colors-indigo-100: #e0e7ff;
--colors-indigo-200: #c7d2fe;
--colors-indigo-300: #a5b4fc;
--colors-indigo-400: #818cf8;
--colors-indigo-500: #6366f1;
--colors-indigo-600: #4f46e5;
--colors-indigo-700: #4338ca;
--colors-indigo-800: #3730a3;
--colors-indigo-900: #312e81;
--colors-indigo-950: #1e1b4b;
--colors-blue-50: #eff6ff;
--colors-blue-100: #dbeafe;
--colors-blue-200: #bfdbfe;
--colors-blue-300: #93c5fd;
--colors-blue-400: #60a5fa;
--colors-blue-500: #3b82f6;
--colors-blue-600: #2563eb;
--colors-blue-700: #1d4ed8;
--colors-blue-800: #1e40af;
--colors-blue-900: #1e3a8a;
--colors-blue-950: #172554;
--colors-sky-50: #f0f9ff;
--colors-sky-100: #e0f2fe;
--colors-sky-200: #bae6fd;
--colors-sky-300: #7dd3fc;
--colors-sky-400: #38bdf8;
--colors-sky-500: #0ea5e9;
--colors-sky-600: #0284c7;
--colors-sky-700: #0369a1;
--colors-sky-800: #075985;
--colors-sky-900: #0c4a6e;
--colors-sky-950: #082f49;
--colors-cyan-50: #ecfeff;
--colors-cyan-100: #cffafe;
--colors-cyan-200: #a5f3fc;
--colors-cyan-300: #67e8f9;
--colors-cyan-400: #22d3ee;
--colors-cyan-500: #06b6d4;
--colors-cyan-600: #0891b2;
--colors-cyan-700: #0e7490;
--colors-cyan-800: #155e75;
--colors-cyan-900: #164e63;
--colors-cyan-950: #083344;
--colors-teal-50: #f0fdfa;
--colors-teal-100: #ccfbf1;
--colors-teal-200: #99f6e4;
--colors-teal-300: #5eead4;
--colors-teal-400: #2dd4bf;
--colors-teal-500: #14b8a6;
--colors-teal-600: #0d9488;
--colors-teal-700: #0f766e;
--colors-teal-800: #115e59;
--colors-teal-900: #134e4a;
--colors-teal-950: #042f2e;
--colors-emerald-50: #ecfdf5;
--colors-emerald-100: #d1fae5;
--colors-emerald-200: #a7f3d0;
--colors-emerald-300: #6ee7b7;
--colors-emerald-400: #34d399;
--colors-emerald-500: #10b981;
--colors-emerald-600: #059669;
--colors-emerald-700: #047857;
--colors-emerald-800: #065f46;
--colors-emerald-900: #064e3b;
--colors-emerald-950: #022c22;
--colors-green-50: #f0fdf4;
--colors-green-100: #dcfce7;
--colors-green-200: #bbf7d0;
--colors-green-300: #86efac;
--colors-green-400: #4ade80;
--colors-green-500: #22c55e;
--colors-green-600: #16a34a;
--colors-green-700: #15803d;
--colors-green-800: #166534;
--colors-green-900: #14532d;
--colors-green-950: #052e16;
--colors-lime-50: #f7fee7;
--colors-lime-100: #ecfccb;
--colors-lime-200: #d9f99d;
--colors-lime-300: #bef264;
--colors-lime-400: #a3e635;
--colors-lime-500: #84cc16;
--colors-lime-600: #65a30d;
--colors-lime-700: #4d7c0f;
--colors-lime-800: #3f6212;
--colors-lime-900: #365314;
--colors-lime-950: #1a2e05;
--colors-yellow-50: #fefce8;
--colors-yellow-100: #fef9c3;
--colors-yellow-200: #fef08a;
--colors-yellow-300: #fde047;
--colors-yellow-400: #facc15;
--colors-yellow-500: #eab308;
--colors-yellow-600: #ca8a04;
--colors-yellow-700: #a16207;
--colors-yellow-800: #854d0e;
--colors-yellow-900: #713f12;
--colors-yellow-950: #422006;
--colors-amber-50: #fffbeb;
--colors-amber-100: #fef3c7;
--colors-amber-200: #fde68a;
--colors-amber-300: #fcd34d;
--colors-amber-400: #fbbf24;
--colors-amber-500: #f59e0b;
--colors-amber-600: #d97706;
--colors-amber-700: #b45309;
--colors-amber-800: #92400e;
--colors-amber-900: #78350f;
--colors-amber-950: #451a03;
--colors-orange-50: #fff7ed;
--colors-orange-100: #ffedd5;
--colors-orange-200: #fed7aa;
--colors-orange-300: #fdba74;
--colors-orange-400: #fb923c;
--colors-orange-500: #f97316;
--colors-orange-600: #ea580c;
--colors-orange-700: #c2410c;
--colors-orange-800: #9a3412;
--colors-orange-900: #7c2d12;
--colors-orange-950: #431407;
--colors-red-50: #fef2f2;
--colors-red-100: #fee2e2;
--colors-red-200: #fecaca;
--colors-red-300: #fca5a5;
--colors-red-400: #f87171;
--colors-red-500: #ef4444;
--colors-red-600: #dc2626;
--colors-red-700: #b91c1c;
--colors-red-800: #991b1b;
--colors-red-900: #7f1d1d;
--colors-red-950: #450a0a;
--colors-neutral-50: #fafafa;
--colors-neutral-100: #f5f5f5;
--colors-neutral-200: #e5e5e5;
--colors-neutral-300: #d4d4d4;
--colors-neutral-400: #a3a3a3;
--colors-neutral-500: #737373;
--colors-neutral-600: #525252;
--colors-neutral-700: #404040;
--colors-neutral-800: #262626;
--colors-neutral-900: #171717;
--colors-neutral-950: #0a0a0a;
--colors-stone-50: #fafaf9;
--colors-stone-100: #f5f5f4;
--colors-stone-200: #e7e5e4;
--colors-stone-300: #d6d3d1;
--colors-stone-400: #a8a29e;
--colors-stone-500: #78716c;
--colors-stone-600: #57534e;
--colors-stone-700: #44403c;
--colors-stone-800: #292524;
--colors-stone-900: #1c1917;
--colors-stone-950: #0c0a09;
--colors-zinc-50: #fafafa;
--colors-zinc-100: #f4f4f5;
--colors-zinc-200: #e4e4e7;
--colors-zinc-300: #d4d4d8;
--colors-zinc-400: #a1a1aa;
--colors-zinc-500: #71717a;
--colors-zinc-600: #52525b;
--colors-zinc-700: #3f3f46;
--colors-zinc-800: #27272a;
--colors-zinc-900: #18181b;
--colors-zinc-950: #09090b;
--colors-gray-50: #f9fafb;
--colors-gray-100: #f3f4f6;
--colors-gray-200: #e5e7eb;
--colors-gray-300: #d1d5db;
--colors-gray-400: #9ca3af;
--colors-gray-500: #6b7280;
--colors-gray-600: #4b5563;
--colors-gray-700: #374151;
--colors-gray-800: #1f2937;
--colors-gray-900: #111827;
--colors-gray-950: #030712;
--colors-slate-50: #f8fafc;
--colors-slate-100: #f1f5f9;
--colors-slate-200: #e2e8f0;
--colors-slate-300: #cbd5e1;
--colors-slate-400: #94a3b8;
--colors-slate-500: #64748b;
--colors-slate-600: #475569;
--colors-slate-700: #334155;
--colors-slate-800: #1e293b;
--colors-slate-900: #0f172a;
--colors-slate-950: #020617;
--blurs-xs: 4px;
--blurs-sm: 8px;
--blurs-md: 12px;
--blurs-lg: 16px;
--blurs-xl: 24px;
--blurs-2xl: 40px;
--blurs-3xl: 64px;
--spacing-0: 0rem;
--spacing-1: 0.25rem;
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-5: 1.25rem;
--spacing-6: 1.5rem;
--spacing-7: 1.75rem;
--spacing-8: 2rem;
--spacing-9: 2.25rem;
--spacing-10: 2.5rem;
--spacing-11: 2.75rem;
--spacing-12: 3rem;
--spacing-14: 3.5rem;
--spacing-16: 4rem;
--spacing-20: 5rem;
--spacing-24: 6rem;
--spacing-28: 7rem;
--spacing-32: 8rem;
--spacing-36: 9rem;
--spacing-40: 10rem;
--spacing-44: 11rem;
--spacing-48: 12rem;
--spacing-52: 13rem;
--spacing-56: 14rem;
--spacing-60: 15rem;
--spacing-64: 16rem;
--spacing-72: 18rem;
--spacing-80: 20rem;
--spacing-96: 24rem;
--spacing-0\.5: 0.125rem;
--spacing-1\.5: 0.375rem;
--spacing-2\.5: 0.625rem;
--spacing-3\.5: 0.875rem;
--spacing-4\.5: 1.125rem;
--spacing-5\.5: 1.375rem;
--sizes-0: 0rem;
--sizes-1: 0.25rem;
--sizes-2: 0.5rem;
--sizes-3: 0.75rem;
--sizes-4: 1rem;
--sizes-5: 1.25rem;
--sizes-6: 1.5rem;
--sizes-7: 1.75rem;
--sizes-8: 2rem;
--sizes-9: 2.25rem;
--sizes-10: 2.5rem;
--sizes-11: 2.75rem;
--sizes-12: 3rem;
--sizes-14: 3.5rem;
--sizes-16: 4rem;
--sizes-20: 5rem;
--sizes-24: 6rem;
--sizes-28: 7rem;
--sizes-32: 8rem;
--sizes-36: 9rem;
--sizes-40: 10rem;
--sizes-44: 11rem;
--sizes-48: 12rem;
--sizes-52: 13rem;
--sizes-56: 14rem;
--sizes-60: 15rem;
--sizes-64: 16rem;
--sizes-72: 18rem;
--sizes-80: 20rem;
--sizes-96: 24rem;
--sizes-0\.5: 0.125rem;
--sizes-1\.5: 0.375rem;
--sizes-2\.5: 0.625rem;
--sizes-3\.5: 0.875rem;
--sizes-4\.5: 1.125rem;
--sizes-5\.5: 1.375rem;
--sizes-xs: 20rem;
--sizes-sm: 24rem;
--sizes-md: 28rem;
--sizes-lg: 32rem;
--sizes-xl: 36rem;
--sizes-2xl: 42rem;
--sizes-3xl: 48rem;
--sizes-4xl: 56rem;
--sizes-5xl: 64rem;
--sizes-6xl: 72rem;
--sizes-7xl: 80rem;
--sizes-8xl: 90rem;
--sizes-prose: 65ch;
--sizes-full: 100%;
--sizes-min: min-content;
--sizes-max: max-content;
--sizes-fit: fit-content;
--sizes-breakpoint-sm: 640px;
--sizes-breakpoint-md: 768px;
--sizes-breakpoint-lg: 1024px;
--sizes-breakpoint-xl: 1280px;
--sizes-breakpoint-2xl: 1536px;
--sizes-breakpoint-xs: 600px;
--animations-spin: spin 1s linear infinite;
--animations-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
--animations-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
--animations-bounce: bounce 1s infinite;
--breakpoints-sm: 640px;
--breakpoints-md: 768px;
--breakpoints-lg: 1024px;
--breakpoints-xl: 1280px;
--breakpoints-2xl: 1536px;
--breakpoints-xs: 600px;
--colors-text-primary: var(--colors-neutral-900);
--colors-text-secondary: var(--colors-neutral-400);
--colors-text-inverted: var(--colors-neutral-100);
--colors-text-alert: var(--colors-red-600);
--colors-input-border-color: var(--colors-neutral-300);
--colors-input-border-color-error: var(--colors-red-400);
--colors-input-outline-color-error: var(--colors-red-500);
--colors-input-label-color: var(--colors-neutral-400);
--colors-input-label-color-lifted: var(--colors-blue-500);
--colors-input-label-bg: var(--colors-neutral-100);
}
[data-theme=dark] {
--colors-text-primary: var(--colors-neutral-100);
--colors-text-secondary: var(--colors-neutral-400);
--colors-text-inverted: var(--colors-neutral-900);
--colors-text-alert: var(--colors-red-400);
--colors-input-border-color: var(--colors-neutral-600);
--colors-input-border-color-error: var(--colors-red-400);
--colors-input-outline-color-error: var(--colors-red-500);
--colors-input-label-color: var(--colors-neutral-400);
--colors-input-label-color-lifted: var(--colors-blue-500);
--colors-input-label-bg: var(--colors-neutral-800) ;
}
@keyframes ping {
75%, 100% {
transform: scale(2);
opacity: 0;
}
}
@keyframes bounce {
0%, 100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: none;
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes sheen {
from {
background-position-x: 200%;
}
to {
background-position-x: -200%;
}
}
@keyframes pulse {
0% {
transform: scale(1, 1);
}
50% {
opacity: 0.3;
}
100% {
transform: scale(1.3);
opacity: 0;
}
}
}
@layer utilities {
.grid_true {
display: grid;
}
.p_1 {
padding: var(--spacing-1);
}
.bg_neutral\.200 {
background: var(--colors-neutral-200);
}
.bg_neutral\.100 {
background: var(--colors-neutral-100);
}
.m_auto {
margin: auto;
}
.bg_neutral\.400 {
background: var(--colors-neutral-400);
}
.bg_hsl\(0_0\%_0\%_\/_0\.3\) {
background: hsl(0 0% 0% / 0.3);
}
.anim_sheen_1\.4s_infinite_linear {
animation: sheen 1.4s infinite linear;
}
.bd_1\.5px_solid {
border: 1.5px solid;
}
.m_0 {
margin: var(--spacing-0);
}
.grid-area_1_\/_1 {
grid-area: 1 / 1;
}
.bg_blue\.500 {
background: var(--colors-blue-500);
}
.bg_none {
background: none;
}
.bg_\#60a5fa\! {
background: #60a5fa ;
}
.bg_\#d1d5db\! {
background: #d1d5db ;
}
.bg_white {
background: var(--colors-white);
}
.bg_rgba\(20\,20\,20\,0\.95\) {
background: rgba(20, 20, 20, 0.95);
}
.ov_auto {
overflow: auto;
}
.flex_true {
display: flex;
}
.py_2 {
padding-block: var(--spacing-2);
}
.rounded_0 {
border-radius: 0;
}
.trs_\.2s_all_ease-in-out {
transition: .2s all ease-in-out;
}
.gap_2 {
gap: var(--spacing-2);
}
.rounded_6 {
border-radius: 6px;
}
.ring_none\! {
outline: var(--borders-none) ;
}
.trs_\.14s_background_ease-out_\.1s {
transition: .14s background ease-out .1s;
}
.rounded_12 {
border-radius: 12px;
}
.rounded_20 {
border-radius: 20px;
}
.gap_4 {
gap: var(--spacing-4);
}
.trs_\.14s_all_ease-out {
transition: .14s all ease-out;
}
.rounded_32 {
border-radius: 32px;
}
.rounded_50\% {
border-radius: 50%;
}
.ov_hidden {
overflow: hidden;
}
.trs_200ms_cubic-bezier\(0\,_0\,_0\.2\,_1\)_0ms\,_\.2s_color_ease-in-out\,_\.2s_background_ease-in-out {
transition:
200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
.2s color ease-in-out,
.2s background ease-in-out;
}
.px_2 {
padding-inline: var(--spacing-2);
}
.py_0\.5 {
padding-block: var(--spacing-0\.5);
}
.rounded_8 {
border-radius: 8px;
}
.bd-c_input-border-color-error {
border-color: var(--colors-input-border-color-error);
}
.bd-c_input-border-color {
border-color: var(--colors-input-border-color);
}
.ring_1px_solid_rgba\(208\,_58\,_58\,_0\.05\) {
outline: 1px solid rgba(208, 58, 58, 0.05);
}
.rounded_md {
border-radius: md;
}
.ring_none {
outline: var(--borders-none);
}
.rounded_9999 {
border-radius: 9999px;
}
.gap_8px {
gap: 8px;
}
.bd-w_2 {
border-width: 2px;
}
.border-style_solid {
border-style: solid;
}
.bd-c_neutral\.400 {
border-color: var(--colors-neutral-400);
}
.px_1 {
padding-inline: var(--spacing-1);
}
.py_1 {
padding-block: var(--spacing-1);
}
.trs_background-color_0\.2s_ease-in-out {
transition: background-color 0.2s ease-in-out;
}
.px_10px {
padding-inline: 10px;
}
.py_8px {
padding-block: 8px;
}
.align-c_start {
align-content: start;
}
.c_neutral\.500 {
color: var(--colors-neutral-500);
}
.rows_between {
justify-content: space-between;
justify-items: space-between;
}
.bx-s_border-box {
box-sizing: border-box;
}
.cursor_pointer {
cursor: pointer;
}
.z_1 {
z-index: 1;
}
.fs_\.8rem {
font-size: .8rem;
}
.cols_1_1_1 {
grid-template-columns: 1fr 1fr 1fr;
}
.rows_auto {
grid-template-rows: auto;
}
.align-i_true {
align-items: center;
}
.us_none {
-webkit-user-select: none;
user-select: none;
}
.c_neutral\.100 {
color: var(--colors-neutral-100);
}
.fill_none {
fill: none;
}
.stk_currentColor {
stroke: currentColor;
}
.stk-w_4,
.stk-w_4 path {
stroke-width: 4;
}
.pos_fixed {
position: fixed;
}
.bx-sh_hsl\(0deg_0\%_0\%_\/_60\%\)_0px_-4px_20px {
box-shadow: hsl(0deg 0% 0% / 60%) 0px -4px 20px;
}
.c_text-primary {
color: var(--colors-text-primary);
}
.pos_relative {
position: relative;
}
.rows_max-content_1fr {
grid-template-rows: max-content 1fr;
}
.cursor_row-resize {
cursor: row-resize;
}
.cursor_default {
cursor: default;
}
.justify-self_center {
justify-self: center;
}
.rg_14 {
row-gap: 14px;
}
.pos_absolute {
position: absolute;
}
.place-c_true {
place-content: center;
}
.fs_16 {
font-size: 16px;
}
.c_neutral\.400 {
color: var(--colors-neutral-400);
}
.cursor_not-allowed {
cursor: not-allowed;
}
.d_flex {
display: flex;
}
.align-i_center {
align-items: center;
}
.c_blue\.500 {
color: var(--colors-blue-500);
}
.stroke-color_string,
.stroke-color_string path {
stroke: string;
}
.c_neutral\.300 {
color: var(--colors-neutral-300);
}
.bg-c_neutral\.300 {
background-color: var(--colors-neutral-300);
}
.bg-i_linear-gradient\(_90deg\,_hsla\(220\,_8\.94\%\,_66\.08\%\,_0\)_0\%\,_\{colors\.neutral\.100\/80\}_50\%\,_hsla\(220\,_8\.94\%\,_66\.08\%\,_0\)_100\%_\) {
background-image:
linear-gradient(
90deg,
hsla(220, 8.94%, 66.08%, 0) 0%,
color-mix(in srgb, var(--colors-neutral-100) 80%, transparent) 50%,
hsla(220, 8.94%, 66.08%, 0) 100%);
}
.bg-r_no-repeat {
background-repeat: no-repeat;
}
.bg-s_200\%_100\% {
background-size: 200% 100%;
}
.size_40 {
width: 40px;
height: 40px;
}
.rows_\/_4 {
row-gap: 4px;
}
.relative_true {
position: relative;
}
.fs_sm {
font-size: var(--font-sizes-sm);
}
.c_text-alert {
color: var(--colors-text-alert);
}
.trf_translateY\(-50\%\) {
transform: translateY(-50%);
}
.grid-af_column {
grid-auto-flow: column;
}
.pointer-events_none {
pointer-events: none;
}
.trf-o_top_left {
transform-origin: top left;
}
.trf_translate\(0\,_-50\%\)_scale\(1\) {
transform: translate(0, -50%) scale(1);
}
.c_input-label-color {
color: var(--colors-input-label-color);
}
.lh_1\.1 {
line-height: 1.1;
}
.ring-c_input-outline-color-error {
outline-color: var(--colors-input-outline-color-error);
}
.bx-sh_lg {
box-shadow: var(--shadows-lg);
}
.grid-ac_1fr {
grid-auto-flow: column;
grid-auto-columns: 1fr;
}
.cg_8 {
column-gap: 8px;
}
.rounded_true {
border-radius: 9999px;
}
.bdr-r_9999 {
border-top-right-radius: 9999px;
border-bottom-right-radius: 9999px;
}
.bdr-l_9999 {
border-top-left-radius: 9999px;
border-bottom-left-radius: 9999px;
}
.place-i_true {
place-items: center;
}
.white-space_nowrap {
white-space: nowrap;
}
.absolute_true {
position: absolute;
}
.bx-sh_0_0_0_6px_rgba\(0\,0\,0\,\.08\) {
box-shadow: 0 0 0 6px rgba(0, 0, 0, .08);
}
.type_spring {
type: spring;
}
.stiffness_700 {
stiffness: 700px;
}
.damping_30 {
damping: 30px;
}
.ai_center {
align-items: center;
}
.jc_center {
justify-content: center;
}
.ring-o_1 {
outline-offset: var(--spacing-1);
}
.flex-d_column {
flex-direction: column;
}
.jc_flex-start {
justify-content: flex-start;
}
.bx-s_content-box {
box-sizing: content-box;
}
.trf_translate\(0\,_0\)_scale\(1\) {
transform: translate(0, 0) scale(1);
}
.resize_none {
resize: none;
}
.scr-bar-w_thin {
scrollbar-width: thin;
}
.scr-bar-c_neutral\.300_neutral\.300 {
scrollbar-color: neutral.300 neutral.300;
}
.c_white {
color: var(--colors-white);
}
.bx-sh_0_6px_18px_rgba\(0\,0\,0\,0\.18\) {
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.fs_13 {
font-size: 13px;
}
.pr_\.5rem {
padding-right: .5rem;
}
.ov-y_auto {
overflow-y: auto;
}
.max-h_100\% {
max-height: 100%;
}
.ov-y_hidden {
overflow-y: hidden;
}
.w_24px {
width: 24px;
}
.w_100\% {
width: 100%;
}
.h_max-content\! {
height: max-content ;
}
.w_clamp\(50\%\,_700px\,_90\%\) {
width: clamp(50%, 700px, 90%);
}
.pt_6 {
padding-top: var(--spacing-6);
}
.w_100vw {
width: 100vw;
}
.left_0 {
left: var(--spacing-0);
}
.right_0 {
right: var(--spacing-0);
}
.bottom_0 {
bottom: var(--spacing-0);
}
.bdr-tl_12 {
border-top-left-radius: 12px;
}
.bdr-tr_12 {
border-top-right-radius: 12px;
}
.h_6 {
height: 6px;
}
.w_34 {
width: 34px;
}
.mt_16px {
margin-top: 16px;
}
.mb_4 {
margin-bottom: var(--spacing-4);
}
.top_0 {
top: var(--spacing-0);
}
.h_100\% {
height: 100%;
}
.h_32 {
height: 32px;
}
.w_32 {
width: 32px;
}
.top_-2 {
top: calc(var(--spacing-2) * -1);
}
.right_3 {
right: var(--spacing-3);
}
.h_16 {
height: 16px;
}
.w_16 {
width: 16px;
}
.w_12px {
width: 12px;
}
.w_true {
width: 100%;
}
.h_20 {
height: 20px;
}
.pl_3 {
padding-left: var(--spacing-3);
}
.top_50\% {
top: 50%;
}
.left_11px {
left: 11px;
}
.right_11px {
right: 11px;
}
.ml_6 {
margin-left: var(--spacing-6);
}
.ml_1 {
margin-left: var(--spacing-1);
}
.mr_1 {
margin-right: var(--spacing-1);
}
.pl_7 {
padding-left: var(--spacing-7);
}
.pl_2 {
padding-left: var(--spacing-2);
}
.pr_6 {
padding-right: var(--spacing-6);
}
.pr_2 {
padding-right: var(--spacing-2);
}
.h_max-content {
height: max-content;
}
.h_8 {
height: 8px;
}
.w_24 {
width: 24px;
}
.h_24 {
height: 24px;
}
.mr_8 {
margin-right: var(--spacing-8);
}
.mr_8px {
margin-right: 8px;
}
.h_24px {
height: 24px;
}
.h_12px {
height: 12px;
}
.h_fit-content {
height: fit-content;
}
.top_1 {
top: var(--spacing-1);
}
[data-theme=dark] .dark\:bg_neutral\.700 {
background: var(--colors-neutral-700);
}
.checked\:bg_blue\.500:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) {
background: var(--colors-blue-500);
}
[data-theme=dark] .dark\:bg_neutral\.900 {
background: var(--colors-neutral-900);
}
[data-theme=dark] .dark\:bg_neutral\.600 {
background: var(--colors-neutral-600);
}
.after\:inset_0::after {
inset: var(--spacing-0);
}
[data-theme=dark] .dark\:bg_blue\.400 {
background: var(--colors-blue-400);
}
.disabled\:bg_neutral\.400:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
background: var(--colors-neutral-400);
}
.\[\&\:\:-webkit-scrollbar-track\]\:bg_transparent\!::-webkit-scrollbar-track {
background: var(--colors-transparent) ;
}
.checked\:trs_\.14s_background_ease-out:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) {
transition: .14s background ease-out;
}
.after\:trs_\.14s_all_ease-out::after {
transition: .14s all ease-out;
}
[data-theme=dark] .dark\:bd-c_neutral\.400 {
border-color: var(--colors-neutral-400);
}
.selected\:bd-c_blue\.500:is([aria-selected=true], [data-selected]) {
border-color: var(--colors-blue-500);
}
.disabled\:bd-c_neutral\.400:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
border-color: var(--colors-neutral-400);
}
.\[\&\:\:-webkit-scrollbar-thumb\]\:rounded_20::-webkit-scrollbar-thumb {
border-radius: 20px;
}
.after\:content_\"\"::after {
content: "";
}
.after\:pos_absolute::after {
position: absolute;
}
.after\:scale_0::after {
scale: 0;
}
.after\:rounded_true::after {
border-radius: 9999px;
}
.after\:z_-1::after {
z-index: -1;
}
[data-theme=dark] .dark\:c_neutral\.300 {
color: var(--colors-neutral-300);
}
[data-theme=dark] .dark\:c_blue\.400 {
color: var(--colors-blue-400);
}
[data-theme=dark] .dark\:bg-c_neutral\.700 {
background-color: var(--colors-neutral-700);
}
[data-theme=dark] .dark\:bg-i_linear-gradient\(_90deg\,_hsla\(220\,_8\.94\%\,_66\.08\%\,_0\)_0\%\,_\{colors\.neutral\.500\/80\}_50\%\,_hsla\(220\,_8\.94\%\,_66\.08\%\,_0\)_100\%_\) {
background-image:
linear-gradient(
90deg,
hsla(220, 8.94%, 66.08%, 0) 0%,
color-mix(in srgb, var(--colors-neutral-500) 80%, transparent) 50%,
hsla(220, 8.94%, 66.08%, 0) 100%);
}
.placeholder\:op_0::placeholder,
.placeholder\:op_0[data-placeholder] {
opacity: 0;
}
.placeholder\:op_1::placeholder,
.placeholder\:op_1[data-placeholder] {
opacity: 1;
}
.placeholder\:c_input-label-color::placeholder,
.placeholder\:c_input-label-color[data-placeholder] {
color: var(--colors-input-label-color);
}
[data-theme=dark] .dark\:bx-sh_0_0_0_6px_rgba\(255\,255\,255\,\.08\) {
box-shadow: 0 0 0 6px rgba(255, 255, 255, .08);
}
.\[\&\:\:-webkit-scrollbar-thumb\]\:bg-c_neutral\.300::-webkit-scrollbar-thumb {
background-color: var(--colors-neutral-300);
}
.\[\&\:\:-webkit-scrollbar\]\:h_6::-webkit-scrollbar {
height: 6px;
}
.\[\&\:\:-webkit-scrollbar\]\:w_6::-webkit-scrollbar {
width: 6px;
}
.active\:bg_neutral\.200:active:not(:disabled),
.active\:bg_neutral\.200:active:not(:focus-visible):not(:disabled),
.active\:bg_neutral\.200:active:focus-visible:not(:disabled) {
background: var(--colors-neutral-200);
}
.\[\&\:has\(\+_input\:focus\,_\+_input\:not\(\:placeholder-shown\)\)\]\:bg_input-label-bg:has(+ input:focus, + input:not(:placeholder-shown)) {
background: var(--colors-input-label-bg);
}
.active\:bg_none:active:not(:disabled),
.active\:bg_none:active:not(:focus-visible):not(:disabled),
.active\:bg_none:active:focus-visible:not(:disabled) {
background: none;
}
.\[\&\:has\(\+_textarea\:focus\,_\+_textarea\:not\(\:placeholder-shown\)\)\]\:bg_input-label-bg:has(+ textarea:focus, + textarea:not(:placeholder-shown)) {
background: var(--colors-input-label-bg);
}
.active\:scale_0\.98:active:not(:disabled),
.active\:scale_0\.98:active:not(:focus-visible):not(:disabled),
.active\:scale_0\.98:active:focus-visible:not(:disabled) {
scale: 0.98;
}
.active\:scale_0\.9:active:not(:disabled),
.active\:scale_0\.9:active:not(:focus-visible):not(:disabled),
.active\:scale_0\.9:active:focus-visible:not(:disabled) {
scale: 0.9;
}
.focus\:bx-sh_0_0_0_6px_hsl\(0_0\%_100\%_\/_0\.05\):is(:focus, [data-focus]) {
box-shadow: 0 0 0 6px hsl(0 0% 100% / 0.05);
}
.\[\&\:has\(\+_input\:focus\,_\+_input\:not\(\:placeholder-shown\)\)\]\:c_input-label-color-lifted:has(+ input:focus, + input:not(:placeholder-shown)) {
color: var(--colors-input-label-color-lifted);
}
.\[\&\:has\(\+_input\:focus\,_\+_input\:not\(\:placeholder-shown\)\)\]\:c_input-label-color:has(+ input:focus, + input:not(:placeholder-shown)) {
color: var(--colors-input-label-color);
}
.\[\&\:has\(\+_input\:focus\,_\+_input\:not\(\:placeholder-shown\)\)\]\:trf-o_top_left:has(+ input:focus, + input:not(:placeholder-shown)) {
transform-origin: top left;
}
.\[\&\:has\(\+_input\:focus\,_\+_input\:not\(\:placeholder-shown\)\)\]\:trf_scale\(0\.8\):has(+ input:focus, + input:not(:placeholder-shown)) {
transform: scale(0.8);
}
.active\:trf_none\!:active:not(:disabled),
.active\:trf_none\!:active:not(:focus-visible):not(:disabled),
.active\:trf_none\!:active:focus-visible:not(:disabled) {
transform: none ;
}
.active\:scale_none\!:active:not(:disabled),
.active\:scale_none\!:active:not(:focus-visible):not(:disabled),
.active\:scale_none\!:active:focus-visible:not(:disabled) {
scale: none ;
}
.\[\&\:has\(\+_textarea\:focus\,_\+_textarea\:not\(\:placeholder-shown\)\)\]\:c_input-label-color-lifted:has(+ textarea:focus, + textarea:not(:placeholder-shown)) {
color: var(--colors-input-label-color-lifted);
}
.\[\&\:has\(\+_textarea\:focus\,_\+_textarea\:not\(\:placeholder-shown\)\)\]\:c_input-label-color:has(+ textarea:focus, + textarea:not(:placeholder-shown)) {
color: var(--colors-input-label-color);
}
.\[\&\:has\(\+_textarea\:focus\,_\+_textarea\:not\(\:placeholder-shown\)\)\]\:trf-o_top_left:has(+ textarea:focus, + textarea:not(:placeholder-shown)) {
transform-origin: top left;
}
.\[\&\:has\(\+_textarea\:focus\,_\+_textarea\:not\(\:placeholder-shown\)\)\]\:trf_scale\(0\.8\):has(+ textarea:focus, + textarea:not(:placeholder-shown)) {
transform: scale(0.8);
}
.\[\&\:has\(\+_input\:focus\,_\+_input\:not\(\:placeholder-shown\)\)\]\:ml_6:has(+ input:focus, + input:not(:placeholder-shown)) {
margin-left: var(--spacing-6);
}
.\[\&\:has\(\+_input\:focus\,_\+_input\:not\(\:placeholder-shown\)\)\]\:ml_1:has(+ input:focus, + input:not(:placeholder-shown)) {
margin-left: var(--spacing-1);
}
.\[\&\:has\(\+_input\:focus\,_\+_input\:not\(\:placeholder-shown\)\)\]\:top_-10px:has(+ input:focus, + input:not(:placeholder-shown)) {
top: -10px;
}
.\[\&\:has\(\+_textarea\:focus\,_\+_textarea\:not\(\:placeholder-shown\)\)\]\:top_-14px:has(+ textarea:focus, + textarea:not(:placeholder-shown)) {
top: -14px;
}
.hover\:bg_neutral\.100:hover:not(:disabled) {
background: var(--colors-neutral-100);
}
.hover\:bg_none\!:hover:not(:disabled) {
background: none ;
}
.hover\:td_underline:hover:not(:disabled) {
text-decoration: underline;
}
[data-theme=dark] .disabled\:dark\:bg_neutral\.600:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
background: var(--colors-neutral-600);
}
[data-theme=dark] .selected\:dark\:bd-c_blue\.400:is([aria-selected=true], [data-selected]) {
border-color: var(--colors-blue-400);
}
[data-theme=dark] .disabled\:dark\:bd-c_neutral\.600:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
border-color: var(--colors-neutral-600);
}
.disabled\:radioLabel\:c_neutral\.400:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) [data-radio-label] {
color: var(--colors-neutral-400);
}
.focusWithin\:placeholder\:op_1:focus-within::placeholder,
.focusWithin\:placeholder\:op_1:focus-within[data-placeholder] {
opacity: 1;
}
[data-theme=dark] .active\:dark\:bg_neutral\.800:active:not(:disabled),
[data-theme=dark] .active\:dark\:bg_neutral\.800:active:not(:focus-visible):not(:disabled),
[data-theme=dark] .active\:dark\:bg_neutral\.800:active:focus-visible:not(:disabled) {
background: var(--colors-neutral-800);
}
.active\:after\:scale_0\.94:active:not(:disabled)::after,
.active\:after\:scale_0\.94:active:not(:focus-visible):not(:disabled)::after,
.active\:after\:scale_0\.94:active:focus-visible:not(:disabled)::after {
scale: 0.94;
}
[data-theme=dark] .hover\:dark\:bg_neutral\.700:hover:not(:disabled) {
background: var(--colors-neutral-700);
}
.hover\:after\:bg_neutral\.200:hover:not(:disabled)::after {
background: var(--colors-neutral-200);
}
.hover\:after\:scale_1:hover:not(:disabled)::after {
scale: 1;
}
[data-theme=dark] .disabled\:radioLabel\:dark\:c_neutral\.600:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) [data-radio-label] {
color: var(--colors-neutral-600);
}
[data-theme=dark] .hover\:after\:dark\:bg_neutral\.800:hover:not(:disabled)::after {
background: var(--colors-neutral-800);
}
}