/*
 * This file should contain mixins only (not actual classes)
 */
@import './fonts';
@import './colors';

/* Typography version 5 */

/* Heading */
/*---------*/

$typography_headers: (
  /*    (font-family, font-size, line-height, color, uppercase, letter-spacing) */
  "h1": ($FontMedium, 36px, 48px, ($D10, $D80), null     , null , bold),
  "h2": ($FontMedium, 28px, 36px, ($D10, $D80), null     , null , bold),
  "h3": ($FontRoman , 20px, 24px, ($D10, $D80), null     , null , null),
  "h4": ($FontRoman , 18px, 24px, ($D10, $D80), null     , null , null),
  "h5": ($FontMedium, 12px, 24px, ($D20, $D50), UPPERCASE, 1px  , bold),
  "h6": ($FontMedium, 10px, 18px, ($D10, $D50), UPPERCASE, 1.2px, bold),
);

@mixin HeadingNoColor($tagName) {
  $heading: map-get($typography_headers, $tagName);

  font-family: nth($heading, 1); /* IE11 */
  font-family: var(--wsr-font-family, nth($heading, 1));
  font-size: nth($heading, 2);
  line-height: nth($heading, 3);

  @if nth($heading,5) == UPPERCASE {
    text-transform: uppercase;
  }

  $letterSpacing: nth($heading,6);
  @if $letterSpacing != null {
    letter-spacing: $letterSpacing;
  }

  @if nth($heading,5) == bold {
    font-weight: 400; /* IE11 */
    font-weight: var(--wsr-font-weight-bold, 400);
  } @else {
    font-weight: 400; /* IE11 */
    font-weight: var(--wsr-font-weight-regular, 400);
  }

  font-weight: nth($heading, 7);
}

@mixin HeadingColor($tagName, $light) {
  $colors: nth(map-get($typography_headers, $tagName),4);

  @if $light {
    color: nth($colors, 2);
  } @else {
    color: nth($colors, 1);
  }
}

@mixin Heading($tagName: h1, $light: false) {
  @include HeadingNoColor($tagName: $tagName);
  @include HeadingColor($tagName: $tagName, $light: $light);
}

/* Text */
/*------*/

$DEFAULT_SIZE: medium;
$DEFAULT_WEIGHT: thin;
$DEFAULT_SKIN: standard;

/* SIZE AND FONT-FAMILY */
$typography_textSize: (
  tiny: (12px, 15px),
  small: (14px, 18px),
  medium: (16px, 24px)
);

@mixin TextSize($size: $DEFAULT_SIZE) {
  @if map-has-key($typography_textSize, $size) {
    font-size: nth(map-get($typography_textSize, $size), 1);
    line-height: nth(map-get($typography_textSize, $size), 2);
  } @else {
    @error "size value of `#{$size}` is invalid";
  }
}

$typography_textFontFamily: (
  tiny:   (bold: $FontBold,   normal: $FontMedium, thin: $FontRoman),
  small:  (bold: $FontMedium, normal: $FontRoman,  thin: $FontLight),
  medium: (bold: $FontMedium, normal: $FontRoman,  thin: $FontLight),
);

@mixin TextFontFamily($size: $DEFAULT_SIZE, $weight: $DEFAULT_WEIGHT) {
  @if map-has-key($typography_textFontFamily, $size) {
    $weights: map-get($typography_textFontFamily, $size);
    @if map-has-key($weights, $weight) {
      font-family: map-get($weights, $weight); /* IE11 */
      font-family: var(--wsr-font-family, map-get($weights, $weight));
    } @else {
      @error "weight value of `#{$weight}` is invalid";
    }
  } @else {
    @error "size value of `#{$size}` is invalid";
  }
}

@mixin TextSizeAndFontFamily($size: $DEFAULT_SIZE, $weight: $DEFAULT_WEIGHT) {
  @include TextFontFamily($size: $size, $weight: $weight);
  @include TextSize($size: $size);
}

/* COLORS */
@function getTextColor($light: false, $secondary: false, $skin: $DEFAULT_SKIN, $link: false) {
  @if $skin == success {
    @return $G10;
  } @else if $skin == error {
    @return $R10;
  } @else if $skin == premium {
    @return $P10;
  } @else if $link {
    @return $B10;
  } @else if $light and $secondary {
    @return $D40;
  } @else if $light {
    @return $D80;
  } @else if $secondary {
    @return $D20;
  } @else {
    @return $D10;
  }
}

@mixin TextColor($light: false, $secondary: false, $skin: $DEFAULT_SKIN, $link: false) {
  color: getTextColor(
    $light: $light,
    $secondary: $secondary,
    $skin: $skin,
    $link: $link);
}

/* TEXT */
@mixin Text(
  $size: $DEFAULT_SIZE,
  $weight: $DEFAULT_WEIGHT,
  $light: false,
  $secondary: false,
  $skin: $DEFAULT_SKIN,
  $link: false
  ) {
  @include TextSizeAndFontFamily($size: $size,$weight: $weight);
  @include TextColor(
    $light: $light,
    $secondary: $secondary,
    $skin: $skin,
    $link: $link);
}