@import '~bootstrap/scss/mixins/text-hide';
@import '~bootstrap/scss/mixins/text-truncate';
@import 'breakpoints';

// Default variables
$typography: (
  base: (
    base: (
      font-family: 'Proxima Nova' sans-serif,
      font-size: $font-size-base,
      font-weight: 400,
      letter-spacing: 1px,
      line-height: 1.3
    )
  ),
  h1: (
    base: (
      font-size: 26px,
      font-weight: 500,
      letter-spacing: 3px,
      line-height: 1.5
    ),
    sm: (
      font-size: 16px,
      letter-spacing: 2px,
      line-height: 1.8
    )
  ),
) !default;

// Mixins
@mixin font-variant($styles, $color: false, $line-height: false, $align: false) {
  @if not $line-height {
    $line-height: map-get($styles, line-height);
  }
  $font-family: map-get($styles, font-family);
  $font-size: map-get($styles, font-size);
  $font-weight: map-get($styles, font-weight);
  $letter-spacing: map-get($styles, letter-spacing);
  $text-transform: map-get($styles, text-transform);

  @if $font-family {
    font-family: $font-family;
  }

  @if $font-size {
    font-size: $font-size;
  }

  @if $font-weight {
    font-weight: $font-weight;
  }

  @if $letter-spacing {
    letter-spacing: $letter-spacing;
  }

  @if $text-transform {
    text-transform: $text-transform;
  }

  @if $line-height {
    line-height: $line-height;
  }

  @if $color {
    color: $color;
  }

  @if $align {
    text-align: $align;
  }
}

@mixin font($variant: base, $color: false, $line-height: false, $align: false, $responsive: true) {
  $variants: map-get($typography, $variant);

  @each $breakpoint, $styles in $variants {
    @if $breakpoint == base {
      @include font-variant($styles, $color, $line-height, $align);
    }

    @else {
      @if $responsive {
        @include media-breakpoint-down($breakpoint) {
          @include font-variant($styles, $color, $line-height, $align);
        }
      }
    }
  }
}
