.ds-filter-bar{align-items:center;gap:var(--gap-sm);flex-wrap:wrap;display:flex}.ds-filter-bar__filter{display:inline-flex;position:relative}.ds-filter-bar__chip{align-items:center;gap:var(--gap-sm);padding:var(--padding-xs) var(--padding-sm-md);border:var(--border-xs) solid var(--color-bg-container-border);border-radius:var(--radius-full);background-color:var(--color-bg-page-primary);font-family:var(--font-paragraph-sm-em-family);font-size:var(--font-paragraph-sm-em-size);font-weight:var(--font-paragraph-sm-em-weight);line-height:var(--font-paragraph-sm-em-line-height);letter-spacing:var(--font-paragraph-sm-em-letter-spacing);color:var(--color-text-secondary);white-space:nowrap;transition:background-color var(--motion-duration-base) var(--motion-ease-standard), border-color var(--motion-duration-base) var(--motion-ease-standard), color var(--motion-duration-base) var(--motion-ease-standard);display:inline-flex}.ds-filter-bar--compact .ds-filter-bar__chip{gap:var(--gap-xs);padding:var(--padding-xxxs) var(--padding-sm)}.ds-filter-bar__chip:hover:not(.ds-filter-bar__chip--active){background-color:var(--color-action-passive-bg-hover)}.ds-filter-bar__chip--open:not(.ds-filter-bar__chip--active){background-color:var(--color-action-passive-bg-active)}.ds-filter-bar__chip--active{background-color:var(--color-action-primary-bg);border-color:var(--color-action-primary-bg);color:var(--color-action-primary-text)}.ds-filter-bar__chip--active:hover{background-color:var(--color-action-primary-bg-hover)}.ds-filter-bar__trigger,.ds-filter-bar__chip-clear{align-items:center;gap:inherit;font:inherit;letter-spacing:inherit;color:inherit;cursor:pointer;background:0 0;border:none;margin:0;padding:0;display:inline-flex}.ds-filter-bar__trigger:focus-visible,.ds-filter-bar__chip-clear:focus-visible,.ds-filter-bar__clear-all:focus-visible{outline:var(--border-md) solid var(--color-action-primary-bg);outline-offset:var(--gap-xxs);border-radius:var(--radius-full)}.ds-filter-bar__icon{--icon-size:var(--icon-size-sm);flex-shrink:0;line-height:1}.ds-filter-bar__caret{--icon-size:var(--icon-size-sm);transition:transform var(--motion-duration-base) var(--motion-ease-standard);flex-shrink:0;line-height:1}.ds-filter-bar__chip--open .ds-filter-bar__caret{transform:rotate(180deg)}.ds-filter-bar__chip-clear{border-radius:var(--radius-full);flex-shrink:0}.ds-filter-bar__chip-clear .material-symbols-rounded{--icon-size:var(--icon-size-sm);line-height:1}.ds-filter-bar__panel{top:calc(100% + var(--gap-xxs));z-index:10;min-width:100%;max-height:280px;padding:var(--padding-xxs);border:var(--border-xs) solid var(--color-bg-container-border);border-radius:var(--radius-md);background-color:var(--color-bg-container-primary);box-shadow:var(--shadow-floating);margin:0;list-style:none;position:absolute;left:0;overflow-y:auto}.ds-filter-bar__option{align-items:center;gap:var(--gap-xs);padding:var(--padding-xs) var(--padding-sm);border-radius:var(--radius-sm);font-family:var(--font-paragraph-sm-family);font-size:var(--font-paragraph-sm-size);font-weight:var(--font-paragraph-sm-weight);line-height:var(--font-paragraph-sm-line-height);letter-spacing:var(--font-paragraph-sm-letter-spacing);color:var(--color-text-primary);white-space:nowrap;cursor:pointer;transition:background-color var(--motion-duration-fast) var(--motion-ease-standard);display:flex}.ds-filter-bar__option:hover,.ds-filter-bar__option--focused{background-color:var(--color-action-passive-bg-hover)}.ds-filter-bar__option--selected{color:var(--color-text-primary)}.ds-filter-bar__option-check{width:var(--icon-size-sm);--icon-size:var(--icon-size-sm);color:var(--color-action-primary-bg);flex-shrink:0;line-height:1}.ds-filter-bar__clear-all{padding:var(--padding-xs) var(--padding-sm);border-radius:var(--radius-full);font-family:var(--font-paragraph-sm-em-family);font-size:var(--font-paragraph-sm-em-size);font-weight:var(--font-paragraph-sm-em-weight);line-height:var(--font-paragraph-sm-em-line-height);letter-spacing:var(--font-paragraph-sm-em-letter-spacing);color:var(--color-text-secondary);cursor:pointer;transition:color var(--motion-duration-base) var(--motion-ease-standard);background:0 0;border:none;margin:0}.ds-filter-bar__clear-all:hover{color:var(--color-text-primary)}.ds-filter-bar .material-symbols-rounded{color:inherit}
