@use 'variables';
@use 'mixins';

@include mixins.parent {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: variables.$weight-headings;
    line-height: 1.2;

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

    @if variables.$enable-custom-colors {
      color: variables.$text-headings;
    }
  }

  h1 {
    @include mixins.heading($font-size: 2.5, $with-border: true);
    line-height: 1.5;
  }

  h2 {
    @include mixins.heading($font-size: 2, $with-border: true);
    line-height: 1.4;
  }

  h3 {
    @include mixins.heading($font-size: 1.5);
  }

  h4 {
    @include mixins.heading($font-size: 1.25);
  }

  h5 {
    @include mixins.heading($font-size: 1.125);
  }

  h6 {
    @include mixins.heading($font-size: 1);
  }

  h1 + * {
    margin-top: 1.5rem;
  }

  h2 + *,
  h3 + *,
  h4 + * {
    margin-top: 0;
  }

  h5 + * {
    margin-top: 0.25em;
  }
}