// =================================================================================
// HEADGING
// =================================================================================
$headers:('h1',
  'h2',
  'h3',
  'h4',
  'h5',
  'h6',
);

$header-font-sizes: (all: (
    'h1' : ('font-size': 28),
    'h2' : ('font-size': 24),
    'h3' : ('font-size': 20),
    'h4' : ('font-size': 18),
    'h5' : ('font-size': 17),
    'h6' : ('font-size': 16),
  ),
  sm: ('h1' : ('font-size': 32),
    'h2' : ('font-size': 26),
    'h3' : ('font-size': 22),
    'h4' : ('font-size': 20),
    'h5' : ('font-size': 18),
    'h6' : ('font-size': 16),
  ),
  md: ('h1' : ('font-size': 36),
    'h2' : ('font-size': 28),
    'h3' : ('font-size': 24),
    'h4' : ('font-size': 22),
    'h5' : ('font-size': 19),
    'h6' : ('font-size': 16),
  ),
  lg: ('h1' : ('font-size': 40),
    'h2' : ('font-size': 32),
    'h3' : ('font-size': 28),
    'h4' : ('font-size': 24),
    'h5' : ('font-size': 20),
    'h6' : ('font-size': 16),
  ),
);

// =================================================================================
// HEADGING GENERATES CLASS
// =================================================================================

// h1,
// h2,
// h3,
// h4,
// h5,
// h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-style: normal;
  color: inherit;
  text-rendering: optimizeLegibility;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-family: inherit;
  font-weight: 500;
}

.h1 .block,
.h2 .block,
.h3 .block,
.h4 .block,
.h5 .block,
.h6 .block {
  line-height: inherit;
  color: inherit;
  display: block;
  padding-top: .25rem;
}

//  ==========================================================================
// Heading styles CLASS
//  ==========================================================================
@each $size,
$headers in $header-font-sizes {
  @include media-breakpoint-up($size) {

    @each $header,
    $header-defs in $headers {
      $font-size-temp: 1rem;
      $h-temp: "";

      @if verify-key-header($header) {
        // $h-temp: '#{$header}, .#{$header}';
        $h-temp: '.#{$header}';
      }

      @else {
        $h-temp: '.#{$header}';
      }

      // #{$header}, .#{$header} {
      #{$h-temp} {
        @if map-has-key($header-defs, font-size) {
          $font-size-temp: rem-calc(map-get($header-defs, font-size));
          font-size: $font-size-temp;
        }

        @else if map-has-key($header-defs, fs) {
          $font-size-temp: rem-calc(map-get($header-defs, fs));
          font-size: $font-size-temp;
        }
      }
    }
  }
}