selector/src/components/ContentSection/ContentSectionHeader/ContentSectionHeader.scss

@import '@spark-design/css/components/typography/index.css';

.content-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1rem;
  gap: 0.5rem;

  .title-container {
    display: flex;
    align-items: center;
    flex-basis: 330px;

    .title {
      margin: 0 0.5rem 0 0;
    }

    .counter {
      color: var(--spark-color-carbon-tint1);
      margin-right: 1rem;
    }

    .reset-filters-button {
      margin-right: 1rem;
    }
  }

  &-actions {
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;

    .edit-filters-button {
      margin-right: 1rem;
      flex-shrink: 0;
    }

    .notebooks-search {
      max-width: 550px;
      width: 100%;
    }

    .notebooks-sort {
      margin-left: 1rem;
      max-width: 200px;
    }
  }
}