UNPKG

qstd

Version:

Standard Block component and utilities library with Panda CSS

1,567 lines (1,566 loc) 40.6 kB
/* 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 !important; } } @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 !important; } .bg_\#d1d5db\! { background: #d1d5db !important; } .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) !important; } .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 !important; } .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) !important; } .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 !important; } .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 !important; } .\[\&\: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 !important; } .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); } }