// ============================================================================
// :: Table of contents
// ============================================================================
/**
 * A very large component used to combine different categories and display them
 * in a certain grid like fashion. Can also contain a filter to properly search
 * between these categories.
 */

// ============================================================================
// :: Settings
// ============================================================================
$list-spacing: 2rem;
$list-spacing-sides: $list-spacing * 2;

// ============================================================================
// :: Root
// ============================================================================
.bp-toc {
  position: relative;
}

// ============================================================================
// :: Elements
// ============================================================================
.bp-toc__subnav {
  margin-bottom: 2.5rem;
}

.bp-toc__search {
  width: 100%;
  margin-bottom: 3.5rem;
}

.bp-toc__content {
  position: relative;

  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;

  min-height: 25rem;

  @include respond-at($bp-breakpoint-tablet-base) {
    margin: -$list-spacing;
    width: calc(100% + #{$list-spacing-sides});
  }
}

.bp-toc__list {
  width: 100%;
  margin-bottom: 2rem;

  @include respond-at($bp-breakpoint-tablet-base) {
    margin: $list-spacing;
    width: calc(49.9% - #{$list-spacing-sides});
  }

  @include respond-at($bp-breakpoint-desktop-base) {
    margin: $list-spacing;
    width: calc((100% / 3) - #{$list-spacing-sides});
  }

  &.bp-category--list {
    width: 100%;
  }
}

.bp-toc__search-fallback {
  position: absolute;
  top: 3.5rem;
  left: 0;

  width: 100%;

  opacity: 0;
  pointer-events: none;
}

.bp-toc__search-fallback-text {
  font-size: $bp-font-size-base;
  line-height: $bp-line-height-base;
  text-align: center;
}

// ============================================================================
// :: States
// ============================================================================
.bp-toc__content {

  &.has-not-found {

    .bp-toc__search-fallback {
      opacity: 1;

      transition: opacity 0.3s ease-in-out;
    }
  }
}