.pane{--layout-flex:1 1 auto;--layout-display:flex;--layout-flex-flow:column nowrap;--layout-align-items:stretch;--layout-align-content:initial;--layout-justify-content:initial;--layout-width:100%;--layout-height:auto;--layout-min-height:auto;--layout-padding:var(--spacing-panes);--layout-margin:0;--layout-gap:0;--layout-border:initial;--layout-bg:inherit;--layout-shape:var(--shape-corner-xl);&.fixed { --layout-width: 100%; }}.panes{--layout-flex:1 1 auto;--layout-display:flex;--layout-flex-flow:row nowrap;--layout-align-items:stretch;--layout-align-content:initial;--layout-justify-content:initial;--layout-width:100%;--layout-height:auto;--layout-min-height:auto;--layout-padding:0 var(--spacing-panes);--layout-margin:0;--layout-gap:var(--spacing-panes);--layout-border:initial;--layout-bg:inherit;--layout-shape:inherit;&:has(.drag-handle-container) { --layout-gap:unset; }}.basic-fixed-flex#single{--layout-flex-flow:column nowrap;.pane { --layout-display: flex; --layout-flex: 1 1 auto; --layout-width: 100%; } #toc { --layout-flex: 0 0 auto; }}.basic-fixed-flex:not(#single){--layout-flex-flow:row nowrap;.pane { --layout-flex: 1 1 0; &.fixed { --layout-flex: 0 0 var(--fixed-pane-width); --layout-width: var(--fixed-pane-width); } }}@media screen and (max-width:599px){.basic-fixed-flex:not(#single){--layout-flex-flow:row nowrap;.pane { --layout-display: none; --layout-flex: 1 1 0; --layout-width: calc(50% - var(--spacing-panes) / 2); &.fixed { --layout-flex: 0 0 var(--fixed-pane-width); --layout-width: var(--fixed-pane-width); } } &::before { content: "Compact: do not use this layout on screens smaller than 600px wide."; display: flex; color: var(--color-error); padding: 4em; }}}@media screen and (min-width:1200px){.basic-fixed-flex#single{--layout-flex-flow:row-reverse nowrap;.pane { --layout-flex: 1 1 0; &.fixed { --layout-flex: 0 0 var(--fixed-pane-width); --layout-width: var(--fixed-pane-width); } }}}.basic-single-pane>.pane{--layout-flex:1 1 auto;--layout-width:100%}.basic-split-pane{--layout-flex-flow:row nowrap;.pane { --layout-flex: 1 1 auto; }}@media screen and (max-width:599px){.basic-split-pane{.pane { --layout-display: none; --layout-flex: 1 1 auto; --layout-width: calc(50% - var(--spacing-panes) / 2); } &::before { content: "Compact: do not use this layout on screens smaller than 600px wide."; display: flex; color: var(--color-error); padding: 4em; }}}.canon-feed .pane{--layout-gap:var(--size-2);--layout-display:flex;--layout-flex-flow:row wrap;--layout-align-content:flex-start}@media screen and (max-width:599px){.canon-feed .card{flex:1 1 calc(100% - var(--spacing-panes))}}@media screen and (min-width:600px){.canon-feed .card{flex:1 1 calc(100%/2 - var(--spacing-panes))}}@media screen and (min-width:840px){.canon-feed .card{flex:1 1 calc(100%/3 - var(--spacing-panes))}}@media screen and (min-width:1200px){.canon-feed .card{flex:1 1 calc(100%/4 - var(--spacing-panes))}}@media screen and (min-width:1600px){.canon-feed .card{flex:1 1 calc(100%/5 - var(--spacing-panes))}}.canon-list-detail{.detail-pane, .list-pane { --layout-flex: 1 1 auto; }}@media screen and (max-width:599px){.canon-list-detail .detail-pane{--layout-display:none}}.panes.canon-supporting-pane{--layout-flex-flow:column nowrap;.focus-pane { --layout-flex: 1 1 auto; } .supporting-pane { --layout-flex: 1 1 auto; }}@media screen and (min-width:840px){.panes.canon-supporting-pane{--layout-flex-flow:row nowrap;.focus-pane { --layout-flex: 2 1 auto; } .supporting-pane { --layout-flex: 1 2 auto; }}}.drag-handle-container{flex:auto;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;min-width:var(--spacing-panes);height:auto;cursor:ew-resize;.drag-handle { position: relative; z-index: 0; background: var(--color-outline); border-radius: var(--shape-corner-full); width: var(--size-1); height: var(--size-12); } .drag-handle::after { content: ""; position: absolute; inset: 0; z-index: 1; } &:hover .drag-handle::after { background: var(--color-inverse-on-surface); opacity: var(--state-hover-opacity); } &:is(:focus, :focus-visible, :focus-within) .drag-handle::after { background: var(--color-inverse-on-surface); opacity: var(--state-focus-opacity); } &:active .drag-handle { border-radius: var(--shape-corner-m); background: var(--color-on-surface); width: var(--size-3); height: var(--size-14); }}.set.lists{--set-flex:1 1 auto;--set-display:flex;--set-flex-flow:column nowrap;--set-align-items:flex-start;--set-align-content:stretch;--set-justify-content:flex-start;--set-width:100%;--set-gap:0;--set-overflow:clip;--set-color:var(--color-surface);max-width:100%;.divider { color: var(--color-outline); }}.set.menus{--set-display:flex;--set-flex-flow:column nowrap;--set-justify-content:center;--set-align-items:flex-start;--set-height:auto;--set-width:auto;--set-color:var(--color-surface-container);.divider { color: var(--color-surface-variant); }}.set.navigation.bar{--set-flex-flow:row nowrap;--set-gap:var(--size-2);--set-width:100%;--set-padding:0 var(--size-2);--set-color:var(--color-surface-container)}.set.navigation.drawer{--set-padding:var(--size-3);--set-flex-flow:column nowrap;min-width:var(--size-90);&.standard { --container-color: inherit; --container-elevation: var(--elevation0); } &.modal { --container-color: var(--color-surface-container-low); --container-shape: var(--shape-corner-l-end); --container-elevation: var(--elevation1); } .headline, .section-header { color: var(--color-on-surface-variant); font-size: var(--typescale-title-small-size); line-height: var(--typescale-title-small-line-height); font-weight: var(--typescale-title-small-weight); font-family: var(--typescale-title-small-font); } .headline { display: flex; height: var(--size-14); padding: var(--size-2) var(--size-2) var(--size-2) var(--size-4); flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; flex-shrink: 0; align-self: stretch; } .section-header { padding: 18px var(--size-4); } .divider { color: var(--color-outline); }}.set.navigation.rail{--set-flex-flow:column nowrap;--set-gap:var(--size-10);--set-width:var(--size-20);--set-shape:var(--shape-corner-l);--set-padding:var(--size-11) 0 var(--size-14) 0;--set-color:var(--color-surface);min-height:900px;&.middle { --container-gap: unset; .destinations { margin-block: auto; } } &.bottom { --container-gap: unset; .destinations { margin-top: auto; } } .menu-and-fab, .destinations { display: flex; flex-flow: column nowrap; width: 100%; align-items: center; gap: var(--size-1); }}.set.segmented-buttons{--set-display:flex;--set-flex-flow:row nowrap;--set-align-items:stretch;--set-overflow:auto clip}.set.tabs:not(.sub-tabs){position:relative;--set-flex:1 1 auto;--set-display:flex;--set-flex-flow:row nowrap;--set-align-items:stretch;--set-align-content:stretch;--set-justify-content:flex-start;--set-width:100%;--set-gap:0;--set-overflow:clip;--set-color:var(--color-surface)}.app-bar{--container-display:flex;--container-flex-flow:row nowrap;--container-justify-content:flex-start;--container-align-items:center;--container-shape:var(--shape-corner-none);--container-color:var(--color-surface-container)}.button{--container-display:flex;--container-flex-flow:row nowrap;--container-justify-content:center;--container-align-items:center;--container-height:var(--size-10);--container-shape:var(--shape-corner-xl);--container-padding:0 var(--size-6);min-width:var(--size-10);user-select:none;cursor:pointer;font-family:var(--typescale-label-large-font);font-size:var(--typescale-label-large-size);font-weight:var(--typescale-label-large-weight);line-height:var(--typescale-label-large-line-height)}.item{--container-display:flex;--container-justify-content:center;--container-align-items:center;--container-width:100%;--container-color:none;cursor:pointer}.navigation{--set-display:flex;--set-align-items:flex-start}.picker{--container-display:flex;--container-flex-flow:column nowrap;--container-justify-content:flex-start;--container-align-items:flex-start;--container-height:auto;--container-width:auto;--container-elevation:var(--elevation3);--container-shape:var(--shape-corner-xl);--container-color:var(--color-surface-container-high)}.sheet{--container-display:flex;--container-flex-flow:column nowrap;--container-color:var(--color-surface-container-low)}.button.common{min-width:var(--size-10);--container-padding:0 var(--size-3);--container-gap:var(--size-2);--icon-color:var(--color-primary);&:has(+ .icon:is(:first-child)) { padding-right:var(--size-4); + .icon:first-child { font-size:18px; } } &:has(+ .icon:is(:last-child)) { padding-left:var(--size-2); padding-right:var(--size-1); + .icon:last-child { font-size:18px; } } &.filled,&.tonal,&.elevated,&.outlined { --container-padding:0 var(--size-6); &:has(i:first-child) { padding-left:var(--size-4); } } &.filled { --container-color:var(--color-primary); --icon-color:var(--color-on-primary); } &.tonal { --container-color:var(--color-secondary-container); --icon-color:var(--color-on-secondary-container); } &.elevated { --container-color:var(--color-surface-container-low); --icon-color:var(--color-primary); --container-elevation:var(--elevation1); --container-elevation-hover:var(--elevation2); --container-elevation-focus:var(--elevation1); --container-elevation-press:var(--elevation1); --container-elevation-disabled:var(--elevation0); } &.outlined { --container-outline:1px solid var(--color-outline); --container-outline-hover:1px solid var(--color-outline); --container-outline-focus:1px solid var(--color-primary); --container-outline-press:1px solid var(--color-outline); }}.button.fab{--container-width:var(--size-14);--container-height:var(--size-14);--container-shape:var(--shape-corner-l);--container-padding:var(--size-4);--container-elevation:var(--elevation3);--container-elevation-hover:var(--elevation4);--container-elevation-focus:var(--elevation3);--container-elevation-press:var(--elevation3);.icon { font-size: var(--size-6); } &.medium { --container-width: var(--size-20); --container-height: var(--size-20); --container-shape: var(--shape-corner-li); --container-padding: var(--size-4); .icon { font-size: var(--size-7); } } &.large { --container-width: var(--size-24); --container-height: var(--size-24); --container-shape: var(--shape-corner-xl); --container-padding: var(--size-4); .icon { font-size: var(--size-9); } } &.extended { min-width: var(--size-20); gap: var(--size-4); --container-width: auto; --container-padding: var(--size-4); &.small { --container-height: var(--size-14); --container-shape: var(--shape-corner-l); font-size: var(--size-4); .icon { font-size: var(--size-6); } } &.medium { --container-height: var(--size-20); --container-shape: var(--shape-corner-li); font-size: 22px; .icon { font-size: var(--size-7); } } &.large { --container-height: var(--size-24); --container-shape: var(--shape-corner-xl); font-size: var(--size-6); .icon { font-size: var(--size-9); } } }}.button.icon{min-height:var(--size-10);min-width:var(--size-10);--container-padding:0;--container-shape:var(--shape-corner-full);--icon-color:var(--color-on-surface-variant);& input[type="checkbox"] { display: none; &:checked + .button.icon { --icon-color: var(--color-primary); .icon, & svg { font-variation-settings: "FILL" 1; } } }}.button.icon.filled{--container-color:var(--color-primary);--icon-color:var(--color-on-primary);&:has(input[type="checkbox"]) { --container-color:var(--color-surface-container-highest); --icon-color:var(--color-primary); .button.icon { --container-color:var(--color-surface-container-highest); --icon-color:var(--color-primary); } } &:has(input[type="checkbox"]:checked) { --container-color:var(--color-primary); --icon-color:var(--color-on-primary); .button.icon { --container-color:var(--color-primary); --icon-color:var(--color-on-primary); } .icon,& svg { font-variation-settings:"FILL" 1; } }}.button.icon.tonal{--container-color:var(--color-secondary-container);--icon-color:var(--color-on-secondary-container);&:has(input[type="checkbox"]) { --container-color:var(--color-surface-container-highest); --icon-color:var(--color-on-surface-variant); .button.icon { --container-color:var(--color-surface-container-highest); --icon-color:var(--color-on-surface-variant); } } &:has(input[type="checkbox"]:checked) { --container-color:var(--color-secondary-container); --icon-color:var(--color-on-secondary-container); .button.icon { --container-color:var(--color-secondary-container); --icon-color:var(--color-on-secondary-container); } .icon,& svg { font-variation-settings:"FILL" 1; } }}.button.icon.outlined{--container-outline:1px solid var(--color-outline);--container-outline-hover:1px solid var(--color-outline);--container-outline-focus:1px solid var(--color-outline);--container-outline-press:1px solid var(--color-outline);--disabled-outline:hsl(
      from var(--color-on-surface) 
      l 
      c 
      h 
      / 0.12);--container-outline-disabled:1px solid var(--disabled-outline);& input[type="checkbox"] { &:checked + .button.icon { --container-color: var(--color-inverse-surface); --icon-color: var(--color-inverse-on-surface); .icon, & svg { font-variation-settings: "FILL" 1; } } }}.button.segmented{flex:1;cursor:pointer;border-inline-end:0 solid transparent;border-right:0 solid transparent;min-width:fit-content;--container-gap:var(--size-2);--container-shape:var(--shape-corner-none);--container-padding:0 var(--size-4);--container-outline:1px solid var(--color-outline);--container-color:var(--color-surface);--icon-color:var(--color-on-surface);--text-color:var(--color-on-surface);--container-outline-hover:1px solid var(--color-outline);--container-outline-focus:1px solid var(--color-outline);--container-outline-press:1px solid var(--color-outline);--container-outline-disabled:1px solid var(--color-outline-variant);.icon:first-of-type { font-size: 18px; color: var(--color-on-surface); display: none; } &.start { --container-shape: var(--shape-corner-xl-start); } &.end { --container-shape: var(--shape-corner-xl-end); &::before { border-inline-end: 1px solid var(--color-outline); border-right: 1px solid var(--color-outline); } &:hover::before { border-inline-end: 0px solid var(--color-outline); border-right: 0px solid var(--color-outline); } } &:hover, &:focus, &:active { &::before { --container-outline: 1px solid var(--color-outline); border-inline-end: 0px solid var(--color-outline); border-right: 0px solid var(--color-outline); } } & input { display: none; } &:has(input:checked) { --container-color: var(--color-secondary-container); --icon-color: var(--color-on-secondary-container); --text-color: var(--color-on-secondary-container); &:has(.icon) { padding-left: var(--size-2); } .icon { display: flex; flex-flow: column nowrap; color: var(--color-on-secondary-container); } } &:has(input:disabled) { --container-elevation: var(--elevation-disabled); pointer-events: none; cursor: not-allowed; }}.set.segmented-buttons{width:100%}.badge{--container-display:flex;--container-flex-flow:row nowrap;--container-justify-content:center;--container-align-items:center;--container-height:6px;--container-width:6px;--container-shape:var(--shape-corner-full);--container-color:var(--color-error)}.badge.large{--container-height:var(--size-4);--container-width:unset;--container-padding:var(--size-1);--text-color:var(--color-on-error);min-width:var(--size-4);& span { max-width: 4.1ch; overflow: clip; text-overflow: "+"; white-space: nowrap; font-family: var(--typescale-label-small-font); font-size: var(--typescale-label-small-size); font-weight: var(--typescale-label-small-weight); line-height: var(--typescale-label-small-line-height); }}.progress{--container-display:inline-flex;--container-flex-flow:row nowrap;--container-justify-content:center;--container-align-items:center;--container-gap:0;--container-padding:0;--container-elevation:none;--container-shape:var(--shape-corner-full);--container-color:var(--color-secondary-container);--text-color:var(--color-primary);--icon-color:var(--color-primary);--arc-duration:calc(var(--motion-duration-extra-long4) * 1.33);--linear-duration:calc(var(--motion-duration-extra-long4) * 2);overflow:clip;&::before { content:''; width:100%; height:100%; position:absolute; --container-color:var(--color-secondary-container); } & progress { border-radius:inherit; background:none; -webkit-appearance:none; -moz-appearance:none; appearance:none; border:none; width:100%; } &.circular { --container-height:var(--size-12); --container-width:var(--size-12); --container-outline:var(--size-1) solid currentColor; animation-timing-function:var(--motion-easing-emphasized); animation-duration:var(--arc-duration); animation-name:to-circular; background:none; &::before { --container-color:none; } & progress::-webkit-progress-bar { background:none; } } &.linear { --container-height:var(--size-1); --container-width:100%; --container-outline:none; & progress { animation-timing-function:var(--motion-easing-linear); animation-duration:var(--linear-duration); animation-name:linear-scale,linear-translate,linear-scale-secondary,linear-translate-secondary; } } &.determinate { animation-iteration-count:1; } &.indeterminate,&.indeterminate progress { animation-iteration-count:infinite; } &.linear progress::-webkit-progress-bar { background:var(--color-primary); border-radius:var(--shape-corner-full); } &.linear progress::-webkit-progress-value { background:none; border-radius:var(--shape-corner-full); } &.linear progress::-moz-progress-bar { background:var(--color-primary); border-radius:var(--shape-corner-full); } &.circular progress::-moz-progress-bar { background:none; border-radius:var(--shape-corner-full); } &.indeterminate progress::-moz-progress-bar { animation-iteration-count:infinite; }}@keyframes linear-scale{0%{max-width:0%}35%{max-width:10%}70%{max-width:100%}90%{max-width:35%}100%{max-width:100%}}@keyframes linear-scale-secondary{0%{max-width:0%}20%{max-width:45%}45%{max-width:100%}65%{max-width:45%}100%{max-width:100%}}@keyframes linear-translate{0%{margin-left:-100%}20%{margin-left:-50%}60%{margin-left:50%}100%{margin-left:200%}}@keyframes linear-translate-secondary{0%{margin-left:-100%}25%{margin-left:50%}50%{margin-left:85%}100%{margin-left:160%}}@keyframes to-circular{0%{transform:rotate(0);clip-path:polygon(50% 50%,0% 0%,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%)}20%{clip-path:polygon(50% 50%,0% 0%,50% 0%,100% 0%,100% 0%,100% 0%,100% 0%,100% 0%,100% 0%)}30%{clip-path:polygon(50% 50%,0% 0%,50% 0%,100% 0%,100% 50%,100% 50%,100% 50%,100% 50%,100% 50%)}40%{clip-path:polygon(50% 50%,0% 0%,50% 0%,100% 0%,100% 50%,100% 100%,100% 100%,100% 100%,100% 100%)}50%{clip-path:polygon(50% 50%,50% 0%,50% 0%,100% 0%,100% 50%,100% 100%,50% 100%,50% 100%,50% 100%)}60%{clip-path:polygon(50% 50%,100% 50%,100% 50%,100% 50%,100% 50%,100% 100%,50% 100%,0% 100%,0% 100%)}70%{clip-path:polygon(50% 50%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,0% 100%,0% 50%)}80%{clip-path:polygon(50% 50%,0% 100%,0% 100%,0% 100%,0% 100%,0% 100%,0% 100%,0% 100%,0% 50%)}90%{transform:rotate(360deg);clip-path:polygon(50% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%)}100%{clip-path:polygon(50% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%)}}.snackbar{--container-display:flex;--container-flex-flow:row nowrap;--container-justify-content:flex-start;--container-align-items:center;--container-gap:var(--size-3);--container-height:var(--size-12);--container-width:100%;--container-padding:0 var(--size-4);--container-elevation:var(--elevation3);--container-shape:var(--shape-corner-xs);--container-color:var(--color-inverse-surface);--container-elevation-hover:var(--container-elevation);--container-elevation-focus:var(--container-elevation);--container-elevation-press:var(--container-elevation);.supporting-text { color: var(--color-inverse-on-surface); font-size: var(--typescale-body-medium-size); line-height: var(--typescale-body-medium-line-height); font-weight: var(--typescale-body-medium-weight); font-family: var(--typescale-body-medium-font); } .actions { display: flex; flex-flow: row nowrap; margin-left: auto; align-items: center; .button.common { font-size: var(--typescale-label-large-size); line-height: var(--typescale-label-large-line-height); font-weight: var(--typescale-label-large-weight); font-family: var(--typescale-label-large-font); color: var(--color-inverse-primary); --state-color: var(--color-inverse-primary); } .button.icon { align-items: stretch; --container-height: var(--size-12); --container-width: var(--size-12); --container-padding: var(--size-2); --state-color: var(--color-inverse-on-surface); color: var(--color-inverse-on-surface); .icon { font-size: var(--size-6); } } } &:has(.actions) { --container-padding: 0px 0px 0px var(--size-4); &:has(.longer-action) { .actions { padding: 0px var(--size-2) var(--size-1) var(--size-2); } .supporting-text { align-self: flex-start; padding: 14px var(--size-1) 0px var(--size-1); } } } &:has(.button.icon) { --container-padding: 0px 0px 0px var(--size-4); &:has(.longer-action) { .actions { padding: 0px 0px var(--size-1) var(--size-2); } .supporting-text { align-self: flex-start; padding: 14px var(--size-1) 0px var(--size-1); } } }}.snackbar.two{--container-height:var(--size-17);&:has(.longer-action) { --container-flex-flow:column nowrap; --container-height:unset; --container-gap:14px; } &:has(.actions) { --container-padding:0px 0px 0px var(--size-4); &:has(.longer-action) { .actions { padding:0px var(--size-2) var(--size-1) var(--size-2); } .supporting-text { align-self:flex-start; padding:14px var(--size-1) 0px var(--size-1); } } } &:has(.button.icon) { --container-padding:0px 0px 0px var(--size-4); &:has(.longer-action) { .actions { padding:0px 0px var(--size-1) var(--size-2); } .supporting-text { align-self:flex-start; padding:14px var(--size-1) 0px var(--size-1); } } }}.tooltip{--container-display:flex;--container-flex-flow:row wrap;--container-padding:0 var(--size-2);--container-shape:var(--shape-corner-xs);--container-color:var(--color-inverse-surface);--text-color:var(--color-inverse-on-surface);min-height:var(--size-6);.supporting-text { font-size: var(--typescale-body-small-size); line-height: var(--typescale-body-small-line-height); font-weight: var(--typescale-body-small-weight); font-family: var(--typescale-body-small-font); }}.tooltip.rich{--container-padding:unset;--container-elevation:var(--elevation2);--container-shape:var(--shape-corner-m);--container-color:var(--color-surface-container);--text-color:var(--color-on-surface-variant);.subhead { padding: var(--size-3) var(--size-4) var(--size-1) var(--size-4); font-size: var(--typescale-title-small-size); line-height: var(--typescale-title-small-line-height); font-weight: var(--typescale-title-small-weight); font-family: var(--typescale-title-small-font); } .supporting-text { padding: 0 var(--size-4) var(--size-3) var(--size-4); font-size: var(--typescale-body-medium-size); line-height: var(--typescale-body-medium-line-height); font-weight: var(--typescale-body-medium-weight); font-family: var(--typescale-body-medium-font); } .actions { display: flex; flex-flow: row nowrap; gap: var(--size-2); padding: 0 var(--size-4) var(--size-2) var(--size-1); } .button { color: var(--color-primary); font-size: var(--typescale-label-large-size); line-height: var(--typescale-label-large-line-height); font-weight: var(--typescale-label-large-weight); font-family: var(--typescale-label-large-font); }}.card{--container-display:flex;--container-flex-flow:row nowrap;--container-align-items:flex-start;--container-justify-content:center;--container-elevation:var(--elevation0);--container-elevation-hover:var(--elevation1);--container-elevation-focus:var(--elevation0);--container-elevation-press:var(--elevation0);--container-elevation-disabled:var(--elevation0);--container-shape:var(--shape-corner-m);--container-color:inherit;--text-color:var(--color-on-surface);--icon-color:var(--color-on-surface);&:has(.actions) { --state-color:none; --container-elevation-hover:intial; --container-elevation-focus:intial; --container-elevation-press:intial; } * { color:var(--icon-color); } & img { min-height:var(--size-16); } &.elevated { --container-color:var(--color-surface-container-low); --icon-color:var(--color-on-surface); --container-elevation:var(--elevation1); --container-elevation-hover:var(--elevation2); --container-elevation-focus:var(--elevation1); --container-elevation-press:var(--elevation1); --container-color-disabled:var(--color-surface); --container-elevation-disabled:var(--elevation1); } &.filled { --container-color:var(--color-surface-container-highest); --icon-color:var(--color-on-surface); --container-color-disabled:var(--color-surface-variant); } &.outlined { --container-color:var(--color-surface); --icon-color:var(--color-on-surface); --container-outline:1px solid var(--color-outline-variant); --container-outline-hover:1px solid var(--color-outline-variant); --container-outline-focus:1px solid var(--color-on-surface); --container-outline-press:1px solid var(--color-outline-variant); --disabled-outline:color-mix(in lch,12% var(--color-outline),transparent); --container-outline-disabled:1px solid var(--disabled-outline); } .media i { color:var(--color-surface-container-high); } &[stacked] { flex:1 0 auto; width:100%; --container-flex-flow:column nowrap; --container-align-items:stretch; --container-justify-content:center; padding:unset!important; .content { display:flex; flex-flow:row nowrap; align-items:center; padding:var(--size-4); gap:var(--size-4); width:100%; flex:1 0 0; .monogram { font-size:var(--typescale-title-medium-size); line-height:var(--typescale-title-medium-line-height); font-weight:var(--typescale-title-medium-weight); font-family:var(--typescale-title-medium-font); display:flex; width:var(--size-10); height:var(--size-10); flex-flow:column; justify-content:center; align-items:center; border-radius:var(--shape-corner-full); color:var(--color-surface); background-color:var(--color-primary); } .text { flex:1 0 0; display:flex; flex-flow:column nowrap; align-items:flex-start; gap:var(--size-1); color:var(--color-on-surface); .header { align-self:stretch; font-size:var(--typescale-title-medium-size); line-height:var(--typescale-title-medium-line-height); font-weight:var(--typescale-title-medium-weight); font-family:var(--typescale-title-medium-font); } .subhead { align-self:stretch; font-size:var(--typescale-body-medium-size); line-height:var(--typescale-body-medium-line-height); font-weight:var(--typescale-body-medium-weight); font-family:var(--typescale-body-medium-font); } } .button.icon { margin-left:auto; } } .media { flex:1 0 0; display:flex; justify-content:center; align-items:center; align-self:stretch; min-height:var(--size-20); background:url(<path-to-image>) lightgray 50%/cover no-repeat; } .text-content { display:flex; flex-flow:column nowrap; align-items:flex-start; gap:var(--size-8); padding:var(--size-4); .titles { display:flex; flex-flow:column nowrap; align-items:flex-start; gap:var(--size-4); .title { color:var(--color-on-surface); font-size:var(--typescale-body-large-size); line-height:var(--typescale-body-large-line-height); font-weight:var(--typescale-body-large-weight); font-family:var(--typescale-body-large-font); } .subtitle { color:var(--color-on-surface-variant); font-size:var(--typescale-body-medium-size); line-height:var(--typescale-body-medium-line-height); font-weight:var(--typescale-body-medium-weight); font-family:var(--typescale-body-medium-font); } } .body { color:var(--color-on-surface-variant); font-size:var(--typescale-body-medium-size); line-height:var(--typescale-body-medium-line-height); font-weight:var(--typescale-body-medium-weight); font-family:var(--typescale-body-medium-font); } .actions { display:flex; flex-flow:row nowrap; align-self:stretch; align-items:center; justify-content:flex-end; gap:var(--size-2); } } } &[horizontal] { flex:1 0 auto; --container-flex-flow:row nowrap; --container-align-items:center; --container-justify-content:flex-start; padding:unset!important; width:100%; .content { display:flex; flex-flow:row nowrap; align-items:center; padding:var(--size-4); gap:var(--size-4); flex:1 0 0; .monogram { font-size:var(--typescale-title-medium-size); line-height:var(--typescale-title-medium-line-height); font-weight:var(--typescale-title-medium-weight); font-family:var(--typescale-title-medium-font); display:flex; width:var(--size-10); height:var(--size-10); flex-flow:column; justify-content:center; align-items:center; border-radius:var(--shape-corner-full); color:var(--color-surface); background-color:var(--color-primary); } .text { flex:1 0 0; display:flex; flex-flow:column nowrap; align-items:flex-start; width:max-content; gap:var(--size-1); color:var(--color-on-surface); .header { font-size:var(--typescale-title-medium-size); line-height:var(--typescale-title-medium-line-height); font-weight:var(--typescale-title-medium-weight); font-family:var(--typescale-title-medium-font); } .subhead { font-size:var(--typescale-body-medium-size); line-height:var(--typescale-body-medium-line-height); font-weight:var(--typescale-body-medium-weight); font-family:var(--typescale-body-medium-font); } } } .media { flex:0 0 auto; display:flex; justify-content:center; align-items:center; align-self:stretch; width:var(--size-20); height:var(--size-20); background:url(<path-to-image>) lightgray 50%/cover no-repeat; border-radius:var(--shape-corner-m-end); } }}.card{.card-image { display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; overflow: clip; margin: var(--size-5) var(--size-1) var(--size-5) var(--size-5); max-width: var(--size-16); max-height: var(--size-16); & img { aspect-ratio: 1 / 1; min-width: var(--size-16); min-height: var(--size-16); } } .card-content { flex: 1 1 0; display: flex; flex-flow: column nowrap; padding: var(--size-5); .card-meta, .card-title, .card-description { display: flex; flex-flow: row nowrap; hyphens: manual; } .card-meta { color: var(--color-on-surface-variant); * { font-family: var(--typescale-label-large); font-weight: var(--typescale-label-large-weight); font-size: var(--typescale-label-large-size); line-height: var(--typescale-label-large-line-height); } } .card-title { min-width: fit-content; padding-block: 0.5em; font-family: var(--typescale-headline-small); font-weight: var(--typescale-headline-small-weight); font-size: var(--typescale-headline-small-size); line-height: var(--typescale-headline-small-line-height); } .card-description { min-width: fit-content; padding-block: 0.5em; font-family: var(--typescale-body-large); font-weight: var(--typescale-body-large-weight); font-size: var(--typescale-body-large-size); line-height: var(--typescale-body-large-line-height); } }}@media screen and (min-width:600px){.card{--container-flex-flow:column nowrap;--container-align-items:stretch;.card-image { margin: unset; border-radius: inherit; max-width: 100%; max-height: var(--size-64); & img { aspect-ratio: 16 / 9; width: 100%; height: 100%; } }}}.set.carousel{--set-display:flex;--set-flex-flow:row nowrap;--set-align-items:flex-start;--set-gap:var(--size-2);--set-width:100%;--set-padding:var(--size-2) var(--size-4);--set-overflow:auto hidden;&.uncontained { .carousel.item { min-width: var(--size-32); align-self: stretch; &:last-of-type { flex: 0 1 auto; } } } &.full { max-height: var(--size-50); --set-flex-flow: column nowrap; --set-padding: unset; --set-overflow: hidden auto; .carousel.item { align-self: stretch; --container-width: 100%; --container-height: 100%; } }}.component.carousel{flex:1;min-width:var(--size-10);min-height:var(--size-50);--container-flex-flow:column nowrap;--container-shape:var(--shape-corner-xl);background:url(<path-to-image>)#a9a9a9 50%/cover no-repeat;background-blend-mode:multiply;color:#000;&.small { min-width: var(--size-10); max-width: var(--size-14); } &.medium { min-width: var(--size-30); } .carousel-item-text { display: flex; width: 100%; height: 100%; flex-flow: column nowrap; align-items: flex-start; justify-content: flex-end; gap: var(--size-1); padding: var(--size-4); color: var(--palette-white); background: linear-gradient(180deg, #FFF0 0%, #0008 100%); background-blend-mode: multiply; .label { font-family: var(--typescale-title-medium-font); font-size: var(--typescale-title-medium-size); font-weight: var(--typescale-title-medium-weight); line-height: var(--typescale-title-medium-line-height); } .supporting-text { font-family: var(--typescale-label-small-font); font-size: var(--typescale-label-small-size); font-weight: var(--typescale-label-small-weight); line-height: var(--typescale-label-small-line-height); } }}.dialog{--container-display:flex;--container-flex-flow:column nowrap;--container-justify-content:flex-start;--container-align-items:flex-start;--container-padding:var(--size-6);--container-elevation:var(--elevation3);--container-shape:var(--shape-corner-xl);--container-color:var(--color-surface-container-high);min-width:var(--size-70);max-width:var(--size-140);border-radius:var(--container-shape);&.full { min-width: unset; max-width: unset; --container-padding: initial; --container-shape: unset; --container-elevation: var(--elevation0); .header { display: flex; flex-flow: row nowrap; align-items: center; height: var(--size-14); width: 100%; margin-top: var(--size-6); padding: var(--size-6) var(--size-4); .headline { align-items: center; margin-bottom: unset; font-family: var(--typescale-title-large-font); font-size: var(--typescale-title-large-size); font-weight: var(--typescale-title-large-weight); line-height: var(--typescale-title-large-line-height); } .common { margin-left: auto; } } .supporting-text { color: var(--color-on-surface); padding: var(--size-6); } .divider { color: var(--color-surface-variant); } } .headline { display: flex; flex-flow: row nowrap; color: var(--color-on-surface); font-family: var(--typescale-headline-small-font); font-size: var(--typescale-headline-small-size); font-weight: var(--typescale-headline-small-weight); line-height: var(--typescale-headline-small-line-height); margin-bottom: var(--size-4); } .supporting-text { display: flex; flex-flow: column nowrap; color: var(--color-on-surface-variant); font-family: var(--typescale-body-medium-font); font-size: var(--typescale-body-medium-size); font-weight: var(--typescale-body-medium-weight); line-height: var(--typescale-body-medium-line-height); margin-bottom: var(--size-6); } .actions { display: flex; flex-flow: row nowrap; justify-content: flex-end; width: 100%; gap: var(--size-2); } &:has(> i) { .icon, .headline { width: 100%; justify-content: center; } .icon { margin-bottom: var(--size-4); } } .divider { color: var(--color-outline); }}.divider{--container-display:flex;--contaner-flex-flow:row nowrap;--container-height:1px;--container-width:100%;color:var(--color-outline-variant);&::before { content:""; background-color:currentColor; height:100%; width:100%; } &.mid { --container-padding:0 var(--size-4); } &.start { --container-padding:0 0 0 var(--size-4); } &.end { --container-padding:0 var(--size-4) 0 0; } &.vertical { --container-display:flex; --container-flex-flow:column nowrap; --container-width:1px; --container-height:100%; --container-align-items:center; color:var(--color-outline-variant); &.mid { --container-padding:var(--size-4) 0; } &.start { --container-padding:var(--size-4) 0 0 0; } &.end { --container-padding:0 0 var(--size-4) 0; } }}.component.list.item{--container-flex-flow:row nowrap;--container-padding:var(--size-2) var(--size-4);--container-gap:var(--size-4);--icon-color:var(--color-on-surface);--text-color:var(--color-on-surface);&:has(.component) { --state-color:none; } .label { margin-right:auto; } .checkbox { padding:unset; } .radio { padding:unset; height:var(--size-6); width:var(--size-6); } .monogram { display:flex; width:var(--size-10); height:var(--size-10); justify-content:center; align-items:center; background-color:var(--color-primary-container); border-radius:var(--shape-corner-full); } .content { flex:1 0 0; display:flex; flex-flow:row wrap; align-items:center; justify-content:center; align-self:stretch; .headline { width:100%; font-size:var(--typescale-body-large-size); line-height:var(--typescale-body-large-line-height); font-weight:var(--typescale-body-large-weight); font-family:var(--typescale-body-large-font); } .supporting-text { width:100%; color:var(--color-on-surface-variant); font-size:var(--typescale-body-medium-size); line-height:var(--typescale-body-medium-line-height); font-weight:var(--typescale-body-medium-weight); font-family:var(--typescale-body-medium-font); } } .trailing { margin-left:auto; } .trailing-supporting-text { color:var(--color-on-surface-variant); font-size:var(--typescale-label-small-size); line-height:var(--typescale-label-small-line-height); font-weight:var(--typescale-label-small-weight); font-family:var(--typescale-label-small-font); } .radio,.switch,.checkbox { display:flex; flex-flow:row nowrap; align-items:stretch; height:fit-content; width:fit-content; justify-content:center; } &.one { min-height:var(--size-14); &:has(.image) { --container-padding:var(--size-3) var(--size-4); min-height:var(--size-18); } &:has(.video) { --container-padding:var(--size-3) var(--size-4); min-height:var(--size-22); } .content { align-items:center; } } &.two { min-height:var(--size-18); .supporting-text { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-clamp:2; overflow:clip; } &:has(.image) { --container-padding:var(--size-3) var(--size-4); min-height:var(--size-18); } &:has(.video) { --container-padding:var(--size-3) var(--size-4); min-height:var(--size-22); } } &.three { --container-padding:var(--size-3) var(--size-4); min-height:var(--size-22); .supporting-text { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-clamp:2; overflow:clip; } .headline { align-self:flex-start; } .icon,.image,.video,.checkbox,.radio,.switch,.trailing-supporting-text { align-self:flex-start; margin-block-start:var(--size-3); margin-top:var(--size-3); } }}.image-thumbnail{width:var(--size-14);height:var(--size-14);border-radius:var(--shape-corner-none);background:url(<path-to-image>)#d3d3d3 50%/cover no-repeat}.video-thumbnail{width:114px;height:var(--size-16);border-radius:var(--shape-corner-none);background:url(<path-to-image>)#d3d3d3 50%/cover no-repeat}.sheet.bottom{--container-width:100%;--container-elevation:var(--elevation1);--container-shape:var(--shape-corner-xl-top);--container-elevation-hover:var(--container-elevation);--container-elevation-focus:var(--container-elevation);--container-elevation-press:var(--container-elevation);max-width:var(--size-160);margin-top:var(--size-18);margin-inline:var(--size-14);.drag-handle { height: var(--size-1); width: var(--size-8); margin: 22px auto; background-color: var(--color-on-surface-variant); cursor: grab; } .content { padding: var(--spacing-panes); }}@media screen and (min-width:640px){.sheet.bottom{margin-top:var(--size-14);margin-inline:var(--size-14)}}.sheet.side{--container-padding:0 0 var(--size-6) 0;--container-width:100%;max-width:var(--size-100);border-left:1px solid var(--color-outline);&.modal { --container-elevation: var(--elevation1); --container-shape: var(--shape-corner-l); border-left: unset; } .header, .content, .actions { width: 100%; } .header { display: flex; flex-flow: row nowrap; padding: var(--size-3) var(--size-3) var(--size-4) var(--size-1); align-items: center; justify-content: space-between; .headline { flex: 1 0 0; padding-left: var(--size-6); color: var(--color-on-surface-variant); font-size: var(--typescale-title-large-size); line-height: var(--typescale-title-large-line-height); font-weight: var(--typescale-title-large-weight); font-family: var(--typescale-title-large-font); } &:has(.back-icon) { .headline { padding-left: 0px; } } } .content { flex: 1 0 0; display: flex; flex-flow: column nowrap; align-items: flex-start; align-self: stretch; padding: var(--spacing-panes); } .actions { display: flex; flex-flow: row nowrap; align-items: center; align-self: stretch; padding: var(--size-4) var(--size-6) 0px var(--size-6); gap: var(--size-2); } .divider { color: var(--color-outline); }}.app-bar.bottom{--container-gap:0;--container-height:var(--size-20);--container-width:100%;--container-padding:var(--size-3) var(--size-4) var(--size-3) var(--size-1);--container-elevation:var(--elevation2);.start { gap: var(--size-1); display: flex; flex-flow: row nowrap; align-self: stretch; align-items: center; height: 100%; .icon { width: var(--size-4); } } .end { display: flex; flex-flow: row nowrap; margin-left: auto; }}.app-bar.top{--container-display:flex;--container-flex-flow:row nowrap;--container-justify-content:flex-start;--container-align-items:center;--container-color:var(--color-surface-container);.start, .end { display: flex; flex-flow: row nowrap; align-self: center; align-items: center; gap: var(--size-3); } .start > * { color: var(--color-on-surface); } .end > * { color: var(--color-on-surface-variant); } .end { margin-left: auto; } .headline { flex: 1 1 auto; display: flex; flex-flow: row nowrap; align-self: stretch; align-items: center; color: var(--color-on-surface); font-size: var(--typescale-title-large-size); line-height: var(--typescale-title-large-line-height); font-weight: var(--typescale-title-large-weight); font-family: var(--typescale-title-large-font); }}.app-bar.top.center{.headline { justify-content: center; }}.app-bar.top.small{--container-height:var(--size-16);--container-width:100%;--container-padding:var(--size-2) var(--size-1)}.app-bar.top.medium,.app-bar.top.large{--container-flex-flow:row wrap;--container-align-content:space-between;.headline { padding-inline: var(--size-3); }}.app-bar.top.medium{--container-height:var(--size-28);--container-width:100%;--container-padding:var(--size-5) var(--size-1) var(--size-6) var(--size-1);.headline { font-size: var(--typescale-headline-small-size); line-height: var(--typescale-headline-small-line-height); font-weight: var(--typescale-headline-small-weight); font-family: var(--typescale-headline-small-font); }}.app-bar.top.large{--container-height:var(--size-38);--container-width:100%;--container-padding:var(--size-5) var(--size-1) var(--size-7) var(--size-1);.headline { font-size: var(--typescale-headline-medium-size); line-height: var(--typescale-headline-medium-line-height); font-weight: var(--typescale-headline-medium-weight); font-family: var(--typescale-headline-medium-font); }}.component.navigation.bar{flex:1;--container-flex-flow:column nowrap;--container-gap:var(--size-1);--container-padding:22px 0 26px 0;--text-color:var(--color-on-surface-variant);--icon-color:var(--color-on-surface-variant);&:has(.label) { --container-padding:var(--size-3) 0 var(--size-4) 0; } .icon-container { display:flex; flex-flow:column nowrap; border-radius:var(--shape-corner-l); width:var(--size-16); height:var(--size-8); padding:var(--size-1) var(--size-5); justify-content:center; align-items:center; position:relative; .badge { position:absolute; top:var(--size-1); right:30%; &.large { top:2px; right:20%; max-width:fit-content; } } &::after { content:''; position:absolute; top:0; left:0; width:100%; height:100%; border-radius:inherit; background-color:var(--color-on-surface); opacity:0; pointer-events:none; } &:hover { &::after { opacity:var(--state-hover-opacity); background-size:50000%; animation:rippleHover var(--motion-duration-extra-long4) var(--motion-easing-emphasized) both; } } } .label { color:var(--color-on-surface-variant); font-size:var(--typescale-label-medium-size); line-height:var(--typescale-label-medium-line-height); font-weight:var(--typescale-label-medium-weight); font-family:var(--typescale-label-medium-font); } &.active { .icon-container { color:var(--color-on-secondary-container); background-color:var(--color-secondary-container); } .label { color:var(--color-on-surface); font-weight:var(--typeface-weight-bold); } }}@keyframes rippleHover{from{background-size:0%}to{background-size:50000%}}.component.navigation.drawer{--container-flex-flow:row nowrap;--container-gap:var(--size-3);--container-padding:var(--size-4) var(--size-6);--container-height:var(--size-14);--container-shape:var(--shape-corner-full);--container-width:var(--size-90);--text-color:var(--color-on-surface-variant);--icon-color:var(--color-on-surface-variant);&:has(i) { --container-padding:var(--size-4) var(--size-6) var(--size-4) var(--size-4); } .label { margin-right:auto; color:var(--color-on-surface-variant); font-size:var(--typescale-label-large-size); line-height:var(--typescale-label-large-line-height); font-weight:var(--typescale-label-large-weight); font-family:var(--typescale-label-large-font); } &.active { --container-color:var(--color-secondary-container); --text-color:var(--color-on-secondary-container); --icon-color:var(--color-on-secondary-container); .label { font-weight:var(--typeface-weight-bold); } }}.headline,.section-header{width:100%;color:var(--color-on-surface-variant);font-size:var(--typescale-title-small-size);line-height:var(--typescale-title-small-line-height);font-weight:var(--typescale-title-small-weight);font-family:var(--typescale-title-small-font)}.component.navigation.rail{flex:1;--container-flex-flow:column nowrap;--container-gap:var(--size-1);--container-padding:22px 0 26px 0;--text-color:var(--color-on-surface-variant);--icon-color:var(--color-on-surface-variant);&:has(.label) { --container-padding:var(--size-3) 0 var(--size-4) 0; } .icon-container { display:flex; flex-flow:column nowrap; border-radius:var(--shape-corner-full); width:var(--size-16); height:var(--size-16); padding:var(--size-1) var(--size-5); justify-content:center; align-items:center; position:relative; .badge { position:absolute; top:30%; right:30%; &.large { top:30%; right:20%; max-width:fit-content; } } &::after { content:''; position:absolute; inset:0; width:100%; height:100%; border-radius:inherit; background-color:var(--color-on-surface); opacity:0; pointer-events:none; } &:hover { &::after { opacity:var(--state-hover-opacity); background-size:50000%; animation:rippleHover var(--motion-duration-extra-long4) var(--motion-easing-emphasized) both; } } } &:has(.label) .icon-container { width:var(--size-16); height:var(--size-8); border-radius:var(--shape-corner-l); .badge { position:absolute; top:var(--size-1); right:30%; &.large { top:2px; right:20%; max-width:fit-content; } } } .label { color:var(--color-on-surface-variant); font-size:var(--typescale-label-medium-size); line-height:var(--typescale-label-medium-line-height); font-weight:var(--typescale-label-medium-weight); font-family:var(--typescale-label-medium-font); } &.active { .icon-container { color:var(--color-on-secondary-container); background-color:var(--color-secondary-container); } .label { color:var(--color-on-surface); font-weight:var(--typeface-weight-bold); } }}.search{&.bar { --container-display: flex; --container-flex-flow: row nowrap; --container-align-items: center; --container-justify-content: flex-start; --container-gap: var(--size-1); --container-elevation: var(--elevation3); --container-height: var(--size-14); --container-shape: var(--shape-corner-full); --container-padding: var(--size-1); --container-color: var(--color-surface-container-high); --icon-color: var(--color-on-surface); --container-elevation-hover: var(--container-elevation); --container-elevation-focus: var(--container-elevation); --container-elevation-press: var(--container-elevation); --container-elevation-disabled: var(--container-elevation); width: 100%; > .button.icon, > .icon { display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; width: var(--size-10); height: var(--size-10); font-size: var(--size-6); color: var(--color-on-surface); &:first-of-type { margin-inline-start: var(--size-3); } &:last-of-type { margin-inline-end: var(--size-3); } } & search, & input { flex: 1 1 auto; border-radius: unset; color: var(--color-on-surface); &::placeholder { color: var(--color-on-surface-variant); } } .avatar { display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; color: var(--color-surface); width: 30px; height: 30px; border-radius: var(--shape-corner-full); font-size: initial; background: url(<path-to-image>) lightgray 50% / cover no-repeat; } .icon { color: var(--color-on-surface-variant); } } &.view.modal { --container-display: flex; --container-flex-flow: column nowrap; --container-justify-content: initial; --container-align-items: flex-start; --container-gap: initial; --container-height: initial; --container-width: 100%; --container-padding: initial; --container-outline: initial; --container-elevation: initial; --container-shape: var(--shape-corner-xl); --container-color: var(--color-surface-container-high); min-width: var(--size-90); .header { display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; gap: var(--size-1); padding: var(--size-1); height: var(--size-14); align-self: stretch; border-radius: var(--shape-corner-xl-top); background-color: var(--color-surface-container-high); .button.icon { width: var(--size-12); height: var(--size-12); padding: var(--size-6); } & search, & input { flex: 1 0 0; color: var(--color-on-surface); } } .divider { color: var(--color-outline); } .set.lists { align-self: stretch; flex: 0; margin: unset; padding: unset; min-height: var(--size-16); width: 100%; .list-item { background-color: transparent; min-height: var(--size-16); &:last-of-type { border-radius: var(--shape-corner-xl-bottom); } } } } &.view.full { --container-display: flex; --container-flex-flow: column nowrap; --container-justify-content: initial; --container-align-items: flex-start; --container-gap: initial; --container-height: initial; --container-width: 100%; --container-padding: initial; --container-outline: initial; --container-elevation: initial; --container-shape: initial; --container-color: var(--color-surface-container-high); min-width: var(--size-90); .header { display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; gap: var(--size-1); padding: var(--size-1); height: var(--size-14); align-self: stretch; background-color: var(--color-surface-container-high); .button.icon { width: var(--size-12); height: var(--size-12); padding: var(--size-6); } & input { flex: 1 0 0; color: var(--color-on-surface); } } .divider { color: var(--color-outline); } .set.lists { align-self: stretch; flex: 0; margin: unset; padding: unset; min-height: var(--size-16); width: 100%; .list-item { background-color: transparent; min-height: var(--size-16); } } }}.tabs:not(.sub-tabs) .tab,.component.tab{flex:auto;cursor:pointer;--container-height:var(--size-12);--container-shape:var(--shape-corner-none);--container-display:flex;--container-flex-flow:column nowrap;--container-justify-content:center;--container-align-items:center;--container-color:var(--color-surface);--icon-color:var(--color-on-surface-variant);--text-color:var(--color-on-surface-variant);&.active { --icon-color: var(--color-primary); --text-color: var(--color-primary); font-weight: var(--typeface-weight-bold); } &::before { content: ''; display: block; position: absolute; bottom: 0; background-color: var(--color-primary); } &:not(.active)::before { display: none; } &.primary { &:has(.icon):not(:has(.label)) { --container-height: var(--size-12); } &:has(.icon + .label) { --container-height: var(--size-16); } &::before { z-index: 1; left: 40%; width: 20%; height: 3px; border-radius: var(--shape-corner-xl-top); } } &.secondary { --container-flex-flow: row nowrap; --container-gap: var(--size-2); &::before { z-index: 1; left: 0%; width: 100%; height: 2px; } }}.checkbox{--container-display:flex;--container-align-items:center;--container-gap:var(--size-2);--container-height:var(--size-10);--container-width:auto;--text-color:var(--color-on-surface-variant);--icon-color:var(--color-on-surface-variant);direction:ltr;white-space:nowrap;cursor:pointer;&:has(input:checked) { --icon-color:var(--color-primary); } &:has(span:empty) { --container-gap:0; } &.error-check { > input:checked + span::before { color:var(--color-error); } > span::before { color:var(--color-error); } > input:checked:indeterminate + span::before,> input:checked.indeterminate + span::before { color:var(--color-error); } } > input { max-width:100%; max-height:100%; opacity:0; &:checked + span::before { content:"check_box"; color:var(--color-primary); font-variation-settings:"FILL" 1; } &:hover + span::after { opacity:var(--state-hover-opacity); } &:focus + span::after { opacity:var(--state-focus-opacity); } &:active + span::after { opacity:var(--state-press-opacity); } &:disabled + span::before { opacity:var(--state-disabled-opacity); } &:checked:indeterminate + span::before,&:checked.indeterminate + span::before { content:"indeterminate_check_box"; color:var(--color-primary); font-variation-settings:"FILL" 1; } } > span { display:flex; align-items:center; color:var(--color-on-surface-variant); &::before { content:"check_box_outline_blank"; color:var(--color-on-surface-variant); font-variation-settings:"GRAD" 200; display:flex; align-items:center; font-family:var(--font-icon); font-size:var(--size-6); width:var(--size-6); height:var(--size-6); direction:ltr; font-feature-settings:"liga"; -webkit-font-smoothing:antialiased; position:absolute; inset:auto auto auto calc(-1 * var(--size-1)); border-radius:var(--shape-corner-full); user-select:none; box-shadow:0 0 0 0 var(--icon-color); transition:all var(--motion-duration-short3); } &::after { content:""; color:var(--color-on-surface-variant); display:flex; align-items:center; width:var(--size-10); height:var(--size-10); direction:ltr; position:absolute; inset:auto auto auto -12px; user-select:none; background-color:var(--icon-color); border-radius:var(--shape-corner-full); opacity:0; transition:all var(--motion-duration-short3); } }}.set.chips{--set-flex:1 1 auto;--set-display:flex;--set-flex-flow:row wrap;--set-align-items:center;--set-align-content:stretch;--set-justify-content:flex-start;--set-width:100%;--set-gap:var(--size-2);--set-overflow:auto}.chip{cursor:pointer;--container-display:flex;--container-flex-flow:row nowrap;--container-justify-content:flex-start;--container-align-items:center;--container-gap:var(--size-2);--container-height:var(--size-8);--container-width:initial;--container-padding:0 var(--size-4);--container-outline:initial;--container-elevation:initial;--container-shape:var(--shape-corner-s);--container-color:initial;--text-color:var(--color-on-surface);--icon-color:var(--color-primary);font-size:var(--typescale-label-large-size);line-height:var(--typescale-label-large-line-height);font-weight:var(--typescale-label-large-weight);font-family:var(--typescale-label-large-font);color:var(--text-color);.icon { color: var(--icon-color); font-size: 18px; padding: 0; margin: 0; } & input { display: none; } &:has(.avatar) { padding-left: var(--size-1); .avatar { height: var(--size-6); width: var(--size-6); } } &:has(.leading-icon, .favicon) { padding-left: var(--size-2); .favicon { max-width: var(--size-5); max-height: var(--size-5); border-radius: var(--shape-corner-full); overflow: clip; } } &:has(.trailing-icon) { padding-right: var(--size-2); } &.input { --container-padding: 0 var(--size-3); } &.outlined { --container-outline: 1px solid var(--color-outline); --container-outline-hover: 1px solid var(--color-outline); --container-outline-focus: 1px solid var(--color-outline); --container-outline-press: 1px solid var(--color-outline); } &.elevated { --container-color: var(--color-surface-container-low); --container-elevation: var(--elevation1); } &:has(input:checked) { --container-color: var(--color-secondary-container); color: var(--color-on-secondary-container); }}.component.menu{--container-flex-flow:row nowrap;--container-height:var(--size-12);--container-padding:var(--size-2) var(--size-3);--container-gap:var(--size-3);--text-color:var(--color-on-surface);--icon-color:var(--color-on-surface-variant)}.leading.icon{display:flex;justify-content:center;align-items:center;font-size:var(--size-6);width:var(--size-6);height:var(--size-6)}.leading.indent{display:flex;justify-content:center;align-items:center;width:var(--size-6);height:var(--size-6)}.trailing.icon{display:flex;justify-content:center;align-items:center;font-size:var(--size-6);width:var(--size-6);height:var(--size-6)}.trailing.keyboard{display:flex;justify-content:flex-end;align-items:center;padding-left:13px}.trailing.icon.selected{display:flex;justify-content:center;align-items:center;font-size:var(--size-6);width:var(--size-6);height:var(--size-6)}.trailing.keyboard.selected{display:flex;justify-content:flex-end;align-items:center;padding-left:13px}.picker.date{--container-padding:var(--size-4) var(--size-6);min-width:var(--size-82);max-height:var(--size-128);&.docked { --container-width: 328px; --container-height: 428px; } &.modal { --container-width: 328px; --container-height: 512px; } .header { display: flex; flex-flow: column nowrap; width: 100%; height: 100%; max-width: var(--size-82); max-height: var(--size-30); .supporting-text { color: var(--color-on-surface-variant); font-size: var(--typescale-label-large-size); font-weight: var(--typescale-label-large-weight); font-family: var(--typescale-label-large-family); line-height: var(--typescale-label-large-line-height); } .headline-container { flex: 1 1 auto; display: flex; flex-flow: row nowrap; align-items: center; margin-top: var(--size-9); .headline { color: var(--color-on-surface-variant); font-size: var(--typescale-headline-large-size); font-weight: var(--typescale-headline-large-weight); font-family: var(--typescale-headline-large-family); line-height: var(--typescale-headline-large-line-height); } .button.icon { margin-left: auto; font-size: var(--size-6); } } } .divider { margin-top: 10px; } .text-field-container { display: flex; flex-flow: row nowrap; gap: var(--size-4); align-self: stretch; .text-field { max-width: calc(50% - var(--size-2)); } } .text-field { margin-top: 10px; } .date-picker-actions { display: flex; flex-flow: row nowrap; align-items: center; margin-left: auto; gap: var(--size-4); min-height: var(--size-4); margin-top: var(--size-6); }}.year{--container-display:flex;--container-flex-flow:column nowrap;--container-justify-content:center;--container-align-items:center;--container-gap:10px;--container-height:var(--size-8);--container-width:var(--size-18);--container-padding:var(--size-4);--container-shape:var(--shape-corner-full);--text-color:var(--color-on-surface-variant);--icon-color:var(--color-on-surface-variant);--state-color:var(--color-on-surface-variant);&.selected { --container-color: var(--color-primary); --text-color: var(--color-on-primary); --icon-color: var(--color-on-primary); --state-color: var(--color-on-primary); }}.calendar-cell{--container-display:flex;--container-flex-flow:column nowrap;--container-justify-content:center;--container-align-items:center;--container-gap:10px;--container-height:var(--size-12);--container-width:var(--size-12);--container-shape:var(--shape-corner-full);--text-color:var(--color-on-surface);--icon-color:var(--color-on-surface);--state-color:var(--color-on-surface);&.today { --container-outline: 1px solid var(--color-primary); } &.selected { --container-color: var(--color-primary); --text-color: var(--color-on-primary); --icon-color: var(--color-on-primary); --state-color: var(--color-on-primary); } &.prev, &.next { --text-color: var(--color-on-surface-variant); --icon-color: var(--color-on-surface-variant); --state-color: var(--color-on-surface-variant); } &.range { --text-color: var(--color-on-secondary-container); --icon-color: var(--color-on-secondary-container); --state-color: var(--color-on-secondary-container); .highlight { position: absolute; z-index: -1; top: 0; background-color: var(--color-secondary-container); width: var(--size-12); height: var(--size-12); &.middle { left: 0; } &.start, &.end { width: var(--size-10); } &.start { left: calc(-1 * var(--size-4)); } &.end { right: calc(-1 * var(--size-4)); } } }}.picker.time{--container-padding:var(--size-6);&.dial { .supporting-text { display: none; } } &.vertical .time-picker-body { display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; height: 100%; width: 100%; } &.horizontal .time-picker-body { display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; gap: var(--size-13); height: 100%; width: 100%; .time-picker-dial-container { margin-top: unset; } .time-picker-container { flex-flow: column nowrap; gap: var(--size-4); .period-selector-container { flex-flow: row nowrap; margin-left: unset; margin-top: unset; .period-option { width: 108px; height: 38px; &:first-child { border-radius: var(--shape-corner-s-start); border-right: none; border-bottom: 1px solid var(--color-outline); } &:last-child { border-radius: var(--shape-corner-s-end); } } } } }}.picker.time.dial{--container-display:flex;--container-flex-flow:column nowrap;--container-justify-content:flex-start;--container-align-items:flex-start;--container-gap:initial;--container-height:auto;--container-width:auto;--container-padding:var(--size-6);--container-elevation:var(--elevation3);--container-shape:var(--shape-corner-xl);--container-color:var(--color-surface-container-high)}.time-picker-headline{color:var(--color-on-surface-variant);font-size:var(--typescale-label-medium-size);font-weight:var(--typescale-label-medium-weight);font-family:var(--typescale-label-medium-family);line-height:var(--typescale-label-medium-line-height);margin-bottom:var(--size-5)}.time-picker-container{display:flex;flex-flow:row nowrap;justify-content:flex-start;margin-bottom:var(--typescale-body-small-size)}.time-input-field-container{display:flex;flex-flow:row nowrap;.time-input-option { width: var(--size-24); height: var(--size-18); background-color: var(--color-surface-container-highest); border-radius: var(--shape-corner-s); display: flex; justify-content: center; align-items: center; cursor: pointer; position: relative; font-size: var(--typescale-display-medium-size); font-weight: var(--typescale-display-medium-weight); font-family: var(--typescale-display-medium-family); line-height: var(--typescale-display-medium-line-height); color: var(--color-on-surface); &.selected { background-color: var(--color-primary-container); color: var(--color-on-primary-container); } .supporting-text { position: absolute; top: 100%; left: 0%; font-size: var(--typescale-body-small-size); font-weight: var(--typescale-body-small-weight); font-family: var(--typescale-body-small-family); line-height: var(--typescale-body-small-line-height); color: var(--color-on-surface-variant); } } .time-input-separator { display: flex; justify-content: center; align-items: center; font-size: var(--typescale-display-large-size); font-weight: var(--typescale-display-large-weight); font-family: var(--typescale-display-large-family); line-height: var(--typescale-display-large-line-height); color: var(--color-on-surface); width: var(--size-6); }}.period-selector-container{display:flex;flex-flow:column nowrap;margin-left:var(--size-3);height:var(--size-20);&.horizontal { flex-flow: row nowrap; margin-left: unset; margin-top: unset; .period-option { width: var(--size-27); height: 38px; &:first-child { border-radius: var(--shape-corner-s-start); border-right: none; border-bottom: 1px solid var(--color-outline); } &:last-child { border-radius: var(--shape-corner-s-end); } } } .period-option { flex: 1 0 0; width: var(--size-13); height: var(--size-20); display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; cursor: pointer; border: 1px solid var(--color-outline); color: var(--color-on-surface); font-size: var(--typescale-title-medium-size); font-weight: var(--typescale-title-medium-weight); font-family: var(--typescale-title-medium-family); line-height: var(--typescale-title-medium-line-height); &:first-child { border-radius: var(--shape-corner-s-top); border-bottom: none; } &:last-child { border-radius: var(--shape-corner-s-bottom); } &.selected { background-color: var(--color-tertiary-container); color: var(--color-on-tertiary-container); } }}.time-picker-actions{display:flex;flex-flow:row nowrap;align-items:center;width:100%;margin-top:var(--size-6);.time-picker-start, .time-picker-end { display: flex; flex-flow: row nowrap; align-items: center; padding: unset; } .time-picker-end { margin-left: auto; }}.hour{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;width:var(--size-12);height:var(--size-12);border-radius:var(--shape-corner-full);&.selected { background-color: var(--color-primary); color: var(--color-on-primary); }}.clock-face{position:relative;width:var(--size-64);height:var(--size-64);border-radius:var(--shape-corner-full);background-color:var(--color-surface-container-highest);&::after { position:absolute; content:''; inset:49%; width:var(--size-2); height:var(--size-2); border-radius:var(--shape-corner-full); background-color:var(--color-primary); } .hour { position:absolute; } .hour:nth-child(1) { top:6.25%; right:21.09%; bottom:75%; left:60.16%; } .hour:nth-child(2) { top:21.09%; right:6.25%; bottom:60.16%; left:75%; } .hour:nth-child(3) { top:40.63%; right:0.78%; bottom:40.63%; left:80.47%; } .hour:nth-child(4) { top:60.16%; right:6.25%; bottom:21.09%; left:75%; } .hour:nth-child(5) { top:75%; right:21.09%; bottom:6.25%; left:60.16%; } .hour:nth-child(6) { top:80.47%; right:40.63%; bottom:0.78%; left:40.63%; } .hour:nth-child(7) { top:75%; right:60.16%; bottom:6.25%; left:21.09%; } .hour:nth-child(8) { top:60.16%; right:75%; bottom:21.09%; left:6.25%; } .hour:nth-child(9) { top:40.63%; right:80.47%; bottom:0.78%; left:0.78%; } .hour:nth-child(10) { top:21.09%; right:75%; bottom:60.16%; left:6.25%; } .hour:nth-child(11) { top:6.25%; right:60.16%; bottom:75%; left:21.09%; } .hour:nth-child(12) { top:0.78%; right:40.63%; bottom:80.47%; left:40.63%; } .hour:nth-child(13) { top:15.63%; right:27.34%; bottom:65.63%; left:53.91%; } .hour:nth-child(14) { top:25.78%; right:16.02%; bottom:55.47%; left:65.23%; } .hour:nth-child(15) { top:40.63%; right:12.11%; bottom:40.63%; left:69.14%; } .hour:nth-child(16) { top:55.47%; right:16.02%; bottom:25.78%; left:65.23%; } .hour:nth-child(17) { top:65.63%; right:27.34%; bottom:15.63%; left:53.91%; } .hour:nth-child(18) { top:69.53%; right:40.63%; bottom:11.72%; left:40.63%; } .hour:nth-child(19) { top:65.63%; right:53.91%; bottom:15.63%; left:27.34%; } .hour:nth-child(20) { top:55.47%; right:65.23%; bottom:25.78%; left:16.02%; } .hour:nth-child(21) { top:40.63%; right:69.14%; bottom:40.63%; left:12.11%; } .hour:nth-child(22) { top:25.78%; right:65.23%; bottom:55.47%; left:16.02%; } .hour:nth-child(23) { top:15.63%; right:53.91%; bottom:65.63%; left:27.34%; } .hour:nth-child(24) { top:11.72%; right:40.63%; bottom:69.53%; left:40.63%; }}.hour-line{position:relative;width:var(--size-64);height:var(--size-64);border-radius:var(--shape-corner-full)}.hour-line{&.twelve-hour span { position: absolute; width: 2px; height: var(--size-28); background-color: var(--color-primary); bottom: 50%; left: 50%; transform-origin: 50% 100%; } &.twenty-four-hour span { position: absolute; width: 2px; height: var(--size-24); background-color: var(--color-primary); bottom: 50%; left: 50%; transform-origin: 50% 100%; } & span:nth-child(1) { transform: translateX(-50%) rotate(0deg); } & span:nth-child(2) { transform: translateX(-50%) rotate(30deg); } & span:nth-child(3) { transform: translateX(-50%) rotate(60deg); } & span:nth-child(4) { transform: translateX(-50%) rotate(90deg); } & span:nth-child(5) { transform: translateX(-50%) rotate(120deg); } & span:nth-child(6) { transform: translateX(-50%) rotate(150deg); } & span:nth-child(7) { transform: translateX(-50%) rotate(180deg); } & span:nth-child(8) { transform: translateX(-50%) rotate(210deg); } & span:nth-child(9) { transform: translateX(-50%) rotate(240deg); } & span:nth-child(10) { transform: translateX(-50%) rotate(270deg); } & span:nth-child(11) { transform: translateX(-50%) rotate(300deg); } & span:nth-child(12) { transform: translateX(-50%) rotate(330deg); }}.radio{--container-display:flex;--container-align-items:center;--container-gap:var(--size-2);--container-height:var(--size-10);--text-color:var(--color-on-surface-variant);--icon-color:var(--color-on-surface-variant);direction:ltr;white-space:nowrap;cursor:pointer;&:has(input:checked) { --icon-color:var(--color-primary); } &:has(span:empty) { --container-gap:0; } > input { max-width:100%; max-height:100%; opacity:0; &:checked + span::before { content:"radio_button_checked"; color:var(--color-primary); } &:hover + span::after { opacity:var(--state-hover-opacity); } &:focus + span::after { opacity:var(--state-focus-opacity); } &:active + span::after { opacity:var(--state-press-opacity); } } > span { display:flex; align-items:center; color:var(--color-on-surface-variant); &::before { content:"radio_button_unchecked"; color:var(--color-on-surface-variant); display:flex; align-items:center; font-family:var(--font-icon); font-size:var(--size-5); width:var(--size-5); height:var(--size-5); direction:ltr; font-feature-settings:"liga"; -webkit-font-smoothing:antialiased; position:absolute; inset:auto auto auto calc(-1 * var(--size-1)); border-radius:var(--shape-corner-full); user-select:none; box-shadow:0 0 0 0 var(--icon-color); transition:all var(--motion-duration-short3); } &::after { content:""; color:var(--color-on-surface-variant); display:flex; align-items:center; width:var(--size-10); height:var(--size-10); direction:ltr; position:absolute; inset:auto auto auto -14px; border-radius:var(--shape-corner-full); user-select:none; background-color:var(--icon-color); opacity:0; transition:all var(--motion-duration-short3); } }}.slider{--container-width:100%;--container-height:var(--size-11);--container-display:flex;--container-flex-flow:row nowrap;--container-align-items:stretch;--container-justify-content:center;--container-shape:var(--shape-corner-xl);--container-color:var(--color-surface-container-lowest,);.tooltip { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; position: absolute; inset: -70% 0 0 0; transform: translateX(-50%); width: fit-content; height: fit-content; padding: var(--size-1) var(--size-2); background-color: var(--color-inverse-surface); color: var(--color-inverse-on-surface); border-radius: var(--shape-corner-xl); opacity: 0; transition: opacity 0.2s; } & input { height: var(--size-11); width: 100%; appearance: none; background: transparent; cursor: grab; overflow: clip; background: transparent; outline: none; -webkit-appearance: none; -moz-appearance: none; &:active { cursor: grabbing; &::-webkit-slider-thumb, &::-moz-range-thumb { width: 2px; } } &::-webkit-slider-runnable-track { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: var(--size-4); border-radius: var(--shape-corner-none); background-color: var(--color-secondary-container); } &::-webkit-slider-thumb { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; border-radius: 0%; padding: var(--size-3); width: var(--size-1); height: var(--size-11); background-color: var(--color-primary); box-shadow: 0px -22px 0px var(--size-1) inset var(--container-color); } &::-moz-range-progress { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; flex: 1 0 0; height: var(--size-4); border-radius: var(--shape-corner-l-start); background-color: var(--color-primary); } &::-moz-range-thumb { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; border-radius: 0%; padding: var(--size-3); width: var(--size-1); height: var(--size-11); background-color: var(--color-primary); box-shadow: 0px 0px 0px var(--size-3) inset var(--container-color); } &::-moz-range-track { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; flex: 1 0 0; height: var(--size-4); border-radius: var(--shape-corner-l); background-color: var(--color-secondary-container); } } .tracking-dot { position: absolute; right: 6px; top: var(--size-5); width: var(--size-1); height: var(--size-1); margin-inline: 6px; border-radius: 50%; background-color: var(--color-primary); } &.range { .left { &::-moz-range-progress { background-color: var(--color-secondary-container); } &::-moz-range-track { background-color: var(--color-primary); border-radius: var(--shape-corner-l-start); } } .right { &::-moz-range-progress { border-radius: var(--shape-corner-l-end); } } }}datalist{position:absolute;top:var(--size-5);display:flex;justify-content:space-between;width:100%;& option { min-width: var(--size-1); min-height: var(--size-1); border-radius: 50%; padding: 2px; margin-inline: 6px; background-color: var(--color-surface-container); &:first-child { background-color: var(--color-secondary-container); } &:last-child { background-color: var(--color-primary); } }}.indicator.value{display:flex;width:var(--size-12);padding:var(--size-3)var(--size-4);justify-content:center;align-items:center;border-radius:var(--shape-corner-full);background-color:var(--color-inverse-surface);color:var(--color-inverse-on-surface);font-family:var(--typescale-label-large-font);font-size:var(--typescale-label-large-size);font-weight:var(--typescale-label-large-weight);line-height:var(--typescale-label-large-line-height)}.track.active{display:flex;flex-flow:column nowrap;justify-content:center;align-items:center;width:var(--size-100);height:var(--size-4);background-color:var(--color-primary);border-radius:var(--shape-corner-l-start)}.handle{display:flex;width:var(--size-1);height:var(--size-11);border-radius:var(--shape-corner-full);background-color:var(--color-primary)}.track.dot{display:flex;width:var(--size-1);height:var(--size-1);border-radius:var(--shape-corner-full);background-color:var(--color-primary)}.track.inactive.right{position:relative;background-color:var(--color-secondary-container);width:var(--size-100);height:var(--size-4);border-radius:var(--shape-corner-l-end);.track.dot { position: absolute; right: var(--size-1); bottom: 6px; }}.track.inactive.left{position:relative;background-color:var(--color-secondary-container);width:var(--size-100);height:var(--size-4);border-radius:var(--shape-corner-l-start);.track.dot { position: absolute; left: var(--size-1); bottom: 6px; }}.discrete-dots{display:flex;justify-content:space-between;width:var(--size-100);align-items:flex-start;padding:0 var(--size-1);.track.dot:nth-child(1), .track.dot:nth-child(2), .track.dot:nth-child(3), .track.dot:nth-child(4), .track.dot:nth-child(5) { background-color: var(--color-secondary-container); }}.switch{--container-display:flex;--container-flex-flow:row nowrap;--container-align-items:center;--container-justify-content:flex-start;direction:ltr;--container-height:var(--size-8);--container-width:var(--size-13);cursor:pointer;&:has(span:empty) { --container-gap:0; } > input { width:100%; height:100%; opacity:0; &:hover + span::after { opacity:var(--state-hover-opacity); } &:focus + span::after { opacity:var(--state-focus-opacity); } &:active + span::after { opacity:var(--state-press-opacity); } &:checked + span::before { content:""; left:var(--size-6); right:var(--size-1); color:var(--color-on-primary-container); background-color:var(--color-on-primary); width:var(--size-6); height:var(--size-6); } &:checked + span::after { background-color:var(--color-primary); left:var(--size-4); right:var(--size-1); } &:checked + span { border:none; background-color:var(--color-primary); } &:active { + span::before { width:var(--size-7); height:var(--size-7); transform:translateX(calc(-1 * var(--size-1))); } &:checked + span::before { transform:translateX(0px) scale(1.2); } } } > span { position:relative; display:flex; align-items:center; justify-content:center; color:var(--color-on-surface); min-height:var(--size-8); min-width:var(--size-13); border-radius:var(--shape-corner-full); background-color:var(--color-surface-container-highest); border:2px solid var(--color-outline); &::before { content:""; position:absolute; left:var(--size-1); right:var(--size-6); z-index:1; display:flex; align-items:center; justify-content:center; border-radius:var(--shape-corner-full); background-color:var(--color-outline); color:var(--color-on-surface-variant); transition:all var(--motion-duration-short4); font-family:var(--font-icon); font-feature-settings:"liga"; font-size:var(--size-4); width:var(--size-4); height:var(--size-4); user-select:none; } &::after { content:""; position:absolute; left:-9px; right:var(--size-13); z-index:2; display:flex; align-items:center; justify-content:center; border-radius:var(--shape-corner-full); background-color:var(--color-on-surface-variant); transition:all var(--motion-duration-medium1); width:var(--size-10); height:var(--size-10); user-select:none; opacity:0; } } &.both > span::before { content:"close"; width:var(--size-6); height:var(--size-6); left:2px; } &.both > input:checked + span::before { content:"check"; } &.select > input:checked + span::before { content:"check"; }}.text-field{--container-display:flex;--container-flex-flow:row nowrap;--container-align-items:center;--container-gap:var(--size-4);min-height:var(--size-14);--container-width:100%;--container-padding:var(--size-2) var(--size-4);& input { flex: 1 1 auto; outline: none; background-color: transparent; z-index: 8; color: transparent; &::placeholder { color: var(--color-on-surface-variant); } } & input, & textarea { caret-color: var(--color-primary); } & label { position: absolute; display: flex; align-items: center; transition: all 0.2s; white-space: nowrap; left: 0; color: var(--color-on-surface-variant); padding-left: var(--size-4); background-color: transparent; z-index: 1; } &:has(.leading-icon) { & label { padding-inline-start: var(--size-13); } } &.filled { --container-shape: var(--shape-corner-xs-top); --container-color: var(--color-surface-container-highest); --text-color: var(--color-on-surface); --icon-color: var(--color-on-surface); & hr { position: absolute; bottom: 0; left: 0; } &:hover { & hr { height: 1px; color: var(--color-on-surface); } } &:focus, &:focus-within, &:focus-visible { & hr { height: 3px; color: var(--color-primary); } & input { flex: 1 1 auto; color: var(--color-on-surface); &::placeholder { color: transparent; } } &:has(label) { & input { padding-block-start: var(--size-2); padding-top: var(--size-2); } & label { top: 0px; color: var(--color-primary); font-family: var(--typescale-body-small-font); font-size: var(--typescale-body-small-size); font-weight: var(--typescale-body-small-weight); line-height: var(--typescale-body-small-line-height); } } } & textarea:not(:placeholder-shown), & input:not(:placeholder-shown) { flex: 1 1 auto; color: var(--color-on-surface); &:has(+ label) { padding-top: var(--size-2); } + label { top: 0px; color: var(--color-primary); font-family: var(--typescale-body-small-font); font-size: var(--typescale-body-small-size); font-weight: var(--typescale-body-small-weight); line-height: var(--typescale-body-small-line-height); } } } &.outlined { --container-shape: var(--shape-corner-xs); --container-color: inherit; --text-color: var(--color-on-surface-variant); --icon-color: var(--color-on-surface-variant); --container-outline: 1px solid var(--color-outline); --container-outline-hover: 1px solid var(--color-on-surface); --container-outline-focus: 2px solid var(--color-primary); --disabled-outline: color-mix(in lch, 12% var(--color-on-surface), transparent); --container-outline-disabled: 1px solid var(--disabled-outline); &:focus, &:focus-within, &:focus-visible { --container-outline: var(--container-outline-focus); & input { flex: 1 1 auto; color: var(--color-on-surface); &::placeholder { color: transparent; } } &:has(label) { & input { flex: 1 1 auto; padding-block-start: var(--size-2); color: var(--color-on-surface); &::placeholder { color: transparent; } } & label { top: calc(-1 * var(--size-2)); color: var(--color-primary); margin-inline: var(--size-2); padding-inline: var(--size-1); background-color: var(--color-surface-container-lowest); &::before, &::after { content: ""; position: absolute; top: calc(-1 * var(--size-2)); width: 100%; height: 2px; background-color: var(--color-surface-container-lowest); } &::before { left: 0; } &::after { right: 0; } } } } & textarea:not(:placeholder-shown), & input:not(:placeholder-shown) { flex: 1 1 auto; color: var(--color-on-surface); &:has(+ label) { padding-top: var(--size-1); } + label { top: calc(-1 * var(--size-2)); margin-inline: var(--size-2); padding-inline: var(--size-1); background-color: inherit; color: var(--color-primary); } } } .suffix-content { display: none; } &.suffix { &:focus, &:focus-within, &:focus-visible { .suffix-content { display: inline; } } } .supporting-text { position: absolute; top: 100%; left: 0; display: flex; height: var(--size-5); padding: var(--size-1) var(--size-4) 0px var(--size-4); align-items: flex-start; gap: 10px; font-size: var(--typescale-body-small-size); line-height: var(--typescale-body-small-line-height); font-weight: var(--typescale-body-small-weight); font-family: var(--typescale-body-small-font); color: var(--color-on-surface-variant); } &:has(textarea) { padding: var(--size-4); height: auto; color: transparent; & textarea { flex: 1 1 auto; resize: vertical; min-height: var(--size-14); z-index: 8; &::placeholder { color: transparent; } } & label { align-items: flex-start; top: var(--size-4); } &:focus, &:focus-within, &:focus-visible { & textarea { padding-block-start: var(--size-2); color: var(--color-on-surface); &::placeholder { color: var(--color-on-surface); } } } } &:has(.trailing-icon) { padding-right: var(--size-3); } &:has(.leading-icon) { padding-left: var(--size-3); } .icon { color: var(--color-on-surface-variant); &.trailing-icon { margin-left: auto; } }}.component{position:relative;z-index:0; *{ z-index: 2; }}.component:not( .divider,.tab )::before{content:"";position:absolute;inset:0;z-index:-1;flex:initial;background:var(--container-color);box-shadow:var(--container-elevation);border:var(--container-outline);border-radius:var(--container-shape)}.component:not( .app-bar,.badge,.divider,.picker,.progress,.search.view,.sheet,.tooltip )::after{--state-color:var(--icon-color, var(--text-color));content:"";position:absolute;inset:0;z-index:1;background-image:radial-gradient(circle,var(--state-color) 1%,transparent 1%);background-position:50%;border-radius:var(--container-shape);opacity:0}.component{&:focus-visible { animation-name:outward-grow,outward-shrink; animation-delay:0s,calc(var(--motion-duration-long2) * 0.25); animation-duration:calc(var(--motion-duration-long2) * 0.25),calc(var(--motion-duration-long2) * 0.75); animation-timing-function:var(--motion-easing-emphasized); outline:3px solid var(--color-secondary); outline-offset:-2px; border-radius:var(--container-shape); } &::-moz-focus-inner { outline:none; }}a:not(.component):focus-visible{text-decoration:underline!important}@keyframes outward-grow{from{outline-width:0}to{outline-width:var(--size-2)}}@keyframes outward-shrink{from{outline-width:var(--size-2)}}.component:is( .button.common,.button.icon,.button.segmented,.card,.carousel.item,.checkbox,.chip,.picker.date.docked,.list.item,.menu.item,.radio,.slider,.switch,.text-field,.year,.calendar-cell.day,.calendar-cell.today ){&.disabled, &:disabled, &:has([disabled]) { pointer-events: none; cursor: not-allowed; opacity: var(--state-disabled-opacity); }}.component:is( .button,.card,.carousel.item,.chip,.picker.date.docked,.picker.date.modal,.dialog,.list.item,.menu.item,.drawer.item,.slider .search.bar .search.view,.switch,.snackbar,.tab,.picker.time,.text-field,.tooltip.rich,.year,.calendar-cell.day,.calendar-cell.today,.calendar-cell.selected,.calendar-cell.range ):not(:has( .button,.radio,.checkbox,.switch) ):not(:disabled):focus{&::before { border:var(--container-outline-focus); box-shadow:var(--container-elevation-focus); } &::after { opacity:var(--state-focus-opacity); background-size:50000%; }}.component:is( .button,.card,.carousel.item,.chip,.picker.date.docked,.picker.date.modal,.dialog,.list.item,.menu.item,.drawer.item,.slider .search.bar .search.view,.switch,.snackbar,.tab,.picker.time,.text-field,.tooltip.rich,.year,.calendar-cell.day,.calendar-cell.today,.calendar-cell.selected,.calendar-cell.range ):not(:has( .button,.radio,.checkbox,.switch) ):not(:disabled):hover{&::before { border:var(--container-outline-hover); box-shadow:var(--container-elevation-hover); } &::after { opacity:var(--state-hover-opacity); background-size:50000%; animation:rippleHover var(--motion-duration-extra-long4) var(--motion-easing-emphasized) both; }}@keyframes rippleHover{from{background-size:0%}to{background-size:50000%}}.component:is( .button,.card,.carousel.item,.chip,.picker.date.docked,.picker.date.modal,.dialog,.list.item,.menu.item,.drawer.item,.slider .search.bar .search.view,.switch,.snackbar,.tab,.picker.time,.tooltip.rich,.year,.calendar-cell.day,.calendar-cell.today,.calendar-cell.selected,.calendar-cell.range ):not(:has( .button,.checkbox,.radio,.switch) ):not(:disabled):active{&::before { border:var(--container-outline-press); box-shadow:var(--container-elevation-press); } &::after { opacity:var(--state-press-opacity); background-size:50000%; animation:ripplePress var(--motion-duration-short2) var(--motion-easing-emphasized) both; }}@keyframes ripplePress{from{background-size:50000%}to{background-size:0%}}