.wb-metadata-filter-collapse-toggle {
  min-height: 36px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--border, #dfe3ec);
  border-radius: 10px;
  background: var(--surface, #fff);
  color: var(--text-secondary, #667085);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}

.wb-metadata-filter-collapse-toggle:hover {
  border-color: var(--primary, #6c4ce6);
  color: var(--primary, #6c4ce6);
  background: #faf9ff;
}

.wb-metadata-filter-collapse-toggle:focus-visible {
  outline: 3px solid rgba(108, 76, 230, 0.2);
  outline-offset: 2px;
}

.wb-metadata-filter-collapse-toggle svg {
  flex: 0 0 auto;
  transition: transform 180ms ease;
}

.wb-metadata-filter-panel--collapsed .wb-metadata-filter-collapse-toggle svg {
  transform: rotate(-90deg);
}

.wb-metadata-filter-panel--collapsed > .wb-metadata-filter-row {
  display: none !important;
}

.wb-metadata-filter-panel--collapsed > .wb-metadata-filter-head {
  margin-bottom: 0 !important;
}

@media (max-width: 700px) {
  .wb-metadata-filter-collapse-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .wb-metadata-filter-collapse-toggle {
    min-width: 40px;
    padding: 0 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wb-metadata-filter-collapse-toggle,
  .wb-metadata-filter-collapse-toggle svg {
    transition: none;
  }
}