// We set the display property to 'block', so that a user of this element can overwrite the margins.
:host {
  display: block;
}

:host([size='1']) {
  margin: var(--heading-margin, 20px 0);
}

:host([size='2']) {
  margin: var(--heading-margin, 18px 0);
}

:host([size='3']) {
  margin: var(--heading-margin, 16px 0);
}

:host([size='4']) {
  margin: var(--heading-margin, 14px 0);
}

:host([size='5']) {
  margin: var(--heading-margin, 12px 0);
}

:host([size='6']) {
  margin: var(--heading-margin, 10px 0);
}

:host([size='1']) .a-heading {
  @include headline(h1, primary);
}

:host([size='2']) .a-heading {
  @include headline(h2, primary);
}

:host([size='3']) .a-heading {
  @include headline(h3, primary);
}

:host([size='4']) .a-heading {
  @include headline(h4, primary);
}

:host([size='5']) .a-heading {
  @include headline(h5, primary);
}

:host([size='6']) .a-heading {
  @include headline(h6, primary);
}

:host([secondary]) .a-heading {
  font-family: $font-family-secondary;
}

.a-heading {
  margin: 0;
}
