material-inspired-component-library
Version:
The Material-Inspired Component Library (MICL) offers a collection of beautifully crafted components leveraging native HTML markup, designed to align with the Material Design 3 guidelines.
2 lines (1 loc) • 40.8 kB
CSS
:root{--md-sys-motion-duration-short1: 50ms;--md-sys-motion-duration-short2: 100ms;--md-sys-motion-duration-short3: 150ms;--md-sys-motion-duration-short4: 200ms;--md-sys-motion-duration-medium1: 250ms;--md-sys-motion-duration-medium2: 300ms;--md-sys-motion-duration-medium3: 350ms;--md-sys-motion-duration-medium4: 400ms;--md-sys-motion-duration-long1: 450ms;--md-sys-motion-duration-long2: 500ms;--md-sys-motion-duration-long3: 550ms;--md-sys-motion-duration-long4: 600ms;--md-sys-motion-duration-extra-long1: 700ms;--md-sys-motion-duration-extra-long2: 800ms;--md-sys-motion-duration-extra-long3: 900ms;--md-sys-motion-duration-extra-long4: 1000ms}:root{--md-sys-target-size: 48px;--md-sys-shape-corner-none: 0px;--md-sys-shape-corner-extra-small: 4px;--md-sys-shape-corner-small: 8px;--md-sys-shape-corner-medium: 12px;--md-sys-shape-corner-large: 16px;--md-sys-shape-corner-large-increased: 20px;--md-sys-shape-corner-extra-large: 28px;--md-sys-shape-corner-extra-large-increased: 32px;--md-sys-shape-corner-extra-extra-large: 48px;--md-sys-shape-corner-full: 50%}:root{--md-sys-state-layer-size: 40px;--md-sys-state-hover-state-layer-opacity: 8%;--md-sys-state-focus-state-layer-opacity: 10%;--md-sys-state-pressed-state-layer-opacity: 10%;--md-sys-state-dragged-state-layer-opacity: 16%;--md-sys-state-focus-indicator-inner-offset: -3px;--md-sys-state-focus-indicator-outer-offset: 2px;--md-sys-state-focus-indicator-thickness: 3px}@property --statelayer-color{syntax:"<color>";initial-value:rgba(0,0,0,0);inherits:false}@property --statelayer-opacity{syntax:"<percentage>";initial-value:0%;inherits:false}:root{--md-ref-typeface-plain: Roboto, system-ui, sans-serif;--md-ref-typeface-brand: Roboto, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700;--md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-display-large-size: 3.5625rem;--md-sys-typescale-display-large-line-height: 4rem;--md-sys-typescale-display-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-display-large-tracking: -0.015625rem;--md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-display-medium-size: 2.8125rem;--md-sys-typescale-display-medium-line-height: 3.25rem;--md-sys-typescale-display-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-display-medium-tracking: 0;--md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-display-small-size: 2.25rem;--md-sys-typescale-display-small-line-height: 2.75rem;--md-sys-typescale-display-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-display-small-tracking: 0;--md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-headline-large-size: 2rem;--md-sys-typescale-headline-large-line-height: 2.5rem;--md-sys-typescale-headline-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-headline-large-tracking: 0;--md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-headline-medium-size: 1.75rem;--md-sys-typescale-headline-medium-line-height: 2.25rem;--md-sys-typescale-headline-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-headline-medium-tracking: 0;--md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-headline-small-size: 1.5rem;--md-sys-typescale-headline-small-line-height: 2rem;--md-sys-typescale-headline-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-headline-small-tracking: 0;--md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-title-large-size: 1.375rem;--md-sys-typescale-title-large-line-height: 1.75rem;--md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-title-large-tracking: 0;--md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-title-medium-size: 1rem;--md-sys-typescale-title-medium-line-height: 1.5rem;--md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-title-medium-tracking: 0,009375rem;--md-sys-typescale-title-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-title-small-size: 0.875rem;--md-sys-typescale-title-small-line-height: 1.25rem;--md-sys-typescale-title-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-title-small-tracking: 0.00625rem;--md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-large-size: 1rem;--md-sys-typescale-body-large-line-height: 1.5rem;--md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-large-tracking: 0.03125rem;--md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-medium-size: 0.875rem;--md-sys-typescale-body-medium-line-height: 1.25rem;--md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-medium-tracking: 0.015625rem;--md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-small-size: 0.75rem;--md-sys-typescale-body-small-line-height: 1rem;--md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-small-tracking: 0.025rem;--md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-large-size: 0.875rem;--md-sys-typescale-label-large-line-height: 1.25rem;--md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-large-tracking: 0.00625rem;--md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-medium-size: 0.75rem;--md-sys-typescale-label-medium-line-height: 1rem;--md-sys-typescale-label-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-medium-tracking: 0.03125rem;--md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-small-size: 0.6875rem;--md-sys-typescale-label-small-line-height: 1rem;--md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-small-tracking: 0.03125rem;--md-sys-typescale-emphasized-display-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-large-size: 3.5625rem;--md-sys-typescale-emphasized-display-large-line-height: 4rem;--md-sys-typescale-emphasized-display-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-display-large-tracking: -0.015625rem;--md-sys-typescale-emphasized-display-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-medium-size: 2.8125rem;--md-sys-typescale-emphasized-display-medium-line-height: 3.25rem;--md-sys-typescale-emphasized-display-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-display-medium-tracking: 0;--md-sys-typescale-emphasized-display-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-small-size: 2.25rem;--md-sys-typescale-emphasized-display-small-line-height: 2.75rem;--md-sys-typescale-emphasized-display-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-display-small-tracking: 0;--md-sys-typescale-emphasized-headline-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-large-size: 2rem;--md-sys-typescale-emphasized-headline-large-line-height: 2.5rem;--md-sys-typescale-emphasized-headline-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-headline-large-tracking: 0;--md-sys-typescale-emphasized-headline-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-medium-size: 1.75rem;--md-sys-typescale-emphasized-headline-medium-line-height: 2.25rem;--md-sys-typescale-emphasized-headline-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-headline-medium-tracking: 0;--md-sys-typescale-emphasized-headline-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-small-size: 1.5rem;--md-sys-typescale-emphasized-headline-small-line-height: 2rem;--md-sys-typescale-emphasized-headline-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-headline-small-tracking: 0;--md-sys-typescale-emphasized-title-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-title-large-size: 1.375rem;--md-sys-typescale-emphasized-title-large-line-height: 1.75rem;--md-sys-typescale-emphasized-title-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-title-large-tracking: 0;--md-sys-typescale-emphasized-title-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-title-medium-size: 1rem;--md-sys-typescale-emphasized-title-medium-line-height: 1.5rem;--md-sys-typescale-emphasized-title-medium-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-title-medium-tracking: 0,009375rem;--md-sys-typescale-emphasized-title-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-title-small-size: 0.875rem;--md-sys-typescale-emphasized-title-small-line-height: 1.25rem;--md-sys-typescale-emphasized-title-small-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-title-small-tracking: 0.00625rem;--md-sys-typescale-emphasized-body-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-large-size: 1rem;--md-sys-typescale-emphasized-body-large-line-height: 1.5rem;--md-sys-typescale-emphasized-body-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-body-large-tracking: 0.03125rem;--md-sys-typescale-emphasized-body-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-medium-size: 0.875rem;--md-sys-typescale-emphasized-body-medium-line-height: 1.25rem;--md-sys-typescale-emphasized-body-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-body-medium-tracking: 0.015625rem;--md-sys-typescale-emphasized-body-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-small-size: 0.75rem;--md-sys-typescale-emphasized-body-small-line-height: 1rem;--md-sys-typescale-emphasized-body-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-body-small-tracking: 0.025rem;--md-sys-typescale-emphasized-label-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-large-size: 0.875rem;--md-sys-typescale-emphasized-label-large-line-height: 1.25rem;--md-sys-typescale-emphasized-label-large-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-label-large-tracking: 0.00625rem;--md-sys-typescale-emphasized-label-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-medium-size: 0.75rem;--md-sys-typescale-emphasized-label-medium-line-height: 1rem;--md-sys-typescale-emphasized-label-medium-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-label-medium-tracking: 0.03125rem;--md-sys-typescale-emphasized-label-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-small-size: 0.6875rem;--md-sys-typescale-emphasized-label-small-line-height: 1rem;--md-sys-typescale-emphasized-label-small-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-label-small-tracking: 0.03125rem}.md-sys-typescale-display-large{font-family:var(--md-sys-typescale-display-large-font);font-size:var(--md-sys-typescale-display-large-size);line-height:var(--md-sys-typescale-display-large-line-height);font-weight:var(--md-sys-typescale-display-large-weight);letter-spacing:var(--md-sys-typescale-display-large-tracking)}.md-sys-typescale-display-medium{font-family:var(--md-sys-typescale-display-medium-font);font-size:var(--md-sys-typescale-display-medium-size);line-height:var(--md-sys-typescale-display-medium-line-height);font-weight:var(--md-sys-typescale-display-medium-weight);letter-spacing:var(--md-sys-typescale-display-medium-tracking)}.md-sys-typescale-display-small{font-family:var(--md-sys-typescale-display-small-font);font-size:var(--md-sys-typescale-display-small-size);line-height:var(--md-sys-typescale-display-small-line-height);font-weight:var(--md-sys-typescale-display-small-weight);letter-spacing:var(--md-sys-typescale-display-small-tracking)}.md-sys-typescale-headline-large{font-family:var(--md-sys-typescale-headline-large-font);font-size:var(--md-sys-typescale-headline-large-size);line-height:var(--md-sys-typescale-headline-large-line-height);font-weight:var(--md-sys-typescale-headline-large-weight);letter-spacing:var(--md-sys-typescale-headline-large-tracking)}.md-sys-typescale-headline-medium{font-family:var(--md-sys-typescale-headline-medium-font);font-size:var(--md-sys-typescale-headline-medium-size);line-height:var(--md-sys-typescale-headline-medium-line-height);font-weight:var(--md-sys-typescale-headline-medium-weight);letter-spacing:var(--md-sys-typescale-headline-medium-tracking)}.md-sys-typescale-headline-small{font-family:var(--md-sys-typescale-headline-small-font);font-size:var(--md-sys-typescale-headline-small-size);line-height:var(--md-sys-typescale-headline-small-line-height);font-weight:var(--md-sys-typescale-headline-small-weight);letter-spacing:var(--md-sys-typescale-headline-small-tracking)}.md-sys-typescale-title-large{font-family:var(--md-sys-typescale-title-large-font);font-size:var(--md-sys-typescale-title-large-size);line-height:var(--md-sys-typescale-title-large-line-height);font-weight:var(--md-sys-typescale-title-large-weight);letter-spacing:var(--md-sys-typescale-title-large-tracking)}.md-sys-typescale-title-medium{font-family:var(--md-sys-typescale-title-medium-font);font-size:var(--md-sys-typescale-title-medium-size);line-height:var(--md-sys-typescale-title-medium-line-height);font-weight:var(--md-sys-typescale-title-medium-weight);letter-spacing:var(--md-sys-typescale-title-medium-tracking)}.md-sys-typescale-title-small{font-family:var(--md-sys-typescale-title-small-font);font-size:var(--md-sys-typescale-title-small-size);line-height:var(--md-sys-typescale-title-small-line-height);font-weight:var(--md-sys-typescale-title-small-weight);letter-spacing:var(--md-sys-typescale-title-small-tracking)}.md-sys-typescale-body-large{font-family:var(--md-sys-typescale-body-large-font);font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-weight:var(--md-sys-typescale-body-large-weight);letter-spacing:var(--md-sys-typescale-body-large-tracking)}.md-sys-typescale-body-medium{font-family:var(--md-sys-typescale-body-medium-font);font-size:var(--md-sys-typescale-body-medium-size);line-height:var(--md-sys-typescale-body-medium-line-height);font-weight:var(--md-sys-typescale-body-medium-weight);letter-spacing:var(--md-sys-typescale-body-medium-tracking)}.md-sys-typescale-body-small{font-family:var(--md-sys-typescale-body-small-font);font-size:var(--md-sys-typescale-body-small-size);line-height:var(--md-sys-typescale-body-small-line-height);font-weight:var(--md-sys-typescale-body-small-weight);letter-spacing:var(--md-sys-typescale-body-small-tracking)}.md-sys-typescale-label-large{font-family:var(--md-sys-typescale-label-large-font);font-size:var(--md-sys-typescale-label-large-size);line-height:var(--md-sys-typescale-label-large-line-height);font-weight:var(--md-sys-typescale-label-large-weight);letter-spacing:var(--md-sys-typescale-label-large-tracking)}.md-sys-typescale-label-medium{font-family:var(--md-sys-typescale-label-medium-font);font-size:var(--md-sys-typescale-label-medium-size);line-height:var(--md-sys-typescale-label-medium-line-height);font-weight:var(--md-sys-typescale-label-medium-weight);letter-spacing:var(--md-sys-typescale-label-medium-tracking)}.md-sys-typescale-label-small{font-family:var(--md-sys-typescale-label-small-font);font-size:var(--md-sys-typescale-label-small-size);line-height:var(--md-sys-typescale-label-small-line-height);font-weight:var(--md-sys-typescale-label-small-weight);letter-spacing:var(--md-sys-typescale-label-small-tracking)}.md-sys-typescale-emphasized-display-large{font-family:var(--md-sys-typescale-emphasized-display-large-font);font-size:var(--md-sys-typescale-emphasized-display-large-size);line-height:var(--md-sys-typescale-emphasized-display-large-line-height);font-weight:var(--md-sys-typescale-emphasized-display-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-display-large-tracking)}.md-sys-typescale-emphasized-display-medium{font-family:var(--md-sys-typescale-emphasized-display-medium-font);font-size:var(--md-sys-typescale-emphasized-display-medium-size);line-height:var(--md-sys-typescale-emphasized-display-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-display-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-display-medium-tracking)}.md-sys-typescale-emphasized-display-small{font-family:var(--md-sys-typescale-emphasized-display-small-font);font-size:var(--md-sys-typescale-emphasized-display-small-size);line-height:var(--md-sys-typescale-emphasized-display-small-line-height);font-weight:var(--md-sys-typescale-emphasized-display-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-display-small-tracking)}.md-sys-typescale-emphasized-headline-large{font-family:var(--md-sys-typescale-emphasized-headline-large-font);font-size:var(--md-sys-typescale-emphasized-headline-large-size);line-height:var(--md-sys-typescale-emphasized-headline-large-line-height);font-weight:var(--md-sys-typescale-emphasized-headline-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-headline-large-tracking)}.md-sys-typescale-emphasized-headline-medium{font-family:var(--md-sys-typescale-emphasized-headline-medium-font);font-size:var(--md-sys-typescale-emphasized-headline-medium-size);line-height:var(--md-sys-typescale-emphasized-headline-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-headline-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-headline-medium-tracking)}.md-sys-typescale-emphasized-headline-small{font-family:var(--md-sys-typescale-emphasized-headline-small-font);font-size:var(--md-sys-typescale-emphasized-headline-small-size);line-height:var(--md-sys-typescale-emphasized-headline-small-line-height);font-weight:var(--md-sys-typescale-emphasized-headline-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-headline-small-tracking)}.md-sys-typescale-emphasized-title-large{font-family:var(--md-sys-typescale-emphasized-title-large-font);font-size:var(--md-sys-typescale-emphasized-title-large-size);line-height:var(--md-sys-typescale-emphasized-title-large-line-height);font-weight:var(--md-sys-typescale-emphasized-title-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-title-large-tracking)}.md-sys-typescale-emphasized-title-medium{font-family:var(--md-sys-typescale-emphasized-title-medium-font);font-size:var(--md-sys-typescale-emphasized-title-medium-size);line-height:var(--md-sys-typescale-emphasized-title-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-title-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-title-medium-tracking)}.md-sys-typescale-emphasized-title-small{font-family:var(--md-sys-typescale-emphasized-title-small-font);font-size:var(--md-sys-typescale-emphasized-title-small-size);line-height:var(--md-sys-typescale-emphasized-title-small-line-height);font-weight:var(--md-sys-typescale-emphasized-title-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-title-small-tracking)}.md-sys-typescale-emphasized-body-large{font-family:var(--md-sys-typescale-emphasized-body-large-font);font-size:var(--md-sys-typescale-emphasized-body-large-size);line-height:var(--md-sys-typescale-emphasized-body-large-line-height);font-weight:var(--md-sys-typescale-emphasized-body-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-body-large-tracking)}.md-sys-typescale-emphasized-body-medium{font-family:var(--md-sys-typescale-emphasized-body-medium-font);font-size:var(--md-sys-typescale-emphasized-body-medium-size);line-height:var(--md-sys-typescale-emphasized-body-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-body-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-body-medium-tracking)}.md-sys-typescale-emphasized-body-small{font-family:var(--md-sys-typescale-emphasized-body-small-font);font-size:var(--md-sys-typescale-emphasized-body-small-size);line-height:var(--md-sys-typescale-emphasized-body-small-line-height);font-weight:var(--md-sys-typescale-emphasized-body-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-body-small-tracking)}.md-sys-typescale-emphasized-label-large{font-family:var(--md-sys-typescale-emphasized-label-large-font);font-size:var(--md-sys-typescale-emphasized-label-large-size);line-height:var(--md-sys-typescale-emphasized-label-large-line-height);font-weight:var(--md-sys-typescale-emphasized-label-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-label-large-tracking)}.md-sys-typescale-emphasized-label-medium{font-family:var(--md-sys-typescale-emphasized-label-medium-font);font-size:var(--md-sys-typescale-emphasized-label-medium-size);line-height:var(--md-sys-typescale-emphasized-label-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-label-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-label-medium-tracking)}.md-sys-typescale-emphasized-label-small{font-family:var(--md-sys-typescale-emphasized-label-small-font);font-size:var(--md-sys-typescale-emphasized-label-small-size);line-height:var(--md-sys-typescale-emphasized-label-small-line-height);font-weight:var(--md-sys-typescale-emphasized-label-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-label-small-tracking)}:root{--md-sys-list-padding: 8px;--md-sys-list-item-one-height: 56px;--md-sys-list-item-two-height: 72px;--md-sys-list-item-three-height: 88px;--md-sys-list-item-one-padding: 8px;--md-sys-list-item-two-padding: 8px;--md-sys-list-item-three-padding: 12px;--md-sys-list-item-space: 16px;--md-sys-list-item-padding-inline: 16px}.micl-list{--md-sys-list-item-container-color: var(--md-sys-color-surface);--md-sys-list-motion-duration: 200ms;--md-sys-accordion-motion-spatial: cubic-bezier(0.38, 1.21, 0.22, 1);--md-sys-accordion-motion-duration: 500ms;margin:0;padding:var(--md-sys-list-padding) 0;interpolate-size:allow-keywords;list-style-type:none}.micl-list>details::details-content{height:0;overflow:hidden;transition:height var(--md-sys-accordion-motion-duration) var(--md-sys-accordion-motion-spatial),content-visibility var(--md-sys-accordion-motion-duration) linear allow-discrete}.micl-list>details[open]::details-content{height:auto}.micl-list>details>summary.micl-list-item-one,.micl-list>details>summary.micl-list-item-two,.micl-list>details>summary.micl-list-item-three{position:relative}.micl-list>details>summary.micl-list-item-one::-webkit-details-marker,.micl-list>details>summary.micl-list-item-two::-webkit-details-marker,.micl-list>details>summary.micl-list-item-three::-webkit-details-marker{display:none}.micl-list>details>summary.micl-list-item-one.micl-list-item--disabled,.micl-list>details>summary.micl-list-item-two.micl-list-item--disabled,.micl-list>details>summary.micl-list-item-three.micl-list-item--disabled{pointer-events:none}.micl-list>details>summary.micl-list-item-one:not(.micl-list-item--disabled),.micl-list>details>summary.micl-list-item-two:not(.micl-list-item--disabled),.micl-list>details>summary.micl-list-item-three:not(.micl-list-item--disabled){cursor:pointer}.micl-list>details .micl-list-item__content{box-sizing:border-box;padding-inline:var(--md-sys-list-item-padding-inline);background-color:var(--md-sys-list-item-container-color);overflow:hidden}.micl-list.micl-list__divider .micl-list-item-one+.micl-list-item-one,.micl-list.micl-list__divider .micl-list-item-two+.micl-list-item-two,.micl-list.micl-list__divider .micl-list-item-three+.micl-list-item-three,.micl-list.micl-list__divider details+details{border-top:var(--md-sys-divider-thickness) solid var(--md-sys-divider-color)}.micl-list-item-one,.micl-list-item-two,.micl-list-item-three{--statelayer-color: var(--md-sys-color-on-surface);--md-sys-list-item-thumbnail-aspect-ratio: 1.778;box-sizing:border-box;display:flex;align-items:center;column-gap:var(--md-sys-list-item-space);padding-inline:var(--md-sys-list-item-space);border:none;border-radius:var(--md-sys-shape-corner-none);background-color:var(--md-sys-list-item-container-color);background-image:radial-gradient(circle at var(--micl-x, center) var(--micl-y, center), transparent 0%, rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)) 10%, transparent 10%),linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;background-size:10000%,100%;list-style:none;transition:background-size 3000ms,--statelayer-opacity var(--md-sys-list-motion-duration) linear}.micl-list-item-one:not(:has(>button)),.micl-list-item-two:not(:has(>button)),.micl-list-item-three:not(:has(>button)){--micl-ripple: 1}.micl-list-item-one>a,.micl-list-item-one>button,.micl-list-item-one>label,.micl-list-item-two>a,.micl-list-item-two>button,.micl-list-item-two>label,.micl-list-item-three>a,.micl-list-item-three>button,.micl-list-item-three>label{box-sizing:border-box;display:inherit;align-items:inherit;column-gap:inherit;min-height:inherit;inline-size:100%;padding-inline:var(--md-sys-list-item-space);border:none;border-radius:inherit;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer}.micl-list-item-one:has(>a,>button,>label),.micl-list-item-two:has(>a,>button,>label),.micl-list-item-three:has(>a,>button,>label){padding-inline:0}.micl-list-item-one:disabled .micl-list-item__icon,.micl-list-item-one:disabled .micl-list-item__text,.micl-list-item-one:disabled .micl-list-item__text .micl-list-item__headline,.micl-list-item-one:disabled .micl-list-item__text .micl-list-item__supporting-text,.micl-list-item-one:disabled .micl-list-item__text::after,.micl-list-item-one:disabled .micl-list-item__trailing-text,.micl-list-item-one.micl-list-item--disabled .micl-list-item__icon,.micl-list-item-one.micl-list-item--disabled .micl-list-item__text,.micl-list-item-one.micl-list-item--disabled .micl-list-item__text .micl-list-item__headline,.micl-list-item-one.micl-list-item--disabled .micl-list-item__text .micl-list-item__supporting-text,.micl-list-item-one.micl-list-item--disabled .micl-list-item__text::after,.micl-list-item-one.micl-list-item--disabled .micl-list-item__trailing-text,.micl-list-item-two:disabled .micl-list-item__icon,.micl-list-item-two:disabled .micl-list-item__text,.micl-list-item-two:disabled .micl-list-item__text .micl-list-item__headline,.micl-list-item-two:disabled .micl-list-item__text .micl-list-item__supporting-text,.micl-list-item-two:disabled .micl-list-item__text::after,.micl-list-item-two:disabled .micl-list-item__trailing-text,.micl-list-item-two.micl-list-item--disabled .micl-list-item__icon,.micl-list-item-two.micl-list-item--disabled .micl-list-item__text,.micl-list-item-two.micl-list-item--disabled .micl-list-item__text .micl-list-item__headline,.micl-list-item-two.micl-list-item--disabled .micl-list-item__text .micl-list-item__supporting-text,.micl-list-item-two.micl-list-item--disabled .micl-list-item__text::after,.micl-list-item-two.micl-list-item--disabled .micl-list-item__trailing-text,.micl-list-item-three:disabled .micl-list-item__icon,.micl-list-item-three:disabled .micl-list-item__text,.micl-list-item-three:disabled .micl-list-item__text .micl-list-item__headline,.micl-list-item-three:disabled .micl-list-item__text .micl-list-item__supporting-text,.micl-list-item-three:disabled .micl-list-item__text::after,.micl-list-item-three:disabled .micl-list-item__trailing-text,.micl-list-item-three.micl-list-item--disabled .micl-list-item__icon,.micl-list-item-three.micl-list-item--disabled .micl-list-item__text,.micl-list-item-three.micl-list-item--disabled .micl-list-item__text .micl-list-item__headline,.micl-list-item-three.micl-list-item--disabled .micl-list-item__text .micl-list-item__supporting-text,.micl-list-item-three.micl-list-item--disabled .micl-list-item__text::after,.micl-list-item-three.micl-list-item--disabled .micl-list-item__trailing-text{color:rgb(from var(--md-sys-color-on-surface) r g b/38%)}.micl-list-item-one:disabled .micl-list-item__image,.micl-list-item-one:disabled .micl-list-item__thumbnail,.micl-list-item-one.micl-list-item--disabled .micl-list-item__image,.micl-list-item-one.micl-list-item--disabled .micl-list-item__thumbnail,.micl-list-item-two:disabled .micl-list-item__image,.micl-list-item-two:disabled .micl-list-item__thumbnail,.micl-list-item-two.micl-list-item--disabled .micl-list-item__image,.micl-list-item-two.micl-list-item--disabled .micl-list-item__thumbnail,.micl-list-item-three:disabled .micl-list-item__image,.micl-list-item-three:disabled .micl-list-item__thumbnail,.micl-list-item-three.micl-list-item--disabled .micl-list-item__image,.micl-list-item-three.micl-list-item--disabled .micl-list-item__thumbnail{opacity:38%}.micl-list-item-one:disabled a,.micl-list-item-one:disabled button,.micl-list-item-one:disabled label,.micl-list-item-one.micl-list-item--disabled a,.micl-list-item-one.micl-list-item--disabled button,.micl-list-item-one.micl-list-item--disabled label,.micl-list-item-two:disabled a,.micl-list-item-two:disabled button,.micl-list-item-two:disabled label,.micl-list-item-two.micl-list-item--disabled a,.micl-list-item-two.micl-list-item--disabled button,.micl-list-item-two.micl-list-item--disabled label,.micl-list-item-three:disabled a,.micl-list-item-three:disabled button,.micl-list-item-three:disabled label,.micl-list-item-three.micl-list-item--disabled a,.micl-list-item-three.micl-list-item--disabled button,.micl-list-item-three.micl-list-item--disabled label{pointer-events:none;cursor:auto}.micl-list-item-one:not(:disabled):not(.micl-list-item--disabled):hover,.micl-list-item-two:not(:disabled):not(.micl-list-item--disabled):hover,.micl-list-item-three:not(:disabled):not(.micl-list-item--disabled):hover{--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity)}.micl-list-item-one:not(:disabled):not(.micl-list-item--disabled):hover:has(input[type=checkbox]),.micl-list-item-two:not(:disabled):not(.micl-list-item--disabled):hover:has(input[type=checkbox]),.micl-list-item-three:not(:disabled):not(.micl-list-item--disabled):hover:has(input[type=checkbox]){cursor:pointer}.micl-list-item-one:not(:disabled):not(.micl-list-item--disabled):hover .micl-list-item__icon,.micl-list-item-two:not(:disabled):not(.micl-list-item--disabled):hover .micl-list-item__icon,.micl-list-item-three:not(:disabled):not(.micl-list-item--disabled):hover .micl-list-item__icon{font-variation-settings:"FILL" 1}.micl-list-item-one:not(:disabled):not(.micl-list-item--disabled):focus-visible,.micl-list-item-two:not(:disabled):not(.micl-list-item--disabled):focus-visible,.micl-list-item-three:not(:disabled):not(.micl-list-item--disabled):focus-visible{--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);outline:var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);outline-offset:var(--md-sys-state-focus-indicator-inner-offset)}.micl-list-item-one:not(:disabled):not(.micl-list-item--disabled):focus-visible .micl-list-item__icon,.micl-list-item-two:not(:disabled):not(.micl-list-item--disabled):focus-visible .micl-list-item__icon,.micl-list-item-three:not(:disabled):not(.micl-list-item--disabled):focus-visible .micl-list-item__icon{font-variation-settings:"FILL" 1}.micl-list-item-one:not(:disabled):not(.micl-list-item--disabled):active,.micl-list-item-two:not(:disabled):not(.micl-list-item--disabled):active,.micl-list-item-three:not(:disabled):not(.micl-list-item--disabled):active{--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);background-size:0%,100%;transition:background-size 0ms}.micl-list-item-one:not(:disabled):not(.micl-list-item--disabled):active .micl-list-item__icon,.micl-list-item-two:not(:disabled):not(.micl-list-item--disabled):active .micl-list-item__icon,.micl-list-item-three:not(:disabled):not(.micl-list-item--disabled):active .micl-list-item__icon{font-variation-settings:"FILL" 1}.micl-list-item-one:not(:disabled):not(.micl-list-item--disabled):has(input[type=checkbox]:checked),.micl-list-item-two:not(:disabled):not(.micl-list-item--disabled):has(input[type=checkbox]:checked),.micl-list-item-three:not(:disabled):not(.micl-list-item--disabled):has(input[type=checkbox]:checked){background-color:var(--md-sys-color-secondary-container)}.micl-list-item-one:not(:disabled):not(.micl-list-item--disabled):has(input[type=checkbox]:checked) .micl-list-item__headline,.micl-list-item-two:not(:disabled):not(.micl-list-item--disabled):has(input[type=checkbox]:checked) .micl-list-item__headline,.micl-list-item-three:not(:disabled):not(.micl-list-item--disabled):has(input[type=checkbox]:checked) .micl-list-item__headline{color:var(--md-sys-color-on-secondary-container)}.micl-list-item-one:not(:disabled):not(.micl-list-item--disabled):has(input[type=checkbox]:checked) .micl-list-item__icon,.micl-list-item-one:not(:disabled):not(.micl-list-item--disabled):has(input[type=checkbox]:checked) .micl-list-item__supporting-text,.micl-list-item-one:not(:disabled):not(.micl-list-item--disabled):has(input[type=checkbox]:checked) .micl-list-item__trailing-text,.micl-list-item-two:not(:disabled):not(.micl-list-item--disabled):has(input[type=checkbox]:checked) .micl-list-item__icon,.micl-list-item-two:not(:disabled):not(.micl-list-item--disabled):has(input[type=checkbox]:checked) .micl-list-item__supporting-text,.micl-list-item-two:not(:disabled):not(.micl-list-item--disabled):has(input[type=checkbox]:checked) .micl-list-item__trailing-text,.micl-list-item-three:not(:disabled):not(.micl-list-item--disabled):has(input[type=checkbox]:checked) .micl-list-item__icon,.micl-list-item-three:not(:disabled):not(.micl-list-item--disabled):has(input[type=checkbox]:checked) .micl-list-item__supporting-text,.micl-list-item-three:not(:disabled):not(.micl-list-item--disabled):has(input[type=checkbox]:checked) .micl-list-item__trailing-text{color:var(--md-sys-color-on-surface)}.micl-list-item-one:not(:disabled):not(.micl-list-item--disabled) input[type=checkbox]:not(:disabled):hover,.micl-list-item-one:not(:disabled):not(.micl-list-item--disabled) input[type=checkbox]:not(:disabled):active,.micl-list-item-two:not(:disabled):not(.micl-list-item--disabled) input[type=checkbox]:not(:disabled):hover,.micl-list-item-two:not(:disabled):not(.micl-list-item--disabled) input[type=checkbox]:not(:disabled):active,.micl-list-item-three:not(:disabled):not(.micl-list-item--disabled) input[type=checkbox]:not(:disabled):hover,.micl-list-item-three:not(:disabled):not(.micl-list-item--disabled) input[type=checkbox]:not(:disabled):active{--checkbox-state-layer-color: initial;--checkbox-outline-color: initial}.micl-list-item-one{min-height:var(--md-sys-list-item-one-height)}.micl-list-item-one:not(:has(>a,>button,>label)){padding-block-start:var(--md-sys-list-item-one-padding);padding-block-end:var(--md-sys-list-item-one-padding)}.micl-list-item-one:not(:has(>a,>button,>label)):has(.micl-list-item__thumbnail){padding-block-start:var(--md-sys-list-item-three-padding);padding-block-end:var(--md-sys-list-item-three-padding);padding-inline-start:0px}.micl-list-item-one>a,.micl-list-item-one>button,.micl-list-item-one>label{padding-block-start:var(--md-sys-list-item-one-padding);padding-block-end:var(--md-sys-list-item-one-padding)}.micl-list-item-one>a:has(.micl-list-item__thumbnail),.micl-list-item-one>button:has(.micl-list-item__thumbnail),.micl-list-item-one>label:has(.micl-list-item__thumbnail){padding-block-start:var(--md-sys-list-item-three-padding);padding-block-end:var(--md-sys-list-item-three-padding);padding-inline-start:0px}.micl-list-item-two{min-height:var(--md-sys-list-item-two-height)}.micl-list-item-two:not(:has(>a,>button,>label)){padding-block-start:var(--md-sys-list-item-two-padding);padding-block-end:var(--md-sys-list-item-two-padding)}.micl-list-item-two:not(:has(>a,>button,>label)):has(.micl-list-item__thumbnail){padding-inline-start:0px;padding-block-start:12px;padding-block-end:12px}.micl-list-item-two>a,.micl-list-item-two>button,.micl-list-item-two>label{padding-block-start:var(--md-sys-list-item-two-padding);padding-block-end:var(--md-sys-list-item-two-padding)}.micl-list-item-two>a:has(.micl-list-item__thumbnail),.micl-list-item-two>button:has(.micl-list-item__thumbnail),.micl-list-item-two>label:has(.micl-list-item__thumbnail){padding-inline-start:0px;padding-block-start:12px;padding-block-end:12px}.micl-list-item-two .micl-list-item__supporting-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.micl-list-item-three{min-height:var(--md-sys-list-item-three-height)}.micl-list-item-three:not(:has(>a,>button,>label)){padding-block-start:var(--md-sys-list-item-three-padding);padding-block-end:var(--md-sys-list-item-three-padding)}.micl-list-item-three:not(:has(>a,>button,>label)):has(.micl-list-item__thumbnail){padding-block-start:var(--md-sys-list-item-three-padding);padding-block-end:var(--md-sys-list-item-three-padding);padding-inline-start:0px}.micl-list-item-three>a,.micl-list-item-three>button,.micl-list-item-three>label{padding-block-start:var(--md-sys-list-item-three-padding);padding-block-end:var(--md-sys-list-item-three-padding)}.micl-list-item-three>a:has(.micl-list-item__thumbnail),.micl-list-item-three>button:has(.micl-list-item__thumbnail),.micl-list-item-three>label:has(.micl-list-item__thumbnail){padding-block-start:var(--md-sys-list-item-three-padding);padding-block-end:var(--md-sys-list-item-three-padding);padding-inline-start:0px}.micl-list-item-three .micl-list-item__icon,.micl-list-item-three .micl-list-item__avatar,.micl-list-item-three .micl-list-item__image{align-self:flex-start}.micl-list-item-three .micl-list-item__supporting-text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}.micl-list-item-three input[type=checkbox]{align-self:flex-start;margin-block-start:-12px}.micl-list-item__icon{min-width:24px;font-size:24px;font-variation-settings:"FILL" 0;color:var(--md-sys-color-on-surface-variant);transition:font-variation-settings var(--md-sys-list-motion-duration) linear}.micl-list-item__avatar{font-family:var(--md-sys-typescale-title-medium-font);font-size:var(--md-sys-typescale-title-medium-size);line-height:var(--md-sys-typescale-title-medium-line-height);font-weight:var(--md-sys-typescale-title-medium-weight);letter-spacing:var(--md-sys-typescale-title-medium-tracking);display:flex;align-items:center;justify-content:center;block-size:40px;min-inline-size:40px;border-radius:var(--md-sys-shape-corner-full);color:var(--md-sys-color-on-primary-container);background-color:var(--md-sys-color-primary-container)}.micl-list-item__image{display:inline-block;height:56px;min-width:56px;border-radius:var(--md-sys-shape-corner-none);background-position:center;background-repeat:no-repeat;background-size:cover}.micl-list-item__thumbnail{display:inline-block;height:64px;min-width:calc(64px*var(--md-sys-list-item-thumbnail-aspect-ratio));border-radius:var(--md-sys-shape-corner-none);background-position:center;background-repeat:no-repeat;background-size:contain}.micl-list-item__text{display:flex;flex-direction:column;flex-basis:100%;min-width:0;text-align:start}.micl-list-item__text .micl-list-item__headline{font-family:var(--md-sys-typescale-body-large-font);font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-weight:var(--md-sys-typescale-body-large-weight);letter-spacing:var(--md-sys-typescale-body-large-tracking);color:var(--md-sys-color-on-surface)}.micl-list-item__text .micl-list-item__supporting-text{font-family:var(--md-sys-typescale-body-medium-font);font-size:var(--md-sys-typescale-body-medium-size);line-height:var(--md-sys-typescale-body-medium-line-height);font-weight:var(--md-sys-typescale-body-medium-weight);letter-spacing:var(--md-sys-typescale-body-medium-tracking);color:var(--md-sys-color-on-surface-variant)}.micl-list-item__trailing-text{font-family:var(--md-sys-typescale-label-small-font);font-size:var(--md-sys-typescale-label-small-size);line-height:var(--md-sys-typescale-label-small-line-height);font-weight:var(--md-sys-typescale-label-small-weight);letter-spacing:var(--md-sys-typescale-label-small-tracking);color:var(--md-sys-color-on-surface-variant)}