@import './layout.scss';
// @import url('https://fonts.googleapis.com/css?family=Lato:400,700|Montserrat:400,500,600,700');

@font-face {
  font-family: 'password';
  font-style: normal;
  font-weight: 400;
  src: url(https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/password.ttf);
}

$pg-font-family-header: 'Montserrat', sans-serif;
$pg-font-family-body: 'Lato', sans-serif;

$pg-line-height-header: 1.2em;
$pg-line-height-body: 1.5em;
$pg-letter-spacing: 0.04em;

// remove?
$pg-font-weight-light: 300;
$pg-font-weight-regular: 400;
$pg-font-weight-medium: 500;
$pg-font-weight-semibold: 600;
$pg-font-weight-bold: 700;

$pg-font-size-base: 16px;

// Font scale derived from https://www.modularscale.com/?1&em&1.333
$pg-font-scale-map: (
  -1: 0.85,
  0: 1,
  1: 1.333,
  2: 1.777,
  3: 2.369,
  4: 3.157,
  5: 4.209,
  6: 5.61
);

@function pg-get-font-size($n) {
  @return map-get($pg-font-scale-map, $n) * $pg-font-size-base;
}

@mixin pg-font-header() {
  font-family: $pg-font-family-header;
  line-height: $pg-line-height-header;
  letter-spacing: $pg-letter-spacing;
}

@mixin pg-font-body() {
  font-family: $pg-font-family-body;
  line-height: $pg-line-height-body;
  letter-spacing: $pg-letter-spacing;
}

// The SCSS below is deprecated and needs to be removed from the library altogether.
// Once it is removed from use in components we should be able to delete this outright.
// NOTE: Other developers should not use the below variables.
$primary-font: 'Montserrat', sans-serif;
$secondary-font: 'Lato', sans-serif;
$common-line-height: 1.2em;
$common-letter-spacing: 0.04em;
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-semibold: 600;
$font-weight-bold: 700;
$font-weight-medium: 500;
@mixin font-display-l {
  font-family: $primary-font;
  font-size: 2.369rem;
  font-weight: $font-weight-bold;
  line-height: $common-line-height;
  letter-spacing: $common-letter-spacing;
  @include mobile-l {
    font-family: $primary-font;
    font-size: 3.157rem;
    font-weight: $font-weight-bold;
    line-height: $common-line-height;
    letter-spacing: $common-letter-spacing;
  }
  @include modal {
    font-family: $primary-font;
    font-size: 4.209rem;
    font-weight: $font-weight-bold;
    line-height: $common-line-height;
    letter-spacing: $common-letter-spacing;
  }
  @include desktop {
    font-family: $primary-font;
    font-size: 5.61rem;
    font-weight: $font-weight-bold;
    line-height: $common-line-height;
    letter-spacing: $common-letter-spacing;
  }
}

@mixin font-display-m {
  font-family: $primary-font;
  font-size: 1.777rem;
  font-weight: $font-weight-bold;
  line-height: $common-line-height;
  letter-spacing: $common-letter-spacing;
  @include mobile-l {
    font-family: $primary-font;
    font-size: 2.369rem;
    font-weight: $font-weight-bold;
    line-height: $common-line-height;
    letter-spacing: $common-letter-spacing;
  }
  @include modal {
    font-family: $primary-font;
    font-size: 3.157rem;
    font-weight: $font-weight-bold;
    line-height: $common-line-height;
    letter-spacing: $common-letter-spacing;
  }
  @include desktop {
    font-family: $primary-font;
    font-size: 4.209rem;
    font-weight: $font-weight-bold;
    line-height: $common-line-height;
    letter-spacing: $common-letter-spacing;
  }
}

@mixin font-display-s {
  font-family: $primary-font;
  font-size: 1.333rem;
  font-weight: $font-weight-bold;
  line-height: $common-line-height;
  letter-spacing: $common-letter-spacing;
  @include mobile-l {
    font-family: $primary-font;
    font-size: 1.777rem;
    font-weight: $font-weight-bold;
    line-height: $common-line-height;
    letter-spacing: $common-letter-spacing;
  }
  @include modal {
    font-family: $primary-font;
    font-size: 2.369rem;
    font-weight: $font-weight-bold;
    line-height: $common-line-height;
    letter-spacing: $common-letter-spacing;
  }
  @include desktop {
    font-family: $primary-font;
    font-size: 3.157rem;
    font-weight: $font-weight-bold;
    line-height: $common-line-height;
    letter-spacing: $common-letter-spacing;
  }
}

@mixin font-headline {
  font-family: $primary-font;
  font-size: 1.333rem;
  font-weight: $font-weight-bold;
  line-height: $common-line-height;
  letter-spacing: $common-letter-spacing;
  @include mobile-l {
    font-family: $primary-font;
    font-size: 1.777rem;
    font-weight: $font-weight-bold;
    line-height: $common-line-height;
    letter-spacing: $common-letter-spacing;
  }
  @include modal {
    font-family: $primary-font;
    font-size: 1.777rem;
    font-weight: $font-weight-bold;
    line-height: $common-line-height;
    letter-spacing: $common-letter-spacing;
  }
  @include desktop {
    font-family: $primary-font;
    font-size: 2.369rem;
    font-weight: $font-weight-bold;
    line-height: $common-line-height;
    letter-spacing: $common-letter-spacing;
  }
}

@mixin font-title-l {
  font-family: $primary-font;
  font-size: 1rem;
  font-weight: $font-weight-bold;
  line-height: $common-line-height;
  letter-spacing: $common-letter-spacing;
  @include mobile-l {
    font-family: $primary-font;
    font-size: 1.333rem;
    font-weight: $font-weight-bold;
    line-height: $common-line-height;
    letter-spacing: $common-letter-spacing;
  }
  @include modal {
    font-family: $primary-font;
    font-size: 1.333rem;
    font-weight: $font-weight-bold;
    line-height: $common-line-height;
    letter-spacing: $common-letter-spacing;
  }
  @include desktop {
    font-family: $primary-font;
    font-size: 1.777rem;
    font-weight: $font-weight-bold;
    line-height: $common-line-height;
    letter-spacing: $common-letter-spacing;
  }
}

@mixin font-title-m {
  font-family: $primary-font;
  font-size: 1rem;
  font-weight: $font-weight-bold;
  line-height: $common-line-height;
  letter-spacing: $common-letter-spacing;
  @include mobile-l {
    font-family: $primary-font;
    font-size: 1rem;
    font-weight: $font-weight-bold;
    line-height: $common-line-height;
    letter-spacing: $common-letter-spacing;
  }
  @include modal {
    font-family: $primary-font;
    font-size: 1rem;
    font-weight: $font-weight-bold;
    line-height: $common-line-height;
    letter-spacing: $common-letter-spacing;
  }
  @include desktop {
    font-family: $primary-font;
    font-size: 1rem;
    font-weight: $font-weight-bold;
    line-height: $common-line-height;
    letter-spacing: $common-letter-spacing;
  }
}

@mixin font-title-s {
  font-family: $primary-font;
  font-size: 0.8125rem;
  font-weight: $font-weight-bold;
  line-height: $common-line-height;
  letter-spacing: $common-letter-spacing;
  @include mobile-l {
    font-family: $primary-font;
    font-size: 0.8125rem;
    font-weight: $font-weight-bold;
    line-height: $common-line-height;
    letter-spacing: $common-letter-spacing;
  }
  @include modal {
    font-family: $primary-font;
    font-size: 0.8125rem;
    font-weight: $font-weight-bold;
    line-height: $common-line-height;
    letter-spacing: $common-letter-spacing;
  }
  @include desktop {
    font-family: $primary-font;
    font-size: 0.8125rem;
    font-weight: $font-weight-bold;
    line-height: $common-line-height;
    letter-spacing: $common-letter-spacing;
  }
}

@mixin font-subheading {
  font-family: $primary-font;
  font-size: 1rem;
  font-weight: $font-weight-bold;
  line-height: $common-line-height;
  letter-spacing: $common-letter-spacing;
  @include mobile-l {
    font-family: $primary-font;
    font-size: 1rem;
    font-weight: $font-weight-bold;
    line-height: $common-line-height;
    letter-spacing: $common-letter-spacing;
  }
  @include modal {
    font-family: $primary-font;
    font-size: 1rem;
    font-weight: $font-weight-bold;
    line-height: $common-line-height;
    letter-spacing: $common-letter-spacing;
  }
  @include desktop {
    font-family: $primary-font;
    font-size: 1.333rem;
    font-weight: $font-weight-bold;
    line-height: 1.5em;
    letter-spacing: $common-letter-spacing;
  }
}

@mixin font-body-l-lg {
  font-family: $secondary-font;
  font-size: 1.333rem;
  font-weight: $font-weight-regular;
  line-height: 1.5em;
  letter-spacing: $common-letter-spacing;
}

@mixin font-body-l {
  font-family: $secondary-font;
  font-size: 1rem;
  font-weight: $font-weight-regular;
  line-height: 1.5em;
  letter-spacing: $common-letter-spacing;
  @include mobile-l {
    font-family: $secondary-font;
    font-size: 1rem;
    font-weight: $font-weight-regular;
    line-height: 1.5em;
    letter-spacing: $common-letter-spacing;
  }
  @include modal {
    font-family: $secondary-font;
    font-size: 1rem;
    font-weight: $font-weight-regular;
    line-height: 1.5em;
    letter-spacing: $common-letter-spacing;
  }
  @include xl {
    @include font-body-l-lg;
  }
}

@mixin font-body-s {
  font-family: $secondary-font;
  font-size: 0.8125rem;
  font-weight: $font-weight-regular;
  line-height: 1.5em;
  letter-spacing: $common-letter-spacing;
  @include modal {
    font-family: $secondary-font;
    font-size: 0.8125rem;
    font-weight: $font-weight-regular;
    line-height: 1.5em;
    letter-spacing: $common-letter-spacing;
  }
  @include modal {
    font-family: $secondary-font;
    font-size: 0.8125rem;
    font-weight: $font-weight-regular;
    line-height: 1.5em;
    letter-spacing: $common-letter-spacing;
  }
  @include desktop {
    font-family: $secondary-font;
    font-size: 1rem;
    font-weight: $font-weight-regular;
    line-height: 1.5em;
    letter-spacing: $common-letter-spacing;
  }
}

@mixin font-button {
  font-family: $primary-font;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1em;
  letter-spacing: $common-letter-spacing;
  @include mobile-l {
    font-family: $primary-font;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1em;
    letter-spacing: $common-letter-spacing;
  }
  @include modal {
    font-family: $primary-font;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1em;
    letter-spacing: $common-letter-spacing;
  }
  @include desktop {
    font-family: $primary-font;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1em;
    letter-spacing: $common-letter-spacing;
  }
}

@mixin font-caption {
  font-family: $secondary-font;
  font-size: 0.8125rem;
  font-weight: $font-weight-regular;
  line-height: 1.5em;
  letter-spacing: $common-letter-spacing;
  @include mobile-l {
    font-family: $secondary-font;
    font-size: 0.8125rem;
    font-weight: $font-weight-regular;
    line-height: 1.5em;
    letter-spacing: $common-letter-spacing;
  }
  @include modal {
    font-family: $secondary-font;
    font-size: 0.8125rem;
    font-weight: $font-weight-regular;
    line-height: 1.5em;
    letter-spacing: $common-letter-spacing;
  }
  @include desktop {
    font-family: $secondary-font;
    font-size: 0.8125rem;
    font-weight: $font-weight-regular;
    line-height: 1.5em;
    letter-spacing: $common-letter-spacing;
  }
}

@mixin font-field-label-l {
  font-family: $primary-font;
  font-size: 1rem;
  font-weight: $font-weight-medium;
  line-height: 1.5em;
  letter-spacing: $common-letter-spacing;
  @include mobile-l {
    font-family: $primary-font;
    font-size: 1rem;
    font-weight: $font-weight-semibold;
    line-height: 1.5em;
    letter-spacing: $common-letter-spacing;
  }
  @include modal {
    font-family: $primary-font;
    font-size: 1rem;
    font-weight: $font-weight-semibold;
    line-height: 1.5em;
    letter-spacing: $common-letter-spacing;
  }
  @include desktop {
    font-family: $primary-font;
    font-size: 1rem;
    font-weight: $font-weight-semibold;
    line-height: 1.5em;
    letter-spacing: $common-letter-spacing;
  }
}

@mixin font-field-label-s {
  font-family: $primary-font;
  font-size: 0.8125rem;
  font-weight: $font-weight-medium;
  line-height: 1.5em;
  letter-spacing: $common-letter-spacing;
  @include mobile-l {
    font-family: $primary-font;
    font-size: 0.8125rem;
    font-weight: $font-weight-semibold;
    line-height: 1.5em;
    letter-spacing: $common-letter-spacing;
  }
  @include modal {
    font-family: $primary-font;
    font-size: 0.8125rem;
    font-weight: $font-weight-semibold;
    line-height: 1.5em;
    letter-spacing: $common-letter-spacing;
  }
  @include desktop {
    font-family: $primary-font;
    font-size: 0.8125rem;
    font-weight: $font-weight-semibold;
    line-height: 1.5em;
    letter-spacing: $common-letter-spacing;
  }
}

@mixin font-link-l {
  text-decoration: underline;
  font-family: $primary-font;
  font-size: 1rem;
  font-weight: $font-weight-regular;
  line-height: 1.5em;
  letter-spacing: $common-letter-spacing;
  @include mobile-l {
    font-family: $primary-font;
    font-size: 1rem;
    font-weight: $font-weight-regular;
    line-height: 1.5em;
    letter-spacing: $common-letter-spacing;
  }
  @include modal {
    font-family: $secondary-font;
    font-size: 1.333rem;
    font-weight: $font-weight-regular;
    line-height: 1.5em;
    letter-spacing: $common-letter-spacing;
  }
  @include desktop {
    font-family: $secondary-font;
    font-size: 1.333rem;
    font-weight: $font-weight-regular;
    line-height: 1.5em;
    letter-spacing: $common-letter-spacing;
  }
}

@mixin font-link-s {
  text-decoration: underline;
  font-family: $secondary-font;
  font-size: 0.85rem;
  font-weight: $font-weight-regular;
  line-height: 1.5em;
  letter-spacing: $common-letter-spacing;
  @include mobile-l {
    font-family: $secondary-font;
    font-size: 0.85rem;
    font-weight: $font-weight-regular;
    line-height: 1.5em;
    letter-spacing: $common-letter-spacing;
  }
  @include modal {
    font-family: $secondary-font;
    font-size: 1rem;
    font-weight: $font-weight-regular;
    line-height: 1.5em;
    letter-spacing: $common-letter-spacing;
  }
  @include desktop {
    font-family: $secondary-font;
    font-size: 1rem;
    font-weight: $font-weight-regular;
    line-height: 1.5em;
    letter-spacing: $common-letter-spacing;
  }
}