:host { overflow: visible; }
.container { position: relative; display: flex; align-items: center; font: var(--fds-paragraphs-regular-bold); gap: var(--fds-spacing-100); padding: var(--fds-spacing-100) var(--fds-spacing-200) var(--fds-spacing-100) var(--fds-spacing-100); border: none; background: var(--fds-btn-default); cursor: pointer; transition: 0.2s; color: var(--fds-on-btn-default); height: 20px; border-radius: var(--fds-border-radius-btn-default); }
.counter { position: absolute; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; right: -4px; top: -4px; font: var(--fds-paragraphs-tiny-bold); background: var(--fds-surface); color: var(--fds-btn-default); border: 2px solid var(--fds-btn-default); border-radius: 50%; box-sizing: content-box; }
:host([data-open="true"]) .container { background: var(--fds-btn-default-active); }
:host([data-open="true"]) .counter { border: 2px solid var(--fds-btn-default-active); color: var(--fds-btn-default-active); }
:host([data-has-filters="true"]) .container { margin-right: var(--fds-spacing-050); }
@media (prefers-reduced-motion: reduce) {
  .container { transition: none; }
}