// ============================================================================
// :: Typography
// ============================================================================
/**
 * Define the styling of the typographic elements on a page so that components
 * can extend from the heading or text styles.
 */

// ============================================================================
// :: H1
// ============================================================================
%__h1-default {
  font-family: $font-family-sora;
  font-weight: $font-weight-bold;
  font-size: $font-size-5x-large;
  line-height: $line-height-5x-large;

  @include respond-at($breakpoint-tablet-default) {
    font-size: $font-size-6x-large;
    line-height: $line-height-6x-large;
  }
}

// ============================================================================
// :: H2
// ============================================================================
%__h2-default {
  font-family: $font-family-sora;
  font-weight: $font-weight-bold;
  font-size: $font-size-3x-large;
  line-height: $line-height-3x-large;

  @include respond-at($breakpoint-tablet-default) {
    font-size: $font-size-4x-large;
    line-height: $line-height-4x-large;
  }
}

// ============================================================================
// :: H3
// ============================================================================
%__h3-default {
  font-family: $font-family-sora;
  font-weight: $font-weight-bold;
  font-size: $font-size-1x-large;
  line-height: $line-height-1x-large;

  @include respond-at($breakpoint-tablet-default) {
    font-size: $font-size-2x-large;
    line-height: $line-height-2x-large;
  }
}

// ============================================================================
// :: H4
// ============================================================================
%__h4-default {
  font-family: $font-family-sora;
  font-weight: $font-weight-bold;
  font-size: $font-size-1x-small;
  line-height: $line-height-1x-small;

  @include respond-at($breakpoint-tablet-default) {
    font-size: $font-size-1x-large;
    line-height: $line-height-2x-large;
  }
}

// ============================================================================
// :: H5
// ============================================================================
%__h5-default {
  font-family: $font-family-sora;
  font-weight: $font-weight-regular;
  font-size: $font-size-1x-small;
  line-height: $line-height-base;
  text-transform: uppercase;

  color: $text-color-1x-light;
}


// ============================================================================
// :: H6
// ============================================================================
%__h6-default {
  font-family: $font-family-sora;
  font-weight: $font-weight-bold;
  font-size: $font-size-1x-small;
  line-height: $line-height-1x-small;

  @include respond-at($breakpoint-tablet-default) {
    font-size: $font-size-base;
    line-height: $line-height-base;
  }
}


// ============================================================================
// :: Text - default
// ============================================================================
%__text-default {
  font-family: $font-family-sora;
  font-weight: $font-weight-regular;
  font-size: $font-size-1x-small;
  line-height: $line-height-1x-small;

  @include respond-at($breakpoint-tablet-default) {
    font-size: $font-size-base;
    line-height: $line-height-base;
  }
}

// ============================================================================
// :: Text - bold
// ============================================================================
%__text-bold-default {
  @extend %__text-default;

  font-weight: $font-weight-bold;
}

// ============================================================================
// :: Text - small
// ============================================================================
%__text-small-default {
  @extend %__text-default;

  font-size: $font-size-2x-small;
  line-height: $line-height-3x-small;
  font-style: italic;

  @include respond-at($breakpoint-tablet-default) {
    font-size: $font-size-1x-small;
    line-height: $line-height-3x-small;
  }
}

// ============================================================================
// :: Text - tiny
// ============================================================================
%__text-tiny-default {
  @extend %__text-default;

  font-size: $font-size-3x-small;
  line-height: $line-height-3x-small;

  @include respond-at($breakpoint-tablet-default) {
    font-size: $font-size-2x-small;
    line-height: $line-height-2x-small;
  }
}