@include moaland-exports("moaland/component/label") {
  .moaland-label {
    @include moaland-font($size: 19);
    @include moaland-text-colour;

    display: block;

    margin-bottom: moaland-spacing(1);
  }

  // Modifiers that make labels look more like their equivalent headings

  .moaland-label--xl {
    @include moaland-font($size: 48, $weight: bold);
    margin-bottom: moaland-spacing(3);
  }

  .moaland-label--l {
    @include moaland-font($size: 36, $weight: bold);
    margin-bottom: moaland-spacing(3);
  }

  .moaland-label--m {
    @include moaland-font($size: 24, $weight: bold);
    margin-bottom: moaland-spacing(2);
  }

  .moaland-label--s {
    @include moaland-font($size: 19, $weight: bold);
  }

  // When the label is nested inside a heading, override the heading so that it
  // does not have a margin. Effectively we want to be able to treat the heading
  // as if it is not there.
  //
  // This breaks BEM conventions because it exists as a parent of the 'block',
  // so we can't really consider an element.
  .moaland-label-wrapper {
    margin: 0;
  }
}