@layer reset, tokens, base, components, utilities, overrides;
@layer reset {
*,
*::before,
*::after {
box-sizing: border-box;
}
[hidden]:not([hidden="until-found"]) {
display: none !important;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
body {
min-height: 100%;
line-height: var(--wm-line-height-normal, 1.35);
}
img,
picture,
svg,
video,
canvas {
display: block;
max-width: 100%;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
letter-spacing: inherit;
}
button {
background: none;
border: none;
padding: 0;
cursor: pointer;
text-align: inherit;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
list-style: none;
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset {
border: none;
margin: 0;
padding: 0;
min-width: 0;
}
legend {
padding: 0;
}
::selection {
background: var(--wm-selection-bg, rgba(0, 68, 238, 0.22));
}
}
@layer tokens {
:root {
--wm-brand-cyan: #2ac2f3;
--wm-brand-blue-light: #198fde;
--wm-brand-blue: #0049ff;
--wm-brand-blue-violet: #020bb5;
--wm-brand-indigo: #0a008e;
--wm-brand-black: #000000;
--wm-brand-white: #ffffff;
--wm-space-0: 0;
--wm-space-1: 2px;
--wm-space-2: 4px;
--wm-space-3: 6px;
--wm-space-4: 8px;
--wm-space-5: 10px;
--wm-space-6: 12px;
--wm-space-7: 14px;
--wm-space-8: 16px;
--wm-space-9: 20px;
--wm-space-10: 24px;
--wm-space-11: 32px;
--wm-space-12: 40px;
--wm-space-13: 48px;
--wm-space-14: 64px;
--wm-radius-xs: 4px;
--wm-radius-sm: 6px;
--wm-radius-md: 8px;
--wm-radius-lg: 10px;
--wm-radius-xl: 14px;
--wm-radius-2xl: 18px;
--wm-radius-pill: 999px;
--wm-radius-hairline: 1px;
--wm-radius-window: 22px;
--wm-radius-window-xl: 26px;
--wm-radius-panel: 16px;
--wm-radius-sheet-top: 16px;
--wm-radius-list-group: 12px;
--wm-radius-settings-group: 12px;
--wm-radius-settings-icon: 7px;
--wm-control-height-xs: 20px;
--wm-control-height-sm: 24px;
--wm-control-height-md: 28px;
--wm-control-height-lg: 34px;
--wm-control-height-xl: 40px;
--wm-control-height-2xl: 48px;
--wm-control-height-3xl: 64px;
--wm-fab-size: 48px;
--wm-fab-size-mini: 36px;
--wm-fab-menu-radius: 76px;
--wm-icon-xs: 12px;
--wm-icon-sm: 14px;
--wm-icon-md: 16px;
--wm-icon-lg: 20px;
--wm-icon-xl: 24px;
--wm-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
"SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif;
--wm-font-family-mono: ui-monospace, "SF Mono", "Menlo", "Cascadia Code",
Consolas, monospace;
--wm-font-size-caption2: 10px;
--wm-font-size-caption: 10px;
--wm-font-size-footnote: 10px;
--wm-font-size-subheadline: 11px;
--wm-font-size-callout: 12px;
--wm-font-size-body: 13px;
--wm-font-size-headline: 13px;
--wm-font-size-title3: 15px;
--wm-font-size-title2: 17px;
--wm-font-size-title1: 22px;
--wm-font-size-large-title: 26px;
--wm-leading-caption2: 13px;
--wm-leading-caption: 13px;
--wm-leading-footnote: 13px;
--wm-leading-subheadline: 14px;
--wm-leading-callout: 15px;
--wm-leading-body: 16px;
--wm-leading-headline: 16px;
--wm-leading-title3: 20px;
--wm-leading-title2: 22px;
--wm-leading-title1: 26px;
--wm-leading-large-title: 32px;
--wm-tracking-caption2: 0.12px;
--wm-tracking-caption: 0.12px;
--wm-tracking-footnote: 0.12px;
--wm-tracking-subheadline: 0.06px;
--wm-tracking-callout: 0px;
--wm-tracking-body: -0.08px;
--wm-tracking-headline: -0.08px;
--wm-tracking-title3: -0.23px;
--wm-tracking-title2: -0.43px;
--wm-tracking-title1: -0.26px;
--wm-tracking-large-title: 0.22px;
--wm-line-height-tight: 1.15;
--wm-line-height-normal: 1.35;
--wm-line-height-relaxed: 1.5;
--wm-font-weight-regular: 400;
--wm-font-weight-medium: 500;
--wm-font-weight-semibold: 590;
--wm-font-weight-bold: 700;
--wm-letter-spacing-tighter: -0.02em;
--wm-letter-spacing-tight: -0.01em;
--wm-letter-spacing-normal: 0;
--wm-letter-spacing-wide: 0.02em;
--wm-duration-instant: 60ms;
--wm-duration-fast: 120ms;
--wm-duration-normal: 180ms;
--wm-duration-slow: 260ms;
--wm-duration-ambient: 2.8s;
--wm-duration-ambient-slow: 7s;
--wm-duration-spinner: 700ms;
--wm-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--wm-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
--wm-ease-spring: cubic-bezier(0.34, 1.25, 0.64, 1);
--wm-ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
--wm-scale-pressed: 0.985;
--wm-scale-pressed-sm: 0.97;
--wm-scale-hover-raise: -1px;
--wm-z-base: 0;
--wm-z-sticky: 100;
--wm-z-toolbar: 200;
--wm-z-sidebar: 300;
--wm-z-popover: 400;
--wm-z-dropdown: 410;
--wm-z-sheet: 500;
--wm-z-modal: 600;
--wm-z-toast: 700;
--wm-z-tooltip: 800;
--wm-border-width-hairline: 0.5px;
--wm-border-width-thin: 1px;
--wm-border-width-thick: 2px;
--wm-focus-ring-width: 2px;
--wm-focus-ring-offset: 1px;
--wm-focus-halo-width: 4px;
--wm-nav-bottom-height: 56px;
--wm-nav-header-height: 52px;
--wm-nav-header-height-compact: 40px;
--wm-nav-action-size: 48px;
--wm-nav-sidebar-width: 248px;
--wm-nav-sidebar-width-collapsed: 64px;
--wm-nav-floating-height: 48px;
--wm-nav-dock-icon: 44px;
--wm-nav-search-width: 320px;
--wm-nav-submenu-min-width: 236px;
--wm-menu-context-min-width: 220px;
--wm-breadcrumb-truncate-width: 160px;
--wm-menu-min-width: 210px;
--wm-menu-item-icon-size: 15px;
--wm-cmdk-width: 560px;
--wm-cmdk-margin-top: 12vh;
--wm-cmdk-list-max-height: 340px;
--wm-cmdk-kbd-size: 18px;
--wm-cmdk-kbd-gap: 3px;
--wm-loading-size-sm: 16px;
--wm-loading-size-md: 24px;
--wm-loading-size-lg: 32px;
--wm-loading-stroke-sm: 2px;
--wm-loading-stroke-md: 2.5px;
--wm-loading-stroke-lg: 3px;
--wm-loading-ring-size-sm: 48px;
--wm-loading-ring-size-md: 72px;
--wm-loading-ring-size-lg: 112px;
--wm-loading-bar-height: 6px;
--wm-loading-bar-height-thin: 3px;
--wm-duration-loading-spin: 900ms;
--wm-duration-loading-shimmer: 1600ms;
--wm-duration-loading-pulse: 1400ms;
--wm-duration-waveform: 400ms;
--wm-duration-bg-drift: 14s;
--wm-duration-bg-drift-slow: 26s;
--wm-duration-toast: 5000ms;
--wm-skeleton-line-height: 10px;
--wm-skeleton-title-height: 14px;
--wm-skeleton-avatar-size: 36px;
--wm-skeleton-avatar-size-lg: 48px;
--wm-skeleton-media-height: 120px;
--wm-search-bar-max-width: 280px;
--wm-search-suggest-max-height: 260px;
--wm-search-lightbox-width: 680px;
--wm-search-lightbox-list-height: 380px;
--wm-search-lightbox-preview-width: 240px;
--wm-filters-menu-width: 240px;
--wm-badge-height: 18px;
--wm-badge-dot-size: 6px;
--wm-chip-avatar-size: 18px;
--wm-chip-remove-size: 16px;
--wm-icon-sheet-cell: 84px;
--wm-tags-suggest-max-height: 220px;
--wm-grid-min-col-sm: 160px;
--wm-grid-min-col: 220px;
--wm-grid-min-col-lg: 280px;
--wm-grid-row-unit: 120px;
--wm-carousel-item-w: 240px;
--wm-carousel-item-w-lg: 320px;
--wm-carousel-peek: 48px;
--wm-carousel-thumb-w: 64px;
--wm-carousel-nav-size: 32px;
--wm-slides-h: 340px;
--wm-slides-indicator-size: 8px;
--wm-lightbox-max-w: 960px;
--wm-image-frame-pad: 6px;
--wm-image-gradient-border: 2px;
--wm-image-blur-up: 24px;
--wm-product-media-h: 200px;
--wm-hero-media-min-h: 480px;
--wm-hero-media-min-h-sm: 320px;
--wm-hero-mockup-w: 420px;
--wm-hero-mockup-w-back: 300px;
--wm-ratio-square: 1;
--wm-ratio-photo: 4 / 3;
--wm-ratio-wide: 16 / 9;
--wm-ratio-portrait: 3 / 4;
--wm-ratio-panorama: 21 / 9;
--wm-state-min-height: 380px;
--wm-state-max-width: 420px;
--wm-state-max-width-wide: 520px;
--wm-state-figure-size: 64px;
--wm-state-figure-size-lg: 88px;
--wm-state-glyph-size: 26px;
--wm-state-glyph-size-lg: 36px;
--wm-state-code-size: 56px;
--wm-state-code-leading: 58px;
--wm-state-detail-max-height: 180px;
--wm-state-banner-height: 36px;
--wm-state-halo-blur: 28px;
--wm-auth-card-width: 380px;
--wm-auth-card-width-wide: 440px;
--wm-auth-mark-size: 44px;
--wm-auth-provider-icon: 18px;
--wm-auth-strength-height: 4px;
--wm-otp-cell-width: 46px;
--wm-otp-cell-height: 56px;
--wm-duration-countdown-tick: 1000ms;
--wm-ai-cursor-width: 2px;
--wm-ai-cursor-height: var(--wm-leading-body);
--wm-ai-cursor-radius: 1px;
--wm-duration-ai-caret: 1060ms;
--wm-duration-ai-token: 220ms;
--wm-duration-ai-think: 1500ms;
--wm-duration-ai-shimmer: 2400ms;
--wm-duration-ai-sweep: 3200ms;
--wm-ai-measure: 68ch;
--wm-ai-stream-min-height: 72px;
--wm-ai-block-padding: var(--wm-space-7);
--wm-ai-strip-width: 3px;
--wm-ai-glyph-size: 22px;
--wm-ai-avatar-size: 28px;
--wm-ai-avatar-size-lg: 36px;
--wm-ai-dot-size: 5px;
--wm-ai-dot-gap: var(--wm-space-2);
--wm-ai-thinking-max-height: 220px;
--wm-ai-toolcall-output-max-height: 240px;
--wm-ai-queue-max-height: 196px;
--wm-ai-diff-max-height: 340px;
--wm-ai-cite-marker-size: 16px;
--wm-ai-cite-marker-size-sm: 14px;
--wm-ai-cite-card-width: 288px;
--wm-ai-cite-favicon-size: 16px;
--wm-ai-suggest-card-min: 208px;
--wm-ai-suggest-card-min-height: 84px;
--wm-ai-diff-gutter-width: 40px;
--wm-ai-diff-mark-width: 14px;
--wm-ai-diff-line-height: 19px;
--wm-ai-panel-width: 340px;
--wm-ai-progress-height: 4px;
--wm-ai-progress-height-lg: 6px;
--wm-ai-batch-scan-max-width: 560px;
--wm-ai-batch-scan-feed-max-height: 236px;
--wm-ai-batch-scan-item-icon-size: 20px;
--wm-agentic-track-width: 216px;
--wm-agentic-track-width-wide: 248px;
--wm-agentic-marker-size: 20px;
--wm-agentic-marker-size-sm: 14px;
--wm-agentic-rail-width: 2px;
--wm-agentic-track-indent: calc(
var(--wm-agentic-marker-size) + var(--wm-space-6)
);
--wm-agentic-measure: 62ch;
--wm-agentic-avatar-size: var(--wm-ai-avatar-size);
--wm-agentic-bubble-radius: var(--wm-radius-xl);
--wm-agentic-turn-gap: var(--wm-space-8);
--wm-agentic-turn-min-height: 64px;
--wm-agentic-thread-max-height: 460px;
--wm-agentic-summary-width: 264px;
--wm-agentic-summary-label-width: 92px;
--wm-agentic-handoff-icon-size: 28px;
--wm-agentic-handoff-strip-width: 3px;
--wm-bp-xs: 420px;
--wm-bp-sm: 560px;
--wm-bp-md: 680px;
--wm-bp-lg: 900px;
--wm-bp-xl: 940px;
--wm-grid-columns-xs: 4;
--wm-grid-columns-sm: 6;
--wm-grid-columns-md: 8;
--wm-grid-columns-lg: 12;
--wm-grid-columns-xl: 12;
--wm-grid-gutter-xs: var(--wm-space-6);
--wm-grid-gutter-sm: var(--wm-space-8);
--wm-grid-gutter-md: var(--wm-space-8);
--wm-grid-gutter-lg: var(--wm-space-9);
--wm-grid-gutter-xl: var(--wm-space-9);
--wm-grid-margin-xs: var(--wm-space-8);
--wm-grid-margin-sm: var(--wm-space-9);
--wm-grid-margin-md: var(--wm-space-10);
--wm-grid-margin-lg: var(--wm-space-11);
--wm-grid-margin-xl: var(--wm-space-11);
--wm-container-sm: 560px;
--wm-container-md: 640px;
--wm-container-lg: 860px;
--wm-container-xl: 1040px;
--wm-container-prose: 68ch;
--wm-grid-columns: var(--wm-grid-columns-xs);
--wm-grid-gutter: var(--wm-grid-gutter-xs);
--wm-grid-margin: var(--wm-grid-margin-xs);
--wm-container: 100%;
--wm-density-compact-height: var(--wm-control-height-sm);
--wm-density-compact-font: var(--wm-font-size-subheadline);
--wm-density-compact-leading: var(--wm-leading-subheadline);
--wm-density-compact-icon: var(--wm-icon-sm);
--wm-density-compact-radius: var(--wm-radius-xs);
--wm-density-compact-pad: var(--wm-space-4);
--wm-density-compact-gap: var(--wm-space-2);
--wm-density-compact-row: var(--wm-control-height-sm);
--wm-density-normal-height: var(--wm-control-height-md);
--wm-density-normal-font: var(--wm-font-size-body);
--wm-density-normal-leading: var(--wm-leading-body);
--wm-density-normal-icon: var(--wm-icon-md);
--wm-density-normal-radius: var(--wm-radius-md);
--wm-density-normal-pad: var(--wm-space-6);
--wm-density-normal-gap: var(--wm-space-3);
--wm-density-normal-row: var(--wm-space-11);
--wm-density-comfortable-height: var(--wm-control-height-lg);
--wm-density-comfortable-font: var(--wm-font-size-body);
--wm-density-comfortable-leading: var(--wm-leading-body);
--wm-density-comfortable-icon: var(--wm-icon-lg);
--wm-density-comfortable-radius: var(--wm-radius-lg);
--wm-density-comfortable-pad: var(--wm-space-8);
--wm-density-comfortable-gap: var(--wm-space-4);
--wm-density-comfortable-row: var(--wm-control-height-xl);
--wm-density-height: var(--wm-density-normal-height);
--wm-density-font: var(--wm-density-normal-font);
--wm-density-leading: var(--wm-density-normal-leading);
--wm-density-icon: var(--wm-density-normal-icon);
--wm-density-radius: var(--wm-density-normal-radius);
--wm-density-pad: var(--wm-density-normal-pad);
--wm-density-gap: var(--wm-density-normal-gap);
--wm-density-row: var(--wm-density-normal-row);
--wm-duration-enter: var(--wm-duration-normal);
--wm-duration-exit: var(--wm-duration-fast);
--wm-ease-enter: var(--wm-ease-emphasized);
--wm-ease-exit: var(--wm-ease-standard);
--wm-motion-offset-sm: var(--wm-space-2);
--wm-motion-offset-md: var(--wm-space-4);
--wm-motion-offset-lg: var(--wm-space-8);
--wm-motion-scale-enter: 0.96;
--wm-motion-scale-exit: 0.98;
--wm-icon-grid: 24;
--wm-icon-live-area: 20;
--wm-icon-keyline-pad: 2;
--wm-icon-stroke: 2;
--wm-icon-stroke-bold: 2.5;
--wm-icon-2xl: 32px;
--wm-icon-3xl: 48px;
--wm-icon-optical-nudge: 0.5px;
--wm-z-below: -1;
--wm-z-fab: 250;
--wm-z-overlay: 590;
}
@media (min-width: 420px) {
:root {
--wm-grid-columns: var(--wm-grid-columns-xs);
--wm-grid-gutter: var(--wm-grid-gutter-xs);
--wm-grid-margin: var(--wm-grid-margin-xs);
--wm-container: 100%;
}
}
@media (min-width: 560px) {
:root {
--wm-grid-columns: var(--wm-grid-columns-sm);
--wm-grid-gutter: var(--wm-grid-gutter-sm);
--wm-grid-margin: var(--wm-grid-margin-sm);
--wm-container: var(--wm-container-sm);
}
}
@media (min-width: 680px) {
:root {
--wm-grid-columns: var(--wm-grid-columns-md);
--wm-grid-gutter: var(--wm-grid-gutter-md);
--wm-grid-margin: var(--wm-grid-margin-md);
--wm-container: var(--wm-container-md);
}
}
@media (min-width: 900px) {
:root {
--wm-grid-columns: var(--wm-grid-columns-lg);
--wm-grid-gutter: var(--wm-grid-gutter-lg);
--wm-grid-margin: var(--wm-grid-margin-lg);
--wm-container: var(--wm-container-lg);
}
}
@media (min-width: 940px) {
:root {
--wm-grid-columns: var(--wm-grid-columns-xl);
--wm-grid-gutter: var(--wm-grid-gutter-xl);
--wm-grid-margin: var(--wm-grid-margin-xl);
--wm-container: var(--wm-container-xl);
}
}
[data-wm-density="compact"] {
--wm-density-height: var(--wm-density-compact-height);
--wm-density-font: var(--wm-density-compact-font);
--wm-density-leading: var(--wm-density-compact-leading);
--wm-density-icon: var(--wm-density-compact-icon);
--wm-density-radius: var(--wm-density-compact-radius);
--wm-density-pad: var(--wm-density-compact-pad);
--wm-density-gap: var(--wm-density-compact-gap);
--wm-density-row: var(--wm-density-compact-row);
}
[data-wm-density="normal"] {
--wm-density-height: var(--wm-density-normal-height);
--wm-density-font: var(--wm-density-normal-font);
--wm-density-leading: var(--wm-density-normal-leading);
--wm-density-icon: var(--wm-density-normal-icon);
--wm-density-radius: var(--wm-density-normal-radius);
--wm-density-pad: var(--wm-density-normal-pad);
--wm-density-gap: var(--wm-density-normal-gap);
--wm-density-row: var(--wm-density-normal-row);
}
[data-wm-density="comfortable"] {
--wm-density-height: var(--wm-density-comfortable-height);
--wm-density-font: var(--wm-density-comfortable-font);
--wm-density-leading: var(--wm-density-comfortable-leading);
--wm-density-icon: var(--wm-density-comfortable-icon);
--wm-density-radius: var(--wm-density-comfortable-radius);
--wm-density-pad: var(--wm-density-comfortable-pad);
--wm-density-gap: var(--wm-density-comfortable-gap);
--wm-density-row: var(--wm-density-comfortable-row);
}
@media (prefers-reduced-motion: reduce) {
:root {
--wm-duration-instant: 0ms;
--wm-duration-fast: 0ms;
--wm-duration-normal: 0ms;
--wm-duration-slow: 0ms;
--wm-duration-ambient: 0ms;
--wm-duration-ambient-slow: 0ms;
--wm-duration-ai-caret: 0ms;
--wm-duration-ai-token: 0ms;
--wm-duration-ai-think: 0ms;
--wm-duration-ai-shimmer: 0ms;
--wm-duration-ai-sweep: 0ms;
}
}
}
@layer tokens {
:root {
--wm-vid-scale-xs: 2px;
--wm-vid-scale-sm: 4px;
--wm-vid-scale-md: 8px;
--wm-vid-scale-lg: 18px;
--wm-vid-scale-xl: 40px;
--wm-vid-scale-min: 1px;
--wm-vid-scale-max: 240px;
--wm-vid-frame-width: 2px;
--wm-vid-ruler-height: 26px;
--wm-vid-ruler-height-lg: 32px;
--wm-vid-ruler-tick-h: 5px;
--wm-vid-ruler-tick-h-major: 10px;
--wm-vid-ruler-tick-gap: 8px;
--wm-vid-track-height-sm: 36px;
--wm-vid-track-height: 56px;
--wm-vid-track-height-lg: 84px;
--wm-vid-track-height-xl: 112px;
--wm-vid-track-gap: 2px;
--wm-vid-track-header-width: 148px;
--wm-vid-track-header-width-sm: 108px;
--wm-vid-track-badge: 20px;
--wm-vid-clip-radius: 5px;
--wm-vid-clip-accent-height: 3px;
--wm-vid-clip-thumb-width: 44px;
--wm-vid-clip-thumb-width-lg: 64px;
--wm-vid-clip-min-width: 18px;
--wm-vid-clip-inset: 1px;
--wm-vid-clip-badge: 14px;
--wm-vid-playhead-width: 1px;
--wm-vid-playhead-head-width: 13px;
--wm-vid-playhead-head-height: 10px;
--wm-vid-playhead-hit: 13px;
--wm-vid-trim-width: 9px;
--wm-vid-trim-width-lg: 12px;
--wm-vid-trim-grip: 2px;
--wm-vid-trim-grip-height: 14px;
--wm-vid-roll-width: 14px;
--wm-vid-marker-size: 11px;
--wm-vid-marker-stem: 2px;
--wm-vid-marker-label-max: 168px;
--wm-vid-snap-width: 1px;
--wm-vid-range-handle: 10px;
--wm-vid-transport-height: 40px;
--wm-vid-transport-btn: 30px;
--wm-vid-transport-btn-lg: 38px;
--wm-vid-scrubber-height: 5px;
--wm-vid-scrubber-height-lg: 7px;
--wm-vid-scrubber-thumb: 13px;
--wm-vid-scrub-preview-w: 148px;
--wm-vid-viewer-max-width: 720px;
--wm-vid-viewer-pad: var(--wm-space-4);
--wm-vid-overlay-handle: 11px;
--wm-vid-overlay-rotate-arm: 26px;
--wm-vid-inspector-width: 300px;
--wm-vid-panel-radius: var(--wm-radius-lg);
--wm-vid-wheel-size: 108px;
--wm-vid-wheel-size-sm: 84px;
--wm-vid-wheel-puck: 14px;
--wm-vid-scope-size: 168px;
--wm-vid-keyframe-size: 9px;
--wm-vid-curve-height: 160px;
--wm-vid-effect-tile: 136px;
--wm-vid-transition-width: 40px;
--wm-vid-transition-width-lg: 56px;
--wm-vid-timecode-width: 112px;
--wm-vid-zoom-width: 132px;
--wm-vid-export-width: 560px;
--wm-duration-editor-scrub: 90ms;
--wm-duration-editor-snap: 120ms;
}
@media (prefers-reduced-motion: reduce) {
:root {
--wm-duration-editor-scrub: 0ms;
--wm-duration-editor-snap: 0ms;
}
}
}
@layer tokens {
:root {
--wm-aud-ruler-height: 26px;
--wm-aud-ruler-height-lg: 34px;
--wm-aud-track-height-sm: 44px;
--wm-aud-track-height: 72px;
--wm-aud-track-height-lg: 108px;
--wm-aud-track-col-width: 208px;
--wm-aud-track-col-width-sm: 148px;
--wm-aud-track-tint-width: 4px;
--wm-aud-grid-bar: 96px;
--wm-aud-grid-beat: 24px;
--wm-aud-playhead-width: 1px;
--wm-aud-playhead-head-size: 11px;
--wm-aud-marker-height: 18px;
--wm-aud-marker-flag-notch: 6px;
--wm-aud-clip-radius: var(--wm-radius-sm);
--wm-aud-clip-title-height: 15px;
--wm-aud-clip-handle-width: 9px;
--wm-aud-fade-handle-size: 11px;
--wm-aud-wave-height: 96px;
--wm-aud-wave-height-sm: 48px;
--wm-aud-wave-height-lg: 160px;
--wm-aud-wave-zero-width: 1px;
--wm-aud-strip-width: 84px;
--wm-aud-strip-width-sm: 64px;
--wm-aud-fader-length: 168px;
--wm-aud-fader-length-sm: 112px;
--wm-aud-fader-track-width: 7px;
--wm-aud-fader-thumb-width: 30px;
--wm-aud-fader-thumb-height: 15px;
--wm-aud-fader-tick-length: 5px;
--wm-aud-fader-tick-length-zero: 9px;
--wm-aud-knob-size-sm: 30px;
--wm-aud-knob-size: 44px;
--wm-aud-knob-size-lg: 60px;
--wm-aud-knob-arc-width: 3px;
--wm-aud-knob-pointer-width: 2px;
--wm-aud-knob-sweep: 270deg;
--wm-aud-knob-gap: 45deg;
--wm-aud-meter-width: 9px;
--wm-aud-meter-width-sm: 5px;
--wm-aud-meter-length: 168px;
--wm-aud-meter-length-sm: 96px;
--wm-aud-meter-segment: 4px;
--wm-aud-meter-segment-gap: 1px;
--wm-aud-meter-hold-width: 2px;
--wm-aud-meter-clip-size: 9px;
--wm-aud-meter-zone-warn: 90%;
--wm-aud-meter-zone-clip: 98.4%;
--wm-aud-vu-size: 96px;
--wm-aud-vu-needle-width: 1.5px;
--wm-aud-graph-height: 168px;
--wm-aud-graph-height-sm: 108px;
--wm-aud-graph-height-lg: 220px;
--wm-aud-eq-node-size: 15px;
--wm-aud-eq-curve-width: 2px;
--wm-aud-spectrum-height: 120px;
--wm-aud-spectrum-bar-gap: 1px;
--wm-aud-plugin-slot-height: 22px;
--wm-aud-plugin-power-size: 11px;
--wm-aud-plugin-header-height: 34px;
--wm-aud-transport-height: 44px;
--wm-aud-transport-btn-size: 30px;
--wm-aud-transport-btn-size-lg: 38px;
--wm-aud-lcd-height: 40px;
--wm-aud-lcd-radius: var(--wm-radius-sm);
--wm-aud-automation-height: 56px;
--wm-aud-automation-node-size: 9px;
--wm-aud-automation-line-width: 1.5px;
--wm-aud-metronome-beat-size: 10px;
--wm-duration-meter-attack: 20ms;
--wm-duration-meter-decay: 340ms;
--wm-duration-meter-hold: 1400ms;
--wm-duration-meter-clip-hold: 3000ms;
--wm-aud-meter-fps: 60;
--wm-aud-meter-fps-reduced: 10;
--wm-duration-metronome-flash: 90ms;
}
@media (prefers-reduced-motion: reduce) {
:root {
--wm-duration-meter-attack: 0ms;
--wm-duration-meter-decay: 0ms;
--wm-duration-metronome-flash: 0ms;
--wm-aud-meter-fps: 10;
}
}
}
@layer tokens {
:root {
--wm-img-toolbar-width: 44px;
--wm-img-toolbar-button: 32px;
--wm-img-toolbar-gap: var(--wm-space-1);
--wm-img-panel-width: 288px;
--wm-img-panel-width-sm: 232px;
--wm-ia-panel-width: 720px;
--wm-ia-panel-width-compact: 360px;
--wm-ia-run-id-width: 220px;
--wm-transfer-flow-width: 480px;
--wm-img-row-height: 28px;
--wm-img-ruler-size: 18px;
--wm-img-canvas-min-height: 320px;
--wm-img-canvas-pad: var(--wm-space-9);
--wm-img-checker-size: 12px;
--wm-img-checker-size-sm: 8px;
--wm-img-handle-size: 18px;
--wm-img-handle-weight: 3px;
--wm-img-handle-edge: 28px;
--wm-img-handle-hit: 24px;
--wm-img-crop-line: 1px;
--wm-img-slider-label-w: 92px;
--wm-img-slider-track: 4px;
--wm-img-slider-thumb: 14px;
--wm-img-slider-thumb-lg: 16px;
--wm-img-zero-tick: 8px;
--wm-img-wheel-height: 40px;
--wm-img-wheel-tick: 10px;
--wm-img-wheel-tick-major: 16px;
--wm-img-wheel-step: 8px;
--wm-img-layer-thumb: 34px;
--wm-img-layer-row: 44px;
--wm-img-layer-indent: var(--wm-space-8);
--wm-img-mask-thumb: 28px;
--wm-img-histogram-height: 68px;
--wm-img-histogram-height-lg: 96px;
--wm-img-curves-size: 208px;
--wm-img-levels-height: 84px;
--wm-img-divider-width: 2px;
--wm-img-divider-knob: 30px;
--wm-img-loupe-size: 104px;
--wm-img-loupe-pixel: 13px;
--wm-img-preset-cell: 96px;
--wm-img-preset-cell-sm: 72px;
--wm-img-swatch: 22px;
--wm-img-color-wheel: 168px;
--wm-img-color-field: 168px;
--wm-img-export-width: 420px;
}
}
@layer tokens {
:root {
--wm-lane-h-xl: 26px;
--wm-lane-h-lg: 18px;
--wm-lane-h-md: 16px;
--wm-lane-h-sm: 15px;
--wm-lane-h-xs: 7px;
--wm-lane-hairline: 1px;
--wm-lane-gap: 1px;
--wm-lane-label-width: 96px;
--wm-lane-map-height: 116px;
}
}
@layer tokens {
:root {
--wm-wic-cursor-size: 18px;
--wm-wic-cursor-dot: 7px;
--wm-wic-cursor-label-offset: var(--wm-space-4);
--wm-wic-halo-width: 2px;
--wm-wic-halo-spread: 5px;
--wm-wic-narration-min-height: 28px;
--wm-wic-narration-max-width: 44ch;
--wm-wic-trail-item-height: 26px;
--wm-wic-badge-height: 20px;
--wm-duration-wic-travel: 520ms;
--wm-duration-wic-pulse: 1400ms;
--wm-duration-wic-narrate: 240ms;
}
@media (prefers-reduced-motion: reduce) {
:root {
--wm-duration-wic-travel: 0ms;
--wm-duration-wic-narrate: 0ms;
}
}
}
@layer tokens {
:root {
--wm-vid-wave-inset: 3px;
--wm-vid-wave-baseline-width: 1px;
--wm-vid-wave-clip-width: 2px;
--wm-vid-wave-stroke: 1px;
--wm-vid-wave-gain: 1;
--wm-vid-track-radius: var(--wm-radius-sm);
--wm-vid-track-title-height: 15px;
--wm-vid-track-pad: var(--wm-space-3);
--wm-vid-track-scrim-width: 96px;
--wm-vid-track-btn: 18px;
--wm-vid-track-btn-lg: 22px;
--wm-vid-track-btn-hit: 24px;
--wm-vid-track-tint-width: 3px;
--wm-vid-track-header-gap: var(--wm-space-2);
--wm-vid-track-header-min-height: 28px;
--wm-vid-track-step-width: 14px;
--wm-vid-ghost-hatch-size: 6px;
--wm-vid-ghost-hatch-line: 1px;
--wm-vid-ghost-min-width: 10px;
--wm-vid-ghost-restore-height: 18px;
--wm-vid-ghost-edge-width: 1px;
--wm-vid-ghost-dash: 3px;
--wm-vid-selection-ring-width: 2px;
--wm-vid-selection-ring-offset: 1px;
--wm-vid-clip-hud-height: 20px;
--wm-vid-clip-hud-offset: 6px;
--wm-vid-clip-hud-max-width: 168px;
--wm-vid-stats-bar-height: 6px;
--wm-vid-stats-bar-radius: var(--wm-radius-pill);
--wm-vid-stats-min-width: 88px;
--wm-vid-stats-dot: 7px;
}
}
@layer tokens {
:root {
--wm-vid-viewer-min-height: 132px;
--wm-vid-viewer-badge-inset: var(--wm-space-5);
--wm-vid-safe-action-inset: 5%;
--wm-vid-safe-title-inset: 10%;
--wm-vid-guide-width: 1px;
--wm-vid-viewer-ratio: 16 / 9;
--wm-vid-viewer-vertical-max: 260px;
--wm-vid-viewer-play-size: 56px;
--wm-vid-viewer-play-size-lg: 72px;
--wm-vid-ab-divider-width: 2px;
--wm-vid-ab-handle: 26px;
--wm-vid-ab-label-height: 22px;
--wm-vid-viewer-vazio-max-width: 26ch;
--wm-vid-timecode-seg-width: 2.1ch;
--wm-vid-timecode-seg-width-grande: 2.3ch;
--wm-vid-transport-gap: var(--wm-space-3);
--wm-vid-transport-radius: var(--wm-radius-sm);
--wm-vid-transport-icon: var(--wm-icon-sm);
--wm-vid-transport-icon-lg: var(--wm-icon-lg);
--wm-vid-scrubber-hit: 22px;
--wm-vid-scrub-preview-gap: var(--wm-space-4);
--wm-vid-scrub-preview-radius: var(--wm-radius-sm);
--wm-vid-scrub-preview-tip: 5px;
--wm-vid-timecode-width-sm: 92px;
--wm-vid-timecode-space-width: 62px;
--wm-vid-inout-flag-width: 7px;
--wm-vid-inout-flag-height: 13px;
--wm-vid-inout-bar-height: 3px;
--wm-vid-marker-hit: 16px;
--wm-vid-marker-stem-height: 12px;
--wm-vid-marker-label-height: 20px;
--wm-vid-marker-lane-height: 22px;
}
}
@layer tokens {
:root {
--wm-vid-trim-hud-height: 18px;
--wm-vid-trim-hud-offset: var(--wm-space-3);
--wm-vid-trim-limit-width: 3px;
--wm-vid-ripple-hatch: 7px;
--wm-vid-ripple-shift-height: 15px;
--wm-vid-ripple-arrow: 9px;
--wm-vid-roll-grip-height: 20px;
--wm-vid-roll-hit: 22px;
--wm-vid-blade-guide-width: 1px;
--wm-vid-blade-head: 13px;
--wm-vid-blade-hit: 17px;
--wm-vid-blade-notch: 5px;
--wm-vid-snap-node: 5px;
--wm-vid-snap-tolerance: 9px;
--wm-vid-snap-label-offset: var(--wm-space-3);
--wm-vid-range-handle-height: 22px;
--wm-vid-range-cap: 3px;
--wm-vid-range-hit: 14px;
}
}
@layer tokens {
:root {
--wm-vid-overlay-handle-lg: 14px;
--wm-vid-overlay-handle-radius: 2px;
--wm-vid-overlay-hit: 22px;
--wm-vid-overlay-line-width: 1px;
--wm-vid-overlay-edge-handle-len: 22px;
--wm-vid-overlay-rotate-arm-lg: 36px;
--wm-vid-overlay-rotate-knob: 13px;
--wm-vid-overlay-hud-height: 22px;
--wm-vid-overlay-hud-offset: var(--wm-space-5);
--wm-vid-overlay-center-size: 13px;
--wm-vid-crop-corner-len: 20px;
--wm-vid-crop-corner-thickness: 3px;
--wm-vid-crop-edge-len: 26px;
--wm-vid-crop-hit: 24px;
--wm-vid-crop-ratio-height: 24px;
--wm-vid-crop-scrim-spread: 200vmax;
--wm-vid-inspector-width-sm: 248px;
--wm-vid-inspector-width-lg: 344px;
--wm-vid-inspector-tabs-height: 30px;
--wm-vid-inspector-row-height: 26px;
--wm-vid-inspector-label-width: 96px;
--wm-vid-inspector-field-width: 68px;
--wm-vid-inspector-field-width-sm: 54px;
--wm-vid-inspector-group-title-height: 22px;
--wm-vid-inspector-slider-height: 3px;
--wm-vid-inspector-slider-thumb: 11px;
--wm-vid-keyframe-size-lg: 12px;
--wm-vid-keyframe-hit: 20px;
--wm-vid-curve-height-sm: 104px;
--wm-vid-curve-stroke: 2px;
--wm-vid-curve-handle-size: 7px;
--wm-vid-curve-arm-width: 1px;
--wm-vid-keyframe-ruler-height: 22px;
--wm-vid-keyframe-gutter: 44px;
--wm-vid-keyframe-lane-height: 20px;
--wm-vid-zoom-width-lg: 184px;
--wm-vid-zoom-height: 26px;
--wm-vid-zoom-track-height: 3px;
--wm-vid-zoom-thumb: 12px;
--wm-vid-zoom-step-btn: 22px;
--wm-vid-zoom-notch-width: 2px;
--wm-vid-zoom-notch-height: 6px;
--wm-vid-zoom-readout-width: 46px;
}
}
@layer tokens {
:root {
--wm-vid-clip-limiar-tira: 24px;
--wm-vid-clip-limiar-nome: 72px;
--wm-vid-clip-limiar-duas-miniaturas: 150px;
--wm-vid-clip-badge-gap: var(--wm-space-2);
}
}
@layer tokens {
:root {
--wm-vid-effect-tile-sm: 104px;
--wm-vid-effect-tile-lg: 176px;
--wm-vid-effect-preview-height: 76px;
--wm-vid-effect-preview-height-sm: 58px;
--wm-vid-effect-preview-height-lg: 99px;
--wm-vid-effect-label-height: 30px;
--wm-vid-effect-gap: var(--wm-space-6);
--wm-vid-effect-radius: var(--wm-radius-md);
--wm-vid-effect-badge: 16px;
--wm-vid-effect-chip-height: 22px;
--wm-vid-browser-width: 468px;
--wm-vid-browser-height: 396px;
--wm-vid-browser-bar-height: var(--wm-control-height-lg);
--wm-duration-vid-preview: 2400ms;
--wm-duration-vid-preview-fast: 1200ms;
--wm-vid-transition-height: 34px;
--wm-vid-transition-height-lg: 46px;
--wm-vid-transition-min-width: 14px;
--wm-vid-transition-radius: var(--wm-radius-xs);
--wm-vid-transition-handle: 7px;
--wm-vid-transition-grip-height: 12px;
--wm-vid-transition-glyph: 16px;
--wm-vid-transition-glyph-lg: 22px;
--wm-vid-transition-strip-pad: var(--wm-space-5);
--wm-vid-transition-duration-max: 24px;
--wm-vid-wheel-size-lg: 136px;
--wm-vid-wheel-ring-width: 3px;
--wm-vid-wheel-puck-ring-width: 2px;
--wm-vid-wheel-crosshair: 9px;
--wm-vid-wheel-crosshair-width: 1px;
--wm-vid-wheel-gap: var(--wm-space-9);
--wm-vid-wheel-value-width: 56px;
--wm-vid-wheel-lift-height: 5px;
--wm-vid-wheel-lift-thumb: 11px;
--wm-vid-wheel-reset: 18px;
--wm-vid-wheel-head-height: 18px;
--wm-vid-scope-size-lg: 232px;
--wm-vid-scope-wave-height: 152px;
--wm-vid-scope-wave-height-lg: 208px;
--wm-vid-scope-ire-gutter: 28px;
--wm-vid-scope-header-height: var(--wm-control-height-md);
--wm-vid-scope-trace-width: 1px;
--wm-vid-scope-graticule-width: 1px;
--wm-vid-scope-target-size: 9px;
--wm-vid-scope-pad: var(--wm-space-5);
--wm-vid-scope-gap: var(--wm-space-6);
--wm-vid-export-width-lg: 668px;
--wm-vid-export-radius: var(--wm-radius-xl);
--wm-vid-export-max-height: 78vh;
--wm-vid-export-preset-height: 64px;
--wm-vid-export-preset-min: 148px;
--wm-vid-export-row-height: var(--wm-control-height-md);
--wm-vid-export-label-width: 124px;
--wm-vid-export-thumb-width: 88px;
--wm-vid-export-progress-height: 5px;
}
@media (prefers-reduced-motion: reduce) {
:root {
--wm-duration-vid-preview: 0ms;
--wm-duration-vid-preview-fast: 0ms;
}
}
}
@layer tokens {
:root {
--wm-step-marker-sm: var(--wm-control-height-sm);
--wm-step-marker: var(--wm-control-height-md);
--wm-step-marker-lg: var(--wm-control-height-lg);
--wm-step-marker-ring: var(--wm-border-width-thick);
--wm-step-marker-radius: var(--wm-radius-pill);
--wm-step-connector: 2px;
--wm-step-connector-min: var(--wm-space-10);
--wm-step-connector-dash: 4px;
--wm-step-gap: var(--wm-space-6);
--wm-step-gap-sm: var(--wm-space-4);
--wm-step-row-gap: var(--wm-space-3);
--wm-step-label-max: 160px;
--wm-step-label-max-sm: 108px;
--wm-step-pad-block: var(--wm-space-5);
--wm-step-bar-height: var(--wm-space-3);
--wm-step-bar-height-thin: 3px;
--wm-step-bar-radius: var(--wm-radius-pill);
--wm-step-ring-size: 96px;
--wm-step-ring-size-sm: 64px;
--wm-step-ring-stroke: var(--wm-space-3);
--wm-step-segment-gap: var(--wm-space-2);
--wm-step-dot: var(--wm-space-4);
--wm-step-dot-atual: var(--wm-space-9);
--wm-step-dot-gap: var(--wm-space-3);
--wm-step-sheet-radius: var(--wm-radius-sheet-top);
--wm-step-safe-bottom: env(safe-area-inset-bottom, 0px);
--wm-step-safe-bottom-sim: 34px;
--wm-step-safe-left: env(safe-area-inset-left, 0px);
--wm-step-safe-right: env(safe-area-inset-right, 0px);
--wm-step-edge-gesture: var(--wm-space-9);
--wm-step-phone-width: 320px;
--wm-step-phone-height: 520px;
--wm-step-slide-offset: var(--wm-space-11);
--wm-step-slide-offset-sm: var(--wm-space-9);
--wm-step-panel-min-height: 148px;
--wm-duration-step-slide: var(--wm-duration-normal);
--wm-duration-step-fade: var(--wm-duration-fast);
--wm-duration-step-height: var(--wm-duration-normal);
--wm-ease-step-in: var(--wm-ease-decelerate);
--wm-ease-step-out: var(--wm-ease-exit);
}
@media (prefers-reduced-motion: reduce) {
:root {
--wm-duration-step-slide: 0ms;
--wm-duration-step-fade: 0ms;
--wm-duration-step-height: 0ms;
--wm-step-slide-offset: 0px;
--wm-step-slide-offset-sm: 0px;
}
}
}
@layer tokens {
:root {
--wm-field-ai-trigger: 22px;
--wm-field-ai-trigger-sm: 18px;
--wm-field-ai-trigger-inset: var(--wm-space-3);
--wm-field-ai-glyph: var(--wm-icon-md);
--wm-field-ai-glyph-sm: var(--wm-icon-sm);
--wm-field-ai-dot: 6px;
--wm-field-ai-ring: 2px;
--wm-field-ai-caret-width: 1.5px;
--wm-field-ai-caret-height: var(--wm-leading-body);
--wm-duration-field-ai-token: var(--wm-duration-ai-token);
--wm-duration-field-ai-caret: var(--wm-duration-ai-caret);
--wm-duration-field-ai-settle: var(--wm-duration-slow);
--wm-field-ai-mark-width: 2px;
--wm-field-ai-badge-height: 16px;
--wm-field-ai-panel-width: 320px;
--wm-field-ai-panel-width-lg: 420px;
--wm-field-ai-panel-pad: var(--wm-space-6);
--wm-field-ai-panel-max-height: 60vh;
--wm-field-ai-panel-reserva: 320px;
--wm-field-ai-proposta-max-height: 168px;
--wm-field-ai-ctx-height: 20px;
--wm-field-ai-config-label: 116px;
--wm-field-ai-config-min: 280px;
--wm-field-ai-auto-bar-height: 32px;
--wm-field-ai-auto-undo: var(--wm-control-height-xs);
}
@media (prefers-reduced-motion: reduce) {
:root {
--wm-duration-field-ai-token: 0ms;
--wm-duration-field-ai-caret: 0ms;
--wm-duration-field-ai-settle: 0ms;
}
}
}
@layer tokens {
:root {
--wm-avatar-upload-size: 96px;
--wm-avatar-upload-size-sm: 64px;
--wm-avatar-upload-size-lg: 128px;
--wm-avatar-upload-visor: 264px;
--wm-avatar-upload-visor-sm: 200px;
--wm-avatar-upload-selo: 28px;
--wm-avatar-upload-nova: 32px;
--wm-avatar-upload-anel: 6;
}
}
@layer tokens {
:root {
--wm-font-picker-row-height: 52px;
--wm-font-picker-row-height-sm: 40px;
--wm-font-picker-list-max-height: 360px;
--wm-font-picker-sample-size: var(--wm-font-size-title3);
--wm-font-picker-fav-size: 18px;
--wm-font-preview-titulo-size: var(--wm-font-size-large-title);
--wm-font-preview-paragrafo-size: var(--wm-font-size-body);
--wm-font-preview-rotulo-size: var(--wm-font-size-subheadline);
--wm-font-preview-legenda-size: var(--wm-font-size-caption);
--wm-font-preview-surface-min-height: 96px;
--wm-font-pairing-headline-size: var(--wm-font-size-title1);
--wm-font-pairing-body-size: var(--wm-font-size-body);
--wm-font-pairing-card-max-width: 520px;
}
}
@layer tokens {
:root {
--wm-table-actions-collapse: 108px;
--wm-table-actions-swipe-action-width: 84px;
--wm-table-actions-swipe-threshold: 32px;
}
}
@layer tokens {
:root {
--wm-mail-metric-min: 88px;
--wm-mail-unread-dot: 8px;
--wm-mail-url-max: 220px;
--wm-mail-row-min-height: 64px;
}
}
@layer tokens {
:root,
:root[data-theme="light"] {
color-scheme: light;
--wm-label-primary: rgba(0, 0, 0, 0.92);
--wm-label-secondary: rgba(0, 0, 0, 0.56);
--wm-label-tertiary: rgba(0, 0, 0, 0.36);
--wm-label-quaternary: rgba(0, 0, 0, 0.2);
--wm-label-on-accent: #ffffff;
--wm-fill-primary: rgba(0, 10, 30, 0.08);
--wm-fill-secondary: rgba(0, 10, 30, 0.055);
--wm-fill-tertiary: rgba(0, 10, 30, 0.035);
--wm-fill-quaternary: rgba(0, 10, 30, 0.02);
--wm-surface-base: #eef1f6;
--wm-surface-primary: #ffffff;
--wm-surface-secondary: #f7f8fa;
--wm-surface-tertiary: #eff1f5;
--wm-surface-elevated: #ffffff;
--wm-surface-sidebar: #f0f2f6;
--wm-surface-sunken: #e8ebf0;
--wm-surface-overlay: rgba(255, 255, 255, 0.84);
--wm-wallpaper:
radial-gradient(80% 60% at 85% -10%, rgba(42, 194, 243, 0.1), transparent 60%),
radial-gradient(90% 70% at 8% -5%, rgba(29, 89, 240, 0.07), transparent 55%),
linear-gradient(180deg, #eef1f6 0%, #e3e8f0 100%);
--wm-separator: rgba(0, 0, 0, 0.08);
--wm-separator-strong: rgba(0, 0, 0, 0.16);
--wm-separator-opaque: #d8dbe0;
--wm-accent: #1d59f0;
--wm-accent-hover: #1a50d8;
--wm-accent-pressed: #1745bb;
--wm-accent-fill: rgba(29, 89, 240, 0.12);
--wm-accent-text: var(--wm-accent);
--wm-accent-fill-strong: rgba(29, 89, 240, 0.22);
--wm-accent-secondary: var(--wm-brand-cyan);
--wm-accent-gradient: linear-gradient(180deg, #3a6ff3 0%, #1d59f0 62%, #1a50d8 100%);
--wm-brand-gradient: linear-gradient(135deg, #1d59f0 0%, #198fde 55%, #2ac2f3 100%);
--wm-success: #127a3a;
--wm-success-fill: rgba(18, 122, 58, 0.12);
--wm-warning: #8f5d12;
--wm-warning-fill: rgba(143, 93, 18, 0.12);
--wm-error: #c62f25;
--wm-error-fill: rgba(198, 47, 37, 0.12);
--wm-success-solid: #127a3a;
--wm-warning-solid: #8f5d12;
--wm-error-solid: #c62f25;
--wm-info: var(--wm-accent);
--wm-info-fill: rgba(29, 89, 240, 0.12);
--wm-shadow-color: 220deg 30% 5%;
--wm-shadow-ring: 0 0 0 0.5px rgba(0, 0, 0, 0.05);
--wm-shadow-1:
0 0.5px 1px hsl(var(--wm-shadow-color) / 0.05),
0 1px 3px hsl(var(--wm-shadow-color) / 0.06);
--wm-shadow-2:
0 1px 2px hsl(var(--wm-shadow-color) / 0.05),
0 3px 8px hsl(var(--wm-shadow-color) / 0.08);
--wm-shadow-3:
0 2px 6px hsl(var(--wm-shadow-color) / 0.05),
0 12px 32px -8px hsl(var(--wm-shadow-color) / 0.16);
--wm-shadow-4:
0 2px 6px hsl(var(--wm-shadow-color) / 0.05),
0 18px 50px -12px hsl(var(--wm-shadow-color) / 0.22);
--wm-shadow-panel:
0 0 0 0.5px rgba(0, 0, 0, 0.04),
0 1px 2px rgba(0, 0, 0, 0.04),
0 8px 20px -6px rgba(0, 0, 0, 0.1);
--wm-shadow-floating:
0 0 0 0.5px rgba(0, 0, 0, 0.05),
0 1px 3px rgba(0, 0, 0, 0.05),
0 10px 28px -8px rgba(0, 0, 0, 0.16);
--wm-shadow-window:
0 0 0 0.5px rgba(0, 0, 0, 0.05),
0 2px 6px rgba(0, 0, 0, 0.05),
0 18px 50px -12px rgba(0, 0, 0, 0.22);
--wm-shadow-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.18);
--wm-shadow-inner-hairline: inset 0 0 0 0.5px rgba(255, 255, 255, 0.4);
--wm-material-sidebar-bg: rgba(243, 246, 250, 0.62);
--wm-material-toolbar-bg: rgba(255, 255, 255, 0.65);
--wm-material-popover-bg: rgba(252, 253, 255, 0.75);
--wm-material-sheet-bg: rgba(255, 255, 255, 0.85);
--wm-material-hud-bg: rgba(28, 28, 31, 0.75);
--wm-material-hud-label: #ffffff;
--wm-material-glass-border: rgba(255, 255, 255, 0.45);
--wm-material-blur: 40px;
--wm-material-blur-strong: 44px;
--wm-material-blur-heavy: 56px;
--wm-material-saturate: 2;
--wm-material-saturate-strong: 2;
--wm-material-saturate-heavy: 2.1;
--wm-control-face-top: #ffffff;
--wm-control-face-bottom: #f5f5f3;
--wm-control-face-top-hover: #ffffff;
--wm-control-face-bottom-hover: #fafaf9;
--wm-control-face-top-pressed: #ececea;
--wm-control-face-bottom-pressed: #e7e7e4;
--wm-control-thumb-top: #ffffff;
--wm-control-thumb-bottom: #f4f4f2;
--wm-control-thumb-disabled: #fcfcfb;
--wm-scrollbar-thumb: rgba(0, 0, 0, 0.2);
--wm-scrollbar-thumb-hover: rgba(0, 0, 0, 0.32);
--wm-selection-bg: rgba(29, 89, 240, 0.24);
--wm-chart-1: var(--wm-chart-serie-1);
--wm-chart-2: var(--wm-chart-serie-2);
--wm-chart-3: var(--wm-chart-serie-3);
--wm-chart-4: var(--wm-chart-serie-4);
--wm-chart-5: var(--wm-chart-serie-5);
--wm-chart-6: var(--wm-chart-serie-6);
--wm-chart-serie-1: #1d59f0;
--wm-chart-serie-2: #eb6834;
--wm-chart-serie-3: #1baf7a;
--wm-chart-serie-4: #eda100;
--wm-chart-serie-5: #e87ba4;
--wm-chart-serie-6: #008300;
--wm-chart-serie-7: #7c3aed;
--wm-chart-serie-8: #0e9bbf;
--wm-msg-user-top: #2a5cff;
--wm-accent. */
--wm-brand-loader-ink: #000000;
--wm-brand-loader-glow: #2b6be0;
--wm-code-keyword: #1d59f0;
--wm-code-string: #127a3a;
--wm-code-number: #8f5d12;
--wm-code-comment: #737373;
--wm-code-function: #6e40c9;
--wm-code-type: #106b5a;
}
:root[data-theme="dark"] {
color-scheme: dark;
--wm-label-primary: rgba(255, 255, 255, 0.94);
--wm-label-secondary: rgba(255, 255, 255, 0.6);
--wm-label-tertiary: rgba(255, 255, 255, 0.38);
--wm-label-quaternary: rgba(255, 255, 255, 0.22);
--wm-label-on-accent: #ffffff;
--wm-fill-primary: rgba(255, 255, 255, 0.13);
--wm-fill-secondary: rgba(255, 255, 255, 0.09);
--wm-fill-tertiary: rgba(255, 255, 255, 0.06);
--wm-fill-quaternary: rgba(255, 255, 255, 0.035);
--wm-surface-base: #1c1c1f;
--wm-surface-primary: #262629;
--wm-surface-secondary: #212124;
--wm-surface-tertiary: #2c2c30;
--wm-surface-elevated: #2f2f33;
--wm-surface-sidebar: #202023;
--wm-surface-sunken: #161618;
--wm-surface-overlay: rgba(38, 38, 41, 0.85);
--wm-wallpaper:
radial-gradient(80% 60% at 85% -10%, rgba(42, 194, 243, 0.07), transparent 60%),
radial-gradient(90% 70% at 8% -5%, rgba(29, 89, 240, 0.09), transparent 55%),
linear-gradient(180deg, #17191e 0%, #101114 100%);
--wm-separator: rgba(255, 255, 255, 0.08);
--wm-separator-strong: rgba(255, 255, 255, 0.15);
--wm-separator-opaque: #3a3a3e;
--wm-accent: #1d59f0;
--wm-accent-hover: #1a50d8;
--wm-accent-pressed: #1745bb;
--wm-accent-fill: rgba(29, 89, 240, 0.22);
--wm-accent-text: #83a4f7;
--wm-accent-fill-strong: rgba(29, 89, 240, 0.34);
--wm-accent-secondary: var(--wm-brand-cyan);
--wm-accent-gradient: linear-gradient(180deg, #3a6ff3 0%, #1d59f0 62%, #1a50d8 100%);
--wm-brand-gradient: linear-gradient(135deg, #1d59f0 0%, #198fde 55%, #2ac2f3 100%);
--wm-success: #32d074;
--wm-success-fill: rgba(50, 208, 116, 0.16);
--wm-warning: #e2a53d;
--wm-warning-fill: rgba(226, 165, 61, 0.16);
--wm-error: #ff8a80;
--wm-error-fill: rgba(255, 138, 128, 0.12);
--wm-success-solid: #127a3a;
--wm-warning-solid: #8f5d12;
--wm-error-solid: #c62f25;
--wm-info: #83a4f7;
--wm-info-fill: rgba(131, 164, 247, 0.10);
--wm-shadow-color: 220deg 30% 2%;
--wm-shadow-ring: 0 0 0 0.5px rgba(255, 255, 255, 0.08);
--wm-shadow-1:
0 0.5px 1px hsl(var(--wm-shadow-color) / 0.3),
0 1px 3px hsl(var(--wm-shadow-color) / 0.3);
--wm-shadow-2:
0 1px 2px hsl(var(--wm-shadow-color) / 0.3),
0 3px 10px hsl(var(--wm-shadow-color) / 0.36);
--wm-shadow-3:
0 2px 6px hsl(var(--wm-shadow-color) / 0.3),
0 14px 36px -8px hsl(var(--wm-shadow-color) / 0.5);
--wm-shadow-4:
0 2px 8px hsl(var(--wm-shadow-color) / 0.35),
0 24px 64px -12px hsl(var(--wm-shadow-color) / 0.6);
--wm-shadow-panel:
0 0 0 0.5px rgba(255, 255, 255, 0.06),
0 1px 2px rgba(0, 0, 0, 0.4),
0 10px 24px -6px rgba(0, 0, 0, 0.5);
--wm-shadow-floating:
0 0 0 0.5px rgba(255, 255, 255, 0.07),
0 2px 6px rgba(0, 0, 0, 0.45),
0 14px 36px -8px rgba(0, 0, 0, 0.55);
--wm-shadow-window:
0 0 0 0.5px rgba(255, 255, 255, 0.08),
0 3px 8px rgba(0, 0, 0, 0.5),
0 24px 64px -12px rgba(0, 0, 0, 0.65);
--wm-shadow-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
--wm-shadow-inner-hairline: inset 0 0 0 0.5px rgba(255, 255, 255, 0.09);
--wm-material-sidebar-bg: rgba(28, 28, 32, 0.6);
--wm-material-toolbar-bg: rgba(34, 34, 38, 0.6);
--wm-material-popover-bg: rgba(40, 40, 44, 0.72);
--wm-material-sheet-bg: rgba(34, 34, 38, 0.84);
--wm-material-hud-bg: rgba(18, 18, 20, 0.78);
--wm-material-hud-label: #ffffff;
--wm-material-glass-border: rgba(255, 255, 255, 0.14);
--wm-material-blur: 40px;
--wm-material-blur-strong: 44px;
--wm-material-blur-heavy: 56px;
--wm-material-saturate: 1.8;
--wm-material-saturate-strong: 1.8;
--wm-material-saturate-heavy: 1.9;
--wm-control-face-top: #58585f;
--wm-control-face-bottom: #4b4b51;
--wm-control-face-top-hover: #616168;
--wm-control-face-bottom-hover: #55555c;
--wm-control-face-top-pressed: #414147;
--wm-control-face-bottom-pressed: #3b3b41;
--wm-control-thumb-top: #ffffff;
--wm-control-thumb-bottom: #f4f4f2;
--wm-control-thumb-disabled: #77777d;
--wm-scrollbar-thumb: rgba(255, 255, 255, 0.22);
--wm-scrollbar-thumb-hover: rgba(255, 255, 255, 0.34);
--wm-selection-bg: rgba(29, 89, 240, 0.32);
--wm-chart-1: var(--wm-chart-serie-1);
--wm-chart-2: var(--wm-chart-serie-2);
--wm-chart-3: var(--wm-chart-serie-3);
--wm-chart-4: var(--wm-chart-serie-4);
--wm-chart-5: var(--wm-chart-serie-5);
--wm-chart-6: var(--wm-chart-serie-6);
--wm-chart-serie-1: #4a80f0;
--wm-chart-serie-2: #d95926;
--wm-chart-serie-3: #199e70;
--wm-chart-serie-4: #c98500;
--wm-chart-serie-5: #d55181;
--wm-chart-serie-6: #12a012;
--wm-chart-serie-7: #9d6bf5;
--wm-chart-serie-8: #22b3d6;
--wm-msg-user-top: #4f88ff;
--wm-brand-loader-ink: rgba(255, 255, 255, 0.92);
--wm-brand-loader-glow: #5a90ff;
--wm-code-keyword: #83a4f7;
--wm-code-string: #32d074;
--wm-code-number: #e2a53d;
--wm-code-comment: #999999;
--wm-code-function: #b083f0;
--wm-code-type: #39c5bb;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--wm-label-primary: rgba(255, 255, 255, 0.94);
--wm-label-secondary: rgba(255, 255, 255, 0.6);
--wm-label-tertiary: rgba(255, 255, 255, 0.38);
--wm-label-quaternary: rgba(255, 255, 255, 0.22);
--wm-label-on-accent: #ffffff;
--wm-fill-primary: rgba(255, 255, 255, 0.13);
--wm-fill-secondary: rgba(255, 255, 255, 0.09);
--wm-fill-tertiary: rgba(255, 255, 255, 0.06);
--wm-fill-quaternary: rgba(255, 255, 255, 0.035);
--wm-surface-base: #1c1c1f;
--wm-surface-primary: #262629;
--wm-surface-secondary: #212124;
--wm-surface-tertiary: #2c2c30;
--wm-surface-elevated: #2f2f33;
--wm-surface-sidebar: #202023;
--wm-surface-sunken: #161618;
--wm-surface-overlay: rgba(38, 38, 41, 0.85);
--wm-wallpaper:
radial-gradient(80% 60% at 85% -10%, rgba(42, 194, 243, 0.07), transparent 60%),
radial-gradient(90% 70% at 8% -5%, rgba(29, 89, 240, 0.09), transparent 55%),
linear-gradient(180deg, #17191e 0%, #101114 100%);
--wm-separator: rgba(255, 255, 255, 0.08);
--wm-separator-strong: rgba(255, 255, 255, 0.15);
--wm-separator-opaque: #3a3a3e;
--wm-accent: #1d59f0;
--wm-accent-hover: #1a50d8;
--wm-accent-pressed: #1745bb;
--wm-accent-fill: rgba(29, 89, 240, 0.22);
--wm-accent-text: #83a4f7;
--wm-accent-fill-strong: rgba(29, 89, 240, 0.34);
--wm-accent-secondary: var(--wm-brand-cyan);
--wm-accent-gradient: linear-gradient(180deg, #3a6ff3 0%, #1d59f0 62%, #1a50d8 100%);
--wm-brand-gradient: linear-gradient(135deg, #1d59f0 0%, #198fde 55%, #2ac2f3 100%);
--wm-success: #32d074;
--wm-success-fill: rgba(50, 208, 116, 0.16);
--wm-warning: #e2a53d;
--wm-warning-fill: rgba(226, 165, 61, 0.16);
--wm-error: #ff8a80;
--wm-error-fill: rgba(255, 138, 128, 0.12);
--wm-success-solid: #127a3a;
--wm-warning-solid: #8f5d12;
--wm-error-solid: #c62f25;
--wm-info: #83a4f7;
--wm-info-fill: rgba(131, 164, 247, 0.10);
--wm-shadow-color: 220deg 30% 2%;
--wm-shadow-ring: 0 0 0 0.5px rgba(255, 255, 255, 0.08);
--wm-shadow-1:
0 0.5px 1px hsl(var(--wm-shadow-color) / 0.3),
0 1px 3px hsl(var(--wm-shadow-color) / 0.3);
--wm-shadow-2:
0 1px 2px hsl(var(--wm-shadow-color) / 0.3),
0 3px 10px hsl(var(--wm-shadow-color) / 0.36);
--wm-shadow-3:
0 2px 6px hsl(var(--wm-shadow-color) / 0.3),
0 14px 36px -8px hsl(var(--wm-shadow-color) / 0.5);
--wm-shadow-4:
0 2px 8px hsl(var(--wm-shadow-color) / 0.35),
0 24px 64px -12px hsl(var(--wm-shadow-color) / 0.6);
--wm-shadow-panel:
0 0 0 0.5px rgba(255, 255, 255, 0.06),
0 1px 2px rgba(0, 0, 0, 0.4),
0 10px 24px -6px rgba(0, 0, 0, 0.5);
--wm-shadow-floating:
0 0 0 0.5px rgba(255, 255, 255, 0.07),
0 2px 6px rgba(0, 0, 0, 0.45),
0 14px 36px -8px rgba(0, 0, 0, 0.55);
--wm-shadow-window:
0 0 0 0.5px rgba(255, 255, 255, 0.08),
0 3px 8px rgba(0, 0, 0, 0.5),
0 24px 64px -12px rgba(0, 0, 0, 0.65);
--wm-shadow-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
--wm-shadow-inner-hairline: inset 0 0 0 0.5px rgba(255, 255, 255, 0.09);
--wm-material-sidebar-bg: rgba(28, 28, 32, 0.6);
--wm-material-toolbar-bg: rgba(34, 34, 38, 0.6);
--wm-material-popover-bg: rgba(40, 40, 44, 0.72);
--wm-material-sheet-bg: rgba(34, 34, 38, 0.84);
--wm-material-hud-bg: rgba(18, 18, 20, 0.78);
--wm-material-hud-label: #ffffff;
--wm-material-glass-border: rgba(255, 255, 255, 0.14);
--wm-material-blur: 40px;
--wm-material-blur-strong: 44px;
--wm-material-blur-heavy: 56px;
--wm-material-saturate: 1.8;
--wm-material-saturate-strong: 1.8;
--wm-material-saturate-heavy: 1.9;
--wm-control-face-top: #58585f;
--wm-control-face-bottom: #4b4b51;
--wm-control-face-top-hover: #616168;
--wm-control-face-bottom-hover: #55555c;
--wm-control-face-top-pressed: #414147;
--wm-control-face-bottom-pressed: #3b3b41;
--wm-control-thumb-top: #ffffff;
--wm-control-thumb-bottom: #f4f4f2;
--wm-control-thumb-disabled: #77777d;
--wm-scrollbar-thumb: rgba(255, 255, 255, 0.22);
--wm-scrollbar-thumb-hover: rgba(255, 255, 255, 0.34);
--wm-selection-bg: rgba(29, 89, 240, 0.32);
--wm-chart-1: var(--wm-chart-serie-1);
--wm-chart-2: var(--wm-chart-serie-2);
--wm-chart-3: var(--wm-chart-serie-3);
--wm-chart-4: var(--wm-chart-serie-4);
--wm-chart-5: var(--wm-chart-serie-5);
--wm-chart-6: var(--wm-chart-serie-6);
--wm-chart-serie-1: #4a80f0;
--wm-chart-serie-2: #d95926;
--wm-chart-serie-3: #199e70;
--wm-chart-serie-4: #c98500;
--wm-chart-serie-5: #d55181;
--wm-chart-serie-6: #12a012;
--wm-chart-serie-7: #9d6bf5;
--wm-chart-serie-8: #22b3d6;
--wm-msg-user-top: #4f88ff;
--wm-brand-loader-ink: rgba(255, 255, 255, 0.92);
--wm-brand-loader-glow: #5a90ff;
--wm-code-keyword: #83a4f7;
--wm-code-string: #32d074;
--wm-code-number: #e2a53d;
--wm-code-comment: #999999;
--wm-code-function: #b083f0;
--wm-code-type: #39c5bb;
}
}
}
@layer tokens {
:root {
--wm-ai-strip: var(--wm-brand-gradient);
--wm-ai-glyph-bg: var(--wm-accent-fill);
--wm-ai-glyph-fg: var(--wm-accent-text);
--wm-ai-running: var(--wm-accent-text);
--wm-ai-running-fill: var(--wm-accent-fill);
--wm-ai-ok: var(--wm-success);
--wm-ai-ok-fill: var(--wm-success-fill);
--wm-ai-failed: var(--wm-error);
--wm-ai-failed-fill: var(--wm-error-fill);
--wm-ai-pending: var(--wm-label-tertiary);
--wm-ai-pending-fill: var(--wm-fill-tertiary);
--wm-ai-diff-add-fill: var(--wm-success-fill);
--wm-ai-diff-add-mark: var(--wm-success);
--wm-ai-diff-add-word: color-mix(in srgb, var(--wm-success) 28%, transparent);
--wm-ai-diff-del-fill: var(--wm-error-fill);
--wm-ai-diff-del-mark: var(--wm-error);
--wm-ai-diff-del-word: color-mix(in srgb, var(--wm-error) 28%, transparent);
--wm-ai-diff-gutter-bg: var(--wm-fill-quaternary);
--wm-ai-cite-fill: var(--wm-accent-fill);
--wm-ai-cite-fg: var(--wm-accent-text);
--wm-ai-cite-quote-fill: color-mix(in srgb, var(--wm-accent) 14%, transparent);
--wm-ai-cite-unverified: var(--wm-warning);
--wm-ai-cite-unverified-fill: var(--wm-warning-fill);
--wm-ai-feedback-up: var(--wm-success);
--wm-ai-feedback-up-fill: var(--wm-success-fill);
--wm-ai-feedback-down: var(--wm-error);
--wm-ai-feedback-down-fill: var(--wm-error-fill);
}
}
@layer tokens {
:root {
--wm-img-canvas-bg: #101012;
--wm-img-canvas-bg-2: #17171a;
--wm-img-panel: #232326;
--wm-img-panel-raised: #2b2b2f;
--wm-img-panel-sunken: #1a1a1c;
--wm-img-separator: rgba(255, 255, 255, 0.08);
--wm-img-separator-strong: rgba(255, 255, 255, 0.16);
--wm-img-label: rgba(255, 255, 255, 0.92);
--wm-img-label-2: rgba(255, 255, 255, 0.68);
--wm-img-label-3: rgba(255, 255, 255, 0.5);
--wm-img-fill: rgba(255, 255, 255, 0.07);
--wm-img-fill-hover: rgba(255, 255, 255, 0.12);
--wm-img-fill-strong: rgba(255, 255, 255, 0.18);
--wm-img-control-bg: rgba(255, 255, 255, 0.06);
--wm-img-control-active: rgba(255, 255, 255, 0.16);
--wm-img-track: rgba(255, 255, 255, 0.14);
--wm-img-track-fill: var(--wm-img-accent);
--wm-img-thumb: #ffffff;
--wm-img-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 0 0.5px rgba(0, 0, 0, 0.4);
--wm-img-tick: rgba(255, 255, 255, 0.34);
--wm-img-tick-strong: rgba(255, 255, 255, 0.62);
--wm-img-accent: #4a8cff;
--wm-img-accent-fill: rgba(74, 140, 255, 0.22);
--wm-img-accent-strong: #2f76f5;
--wm-img-handle: #ffffff;
--wm-img-handle-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.45);
--wm-img-grid: rgba(255, 255, 255, 0.45);
--wm-img-grid-shadow: rgba(0, 0, 0, 0.3);
--wm-img-guide: var(--wm-brand-cyan);
--wm-img-scrim: rgba(0, 0, 0, 0.55);
--wm-img-marquee-a: rgba(255, 255, 255, 0.95);
--wm-img-marquee-b: rgba(0, 0, 0, 0.65);
--wm-img-checker-a: #2e2e31;
--wm-img-checker-b: #26262a;
--wm-img-canvas-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.09), 0 12px 32px -8px rgba(0, 0, 0, 0.7);
--wm-img-canvas-vignette: radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.35) 100%);
--wm-img-hud-bg: rgba(20, 20, 22, 0.88);
--wm-img-hud-label: #ffffff;
--wm-img-hud-border: rgba(255, 255, 255, 0.14);
--wm-img-hist-r: rgba(255, 69, 58, 0.62);
--wm-img-hist-g: rgba(50, 208, 116, 0.62);
--wm-img-hist-b: rgba(74, 140, 255, 0.68);
--wm-img-hist-luma: rgba(255, 255, 255, 0.5);
--wm-img-hist-bg: rgba(0, 0, 0, 0.32);
--wm-img-hist-clip: #ff453a;
--wm-img-temp-frio: #3f7fd4;
--wm-img-temp-neutro: #f4f2ee;
--wm-img-temp-quente: #ff9b2f;
--wm-img-tint-verde: #47b95f;
--wm-img-tint-neutro: #cfcfcf;
--wm-img-tint-magenta: #cc5fc4;
--wm-img-slider-spectrum: linear-gradient(
90deg,
#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
}
[data-wm-img-chrome] {
--wm-label-primary: var(--wm-img-label);
--wm-label-secondary: var(--wm-img-label-2);
--wm-label-tertiary: var(--wm-img-label-3);
--wm-label-quaternary: var(--wm-img-label-3);
--wm-fill-primary: var(--wm-img-fill-strong);
--wm-fill-secondary: var(--wm-img-fill-hover);
--wm-fill-tertiary: var(--wm-img-fill);
--wm-fill-quaternary: var(--wm-img-fill);
--wm-surface-primary: var(--wm-img-panel-raised);
--wm-surface-secondary: var(--wm-img-panel);
--wm-surface-tertiary: var(--wm-img-panel-sunken);
--wm-surface-elevated: var(--wm-img-panel-raised);
--wm-surface-sunken: var(--wm-img-panel-sunken);
--wm-separator: var(--wm-img-separator);
--wm-separator-strong: var(--wm-img-separator-strong);
--wm-accent: var(--wm-img-accent);
--wm-accent-hover: var(--wm-img-accent-strong);
--wm-accent-pressed: var(--wm-img-accent-strong);
--wm-accent-fill: var(--wm-img-accent-fill);
--wm-accent-text: var(--wm-img-accent);
--wm-control-face-top: var(--wm-img-fill-hover);
--wm-control-face-bottom: var(--wm-img-fill);
--wm-control-face-top-hover: var(--wm-img-fill-strong);
--wm-control-face-bottom-hover: var(--wm-img-fill-hover);
--wm-control-face-top-pressed: var(--wm-img-fill);
--wm-control-face-bottom-pressed: var(--wm-img-fill);
}
[data-wm-editor-appearance="light"] {
--wm-img-canvas-bg: #b4b8be;
--wm-img-canvas-bg-2: #c2c6cc;
--wm-img-panel: #f2f3f5;
--wm-img-panel-raised: #fafbfc;
--wm-img-panel-sunken: #e5e7eb;
--wm-img-separator: rgba(0, 0, 0, 0.1);
--wm-img-separator-strong: rgba(0, 0, 0, 0.2);
--wm-img-label: rgba(0, 0, 0, 0.9);
--wm-img-label-2: rgba(0, 0, 0, 0.62);
--wm-img-label-3: rgba(0, 0, 0, 0.56);
--wm-img-fill: rgba(0, 10, 30, 0.06);
--wm-img-fill-hover: rgba(0, 10, 30, 0.1);
--wm-img-fill-strong: rgba(0, 10, 30, 0.16);
--wm-img-control-bg: rgba(0, 10, 30, 0.05);
--wm-img-control-active: rgba(0, 10, 30, 0.14);
--wm-img-track: rgba(0, 10, 30, 0.14);
--wm-img-thumb: #ffffff;
--wm-img-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.28), 0 0 0 0.5px rgba(0, 0, 0, 0.16);
--wm-img-tick: rgba(0, 0, 0, 0.3);
--wm-img-tick-strong: rgba(0, 0, 0, 0.55);
--wm-img-accent: var(--wm-accent);
--wm-img-accent-fill: rgba(29, 89, 240, 0.14);
--wm-img-accent-strong: var(--wm-accent-pressed);
--wm-img-scrim: rgba(0, 0, 0, 0.42);
--wm-img-checker-a: #ffffff;
--wm-img-checker-b: #e6e7eb;
--wm-img-canvas-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.14), 0 10px 26px -8px rgba(0, 0, 0, 0.35);
--wm-img-canvas-vignette: radial-gradient(120% 100% at 50% 40%, transparent 60%, rgba(0, 0, 0, 0.14) 100%);
--wm-img-hist-r: rgba(214, 40, 30, 0.55);
--wm-img-hist-g: rgba(18, 122, 58, 0.55);
--wm-img-hist-b: rgba(29, 89, 240, 0.55);
--wm-img-hist-luma: rgba(0, 0, 0, 0.42);
--wm-img-hist-bg: rgba(0, 0, 0, 0.06);
}
}
@layer tokens {
:root,
:root[data-theme="light"] {
--wm-vid-bg: #1e1e21;
--wm-vid-panel: #2a2a2e;
--wm-vid-panel-raised: #333338;
--wm-vid-panel-sunken: #202024;
--wm-vid-timeline-bg: #161619;
--wm-vid-track-bg: #212125;
--wm-vid-track-bg-alt: #1c1c20;
--wm-vid-track-header-bg: #26262b;
--wm-vid-ruler-bg: #232328;
--wm-vid-hairline: rgba(255, 255, 255, 0.1);
--wm-vid-separator: rgba(0, 0, 0, 0.45);
--wm-vid-grid: rgba(255, 255, 255, 0.16);
--wm-vid-grid-strong: rgba(255, 255, 255, 0.34);
--wm-vid-fill: rgba(255, 255, 255, 0.08);
--wm-vid-fill-hover: rgba(255, 255, 255, 0.14);
--wm-vid-fill-active: rgba(255, 255, 255, 0.2);
}
:root[data-theme="dark"] {
--wm-vid-bg: #131315;
--wm-vid-panel: #232326;
--wm-vid-panel-raised: #2c2c31;
--wm-vid-panel-sunken: #191a1c;
--wm-vid-timeline-bg: #0d0d0f;
--wm-vid-track-bg: #191a1d;
--wm-vid-track-bg-alt: #141417;
--wm-vid-track-header-bg: #1e1e22;
--wm-vid-ruler-bg: #1b1b1f;
--wm-vid-hairline: rgba(255, 255, 255, 0.09);
--wm-vid-separator: rgba(0, 0, 0, 0.6);
--wm-vid-grid: rgba(255, 255, 255, 0.14);
--wm-vid-grid-strong: rgba(255, 255, 255, 0.3);
--wm-vid-fill: rgba(255, 255, 255, 0.07);
--wm-vid-fill-hover: rgba(255, 255, 255, 0.13);
--wm-vid-fill-active: rgba(255, 255, 255, 0.19);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--wm-vid-bg: #131315;
--wm-vid-panel: #232326;
--wm-vid-panel-raised: #2c2c31;
--wm-vid-panel-sunken: #191a1c;
--wm-vid-timeline-bg: #0d0d0f;
--wm-vid-track-bg: #191a1d;
--wm-vid-track-bg-alt: #141417;
--wm-vid-track-header-bg: #1e1e22;
--wm-vid-ruler-bg: #1b1b1f;
--wm-vid-hairline: rgba(255, 255, 255, 0.09);
--wm-vid-separator: rgba(0, 0, 0, 0.6);
--wm-vid-grid: rgba(255, 255, 255, 0.14);
--wm-vid-grid-strong: rgba(255, 255, 255, 0.3);
--wm-vid-fill: rgba(255, 255, 255, 0.07);
--wm-vid-fill-hover: rgba(255, 255, 255, 0.13);
--wm-vid-fill-active: rgba(255, 255, 255, 0.19);
}
}
:root {
--wm-vid-label: rgba(255, 255, 255, 0.93);
--wm-vid-label-secondary: rgba(255, 255, 255, 0.62);
--wm-vid-label-tertiary: rgba(255, 255, 255, 0.4);
--wm-vid-label-on-clip: rgba(255, 255, 255, 0.94);
--wm-vid-viewer-bg: #08080a;
--wm-vid-letterbox: #000000;
--wm-vid-viewer-edge: rgba(255, 255, 255, 0.08);
--wm-vid-playhead: #f2f3f7;
--wm-vid-playhead-live: #ff453a;
--wm-vid-playhead-glow: rgba(0, 0, 0, 0.55);
--wm-vid-skimmer: rgba(255, 255, 255, 0.55);
--wm-vid-snap: #ffd60a;
--wm-vid-snap-glow: rgba(255, 214, 10, 0.28);
--wm-vid-selection: var(--wm-accent);
--wm-vid-selection-ring: #6ea8ff;
--wm-vid-selection-fill: rgba(110, 168, 255, 0.14);
--wm-vid-range-border: #ffd60a;
--wm-vid-range-fill: rgba(255, 214, 10, 0.12);
--wm-vid-in-out: #ffd60a;
--wm-vid-outside-range: rgba(0, 0, 0, 0.5);
--wm-vid-inout-erro: #ff453a;
--wm-vid-inout-erro-fill: rgba(255, 69, 58, 0.24);
--wm-vid-blade: #ff453a;
--wm-vid-blade-guide: rgba(255, 69, 58, 0.55);
--wm-vid-ripple: #ffd60a;
--wm-vid-roll: #6ea8ff;
--wm-vid-armed: #ff453a;
--wm-vid-armed-fill: rgba(255, 69, 58, 0.2);
--wm-vid-muted: #ff9f0a;
--wm-vid-solo: #ffd60a;
--wm-vid-locked: rgba(255, 255, 255, 0.5);
--wm-vid-disabled-veil: rgba(0, 0, 0, 0.42);
--wm-vid-keyframe: #f2f3f7;
--wm-vid-keyframe-selected: #ffd60a;
--wm-vid-curve: #6ea8ff;
--wm-vid-curve-handle: rgba(110, 168, 255, 0.6);
--wm-vid-clip-video-bg: #2c4a7a;
--wm-vid-clip-video-accent: #6ea8ff;
--wm-vid-clip-video-edge: rgba(110, 168, 255, 0.34);
--wm-vid-clip-audio-bg: #1f5a43;
--wm-vid-clip-audio-accent: #48c79a;
--wm-vid-clip-audio-edge: rgba(72, 199, 154, 0.34);
--wm-vid-clip-title-bg: #4a3a78;
--wm-vid-clip-title-accent: #a58cf5;
--wm-vid-clip-title-edge: rgba(165, 140, 245, 0.34);
--wm-vid-clip-effect-bg: #6a4326;
--wm-vid-clip-effect-accent: #f0a35e;
--wm-vid-clip-effect-edge: rgba(240, 163, 94, 0.34);
--wm-vid-clip-image-bg: #2a5a68;
--wm-vid-clip-image-accent: #5fc8e0;
--wm-vid-clip-image-edge: rgba(95, 200, 224, 0.34);
--wm-vid-clip-generator-bg: #6a2a4d;
--wm-vid-clip-generator-accent: #f07fb5;
--wm-vid-clip-generator-edge: rgba(240, 127, 181, 0.34);
--wm-vid-wave-fill: rgba(255, 255, 255, 0.22);
--wm-vid-wave-peak: rgba(255, 255, 255, 0.62);
--wm-vid-wave-rms: rgba(255, 255, 255, 0.34);
--wm-vid-wave-clip: #ff453a;
--wm-vid-wave-baseline: rgba(255, 255, 255, 0.16);
--wm-vid-marker-standard: #4a9eff;
--wm-vid-marker-todo: #ff453a;
--wm-vid-marker-done: #32d074;
--wm-vid-marker-chapter: #ff9f0a;
--wm-vid-scope-bg: #08080a;
--wm-vid-scope-graticule: rgba(255, 255, 255, 0.16);
--wm-vid-scope-graticule-strong: rgba(255, 255, 255, 0.3);
--wm-vid-scope-trace: rgba(180, 255, 214, 0.85);
--wm-vid-scope-trace-r: rgba(255, 90, 82, 0.75);
--wm-vid-scope-trace-g: rgba(80, 224, 130, 0.75);
--wm-vid-scope-trace-b: rgba(90, 150, 255, 0.75);
--wm-vid-scope-target: rgba(255, 214, 10, 0.7);
--wm-vid-transition-bg: rgba(255, 255, 255, 0.14);
--wm-vid-transition-accent: rgba(255, 255, 255, 0.72);
}
}
@layer tokens {
:root {
--wm-lane-cena: #6ea8ff;
--wm-lane-cena-bg: #2c4a7a;
--wm-lane-cena-edge: rgba(110, 168, 255, 0.34);
--wm-lane-elemento: #a58cf5;
--wm-lane-elemento-bg: #4a3a78;
--wm-lane-elemento-edge: rgba(165, 140, 245, 0.34);
--wm-lane-legenda: #5fc8e0;
--wm-lane-legenda-bg: #235561;
--wm-lane-legenda-edge: rgba(95, 200, 224, 0.34);
--wm-lane-marcador: #f0a35e;
--wm-lane-marcador-bg: #6a4326;
--wm-lane-marcador-edge: rgba(240, 163, 94, 0.34);
--wm-lane-movimento: #f07fb5;
--wm-lane-movimento-bg: #6a2a4d;
--wm-lane-movimento-edge: rgba(240, 127, 181, 0.34);
--wm-lane-voz: #48c79a;
--wm-lane-voz-bg: #1f5a43;
--wm-lane-voz-edge: rgba(72, 199, 154, 0.34);
--wm-lane-trilha: #9aa6b8;
--wm-lane-trilha-bg: #3a4250;
--wm-lane-trilha-edge: rgba(154, 166, 184, 0.34);
--wm-vid-ghost-bg: rgba(255, 255, 255, 0.05);
--wm-vid-ghost-edge: rgba(255, 255, 255, 0.18);
--wm-vid-ghost-label: rgba(255, 255, 255, 0.45);
--wm-vid-ghost-hatch: rgba(255, 255, 255, 0.07);
--wm-vid-ghost-restore: #6ea8ff;
}
}
@layer tokens {
:root,
:root[data-theme="light"] {
--wm-aud-surface: #dcdfe6;
--wm-aud-panel: #eaecf1;
--wm-aud-panel-raised: #f4f5f8;
--wm-aud-lane: #e5e8ee;
--wm-aud-lane-alt: #dfe2e9;
--wm-aud-rail: #d1d5dd;
--wm-aud-grid: rgba(10, 20, 45, 0.1);
--wm-aud-grid-strong: rgba(10, 20, 45, 0.22);
--wm-aud-separator: rgba(10, 20, 45, 0.14);
--wm-aud-inset: #c6cad3;
--wm-aud-inset-deep: #b9bec8;
--wm-aud-inset-shadow:
inset 0 1px 2px rgba(0, 0, 0, 0.24),
inset 0 0 0 0.5px rgba(0, 0, 0, 0.12);
--wm-aud-face-top: #fdfdfe;
--wm-aud-face-bottom: #e3e5eb;
--wm-aud-face-top-hover: #ffffff;
--wm-aud-face-bottom-hover: #eaecf1;
--wm-aud-face-top-pressed: #d9dbe2;
--wm-aud-face-bottom-pressed: #cfd2da;
--wm-aud-face-edge: rgba(10, 20, 45, 0.24);
--wm-aud-face-gloss: inset 0 1px 0 rgba(255, 255, 255, 0.9);
--wm-aud-face-contact: 0 1px 2px rgba(0, 0, 0, 0.22);
--wm-aud-wave-peak: rgba(16, 34, 74, 0.3);
--wm-aud-wave-rms: rgba(16, 34, 74, 0.62);
--wm-aud-wave-zero: rgba(16, 34, 74, 0.24);
--wm-aud-wave-selected-peak: color-mix(in srgb, var(--wm-accent) 40%, transparent);
--wm-aud-wave-selected-rms: var(--wm-accent);
--wm-aud-clip-tint: var(--wm-accent);
--wm-aud-clip-title-fg: #ffffff;
--wm-aud-clip-select-ring: rgba(255, 255, 255, 0.92);
--wm-aud-clip-body: rgba(255, 255, 255, 0.72);
--wm-aud-playhead: #16181d;
--wm-aud-playhead-glow: rgba(0, 0, 0, 0.3);
--wm-aud-selection: color-mix(in srgb, var(--wm-accent) 22%, transparent);
--wm-aud-selection-edge: var(--wm-accent);
--wm-aud-cycle: color-mix(in srgb, var(--wm-warning-solid) 55%, transparent);
--wm-aud-marker: var(--wm-brand-blue-light);
--wm-aud-meter-ok: var(--wm-success-solid);
--wm-aud-meter-warn: var(--wm-warning-solid);
--wm-aud-meter-clip: var(--wm-error-solid);
--wm-aud-meter-off: rgba(10, 20, 45, 0.12);
--wm-aud-meter-hold: rgba(255, 255, 255, 0.92);
--wm-aud-meter-reduction: var(--wm-brand-cyan);
--wm-aud-rec: var(--wm-error-solid);
--wm-aud-solo: var(--wm-warning-solid);
--wm-aud-mute: var(--wm-accent);
--wm-aud-monitor: var(--wm-success-solid);
--wm-aud-on-state-fg: #ffffff;
--wm-aud-lcd-bg: linear-gradient(180deg, #23262d 0%, #14161a 100%);
--wm-aud-lcd-fg: #e9f0fb;
--wm-aud-lcd-dim: rgba(233, 240, 251, 0.38);
--wm-aud-lcd-accent: var(--wm-brand-cyan);
--wm-aud-lcd-rec: #ff6b60;
--wm-aud-lcd-edge: rgba(0, 0, 0, 0.5);
--wm-aud-graph-bg: #cfd3db;
--wm-aud-graph-grid: rgba(10, 20, 45, 0.12);
--wm-aud-graph-axis: rgba(10, 20, 45, 0.3);
--wm-aud-curve: var(--wm-accent);
--wm-aud-curve-fill: color-mix(in srgb, var(--wm-accent) 18%, transparent);
--wm-aud-spectrum: color-mix(in srgb, var(--wm-brand-cyan) 70%, transparent);
--wm-aud-spectrum-hold: rgba(10, 20, 45, 0.4);
--wm-aud-automation: var(--wm-accent);
--wm-aud-band-1: var(--wm-brand-cyan);
--wm-aud-band-2: var(--wm-brand-blue-light);
--wm-aud-band-3: var(--wm-accent);
--wm-aud-band-4: var(--wm-success-solid);
--wm-aud-band-5: var(--wm-warning-solid);
--wm-aud-band-6: var(--wm-error-solid);
}
:root[data-theme="dark"],
.wm-demo-dark {
--wm-aud-surface: #121216;
--wm-aud-panel: #202025;
--wm-aud-panel-raised: #2a2a30;
--wm-aud-lane: #1a1a1f;
--wm-aud-lane-alt: #16161a;
--wm-aud-rail: #26262c;
--wm-aud-grid: rgba(255, 255, 255, 0.09);
--wm-aud-grid-strong: rgba(255, 255, 255, 0.2);
--wm-aud-separator: rgba(255, 255, 255, 0.12);
--wm-aud-inset: #0d0d10;
--wm-aud-inset-deep: #08080a;
--wm-aud-inset-shadow:
inset 0 1px 2px rgba(0, 0, 0, 0.7),
inset 0 0 0 0.5px rgba(255, 255, 255, 0.07);
--wm-aud-face-top: #56565e;
--wm-aud-face-bottom: #3d3d44;
--wm-aud-face-top-hover: #5f5f68;
--wm-aud-face-bottom-hover: #45454d;
--wm-aud-face-top-pressed: #3a3a41;
--wm-aud-face-bottom-pressed: #313137;
--wm-aud-face-edge: rgba(0, 0, 0, 0.66);
--wm-aud-face-gloss: inset 0 1px 0 rgba(255, 255, 255, 0.16);
--wm-aud-face-contact: 0 1px 2px rgba(0, 0, 0, 0.55);
--wm-aud-wave-peak: rgba(186, 210, 255, 0.32);
--wm-aud-wave-rms: rgba(200, 222, 255, 0.74);
--wm-aud-wave-zero: rgba(200, 222, 255, 0.2);
--wm-aud-wave-selected-peak: color-mix(in srgb, var(--wm-brand-cyan) 34%, transparent);
--wm-aud-wave-selected-rms: var(--wm-brand-cyan);
--wm-aud-clip-tint: var(--wm-accent);
--wm-aud-clip-title-fg: #ffffff;
--wm-aud-clip-select-ring: rgba(255, 255, 255, 0.92);
--wm-aud-clip-body: rgba(0, 0, 0, 0.34);
--wm-aud-playhead: #ffffff;
--wm-aud-playhead-glow: rgba(255, 255, 255, 0.34);
--wm-aud-selection: color-mix(in srgb, var(--wm-brand-cyan) 20%, transparent);
--wm-aud-selection-edge: var(--wm-brand-cyan);
--wm-aud-cycle: color-mix(in srgb, var(--wm-warning) 45%, transparent);
--wm-aud-marker: var(--wm-brand-cyan);
--wm-aud-meter-ok: var(--wm-success-solid);
--wm-aud-meter-warn: var(--wm-warning-solid);
--wm-aud-meter-clip: var(--wm-error-solid);
--wm-aud-meter-off: rgba(255, 255, 255, 0.07);
--wm-aud-meter-hold: rgba(255, 255, 255, 0.92);
--wm-aud-meter-reduction: var(--wm-brand-cyan);
--wm-aud-rec: var(--wm-error-solid);
--wm-aud-solo: var(--wm-warning-solid);
--wm-aud-mute: var(--wm-accent);
--wm-aud-monitor: var(--wm-success-solid);
--wm-aud-on-state-fg: #ffffff;
--wm-aud-lcd-bg: linear-gradient(180deg, #1d2027 0%, #0e1013 100%);
--wm-aud-lcd-fg: #e9f0fb;
--wm-aud-lcd-dim: rgba(233, 240, 251, 0.38);
--wm-aud-lcd-accent: var(--wm-brand-cyan);
--wm-aud-lcd-rec: #ff6b60;
--wm-aud-lcd-edge: rgba(0, 0, 0, 0.7);
--wm-aud-graph-bg: #0f0f13;
--wm-aud-graph-grid: rgba(255, 255, 255, 0.09);
--wm-aud-graph-axis: rgba(255, 255, 255, 0.26);
--wm-aud-curve: var(--wm-brand-cyan);
--wm-aud-curve-fill: color-mix(in srgb, var(--wm-brand-cyan) 16%, transparent);
--wm-aud-spectrum: color-mix(in srgb, var(--wm-brand-cyan) 66%, transparent);
--wm-aud-spectrum-hold: rgba(255, 255, 255, 0.42);
--wm-aud-automation: var(--wm-brand-cyan);
--wm-aud-band-1: var(--wm-brand-cyan);
--wm-aud-band-2: var(--wm-brand-blue-light);
--wm-aud-band-3: #6f95ff;
--wm-aud-band-4: var(--wm-success);
--wm-aud-band-5: var(--wm-warning);
--wm-aud-band-6: var(--wm-error);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--wm-aud-surface: #121216;
--wm-aud-panel: #202025;
--wm-aud-panel-raised: #2a2a30;
--wm-aud-lane: #1a1a1f;
--wm-aud-lane-alt: #16161a;
--wm-aud-rail: #26262c;
--wm-aud-grid: rgba(255, 255, 255, 0.09);
--wm-aud-grid-strong: rgba(255, 255, 255, 0.2);
--wm-aud-separator: rgba(255, 255, 255, 0.12);
--wm-aud-inset: #0d0d10;
--wm-aud-inset-deep: #08080a;
--wm-aud-inset-shadow:
inset 0 1px 2px rgba(0, 0, 0, 0.7),
inset 0 0 0 0.5px rgba(255, 255, 255, 0.07);
--wm-aud-face-top: #56565e;
--wm-aud-face-bottom: #3d3d44;
--wm-aud-face-top-hover: #5f5f68;
--wm-aud-face-bottom-hover: #45454d;
--wm-aud-face-top-pressed: #3a3a41;
--wm-aud-face-bottom-pressed: #313137;
--wm-aud-face-edge: rgba(0, 0, 0, 0.66);
--wm-aud-face-gloss: inset 0 1px 0 rgba(255, 255, 255, 0.16);
--wm-aud-face-contact: 0 1px 2px rgba(0, 0, 0, 0.55);
--wm-aud-wave-peak: rgba(186, 210, 255, 0.32);
--wm-aud-wave-rms: rgba(200, 222, 255, 0.74);
--wm-aud-wave-zero: rgba(200, 222, 255, 0.2);
--wm-aud-wave-selected-peak: color-mix(in srgb, var(--wm-brand-cyan) 34%, transparent);
--wm-aud-wave-selected-rms: var(--wm-brand-cyan);
--wm-aud-clip-tint: var(--wm-accent);
--wm-aud-clip-title-fg: #ffffff;
--wm-aud-clip-select-ring: rgba(255, 255, 255, 0.92);
--wm-aud-clip-body: rgba(0, 0, 0, 0.34);
--wm-aud-playhead: #ffffff;
--wm-aud-playhead-glow: rgba(255, 255, 255, 0.34);
--wm-aud-selection: color-mix(in srgb, var(--wm-brand-cyan) 20%, transparent);
--wm-aud-selection-edge: var(--wm-brand-cyan);
--wm-aud-cycle: color-mix(in srgb, var(--wm-warning) 45%, transparent);
--wm-aud-marker: var(--wm-brand-cyan);
--wm-aud-meter-ok: var(--wm-success-solid);
--wm-aud-meter-warn: var(--wm-warning-solid);
--wm-aud-meter-clip: var(--wm-error-solid);
--wm-aud-meter-off: rgba(255, 255, 255, 0.07);
--wm-aud-meter-hold: rgba(255, 255, 255, 0.92);
--wm-aud-meter-reduction: var(--wm-brand-cyan);
--wm-aud-rec: var(--wm-error-solid);
--wm-aud-solo: var(--wm-warning-solid);
--wm-aud-mute: var(--wm-accent);
--wm-aud-monitor: var(--wm-success-solid);
--wm-aud-on-state-fg: #ffffff;
--wm-aud-lcd-bg: linear-gradient(180deg, #1d2027 0%, #0e1013 100%);
--wm-aud-lcd-fg: #e9f0fb;
--wm-aud-lcd-dim: rgba(233, 240, 251, 0.38);
--wm-aud-lcd-accent: var(--wm-brand-cyan);
--wm-aud-lcd-rec: #ff6b60;
--wm-aud-lcd-edge: rgba(0, 0, 0, 0.7);
--wm-aud-graph-bg: #0f0f13;
--wm-aud-graph-grid: rgba(255, 255, 255, 0.09);
--wm-aud-graph-axis: rgba(255, 255, 255, 0.26);
--wm-aud-curve: var(--wm-brand-cyan);
--wm-aud-curve-fill: color-mix(in srgb, var(--wm-brand-cyan) 16%, transparent);
--wm-aud-spectrum: color-mix(in srgb, var(--wm-brand-cyan) 66%, transparent);
--wm-aud-spectrum-hold: rgba(255, 255, 255, 0.42);
--wm-aud-automation: var(--wm-brand-cyan);
--wm-aud-band-1: var(--wm-brand-cyan);
--wm-aud-band-2: var(--wm-brand-blue-light);
--wm-aud-band-3: #6f95ff;
--wm-aud-band-4: var(--wm-success);
--wm-aud-band-5: var(--wm-warning);
--wm-aud-band-6: var(--wm-error);
}
}
}
@layer tokens {
:root {
--wm-wic-agent: var(--wm-brand-cyan);
--wm-wic-agent-fill: rgba(42, 194, 243, 0.16);
--wm-wic-agent-halo: rgba(42, 194, 243, 0.34);
--wm-wic-agent-ink: #08222b;
--wm-wic-ocioso: var(--wm-label-tertiary);
--wm-wic-propondo: var(--wm-warning);
--wm-wic-propondo-fill: var(--wm-warning-fill);
--wm-wic-agindo: var(--wm-wic-agent);
--wm-wic-agindo-fill: var(--wm-wic-agent-fill);
--wm-wic-concluido: var(--wm-success);
--wm-wic-concluido-fill: var(--wm-success-fill);
--wm-wic-falhou: var(--wm-error);
--wm-wic-falhou-fill: var(--wm-error-fill);
--wm-wic-narration-bg: rgba(8, 10, 14, 0.82);
--wm-wic-narration-label: rgba(255, 255, 255, 0.93);
--wm-wic-trail-line: rgba(255, 255, 255, 0.14);
}
}
@layer tokens {
:root {
--wm-wic-chrome-fill: rgba(255, 255, 255, 0.08);
--wm-wic-chrome-fill-hover: rgba(255, 255, 255, 0.14);
--wm-wic-chrome-fill-active: rgba(255, 255, 255, 0.2);
--wm-wic-chrome-hairline: rgba(255, 255, 255, 0.12);
--wm-wic-chrome-label: rgba(255, 255, 255, 0.93);
--wm-wic-chrome-label-2: rgba(255, 255, 255, 0.62);
}
}
@layer tokens {
[data-wm-editor-appearance="light"] {
--wm-vid-bg: #d4d7dd;
--wm-vid-panel: #eaebef;
--wm-vid-panel-raised: #f6f7f9;
--wm-vid-panel-sunken: #e0e2e7;
--wm-vid-timeline-bg: #c9ccd3;
--wm-vid-track-bg: #d9dbe1;
--wm-vid-track-bg-alt: #d2d5dc;
--wm-vid-track-header-bg: #e2e4e9;
--wm-vid-ruler-bg: #e5e7eb;
--wm-vid-hairline: rgba(0, 0, 0, 0.12);
--wm-vid-separator: rgba(0, 0, 0, 0.16);
--wm-vid-grid: rgba(0, 0, 0, 0.14);
--wm-vid-grid-strong: rgba(0, 0, 0, 0.3);
--wm-vid-fill: rgba(0, 10, 30, 0.06);
--wm-vid-fill-hover: rgba(0, 10, 30, 0.11);
--wm-vid-fill-active: rgba(0, 10, 30, 0.17);
--wm-vid-label: rgba(0, 0, 0, 0.9);
--wm-vid-label-secondary: rgba(0, 0, 0, 0.6);
--wm-vid-label-tertiary: rgba(0, 0, 0, 0.4);
--wm-vid-label-on-clip: rgba(0, 0, 0, 0.88);
--wm-vid-playhead: #1c1c1f;
--wm-vid-playhead-glow: rgba(255, 255, 255, 0.7);
--wm-vid-skimmer: rgba(0, 0, 0, 0.5);
--wm-vid-selection-ring: var(--wm-accent);
--wm-vid-selection-fill: rgba(29, 89, 240, 0.12);
--wm-vid-locked: rgba(0, 0, 0, 0.5);
--wm-vid-disabled-veil: rgba(255, 255, 255, 0.45);
--wm-vid-keyframe: #1c1c1f;
--wm-vid-curve: var(--wm-accent);
--wm-vid-curve-handle: rgba(29, 89, 240, 0.5);
--wm-vid-clip-video-bg: #b9cff2;
--wm-vid-clip-video-accent: #2f6fe0;
--wm-vid-clip-video-edge: rgba(47, 111, 224, 0.4);
--wm-vid-clip-audio-bg: #b6e3d1;
--wm-vid-clip-audio-accent: #12805c;
--wm-vid-clip-audio-edge: rgba(18, 128, 92, 0.4);
--wm-vid-clip-title-bg: #cfc3f3;
--wm-vid-clip-title-accent: #6244c4;
--wm-vid-clip-title-edge: rgba(98, 68, 196, 0.4);
--wm-vid-clip-effect-bg: #f3d8bd;
--wm-vid-clip-effect-accent: #a4620f;
--wm-vid-clip-effect-edge: rgba(164, 98, 15, 0.4);
--wm-vid-clip-image-bg: #bde0ea;
--wm-vid-clip-image-accent: #12708a;
--wm-vid-clip-image-edge: rgba(18, 112, 138, 0.4);
--wm-vid-clip-generator-bg: #f2c8dd;
--wm-vid-clip-generator-accent: #a83069;
--wm-vid-clip-generator-edge: rgba(168, 48, 105, 0.4);
--wm-vid-wave-fill: rgba(16, 34, 74, 0.24);
--wm-vid-wave-rms: rgba(16, 34, 74, 0.42);
--wm-vid-wave-peak: rgba(16, 34, 74, 0.62);
--wm-vid-wave-baseline: rgba(16, 34, 74, 0.18);
--wm-vid-transition-bg: rgba(0, 0, 0, 0.12);
--wm-vid-transition-accent: rgba(0, 0, 0, 0.6);
--wm-vid-ghost-bg: rgba(0, 0, 0, 0.05);
--wm-vid-ghost-edge: rgba(0, 0, 0, 0.2);
--wm-vid-ghost-label: rgba(0, 0, 0, 0.45);
--wm-vid-ghost-hatch: rgba(0, 0, 0, 0.06);
--wm-lane-cena: #2f6fe0;
--wm-lane-cena-bg: #b9cff2;
--wm-lane-cena-edge: rgba(47, 111, 224, 0.4);
--wm-lane-elemento: #6244c4;
--wm-lane-elemento-bg: #cfc3f3;
--wm-lane-elemento-edge: rgba(98, 68, 196, 0.4);
--wm-lane-legenda: #12708a;
--wm-lane-legenda-bg: #bde0ea;
--wm-lane-legenda-edge: rgba(18, 112, 138, 0.4);
--wm-lane-marcador: #a4620f;
--wm-lane-marcador-bg: #f3d8bd;
--wm-lane-marcador-edge: rgba(164, 98, 15, 0.4);
--wm-lane-movimento: #a83069;
--wm-lane-movimento-bg: #f2c8dd;
--wm-lane-movimento-edge: rgba(168, 48, 105, 0.4);
--wm-lane-voz: #12805c;
--wm-lane-voz-bg: #b6e3d1;
--wm-lane-voz-edge: rgba(18, 128, 92, 0.4);
--wm-lane-trilha: #55606f;
--wm-lane-trilha-bg: #ccd2dc;
--wm-lane-trilha-edge: rgba(85, 96, 111, 0.4);
}
}
@layer tokens {
:root {
--wm-vid-muted-fill: rgba(255, 159, 10, 0.2);
--wm-vid-solo-fill: rgba(255, 214, 10, 0.2);
--wm-vid-locked-fill: rgba(255, 255, 255, 0.12);
--wm-vid-track-scrim: rgba(0, 0, 0, 0.5);
--wm-vid-ghost-restore-fill: rgba(110, 168, 255, 0.16);
--wm-vid-ghost-restore-fill-hover: rgba(110, 168, 255, 0.28);
--wm-vid-stats-kept: #48c79a;
--wm-vid-stats-removed: #ff9f0a;
--wm-vid-stats-bar-bg: rgba(255, 255, 255, 0.1);
}
}
@layer tokens {
[data-wm-editor-appearance="light"] {
--wm-vid-armed: #c00011;
--wm-vid-armed-fill: rgba(192, 0, 17, 0.14);
--wm-vid-muted: #995400;
--wm-vid-muted-fill: rgba(153, 84, 0, 0.14);
--wm-vid-solo: #8a6d00;
--wm-vid-solo-fill: rgba(138, 109, 0, 0.16);
--wm-vid-locked-fill: rgba(0, 0, 0, 0.08);
--wm-vid-wave-clip: #c00011;
--wm-vid-track-scrim: rgba(255, 255, 255, 0.62);
--wm-vid-ghost-restore: var(--wm-accent);
--wm-vid-ghost-restore-fill: rgba(29, 89, 240, 0.12);
--wm-vid-ghost-restore-fill-hover: rgba(29, 89, 240, 0.22);
--wm-vid-stats-kept: #12805c;
--wm-vid-stats-removed: #995400;
--wm-vid-stats-bar-bg: rgba(0, 0, 0, 0.12);
}
}
@layer tokens {
:root {
--wm-vid-toggle-on: #6ea8ff;
--wm-vid-toggle-on-fill: rgba(110, 168, 255, 0.16);
--wm-vid-scrubber-track: rgba(255, 255, 255, 0.16);
--wm-vid-scrubber-buffer: rgba(255, 255, 255, 0.3);
--wm-vid-scrubber-fill: rgba(255, 255, 255, 0.92);
--wm-vid-scrubber-thumb-color: #f2f3f7;
--wm-vid-scrub-preview-edge: rgba(255, 255, 255, 0.16);
--wm-vid-guide: rgba(255, 255, 255, 0.3);
--wm-vid-guide-strong: rgba(255, 255, 255, 0.5);
--wm-vid-timecode-bg: rgba(0, 0, 0, 0.34);
--wm-vid-timecode-segment-fill: rgba(110, 168, 255, 0.3);
--wm-vid-marker-label-bg: rgba(20, 20, 24, 0.92);
--wm-vid-marker-standard-fill: rgba(74, 158, 255, 0.2);
--wm-vid-marker-todo-fill: rgba(255, 69, 58, 0.2);
--wm-vid-marker-done-fill: rgba(50, 208, 116, 0.2);
--wm-vid-marker-chapter-fill: rgba(255, 159, 10, 0.2);
}
[data-wm-editor-appearance="light"] {
--wm-vid-toggle-on: #1d59f0;
--wm-vid-toggle-on-fill: rgba(29, 89, 240, 0.12);
--wm-vid-scrubber-track: rgba(0, 10, 30, 0.18);
--wm-vid-scrubber-buffer: rgba(0, 10, 30, 0.32);
--wm-vid-scrubber-fill: rgba(16, 34, 74, 0.86);
--wm-vid-scrubber-thumb-color: #1c1c1f;
--wm-vid-scrub-preview-edge: rgba(0, 0, 0, 0.18);
--wm-vid-timecode-bg: rgba(255, 255, 255, 0.72);
--wm-vid-timecode-segment-fill: rgba(29, 89, 240, 0.22);
--wm-vid-marker-label-bg: rgba(255, 255, 255, 0.94);
--wm-vid-marker-standard: #1f6fd0;
--wm-vid-marker-todo: #cc2f26;
--wm-vid-marker-done: #12805c;
--wm-vid-marker-chapter: #a4620f;
--wm-vid-marker-standard-fill: rgba(31, 111, 208, 0.16);
--wm-vid-marker-todo-fill: rgba(204, 47, 38, 0.16);
--wm-vid-marker-done-fill: rgba(18, 128, 92, 0.16);
--wm-vid-marker-chapter-fill: rgba(164, 98, 15, 0.16);
}
}
@layer tokens {
:root {
--wm-vid-handle: rgba(255, 255, 255, 0.98);
--wm-vid-handle-shadow: rgba(0, 0, 0, 0.75);
--wm-vid-handle-hover: rgba(255, 255, 255, 1);
--wm-vid-handle-active: #ffd60a;
--wm-vid-handle-ia: #5ee7e0;
--wm-vid-overlay-box: rgba(255, 255, 255, 0.88);
--wm-vid-overlay-box-shadow: rgba(0, 0, 0, 0.62);
--wm-vid-overlay-guide: rgba(255, 255, 255, 0.34);
--wm-vid-overlay-guide-strong: rgba(255, 255, 255, 0.58);
--wm-vid-overlay-veil: rgba(0, 0, 0, 0.58);
--wm-vid-overlay-veil-soft: rgba(0, 0, 0, 0.38);
--wm-vid-overlay-arm: rgba(255, 255, 255, 0.82);
--wm-vid-overlay-center: rgba(255, 255, 255, 0.72);
--wm-vid-overlay-safe: rgba(255, 214, 10, 0.5);
--wm-vid-overlay-hud-bg: rgba(0, 0, 0, 0.68);
--wm-vid-overlay-hud-label: rgba(255, 255, 255, 0.96);
--wm-vid-overlay-hud-hairline: rgba(255, 255, 255, 0.18);
--wm-vid-overlay-hud-label-2: rgba(255, 255, 255, 0.72);
--wm-vid-crop-scrim: rgba(0, 0, 0, 0.66);
--wm-vid-crop-ratio-hover: rgba(255, 255, 255, 0.14);
--wm-vid-crop-ratio-ativo: rgba(255, 255, 255, 0.92);
--wm-vid-crop-ratio-ativo-ink: #14161a;
--wm-vid-crop-alerta: #ffb340;
--wm-vid-inspector-bg: var(--wm-vid-panel);
--wm-vid-inspector-tabs-bg: var(--wm-vid-panel-sunken);
--wm-vid-inspector-group-label: rgba(255, 255, 255, 0.5);
--wm-vid-inspector-field-bg: rgba(255, 255, 255, 0.08);
--wm-vid-inspector-field-bg-hover: rgba(255, 255, 255, 0.13);
--wm-vid-inspector-field-edge: rgba(255, 255, 255, 0.12);
--wm-vid-inspector-scrub-hint: rgba(255, 255, 255, 0.3);
--wm-vid-inspector-modified: #ff9f0a;
--wm-vid-curve-bg: var(--wm-vid-panel-sunken);
--wm-vid-curve-grid: rgba(255, 255, 255, 0.09);
--wm-vid-curve-grid-strong: rgba(255, 255, 255, 0.18);
--wm-vid-curve-ghost: rgba(255, 255, 255, 0.22);
--wm-vid-keyframe-ring: rgba(0, 0, 0, 0.7);
--wm-vid-keyframe-hold: #f0a35e;
--wm-vid-keyframe-linear: #9aa6b8;
--wm-vid-zoom-track: rgba(255, 255, 255, 0.16);
--wm-vid-zoom-fill: #6ea8ff;
--wm-vid-zoom-thumb-bg: #f2f3f7;
--wm-vid-zoom-thumb-shadow: rgba(0, 0, 0, 0.5);
--wm-vid-zoom-notch: rgba(255, 255, 255, 0.28);
--wm-vid-zoom-notch-ativo: rgba(255, 255, 255, 0.75);
}
}
@layer tokens {
[data-wm-editor-appearance="light"] {
--wm-vid-inspector-bg: var(--wm-vid-panel);
--wm-vid-inspector-tabs-bg: var(--wm-vid-panel-sunken);
--wm-vid-inspector-group-label: rgba(0, 0, 0, 0.5);
--wm-vid-inspector-field-bg: rgba(0, 10, 30, 0.06);
--wm-vid-inspector-field-bg-hover: rgba(0, 10, 30, 0.11);
--wm-vid-inspector-field-edge: rgba(0, 0, 0, 0.14);
--wm-vid-inspector-scrub-hint: rgba(0, 0, 0, 0.32);
--wm-vid-inspector-modified: #a4620f;
--wm-vid-curve-bg: var(--wm-vid-panel-sunken);
--wm-vid-curve-grid: rgba(0, 0, 0, 0.1);
--wm-vid-curve-grid-strong: rgba(0, 0, 0, 0.2);
--wm-vid-curve-ghost: rgba(0, 0, 0, 0.24);
--wm-vid-keyframe-ring: rgba(255, 255, 255, 0.8);
--wm-vid-keyframe-hold: #a4620f;
--wm-vid-keyframe-linear: #55606f;
--wm-vid-zoom-track: rgba(0, 0, 0, 0.16);
--wm-vid-zoom-fill: var(--wm-accent);
--wm-vid-zoom-thumb-bg: #ffffff;
--wm-vid-zoom-thumb-shadow: rgba(0, 0, 0, 0.28);
--wm-vid-zoom-notch: rgba(0, 0, 0, 0.24);
--wm-vid-zoom-notch-ativo: rgba(0, 0, 0, 0.62);
}
}
@layer tokens {
:root {
--wm-vid-hud-bg: rgba(0, 0, 0, 0.74);
--wm-vid-hud-label: rgba(255, 255, 255, 0.95);
--wm-vid-hud-label-secondary: rgba(255, 255, 255, 0.66);
--wm-vid-hud-hairline: rgba(255, 255, 255, 0.16);
--wm-vid-trim-handle: #f2f3f7;
--wm-vid-trim-handle-ink: rgba(0, 0, 0, 0.62);
--wm-vid-trim-handle-active: #ffd60a;
--wm-vid-trim-limit: #ff453a;
--wm-vid-trim-limit-fill: rgba(255, 69, 58, 0.22);
--wm-vid-ripple-fill: rgba(255, 214, 10, 0.14);
--wm-vid-ripple-hatch-ink: rgba(255, 214, 10, 0.3);
--wm-vid-ripple-shift-fill: rgba(255, 214, 10, 0.2);
--wm-vid-roll-fill: rgba(110, 168, 255, 0.16);
--wm-vid-roll-ink: rgba(0, 0, 0, 0.68);
--wm-vid-blade-cursor:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M5.6 2.6 L13.4 5.6 L13.4 16.4 L5.6 20.9 Z' fill='rgb(242,243,247)' stroke='rgba(0,0,0,0.66)' stroke-width='1.2' stroke-linejoin='round'/%3E%3Crect x='8.5' y='8.6' width='2.4' height='6.2' rx='1.2' fill='rgba(0,0,0,0.5)'/%3E%3Cpath d='M5.6 2.6 L5.6 20.9' stroke='rgb(255,69,58)' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")
5 21, crosshair;
--wm-vid-snap-node-ink: rgba(0, 0, 0, 0.7);
--wm-vid-range-cap-ink: rgba(0, 0, 0, 0.7);
--wm-vid-range-ring: rgba(255, 214, 10, 0.34);
}
[data-wm-editor-appearance="light"] {
--wm-vid-hud-bg: rgba(255, 255, 255, 0.9);
--wm-vid-hud-label: rgba(0, 0, 0, 0.92);
--wm-vid-hud-label-secondary: rgba(0, 0, 0, 0.62);
--wm-vid-hud-hairline: rgba(0, 0, 0, 0.14);
--wm-vid-trim-handle: #26262b;
--wm-vid-trim-handle-ink: rgba(255, 255, 255, 0.8);
--wm-vid-trim-handle-active: #a4620f;
--wm-vid-trim-limit: #c62d22;
--wm-vid-trim-limit-fill: rgba(198, 45, 34, 0.18);
--wm-vid-ripple: #a4620f;
--wm-vid-ripple-fill: rgba(164, 98, 15, 0.13);
--wm-vid-ripple-hatch-ink: rgba(164, 98, 15, 0.28);
--wm-vid-ripple-shift-fill: rgba(164, 98, 15, 0.18);
--wm-vid-roll: #2f6fe0;
--wm-vid-roll-fill: rgba(47, 111, 224, 0.14);
--wm-vid-roll-ink: rgba(255, 255, 255, 0.9);
--wm-vid-blade: #c62d22;
--wm-vid-blade-guide: rgba(198, 45, 34, 0.6);
--wm-vid-blade-cursor:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M5.6 2.6 L13.4 5.6 L13.4 16.4 L5.6 20.9 Z' fill='rgb(38,38,43)' stroke='rgba(255,255,255,0.82)' stroke-width='1.2' stroke-linejoin='round'/%3E%3Crect x='8.5' y='8.6' width='2.4' height='6.2' rx='1.2' fill='rgba(255,255,255,0.62)'/%3E%3Cpath d='M5.6 2.6 L5.6 20.9' stroke='rgb(198,45,34)' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")
5 21, crosshair;
--wm-vid-snap: #a4620f;
--wm-vid-snap-glow: rgba(164, 98, 15, 0.26);
--wm-vid-snap-node-ink: rgba(255, 255, 255, 0.92);
--wm-vid-range-border: #a4620f;
--wm-vid-range-fill: rgba(164, 98, 15, 0.12);
--wm-vid-range-ring: rgba(164, 98, 15, 0.3);
--wm-vid-in-out: #a4620f;
--wm-vid-inout-erro: #c62d22;
--wm-vid-inout-erro-fill: rgba(198, 45, 34, 0.2);
--wm-vid-range-cap-ink: rgba(255, 255, 255, 0.92);
--wm-vid-outside-range: rgba(255, 255, 255, 0.55);
}
}
@layer tokens {
:root {
--wm-vid-clip-scrim: linear-gradient(
180deg,
rgba(0, 0, 0, 0.62) 0%,
rgba(0, 0, 0, 0.34) 52%,
rgba(0, 0, 0, 0) 100%
);
--wm-vid-clip-scrim-label: rgba(255, 255, 255, 0.96);
--wm-vid-clip-scrim-label-2: rgba(255, 255, 255, 0.74);
--wm-vid-clip-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
}
@layer tokens {
:root {
--wm-vid-effect-tile-bg: rgba(255, 255, 255, 0.06);
--wm-vid-effect-tile-bg-hover: rgba(255, 255, 255, 0.12);
--wm-vid-effect-preview-bg: #0e1016;
--wm-vid-effect-preview-a: #2f6fe0;
--wm-vid-effect-preview-b: #f07fb5;
--wm-vid-effect-preview-c: #ffd60a;
--wm-vid-effect-preview-veil: rgba(0, 0, 0, 0.55);
--wm-vid-effect-favorite: #ffd60a;
--wm-vid-effect-applied: #32d074;
--wm-vid-effect-applied-fill: rgba(50, 208, 116, 0.18);
--wm-vid-effect-gpu: #f0a35e;
--wm-vid-transition-edge: rgba(255, 255, 255, 0.28);
--wm-vid-transition-hover: rgba(255, 255, 255, 0.22);
--wm-vid-transition-glyph: rgba(255, 255, 255, 0.82);
--wm-vid-transition-handle: rgba(255, 255, 255, 0.6);
--wm-vid-transition-selected: var(--wm-vid-selection-ring);
--wm-vid-transition-seam: rgba(0, 0, 0, 0.55);
--wm-vid-wheel-hue: conic-gradient(
from 0deg,
hsl(0 90% 55%) 0deg,
hsl(30 90% 55%) 30deg,
hsl(60 90% 55%) 60deg,
hsl(90 90% 50%) 90deg,
hsl(120 80% 45%) 120deg,
hsl(150 75% 45%) 150deg,
hsl(180 80% 50%) 180deg,
hsl(210 85% 55%) 210deg,
hsl(240 85% 58%) 240deg,
hsl(270 80% 60%) 270deg,
hsl(300 85% 58%) 300deg,
hsl(330 88% 57%) 330deg,
hsl(360 90% 55%) 360deg
);
--wm-vid-wheel-saturation: radial-gradient(
circle at 50% 50%,
rgba(255, 255, 255, 0.95) 0%,
rgba(255, 255, 255, 0.55) 34%,
rgba(255, 255, 255, 0) 72%
);
--wm-vid-wheel-veil: rgba(10, 10, 12, 0.34);
--wm-vid-wheel-ring: rgba(255, 255, 255, 0.18);
--wm-vid-wheel-ring-ativa: var(--wm-vid-selection-ring);
--wm-vid-wheel-puck-fill: rgba(255, 255, 255, 0.94);
--wm-vid-wheel-puck-ring: rgba(0, 0, 0, 0.62);
--wm-vid-wheel-crosshair-color: rgba(255, 255, 255, 0.45);
--wm-vid-wheel-neutro: rgba(255, 255, 255, 0.5);
--wm-vid-wheel-lift-track: rgba(255, 255, 255, 0.16);
--wm-vid-wheel-lift-fill: rgba(255, 255, 255, 0.62);
--wm-vid-wheel-canal-r: #ff6b61;
--wm-vid-wheel-canal-g: #50e082;
--wm-vid-wheel-canal-b: #6ea8ff;
--wm-vid-scope-label: rgba(255, 255, 255, 0.74);
--wm-vid-scope-label-strong: rgba(255, 255, 255, 0.92);
--wm-vid-scope-ire: rgba(255, 255, 255, 0.6);
--wm-vid-scope-ire-legal: rgba(255, 255, 255, 0.24);
--wm-vid-scope-ire-ilegal: rgba(255, 69, 58, 0.55);
--wm-vid-scope-ire-ilegal-fill: rgba(255, 69, 58, 0.1);
--wm-vid-scope-skin: rgba(255, 190, 140, 0.62);
--wm-vid-scope-box: rgba(255, 255, 255, 0.1);
--wm-vid-export-scrim: rgba(0, 0, 0, 0.34);
--wm-vid-export-preset-ring: var(--wm-accent);
--wm-vid-export-preset-fill: var(--wm-accent-fill);
--wm-vid-export-estimate: var(--wm-label-secondary);
--wm-vid-export-alerta: #b3541e;
--wm-vid-export-alerta-fill: rgba(179, 84, 30, 0.12);
}
:root[data-theme="dark"] {
--wm-vid-export-scrim: rgba(0, 0, 0, 0.52);
--wm-vid-export-alerta: #f0a35e;
--wm-vid-export-alerta-fill: rgba(240, 163, 94, 0.16);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--wm-vid-export-scrim: rgba(0, 0, 0, 0.52);
--wm-vid-export-alerta: #f0a35e;
--wm-vid-export-alerta-fill: rgba(240, 163, 94, 0.16);
}
}
[data-wm-editor-appearance="light"] {
--wm-vid-effect-tile-bg: rgba(0, 10, 30, 0.05);
--wm-vid-effect-tile-bg-hover: rgba(0, 10, 30, 0.1);
--wm-vid-transition-bg: rgba(0, 10, 30, 0.14);
--wm-vid-transition-edge: rgba(0, 0, 0, 0.3);
--wm-vid-transition-hover: rgba(0, 10, 30, 0.22);
--wm-vid-transition-accent: rgba(0, 0, 0, 0.68);
--wm-vid-transition-glyph: rgba(0, 0, 0, 0.78);
--wm-vid-transition-handle: rgba(0, 0, 0, 0.5);
--wm-vid-transition-seam: rgba(0, 0, 0, 0.3);
--wm-vid-wheel-ring: rgba(0, 0, 0, 0.2);
--wm-vid-wheel-ring-ativa: var(--wm-accent);
--wm-vid-wheel-veil: rgba(255, 255, 255, 0.2);
--wm-vid-wheel-puck-fill: rgba(255, 255, 255, 0.98);
--wm-vid-wheel-crosshair-color: rgba(0, 0, 0, 0.34);
--wm-vid-wheel-neutro: rgba(0, 0, 0, 0.42);
--wm-vid-wheel-lift-track: rgba(0, 10, 30, 0.16);
--wm-vid-wheel-lift-fill: rgba(0, 0, 0, 0.55);
--wm-vid-wheel-canal-r: #c62d22;
--wm-vid-wheel-canal-g: #0e6b4d;
--wm-vid-wheel-canal-b: #2456c8;
}
}
@layer tokens {
.wm-step-flow,
.wm-step-progress,
.wm-step-mobile,
.wm-step-trans {
--wm-step-pendente: var(--wm-label-secondary);
--wm-step-pendente-soft: var(--wm-label-tertiary);
--wm-step-pendente-fill: var(--wm-fill-tertiary);
--wm-step-pendente-ring: var(--wm-separator-strong);
--wm-step-atual: var(--wm-accent-text);
--wm-step-atual-fill: var(--wm-accent-fill);
--wm-step-atual-solid: var(--wm-accent);
--wm-step-atual-ink: var(--wm-label-on-accent);
--wm-step-concluida: var(--wm-success);
--wm-step-concluida-fill: var(--wm-success-fill);
--wm-step-concluida-solid: var(--wm-success-solid);
--wm-step-concluida-ink: #ffffff;
--wm-step-erro: var(--wm-error);
--wm-step-erro-fill: var(--wm-error-fill);
--wm-step-erro-solid: var(--wm-error-solid);
--wm-step-erro-ink: #ffffff;
--wm-step-opcional: var(--wm-label-secondary);
--wm-step-opcional-fill: var(--wm-fill-quaternary);
--wm-step-opcional-ring: var(--wm-separator-strong);
--wm-step-desabilitada: var(--wm-label-tertiary);
--wm-step-desabilitada-fill: var(--wm-fill-quaternary);
--wm-step-desabilitada-label: var(--wm-label-secondary);
--wm-step-trilho: var(--wm-separator-strong);
--wm-step-trilho-feito: var(--wm-success);
--wm-step-trilho-atual: var(--wm-accent);
--wm-step-track: var(--wm-fill-tertiary);
--wm-step-fill: var(--wm-accent-gradient);
--wm-step-fill-erro: var(--wm-error);
}
}
@layer tokens {
:root {
--wm-field-ai: var(--wm-wic-agent);
--wm-field-ai-fill: var(--wm-wic-agent-fill);
--wm-field-ai-halo: var(--wm-wic-agent-halo);
--wm-field-ai-label: var(--wm-label-secondary);
--wm-field-ai-label-strong: var(--wm-label-primary);
--wm-field-ai-ocioso: var(--wm-label-tertiary);
--wm-field-ai-ocioso-hover: var(--wm-accent-text);
--wm-field-ai-pensando: var(--wm-field-ai);
--wm-field-ai-pensando-fill: var(--wm-field-ai-fill);
--wm-field-ai-escrevendo: var(--wm-field-ai);
--wm-field-ai-concluido: var(--wm-success);
--wm-field-ai-concluido-fill: var(--wm-success-fill);
--wm-field-ai-falhou: var(--wm-error);
--wm-field-ai-falhou-fill: var(--wm-error-fill);
--wm-field-ai-perguntando: var(--wm-warning);
--wm-field-ai-perguntando-fill: var(--wm-warning-fill);
--wm-field-ai-proposta-fill: var(--wm-field-ai-fill);
--wm-field-ai-proposta-edge: var(--wm-field-ai-halo);
--wm-field-ai-aceito: var(--wm-success);
--wm-field-ai-aceito-fill: var(--wm-success-fill);
--wm-field-ai-ctx-fill: var(--wm-fill-quaternary);
--wm-field-ai-ctx-label: var(--wm-label-secondary);
--wm-field-ai-sensivel: var(--wm-warning);
--wm-field-ai-sensivel-fill: var(--wm-warning-fill);
}
}
@layer tokens {
:root {
--wm-terminal-bg-top: #1a1a20;
--wm-terminal-bg-bottom: #131317;
--wm-terminal-stderr: #ff6b60;
--wm-terminal-success: #32d074;
--wm-terminal-accent: #2ac2f3;
}
}
@layer tokens {
:root {
--wm-media-canvas-bg: #101116;
--wm-media-poster-start: #0a1030;
--wm-media-poster-end: #020b45;
}
}
@layer tokens {
:root {
--wm-rating-fill: #f5a623;
}
}
@layer tokens {
:root {
--wm-avatar-upload-veu: rgba(8, 10, 18, 0.62);
--wm-avatar-upload-veu-suave: rgba(8, 10, 18, 0.38);
--wm-avatar-upload-hud: #ffffff;
--wm-avatar-upload-guia: rgba(255, 255, 255, 0.86);
}
}
@layer tokens {
:root,
:root[data-theme="light"] {
--wm-mail-roxo: #6d3fd4;
--wm-mail-roxo-fill: rgba(109, 63, 212, 0.12);
--wm-mail-ardosia: #5f6368;
--wm-mail-ardosia-fill: rgba(95, 99, 104, 0.12);
--wm-mail-ciano: #0d7396;
--wm-mail-ciano-fill: rgba(13, 115, 150, 0.12);
--wm-mail-vinho: #8f1d46;
--wm-mail-vinho-fill: rgba(143, 29, 70, 0.12);
}
:root[data-theme="dark"] {
--wm-mail-roxo: #a98cf0;
--wm-mail-roxo-fill: rgba(169, 140, 240, 0.14);
--wm-mail-ardosia: #9a9aa0;
--wm-mail-ardosia-fill: rgba(154, 154, 160, 0.14);
--wm-mail-ciano: #38b6de;
--wm-mail-ciano-fill: rgba(56, 182, 222, 0.14);
--wm-mail-vinho: #e87f9c;
--wm-mail-vinho-fill: rgba(232, 127, 156, 0.14);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--wm-mail-roxo: #a98cf0;
--wm-mail-roxo-fill: rgba(169, 140, 240, 0.14);
--wm-mail-ardosia: #9a9aa0;
--wm-mail-ardosia-fill: rgba(154, 154, 160, 0.14);
--wm-mail-ciano: #38b6de;
--wm-mail-ciano-fill: rgba(56, 182, 222, 0.14);
--wm-mail-vinho: #e87f9c;
--wm-mail-vinho-fill: rgba(232, 127, 156, 0.14);
}
}
:root {
--wm-mail-status-rascunho: var(--wm-label-secondary);
--wm-mail-status-rascunho-fill: var(--wm-fill-secondary);
--wm-mail-status-agendada: var(--wm-mail-roxo);
--wm-mail-status-agendada-fill: var(--wm-mail-roxo-fill);
--wm-mail-status-enviando: var(--wm-accent-text);
--wm-mail-status-enviando-fill: var(--wm-accent-fill);
--wm-mail-status-enviada: var(--wm-success);
--wm-mail-status-enviada-fill: var(--wm-success-fill);
--wm-mail-status-falhou: var(--wm-error);
--wm-mail-status-falhou-fill: var(--wm-error-fill);
--wm-mail-status-pausada: var(--wm-warning);
--wm-mail-status-pausada-fill: var(--wm-warning-fill);
--wm-mail-status-cancelada: var(--wm-mail-ardosia);
--wm-mail-status-cancelada-fill: var(--wm-mail-ardosia-fill);
--wm-mail-evento-envio: var(--wm-info);
--wm-mail-evento-envio-fill: var(--wm-info-fill);
--wm-mail-evento-entrega: var(--wm-success);
--wm-mail-evento-entrega-fill: var(--wm-success-fill);
--wm-mail-evento-abertura: var(--wm-mail-roxo);
--wm-mail-evento-abertura-fill: var(--wm-mail-roxo-fill);
--wm-mail-evento-clique: var(--wm-mail-ciano);
--wm-mail-evento-clique-fill: var(--wm-mail-ciano-fill);
--wm-mail-evento-falha: var(--wm-error);
--wm-mail-evento-falha-fill: var(--wm-error-fill);
--wm-mail-evento-reclamacao: var(--wm-warning);
--wm-mail-evento-reclamacao-fill: var(--wm-warning-fill);
--wm-mail-evento-descadastro: var(--wm-mail-ardosia);
--wm-mail-evento-descadastro-fill: var(--wm-mail-ardosia-fill);
--wm-mail-evento-rejeitado: var(--wm-mail-vinho);
--wm-mail-evento-rejeitado-fill: var(--wm-mail-vinho-fill);
--wm-invoice-status-paid: var(--wm-success);
--wm-invoice-status-paid-fill: var(--wm-success-fill);
--wm-invoice-status-unpaid: var(--wm-warning);
--wm-invoice-status-unpaid-fill: var(--wm-warning-fill);
--wm-invoice-status-overdue: var(--wm-error);
--wm-invoice-status-overdue-fill: var(--wm-error-fill);
--wm-invoice-status-cancelled: var(--wm-mail-ardosia);
--wm-invoice-status-cancelled-fill: var(--wm-mail-ardosia-fill);
--wm-invoice-status-refunded: var(--wm-mail-roxo);
--wm-invoice-status-refunded-fill: var(--wm-mail-roxo-fill);
}
}
@layer base {
body {
font-family: var(--wm-font-family);
font-size: var(--wm-font-size-body);
font-weight: var(--wm-font-weight-regular);
line-height: var(--wm-leading-body);
letter-spacing: var(--wm-tracking-body);
color: var(--wm-label-primary);
-webkit-font-smoothing: antialiased;
}
.wm-text-large-title {
font-size: var(--wm-font-size-large-title);
font-weight: var(--wm-font-weight-bold);
line-height: var(--wm-leading-large-title);
letter-spacing: var(--wm-tracking-large-title);
}
.wm-text-title1 {
font-size: var(--wm-font-size-title1);
font-weight: var(--wm-font-weight-bold);
line-height: var(--wm-leading-title1);
letter-spacing: var(--wm-tracking-title1);
}
.wm-text-title2 {
font-size: var(--wm-font-size-title2);
font-weight: var(--wm-font-weight-semibold);
line-height: var(--wm-leading-title2);
letter-spacing: var(--wm-tracking-title2);
}
.wm-text-title3 {
font-size: var(--wm-font-size-title3);
font-weight: var(--wm-font-weight-semibold);
line-height: var(--wm-leading-title3);
letter-spacing: var(--wm-tracking-title3);
}
.wm-text-headline {
font-size: var(--wm-font-size-headline);
font-weight: var(--wm-font-weight-bold);
line-height: var(--wm-leading-headline);
letter-spacing: var(--wm-tracking-headline);
}
.wm-text-body {
font-size: var(--wm-font-size-body);
font-weight: var(--wm-font-weight-regular);
line-height: var(--wm-leading-body);
letter-spacing: var(--wm-tracking-body);
}
.wm-text-callout {
font-size: var(--wm-font-size-callout);
font-weight: var(--wm-font-weight-regular);
line-height: var(--wm-leading-callout);
letter-spacing: var(--wm-tracking-callout);
}
.wm-text-subheadline {
font-size: var(--wm-font-size-subheadline);
font-weight: var(--wm-font-weight-regular);
line-height: var(--wm-leading-subheadline);
letter-spacing: var(--wm-tracking-subheadline);
}
.wm-text-footnote {
font-size: var(--wm-font-size-footnote);
font-weight: var(--wm-font-weight-regular);
line-height: var(--wm-leading-footnote);
letter-spacing: var(--wm-tracking-footnote);
}
.wm-text-caption {
font-size: var(--wm-font-size-caption);
font-weight: var(--wm-font-weight-regular);
line-height: var(--wm-leading-caption);
letter-spacing: var(--wm-tracking-caption);
}
.wm-text-caption2 {
font-size: var(--wm-font-size-caption2);
font-weight: var(--wm-font-weight-medium);
line-height: var(--wm-leading-caption2);
letter-spacing: var(--wm-letter-spacing-wide);
text-transform: uppercase;
}
.wm-text-mono {
font-family: var(--wm-font-family-mono);
}
.wm-text-tabular {
font-variant-numeric: tabular-nums;
}
.wm-text-brand-gradient {
background: var(--wm-brand-gradient, linear-gradient(135deg, var(--wm-accent), #2ac2f3));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.wm-text-primary {
color: var(--wm-label-primary);
}
.wm-text-secondary {
color: var(--wm-label-secondary);
}
.wm-text-tertiary {
color: var(--wm-label-tertiary);
}
.wm-text-quaternary {
color: var(--wm-label-quaternary);
}
.wm-text-accent {
color: var(--wm-accent);
}
.wm-text-success {
color: var(--wm-success);
}
.wm-text-warning {
color: var(--wm-warning);
}
.wm-text-error {
color: var(--wm-error);
}
.wm-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
@layer utilities {
.wm-stack {
display: flex;
flex-direction: column;
}
.wm-row {
display: flex;
flex-direction: row;
align-items: center;
}
.wm-gap-1 { gap: var(--wm-space-1); }
.wm-gap-2 { gap: var(--wm-space-2); }
.wm-gap-3 { gap: var(--wm-space-3); }
.wm-gap-4 { gap: var(--wm-space-4); }
.wm-gap-5 { gap: var(--wm-space-5); }
.wm-gap-6 { gap: var(--wm-space-6); }
.wm-gap-8 { gap: var(--wm-space-8); }
.wm-gap-10 { gap: var(--wm-space-10); }
.wm-p-2 { padding: var(--wm-space-2); }
.wm-p-3 { padding: var(--wm-space-3); }
.wm-p-4 { padding: var(--wm-space-4); }
.wm-p-6 { padding: var(--wm-space-6); }
.wm-p-8 { padding: var(--wm-space-8); }
.wm-px-4 { padding-inline: var(--wm-space-4); }
.wm-px-6 { padding-inline: var(--wm-space-6); }
.wm-py-4 { padding-block: var(--wm-space-4); }
.wm-flex-1 { flex: 1 1 auto; }
.wm-flex-none { flex: none; }
.wm-flex-wrap { flex-wrap: wrap; }
.wm-items-center { align-items: center; }
.wm-items-start { align-items: flex-start; }
.wm-justify-between { justify-content: space-between; }
.wm-justify-center { justify-content: center; }
.wm-justify-end { justify-content: flex-end; }
}
@layer utilities {
.wm-radius-xs { border-radius: var(--wm-radius-xs); }
.wm-radius-sm { border-radius: var(--wm-radius-sm); }
.wm-radius-md { border-radius: var(--wm-radius-md); }
.wm-radius-lg { border-radius: var(--wm-radius-lg); }
.wm-radius-xl { border-radius: var(--wm-radius-xl); }
.wm-radius-2xl { border-radius: var(--wm-radius-2xl); }
.wm-radius-pill { border-radius: var(--wm-radius-pill); }
}
@layer components {
@supports (corner-shape: squircle) {
.wm-button,
.wm-button-group,
.wm-checkbox__box,
.wm-select__control,
.wm-text-field,
.wm-textarea,
.wm-card,
.wm-badge:not(.wm-badge--dot),
.wm-tag,
.wm-segmented-control,
.wm-segmented-control__item,
.wm-toolbar,
.wm-popover,
.wm-dropdown-menu,
.wm-tooltip,
.wm-toast,
.wm-dialog,
.wm-window,
.wm-sidebar__row,
.wm-settings-group,
.wm-list-group,
.wm-code-block,
.wm-avatar--square,
.wm-image-well,
.wm-gauge__frame,
.wm-menu-bar__item,
.wm-column-view__column {
corner-shape: squircle;
}
}
@supports (corner-shape: squircle) {
.wm-squircle { corner-shape: squircle; }
}
}
@layer utilities {
.wm-motion-safe {
transition-duration: var(--wm-duration-normal);
transition-timing-function: var(--wm-ease-standard);
}
.wm-press {
transition: transform var(--wm-duration-normal) var(--wm-ease-spring);
}
.wm-press:active {
transform: scale(var(--wm-scale-pressed));
transition-duration: var(--wm-duration-instant);
transition-timing-function: var(--wm-ease-standard);
}
.wm-press-sm {
transition: transform var(--wm-duration-normal) var(--wm-ease-spring);
}
.wm-press-sm:active {
transform: scale(var(--wm-scale-pressed-sm));
transition-duration: var(--wm-duration-instant);
transition-timing-function: var(--wm-ease-standard);
}
.wm-hover-raise {
transition:
transform var(--wm-duration-fast) var(--wm-ease-emphasized),
box-shadow var(--wm-duration-fast) var(--wm-ease-emphasized);
}
.wm-hover-raise:hover {
transform: translateY(var(--wm-scale-hover-raise, -1px));
}
.wm-fade-in {
animation: wm-fade-in var(--wm-duration-normal) var(--wm-ease-decelerate) both;
}
.wm-scale-in {
animation: wm-scale-in var(--wm-duration-normal) var(--wm-ease-emphasized) both;
}
.wm-slide-up {
animation: wm-slide-up var(--wm-duration-slow) var(--wm-ease-emphasized) both;
}
@keyframes wm-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes wm-scale-in {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }
}
@keyframes wm-slide-up {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes wm-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.wm-fade-in,
.wm-scale-in,
.wm-slide-up {
animation-duration: 1ms;
}
.wm-press:active,
.wm-press-sm:active,
.wm-hover-raise:hover {
transform: none;
}
}
}
@layer base {
:focus {
outline: none;
}
.wm-focusable:focus-visible,
[data-wm-focusable]:focus-visible {
outline: var(--wm-focus-ring-width) solid var(--wm-accent);
outline-offset: var(--wm-focus-ring-offset);
box-shadow: 0 0 0 var(--wm-focus-halo-width, 4px) var(--wm-accent-fill);
border-radius: inherit;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: var(--wm-focus-ring-width) solid var(--wm-accent);
outline-offset: var(--wm-focus-ring-offset);
box-shadow: 0 0 0 var(--wm-focus-halo-width, 4px) var(--wm-accent-fill);
}
:where([class*="wm-"])
> :is(input, select, textarea):focus-visible:not(.wm-focusable):not(
[data-wm-focusable]
) {
outline: none;
box-shadow: none;
}
}
@layer utilities {
.wm-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.wm-skip-link {
position: absolute;
top: -40px;
left: var(--wm-space-4);
z-index: var(--wm-z-toast);
background: var(--wm-accent);
color: var(--wm-label-on-accent);
padding: var(--wm-space-3) var(--wm-space-5);
border-radius: var(--wm-radius-sm);
transition: top var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-skip-link:focus {
top: var(--wm-space-4);
}
@media (prefers-contrast: more) {
:root {
--wm-separator: rgba(0, 0, 0, 0.35);
--wm-separator-strong: rgba(0, 0, 0, 0.5);
}
:root[data-theme="dark"] {
--wm-separator: rgba(255, 255, 255, 0.35);
--wm-separator-strong: rgba(255, 255, 255, 0.5);
}
}
}
@layer reset {
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
}
@layer utilities {
.wm-elevation-0 {
box-shadow: none;
}
.wm-elevation-1 {
box-shadow: var(--wm-shadow-1), var(--wm-shadow-ring);
}
.wm-elevation-2 {
box-shadow: var(--wm-shadow-2), var(--wm-shadow-ring);
}
.wm-elevation-3 {
box-shadow: var(--wm-shadow-3), var(--wm-shadow-ring);
}
.wm-elevation-4 {
box-shadow: var(--wm-shadow-4), var(--wm-shadow-ring);
}
.wm-elevation-panel {
box-shadow: var(--wm-shadow-panel, var(--wm-shadow-2)),
var(--wm-shadow-inner-highlight, inset 0 1px 0 rgba(255, 255, 255, 0.18));
}
.wm-elevation-floating {
box-shadow: var(--wm-shadow-floating, var(--wm-shadow-3)),
var(--wm-shadow-inner-highlight, inset 0 1px 0 rgba(255, 255, 255, 0.18));
}
.wm-elevation-window {
box-shadow: var(--wm-shadow-window, var(--wm-shadow-4)),
var(--wm-shadow-inner-highlight, inset 0 1px 0 rgba(255, 255, 255, 0.18));
}
}
@layer utilities {
.wm-container {
width: 100%;
max-width: var(--wm-container);
margin-inline: auto;
padding-inline: var(--wm-grid-margin);
}
.wm-container--sm { max-width: var(--wm-container-sm); }
.wm-container--md { max-width: var(--wm-container-md); }
.wm-container--lg { max-width: var(--wm-container-lg); }
.wm-container--xl { max-width: var(--wm-container-xl); }
.wm-container--prose { max-width: var(--wm-container-prose); }
.wm-container--flush { padding-inline: 0; }
.wm-layout-grid {
display: grid;
grid-template-columns: repeat(var(--wm-grid-columns), minmax(0, 1fr));
gap: var(--wm-grid-gutter);
}
.wm-layout-grid--tight-rows {
row-gap: var(--wm-space-4);
}
.wm-col-1  { grid-column: span 1; }
.wm-col-2  { grid-column: span 2; }
.wm-col-3  { grid-column: span 3; }
.wm-col-4  { grid-column: span 4; }
.wm-col-5  { grid-column: span 5; }
.wm-col-6  { grid-column: span 6; }
.wm-col-7  { grid-column: span 7; }
.wm-col-8  { grid-column: span 8; }
.wm-col-9  { grid-column: span 9; }
.wm-col-10 { grid-column: span 10; }
.wm-col-11 { grid-column: span 11; }
.wm-col-12 { grid-column: span 12; }
.wm-col-full { grid-column: 1 / -1; }
@media (max-width: 679px) {
.wm-col-5,
.wm-col-6,
.wm-col-7,
.wm-col-8,
.wm-col-9,
.wm-col-10,
.wm-col-11,
.wm-col-12 {
grid-column: 1 / -1;
}
}
@media (max-width: 559px) {
.wm-col-3,
.wm-col-4 {
grid-column: 1 / -1;
}
}
@media (min-width: 680px) and (max-width: 899px) {
.wm-col-md-2 { grid-column: span 2; }
.wm-col-md-3 { grid-column: span 3; }
.wm-col-md-4 { grid-column: span 4; }
.wm-col-md-6 { grid-column: span 6; }
.wm-col-md-full { grid-column: 1 / -1; }
}
@media (min-width: 560px) and (max-width: 679px) {
.wm-col-sm-2 { grid-column: span 2; }
.wm-col-sm-3 { grid-column: span 3; }
.wm-col-sm-full { grid-column: 1 / -1; }
}
.wm-layout-grid--cq {
container-type: inline-size;
}
}
@layer base {
.wm-material-sidebar {
background: var(--wm-material-sidebar-bg);
backdrop-filter: blur(var(--wm-material-blur)) saturate(var(--wm-material-saturate));
-webkit-backdrop-filter: blur(var(--wm-material-blur)) saturate(var(--wm-material-saturate));
}
.wm-material-toolbar {
background: var(--wm-material-toolbar-bg);
backdrop-filter: blur(var(--wm-material-blur)) saturate(var(--wm-material-saturate));
-webkit-backdrop-filter: blur(var(--wm-material-blur)) saturate(var(--wm-material-saturate));
box-shadow: var(--wm-shadow-inner-highlight, inset 0 1px 0 rgba(255, 255, 255, 0.18));
}
.wm-material-popover {
background: var(--wm-material-popover-bg);
backdrop-filter: blur(var(--wm-material-blur)) saturate(var(--wm-material-saturate));
-webkit-backdrop-filter: blur(var(--wm-material-blur)) saturate(var(--wm-material-saturate));
border: var(--wm-border-width-hairline) solid var(--wm-material-glass-border);
box-shadow: var(--wm-shadow-inner-highlight, inset 0 1px 0 rgba(255, 255, 255, 0.18));
}
.wm-material-sheet {
background: var(--wm-material-sheet-bg);
backdrop-filter: blur(var(--wm-material-blur-heavy, 56px)) saturate(var(--wm-material-saturate));
-webkit-backdrop-filter: blur(var(--wm-material-blur-heavy, 56px)) saturate(var(--wm-material-saturate));
box-shadow: var(--wm-shadow-inner-hairline, inset 0 0 0 0.5px rgba(255, 255, 255, 0.4));
}
.wm-material-hud {
background: var(--wm-material-hud-bg);
color: var(--wm-material-hud-label);
backdrop-filter: blur(var(--wm-material-blur)) saturate(1.6);
-webkit-backdrop-filter: blur(var(--wm-material-blur)) saturate(1.6);
border: var(--wm-border-width-hairline) solid rgba(255, 255, 255, 0.12);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.wm-material-card {
background: var(--wm-surface-elevated);
border: var(--wm-border-width-hairline) solid var(--wm-separator);
box-shadow: var(--wm-shadow-inner-highlight, inset 0 1px 0 rgba(255, 255, 255, 0.18));
}
.wm-material-glass {
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.16),
rgba(255, 255, 255, 0.05)
);
backdrop-filter: blur(var(--wm-material-blur)) saturate(var(--wm-material-saturate));
-webkit-backdrop-filter: blur(var(--wm-material-blur)) saturate(var(--wm-material-saturate));
border: var(--wm-border-width-hairline) solid var(--wm-material-glass-border);
box-shadow: var(--wm-shadow-inner-hairline, inset 0 0 0 0.5px rgba(255, 255, 255, 0.4));
}
@media (prefers-reduced-transparency: reduce) {
.wm-material-sidebar,
.wm-material-toolbar,
.wm-material-popover,
.wm-material-sheet,
.wm-material-hud,
.wm-material-glass {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: var(--wm-surface-elevated);
}
.wm-material-hud {
background: var(--wm-material-hud-bg);
}
}
}
@layer components {
.wm-chart-engine__tooltip {
position: fixed;
top: 0;
left: 0;
z-index: var(--wm-z-tooltip);
display: flex;
align-items: center;
gap: var(--wm-space-3);
max-width: 260px;
padding: var(--wm-space-3) var(--wm-space-4);
background: var(--wm-surface-elevated);
border-radius: var(--wm-radius-md);
box-shadow: var(--wm-shadow-ring), var(--wm-shadow-2);
font-family: var(--wm-font-family);
font-size: var(--wm-font-size-caption);
color: var(--wm-label-primary);
pointer-events: none;
opacity: 0;
transform: translateY(4px) scale(0.96);
transition:
opacity var(--wm-duration-fast) var(--wm-ease-standard),
transform var(--wm-duration-fast) var(--wm-ease-emphasized);
white-space: nowrap;
}
.wm-chart-engine__tooltip[data-wm-chart-visivel="true"] {
opacity: 1;
transform: translateY(0) scale(1);
}
.wm-chart-engine__tooltip-dot {
width: 9px;
height: 9px;
flex: none;
border-radius: 50%;
}
.wm-chart-engine__tooltip-texto {
display: flex;
flex-direction: column;
gap: var(--wm-space-1);
min-width: 0;
}
.wm-chart-engine__tooltip-rotulo {
font-weight: var(--wm-font-weight-semibold);
color: var(--wm-label-primary);
overflow: hidden;
text-overflow: ellipsis;
}
.wm-chart-engine__tooltip-valor {
color: var(--wm-label-secondary);
font-variant-numeric: tabular-nums;
}
.wm-chart-engine__vazio {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--wm-space-3);
padding: var(--wm-space-12) var(--wm-space-6);
text-align: center;
color: var(--wm-label-tertiary);
}
.wm-chart-engine__vazio-icone {
color: var(--wm-label-quaternary);
}
.wm-chart-engine__vazio-titulo {
font-size: var(--wm-font-size-body);
font-weight: var(--wm-font-weight-medium);
color: var(--wm-label-secondary);
}
.wm-chart-engine__vazio-desc {
font-size: var(--wm-font-size-caption);
max-width: 32ch;
}
[data-wm-chart] [data-wm-chart-atenuado="true"] {
opacity: 0.35;
transition: opacity var(--wm-duration-fast) var(--wm-ease-standard);
}
[data-wm-chart] [data-wm-chart-realce="true"] {
transition: opacity var(--wm-duration-fast) var(--wm-ease-standard);
}
[data-wm-chart] [data-selecionado="true"],
[data-wm-chart] [aria-selected="true"] {
filter: drop-shadow(0 0 0 1px var(--wm-accent)) brightness(1.04);
}
[data-wm-chart] [data-wm-chart-foco="true"] {
outline: var(--wm-focus-ring-width) solid var(--wm-accent);
outline-offset: 2px;
filter: drop-shadow(0 0 0 var(--wm-focus-halo-width, 4px) var(--wm-accent-fill));
}
[data-wm-chart] [data-valor] {
cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
.wm-chart-engine__tooltip {
transition: none;
}
[data-wm-chart] [data-wm-chart-atenuado="true"],
[data-wm-chart] [data-wm-chart-realce="true"] {
transition: none;
}
}
}
@layer base {
.wm-icon[hidden] {
display: none;
}
.wm-icon {
display: inline-block;
flex: none;
width: var(--wm-icon-size, var(--wm-icon-md));
height: var(--wm-icon-size, var(--wm-icon-md));
color: currentColor;
fill: none;
vertical-align: middle;
}
.wm-icon--xs { --wm-icon-size: var(--wm-icon-xs); }
.wm-icon--sm { --wm-icon-size: var(--wm-icon-sm); }
.wm-icon--md { --wm-icon-size: var(--wm-icon-md); }
.wm-icon--lg { --wm-icon-size: var(--wm-icon-lg); }
.wm-icon--xl { --wm-icon-size: var(--wm-icon-xl); }
.wm-icon--spin {
animation: wm-spin 0.9s linear infinite;
}
}
@layer components {
.wm-button {
--_bg-top: var(--wm-control-face-top);
--_bg-bottom: var(--wm-control-face-bottom);
--_elev: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0.14)),
inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.1)),
0 1px 1px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.26)),
0 2px 6px -2px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.3));
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--wm-space-3);
height: var(--wm-control-height-md);
padding-inline: var(--wm-space-6);
border-radius: var(--wm-radius-sm);
border: none;
font-family: var(--wm-font-family);
font-size: var(--wm-font-size-body);
font-weight: var(--wm-font-weight-medium);
letter-spacing: var(--wm-letter-spacing-tight);
line-height: 1;
white-space: nowrap;
color: var(--wm-label-primary);
background: var(--wm-fill-primary);
background: linear-gradient(180deg, var(--_bg-top), var(--_bg-bottom));
box-shadow: var(--_elev);
cursor: pointer;
user-select: none;
-webkit-user-select: none;
transition: box-shadow var(--wm-duration-fast) var(--wm-ease-standard),
color var(--wm-duration-fast) var(--wm-ease-standard),
transform var(--wm-duration-fast) var(--wm-ease-emphasized),
filter var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-button:hover {
--_bg-top: var(--wm-control-face-top-hover);
--_bg-bottom: var(--wm-control-face-bottom-hover);
--_elev: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0.16)),
inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.12)),
0 1px 2px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.28)),
0 4px 10px -3px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.34));
}
.wm-button:active {
--_bg-top: var(--wm-control-face-top-pressed);
--_bg-bottom: var(--wm-control-face-bottom-pressed);
--_elev: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.1)),
inset 0 1px 2px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.3)),
0 1px 1px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.2));
transform: scale(0.985);
}
.wm-button:focus-visible {
outline: 2px solid var(--wm-accent);
outline-offset: var(--wm-focus-ring-offset);
box-shadow: var(--_elev), 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
}
.wm-button:disabled,
.wm-button.is-disabled {
cursor: not-allowed;
color: var(--wm-label-tertiary);
background: var(--wm-fill-tertiary);
box-shadow: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
}
.wm-button:disabled:active,
.wm-button.is-disabled:active {
transform: none;
}
.wm-button--prominent,
.wm-button--primary {
--_bg-top: color-mix(in srgb, var(--wm-accent), #ffffff 14%);
--_bg-bottom: var(--wm-accent);
--_elev: 0 0 0 0.5px color-mix(in srgb, var(--wm-accent), #000000 22%),
inset 0 1px 0 rgba(255, 255, 255, 0.22),
0 1px 2px color-mix(in srgb, var(--wm-accent) 32%, transparent),
0 3px 8px -2px color-mix(in srgb, var(--wm-accent) 42%, transparent);
background: var(--wm-accent);
background: linear-gradient(180deg, var(--_bg-top), var(--_bg-bottom));
color: var(--wm-label-on-accent);
}
.wm-button--prominent:hover,
.wm-button--primary:hover {
--_bg-top: color-mix(in srgb, var(--wm-accent-hover), #ffffff 14%);
--_bg-bottom: var(--wm-accent-hover);
--_elev: 0 0 0 0.5px color-mix(in srgb, var(--wm-accent), #000000 22%),
inset 0 1px 0 rgba(255, 255, 255, 0.26),
0 2px 4px color-mix(in srgb, var(--wm-accent) 34%, transparent),
0 5px 12px -3px color-mix(in srgb, var(--wm-accent) 48%, transparent);
}
.wm-button--prominent:active,
.wm-button--primary:active {
--_bg-top: var(--wm-accent-pressed);
--_bg-bottom: color-mix(in srgb, var(--wm-accent-pressed), #000000 6%);
--_elev: 0 0 0 0.5px color-mix(in srgb, var(--wm-accent-pressed), #000000 24%),
inset 0 1px 2px rgba(0, 0, 0, 0.22),
0 1px 2px color-mix(in srgb, var(--wm-accent) 26%, transparent);
}
.wm-button--prominent:disabled,
.wm-button--primary:disabled,
.wm-button--prominent.is-disabled,
.wm-button--primary.is-disabled {
background: var(--wm-fill-tertiary);
color: var(--wm-label-tertiary);
}
.wm-button--secondary {
--_elev: inset 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.05));
background: var(--wm-fill-secondary);
color: var(--wm-label-primary);
}
.wm-button--secondary:hover {
--_elev: inset 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.06));
background: var(--wm-fill-primary);
}
.wm-button--secondary:active {
--_elev: inset 0 1px 2px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.3));
background: light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.18));
}
.wm-button--destructive {
--_bg-top: color-mix(in srgb, var(--wm-error-solid), #ffffff 12%);
--_bg-bottom: var(--wm-error-solid);
--_elev: 0 0 0 0.5px color-mix(in srgb, var(--wm-error-solid), #000000 20%),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 1px 2px color-mix(in srgb, var(--wm-error-solid) 30%, transparent),
0 3px 8px -2px color-mix(in srgb, var(--wm-error-solid) 40%, transparent);
background: var(--wm-error-solid);
background: linear-gradient(180deg, var(--_bg-top), var(--_bg-bottom));
color: var(--wm-label-on-accent);
}
.wm-button--destructive:hover {
--_bg-top: color-mix(in srgb, var(--wm-error-solid), #ffffff 18%);
--_bg-bottom: color-mix(in srgb, var(--wm-error-solid), #ffffff 5%);
--_elev: 0 0 0 0.5px color-mix(in srgb, var(--wm-error-solid), #000000 20%),
inset 0 1px 0 rgba(255, 255, 255, 0.24),
0 2px 4px color-mix(in srgb, var(--wm-error-solid) 32%, transparent),
0 5px 12px -3px color-mix(in srgb, var(--wm-error-solid) 46%, transparent);
}
.wm-button--destructive:active {
--_bg-top: color-mix(in srgb, var(--wm-error-solid), #000000 10%);
--_bg-bottom: color-mix(in srgb, var(--wm-error-solid), #000000 16%);
--_elev: 0 0 0 0.5px color-mix(in srgb, var(--wm-error-solid), #000000 24%),
inset 0 1px 2px rgba(0, 0, 0, 0.2);
}
.wm-button--destructive.wm-button--plain,
.wm-button--destructive.wm-button--ghost {
--_elev: 0 0 0 0 transparent;
background: transparent;
color: var(--wm-error);
}
.wm-button--destructive.wm-button--plain:hover,
.wm-button--destructive.wm-button--ghost:hover {
background: var(--wm-error-fill);
}
.wm-button--destructive:focus-visible {
outline-color: var(--wm-error);
box-shadow: var(--_elev), 0 0 0 var(--wm-focus-halo-width) var(--wm-error-fill);
}
.wm-button--ghost,
.wm-button--plain,
.wm-button--borderless {
--_elev: 0 0 0 0 transparent;
background: transparent;
}
.wm-button--ghost:hover,
.wm-button--plain:hover,
.wm-button--borderless:hover {
--_elev: 0 0 0 0 transparent;
background: var(--wm-fill-secondary);
}
.wm-button--ghost:active,
.wm-button--plain:active,
.wm-button--borderless:active {
--_elev: 0 0 0 0 transparent;
background: var(--wm-fill-primary);
}
.wm-button--plain {
color: var(--wm-accent);
font-weight: var(--wm-font-weight-regular);
}
.wm-button--borderless {
padding-inline: var(--wm-space-2);
}
.wm-button--outline {
--_elev: inset 0 0 0 1px var(--wm-separator);
background: transparent;
}
.wm-button--outline:hover {
--_elev: inset 0 0 0 1px var(--wm-separator-strong);
background: var(--wm-fill-quaternary);
}
.wm-button--outline:active {
--_elev: inset 0 0 0 1px var(--wm-separator-strong);
background: var(--wm-fill-tertiary);
}
.wm-button--toolbar {
--_elev: 0 0 0 0 transparent;
height: var(--wm-control-height-sm);
padding-inline: var(--wm-space-4);
background: transparent;
font-weight: var(--wm-font-weight-regular);
color: var(--wm-label-secondary);
}
.wm-button--toolbar:hover {
--_elev: 0 0 0 0 transparent;
background: var(--wm-fill-secondary);
color: var(--wm-label-primary);
}
.wm-button--toolbar:active {
--_elev: 0 0 0 0 transparent;
background: var(--wm-fill-primary);
}
.wm-button--rounded {
border-radius: var(--wm-radius-lg);
}
.wm-button--capsule {
border-radius: var(--wm-radius-pill);
padding-inline: var(--wm-space-8);
}
.wm-button--circular {
border-radius: var(--wm-radius-pill);
padding: 0;
width: var(--wm-control-height-md);
height: var(--wm-control-height-md);
}
@supports (corner-shape: squircle) {
.wm-button--circular,
.wm-button--capsule {
corner-shape: round;
}
}
.wm-button--small {
height: var(--wm-control-height-sm);
padding-inline: var(--wm-space-4);
font-size: var(--wm-font-size-subheadline);
border-radius: var(--wm-radius-xs);
gap: var(--wm-space-2);
}
.wm-button--small.wm-button--circular {
width: var(--wm-control-height-sm);
height: var(--wm-control-height-sm);
padding-inline: 0;
border-radius: var(--wm-radius-pill);
}
.wm-button--large {
height: var(--wm-control-height-lg);
padding-inline: var(--wm-space-8);
font-size: var(--wm-font-size-body);
border-radius: var(--wm-radius-md);
}
.wm-button--large.wm-button--circular {
width: var(--wm-control-height-lg);
height: var(--wm-control-height-lg);
padding-inline: 0;
border-radius: var(--wm-radius-pill);
}
.wm-button--icon-only {
padding: 0;
width: var(--wm-control-height-md);
height: var(--wm-control-height-md);
border-radius: var(--wm-radius-sm);
}
.wm-button--icon-only.wm-button--small {
width: var(--wm-control-height-sm);
height: var(--wm-control-height-sm);
padding-inline: 0;
}
.wm-button--icon-only.wm-button--large {
width: var(--wm-control-height-lg);
height: var(--wm-control-height-lg);
padding-inline: 0;
}
.wm-button .wm-icon {
flex: none;
}
.wm-button.is-loading {
color: transparent;
pointer-events: none;
}
.wm-button.is-loading::after {
content: "";
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
border: 1.6px solid currentColor;
border-top-color: transparent;
color: var(--wm-label-secondary);
animation: wm-spin 0.7s linear infinite;
}
.wm-button--prominent.is-loading::after,
.wm-button--primary.is-loading::after,
.wm-button--destructive.is-loading::after {
color: rgba(255, 255, 255, 0.9);
}
.wm-button-group {
display: inline-flex;
align-items: stretch;
border-radius: var(--wm-radius-sm);
overflow: hidden;
isolation: isolate;
box-shadow: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0.14)),
0 1px 1px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.26)),
0 2px 6px -2px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.3));
}
.wm-button-group .wm-button {
border-radius: 0;
box-shadow: inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.1));
}
.wm-button-group .wm-button:active {
transform: none;
}
.wm-button-group .wm-button + .wm-button {
border-inline-start: 1px solid light-dark(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.38));
}
.wm-button-group--split .wm-button:last-child {
padding-inline: var(--wm-space-3);
}
@media (prefers-reduced-motion: reduce) {
.wm-button {
transition: none;
}
.wm-button:active {
transform: none;
}
}
}
@layer components {
.wm-field {
--_ring: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.14));
--_inset: inset 0 1px 1.5px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3));
position: relative;
display: flex;
align-items: center;
height: var(--wm-control-height-md);
border-radius: var(--wm-radius-sm);
border: none;
background: var(--wm-surface-primary);
background: light-dark(#ffffff, rgba(255, 255, 255, 0.06));
box-shadow: var(--_ring), var(--_inset);
transition: box-shadow var(--wm-duration-fast) var(--wm-ease-standard),
background var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-field:hover:not(:has(.wm-field__input:disabled)):not(:has(.wm-field__input:focus-visible)) {
--_ring: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.24), rgba(255, 255, 255, 0.2));
}
.wm-field:has(.wm-field__input:focus-visible) {
box-shadow: 0 0 0 1px var(--wm-accent), var(--_inset), 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
}
.wm-field:has(.wm-field__input:disabled) {
background: var(--wm-fill-quaternary);
box-shadow: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.07));
}
.wm-field__input:disabled {
color: var(--wm-label-tertiary);
cursor: not-allowed;
}
.wm-field--invalid {
--_ring: 0 0 0 1px var(--wm-error);
}
.wm-field--invalid:has(.wm-field__input:focus-visible) {
box-shadow: 0 0 0 1px var(--wm-error), var(--_inset), 0 0 0 var(--wm-focus-halo-width) var(--wm-error-fill);
}
.wm-field__icon {
flex: none;
color: var(--wm-label-tertiary);
margin-inline-start: var(--wm-space-5);
}
.wm-field__input {
flex: 1 1 auto;
min-width: 0;
height: 100%;
padding-inline: var(--wm-space-5);
border: none;
background: transparent;
font-family: var(--wm-font-family);
font-size: var(--wm-font-size-body);
color: var(--wm-label-primary);
outline: none;
caret-color: var(--wm-accent);
}
.wm-field:has(.wm-field__icon) .wm-field__input {
padding-inline-start: var(--wm-space-3);
}
.wm-field__input[type="number"] {
font-variant-numeric: tabular-nums;
}
.wm-field__input::placeholder {
color: var(--wm-label-tertiary);
}
.wm-field:has(.wm-field__clear) .wm-field__input[type="search"]::-webkit-search-cancel-button,
.wm-field:has(.wm-field__clear) .wm-field__input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
.wm-field__clear {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
margin-inline-end: var(--wm-space-4);
border-radius: 50%;
color: var(--wm-label-tertiary);
background: var(--wm-fill-secondary);
cursor: pointer;
transition: background var(--wm-duration-fast) var(--wm-ease-standard),
color var(--wm-duration-fast) var(--wm-ease-standard),
transform var(--wm-duration-fast) var(--wm-ease-emphasized);
}
.wm-field__clear:hover {
background: var(--wm-fill-primary);
color: var(--wm-label-primary);
}
.wm-field__clear:active {
transform: scale(0.9);
}
.wm-field__affix {
flex: none;
padding-inline: var(--wm-space-4);
font-size: var(--wm-font-size-subheadline);
color: var(--wm-label-secondary);
border-inline-start: 1px solid light-dark(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.08));
height: 100%;
display: inline-flex;
align-items: center;
}
.wm-field__prefix {
border-inline-start: none;
border-inline-end: 1px solid light-dark(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.08));
}
.wm-field--small {
height: var(--wm-control-height-sm);
border-radius: var(--wm-radius-xs);
}
.wm-field--small .wm-field__input {
font-size: var(--wm-font-size-subheadline);
}
.wm-textarea {
display: block;
width: 100%;
min-height: 88px;
padding: var(--wm-space-5) var(--wm-space-5);
border-radius: var(--wm-radius-sm);
border: none;
background: var(--wm-surface-primary);
background: light-dark(#ffffff, rgba(255, 255, 255, 0.06));
box-shadow: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.14)),
inset 0 1px 1.5px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3));
color: var(--wm-label-primary);
font-family: var(--wm-font-family);
font-size: var(--wm-font-size-body);
line-height: var(--wm-line-height-relaxed);
caret-color: var(--wm-accent);
resize: vertical;
outline: none;
transition: box-shadow var(--wm-duration-fast) var(--wm-ease-standard),
background var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-textarea:focus-visible {
box-shadow: 0 0 0 1px var(--wm-accent),
inset 0 1px 1.5px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3)),
0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
}
.wm-textarea:disabled {
background: var(--wm-fill-quaternary);
box-shadow: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.07));
color: var(--wm-label-tertiary);
cursor: not-allowed;
resize: none;
}
.wm-textarea::-webkit-scrollbar {
width: 8px;
}
.wm-textarea::-webkit-scrollbar-thumb {
background: var(--wm-scrollbar-thumb);
border-radius: var(--wm-radius-pill);
background-clip: padding-box;
border: 2px solid transparent;
}
.wm-textarea::-webkit-scrollbar-thumb:hover {
background-color: var(--wm-scrollbar-thumb-hover);
}
.wm-field-group {
display: flex;
flex-direction: column;
gap: var(--wm-space-3);
}
.wm-field-group__label {
font-size: var(--wm-font-size-subheadline);
font-weight: var(--wm-font-weight-medium);
letter-spacing: var(--wm-letter-spacing-tight);
color: var(--wm-label-primary);
}
.wm-field-group__help {
font-size: var(--wm-font-size-caption);
color: var(--wm-label-secondary);
}
.wm-field-group__error {
font-size: var(--wm-font-size-caption);
color: var(--wm-error);
display: flex;
align-items: center;
gap: var(--wm-space-2);
}
.wm-token-field {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--wm-space-3);
min-height: var(--wm-control-height-md);
padding: var(--wm-space-2) var(--wm-space-4);
border-radius: var(--wm-radius-sm);
border: none;
background: var(--wm-surface-primary);
background: light-dark(#ffffff, rgba(255, 255, 255, 0.06));
box-shadow: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.14)),
inset 0 1px 1.5px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3));
transition: box-shadow var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-token-field:focus-within {
box-shadow: 0 0 0 1px var(--wm-accent),
inset 0 1px 1.5px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3)),
0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
}
.wm-token-field__token {
display: inline-flex;
align-items: center;
gap: var(--wm-space-2);
height: 22px;
padding-inline: var(--wm-space-4);
border-radius: var(--wm-radius-pill);
background: var(--wm-accent-fill);
box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--wm-accent) 22%, transparent);
color: var(--wm-accent-text);
font-size: var(--wm-font-size-subheadline);
font-weight: var(--wm-font-weight-medium);
}
.wm-token-field__token button {
display: inline-flex;
border-radius: var(--wm-radius-pill);
color: inherit;
opacity: 0.7;
cursor: pointer;
}
.wm-token-field__token button:hover {
opacity: 1;
}
.wm-token-field__input {
flex: 1 1 80px;
min-width: 80px;
border: none;
background: transparent;
outline: none;
font-size: var(--wm-font-size-body);
color: var(--wm-label-primary);
caret-color: var(--wm-accent);
height: 24px;
}
@media (prefers-reduced-motion: reduce) {
.wm-field,
.wm-textarea,
.wm-token-field,
.wm-field__clear {
transition: none;
}
.wm-field__clear:active {
transform: none;
}
}
.wm-field__input:-webkit-autofill,
.wm-field__input:-webkit-autofill:hover,
.wm-field__input:-webkit-autofill:focus,
.wm-field__input:-webkit-autofill:active {
-webkit-text-fill-color: var(--wm-label-primary);
-webkit-box-shadow: inset 0 0 0 1000px var(--wm-surface-primary);
box-shadow: inset 0 0 0 1000px var(--wm-surface-primary);
caret-color: var(--wm-label-primary);
transition: background-color 9999s ease-in-out 0s;
}
.wm-field:has(.wm-field__input:-webkit-autofill) {
background: var(--wm-surface-primary);
}
}
@layer components {
.wm-select {
position: relative;
display: inline-flex;
align-items: center;
}
.wm-select--block {
display: flex;
width: 100%;
}
.wm-select__control {
--_elev: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0.14)),
inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.1)),
0 1px 1px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.26)),
0 2px 6px -2px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.3));
appearance: none;
-webkit-appearance: none;
width: 100%;
height: var(--wm-control-height-md);
padding-inline: var(--wm-space-6);
padding-inline-end: var(--wm-space-11);
border-radius: var(--wm-radius-sm);
border: none;
background: var(--wm-surface-primary);
background: linear-gradient(
180deg,
var(--wm-control-face-top),
var(--wm-control-face-bottom)
);
box-shadow: var(--_elev);
color: var(--wm-label-primary);
font-family: var(--wm-font-family);
font-size: var(--wm-font-size-body);
font-weight: var(--wm-font-weight-medium);
letter-spacing: var(--wm-letter-spacing-tight);
cursor: pointer;
transition: box-shadow var(--wm-duration-fast) var(--wm-ease-standard),
background var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-select__control:hover {
background: linear-gradient(
180deg,
var(--wm-control-face-top-hover),
var(--wm-control-face-bottom-hover)
);
--_elev: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0.16)),
inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.12)),
0 1px 2px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.28)),
0 4px 10px -3px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.34));
}
.wm-select__control:focus-visible {
outline: 2px solid var(--wm-accent);
outline-offset: var(--wm-focus-ring-offset);
box-shadow: var(--_elev), 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
}
.wm-select__control[aria-invalid="true"] {
--_elev: 0 0 0 1px var(--wm-error),
inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.1)),
0 1px 1px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.26));
}
.wm-select__control[aria-invalid="true"]:focus-visible {
outline-color: var(--wm-error);
box-shadow: var(--_elev), 0 0 0 var(--wm-focus-halo-width) var(--wm-error-fill);
}
.wm-select__control:disabled {
cursor: not-allowed;
color: var(--wm-label-tertiary);
background: var(--wm-fill-tertiary);
box-shadow: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
}
.wm-select__icon {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
padding: 3px;
border-radius: var(--wm-radius-xs);
color: var(--wm-label-on-accent);
background: var(--wm-accent);
background: linear-gradient(
180deg,
color-mix(in srgb, var(--wm-accent), #ffffff 14%),
var(--wm-accent)
);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22),
0 0.5px 1.5px color-mix(in srgb, var(--wm-accent) 40%, transparent);
pointer-events: none;
}
.wm-select:has(.wm-select__control:disabled) .wm-select__icon {
background: var(--wm-fill-primary);
color: var(--wm-label-tertiary);
box-shadow: none;
}
.wm-select--popup .wm-select__control {
background: transparent;
box-shadow: none;
--_elev: none;
padding-inline-start: var(--wm-space-3);
padding-inline-end: var(--wm-space-10);
font-weight: var(--wm-font-weight-medium);
color: var(--wm-accent);
}
.wm-select--popup .wm-select__control:hover {
background: var(--wm-fill-secondary);
}
.wm-select--popup .wm-select__control:focus-visible {
box-shadow: 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
}
.wm-select--popup .wm-select__icon {
background: none;
box-shadow: none;
padding: 0;
width: 14px;
height: 14px;
border-radius: 0;
color: var(--wm-accent);
}
.wm-select--small .wm-select__control {
height: var(--wm-control-height-sm);
font-size: var(--wm-font-size-subheadline);
padding-inline: var(--wm-space-4);
padding-inline-end: var(--wm-space-10);
border-radius: var(--wm-radius-xs);
}
.wm-select--small .wm-select__icon {
width: 14px;
height: 14px;
padding: 3px;
border-radius: 4px;
right: 5px;
}
@media (prefers-reduced-motion: reduce) {
.wm-select__control {
transition: none;
}
}
}
@layer components {
.wm-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding-inline: var(--wm-space-3);
border-radius: var(--wm-radius-pill);
background: var(--wm-fill-primary);
color: var(--wm-label-secondary);
font-size: 11px;
font-weight: var(--wm-font-weight-semibold);
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
line-height: 1;
flex: none;
box-shadow: inset 0 0 0 var(--wm-border-width-hairline)
color-mix(in srgb, currentColor 16%, transparent);
}
.wm-badge--accent {
background: linear-gradient(
180deg,
var(--wm-accent-hover) 0%,
var(--wm-accent) 100%
);
color: var(--wm-label-on-accent);
box-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.28),
0 0.5px 1.5px color-mix(in srgb, var(--wm-accent) 40%, transparent);
}
.wm-badge--neutral {
background: var(--wm-fill-secondary);
color: var(--wm-label-secondary);
}
.wm-badge--success {
background: var(--wm-success-fill);
color: var(--wm-success);
}
.wm-badge--warning {
background: var(--wm-warning-fill);
color: var(--wm-warning);
}
.wm-badge--error {
background: var(--wm-error-fill);
color: var(--wm-error);
}
.wm-badge--dot {
--_wm-badge-dot: var(--wm-accent);
min-width: 8px;
width: 8px;
height: 8px;
padding: 0;
background: var(--_wm-badge-dot);
box-shadow: 0 0.5px 1.5px color-mix(in srgb, var(--_wm-badge-dot) 45%, transparent);
}
.wm-badge--dot.wm-badge--success { --_wm-badge-dot: var(--wm-success-solid); }
.wm-badge--dot.wm-badge--warning { --_wm-badge-dot: var(--wm-warning-solid); }
.wm-badge--dot.wm-badge--error   { --_wm-badge-dot: var(--wm-error-solid); }
.wm-badge--dot.wm-badge--neutral { --_wm-badge-dot: var(--wm-label-tertiary); }
.wm-tag {
display: inline-flex;
align-items: center;
gap: var(--wm-space-2);
height: 22px;
padding-inline: var(--wm-space-4);
border-radius: var(--wm-radius-pill);
background: var(--wm-fill-secondary);
color: var(--wm-label-primary);
font-size: var(--wm-font-size-subheadline);
font-weight: var(--wm-font-weight-medium);
box-shadow: inset 0 0 0 var(--wm-border-width-hairline)
color-mix(in srgb, currentColor 8%, transparent);
transition: background var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-tag:hover {
background: var(--wm-fill-primary);
}
.wm-tag--accent {
background: var(--wm-accent-fill);
color: var(--wm-accent-text);
box-shadow: inset 0 0 0 var(--wm-border-width-hairline)
color-mix(in srgb, currentColor 18%, transparent);
}
.wm-tag--accent:hover {
box-shadow: inset 0 0 0 calc(var(--wm-border-width-hairline) * 3)
color-mix(in srgb, currentColor 34%, transparent);
}
.wm-tag__remove {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: var(--wm-icon-md);
block-size: var(--wm-icon-md);
flex: none;
color: inherit;
opacity: 0.55;
border-radius: 50%;
margin-inline-end: calc(-1 * var(--wm-space-1));
transition:
opacity var(--wm-duration-fast) var(--wm-ease-standard),
background var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-tag__remove:hover {
opacity: 1;
background: color-mix(in srgb, currentColor 12%, transparent);
}
.wm-tag__remove:active {
transform: scale(var(--wm-scale-pressed-sm));
}
.wm-notification-badge {
position: relative;
display: inline-flex;
}
.wm-notification-badge .wm-badge {
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
border: 2px solid var(--wm-surface-primary);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
}
.wm-notification-badge .wm-badge--error {
background: var(--wm-error-solid);
color: var(--wm-label-on-accent);
}
}
@layer components {
.wm-avatar {
--_wm-avatar-size: 32px;
--_wm-avatar-dot: max(8px, calc(var(--_wm-avatar-size) * 0.3125));
--_wm-avatar-ring: max(1.5px, calc(var(--_wm-avatar-size) * 0.0625));
--_wm-avatar-overlap: calc(var(--_wm-avatar-size) * -0.25);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: var(--_wm-avatar-size);
height: var(--_wm-avatar-size);
border-radius: 50%;
background: var(
--wm-gradient-brand,
linear-gradient(
140deg,
var(--wm-brand-indigo) -10%,
var(--wm-accent) 60%,
var(--wm-accent-secondary, var(--wm-brand-cyan)) 200%
)
);
color: var(--wm-label-on-accent);
font-size: var(--wm-font-size-body);
font-weight: var(--wm-font-weight-semibold);
letter-spacing: 0.01em;
text-shadow: 0 0.5px 1px rgba(0, 10, 60, 0.28);
user-select: none;
box-shadow:
var(--wm-shadow-ring),
var(--wm-shadow-1),
inset 0 0.5px 0.5px rgba(255, 255, 255, 0.3),
inset 0 0 0 var(--wm-border-width-hairline) rgba(0, 0, 0, 0.08);
}
.wm-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
corner-shape: inherit;
}
.wm-avatar .wm-icon {
--wm-icon-size: calc(var(--_wm-avatar-size) * 0.5);
}
.wm-avatar--xs { --_wm-avatar-size: 20px; font-size: var(--wm-font-size-caption); }
.wm-avatar--sm { --_wm-avatar-size: 24px; font-size: var(--wm-font-size-caption); }
.wm-avatar--lg { --_wm-avatar-size: 44px; font-size: 16px; }
.wm-avatar--xl { --_wm-avatar-size: 64px; font-size: var(--wm-font-size-title1); }
.wm-avatar--square {
border-radius: var(--wm-radius-sm);
}
.wm-avatar--square.wm-avatar--lg {
border-radius: var(--wm-radius-md);
}
.wm-avatar--square.wm-avatar--xl {
border-radius: var(--wm-radius-lg);
}
.wm-avatar__status {
position: absolute;
right: calc(var(--_wm-avatar-size) * -0.02);
bottom: calc(var(--_wm-avatar-size) * -0.02);
width: var(--_wm-avatar-dot);
height: var(--_wm-avatar-dot);
border-radius: 50%;
background: var(--wm-success);
border: var(--_wm-avatar-ring) solid var(--wm-surface-primary);
box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.18);
}
.wm-avatar__status--away { background: var(--wm-warning); }
.wm-avatar__status--offline {
background: var(--wm-surface-primary);
box-shadow:
0 0.5px 1px rgba(0, 0, 0, 0.18),
inset 0 0 0 max(1px, calc(var(--_wm-avatar-size) * 0.035)) var(--wm-label-secondary);
}
.wm-avatar-group {
--_wm-avatar-size: 32px;
--_wm-avatar-ring: max(1.5px, calc(var(--_wm-avatar-size) * 0.0625));
--_wm-avatar-overlap: calc(var(--_wm-avatar-size) * -0.25);
--_wm-avatar-more-font: var(--wm-font-size-subheadline);
display: flex;
align-items: center;
}
.wm-avatar-group--xs { --_wm-avatar-size: 20px; --_wm-avatar-more-font: var(--wm-font-size-caption2); }
.wm-avatar-group--sm { --_wm-avatar-size: 24px; --_wm-avatar-more-font: var(--wm-font-size-caption2); }
.wm-avatar-group--lg { --_wm-avatar-size: 44px; --_wm-avatar-more-font: var(--wm-font-size-body); }
.wm-avatar-group--xl { --_wm-avatar-size: 64px; --_wm-avatar-more-font: var(--wm-font-size-title3); }
.wm-avatar-group .wm-avatar {
border: var(--_wm-avatar-ring) solid var(--wm-surface-primary);
margin-inline-start: var(--_wm-avatar-overlap);
box-shadow:
var(--wm-shadow-1),
inset 0 0.5px 0.5px rgba(255, 255, 255, 0.3);
}
.wm-avatar-group .wm-avatar:first-child {
margin-inline-start: 0;
}
.wm-avatar-group__more {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: var(--_wm-avatar-size);
height: var(--_wm-avatar-size);
border-radius: 50%;
background: var(--wm-fill-secondary);
color: var(--wm-label-primary);
font-size: var(--_wm-avatar-more-font);
font-weight: var(--wm-font-weight-semibold);
font-variant-numeric: tabular-nums;
border: var(--_wm-avatar-ring) solid var(--wm-surface-primary);
margin-inline-start: var(--_wm-avatar-overlap);
box-shadow: var(--wm-shadow-1);
}
}
@layer components {
.wm-card {
background: var(--wm-surface-elevated);
border-radius: var(--wm-radius-xl);
padding: var(--wm-space-8);
box-shadow:
0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
var(--wm-shadow-1),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.wm-card--compact {
padding: var(--wm-space-5);
border-radius: var(--wm-radius-lg);
}
.wm-card--inset {
background: var(--wm-surface-secondary);
box-shadow: none;
}
.wm-card--elevated {
box-shadow:
0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
var(--wm-shadow-2),
var(--wm-shadow-3),
inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.wm-card--interactive {
cursor: pointer;
transition:
transform var(--wm-duration-fast) var(--wm-ease-emphasized),
box-shadow var(--wm-duration-fast) var(--wm-ease-emphasized);
}
button.wm-card,
a.wm-card {
display: block;
inline-size: 100%;
text-align: start;
font: inherit;
color: inherit;
border: 0;
margin: 0;
text-decoration: none;
-webkit-appearance: none;
appearance: none;
}
.wm-card--interactive:focus-visible {
outline: var(--wm-focus-ring-width) solid var(--wm-accent);
outline-offset: var(--wm-focus-ring-offset);
box-shadow:
0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill),
var(--wm-shadow-2);
}
.wm-card--interactive:hover {
transform: translateY(-1px);
box-shadow:
0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
var(--wm-shadow-2),
var(--wm-shadow-3),
inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.wm-card--interactive:active {
transform: translateY(0) scale(0.985);
box-shadow:
0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
var(--wm-shadow-1);
}
.wm-card--selected {
box-shadow:
0 0 0 1px var(--wm-accent),
0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill),
var(--wm-shadow-1);
}
.wm-card--glass {
background: var(--wm-material-popover-bg);
backdrop-filter: blur(var(--wm-material-blur)) saturate(var(--wm-material-saturate));
-webkit-backdrop-filter: blur(var(--wm-material-blur)) saturate(var(--wm-material-saturate));
box-shadow:
inset 0 0 0 var(--wm-border-width-hairline) var(--wm-material-glass-border),
var(--wm-shadow-2),
var(--wm-shadow-3);
}
.wm-card__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-block-end: var(--wm-space-5);
}
.wm-card__title {
font-size: var(--wm-font-size-headline);
font-weight: var(--wm-font-weight-semibold);
letter-spacing: var(--wm-letter-spacing-tight);
color: var(--wm-label-primary);
}
.wm-card__subtitle {
font-size: var(--wm-font-size-subheadline);
color: var(--wm-label-tertiary);
margin-block-start: var(--wm-space-1);
}
.wm-card__body {
font-size: var(--wm-font-size-subheadline);
color: var(--wm-label-secondary);
}
.wm-card__footer {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--wm-space-3);
margin-block-start: var(--wm-space-6);
}
.wm-group-box {
border: var(--wm-border-width-hairline) solid var(--wm-separator);
border-radius: var(--wm-radius-lg);
padding: var(--wm-space-6);
}
.wm-group-box__legend {
font-size: var(--wm-font-size-caption);
font-weight: var(--wm-font-weight-semibold);
letter-spacing: var(--wm-letter-spacing-wide);
color: var(--wm-label-secondary);
margin-block-end: var(--wm-space-4);
}
.wm-well {
background: var(--wm-surface-sunken);
border-radius: var(--wm-radius-md);
padding: var(--wm-space-5);
box-shadow:
inset 0 1px 3px rgba(0, 0, 0, 0.07),
inset 0 0 0 var(--wm-border-width-hairline) var(--wm-separator);
}
.wm-stat-card {
background: var(--wm-surface-elevated);
border-radius: var(--wm-radius-xl);
padding: var(--wm-space-8);
box-shadow:
0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
var(--wm-shadow-1),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.wm-stat-card__label {
font-size: var(--wm-font-size-subheadline);
font-weight: var(--wm-font-weight-medium);
color: var(--wm-label-secondary);
margin-block-end: var(--wm-space-3);
}
.wm-stat-card__value {
font-size: var(--wm-font-size-title1);
font-weight: var(--wm-font-weight-bold);
letter-spacing: var(--wm-letter-spacing-tighter);
font-variant-numeric: tabular-nums;
line-height: var(--wm-line-height-tight);
color: var(--wm-label-primary);
}
.wm-stat-card__delta {
display: inline-flex;
align-items: center;
gap: var(--wm-space-1);
margin-block-start: var(--wm-space-4);
padding-block: var(--wm-space-1);
padding-inline: var(--wm-space-4);
border-radius: var(--wm-radius-pill);
font-size: var(--wm-font-size-caption);
font-weight: var(--wm-font-weight-semibold);
font-variant-numeric: tabular-nums;
line-height: var(--wm-line-height-normal);
}
.wm-stat-card__delta--positive {
color: var(--wm-success);
background: var(--wm-success-fill);
}
.wm-stat-card__delta--negative {
color: var(--wm-error);
background: var(--wm-error-fill);
}
.wm-card__header[hidden],
.wm-stat-card__delta[hidden],
button.wm-card[hidden],
a.wm-card[hidden] {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.wm-card--interactive {
transition: none;
}
.wm-card--interactive:hover,
.wm-card--interactive:active {
transform: none;
}
}
}
@layer components {
.wm-checkbox {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--wm-space-5);
cursor: pointer;
}
.wm-checkbox__input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
margin: 0;
}
.wm-checkbox__box {
--_shadow: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.22), rgba(255, 255, 255, 0.22)),
inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.07)),
0 1px 1.5px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.3));
flex: none;
width: 16px;
height: 16px;
border-radius: var(--wm-radius-xs);
border: none;
background: var(--wm-control-face-top);
background: linear-gradient(180deg, var(--wm-control-face-top), var(--wm-control-face-bottom));
box-shadow: var(--_shadow);
display: inline-grid;
place-items: center;
transition: background var(--wm-duration-fast) var(--wm-ease-standard),
box-shadow var(--wm-duration-fast) var(--wm-ease-standard),
transform var(--wm-duration-fast) var(--wm-ease-emphasized);
}
.wm-checkbox__box > .wm-icon {
grid-area: 1 / 1;
}
.wm-checkbox:hover .wm-checkbox__box {
--_shadow: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.3)),
inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.09)),
0 1px 2.5px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.34));
}
.wm-checkbox:active .wm-checkbox__box {
transform: scale(0.92);
}
.wm-checkbox__box .wm-icon {
width: 11px;
height: 11px;
color: #ffffff;
opacity: 0;
transform: scale(0.5);
transition: opacity var(--wm-duration-fast) var(--wm-ease-standard),
transform var(--wm-duration-normal) var(--wm-ease-spring);
}
.wm-checkbox__input:checked + .wm-checkbox__box,
.wm-checkbox__input:indeterminate + .wm-checkbox__box {
background: var(--wm-accent);
background: linear-gradient(
180deg,
color-mix(in srgb, var(--wm-accent), #ffffff 16%),
var(--wm-accent)
);
--_shadow: 0 0 0 0.5px color-mix(in srgb, var(--wm-accent), #000000 18%),
inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 1px 2px color-mix(in srgb, var(--wm-accent) 35%, transparent);
}
.wm-checkbox__input:checked + .wm-checkbox__box .wm-icon,
.wm-checkbox__input:indeterminate + .wm-checkbox__box .wm-icon {
opacity: 1;
transform: scale(1);
}
.wm-checkbox__input:checked:not(:indeterminate) + .wm-checkbox__box .wm-checkbox__glyph--minus,
.wm-checkbox__input:indeterminate + .wm-checkbox__box .wm-checkbox__glyph--check {
opacity: 0;
transform: scale(0.5);
}
.wm-checkbox__input:focus-visible + .wm-checkbox__box {
outline: 2px solid var(--wm-accent);
outline-offset: var(--wm-focus-ring-offset);
box-shadow: var(--_shadow), 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
}
.wm-checkbox__input:disabled + .wm-checkbox__box {
background: var(--wm-fill-quaternary);
--_shadow: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.08));
}
.wm-checkbox__input:disabled:checked + .wm-checkbox__box,
.wm-checkbox__input:disabled:indeterminate + .wm-checkbox__box {
background: color-mix(in srgb, var(--wm-accent) 40%, var(--wm-surface-primary));
}
.wm-checkbox:has(.wm-checkbox__input:disabled) {
cursor: not-allowed;
}
.wm-checkbox:has(.wm-checkbox__input:disabled) .wm-checkbox__label {
color: var(--wm-label-tertiary);
}
.wm-checkbox:has(.wm-checkbox__input:disabled) .wm-checkbox__box {
transform: none;
}
.wm-checkbox__label {
font-size: var(--wm-font-size-body);
color: var(--wm-label-primary);
}
.wm-checkbox__text {
display: flex;
flex-direction: column;
min-width: 0;
}
.wm-checkbox__desc {
display: block;
font-size: var(--wm-font-size-subheadline);
color: var(--wm-label-secondary);
margin-block-start: 1px;
}
.wm-checkbox:has(.wm-checkbox__desc) {
align-items: flex-start;
}
.wm-checkbox:has(.wm-checkbox__desc) .wm-checkbox__box {
margin-block-start: var(--wm-space-1);
}
.wm-checkbox-group {
display: flex;
flex-direction: column;
gap: var(--wm-space-6);
}
@media (prefers-reduced-motion: reduce) {
.wm-checkbox__box,
.wm-checkbox__box .wm-icon {
transition: none;
}
.wm-checkbox:active .wm-checkbox__box {
transform: none;
}
}
}
@layer components {
.wm-settings {
display: flex;
flex-direction: column;
gap: var(--wm-space-10);
max-width: 580px;
}
.wm-settings-group__label {
font-size: var(--wm-font-size-caption2);
font-weight: var(--wm-font-weight-semibold);
letter-spacing: var(--wm-letter-spacing-wide);
text-transform: uppercase;
color: var(--wm-label-secondary);
padding-inline: var(--wm-space-7);
margin-bottom: var(--wm-space-3);
}
.wm-settings-group {
background: var(--wm-surface-primary);
border-radius: var(--wm-radius-settings-group, 12px);
box-shadow:
0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
var(--wm-shadow-1);
overflow: hidden;
}
.wm-settings-group__footer {
padding: var(--wm-space-3) var(--wm-space-7) 0;
font-size: var(--wm-font-size-caption);
color: var(--wm-label-secondary);
line-height: var(--wm-line-height-relaxed);
}
.wm-settings-row {
position: relative;
display: flex;
align-items: center;
gap: var(--wm-space-6);
min-height: 44px;
padding: var(--wm-space-5) var(--wm-space-7);
}
.wm-settings-row + .wm-settings-row::before {
content: "";
position: absolute;
top: 0;
inset-inline: var(--wm-space-7);
border-top: var(--wm-border-width-hairline) solid var(--wm-separator);
pointer-events: none;
}
.wm-settings-row__icon {
position: relative;
flex: none;
width: 28px;
height: 28px;
border-radius: var(--wm-radius-settings-icon, 7px);
display: inline-flex;
align-items: center;
justify-content: center;
color: #ffffff;
background: var(--wm-accent);
box-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.34),
inset 0 -0.5px 0 rgba(0, 0, 0, 0.12),
0 0 0 var(--wm-border-width-hairline) rgba(0, 0, 0, 0.06),
0 1px 1.5px rgba(0, 0, 0, 0.14);
}
.wm-settings-row__icon::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.22),
rgba(255, 255, 255, 0.04) 55%,
rgba(255, 255, 255, 0) 100%
);
pointer-events: none;
}
.wm-settings-row__icon .wm-icon {
position: relative;
z-index: 1;
width: 16px;
height: 16px;
filter: drop-shadow(0 0.5px 0.5px rgba(0, 0, 0, 0.22));
}
.wm-settings-row__body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.wm-settings-row__label {
font-size: var(--wm-font-size-body);
color: var(--wm-label-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wm-settings-row__desc {
font-size: var(--wm-font-size-caption);
color: var(--wm-label-secondary);
line-height: var(--wm-line-height-normal);
white-space: normal;
}
.wm-settings-row__control {
flex: none;
display: flex;
align-items: center;
gap: var(--wm-space-3);
}
.wm-settings-row__value {
font-size: var(--wm-font-size-body);
color: var(--wm-label-secondary);
white-space: nowrap;
}
.wm-settings-row--link {
cursor: pointer;
text-decoration: none;
color: inherit;
transition: background var(--wm-duration-fast) var(--wm-ease-standard);
}
button.wm-settings-row {
width: 100%;
font: inherit;
}
.wm-settings-row--link:focus-visible {
outline: var(--wm-focus-ring-width) solid var(--wm-accent);
outline-offset: calc(var(--wm-focus-ring-offset) * -1);
box-shadow: inset 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
}
.wm-settings-row--link:hover {
background: var(--wm-fill-quaternary);
}
.wm-settings-row--link:active {
background: var(--wm-fill-tertiary);
}
.wm-settings-row--link .wm-settings-row__chevron {
flex: none;
color: var(--wm-label-quaternary);
transition:
color var(--wm-duration-fast) var(--wm-ease-standard),
transform var(--wm-duration-fast) var(--wm-ease-emphasized);
}
.wm-settings-row--link:hover .wm-settings-row__chevron {
color: var(--wm-label-tertiary);
transform: translateX(1px);
}
[data-density="compact"] .wm-settings-row {
min-height: 32px;
padding-block: var(--wm-space-3);
}
[data-density="comfortable"] .wm-settings-row {
min-height: 56px;
padding-block: var(--wm-space-6);
}
}
@layer components {
.wm-status {
display: inline-flex;
align-items: center;
gap: var(--wm-space-3);
font-size: var(--wm-font-size-subheadline);
color: var(--wm-label-secondary);
}
.wm-status__dot {
--_dot-color: var(--wm-label-quaternary);
flex: none;
width: 8px;
height: 8px;
border-radius: 50%;
background: radial-gradient(
circle at 35% 28%,
color-mix(in srgb, var(--_dot-color) 72%, #ffffff) 0%,
var(--_dot-color) 65%
);
box-shadow: inset 0 0.5px 0.5px rgba(255, 255, 255, 0.35),
0 0 5px color-mix(in srgb, var(--_dot-color) 35%, transparent);
transition: background var(--wm-duration-normal) var(--wm-ease-standard),
box-shadow var(--wm-duration-normal) var(--wm-ease-standard);
}
.wm-status--online .wm-status__dot { --_dot-color: var(--wm-success); }
.wm-status--away .wm-status__dot { --_dot-color: var(--wm-warning); }
.wm-status--error .wm-status__dot { --_dot-color: var(--wm-error); }
.wm-status--offline .wm-status__dot {
--_dot-color: var(--wm-label-quaternary);
box-shadow: none;
}
.wm-status--syncing .wm-status__dot {
--_dot-color: var(--wm-accent);
animation: wm-status-pulse 1.4s ease-in-out infinite;
}
@keyframes wm-status-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.45; transform: scale(0.78); }
}
.wm-status__dot--ring {
box-shadow: 0 0 0 3px var(--wm-fill-secondary),
0 0 5px color-mix(in srgb, var(--_dot-color) 30%, transparent);
}
.wm-activity {
display: inline-flex;
align-items: center;
gap: 3px;
}
.wm-activity span {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--wm-label-tertiary);
animation: wm-activity-bounce 1.1s var(--wm-ease-emphasized) infinite;
}
.wm-activity span:nth-child(2) { animation-delay: 0.15s; }
.wm-activity span:nth-child(3) { animation-delay: 0.3s; }
@keyframes wm-activity-bounce {
0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
30% { transform: translateY(-3px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.wm-status--syncing .wm-status__dot,
.wm-activity span {
animation: none;
}
.wm-status__dot {
transition: none;
}
}
}
@layer components {
.wm-chip {
display: inline-flex;
align-items: center;
gap: var(--wm-space-3);
height: var(--wm-control-height-sm);
padding-inline: var(--wm-space-5);
border: none;
border-radius: var(--wm-radius-pill);
background: var(--wm-fill-secondary);
box-shadow: inset 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1));
font-family: var(--wm-font-family);
font-size: var(--wm-font-size-subheadline);
font-weight: var(--wm-font-weight-medium);
letter-spacing: var(--wm-tracking-subheadline);
color: var(--wm-label-primary);
cursor: default;
transition:
background var(--wm-duration-fast) var(--wm-ease-standard),
box-shadow var(--wm-duration-fast) var(--wm-ease-standard),
color var(--wm-duration-fast) var(--wm-ease-standard),
transform var(--wm-duration-fast) var(--wm-ease-emphasized),
opacity var(--wm-duration-fast) var(--wm-ease-standard);
}
button.wm-chip,
.wm-chip--choice,
.wm-chip--input {
cursor: pointer;
}
button.wm-chip:hover,
.wm-chip--choice:hover,
.wm-chip--input:hover {
background: var(--wm-fill-primary);
}
button.wm-chip:active {
transform: scale(var(--wm-scale-pressed-sm));
}
.wm-chip:focus-visible {
outline: var(--wm-focus-ring-width) solid var(--wm-accent);
outline-offset: var(--wm-focus-ring-offset);
}
.wm-chip[aria-pressed="true"],
.wm-chip.is-selected {
background: var(--wm-accent-fill);
box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--wm-accent) 26%, transparent);
color: var(--wm-accent-text);
}
.wm-chip[aria-pressed="true"]:hover,
.wm-chip.is-selected:hover {
background: var(--wm-accent-fill-strong);
}
.wm-chip[aria-pressed="true"] .wm-chip__icon,
.wm-chip.is-selected .wm-chip__icon {
color: inherit;
}
.wm-chip__check {
display: none;
flex: none;
color: inherit;
}
.wm-chip[aria-pressed="true"] .wm-chip__check,
.wm-chip.is-selected .wm-chip__check {
display: inline-flex;
}
.wm-chip__icon {
flex: none;
color: var(--wm-label-secondary);
margin-inline-start: calc(-1 * var(--wm-space-1));
}
.wm-chip__avatar {
flex: none;
width: var(--wm-chip-avatar-size);
height: var(--wm-chip-avatar-size);
border-radius: 50%;
margin-inline-start: calc(-1 * var(--wm-space-3));
object-fit: cover;
box-shadow: inset 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.14));
}
.wm-chip__avatar--initials {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--wm-accent-fill);
color: var(--wm-accent-text);
font-size: var(--wm-font-size-caption2);
font-weight: var(--wm-font-weight-semibold);
}
.wm-chip__remove {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--wm-chip-remove-size);
height: var(--wm-chip-remove-size);
margin-inline-end: calc(-1 * var(--wm-space-2));
border: none;
border-radius: 50%;
background: transparent;
color: inherit;
opacity: 0.6;
cursor: pointer;
transition:
background var(--wm-duration-fast) var(--wm-ease-standard),
opacity var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-chip__remove:hover {
opacity: 1;
background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.16));
}
.wm-chip__remove:focus-visible {
outline: var(--wm-focus-ring-width) solid var(--wm-accent);
outline-offset: var(--wm-focus-ring-offset);
opacity: 1;
}
.wm-chip.is-removing {
opacity: 0;
transform: scale(var(--wm-scale-pressed-sm));
}
.wm-chip:disabled,
.wm-chip.is-disabled {
background: var(--wm-fill-quaternary);
box-shadow: inset 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.06));
color: var(--wm-label-tertiary);
cursor: not-allowed;
}
.wm-chip:disabled .wm-chip__icon,
.wm-chip.is-disabled .wm-chip__icon {
color: var(--wm-label-quaternary);
}
.wm-chip-group {
display: flex;
flex-wrap: wrap;
gap: var(--wm-space-4);
}
@media (prefers-reduced-motion: reduce) {
.wm-chip,
.wm-chip__remove {
transition: none;
}
button.wm-chip:active,
.wm-chip.is-removing {
transform: none;
}
}
}
@layer components {
.wm-list {
display: flex;
flex-direction: column;
}
.wm-list--inset {
padding-inline: var(--wm-space-6);
}
.wm-list--grouped .wm-list__row {
background: var(--wm-surface-primary);
}
.wm-list--grouped {
background: var(--wm-surface-primary);
border-radius: var(--wm-radius-list-group, 12px);
overflow: hidden;
box-shadow:
0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
var(--wm-shadow-1);
}
.wm-list--inset-grouped {
padding-inline: var(--wm-space-6);
}
.wm-list--inset-grouped .wm-list__row {
background: var(--wm-surface-primary);
}
.wm-list--inset-grouped .wm-list__group {
background: var(--wm-surface-primary);
border-radius: var(--wm-radius-list-group, 12px);
overflow: hidden;
box-shadow:
0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
var(--wm-shadow-1);
}
.wm-list__header {
padding: var(--wm-space-6) var(--wm-space-6) var(--wm-space-2);
font-size: var(--wm-font-size-caption2);
font-weight: var(--wm-font-weight-semibold);
letter-spacing: var(--wm-letter-spacing-wide);
text-transform: uppercase;
color: var(--wm-label-tertiary);
}
.wm-list__footer {
padding: var(--wm-space-3) var(--wm-space-6);
font-size: var(--wm-font-size-caption);
color: var(--wm-label-tertiary);
line-height: var(--wm-line-height-relaxed);
}
.wm-list__row {
position: relative;
display: flex;
align-items: center;
gap: var(--wm-space-5);
min-height: 44px;
padding-inline: var(--wm-space-6);
text-decoration: none;
color: var(--wm-label-primary);
cursor: default;
transition: background var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-list__row + .wm-list__row::before {
content: "";
position: absolute;
top: 0;
inset-inline-start: var(--wm-space-6);
inset-inline-end: 0;
border-top: var(--wm-border-width-hairline) solid var(--wm-separator);
pointer-events: none;
}
.wm-list__row--hoverable:hover {
background: var(--wm-fill-quaternary);
cursor: pointer;
}
.wm-list__row--hoverable:active {
background: var(--wm-fill-tertiary);
}
.wm-list__row--selectable {
cursor: pointer;
}
.wm-list__row.is-selected,
.wm-list__row[aria-selected="true"] {
background: var(--wm-accent-fill);
}
.wm-list__row.is-selected:hover,
.wm-list__row[aria-selected="true"]:hover {
background: var(--wm-accent-fill-strong);
}
.wm-list__row.is-selected::before,
.wm-list__row.is-selected + .wm-list__row::before,
.wm-list__row[aria-selected="true"]::before,
.wm-list__row[aria-selected="true"] + .wm-list__row::before {
opacity: 0;
}
.wm-list__row:focus-visible {
outline: var(--wm-focus-ring-width) solid var(--wm-accent);
outline-offset: calc(-1 * var(--wm-focus-ring-width));
box-shadow: none;
}
.wm-list__row-avatar {
flex: none;
}
.wm-list__row-icon {
flex: none;
color: var(--wm-label-secondary);
}
.wm-list__row.is-selected .wm-list__row-icon {
color: var(--wm-accent);
}
.wm-list__row-body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.wm-list__row-title {
font-size: var(--wm-font-size-body);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wm-list__row-subtitle {
font-size: var(--wm-font-size-caption);
color: var(--wm-label-tertiary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wm-list__row-accessory {
flex: none;
display: flex;
align-items: center;
gap: var(--wm-space-3);
color: var(--wm-label-tertiary);
font-size: var(--wm-font-size-subheadline);
font-variant-numeric: tabular-nums;
}
.wm-list__row-chevron {
flex: none;
color: var(--wm-label-quaternary);
transition:
color var(--wm-duration-fast) var(--wm-ease-standard),
transform var(--wm-duration-fast) var(--wm-ease-emphasized);
}
.wm-list__row--hoverable:hover .wm-list__row-chevron {
color: var(--wm-label-tertiary);
transform: translateX(1px);
}
.wm-list__row-drag {
flex: none;
display: inline-flex;
color: var(--wm-label-quaternary);
cursor: grab;
transition: color var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-list__row-drag:hover {
color: var(--wm-label-tertiary);
}
.wm-list__row-drag:active {
cursor: grabbing;
}
.wm-list__row-disclosure {
flex: none;
display: inline-flex;
color: var(--wm-label-tertiary);
transition: transform var(--wm-duration-fast) var(--wm-ease-emphasized);
}
.wm-list__row[aria-expanded="true"] .wm-list__row-disclosure {
transform: rotate(90deg);
}
.wm-list__row[aria-expanded="false"] + .wm-list__children {
display: none;
}
.wm-list__children .wm-list__row {
padding-inline-start: var(--wm-space-13);
}
.wm-list__children .wm-list__row + .wm-list__row::before {
inset-inline-start: var(--wm-space-13);
}
.wm-list__row:has(> .wm-list__row-media) {
padding-block: var(--wm-space-3);
}
.wm-list__row-media {
flex: none;
inline-size: var(--wm-list-row-media, 44px);
block-size: var(--wm-list-row-media, 44px);
border-radius: var(--wm-radius-md);
overflow: hidden;
background: var(--wm-fill-secondary);
}
.wm-list__row-media > img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
display: block;
}
.wm-list__row-media--wide {
inline-size: calc(var(--wm-list-row-media, 44px) * 16 / 9);
}
.wm-list:not(.wm-list--media-trailing)
.wm-list__row
+ .wm-list__row:has(> .wm-list__row-media)::before {
inset-inline-start: calc(
var(--wm-space-6) + var(--wm-list-row-media, 44px) + var(--wm-space-5)
);
}
.wm-list:not(.wm-list--media-trailing)
.wm-list__row
+ .wm-list__row:has(> .wm-list__row-media--wide)::before {
inset-inline-start: calc(
var(--wm-space-6) + var(--wm-list-row-media, 44px) * 16 / 9 +
var(--wm-space-5)
);
}
.wm-list--media-trailing .wm-list__row-media {
order: 9;
}
.wm-list--media-trailing .wm-list__row-accessory {
order: 10;
}
.wm-list--cards {
gap: var(--wm-space-4);
background: transparent;
box-shadow: none;
border-radius: 0;
overflow: visible;
}
.wm-list--cards .wm-list__row {
background: var(--wm-surface-primary);
border-radius: var(--wm-radius-lg);
padding-block: var(--wm-space-5);
box-shadow:
0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
var(--wm-shadow-1);
}
.wm-list--cards .wm-list__row + .wm-list__row::before {
content: none;
}
.wm-list--cards .wm-list__row:focus-visible {
outline-offset: var(--wm-focus-ring-offset);
}
.wm-list--cards .wm-list__row.is-selected,
.wm-list--cards .wm-list__row[aria-selected="true"] {
box-shadow:
0 0 0 var(--wm-border-width-thin) var(--wm-accent),
var(--wm-shadow-1);
}
[data-density="compact"] .wm-list__row,
[data-wm-density="compact"] .wm-list__row {
min-height: 30px;
}
[data-density="comfortable"] .wm-list__row,
[data-wm-density="comfortable"] .wm-list__row {
min-height: 56px;
}
[data-density="comfortable"] .wm-list__row-body,
[data-wm-density="comfortable"] .wm-list__row-body {
gap: var(--wm-space-1);
}
.wm-list__empty {
padding: var(--wm-space-12) var(--wm-space-6);
text-align: center;
color: var(--wm-label-tertiary);
font-size: var(--wm-font-size-subheadline);
line-height: var(--wm-line-height-relaxed);
}
@media (prefers-reduced-motion: reduce) {
.wm-list__row,
.wm-list__row-chevron,
.wm-list__row-drag,
.wm-list__row-disclosure {
transition: none;
}
.wm-list__row--hoverable:hover .wm-list__row-chevron {
transform: none;
}
}
.wm-list[hidden],
.wm-list__row[hidden],
.wm-list__row-body[hidden],
.wm-list__row-accessory[hidden],
.wm-list__row-drag[hidden],
.wm-list__row-disclosure[hidden] {
display: none;
}
}
@layer components {
.wm-table-wrap {
background: var(--wm-surface-primary);
border-radius: var(--wm-radius-list-group, 12px);
box-shadow:
0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
var(--wm-shadow-1);
overflow-y: hidden;
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: var(--wm-scrollbar-thumb) transparent;
}
.wm-table-wrap::-webkit-scrollbar {
height: 8px;
}
.wm-table-wrap::-webkit-scrollbar-track {
background: transparent;
}
.wm-table-wrap::-webkit-scrollbar-thumb {
background: var(--wm-scrollbar-thumb);
border-radius: var(--wm-radius-pill);
border: 2px solid transparent;
background-clip: padding-box;
}
.wm-table-wrap::-webkit-scrollbar-thumb:hover {
background: var(--wm-scrollbar-thumb-hover);
background-clip: padding-box;
}
.wm-table {
width: 100%;
border-collapse: collapse;
font-size: var(--wm-font-size-subheadline);
}
.wm-table thead th {
text-align: start;
font-size: var(--wm-font-size-caption);
font-weight: var(--wm-font-weight-medium);
color: var(--wm-label-secondary);
background: var(--wm-surface-primary);
padding: var(--wm-space-4) var(--wm-space-6);
border-bottom: var(--wm-border-width-hairline) solid var(--wm-separator);
white-space: nowrap;
}
.wm-table th[aria-sort] {
cursor: pointer;
user-select: none;
transition: color var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-table th[aria-sort]:hover {
color: var(--wm-label-primary);
}
.wm-table th .wm-icon {
margin-inline-start: var(--wm-space-2);
color: var(--wm-label-quaternary);
vertical-align: -2px;
transition:
color var(--wm-duration-fast) var(--wm-ease-standard),
transform var(--wm-duration-fast) var(--wm-ease-emphasized);
}
.wm-table th[aria-sort="ascending"] .wm-icon,
.wm-table th[aria-sort="descending"] .wm-icon {
color: var(--wm-accent);
}
.wm-table th[aria-sort="ascending"] .wm-icon {
transform: rotate(180deg);
}
.wm-table th[aria-sort="ascending"],
.wm-table th[aria-sort="descending"] {
color: var(--wm-label-primary);
font-weight: var(--wm-font-weight-semibold);
}
.wm-table tbody td {
padding: var(--wm-space-5) var(--wm-space-6);
color: var(--wm-label-primary);
border-bottom: var(--wm-border-width-hairline) solid var(--wm-separator);
vertical-align: middle;
transition: background var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-table tbody tr:last-child td {
border-bottom: none;
}
.wm-table--zebra tbody tr:nth-child(even) td {
background: var(--wm-fill-quaternary);
}
.wm-table tbody tr.wm-table__row--selectable:hover td {
background: var(--wm-fill-quaternary);
cursor: pointer;
}
.wm-table tbody tr.wm-table__row--selectable:active td {
background: var(--wm-fill-tertiary);
}
.wm-table tbody tr.is-selected td,
.wm-table--zebra tbody tr.is-selected td {
background: var(--wm-accent-fill);
}
.wm-table tbody tr.is-selected:hover td {
background: var(--wm-accent-fill-strong);
}
.wm-table--compact th,
.wm-table--compact td {
padding-block: var(--wm-space-2);
}
.wm-table__cell--numeric {
text-align: end;
font-variant-numeric: tabular-nums;
}
.wm-table__empty {
padding: var(--wm-space-12);
text-align: center;
color: var(--wm-label-tertiary);
line-height: var(--wm-line-height-relaxed);
}
.wm-table-toolbar {
display: flex;
align-items: center;
gap: var(--wm-space-4);
padding: var(--wm-space-4) var(--wm-space-6);
border-bottom: var(--wm-border-width-hairline) solid var(--wm-separator);
background: var(--wm-surface-primary);
}
.wm-table-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--wm-space-4) var(--wm-space-6);
border-top: var(--wm-border-width-hairline) solid var(--wm-separator);
background: var(--wm-surface-primary);
font-size: var(--wm-font-size-caption);
color: var(--wm-label-tertiary);
font-variant-numeric: tabular-nums;
}
}
@layer components {
dialog.wm-dialog,
dialog.wm-sheet,
dialog.wm-modal-sheet {
--_surface-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.55),
0 2px 6px rgba(0, 0, 0, 0.05),
0 24px 70px -12px rgba(0, 0, 0, 0.3);
padding: 0;
border: none;
box-shadow: var(--_surface-shadow);
background: linear-gradient(
180deg,
color-mix(in srgb, var(--wm-surface-elevated) 97%, #ffffff) 0%,
var(--wm-surface-elevated) 100%
);
color: var(--wm-label-primary);
opacity: 0;
transition: opacity var(--wm-duration-normal) var(--wm-ease-emphasized),
transform var(--wm-duration-slow) var(--wm-ease-spring),
overlay var(--wm-duration-normal) var(--wm-ease-emphasized) allow-discrete,
display var(--wm-duration-normal) allow-discrete;
}
dialog.wm-dialog[open],
dialog.wm-sheet[open],
dialog.wm-modal-sheet[open] {
opacity: 1;
}
:root[data-theme="dark"] dialog.wm-dialog,
:root[data-theme="dark"] dialog.wm-sheet,
:root[data-theme="dark"] dialog.wm-modal-sheet {
--_surface-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 2px 8px rgba(0, 0, 0, 0.4),
0 32px 90px -12px rgba(0, 0, 0, 0.7);
background: linear-gradient(
180deg,
color-mix(in srgb, var(--wm-surface-elevated) 94%, #ffffff) 0%,
var(--wm-surface-elevated) 100%
);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) dialog.wm-dialog,
:root:not([data-theme="light"]) dialog.wm-sheet,
:root:not([data-theme="light"]) dialog.wm-modal-sheet {
--_surface-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 2px 8px rgba(0, 0, 0, 0.4),
0 32px 90px -12px rgba(0, 0, 0, 0.7);
background: linear-gradient(
180deg,
color-mix(in srgb, var(--wm-surface-elevated) 94%, #ffffff) 0%,
var(--wm-surface-elevated) 100%
);
}
}
dialog.wm-dialog {
border-radius: var(--wm-radius-2xl);
width: 420px;
max-width: calc(100vw - 32px);
transform: scale(0.94) translateY(8px);
}
dialog.wm-dialog[open] {
transform: scale(1) translateY(0);
}
@starting-style {
dialog.wm-dialog[open] {
opacity: 0;
transform: scale(0.94) translateY(8px);
}
}
dialog.wm-dialog::backdrop,
dialog.wm-sheet::backdrop,
dialog.wm-modal-sheet::backdrop {
background: rgba(10, 10, 14, 0.32);
backdrop-filter: blur(3px) saturate(1.1);
-webkit-backdrop-filter: blur(3px) saturate(1.1);
opacity: 0;
transition: opacity var(--wm-duration-normal) var(--wm-ease-standard) allow-discrete;
}
dialog.wm-dialog[open]::backdrop,
dialog.wm-sheet[open]::backdrop,
dialog.wm-modal-sheet[open]::backdrop {
opacity: 1;
}
@starting-style {
dialog.wm-dialog[open]::backdrop,
dialog.wm-sheet[open]::backdrop,
dialog.wm-modal-sheet[open]::backdrop {
opacity: 0;
}
}
.wm-dialog__icon {
width: 52px;
height: 52px;
border-radius: var(--wm-radius-xl);
display: inline-flex;
align-items: center;
justify-content: center;
margin: var(--wm-space-10) auto 0;
color: #ffffff;
background: var(
--wm-brand-gradient,
linear-gradient(135deg, var(--wm-accent) 0%, var(--wm-accent-secondary) 100%)
);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32),
0 1px 2px rgba(0, 30, 120, 0.18),
0 8px 20px -6px color-mix(in srgb, var(--wm-accent) 45%, transparent);
}
.wm-dialog__icon .wm-icon {
width: var(--wm-icon-xl);
height: var(--wm-icon-xl);
}
.wm-dialog--destructive .wm-dialog__icon {
background: linear-gradient(
135deg,
color-mix(in srgb, var(--wm-error) 88%, #ffffff) 0%,
var(--wm-error) 100%
);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28),
0 1px 2px rgba(120, 20, 10, 0.18),
0 8px 20px -6px color-mix(in srgb, var(--wm-error) 45%, transparent);
}
.wm-dialog__body {
padding: var(--wm-space-8) var(--wm-space-10);
text-align: center;
}
.wm-dialog__title {
font-size: var(--wm-font-size-title3);
font-weight: var(--wm-font-weight-semibold);
letter-spacing: -0.02em;
margin-bottom: var(--wm-space-3);
}
.wm-dialog__message {
font-size: var(--wm-font-size-subheadline);
color: var(--wm-label-secondary);
line-height: var(--wm-line-height-relaxed);
}
.wm-dialog__form-body {
padding: var(--wm-space-9) var(--wm-space-9) var(--wm-space-6);
display: flex;
flex-direction: column;
gap: var(--wm-space-6);
}
.wm-dialog__actions {
display: flex;
flex-direction: column;
gap: var(--wm-space-3);
padding: 0 var(--wm-space-9) var(--wm-space-9);
}
.wm-dialog__actions--row {
flex-direction: row-reverse;
}
.wm-dialog__actions .wm-button {
width: 100%;
}
.wm-dialog__actions--row .wm-button {
width: auto;
flex: 1 1 0;
}
.wm-dialog__close {
position: absolute;
top: var(--wm-space-4);
right: var(--wm-space-4);
}
dialog.wm-sheet {
position: fixed;
inset-block-end: 0;
inset-inline: 0;
top: auto;
margin: 0 auto;
width: 100%;
max-width: 480px;
border-radius: var(--wm-radius-2xl) var(--wm-radius-2xl) 0 0;
transform: translateY(100%);
}
dialog.wm-sheet[open] {
transform: translateY(0);
}
@starting-style {
dialog.wm-sheet[open] {
transform: translateY(100%);
}
}
.wm-sheet__grabber {
width: 36px;
height: 5px;
border-radius: var(--wm-radius-pill);
background: var(--wm-fill-primary);
margin: var(--wm-space-3) auto var(--wm-space-2);
}
dialog.wm-modal-sheet {
position: fixed;
inset-block-start: 60px;
inset-inline: 0;
bottom: auto;
margin: 0 auto;
border-radius: var(--wm-radius-panel);
transform: translateY(-12px);
}
dialog.wm-modal-sheet[open] {
transform: translateY(0);
}
@starting-style {
dialog.wm-modal-sheet[open] {
transform: translateY(-12px);
}
}
@media (prefers-reduced-motion: reduce) {
dialog.wm-dialog,
dialog.wm-sheet,
dialog.wm-modal-sheet,
dialog.wm-dialog::backdrop,
dialog.wm-sheet::backdrop,
dialog.wm-modal-sheet::backdrop {
transition: opacity 0ms allow-discrete, overlay 0ms allow-discrete,
display 0ms allow-discrete;
transform: none;
}
}
dialog.wm-dialog--static,
dialog.wm-dialog--static[open] {
position: static;
display: block;
margin: 0;
inset: auto;
opacity: 1;
transform: none;
pointer-events: auto;
}
dialog.wm-dialog--static::backdrop {
display: none;
}
}
@layer components {
.wm-popover {
--_glass-bg: var(--wm-material-popover-bg);
--_glass-blur: var(--wm-material-blur-heavy, 44px);
--_glass-saturate: var(--wm-material-saturate-heavy, 2);
--_inner-light: inset 0 0 0 0.5px rgba(255, 255, 255, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.35);
--_float-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06),
0 2px 6px rgba(0, 0, 0, 0.05),
0 24px 60px -12px rgba(0, 0, 0, 0.28);
position: fixed;
z-index: var(--wm-z-popover);
min-width: 200px;
max-width: 340px;
background: var(--_glass-bg);
backdrop-filter: blur(var(--_glass-blur)) saturate(var(--_glass-saturate));
-webkit-backdrop-filter: blur(var(--_glass-blur))
saturate(var(--_glass-saturate));
border: none;
border-radius: var(--wm-radius-panel);
box-shadow: var(--_inner-light), var(--_float-shadow);
padding: var(--wm-space-3);
opacity: 0;
transform: scale(0.96) translateY(-4px);
transform-origin: var(--wm-popover-origin, top center);
pointer-events: none;
transition: opacity var(--wm-duration-fast) var(--wm-ease-emphasized),
transform var(--wm-duration-normal) var(--wm-ease-spring);
}
.wm-popover[data-open="true"] {
opacity: 1;
transform: scale(1) translateY(0);
pointer-events: auto;
}
.wm-popover__header {
padding: var(--wm-space-3) var(--wm-space-4) var(--wm-space-2);
font-size: var(--wm-font-size-subheadline);
font-weight: var(--wm-font-weight-semibold);
letter-spacing: var(--wm-letter-spacing-tight);
color: var(--wm-label-primary);
}
.wm-popover__body {
padding: var(--wm-space-2) var(--wm-space-4) var(--wm-space-3);
font-size: var(--wm-font-size-subheadline);
line-height: var(--wm-line-height-relaxed);
color: var(--wm-label-secondary);
}
.wm-popover__arrow {
position: absolute;
width: 10px;
height: 10px;
background: inherit;
transform: rotate(45deg);
}
.wm-popover-backdrop {
position: fixed;
inset: 0;
z-index: calc(var(--wm-z-popover) - 1);
background: transparent;
}
:root[data-theme="dark"] .wm-popover {
--_inner-light: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
--_float-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.5),
0 2px 8px rgba(0, 0, 0, 0.35),
0 28px 70px -12px rgba(0, 0, 0, 0.65);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .wm-popover {
--_inner-light: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
--_float-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.5),
0 2px 8px rgba(0, 0, 0, 0.35),
0 28px 70px -12px rgba(0, 0, 0, 0.65);
}
}
@media (prefers-reduced-motion: reduce) {
.wm-popover {
transition: none;
}
}
}
@layer components {
.wm-menu {
--_glass-bg: var(--wm-material-popover-bg);
--_glass-blur: var(--wm-material-blur-heavy, 44px);
--_glass-saturate: var(--wm-material-saturate-heavy, 2);
--_inner-light: inset 0 0 0 0.5px rgba(255, 255, 255, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.35);
--_float-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06),
0 2px 6px rgba(0, 0, 0, 0.05),
0 20px 50px -10px rgba(0, 0, 0, 0.28);
position: fixed;
z-index: var(--wm-z-dropdown);
min-width: var(--wm-menu-min-width);
background: var(--_glass-bg);
backdrop-filter: blur(var(--_glass-blur)) saturate(var(--_glass-saturate));
-webkit-backdrop-filter: blur(var(--_glass-blur))
saturate(var(--_glass-saturate));
border: none;
border-radius: var(--wm-radius-lg);
box-shadow: var(--_inner-light), var(--_float-shadow);
padding: var(--wm-space-3);
opacity: 0;
transform: scale(0.96) translateY(-4px);
transform-origin: var(--wm-popover-origin, top left);
pointer-events: none;
transition: opacity var(--wm-duration-fast) var(--wm-ease-emphasized),
transform var(--wm-duration-normal) var(--wm-ease-spring);
}
.wm-menu[data-open="true"] {
opacity: 1;
transform: scale(1) translateY(0);
pointer-events: auto;
}
.wm-menu[hidden] {
display: none !important;
}
.wm-menu__item {
display: flex;
align-items: center;
gap: var(--wm-space-4);
width: 100%;
height: var(--wm-control-height-md);
padding-inline: var(--wm-space-4);
border-radius: var(--wm-radius-sm);
font-size: var(--wm-font-size-subheadline);
font-weight: var(--wm-font-weight-regular);
color: var(--wm-label-primary);
background: transparent;
border: none;
text-align: start;
cursor: pointer;
transition: background var(--wm-duration-instant) var(--wm-ease-standard),
color var(--wm-duration-instant) var(--wm-ease-standard);
}
.wm-menu__item:hover,
.wm-menu__item.is-active {
background: linear-gradient(
180deg,
var(--wm-accent-hover) 0%,
var(--wm-accent) 100%
);
color: var(--wm-label-on-accent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.wm-menu__item:active:not(:disabled) {
background: var(--wm-accent-pressed);
}
.wm-menu__item:focus-visible {
outline: none;
background: linear-gradient(
180deg,
var(--wm-accent-hover) 0%,
var(--wm-accent) 100%
);
color: var(--wm-label-on-accent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.wm-menu__item:disabled {
color: var(--wm-label-quaternary);
cursor: not-allowed;
}
.wm-menu__item:disabled:hover {
background: transparent;
box-shadow: none;
}
.wm-menu__item[hidden] {
display: none;
}
.wm-menu__item-icon {
flex: none;
width: var(--wm-menu-item-icon-size);
height: var(--wm-menu-item-icon-size);
opacity: 0.85;
}
.wm-menu__item:hover .wm-menu__item-icon,
.wm-menu__item.is-active .wm-menu__item-icon {
opacity: 1;
}
.wm-menu__item-label {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wm-menu__item-shortcut {
flex: none;
font-size: var(--wm-font-size-caption);
font-variant-numeric: tabular-nums;
color: var(--wm-label-tertiary);
font-family: var(--wm-font-family);
}
.wm-menu__item:hover .wm-menu__item-shortcut,
.wm-menu__item.is-active .wm-menu__item-shortcut,
.wm-menu__item:focus-visible .wm-menu__item-shortcut {
color: rgba(255, 255, 255, 0.78);
}
.wm-menu__item--destructive {
color: var(--wm-error);
}
.wm-menu__item--destructive:hover,
.wm-menu__item--destructive:focus-visible {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--wm-error) 92%, #ffffff) 0%,
var(--wm-error) 100%
);
color: #ffffff;
}
.wm-menu__separator {
height: var(--wm-border-width-hairline);
background: color-mix(in srgb, var(--wm-separator) 80%, transparent);
margin: var(--wm-space-3) var(--wm-space-4);
}
.wm-menu__label {
padding: var(--wm-space-2) var(--wm-space-4);
font-size: var(--wm-font-size-caption2);
font-weight: var(--wm-font-weight-semibold);
text-transform: uppercase;
letter-spacing: var(--wm-letter-spacing-wide);
color: var(--wm-label-tertiary);
}
.wm-menu__item .wm-icon--check {
flex: none;
width: var(--wm-icon-xs);
height: var(--wm-icon-xs);
opacity: 0;
transform: scale(0.6);
transition: opacity var(--wm-duration-fast) var(--wm-ease-emphasized),
transform var(--wm-duration-fast) var(--wm-ease-spring);
}
.wm-menu__item[aria-checked="true"] .wm-icon--check {
opacity: 1;
transform: scale(1);
}
.wm-menu__submenu-caret {
flex: none;
margin-inline-start: auto;
color: var(--wm-label-quaternary);
}
.wm-menu__item:hover .wm-menu__submenu-caret,
.wm-menu__item.is-active .wm-menu__submenu-caret,
.wm-menu__item:focus-visible .wm-menu__submenu-caret {
color: rgba(255, 255, 255, 0.78);
}
.wm-menu__subwrap {
position: relative;
}
.wm-menu .wm-menu--submenu {
position: absolute;
top: calc(-1 * var(--wm-space-3));
inset-inline-start: calc(100% + var(--wm-space-1));
opacity: 0;
pointer-events: none;
transform: scale(0.96) translateY(-4px);
}
.wm-menu__subwrap:hover > .wm-menu--submenu,
.wm-menu__subwrap:focus-within > .wm-menu--submenu {
opacity: 1;
pointer-events: auto;
transform: scale(1) translateY(0);
}
.wm-menu__subwrap:hover > .wm-menu__item,
.wm-menu__subwrap:focus-within > .wm-menu__item {
background: linear-gradient(
180deg,
var(--wm-accent-hover) 0%,
var(--wm-accent) 100%
);
color: var(--wm-label-on-accent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.wm-menu__subwrap:hover > .wm-menu__item .wm-menu__submenu-caret,
.wm-menu__subwrap:focus-within > .wm-menu__item .wm-menu__submenu-caret {
color: rgba(255, 255, 255, 0.78);
}
:root[data-theme="dark"] .wm-menu {
--_inner-light: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
--_float-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.5),
0 2px 8px rgba(0, 0, 0, 0.35),
0 24px 60px -10px rgba(0, 0, 0, 0.65);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .wm-menu {
--_inner-light: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
--_float-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.5),
0 2px 8px rgba(0, 0, 0, 0.35),
0 24px 60px -10px rgba(0, 0, 0, 0.65);
}
}
@media (prefers-reduced-motion: reduce) {
.wm-menu,
.wm-menu__item,
.wm-menu__item .wm-icon--check {
transition: none;
}
}
}
@layer components {
.wm-toast-stack {
position: fixed;
bottom: var(--wm-space-8);
right: var(--wm-space-8);
z-index: var(--wm-z-toast);
display: flex;
flex-direction: column-reverse;
gap: var(--wm-space-4);
}
.wm-toast {
--_glass-bg: var(--wm-material-sheet-bg);
--_inner-light: inset 0 0 0 0.5px rgba(255, 255, 255, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
--_float-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.05),
0 2px 6px rgba(0, 0, 0, 0.06),
0 16px 40px -8px rgba(0, 0, 0, 0.24);
display: flex;
align-items: flex-start;
gap: var(--wm-space-5);
width: 320px;
padding: var(--wm-space-6) var(--wm-space-6) var(--wm-space-6)
var(--wm-space-5);
border-radius: var(--wm-radius-xl);
background: var(--_glass-bg);
backdrop-filter: blur(var(--wm-material-blur-heavy, 44px))
saturate(var(--wm-material-saturate));
-webkit-backdrop-filter: blur(var(--wm-material-blur-heavy, 44px))
saturate(var(--wm-material-saturate));
border: none;
box-shadow: var(--_inner-light), var(--_float-shadow);
animation: wm-toast-in var(--wm-duration-slow) var(--wm-ease-spring) both;
}
@keyframes wm-toast-in {
from {
opacity: 0;
transform: translateY(12px) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
:root[data-theme="dark"] .wm-toast {
--_inner-light: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
--_float-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.5),
0 2px 8px rgba(0, 0, 0, 0.35),
0 20px 50px -8px rgba(0, 0, 0, 0.6);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .wm-toast {
--_inner-light: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
--_float-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.5),
0 2px 8px rgba(0, 0, 0, 0.35),
0 20px 50px -8px rgba(0, 0, 0, 0.6);
}
}
.wm-toast__icon {
flex: none;
width: 22px;
height: 22px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: #ffffff;
background: linear-gradient(
180deg,
color-mix(in srgb, var(--wm-info) 85%, #ffffff) 0%,
var(--wm-info) 100%
);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
0 2px 6px -1px color-mix(in srgb, var(--wm-info) 40%, transparent);
}
.wm-toast--success .wm-toast__icon {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--wm-success) 85%, #ffffff) 0%,
var(--wm-success) 100%
);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
0 2px 6px -1px color-mix(in srgb, var(--wm-success) 40%, transparent);
}
.wm-toast--warning .wm-toast__icon {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--wm-warning) 85%, #ffffff) 0%,
var(--wm-warning) 100%
);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
0 2px 6px -1px color-mix(in srgb, var(--wm-warning) 40%, transparent);
}
.wm-toast--error .wm-toast__icon {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--wm-error) 85%, #ffffff) 0%,
var(--wm-error) 100%
);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
0 2px 6px -1px color-mix(in srgb, var(--wm-error) 40%, transparent);
}
.wm-toast__icon .wm-icon {
width: 12px;
height: 12px;
}
.wm-toast__body {
flex: 1 1 auto;
min-width: 0;
display: block;
}
.wm-toast__title {
display: block;
font-size: var(--wm-font-size-subheadline);
font-weight: var(--wm-font-weight-semibold);
letter-spacing: var(--wm-letter-spacing-tight);
color: var(--wm-label-primary);
}
.wm-toast__message {
display: block;
font-size: var(--wm-font-size-caption);
line-height: var(--wm-line-height-normal);
color: var(--wm-label-secondary);
margin-top: 2px;
}
.wm-toast__close {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
margin: -2px -2px 0 0;
border: none;
border-radius: 50%;
background: transparent;
color: var(--wm-label-tertiary);
cursor: pointer;
transition: background var(--wm-duration-fast) var(--wm-ease-standard),
color var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-toast__close:hover {
color: var(--wm-label-primary);
background: var(--wm-fill-secondary);
}
.wm-toast__close:active {
transform: scale(0.92);
}
.wm-banner {
display: flex;
align-items: center;
gap: var(--wm-space-4);
padding: var(--wm-space-5) var(--wm-space-6);
border-radius: var(--wm-radius-md);
background: var(--wm-info-fill);
box-shadow: inset 0 0 0 0.5px
color-mix(in srgb, var(--wm-info) 22%, transparent);
color: var(--wm-label-primary);
font-size: var(--wm-font-size-subheadline);
line-height: var(--wm-line-height-normal);
}
.wm-banner--success {
background: var(--wm-success-fill);
box-shadow: inset 0 0 0 0.5px
color-mix(in srgb, var(--wm-success) 22%, transparent);
}
.wm-banner--warning {
background: var(--wm-warning-fill);
box-shadow: inset 0 0 0 0.5px
color-mix(in srgb, var(--wm-warning) 22%, transparent);
}
.wm-banner--error {
background: var(--wm-error-fill);
box-shadow: inset 0 0 0 0.5px
color-mix(in srgb, var(--wm-error) 22%, transparent);
}
.wm-banner__icon {
flex: none;
color: var(--wm-info);
}
.wm-banner--success .wm-banner__icon { color: var(--wm-success); }
.wm-banner--warning .wm-banner__icon { color: var(--wm-warning); }
.wm-banner--error .wm-banner__icon { color: var(--wm-error); }
.wm-banner__message {
flex: 1 1 auto;
}
.wm-alert {
display: flex;
gap: var(--wm-space-3);
padding: var(--wm-space-4) var(--wm-space-5);
border-radius: var(--wm-radius-md);
background: var(--wm-fill-quaternary);
box-shadow: inset 0 0 0 0.5px var(--wm-separator);
font-size: var(--wm-font-size-caption);
line-height: var(--wm-line-height-normal);
color: var(--wm-label-secondary);
}
.wm-alert--error {
background: var(--wm-error-fill);
box-shadow: inset 0 0 0 0.5px
color-mix(in srgb, var(--wm-error) 25%, transparent);
color: color-mix(in srgb, var(--wm-error) 88%, var(--wm-label-primary));
}
.wm-alert--warning {
background: var(--wm-warning-fill);
box-shadow: inset 0 0 0 0.5px
color-mix(in srgb, var(--wm-warning) 25%, transparent);
color: color-mix(in srgb, var(--wm-warning) 88%, var(--wm-label-primary));
}
.wm-alert--success {
background: var(--wm-success-fill);
box-shadow: inset 0 0 0 0.5px
color-mix(in srgb, var(--wm-success) 25%, transparent);
color: color-mix(in srgb, var(--wm-success) 88%, var(--wm-label-primary));
}
.wm-alert__icon {
flex: none;
margin-top: 1px;
}
@media (prefers-reduced-motion: reduce) {
.wm-toast {
animation: none;
}
.wm-toast__close {
transition: none;
}
}
}
@layer components {
.wm-conversation {
--wm-msg-conversation-bg: linear-gradient(
180deg,
var(--wm-surface-secondary) 0%,
var(--wm-surface-base) 100%
);
--wm-msg-assistant-bg: var(--wm-surface-elevated);
--wm-msg-assistant-shadow:
0 0 0 0.5px rgba(0, 0, 0, 0.05),
0 1px 1.5px rgba(0, 0, 0, 0.04),
0 5px 16px -6px rgba(0, 0, 0, 0.09);
--wm-msg-user-bg: linear-gradient(
180deg,
var(--wm-msg-user-top) 0%,
var(--wm-accent) 100%
);
--wm-msg-user-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
0 1px 2px color-mix(in srgb, var(--wm-accent) 22%, transparent),
0 8px 20px -8px color-mix(in srgb, var(--wm-accent) 42%, transparent);
--wm-msg-code-bg: rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
gap: var(--wm-space-8);
padding: var(--wm-space-9) var(--wm-space-9) var(--wm-space-10);
overflow-y: auto;
background: var(--wm-msg-conversation-bg);
border-radius: inherit;
scrollbar-width: thin;
scrollbar-color: var(--wm-scrollbar-thumb) transparent;
}
.wm-conversation::-webkit-scrollbar {
width: 8px;
}
.wm-conversation::-webkit-scrollbar-thumb {
border-radius: var(--wm-radius-pill);
background: var(--wm-scrollbar-thumb);
background-clip: padding-box;
border: 2px solid transparent;
}
.wm-conversation::-webkit-scrollbar-thumb:hover {
background-color: var(--wm-scrollbar-thumb-hover);
}
.wm-conversation::-webkit-scrollbar-track {
background: transparent;
}
.wm-conversation:focus-visible {
outline: var(--wm-focus-ring-width) solid var(--wm-accent);
outline-offset: calc(-1 * var(--wm-focus-ring-width));
box-shadow: inset 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
}
.wm-message {
display: flex;
gap: var(--wm-space-5);
max-width: 78%;
animation: wm-message-in var(--wm-duration-normal) var(--wm-ease-emphasized) both;
}
@keyframes wm-message-in {
from {
opacity: 0;
transform: translateY(6px) scale(0.99);
}
to {
opacity: 1;
transform: none;
}
}
.wm-message--user {
align-self: flex-end;
flex-direction: row-reverse;
}
.wm-message--assistant,
.wm-message--system {
align-self: flex-start;
}
.wm-message__avatar {
flex: none;
}
.wm-message--assistant .wm-avatar,
.wm-message--assistant .wm-message__avatar {
background: linear-gradient(
135deg,
var(--wm-brand-blue) 0%,
var(--wm-brand-cyan) 100%
);
color: #ffffff;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 0 0 0.5px color-mix(in srgb, var(--wm-brand-blue) 14%, transparent),
0 2px 6px -1px color-mix(in srgb, var(--wm-brand-blue) 35%, transparent);
}
.wm-message__content {
display: flex;
flex-direction: column;
gap: var(--wm-space-3);
min-width: 0;
}
.wm-message__bubble {
padding: var(--wm-space-5) var(--wm-space-7);
border-radius: var(--wm-radius-2xl);
font-size: var(--wm-font-size-body);
line-height: var(--wm-line-height-relaxed);
transition:
box-shadow var(--wm-duration-fast) var(--wm-ease-standard),
transform var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-message--assistant .wm-message__bubble {
background: var(--wm-msg-assistant-bg);
color: var(--wm-label-primary);
border-end-start-radius: var(--wm-radius-sm);
box-shadow: var(--wm-msg-assistant-shadow);
}
.wm-message--user .wm-message__bubble {
background: var(--wm-msg-user-bg);
color: var(--wm-label-on-accent);
border-end-end-radius: var(--wm-radius-sm);
box-shadow: var(--wm-msg-user-shadow);
}
.wm-message--system {
max-width: 100%;
align-self: center;
}
.wm-message--system .wm-message__bubble {
background: transparent;
color: var(--wm-label-tertiary);
font-size: var(--wm-font-size-caption);
font-weight: var(--wm-font-weight-medium);
letter-spacing: var(--wm-letter-spacing-wide);
text-align: center;
padding-block: var(--wm-space-2);
box-shadow: none;
}
.wm-message__meta {
display: flex;
align-items: center;
gap: var(--wm-space-2);
font-size: var(--wm-font-size-caption);
color: var(--wm-label-quaternary);
font-variant-numeric: tabular-nums;
padding-inline: var(--wm-space-3);
}
.wm-message--user .wm-message__meta {
justify-content: flex-end;
}
.wm-message__footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--wm-space-2) var(--wm-space-4);
padding-inline: var(--wm-space-3);
}
.wm-message__footer .wm-message__meta {
flex: none;
white-space: nowrap;
padding-inline: 0;
}
.wm-message--user .wm-message__footer {
flex-direction: row-reverse;
}
.wm-message__actions {
display: flex;
align-items: center;
gap: var(--wm-space-1);
opacity: 0;
transform: translateY(-2px);
transition:
opacity var(--wm-duration-fast) var(--wm-ease-standard),
transform var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-message:hover .wm-message__actions,
.wm-message:focus-within .wm-message__actions,
.wm-message__actions:focus-within {
opacity: 1;
transform: none;
}
@media (hover: none) {
.wm-message__actions {
opacity: 1;
transform: none;
}
}
.wm-message__action {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--wm-control-height-sm);
height: var(--wm-control-height-sm);
border: none;
border-radius: var(--wm-radius-sm);
background: transparent;
color: var(--wm-label-tertiary);
cursor: pointer;
transition:
background var(--wm-duration-fast) var(--wm-ease-standard),
color var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-message__action:hover {
background: var(--wm-fill-tertiary);
color: var(--wm-label-primary);
}
.wm-message__action:focus-visible {
outline: var(--wm-focus-ring-width) solid var(--wm-accent);
outline-offset: var(--wm-focus-ring-offset);
box-shadow: 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
}
.wm-message__action[aria-pressed="true"] {
color: var(--wm-accent);
background: var(--wm-accent-fill);
}
.wm-message__badge {
display: inline-flex;
align-items: center;
gap: var(--wm-space-2);
padding: var(--wm-space-1) var(--wm-space-4) var(--wm-space-1) var(--wm-space-3);
border: none;
border-radius: var(--wm-radius-pill);
background: var(--wm-warning-fill);
color: var(--wm-warning);
font-size: var(--wm-font-size-caption2);
font-weight: var(--wm-font-weight-medium);
white-space: nowrap;
cursor: pointer;
transition: background var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-message__badge:hover {
background: color-mix(in srgb, var(--wm-warning-fill) 70%, var(--wm-warning) 15%);
}
.wm-message__badge:focus-visible {
outline: var(--wm-focus-ring-width) solid var(--wm-accent);
outline-offset: var(--wm-focus-ring-offset);
box-shadow: 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
}
.wm-message__badge .wm-icon {
--wm-icon-size: var(--wm-icon-xs);
}
.wm-message__badge[aria-expanded="true"] .wm-message__badge-caret {
transform: rotate(180deg);
}
.wm-message__badge-caret {
transition: transform var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-message__bubble pre,
.wm-message__bubble code {
font-family: var(--wm-font-family-mono);
font-size: var(--wm-font-size-callout);
}
.wm-message__bubble pre {
background: var(--wm-msg-code-bg);
padding: var(--wm-space-4) var(--wm-space-5);
border-radius: var(--wm-radius-md);
box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.05);
overflow-x: auto;
margin-block-start: var(--wm-space-3);
}
.wm-message--user .wm-message__bubble pre {
background: rgba(255, 255, 255, 0.14);
box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18);
}
.wm-message__typing {
display: inline-flex;
}
.wm-message--rich {
max-width: min(94%, 760px);
}
.wm-message--rich.wm-message--system {
max-width: 100%;
}
.wm-message__bubble--rich {
padding: 0;
overflow: clip;
}
.wm-message__bubble--rich .wm-message__text {
margin: 0;
padding: var(--wm-space-5) var(--wm-space-7) var(--wm-space-4);
}
.wm-message__rich {
--wm-msg-rich-bg: var(--wm-msg-assistant-bg);
display: block;
inline-size: 100%;
border-radius: inherit;
background: var(--wm-msg-rich-bg);
}
.wm-message--user .wm-message__rich {
--wm-msg-rich-bg: var(--wm-surface-elevated);
}
.wm-message__rich--flush {
padding: 0;
}
.wm-message__rich--inset {
padding: var(--wm-space-7);
}
.wm-message--bare .wm-message__bubble {
padding: 0;
background: transparent;
box-shadow: none;
border-radius: 0;
}
.wm-message--bare .wm-message__rich {
background: transparent;
}
.wm-message__rich-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--wm-space-4);
padding: var(--wm-space-5) var(--wm-space-6);
border-block-end: var(--wm-border-width-hairline) solid var(--wm-separator);
}
.wm-message__rich-head-text {
display: flex;
flex-direction: column;
gap: var(--wm-space-1);
min-width: 0;
}
.wm-message__rich-title {
font-size: var(--wm-font-size-subheadline);
font-weight: var(--wm-font-weight-semibold);
color: var(--wm-label-primary);
}
.wm-message__rich-subtitle {
font-size: var(--wm-font-size-caption);
color: var(--wm-label-tertiary);
}
.wm-message__rich-actions {
display: flex;
align-items: center;
gap: var(--wm-space-2);
flex: none;
}
.wm-message__rich-cap {
position: relative;
}
.wm-message__rich-scroll {
max-height: var(--wm-msg-rich-max-height, 320px);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: var(--wm-scrollbar-thumb) transparent;
}
.wm-message__rich-scroll::-webkit-scrollbar {
width: 8px;
}
.wm-message__rich-scroll::-webkit-scrollbar-thumb {
border-radius: var(--wm-radius-pill);
background: var(--wm-scrollbar-thumb);
background-clip: padding-box;
border: 2px solid transparent;
}
.wm-message__rich-fade {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
height: var(--wm-space-12);
background: linear-gradient(180deg, transparent, var(--wm-msg-rich-bg) 82%);
pointer-events: none;
}
.wm-message--user .wm-message__rich-fade {
background: linear-gradient(180deg, transparent, var(--wm-surface-elevated) 82%);
}
.wm-message__rich-foot {
display: flex;
justify-content: center;
padding: var(--wm-space-4) var(--wm-space-6);
border-block-start: var(--wm-border-width-hairline) solid var(--wm-separator);
}
.wm-message__rich-gate {
position: relative;
}
.wm-message__rich-gate-veil {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
gap: var(--wm-space-3);
background: color-mix(in srgb, var(--wm-msg-rich-bg, var(--wm-surface-elevated)) 68%, transparent);
opacity: 0;
visibility: hidden;
transition:
opacity var(--wm-duration-fast) var(--wm-ease-standard),
visibility 0s linear var(--wm-duration-fast);
}
.wm-message__rich-gate[data-wm-rich-gate="inert"] .wm-message__rich-gate-veil {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
.wm-message__rich-activate {
flex-direction: column;
gap: var(--wm-space-2);
width: auto;
height: auto;
padding: var(--wm-space-5) var(--wm-space-7);
border-radius: var(--wm-radius-lg);
background: var(--wm-surface-primary);
box-shadow: var(--wm-shadow-1), 0 0 0 var(--wm-border-width-hairline) var(--wm-separator);
font-size: var(--wm-font-size-caption);
font-weight: var(--wm-font-weight-medium);
color: var(--wm-label-secondary);
}
.wm-message__rich-activate .wm-icon {
--wm-icon-size: var(--wm-icon-md);
}
.wm-message__rich-gate-hint {
position: absolute;
z-index: 1;
inset-block-end: var(--wm-space-4);
inset-inline-end: var(--wm-space-4);
display: none;
align-items: center;
gap: var(--wm-space-2);
padding: var(--wm-space-2) var(--wm-space-4);
border-radius: var(--wm-radius-pill);
background: var(--wm-fill-primary);
color: var(--wm-label-secondary);
font-size: var(--wm-font-size-caption2);
box-shadow: var(--wm-shadow-1);
}
.wm-message__rich-gate[data-wm-rich-gate="active"] .wm-message__rich-gate-hint {
display: inline-flex;
}
.wm-message__rich-gate[data-wm-rich-gate="active"] .wm-message__rich-scroll {
outline: var(--wm-focus-ring-width) solid transparent;
}
.wm-message__rich-gate[data-wm-rich-gate="active"] .wm-message__rich-scroll:focus-within {
outline-color: var(--wm-accent);
}
.wm-message__rich-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--wm-space-3);
padding: var(--wm-space-10) var(--wm-space-7);
text-align: center;
color: var(--wm-label-tertiary);
}
.wm-message__rich-state-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--wm-space-14);
height: var(--wm-space-14);
border-radius: var(--wm-radius-pill);
background: var(--wm-fill-secondary);
color: var(--wm-label-quaternary);
}
.wm-message__rich-state--error .wm-message__rich-state-icon {
background: var(--wm-error-fill);
color: var(--wm-error);
}
.wm-message__rich-state-title {
font-size: var(--wm-font-size-subheadline);
font-weight: var(--wm-font-weight-medium);
color: var(--wm-label-secondary);
}
.wm-message__rich-state-desc {
font-size: var(--wm-font-size-caption);
max-width: 34ch;
}
.wm-message__rich-state-meta {
font-size: var(--wm-font-size-caption2);
color: var(--wm-label-quaternary);
font-variant-numeric: tabular-nums;
}
.wm-message__rich-state-actions {
margin-block-start: var(--wm-space-2);
}
.wm-message__rich-skel {
display: flex;
flex-direction: column;
width: 100%;
gap: var(--wm-space-4);
padding: var(--wm-space-7);
}
.wm-message__rich-skel-bar {
height: var(--wm-space-11);
border-radius: var(--wm-radius-sm);
background: linear-gradient(
90deg,
var(--wm-fill-tertiary) 25%,
var(--wm-fill-secondary) 37%,
var(--wm-fill-tertiary) 63%
);
background-size: 400% 100%;
animation: wm-msg-rich-shimmer 1.5s ease-in-out infinite;
}
.wm-message__rich-skel-bar:nth-child(2) {
width: 82%;
}
.wm-message__rich-skel-bar:nth-child(3) {
width: 60%;
}
@keyframes wm-msg-rich-shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.wm-message__rich-media {
display: block;
max-width: 100%;
border-radius: var(--wm-radius-xl);
}
.wm-message__rich-sticker {
display: block;
width: 132px;
height: 132px;
}
.wm-unread-marker {
display: flex;
align-items: center;
gap: var(--wm-space-5);
color: var(--wm-error);
font-size: var(--wm-font-size-caption2);
font-weight: var(--wm-font-weight-semibold);
text-transform: uppercase;
letter-spacing: var(--wm-letter-spacing-wide);
}
.wm-unread-marker::before,
.wm-unread-marker::after {
content: "";
flex: 1;
height: var(--wm-border-width-hairline);
background: currentColor;
opacity: 0.35;
}
:root[data-theme="dark"] .wm-conversation {
--wm-msg-conversation-bg: linear-gradient(
180deg,
var(--wm-surface-secondary) 0%,
var(--wm-surface-sunken) 100%
);
--wm-msg-assistant-bg: var(--wm-surface-elevated);
--wm-msg-assistant-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.07),
0 0 0 0.5px rgba(0, 0, 0, 0.35),
0 2px 5px rgba(0, 0, 0, 0.25),
0 10px 26px -10px rgba(0, 0, 0, 0.5);
--wm-msg-user-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 1px 2px rgba(0, 0, 0, 0.3),
0 8px 22px -8px color-mix(in srgb, var(--wm-msg-user-top) 55%, transparent);
--wm-msg-code-bg: rgba(0, 0, 0, 0.28);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .wm-conversation {
--wm-msg-conversation-bg: linear-gradient(
180deg,
var(--wm-surface-secondary) 0%,
var(--wm-surface-sunken) 100%
);
--wm-msg-assistant-bg: var(--wm-surface-elevated);
--wm-msg-assistant-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.07),
0 0 0 0.5px rgba(0, 0, 0, 0.35),
0 2px 5px rgba(0, 0, 0, 0.25),
0 10px 26px -10px rgba(0, 0, 0, 0.5);
--wm-msg-user-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 1px 2px rgba(0, 0, 0, 0.3),
0 8px 22px -8px color-mix(in srgb, var(--wm-msg-user-top) 55%, transparent);
--wm-msg-code-bg: rgba(0, 0, 0, 0.28);
}
}
.wm-conversation[hidden],
.wm-message[hidden],
.wm-message__content[hidden],
.wm-message__meta[hidden],
.wm-message__typing[hidden],
.wm-unread-marker[hidden],
.wm-message__rich-gate-hint[hidden],
.wm-message__rich-state[hidden],
.wm-message__footer[hidden],
.wm-message__actions[hidden],
.wm-message__badge[hidden] {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.wm-message {
animation: none;
}
.wm-message__bubble {
transition: none;
}
.wm-message__rich-gate-veil {
transition: none;
}
.wm-message__rich-skel-bar {
animation: none;
background: var(--wm-fill-secondary);
}
.wm-message__actions {
transition: none;
}
.wm-message__action,
.wm-message__badge,
.wm-message__badge-caret {
transition: none;
}
}
}
@layer components {
.wm-composer {
--wm-composer-bg: var(--wm-material-popover-bg);
--wm-composer-shadow:
inset 0 0 0 0.5px rgba(255, 255, 255, 0.4),
0 0 0 0.5px rgba(0, 0, 0, 0.07),
0 2px 6px rgba(0, 0, 0, 0.05),
0 14px 36px -10px rgba(0, 0, 0, 0.16);
--wm-composer-shadow-raised:
inset 0 0 0 0.5px rgba(255, 255, 255, 0.45),
0 0 0 0.5px rgba(0, 0, 0, 0.08),
0 3px 9px rgba(0, 0, 0, 0.06),
0 20px 44px -12px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
gap: var(--wm-space-3);
padding: var(--wm-space-5) var(--wm-space-5) var(--wm-space-4);
border-radius: var(--wm-radius-panel);
background: var(--wm-composer-bg);
-webkit-backdrop-filter: blur(var(--wm-material-blur-heavy, 40px))
saturate(var(--wm-material-saturate));
backdrop-filter: blur(var(--wm-material-blur-heavy, 40px))
saturate(var(--wm-material-saturate));
box-shadow: var(--wm-composer-shadow);
transition:
box-shadow var(--wm-duration-normal) var(--wm-ease-emphasized),
transform var(--wm-duration-normal) var(--wm-ease-emphasized);
}
.wm-composer:hover {
box-shadow: var(--wm-composer-shadow-raised);
}
.wm-composer:focus-within {
box-shadow:
var(--wm-composer-shadow-raised),
0 0 0 1px var(--wm-accent),
0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
}
.wm-composer__attachments {
display: flex;
flex-wrap: wrap;
gap: var(--wm-space-3);
}
.wm-composer__attachment {
display: inline-flex;
align-items: center;
gap: var(--wm-space-3);
height: 26px;
padding-inline: var(--wm-space-4);
border-radius: var(--wm-radius-pill);
background: var(--wm-surface-elevated);
box-shadow:
0 0 0 0.5px var(--wm-separator),
0 1px 2px rgba(0, 0, 0, 0.05);
font-size: var(--wm-font-size-caption);
font-weight: var(--wm-font-weight-medium);
color: var(--wm-label-secondary);
}
.wm-composer__attachment .wm-icon:first-child {
color: var(--wm-accent);
}
.wm-composer__attachment button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
color: var(--wm-label-tertiary);
transition:
background var(--wm-duration-fast) var(--wm-ease-standard),
color var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-composer__attachment button:hover {
background: var(--wm-fill-primary);
color: var(--wm-label-primary);
}
.wm-composer__input {
width: 100%;
min-height: 22px;
max-height: 160px;
border: none;
outline: none;
resize: none;
background: transparent;
font-family: var(--wm-font-family);
font-size: var(--wm-font-size-body);
color: var(--wm-label-primary);
line-height: var(--wm-line-height-relaxed);
scrollbar-width: thin;
scrollbar-color: var(--wm-scrollbar-thumb) transparent;
}
.wm-composer__input::placeholder {
color: var(--wm-label-tertiary);
}
.wm-composer__input::-webkit-scrollbar {
width: 6px;
}
.wm-composer__input::-webkit-scrollbar-thumb {
border-radius: var(--wm-radius-pill);
background: var(--wm-scrollbar-thumb);
}
.wm-composer__toolbar {
display: flex;
align-items: center;
gap: var(--wm-space-2);
}
.wm-composer__send {
margin-inline-start: auto;
}
.wm-composer--sending,
.wm-composer--sending:hover {
box-shadow: var(--wm-composer-shadow);
}
.wm-composer__input:disabled {
color: var(--wm-label-tertiary);
cursor: not-allowed;
}
.wm-composer__status {
display: inline-flex;
align-items: center;
gap: var(--wm-space-3);
margin-inline-start: auto;
font-size: var(--wm-font-size-caption);
color: var(--wm-label-tertiary);
}
.wm-composer__status ~ .wm-composer__send {
margin-inline-start: 0;
}
.wm-composer--recording {
flex-direction: row;
align-items: center;
box-shadow:
var(--wm-composer-shadow),
0 0 0 1px var(--wm-error),
0 0 0 var(--wm-focus-halo-width) var(--wm-error-fill),
0 8px 24px -8px color-mix(in srgb, var(--wm-error) 30%, transparent);
}
.wm-composer--recording:focus-within {
box-shadow:
var(--wm-composer-shadow-raised),
0 0 0 1px var(--wm-error),
0 0 0 var(--wm-focus-halo-width) var(--wm-error-fill);
}
.wm-composer__waveform {
display: flex;
align-items: center;
gap: 2px;
height: 22px;
}
.wm-composer__waveform span {
width: 2.5px;
border-radius: var(--wm-radius-pill);
background: linear-gradient(
180deg,
var(--wm-error) 0%,
color-mix(in srgb, var(--wm-error) 60%, transparent) 100%
);
animation: wm-waveform var(--wm-duration-waveform) var(--wm-ease-standard) infinite alternate;
}
.wm-composer__waveform span:nth-child(odd) {
animation-delay: 0.15s;
}
@keyframes wm-waveform {
from {
height: 30%;
}
to {
height: 100%;
}
}
.wm-composer__timer {
margin-inline-start: var(--wm-space-4);
font-size: var(--wm-font-size-caption);
font-variant-numeric: tabular-nums;
color: var(--wm-error);
}
.wm-composer__stop {
margin-inline-start: auto;
}
:root[data-theme="dark"] .wm-composer {
--wm-composer-bg: var(--wm-material-popover-bg);
--wm-composer-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.1),
0 0 0 0.5px rgba(0, 0, 0, 0.45),
0 3px 9px rgba(0, 0, 0, 0.32),
0 16px 40px -10px rgba(0, 0, 0, 0.55);
--wm-composer-shadow-raised:
inset 0 0.5px 0 rgba(255, 255, 255, 0.12),
0 0 0 0.5px rgba(0, 0, 0, 0.5),
0 4px 12px rgba(0, 0, 0, 0.36),
0 22px 52px -12px rgba(0, 0, 0, 0.62);
}
:root[data-theme="dark"] .wm-composer__attachment {
box-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.08),
0 0 0 0.5px var(--wm-separator),
0 1px 2px rgba(0, 0, 0, 0.3);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .wm-composer {
--wm-composer-bg: var(--wm-material-popover-bg);
--wm-composer-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.1),
0 0 0 0.5px rgba(0, 0, 0, 0.45),
0 3px 9px rgba(0, 0, 0, 0.32),
0 16px 40px -10px rgba(0, 0, 0, 0.55);
--wm-composer-shadow-raised:
inset 0 0.5px 0 rgba(255, 255, 255, 0.12),
0 0 0 0.5px rgba(0, 0, 0, 0.5),
0 4px 12px rgba(0, 0, 0, 0.36),
0 22px 52px -12px rgba(0, 0, 0, 0.62);
}
:root:not([data-theme="light"]) .wm-composer__attachment {
box-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.08),
0 0 0 0.5px var(--wm-separator),
0 1px 2px rgba(0, 0, 0, 0.3);
}
}
@media (prefers-reduced-motion: reduce) {
.wm-composer,
.wm-composer__attachment button {
transition: none;
}
.wm-composer__waveform span {
animation: none;
height: 60%;
}
}
.wm-composer[hidden],
.wm-composer__attachments[hidden],
.wm-composer__attachment[hidden],
.wm-composer__toolbar[hidden],
.wm-composer__waveform[hidden],
.wm-composer__status[hidden],
.wm-composer__timer[hidden] {
display: none;
}
}
@layer components {
.wm-auth-login-page {
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
padding: var(--wm-space-12) var(--wm-space-8);
background: var(--wm-surface-base);
}
.wm-auth-login {
display: flex;
flex-direction: column;
gap: var(--wm-space-8);
width: 100%;
max-width: var(--wm-auth-card-width);
padding: var(--wm-space-11) var(--wm-space-10);
border-radius: var(--wm-radius-panel);
background: var(--wm-surface-elevated);
box-shadow:
inset 0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
var(--wm-shadow-panel);
}
.wm-auth-login--wide {
max-width: var(--wm-auth-card-width-wide);
}
.wm-auth-login__head {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--wm-space-3);
text-align: center;
}
.wm-auth-login__mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--wm-auth-mark-size);
height: var(--wm-auth-mark-size);
margin-bottom: var(--wm-space-2);
}
.wm-auth-login__mark img,
.wm-auth-login__mark svg {
width: 100%;
height: 100%;
object-fit: contain;
}
.wm-auth-login__title {
margin: 0;
font-size: var(--wm-font-size-title1);
line-height: var(--wm-leading-title1);
letter-spacing: var(--wm-tracking-title1);
font-weight: var(--wm-font-weight-semibold);
color: var(--wm-label-primary);
}
.wm-auth-login__subtitle {
margin: 0;
font-size: var(--wm-font-size-body);
line-height: var(--wm-line-height-normal);
letter-spacing: var(--wm-tracking-body);
color: var(--wm-label-secondary);
text-wrap: pretty;
}
.wm-auth-login__alert {
display: flex;
align-items: start;
gap: var(--wm-space-4);
padding: var(--wm-space-5) var(--wm-space-6);
border-radius: var(--wm-radius-md);
font-size: var(--wm-font-size-callout);
line-height: var(--wm-leading-callout);
letter-spacing: var(--wm-tracking-callout);
color: var(--wm-label-primary);
background: var(--wm-error-fill);
box-shadow: inset 0 0 0 var(--wm-border-width-hairline) var(--wm-separator);
}
.wm-auth-login__alert .wm-icon {
flex: none;
width: var(--wm-icon-md);
height: var(--wm-icon-md);
margin-top: var(--wm-space-1);
color: var(--wm-error);
}
.wm-auth-login__alert[hidden] { display: none; }
.wm-auth-login__fields {
display: flex;
flex-direction: column;
gap: var(--wm-space-8);
}
.wm-auth-login__label-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--wm-space-4);
}
.wm-auth-login .wm-field {
height: var(--wm-control-height-lg);
}
.wm-auth-login .wm-field-group__error[hidden] {
display: none;
}
.wm-auth-login__reveal {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--wm-control-height-sm);
height: var(--wm-control-height-sm);
margin-inline-end: var(--wm-space-3);
border: none;
border-radius: var(--wm-radius-xs);
color: var(--wm-label-tertiary);
background: transparent;
cursor: pointer;
transition: color var(--wm-duration-fast) var(--wm-ease-standard),
background var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-auth-login__reveal:hover {
color: var(--wm-label-primary);
background: var(--wm-fill-secondary);
}
.wm-auth-login__reveal:focus-visible {
outline: var(--wm-focus-ring-width) solid var(--wm-accent);
outline-offset: var(--wm-focus-ring-offset);
}
.wm-auth-login__reveal .wm-icon {
width: var(--wm-icon-sm);
height: var(--wm-icon-sm);
}
.wm-auth-login__remember {
margin-top: calc(var(--wm-space-4) * -1);
}
.wm-auth-login__remember .wm-checkbox__label {
font-size: var(--wm-font-size-callout);
color: var(--wm-label-secondary);
}
.wm-auth-login__submit {
width: 100%;
height: var(--wm-control-height-xl);
}
.wm-auth-login__submit[aria-busy="true"] {
cursor: progress;
}
.wm-auth-login__divider {
display: flex;
align-items: center;
gap: var(--wm-space-5);
font-size: var(--wm-font-size-subheadline);
line-height: var(--wm-leading-subheadline);
letter-spacing: var(--wm-tracking-subheadline);
color: var(--wm-label-tertiary);
}
.wm-auth-login__divider::before,
.wm-auth-login__divider::after {
content: "";
flex: 1 1 auto;
height: var(--wm-border-width-hairline);
background: var(--wm-separator);
}
.wm-auth-login__providers {
display: flex;
flex-direction: column;
gap: var(--wm-space-4);
}
.wm-auth-login__providers--row {
flex-direction: row;
}
.wm-auth-login__provider {
width: 100%;
height: var(--wm-control-height-xl);
justify-content: center;
gap: var(--wm-space-5);
}
.wm-auth-login__provider svg {
flex: none;
width: var(--wm-auth-provider-icon);
height: var(--wm-auth-provider-icon);
}
.wm-auth-login__providers--row .wm-auth-login__provider {
gap: 0;
}
.wm-auth-login__foot {
margin: 0;
text-align: center;
font-size: var(--wm-font-size-callout);
line-height: var(--wm-leading-callout);
letter-spacing: var(--wm-tracking-callout);
color: var(--wm-label-secondary);
}
.wm-auth-login__link {
color: var(--wm-accent-text);
font-size: var(--wm-font-size-subheadline);
text-underline-offset: var(--wm-space-1);
}
.wm-auth-login__foot .wm-auth-login__link {
font-size: inherit;
}
.wm-auth-login__link:focus-visible {
outline: var(--wm-focus-ring-width) solid var(--wm-accent);
outline-offset: var(--wm-focus-ring-offset);
border-radius: var(--wm-radius-xs);
}
.wm-auth-login__legal {
margin: 0;
text-align: center;
font-size: var(--wm-font-size-caption2);
line-height: var(--wm-leading-caption2);
letter-spacing: var(--wm-tracking-caption2);
color: var(--wm-label-tertiary);
}
.wm-auth-login__legal a {
color: var(--wm-label-secondary);
}
.wm-auth-login {
animation: wm-auth-login-in var(--wm-duration-slow) var(--wm-ease-decelerate) both;
}
@keyframes wm-auth-login-in {
from { opacity: 0; transform: translateY(var(--wm-space-3)) scale(var(--wm-scale-pressed)); }
to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.wm-auth-login { animation: none; }
.wm-auth-login__reveal { transition: none; }
}
@media (max-width: 420px) {
.wm-auth-login-page {
padding: var(--wm-space-9) var(--wm-space-6);
}
.wm-auth-login {
padding: var(--wm-space-10) var(--wm-space-8);
box-shadow: inset 0 0 0 var(--wm-border-width-hairline) var(--wm-separator);
}
}
}
@layer components {
.wm-crm-contact-card {
container-type: inline-size;
container-name: wm-crm-contact-card;
display: flex;
flex-direction: column;
gap: var(--wm-space-6);
padding: var(--wm-space-8);
background: var(--wm-surface-primary);
border-radius: var(--wm-radius-panel);
box-shadow:
inset 0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
var(--wm-shadow-1);
}
.wm-crm-contact-card__alert {
display: flex;
align-items: flex-start;
gap: var(--wm-space-4);
padding: var(--wm-space-5) var(--wm-space-6);
border-radius: var(--wm-radius-md);
background: var(--wm-error-fill);
font-size: var(--wm-font-size-subheadline);
line-height: var(--wm-line-height-relaxed);
color: var(--wm-error);
}
.wm-crm-contact-card__alert .wm-icon {
flex: none;
width: var(--wm-icon-sm);
height: var(--wm-icon-sm);
margin-block-start: var(--wm-space-1);
}
.wm-crm-contact-card__top {
display: flex;
align-items: flex-start;
gap: var(--wm-space-6);
}
.wm-crm-contact-card__identity {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--wm-space-2);
}
.wm-crm-contact-card__name {
margin: 0;
font-size: var(--wm-font-size-title3);
line-height: var(--wm-leading-title3);
letter-spacing: var(--wm-tracking-title3);
font-weight: var(--wm-font-weight-semibold);
color: var(--wm-label-primary);
}
.wm-crm-contact-card__role {
font-size: var(--wm-font-size-subheadline);
line-height: var(--wm-line-height-relaxed);
color: var(--wm-label-secondary);
}
.wm-crm-contact-card__tags {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--wm-space-2);
margin-block-start: var(--wm-space-1);
}
.wm-crm-contact-card__channels {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--wm-space-1);
}
.wm-crm-contact-card__channel {
display: flex;
align-items: center;
gap: var(--wm-space-4);
min-height: var(--wm-control-height-md);
padding-inline: var(--wm-space-3);
border-radius: var(--wm-radius-sm);
}
.wm-crm-contact-card__channel-icon {
flex: none;
width: var(--wm-icon-sm);
height: var(--wm-icon-sm);
color: var(--wm-label-tertiary);
}
.wm-crm-contact-card__channel-body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--wm-space-1);
}
.wm-crm-contact-card__channel-link {
font-size: var(--wm-font-size-subheadline);
line-height: var(--wm-line-height-relaxed);
font-weight: var(--wm-font-weight-medium);
color: var(--wm-accent-text);
text-decoration: none;
overflow-wrap: anywhere;
}
.wm-crm-contact-card__channel-link:hover {
text-decoration: underline;
}
.wm-crm-contact-card__channel-link:focus-visible {
outline: var(--wm-focus-ring-width) solid var(--wm-accent);
outline-offset: var(--wm-focus-ring-offset);
border-radius: var(--wm-radius-xs);
}
.wm-crm-contact-card__channel-text {
font-size: var(--wm-font-size-subheadline);
line-height: var(--wm-line-height-relaxed);
color: var(--wm-label-primary);
overflow-wrap: anywhere;
}
.wm-crm-contact-card__channel-note {
font-size: var(--wm-font-size-caption);
line-height: var(--wm-leading-caption);
color: var(--wm-label-tertiary);
}
.wm-crm-contact-card__channel-kind {
flex: none;
font-size: var(--wm-font-size-caption);
color: var(--wm-label-tertiary);
}
.wm-crm-contact-card__channel--principal {
background: var(--wm-accent-fill);
}
.wm-crm-contact-card__channel--principal .wm-crm-contact-card__channel-icon {
color: var(--wm-accent-text);
}
.wm-crm-contact-card__channel--invalido .wm-crm-contact-card__channel-text {
text-decoration: line-through;
color: var(--wm-label-tertiary);
}
.wm-crm-contact-card__channel--invalido .wm-crm-contact-card__channel-icon {
color: var(--wm-error);
}
.wm-crm-contact-card__channel--invalido .wm-crm-contact-card__channel-note {
color: var(--wm-error);
}
.wm-crm-contact-card__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--wm-space-3) var(--wm-space-6);
padding-block-start: var(--wm-space-5);
border-block-start: var(--wm-border-width-hairline) solid var(--wm-separator);
font-size: var(--wm-font-size-caption);
line-height: var(--wm-leading-caption);
color: var(--wm-label-tertiary);
}
.wm-crm-contact-card__meta-item {
display: inline-flex;
align-items: center;
gap: var(--wm-space-2);
}
.wm-crm-contact-card__meta-item .wm-icon {
width: var(--wm-icon-xs);
height: var(--wm-icon-xs);
}
.wm-crm-contact-card__meta-item--alerta {
color: var(--wm-warning);
font-weight: var(--wm-font-weight-medium);
}
.wm-crm-contact-card__meta-item time {
border-block-end: var(--wm-border-width-hairline) dotted var(--wm-separator-strong);
}
.wm-crm-contact-card__links {
display: flex;
flex-direction: column;
gap: var(--wm-space-3);
}
.wm-crm-contact-card__links-title {
font-size: var(--wm-font-size-caption);
line-height: var(--wm-leading-caption);
font-weight: var(--wm-font-weight-medium);
color: var(--wm-label-tertiary);
}
.wm-crm-contact-card__link-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--wm-space-2);
}
.wm-crm-contact-card__link-item {
display: flex;
align-items: center;
gap: var(--wm-space-3);
font-size: var(--wm-font-size-subheadline);
line-height: var(--wm-line-height-relaxed);
color: var(--wm-label-primary);
}
.wm-crm-contact-card__link-role {
color: var(--wm-label-tertiary);
}
.wm-crm-contact-card__actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--wm-space-3);
}
.wm-crm-contact-card__alert[hidden],
.wm-crm-contact-card__tags[hidden],
.wm-crm-contact-card__links[hidden],
.wm-crm-contact-card__meta[hidden] {
display: none;
}
@container wm-crm-contact-card (max-width: 420px) {
.wm-crm-contact-card__channel-kind {
display: none;
}
.wm-crm-contact-card__top {
gap: var(--wm-space-4);
}
.wm-crm-contact-card__meta {
flex-direction: column;
align-items: flex-start;
gap: var(--wm-space-2);
}
}
}
@layer components {
.wm-crm-pipeline-board {
display: flex;
flex-direction: column;
gap: var(--wm-space-7);
}
.wm-crm-pipeline-board__header {
display: flex;
flex-direction: column;
gap: var(--wm-space-2);
}
.wm-crm-pipeline-board__title {
margin: 0;
font-size: var(--wm-font-size-title2);
line-height: var(--wm-leading-title2);
letter-spacing: var(--wm-tracking-title2);
font-weight: var(--wm-font-weight-semibold);
color: var(--wm-label-primary);
}
.wm-crm-pipeline-board__context {
margin: 0;
font-size: var(--wm-font-size-subheadline);
line-height: var(--wm-line-height-relaxed);
color: var(--wm-label-secondary);
max-width: 62ch;
}
.wm-crm-pipeline-board__columns {
display: flex;
align-items: flex-start;
gap: var(--wm-space-6);
overflow-x: auto;
padding-block-end: var(--wm-space-3);
scroll-padding-inline: var(--wm-space-3);
}
.wm-crm-pipeline-board__column {
flex: 0 0 288px;
width: 288px;
display: flex;
flex-direction: column;
gap: var(--wm-space-4);
padding: var(--wm-space-5);
background: var(--wm-surface-secondary);
border-radius: var(--wm-radius-panel);
box-shadow: inset 0 0 0 var(--wm-border-width-hairline) var(--wm-separator);
transition: box-shadow var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-crm-pipeline-board__column.is-column-drop-target {
box-shadow: inset 0 0 0 var(--wm-border-width-thin) var(--wm-accent);
}
.wm-crm-pipeline-board__column.is-dragging {
opacity: 0.55;
}
.wm-crm-pipeline-board__column-header {
display: flex;
align-items: center;
gap: var(--wm-space-3);
cursor: grab;
}
.wm-crm-pipeline-board__column-header:active {
cursor: grabbing;
}
.wm-crm-pipeline-board__column-header:has(.wm-crm-pipeline-board__column-rename:not([hidden])) {
align-items: flex-start;
}
.wm-crm-pipeline-board__column-header:has(.wm-crm-pipeline-board__column-rename:not([hidden]))
.wm-crm-pipeline-board__column-count,
.wm-crm-pipeline-board__column-header:has(.wm-crm-pipeline-board__column-rename:not([hidden]))
.wm-crm-pipeline-board__column-menu-trigger {
margin-block-start: var(--wm-space-1);
}
.wm-crm-pipeline-board__column-title {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: start;
margin: 0;
padding: var(--wm-space-1) var(--wm-space-2);
border: none;
border-radius: var(--wm-radius-xs);
background: transparent;
font-size: var(--wm-font-size-headline);
font-weight: var(--wm-font-weight-semibold);
color: var(--wm-label-primary);
cursor: text;
transition: background var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-crm-pipeline-board__column-title:hover {
background: var(--wm-fill-tertiary);
}
.wm-crm-pipeline-board__column-rename {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--wm-space-3);
}
.wm-crm-pipeline-board__column-rename-field {
width: 100%;
}
.wm-crm-pipeline-board__column-rename-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--wm-space-2);
}
.wm-crm-pipeline-board__column-count {
flex: none;
min-width: 22px;
height: 20px;
padding-inline: var(--wm-space-3);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--wm-radius-pill);
background: var(--wm-fill-tertiary);
color: var(--wm-label-secondary);
font-size: var(--wm-font-size-caption);
font-weight: var(--wm-font-weight-semibold);
font-variant-numeric: tabular-nums;
}
.wm-crm-pipeline-board__column-menu-trigger {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--wm-control-height-xs);
height: var(--wm-control-height-xs);
border: none;
border-radius: var(--wm-radius-xs);
background: transparent;
color: var(--wm-label-tertiary);
cursor: pointer;
transition: background var(--wm-duration-fast) var(--wm-ease-standard),
color var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-crm-pipeline-board__column-menu-trigger:hover,
.wm-crm-pipeline-board__column-menu-trigger[aria-expanded="true"] {
background: var(--wm-fill-tertiary);
color: var(--wm-label-secondary);
}
.wm-crm-pipeline-board__column-menu-trigger .wm-icon {
width: var(--wm-icon-sm);
height: var(--wm-icon-sm);
}
.wm-crm-pipeline-board__column-value {
margin: 0;
font-size: var(--wm-font-size-caption);
font-weight: var(--wm-font-weight-medium);
font-variant-numeric: tabular-nums;
color: var(--wm-label-tertiary);
}
.wm-crm-pipeline-board__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--wm-space-4);
min-height: 64px;
border-radius: var(--wm-radius-md);
transition: background var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-crm-pipeline-board__list.is-drop-target {
background: var(--wm-accent-fill);
box-shadow: inset 0 0 0 var(--wm-border-width-thin) var(--wm-accent);
}
.wm-crm-pipeline-board__card {
display: flex;
flex-direction: column;
gap: var(--wm-space-3);
padding: var(--wm-space-5);
background: var(--wm-surface-primary);
border-radius: var(--wm-radius-md);
box-shadow:
inset 0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
var(--wm-shadow-1);
cursor: grab;
}
.wm-crm-pipeline-board__card:active {
cursor: grabbing;
}
.wm-crm-pipeline-board__card.is-dragging {
opacity: 0.55;
box-shadow: inset 0 0 0 var(--wm-border-width-thin) var(--wm-accent);
}
.wm-crm-pipeline-board__card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--wm-space-3);
}
.wm-crm-pipeline-board__card-title {
font-size: var(--wm-font-size-subheadline);
line-height: var(--wm-line-height-relaxed);
font-weight: var(--wm-font-weight-medium);
color: var(--wm-label-primary);
}
.wm-crm-pipeline-board__card-value {
font-size: var(--wm-font-size-body);
font-weight: var(--wm-font-weight-semibold);
font-variant-numeric: tabular-nums;
color: var(--wm-label-primary);
}
.wm-crm-pipeline-board__card-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wm-space-3);
}
.wm-crm-pipeline-board__card-date {
font-size: var(--wm-font-size-caption);
color: var(--wm-label-tertiary);
}
.wm-crm-pipeline-board__card-footer {
padding-block-start: var(--wm-space-3);
border-block-start: var(--wm-border-width-hairline) solid var(--wm-separator);
}
.wm-crm-pipeline-board__move {
width: 100%;
}
.wm-crm-pipeline-board__empty {
padding: var(--wm-space-5);
border-radius: var(--wm-radius-md);
border: var(--wm-border-width-thin) dashed var(--wm-separator-strong);
font-size: var(--wm-font-size-subheadline);
line-height: var(--wm-line-height-relaxed);
color: var(--wm-label-tertiary);
text-align: center;
}
.wm-crm-pipeline-board__add-column {
flex: 0 0 288px;
width: 288px;
align-self: stretch;
display: flex;
align-items: flex-start;
}
.wm-crm-pipeline-board__add-column-trigger {
width: 100%;
min-height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--wm-space-3);
padding: var(--wm-space-5);
border: var(--wm-border-width-thin) dashed var(--wm-separator-strong);
border-radius: var(--wm-radius-panel);
background: transparent;
color: var(--wm-label-secondary);
font-size: var(--wm-font-size-subheadline);
font-weight: var(--wm-font-weight-medium);
cursor: pointer;
transition: background var(--wm-duration-fast) var(--wm-ease-standard),
border-color var(--wm-duration-fast) var(--wm-ease-standard),
color var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-crm-pipeline-board__add-column-trigger:hover {
background: var(--wm-fill-quaternary);
border-color: var(--wm-accent);
color: var(--wm-accent-text);
}
.wm-crm-pipeline-board__add-column-trigger .wm-icon {
width: var(--wm-icon-sm);
height: var(--wm-icon-sm);
}
.wm-crm-pipeline-board__add-column-form {
width: 100%;
display: flex;
flex-direction: column;
gap: var(--wm-space-4);
padding: var(--wm-space-5);
background: var(--wm-surface-secondary);
border-radius: var(--wm-radius-panel);
box-shadow: inset 0 0 0 var(--wm-border-width-hairline) var(--wm-separator);
}
.wm-crm-pipeline-board__add-column-actions {
display: flex;
align-items: center;
gap: var(--wm-space-3);
}
.wm-crm-pipeline-board__add-column-actions .wm-button {
flex: 1 1 auto;
}
.wm-crm-pipeline-board__column-title[hidden],
.wm-crm-pipeline-board__column-rename[hidden],
.wm-crm-pipeline-board__empty[hidden],
.wm-crm-pipeline-board__add-column-trigger[hidden],
.wm-crm-pipeline-board__add-column-form[hidden] {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.wm-crm-pipeline-board__column,
.wm-crm-pipeline-board__list,
.wm-crm-pipeline-board__column-title,
.wm-crm-pipeline-board__column-menu-trigger,
.wm-crm-pipeline-board__add-column-trigger {
transition: none;
}
}
}
@layer components {
.wm-crm-activity-log {
container-type: inline-size;
container-name: wm-crm-activity-log;
display: flex;
flex-direction: column;
gap: var(--wm-space-8);
}
.wm-crm-activity-log__header {
display: flex;
align-items: baseline;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--wm-space-3) var(--wm-space-6);
}
.wm-crm-activity-log__title {
margin: 0;
font-size: var(--wm-font-size-headline);
line-height: var(--wm-leading-headline);
font-weight: var(--wm-font-weight-semibold);
color: var(--wm-label-primary);
}
.wm-crm-activity-log__pulse {
display: inline-flex;
align-items: center;
gap: var(--wm-space-2);
font-size: var(--wm-font-size-caption);
line-height: var(--wm-leading-caption);
color: var(--wm-label-tertiary);
}
.wm-crm-activity-log__pulse .wm-icon {
width: var(--wm-icon-xs);
height: var(--wm-icon-xs);
}
.wm-crm-activity-log__pulse--alerta {
color: var(--wm-warning);
font-weight: var(--wm-font-weight-medium);
}
.wm-crm-activity-log__pulse time {
border-block-end: var(--wm-border-width-hairline) dotted var(--wm-separator-strong);
}
.wm-crm-activity-log__form {
display: flex;
flex-direction: column;
gap: var(--wm-space-5);
padding: var(--wm-space-6);
background: var(--wm-surface-secondary);
border-radius: var(--wm-radius-panel);
box-shadow: inset 0 0 0 var(--wm-border-width-hairline) var(--wm-separator);
}
.wm-crm-activity-log__kinds {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--wm-space-2);
border: none;
margin: 0;
padding: 0;
min-inline-size: 0;
}
.wm-crm-activity-log__kinds-legend {
padding: 0;
font-size: var(--wm-font-size-caption);
line-height: var(--wm-leading-caption);
color: var(--wm-label-tertiary);
}
.wm-crm-activity-log__kind-input {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.wm-crm-activity-log__kind {
display: inline-flex;
align-items: center;
gap: var(--wm-space-2);
height: var(--wm-control-height-sm);
padding-inline: var(--wm-space-5);
border-radius: var(--wm-radius-pill);
background: var(--wm-fill-tertiary);
color: var(--wm-label-secondary);
font-size: var(--wm-font-size-subheadline);
font-weight: var(--wm-font-weight-medium);
cursor: pointer;
transition: background var(--wm-duration-fast) var(--wm-ease-standard),
color var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-crm-activity-log__kind .wm-icon {
width: var(--wm-icon-xs);
height: var(--wm-icon-xs);
}
.wm-crm-activity-log__kind:hover {
background: var(--wm-fill-secondary);
}
.wm-crm-activity-log__kind:has(.wm-crm-activity-log__kind-input:checked) {
background: var(--wm-accent);
color: var(--wm-label-on-accent);
}
.wm-crm-activity-log__kind:has(.wm-crm-activity-log__kind-input:focus-visible) {
outline: var(--wm-focus-ring-width) solid var(--wm-accent);
outline-offset: var(--wm-focus-ring-offset);
}
.wm-crm-activity-log__row {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
gap: var(--wm-space-4);
}
.wm-crm-activity-log__field {
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--wm-space-2);
}
.wm-crm-activity-log__row > .wm-crm-activity-log__field {
flex: 1 1 220px;
}
.wm-crm-activity-log__label {
font-size: var(--wm-font-size-caption);
line-height: var(--wm-leading-caption);
font-weight: var(--wm-font-weight-medium);
color: var(--wm-label-secondary);
}
.wm-crm-activity-log__hint {
font-size: var(--wm-font-size-caption);
line-height: var(--wm-line-height-relaxed);
color: var(--wm-label-tertiary);
}
.wm-crm-activity-log__required {
color: var(--wm-error);
font-weight: var(--wm-font-weight-semibold);
}
.wm-crm-activity-log__actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--wm-space-3);
}
.wm-crm-activity-log__feed {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--wm-space-3);
}
.wm-crm-activity-log__day {
padding-block: var(--wm-space-3) var(--wm-space-1);
font-size: var(--wm-font-size-caption);
line-height: var(--wm-leading-caption);
font-weight: var(--wm-font-weight-semibold);
color: var(--wm-label-tertiary);
}
.wm-crm-activity-log__item {
display: flex;
align-items: flex-start;
gap: var(--wm-space-5);
padding: var(--wm-space-5) var(--wm-space-6);
border-radius: var(--wm-radius-md);
background: var(--wm-surface-secondary);
}
.wm-crm-activity-log__item-icon {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--wm-control-height-xs);
height: var(--wm-control-height-xs);
border-radius: var(--wm-radius-pill);
background: var(--wm-fill-tertiary);
color: var(--wm-label-secondary);
}
.wm-crm-activity-log__item-icon .wm-icon {
width: var(--wm-icon-xs);
height: var(--wm-icon-xs);
}
.wm-crm-activity-log__item-body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--wm-space-2);
}
.wm-crm-activity-log__item-top {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: var(--wm-space-2) var(--wm-space-4);
}
.wm-crm-activity-log__item-title {
font-size: var(--wm-font-size-subheadline);
line-height: var(--wm-line-height-relaxed);
font-weight: var(--wm-font-weight-semibold);
color: var(--wm-label-primary);
}
.wm-crm-activity-log__outcome {
margin: 0;
font-size: var(--wm-font-size-subheadline);
line-height: var(--wm-line-height-relaxed);
color: var(--wm-label-secondary);
}
.wm-crm-activity-log__item-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--wm-space-2) var(--wm-space-5);
font-size: var(--wm-font-size-caption);
line-height: var(--wm-leading-caption);
color: var(--wm-label-tertiary);
}
.wm-crm-activity-log__item-meta time {
border-block-end: var(--wm-border-width-hairline) dotted var(--wm-separator-strong);
}
.wm-crm-activity-log__source {
display: inline-flex;
align-items: center;
gap: var(--wm-space-2);
padding-inline: var(--wm-space-3);
height: 18px;
border-radius: var(--wm-radius-pill);
background: var(--wm-fill-quaternary);
color: var(--wm-label-tertiary);
font-size: var(--wm-font-size-caption2);
}
.wm-crm-activity-log__source .wm-icon {
width: var(--wm-icon-xs);
height: var(--wm-icon-xs);
}
.wm-crm-activity-log__item--agendada {
background: transparent;
box-shadow: inset 0 0 0 var(--wm-border-width-thin) var(--wm-separator-strong);
}
.wm-crm-activity-log__item--agendada .wm-crm-activity-log__item-icon {
background: var(--wm-accent-fill);
color: var(--wm-accent-text);
}
.wm-crm-activity-log__item--vencida {
background: var(--wm-error-fill);
box-shadow: inset 0 0 0 var(--wm-border-width-thin) var(--wm-error);
}
.wm-crm-activity-log__item--vencida .wm-crm-activity-log__item-icon {
background: var(--wm-error);
color: var(--wm-label-on-accent);
}
.wm-crm-activity-log__item--vencida .wm-crm-activity-log__item-meta {
color: var(--wm-error);
font-weight: var(--wm-font-weight-medium);
}
.wm-crm-activity-log__gap {
display: flex;
align-items: flex-start;
gap: var(--wm-space-5);
padding: var(--wm-space-5) var(--wm-space-6);
border-radius: var(--wm-radius-md);
border: var(--wm-border-width-thin) dashed var(--wm-warning);
background: var(--wm-warning-fill);
font-size: var(--wm-font-size-subheadline);
line-height: var(--wm-line-height-relaxed);
color: var(--wm-warning);
}
.wm-crm-activity-log__gap .wm-icon {
flex: none;
width: var(--wm-icon-sm);
height: var(--wm-icon-sm);
margin-block-start: var(--wm-space-1);
}
.wm-crm-activity-log__empty {
padding: var(--wm-space-9) var(--wm-space-6);
border-radius: var(--wm-radius-md);
border: var(--wm-border-width-thin) dashed var(--wm-separator-strong);
text-align: center;
font-size: var(--wm-font-size-subheadline);
line-height: var(--wm-line-height-relaxed);
color: var(--wm-label-tertiary);
}
.wm-crm-activity-log__form[hidden],
.wm-crm-activity-log__gap[hidden],
.wm-crm-activity-log__empty[hidden],
.wm-crm-activity-log__feed[hidden] {
display: none;
}
@container wm-crm-activity-log (max-width: 560px) {
.wm-crm-activity-log__row > .wm-crm-activity-log__field {
flex: 1 1 100%;
}
.wm-crm-activity-log__header {
flex-direction: column;
align-items: flex-start;
}
}
@container wm-crm-activity-log (max-width: 420px) {
.wm-crm-activity-log__item {
padding: var(--wm-space-5);
gap: var(--wm-space-4);
}
.wm-crm-activity-log__kind {
padding-inline: var(--wm-space-4);
}
}
@media (prefers-reduced-motion: reduce) {
.wm-crm-activity-log__kind {
transition: none;
}
}
}
@layer components {
.wm-nav-sidebar {
display: flex;
flex-direction: column;
width: var(--wm-nav-sidebar-width);
flex: none;
min-height: 0;
background: var(--wm-surface-sidebar);
border-inline-end: var(--wm-border-width-hairline) solid
color-mix(in srgb, var(--wm-separator) 85%, transparent);
transition: width var(--wm-duration-normal) var(--wm-ease-standard);
}
.wm-nav-sidebar--glass {
background: var(--wm-material-sidebar-bg);
backdrop-filter: blur(var(--wm-material-blur-strong))
saturate(var(--wm-material-saturate-strong));
-webkit-backdrop-filter: blur(var(--wm-material-blur-strong))
saturate(var(--wm-material-saturate-strong));
}
.wm-nav-sidebar__header {
flex: none;
display: flex;
align-items: center;
gap: var(--wm-space-4);
padding: var(--wm-space-6);
}
.wm-nav-sidebar__brand-mark {
width: var(--wm-control-height-md);
height: var(--wm-control-height-md);
border-radius: var(--wm-radius-settings-icon);
flex: none;
box-shadow: 0 0 0 0.5px var(--wm-separator),
0 1px 2px hsl(var(--wm-shadow-color) / 0.14);
}
.wm-nav-sidebar__brand-text {
min-width: 0;
}
.wm-nav-sidebar__brand-name {
font-size: var(--wm-font-size-headline);
font-weight: var(--wm-font-weight-semibold);
letter-spacing: var(--wm-tracking-headline);
color: var(--wm-label-primary);
line-height: var(--wm-line-height-tight);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wm-nav-sidebar__brand-sub {
font-size: var(--wm-font-size-caption);
letter-spacing: var(--wm-tracking-caption);
color: var(--wm-label-tertiary);
line-height: var(--wm-line-height-tight);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wm-nav-sidebar__collapse {
margin-inline-start: auto;
flex: none;
width: var(--wm-control-height-md);
height: var(--wm-control-height-md);
display: inline-grid;
place-items: center;
border: none;
background: transparent;
border-radius: var(--wm-radius-md);
color: var(--wm-label-secondary);
cursor: pointer;
transition: color var(--wm-duration-fast) var(--wm-ease-standard),
background-color var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-nav-sidebar__collapse:hover {
color: var(--wm-label-primary);
background: var(--wm-fill-secondary);
}
.wm-nav-sidebar__collapse:focus-visible {
outline: var(--wm-focus-ring-width) solid var(--wm-accent);
outline-offset: var(--wm-focus-ring-offset);
box-shadow: 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
}
.wm-nav-sidebar__scroll {
flex: 1 1 auto;
overflow-y: auto;
padding: var(--wm-space-2) var(--wm-space-5) var(--wm-space-6);
scrollbar-width: thin;
scrollbar-color: var(--wm-scrollbar-thumb) transparent;
}
.wm-nav-sidebar__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--wm-space-1);
}
.wm-nav-sidebar__section {
margin-bottom: var(--wm-space-6);
}
.wm-nav-sidebar__section-title {
display: block;
padding: var(--wm-space-3) var(--wm-space-5);
font-size: var(--wm-font-size-caption2);
font-weight: var(--wm-font-weight-semibold);
letter-spacing: var(--wm-letter-spacing-wide);
text-transform: uppercase;
color: var(--wm-label-tertiary);
}
.wm-nav-sidebar__item {
display: flex;
align-items: center;
gap: var(--wm-space-5);
width: 100%;
height: var(--wm-control-height-lg);
padding-inline: var(--wm-space-5);
border: none;
background: transparent;
border-radius: var(--wm-radius-md);
font-size: var(--wm-font-size-body);
font-weight: var(--wm-font-weight-medium);
letter-spacing: var(--wm-tracking-body);
color: var(--wm-label-secondary);
text-align: start;
text-decoration: none;
cursor: pointer;
user-select: none;
transition: color var(--wm-duration-fast) var(--wm-ease-standard),
background-color var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-nav-sidebar__item:hover {
color: var(--wm-label-primary);
background: var(--wm-fill-secondary);
}
.wm-nav-sidebar__item:active:not(.is-selected) {
background: var(--wm-fill-primary);
}
.wm-nav-sidebar__item:focus-visible {
outline: var(--wm-focus-ring-width) solid var(--wm-accent);
outline-offset: var(--wm-focus-ring-offset);
box-shadow: 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
}
.wm-nav-sidebar__item.is-disabled {
color: var(--wm-label-quaternary);
pointer-events: none;
}
.wm-nav-sidebar__item.is-selected {
background: var(--wm-accent-fill);
color: var(--wm-accent-text);
font-weight: var(--wm-font-weight-semibold);
}
.wm-nav-sidebar__item.is-selected .wm-nav-sidebar__item-icon {
color: inherit;
}
.wm-nav-sidebar__item-icon {
flex: none;
display: inline-flex;
width: var(--wm-icon-md);
height: var(--wm-icon-md);
color: var(--wm-label-secondary);
transition: color var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-nav-sidebar__item-label {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wm-nav-sidebar__item-count {
flex: none;
min-width: var(--wm-control-height-xs);
height: var(--wm-control-height-xs);
padding-inline: var(--wm-space-3);
display: inline-grid;
place-items: center;
border-radius: var(--wm-radius-pill);
background: var(--wm-fill-secondary);
color: var(--wm-label-secondary);
font-size: var(--wm-font-size-caption);
font-weight: var(--wm-font-weight-semibold);
letter-spacing: var(--wm-tracking-caption);
line-height: 1;
}
.wm-nav-sidebar__item.is-selected .wm-nav-sidebar__item-count {
background: var(--wm-accent-fill-strong);
color: var(--wm-accent-text);
}
.wm-nav-sidebar__item-disclosure {
flex: none;
display: inline-flex;
color: var(--wm-label-quaternary);
transition: transform var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-nav-sidebar__item[aria-expanded="true"] .wm-nav-sidebar__item-disclosure {
transform: rotate(90deg);
}
.wm-nav-sidebar__nested {
list-style: none;
margin: var(--wm-space-1) 0 var(--wm-space-2);
margin-inline-start: calc(var(--wm-space-5) + var(--wm-icon-md) / 2);
padding: 0;
padding-inline-start: var(--wm-space-5);
border-inline-start: var(--wm-border-width-thin) solid var(--wm-separator);
display: flex;
flex-direction: column;
gap: var(--wm-space-1);
}
.wm-nav-sidebar__nested .wm-nav-sidebar__item {
height: var(--wm-control-height-md);
font-weight: var(--wm-font-weight-regular);
}
.wm-nav-sidebar__item[aria-expanded="false"] + .wm-nav-sidebar__nested {
display: none;
}
.wm-nav-sidebar__footer {
flex: none;
display: flex;
align-items: center;
gap: var(--wm-space-5);
padding: var(--wm-space-5) var(--wm-space-6);
border-top: var(--wm-border-width-hairline) solid
color-mix(in srgb, var(--wm-separator) 85%, transparent);
}
.wm-nav-sidebar__footer-avatar {
flex: none;
width: var(--wm-control-height-lg);
height: var(--wm-control-height-lg);
display: inline-grid;
place-items: center;
border-radius: var(--wm-radius-pill);
background: var(--wm-accent-fill);
color: var(--wm-accent-text);
font-size: var(--wm-font-size-caption);
font-weight: var(--wm-font-weight-semibold);
letter-spacing: var(--wm-tracking-caption);
overflow: hidden;
}
.wm-nav-sidebar__footer-info {
flex: 1 1 auto;
min-width: 0;
}
.wm-nav-sidebar__footer-name {
font-size: var(--wm-font-size-body);
font-weight: var(--wm-font-weight-medium);
letter-spacing: var(--wm-tracking-body);
color: var(--wm-label-primary);
line-height: var(--wm-line-height-tight);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wm-nav-sidebar__footer-mail {
font-size: var(--wm-font-size-caption);
letter-spacing: var(--wm-tracking-caption);
color: var(--wm-label-tertiary);
line-height: var(--wm-line-height-tight);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wm-nav-sidebar__footer-more {
flex: none;
width: var(--wm-control-height-md);
height: var(--wm-control-height-md);
display: inline-grid;
place-items: center;
border: none;
background: transparent;
border-radius: var(--wm-radius-md);
color: var(--wm-label-secondary);
cursor: pointer;
transition: background-color var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-nav-sidebar__footer-more:hover {
background: var(--wm-fill-secondary);
}
.wm-nav-sidebar__footer-more:focus-visible {
outline: var(--wm-focus-ring-width) solid var(--wm-accent);
outline-offset: var(--wm-focus-ring-offset);
}
.wm-nav-sidebar.is-collapsed {
width: var(--wm-nav-sidebar-width-collapsed);
}
.wm-nav-sidebar.is-collapsed .wm-nav-sidebar__header {
flex-direction: column;
gap: var(--wm-space-4);
}
.wm-nav-sidebar.is-collapsed .wm-nav-sidebar__collapse {
margin-inline-start: 0;
}
.wm-nav-sidebar.is-collapsed .wm-nav-sidebar__brand-text,
.wm-nav-sidebar.is-collapsed .wm-nav-sidebar__section-title,
.wm-nav-sidebar.is-collapsed .wm-nav-sidebar__item-label,
.wm-nav-sidebar.is-collapsed .wm-nav-sidebar__item-count,
.wm-nav-sidebar.is-collapsed .wm-nav-sidebar__item-disclosure,
.wm-nav-sidebar.is-collapsed .wm-nav-sidebar__nested,
.wm-nav-sidebar.is-collapsed .wm-nav-sidebar__footer-info,
.wm-nav-sidebar.is-collapsed .wm-nav-sidebar__footer-more {
display: none;
}
.wm-nav-sidebar.is-collapsed .wm-nav-sidebar__scroll {
padding-inline: var(--wm-space-3);
}
.wm-nav-sidebar.is-collapsed .wm-nav-sidebar__item {
justify-content: center;
gap: 0;
padding-inline: 0;
}
.wm-nav-sidebar.is-collapsed .wm-nav-sidebar__footer {
justify-content: center;
padding-inline: var(--wm-space-3);
}
@media (prefers-reduced-motion: reduce) {
.wm-nav-sidebar,
.wm-nav-sidebar__item,
.wm-nav-sidebar__item-icon,
.wm-nav-sidebar__item-disclosure,
.wm-nav-sidebar__collapse,
.wm-nav-sidebar__footer-more {
transition: none;
}
.wm-nav-sidebar__item[aria-expanded="true"] .wm-nav-sidebar__item-disclosure {
transform: none;
}
}
}
@layer components {
.wm-header-app__workspace {
display: inline-flex;
align-items: center;
gap: var(--wm-space-4);
max-inline-size: var(--wm-nav-search-width);
min-inline-size: 0;
block-size: var(--wm-control-height-lg);
padding-inline: var(--wm-space-5);
border: var(--wm-border-width-hairline) solid var(--wm-separator);
border-radius: var(--wm-radius-md);
background: var(--wm-fill-quaternary);
color: var(--wm-label-primary);
cursor: pointer;
text-align: start;
}
.wm-header-app__workspace:hover {
background: var(--wm-fill-tertiary);
}
.wm-header-app__workspace:focus-visible {
outline: var(--wm-focus-ring-width) solid var(--wm-accent);
outline-offset: var(--wm-focus-ring-offset);
box-shadow: 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
}
.wm-header-app__workspace-mark {
flex: none;
inline-size: var(--wm-control-height-sm);
block-size: var(--wm-control-height-sm);
display: inline-grid;
place-items: center;
border-radius: var(--wm-radius-settings-icon);
background: var(--wm-accent-gradient);
color: var(--wm-label-on-accent);
font-size: var(--wm-font-size-caption2);
font-weight: var(--wm-font-weight-bold);
}
.wm-header-app__workspace-text {
display: flex;
flex-direction: column;
min-inline-size: 0;
}
.wm-header-app__workspace-name {
font-size: var(--wm-font-size-footnote);
font-weight: var(--wm-font-weight-semibold);
letter-spacing: var(--wm-tracking-footnote);
line-height: var(--wm-line-height-tight);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wm-header-app__workspace-role {
font-size: var(--wm-font-size-caption2);
letter-spacing: var(--wm-tracking-caption2);
line-height: var(--wm-line-height-tight);
color: var(--wm-label-tertiary);
white-space: nowrap;
}
.wm-header-app__workspace-caret {
flex: none;
margin-inline-start: auto;
color: var(--wm-label-quaternary);
}
.wm-header-app__workspace-list {
max-block-size: calc(var(--wm-control-height-3xl) * 6);
overflow-y: auto;
overscroll-behavior: contain;
}
.wm-header-app__strip {
display: flex;
align-items: center;
gap: var(--wm-space-6);
block-size: var(--wm-control-height-2xl);
padding-inline: var(--wm-space-9);
background: var(--wm-surface-secondary);
border-block-end: var(--wm-border-width-hairline) solid
color-mix(in srgb, var(--wm-separator) 85%, transparent);
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
.wm-header-app__strip::-webkit-scrollbar {
display: none;
}
.wm-header-app__crumbs {
display: flex;
align-items: center;
gap: var(--wm-space-3);
margin: 0;
padding: 0;
list-style: none;
white-space: nowrap;
}
.wm-header-app__crumb {
display: inline-flex;
align-items: center;
gap: var(--wm-space-3);
font-size: var(--wm-font-size-footnote);
letter-spacing: var(--wm-tracking-footnote);
color: var(--wm-label-tertiary);
}
.wm-header-app__crumb-link {
color: var(--wm-label-secondary);
text-decoration: none;
border-radius: var(--wm-radius-xs);
}
.wm-header-app__crumb-link:hover {
color: var(--wm-label-primary);
text-decoration: underline;
text-underline-offset: var(--wm-space-1);
}
.wm-header-app__crumb-link:focus-visible {
outline: var(--wm-focus-ring-width) solid var(--wm-accent);
outline-offset: var(--wm-focus-ring-offset);
}
.wm-header-app__crumb[aria-current="page"] {
color: var(--wm-label-primary);
font-weight: var(--wm-font-weight-medium);
}
.wm-header-app__crumb-sep {
color: var(--wm-label-quaternary);
}
.wm-header-app__tabs {
display: flex;
align-items: stretch;
gap: var(--wm-space-2);
block-size: 100%;
}
.wm-header-app__tab {
display: inline-flex;
align-items: center;
gap: var(--wm-space-3);
padding-inline: var(--wm-space-6);
border: none;
background: transparent;
border-block-end: var(--wm-border-width-thick) solid transparent;
color: var(--wm-label-secondary);
font-size: var(--wm-font-size-footnote);
font-weight: var(--wm-font-weight-medium);
letter-spacing: var(--wm-tracking-footnote);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
.wm-header-app__tab:hover {
color: var(--wm-label-primary);
}
.wm-header-app__tab[aria-current="page"],
.wm-header-app__tab[aria-selected="true"] {
color: var(--wm-accent-text);
border-block-end-color: var(--wm-accent);
}
.wm-header-app__tab:focus-visible {
outline: var(--wm-focus-ring-width) solid var(--wm-accent);
outline-offset: calc(-1 * var(--wm-focus-ring-offset));
}
.wm-header-app__tab-count {
display: inline-grid;
place-items: center;
min-inline-size: var(--wm-icon-md);
padding-inline: var(--wm-space-2);
border-radius: var(--wm-radius-pill);
background: var(--wm-fill-tertiary);
color: var(--wm-label-secondary);
font-size: var(--wm-font-size-caption2);
font-variant-numeric: tabular-nums;
}
.wm-header-app__strip-end {
margin-inline-start: auto;
display: flex;
align-items: center;
gap: var(--wm-space-4);
flex: none;
}
.wm-header-app__credits {
display: inline-flex;
align-items: center;
gap: var(--wm-space-3);
block-size: var(--wm-control-height-md);
padding-inline: var(--wm-space-5);
border: var(--wm-border-width-hairline) solid var(--wm-separator);
border-radius: var(--wm-radius-pill);
background: var(--wm-fill-quaternary);
color: var(--wm-label-primary);
font-size: var(--wm-font-size-caption);
font-weight: var(--wm-font-weight-semibold);
letter-spacing: var(--wm-tracking-caption);
font-variant-numeric: tabular-nums;
text-decoration: none;
cursor: pointer;
}
.wm-header-app__credits:hover {
background: var(--wm-fill-tertiary);
}
.wm-header-app__credits:focus-visible {
outline: var(--wm-focus-ring-width) solid var(--wm-accent);
outline-offset: var(--wm-focus-ring-offset);
}
.wm-header-app__credits-icon {
flex: none;
color: var(--wm-accent-text);
}
.wm-header-app__credits--low {
border-color: var(--wm-warning);
background: var(--wm-warning-fill);
}
.wm-header-app__credits--low .wm-header-app__credits-icon {
color: var(--wm-warning);
}
.wm-header-app__strip--compact {
block-size: var(--wm-control-height-lg);
}
@media (max-width: 679px) {
.wm-header-app__strip {
padding-inline: var(--wm-space-8);
}
.wm-header-app__crumb--middle {
display: none;
}
.wm-header-app__crumb--ellipsis {
display: inline-flex;
}
}
.wm-header-app__crumb--ellipsis {
display: none;
}
@media (max-width: 559px) {
.wm-header-app__workspace {
max-inline-size: none;
inline-size: var(--wm-control-height-lg);
padding-inline: 0;
justify-content: center;
}
.wm-header-app__workspace-text,
.wm-header-app__workspace-caret {
display: none;
}
.wm-header-app__strip {
padding-inline: var(--wm-space-6);
}
}
}
@layer components {
.wm-toolbar {
display: flex;
align-items: center;
gap: var(--wm-space-4);
min-height: 44px;
padding-inline: var(--wm-space-7);
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.06),
rgba(255, 255, 255, 0) 55%
),
var(--wm-material-toolbar-bg);
backdrop-filter: blur(var(--wm-material-blur-strong, 40px))
saturate(var(--wm-material-saturate-strong, 1.9));
-webkit-backdrop-filter: blur(var(--wm-material-blur-strong, 40px))
saturate(var(--wm-material-saturate-strong, 1.9));
border-bottom: var(--wm-border-width-hairline) solid
color-mix(in srgb, var(--wm-separator) 85%, transparent);
box-shadow: inset 0 1px 0
color-mix(in srgb, var(--wm-material-glass-border) 55%, transparent);
}
.wm-toolbar--plain {
background: var(--wm-surface-primary);
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: none;
}
.wm-toolbar__group {
display: flex;
align-items: center;
gap: var(--wm-space-2);
}
.wm-toolbar__spacer {
flex: 1 1 auto;
}
.wm-toolbar__divider {
flex: none;
width: var(--wm-border-width-hairline);
height: 16px;
background: var(--wm-separator-strong);
margin-inline: var(--wm-space-3);
}
.wm-toolbar__title {
font-size: var(--wm-font-size-headline);
font-weight: var(--wm-font-weight-semibold);
letter-spacing: var(--wm-letter-spacing-tight);
color: var(--wm-label-primary);
white-space: nowrap;
}
.wm-toolbar .wm-field {
height: 26px;
max-width: 220px;
}
.wm-toolbar--secondary {
min-height: 34px;
background: var(--wm-surface-secondary);
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: none;
}
}
@layer components {
.wm-page {
display: grid;
inline-size: 100%;
min-inline-size: 0;
background: var(--wm-surface-base);
color: var(--wm-label-primary);
--wm-page-sidebar-width: var(--wm-nav-sidebar-width);
--wm-page-list-width: 300px;
--wm-page-aside-width: 280px;
}
.wm-page--fill {
block-size: var(--wm-page-block-size, 100dvh);
overflow: hidden;
}
.wm-page--fill > * {
min-block-size: 0;
min-inline-size: 0;
}
.wm-page--fill .wm-page__sidebar,
.wm-page--fill .wm-page__list,
.wm-page--fill .wm-page__detail,
.wm-page--fill .wm-page__main,
.wm-page--fill .wm-page__aside {
overflow: auto;
overscroll-behavior: contain;
}
.wm-page__header {
grid-area: header;
min-inline-size: 0;
z-index: 1;
}
.wm-page__header--sticky {
position: sticky;
inset-block-start: 0;
}
.wm-page__header > .wm-toolbar {
flex-wrap: wrap;
row-gap: var(--wm-space-3);
}
.wm-page__header > .wm-toolbar > .wm-toolbar__title {
min-inline-size: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.wm-page__sidebar {
grid-area: sidebar;
min-inline-size: 0;
background: var(--wm-surface-sidebar);
border-inline-end: var(--wm-border-width-hairline) solid var(--wm-separator);
}
.wm-page__list {
grid-area: list;
min-inline-size: 0;
background: var(--wm-surface-primary);
border-inline-end: var(--wm-border-width-hairline) solid var(--wm-separator);
}
.wm-page__detail {
grid-area: detail;
min-inline-size: 0;
}
.wm-page__sidebar--bare,
.wm-page__list--bare {
background: transparent;
border-inline-end: none;
display: grid;
grid-template-rows: minmax(0, 1fr);
}
.wm-page__sidebar--bare > *,
.wm-page__list--bare > * {
block-size: 100%;
min-block-size: 0;
}
.wm-page__aside--bare {
border-inline-start: none;
}
.wm-page__footer--bare {
border-block-start: none;
}
.wm-page__main {
grid-area: main;
min-inline-size: 0;
}
.wm-page__aside {
grid-area: aside;
min-inline-size: 0;
border-inline-start: var(--wm-border-width-hairline) solid var(--wm-separator);
}
.wm-page__footer {
grid-area: footer;
min-inline-size: 0;
border-block-start: var(--wm-border-width-hairline) solid var(--wm-separator);
}
.wm-page__bottom {
grid-area: bottom;
display: none;
min-inline-size: 0;
}
.wm-page__body {
padding: var(--wm-grid-margin);
display: flex;
flex-direction: column;
gap: var(--wm-grid-gutter);
min-inline-size: 0;
}
.wm-page__body--flush {
padding: 0;
}
.wm-page__body--tight {
padding: var(--wm-space-6);
}
.wm-page--sidebar {
grid-template-areas:
"sidebar header"
"sidebar main";
grid-template-columns: var(--wm-page-sidebar-width) minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr);
}
.wm-page--triple {
grid-template-areas:
"sidebar list header"
"sidebar list detail";
grid-template-columns:
var(--wm-page-sidebar-width)
var(--wm-page-list-width)
minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr);
}
.wm-page--reading {
grid-template-areas:
"header"
"main"
"footer";
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto 1fr auto;
}
.wm-page--aside {
grid-template-areas:
"header header"
"main   aside"
"footer footer";
grid-template-columns: minmax(0, 1fr) var(--wm-page-aside-width);
grid-template-rows: auto 1fr auto;
}
.wm-page--stacked {
grid-template-areas:
"header"
"main"
"footer";
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto 1fr auto;
}
.wm-page--focus {
grid-template-areas:
"header"
"main"
"footer";
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto 1fr auto;
justify-items: center;
text-align: initial;
}
.wm-page--focus .wm-page__header,
.wm-page--focus .wm-page__main,
.wm-page--focus .wm-page__footer {
inline-size: 100%;
}
.wm-page--focus .wm-page__main {
display: grid;
place-content: center;
justify-items: stretch;
padding-block: var(--wm-space-12);
}
.wm-page--split {
grid-template-areas: "main aside";
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
}
.wm-page--split-wide {
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}
.wm-page--split .wm-page__main {
display: grid;
align-content: center;
}
.wm-page--split .wm-page__aside {
border-inline-start: none;
display: grid;
place-items: center;
background: var(--wm-surface-secondary);
}
.wm-page__art {
inline-size: 100%;
block-size: 100%;
min-block-size: var(--wm-space-14);
display: grid;
place-items: center;
padding: var(--wm-grid-margin);
background: var(--wm-brand-gradient);
color: var(--wm-label-on-accent);
}
.wm-page__art-text {
max-inline-size: var(--wm-container-sm);
font-size: var(--wm-font-size-title2);
line-height: var(--wm-leading-title2);
font-weight: var(--wm-font-weight-semibold);
text-wrap: balance;
}
.wm-page--settings {
grid-template-areas:
"header  header"
"sidebar main"
"footer  footer";
grid-template-columns: var(--wm-page-settings-nav-width) minmax(0, 1fr);
grid-template-rows: auto 1fr auto;
--wm-page-settings-nav-width: 240px;
}
.wm-page--settings .wm-page__sidebar {
background: transparent;
border-inline-end: none;
position: sticky;
inset-block-start: 0;
align-self: start;
max-block-size: 100dvh;
overflow: auto;
}
.wm-page--workbench {
grid-template-areas:
"header header"
"main   detail"
"footer footer";
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr) auto;
}
.wm-page--workbench .wm-page__main {
inline-size: var(--wm-page-workbench-start, 50vw);
min-inline-size: var(--wm-page-list-width);
max-inline-size: 80vw;
resize: horizontal;
overflow: auto;
border-inline-end: var(--wm-border-width-hairline) solid var(--wm-separator);
}
@media (max-width: 899px) {
.wm-page--aside {
grid-template-areas:
"header"
"main"
"aside"
"footer";
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto auto auto;
}
.wm-page--aside .wm-page__aside {
border-inline-start: none;
border-block-start: var(--wm-border-width-hairline) solid var(--wm-separator);
}
.wm-page--triple {
grid-template-areas:
"list header"
"list detail"
"bottom bottom";
grid-template-columns: var(--wm-page-list-width) minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr) auto;
}
.wm-page--triple .wm-page__sidebar {
display: none;
}
.wm-page--triple .wm-page__bottom {
display: block;
}
}
@media (max-width: 679px) {
.wm-page--sidebar {
grid-template-areas:
"header"
"main"
"bottom";
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr) auto;
}
.wm-page--sidebar .wm-page__sidebar {
display: none;
}
.wm-page--sidebar .wm-page__bottom {
display: block;
}
.wm-page--triple {
grid-template-areas:
"header"
"list"
"detail"
"bottom";
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto minmax(0, 1fr) auto;
}
.wm-page--triple .wm-page__list {
border-inline-end: none;
border-block-end: var(--wm-border-width-hairline) solid var(--wm-separator);
}
.wm-page--split {
grid-template-areas:
"main"
"aside";
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr) auto;
}
.wm-page--split .wm-page__aside {
min-block-size: 0;
}
.wm-page--split .wm-page__art {
min-block-size: var(--wm-space-13);
}
.wm-page--split .wm-page__art-text {
font-size: var(--wm-font-size-headline);
line-height: var(--wm-leading-headline);
}
.wm-page--settings {
grid-template-areas:
"header"
"sidebar"
"main"
"footer";
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto 1fr auto;
}
.wm-page--settings .wm-page__sidebar {
position: static;
max-block-size: none;
border-block-end: var(--wm-border-width-hairline) solid var(--wm-separator);
}
.wm-page--workbench {
grid-template-areas:
"header"
"main"
"detail"
"footer";
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto minmax(0, 1fr) auto;
}
.wm-page--workbench .wm-page__main {
inline-size: auto;
min-inline-size: 0;
max-inline-size: none;
resize: none;
border-inline-end: none;
border-block-end: var(--wm-border-width-hairline) solid var(--wm-separator);
}
.wm-page--fill {
block-size: auto;
min-block-size: var(--wm-page-block-size, 100dvh);
overflow: visible;
}
}
.wm-page-stage {
border-radius: var(--wm-radius-panel);
overflow: clip;
isolation: isolate;
background: var(--wm-surface-base);
box-shadow:
0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
var(--wm-shadow-1);
}
.wm-page[hidden],
.wm-page__header[hidden],
.wm-page__sidebar[hidden],
.wm-page__list[hidden],
.wm-page__detail[hidden],
.wm-page__main[hidden],
.wm-page__aside[hidden],
.wm-page__footer[hidden],
.wm-page__bottom[hidden],
.wm-page__body[hidden] {
display: none;
}
}
@layer components {
.wm-player {
display: flex;
align-items: center;
gap: var(--wm-space-5);
padding: var(--wm-space-4) var(--wm-space-5);
border-radius: var(--wm-radius-xl);
background: var(--wm-surface-elevated);
box-shadow:
0 0 0 0.5px var(--wm-separator),
inset 0 1px 0 rgba(255, 255, 255, 0.5),
0 1px 2px rgba(0, 0, 0, 0.04),
0 6px 18px -8px rgba(0, 0, 0, 0.1);
max-width: 480px;
}
:root[data-theme="dark"] .wm-player {
box-shadow:
0 0 0 0.5px var(--wm-separator),
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 2px 6px rgba(0, 0, 0, 0.28),
0 10px 26px -10px rgba(0, 0, 0, 0.5);
}
.wm-player__play {
flex: none;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
background: var(--wm-accent-gradient);
color: #fff;
cursor: pointer;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 2px 6px -1px color-mix(in srgb, var(--wm-accent) 45%, transparent);
transition: transform var(--wm-duration-fast) var(--wm-ease-spring);
}
.wm-player__play:hover { filter: brightness(1.06); }
.wm-player__play:active { transform: scale(0.92); }
.wm-player__play .wm-icon { width: 15px; height: 15px; }
.wm-player__play .wm-icon--pause { display: none; }
.wm-player.is-playing .wm-player__play .wm-icon--play,
.wm-vplayer.is-playing .wm-player__play .wm-icon--play { display: none; }
.wm-player.is-playing .wm-player__play .wm-icon--pause,
.wm-vplayer.is-playing .wm-player__play .wm-icon--pause { display: inline-block; }
.wm-player--sm .wm-player__play { width: 28px; height: 28px; }
.wm-player--sm .wm-player__play .wm-icon { width: 12px; height: 12px; }
.wm-player__art {
flex: none;
width: 44px;
height: 44px;
border-radius: var(--wm-radius-md);
background: var(--wm-brand-gradient, linear-gradient(135deg, var(--wm-brand-blue), var(--wm-brand-cyan)));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 3px 8px -2px rgba(0, 68, 238, 0.35);
overflow: hidden;
}
.wm-player__art img { width: 100%; height: 100%; object-fit: cover; }
.wm-player__body { flex: 1; min-width: 0; }
.wm-player__title {
font-size: var(--wm-font-size-subheadline);
font-weight: var(--wm-font-weight-semibold);
letter-spacing: var(--wm-letter-spacing-tight);
color: var(--wm-label-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wm-player__subtitle {
font-size: var(--wm-font-size-caption);
color: var(--wm-label-tertiary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wm-player__timeline {
display: flex;
align-items: center;
gap: var(--wm-space-3);
margin-top: var(--wm-space-3);
}
.wm-player__time {
flex: none;
font-size: var(--wm-font-size-caption);
font-variant-numeric: tabular-nums;
color: var(--wm-label-tertiary);
min-width: 4ch;
}
.wm-player__time--end { text-align: end; }
.wm-scrubber {
position: relative;
flex: 1;
height: 14px;
display: flex;
align-items: center;
cursor: pointer;
border-radius: var(--wm-radius-pill);
}
.wm-scrubber__input {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
margin: 0;
border: none;
border-radius: var(--wm-radius-pill);
background:
linear-gradient(90deg, var(--wm-accent), var(--wm-brand-cyan) var(--wm-scrub, 0%),
var(--wm-fill-primary) var(--wm-scrub, 0%), var(--wm-fill-primary) 100%);
cursor: pointer;
}
.wm-scrubber__input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 11px;
height: 11px;
border: none;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
transform: scale(0);
transition: transform var(--wm-duration-fast) var(--wm-ease-spring);
}
.wm-scrubber:hover .wm-scrubber__input::-webkit-slider-thumb,
.wm-scrubber__input:focus-visible::-webkit-slider-thumb,
.wm-player.is-playing .wm-scrubber__input::-webkit-slider-thumb,
.wm-vplayer.is-playing .wm-scrubber__input::-webkit-slider-thumb {
transform: scale(1);
}
.wm-scrubber__input::-moz-range-thumb {
width: 11px;
height: 11px;
border: none;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
}
.wm-scrubber:has(.wm-scrubber__input:focus-visible) {
outline: var(--wm-focus-ring-width) solid var(--wm-accent);
outline-offset: var(--wm-focus-ring-offset);
box-shadow: 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
}
.wm-player--sm .wm-player__timeline {
margin-block-start: 0;
}
.wm-scrubber__track {
width: 100%;
height: 4px;
border-radius: var(--wm-radius-pill);
background: var(--wm-fill-primary);
overflow: hidden;
}
.wm-scrubber__fill {
height: 100%;
width: var(--wm-scrub, 0%);
border-radius: inherit;
background: linear-gradient(90deg, var(--wm-accent), var(--wm-brand-cyan));
}
.wm-scrubber__handle {
position: absolute;
left: var(--wm-scrub, 0%);
top: 50%;
transform: translate(-50%, -50%) scale(0);
width: 11px;
height: 11px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
transition: transform var(--wm-duration-fast) var(--wm-ease-spring);
pointer-events: none;
}
.wm-scrubber:hover .wm-scrubber__handle,
.wm-player.is-playing .wm-scrubber__handle { transform: translate(-50%, -50%) scale(1); }
.wm-player__actions {
flex: none;
display: flex;
align-items: center;
gap: var(--wm-space-2);
}
.wm-player__rate {
flex: none;
min-width: 34px;
height: 22px;
padding-inline: var(--wm-space-3);
border: none;
border-radius: var(--wm-radius-pill);
background: var(--wm-fill-secondary);
font-size: 10.5px;
font-weight: var(--wm-font-weight-semibold);
font-variant-numeric: tabular-nums;
color: var(--wm-label-secondary);
cursor: pointer;
transition: background var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-player__rate:hover { background: var(--wm-fill-primary); }
.wm-player__rate.is-active {
background: var(--wm-accent-fill);
color: var(--wm-accent);
}
.wm-player__action {
flex: none;
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
background: transparent;
color: var(--wm-label-secondary);
cursor: pointer;
transition: background var(--wm-duration-fast) var(--wm-ease-standard),
color var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-player__action:hover { background: var(--wm-fill-secondary); color: var(--wm-label-primary); }
.wm-player__action:active { transform: scale(0.9); }
.wm-player__action .wm-icon { width: 14px; height: 14px; }
.wm-player__action.is-busy .wm-icon { animation: wm-spin 0.9s linear infinite; }
.wm-player__volume {
display: flex;
align-items: center;
gap: var(--wm-space-2);
width: 74px;
}
.wm-player__volume .wm-scrubber { height: 12px; }
.wm-player--voice { max-width: 300px; border-radius: var(--wm-radius-pill); }
.wm-player--voice.wm-player--with-avatar { max-width: 340px; }
.wm-player__avatar {
flex: none;
width: var(--wm-icon-xl);
height: var(--wm-icon-xl);
border-radius: var(--wm-radius-pill);
object-fit: cover;
background: var(--wm-fill-secondary);
}
.wm-player__wave {
position: relative;
flex: 1;
display: flex;
align-items: center;
gap: 2px;
height: 26px;
cursor: pointer;
border-radius: var(--wm-radius-pill);
}
.wm-player__wave .wm-scrubber__input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
}
.wm-player__wave:has(.wm-scrubber__input:focus-visible) {
outline: var(--wm-focus-ring-width) solid var(--wm-accent);
outline-offset: var(--wm-focus-ring-offset);
box-shadow: 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
}
.wm-player__wave i {
flex: 1;
min-width: 2px;
border-radius: var(--wm-radius-pill);
background: var(--wm-fill-primary);
height: calc(var(--h, 40) * 1%);
transition: background var(--wm-duration-instant) linear;
}
.wm-player__wave i.is-played {
background: linear-gradient(180deg, var(--wm-accent-hover), var(--wm-accent));
}
.wm-vplayer {
position: relative;
min-inline-size: 280px;
max-width: 480px;
aspect-ratio: 16 / 9;
border-radius: var(--wm-radius-panel);
overflow: hidden;
background: var(--wm-media-canvas-bg);
box-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.1),
0 0 0 0.5px rgba(0, 0, 0, 0.4),
0 14px 36px -12px rgba(0, 0, 0, 0.45);
isolation: isolate;
}
.wm-vplayer__poster {
position: absolute;
inset: 0;
background: radial-gradient(90% 120% at 20% 0%, rgba(42, 194, 243, 0.35), transparent 60%),
linear-gradient(135deg, var(--wm-media-poster-start), var(--wm-media-poster-end));
}
.wm-vplayer__poster img, .wm-vplayer video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.wm-vplayer__duration {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
padding: 2px 7px;
border-radius: var(--wm-radius-pill);
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(8px);
color: #fff;
font-size: 10.5px;
font-variant-numeric: tabular-nums;
}
.wm-vplayer__bigplay {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
cursor: pointer;
}
.wm-vplayer__bigplay span {
width: 56px;
height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(16px) saturate(1.8);
-webkit-backdrop-filter: blur(16px) saturate(1.8);
box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.4), 0 8px 24px -6px rgba(0, 0, 0, 0.4);
color: #fff;
transition: transform var(--wm-duration-fast) var(--wm-ease-spring);
}
.wm-vplayer__bigplay:hover span { transform: scale(1.08); }
.wm-vplayer__bigplay:active span { transform: scale(0.95); }
.wm-vplayer__bigplay .wm-icon { width: 22px; height: 22px; margin-inline-start: 2px; }
.wm-vplayer.is-playing .wm-vplayer__bigplay { display: none; }
.wm-vplayer__controls {
position: absolute;
left: 10px;
right: 10px;
bottom: 10px;
z-index: 3;
display: flex;
align-items: center;
gap: var(--wm-space-4);
height: 40px;
padding-inline: var(--wm-space-4);
border-radius: var(--wm-radius-lg);
background: rgba(20, 22, 30, 0.55);
backdrop-filter: blur(20px) saturate(1.8);
-webkit-backdrop-filter: blur(20px) saturate(1.8);
box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08);
color: #fff;
color-scheme: dark;
}
.wm-vplayer__controls .wm-player__play {
width: 28px;
height: 28px;
background: rgba(255, 255, 255, 0.16);
box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.25);
}
.wm-vplayer__controls .wm-player__time { color: rgba(255, 255, 255, 0.65); }
.wm-vplayer__controls .wm-scrubber__track { background: rgba(255, 255, 255, 0.22); }
.wm-vplayer__controls .wm-scrubber__input {
background:
linear-gradient(90deg, var(--wm-accent), var(--wm-brand-cyan) var(--wm-scrub, 0%),
rgba(255, 255, 255, 0.22) var(--wm-scrub, 0%), rgba(255, 255, 255, 0.22) 100%);
}
.wm-vplayer__controls .wm-player__action { color: rgba(255, 255, 255, 0.8); }
.wm-vplayer__controls .wm-player__action:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.wm-vplayer__controls .wm-player__rate {
background: rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.85);
}
.wm-player[hidden],
.wm-player__play[hidden],
.wm-player__actions[hidden],
.wm-player__action[hidden],
.wm-player__rate[hidden],
.wm-player__timeline[hidden],
.wm-player__time[hidden],
.wm-player__volume[hidden],
.wm-player__wave[hidden],
.wm-player__art[hidden],
.wm-scrubber[hidden],
.wm-scrubber__input[hidden],
.wm-vplayer[hidden],
.wm-vplayer__bigplay[hidden],
.wm-vplayer__controls[hidden],
.wm-vplayer__duration[hidden],
.wm-player.is-playing .wm-player__play .wm-icon--pause[hidden],
.wm-vplayer.is-playing .wm-player__play .wm-icon--pause[hidden] {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.wm-player__play,
.wm-scrubber__handle,
.wm-scrubber__input::-webkit-slider-thumb,
.wm-vplayer__bigplay span {
transition: none;
}
.wm-player__action.is-busy .wm-icon { animation: none; }
}
}
@layer components {
.wm-agent-card {
--wm-agent-card-shadow:
0 0 0 0.5px rgba(0, 0, 0, 0.06),
0 1px 2px rgba(0, 0, 0, 0.04),
0 6px 18px -8px rgba(0, 0, 0, 0.1);
--wm-agent-card-shadow-hover:
0 0 0 0.5px rgba(0, 0, 0, 0.07),
0 2px 5px rgba(0, 0, 0, 0.05),
0 12px 28px -10px rgba(0, 0, 0, 0.14);
display: flex;
align-items: center;
gap: var(--wm-space-5);
padding: var(--wm-space-6) var(--wm-space-7);
border-radius: var(--wm-radius-xl);
background: var(--wm-surface-elevated);
box-shadow: var(--wm-agent-card-shadow);
transition:
box-shadow var(--wm-duration-normal) var(--wm-ease-emphasized),
transform var(--wm-duration-normal) var(--wm-ease-emphasized);
}
.wm-agent-card:hover {
box-shadow: var(--wm-agent-card-shadow-hover);
transform: translateY(-1px);
}
.wm-agent-card__avatar {
flex: none;
width: 36px;
height: 36px;
border-radius: var(--wm-radius-lg);
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(
135deg,
var(--wm-brand-blue) 0%,
var(--wm-brand-cyan) 100%
);
color: #ffffff;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 0 0 0.5px rgba(0, 68, 238, 0.12),
0 3px 8px -2px rgba(0, 68, 238, 0.35);
}
.wm-agent-card__avatar .wm-icon {
width: var(--wm-icon-lg);
height: var(--wm-icon-lg);
}
.wm-agent-card__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
.wm-agent-card__body {
flex: 1 1 auto;
min-width: 0;
}
.wm-agent-card__name {
font-size: var(--wm-font-size-body);
font-weight: var(--wm-font-weight-semibold);
letter-spacing: var(--wm-letter-spacing-tight);
color: var(--wm-label-primary);
}
.wm-agent-card__desc {
font-size: var(--wm-font-size-caption);
color: var(--wm-label-tertiary);
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wm-agent-card__trailing {
flex: none;
display: flex;
align-items: center;
gap: var(--wm-space-3);
}
.wm-agent-thinking {
display: inline-flex;
align-items: center;
gap: var(--wm-space-3);
font-size: var(--wm-font-size-subheadline);
color: var(--wm-label-secondary);
}
.wm-agent-thinking .wm-icon {
color: var(--wm-accent);
animation: wm-thinking-pulse 1.6s ease-in-out infinite;
}
@keyframes wm-thinking-pulse {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.35;
transform: scale(0.92);
}
}
.wm-agent-steps {
display: flex;
flex-direction: column;
}
.wm-agent-step {
display: flex;
gap: var(--wm-space-5);
position: relative;
padding-block: var(--wm-space-4);
padding-inline-start: var(--wm-space-1);
}
.wm-agent-step::before {
content: "";
position: absolute;
left: 12px;
top: 30px;
bottom: -2px;
width: var(--wm-border-width-hairline);
background: var(--wm-separator);
}
.wm-agent-step:last-child::before {
display: none;
}
.wm-agent-step__marker {
flex: none;
width: 24px;
height: 24px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--wm-surface-elevated);
color: var(--wm-label-tertiary);
box-shadow:
0 0 0 0.5px var(--wm-separator),
0 1px 2px rgba(0, 0, 0, 0.05);
z-index: 1;
transition:
background var(--wm-duration-normal) var(--wm-ease-standard),
color var(--wm-duration-normal) var(--wm-ease-standard),
box-shadow var(--wm-duration-normal) var(--wm-ease-standard);
}
.wm-agent-step__marker .wm-icon {
width: 12px;
height: 12px;
}
.wm-agent-step--done .wm-agent-step__marker {
background: var(--wm-success-fill);
color: var(--wm-success);
box-shadow: 0 0 0 0.5px rgba(26, 158, 76, 0.22);
}
.wm-agent-step--running .wm-agent-step__marker {
background: var(--wm-accent-fill);
color: var(--wm-accent);
box-shadow:
0 0 0 0.5px var(--wm-accent-fill-strong),
0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill),
0 0 14px -2px var(--wm-accent-fill-strong);
animation: wm-step-glow 2s var(--wm-ease-standard) infinite;
}
@keyframes wm-step-glow {
0%,
100% {
box-shadow:
0 0 0 0.5px var(--wm-accent-fill-strong),
0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill),
0 0 10px -2px var(--wm-accent-fill-strong);
}
50% {
box-shadow:
0 0 0 0.5px var(--wm-accent-fill-strong),
0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill),
0 0 18px -2px var(--wm-accent-fill-strong);
}
}
.wm-agent-step--running .wm-agent-step__marker .wm-icon {
animation: wm-spin 1s linear infinite;
}
.wm-agent-step--running .wm-agent-step__title {
color: var(--wm-accent);
font-weight: var(--wm-font-weight-medium);
}
.wm-agent-step--error .wm-agent-step__marker {
background: var(--wm-error-fill);
color: var(--wm-error);
box-shadow: 0 0 0 0.5px rgba(217, 54, 43, 0.25);
}
.wm-agent-step__body {
flex: 1 1 auto;
min-width: 0;
padding-top: 3px;
}
.wm-agent-step__title {
font-size: var(--wm-font-size-subheadline);
color: var(--wm-label-primary);
}
.wm-agent-step__title code {
font-family: var(--wm-font-family-mono);
font-size: 11px;
background: var(--wm-fill-secondary);
box-shadow: inset 0 0 0 0.5px var(--wm-separator);
padding: 1px 5px;
border-radius: var(--wm-radius-xs);
}
.wm-agent-step__detail {
font-size: var(--wm-font-size-caption);
color: var(--wm-label-tertiary);
font-variant-numeric: tabular-nums;
margin-top: 1px;
}
.wm-agent-step__time {
flex: none;
padding-top: 3px;
font-size: var(--wm-font-size-caption);
color: var(--wm-label-quaternary);
font-variant-numeric: tabular-nums;
}
.wm-agent-permission {
display: flex;
flex-direction: column;
gap: var(--wm-space-5);
padding: var(--wm-space-7);
border-radius: var(--wm-radius-xl);
background: linear-gradient(
180deg,
var(--wm-warning-fill) 0%,
transparent 160%
);
background-color: var(--wm-surface-elevated);
box-shadow:
inset 0 0 0 0.5px rgba(183, 121, 27, 0.28),
0 1px 3px rgba(0, 0, 0, 0.04),
0 8px 22px -10px rgba(183, 121, 27, 0.2);
}
.wm-agent-permission__header {
display: flex;
align-items: center;
gap: var(--wm-space-3);
font-size: var(--wm-font-size-subheadline);
font-weight: var(--wm-font-weight-semibold);
letter-spacing: var(--wm-letter-spacing-tight);
color: var(--wm-warning);
}
.wm-agent-permission__message {
font-size: var(--wm-font-size-subheadline);
line-height: var(--wm-line-height-relaxed);
color: var(--wm-label-primary);
}
.wm-agent-permission__message code {
font-family: var(--wm-font-family-mono);
font-size: 11px;
background: var(--wm-fill-secondary);
box-shadow: inset 0 0 0 0.5px var(--wm-separator);
padding: 1px 5px;
border-radius: var(--wm-radius-xs);
}
.wm-agent-permission__actions {
display: flex;
gap: var(--wm-space-3);
}
.wm-context-meter {
display: flex;
flex-direction: column;
gap: var(--wm-space-3);
}
.wm-context-meter__header {
display: flex;
justify-content: space-between;
font-size: var(--wm-font-size-caption);
color: var(--wm-label-tertiary);
}
.wm-context-meter__value {
font-variant-numeric: tabular-nums;
font-weight: var(--wm-font-weight-medium);
color: var(--wm-label-secondary);
}
.wm-context-meter__track {
height: 4px;
border-radius: var(--wm-radius-pill);
background: var(--wm-fill-primary);
box-shadow: inset 0 0.5px 1px rgba(0, 0, 0, 0.06);
overflow: hidden;
}
.wm-context-meter__fill {
height: 100%;
border-radius: inherit;
background: linear-gradient(
90deg,
var(--wm-accent) 0%,
var(--wm-accent-hover) 100%
);
box-shadow: 0 0 6px -1px var(--wm-accent-fill-strong);
transition: width var(--wm-duration-slow) var(--wm-ease-emphasized);
}
.wm-context-meter--warning .wm-context-meter__fill {
background: var(--wm-warning);
box-shadow: 0 0 6px -1px var(--wm-warning-fill);
}
.wm-context-meter--critical .wm-context-meter__fill {
background: var(--wm-error);
box-shadow: 0 0 6px -1px var(--wm-error-fill);
}
.wm-model-selector {
display: inline-flex;
align-items: center;
gap: var(--wm-space-3);
height: var(--wm-control-height-sm);
padding-inline: var(--wm-space-5);
border-radius: var(--wm-radius-pill);
background: var(--wm-surface-elevated);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.15),
0 0 0 0.5px var(--wm-separator),
0 1px 2px rgba(0, 0, 0, 0.05);
font-size: var(--wm-font-size-caption);
font-weight: var(--wm-font-weight-medium);
color: var(--wm-label-secondary);
border: none;
cursor: pointer;
transition:
box-shadow var(--wm-duration-fast) var(--wm-ease-standard),
color var(--wm-duration-fast) var(--wm-ease-standard),
transform var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-model-selector:hover {
color: var(--wm-label-primary);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.15),
0 0 0 0.5px var(--wm-separator),
0 2px 6px rgba(0, 0, 0, 0.08);
}
.wm-model-selector:active {
transform: scale(var(--wm-scale-pressed, 0.98));
box-shadow:
inset 0 1px 2px rgba(0, 0, 0, 0.06),
0 0 0 0.5px var(--wm-separator);
}
.wm-model-selector .wm-icon {
color: var(--wm-accent);
}
.wm-model-selector .wm-icon:last-child {
color: var(--wm-label-quaternary);
}
:root[data-theme="dark"] .wm-agent-card {
--wm-agent-card-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.06),
0 0 0 0.5px rgba(0, 0, 0, 0.4),
0 2px 5px rgba(0, 0, 0, 0.28),
0 10px 26px -10px rgba(0, 0, 0, 0.5);
--wm-agent-card-shadow-hover:
inset 0 0.5px 0 rgba(255, 255, 255, 0.08),
0 0 0 0.5px rgba(0, 0, 0, 0.45),
0 3px 8px rgba(0, 0, 0, 0.32),
0 16px 36px -12px rgba(0, 0, 0, 0.58);
}
:root[data-theme="dark"] .wm-agent-step__marker {
box-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.08),
0 0 0 0.5px var(--wm-separator),
0 1px 2px rgba(0, 0, 0, 0.3);
}
:root[data-theme="dark"] .wm-model-selector {
box-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.09),
0 0 0 0.5px var(--wm-separator),
0 1px 2px rgba(0, 0, 0, 0.3);
}
:root[data-theme="dark"] .wm-agent-permission {
box-shadow:
inset 0 0 0 0.5px rgba(226, 165, 61, 0.3),
0 2px 6px rgba(0, 0, 0, 0.3),
0 10px 26px -12px rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .wm-agent-card {
--wm-agent-card-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.06),
0 0 0 0.5px rgba(0, 0, 0, 0.4),
0 2px 5px rgba(0, 0, 0, 0.28),
0 10px 26px -10px rgba(0, 0, 0, 0.5);
--wm-agent-card-shadow-hover:
inset 0 0.5px 0 rgba(255, 255, 255, 0.08),
0 0 0 0.5px rgba(0, 0, 0, 0.45),
0 3px 8px rgba(0, 0, 0, 0.32),
0 16px 36px -12px rgba(0, 0, 0, 0.58);
}
:root:not([data-theme="light"]) .wm-agent-step__marker {
box-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.08),
0 0 0 0.5px var(--wm-separator),
0 1px 2px rgba(0, 0, 0, 0.3);
}
:root:not([data-theme="light"]) .wm-model-selector {
box-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.09),
0 0 0 0.5px var(--wm-separator),
0 1px 2px rgba(0, 0, 0, 0.3);
}
:root:not([data-theme="light"]) .wm-agent-permission {
box-shadow:
inset 0 0 0 0.5px rgba(226, 165, 61, 0.3),
0 2px 6px rgba(0, 0, 0, 0.3),
0 10px 26px -12px rgba(0, 0, 0, 0.5);
}
}
.wm-agent-card[hidden],
.wm-agent-card__avatar[hidden],
.wm-agent-card__trailing[hidden],
.wm-agent-thinking[hidden],
.wm-agent-steps[hidden],
.wm-agent-step[hidden],
.wm-agent-step__marker[hidden],
.wm-agent-permission[hidden],
.wm-agent-permission__header[hidden],
.wm-agent-permission__actions[hidden],
.wm-context-meter[hidden],
.wm-context-meter__header[hidden],
.wm-model-selector[hidden] {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.wm-agent-thinking .wm-icon,
.wm-agent-step--running .wm-agent-step__marker,
.wm-agent-step--running .wm-agent-step__marker .wm-icon {
animation: none;
}
.wm-agent-card,
.wm-agent-step__marker,
.wm-model-selector {
transition: none;
}
.wm-agent-card:hover {
transform: none;
}
}
}
@layer components {
.wm-grid {
display: grid;
gap: var(--wm-grid-gap, var(--wm-space-7));
}
.wm-grid__item {
display: flex;
flex-direction: column;
gap: var(--wm-space-4);
min-width: 0;
background: var(--wm-surface-elevated);
border-radius: var(--wm-radius-xl);
padding: var(--wm-space-8);
box-shadow:
0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
var(--wm-shadow-1),
var(--wm-shadow-inner-highlight);
}
.wm-grid__item-title {
font-size: var(--wm-font-size-headline);
line-height: var(--wm-leading-headline);
letter-spacing: var(--wm-tracking-headline);
font-weight: var(--wm-font-weight-semibold);
color: var(--wm-label-primary);
}
.wm-grid__item-text {
font-size: var(--wm-font-size-footnote);
line-height: var(--wm-line-height-relaxed);
color: var(--wm-label-secondary);
}
.wm-grid__media {
aspect-ratio: var(--wm-grid-media-ratio, var(--wm-ratio-wide));
border-radius: var(--wm-radius-md);
overflow: hidden;
background: var(--wm-fill-secondary);
}
.wm-grid__media > img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
a.wm-grid__item {
text-decoration: none;
color: inherit;
cursor: pointer;
transition:
transform var(--wm-duration-fast) var(--wm-ease-emphasized),
box-shadow var(--wm-duration-fast) var(--wm-ease-emphasized);
}
a.wm-grid__item:hover {
transform: translateY(var(--wm-scale-hover-raise));
box-shadow:
0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
var(--wm-shadow-2),
var(--wm-shadow-3),
var(--wm-shadow-inner-highlight);
}
a.wm-grid__item:active { transform: scale(var(--wm-scale-pressed)); }
a.wm-grid__item:focus-visible {
outline: var(--wm-focus-ring-width) solid var(--wm-accent);
outline-offset: var(--wm-focus-ring-offset);
box-shadow: 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
}
.wm-grid__item--wide { grid-column: span 2; }
.wm-grid__item--tall { grid-row: span 2; }
.wm-grid__item--hero { grid-column: span 2; grid-row: span 2; }
.wm-grid--auto-fit {
grid-template-columns: repeat(
auto-fit,
minmax(min(var(--wm-grid-min, var(--wm-grid-min-col)), 100%), 1fr)
);
}
.wm-grid--auto-fit-sm { --wm-grid-min: var(--wm-grid-min-col-sm); }
.wm-grid--auto-fit-lg { --wm-grid-min: var(--wm-grid-min-col-lg); }
.wm-grid--masonry {
display: block;
columns: var(--wm-grid-cols, 3) var(--wm-grid-min, var(--wm-grid-min-col));
column-gap: var(--wm-grid-gap, var(--wm-space-7));
}
.wm-grid--masonry > * {
break-inside: avoid;
margin-bottom: var(--wm-grid-gap, var(--wm-space-7));
}
@supports (grid-template-rows: masonry) {
.wm-grid--masonry {
display: grid;
grid-template-columns: repeat(
auto-fill,
minmax(min(var(--wm-grid-min, var(--wm-grid-min-col)), 100%), 1fr)
);
grid-template-rows: masonry;
}
.wm-grid--masonry > * { margin-bottom: 0; }
}
.wm-grid--asymmetric {
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.wm-grid--asymmetric-alt {
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
@media (max-width: 679px) {
.wm-grid--asymmetric,
.wm-grid--asymmetric-alt {
grid-template-columns: minmax(0, 1fr);
}
}
.wm-grid--featured {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-rows: minmax(var(--wm-grid-row-unit), auto);
grid-auto-flow: dense;
}
.wm-grid--featured > :first-child {
grid-column: span 2;
grid-row: span 2;
}
@media (max-width: 899px) {
.wm-grid--featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
.wm-grid--featured { grid-template-columns: minmax(0, 1fr); }
.wm-grid--featured > :first-child,
.wm-grid--featured .wm-grid__item--wide,
.wm-grid--featured .wm-grid__item--hero {
grid-column: auto;
grid-row: auto;
}
}
.wm-grid-viewport {
container: wm-grid / inline-size;
}
.wm-grid--cq {
grid-template-columns: minmax(0, 1fr);
}
@container wm-grid (min-width: 420px) {
.wm-grid--cq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container wm-grid (min-width: 680px) {
.wm-grid--cq { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container wm-grid (min-width: 940px) {
.wm-grid--cq { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.wm-grid--dense { --wm-grid-gap: var(--wm-space-5); }
.wm-grid--loose { --wm-grid-gap: var(--wm-space-10); }
.wm-grid--gutter { --wm-grid-gap: var(--wm-grid-gutter); }
.wm-grid--rows {
grid-template-columns: minmax(0, 1fr);
--wm-grid-rows-media: 160px;
}
.wm-grid--rows > .wm-grid__item {
display: grid;
grid-template-columns: var(--wm-grid-rows-media) minmax(0, 1fr);
grid-template-areas:
"media title"
"media text"
"media body";
align-content: start;
column-gap: var(--wm-space-8);
row-gap: var(--wm-space-3);
}
.wm-grid--rows > .wm-grid__item > .wm-grid__media {
grid-area: media;
align-self: start;
}
.wm-grid--rows > .wm-grid__item > .wm-grid__item-title { grid-area: title; }
.wm-grid--rows > .wm-grid__item > .wm-grid__item-text { grid-area: text; }
.wm-grid__item-body {
grid-area: body;
min-inline-size: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--wm-space-4);
}
.wm-grid--rows > .wm-grid__item:not(:has(> .wm-grid__media)) {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"title"
"text"
"body";
}
@media (max-width: 559px) {
.wm-grid--rows > .wm-grid__item {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"media"
"title"
"text"
"body";
}
}
.wm-grid--mosaic {
grid-template-columns: repeat(
auto-fit,
minmax(min(var(--wm-grid-min, var(--wm-grid-min-col)), 100%), 1fr)
);
grid-auto-rows: minmax(var(--wm-grid-row-unit), auto);
grid-auto-flow: dense;
}
@media (max-width: 559px) {
.wm-grid--mosaic {
grid-template-columns: minmax(0, 1fr);
grid-auto-rows: auto;
}
.wm-grid--mosaic .wm-grid__item--wide,
.wm-grid--mosaic .wm-grid__item--tall,
.wm-grid--mosaic .wm-grid__item--hero {
grid-column: auto;
grid-row: auto;
}
}
.wm-grid__tile {
position: relative;
margin: 0;
border-radius: var(--wm-radius-lg);
overflow: hidden;
background: var(--wm-fill-secondary);
box-shadow: 0 0 0 var(--wm-border-width-hairline) var(--wm-separator);
}
.wm-grid__tile > img {
display: block;
width: 100%;
height: auto;
}
.wm-grid__tile-caption {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
padding: var(--wm-space-8) var(--wm-space-6) var(--wm-space-4);
font-size: var(--wm-font-size-footnote);
line-height: var(--wm-leading-footnote);
font-weight: var(--wm-font-weight-medium);
color: #ffffff;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.6),
rgba(0, 0, 0, 0)
);
}
a.wm-grid__tile {
display: block;
cursor: pointer;
transition: box-shadow var(--wm-duration-fast) var(--wm-ease-emphasized);
}
a.wm-grid__tile:focus-visible {
outline: var(--wm-focus-ring-width) solid var(--wm-accent);
outline-offset: var(--wm-focus-ring-offset);
box-shadow: 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
}
@media (prefers-reduced-motion: reduce) {
a.wm-grid__item { transition: none; }
a.wm-grid__item:hover,
a.wm-grid__item:active { transform: none; }
a.wm-grid__tile { transition: none; }
}
.wm-grid[hidden],
.wm-grid--masonry[hidden],
.wm-grid__item[hidden],
.wm-grid__item-body[hidden],
.wm-grid__media > img[hidden],
.wm-grid__tile[hidden],
.wm-grid__tile > img[hidden],
a.wm-grid__tile[hidden] {
display: none;
}
}
@layer components {
.wm-title {
display: flex;
align-items: flex-start;
gap: var(--wm-space-8);
}
.wm-title__main {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--wm-space-2);
}
.wm-title__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--wm-space-3);
font-size: var(--wm-font-size-subheadline);
line-height: var(--wm-leading-subheadline);
letter-spacing: var(--wm-letter-spacing-wide);
font-weight: var(--wm-font-weight-semibold);
text-transform: uppercase;
color: var(--wm-accent-text);
}
.wm-title__eyebrow-icon {
flex: none;
display: inline-flex;
}
.wm-title__heading {
display: flex;
align-items: center;
gap: var(--wm-space-4);
margin: 0;
font-size: var(--wm-font-size-title3);
line-height: var(--wm-leading-title3);
letter-spacing: var(--wm-tracking-title3);
font-weight: var(--wm-font-weight-semibold);
color: var(--wm-label-primary);
min-width: 0;
}
.wm-title__heading-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wm-title--page .wm-title__heading {
font-size: var(--wm-font-size-large-title);
line-height: var(--wm-leading-large-title);
letter-spacing: var(--wm-tracking-large-title);
font-weight: var(--wm-font-weight-bold);
}
.wm-title--group .wm-title__heading {
font-size: var(--wm-font-size-title2);
line-height: var(--wm-leading-title2);
letter-spacing: var(--wm-tracking-title2);
}
.wm-title__counter {
flex: none;
min-width: var(--wm-control-height-xs);
height: var(--wm-control-height-xs);
padding-inline: var(--wm-space-4);
display: inline-grid;
place-items: center;
border-radius: var(--wm-radius-pill);
background: var(--wm-fill-secondary);
color: var(--wm-label-secondary);
font-size: var(--wm-font-size-caption);
line-height: 1;
letter-spacing: var(--wm-tracking-caption);
font-weight: var(--wm-font-weight-semibold);
}
.wm-title__counter--accent {
background: var(--wm-accent-fill);
color: var(--wm-accent-text);
}
.wm-title__desc {
margin: 0;
font-size: var(--wm-font-size-body);
line-height: var(--wm-line-height-relaxed);
letter-spacing: var(--wm-tracking-body);
color: var(--wm-label-secondary);
max-width: 65ch;
}
.wm-title__actions {
flex: none;
margin-inline-start: auto;
display: flex;
align-items: center;
gap: var(--wm-space-3);
padding-top: var(--wm-space-1);
}
.wm-title--page .wm-title__actions {
padding-top: var(--wm-space-3);
}
.wm-title--divided {
padding-bottom: var(--wm-space-6);
border-bottom: var(--wm-border-width-hairline) solid
color-mix(in srgb, var(--wm-separator) 85%, transparent);
}
}
@layer components {
.wm-segmented {
position: relative;
display: inline-flex;
align-items: stretch;
background: var(--wm-fill-secondary);
background: light-dark(rgba(0, 0, 0, 0.055), rgba(255, 255, 255, 0.07));
box-shadow: inset 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.045), rgba(255, 255, 255, 0.05)),
inset 0 1px 1.5px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.3));
border-radius: var(--wm-radius-md);
padding: 2px;
gap: 1px;
isolation: isolate;
}
.wm-segmented__indicator {
position: absolute;
top: 2px;
bottom: 2px;
left: 2px;
width: var(--wm-seg-width, 0px);
transform: translateX(var(--wm-seg-offset, 0px));
background: var(--wm-control-face-top);
background: linear-gradient(180deg, var(--wm-control-face-top), var(--wm-control-face-bottom));
border-radius: var(--wm-radius-sm);
box-shadow: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.35)),
inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.12)),
0 1px 2px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.4)),
0 3px 8px -2px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.38));
transition: transform var(--wm-duration-normal) var(--wm-ease-emphasized),
width var(--wm-duration-normal) var(--wm-ease-emphasized);
z-index: 0;
}
.wm-segmented__item {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--wm-space-2);
min-width: 64px;
height: var(--wm-control-height-sm);
padding-inline: var(--wm-space-6);
border-radius: var(--wm-radius-sm);
font-size: var(--wm-font-size-subheadline);
font-weight: var(--wm-font-weight-medium);
letter-spacing: var(--wm-letter-spacing-tight);
color: var(--wm-label-secondary);
background: transparent;
border: none;
cursor: pointer;
transition: color var(--wm-duration-fast) var(--wm-ease-standard),
transform var(--wm-duration-fast) var(--wm-ease-emphasized);
}
.wm-segmented__item:hover:not([aria-checked="true"]):not(:disabled) {
color: var(--wm-label-primary);
}
.wm-segmented__item:active:not(:disabled) {
transform: scale(0.96);
}
.wm-segmented__item[aria-checked="true"] {
color: var(--wm-label-primary);
}
.wm-segmented__item:focus-visible {
outline: 2px solid var(--wm-accent);
outline-offset: var(--wm-focus-ring-offset);
box-shadow: 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
}
.wm-segmented__item:disabled {
color: var(--wm-label-quaternary);
cursor: not-allowed;
}
.wm-segmented--block {
display: flex;
}
.wm-segmented--block .wm-segmented__item {
flex: 1 1 0;
}
.wm-segmented--small .wm-segmented__item {
height: 22px;
padding-inline: var(--wm-space-4);
font-size: var(--wm-font-size-caption);
}
@media (prefers-reduced-motion: reduce) {
.wm-segmented__indicator,
.wm-segmented__item {
transition: none;
}
.wm-segmented__item:active:not(:disabled) {
transform: none;
}
}
}
@layer components {
.wm-radio {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--wm-space-5);
cursor: pointer;
}
.wm-radio__input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
margin: 0;
}
.wm-radio__dot {
--_shadow: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.22), rgba(255, 255, 255, 0.22)),
inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.07)),
0 1px 1.5px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.3));
flex: none;
width: 16px;
height: 16px;
border-radius: 50%;
border: none;
background: var(--wm-control-face-top);
background: linear-gradient(180deg, var(--wm-control-face-top), var(--wm-control-face-bottom));
box-shadow: var(--_shadow);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background var(--wm-duration-fast) var(--wm-ease-standard),
box-shadow var(--wm-duration-fast) var(--wm-ease-standard),
transform var(--wm-duration-fast) var(--wm-ease-emphasized);
}
.wm-radio:hover .wm-radio__dot {
--_shadow: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.3)),
inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.09)),
0 1px 2.5px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.34));
}
.wm-radio:active .wm-radio__dot {
transform: scale(0.92);
}
.wm-radio__dot::after {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--wm-label-on-accent);
box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.25);
opacity: 0;
transform: scale(0.3);
transition: opacity var(--wm-duration-fast) var(--wm-ease-standard),
transform var(--wm-duration-normal) var(--wm-ease-spring);
}
.wm-radio__input:checked + .wm-radio__dot {
background: var(--wm-accent);
background: linear-gradient(
180deg,
color-mix(in srgb, var(--wm-accent), #ffffff 16%),
var(--wm-accent)
);
--_shadow: 0 0 0 0.5px color-mix(in srgb, var(--wm-accent), #000000 18%),
inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 1px 2px color-mix(in srgb, var(--wm-accent) 35%, transparent);
}
.wm-radio__input:checked + .wm-radio__dot::after {
opacity: 1;
transform: scale(1);
}
.wm-radio__input:focus-visible + .wm-radio__dot {
outline: 2px solid var(--wm-accent);
outline-offset: var(--wm-focus-ring-offset);
box-shadow: var(--_shadow), 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
}
.wm-radio__input:disabled + .wm-radio__dot {
background: var(--wm-fill-quaternary);
--_shadow: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.08));
}
.wm-radio__input:disabled:checked + .wm-radio__dot {
background: color-mix(in srgb, var(--wm-accent) 40%, var(--wm-surface-primary));
}
.wm-radio:has(.wm-radio__input:disabled) {
cursor: not-allowed;
}
.wm-radio:has(.wm-radio__input:disabled) .wm-radio__label {
color: var(--wm-label-secondary);
}
.wm-radio:has(.wm-radio__input:disabled) .wm-radio__dot {
transform: none;
}
.wm-radio__label {
font-size: var(--wm-font-size-body);
color: var(--wm-label-primary);
}
.wm-radio-group > legend {
float: none;
padding: 0;
margin-bottom: var(--wm-space-6);
font-size: var(--wm-font-size-subheadline);
font-weight: var(--wm-font-weight-medium);
letter-spacing: var(--wm-letter-spacing-tight);
color: var(--wm-label-primary);
}
.wm-radio-group {
display: flex;
flex-direction: column;
gap: var(--wm-space-6);
}
.wm-radio-group--horizontal {
flex-direction: row;
flex-wrap: wrap;
gap: var(--wm-space-8);
}
.wm-radio-group__help {
font-size: var(--wm-font-size-caption);
color: var(--wm-label-secondary);
line-height: var(--wm-line-height-normal);
margin-top: var(--wm-space-4);
}
@media (prefers-reduced-motion: reduce) {
.wm-radio__dot,
.wm-radio__dot::after {
transition: none;
}
.wm-radio:active .wm-radio__dot {
transform: none;
}
}
}
@layer components {
.wm-toggle {
position: relative;
display: inline-flex;
align-items: center;
flex: none;
}
.wm-toggle__input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
margin: 0;
}
.wm-toggle__track {
--_track-shadow: inset 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.07)),
inset 0 1px 2px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.4));
display: inline-flex;
align-items: center;
width: 38px;
height: 22px;
border-radius: var(--wm-radius-pill);
background: var(--wm-fill-primary);
background: linear-gradient(
180deg,
light-dark(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0.08)),
light-dark(rgba(0, 0, 0, 0.09), rgba(255, 255, 255, 0.12))
);
box-shadow: var(--_track-shadow);
padding: 2px;
box-sizing: border-box;
cursor: pointer;
transition: background var(--wm-duration-normal) var(--wm-ease-standard),
box-shadow var(--wm-duration-normal) var(--wm-ease-standard);
}
.wm-toggle__thumb {
width: 18px;
height: 18px;
border-radius: var(--wm-radius-pill);
background: #ffffff;
background: linear-gradient(180deg, var(--wm-control-thumb-top), var(--wm-control-thumb-bottom));
box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06),
0 1px 2px rgba(0, 0, 0, 0.24),
0 2px 6px -1px rgba(0, 0, 0, 0.14);
transform: translateX(0);
transition: transform var(--wm-duration-normal) var(--wm-ease-spring),
width var(--wm-duration-fast) var(--wm-ease-emphasized);
}
.wm-toggle__input:checked + .wm-toggle__track {
background: var(--wm-accent);
background: linear-gradient(
180deg,
color-mix(in srgb, var(--wm-accent), #ffffff 16%),
var(--wm-accent)
);
--_track-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--wm-accent), #000000 16%),
inset 0 1px 2px color-mix(in srgb, var(--wm-accent), #000000 22%);
}
.wm-toggle__input:checked + .wm-toggle__track .wm-toggle__thumb {
transform: translateX(16px);
}
.wm-toggle__input:active:not(:disabled) + .wm-toggle__track .wm-toggle__thumb {
width: 22px;
}
.wm-toggle__input:active:not(:disabled):checked + .wm-toggle__track .wm-toggle__thumb {
transform: translateX(12px);
}
.wm-toggle__input:focus-visible + .wm-toggle__track {
outline: 2px solid var(--wm-accent);
outline-offset: var(--wm-focus-ring-offset);
box-shadow: var(--_track-shadow), 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
}
.wm-toggle__input:disabled + .wm-toggle__track {
cursor: not-allowed;
background: var(--wm-fill-tertiary);
--_track-shadow: inset 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.05));
}
.wm-toggle__input:disabled + .wm-toggle__track .wm-toggle__thumb {
background: var(--wm-control-thumb-disabled);
box-shadow: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.2)),
0 1px 1.5px rgba(0, 0, 0, 0.1);
}
.wm-toggle__input:disabled:checked + .wm-toggle__track {
background: color-mix(in srgb, var(--wm-accent) 42%, var(--wm-surface-primary));
}
.wm-toggle--small .wm-toggle__track {
width: 30px;
height: 18px;
}
.wm-toggle--small .wm-toggle__thumb {
width: 14px;
height: 14px;
}
.wm-toggle--small .wm-toggle__input:checked + .wm-toggle__track .wm-toggle__thumb {
transform: translateX(12px);
}
.wm-toggle--small .wm-toggle__input:active:not(:disabled) + .wm-toggle__track .wm-toggle__thumb {
width: 16px;
}
.wm-toggle--small
.wm-toggle__input:active:not(:disabled):checked
+ .wm-toggle__track
.wm-toggle__thumb {
transform: translateX(10px);
}
.wm-toggle-field {
display: inline-flex;
align-items: center;
gap: var(--wm-space-5);
}
.wm-toggle-field__label {
font-size: var(--wm-font-size-body);
color: var(--wm-label-primary);
}
.wm-toggle-field:has(.wm-toggle__input:disabled) .wm-toggle-field__label {
color: var(--wm-label-tertiary);
}
@media (prefers-reduced-motion: reduce) {
.wm-toggle__track,
.wm-toggle__thumb {
transition: none;
}
}
}
@layer components {
.wm-progress {
width: 100%;
height: 6px;
border-radius: var(--wm-radius-pill);
background: var(--wm-fill-primary);
box-shadow: inset 0 0.5px 1.5px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.wm-progress__fill {
height: 100%;
background: linear-gradient(
90deg,
var(--wm-accent) 0%,
color-mix(in srgb, var(--wm-accent) 55%, var(--wm-accent-secondary)) 100%
);
border-radius: inherit;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22),
0 0 8px -2px color-mix(in srgb, var(--wm-accent) 50%, transparent);
transition: width var(--wm-duration-slow) var(--wm-ease-standard);
}
.wm-progress--indeterminate .wm-progress__fill {
width: 40% !important;
animation: wm-progress-indeterminate 1.3s var(--wm-ease-standard) infinite;
}
@keyframes wm-progress-indeterminate {
0% { transform: translateX(-100%); }
100% { transform: translateX(350%); }
}
.wm-progress-circle {
display: inline-block;
transform: rotate(-90deg);
}
.wm-progress-circle circle {
fill: none;
stroke-width: 3;
}
.wm-progress-circle circle.wm-progress-circle__track {
stroke: var(--wm-fill-primary);
}
.wm-progress-circle circle.wm-progress-circle__fill {
stroke: var(--wm-accent);
stroke-linecap: round;
transition: stroke-dashoffset var(--wm-duration-slow) var(--wm-ease-standard);
}
.wm-progress-circle--indeterminate {
animation: wm-spin 0.9s linear infinite;
}
.wm-progress-circle--indeterminate circle.wm-progress-circle__fill {
stroke-dasharray: 80 200;
}
.wm-spinner {
--_spinner-color: var(--wm-accent);
--_spinner-thickness: 2px;
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
background: conic-gradient(
from 0.25turn,
transparent 0deg,
color-mix(in srgb, var(--_spinner-color) 10%, transparent) 40deg,
var(--_spinner-color) 360deg
);
-webkit-mask: radial-gradient(
farthest-side,
transparent calc(100% - var(--_spinner-thickness) - 0.5px),
#000 calc(100% - var(--_spinner-thickness))
);
mask: radial-gradient(
farthest-side,
transparent calc(100% - var(--_spinner-thickness) - 0.5px),
#000 calc(100% - var(--_spinner-thickness))
);
animation: wm-spin 0.7s linear infinite;
}
.wm-spinner--lg {
width: 28px;
height: 28px;
--_spinner-thickness: 3px;
}
.wm-spinner--on-dark {
--_spinner-color: #ffffff;
}
.wm-progress-line {
display: flex;
align-items: center;
gap: var(--wm-space-5);
width: 100%;
}
.wm-progress-line .wm-progress {
flex: 1 1 0;
}
.wm-progress-line .wm-progress-label {
flex: none;
}
.wm-progress-label {
font-size: var(--wm-font-size-subheadline);
line-height: var(--wm-line-height-normal);
color: var(--wm-label-secondary);
}
.wm-skeleton {
position: relative;
overflow: hidden;
background: var(--wm-fill-secondary);
border-radius: var(--wm-radius-sm);
}
.wm-skeleton::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.35),
transparent
);
animation: wm-skeleton-shimmer 1.6s var(--wm-ease-standard) infinite;
}
:root[data-theme="dark"] .wm-skeleton::after {
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.08),
transparent
);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .wm-skeleton::after {
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.08),
transparent
);
}
}
@keyframes wm-skeleton-shimmer {
100% { transform: translateX(100%); }
}
.wm-skeleton--text {
height: 10px;
border-radius: var(--wm-radius-xs);
}
.wm-skeleton--avatar {
width: 36px;
height: 36px;
border-radius: 50%;
}
.wm-skeleton-group {
display: flex;
flex-direction: column;
gap: var(--wm-space-3);
flex: 1 1 auto;
min-width: 0;
}
.wm-skeleton-row {
display: flex;
align-items: flex-start;
gap: var(--wm-space-5);
width: 100%;
}
@media (prefers-reduced-motion: reduce) {
.wm-progress--indeterminate .wm-progress__fill,
.wm-progress-circle--indeterminate,
.wm-spinner,
.wm-skeleton::after {
animation-duration: 2.4s;
}
}
}
@layer components {
.wm-order-summary {
display: flex;
flex-direction: column;
gap: var(--wm-space-6);
max-width: 360px;
}
.wm-order-summary__title {
font-size: var(--wm-font-size-title3);
font-weight: var(--wm-font-weight-semibold);
letter-spacing: var(--wm-letter-spacing-tight);
color: var(--wm-label-primary);
}
.wm-order-summary__items {
display: flex;
flex-direction: column;
gap: var(--wm-space-4);
list-style: none;
margin: 0;
padding: 0;
}
.wm-order-summary__item {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--wm-space-4);
font-size: var(--wm-font-size-body);
color: var(--wm-label-primary);
}
.wm-order-summary__item-name {
color: var(--wm-label-primary);
}
.wm-order-summary__item-qty {
color: var(--wm-label-tertiary);
font-size: var(--wm-font-size-caption);
margin-inline-start: var(--wm-space-2);
}
.wm-order-summary__item-price {
font-variant-numeric: tabular-nums;
color: var(--wm-label-secondary);
white-space: nowrap;
}
.wm-order-summary__divider {
height: var(--wm-border-width-hairline);
background: var(--wm-separator);
border: none;
margin: 0;
}
.wm-order-summary__totals {
display: flex;
flex-direction: column;
gap: var(--wm-space-3);
margin: 0;
}
.wm-order-summary__row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--wm-space-4);
}
.wm-order-summary__row dt {
font-size: var(--wm-font-size-subheadline);
color: var(--wm-label-secondary);
}
.wm-order-summary__row dd {
margin: 0;
font-size: var(--wm-font-size-subheadline);
font-variant-numeric: tabular-nums;
color: var(--wm-label-primary);
}
.wm-order-summary__row--discount dt,
.wm-order-summary__row--discount dd {
color: var(--wm-success);
}
.wm-order-summary__row--total {
padding-block-start: var(--wm-space-4);
border-block-start: var(--wm-border-width-hairline) solid var(--wm-separator);
}
.wm-order-summary__row--total dt {
font-size: var(--wm-font-size-headline);
font-weight: var(--wm-font-weight-semibold);
color: var(--wm-label-primary);
}
.wm-order-summary__row--total dd {
font-size: var(--wm-font-size-title2);
font-weight: var(--wm-font-weight-bold);
letter-spacing: var(--wm-letter-spacing-tighter);
}
.wm-order-summary__next-cycle {
display: flex;
align-items: flex-start;
gap: var(--wm-space-3);
padding: var(--wm-space-5);
border-radius: var(--wm-radius-md);
background: var(--wm-fill-tertiary);
font-size: var(--wm-font-size-caption);
color: var(--wm-label-secondary);
line-height: var(--wm-line-height-normal);
}
.wm-order-summary__next-cycle .wm-icon {
flex-shrink: 0;
margin-block-start: 2px;
color: var(--wm-label-tertiary);
}
.wm-order-summary__next-cycle strong {
color: var(--wm-label-primary);
font-weight: var(--wm-font-weight-semibold);
}
}
@layer components {
.wm-notification-item {
position: relative;
display: flex;
align-items: flex-start;
gap: var(--wm-space-6);
padding: var(--wm-space-6) var(--wm-space-7);
background: var(--wm-surface-primary);
transition: background var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-notification-item:hover {
background: var(--wm-fill-quaternary, var(--wm-fill-secondary));
}
.wm-notification-item + .wm-notification-item::before {
content: "";
position: absolute;
top: 0;
inset-inline: var(--wm-space-7);
border-top: var(--wm-border-width-hairline) solid var(--wm-separator);
pointer-events: none;
}
.wm-notification-item__unread-dot {
flex: none;
width: 8px;
height: 8px;
margin-block-start: calc(var(--wm-space-6) + 2px);
border-radius: 50%;
background: var(--wm-accent);
box-shadow: 0 0 0 3px var(--wm-accent-fill);
}
.wm-notification-item[data-unread="false"] .wm-notification-item__unread-dot {
background: transparent;
box-shadow: none;
}
.wm-notification-item__icon {
flex: none;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--wm-label-secondary);
background: var(--wm-fill-secondary);
box-shadow: inset 0 0 0 var(--wm-border-width-hairline) var(--wm-separator);
}
.wm-notification-item__icon .wm-icon { width: var(--wm-icon-md); height: var(--wm-icon-md); }
.wm-notification-item__icon[data-tone="accent"] {
color: var(--wm-accent);
background: var(--wm-accent-fill);
}
.wm-notification-item__icon[data-tone="success"] {
color: var(--wm-success);
background: var(--wm-success-fill);
}
.wm-notification-item__icon[data-tone="warning"] {
color: var(--wm-warning);
background: var(--wm-warning-fill);
}
.wm-notification-item__icon[data-tone="error"] {
color: var(--wm-error);
background: var(--wm-error-fill);
}
.wm-notification-item__icon.wm-notification-item__icon--avatar {
padding: 0;
background: none;
box-shadow: none;
}
.wm-notification-item__body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--wm-space-2);
}
.wm-notification-item__text {
font-size: var(--wm-font-size-subheadline);
line-height: var(--wm-line-height-relaxed);
color: var(--wm-label-primary);
font-weight: var(--wm-font-weight-regular);
}
.wm-notification-item[data-unread="true"] .wm-notification-item__text {
font-weight: var(--wm-font-weight-semibold);
}
.wm-notification-item__actor,
.wm-notification-item__subject {
font-weight: var(--wm-font-weight-semibold);
}
.wm-notification-item[data-unread="true"] .wm-notification-item__subject {
font-weight: var(--wm-font-weight-bold);
}
.wm-notification-item__no-action {
font-size: var(--wm-font-size-caption);
color: var(--wm-label-secondary);
font-style: normal;
}
.wm-notification-item__urgent-flag {
display: inline-flex;
align-items: center;
gap: var(--wm-space-2);
align-self: flex-start;
padding: var(--wm-space-1) var(--wm-space-4);
border-radius: var(--wm-radius-pill);
background: var(--wm-error-fill);
color: var(--wm-error);
font-size: var(--wm-font-size-caption);
font-weight: var(--wm-font-weight-semibold);
}
.wm-notification-item__urgent-flag .wm-icon { width: var(--wm-icon-xs); height: var(--wm-icon-xs); }
.wm-notification-item__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--wm-space-4);
}
.wm-notification-item__time {
font-size: var(--wm-font-size-caption);
color: var(--wm-label-secondary);
font-variant-numeric: tabular-nums;
}
.wm-notification-item__actions {
flex: none;
display: flex;
align-items: center;
gap: var(--wm-space-3);
}
.wm-notification-item__action {
height: var(--wm-control-height-sm);
padding-inline: var(--wm-space-5);
border: none;
border-radius: var(--wm-radius-sm);
background: var(--wm-accent-fill);
color: var(--wm-accent-text);
font-size: var(--wm-font-size-caption);
font-weight: var(--wm-font-weight-semibold);
cursor: pointer;
transition: background var(--wm-duration-fast) var(--wm-ease-standard),
transform var(--wm-duration-fast) var(--wm-ease-emphasized);
}
.wm-notification-item__action:hover { background: var(--wm-accent-fill-strong, var(--wm-accent-fill)); }
.wm-notification-item__action:active { transform: scale(var(--wm-scale-pressed-sm)); }
.wm-notification-item__action:focus-visible {
outline: var(--wm-focus-ring-width) solid var(--wm-accent);
outline-offset: var(--wm-focus-ring-offset);
}
.wm-notification-item__read-toggle {
flex: none;
width: var(--wm-control-height-sm);
height: var(--wm-control-height-sm);
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
background: transparent;
color: var(--wm-label-secondary);
cursor: pointer;
transition: background var(--wm-duration-fast) var(--wm-ease-standard),
color var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-notification-item__read-toggle:hover {
background: var(--wm-fill-secondary);
color: var(--wm-label-primary);
}
.wm-notification-item__read-toggle:focus-visible {
outline: var(--wm-focus-ring-width) solid var(--wm-accent);
outline-offset: var(--wm-focus-ring-offset);
}
.wm-notification-item__read-toggle .wm-icon { width: var(--wm-icon-sm); height: var(--wm-icon-sm); }
.wm-notification-item--compact {
padding: var(--wm-space-5) var(--wm-space-7);
}
@media (prefers-reduced-motion: reduce) {
.wm-notification-item,
.wm-notification-item__action,
.wm-notification-item__read-toggle {
transition: none;
}
}
}
@layer components {
.wm-table-responsive {
background: var(--wm-surface-primary);
border-radius: var(--wm-radius-list-group);
box-shadow:
0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
var(--wm-shadow-1);
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: var(--wm-scrollbar-thumb) transparent;
container-type: inline-size;
container-name: wm-table-responsive;
}
.wm-table-responsive::-webkit-scrollbar {
height: var(--wm-space-4);
}
.wm-table-responsive::-webkit-scrollbar-track {
background: transparent;
}
.wm-table-responsive::-webkit-scrollbar-thumb {
background: var(--wm-scrollbar-thumb);
border-radius: var(--wm-radius-pill);
border: var(--wm-border-width-thick) solid transparent;
background-clip: padding-box;
}
.wm-table-responsive::-webkit-scrollbar-thumb:hover {
background: var(--wm-scrollbar-thumb-hover);
background-clip: padding-box;
}
.wm-table-responsive__table {
width: 100%;
border-collapse: collapse;
font-size: var(--wm-font-size-subheadline);
}
.wm-table-responsive__table thead th {
text-align: start;
font-size: var(--wm-font-size-caption);
font-weight: var(--wm-font-weight-medium);
color: var(--wm-label-secondary);
background: var(--wm-surface-primary);
padding: var(--wm-space-4) var(--wm-space-6);
border-bottom: var(--wm-border-width-hairline) solid var(--wm-separator);
white-space: nowrap;
}
.wm-table-responsive__table tbody td {
max-width: 0;
padding: var(--wm-space-5) var(--wm-space-6);
overflow: hidden;
color: var(--wm-label-primary);
text-overflow: ellipsis;
white-space: nowrap;
border-bottom: var(--wm-border-width-hairline) solid var(--wm-separator);
vertical-align: middle;
}
.wm-table-responsive__table tbody tr:last-child > td {
border-bottom: none;
}
.wm-table-responsive__cell--numeric {
text-align: end;
font-variant-numeric: tabular-nums;
}
.wm-table-responsive__cell--secondary {
color: var(--wm-label-secondary);
}
.wm-table-responsive__toggle-col,
.wm-table-responsive__toggle-cell {
display: none;
width: var(--wm-control-height-md);
padding-inline: var(--wm-space-3);
}
.wm-table-responsive__toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--wm-control-height-sm);
height: var(--wm-control-height-sm);
border: none;
border-radius: var(--wm-radius-sm);
background: transparent;
color: var(--wm-label-tertiary);
cursor: pointer;
transition:
background var(--wm-duration-fast) var(--wm-ease-standard),
color var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-table-responsive__toggle:hover {
background: var(--wm-fill-tertiary);
color: var(--wm-label-primary);
}
.wm-table-responsive__toggle:focus-visible {
outline: var(--wm-focus-ring-width) solid var(--wm-accent);
outline-offset: var(--wm-focus-ring-offset);
box-shadow: 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
}
.wm-table-responsive__toggle .wm-icon {
transition: transform var(--wm-duration-fast) var(--wm-ease-emphasized);
}
.wm-table-responsive__toggle[aria-expanded="true"] {
background: var(--wm-fill-tertiary);
color: var(--wm-label-primary);
}
.wm-table-responsive__toggle[aria-expanded="true"] .wm-icon {
transform: rotate(90deg);
}
.wm-table-responsive__detail-row[hidden] {
display: none;
}
.wm-table-responsive__detail-cell {
padding: 0;
border-bottom: var(--wm-border-width-hairline) solid var(--wm-separator);
}
.wm-table-responsive__table tbody tr:last-child > .wm-table-responsive__detail-cell {
border-bottom: none;
}
.wm-table-responsive__detail-list {
display: grid;
grid-template-columns: max-content 1fr;
gap: var(--wm-space-3) var(--wm-space-6);
margin: 0;
padding: var(--wm-space-5) var(--wm-space-6) var(--wm-space-6)
calc(var(--wm-control-height-md) + var(--wm-space-6));
background: var(--wm-surface-secondary);
}
.wm-table-responsive__detail-term {
color: var(--wm-label-tertiary);
font-size: var(--wm-font-size-caption);
font-weight: var(--wm-font-weight-medium);
white-space: nowrap;
}
.wm-table-responsive__detail-value {
margin: 0;
color: var(--wm-label-primary);
font-size: var(--wm-font-size-subheadline);
}
@container wm-table-responsive (max-width: 679px) {
[data-wm-prioridade="3"] {
display: none;
}
.wm-table-responsive__toggle-col,
.wm-table-responsive__toggle-cell {
display: table-cell;
}
}
@container wm-table-responsive (max-width: 419px) {
[data-wm-prioridade="2"] {
display: none;
}
}
@container wm-table-responsive (min-width: 680px) {
.wm-table-responsive__detail-row {
display: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.wm-table-responsive__toggle,
.wm-table-responsive__toggle .wm-icon {
transition: none;
}
}
}
@layer components {
.wm-chart-bar {
--_serie-1: var(--wm-chart-serie-1);
--_serie-2: var(--wm-chart-serie-2);
--_serie-3: var(--wm-chart-serie-3);
--_serie-4: var(--wm-chart-serie-4);
--_serie-5: var(--wm-chart-serie-5);
--_serie-6: var(--wm-chart-serie-6);
--_serie-7: var(--wm-chart-serie-7);
--_serie-8: var(--wm-chart-serie-8);
--_positivo: var(--wm-success);
--_negativo: var(--wm-error);
position: relative;
margin: 0;
padding: var(--wm-space-9);
background: var(--wm-surface-primary);
border-radius: var(--wm-radius-list-group);
box-shadow: var(--wm-shadow-ring), var(--wm-shadow-1);
}
.wm-chart-bar__title {
font-size: var(--wm-font-size-body);
font-weight: var(--wm-font-weight-semibold);
color: var(--wm-label-primary);
letter-spacing: var(--wm-tracking-body);
}
.wm-chart-bar__subtitle {
font-size: var(--wm-font-size-caption);
color: var(--wm-label-tertiary);
margin-top: var(--wm-space-1);
margin-bottom: var(--wm-space-6);
}
.wm-chart-bar__plot {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.wm-chart-bar__grid {
stroke: var(--wm-separator);
stroke-width: 1;
}
.wm-chart-bar__axis {
stroke: var(--wm-separator-strong);
stroke-width: 1.5;
}
.wm-chart-bar__tick,
.wm-chart-bar__categoria,
.wm-chart-bar__valor {
fill: var(--wm-label-tertiary);
font-family: var(--wm-font-family);
font-size: var(--wm-font-size-caption);
font-variant-numeric: tabular-nums;
}
.wm-chart-bar__categoria {
fill: var(--wm-label-secondary);
}
.wm-chart-bar__valor {
fill: var(--wm-label-primary);
font-weight: var(--wm-font-weight-semibold);
}
.wm-chart-bar__barra {
transition:
filter var(--wm-duration-fast) var(--wm-ease-standard),
opacity var(--wm-duration-fast) var(--wm-ease-standard),
stroke-width var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-chart-bar__barra--serie-1 { fill: var(--_serie-1); }
.wm-chart-bar__barra--serie-2 { fill: var(--_serie-2); }
.wm-chart-bar__barra--serie-3 { fill: var(--_serie-3); }
.wm-chart-bar__barra--serie-4 { fill: var(--_serie-4); }
.wm-chart-bar__barra--serie-5 { fill: var(--_serie-5); }
.wm-chart-bar__barra--serie-6 { fill: var(--_serie-6); }
.wm-chart-bar__barra--serie-7 { fill: var(--_serie-7); }
.wm-chart-bar__barra--serie-8 { fill: var(--_serie-8); }
.wm-chart-bar__barra--positivo { fill: var(--_positivo); }
.wm-chart-bar__barra--negativo { fill: var(--_negativo); }
.wm-chart-bar--empilhada .wm-chart-bar__barra,
.wm-chart-bar__grupo .wm-chart-bar__barra + .wm-chart-bar__barra {
stroke: var(--wm-surface-primary);
stroke-width: 1;
}
.wm-chart-bar__meta-regua {
stroke: var(--wm-accent);
stroke-width: 1.5;
stroke-dasharray: 5 4;
}
.wm-chart-bar__meta-texto {
fill: var(--wm-accent-text);
font-family: var(--wm-font-family);
font-size: var(--wm-font-size-caption);
font-weight: var(--wm-font-weight-semibold);
paint-order: stroke;
stroke: var(--wm-surface-primary);
stroke-width: 3px;
stroke-linejoin: round;
}
.wm-chart-bar__grupo {
cursor: pointer;
}
.wm-chart-bar__plot:hover .wm-chart-bar__grupo:not(:hover) .wm-chart-bar__barra {
opacity: 0.45;
}
.wm-chart-bar__grupo:hover .wm-chart-bar__barra,
.wm-chart-bar__grupo:focus-visible .wm-chart-bar__barra {
filter: brightness(1.08);
}
[data-theme="dark"] .wm-chart-bar__grupo:hover .wm-chart-bar__barra,
[data-theme="dark"] .wm-chart-bar__grupo:focus-visible .wm-chart-bar__barra {
filter: brightness(1.18);
}
.wm-chart-bar__grupo:focus-visible {
outline: none;
}
.wm-chart-bar__grupo:focus-visible .wm-chart-bar__barra {
filter: brightness(1.08) drop-shadow(0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill));
}
.wm-chart-bar__grupo[data-selecionado="true"] .wm-chart-bar__barra,
.wm-chart-bar__grupo[aria-selected="true"] .wm-chart-bar__barra {
stroke: var(--wm-accent);
stroke-width: 2;
}
.wm-chart-bar__legend {
display: flex;
flex-wrap: wrap;
gap: var(--wm-space-4) var(--wm-space-8);
list-style: none;
margin: var(--wm-space-6) 0 0;
padding: 0;
}
.wm-chart-bar__legend-item {
display: inline-flex;
align-items: center;
gap: var(--wm-space-3);
font-size: var(--wm-font-size-caption);
color: var(--wm-label-secondary);
background: none;
border: none;
cursor: default;
padding: var(--wm-space-1) var(--wm-space-2);
border-radius: var(--wm-radius-sm);
}
.wm-chart-bar__swatch {
width: var(--wm-space-5);
height: var(--wm-space-5);
border-radius: var(--wm-radius-xs);
flex: none;
}
.wm-chart-bar__swatch--1 { background: var(--_serie-1); }
.wm-chart-bar__swatch--2 { background: var(--_serie-2); }
.wm-chart-bar__swatch--3 { background: var(--_serie-3); }
.wm-chart-bar__swatch--4 { background: var(--_serie-4); }
.wm-chart-bar__swatch--5 { background: var(--_serie-5); }
.wm-chart-bar__swatch--6 { background: var(--_serie-6); }
.wm-chart-bar__swatch--7 { background: var(--_serie-7); }
.wm-chart-bar__swatch--8 { background: var(--_serie-8); }
.wm-chart-bar__swatch--positivo { background: var(--_positivo); }
.wm-chart-bar__swatch--negativo { background: var(--_negativo); }
.wm-chart-bar__table caption {
text-align: start;
}
.wm-chart-bar--vazio .wm-chart-bar__plot {
display: none;
}
.wm-chart-bar__vazio {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--wm-space-3);
padding: var(--wm-space-12) var(--wm-space-6);
color: var(--wm-label-tertiary);
text-align: center;
}
.wm-chart-bar__vazio-icone {
color: var(--wm-label-quaternary);
}
.wm-chart-bar__vazio-titulo {
font-size: var(--wm-font-size-body);
font-weight: var(--wm-font-weight-medium);
color: var(--wm-label-secondary);
}
.wm-chart-bar__vazio-desc {
font-size: var(--wm-font-size-caption);
max-width: 32ch;
}
@media (prefers-reduced-motion: reduce) {
.wm-chart-bar__barra {
transition: none;
}
.wm-chart-bar__grupo:hover .wm-chart-bar__barra,
.wm-chart-bar__grupo:focus-visible .wm-chart-bar__barra {
transition: none;
}
}
}
@layer components {
.wm-pricing-table {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--wm-space-10);
}
.wm-pricing-table__toggle {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--wm-space-3);
}
.wm-pricing-table__savings-note {
font-size: var(--wm-font-size-caption);
color: var(--wm-success);
font-weight: var(--wm-font-weight-medium);
display: flex;
align-items: center;
gap: var(--wm-space-2);
}
.wm-pricing-table__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--wm-space-8);
width: 100%;
align-items: stretch;
}
@media (max-width: 680px) {
.wm-pricing-table__grid {
grid-template-columns: 1fr;
}
}
.wm-pricing-table__plan {
position: relative;
display: flex;
flex-direction: column;
gap: var(--wm-space-6);
padding: var(--wm-space-9);
margin-block-start: var(--wm-space-5);
}
.wm-pricing-table__plan--recommended {
margin-block-start: 0;
padding-block-start: calc(var(--wm-space-9) * 2);
}
.wm-pricing-table__plan--recommended.wm-card {
box-shadow:
0 0 0 1.5px var(--wm-accent),
0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill),
var(--wm-shadow-2),
var(--wm-shadow-3);
}
.wm-pricing-table__ribbon {
position: absolute;
inset-inline: var(--wm-space-9);
top: var(--wm-space-6);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--wm-space-2);
padding-block: var(--wm-space-2);
padding-inline: var(--wm-space-6);
border-radius: var(--wm-radius-pill);
background: var(--wm-accent-gradient);
color: var(--wm-label-on-accent);
font-size: var(--wm-font-size-caption);
font-weight: var(--wm-font-weight-semibold);
letter-spacing: var(--wm-letter-spacing-wide);
text-transform: uppercase;
width: fit-content;
margin-inline: auto;
}
.wm-pricing-table__plan-head {
display: flex;
flex-direction: column;
gap: var(--wm-space-2);
text-align: center;
}
.wm-pricing-table__plan-name {
font-size: var(--wm-font-size-title2);
font-weight: var(--wm-font-weight-semibold);
letter-spacing: var(--wm-letter-spacing-tight);
color: var(--wm-label-primary);
}
.wm-pricing-table__plan-desc {
font-size: var(--wm-font-size-subheadline);
color: var(--wm-label-secondary);
line-height: var(--wm-line-height-normal);
}
.wm-pricing-table__price {
display: flex;
align-items: baseline;
justify-content: center;
gap: var(--wm-space-1);
}
.wm-pricing-table__price-currency {
font-size: var(--wm-font-size-title3);
font-weight: var(--wm-font-weight-medium);
color: var(--wm-label-secondary);
}
.wm-pricing-table__price-value {
font-size: var(--wm-font-size-large-title);
font-weight: var(--wm-font-weight-bold);
letter-spacing: var(--wm-letter-spacing-tighter);
font-variant-numeric: tabular-nums;
color: var(--wm-label-primary);
}
.wm-pricing-table__price-period {
font-size: var(--wm-font-size-body);
color: var(--wm-label-tertiary);
}
.wm-pricing-table__price-note {
text-align: center;
font-size: var(--wm-font-size-caption);
color: var(--wm-label-tertiary);
min-height: var(--wm-leading-caption);
}
.wm-pricing-table__features {
display: flex;
flex-direction: column;
gap: var(--wm-space-5);
list-style: none;
margin: 0;
padding: 0;
flex: 1;
}
.wm-pricing-table__feature {
display: flex;
align-items: flex-start;
gap: var(--wm-space-4);
font-size: var(--wm-font-size-body);
color: var(--wm-label-primary);
line-height: var(--wm-line-height-normal);
}
.wm-pricing-table__feature .wm-icon {
flex-shrink: 0;
margin-block-start: 2px;
color: var(--wm-success);
}
.wm-pricing-table__feature--off {
color: var(--wm-label-tertiary);
}
.wm-pricing-table__feature--off .wm-icon {
color: var(--wm-label-quaternary);
}
.wm-pricing-table__cta {
width: 100%;
justify-content: center;
}
@media (prefers-reduced-motion: reduce) {
.wm-pricing-table__plan {
transition: none;
}
}
}
@layer components {
.wm-plan-card {
display: flex;
flex-direction: column;
gap: var(--wm-space-6);
max-width: 340px;
}
.wm-plan-card--recommended.wm-card {
box-shadow:
0 0 0 1.5px var(--wm-accent),
0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill),
var(--wm-shadow-2),
var(--wm-shadow-3);
}
.wm-plan-card__badge {
display: inline-flex;
align-items: center;
gap: var(--wm-space-2);
width: fit-content;
padding-block: var(--wm-space-2);
padding-inline: var(--wm-space-5);
border-radius: var(--wm-radius-pill);
font-size: var(--wm-font-size-caption);
font-weight: var(--wm-font-weight-semibold);
letter-spacing: var(--wm-letter-spacing-wide);
text-transform: uppercase;
}
.wm-plan-card__badge--recommended {
background: var(--wm-accent-gradient);
color: var(--wm-label-on-accent);
}
.wm-plan-card__badge--current {
background: var(--wm-success-fill);
color: var(--wm-success);
}
.wm-plan-card__head {
display: flex;
flex-direction: column;
gap: var(--wm-space-2);
}
.wm-plan-card__name {
font-size: var(--wm-font-size-title2);
font-weight: var(--wm-font-weight-semibold);
letter-spacing: var(--wm-letter-spacing-tight);
color: var(--wm-label-primary);
}
.wm-plan-card__desc {
font-size: var(--wm-font-size-subheadline);
color: var(--wm-label-secondary);
line-height: var(--wm-line-height-normal);
}
.wm-plan-card__price {
display: flex;
align-items: baseline;
gap: var(--wm-space-1);
}
.wm-plan-card__price-currency {
font-size: var(--wm-font-size-title3);
font-weight: var(--wm-font-weight-medium);
color: var(--wm-label-secondary);
}
.wm-plan-card__price-value {
font-size: var(--wm-font-size-large-title);
font-weight: var(--wm-font-weight-bold);
letter-spacing: var(--wm-letter-spacing-tighter);
font-variant-numeric: tabular-nums;
color: var(--wm-label-primary);
}
.wm-plan-card__price-period {
font-size: var(--wm-font-size-body);
color: var(--wm-label-tertiary);
}
.wm-plan-card__price-note {
font-size: var(--wm-font-size-caption);
color: var(--wm-label-tertiary);
display: flex;
align-items: center;
gap: var(--wm-space-2);
}
.wm-plan-card__section {
display: flex;
flex-direction: column;
gap: var(--wm-space-4);
}
.wm-plan-card__section-title {
font-size: var(--wm-font-size-caption);
font-weight: var(--wm-font-weight-semibold);
letter-spacing: var(--wm-letter-spacing-wide);
text-transform: uppercase;
color: var(--wm-label-tertiary);
}
.wm-plan-card__list {
display: flex;
flex-direction: column;
gap: var(--wm-space-4);
list-style: none;
margin: 0;
padding: 0;
}
.wm-plan-card__item {
display: flex;
align-items: flex-start;
gap: var(--wm-space-4);
font-size: var(--wm-font-size-body);
color: var(--wm-label-primary);
line-height: var(--wm-line-height-normal);
}
.wm-plan-card__item .wm-icon {
flex-shrink: 0;
margin-block-start: 2px;
color: var(--wm-success);
}
.wm-plan-card__item--excluded {
color: var(--wm-label-tertiary);
}
.wm-plan-card__item--excluded .wm-icon {
color: var(--wm-label-quaternary);
}
.wm-plan-card__cta {
width: 100%;
justify-content: center;
}
.wm-plan-card__current-note {
display: flex;
align-items: center;
justify-content: center;
gap: var(--wm-space-2);
padding-block: var(--wm-space-5);
font-size: var(--wm-font-size-subheadline);
font-weight: var(--wm-font-weight-medium);
color: var(--wm-success);
background: var(--wm-success-fill);
border-radius: var(--wm-radius-md);
}
.wm-plan-card--compact .wm-plan-card__section--excluded {
display: none;
}
}
@layer components {
.wm-wallet-balance {
display: flex;
flex-direction: column;
gap: var(--wm-space-6);
max-width: 360px;
}
.wm-wallet-balance__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wm-space-4);
}
.wm-wallet-balance__label {
display: flex;
align-items: center;
gap: var(--wm-space-3);
font-size: var(--wm-font-size-subheadline);
font-weight: var(--wm-font-weight-medium);
color: var(--wm-label-secondary);
}
.wm-wallet-balance__label .wm-icon {
color: var(--wm-accent);
width: var(--wm-icon-sm);
height: var(--wm-icon-sm);
}
.wm-wallet-balance__amount {
display: flex;
align-items: baseline;
gap: var(--wm-space-3);
}
.wm-wallet-balance__amount-value {
font-size: var(--wm-font-size-large-title);
font-weight: var(--wm-font-weight-bold);
letter-spacing: var(--wm-letter-spacing-tighter);
font-variant-numeric: tabular-nums;
color: var(--wm-label-primary);
}
.wm-wallet-balance__amount-unit {
font-size: var(--wm-font-size-subheadline);
font-weight: var(--wm-font-weight-medium);
color: var(--wm-label-tertiary);
}
.wm-wallet-balance[data-wm-estado="negativo"] .wm-wallet-balance__amount-value {
color: var(--wm-error);
}
.wm-wallet-balance__equivalence {
font-size: var(--wm-font-size-caption);
color: var(--wm-label-secondary);
line-height: var(--wm-line-height-normal);
}
.wm-wallet-balance__equivalence strong {
color: var(--wm-label-primary);
font-weight: var(--wm-font-weight-semibold);
}
.wm-wallet-balance__breakdown {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--wm-space-3);
margin: 0;
padding-block-start: var(--wm-space-5);
border-block-start: var(--wm-border-width-hairline) solid var(--wm-separator);
}
.wm-wallet-balance__breakdown-item {
display: flex;
flex-direction: column;
gap: var(--wm-space-1);
}
.wm-wallet-balance__breakdown dt {
font-size: 10px;
text-transform: uppercase;
letter-spacing: var(--wm-letter-spacing-wide);
color: var(--wm-label-tertiary);
}
.wm-wallet-balance__breakdown dd {
margin: 0;
font-size: var(--wm-font-size-subheadline);
font-weight: var(--wm-font-weight-semibold);
font-variant-numeric: tabular-nums;
color: var(--wm-label-primary);
}
.wm-wallet-balance__breakdown-item--reserved dd {
color: var(--wm-warning);
}
.wm-wallet-balance__flag {
display: inline-flex;
align-items: center;
gap: var(--wm-space-2);
align-self: flex-start;
padding: var(--wm-space-1) var(--wm-space-4);
border-radius: var(--wm-radius-pill);
background: var(--wm-warning-fill);
color: var(--wm-warning);
font-size: var(--wm-font-size-caption);
font-weight: var(--wm-font-weight-semibold);
}
.wm-wallet-balance__flag .wm-icon {
width: var(--wm-icon-xs);
height: var(--wm-icon-xs);
}
.wm-wallet-balance__flag--negativo {
background: var(--wm-error-fill);
color: var(--wm-error);
}
.wm-wallet-balance__notice {
display: flex;
align-items: flex-start;
gap: var(--wm-space-3);
padding: var(--wm-space-5);
border-radius: var(--wm-radius-md);
background: var(--wm-error-fill);
color: var(--wm-label-primary);
font-size: var(--wm-font-size-caption);
line-height: var(--wm-line-height-normal);
}
.wm-wallet-balance__notice .wm-icon {
flex-shrink: 0;
margin-block-start: 2px;
color: var(--wm-error);
}
.wm-wallet-balance__actions {
display: flex;
gap: var(--wm-space-4);
}
.wm-wallet-balance__types {
display: flex;
flex-direction: column;
gap: var(--wm-space-4);
list-style: none;
margin: 0;
padding: 0;
}
.wm-wallet-balance__type {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wm-space-4);
}
.wm-wallet-balance__type-id {
display: flex;
align-items: center;
gap: var(--wm-space-3);
font-size: var(--wm-font-size-subheadline);
color: var(--wm-label-primary);
}
.wm-wallet-balance__type-icon {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--wm-fill-secondary);
color: var(--wm-label-secondary);
}
.wm-wallet-balance__type-icon .wm-icon {
width: var(--wm-icon-sm);
height: var(--wm-icon-sm);
}
.wm-wallet-balance__type[data-wm-tipo="video"] .wm-wallet-balance__type-icon {
background: var(--wm-accent-fill);
color: var(--wm-accent);
}
.wm-wallet-balance__type[data-wm-tipo="imagem"] .wm-wallet-balance__type-icon {
background: var(--wm-success-fill);
color: var(--wm-success);
}
.wm-wallet-balance__type[data-wm-tipo="texto"] .wm-wallet-balance__type-icon {
background: var(--wm-warning-fill);
color: var(--wm-warning);
}
.wm-wallet-balance__type-value {
font-size: var(--wm-font-size-subheadline);
font-weight: var(--wm-font-weight-semibold);
font-variant-numeric: tabular-nums;
color: var(--wm-label-primary);
}
.wm-wallet-balance--mini {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: var(--wm-space-4);
max-width: none;
padding: var(--wm-space-2) var(--wm-space-4) var(--wm-space-2) var(--wm-space-2);
border-radius: var(--wm-radius-pill);
background: var(--wm-fill-secondary);
}
.wm-wallet-balance--mini .wm-wallet-balance__mini-icon {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--wm-accent-fill);
color: var(--wm-accent);
}
.wm-wallet-balance--mini .wm-wallet-balance__mini-icon .wm-icon {
width: var(--wm-icon-xs);
height: var(--wm-icon-xs);
}
.wm-wallet-balance--mini[data-wm-estado="negativo"] .wm-wallet-balance__mini-icon {
background: var(--wm-error-fill);
color: var(--wm-error);
}
.wm-wallet-balance--mini[data-wm-estado="baixo"] .wm-wallet-balance__mini-icon {
background: var(--wm-warning-fill);
color: var(--wm-warning);
}
.wm-wallet-balance__mini-text {
display: flex;
flex-direction: column;
line-height: 1.15;
}
.wm-wallet-balance__mini-value {
font-size: var(--wm-font-size-subheadline);
font-weight: var(--wm-font-weight-semibold);
font-variant-numeric: tabular-nums;
color: var(--wm-label-primary);
}
.wm-wallet-balance--mini[data-wm-estado="negativo"] .wm-wallet-balance__mini-value {
color: var(--wm-error);
}
.wm-wallet-balance__mini-equivalence {
font-size: 10px;
color: var(--wm-label-tertiary);
}
.wm-wallet-balance__mini-add {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--wm-control-height-sm);
height: var(--wm-control-height-sm);
margin-inline-start: var(--wm-space-1);
border: none;
border-radius: 50%;
background: transparent;
color: var(--wm-label-secondary);
cursor: pointer;
transition: background var(--wm-duration-fast) var(--wm-ease-standard),
color var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-wallet-balance__mini-add:hover {
background: var(--wm-fill-primary);
color: var(--wm-accent);
}
.wm-wallet-balance__mini-add:focus-visible {
outline: var(--wm-focus-ring-width) solid var(--wm-accent);
outline-offset: var(--wm-focus-ring-offset);
}
.wm-wallet-balance__mini-add .wm-icon {
width: var(--wm-icon-xs);
height: var(--wm-icon-xs);
}
}
@layer components {
.wm-wallet-topup {
display: flex;
flex-direction: column;
gap: var(--wm-space-8);
max-width: 480px;
}
.wm-wallet-topup__section-title {
font-size: var(--wm-font-size-subheadline);
font-weight: var(--wm-font-weight-semibold);
color: var(--wm-label-primary);
margin-block-end: var(--wm-space-4);
}
.wm-wallet-topup__packages {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
gap: var(--wm-space-4);
}
.wm-wallet-topup__package {
--_ring: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0.14));
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--wm-space-2);
padding: var(--wm-space-6) var(--wm-space-4);
border-radius: var(--wm-radius-lg);
background: var(--wm-surface-primary);
box-shadow: var(--_ring);
text-align: center;
cursor: pointer;
transition: box-shadow var(--wm-duration-fast) var(--wm-ease-standard),
background var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-wallet-topup__package:hover {
--_ring: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.24), rgba(255, 255, 255, 0.24));
}
.wm-wallet-topup__package:has(.wm-radio__input:checked) {
background: var(--wm-accent-fill);
box-shadow: 0 0 0 1.5px var(--wm-accent), 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
}
.wm-wallet-topup__package:has(.wm-radio__input:focus-visible) {
box-shadow: 0 0 0 1.5px var(--wm-accent), 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
}
.wm-wallet-topup__package-badge {
position: absolute;
top: calc(-1 * var(--wm-space-3));
inset-inline: var(--wm-space-4);
display: inline-flex;
align-items: center;
justify-content: center;
padding-block: var(--wm-space-1);
padding-inline: var(--wm-space-4);
border-radius: var(--wm-radius-pill);
background: var(--wm-accent-gradient);
color: var(--wm-label-on-accent);
font-size: 10px;
font-weight: var(--wm-font-weight-semibold);
letter-spacing: var(--wm-letter-spacing-wide);
text-transform: uppercase;
width: fit-content;
margin-inline: auto;
}
.wm-wallet-topup__package-credits {
font-size: var(--wm-font-size-title2);
font-weight: var(--wm-font-weight-bold);
font-variant-numeric: tabular-nums;
letter-spacing: var(--wm-letter-spacing-tighter);
color: var(--wm-label-primary);
}
.wm-wallet-topup__package-unit {
font-size: var(--wm-font-size-caption);
color: var(--wm-label-tertiary);
margin-block-start: calc(-1 * var(--wm-space-2));
}
.wm-wallet-topup__package-price {
font-size: var(--wm-font-size-subheadline);
color: var(--wm-label-secondary);
font-variant-numeric: tabular-nums;
}
.wm-wallet-topup__package-bonus {
font-size: 10px;
font-weight: var(--wm-font-weight-semibold);
color: var(--wm-success);
}
.wm-wallet-topup__custom-row {
display: flex;
align-items: center;
gap: var(--wm-space-5);
}
.wm-wallet-topup__custom-row .wm-field {
max-width: 160px;
}
.wm-wallet-topup__custom-input {
font-variant-numeric: tabular-nums;
}
.wm-wallet-topup__custom-result {
font-size: var(--wm-font-size-caption);
color: var(--wm-label-secondary);
}
.wm-wallet-topup__custom-result strong {
color: var(--wm-label-primary);
font-weight: var(--wm-font-weight-semibold);
}
.wm-wallet-topup__methods {
display: flex;
flex-wrap: wrap;
gap: var(--wm-space-4);
}
.wm-wallet-topup__method {
--_ring: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0.14));
display: inline-flex;
align-items: center;
gap: var(--wm-space-3);
height: var(--wm-control-height-lg);
padding-inline: var(--wm-space-6);
border-radius: var(--wm-radius-pill);
background: var(--wm-surface-primary);
box-shadow: var(--_ring);
color: var(--wm-label-primary);
font-size: var(--wm-font-size-subheadline);
font-weight: var(--wm-font-weight-medium);
cursor: pointer;
transition: box-shadow var(--wm-duration-fast) var(--wm-ease-standard),
background var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-wallet-topup__method:hover {
--_ring: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.24), rgba(255, 255, 255, 0.24));
}
.wm-wallet-topup__method:has(.wm-radio__input:checked) {
background: var(--wm-accent-fill);
color: var(--wm-accent-text);
box-shadow: 0 0 0 1.5px var(--wm-accent);
}
.wm-wallet-topup__method:has(.wm-radio__input:focus-visible) {
box-shadow: 0 0 0 1.5px var(--wm-accent), 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
}
.wm-wallet-topup__method .wm-icon {
width: var(--wm-icon-sm);
height: var(--wm-icon-sm);
}
.wm-wallet-topup__summary {
padding-block-start: var(--wm-space-5);
border-block-start: var(--wm-border-width-hairline) solid var(--wm-separator);
}
.wm-wallet-topup__submit-row {
display: flex;
flex-direction: column;
gap: var(--wm-space-3);
}
.wm-wallet-topup__submit {
width: 100%;
}
.wm-wallet-topup__submit:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.wm-wallet-topup__disclaimer {
display: flex;
align-items: flex-start;
gap: var(--wm-space-3);
font-size: var(--wm-font-size-caption);
color: var(--wm-label-tertiary);
line-height: var(--wm-line-height-normal);
}
.wm-wallet-topup__disclaimer .wm-icon {
flex-shrink: 0;
margin-block-start: 2px;
}
@media (prefers-reduced-motion: reduce) {
.wm-wallet-topup__package,
.wm-wallet-topup__method {
transition: none;
}
}
}
@layer components {
.wm-wallet-ledger__table .wm-wallet-ledger__col-quando { width: 15%; }
.wm-wallet-ledger__table .wm-wallet-ledger__col-op { width: 45%; }
.wm-wallet-ledger__table .wm-wallet-ledger__col-quanto { width: 20%; }
.wm-wallet-ledger__table .wm-wallet-ledger__col-saldo { width: 20%; }
.wm-wallet-ledger__op {
display: flex;
align-items: center;
gap: var(--wm-space-4);
min-width: 0;
white-space: normal;
}
.wm-wallet-ledger__op-icon {
flex: none;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--wm-fill-secondary);
color: var(--wm-label-secondary);
}
.wm-wallet-ledger__op-icon .wm-icon {
width: var(--wm-icon-sm);
height: var(--wm-icon-sm);
}
tr[data-wm-tipo="compra"] .wm-wallet-ledger__op-icon,
tr[data-wm-tipo="estorno"] .wm-wallet-ledger__op-icon {
background: var(--wm-success-fill);
color: var(--wm-success);
}
tr[data-wm-tipo="reserva"] .wm-wallet-ledger__op-icon {
background: var(--wm-warning-fill);
color: var(--wm-warning);
}
tr[data-wm-tipo="ajuste"] .wm-wallet-ledger__op-icon {
background: var(--wm-accent-fill);
color: var(--wm-accent);
}
.wm-wallet-ledger__op-text {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.wm-wallet-ledger__op-title {
font-size: var(--wm-font-size-subheadline);
font-weight: var(--wm-font-weight-medium);
color: var(--wm-label-primary);
}
.wm-wallet-ledger__op-resource {
font-size: var(--wm-font-size-caption);
color: var(--wm-label-tertiary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 320px;
}
.wm-wallet-ledger__op-ref {
display: inline-flex;
align-items: center;
gap: var(--wm-space-1);
font-size: var(--wm-font-size-caption);
color: var(--wm-accent);
text-decoration: none;
}
.wm-wallet-ledger__op-ref:hover { text-decoration: underline; }
.wm-wallet-ledger__op-ref:focus-visible {
outline: var(--wm-focus-ring-width) solid var(--wm-accent);
outline-offset: var(--wm-focus-ring-offset);
}
.wm-wallet-ledger__op-ref .wm-icon {
width: var(--wm-icon-xs);
height: var(--wm-icon-xs);
}
.wm-wallet-ledger__amount {
font-variant-numeric: tabular-nums;
font-weight: var(--wm-font-weight-semibold);
white-space: nowrap;
}
.wm-wallet-ledger__amount--credito { color: var(--wm-success); }
.wm-wallet-ledger__amount--debito { color: var(--wm-label-primary); }
.wm-wallet-ledger__amount-unit {
font-size: var(--wm-font-size-caption);
font-weight: var(--wm-font-weight-regular);
color: var(--wm-label-tertiary);
margin-inline-start: var(--wm-space-1);
}
.wm-wallet-ledger__balance-after {
font-variant-numeric: tabular-nums;
color: var(--wm-label-secondary);
white-space: nowrap;
}
.wm-wallet-ledger__balance-after--negativo {
color: var(--wm-error);
font-weight: var(--wm-font-weight-semibold);
}
tr[data-wm-pendente="true"] {
background: var(--wm-fill-tertiary);
}
tr[data-wm-pendente="true"] .wm-wallet-ledger__op-title {
color: var(--wm-label-secondary);
}
.wm-wallet-ledger__pending-badge {
margin-inline-start: var(--wm-space-3);
}
.wm-wallet-ledger__type-badge {
margin-inline-start: var(--wm-space-3);
}
.wm-wallet-ledger__summary {
display: flex;
flex-wrap: wrap;
gap: var(--wm-space-8);
padding: var(--wm-space-5) var(--wm-space-6);
border-bottom: var(--wm-border-width-hairline) solid var(--wm-separator);
background: var(--wm-surface-primary);
}
.wm-wallet-ledger__summary-item {
display: flex;
flex-direction: column;
gap: var(--wm-space-1);
}
.wm-wallet-ledger__summary-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: var(--wm-letter-spacing-wide);
color: var(--wm-label-tertiary);
}
.wm-wallet-ledger__summary-value {
font-size: var(--wm-font-size-headline);
font-weight: var(--wm-font-weight-semibold);
font-variant-numeric: tabular-nums;
color: var(--wm-label-primary);
}
.wm-wallet-ledger__summary-value--credito { color: var(--wm-success); }
.wm-wallet-ledger__table tbody td:has(.wm-wallet-ledger__empty) {
max-width: none;
overflow: visible;
white-space: normal;
}
.wm-wallet-ledger__empty {
padding: var(--wm-space-13) var(--wm-space-8);
text-align: center;
color: var(--wm-label-tertiary);
font-size: var(--wm-font-size-subheadline);
white-space: normal;
}
}
@layer components {
.wm-wallet-usage {
display: flex;
flex-direction: column;
gap: var(--wm-space-6);
}
.wm-wallet-usage__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--wm-space-6);
flex-wrap: wrap;
}
.wm-wallet-usage__title-group {
display: flex;
flex-direction: column;
gap: var(--wm-space-1);
min-width: 0;
}
.wm-wallet-usage__title {
margin: 0;
font-size: var(--wm-font-size-headline);
font-weight: var(--wm-font-weight-semibold);
color: var(--wm-label-primary);
}
.wm-wallet-usage__period {
margin: 0;
display: flex;
align-items: center;
gap: var(--wm-space-2);
font-size: var(--wm-font-size-caption);
color: var(--wm-label-secondary);
}
.wm-wallet-usage__period .wm-icon {
width: var(--wm-icon-xs);
height: var(--wm-icon-xs);
color: var(--wm-label-tertiary);
}
.wm-wallet-usage__period-days {
color: var(--wm-label-tertiary);
}
.wm-wallet-usage__period-label {
color: inherit;
}
.wm-wallet-usage__periods {
flex: none;
}
.wm-wallet-usage__summary {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: var(--wm-space-3) var(--wm-space-4);
}
.wm-wallet-usage__summary-value {
font-size: var(--wm-font-size-title-2);
font-weight: var(--wm-font-weight-bold);
letter-spacing: var(--wm-letter-spacing-tighter);
font-variant-numeric: tabular-nums;
color: var(--wm-label-primary);
}
.wm-wallet-usage__summary-unit {
font-size: var(--wm-font-size-subheadline);
color: var(--wm-label-secondary);
}
.wm-wallet-usage__trend {
display: inline-flex;
align-items: center;
gap: var(--wm-space-2);
font-size: var(--wm-font-size-caption);
font-weight: var(--wm-font-weight-medium);
}
.wm-wallet-usage__trend .wm-icon {
width: var(--wm-icon-xs);
height: var(--wm-icon-xs);
}
.wm-wallet-usage__trend--alta { color: var(--wm-warning); }
.wm-wallet-usage__trend--baixa { color: var(--wm-success); }
.wm-wallet-usage__trend--estavel { color: var(--wm-label-tertiary); }
.wm-wallet-usage__chart.wm-chart-bar {
padding: 0;
background: none;
box-shadow: none;
}
.wm-wallet-usage__breakdown {
display: flex;
flex-direction: column;
gap: var(--wm-space-3);
list-style: none;
margin: 0;
padding: var(--wm-space-5) 0 0;
border-block-start: var(--wm-border-width-hairline) solid var(--wm-separator);
}
.wm-wallet-usage__breakdown-item {
display: flex;
align-items: center;
gap: var(--wm-space-3);
}
.wm-wallet-usage__breakdown-label {
flex: 1 1 auto;
min-width: 0;
font-size: var(--wm-font-size-subheadline);
color: var(--wm-label-primary);
}
.wm-wallet-usage__breakdown-value {
flex: none;
font-size: var(--wm-font-size-subheadline);
font-weight: var(--wm-font-weight-semibold);
font-variant-numeric: tabular-nums;
color: var(--wm-label-primary);
}
.wm-wallet-usage__breakdown-pct {
font-weight: var(--wm-font-weight-regular);
color: var(--wm-label-tertiary);
}
.wm-wallet-usage__empty-note {
margin: 0;
font-size: var(--wm-font-size-caption);
color: var(--wm-label-tertiary);
text-align: center;
}
}
@layer components {
.wm-wallet-low__threshold {
margin-block-start: var(--wm-space-2);
font-size: var(--wm-font-size-caption);
line-height: var(--wm-line-height-normal);
color: var(--wm-label-tertiary);
}
.wm-wallet-low__threshold strong {
color: var(--wm-label-secondary);
font-weight: var(--wm-font-weight-semibold);
}
.wm-wallet-low[data-wm-wallet-low-estado="negativo"] .wm-notification-item__subject {
color: var(--wm-error);
}
}
@layer components {
.wm-wallet-autotopup {
display: flex;
flex-direction: column;
gap: var(--wm-space-6);
max-width: 480px;
}
.wm-wallet-autotopup__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--wm-space-5);
}
.wm-wallet-autotopup__title-group {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.wm-wallet-autotopup__title {
margin: 0;
font-size: var(--wm-font-size-body);
font-weight: var(--wm-font-weight-semibold);
color: var(--wm-label-primary);
}
.wm-wallet-autotopup__subtitle {
margin: 0;
font-size: var(--wm-font-size-caption);
color: var(--wm-label-tertiary);
}
.wm-wallet-autotopup .wm-settings-row__control .wm-field {
width: 128px;
}
.wm-wallet-autotopup .wm-field__input {
text-align: end;
}
.wm-wallet-autotopup[data-wm-wallet-autotopup-estado="desativado"] .wm-settings-group,
.wm-wallet-autotopup[data-wm-wallet-autotopup-estado="desativado"] .wm-wallet-autotopup__cap {
opacity: 0.5;
pointer-events: none;
}
.wm-wallet-autotopup__cap {
display: flex;
flex-direction: column;
gap: var(--wm-space-3);
padding: var(--wm-space-5);
border-radius: var(--wm-radius-md);
background: var(--wm-fill-quaternary, var(--wm-fill-secondary));
}
.wm-wallet-autotopup__cap-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--wm-space-4);
}
.wm-wallet-autotopup__cap-label {
font-size: var(--wm-font-size-subheadline);
font-weight: var(--wm-font-weight-medium);
color: var(--wm-label-primary);
}
.wm-wallet-autotopup__cap-value {
font-size: var(--wm-font-size-subheadline);
font-weight: var(--wm-font-weight-semibold);
font-variant-numeric: tabular-nums;
color: var(--wm-label-secondary);
}
.wm-wallet-autotopup__cap-usage {
margin: 0;
font-size: var(--wm-font-size-caption);
color: var(--wm-label-tertiary);
font-variant-numeric: tabular-nums;
}
.wm-wallet-autotopup__cap[data-wm-perto-do-teto="true"] .wm-progress__fill {
background: var(--wm-warning);
}
.wm-wallet-autotopup__cap-explain {
display: flex;
align-items: flex-start;
gap: var(--wm-space-3);
margin: 0;
padding-block-start: var(--wm-space-3);
border-block-start: var(--wm-border-width-hairline) solid var(--wm-separator);
font-size: var(--wm-font-size-caption);
line-height: var(--wm-line-height-normal);
color: var(--wm-label-secondary);
}
.wm-wallet-autotopup__cap-explain .wm-icon {
flex: none;
width: var(--wm-icon-xs);
height: var(--wm-icon-xs);
margin-block-start: 2px;
color: var(--wm-label-tertiary);
}
.wm-wallet-autotopup__cap-reached {
display: flex;
align-items: flex-start;
gap: var(--wm-space-3);
padding: var(--wm-space-4) var(--wm-space-5);
border-radius: var(--wm-radius-md);
background: var(--wm-error-fill);
color: var(--wm-error);
font-size: var(--wm-font-size-caption);
line-height: var(--wm-line-height-normal);
}
.wm-wallet-autotopup__cap-reached .wm-icon {
flex: none;
width: var(--wm-icon-xs);
height: var(--wm-icon-xs);
margin-block-start: 2px;
}
.wm-wallet-autotopup__cap-reached strong {
font-weight: var(--wm-font-weight-semibold);
}
.wm-wallet-autotopup__actions {
display: flex;
gap: var(--wm-space-4);
}
}
@layer components {
.wm-wallet-meter {
display: flex;
flex-direction: column;
gap: var(--wm-space-5);
max-width: 420px;
}
.wm-wallet-meter__header {
display: flex;
align-items: center;
gap: var(--wm-space-4);
}
.wm-wallet-meter__icon {
flex: none;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--wm-accent-fill);
color: var(--wm-accent);
}
.wm-wallet-meter__icon .wm-icon {
width: var(--wm-icon-md);
height: var(--wm-icon-md);
}
.wm-wallet-meter[data-wm-wallet-meter-estado="concluido"] .wm-wallet-meter__icon {
background: var(--wm-success-fill);
color: var(--wm-success);
}
.wm-wallet-meter[data-wm-wallet-meter-estado="erro"] .wm-wallet-meter__icon {
background: var(--wm-error-fill);
color: var(--wm-error);
}
.wm-wallet-meter__title-group {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.wm-wallet-meter__title {
margin: 0;
font-size: var(--wm-font-size-body);
font-weight: var(--wm-font-weight-semibold);
color: var(--wm-label-primary);
}
.wm-wallet-meter__status {
margin: 0;
font-size: var(--wm-font-size-caption);
color: var(--wm-label-tertiary);
font-variant-numeric: tabular-nums;
}
.wm-wallet-meter__progress-row {
display: flex;
align-items: center;
gap: var(--wm-space-5);
}
.wm-wallet-meter__progress-row[hidden],
.wm-wallet-meter__status[hidden],
.wm-wallet-meter__actions[hidden],
.wm-wallet-meter__resolution[hidden] {
display: none;
}
.wm-wallet-meter__progress-row .wm-progress {
flex: 1 1 auto;
}
.wm-wallet-meter__progress-pct {
flex: none;
min-width: 3ch;
text-align: end;
font-size: var(--wm-font-size-subheadline);
font-weight: var(--wm-font-weight-semibold);
font-variant-numeric: tabular-nums;
color: var(--wm-label-primary);
}
.wm-wallet-meter__consumption {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: var(--wm-space-2) var(--wm-space-3);
padding: var(--wm-space-4) var(--wm-space-5);
border-radius: var(--wm-radius-md);
background: var(--wm-fill-quaternary, var(--wm-fill-secondary));
}
.wm-wallet-meter__consumption-value {
font-size: var(--wm-font-size-headline);
font-weight: var(--wm-font-weight-bold);
font-variant-numeric: tabular-nums;
color: var(--wm-label-primary);
}
.wm-wallet-meter__consumption-unit {
font-size: var(--wm-font-size-caption);
color: var(--wm-label-secondary);
}
.wm-wallet-meter__consumption-estimate {
font-size: var(--wm-font-size-caption);
color: var(--wm-label-tertiary);
}
.wm-wallet-meter__resolution {
display: flex;
align-items: flex-start;
gap: var(--wm-space-3);
margin: 0;
font-size: var(--wm-font-size-caption);
line-height: var(--wm-line-height-normal);
}
.wm-wallet-meter__resolution .wm-icon {
flex: none;
width: var(--wm-icon-xs);
height: var(--wm-icon-xs);
margin-block-start: 2px;
}
.wm-wallet-meter__resolution--sucesso { color: var(--wm-success); }
.wm-wallet-meter__resolution--erro { color: var(--wm-error); }
.wm-wallet-meter__actions {
display: flex;
gap: var(--wm-space-4);
}
@media (prefers-reduced-motion: reduce) {
}
}
@layer components {
.wm-split {
display: flex;
min-height: 0;
flex: 1 1 auto;
}
.wm-split__sidebar {
flex: none;
position: relative;
min-width: 160px;
max-width: 420px;
}
.wm-split__sidebar.is-collapsed {
width: 0 !important;
min-width: 0;
overflow: hidden;
border: none;
}
.wm-split__resizer {
position: absolute;
top: 0;
right: -4px;
width: 8px;
height: 100%;
cursor: col-resize;
z-index: var(--wm-z-sticky);
}
.wm-split__resizer::after {
content: "";
position: absolute;
inset: 0;
margin-inline: 3px;
border-radius: var(--wm-radius-pill);
background: var(--wm-accent);
opacity: 0;
transition: opacity var(--wm-duration-fast) var(--wm-ease-standard);
}
.wm-split__resizer:hover::after {
opacity: 0.35;
}
.wm-split__resizer.is-active::after {
opacity: 0.65;
}
.wm-split__content {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
background: var(--wm-surface-primary);
}
.wm-split__content-scroll {
flex: 1 1 auto;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--wm-scrollbar-thumb) transparent;
}
.wm-split__content-scroll::-webkit-scrollbar {
width: 9px;
}
.wm-split__content-scroll::-webkit-scrollbar-track {
background: transparent;
}
.wm-split__content-scroll::-webkit-scrollbar-thumb {
background: var(--wm-scrollbar-thumb);
border-radius: var(--wm-radius-pill);
border: 3px solid transparent;
background-clip: padding-box;
}
.wm-split__content-scroll::-webkit-scrollbar-thumb:hover {
background: var(--wm-scrollbar-thumb-hover);
border-width: 2px;
background-clip: padding-box;
}
.wm-split__inspector {
flex: none;
position: relative;
width: 280px;
min-width: 200px;
max-width: 420px;
border-inline-start: var(--wm-border-width-hairline) solid
color-mix(in srgb, var(--wm-separator) 85%, transparent);
background: var(--wm-surface-sidebar);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--wm-scrollbar-thumb) transparent;
transition: width var(--wm-duration-normal) var(--wm-ease-emphasized),
min-width var(--wm-duration-normal) var(--wm-ease-emphasized);
}
.wm-split__inspector::-webkit-scrollbar {
width: 9px;
}
.wm-split__inspector::-webkit-scrollbar-track {
background: transparent;
}
.wm-split__inspector::-webkit-scrollbar-thumb {
background: var(--wm-scrollbar-thumb);
border-radius: var(--wm-radius-pill);
border: 3px solid transparent;
background-clip: padding-box;
}
.wm-split__inspector.is-collapsed {
width: 0 !important;
min-width: 0;
overflow: hidden;
border: none;
}
.wm-split__inspector .wm-split__resizer {
left: -4px;
right: auto;
}
@media (prefers-reduced-motion: reduce) {
.wm-split__inspector {
transition: none;
}
}
@media (max-width: 720px) {
.wm-split__inspector {
display: none;
}
}
}