@import "../../typography/style/mixins";

@include component-rules($petals--heading-component-name) {
  @include typo-common-rules(true);

  &--level1 {
    margin-top: var($__petals--heading-level1-margin-top, $petals--heading-level1-margin-top);
    margin-bottom: var($__petals--heading-level1-margin-bottom, $petals--heading-level1-margin-bottom);
    font-size: var($__petals--heading-level1-font-size, $petals--heading-level1-font-size);
    font-weight: var($__petals--heading-level1-font-weight, $petals--heading-level1-font-weight);
    line-height: var($__petals--heading-level1-line-height, $petals--heading-level1-line-height);
  }

  &--level2 {
    margin-top: var($__petals--heading-level2-margin-top, $petals--heading-level2-margin-top);
    margin-bottom: var($__petals--heading-level2-margin-bottom, $petals--heading-level2-margin-bottom);
    font-size: var($__petals--heading-level2-font-size, $petals--heading-level2-font-size);
    font-weight: var($__petals--heading-level2-font-weight, $petals--heading-level2-font-weight);
    line-height: var($__petals--heading-level2-line-height, $petals--heading-level2-line-height);
  }

  &--level3 {
    margin-top: var($__petals--heading-level3-margin-top, $petals--heading-level3-margin-top);
    margin-bottom: var($__petals--heading-level3-margin-bottom, $petals--heading-level3-margin-bottom);
    font-size: var($__petals--heading-level3-font-size, $petals--heading-level3-font-size);
    font-weight: var($__petals--heading-level3-font-weight, $petals--heading-level3-font-weight);
    line-height: var($__petals--heading-level3-line-height, $petals--heading-level3-line-height);
  }

  &--level4 {
    margin-top: var($__petals--heading-level4-margin-top, $petals--heading-level4-margin-top);
    margin-bottom: var($__petals--heading-level4-margin-bottom, $petals--heading-level4-margin-bottom);
    font-size: var($__petals--heading-level4-font-size, $petals--heading-level4-font-size);
    font-weight: var($__petals--heading-level4-font-weight, $petals--heading-level4-font-weight);
    line-height: var($__petals--heading-level4-line-height, $petals--heading-level4-line-height);
  }

  &--level5 {
    margin-top: var($__petals--heading-level5-margin-top, $petals--heading-level5-margin-top);
    margin-bottom: var($__petals--heading-level5-margin-bottom, $petals--heading-level5-margin-bottom);
    font-size: var($__petals--heading-level5-font-size, $petals--heading-level5-font-size);
    font-weight: var($__petals--heading-level5-font-weight, $petals--heading-level5-font-weight);
    line-height: var($__petals--heading-level5-line-height, $petals--heading-level5-line-height);
  }

  &--level6 {
    margin-top: var($__petals--heading-level6-margin-top, $petals--heading-level6-margin-top);
    margin-bottom: var($__petals--heading-level6-margin-bottom, $petals--heading-level6-margin-bottom);
    font-size: var($__petals--heading-level6-font-size, $petals--heading-level6-font-size);
    font-weight: var($__petals--heading-level6-font-weight, $petals--heading-level6-font-weight);
    line-height: var($__petals--heading-level6-line-height, $petals--heading-level6-line-height);
  }
}