/**
 *  Heading
 *
 *
 *  @author Björn Hase, Tentakelfabrik
 *  @license http://opensource.org/licenses/MIT The MIT License
 *  @link https://github.com/tentakelfabrik/crispy-css
 *
 */

$plain-ui__heading__font-sizes: (
    'h1': 2.25rem,
    'h2': 2rem,
    'h3': 1.8rem,
    'h4': 1.6rem,
    'h5': 1.4rem,
    'h6': 1.2rem
) !default;

$plain-ui__heading__font-sizes__breakpoints: (
    $plain-ui__md: 1.2rem
) !default;

$plain-ui__heading__font-weight: bold!default;
$plain-ui__heading__font-family: $plain-ui__font-family !default;

$plain-ui__heading__line-height: 1.2 !default;

$plain-ui__heading__margin: 0 0 1.2rem !default;
$plain-ui__heading__margin-breakpoints: (
    $plain-ui__md: 0 0 1.4rem
) !default;

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    font-family: $plain-ui__heading__font-family;
    font-weight: $plain-ui__heading__font-weight;
    line-height: $plain-ui__heading__line-height;

    margin: $plain-ui__heading__margin;
    @include plain-ui__breakpoints('margin', $plain-ui__heading__margin-breakpoints);

    &.highlight {
        display: table;
    }
}

.highlight {
    padding: 0.25rem 0.5rem;
    background: var(--primary);
    color: var(--text-secondary);
}

@each $h, $font-size in $plain-ui__heading__font-sizes {
    #{$h}, .#{$h} {
        font-size: $font-size;
        @include plain-ui__breakpoints-font-size($plain-ui__heading__font-sizes__breakpoints, $font-size, $plain-ui__font-size);
    }
}