@use "sass:math";
@use "../../core/settings" as *;
@use "../../core/tools" as *;
@use "../../core/helpers" as *;

////
/// Notification banner component
///
/// @group components/notification-banner
////

@include nhsuk-exports("nhsuk/components/notification-banner") {
  .nhsuk-notification-banner {
    box-sizing: border-box;
    border: $nhsuk-border-width solid $nhsuk-brand-colour;

    @include nhsuk-font($size: 19);
    @include nhsuk-responsive-margin(8, "bottom");

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

  .nhsuk-notification-banner__header {
    padding-top: 2px;
    padding-bottom: nhsuk-spacing(1);

    // Ensures the notification header appears separate to the notification body
    // text in high contrast mode
    border-bottom: 1px solid transparent;
    background-color: $nhsuk-brand-colour;

    @include nhsuk-responsive-padding(4, ("left", "right"));
  }

  .nhsuk-notification-banner__title {
    margin: 0;
    padding: 0;
    color: $nhsuk-reverse-text-colour;

    // Set the size again because this element is a heading and the user agent
    // font size overrides the inherited font size
    @include nhsuk-font($size: 19, $weight: bold);
  }

  .nhsuk-notification-banner__content {
    @include nhsuk-text-colour;
    @include nhsuk-responsive-padding(4);

    // 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: math.div($nhsuk-page-width * 2, 3) - math.div($nhsuk-gutter, 3);

      // ...and then factor in the left border and padding
      @include nhsuk-responsive-spacing(-5, "max-width", $adjustment: $two-col-width - ($nhsuk-border-width * 2));
    }

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

  .nhsuk-notification-banner__heading {
    margin: 0 0 nhsuk-spacing(3);
    padding: 0;

    @include nhsuk-font($size: 26, $weight: bold);
  }

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

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

    .nhsuk-notification-banner__header {
      background-color: $nhsuk-success-text-colour;
    }

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