////
/// @group typography
/// @access public
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
////

/// In interface-like type style map.
/// @access public
/// @param {String} $font-family [null] - The font size of the type style.
/// @param {String} $font-size [null] - The font size of the type style.
/// @param {Number|String} $font-weight [null] - The font weight of the type style.
/// @param {Number|string} $line-height [null] - The line height of the type style.
/// @param {Number|String} $letter-spacing [null] - The letter spacing of the type style.
/// @param {String} $text-transform [null] - The text-transform property of the type style.
/// @returns {Map} - A map of all defined type style properties.
@function igx-type-style(
    $font-family: null,
    $font-size: null,
    $font-weight: null,
    $line-height: null,
    $letter-spacing: null,
    $text-transform: null,
    $margin-top: null,
    $margin-bottom: null
) {
    @return (
        font-family: $font-family,
        font-weight: $font-weight,
        font-size: $font-size,
        letter-spacing: $letter-spacing,
        text-transform: $text-transform,
        line-height: $line-height,
        margin-top: $margin-top,
        margin-bottom: $margin-bottom,
    );
}

/// Creates a type scale map containing type style definitions for:
/// - h1
/// - h2
/// - h3
/// - h4
/// - h5
/// - h6
/// - subtitle-1
/// - subtitle-2
/// - body-1
/// - body-2
/// - button
/// - caption
/// - overline
/// @access public
/// @param {Map} $h1 [null] - A map containing type style properties as produced by the igx-type-style function. This type scale styles h1 elements and elements with `igx-font-h1` class.
/// @param {Map} $h2 [null] - A map containing type style properties as produced by the igx-type-style function. This type scale styles h2 elements and elements with `igx-font-h2` class.
/// @param {Map} $h3 [null] - A map containing type style properties as produced by the igx-type-style function. This type scale styles h3 elements and elements with `igx-font-h3` class.
/// @param {Map} $h4 [null] - A map containing type style properties as produced by the igx-type-style function. This type scale styles h4 elements and elements with `igx-font-h4` class.
/// @param {Map} $h5 [null] - A map containing type style properties as produced by the igx-type-style function. This type scale styles h5 elements and elements with `igx-font-h5` class.
/// @param {Map} $h6 [null] - A map containing type style properties as produced by the igx-type-style function. This type scale styles h6 elements and elements with `igx-font-h6` class.
/// @param {Map} $subtitle-1 [null] - A map containing type style properties as produces by the igx-type-style function. This type scale styles elements with `igx-font-subtitle-1` class.
/// @param {Map} $subtitle-2 [null] - A map containing type style properties as produces by the igx-type-style function. This type scale styles elements with `igx-font-subtitle-2` class.
/// @param {Map} $body-1 [null] - A map containing type style properties as produces by the igx-type-style function. This type scale styles elements with `igx-font-body-1` class.
/// @param {Map} $body-2 [null] - A map containing type style properties as produces by the igx-type-style function. This type scale styles elements with `igx-font-body-2` class.
/// @param {Map} $button [null] - A map containing type style properties as produces by the igx-type-style function. This type scale styles elements with `igx-button` class.
/// @param {Map} $caption [null] - A map containing type style properties as produces by the igx-type-style function. This type scale styles elements with `igx-font-caption` class.
/// @param {Map} $overline [null] - A map containing type style properties as produces by the igx-type-style function. This type scale styles elements with `igx-font-overline` class.
/// @requires igx-type-style
/// @returns {Map} - A map of all defined type scales.
@function igx-type-scale(
    $h1: (),
    $h2: (),
    $h3: (),
    $h4: (),
    $h5: (),
    $h6: (),
    $subtitle-1: (),
    $subtitle-2: (),
    $body-1: (),
    $body-2: (),
    $button: (),
    $caption: (),
    $overline: ()
) {
    $default-scale: (
        h1: igx-type-style(
            $font-size: rem(96px),
            $font-weight: 300,
            $letter-spacing: rem(-1.5px),
            $line-height: rem(112px),
            $text-transform: none,
            $margin-top: rem(28px),
            $margin-bottom: rem(56px)
        ),
        h2: igx-type-style(
            $font-size: rem(60px),
            $font-weight: 300,
            $letter-spacing: rem(-.5px),
            $line-height: rem(71px),
            $text-transform: none,
            $margin-top: rem(28px),
            $margin-bottom: rem(28px)
        ),
        h3: igx-type-style(
            $font-size: rem(48px),
            $font-weight: 400,
            $letter-spacing: 0,
            $line-height: rem(57px),
            $text-transform: none,
            $margin-top: rem(28px),
            $margin-bottom: 0
        ),
        h4: igx-type-style(
            $font-size: rem(34px),
            $font-weight: 400,
            $letter-spacing: rem(.25px),
            $line-height: rem(40px),
            $text-transform: none,
            $margin-top: rem(28px),
            $margin-bottom: 0
        ),
        h5: igx-type-style(
            $font-size: rem(24px),
            $font-weight: 400,
            $letter-spacing: 0,
            $line-height: rem(28px),
            $text-transform: none,
            $margin-top: rem(28px),
            $margin-bottom: 0
        ),
        h6: igx-type-style(
            $font-size: rem(20px),
            $font-weight: 600,
            $letter-spacing: rem(.15px),
            $line-height: rem(24px),
            $text-transform: none,
            $margin-top: 0,
            $margin-bottom: 0
        ),
        subtitle-1: igx-type-style(
            $font-size: rem(16px),
            $font-weight: 400,
            $letter-spacing: rem(.15px),
            $line-height: rem(24px),
            $text-transform: none
        ),
        subtitle-2: igx-type-style(
            $font-size: rem(14px),
            $letter-spacing: rem(.1px),
            $font-weight: 600,
            $line-height: rem(24px),
            $text-transform: none
        ),
        body-1: igx-type-style(
            $font-size: rem(16px),
            $font-weight: 400,
            $letter-spacing: rem(.5px),
            $line-height: rem(28px),
            $text-transform: none,
            $margin-top: rem(28px),
            $margin-bottom: rem(16)
        ),
        body-2: igx-type-style(
            $font-size: rem(14px),
            $font-weight: 400,
            $letter-spacing: rem(.25px),
            $line-height: rem(20px),
            $text-transform: none
        ),
        button: igx-type-style(
            $font-size: rem(14px),
            $font-weight: 600,
            $letter-spacing: rem(.75px),
            $line-height: rem(16px),
            $text-transform: uppercase
        ),
        caption: igx-type-style(
            $font-size: rem(12px),
            $font-weight: 400,
            $letter-spacing: rem(.4px),
            $line-height: rem(16px),
            $text-transform: none
        ),
        overline: igx-type-style(
            $font-size: rem(10px),
            $font-weight: 400,
            $letter-spacing: rem(1.5px),
            $line-height: rem(16px),
            $text-transform: uppercase
        )
    );

    @return (
        h1: extend(map-get($default-scale, 'h1'), $h1),
        h2: extend(map-get($default-scale, 'h2'), $h2),
        h3: extend(map-get($default-scale, 'h3'), $h3),
        h4: extend(map-get($default-scale, 'h4'), $h4),
        h5: extend(map-get($default-scale, 'h5'), $h5),
        h6: extend(map-get($default-scale, 'h6'), $h6),
        subtitle-1: extend(map-get($default-scale, 'subtitle-1'), $subtitle-1),
        subtitle-2: extend(map-get($default-scale, 'subtitle-2'), $subtitle-2),
        body-1: extend(map-get($default-scale, 'body-1'), $body-1),
        body-2: extend(map-get($default-scale, 'body-2'), $body-2),
        button: extend(map-get($default-scale, 'button'), $button),
        caption: extend(map-get($default-scale, 'caption'), $caption),
        overline: extend(map-get($default-scale, 'overline'), $overline)
    );
}

/// Get type scale category config.
/// @param {Map} $scale - A type scale map reference as produces by igx-type-scale.
/// @param {String} $category - The scale category you want config for. For instance - 'h1';
/// @example scss Get the type scale category config for the `h1` scale.
///   $h1-type-scale: igx-type-scale-category($default-type-scale, 'h1');
/// @returns {Map} - The config map for the selected category in the type scale.
@function igx-type-scale-category($scale, $category) {
    @return map-get($scale, $category);
}

/// Assigns type scale category config properties
/// as style rules wherever this mixin is included.
/// @param {Map} $scale - A type scale map reference as produces by igx-type-scale.
/// @param {String} $category - The type scale category config you want to use as CSS style rules.
/// @example scss Add the `h1` styles to custom CSS selector.
///   .fancy-h1 {
///      @include igx-type-style($default-type-scale, 'h1');
///      font-family: 'GT Walsheim';
///      color: mediumvioletred;
///   }
@mixin igx-type-style($scale, $category) {
    $type-category: map-get($scale, $category);
    @each $key, $value in $type-category {
        #{$key}: #{$value};
    }
    @content;
}