@use "./site-config";
@use "./colors";
@use "./typography";
@use "./heading-font-sizes";
@use "s360-scss-toolkit";

%_heading {
  font-size: var(--heading--font-size);
  color: var(--heading--color);
  line-height: var(--heading--line-height, 1);
  font-family: var(--heading--font-family);
  font-weight: var(--heading--font-weight);
  text-transform: var(--heading--text-transform);
  transition: var(--heading--transition, all 200ms ease-in-out);
  margin-top: var(--heading--margin-top);
  margin-bottom: var(--heading--margin-bottom);

  &:first-child {
    --heading--margin-top: 0;
  }
}

%heading-margin-top {
  --heading--margin-top: 1em;
}

%heading-margin-bottom {
  --heading--margin-bottom: 0.5em;
}

%heading-as-h1 {
  --heading--font-size: var(--h1--font-size, #{ heading-font-sizes.h1-font-size() });
  @extend %_heading;
}

%heading-as-h2 {
  --heading--font-size: var(--h2--font-size, #{ heading-font-sizes.h2-font-size() });
  @extend %_heading;
}

%heading-as-h3 {
  --heading--font-size: var(--h3--font-size, #{ heading-font-sizes.h3-font-size() });
  @extend %_heading;
}

%heading-as-h4 {
  --heading--font-size: var(--h4--font-size, #{ heading-font-sizes.h4-font-size() });
  @extend %_heading;
}
