noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
fb7007c976b52023cb927e37a6bcc1734b778118
livewire-material/resources/dist/error-page-fallback.css
T
Andreas Reinhold / reiniandClaude Opus 5 247c596c3a Cut duplicated and speculative code across the package 
An over-engineering audit of the whole tree, applied in five reviewed
batches. Behaviour stays the same except where UPGRADE.md says otherwise.

PHP: the showcase and error-page stylesheets are prebuilt into
resources/dist by bin/stylesheets.mjs, through Vite's own postcss-import
(first occurrence kept, the order an application's build gives), instead
of Stylesheets::bundle() inlining imports on every request; only the
import walk DesignGuard needs stays. SchemeStylesheet::withProfiles()
replaces three copies of the scheme-plus-profiles loop, material:scheme
leaves spec and contrast checks to the node script that already made
them, and the error page's scheme cache, the hashed view namespace, the
translations path with no lang/ folder and DesignGuard's 1.x-name hints
are gone.

JS: the androidx shape port progress.js and both bin scripts each carried
lives once in resources/js/shapes.js (the generated SVGs are unchanged);
util.js holds ringIndex(), ms(), reopenGuard() and remember(), which
were written out several times; listeners are released through
AbortController; tooltip.js's hoverPopover() serves the rich tooltip too.

CSS: every rule for an element inside the navigation rail queries
`--md-navigation-rail-value` instead of repeating the seven collapsed
conditions under five media branches; badge, alert, progress, slider and
button read one non-inheriting colour-role table (components/color.css);
the dialog chrome, the submenu's popover chrome, the chip's state layer
and touch target, and the visually-hidden inputs use the shared rules
they copied; foundation/tokens.css is folded into foundation.css.

Views: Support\Field and Support\Link replace the error-key, bound-value
and link-attribute blocks copied into the fields and link components;
the timepicker period group, the menu filter and the showcase head are
partials; the datepicker's steppers and entry fields are loops; component
docblocks no longer restate SKILL.md.

Tests and tooling: one dataset-driven ComponentStylesheetsTest replaces
four per-group files, DesignGuardTest and the layout-component tests use
datasets, browser tests share one ready() helper, CSS parsing lives in
ComponentStylesheet alone. docs/audits and the finding IDs citing it are
removed, as are pestphp/pest-plugin-laravel, the unused composer scripts
and check:font; the lint job runs in the feature job, which now installs
node packages so the prebuilt-stylesheet staleness test runs in CI.

Feature suite 1177 passed, Chrome browser suite 299 passed.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-17 19:29:21 +02:00

1803 lines
69 KiB
CSS
Raw Blame History

@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@layer material.reset {
*,
::after,
::before,
::backdrop,
::file-selector-button {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0 solid;
}
html,
:host {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
tab-size: 4;
font-feature-settings: normal;
font-variation-settings: normal;
-webkit-tap-highlight-color: transparent;
}
hr {
height: 0;
color: inherit;
border-top-width: 1px;
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
-webkit-text-decoration: inherit;
text-decoration: inherit;
}
b,
strong {
font-weight: bolder;
}
code,
kbd,
samp,
pre {
font-family: var(--md-ref-typeface-mono);
font-feature-settings: normal;
font-variation-settings: normal;
font-size: 1em;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse;
}
:-moz-focusring:where(:not(iframe)) {
outline: auto;
}
progress {
vertical-align: baseline;
}
summary {
display: list-item;
}
ol,
ul,
menu {
list-style: none;
}
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
vertical-align: middle;
}
img,
video {
max-width: 100%;
height: auto;
}
button,
input,
select,
optgroup,
textarea,
::file-selector-button {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
border-radius: 0;
background-color: transparent;
opacity: 1;
}
:where(select:is([multiple], [size])) optgroup {
font-weight: bolder;
}
:where(select:is([multiple], [size])) optgroup option {
padding-inline-start: 20px;
}
::file-selector-button {
margin-inline-end: 4px;
}
::placeholder {
opacity: 1;
color: var(--md-sys-color-on-surface-variant);
}
textarea {
resize: vertical;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-date-and-time-value {
min-height: 1lh;
text-align: inherit;
}
::-webkit-datetime-edit {
display: inline-flex;
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
padding-block: 0;
}
::-webkit-calendar-picker-indicator {
line-height: 1;
}
:-moz-ui-invalid {
box-shadow: none;
}
button,
input:where([type='button'], [type='reset'], [type='submit']),
::file-selector-button {
appearance: button;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
}
[hidden]:where(:not([hidden='until-found'])) {
display: none !important;
}
[x-cloak] {
display: none !important;
}
@layer material.tokens {
:root,
[data-theme='light'] {
color-scheme: light;
--md-sys-color-background: #fdf7fe;
--md-sys-color-on-background: #34313a;
--md-sys-color-surface: #fdf7fe;
--md-sys-color-surface-dim: #ded8e4;
--md-sys-color-surface-bright: #fdf7fe;
--md-sys-color-surface-container-lowest: #ffffff;
--md-sys-color-surface-container-low: #f8f1fa;
--md-sys-color-surface-container: #f2ecf5;
--md-sys-color-surface-container-high: #ece6f0;
--md-sys-color-surface-container-highest: #e7e0ec;
--md-sys-color-on-surface: #34313a;
--md-sys-color-on-surface-variant: #615d68;
--md-sys-color-outline: #7d7983;
--md-sys-color-outline-variant: #b5b0bb;
--md-sys-color-inverse-surface: #0f0d12;
--md-sys-color-inverse-on-surface: #a09ba1;
--md-sys-color-primary: #655789;
--md-sys-color-primary-dim: #594b7c;
--md-sys-color-on-primary: #fdf7ff;
--md-sys-color-primary-container: #d4c3fd;
--md-sys-color-on-primary-container: #493c6c;
--md-sys-color-primary-fixed: #d4c3fd;
--md-sys-color-primary-fixed-dim: #c6b6ee;
--md-sys-color-on-primary-fixed: #352857;
--md-sys-color-on-primary-fixed-variant: #524576;
--md-sys-color-inverse-primary: #d4c3fd;
--md-sys-color-secondary: #625c71;
--md-sys-color-secondary-dim: #565065;
--md-sys-color-on-secondary: #fdf7ff;
--md-sys-color-secondary-container: #e8def8;
--md-sys-color-on-secondary-container: #554f63;
--md-sys-color-secondary-fixed: #e8def8;
--md-sys-color-secondary-fixed-dim: #dad0ea;
--md-sys-color-on-secondary-fixed: #423c50;
--md-sys-color-on-secondary-fixed-variant: #5f586e;
--md-sys-color-tertiary: #7b5270;
--md-sys-color-tertiary-dim: #6e4664;
--md-sys-color-on-tertiary: #fff7f9;
--md-sys-color-tertiary-container: #f4bfe3;
--md-sys-color-on-tertiary-container: #5f3956;
--md-sys-color-tertiary-fixed: #f4bfe3;
--md-sys-color-tertiary-fixed-dim: #e5b2d5;
--md-sys-color-on-tertiary-fixed: #4a2642;
--md-sys-color-on-tertiary-fixed-variant: #694260;
--md-sys-color-error: #a8364b;
--md-sys-color-error-dim: #6b0221;
--md-sys-color-on-error: #fff7f7;
--md-sys-color-error-container: #f97386;
--md-sys-color-on-error-container: #6e0523;
--md-sys-color-success: #006d46;
--md-sys-color-on-success: #e7ffed;
--md-sys-color-success-container: #86f9bc;
--md-sys-color-on-success-container: #00734a;
--md-sys-color-warning: #7c5900;
--md-sys-color-on-warning: #fff8f1;
--md-sys-color-warning-container: #fab925;
--md-sys-color-on-warning-container: #6a4b00;
--md-sys-color-info: #005bc5;
--md-sys-color-on-info: #f9f8ff;
--md-sys-color-info-container: #1c7afc;
--md-sys-color-on-info-container: #001435;
--md-sys-color-inverse-error: #f97386;
--md-sys-color-inverse-success: #3bb27b;
--md-sys-color-inverse-warning: #f3b31e;
--md-sys-color-inverse-info: #699cff;
}
[data-theme='dark'] {
color-scheme: dark;
--md-sys-color-background: #0f0d12;
--md-sys-color-on-background: #eae3ef;
--md-sys-color-surface: #0f0d12;
--md-sys-color-surface-dim: #0f0d12;
--md-sys-color-surface-bright: #2e2b34;
--md-sys-color-surface-container-lowest: #000000;
--md-sys-color-surface-container-low: #141218;
--md-sys-color-surface-container: #1b181f;
--md-sys-color-surface-container-high: #211e26;
--md-sys-color-surface-container-highest: #27242d;
--md-sys-color-on-surface: #eae3ef;
--md-sys-color-on-surface-variant: #aea9b4;
--md-sys-color-outline: #78737e;
--md-sys-color-outline-variant: #4a4650;
--md-sys-color-inverse-surface: #fdf7fe;
--md-sys-color-inverse-on-surface: #575459;
--md-sys-color-primary: #cdc0ec;
--md-sys-color-primary-dim: #bfb2de;
--md-sys-color-on-primary: #443a5f;
--md-sys-color-primary-container: #574d72;
--md-sys-color-on-primary-container: #e9deff;
--md-sys-color-primary-fixed: #ded0fe;
--md-sys-color-primary-fixed-dim: #d0c3ef;
--md-sys-color-on-primary-fixed: #3c3256;
--md-sys-color-on-primary-fixed-variant: #594e74;
--md-sys-color-inverse-primary: #645980;
--md-sys-color-secondary: #cbc2db;
--md-sys-color-secondary-dim: #beb5cd;
--md-sys-color-on-secondary: #433d51;
--md-sys-color-secondary-container: #3e384c;
--md-sys-color-on-secondary-container: #c4bbd4;
--md-sys-color-secondary-fixed: #e8def8;
--md-sys-color-secondary-fixed-dim: #dad0ea;
--md-sys-color-on-secondary-fixed: #423c50;
--md-sys-color-on-secondary-fixed-variant: #5f586e;
--md-sys-color-tertiary: #ffcfef;
--md-sys-color-tertiary-dim: #f4bfe3;
--md-sys-color-on-tertiary: #69415f;
--md-sys-color-tertiary-container: #f4bfe3;
--md-sys-color-on-tertiary-container: #5f3956;
--md-sys-color-tertiary-fixed: #f4bfe3;
--md-sys-color-tertiary-fixed-dim: #e5b2d5;
--md-sys-color-on-tertiary-fixed: #4a2642;
--md-sys-color-on-tertiary-fixed-variant: #694260;
--md-sys-color-error: #f97386;
--md-sys-color-error-dim: #c44b5f;
--md-sys-color-on-error: #490013;
--md-sys-color-error-container: #871c34;
--md-sys-color-on-error-container: #ff97a3;
--md-sys-color-success: #3bb27b;
--md-sys-color-on-success: #002615;
--md-sys-color-success-container: #059460;
--md-sys-color-on-success-container: #001e10;
--md-sys-color-warning: #f3b31e;
--md-sys-color-on-warning: #4e3600;
--md-sys-color-warning-container: #e4a604;
--md-sys-color-on-warning-container: #593f00;
--md-sys-color-info: #699cff;
--md-sys-color-on-info: #001e4b;
--md-sys-color-info-container: #0c74f6;
--md-sys-color-on-info-container: #000a23;
--md-sys-color-inverse-error: #a8364b;
--md-sys-color-inverse-success: #006d46;
--md-sys-color-inverse-warning: #7c5900;
--md-sys-color-inverse-info: #005bc5;
}
[data-contrast='medium'],
[data-contrast='medium'][data-theme='light'],
[data-contrast='medium'] [data-theme='light'] {
color-scheme: light;
--md-sys-color-background: #fdf7fe;
--md-sys-color-on-background: #25232b;
--md-sys-color-surface: #fdf7fe;
--md-sys-color-surface-dim: #ded8e4;
--md-sys-color-surface-bright: #fdf7fe;
--md-sys-color-surface-container-lowest: #ffffff;
--md-sys-color-surface-container-low: #f8f1fa;
--md-sys-color-surface-container: #f2ecf5;
--md-sys-color-surface-container-high: #ece6f0;
--md-sys-color-surface-container-highest: #e7e0ec;
--md-sys-color-on-surface: #25232b;
--md-sys-color-on-surface-variant: #45414b;
--md-sys-color-outline: #615d68;
--md-sys-color-outline-variant: #7d7983;
--md-sys-color-inverse-surface: #0f0d12;
--md-sys-color-inverse-on-surface: #c8c3c9;
--md-sys-color-primary: #483b6b;
--md-sys-color-primary-dim: #3c305f;
--md-sys-color-on-primary: #e1d3ff;
--md-sys-color-primary-container: #7b6da0;
--md-sys-color-on-primary-container: #ffffff;
--md-sys-color-primary-fixed: #7b6da0;
--md-sys-color-primary-fixed-dim: #6e6093;
--md-sys-color-on-primary-fixed: #ffffff;
--md-sys-color-on-primary-fixed-variant: #ffffff;
--md-sys-color-inverse-primary: #d4c3fd;
--md-sys-color-secondary: #464054;
--md-sys-color-secondary-dim: #3a3548;
--md-sys-color-on-secondary: #dfd5ef;
--md-sys-color-secondary-container: #787187;
--md-sys-color-on-secondary-container: #ffffff;
--md-sys-color-secondary-fixed: #787187;
--md-sys-color-secondary-fixed-dim: #6c657b;
--md-sys-color-on-secondary-fixed: #ffffff;
--md-sys-color-on-secondary-fixed-variant: #ffffff;
--md-sys-color-tertiary: #5c3653;
--md-sys-color-tertiary-dim: #502b47;
--md-sys-color-on-tertiary: #ffcaee;
--md-sys-color-tertiary-container: #936787;
--md-sys-color-on-tertiary-container: #ffffff;
--md-sys-color-tertiary-fixed: #936787;
--md-sys-color-tertiary-fixed-dim: #855b7a;
--md-sys-color-on-tertiary-fixed: #ffffff;
--md-sys-color-on-tertiary-fixed-variant: #ffffff;
--md-sys-color-error: #821830;
--md-sys-color-error-dim: #6b0221;
--md-sys-color-on-error: #ffcdd1;
--md-sys-color-error-container: #c44b5f;
--md-sys-color-on-error-container: #ffffff;
--md-sys-color-success: #004d30;
--md-sys-color-on-success: #7df0b3;
--md-sys-color-success-container: #008656;
--md-sys-color-on-success-container: #ffffff;
--md-sys-color-warning: #593e00;
--md-sys-color-on-warning: #ffd385;
--md-sys-color-warning-container: #986d00;
--md-sys-color-on-warning-container: #ffffff;
--md-sys-color-info: #003f8e;
--md-sys-color-on-info: #cbd9ff;
--md-sys-color-info-container: #006fef;
--md-sys-color-on-info-container: #ffffff;
--md-sys-color-inverse-error: #ff9da8;
--md-sys-color-inverse-success: #5ace94;
--md-sys-color-inverse-warning: #f3b31e;
--md-sys-color-inverse-info: #98b8ff;
}
[data-contrast='medium'][data-theme='dark'],
[data-contrast='medium'] [data-theme='dark'] {
color-scheme: dark;
--md-sys-color-background: #0f0d12;
--md-sys-color-on-background: #ffffff;
--md-sys-color-surface: #0f0d12;
--md-sys-color-surface-dim: #0f0d12;
--md-sys-color-surface-bright: #2e2b34;
--md-sys-color-surface-container-lowest: #000000;
--md-sys-color-surface-container-low: #141218;
--md-sys-color-surface-container: #1b181f;
--md-sys-color-surface-container-high: #211e26;
--md-sys-color-surface-container-highest: #27242d;
--md-sys-color-on-surface: #ffffff;
--md-sys-color-on-surface-variant: #bcb6c2;
--md-sys-color-outline: #96919c;
--md-sys-color-outline-variant: #78737e;
--md-sys-color-inverse-surface: #fdf7fe;
--md-sys-color-inverse-on-surface: #39373c;
--md-sys-color-primary: #cdc0ec;
--md-sys-color-primary-dim: #bfb2de;
--md-sys-color-on-primary: #3a3054;
--md-sys-color-primary-container: #7a6f96;
--md-sys-color-on-primary-container: #ffffff;
--md-sys-color-primary-fixed: #ded0fe;
--md-sys-color-primary-fixed-dim: #d0c3ef;
--md-sys-color-on-primary-fixed: #180e30;
--md-sys-color-on-primary-fixed-variant: #3c3256;
--md-sys-color-inverse-primary: #5a4f75;
--md-sys-color-secondary: #cbc2db;
--md-sys-color-secondary-dim: #beb5cd;
--md-sys-color-on-secondary: #393347;
--md-sys-color-secondary-container: #787187;
--md-sys-color-on-secondary-container: #ffffff;
--md-sys-color-secondary-fixed: #e8def8;
--md-sys-color-secondary-fixed-dim: #dad0ea;
--md-sys-color-on-secondary-fixed: #221d2f;
--md-sys-color-on-secondary-fixed-variant: #423c50;
--md-sys-color-tertiary: #ffcfef;
--md-sys-color-tertiary-dim: #f4bfe3;
--md-sys-color-on-tertiary: #5e3855;
--md-sys-color-tertiary-container: #f4bfe3;
--md-sys-color-on-tertiary-container: #542f4c;
--md-sys-color-tertiary-fixed: #f4bfe3;
--md-sys-color-tertiary-fixed-dim: #e5b2d5;
--md-sys-color-on-tertiary-fixed: #180015;
--md-sys-color-on-tertiary-fixed-variant: #4a2642;
--md-sys-color-error: #ff9da8;
--md-sys-color-error-dim: #ff8695;
--md-sys-color-on-error: #5f001c;
--md-sys-color-error-container: #c44b5f;
--md-sys-color-on-error-container: #ffffff;
--md-sys-color-success: #5ace94;
--md-sys-color-on-success: #00341e;
--md-sys-color-success-container: #008656;
--md-sys-color-on-success-container: #ffffff;
--md-sys-color-warning: #f3b31e;
--md-sys-color-on-warning: #412d00;
--md-sys-color-warning-container: #e4a604;
--md-sys-color-on-warning-container: #332200;
--md-sys-color-info: #98b8ff;
--md-sys-color-on-info: #002a62;
--md-sys-color-info-container: #006fef;
--md-sys-color-on-info-container: #ffffff;
--md-sys-color-inverse-error: #821830;
--md-sys-color-inverse-success: #004d30;
--md-sys-color-inverse-warning: #593e00;
--md-sys-color-inverse-info: #003f8e;
}
[data-contrast='high'],
[data-contrast='high'][data-theme='light'],
[data-contrast='high'] [data-theme='light'] {
color-scheme: light;
--md-sys-color-background: #fdf7fe;
--md-sys-color-on-background: #000000;
--md-sys-color-surface: #fdf7fe;
--md-sys-color-surface-dim: #ded8e4;
--md-sys-color-surface-bright: #fdf7fe;
--md-sys-color-surface-container-lowest: #ffffff;
--md-sys-color-surface-container-low: #f8f1fa;
--md-sys-color-surface-container: #f2ecf5;
--md-sys-color-surface-container-high: #ece6f0;
--md-sys-color-surface-container-highest: #e7e0ec;
--md-sys-color-on-surface: #000000;
--md-sys-color-on-surface-variant: #25232b;
--md-sys-color-outline: #45414b;
--md-sys-color-outline-variant: #54505a;
--md-sys-color-inverse-surface: #0f0d12;
--md-sys-color-inverse-on-surface: #ffffff;
--md-sys-color-primary: #281b49;
--md-sys-color-primary-dim: #1e103f;
--md-sys-color-on-primary: #e1d3ff;
--md-sys-color-primary-container: #584a7b;
--md-sys-color-on-primary-container: #ffffff;
--md-sys-color-primary-fixed: #584a7b;
--md-sys-color-primary-fixed-dim: #4c3f6f;
--md-sys-color-on-primary-fixed: #ffffff;
--md-sys-color-on-primary-fixed-variant: #ffffff;
--md-sys-color-inverse-primary: #d4c3fd;
--md-sys-color-secondary: #262134;
--md-sys-color-secondary-dim: #1c1729;
--md-sys-color-on-secondary: #dfd6ef;
--md-sys-color-secondary-container: #554f64;
--md-sys-color-on-secondary-container: #ffffff;
--md-sys-color-secondary-fixed: #554f64;
--md-sys-color-secondary-fixed-dim: #494358;
--md-sys-color-on-secondary-fixed: #ffffff;
--md-sys-color-on-secondary-fixed-variant: #ffffff;
--md-sys-color-tertiary: #391733;
--md-sys-color-tertiary-dim: #2e0d28;
--md-sys-color-on-tertiary: #ffcbee;
--md-sys-color-tertiary-container: #6d4563;
--md-sys-color-on-tertiary-container: #ffffff;
--md-sys-color-tertiary-fixed: #6d4563;
--md-sys-color-tertiary-fixed-dim: #603a57;
--md-sys-color-on-tertiary-fixed: #ffffff;
--md-sys-color-on-tertiary-fixed-variant: #ffffff;
--md-sys-color-error: #500016;
--md-sys-color-error-dim: #3d000f;
--md-sys-color-on-error: #ffced2;
--md-sys-color-error-container: #97283e;
--md-sys-color-on-error-container: #ffffff;
--md-sys-color-success: #002a18;
--md-sys-color-on-success: #7df0b4;
--md-sys-color-success-container: #005f3c;
--md-sys-color-on-success-container: #ffffff;
--md-sys-color-warning: #312100;
--md-sys-color-on-warning: #ffd486;
--md-sys-color-warning-container: #6c4d00;
--md-sys-color-on-warning-container: #ffffff;
--md-sys-color-info: #002252;
--md-sys-color-on-info: #ccdaff;
--md-sys-color-info-container: #004eac;
--md-sys-color-on-info-container: #ffffff;
--md-sys-color-inverse-error: #ffdddf;
--md-sys-color-inverse-success: #89fcbf;
--md-sys-color-inverse-warning: #ffe2b1;
--md-sys-color-inverse-info: #dde5ff;
}
[data-contrast='high'][data-theme='dark'],
[data-contrast='high'] [data-theme='dark'] {
color-scheme: dark;
--md-sys-color-background: #0f0d12;
--md-sys-color-on-background: #ffffff;
--md-sys-color-surface: #0f0d12;
--md-sys-color-surface-dim: #0f0d12;
--md-sys-color-surface-bright: #2e2b34;
--md-sys-color-surface-container-lowest: #000000;
--md-sys-color-surface-container-low: #141218;
--md-sys-color-surface-container: #1b181f;
--md-sys-color-surface-container-high: #211e26;
--md-sys-color-surface-container-highest: #27242d;
--md-sys-color-on-surface: #ffffff;
--md-sys-color-on-surface-variant: #eae3ef;
--md-sys-color-outline: #bcb6c2;
--md-sys-color-outline-variant: #a7a1ad;
--md-sys-color-inverse-surface: #fdf7fe;
--md-sys-color-inverse-on-surface: #000000;
--md-sys-color-primary: #ebe1ff;
--md-sys-color-primary-dim: #ded0fe;
--md-sys-color-on-primary: #302649;
--md-sys-color-primary-container: #aa9dc8;
--md-sys-color-on-primary-container: #000000;
--md-sys-color-primary-fixed: #ded0fe;
--md-sys-color-primary-fixed-dim: #d0c3ef;
--md-sys-color-on-primary-fixed: #000000;
--md-sys-color-on-primary-fixed-variant: #180e30;
--md-sys-color-inverse-primary: #3c3256;
--md-sys-color-secondary: #ebe1fb;
--md-sys-color-secondary-dim: #ddd3ed;
--md-sys-color-on-secondary: #2e293c;
--md-sys-color-secondary-container: #a8a0b8;
--md-sys-color-on-secondary-container: #000000;
--md-sys-color-secondary-fixed: #e8def8;
--md-sys-color-secondary-fixed-dim: #dad0ea;
--md-sys-color-on-secondary-fixed: #000000;
--md-sys-color-on-secondary-fixed-variant: #221d2f;
--md-sys-color-tertiary: #ffdbf2;
--md-sys-color-tertiary-dim: #fac5e9;
--md-sys-color-on-tertiary: #43203b;
--md-sys-color-tertiary-container: #f4bfe3;
--md-sys-color-on-tertiary-container: #2e0e29;
--md-sys-color-tertiary-fixed: #f4bfe3;
--md-sys-color-tertiary-fixed-dim: #e5b2d5;
--md-sys-color-on-tertiary-fixed: #000000;
--md-sys-color-on-tertiary-fixed-variant: #180015;
--md-sys-color-error: #ffdddf;
--md-sys-color-error-dim: #ffc7cb;
--md-sys-color-on-error: #5f001c;
--md-sys-color-error-container: #ff798c;
--md-sys-color-on-error-container: #000000;
--md-sys-color-success: #89fcbf;
--md-sys-color-on-success: #00341e;
--md-sys-color-success-container: #42b880;
--md-sys-color-on-success-container: #000000;
--md-sys-color-warning: #ffe2b1;
--md-sys-color-on-warning: #3c2900;
--md-sys-color-warning-container: #e4a604;
--md-sys-color-on-warning-container: #000000;
--md-sys-color-info: #dde5ff;
--md-sys-color-on-info: #002a62;
--md-sys-color-info-container: #74a2ff;
--md-sys-color-on-info-container: #000000;
--md-sys-color-inverse-error: #500016;
--md-sys-color-inverse-success: #002a18;
--md-sys-color-inverse-warning: #312100;
--md-sys-color-inverse-info: #002252;
}
}
@layer material.tokens {
:root {
--md-sys-shape-corner-none: 0px;
--md-sys-shape-corner-xs: 4px;
--md-sys-shape-corner-sm: 8px;
--md-sys-shape-corner-md: 12px;
--md-sys-shape-corner-lg: 16px;
--md-sys-shape-corner-lg-increased: 20px;
--md-sys-shape-corner-xl: 28px;
--md-sys-shape-corner-xl-increased: 32px;
--md-sys-shape-corner-xxl: 48px;
--md-sys-shape-corner-full: 9999px;
}
}
@layer material.tokens {
:root {
--md-sys-color-shadow: #000000;
--md-sys-color-scrim: #000000;
--md-sys-elevation-1: 0 1px 2px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 1px 3px 1px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
--md-sys-elevation-2: 0 1px 2px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 2px 6px 2px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
--md-sys-elevation-3: 0 1px 3px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 4px 8px 3px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
--md-sys-elevation-4: 0 2px 3px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 6px 10px 4px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
--md-sys-elevation-5: 0 4px 4px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 8px 12px 6px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
}
}
@layer material.tokens {
:root {
--md-sys-motion-spatial-fast: linear(0, 0.0195, 0.0716, 0.1471, 0.2381, 0.3378, 0.4404, 0.5416, 0.6378, 0.7265, 0.806, 0.8754, 0.9342, 0.9826, 1.0211, 1.0503, 1.0713, 1.0849, 1.0924, 1.0948, 1.0931, 1.0882, 1.0812, 1.0726, 1.0632, 1.0534, 1.0438, 1.0347, 1.0263, 1.0187, 1.0121, 1.0064, 1.0018, 0.9981, 0.9953, 0.9933, 0.992, 0.9913, 0.991, 0.9912, 0.9916, 0.9923, 0.9931, 0.994, 0.9949, 0.9958, 0.9967, 0.9975, 1);
--md-sys-motion-spatial-fast-duration: 350ms;
--md-sys-motion-spatial-default: linear(0, 0.0185, 0.0663, 0.1336, 0.2126, 0.2973, 0.3832, 0.4669, 0.5461, 0.6192, 0.6854, 0.7443, 0.7958, 0.8402, 0.8779, 0.9094, 0.9354, 0.9564, 0.9731, 0.9861, 0.996, 1.0033, 1.0085, 1.0119, 1.014, 1.015, 1.0152, 1.0148, 1.014, 1.0129, 1.0117, 1.0104, 1.0091, 1.0078, 1.0066, 1.0055, 1.0046, 1.0037, 1.0029, 1.0023, 1.0017, 1.0013, 1.0009, 1.0006, 1.0004, 1.0002, 1, 0.9999, 1);
--md-sys-motion-spatial-default-duration: 500ms;
--md-sys-motion-spatial-slow: linear(0, 0.0166, 0.0597, 0.1211, 0.1939, 0.273, 0.354, 0.434, 0.5107, 0.5826, 0.6487, 0.7084, 0.7615, 0.8081, 0.8484, 0.8829, 0.912, 0.9361, 0.9559, 0.9719, 0.9845, 0.9943, 1.0017, 1.0071, 1.0108, 1.0132, 1.0146, 1.0151, 1.0151, 1.0145, 1.0137, 1.0126, 1.0114, 1.0102, 1.009, 1.0078, 1.0067, 1.0057, 1.0047, 1.0039, 1.0031, 1.0025, 1.0019, 1.0015, 1.0011, 1.0008, 1.0005, 1.0003, 1);
--md-sys-motion-spatial-slow-duration: 650ms;
--md-sys-motion-effects-fast: linear(0, 0.0163, 0.0576, 0.1147, 0.1807, 0.2507, 0.3214, 0.3902, 0.4558, 0.5172, 0.5737, 0.6253, 0.6718, 0.7136, 0.7508, 0.7837, 0.8128, 0.8383, 0.8606, 0.8801, 0.897, 0.9117, 0.9244, 0.9353, 0.9448, 0.9529, 0.9599, 0.9658, 0.9709, 0.9753, 0.979, 0.9822, 0.9849, 0.9872, 0.9892, 0.9909, 0.9923, 0.9935, 0.9945, 0.9954, 0.9961, 0.9967, 0.9972, 0.9977, 0.998, 0.9983, 0.9986, 0.9988, 1);
--md-sys-motion-effects-fast-duration: 150ms;
--md-sys-motion-effects-default: linear(0, 0.0124, 0.0446, 0.0902, 0.1443, 0.2032, 0.2642, 0.3253, 0.3849, 0.4422, 0.4963, 0.547, 0.594, 0.6372, 0.6768, 0.7127, 0.7452, 0.7745, 0.8009, 0.8244, 0.8454, 0.8641, 0.8807, 0.8954, 0.9084, 0.9199, 0.93, 0.9389, 0.9467, 0.9536, 0.9596, 0.9648, 0.9694, 0.9734, 0.9769, 0.98, 0.9826, 0.985, 0.987, 0.9887, 0.9902, 0.9916, 0.9927, 0.9937, 0.9946, 0.9953, 0.9959, 0.9965, 1);
--md-sys-motion-effects-default-duration: 200ms;
--md-sys-motion-effects-slow: linear(0, 0.0139, 0.0496, 0.0995, 0.1583, 0.2216, 0.2865, 0.3509, 0.4131, 0.4722, 0.5275, 0.5788, 0.6258, 0.6687, 0.7075, 0.7424, 0.7737, 0.8016, 0.8264, 0.8484, 0.8678, 0.8849, 0.8999, 0.9131, 0.9247, 0.9347, 0.9435, 0.9512, 0.9578, 0.9636, 0.9686, 0.973, 0.9767, 0.98, 0.9828, 0.9852, 0.9873, 0.9891, 0.9907, 0.992, 0.9931, 0.9941, 0.995, 0.9957, 0.9963, 0.9969, 0.9973, 0.9977, 1);
--md-sys-motion-effects-slow-duration: 300ms;
--md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
--md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
--md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
--md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
--md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
--md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
--md-sys-motion-duration-short: 150ms;
--md-sys-motion-duration-medium: 300ms;
--md-sys-motion-duration-long: 500ms;
}
[data-motion="standard"] {
--md-sys-motion-spatial-fast: linear(0, 0.0316, 0.1076, 0.2062, 0.313, 0.4185, 0.517, 0.6056, 0.6828, 0.7486, 0.8036, 0.8487, 0.8852, 0.9142, 0.937, 0.9546, 0.968, 0.9781, 0.9856, 0.991, 0.9948, 0.9975, 0.9992, 1.0004, 1.001, 1.0014, 1.0015, 1.0015, 1.0014, 1.0013, 1.0011, 1.001, 1.0008, 1.0007, 1.0005, 1.0004, 1.0003, 1.0003, 1.0002, 1.0001, 1.0001, 1.0001, 1.0001, 1, 1, 1, 1, 1, 1);
--md-sys-motion-spatial-fast-duration: 350ms;
--md-sys-motion-spatial-default: linear(0, 0.0322, 0.1094, 0.2094, 0.3173, 0.4237, 0.5227, 0.6114, 0.6886, 0.7541, 0.8086, 0.8532, 0.8891, 0.9175, 0.9397, 0.9569, 0.9699, 0.9796, 0.9867, 0.9918, 0.9954, 0.9979, 0.9995, 1.0006, 1.0011, 1.0014, 1.0015, 1.0015, 1.0014, 1.0012, 1.0011, 1.0009, 1.0007, 1.0006, 1.0005, 1.0004, 1.0003, 1.0002, 1.0002, 1.0001, 1.0001, 1.0001, 1, 1, 1, 1, 1, 1, 1);
--md-sys-motion-spatial-default-duration: 500ms;
--md-sys-motion-spatial-slow: linear(0, 0.0311, 0.1061, 0.2037, 0.3095, 0.4143, 0.5125, 0.6009, 0.6782, 0.7442, 0.7995, 0.8451, 0.882, 0.9115, 0.9347, 0.9527, 0.9665, 0.9769, 0.9846, 0.9903, 0.9943, 0.9971, 0.999, 1.0002, 1.0009, 1.0013, 1.0015, 1.0015, 1.0014, 1.0013, 1.0012, 1.001, 1.0008, 1.0007, 1.0006, 1.0005, 1.0004, 1.0003, 1.0002, 1.0002, 1.0001, 1.0001, 1.0001, 1, 1, 1, 1, 1, 1);
--md-sys-motion-spatial-slow-duration: 750ms;
}
@media (prefers-reduced-motion: reduce) {
:root,
[data-motion="standard"] {
--md-sys-motion-spatial-fast-duration: 0ms;
--md-sys-motion-spatial-default-duration: 0ms;
--md-sys-motion-spatial-slow-duration: 0ms;
--md-sys-motion-effects-fast-duration: 0ms;
--md-sys-motion-effects-default-duration: 0ms;
--md-sys-motion-effects-slow-duration: 0ms;
--md-sys-motion-duration-short: 0ms;
--md-sys-motion-duration-medium: 0ms;
--md-sys-motion-duration-long: 0ms;
}
}
}
@layer material.tokens {
:root {
--md-ref-typeface-brand: 'Google Sans Flex', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--md-ref-typeface-plain: var(--md-ref-typeface-brand);
--md-ref-typeface-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
--md-ref-typeface-weight-regular: 400;
--md-ref-typeface-weight-medium: 500;
--md-ref-typeface-weight-bold: 700;
--md-sys-typescale-display-lg: var(--md-ref-typeface-weight-regular) 3.5625rem/4rem var(--md-ref-typeface-brand);
--md-sys-typescale-display-lg-tracking: -0.0125rem;
--md-sys-typescale-emphasized-display-lg: var(--md-ref-typeface-weight-medium) 3.5625rem/4rem var(--md-ref-typeface-brand);
--md-sys-typescale-emphasized-display-lg-tracking: 0rem;
--md-sys-typescale-display-md: var(--md-ref-typeface-weight-regular) 2.8125rem/3.25rem var(--md-ref-typeface-brand);
--md-sys-typescale-display-md-tracking: 0rem;
--md-sys-typescale-emphasized-display-md: var(--md-ref-typeface-weight-medium) 2.8125rem/3.25rem var(--md-ref-typeface-brand);
--md-sys-typescale-emphasized-display-md-tracking: 0rem;
--md-sys-typescale-display-sm: var(--md-ref-typeface-weight-regular) 2.25rem/2.75rem var(--md-ref-typeface-brand);
--md-sys-typescale-display-sm-tracking: 0rem;
--md-sys-typescale-emphasized-display-sm: var(--md-ref-typeface-weight-medium) 2.25rem/2.75rem var(--md-ref-typeface-brand);
--md-sys-typescale-emphasized-display-sm-tracking: 0rem;
--md-sys-typescale-headline-lg: var(--md-ref-typeface-weight-regular) 2rem/2.5rem var(--md-ref-typeface-brand);
--md-sys-typescale-headline-lg-tracking: 0rem;
--md-sys-typescale-emphasized-headline-lg: var(--md-ref-typeface-weight-medium) 2rem/2.5rem var(--md-ref-typeface-brand);
--md-sys-typescale-emphasized-headline-lg-tracking: 0rem;
--md-sys-typescale-headline-md: var(--md-ref-typeface-weight-regular) 1.75rem/2.25rem var(--md-ref-typeface-brand);
--md-sys-typescale-headline-md-tracking: 0rem;
--md-sys-typescale-emphasized-headline-md: var(--md-ref-typeface-weight-medium) 1.75rem/2.25rem var(--md-ref-typeface-brand);
--md-sys-typescale-emphasized-headline-md-tracking: 0rem;
--md-sys-typescale-headline-sm: var(--md-ref-typeface-weight-regular) 1.5rem/2rem var(--md-ref-typeface-brand);
--md-sys-typescale-headline-sm-tracking: 0rem;
--md-sys-typescale-emphasized-headline-sm: var(--md-ref-typeface-weight-medium) 1.5rem/2rem var(--md-ref-typeface-brand);
--md-sys-typescale-emphasized-headline-sm-tracking: 0rem;
--md-sys-typescale-title-lg: var(--md-ref-typeface-weight-regular) 1.375rem/1.75rem var(--md-ref-typeface-brand);
--md-sys-typescale-title-lg-tracking: 0rem;
--md-sys-typescale-emphasized-title-lg: var(--md-ref-typeface-weight-medium) 1.375rem/1.75rem var(--md-ref-typeface-brand);
--md-sys-typescale-emphasized-title-lg-tracking: 0rem;
--md-sys-typescale-title-md: var(--md-ref-typeface-weight-medium) 1rem/1.5rem var(--md-ref-typeface-plain);
--md-sys-typescale-title-md-tracking: 0.0125rem;
--md-sys-typescale-emphasized-title-md: var(--md-ref-typeface-weight-bold) 1rem/1.5rem var(--md-ref-typeface-plain);
--md-sys-typescale-emphasized-title-md-tracking: 0.009375rem;
--md-sys-typescale-title-sm: var(--md-ref-typeface-weight-medium) 0.875rem/1.25rem var(--md-ref-typeface-plain);
--md-sys-typescale-title-sm-tracking: 0.00625rem;
--md-sys-typescale-emphasized-title-sm: var(--md-ref-typeface-weight-bold) 0.875rem/1.25rem var(--md-ref-typeface-plain);
--md-sys-typescale-emphasized-title-sm-tracking: 0.00625rem;
--md-sys-typescale-body-lg: var(--md-ref-typeface-weight-regular) 1rem/1.5rem var(--md-ref-typeface-plain);
--md-sys-typescale-body-lg-tracking: 0.03125rem;
--md-sys-typescale-emphasized-body-lg: var(--md-ref-typeface-weight-medium) 1rem/1.5rem var(--md-ref-typeface-plain);
--md-sys-typescale-emphasized-body-lg-tracking: 0.009375rem;
--md-sys-typescale-body-md: var(--md-ref-typeface-weight-regular) 0.875rem/1.25rem var(--md-ref-typeface-plain);
--md-sys-typescale-body-md-tracking: 0.0125rem;
--md-sys-typescale-emphasized-body-md: var(--md-ref-typeface-weight-medium) 0.875rem/1.25rem var(--md-ref-typeface-plain);
--md-sys-typescale-emphasized-body-md-tracking: 0.015625rem;
--md-sys-typescale-body-sm: var(--md-ref-typeface-weight-regular) 0.75rem/1rem var(--md-ref-typeface-plain);
--md-sys-typescale-body-sm-tracking: 0.025rem;
--md-sys-typescale-emphasized-body-sm: var(--md-ref-typeface-weight-medium) 0.75rem/1rem var(--md-ref-typeface-plain);
--md-sys-typescale-emphasized-body-sm-tracking: 0.025rem;
--md-sys-typescale-label-lg: var(--md-ref-typeface-weight-medium) 0.875rem/1.25rem var(--md-ref-typeface-plain);
--md-sys-typescale-label-lg-tracking: 0.00625rem;
--md-sys-typescale-emphasized-label-lg: var(--md-ref-typeface-weight-bold) 0.875rem/1.25rem var(--md-ref-typeface-plain);
--md-sys-typescale-emphasized-label-lg-tracking: 0.00625rem;
--md-sys-typescale-label-md: var(--md-ref-typeface-weight-medium) 0.75rem/1rem var(--md-ref-typeface-plain);
--md-sys-typescale-label-md-tracking: 0.03125rem;
--md-sys-typescale-emphasized-label-md: var(--md-ref-typeface-weight-bold) 0.75rem/1rem var(--md-ref-typeface-plain);
--md-sys-typescale-emphasized-label-md-tracking: 0.03125rem;
--md-sys-typescale-label-sm: var(--md-ref-typeface-weight-medium) 0.6875rem/1rem var(--md-ref-typeface-plain);
--md-sys-typescale-label-sm-tracking: 0.03125rem;
--md-sys-typescale-emphasized-label-sm: var(--md-ref-typeface-weight-bold) 0.6875rem/1rem var(--md-ref-typeface-plain);
--md-sys-typescale-emphasized-label-sm-tracking: 0.03125rem;
}
}
@layer material.tokens {
:root {
--md-sys-state-hover-state-layer-opacity: 0.08;
--md-sys-state-focus-state-layer-opacity: 0.1;
--md-sys-state-pressed-state-layer-opacity: 0.1;
--md-sys-state-dragged-state-layer-opacity: 0.16;
--md-sys-state-disabled-content-opacity: 0.38;
--md-sys-state-disabled-container-opacity: 0.12;
}
}
@layer material.tokens {
:root {
--md-sys-measurement-space25: 2px;
--md-sys-measurement-space50: 4px;
--md-sys-measurement-space75: 6px;
--md-sys-measurement-space100: 8px;
--md-sys-measurement-space125: 10px;
--md-sys-measurement-space200: 16px;
--md-sys-measurement-space300: 24px;
--md-sys-measurement-space400: 32px;
--md-sys-measurement-space500: 40px;
--md-sys-measurement-space600: 48px;
--md-sys-measurement-space700: 56px;
--md-sys-measurement-space800: 64px;
--md-sys-measurement-space900: 72px;
}
}
@layer material.base {
}
@layer material.base {
html {
background-color: var(--md-sys-color-surface);
color: var(--md-sys-color-on-surface);
font-family: var(--md-ref-typeface-brand);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
@layer material.base {
.md-state-layer {
position: relative;
isolation: isolate;
&::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background-color: currentColor;
opacity: 0;
pointer-events: none;
transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
}
@media (hover: hover) {
&:hover::before {
opacity: var(--md-sys-state-hover-state-layer-opacity);
}
}
&:focus-visible::before {
opacity: var(--md-sys-state-focus-state-layer-opacity);
}
&:active::before {
opacity: var(--md-sys-state-pressed-state-layer-opacity);
}
&[data-md-dragged]::before {
opacity: var(--md-sys-state-dragged-state-layer-opacity);
}
&:disabled::before,
&[aria-disabled='true']::before {
display: none;
}
}
.md-focus-ring {
outline: none;
&:focus-visible {
outline: 3px solid var(--md-sys-color-secondary);
outline-offset: 2px;
}
}
.md-touch-target {
position: relative;
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
min-width: var(--md-sys-measurement-space600);
min-height: var(--md-sys-measurement-space600);
transform: translate(-50%, -50%);
}
}
.md-link {
cursor: pointer;
text-decoration-line: underline;
text-decoration-thickness: from-font;
text-underline-offset: 0.15em;
border-radius: var(--md-sys-shape-corner-xs);
&:focus-visible {
outline: 3px solid var(--md-sys-color-secondary);
outline-offset: 2px;
}
}
}
@layer material.text {
.md-type-display-lg {
font: var(--md-sys-typescale-display-lg);
letter-spacing: var(--md-sys-typescale-display-lg-tracking);
font-variation-settings: normal;
}
.md-type-emphasized-display-lg {
font: var(--md-sys-typescale-emphasized-display-lg);
letter-spacing: var(--md-sys-typescale-emphasized-display-lg-tracking);
font-variation-settings: "ROND" 100;
}
.md-type-display-md {
font: var(--md-sys-typescale-display-md);
letter-spacing: var(--md-sys-typescale-display-md-tracking);
font-variation-settings: normal;
}
.md-type-emphasized-display-md {
font: var(--md-sys-typescale-emphasized-display-md);
letter-spacing: var(--md-sys-typescale-emphasized-display-md-tracking);
font-variation-settings: "ROND" 100;
}
.md-type-display-sm {
font: var(--md-sys-typescale-display-sm);
letter-spacing: var(--md-sys-typescale-display-sm-tracking);
font-variation-settings: normal;
}
.md-type-emphasized-display-sm {
font: var(--md-sys-typescale-emphasized-display-sm);
letter-spacing: var(--md-sys-typescale-emphasized-display-sm-tracking);
font-variation-settings: "ROND" 100;
}
.md-type-headline-lg {
font: var(--md-sys-typescale-headline-lg);
letter-spacing: var(--md-sys-typescale-headline-lg-tracking);
font-variation-settings: normal;
}
.md-type-emphasized-headline-lg {
font: var(--md-sys-typescale-emphasized-headline-lg);
letter-spacing: var(--md-sys-typescale-emphasized-headline-lg-tracking);
font-variation-settings: "ROND" 100;
}
.md-type-headline-md {
font: var(--md-sys-typescale-headline-md);
letter-spacing: var(--md-sys-typescale-headline-md-tracking);
font-variation-settings: normal;
}
.md-type-emphasized-headline-md {
font: var(--md-sys-typescale-emphasized-headline-md);
letter-spacing: var(--md-sys-typescale-emphasized-headline-md-tracking);
font-variation-settings: "ROND" 100;
}
.md-type-headline-sm {
font: var(--md-sys-typescale-headline-sm);
letter-spacing: var(--md-sys-typescale-headline-sm-tracking);
font-variation-settings: normal;
}
.md-type-emphasized-headline-sm {
font: var(--md-sys-typescale-emphasized-headline-sm);
letter-spacing: var(--md-sys-typescale-emphasized-headline-sm-tracking);
font-variation-settings: "ROND" 100;
}
.md-type-title-lg {
font: var(--md-sys-typescale-title-lg);
letter-spacing: var(--md-sys-typescale-title-lg-tracking);
font-variation-settings: normal;
}
.md-type-emphasized-title-lg {
font: var(--md-sys-typescale-emphasized-title-lg);
letter-spacing: var(--md-sys-typescale-emphasized-title-lg-tracking);
font-variation-settings: "ROND" 100;
}
.md-type-title-md {
font: var(--md-sys-typescale-title-md);
letter-spacing: var(--md-sys-typescale-title-md-tracking);
font-variation-settings: normal;
}
.md-type-emphasized-title-md {
font: var(--md-sys-typescale-emphasized-title-md);
letter-spacing: var(--md-sys-typescale-emphasized-title-md-tracking);
font-variation-settings: "ROND" 100;
}
.md-type-title-sm {
font: var(--md-sys-typescale-title-sm);
letter-spacing: var(--md-sys-typescale-title-sm-tracking);
font-variation-settings: normal;
}
.md-type-emphasized-title-sm {
font: var(--md-sys-typescale-emphasized-title-sm);
letter-spacing: var(--md-sys-typescale-emphasized-title-sm-tracking);
font-variation-settings: "ROND" 100;
}
.md-type-body-lg {
font: var(--md-sys-typescale-body-lg);
letter-spacing: var(--md-sys-typescale-body-lg-tracking);
font-variation-settings: normal;
}
.md-type-emphasized-body-lg {
font: var(--md-sys-typescale-emphasized-body-lg);
letter-spacing: var(--md-sys-typescale-emphasized-body-lg-tracking);
font-variation-settings: "ROND" 100;
}
.md-type-body-md {
font: var(--md-sys-typescale-body-md);
letter-spacing: var(--md-sys-typescale-body-md-tracking);
font-variation-settings: normal;
}
.md-type-emphasized-body-md {
font: var(--md-sys-typescale-emphasized-body-md);
letter-spacing: var(--md-sys-typescale-emphasized-body-md-tracking);
font-variation-settings: "ROND" 100;
}
.md-type-body-sm {
font: var(--md-sys-typescale-body-sm);
letter-spacing: var(--md-sys-typescale-body-sm-tracking);
font-variation-settings: normal;
}
.md-type-emphasized-body-sm {
font: var(--md-sys-typescale-emphasized-body-sm);
letter-spacing: var(--md-sys-typescale-emphasized-body-sm-tracking);
font-variation-settings: "ROND" 100;
}
.md-type-label-lg {
font: var(--md-sys-typescale-label-lg);
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
font-variation-settings: normal;
}
.md-type-emphasized-label-lg {
font: var(--md-sys-typescale-emphasized-label-lg);
letter-spacing: var(--md-sys-typescale-emphasized-label-lg-tracking);
font-variation-settings: "ROND" 100;
}
.md-type-label-md {
font: var(--md-sys-typescale-label-md);
letter-spacing: var(--md-sys-typescale-label-md-tracking);
font-variation-settings: normal;
}
.md-type-emphasized-label-md {
font: var(--md-sys-typescale-emphasized-label-md);
letter-spacing: var(--md-sys-typescale-emphasized-label-md-tracking);
font-variation-settings: "ROND" 100;
}
.md-type-label-sm {
font: var(--md-sys-typescale-label-sm);
letter-spacing: var(--md-sys-typescale-label-sm-tracking);
font-variation-settings: normal;
}
.md-type-emphasized-label-sm {
font: var(--md-sys-typescale-emphasized-label-sm);
letter-spacing: var(--md-sys-typescale-emphasized-label-sm-tracking);
font-variation-settings: "ROND" 100;
}
.md-ink {
color: var(--md-sys-color-on-surface);
}
.md-ink-variant {
color: var(--md-sys-color-on-surface-variant);
}
.md-ink-quiet {
color: var(--md-sys-color-outline);
}
.md-ink-primary {
color: var(--md-sys-color-primary);
}
.md-ink-error {
color: var(--md-sys-color-error);
}
.md-ink-success {
color: var(--md-sys-color-success);
}
.md-ink-warning {
color: var(--md-sys-color-warning);
}
.md-ink-info {
color: var(--md-sys-color-info);
}
.md-ink-inverse {
color: var(--md-sys-color-inverse-on-surface);
}
.md-text-start {
text-align: start;
}
.md-text-center {
text-align: center;
}
.md-text-end {
text-align: end;
}
.md-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.md-line-clamp-2 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.md-line-clamp-3 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.md-nowrap {
white-space: nowrap;
}
.md-tabular {
font-variant-numeric: tabular-nums;
}
.md-mono {
font-family: var(--md-ref-typeface-mono);
}
.md-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border-width: 0;
}
}
@layer material.components {
[data-md-icon] {
flex-shrink: 0;
inline-size: var(--md-icon-size, 24px);
block-size: var(--md-icon-size, 24px);
}
[data-md-icon][data-md-mirror-rtl]:is([dir='rtl'], [dir='rtl'] *) {
transform: scaleX(-1);
}
}
@layer material.components {
[data-md-loading] {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
inline-size: var(--md-loading-size, 48px);
block-size: var(--md-loading-size, 48px);
color: var(--md-sys-color-primary);
& > svg {
inline-size: 100%;
block-size: 100%;
}
& > [data-md-loading-still] {
display: none;
}
@media (prefers-reduced-motion: reduce) {
& > [data-md-loading-animated] {
display: none;
}
& > [data-md-loading-still] {
display: block;
}
}
}
[data-md-loading][data-md-contained] {
border-radius: var(--md-sys-shape-corner-full);
background-color: var(--md-sys-color-primary-container);
color: var(--md-sys-color-on-primary-container);
}
}
@layer material.components {
[data-md-tooltip-anchor] {
display: inline-flex;
}
[data-md-tooltip] {
inset: auto;
margin: 0;
max-inline-size: 200px;
overflow: visible;
border-width: 0;
border-radius: var(--md-sys-shape-corner-xs);
padding-block: var(--md-sys-measurement-space50);
padding-inline: var(--md-sys-measurement-space100);
background-color: var(--md-sys-color-inverse-surface);
color: var(--md-sys-color-inverse-on-surface);
font: var(--md-sys-typescale-body-sm);
letter-spacing: var(--md-sys-typescale-body-sm-tracking);
font-variation-settings: normal;
text-align: center;
white-space: normal;
pointer-events: none;
opacity: 0;
transition-property: opacity;
transition-duration: var(--md-sys-motion-effects-fast-duration);
transition-timing-function: var(--md-sys-motion-effects-fast);
&:popover-open:not([data-md-popover-closing]) {
opacity: 1;
@starting-style {
opacity: 0;
}
}
}
[data-md-tooltip]:is([data-md-side='top'], [data-md-side='bottom']) {
margin-block: var(--md-sys-measurement-space50);
position-try-fallbacks: flip-block;
}
[data-md-tooltip]:is([data-md-side='left'], [data-md-side='right']) {
margin-inline: var(--md-sys-measurement-space50);
position-try-fallbacks: flip-inline;
}
[data-md-tooltip][data-md-side='top'] {
position-area: top;
}
[data-md-tooltip][data-md-side='bottom'] {
position-area: bottom;
}
[data-md-tooltip][data-md-side='left'] {
position-area: left;
}
[data-md-tooltip][data-md-side='right'] {
position-area: right;
}
}
@layer material.components {
@property --md-color {
syntax: '*';
inherits: false;
}
@property --md-on-color {
syntax: '*';
inherits: false;
}
@property --md-container {
syntax: '*';
inherits: false;
}
@property --md-on-container {
syntax: '*';
inherits: false;
}
[data-md-color='primary'] {
--md-color: var(--md-sys-color-primary);
--md-on-color: var(--md-sys-color-on-primary);
--md-container: var(--md-sys-color-primary-container);
--md-on-container: var(--md-sys-color-on-primary-container);
}
[data-md-color='secondary'] {
--md-color: var(--md-sys-color-secondary);
--md-on-color: var(--md-sys-color-on-secondary);
--md-container: var(--md-sys-color-secondary-container);
--md-on-container: var(--md-sys-color-on-secondary-container);
}
[data-md-color='tertiary'] {
--md-color: var(--md-sys-color-tertiary);
--md-on-color: var(--md-sys-color-on-tertiary);
--md-container: var(--md-sys-color-tertiary-container);
--md-on-container: var(--md-sys-color-on-tertiary-container);
}
[data-md-color='error'] {
--md-color: var(--md-sys-color-error);
--md-on-color: var(--md-sys-color-on-error);
--md-container: var(--md-sys-color-error-container);
--md-on-container: var(--md-sys-color-on-error-container);
}
[data-md-color='success'] {
--md-color: var(--md-sys-color-success);
--md-on-color: var(--md-sys-color-on-success);
--md-container: var(--md-sys-color-success-container);
--md-on-container: var(--md-sys-color-on-success-container);
}
[data-md-color='warning'] {
--md-color: var(--md-sys-color-warning);
--md-on-color: var(--md-sys-color-on-warning);
--md-container: var(--md-sys-color-warning-container);
--md-on-container: var(--md-sys-color-on-warning-container);
}
[data-md-color='info'] {
--md-color: var(--md-sys-color-info);
--md-on-color: var(--md-sys-color-on-info);
--md-container: var(--md-sys-color-info-container);
--md-on-container: var(--md-sys-color-on-info-container);
}
}
@layer material.components {
[data-md-button] {
--md-button-color: var(--md-color, var(--md-sys-color-primary));
--md-button-on-color: var(--md-on-color, var(--md-sys-color-on-primary));
--md-button-tone: var(--md-container, var(--md-sys-color-secondary-container));
--md-button-on-tone: var(--md-on-container, var(--md-sys-color-on-secondary-container));
--md-button-tone-selected: var(--md-sys-color-secondary);
--md-button-on-tone-selected: var(--md-sys-color-on-secondary);
--md-button-quiet: var(--md-sys-color-on-surface-variant);
--md-button-container: transparent;
--md-button-label: var(--md-button-color);
--md-button-outline: transparent;
--md-button-elevation: none;
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
block-size: var(--md-button-height);
background-color: var(--md-button-container);
color: var(--md-button-label);
box-shadow: var(--md-button-elevation);
white-space: nowrap;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
transition-property: border-radius, padding, margin, bottom, background-color, color, box-shadow;
transition-duration:
var(--md-sys-motion-spatial-fast-duration), var(--md-sys-motion-spatial-fast-duration),
var(--md-sys-motion-spatial-fast-duration), var(--md-sys-motion-spatial-fast-duration),
var(--md-sys-motion-effects-fast-duration), var(--md-sys-motion-effects-fast-duration), var(--md-sys-motion-effects-fast-duration);
transition-timing-function:
var(--md-sys-motion-spatial-fast), var(--md-sys-motion-spatial-fast),
var(--md-sys-motion-spatial-fast), var(--md-sys-motion-spatial-fast),
var(--md-sys-motion-effects-fast), var(--md-sys-motion-effects-fast), var(--md-sys-motion-effects-fast);
}
[data-md-button][data-md-size='xs'] {
--md-button-height: 32px;
--md-button-padding: var(--md-sys-measurement-space200);
--md-button-gap: var(--md-sys-measurement-space100);
--md-button-icon: 20px;
--md-button-outline-width: 1px;
--md-button-square: var(--md-sys-shape-corner-md);
--md-button-pressed: var(--md-sys-shape-corner-sm);
--md-button-narrow: 28px;
--md-button-default: 32px;
--md-button-wide: 40px;
}
[data-md-button][data-md-size='sm'] {
--md-button-height: 40px;
--md-button-padding: var(--md-sys-measurement-space200);
--md-button-gap: var(--md-sys-measurement-space100);
--md-button-icon: 20px;
--md-button-outline-width: 1px;
--md-button-square: var(--md-sys-shape-corner-md);
--md-button-pressed: var(--md-sys-shape-corner-sm);
--md-button-narrow: 32px;
--md-button-default: 40px;
--md-button-wide: 52px;
}
[data-md-button][data-md-size='sm'][data-md-icon-button] {
--md-button-icon: 24px;
}
[data-md-button][data-md-size='md'] {
--md-button-height: 56px;
--md-button-padding: var(--md-sys-measurement-space300);
--md-button-gap: var(--md-sys-measurement-space100);
--md-button-icon: 24px;
--md-button-outline-width: 1px;
--md-button-square: var(--md-sys-shape-corner-lg);
--md-button-pressed: var(--md-sys-shape-corner-md);
--md-button-narrow: 48px;
--md-button-default: 56px;
--md-button-wide: 72px;
}
[data-md-button][data-md-size='lg'] {
--md-button-height: 96px;
--md-button-padding: var(--md-sys-measurement-space600);
--md-button-gap: 12px;
--md-button-icon: 32px;
--md-button-outline-width: 2px;
--md-button-square: var(--md-sys-shape-corner-xl);
--md-button-pressed: var(--md-sys-shape-corner-lg);
--md-button-narrow: 64px;
--md-button-default: 96px;
--md-button-wide: 128px;
}
[data-md-button][data-md-size='xl'] {
--md-button-height: 136px;
--md-button-padding: var(--md-sys-measurement-space800);
--md-button-gap: var(--md-sys-measurement-space200);
--md-button-icon: 40px;
--md-button-outline-width: 3px;
--md-button-square: var(--md-sys-shape-corner-xl);
--md-button-pressed: var(--md-sys-shape-corner-lg);
--md-button-narrow: 104px;
--md-button-default: 136px;
--md-button-wide: 184px;
}
[data-md-button]:not([data-md-icon-button]) {
gap: var(--md-button-gap);
padding-inline: var(--md-button-padding);
}
[data-md-button]:not([data-md-icon-button]):is([data-md-size='xs'], [data-md-size='sm']) {
font: var(--md-sys-typescale-label-lg);
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
font-variation-settings: normal;
}
[data-md-button]:not([data-md-icon-button])[data-md-size='md'] {
font: var(--md-sys-typescale-title-md);
letter-spacing: var(--md-sys-typescale-title-md-tracking);
font-variation-settings: normal;
}
[data-md-button]:not([data-md-icon-button])[data-md-size='lg'] {
font: var(--md-sys-typescale-headline-sm);
letter-spacing: var(--md-sys-typescale-headline-sm-tracking);
font-variation-settings: normal;
}
[data-md-button]:not([data-md-icon-button])[data-md-size='xl'] {
font: var(--md-sys-typescale-headline-lg);
letter-spacing: var(--md-sys-typescale-headline-lg-tracking);
font-variation-settings: normal;
}
[data-md-button][data-md-icon-button] {
--md-button-width: var(--md-button-default);
inline-size: var(--md-button-width);
&[data-md-width='narrow'] {
--md-button-width: var(--md-button-narrow);
}
&[data-md-width='wide'] {
--md-button-width: var(--md-button-wide);
}
}
:where([data-md-button]) {
border-radius: var(--md-sys-shape-corner-full);
}
:where([data-md-button]):where([data-md-shape='square'], [data-md-selected='true']) {
border-radius: var(--md-button-square);
}
:where([data-md-button]):where([data-md-icon-button][data-md-shape='square'][data-md-selected='true']) {
border-radius: var(--md-sys-shape-corner-full);
}
:where([data-md-button]):where(:active) {
border-radius: var(--md-button-pressed);
}
[data-md-button][data-md-color='primary'] {
--md-button-tone: var(--md-sys-color-secondary-container);
--md-button-on-tone: var(--md-sys-color-on-secondary-container);
}
[data-md-button]:not([data-md-color='primary']) {
--md-button-tone-selected: var(--md-button-color);
--md-button-on-tone-selected: var(--md-button-on-color);
--md-button-quiet: var(--md-button-color);
}
[data-md-button][data-md-variant='filled'] {
--md-button-container: var(--md-button-color);
--md-button-label: var(--md-button-on-color);
&[data-md-selected='false'] {
--md-button-container: var(--md-sys-color-surface-container);
--md-button-label: var(--md-sys-color-on-surface-variant);
}
}
[data-md-button][data-md-variant='tonal'] {
--md-button-container: var(--md-button-tone);
--md-button-label: var(--md-button-on-tone);
&[data-md-selected='true'] {
--md-button-container: var(--md-button-tone-selected);
--md-button-label: var(--md-button-on-tone-selected);
}
}
[data-md-button][data-md-variant='outlined'] {
--md-button-label: var(--md-button-quiet);
--md-button-outline: var(--md-sys-color-outline-variant);
border: var(--md-button-outline-width) solid var(--md-button-outline);
&[data-md-selected='true'] {
--md-button-container: var(--md-sys-color-inverse-surface);
--md-button-label: var(--md-sys-color-inverse-on-surface);
--md-button-outline: transparent;
}
}
[data-md-button][data-md-variant='elevated'] {
--md-button-container: var(--md-sys-color-surface-container-low);
--md-button-elevation: var(--md-sys-elevation-1);
&[data-md-selected='true'] {
--md-button-container: var(--md-button-color);
--md-button-label: var(--md-button-on-color);
}
}
[data-md-button][data-md-variant='text'][data-md-icon-button]:not([data-md-selected='true']) {
--md-button-label: var(--md-button-quiet);
}
[data-md-button][data-md-variant='text']:not([data-md-icon-button])[data-md-selected='true'] {
--md-button-container: var(--md-button-tone);
--md-button-label: var(--md-button-on-tone);
}
@media (hover: hover) {
[data-md-button]:is([data-md-variant='filled'], [data-md-variant='tonal']):hover {
--md-button-elevation: var(--md-sys-elevation-1);
}
[data-md-button][data-md-variant='elevated']:hover {
--md-button-elevation: var(--md-sys-elevation-2);
}
}
[data-md-button]:is(:disabled, [aria-disabled='true']) {
box-shadow: none;
color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
}
[data-md-button]:is([data-md-variant='filled'], [data-md-variant='tonal'], [data-md-variant='elevated'], [data-md-variant='outlined'][data-md-selected='true']):is(:disabled, [aria-disabled='true']) {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
}
[data-md-button]:disabled {
cursor: not-allowed;
}
[data-md-button][aria-disabled='true'] {
pointer-events: none;
}
[data-md-button-icon] {
display: contents;
}
[data-md-button-spinner] {
align-items: center;
justify-content: center;
}
[data-md-button-spinner] > [data-md-loading] {
inline-size: var(--md-button-icon);
block-size: var(--md-button-icon);
color: currentColor;
}
@media (width < 840px) {
[data-md-button] > [data-md-responsive] {
display: none;
}
}
@media (width < 600px) {
[data-md-button][data-md-compact-fab] {
--md-button-height: 56px;
--md-button-padding: var(--md-sys-measurement-space200);
--md-button-gap: var(--md-sys-measurement-space100);
position: fixed;
inset-inline-end: var(--md-sys-measurement-space200);
bottom: calc(var(--material-bottom-bar, 0px) + var(--material-snackbar-height, 0px) + var(--md-sys-measurement-space200));
z-index: 30;
border-radius: var(--md-sys-shape-corner-lg);
background-color: var(--md-sys-color-primary-container);
color: var(--md-sys-color-on-primary-container);
box-shadow: var(--md-sys-elevation-3);
font: var(--md-sys-typescale-title-md);
letter-spacing: var(--md-sys-typescale-title-md-tracking);
font-variation-settings: normal;
}
[data-md-button][data-md-compact-fab] [data-md-icon] {
inline-size: 24px;
block-size: 24px;
}
[data-md-button][data-md-compact-fab][data-md-unavailable] {
display: none;
}
}
}
@layer material.components {
[data-md-shape][style*='--md-shape-size'] {
inline-size: var(--md-shape-size);
block-size: var(--md-shape-size);
}
}
@layer material.components {
body:has(> [data-md-error-page]) {
margin: 0;
min-height: 100dvh;
background-color: var(--md-sys-color-surface);
color: var(--md-sys-color-on-surface);
}
[data-md-error-page] {
display: flex;
min-height: 100dvh;
max-width: 576px;
margin-inline: auto;
flex-direction: column;
align-items: center;
justify-content: center;
padding-inline: var(--md-sys-measurement-space300);
padding-block: var(--md-sys-measurement-space600);
text-align: center;
}
[data-md-error-art] {
position: relative;
display: grid;
flex-shrink: 0;
place-items: center;
width: 192px;
height: 192px;
}
@media (width >= 600px) {
[data-md-error-art] {
width: 240px;
height: 240px;
}
}
[data-md-error-shape] {
position: absolute;
inset: 0;
}
[data-md-error-shape] svg {
width: 100%;
height: 100%;
color: var(--md-sys-color-primary-container);
}
@media (prefers-reduced-motion: no-preference) {
[data-md-error-shape] {
animation: material-error-turn 60s linear infinite;
}
}
@keyframes material-error-turn {
to {
transform: rotate(1turn);
}
}
[data-md-error-code] {
position: relative;
margin: 0;
color: var(--md-sys-color-on-primary-container);
font: var(--md-sys-typescale-emphasized-display-lg);
letter-spacing: var(--md-sys-typescale-emphasized-display-lg-tracking);
font-variation-settings: 'ROND' 100;
font-variant-numeric: tabular-nums;
}
[data-md-error-headline] {
margin: var(--md-sys-measurement-space500) 0 0;
font: var(--md-sys-typescale-headline-md);
letter-spacing: var(--md-sys-typescale-headline-md-tracking);
text-wrap: balance;
}
@media (width >= 600px) {
[data-md-error-headline] {
font: var(--md-sys-typescale-headline-lg);
letter-spacing: var(--md-sys-typescale-headline-lg-tracking);
}
}
[data-md-error-message] {
margin: 12px 0 0;
max-width: 448px;
color: var(--md-sys-color-on-surface-variant);
font: var(--md-sys-typescale-body-lg);
letter-spacing: var(--md-sys-typescale-body-lg-tracking);
text-wrap: balance;
}
[data-md-error-actions] {
display: flex;
margin-top: var(--md-sys-measurement-space500);
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px;
}
}
Reference in New Issue View Git Blame Copy Permalink