// ============================================================================
// :: Iconography
// ============================================================================
/**
 * Component used to display a list of icons. Each icon is displayed in a grid
 * like fashion. Every item in the grid is represented by the icon and its name.
 */

// ============================================================================
// :: Settings
// ============================================================================
$item-spacing-mobile: 1rem;
$item-spacing-mobile-sides: $item-spacing-mobile * 2;

$item-spacing-desktop: 2rem;
$item-spacing-desktop-sides: $item-spacing-desktop * 2;

$bp-container-side-spacing: $bp-container-spacing * 2;
$bp-container-breakpoint: $bp-container-large + $bp-container-side-spacing;

$item-transition-duration: 0.3s;

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

// ============================================================================
// :: Elements
// ============================================================================
.bp-iconography__search {
  width: 100%;
  margin-bottom: 3.5rem;
}

.bp-iconography__container {
  position: relative;

  min-height: 15rem;
}

.bp-iconography__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  width: calc(100% + #{$item-spacing-mobile-sides});
  margin: -$item-spacing-mobile;
  padding: 0;

  list-style-type: none;

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

.bp-iconography__item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: calc(100% - #{$item-spacing-mobile-sides});
  margin: $item-spacing-mobile;
  padding: 3rem;

  border: 1px solid $bp-border-color-base;

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

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

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

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

.bp-iconography__item-name {
  display: block;
  margin-bottom: 3rem;

  font-size: $bp-font-size-1x-large;
  font-weight: $bp-font-weight-bold;

  color: $bp-text-color-dark;
}

.bp-iconography__item-visual {
  display: block;

  // Style the icon generated by the iconfont
  &::before {
    font-size: $bp-font-size-1x-large;
    line-height: $line-height-normalize;

    color: $bp-primary-color;
  }
}

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

  width: 100%;

  opacity: 0;
  pointer-events: none;
}

.bp-iconography__fallback-text {
  text-align: center;
}

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

  &.has-not-found {

    .bp-iconography__fallback {
      opacity: 1;

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

.bp-iconography__item {

  &.is-hidden {
    display: none;
  }
}