@layer m3-components{.m3-chip{--_h:var(--md-sys-size-chip);--_px:16px;--_icon:18px;--_av:calc(-8px + var(--_h));--_r-rest:var(--md-sys-shape-corner-small);--_r-sel:calc(var(--_h) / 2);--_container:transparent;--_label:var(--md-sys-color-on-surface-variant);--_icon-c:var(--md-sys-color-primary);--_outline:var(--md-sys-color-outline-variant);--_lw:0px;--_lms:0px;--_lme:0px;vertical-align:middle;max-width:100%;height:var(--_h);border:var(--md-sys-border-thin) solid var(--_outline);border-radius:var(--_r-rest);background:var(--_container);color:var(--_label);--m3-icon-size:var(--_icon);font-family:var(--md-ref-typeface-brand);letter-spacing:.1px;white-space:nowrap;text-align:start;isolation:isolate;-webkit-tap-highlight-color:transparent;transition:border-radius var(--md-sys-motion-t-small),background-color var(--md-sys-motion-t-fx-small),color var(--md-sys-motion-t-fx-small),border-color var(--md-sys-motion-t-fx-small),box-shadow var(--md-sys-motion-t-fx-small);flex:none;align-items:center;margin:0;padding:0;font-size:14px;font-weight:500;line-height:20px;display:inline-flex;position:relative}.m3-chip[data-size=m]{--_h:var(--md-sys-size-btn-s)}.m3-chip[data-lead]{--_lw:var(--_icon);--_lms:calc(8px - var(--_px) - var(--md-sys-border-thin));--_lme:8px}.m3-chip[data-avatar]{--_lw:var(--_av);--_lms:calc(4px - var(--_px) - var(--md-sys-border-thin));--_lme:8px}.m3-chip:before{content:"";border-radius:inherit;z-index:-1;pointer-events:none;background:var(--_label);opacity:0;transition:opacity var(--md-sys-motion-t-state);position:absolute;inset:0}@media (hover:hover){.m3-chip:hover:before{opacity:var(--md-sys-state-hover-opacity);transition-duration:calc(var(--md-sys-motion-dur-instant) / 2)}}.m3-chip:is(:focus-visible,:has(.m3-chip__main:focus-visible)):before{opacity:var(--md-sys-state-focus-opacity)}.m3-chip:is(button:active,:has(.m3-chip__main:active)):before{opacity:var(--md-sys-state-pressed-opacity);transition-duration:0s}span.m3-chip:has(.m3-chip__main:focus-visible){outline:var(--md-sys-focus-width) solid var(--md-sys-focus-color);outline-offset:var(--md-sys-focus-offset)}.m3-chip__main{padding-inline:var(--_px);cursor:pointer}span.m3-chip>.m3-chip__main{border-radius:inherit;min-width:0;height:100%;color:inherit;font:inherit;letter-spacing:inherit;background:0 0;border:0;outline:none;align-items:center;margin:0;padding-block:0;display:inline-flex;position:relative}.m3-chip[data-dropdown],.m3-chip[data-removable]>.m3-chip__main{padding-inline-end:8px}.m3-chip__main:after{content:"";inset:min(0px,-.5 * (var(--md-sys-size-touch) - var(--_h))) 0;position:absolute}.m3-chip__label{text-overflow:ellipsis;overflow:hidden}.m3-chip__arrow{--m3-icon-size:calc(4px + var(--_icon));color:var(--_icon-c);flex:none;margin-inline-start:2px}.m3-chip__lead{width:var(--_lw);height:var(--_icon);color:var(--_icon-c);transition:width var(--md-sys-motion-t-small),margin-inline var(--md-sys-motion-t-small);flex:none;place-items:center;margin-inline-start:var(--_lms);margin-inline-end:var(--_lme);display:inline-grid;overflow:hidden}.m3-chip__lead .m3-icon{grid-area:1/1}.m3-chip__avatar{width:var(--_av);background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);letter-spacing:0;border-radius:50%;grid-area:1/1;place-items:center;font-size:11px;font-weight:500;line-height:1;display:grid;overflow:hidden}.m3-chip[data-avatar] .m3-chip__lead,.m3-chip__avatar{height:var(--_av)}.m3-chip__remove{width:24px;height:24px;color:var(--_label);cursor:pointer;--m3-icon-size:var(--_icon);background:0 0;border:0;border-radius:50%;flex:none;place-items:center;margin:0 4px 0 0;padding:0;display:grid;position:relative}.m3-chip__remove:before{content:"";border-radius:inherit;opacity:0;transition:opacity var(--md-sys-motion-t-state);background:currentColor;position:absolute;inset:0}@media (hover:hover){.m3-chip__remove:hover:before{opacity:var(--md-sys-state-hover-opacity)}}.m3-chip__remove:focus-visible:before{opacity:var(--md-sys-state-focus-opacity)}.m3-chip__remove:active:before{opacity:var(--md-sys-state-pressed-opacity);transition-duration:0s}.m3-chip__remove .m3-icon{position:relative}.m3-chip__remove:after{content:"";position:absolute;inset:-4px}@media (pointer:coarse){.m3-chip__remove:after{inset:-10px -10px -10px -6px}}.m3-chip[data-kind=assist]{--_label:var(--md-sys-color-on-surface)}.m3-chip[data-kind=filter],.m3-chip[data-kind=input],.m3-chip[data-kind=suggestion]{--_label:var(--md-sys-color-on-surface-variant)}.m3-chip[data-kind=input][data-avatar]{--_r-rest:calc(var(--_h) / 2)}.m3-chip[data-elevated]{--_container:var(--md-sys-color-surface-container-low);--_outline:transparent;box-shadow:var(--md-sys-elevation-1)}@media (hover:hover){.m3-chip[data-elevated]:hover{box-shadow:var(--md-sys-elevation-2)}}.m3-chip[data-selected]{--_container:var(--md-sys-color-secondary-container);--_label:var(--md-sys-color-on-secondary-container);--_icon-c:var(--md-sys-color-on-secondary-container);--_outline:transparent;border-radius:var(--_r-sel)}.m3-chip[data-selected][data-elevated]{box-shadow:var(--md-sys-elevation-1)}.m3-chip:is(button:active:not(:disabled),:has(.m3-chip__main:active:not(:disabled))){border-radius:var(--md-sys-shape-corner-extra-small);transition-duration:var(--md-sys-motion-dur-instant),var(--md-sys-motion-fx-small),var(--md-sys-motion-fx-small),var(--md-sys-motion-fx-small),var(--md-sys-motion-fx-small)}.m3-chip[data-disabled]{--_label:color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);--_icon-c:var(--_label);--_outline:color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);box-shadow:none}.m3-chip[data-disabled][data-elevated],.m3-chip[data-disabled][data-selected]{--_container:color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)}.m3-chip[data-disabled][data-selected]{--_outline:transparent}.m3-chip[data-disabled],.m3-chip[data-disabled] .m3-chip__main,.m3-chip[data-disabled] .m3-chip__remove{cursor:not-allowed}.m3-chip[data-disabled]:before{opacity:0}.m3-chip[data-disabled] .m3-chip__avatar{opacity:var(--md-sys-state-disabled-content)}@media (forced-colors:active){.m3-chip[data-selected]{border-color:highlight}.m3-chip[data-disabled]{color:graytext;border-color:graytext}}}@layer m3-density{:root[data-density=compact] .m3-chip{--_px:12px;--_icon:16px;font-size:13px;line-height:18px}:root[data-density=compact] .m3-chip__avatar{font-size:10px}}