@include moaland-exports("moaland/component/notification-banner") {
  .moaland-notification-banner {
    @include moaland-font($size: 19);
    @include moaland-responsive-margin(8, "bottom");

    border: $moaland-border-width solid $moaland-brand-colour;

    background-color: $moaland-brand-colour;

    &:focus {
      outline: $moaland-focus-width solid $moaland-focus-colour;
    }
  }

  .moaland-notification-banner__header {
    padding: 2px moaland-spacing(3) moaland-spacing(1);

    // Ensures the notification header appears separate to the notification body text in high contrast mode
    border-bottom: 1px solid transparent;

    @include moaland-media-query($from: tablet) {
      padding: 2px moaland-spacing(4) moaland-spacing(1);
    }
  }

  .moaland-notification-banner__title {
    @include moaland-font($size: 19, $weight: bold);

    margin: 0;

    padding: 0;

    color: moaland-colour("white");
  }

  .moaland-notification-banner__content {
    $padding-tablet: moaland-spacing(4);
    @include moaland-text-colour;
    padding: moaland-spacing(3);

    background-color: $moaland-body-background-colour;

    @include moaland-media-query($from: tablet) {
      padding: $padding-tablet;
    }

    // Wrap content at the same place that a 2/3 grid column ends, to maintain
    // shorter line-lengths when the notification banner is full width
    > * {
      // When elements have their own padding (like lists), include the padding
      // in the max-width calculation
      box-sizing: border-box;

      // Calculate the internal width of a two-thirds column...
      $two-col-width: ($moaland-page-width * 2 / 3) - ($moaland-gutter * 1 / 3);

      // ...and then factor in the left border and padding
      $banner-exterior: ($padding-tablet + $moaland-border-width);
      max-width: $two-col-width - $banner-exterior;
    }

    > :last-child {
      margin-bottom: 0;
    }
  }

  .moaland-notification-banner__heading {
    @include moaland-font($size: 24, $weight: bold);

    margin: 0 0 moaland-spacing(3) 0;

    padding: 0;
  }

  .moaland-notification-banner__link {
    @include moaland-link-common;
    @include moaland-link-style-no-visited-state;
  }

  .moaland-notification-banner--success {
    border-color: $moaland-success-colour;

    background-color: $moaland-success-colour;

    .moaland-notification-banner__link {
      @include moaland-link-style-success;
    }
  }
}