@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, 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, 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, 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, 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 { @font-face { font-family: 'Google Sans Flex'; src: url('../fonts/google-sans-flex/GoogleSansFlex-Latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } } @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.layout { [data-md-gap='none'] { --md-gap: 0px; } [data-md-gap='space25'] { --md-gap: var(--md-sys-measurement-space25); } [data-md-gap='space50'] { --md-gap: var(--md-sys-measurement-space50); } [data-md-gap='space75'] { --md-gap: var(--md-sys-measurement-space75); } [data-md-gap='space100'] { --md-gap: var(--md-sys-measurement-space100); } [data-md-gap='space125'] { --md-gap: var(--md-sys-measurement-space125); } [data-md-gap='space200'] { --md-gap: var(--md-sys-measurement-space200); } [data-md-gap='space300'] { --md-gap: var(--md-sys-measurement-space300); } [data-md-gap='space400'] { --md-gap: var(--md-sys-measurement-space400); } [data-md-gap='space500'] { --md-gap: var(--md-sys-measurement-space500); } [data-md-gap='space600'] { --md-gap: var(--md-sys-measurement-space600); } [data-md-gap='space700'] { --md-gap: var(--md-sys-measurement-space700); } [data-md-gap='space800'] { --md-gap: var(--md-sys-measurement-space800); } [data-md-gap='space900'] { --md-gap: var(--md-sys-measurement-space900); } [data-md-padding='space25'] { padding: var(--md-sys-measurement-space25); } [data-md-padding='space50'] { padding: var(--md-sys-measurement-space50); } [data-md-padding='space75'] { padding: var(--md-sys-measurement-space75); } [data-md-padding='space100'] { padding: var(--md-sys-measurement-space100); } [data-md-padding='space125'] { padding: var(--md-sys-measurement-space125); } [data-md-padding='space200'] { padding: var(--md-sys-measurement-space200); } [data-md-padding='space300'] { padding: var(--md-sys-measurement-space300); } [data-md-padding='space400'] { padding: var(--md-sys-measurement-space400); } [data-md-padding='space500'] { padding: var(--md-sys-measurement-space500); } [data-md-padding='space600'] { padding: var(--md-sys-measurement-space600); } [data-md-padding='space700'] { padding: var(--md-sys-measurement-space700); } [data-md-padding='space800'] { padding: var(--md-sys-measurement-space800); } [data-md-padding='space900'] { padding: var(--md-sys-measurement-space900); } } @layer material.visibility { @media (width < 600px) { [data-md-hide-below='medium'] { display: none; } } @media (width < 840px) { [data-md-hide-below='expanded'] { display: none; } } @media (width < 1200px) { [data-md-hide-below='large'] { display: none; } } @media (width < 1600px) { [data-md-hide-below='extra-large'] { display: none; } } @media (width >= 600px) { [data-md-hide-from='medium'] { display: none; } } @media (width >= 840px) { [data-md-hide-from='expanded'] { display: none; } } @media (width >= 1200px) { [data-md-hide-from='large'] { display: none; } } @media (width >= 1600px) { [data-md-hide-from='extra-large'] { display: none; } } } @layer material.layout { :where([data-md-stack]) { --md-gap: 0px; } [data-md-stack] { display: flex; flex-direction: column; gap: var(--md-gap); } [data-md-stack]:is(:not([data-md-align]), [data-md-align='stretch']) > [data-md-button] { align-self: start; } [data-md-stack][data-md-align='start'] { align-items: flex-start; } [data-md-stack][data-md-align='center'] { align-items: center; } [data-md-stack][data-md-align='end'] { align-items: flex-end; } } @layer material.layout { :where([data-md-row]) { --md-gap: 0px; } [data-md-row] { display: flex; flex-direction: row; align-items: center; gap: var(--md-gap); } [data-md-row][data-md-align='start'] { align-items: flex-start; } [data-md-row][data-md-align='end'] { align-items: flex-end; } [data-md-row][data-md-align='stretch'] { align-items: stretch; } [data-md-row][data-md-align='baseline'] { align-items: baseline; } [data-md-row][data-md-justify='start'] { justify-content: flex-start; } [data-md-row][data-md-justify='center'] { justify-content: center; } [data-md-row][data-md-justify='end'] { justify-content: flex-end; } [data-md-row][data-md-justify='between'] { justify-content: space-between; } [data-md-row][data-md-wrap] { flex-wrap: wrap; } @media (width < 600px) { [data-md-row][data-md-stack-below='medium'] { flex-direction: column; } [data-md-row][data-md-stack-below='medium']:not([data-md-align]) { align-items: stretch; } } @media (width < 840px) { [data-md-row][data-md-stack-below='expanded'] { flex-direction: column; } [data-md-row][data-md-stack-below='expanded']:not([data-md-align]) { align-items: stretch; } } @media (width < 1200px) { [data-md-row][data-md-stack-below='large'] { flex-direction: column; } [data-md-row][data-md-stack-below='large']:not([data-md-align]) { align-items: stretch; } } @media (width < 1600px) { [data-md-row][data-md-stack-below='extra-large'] { flex-direction: column; } [data-md-row][data-md-stack-below='extra-large']:not([data-md-align]) { align-items: stretch; } } } @layer material.layout { :where([data-md-grid]) { --md-gap: 0px; } [data-md-grid] { --md-columns: var(--md-columns-compact, 1); display: grid; grid-template-columns: repeat(var(--md-columns), minmax(0, 1fr)); gap: var(--md-gap); @media (width >= 600px) { --md-columns: var(--md-columns-medium, 1); } @media (width >= 840px) { --md-columns: var(--md-columns-expanded, 1); } @media (width >= 1200px) { --md-columns: var(--md-columns-large, 1); } @media (width >= 1600px) { --md-columns: var(--md-columns-extra-large, 1); } } [data-md-grid][data-md-min-item] { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--md-min-item)), 1fr)); } [data-md-grid][data-md-min-item][data-md-columns] { grid-template-columns: repeat( auto-fill, minmax(min(100%, max(var(--md-min-item), (100% - (var(--md-columns) - 1) * var(--md-gap)) / var(--md-columns))), 1fr) ); } } @layer material.layout { [data-md-surface] { background-color: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); } [data-md-surface][data-md-level='surface'] { background-color: var(--md-sys-color-surface); } [data-md-surface][data-md-level='surface-dim'] { background-color: var(--md-sys-color-surface-dim); } [data-md-surface][data-md-level='surface-bright'] { background-color: var(--md-sys-color-surface-bright); } [data-md-surface][data-md-level='surface-container-lowest'] { background-color: var(--md-sys-color-surface-container-lowest); } [data-md-surface][data-md-level='surface-container-low'] { background-color: var(--md-sys-color-surface-container-low); } [data-md-surface][data-md-level='surface-container-high'] { background-color: var(--md-sys-color-surface-container-high); } [data-md-surface][data-md-level='surface-container-highest'] { background-color: var(--md-sys-color-surface-container-highest); } [data-md-surface][data-md-corner='none'] { border-radius: var(--md-sys-shape-corner-none); } [data-md-surface][data-md-corner='xs'] { border-radius: var(--md-sys-shape-corner-xs); } [data-md-surface][data-md-corner='sm'] { border-radius: var(--md-sys-shape-corner-sm); } [data-md-surface][data-md-corner='md'] { border-radius: var(--md-sys-shape-corner-md); } [data-md-surface][data-md-corner='lg'] { border-radius: var(--md-sys-shape-corner-lg); } [data-md-surface][data-md-corner='lg-increased'] { border-radius: var(--md-sys-shape-corner-lg-increased); } [data-md-surface][data-md-corner='xl'] { border-radius: var(--md-sys-shape-corner-xl); } [data-md-surface][data-md-corner='xl-increased'] { border-radius: var(--md-sys-shape-corner-xl-increased); } [data-md-surface][data-md-corner='xxl'] { border-radius: var(--md-sys-shape-corner-xxl); } [data-md-surface][data-md-corner='full'] { border-radius: var(--md-sys-shape-corner-full); } [data-md-surface][data-md-outlined] { border: 1px solid var(--md-sys-color-outline-variant); } [data-md-surface] > * { --md-layout-margin: initial; } } @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-bottom-sheet-scrim] { position: fixed; inset: 0; z-index: 40; background-color: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent); opacity: 0; transition-property: opacity; transition-duration: var(--md-sys-motion-effects-default-duration); transition-timing-function: var(--md-sys-motion-effects-default); } [data-md-bottom-sheet][data-md-open] > [data-md-bottom-sheet-scrim] { opacity: 1; } @starting-style { [data-md-bottom-sheet][data-md-open] > [data-md-bottom-sheet-scrim] { opacity: 0; } } [data-md-bottom-sheet-probe] { position: fixed; inset-inline-start: 0; top: 0; width: 0; visibility: hidden; pointer-events: none; } [data-md-bottom-sheet-panel] { position: fixed; inset-inline: 0; bottom: 0; z-index: 50; display: flex; width: 100%; max-width: 640px; margin-inline: auto; flex-direction: column; max-height: var(--sheet-max-height); touch-action: pan-y; border-radius: var(--md-sys-shape-corner-xl) var(--md-sys-shape-corner-xl) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none); background-color: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface); box-shadow: var(--md-sys-elevation-1); padding-bottom: var(--material-safe-bottom, env(safe-area-inset-bottom)); translate: 0 100%; transition-property: translate; transition-duration: var(--md-sys-motion-effects-default-duration); transition-timing-function: var(--md-sys-motion-easing-emphasized-accelerate); } [data-md-bottom-sheet][data-md-open] > [data-md-bottom-sheet-panel] { translate: 0 0; transition-duration: var(--md-sys-motion-spatial-default-duration); transition-timing-function: var(--md-sys-motion-easing-emphasized-decelerate); } @starting-style { [data-md-bottom-sheet][data-md-open] > [data-md-bottom-sheet-panel] { translate: 0 100%; } } [data-md-bottom-sheet-panel][data-md-preset] { height: var(--sheet-max-height); transition-property: translate, height; transition-duration: var(--md-sys-motion-effects-default-duration), var(--md-sys-motion-spatial-default-duration); transition-timing-function: var(--md-sys-motion-easing-emphasized-accelerate), var(--md-sys-motion-spatial-default); } [data-md-bottom-sheet][data-md-open] > [data-md-bottom-sheet-panel][data-md-preset] { transition-duration: var(--md-sys-motion-spatial-default-duration), var(--md-sys-motion-spatial-default-duration); transition-timing-function: var(--md-sys-motion-easing-emphasized-decelerate), var(--md-sys-motion-spatial-default); } [data-md-bottom-sheet-handle] { display: flex; flex-shrink: 0; justify-content: center; padding-block: 22px; cursor: grab; } [data-md-bottom-sheet-handle]:active { cursor: grabbing; } [data-md-bottom-sheet-grip] { width: 32px; height: 4px; border-radius: var(--md-sys-shape-corner-full); background-color: var(--md-sys-color-on-surface-variant); } [data-md-bottom-sheet-grip]:focus-visible { outline-offset: 4px; } [data-md-bottom-sheet-body] { min-height: 0; flex: 1 1 0%; overflow-y: auto; padding-inline: var(--md-sys-measurement-space300); padding-bottom: var(--md-sys-measurement-space300); } [data-md-bottom-sheet-title] { margin-bottom: var(--md-sys-measurement-space200); font: var(--md-sys-typescale-title-lg); letter-spacing: var(--md-sys-typescale-title-lg-tracking); } [data-md-bottom-sheet-actions] { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--md-sys-measurement-space100); padding-inline: var(--md-sys-measurement-space300); padding-bottom: var(--md-sys-measurement-space300); } } @layer material.components { [data-md-menu] { position: relative; display: inline-flex; } [data-md-menu-trigger] { display: inline-flex; } [data-md-menu-popover], [data-md-submenu] { inset: auto; min-inline-size: 112px; max-inline-size: 280px; max-block-size: min(288px, calc(100dvh - 32px)); overflow-y: auto; border-width: 0; border-radius: var(--md-sys-shape-corner-lg); padding: var(--md-sys-measurement-space50); background-color: var(--material-menu-surface, var(--md-sys-color-surface-container-low)); color: var(--material-menu-ink, var(--md-sys-color-on-surface)); box-shadow: var(--md-sys-elevation-2); opacity: 0; scale: 0.95; transition-property: opacity, scale; transition-duration: var(--md-sys-motion-effects-fast-duration), var(--md-sys-motion-spatial-fast-duration); transition-timing-function: var(--md-sys-motion-effects-fast), var(--md-sys-motion-spatial-fast); &:popover-open:not([data-md-popover-closing]) { opacity: 1; scale: 1; } @starting-style { &:popover-open { opacity: 0; scale: 0.95; } } } [data-md-menu-popover] { --material-menu-surface: var(--md-sys-color-surface-container-low); --material-menu-ink: var(--md-sys-color-on-surface); margin: var(--md-sys-measurement-space50) 0; position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline; } [data-md-menu-popover]:has(> [data-md-menu-filter]) { padding: 0; } [data-md-menu-popover][data-md-vibrant] { --material-menu-surface: var(--md-sys-color-tertiary-container); --material-menu-ink: var(--md-sys-color-on-tertiary-container); } [data-md-menu-popover][data-md-position='bottom-start'] { transform-origin: top; position-area: bottom span-right; } [data-md-menu-popover][data-md-position='bottom-end'] { transform-origin: top; position-area: bottom span-left; } [data-md-menu-popover][data-md-position='top-start'] { transform-origin: bottom; position-area: top span-right; } [data-md-menu-popover][data-md-position='top-end'] { transform-origin: bottom; position-area: top span-left; } [data-md-menu-filter] { position: sticky; inset-block-start: 0; z-index: 1; display: flex; align-items: center; gap: 12px; min-block-size: var(--md-sys-measurement-space600); padding-inline: var(--md-sys-measurement-space200); border-block-end: 1px solid var(--md-sys-color-outline-variant); background-color: var(--material-menu-surface, var(--md-sys-color-surface-container-low)); } [data-md-menu-filter] input { flex: 1; min-inline-size: 0; border-width: 0; background-color: transparent; padding: 0; color: inherit; font: var(--md-sys-typescale-body-lg); letter-spacing: var(--md-sys-typescale-body-lg-tracking); font-variation-settings: normal; outline: none; } [data-md-menu-filter] input::placeholder { color: color-mix(in srgb, var(--material-menu-ink, var(--md-sys-color-on-surface)) 70%, transparent); } [data-md-menu-list] { padding: var(--md-sys-measurement-space50); } [data-md-menu-empty] { padding-inline: var(--md-sys-measurement-space200); padding-block: 12px; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-md); letter-spacing: var(--md-sys-typescale-body-md-tracking); font-variation-settings: normal; } :is([data-md-menu-popover], [data-md-menu-sheet]) [hidden] { display: none; } :is([data-md-menu-popover], [data-md-menu-sheet]) [role^="menuitem"][data-md-active]:not([aria-checked="true"], [aria-current="page"]) { background-color: color-mix(in srgb, var(--material-menu-ink, var(--md-sys-color-on-surface)) 8%, transparent); } [data-md-menu-sheet] { margin-inline: calc(-1 * var(--md-sys-measurement-space300)); padding-inline: var(--md-sys-measurement-space100); } [data-md-menu-sheet]:has(> [data-md-menu-filter]) { padding-inline: 0; } [data-md-menu-sheet] [data-md-menu-filter] { padding-inline: var(--md-sys-measurement-space300); } [data-md-menu-sheet] [data-md-menu-list] { padding-inline: var(--md-sys-measurement-space100); padding-block: var(--md-sys-measurement-space50) 0; } [data-md-menu-sheet] [data-md-submenu] { position: static; inset: auto; inline-size: auto; max-inline-size: none; block-size: auto; max-block-size: none; margin: 0; padding-block: var(--md-sys-measurement-space25); padding-inline: var(--md-sys-measurement-space200) 0; overflow: visible; border-radius: 0; background-color: transparent; color: inherit; box-shadow: none; opacity: 1; scale: none; transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast); } [data-md-menu-sheet] [aria-expanded="true"] + [data-md-submenu] { display: block; @starting-style { opacity: 0; } } [data-md-menu-sheet] [data-md-submenu-chevron] { transition: rotate var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast); } [data-md-menu-sheet] [aria-expanded="true"] > [data-md-submenu-chevron] { rotate: 90deg; &:is([dir='rtl'], [dir='rtl'] *) { rotate: -90deg; } } [data-md-field-menu] { max-block-size: 18rem; overflow-y: auto; padding-block: var(--md-sys-measurement-space100); border-radius: var(--md-sys-shape-corner-xs); background-color: var(--md-sys-color-surface-container); box-shadow: var(--md-sys-elevation-2); } [data-md-field-menu][popover] { inset: auto; top: anchor(bottom); left: anchor(left); width: anchor-size(width); margin: var(--md-sys-measurement-space50) 0; border-width: 0; padding-inline: 0; color: var(--md-sys-color-on-surface); position-try-fallbacks: flip-block; } [data-md-field-option][aria-disabled="true"] { color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); cursor: default; } [data-md-field-option] { display: flex; align-items: center; gap: 12px; min-block-size: var(--md-sys-measurement-space600); padding-inline: var(--md-sys-measurement-space200); color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-body-lg); letter-spacing: var(--md-sys-typescale-body-lg-tracking); font-variation-settings: normal; cursor: pointer; } [data-md-field-option][data-md-active] { background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); } [data-md-field-option][aria-selected="true"] { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } [data-md-field-option][aria-selected="true"][data-md-active] { background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, var(--md-sys-color-secondary-container)); } [data-md-field-check] { margin-inline-start: auto; } [data-md-field-option]:not([aria-selected="true"]) [data-md-field-check] { visibility: hidden; } @supports (appearance: base-select) { select[data-md-field-control]::picker(select) { appearance: base-select; } select[data-md-field-control]::picker(select) { position-try-order: normal; max-block-size: 18rem; max-inline-size: calc(100vw - 32px); margin-block: var(--md-sys-measurement-space50); padding-block: var(--md-sys-measurement-space100); border-width: 0; border-radius: var(--md-sys-shape-corner-xs); background-color: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); box-shadow: var(--md-sys-elevation-2); opacity: 0; transform-origin: top; transition-property: opacity, display, overlay; transition-duration: var(--md-sys-motion-effects-fast-duration); transition-timing-function: var(--md-sys-motion-effects-fast); transition-behavior: allow-discrete; } select[data-md-field-control]:open::picker(select) { opacity: 1; transition-property: opacity, scale, display, overlay; transition-duration: var(--md-sys-motion-spatial-fast-duration); transition-timing-function: var(--md-sys-motion-spatial-fast); } @starting-style { select[data-md-field-control]:open::picker(select) { opacity: 0; scale: 0.95; } } select[data-md-field-control] option { display: flex; align-items: center; gap: 12px; min-block-size: var(--md-sys-measurement-space600); padding-block: 0; padding-inline: var(--md-sys-measurement-space200); background-color: transparent; color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-body-lg); letter-spacing: var(--md-sys-typescale-body-lg-tracking); font-variation-settings: normal; outline: none; cursor: pointer; } @media (hover: hover) { select[data-md-field-control] option:hover { background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); } } select[data-md-field-control] option:focus-visible { background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent); } select[data-md-field-control] option:checked { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } @media (hover: hover) { select[data-md-field-control] option:checked:hover { background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, var(--md-sys-color-secondary-container)); } } select[data-md-field-control] option:checked:focus-visible { background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 10%, var(--md-sys-color-secondary-container)); } select[data-md-field-control] option:disabled { background-color: transparent; color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); cursor: default; } select[data-md-field-control] option::checkmark { content: ""; order: 1; flex: none; inline-size: var(--md-sys-measurement-space300); block-size: var(--md-sys-measurement-space300); margin-inline-start: auto; background-color: currentColor; mask: url("../svg/symbols/outlined/check.svg") center / contain no-repeat; } } } @layer material.components { [data-md-badge] { --md-badge-color: var(--md-color, var(--md-sys-color-error)); --md-badge-on-color: var(--md-on-color, var(--md-sys-color-on-error)); --md-badge-container: var(--md-container, var(--md-sys-color-error-container)); --md-badge-on-container: var(--md-on-container, var(--md-sys-color-on-error-container)); display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; white-space: nowrap; } [data-md-badge][data-md-dot] { inline-size: 6px; block-size: 6px; border-radius: var(--md-sys-shape-corner-full); } [data-md-badge]:not([data-md-dot], [data-md-variant]) { min-inline-size: 16px; block-size: 16px; border-radius: var(--md-sys-shape-corner-full); padding-inline: var(--md-sys-measurement-space50); font: var(--md-sys-typescale-label-sm); letter-spacing: var(--md-sys-typescale-label-sm-tracking); font-variation-settings: normal; font-variant-numeric: tabular-nums; } [data-md-badge][data-md-variant] { gap: var(--md-sys-measurement-space50); block-size: 24px; border-radius: var(--md-sys-shape-corner-sm); padding-inline: var(--md-sys-measurement-space100); font: var(--md-sys-typescale-label-md); letter-spacing: var(--md-sys-typescale-label-md-tracking); font-variation-settings: normal; } [data-md-badge][data-md-variant='outline'] { border: 1px solid; } [data-md-badge][data-md-color='neutral'] { --md-badge-color: var(--md-sys-color-on-surface-variant); --md-badge-on-color: var(--md-sys-color-surface); --md-badge-container: var(--md-sys-color-surface-container-high); --md-badge-on-container: var(--md-sys-color-on-surface-variant); } [data-md-badge]:not([data-md-color='plain']) { background-color: var(--md-badge-color); color: var(--md-badge-on-color); &[data-md-variant='tonal'] { background-color: var(--md-badge-container); color: var(--md-badge-on-container); } &[data-md-variant='outline'] { border-color: var(--md-sys-color-outline); background-color: transparent; color: var(--md-sys-color-on-surface-variant); } } [data-md-badge][data-md-floating] { position: absolute; inset-block-start: calc(-1 * var(--md-sys-measurement-space25)); inset-inline-start: calc(100% - 12px); } [data-md-badge][data-md-floating][data-md-dot] { inset-block-start: 0; inset-inline: auto 0; } } @layer material.components { [data-md-menu-item] { --md-menu-item-ink: var(--md-sys-color-on-surface-variant); display: flex; inline-size: 100%; min-block-size: var(--md-sys-measurement-space600); align-items: center; gap: 12px; padding-inline: var(--md-sys-measurement-space200); border-radius: var(--md-sys-shape-corner-xs); background-color: transparent; color: var(--md-sys-color-on-surface); text-align: start; cursor: pointer; -webkit-user-select: none; user-select: none; transition-property: border-radius, background-color, color; transition-duration: var(--md-sys-motion-spatial-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-effects-fast), var(--md-sys-motion-effects-fast); &:focus-visible { outline-offset: -3px; } } [data-md-menu-item]:first-child { border-start-start-radius: var(--md-sys-shape-corner-md); border-start-end-radius: var(--md-sys-shape-corner-md); } [data-md-menu-item]:last-child { border-end-start-radius: var(--md-sys-shape-corner-md); border-end-end-radius: var(--md-sys-shape-corner-md); } [data-md-menu-item][data-md-description] { padding-block: var(--md-sys-measurement-space100); } [data-md-menu-item][aria-checked='true'] { --md-menu-item-ink: var(--md-sys-color-on-tertiary-container); border-radius: var(--md-sys-shape-corner-md); background-color: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); } [data-md-menu-item][aria-current='page']:not([aria-checked='true']) { --md-menu-item-ink: var(--md-sys-color-on-secondary-container); border-radius: var(--md-sys-shape-corner-md); background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } [data-md-menu-item][aria-disabled='true'] { --md-menu-item-ink: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent); pointer-events: none; color: var(--md-menu-item-ink); } [data-md-menu-item] [data-md-icon] { color: var(--md-menu-item-ink); } [data-md-menu-item][aria-disabled='true'] [data-md-icon] { color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent) !important; } [data-md-menu-item-text] { min-inline-size: 0; flex: 1; } [data-md-menu-item-label] { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: var(--md-sys-typescale-body-lg); letter-spacing: var(--md-sys-typescale-body-lg-tracking); font-variation-settings: normal; } [data-md-menu-item-description] { display: block; color: var(--md-menu-item-ink); font: var(--md-sys-typescale-body-md); letter-spacing: var(--md-sys-typescale-body-md-tracking); font-variation-settings: normal; } [data-md-menu-item-shortcut] { flex-shrink: 0; color: var(--md-menu-item-ink); font: var(--md-sys-typescale-label-sm); letter-spacing: var(--md-sys-typescale-label-sm-tracking); font-variation-settings: normal; } [data-md-submenu] { margin: 0 var(--md-sys-measurement-space50); transform-origin: top; position-area: inline-end span-block-end; position-try-fallbacks: flip-inline; } } @layer material.components { [data-md-app-bar] { --app-bar-row: 64px; --app-bar-height: var(--app-bar-row); z-index: 20; display: block; min-height: var(--app-bar-height); padding-top: var(--material-safe-top, env(safe-area-inset-top)); background-color: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); transition-property: background-color; transition-duration: var(--md-sys-motion-effects-default-duration); transition-timing-function: var(--md-sys-motion-effects-default); } [data-md-app-bar][data-md-variant='medium'] { --app-bar-height: 112px; } [data-md-app-bar][data-md-variant='medium'][data-md-subtitled] { --app-bar-height: 136px; } [data-md-app-bar][data-md-variant='large'] { --app-bar-height: 120px; } [data-md-app-bar][data-md-variant='large'][data-md-subtitled] { --app-bar-height: 152px; } [data-md-app-bar][data-md-sticky] { position: sticky; top: 0; } [data-md-app-bar][data-md-sticky]:is([data-md-variant='medium'], [data-md-variant='large']) { top: calc(var(--app-bar-row) - var(--app-bar-measured, var(--app-bar-height))); } [data-md-app-bar][data-md-scrolled] { background-color: var(--md-sys-color-surface-container); } [data-md-app-bar-row] { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 0; min-height: var(--app-bar-row); padding-inline: var(--md-sys-measurement-space50); background-color: inherit; } [data-md-app-bar-leading], [data-md-app-bar-trailing] { display: flex; flex: none; align-items: center; color: var(--md-sys-color-on-surface-variant); } [data-md-app-bar-leading] { color: var(--md-sys-color-on-surface); } [data-md-app-bar-trailing] { margin-inline-start: auto; } [data-md-app-bar-action], [data-md-app-bar-overflow] { display: contents; } @media (width < 600px) { [data-md-app-bar-action][data-md-overflows-compact], [data-md-app-bar-overflow='medium'] { display: none; } } @media (width >= 600px) { [data-md-app-bar-overflow='compact'] { display: none; } } [data-md-app-bar-headline] { display: flex; min-width: 0; flex: 1 1 0%; flex-direction: column; justify-content: center; padding-inline: 12px; } [data-md-app-bar-row]:has([data-md-app-bar-leading]) [data-md-app-bar-headline] { padding-inline-start: var(--md-sys-measurement-space50); } [data-md-app-bar-title] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--md-sys-typescale-title-lg); letter-spacing: var(--md-sys-typescale-title-lg-tracking); } [data-md-app-bar-subtitle] { overflow: hidden; color: var(--md-sys-color-on-surface-variant); text-overflow: ellipsis; white-space: nowrap; font: var(--md-sys-typescale-label-md); letter-spacing: var(--md-sys-typescale-label-md-tracking); } [data-md-app-bar][data-md-variant='center'] [data-md-app-bar-row] { display: grid; grid-template-columns: 1fr auto 1fr; } [data-md-app-bar][data-md-variant='center'] [data-md-app-bar-leading] { grid-column: 1; justify-self: start; } [data-md-app-bar][data-md-variant='center'] [data-md-app-bar-headline] { grid-column: 2; min-width: 0; align-items: center; justify-self: center; padding-inline: 12px; text-align: center; } [data-md-app-bar][data-md-variant='center'] [data-md-app-bar-trailing] { grid-column: 3; justify-self: end; margin-inline-start: 0; } [data-md-app-bar-search] { min-width: 0; max-width: calc(312px + (100% - 312px) / 2); flex: 1 1 0%; margin-inline: auto; padding-inline: var(--md-sys-measurement-space50); } [data-md-app-bar]:is([data-md-variant='medium'], [data-md-variant='large']) [data-md-app-bar-row] [data-md-app-bar-headline] { opacity: 0; transition-property: opacity; transition-duration: var(--md-sys-motion-effects-fast-duration); transition-timing-function: var(--md-sys-motion-effects-fast); } [data-md-app-bar][data-md-collapsed] [data-md-app-bar-row] [data-md-app-bar-headline] { opacity: 1; } [data-md-app-bar-expanded] { display: flex; min-height: calc(var(--app-bar-height) - var(--app-bar-row)); flex-direction: column; justify-content: flex-end; padding-inline: var(--md-sys-measurement-space200); padding-bottom: 12px; } [data-md-app-bar][data-md-subtitled] [data-md-app-bar-expanded] { padding-bottom: var(--md-sys-measurement-space200); } [data-md-app-bar][data-md-variant='large'][data-md-subtitled] [data-md-app-bar-expanded] { padding-bottom: 20px; } [data-md-app-bar-expanded] [data-md-app-bar-title] { white-space: normal; font: var(--md-sys-typescale-headline-md); letter-spacing: var(--md-sys-typescale-headline-md-tracking); } [data-md-app-bar-expanded] [data-md-app-bar-subtitle] { font: var(--md-sys-typescale-label-lg); letter-spacing: var(--md-sys-typescale-label-lg-tracking); } [data-md-app-bar][data-md-variant='large'] [data-md-app-bar-expanded] [data-md-app-bar-title] { font: var(--md-sys-typescale-display-sm); letter-spacing: var(--md-sys-typescale-display-sm-tracking); } [data-md-app-bar][data-md-variant='large'] [data-md-app-bar-expanded] [data-md-app-bar-subtitle] { font: var(--md-sys-typescale-title-md); letter-spacing: var(--md-sys-typescale-title-md-tracking); } } @layer material.layout { [data-md-pane] { display: flex; flex-direction: column; inline-size: 100%; min-inline-size: 0; margin-inline: auto; } [data-md-pane][data-md-width='narrow'] { max-inline-size: 40rem; } [data-md-pane][data-md-width='medium'] { max-inline-size: 60rem; } [data-md-pane][data-md-width='wide'] { max-inline-size: 80rem; } [data-md-pane-navigation], [data-md-pane-body] { padding-inline: var(--md-layout-margin, var(--md-sys-measurement-space200)); @media (width >= 600px) { padding-inline: var(--md-layout-margin, var(--md-sys-measurement-space300)); } } [data-md-pane-body] { flex: 1 1 auto; min-inline-size: 0; } [data-md-pane-body] > * { --md-layout-margin: 0px; } [data-md-pane-back] [data-md-icon]:is([dir='rtl'], [dir='rtl'] *) { transform: scaleX(-1); } } @layer material.layout { [data-md-list-detail] { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; padding-inline: var(--md-layout-margin, var(--md-sys-measurement-space200)); @media (width >= 600px) { padding-inline: var(--md-layout-margin, var(--md-sys-measurement-space300)); } @media (width >= 840px) { grid-template-columns: 360px minmax(0, 1fr); column-gap: var(--md-sys-measurement-space300); } @media (width >= 1200px) { grid-template-columns: 412px minmax(0, 1fr); } } [data-md-list-detail] > * { --md-layout-margin: 0px; } [data-md-list-detail-pane] { min-inline-size: 0; outline: none; } [data-md-list-detail-back-row] { display: flex; align-items: center; min-block-size: var(--md-sys-measurement-space800); } [data-md-list-detail-back] [data-md-icon]:is([dir='rtl'], [dir='rtl'] *) { transform: scaleX(-1); } @media (width < 840px) { [data-md-list-detail]:not([data-md-selected]) > [data-md-list-detail-pane='detail'], [data-md-list-detail][data-md-selected] > [data-md-list-detail-pane='list'] { display: none; } } @media (width >= 840px) { [data-md-list-detail-back-row], [data-md-list-detail] [data-md-list-detail-back] { display: none; } } } @layer material.layout { [data-md-supporting-pane] { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--md-sys-measurement-space200); padding-inline: var(--md-layout-margin, var(--md-sys-measurement-space200)); @media (width >= 600px) { gap: var(--md-sys-measurement-space300); padding-inline: var(--md-layout-margin, var(--md-sys-measurement-space300)); } @media (width >= 840px) { grid-template-columns: minmax(0, 1fr) 360px; } @media (width >= 1200px) { grid-template-columns: minmax(0, 1fr) 412px; } } @media (width >= 840px) { [data-md-supporting-pane][data-md-width='split'] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } } [data-md-supporting-pane] > * { --md-layout-margin: 0px; } [data-md-supporting-pane-main], [data-md-supporting-pane-supporting] { min-inline-size: 0; } [data-md-supporting-pane-handle] { display: none; } @media (width < 840px) { [data-md-compact='sheet'] > [data-md-supporting-pane-supporting] { position: sticky; inset-block-end: max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom))); z-index: 20; inline-size: 100%; max-inline-size: 640px; margin-inline: auto; border-start-start-radius: var(--md-sys-shape-corner-xl); border-start-end-radius: var(--md-sys-shape-corner-xl); background-color: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface); box-shadow: var(--md-sys-elevation-1); } [data-md-compact='sheet'] [data-md-supporting-pane-handle] { display: flex; flex-direction: column; align-items: center; inline-size: 100%; min-block-size: var(--md-sys-measurement-space600); border-start-start-radius: inherit; border-start-end-radius: inherit; color: var(--md-sys-color-on-surface-variant); cursor: pointer; } [data-md-supporting-pane-grip] { inline-size: var(--md-sys-measurement-space400); block-size: var(--md-sys-measurement-space50); margin-block: 22px; border-radius: var(--md-sys-shape-corner-full); background-color: currentColor; } [data-md-supporting-pane-label] { margin-block-start: calc(-1 * var(--md-sys-measurement-space100)); padding-block-end: var(--md-sys-measurement-space200); color: var(--md-sys-color-on-surface); } [data-md-compact='sheet'] [data-md-supporting-pane-body] { max-block-size: 50dvh; overflow-y: auto; overscroll-behavior: contain; } [data-md-compact='sheet'] > [data-md-supporting-pane-supporting]:not([data-md-open]) [data-md-supporting-pane-body] { display: none; } } } @layer material.layout { :where([data-md-feed]) { --md-gap: var(--md-sys-measurement-space200); @media (width >= 600px) { --md-gap: var(--md-sys-measurement-space300); } } [data-md-feed] { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--md-gap); @media (width >= 600px) { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--md-min-item, 240px)), 1fr)); } } } @layer material.components { [data-md-fab] { --md-fab-color: var(--md-sys-color-primary); --md-fab-on-color: var(--md-sys-color-on-primary); --md-fab-container: var(--md-sys-color-primary-container); --md-fab-on-container: var(--md-sys-color-on-primary-container); display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; block-size: var(--md-fab-size); border-radius: var(--md-fab-corner); background-color: var(--md-fab-container); color: var(--md-fab-on-container); box-shadow: var(--md-sys-elevation-3); white-space: nowrap; cursor: pointer; -webkit-user-select: none; user-select: none; transition-property: box-shadow, background-color, color; transition-duration: var(--md-sys-motion-effects-fast-duration); transition-timing-function: var(--md-sys-motion-effects-fast); @media (hover: hover) { &:hover { box-shadow: var(--md-sys-elevation-4); } } } [data-md-fab][data-md-size='sm'] { --md-fab-size: 56px; --md-fab-corner: var(--md-sys-shape-corner-lg); --md-fab-extended-min: 80px; } [data-md-fab][data-md-size='md'] { --md-fab-size: 80px; --md-fab-corner: var(--md-sys-shape-corner-lg-increased); --md-fab-extended-min: 80px; } [data-md-fab][data-md-size='lg'] { --md-fab-size: 96px; --md-fab-corner: var(--md-sys-shape-corner-xl); --md-fab-extended-min: 96px; } [data-md-fab][data-md-color='secondary'] { --md-fab-color: var(--md-sys-color-secondary); --md-fab-on-color: var(--md-sys-color-on-secondary); --md-fab-container: var(--md-sys-color-secondary-container); --md-fab-on-container: var(--md-sys-color-on-secondary-container); } [data-md-fab][data-md-color='tertiary'] { --md-fab-color: var(--md-sys-color-tertiary); --md-fab-on-color: var(--md-sys-color-on-tertiary); --md-fab-container: var(--md-sys-color-tertiary-container); --md-fab-on-container: var(--md-sys-color-on-tertiary-container); } [data-md-fab][data-md-variant='filled'] { background-color: var(--md-fab-color); color: var(--md-fab-on-color); } [data-md-fab]:not([data-md-extended]) { inline-size: var(--md-fab-size); } [data-md-fab][data-md-extended] { min-inline-size: var(--md-fab-extended-min); } [data-md-fab][data-md-extended][data-md-size='sm'] { gap: var(--md-sys-measurement-space100); padding-inline: var(--md-sys-measurement-space200); font: var(--md-sys-typescale-title-md); letter-spacing: var(--md-sys-typescale-title-md-tracking); font-variation-settings: normal; } [data-md-fab][data-md-extended][data-md-size='md'] { gap: var(--md-sys-measurement-space200); padding-inline: 26px; font: var(--md-sys-typescale-title-lg); letter-spacing: var(--md-sys-typescale-title-lg-tracking); font-variation-settings: normal; } [data-md-fab][data-md-extended][data-md-size='lg'] { gap: 20px; padding-inline: 28px; font: var(--md-sys-typescale-headline-sm); letter-spacing: var(--md-sys-typescale-headline-sm-tracking); font-variation-settings: normal; } [data-md-fab][data-md-collapse-on-scroll] { transition-property: min-inline-size, padding-inline, gap, box-shadow, background-color, color; transition-duration: var(--md-sys-motion-spatial-default-duration), var(--md-sys-motion-spatial-default-duration), var(--md-sys-motion-spatial-default-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-default), var(--md-sys-motion-spatial-default), var(--md-sys-motion-spatial-default), var(--md-sys-motion-effects-fast), var(--md-sys-motion-effects-fast), var(--md-sys-motion-effects-fast); } [data-md-fab-label] { display: grid; grid-template-columns: 1fr; transition-property: grid-template-columns, opacity; transition-duration: var(--md-sys-motion-spatial-default-duration), var(--md-sys-motion-effects-default-duration); transition-timing-function: var(--md-sys-motion-spatial-default), var(--md-sys-motion-effects-default); & > span { overflow: hidden; white-space: nowrap; } } [data-md-fab][data-md-collapse-on-scroll][data-md-collapsed] { min-inline-size: var(--md-fab-size); gap: 0; & [data-md-fab-label] { grid-template-columns: 0fr; opacity: 0; } } [data-md-fab][data-md-collapse-on-scroll][data-md-size='lg'][data-md-collapsed] { padding-inline: var(--md-sys-measurement-space400); } } @layer material.components { [data-md-navigation-rail] { --navigation-rail-expanded-width: clamp(220px, var(--navigation-rail-width, 256px), 360px); --navigation-rail-collapsed-width: 96px; --md-navigation-rail-value: expanded; position: relative; flex-shrink: 0; width: var(--navigation-rail-expanded-width); transition: width var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default); &:where( [data-md-navigation-rail='collapsed'], [data-md-navigation-rail='collapsed'] *, [data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]), [data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]) *, [data-md-navigation-rail='modal']:not([data-md-open]), [data-md-navigation-rail='modal']:not([data-md-open]) * ) { width: var(--navigation-rail-collapsed-width); --md-navigation-rail-value: collapsed; } @media (width < 600px) { &:where([data-md-navigation-rail='collapsible']:not([data-md-open]), [data-md-navigation-rail='collapsible']:not([data-md-open]) *) { width: var(--navigation-rail-collapsed-width); --md-navigation-rail-value: collapsed; } } @media (width < 840px) { &:where([data-md-navigation-rail='adaptive']:not([data-md-open]), [data-md-navigation-rail='adaptive']:not([data-md-open]) *) { width: var(--navigation-rail-collapsed-width); --md-navigation-rail-value: collapsed; } } @media (840px <= width < 1200px) { &:where( :is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]), :is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]) * ) { width: var(--navigation-rail-collapsed-width); --md-navigation-rail-value: collapsed; } } @media (width >= 1200px) { &:where( [data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]), [data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]) * ) { width: var(--navigation-rail-collapsed-width); --md-navigation-rail-value: collapsed; } } } [data-md-navigation-rail][data-md-width='narrow'] { --navigation-rail-collapsed-width: 80px; } [data-md-navigation-rail][data-md-hide-when-collapsed] { &:where( [data-md-navigation-rail='collapsed'], [data-md-navigation-rail='collapsed'] *, [data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]), [data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]) *, [data-md-navigation-rail='modal']:not([data-md-open]), [data-md-navigation-rail='modal']:not([data-md-open]) * ) { width: 0; } @media (width < 600px) { &:where([data-md-navigation-rail='collapsible']:not([data-md-open]), [data-md-navigation-rail='collapsible']:not([data-md-open]) *) { width: 0; } } @media (width < 840px) { &:where([data-md-navigation-rail='adaptive']:not([data-md-open]), [data-md-navigation-rail='adaptive']:not([data-md-open]) *) { width: 0; } } @media (840px <= width < 1200px) { &:where( :is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]), :is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]) * ) { width: 0; } } @media (width >= 1200px) { &:where( [data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]), [data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]) * ) { width: 0; } } } [data-md-navigation-rail][data-md-width='narrow'] [data-md-navigation-rail-item] [data-md-navigation-label] { @container style(--md-navigation-rail-value: collapsed) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } [data-md-navigation-rail='modal'] { width: var(--navigation-rail-collapsed-width); } @media (width < 840px) { [data-md-navigation-rail='adaptive'] { width: var(--navigation-rail-collapsed-width); } } @media (width < 600px) { [data-md-navigation-rail='adaptive'] { width: 0; } [data-md-navigation-rail='collapsible'] { width: var(--navigation-rail-collapsed-width); } } [data-md-navigation-rail-panel] { position: sticky; top: var(--material-banner, 0px); display: flex; flex-direction: column; width: 100%; height: 100%; max-height: calc(100dvh - var(--material-banner, 0px)); overflow-x: clip; padding-bottom: var(--material-safe-bottom, env(safe-area-inset-bottom)); background-color: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); transition: width var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast), background-color var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default); } [data-md-navigation-rail][data-md-divider]:not([data-md-open], [data-md-closing='sheet']) > [data-md-navigation-rail-panel] { border-inline-end: 1px solid var(--md-sys-color-outline-variant); } [data-md-navigation-rail][data-md-fill='false']:not([data-md-open], [data-md-closing='sheet']) > [data-md-navigation-rail-panel] { background-color: transparent; } [data-md-navigation-rail]:is([data-md-open], [data-md-closing='sheet']) > [data-md-navigation-rail-panel] { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 50; width: var(--navigation-rail-expanded-width); max-width: calc(100vw - 56px); height: 100dvh; max-height: none; border-start-end-radius: var(--md-sys-shape-corner-lg); border-end-end-radius: var(--md-sys-shape-corner-lg); background-color: var(--md-sys-color-surface-container); box-shadow: var(--md-sys-elevation-2); } @media (width < 600px) { [data-md-navigation-rail='adaptive'] > [data-md-navigation-rail-panel] { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 50; display: none; width: var(--navigation-rail-expanded-width); max-width: calc(100vw - 56px); height: 100dvh; max-height: none; border-start-end-radius: var(--md-sys-shape-corner-lg); border-end-end-radius: var(--md-sys-shape-corner-lg); background-color: var(--md-sys-color-surface-container); box-shadow: var(--md-sys-elevation-2); translate: -100% 0; transition: translate var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-easing-emphasized-accelerate); &:is([dir='rtl'], [dir='rtl'] *) { translate: 100% 0; } } [data-md-navigation-rail='adaptive'][data-md-open] > [data-md-navigation-rail-panel] { display: flex; translate: 0 0; transition: translate var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-easing-emphasized-decelerate); @starting-style { translate: -100% 0; } &:is([dir='rtl'], [dir='rtl'] *) { translate: 0 0; @starting-style { translate: 100% 0; } } } } [data-md-navigation-rail][data-md-hide-when-collapsed] > [data-md-navigation-rail-panel] { @container style(--md-navigation-rail-value: collapsed) { display: none; translate: -100% 0; transition: translate var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-easing-emphasized-accelerate); &:is([dir='rtl'], [dir='rtl'] *) { translate: 100% 0; } } } [data-md-navigation-rail][data-md-hide-when-collapsed][data-md-open] > [data-md-navigation-rail-panel] { display: flex; translate: 0 0; transition: translate var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-easing-emphasized-decelerate); @starting-style { translate: -100% 0; } &:is([dir='rtl'], [dir='rtl'] *) { translate: 0 0; @starting-style { translate: 100% 0; } } } [data-md-navigation-rail][data-md-hide-when-collapsed][data-md-closing='sheet'] > [data-md-navigation-rail-panel] { display: flex; } @media (width < 600px) { [data-md-navigation-rail='adaptive'][data-md-closing='sheet'] > [data-md-navigation-rail-panel] { display: flex; } } @media (width < 600px) { [data-md-navigation-rail='collapsible'][data-md-hide-when-collapsed] { width: var(--navigation-rail-collapsed-width); } [data-md-navigation-rail='collapsible'][data-md-hide-when-collapsed] > [data-md-navigation-rail-panel] { display: flex; translate: none; } } @media (600px <= width < 840px) { [data-md-navigation-rail='adaptive'][data-md-hide-when-collapsed] { width: var(--navigation-rail-collapsed-width); } [data-md-navigation-rail='adaptive'][data-md-hide-when-collapsed] > [data-md-navigation-rail-panel] { display: flex; translate: none; } } [data-md-navigation-rail-scrim] { position: fixed; inset: 0; z-index: 40; display: none; background-color: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent); opacity: 0; transition: opacity var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default); } [data-md-navigation-rail][data-md-closing] > [data-md-navigation-rail-scrim] { display: block; } [data-md-navigation-rail][data-md-open] > [data-md-navigation-rail-scrim] { display: block; opacity: 1; @starting-style { opacity: 0; } } [data-md-navigation-rail-header] { display: flex; flex-shrink: 0; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: calc(var(--material-safe-top, env(safe-area-inset-top)) + 44px); padding-bottom: 32px; } [data-md-navigation-rail-panel] > [data-md-navigation-rail-destinations]:first-child { padding-top: calc(var(--material-safe-top, env(safe-area-inset-top)) + 44px); } [data-md-navigation-rail-menu-row] { display: flex; width: 100%; min-width: 0; align-items: center; gap: 12px; padding-inline-end: 20px; padding-inline-start: 20px; } [data-md-navigation-rail-header]:has([data-md-navigation-rail-menu]) [data-md-navigation-rail-menu-row] { padding-inline-start: 28px; } [data-md-navigation-rail][data-md-width='narrow'] [data-md-navigation-rail-header]:has([data-md-navigation-rail-menu]) [data-md-navigation-rail-menu-row] { @container style(--md-navigation-rail-value: collapsed) { padding-inline-start: 20px; } } [data-md-navigation-rail-menu] { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--md-sys-shape-corner-full); color: var(--md-sys-color-on-surface-variant); cursor: pointer; } [data-md-navigation-rail-menu-collapse-icon] { display: contents; } [data-md-navigation-rail-menu-expand-icon] { display: none; } [data-md-navigation-rail-menu-collapse-icon], [data-md-navigation-rail-menu-expand-icon] { @container style(--md-navigation-rail-value: collapsed) { display: none; } } [data-md-navigation-rail-menu-expand-icon] { @container style(--md-navigation-rail-value: collapsed) { display: contents; } } [data-md-navigation-rail-brand] { min-width: 0; flex: 1 1 0%; @container style(--md-navigation-rail-value: collapsed) { display: none; } } [data-md-navigation-rail-fab-row] { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 8px; padding-inline: 20px; } [data-md-navigation-rail][data-md-width='narrow'] [data-md-navigation-rail-fab-row] { @container style(--md-navigation-rail-value: collapsed) { padding-inline: 12px; } } [data-md-navigation-rail-destinations] { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-block: 8px; scrollbar-width: thin; } [data-md-navigation-rail-destinations], [data-md-navigation-rail-footer] { display: flex; flex-direction: column; @container style(--md-navigation-rail-value: collapsed) { gap: 4px; } } [data-md-navigation-rail-footer] { flex-shrink: 0; padding-block: 8px 16px; } [data-md-navigation-rail][data-md-align='center'] [data-md-navigation-rail-destinations] { justify-content: safe center; } [data-md-navigation-rail-header] [data-md-fab][data-md-fab], [data-md-navigation-rail-header] [data-md-fab][data-md-fab]:hover { box-shadow: none; } [data-md-navigation-rail-header] [data-md-fab] > span { max-width: 256px; overflow: hidden; white-space: nowrap; transition: max-width var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default), opacity var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default); @container style(--md-navigation-rail-value: collapsed) { max-width: 0; opacity: 0; } } [data-md-navigation-rail-header] [data-md-fab][data-md-extended][data-md-extended] { @container style(--md-navigation-rail-value: collapsed) { min-inline-size: 0; aspect-ratio: 1; gap: 0; } } } @layer material.components { [data-md-navigation-bar-item] :is([data-md-navigation-indicator], [data-md-navigation-pill]), [data-md-navigation-rail-item], [data-md-navigation-rail-item] [data-md-navigation-indicator] { background-position: center; background-repeat: no-repeat; background-size: 100% 100%; transition: background-size var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default); } @media (hover: hover) { :is([data-md-navigation-bar-item], [data-md-navigation-rail-item]):hover { --navigation-layer: var(--md-sys-state-hover-state-layer-opacity); } } :is([data-md-navigation-bar-item], [data-md-navigation-rail-item]):focus-visible { --navigation-layer: var(--md-sys-state-focus-state-layer-opacity); } :is([data-md-navigation-bar-item], [data-md-navigation-rail-item]):active { --navigation-layer: var(--md-sys-state-pressed-state-layer-opacity); } [data-md-navigation-bar-item] [data-md-navigation-indicator]::before, [data-md-navigation-bar-item] [data-md-navigation-pill]::before, [data-md-navigation-rail-item]::before, [data-md-navigation-rail-item] [data-md-navigation-indicator]::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-color: var(--md-sys-color-on-secondary-container); opacity: var(--navigation-layer, 0); pointer-events: none; transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast); } [data-md-navigation-icon] { position: relative; display: inline-flex; } } @layer material.components { [data-md-navigation-rail-item] { --navigation-layer: 0; --navigation-item-layer: var(--navigation-layer); --navigation-indicator-layer: 0; position: relative; isolation: isolate; display: flex; flex-shrink: 0; align-items: center; gap: 8px; height: 56px; margin-inline: 20px; padding-inline: 16px; border-radius: var(--md-sys-shape-corner-full); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-label-lg); letter-spacing: var(--md-sys-typescale-label-lg-tracking); text-align: start; text-decoration: none; white-space: nowrap; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; } [data-md-navigation-rail-item][data-md-navigation-rail-item]::before { background-color: var(--md-sys-color-on-secondary-container); opacity: var(--navigation-item-layer); } [data-md-navigation-rail-item][data-md-navigation-rail-item] [data-md-navigation-indicator]::before { background-color: var(--md-sys-color-on-secondary-container); opacity: var(--navigation-indicator-layer); } [data-md-navigation-rail-item][data-md-active] { background-image: linear-gradient(var(--md-sys-color-secondary-container), var(--md-sys-color-secondary-container)); color: var(--md-sys-color-on-secondary-container); } [data-md-navigation-rail-item] [data-md-navigation-indicator] { position: relative; isolation: isolate; display: flex; flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--md-sys-shape-corner-full); } [data-md-navigation-rail-item] [data-md-navigation-label] { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } [data-md-navigation-rail-item]:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; } [data-md-navigation-badge-end] { display: flex; flex-shrink: 0; } [data-md-navigation-badge-icon] { display: none; } [data-md-navigation-rail-item] { @container style(--md-navigation-rail-value: collapsed) { flex-direction: column; justify-content: center; gap: 4px; height: auto; min-height: 64px; margin-inline: 0; padding: 6px 4px; border-radius: 0; font: var(--md-sys-typescale-label-md); letter-spacing: var(--md-sys-typescale-label-md-tracking); white-space: normal; --navigation-item-layer: 0; --navigation-indicator-layer: var(--navigation-layer); } } [data-md-navigation-rail-item] [data-md-navigation-label] { @container style(--md-navigation-rail-value: collapsed) { flex: none; display: -webkit-box; max-width: 100%; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-align: center; overflow-wrap: anywhere; } } [data-md-navigation-rail-item][data-md-active] { @container style(--md-navigation-rail-value: collapsed) { background-image: none; color: var(--md-sys-color-secondary); } } [data-md-navigation-rail-item] [data-md-navigation-indicator] { @container style(--md-navigation-rail-value: collapsed) { width: 56px; height: 32px; } } [data-md-navigation-rail-item][data-md-active] [data-md-navigation-indicator] { @container style(--md-navigation-rail-value: collapsed) { background-image: linear-gradient(var(--md-sys-color-secondary-container), var(--md-sys-color-secondary-container)); color: var(--md-sys-color-on-secondary-container); } } [data-md-navigation-rail-item]:focus-visible { @container style(--md-navigation-rail-value: collapsed) { outline: none; } } [data-md-navigation-rail-item]:focus-visible [data-md-navigation-indicator] { @container style(--md-navigation-rail-value: collapsed) { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; } } [data-md-navigation-badge-end], [data-md-navigation-badge-icon] { @container style(--md-navigation-rail-value: collapsed) { display: none; } } [data-md-navigation-badge-icon] { @container style(--md-navigation-rail-value: collapsed) { display: contents; } } } @layer material.components { [data-md-navigation-rail-section] { display: flex; flex-direction: column; } [data-md-navigation-rail-section]:not(:first-child) { @container style(--md-navigation-rail-value: collapsed) { margin-top: 12px; } } [data-md-navigation-rail-heading] { display: flex; align-items: center; min-height: 48px; padding-inline: 36px 20px; overflow: hidden; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-title-sm); letter-spacing: var(--md-sys-typescale-title-sm-tracking); white-space: nowrap; text-overflow: ellipsis; @container style(--md-navigation-rail-value: collapsed) { display: none; } } } @layer material.components { [data-md-navigation-bar] { container-type: inline-size; padding-inline: var(--material-safe-left, env(safe-area-inset-left)) var(--material-safe-right, env(safe-area-inset-right)); padding-bottom: var(--material-safe-bottom, env(safe-area-inset-bottom)); background-color: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface-variant); } [data-md-navigation-bar-items] { display: flex; min-height: 64px; margin-inline: auto; } [data-md-navigation-bar][data-md-tall] [data-md-navigation-bar-items] { min-height: 80px; } [data-md-navigation-bar][data-md-hide-on-scroll] { transition: translate var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default); } [data-md-navigation-bar][data-md-hide-on-scroll][data-md-hidden] { translate: 0 100%; } @container (width >= 600px) { [data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-items] { width: calc(10% * (var(--navigation-bar-count, 7) + 3)); min-width: fit-content; max-width: 100%; } [data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-items]:has(> :last-child:nth-child(1)) { --navigation-bar-count: 1; } [data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-items]:has(> :last-child:nth-child(2)) { --navigation-bar-count: 2; } [data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-items]:has(> :last-child:nth-child(3)) { --navigation-bar-count: 3; } [data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-items]:has(> :last-child:nth-child(4)) { --navigation-bar-count: 4; } [data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-items]:has(> :last-child:nth-child(5)) { --navigation-bar-count: 5; } [data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-items]:has(> :last-child:nth-child(6)) { --navigation-bar-count: 6; } } [data-md-scaffold]:has([data-md-navigation-bar][data-md-hide-on-scroll][data-md-hidden]) { --material-bottom-bar: calc(var(--material-safe-bottom, env(safe-area-inset-bottom)) + var(--material-bottom-extra, 0px)); } } @layer material.components { [data-md-navigation-bar-item] { --navigation-layer: 0; position: relative; display: flex; flex: 1 1 0%; min-width: 0; align-items: center; justify-content: center; padding-block: 6px; color: var(--md-sys-color-on-surface-variant); text-decoration: none; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; } [data-md-navigation-bar-item][data-md-active] { color: var(--md-sys-color-secondary); } [data-md-navigation-bar-item] [data-md-navigation-pill] { display: flex; min-width: 0; max-width: 100%; flex-direction: column; align-items: center; gap: 4px; border-radius: var(--md-sys-shape-corner-full); font: var(--md-sys-typescale-label-md); letter-spacing: var(--md-sys-typescale-label-md-tracking); } [data-md-navigation-bar-item] [data-md-navigation-label] { max-width: 100%; padding-inline: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-md-navigation-bar-item] [data-md-navigation-indicator] { position: relative; isolation: isolate; display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: var(--md-sys-shape-corner-full); } [data-md-navigation-bar-item][data-md-active] [data-md-navigation-indicator] { background-image: linear-gradient(var(--md-sys-color-secondary-container), var(--md-sys-color-secondary-container)); color: var(--md-sys-color-on-secondary-container); } [data-md-navigation-bar-item] [data-md-navigation-pill]::before { display: none; } [data-md-navigation-bar-item]:focus-visible [data-md-navigation-indicator] { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; } @container (width >= 600px) { [data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-item] { min-width: max-content; } [data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-item] [data-md-navigation-pill] { position: relative; isolation: isolate; flex-direction: row; height: 40px; padding-inline: 16px; } [data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-item] [data-md-navigation-label] { padding-inline: 0; } [data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-item][data-md-active] { color: var(--md-sys-color-on-secondary-container); } [data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-item][data-md-active] [data-md-navigation-pill] { background-image: linear-gradient(var(--md-sys-color-secondary-container), var(--md-sys-color-secondary-container)); } [data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-item][data-md-active] [data-md-navigation-indicator] { background-image: none; } [data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-item] [data-md-navigation-pill]::before { display: block; } [data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-item] [data-md-navigation-indicator]::before { display: none; } [data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-item]:focus-visible [data-md-navigation-indicator] { outline: none; } [data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-item]:focus-visible [data-md-navigation-pill] { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; } } } @layer material.components { [data-md-toast] { position: fixed; z-index: 50; inset-inline: var(--md-sys-measurement-space200); bottom: calc(max(var(--material-bottom-bar, 0px), var(--material-bottom-toolbar, 0px)) + var(--md-sys-measurement-space200)); display: flex; justify-content: center; pointer-events: none; } [data-md-toast][data-md-position='bottom-start'] { justify-content: flex-start; } @media (width >= 600px) { [data-md-toast][data-md-position='bottom-start'] { inset-inline-start: var(--md-sys-measurement-space300); } } [data-md-toast-snackbar] { pointer-events: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: 100%; max-width: min(100%, 576px); min-height: var(--md-sys-measurement-space600); border-radius: var(--md-sys-shape-corner-xs); padding-block: 6px; padding-inline: var(--md-sys-measurement-space200) var(--md-sys-measurement-space100); background-color: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); box-shadow: var(--md-sys-elevation-3); translate: 0; opacity: 1; transition-property: translate, opacity; transition-duration: var(--md-sys-motion-spatial-fast-duration); transition-timing-function: var(--md-sys-motion-spatial-fast); @starting-style { translate: 0 16px; opacity: 0; } } [data-md-toast-snackbar][data-md-two-line] { min-height: 68px; } @media (width >= 600px) { [data-md-toast-snackbar] { width: auto; min-width: 344px; } } [data-md-toast-content] { min-width: 0; flex: 1; padding-block: 6px; } @media (width < 600px) { [data-md-toast-content][data-md-toast-wrap] { flex-basis: 100%; } } [data-md-toast-title], [data-md-toast-description] { font: var(--md-sys-typescale-body-md); letter-spacing: var(--md-sys-typescale-body-md-tracking); font-variation-settings: normal; } :is([data-md-toast-action], [data-md-toast-dismiss]) { flex-shrink: 0; border-radius: var(--md-sys-shape-corner-full); cursor: pointer; } [data-md-toast-action] { margin-inline-start: auto; height: var(--md-sys-measurement-space500); padding-inline: 12px; color: var(--md-sys-color-inverse-primary); font: var(--md-sys-typescale-label-lg); letter-spacing: var(--md-sys-typescale-label-lg-tracking); font-variation-settings: normal; } [data-md-toast-dismiss] { display: inline-flex; align-items: center; justify-content: center; width: var(--md-sys-measurement-space500); height: var(--md-sys-measurement-space500); } } @layer material.layout { [data-md-scaffold] { --material-margin: var(--md-sys-measurement-space200); display: flex; min-block-size: 100dvh; flex-direction: column; background-color: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); @media (width >= 600px) { --material-margin: var(--md-sys-measurement-space300); } } [data-md-skip-link] { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-width: 0; &:focus { position: fixed; z-index: 60; inset-inline-start: var(--md-sys-measurement-space200); top: calc(var(--material-safe-top, env(safe-area-inset-top)) + var(--md-sys-measurement-space200)); inline-size: auto; block-size: auto; padding: var(--md-sys-measurement-space100) var(--md-sys-measurement-space200); margin: 0; overflow: visible; clip-path: none; white-space: normal; border-radius: var(--md-sys-shape-corner-full); background-color: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); font: var(--md-sys-typescale-label-lg); letter-spacing: var(--md-sys-typescale-label-lg-tracking); font-variation-settings: normal; box-shadow: var(--md-sys-elevation-3); outline: none; } } [data-md-scaffold-banner] { flex-shrink: 0; } [data-md-scaffold-row] { flex: 1 1 0%; @media (width >= 600px) { display: flex; } } [data-md-scaffold-content] { display: flex; min-inline-size: 0; flex: 1 1 0%; flex-direction: column; } [data-md-scaffold-actions] { display: flex; align-items: center; gap: var(--md-sys-measurement-space50); padding-block-start: var(--md-sys-measurement-space100); padding-inline: 20px; @container style(--md-navigation-rail-value: collapsed) { flex-direction: column; } } [data-md-scaffold-content] > main { --md-layout-margin: 0px; min-inline-size: 0; flex: 1 1 0%; padding-inline: var(--material-margin); outline: none; @media (width < 840px) { overflow-x: clip; } @media (width < 600px) { padding-block-end: var(--material-bottom-bar); } } [data-md-scaffold-bar] { position: fixed; z-index: 30; inset-inline: 0; inset-block-end: 0; @media (width >= 600px) { display: none; } } [data-md-scaffold]:has(> [data-md-scaffold-bar] [data-md-navigation-bar]:not([data-md-tall])) { @media (width < 600px) { --material-bottom-bar: calc(64px + var(--material-safe-bottom, env(safe-area-inset-bottom)) + var(--material-bottom-extra, 0px)); } } [data-md-scaffold]:has(> [data-md-scaffold-bar] [data-md-navigation-bar][data-md-tall]) { @media (width < 600px) { --material-bottom-bar: calc(80px + var(--material-safe-bottom, env(safe-area-inset-bottom)) + var(--material-bottom-extra, 0px)); } } [data-md-scaffold-fab] { --md-scaffold-fab-margin: var(--md-sys-measurement-space200); position: fixed; z-index: 30; inset-inline-end: max( var(--md-scaffold-fab-margin), var(--material-safe-right, env(safe-area-inset-right)) ); inset-block-end: calc( max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom))) + var(--md-scaffold-fab-margin) + var(--material-snackbar-height, 0px) + min(var(--material-snackbar-height, 0px), var(--md-sys-measurement-space200)) ); transition: inset-block-end var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default); @media (width >= 600px) { --md-scaffold-fab-margin: var(--md-sys-measurement-space300); } } [data-md-scaffold-fab]:is([dir='rtl'], [dir='rtl'] *) { inset-inline-end: max( var(--md-scaffold-fab-margin), var(--material-safe-left, env(safe-area-inset-left)) ); } } @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 { [data-md-button-group] { --md-button-group-inner: var(--md-sys-shape-corner-sm); --md-button-group-inner-pressed: var(--md-sys-shape-corner-xs); --md-button-group-full: 20px; --md-button-group-square: var(--md-sys-shape-corner-md); --md-button-group-square-pressed: var(--md-sys-shape-corner-sm); --md-button-group-outer: var(--md-button-group-full); --md-button-group-pad: var(--md-sys-measurement-space200); --md-button-group-grow: 6px; display: inline-flex; align-items: center; } [data-md-button-group][data-md-size='xs'] { --md-button-group-inner: var(--md-sys-shape-corner-xs); --md-button-group-inner-pressed: 2px; --md-button-group-full: 16px; --md-button-group-grow: 4px; } [data-md-button-group][data-md-size='md'] { --md-button-group-full: 28px; --md-button-group-square: var(--md-sys-shape-corner-lg); --md-button-group-square-pressed: var(--md-sys-shape-corner-md); --md-button-group-pad: var(--md-sys-measurement-space300); --md-button-group-grow: 8px; } [data-md-button-group][data-md-size='lg'] { --md-button-group-inner: var(--md-sys-shape-corner-lg); --md-button-group-inner-pressed: var(--md-sys-shape-corner-md); --md-button-group-full: 48px; --md-button-group-square: var(--md-sys-shape-corner-xl); --md-button-group-square-pressed: var(--md-sys-shape-corner-lg); --md-button-group-pad: var(--md-sys-measurement-space600); --md-button-group-grow: 16px; } [data-md-button-group][data-md-size='xl'] { --md-button-group-inner: var(--md-sys-shape-corner-lg-increased); --md-button-group-inner-pressed: var(--md-sys-shape-corner-lg); --md-button-group-full: 68px; --md-button-group-square: var(--md-sys-shape-corner-xl); --md-button-group-square-pressed: var(--md-sys-shape-corner-lg); --md-button-group-pad: var(--md-sys-measurement-space800); --md-button-group-grow: 20px; } [data-md-button-group='standard'] { gap: var(--md-sys-measurement-space100); } [data-md-button-group='standard'][data-md-size='xs'] { gap: 18px; } [data-md-button-group='standard'][data-md-size='sm'] { gap: 12px; } [data-md-button-group='standard'][data-md-shape='square'] > * { border-radius: var(--md-button-group-square); } [data-md-button-group='standard'][data-md-shape='square'] > :active:not(:disabled, [aria-disabled='true']) { border-radius: var(--md-button-group-square-pressed); } [data-md-button-group='standard'][data-md-shape='square'] > [aria-pressed='true'] { border-radius: var(--md-button-group-full); } [data-md-button-group='standard'] > :not([data-md-icon-button]):active:not(:disabled, [aria-disabled='true']) { padding-inline: calc(var(--md-button-group-pad) + var(--md-button-group-grow)); } [data-md-button-group='standard'] > :not([data-md-icon-button]):has(+ :not([data-md-icon-button]):active:not(:disabled, [aria-disabled='true'])) { padding-inline-end: calc(var(--md-button-group-pad) - var(--md-button-group-grow)); } [data-md-button-group='standard'] > :not([data-md-icon-button]):active:not(:disabled, [aria-disabled='true']) + :not([data-md-icon-button]) { padding-inline-start: calc(var(--md-button-group-pad) - var(--md-button-group-grow)); } [data-md-button-group][data-md-shape='square'] { --md-button-group-outer: var(--md-button-group-inner); } [data-md-button-group='connected'] { gap: var(--md-sys-measurement-space25); } [data-md-button-group='connected']:is([data-md-size='xs'], [data-md-size='sm']) > * { min-inline-size: var(--md-sys-measurement-space600); } [data-md-button-group='connected'] > * { --md-button-group-corner: var(--md-button-group-inner); border-radius: var(--md-button-group-corner); } [data-md-button-group='connected'] > :active { --md-button-group-corner: var(--md-button-group-inner-pressed); } [data-md-button-group='connected'] > :is([aria-pressed='true'], :has(:checked)) { --md-button-group-corner: var(--md-button-group-full); } [data-md-button-group='connected'] > :first-child { border-start-start-radius: var(--md-button-group-outer); border-end-start-radius: var(--md-button-group-outer); } [data-md-button-group='connected'] > :last-child { border-start-end-radius: var(--md-button-group-outer); border-end-end-radius: var(--md-button-group-outer); } } @layer material.components { [data-md-group] { min-inline-size: 0; } [data-md-group-legend] { margin-block-end: var(--md-sys-measurement-space100); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-label-lg); letter-spacing: var(--md-sys-typescale-label-lg-tracking); font-variation-settings: normal; } [data-md-group] > [data-md-button-group] { display: flex; align-items: normal; inline-size: 100%; } [data-md-group][data-md-inline] > [data-md-button-group] { inline-size: fit-content; } [data-md-group-segment] { --md-group-container: var(--md-sys-color-secondary-container); --md-group-label: var(--md-sys-color-on-secondary-container); display: flex; flex: 1 1 0%; align-items: center; justify-content: center; min-inline-size: 0; background-color: var(--md-group-container); color: var(--md-group-label); 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); &:has(:focus-visible) { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; &::before { opacity: var(--md-sys-state-focus-state-layer-opacity); } } &:has(:disabled)::before { display: none; } } [data-md-group][data-md-inline] [data-md-group-segment] { flex: initial; } [data-md-group]:is([data-md-size='xs'], [data-md-size='sm']) [data-md-group-segment] { min-inline-size: var(--md-sys-measurement-space600); } [data-md-group][data-md-size='xs'] [data-md-group-segment] { gap: var(--md-sys-measurement-space100); block-size: 32px; padding-inline: var(--md-sys-measurement-space200); font: var(--md-sys-typescale-label-lg); letter-spacing: var(--md-sys-typescale-label-lg-tracking); font-variation-settings: normal; } [data-md-group][data-md-size='sm'] [data-md-group-segment] { gap: var(--md-sys-measurement-space100); block-size: 40px; padding-inline: var(--md-sys-measurement-space200); font: var(--md-sys-typescale-label-lg); letter-spacing: var(--md-sys-typescale-label-lg-tracking); font-variation-settings: normal; } [data-md-group][data-md-size='md'] [data-md-group-segment] { gap: var(--md-sys-measurement-space100); block-size: 56px; padding-inline: var(--md-sys-measurement-space300); font: var(--md-sys-typescale-title-md); letter-spacing: var(--md-sys-typescale-title-md-tracking); font-variation-settings: normal; } [data-md-group][data-md-size='lg'] [data-md-group-segment] { gap: 12px; block-size: 96px; padding-inline: var(--md-sys-measurement-space600); font: var(--md-sys-typescale-headline-sm); letter-spacing: var(--md-sys-typescale-headline-sm-tracking); font-variation-settings: normal; } [data-md-group][data-md-size='xl'] [data-md-group-segment] { gap: var(--md-sys-measurement-space200); block-size: 136px; padding-inline: var(--md-sys-measurement-space800); font: var(--md-sys-typescale-headline-lg); letter-spacing: var(--md-sys-typescale-headline-lg-tracking); font-variation-settings: normal; } [data-md-group-segment]:has(:checked) { --md-group-container: var(--md-sys-color-secondary); --md-group-label: var(--md-sys-color-on-secondary); } [data-md-group][data-md-variant='filled'] [data-md-group-segment] { --md-group-container: var(--md-sys-color-surface-container); --md-group-label: var(--md-sys-color-on-surface-variant); &:has(:checked) { --md-group-container: var(--md-sys-color-primary); --md-group-label: var(--md-sys-color-on-primary); } } [data-md-group][data-md-variant='outlined'] [data-md-group-segment] { --md-group-container: transparent; --md-group-label: var(--md-sys-color-on-surface-variant); border: 1px solid var(--md-sys-color-outline-variant); &:has(:checked) { --md-group-container: var(--md-sys-color-inverse-surface); --md-group-label: var(--md-sys-color-inverse-on-surface); border-color: transparent; } } [data-md-group-segment]:has(:disabled) { background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent); color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent); cursor: not-allowed; } [data-md-group-label] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-md-group-hint], [data-md-group-error] { margin-block-start: var(--md-sys-measurement-space50); font: var(--md-sys-typescale-body-sm); letter-spacing: var(--md-sys-typescale-body-sm-tracking); font-variation-settings: normal; } [data-md-group-hint] { color: var(--md-sys-color-on-surface-variant); } [data-md-group-error] { color: var(--md-sys-color-error); } } @layer material.components { [data-md-split-button] { --md-split-button-inner: var(--md-sys-shape-corner-xs); --md-split-button-inner-pressed: var(--md-sys-shape-corner-md); --md-split-button-full: 20px; --md-split-button-icon: 22px; --md-split-button-nudge: 1px; display: inline-flex; align-items: center; gap: var(--md-sys-measurement-space25); } [data-md-split-button][data-md-size='xs'] { --md-split-button-inner-pressed: var(--md-sys-shape-corner-sm); --md-split-button-full: 16px; } [data-md-split-button][data-md-size='md'] { --md-split-button-full: 28px; --md-split-button-icon: 26px; --md-split-button-nudge: 2px; } [data-md-split-button][data-md-size='lg'] { --md-split-button-inner: var(--md-sys-shape-corner-sm); --md-split-button-inner-pressed: var(--md-sys-shape-corner-lg-increased); --md-split-button-full: 48px; --md-split-button-icon: 38px; --md-split-button-nudge: 3px; } [data-md-split-button][data-md-size='xl'] { --md-split-button-inner: var(--md-sys-shape-corner-md); --md-split-button-inner-pressed: var(--md-sys-shape-corner-lg-increased); --md-split-button-full: 68px; --md-split-button-icon: 50px; --md-split-button-nudge: 6px; } [data-md-split-button] [data-md-split] { --md-split-button-corner: var(--md-split-button-inner); border-radius: var(--md-split-button-corner); } [data-md-split-button] [data-md-split]:active { --md-split-button-corner: var(--md-split-button-inner-pressed); } [data-md-split-button] [data-md-split='trailing'][aria-expanded='true'] { --md-split-button-corner: var(--md-split-button-full); } [data-md-split-button] [data-md-split='leading'] { border-start-start-radius: var(--md-split-button-full); border-end-start-radius: var(--md-split-button-full); } [data-md-split-button] [data-md-split='trailing'] { border-start-end-radius: var(--md-split-button-full); border-end-end-radius: var(--md-split-button-full); } [data-md-split-button][data-md-size='xs'] [data-md-split='leading'] { padding-inline-end: var(--md-sys-measurement-space125); } [data-md-split-button][data-md-size='sm'] [data-md-split='leading'] { padding-inline-end: 12px; } [data-md-split-button]:is([data-md-size='xs'], [data-md-size='sm']) [data-md-split='trailing'] { inline-size: var(--md-sys-measurement-space600); } [data-md-split-button] [data-md-split='trailing'] [data-md-icon] { inline-size: var(--md-split-button-icon); block-size: var(--md-split-button-icon); margin-inline-start: calc(-1 * var(--md-split-button-nudge)); margin-inline-end: var(--md-split-button-nudge); transition: rotate var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard); } [data-md-split-button] [data-md-split='trailing'][aria-expanded='true'] [data-md-icon] { rotate: 180deg; } } @layer material.components { [data-md-menu-separator] { block-size: 1px; margin-block: var(--md-sys-measurement-space100); margin-inline: var(--md-sys-measurement-space200); border-width: 0; background-color: var(--md-sys-color-outline-variant); } } @layer material.components { [data-md-menu-group]:not([data-md-gap]) { padding-block: var(--md-sys-measurement-space50); } [data-md-menu-group]:not([data-md-gap]):first-child { padding-block-start: 0; } [data-md-menu-group]:not([data-md-gap]):last-child { padding-block-end: 0; } [data-md-menu-group][data-md-gap]:not(:first-child) { margin-block-start: var(--md-sys-measurement-space100); } [data-md-menu-group-label] { padding-inline: var(--md-sys-measurement-space200); padding-block: var(--md-sys-measurement-space100) var(--md-sys-measurement-space50); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-label-lg); letter-spacing: var(--md-sys-typescale-label-lg-tracking); font-variation-settings: normal; } [data-md-menu-group-items] { display: flex; flex-direction: column; gap: var(--md-sys-measurement-space25); } } @layer material.components { [data-md-fab-menu-item] { --md-fab-menu-item-container: var(--md-sys-color-primary-container); --md-fab-menu-item-on-container: var(--md-sys-color-on-primary-container); display: inline-flex; flex-shrink: 0; align-items: center; gap: var(--md-sys-measurement-space100); block-size: var(--md-sys-measurement-space700); padding-inline: var(--md-sys-measurement-space300); border-radius: var(--md-sys-shape-corner-full); background-color: var(--md-fab-menu-item-container); color: var(--md-fab-menu-item-on-container); box-shadow: var(--md-sys-elevation-3); white-space: nowrap; font: var(--md-sys-typescale-title-md); letter-spacing: var(--md-sys-typescale-title-md-tracking); font-variation-settings: normal; cursor: pointer; -webkit-user-select: none; user-select: none; translate: 0 0; opacity: 1; transition-property: translate, opacity; transition-duration: var(--md-sys-motion-spatial-fast-duration), var(--md-sys-motion-effects-default-duration); transition-timing-function: var(--md-sys-motion-spatial-fast), var(--md-sys-motion-effects-default); @starting-style { translate: 0 var(--md-sys-measurement-space100); opacity: 0; } } [data-md-fab-menu-item][data-md-color='secondary'] { --md-fab-menu-item-container: var(--md-sys-color-secondary-container); --md-fab-menu-item-on-container: var(--md-sys-color-on-secondary-container); } [data-md-fab-menu-item][data-md-color='tertiary'] { --md-fab-menu-item-container: var(--md-sys-color-tertiary-container); --md-fab-menu-item-on-container: var(--md-sys-color-on-tertiary-container); } } @layer material.components { [data-md-fab-menu] { position: relative; display: inline-flex; } [data-md-fab-menu-anchor] { display: inline-flex; } [data-md-fab-menu-trigger] { --md-fab-menu-container: var(--md-sys-color-primary-container); --md-fab-menu-on-container: var(--md-sys-color-on-primary-container); --md-fab-menu-color: var(--md-sys-color-primary); --md-fab-menu-on-color: var(--md-sys-color-on-primary); display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; inline-size: var(--md-sys-measurement-space700); block-size: var(--md-sys-measurement-space700); border-radius: var(--md-sys-shape-corner-lg); background-color: var(--md-fab-menu-container); color: var(--md-fab-menu-on-container); box-shadow: var(--md-sys-elevation-3); cursor: pointer; -webkit-user-select: none; user-select: none; transition-property: border-radius, background-color, color, box-shadow; transition-duration: var(--md-sys-motion-spatial-default-duration), var(--md-sys-motion-effects-default-duration), var(--md-sys-motion-effects-default-duration), var(--md-sys-motion-effects-default-duration); transition-timing-function: var(--md-sys-motion-spatial-default), var(--md-sys-motion-effects-default), var(--md-sys-motion-effects-default), var(--md-sys-motion-effects-default); @media (hover: hover) { &:hover { box-shadow: var(--md-sys-elevation-4); } } &[aria-expanded='true'] { border-radius: var(--md-sys-shape-corner-full); background-color: var(--md-fab-menu-color); color: var(--md-fab-menu-on-color); } } [data-md-fab-menu-trigger][data-md-color='secondary'] { --md-fab-menu-container: var(--md-sys-color-secondary-container); --md-fab-menu-on-container: var(--md-sys-color-on-secondary-container); --md-fab-menu-color: var(--md-sys-color-secondary); --md-fab-menu-on-color: var(--md-sys-color-on-secondary); } [data-md-fab-menu-trigger][data-md-color='tertiary'] { --md-fab-menu-container: var(--md-sys-color-tertiary-container); --md-fab-menu-on-container: var(--md-sys-color-on-tertiary-container); --md-fab-menu-color: var(--md-sys-color-tertiary); --md-fab-menu-on-color: var(--md-sys-color-on-tertiary); } [data-md-fab-menu-close-icon] { display: none; } [data-md-fab-menu-trigger][aria-expanded='true'] [data-md-fab-menu-icon] { display: none; } [data-md-fab-menu-trigger][aria-expanded='true'] [data-md-fab-menu-close-icon] { display: inline-flex; } [data-md-fab-menu-popover] { inset: auto; margin: 0; display: none; flex-direction: column; gap: var(--md-sys-measurement-space50); max-block-size: calc(100dvh - 128px); overflow-y: auto; border-width: 0; background-color: transparent; padding: var(--md-sys-measurement-space100); &:popover-open { display: flex; } } [data-md-fab-menu-popover][data-md-position='top-end'] { margin-inline: calc(-1 * var(--md-sys-measurement-space100)); margin-block-start: calc(-1 * var(--md-sys-measurement-space100)); align-items: flex-end; position-area: top span-left; } [data-md-fab-menu-popover][data-md-position='top-start'] { margin-inline: calc(-1 * var(--md-sys-measurement-space100)); margin-block-start: calc(-1 * var(--md-sys-measurement-space100)); align-items: flex-start; position-area: top span-right; } [data-md-fab-menu-popover][data-md-position='bottom-end'] { margin-inline: calc(-1 * var(--md-sys-measurement-space100)); margin-block-end: calc(-1 * var(--md-sys-measurement-space100)); align-items: flex-end; position-area: bottom span-left; } [data-md-fab-menu-popover][data-md-position='bottom-start'] { margin-inline: calc(-1 * var(--md-sys-measurement-space100)); margin-block-end: calc(-1 * var(--md-sys-measurement-space100)); align-items: flex-start; position-area: bottom span-right; } [data-md-fab-menu-popover]:not(:popover-open) > *, [data-md-fab-menu-popover][data-md-popover-closing] > * { translate: 0 var(--md-sys-measurement-space100); opacity: 0; } } @layer material.components { [data-md-rich-tooltip] { display: inline-flex; } [data-md-rich-tooltip-bubble] { inset: auto; margin: 0; overflow: visible; width: max-content; max-width: 312px; border-width: 0; border-radius: var(--md-sys-shape-corner-md); padding-inline: var(--md-sys-measurement-space200); padding-block: 12px var(--md-sys-measurement-space100); background-color: var(--md-sys-color-surface-container); box-shadow: var(--md-sys-elevation-2); text-align: start; white-space: normal; 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-rich-tooltip-bubble]:is([data-md-side='top'], [data-md-side='bottom']) { margin-block: var(--md-sys-measurement-space50); position-try-fallbacks: flip-block, flip-inline; } [data-md-rich-tooltip-bubble]:is([data-md-side='left'], [data-md-side='right']) { margin-inline: var(--md-sys-measurement-space50); position-try-fallbacks: flip-inline, flip-block; } [data-md-rich-tooltip-bubble][data-md-side='top'] { position-area: top span-right; } [data-md-rich-tooltip-bubble][data-md-side='bottom'] { position-area: bottom span-right; } [data-md-rich-tooltip-bubble][data-md-side='left'] { position-area: left span-bottom; } [data-md-rich-tooltip-bubble][data-md-side='right'] { position-area: right span-bottom; } [data-md-rich-tooltip-title] { display: block; margin-block-end: var(--md-sys-measurement-space50); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-title-sm); letter-spacing: var(--md-sys-typescale-title-sm-tracking); font-variation-settings: normal; } [data-md-rich-tooltip-text] { display: block; padding-block-end: var(--md-sys-measurement-space100); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-md); letter-spacing: var(--md-sys-typescale-body-md-tracking); font-variation-settings: normal; } [data-md-rich-tooltip-actions] { display: flex; flex-wrap: wrap; gap: var(--md-sys-measurement-space100); margin-inline-start: -12px; } } @layer material.components { [data-md-progress] { color: var(--md-color, var(--md-sys-color-primary)); stroke: var(--md-container, var(--md-sys-color-secondary-container)); & > svg { display: block; width: 100%; height: 100%; } } [data-md-progress]:not([data-md-circular]) { display: block; width: 100%; height: 4px; } [data-md-progress]:not([data-md-circular]):is([dir='rtl'], [dir='rtl'] *) { rotate: 180deg; } [data-md-progress]:not([data-md-circular])[data-md-thick] { height: 8px; } [data-md-progress]:not([data-md-circular])[data-md-wavy] { height: 10px; } [data-md-progress]:not([data-md-circular])[data-md-wavy][data-md-thick] { height: 14px; } [data-md-progress][data-md-circular] { display: inline-block; flex-shrink: 0; vertical-align: middle; width: 40px; height: 40px; } [data-md-progress][data-md-circular][data-md-thick] { width: 44px; height: 44px; } [data-md-progress][data-md-circular][data-md-wavy] { width: 48px; height: 48px; } [data-md-progress][data-md-circular][data-md-wavy][data-md-thick] { width: 52px; height: 52px; } [data-md-progress][data-md-color='primary'] { stroke: var(--md-sys-color-secondary-container); } } @layer material.components { [data-md-alert] { display: flex; align-items: flex-start; gap: 12px; border-radius: var(--md-sys-shape-corner-md); padding: var(--md-sys-measurement-space200); background-color: var(--md-container, var(--md-sys-color-info-container)); color: var(--md-on-container, var(--md-sys-color-on-info-container)); } [data-md-alert][data-md-color='neutral'] { background-color: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); } [data-md-alert-content] { min-width: 0; flex: 1; align-self: center; } [data-md-alert-content] > * + * { margin-top: var(--md-sys-measurement-space50); } [data-md-alert-title] { font: var(--md-sys-typescale-title-sm); letter-spacing: var(--md-sys-typescale-title-sm-tracking); font-variation-settings: normal; } [data-md-alert-description] { font: var(--md-sys-typescale-body-md); letter-spacing: var(--md-sys-typescale-body-md-tracking); font-variation-settings: normal; } [data-md-alert-actions] { display: flex; flex-wrap: wrap; gap: var(--md-sys-measurement-space100); margin-inline-start: -12px; padding-top: var(--md-sys-measurement-space50); } [data-md-alert-dismiss] { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: var(--md-sys-measurement-space500); height: var(--md-sys-measurement-space500); margin: -8px; border-radius: var(--md-sys-shape-corner-full); cursor: pointer; } } @layer material.components { [data-md-stat] { display: flex; flex-direction: column; gap: var(--md-sys-measurement-space50); border-radius: var(--md-sys-shape-corner-lg); background-color: var(--md-sys-color-surface-container); padding: var(--md-sys-measurement-space200); } [data-md-stat-header] { display: flex; align-items: center; gap: var(--md-sys-measurement-space100); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-label-lg); letter-spacing: var(--md-sys-typescale-label-lg-tracking); font-variation-settings: normal; } [data-md-stat-value] { font: var(--md-sys-typescale-emphasized-headline-md); letter-spacing: var(--md-sys-typescale-emphasized-headline-md-tracking); font-variation-settings: "ROND" 100; font-variant-numeric: tabular-nums; } [data-md-stat-description] { color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-sm); letter-spacing: var(--md-sys-typescale-body-sm-tracking); font-variation-settings: normal; } [data-md-stat-extra] { padding-top: var(--md-sys-measurement-space100); } } @layer material.components { [data-md-empty-state] { display: flex; flex-direction: column; align-items: center; gap: var(--md-sys-measurement-space200); padding-inline: var(--md-sys-measurement-space200); padding-block: var(--md-sys-measurement-space500); text-align: center; } [data-md-empty-state-illustration] { position: relative; display: grid; width: 112px; height: 112px; place-items: center; } [data-md-empty-state-shape] { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--md-sys-color-secondary-container); } [data-md-empty-state-icon] { position: relative; color: var(--md-sys-color-on-secondary-container); } [data-md-empty-state-title] { font: var(--md-sys-typescale-title-lg); letter-spacing: var(--md-sys-typescale-title-lg-tracking); font-variation-settings: normal; } [data-md-empty-state-description] { max-width: 448px; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-md); letter-spacing: var(--md-sys-typescale-body-md-tracking); font-variation-settings: normal; } [data-md-empty-state-actions] { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-top: var(--md-sys-measurement-space100); } } @layer material.components { [data-md-divider] { flex-shrink: 0; background-color: var(--md-sys-color-outline-variant); } [data-md-divider][data-md-orientation='horizontal'] { width: auto; height: 1px; } [data-md-divider][data-md-orientation='vertical'] { width: 1px; align-self: stretch; } [data-md-divider][data-md-orientation='horizontal'][data-md-inset] { margin-inline-start: var(--md-sys-measurement-space200); } [data-md-divider][data-md-orientation='horizontal'][data-md-middle] { margin-inline: var(--md-sys-measurement-space200); } [data-md-divider][data-md-orientation='vertical'][data-md-middle] { margin-block: var(--md-sys-measurement-space100); } [data-md-divider-heading] { display: flex; flex-shrink: 0; align-items: center; gap: var(--md-sys-measurement-space50); padding-bottom: var(--md-sys-measurement-space100); } [data-md-divider-heading][data-md-inset] { margin-inline-start: var(--md-sys-measurement-space200); } [data-md-divider-heading][data-md-middle] { margin-inline: var(--md-sys-measurement-space200); } [data-md-divider-text] { flex-shrink: 0; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-title-sm); letter-spacing: var(--md-sys-typescale-title-sm-tracking); } [data-md-divider-heading] [data-md-divider] { flex: 1 1 0%; min-width: 0; margin-inline-end: var(--md-sys-measurement-space100); } } @layer material.components { [data-md-form] { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: min-content; gap: var(--md-sys-measurement-space200); } [data-md-form] > [data-md-button] { justify-self: start; } [data-md-form-actions] { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--md-sys-measurement-space100); } } @layer material.components { [data-md-field] { --field-height: 56px; --field-pad: var(--md-sys-measurement-space200); --field-icon: 24px; --field-gap: var(--md-sys-measurement-space200); --field-start: var(--field-pad); --field-edge: var(--md-sys-color-outline); --field-ink: var(--md-sys-color-on-surface-variant); display: flex; flex-direction: column; min-width: 0; } @media (width >= 600px) { [data-md-field]:not([data-md-full]) { max-width: 40rem; } } [data-md-field][data-md-variant='filled'] { --field-edge: var(--md-sys-color-on-surface-variant); } [data-md-field][data-md-size='sm'] { --field-height: 40px; --field-pad: 12px; --field-icon: 20px; --field-gap: var(--md-sys-measurement-space100); } [data-md-field][data-md-size='xs'] { --field-height: 32px; --field-pad: var(--md-sys-measurement-space125); --field-icon: 16px; --field-gap: var(--md-sys-measurement-space75); } [data-md-field]:has([data-md-field-icon]) { --field-start: calc(var(--field-pad) + var(--field-icon) + var(--field-gap)); } [data-md-field-box] { position: relative; display: flex; align-items: center; gap: var(--field-gap); min-height: var(--field-height); padding-inline: var(--field-pad); border-radius: var(--md-sys-shape-corner-xs); cursor: text; } [data-md-field-control] { flex: 1 1 0%; min-width: 0; align-self: stretch; background: transparent; color: var(--md-sys-color-on-surface); caret-color: var(--md-sys-color-primary); outline: none; font: var(--md-sys-typescale-body-lg); letter-spacing: var(--md-sys-typescale-body-lg-tracking); } [data-md-field][data-md-size='xs'] [data-md-field-control] { font: var(--md-sys-typescale-body-md); letter-spacing: var(--md-sys-typescale-body-md-tracking); } [data-md-field][data-md-mono] [data-md-field-control] { font-family: var(--md-ref-typeface-mono); } [data-md-field-control]:-webkit-autofill { -webkit-text-fill-color: var(--md-sys-color-on-surface); transition: background-color 604800s, color 604800s; } [data-md-field]:has([data-md-field-control][aria-expanded='true']) [data-md-field-arrow] { rotate: 180deg; } [data-md-field-arrow] { transition: rotate var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast); } [data-md-field-icon], [data-md-field-trailing] { flex: none; width: var(--field-icon); height: var(--field-icon); color: var(--md-sys-color-on-surface-variant); } [data-md-field-error] { color: var(--md-sys-color-error); } [data-md-field-icon], [data-md-field-arrow] { pointer-events: none; } [data-md-field-button] { position: relative; display: grid; place-items: center; margin-inline-end: calc(-1 * var(--md-sys-measurement-space50)); border-radius: var(--md-sys-shape-corner-full); cursor: pointer; outline: none; } [data-md-field-button]::before { content: ''; position: absolute; inset: 50% auto auto 50%; width: calc(var(--field-icon) + var(--md-sys-measurement-space200)); height: calc(var(--field-icon) + var(--md-sys-measurement-space200)); translate: -50% -50%; border-radius: inherit; transition: background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast); } @media (hover: hover) { [data-md-field-button]:hover::before { background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent); } } [data-md-field-button]:focus-visible::before { background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), transparent); outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; } [data-md-field-button]:active::before { background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), transparent); } [data-md-field-button]:disabled::before, [data-md-field-button][aria-disabled='true']::before { display: none; } [data-md-field-affix] { flex: none; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-lg); letter-spacing: var(--md-sys-typescale-body-lg-tracking); } [data-md-field][data-md-size='xs'] [data-md-field-affix] { font: var(--md-sys-typescale-body-md); } [data-md-field-outline] { position: absolute; inset: -0.3125rem 0 0; margin: 0; padding: 0 calc(var(--field-pad) - var(--md-sys-measurement-space50)); border: 1px solid var(--field-edge); border-radius: inherit; pointer-events: none; min-width: 0; transition: border-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast); } [data-md-field-outline] > legend { display: block; width: auto; max-width: 100%; height: 0.6875rem; padding: 0; overflow: hidden; visibility: hidden; white-space: nowrap; font: var(--md-sys-typescale-body-sm); letter-spacing: var(--md-sys-typescale-body-sm-tracking); transition: max-width var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast); } [data-md-field-outline] > legend > span { display: inline-block; padding-inline: var(--md-sys-measurement-space50); } [data-md-field-label] { position: absolute; inset-inline-start: var(--field-pad); top: 0; max-width: calc(100% - 2 * var(--field-pad)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; translate: 0 -50%; color: var(--field-ink); font: var(--md-sys-typescale-body-sm); letter-spacing: var(--md-sys-typescale-body-sm-tracking); pointer-events: none; transition-property: top, inset-inline-start, font-size, line-height, color; transition-duration: var(--md-sys-motion-effects-fast-duration); transition-timing-function: var(--md-sys-motion-effects-fast); } [data-md-field]:has([data-md-field-control]:required) [data-md-field-label]::after, [data-md-field]:has([data-md-field-control]:required) [data-md-field-outline] > legend > span::after { content: ' *'; } [data-md-field]:not([data-md-floated]):has([data-md-field-label]):has([data-md-field-control]:placeholder-shown):not(:focus-within) { [data-md-field-label] { top: 50%; inset-inline-start: var(--field-start); font: var(--md-sys-typescale-body-lg); letter-spacing: var(--md-sys-typescale-body-lg-tracking); } [data-md-field-outline] > legend { max-width: 0.01px; } [data-md-field-affix] { visibility: hidden; } } [data-md-field][data-md-size='xs']:not([data-md-floated]):has([data-md-field-label]):has([data-md-field-control]:placeholder-shown):not(:focus-within) [data-md-field-label] { font: var(--md-sys-typescale-body-md); } [data-md-field]:has([data-md-field-label]):not(:focus-within) [data-md-field-control]::placeholder { color: transparent; } [data-md-field]:has([data-md-field-control]:placeholder-shown) [data-md-field-clear] { display: none; } @media (hover: hover) { :where([data-md-field]:not(:has([data-md-field-control]:disabled))) [data-md-field-box]:hover { --field-edge: var(--md-sys-color-on-surface); } } [data-md-field] [data-md-field-box]:focus-within { --field-edge: var(--md-sys-color-primary); --field-ink: var(--md-sys-color-primary); } [data-md-field-box]:focus-within [data-md-field-outline] { border-width: 2px; } [data-md-field][data-md-invalid] { --field-edge: var(--md-sys-color-error); --field-ink: var(--md-sys-color-error); } @media (hover: hover) { :where([data-md-field]:not(:has([data-md-field-control]:disabled)))[data-md-invalid] [data-md-field-box]:hover { --field-edge: var(--md-sys-color-on-error-container); } } [data-md-field][data-md-invalid] [data-md-field-box]:focus-within { --field-edge: var(--md-sys-color-error); --field-ink: var(--md-sys-color-error); } [data-md-field]:has([data-md-field-control]:disabled) { --field-edge: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity) * 100%), transparent); --field-ink: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent); [data-md-field-box] { cursor: default; } [data-md-field-control], [data-md-field-icon], [data-md-field-affix], [data-md-field-trailing] { color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent); } } [data-md-field-support-row] { display: flex; align-items: baseline; } [data-md-field-support] { min-width: 0; padding: var(--md-sys-measurement-space50) var(--field-pad) 0; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-sm); letter-spacing: var(--md-sys-typescale-body-sm-tracking); } [data-md-field][data-md-invalid] [data-md-field-support] { color: var(--md-sys-color-error); } [data-md-field-counter] { flex: none; margin-inline-start: auto; padding-block-start: var(--md-sys-measurement-space50); padding-inline-end: var(--field-pad); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-sm); letter-spacing: var(--md-sys-typescale-body-sm-tracking); font-variant-numeric: tabular-nums; } [data-md-field-counter][data-md-over] { color: var(--md-sys-color-error); } [data-md-field][data-md-variant='filled'] [data-md-field-box] { border-radius: var(--md-sys-shape-corner-xs) var(--md-sys-shape-corner-xs) 0 0; background-color: var(--md-sys-color-surface-container-highest); transition: background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast); } @media (hover: hover) { [data-md-field][data-md-variant='filled'] [data-md-field-box]:hover { background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), var(--md-sys-color-surface-container-highest)); } } [data-md-field][data-md-variant='filled'] [data-md-field-outline] { inset: auto 0 0; padding: 0; border: 0; border-block-end: 1px solid var(--field-edge); border-radius: 0; } [data-md-field][data-md-variant='filled'] [data-md-field-outline] > legend { display: none; } [data-md-field][data-md-variant='filled'] [data-md-field-box]:focus-within [data-md-field-outline] { border-block-end-width: 2px; } [data-md-field][data-md-variant='filled'] [data-md-field-label] { top: var(--md-sys-measurement-space200); inset-inline-start: var(--field-start); max-width: calc(100% - var(--field-start) - var(--field-pad)); } [data-md-field][data-md-variant='filled']:has([data-md-field-label]) [data-md-field-control] { padding-block: var(--md-sys-measurement-space300) var(--md-sys-measurement-space100); } [data-md-field][data-md-variant='filled']:has([data-md-field-label]) [data-md-field-affix] { align-self: stretch; padding-block: var(--md-sys-measurement-space300) var(--md-sys-measurement-space100); } [data-md-field][data-md-variant='filled']:has([data-md-field-control]:disabled) { --field-edge: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent); [data-md-field-box] { background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 4%, transparent); } } } @layer material.components { textarea[data-md-field-control] { --field-grip: var(--md-sys-measurement-space50); --textarea-clear: var(--md-sys-measurement-space100); --textarea-pad-top: calc((var(--field-height) - 1.5rem) / 2 - var(--textarea-clear)); --textarea-pad-bottom: calc((var(--field-height) - 1.5rem) / 2 - var(--field-grip)); margin-block: var(--textarea-clear) var(--field-grip); margin-inline-end: calc(var(--field-grip) - var(--field-pad)); padding-block: var(--textarea-pad-top) var(--textarea-pad-bottom); padding-inline-end: calc(var(--field-pad) - var(--field-grip)); resize: vertical; } textarea[data-md-field-control][data-md-autogrow] { field-sizing: content; min-block-size: calc(var(--field-rows, 3) * 1.5rem + var(--textarea-pad-top) + var(--textarea-pad-bottom)); max-block-size: calc(var(--field-max-rows, 1000) * 1.5rem + var(--textarea-pad-top) + var(--textarea-pad-bottom)); resize: none; } [data-md-field]:not([data-md-floated]):has([data-md-field-label]):has(textarea[data-md-field-control]:placeholder-shown):not(:focus-within) [data-md-field-label] { top: calc(var(--field-height) / 2); } [data-md-field][data-md-variant='filled']:has([data-md-field-label]) textarea[data-md-field-control] { --textarea-clear: var(--md-sys-measurement-space300); --textarea-pad-top: 0px; --textarea-pad-bottom: calc(var(--md-sys-measurement-space100) - var(--field-grip)); padding-block: var(--textarea-pad-top) var(--textarea-pad-bottom); } } @layer material.components { select[data-md-field-control] { --field-end: calc(var(--field-icon) + var(--field-gap) + var(--field-pad)); appearance: none; cursor: pointer; margin-inline: calc(-1 * var(--field-start)) calc(-1 * var(--field-end)); padding-inline: var(--field-start) var(--field-end); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } select[data-md-field-control]:disabled { cursor: default; } @supports (appearance: base-select) { select[data-md-field-control] { appearance: base-select; display: flex; align-items: center; border: 0; padding-block: 0; border-radius: 0; background: transparent; } select[data-md-field-control] selectedcontent { flex: 1 1 0%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } select[data-md-field-control]::picker-icon { display: none; } [data-md-field-box]:has(select[data-md-field-control]:open) { --field-edge: var(--md-sys-color-primary); --field-ink: var(--md-sys-color-primary); [data-md-field-outline] { border-width: 2px; } } [data-md-field][data-md-invalid] [data-md-field-box]:has(select[data-md-field-control]:open) { --field-edge: var(--md-sys-color-error); --field-ink: var(--md-sys-color-error); } [data-md-field]:has(select[data-md-field-control]:open) [data-md-field-arrow] { rotate: 180deg; } } } @layer material.components { input[type='file'][data-md-field-control] { align-self: center; color: transparent; cursor: pointer; } input[type='file'][data-md-field-control]::file-selector-button { height: 32px; margin-inline-end: 12px; padding-inline: var(--md-sys-measurement-space200); border: 0; border-radius: var(--md-sys-shape-corner-full); background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); cursor: pointer; font: var(--md-sys-typescale-label-lg); letter-spacing: var(--md-sys-typescale-label-lg-tracking); transition: background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast); } @media (hover: hover) { input[type='file'][data-md-field-control]:hover::file-selector-button { background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), var(--md-sys-color-secondary-container)); } } input[type='file'][data-md-field-control]:disabled::file-selector-button { background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity) * 100%), transparent); color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent); cursor: default; } [data-md-field][data-md-variant='filled']:has([data-md-field-label]) input[type='file'][data-md-field-control] { padding-block: 22px var(--md-sys-measurement-space75); } [data-md-field][data-md-variant='filled'] input[type='file'][data-md-field-control]::file-selector-button { height: 28px; } } @layer material.components { [data-md-selection-row] { --selection-ink: var(--md-sys-color-on-surface); display: flex; align-items: center; gap: var(--md-sys-measurement-space200); cursor: pointer; -webkit-tap-highlight-color: transparent; } [data-md-selection-row]:has([data-md-selection-hint]) { align-items: flex-start; } [data-md-selection-row][data-md-right] { flex-direction: row-reverse; justify-content: space-between; } [data-md-selection-row]:has(input:disabled) { cursor: default; } [data-md-selection-text] { min-width: 0; } [data-md-selection-label] { display: block; color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-body-lg); letter-spacing: var(--md-sys-typescale-body-lg-tracking); font-variation-settings: normal; } [data-md-selection-hint] { display: block; margin-top: var(--md-sys-measurement-space25); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-sm); letter-spacing: var(--md-sys-typescale-body-sm-tracking); font-variation-settings: normal; } [data-md-selection-row]:has(input:disabled) [data-md-selection-label] { color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent); } :is([data-md-checkbox-box], [data-md-radio-button], [data-md-switch-handle])::before { content: ''; position: absolute; border-radius: var(--md-sys-shape-corner-full); pointer-events: none; transition: background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast); } :is([data-md-checkbox-box], [data-md-radio-button], [data-md-switch]) input { margin: 0; appearance: none; cursor: inherit; outline: none; transition-property: background-color, border-color; transition-duration: var(--md-sys-motion-effects-fast-duration); transition-timing-function: var(--md-sys-motion-effects-fast); } [data-md-selection-row]:has(input:checked), [data-md-selection-row]:has(input:indeterminate) { --selection-ink: var(--md-sys-color-primary); } [data-md-selection-row][data-md-invalid] { --selection-ink: var(--md-sys-color-error); } @media (hover: hover) { [data-md-selection-row]:hover:not(:has(input:disabled)) :is([data-md-checkbox-box], [data-md-radio-button], [data-md-switch-handle])::before { background-color: color-mix(in srgb, var(--selection-ink) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent); } } [data-md-selection-row]:has(input:focus-visible) :is([data-md-checkbox-box], [data-md-radio-button], [data-md-switch-handle])::before { background-color: color-mix(in srgb, var(--selection-ink) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), transparent); } [data-md-selection-row]:not(:has(input:disabled)):active :is([data-md-checkbox-box], [data-md-radio-button], [data-md-switch-handle])::before { background-color: color-mix(in srgb, var(--selection-ink) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), transparent); } } @layer material.components { [data-md-checkbox] { min-width: auto; } [data-md-checkbox-box] { position: relative; display: grid; flex: none; place-items: center; width: 18px; height: 18px; } [data-md-checkbox-box] > * { grid-area: 1 / 1; } [data-md-selection-row]:has([data-md-selection-hint]) [data-md-checkbox-box] { margin-top: 3px; } [data-md-checkbox-box]::before { inset: -11px; } [data-md-checkbox-box]:has(input:focus-visible)::before { outline: 3px solid var(--md-sys-color-secondary); } [data-md-checkbox-box] input { width: 18px; height: 18px; border: 2px solid var(--md-sys-color-on-surface-variant); border-radius: 2px; } [data-md-checkbox-box] input:is(:checked, :indeterminate) { border-color: var(--md-sys-color-primary); background-color: var(--md-sys-color-primary); } [data-md-checkbox-box] :is([data-md-checkbox-check], [data-md-checkbox-mixed]) { color: var(--md-sys-color-on-primary); opacity: 0; scale: 0.5; pointer-events: none; transition-property: opacity, scale; transition-duration: var(--md-sys-motion-spatial-fast-duration); transition-timing-function: var(--md-sys-motion-spatial-fast); } [data-md-checkbox-box] input:checked:not(:indeterminate) ~ [data-md-checkbox-check], [data-md-checkbox-box] input:indeterminate ~ [data-md-checkbox-mixed] { opacity: 1; scale: 1; } [data-md-selection-row][data-md-invalid] [data-md-checkbox-box] input { border-color: var(--md-sys-color-error); } [data-md-selection-row][data-md-invalid] [data-md-checkbox-box] input:is(:checked, :indeterminate) { background-color: var(--md-sys-color-error); } [data-md-selection-row][data-md-invalid] [data-md-checkbox-box] :is([data-md-checkbox-check], [data-md-checkbox-mixed]) { color: var(--md-sys-color-on-error); } [data-md-checkbox-box] input:disabled { border-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent); } [data-md-checkbox-box] input:disabled:is(:checked, :indeterminate) { border-color: transparent; background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent); } [data-md-checkbox-box] input:disabled ~ :is([data-md-checkbox-check], [data-md-checkbox-mixed]) { color: var(--md-sys-color-surface); } [data-md-checkbox] [data-md-selection-support] { margin-top: var(--md-sys-measurement-space50); color: var(--md-sys-color-error); font: var(--md-sys-typescale-body-sm); letter-spacing: var(--md-sys-typescale-body-sm-tracking); font-variation-settings: normal; } } @layer material.components { [data-md-radio] { min-width: 0; } [data-md-radio-legend] { margin-bottom: 12px; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-label-lg); letter-spacing: var(--md-sys-typescale-label-lg-tracking); font-variation-settings: normal; } [data-md-radio-options] { display: grid; gap: var(--md-sys-measurement-space200); } @media (width >= 600px) { [data-md-radio][data-md-inline] [data-md-radio-options] { display: flex; flex-wrap: wrap; column-gap: var(--md-sys-measurement-space300); } } [data-md-radio] [data-md-selection-support] { margin-top: var(--md-sys-measurement-space100); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-sm); letter-spacing: var(--md-sys-typescale-body-sm-tracking); font-variation-settings: normal; } [data-md-radio] [data-md-selection-support][role='alert'] { color: var(--md-sys-color-error); } [data-md-radio-button] { position: relative; display: grid; flex: none; place-items: center; width: 20px; height: 20px; } [data-md-radio-button] > * { grid-area: 1 / 1; } [data-md-selection-row]:has([data-md-selection-hint]) [data-md-radio-button] { margin-top: var(--md-sys-measurement-space25); } [data-md-radio-button]::before { inset: -10px; } [data-md-radio-button]:has(input:focus-visible)::before { outline: 3px solid var(--md-sys-color-secondary); } [data-md-radio-button] input { width: 20px; height: 20px; border: 2px solid var(--md-sys-color-on-surface-variant); border-radius: var(--md-sys-shape-corner-full); } [data-md-radio-button] [data-md-radio-dot] { width: 10px; height: 10px; border-radius: var(--md-sys-shape-corner-full); background-color: var(--md-sys-color-primary); scale: 0; pointer-events: none; transition: scale var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast); } [data-md-radio-button] input:checked { border-color: var(--md-sys-color-primary); } [data-md-radio-button] input:checked ~ [data-md-radio-dot] { scale: 1; } [data-md-selection-row][data-md-invalid] [data-md-radio-button] input { border-color: var(--md-sys-color-error); } [data-md-selection-row][data-md-invalid] [data-md-radio-button] [data-md-radio-dot] { background-color: var(--md-sys-color-error); } [data-md-radio-button] input:disabled { border-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent); } [data-md-radio-button] input:disabled ~ [data-md-radio-dot] { background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent); } } @layer material.components { [data-md-toggle] { min-width: auto; } [data-md-switch] { position: relative; display: grid; flex: none; width: 52px; height: 32px; } [data-md-switch] input { width: 100%; height: 100%; border: 2px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-full); background-color: var(--md-sys-color-surface-container-highest); } [data-md-switch] input:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; } [data-md-switch-handle] { --handle: 16px; position: absolute; top: 50%; inset-inline-start: calc(16px - var(--handle) / 2); display: grid; place-items: center; width: var(--handle); height: var(--handle); translate: 0 -50%; border-radius: var(--md-sys-shape-corner-full); background-color: var(--md-sys-color-outline); color: var(--md-sys-color-surface-container-highest); pointer-events: none; transition-property: inset-inline-start, width, height, background-color; transition-duration: var(--md-sys-motion-spatial-fast-duration); transition-timing-function: var(--md-sys-motion-spatial-fast); } [data-md-switch-handle]::before { inset: 50% auto auto 50%; width: 40px; height: 40px; translate: -50% -50%; } [data-md-switch-handle] > svg { grid-area: 1 / 1; opacity: 0; transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast); } [data-md-switch][data-md-icons='both'] [data-md-switch-handle] { --handle: 24px; } [data-md-switch][data-md-icons='both'] input:not(:checked) ~ [data-md-switch-handle] [data-md-switch-off], [data-md-switch][data-md-icons] input:checked ~ [data-md-switch-handle] [data-md-switch-on] { opacity: 1; } [data-md-switch] input:checked { border-color: var(--md-sys-color-primary); background-color: var(--md-sys-color-primary); } [data-md-switch] input:checked ~ [data-md-switch-handle] { --handle: 24px; inset-inline-start: calc(36px - var(--handle) / 2); background-color: var(--md-sys-color-on-primary); color: var(--md-sys-color-on-primary-container); } [data-md-selection-row]:active [data-md-switch] input:not(:disabled) ~ [data-md-switch-handle] { --handle: 28px; } @media (hover: hover) { [data-md-selection-row]:hover [data-md-switch] input:not(:disabled) ~ [data-md-switch-handle] { background-color: var(--md-sys-color-on-surface-variant); } [data-md-selection-row]:hover [data-md-switch] input:checked:not(:disabled) ~ [data-md-switch-handle] { background-color: var(--md-sys-color-primary-container); } } [data-md-switch] input:focus-visible ~ [data-md-switch-handle], [data-md-selection-row]:active [data-md-switch] input:not(:disabled) ~ [data-md-switch-handle] { background-color: var(--md-sys-color-on-surface-variant); } [data-md-switch] input:checked:focus-visible ~ [data-md-switch-handle], [data-md-selection-row]:active [data-md-switch] input:checked:not(:disabled) ~ [data-md-switch-handle] { background-color: var(--md-sys-color-primary-container); } [data-md-switch] input:disabled { border-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity) * 100%), transparent); background-color: color-mix(in srgb, var(--md-sys-color-surface-container-highest) calc(var(--md-sys-state-disabled-container-opacity) * 100%), transparent); } [data-md-switch] input:disabled ~ [data-md-switch-handle] { background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent); color: color-mix(in srgb, var(--md-sys-color-surface-container-highest) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent); } [data-md-switch] input:disabled:checked { border-color: transparent; background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity) * 100%), transparent); } [data-md-switch] input:disabled:checked ~ [data-md-switch-handle] { background-color: var(--md-sys-color-surface); color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent); } } @layer material.components { [data-md-chip] { --chip-disabled-container: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity) * 100%), transparent); --chip-disabled-ink: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent); position: relative; display: inline-flex; flex-shrink: 0; align-items: center; max-width: 100%; height: 32px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-sm); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-label-lg); letter-spacing: var(--md-sys-typescale-label-lg-tracking); font-variation-settings: normal; white-space: nowrap; -webkit-user-select: none; user-select: none; transition-property: background-color, border-color, color, box-shadow; transition-duration: var(--md-sys-motion-effects-fast-duration); transition-timing-function: var(--md-sys-motion-effects-fast); } [data-md-chip]:not([data-md-chip='input']) { padding-inline: 15px; outline: none; cursor: pointer; &:has(:focus-visible)::before { opacity: var(--md-sys-state-focus-state-layer-opacity); } &:is(:focus-visible, :has(:focus-visible)) { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; } &[data-md-disabled]::before { display: none; } } [data-md-chip]:is([data-md-chip='filter'], [data-md-icon-start]):not([data-md-chip='input']) { padding-inline-start: 7px; } [data-md-chip][data-md-icon-end] { padding-inline-end: 7px; } [data-md-chip='assist'] { color: var(--md-sys-color-on-surface); } [data-md-chip='assist']:not([data-md-elevated], [data-md-disabled]):focus-visible { border-color: var(--md-sys-color-on-surface); } :is([data-md-chip='suggestion'], [data-md-chip='filter']):not([data-md-elevated], [data-md-disabled], :has(:checked), [aria-pressed='true']):is(:focus-visible, :has(:focus-visible)) { border-color: var(--md-sys-color-on-surface-variant); } [data-md-chip][data-md-elevated] { border-color: transparent; background-color: var(--md-sys-color-surface-container-low); box-shadow: var(--md-sys-elevation-1); } @media (hover: hover) { [data-md-chip][data-md-elevated]:not([data-md-disabled]):hover { box-shadow: var(--md-sys-elevation-2); } } [data-md-chip='filter']:is(:has(:checked), [aria-pressed='true']), [data-md-chip='input'][data-md-selected] { border-color: transparent; background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } @media (hover: hover) { [data-md-chip='filter']:not([data-md-elevated], [data-md-disabled]):is(:has(:checked), [aria-pressed='true']):hover { box-shadow: var(--md-sys-elevation-1); } } [data-md-chip][data-md-disabled] { border-color: var(--chip-disabled-container); color: var(--chip-disabled-ink); box-shadow: none; } [data-md-chip][data-md-disabled]:is([data-md-elevated], [data-md-selected], :has(:checked), [aria-pressed='true']) { border-color: transparent; background-color: var(--chip-disabled-container); } [data-md-chip][data-md-disabled]:not(a) { cursor: not-allowed; } a[data-md-chip][aria-disabled='true'] { pointer-events: none; } [data-md-chip-label] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :is([data-md-chip], [data-md-chip-action]) > [data-md-chip-icon] { margin-inline-end: var(--md-sys-measurement-space100); } [data-md-chip-trailing] { margin-inline-start: var(--md-sys-measurement-space100); } [data-md-chip]:not([data-md-chip='input'], [data-md-disabled]) [data-md-chip-icon], [data-md-chip='input'][data-md-selected]:not([data-md-disabled]) [data-md-chip-icon], :is([data-md-chip='assist'], [data-md-chip='suggestion']):not([data-md-disabled]) [data-md-chip-trailing] { color: var(--md-sys-color-primary); } [data-md-chip][data-md-actionable] [data-md-chip-icon] { transition: color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast); } [data-md-chip][data-md-actionable]:is(:active, :has(:focus-visible)) [data-md-chip-icon] { color: var(--md-sys-color-primary); } @media (hover: hover) { [data-md-chip][data-md-actionable]:hover [data-md-chip-icon] { color: var(--md-sys-color-primary); } } [data-md-chip-check-slot] { display: grid; flex-shrink: 0; width: 0; height: 18px; margin-inline-end: var(--md-sys-measurement-space100); overflow: hidden; transition: width var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default); } [data-md-chip-check-slot] > * { grid-area: 1 / 1; } [data-md-chip-check-slot]:has([data-md-chip-icon]) { width: 18px; transition: none; } [data-md-chip]:is(:has(:checked), [aria-pressed='true']) [data-md-chip-check-slot]:not(:has([data-md-chip-icon])) { width: 18px; transition-duration: var(--md-sys-motion-spatial-fast-duration); transition-timing-function: var(--md-sys-motion-spatial-fast); } [data-md-chip-check-slot] [data-md-chip-icon] { transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast); } [data-md-chip-check] { opacity: 0; transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast); } [data-md-chip]:is(:has(:checked), [aria-pressed='true']) [data-md-chip-check-slot] [data-md-chip-icon] { opacity: 0; } [data-md-chip]:is(:has(:checked), [aria-pressed='true']) [data-md-chip-check] { opacity: 1; transition-duration: var(--md-sys-motion-effects-slow-duration); transition-timing-function: var(--md-sys-motion-effects-slow); } [data-md-chip='input'] { isolation: isolate; } [data-md-chip='input']:not([data-md-selected], [data-md-disabled]):has([data-md-chip-action]:focus-visible) { border-color: var(--md-sys-color-on-surface-variant); } [data-md-chip='input']:has([data-md-chip-action]:focus-visible) { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; } [data-md-chip-action] { display: flex; align-items: center; min-width: 0; height: 100%; padding-inline: 11px; outline: none; } [data-md-chip][data-md-icon-start] [data-md-chip-action] { padding-inline-start: 7px; } [data-md-chip][data-md-avatar] [data-md-chip-action] { padding-inline-start: 3px; } [data-md-chip][data-md-removable] [data-md-chip-action] { padding-inline-end: var(--md-sys-measurement-space100); } :is(a, button)[data-md-chip-action] { cursor: pointer; &::after { content: ''; position: absolute; inset-inline: 0; top: 50%; height: var(--md-sys-measurement-space600); translate: 0 -50%; } } [data-md-chip]:not([data-md-disabled]) :is(a, button)[data-md-chip-action] { &::before { content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: var(--md-sys-shape-corner-sm); background-color: currentColor; opacity: 0; 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-chip][data-md-disabled] :is(a, button)[data-md-chip-action] { cursor: not-allowed; } [data-md-chip][data-md-disabled] a[data-md-chip-action] { pointer-events: none; } [data-md-chip-avatar] { flex-shrink: 0; width: 24px; height: 24px; margin-inline-end: var(--md-sys-measurement-space100); border-radius: var(--md-sys-shape-corner-full); } span[data-md-chip-avatar] { display: grid; place-items: center; background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); font: var(--md-sys-typescale-label-sm); letter-spacing: var(--md-sys-typescale-label-sm-tracking); font-variation-settings: normal; } img[data-md-chip-avatar] { object-fit: cover; } [data-md-chip][data-md-disabled] [data-md-chip-avatar] { opacity: var(--md-sys-state-disabled-content-opacity); } [data-md-chip-remove] { position: relative; display: grid; flex-shrink: 0; place-items: center; width: 18px; height: 18px; margin-inline-end: 7px; border-radius: var(--md-sys-shape-corner-full); outline: none; cursor: pointer; &::after { content: ''; position: absolute; inset: -15px; } &:disabled { cursor: not-allowed; } &:not(:disabled) { &::before { content: ''; position: absolute; inset: -3px; border-radius: var(--md-sys-shape-corner-full); background-color: currentColor; opacity: 0; 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 { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; } &:focus-visible::before { opacity: var(--md-sys-state-focus-state-layer-opacity); } &:active::before { opacity: var(--md-sys-state-pressed-state-layer-opacity); } } } } @layer material.components { [data-md-chip-set] { min-width: 0; } [data-md-chip-set-label] { margin-bottom: var(--md-sys-measurement-space100); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-label-lg); letter-spacing: var(--md-sys-typescale-label-lg-tracking); font-variation-settings: normal; } [data-md-chip-set-row] { display: flex; flex-wrap: wrap; gap: var(--md-sys-measurement-space100); } [data-md-chip-set-hint], [data-md-chip-set-errors] > p { margin-top: var(--md-sys-measurement-space50); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-sm); letter-spacing: var(--md-sys-typescale-body-sm-tracking); font-variation-settings: normal; } [data-md-chip-set-errors] > p { color: var(--md-sys-color-error); } [data-md-chip-set-scroller] { position: relative; } [data-md-chip-set-scroller] > [data-md-chip-set-row] { --chip-fade-start: 0px; --chip-fade-end: 0px; flex-wrap: nowrap; margin: calc(-1 * var(--md-sys-measurement-space100)) calc(-1 * var(--md-sys-measurement-space75)); padding: var(--md-sys-measurement-space100) var(--md-sys-measurement-space75); overflow-x: auto; scroll-padding-inline: var(--md-sys-measurement-space300); scrollbar-width: none; mask-image: linear-gradient(to right, transparent, black var(--chip-fade-start), black calc(100% - var(--chip-fade-end)), transparent); &:is([dir='rtl'], [dir='rtl'] *) { mask-image: linear-gradient(to left, transparent, black var(--chip-fade-start), black calc(100% - var(--chip-fade-end)), transparent); } &[data-md-scroll-start] { --chip-fade-start: var(--md-sys-measurement-space300); } &[data-md-scroll-end] { --chip-fade-end: var(--md-sys-measurement-space300); } @media (pointer: fine) { scroll-padding-inline: var(--md-sys-measurement-space500); } } [data-md-chip-scroll] { position: absolute; inset-block: 0; display: none; place-items: center; width: 32px; height: 32px; margin-block: auto; border-radius: var(--md-sys-shape-corner-full); background-color: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant); box-shadow: var(--md-sys-elevation-1); } [data-md-chip-scroll='start'] { inset-inline-start: 0; } [data-md-chip-scroll='end'] { inset-inline-end: 0; } @media (pointer: fine) { [data-md-chip-set-row][data-md-scroll-start] ~ [data-md-chip-scroll='start'], [data-md-chip-set-row][data-md-scroll-end] ~ [data-md-chip-scroll='end'] { display: grid; } } } @layer material.components { [data-md-choices-empty] { padding: 12px var(--md-sys-measurement-space200); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-md); letter-spacing: var(--md-sys-typescale-body-md-tracking); font-variation-settings: normal; } } @layer material.components { [data-md-slider] { --slider-active: var(--md-color, var(--md-sys-color-primary)); --slider-inactive: var(--md-container, var(--md-sys-color-secondary-container)); --slider-on-active: var(--md-on-color, var(--md-sys-color-on-primary)); --slider-on-inactive: var(--md-on-container, var(--md-sys-color-on-secondary-container)); --slider-disabled-active: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent); --slider-disabled-inactive: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity) * 100%), transparent); --slider-across: 48px; --slider-track: 16px; --slider-handle: 44px; width: 100%; min-width: 0; } [data-md-slider][data-md-size='sm'] { --slider-track: 24px; } [data-md-slider][data-md-size='md'] { --slider-across: 52px; --slider-track: 40px; --slider-handle: 52px; } [data-md-slider][data-md-size='lg'] { --slider-across: 68px; --slider-track: 56px; --slider-handle: 68px; } [data-md-slider][data-md-size='xl'] { --slider-across: 108px; --slider-track: 96px; --slider-handle: 108px; } [data-md-slider][data-md-color='primary'] { --slider-inactive: var(--md-sys-color-secondary-container); --slider-on-inactive: var(--md-sys-color-on-secondary-container); } [data-md-slider]:has([data-md-slider-input]:disabled) { --slider-active: var(--slider-disabled-active); --slider-inactive: var(--slider-disabled-inactive); --slider-on-active: var(--slider-disabled-inactive); --slider-on-inactive: var(--slider-disabled-active); } [data-md-slider][data-md-orientation='vertical'] { display: flex; flex-direction: column; width: fit-content; } [data-md-slider-label] { display: block; margin-bottom: var(--md-sys-measurement-space100); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-label-lg); letter-spacing: var(--md-sys-typescale-label-lg-tracking); font-variation-settings: normal; } [data-md-slider-control] { position: relative; height: var(--slider-across); cursor: pointer; touch-action: pan-y; -webkit-user-select: none; user-select: none; } [data-md-slider-control]:has(:disabled) { cursor: not-allowed; } [data-md-slider][data-md-orientation='vertical'] [data-md-slider-control] { flex: auto; width: var(--slider-across); height: 192px; min-height: 0; container-type: size; touch-action: pan-x; } [data-md-slider][data-md-value-label='always'] [data-md-slider-control] { margin-top: var(--md-sys-measurement-space600); } [data-md-slider][data-md-value-label='always'][data-md-orientation='vertical'] [data-md-slider-control] { margin-top: 0; margin-inline-start: var(--md-sys-measurement-space600); } [data-md-slider-drawing] { position: absolute; inset-block: 0; inset-inline: var(--md-sys-measurement-space25); pointer-events: none; &:is([dir='rtl'], [dir='rtl'] *) { scale: -1 1; } } [data-md-slider][data-md-orientation='vertical'] [data-md-slider-drawing] { inset: auto; top: 50%; left: 50%; width: calc(100cqh - var(--md-sys-measurement-space50)); height: 100cqw; translate: -50% -50%; rotate: -90deg; scale: none; } [data-md-slider-track] { position: absolute; inset-inline: 0; top: 50%; height: var(--slider-track); translate: 0 -50%; } [data-md-slider-segment] { position: absolute; inset-block: 0; background-color: var(--slider-inactive); } [data-md-slider-segment='active'] { background-color: var(--slider-active); } :is([data-md-slider-tick], [data-md-slider-stop]) { position: absolute; top: 50%; width: 4px; height: 4px; translate: -50% -50%; border-radius: var(--md-sys-shape-corner-full); background-color: var(--slider-on-inactive); } [data-md-slider-tick][data-md-active] { background-color: var(--slider-on-active); } [data-md-slider]:has([data-md-slider-input]:disabled) [data-md-slider-icon] { color: var(--slider-disabled-active); } [data-md-slider-icon] { position: absolute; top: 50%; display: flex; translate: 0 -50%; color: var(--slider-on-inactive); &[data-md-active] { color: var(--slider-on-active); } &:is([dir='rtl'], [dir='rtl'] *) { scale: -1 1; } } [data-md-slider][data-md-orientation='vertical'] [data-md-slider-icon] { rotate: 90deg; scale: none; } [data-md-slider-handle] { position: absolute; inset-block: 0; width: 0; } [data-md-slider-thumb] { position: absolute; top: 50%; left: 0; width: 4px; height: var(--slider-handle); translate: -50% -50%; border-radius: var(--md-sys-shape-corner-full); background-color: var(--slider-active); outline-offset: 2px; transition-property: width, height; transition-duration: var(--md-sys-motion-spatial-fast-duration); transition-timing-function: var(--md-sys-motion-spatial-fast); } :is([data-md-pressed], [data-md-focused]) > [data-md-slider-thumb] { width: 2px; } [data-md-focused] > [data-md-slider-thumb] { height: calc(var(--slider-handle) - 6px); outline: 3px solid var(--md-sys-color-secondary); } [data-md-slider-value-anchor] { position: absolute; bottom: calc(50% + var(--slider-handle) / 2 + var(--md-sys-measurement-space50)); left: 0; z-index: 10; display: flex; justify-content: center; translate: -50% 0; &:is([dir='rtl'], [dir='rtl'] *) { scale: -1 1; } } [data-md-slider][data-md-orientation='vertical'] [data-md-slider-value-anchor] { scale: none; } [data-md-slider-value] { display: flex; align-items: center; justify-content: center; min-width: var(--md-sys-measurement-space600); height: 44px; padding-inline: var(--md-sys-measurement-space125); border-radius: var(--md-sys-shape-corner-full); background-color: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); font: var(--md-sys-typescale-label-lg); letter-spacing: var(--md-sys-typescale-label-lg-tracking); font-variation-settings: normal; white-space: nowrap; transform-origin: bottom; transition-property: opacity, scale; transition-duration: var(--md-sys-motion-effects-fast-duration); transition-timing-function: var(--md-sys-motion-effects-fast); } [data-md-slider][data-md-orientation='vertical'] [data-md-slider-value] { transform-origin: center; rotate: 90deg; } [data-md-slider][data-md-value-label='drag'] [data-md-slider-value] { opacity: 0; scale: 0.75; } [data-md-slider][data-md-value-label='drag'] :is([data-md-pressed], [data-md-focused]) [data-md-slider-value] { opacity: 1; scale: 1; } [data-md-slider-input] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; appearance: none; background: transparent; opacity: 0; pointer-events: none; accent-color: var(--slider-active); } [data-md-slider-hint], [data-md-slider-errors] > p { margin-top: var(--md-sys-measurement-space50); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-sm); letter-spacing: var(--md-sys-typescale-body-sm-tracking); font-variation-settings: normal; } [data-md-slider-errors] > p { color: var(--md-sys-color-error); } @media (scripting: none) { :is([data-md-slider], [data-md-slider][data-md-orientation]) [data-md-slider-control] { height: auto; cursor: auto; } [data-md-slider-control] > :not(:last-child) { margin-block-end: var(--md-sys-measurement-space100); } [data-md-slider-drawing] { display: none; } [data-md-slider-input] { position: static; display: block; width: 100%; height: 24px; appearance: auto; opacity: 1; pointer-events: auto; } } } @layer material.components { [data-md-search] { --search-height: 56px; --search-width: 100%; --search-open-width: 720px; position: relative; } [data-md-search]:is([data-md-open], [data-md-full-screen], :has(> [data-md-search-view].md-transition)) { z-index: 50; } [data-md-search-scrim] { position: fixed; inset: 0; z-index: -1; background-color: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent); transition-property: opacity; transition-duration: var(--md-sys-motion-effects-fast-duration); transition-timing-function: var(--md-sys-motion-effects-fast); } @starting-style { [data-md-search-scrim] { opacity: 0; } } [data-md-search]:is(:not([data-md-open]), [data-md-full-screen]) > [data-md-search-scrim] { opacity: 0; } [data-md-search-bar] { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--md-sys-measurement-space50); width: min(100%, var(--search-width)); height: var(--search-height); padding-inline: 12px; border-radius: var(--md-sys-shape-corner-full); background-color: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); cursor: text; transition-property: background-color, width, padding-inline; transition-duration: var(--md-sys-motion-effects-fast-duration); transition-timing-function: var(--md-sys-motion-effects-fast); } [data-md-search][data-md-open] [data-md-search-bar] { width: min(100%, var(--search-open-width)); padding-inline: var(--md-sys-measurement-space50); } @media (hover: hover) { [data-md-search]:not([data-md-open]) [data-md-search-bar]:hover { background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), var(--md-sys-color-surface-container-high)); } } [data-md-search][data-md-open] [data-md-search-bar] { background-color: transparent; } [data-md-search-leading], [data-md-search-clear] { display: grid; flex: none; place-items: center; width: var(--md-sys-measurement-space600); height: var(--md-sys-measurement-space600); border-radius: var(--md-sys-shape-corner-full); } [data-md-search-leading] { color: var(--md-sys-color-on-surface); } [data-md-search-clear] { color: var(--md-sys-color-on-surface-variant); cursor: pointer; } [data-md-search-bar] button { outline: none; transition: background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast); } @media (hover: hover) { [data-md-search-bar] button:hover { background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent); } } [data-md-search-bar] button:focus-visible { background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), transparent); outline: 3px solid var(--md-sys-color-secondary); outline-offset: -3px; } [data-md-search-field] { display: flex; flex: 1 1 0%; min-width: 0; height: 100%; } [data-md-search-input] { flex: 1 1 0%; min-width: 0; height: 100%; padding-inline: var(--md-sys-measurement-space50); appearance: none; background: transparent; color: var(--md-sys-color-on-surface); caret-color: var(--md-sys-color-primary); outline: none; font: var(--md-sys-typescale-body-lg); letter-spacing: var(--md-sys-typescale-body-lg-tracking); } [data-md-search-input]::-webkit-search-cancel-button, [data-md-search-input]::-webkit-search-decoration { appearance: none; display: none; } [data-md-search-bar]:has([data-md-search-input]:placeholder-shown) [data-md-search-clear] { display: none; } [data-md-search-trailing] { display: flex; flex: none; align-items: center; gap: var(--md-sys-measurement-space50); padding-inline-end: var(--md-sys-measurement-space50); } [data-md-search][data-md-open] [data-md-search-trailing] { display: none; } [data-md-search-view] { position: absolute; inset-inline: 0; top: 0; display: flex; flex-direction: column; max-width: var(--search-open-width); max-height: min(640px, 70dvh); padding-top: var(--search-height); overflow: hidden; border-radius: var(--md-sys-shape-corner-xl); background-color: var(--md-sys-color-surface-container-high); box-shadow: var(--md-sys-elevation-3); transform-origin: top; transition-property: opacity, scale; transition-duration: var(--md-sys-motion-spatial-fast-duration); transition-timing-function: var(--md-sys-motion-spatial-fast); } @starting-style { [data-md-search-view] { opacity: 0; scale: 1 0.9; } } [data-md-search]:not([data-md-open]) > [data-md-search-view] { opacity: 0; scale: 1 0.9; } [data-md-search-view]:has([data-md-search-results], [data-md-search-suggestions]) { min-height: 240px; } [data-md-search-results], [data-md-search-suggestions] { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-block: var(--md-sys-measurement-space100); } [data-md-search][data-md-trigger='icon'] { flex: none; width: var(--md-sys-measurement-space600); height: var(--md-sys-measurement-space600); } [data-md-search-trigger] { display: grid; place-items: center; width: var(--md-sys-measurement-space600); height: var(--md-sys-measurement-space600); border-radius: var(--md-sys-shape-corner-full); color: var(--md-sys-color-on-surface-variant); cursor: pointer; outline: none; transition: background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast); } @media (hover: hover) { [data-md-search-trigger]:hover { background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent); } } [data-md-search-trigger]:focus-visible { background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), transparent); outline: 3px solid var(--md-sys-color-secondary); outline-offset: -3px; } [data-md-search-trigger]:active { background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), transparent); } [data-md-search][data-md-trigger='icon']:not([data-md-open], [data-md-full-screen]) [data-md-search-bar] { display: none; } [data-md-search][data-md-full-screen] [data-md-search-bar] { position: fixed; inset: 0 0 auto; width: auto; height: calc(var(--md-sys-measurement-space900) + var(--material-safe-top, env(safe-area-inset-top))); padding-top: var(--material-safe-top, env(safe-area-inset-top)); padding-inline: var(--md-sys-measurement-space50); border-radius: 0; } [data-md-search][data-md-full-screen]:not([data-md-open]) [data-md-search-bar] { opacity: 0; background-color: transparent; transition-property: opacity; transition-duration: var(--md-sys-motion-spatial-fast-duration); transition-timing-function: var(--md-sys-motion-spatial-fast); } [data-md-search][data-md-full-screen] [data-md-search-view] { position: fixed; inset: 0; max-width: none; max-height: none; padding-top: calc(var(--md-sys-measurement-space900) + var(--material-safe-top, env(safe-area-inset-top))); background-color: var(--md-sys-color-surface-container-low); border-radius: 0; box-shadow: none; } [data-md-search-empty] { padding: 12px var(--md-sys-measurement-space200); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-md); letter-spacing: var(--md-sys-typescale-body-md-tracking); font-variation-settings: normal; } } @layer material.components { [data-md-list-item] { position: relative; display: flex; align-items: center; gap: var(--md-sys-measurement-space200); padding-inline: var(--md-sys-measurement-space200); color: var(--md-sys-color-on-surface); } [data-md-list-item][data-md-lines='1'] { min-height: 56px; padding-block: var(--md-sys-measurement-space100); } [data-md-list-item][data-md-lines='2'] { min-height: 72px; padding-block: var(--md-sys-measurement-space100); } [data-md-list-item][data-md-lines='3'] { min-height: 88px; padding-block: 12px; align-items: flex-start; } :where([data-md-list-row]) { --md-list-row-fill: transparent; } [data-md-list='segmented'] > [data-md-list-item] { --md-list-row-fill: var(--md-sys-color-surface-container); background-color: var(--md-list-row-fill); } [data-md-list-item][data-md-selected] { --md-list-row-fill: var(--md-sys-color-secondary-container); background-color: var(--md-list-row-fill); color: var(--md-sys-color-on-secondary-container); } [data-md-list-row][data-md-selected]:not([data-md-card], [data-md-list-item]) { --md-list-row-fill: var(--md-sys-color-secondary-container); background-color: var(--md-list-row-fill); color: var(--md-sys-color-on-secondary-container); } [data-md-list-item][aria-disabled='true'] { pointer-events: none; color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent); } [data-md-list-item]:not([data-md-selected], [aria-disabled='true']) :is([data-md-list-item-overline], [data-md-list-item-description], [data-md-list-item-trailing], [data-md-list-item-icon]) { color: var(--md-sys-color-on-surface-variant); } [data-md-list-item-leading], [data-md-list-item-end] { display: flex; flex-shrink: 0; align-items: center; } [data-md-list-item-end] { gap: var(--md-sys-measurement-space50); } [data-md-list-item-video] { flex-shrink: 0; overflow: hidden; border-radius: var(--md-sys-shape-corner-sm); background-color: var(--md-sys-color-surface-container-highest); & > * { width: 100%; height: 100%; object-fit: cover; } } [data-md-list-item-video][data-md-size='sm'] { width: 100px; height: 56px; } [data-md-list-item-video][data-md-size='lg'] { width: 114px; height: 64px; } [data-md-list-item-avatar] { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--md-sys-shape-corner-full); object-fit: cover; } span[data-md-list-item-avatar] { display: grid; place-items: center; background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); font: var(--md-sys-typescale-title-md); letter-spacing: var(--md-sys-typescale-title-md-tracking); } [data-md-list-item-image] { flex-shrink: 0; width: 56px; height: 56px; border-radius: var(--md-sys-shape-corner-sm); object-fit: cover; } [data-md-list-item-content] { min-width: 0; flex: 1 1 0%; } [data-md-list-item-overline] { font: var(--md-sys-typescale-label-sm); letter-spacing: var(--md-sys-typescale-label-sm-tracking); } [data-md-list-item-title] { display: block; overflow: hidden; outline: none; font: var(--md-sys-typescale-body-lg); letter-spacing: var(--md-sys-typescale-body-lg-tracking); text-overflow: ellipsis; white-space: nowrap; } [data-md-list-item-description] { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font: var(--md-sys-typescale-body-md); letter-spacing: var(--md-sys-typescale-body-md-tracking); } [data-md-list-item-trailing] { flex-shrink: 0; font: var(--md-sys-typescale-label-sm); letter-spacing: var(--md-sys-typescale-label-sm-tracking); } [data-md-list][data-md-dividers] > [data-md-list-item]:not(:last-child)::after { content: ''; position: absolute; inset-inline: var(--md-sys-measurement-space200); bottom: 0; height: 1px; background-color: var(--md-sys-color-outline-variant); pointer-events: none; } [data-md-list-row] { cursor: pointer; transition-property: background-color, border-radius; transition-duration: var(--md-sys-motion-effects-fast-duration), var(--md-sys-motion-spatial-fast-duration); transition-timing-function: var(--md-sys-motion-effects-fast), var(--md-sys-motion-spatial-fast); } @media (hover: hover) { [data-md-list-row]:not([data-md-card]):hover:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-md-list-open]):hover)) { background-color: color-mix(in srgb, currentColor calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), var(--md-list-row-fill, transparent)); } } [data-md-list-row]:not([data-md-card]):has([data-md-list-open]:focus-visible) { background-color: color-mix(in srgb, currentColor calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), var(--md-list-row-fill, transparent)); outline: 3px solid var(--md-sys-color-secondary); outline-offset: -3px; } [data-md-list-row]:not([data-md-card]):active:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-md-list-open]):active)) { background-color: color-mix(in srgb, currentColor calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), var(--md-list-row-fill, transparent)); } [data-md-list-row] [data-md-list-open]:focus-visible { outline: none; } [data-md-list='segmented'] > [data-md-list-item] { border-radius: var(--md-sys-shape-corner-xs); } [data-md-list='segmented'] > [data-md-list-item]:first-child { border-start-start-radius: var(--md-sys-shape-corner-lg); border-start-end-radius: var(--md-sys-shape-corner-lg); } [data-md-list='segmented'] > [data-md-list-item]:last-child { border-end-start-radius: var(--md-sys-shape-corner-lg); border-end-end-radius: var(--md-sys-shape-corner-lg); } @media (hover: hover) { [data-md-list='segmented'] > [data-md-list-item][data-md-list-row]:hover { border-radius: var(--md-sys-shape-corner-md); } } [data-md-list='segmented'] > [data-md-list-item]:is([data-md-selected], [data-md-list-row]:active, [data-md-list-row]:has([data-md-list-open]:focus-visible)) { border-radius: var(--md-sys-shape-corner-lg); } } @layer material.components { [data-md-table] { --cell-x: 12px; --cell-y: var(--md-sys-measurement-space200); position: relative; width: 100%; border-collapse: collapse; color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-body-md); letter-spacing: var(--md-sys-typescale-body-md-tracking); } [data-md-table][data-md-size='xs'] { --cell-x: var(--md-sys-measurement-space100); --cell-y: var(--md-sys-measurement-space100); font: var(--md-sys-typescale-body-sm); letter-spacing: var(--md-sys-typescale-body-sm-tracking); } [data-md-table][data-md-dense] { --cell-y: var(--md-sys-measurement-space100); } [data-md-table][data-md-size='xs'][data-md-dense] { --cell-y: var(--md-sys-measurement-space50); } [data-md-table] :where(th, td) { padding: var(--cell-y) var(--cell-x); text-align: start; vertical-align: middle; } [data-md-table] :where(thead th) { color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-title-sm); letter-spacing: var(--md-sys-typescale-title-sm-tracking); white-space: nowrap; border-bottom: 1px solid var(--md-sys-color-outline-variant); } [data-md-table][data-md-size='xs'] :where(thead th) { font: var(--md-sys-typescale-label-md); letter-spacing: var(--md-sys-typescale-label-md-tracking); } [data-md-table] :where(tbody tr) { border-bottom: 1px solid var(--md-sys-color-outline-variant); } [data-md-table] :where(tbody tr:last-child) { border-bottom: 0; } [data-md-table] :where(tbody tr:is([aria-selected='true'], [data-md-selected])) { --md-list-row-fill: var(--md-sys-color-secondary-container); background-color: var(--md-list-row-fill); color: var(--md-sys-color-on-secondary-container); } } @layer material.components { [data-md-sort-header-button] { display: inline-flex; align-items: center; gap: var(--md-sys-measurement-space50); border-radius: var(--md-sys-shape-corner-xs); cursor: pointer; } [data-md-sort-header][data-md-active] [data-md-sort-header-button] { color: var(--md-sys-color-on-surface); } @media (hover: hover) { [data-md-sort-header-button]:hover { color: var(--md-sys-color-on-surface); } } [data-md-sort-header-arrow] { transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast); } [data-md-sort-header]:not([data-md-active]) [data-md-sort-header-arrow] { opacity: 0; } [data-md-sort-header]:not([data-md-active]) [data-md-sort-header-button]:focus-visible [data-md-sort-header-arrow] { opacity: 0.6; } @media (hover: hover) { [data-md-sort-header]:not([data-md-active]) [data-md-sort-header-button]:hover [data-md-sort-header-arrow] { opacity: 0.6; } } } @layer material.components { [data-md-pagination] { display: flex; align-items: center; justify-content: space-between; gap: var(--md-sys-measurement-space200); } [data-md-pagination-summary] { color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-sm); letter-spacing: var(--md-sys-typescale-body-sm-tracking); font-variation-settings: normal; } [data-md-pagination-steps] { display: flex; align-items: center; gap: var(--md-sys-measurement-space50); } [data-md-pagination-step] { display: grid; place-items: center; width: var(--md-sys-measurement-space500); height: var(--md-sys-measurement-space500); border-radius: var(--md-sys-shape-corner-full); color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-label-lg); letter-spacing: var(--md-sys-typescale-label-lg-tracking); font-variation-settings: normal; font-variant-numeric: tabular-nums; } :is(a, button)[data-md-pagination-step] { cursor: pointer; } [data-md-pagination-step][aria-current='page'] { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } [data-md-pagination-step][aria-disabled='true'] { color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent); } @media (width < 600px) { [data-md-pagination-page], [data-md-pagination-range] { display: none; } } @media (width >= 600px) { [data-md-pagination-compact] { display: none; } } } @layer material.components { [data-md-modal] { margin: auto; max-width: 560px; min-width: 280px; width: calc(100vw - 48px); max-height: calc(100dvh - 48px); overflow: visible; padding: 0; background-color: transparent; color: var(--md-sys-color-on-surface); } [data-md-modal], [data-md-timepicker-dialog], [data-md-datepicker-picker]:modal { opacity: 1; scale: 1; transition-property: opacity, scale; transition-duration: var(--md-sys-motion-spatial-fast-duration); transition-timing-function: var(--md-sys-motion-spatial-fast); } @starting-style { [data-md-modal], [data-md-timepicker-dialog], [data-md-datepicker-picker]:modal { opacity: 0; scale: 0.95; } } [data-md-modal]::backdrop, [data-md-timepicker-dialog]::backdrop, [data-md-datepicker-picker]:modal::backdrop { background-color: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent); } @media (width < 600px) { [data-md-modal][data-md-fullscreen] { margin: 0; width: 100%; max-width: none; min-width: 0; height: 100dvh; max-height: none; } } [data-md-modal-box] { display: flex; max-height: inherit; flex-direction: column; overflow: hidden; border-radius: var(--md-sys-shape-corner-xl); background-color: var(--md-sys-color-surface-container-high); box-shadow: var(--md-sys-elevation-3); } @media (width < 600px) { [data-md-modal][data-md-fullscreen] > [data-md-modal-box] { height: 100%; border-radius: var(--md-sys-shape-corner-none); padding-top: var(--material-safe-top, env(safe-area-inset-top)); } } [data-md-modal-bar] { display: flex; height: var(--md-sys-measurement-space700); flex-shrink: 0; align-items: center; gap: var(--md-sys-measurement-space50); padding-inline: var(--md-sys-measurement-space50); } @media (width >= 600px) { [data-md-modal-bar] { display: none; } } [data-md-modal-bar-title] { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: var(--md-sys-typescale-title-lg); letter-spacing: var(--md-sys-typescale-title-lg-tracking); } [data-md-modal-head] { flex-shrink: 0; padding-inline: var(--md-sys-measurement-space300); padding-top: var(--md-sys-measurement-space300); } [data-md-modal-head]:has(+ [data-md-modal-body]) { padding-bottom: var(--md-sys-measurement-space100); } [data-md-modal-head]:has(> [data-md-icon]) { text-align: center; } @media (width < 600px) { [data-md-modal][data-md-fullscreen] > [data-md-modal-box] > [data-md-modal-head]:not(:has(> [data-md-icon], > [data-md-modal-subtitle])) { display: none; } } [data-md-modal-head] > [data-md-icon] { margin-inline: auto; margin-bottom: var(--md-sys-measurement-space200); color: var(--md-sys-color-secondary); } [data-md-modal-title] { font: var(--md-sys-typescale-headline-sm); letter-spacing: var(--md-sys-typescale-headline-sm-tracking); } @media (width < 600px) { [data-md-modal][data-md-fullscreen] > [data-md-modal-box] > [data-md-modal-head]:not(:has(> [data-md-icon])) > [data-md-modal-title] { display: none; } } [data-md-modal-subtitle] { color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-md); letter-spacing: var(--md-sys-typescale-body-md-tracking); } [data-md-modal-title] ~ [data-md-modal-subtitle], [data-md-modal-head] > [data-md-icon] ~ [data-md-modal-subtitle] { margin-top: var(--md-sys-measurement-space200); } @media (width < 600px) { [data-md-modal][data-md-fullscreen] > [data-md-modal-box] > [data-md-modal-head]:not(:has(> [data-md-icon])) > [data-md-modal-subtitle] { margin-top: 0; } } [data-md-modal-body] { min-height: 0; flex: 1 1 0%; overflow-y: auto; padding-inline: var(--md-sys-measurement-space300); padding-top: var(--md-sys-measurement-space300); padding-bottom: var(--md-sys-measurement-space300); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-md); letter-spacing: var(--md-sys-typescale-body-md-tracking); outline: none; } [data-md-modal-body]:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: -3px; } [data-md-modal-head] ~ [data-md-modal-body] { padding-top: var(--md-sys-measurement-space100); } @media (width < 600px) { [data-md-modal][data-md-fullscreen] > [data-md-modal-box] > [data-md-modal-head]:not(:has(> [data-md-icon], > [data-md-modal-subtitle])) ~ [data-md-modal-body] { padding-top: var(--md-sys-measurement-space200); } } [data-md-modal-body]:has(~ [data-md-modal-actions]) { padding-bottom: var(--md-sys-measurement-space100); } [data-md-modal-actions] { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--md-sys-measurement-space100); padding-inline: var(--md-sys-measurement-space300); padding-top: var(--md-sys-measurement-space300); padding-bottom: var(--md-sys-measurement-space300); } [data-md-modal-body] ~ [data-md-modal-actions] { padding-top: var(--md-sys-measurement-space200); } @media (width < 600px) { [data-md-modal][data-md-fullscreen] > [data-md-modal-box] > [data-md-modal-actions] { min-height: var(--md-sys-measurement-space700); padding-top: var(--md-sys-measurement-space100); padding-bottom: var(--md-sys-measurement-space100); } } [data-md-modal-head], [data-md-modal-bar], [data-md-modal-actions] { position: relative; } [data-md-modal-head]::after, [data-md-modal-bar]::after, [data-md-modal-actions]::before { content: ''; position: absolute; inset-inline: 0; height: 1px; background-color: var(--md-sys-color-outline-variant); opacity: 0; pointer-events: none; transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast); } [data-md-modal-head]::after, [data-md-modal-bar]::after { bottom: 0; } [data-md-modal-actions]::before { top: 0; } dialog[data-md-overflow-top] > [data-md-modal-box] > [data-md-modal-head][data-md-modal-divider]::after, dialog[data-md-overflow-top] > [data-md-modal-box] > [data-md-modal-bar][data-md-modal-divider]::after, dialog[data-md-overflow-bottom] > [data-md-modal-box] > [data-md-modal-actions][data-md-modal-divider]::before, [data-md-modal-head][data-md-modal-divider][data-md-separator]::after, [data-md-modal-bar][data-md-modal-divider][data-md-separator]::after, [data-md-modal-actions][data-md-modal-divider][data-md-separator]::before { opacity: 1; } } @layer material.components { [data-md-datepicker-support] { --datepicker-pad: var(--md-sys-measurement-space200); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-sm); letter-spacing: var(--md-sys-typescale-body-sm-tracking); } [data-md-datepicker-support] > * { padding: var(--md-sys-measurement-space50) var(--datepicker-pad) 0; } [data-md-datepicker-support][data-md-size='sm'] { --datepicker-pad: 12px; } [data-md-datepicker-support][data-md-size='xs'] { --datepicker-pad: var(--md-sys-measurement-space125); } [data-md-datepicker-error] { color: var(--md-sys-color-error); } [data-md-datepicker-picker] { inset: auto; width: 360px; max-width: calc(100vw - var(--md-sys-measurement-space200)); max-height: calc(100dvh - var(--md-sys-measurement-space200)); margin: 0; padding: 0; overflow: visible; border: 0; background: transparent; color: var(--md-sys-color-on-surface); } [data-md-datepicker-picker]:popover-open { top: anchor(bottom); left: anchor(left); margin-block: var(--md-sys-measurement-space50); position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline; opacity: 1; transition-property: opacity; transition-duration: var(--md-sys-motion-effects-fast-duration); transition-timing-function: var(--md-sys-motion-effects-fast); } @starting-style { [data-md-datepicker-picker]:popover-open { opacity: 0; } } [data-md-datepicker-picker]:modal { inset: 0; margin: auto; } [data-md-datepicker-surface] { display: flex; flex-direction: column; max-height: inherit; overflow-x: hidden; overflow-y: auto; border-radius: var(--md-sys-shape-corner-lg); background-color: var(--md-sys-color-surface-container-high); box-shadow: var(--md-sys-elevation-3); outline: none; } [data-md-datepicker-picker][data-md-presentation='modal'] [data-md-datepicker-surface] { border-radius: var(--md-sys-shape-corner-xl); } [data-md-datepicker-picker][data-md-presentation='full'] { inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; } [data-md-datepicker-picker][data-md-presentation='full'] [data-md-datepicker-surface] { height: 100%; max-height: none; padding-block: var(--material-safe-top, env(safe-area-inset-top)) var(--material-safe-bottom, env(safe-area-inset-bottom)); overflow: hidden; border-radius: 0; box-shadow: none; } [data-md-datepicker-full] { flex: none; border-bottom: 1px solid var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface-variant); } [data-md-datepicker-app-bar] { display: flex; align-items: center; justify-content: space-between; gap: var(--md-sys-measurement-space100); height: 64px; padding-inline: var(--md-sys-measurement-space50) 12px; } [data-md-datepicker-app-bar-actions] { display: flex; align-items: center; gap: var(--md-sys-measurement-space50); } [data-md-datepicker-full-headline] { display: flex; flex-direction: column; gap: var(--md-sys-measurement-space50); padding: 0 var(--md-sys-measurement-space300) var(--md-sys-measurement-space200); } [data-md-datepicker-picker][data-md-presentation='full'] [data-md-datepicker-calendar] { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } [data-md-datepicker-picker][data-md-presentation='full'] [data-md-datepicker-grid] thead th { position: sticky; top: 0; z-index: 1; background-color: var(--md-sys-color-surface-container-high); } [data-md-datepicker-picker][data-md-presentation='full'] [data-md-datepicker-day] { scroll-margin-block: 48px; } [data-md-datepicker-month-label] { padding: 20px 0 var(--md-sys-measurement-space100); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-title-sm); letter-spacing: var(--md-sys-typescale-title-sm-tracking); text-align: start; } [data-md-datepicker-header] { display: flex; flex-direction: column; justify-content: space-between; flex: none; min-height: 120px; border-bottom: 1px solid var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface-variant); } [data-md-datepicker-header][data-md-range] { min-height: 128px; } [data-md-datepicker-title] { padding: var(--md-sys-measurement-space200) 12px 0 var(--md-sys-measurement-space300); font: var(--md-sys-typescale-label-lg); letter-spacing: var(--md-sys-typescale-label-lg-tracking); } [data-md-datepicker-headline-row] { display: flex; align-items: center; justify-content: space-between; gap: var(--md-sys-measurement-space100); padding: 0 12px 12px var(--md-sys-measurement-space300); } [data-md-datepicker-headline] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--md-sys-typescale-headline-lg); letter-spacing: var(--md-sys-typescale-headline-lg-tracking); } [data-md-datepicker-header][data-md-range] [data-md-datepicker-headline] { font: var(--md-sys-typescale-title-lg); letter-spacing: var(--md-sys-typescale-title-lg-tracking); } [data-md-datepicker-nav] { display: flex; flex: none; align-items: center; justify-content: space-between; height: 56px; padding-inline: 12px; color: var(--md-sys-color-on-surface-variant); } [data-md-datepicker-nav][data-md-docked] { height: 64px; padding-inline: var(--md-sys-measurement-space50); } [data-md-datepicker-stepper], [data-md-datepicker-arrows] { display: flex; align-items: center; } [data-md-datepicker-arrows][data-md-concealed] { visibility: hidden; } [data-md-datepicker-menu-button] { display: inline-flex; align-items: center; gap: var(--md-sys-measurement-space100); height: 40px; padding-inline: 12px var(--md-sys-measurement-space100); border-radius: var(--md-sys-shape-corner-full); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-label-lg); letter-spacing: var(--md-sys-typescale-label-lg-tracking); white-space: nowrap; cursor: pointer; } [data-md-datepicker-nav][data-md-docked] [data-md-datepicker-menu-button] { padding-inline: var(--md-sys-measurement-space100) var(--md-sys-measurement-space50); gap: var(--md-sys-measurement-space50); } [data-md-datepicker-menu-arrow] { transition: rotate var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast); } [data-md-datepicker-menu-button][aria-expanded='true'] [data-md-datepicker-menu-arrow] { rotate: 180deg; } [data-md-datepicker-grid] { width: calc(100% - 24px); margin-inline: 12px; border-collapse: collapse; table-layout: fixed; } [data-md-datepicker-grid] th { height: 48px; padding: 0; color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-body-lg); letter-spacing: var(--md-sys-typescale-body-lg-tracking); text-align: center; } [data-md-datepicker-day] { --datepicker-layer: var(--md-sys-color-on-surface-variant); position: relative; height: 48px; padding: 0; color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-body-lg); letter-spacing: var(--md-sys-typescale-body-lg-tracking); text-align: center; cursor: pointer; outline: none; isolation: isolate; -webkit-tap-highlight-color: transparent; } [data-md-datepicker-day] > span { position: relative; display: grid; place-items: center; width: 40px; height: 40px; margin: auto; border-radius: var(--md-sys-shape-corner-full); isolation: isolate; transition: background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast); } [data-md-datepicker-day] > span::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-color: var(--datepicker-layer); opacity: 0; pointer-events: none; transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast); } @media (hover: hover) { [data-md-datepicker-day]:hover > span::before { opacity: var(--md-sys-state-hover-state-layer-opacity); } } [data-md-datepicker-day]:focus-visible > span::before { opacity: var(--md-sys-state-focus-state-layer-opacity); } [data-md-datepicker-day]:active > span::before { opacity: var(--md-sys-state-pressed-state-layer-opacity); } [data-md-datepicker-day]:is([aria-disabled='true'], [data-md-blank]) > span::before { display: none; } [data-md-datepicker-day]:focus-visible > span { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; } [data-md-datepicker-day][data-md-blank] { cursor: default; } [data-md-datepicker-day][data-md-outside] { color: var(--md-sys-color-on-surface-variant); } [data-md-datepicker-day][data-md-today] { --datepicker-layer: var(--md-sys-color-primary); color: var(--md-sys-color-primary); } [data-md-datepicker-day][data-md-today] > span { box-shadow: inset 0 0 0 1px var(--md-sys-color-primary); } [data-md-datepicker-day][data-md-between]::before, [data-md-datepicker-day][data-md-start]::before, [data-md-datepicker-day][data-md-end]::before { content: ''; position: absolute; inset-block: var(--md-sys-measurement-space50); inset-inline: 0; z-index: -1; background-color: var(--md-sys-color-secondary-container); } [data-md-datepicker-day][data-md-start]::before { inset-inline-start: 50%; } [data-md-datepicker-day][data-md-end]::before { inset-inline-end: 50%; } [data-md-datepicker-day][data-md-between] { --datepicker-layer: var(--md-sys-color-on-secondary-container); color: var(--md-sys-color-on-secondary-container); } [data-md-datepicker-day][data-md-selected] { --datepicker-layer: var(--md-sys-color-on-primary); color: var(--md-sys-color-on-primary); } [data-md-datepicker-day][data-md-selected] > span { background-color: var(--md-sys-color-primary); box-shadow: none; } [data-md-datepicker-day][aria-disabled='true'] { color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent); cursor: default; } [data-md-datepicker-day][aria-disabled='true'][data-md-today] > span { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent); } [data-md-datepicker-years] { display: grid; grid-template-columns: repeat(3, 1fr); align-content: start; justify-items: center; row-gap: var(--md-sys-measurement-space200); height: 335px; padding: var(--md-sys-measurement-space100) 12px; overflow-y: auto; overscroll-behavior: contain; border-bottom: 1px solid var(--md-sys-color-outline-variant); } [data-md-datepicker-year] { width: 72px; height: 36px; border-radius: var(--md-sys-shape-corner-full); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-lg); letter-spacing: var(--md-sys-typescale-body-lg-tracking); cursor: pointer; scroll-margin-block: var(--md-sys-measurement-space100); } [data-md-datepicker-year][data-md-current] { color: var(--md-sys-color-primary); box-shadow: inset 0 0 0 1px var(--md-sys-color-primary); } [data-md-datepicker-year][aria-selected='true'] { background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); box-shadow: none; } [data-md-datepicker-menu] { height: 344px; padding-block: var(--md-sys-measurement-space100); overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--md-sys-color-outline-variant); } [data-md-datepicker-option] { display: flex; align-items: center; gap: var(--md-sys-measurement-space200); width: 100%; height: 48px; padding-inline: var(--md-sys-measurement-space200); color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-body-lg); letter-spacing: var(--md-sys-typescale-body-lg-tracking); text-align: start; cursor: pointer; } [data-md-datepicker-option]:focus-visible { outline-offset: -3px; } [data-md-datepicker-option][aria-selected='true'] { background-color: var(--md-sys-color-surface-container-highest); } [data-md-datepicker-option][aria-disabled='true'] { color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent); cursor: default; } [data-md-datepicker-check] { color: var(--md-sys-color-on-surface); } [data-md-datepicker-option]:not([aria-selected='true']) [data-md-datepicker-check] { visibility: hidden; } [data-md-datepicker-entry] { padding: var(--md-sys-measurement-space125) var(--md-sys-measurement-space300) var(--md-sys-measurement-space200); } [data-md-datepicker-entry-fields][data-md-range] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--md-sys-measurement-space100); } [data-md-datepicker-actions] { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--md-sys-measurement-space100); padding: var(--md-sys-measurement-space50) var(--md-sys-measurement-space75) var(--md-sys-measurement-space100) 12px; } } @layer material.components { @property --timepicker-angle { syntax: ''; inherits: true; initial-value: 0deg; } [data-md-timepicker-field] [data-md-field-control] { cursor: pointer; caret-color: transparent; } [data-md-timepicker-dialog] { max-width: calc(100vw - var(--md-sys-measurement-space400)); max-height: calc(100dvh - var(--md-sys-measurement-space400)); margin: auto; padding: 0; overflow: visible; border: 0; background: transparent; color: var(--md-sys-color-on-surface); } [data-md-timepicker-surface] { display: grid; grid-template-columns: max-content; justify-content: center; padding: var(--md-sys-measurement-space300); border-radius: var(--md-sys-shape-corner-xl); background-color: var(--md-sys-color-surface-container-high); box-shadow: var(--md-sys-elevation-3); color: var(--md-sys-color-on-surface); } [data-md-timepicker-title] { padding-bottom: 20px; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-label-md); letter-spacing: var(--md-sys-typescale-label-md-tracking); } [data-md-timepicker-picker] { display: flex; flex-direction: column; align-items: center; } [data-md-timepicker-surface]:not([data-md-mode='input']) :is([data-md-timepicker-typing], [data-md-timepicker-when='input']), [data-md-timepicker-surface][data-md-mode='input'] :is([data-md-timepicker-picker], [data-md-timepicker-when='dial']) { display: none; } [data-md-timepicker-when] { display: contents; } [data-md-timepicker-display] { display: flex; margin-bottom: 36px; } [data-md-timepicker-numbers], [data-md-timepicker-inputs] { display: flex; align-items: flex-start; direction: ltr; } [data-md-timepicker-box] { display: grid; place-items: center; width: 96px; height: 80px; border-radius: var(--md-sys-shape-corner-sm); background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-display-lg); letter-spacing: var(--md-sys-typescale-display-lg-tracking); font-variant-numeric: tabular-nums; cursor: pointer; transition-property: background-color, color; transition-duration: var(--md-sys-motion-effects-fast-duration); transition-timing-function: var(--md-sys-motion-effects-fast); } [data-md-timepicker-box][aria-pressed='true'] { background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); } [data-md-timepicker-display][data-md-cycle='24'] [data-md-timepicker-box] { width: 114px; } [data-md-timepicker-separator] { display: grid; place-items: center; width: 24px; height: 80px; color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-display-lg); translate: 0 -4px; user-select: none; } [data-md-timepicker-period] { display: flex; flex-direction: column; gap: var(--md-sys-measurement-space50); width: 52px; height: 80px; margin-inline-start: var(--md-sys-measurement-space50); } [data-md-timepicker-period] > button { flex: 1 1 0%; min-width: 0; border-radius: var(--md-sys-shape-corner-full); background-color: var(--md-sys-color-surface-container-lowest); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-title-md); letter-spacing: var(--md-sys-typescale-title-md-tracking); cursor: pointer; transition-property: border-radius, background-color, color; transition-duration: var(--md-sys-motion-spatial-fast-duration); transition-timing-function: var(--md-sys-motion-spatial-fast); } [data-md-timepicker-period] > button:active, [data-md-timepicker-period] > button[aria-checked='true'] { border-radius: var(--md-sys-shape-corner-md); } [data-md-timepicker-period] > button[aria-checked='true'] { background-color: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); font-weight: var(--md-ref-typeface-weight-bold); } [data-md-timepicker-period] > button:disabled { cursor: default; color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity) * 100%), transparent); } [data-md-timepicker-dial] { --dial: 256px; --unit: calc(var(--dial) / 256); --outer: calc(101 * var(--unit)); --inner: calc(69 * var(--unit)); --handle: calc(48 * var(--unit)); --reach: var(--outer); position: relative; flex: none; width: var(--dial); height: var(--dial); margin-bottom: var(--md-sys-measurement-space300); border-radius: var(--md-sys-shape-corner-full); background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-body-lg); letter-spacing: var(--md-sys-typescale-body-lg-tracking); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; direction: ltr; transition: --timepicker-angle var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default); } [data-md-timepicker-dial][data-md-dragging] { transition: none; } [data-md-timepicker-dial][data-md-inner] { --reach: var(--inner); } [data-md-timepicker-labels], [data-md-timepicker-ink], [data-md-timepicker-set] { position: absolute; inset: 0; } [data-md-timepicker-set] { transition-property: opacity, visibility; transition-duration: var(--md-sys-motion-effects-default-duration); transition-timing-function: var(--md-sys-motion-effects-default); } [data-md-timepicker-dial]:not([data-md-cycle='24']) [data-md-timepicker-set='hour24'], [data-md-timepicker-dial][data-md-cycle='24'] [data-md-timepicker-set='hour12'] { display: none; } [data-md-timepicker-dial][data-md-view='minute'] :is([data-md-timepicker-set='hour12'], [data-md-timepicker-set='hour24']), [data-md-timepicker-dial]:not([data-md-view='minute']) [data-md-timepicker-set='minute'] { opacity: 0; visibility: hidden; } [data-md-timepicker-set] > span { --ring: var(--outer); position: absolute; left: calc(50% + var(--x) * var(--ring)); top: calc(50% + var(--y) * var(--ring)); display: grid; place-items: center; width: 48px; height: 48px; translate: -50% -50%; border-radius: var(--md-sys-shape-corner-full); font-variant-numeric: tabular-nums; } [data-md-timepicker-set] > span[data-md-inner] { --ring: var(--inner); } [data-md-timepicker-set] > span[data-md-disabled] { color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent); } [data-md-timepicker-selector] { position: absolute; inset: 0; pointer-events: none; } [data-md-timepicker-track] { position: absolute; left: calc(50% - 1px); bottom: 50%; width: 2px; height: calc(var(--reach) - var(--handle) / 2); background-color: var(--md-sys-color-primary); transform-origin: 50% 100%; rotate: var(--timepicker-angle); } [data-md-timepicker-centre], [data-md-timepicker-handle] { position: absolute; translate: -50% -50%; border-radius: var(--md-sys-shape-corner-full); background-color: var(--md-sys-color-primary); } [data-md-timepicker-centre] { left: 50%; top: 50%; width: 8px; height: 8px; } [data-md-timepicker-handle] { left: calc(50% + sin(var(--timepicker-angle)) * var(--reach)); top: calc(50% - cos(var(--timepicker-angle)) * var(--reach)); width: var(--handle); height: var(--handle); } [data-md-timepicker-ink] { color: var(--md-sys-color-on-primary); pointer-events: none; clip-path: circle(calc(var(--handle) / 2) at calc(50% + sin(var(--timepicker-angle)) * var(--reach)) calc(50% - cos(var(--timepicker-angle)) * var(--reach))); } [data-md-timepicker-ink] [data-md-timepicker-set] > span[data-md-disabled] { color: inherit; } [data-md-timepicker-inputs] [data-md-timepicker-separator] { height: 72px; } [data-md-timepicker-inputs] [data-md-timepicker-period] { height: 72px; } [data-md-timepicker-column] { width: 96px; } [data-md-timepicker-input] { display: block; width: 96px; height: 72px; padding: 0; border: 0; border-radius: var(--md-sys-shape-corner-sm); outline: none; background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); caret-color: var(--md-sys-color-primary); font: var(--md-sys-typescale-display-md); letter-spacing: var(--md-sys-typescale-display-md-tracking); font-variant-numeric: tabular-nums; text-align: center; transition-property: background-color, color, box-shadow; transition-duration: var(--md-sys-motion-effects-fast-duration); transition-timing-function: var(--md-sys-motion-effects-fast); } [data-md-timepicker-input]:focus { background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); box-shadow: inset 0 0 0 2px var(--md-sys-color-primary); } [data-md-timepicker-input][aria-invalid='true'] { background-color: var(--md-sys-color-error-container); color: var(--md-sys-color-error); caret-color: var(--md-sys-color-error); box-shadow: inset 0 0 0 1px var(--md-sys-color-error); } [data-md-timepicker-input][aria-invalid='true']:focus { box-shadow: inset 0 0 0 2px var(--md-sys-color-error); } [data-md-timepicker-support] { min-height: 2rem; padding-top: 7px; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-sm); letter-spacing: var(--md-sys-typescale-body-sm-tracking); } [data-md-timepicker-support][data-md-error], [data-md-timepicker-range-error] { color: var(--md-sys-color-error); } [data-md-timepicker-range-error] { max-width: 272px; padding-bottom: var(--md-sys-measurement-space100); font: var(--md-sys-typescale-body-sm); letter-spacing: var(--md-sys-typescale-body-sm-tracking); } [data-md-timepicker-actions] { display: flex; align-items: center; gap: var(--md-sys-measurement-space100); min-height: 48px; } [data-md-timepicker-actions] > [data-md-timepicker-spacer] { flex: 1 1 0%; } @media (orientation: landscape) and (height < 560px) { [data-md-timepicker-surface][data-md-mode='dial'] { grid-template-columns: 216px auto; grid-template-areas: 'display dial' 'actions actions'; column-gap: 36px; padding: var(--md-sys-measurement-space200) var(--md-sys-measurement-space300) var(--md-sys-measurement-space100); } [data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-title] { grid-area: display; align-self: start; margin-top: var(--md-sys-measurement-space100); padding: 0; } [data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-picker] { display: contents; } [data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-display] { grid-area: display; flex-direction: column; align-self: center; margin: 0; } [data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-display][data-md-cycle='24'] [data-md-timepicker-box] { width: 96px; } [data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-display] [data-md-timepicker-period] { flex-direction: row; width: 216px; height: 38px; margin: var(--md-sys-measurement-space200) 0 0; } [data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-dial] { grid-area: dial; margin: 0; } [data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-actions] { grid-area: actions; margin-top: var(--md-sys-measurement-space50); } } @media (orientation: landscape) and (height <= 364px) { [data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-dial] { --dial: 238px; } } @media (orientation: landscape) and (height <= 346px) { [data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-dial] { --dial: 200px; } } } @layer material.components { [data-md-collapse][data-md-variant='filled'] { border-radius: var(--md-sys-shape-corner-lg); background-color: var(--md-sys-color-surface-container); } [data-md-collapse-summary] { display: flex; min-block-size: var(--md-sys-measurement-space600); align-items: center; gap: 12px; border-radius: inherit; cursor: pointer; list-style-type: none; font: var(--md-sys-typescale-title-md); letter-spacing: var(--md-sys-typescale-title-md-tracking); &::-webkit-details-marker { display: none; } } [data-md-collapse][data-md-variant='filled'] > [data-md-collapse-summary] { padding-inline: var(--md-sys-measurement-space200); } [data-md-collapse-icon] { color: var(--md-sys-color-on-surface-variant); } [data-md-collapse-title] { min-width: 0; flex: 1 1 0%; } [data-md-collapse-chevron] { color: var(--md-sys-color-on-surface-variant); transition: rotate var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast); } [data-md-collapse][open]:not([data-md-collapse-closing]) > [data-md-collapse-summary] > [data-md-collapse-chevron] { rotate: 180deg; } [data-md-collapse-body] { padding-block: var(--md-sys-measurement-space50) var(--md-sys-measurement-space200); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-md); letter-spacing: var(--md-sys-typescale-body-md-tracking); } [data-md-collapse][data-md-variant='filled'] > [data-md-collapse-body] { padding-inline: var(--md-sys-measurement-space200); } } @layer material.components { [data-md-card] { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--md-sys-shape-corner-md); color: var(--md-sys-color-on-surface); } [data-md-card='filled'] { background-color: var(--md-sys-color-surface-container-highest); } [data-md-card='elevated'] { background-color: var(--md-sys-color-surface-container-low); box-shadow: var(--md-sys-elevation-1); } [data-md-card='outlined'] { border: 1px solid var(--md-sys-color-outline-variant); background-color: var(--md-sys-color-surface); } [data-md-card]:not([data-md-list-row], [data-md-dragged])::before { display: none; } [data-md-card][data-md-list-row] { cursor: pointer; transition-property: box-shadow; transition-duration: var(--md-sys-motion-spatial-default-duration); transition-timing-function: var(--md-sys-motion-spatial-default); } @media (hover: hover) { [data-md-card][data-md-list-row]:not([data-md-dragged]):hover:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-md-list-open]):hover)) { box-shadow: var(--md-sys-elevation-1); } [data-md-card='elevated'][data-md-list-row]:not([data-md-dragged]):hover:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-md-list-open]):hover)) { box-shadow: var(--md-sys-elevation-2); } [data-md-card][data-md-list-row]:not([data-md-dragged]):hover:has(:is(a, button, input, select, textarea, label, summary):not([data-md-list-open]):hover)::before { opacity: 0; } } [data-md-card][data-md-list-row]:not([data-md-dragged]):active:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-md-list-open]):active)) { box-shadow: none; } [data-md-card='elevated'][data-md-list-row]:not([data-md-dragged]):active:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-md-list-open]):active)) { box-shadow: var(--md-sys-elevation-1); } [data-md-card][data-md-list-row]:not([data-md-dragged]):has(:is(a, button, input, select, textarea, label, summary):not([data-md-list-open]):active)::before { opacity: 0; } [data-md-card][data-md-dragged] { box-shadow: var(--md-sys-elevation-3); } [data-md-card='elevated'][data-md-dragged] { box-shadow: var(--md-sys-elevation-4); } [data-md-card][data-md-list-row]:has([data-md-list-open]:focus-visible) { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; } [data-md-card][data-md-list-row] [data-md-list-open]:focus-visible { outline: none; } [data-md-card-figure] { flex-shrink: 0; overflow: hidden; & > img { width: 100%; object-fit: cover; } } [data-md-card-body] { display: flex; flex: 1 1 0%; flex-direction: column; gap: var(--md-sys-measurement-space200); padding: var(--md-sys-measurement-space200); } [data-md-card-header-row] { display: flex; align-items: flex-start; gap: var(--md-sys-measurement-space100); } [data-md-card-heading] { min-width: 0; flex: 1 1 0%; } [data-md-card-title] { font: var(--md-sys-typescale-title-md); letter-spacing: var(--md-sys-typescale-title-md-tracking); } [data-md-card-subtitle] { margin-top: var(--md-sys-measurement-space25); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-md); letter-spacing: var(--md-sys-typescale-body-md-tracking); } [data-md-card-menu] { display: flex; flex-shrink: 0; align-items: center; gap: var(--md-sys-measurement-space50); margin-block-start: calc(-1 * var(--md-sys-measurement-space100)); margin-inline-end: calc(-1 * var(--md-sys-measurement-space100)); } [data-md-card-header] > [data-md-divider] { margin-top: var(--md-sys-measurement-space200); } [data-md-card-content] { flex: 1 1 0%; font: var(--md-sys-typescale-body-md); letter-spacing: var(--md-sys-typescale-body-md-tracking); } [data-md-card-actions] { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--md-sys-measurement-space100); } } @layer material.components { [data-md-list] { display: flex; flex-direction: column; } [data-md-list='segmented'] { gap: var(--md-sys-measurement-space25); } } @layer material.components { [data-md-drawer-scrim] { position: fixed; inset: 0; z-index: 40; background-color: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent); opacity: 0; transition-property: opacity; transition-duration: var(--md-sys-motion-effects-default-duration); transition-timing-function: var(--md-sys-motion-effects-default); } [data-md-drawer][data-md-open] > [data-md-drawer-scrim] { opacity: 1; } @starting-style { [data-md-drawer][data-md-open] > [data-md-drawer-scrim] { opacity: 0; } } [data-md-drawer-sheet] { --sheet-offset: 100%; position: fixed; top: var(--material-safe-top, env(safe-area-inset-top)); bottom: 0; z-index: 50; display: flex; width: 100%; flex-direction: column; overflow-y: auto; padding: var(--md-sys-measurement-space300); padding-block-end: calc(var(--md-sys-measurement-space300) + var(--material-safe-bottom, env(safe-area-inset-bottom))); background-color: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface); box-shadow: var(--md-sys-elevation-1); translate: var(--sheet-offset) 0; transition-property: translate; transition-duration: var(--md-sys-motion-effects-default-duration); transition-timing-function: var(--md-sys-motion-easing-emphasized-accelerate); } [data-md-drawer-sheet][data-md-side='end'] { inset-inline-end: 0; } [data-md-drawer-sheet][data-md-side='start'] { --sheet-offset: -100%; inset-inline-start: 0; } [data-md-drawer-sheet][data-md-side='end']:is([dir='rtl'], [dir='rtl'] *) { --sheet-offset: -100%; } [data-md-drawer-sheet][data-md-side='start']:is([dir='rtl'], [dir='rtl'] *) { --sheet-offset: 100%; } [data-md-drawer][data-md-open] > [data-md-drawer-sheet] { translate: 0 0; transition-duration: var(--md-sys-motion-spatial-default-duration); transition-timing-function: var(--md-sys-motion-easing-emphasized-decelerate); } @starting-style { [data-md-drawer][data-md-open] > [data-md-drawer-sheet] { translate: var(--sheet-offset) 0; } } @media (width >= 600px) { [data-md-drawer-sheet] { width: var(--sheet-width); max-width: calc(100vw - 64px); } [data-md-drawer-sheet][data-md-side='end'] { border-start-start-radius: var(--md-sys-shape-corner-lg); border-end-start-radius: var(--md-sys-shape-corner-lg); } [data-md-drawer-sheet][data-md-side='start'] { border-start-end-radius: var(--md-sys-shape-corner-lg); border-end-end-radius: var(--md-sys-shape-corner-lg); } } @media (width >= 840px) { [data-md-drawer][data-md-standard] { --drawer-top: var(--material-safe-top, env(safe-area-inset-top)); position: sticky; top: var(--drawer-top); display: flex; justify-content: flex-end; height: calc(100dvh - var(--drawer-top)); flex-shrink: 0; align-self: flex-start; overflow: clip; inline-size: 0; margin-inline-start: calc(-1 * var(--md-drawer-gap, 0px)); transition-property: inline-size, margin-inline; transition-duration: var(--md-sys-motion-effects-default-duration); transition-timing-function: var(--md-sys-motion-easing-emphasized-accelerate); } [data-md-scaffold-content]:has(> [data-md-app-bar][data-md-sticky]) [data-md-drawer][data-md-standard] { --drawer-top: calc(var(--material-safe-top, env(safe-area-inset-top)) + 64px); } [data-md-scaffold-content]:has(> [data-md-app-bar][data-md-sticky]:is([data-md-variant='medium'], [data-md-variant='large'])) [data-md-drawer][data-md-standard] { --drawer-top: max(var(--material-safe-top, env(safe-area-inset-top)), 64px); } [data-md-drawer][data-md-standard]:where(:has(> [data-md-drawer-sheet][data-md-side='start'])) { justify-content: flex-start; margin-inline-start: 0; margin-inline-end: calc(-1 * var(--md-drawer-gap, 0px)); } [data-md-drawer][data-md-standard][data-md-open] { inline-size: min(var(--sheet-width), calc(100vw - 64px)); margin-inline: 0; transition-duration: var(--md-sys-motion-spatial-default-duration); transition-timing-function: var(--md-sys-motion-easing-emphasized-decelerate); } @starting-style { [data-md-drawer][data-md-standard][data-md-open] { inline-size: 0; margin-inline-start: calc(-1 * var(--md-drawer-gap, 0px)); } [data-md-drawer][data-md-standard][data-md-open]:where(:has(> [data-md-drawer-sheet][data-md-side='start'])) { margin-inline-start: 0; margin-inline-end: calc(-1 * var(--md-drawer-gap, 0px)); } } [data-md-drawer][data-md-standard][data-md-drawer-collapsed] { display: none; } [data-md-drawer][data-md-standard]:not([data-md-open], [data-md-drawer-settled]) { display: none; } [data-md-drawer][data-md-standard]:not([data-md-drawer-settled]), [data-md-drawer][data-md-standard]:not([data-md-drawer-settled]) > [data-md-drawer-sheet] { transition: none; } [data-md-drawer][data-md-standard] > [data-md-drawer-scrim] { display: none; } [data-md-drawer][data-md-standard] > [data-md-drawer-sheet] { position: relative; flex-shrink: 0; top: 0; z-index: auto; height: 100%; translate: 0 0; border-radius: var(--md-sys-shape-corner-none); background-color: var(--md-sys-color-surface); box-shadow: none; opacity: 0; transition-property: opacity; transition-duration: var(--md-sys-motion-effects-default-duration); transition-timing-function: var(--md-sys-motion-easing-emphasized-accelerate); } [data-md-drawer][data-md-standard][data-md-open] > [data-md-drawer-sheet] { opacity: 1; transition-duration: var(--md-sys-motion-spatial-default-duration); transition-timing-function: var(--md-sys-motion-easing-emphasized-decelerate); } @starting-style { [data-md-drawer][data-md-standard][data-md-open] > [data-md-drawer-sheet] { translate: 0 0; opacity: 0; } } [data-md-drawer][data-md-standard] > [data-md-drawer-sheet][data-md-side='end'] { border-inline-start: 1px solid var(--md-sys-color-outline-variant); } [data-md-drawer][data-md-standard] > [data-md-drawer-sheet][data-md-side='start'] { border-inline-end: 1px solid var(--md-sys-color-outline-variant); } } [data-md-drawer-head] { margin-bottom: var(--md-sys-measurement-space200); } [data-md-drawer-head-row] { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } [data-md-drawer-heading] { min-width: 0; } [data-md-drawer-title] { font: var(--md-sys-typescale-title-lg); letter-spacing: var(--md-sys-typescale-title-lg-tracking); } [data-md-drawer-subtitle] { margin-top: var(--md-sys-measurement-space50); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-md); letter-spacing: var(--md-sys-typescale-body-md-tracking); } [data-md-drawer-close] { display: inline-flex; flex-shrink: 0; margin-top: calc(-1 * var(--md-sys-measurement-space100)); margin-inline-end: -12px; } [data-md-drawer-head] > [data-md-divider] { margin-top: var(--md-sys-measurement-space200); } [data-md-drawer-body] { container-type: inline-size; flex: 1 1 0%; } [data-md-drawer-actions] { display: flex; min-height: var(--md-sys-measurement-space900); flex-shrink: 0; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--md-sys-measurement-space100); padding-top: var(--md-sys-measurement-space200); } } @layer material.components { [data-md-carousel-item] { position: relative; height: 100%; flex-shrink: 0; scroll-snap-align: start; scroll-snap-stop: always; } [data-md-carousel-item]:focus-visible { outline-offset: -3px; } [data-md-carousel='full-screen'] > [data-md-carousel-scroller] > [data-md-carousel-item] { width: 100%; } [data-md-carousel='multi-aspect'] > [data-md-carousel-scroller] > [data-md-carousel-item] { width: auto; border-radius: var(--md-sys-shape-corner-xl); } [data-md-carousel]:not([data-md-carousel='full-screen']):not([data-md-carousel='multi-aspect']) > [data-md-carousel-scroller] > [data-md-carousel-item] { width: var(--material-carousel-slot); max-width: 100%; border-radius: var(--md-sys-shape-corner-xl); } [data-md-carousel-item] > [data-md-carousel-surface] { position: relative; width: 100%; height: 100%; overflow: hidden; background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); } [data-md-carousel='multi-aspect'] > [data-md-carousel-scroller] > [data-md-carousel-item] > [data-md-carousel-surface] { border-radius: var(--md-sys-shape-corner-xl); } [data-md-carousel]:not([data-md-carousel='full-screen']):not([data-md-carousel='multi-aspect']) > [data-md-carousel-scroller] > [data-md-carousel-item] > [data-md-carousel-surface] { border-radius: var(--md-sys-shape-corner-xl); translate: var(--material-carousel-shift) 0; clip-path: inset(0 var(--material-carousel-inset, 0px) round var(--md-sys-shape-corner-xl)); } [data-md-carousel-surface] > [data-md-carousel-content] { width: 100%; height: 100%; & > img { width: 100%; height: 100%; object-fit: cover; } } [data-md-carousel-surface] > [data-md-carousel-label] { pointer-events: none; position: absolute; inset-inline: 0; bottom: 0; display: flex; padding: var(--md-sys-measurement-space500) var(--md-sys-measurement-space200) var(--md-sys-measurement-space200); background: linear-gradient(to top, color-mix(in srgb, var(--md-sys-color-scrim) 60%, transparent), transparent); opacity: var(--material-carousel-label); } [data-md-carousel-label] > [data-md-carousel-label-text] { overflow: hidden; color: white; font: var(--md-sys-typescale-title-md); letter-spacing: var(--md-sys-typescale-title-md-tracking); text-overflow: ellipsis; white-space: nowrap; translate: var(--material-carousel-label-shift) 0; } } @layer material.components { [data-md-carousel] { position: relative; } [data-md-carousel] > [data-md-carousel-probe] { position: absolute; inset-inline-start: 0; top: 0; height: 0; width: var(--material-carousel-item-width); visibility: hidden; pointer-events: none; } [data-md-carousel] > [data-md-carousel-scroller] { display: flex; scrollbar-width: none; } [data-md-carousel='full-screen'] > [data-md-carousel-scroller] { margin-inline: auto; height: var(--material-carousel-height); max-width: 840px; flex-direction: column; gap: var(--md-sys-measurement-space200); overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scroll-snap-type: y mandatory; } [data-md-carousel]:not([data-md-carousel='full-screen']) > [data-md-carousel-scroller] { height: calc(var(--material-carousel-height) + 16px); gap: var(--md-sys-measurement-space100); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; padding-block: var(--md-sys-measurement-space100); } [data-md-carousel='multi-aspect'] > [data-md-carousel-scroller] { padding-inline-start: var(--material-carousel-pad); } [data-md-carousel='multi-browse'] > [data-md-carousel-scroller], [data-md-carousel='hero'] > [data-md-carousel-scroller] { scroll-snap-type: x mandatory; } [data-md-carousel] > [data-md-carousel-controls] { display: none; margin-top: 12px; justify-content: flex-end; gap: var(--md-sys-measurement-space100); } [data-md-carousel] > [data-md-carousel-controls='always'] { display: flex; } @media (pointer: fine) { [data-md-carousel] > [data-md-carousel-controls='auto'] { display: flex; } } [data-md-carousel]:not([data-md-carousel='full-screen']) > [data-md-carousel-controls] > [data-md-carousel-previous]:is([dir='rtl'], [dir='rtl'] *), [data-md-carousel]:not([data-md-carousel='full-screen']) > [data-md-carousel-controls] > [data-md-carousel-next]:is([dir='rtl'], [dir='rtl'] *) { transform: scaleX(-1); } } @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; } } @layer material.components { [data-md-toolbar] { display: flex; align-items: center; gap: var(--md-sys-measurement-space50); } [data-md-toolbar][data-md-variant='docked'] { width: 100%; min-height: calc(64px + var(--material-safe-bottom, env(safe-area-inset-bottom))); justify-content: center; column-gap: clamp(var(--md-sys-measurement-space50), 4vw, var(--md-sys-measurement-space400)); padding-inline: var(--md-sys-measurement-space200); padding-bottom: var(--material-safe-bottom, env(safe-area-inset-bottom)); background-color: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface-variant); } [data-md-toolbar][data-md-variant='floating'] { display: inline-flex; height: 64px; padding-inline: var(--md-sys-measurement-space100); border-radius: var(--md-sys-shape-corner-full); background-color: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface-variant); box-shadow: var(--md-sys-elevation-3); } [data-md-toolbar][data-md-variant='floating'][data-md-vertical] { width: 64px; height: auto; flex-direction: column; padding-block: var(--md-sys-measurement-space100); padding-inline: 0; } [data-md-toolbar][data-md-vibrant] { background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); } [data-md-toolbar][data-md-vibrant] [data-md-icon-button]:not([data-md-variant='filled'], [data-md-variant='tonal'], [data-md-selected='true'], [aria-pressed='true'], :disabled, [aria-disabled='true']) { color: var(--md-sys-color-on-primary-container); } [data-md-toolbar][data-md-vibrant] [data-md-icon-button][aria-pressed='true']:not(:disabled, [aria-disabled='true']) { background-color: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); } [data-md-toolbar]:not([data-md-vibrant]) [data-md-icon-button]:not([data-md-variant='filled'], [data-md-variant='tonal'], [data-md-selected='true'], [aria-pressed='true'], :disabled, [aria-disabled='true']) { color: var(--md-sys-color-primary); } [data-md-toolbar][data-md-variant='docked']:has(> [data-md-toolbar-fab]) { justify-content: flex-start; } [data-md-toolbar-fab] { display: flex; margin-inline-start: auto; } [data-md-toolbar-fab] [data-md-fab], [data-md-toolbar-fab] [data-md-fab]:hover { box-shadow: none; } [data-md-toolbar]:not([data-md-vertical]) > [role='separator'][aria-orientation='vertical'] { align-self: center; height: 40px; } [data-md-toolbar][data-md-vertical] > [role='separator'][aria-orientation='horizontal'] { align-self: center; width: 40px; } [data-md-toolbar-group] { display: inline-flex; align-items: center; gap: var(--md-sys-measurement-space100); } [data-md-toolbar-group][data-md-vertical] { flex-direction: column; } [data-md-toolbar-place='bottom'] { position: fixed; bottom: calc(max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom))) + var(--md-sys-measurement-space200)); left: 50%; z-index: 30; translate: -50% 0; } [data-md-toolbar-place='end'] { position: fixed; top: 50%; inset-inline-end: calc(var(--md-sys-measurement-space200) + var(--material-safe-right, env(safe-area-inset-right))); z-index: 30; translate: 0 -50%; } [data-md-toolbar][data-md-vertical][data-md-toolbar-place='end'], [data-md-toolbar-group][data-md-vertical][data-md-toolbar-place='end'] { inset-inline-end: calc(var(--md-sys-measurement-space300) + var(--material-safe-right, env(safe-area-inset-right))); } [data-md-toolbar][data-md-variant='docked'][data-md-toolbar-place='bottom'] { inset-inline: 0; bottom: var(--material-bottom-bar, 0px); left: 0; translate: none; } @media (width >= 840px) { [data-md-toolbar][data-md-variant='docked'][data-md-rounded] { min-height: 64px; padding-bottom: 0; border-radius: var(--md-sys-shape-corner-full); } [data-md-toolbar][data-md-variant='docked'][data-md-rounded][data-md-toolbar-place='bottom'] { right: calc(var(--md-sys-measurement-space200) + var(--material-safe-right, env(safe-area-inset-right))); bottom: calc(max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom))) + var(--md-sys-measurement-space200)); left: calc(var(--md-sys-measurement-space200) + var(--material-safe-left, env(safe-area-inset-left))); width: auto; } } :root:has([data-md-toolbar-place='bottom']:is([data-md-toolbar], [data-md-toolbar-group]):not([data-md-vertical])), [data-md-scaffold]:has([data-md-toolbar-place='bottom']:is([data-md-toolbar], [data-md-toolbar-group]):not([data-md-vertical])) { --material-bottom-toolbar: calc(max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom))) + var(--md-sys-measurement-space200) + 64px); } :root:has([data-md-toolbar-group][data-md-toolbar-place='bottom']:not([data-md-vertical]) [data-md-fab][data-md-size='md']), [data-md-scaffold]:has([data-md-toolbar-group][data-md-toolbar-place='bottom']:not([data-md-vertical]) [data-md-fab][data-md-size='md']) { --material-bottom-toolbar: calc(max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom))) + var(--md-sys-measurement-space200) + 80px); } :root:has([data-md-toolbar-group][data-md-toolbar-place='bottom']:not([data-md-vertical]) [data-md-fab][data-md-size='lg']), [data-md-scaffold]:has([data-md-toolbar-group][data-md-toolbar-place='bottom']:not([data-md-vertical]) [data-md-fab][data-md-size='lg']) { --material-bottom-toolbar: calc(max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom))) + var(--md-sys-measurement-space200) + 96px); } :root:has([data-md-toolbar][data-md-variant='docked'][data-md-toolbar-place='bottom']), [data-md-scaffold]:has([data-md-toolbar][data-md-variant='docked'][data-md-toolbar-place='bottom']) { --material-bottom-toolbar: calc(var(--material-bottom-bar, 0px) + 64px + var(--material-safe-bottom, env(safe-area-inset-bottom))); } @media (width >= 840px) { :root:has([data-md-toolbar][data-md-variant='docked'][data-md-rounded][data-md-toolbar-place='bottom']), [data-md-scaffold]:has([data-md-toolbar][data-md-variant='docked'][data-md-rounded][data-md-toolbar-place='bottom']) { --material-bottom-toolbar: calc(max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom))) + var(--md-sys-measurement-space200) + 64px); } } } @layer material.components { [data-md-tabs] { min-width: 0; } [data-md-tabs-bar] { --tabs-ring: 5px; position: relative; display: flex; overflow-x: auto; overscroll-behavior-x: contain; padding: var(--tabs-ring); scroll-padding-inline: var(--tabs-ring); border-bottom: 1px solid var(--md-sys-color-outline-variant); scrollbar-width: thin; } [data-md-tabs-bar][data-md-scrollable] { padding-inline-start: 52px; scroll-padding-inline-start: 52px; } [data-md-tabs-bar] > li { flex: 1 1 0%; } [data-md-tabs-bar] > li > [data-md-tab] { flex: 1 1 0%; } [data-md-tab] { position: relative; display: flex; flex: 1 1 0%; min-width: 90px; min-height: 48px; align-items: center; justify-content: center; padding-inline: var(--md-sys-measurement-space200); color: var(--md-sys-color-on-surface-variant); cursor: pointer; outline: none; font: var(--md-sys-typescale-title-sm); letter-spacing: var(--md-sys-typescale-title-sm-tracking); white-space: nowrap; transition-property: color; transition-duration: var(--md-sys-motion-effects-fast-duration); transition-timing-function: var(--md-sys-motion-effects-fast); } [data-md-tabs-bar][data-md-scrollable] > li, [data-md-tabs-bar][data-md-scrollable] [data-md-tab] { flex: none; } [data-md-tabs-bar][data-md-stacked] [data-md-tab] { min-height: 64px; } [data-md-tab]::before { content: ''; position: absolute; inset-block: calc(-1 * var(--tabs-ring)); inset-inline: 0; pointer-events: none; transition-property: background-color; transition-duration: var(--md-sys-motion-effects-fast-duration); transition-timing-function: var(--md-sys-motion-effects-fast); } @media (hover: hover) { [data-md-tab]:hover { color: var(--md-sys-color-on-surface); } [data-md-tab]:hover::before { background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); } } [data-md-tab]:focus-visible::before, [data-md-tab]:active::before { background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent); } [data-md-tab]:focus-visible { color: var(--md-sys-color-on-surface); outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; } [data-md-tab]:is([aria-selected='true'], [aria-current='page']) { color: var(--md-sys-color-primary); } [data-md-tabs-bar][data-md-variant='secondary'] [data-md-tab]:is([aria-selected='true'], [aria-current='page']) { color: var(--md-sys-color-on-surface); } [data-md-tab]:disabled { color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); cursor: default; } [data-md-tab]:disabled::before { background-color: transparent; } [data-md-tab-content] { position: relative; display: inline-flex; align-self: stretch; min-width: 24px; align-items: center; justify-content: center; gap: var(--md-sys-measurement-space100); } [data-md-tabs-bar][data-md-stacked] [data-md-tab-content] { flex-direction: column; gap: var(--md-sys-measurement-space25); } [data-md-tab-label] { display: inline-flex; min-width: 0; align-items: center; gap: var(--md-sys-measurement-space75); } [data-md-tabs-bar]:not([data-md-scrollable]) [data-md-tab-text] { display: -webkit-box; min-width: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-align: center; text-overflow: ellipsis; white-space: normal; } [data-md-tab-indicator] { position: absolute; inset-inline: 2px; bottom: calc(-1 * var(--tabs-ring)); height: 3px; border-radius: 3px 3px 0 0; background-color: var(--md-sys-color-primary); opacity: 0; pointer-events: none; view-transition-class: material-tab-indicator; } [data-md-tabs-bar][data-md-variant='secondary'] [data-md-tab-content] { position: static; } [data-md-tabs-bar][data-md-variant='secondary'] [data-md-tab-indicator] { inset-inline: 0; height: 2px; border-radius: 0; } [data-md-tab]:is([aria-selected='true'], [aria-current='page']) [data-md-tab-indicator] { opacity: 1; view-transition-name: var(--tabs-indicator); } [data-md-tab-panel] { padding-top: var(--md-sys-measurement-space300); outline: none; } ::view-transition-group(*.material-tab-indicator) { animation-duration: var(--md-sys-motion-spatial-default-duration); animation-timing-function: var(--md-sys-motion-spatial-default); } } @layer material.components { [data-md-section-nav] { min-inline-size: 0; } [data-md-section-nav-picker] { @media (width >= 600px) { display: none; } } [data-md-section-nav] > nav { @media (width < 600px) { display: none; } } [data-md-section-nav-trigger] { display: flex; align-items: center; gap: 12px; block-size: var(--md-sys-measurement-space600); inline-size: min(320px, calc(100vw - 32px)); cursor: pointer; border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-xs); padding-inline: var(--md-sys-measurement-space200); } [data-md-section-nav-trigger-label] { min-inline-size: 0; flex: 1 1 0%; } [data-md-section-nav] [data-md-tabs-bar] > li { display: flex; min-inline-size: 0; } } @layer material.components { [data-md-account-menu] { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; inline-size: var(--md-sys-measurement-space500); block-size: var(--md-sys-measurement-space500); border-radius: var(--md-sys-shape-corner-full); cursor: pointer; background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); font: var(--md-sys-typescale-label-lg); letter-spacing: var(--md-sys-typescale-label-lg-tracking); font-variation-settings: normal; } [data-md-account-menu-avatar] { position: relative; z-index: -2; inline-size: 100%; block-size: 100%; border-radius: var(--md-sys-shape-corner-full); object-fit: cover; } [data-md-account-menu-header] { padding-inline: 12px; padding-block: var(--md-sys-measurement-space100) 12px; } } @layer material.components { [data-md-theme-toggle='toggle'], [data-md-theme-toggle='cycle'] { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; inline-size: var(--md-sys-measurement-space500); block-size: var(--md-sys-measurement-space500); border-radius: var(--md-sys-shape-corner-full); cursor: pointer; color: var(--md-sys-color-on-surface-variant); transition: border-radius var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast); &:active { border-radius: var(--md-sys-shape-corner-sm); } } } @layer material.components { [data-md-scheme-picker] { min-inline-size: 0; } [data-md-scheme-picker-legend] { margin-block-end: var(--md-sys-measurement-space100); } [data-md-scheme-picker-options] { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--md-sys-measurement-space100); @media (width >= 600px) { grid-template-columns: repeat(4, 1fr); } } [data-md-scheme-picker-option] { display: flex; min-inline-size: 0; flex-direction: column; align-items: flex-start; gap: var(--md-sys-measurement-space100); cursor: pointer; -webkit-user-select: none; user-select: none; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-lg); padding: 12px; background-color: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface); transition-property: background-color, border-color; transition-duration: var(--md-sys-motion-effects-fast-duration); transition-timing-function: var(--md-sys-motion-effects-fast); &:has(:checked) { border-color: transparent; background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } &:has(:focus-visible) { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; &::before { opacity: var(--md-sys-state-focus-state-layer-opacity); } } } [data-md-scheme-picker-swatches] { display: flex; flex-shrink: 0; } [data-md-scheme-picker-swatches] > * + * { margin-inline-start: -6px; } [data-md-scheme-picker-swatch] { inline-size: 20px; block-size: 20px; border-radius: var(--md-sys-shape-corner-full); background-color: var(--swatch-light); box-shadow: 0 0 0 2px var(--md-sys-color-surface-container-low); } [data-theme='dark'] [data-md-scheme-picker-swatch] { background-color: var(--swatch-dark); } [data-md-scheme-picker-option]:has(:checked) [data-md-scheme-picker-swatch] { box-shadow: 0 0 0 2px var(--md-sys-color-secondary-container); } [data-md-scheme-picker-label] { inline-size: 100%; padding-inline-end: var(--md-sys-measurement-space300); } [data-md-scheme-picker-check] { position: absolute; pointer-events: none; inset-inline-end: var(--md-sys-measurement-space100); top: var(--md-sys-measurement-space100); display: none; } [data-md-scheme-picker-option]:has(:checked) [data-md-scheme-picker-check] { display: block; } [data-md-scheme-picker-hint] { margin-block-start: var(--md-sys-measurement-space50); } } @layer material.components { [data-md-showcase-brand] { display: block; border-radius: var(--md-sys-shape-corner-xs); } [data-md-showcase-search] { width: 100%; } [data-md-showcase-search-hint] { padding: var(--md-sys-measurement-space125) var(--md-sys-measurement-space200); } [data-md-showcase-kbd] { display: inline-block; border-radius: var(--md-sys-shape-corner-xs); background-color: var(--md-sys-color-surface-container-highest); padding: 0 var(--md-sys-measurement-space75); } [data-md-showcase-search-result] { display: flex; flex-direction: column; justify-content: center; min-height: var(--md-sys-measurement-space700); padding: var(--md-sys-measurement-space100) var(--md-sys-measurement-space200); } [data-md-showcase-page] { padding-block-end: var(--md-sys-measurement-space600); } [data-md-showcase-section-icon] { display: grid; place-items: center; width: var(--md-sys-measurement-space600); height: var(--md-sys-measurement-space600); border-radius: var(--md-sys-shape-corner-lg); background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } [data-md-showcase-example] { scroll-margin-top: var(--md-sys-measurement-space900); } [data-md-showcase-code-summary] { display: inline-block; cursor: pointer; border-radius: var(--md-sys-shape-corner-xs); } [data-md-showcase-code] { margin-top: var(--md-sys-measurement-space100); overflow-x: auto; border-radius: var(--md-sys-shape-corner-sm); background-color: var(--md-sys-color-surface-container-highest); padding: var(--md-sys-measurement-space125); } [data-md-showcase-swatch] { display: block; flex-shrink: 0; width: var(--md-sys-measurement-space300); height: var(--md-sys-measurement-space300); border-radius: var(--md-sys-shape-corner-xs); border: 1px solid var(--md-sys-color-outline-variant); } [data-md-showcase-swatch][data-md-showcase-size='lg'] { width: var(--md-sys-measurement-space400); height: var(--md-sys-measurement-space400); } [data-md-showcase-swatch-label] { min-width: 0; } [data-md-showcase-type-row] { display: grid; gap: var(--md-sys-measurement-space100); padding: var(--md-sys-measurement-space200); } [data-md-showcase-type-row] + [data-md-showcase-type-row] { border-top: 1px solid var(--md-sys-color-outline-variant); } @media (width >= 840px) { [data-md-showcase-type-row] { grid-template-columns: 192px 1fr 1fr; align-items: baseline; } } [data-md-showcase-shape-swatch] { display: block; height: 80px; background-color: var(--md-sys-color-primary-container); } [data-md-showcase-elevation-tile] { display: flex; align-items: center; justify-content: center; height: 96px; border-radius: var(--md-sys-shape-corner-md); background-color: var(--md-sys-color-surface-container-high); } [data-md-showcase-elevation-tile][data-md-elevation='1'] { box-shadow: var(--md-sys-elevation-1); } [data-md-showcase-elevation-tile][data-md-elevation='2'] { box-shadow: var(--md-sys-elevation-2); } [data-md-showcase-elevation-tile][data-md-elevation='3'] { box-shadow: var(--md-sys-elevation-3); } [data-md-showcase-elevation-tile][data-md-elevation='4'] { box-shadow: var(--md-sys-elevation-4); } [data-md-showcase-elevation-tile][data-md-elevation='5'] { box-shadow: var(--md-sys-elevation-5); } [data-md-showcase-motion-row] { display: grid; grid-template-columns: 144px 1fr; align-items: center; gap: var(--md-sys-measurement-space200); } [data-md-showcase-motion-track] { height: var(--md-sys-measurement-space400); } [data-md-showcase-motion-dot] { width: var(--md-sys-measurement-space400); height: var(--md-sys-measurement-space400); border-radius: var(--md-sys-shape-corner-full); background-color: var(--md-sys-color-tertiary); } [data-md-showcase-icon-mask] { display: block; width: 24px; height: 24px; background-color: currentColor; } [data-md-showcase-icon-mask][data-md-showcase-icon-size='20'] { width: 20px; height: 20px; } [data-md-showcase-breakpoint-card] { border-radius: var(--md-sys-shape-corner-md); background-color: var(--md-sys-color-surface-container); padding: var(--md-sys-measurement-space200); } @media (width < 600px) { [data-md-showcase-breakpoint-card='compact'] { background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); } } @media (600px <= width < 840px) { [data-md-showcase-breakpoint-card='medium'] { background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); } } @media (840px <= width < 1200px) { [data-md-showcase-breakpoint-card='expanded'] { background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); } } @media (1200px <= width < 1600px) { [data-md-showcase-breakpoint-card='large'] { background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); } } @media (width >= 1600px) { [data-md-showcase-breakpoint-card='extra-large'] { background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); } } } .showcase-w-narrow { max-width: 320px; } .showcase-ink-tertiary { color: var(--md-sys-color-tertiary); } .showcase-ink-secondary { color: var(--md-sys-color-secondary); }