{"version":3,"sources":["../../../../src/govuk/components/notification-banner/_index.scss"],"names":[],"mappings":"AAAA;EACE;IACE,8BAA8B;IAC9B,6CAA6C;;IAE7C,qDAAqD;;IAErD,qCAAqC;;IAErC;MACE,qDAAqD;IACvD;EACF;;EAEA;IACE,8CAA8C;;IAE9C,sGAAsG;IACtG,oCAAoC;;IAEpC;MACE,8CAA8C;IAChD;EACF;;EAEA;IACE,6CAA6C;;IAE7C,SAAS;;IAET,UAAU;;IAEV,4BAA4B;EAC9B;;EAEA;IACE,iCAAiC;IACjC,0BAA0B;IAC1B,yBAAyB;;IAEzB,+CAA+C;;IAE/C;MACE,wBAAwB;IAC1B;;IAEA,yEAAyE;IACzE,iEAAiE;IACjE;MACE,wEAAwE;MACxE,8BAA8B;MAC9B,sBAAsB;;MAEtB,wDAAwD;MACxD,qEAAqE;;MAErE,mDAAmD;MACnD,yDAAyD;MACzD,4CAA4C;IAC9C;;IAEA;MACE,gBAAgB;IAClB;EACF;;EAEA;IACE,6CAA6C;;IAE7C,8BAA8B;;IAE9B,UAAU;EACZ;;EAEA;IACE,0BAA0B;IAC1B,0CAA0C;EAC5C;;EAEA;IACE,mCAAmC;;IAEnC,uCAAuC;;IAEvC;MACE,iCAAiC;IACnC;EACF;AACF","file":"_index.scss","sourcesContent":["@include govuk-exports(\"govuk/component/notification-banner\") {\n  .govuk-notification-banner {\n    @include govuk-font($size: 19);\n    @include govuk-responsive-margin(8, \"bottom\");\n\n    border: $govuk-border-width solid $govuk-brand-colour;\n\n    background-color: $govuk-brand-colour;\n\n    &:focus {\n      outline: $govuk-focus-width solid $govuk-focus-colour;\n    }\n  }\n\n  .govuk-notification-banner__header {\n    padding: 2px govuk-spacing(3) govuk-spacing(1);\n\n    // Ensures the notification header appears separate to the notification body text in high contrast mode\n    border-bottom: 1px solid transparent;\n\n    @include govuk-media-query($from: tablet) {\n      padding: 2px govuk-spacing(4) govuk-spacing(1);\n    }\n  }\n\n  .govuk-notification-banner__title {\n    @include govuk-font($size: 19, $weight: bold);\n\n    margin: 0;\n\n    padding: 0;\n\n    color: govuk-colour(\"white\");\n  }\n\n  .govuk-notification-banner__content {\n    $padding-tablet: govuk-spacing(4);\n    @include govuk-text-colour;\n    padding: govuk-spacing(3);\n\n    background-color: $govuk-body-background-colour;\n\n    @include govuk-media-query($from: tablet) {\n      padding: $padding-tablet;\n    }\n\n    // Wrap content at the same place that a 2/3 grid column ends, to maintain\n    // shorter line-lengths when the notification banner is full width\n    > * {\n      // When elements have their own padding (like lists), include the padding\n      // in the max-width calculation\n      box-sizing: border-box;\n\n      // Calculate the internal width of a two-thirds column...\n      $two-col-width: ($govuk-page-width * 2 / 3) - ($govuk-gutter * 1 / 3);\n\n      // ...and then factor in the left border and padding\n      $banner-exterior: ($padding-tablet + $govuk-border-width);\n      max-width: $two-col-width - $banner-exterior;\n    }\n\n    > :last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  .govuk-notification-banner__heading {\n    @include govuk-font($size: 24, $weight: bold);\n\n    margin: 0 0 govuk-spacing(3) 0;\n\n    padding: 0;\n  }\n\n  .govuk-notification-banner__link {\n    @include govuk-link-common;\n    @include govuk-link-style-no-visited-state;\n  }\n\n  .govuk-notification-banner--success {\n    border-color: $govuk-success-colour;\n\n    background-color: $govuk-success-colour;\n\n    .govuk-notification-banner__link {\n      @include govuk-link-style-success;\n    }\n  }\n}\n"]}