@layer components{.md3-chip-root{--_container-height:32px;--_leading-space:16px;--_trailing-space:16px;--_icon-label-space:8px;--_icon-size:18px;--_leading-icon-color:currentColor;--_pressed-state-layer-color:currentColor;--_radius:var(--md-sys-shape-corner-small);border:1px solid var(--md-sys-color-outline);transition:box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), padding var(--md-sys-motion-duration-medium3) var(--md-sys-motion-easing-fast-spatial);background:0 0;justify-content:flex-start}.md3-chip-root[data-has-icon]{--_leading-space:8px}.md3-chip-root[data-variant=input]:after{content:none}.md3-chip-root:active .md3-chip-stateLayer{color:var(--_pressed-state-layer-color)}.md3-chip-root[data-variant=input]:hover .md3-chip-stateLayer:before{opacity:0}.md3-chip-root[data-variant=input]:has(>.md3-chip-action:hover) .md3-chip-stateLayer:before{opacity:var(--md-sys-state-hover-state-layer-opacity)}.md3-chip-root[data-variant=input]:has(>.md3-chip-action:focus-visible) .md3-chip-stateLayer:before{opacity:var(--md-sys-state-focus-state-layer-opacity)}.md3-chip-root[data-variant=input]:has(>.md3-chip-action:focus-visible){outline:3px solid var(--md-sys-color-secondary);outline-offset:2px}.md3-chip-icon{color:var(--_leading-icon-color);flex-shrink:0}.md3-chip-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.md3-chip-root[data-elevated]{background:var(--md-sys-color-surface-container-low);box-shadow:var(--md-sys-elevation-level1);border:none}.md3-chip-root[data-elevated]:hover:not(:disabled,[data-disabled]){box-shadow:var(--md-sys-elevation-level2)}.md3-chip-root[data-elevated]:active{box-shadow:var(--md-sys-elevation-level1)}.md3-chip-root[data-variant=assist]{color:var(--md-sys-color-on-surface);--_leading-icon-color:var(--md-sys-color-primary)}.md3-chip-root[data-variant=suggestion]{color:var(--md-sys-color-on-surface-variant);--_leading-icon-color:var(--md-sys-color-primary)}.md3-chip-root[data-variant=filter]{color:var(--md-sys-color-on-surface-variant);--_leading-icon-color:var(--md-sys-color-primary);--_pressed-state-layer-color:var(--md-sys-color-on-secondary-container)}.md3-chip-checkmark,.md3-chip-leading{transition:inline-size var(--md-sys-motion-duration-medium3) var(--md-sys-motion-easing-fast-spatial), margin-inline-end var(--md-sys-motion-duration-medium3) var(--md-sys-motion-easing-fast-spatial), opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);overflow:hidden}.md3-chip-checkmark>*,.md3-chip-leading>*{inline-size:var(--_icon-size);block-size:var(--_icon-size);flex:none}.md3-chip-checkmark,.md3-chip-root[data-pressed] .md3-chip-leading{inline-size:0;opacity:0;margin-inline-end:calc(-1 * var(--_icon-label-space))}.md3-chip-root[data-pressed] .md3-chip-checkmark{inline-size:var(--_icon-size);opacity:1;margin-inline-end:0}.md3-chip-root[data-variant=filter]:where([data-pressed]){--_leading-space:8px;background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);--_leading-icon-color:var(--md-sys-color-on-secondary-container);--_pressed-state-layer-color:var(--md-sys-color-on-surface-variant);border-color:#0000}.md3-chip-root[data-variant=filter]:where([data-pressed]):not([data-elevated]):hover{box-shadow:var(--md-sys-elevation-level1)}.md3-chip-root[data-variant=filter]:where([data-pressed]):not([data-elevated]):active{box-shadow:none}.md3-chip-root[data-variant=input]{color:var(--md-sys-color-on-surface-variant);--_leading-icon-color:var(--md-sys-color-on-surface-variant);gap:0;padding-inline:0}.md3-chip-root[data-variant=input]:where([data-selected]){background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);--_leading-icon-color:var(--md-sys-color-primary);border-color:#0000}.md3-chip-root[data-variant=input][data-avatar]{--_leading-space:4px;--_radius:var(--md3-shape-round)}.md3-chip-root[data-variant=input][data-removable]{--_trailing-space:0px}.md3-chip-action{box-sizing:border-box;align-items:center;gap:var(--_icon-label-space);min-width:0;height:100%;padding-block:0;padding-inline:var(--_leading-space) var(--_trailing-space);border-radius:inherit;cursor:pointer;color:inherit;font:inherit;letter-spacing:inherit;background:0 0;border:none;outline:none;display:inline-flex;position:relative}.md3-chip-action:after{content:"";width:max(48px,100%);height:48px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.md3-chip-avatar{border-radius:var(--md-sys-shape-corner-full);flex-shrink:0;block-size:24px;inline-size:24px;display:inline-flex;overflow:hidden}.md3-chip-avatar>*{object-fit:cover;block-size:100%;inline-size:100%}.md3-chip-trailing{box-sizing:border-box;isolation:isolate;inline-size:calc(4 / 3 * var(--_icon-size));block-size:calc(4 / 3 * var(--_icon-size));margin-inline:calc(var(--_icon-label-space) - 3px) 5px;border-radius:var(--md-sys-shape-corner-full);cursor:pointer;color:inherit;background:0 0;border:none;outline:none;flex-shrink:0;justify-content:center;align-self:center;align-items:center;padding:0;display:inline-flex;position:relative}.md3-chip-trailing:after{content:"";width:48px;height:48px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.md3-chip-trailing:focus-visible{outline:3px solid var(--md-sys-color-secondary);outline-offset:2px}.md3-chip-trailingStateLayer{z-index:-1;border-radius:inherit;position:absolute;inset:0;overflow:hidden}.md3-chip-trailingStateLayer:before{content:"";opacity:0;background:currentColor;transition:opacity 15ms linear;position:absolute;inset:0}.md3-chip-trailing:hover .md3-chip-trailingStateLayer:before{opacity:var(--md-sys-state-hover-state-layer-opacity)}.md3-chip-trailing:focus-visible .md3-chip-trailingStateLayer:before{opacity:var(--md-sys-state-focus-state-layer-opacity)}.md3-chip-trailingIcon{inline-size:var(--_icon-size);block-size:var(--_icon-size)}.md3-chip-root:is(:disabled,[data-disabled]){color:color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);border-color:color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity) * 100%), transparent);--_leading-icon-color:currentColor}.md3-chip-root:is(:disabled,[data-disabled]):is([data-elevated],[data-variant=filter][data-pressed],[data-variant=input][data-selected]){background:color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity) * 100%), transparent);border-color:#0000}.md3-chip-root:is(:disabled,[data-disabled]) .md3-chip-avatar{opacity:var(--md-sys-state-disabled-content-opacity)}}