@use '../../../common/colours';
@use '../../../common/responsive';
@use '../../../common/accessibility';
@use '../../../common/layout';
@use '../../../common/typography';

%projects-container {
  margin: 1em 0 0;
}

.availableProjects {
  margin: layout.$spacing-height 0 0 0;
  width: 100%;
}

.loading {
  @extend %projects-container;
}

.legend {
  @include accessibility.visually-hidden;
}

.controls {
  @include responsive.respond-to(very-small) {
    overflow: scroll;
  }
}

.toggles {
  display: block;
  width: 100%;

  @include responsive.respond-to(tablet, desktop) {
    display: inline-block;
    width: auto;
  }
}

.includeAll {
  @include responsive.respond-to(tablet, desktop) {
    margin: layout.$spacing-height layout.$spacing-width 0 0;
  }
}

.excludeAll {
  @include responsive.respond-to(tablet, desktop) {
    margin: layout.$spacing-height layout.$spacing-width 0 0;
  }
}

.buildItems {
  list-style: none;
  overflow-y: scroll;
  padding: 1em;

  @include layout.grid($desktop-columns: 2);
  @extend %projects-container;

  @include responsive.respond-to(very-small) {
    overflow: scroll;
  }
}

.projectCheckbox.projectCheckbox {
  margin: 0;
}

.projectFilter {
  display: block;
  width: 100%;

  @include responsive.respond-to(tablet, desktop) {
    display: inline-block;
    margin: layout.$spacing-height 0 0 0;
    width: auto;
  }
}

.projectFilterInput {
  @include responsive.respond-to(tablet, desktop) {
    align-items: baseline;
    display: flex;
    margin-top: 0;
  }
}

.search {
  @include responsive.respond-to(tablet, desktop) {
    margin: 0 layout.$spacing-width 0 0;
  }
}

.projectCount {
  color: colours.$mid-grey;

  @include typography.font-scale(-1);
}

.backToTop {
  @include responsive.respond-to(tablet, desktop) {
    display: none;
  }
}
