{"version":3,"sources":["../../../../src/govuk/components/notification-banner/_index.scss"],"names":[],"mappings":"AAAA,gBAAgB;;AAEhB,oBAAoB;;AAEpB;EACE;IACE,8BAA8B;IAC9B,6CAA6C;;IAE7C,iCAAiC;IACjC,4CAA4C;;IAE5C,gDAAgD;;IAEhD;MACE,iCAAiC;MACjC,6CAA6C;IAC/C;EACF;;EAEA;IACE,8CAA8C;;IAE9C,2EAA2E;IAC3E,4BAA4B;IAC5B,oCAAoC;;IAEpC;MACE,8CAA8C;IAChD;EACF;;EAEA;IACE,yEAAyE;IACzE,6CAA6C;IAC7C,mCAAmC;IACnC,qCAAqC;IACrC,SAAS;IACT,UAAU;IACV,4BAA4B;EAC9B;;EAEA;IACE,iCAAiC;IACjC,yBAAyB;;IAEzB,oCAAoC;IACpC,0DAA0D;;IAE1D;MACE,wBAAwB;IAC1B;;IAEA,yEAAyE;IACzE,iEAAiE;IACjE;MACE,wEAAwE;MACxE,8BAA8B;MAC9B,sBAAsB;;MAEtB,wDAAwD;MACxD,mFAAmF;;MAEnF,mDAAmD;MACnD,yDAAyD;MACzD,4CAA4C;IAC9C;;IAEA;MACE,gBAAgB;IAClB;EACF;;EAEA;IACE,mCAAmC;IACnC,qCAAqC;;IAErC,4BAA4B;;IAE5B,UAAU;EACZ;;EAEA;IACE,0BAA0B;IAC1B,0CAA0C;EAC5C;;EAEA;IACE,8CAA8C;;IAE9C,kDAAkD;;IAElD;MACE,iCAAiC;IACnC;EACF;AACF","file":"_index.scss","sourcesContent":["@use \"sass:math\";\n\n@import \"../../base\";\n\n@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;\n    border-color: govuk-functional-colour(brand);\n\n    background-color: govuk-functional-colour(brand);\n\n    &:focus {\n      outline: $govuk-focus-width solid;\n      outline-color: govuk-functional-colour(focus);\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\n    // text in high contrast mode\n    border-bottom: 1px solid transparent;\n\n    @media #{govuk-from-breakpoint(tablet)} {\n      padding: 2px govuk-spacing(4) govuk-spacing(1);\n    }\n  }\n\n  .govuk-notification-banner__title {\n    // Set the size again because this element is a heading and the user agent\n    // font size overrides the inherited font size\n    @include govuk-font-size($size: 19);\n    @include govuk-typography-weight-bold;\n    margin: 0;\n    padding: 0;\n    color: govuk-colour(\"white\");\n  }\n\n  .govuk-notification-banner__content {\n    $padding-tablet: govuk-spacing(4);\n    padding: govuk-spacing(3);\n\n    color: govuk-functional-colour(text);\n    background-color: govuk-functional-colour(body-background);\n\n    @media #{govuk-from-breakpoint(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: math.div($govuk-page-width * 2, 3) - math.div($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($size: 24);\n    @include govuk-typography-weight-bold;\n\n    margin: 0 0 govuk-spacing(3);\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-functional-colour(success);\n\n    background-color: govuk-functional-colour(success);\n\n    .govuk-notification-banner__link {\n      @include govuk-link-style-success;\n    }\n  }\n}\n"]}