@import './text-colors-mixin';

$includeHtml: false !default;
$headlineSizes: (xxsmall xsmall small medium large xlarge xxlarge xxxlarge);
$headlineTransforms: (uppercase lowercase capitalize);

$headlineSizeRules: (
  xxxlarge: (
    fontSize: 78px,
    lineHeight: 88px,
  ),
  xxlarge: (
    fontSize: 53px,
    lineHeight: 60px,
  ),
  xlarge: (
    fontSize: 39px,
    lineHeight: 44px,
  ),
  large: (
    fontSize: 28px,
    lineHeight: 32px,
  ),
  medium: (
    fontSize: 21px,
    lineHeight: 24px,
  ),
  small: (
    fontSize: 18px,
    lineHeight: 20px,
  ),
  xsmall: (
    fontSize: 14px,
    lineHeight: 16px,
  ),
  xxsmall: (
    fontSize: 10px,
    lineHeight: 12px,
  ),
);

@function getHeadLineSizeFromMap($map, $keys...) {
  @each $key in $keys {
    $map: map-get($map, $key);
  }
  @return $map;
}

@mixin headlineTypeSizeVariant($size) {
  font-size: getHeadLineSizeFromMap($headlineSizeRules, $size, 'fontSize');
  line-height: getHeadLineSizeFromMap($headlineSizeRules, $size, 'lineHeight');
}

@if ($includeHtml) {
  .sg-headline {
    @include headlineTypeSizeVariant(medium);
    display: block;
    color: $black;
    font-weight: $fontWeightBold;
    font-family: $fontFamilyPrimary;
    font-feature-settings: $fontFeatureSettings;
    max-width: 100%;

    &--inherited {
      display: revert;
      font-size: inherit;
      line-height: inherit;
      font-weight: inherit;
      color: inherit;
    }

    @include textColor();
  }

  @each $breakpoint, $variant in $responsiveVariants {
    @include sgResponsive($breakpoint) {
      @each $size in $headlineSizes {
        @include makeResponsive($variant, 'sg-headline--#{$size}') {
          @include headlineTypeSizeVariant($size);
        }
      }

      @each $transform in $headlineTransforms {
        @include makeResponsive($variant, 'sg-headline--#{$transform}') {
          text-transform: $transform;
        }
      }

      @include makeResponsive($variant, 'sg-headline--extra-bold') {
        font-weight: $fontWeightBlack;
      }

      @include makeResponsive($variant, 'sg-headline--no-bold') {
        font-weight: $fontWeightBold;
      }

      @include makeResponsive($variant, 'sg-headline--to-left') {
        text-align: left;
      }

      @include makeResponsive($variant, 'sg-headline--to-right') {
        text-align: right;
      }

      @include makeResponsive($variant, 'sg-headline--to-center') {
        text-align: center;
      }

      @include makeResponsive($variant, 'sg-headline--justify') {
        text-align: justify;
      }
    }
  }
}