// RenderKit
// github.com/matteobertoldo/renderkit
// Licensed under MIT Open Source

////
/// @group typography
////

/// Styles for headings at various screen sizes. Each key is a breakpoint, and each value is a map of heading styles.
///
/// The possible values to pass to the map are:
/// - `font-size` or `fs`
/// - `line-height` or `lh`
/// - `letter-spacing` or `ls`
/// - `margin-top` or `mt`
/// - `margin-bottom` or `mb`
///
/// Each value must obviously be comma separated. Only `integers` are accepted. Any value passed in `rem` or `em` will be ignored. The output will always be in `px`, except for the `line-height` property.
/// Except for the `line-height` or `lh` value, in addition to `integers`, `floats` are also accepted.
/// @type Map
$header-styles: (
    small: (
        'h1': ('font-size': 24),
        'h2': ('font-size': 20),
        'h3': ('font-size': 19),
        'h4': ('font-size': 18),
        'h5': ('font-size': 17),
        'h6': ('font-size': 16),
    ),
    medium: (
        'h1': ('font-size': 48),
        'h2': ('font-size': 40),
        'h3': ('font-size': 31),
        'h4': ('font-size': 25),
        'h5': ('font-size': 20),
        'h6': ('font-size': 16),
    ),
) !default;

/// Mixin for global headers styles in breakpoints.
@mixin headers-style-bp {
    @each $size, $headers in $header-styles {
        @include breakpoint($size) {
            @each $header, $header-defs in $headers {
                $font-size-temp: 1rem;
                $letter-spacing-temp: $headers-letter-spacing;
                $margin-top-temp: 0;
                $margin-bottom-temp: $headers-margin-bottom;

                #{$header},
                .#{$header} {
                    @if map-has-key($header-defs, font-size) {
                        $font-size-temp: map-get($header-defs, font-size);
                        font-size: unquote(strip-unit($font-size-temp) + 'px');
                    } @else if map-has-key($header-defs, fs) {
                        $font-size-temp: map-get($header-defs, fs);
                        font-size: unquote($font-size-temp + 'px');
                    } @else if $size == $-zf-zero-breakpoint {
                        font-size: $font-size-temp;
                    }

                    @if map-has-key($header-defs, line-height) {
                        line-height: map-get(strip-unit($header-defs), line-height);
                    } @else if map-has-key($header-defs, lh) {
                        line-height: map-get(strip-unit($header-defs), lh);
                    } @else if $size == $-zf-zero-breakpoint {
                        line-height: $headers-line-height;
                    }

                    @if map-has-key($header-defs, letter-spacing) {
                        $letter-spacing-temp: map-get($header-defs, letter-spacing);
                        letter-spacing: unquote(strip-unit($letter-spacing-temp) + 'px');
                    } @else if map-has-key($header-defs, ls) {
                        $letter-spacing-temp: map-get($header-defs, ls);
                        letter-spacing: unquote(strip-unit($letter-spacing-temp) + 'px');
                    } @else if $size == $-zf-zero-breakpoint {
                        letter-spacing: $letter-spacing-temp;
                    }

                    @if map-has-key($header-defs, margin-top) {
                        $margin-top-temp: map-get($header-defs, margin-top);
                        margin-top: unquote(strip-unit($margin-top-temp) + 'px');
                    } @else if map-has-key($header-defs, mt) {
                        $margin-top-temp: map-get($header-defs, mt);
                        margin-top: unquote(strip-unit($margin-top-temp) + 'px');
                    } @else if $size == $-zf-zero-breakpoint {
                        margin-top: $margin-top-temp;
                    }

                    @if map-has-key($header-defs, margin-bottom) {
                        $margin-bottom-temp: map-get($header-defs, margin-bottom);
                        margin-bottom: unquote(strip-unit($margin-bottom-temp) + 'px');
                    } @else if map-has-key($header-defs, mb) {
                        $margin-bottom-temp: map-get($header-defs, mb);
                        margin-bottom: unquote(strip-unit($margin-bottom-temp) + 'px');
                    } @else if $size == $-zf-zero-breakpoint {
                        margin-bottom: $headers-margin-bottom;
                    }
                }
            }
        }
    }
}