From 62f76a996c9c4dc811923fdd9ae8882291a0319f Mon Sep 17 00:00:00 2001 From: Kevin Hahn Date: Wed, 22 Jul 2026 14:47:57 +0700 Subject: [PATCH 01/22] Refactor CommentDialog into entry-editor/comments components. Split the monolithic dialog into focused components and keep reply/edit draft text local to avoid Svelte bind errors on new threads. Co-authored-by: Cursor --- .../src/lib/entry-editor/CommentDialog.svelte | 347 ------------------ .../comments/CommentDialog.svelte | 202 ++++++++++ .../entry-editor/comments/CommentInput.svelte | 57 +++ .../entry-editor/comments/CommentItem.svelte | 79 ++++ .../entry-editor/comments/CommentPanel.svelte | 86 +++++ .../comments/CommentThread.svelte | 81 ++++ .../src/lib/entry-editor/comments/types.ts | 7 + frontend/viewer/src/locales/en.po | 40 +- frontend/viewer/src/locales/es.po | 40 +- frontend/viewer/src/locales/fr.po | 40 +- frontend/viewer/src/locales/id.po | 40 +- frontend/viewer/src/locales/ko.po | 40 +- frontend/viewer/src/locales/ms.po | 40 +- frontend/viewer/src/locales/sw.po | 40 +- frontend/viewer/src/locales/vi.po | 40 +- .../src/project/browse/EntryView.svelte | 2 +- 16 files changed, 673 insertions(+), 508 deletions(-) delete mode 100644 frontend/viewer/src/lib/entry-editor/CommentDialog.svelte create mode 100644 frontend/viewer/src/lib/entry-editor/comments/CommentDialog.svelte create mode 100644 frontend/viewer/src/lib/entry-editor/comments/CommentInput.svelte create mode 100644 frontend/viewer/src/lib/entry-editor/comments/CommentItem.svelte create mode 100644 frontend/viewer/src/lib/entry-editor/comments/CommentPanel.svelte create mode 100644 frontend/viewer/src/lib/entry-editor/comments/CommentThread.svelte create mode 100644 frontend/viewer/src/lib/entry-editor/comments/types.ts diff --git a/frontend/viewer/src/lib/entry-editor/CommentDialog.svelte b/frontend/viewer/src/lib/entry-editor/CommentDialog.svelte deleted file mode 100644 index fa187a4c8b..0000000000 --- a/frontend/viewer/src/lib/entry-editor/CommentDialog.svelte +++ /dev/null @@ -1,347 +0,0 @@ - - -{#snippet commentContent()} -
-
-
{ e.preventDefault(); void startThread(); }} class="space-y-2"> - - {#if canComment} - - - - - - - {:else} -

- {$t`Sign in to add comments.`} -

- {/if} -
- -
- {#if loading} -

{$t`Loading comments...`}

- {:else if !hasThreads} -

- {$t`No comment threads yet.`} -

- {:else} - {#each threadViews as threadView (threadView.thread.id)} -
-
-
-

{$t`Thread`}

- - {threadView.thread.authorName || $t`(unknown)`} - -
- - {threadView.thread.status === ThreadStatus.Closed ? $t`Closed` : $t`Open`} - -
- -
- {#each threadView.comments as comment (comment.id)} -
-
- - {comment.authorName || $t`(unknown)`} - - {#if currentUserId && comment.authorId === currentUserId} - - {/if} -
- - {#if editingCommentId === comment.id} -
- +
+
+
+
Dark
+
+

textarea (field-sizing: content)

+ +
+
+
+ + diff --git a/frontend/viewer/ds-bundle/components/forms/textarea/textarea.prompt.md b/frontend/viewer/ds-bundle/components/forms/textarea/textarea.prompt.md new file mode 100644 index 0000000000..ab57dd22d1 --- /dev/null +++ b/frontend/viewer/ds-bundle/components/forms/textarea/textarea.prompt.md @@ -0,0 +1,5 @@ +# Textarea + +Multi-line text field; grows with content (`field-sizing-content`). Svelte: `import { Textarea } from '$lib/components/ui/textarea';` + +**Class recipe**: `border-input flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs md:text-sm focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:border-ring`. diff --git a/frontend/viewer/ds-bundle/components/foundations/colors/colors.prompt.md b/frontend/viewer/ds-bundle/components/foundations/colors/colors.prompt.md new file mode 100644 index 0000000000..e2b023e407 --- /dev/null +++ b/frontend/viewer/ds-bundle/components/foundations/colors/colors.prompt.md @@ -0,0 +1,9 @@ +# Colors + +Semantic, theme-aware color tokens (ShadCN convention, OKLCH). Every color is a CSS variable resolved through Tailwind utilities — **never hardcode hex**. + +**Core pairs**: `background/foreground`, `card/card-foreground`, `popover/popover-foreground`, `primary/primary-foreground`, `secondary/secondary-foreground`, `muted/muted-foreground`, `accent/accent-foreground`, `destructive/destructive-foreground`, plus `border`, `input`, `ring`, and `sidebar*`. + +**Usage**: `bg-primary text-primary-foreground`, `text-muted-foreground`, `border-border`, `bg-card`. + +**Theming**: light is `:root`/`.light`, dark is `.dark`. Six accent themes are opt-in via `data-theme="green|rose|orange|violet|stone"` (default/blue = no attribute). All designs must work in both light and dark. diff --git a/frontend/viewer/ds-bundle/components/foundations/colors/index.html b/frontend/viewer/ds-bundle/components/foundations/colors/index.html new file mode 100644 index 0000000000..cf04cbe388 --- /dev/null +++ b/frontend/viewer/ds-bundle/components/foundations/colors/index.html @@ -0,0 +1,166 @@ + + + + + + +FW Lite — Colors + + + + +
+
+
Light
+
+

semantic tokens

+
+
+
+ --primary +
+
+
+ --secondary +
+
+
+ --muted +
+
+
+ --accent +
+
+
+ --card +
+
+
+ --popover +
+
+
+ --destructive +
+
+
+ --background +
+
+
+

text tokens

+
+ foreground + muted-foreground + primary + destructive +
+
+
+
+
+
Dark
+
+

semantic tokens

+
+
+
+ --primary +
+
+
+ --secondary +
+
+
+ --muted +
+
+
+ --accent +
+
+
+ --card +
+
+
+ --popover +
+
+
+ --destructive +
+
+
+ --background +
+
+
+

text tokens

+
+ foreground + muted-foreground + primary + destructive +
+
+
+
+
+
Themes
+
+

accent themes (data-theme · primary color)

+
+
+
+ Blue +
+
+
+ Green +
+
+
+ Rose +
+
+
+ Orange +
+
+
+ Violet +
+
+
+ Stone +
+
+
+
+
+ + diff --git a/frontend/viewer/ds-bundle/components/foundations/typography/index.html b/frontend/viewer/ds-bundle/components/foundations/typography/index.html new file mode 100644 index 0000000000..ad77b9f2c8 --- /dev/null +++ b/frontend/viewer/ds-bundle/components/foundations/typography/index.html @@ -0,0 +1,83 @@ + + + + + + +FW Lite — Typography + + + + +
+
+
Light
+
+
+

Noto Sans — --font-sans (default UI font)

+
Aa Bb Cc — Lexeme
+
The quick brown fox — a domesticated canine.
+
Small / muted — writing-system code, hints.
+
Extra small — badges, captions.
+
+
+

weights

+
+ Normal 400 + Medium 500 + Semibold 600 + Bold 700 +
+
+
+

Inter — .font-inter (alternate)

+
The quick brown fox jumps over the lazy dog.
+
+
+

Mono — --font-mono

+
entryId: f567e7f5-7ff2
+
+
+
+
+
Dark
+
+
+

Noto Sans — --font-sans (default UI font)

+
Aa Bb Cc — Lexeme
+
The quick brown fox — a domesticated canine.
+
Small / muted — writing-system code, hints.
+
Extra small — badges, captions.
+
+
+

weights

+
+ Normal 400 + Medium 500 + Semibold 600 + Bold 700 +
+
+
+

Inter — .font-inter (alternate)

+
The quick brown fox jumps over the lazy dog.
+
+
+

Mono — --font-mono

+
entryId: f567e7f5-7ff2
+
+
+
+
+ + diff --git a/frontend/viewer/ds-bundle/components/foundations/typography/typography.prompt.md b/frontend/viewer/ds-bundle/components/foundations/typography/typography.prompt.md new file mode 100644 index 0000000000..16a5710488 --- /dev/null +++ b/frontend/viewer/ds-bundle/components/foundations/typography/typography.prompt.md @@ -0,0 +1,7 @@ +# Typography + +**Fonts**: `--font-sans` = **Noto Sans** (default; broad script coverage for linguistic data), `--font-mono` = monospace, and **Inter** available via the `.font-inter` utility. + +**Scale** (Tailwind): `text-xs` (captions/badges), `text-sm` (secondary/muted), `text-base` (body/inputs), `text-lg`–`text-2xl` (headings). **Weights**: `font-normal | font-medium | font-semibold | font-bold`. + +Fonts are loaded via the Google Fonts `@import` at the top of the stylesheet (inlined at production build by `vite-plugin-webfont-dl`). diff --git a/frontend/viewer/ds-bundle/components/layouts/app-shell/app-shell.prompt.md b/frontend/viewer/ds-bundle/components/layouts/app-shell/app-shell.prompt.md new file mode 100644 index 0000000000..c448579d4b --- /dev/null +++ b/frontend/viewer/ds-bundle/components/layouts/app-shell/app-shell.prompt.md @@ -0,0 +1,7 @@ +# App shell + +The outer chrome every FW Lite screen lives in: a **sidebar** (project switcher, a primary `New Word` action, the Dictionary nav group with an active/badge state, and footer utilities like Synchronize/Settings) beside the **primary view**. + +**Structure**: `bg-sidebar text-sidebar-foreground` sidebar with `border-e border-sidebar-border`, ~190px wide; nav items = `flex w-full items-center gap-2 rounded-md p-2 text-sm`, hover `hover:bg-sidebar-accent hover:text-sidebar-accent-foreground`, **active** `bg-sidebar-accent text-sidebar-accent-foreground font-medium`. Main region = `bg-background flex flex-col`, fills remaining width. Built on the ShadCN **Sidebar** component (`$lib/components/ui/sidebar`). + +**Responsive**: on narrow screens (`sm-view`, ≤800px) the sidebar collapses to an off-canvas drawer toggled by a hamburger; the primary view takes the full width. diff --git a/frontend/viewer/ds-bundle/components/layouts/app-shell/index.html b/frontend/viewer/ds-bundle/components/layouts/app-shell/index.html new file mode 100644 index 0000000000..72c684a95e --- /dev/null +++ b/frontend/viewer/ds-bundle/components/layouts/app-shell/index.html @@ -0,0 +1,94 @@ + + + + + + +FW Lite — App shell + + + + +
+
+
Light
+

sidebar navigation · primary view

+
+ +
+
+
Browse
+
+ + +
+
+
primary view — the master-detail workspace mounts here
+
+
+
+
+
Dark
+

sidebar navigation · primary view

+
+ +
+
+
Browse
+
+ + +
+
+
primary view — the master-detail workspace mounts here
+
+
+
+
+ + diff --git a/frontend/viewer/ds-bundle/components/layouts/master-detail/index.html b/frontend/viewer/ds-bundle/components/layouts/master-detail/index.html new file mode 100644 index 0000000000..eb4fdfff7d --- /dev/null +++ b/frontend/viewer/ds-bundle/components/layouts/master-detail/index.html @@ -0,0 +1,148 @@ + + + + + + +FW Lite — Master-detail + + + + +
+
+
Light
+

list pane · resizable divider · detail pane

+
+
+
+
Filter 10 words
+ +
+
+ + + +
+
+
+
+
+
Apfel
+ +
+
+
Word
+
+ + +
+
+
+
Gloss
+
+ + +
+
+
+
+
+
+
Dark
+

list pane · resizable divider · detail pane

+
+
+
+
Filter 10 words
+ +
+
+ + + +
+
+
+
+
+
Apfel
+ +
+
+
Word
+
+ + +
+
+
+
Gloss
+
+ + +
+
+
+
+
+
+ + diff --git a/frontend/viewer/ds-bundle/components/layouts/master-detail/master-detail.prompt.md b/frontend/viewer/ds-bundle/components/layouts/master-detail/master-detail.prompt.md new file mode 100644 index 0000000000..c94a498999 --- /dev/null +++ b/frontend/viewer/ds-bundle/components/layouts/master-detail/master-detail.prompt.md @@ -0,0 +1,9 @@ +# Master-detail + +FW Lite's core workspace: a **list pane** (left) beside a **detail pane** (right), with a resizable divider (`paneforge`). Selecting an item in the list opens it in the detail pane. + +**List pane** (~300px, `@container/list`): a sticky filter/search bar (`border-b border-border`) over a scrolling list of entry rows. A row = `rounded-md p-3 hover:bg-accent` with `flex justify-between items-end` inside — headword (`font-semibold`), gloss (`text-sm text-muted-foreground`), and a part-of-speech `Badge`. The **selected** row uses `bg-accent text-accent-foreground`. + +**Detail pane** (flexes to fill): entry header + actions, then the multi-writing-system field editor. + +**Responsive**: side-by-side above `lg-view` (≥801px). Below it, only one pane shows at a time — the list, and tapping an entry pushes the detail over it (back-navigation returns to the list). diff --git a/frontend/viewer/ds-bundle/components/surfaces/card/card.prompt.md b/frontend/viewer/ds-bundle/components/surfaces/card/card.prompt.md new file mode 100644 index 0000000000..a3bd043974 --- /dev/null +++ b/frontend/viewer/ds-bundle/components/surfaces/card/card.prompt.md @@ -0,0 +1,5 @@ +# Card + +Surface container grouping related content. Svelte: `import * as Card from '$lib/components/ui/card';` — `Card.Root / Header / Title / Description / Content / Footer`. + +**Class recipe**: root = `bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm`; header/content/footer use `px-6`; title = `leading-none font-semibold`; description = `text-muted-foreground text-sm`. diff --git a/frontend/viewer/ds-bundle/components/surfaces/card/index.html b/frontend/viewer/ds-bundle/components/surfaces/card/index.html new file mode 100644 index 0000000000..2d7894947e --- /dev/null +++ b/frontend/viewer/ds-bundle/components/surfaces/card/index.html @@ -0,0 +1,57 @@ + + + + + + +FW Lite — Card + + + + +
+
+
Light
+
+
+
Entry synced
+
Changes were merged via CRDT.
+
+
+ The lexeme form and its senses are now up to date across all connected devices. +
+
+ + +
+
+
+
+
Dark
+
+
+
Entry synced
+
Changes were merged via CRDT.
+
+
+ The lexeme form and its senses are now up to date across all connected devices. +
+
+ + +
+
+
+
+ + diff --git a/frontend/viewer/ds-bundle/styles.css b/frontend/viewer/ds-bundle/styles.css new file mode 100644 index 0000000000..981a95be3c --- /dev/null +++ b/frontend/viewer/ds-bundle/styles.css @@ -0,0 +1,8 @@ +/* + * FW Lite — design system entry stylesheet. + * Rendered designs receive this file's transitive @import closure. + * app-compiled.css is the real compiled Tailwind v4 output captured from the + * running FwLite viewer: it carries every design token (6 themes x light/dark), + * the shadcn semantic color layer, the font @import, and the utility layer. + */ +@import "./tokens/app-compiled.css"; diff --git a/frontend/viewer/ds-bundle/tokens/app-compiled.css b/frontend/viewer/ds-bundle/tokens/app-compiled.css new file mode 100644 index 0000000000..01ebe92fb6 --- /dev/null +++ b/frontend/viewer/ds-bundle/tokens/app-compiled.css @@ -0,0 +1,3729 @@ +@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"); +@layer properties; +@layer theme, base, components, utilities; +@layer theme { + :root, :host { --color-red-500: oklch(63.7% 0.237 25.331); --color-red-600: oklch(57.7% 0.245 27.325); --color-orange-600: oklch(64.6% 0.222 41.116); --color-amber-300: oklch(87.9% 0.169 91.605); --color-amber-700: oklch(55.5% 0.163 48.998); --color-lime-300: oklch(89.7% 0.196 126.665); --color-lime-700: oklch(53.2% 0.157 131.589); --color-green-500: oklch(72.3% 0.219 149.579); --color-green-600: oklch(62.7% 0.194 149.214); --color-emerald-300: oklch(84.5% 0.143 164.978); --color-emerald-400: oklch(76.5% 0.177 163.223); --color-emerald-600: oklch(59.6% 0.145 163.225); --color-emerald-700: oklch(50.8% 0.118 165.612); --color-sky-400: oklch(74.6% 0.16 232.661); --color-sky-500: oklch(68.5% 0.169 237.323); --color-sky-600: oklch(58.8% 0.158 241.966); --color-blue-50: oklch(97% 0.014 254.604); --color-blue-300: oklch(80.9% 0.105 251.813); --color-blue-700: oklch(48.8% 0.243 264.376); --color-fuchsia-300: oklch(83.3% 0.145 321.434); --color-fuchsia-700: oklch(51.8% 0.253 323.949); --color-rose-400: oklch(71.2% 0.194 13.428); --color-rose-700: oklch(51.4% 0.222 16.935); --color-gray-200: oklch(92.8% 0.006 264.531); --color-neutral-50: oklch(98.5% 0 0); --color-neutral-500: oklch(55.6% 0 0); --color-black: #000; --color-white: #fff; --spacing: 0.25rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --text-xs: 0.75rem; --text-xs--line-height: calc(1 / 0.75); --text-sm: 0.875rem; --text-sm--line-height: calc(1.25 / 0.875); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-8xl: 6rem; --text-8xl--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-widest: 0.1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --radius-xs: 0.125rem; --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; --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: "Noto Sans", sans-serif; --default-mono-font-family: monospace; --color-border: var(--border); --color-popover-foreground: var(--popover-foreground); --color-popover: var(--popover); } +} +@layer base { + *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box; margin: 0px; padding: 0px; border: 0px solid; } + html, :host { line-height: 1.5; 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: 0px; color: inherit; border-top-width: 1px; } + abbr:where([title]) { text-decoration: underline dotted; } + h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } + a { color: 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: 0px; border-color: inherit; border-collapse: collapse; } + 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; letter-spacing: inherit; color: inherit; border-radius: 0px; 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(currentcolor, transparent); +} +} +} + textarea { resize: vertical; } + ::-webkit-search-decoration { 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: 0px; } + ::-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: 0px; } + ::-webkit-calendar-picker-indicator { line-height: 1; } + 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\/card-header { container: card-header / inline-size; } + .\@container\/editor { container: editor / inline-size; } + .\@container\/list { container: list / inline-size; } + .\@container { container-type: inline-size; } + .pointer-events-auto { pointer-events: auto; } + .pointer-events-none { pointer-events: none; } + .collapse { visibility: collapse; } + .invisible { visibility: hidden; } + .visible { visibility: visible; } + .sr-only { position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-width: 0px; } + .absolute { position: absolute; } + .fixed { position: fixed; } + .relative { position: relative; } + .static { position: static; } + .sticky { position: sticky; } + .inset-0 { inset: calc(var(--spacing) * 0); } + .inset-x-0 { inset-inline: calc(var(--spacing) * 0); } + .inset-y-0 { inset-block: calc(var(--spacing) * 0); } + .inset-s-0 { inset-inline-start: calc(var(--spacing) * 0); } + .inset-s-2 { inset-inline-start: calc(var(--spacing) * 2); } + .start { inset-inline-start: var(--spacing); } + .end { inset-inline-end: var(--spacing); } + .inset-e-0 { inset-inline-end: calc(var(--spacing) * 0); } + .inset-e-1 { inset-inline-end: calc(var(--spacing) * 1); } + .inset-e-2 { inset-inline-end: calc(var(--spacing) * 2); } + .inset-e-3 { inset-inline-end: calc(var(--spacing) * 3); } + .inset-e-4 { inset-inline-end: calc(var(--spacing) * 4); } + .-top-1 { top: calc(var(--spacing) * -1); } + .top-0 { top: calc(var(--spacing) * 0); } + .top-1 { top: calc(var(--spacing) * 1); } + .top-1\.5 { top: calc(var(--spacing) * 1.5); } + .top-1\/2 { top: calc(50%); } + .top-3 { top: calc(var(--spacing) * 3); } + .top-3\.5 { top: calc(var(--spacing) * 3.5); } + .top-4 { top: calc(var(--spacing) * 4); } + .top-\[50\%\] { top: 50%; } + .right-0 { right: calc(var(--spacing) * 0); } + .right-1 { right: calc(var(--spacing) * 1); } + .right-4 { right: calc(var(--spacing) * 4); } + .bottom-0 { bottom: calc(var(--spacing) * 0); } + .bottom-4 { bottom: calc(var(--spacing) * 4); } + .left-1\/2 { left: calc(50%); } + .left-\[50\%\] { left: 50%; } + .-z-10 { z-index: calc(-10); } + .z-0 { z-index: 0; } + .z-1 { z-index: 1; } + .z-10 { z-index: 10; } + .z-20 { z-index: 20; } + .z-48 { z-index: 48; } + .z-49 { z-index: 49; } + .z-50 { z-index: 50; } + .order-first { order: -9999; } + .order-last { order: 9999; } + .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-4 { grid-column: span 4 / span 4; } + .col-span-full { grid-column: 1 / -1; } + .col-start-2 { grid-column-start: 2; } + .row-span-2 { grid-row: span 2 / span 2; } + .row-start-1 { grid-row-start: 1; } + .row-start-2 { grid-row-start: 2; } + .float-right { float: right; } + .container { + width: 100%; + @media (width >= 400px) { + max-width: 400px; +} + @media (width >= 639px) { + max-width: 639px; +} + @media (width >= 767px) { + max-width: 767px; +} + @media (width >= 768px) { + max-width: 768px; +} + @media (width >= 800px) { + max-width: 800px; +} + @media (width >= 800px) { + max-width: 800px; +} + @media (width >= 801px) { + max-width: 801px; +} + @media (width >= 1279px) { + max-width: 1279px; +} + @media (width >= 1280px) { + max-width: 1280px; +} + @media (width >= 40rem) { + max-width: 40rem; +} + @media (width >= 64rem) { + max-width: 64rem; +} + @media (width >= 80rem) { + max-width: 80rem; +} + @media (width >= 96rem) { + max-width: 96rem; +} +} + .m-2 { margin: calc(var(--spacing) * 2); } + .m-3 { margin: calc(var(--spacing) * 3); } + .m-4 { margin: calc(var(--spacing) * 4); } + .m-auto { margin: auto; } + .-mx-1 { margin-inline: calc(var(--spacing) * -1); } + .mx-2 { margin-inline: calc(var(--spacing) * 2); } + .mx-3\.5 { margin-inline: calc(var(--spacing) * 3.5); } + .mx-4 { margin-inline: calc(var(--spacing) * 4); } + .mx-auto { margin-inline: auto; } + .-my-1 { margin-block: calc(var(--spacing) * -1); } + .my-0\! { margin-block: calc(var(--spacing) * 0) !important; } + .my-1 { margin-block: calc(var(--spacing) * 1); } + .my-2 { margin-block: calc(var(--spacing) * 2); } + .my-4 { margin-block: calc(var(--spacing) * 4); } + .my-6 { margin-block: calc(var(--spacing) * 6); } + .ms-2 { margin-inline-start: calc(var(--spacing) * 2); } + .ms-auto { margin-inline-start: auto; } + .me-2 { margin-inline-end: calc(var(--spacing) * 2); } + .prose { + color: var(--tw-prose-body); max-width: 65ch; + & :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.25em; margin-bottom: 1.25em; } + & :where([class~="lead"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-lead); font-size: 1.25em; line-height: 1.6; margin-top: 1.2em; margin-bottom: 1.2em; } + & :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-links); text-decoration: underline; font-weight: 500; } + & :where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-bold); font-weight: 600; } + & :where(a strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; } + & :where(blockquote strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; } + & :where(thead th strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; } + & :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: decimal; margin-top: 1.25em; margin-bottom: 1.25em; padding-inline-start: 1.625em; } + & :where(ol[type="A"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: upper-alpha; } + & :where(ol[type="a"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: lower-alpha; } + & :where():not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: upper-alpha; } + & :where():not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: lower-alpha; } + & :where(ol[type="I"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: upper-roman; } + & :where(ol[type="i"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: lower-roman; } + & :where():not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: upper-roman; } + & :where():not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: lower-roman; } + & :where(ol[type="1"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: decimal; } + & :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: disc; margin-top: 1.25em; margin-bottom: 1.25em; padding-inline-start: 1.625em; } + & :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker { font-weight: 400; color: var(--tw-prose-counters); } + & :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker { color: var(--tw-prose-bullets); } + & :where(dt):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 600; margin-top: 1.25em; } + & :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) { border-color: var(--tw-prose-hr); border-top-width: 1px; margin-top: 3em; margin-bottom: 3em; } + & :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-weight: 500; font-style: italic; color: var(--tw-prose-quotes); border-inline-start-width: 0.25rem; border-inline-start-color: var(--tw-prose-quote-borders); quotes: "“" "”" "‘" "’"; margin-top: 1.6em; margin-bottom: 1.6em; padding-inline-start: 1em; } + & :where(blockquote p:first-of-type):not(:where([class~="not-prose"], [class~="not-prose"] *))::before { content: open-quote; } + & :where(blockquote p:last-of-type):not(:where([class~="not-prose"], [class~="not-prose"] *))::after { content: close-quote; } + & :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 800; font-size: 2.25em; margin-top: 0px; margin-bottom: 0.888889em; line-height: 1.11111; } + & :where(h1 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-weight: 900; color: inherit; } + & :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 700; font-size: 1.5em; margin-top: 2em; margin-bottom: 1em; line-height: 1.33333; } + & :where(h2 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-weight: 800; color: inherit; } + & :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 600; font-size: 1.25em; margin-top: 1.6em; margin-bottom: 0.6em; line-height: 1.6; } + & :where(h3 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-weight: 700; color: inherit; } + & :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 600; margin-top: 1.5em; margin-bottom: 0.5em; line-height: 1.5; } + & :where(h4 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-weight: 700; color: inherit; } + & :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; } + & :where(picture):not(:where([class~="not-prose"], [class~="not-prose"] *)) { display: block; margin-top: 2em; margin-bottom: 2em; } + & :where(video):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; } + & :where(kbd):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-weight: 500; font-family: inherit; color: var(--tw-prose-kbd); box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows); font-size: 0.875em; border-radius: 0.3125rem; padding-top: 0.1875em; padding-inline: 0.375em; padding-bottom: 0.1875em; } + & :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-code); font-weight: 600; font-size: 0.875em; } + & :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before { content: "`"; } + & :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::after { content: "`"; } + & :where(a code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; } + & :where(h1 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; } + & :where(h2 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; font-size: 0.875em; } + & :where(h3 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; font-size: 0.9em; } + & :where(h4 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; } + & :where(blockquote code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; } + & :where(thead th code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; } + & :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-pre-code); background-color: var(--tw-prose-pre-bg); overflow-x: auto; font-weight: 400; font-size: 0.875em; line-height: 1.71429; margin-top: 1.71429em; margin-bottom: 1.71429em; border-radius: 0.375rem; padding-top: 0.857143em; padding-inline: 1.14286em; padding-bottom: 0.857143em; } + & :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { background-color: transparent; border-width: 0px; border-radius: 0px; padding: 0px; font-weight: inherit; color: inherit; font-size: inherit; font-family: inherit; line-height: inherit; } + & :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before { content: none; } + & :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *))::after { content: none; } + & :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) { width: 100%; table-layout: auto; margin-top: 2em; margin-bottom: 2em; font-size: 0.875em; line-height: 1.71429; } + & :where(thead):not(:where([class~="not-prose"], [class~="not-prose"] *)) { border-bottom-width: 1px; border-bottom-color: var(--tw-prose-th-borders); } + & :where(thead th):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 600; vertical-align: bottom; padding-inline: 0.571429em; padding-bottom: 0.571429em; } + & :where(tbody tr):not(:where([class~="not-prose"], [class~="not-prose"] *)) { border-bottom-width: 1px; border-bottom-color: var(--tw-prose-td-borders); } + & :where(tbody tr:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { border-bottom-width: 0px; } + & :where(tbody td):not(:where([class~="not-prose"], [class~="not-prose"] *)) { vertical-align: baseline; } + & :where(tfoot):not(:where([class~="not-prose"], [class~="not-prose"] *)) { border-top-width: 1px; border-top-color: var(--tw-prose-th-borders); } + & :where(tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) { vertical-align: top; } + & :where(th, td):not(:where([class~="not-prose"], [class~="not-prose"] *)) { text-align: start; } + & :where(figure > *):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0px; margin-bottom: 0px; } + & :where(figcaption):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-captions); font-size: 0.875em; line-height: 1.42857; margin-top: 0.857143em; } + --tw-prose-body: oklch(37.3% 0.034 259.733); --tw-prose-headings: oklch(21% 0.034 264.665); --tw-prose-lead: oklch(44.6% 0.03 256.802); --tw-prose-links: oklch(21% 0.034 264.665); --tw-prose-bold: oklch(21% 0.034 264.665); --tw-prose-counters: oklch(55.1% 0.027 264.364); --tw-prose-bullets: oklch(87.2% 0.01 258.338); --tw-prose-hr: oklch(92.8% 0.006 264.531); --tw-prose-quotes: oklch(21% 0.034 264.665); --tw-prose-quote-borders: oklch(92.8% 0.006 264.531); --tw-prose-captions: oklch(55.1% 0.027 264.364); --tw-prose-kbd: oklch(21% 0.034 264.665); --tw-prose-kbd-shadows: color-mix(in oklab, oklch(21% 0.034 264.665) 10%, transparent); --tw-prose-code: oklch(21% 0.034 264.665); --tw-prose-pre-code: oklch(92.8% 0.006 264.531); --tw-prose-pre-bg: oklch(27.8% 0.033 256.848); --tw-prose-th-borders: oklch(87.2% 0.01 258.338); --tw-prose-td-borders: oklch(92.8% 0.006 264.531); --tw-prose-invert-body: oklch(87.2% 0.01 258.338); --tw-prose-invert-headings: #fff; --tw-prose-invert-lead: oklch(70.7% 0.022 261.325); --tw-prose-invert-links: #fff; --tw-prose-invert-bold: #fff; --tw-prose-invert-counters: oklch(70.7% 0.022 261.325); --tw-prose-invert-bullets: oklch(44.6% 0.03 256.802); --tw-prose-invert-hr: oklch(37.3% 0.034 259.733); --tw-prose-invert-quotes: oklch(96.7% 0.003 264.542); --tw-prose-invert-quote-borders: oklch(37.3% 0.034 259.733); --tw-prose-invert-captions: oklch(70.7% 0.022 261.325); --tw-prose-invert-kbd: #fff; --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%); --tw-prose-invert-code: #fff; --tw-prose-invert-pre-code: oklch(87.2% 0.01 258.338); --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%); --tw-prose-invert-th-borders: oklch(44.6% 0.03 256.802); --tw-prose-invert-td-borders: oklch(37.3% 0.034 259.733); font-size: 1rem; line-height: 1.75; + & :where(picture > img):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0px; margin-bottom: 0px; } + & :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0.5em; margin-bottom: 0.5em; } + & :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-start: 0.375em; } + & :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-start: 0.375em; } + & :where(.prose > ul > li p):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0.75em; margin-bottom: 0.75em; } + & :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.25em; } + & :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-bottom: 1.25em; } + & :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.25em; } + & :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-bottom: 1.25em; } + & :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0.75em; margin-bottom: 0.75em; } + & :where(dl):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.25em; margin-bottom: 1.25em; } + & :where(dd):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0.5em; padding-inline-start: 1.625em; } + & :where(hr + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0px; } + & :where(h2 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0px; } + & :where(h3 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0px; } + & :where(h4 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0px; } + & :where(thead th:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-start: 0px; } + & :where(thead th:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-end: 0px; } + & :where(tbody td, tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-top: 0.571429em; padding-inline: 0.571429em; padding-bottom: 0.571429em; } + & :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-start: 0px; } + & :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-end: 0px; } + & :where(figure):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; } + & :where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0px; } + & :where(.prose > :last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-bottom: 0px; } +} + .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-auto { margin-top: auto; } + .-mr-0\.5 { margin-right: calc(var(--spacing) * -0.5); } + .mr-1 { margin-right: calc(var(--spacing) * 1); } + .mr-2 { margin-right: calc(var(--spacing) * 2); } + .mr-4 { margin-right: calc(var(--spacing) * 4); } + .-mb-0\.5 { margin-bottom: calc(var(--spacing) * -0.5); } + .mb-1 { margin-bottom: calc(var(--spacing) * 1); } + .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-6 { margin-bottom: calc(var(--spacing) * 6); } + .ml-1 { margin-left: calc(var(--spacing) * 1); } + .ml-2 { margin-left: calc(var(--spacing) * 2); } + .ml-4 { margin-left: calc(var(--spacing) * 4); } + .ml-\[2px\] { margin-left: 2px; } + .ml-auto { margin-left: auto; } + .i-mdi-ab-testing { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M4 2a2 2 0 0 0-2 2v8h2V8h2v4h2V4a2 2 0 0 0-2-2zm0 2h2v2H4m18 9.5V14a2 2 0 0 0-2-2h-4v10h4a2 2 0 0 0 2-2v-1.5a1.54 1.54 0 0 0-1.5-1.5a1.54 1.54 0 0 0 1.5-1.5M20 20h-2v-2h2zm0-4h-2v-2h2M5.79 21.61l-1.58-1.22l14-18l1.58 1.22Z'/%3E%3C/svg%3E"); } + .i-mdi-account { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4'/%3E%3C/svg%3E"); } + .i-mdi-account-circle { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 19.2c-2.5 0-4.71-1.28-6-3.2c.03-2 4-3.1 6-3.1s5.97 1.1 6 3.1a7.23 7.23 0 0 1-6 3.2M12 5a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3m0-3A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10c0-5.53-4.5-10-10-10'/%3E%3C/svg%3E"); } + .i-mdi-alert { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2z'/%3E%3C/svg%3E"); } + .i-mdi-alert-circle { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M13 13h-2V7h2m0 10h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2'/%3E%3C/svg%3E"); } + .i-mdi-alert-circle-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M11 15h2v2h-2zm0-8h2v6h-2zm1-5C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 18a8 8 0 0 1-8-8a8 8 0 0 1 8-8a8 8 0 0 1 8 8a8 8 0 0 1-8 8'/%3E%3C/svg%3E"); } + .i-mdi-alert-octagram { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M2.2 16.06L3.88 12L2.2 7.94l4.06-1.68L7.94 2.2L12 3.88l4.06-1.68l1.68 4.06l4.06 1.68L20.12 12l1.68 4.06l-4.06 1.68l-1.68 4.06L12 20.12L7.94 21.8l-1.68-4.06zM13 17v-2h-2v2zm0-4V7h-2v6z'/%3E%3C/svg%3E"); } + .i-mdi-api { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M7 7H5a2 2 0 0 0-2 2v8h2v-4h2v4h2V9a2 2 0 0 0-2-2m0 4H5V9h2m7-2h-4v10h2v-4h2a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2m0 4h-2V9h2m6 0v6h1v2h-4v-2h1V9h-1V7h4v2Z'/%3E%3C/svg%3E"); } + .i-mdi-arrow-down { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M11 4h2v12l5.5-5.5l1.42 1.42L12 19.84l-7.92-7.92L5.5 10.5L11 16z'/%3E%3C/svg%3E"); } + .i-mdi-arrow-down-bold { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M9 4h6v8h4.84L12 19.84L4.16 12H9z'/%3E%3C/svg%3E"); } + .i-mdi-arrow-left-bold { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M20 9v6h-8v4.84L4.16 12L12 4.16V9z'/%3E%3C/svg%3E"); } + .i-mdi-arrow-left-right-bold { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M8 14v4l-6-6l6-6v4h8V6l6 6l-6 6v-4z'/%3E%3C/svg%3E"); } + .i-mdi-arrow-right-bold { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M4 15V9h8V4.16L19.84 12L12 19.84V15z'/%3E%3C/svg%3E"); } + .i-mdi-arrow-up-bold { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M15 20H9v-8H4.16L12 4.16L19.84 12H15z'/%3E%3C/svg%3E"); } + .i-mdi-arrow-up-down-bold { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M10 8H6l6-6l6 6h-4v8h4l-6 6l-6-6h4z'/%3E%3C/svg%3E"); } + .i-mdi-auto-fix { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M7.5 5.6L5 7l1.4-2.5L5 2l2.5 1.4L10 2L8.6 4.5L10 7zm12 9.8L22 14l-1.4 2.5L22 19l-2.5-1.4L17 19l1.4-2.5L17 14zM22 2l-1.4 2.5L22 7l-2.5-1.4L17 7l1.4-2.5L17 2l2.5 1.4zm-8.66 10.78l2.44-2.44l-2.12-2.12l-2.44 2.44zm1.03-5.49l2.34 2.34c.39.37.39 1.02 0 1.41L5.04 22.71c-.39.39-1.04.39-1.41 0l-2.34-2.34c-.39-.37-.39-1.02 0-1.41L12.96 7.29c.39-.39 1.04-.39 1.41 0'/%3E%3C/svg%3E"); } + .i-mdi-block-helper { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 0a12 12 0 0 1 12 12a12 12 0 0 1-12 12A12 12 0 0 1 0 12A12 12 0 0 1 12 0m0 2A10 10 0 0 0 2 12c0 2.4.85 4.6 2.26 6.33L18.33 4.26A10 10 0 0 0 12 2m0 20a10 10 0 0 0 10-10c0-2.4-.85-4.6-2.26-6.33L5.67 19.74A10 10 0 0 0 12 22'/%3E%3C/svg%3E"); } + .i-mdi-book-alphabet { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M5.81 2C4.83 2.09 4 3 4 4v16c0 1.05.95 2 2 2h12c1.05 0 2-.95 2-2V4a2 2 0 0 0-2-2h-6v7L9.5 7.5L7 9V2zM12 13h1a1 1 0 0 1 1 1v4h-1v-2h-1v2h-1v-4a1 1 0 0 1 1-1m0 1v1h1v-1zm3 1h3v1l-2 3h2v1h-3v-1l2-3h-2z'/%3E%3C/svg%3E"); } + .i-mdi-book-arrow-down-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M13.09 20c.12.72.37 1.39.72 2H6c-1.11 0-2-.89-2-2V4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v9.09c-.33-.05-.66-.09-1-.09s-.67.04-1 .09V4h-5v8l-2.5-2.25L8 12V4H6v16zM20 20v-4h-2v4h-2l3 3l3-3z'/%3E%3C/svg%3E"); } + .i-mdi-book-arrow-left-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M13.09 20c.12.72.37 1.39.72 2H6c-1.11 0-2-.89-2-2V4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v9.09c-.33-.05-.66-.09-1-.09s-.67.04-1 .09V4h-5v8l-2.5-2.25L8 12V4H6v16zM18 18v-2l-3 3l3 3v-2h4v-2z'/%3E%3C/svg%3E"); } + .i-mdi-book-edit-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M6 20h5v2H6c-1.11 0-2-.89-2-2V4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v6.3c-.22.12-.43.26-.61.44L18 12.13V4h-5v8l-2.5-2.25L8 12V4H6zm16.85-6.53l-1.32-1.32c-.2-.2-.53-.2-.72 0l-.98.98l2.04 2.04l.98-.98c.2-.19.2-.52 0-.72M13 19.96V22h2.04l6.13-6.12l-2.04-2.05z'/%3E%3C/svg%3E"); } + .i-mdi-book-open-page-variant { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m19 2l-5 4.5v11l5-4.5zM6.5 5C4.55 5 2.45 5.4 1 6.5v14.66c0 .25.25.5.5.5c.1 0 .15-.07.25-.07c1.35-.65 3.3-1.09 4.75-1.09c1.95 0 4.05.4 5.5 1.5c1.35-.85 3.8-1.5 5.5-1.5c1.65 0 3.35.31 4.75 1.06c.1.05.15.03.25.03c.25 0 .5-.25.5-.5V6.5c-.6-.45-1.25-.75-2-1V19c-1.1-.35-2.3-.5-3.5-.5c-1.7 0-4.15.65-5.5 1.5V6.5C10.55 5.4 8.45 5 6.5 5'/%3E%3C/svg%3E"); } + .i-mdi-book-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M18 2a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm0 2h-5v8l-2.5-2.25L8 12V4H6v16h12z'/%3E%3C/svg%3E"); } + .i-mdi-book-plus-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M13.09 20c.12.72.37 1.39.72 2H6c-1.11 0-2-.89-2-2V4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v9.09c-.33-.05-.66-.09-1-.09s-.67.04-1 .09V4h-5v8l-2.5-2.25L8 12V4H6v16zM20 18v-3h-2v3h-3v2h3v3h2v-3h3v-2z'/%3E%3C/svg%3E"); } + .i-mdi-book-search-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M15.5 12c2.5 0 4.5 2 4.5 4.5c0 .88-.25 1.71-.69 2.4l3.08 3.1L21 23.39l-3.12-3.07c-.69.43-1.51.68-2.38.68c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5m0 2a2.5 2.5 0 0 0-2.5 2.5a2.5 2.5 0 0 0 2.5 2.5a2.5 2.5 0 0 0 2.5-2.5a2.5 2.5 0 0 0-2.5-2.5M13 4v8l-2.5-2.25L8 12V4H6v16h4c.54.81 1.23 1.5 2.03 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v7.81c-.58-.55-1.25-1-2-1.31V4z'/%3E%3C/svg%3E"); } + .i-mdi-bug { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M14 12h-4v-2h4m0 6h-4v-2h4m6-6h-2.81a6 6 0 0 0-1.82-1.96L17 4.41L15.59 3l-2.17 2.17a6 6 0 0 0-2.83 0L8.41 3L7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20z'/%3E%3C/svg%3E"); } + .i-mdi-bug-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M20 8h-2.81c-.45-.8-1.07-1.5-1.82-2L17 4.41L15.59 3l-2.17 2.17a6 6 0 0 0-2.83 0L8.41 3L7 4.41L8.62 6c-.75.5-1.36 1.21-1.81 2H4v2h2.09c-.06.33-.09.66-.09 1v1H4v2h2v1c0 .34.03.67.09 1H4v2h2.81A5.99 5.99 0 0 0 15 20.18c.91-.52 1.67-1.28 2.19-2.18H20v-2h-2.09c.06-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.03-.67-.09-1H20zm-4 7a4 4 0 0 1-4 4a4 4 0 0 1-4-4v-4a4 4 0 0 1 4-4a4 4 0 0 1 4 4zm-2-5v2h-4v-2zm-4 4h4v2h-4z'/%3E%3C/svg%3E"); } + .i-mdi-cake-variant { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 6a2 2 0 0 0 2-2c0-.38-.1-.73-.29-1.03L12 0l-1.71 2.97c-.19.3-.29.65-.29 1.03a2 2 0 0 0 2 2m4.6 10l-1.07-1.08L14.45 16c-1.3 1.29-3.58 1.3-4.89 0L8.5 14.92L7.4 16a3.47 3.47 0 0 1-4.4.39V21a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-4.61a3.47 3.47 0 0 1-4.4-.39M18 9h-5V7h-2v2H6a3 3 0 0 0-3 3v1.54c0 1.08.88 1.96 1.96 1.96c.54 0 1.04-.2 1.38-.57L8.5 12.8l2.11 2.13c.74.74 2.03.74 2.77 0l2.12-2.13l2.15 2.13c.35.37.85.57 1.38.57c1.08 0 1.97-.88 1.97-1.96V12a3 3 0 0 0-3-3'/%3E%3C/svg%3E"); } + .i-mdi-calendar-clock { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M15 13h1.5v2.82l2.44 1.41l-.75 1.3L15 16.69zm4-5H5v11h4.67c-.43-.91-.67-1.93-.67-3a7 7 0 0 1 7-7c1.07 0 2.09.24 3 .67zM5 21a2 2 0 0 1-2-2V5c0-1.11.89-2 2-2h1V1h2v2h8V1h2v2h1a2 2 0 0 1 2 2v6.1c1.24 1.26 2 2.99 2 4.9a7 7 0 0 1-7 7c-1.91 0-3.64-.76-4.9-2zm11-9.85A4.85 4.85 0 0 0 11.15 16c0 2.68 2.17 4.85 4.85 4.85A4.85 4.85 0 0 0 20.85 16c0-2.68-2.17-4.85-4.85-4.85'/%3E%3C/svg%3E"); } + .i-mdi-cellphone { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M17 19H7V5h10m0-4H7c-1.11 0-2 .89-2 2v18a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2'/%3E%3C/svg%3E"); } + .i-mdi-chart-line { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m16 11.78l4.24-7.33l1.73 1l-5.23 9.05l-6.51-3.75L5.46 19H22v2H2V3h2v14.54L9.5 8z'/%3E%3C/svg%3E"); } + .i-mdi-check { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59z'/%3E%3C/svg%3E"); } + .i-mdi-check-circle { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10s10-4.5 10-10S17.5 2 12 2m-2 15l-5-5l1.41-1.41L10 14.17l7.59-7.59L19 8z'/%3E%3C/svg%3E"); } + .i-mdi-checkbox-marked { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m10 17l-5-5l1.41-1.42L10 14.17l7.59-7.59L19 8m0-5H5c-1.11 0-2 .89-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2'/%3E%3C/svg%3E"); } + .i-mdi-chevron-double-left { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M18.41 7.41L17 6l-6 6l6 6l1.41-1.41L13.83 12zm-6 0L11 6l-6 6l6 6l1.41-1.41L7.83 12z'/%3E%3C/svg%3E"); } + .i-mdi-chevron-down { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z'/%3E%3C/svg%3E"); } + .i-mdi-chevron-left { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M15.41 16.58L10.83 12l4.58-4.59L14 6l-6 6l6 6z'/%3E%3C/svg%3E"); } + .i-mdi-chevron-right { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z'/%3E%3C/svg%3E"); } + .i-mdi-chevron-up { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z'/%3E%3C/svg%3E"); } + .i-mdi-circle { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2'/%3E%3C/svg%3E"); } + .i-mdi-close { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z'/%3E%3C/svg%3E"); } + .i-mdi-cloud { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M6.5 20q-2.28 0-3.89-1.57Q1 16.85 1 14.58q0-1.95 1.17-3.48q1.18-1.53 3.08-1.95q.63-2.3 2.5-3.72Q9.63 4 12 4q2.93 0 4.96 2.04Q19 8.07 19 11q1.73.2 2.86 1.5q1.14 1.28 1.14 3q0 1.88-1.31 3.19T18.5 20Z'/%3E%3C/svg%3E"); } + .i-mdi-cloud-arrow-down { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M13 19c0 .34.04.67.09 1H6.5c-1.5 0-2.81-.5-3.89-1.57C1.54 17.38 1 16.09 1 14.58q0-1.95 1.17-3.48C3.34 9.57 4 9.43 5.25 9.15c.42-1.53 1.25-2.77 2.5-3.72S10.42 4 12 4c1.95 0 3.6.68 4.96 2.04S19 9.05 19 11c1.15.13 2.1.63 2.86 1.5c.51.57.84 1.21 1 1.92A5.9 5.9 0 0 0 19 13c-3.31 0-6 2.69-6 6m7-3h-2v4h-2l3 3l3-3h-2z'/%3E%3C/svg%3E"); } + .i-mdi-cloud-arrow-up { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M13 19c0 .34.04.67.09 1H6.5c-1.5 0-2.81-.5-3.89-1.57C1.54 17.38 1 16.09 1 14.58q0-1.95 1.17-3.48C3.34 9.57 4 9.43 5.25 9.15c.42-1.53 1.25-2.77 2.5-3.72S10.42 4 12 4c1.95 0 3.6.68 4.96 2.04S19 9.05 19 11c1.15.13 2.1.63 2.86 1.5c.51.57.84 1.21 1 1.92A5.9 5.9 0 0 0 19 13c-3.31 0-6 2.69-6 6m3-1h2v4h2v-4h2l-3-3z'/%3E%3C/svg%3E"); } + .i-mdi-cloud-download-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M6.5 20q-2.28 0-3.89-1.57Q1 16.85 1 14.58q0-1.95 1.17-3.48q1.18-1.53 3.08-1.95q.43-1.8 2.13-3.42Q9.07 4.1 11 4.1q.83 0 1.41.59q.59.59.59 1.41v6.05l1.6-1.55L16 12l-4 4l-4-4l1.4-1.4l1.6 1.55V6.1q-1.9.35-2.95 1.84T7 11h-.5q-1.45 0-2.47 1.03Q3 13.05 3 14.5T4.03 17q1.02 1 2.47 1h12q1.05 0 1.77-.73q.73-.72.73-1.77t-.73-1.77Q19.55 13 18.5 13H17v-2q0-1.2-.55-2.24Q15.9 7.73 15 7V4.68q1.85.87 2.93 2.58Q19 9 19 11q1.73.2 2.86 1.5q1.14 1.28 1.14 3q0 1.88-1.31 3.19T18.5 20M12 11.05'/%3E%3C/svg%3E"); } + .i-mdi-cloud-off-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19.8 22.6L17.15 20H6.5q-2.3 0-3.9-1.6T1 14.5q0-1.92 1.19-3.42q1.19-1.51 3.06-1.93q.08-.2.15-.39q.1-.19.15-.41L1.4 4.2l1.4-1.4l18.4 18.4M6.5 18h8.65L7.1 9.95q-.05.28-.07.55q-.03.23-.03.5h-.5q-1.45 0-2.47 1.03Q3 13.05 3 14.5T4.03 17q1.02 1 2.47 1m15.1.75l-1.45-1.4q.43-.35.64-.81T21 15.5q0-1.05-.73-1.77q-.72-.73-1.77-.73H17v-2q0-2.07-1.46-3.54Q14.08 6 12 6q-.67 0-1.3.16q-.63.17-1.2.52L8.05 5.23q.88-.6 1.86-.92Q10.9 4 12 4q2.93 0 4.96 2.04Q19 8.07 19 11q1.73.2 2.86 1.5q1.14 1.28 1.14 3q0 1-.37 1.81q-.38.84-1.03 1.44m-6.77-6.72'/%3E%3C/svg%3E"); } + .i-mdi-cloud-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M6.5 20q-2.28 0-3.89-1.57Q1 16.85 1 14.58q0-1.95 1.17-3.48q1.18-1.53 3.08-1.95q.63-2.3 2.5-3.72Q9.63 4 12 4q2.93 0 4.96 2.04Q19 8.07 19 11q1.73.2 2.86 1.5q1.14 1.28 1.14 3q0 1.88-1.31 3.19T18.5 20m-12-2h12q1.05 0 1.77-.73q.73-.72.73-1.77t-.73-1.77Q19.55 13 18.5 13H17v-2q0-2.07-1.46-3.54Q14.08 6 12 6Q9.93 6 8.46 7.46Q7 8.93 7 11h-.5q-1.45 0-2.47 1.03Q3 13.05 3 14.5T4.03 17q1.02 1 2.47 1m5.5-6'/%3E%3C/svg%3E"); } + .i-mdi-cloud-upload-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M6.5 20q-2.28 0-3.89-1.57Q1 16.85 1 14.58q0-1.95 1.17-3.48q1.18-1.53 3.08-1.95q.63-2.3 2.5-3.72Q9.63 4 12 4q2.93 0 4.96 2.04Q19 8.07 19 11q1.73.2 2.86 1.5q1.14 1.28 1.14 3q0 1.88-1.31 3.19T18.5 20H13q-.82 0-1.41-.59Q11 18.83 11 18v-5.15L9.4 14.4L8 13l4-4l4 4l-1.4 1.4l-1.6-1.55V18h5.5q1.05 0 1.77-.73q.73-.72.73-1.77t-.73-1.77Q19.55 13 18.5 13H17v-2q0-2.07-1.46-3.54Q14.08 6 12 6Q9.93 6 8.46 7.46Q7 8.93 7 11h-.5q-1.45 0-2.47 1.03Q3 13.05 3 14.5T4.03 17q1.02 1 2.47 1H9v2m3-7'/%3E%3C/svg%3E"); } + .i-mdi-code-tags { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m14.6 16.6l4.6-4.6l-4.6-4.6L16 6l6 6l-6 6zm-5.2 0L4.8 12l4.6-4.6L8 6l-6 6l6 6z'/%3E%3C/svg%3E"); } + .i-mdi-cog { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 15.5A3.5 3.5 0 0 1 8.5 12A3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5a3.5 3.5 0 0 1-3.5 3.5m7.43-2.53c.04-.32.07-.64.07-.97s-.03-.66-.07-1l2.11-1.63c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.31-.61-.22l-2.49 1c-.52-.39-1.06-.73-1.69-.98l-.37-2.65A.506.506 0 0 0 14 2h-4c-.25 0-.46.18-.5.42l-.37 2.65c-.63.25-1.17.59-1.69.98l-2.49-1c-.22-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11c-.04.34-.07.67-.07 1s.03.65.07.97l-2.11 1.66c-.19.15-.25.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1.01c.52.4 1.06.74 1.69.99l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.63-.26 1.17-.59 1.69-.99l2.49 1.01c.22.08.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64z'/%3E%3C/svg%3E"); } + .i-mdi-cog-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 8a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 2a2 2 0 0 0-2 2a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2m-2 12c-.25 0-.46-.18-.5-.42l-.37-2.65c-.63-.25-1.17-.59-1.69-.99l-2.49 1.01c-.22.08-.49 0-.61-.22l-2-3.46a.493.493 0 0 1 .12-.64l2.11-1.66L4.5 12l.07-1l-2.11-1.63a.493.493 0 0 1-.12-.64l2-3.46c.12-.22.39-.31.61-.22l2.49 1c.52-.39 1.06-.73 1.69-.98l.37-2.65c.04-.24.25-.42.5-.42h4c.25 0 .46.18.5.42l.37 2.65c.63.25 1.17.59 1.69.98l2.49-1c.22-.09.49 0 .61.22l2 3.46c.13.22.07.49-.12.64L19.43 11l.07 1l-.07 1l2.11 1.63c.19.15.25.42.12.64l-2 3.46c-.12.22-.39.31-.61.22l-2.49-1c-.52.39-1.06.73-1.69.98l-.37 2.65c-.04.24-.25.42-.5.42zm1.25-18l-.37 2.61c-1.2.25-2.26.89-3.03 1.78L5.44 7.35l-.75 1.3L6.8 10.2a5.55 5.55 0 0 0 0 3.6l-2.12 1.56l.75 1.3l2.43-1.04c.77.88 1.82 1.52 3.01 1.76l.37 2.62h1.52l.37-2.61c1.19-.25 2.24-.89 3.01-1.77l2.43 1.04l.75-1.3l-2.12-1.55c.4-1.17.4-2.44 0-3.61l2.11-1.55l-.75-1.3l-2.41 1.04a5.42 5.42 0 0 0-3.03-1.77L12.75 4z'/%3E%3C/svg%3E"); } + .i-mdi-comment-text-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M9 22a1 1 0 0 1-1-1v-3H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6.1l-3.7 3.71c-.2.19-.45.29-.7.29zm1-6v3.08L13.08 16H20V4H4v12zM6 7h12v2H6zm0 4h9v2H6z'/%3E%3C/svg%3E"); } + .i-mdi-contain { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M2 3h6v2H4v14h4v2H2zm5 14v-2h2v2zm4 0v-2h2v2zm4 0v-2h2v2zm7-14v18h-6v-2h4V5h-4V3z'/%3E%3C/svg%3E"); } + .i-mdi-contain-end { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M7 17v-2h2v2zm4 0v-2h2v2zm4 0v-2h2v2zm7-14v18h-6v-2h4V5h-4V3z'/%3E%3C/svg%3E"); } + .i-mdi-contain-start { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M2 3h6v2H4v14h4v2H2zm5 14v-2h2v2zm4 0v-2h2v2zm4 0v-2h2v2z'/%3E%3C/svg%3E"); } + .i-mdi-content-copy { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19 21H8V7h11m0-2H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2m-3-4H4a2 2 0 0 0-2 2v14h2V3h12z'/%3E%3C/svg%3E"); } + .i-mdi-content-save { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M15 9H5V5h10m-3 14a3 3 0 0 1-3-3a3 3 0 0 1 3-3a3 3 0 0 1 3 3a3 3 0 0 1-3 3m5-16H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7z'/%3E%3C/svg%3E"); } + .i-mdi-database-refresh { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 3c4.42 0 8 1.79 8 4s-3.58 4-8 4s-8-1.79-8-4s3.58-4 8-4M4 9c0 2.21 3.58 4 8 4c1.11 0 2.18-.11 3.14-.32c-.95.86-1.64 1.99-1.96 3.28L12 16c-4.42 0-8-1.79-8-4zm16 0v2h-.5l-.6.03c.7-.6 1.1-1.29 1.1-2.03M4 14c0 2.21 3.58 4 8 4l1-.03c.09 1.06.42 2.03.95 2.91L12 21c-4.42 0-8-1.79-8-4zm15-.5c1.11 0 2.11.45 2.83 1.17L23 13.5v4h-4l1.77-1.77A2.5 2.5 0 1 0 21 19h1.71A3.99 3.99 0 0 1 19 21.5c-2.21 0-4-1.79-4-4s1.79-4 4-4'/%3E%3C/svg%3E"); } + .i-mdi-delete { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19 4h-3.5l-1-1h-5l-1 1H5v2h14M6 19a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7H6z'/%3E%3C/svg%3E"); } + .i-mdi-dock-left { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2m0 14H9V6h11Z'/%3E%3C/svg%3E"); } + .i-mdi-dots-horizontal { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M16 12a2 2 0 0 1 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2m-6 0a2 2 0 0 1 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2m-6 0a2 2 0 0 1 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2'/%3E%3C/svg%3E"); } + .i-mdi-dots-vertical { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); } + .i-mdi-download { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M5 20h14v-2H5m14-9h-4V3H9v6H5l7 7z'/%3E%3C/svg%3E"); } + .i-mdi-drag-vertical { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M9 3h2v2H9zm4 0h2v2h-2zM9 7h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2z'/%3E%3C/svg%3E"); } + .i-mdi-email-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2zm-2 0l-8 5l-8-5zm0 12H4V8l8 5l8-5z'/%3E%3C/svg%3E"); } + .i-mdi-equal { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19 10H5V8h14zm0 6H5v-2h14z'/%3E%3C/svg%3E"); } + .i-mdi-eye { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 9a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5a5 5 0 0 1 5-5a5 5 0 0 1 5 5a5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5'/%3E%3C/svg%3E"); } + .i-mdi-file-alert-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M20 17h2v-2h-2zm0-10v6h2V7M4 2c-1.11 0-2 .89-2 2v16c0 1.11.89 2 2 2h12c1.11 0 2-.89 2-2V8l-6-6M4 4h7v5h5v11H4Z'/%3E%3C/svg%3E"); } + .i-mdi-file-export { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6m-1 1.5L18.5 9H13m-4.07 3.22H16v7.07l-2.12-2.12L11.05 20l-2.83-2.83l2.83-2.82'/%3E%3C/svg%3E"); } + .i-mdi-file-eye { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M17 18c.56 0 1 .44 1 1s-.44 1-1 1s-1-.44-1-1s.44-1 1-1m0-3c-2.73 0-5.06 1.66-6 4c.94 2.34 3.27 4 6 4s5.06-1.66 6-4c-.94-2.34-3.27-4-6-4m0 6.5a2.5 2.5 0 0 1-2.5-2.5a2.5 2.5 0 0 1 2.5-2.5a2.5 2.5 0 0 1 2.5 2.5a2.5 2.5 0 0 1-2.5 2.5m-7.86-1.75L8.85 19l.29-.74C10.43 15.06 13.5 13 17 13c1.05 0 2.06.21 3 .56V8l-6-6H6c-1.11 0-2 .89-2 2v16a2 2 0 0 0 2 2h4.5c-.55-.66-1-1.42-1.36-2.25M13 3.5L18.5 9H13z'/%3E%3C/svg%3E"); } + .i-mdi-file-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zm4 18H6V4h7v5h5z'/%3E%3C/svg%3E"); } + .i-mdi-filter { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M14 12v7.88c.04.3-.06.62-.29.83a.996.996 0 0 1-1.41 0l-2.01-2.01a.99.99 0 0 1-.29-.83V12h-.03L4.21 4.62a1 1 0 0 1 .17-1.4c.19-.14.4-.22.62-.22h14c.22 0 .43.08.62.22a1 1 0 0 1 .17 1.4L14.03 12z'/%3E%3C/svg%3E"); } + .i-mdi-filter-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M15 19.88c.04.3-.06.62-.29.83a.996.996 0 0 1-1.41 0L9.29 16.7a.99.99 0 0 1-.29-.83v-5.12L4.21 4.62a1 1 0 0 1 .17-1.4c.19-.14.4-.22.62-.22h14c.22 0 .43.08.62.22a1 1 0 0 1 .17 1.4L15 10.75zM7.04 5L11 10.06v5.52l2 2v-7.53L16.96 5z'/%3E%3C/svg%3E"); } + .i-mdi-folder-open-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M6.1 10L4 18V8h17a2 2 0 0 0-2-2h-7l-2-2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h15c.9 0 1.7-.6 1.9-1.5l2.3-8.5zM19 18H6l1.6-6h13z'/%3E%3C/svg%3E"); } + .i-mdi-folder-search { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M16.5 12c2.5 0 4.5 2 4.5 4.5c0 .88-.25 1.71-.69 2.4l3.08 3.1L22 23.39l-3.12-3.07c-.69.43-1.51.68-2.38.68c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5m0 2a2.5 2.5 0 0 0-2.5 2.5a2.5 2.5 0 0 0 2.5 2.5a2.5 2.5 0 0 0 2.5-2.5a2.5 2.5 0 0 0-2.5-2.5M9 4l2 2h8a2 2 0 0 1 2 2v3.81A6.48 6.48 0 0 0 16.5 10a6.5 6.5 0 0 0-6.5 6.5c0 1.29.37 2.5 1 3.5H3a2 2 0 0 1-2-2V6c0-1.11.89-2 2-2z'/%3E%3C/svg%3E"); } + .i-mdi-format-list-bulleted-square { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M3 4h4v4H3zm6 1v2h12V5zm-6 5h4v4H3zm6 1v2h12v-2zm-6 5h4v4H3zm6 1v2h12v-2z'/%3E%3C/svg%3E"); } + .i-mdi-format-list-text { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M2 14h6v6H2M16 8h-6v2h6M2 10h6V4H2m8 0v2h12V4M10 20h6v-2h-6m0-2h12v-2H10'/%3E%3C/svg%3E"); } + .i-mdi-forum-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M15 4v7H5.17L4 12.17V4zm1-2H3a1 1 0 0 0-1 1v14l4-4h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1m5 4h-2v9H6v2a1 1 0 0 0 1 1h11l4 4V7a1 1 0 0 0-1-1'/%3E%3C/svg%3E"); } + .i-mdi-generator-portable { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M7 2c-1.1 0-2 .9-2 2v2H4c-1.1 0-2 .9-2 2v12h2v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h10v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h2V8a2 2 0 0 0-2-2h-1V4a2 2 0 0 0-2-2zm7 8V8h6v2zm0 4v-2h6v2zM7 4h10v2H7zm0 4v4h2l-3 6v-4H4z'/%3E%3C/svg%3E"); } + .i-mdi-guitar-electric { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19.59 3H22v2h-1.59l-5.29 5.29l-1.41-1.39zM12 9c.26 0 .5.1.71.3l2 2c.18.2.29.43.29.7l-.1.4l-4 8c-.19.35-.54.53-.9.53c-.35 0-.71-.18-.89-.53l-1.86-3.7l-3.7-1.8c-.37-.2-.55-.55-.55-.9s.18-.7.55-.9l8-4c.14-.1.29-.1.45-.1m-2.65 2.82l-.7.68l2.85 2.85l.68-.7zm-1.41 1.41l-.71.71l2.83 2.83l.71-.71z'/%3E%3C/svg%3E"); } + .i-mdi-help-circle { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m15.07 11.25l-.9.92C13.45 12.89 13 13.5 13 15h-2v-.5c0-1.11.45-2.11 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 0 0-2-2a2 2 0 0 0-2 2H8a4 4 0 0 1 4-4a4 4 0 0 1 4 4a3.2 3.2 0 0 1-.93 2.25M13 19h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10c0-5.53-4.5-10-10-10'/%3E%3C/svg%3E"); } + .i-mdi-help-circle-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M11 18h2v-2h-2zm1-16A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m0-14a4 4 0 0 0-4 4h2a2 2 0 0 1 2-2a2 2 0 0 1 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5a4 4 0 0 0-4-4'/%3E%3C/svg%3E"); } + .i-mdi-history { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M13.5 8H12v5l4.28 2.54l.72-1.21l-3.5-2.08zM13 3a9 9 0 0 0-9 9H1l3.96 4.03L9 12H6a7 7 0 0 1 7-7a7 7 0 0 1 7 7a7 7 0 0 1-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.9 8.9 0 0 0 13 21a9 9 0 0 0 9-9a9 9 0 0 0-9-9'/%3E%3C/svg%3E"); } + .i-mdi-image { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m8.5 13.5l2.5 3l3.5-4.5l4.5 6H5m16 1V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2'/%3E%3C/svg%3E"); } + .i-mdi-image-broken-variant { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M21 5v6.59l-3-3.01l-4 4.01l-4-4l-4 4l-3-3.01V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2m-3 6.42l3 3.01V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-6.58l3 2.99l4-4l4 4'/%3E%3C/svg%3E"); } + .i-mdi-image-refresh { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 18.5c0 .89.18 1.73.5 2.5H5a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h14a2 2 0 0 1 2 2v7.5c-.77-.32-1.61-.5-2.5-.5c-1.21 0-2.34.34-3.31.92L14.5 12L11 16.5l-2.5-3L5 18h7.03c-.03.17-.03.33-.03.5m10 0v-4l-1.17 1.17A4 4 0 0 0 18 14.5c-2.21 0-4 1.79-4 4s1.79 4 4 4c1.68 0 3.12-1.03 3.71-2.5H20a2.5 2.5 0 1 1-.23-3.27L18 18.5z'/%3E%3C/svg%3E"); } + .i-mdi-information { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2'/%3E%3C/svg%3E"); } + .i-mdi-information-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M11 9h2V7h-2m1 13c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m-1 15h2v-6h-2z'/%3E%3C/svg%3E"); } + .i-mdi-information-variant-circle { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2S2 6.5 2 12s4.5 10 10 10m.3-14.71c.2-.18.44-.29.7-.29c.27 0 .5.11.71.29c.19.21.29.45.29.71c0 .27-.1.5-.29.71c-.21.19-.44.29-.71.29c-.26 0-.5-.1-.7-.29c-.19-.21-.3-.44-.3-.71c0-.26.11-.5.3-.71m-2.5 4.68s2.17-1.72 2.96-1.79c.74-.06.59.79.52 1.23l-.01.06c-.14.53-.31 1.17-.48 1.78c-.38 1.39-.75 2.75-.66 3c.1.34.72-.09 1.17-.39c.06-.04.11-.08.16-.11c0 0 .08-.08.16.03c.02.03.04.06.06.08c.09.14.14.19.02.27l-.04.02c-.22.15-1.16.81-1.54 1.05c-.41.27-1.98 1.17-1.74-.58c.21-1.23.49-2.29.71-3.12c.41-1.5.59-2.18-.33-1.59c-.37.22-.59.36-.72.45c-.11.08-.12.08-.19-.05l-.03-.06l-.05-.08c-.07-.1-.07-.11.03-.2'/%3E%3C/svg%3E"); } + .i-mdi-laptop { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M4 6h16v10H4m16 2a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H4c-1.11 0-2 .89-2 2v10a2 2 0 0 0 2 2H0v2h24v-2z'/%3E%3C/svg%3E"); } + .i-mdi-layers { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m12 16l7.36-5.73L21 9l-9-7l-9 7l1.63 1.27M12 18.54l-7.38-5.73L3 14.07l9 7l9-7l-1.63-1.27z'/%3E%3C/svg%3E"); } + .i-mdi-lightbulb-on-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M20 11h3v2h-3zM1 11h3v2H1zM13 1v3h-2V1zM4.92 3.5l2.13 2.14l-1.42 1.41L3.5 4.93zm12.03 2.13l2.12-2.13l1.43 1.43l-2.13 2.12zM12 6a6 6 0 0 1 6 6c0 2.22-1.21 4.16-3 5.2V19a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-1.8c-1.79-1.04-3-2.98-3-5.2a6 6 0 0 1 6-6m2 15v1a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-1zm-3-3h2v-2.13c1.73-.44 3-2.01 3-3.87a4 4 0 0 0-4-4a4 4 0 0 0-4 4c0 1.86 1.27 3.43 3 3.87z'/%3E%3C/svg%3E"); } + .i-mdi-link { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7a5 5 0 0 0-5 5a5 5 0 0 0 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1M8 13h8v-2H8zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4a5 5 0 0 0 5-5a5 5 0 0 0-5-5'/%3E%3C/svg%3E"); } + .i-mdi-loading { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8'/%3E%3C/svg%3E"); } + .i-mdi-login { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8z'/%3E%3C/svg%3E"); } + .i-mdi-logout { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5M4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4z'/%3E%3C/svg%3E"); } + .i-mdi-magnify { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5l-1.5 1.5l-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16A6.5 6.5 0 0 1 3 9.5A6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14S14 12 14 9.5S12 5 9.5 5'/%3E%3C/svg%3E"); } + .i-mdi-magnify-remove-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5A6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 5l1.5-1.5zm-6 0C7 14 5 12 5 9.5S7 5 9.5 5S14 7 14 9.5S12 14 9.5 14m1.41-2.38L9.5 10.21l-1.41 1.41l-.71-.71L8.79 9.5L7.38 8.09l.71-.71L9.5 8.79l1.41-1.41l.71.71l-1.41 1.41l1.41 1.41z'/%3E%3C/svg%3E"); } + .i-mdi-magnify-scan { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M17 22v-2h3v-3h2v3.5c0 .39-.16.74-.46 1.04s-.65.46-1.04.46zM7 22H3.5c-.39 0-.74-.16-1.04-.46S2 20.89 2 20.5V17h2v3h3zM17 2h3.5c.39 0 .74.16 1.04.46s.46.65.46 1.04V7h-2V4h-3zM7 2v2H4v3H2V3.5c0-.39.16-.74.46-1.04S3.11 2 3.5 2zm3.5 4C13 6 15 8 15 10.5c0 .88-.25 1.7-.69 2.4l3.26 3.26l-1.41 1.41l-3.26-3.26c-.7.44-1.52.69-2.4.69C8 15 6 13 6 10.5S8 6 10.5 6m0 2a2.5 2.5 0 0 0 0 5a2.5 2.5 0 0 0 0-5'/%3E%3C/svg%3E"); } + .i-mdi-menu { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z'/%3E%3C/svg%3E"); } + .i-mdi-menu-down { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m7 10l5 5l5-5z'/%3E%3C/svg%3E"); } + .i-mdi-message { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2'/%3E%3C/svg%3E"); } + .i-mdi-message-question-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m0 14H5.2L4 17.2V4h16zM12.2 5.5c-.9 0-1.6.2-2.1.5c-.6.4-.9 1-.8 1.7h2q0-.45.3-.6c.2-.1.4-.2.7-.2s.6.1.8.3s.3.4.3.7s-.1.5-.2.7c-.2.2-.4.4-.6.5c-.5.3-.9.6-1.1.8c-.4.3-.5.6-.5 1.1h2c0-.3.1-.5.1-.7c.1-.2.3-.3.5-.5c.5-.2.8-.5 1.1-.9s.4-.8.4-1.2c0-.7-.3-1.3-.8-1.7c-.4-.3-1.2-.5-2.1-.5M11 12v2h2v-2z'/%3E%3C/svg%3E"); } + .i-mdi-microphone { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 2a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3m7 9c0 3.53-2.61 6.44-6 6.93V21h-2v-3.07c-3.39-.49-6-3.4-6-6.93h2a5 5 0 0 0 5 5a5 5 0 0 0 5-5z'/%3E%3C/svg%3E"); } + .i-mdi-microphone-plus { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M9 2a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3m7 9c0 3.5-2.56 6.43-6 6.93V21H8v-3.07c-3.44-.5-6-3.43-6-6.93h2a5 5 0 0 0 5 5a5 5 0 0 0 5-5zm-1-6h3V2h2v3h3v2h-3v3h-2V7h-3z'/%3E%3C/svg%3E"); } + .i-mdi-minus { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19 13H5v-2h14z'/%3E%3C/svg%3E"); } + .i-mdi-not-equal-variant { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m14.08 4.61l1.84.79L14.8 8H19v2h-5.05l-1.72 4H19v2h-7.62l-1.46 3.4l-1.84-.79L9.2 16H5v-2h5.06l1.71-4H5V8h7.63z'/%3E%3C/svg%3E"); } + .i-mdi-open-in-new { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M14 3v2h3.59l-9.83 9.83l1.41 1.41L19 6.41V10h2V3m-2 16H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2z'/%3E%3C/svg%3E"); } + .i-mdi-party-popper { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m14.53 1.45l-1.08 1.08l1.6 1.6q.33.375.33.87c0 .495-.11.64-.33.86L11.5 9.47l1 1.08l3.63-3.61c.53-.59.79-1.24.79-1.94s-.26-1.36-.79-1.95zm-3.98 2.02L9.47 4.55l.61.56c.22.22.33.52.33.89s-.11.67-.33.89l-.61.56l1.08 1.08l.56-.61c.53-.59.8-1.23.8-1.92c0-.72-.27-1.37-.8-1.97zM21 5.06c-.69 0-1.33.27-1.92.8l-5.63 5.64l1.08 1l5.58-5.56c.25-.25.55-.38.89-.38s.64.13.89.38l.61.61l1.03-1.08l-.56-.61c-.59-.53-1.25-.8-1.97-.8M7 8L2 22l14-5zm12 3.06c-.7 0-1.34.27-1.94.8l-1.59 1.59l1.08 1.08l1.59-1.59c.25-.25.53-.38.86-.38s.63.13.88.38l1.62 1.59l1.05-1.03l-1.6-1.64c-.59-.53-1.25-.8-1.95-.8'/%3E%3C/svg%3E"); } + .i-mdi-pause { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M14 19h4V5h-4M6 19h4V5H6z'/%3E%3C/svg%3E"); } + .i-mdi-pencil { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83l3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75z'/%3E%3C/svg%3E"); } + .i-mdi-pencil-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m14.06 9l.94.94L5.92 19H5v-.92zm3.6-6c-.25 0-.51.1-.7.29l-1.83 1.83l3.75 3.75l1.83-1.83c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29m-3.6 3.19L3 17.25V21h3.75L17.81 9.94z'/%3E%3C/svg%3E"); } + .i-mdi-pin-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M16 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2zm-7.2 2l1.2-1.2V4h4v8.8l1.2 1.2z'/%3E%3C/svg%3E"); } + .i-mdi-pine-tree { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M10 21v-3H3l5-5H5l5-5H7l5-5l5 5h-3l5 5h-3l5 5h-7v3z'/%3E%3C/svg%3E"); } + .i-mdi-play { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M8 5.14v14l11-7z'/%3E%3C/svg%3E"); } + .i-mdi-plus { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z'/%3E%3C/svg%3E"); } + .i-mdi-plus-thick { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M20 14h-6v6h-4v-6H4v-4h6V4h4v6h6z'/%3E%3C/svg%3E"); } + .i-mdi-refresh { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M17.65 6.35A7.96 7.96 0 0 0 12 4a8 8 0 0 0-8 8a8 8 0 0 0 8 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18a6 6 0 0 1-6-6a6 6 0 0 1 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z'/%3E%3C/svg%3E"); } + .i-mdi-send { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m2 21l21-9L2 3v7l15 2l-15 2z'/%3E%3C/svg%3E"); } + .i-mdi-sort-alphabetical-ascending { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19 17h3l-4 4l-4-4h3V3h2m-8 10v2l-3.33 4H11v2H5v-2l3.33-4H5v-2M9 3H7c-1.1 0-2 .9-2 2v6h2V9h2v2h2V5a2 2 0 0 0-2-2m0 4H7V5h2Z'/%3E%3C/svg%3E"); } + .i-mdi-sort-alphabetical-descending { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19 7h3l-4-4l-4 4h3v14h2m-8-8v2l-3.33 4H11v2H5v-2l3.33-4H5v-2M9 3H7c-1.1 0-2 .9-2 2v6h2V9h2v2h2V5a2 2 0 0 0-2-2m0 4H7V5h2Z'/%3E%3C/svg%3E"); } + .i-mdi-sort-clock-ascending { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M20 17h3l-4 4l-4-4h3V3h2zM8 5c-3.86 0-7 3.13-7 7s3.13 7 7 7c3.86 0 7-3.13 7-7s-3.13-7-7-7m2.19 9.53L7 12.69V9h1.5v2.82l2.44 1.41z'/%3E%3C/svg%3E"); } + .i-mdi-sort-clock-descending { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M18 7h-3l4-4l4 4h-3v14h-2zM8 5c-3.86 0-7 3.13-7 7s3.13 7 7 7c3.86 0 7-3.13 7-7s-3.13-7-7-7m2.19 9.53L7 12.69V9h1.5v2.82l2.44 1.41z'/%3E%3C/svg%3E"); } + .i-mdi-sprout-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M23 4.1V2.3l-1.8-.2c-.1 0-.7-.1-1.7-.1c-4.1 0-7.1 1.2-8.8 3.3C9.4 4.5 7.6 4 5.5 4c-1 0-1.7.1-1.7.1l-1.9.3l.1 1.7c.1 3 1.6 8.7 6.8 8.7H9v3.4c-3.8.5-7 1.8-7 1.8v2h20v-2s-3.2-1.3-7-1.8V15c6.3-.1 8-7.2 8-10.9M12 18h-1v-5.6S10.8 9 8 9c0 0 1.5.8 1.9 3.7c-.4.1-.8.1-1.1.1C4.2 12.8 4 6.1 4 6.1S4.6 6 5.5 6c1.9 0 5 .4 5.9 3.1C11.9 4.6 17 4 19.5 4c.9 0 1.5.1 1.5.1s0 9-6.3 9H14c0-2 2-5 2-5c-3 1-3 4.9-3 4.9v5z'/%3E%3C/svg%3E"); } + .i-mdi-stop { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M18 18H6V6h12z'/%3E%3C/svg%3E"); } + .i-mdi-sync { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 18a6 6 0 0 1-6-6c0-1 .25-1.97.7-2.8L5.24 7.74A7.93 7.93 0 0 0 4 12a8 8 0 0 0 8 8v3l4-4l-4-4m0-11V1L8 5l4 4V6a6 6 0 0 1 6 6c0 1-.25 1.97-.7 2.8l1.46 1.46A7.93 7.93 0 0 0 20 12a8 8 0 0 0-8-8'/%3E%3C/svg%3E"); } + .i-mdi-test-tube { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M7 2v2h1v14a4 4 0 0 0 4 4a4 4 0 0 0 4-4V4h1V2zm4 14c-.6 0-1-.4-1-1s.4-1 1-1s1 .4 1 1s-.4 1-1 1m2-4c-.6 0-1-.4-1-1s.4-1 1-1s1 .4 1 1s-.4 1-1 1m1-5h-4V4h4z'/%3E%3C/svg%3E"); } + .i-mdi-translate { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m12.87 15.07l-2.54-2.51l.03-.03A17.5 17.5 0 0 0 14.07 6H17V4h-7V2H8v2H1v2h11.17C11.5 7.92 10.44 9.75 9 11.35C8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5l3.11 3.11zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2zm-2.62 7l1.62-4.33L19.12 17z'/%3E%3C/svg%3E"); } + .i-mdi-trash-can { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M9 3v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3zm0 5h2v9H9zm4 0h2v9h-2z'/%3E%3C/svg%3E"); } + .i-mdi-trash-can-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M9 3v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3zM7 6h10v13H7zm2 2v9h2V8zm4 0v9h2V8z'/%3E%3C/svg%3E"); } + .i-mdi-trending-up { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m16 6l2.29 2.29l-4.88 4.88l-4-4L2 16.59L3.41 18l6-6l4 4l6.3-6.29L22 12V6z'/%3E%3C/svg%3E"); } + .i-mdi-trophy-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M18 2c-.9 0-2 1-2 2H8c0-1-1.1-2-2-2H2v9c0 1 1 2 2 2h2.2c.4 2 1.7 3.7 4.8 4v2.08C8 19.54 8 22 8 22h8s0-2.46-3-2.92V17c3.1-.3 4.4-2 4.8-4H20c1 0 2-1 2-2V2zM6 11H4V4h2zm10 .5c0 1.93-.58 3.5-4 3.5c-3.41 0-4-1.57-4-3.5V6h8zm4-.5h-2V4h2z'/%3E%3C/svg%3E"); } + .i-mdi-update { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M21 10.12h-6.78l2.74-2.82c-2.73-2.7-7.15-2.8-9.88-.1a6.887 6.887 0 0 0 0 9.8c2.73 2.7 7.15 2.7 9.88 0c1.36-1.35 2.04-2.92 2.04-4.9h2c0 1.98-.88 4.55-2.64 6.29c-3.51 3.48-9.21 3.48-12.72 0c-3.5-3.47-3.53-9.11-.02-12.58a8.987 8.987 0 0 1 12.65 0L21 3zM12.5 8v4.25l3.5 2.08l-.72 1.21L11 13V8z'/%3E%3C/svg%3E"); } + .i-mdi-view-dashboard { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M13 3v6h8V3m-8 18h8V11h-8M3 21h8v-6H3m0-2h8V3H3z'/%3E%3C/svg%3E"); } + .i-mdi-water-polo { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M20 16h2v2h-2c-1.4 0-2.8-.4-4-1c-2.5 1.3-5.5 1.3-8 0c-1.2.6-2.6 1-4 1H2v-2h2c1.4 0 2.8-.5 4-1.3c2.4 1.7 5.6 1.7 8 0c1.2.8 2.6 1.3 4 1.3m-7-5.4c.6-.3 1.3-.6 2-.7v.3c.3 1 .3 1.9.2 2.9c-.9.5-2 .8-3 .8c.5-1 .8-2.2.8-3.3m-.1-7q-2.1.6-3.6 2.1q-.6-1.5-.6-3c2.2-1 4.7-.9 6.9.2c.3.1.6.2.8.4c-1.2-.1-2.4 0-3.5.3m-6.1 9.7q-.9.45-1.8.6c-.7-1.3-1-2.7-1-4.1c.5 1 1.2 2 2 2.8c.3.2.5.5.8.7m12.2.6c-.6-.1-1.2-.3-1.7-.5c.2-1.2.1-2.4-.2-3.6c1.1.1 2.1.4 3 1c-.1 1-.4 1.9-.9 2.8zM7.4 11.2c-1.2-1.1-1.9-2.7-2.2-4.3L5.1 6c.5-.8 1-1.4 1.7-2c.1 1.4.6 2.7 1.4 3.8c.7 1.1 1.7 2.1 2.8 2.7c0 .8-.2 1.6-.5 2.4c-1.2-.3-2.2-.9-3.1-1.7m6.1-5.7c1.5-.4 3.2-.3 4.7.2l.8.4c.4.7.6 1.5.8 2.3c-2.5-1.1-5.4-.9-7.8.4c-.7-.3-1.2-.8-1.7-1.4l.1-.1c.9-.8 1.9-1.5 3.1-1.8M16 18.7c1.2.8 2.6 1.3 4 1.3h2v2h-2c-1.4 0-2.8-.4-4-1c-2.5 1.3-5.5 1.3-8 0c-1.2.6-2.6 1-4 1H2v-2h2c1.4 0 2.8-.5 4-1.3c2.4 1.7 5.6 1.7 8 0'/%3E%3C/svg%3E"); } + .i-mdi-weather-night { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3zm3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95zm-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31'/%3E%3C/svg%3E"); } + .i-mdi-white-balance-sunny { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m3.55 19.09l1.41 1.41l1.8-1.79l-1.42-1.42M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6c0-3.32-2.69-6-6-6m8 7h3v-2h-3m-2.76 7.71l1.8 1.79l1.41-1.41l-1.79-1.8M20.45 5l-1.41-1.4l-1.8 1.79l1.42 1.42M13 1h-2v3h2M6.76 5.39L4.96 3.6L3.55 5l1.79 1.81zM1 13h3v-2H1m12 9h-2v3h2'/%3E%3C/svg%3E"); } + .line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } + .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } + .line-clamp-4 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } + .block { display: block; } + .contents { display: contents; } + .flex { display: flex; } + .grid { display: grid; } + .hidden { display: none; } + .inline { display: inline; } + .inline-block { display: inline-block; } + .inline-flex { display: inline-flex; } + .inline-grid { display: inline-grid; } + .table { display: table; } + .field-sizing-content { field-sizing: content; } + .aspect-square { aspect-ratio: 1 / 1; } + .size-2 { width: calc(var(--spacing) * 2); height: calc(var(--spacing) * 2); } + .size-2\.5 { width: calc(var(--spacing) * 2.5); height: calc(var(--spacing) * 2.5); } + .size-3 { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); } + .size-3\.5 { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); } + .size-3\/4 { width: calc(75%); height: calc(75%); } + .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-10\! { width: calc(var(--spacing) * 10) !important; height: calc(var(--spacing) * 10) !important; } + .size-12 { width: calc(var(--spacing) * 12); height: calc(var(--spacing) * 12); } + .size-14 { width: calc(var(--spacing) * 14); height: calc(var(--spacing) * 14); } + .size-16 { width: calc(var(--spacing) * 16); height: calc(var(--spacing) * 16); } + .size-\[85\%\] { width: 85%; height: 85%; } + .size-full { width: 100%; height: 100%; } + .h-\(--bits-select-anchor-height\) { height: var(--bits-select-anchor-height); } + .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-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-9\! { height: calc(var(--spacing) * 9) !important; } + .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-24 { height: calc(var(--spacing) * 24); } + .h-32 { height: calc(var(--spacing) * 32); } + .h-36 { height: calc(var(--spacing) * 36); } + .h-40 { height: calc(var(--spacing) * 40); } + .h-\[1\.2rem\] { height: 1.2rem; } + .h-\[1\.15rem\] { height: 1.15rem; } + .h-\[200px\] { height: 200px; } + .h-\[400px\] { height: 400px; } + .h-\[700px\] { height: 700px; } + .h-\[calc\(100\%-1px\)\] { height: calc(100% - 1px); } + .h-auto { height: auto; } + .h-fit { height: fit-content; } + .h-full { height: 100%; } + .h-px { height: 1px; } + .h-screen { height: 100vh; } + .h-svh { height: 100svh; } + .max-h-\(--bits-context-menu-content-available-height\) { max-height: var(--bits-context-menu-content-available-height); } + .max-h-\(--bits-dropdown-menu-content-available-height\) { max-height: var(--bits-dropdown-menu-content-available-height); } + .max-h-\(--bits-select-content-available-height\) { max-height: var(--bits-select-content-available-height); } + .max-h-8 { max-height: calc(var(--spacing) * 8); } + .max-h-9 { max-height: calc(var(--spacing) * 9); } + .max-h-10 { max-height: calc(var(--spacing) * 10); } + .max-h-16 { max-height: calc(var(--spacing) * 16); } + .max-h-30 { max-height: calc(var(--spacing) * 30); } + .max-h-80 { max-height: calc(var(--spacing) * 80); } + .max-h-\[30vh\] { max-height: 30vh; } + .max-h-\[40vh\] { max-height: 40vh; } + .max-h-\[50vh\] { max-height: 50vh; } + .max-h-\[90dvh\] { max-height: 90dvh; } + .max-h-\[90vh\] { max-height: 90vh; } + .max-h-\[300px\] { max-height: 300px; } + .max-h-\[calc\(90vh\)\] { max-height: calc(90vh); } + .max-h-\[calc\(100vh-2rem\)\] { max-height: calc(-2rem + 100vh); } + .max-h-\[min\(calc\(100cqh-13rem\)\,20rem\)\] { max-height: min(100cqh - 13rem, 20rem); } + .max-h-full { max-height: 100%; } + .min-h-0 { min-height: calc(var(--spacing) * 0); } + .min-h-4 { min-height: calc(var(--spacing) * 4); } + .min-h-8 { min-height: calc(var(--spacing) * 8); } + .min-h-9 { min-height: calc(var(--spacing) * 9); } + .min-h-10 { min-height: calc(var(--spacing) * 10); } + .min-h-12 { min-height: calc(var(--spacing) * 12); } + .min-h-14 { min-height: calc(var(--spacing) * 14); } + .min-h-16 { min-height: calc(var(--spacing) * 16); } + .min-h-80 { min-height: calc(var(--spacing) * 80); } + .min-h-auto { min-height: auto; } + .min-h-max { min-height: max-content; } + .min-h-svh { min-height: 100svh; } + .w-\(--sidebar-width\) { width: var(--sidebar-width); } + .w-0 { width: calc(var(--spacing) * 0); } + .w-2\.5 { width: calc(var(--spacing) * 2.5); } + .w-3 { width: calc(var(--spacing) * 3); } + .w-3\/4 { width: calc(75%); } + .w-3xl { width: var(--container-3xl); } + .w-4 { width: calc(var(--spacing) * 4); } + .w-5 { width: calc(var(--spacing) * 5); } + .w-8 { width: calc(var(--spacing) * 8); } + .w-9 { width: calc(var(--spacing) * 9); } + .w-10 { width: calc(var(--spacing) * 10); } + .w-13 { width: calc(var(--spacing) * 13); } + .w-14 { width: calc(var(--spacing) * 14); } + .w-16 { width: calc(var(--spacing) * 16); } + .w-20 { width: calc(var(--spacing) * 20); } + .w-28 { width: calc(var(--spacing) * 28); } + .w-32 { width: calc(var(--spacing) * 32); } + .w-40 { width: calc(var(--spacing) * 40); } + .w-44 { width: calc(var(--spacing) * 44); } + .w-64 { width: calc(var(--spacing) * 64); } + .w-72 { width: calc(var(--spacing) * 72); } + .w-96 { width: calc(var(--spacing) * 96); } + .w-\[1\.2rem\] { width: 1.2rem; } + .w-\[70rem\] { width: 70rem; } + .w-\[100px\] { width: 100px; } + .w-\[calc\(100\%\+2px\)\] { width: calc(100% + 2px); } + .w-auto { width: auto; } + .w-fit { width: fit-content; } + .w-full { width: 100%; } + .w-lg { width: var(--container-lg); } + .w-px { width: 1px; } + .max-w-\(--skeleton-width\) { max-width: var(--skeleton-width); } + .max-w-0 { max-width: calc(var(--spacing) * 0); } + .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-8 { max-width: calc(var(--spacing) * 8); } + .max-w-9 { max-width: calc(var(--spacing) * 9); } + .max-w-10 { max-width: calc(var(--spacing) * 10); } + .max-w-16 { max-width: calc(var(--spacing) * 16); } + .max-w-48 { max-width: calc(var(--spacing) * 48); } + .max-w-52 { max-width: calc(var(--spacing) * 52); } + .max-w-\[50vw\] { max-width: 50vw; } + .max-w-\[calc\(100\%-2rem\)\] { max-width: calc(100% - 2rem); } + .max-w-\[calc\(100\%-32px\)\] { max-width: calc(100% - 32px); } + .max-w-full { max-width: 100%; } + .max-w-lg { max-width: var(--container-lg); } + .max-w-max { max-width: max-content; } + .max-w-md { max-width: var(--container-md); } + .max-w-none { max-width: none; } + .max-w-sm { max-width: var(--container-sm); } + .min-w-\(--bits-select-anchor-width\) { min-width: var(--bits-select-anchor-width); } + .min-w-0 { min-width: calc(var(--spacing) * 0); } + .min-w-3 { min-width: calc(var(--spacing) * 3); } + .min-w-5 { min-width: calc(var(--spacing) * 5); } + .min-w-8 { min-width: calc(var(--spacing) * 8); } + .min-w-9 { min-width: calc(var(--spacing) * 9); } + .min-w-10 { min-width: calc(var(--spacing) * 10); } + .min-w-11 { min-width: calc(var(--spacing) * 11); } + .min-w-16 { min-width: calc(var(--spacing) * 16); } + .min-w-24 { min-width: calc(var(--spacing) * 24); } + .min-w-32 { min-width: calc(var(--spacing) * 32); } + .min-w-56 { min-width: calc(var(--spacing) * 56); } + .min-w-\[min\(calc\(100\%-32px\)\,50rem\)\] { min-width: min(100% - 32px, 50rem); } + .min-w-fit { min-width: fit-content; } + .min-w-full { min-width: 100%; } + .min-w-max { min-width: max-content; } + .flex-1 { flex: 1 1 0%; } + .flex-auto { flex: 1 1 auto; } + .shrink { flex-shrink: 1; } + .shrink-0 { flex-shrink: 0; } + .flex-grow { flex-grow: 1; } + .grow { flex-grow: 1; } + .grow-0 { flex-grow: 0; } + .origin-\(--bits-context-menu-content-transform-origin\) { transform-origin: var(--bits-context-menu-content-transform-origin); } + .origin-\(--bits-dropdown-menu-content-transform-origin\) { transform-origin: var(--bits-dropdown-menu-content-transform-origin); } + .origin-\(--bits-popover-content-transform-origin\) { transform-origin: var(--bits-popover-content-transform-origin); } + .origin-\(--bits-select-content-transform-origin\) { transform-origin: var(--bits-select-content-transform-origin); } + .origin-\(--bits-tooltip-content-transform-origin\) { transform-origin: var(--bits-tooltip-content-transform-origin); } + .-translate-x-1 { --tw-translate-x: calc(var(--spacing) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } + .-translate-x-1\/2 { --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } + .-translate-x-px { --tw-translate-x: -1px; translate: var(--tw-translate-x) var(--tw-translate-y); } + .translate-x-\[-50\%\] { --tw-translate-x: -50%; translate: var(--tw-translate-x) var(--tw-translate-y); } + .translate-x-px { --tw-translate-x: 1px; 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-px { --tw-translate-y: -1px; translate: var(--tw-translate-x) var(--tw-translate-y); } + .translate-y-0\.5 { --tw-translate-y: calc(var(--spacing) * 0.5); translate: var(--tw-translate-x) var(--tw-translate-y); } + .translate-y-\[-50\%\] { --tw-translate-y: -50%; translate: var(--tw-translate-x) var(--tw-translate-y); } + .translate-y-px { --tw-translate-y: 1px; translate: var(--tw-translate-x) var(--tw-translate-y); } + .scale-0 { --tw-scale-x: 0%; --tw-scale-y: 0%; --tw-scale-z: 0%; 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-\[1\.02\] { scale: 1.02; } + .-rotate-90 { rotate: calc(-90deg); } + .rotate-0 { rotate: 0deg; } + .rotate-45 { rotate: 45deg; } + .rotate-90 { rotate: 90deg; } + .rotate-180 { rotate: 180deg; } + .transform { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } + .animate-in { animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); } + .animate-out { animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); } + .animate-ping { animation: var(--animate-ping); } + .animate-pulse { animation: var(--animate-pulse); } + .animate-spin { animation: var(--animate-spin); } + .cursor-default { cursor: default; } + .cursor-pointer { cursor: pointer; } + .cursor-text { cursor: text; } + .touch-pan-y { --tw-pan-y: pan-y; touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,); } + .touch-none { touch-action: none; } + .resize-none { resize: none; } + .scroll-my-1 { scroll-margin-block: calc(var(--spacing) * 1); } + .scroll-py-1 { scroll-padding-block: calc(var(--spacing) * 1); } + .list-disc { list-style-type: disc; } + .appearance-none { appearance: none; } + .auto-rows-min { grid-auto-rows: min-content; } + .grid-cols-1 { grid-template-columns: repeat(1, minmax(0px, 1fr)); } + .grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); } + .grid-cols-3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); } + .grid-cols-\[0_1fr\] { grid-template-columns: 0px 1fr; } + .grid-cols-\[1fr_auto_1fr\] { grid-template-columns: 1fr auto 1fr; } + .grid-cols-\[1fr_minmax\(5\.5rem\,auto\)_14px\] { grid-template-columns: 1fr minmax(5.5rem, auto) 14px; } + .grid-cols-\[auto_1fr\] { grid-template-columns: auto 1fr; } + .grid-cols-\[auto_auto_1rem_auto_auto\] { grid-template-columns: auto auto 1rem auto auto; } + .grid-cols-\[fit-content\(70px\)_1fr\] { grid-template-columns: fit-content(70px) 1fr; } + .grid-cols-subgrid { grid-template-columns: subgrid; } + .grid-rows-2 { grid-template-rows: repeat(2, minmax(0px, 1fr)); } + .grid-rows-\[auto\] { grid-template-rows: auto; } + .grid-rows-\[auto_1fr\] { grid-template-rows: auto 1fr; } + .grid-rows-\[auto_auto\] { grid-template-rows: auto auto; } + .grid-rows-\[auto_auto_1fr\] { grid-template-rows: auto auto 1fr; } + .flex-col { flex-direction: column; } + .flex-col\! { flex-direction: column !important; } + .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; } + .place-content-center { place-content: center; } + .content-center { align-content: center; } + .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; } + .items-stretch\! { align-items: stretch !important; } + .justify-between { justify-content: space-between; } + .justify-center { justify-content: center; } + .justify-end { justify-content: flex-end; } + .justify-start { justify-content: flex-start; } + .justify-items-end { justify-items: end; } + .justify-items-start { justify-items: start; } + .gap-0 { gap: calc(var(--spacing) * 0); } + .gap-0\.5 { gap: calc(var(--spacing) * 0.5); } + .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-6 { gap: calc(var(--spacing) * 6); } + .gap-8 { gap: calc(var(--spacing) * 8); } + .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-1\.5 { + :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse))); } +} + .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))); } +} + .gap-x-1\.5 { column-gap: calc(var(--spacing) * 1.5); } + .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); } + .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))); } +} + .gap-y-0\.5 { row-gap: calc(var(--spacing) * 0.5); } + .gap-y-1 { row-gap: calc(var(--spacing) * 1); } + .gap-y-2 { row-gap: calc(var(--spacing) * 2); } + .gap-y-3 { row-gap: calc(var(--spacing) * 3); } + .gap-y-4 { row-gap: calc(var(--spacing) * 4); } + .self-center { align-self: center; } + .self-start { align-self: flex-start; } + .self-stretch { align-self: stretch; } + .justify-self-center { justify-self: center; } + .justify-self-end { justify-self: flex-end; } + .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + .overflow-auto { overflow: auto; } + .overflow-hidden { overflow: hidden; } + .overflow-visible\! { overflow: visible !important; } + .overflow-x-auto { overflow-x: auto; } + .overflow-x-clip { overflow-x: clip; } + .overflow-x-hidden { overflow-x: hidden; } + .overflow-y-auto { overflow-y: auto; } + .overscroll-contain { overscroll-behavior: contain; } + .rounded { border-radius: 0.25rem; } + .rounded-\[2px\] { border-radius: 2px; } + .rounded-\[4px\] { border-radius: 4px; } + .rounded-\[calc\(var\(--radius\)-3px\)\] { border-radius: calc(var(--radius) - 3px); } + .rounded-\[inherit\] { border-radius: inherit; } + .rounded-full { border-radius: calc(infinity * 1px); } + .rounded-lg { border-radius: var(--radius); } + .rounded-md { border-radius: calc(var(--radius) - 2px); } + .rounded-none { border-radius: 0px; } + .rounded-sm { border-radius: calc(var(--radius) - 4px); } + .rounded-xl { border-radius: calc(var(--radius) + 4px); } + .rounded-xs { border-radius: var(--radius-xs); } + .rounded-b-none { border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } + .border { border-style: var(--tw-border-style); border-width: 1px; } + .border-0 { border-style: var(--tw-border-style); border-width: 0px; } + .border-2 { border-style: var(--tw-border-style); border-width: 2px; } + .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 { border-top-style: var(--tw-border-style); border-top-width: 1px; } + .border-t-2 { border-top-style: var(--tw-border-style); border-top-width: 2px; } + .border-t-4 { border-top-style: var(--tw-border-style); border-top-width: 4px; } + .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-0 { border-bottom-style: var(--tw-border-style); border-bottom-width: 0px; } + .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-5 { border-left-style: var(--tw-border-style); border-left-width: 5px; } + .border-dashed { --tw-border-style: dashed; border-style: dashed; } + .border-none { --tw-border-style: none; border-style: none; } + .border-border { border-color: var(--border); } + .border-destructive { border-color: var(--destructive); } + .border-destructive\/40 { + border-color: var(--destructive); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--destructive) 40%, transparent); +} +} + .border-gray-200 { border-color: var(--color-gray-200); } + .border-input { border-color: var(--input); } + .border-muted-foreground { border-color: var(--muted-foreground); } + .border-muted-foreground\/40 { + border-color: var(--muted-foreground); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--muted-foreground) 40%, transparent); +} +} + .border-primary { border-color: var(--primary); } + .border-primary\/30 { + border-color: var(--primary); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--primary) 30%, transparent); +} +} + .border-ring { border-color: var(--ring); } + .border-sidebar-border { border-color: var(--sidebar-border); } + .border-transparent { border-color: transparent; } + .border-s-transparent { border-inline-start-color: transparent; } + .border-t-transparent { border-top-color: transparent; } + .border-r-current { border-right-color: currentcolor; } + .border-l-transparent { border-left-color: transparent; } + .bg-accent { background-color: var(--accent); } + .bg-accent\/50 { + background-color: var(--accent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--accent) 50%, transparent); +} +} + .bg-background { background-color: var(--background); } + .bg-background\/70 { + background-color: var(--background); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--background) 70%, transparent); +} +} + .bg-black\/50 { + background-color: color-mix(in srgb, rgb(0, 0, 0), transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-black) 50%, transparent); +} +} + .bg-border { background-color: var(--border); } + .bg-card { background-color: var(--card); } + .bg-destructive { background-color: var(--destructive); } + .bg-destructive\/5 { + background-color: var(--destructive); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--destructive) 5%, transparent); +} +} + .bg-destructive\/10 { + background-color: var(--destructive); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--destructive) 10%, transparent); +} +} + .bg-foreground { background-color: var(--foreground); } + .bg-foreground\! { background-color: var(--foreground) !important; } + .bg-green-500 { background-color: var(--color-green-500); } + .bg-input { background-color: var(--input); } + .bg-muted { background-color: var(--muted); } + .bg-muted-foreground\/20 { + background-color: var(--muted-foreground); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--muted-foreground) 20%, transparent); +} +} + .bg-muted\/20 { + background-color: var(--muted); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--muted) 20%, transparent); +} +} + .bg-muted\/60 { + background-color: var(--muted); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--muted) 60%, transparent); +} +} + .bg-muted\/80 { + background-color: var(--muted); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--muted) 80%, transparent); +} +} + .bg-neutral-500 { background-color: var(--color-neutral-500); } + .bg-popover { background-color: var(--popover); } + .bg-primary { background-color: var(--primary); } + .bg-primary\/5 { + background-color: var(--primary); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--primary) 5%, transparent); +} +} + .bg-primary\/10 { + background-color: var(--primary); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--primary) 10%, transparent); +} +} + .bg-primary\/20 { + background-color: var(--primary); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--primary) 20%, transparent); +} +} + .bg-primary\/60 { + background-color: var(--primary); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--primary) 60%, transparent); +} +} + .bg-primary\/95 { + background-color: var(--primary); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--primary) 95%, transparent); +} +} + .bg-red-500 { background-color: var(--color-red-500); } + .bg-red-600\! { background-color: var(--color-red-600) !important; } + .bg-secondary { background-color: var(--secondary); } + .bg-secondary\/25 { + background-color: var(--secondary); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--secondary) 25%, transparent); +} +} + .bg-secondary\/50 { + background-color: var(--secondary); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--secondary) 50%, transparent); +} +} + .bg-sidebar { background-color: var(--sidebar); } + .bg-sidebar-border { background-color: var(--sidebar-border); } + .bg-transparent { background-color: transparent; } + .bg-transparent\! { background-color: transparent !important; } + .bg-white { background-color: var(--color-white); } + .fill-current { fill: currentcolor; } + .stroke-current { stroke: currentcolor; } + .stroke-current\/20 { + stroke: currentcolor; + @supports (color: color-mix(in lab, red, red)) { + stroke: color-mix(currentcolor 20%, transparent); +} +} + .object-contain { object-fit: contain; } + .p-0 { padding: calc(var(--spacing) * 0); } + .p-0\! { padding: calc(var(--spacing) * 0) !important; } + .p-0\.5 { padding: calc(var(--spacing) * 0.5); } + .p-1 { padding: calc(var(--spacing) * 1); } + .p-2 { padding: calc(var(--spacing) * 2); } + .p-3 { padding: calc(var(--spacing) * 3); } + .p-4 { padding: calc(var(--spacing) * 4); } + .p-6 { padding: calc(var(--spacing) * 6); } + .p-px { padding: 1px; } + .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\! { padding-inline: calc(var(--spacing) * 3) !important; } + .px-4 { padding-inline: calc(var(--spacing) * 4); } + .px-6 { padding-inline: calc(var(--spacing) * 6); } + .px-8 { padding-inline: calc(var(--spacing) * 8); } + .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-4 { padding-block: calc(var(--spacing) * 4); } + .py-6 { padding-block: calc(var(--spacing) * 6); } + .py-8 { padding-block: calc(var(--spacing) * 8); } + .ps-2 { padding-inline-start: calc(var(--spacing) * 2); } + .ps-4 { padding-inline-start: calc(var(--spacing) * 4); } + .ps-8 { padding-inline-start: calc(var(--spacing) * 8); } + .pe-1 { padding-inline-end: calc(var(--spacing) * 1); } + .pe-2 { padding-inline-end: calc(var(--spacing) * 2); } + .pe-5 { padding-inline-end: calc(var(--spacing) * 5); } + .pe-8 { padding-inline-end: calc(var(--spacing) * 8); } + .pt-0 { padding-top: calc(var(--spacing) * 0); } + .pt-0\.5 { padding-top: calc(var(--spacing) * 0.5); } + .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); } + .pr-0\.5 { padding-right: calc(var(--spacing) * 0.5); } + .pr-1 { padding-right: calc(var(--spacing) * 1); } + .pr-2 { padding-right: calc(var(--spacing) * 2); } + .pb-0 { padding-bottom: calc(var(--spacing) * 0); } + .pb-0\.5 { padding-bottom: calc(var(--spacing) * 0.5); } + .pb-1 { padding-bottom: calc(var(--spacing) * 1); } + .pb-1\.5 { padding-bottom: calc(var(--spacing) * 1.5); } + .pb-2 { padding-bottom: calc(var(--spacing) * 2); } + .pb-3 { padding-bottom: calc(var(--spacing) * 3); } + .pb-4 { padding-bottom: calc(var(--spacing) * 4); } + .pl-2 { padding-left: calc(var(--spacing) * 2); } + .pl-4 { padding-left: calc(var(--spacing) * 4); } + .text-center { text-align: center; } + .text-end { text-align: end; } + .text-left { text-align: left; } + .text-right { text-align: right; } + .text-start { text-align: start; } + .align-middle { vertical-align: middle; } + .align-sub { vertical-align: sub; } + .font-mono { font-family: monospace; } + .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-8xl { font-size: var(--text-8xl); line-height: var(--tw-leading, var(--text-8xl--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)); } + .leading-none { --tw-leading: 1; line-height: 1; } + .leading-snug { --tw-leading: var(--leading-snug); line-height: var(--leading-snug); } + .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-wide { --tw-tracking: var(--tracking-wide); letter-spacing: var(--tracking-wide); } + .tracking-widest { --tw-tracking: var(--tracking-widest); letter-spacing: var(--tracking-widest); } + .text-balance { text-wrap: balance; } + .text-nowrap { text-wrap: nowrap; } + .break-words { overflow-wrap: break-word; } + .break-all { word-break: break-all; } + .break-keep { word-break: keep-all; } + .text-ellipsis { text-overflow: ellipsis; } + .whitespace-break-spaces { white-space: break-spaces; } + .whitespace-normal { white-space: normal; } + .whitespace-nowrap { white-space: nowrap; } + .whitespace-pre { white-space: pre; } + .whitespace-pre-wrap { white-space: pre-wrap; } + .text-accent-foreground { color: var(--accent-foreground); } + .text-amber-700 { color: var(--color-amber-700); } + .text-background { color: var(--background); } + .text-blue-700 { color: var(--color-blue-700); } + .text-card-foreground { color: var(--card-foreground); } + .text-current { color: currentcolor; } + .text-destructive { color: var(--destructive); } + .text-destructive-foreground { color: var(--destructive-foreground); } + .text-emerald-600 { color: var(--color-emerald-600); } + .text-emerald-700 { color: var(--color-emerald-700); } + .text-foreground { color: var(--foreground); } + .text-foreground\! { color: var(--foreground) !important; } + .text-foreground\/50 { + color: var(--foreground); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--foreground) 50%, transparent); +} +} + .text-foreground\/80 { + color: var(--foreground); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--foreground) 80%, transparent); +} +} + .text-fuchsia-700 { color: var(--color-fuchsia-700); } + .text-green-600 { color: var(--color-green-600); } + .text-lime-700 { color: var(--color-lime-700); } + .text-muted-foreground { color: var(--muted-foreground); } + .text-neutral-500 { color: var(--color-neutral-500); } + .text-orange-600 { color: var(--color-orange-600); } + .text-popover-foreground { color: var(--popover-foreground); } + .text-primary { color: var(--primary); } + .text-primary-foreground { color: var(--primary-foreground); } + .text-primary\/60 { + color: var(--primary); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--primary) 60%, transparent); +} +} + .text-primary\/85 { + color: var(--primary); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--primary) 85%, transparent); +} +} + .text-red-600 { color: var(--color-red-600); } + .text-rose-700 { color: var(--color-rose-700); } + .text-secondary-foreground { color: var(--secondary-foreground); } + .text-sidebar-foreground { color: var(--sidebar-foreground); } + .text-sidebar-foreground\/70 { + color: var(--sidebar-foreground); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--sidebar-foreground) 70%, transparent); +} +} + .text-sky-500 { color: var(--color-sky-500); } + .text-sky-600 { color: var(--color-sky-600); } + .text-transparent { color: transparent; } + .text-white { color: var(--color-white); } + .capitalize { text-transform: capitalize; } + .uppercase { text-transform: uppercase; } + .italic { font-style: italic; } + .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,); } + .underline { text-decoration-line: underline; } + .underline-offset-4 { text-underline-offset: 4px; } + .opacity-0 { opacity: 0; } + .opacity-50 { opacity: 0.5; } + .opacity-70 { opacity: 0.7; } + .opacity-75 { opacity: 0.75; } + .opacity-80 { opacity: 0.8; } + .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-\[0_0_0_1px_var\(--sidebar-border\)\] { --tw-shadow: 0 0 0 1px var(--tw-shadow-color, var(--sidebar-border)); 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-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-0 { --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); } + .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); } + .ring-primary { --tw-ring-color: var(--primary); } + .ring-ring\/10 { + --tw-ring-color: var(--ring); + @supports (color: color-mix(in lab, red, red)) { + --tw-ring-color: color-mix(in oklab, var(--ring) 10%, transparent); +} +} + .ring-ring\/50 { + --tw-ring-color: var(--ring); + @supports (color: color-mix(in lab, red, red)) { + --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); +} +} + .ring-sidebar-ring { --tw-ring-color: var(--sidebar-ring); } + .ring-offset-background { --tw-ring-offset-color: var(--background); } + .outline-hidden { + --tw-outline-style: none; outline-style: none; + @media (forced-colors: active) { + outline: transparent solid 2px; outline-offset: 2px; +} +} + .outline { outline-style: var(--tw-outline-style); outline-width: 1px; } + .outline-ring\/50 { + outline-color: var(--ring); + @supports (color: color-mix(in lab, red, red)) { + outline-color: color-mix(in oklab, var(--ring) 50%, transparent); +} +} + .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,); } + .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,); } + .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } + .transition-\[color\,box-shadow\] { transition-property: color, box-shadow; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } + .transition-\[left\,right\,width\] { transition-property: left, right, width; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } + .transition-\[margin\,opacity\] { transition-property: margin, opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } + .transition-\[stroke-dashoffset\] { transition-property: stroke-dashoffset; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } + .transition-\[width\,height\,padding\] { transition-property: width, height, padding; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } + .transition-\[width\] { transition-property: width; 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; } + .delay-100 { transition-delay: 100ms; } + .duration-0 { --tw-duration: 0ms; transition-duration: 0ms; } + .duration-200 { --tw-duration: 200ms; transition-duration: 200ms; } + .duration-300 { --tw-duration: 300ms; transition-duration: 300ms; } + .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; } + .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-content { contain: content !important; } + .delay-100 { animation-delay: 0.1s; --tw-animation-delay: .1s; } + .fade-in-0 { --tw-enter-opacity: 0; } + .outline-none { --tw-outline-style: none; outline-style: none; } + .select-none { user-select: none; } + .zoom-in-95 { --tw-enter-scale: .95; } + .\[key\:string\] { } + .paused { animation-play-state: paused; } + .running { animation-play-state: running; } + .not-empty\:mt-1 { + &:not(:empty) { margin-top: calc(var(--spacing) * 1); } +} + .not-\[\&\:hover\]\:opacity-30 { + &:not(:hover) { opacity: 0.3; } +} + .not-\[\&\:hover\]\:opacity-50 { + &:not(:hover) { opacity: 0.5; } +} + .group-not-\[\&\:hover\]\/container\:invisible { + &:is(:where(.group\/container):not(:hover) *) { visibility: hidden; } +} + .group-focus-within\/menu-item\:opacity-100 { + &:is(:where(.group\/menu-item):focus-within *) { opacity: 1; } +} + .group-hover\:text-foreground { + &:is(:where(.group):hover *) { + @media (hover: hover) { + color: var(--foreground); +} +} +} + .group-hover\/menu-item\:opacity-100 { + &:is(:where(.group\/menu-item):hover *) { + @media (hover: hover) { + opacity: 1; +} +} +} + .group-hover\/sense\:visible { + &:is(:where(.group\/sense):hover *) { + @media (hover: hover) { + visibility: visible; +} +} +} + .group-hover\/sense\:opacity-100 { + &:is(:where(.group\/sense):hover *) { + @media (hover: hover) { + opacity: 1; +} +} +} + .group-has-data-placeholder\:hidden { + &:is(:where(.group):has([data-placeholder]) *) { display: none; } +} + .group-has-data-\[sidebar\=menu-action\]\/menu-item\:pe-8 { + &:is(:where(.group\/menu-item):has([data-sidebar="menu-action"]) *) { padding-inline-end: calc(var(--spacing) * 8); } +} + .group-has-\[\>input\]\/input-group\:pt-2 { + &:is(:where(.group\/input-group):has(> input) *) { padding-top: calc(var(--spacing) * 2); } +} + .group-has-\[\>input\]\/input-group\:pb-2 { + &:is(:where(.group\/input-group):has(> input) *) { padding-bottom: calc(var(--spacing) * 2); } +} + .group-data-\[collapsible\=icon\]\:-mt-8 { + &:is(:where(.group)[data-collapsible="icon"] *) { margin-top: calc(var(--spacing) * -8); } +} + .group-data-\[collapsible\=icon\]\:hidden { + &:is(:where(.group)[data-collapsible="icon"] *) { display: none; } +} + .group-data-\[collapsible\=icon\]\:size-8\! { + &:is(:where(.group)[data-collapsible="icon"] *) { width: calc(var(--spacing) * 8) !important; height: calc(var(--spacing) * 8) !important; } +} + .group-data-\[collapsible\=icon\]\:w-\(--sidebar-width-icon\) { + &:is(:where(.group)[data-collapsible="icon"] *) { width: var(--sidebar-width-icon); } +} + .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\+2px\)\] { + &:is(:where(.group)[data-collapsible="icon"] *) { width: calc(var(--sidebar-width-icon) + (calc(var(--spacing) * 4)) + 2px); } +} + .group-data-\[collapsible\=icon\]\:overflow-hidden { + &:is(:where(.group)[data-collapsible="icon"] *) { overflow: hidden; } +} + .group-data-\[collapsible\=icon\]\:p-0\! { + &:is(:where(.group)[data-collapsible="icon"] *) { padding: calc(var(--spacing) * 0) !important; } +} + .group-data-\[collapsible\=icon\]\:p-2\! { + &:is(:where(.group)[data-collapsible="icon"] *) { padding: calc(var(--spacing) * 2) !important; } +} + .group-data-\[collapsible\=icon\]\:opacity-0 { + &:is(:where(.group)[data-collapsible="icon"] *) { opacity: 0; } +} + .group-data-\[collapsible\=offcanvas\]\:inset-s-\[calc\(var\(--sidebar-width\)\*-1\)\] { + &:is(:where(.group)[data-collapsible="offcanvas"] *) { inset-inline-start: calc(var(--sidebar-width) * -1); } +} + .group-data-\[collapsible\=offcanvas\]\:inset-e-\[calc\(var\(--sidebar-width\)\*-1\)\] { + &:is(:where(.group)[data-collapsible="offcanvas"] *) { inset-inline-end: calc(var(--sidebar-width) * -1); } +} + .group-data-\[collapsible\=offcanvas\]\:w-0 { + &:is(:where(.group)[data-collapsible="offcanvas"] *) { width: calc(var(--spacing) * 0); } +} + .group-data-\[collapsible\=offcanvas\]\:translate-x-0 { + &:is(:where(.group)[data-collapsible="offcanvas"] *) { --tw-translate-x: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); } +} + .group-data-\[disabled\=true\]\:pointer-events-none { + &:is(:where(.group)[data-disabled="true"] *) { pointer-events: none; } +} + .group-data-\[disabled\=true\]\:opacity-50 { + &:is(:where(.group)[data-disabled="true"] *) { opacity: 0.5; } +} + .group-data-\[disabled\=true\]\/input-group\:opacity-50 { + &:is(:where(.group\/input-group)[data-disabled="true"] *) { opacity: 0.5; } +} + .group-data-\[side\=left\]\:-inset-e-4 { + &:is(:where(.group)[data-side="left"] *) { inset-inline-end: calc(var(--spacing) * -4); } +} + .group-data-\[side\=left\]\:border-e { + &:is(:where(.group)[data-side="left"] *) { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 1px; } +} + .group-data-\[side\=right\]\:inset-s-0 { + &:is(:where(.group)[data-side="right"] *) { inset-inline-start: calc(var(--spacing) * 0); } +} + .group-data-\[side\=right\]\:rotate-180 { + &:is(:where(.group)[data-side="right"] *) { rotate: 180deg; } +} + .group-data-\[side\=right\]\:border-s { + &:is(:where(.group)[data-side="right"] *) { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 1px; } +} + .group-data-\[variant\=floating\]\:rounded-lg { + &:is(:where(.group)[data-variant="floating"] *) { border-radius: var(--radius); } +} + .group-data-\[variant\=floating\]\:border { + &:is(:where(.group)[data-variant="floating"] *) { border-style: var(--tw-border-style); border-width: 1px; } +} + .group-data-\[variant\=floating\]\:border-sidebar-border { + &:is(:where(.group)[data-variant="floating"] *) { border-color: var(--sidebar-border); } +} + .group-data-\[variant\=floating\]\:shadow-sm { + &:is(:where(.group)[data-variant="floating"] *) { --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); } +} + .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:block { + &:is(:where(.group\/drawer-content)[data-vaul-drawer-direction="bottom"] *) { display: block; } +} + .group-\[\.toast\]\:bg-muted\! { + &:is(:where(.group):is(.toast) *) { background-color: var(--muted) !important; } +} + .group-\[\.toast\]\:bg-primary\! { + &:is(:where(.group):is(.toast) *) { background-color: var(--primary) !important; } +} + .group-\[\.toast\]\:text-muted-foreground\! { + &:is(:where(.group):is(.toast) *) { color: var(--muted-foreground) !important; } +} + .group-\[\.toast\]\:text-primary-foreground\! { + &:is(:where(.group):is(.toast) *) { color: var(--primary-foreground) !important; } +} + .group-\[\.toast\[data-promise\=\"true\"\]\[data-type\=\"loading\"\]\]\:hidden\! { + &:is(:where(.group):is(.toast[data-promise="true"][data-type="loading"]) *) { display: none !important; } +} + .group-\[\.toast\[data-type\=\"error\"\]\]\:i-mdi-content-copy { + &:is(:where(.group):is(.toast[data-type="error"]) *) { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19 21H8V7h11m0-2H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2m-3-4H4a2 2 0 0 0-2 2v14h2V3h12z'/%3E%3C/svg%3E"); } +} + .group-\[\.toaster\]\:border-border\! { + &:is(:where(.group):is(.toaster) *) { border-color: var(--border) !important; } +} + .group-\[\.toaster\]\:bg-background\! { + &:is(:where(.group):is(.toaster) *) { background-color: var(--background) !important; } +} + .group-\[\.toaster\]\:shadow-lg { + &:is(:where(.group):is(.toaster) *) { --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-\[\&\:not\(\[data-selected\]\)\]\:border-transparent { + &:is(:where(.group):not([data-selected]) *) { border-color: transparent; } +} + .peer-hover\/menu-button\:text-sidebar-accent-foreground { + &:is(:where(.peer\/menu-button):hover ~ *) { + @media (hover: hover) { + color: var(--sidebar-accent-foreground); +} +} +} + .peer-disabled\:cursor-not-allowed { + &:is(:where(.peer):disabled ~ *) { cursor: not-allowed; } +} + .peer-disabled\:opacity-50 { + &:is(:where(.peer):disabled ~ *) { opacity: 0.5; } +} + .peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground { + &:is(:where(.peer\/menu-button)[data-active="true"] ~ *) { color: var(--sidebar-accent-foreground); } +} + .peer-data-\[size\=default\]\/menu-button\:top-1\.5 { + &:is(:where(.peer\/menu-button)[data-size="default"] ~ *) { top: calc(var(--spacing) * 1.5); } +} + .peer-data-\[size\=lg\]\/menu-button\:top-2\.5 { + &:is(:where(.peer\/menu-button)[data-size="lg"] ~ *) { top: calc(var(--spacing) * 2.5); } +} + .peer-data-\[size\=sm\]\/menu-button\:top-1 { + &:is(:where(.peer\/menu-button)[data-size="sm"] ~ *) { top: calc(var(--spacing) * 1); } +} + .selection\:bg-primary { + & ::selection { background-color: var(--primary); } + &::selection { background-color: var(--primary); } +} + .selection\:text-primary-foreground { + & ::selection { color: var(--primary-foreground); } + &::selection { color: var(--primary-foreground); } +} + .placeholder\:text-muted-foreground { + &::placeholder { color: var(--muted-foreground); } +} + .after\:absolute { + &::after { content: var(--tw-content); position: absolute; } +} + .after\:-inset-2 { + &::after { content: var(--tw-content); inset: calc(var(--spacing) * -2); } +} + .after\:inset-y-0 { + &::after { content: var(--tw-content); inset-block: calc(var(--spacing) * 0); } +} + .after\:inset-s-1\/2 { + &::after { content: var(--tw-content); inset-inline-start: calc(50%); } +} + .after\:inset-s-\[calc\(1\/2\*100\%-1px\)\] { + &::after { content: var(--tw-content); inset-inline-start: calc(50% - 1px); } +} + .after\:top-1\/2 { + &::after { content: var(--tw-content); top: calc(50%); } +} + .after\:right-0 { + &::after { content: var(--tw-content); right: calc(var(--spacing) * 0); } +} + .after\:block { + &::after { content: var(--tw-content); display: block; } +} + .after\:h-8 { + &::after { content: var(--tw-content); height: calc(var(--spacing) * 8); } +} + .after\:h-12 { + &::after { content: var(--tw-content); height: calc(var(--spacing) * 12); } +} + .after\:w-1 { + &::after { content: var(--tw-content); width: calc(var(--spacing) * 1); } +} + .after\:w-\[2px\] { + &::after { content: var(--tw-content); width: 2px; } +} + .after\:w-\[6px\] { + &::after { content: var(--tw-content); width: 6px; } +} + .after\:-translate-x-1\/2 { + &::after { content: var(--tw-content); --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } +} + .after\:-translate-x-px { + &::after { content: var(--tw-content); --tw-translate-x: -1px; translate: var(--tw-translate-x) var(--tw-translate-y); } +} + .after\:-translate-y-1\/2 { + &::after { content: var(--tw-content); --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } +} + .after\:rounded-full { + &::after { content: var(--tw-content); border-radius: calc(infinity * 1px); } +} + .after\:bg-border { + &::after { content: var(--tw-content); background-color: var(--border); } +} + .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)); } +} + .group-data-\[collapsible\=offcanvas\]\:after\:start-full { + &:is(:where(.group)[data-collapsible="offcanvas"] *) { + &::after { content: var(--tw-content); inset-inline-start: 100%; } +} +} + .last\:border-b-0 { + &:last-child { border-bottom-style: var(--tw-border-style); border-bottom-width: 0px; } +} + .hover\:z-10 { + &:hover { + @media (hover: hover) { + z-index: 10; +} +} +} + .hover\:min-w-max { + &:hover { + @media (hover: hover) { + min-width: max-content; +} +} +} + .hover\:bg-accent { + &:hover { + @media (hover: hover) { + background-color: var(--accent); +} +} +} + .hover\:bg-accent\/50 { + &:hover { + @media (hover: hover) { + background-color: var(--accent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--accent) 50%, transparent); +} +} +} +} + .hover\:bg-destructive\/20\! { + &:hover { + @media (hover: hover) { + background-color: var(--destructive) !important; + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--destructive) 20%, transparent) !important; +} +} +} +} + .hover\:bg-destructive\/90 { + &:hover { + @media (hover: hover) { + background-color: var(--destructive); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--destructive) 90%, transparent); +} +} +} +} + .hover\:bg-muted { + &:hover { + @media (hover: hover) { + background-color: var(--muted); +} +} +} + .hover\:bg-muted\/30 { + &:hover { + @media (hover: hover) { + background-color: var(--muted); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--muted) 30%, transparent); +} +} +} +} + .hover\:bg-primary\/10 { + &:hover { + @media (hover: hover) { + background-color: var(--primary); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--primary) 10%, transparent); +} +} +} +} + .hover\:bg-primary\/15 { + &:hover { + @media (hover: hover) { + background-color: var(--primary); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--primary) 15%, transparent); +} +} +} +} + .hover\:bg-primary\/20 { + &:hover { + @media (hover: hover) { + background-color: var(--primary); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--primary) 20%, transparent); +} +} +} +} + .hover\:bg-primary\/90 { + &:hover { + @media (hover: hover) { + background-color: var(--primary); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--primary) 90%, transparent); +} +} +} +} + .hover\:bg-secondary\/80 { + &:hover { + @media (hover: hover) { + background-color: var(--secondary); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--secondary) 80%, transparent); +} +} +} +} + .hover\:bg-sidebar-accent { + &:hover { + @media (hover: hover) { + background-color: var(--sidebar-accent); +} +} +} + .hover\:bg-transparent { + &:hover { + @media (hover: hover) { + background-color: transparent; +} +} +} + .hover\:text-accent-foreground { + &:hover { + @media (hover: hover) { + color: var(--accent-foreground); +} +} +} + .hover\:text-destructive { + &:hover { + @media (hover: hover) { + color: var(--destructive); +} +} +} + .hover\:text-foreground { + &:hover { + @media (hover: hover) { + color: var(--foreground); +} +} +} + .hover\:text-muted-foreground { + &:hover { + @media (hover: hover) { + color: var(--muted-foreground); +} +} +} + .hover\:text-primary { + &:hover { + @media (hover: hover) { + color: var(--primary); +} +} +} + .hover\:text-sidebar-accent-foreground { + &:hover { + @media (hover: hover) { + color: var(--sidebar-accent-foreground); +} +} +} + .hover\:underline { + &:hover { + @media (hover: hover) { + text-decoration-line: underline; +} +} +} + .hover\:opacity-100 { + &:hover { + @media (hover: hover) { + opacity: 1; +} +} +} + .hover\:shadow-\[0_0_0_1px_var\(--sidebar-accent\)\] { + &:hover { + @media (hover: hover) { + --tw-shadow: 0 0 0 1px var(--tw-shadow-color, var(--sidebar-accent)); 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-none { + &:hover { + @media (hover: hover) { + --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); +} +} +} + .hover\:ring-4 { + &:hover { + @media (hover: hover) { + --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); +} +} +} + .hover\:brightness-90 { + &:hover { + @media (hover: hover) { + --tw-brightness: brightness(90%); 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,); +} +} +} + .hover\:delay-300 { + &:hover { + @media (hover: hover) { + transition-delay: 300ms; +} +} +} + .hover\:delay-300 { + &:hover { + @media (hover: hover) { + animation-delay: 0.3s; --tw-animation-delay: .3s; +} +} +} + .hover\:group-data-\[collapsible\=offcanvas\]\:bg-sidebar { + &:hover { + @media (hover: hover) { + &:is(:where(.group)[data-collapsible="offcanvas"] *) { background-color: var(--sidebar); } +} +} +} + .after\:hover\:h-10 { + &::after { + content: var(--tw-content); + &:hover { + @media (hover: hover) { + height: calc(var(--spacing) * 10); +} +} +} +} + .hover\:after\:bg-sidebar-border { + &:hover { + @media (hover: hover) { + &::after { content: var(--tw-content); background-color: var(--sidebar-border); } +} +} +} + .focus\:border-ring { + &:focus { border-color: var(--ring); } +} + .focus\:bg-accent { + &:focus { background-color: var(--accent); } +} + .focus\:text-accent-foreground { + &:focus { color: var(--accent-foreground); } +} + .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-\[3px\] { + &:focus { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } +} + .focus\:ring-ring { + &:focus { --tw-ring-color: var(--ring); } +} + .focus\:ring-ring\/50 { + &:focus { + --tw-ring-color: var(--ring); + @supports (color: color-mix(in lab, red, red)) { + --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); +} +} +} + .focus\:outline-none { + &:focus { --tw-outline-style: none; outline-style: none; } +} + .focus-visible\:border-ring { + &:focus-visible { border-color: var(--ring); } +} + .focus-visible\:ring-0 { + &:focus-visible { --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-visible\:ring-1 { + &:focus-visible { --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-visible\:ring-2 { + &:focus-visible { --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-visible\:ring-4 { + &:focus-visible { --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); } +} + .focus-visible\:ring-\[3px\] { + &:focus-visible { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } +} + .focus-visible\:ring-destructive\/20 { + &:focus-visible { + --tw-ring-color: var(--destructive); + @supports (color: color-mix(in lab, red, red)) { + --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent); +} +} +} + .focus-visible\:ring-ring { + &:focus-visible { --tw-ring-color: var(--ring); } +} + .focus-visible\:ring-ring\/50 { + &:focus-visible { + --tw-ring-color: var(--ring); + @supports (color: color-mix(in lab, red, red)) { + --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); +} +} +} + .focus-visible\:ring-offset-1 { + &:focus-visible { --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-visible\:ring-offset-2 { + &:focus-visible { --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-visible\:outline-hidden { + &:focus-visible { + --tw-outline-style: none; outline-style: none; + @media (forced-colors: active) { + outline: transparent solid 2px; outline-offset: 2px; +} +} +} + .focus-visible\:outline-1 { + &: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-ring { + &:focus-visible { outline-color: var(--ring); } +} + .focus-visible\:outline-none { + &:focus-visible { --tw-outline-style: none; outline-style: none; } +} + .active\:bg-sidebar-accent { + &:active { background-color: var(--sidebar-accent); } +} + .active\:text-sidebar-accent-foreground { + &:active { color: var(--sidebar-accent-foreground); } +} + .disabled\:pointer-events-none { + &:disabled { pointer-events: none; } +} + .disabled\:cursor-default { + &:disabled { cursor: default; } +} + .disabled\:cursor-not-allowed { + &:disabled { cursor: not-allowed; } +} + .disabled\:border-transparent { + &:disabled { border-color: transparent; } +} + .disabled\:bg-transparent { + &:disabled { background-color: transparent; } +} + .disabled\:opacity-50 { + &:disabled { opacity: 0.5; } +} + .disabled\:opacity-100 { + &:disabled { opacity: 1; } +} + .disabled\:contrast-\[0\.8\] { + &:disabled { --tw-contrast: contrast(0.8); 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,); } +} + .in-data-\[side\=left\]\:cursor-w-resize { + :where([data-side="left"]) & { cursor: w-resize; } +} + .in-data-\[side\=right\]\:cursor-e-resize { + :where([data-side="right"]) & { cursor: e-resize; } +} + .in-data-\[slot\=combobox-content\]\:focus-within\:border-inherit { + :where([data-slot="combobox-content"]) & { + &:focus-within { border-color: inherit; } +} +} + .in-data-\[slot\=combobox-content\]\:focus-within\:ring-0 { + :where([data-slot="combobox-content"]) & { + &:focus-within { --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); } +} +} + .has-disabled\:cursor-not-allowed { + &:has(:disabled) { cursor: not-allowed; } +} + .has-disabled\:bg-input\/50 { + &:has(:disabled) { + background-color: var(--input); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--input) 50%, transparent); +} +} +} + .has-disabled\:opacity-50 { + &:has(:disabled) { opacity: 0.5; } +} + .has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\] { + &:has([data-slot="card-action"]) { grid-template-columns: 1fr auto; } +} + .has-data-\[variant\=inset\]\:bg-sidebar { + &:has([data-variant="inset"]) { background-color: var(--sidebar); } +} + .has-\[\.real-input\:focus-visible\]\:border-ring { + &:has(:is(.real-input:focus-visible)) { border-color: var(--ring); } +} + .has-\[\.real-input\:focus-visible\]\:ring-\[3px\] { + &:has(:is(.real-input:focus-visible)) { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } +} + .has-\[\.real-input\:focus-visible\]\:ring-ring\/50 { + &:has(:is(.real-input:focus-visible)) { + --tw-ring-color: var(--ring); + @supports (color: color-mix(in lab, red, red)) { + --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); +} +} +} + .has-\[\.real-input\[aria-invalid\=true\]\]\:border-destructive { + &:has(:is(.real-input[aria-invalid="true"])) { border-color: var(--destructive); } +} + .has-\[\.real-input\[aria-invalid\=true\]\]\:ring-destructive\/20 { + &:has(:is(.real-input[aria-invalid="true"])) { + --tw-ring-color: var(--destructive); + @supports (color: color-mix(in lab, red, red)) { + --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent); +} +} +} + .has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:border-ring { + &:has(:is([data-slot="input-group-control"]:focus-visible)) { border-color: var(--ring); } +} + .has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-3 { + &:has(:is([data-slot="input-group-control"]:focus-visible)) { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } +} + .has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-ring\/50 { + &:has(:is([data-slot="input-group-control"]:focus-visible)) { + --tw-ring-color: var(--ring); + @supports (color: color-mix(in lab, red, red)) { + --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); +} +} +} + .has-\[\[data-slot\]\[aria-invalid\=true\]\]\:border-destructive { + &:has(:is([data-slot][aria-invalid="true"])) { border-color: var(--destructive); } +} + .has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-3 { + &:has(:is([data-slot][aria-invalid="true"])) { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } +} + .has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/20 { + &:has(:is([data-slot][aria-invalid="true"])) { + --tw-ring-color: var(--destructive); + @supports (color: color-mix(in lab, red, red)) { + --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent); +} +} +} + .has-\[\>\.icon-wrapper\:first-child\>\:first-child\[class\*\=\"i-mdi-\"\]\]\:ps-1\.5 { + &:has(> .icon-wrapper:first-child > :first-child[class*="i-mdi-"]) { padding-inline-start: calc(var(--spacing) * 1.5); } +} + .has-\[\>\.icon-wrapper\:first-child\>\:first-child\[class\*\=\"i-mdi-\"\]\]\:ps-2 { + &:has(> .icon-wrapper:first-child > :first-child[class*="i-mdi-"]) { padding-inline-start: calc(var(--spacing) * 2); } +} + .has-\[\>\.icon-wrapper\:first-child\>\:first-child\[class\*\=\"i-mdi-\"\]\]\:ps-6 { + &:has(> .icon-wrapper:first-child > :first-child[class*="i-mdi-"]) { padding-inline-start: calc(var(--spacing) * 6); } +} + .has-\[\>\:last-child\[class\*\=\"i-mdi-\"\]\]\:pe-1\.5 { + &:has(> :last-child[class*="i-mdi-"]) { padding-inline-end: calc(var(--spacing) * 1.5); } +} + .has-\[\>\:last-child\[class\*\=\"i-mdi-\"\]\]\:pe-2 { + &:has(> :last-child[class*="i-mdi-"]) { padding-inline-end: calc(var(--spacing) * 2); } +} + .has-\[\>\:last-child\[class\*\=\"i-mdi-\"\]\]\:pe-6 { + &:has(> :last-child[class*="i-mdi-"]) { padding-inline-end: calc(var(--spacing) * 6); } +} + .has-\[\>\[class\*\=\"i-mdi-\"\]\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\] { + &:has(> [class*="i-mdi-"]) { grid-template-columns: calc(var(--spacing) * 4) 1fr; } +} + .has-\[\>\[class\*\=\"i-mdi-\"\]\]\:gap-x-3 { + &:has(> [class*="i-mdi-"]) { column-gap: calc(var(--spacing) * 3); } +} + .has-\[\>\[data-align\=block-end\]\]\:h-auto { + &:has(> [data-align="block-end"]) { height: auto; } +} + .has-\[\>\[data-align\=block-end\]\]\:flex-col { + &:has(> [data-align="block-end"]) { flex-direction: column; } +} + .has-\[\>\[data-align\=block-start\]\]\:h-auto { + &:has(> [data-align="block-start"]) { height: auto; } +} + .has-\[\>\[data-align\=block-start\]\]\:flex-col { + &:has(> [data-align="block-start"]) { flex-direction: column; } +} + .has-\[\>\[data-slot\=button-group\]\]\:gap-2 { + &:has(> [data-slot="button-group"]) { gap: calc(var(--spacing) * 2); } +} + .has-\[\>button\]\:mr-\[-0\.3rem\] { + &:has(> button) { margin-right: -0.3rem; } +} + .has-\[\>button\]\:ml-\[-0\.3rem\] { + &:has(> button) { margin-left: -0.3rem; } +} + .has-\[\>kbd\]\:mr-\[-0\.15rem\] { + &:has(> kbd) { margin-right: -0.15rem; } +} + .has-\[\>kbd\]\:ml-\[-0\.15rem\] { + &:has(> kbd) { margin-left: -0.15rem; } +} + .has-\[\>svg\]\:p-0 { + &:has(> svg) { padding: calc(var(--spacing) * 0); } +} + .has-\[\>textarea\]\:h-auto { + &:has(> textarea) { height: auto; } +} + .aria-disabled\:pointer-events-none { + &[aria-disabled="true"] { pointer-events: none; } +} + .aria-disabled\:opacity-50 { + &[aria-disabled="true"] { opacity: 0.5; } +} + .aria-invalid\:border-destructive { + &[aria-invalid="true"] { border-color: var(--destructive); } +} + .aria-invalid\:ring-0 { + &[aria-invalid="true"] { --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); } +} + .aria-invalid\:ring-destructive\/20 { + &[aria-invalid="true"] { + --tw-ring-color: var(--destructive); + @supports (color: color-mix(in lab, red, red)) { + --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent); +} +} +} + .aria-selected\:border-l-primary { + &[aria-selected="true"] { border-left-color: var(--primary); } +} + .aria-selected\:bg-accent { + &[aria-selected="true"] { background-color: var(--accent); } +} + .aria-selected\:bg-primary\/15 { + &[aria-selected="true"] { + background-color: var(--primary); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--primary) 15%, transparent); +} +} +} + .aria-selected\:text-accent-foreground { + &[aria-selected="true"] { color: var(--accent-foreground); } +} + .\*\*\:data-command-group\:px-2 { + :is(& *) { + &[data-command-group] { padding-inline: calc(var(--spacing) * 2); } +} +} + .\*\*\:data-command-input\:h-12 { + :is(& *) { + &[data-command-input] { height: calc(var(--spacing) * 12); } +} +} + .\*\*\:data-command-item\:px-2 { + :is(& *) { + &[data-command-item] { padding-inline: calc(var(--spacing) * 2); } +} +} + .\*\*\:data-command-item\:py-3 { + :is(& *) { + &[data-command-item] { padding-block: calc(var(--spacing) * 3); } +} +} + .data-highlighted\:bg-accent { + &[data-highlighted] { background-color: var(--accent); } +} + .data-highlighted\:text-accent-foreground { + &[data-highlighted] { color: var(--accent-foreground); } +} + .data-inset\:ps-8 { + &[data-inset] { padding-inline-start: calc(var(--spacing) * 8); } +} + .data-placeholder\:text-muted-foreground { + &[data-placeholder] { color: var(--muted-foreground); } +} + .data-\[active\=true\]\:bg-sidebar-accent { + &[data-active="true"] { background-color: var(--sidebar-accent); } +} + .data-\[active\=true\]\:font-medium { + &[data-active="true"] { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } +} + .data-\[active\=true\]\:text-sidebar-accent-foreground { + &[data-active="true"] { color: var(--sidebar-accent-foreground); } +} + .data-\[direction\=vertical\]\:h-px { + &[data-direction="vertical"] { height: 1px; } +} + .data-\[direction\=vertical\]\:w-full { + &[data-direction="vertical"] { width: 100%; } +} + .data-\[direction\=vertical\]\:flex-col { + &[data-direction="vertical"] { flex-direction: column; } +} + .data-\[direction\=vertical\]\:after\:inset-s-0 { + &[data-direction="vertical"] { + &::after { content: var(--tw-content); inset-inline-start: calc(var(--spacing) * 0); } +} +} + .data-\[direction\=vertical\]\:after\:h-1 { + &[data-direction="vertical"] { + &::after { content: var(--tw-content); height: calc(var(--spacing) * 1); } +} +} + .data-\[direction\=vertical\]\:after\:w-full { + &[data-direction="vertical"] { + &::after { content: var(--tw-content); width: 100%; } +} +} + .data-\[direction\=vertical\]\:after\:translate-x-0 { + &[data-direction="vertical"] { + &::after { content: var(--tw-content); --tw-translate-x: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); } +} +} + .data-\[direction\=vertical\]\:after\:-translate-y-1\/2 { + &[data-direction="vertical"] { + &::after { content: var(--tw-content); --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } +} +} + .data-\[disabled\=true\]\:pointer-events-none { + &[data-disabled="true"] { pointer-events: none; } +} + .data-\[disabled\=true\]\:opacity-50 { + &[data-disabled="true"] { opacity: 0.5; } +} + .data-\[expanded\=\"true\"\]\:h-max\! { + &[data-expanded="true"] { height: max-content !important; } +} + .data-\[expanded\=\"true\"\]\:max-h-max { + &[data-expanded="true"] { max-height: max-content; } +} + .data-\[orientation\=horizontal\]\:mx-px { + &[data-orientation="horizontal"] { margin-inline: 1px; } +} + .data-\[orientation\=horizontal\]\:h-1\.5 { + &[data-orientation="horizontal"] { height: calc(var(--spacing) * 1.5); } +} + .data-\[orientation\=horizontal\]\:h-full { + &[data-orientation="horizontal"] { height: 100%; } +} + .data-\[orientation\=horizontal\]\:h-px { + &[data-orientation="horizontal"] { height: 1px; } +} + .data-\[orientation\=horizontal\]\:w-auto { + &[data-orientation="horizontal"] { width: auto; } +} + .data-\[orientation\=horizontal\]\:w-full { + &[data-orientation="horizontal"] { width: 100%; } +} + .data-\[orientation\=vertical\]\:my-px { + &[data-orientation="vertical"] { margin-block: 1px; } +} + .data-\[orientation\=vertical\]\:h-auto { + &[data-orientation="vertical"] { height: auto; } +} + .data-\[orientation\=vertical\]\:h-full { + &[data-orientation="vertical"] { height: 100%; } +} + .data-\[orientation\=vertical\]\:min-h-44 { + &[data-orientation="vertical"] { min-height: calc(var(--spacing) * 44); } +} + .data-\[orientation\=vertical\]\:w-1\.5 { + &[data-orientation="vertical"] { width: calc(var(--spacing) * 1.5); } +} + .data-\[orientation\=vertical\]\:w-auto { + &[data-orientation="vertical"] { width: auto; } +} + .data-\[orientation\=vertical\]\:w-full { + &[data-orientation="vertical"] { width: 100%; } +} + .data-\[orientation\=vertical\]\:w-px { + &[data-orientation="vertical"] { width: 1px; } +} + .data-\[orientation\=vertical\]\:flex-col { + &[data-orientation="vertical"] { flex-direction: column; } +} + .data-\[side\=bottom\]\:-translate-x-1\/2 { + &[data-side="bottom"] { --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } +} + .data-\[side\=bottom\]\:-translate-y-\[calc\(-50\%\+1px\)\] { + &[data-side="bottom"] { --tw-translate-y: calc(calc(-50% + 1px) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } +} + .data-\[side\=bottom\]\:translate-y-1 { + &[data-side="bottom"] { --tw-translate-y: calc(var(--spacing) * 1); translate: var(--tw-translate-x) var(--tw-translate-y); } +} + .data-\[side\=bottom\]\:slide-in-from-top-2 { + &[data-side="bottom"] { --tw-enter-translate-y: calc(2*var(--spacing)*-1); } +} + .data-\[side\=left\]\:-translate-x-1 { + &[data-side="left"] { --tw-translate-x: calc(var(--spacing) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } +} + .data-\[side\=left\]\:-translate-y-\[calc\(50\%-3px\)\] { + &[data-side="left"] { --tw-translate-y: calc(calc(50% - 3px) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } +} + .data-\[side\=left\]\:slide-in-from-end-2 { + &[data-side="left"] { + &:where(:dir(ltr), [dir="ltr"]) { --tw-enter-translate-x: calc(2*var(--spacing)); } + &:where(:dir(rtl), [dir="rtl"]) { --tw-enter-translate-x: calc(2*var(--spacing)*-1); } +} +} + .data-\[side\=right\]\:translate-x-1 { + &[data-side="right"] { --tw-translate-x: calc(var(--spacing) * 1); translate: var(--tw-translate-x) var(--tw-translate-y); } +} + .data-\[side\=right\]\:translate-x-\[calc\(50\%\+2px\)\] { + &[data-side="right"] { --tw-translate-x: calc(50% + 2px); translate: var(--tw-translate-x) var(--tw-translate-y); } +} + .data-\[side\=right\]\:translate-y-1\/2 { + &[data-side="right"] { --tw-translate-y: calc(1 / 2 * 100%); translate: var(--tw-translate-x) var(--tw-translate-y); } +} + .data-\[side\=right\]\:slide-in-from-start-2 { + &[data-side="right"] { + &:where(:dir(ltr), [dir="ltr"]) { --tw-enter-translate-x: calc(2*var(--spacing)*-1); } + &:where(:dir(rtl), [dir="rtl"]) { --tw-enter-translate-x: calc(2*var(--spacing)); } +} +} + .data-\[side\=top\]\:translate-x-1\/2 { + &[data-side="top"] { --tw-translate-x: calc(1 / 2 * 100%); translate: var(--tw-translate-x) var(--tw-translate-y); } +} + .data-\[side\=top\]\:-translate-y-1 { + &[data-side="top"] { --tw-translate-y: calc(var(--spacing) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } +} + .data-\[side\=top\]\:translate-y-\[calc\(-50\%\+2px\)\] { + &[data-side="top"] { --tw-translate-y: calc(-50% + 2px); translate: var(--tw-translate-x) var(--tw-translate-y); } +} + .data-\[side\=top\]\:slide-in-from-bottom-2 { + &[data-side="top"] { --tw-enter-translate-y: calc(2*var(--spacing)); } +} + .data-\[size\=default\]\:h-10 { + &[data-size="default"] { height: calc(var(--spacing) * 10); } +} + .data-\[size\=sm\]\:h-9 { + &[data-size="sm"] { height: calc(var(--spacing) * 9); } +} + .\*\:data-\[slot\=alert-description\]\:text-current { + :is(& > *) { + &[data-slot="alert-description"] { color: currentcolor; } +} +} + .\*\*\:data-\[slot\=command-input-wrapper\]\:h-12 { + :is(& *) { + &[data-slot="command-input-wrapper"] { height: calc(var(--spacing) * 12); } +} +} + .\*\:data-\[slot\=select-value\]\:line-clamp-1 { + :is(& > *) { + &[data-slot="select-value"] { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } +} +} + .\*\:data-\[slot\=select-value\]\:flex { + :is(& > *) { + &[data-slot="select-value"] { display: flex; } +} +} + .\*\:data-\[slot\=select-value\]\:items-center { + :is(& > *) { + &[data-slot="select-value"] { align-items: center; } +} +} + .\*\:data-\[slot\=select-value\]\:gap-2 { + :is(& > *) { + &[data-slot="select-value"] { gap: calc(var(--spacing) * 2); } +} +} + .data-\[state\=active\]\:bg-background { + &[data-state="active"] { background-color: var(--background); } +} + .data-\[state\=active\]\:shadow-sm { + &[data-state="active"] { --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); } +} + .data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\] { + &[data-state="checked"] { --tw-translate-x: calc(100% - 2px); translate: var(--tw-translate-x) var(--tw-translate-y); } +} + .data-\[state\=checked\]\:border-primary { + &[data-state="checked"] { border-color: var(--primary); } +} + .data-\[state\=checked\]\:bg-primary { + &[data-state="checked"] { background-color: var(--primary); } +} + .data-\[state\=checked\]\:text-primary-foreground { + &[data-state="checked"] { color: var(--primary-foreground); } +} + .data-\[state\=closed\]\:animate-accordion-up { + &[data-state="closed"] { animation: accordion-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); } +} + .data-\[state\=closed\]\:animate-collapsible-up { + &[data-state="closed"] { animation: collapsible-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); } +} + .data-\[state\=closed\]\:animate-out { + &[data-state="closed"] { animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); } +} + .data-\[state\=closed\]\:duration-300 { + &[data-state="closed"] { --tw-duration: 300ms; transition-duration: 300ms; } +} + .data-\[state\=closed\]\:fade-out-0 { + &[data-state="closed"] { --tw-exit-opacity: 0; } +} + .data-\[state\=closed\]\:slide-out-to-end { + &[data-state="closed"] { + &:dir(ltr) { --tw-exit-translate-x: 100%; } + &:dir(rtl) { --tw-exit-translate-x: -100%; } +} +} + .data-\[state\=closed\]\:slide-out-to-start { + &[data-state="closed"] { + &:dir(ltr) { --tw-exit-translate-x: -100%; } + &:dir(rtl) { --tw-exit-translate-x: 100%; } +} +} + .data-\[state\=closed\]\:zoom-out-95 { + &[data-state="closed"] { --tw-exit-scale: .95; } +} + .data-\[state\=closed\]\:slide-out-to-bottom { + &[data-state="closed"] { --tw-exit-translate-y: 100%; } +} + .data-\[state\=closed\]\:slide-out-to-top { + &[data-state="closed"] { --tw-exit-translate-y: -100%; } +} + .data-\[state\=on\]\:bg-accent { + &[data-state="on"] { background-color: var(--accent); } +} + .data-\[state\=on\]\:text-accent-foreground { + &[data-state="on"] { color: var(--accent-foreground); } +} + .data-\[state\=open\]\:animate-accordion-down { + &[data-state="open"] { animation: accordion-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); } +} + .data-\[state\=open\]\:animate-collapsible-down { + &[data-state="open"] { animation: collapsible-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); } +} + .data-\[state\=open\]\:animate-in { + &[data-state="open"] { animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); } +} + .data-\[state\=open\]\:bg-accent { + &[data-state="open"] { background-color: var(--accent); } +} + .data-\[state\=open\]\:text-accent-foreground { + &[data-state="open"] { color: var(--accent-foreground); } +} + .data-\[state\=open\]\:opacity-100 { + &[data-state="open"] { opacity: 1; } +} + .data-\[state\=open\]\:duration-500 { + &[data-state="open"] { --tw-duration: 500ms; transition-duration: 500ms; } +} + .data-\[state\=open\]\:fade-in-0 { + &[data-state="open"] { --tw-enter-opacity: 0; } +} + .data-\[state\=open\]\:slide-in-from-end { + &[data-state="open"] { + &:dir(ltr) { --tw-enter-translate-x: 100%; } + &:dir(rtl) { --tw-enter-translate-x: -100%; } +} +} + .data-\[state\=open\]\:slide-in-from-start { + &[data-state="open"] { + &:dir(ltr) { --tw-enter-translate-x: -100%; } + &:dir(rtl) { --tw-enter-translate-x: 100%; } +} +} + .data-\[state\=open\]\:zoom-in-95 { + &[data-state="open"] { --tw-enter-scale: .95; } +} + .data-\[state\=open\]\:slide-in-from-bottom { + &[data-state="open"] { --tw-enter-translate-y: 100%; } +} + .data-\[state\=open\]\:slide-in-from-top { + &[data-state="open"] { --tw-enter-translate-y: -100%; } +} + .data-\[state\=open\]\:hover\:bg-sidebar-accent { + &[data-state="open"] { + &:hover { + @media (hover: hover) { + background-color: var(--sidebar-accent); +} +} +} +} + .data-\[state\=open\]\:hover\:text-sidebar-accent-foreground { + &[data-state="open"] { + &:hover { + @media (hover: hover) { + color: var(--sidebar-accent-foreground); +} +} +} +} + .data-\[state\=unchecked\]\:translate-x-0 { + &[data-state="unchecked"] { --tw-translate-x: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); } +} + .data-\[state\=unchecked\]\:bg-input { + &[data-state="unchecked"] { background-color: var(--input); } +} + .data-\[variant\=destructive\]\:text-destructive { + &[data-variant="destructive"] { color: var(--destructive); } +} + .data-\[variant\=destructive\]\:data-highlighted\:bg-destructive\/10 { + &[data-variant="destructive"] { + &[data-highlighted] { + background-color: var(--destructive); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--destructive) 10%, transparent); +} +} +} +} + .data-\[variant\=destructive\]\:data-highlighted\:text-destructive { + &[data-variant="destructive"] { + &[data-highlighted] { color: var(--destructive); } +} +} + .data-\[vaul-drawer-direction\=bottom\]\:inset-x-0 { + &[data-vaul-drawer-direction="bottom"] { inset-inline: calc(var(--spacing) * 0); } +} + .data-\[vaul-drawer-direction\=bottom\]\:bottom-0 { + &[data-vaul-drawer-direction="bottom"] { bottom: calc(var(--spacing) * 0); } +} + .data-\[vaul-drawer-direction\=bottom\]\:mt-24 { + &[data-vaul-drawer-direction="bottom"] { margin-top: calc(var(--spacing) * 24); } +} + .data-\[vaul-drawer-direction\=bottom\]\:max-h-\[90dvh\] { + &[data-vaul-drawer-direction="bottom"] { max-height: 90dvh; } +} + .data-\[vaul-drawer-direction\=bottom\]\:rounded-t-lg { + &[data-vaul-drawer-direction="bottom"] { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); } +} + .data-\[vaul-drawer-direction\=bottom\]\:border-t { + &[data-vaul-drawer-direction="bottom"] { border-top-style: var(--tw-border-style); border-top-width: 1px; } +} + .data-\[vaul-drawer-direction\=left\]\:inset-y-0 { + &[data-vaul-drawer-direction="left"] { inset-block: calc(var(--spacing) * 0); } +} + .data-\[vaul-drawer-direction\=left\]\:inset-s-0 { + &[data-vaul-drawer-direction="left"] { inset-inline-start: calc(var(--spacing) * 0); } +} + .data-\[vaul-drawer-direction\=left\]\:w-3\/4 { + &[data-vaul-drawer-direction="left"] { width: calc(75%); } +} + .data-\[vaul-drawer-direction\=left\]\:border-e { + &[data-vaul-drawer-direction="left"] { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 1px; } +} + .data-\[vaul-drawer-direction\=right\]\:inset-y-0 { + &[data-vaul-drawer-direction="right"] { inset-block: calc(var(--spacing) * 0); } +} + .data-\[vaul-drawer-direction\=right\]\:inset-e-0 { + &[data-vaul-drawer-direction="right"] { inset-inline-end: calc(var(--spacing) * 0); } +} + .data-\[vaul-drawer-direction\=right\]\:w-3\/4 { + &[data-vaul-drawer-direction="right"] { width: calc(75%); } +} + .data-\[vaul-drawer-direction\=right\]\:border-s { + &[data-vaul-drawer-direction="right"] { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 1px; } +} + .data-\[vaul-drawer-direction\=top\]\:inset-x-0 { + &[data-vaul-drawer-direction="top"] { inset-inline: calc(var(--spacing) * 0); } +} + .data-\[vaul-drawer-direction\=top\]\:top-0 { + &[data-vaul-drawer-direction="top"] { top: calc(var(--spacing) * 0); } +} + .data-\[vaul-drawer-direction\=top\]\:mb-24 { + &[data-vaul-drawer-direction="top"] { margin-bottom: calc(var(--spacing) * 24); } +} + .data-\[vaul-drawer-direction\=top\]\:max-h-\[90dvh\] { + &[data-vaul-drawer-direction="top"] { max-height: 90dvh; } +} + .data-\[vaul-drawer-direction\=top\]\:rounded-b-lg { + &[data-vaul-drawer-direction="top"] { border-bottom-right-radius: var(--radius); border-bottom-left-radius: var(--radius); } +} + .data-\[vaul-drawer-direction\=top\]\:border-b { + &[data-vaul-drawer-direction="top"] { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } +} + .motion-safe\:animate-shimmer { + @media (prefers-reduced-motion: no-preference) { + animation: 2s linear 0s infinite normal none running shimmer; background-image: linear-gradient(90deg, oklch(from var(--muted-foreground) l c h / 0.2) 20%, oklch(from var(--foreground) l c h / 0.3) 50%, oklch(from var(--muted-foreground) l c h / 0.2) 65%); background-size: 200% 100%; background-repeat: repeat; +} +} + .motion-safe\:animate-pulse { + @media (prefers-reduced-motion: no-preference) { + animation: var(--animate-pulse); +} +} + .md\:right-6 { + @media (width >= 768px) { + right: calc(var(--spacing) * 6); +} +} + .md\:bottom-6 { + @media (width >= 768px) { + bottom: calc(var(--spacing) * 6); +} +} + .md\:mx-4 { + @media (width >= 768px) { + margin-inline: calc(var(--spacing) * 4); +} +} + .md\:mt-4 { + @media (width >= 768px) { + margin-top: calc(var(--spacing) * 4); +} +} + .md\:mr-0 { + @media (width >= 768px) { + margin-right: calc(var(--spacing) * 0); +} +} + .md\:mr-3 { + @media (width >= 768px) { + margin-right: calc(var(--spacing) * 3); +} +} + .md\:mb-2 { + @media (width >= 768px) { + margin-bottom: calc(var(--spacing) * 2); +} +} + .md\:mb-4 { + @media (width >= 768px) { + margin-bottom: calc(var(--spacing) * 4); +} +} + .md\:i-mdi-monitor { + @media (width >= 768px) { + display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M21 16H3V4h18m0-2H3c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h7v2H8v2h8v-2h-2v-2h7a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2'/%3E%3C/svg%3E"); +} +} + .md\:block { + @media (width >= 768px) { + display: block; +} +} + .md\:flex { + @media (width >= 768px) { + display: flex; +} +} + .md\:grid { + @media (width >= 768px) { + display: grid; +} +} + .md\:hidden { + @media (width >= 768px) { + display: none; +} +} + .md\:inline-flex { + @media (width >= 768px) { + display: inline-flex; +} +} + .md\:h-7 { + @media (width >= 768px) { + height: calc(var(--spacing) * 7); +} +} + .md\:h-8 { + @media (width >= 768px) { + height: calc(var(--spacing) * 8); +} +} + .md\:h-9 { + @media (width >= 768px) { + height: calc(var(--spacing) * 9); +} +} + .md\:h-10 { + @media (width >= 768px) { + height: calc(var(--spacing) * 10); +} +} + .md\:h-12 { + @media (width >= 768px) { + height: calc(var(--spacing) * 12); +} +} + .md\:max-h-\[40vh\] { + @media (width >= 768px) { + max-height: 40vh; +} +} + .md\:w-96 { + @media (width >= 768px) { + width: calc(var(--spacing) * 96); +} +} + .md\:w-full { + @media (width >= 768px) { + width: 100%; +} +} + .md\:grow-2 { + @media (width >= 768px) { + flex-grow: 2; +} +} + .md\:grid-cols-2 { + @media (width >= 768px) { + grid-template-columns: repeat(2, minmax(0px, 1fr)); +} +} + .md\:grid-cols-3 { + @media (width >= 768px) { + grid-template-columns: repeat(3, minmax(0px, 1fr)); +} +} + .md\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1\.2fr\)\] { + @media (width >= 768px) { + grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.2fr); +} +} + .md\:flex-col { + @media (width >= 768px) { + flex-direction: column; +} +} + .md\:justify-end { + @media (width >= 768px) { + justify-content: flex-end; +} +} + .md\:gap-2 { + @media (width >= 768px) { + gap: calc(var(--spacing) * 2); +} +} + .md\:gap-3 { + @media (width >= 768px) { + gap: calc(var(--spacing) * 3); +} +} + .md\:gap-4 { + @media (width >= 768px) { + gap: calc(var(--spacing) * 4); +} +} + .md\:space-y-4 { + @media (width >= 768px) { + :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))); } +} +} + .md\:space-y-6 { + @media (width >= 768px) { + :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))); } +} +} + .md\:space-y-8 { + @media (width >= 768px) { + :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))); } +} +} + .md\:rounded { + @media (width >= 768px) { + border-radius: 0.25rem; +} +} + .md\:border-4 { + @media (width >= 768px) { + border-style: var(--tw-border-style); border-width: 4px; +} +} + .md\:p-4 { + @media (width >= 768px) { + padding: calc(var(--spacing) * 4); +} +} + .md\:px-2 { + @media (width >= 768px) { + padding-inline: calc(var(--spacing) * 2); +} +} + .md\:py-4 { + @media (width >= 768px) { + padding-block: calc(var(--spacing) * 4); +} +} + .md\:py-6 { + @media (width >= 768px) { + padding-block: calc(var(--spacing) * 6); +} +} + .md\:pt-1 { + @media (width >= 768px) { + padding-top: calc(var(--spacing) * 1); +} +} + .md\:pr-0 { + @media (width >= 768px) { + padding-right: calc(var(--spacing) * 0); +} +} + .md\:pr-2 { + @media (width >= 768px) { + padding-right: calc(var(--spacing) * 2); +} +} + .md\:pr-3 { + @media (width >= 768px) { + padding-right: calc(var(--spacing) * 3); +} +} + .md\:pb-0 { + @media (width >= 768px) { + padding-bottom: calc(var(--spacing) * 0); +} +} + .md\:pb-2 { + @media (width >= 768px) { + padding-bottom: calc(var(--spacing) * 2); +} +} + .md\:pb-3 { + @media (width >= 768px) { + padding-bottom: calc(var(--spacing) * 3); +} +} + .md\:pl-2 { + @media (width >= 768px) { + padding-left: calc(var(--spacing) * 2); +} +} + .md\:pl-4 { + @media (width >= 768px) { + padding-left: calc(var(--spacing) * 4); +} +} + .md\:text-sm { + @media (width >= 768px) { + font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); +} +} + .md\:opacity-0 { + @media (width >= 768px) { + opacity: 0; +} +} + .md\:transition-opacity { + @media (width >= 768px) { + transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); +} +} + .md\:group-focus-within\:opacity-100 { + @media (width >= 768px) { + &:is(:where(.group):focus-within *) { opacity: 1; } +} +} + .md\:group-hover\:opacity-100 { + @media (width >= 768px) { + &:is(:where(.group):hover *) { + @media (hover: hover) { + opacity: 1; +} +} +} +} + .md\:peer-data-\[variant\=inset\]\:m-2 { + @media (width >= 768px) { + &:is(:where(.peer)[data-variant="inset"] ~ *) { margin: calc(var(--spacing) * 2); } +} +} + .md\:peer-data-\[variant\=inset\]\:ms-0 { + @media (width >= 768px) { + &:is(:where(.peer)[data-variant="inset"] ~ *) { margin-inline-start: calc(var(--spacing) * 0); } +} +} + .md\:peer-data-\[variant\=inset\]\:rounded-xl { + @media (width >= 768px) { + &:is(:where(.peer)[data-variant="inset"] ~ *) { border-radius: calc(var(--radius) + 4px); } +} +} + .md\:peer-data-\[variant\=inset\]\:shadow-sm { + @media (width >= 768px) { + &:is(:where(.peer)[data-variant="inset"] ~ *) { --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); } +} +} + .md\:peer-data-\[variant\=inset\]\:peer-data-\[state\=collapsed\]\:ms-2 { + @media (width >= 768px) { + &:is(:where(.peer)[data-variant="inset"] ~ *) { + &:is(:where(.peer)[data-state="collapsed"] ~ *) { margin-inline-start: calc(var(--spacing) * 2); } +} +} +} + .md\:after\:hidden { + @media (width >= 768px) { + &::after { content: var(--tw-content); display: none; } +} +} + .sm\:col-span-1 { + @media (width >= 40rem) { + grid-column: span 1 / span 1; +} +} + .sm\:ms-auto { + @media (width >= 40rem) { + margin-inline-start: auto; +} +} + .sm\:flex { + @media (width >= 40rem) { + display: flex; +} +} + .sm\:max-h-\[calc\(100\%-16px\)\] { + @media (width >= 40rem) { + max-height: calc(100% - 16px); +} +} + .sm\:min-h-\[min\(calc\(100\%-16px\)\,30rem\)\] { + @media (width >= 40rem) { + min-height: min(100% - 16px, 30rem); +} +} + .sm\:w-auto { + @media (width >= 40rem) { + width: auto; +} +} + .sm\:max-w-\[calc\(100\%-32px\)\] { + @media (width >= 40rem) { + max-width: calc(100% - 32px); +} +} + .sm\:max-w-lg { + @media (width >= 40rem) { + max-width: var(--container-lg); +} +} + .sm\:max-w-md { + @media (width >= 40rem) { + max-width: var(--container-md); +} +} + .sm\:max-w-sm { + @media (width >= 40rem) { + max-width: var(--container-sm); +} +} + .sm\:min-w-140 { + @media (width >= 40rem) { + min-width: calc(var(--spacing) * 140); +} +} + .sm\:min-w-\[min\(calc\(100\%-32px\)\,50rem\)\] { + @media (width >= 40rem) { + min-width: min(100% - 32px, 50rem); +} +} + .sm\:grid-cols-2 { + @media (width >= 40rem) { + grid-template-columns: repeat(2, minmax(0px, 1fr)); +} +} + .sm\:grid-cols-\[auto_1fr\] { + @media (width >= 40rem) { + grid-template-columns: auto 1fr; +} +} + .sm\:flex-row { + @media (width >= 40rem) { + flex-direction: row; +} +} + .sm\:flex-wrap { + @media (width >= 40rem) { + flex-wrap: wrap; +} +} + .sm\:items-center { + @media (width >= 40rem) { + align-items: center; +} +} + .sm\:justify-end { + @media (width >= 40rem) { + justify-content: flex-end; +} +} + .sm\:gap-2\.5 { + @media (width >= 40rem) { + gap: calc(var(--spacing) * 2.5); +} +} + .sm\:gap-4 { + @media (width >= 40rem) { + gap: calc(var(--spacing) * 4); +} +} + .sm\:rounded-lg { + @media (width >= 40rem) { + border-radius: var(--radius); +} +} + .sm\:p-4 { + @media (width >= 40rem) { + padding: calc(var(--spacing) * 4); +} +} + .sm\:px-4 { + @media (width >= 40rem) { + padding-inline: calc(var(--spacing) * 4); +} +} + .sm\:pt-0 { + @media (width >= 40rem) { + padding-top: calc(var(--spacing) * 0); +} +} + .sm\:text-start { + @media (width >= 40rem) { + text-align: start; +} +} + .sm\:text-base { + @media (width >= 40rem) { + font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); +} +} + .sm\:text-sm { + @media (width >= 40rem) { + font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); +} +} + .sm\:text-xl { + @media (width >= 40rem) { + font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); +} +} + .sm\:leading-normal { + @media (width >= 40rem) { + --tw-leading: var(--leading-normal); line-height: var(--leading-normal); +} +} + .data-\[vaul-drawer-direction\=left\]\:sm\:max-w-sm { + &[data-vaul-drawer-direction="left"] { + @media (width >= 40rem) { + max-width: var(--container-sm); +} +} +} + .data-\[vaul-drawer-direction\=right\]\:sm\:max-w-sm { + &[data-vaul-drawer-direction="right"] { + @media (width >= 40rem) { + max-width: var(--container-sm); +} +} +} + .lg\:grid-cols-2 { + @media (width >= 64rem) { + grid-template-columns: repeat(2, minmax(0px, 1fr)); +} +} + .lg\:grid-cols-3 { + @media (width >= 64rem) { + grid-template-columns: repeat(3, minmax(0px, 1fr)); +} +} + .max-xs\:hidden { + @media (400px >= width) { + display: none; +} +} + .max-sm\:min-h-full { + @media (639px >= width) { + min-height: 100%; +} +} + .max-md\:sticky { + @media (767px >= width) { + position: sticky; +} +} + .max-md\:mt-4 { + @media (767px >= width) { + margin-top: calc(var(--spacing) * 4); +} +} + .max-md\:mb-1 { + @media (767px >= width) { + margin-bottom: calc(var(--spacing) * 1); +} +} + .max-md\:hidden { + @media (767px >= width) { + display: none; +} +} + .max-md\:h-10 { + @media (767px >= width) { + height: calc(var(--spacing) * 10); +} +} + .max-md\:h-75 { + @media (767px >= width) { + height: calc(var(--spacing) * 75); +} +} + .max-md\:w-full { + @media (767px >= width) { + width: 100%; +} +} + .max-md\:grow { + @media (767px >= width) { + flex-grow: 1; +} +} + .max-md\:grow-3 { + @media (767px >= width) { + flex-grow: 3; +} +} + .max-md\:basis-0 { + @media (767px >= width) { + flex-basis: calc(var(--spacing) * 0); +} +} + .max-md\:p-2 { + @media (767px >= width) { + padding: calc(var(--spacing) * 2); +} +} + .max-md\:px-2 { + @media (767px >= width) { + padding-inline: calc(var(--spacing) * 2); +} +} + .max-md\:py-3 { + @media (767px >= width) { + padding-block: calc(var(--spacing) * 3); +} +} + .\@lg\/editor\:grid-cols-\[fit-content\(70px\)_1fr\] { + @container editor (width >= 32rem) { + grid-template-columns: fit-content(70px) 1fr; +} +} + .\@lg\/editor\:grid-cols-subgrid { + @container editor (width >= 32rem) { + grid-template-columns: subgrid; +} +} + .\@3xl\/editor\:col-span-1 { + @container editor (width >= 48rem) { + grid-column: span 1 / span 1; +} +} + .\@3xl\/editor\:col-start-2 { + @container editor (width >= 48rem) { + grid-column-start: 2; +} +} + .\@3xl\/editor\:col-end-4 { + @container editor (width >= 48rem) { + grid-column-end: 4; +} +} + .\@3xl\/editor\:grid-cols-\[180px_fit-content\(80px\)_1fr\] { + @container editor (width >= 48rem) { + grid-template-columns: 180px fit-content(80px) 1fr; +} +} + .dark\:scale-0 { + &:is(.dark *) { --tw-scale-x: 0%; --tw-scale-y: 0%; --tw-scale-z: 0%; scale: var(--tw-scale-x) var(--tw-scale-y); } +} + .dark\:scale-100 { + &:is(.dark *) { --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); } +} + .dark\:-rotate-90 { + &:is(.dark *) { rotate: calc(-90deg); } +} + .dark\:rotate-0 { + &:is(.dark *) { rotate: 0deg; } +} + .dark\:bg-destructive\/60 { + &:is(.dark *) { + background-color: var(--destructive); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--destructive) 60%, transparent); +} +} +} + .dark\:bg-destructive\/70 { + &:is(.dark *) { + background-color: var(--destructive); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--destructive) 70%, transparent); +} +} +} + .dark\:bg-input\/30 { + &:is(.dark *) { + background-color: var(--input); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--input) 30%, transparent); +} +} +} + .dark\:bg-muted\/50 { + &:is(.dark *) { + background-color: var(--muted); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--muted) 50%, transparent); +} +} +} + .dark\:bg-neutral-50\/50 { + &:is(.dark *) { + background-color: color-mix(in srgb, oklch(0.985 0 0), transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-neutral-50) 50%, transparent); +} +} +} + .dark\:bg-transparent { + &:is(.dark *) { background-color: transparent; } +} + .dark\:text-amber-300 { + &:is(.dark *) { color: var(--color-amber-300); } +} + .dark\:text-blue-300 { + &:is(.dark *) { color: var(--color-blue-300); } +} + .dark\:text-emerald-300 { + &:is(.dark *) { color: var(--color-emerald-300); } +} + .dark\:text-emerald-400 { + &:is(.dark *) { color: var(--color-emerald-400); } +} + .dark\:text-fuchsia-300 { + &:is(.dark *) { color: var(--color-fuchsia-300); } +} + .dark\:text-lime-300 { + &:is(.dark *) { color: var(--color-lime-300); } +} + .dark\:text-muted-foreground { + &:is(.dark *) { color: var(--muted-foreground); } +} + .dark\:text-neutral-50\/50 { + &:is(.dark *) { + color: color-mix(in srgb, oklch(0.985 0 0), transparent); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-neutral-50) 50%, transparent); +} +} +} + .dark\:text-rose-400 { + &:is(.dark *) { color: var(--color-rose-400); } +} + .dark\:text-sky-400 { + &:is(.dark *) { color: var(--color-sky-400); } +} + .dark\:ring-ring\/20 { + &:is(.dark *) { + --tw-ring-color: var(--ring); + @supports (color: color-mix(in lab, red, red)) { + --tw-ring-color: color-mix(in oklab, var(--ring) 20%, transparent); +} +} +} + .dark\:outline-ring\/40 { + &:is(.dark *) { + outline-color: var(--ring); + @supports (color: color-mix(in lab, red, red)) { + outline-color: color-mix(in oklab, var(--ring) 40%, transparent); +} +} +} + .dark\:hover\:bg-accent\/50 { + &:is(.dark *) { + &:hover { + @media (hover: hover) { + background-color: var(--accent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--accent) 50%, transparent); +} +} +} +} +} + .dark\:hover\:bg-input\/50 { + &:is(.dark *) { + &:hover { + @media (hover: hover) { + background-color: var(--input); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--input) 50%, transparent); +} +} +} +} +} + .dark\:hover\:bg-primary\/25 { + &:is(.dark *) { + &:hover { + @media (hover: hover) { + background-color: var(--primary); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--primary) 25%, transparent); +} +} +} +} +} + .hover\:dark\:bg-muted { + &:hover { + @media (hover: hover) { + &:is(.dark *) { background-color: var(--muted); } +} +} +} + .dark\:focus-visible\:ring-destructive\/40 { + &:is(.dark *) { + &:focus-visible { + --tw-ring-color: var(--destructive); + @supports (color: color-mix(in lab, red, red)) { + --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent); +} +} +} +} + .dark\:disabled\:bg-transparent { + &:is(.dark *) { + &:disabled { background-color: transparent; } +} +} + .dark\:has-disabled\:bg-input\/80 { + &:is(.dark *) { + &:has(:disabled) { + background-color: var(--input); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--input) 80%, transparent); +} +} +} +} + .dark\:has-\[\.real-input\[aria-invalid\=true\]\]\:ring-destructive\/40 { + &:is(.dark *) { + &:has(:is(.real-input[aria-invalid="true"])) { + --tw-ring-color: var(--destructive); + @supports (color: color-mix(in lab, red, red)) { + --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent); +} +} +} +} + .dark\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/40 { + &:is(.dark *) { + &:has(:is([data-slot][aria-invalid="true"])) { + --tw-ring-color: var(--destructive); + @supports (color: color-mix(in lab, red, red)) { + --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent); +} +} +} +} + .dark\:aria-invalid\:ring-destructive\/40 { + &:is(.dark *) { + &[aria-invalid="true"] { + --tw-ring-color: var(--destructive); + @supports (color: color-mix(in lab, red, red)) { + --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent); +} +} +} +} + .aria-selected\:dark\:bg-primary\/25 { + &[aria-selected="true"] { + &:is(.dark *) { + background-color: var(--primary); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--primary) 25%, transparent); +} +} +} +} + .dark\:data-\[state\=active\]\:border-input { + &:is(.dark *) { + &[data-state="active"] { border-color: var(--input); } +} +} + .dark\:data-\[state\=active\]\:bg-input\/30 { + &:is(.dark *) { + &[data-state="active"] { + background-color: var(--input); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--input) 30%, transparent); +} +} +} +} + .dark\:data-\[state\=active\]\:text-foreground { + &:is(.dark *) { + &[data-state="active"] { color: var(--foreground); } +} +} + .dark\:data-\[state\=checked\]\:bg-primary { + &:is(.dark *) { + &[data-state="checked"] { background-color: var(--primary); } +} +} + .dark\:data-\[state\=checked\]\:bg-primary-foreground { + &:is(.dark *) { + &[data-state="checked"] { background-color: var(--primary-foreground); } +} +} + .dark\:data-\[state\=unchecked\]\:bg-foreground { + &:is(.dark *) { + &[data-state="unchecked"] { background-color: var(--foreground); } +} +} + .dark\:data-\[state\=unchecked\]\:bg-input\/80 { + &:is(.dark *) { + &[data-state="unchecked"] { + background-color: var(--input); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--input) 80%, transparent); +} +} +} +} + .dark\:data-\[variant\=destructive\]\:data-highlighted\:bg-destructive\/20 { + &:is(.dark *) { + &[data-variant="destructive"] { + &[data-highlighted] { + background-color: var(--destructive); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--destructive) 20%, transparent); +} +} +} +} +} + .paratext\:hidden { + &:is([data-paratext="true"] *) { display: none; } +} + .paratext\:opacity-100\! { + &:is([data-paratext="true"] *) { opacity: 1 !important; } +} + .data-disabled\:pointer-events-none { + &:where([data-disabled="true"]), &:where([data-disabled]:not([data-disabled="false"])) { pointer-events: none; } +} + .data-disabled\:opacity-50 { + &:where([data-disabled="true"]), &:where([data-disabled]:not([data-disabled="false"])) { opacity: 0.5; } +} + .\[\&_\[class\*\=\"i-mdi-\"\]\]\:pointer-events-none { + & [class*="i-mdi-"] { pointer-events: none; } +} + .\[\&_\[class\*\=\"i-mdi-\"\]\:not\(\[class\*\=\"size-\"\]\)\]\:size-4 { + & [class*="i-mdi-"]:not([class*="size-"]) { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } +} + .\[\&_\[class\*\=\'i-mdi-\'\]\]\:pointer-events-none { + & [class*="i-mdi-"] { pointer-events: none; } +} + .\[\&_\[class\*\=\'i-mdi-\'\]\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 { + & [class*="i-mdi-"]:not([class*="size-"]) { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } +} + .\[\&_\[data-command-group\]\:not\(\[hidden\]\)_\~\[data-command-group\]\]\:pt-0 { + & [data-command-group]:not([hidden]) ~ [data-command-group] { padding-top: calc(var(--spacing) * 0); } +} + .\[\&_\[data-command-input-wrapper\]_\[class\*\=\'i-mdi-\'\]\]\:h-5 { + & [data-command-input-wrapper] [class*="i-mdi-"] { height: calc(var(--spacing) * 5); } +} + .\[\&_\[data-command-input-wrapper\]_\[class\*\=\'i-mdi-\'\]\]\:w-5 { + & [data-command-input-wrapper] [class*="i-mdi-"] { width: calc(var(--spacing) * 5); } +} + .\[\&_\[data-command-item\]_\[class\*\=\'i-mdi-\'\]\]\:h-5 { + & [data-command-item] [class*="i-mdi-"] { height: calc(var(--spacing) * 5); } +} + .\[\&_\[data-command-item\]_\[class\*\=\'i-mdi-\'\]\]\:w-5 { + & [data-command-item] [class*="i-mdi-"] { width: calc(var(--spacing) * 5); } +} + .\[\&_p\]\:leading-relaxed { + & p { --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); } +} + .\[\&_strong\]\:font-semibold { + & strong { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } +} + .\[\&_svg\]\:pointer-events-none { + & svg { pointer-events: none; } +} + .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 { + & svg:not([class*="size-"]) { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } +} + .group-\[\.toast\[data-type\=\"error\"\]\]\:\[\&\.copied\]\:i-mdi-check { + &:is(:where(.group):is(.toast[data-type="error"]) *) { + &.copied { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59z'/%3E%3C/svg%3E"); } +} +} + .\[\.border-b\]\:pb-2 { + &:is(.border-b) { padding-bottom: calc(var(--spacing) * 2); } +} + .\[\.border-b\]\:pb-6 { + &:is(.border-b) { padding-bottom: calc(var(--spacing) * 6); } +} + .\[\.border-t\]\:pt-2 { + &:is(.border-t) { padding-top: calc(var(--spacing) * 2); } +} + .\[\.border-t\]\:pt-6 { + &:is(.border-t) { padding-top: calc(var(--spacing) * 6); } +} + .\*\:\[\[class\*\=\"i-mdi-\"\]\]\:size-3\.5 { + :is(& > *) { + &:is([class*="i-mdi-"]) { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); } +} +} + .\*\:\[\[class\*\=\'i-mdi-\'\]\]\:shrink-0 { + :is(& > *) { + &:is([class*="i-mdi-"]) { flex-shrink: 0; } +} +} + .\*\*\:\[\[class\*\=\'i-mdi-\'\]\]\:pointer-events-none { + :is(& *) { + &:is([class*="i-mdi-"]) { pointer-events: none; } +} +} + .data-\[variant\=destructive\]\:\*\:\[\[class\*\=\'i-mdi-\'\]\]\:text-destructive\! { + &[data-variant="destructive"] { + :is(& > *) { + &:is([class*="i-mdi-"]) { color: var(--destructive) !important; } +} +} +} + .\*\:\[span\]\:last\:flex { + :is(& > *) { + &:is(span) { + &:last-child { display: flex; } +} +} +} + .\*\:\[span\]\:last\:items-center { + :is(& > *) { + &:is(span) { + &:last-child { align-items: center; } +} +} +} + .\*\:\[span\]\:last\:gap-2 { + :is(& > *) { + &:is(span) { + &:last-child { gap: calc(var(--spacing) * 2); } +} +} +} + .disabled\:\[\&\:not\(\.loading\)\]\:opacity-50 { + &:disabled { + &:not(.loading) { opacity: 0.5; } +} +} + .aria-disabled\:\[\&\:not\(\.loading\)\]\:opacity-50 { + &[aria-disabled="true"] { + &:not(.loading) { opacity: 0.5; } +} +} + .\[\&\>\*\]\:focus-visible\:relative { + & > * { + &:focus-visible { position: relative; } +} +} + .\[\&\>\*\]\:focus-visible\:z-10 { + & > * { + &:focus-visible { z-index: 10; } +} +} + .\[\&\>\.icon-wrapper\]\:flex { + & > .icon-wrapper { display: flex; } +} + .\[\&\>\.icon-wrapper\]\:items-center { + & > .icon-wrapper { align-items: center; } +} + .\[\&\>\.icon-wrapper\]\:justify-center { + & > .icon-wrapper { justify-content: center; } +} + .\[\&\>\[class\*\=\"i-mdi-\"\]\]\:pointer-events-none { + & > [class*="i-mdi-"] { pointer-events: none; } +} + .\[\&\>\[class\*\=\"i-mdi-\"\]\]\:size-4 { + & > [class*="i-mdi-"] { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } +} + .\[\&\>\[class\*\=\"i-mdi-\"\]\]\:shrink-0 { + & > [class*="i-mdi-"] { flex-shrink: 0; } +} + .\[\&\>\[class\*\=\"i-mdi-\"\]\]\:translate-y-0\.5 { + & > [class*="i-mdi-"] { --tw-translate-y: calc(var(--spacing) * 0.5); translate: var(--tw-translate-x) var(--tw-translate-y); } +} + .\[\&\>\[class\*\=\"i-mdi-\"\]\]\:text-current { + & > [class*="i-mdi-"] { color: currentcolor; } +} + .\[\&\>\[class\*\=\"i-mdi-\"\]\]\:text-sidebar-accent-foreground { + & > [class*="i-mdi-"] { color: var(--sidebar-accent-foreground); } +} + .\[\&\>\[class\*\=\"i-mdi-\"\]\:not\(\[class\*\=\"size-\"\]\)\]\:size-3 { + & > [class*="i-mdi-"]:not([class*="size-"]) { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); } +} + .\[\&\>\[class\*\=\'i-mdi-\'\]\]\:shrink-0 { + & > [class*="i-mdi-"] { flex-shrink: 0; } +} + .\[\&\>\[class\*\=\'i-mdi-\'\]\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground { + & > [class*="i-mdi-"]:not([class*="text-"]) { color: var(--muted-foreground); } +} + .has-\[select\[aria-hidden\=true\]\:last-child\]\:\[\&\>\[data-slot\=select-trigger\]\:last-of-type\]\:rounded-r-lg { + &:has(:is(select[aria-hidden="true"]:last-child)) { + & > [data-slot="select-trigger"]:last-of-type { border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius); } +} +} + .\[\&\>\[data-slot\=select-trigger\]\:not\(\[class\*\=\'w-\'\]\)\]\:w-fit { + & > [data-slot="select-trigger"]:not([class*="w-"]) { width: fit-content; } +} + .\[\&\>\[data-slot\]\]\:rounded-r-none { + & > [data-slot] { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } +} + .\[\&\>\[data-slot\]\]\:rounded-b-none { + & > [data-slot] { border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } +} + .\[\&\>\[data-slot\]\:not\(\:has\(\~\[data-slot\]\)\)\]\:rounded-r-lg\! { + & > [data-slot]:not(:has(~ [data-slot])) { border-top-right-radius: var(--radius) !important; border-bottom-right-radius: var(--radius) !important; } +} + .\[\&\>\[data-slot\]\:not\(\:has\(\~\[data-slot\]\)\)\]\:rounded-b-lg\! { + & > [data-slot]:not(:has(~ [data-slot])) { border-bottom-right-radius: var(--radius) !important; border-bottom-left-radius: var(--radius) !important; } +} + .\[\&\>\[data-slot\]\~\[data-slot\]\]\:rounded-t-none { + & > [data-slot] ~ [data-slot] { border-top-left-radius: 0px; border-top-right-radius: 0px; } +} + .\[\&\>\[data-slot\]\~\[data-slot\]\]\:rounded-l-none { + & > [data-slot] ~ [data-slot] { border-top-left-radius: 0px; border-bottom-left-radius: 0px; } +} + .\[\&\>\[data-slot\]\~\[data-slot\]\]\:border-t-0 { + & > [data-slot] ~ [data-slot] { border-top-style: var(--tw-border-style); border-top-width: 0px; } +} + .\[\&\>\[data-slot\]\~\[data-slot\]\]\:border-l-0 { + & > [data-slot] ~ [data-slot] { border-left-style: var(--tw-border-style); border-left-width: 0px; } +} + .\[\&\>button\]\:hidden { + & > button { display: none; } +} + .\[\&\>input\]\:flex-1 { + & > input { flex: 1 1 0%; } +} + .has-\[\>\[data-align\=block-end\]\]\:\[\&\>input\]\:pt-3 { + &:has(> [data-align="block-end"]) { + & > input { padding-top: calc(var(--spacing) * 3); } +} +} + .has-\[\>\[data-align\=block-start\]\]\:\[\&\>input\]\:pb-3 { + &:has(> [data-align="block-start"]) { + & > input { padding-bottom: calc(var(--spacing) * 3); } +} +} + .has-\[\>\[data-align\=inline-end\]\]\:\[\&\>input\]\:pr-1\.5 { + &:has(> [data-align="inline-end"]) { + & > input { padding-right: calc(var(--spacing) * 1.5); } +} +} + .has-\[\>\[data-align\=inline-start\]\]\:\[\&\>input\]\:pl-1\.5 { + &:has(> [data-align="inline-start"]) { + & > input { padding-left: calc(var(--spacing) * 1.5); } +} +} + .\[\&\>kbd\]\:rounded-\[calc\(var\(--radius\)-5px\)\] { + & > kbd { border-radius: calc(var(--radius) - 5px); } +} + .\[\&\>span\:last-child\]\:truncate { + & > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +} + .\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5 { + & > svg:not([class*="size-"]) { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); } +} + .\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 { + & > svg:not([class*="size-"]) { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } +} + .\[\&\[data-direction\=vertical\]\>div\]\:rotate-90 { + &[data-direction="vertical"] > div { rotate: 90deg; } +} + .\[\&\[data-state\=open\]\>\.i-mdi-chevron-down\]\:rotate-180 { + &[data-state="open"] > .i-mdi-chevron-down { rotate: 180deg; } +} + .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-inset-e-2 { + [data-side="left"][data-collapsible="offcanvas"] & { inset-inline-end: calc(var(--spacing) * -2); } +} + .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize { + [data-side="left"][data-state="collapsed"] & { cursor: e-resize; } +} + .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-inset-s-2 { + [data-side="right"][data-collapsible="offcanvas"] & { inset-inline-start: calc(var(--spacing) * -2); } +} + .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize { + [data-side="right"][data-state="collapsed"] & { cursor: w-resize; } +} + .\[a\&\]\:hover\:bg-accent { + a& { + &:hover { + @media (hover: hover) { + background-color: var(--accent); +} +} +} +} + .\[a\&\]\:hover\:bg-destructive\/90 { + a& { + &:hover { + @media (hover: hover) { + background-color: var(--destructive); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--destructive) 90%, transparent); +} +} +} +} +} + .\[a\&\]\:hover\:bg-primary\/90 { + a& { + &:hover { + @media (hover: hover) { + background-color: var(--primary); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--primary) 90%, transparent); +} +} +} +} +} + .\[a\&\]\:hover\:bg-secondary\/90 { + a& { + &:hover { + @media (hover: hover) { + background-color: var(--secondary); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--secondary) 90%, transparent); +} +} +} +} +} + .\[a\&\]\:hover\:text-accent-foreground { + a& { + &:hover { + @media (hover: hover) { + color: var(--accent-foreground); +} +} +} +} +} +@property --tw-animation-delay { syntax: "*"; inherits: false; initial-value: 0s; } +@property --tw-animation-direction { syntax: "*"; inherits: false; initial-value: normal; } +@property --tw-animation-duration { syntax: "*"; inherits: false; } +@property --tw-animation-fill-mode { syntax: "*"; inherits: false; initial-value: none; } +@property --tw-animation-iteration-count { syntax: "*"; inherits: false; initial-value: 1; } +@property --tw-enter-blur { syntax: "*"; inherits: false; initial-value: 0; } +@property --tw-enter-opacity { syntax: "*"; inherits: false; initial-value: 1; } +@property --tw-enter-rotate { syntax: "*"; inherits: false; initial-value: 0; } +@property --tw-enter-scale { syntax: "*"; inherits: false; initial-value: 1; } +@property --tw-enter-translate-x { syntax: "*"; inherits: false; initial-value: 0; } +@property --tw-enter-translate-y { syntax: "*"; inherits: false; initial-value: 0; } +@property --tw-exit-blur { syntax: "*"; inherits: false; initial-value: 0; } +@property --tw-exit-opacity { syntax: "*"; inherits: false; initial-value: 1; } +@property --tw-exit-rotate { syntax: "*"; inherits: false; initial-value: 0; } +@property --tw-exit-scale { syntax: "*"; inherits: false; initial-value: 1; } +@property --tw-exit-translate-x { syntax: "*"; inherits: false; initial-value: 0; } +@property --tw-exit-translate-y { syntax: "*"; inherits: false; initial-value: 0; } +:root, .light { --radius: 0.65rem; --background: oklch(1 0 0); --foreground: oklch(0.141 0.005 285.823); --card: oklch(1 0 0); --card-foreground: oklch(0.141 0.005 285.823); --popover: oklch(1 0 0); --popover-foreground: oklch(0.141 0.005 285.823); --primary: oklch(0.52 0.214 259.815); --primary-foreground: oklch(0.97 0.014 254.604); --secondary: oklch(0.967 0.001 286.375); --secondary-foreground: oklch(0.21 0.006 285.885); --muted: oklch(0.967 0.001 286.375); --muted-foreground: oklch(0.552 0.016 285.938); --accent: oklch(0.967 0.001 286.375); --accent-foreground: oklch(0.21 0.006 285.885); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.92 0.004 286.32); --input: oklch(0.92 0.004 286.32); --ring: oklch(0.52 0.214 259.815); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.141 0.005 285.823); --sidebar-primary: oklch(0.52 0.214 259.815); --sidebar-primary-foreground: oklch(0.97 0.014 254.604); --sidebar-accent: oklch(0.967 0.001 286.375); --sidebar-accent-foreground: oklch(0.21 0.006 285.885); --sidebar-border: oklch(0.92 0.004 286.32); --sidebar-ring: oklch(0.52 0.214 259.815); } +.dark { --background: oklch(0.141 0.005 285.823); --foreground: oklch(0.985 0 0); --card: oklch(0.21 0.006 285.885); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.21 0.006 285.885); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.546 0.245 262.881); --primary-foreground: var(--color-blue-50); --secondary: oklch(0.274 0.006 286.033); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.274 0.006 286.033); --muted-foreground: oklch(0.705 0.015 286.067); --accent: oklch(0.274 0.006 286.033); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: oklch(0.2 0.03 25); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.488 0.243 264.376); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.21 0.006 285.885); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.546 0.245 262.881); --sidebar-primary-foreground: var(--color-blue-50); --sidebar-accent: oklch(0.274 0.006 286.033); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.488 0.243 264.376); } +[data-theme="green"] { + &:root, &.light { --radius: 0.65rem; --background: oklch(1 0 0); --foreground: oklch(0.141 0.005 285.823); --card: oklch(1 0 0); --card-foreground: oklch(0.141 0.005 285.823); --popover: oklch(1 0 0); --popover-foreground: oklch(0.141 0.005 285.823); --primary: oklch(0.64 0.22 149.579); --primary-foreground: oklch(0.982 0.018 155.826); --secondary: oklch(0.967 0.001 286.375); --secondary-foreground: oklch(0.21 0.006 285.885); --muted: oklch(0.967 0.001 286.375); --muted-foreground: oklch(0.552 0.016 285.938); --accent: oklch(0.967 0.001 286.375); --accent-foreground: oklch(0.21 0.006 285.885); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.92 0.004 286.32); --input: oklch(0.92 0.004 286.32); --ring: oklch(0.64 0.22 149.579); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.141 0.005 285.823); --sidebar-primary: oklch(0.64 0.22 149.579); --sidebar-primary-foreground: oklch(0.982 0.018 155.826); --sidebar-accent: oklch(0.967 0.001 286.375); --sidebar-accent-foreground: oklch(0.21 0.006 285.885); --sidebar-border: oklch(0.92 0.004 286.32); --sidebar-ring: oklch(0.64 0.22 149.579); } + &.dark { --background: oklch(0.141 0.005 285.823); --foreground: oklch(0.985 0 0); --card: oklch(0.21 0.006 285.885); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.21 0.006 285.885); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.54 0.22 155); --primary-foreground: oklch(0.982 0.018 155.826); --secondary: oklch(0.274 0.006 286.033); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.274 0.006 286.033); --muted-foreground: oklch(0.705 0.015 286.067); --accent: oklch(0.274 0.006 286.033); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: oklch(0.2 0.03 25); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.54 0.22 155); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.21 0.006 285.885); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.54 0.22 155); --sidebar-primary-foreground: oklch(0.982 0.018 155.826); --sidebar-accent: oklch(0.274 0.006 286.033); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.54 0.22 155); } +} +[data-theme="rose"] { + &:root, &.light { --radius: 0.65rem; --background: oklch(1 0 0); --foreground: oklch(0.141 0.005 285.823); --card: oklch(1 0 0); --card-foreground: oklch(0.141 0.005 285.823); --popover: oklch(1 0 0); --popover-foreground: oklch(0.141 0.005 285.823); --primary: oklch(0.54 0.246 16.439); --primary-foreground: oklch(0.969 0.015 12.422); --secondary: oklch(0.967 0.001 286.375); --secondary-foreground: oklch(0.21 0.006 285.885); --muted: oklch(0.967 0.001 286.375); --muted-foreground: oklch(0.552 0.016 285.938); --accent: oklch(0.967 0.001 286.375); --accent-foreground: oklch(0.21 0.006 285.885); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.92 0.004 286.32); --input: oklch(0.92 0.004 286.32); --ring: oklch(0.54 0.246 16.439); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.141 0.005 285.823); --sidebar-primary: oklch(0.54 0.246 16.439); --sidebar-primary-foreground: oklch(0.969 0.015 12.422); --sidebar-accent: oklch(0.967 0.001 286.375); --sidebar-accent-foreground: oklch(0.21 0.006 285.885); --sidebar-border: oklch(0.92 0.004 286.32); --sidebar-ring: oklch(0.54 0.246 16.439); } + &.dark { --background: oklch(0.141 0.005 285.823); --foreground: oklch(0.985 0 0); --card: oklch(0.21 0.006 285.885); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.21 0.006 285.885); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.54 0.246 16.439); --primary-foreground: oklch(0.969 0.015 12.422); --secondary: oklch(0.274 0.006 286.033); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.274 0.006 286.033); --muted-foreground: oklch(0.705 0.015 286.067); --accent: oklch(0.274 0.006 286.033); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: oklch(0.2 0.03 25); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.54 0.246 16.439); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.21 0.006 285.885); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.54 0.246 16.439); --sidebar-primary-foreground: oklch(0.969 0.015 12.422); --sidebar-accent: oklch(0.274 0.006 286.033); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.54 0.246 16.439); } +} +[data-theme="orange"] { + &:root, &.light { --radius: 0.65rem; --background: oklch(1 0 0); --foreground: oklch(0.141 0.005 285.823); --card: oklch(1 0 0); --card-foreground: oklch(0.141 0.005 285.823); --popover: oklch(1 0 0); --popover-foreground: oklch(0.141 0.005 285.823); --primary: oklch(0.646 0.222 47.604); --primary-foreground: oklch(0.98 0.016 73.684); --secondary: oklch(0.967 0.001 286.375); --secondary-foreground: oklch(0.21 0.006 285.885); --muted: oklch(0.967 0.001 286.375); --muted-foreground: oklch(0.552 0.016 285.938); --accent: oklch(0.967 0.001 286.375); --accent-foreground: oklch(0.21 0.006 285.885); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.92 0.004 286.32); --input: oklch(0.92 0.004 286.32); --ring: oklch(0.646 0.222 47.604); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.141 0.005 285.823); --sidebar-primary: oklch(0.646 0.222 47.604); --sidebar-primary-foreground: oklch(0.98 0.016 73.684); --sidebar-accent: oklch(0.967 0.001 286.375); --sidebar-accent-foreground: oklch(0.21 0.006 285.885); --sidebar-border: oklch(0.92 0.004 286.32); --sidebar-ring: oklch(0.646 0.222 47.604); } + &.dark { --background: oklch(0.141 0.005 285.823); --foreground: oklch(0.985 0 0); --card: oklch(0.21 0.006 285.885); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.21 0.006 285.885); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.646 0.222 41.116); --primary-foreground: oklch(0.98 0.016 73.684); --secondary: oklch(0.274 0.006 286.033); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.274 0.006 286.033); --muted-foreground: oklch(0.705 0.015 286.067); --accent: oklch(0.274 0.006 286.033); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: oklch(0.2 0.03 25); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.646 0.222 41.116); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.21 0.006 285.885); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.646 0.222 41.116); --sidebar-primary-foreground: oklch(0.98 0.016 73.684); --sidebar-accent: oklch(0.274 0.006 286.033); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.646 0.222 41.116); } +} +[data-theme="violet"] { + &:root, &.light { --radius: 0.65rem; --background: oklch(1 0 0); --foreground: oklch(0.141 0.005 285.823); --card: oklch(1 0 0); --card-foreground: oklch(0.141 0.005 285.823); --popover: oklch(1 0 0); --popover-foreground: oklch(0.141 0.005 285.823); --primary: oklch(0.52 0.25 292.717); --primary-foreground: oklch(0.969 0.016 293.756); --secondary: oklch(0.967 0.001 286.375); --secondary-foreground: oklch(0.21 0.006 285.885); --muted: oklch(0.967 0.001 286.375); --muted-foreground: oklch(0.552 0.016 285.938); --accent: oklch(0.967 0.001 286.375); --accent-foreground: oklch(0.21 0.006 285.885); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.92 0.004 286.32); --input: oklch(0.92 0.004 286.32); --ring: oklch(0.52 0.25 292.717); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.141 0.005 285.823); --sidebar-primary: oklch(0.52 0.25 292.717); --sidebar-primary-foreground: oklch(0.969 0.016 293.756); --sidebar-accent: oklch(0.967 0.001 286.375); --sidebar-accent-foreground: oklch(0.21 0.006 285.885); --sidebar-border: oklch(0.92 0.004 286.32); --sidebar-ring: oklch(0.52 0.25 292.717); } + &.dark { --background: oklch(0.141 0.005 285.823); --foreground: oklch(0.985 0 0); --card: oklch(0.21 0.006 285.885); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.21 0.006 285.885); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.52 0.281 293.009); --primary-foreground: oklch(0.969 0.016 293.756); --secondary: oklch(0.274 0.006 286.033); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.274 0.006 286.033); --muted-foreground: oklch(0.705 0.015 286.067); --accent: oklch(0.274 0.006 286.033); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: oklch(0.2 0.03 25); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.52 0.281 293.009); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.21 0.006 285.885); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.52 0.281 293.009); --sidebar-primary-foreground: oklch(0.969 0.016 293.756); --sidebar-accent: oklch(0.274 0.006 286.033); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.52 0.281 293.009); } +} +[data-theme="stone"] { + &:root, &.light { --radius: 0.625rem; --background: oklch(1 0 0); --foreground: oklch(0.147 0.004 49.25); --card: oklch(1 0 0); --card-foreground: oklch(0.147 0.004 49.25); --popover: oklch(1 0 0); --popover-foreground: oklch(0.147 0.004 49.25); --primary: oklch(0.216 0.006 56.043); --primary-foreground: oklch(0.985 0.001 106.423); --secondary: oklch(0.97 0.001 106.424); --secondary-foreground: oklch(0.216 0.006 56.043); --muted: oklch(0.97 0.001 106.424); --muted-foreground: oklch(0.553 0.013 58.071); --accent: oklch(0.97 0.001 106.424); --accent-foreground: oklch(0.216 0.006 56.043); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.923 0.003 48.717); --input: oklch(0.923 0.003 48.717); --ring: oklch(0.709 0.01 56.259); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0.001 106.423); --sidebar-foreground: oklch(0.147 0.004 49.25); --sidebar-primary: oklch(0.216 0.006 56.043); --sidebar-primary-foreground: oklch(0.985 0.001 106.423); --sidebar-accent: oklch(0.97 0.001 106.424); --sidebar-accent-foreground: oklch(0.216 0.006 56.043); --sidebar-border: oklch(0.923 0.003 48.717); --sidebar-ring: oklch(0.709 0.01 56.259); } + &.dark { --background: oklch(0.147 0.004 49.25); --foreground: oklch(0.985 0.001 106.423); --card: oklch(0.216 0.006 56.043); --card-foreground: oklch(0.985 0.001 106.423); --popover: oklch(0.216 0.006 56.043); --popover-foreground: oklch(0.985 0.001 106.423); --primary: oklch(0.96 0.003 48.717); --primary-foreground: oklch(0.216 0.006 56.043); --secondary: oklch(0.268 0.007 34.298); --secondary-foreground: oklch(0.985 0.001 106.423); --muted: oklch(0.268 0.007 34.298); --muted-foreground: oklch(0.709 0.01 56.259); --accent: oklch(0.268 0.007 34.298); --accent-foreground: oklch(0.985 0.001 106.423); --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: oklch(0.2 0.03 25); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.96 0.003 48.717); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.216 0.006 56.043); --sidebar-foreground: oklch(0.985 0.001 106.423); --sidebar-primary: oklch(0.96 0.003 48.717); --sidebar-primary-foreground: oklch(0.985 0.001 106.423); --sidebar-accent: oklch(0.268 0.007 34.298); --sidebar-accent-foreground: oklch(0.985 0.001 106.423); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.96 0.003 48.717); } +} +@keyframes shimmer { + 0% { background-position: 100% 0px; } + 100% { background-position: -100% 0px; } +} +:host { flex-grow: 1; } +:host, :root, html, body, .app, .project-view { display: block; min-height: 100%; scroll-behavior: smooth; interpolate-size: allow-keywords; background-color: var(--background); color: var(--foreground); } +@layer base { + * { + border-color: var(--border); outline-color: var(--ring); + @supports (color: color-mix(in lab, red, red)) { + outline-color: color-mix(in oklab, var(--ring) 50%, transparent); +} + &:focus-visible { --tw-outline-style: solid; outline-style: solid; } +} + .app { background-color: var(--background); color: var(--foreground); } + button:not(:disabled), [role="button"]:not(:disabled) { cursor: pointer; } + .loading-text { + pointer-events: none; animation: 2s linear 0s infinite normal none running shimmer; background-image: linear-gradient(90deg, oklch(from var(--muted-foreground) l c h / 0.2) 20%, oklch(from var(--foreground) l c h / 0.3) 50%, oklch(from var(--muted-foreground) l c h / 0.2) 65%); background-size: 200% 100%; background-repeat: repeat; border-radius: calc(var(--radius) - 2px); user-select: none; color: transparent; + & * { opacity: 0; } +} +} +.font-inter { font-family: Inter, sans-serif; } +[id^="entry"] { scroll-margin-top: 1rem; } +[id^="entry"], [id^="sense"], .editor-sub-grid:has(> [id^="sense"]) { scroll-margin-bottom: 4rem; } +[id^="example"], .editor-sub-grid:has(> [id^="example"]) { scroll-margin-top: 3.5rem; scroll-margin-bottom: 3.5rem; } +[data-vaul-drawer] [class*="overflow-auto"], [data-vaul-drawer] [class*="overflow-y-auto"], [data-vaul-drawer] [class*="overflow-x-auto"], [data-vaul-drawer] [class*="overflow-scroll"], [data-vaul-drawer] [class*="overflow-y-scroll"], [data-vaul-drawer] [class*="overflow-x-scroll"] { overscroll-behavior: contain; } +.x-ellipsis { max-width: 100%; overflow: hidden; text-overflow: ellipsis; line-height: 1.3em; } +@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; } +@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; } +@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; } +@property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; } +@property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; } +@property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; } +@property --tw-rotate-x { syntax: "*"; inherits: false; } +@property --tw-rotate-y { syntax: "*"; inherits: false; } +@property --tw-rotate-z { syntax: "*"; inherits: false; } +@property --tw-skew-x { syntax: "*"; inherits: false; } +@property --tw-skew-y { syntax: "*"; inherits: false; } +@property --tw-pan-x { syntax: "*"; inherits: false; } +@property --tw-pan-y { syntax: "*"; inherits: false; } +@property --tw-pinch-zoom { syntax: "*"; inherits: false; } +@property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } +@property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; } +@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } +@property --tw-leading { syntax: "*"; inherits: false; } +@property --tw-font-weight { syntax: "*"; inherits: false; } +@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-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } +@property --tw-shadow-color { syntax: "*"; inherits: false; } +@property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } +@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } +@property --tw-inset-shadow-color { syntax: "*"; inherits: false; } +@property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } +@property --tw-ring-color { syntax: "*"; inherits: false; } +@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } +@property --tw-inset-ring-color { syntax: "*"; inherits: false; } +@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } +@property --tw-ring-inset { syntax: "*"; inherits: false; } +@property --tw-ring-offset-width { syntax: ""; inherits: false; initial-value: 0px; } +@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } +@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } +@property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; } +@property --tw-blur { syntax: "*"; inherits: false; } +@property --tw-brightness { syntax: "*"; inherits: false; } +@property --tw-contrast { syntax: "*"; inherits: false; } +@property --tw-grayscale { syntax: "*"; inherits: false; } +@property --tw-hue-rotate { syntax: "*"; inherits: false; } +@property --tw-invert { syntax: "*"; inherits: false; } +@property --tw-opacity { syntax: "*"; inherits: false; } +@property --tw-saturate { syntax: "*"; inherits: false; } +@property --tw-sepia { syntax: "*"; inherits: false; } +@property --tw-drop-shadow { syntax: "*"; inherits: false; } +@property --tw-drop-shadow-color { syntax: "*"; inherits: false; } +@property --tw-drop-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } +@property --tw-drop-shadow-size { syntax: "*"; inherits: false; } +@property --tw-duration { syntax: "*"; inherits: false; } +@property --tw-ease { 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; } +@property --tw-content { syntax: "*"; inherits: false; initial-value: ""; } +@keyframes spin { + 100% { transform: rotate(360deg); } +} +@keyframes ping { + 75%, 100% { transform: scale(2); opacity: 0; } +} +@keyframes pulse { + 50% { opacity: 0.5; } +} +@keyframes enter { + 0% { opacity: var(--tw-enter-opacity,1); transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0)); filter: blur(var(--tw-enter-blur,0)); } +} +@keyframes exit { + 100% { opacity: var(--tw-exit-opacity,1); transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0)); filter: blur(var(--tw-exit-blur,0)); } +} +@keyframes accordion-down { + 0% { height: 0px; } + 100% { height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto))))); } +} +@keyframes accordion-up { + 0% { height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto))))); } + 100% { height: 0px; } +} +@keyframes collapsible-down { + 0% { height: 0px; } + 100% { height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto)))); } +} +@keyframes collapsible-up { + 0% { height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto)))); } + 100% { height: 0px; } +} +@layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scale-z: 1; --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-pan-x: initial; --tw-pan-y: initial; --tw-pinch-zoom: initial; --tw-space-y-reverse: 0; --tw-space-x-reverse: 0; --tw-border-style: solid; --tw-leading: initial; --tw-font-weight: initial; --tw-tracking: initial; --tw-ordinal: initial; --tw-slashed-zero: initial; --tw-numeric-figure: initial; --tw-numeric-spacing: initial; --tw-numeric-fraction: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-outline-style: solid; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; --tw-grayscale: initial; --tw-hue-rotate: initial; --tw-invert: initial; --tw-opacity: initial; --tw-saturate: initial; --tw-sepia: initial; --tw-drop-shadow: initial; --tw-drop-shadow-color: initial; --tw-drop-shadow-alpha: 100%; --tw-drop-shadow-size: initial; --tw-duration: initial; --tw-ease: initial; --tw-contain-size: initial; --tw-contain-layout: initial; --tw-contain-paint: initial; --tw-contain-style: initial; --tw-content: ""; --tw-animation-delay: 0s; --tw-animation-direction: normal; --tw-animation-duration: initial; --tw-animation-fill-mode: none; --tw-animation-iteration-count: 1; --tw-enter-blur: 0; --tw-enter-opacity: 1; --tw-enter-rotate: 0; --tw-enter-scale: 1; --tw-enter-translate-x: 0; --tw-enter-translate-y: 0; --tw-exit-blur: 0; --tw-exit-opacity: 1; --tw-exit-rotate: 0; --tw-exit-scale: 1; --tw-exit-translate-x: 0; --tw-exit-translate-y: 0; } +} +} \ No newline at end of file From 3758c7234a6b25097616e948a16fd06fdf82cc71 Mon Sep 17 00:00:00 2001 From: Kevin Hahn Date: Thu, 23 Jul 2026 14:38:57 +0700 Subject: [PATCH 05/22] Fix drawer handle visibility in mobile comments panel - Disable vaul's default handle (it was hidden under the absolute panel) - Render a custom handle div inside the panel instead --- .../src/lib/entry-editor/comments/CommentDialog.svelte | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/frontend/viewer/src/lib/entry-editor/comments/CommentDialog.svelte b/frontend/viewer/src/lib/entry-editor/comments/CommentDialog.svelte index 3bceaa147e..c80559d7eb 100644 --- a/frontend/viewer/src/lib/entry-editor/comments/CommentDialog.svelte +++ b/frontend/viewer/src/lib/entry-editor/comments/CommentDialog.svelte @@ -232,19 +232,22 @@ snapToSequentialPoint > {title}
-
+ +
{@render panel()}
From f0c8e727c729c9bdc88d89866f22df1f1c954e14 Mon Sep 17 00:00:00 2001 From: Kevin Hahn Date: Thu, 23 Jul 2026 14:40:55 +0700 Subject: [PATCH 06/22] Revert "Add FW Lite design system bundle for design agent sync" This reverts commit 3cd4cf927a98ca4c3f9902d7a3d3df4ff8cd03fc. --- frontend/viewer/.design-sync/NOTES.md | 26 - frontend/viewer/.design-sync/config.json | 9 - frontend/viewer/.design-sync/conventions.md | 74 - frontend/viewer/ds-bundle/README.md | 96 - .../actions/button/button.prompt.md | 7 - .../components/actions/button/index.html | 71 - .../data-display/badge/badge.prompt.md | 7 - .../components/data-display/badge/index.html | 49 - .../multi-writing-system-field/index.html | 95 - .../multi-writing-system-field.prompt.md | 9 - .../components/feedback/alert/alert.prompt.md | 7 - .../components/feedback/alert/index.html | 55 - .../components/forms/input/index.html | 47 - .../components/forms/input/input.prompt.md | 7 - .../components/forms/label/index.html | 43 - .../components/forms/label/label.prompt.md | 5 - .../components/forms/textarea/index.html | 39 - .../forms/textarea/textarea.prompt.md | 5 - .../foundations/colors/colors.prompt.md | 9 - .../components/foundations/colors/index.html | 166 - .../foundations/typography/index.html | 83 - .../typography/typography.prompt.md | 7 - .../layouts/app-shell/app-shell.prompt.md | 7 - .../components/layouts/app-shell/index.html | 94 - .../layouts/master-detail/index.html | 148 - .../master-detail/master-detail.prompt.md | 9 - .../components/surfaces/card/card.prompt.md | 5 - .../components/surfaces/card/index.html | 57 - frontend/viewer/ds-bundle/styles.css | 8 - .../viewer/ds-bundle/tokens/app-compiled.css | 3729 ----------------- 30 files changed, 4973 deletions(-) delete mode 100644 frontend/viewer/.design-sync/NOTES.md delete mode 100644 frontend/viewer/.design-sync/config.json delete mode 100644 frontend/viewer/.design-sync/conventions.md delete mode 100644 frontend/viewer/ds-bundle/README.md delete mode 100644 frontend/viewer/ds-bundle/components/actions/button/button.prompt.md delete mode 100644 frontend/viewer/ds-bundle/components/actions/button/index.html delete mode 100644 frontend/viewer/ds-bundle/components/data-display/badge/badge.prompt.md delete mode 100644 frontend/viewer/ds-bundle/components/data-display/badge/index.html delete mode 100644 frontend/viewer/ds-bundle/components/editor/multi-writing-system-field/index.html delete mode 100644 frontend/viewer/ds-bundle/components/editor/multi-writing-system-field/multi-writing-system-field.prompt.md delete mode 100644 frontend/viewer/ds-bundle/components/feedback/alert/alert.prompt.md delete mode 100644 frontend/viewer/ds-bundle/components/feedback/alert/index.html delete mode 100644 frontend/viewer/ds-bundle/components/forms/input/index.html delete mode 100644 frontend/viewer/ds-bundle/components/forms/input/input.prompt.md delete mode 100644 frontend/viewer/ds-bundle/components/forms/label/index.html delete mode 100644 frontend/viewer/ds-bundle/components/forms/label/label.prompt.md delete mode 100644 frontend/viewer/ds-bundle/components/forms/textarea/index.html delete mode 100644 frontend/viewer/ds-bundle/components/forms/textarea/textarea.prompt.md delete mode 100644 frontend/viewer/ds-bundle/components/foundations/colors/colors.prompt.md delete mode 100644 frontend/viewer/ds-bundle/components/foundations/colors/index.html delete mode 100644 frontend/viewer/ds-bundle/components/foundations/typography/index.html delete mode 100644 frontend/viewer/ds-bundle/components/foundations/typography/typography.prompt.md delete mode 100644 frontend/viewer/ds-bundle/components/layouts/app-shell/app-shell.prompt.md delete mode 100644 frontend/viewer/ds-bundle/components/layouts/app-shell/index.html delete mode 100644 frontend/viewer/ds-bundle/components/layouts/master-detail/index.html delete mode 100644 frontend/viewer/ds-bundle/components/layouts/master-detail/master-detail.prompt.md delete mode 100644 frontend/viewer/ds-bundle/components/surfaces/card/card.prompt.md delete mode 100644 frontend/viewer/ds-bundle/components/surfaces/card/index.html delete mode 100644 frontend/viewer/ds-bundle/styles.css delete mode 100644 frontend/viewer/ds-bundle/tokens/app-compiled.css diff --git a/frontend/viewer/.design-sync/NOTES.md b/frontend/viewer/.design-sync/NOTES.md deleted file mode 100644 index 8ef436a8d5..0000000000 --- a/frontend/viewer/.design-sync/NOTES.md +++ /dev/null @@ -1,26 +0,0 @@ -# design-sync notes (FW Lite viewer) - -## Why this is off-script - -The `/design-sync` converter targets **React** design systems: it esbuild-bundles the -repo's compiled `dist/` into `_ds_bundle.js` and ships `.jsx`/`.d.ts` so claude.ai/design's -design agent can instantiate the real components. FW Lite's viewer is **Svelte + Tailwind v4 -(ShadCN-Svelte)**, so there is no consumable React runtime bundle. This sync therefore ships a -**design-token + visual-reference** system produced by hand: - -- Real tokens/themes/fonts (all 6 themes × light/dark) reachable from `styles.css`'s `@import` closure. -- Hand-authored HTML preview cards (`@dsCard` first line) for the core primitives, styled with the - app's **real compiled Tailwind CSS** (captured from the running dev server / `vite build`), not a - reimplementation. -- A conventions header (`.design-sync/conventions.md`) teaching the shadcn class idiom so agent - output is on-brand. - -No `_ds_bundle.js`, no `_vendor/`, no `.d.ts` (those are React-runtime artifacts). No `_ds_sync.json` -anchor is written (the storybook/package hash recipes don't apply to a hand-authored Svelte layout); -each re-sync re-verifies, which is the honest/safe default here. - -## Source facts -- Tokens: `src/theme.css` (OKLCH). Themes: default(blue)/green/rose/orange/violet/stone via `[data-theme=...]`; light via `:root,.light`, dark via `.dark`. -- Fonts: Noto Sans (`--font-sans`), Inter (`.font-inter`); loaded via `vite-plugin-webfont-dl` (inlined into webfonts.css at build). -- Class idiom: Tailwind v4 utilities + shadcn semantic colors (`bg-primary`, `text-foreground`, `border-border`, `bg-muted`, ...); radius scale from `--radius`. -- Compiled CSS source: dev server on :5173 (vite) and :5137 (FwLiteWeb host). diff --git a/frontend/viewer/.design-sync/config.json b/frontend/viewer/.design-sync/config.json deleted file mode 100644 index c472138d0c..0000000000 --- a/frontend/viewer/.design-sync/config.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "projectId": "fe29a329-bafa-420f-bd5e-fe067206a031", - "projectName": "FW Lite", - "shape": "off-script-svelte", - "deliverable": "tokens+visual-reference", - "coverage": "core-primitives + layouts (app-shell, master-detail)", - "readmeHeader": ".design-sync/conventions.md", - "notes": "Svelte + Tailwind v4 (ShadCN-Svelte). Not React, so the standard converter (React _ds_bundle.js) does not apply. This sync ships a design-token + visual-reference system: real tokens/themes/fonts + hand-authored HTML preview cards using the app's real compiled Tailwind CSS. No runtime component bundle." -} diff --git a/frontend/viewer/.design-sync/conventions.md b/frontend/viewer/.design-sync/conventions.md deleted file mode 100644 index 89a942d8f5..0000000000 --- a/frontend/viewer/.design-sync/conventions.md +++ /dev/null @@ -1,74 +0,0 @@ -# FW Lite design system - -FW Lite is the **FieldWorks Lite dictionary editor** — a SvelteKit app styled with **Tailwind CSS v4** and **ShadCN-Svelte**. Its audience is linguists editing dictionary data, so the UI favors clarity, generous hit targets, and dense multi-language forms. - -> The real components are **Svelte**, but the entire look is expressed through **portable design tokens + Tailwind utility classes**. Reproduce FW Lite's appearance by using the exact token utilities below — never hardcode colors, and never invent arbitrary values that aren't in the stylesheet. - -## Theme setup (required) - -All color comes from CSS variables that live on a theme root. Every screen must: - -1. Put a theme class on a root wrapper: `.light` (default) or `.dark`. The app toggles `.dark` at runtime (`mode-watcher`). -2. Paint the root surface with `bg-background text-foreground`. -3. Optionally select one of six **accent themes** via `data-theme="green|rose|orange|violet|stone"` (default/blue = no attribute). **Every design must look correct in both light and dark.** - -```html -
…
-
…
-``` - -## Styling idiom — semantic Tailwind utilities - -Use the semantic color pairs, not raw palette colors: - -| Purpose | Utilities | -|---|---| -| Page / surface | `bg-background` · `text-foreground` | -| Card / panel | `bg-card` · `text-card-foreground` · `bg-popover` | -| Primary action | `bg-primary` · `text-primary-foreground` | -| Secondary | `bg-secondary` · `text-secondary-foreground` | -| Muted / hints | `bg-muted` · `text-muted-foreground` | -| Hover / subtle | `bg-accent` · `text-accent-foreground` | -| Danger | `bg-destructive` · `text-destructive-foreground` | -| Lines / fields | `border-border` · `border-input` · `ring-ring` | - -**Radius** (from `--radius`): `rounded-md` (controls/buttons/inputs), `rounded-xl` (cards), `rounded-full` (badges/avatars). -**Type**: `font-sans` = Noto Sans (default), `.font-inter` (alternate), `font-mono`; sizes `text-xs → text-2xl`; weights `font-medium | font-semibold`. -**Icons**: Material Design Icons via classes like `i-mdi-plus`, `i-mdi-check`, sized with `size-4`. - -## Component recipes (from the real components) - -- **Button**: `inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium h-10 px-4 py-2 shadow-xs transition-all` + a variant pair — `bg-primary text-primary-foreground hover:bg-primary/90` (default), `bg-secondary …`, `bg-destructive text-white`, `border border-input bg-background hover:bg-accent` (outline), `hover:bg-accent` (ghost), `text-primary hover:underline` (link). -- **Input**: `border-input bg-background h-10 w-full rounded-md border px-3 py-2 text-base md:text-sm shadow-xs focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:border-ring`. -- **Badge**: `inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium` + variant colors. -- **Card**: `bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm`; sections use `px-6`. -- **Multi-writing-system field** (FW Lite's signature): a field title above rows of `writing-system code label → input`. Dictionary/entry fields are almost always multi-writing-system — prefer this over a single input for any linguistic content. - -## Layout patterns - -Compose screens from FW Lite's real structure, not generic page templates: - -- **App shell** — a `bg-sidebar` sidebar (project switcher, primary `New Word` action, nav group with an active/badge state, footer utilities) beside a `bg-background` primary view. Active nav item = `bg-sidebar-accent text-sidebar-accent-foreground font-medium`. -- **Master-detail** — a fixed-width list pane (filter bar + entry rows: headword / muted gloss / part-of-speech badge; selected row `bg-accent`) beside a flexible detail pane, split by a resizable divider. Side-by-side ≥801px; single-pane with push navigation below. - -See the `Layouts` cards + their `prompt.md` for the responsive rules. - -## Where the truth lives - -- **Tokens + compiled utilities**: `styles.css` → `tokens/app-compiled.css` (the real compiled Tailwind output; all 6 themes × light/dark, the shadcn color layer, fonts, utilities). Read it before styling. -- **Per-component API + recipe**: each `components///.prompt.md`. - -## Example - -```html -
-
-
Lexeme form
-
- - -
- -
-
-``` diff --git a/frontend/viewer/ds-bundle/README.md b/frontend/viewer/ds-bundle/README.md deleted file mode 100644 index 0ea75bd9e2..0000000000 --- a/frontend/viewer/ds-bundle/README.md +++ /dev/null @@ -1,96 +0,0 @@ -# FW Lite design system - -FW Lite is the **FieldWorks Lite dictionary editor** — a SvelteKit app styled with **Tailwind CSS v4** and **ShadCN-Svelte**. Its audience is linguists editing dictionary data, so the UI favors clarity, generous hit targets, and dense multi-language forms. - -> The real components are **Svelte**, but the entire look is expressed through **portable design tokens + Tailwind utility classes**. Reproduce FW Lite's appearance by using the exact token utilities below — never hardcode colors, and never invent arbitrary values that aren't in the stylesheet. - -## Theme setup (required) - -All color comes from CSS variables that live on a theme root. Every screen must: - -1. Put a theme class on a root wrapper: `.light` (default) or `.dark`. The app toggles `.dark` at runtime (`mode-watcher`). -2. Paint the root surface with `bg-background text-foreground`. -3. Optionally select one of six **accent themes** via `data-theme="green|rose|orange|violet|stone"` (default/blue = no attribute). **Every design must look correct in both light and dark.** - -```html -
…
-
…
-``` - -## Styling idiom — semantic Tailwind utilities - -Use the semantic color pairs, not raw palette colors: - -| Purpose | Utilities | -|---|---| -| Page / surface | `bg-background` · `text-foreground` | -| Card / panel | `bg-card` · `text-card-foreground` · `bg-popover` | -| Primary action | `bg-primary` · `text-primary-foreground` | -| Secondary | `bg-secondary` · `text-secondary-foreground` | -| Muted / hints | `bg-muted` · `text-muted-foreground` | -| Hover / subtle | `bg-accent` · `text-accent-foreground` | -| Danger | `bg-destructive` · `text-destructive-foreground` | -| Lines / fields | `border-border` · `border-input` · `ring-ring` | - -**Radius** (from `--radius`): `rounded-md` (controls/buttons/inputs), `rounded-xl` (cards), `rounded-full` (badges/avatars). -**Type**: `font-sans` = Noto Sans (default), `.font-inter` (alternate), `font-mono`; sizes `text-xs → text-2xl`; weights `font-medium | font-semibold`. -**Icons**: Material Design Icons via classes like `i-mdi-plus`, `i-mdi-check`, sized with `size-4`. - -## Component recipes (from the real components) - -- **Button**: `inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium h-10 px-4 py-2 shadow-xs transition-all` + a variant pair — `bg-primary text-primary-foreground hover:bg-primary/90` (default), `bg-secondary …`, `bg-destructive text-white`, `border border-input bg-background hover:bg-accent` (outline), `hover:bg-accent` (ghost), `text-primary hover:underline` (link). -- **Input**: `border-input bg-background h-10 w-full rounded-md border px-3 py-2 text-base md:text-sm shadow-xs focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:border-ring`. -- **Badge**: `inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium` + variant colors. -- **Card**: `bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm`; sections use `px-6`. -- **Multi-writing-system field** (FW Lite's signature): a field title above rows of `writing-system code label → input`. Dictionary/entry fields are almost always multi-writing-system — prefer this over a single input for any linguistic content. - -## Layout patterns - -Compose screens from FW Lite's real structure, not generic page templates: - -- **App shell** — a `bg-sidebar` sidebar (project switcher, primary `New Word` action, nav group with an active/badge state, footer utilities) beside a `bg-background` primary view. Active nav item = `bg-sidebar-accent text-sidebar-accent-foreground font-medium`. -- **Master-detail** — a fixed-width list pane (filter bar + entry rows: headword / muted gloss / part-of-speech badge; selected row `bg-accent`) beside a flexible detail pane, split by a resizable divider. Side-by-side ≥801px; single-pane with push navigation below. - -See the `Layouts` cards + their `prompt.md` for the responsive rules. - -## Where the truth lives - -- **Tokens + compiled utilities**: `styles.css` → `tokens/app-compiled.css` (the real compiled Tailwind output; all 6 themes × light/dark, the shadcn color layer, fonts, utilities). Read it before styling. -- **Per-component API + recipe**: each `components///.prompt.md`. - -## Example - -```html -
-
-
Lexeme form
-
- - -
- -
-
-``` - ---- - -## Contents - -**Foundations** — Colors (semantic tokens, 6 accent themes, light/dark), Typography (Noto Sans / Inter / mono). - -**Components** -- **Button** (Actions) — 6 variants · xs/sm/default/lg · icon · disabled -- **Badge** (Data Display) — default · secondary · destructive · outline -- **Multi-writing-system field** (Editor) — per-writing-system rows · FW Lite signature field -- **Alert** (Feedback) — default · destructive -- **Input** (Forms) — default · disabled · invalid -- **Label** (Forms) — form field label -- **Textarea** (Forms) — auto-growing multi-line field -- **Colors** (Foundations) — semantic tokens · light/dark · 6 accent themes -- **Typography** (Foundations) — Noto Sans · Inter · weights · scale -- **App shell** (Layouts) — sidebar + primary view -- **Master-detail** (Layouts) — entries list + entry editor · resizable -- **Card** (Surfaces) — header · content · footer - -_This is a **token + visual-reference** design system: the components are Svelte, so this bundle ships the real design tokens, the compiled Tailwind stylesheet, and hand-authored preview cards — not a runtime component bundle. Use the token utilities to reproduce the FW Lite look in any framework._ diff --git a/frontend/viewer/ds-bundle/components/actions/button/button.prompt.md b/frontend/viewer/ds-bundle/components/actions/button/button.prompt.md deleted file mode 100644 index 9ba00c4014..0000000000 --- a/frontend/viewer/ds-bundle/components/actions/button/button.prompt.md +++ /dev/null @@ -1,7 +0,0 @@ -# Button - -Primary action control. Svelte: `import { Button } from '$lib/components/ui/button';` - -**Props**: `variant` = `default | secondary | destructive | outline | ghost | link` · `size` = `xs | sm | default | lg | extended-fab | icon | icon-xs | icon-sm | icon-xl` · `loading` · `icon` (mdi class) · `href` (renders an anchor). - -**Class recipe** (for reproducing the look): base = `inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium h-10 px-4 py-2 shadow-xs transition-all`, then the variant color pair, e.g. default = `bg-primary text-primary-foreground hover:bg-primary/90`. diff --git a/frontend/viewer/ds-bundle/components/actions/button/index.html b/frontend/viewer/ds-bundle/components/actions/button/index.html deleted file mode 100644 index ec6ede2cd9..0000000000 --- a/frontend/viewer/ds-bundle/components/actions/button/index.html +++ /dev/null @@ -1,71 +0,0 @@ - - - - - - -FW Lite — Button - - - - -
-
-
Light
-
-

variants

- - - - - - -
-

sizes (default variant)

- - - - -
-

states

- - -
-
-
-
-
Dark
-
-

variants

- - - - - - -
-

sizes (default variant)

- - - - -
-

states

- - -
-
-
-
- - diff --git a/frontend/viewer/ds-bundle/components/data-display/badge/badge.prompt.md b/frontend/viewer/ds-bundle/components/data-display/badge/badge.prompt.md deleted file mode 100644 index 94f6e85af6..0000000000 --- a/frontend/viewer/ds-bundle/components/data-display/badge/badge.prompt.md +++ /dev/null @@ -1,7 +0,0 @@ -# Badge - -Compact status / category label. Svelte: `import { Badge } from '$lib/components/ui/badge';` - -**Props**: `variant` = `default | secondary | destructive | outline` · `href` (renders an anchor). - -**Class recipe**: `inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium` + variant colors (default = `bg-primary text-primary-foreground border-transparent`). diff --git a/frontend/viewer/ds-bundle/components/data-display/badge/index.html b/frontend/viewer/ds-bundle/components/data-display/badge/index.html deleted file mode 100644 index 0160387e68..0000000000 --- a/frontend/viewer/ds-bundle/components/data-display/badge/index.html +++ /dev/null @@ -1,49 +0,0 @@ - - - - - - -FW Lite — Badge - - - - -
-
-
Light
-
-

variants

-
- Default - Secondary - Destructive - Outline -
-
-
-
-
Dark
-
-

variants

-
- Default - Secondary - Destructive - Outline -
-
-
-
- - diff --git a/frontend/viewer/ds-bundle/components/editor/multi-writing-system-field/index.html b/frontend/viewer/ds-bundle/components/editor/multi-writing-system-field/index.html deleted file mode 100644 index a43892f190..0000000000 --- a/frontend/viewer/ds-bundle/components/editor/multi-writing-system-field/index.html +++ /dev/null @@ -1,95 +0,0 @@ - - - - - - -FW Lite — Multi-writing-system field - - - - -
-
-
Light
-
-
-
Lexeme form
-
-
- - -
-
- - -
-
- - -
-
-
-
-
Gloss
-
-
- - -
-
- - -
-
-
-
-
-
-
Dark
-
-
-
Lexeme form
-
-
- - -
-
- - -
-
- - -
-
-
-
-
Gloss
-
-
- - -
-
- - -
-
-
-
-
-
- - diff --git a/frontend/viewer/ds-bundle/components/editor/multi-writing-system-field/multi-writing-system-field.prompt.md b/frontend/viewer/ds-bundle/components/editor/multi-writing-system-field/multi-writing-system-field.prompt.md deleted file mode 100644 index 1ae6489f58..0000000000 --- a/frontend/viewer/ds-bundle/components/editor/multi-writing-system-field/multi-writing-system-field.prompt.md +++ /dev/null @@ -1,9 +0,0 @@ -# Multi-writing-system field - -FW Lite's signature editor control: one linguistic field (lexeme form, gloss, definition…) holds a value **per writing system**. Rendered as a stack of rows, each row = a writing-system code label + an input. Svelte: `import MultiWsInput from '$lib/components/field-editors/multi-ws-input.svelte';` (rich variant: `rich-multi-ws-input.svelte`). - -**Real markup** (from the live editor): a row is -`
`. -The writing-system code label uses the standard Label classes, muted; the input uses the default Input recipe. Multiple writing systems stack vertically under a bold field title. - -**When designing FW Lite screens**: dictionary/entry fields are almost always multi-writing-system — prefer this pattern over a single input for any linguistic content. diff --git a/frontend/viewer/ds-bundle/components/feedback/alert/alert.prompt.md b/frontend/viewer/ds-bundle/components/feedback/alert/alert.prompt.md deleted file mode 100644 index a5d5e9d6ca..0000000000 --- a/frontend/viewer/ds-bundle/components/feedback/alert/alert.prompt.md +++ /dev/null @@ -1,7 +0,0 @@ -# Alert - -Inline callout for status / errors. Svelte: `import * as Alert from '$lib/components/ui/alert';` - -**Props**: `variant` = `default | destructive`. - -**Class recipe**: `relative grid grid-cols-[0_1fr] items-start rounded-lg border px-4 py-3 text-sm`; default = `bg-card text-card-foreground`, destructive = `bg-destructive text-destructive-foreground`. An optional leading `i-mdi-*` icon shifts the grid to `[calc(var(--spacing)*4)_1fr]`. diff --git a/frontend/viewer/ds-bundle/components/feedback/alert/index.html b/frontend/viewer/ds-bundle/components/feedback/alert/index.html deleted file mode 100644 index 73da8097a0..0000000000 --- a/frontend/viewer/ds-bundle/components/feedback/alert/index.html +++ /dev/null @@ -1,55 +0,0 @@ - - - - - - -FW Lite — Alert - - - - -
-
-
Light
-
-
default
- -
destructive
- -
-
-
-
Dark
-
-
default
- -
destructive
- -
-
-
- - diff --git a/frontend/viewer/ds-bundle/components/forms/input/index.html b/frontend/viewer/ds-bundle/components/forms/input/index.html deleted file mode 100644 index a13976028d..0000000000 --- a/frontend/viewer/ds-bundle/components/forms/input/index.html +++ /dev/null @@ -1,47 +0,0 @@ - - - - - - -FW Lite — Input - - - - -
-
-
Light
-
-

default

-
-

disabled

-
-

invalid (aria-invalid)

-
-
-
-
-
Dark
-
-

default

-
-

disabled

-
-

invalid (aria-invalid)

-
-
-
-
- - diff --git a/frontend/viewer/ds-bundle/components/forms/input/input.prompt.md b/frontend/viewer/ds-bundle/components/forms/input/input.prompt.md deleted file mode 100644 index 1a92ac2e51..0000000000 --- a/frontend/viewer/ds-bundle/components/forms/input/input.prompt.md +++ /dev/null @@ -1,7 +0,0 @@ -# Input - -Single-line text field. Svelte: `import { Input } from '$lib/components/ui/input';` - -**Props**: `variant` = `default | file | ghost | shell` · standard input attributes · `bind:value`. - -**Class recipe**: `border-input bg-background flex h-10 w-full rounded-md border px-3 py-2 text-base shadow-xs md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]`. `ghost` = borderless transparent; `shell` = wrapper that owns focus styling for a nested `.real-input`. diff --git a/frontend/viewer/ds-bundle/components/forms/label/index.html b/frontend/viewer/ds-bundle/components/forms/label/index.html deleted file mode 100644 index 6f40c34e55..0000000000 --- a/frontend/viewer/ds-bundle/components/forms/label/index.html +++ /dev/null @@ -1,43 +0,0 @@ - - - - - - -FW Lite — Label - - - - -
-
-
Light
-
-
- - -
-
-
-
-
Dark
-
-
- - -
-
-
-
- - diff --git a/frontend/viewer/ds-bundle/components/forms/label/label.prompt.md b/frontend/viewer/ds-bundle/components/forms/label/label.prompt.md deleted file mode 100644 index 0c5ead5a99..0000000000 --- a/frontend/viewer/ds-bundle/components/forms/label/label.prompt.md +++ /dev/null @@ -1,5 +0,0 @@ -# Label - -Accessible label for a form control. Svelte: `import { Label } from '$lib/components/ui/label';` - -**Class recipe**: `flex items-center gap-2 text-sm leading-none font-medium select-none`. Pair with a control via `for` / `id`. diff --git a/frontend/viewer/ds-bundle/components/forms/textarea/index.html b/frontend/viewer/ds-bundle/components/forms/textarea/index.html deleted file mode 100644 index 5060f91d5b..0000000000 --- a/frontend/viewer/ds-bundle/components/forms/textarea/index.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - - - -FW Lite — Textarea - - - - -
-
-
Light
-
-

textarea (field-sizing: content)

- -
-
-
-
Dark
-
-

textarea (field-sizing: content)

- -
-
-
- - diff --git a/frontend/viewer/ds-bundle/components/forms/textarea/textarea.prompt.md b/frontend/viewer/ds-bundle/components/forms/textarea/textarea.prompt.md deleted file mode 100644 index ab57dd22d1..0000000000 --- a/frontend/viewer/ds-bundle/components/forms/textarea/textarea.prompt.md +++ /dev/null @@ -1,5 +0,0 @@ -# Textarea - -Multi-line text field; grows with content (`field-sizing-content`). Svelte: `import { Textarea } from '$lib/components/ui/textarea';` - -**Class recipe**: `border-input flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs md:text-sm focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:border-ring`. diff --git a/frontend/viewer/ds-bundle/components/foundations/colors/colors.prompt.md b/frontend/viewer/ds-bundle/components/foundations/colors/colors.prompt.md deleted file mode 100644 index e2b023e407..0000000000 --- a/frontend/viewer/ds-bundle/components/foundations/colors/colors.prompt.md +++ /dev/null @@ -1,9 +0,0 @@ -# Colors - -Semantic, theme-aware color tokens (ShadCN convention, OKLCH). Every color is a CSS variable resolved through Tailwind utilities — **never hardcode hex**. - -**Core pairs**: `background/foreground`, `card/card-foreground`, `popover/popover-foreground`, `primary/primary-foreground`, `secondary/secondary-foreground`, `muted/muted-foreground`, `accent/accent-foreground`, `destructive/destructive-foreground`, plus `border`, `input`, `ring`, and `sidebar*`. - -**Usage**: `bg-primary text-primary-foreground`, `text-muted-foreground`, `border-border`, `bg-card`. - -**Theming**: light is `:root`/`.light`, dark is `.dark`. Six accent themes are opt-in via `data-theme="green|rose|orange|violet|stone"` (default/blue = no attribute). All designs must work in both light and dark. diff --git a/frontend/viewer/ds-bundle/components/foundations/colors/index.html b/frontend/viewer/ds-bundle/components/foundations/colors/index.html deleted file mode 100644 index cf04cbe388..0000000000 --- a/frontend/viewer/ds-bundle/components/foundations/colors/index.html +++ /dev/null @@ -1,166 +0,0 @@ - - - - - - -FW Lite — Colors - - - - -
-
-
Light
-
-

semantic tokens

-
-
-
- --primary -
-
-
- --secondary -
-
-
- --muted -
-
-
- --accent -
-
-
- --card -
-
-
- --popover -
-
-
- --destructive -
-
-
- --background -
-
-
-

text tokens

-
- foreground - muted-foreground - primary - destructive -
-
-
-
-
-
Dark
-
-

semantic tokens

-
-
-
- --primary -
-
-
- --secondary -
-
-
- --muted -
-
-
- --accent -
-
-
- --card -
-
-
- --popover -
-
-
- --destructive -
-
-
- --background -
-
-
-

text tokens

-
- foreground - muted-foreground - primary - destructive -
-
-
-
-
-
Themes
-
-

accent themes (data-theme · primary color)

-
-
-
- Blue -
-
-
- Green -
-
-
- Rose -
-
-
- Orange -
-
-
- Violet -
-
-
- Stone -
-
-
-
-
- - diff --git a/frontend/viewer/ds-bundle/components/foundations/typography/index.html b/frontend/viewer/ds-bundle/components/foundations/typography/index.html deleted file mode 100644 index ad77b9f2c8..0000000000 --- a/frontend/viewer/ds-bundle/components/foundations/typography/index.html +++ /dev/null @@ -1,83 +0,0 @@ - - - - - - -FW Lite — Typography - - - - -
-
-
Light
-
-
-

Noto Sans — --font-sans (default UI font)

-
Aa Bb Cc — Lexeme
-
The quick brown fox — a domesticated canine.
-
Small / muted — writing-system code, hints.
-
Extra small — badges, captions.
-
-
-

weights

-
- Normal 400 - Medium 500 - Semibold 600 - Bold 700 -
-
-
-

Inter — .font-inter (alternate)

-
The quick brown fox jumps over the lazy dog.
-
-
-

Mono — --font-mono

-
entryId: f567e7f5-7ff2
-
-
-
-
-
Dark
-
-
-

Noto Sans — --font-sans (default UI font)

-
Aa Bb Cc — Lexeme
-
The quick brown fox — a domesticated canine.
-
Small / muted — writing-system code, hints.
-
Extra small — badges, captions.
-
-
-

weights

-
- Normal 400 - Medium 500 - Semibold 600 - Bold 700 -
-
-
-

Inter — .font-inter (alternate)

-
The quick brown fox jumps over the lazy dog.
-
-
-

Mono — --font-mono

-
entryId: f567e7f5-7ff2
-
-
-
-
- - diff --git a/frontend/viewer/ds-bundle/components/foundations/typography/typography.prompt.md b/frontend/viewer/ds-bundle/components/foundations/typography/typography.prompt.md deleted file mode 100644 index 16a5710488..0000000000 --- a/frontend/viewer/ds-bundle/components/foundations/typography/typography.prompt.md +++ /dev/null @@ -1,7 +0,0 @@ -# Typography - -**Fonts**: `--font-sans` = **Noto Sans** (default; broad script coverage for linguistic data), `--font-mono` = monospace, and **Inter** available via the `.font-inter` utility. - -**Scale** (Tailwind): `text-xs` (captions/badges), `text-sm` (secondary/muted), `text-base` (body/inputs), `text-lg`–`text-2xl` (headings). **Weights**: `font-normal | font-medium | font-semibold | font-bold`. - -Fonts are loaded via the Google Fonts `@import` at the top of the stylesheet (inlined at production build by `vite-plugin-webfont-dl`). diff --git a/frontend/viewer/ds-bundle/components/layouts/app-shell/app-shell.prompt.md b/frontend/viewer/ds-bundle/components/layouts/app-shell/app-shell.prompt.md deleted file mode 100644 index c448579d4b..0000000000 --- a/frontend/viewer/ds-bundle/components/layouts/app-shell/app-shell.prompt.md +++ /dev/null @@ -1,7 +0,0 @@ -# App shell - -The outer chrome every FW Lite screen lives in: a **sidebar** (project switcher, a primary `New Word` action, the Dictionary nav group with an active/badge state, and footer utilities like Synchronize/Settings) beside the **primary view**. - -**Structure**: `bg-sidebar text-sidebar-foreground` sidebar with `border-e border-sidebar-border`, ~190px wide; nav items = `flex w-full items-center gap-2 rounded-md p-2 text-sm`, hover `hover:bg-sidebar-accent hover:text-sidebar-accent-foreground`, **active** `bg-sidebar-accent text-sidebar-accent-foreground font-medium`. Main region = `bg-background flex flex-col`, fills remaining width. Built on the ShadCN **Sidebar** component (`$lib/components/ui/sidebar`). - -**Responsive**: on narrow screens (`sm-view`, ≤800px) the sidebar collapses to an off-canvas drawer toggled by a hamburger; the primary view takes the full width. diff --git a/frontend/viewer/ds-bundle/components/layouts/app-shell/index.html b/frontend/viewer/ds-bundle/components/layouts/app-shell/index.html deleted file mode 100644 index 72c684a95e..0000000000 --- a/frontend/viewer/ds-bundle/components/layouts/app-shell/index.html +++ /dev/null @@ -1,94 +0,0 @@ - - - - - - -FW Lite — App shell - - - - -
-
-
Light
-

sidebar navigation · primary view

-
- -
-
-
Browse
-
- - -
-
-
primary view — the master-detail workspace mounts here
-
-
-
-
-
Dark
-

sidebar navigation · primary view

-
- -
-
-
Browse
-
- - -
-
-
primary view — the master-detail workspace mounts here
-
-
-
-
- - diff --git a/frontend/viewer/ds-bundle/components/layouts/master-detail/index.html b/frontend/viewer/ds-bundle/components/layouts/master-detail/index.html deleted file mode 100644 index eb4fdfff7d..0000000000 --- a/frontend/viewer/ds-bundle/components/layouts/master-detail/index.html +++ /dev/null @@ -1,148 +0,0 @@ - - - - - - -FW Lite — Master-detail - - - - -
-
-
Light
-

list pane · resizable divider · detail pane

-
-
-
-
Filter 10 words
- -
-
- - - -
-
-
-
-
-
Apfel
- -
-
-
Word
-
- - -
-
-
-
Gloss
-
- - -
-
-
-
-
-
-
Dark
-

list pane · resizable divider · detail pane

-
-
-
-
Filter 10 words
- -
-
- - - -
-
-
-
-
-
Apfel
- -
-
-
Word
-
- - -
-
-
-
Gloss
-
- - -
-
-
-
-
-
- - diff --git a/frontend/viewer/ds-bundle/components/layouts/master-detail/master-detail.prompt.md b/frontend/viewer/ds-bundle/components/layouts/master-detail/master-detail.prompt.md deleted file mode 100644 index c94a498999..0000000000 --- a/frontend/viewer/ds-bundle/components/layouts/master-detail/master-detail.prompt.md +++ /dev/null @@ -1,9 +0,0 @@ -# Master-detail - -FW Lite's core workspace: a **list pane** (left) beside a **detail pane** (right), with a resizable divider (`paneforge`). Selecting an item in the list opens it in the detail pane. - -**List pane** (~300px, `@container/list`): a sticky filter/search bar (`border-b border-border`) over a scrolling list of entry rows. A row = `rounded-md p-3 hover:bg-accent` with `flex justify-between items-end` inside — headword (`font-semibold`), gloss (`text-sm text-muted-foreground`), and a part-of-speech `Badge`. The **selected** row uses `bg-accent text-accent-foreground`. - -**Detail pane** (flexes to fill): entry header + actions, then the multi-writing-system field editor. - -**Responsive**: side-by-side above `lg-view` (≥801px). Below it, only one pane shows at a time — the list, and tapping an entry pushes the detail over it (back-navigation returns to the list). diff --git a/frontend/viewer/ds-bundle/components/surfaces/card/card.prompt.md b/frontend/viewer/ds-bundle/components/surfaces/card/card.prompt.md deleted file mode 100644 index a3bd043974..0000000000 --- a/frontend/viewer/ds-bundle/components/surfaces/card/card.prompt.md +++ /dev/null @@ -1,5 +0,0 @@ -# Card - -Surface container grouping related content. Svelte: `import * as Card from '$lib/components/ui/card';` — `Card.Root / Header / Title / Description / Content / Footer`. - -**Class recipe**: root = `bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm`; header/content/footer use `px-6`; title = `leading-none font-semibold`; description = `text-muted-foreground text-sm`. diff --git a/frontend/viewer/ds-bundle/components/surfaces/card/index.html b/frontend/viewer/ds-bundle/components/surfaces/card/index.html deleted file mode 100644 index 2d7894947e..0000000000 --- a/frontend/viewer/ds-bundle/components/surfaces/card/index.html +++ /dev/null @@ -1,57 +0,0 @@ - - - - - - -FW Lite — Card - - - - -
-
-
Light
-
-
-
Entry synced
-
Changes were merged via CRDT.
-
-
- The lexeme form and its senses are now up to date across all connected devices. -
-
- - -
-
-
-
-
Dark
-
-
-
Entry synced
-
Changes were merged via CRDT.
-
-
- The lexeme form and its senses are now up to date across all connected devices. -
-
- - -
-
-
-
- - diff --git a/frontend/viewer/ds-bundle/styles.css b/frontend/viewer/ds-bundle/styles.css deleted file mode 100644 index 981a95be3c..0000000000 --- a/frontend/viewer/ds-bundle/styles.css +++ /dev/null @@ -1,8 +0,0 @@ -/* - * FW Lite — design system entry stylesheet. - * Rendered designs receive this file's transitive @import closure. - * app-compiled.css is the real compiled Tailwind v4 output captured from the - * running FwLite viewer: it carries every design token (6 themes x light/dark), - * the shadcn semantic color layer, the font @import, and the utility layer. - */ -@import "./tokens/app-compiled.css"; diff --git a/frontend/viewer/ds-bundle/tokens/app-compiled.css b/frontend/viewer/ds-bundle/tokens/app-compiled.css deleted file mode 100644 index 01ebe92fb6..0000000000 --- a/frontend/viewer/ds-bundle/tokens/app-compiled.css +++ /dev/null @@ -1,3729 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"); -@layer properties; -@layer theme, base, components, utilities; -@layer theme { - :root, :host { --color-red-500: oklch(63.7% 0.237 25.331); --color-red-600: oklch(57.7% 0.245 27.325); --color-orange-600: oklch(64.6% 0.222 41.116); --color-amber-300: oklch(87.9% 0.169 91.605); --color-amber-700: oklch(55.5% 0.163 48.998); --color-lime-300: oklch(89.7% 0.196 126.665); --color-lime-700: oklch(53.2% 0.157 131.589); --color-green-500: oklch(72.3% 0.219 149.579); --color-green-600: oklch(62.7% 0.194 149.214); --color-emerald-300: oklch(84.5% 0.143 164.978); --color-emerald-400: oklch(76.5% 0.177 163.223); --color-emerald-600: oklch(59.6% 0.145 163.225); --color-emerald-700: oklch(50.8% 0.118 165.612); --color-sky-400: oklch(74.6% 0.16 232.661); --color-sky-500: oklch(68.5% 0.169 237.323); --color-sky-600: oklch(58.8% 0.158 241.966); --color-blue-50: oklch(97% 0.014 254.604); --color-blue-300: oklch(80.9% 0.105 251.813); --color-blue-700: oklch(48.8% 0.243 264.376); --color-fuchsia-300: oklch(83.3% 0.145 321.434); --color-fuchsia-700: oklch(51.8% 0.253 323.949); --color-rose-400: oklch(71.2% 0.194 13.428); --color-rose-700: oklch(51.4% 0.222 16.935); --color-gray-200: oklch(92.8% 0.006 264.531); --color-neutral-50: oklch(98.5% 0 0); --color-neutral-500: oklch(55.6% 0 0); --color-black: #000; --color-white: #fff; --spacing: 0.25rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --text-xs: 0.75rem; --text-xs--line-height: calc(1 / 0.75); --text-sm: 0.875rem; --text-sm--line-height: calc(1.25 / 0.875); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-8xl: 6rem; --text-8xl--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-widest: 0.1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --radius-xs: 0.125rem; --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; --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: "Noto Sans", sans-serif; --default-mono-font-family: monospace; --color-border: var(--border); --color-popover-foreground: var(--popover-foreground); --color-popover: var(--popover); } -} -@layer base { - *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box; margin: 0px; padding: 0px; border: 0px solid; } - html, :host { line-height: 1.5; 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: 0px; color: inherit; border-top-width: 1px; } - abbr:where([title]) { text-decoration: underline dotted; } - h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } - a { color: 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: 0px; border-color: inherit; border-collapse: collapse; } - 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; letter-spacing: inherit; color: inherit; border-radius: 0px; 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(currentcolor, transparent); -} -} -} - textarea { resize: vertical; } - ::-webkit-search-decoration { 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: 0px; } - ::-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: 0px; } - ::-webkit-calendar-picker-indicator { line-height: 1; } - 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\/card-header { container: card-header / inline-size; } - .\@container\/editor { container: editor / inline-size; } - .\@container\/list { container: list / inline-size; } - .\@container { container-type: inline-size; } - .pointer-events-auto { pointer-events: auto; } - .pointer-events-none { pointer-events: none; } - .collapse { visibility: collapse; } - .invisible { visibility: hidden; } - .visible { visibility: visible; } - .sr-only { position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-width: 0px; } - .absolute { position: absolute; } - .fixed { position: fixed; } - .relative { position: relative; } - .static { position: static; } - .sticky { position: sticky; } - .inset-0 { inset: calc(var(--spacing) * 0); } - .inset-x-0 { inset-inline: calc(var(--spacing) * 0); } - .inset-y-0 { inset-block: calc(var(--spacing) * 0); } - .inset-s-0 { inset-inline-start: calc(var(--spacing) * 0); } - .inset-s-2 { inset-inline-start: calc(var(--spacing) * 2); } - .start { inset-inline-start: var(--spacing); } - .end { inset-inline-end: var(--spacing); } - .inset-e-0 { inset-inline-end: calc(var(--spacing) * 0); } - .inset-e-1 { inset-inline-end: calc(var(--spacing) * 1); } - .inset-e-2 { inset-inline-end: calc(var(--spacing) * 2); } - .inset-e-3 { inset-inline-end: calc(var(--spacing) * 3); } - .inset-e-4 { inset-inline-end: calc(var(--spacing) * 4); } - .-top-1 { top: calc(var(--spacing) * -1); } - .top-0 { top: calc(var(--spacing) * 0); } - .top-1 { top: calc(var(--spacing) * 1); } - .top-1\.5 { top: calc(var(--spacing) * 1.5); } - .top-1\/2 { top: calc(50%); } - .top-3 { top: calc(var(--spacing) * 3); } - .top-3\.5 { top: calc(var(--spacing) * 3.5); } - .top-4 { top: calc(var(--spacing) * 4); } - .top-\[50\%\] { top: 50%; } - .right-0 { right: calc(var(--spacing) * 0); } - .right-1 { right: calc(var(--spacing) * 1); } - .right-4 { right: calc(var(--spacing) * 4); } - .bottom-0 { bottom: calc(var(--spacing) * 0); } - .bottom-4 { bottom: calc(var(--spacing) * 4); } - .left-1\/2 { left: calc(50%); } - .left-\[50\%\] { left: 50%; } - .-z-10 { z-index: calc(-10); } - .z-0 { z-index: 0; } - .z-1 { z-index: 1; } - .z-10 { z-index: 10; } - .z-20 { z-index: 20; } - .z-48 { z-index: 48; } - .z-49 { z-index: 49; } - .z-50 { z-index: 50; } - .order-first { order: -9999; } - .order-last { order: 9999; } - .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-4 { grid-column: span 4 / span 4; } - .col-span-full { grid-column: 1 / -1; } - .col-start-2 { grid-column-start: 2; } - .row-span-2 { grid-row: span 2 / span 2; } - .row-start-1 { grid-row-start: 1; } - .row-start-2 { grid-row-start: 2; } - .float-right { float: right; } - .container { - width: 100%; - @media (width >= 400px) { - max-width: 400px; -} - @media (width >= 639px) { - max-width: 639px; -} - @media (width >= 767px) { - max-width: 767px; -} - @media (width >= 768px) { - max-width: 768px; -} - @media (width >= 800px) { - max-width: 800px; -} - @media (width >= 800px) { - max-width: 800px; -} - @media (width >= 801px) { - max-width: 801px; -} - @media (width >= 1279px) { - max-width: 1279px; -} - @media (width >= 1280px) { - max-width: 1280px; -} - @media (width >= 40rem) { - max-width: 40rem; -} - @media (width >= 64rem) { - max-width: 64rem; -} - @media (width >= 80rem) { - max-width: 80rem; -} - @media (width >= 96rem) { - max-width: 96rem; -} -} - .m-2 { margin: calc(var(--spacing) * 2); } - .m-3 { margin: calc(var(--spacing) * 3); } - .m-4 { margin: calc(var(--spacing) * 4); } - .m-auto { margin: auto; } - .-mx-1 { margin-inline: calc(var(--spacing) * -1); } - .mx-2 { margin-inline: calc(var(--spacing) * 2); } - .mx-3\.5 { margin-inline: calc(var(--spacing) * 3.5); } - .mx-4 { margin-inline: calc(var(--spacing) * 4); } - .mx-auto { margin-inline: auto; } - .-my-1 { margin-block: calc(var(--spacing) * -1); } - .my-0\! { margin-block: calc(var(--spacing) * 0) !important; } - .my-1 { margin-block: calc(var(--spacing) * 1); } - .my-2 { margin-block: calc(var(--spacing) * 2); } - .my-4 { margin-block: calc(var(--spacing) * 4); } - .my-6 { margin-block: calc(var(--spacing) * 6); } - .ms-2 { margin-inline-start: calc(var(--spacing) * 2); } - .ms-auto { margin-inline-start: auto; } - .me-2 { margin-inline-end: calc(var(--spacing) * 2); } - .prose { - color: var(--tw-prose-body); max-width: 65ch; - & :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.25em; margin-bottom: 1.25em; } - & :where([class~="lead"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-lead); font-size: 1.25em; line-height: 1.6; margin-top: 1.2em; margin-bottom: 1.2em; } - & :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-links); text-decoration: underline; font-weight: 500; } - & :where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-bold); font-weight: 600; } - & :where(a strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; } - & :where(blockquote strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; } - & :where(thead th strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; } - & :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: decimal; margin-top: 1.25em; margin-bottom: 1.25em; padding-inline-start: 1.625em; } - & :where(ol[type="A"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: upper-alpha; } - & :where(ol[type="a"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: lower-alpha; } - & :where():not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: upper-alpha; } - & :where():not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: lower-alpha; } - & :where(ol[type="I"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: upper-roman; } - & :where(ol[type="i"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: lower-roman; } - & :where():not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: upper-roman; } - & :where():not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: lower-roman; } - & :where(ol[type="1"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: decimal; } - & :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: disc; margin-top: 1.25em; margin-bottom: 1.25em; padding-inline-start: 1.625em; } - & :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker { font-weight: 400; color: var(--tw-prose-counters); } - & :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker { color: var(--tw-prose-bullets); } - & :where(dt):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 600; margin-top: 1.25em; } - & :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) { border-color: var(--tw-prose-hr); border-top-width: 1px; margin-top: 3em; margin-bottom: 3em; } - & :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-weight: 500; font-style: italic; color: var(--tw-prose-quotes); border-inline-start-width: 0.25rem; border-inline-start-color: var(--tw-prose-quote-borders); quotes: "“" "”" "‘" "’"; margin-top: 1.6em; margin-bottom: 1.6em; padding-inline-start: 1em; } - & :where(blockquote p:first-of-type):not(:where([class~="not-prose"], [class~="not-prose"] *))::before { content: open-quote; } - & :where(blockquote p:last-of-type):not(:where([class~="not-prose"], [class~="not-prose"] *))::after { content: close-quote; } - & :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 800; font-size: 2.25em; margin-top: 0px; margin-bottom: 0.888889em; line-height: 1.11111; } - & :where(h1 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-weight: 900; color: inherit; } - & :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 700; font-size: 1.5em; margin-top: 2em; margin-bottom: 1em; line-height: 1.33333; } - & :where(h2 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-weight: 800; color: inherit; } - & :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 600; font-size: 1.25em; margin-top: 1.6em; margin-bottom: 0.6em; line-height: 1.6; } - & :where(h3 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-weight: 700; color: inherit; } - & :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 600; margin-top: 1.5em; margin-bottom: 0.5em; line-height: 1.5; } - & :where(h4 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-weight: 700; color: inherit; } - & :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; } - & :where(picture):not(:where([class~="not-prose"], [class~="not-prose"] *)) { display: block; margin-top: 2em; margin-bottom: 2em; } - & :where(video):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; } - & :where(kbd):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-weight: 500; font-family: inherit; color: var(--tw-prose-kbd); box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows); font-size: 0.875em; border-radius: 0.3125rem; padding-top: 0.1875em; padding-inline: 0.375em; padding-bottom: 0.1875em; } - & :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-code); font-weight: 600; font-size: 0.875em; } - & :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before { content: "`"; } - & :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::after { content: "`"; } - & :where(a code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; } - & :where(h1 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; } - & :where(h2 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; font-size: 0.875em; } - & :where(h3 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; font-size: 0.9em; } - & :where(h4 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; } - & :where(blockquote code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; } - & :where(thead th code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; } - & :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-pre-code); background-color: var(--tw-prose-pre-bg); overflow-x: auto; font-weight: 400; font-size: 0.875em; line-height: 1.71429; margin-top: 1.71429em; margin-bottom: 1.71429em; border-radius: 0.375rem; padding-top: 0.857143em; padding-inline: 1.14286em; padding-bottom: 0.857143em; } - & :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { background-color: transparent; border-width: 0px; border-radius: 0px; padding: 0px; font-weight: inherit; color: inherit; font-size: inherit; font-family: inherit; line-height: inherit; } - & :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before { content: none; } - & :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *))::after { content: none; } - & :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) { width: 100%; table-layout: auto; margin-top: 2em; margin-bottom: 2em; font-size: 0.875em; line-height: 1.71429; } - & :where(thead):not(:where([class~="not-prose"], [class~="not-prose"] *)) { border-bottom-width: 1px; border-bottom-color: var(--tw-prose-th-borders); } - & :where(thead th):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 600; vertical-align: bottom; padding-inline: 0.571429em; padding-bottom: 0.571429em; } - & :where(tbody tr):not(:where([class~="not-prose"], [class~="not-prose"] *)) { border-bottom-width: 1px; border-bottom-color: var(--tw-prose-td-borders); } - & :where(tbody tr:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { border-bottom-width: 0px; } - & :where(tbody td):not(:where([class~="not-prose"], [class~="not-prose"] *)) { vertical-align: baseline; } - & :where(tfoot):not(:where([class~="not-prose"], [class~="not-prose"] *)) { border-top-width: 1px; border-top-color: var(--tw-prose-th-borders); } - & :where(tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) { vertical-align: top; } - & :where(th, td):not(:where([class~="not-prose"], [class~="not-prose"] *)) { text-align: start; } - & :where(figure > *):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0px; margin-bottom: 0px; } - & :where(figcaption):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-captions); font-size: 0.875em; line-height: 1.42857; margin-top: 0.857143em; } - --tw-prose-body: oklch(37.3% 0.034 259.733); --tw-prose-headings: oklch(21% 0.034 264.665); --tw-prose-lead: oklch(44.6% 0.03 256.802); --tw-prose-links: oklch(21% 0.034 264.665); --tw-prose-bold: oklch(21% 0.034 264.665); --tw-prose-counters: oklch(55.1% 0.027 264.364); --tw-prose-bullets: oklch(87.2% 0.01 258.338); --tw-prose-hr: oklch(92.8% 0.006 264.531); --tw-prose-quotes: oklch(21% 0.034 264.665); --tw-prose-quote-borders: oklch(92.8% 0.006 264.531); --tw-prose-captions: oklch(55.1% 0.027 264.364); --tw-prose-kbd: oklch(21% 0.034 264.665); --tw-prose-kbd-shadows: color-mix(in oklab, oklch(21% 0.034 264.665) 10%, transparent); --tw-prose-code: oklch(21% 0.034 264.665); --tw-prose-pre-code: oklch(92.8% 0.006 264.531); --tw-prose-pre-bg: oklch(27.8% 0.033 256.848); --tw-prose-th-borders: oklch(87.2% 0.01 258.338); --tw-prose-td-borders: oklch(92.8% 0.006 264.531); --tw-prose-invert-body: oklch(87.2% 0.01 258.338); --tw-prose-invert-headings: #fff; --tw-prose-invert-lead: oklch(70.7% 0.022 261.325); --tw-prose-invert-links: #fff; --tw-prose-invert-bold: #fff; --tw-prose-invert-counters: oklch(70.7% 0.022 261.325); --tw-prose-invert-bullets: oklch(44.6% 0.03 256.802); --tw-prose-invert-hr: oklch(37.3% 0.034 259.733); --tw-prose-invert-quotes: oklch(96.7% 0.003 264.542); --tw-prose-invert-quote-borders: oklch(37.3% 0.034 259.733); --tw-prose-invert-captions: oklch(70.7% 0.022 261.325); --tw-prose-invert-kbd: #fff; --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%); --tw-prose-invert-code: #fff; --tw-prose-invert-pre-code: oklch(87.2% 0.01 258.338); --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%); --tw-prose-invert-th-borders: oklch(44.6% 0.03 256.802); --tw-prose-invert-td-borders: oklch(37.3% 0.034 259.733); font-size: 1rem; line-height: 1.75; - & :where(picture > img):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0px; margin-bottom: 0px; } - & :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0.5em; margin-bottom: 0.5em; } - & :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-start: 0.375em; } - & :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-start: 0.375em; } - & :where(.prose > ul > li p):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0.75em; margin-bottom: 0.75em; } - & :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.25em; } - & :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-bottom: 1.25em; } - & :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.25em; } - & :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-bottom: 1.25em; } - & :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0.75em; margin-bottom: 0.75em; } - & :where(dl):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.25em; margin-bottom: 1.25em; } - & :where(dd):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0.5em; padding-inline-start: 1.625em; } - & :where(hr + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0px; } - & :where(h2 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0px; } - & :where(h3 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0px; } - & :where(h4 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0px; } - & :where(thead th:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-start: 0px; } - & :where(thead th:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-end: 0px; } - & :where(tbody td, tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-top: 0.571429em; padding-inline: 0.571429em; padding-bottom: 0.571429em; } - & :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-start: 0px; } - & :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-end: 0px; } - & :where(figure):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; } - & :where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0px; } - & :where(.prose > :last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-bottom: 0px; } -} - .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-auto { margin-top: auto; } - .-mr-0\.5 { margin-right: calc(var(--spacing) * -0.5); } - .mr-1 { margin-right: calc(var(--spacing) * 1); } - .mr-2 { margin-right: calc(var(--spacing) * 2); } - .mr-4 { margin-right: calc(var(--spacing) * 4); } - .-mb-0\.5 { margin-bottom: calc(var(--spacing) * -0.5); } - .mb-1 { margin-bottom: calc(var(--spacing) * 1); } - .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-6 { margin-bottom: calc(var(--spacing) * 6); } - .ml-1 { margin-left: calc(var(--spacing) * 1); } - .ml-2 { margin-left: calc(var(--spacing) * 2); } - .ml-4 { margin-left: calc(var(--spacing) * 4); } - .ml-\[2px\] { margin-left: 2px; } - .ml-auto { margin-left: auto; } - .i-mdi-ab-testing { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M4 2a2 2 0 0 0-2 2v8h2V8h2v4h2V4a2 2 0 0 0-2-2zm0 2h2v2H4m18 9.5V14a2 2 0 0 0-2-2h-4v10h4a2 2 0 0 0 2-2v-1.5a1.54 1.54 0 0 0-1.5-1.5a1.54 1.54 0 0 0 1.5-1.5M20 20h-2v-2h2zm0-4h-2v-2h2M5.79 21.61l-1.58-1.22l14-18l1.58 1.22Z'/%3E%3C/svg%3E"); } - .i-mdi-account { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4'/%3E%3C/svg%3E"); } - .i-mdi-account-circle { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 19.2c-2.5 0-4.71-1.28-6-3.2c.03-2 4-3.1 6-3.1s5.97 1.1 6 3.1a7.23 7.23 0 0 1-6 3.2M12 5a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3m0-3A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10c0-5.53-4.5-10-10-10'/%3E%3C/svg%3E"); } - .i-mdi-alert { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2z'/%3E%3C/svg%3E"); } - .i-mdi-alert-circle { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M13 13h-2V7h2m0 10h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2'/%3E%3C/svg%3E"); } - .i-mdi-alert-circle-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M11 15h2v2h-2zm0-8h2v6h-2zm1-5C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 18a8 8 0 0 1-8-8a8 8 0 0 1 8-8a8 8 0 0 1 8 8a8 8 0 0 1-8 8'/%3E%3C/svg%3E"); } - .i-mdi-alert-octagram { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M2.2 16.06L3.88 12L2.2 7.94l4.06-1.68L7.94 2.2L12 3.88l4.06-1.68l1.68 4.06l4.06 1.68L20.12 12l1.68 4.06l-4.06 1.68l-1.68 4.06L12 20.12L7.94 21.8l-1.68-4.06zM13 17v-2h-2v2zm0-4V7h-2v6z'/%3E%3C/svg%3E"); } - .i-mdi-api { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M7 7H5a2 2 0 0 0-2 2v8h2v-4h2v4h2V9a2 2 0 0 0-2-2m0 4H5V9h2m7-2h-4v10h2v-4h2a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2m0 4h-2V9h2m6 0v6h1v2h-4v-2h1V9h-1V7h4v2Z'/%3E%3C/svg%3E"); } - .i-mdi-arrow-down { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M11 4h2v12l5.5-5.5l1.42 1.42L12 19.84l-7.92-7.92L5.5 10.5L11 16z'/%3E%3C/svg%3E"); } - .i-mdi-arrow-down-bold { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M9 4h6v8h4.84L12 19.84L4.16 12H9z'/%3E%3C/svg%3E"); } - .i-mdi-arrow-left-bold { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M20 9v6h-8v4.84L4.16 12L12 4.16V9z'/%3E%3C/svg%3E"); } - .i-mdi-arrow-left-right-bold { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M8 14v4l-6-6l6-6v4h8V6l6 6l-6 6v-4z'/%3E%3C/svg%3E"); } - .i-mdi-arrow-right-bold { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M4 15V9h8V4.16L19.84 12L12 19.84V15z'/%3E%3C/svg%3E"); } - .i-mdi-arrow-up-bold { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M15 20H9v-8H4.16L12 4.16L19.84 12H15z'/%3E%3C/svg%3E"); } - .i-mdi-arrow-up-down-bold { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M10 8H6l6-6l6 6h-4v8h4l-6 6l-6-6h4z'/%3E%3C/svg%3E"); } - .i-mdi-auto-fix { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M7.5 5.6L5 7l1.4-2.5L5 2l2.5 1.4L10 2L8.6 4.5L10 7zm12 9.8L22 14l-1.4 2.5L22 19l-2.5-1.4L17 19l1.4-2.5L17 14zM22 2l-1.4 2.5L22 7l-2.5-1.4L17 7l1.4-2.5L17 2l2.5 1.4zm-8.66 10.78l2.44-2.44l-2.12-2.12l-2.44 2.44zm1.03-5.49l2.34 2.34c.39.37.39 1.02 0 1.41L5.04 22.71c-.39.39-1.04.39-1.41 0l-2.34-2.34c-.39-.37-.39-1.02 0-1.41L12.96 7.29c.39-.39 1.04-.39 1.41 0'/%3E%3C/svg%3E"); } - .i-mdi-block-helper { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 0a12 12 0 0 1 12 12a12 12 0 0 1-12 12A12 12 0 0 1 0 12A12 12 0 0 1 12 0m0 2A10 10 0 0 0 2 12c0 2.4.85 4.6 2.26 6.33L18.33 4.26A10 10 0 0 0 12 2m0 20a10 10 0 0 0 10-10c0-2.4-.85-4.6-2.26-6.33L5.67 19.74A10 10 0 0 0 12 22'/%3E%3C/svg%3E"); } - .i-mdi-book-alphabet { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M5.81 2C4.83 2.09 4 3 4 4v16c0 1.05.95 2 2 2h12c1.05 0 2-.95 2-2V4a2 2 0 0 0-2-2h-6v7L9.5 7.5L7 9V2zM12 13h1a1 1 0 0 1 1 1v4h-1v-2h-1v2h-1v-4a1 1 0 0 1 1-1m0 1v1h1v-1zm3 1h3v1l-2 3h2v1h-3v-1l2-3h-2z'/%3E%3C/svg%3E"); } - .i-mdi-book-arrow-down-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M13.09 20c.12.72.37 1.39.72 2H6c-1.11 0-2-.89-2-2V4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v9.09c-.33-.05-.66-.09-1-.09s-.67.04-1 .09V4h-5v8l-2.5-2.25L8 12V4H6v16zM20 20v-4h-2v4h-2l3 3l3-3z'/%3E%3C/svg%3E"); } - .i-mdi-book-arrow-left-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M13.09 20c.12.72.37 1.39.72 2H6c-1.11 0-2-.89-2-2V4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v9.09c-.33-.05-.66-.09-1-.09s-.67.04-1 .09V4h-5v8l-2.5-2.25L8 12V4H6v16zM18 18v-2l-3 3l3 3v-2h4v-2z'/%3E%3C/svg%3E"); } - .i-mdi-book-edit-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M6 20h5v2H6c-1.11 0-2-.89-2-2V4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v6.3c-.22.12-.43.26-.61.44L18 12.13V4h-5v8l-2.5-2.25L8 12V4H6zm16.85-6.53l-1.32-1.32c-.2-.2-.53-.2-.72 0l-.98.98l2.04 2.04l.98-.98c.2-.19.2-.52 0-.72M13 19.96V22h2.04l6.13-6.12l-2.04-2.05z'/%3E%3C/svg%3E"); } - .i-mdi-book-open-page-variant { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m19 2l-5 4.5v11l5-4.5zM6.5 5C4.55 5 2.45 5.4 1 6.5v14.66c0 .25.25.5.5.5c.1 0 .15-.07.25-.07c1.35-.65 3.3-1.09 4.75-1.09c1.95 0 4.05.4 5.5 1.5c1.35-.85 3.8-1.5 5.5-1.5c1.65 0 3.35.31 4.75 1.06c.1.05.15.03.25.03c.25 0 .5-.25.5-.5V6.5c-.6-.45-1.25-.75-2-1V19c-1.1-.35-2.3-.5-3.5-.5c-1.7 0-4.15.65-5.5 1.5V6.5C10.55 5.4 8.45 5 6.5 5'/%3E%3C/svg%3E"); } - .i-mdi-book-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M18 2a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm0 2h-5v8l-2.5-2.25L8 12V4H6v16h12z'/%3E%3C/svg%3E"); } - .i-mdi-book-plus-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M13.09 20c.12.72.37 1.39.72 2H6c-1.11 0-2-.89-2-2V4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v9.09c-.33-.05-.66-.09-1-.09s-.67.04-1 .09V4h-5v8l-2.5-2.25L8 12V4H6v16zM20 18v-3h-2v3h-3v2h3v3h2v-3h3v-2z'/%3E%3C/svg%3E"); } - .i-mdi-book-search-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M15.5 12c2.5 0 4.5 2 4.5 4.5c0 .88-.25 1.71-.69 2.4l3.08 3.1L21 23.39l-3.12-3.07c-.69.43-1.51.68-2.38.68c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5m0 2a2.5 2.5 0 0 0-2.5 2.5a2.5 2.5 0 0 0 2.5 2.5a2.5 2.5 0 0 0 2.5-2.5a2.5 2.5 0 0 0-2.5-2.5M13 4v8l-2.5-2.25L8 12V4H6v16h4c.54.81 1.23 1.5 2.03 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v7.81c-.58-.55-1.25-1-2-1.31V4z'/%3E%3C/svg%3E"); } - .i-mdi-bug { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M14 12h-4v-2h4m0 6h-4v-2h4m6-6h-2.81a6 6 0 0 0-1.82-1.96L17 4.41L15.59 3l-2.17 2.17a6 6 0 0 0-2.83 0L8.41 3L7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20z'/%3E%3C/svg%3E"); } - .i-mdi-bug-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M20 8h-2.81c-.45-.8-1.07-1.5-1.82-2L17 4.41L15.59 3l-2.17 2.17a6 6 0 0 0-2.83 0L8.41 3L7 4.41L8.62 6c-.75.5-1.36 1.21-1.81 2H4v2h2.09c-.06.33-.09.66-.09 1v1H4v2h2v1c0 .34.03.67.09 1H4v2h2.81A5.99 5.99 0 0 0 15 20.18c.91-.52 1.67-1.28 2.19-2.18H20v-2h-2.09c.06-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.03-.67-.09-1H20zm-4 7a4 4 0 0 1-4 4a4 4 0 0 1-4-4v-4a4 4 0 0 1 4-4a4 4 0 0 1 4 4zm-2-5v2h-4v-2zm-4 4h4v2h-4z'/%3E%3C/svg%3E"); } - .i-mdi-cake-variant { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 6a2 2 0 0 0 2-2c0-.38-.1-.73-.29-1.03L12 0l-1.71 2.97c-.19.3-.29.65-.29 1.03a2 2 0 0 0 2 2m4.6 10l-1.07-1.08L14.45 16c-1.3 1.29-3.58 1.3-4.89 0L8.5 14.92L7.4 16a3.47 3.47 0 0 1-4.4.39V21a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-4.61a3.47 3.47 0 0 1-4.4-.39M18 9h-5V7h-2v2H6a3 3 0 0 0-3 3v1.54c0 1.08.88 1.96 1.96 1.96c.54 0 1.04-.2 1.38-.57L8.5 12.8l2.11 2.13c.74.74 2.03.74 2.77 0l2.12-2.13l2.15 2.13c.35.37.85.57 1.38.57c1.08 0 1.97-.88 1.97-1.96V12a3 3 0 0 0-3-3'/%3E%3C/svg%3E"); } - .i-mdi-calendar-clock { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M15 13h1.5v2.82l2.44 1.41l-.75 1.3L15 16.69zm4-5H5v11h4.67c-.43-.91-.67-1.93-.67-3a7 7 0 0 1 7-7c1.07 0 2.09.24 3 .67zM5 21a2 2 0 0 1-2-2V5c0-1.11.89-2 2-2h1V1h2v2h8V1h2v2h1a2 2 0 0 1 2 2v6.1c1.24 1.26 2 2.99 2 4.9a7 7 0 0 1-7 7c-1.91 0-3.64-.76-4.9-2zm11-9.85A4.85 4.85 0 0 0 11.15 16c0 2.68 2.17 4.85 4.85 4.85A4.85 4.85 0 0 0 20.85 16c0-2.68-2.17-4.85-4.85-4.85'/%3E%3C/svg%3E"); } - .i-mdi-cellphone { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M17 19H7V5h10m0-4H7c-1.11 0-2 .89-2 2v18a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2'/%3E%3C/svg%3E"); } - .i-mdi-chart-line { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m16 11.78l4.24-7.33l1.73 1l-5.23 9.05l-6.51-3.75L5.46 19H22v2H2V3h2v14.54L9.5 8z'/%3E%3C/svg%3E"); } - .i-mdi-check { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59z'/%3E%3C/svg%3E"); } - .i-mdi-check-circle { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10s10-4.5 10-10S17.5 2 12 2m-2 15l-5-5l1.41-1.41L10 14.17l7.59-7.59L19 8z'/%3E%3C/svg%3E"); } - .i-mdi-checkbox-marked { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m10 17l-5-5l1.41-1.42L10 14.17l7.59-7.59L19 8m0-5H5c-1.11 0-2 .89-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2'/%3E%3C/svg%3E"); } - .i-mdi-chevron-double-left { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M18.41 7.41L17 6l-6 6l6 6l1.41-1.41L13.83 12zm-6 0L11 6l-6 6l6 6l1.41-1.41L7.83 12z'/%3E%3C/svg%3E"); } - .i-mdi-chevron-down { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z'/%3E%3C/svg%3E"); } - .i-mdi-chevron-left { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M15.41 16.58L10.83 12l4.58-4.59L14 6l-6 6l6 6z'/%3E%3C/svg%3E"); } - .i-mdi-chevron-right { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z'/%3E%3C/svg%3E"); } - .i-mdi-chevron-up { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z'/%3E%3C/svg%3E"); } - .i-mdi-circle { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2'/%3E%3C/svg%3E"); } - .i-mdi-close { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z'/%3E%3C/svg%3E"); } - .i-mdi-cloud { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M6.5 20q-2.28 0-3.89-1.57Q1 16.85 1 14.58q0-1.95 1.17-3.48q1.18-1.53 3.08-1.95q.63-2.3 2.5-3.72Q9.63 4 12 4q2.93 0 4.96 2.04Q19 8.07 19 11q1.73.2 2.86 1.5q1.14 1.28 1.14 3q0 1.88-1.31 3.19T18.5 20Z'/%3E%3C/svg%3E"); } - .i-mdi-cloud-arrow-down { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M13 19c0 .34.04.67.09 1H6.5c-1.5 0-2.81-.5-3.89-1.57C1.54 17.38 1 16.09 1 14.58q0-1.95 1.17-3.48C3.34 9.57 4 9.43 5.25 9.15c.42-1.53 1.25-2.77 2.5-3.72S10.42 4 12 4c1.95 0 3.6.68 4.96 2.04S19 9.05 19 11c1.15.13 2.1.63 2.86 1.5c.51.57.84 1.21 1 1.92A5.9 5.9 0 0 0 19 13c-3.31 0-6 2.69-6 6m7-3h-2v4h-2l3 3l3-3h-2z'/%3E%3C/svg%3E"); } - .i-mdi-cloud-arrow-up { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M13 19c0 .34.04.67.09 1H6.5c-1.5 0-2.81-.5-3.89-1.57C1.54 17.38 1 16.09 1 14.58q0-1.95 1.17-3.48C3.34 9.57 4 9.43 5.25 9.15c.42-1.53 1.25-2.77 2.5-3.72S10.42 4 12 4c1.95 0 3.6.68 4.96 2.04S19 9.05 19 11c1.15.13 2.1.63 2.86 1.5c.51.57.84 1.21 1 1.92A5.9 5.9 0 0 0 19 13c-3.31 0-6 2.69-6 6m3-1h2v4h2v-4h2l-3-3z'/%3E%3C/svg%3E"); } - .i-mdi-cloud-download-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M6.5 20q-2.28 0-3.89-1.57Q1 16.85 1 14.58q0-1.95 1.17-3.48q1.18-1.53 3.08-1.95q.43-1.8 2.13-3.42Q9.07 4.1 11 4.1q.83 0 1.41.59q.59.59.59 1.41v6.05l1.6-1.55L16 12l-4 4l-4-4l1.4-1.4l1.6 1.55V6.1q-1.9.35-2.95 1.84T7 11h-.5q-1.45 0-2.47 1.03Q3 13.05 3 14.5T4.03 17q1.02 1 2.47 1h12q1.05 0 1.77-.73q.73-.72.73-1.77t-.73-1.77Q19.55 13 18.5 13H17v-2q0-1.2-.55-2.24Q15.9 7.73 15 7V4.68q1.85.87 2.93 2.58Q19 9 19 11q1.73.2 2.86 1.5q1.14 1.28 1.14 3q0 1.88-1.31 3.19T18.5 20M12 11.05'/%3E%3C/svg%3E"); } - .i-mdi-cloud-off-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19.8 22.6L17.15 20H6.5q-2.3 0-3.9-1.6T1 14.5q0-1.92 1.19-3.42q1.19-1.51 3.06-1.93q.08-.2.15-.39q.1-.19.15-.41L1.4 4.2l1.4-1.4l18.4 18.4M6.5 18h8.65L7.1 9.95q-.05.28-.07.55q-.03.23-.03.5h-.5q-1.45 0-2.47 1.03Q3 13.05 3 14.5T4.03 17q1.02 1 2.47 1m15.1.75l-1.45-1.4q.43-.35.64-.81T21 15.5q0-1.05-.73-1.77q-.72-.73-1.77-.73H17v-2q0-2.07-1.46-3.54Q14.08 6 12 6q-.67 0-1.3.16q-.63.17-1.2.52L8.05 5.23q.88-.6 1.86-.92Q10.9 4 12 4q2.93 0 4.96 2.04Q19 8.07 19 11q1.73.2 2.86 1.5q1.14 1.28 1.14 3q0 1-.37 1.81q-.38.84-1.03 1.44m-6.77-6.72'/%3E%3C/svg%3E"); } - .i-mdi-cloud-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M6.5 20q-2.28 0-3.89-1.57Q1 16.85 1 14.58q0-1.95 1.17-3.48q1.18-1.53 3.08-1.95q.63-2.3 2.5-3.72Q9.63 4 12 4q2.93 0 4.96 2.04Q19 8.07 19 11q1.73.2 2.86 1.5q1.14 1.28 1.14 3q0 1.88-1.31 3.19T18.5 20m-12-2h12q1.05 0 1.77-.73q.73-.72.73-1.77t-.73-1.77Q19.55 13 18.5 13H17v-2q0-2.07-1.46-3.54Q14.08 6 12 6Q9.93 6 8.46 7.46Q7 8.93 7 11h-.5q-1.45 0-2.47 1.03Q3 13.05 3 14.5T4.03 17q1.02 1 2.47 1m5.5-6'/%3E%3C/svg%3E"); } - .i-mdi-cloud-upload-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M6.5 20q-2.28 0-3.89-1.57Q1 16.85 1 14.58q0-1.95 1.17-3.48q1.18-1.53 3.08-1.95q.63-2.3 2.5-3.72Q9.63 4 12 4q2.93 0 4.96 2.04Q19 8.07 19 11q1.73.2 2.86 1.5q1.14 1.28 1.14 3q0 1.88-1.31 3.19T18.5 20H13q-.82 0-1.41-.59Q11 18.83 11 18v-5.15L9.4 14.4L8 13l4-4l4 4l-1.4 1.4l-1.6-1.55V18h5.5q1.05 0 1.77-.73q.73-.72.73-1.77t-.73-1.77Q19.55 13 18.5 13H17v-2q0-2.07-1.46-3.54Q14.08 6 12 6Q9.93 6 8.46 7.46Q7 8.93 7 11h-.5q-1.45 0-2.47 1.03Q3 13.05 3 14.5T4.03 17q1.02 1 2.47 1H9v2m3-7'/%3E%3C/svg%3E"); } - .i-mdi-code-tags { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m14.6 16.6l4.6-4.6l-4.6-4.6L16 6l6 6l-6 6zm-5.2 0L4.8 12l4.6-4.6L8 6l-6 6l6 6z'/%3E%3C/svg%3E"); } - .i-mdi-cog { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 15.5A3.5 3.5 0 0 1 8.5 12A3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5a3.5 3.5 0 0 1-3.5 3.5m7.43-2.53c.04-.32.07-.64.07-.97s-.03-.66-.07-1l2.11-1.63c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.31-.61-.22l-2.49 1c-.52-.39-1.06-.73-1.69-.98l-.37-2.65A.506.506 0 0 0 14 2h-4c-.25 0-.46.18-.5.42l-.37 2.65c-.63.25-1.17.59-1.69.98l-2.49-1c-.22-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11c-.04.34-.07.67-.07 1s.03.65.07.97l-2.11 1.66c-.19.15-.25.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1.01c.52.4 1.06.74 1.69.99l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.63-.26 1.17-.59 1.69-.99l2.49 1.01c.22.08.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64z'/%3E%3C/svg%3E"); } - .i-mdi-cog-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 8a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 2a2 2 0 0 0-2 2a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2m-2 12c-.25 0-.46-.18-.5-.42l-.37-2.65c-.63-.25-1.17-.59-1.69-.99l-2.49 1.01c-.22.08-.49 0-.61-.22l-2-3.46a.493.493 0 0 1 .12-.64l2.11-1.66L4.5 12l.07-1l-2.11-1.63a.493.493 0 0 1-.12-.64l2-3.46c.12-.22.39-.31.61-.22l2.49 1c.52-.39 1.06-.73 1.69-.98l.37-2.65c.04-.24.25-.42.5-.42h4c.25 0 .46.18.5.42l.37 2.65c.63.25 1.17.59 1.69.98l2.49-1c.22-.09.49 0 .61.22l2 3.46c.13.22.07.49-.12.64L19.43 11l.07 1l-.07 1l2.11 1.63c.19.15.25.42.12.64l-2 3.46c-.12.22-.39.31-.61.22l-2.49-1c-.52.39-1.06.73-1.69.98l-.37 2.65c-.04.24-.25.42-.5.42zm1.25-18l-.37 2.61c-1.2.25-2.26.89-3.03 1.78L5.44 7.35l-.75 1.3L6.8 10.2a5.55 5.55 0 0 0 0 3.6l-2.12 1.56l.75 1.3l2.43-1.04c.77.88 1.82 1.52 3.01 1.76l.37 2.62h1.52l.37-2.61c1.19-.25 2.24-.89 3.01-1.77l2.43 1.04l.75-1.3l-2.12-1.55c.4-1.17.4-2.44 0-3.61l2.11-1.55l-.75-1.3l-2.41 1.04a5.42 5.42 0 0 0-3.03-1.77L12.75 4z'/%3E%3C/svg%3E"); } - .i-mdi-comment-text-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M9 22a1 1 0 0 1-1-1v-3H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6.1l-3.7 3.71c-.2.19-.45.29-.7.29zm1-6v3.08L13.08 16H20V4H4v12zM6 7h12v2H6zm0 4h9v2H6z'/%3E%3C/svg%3E"); } - .i-mdi-contain { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M2 3h6v2H4v14h4v2H2zm5 14v-2h2v2zm4 0v-2h2v2zm4 0v-2h2v2zm7-14v18h-6v-2h4V5h-4V3z'/%3E%3C/svg%3E"); } - .i-mdi-contain-end { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M7 17v-2h2v2zm4 0v-2h2v2zm4 0v-2h2v2zm7-14v18h-6v-2h4V5h-4V3z'/%3E%3C/svg%3E"); } - .i-mdi-contain-start { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M2 3h6v2H4v14h4v2H2zm5 14v-2h2v2zm4 0v-2h2v2zm4 0v-2h2v2z'/%3E%3C/svg%3E"); } - .i-mdi-content-copy { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19 21H8V7h11m0-2H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2m-3-4H4a2 2 0 0 0-2 2v14h2V3h12z'/%3E%3C/svg%3E"); } - .i-mdi-content-save { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M15 9H5V5h10m-3 14a3 3 0 0 1-3-3a3 3 0 0 1 3-3a3 3 0 0 1 3 3a3 3 0 0 1-3 3m5-16H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7z'/%3E%3C/svg%3E"); } - .i-mdi-database-refresh { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 3c4.42 0 8 1.79 8 4s-3.58 4-8 4s-8-1.79-8-4s3.58-4 8-4M4 9c0 2.21 3.58 4 8 4c1.11 0 2.18-.11 3.14-.32c-.95.86-1.64 1.99-1.96 3.28L12 16c-4.42 0-8-1.79-8-4zm16 0v2h-.5l-.6.03c.7-.6 1.1-1.29 1.1-2.03M4 14c0 2.21 3.58 4 8 4l1-.03c.09 1.06.42 2.03.95 2.91L12 21c-4.42 0-8-1.79-8-4zm15-.5c1.11 0 2.11.45 2.83 1.17L23 13.5v4h-4l1.77-1.77A2.5 2.5 0 1 0 21 19h1.71A3.99 3.99 0 0 1 19 21.5c-2.21 0-4-1.79-4-4s1.79-4 4-4'/%3E%3C/svg%3E"); } - .i-mdi-delete { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19 4h-3.5l-1-1h-5l-1 1H5v2h14M6 19a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7H6z'/%3E%3C/svg%3E"); } - .i-mdi-dock-left { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2m0 14H9V6h11Z'/%3E%3C/svg%3E"); } - .i-mdi-dots-horizontal { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M16 12a2 2 0 0 1 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2m-6 0a2 2 0 0 1 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2m-6 0a2 2 0 0 1 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2'/%3E%3C/svg%3E"); } - .i-mdi-dots-vertical { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); } - .i-mdi-download { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M5 20h14v-2H5m14-9h-4V3H9v6H5l7 7z'/%3E%3C/svg%3E"); } - .i-mdi-drag-vertical { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M9 3h2v2H9zm4 0h2v2h-2zM9 7h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2z'/%3E%3C/svg%3E"); } - .i-mdi-email-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2zm-2 0l-8 5l-8-5zm0 12H4V8l8 5l8-5z'/%3E%3C/svg%3E"); } - .i-mdi-equal { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19 10H5V8h14zm0 6H5v-2h14z'/%3E%3C/svg%3E"); } - .i-mdi-eye { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 9a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5a5 5 0 0 1 5-5a5 5 0 0 1 5 5a5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5'/%3E%3C/svg%3E"); } - .i-mdi-file-alert-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M20 17h2v-2h-2zm0-10v6h2V7M4 2c-1.11 0-2 .89-2 2v16c0 1.11.89 2 2 2h12c1.11 0 2-.89 2-2V8l-6-6M4 4h7v5h5v11H4Z'/%3E%3C/svg%3E"); } - .i-mdi-file-export { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6m-1 1.5L18.5 9H13m-4.07 3.22H16v7.07l-2.12-2.12L11.05 20l-2.83-2.83l2.83-2.82'/%3E%3C/svg%3E"); } - .i-mdi-file-eye { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M17 18c.56 0 1 .44 1 1s-.44 1-1 1s-1-.44-1-1s.44-1 1-1m0-3c-2.73 0-5.06 1.66-6 4c.94 2.34 3.27 4 6 4s5.06-1.66 6-4c-.94-2.34-3.27-4-6-4m0 6.5a2.5 2.5 0 0 1-2.5-2.5a2.5 2.5 0 0 1 2.5-2.5a2.5 2.5 0 0 1 2.5 2.5a2.5 2.5 0 0 1-2.5 2.5m-7.86-1.75L8.85 19l.29-.74C10.43 15.06 13.5 13 17 13c1.05 0 2.06.21 3 .56V8l-6-6H6c-1.11 0-2 .89-2 2v16a2 2 0 0 0 2 2h4.5c-.55-.66-1-1.42-1.36-2.25M13 3.5L18.5 9H13z'/%3E%3C/svg%3E"); } - .i-mdi-file-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zm4 18H6V4h7v5h5z'/%3E%3C/svg%3E"); } - .i-mdi-filter { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M14 12v7.88c.04.3-.06.62-.29.83a.996.996 0 0 1-1.41 0l-2.01-2.01a.99.99 0 0 1-.29-.83V12h-.03L4.21 4.62a1 1 0 0 1 .17-1.4c.19-.14.4-.22.62-.22h14c.22 0 .43.08.62.22a1 1 0 0 1 .17 1.4L14.03 12z'/%3E%3C/svg%3E"); } - .i-mdi-filter-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M15 19.88c.04.3-.06.62-.29.83a.996.996 0 0 1-1.41 0L9.29 16.7a.99.99 0 0 1-.29-.83v-5.12L4.21 4.62a1 1 0 0 1 .17-1.4c.19-.14.4-.22.62-.22h14c.22 0 .43.08.62.22a1 1 0 0 1 .17 1.4L15 10.75zM7.04 5L11 10.06v5.52l2 2v-7.53L16.96 5z'/%3E%3C/svg%3E"); } - .i-mdi-folder-open-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M6.1 10L4 18V8h17a2 2 0 0 0-2-2h-7l-2-2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h15c.9 0 1.7-.6 1.9-1.5l2.3-8.5zM19 18H6l1.6-6h13z'/%3E%3C/svg%3E"); } - .i-mdi-folder-search { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M16.5 12c2.5 0 4.5 2 4.5 4.5c0 .88-.25 1.71-.69 2.4l3.08 3.1L22 23.39l-3.12-3.07c-.69.43-1.51.68-2.38.68c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5m0 2a2.5 2.5 0 0 0-2.5 2.5a2.5 2.5 0 0 0 2.5 2.5a2.5 2.5 0 0 0 2.5-2.5a2.5 2.5 0 0 0-2.5-2.5M9 4l2 2h8a2 2 0 0 1 2 2v3.81A6.48 6.48 0 0 0 16.5 10a6.5 6.5 0 0 0-6.5 6.5c0 1.29.37 2.5 1 3.5H3a2 2 0 0 1-2-2V6c0-1.11.89-2 2-2z'/%3E%3C/svg%3E"); } - .i-mdi-format-list-bulleted-square { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M3 4h4v4H3zm6 1v2h12V5zm-6 5h4v4H3zm6 1v2h12v-2zm-6 5h4v4H3zm6 1v2h12v-2z'/%3E%3C/svg%3E"); } - .i-mdi-format-list-text { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M2 14h6v6H2M16 8h-6v2h6M2 10h6V4H2m8 0v2h12V4M10 20h6v-2h-6m0-2h12v-2H10'/%3E%3C/svg%3E"); } - .i-mdi-forum-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M15 4v7H5.17L4 12.17V4zm1-2H3a1 1 0 0 0-1 1v14l4-4h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1m5 4h-2v9H6v2a1 1 0 0 0 1 1h11l4 4V7a1 1 0 0 0-1-1'/%3E%3C/svg%3E"); } - .i-mdi-generator-portable { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M7 2c-1.1 0-2 .9-2 2v2H4c-1.1 0-2 .9-2 2v12h2v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h10v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h2V8a2 2 0 0 0-2-2h-1V4a2 2 0 0 0-2-2zm7 8V8h6v2zm0 4v-2h6v2zM7 4h10v2H7zm0 4v4h2l-3 6v-4H4z'/%3E%3C/svg%3E"); } - .i-mdi-guitar-electric { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19.59 3H22v2h-1.59l-5.29 5.29l-1.41-1.39zM12 9c.26 0 .5.1.71.3l2 2c.18.2.29.43.29.7l-.1.4l-4 8c-.19.35-.54.53-.9.53c-.35 0-.71-.18-.89-.53l-1.86-3.7l-3.7-1.8c-.37-.2-.55-.55-.55-.9s.18-.7.55-.9l8-4c.14-.1.29-.1.45-.1m-2.65 2.82l-.7.68l2.85 2.85l.68-.7zm-1.41 1.41l-.71.71l2.83 2.83l.71-.71z'/%3E%3C/svg%3E"); } - .i-mdi-help-circle { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m15.07 11.25l-.9.92C13.45 12.89 13 13.5 13 15h-2v-.5c0-1.11.45-2.11 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 0 0-2-2a2 2 0 0 0-2 2H8a4 4 0 0 1 4-4a4 4 0 0 1 4 4a3.2 3.2 0 0 1-.93 2.25M13 19h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10c0-5.53-4.5-10-10-10'/%3E%3C/svg%3E"); } - .i-mdi-help-circle-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M11 18h2v-2h-2zm1-16A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m0-14a4 4 0 0 0-4 4h2a2 2 0 0 1 2-2a2 2 0 0 1 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5a4 4 0 0 0-4-4'/%3E%3C/svg%3E"); } - .i-mdi-history { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M13.5 8H12v5l4.28 2.54l.72-1.21l-3.5-2.08zM13 3a9 9 0 0 0-9 9H1l3.96 4.03L9 12H6a7 7 0 0 1 7-7a7 7 0 0 1 7 7a7 7 0 0 1-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.9 8.9 0 0 0 13 21a9 9 0 0 0 9-9a9 9 0 0 0-9-9'/%3E%3C/svg%3E"); } - .i-mdi-image { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m8.5 13.5l2.5 3l3.5-4.5l4.5 6H5m16 1V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2'/%3E%3C/svg%3E"); } - .i-mdi-image-broken-variant { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M21 5v6.59l-3-3.01l-4 4.01l-4-4l-4 4l-3-3.01V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2m-3 6.42l3 3.01V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-6.58l3 2.99l4-4l4 4'/%3E%3C/svg%3E"); } - .i-mdi-image-refresh { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 18.5c0 .89.18 1.73.5 2.5H5a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h14a2 2 0 0 1 2 2v7.5c-.77-.32-1.61-.5-2.5-.5c-1.21 0-2.34.34-3.31.92L14.5 12L11 16.5l-2.5-3L5 18h7.03c-.03.17-.03.33-.03.5m10 0v-4l-1.17 1.17A4 4 0 0 0 18 14.5c-2.21 0-4 1.79-4 4s1.79 4 4 4c1.68 0 3.12-1.03 3.71-2.5H20a2.5 2.5 0 1 1-.23-3.27L18 18.5z'/%3E%3C/svg%3E"); } - .i-mdi-information { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2'/%3E%3C/svg%3E"); } - .i-mdi-information-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M11 9h2V7h-2m1 13c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m-1 15h2v-6h-2z'/%3E%3C/svg%3E"); } - .i-mdi-information-variant-circle { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2S2 6.5 2 12s4.5 10 10 10m.3-14.71c.2-.18.44-.29.7-.29c.27 0 .5.11.71.29c.19.21.29.45.29.71c0 .27-.1.5-.29.71c-.21.19-.44.29-.71.29c-.26 0-.5-.1-.7-.29c-.19-.21-.3-.44-.3-.71c0-.26.11-.5.3-.71m-2.5 4.68s2.17-1.72 2.96-1.79c.74-.06.59.79.52 1.23l-.01.06c-.14.53-.31 1.17-.48 1.78c-.38 1.39-.75 2.75-.66 3c.1.34.72-.09 1.17-.39c.06-.04.11-.08.16-.11c0 0 .08-.08.16.03c.02.03.04.06.06.08c.09.14.14.19.02.27l-.04.02c-.22.15-1.16.81-1.54 1.05c-.41.27-1.98 1.17-1.74-.58c.21-1.23.49-2.29.71-3.12c.41-1.5.59-2.18-.33-1.59c-.37.22-.59.36-.72.45c-.11.08-.12.08-.19-.05l-.03-.06l-.05-.08c-.07-.1-.07-.11.03-.2'/%3E%3C/svg%3E"); } - .i-mdi-laptop { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M4 6h16v10H4m16 2a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H4c-1.11 0-2 .89-2 2v10a2 2 0 0 0 2 2H0v2h24v-2z'/%3E%3C/svg%3E"); } - .i-mdi-layers { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m12 16l7.36-5.73L21 9l-9-7l-9 7l1.63 1.27M12 18.54l-7.38-5.73L3 14.07l9 7l9-7l-1.63-1.27z'/%3E%3C/svg%3E"); } - .i-mdi-lightbulb-on-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M20 11h3v2h-3zM1 11h3v2H1zM13 1v3h-2V1zM4.92 3.5l2.13 2.14l-1.42 1.41L3.5 4.93zm12.03 2.13l2.12-2.13l1.43 1.43l-2.13 2.12zM12 6a6 6 0 0 1 6 6c0 2.22-1.21 4.16-3 5.2V19a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-1.8c-1.79-1.04-3-2.98-3-5.2a6 6 0 0 1 6-6m2 15v1a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-1zm-3-3h2v-2.13c1.73-.44 3-2.01 3-3.87a4 4 0 0 0-4-4a4 4 0 0 0-4 4c0 1.86 1.27 3.43 3 3.87z'/%3E%3C/svg%3E"); } - .i-mdi-link { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7a5 5 0 0 0-5 5a5 5 0 0 0 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1M8 13h8v-2H8zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4a5 5 0 0 0 5-5a5 5 0 0 0-5-5'/%3E%3C/svg%3E"); } - .i-mdi-loading { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8'/%3E%3C/svg%3E"); } - .i-mdi-login { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8z'/%3E%3C/svg%3E"); } - .i-mdi-logout { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5M4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4z'/%3E%3C/svg%3E"); } - .i-mdi-magnify { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5l-1.5 1.5l-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16A6.5 6.5 0 0 1 3 9.5A6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14S14 12 14 9.5S12 5 9.5 5'/%3E%3C/svg%3E"); } - .i-mdi-magnify-remove-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5A6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 5l1.5-1.5zm-6 0C7 14 5 12 5 9.5S7 5 9.5 5S14 7 14 9.5S12 14 9.5 14m1.41-2.38L9.5 10.21l-1.41 1.41l-.71-.71L8.79 9.5L7.38 8.09l.71-.71L9.5 8.79l1.41-1.41l.71.71l-1.41 1.41l1.41 1.41z'/%3E%3C/svg%3E"); } - .i-mdi-magnify-scan { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M17 22v-2h3v-3h2v3.5c0 .39-.16.74-.46 1.04s-.65.46-1.04.46zM7 22H3.5c-.39 0-.74-.16-1.04-.46S2 20.89 2 20.5V17h2v3h3zM17 2h3.5c.39 0 .74.16 1.04.46s.46.65.46 1.04V7h-2V4h-3zM7 2v2H4v3H2V3.5c0-.39.16-.74.46-1.04S3.11 2 3.5 2zm3.5 4C13 6 15 8 15 10.5c0 .88-.25 1.7-.69 2.4l3.26 3.26l-1.41 1.41l-3.26-3.26c-.7.44-1.52.69-2.4.69C8 15 6 13 6 10.5S8 6 10.5 6m0 2a2.5 2.5 0 0 0 0 5a2.5 2.5 0 0 0 0-5'/%3E%3C/svg%3E"); } - .i-mdi-menu { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z'/%3E%3C/svg%3E"); } - .i-mdi-menu-down { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m7 10l5 5l5-5z'/%3E%3C/svg%3E"); } - .i-mdi-message { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2'/%3E%3C/svg%3E"); } - .i-mdi-message-question-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m0 14H5.2L4 17.2V4h16zM12.2 5.5c-.9 0-1.6.2-2.1.5c-.6.4-.9 1-.8 1.7h2q0-.45.3-.6c.2-.1.4-.2.7-.2s.6.1.8.3s.3.4.3.7s-.1.5-.2.7c-.2.2-.4.4-.6.5c-.5.3-.9.6-1.1.8c-.4.3-.5.6-.5 1.1h2c0-.3.1-.5.1-.7c.1-.2.3-.3.5-.5c.5-.2.8-.5 1.1-.9s.4-.8.4-1.2c0-.7-.3-1.3-.8-1.7c-.4-.3-1.2-.5-2.1-.5M11 12v2h2v-2z'/%3E%3C/svg%3E"); } - .i-mdi-microphone { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 2a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3m7 9c0 3.53-2.61 6.44-6 6.93V21h-2v-3.07c-3.39-.49-6-3.4-6-6.93h2a5 5 0 0 0 5 5a5 5 0 0 0 5-5z'/%3E%3C/svg%3E"); } - .i-mdi-microphone-plus { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M9 2a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3m7 9c0 3.5-2.56 6.43-6 6.93V21H8v-3.07c-3.44-.5-6-3.43-6-6.93h2a5 5 0 0 0 5 5a5 5 0 0 0 5-5zm-1-6h3V2h2v3h3v2h-3v3h-2V7h-3z'/%3E%3C/svg%3E"); } - .i-mdi-minus { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19 13H5v-2h14z'/%3E%3C/svg%3E"); } - .i-mdi-not-equal-variant { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m14.08 4.61l1.84.79L14.8 8H19v2h-5.05l-1.72 4H19v2h-7.62l-1.46 3.4l-1.84-.79L9.2 16H5v-2h5.06l1.71-4H5V8h7.63z'/%3E%3C/svg%3E"); } - .i-mdi-open-in-new { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M14 3v2h3.59l-9.83 9.83l1.41 1.41L19 6.41V10h2V3m-2 16H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2z'/%3E%3C/svg%3E"); } - .i-mdi-party-popper { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m14.53 1.45l-1.08 1.08l1.6 1.6q.33.375.33.87c0 .495-.11.64-.33.86L11.5 9.47l1 1.08l3.63-3.61c.53-.59.79-1.24.79-1.94s-.26-1.36-.79-1.95zm-3.98 2.02L9.47 4.55l.61.56c.22.22.33.52.33.89s-.11.67-.33.89l-.61.56l1.08 1.08l.56-.61c.53-.59.8-1.23.8-1.92c0-.72-.27-1.37-.8-1.97zM21 5.06c-.69 0-1.33.27-1.92.8l-5.63 5.64l1.08 1l5.58-5.56c.25-.25.55-.38.89-.38s.64.13.89.38l.61.61l1.03-1.08l-.56-.61c-.59-.53-1.25-.8-1.97-.8M7 8L2 22l14-5zm12 3.06c-.7 0-1.34.27-1.94.8l-1.59 1.59l1.08 1.08l1.59-1.59c.25-.25.53-.38.86-.38s.63.13.88.38l1.62 1.59l1.05-1.03l-1.6-1.64c-.59-.53-1.25-.8-1.95-.8'/%3E%3C/svg%3E"); } - .i-mdi-pause { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M14 19h4V5h-4M6 19h4V5H6z'/%3E%3C/svg%3E"); } - .i-mdi-pencil { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83l3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75z'/%3E%3C/svg%3E"); } - .i-mdi-pencil-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m14.06 9l.94.94L5.92 19H5v-.92zm3.6-6c-.25 0-.51.1-.7.29l-1.83 1.83l3.75 3.75l1.83-1.83c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29m-3.6 3.19L3 17.25V21h3.75L17.81 9.94z'/%3E%3C/svg%3E"); } - .i-mdi-pin-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M16 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2zm-7.2 2l1.2-1.2V4h4v8.8l1.2 1.2z'/%3E%3C/svg%3E"); } - .i-mdi-pine-tree { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M10 21v-3H3l5-5H5l5-5H7l5-5l5 5h-3l5 5h-3l5 5h-7v3z'/%3E%3C/svg%3E"); } - .i-mdi-play { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M8 5.14v14l11-7z'/%3E%3C/svg%3E"); } - .i-mdi-plus { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z'/%3E%3C/svg%3E"); } - .i-mdi-plus-thick { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M20 14h-6v6h-4v-6H4v-4h6V4h4v6h6z'/%3E%3C/svg%3E"); } - .i-mdi-refresh { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M17.65 6.35A7.96 7.96 0 0 0 12 4a8 8 0 0 0-8 8a8 8 0 0 0 8 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18a6 6 0 0 1-6-6a6 6 0 0 1 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z'/%3E%3C/svg%3E"); } - .i-mdi-send { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m2 21l21-9L2 3v7l15 2l-15 2z'/%3E%3C/svg%3E"); } - .i-mdi-sort-alphabetical-ascending { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19 17h3l-4 4l-4-4h3V3h2m-8 10v2l-3.33 4H11v2H5v-2l3.33-4H5v-2M9 3H7c-1.1 0-2 .9-2 2v6h2V9h2v2h2V5a2 2 0 0 0-2-2m0 4H7V5h2Z'/%3E%3C/svg%3E"); } - .i-mdi-sort-alphabetical-descending { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19 7h3l-4-4l-4 4h3v14h2m-8-8v2l-3.33 4H11v2H5v-2l3.33-4H5v-2M9 3H7c-1.1 0-2 .9-2 2v6h2V9h2v2h2V5a2 2 0 0 0-2-2m0 4H7V5h2Z'/%3E%3C/svg%3E"); } - .i-mdi-sort-clock-ascending { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M20 17h3l-4 4l-4-4h3V3h2zM8 5c-3.86 0-7 3.13-7 7s3.13 7 7 7c3.86 0 7-3.13 7-7s-3.13-7-7-7m2.19 9.53L7 12.69V9h1.5v2.82l2.44 1.41z'/%3E%3C/svg%3E"); } - .i-mdi-sort-clock-descending { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M18 7h-3l4-4l4 4h-3v14h-2zM8 5c-3.86 0-7 3.13-7 7s3.13 7 7 7c3.86 0 7-3.13 7-7s-3.13-7-7-7m2.19 9.53L7 12.69V9h1.5v2.82l2.44 1.41z'/%3E%3C/svg%3E"); } - .i-mdi-sprout-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M23 4.1V2.3l-1.8-.2c-.1 0-.7-.1-1.7-.1c-4.1 0-7.1 1.2-8.8 3.3C9.4 4.5 7.6 4 5.5 4c-1 0-1.7.1-1.7.1l-1.9.3l.1 1.7c.1 3 1.6 8.7 6.8 8.7H9v3.4c-3.8.5-7 1.8-7 1.8v2h20v-2s-3.2-1.3-7-1.8V15c6.3-.1 8-7.2 8-10.9M12 18h-1v-5.6S10.8 9 8 9c0 0 1.5.8 1.9 3.7c-.4.1-.8.1-1.1.1C4.2 12.8 4 6.1 4 6.1S4.6 6 5.5 6c1.9 0 5 .4 5.9 3.1C11.9 4.6 17 4 19.5 4c.9 0 1.5.1 1.5.1s0 9-6.3 9H14c0-2 2-5 2-5c-3 1-3 4.9-3 4.9v5z'/%3E%3C/svg%3E"); } - .i-mdi-stop { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M18 18H6V6h12z'/%3E%3C/svg%3E"); } - .i-mdi-sync { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 18a6 6 0 0 1-6-6c0-1 .25-1.97.7-2.8L5.24 7.74A7.93 7.93 0 0 0 4 12a8 8 0 0 0 8 8v3l4-4l-4-4m0-11V1L8 5l4 4V6a6 6 0 0 1 6 6c0 1-.25 1.97-.7 2.8l1.46 1.46A7.93 7.93 0 0 0 20 12a8 8 0 0 0-8-8'/%3E%3C/svg%3E"); } - .i-mdi-test-tube { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M7 2v2h1v14a4 4 0 0 0 4 4a4 4 0 0 0 4-4V4h1V2zm4 14c-.6 0-1-.4-1-1s.4-1 1-1s1 .4 1 1s-.4 1-1 1m2-4c-.6 0-1-.4-1-1s.4-1 1-1s1 .4 1 1s-.4 1-1 1m1-5h-4V4h4z'/%3E%3C/svg%3E"); } - .i-mdi-translate { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m12.87 15.07l-2.54-2.51l.03-.03A17.5 17.5 0 0 0 14.07 6H17V4h-7V2H8v2H1v2h11.17C11.5 7.92 10.44 9.75 9 11.35C8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5l3.11 3.11zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2zm-2.62 7l1.62-4.33L19.12 17z'/%3E%3C/svg%3E"); } - .i-mdi-trash-can { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M9 3v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3zm0 5h2v9H9zm4 0h2v9h-2z'/%3E%3C/svg%3E"); } - .i-mdi-trash-can-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M9 3v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3zM7 6h10v13H7zm2 2v9h2V8zm4 0v9h2V8z'/%3E%3C/svg%3E"); } - .i-mdi-trending-up { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m16 6l2.29 2.29l-4.88 4.88l-4-4L2 16.59L3.41 18l6-6l4 4l6.3-6.29L22 12V6z'/%3E%3C/svg%3E"); } - .i-mdi-trophy-outline { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M18 2c-.9 0-2 1-2 2H8c0-1-1.1-2-2-2H2v9c0 1 1 2 2 2h2.2c.4 2 1.7 3.7 4.8 4v2.08C8 19.54 8 22 8 22h8s0-2.46-3-2.92V17c3.1-.3 4.4-2 4.8-4H20c1 0 2-1 2-2V2zM6 11H4V4h2zm10 .5c0 1.93-.58 3.5-4 3.5c-3.41 0-4-1.57-4-3.5V6h8zm4-.5h-2V4h2z'/%3E%3C/svg%3E"); } - .i-mdi-update { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M21 10.12h-6.78l2.74-2.82c-2.73-2.7-7.15-2.8-9.88-.1a6.887 6.887 0 0 0 0 9.8c2.73 2.7 7.15 2.7 9.88 0c1.36-1.35 2.04-2.92 2.04-4.9h2c0 1.98-.88 4.55-2.64 6.29c-3.51 3.48-9.21 3.48-12.72 0c-3.5-3.47-3.53-9.11-.02-12.58a8.987 8.987 0 0 1 12.65 0L21 3zM12.5 8v4.25l3.5 2.08l-.72 1.21L11 13V8z'/%3E%3C/svg%3E"); } - .i-mdi-view-dashboard { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M13 3v6h8V3m-8 18h8V11h-8M3 21h8v-6H3m0-2h8V3H3z'/%3E%3C/svg%3E"); } - .i-mdi-water-polo { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M20 16h2v2h-2c-1.4 0-2.8-.4-4-1c-2.5 1.3-5.5 1.3-8 0c-1.2.6-2.6 1-4 1H2v-2h2c1.4 0 2.8-.5 4-1.3c2.4 1.7 5.6 1.7 8 0c1.2.8 2.6 1.3 4 1.3m-7-5.4c.6-.3 1.3-.6 2-.7v.3c.3 1 .3 1.9.2 2.9c-.9.5-2 .8-3 .8c.5-1 .8-2.2.8-3.3m-.1-7q-2.1.6-3.6 2.1q-.6-1.5-.6-3c2.2-1 4.7-.9 6.9.2c.3.1.6.2.8.4c-1.2-.1-2.4 0-3.5.3m-6.1 9.7q-.9.45-1.8.6c-.7-1.3-1-2.7-1-4.1c.5 1 1.2 2 2 2.8c.3.2.5.5.8.7m12.2.6c-.6-.1-1.2-.3-1.7-.5c.2-1.2.1-2.4-.2-3.6c1.1.1 2.1.4 3 1c-.1 1-.4 1.9-.9 2.8zM7.4 11.2c-1.2-1.1-1.9-2.7-2.2-4.3L5.1 6c.5-.8 1-1.4 1.7-2c.1 1.4.6 2.7 1.4 3.8c.7 1.1 1.7 2.1 2.8 2.7c0 .8-.2 1.6-.5 2.4c-1.2-.3-2.2-.9-3.1-1.7m6.1-5.7c1.5-.4 3.2-.3 4.7.2l.8.4c.4.7.6 1.5.8 2.3c-2.5-1.1-5.4-.9-7.8.4c-.7-.3-1.2-.8-1.7-1.4l.1-.1c.9-.8 1.9-1.5 3.1-1.8M16 18.7c1.2.8 2.6 1.3 4 1.3h2v2h-2c-1.4 0-2.8-.4-4-1c-2.5 1.3-5.5 1.3-8 0c-1.2.6-2.6 1-4 1H2v-2h2c1.4 0 2.8-.5 4-1.3c2.4 1.7 5.6 1.7 8 0'/%3E%3C/svg%3E"); } - .i-mdi-weather-night { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3zm3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95zm-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31'/%3E%3C/svg%3E"); } - .i-mdi-white-balance-sunny { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m3.55 19.09l1.41 1.41l1.8-1.79l-1.42-1.42M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6c0-3.32-2.69-6-6-6m8 7h3v-2h-3m-2.76 7.71l1.8 1.79l1.41-1.41l-1.79-1.8M20.45 5l-1.41-1.4l-1.8 1.79l1.42 1.42M13 1h-2v3h2M6.76 5.39L4.96 3.6L3.55 5l1.79 1.81zM1 13h3v-2H1m12 9h-2v3h2'/%3E%3C/svg%3E"); } - .line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } - .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } - .line-clamp-4 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } - .block { display: block; } - .contents { display: contents; } - .flex { display: flex; } - .grid { display: grid; } - .hidden { display: none; } - .inline { display: inline; } - .inline-block { display: inline-block; } - .inline-flex { display: inline-flex; } - .inline-grid { display: inline-grid; } - .table { display: table; } - .field-sizing-content { field-sizing: content; } - .aspect-square { aspect-ratio: 1 / 1; } - .size-2 { width: calc(var(--spacing) * 2); height: calc(var(--spacing) * 2); } - .size-2\.5 { width: calc(var(--spacing) * 2.5); height: calc(var(--spacing) * 2.5); } - .size-3 { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); } - .size-3\.5 { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); } - .size-3\/4 { width: calc(75%); height: calc(75%); } - .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-10\! { width: calc(var(--spacing) * 10) !important; height: calc(var(--spacing) * 10) !important; } - .size-12 { width: calc(var(--spacing) * 12); height: calc(var(--spacing) * 12); } - .size-14 { width: calc(var(--spacing) * 14); height: calc(var(--spacing) * 14); } - .size-16 { width: calc(var(--spacing) * 16); height: calc(var(--spacing) * 16); } - .size-\[85\%\] { width: 85%; height: 85%; } - .size-full { width: 100%; height: 100%; } - .h-\(--bits-select-anchor-height\) { height: var(--bits-select-anchor-height); } - .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-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-9\! { height: calc(var(--spacing) * 9) !important; } - .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-24 { height: calc(var(--spacing) * 24); } - .h-32 { height: calc(var(--spacing) * 32); } - .h-36 { height: calc(var(--spacing) * 36); } - .h-40 { height: calc(var(--spacing) * 40); } - .h-\[1\.2rem\] { height: 1.2rem; } - .h-\[1\.15rem\] { height: 1.15rem; } - .h-\[200px\] { height: 200px; } - .h-\[400px\] { height: 400px; } - .h-\[700px\] { height: 700px; } - .h-\[calc\(100\%-1px\)\] { height: calc(100% - 1px); } - .h-auto { height: auto; } - .h-fit { height: fit-content; } - .h-full { height: 100%; } - .h-px { height: 1px; } - .h-screen { height: 100vh; } - .h-svh { height: 100svh; } - .max-h-\(--bits-context-menu-content-available-height\) { max-height: var(--bits-context-menu-content-available-height); } - .max-h-\(--bits-dropdown-menu-content-available-height\) { max-height: var(--bits-dropdown-menu-content-available-height); } - .max-h-\(--bits-select-content-available-height\) { max-height: var(--bits-select-content-available-height); } - .max-h-8 { max-height: calc(var(--spacing) * 8); } - .max-h-9 { max-height: calc(var(--spacing) * 9); } - .max-h-10 { max-height: calc(var(--spacing) * 10); } - .max-h-16 { max-height: calc(var(--spacing) * 16); } - .max-h-30 { max-height: calc(var(--spacing) * 30); } - .max-h-80 { max-height: calc(var(--spacing) * 80); } - .max-h-\[30vh\] { max-height: 30vh; } - .max-h-\[40vh\] { max-height: 40vh; } - .max-h-\[50vh\] { max-height: 50vh; } - .max-h-\[90dvh\] { max-height: 90dvh; } - .max-h-\[90vh\] { max-height: 90vh; } - .max-h-\[300px\] { max-height: 300px; } - .max-h-\[calc\(90vh\)\] { max-height: calc(90vh); } - .max-h-\[calc\(100vh-2rem\)\] { max-height: calc(-2rem + 100vh); } - .max-h-\[min\(calc\(100cqh-13rem\)\,20rem\)\] { max-height: min(100cqh - 13rem, 20rem); } - .max-h-full { max-height: 100%; } - .min-h-0 { min-height: calc(var(--spacing) * 0); } - .min-h-4 { min-height: calc(var(--spacing) * 4); } - .min-h-8 { min-height: calc(var(--spacing) * 8); } - .min-h-9 { min-height: calc(var(--spacing) * 9); } - .min-h-10 { min-height: calc(var(--spacing) * 10); } - .min-h-12 { min-height: calc(var(--spacing) * 12); } - .min-h-14 { min-height: calc(var(--spacing) * 14); } - .min-h-16 { min-height: calc(var(--spacing) * 16); } - .min-h-80 { min-height: calc(var(--spacing) * 80); } - .min-h-auto { min-height: auto; } - .min-h-max { min-height: max-content; } - .min-h-svh { min-height: 100svh; } - .w-\(--sidebar-width\) { width: var(--sidebar-width); } - .w-0 { width: calc(var(--spacing) * 0); } - .w-2\.5 { width: calc(var(--spacing) * 2.5); } - .w-3 { width: calc(var(--spacing) * 3); } - .w-3\/4 { width: calc(75%); } - .w-3xl { width: var(--container-3xl); } - .w-4 { width: calc(var(--spacing) * 4); } - .w-5 { width: calc(var(--spacing) * 5); } - .w-8 { width: calc(var(--spacing) * 8); } - .w-9 { width: calc(var(--spacing) * 9); } - .w-10 { width: calc(var(--spacing) * 10); } - .w-13 { width: calc(var(--spacing) * 13); } - .w-14 { width: calc(var(--spacing) * 14); } - .w-16 { width: calc(var(--spacing) * 16); } - .w-20 { width: calc(var(--spacing) * 20); } - .w-28 { width: calc(var(--spacing) * 28); } - .w-32 { width: calc(var(--spacing) * 32); } - .w-40 { width: calc(var(--spacing) * 40); } - .w-44 { width: calc(var(--spacing) * 44); } - .w-64 { width: calc(var(--spacing) * 64); } - .w-72 { width: calc(var(--spacing) * 72); } - .w-96 { width: calc(var(--spacing) * 96); } - .w-\[1\.2rem\] { width: 1.2rem; } - .w-\[70rem\] { width: 70rem; } - .w-\[100px\] { width: 100px; } - .w-\[calc\(100\%\+2px\)\] { width: calc(100% + 2px); } - .w-auto { width: auto; } - .w-fit { width: fit-content; } - .w-full { width: 100%; } - .w-lg { width: var(--container-lg); } - .w-px { width: 1px; } - .max-w-\(--skeleton-width\) { max-width: var(--skeleton-width); } - .max-w-0 { max-width: calc(var(--spacing) * 0); } - .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-8 { max-width: calc(var(--spacing) * 8); } - .max-w-9 { max-width: calc(var(--spacing) * 9); } - .max-w-10 { max-width: calc(var(--spacing) * 10); } - .max-w-16 { max-width: calc(var(--spacing) * 16); } - .max-w-48 { max-width: calc(var(--spacing) * 48); } - .max-w-52 { max-width: calc(var(--spacing) * 52); } - .max-w-\[50vw\] { max-width: 50vw; } - .max-w-\[calc\(100\%-2rem\)\] { max-width: calc(100% - 2rem); } - .max-w-\[calc\(100\%-32px\)\] { max-width: calc(100% - 32px); } - .max-w-full { max-width: 100%; } - .max-w-lg { max-width: var(--container-lg); } - .max-w-max { max-width: max-content; } - .max-w-md { max-width: var(--container-md); } - .max-w-none { max-width: none; } - .max-w-sm { max-width: var(--container-sm); } - .min-w-\(--bits-select-anchor-width\) { min-width: var(--bits-select-anchor-width); } - .min-w-0 { min-width: calc(var(--spacing) * 0); } - .min-w-3 { min-width: calc(var(--spacing) * 3); } - .min-w-5 { min-width: calc(var(--spacing) * 5); } - .min-w-8 { min-width: calc(var(--spacing) * 8); } - .min-w-9 { min-width: calc(var(--spacing) * 9); } - .min-w-10 { min-width: calc(var(--spacing) * 10); } - .min-w-11 { min-width: calc(var(--spacing) * 11); } - .min-w-16 { min-width: calc(var(--spacing) * 16); } - .min-w-24 { min-width: calc(var(--spacing) * 24); } - .min-w-32 { min-width: calc(var(--spacing) * 32); } - .min-w-56 { min-width: calc(var(--spacing) * 56); } - .min-w-\[min\(calc\(100\%-32px\)\,50rem\)\] { min-width: min(100% - 32px, 50rem); } - .min-w-fit { min-width: fit-content; } - .min-w-full { min-width: 100%; } - .min-w-max { min-width: max-content; } - .flex-1 { flex: 1 1 0%; } - .flex-auto { flex: 1 1 auto; } - .shrink { flex-shrink: 1; } - .shrink-0 { flex-shrink: 0; } - .flex-grow { flex-grow: 1; } - .grow { flex-grow: 1; } - .grow-0 { flex-grow: 0; } - .origin-\(--bits-context-menu-content-transform-origin\) { transform-origin: var(--bits-context-menu-content-transform-origin); } - .origin-\(--bits-dropdown-menu-content-transform-origin\) { transform-origin: var(--bits-dropdown-menu-content-transform-origin); } - .origin-\(--bits-popover-content-transform-origin\) { transform-origin: var(--bits-popover-content-transform-origin); } - .origin-\(--bits-select-content-transform-origin\) { transform-origin: var(--bits-select-content-transform-origin); } - .origin-\(--bits-tooltip-content-transform-origin\) { transform-origin: var(--bits-tooltip-content-transform-origin); } - .-translate-x-1 { --tw-translate-x: calc(var(--spacing) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } - .-translate-x-1\/2 { --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } - .-translate-x-px { --tw-translate-x: -1px; translate: var(--tw-translate-x) var(--tw-translate-y); } - .translate-x-\[-50\%\] { --tw-translate-x: -50%; translate: var(--tw-translate-x) var(--tw-translate-y); } - .translate-x-px { --tw-translate-x: 1px; 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-px { --tw-translate-y: -1px; translate: var(--tw-translate-x) var(--tw-translate-y); } - .translate-y-0\.5 { --tw-translate-y: calc(var(--spacing) * 0.5); translate: var(--tw-translate-x) var(--tw-translate-y); } - .translate-y-\[-50\%\] { --tw-translate-y: -50%; translate: var(--tw-translate-x) var(--tw-translate-y); } - .translate-y-px { --tw-translate-y: 1px; translate: var(--tw-translate-x) var(--tw-translate-y); } - .scale-0 { --tw-scale-x: 0%; --tw-scale-y: 0%; --tw-scale-z: 0%; 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-\[1\.02\] { scale: 1.02; } - .-rotate-90 { rotate: calc(-90deg); } - .rotate-0 { rotate: 0deg; } - .rotate-45 { rotate: 45deg; } - .rotate-90 { rotate: 90deg; } - .rotate-180 { rotate: 180deg; } - .transform { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - .animate-in { animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); } - .animate-out { animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); } - .animate-ping { animation: var(--animate-ping); } - .animate-pulse { animation: var(--animate-pulse); } - .animate-spin { animation: var(--animate-spin); } - .cursor-default { cursor: default; } - .cursor-pointer { cursor: pointer; } - .cursor-text { cursor: text; } - .touch-pan-y { --tw-pan-y: pan-y; touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,); } - .touch-none { touch-action: none; } - .resize-none { resize: none; } - .scroll-my-1 { scroll-margin-block: calc(var(--spacing) * 1); } - .scroll-py-1 { scroll-padding-block: calc(var(--spacing) * 1); } - .list-disc { list-style-type: disc; } - .appearance-none { appearance: none; } - .auto-rows-min { grid-auto-rows: min-content; } - .grid-cols-1 { grid-template-columns: repeat(1, minmax(0px, 1fr)); } - .grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); } - .grid-cols-3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); } - .grid-cols-\[0_1fr\] { grid-template-columns: 0px 1fr; } - .grid-cols-\[1fr_auto_1fr\] { grid-template-columns: 1fr auto 1fr; } - .grid-cols-\[1fr_minmax\(5\.5rem\,auto\)_14px\] { grid-template-columns: 1fr minmax(5.5rem, auto) 14px; } - .grid-cols-\[auto_1fr\] { grid-template-columns: auto 1fr; } - .grid-cols-\[auto_auto_1rem_auto_auto\] { grid-template-columns: auto auto 1rem auto auto; } - .grid-cols-\[fit-content\(70px\)_1fr\] { grid-template-columns: fit-content(70px) 1fr; } - .grid-cols-subgrid { grid-template-columns: subgrid; } - .grid-rows-2 { grid-template-rows: repeat(2, minmax(0px, 1fr)); } - .grid-rows-\[auto\] { grid-template-rows: auto; } - .grid-rows-\[auto_1fr\] { grid-template-rows: auto 1fr; } - .grid-rows-\[auto_auto\] { grid-template-rows: auto auto; } - .grid-rows-\[auto_auto_1fr\] { grid-template-rows: auto auto 1fr; } - .flex-col { flex-direction: column; } - .flex-col\! { flex-direction: column !important; } - .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; } - .place-content-center { place-content: center; } - .content-center { align-content: center; } - .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; } - .items-stretch\! { align-items: stretch !important; } - .justify-between { justify-content: space-between; } - .justify-center { justify-content: center; } - .justify-end { justify-content: flex-end; } - .justify-start { justify-content: flex-start; } - .justify-items-end { justify-items: end; } - .justify-items-start { justify-items: start; } - .gap-0 { gap: calc(var(--spacing) * 0); } - .gap-0\.5 { gap: calc(var(--spacing) * 0.5); } - .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-6 { gap: calc(var(--spacing) * 6); } - .gap-8 { gap: calc(var(--spacing) * 8); } - .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-1\.5 { - :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse))); } -} - .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))); } -} - .gap-x-1\.5 { column-gap: calc(var(--spacing) * 1.5); } - .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); } - .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))); } -} - .gap-y-0\.5 { row-gap: calc(var(--spacing) * 0.5); } - .gap-y-1 { row-gap: calc(var(--spacing) * 1); } - .gap-y-2 { row-gap: calc(var(--spacing) * 2); } - .gap-y-3 { row-gap: calc(var(--spacing) * 3); } - .gap-y-4 { row-gap: calc(var(--spacing) * 4); } - .self-center { align-self: center; } - .self-start { align-self: flex-start; } - .self-stretch { align-self: stretch; } - .justify-self-center { justify-self: center; } - .justify-self-end { justify-self: flex-end; } - .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - .overflow-auto { overflow: auto; } - .overflow-hidden { overflow: hidden; } - .overflow-visible\! { overflow: visible !important; } - .overflow-x-auto { overflow-x: auto; } - .overflow-x-clip { overflow-x: clip; } - .overflow-x-hidden { overflow-x: hidden; } - .overflow-y-auto { overflow-y: auto; } - .overscroll-contain { overscroll-behavior: contain; } - .rounded { border-radius: 0.25rem; } - .rounded-\[2px\] { border-radius: 2px; } - .rounded-\[4px\] { border-radius: 4px; } - .rounded-\[calc\(var\(--radius\)-3px\)\] { border-radius: calc(var(--radius) - 3px); } - .rounded-\[inherit\] { border-radius: inherit; } - .rounded-full { border-radius: calc(infinity * 1px); } - .rounded-lg { border-radius: var(--radius); } - .rounded-md { border-radius: calc(var(--radius) - 2px); } - .rounded-none { border-radius: 0px; } - .rounded-sm { border-radius: calc(var(--radius) - 4px); } - .rounded-xl { border-radius: calc(var(--radius) + 4px); } - .rounded-xs { border-radius: var(--radius-xs); } - .rounded-b-none { border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } - .border { border-style: var(--tw-border-style); border-width: 1px; } - .border-0 { border-style: var(--tw-border-style); border-width: 0px; } - .border-2 { border-style: var(--tw-border-style); border-width: 2px; } - .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 { border-top-style: var(--tw-border-style); border-top-width: 1px; } - .border-t-2 { border-top-style: var(--tw-border-style); border-top-width: 2px; } - .border-t-4 { border-top-style: var(--tw-border-style); border-top-width: 4px; } - .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-0 { border-bottom-style: var(--tw-border-style); border-bottom-width: 0px; } - .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-5 { border-left-style: var(--tw-border-style); border-left-width: 5px; } - .border-dashed { --tw-border-style: dashed; border-style: dashed; } - .border-none { --tw-border-style: none; border-style: none; } - .border-border { border-color: var(--border); } - .border-destructive { border-color: var(--destructive); } - .border-destructive\/40 { - border-color: var(--destructive); - @supports (color: color-mix(in lab, red, red)) { - border-color: color-mix(in oklab, var(--destructive) 40%, transparent); -} -} - .border-gray-200 { border-color: var(--color-gray-200); } - .border-input { border-color: var(--input); } - .border-muted-foreground { border-color: var(--muted-foreground); } - .border-muted-foreground\/40 { - border-color: var(--muted-foreground); - @supports (color: color-mix(in lab, red, red)) { - border-color: color-mix(in oklab, var(--muted-foreground) 40%, transparent); -} -} - .border-primary { border-color: var(--primary); } - .border-primary\/30 { - border-color: var(--primary); - @supports (color: color-mix(in lab, red, red)) { - border-color: color-mix(in oklab, var(--primary) 30%, transparent); -} -} - .border-ring { border-color: var(--ring); } - .border-sidebar-border { border-color: var(--sidebar-border); } - .border-transparent { border-color: transparent; } - .border-s-transparent { border-inline-start-color: transparent; } - .border-t-transparent { border-top-color: transparent; } - .border-r-current { border-right-color: currentcolor; } - .border-l-transparent { border-left-color: transparent; } - .bg-accent { background-color: var(--accent); } - .bg-accent\/50 { - background-color: var(--accent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--accent) 50%, transparent); -} -} - .bg-background { background-color: var(--background); } - .bg-background\/70 { - background-color: var(--background); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--background) 70%, transparent); -} -} - .bg-black\/50 { - background-color: color-mix(in srgb, rgb(0, 0, 0), transparent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-black) 50%, transparent); -} -} - .bg-border { background-color: var(--border); } - .bg-card { background-color: var(--card); } - .bg-destructive { background-color: var(--destructive); } - .bg-destructive\/5 { - background-color: var(--destructive); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--destructive) 5%, transparent); -} -} - .bg-destructive\/10 { - background-color: var(--destructive); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--destructive) 10%, transparent); -} -} - .bg-foreground { background-color: var(--foreground); } - .bg-foreground\! { background-color: var(--foreground) !important; } - .bg-green-500 { background-color: var(--color-green-500); } - .bg-input { background-color: var(--input); } - .bg-muted { background-color: var(--muted); } - .bg-muted-foreground\/20 { - background-color: var(--muted-foreground); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--muted-foreground) 20%, transparent); -} -} - .bg-muted\/20 { - background-color: var(--muted); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--muted) 20%, transparent); -} -} - .bg-muted\/60 { - background-color: var(--muted); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--muted) 60%, transparent); -} -} - .bg-muted\/80 { - background-color: var(--muted); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--muted) 80%, transparent); -} -} - .bg-neutral-500 { background-color: var(--color-neutral-500); } - .bg-popover { background-color: var(--popover); } - .bg-primary { background-color: var(--primary); } - .bg-primary\/5 { - background-color: var(--primary); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--primary) 5%, transparent); -} -} - .bg-primary\/10 { - background-color: var(--primary); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--primary) 10%, transparent); -} -} - .bg-primary\/20 { - background-color: var(--primary); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--primary) 20%, transparent); -} -} - .bg-primary\/60 { - background-color: var(--primary); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--primary) 60%, transparent); -} -} - .bg-primary\/95 { - background-color: var(--primary); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--primary) 95%, transparent); -} -} - .bg-red-500 { background-color: var(--color-red-500); } - .bg-red-600\! { background-color: var(--color-red-600) !important; } - .bg-secondary { background-color: var(--secondary); } - .bg-secondary\/25 { - background-color: var(--secondary); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--secondary) 25%, transparent); -} -} - .bg-secondary\/50 { - background-color: var(--secondary); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--secondary) 50%, transparent); -} -} - .bg-sidebar { background-color: var(--sidebar); } - .bg-sidebar-border { background-color: var(--sidebar-border); } - .bg-transparent { background-color: transparent; } - .bg-transparent\! { background-color: transparent !important; } - .bg-white { background-color: var(--color-white); } - .fill-current { fill: currentcolor; } - .stroke-current { stroke: currentcolor; } - .stroke-current\/20 { - stroke: currentcolor; - @supports (color: color-mix(in lab, red, red)) { - stroke: color-mix(currentcolor 20%, transparent); -} -} - .object-contain { object-fit: contain; } - .p-0 { padding: calc(var(--spacing) * 0); } - .p-0\! { padding: calc(var(--spacing) * 0) !important; } - .p-0\.5 { padding: calc(var(--spacing) * 0.5); } - .p-1 { padding: calc(var(--spacing) * 1); } - .p-2 { padding: calc(var(--spacing) * 2); } - .p-3 { padding: calc(var(--spacing) * 3); } - .p-4 { padding: calc(var(--spacing) * 4); } - .p-6 { padding: calc(var(--spacing) * 6); } - .p-px { padding: 1px; } - .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\! { padding-inline: calc(var(--spacing) * 3) !important; } - .px-4 { padding-inline: calc(var(--spacing) * 4); } - .px-6 { padding-inline: calc(var(--spacing) * 6); } - .px-8 { padding-inline: calc(var(--spacing) * 8); } - .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-4 { padding-block: calc(var(--spacing) * 4); } - .py-6 { padding-block: calc(var(--spacing) * 6); } - .py-8 { padding-block: calc(var(--spacing) * 8); } - .ps-2 { padding-inline-start: calc(var(--spacing) * 2); } - .ps-4 { padding-inline-start: calc(var(--spacing) * 4); } - .ps-8 { padding-inline-start: calc(var(--spacing) * 8); } - .pe-1 { padding-inline-end: calc(var(--spacing) * 1); } - .pe-2 { padding-inline-end: calc(var(--spacing) * 2); } - .pe-5 { padding-inline-end: calc(var(--spacing) * 5); } - .pe-8 { padding-inline-end: calc(var(--spacing) * 8); } - .pt-0 { padding-top: calc(var(--spacing) * 0); } - .pt-0\.5 { padding-top: calc(var(--spacing) * 0.5); } - .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); } - .pr-0\.5 { padding-right: calc(var(--spacing) * 0.5); } - .pr-1 { padding-right: calc(var(--spacing) * 1); } - .pr-2 { padding-right: calc(var(--spacing) * 2); } - .pb-0 { padding-bottom: calc(var(--spacing) * 0); } - .pb-0\.5 { padding-bottom: calc(var(--spacing) * 0.5); } - .pb-1 { padding-bottom: calc(var(--spacing) * 1); } - .pb-1\.5 { padding-bottom: calc(var(--spacing) * 1.5); } - .pb-2 { padding-bottom: calc(var(--spacing) * 2); } - .pb-3 { padding-bottom: calc(var(--spacing) * 3); } - .pb-4 { padding-bottom: calc(var(--spacing) * 4); } - .pl-2 { padding-left: calc(var(--spacing) * 2); } - .pl-4 { padding-left: calc(var(--spacing) * 4); } - .text-center { text-align: center; } - .text-end { text-align: end; } - .text-left { text-align: left; } - .text-right { text-align: right; } - .text-start { text-align: start; } - .align-middle { vertical-align: middle; } - .align-sub { vertical-align: sub; } - .font-mono { font-family: monospace; } - .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-8xl { font-size: var(--text-8xl); line-height: var(--tw-leading, var(--text-8xl--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)); } - .leading-none { --tw-leading: 1; line-height: 1; } - .leading-snug { --tw-leading: var(--leading-snug); line-height: var(--leading-snug); } - .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-wide { --tw-tracking: var(--tracking-wide); letter-spacing: var(--tracking-wide); } - .tracking-widest { --tw-tracking: var(--tracking-widest); letter-spacing: var(--tracking-widest); } - .text-balance { text-wrap: balance; } - .text-nowrap { text-wrap: nowrap; } - .break-words { overflow-wrap: break-word; } - .break-all { word-break: break-all; } - .break-keep { word-break: keep-all; } - .text-ellipsis { text-overflow: ellipsis; } - .whitespace-break-spaces { white-space: break-spaces; } - .whitespace-normal { white-space: normal; } - .whitespace-nowrap { white-space: nowrap; } - .whitespace-pre { white-space: pre; } - .whitespace-pre-wrap { white-space: pre-wrap; } - .text-accent-foreground { color: var(--accent-foreground); } - .text-amber-700 { color: var(--color-amber-700); } - .text-background { color: var(--background); } - .text-blue-700 { color: var(--color-blue-700); } - .text-card-foreground { color: var(--card-foreground); } - .text-current { color: currentcolor; } - .text-destructive { color: var(--destructive); } - .text-destructive-foreground { color: var(--destructive-foreground); } - .text-emerald-600 { color: var(--color-emerald-600); } - .text-emerald-700 { color: var(--color-emerald-700); } - .text-foreground { color: var(--foreground); } - .text-foreground\! { color: var(--foreground) !important; } - .text-foreground\/50 { - color: var(--foreground); - @supports (color: color-mix(in lab, red, red)) { - color: color-mix(in oklab, var(--foreground) 50%, transparent); -} -} - .text-foreground\/80 { - color: var(--foreground); - @supports (color: color-mix(in lab, red, red)) { - color: color-mix(in oklab, var(--foreground) 80%, transparent); -} -} - .text-fuchsia-700 { color: var(--color-fuchsia-700); } - .text-green-600 { color: var(--color-green-600); } - .text-lime-700 { color: var(--color-lime-700); } - .text-muted-foreground { color: var(--muted-foreground); } - .text-neutral-500 { color: var(--color-neutral-500); } - .text-orange-600 { color: var(--color-orange-600); } - .text-popover-foreground { color: var(--popover-foreground); } - .text-primary { color: var(--primary); } - .text-primary-foreground { color: var(--primary-foreground); } - .text-primary\/60 { - color: var(--primary); - @supports (color: color-mix(in lab, red, red)) { - color: color-mix(in oklab, var(--primary) 60%, transparent); -} -} - .text-primary\/85 { - color: var(--primary); - @supports (color: color-mix(in lab, red, red)) { - color: color-mix(in oklab, var(--primary) 85%, transparent); -} -} - .text-red-600 { color: var(--color-red-600); } - .text-rose-700 { color: var(--color-rose-700); } - .text-secondary-foreground { color: var(--secondary-foreground); } - .text-sidebar-foreground { color: var(--sidebar-foreground); } - .text-sidebar-foreground\/70 { - color: var(--sidebar-foreground); - @supports (color: color-mix(in lab, red, red)) { - color: color-mix(in oklab, var(--sidebar-foreground) 70%, transparent); -} -} - .text-sky-500 { color: var(--color-sky-500); } - .text-sky-600 { color: var(--color-sky-600); } - .text-transparent { color: transparent; } - .text-white { color: var(--color-white); } - .capitalize { text-transform: capitalize; } - .uppercase { text-transform: uppercase; } - .italic { font-style: italic; } - .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,); } - .underline { text-decoration-line: underline; } - .underline-offset-4 { text-underline-offset: 4px; } - .opacity-0 { opacity: 0; } - .opacity-50 { opacity: 0.5; } - .opacity-70 { opacity: 0.7; } - .opacity-75 { opacity: 0.75; } - .opacity-80 { opacity: 0.8; } - .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-\[0_0_0_1px_var\(--sidebar-border\)\] { --tw-shadow: 0 0 0 1px var(--tw-shadow-color, var(--sidebar-border)); 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-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-0 { --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); } - .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); } - .ring-primary { --tw-ring-color: var(--primary); } - .ring-ring\/10 { - --tw-ring-color: var(--ring); - @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--ring) 10%, transparent); -} -} - .ring-ring\/50 { - --tw-ring-color: var(--ring); - @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); -} -} - .ring-sidebar-ring { --tw-ring-color: var(--sidebar-ring); } - .ring-offset-background { --tw-ring-offset-color: var(--background); } - .outline-hidden { - --tw-outline-style: none; outline-style: none; - @media (forced-colors: active) { - outline: transparent solid 2px; outline-offset: 2px; -} -} - .outline { outline-style: var(--tw-outline-style); outline-width: 1px; } - .outline-ring\/50 { - outline-color: var(--ring); - @supports (color: color-mix(in lab, red, red)) { - outline-color: color-mix(in oklab, var(--ring) 50%, transparent); -} -} - .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,); } - .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,); } - .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } - .transition-\[color\,box-shadow\] { transition-property: color, box-shadow; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } - .transition-\[left\,right\,width\] { transition-property: left, right, width; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } - .transition-\[margin\,opacity\] { transition-property: margin, opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } - .transition-\[stroke-dashoffset\] { transition-property: stroke-dashoffset; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } - .transition-\[width\,height\,padding\] { transition-property: width, height, padding; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } - .transition-\[width\] { transition-property: width; 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; } - .delay-100 { transition-delay: 100ms; } - .duration-0 { --tw-duration: 0ms; transition-duration: 0ms; } - .duration-200 { --tw-duration: 200ms; transition-duration: 200ms; } - .duration-300 { --tw-duration: 300ms; transition-duration: 300ms; } - .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; } - .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-content { contain: content !important; } - .delay-100 { animation-delay: 0.1s; --tw-animation-delay: .1s; } - .fade-in-0 { --tw-enter-opacity: 0; } - .outline-none { --tw-outline-style: none; outline-style: none; } - .select-none { user-select: none; } - .zoom-in-95 { --tw-enter-scale: .95; } - .\[key\:string\] { } - .paused { animation-play-state: paused; } - .running { animation-play-state: running; } - .not-empty\:mt-1 { - &:not(:empty) { margin-top: calc(var(--spacing) * 1); } -} - .not-\[\&\:hover\]\:opacity-30 { - &:not(:hover) { opacity: 0.3; } -} - .not-\[\&\:hover\]\:opacity-50 { - &:not(:hover) { opacity: 0.5; } -} - .group-not-\[\&\:hover\]\/container\:invisible { - &:is(:where(.group\/container):not(:hover) *) { visibility: hidden; } -} - .group-focus-within\/menu-item\:opacity-100 { - &:is(:where(.group\/menu-item):focus-within *) { opacity: 1; } -} - .group-hover\:text-foreground { - &:is(:where(.group):hover *) { - @media (hover: hover) { - color: var(--foreground); -} -} -} - .group-hover\/menu-item\:opacity-100 { - &:is(:where(.group\/menu-item):hover *) { - @media (hover: hover) { - opacity: 1; -} -} -} - .group-hover\/sense\:visible { - &:is(:where(.group\/sense):hover *) { - @media (hover: hover) { - visibility: visible; -} -} -} - .group-hover\/sense\:opacity-100 { - &:is(:where(.group\/sense):hover *) { - @media (hover: hover) { - opacity: 1; -} -} -} - .group-has-data-placeholder\:hidden { - &:is(:where(.group):has([data-placeholder]) *) { display: none; } -} - .group-has-data-\[sidebar\=menu-action\]\/menu-item\:pe-8 { - &:is(:where(.group\/menu-item):has([data-sidebar="menu-action"]) *) { padding-inline-end: calc(var(--spacing) * 8); } -} - .group-has-\[\>input\]\/input-group\:pt-2 { - &:is(:where(.group\/input-group):has(> input) *) { padding-top: calc(var(--spacing) * 2); } -} - .group-has-\[\>input\]\/input-group\:pb-2 { - &:is(:where(.group\/input-group):has(> input) *) { padding-bottom: calc(var(--spacing) * 2); } -} - .group-data-\[collapsible\=icon\]\:-mt-8 { - &:is(:where(.group)[data-collapsible="icon"] *) { margin-top: calc(var(--spacing) * -8); } -} - .group-data-\[collapsible\=icon\]\:hidden { - &:is(:where(.group)[data-collapsible="icon"] *) { display: none; } -} - .group-data-\[collapsible\=icon\]\:size-8\! { - &:is(:where(.group)[data-collapsible="icon"] *) { width: calc(var(--spacing) * 8) !important; height: calc(var(--spacing) * 8) !important; } -} - .group-data-\[collapsible\=icon\]\:w-\(--sidebar-width-icon\) { - &:is(:where(.group)[data-collapsible="icon"] *) { width: var(--sidebar-width-icon); } -} - .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\+2px\)\] { - &:is(:where(.group)[data-collapsible="icon"] *) { width: calc(var(--sidebar-width-icon) + (calc(var(--spacing) * 4)) + 2px); } -} - .group-data-\[collapsible\=icon\]\:overflow-hidden { - &:is(:where(.group)[data-collapsible="icon"] *) { overflow: hidden; } -} - .group-data-\[collapsible\=icon\]\:p-0\! { - &:is(:where(.group)[data-collapsible="icon"] *) { padding: calc(var(--spacing) * 0) !important; } -} - .group-data-\[collapsible\=icon\]\:p-2\! { - &:is(:where(.group)[data-collapsible="icon"] *) { padding: calc(var(--spacing) * 2) !important; } -} - .group-data-\[collapsible\=icon\]\:opacity-0 { - &:is(:where(.group)[data-collapsible="icon"] *) { opacity: 0; } -} - .group-data-\[collapsible\=offcanvas\]\:inset-s-\[calc\(var\(--sidebar-width\)\*-1\)\] { - &:is(:where(.group)[data-collapsible="offcanvas"] *) { inset-inline-start: calc(var(--sidebar-width) * -1); } -} - .group-data-\[collapsible\=offcanvas\]\:inset-e-\[calc\(var\(--sidebar-width\)\*-1\)\] { - &:is(:where(.group)[data-collapsible="offcanvas"] *) { inset-inline-end: calc(var(--sidebar-width) * -1); } -} - .group-data-\[collapsible\=offcanvas\]\:w-0 { - &:is(:where(.group)[data-collapsible="offcanvas"] *) { width: calc(var(--spacing) * 0); } -} - .group-data-\[collapsible\=offcanvas\]\:translate-x-0 { - &:is(:where(.group)[data-collapsible="offcanvas"] *) { --tw-translate-x: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); } -} - .group-data-\[disabled\=true\]\:pointer-events-none { - &:is(:where(.group)[data-disabled="true"] *) { pointer-events: none; } -} - .group-data-\[disabled\=true\]\:opacity-50 { - &:is(:where(.group)[data-disabled="true"] *) { opacity: 0.5; } -} - .group-data-\[disabled\=true\]\/input-group\:opacity-50 { - &:is(:where(.group\/input-group)[data-disabled="true"] *) { opacity: 0.5; } -} - .group-data-\[side\=left\]\:-inset-e-4 { - &:is(:where(.group)[data-side="left"] *) { inset-inline-end: calc(var(--spacing) * -4); } -} - .group-data-\[side\=left\]\:border-e { - &:is(:where(.group)[data-side="left"] *) { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 1px; } -} - .group-data-\[side\=right\]\:inset-s-0 { - &:is(:where(.group)[data-side="right"] *) { inset-inline-start: calc(var(--spacing) * 0); } -} - .group-data-\[side\=right\]\:rotate-180 { - &:is(:where(.group)[data-side="right"] *) { rotate: 180deg; } -} - .group-data-\[side\=right\]\:border-s { - &:is(:where(.group)[data-side="right"] *) { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 1px; } -} - .group-data-\[variant\=floating\]\:rounded-lg { - &:is(:where(.group)[data-variant="floating"] *) { border-radius: var(--radius); } -} - .group-data-\[variant\=floating\]\:border { - &:is(:where(.group)[data-variant="floating"] *) { border-style: var(--tw-border-style); border-width: 1px; } -} - .group-data-\[variant\=floating\]\:border-sidebar-border { - &:is(:where(.group)[data-variant="floating"] *) { border-color: var(--sidebar-border); } -} - .group-data-\[variant\=floating\]\:shadow-sm { - &:is(:where(.group)[data-variant="floating"] *) { --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); } -} - .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:block { - &:is(:where(.group\/drawer-content)[data-vaul-drawer-direction="bottom"] *) { display: block; } -} - .group-\[\.toast\]\:bg-muted\! { - &:is(:where(.group):is(.toast) *) { background-color: var(--muted) !important; } -} - .group-\[\.toast\]\:bg-primary\! { - &:is(:where(.group):is(.toast) *) { background-color: var(--primary) !important; } -} - .group-\[\.toast\]\:text-muted-foreground\! { - &:is(:where(.group):is(.toast) *) { color: var(--muted-foreground) !important; } -} - .group-\[\.toast\]\:text-primary-foreground\! { - &:is(:where(.group):is(.toast) *) { color: var(--primary-foreground) !important; } -} - .group-\[\.toast\[data-promise\=\"true\"\]\[data-type\=\"loading\"\]\]\:hidden\! { - &:is(:where(.group):is(.toast[data-promise="true"][data-type="loading"]) *) { display: none !important; } -} - .group-\[\.toast\[data-type\=\"error\"\]\]\:i-mdi-content-copy { - &:is(:where(.group):is(.toast[data-type="error"]) *) { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19 21H8V7h11m0-2H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2m-3-4H4a2 2 0 0 0-2 2v14h2V3h12z'/%3E%3C/svg%3E"); } -} - .group-\[\.toaster\]\:border-border\! { - &:is(:where(.group):is(.toaster) *) { border-color: var(--border) !important; } -} - .group-\[\.toaster\]\:bg-background\! { - &:is(:where(.group):is(.toaster) *) { background-color: var(--background) !important; } -} - .group-\[\.toaster\]\:shadow-lg { - &:is(:where(.group):is(.toaster) *) { --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-\[\&\:not\(\[data-selected\]\)\]\:border-transparent { - &:is(:where(.group):not([data-selected]) *) { border-color: transparent; } -} - .peer-hover\/menu-button\:text-sidebar-accent-foreground { - &:is(:where(.peer\/menu-button):hover ~ *) { - @media (hover: hover) { - color: var(--sidebar-accent-foreground); -} -} -} - .peer-disabled\:cursor-not-allowed { - &:is(:where(.peer):disabled ~ *) { cursor: not-allowed; } -} - .peer-disabled\:opacity-50 { - &:is(:where(.peer):disabled ~ *) { opacity: 0.5; } -} - .peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground { - &:is(:where(.peer\/menu-button)[data-active="true"] ~ *) { color: var(--sidebar-accent-foreground); } -} - .peer-data-\[size\=default\]\/menu-button\:top-1\.5 { - &:is(:where(.peer\/menu-button)[data-size="default"] ~ *) { top: calc(var(--spacing) * 1.5); } -} - .peer-data-\[size\=lg\]\/menu-button\:top-2\.5 { - &:is(:where(.peer\/menu-button)[data-size="lg"] ~ *) { top: calc(var(--spacing) * 2.5); } -} - .peer-data-\[size\=sm\]\/menu-button\:top-1 { - &:is(:where(.peer\/menu-button)[data-size="sm"] ~ *) { top: calc(var(--spacing) * 1); } -} - .selection\:bg-primary { - & ::selection { background-color: var(--primary); } - &::selection { background-color: var(--primary); } -} - .selection\:text-primary-foreground { - & ::selection { color: var(--primary-foreground); } - &::selection { color: var(--primary-foreground); } -} - .placeholder\:text-muted-foreground { - &::placeholder { color: var(--muted-foreground); } -} - .after\:absolute { - &::after { content: var(--tw-content); position: absolute; } -} - .after\:-inset-2 { - &::after { content: var(--tw-content); inset: calc(var(--spacing) * -2); } -} - .after\:inset-y-0 { - &::after { content: var(--tw-content); inset-block: calc(var(--spacing) * 0); } -} - .after\:inset-s-1\/2 { - &::after { content: var(--tw-content); inset-inline-start: calc(50%); } -} - .after\:inset-s-\[calc\(1\/2\*100\%-1px\)\] { - &::after { content: var(--tw-content); inset-inline-start: calc(50% - 1px); } -} - .after\:top-1\/2 { - &::after { content: var(--tw-content); top: calc(50%); } -} - .after\:right-0 { - &::after { content: var(--tw-content); right: calc(var(--spacing) * 0); } -} - .after\:block { - &::after { content: var(--tw-content); display: block; } -} - .after\:h-8 { - &::after { content: var(--tw-content); height: calc(var(--spacing) * 8); } -} - .after\:h-12 { - &::after { content: var(--tw-content); height: calc(var(--spacing) * 12); } -} - .after\:w-1 { - &::after { content: var(--tw-content); width: calc(var(--spacing) * 1); } -} - .after\:w-\[2px\] { - &::after { content: var(--tw-content); width: 2px; } -} - .after\:w-\[6px\] { - &::after { content: var(--tw-content); width: 6px; } -} - .after\:-translate-x-1\/2 { - &::after { content: var(--tw-content); --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } -} - .after\:-translate-x-px { - &::after { content: var(--tw-content); --tw-translate-x: -1px; translate: var(--tw-translate-x) var(--tw-translate-y); } -} - .after\:-translate-y-1\/2 { - &::after { content: var(--tw-content); --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } -} - .after\:rounded-full { - &::after { content: var(--tw-content); border-radius: calc(infinity * 1px); } -} - .after\:bg-border { - &::after { content: var(--tw-content); background-color: var(--border); } -} - .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)); } -} - .group-data-\[collapsible\=offcanvas\]\:after\:start-full { - &:is(:where(.group)[data-collapsible="offcanvas"] *) { - &::after { content: var(--tw-content); inset-inline-start: 100%; } -} -} - .last\:border-b-0 { - &:last-child { border-bottom-style: var(--tw-border-style); border-bottom-width: 0px; } -} - .hover\:z-10 { - &:hover { - @media (hover: hover) { - z-index: 10; -} -} -} - .hover\:min-w-max { - &:hover { - @media (hover: hover) { - min-width: max-content; -} -} -} - .hover\:bg-accent { - &:hover { - @media (hover: hover) { - background-color: var(--accent); -} -} -} - .hover\:bg-accent\/50 { - &:hover { - @media (hover: hover) { - background-color: var(--accent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--accent) 50%, transparent); -} -} -} -} - .hover\:bg-destructive\/20\! { - &:hover { - @media (hover: hover) { - background-color: var(--destructive) !important; - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--destructive) 20%, transparent) !important; -} -} -} -} - .hover\:bg-destructive\/90 { - &:hover { - @media (hover: hover) { - background-color: var(--destructive); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--destructive) 90%, transparent); -} -} -} -} - .hover\:bg-muted { - &:hover { - @media (hover: hover) { - background-color: var(--muted); -} -} -} - .hover\:bg-muted\/30 { - &:hover { - @media (hover: hover) { - background-color: var(--muted); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--muted) 30%, transparent); -} -} -} -} - .hover\:bg-primary\/10 { - &:hover { - @media (hover: hover) { - background-color: var(--primary); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--primary) 10%, transparent); -} -} -} -} - .hover\:bg-primary\/15 { - &:hover { - @media (hover: hover) { - background-color: var(--primary); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--primary) 15%, transparent); -} -} -} -} - .hover\:bg-primary\/20 { - &:hover { - @media (hover: hover) { - background-color: var(--primary); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--primary) 20%, transparent); -} -} -} -} - .hover\:bg-primary\/90 { - &:hover { - @media (hover: hover) { - background-color: var(--primary); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--primary) 90%, transparent); -} -} -} -} - .hover\:bg-secondary\/80 { - &:hover { - @media (hover: hover) { - background-color: var(--secondary); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--secondary) 80%, transparent); -} -} -} -} - .hover\:bg-sidebar-accent { - &:hover { - @media (hover: hover) { - background-color: var(--sidebar-accent); -} -} -} - .hover\:bg-transparent { - &:hover { - @media (hover: hover) { - background-color: transparent; -} -} -} - .hover\:text-accent-foreground { - &:hover { - @media (hover: hover) { - color: var(--accent-foreground); -} -} -} - .hover\:text-destructive { - &:hover { - @media (hover: hover) { - color: var(--destructive); -} -} -} - .hover\:text-foreground { - &:hover { - @media (hover: hover) { - color: var(--foreground); -} -} -} - .hover\:text-muted-foreground { - &:hover { - @media (hover: hover) { - color: var(--muted-foreground); -} -} -} - .hover\:text-primary { - &:hover { - @media (hover: hover) { - color: var(--primary); -} -} -} - .hover\:text-sidebar-accent-foreground { - &:hover { - @media (hover: hover) { - color: var(--sidebar-accent-foreground); -} -} -} - .hover\:underline { - &:hover { - @media (hover: hover) { - text-decoration-line: underline; -} -} -} - .hover\:opacity-100 { - &:hover { - @media (hover: hover) { - opacity: 1; -} -} -} - .hover\:shadow-\[0_0_0_1px_var\(--sidebar-accent\)\] { - &:hover { - @media (hover: hover) { - --tw-shadow: 0 0 0 1px var(--tw-shadow-color, var(--sidebar-accent)); 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-none { - &:hover { - @media (hover: hover) { - --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); -} -} -} - .hover\:ring-4 { - &:hover { - @media (hover: hover) { - --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); -} -} -} - .hover\:brightness-90 { - &:hover { - @media (hover: hover) { - --tw-brightness: brightness(90%); 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,); -} -} -} - .hover\:delay-300 { - &:hover { - @media (hover: hover) { - transition-delay: 300ms; -} -} -} - .hover\:delay-300 { - &:hover { - @media (hover: hover) { - animation-delay: 0.3s; --tw-animation-delay: .3s; -} -} -} - .hover\:group-data-\[collapsible\=offcanvas\]\:bg-sidebar { - &:hover { - @media (hover: hover) { - &:is(:where(.group)[data-collapsible="offcanvas"] *) { background-color: var(--sidebar); } -} -} -} - .after\:hover\:h-10 { - &::after { - content: var(--tw-content); - &:hover { - @media (hover: hover) { - height: calc(var(--spacing) * 10); -} -} -} -} - .hover\:after\:bg-sidebar-border { - &:hover { - @media (hover: hover) { - &::after { content: var(--tw-content); background-color: var(--sidebar-border); } -} -} -} - .focus\:border-ring { - &:focus { border-color: var(--ring); } -} - .focus\:bg-accent { - &:focus { background-color: var(--accent); } -} - .focus\:text-accent-foreground { - &:focus { color: var(--accent-foreground); } -} - .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-\[3px\] { - &:focus { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } -} - .focus\:ring-ring { - &:focus { --tw-ring-color: var(--ring); } -} - .focus\:ring-ring\/50 { - &:focus { - --tw-ring-color: var(--ring); - @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); -} -} -} - .focus\:outline-none { - &:focus { --tw-outline-style: none; outline-style: none; } -} - .focus-visible\:border-ring { - &:focus-visible { border-color: var(--ring); } -} - .focus-visible\:ring-0 { - &:focus-visible { --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-visible\:ring-1 { - &:focus-visible { --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-visible\:ring-2 { - &:focus-visible { --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-visible\:ring-4 { - &:focus-visible { --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); } -} - .focus-visible\:ring-\[3px\] { - &:focus-visible { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } -} - .focus-visible\:ring-destructive\/20 { - &:focus-visible { - --tw-ring-color: var(--destructive); - @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent); -} -} -} - .focus-visible\:ring-ring { - &:focus-visible { --tw-ring-color: var(--ring); } -} - .focus-visible\:ring-ring\/50 { - &:focus-visible { - --tw-ring-color: var(--ring); - @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); -} -} -} - .focus-visible\:ring-offset-1 { - &:focus-visible { --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-visible\:ring-offset-2 { - &:focus-visible { --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-visible\:outline-hidden { - &:focus-visible { - --tw-outline-style: none; outline-style: none; - @media (forced-colors: active) { - outline: transparent solid 2px; outline-offset: 2px; -} -} -} - .focus-visible\:outline-1 { - &: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-ring { - &:focus-visible { outline-color: var(--ring); } -} - .focus-visible\:outline-none { - &:focus-visible { --tw-outline-style: none; outline-style: none; } -} - .active\:bg-sidebar-accent { - &:active { background-color: var(--sidebar-accent); } -} - .active\:text-sidebar-accent-foreground { - &:active { color: var(--sidebar-accent-foreground); } -} - .disabled\:pointer-events-none { - &:disabled { pointer-events: none; } -} - .disabled\:cursor-default { - &:disabled { cursor: default; } -} - .disabled\:cursor-not-allowed { - &:disabled { cursor: not-allowed; } -} - .disabled\:border-transparent { - &:disabled { border-color: transparent; } -} - .disabled\:bg-transparent { - &:disabled { background-color: transparent; } -} - .disabled\:opacity-50 { - &:disabled { opacity: 0.5; } -} - .disabled\:opacity-100 { - &:disabled { opacity: 1; } -} - .disabled\:contrast-\[0\.8\] { - &:disabled { --tw-contrast: contrast(0.8); 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,); } -} - .in-data-\[side\=left\]\:cursor-w-resize { - :where([data-side="left"]) & { cursor: w-resize; } -} - .in-data-\[side\=right\]\:cursor-e-resize { - :where([data-side="right"]) & { cursor: e-resize; } -} - .in-data-\[slot\=combobox-content\]\:focus-within\:border-inherit { - :where([data-slot="combobox-content"]) & { - &:focus-within { border-color: inherit; } -} -} - .in-data-\[slot\=combobox-content\]\:focus-within\:ring-0 { - :where([data-slot="combobox-content"]) & { - &:focus-within { --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); } -} -} - .has-disabled\:cursor-not-allowed { - &:has(:disabled) { cursor: not-allowed; } -} - .has-disabled\:bg-input\/50 { - &:has(:disabled) { - background-color: var(--input); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--input) 50%, transparent); -} -} -} - .has-disabled\:opacity-50 { - &:has(:disabled) { opacity: 0.5; } -} - .has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\] { - &:has([data-slot="card-action"]) { grid-template-columns: 1fr auto; } -} - .has-data-\[variant\=inset\]\:bg-sidebar { - &:has([data-variant="inset"]) { background-color: var(--sidebar); } -} - .has-\[\.real-input\:focus-visible\]\:border-ring { - &:has(:is(.real-input:focus-visible)) { border-color: var(--ring); } -} - .has-\[\.real-input\:focus-visible\]\:ring-\[3px\] { - &:has(:is(.real-input:focus-visible)) { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } -} - .has-\[\.real-input\:focus-visible\]\:ring-ring\/50 { - &:has(:is(.real-input:focus-visible)) { - --tw-ring-color: var(--ring); - @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); -} -} -} - .has-\[\.real-input\[aria-invalid\=true\]\]\:border-destructive { - &:has(:is(.real-input[aria-invalid="true"])) { border-color: var(--destructive); } -} - .has-\[\.real-input\[aria-invalid\=true\]\]\:ring-destructive\/20 { - &:has(:is(.real-input[aria-invalid="true"])) { - --tw-ring-color: var(--destructive); - @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent); -} -} -} - .has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:border-ring { - &:has(:is([data-slot="input-group-control"]:focus-visible)) { border-color: var(--ring); } -} - .has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-3 { - &:has(:is([data-slot="input-group-control"]:focus-visible)) { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } -} - .has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-ring\/50 { - &:has(:is([data-slot="input-group-control"]:focus-visible)) { - --tw-ring-color: var(--ring); - @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); -} -} -} - .has-\[\[data-slot\]\[aria-invalid\=true\]\]\:border-destructive { - &:has(:is([data-slot][aria-invalid="true"])) { border-color: var(--destructive); } -} - .has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-3 { - &:has(:is([data-slot][aria-invalid="true"])) { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } -} - .has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/20 { - &:has(:is([data-slot][aria-invalid="true"])) { - --tw-ring-color: var(--destructive); - @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent); -} -} -} - .has-\[\>\.icon-wrapper\:first-child\>\:first-child\[class\*\=\"i-mdi-\"\]\]\:ps-1\.5 { - &:has(> .icon-wrapper:first-child > :first-child[class*="i-mdi-"]) { padding-inline-start: calc(var(--spacing) * 1.5); } -} - .has-\[\>\.icon-wrapper\:first-child\>\:first-child\[class\*\=\"i-mdi-\"\]\]\:ps-2 { - &:has(> .icon-wrapper:first-child > :first-child[class*="i-mdi-"]) { padding-inline-start: calc(var(--spacing) * 2); } -} - .has-\[\>\.icon-wrapper\:first-child\>\:first-child\[class\*\=\"i-mdi-\"\]\]\:ps-6 { - &:has(> .icon-wrapper:first-child > :first-child[class*="i-mdi-"]) { padding-inline-start: calc(var(--spacing) * 6); } -} - .has-\[\>\:last-child\[class\*\=\"i-mdi-\"\]\]\:pe-1\.5 { - &:has(> :last-child[class*="i-mdi-"]) { padding-inline-end: calc(var(--spacing) * 1.5); } -} - .has-\[\>\:last-child\[class\*\=\"i-mdi-\"\]\]\:pe-2 { - &:has(> :last-child[class*="i-mdi-"]) { padding-inline-end: calc(var(--spacing) * 2); } -} - .has-\[\>\:last-child\[class\*\=\"i-mdi-\"\]\]\:pe-6 { - &:has(> :last-child[class*="i-mdi-"]) { padding-inline-end: calc(var(--spacing) * 6); } -} - .has-\[\>\[class\*\=\"i-mdi-\"\]\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\] { - &:has(> [class*="i-mdi-"]) { grid-template-columns: calc(var(--spacing) * 4) 1fr; } -} - .has-\[\>\[class\*\=\"i-mdi-\"\]\]\:gap-x-3 { - &:has(> [class*="i-mdi-"]) { column-gap: calc(var(--spacing) * 3); } -} - .has-\[\>\[data-align\=block-end\]\]\:h-auto { - &:has(> [data-align="block-end"]) { height: auto; } -} - .has-\[\>\[data-align\=block-end\]\]\:flex-col { - &:has(> [data-align="block-end"]) { flex-direction: column; } -} - .has-\[\>\[data-align\=block-start\]\]\:h-auto { - &:has(> [data-align="block-start"]) { height: auto; } -} - .has-\[\>\[data-align\=block-start\]\]\:flex-col { - &:has(> [data-align="block-start"]) { flex-direction: column; } -} - .has-\[\>\[data-slot\=button-group\]\]\:gap-2 { - &:has(> [data-slot="button-group"]) { gap: calc(var(--spacing) * 2); } -} - .has-\[\>button\]\:mr-\[-0\.3rem\] { - &:has(> button) { margin-right: -0.3rem; } -} - .has-\[\>button\]\:ml-\[-0\.3rem\] { - &:has(> button) { margin-left: -0.3rem; } -} - .has-\[\>kbd\]\:mr-\[-0\.15rem\] { - &:has(> kbd) { margin-right: -0.15rem; } -} - .has-\[\>kbd\]\:ml-\[-0\.15rem\] { - &:has(> kbd) { margin-left: -0.15rem; } -} - .has-\[\>svg\]\:p-0 { - &:has(> svg) { padding: calc(var(--spacing) * 0); } -} - .has-\[\>textarea\]\:h-auto { - &:has(> textarea) { height: auto; } -} - .aria-disabled\:pointer-events-none { - &[aria-disabled="true"] { pointer-events: none; } -} - .aria-disabled\:opacity-50 { - &[aria-disabled="true"] { opacity: 0.5; } -} - .aria-invalid\:border-destructive { - &[aria-invalid="true"] { border-color: var(--destructive); } -} - .aria-invalid\:ring-0 { - &[aria-invalid="true"] { --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); } -} - .aria-invalid\:ring-destructive\/20 { - &[aria-invalid="true"] { - --tw-ring-color: var(--destructive); - @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent); -} -} -} - .aria-selected\:border-l-primary { - &[aria-selected="true"] { border-left-color: var(--primary); } -} - .aria-selected\:bg-accent { - &[aria-selected="true"] { background-color: var(--accent); } -} - .aria-selected\:bg-primary\/15 { - &[aria-selected="true"] { - background-color: var(--primary); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--primary) 15%, transparent); -} -} -} - .aria-selected\:text-accent-foreground { - &[aria-selected="true"] { color: var(--accent-foreground); } -} - .\*\*\:data-command-group\:px-2 { - :is(& *) { - &[data-command-group] { padding-inline: calc(var(--spacing) * 2); } -} -} - .\*\*\:data-command-input\:h-12 { - :is(& *) { - &[data-command-input] { height: calc(var(--spacing) * 12); } -} -} - .\*\*\:data-command-item\:px-2 { - :is(& *) { - &[data-command-item] { padding-inline: calc(var(--spacing) * 2); } -} -} - .\*\*\:data-command-item\:py-3 { - :is(& *) { - &[data-command-item] { padding-block: calc(var(--spacing) * 3); } -} -} - .data-highlighted\:bg-accent { - &[data-highlighted] { background-color: var(--accent); } -} - .data-highlighted\:text-accent-foreground { - &[data-highlighted] { color: var(--accent-foreground); } -} - .data-inset\:ps-8 { - &[data-inset] { padding-inline-start: calc(var(--spacing) * 8); } -} - .data-placeholder\:text-muted-foreground { - &[data-placeholder] { color: var(--muted-foreground); } -} - .data-\[active\=true\]\:bg-sidebar-accent { - &[data-active="true"] { background-color: var(--sidebar-accent); } -} - .data-\[active\=true\]\:font-medium { - &[data-active="true"] { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } -} - .data-\[active\=true\]\:text-sidebar-accent-foreground { - &[data-active="true"] { color: var(--sidebar-accent-foreground); } -} - .data-\[direction\=vertical\]\:h-px { - &[data-direction="vertical"] { height: 1px; } -} - .data-\[direction\=vertical\]\:w-full { - &[data-direction="vertical"] { width: 100%; } -} - .data-\[direction\=vertical\]\:flex-col { - &[data-direction="vertical"] { flex-direction: column; } -} - .data-\[direction\=vertical\]\:after\:inset-s-0 { - &[data-direction="vertical"] { - &::after { content: var(--tw-content); inset-inline-start: calc(var(--spacing) * 0); } -} -} - .data-\[direction\=vertical\]\:after\:h-1 { - &[data-direction="vertical"] { - &::after { content: var(--tw-content); height: calc(var(--spacing) * 1); } -} -} - .data-\[direction\=vertical\]\:after\:w-full { - &[data-direction="vertical"] { - &::after { content: var(--tw-content); width: 100%; } -} -} - .data-\[direction\=vertical\]\:after\:translate-x-0 { - &[data-direction="vertical"] { - &::after { content: var(--tw-content); --tw-translate-x: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); } -} -} - .data-\[direction\=vertical\]\:after\:-translate-y-1\/2 { - &[data-direction="vertical"] { - &::after { content: var(--tw-content); --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } -} -} - .data-\[disabled\=true\]\:pointer-events-none { - &[data-disabled="true"] { pointer-events: none; } -} - .data-\[disabled\=true\]\:opacity-50 { - &[data-disabled="true"] { opacity: 0.5; } -} - .data-\[expanded\=\"true\"\]\:h-max\! { - &[data-expanded="true"] { height: max-content !important; } -} - .data-\[expanded\=\"true\"\]\:max-h-max { - &[data-expanded="true"] { max-height: max-content; } -} - .data-\[orientation\=horizontal\]\:mx-px { - &[data-orientation="horizontal"] { margin-inline: 1px; } -} - .data-\[orientation\=horizontal\]\:h-1\.5 { - &[data-orientation="horizontal"] { height: calc(var(--spacing) * 1.5); } -} - .data-\[orientation\=horizontal\]\:h-full { - &[data-orientation="horizontal"] { height: 100%; } -} - .data-\[orientation\=horizontal\]\:h-px { - &[data-orientation="horizontal"] { height: 1px; } -} - .data-\[orientation\=horizontal\]\:w-auto { - &[data-orientation="horizontal"] { width: auto; } -} - .data-\[orientation\=horizontal\]\:w-full { - &[data-orientation="horizontal"] { width: 100%; } -} - .data-\[orientation\=vertical\]\:my-px { - &[data-orientation="vertical"] { margin-block: 1px; } -} - .data-\[orientation\=vertical\]\:h-auto { - &[data-orientation="vertical"] { height: auto; } -} - .data-\[orientation\=vertical\]\:h-full { - &[data-orientation="vertical"] { height: 100%; } -} - .data-\[orientation\=vertical\]\:min-h-44 { - &[data-orientation="vertical"] { min-height: calc(var(--spacing) * 44); } -} - .data-\[orientation\=vertical\]\:w-1\.5 { - &[data-orientation="vertical"] { width: calc(var(--spacing) * 1.5); } -} - .data-\[orientation\=vertical\]\:w-auto { - &[data-orientation="vertical"] { width: auto; } -} - .data-\[orientation\=vertical\]\:w-full { - &[data-orientation="vertical"] { width: 100%; } -} - .data-\[orientation\=vertical\]\:w-px { - &[data-orientation="vertical"] { width: 1px; } -} - .data-\[orientation\=vertical\]\:flex-col { - &[data-orientation="vertical"] { flex-direction: column; } -} - .data-\[side\=bottom\]\:-translate-x-1\/2 { - &[data-side="bottom"] { --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } -} - .data-\[side\=bottom\]\:-translate-y-\[calc\(-50\%\+1px\)\] { - &[data-side="bottom"] { --tw-translate-y: calc(calc(-50% + 1px) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } -} - .data-\[side\=bottom\]\:translate-y-1 { - &[data-side="bottom"] { --tw-translate-y: calc(var(--spacing) * 1); translate: var(--tw-translate-x) var(--tw-translate-y); } -} - .data-\[side\=bottom\]\:slide-in-from-top-2 { - &[data-side="bottom"] { --tw-enter-translate-y: calc(2*var(--spacing)*-1); } -} - .data-\[side\=left\]\:-translate-x-1 { - &[data-side="left"] { --tw-translate-x: calc(var(--spacing) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } -} - .data-\[side\=left\]\:-translate-y-\[calc\(50\%-3px\)\] { - &[data-side="left"] { --tw-translate-y: calc(calc(50% - 3px) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } -} - .data-\[side\=left\]\:slide-in-from-end-2 { - &[data-side="left"] { - &:where(:dir(ltr), [dir="ltr"]) { --tw-enter-translate-x: calc(2*var(--spacing)); } - &:where(:dir(rtl), [dir="rtl"]) { --tw-enter-translate-x: calc(2*var(--spacing)*-1); } -} -} - .data-\[side\=right\]\:translate-x-1 { - &[data-side="right"] { --tw-translate-x: calc(var(--spacing) * 1); translate: var(--tw-translate-x) var(--tw-translate-y); } -} - .data-\[side\=right\]\:translate-x-\[calc\(50\%\+2px\)\] { - &[data-side="right"] { --tw-translate-x: calc(50% + 2px); translate: var(--tw-translate-x) var(--tw-translate-y); } -} - .data-\[side\=right\]\:translate-y-1\/2 { - &[data-side="right"] { --tw-translate-y: calc(1 / 2 * 100%); translate: var(--tw-translate-x) var(--tw-translate-y); } -} - .data-\[side\=right\]\:slide-in-from-start-2 { - &[data-side="right"] { - &:where(:dir(ltr), [dir="ltr"]) { --tw-enter-translate-x: calc(2*var(--spacing)*-1); } - &:where(:dir(rtl), [dir="rtl"]) { --tw-enter-translate-x: calc(2*var(--spacing)); } -} -} - .data-\[side\=top\]\:translate-x-1\/2 { - &[data-side="top"] { --tw-translate-x: calc(1 / 2 * 100%); translate: var(--tw-translate-x) var(--tw-translate-y); } -} - .data-\[side\=top\]\:-translate-y-1 { - &[data-side="top"] { --tw-translate-y: calc(var(--spacing) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } -} - .data-\[side\=top\]\:translate-y-\[calc\(-50\%\+2px\)\] { - &[data-side="top"] { --tw-translate-y: calc(-50% + 2px); translate: var(--tw-translate-x) var(--tw-translate-y); } -} - .data-\[side\=top\]\:slide-in-from-bottom-2 { - &[data-side="top"] { --tw-enter-translate-y: calc(2*var(--spacing)); } -} - .data-\[size\=default\]\:h-10 { - &[data-size="default"] { height: calc(var(--spacing) * 10); } -} - .data-\[size\=sm\]\:h-9 { - &[data-size="sm"] { height: calc(var(--spacing) * 9); } -} - .\*\:data-\[slot\=alert-description\]\:text-current { - :is(& > *) { - &[data-slot="alert-description"] { color: currentcolor; } -} -} - .\*\*\:data-\[slot\=command-input-wrapper\]\:h-12 { - :is(& *) { - &[data-slot="command-input-wrapper"] { height: calc(var(--spacing) * 12); } -} -} - .\*\:data-\[slot\=select-value\]\:line-clamp-1 { - :is(& > *) { - &[data-slot="select-value"] { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } -} -} - .\*\:data-\[slot\=select-value\]\:flex { - :is(& > *) { - &[data-slot="select-value"] { display: flex; } -} -} - .\*\:data-\[slot\=select-value\]\:items-center { - :is(& > *) { - &[data-slot="select-value"] { align-items: center; } -} -} - .\*\:data-\[slot\=select-value\]\:gap-2 { - :is(& > *) { - &[data-slot="select-value"] { gap: calc(var(--spacing) * 2); } -} -} - .data-\[state\=active\]\:bg-background { - &[data-state="active"] { background-color: var(--background); } -} - .data-\[state\=active\]\:shadow-sm { - &[data-state="active"] { --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); } -} - .data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\] { - &[data-state="checked"] { --tw-translate-x: calc(100% - 2px); translate: var(--tw-translate-x) var(--tw-translate-y); } -} - .data-\[state\=checked\]\:border-primary { - &[data-state="checked"] { border-color: var(--primary); } -} - .data-\[state\=checked\]\:bg-primary { - &[data-state="checked"] { background-color: var(--primary); } -} - .data-\[state\=checked\]\:text-primary-foreground { - &[data-state="checked"] { color: var(--primary-foreground); } -} - .data-\[state\=closed\]\:animate-accordion-up { - &[data-state="closed"] { animation: accordion-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); } -} - .data-\[state\=closed\]\:animate-collapsible-up { - &[data-state="closed"] { animation: collapsible-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); } -} - .data-\[state\=closed\]\:animate-out { - &[data-state="closed"] { animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); } -} - .data-\[state\=closed\]\:duration-300 { - &[data-state="closed"] { --tw-duration: 300ms; transition-duration: 300ms; } -} - .data-\[state\=closed\]\:fade-out-0 { - &[data-state="closed"] { --tw-exit-opacity: 0; } -} - .data-\[state\=closed\]\:slide-out-to-end { - &[data-state="closed"] { - &:dir(ltr) { --tw-exit-translate-x: 100%; } - &:dir(rtl) { --tw-exit-translate-x: -100%; } -} -} - .data-\[state\=closed\]\:slide-out-to-start { - &[data-state="closed"] { - &:dir(ltr) { --tw-exit-translate-x: -100%; } - &:dir(rtl) { --tw-exit-translate-x: 100%; } -} -} - .data-\[state\=closed\]\:zoom-out-95 { - &[data-state="closed"] { --tw-exit-scale: .95; } -} - .data-\[state\=closed\]\:slide-out-to-bottom { - &[data-state="closed"] { --tw-exit-translate-y: 100%; } -} - .data-\[state\=closed\]\:slide-out-to-top { - &[data-state="closed"] { --tw-exit-translate-y: -100%; } -} - .data-\[state\=on\]\:bg-accent { - &[data-state="on"] { background-color: var(--accent); } -} - .data-\[state\=on\]\:text-accent-foreground { - &[data-state="on"] { color: var(--accent-foreground); } -} - .data-\[state\=open\]\:animate-accordion-down { - &[data-state="open"] { animation: accordion-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); } -} - .data-\[state\=open\]\:animate-collapsible-down { - &[data-state="open"] { animation: collapsible-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); } -} - .data-\[state\=open\]\:animate-in { - &[data-state="open"] { animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); } -} - .data-\[state\=open\]\:bg-accent { - &[data-state="open"] { background-color: var(--accent); } -} - .data-\[state\=open\]\:text-accent-foreground { - &[data-state="open"] { color: var(--accent-foreground); } -} - .data-\[state\=open\]\:opacity-100 { - &[data-state="open"] { opacity: 1; } -} - .data-\[state\=open\]\:duration-500 { - &[data-state="open"] { --tw-duration: 500ms; transition-duration: 500ms; } -} - .data-\[state\=open\]\:fade-in-0 { - &[data-state="open"] { --tw-enter-opacity: 0; } -} - .data-\[state\=open\]\:slide-in-from-end { - &[data-state="open"] { - &:dir(ltr) { --tw-enter-translate-x: 100%; } - &:dir(rtl) { --tw-enter-translate-x: -100%; } -} -} - .data-\[state\=open\]\:slide-in-from-start { - &[data-state="open"] { - &:dir(ltr) { --tw-enter-translate-x: -100%; } - &:dir(rtl) { --tw-enter-translate-x: 100%; } -} -} - .data-\[state\=open\]\:zoom-in-95 { - &[data-state="open"] { --tw-enter-scale: .95; } -} - .data-\[state\=open\]\:slide-in-from-bottom { - &[data-state="open"] { --tw-enter-translate-y: 100%; } -} - .data-\[state\=open\]\:slide-in-from-top { - &[data-state="open"] { --tw-enter-translate-y: -100%; } -} - .data-\[state\=open\]\:hover\:bg-sidebar-accent { - &[data-state="open"] { - &:hover { - @media (hover: hover) { - background-color: var(--sidebar-accent); -} -} -} -} - .data-\[state\=open\]\:hover\:text-sidebar-accent-foreground { - &[data-state="open"] { - &:hover { - @media (hover: hover) { - color: var(--sidebar-accent-foreground); -} -} -} -} - .data-\[state\=unchecked\]\:translate-x-0 { - &[data-state="unchecked"] { --tw-translate-x: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); } -} - .data-\[state\=unchecked\]\:bg-input { - &[data-state="unchecked"] { background-color: var(--input); } -} - .data-\[variant\=destructive\]\:text-destructive { - &[data-variant="destructive"] { color: var(--destructive); } -} - .data-\[variant\=destructive\]\:data-highlighted\:bg-destructive\/10 { - &[data-variant="destructive"] { - &[data-highlighted] { - background-color: var(--destructive); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--destructive) 10%, transparent); -} -} -} -} - .data-\[variant\=destructive\]\:data-highlighted\:text-destructive { - &[data-variant="destructive"] { - &[data-highlighted] { color: var(--destructive); } -} -} - .data-\[vaul-drawer-direction\=bottom\]\:inset-x-0 { - &[data-vaul-drawer-direction="bottom"] { inset-inline: calc(var(--spacing) * 0); } -} - .data-\[vaul-drawer-direction\=bottom\]\:bottom-0 { - &[data-vaul-drawer-direction="bottom"] { bottom: calc(var(--spacing) * 0); } -} - .data-\[vaul-drawer-direction\=bottom\]\:mt-24 { - &[data-vaul-drawer-direction="bottom"] { margin-top: calc(var(--spacing) * 24); } -} - .data-\[vaul-drawer-direction\=bottom\]\:max-h-\[90dvh\] { - &[data-vaul-drawer-direction="bottom"] { max-height: 90dvh; } -} - .data-\[vaul-drawer-direction\=bottom\]\:rounded-t-lg { - &[data-vaul-drawer-direction="bottom"] { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); } -} - .data-\[vaul-drawer-direction\=bottom\]\:border-t { - &[data-vaul-drawer-direction="bottom"] { border-top-style: var(--tw-border-style); border-top-width: 1px; } -} - .data-\[vaul-drawer-direction\=left\]\:inset-y-0 { - &[data-vaul-drawer-direction="left"] { inset-block: calc(var(--spacing) * 0); } -} - .data-\[vaul-drawer-direction\=left\]\:inset-s-0 { - &[data-vaul-drawer-direction="left"] { inset-inline-start: calc(var(--spacing) * 0); } -} - .data-\[vaul-drawer-direction\=left\]\:w-3\/4 { - &[data-vaul-drawer-direction="left"] { width: calc(75%); } -} - .data-\[vaul-drawer-direction\=left\]\:border-e { - &[data-vaul-drawer-direction="left"] { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 1px; } -} - .data-\[vaul-drawer-direction\=right\]\:inset-y-0 { - &[data-vaul-drawer-direction="right"] { inset-block: calc(var(--spacing) * 0); } -} - .data-\[vaul-drawer-direction\=right\]\:inset-e-0 { - &[data-vaul-drawer-direction="right"] { inset-inline-end: calc(var(--spacing) * 0); } -} - .data-\[vaul-drawer-direction\=right\]\:w-3\/4 { - &[data-vaul-drawer-direction="right"] { width: calc(75%); } -} - .data-\[vaul-drawer-direction\=right\]\:border-s { - &[data-vaul-drawer-direction="right"] { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 1px; } -} - .data-\[vaul-drawer-direction\=top\]\:inset-x-0 { - &[data-vaul-drawer-direction="top"] { inset-inline: calc(var(--spacing) * 0); } -} - .data-\[vaul-drawer-direction\=top\]\:top-0 { - &[data-vaul-drawer-direction="top"] { top: calc(var(--spacing) * 0); } -} - .data-\[vaul-drawer-direction\=top\]\:mb-24 { - &[data-vaul-drawer-direction="top"] { margin-bottom: calc(var(--spacing) * 24); } -} - .data-\[vaul-drawer-direction\=top\]\:max-h-\[90dvh\] { - &[data-vaul-drawer-direction="top"] { max-height: 90dvh; } -} - .data-\[vaul-drawer-direction\=top\]\:rounded-b-lg { - &[data-vaul-drawer-direction="top"] { border-bottom-right-radius: var(--radius); border-bottom-left-radius: var(--radius); } -} - .data-\[vaul-drawer-direction\=top\]\:border-b { - &[data-vaul-drawer-direction="top"] { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } -} - .motion-safe\:animate-shimmer { - @media (prefers-reduced-motion: no-preference) { - animation: 2s linear 0s infinite normal none running shimmer; background-image: linear-gradient(90deg, oklch(from var(--muted-foreground) l c h / 0.2) 20%, oklch(from var(--foreground) l c h / 0.3) 50%, oklch(from var(--muted-foreground) l c h / 0.2) 65%); background-size: 200% 100%; background-repeat: repeat; -} -} - .motion-safe\:animate-pulse { - @media (prefers-reduced-motion: no-preference) { - animation: var(--animate-pulse); -} -} - .md\:right-6 { - @media (width >= 768px) { - right: calc(var(--spacing) * 6); -} -} - .md\:bottom-6 { - @media (width >= 768px) { - bottom: calc(var(--spacing) * 6); -} -} - .md\:mx-4 { - @media (width >= 768px) { - margin-inline: calc(var(--spacing) * 4); -} -} - .md\:mt-4 { - @media (width >= 768px) { - margin-top: calc(var(--spacing) * 4); -} -} - .md\:mr-0 { - @media (width >= 768px) { - margin-right: calc(var(--spacing) * 0); -} -} - .md\:mr-3 { - @media (width >= 768px) { - margin-right: calc(var(--spacing) * 3); -} -} - .md\:mb-2 { - @media (width >= 768px) { - margin-bottom: calc(var(--spacing) * 2); -} -} - .md\:mb-4 { - @media (width >= 768px) { - margin-bottom: calc(var(--spacing) * 4); -} -} - .md\:i-mdi-monitor { - @media (width >= 768px) { - display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M21 16H3V4h18m0-2H3c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h7v2H8v2h8v-2h-2v-2h7a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2'/%3E%3C/svg%3E"); -} -} - .md\:block { - @media (width >= 768px) { - display: block; -} -} - .md\:flex { - @media (width >= 768px) { - display: flex; -} -} - .md\:grid { - @media (width >= 768px) { - display: grid; -} -} - .md\:hidden { - @media (width >= 768px) { - display: none; -} -} - .md\:inline-flex { - @media (width >= 768px) { - display: inline-flex; -} -} - .md\:h-7 { - @media (width >= 768px) { - height: calc(var(--spacing) * 7); -} -} - .md\:h-8 { - @media (width >= 768px) { - height: calc(var(--spacing) * 8); -} -} - .md\:h-9 { - @media (width >= 768px) { - height: calc(var(--spacing) * 9); -} -} - .md\:h-10 { - @media (width >= 768px) { - height: calc(var(--spacing) * 10); -} -} - .md\:h-12 { - @media (width >= 768px) { - height: calc(var(--spacing) * 12); -} -} - .md\:max-h-\[40vh\] { - @media (width >= 768px) { - max-height: 40vh; -} -} - .md\:w-96 { - @media (width >= 768px) { - width: calc(var(--spacing) * 96); -} -} - .md\:w-full { - @media (width >= 768px) { - width: 100%; -} -} - .md\:grow-2 { - @media (width >= 768px) { - flex-grow: 2; -} -} - .md\:grid-cols-2 { - @media (width >= 768px) { - grid-template-columns: repeat(2, minmax(0px, 1fr)); -} -} - .md\:grid-cols-3 { - @media (width >= 768px) { - grid-template-columns: repeat(3, minmax(0px, 1fr)); -} -} - .md\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1\.2fr\)\] { - @media (width >= 768px) { - grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.2fr); -} -} - .md\:flex-col { - @media (width >= 768px) { - flex-direction: column; -} -} - .md\:justify-end { - @media (width >= 768px) { - justify-content: flex-end; -} -} - .md\:gap-2 { - @media (width >= 768px) { - gap: calc(var(--spacing) * 2); -} -} - .md\:gap-3 { - @media (width >= 768px) { - gap: calc(var(--spacing) * 3); -} -} - .md\:gap-4 { - @media (width >= 768px) { - gap: calc(var(--spacing) * 4); -} -} - .md\:space-y-4 { - @media (width >= 768px) { - :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))); } -} -} - .md\:space-y-6 { - @media (width >= 768px) { - :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))); } -} -} - .md\:space-y-8 { - @media (width >= 768px) { - :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))); } -} -} - .md\:rounded { - @media (width >= 768px) { - border-radius: 0.25rem; -} -} - .md\:border-4 { - @media (width >= 768px) { - border-style: var(--tw-border-style); border-width: 4px; -} -} - .md\:p-4 { - @media (width >= 768px) { - padding: calc(var(--spacing) * 4); -} -} - .md\:px-2 { - @media (width >= 768px) { - padding-inline: calc(var(--spacing) * 2); -} -} - .md\:py-4 { - @media (width >= 768px) { - padding-block: calc(var(--spacing) * 4); -} -} - .md\:py-6 { - @media (width >= 768px) { - padding-block: calc(var(--spacing) * 6); -} -} - .md\:pt-1 { - @media (width >= 768px) { - padding-top: calc(var(--spacing) * 1); -} -} - .md\:pr-0 { - @media (width >= 768px) { - padding-right: calc(var(--spacing) * 0); -} -} - .md\:pr-2 { - @media (width >= 768px) { - padding-right: calc(var(--spacing) * 2); -} -} - .md\:pr-3 { - @media (width >= 768px) { - padding-right: calc(var(--spacing) * 3); -} -} - .md\:pb-0 { - @media (width >= 768px) { - padding-bottom: calc(var(--spacing) * 0); -} -} - .md\:pb-2 { - @media (width >= 768px) { - padding-bottom: calc(var(--spacing) * 2); -} -} - .md\:pb-3 { - @media (width >= 768px) { - padding-bottom: calc(var(--spacing) * 3); -} -} - .md\:pl-2 { - @media (width >= 768px) { - padding-left: calc(var(--spacing) * 2); -} -} - .md\:pl-4 { - @media (width >= 768px) { - padding-left: calc(var(--spacing) * 4); -} -} - .md\:text-sm { - @media (width >= 768px) { - font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); -} -} - .md\:opacity-0 { - @media (width >= 768px) { - opacity: 0; -} -} - .md\:transition-opacity { - @media (width >= 768px) { - transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); -} -} - .md\:group-focus-within\:opacity-100 { - @media (width >= 768px) { - &:is(:where(.group):focus-within *) { opacity: 1; } -} -} - .md\:group-hover\:opacity-100 { - @media (width >= 768px) { - &:is(:where(.group):hover *) { - @media (hover: hover) { - opacity: 1; -} -} -} -} - .md\:peer-data-\[variant\=inset\]\:m-2 { - @media (width >= 768px) { - &:is(:where(.peer)[data-variant="inset"] ~ *) { margin: calc(var(--spacing) * 2); } -} -} - .md\:peer-data-\[variant\=inset\]\:ms-0 { - @media (width >= 768px) { - &:is(:where(.peer)[data-variant="inset"] ~ *) { margin-inline-start: calc(var(--spacing) * 0); } -} -} - .md\:peer-data-\[variant\=inset\]\:rounded-xl { - @media (width >= 768px) { - &:is(:where(.peer)[data-variant="inset"] ~ *) { border-radius: calc(var(--radius) + 4px); } -} -} - .md\:peer-data-\[variant\=inset\]\:shadow-sm { - @media (width >= 768px) { - &:is(:where(.peer)[data-variant="inset"] ~ *) { --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); } -} -} - .md\:peer-data-\[variant\=inset\]\:peer-data-\[state\=collapsed\]\:ms-2 { - @media (width >= 768px) { - &:is(:where(.peer)[data-variant="inset"] ~ *) { - &:is(:where(.peer)[data-state="collapsed"] ~ *) { margin-inline-start: calc(var(--spacing) * 2); } -} -} -} - .md\:after\:hidden { - @media (width >= 768px) { - &::after { content: var(--tw-content); display: none; } -} -} - .sm\:col-span-1 { - @media (width >= 40rem) { - grid-column: span 1 / span 1; -} -} - .sm\:ms-auto { - @media (width >= 40rem) { - margin-inline-start: auto; -} -} - .sm\:flex { - @media (width >= 40rem) { - display: flex; -} -} - .sm\:max-h-\[calc\(100\%-16px\)\] { - @media (width >= 40rem) { - max-height: calc(100% - 16px); -} -} - .sm\:min-h-\[min\(calc\(100\%-16px\)\,30rem\)\] { - @media (width >= 40rem) { - min-height: min(100% - 16px, 30rem); -} -} - .sm\:w-auto { - @media (width >= 40rem) { - width: auto; -} -} - .sm\:max-w-\[calc\(100\%-32px\)\] { - @media (width >= 40rem) { - max-width: calc(100% - 32px); -} -} - .sm\:max-w-lg { - @media (width >= 40rem) { - max-width: var(--container-lg); -} -} - .sm\:max-w-md { - @media (width >= 40rem) { - max-width: var(--container-md); -} -} - .sm\:max-w-sm { - @media (width >= 40rem) { - max-width: var(--container-sm); -} -} - .sm\:min-w-140 { - @media (width >= 40rem) { - min-width: calc(var(--spacing) * 140); -} -} - .sm\:min-w-\[min\(calc\(100\%-32px\)\,50rem\)\] { - @media (width >= 40rem) { - min-width: min(100% - 32px, 50rem); -} -} - .sm\:grid-cols-2 { - @media (width >= 40rem) { - grid-template-columns: repeat(2, minmax(0px, 1fr)); -} -} - .sm\:grid-cols-\[auto_1fr\] { - @media (width >= 40rem) { - grid-template-columns: auto 1fr; -} -} - .sm\:flex-row { - @media (width >= 40rem) { - flex-direction: row; -} -} - .sm\:flex-wrap { - @media (width >= 40rem) { - flex-wrap: wrap; -} -} - .sm\:items-center { - @media (width >= 40rem) { - align-items: center; -} -} - .sm\:justify-end { - @media (width >= 40rem) { - justify-content: flex-end; -} -} - .sm\:gap-2\.5 { - @media (width >= 40rem) { - gap: calc(var(--spacing) * 2.5); -} -} - .sm\:gap-4 { - @media (width >= 40rem) { - gap: calc(var(--spacing) * 4); -} -} - .sm\:rounded-lg { - @media (width >= 40rem) { - border-radius: var(--radius); -} -} - .sm\:p-4 { - @media (width >= 40rem) { - padding: calc(var(--spacing) * 4); -} -} - .sm\:px-4 { - @media (width >= 40rem) { - padding-inline: calc(var(--spacing) * 4); -} -} - .sm\:pt-0 { - @media (width >= 40rem) { - padding-top: calc(var(--spacing) * 0); -} -} - .sm\:text-start { - @media (width >= 40rem) { - text-align: start; -} -} - .sm\:text-base { - @media (width >= 40rem) { - font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); -} -} - .sm\:text-sm { - @media (width >= 40rem) { - font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); -} -} - .sm\:text-xl { - @media (width >= 40rem) { - font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); -} -} - .sm\:leading-normal { - @media (width >= 40rem) { - --tw-leading: var(--leading-normal); line-height: var(--leading-normal); -} -} - .data-\[vaul-drawer-direction\=left\]\:sm\:max-w-sm { - &[data-vaul-drawer-direction="left"] { - @media (width >= 40rem) { - max-width: var(--container-sm); -} -} -} - .data-\[vaul-drawer-direction\=right\]\:sm\:max-w-sm { - &[data-vaul-drawer-direction="right"] { - @media (width >= 40rem) { - max-width: var(--container-sm); -} -} -} - .lg\:grid-cols-2 { - @media (width >= 64rem) { - grid-template-columns: repeat(2, minmax(0px, 1fr)); -} -} - .lg\:grid-cols-3 { - @media (width >= 64rem) { - grid-template-columns: repeat(3, minmax(0px, 1fr)); -} -} - .max-xs\:hidden { - @media (400px >= width) { - display: none; -} -} - .max-sm\:min-h-full { - @media (639px >= width) { - min-height: 100%; -} -} - .max-md\:sticky { - @media (767px >= width) { - position: sticky; -} -} - .max-md\:mt-4 { - @media (767px >= width) { - margin-top: calc(var(--spacing) * 4); -} -} - .max-md\:mb-1 { - @media (767px >= width) { - margin-bottom: calc(var(--spacing) * 1); -} -} - .max-md\:hidden { - @media (767px >= width) { - display: none; -} -} - .max-md\:h-10 { - @media (767px >= width) { - height: calc(var(--spacing) * 10); -} -} - .max-md\:h-75 { - @media (767px >= width) { - height: calc(var(--spacing) * 75); -} -} - .max-md\:w-full { - @media (767px >= width) { - width: 100%; -} -} - .max-md\:grow { - @media (767px >= width) { - flex-grow: 1; -} -} - .max-md\:grow-3 { - @media (767px >= width) { - flex-grow: 3; -} -} - .max-md\:basis-0 { - @media (767px >= width) { - flex-basis: calc(var(--spacing) * 0); -} -} - .max-md\:p-2 { - @media (767px >= width) { - padding: calc(var(--spacing) * 2); -} -} - .max-md\:px-2 { - @media (767px >= width) { - padding-inline: calc(var(--spacing) * 2); -} -} - .max-md\:py-3 { - @media (767px >= width) { - padding-block: calc(var(--spacing) * 3); -} -} - .\@lg\/editor\:grid-cols-\[fit-content\(70px\)_1fr\] { - @container editor (width >= 32rem) { - grid-template-columns: fit-content(70px) 1fr; -} -} - .\@lg\/editor\:grid-cols-subgrid { - @container editor (width >= 32rem) { - grid-template-columns: subgrid; -} -} - .\@3xl\/editor\:col-span-1 { - @container editor (width >= 48rem) { - grid-column: span 1 / span 1; -} -} - .\@3xl\/editor\:col-start-2 { - @container editor (width >= 48rem) { - grid-column-start: 2; -} -} - .\@3xl\/editor\:col-end-4 { - @container editor (width >= 48rem) { - grid-column-end: 4; -} -} - .\@3xl\/editor\:grid-cols-\[180px_fit-content\(80px\)_1fr\] { - @container editor (width >= 48rem) { - grid-template-columns: 180px fit-content(80px) 1fr; -} -} - .dark\:scale-0 { - &:is(.dark *) { --tw-scale-x: 0%; --tw-scale-y: 0%; --tw-scale-z: 0%; scale: var(--tw-scale-x) var(--tw-scale-y); } -} - .dark\:scale-100 { - &:is(.dark *) { --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); } -} - .dark\:-rotate-90 { - &:is(.dark *) { rotate: calc(-90deg); } -} - .dark\:rotate-0 { - &:is(.dark *) { rotate: 0deg; } -} - .dark\:bg-destructive\/60 { - &:is(.dark *) { - background-color: var(--destructive); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--destructive) 60%, transparent); -} -} -} - .dark\:bg-destructive\/70 { - &:is(.dark *) { - background-color: var(--destructive); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--destructive) 70%, transparent); -} -} -} - .dark\:bg-input\/30 { - &:is(.dark *) { - background-color: var(--input); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--input) 30%, transparent); -} -} -} - .dark\:bg-muted\/50 { - &:is(.dark *) { - background-color: var(--muted); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--muted) 50%, transparent); -} -} -} - .dark\:bg-neutral-50\/50 { - &:is(.dark *) { - background-color: color-mix(in srgb, oklch(0.985 0 0), transparent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-neutral-50) 50%, transparent); -} -} -} - .dark\:bg-transparent { - &:is(.dark *) { background-color: transparent; } -} - .dark\:text-amber-300 { - &:is(.dark *) { color: var(--color-amber-300); } -} - .dark\:text-blue-300 { - &:is(.dark *) { color: var(--color-blue-300); } -} - .dark\:text-emerald-300 { - &:is(.dark *) { color: var(--color-emerald-300); } -} - .dark\:text-emerald-400 { - &:is(.dark *) { color: var(--color-emerald-400); } -} - .dark\:text-fuchsia-300 { - &:is(.dark *) { color: var(--color-fuchsia-300); } -} - .dark\:text-lime-300 { - &:is(.dark *) { color: var(--color-lime-300); } -} - .dark\:text-muted-foreground { - &:is(.dark *) { color: var(--muted-foreground); } -} - .dark\:text-neutral-50\/50 { - &:is(.dark *) { - color: color-mix(in srgb, oklch(0.985 0 0), transparent); - @supports (color: color-mix(in lab, red, red)) { - color: color-mix(in oklab, var(--color-neutral-50) 50%, transparent); -} -} -} - .dark\:text-rose-400 { - &:is(.dark *) { color: var(--color-rose-400); } -} - .dark\:text-sky-400 { - &:is(.dark *) { color: var(--color-sky-400); } -} - .dark\:ring-ring\/20 { - &:is(.dark *) { - --tw-ring-color: var(--ring); - @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--ring) 20%, transparent); -} -} -} - .dark\:outline-ring\/40 { - &:is(.dark *) { - outline-color: var(--ring); - @supports (color: color-mix(in lab, red, red)) { - outline-color: color-mix(in oklab, var(--ring) 40%, transparent); -} -} -} - .dark\:hover\:bg-accent\/50 { - &:is(.dark *) { - &:hover { - @media (hover: hover) { - background-color: var(--accent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--accent) 50%, transparent); -} -} -} -} -} - .dark\:hover\:bg-input\/50 { - &:is(.dark *) { - &:hover { - @media (hover: hover) { - background-color: var(--input); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--input) 50%, transparent); -} -} -} -} -} - .dark\:hover\:bg-primary\/25 { - &:is(.dark *) { - &:hover { - @media (hover: hover) { - background-color: var(--primary); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--primary) 25%, transparent); -} -} -} -} -} - .hover\:dark\:bg-muted { - &:hover { - @media (hover: hover) { - &:is(.dark *) { background-color: var(--muted); } -} -} -} - .dark\:focus-visible\:ring-destructive\/40 { - &:is(.dark *) { - &:focus-visible { - --tw-ring-color: var(--destructive); - @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent); -} -} -} -} - .dark\:disabled\:bg-transparent { - &:is(.dark *) { - &:disabled { background-color: transparent; } -} -} - .dark\:has-disabled\:bg-input\/80 { - &:is(.dark *) { - &:has(:disabled) { - background-color: var(--input); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--input) 80%, transparent); -} -} -} -} - .dark\:has-\[\.real-input\[aria-invalid\=true\]\]\:ring-destructive\/40 { - &:is(.dark *) { - &:has(:is(.real-input[aria-invalid="true"])) { - --tw-ring-color: var(--destructive); - @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent); -} -} -} -} - .dark\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/40 { - &:is(.dark *) { - &:has(:is([data-slot][aria-invalid="true"])) { - --tw-ring-color: var(--destructive); - @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent); -} -} -} -} - .dark\:aria-invalid\:ring-destructive\/40 { - &:is(.dark *) { - &[aria-invalid="true"] { - --tw-ring-color: var(--destructive); - @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent); -} -} -} -} - .aria-selected\:dark\:bg-primary\/25 { - &[aria-selected="true"] { - &:is(.dark *) { - background-color: var(--primary); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--primary) 25%, transparent); -} -} -} -} - .dark\:data-\[state\=active\]\:border-input { - &:is(.dark *) { - &[data-state="active"] { border-color: var(--input); } -} -} - .dark\:data-\[state\=active\]\:bg-input\/30 { - &:is(.dark *) { - &[data-state="active"] { - background-color: var(--input); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--input) 30%, transparent); -} -} -} -} - .dark\:data-\[state\=active\]\:text-foreground { - &:is(.dark *) { - &[data-state="active"] { color: var(--foreground); } -} -} - .dark\:data-\[state\=checked\]\:bg-primary { - &:is(.dark *) { - &[data-state="checked"] { background-color: var(--primary); } -} -} - .dark\:data-\[state\=checked\]\:bg-primary-foreground { - &:is(.dark *) { - &[data-state="checked"] { background-color: var(--primary-foreground); } -} -} - .dark\:data-\[state\=unchecked\]\:bg-foreground { - &:is(.dark *) { - &[data-state="unchecked"] { background-color: var(--foreground); } -} -} - .dark\:data-\[state\=unchecked\]\:bg-input\/80 { - &:is(.dark *) { - &[data-state="unchecked"] { - background-color: var(--input); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--input) 80%, transparent); -} -} -} -} - .dark\:data-\[variant\=destructive\]\:data-highlighted\:bg-destructive\/20 { - &:is(.dark *) { - &[data-variant="destructive"] { - &[data-highlighted] { - background-color: var(--destructive); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--destructive) 20%, transparent); -} -} -} -} -} - .paratext\:hidden { - &:is([data-paratext="true"] *) { display: none; } -} - .paratext\:opacity-100\! { - &:is([data-paratext="true"] *) { opacity: 1 !important; } -} - .data-disabled\:pointer-events-none { - &:where([data-disabled="true"]), &:where([data-disabled]:not([data-disabled="false"])) { pointer-events: none; } -} - .data-disabled\:opacity-50 { - &:where([data-disabled="true"]), &:where([data-disabled]:not([data-disabled="false"])) { opacity: 0.5; } -} - .\[\&_\[class\*\=\"i-mdi-\"\]\]\:pointer-events-none { - & [class*="i-mdi-"] { pointer-events: none; } -} - .\[\&_\[class\*\=\"i-mdi-\"\]\:not\(\[class\*\=\"size-\"\]\)\]\:size-4 { - & [class*="i-mdi-"]:not([class*="size-"]) { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } -} - .\[\&_\[class\*\=\'i-mdi-\'\]\]\:pointer-events-none { - & [class*="i-mdi-"] { pointer-events: none; } -} - .\[\&_\[class\*\=\'i-mdi-\'\]\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 { - & [class*="i-mdi-"]:not([class*="size-"]) { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } -} - .\[\&_\[data-command-group\]\:not\(\[hidden\]\)_\~\[data-command-group\]\]\:pt-0 { - & [data-command-group]:not([hidden]) ~ [data-command-group] { padding-top: calc(var(--spacing) * 0); } -} - .\[\&_\[data-command-input-wrapper\]_\[class\*\=\'i-mdi-\'\]\]\:h-5 { - & [data-command-input-wrapper] [class*="i-mdi-"] { height: calc(var(--spacing) * 5); } -} - .\[\&_\[data-command-input-wrapper\]_\[class\*\=\'i-mdi-\'\]\]\:w-5 { - & [data-command-input-wrapper] [class*="i-mdi-"] { width: calc(var(--spacing) * 5); } -} - .\[\&_\[data-command-item\]_\[class\*\=\'i-mdi-\'\]\]\:h-5 { - & [data-command-item] [class*="i-mdi-"] { height: calc(var(--spacing) * 5); } -} - .\[\&_\[data-command-item\]_\[class\*\=\'i-mdi-\'\]\]\:w-5 { - & [data-command-item] [class*="i-mdi-"] { width: calc(var(--spacing) * 5); } -} - .\[\&_p\]\:leading-relaxed { - & p { --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); } -} - .\[\&_strong\]\:font-semibold { - & strong { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } -} - .\[\&_svg\]\:pointer-events-none { - & svg { pointer-events: none; } -} - .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 { - & svg:not([class*="size-"]) { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } -} - .group-\[\.toast\[data-type\=\"error\"\]\]\:\[\&\.copied\]\:i-mdi-check { - &:is(:where(.group):is(.toast[data-type="error"]) *) { - &.copied { display: inline-block; width: 1em; height: 1em; background-color: currentcolor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59z'/%3E%3C/svg%3E"); } -} -} - .\[\.border-b\]\:pb-2 { - &:is(.border-b) { padding-bottom: calc(var(--spacing) * 2); } -} - .\[\.border-b\]\:pb-6 { - &:is(.border-b) { padding-bottom: calc(var(--spacing) * 6); } -} - .\[\.border-t\]\:pt-2 { - &:is(.border-t) { padding-top: calc(var(--spacing) * 2); } -} - .\[\.border-t\]\:pt-6 { - &:is(.border-t) { padding-top: calc(var(--spacing) * 6); } -} - .\*\:\[\[class\*\=\"i-mdi-\"\]\]\:size-3\.5 { - :is(& > *) { - &:is([class*="i-mdi-"]) { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); } -} -} - .\*\:\[\[class\*\=\'i-mdi-\'\]\]\:shrink-0 { - :is(& > *) { - &:is([class*="i-mdi-"]) { flex-shrink: 0; } -} -} - .\*\*\:\[\[class\*\=\'i-mdi-\'\]\]\:pointer-events-none { - :is(& *) { - &:is([class*="i-mdi-"]) { pointer-events: none; } -} -} - .data-\[variant\=destructive\]\:\*\:\[\[class\*\=\'i-mdi-\'\]\]\:text-destructive\! { - &[data-variant="destructive"] { - :is(& > *) { - &:is([class*="i-mdi-"]) { color: var(--destructive) !important; } -} -} -} - .\*\:\[span\]\:last\:flex { - :is(& > *) { - &:is(span) { - &:last-child { display: flex; } -} -} -} - .\*\:\[span\]\:last\:items-center { - :is(& > *) { - &:is(span) { - &:last-child { align-items: center; } -} -} -} - .\*\:\[span\]\:last\:gap-2 { - :is(& > *) { - &:is(span) { - &:last-child { gap: calc(var(--spacing) * 2); } -} -} -} - .disabled\:\[\&\:not\(\.loading\)\]\:opacity-50 { - &:disabled { - &:not(.loading) { opacity: 0.5; } -} -} - .aria-disabled\:\[\&\:not\(\.loading\)\]\:opacity-50 { - &[aria-disabled="true"] { - &:not(.loading) { opacity: 0.5; } -} -} - .\[\&\>\*\]\:focus-visible\:relative { - & > * { - &:focus-visible { position: relative; } -} -} - .\[\&\>\*\]\:focus-visible\:z-10 { - & > * { - &:focus-visible { z-index: 10; } -} -} - .\[\&\>\.icon-wrapper\]\:flex { - & > .icon-wrapper { display: flex; } -} - .\[\&\>\.icon-wrapper\]\:items-center { - & > .icon-wrapper { align-items: center; } -} - .\[\&\>\.icon-wrapper\]\:justify-center { - & > .icon-wrapper { justify-content: center; } -} - .\[\&\>\[class\*\=\"i-mdi-\"\]\]\:pointer-events-none { - & > [class*="i-mdi-"] { pointer-events: none; } -} - .\[\&\>\[class\*\=\"i-mdi-\"\]\]\:size-4 { - & > [class*="i-mdi-"] { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } -} - .\[\&\>\[class\*\=\"i-mdi-\"\]\]\:shrink-0 { - & > [class*="i-mdi-"] { flex-shrink: 0; } -} - .\[\&\>\[class\*\=\"i-mdi-\"\]\]\:translate-y-0\.5 { - & > [class*="i-mdi-"] { --tw-translate-y: calc(var(--spacing) * 0.5); translate: var(--tw-translate-x) var(--tw-translate-y); } -} - .\[\&\>\[class\*\=\"i-mdi-\"\]\]\:text-current { - & > [class*="i-mdi-"] { color: currentcolor; } -} - .\[\&\>\[class\*\=\"i-mdi-\"\]\]\:text-sidebar-accent-foreground { - & > [class*="i-mdi-"] { color: var(--sidebar-accent-foreground); } -} - .\[\&\>\[class\*\=\"i-mdi-\"\]\:not\(\[class\*\=\"size-\"\]\)\]\:size-3 { - & > [class*="i-mdi-"]:not([class*="size-"]) { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); } -} - .\[\&\>\[class\*\=\'i-mdi-\'\]\]\:shrink-0 { - & > [class*="i-mdi-"] { flex-shrink: 0; } -} - .\[\&\>\[class\*\=\'i-mdi-\'\]\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground { - & > [class*="i-mdi-"]:not([class*="text-"]) { color: var(--muted-foreground); } -} - .has-\[select\[aria-hidden\=true\]\:last-child\]\:\[\&\>\[data-slot\=select-trigger\]\:last-of-type\]\:rounded-r-lg { - &:has(:is(select[aria-hidden="true"]:last-child)) { - & > [data-slot="select-trigger"]:last-of-type { border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius); } -} -} - .\[\&\>\[data-slot\=select-trigger\]\:not\(\[class\*\=\'w-\'\]\)\]\:w-fit { - & > [data-slot="select-trigger"]:not([class*="w-"]) { width: fit-content; } -} - .\[\&\>\[data-slot\]\]\:rounded-r-none { - & > [data-slot] { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } -} - .\[\&\>\[data-slot\]\]\:rounded-b-none { - & > [data-slot] { border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } -} - .\[\&\>\[data-slot\]\:not\(\:has\(\~\[data-slot\]\)\)\]\:rounded-r-lg\! { - & > [data-slot]:not(:has(~ [data-slot])) { border-top-right-radius: var(--radius) !important; border-bottom-right-radius: var(--radius) !important; } -} - .\[\&\>\[data-slot\]\:not\(\:has\(\~\[data-slot\]\)\)\]\:rounded-b-lg\! { - & > [data-slot]:not(:has(~ [data-slot])) { border-bottom-right-radius: var(--radius) !important; border-bottom-left-radius: var(--radius) !important; } -} - .\[\&\>\[data-slot\]\~\[data-slot\]\]\:rounded-t-none { - & > [data-slot] ~ [data-slot] { border-top-left-radius: 0px; border-top-right-radius: 0px; } -} - .\[\&\>\[data-slot\]\~\[data-slot\]\]\:rounded-l-none { - & > [data-slot] ~ [data-slot] { border-top-left-radius: 0px; border-bottom-left-radius: 0px; } -} - .\[\&\>\[data-slot\]\~\[data-slot\]\]\:border-t-0 { - & > [data-slot] ~ [data-slot] { border-top-style: var(--tw-border-style); border-top-width: 0px; } -} - .\[\&\>\[data-slot\]\~\[data-slot\]\]\:border-l-0 { - & > [data-slot] ~ [data-slot] { border-left-style: var(--tw-border-style); border-left-width: 0px; } -} - .\[\&\>button\]\:hidden { - & > button { display: none; } -} - .\[\&\>input\]\:flex-1 { - & > input { flex: 1 1 0%; } -} - .has-\[\>\[data-align\=block-end\]\]\:\[\&\>input\]\:pt-3 { - &:has(> [data-align="block-end"]) { - & > input { padding-top: calc(var(--spacing) * 3); } -} -} - .has-\[\>\[data-align\=block-start\]\]\:\[\&\>input\]\:pb-3 { - &:has(> [data-align="block-start"]) { - & > input { padding-bottom: calc(var(--spacing) * 3); } -} -} - .has-\[\>\[data-align\=inline-end\]\]\:\[\&\>input\]\:pr-1\.5 { - &:has(> [data-align="inline-end"]) { - & > input { padding-right: calc(var(--spacing) * 1.5); } -} -} - .has-\[\>\[data-align\=inline-start\]\]\:\[\&\>input\]\:pl-1\.5 { - &:has(> [data-align="inline-start"]) { - & > input { padding-left: calc(var(--spacing) * 1.5); } -} -} - .\[\&\>kbd\]\:rounded-\[calc\(var\(--radius\)-5px\)\] { - & > kbd { border-radius: calc(var(--radius) - 5px); } -} - .\[\&\>span\:last-child\]\:truncate { - & > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -} - .\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5 { - & > svg:not([class*="size-"]) { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); } -} - .\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 { - & > svg:not([class*="size-"]) { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } -} - .\[\&\[data-direction\=vertical\]\>div\]\:rotate-90 { - &[data-direction="vertical"] > div { rotate: 90deg; } -} - .\[\&\[data-state\=open\]\>\.i-mdi-chevron-down\]\:rotate-180 { - &[data-state="open"] > .i-mdi-chevron-down { rotate: 180deg; } -} - .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-inset-e-2 { - [data-side="left"][data-collapsible="offcanvas"] & { inset-inline-end: calc(var(--spacing) * -2); } -} - .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize { - [data-side="left"][data-state="collapsed"] & { cursor: e-resize; } -} - .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-inset-s-2 { - [data-side="right"][data-collapsible="offcanvas"] & { inset-inline-start: calc(var(--spacing) * -2); } -} - .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize { - [data-side="right"][data-state="collapsed"] & { cursor: w-resize; } -} - .\[a\&\]\:hover\:bg-accent { - a& { - &:hover { - @media (hover: hover) { - background-color: var(--accent); -} -} -} -} - .\[a\&\]\:hover\:bg-destructive\/90 { - a& { - &:hover { - @media (hover: hover) { - background-color: var(--destructive); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--destructive) 90%, transparent); -} -} -} -} -} - .\[a\&\]\:hover\:bg-primary\/90 { - a& { - &:hover { - @media (hover: hover) { - background-color: var(--primary); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--primary) 90%, transparent); -} -} -} -} -} - .\[a\&\]\:hover\:bg-secondary\/90 { - a& { - &:hover { - @media (hover: hover) { - background-color: var(--secondary); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--secondary) 90%, transparent); -} -} -} -} -} - .\[a\&\]\:hover\:text-accent-foreground { - a& { - &:hover { - @media (hover: hover) { - color: var(--accent-foreground); -} -} -} -} -} -@property --tw-animation-delay { syntax: "*"; inherits: false; initial-value: 0s; } -@property --tw-animation-direction { syntax: "*"; inherits: false; initial-value: normal; } -@property --tw-animation-duration { syntax: "*"; inherits: false; } -@property --tw-animation-fill-mode { syntax: "*"; inherits: false; initial-value: none; } -@property --tw-animation-iteration-count { syntax: "*"; inherits: false; initial-value: 1; } -@property --tw-enter-blur { syntax: "*"; inherits: false; initial-value: 0; } -@property --tw-enter-opacity { syntax: "*"; inherits: false; initial-value: 1; } -@property --tw-enter-rotate { syntax: "*"; inherits: false; initial-value: 0; } -@property --tw-enter-scale { syntax: "*"; inherits: false; initial-value: 1; } -@property --tw-enter-translate-x { syntax: "*"; inherits: false; initial-value: 0; } -@property --tw-enter-translate-y { syntax: "*"; inherits: false; initial-value: 0; } -@property --tw-exit-blur { syntax: "*"; inherits: false; initial-value: 0; } -@property --tw-exit-opacity { syntax: "*"; inherits: false; initial-value: 1; } -@property --tw-exit-rotate { syntax: "*"; inherits: false; initial-value: 0; } -@property --tw-exit-scale { syntax: "*"; inherits: false; initial-value: 1; } -@property --tw-exit-translate-x { syntax: "*"; inherits: false; initial-value: 0; } -@property --tw-exit-translate-y { syntax: "*"; inherits: false; initial-value: 0; } -:root, .light { --radius: 0.65rem; --background: oklch(1 0 0); --foreground: oklch(0.141 0.005 285.823); --card: oklch(1 0 0); --card-foreground: oklch(0.141 0.005 285.823); --popover: oklch(1 0 0); --popover-foreground: oklch(0.141 0.005 285.823); --primary: oklch(0.52 0.214 259.815); --primary-foreground: oklch(0.97 0.014 254.604); --secondary: oklch(0.967 0.001 286.375); --secondary-foreground: oklch(0.21 0.006 285.885); --muted: oklch(0.967 0.001 286.375); --muted-foreground: oklch(0.552 0.016 285.938); --accent: oklch(0.967 0.001 286.375); --accent-foreground: oklch(0.21 0.006 285.885); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.92 0.004 286.32); --input: oklch(0.92 0.004 286.32); --ring: oklch(0.52 0.214 259.815); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.141 0.005 285.823); --sidebar-primary: oklch(0.52 0.214 259.815); --sidebar-primary-foreground: oklch(0.97 0.014 254.604); --sidebar-accent: oklch(0.967 0.001 286.375); --sidebar-accent-foreground: oklch(0.21 0.006 285.885); --sidebar-border: oklch(0.92 0.004 286.32); --sidebar-ring: oklch(0.52 0.214 259.815); } -.dark { --background: oklch(0.141 0.005 285.823); --foreground: oklch(0.985 0 0); --card: oklch(0.21 0.006 285.885); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.21 0.006 285.885); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.546 0.245 262.881); --primary-foreground: var(--color-blue-50); --secondary: oklch(0.274 0.006 286.033); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.274 0.006 286.033); --muted-foreground: oklch(0.705 0.015 286.067); --accent: oklch(0.274 0.006 286.033); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: oklch(0.2 0.03 25); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.488 0.243 264.376); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.21 0.006 285.885); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.546 0.245 262.881); --sidebar-primary-foreground: var(--color-blue-50); --sidebar-accent: oklch(0.274 0.006 286.033); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.488 0.243 264.376); } -[data-theme="green"] { - &:root, &.light { --radius: 0.65rem; --background: oklch(1 0 0); --foreground: oklch(0.141 0.005 285.823); --card: oklch(1 0 0); --card-foreground: oklch(0.141 0.005 285.823); --popover: oklch(1 0 0); --popover-foreground: oklch(0.141 0.005 285.823); --primary: oklch(0.64 0.22 149.579); --primary-foreground: oklch(0.982 0.018 155.826); --secondary: oklch(0.967 0.001 286.375); --secondary-foreground: oklch(0.21 0.006 285.885); --muted: oklch(0.967 0.001 286.375); --muted-foreground: oklch(0.552 0.016 285.938); --accent: oklch(0.967 0.001 286.375); --accent-foreground: oklch(0.21 0.006 285.885); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.92 0.004 286.32); --input: oklch(0.92 0.004 286.32); --ring: oklch(0.64 0.22 149.579); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.141 0.005 285.823); --sidebar-primary: oklch(0.64 0.22 149.579); --sidebar-primary-foreground: oklch(0.982 0.018 155.826); --sidebar-accent: oklch(0.967 0.001 286.375); --sidebar-accent-foreground: oklch(0.21 0.006 285.885); --sidebar-border: oklch(0.92 0.004 286.32); --sidebar-ring: oklch(0.64 0.22 149.579); } - &.dark { --background: oklch(0.141 0.005 285.823); --foreground: oklch(0.985 0 0); --card: oklch(0.21 0.006 285.885); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.21 0.006 285.885); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.54 0.22 155); --primary-foreground: oklch(0.982 0.018 155.826); --secondary: oklch(0.274 0.006 286.033); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.274 0.006 286.033); --muted-foreground: oklch(0.705 0.015 286.067); --accent: oklch(0.274 0.006 286.033); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: oklch(0.2 0.03 25); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.54 0.22 155); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.21 0.006 285.885); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.54 0.22 155); --sidebar-primary-foreground: oklch(0.982 0.018 155.826); --sidebar-accent: oklch(0.274 0.006 286.033); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.54 0.22 155); } -} -[data-theme="rose"] { - &:root, &.light { --radius: 0.65rem; --background: oklch(1 0 0); --foreground: oklch(0.141 0.005 285.823); --card: oklch(1 0 0); --card-foreground: oklch(0.141 0.005 285.823); --popover: oklch(1 0 0); --popover-foreground: oklch(0.141 0.005 285.823); --primary: oklch(0.54 0.246 16.439); --primary-foreground: oklch(0.969 0.015 12.422); --secondary: oklch(0.967 0.001 286.375); --secondary-foreground: oklch(0.21 0.006 285.885); --muted: oklch(0.967 0.001 286.375); --muted-foreground: oklch(0.552 0.016 285.938); --accent: oklch(0.967 0.001 286.375); --accent-foreground: oklch(0.21 0.006 285.885); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.92 0.004 286.32); --input: oklch(0.92 0.004 286.32); --ring: oklch(0.54 0.246 16.439); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.141 0.005 285.823); --sidebar-primary: oklch(0.54 0.246 16.439); --sidebar-primary-foreground: oklch(0.969 0.015 12.422); --sidebar-accent: oklch(0.967 0.001 286.375); --sidebar-accent-foreground: oklch(0.21 0.006 285.885); --sidebar-border: oklch(0.92 0.004 286.32); --sidebar-ring: oklch(0.54 0.246 16.439); } - &.dark { --background: oklch(0.141 0.005 285.823); --foreground: oklch(0.985 0 0); --card: oklch(0.21 0.006 285.885); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.21 0.006 285.885); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.54 0.246 16.439); --primary-foreground: oklch(0.969 0.015 12.422); --secondary: oklch(0.274 0.006 286.033); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.274 0.006 286.033); --muted-foreground: oklch(0.705 0.015 286.067); --accent: oklch(0.274 0.006 286.033); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: oklch(0.2 0.03 25); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.54 0.246 16.439); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.21 0.006 285.885); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.54 0.246 16.439); --sidebar-primary-foreground: oklch(0.969 0.015 12.422); --sidebar-accent: oklch(0.274 0.006 286.033); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.54 0.246 16.439); } -} -[data-theme="orange"] { - &:root, &.light { --radius: 0.65rem; --background: oklch(1 0 0); --foreground: oklch(0.141 0.005 285.823); --card: oklch(1 0 0); --card-foreground: oklch(0.141 0.005 285.823); --popover: oklch(1 0 0); --popover-foreground: oklch(0.141 0.005 285.823); --primary: oklch(0.646 0.222 47.604); --primary-foreground: oklch(0.98 0.016 73.684); --secondary: oklch(0.967 0.001 286.375); --secondary-foreground: oklch(0.21 0.006 285.885); --muted: oklch(0.967 0.001 286.375); --muted-foreground: oklch(0.552 0.016 285.938); --accent: oklch(0.967 0.001 286.375); --accent-foreground: oklch(0.21 0.006 285.885); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.92 0.004 286.32); --input: oklch(0.92 0.004 286.32); --ring: oklch(0.646 0.222 47.604); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.141 0.005 285.823); --sidebar-primary: oklch(0.646 0.222 47.604); --sidebar-primary-foreground: oklch(0.98 0.016 73.684); --sidebar-accent: oklch(0.967 0.001 286.375); --sidebar-accent-foreground: oklch(0.21 0.006 285.885); --sidebar-border: oklch(0.92 0.004 286.32); --sidebar-ring: oklch(0.646 0.222 47.604); } - &.dark { --background: oklch(0.141 0.005 285.823); --foreground: oklch(0.985 0 0); --card: oklch(0.21 0.006 285.885); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.21 0.006 285.885); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.646 0.222 41.116); --primary-foreground: oklch(0.98 0.016 73.684); --secondary: oklch(0.274 0.006 286.033); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.274 0.006 286.033); --muted-foreground: oklch(0.705 0.015 286.067); --accent: oklch(0.274 0.006 286.033); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: oklch(0.2 0.03 25); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.646 0.222 41.116); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.21 0.006 285.885); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.646 0.222 41.116); --sidebar-primary-foreground: oklch(0.98 0.016 73.684); --sidebar-accent: oklch(0.274 0.006 286.033); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.646 0.222 41.116); } -} -[data-theme="violet"] { - &:root, &.light { --radius: 0.65rem; --background: oklch(1 0 0); --foreground: oklch(0.141 0.005 285.823); --card: oklch(1 0 0); --card-foreground: oklch(0.141 0.005 285.823); --popover: oklch(1 0 0); --popover-foreground: oklch(0.141 0.005 285.823); --primary: oklch(0.52 0.25 292.717); --primary-foreground: oklch(0.969 0.016 293.756); --secondary: oklch(0.967 0.001 286.375); --secondary-foreground: oklch(0.21 0.006 285.885); --muted: oklch(0.967 0.001 286.375); --muted-foreground: oklch(0.552 0.016 285.938); --accent: oklch(0.967 0.001 286.375); --accent-foreground: oklch(0.21 0.006 285.885); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.92 0.004 286.32); --input: oklch(0.92 0.004 286.32); --ring: oklch(0.52 0.25 292.717); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.141 0.005 285.823); --sidebar-primary: oklch(0.52 0.25 292.717); --sidebar-primary-foreground: oklch(0.969 0.016 293.756); --sidebar-accent: oklch(0.967 0.001 286.375); --sidebar-accent-foreground: oklch(0.21 0.006 285.885); --sidebar-border: oklch(0.92 0.004 286.32); --sidebar-ring: oklch(0.52 0.25 292.717); } - &.dark { --background: oklch(0.141 0.005 285.823); --foreground: oklch(0.985 0 0); --card: oklch(0.21 0.006 285.885); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.21 0.006 285.885); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.52 0.281 293.009); --primary-foreground: oklch(0.969 0.016 293.756); --secondary: oklch(0.274 0.006 286.033); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.274 0.006 286.033); --muted-foreground: oklch(0.705 0.015 286.067); --accent: oklch(0.274 0.006 286.033); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: oklch(0.2 0.03 25); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.52 0.281 293.009); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.21 0.006 285.885); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.52 0.281 293.009); --sidebar-primary-foreground: oklch(0.969 0.016 293.756); --sidebar-accent: oklch(0.274 0.006 286.033); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.52 0.281 293.009); } -} -[data-theme="stone"] { - &:root, &.light { --radius: 0.625rem; --background: oklch(1 0 0); --foreground: oklch(0.147 0.004 49.25); --card: oklch(1 0 0); --card-foreground: oklch(0.147 0.004 49.25); --popover: oklch(1 0 0); --popover-foreground: oklch(0.147 0.004 49.25); --primary: oklch(0.216 0.006 56.043); --primary-foreground: oklch(0.985 0.001 106.423); --secondary: oklch(0.97 0.001 106.424); --secondary-foreground: oklch(0.216 0.006 56.043); --muted: oklch(0.97 0.001 106.424); --muted-foreground: oklch(0.553 0.013 58.071); --accent: oklch(0.97 0.001 106.424); --accent-foreground: oklch(0.216 0.006 56.043); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.923 0.003 48.717); --input: oklch(0.923 0.003 48.717); --ring: oklch(0.709 0.01 56.259); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0.001 106.423); --sidebar-foreground: oklch(0.147 0.004 49.25); --sidebar-primary: oklch(0.216 0.006 56.043); --sidebar-primary-foreground: oklch(0.985 0.001 106.423); --sidebar-accent: oklch(0.97 0.001 106.424); --sidebar-accent-foreground: oklch(0.216 0.006 56.043); --sidebar-border: oklch(0.923 0.003 48.717); --sidebar-ring: oklch(0.709 0.01 56.259); } - &.dark { --background: oklch(0.147 0.004 49.25); --foreground: oklch(0.985 0.001 106.423); --card: oklch(0.216 0.006 56.043); --card-foreground: oklch(0.985 0.001 106.423); --popover: oklch(0.216 0.006 56.043); --popover-foreground: oklch(0.985 0.001 106.423); --primary: oklch(0.96 0.003 48.717); --primary-foreground: oklch(0.216 0.006 56.043); --secondary: oklch(0.268 0.007 34.298); --secondary-foreground: oklch(0.985 0.001 106.423); --muted: oklch(0.268 0.007 34.298); --muted-foreground: oklch(0.709 0.01 56.259); --accent: oklch(0.268 0.007 34.298); --accent-foreground: oklch(0.985 0.001 106.423); --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: oklch(0.2 0.03 25); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.96 0.003 48.717); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.216 0.006 56.043); --sidebar-foreground: oklch(0.985 0.001 106.423); --sidebar-primary: oklch(0.96 0.003 48.717); --sidebar-primary-foreground: oklch(0.985 0.001 106.423); --sidebar-accent: oklch(0.268 0.007 34.298); --sidebar-accent-foreground: oklch(0.985 0.001 106.423); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.96 0.003 48.717); } -} -@keyframes shimmer { - 0% { background-position: 100% 0px; } - 100% { background-position: -100% 0px; } -} -:host { flex-grow: 1; } -:host, :root, html, body, .app, .project-view { display: block; min-height: 100%; scroll-behavior: smooth; interpolate-size: allow-keywords; background-color: var(--background); color: var(--foreground); } -@layer base { - * { - border-color: var(--border); outline-color: var(--ring); - @supports (color: color-mix(in lab, red, red)) { - outline-color: color-mix(in oklab, var(--ring) 50%, transparent); -} - &:focus-visible { --tw-outline-style: solid; outline-style: solid; } -} - .app { background-color: var(--background); color: var(--foreground); } - button:not(:disabled), [role="button"]:not(:disabled) { cursor: pointer; } - .loading-text { - pointer-events: none; animation: 2s linear 0s infinite normal none running shimmer; background-image: linear-gradient(90deg, oklch(from var(--muted-foreground) l c h / 0.2) 20%, oklch(from var(--foreground) l c h / 0.3) 50%, oklch(from var(--muted-foreground) l c h / 0.2) 65%); background-size: 200% 100%; background-repeat: repeat; border-radius: calc(var(--radius) - 2px); user-select: none; color: transparent; - & * { opacity: 0; } -} -} -.font-inter { font-family: Inter, sans-serif; } -[id^="entry"] { scroll-margin-top: 1rem; } -[id^="entry"], [id^="sense"], .editor-sub-grid:has(> [id^="sense"]) { scroll-margin-bottom: 4rem; } -[id^="example"], .editor-sub-grid:has(> [id^="example"]) { scroll-margin-top: 3.5rem; scroll-margin-bottom: 3.5rem; } -[data-vaul-drawer] [class*="overflow-auto"], [data-vaul-drawer] [class*="overflow-y-auto"], [data-vaul-drawer] [class*="overflow-x-auto"], [data-vaul-drawer] [class*="overflow-scroll"], [data-vaul-drawer] [class*="overflow-y-scroll"], [data-vaul-drawer] [class*="overflow-x-scroll"] { overscroll-behavior: contain; } -.x-ellipsis { max-width: 100%; overflow: hidden; text-overflow: ellipsis; line-height: 1.3em; } -@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; } -@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; } -@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; } -@property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; } -@property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; } -@property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; } -@property --tw-rotate-x { syntax: "*"; inherits: false; } -@property --tw-rotate-y { syntax: "*"; inherits: false; } -@property --tw-rotate-z { syntax: "*"; inherits: false; } -@property --tw-skew-x { syntax: "*"; inherits: false; } -@property --tw-skew-y { syntax: "*"; inherits: false; } -@property --tw-pan-x { syntax: "*"; inherits: false; } -@property --tw-pan-y { syntax: "*"; inherits: false; } -@property --tw-pinch-zoom { syntax: "*"; inherits: false; } -@property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } -@property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; } -@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } -@property --tw-leading { syntax: "*"; inherits: false; } -@property --tw-font-weight { syntax: "*"; inherits: false; } -@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-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } -@property --tw-shadow-color { syntax: "*"; inherits: false; } -@property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } -@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } -@property --tw-inset-shadow-color { syntax: "*"; inherits: false; } -@property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } -@property --tw-ring-color { syntax: "*"; inherits: false; } -@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } -@property --tw-inset-ring-color { syntax: "*"; inherits: false; } -@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } -@property --tw-ring-inset { syntax: "*"; inherits: false; } -@property --tw-ring-offset-width { syntax: ""; inherits: false; initial-value: 0px; } -@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } -@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } -@property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; } -@property --tw-blur { syntax: "*"; inherits: false; } -@property --tw-brightness { syntax: "*"; inherits: false; } -@property --tw-contrast { syntax: "*"; inherits: false; } -@property --tw-grayscale { syntax: "*"; inherits: false; } -@property --tw-hue-rotate { syntax: "*"; inherits: false; } -@property --tw-invert { syntax: "*"; inherits: false; } -@property --tw-opacity { syntax: "*"; inherits: false; } -@property --tw-saturate { syntax: "*"; inherits: false; } -@property --tw-sepia { syntax: "*"; inherits: false; } -@property --tw-drop-shadow { syntax: "*"; inherits: false; } -@property --tw-drop-shadow-color { syntax: "*"; inherits: false; } -@property --tw-drop-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } -@property --tw-drop-shadow-size { syntax: "*"; inherits: false; } -@property --tw-duration { syntax: "*"; inherits: false; } -@property --tw-ease { 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; } -@property --tw-content { syntax: "*"; inherits: false; initial-value: ""; } -@keyframes spin { - 100% { transform: rotate(360deg); } -} -@keyframes ping { - 75%, 100% { transform: scale(2); opacity: 0; } -} -@keyframes pulse { - 50% { opacity: 0.5; } -} -@keyframes enter { - 0% { opacity: var(--tw-enter-opacity,1); transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0)); filter: blur(var(--tw-enter-blur,0)); } -} -@keyframes exit { - 100% { opacity: var(--tw-exit-opacity,1); transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0)); filter: blur(var(--tw-exit-blur,0)); } -} -@keyframes accordion-down { - 0% { height: 0px; } - 100% { height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto))))); } -} -@keyframes accordion-up { - 0% { height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto))))); } - 100% { height: 0px; } -} -@keyframes collapsible-down { - 0% { height: 0px; } - 100% { height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto)))); } -} -@keyframes collapsible-up { - 0% { height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto)))); } - 100% { height: 0px; } -} -@layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scale-z: 1; --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-pan-x: initial; --tw-pan-y: initial; --tw-pinch-zoom: initial; --tw-space-y-reverse: 0; --tw-space-x-reverse: 0; --tw-border-style: solid; --tw-leading: initial; --tw-font-weight: initial; --tw-tracking: initial; --tw-ordinal: initial; --tw-slashed-zero: initial; --tw-numeric-figure: initial; --tw-numeric-spacing: initial; --tw-numeric-fraction: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-outline-style: solid; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; --tw-grayscale: initial; --tw-hue-rotate: initial; --tw-invert: initial; --tw-opacity: initial; --tw-saturate: initial; --tw-sepia: initial; --tw-drop-shadow: initial; --tw-drop-shadow-color: initial; --tw-drop-shadow-alpha: 100%; --tw-drop-shadow-size: initial; --tw-duration: initial; --tw-ease: initial; --tw-contain-size: initial; --tw-contain-layout: initial; --tw-contain-paint: initial; --tw-contain-style: initial; --tw-content: ""; --tw-animation-delay: 0s; --tw-animation-direction: normal; --tw-animation-duration: initial; --tw-animation-fill-mode: none; --tw-animation-iteration-count: 1; --tw-enter-blur: 0; --tw-enter-opacity: 1; --tw-enter-rotate: 0; --tw-enter-scale: 1; --tw-enter-translate-x: 0; --tw-enter-translate-y: 0; --tw-exit-blur: 0; --tw-exit-opacity: 1; --tw-exit-rotate: 0; --tw-exit-scale: 1; --tw-exit-translate-x: 0; --tw-exit-translate-y: 0; } -} -} \ No newline at end of file From b94fafa86dd766741310853b556ac6f43109d156 Mon Sep 17 00:00:00 2001 From: Kevin Hahn Date: Wed, 29 Jul 2026 11:50:45 +0700 Subject: [PATCH 07/22] enable autofocus on mount for text area --- .../viewer/src/lib/components/ui/textarea/textarea.svelte | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/frontend/viewer/src/lib/components/ui/textarea/textarea.svelte b/frontend/viewer/src/lib/components/ui/textarea/textarea.svelte index d510242641..7f8dea55ee 100644 --- a/frontend/viewer/src/lib/components/ui/textarea/textarea.svelte +++ b/frontend/viewer/src/lib/components/ui/textarea/textarea.svelte @@ -1,5 +1,6 @@