// ============================================================================
// :: Font families
// ============================================================================
/**
 * Component used to display a list of the font families used within the
 * brandplatform. Each family is displayed with a preview and the name of
 * the family.
 */

// ============================================================================
// :: 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;

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

// ============================================================================
// :: Elements
// ============================================================================
.bp-font-families__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 0;

  list-style-type: none;

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

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

.bp-font-families__item {
  width: 100%;
  margin-bottom: 2rem;
  padding: 1.5rem;

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

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

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

.bp-font-family__name {
  display: block;
  margin-bottom: 2.5rem;

  font-size: $bp-font-size-1x-large;
  font-weight: $bp-font-weight-bold;
  letter-spacing: 0.05rem;
}

.bp-font-families__preview {
  font-size: $bp-font-size-4x-large;
  line-height: $line-height-normalize;

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