material-inspired-component-library 1.1.1 → 1.2.2

package/components/slider/index.scss

@@ -54,14 +54,35 @@
     inline-size: 16px;
     block-size: var(--md-sys-slider-handle-height);
     inset: 0;
-    inset-block-start: calc(-1 * (var(--md-sys-slider-handle-height) - var(--md-sys-slider-track-height)) / 2);
+    inset-block-start: calc(-1 * (var(--md-sys-slider-handle-height) - var(--md-sys-slider-track-height) + 8px) / 2);
+    padding-block: 4px;
+    border: none;
+    border-radius: 8px;
     background-color: inherit;
-    background-image: linear-gradient(to right,transparent 0px,transparent var(--md-sys-slider-thumb-space), var(--md-sys-color-primary) var(--md-sys-slider-thumb-space),var(--md-sys-color-primary) 10px,transparent 10px, transparent 16px);
+    background-image: linear-gradient(
+        var(--md-sys-slider-track-direction),
+        transparent 0px,
+        transparent var(--md-sys-slider-thumb-space),
+        var(--md-sys-color-primary) var(--md-sys-slider-thumb-space),
+        var(--md-sys-color-primary) 10px,
+        transparent 10px,
+        transparent 16px
+    );
+    background-clip: content-box;
     cursor: pointer;
     z-index: 2;
 }
 @mixin slider-thumb-disabled() {
-    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, var(--md-sys-color-surface));
+    background-color: inherit;
+    background-image: linear-gradient(
+        var(--md-sys-slider-track-direction),
+        transparent 0px,
+        transparent var(--md-sys-slider-thumb-space),
+        color-mix(in srgb, var(--md-sys-color-on-surface) 38%, var(--md-sys-color-surface)) var(--md-sys-slider-thumb-space),
+        color-mix(in srgb, var(--md-sys-color-on-surface) 38%, var(--md-sys-color-surface)) 10px,
+        transparent 10px,
+        transparent 16px
+    );
     cursor: default;
 }
 @mixin slider-progress() {
@@ -104,6 +125,7 @@ input[type=range].micl-slider-xl {
 
     appearance: none;
     position: relative;
+    block-size: var(--md-sys-slider-track-height);
     margin: 0;
     outline: none;
     color: var(--md-sys-color-surface-container-low);
@@ -126,8 +148,9 @@ input[type=range].micl-slider-xl {
         text-wrap-mode: nowrap;
     }
     &::after {
-        --md-sys-slider-tip-space: 4px;
         @include typography.label-medium;
+        --md-sys-slider-tip-space: 4px;
+
         content: var(--md-sys-slider-tip);
         box-sizing: border-box;
         position: absolute;
@@ -181,59 +204,80 @@ input[type=range].micl-slider-xl {
     }
     &.micl-slider--vertical {
         --md-sys-slider-track-direction: to top;
+
         writing-mode: sideways-lr;
+
         &::after {
             --md-sys-slider-tip-space: 8px;
+
             transform: rotate(90deg);
         }
     }
-    &:not(:disabled):focus-visible {
-        &::after {
+    &:not(:disabled) {
+        &:active::after,
+        &:focus::after,
+        &:focus-visible::after {
             opacity: 1;
+            transition: opacity var(--md-sys-motion-duration-medium2) motion.$md-sys-motion-easing-emphasized-accelerate;
         }
-        &::-webkit-slider-thumb {
-            outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
-        }
-        &::-moz-range-thumb {
-            outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
-        }
-    }
-    &:not(:disabled):active {
-        &::-webkit-slider-thumb {
-            background-image: linear-gradient(to right,transparent 0px, transparent calc(var(--md-sys-slider-thumb-space) + 1px), var(--md-sys-color-primary) calc(var(--md-sys-slider-thumb-space) + 1px), var(--md-sys-color-primary) calc(var(--md-sys-slider-thumb-space) + 3px), transparent calc(var(--md-sys-slider-thumb-space) + 3px), transparent calc(2 * var(--md-sys-slider-thumb-space) + 4px));
-            outline: none;
-            cursor: grabbing;
-        }
-        &::-moz-range-thumb {
-            background-image: linear-gradient(to right,transparent 0px, transparent calc(var(--md-sys-slider-thumb-space) + 1px), var(--md-sys-color-primary) calc(var(--md-sys-slider-thumb-space) + 1px), var(--md-sys-color-primary) calc(var(--md-sys-slider-thumb-space) + 3px), transparent calc(var(--md-sys-slider-thumb-space) + 3px), transparent calc(2 * var(--md-sys-slider-thumb-space) + 4px));
-            outline: none;
-            cursor: grabbing;
+        &:focus-visible {
+            &::-webkit-slider-thumb {
+                outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
+            }
+            &::-moz-range-thumb {
+                outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
+            }
         }
-        &::after {
-            opacity: 1;
+        &:active {
+            &::-webkit-slider-thumb {
+                background-image: linear-gradient(
+                    var(--md-sys-slider-track-direction),
+                    transparent 0px,
+                    transparent calc(var(--md-sys-slider-thumb-space) + 1px),
+                    var(--md-sys-color-primary) calc(var(--md-sys-slider-thumb-space) + 1px),
+                    var(--md-sys-color-primary) calc(var(--md-sys-slider-thumb-space) + 3px),
+                    transparent calc(var(--md-sys-slider-thumb-space) + 3px),
+                    transparent calc(2 * var(--md-sys-slider-thumb-space) + 4px)
+                );
+                outline: none;
+                cursor: grabbing;
+            }
+            &::-moz-range-thumb {
+                background-image: linear-gradient(
+                    var(--md-sys-slider-track-direction),
+                    transparent 0px,
+                    transparent calc(var(--md-sys-slider-thumb-space) + 1px),
+                    var(--md-sys-color-primary) calc(var(--md-sys-slider-thumb-space) + 1px),
+                    var(--md-sys-color-primary) calc(var(--md-sys-slider-thumb-space) + 3px),
+                    transparent calc(var(--md-sys-slider-thumb-space) + 3px),
+                    transparent calc(2 * var(--md-sys-slider-thumb-space) + 4px)
+                );
+                outline: none;
+                cursor: grabbing;
+            }
         }
     }
 }
 
-.micl-slider__container:has(.micl-slider-m,.micl-slider-l,.micl-slider-xl) {
+.micl-slider__container {
     display: grid;
     grid-template-areas: "slidericon";
     flex-shrink: 0;
     align-items: center;
     justify-items: flex-start;
+    background-color: inherit;
 
-    .micl-slider__icon {
-        grid-area: slidericon;
-        inset: 0;
-        margin: 6px;
-        font-size: 24px;
-        color: var(--md-sys-color-on-primary);
-        z-index: 1;
-
+    &:has(> .micl-slider-m,> .micl-slider-l,> .micl-slider-xl) {
+        .micl-slider__icon {
+            grid-area: slidericon;
+            inset: 0;
+            margin: 6px;
+            font-size: 24px;
+            color: var(--md-sys-color-on-primary);
+            z-index: 1;
+        }
     }
-    input[type=range].micl-slider-m,
-    input[type=range].micl-slider-l,
-    input[type=range].micl-slider-xl {
+    &> input[type=range] {
         grid-area: slidericon;
     }
     .micl-slider__icon:has(+ input[type=range].micl-slider-xl),
@@ -243,21 +287,66 @@ input[type=range].micl-slider-xl {
     }
 }
 
-[dir=rtl] input[type=range].micl-slider-xs.micl-slider--vertical,
-[dir=rtl] input[type=range].micl-slider-s.micl-slider--vertical,
-[dir=rtl] input[type=range].micl-slider-m.micl-slider--vertical,
-[dir=rtl] input[type=range].micl-slider-l.micl-slider--vertical,
-[dir=rtl] input[type=range].micl-slider-xl.micl-slider--vertical {
-    writing-mode: sideways-rl;
-    &::after {
-        transform: rotate(-90deg);
+@supports (-moz-appearance:none) {
+    .micl-slider__container {
+        &:has(> input[type=range]) {
+            position: relative;
+
+            &::after {
+                @include typography.label-medium;
+                --md-sys-slider-tip-space: 4px;
+
+                content: var(--md-sys-slider-tip);
+                box-sizing: border-box;
+                position: absolute;
+                inline-size: fit-content;
+                min-inline-size: 48px;
+                block-size: 40px;
+                inset: 0;
+                inset-block-start: calc(-1 * ((var(--md-sys-slider-handle-height) - var(--md-sys-slider-track-height)) / 2) - 40px - var(--md-sys-slider-tip-space));
+                inset-inline-start: calc(-16px + (100% - 16px) * (var(--md-sys-slider-value) - var(--md-sys-slider-min)) / (var(--md-sys-slider-max) - var(--md-sys-slider-min)));
+                padding-block: 12px;
+                padding-inline: 16px;
+                border-radius: 20px;
+                background-color: var(--md-sys-color-inverse-surface);
+                color: var(--md-sys-color-inverse-on-surface);
+                text-align: center;
+                opacity: 0;
+                z-index: 3;
+                transition: opacity var(--md-sys-motion-duration-long2) motion.$md-sys-motion-easing-emphasized-decelerate;
+            }
+        }
+        &:has(> input[type=range]:not(:disabled):active)::after,
+        &:has(> input[type=range]:not(:disabled):focus)::after,
+        &:has(> input[type=range]:not(:disabled):focus-visible)::after {
+            opacity: 1;
+        }
+        &:has(> input[type=range].micl-slider--vertical) {
+            --md-sys-slider-track-direction: to top;
+            writing-mode: sideways-lr;
+
+            &::after {
+                --md-sys-slider-tip-space: 8px;
+                transform: rotate(90deg);
+            }
+        }
     }
 }
 
-[dir=rtl] input[type=range].micl-slider-xs:not(.micl-slider--vertical),
-[dir=rtl] input[type=range].micl-slider-s:not(.micl-slider--vertical),
-[dir=rtl] input[type=range].micl-slider-m:not(.micl-slider--vertical),
-[dir=rtl] input[type=range].micl-slider-l:not(.micl-slider--vertical),
-[dir=rtl] input[type=range].micl-slider-xl:not(.micl-slider--vertical) {
-    --md-sys-slider-track-direction: to left;
+[dir=rtl] {
+    input[type=range].micl-slider--vertical,
+    .micl-slider__container:has(> input[type=range].micl-slider--vertical) {
+        writing-mode: sideways-rl;
+
+        &::after {
+            transform: rotate(-90deg);
+        }
+    }
+    input[type=range].micl-slider-xs:not(.micl-slider--vertical),
+    input[type=range].micl-slider-s:not(.micl-slider--vertical),
+    input[type=range].micl-slider-m:not(.micl-slider--vertical),
+    input[type=range].micl-slider-l:not(.micl-slider--vertical),
+    input[type=range].micl-slider-xl:not(.micl-slider--vertical) {
+        --md-sys-slider-track-direction: to left;
+    }
 }

package/components/slider/index.ts

@@ -20,19 +20,17 @@
 // SOFTWARE.
 
 export const sliderSelector = 'input[type=range].micl-slider-xs,input[type=range].micl-slider-s,input[type=range].micl-slider-m,input[type=range].micl-slider-l,input[type=range].micl-slider-xl';
+
 export default (() =>
 {
     const
         tick  = String.fromCharCode(8226),
         blank = String.fromCharCode(8201),
-        getTickValues = (element: HTMLInputElement): number[] =>
+        getTickValues = (element: HTMLInputElement, max: number, min: number): number[] =>
         {
-            const
-                values: number[] = [],
-                max  = parseFloat(element.max),
-                min  = parseFloat(element.min);
+            const values: number[] = [];
 
-            if (!!element.list && !isNaN(max) && !isNaN(min) && (max > min)) {
+            if (!!element.list && (max > min)) {
                 element.list.querySelectorAll<HTMLOptionElement>('option[value]').forEach(option =>
                 {
                     let value = parseFloat(option.value);
@@ -42,28 +40,71 @@ export default (() =>
                 });
             }
             return values;
+        },
+        getWrapper = (element: HTMLInputElement): null | HTMLElement =>
+        {
+            return element.parentElement?.classList.contains('micl-slider__container') ?
+                   element.parentElement : null;
+        },
+        setMax = (element: HTMLInputElement): void =>
+        {
+            let max = element.max || '100';
+            getWrapper(element)?.style.setProperty('--md-sys-slider-max', max);
+            element.style.setProperty('--md-sys-slider-max', max);
+        },
+        setMin = (element: HTMLInputElement): void =>
+        {
+            let min = element.min || '0';
+            getWrapper(element)?.style.setProperty('--md-sys-slider-min', min);
+            element.style.setProperty('--md-sys-slider-min', min);
+        },
+        setTickString = (element: HTMLInputElement, tickString: string): void =>
+        {
+            // getWrapper(element)?.dataset.miclsliderticks = tickString;
+            element.dataset.miclsliderticks = tickString;
+        },
+        setValue = (element: HTMLInputElement): void =>
+        {
+            let tip = JSON.stringify(element.value + ''),
+                wrapper = getWrapper(element);
+            if (wrapper) {
+                wrapper.style.setProperty('--md-sys-slider-value', element.value);
+                wrapper.style.setProperty('--md-sys-slider-tip', tip);
+            }
+            element.style.setProperty('--md-sys-slider-value', element.value);
+            element.style.setProperty('--md-sys-slider-tip', tip);
+        },
+        setVars = (element: HTMLInputElement): void =>
+        {
+            let wrapper = getWrapper(element);
+            if (wrapper) {
+                const computedStyles = window.getComputedStyle(element);
+                ['--md-sys-slider-handle-height', '--md-sys-slider-track-height'].forEach(name => {
+                    wrapper.style.setProperty(name, computedStyles.getPropertyValue(name));
+                });
+            }
         };
 
     return {
-        initialize: (element: HTMLInputElement) =>
+        initialize: (element: HTMLInputElement): void =>
         {
-            element.style.setProperty('--md-sys-slider-max', element.max || '100');
-            element.style.setProperty('--md-sys-slider-min', element.min || '0');
-            element.style.setProperty('--md-sys-slider-value', element.value);
-            element.style.setProperty('--md-sys-slider-tip', JSON.stringify(element.value + ''));
-
-            const rect = element.getBoundingClientRect(),
-                  e    = document.elementFromPoint(Math.max(rect.x - 1, 0), Math.max(rect.y - 1, 0));
-            if (e) {
-                element.style.color = window.getComputedStyle(e).getPropertyValue('background-color');
+            if (!element.matches(sliderSelector)) {
+                return;
             }
 
+            setMax(element);
+            setMin(element);
+            setValue(element);
+            setVars(element);
+
             const
-                max = parseFloat(element.max),
-                min = parseFloat(element.min),
-                percentages = getTickValues(element).sort((a, b) => a - b).map(value => {
+                max  = parseFloat(element.max),
+                min  = parseFloat(element.min),
+                rect = element.getBoundingClientRect(),
+                percentages = getTickValues(element, max, min).sort((a, b) => a - b).map(value => {
                     return Math.round(100 * (value - min) / (max - min));
                 });
+
             if (percentages.length > 0) {
                 const
                     canvas = document.createElement('canvas'),
@@ -87,28 +128,23 @@ export default (() =>
                         tickString += tick;
                         currentWidth += tickWidth;
                     });
-                    element.dataset.miclsliderticks = tickString;
+                    setTickString(element, tickString);
                 }
                 canvas.remove();
             }
             else {
-                element.dataset.miclsliderticks = tick;
+                setTickString(element, tick);
             }
         },
-        input: (event: Event) =>
+        input: (event: Event): void =>
         {
             if (
-                !(event.target as Element).matches(
-                    '.micl-slider-xs,.micl-slider-s,.micl-slider-m,.micl-slider-l,.micl-slider-xl'
-                )
-                || !(event.target instanceof HTMLInputElement)
-                || (event.target as HTMLInputElement).disabled
+                (event.target as Element).matches(sliderSelector)
+                && event.target instanceof HTMLInputElement
+                && !event.target.disabled
             ) {
-                return;
+                setValue(event.target);
             }
-
-            event.target.style.setProperty('--md-sys-slider-value', event.target.value);
-            event.target.style.setProperty('--md-sys-slider-tip', JSON.stringify(event.target.value + ''));
         }
     };
 })();

package/components/switch/index.scss

@@ -34,6 +34,9 @@ input[type=checkbox].micl-switch {
     --md-sys-switch-unselected-icon: "+";
     --md-sys-switch-selected-icon: "\AC";
     --md-sys-switch-outline-width: 2px;
+    --md-sys-switch-motion-effects: #{motion.$md-sys-motion-expressive-slow-effects};
+    --md-sys-switch-motion-duration: #{motion.$md-sys-motion-expressive-slow-effects-duration};
+    --md-sys-switch-motion-duration-reverse: #{motion.$md-sys-motion-expressive-default-effects-duration};
 
     appearance: none;
     position: relative;
@@ -53,7 +56,7 @@ input[type=checkbox].micl-switch {
         border: var(--md-sys-switch-outline-width) solid var(--md-sys-color-outline);
         border-radius: inherit;
         background-color: var(--md-sys-color-surface-container-highest);
-        transition: background-color var(--md-sys-motion-duration-long4) motion.$md-sys-motion-easing-emphasized;
+        transition: background-color var(--md-sys-switch-motion-duration) motion.$md-sys-motion-easing-emphasized;
     }
     &::after {
         content: var(--md-sys-switch-unselected-icon);
@@ -73,13 +76,13 @@ input[type=checkbox].micl-switch {
         border-radius: var(--md-sys-shape-corner-full);
         transform: rotate(135deg);
         transition:
-            inset-inline-start var(--md-sys-motion-duration-long4) linear(motion.$md-sys-motion-spring-slow-spatial),
-            border-width var(--md-sys-motion-duration-long4) linear(motion.$md-sys-motion-spring-slow-spatial),
-            font-size var(--md-sys-motion-duration-long4) linear(motion.$md-sys-motion-spring-slow-spatial),
-            line-height var(--md-sys-motion-duration-long4) linear(motion.$md-sys-motion-spring-slow-spatial),
-            color var(--md-sys-motion-duration-long4) motion.$md-sys-motion-easing-emphasized,
-            border-color var(--md-sys-motion-duration-long4) motion.$md-sys-motion-easing-emphasized,
-            background-color var(--md-sys-motion-duration-long4) motion.$md-sys-motion-easing-emphasized;
+            inset-inline-start var(--md-sys-switch-motion-duration) var(--md-sys-switch-motion-effects),
+            border-width var(--md-sys-switch-motion-duration) var(--md-sys-switch-motion-effects),
+            font-size var(--md-sys-switch-motion-duration) var(--md-sys-switch-motion-effects),
+            line-height var(--md-sys-switch-motion-duration) var(--md-sys-switch-motion-effects),
+            color var(--md-sys-switch-motion-duration) motion.$md-sys-motion-easing-emphasized,
+            border-color var(--md-sys-switch-motion-duration) motion.$md-sys-motion-easing-emphasized,
+            background-color var(--md-sys-switch-motion-duration) motion.$md-sys-motion-easing-emphasized;
     }
     &:checked {
         &::before {

package/components/textfield/index.scss

@@ -32,6 +32,9 @@
     --md-sys-textfield-input-space: 16px;
     --md-sys-textfield-prefix-space: 1em;
     --md-sys-textfield-suffix-space: 1em;
+    --md-sys-textfield-motion-effects: #{motion.$md-sys-motion-expressive-slow-effects};
+    --md-sys-textfield-motion-duration: #{motion.$md-sys-motion-expressive-slow-effects-duration};
+    --md-sys-textfield-motion-duration-reverse: #{motion.$md-sys-motion-expressive-default-effects-duration};
 
     display: grid;
     grid-template-areas: "textfield" "supporting";
@@ -53,10 +56,10 @@
         color: var(--md-sys-color-on-surface-variant);
         z-index: 1;
         transition:
-            margin-block-start var(--md-sys-motion-duration-medium2) var(--md-sys-motion-duration-short3),
-            margin-inline-start var(--md-sys-motion-duration-medium2) var(--md-sys-motion-duration-short3),
-            font-size var(--md-sys-motion-duration-medium2),
-            letter-spacing var(--md-sys-motion-duration-medium2);
+            margin-block-start var(--md-sys-textfield-motion-duration) var(--md-sys-textfield-motion-effects),
+            margin-inline-start var(--md-sys-textfield-motion-duration) var(--md-sys-textfield-motion-effects),
+            font-size var(--md-sys-textfield-motion-duration) linear,
+            letter-spacing var(--md-sys-textfield-motion-duration) linear;
     }
     &> input,
     &> select,
@@ -121,7 +124,7 @@
         color: var(--md-sys-color-on-surface-variant);
         opacity: 0;
         z-index: 1;
-        transition: opacity var(--md-sys-motion-duration-long1);
+        transition: opacity var(--md-sys-textfield-motion-duration-reverse) linear;
     }
     &> .micl-textfield__prefix {
         width: var(--md-sys-textfield-prefix-space);

package/dist/bottomsheet.css

@@ -1 +1 @@
-:root{--md-sys-elevation-level0: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px, rgba(0, 0, 0, 0.14) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 0px 0px 0px;--md-sys-elevation-level1: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;--md-sys-elevation-level2: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;--md-sys-elevation-level3: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px;--md-sys-elevation-level4: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;--md-sys-elevation-level5: rgba(0, 0, 0, 0.2) 0px 7px 8px -4px, rgba(0, 0, 0, 0.14) 0px 12px 17px 2px, rgba(0, 0, 0, 0.12) 0px 5px 22px 4px}: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-outer-offset: 2px;--md-sys-state-focus-indicator-thickness: 3px}dialog.micl-bottomsheet{--md-sys-bottomsheet-height: max-content;--md-sys-bottomsheet-margin: 56px;--md-sys-bottomsheet-padding: 24px;--md-sys-bottomsheet-handle-width: 32px;--md-sys-bottomsheet-handle-height: 4px;box-sizing:border-box;position:fixed;top:auto;bottom:0;height:0;max-height:50vh;width:100%;min-width:100%;margin:72px 0 0 0;padding:0;border:none;border-radius:var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;background-color:var(--md-sys-color-surface-container-low);box-shadow:var(--md-sys-elevation-level1);opacity:0;overflow-y:hidden;interpolate-size:allow-keywords}dialog.micl-bottomsheet:not(.micl-bottomsheet--resizing){transition:display var(--md-sys-motion-duration-medium1) allow-discrete,overlay var(--md-sys-motion-duration-medium1) allow-discrete,height var(--md-sys-motion-duration-medium1) linear(0, 0.00003 0.08%, 0.00014 0.17%, 0.00029 0.25%, 0.00054 0.34%, 0.00083 0.42%, 0.00121 0.51%, 0.00162 0.59%, 0.00215 0.68%, 0.00267 0.76%, 0.00334 0.85%, 0.00398 0.93%, 0.00478 1.02%, 0.00554 1.1%, 0.00646, 0.00745, 0.00851 1.37%, 0.00951 1.45%, 0.01069, 0.01194, 0.01325, 0.01463, 0.01607, 0.01757, 0.01914, 0.02076, 0.02245, 0.02419 2.35%, 0.0262 2.45%, 0.02807, 0.03, 0.03198 2.72%, 0.03425 2.82%, 0.03636 2.91%, 0.03876 3.01%, 0.04098 3.1%, 0.0435 3.2%, 0.04583 3.29%, 0.04848 3.39%, 0.05369, 0.05913 3.77%, 0.06508, 0.07127, 0.07769, 0.08432 4.57%, 0.09152 4.78%, 0.09859 4.98%, 0.10622, 0.11406, 0.12211 5.611%, 0.13076, 0.13961 6.051%, 0.14658, 0.15367, 0.16087 6.561%, 0.16862, 0.17647, 0.18444, 0.19252 7.281%, 0.20115, 0.20989, 0.21874, 0.22769 8.041%, 0.23721 8.241%, 0.25702 8.651%, 0.2777 9.071%, 0.29569 9.431%, 0.31491 9.811%, 0.33537 10.211%, 0.35705 10.631%, 0.37681 11.011%, 0.3993 11.441%, 0.4818 13.011%, 0.51583 13.661%, 0.55063 14.331%, 0.58146 14.931%, 0.59926 15.282%, 0.61591 15.612%, 0.6319, 0.64775 16.252%, 0.66295 16.562%, 0.6775, 0.69189, 0.70612 17.462%, 0.72204 17.802%, 0.73726, 0.75226 18.462%, 0.76658, 0.78067 19.102%, 0.7941 19.412%, 0.80773 19.732%, 0.8207, 0.83343, 0.84592, 0.85818, 0.87018, 0.88193 21.592%, 0.89307, 0.90396, 0.91462, 0.92503 22.792%, 0.93486 23.082%, 0.94479 23.382%, 0.95416 23.672%, 0.9636 23.972%, 0.97249 24.262%, 0.98144 24.562%, 0.98986, 0.99805 25.143%, 1.00219, 1.00627 25.443%, 1.01003 25.583%, 1.01399, 1.01789, 1.02172 26.033%, 1.02525 26.173%, 1.02897, 1.03262, 1.03622, 1.03975, 1.04322, 1.04663, 1.04999, 1.05328, 1.05651, 1.05968, 1.06279, 1.06584, 1.06883, 1.07176, 1.07463, 1.07745, 1.0802, 1.0829, 1.08554, 1.08813, 1.09065, 1.09312 29.473%, 1.09569 29.633%, 1.09804, 1.10034, 1.10258 30.083%, 1.10491 30.243%, 1.10704 30.393%, 1.10925 30.553%, 1.11127 30.703%, 1.11336 30.863%, 1.11526 31.013%, 1.11724, 1.11915, 1.12101 31.493%, 1.12269 31.643%, 1.12443, 1.12612, 1.12775 32.123%, 1.12893, 1.13008, 1.1312 32.483%, 1.13238 32.613%, 1.13343, 1.13446, 1.13545 32.973%, 1.1365 33.103%, 1.13743 33.223%, 1.1384 33.353%, 1.13927 33.473%, 1.14018 33.603%, 1.14099 33.723%, 1.14183, 1.14264, 1.14342 34.113%, 1.14411 34.233%, 1.14482, 1.1455, 1.14615, 1.14677, 1.14736, 1.14791, 1.14844, 1.14893, 1.14939, 1.14983, 1.15023, 1.15061, 1.15095, 1.15127 36.054%, 1.15158 36.194%, 1.15184 36.324%, 1.15209 36.464%, 1.15229 36.594%, 1.15248 36.734%, 1.15263 36.864%, 1.15276, 1.15286, 1.15293 37.284%, 1.15296 37.414%, 1.15298, 1.15296, 1.15292, 1.15285, 1.15275, 1.15263 38.254%, 1.15246 38.404%, 1.15228 38.544%, 1.15206 38.694%, 1.15183 38.834%, 1.15155, 1.15125, 1.15092, 1.15056, 1.15017, 1.14976, 1.14932, 1.14886 40.034%, 1.14834 40.194%, 1.14783 40.344%, 1.14725 40.504%, 1.14669 40.654%, 1.14607 40.814%, 1.14513 41.044%, 1.14409, 1.143 41.524%, 1.14181, 1.14057, 1.13927 42.274%, 1.13787, 1.13642, 1.13492 43.054%, 1.13331, 1.13166 43.594%, 1.12989, 1.12808 44.154%, 1.12615 44.444%, 1.12412, 1.12203 45.045%, 1.1202, 1.11833 45.565%, 1.11636, 1.11437 46.105%, 1.11228 46.385%, 1.11008 46.675%, 1.10531 47.295%, 1.10085 47.865%, 1.09578 48.505%, 1.09057 49.155%, 1.07579 50.995%, 1.07124 51.565%, 1.06713 52.085%, 1.06251 52.675%, 1.05826 53.225%, 1.05423 53.755%, 1.05041 54.265%, 1.0482, 1.04601, 1.04385 55.166%, 1.04178, 1.03974 55.746%, 1.0378, 1.03588, 1.03399, 1.03213 56.866%, 1.03036 57.136%, 1.02855 57.416%, 1.02683, 1.02514, 1.02348, 1.02185, 1.02024 58.766%, 1.01844, 1.01667, 1.01494, 1.01325, 1.0116 60.316%, 1.01004 60.616%, 1.00847 60.926%, 1.00699 61.226%, 1.0055 61.536%, 1.00409, 1.00273, 1.0014, 1.00011 62.736%, 0.99882 63.046%, 0.9976 63.346%, 0.99639 63.656%, 0.99525 63.956%, 0.99412 64.266%, 0.99306 64.566%, 0.992, 0.99098, 0.99001, 0.98907, 0.98817, 0.98731, 0.98648, 0.98569 67.047%, 0.98492, 0.98418, 0.98349, 0.98283, 0.98221 68.647%, 0.98173 68.907%, 0.98126 69.177%, 0.98083 69.437%, 0.98041, 0.98001, 0.97963, 0.97929 70.517%, 0.97895 70.797%, 0.97865 71.067%, 0.97836, 0.97809, 0.97785, 0.97763 72.187%, 0.97743 72.477%, 0.97725 72.757%, 0.9771, 0.97696, 0.97685 73.627%, 0.97676, 0.97668, 0.97663, 0.97661 74.827%, 0.9766, 0.97661, 0.97664 75.758%, 0.9767 76.078%, 0.97687 76.718%, 0.97713 77.378%, 0.97748 78.058%, 0.97779 78.578%, 0.97815 79.108%, 0.97855 79.648%, 0.97901 80.208%, 0.97953 80.788%, 0.9801 81.388%, 0.98072 82.008%, 0.98141 82.668%, 0.98262 83.758%, 0.98406 84.988%, 0.98549 86.169%, 0.98928 89.259%, 0.99036 90.159%, 0.99134 90.989%, 0.99235 91.869%, 0.99328 92.699%, 0.99415 93.509%, 0.99496 94.289%, 0.9957 95.03%, 0.99639 95.76%, 0.99705 96.48%, 0.99767, 0.99825 97.9%, 0.9988, 0.99931, 0.9998),opacity var(--md-sys-motion-duration-medium1) cubic-bezier(0.3, 0, 0.8, 0.15)}dialog.micl-bottomsheet.micl-bottomsheet--resizing .micl-bottomsheet__headline{cursor:grabbing}dialog.micl-bottomsheet .micl-bottomsheet__headline{box-sizing:border-box;display:flex;align-items:center;width:100%;height:var(--md-sys-target-size);justify-content:center;cursor:grab}dialog.micl-bottomsheet .micl-bottomsheet__headline .micl-bottomsheet__draghandle{box-sizing:content-box;width:var(--md-sys-bottomsheet-handle-width);height:var(--md-sys-bottomsheet-handle-height);padding:16px calc((var(--md-sys-target-size) - var(--md-sys-bottomsheet-handle-width))/2);border:none;border-radius:var(--md-sys-shape-corner-small);background-color:var(--md-sys-color-on-surface-variant);background-clip:content-box;cursor:pointer}dialog.micl-bottomsheet .micl-bottomsheet__headline .micl-bottomsheet__draghandle:focus-visible{outline:var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);outline-offset:var(--md-sys-state-focus-indicator-outer-offset)}dialog.micl-bottomsheet .micl-bottomsheet__content{padding:0 var(--md-sys-bottomsheet-padding) var(--md-sys-bottomsheet-padding) var(--md-sys-bottomsheet-padding)}dialog.micl-bottomsheet::backdrop{background-color:rgba(0,0,0,0);transition:display var(--md-sys-motion-duration-long2) linear allow-discrete,overlay var(--md-sys-motion-duration-long2) linear allow-discrete,background-color var(--md-sys-motion-duration-long2) linear}dialog.micl-bottomsheet:popover-open,dialog.micl-bottomsheet[open]{height:var(--md-sys-bottomsheet-height);opacity:1}dialog.micl-bottomsheet:popover-open:not(.micl-bottomsheet--resizing),dialog.micl-bottomsheet[open]:not(.micl-bottomsheet--resizing){transition:display var(--md-sys-motion-duration-long2) linear allow-discrete,overlay var(--md-sys-motion-duration-long2) linear allow-discrete,height var(--md-sys-motion-duration-long2) linear(0, 0.00003 0.08%, 0.00014 0.17%, 0.00029 0.25%, 0.00054 0.34%, 0.00083 0.42%, 0.00121 0.51%, 0.00162 0.59%, 0.00215 0.68%, 0.00267 0.76%, 0.00334 0.85%, 0.00398 0.93%, 0.00478 1.02%, 0.00554 1.1%, 0.00646, 0.00745, 0.00851 1.37%, 0.00951 1.45%, 0.01069, 0.01194, 0.01325, 0.01463, 0.01607, 0.01757, 0.01914, 0.02076, 0.02245, 0.02419 2.35%, 0.0262 2.45%, 0.02807, 0.03, 0.03198 2.72%, 0.03425 2.82%, 0.03636 2.91%, 0.03876 3.01%, 0.04098 3.1%, 0.0435 3.2%, 0.04583 3.29%, 0.04848 3.39%, 0.05369, 0.05913 3.77%, 0.06508, 0.07127, 0.07769, 0.08432 4.57%, 0.09152 4.78%, 0.09859 4.98%, 0.10622, 0.11406, 0.12211 5.611%, 0.13076, 0.13961 6.051%, 0.14658, 0.15367, 0.16087 6.561%, 0.16862, 0.17647, 0.18444, 0.19252 7.281%, 0.20115, 0.20989, 0.21874, 0.22769 8.041%, 0.23721 8.241%, 0.25702 8.651%, 0.2777 9.071%, 0.29569 9.431%, 0.31491 9.811%, 0.33537 10.211%, 0.35705 10.631%, 0.37681 11.011%, 0.3993 11.441%, 0.4818 13.011%, 0.51583 13.661%, 0.55063 14.331%, 0.58146 14.931%, 0.59926 15.282%, 0.61591 15.612%, 0.6319, 0.64775 16.252%, 0.66295 16.562%, 0.6775, 0.69189, 0.70612 17.462%, 0.72204 17.802%, 0.73726, 0.75226 18.462%, 0.76658, 0.78067 19.102%, 0.7941 19.412%, 0.80773 19.732%, 0.8207, 0.83343, 0.84592, 0.85818, 0.87018, 0.88193 21.592%, 0.89307, 0.90396, 0.91462, 0.92503 22.792%, 0.93486 23.082%, 0.94479 23.382%, 0.95416 23.672%, 0.9636 23.972%, 0.97249 24.262%, 0.98144 24.562%, 0.98986, 0.99805 25.143%, 1.00219, 1.00627 25.443%, 1.01003 25.583%, 1.01399, 1.01789, 1.02172 26.033%, 1.02525 26.173%, 1.02897, 1.03262, 1.03622, 1.03975, 1.04322, 1.04663, 1.04999, 1.05328, 1.05651, 1.05968, 1.06279, 1.06584, 1.06883, 1.07176, 1.07463, 1.07745, 1.0802, 1.0829, 1.08554, 1.08813, 1.09065, 1.09312 29.473%, 1.09569 29.633%, 1.09804, 1.10034, 1.10258 30.083%, 1.10491 30.243%, 1.10704 30.393%, 1.10925 30.553%, 1.11127 30.703%, 1.11336 30.863%, 1.11526 31.013%, 1.11724, 1.11915, 1.12101 31.493%, 1.12269 31.643%, 1.12443, 1.12612, 1.12775 32.123%, 1.12893, 1.13008, 1.1312 32.483%, 1.13238 32.613%, 1.13343, 1.13446, 1.13545 32.973%, 1.1365 33.103%, 1.13743 33.223%, 1.1384 33.353%, 1.13927 33.473%, 1.14018 33.603%, 1.14099 33.723%, 1.14183, 1.14264, 1.14342 34.113%, 1.14411 34.233%, 1.14482, 1.1455, 1.14615, 1.14677, 1.14736, 1.14791, 1.14844, 1.14893, 1.14939, 1.14983, 1.15023, 1.15061, 1.15095, 1.15127 36.054%, 1.15158 36.194%, 1.15184 36.324%, 1.15209 36.464%, 1.15229 36.594%, 1.15248 36.734%, 1.15263 36.864%, 1.15276, 1.15286, 1.15293 37.284%, 1.15296 37.414%, 1.15298, 1.15296, 1.15292, 1.15285, 1.15275, 1.15263 38.254%, 1.15246 38.404%, 1.15228 38.544%, 1.15206 38.694%, 1.15183 38.834%, 1.15155, 1.15125, 1.15092, 1.15056, 1.15017, 1.14976, 1.14932, 1.14886 40.034%, 1.14834 40.194%, 1.14783 40.344%, 1.14725 40.504%, 1.14669 40.654%, 1.14607 40.814%, 1.14513 41.044%, 1.14409, 1.143 41.524%, 1.14181, 1.14057, 1.13927 42.274%, 1.13787, 1.13642, 1.13492 43.054%, 1.13331, 1.13166 43.594%, 1.12989, 1.12808 44.154%, 1.12615 44.444%, 1.12412, 1.12203 45.045%, 1.1202, 1.11833 45.565%, 1.11636, 1.11437 46.105%, 1.11228 46.385%, 1.11008 46.675%, 1.10531 47.295%, 1.10085 47.865%, 1.09578 48.505%, 1.09057 49.155%, 1.07579 50.995%, 1.07124 51.565%, 1.06713 52.085%, 1.06251 52.675%, 1.05826 53.225%, 1.05423 53.755%, 1.05041 54.265%, 1.0482, 1.04601, 1.04385 55.166%, 1.04178, 1.03974 55.746%, 1.0378, 1.03588, 1.03399, 1.03213 56.866%, 1.03036 57.136%, 1.02855 57.416%, 1.02683, 1.02514, 1.02348, 1.02185, 1.02024 58.766%, 1.01844, 1.01667, 1.01494, 1.01325, 1.0116 60.316%, 1.01004 60.616%, 1.00847 60.926%, 1.00699 61.226%, 1.0055 61.536%, 1.00409, 1.00273, 1.0014, 1.00011 62.736%, 0.99882 63.046%, 0.9976 63.346%, 0.99639 63.656%, 0.99525 63.956%, 0.99412 64.266%, 0.99306 64.566%, 0.992, 0.99098, 0.99001, 0.98907, 0.98817, 0.98731, 0.98648, 0.98569 67.047%, 0.98492, 0.98418, 0.98349, 0.98283, 0.98221 68.647%, 0.98173 68.907%, 0.98126 69.177%, 0.98083 69.437%, 0.98041, 0.98001, 0.97963, 0.97929 70.517%, 0.97895 70.797%, 0.97865 71.067%, 0.97836, 0.97809, 0.97785, 0.97763 72.187%, 0.97743 72.477%, 0.97725 72.757%, 0.9771, 0.97696, 0.97685 73.627%, 0.97676, 0.97668, 0.97663, 0.97661 74.827%, 0.9766, 0.97661, 0.97664 75.758%, 0.9767 76.078%, 0.97687 76.718%, 0.97713 77.378%, 0.97748 78.058%, 0.97779 78.578%, 0.97815 79.108%, 0.97855 79.648%, 0.97901 80.208%, 0.97953 80.788%, 0.9801 81.388%, 0.98072 82.008%, 0.98141 82.668%, 0.98262 83.758%, 0.98406 84.988%, 0.98549 86.169%, 0.98928 89.259%, 0.99036 90.159%, 0.99134 90.989%, 0.99235 91.869%, 0.99328 92.699%, 0.99415 93.509%, 0.99496 94.289%, 0.9957 95.03%, 0.99639 95.76%, 0.99705 96.48%, 0.99767, 0.99825 97.9%, 0.9988, 0.99931, 0.9998),opacity var(--md-sys-motion-duration-long2) cubic-bezier(0.05, 0.7, 0.1, 1)}@starting-style{dialog.micl-bottomsheet:popover-open,dialog.micl-bottomsheet[open]{height:0;opacity:0}}@starting-style{dialog.micl-bottomsheet:popover-open::backdrop,dialog.micl-bottomsheet[open]::backdrop{background-color:rgba(0,0,0,0)}}dialog.micl-bottomsheet[open]::backdrop{background-color:rgba(0,0,0,.2)}@media(min-width: 641px){dialog.micl-bottomsheet{width:min(100vw - 2*var(--md-sys-bottomsheet-margin),640px);max-width:640px;min-width:min(100vw - 2*var(--md-sys-bottomsheet-margin),640px);inset-inline-start:calc((100vw - min(100vw - 2*var(--md-sys-bottomsheet-margin),640px))/2 - var(--md-sys-bottomsheet-margin));margin:var(--md-sys-bottomsheet-margin);margin-bottom:0}}
+:root{--md-sys-elevation-level0: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px, rgba(0, 0, 0, 0.14) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 0px 0px 0px;--md-sys-elevation-level1: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;--md-sys-elevation-level2: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;--md-sys-elevation-level3: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px;--md-sys-elevation-level4: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;--md-sys-elevation-level5: rgba(0, 0, 0, 0.2) 0px 7px 8px -4px, rgba(0, 0, 0, 0.14) 0px 12px 17px 2px, rgba(0, 0, 0, 0.12) 0px 5px 22px 4px}: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-outer-offset: 2px;--md-sys-state-focus-indicator-thickness: 3px}dialog.micl-bottomsheet{--md-sys-bottomsheet-height: max-content;--md-sys-bottomsheet-margin: 56px;--md-sys-bottomsheet-padding: 24px;--md-sys-bottomsheet-handle-width: 32px;--md-sys-bottomsheet-handle-height: 4px;--md-sys-bottomsheet-motion-spatial: cubic-bezier(0.39, 1.29, 0.35, 0.98);--md-sys-bottomsheet-motion-duration: 650ms;--md-sys-bottomsheet-motion-duration-reverse: 500ms;box-sizing:border-box;position:fixed;top:auto;bottom:0;height:0;max-height:50vh;width:100%;min-width:100%;margin:72px 0 0 0;padding:0;border:none;border-radius:var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;background-color:var(--md-sys-color-surface-container-low);box-shadow:var(--md-sys-elevation-level1);opacity:0;overflow-y:hidden;interpolate-size:allow-keywords}dialog.micl-bottomsheet:not(.micl-bottomsheet--resizing){transition:opacity var(--md-sys-bottomsheet-motion-duration-reverse) cubic-bezier(0.3, 0, 0.8, 0.15),height var(--md-sys-bottomsheet-motion-duration-reverse) var(--md-sys-bottomsheet-motion-spatial),overlay var(--md-sys-bottomsheet-motion-duration-reverse) linear allow-discrete,display var(--md-sys-bottomsheet-motion-duration-reverse) linear allow-discrete}dialog.micl-bottomsheet.micl-bottomsheet--resizing .micl-bottomsheet__headline{cursor:grabbing}dialog.micl-bottomsheet .micl-bottomsheet__headline{box-sizing:border-box;display:flex;align-items:center;width:100%;height:var(--md-sys-target-size);justify-content:center;cursor:grab}dialog.micl-bottomsheet .micl-bottomsheet__headline .micl-bottomsheet__draghandle{box-sizing:content-box;width:var(--md-sys-bottomsheet-handle-width);height:var(--md-sys-bottomsheet-handle-height);padding:16px calc((var(--md-sys-target-size) - var(--md-sys-bottomsheet-handle-width))/2);border:none;border-radius:var(--md-sys-shape-corner-small);background-color:var(--md-sys-color-on-surface-variant);background-clip:content-box;cursor:pointer}dialog.micl-bottomsheet .micl-bottomsheet__headline .micl-bottomsheet__draghandle:focus-visible{outline:var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);outline-offset:var(--md-sys-state-focus-indicator-outer-offset)}dialog.micl-bottomsheet .micl-bottomsheet__content{padding:0 var(--md-sys-bottomsheet-padding) var(--md-sys-bottomsheet-padding) var(--md-sys-bottomsheet-padding)}dialog.micl-bottomsheet::backdrop{background-color:rgba(0,0,0,0);transition:overlay var(--md-sys-bottomsheet-motion-duration) linear allow-discrete,display var(--md-sys-bottomsheet-motion-duration) linear allow-discrete,background-color var(--md-sys-bottomsheet-motion-duration) linear}dialog.micl-bottomsheet:popover-open,dialog.micl-bottomsheet[open]{height:var(--md-sys-bottomsheet-height);opacity:1}dialog.micl-bottomsheet:popover-open:not(.micl-bottomsheet--resizing),dialog.micl-bottomsheet[open]:not(.micl-bottomsheet--resizing){transition:opacity var(--md-sys-bottomsheet-motion-duration) cubic-bezier(0.05, 0.7, 0.1, 1),height var(--md-sys-bottomsheet-motion-duration) var(--md-sys-bottomsheet-motion-spatial),overlay var(--md-sys-bottomsheet-motion-duration) linear allow-discrete,display var(--md-sys-bottomsheet-motion-duration) linear allow-discrete}@starting-style{dialog.micl-bottomsheet:popover-open,dialog.micl-bottomsheet[open]{height:0;opacity:0}}dialog.micl-bottomsheet[open]::backdrop{background-color:rgba(0,0,0,.2)}@starting-style{dialog.micl-bottomsheet[open]::backdrop{background-color:rgba(0,0,0,0)}}@media(min-width: 641px){dialog.micl-bottomsheet{width:min(100vw - 2*var(--md-sys-bottomsheet-margin),640px);max-width:640px;min-width:min(100vw - 2*var(--md-sys-bottomsheet-margin),640px);inset-inline-start:calc((100vw - min(100vw - 2*var(--md-sys-bottomsheet-margin),640px))/2 - var(--md-sys-bottomsheet-margin));margin:var(--md-sys-bottomsheet-margin);margin-bottom:0}}