@use 'sass:map';
@use 'variables' as *;

%heading {
  font-family: $headings-font-family;
  color: var(--#{$prefix}body);
  margin-bottom: var(--#{$prefix}font-size-base);
}

h1,
.h1 {
  @extend %heading;
  font-size: var(--#{$prefix}font-size-h1);
  font-weight: bold;
}

h2,
.h2 {
  @extend %heading;
  font-size: var(--#{$prefix}font-size-h2);
  font-weight: bold;
}

h3,
.h3 {
  @extend %heading;
  font-size: var(--#{$prefix}font-size-h3);
  font-weight: 600;
}

h4,
.h4 {
  @extend %heading;
  font-size: var(--#{$prefix}font-size-h4);
  font-weight: 600;
}

h5,
.h5 {
  @extend %heading;
  font-size: var(--#{$prefix}font-size-h5);
}

h6,
.h6 {
  @extend %heading;
  font-size: var(--#{$prefix}font-size-h6);
}