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

$includeHtml: false !default;
$subheadlineSizes: (xsmall small medium large xlarge xxlarge xxxlarge);
$subheadlineTransforms: (uppercase lowercase capitalize);

$subheadlineSizeRules: (
  xxxlarge: (
    fontSize: 78px,
    lineHeight: 88px,
  ),
  xxlarge: (
    fontSize: 53px,
    lineHeight: 60px,
  ),
  xlarge: (
    fontSize: 43px,
    lineHeight: 48px,
  ),
  large: (
    fontSize: 28px,
    lineHeight: 32px,
  ),
  medium: (
    fontSize: 21px,
    lineHeight: 24px,
  ),
  small: (
    fontSize: 18px,
    lineHeight: 20px,
  ),
  xsmall: (
    fontSize: 14px,
    lineHeight: 16px,
  ),
);

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

@mixin subheadlineTypeSizeVariant($size) {
  font-size: getSubheadlineSizeFromMap(
    $subheadlineSizeRules,
    $size,
    'fontSize'
  );
  line-height: getSubheadlineSizeFromMap(
    $subheadlineSizeRules,
    $size,
    'lineHeight'
  );
}

@if ($includeHtml) {
  em.sg-subheadline {
    font-style: normal;
  }

  blockquote.sg-subheadline {
    margin: 0;
  }

  .sg-subheadline {
    @include subheadlineTypeSizeVariant(medium);
    font-family: $fontFamilyPrimary;
    font-feature-settings: $fontFeatureSettings;
    display: block;
    color: $black;
    font-weight: $fontWeightNormal;
    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 $subheadlineSizes {
        @include makeResponsive($variant, 'sg-subheadline--#{$size}') {
          @include subheadlineTypeSizeVariant($size);
        }
      }

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

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

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

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

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