[data-block-preview-filters] {
  display: grid;
  gap: 0.75rem;
  min-width: 0;

  > summary {
    display: flex;
    max-width: 100%;
    color: var(--white);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-strong);
    line-height: var(--line-height-xs);
    list-style: none;
    text-transform: uppercase;
    cursor: pointer;

    > span {
      white-space: nowrap;
    }

    > span:first-child {
      flex: 0 0 auto;
      padding-right: 0.5rem;
      color: var(--gray);
    }

    > span:last-child {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  > summary::-webkit-details-marker {
    display: none;
  }

  &[open] > summary {
    padding-bottom: 0.25rem;
  }

  &:not([open]) > div {
    display: none;
  }

  > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    align-items: baseline;
    min-width: 0;

    > span {
      flex: 0 0 auto;
      color: var(--gray);
      font-size: var(--font-size-xs);
      font-weight: var(--font-weight-regular);
      line-height: var(--line-height-xs);
      padding-right: 0.5rem;
      text-transform: uppercase;
      white-space: nowrap;
    }

    > [data-legend-item] {
      display: flex;
      gap: 0.5rem;
      align-items: baseline;
      min-width: max-content;

      > [data-legend-value] {
        width: auto;
        min-height: 0;
        margin-top: 0;
        margin-left: 0;
      }
    }
  }
}
