@use 'Foundation/scss/typography-chains' as chains;

$h1-font-size: var(--wds-font-size-heading-1, var(--wsr-heading-font-size-xl, 28px));
$h1-font-weight: var(--wds-font-weight-heading-1, var(--wsr-font-weight-bold, 700));
$h1-line-height: var(--wds-font-line-height-heading-1, var(--wsr-heading-line-height-xl, 36px));
$h1-letter-spacing: var(--wds-font-letter-spacing-heading-1, unset);
$h2-font-size: var(--wds-font-size-heading-2, var(--wsr-heading-font-size-l, 21px));
$h2-font-weight: var(--wds-font-weight-heading-2, var(--wsr-font-weight-bold, 700));
$h2-line-height: var(--wds-font-line-height-heading-2, var(--wsr-heading-line-height-l, 28px));
$h2-letter-spacing: var(--wds-font-letter-spacing-heading-2, unset);
$h3-font-size: var(--wds-font-size-heading-3, var(--wsr-heading-font-size-m, 18px));
$h3-font-weight: var(--wds-font-weight-heading-3, var(--wsr-font-weight-bold, 700));
$h3-line-height: var(--wds-font-line-height-heading-3, var(--wsr-heading-line-height-m, 24px));
$h3-letter-spacing: var(--wds-font-letter-spacing-heading-3, unset);
$h4-font-size: var(--wds-font-size-heading-4, var(--wsr-heading-font-size-s, 18px));
$h4-font-weight: var(--wds-font-weight-heading-4, var(--wsr-font-weight-medium, 530));
$h4-line-height: var(--wds-font-line-height-heading-4, var(--wsr-heading-line-height-s, 24px));
$h4-letter-spacing: var(--wds-font-letter-spacing-heading-4, unset);
$h5-font-size: var(--wds-font-size-heading-5, var(--wsr-heading-font-size-t, 15px));
$h5-font-weight: var(--wds-font-weight-heading-5, var(--wsr-font-weight-medium, 530));
$h5-line-height: var(--wds-font-line-height-heading-5, var(--wsr-heading-line-height-t, 24px));
$h5-letter-spacing: var(--wds-font-letter-spacing-heading-5, unset);
$h6-font-size: var(--wds-font-size-heading-6, var(--wsr-heading-font-size-xt, 12px));
$h6-font-weight: var(--wds-font-weight-heading-6, var(--wsr-font-weight-medium, 530));
$h6-line-height: var(--wds-font-line-height-heading-6, var(--wsr-heading-line-height-xt, 15px));
$h6-letter-spacing: var(--wds-font-letter-spacing-heading-6, unset);
$color-primary: var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624));

.heading {
  font-weight: normal;
  margin: 0;

  &#{&}--appearance-h1 {
    font-family: chains.$font-family-display;
    font-size: $h1-font-size;
    font-weight: $h1-font-weight;
    line-height: $h1-line-height;
    letter-spacing: $h1-letter-spacing;
    color: $color-primary;
  }

  &#{&}--appearance-h2 {
    font-family: chains.$font-family-display;
    font-size: $h2-font-size;
    font-weight: $h2-font-weight;
    line-height: $h2-line-height;
    letter-spacing: $h2-letter-spacing;
    color: $color-primary;
  }

  &#{&}--appearance-h3 {
    font-family: chains.$font-family-display;
    font-size: $h3-font-size;
    font-weight: $h3-font-weight;
    line-height: $h3-line-height;
    letter-spacing: $h3-letter-spacing;
    color: $color-primary;
  }

  &#{&}--appearance-h4 {
    font-family: chains.$font-family-display;
    font-size: $h4-font-size;
    font-weight: $h4-font-weight;
    line-height: $h4-line-height;
    letter-spacing: $h4-letter-spacing;
    color: $color-primary;
  }

  &#{&}--appearance-h5 {
    font-family: chains.$font-family-display;
    font-size: $h5-font-size;
    font-weight: $h5-font-weight;
    line-height: $h5-line-height;
    letter-spacing: $h5-letter-spacing;
    color: var(--wds-color-text-standard-secondary, var(--wsr-color-D20, #333853));
  }

  &#{&}--appearance-h6 {
    font-family: chains.$font-family-display;
    font-size: $h6-font-size;
    font-weight: $h6-font-weight;
    line-height: $h6-line-height;
    letter-spacing: $h6-letter-spacing;
    color: $color-primary;
  }

  &#{&}--size-extra-large {
    font-family: chains.$font-family-display;
    font-size: $h1-font-size;
    font-weight: $h1-font-weight;
    line-height: $h1-line-height;
    letter-spacing: $h1-letter-spacing;
    color: $color-primary;
  }

  &#{&}--size-large {
    font-family: chains.$font-family-display;
    font-size: $h2-font-size;
    font-weight: $h2-font-weight;
    line-height: $h2-line-height;
    letter-spacing: $h2-letter-spacing;
    color: $color-primary;
  }

  &#{&}--size-medium {
    font-family: chains.$font-family-display;
    font-size: $h3-font-size;
    font-weight: $h3-font-weight;
    line-height: $h3-line-height;
    letter-spacing: $h3-letter-spacing;
    color: $color-primary;
  }

  &#{&}--size-small {
    font-family: chains.$font-family-display;
    font-size: $h4-font-size;
    font-weight: $h4-font-weight;
    line-height: $h4-line-height;
    letter-spacing: $h4-letter-spacing;
    color: $color-primary;
  }

  &#{&}--size-tiny {
    font-family: chains.$font-family-display;
    font-size: $h5-font-size;
    font-weight: $h5-font-weight;
    line-height: $h5-line-height;
    letter-spacing: $h5-letter-spacing;
    color: $color-primary;
  }

  &#{&}--size-extra-tiny {
    font-family: chains.$font-family-display;
    font-size: $h6-font-size;
    font-weight: $h6-font-weight;
    line-height: $h6-line-height;
    letter-spacing: $h6-letter-spacing;
    color: $color-primary;
  }

  &#{&}--light {
    color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
  }
}