nhsuk-frontend 10.5.0 → 10.5.1

package/dist/nhsuk/common/nhsuk-frontend-version.js

@@ -10,7 +10,7 @@
  *
  * {@link https://github.com/nhsuk/nhsuk-frontend/releases}
  */
-const version = '10.5.0';
+const version = '10.5.1';
 
 exports.version = version;
 //# sourceMappingURL=nhsuk-frontend-version.js.map

package/dist/nhsuk/common/nhsuk-frontend-version.mjs

@@ -8,7 +8,7 @@
  *
  * {@link https://github.com/nhsuk/nhsuk-frontend/releases}
  */
-const version = '10.5.0';
+const version = '10.5.1';
 
 export { version };
 //# sourceMappingURL=nhsuk-frontend-version.mjs.map

package/dist/nhsuk/components/action-link/_index.scss

@@ -70,25 +70,13 @@
       }
     }
 
-    &:focus .nhsuk-icon {
-      // stylelint-disable-next-line declaration-no-important
-      fill: $nhsuk-focus-text-colour !important;
-
-      @media screen and (forced-colors: active), (-ms-high-contrast: active) {
-        // stylelint-disable-next-line declaration-no-important
-        fill: highlight !important;
-      }
-    }
-
     &:not(:focus) .nhsuk-icon,
     &:not(:focus):hover .nhsuk-icon,
     &:not(:focus):active .nhsuk-icon {
-      // stylelint-disable-next-line declaration-no-important
-      fill: nhsuk-colour("green") !important;
+      fill: nhsuk-colour("green");
 
       @media screen and (forced-colors: active), (-ms-high-contrast: active) {
-        // stylelint-disable-next-line declaration-no-important
-        fill: buttontext !important;
+        fill: buttontext;
       }
     }
   }
@@ -99,12 +87,10 @@
     &:not(:focus) .nhsuk-icon,
     &:not(:focus):hover .nhsuk-icon,
     &:not(:focus):active .nhsuk-icon {
-      // stylelint-disable-next-line declaration-no-important
-      fill: $nhsuk-reverse-text-colour !important;
+      fill: $nhsuk-reverse-text-colour;
 
       @media screen and (forced-colors: active), (-ms-high-contrast: active) {
-        // stylelint-disable-next-line declaration-no-important
-        fill: buttontext !important;
+        fill: buttontext;
       }
     }
   }

package/dist/nhsuk/components/action-link/_index.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/nhsuk/components/action-link/_index.scss"],"names":[],"mappings":"AAAA,gBAAgB;AAChB,+BAA+B;AAC/B,4BAA4B;AAC5B,8BAA8B;AAC9B,kCAAkC;;AAElC,GAAG;AACH,wBAAwB;AACxB,EAAE;AACF,mEAAmE;AACnE,iDAAiD;AACjD,kEAAkE;AAClE,gEAAgE;AAChE,EAAE;AACF,gCAAgC;AAChC,GAAG;;AAEH;EACE,oDAAoD;EACpD,qDAAqD;;EAErD,wCAAwC;EACxC,qDAAqD;;EAErD;IACE,sBAAsB;IACtB,qBAAqB,EAAE,KAAK;;IAE5B,kBAAkB,EAAE,KAAK;;IAEzB,sDAAsD,EAAE,KAAK;;IAE7D,SAAS;;IAET,gBAAgB;;IAEhB,gBAAgB;;IAEhB,eAAe;;IAEf;MACE;QACE,0BAA0B,EAAE,KAAK;MACnC;IACF;;IAEA,uEAAuE;IACvE,iCAAiC;IACjC,sCAAsC;;IAEtC;MACE,wDAAwD;IAC1D;;IAEA,6CAA6C;;IAE7C;MACE,sDAAsD,EAAE,KAAK;MAC7D,mEAAmE;IACrE;;IAEA;MACE,kBAAkB;MAClB,2BAA2B;;MAE3B;QACE,2BAA2B;QAC3B,wBAAwB;QACxB,yBAAyB;MAC3B;IACF;;IAEA;MACE,sDAAsD;MACtD,yCAAyC;;MAEzC;QACE,sDAAsD;QACtD,0BAA0B;MAC5B;IACF;;IAEA;;;MAGE,sDAAsD;MACtD,sCAAsC;;MAEtC;QACE,sDAAsD;QACtD,2BAA2B;MAC7B;IACF;EACF;;EAEA;IACE,iCAAiC;;IAEjC;;;MAGE,sDAAsD;MACtD,2CAA2C;;MAE3C;QACE,sDAAsD;QACtD,2BAA2B;MAC7B;IACF;EACF;AACF","file":"_index.scss","sourcesContent":["@use \"sass:math\";\n@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n@forward \"../../core/styles/icons\";\n\n////\n/// Action link component\n///\n/// 1. Display inline-block so top and bottom margins are respected.\n/// 2. Add sufficient space between icon and text.\n/// 3. Position is relative so the arrow icon can display absolute.\n/// 4. Text decoration none used to override default <a> styling.\n///\n/// @group components/action-link\n////\n\n@include nhsuk-exports(\"nhsuk/components/action-link\") {\n  $_small-icon-size: nhsuk-px-to-rem($nhsuk-icon-size);\n  $_small-icon-spacing: math.div($_small-icon-size, 10);\n\n  $_large-icon-size: nhsuk-px-to-rem(36px);\n  $_large-icon-spacing: math.div($_large-icon-size, 10);\n\n  .nhsuk-action-link {\n    box-sizing: border-box;\n    display: inline-block; // [1]\n\n    position: relative; // [3]\n\n    padding-left: $_small-icon-size + $_small-icon-spacing; // [2]\n\n    border: 0;\n\n    background: none;\n\n    text-align: left;\n\n    cursor: pointer;\n\n    &:not(:focus):hover {\n      .nhsuk-action-link__text {\n        text-decoration: underline; // [4]\n      }\n    }\n\n    @include nhsuk-font(22, $weight: bold, $line-height: $_small-icon-size);\n    @include nhsuk-link-style-default;\n    @include nhsuk-link-style-no-underline;\n\n    @include nhsuk-print-colour {\n      @include nhsuk-link-style-text($nhsuk-print-text-colour);\n    }\n\n    @include nhsuk-responsive-margin(6, \"bottom\");\n\n    @include nhsuk-media-query($from: tablet) {\n      padding-left: $_large-icon-size + $_large-icon-spacing; // [2]\n      line-height: nhsuk-line-height($_large-icon-size, $font-size: 22px);\n    }\n\n    .nhsuk-icon {\n      position: absolute;\n      left: -$_small-icon-spacing;\n\n      @include nhsuk-media-query($from: tablet) {\n        left: -$_large-icon-spacing;\n        width: $_large-icon-size;\n        height: $_large-icon-size;\n      }\n    }\n\n    &:focus .nhsuk-icon {\n      // stylelint-disable-next-line declaration-no-important\n      fill: $nhsuk-focus-text-colour !important;\n\n      @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n        // stylelint-disable-next-line declaration-no-important\n        fill: highlight !important;\n      }\n    }\n\n    &:not(:focus) .nhsuk-icon,\n    &:not(:focus):hover .nhsuk-icon,\n    &:not(:focus):active .nhsuk-icon {\n      // stylelint-disable-next-line declaration-no-important\n      fill: nhsuk-colour(\"green\") !important;\n\n      @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n        // stylelint-disable-next-line declaration-no-important\n        fill: buttontext !important;\n      }\n    }\n  }\n\n  .nhsuk-action-link--reverse {\n    @include nhsuk-link-style-reverse;\n\n    &:not(:focus) .nhsuk-icon,\n    &:not(:focus):hover .nhsuk-icon,\n    &:not(:focus):active .nhsuk-icon {\n      // stylelint-disable-next-line declaration-no-important\n      fill: $nhsuk-reverse-text-colour !important;\n\n      @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n        // stylelint-disable-next-line declaration-no-important\n        fill: buttontext !important;\n      }\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/nhsuk/components/action-link/_index.scss"],"names":[],"mappings":"AAAA,gBAAgB;AAChB,+BAA+B;AAC/B,4BAA4B;AAC5B,8BAA8B;AAC9B,kCAAkC;;AAElC,GAAG;AACH,wBAAwB;AACxB,EAAE;AACF,mEAAmE;AACnE,iDAAiD;AACjD,kEAAkE;AAClE,gEAAgE;AAChE,EAAE;AACF,gCAAgC;AAChC,GAAG;;AAEH;EACE,oDAAoD;EACpD,qDAAqD;;EAErD,wCAAwC;EACxC,qDAAqD;;EAErD;IACE,sBAAsB;IACtB,qBAAqB,EAAE,KAAK;;IAE5B,kBAAkB,EAAE,KAAK;;IAEzB,sDAAsD,EAAE,KAAK;;IAE7D,SAAS;;IAET,gBAAgB;;IAEhB,gBAAgB;;IAEhB,eAAe;;IAEf;MACE;QACE,0BAA0B,EAAE,KAAK;MACnC;IACF;;IAEA,uEAAuE;IACvE,iCAAiC;IACjC,sCAAsC;;IAEtC;MACE,wDAAwD;IAC1D;;IAEA,6CAA6C;;IAE7C;MACE,sDAAsD,EAAE,KAAK;MAC7D,mEAAmE;IACrE;;IAEA;MACE,kBAAkB;MAClB,2BAA2B;;MAE3B;QACE,2BAA2B;QAC3B,wBAAwB;QACxB,yBAAyB;MAC3B;IACF;;IAEA;;;MAGE,2BAA2B;;MAE3B;QACE,gBAAgB;MAClB;IACF;EACF;;EAEA;IACE,iCAAiC;;IAEjC;;;MAGE,gCAAgC;;MAEhC;QACE,gBAAgB;MAClB;IACF;EACF;AACF","file":"_index.scss","sourcesContent":["@use \"sass:math\";\n@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n@forward \"../../core/styles/icons\";\n\n////\n/// Action link component\n///\n/// 1. Display inline-block so top and bottom margins are respected.\n/// 2. Add sufficient space between icon and text.\n/// 3. Position is relative so the arrow icon can display absolute.\n/// 4. Text decoration none used to override default <a> styling.\n///\n/// @group components/action-link\n////\n\n@include nhsuk-exports(\"nhsuk/components/action-link\") {\n  $_small-icon-size: nhsuk-px-to-rem($nhsuk-icon-size);\n  $_small-icon-spacing: math.div($_small-icon-size, 10);\n\n  $_large-icon-size: nhsuk-px-to-rem(36px);\n  $_large-icon-spacing: math.div($_large-icon-size, 10);\n\n  .nhsuk-action-link {\n    box-sizing: border-box;\n    display: inline-block; // [1]\n\n    position: relative; // [3]\n\n    padding-left: $_small-icon-size + $_small-icon-spacing; // [2]\n\n    border: 0;\n\n    background: none;\n\n    text-align: left;\n\n    cursor: pointer;\n\n    &:not(:focus):hover {\n      .nhsuk-action-link__text {\n        text-decoration: underline; // [4]\n      }\n    }\n\n    @include nhsuk-font(22, $weight: bold, $line-height: $_small-icon-size);\n    @include nhsuk-link-style-default;\n    @include nhsuk-link-style-no-underline;\n\n    @include nhsuk-print-colour {\n      @include nhsuk-link-style-text($nhsuk-print-text-colour);\n    }\n\n    @include nhsuk-responsive-margin(6, \"bottom\");\n\n    @include nhsuk-media-query($from: tablet) {\n      padding-left: $_large-icon-size + $_large-icon-spacing; // [2]\n      line-height: nhsuk-line-height($_large-icon-size, $font-size: 22px);\n    }\n\n    .nhsuk-icon {\n      position: absolute;\n      left: -$_small-icon-spacing;\n\n      @include nhsuk-media-query($from: tablet) {\n        left: -$_large-icon-spacing;\n        width: $_large-icon-size;\n        height: $_large-icon-size;\n      }\n    }\n\n    &:not(:focus) .nhsuk-icon,\n    &:not(:focus):hover .nhsuk-icon,\n    &:not(:focus):active .nhsuk-icon {\n      fill: nhsuk-colour(\"green\");\n\n      @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n        fill: buttontext;\n      }\n    }\n  }\n\n  .nhsuk-action-link--reverse {\n    @include nhsuk-link-style-reverse;\n\n    &:not(:focus) .nhsuk-icon,\n    &:not(:focus):hover .nhsuk-icon,\n    &:not(:focus):active .nhsuk-icon {\n      fill: $nhsuk-reverse-text-colour;\n\n      @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n        fill: buttontext;\n      }\n    }\n  }\n}\n"]}

package/dist/nhsuk/components/button/_index.scss

@@ -150,6 +150,16 @@ $button-shadow-size: $nhsuk-button-shadow-size;
       top: -($nhsuk-border-width-form-element + $nhsuk-button-shadow-size);
       bottom: -$nhsuk-border-width-form-element;
     }
+
+    // Override high-contrast link colours to match buttons
+    @media screen and (forced-colors: active), (-ms-high-contrast: active) {
+      color: buttontext;
+
+      &,
+      &::before {
+        border-color: buttonborder;
+      }
+    }
   }
 
   // Button variations

package/dist/nhsuk/components/button/_index.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/nhsuk/components/button/_index.scss"],"names":[],"mappings":"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","file":"_index.scss","sourcesContent":["@use \"sass:math\";\n@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n\n////\n/// Button component\n///\n/// 1. Ensure that any global link styles are overridden.\n/// 2. Fix unwanted button padding in Firefox.\n/// 3. Use a pseudo element to expand the click target area to include the\n///    button's shadow as well, in case users try to click it.\n/// 4. Use a pseudo element to expand and cover the button's bounds, used to\n///    add a button shadow or border without affecting the total height\n/// 5. Adjust margin and padding to accommodate button shadow\n///\n/// @group components/button\n////\n\n$nhsuk-button-padding-top-bottom-mobile: nhsuk-px-to-rem(10px);\n$nhsuk-button-padding-top-bottom-desktop: nhsuk-px-to-rem(14px);\n$nhsuk-button-padding-top-bottom-small: nhsuk-px-to-rem(6px);\n$nhsuk-button-padding-left-right: nhsuk-px-to-rem(16px);\n$nhsuk-button-padding-left-right-small: nhsuk-px-to-rem(12px);\n\n$nhsuk-button-search-icon-size: 28px;\n$nhsuk-button-search-icon-size-large: 38px;\n\n// @deprecated To be removed in v11.0\n$button-border-radius: $nhsuk-button-border-radius;\n$button-padding-top-bottom-mobile: $nhsuk-button-padding-top-bottom-mobile;\n$button-padding-top-bottom-desktop: $nhsuk-button-padding-top-bottom-desktop;\n$button-padding-left-right: $nhsuk-button-padding-left-right;\n$button-shadow-size: $nhsuk-button-shadow-size;\n\n@include nhsuk-exports(\"nhsuk/components/button\") {\n  .nhsuk-button {\n    box-sizing: border-box;\n\n    display: inline-block;\n\n    position: relative;\n\n    width: 100%;\n    min-height: nhsuk-px-to-rem(40px + $nhsuk-button-shadow-size);\n    margin-top: 0;\n    padding: $nhsuk-button-padding-top-bottom-mobile $nhsuk-button-padding-left-right; // [5]\n\n    overflow: visible;\n\n    border: $nhsuk-border-width-form-element solid transparent;\n    border-radius: nhsuk-px-to-rem($nhsuk-button-border-radius);\n\n    text-align: center;\n    vertical-align: top;\n\n    cursor: pointer;\n\n    appearance: none;\n\n    @include nhsuk-button-style(\n      $button-colour: $nhsuk-button-colour,\n      $button-hover-colour: $nhsuk-button-hover-colour,\n      $button-active-colour: $nhsuk-button-active-colour,\n      $button-text-colour: $nhsuk-button-text-colour,\n      $button-shadow-colour: $nhsuk-button-shadow-colour\n    );\n\n    @include nhsuk-font(19, $line-height: 19px, $weight: bold);\n    @include nhsuk-responsive-margin(5, \"bottom\", $adjustment: $nhsuk-button-shadow-size); // [5]\n\n    @include nhsuk-media-query($from: tablet) {\n      width: auto;\n      min-height: nhsuk-px-to-rem(52px + $nhsuk-button-shadow-size);\n      padding: $nhsuk-button-padding-top-bottom-desktop $nhsuk-button-padding-left-right; // [5]\n      line-height: nhsuk-line-height(24px, $font-size: 19px);\n    }\n\n    // [1]\n    &,\n    &:hover,\n    &:active {\n      text-decoration: none;\n    }\n\n    // [2]\n    &::-moz-focus-inner {\n      padding: 0;\n      border: 0;\n    }\n\n    // Reset focus styles added to buttons as links\n    &:focus {\n      outline: none;\n      box-shadow: none;\n    }\n\n    // Add button focus styles ensuring the active \"pressed\" state has priority\n    &:focus:not(:active),\n    &:focus:not(:active):hover {\n      @include nhsuk-focused-button;\n    }\n\n    // Remove button shadow when pressed\n    &:active,\n    &:active:focus {\n      top: $nhsuk-button-shadow-size;\n      box-shadow: none;\n    }\n\n    &:disabled {\n      pointer-events: none;\n      opacity: (0.5);\n    }\n\n    // Default pseudo element styles for [3] and [4]\n    &::before,\n    &::after {\n      content: \"\";\n\n      display: block;\n\n      position: absolute;\n      top: -$nhsuk-border-width-form-element;\n      right: -$nhsuk-border-width-form-element;\n      bottom: -$nhsuk-border-width-form-element;\n      left: -$nhsuk-border-width-form-element;\n\n      border-radius: nhsuk-px-to-rem($nhsuk-button-border-radius);\n    }\n\n    // Use a pseudo element to expand the click target area to include the\n    // button's shadow as well, in case users try to click it [3]\n    &::before {\n      bottom: -($nhsuk-border-width-form-element + $nhsuk-button-shadow-size);\n      border: $nhsuk-border-width-form-element solid transparent;\n      background-color: transparent;\n    }\n\n    // When the button is active it is shifted down by $nhsuk-button-shadow-size to\n    // denote a 'pressed' state. If the user happened to click at the very top\n    // of the button, their mouse is no longer over the button (because it has\n    // 'moved beneath them') and so the click event is not fired.\n    //\n    // This corrects that by shifting the top of the pseudo element so that it\n    // continues to cover the area that the user originally clicked, which means\n    // the click event is still fired.\n    &:active::before {\n      top: -($nhsuk-border-width-form-element + $nhsuk-button-shadow-size);\n      bottom: -$nhsuk-border-width-form-element;\n    }\n  }\n\n  // Button variations\n\n  .nhsuk-button--secondary,\n  .nhsuk-button--secondary-solid {\n    @include nhsuk-button-style(\n      $button-colour: $nhsuk-secondary-button-colour,\n      $button-border-colour: $nhsuk-secondary-button-border-colour,\n      $button-hover-colour: $nhsuk-secondary-button-hover-colour,\n      $button-active-colour: $nhsuk-secondary-button-active-colour,\n      $button-text-colour: $nhsuk-secondary-button-text-colour,\n      $button-shadow-colour: $nhsuk-secondary-button-shadow-colour\n    );\n  }\n\n  .nhsuk-button--secondary-solid {\n    background-color: $nhsuk-secondary-button-solid-background-colour;\n  }\n\n  .nhsuk-button--reverse {\n    @include nhsuk-button-style(\n      $button-colour: $nhsuk-reverse-button-colour,\n      $button-hover-colour: $nhsuk-reverse-button-hover-colour,\n      $button-active-colour: $nhsuk-reverse-button-active-colour,\n      $button-text-colour: $nhsuk-reverse-button-text-colour,\n      $button-shadow-colour: $nhsuk-reverse-button-shadow-colour\n    );\n  }\n\n  .nhsuk-button--warning {\n    @include nhsuk-button-style(\n      $button-colour: $nhsuk-warning-button-colour,\n      $button-hover-colour: $nhsuk-warning-button-hover-colour,\n      $button-active-colour: $nhsuk-warning-button-active-colour,\n      $button-text-colour: $nhsuk-button-text-colour,\n      $button-shadow-colour: $nhsuk-warning-button-shadow-colour\n    );\n  }\n\n  .nhsuk-button--brand,\n  .nhsuk-button--login {\n    @include nhsuk-button-style(\n      $button-colour: $nhsuk-login-button-colour,\n      $button-hover-colour: $nhsuk-login-button-hover-colour,\n      $button-active-colour: $nhsuk-login-button-active-colour,\n      $button-text-colour: $nhsuk-button-text-colour,\n      $button-shadow-colour: $nhsuk-login-button-shadow-colour\n    );\n  }\n\n  // =========================================================\n  // Small buttons\n  // =========================================================\n\n  .nhsuk-button--small {\n    min-height: nhsuk-px-to-rem(32px + $nhsuk-button-shadow-size);\n    padding: $nhsuk-button-padding-top-bottom-small $nhsuk-button-padding-left-right-small; // [5]\n\n    @include nhsuk-responsive-margin(4, \"bottom\", $adjustment: $nhsuk-button-shadow-size); // [5]\n\n    @include nhsuk-media-query($from: tablet) {\n      @include nhsuk-font(16, $line-height: 19px, $weight: bold);\n    }\n  }\n\n  // =========================================================\n  // Icon buttons\n  // =========================================================\n\n  .nhsuk-button--icon {\n    display: flex;\n    position: relative;\n    align-items: center;\n\n    // Add minimum width for icon-only buttons\n    min-width: nhsuk-px-to-rem(44px);\n\n    // Prevent users from selecting icon button text\n    // e.g. When double clicking the button\n    user-select: none;\n\n    @include nhsuk-media-query($until: tablet) {\n      // Align icon and text in centre of button\n      justify-content: center;\n\n      // Reduce padding to better fit icon\n      padding-top: 0;\n      padding-bottom: 0;\n    }\n  }\n\n  .nhsuk-button:not(.nhsuk-button--small) {\n    @include nhsuk-media-query($from: tablet) {\n      min-width: nhsuk-px-to-rem(66px);\n    }\n  }\n\n  .nhsuk-button .nhsuk-icon {\n    flex-shrink: 0;\n\n    // Offset icon to the left when at the end, towards text\n    &:not(:only-child):last-child {\n      margin-right: nhsuk-px-to-rem(-6px);\n      margin-left: nhsuk-px-to-rem(-$nhsuk-icon-size + 6px);\n    }\n\n    // Offset icon to the right when at the start, towards text\n    &:not(:only-child):first-child {\n      margin-right: nhsuk-px-to-rem(-$nhsuk-icon-size + 6px);\n      margin-left: nhsuk-px-to-rem(-6px);\n    }\n\n    &:only-child {\n      margin-right: nhsuk-px-to-rem(-6px);\n      margin-left: nhsuk-px-to-rem(-6px);\n    }\n\n    @include nhsuk-media-query($from: tablet) {\n      position: absolute;\n      top: 50%;\n      left: $nhsuk-button-padding-left-right;\n\n      // Offset icon vertically (from top: 50%) into the centre\n      margin-top: nhsuk-px-to-rem(math.div($nhsuk-icon-size, -2));\n\n      // Offset icon to the left when at the end, towards text\n      &:not(:only-child):last-child {\n        right: $nhsuk-button-padding-left-right;\n        left: auto;\n        margin-right: nhsuk-px-to-rem(-6px);\n        margin-left: 0;\n      }\n\n      // Offset icon to the right when at the start, towards text\n      &:not(:only-child):first-child {\n        left: $nhsuk-button-padding-left-right;\n        margin-right: 0;\n        margin-left: nhsuk-px-to-rem(-6px);\n      }\n\n      &:only-child {\n        left: 50%;\n        margin-right: 0;\n        margin-left: nhsuk-px-to-rem(math.div($nhsuk-icon-size, -2));\n      }\n    }\n  }\n\n  // Increase icon size (tablet), excluding small buttons\n  .nhsuk-button:not(.nhsuk-button--small) .nhsuk-icon {\n    @include nhsuk-media-query($from: tablet) {\n      width: nhsuk-px-to-rem($nhsuk-icon-size-large);\n      height: nhsuk-px-to-rem($nhsuk-icon-size-large);\n\n      // Offset icon vertically (from top: 50%) into the centre\n      margin-top: nhsuk-px-to-rem(math.div($nhsuk-icon-size-large, -2));\n\n      // Offset icon to the left when at the end, towards text\n      &:not(:only-child):last-child {\n        margin-left: nhsuk-px-to-rem(-$nhsuk-icon-size-large + 6px);\n      }\n\n      // Offset icon to the right when at the start, towards text\n      &:not(:only-child):first-child {\n        margin-right: nhsuk-px-to-rem(-$nhsuk-icon-size-large + 6px);\n      }\n\n      &:only-child {\n        left: 50%;\n        margin-right: 0;\n        margin-left: nhsuk-px-to-rem(math.div($nhsuk-icon-size-large, -2));\n      }\n    }\n  }\n\n  // Increase icon size (tablet), search only\n  .nhsuk-button:not(.nhsuk-button--small) .nhsuk-icon--search:only-child {\n    @include nhsuk-media-query($from: tablet) {\n      width: nhsuk-px-to-rem($nhsuk-button-search-icon-size-large);\n      height: nhsuk-px-to-rem($nhsuk-button-search-icon-size-large);\n\n      // Offset icon vertically (from top: 50%) into the centre\n      margin-top: nhsuk-px-to-rem(math.div($nhsuk-button-search-icon-size-large, -2));\n      margin-left: nhsuk-px-to-rem(math.div($nhsuk-button-search-icon-size-large, -2));\n    }\n  }\n\n  // Prevent button icon size increase for small buttons (at tablet) by\n  // overriding the core icon size increase back to default size again\n  .nhsuk-button.nhsuk-button--small .nhsuk-icon {\n    @include nhsuk-media-query($from: tablet) {\n      width: nhsuk-px-to-rem($nhsuk-icon-size);\n      height: nhsuk-px-to-rem($nhsuk-icon-size);\n\n      &:not(:only-child):last-child {\n        right: $nhsuk-button-padding-left-right-small;\n      }\n\n      &:not(:only-child):first-child {\n        left: $nhsuk-button-padding-left-right-small;\n      }\n    }\n  }\n\n  // Increase icon size, search only\n  .nhsuk-button .nhsuk-icon--search:only-child {\n    @include nhsuk-media-query($from: mobile) {\n      width: nhsuk-px-to-rem($nhsuk-button-search-icon-size);\n      height: nhsuk-px-to-rem($nhsuk-button-search-icon-size);\n    }\n  }\n\n  .nhsuk-button.nhsuk-button--small .nhsuk-icon--search:only-child {\n    @include nhsuk-media-query($from: tablet) {\n      // Offset icon vertically (from top: 50%) into the centre\n      margin-top: nhsuk-px-to-rem(math.div($nhsuk-button-search-icon-size, -2));\n      margin-left: nhsuk-px-to-rem(math.div($nhsuk-button-search-icon-size, -2));\n    }\n  }\n\n  .nhsuk-button__content {\n    display: block;\n\n    // Preserve space for icon (small) at the end\n    padding-right: nhsuk-px-to-rem($nhsuk-icon-size);\n    padding-left: 0;\n\n    // Preserve space for icon (small) at the start\n    .nhsuk-icon + & {\n      padding-right: 0;\n      padding-left: nhsuk-px-to-rem($nhsuk-icon-size);\n    }\n\n    // Move padding to content to better fit icon\n    @include nhsuk-media-query($until: tablet) {\n      padding-top: $nhsuk-button-padding-top-bottom-mobile;\n      padding-bottom: $nhsuk-button-padding-top-bottom-mobile;\n\n      .nhsuk-button.nhsuk-button--small & {\n        padding-top: $nhsuk-button-padding-top-bottom-small;\n        padding-bottom: $nhsuk-button-padding-top-bottom-small;\n      }\n    }\n\n    @include nhsuk-media-query($from: tablet) {\n      // Preserve space for icon (large) at the end\n      .nhsuk-button:not(.nhsuk-button--small) & {\n        padding-right: nhsuk-px-to-rem($nhsuk-icon-size-large);\n      }\n\n      // Preserve space for icon (large) at the start\n      .nhsuk-button:not(.nhsuk-button--small) .nhsuk-icon + & {\n        padding-right: 0;\n        padding-left: nhsuk-px-to-rem($nhsuk-icon-size-large);\n      }\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/nhsuk/components/button/_index.scss"],"names":[],"mappings":"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","file":"_index.scss","sourcesContent":["@use \"sass:math\";\n@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n\n////\n/// Button component\n///\n/// 1. Ensure that any global link styles are overridden.\n/// 2. Fix unwanted button padding in Firefox.\n/// 3. Use a pseudo element to expand the click target area to include the\n///    button's shadow as well, in case users try to click it.\n/// 4. Use a pseudo element to expand and cover the button's bounds, used to\n///    add a button shadow or border without affecting the total height\n/// 5. Adjust margin and padding to accommodate button shadow\n///\n/// @group components/button\n////\n\n$nhsuk-button-padding-top-bottom-mobile: nhsuk-px-to-rem(10px);\n$nhsuk-button-padding-top-bottom-desktop: nhsuk-px-to-rem(14px);\n$nhsuk-button-padding-top-bottom-small: nhsuk-px-to-rem(6px);\n$nhsuk-button-padding-left-right: nhsuk-px-to-rem(16px);\n$nhsuk-button-padding-left-right-small: nhsuk-px-to-rem(12px);\n\n$nhsuk-button-search-icon-size: 28px;\n$nhsuk-button-search-icon-size-large: 38px;\n\n// @deprecated To be removed in v11.0\n$button-border-radius: $nhsuk-button-border-radius;\n$button-padding-top-bottom-mobile: $nhsuk-button-padding-top-bottom-mobile;\n$button-padding-top-bottom-desktop: $nhsuk-button-padding-top-bottom-desktop;\n$button-padding-left-right: $nhsuk-button-padding-left-right;\n$button-shadow-size: $nhsuk-button-shadow-size;\n\n@include nhsuk-exports(\"nhsuk/components/button\") {\n  .nhsuk-button {\n    box-sizing: border-box;\n\n    display: inline-block;\n\n    position: relative;\n\n    width: 100%;\n    min-height: nhsuk-px-to-rem(40px + $nhsuk-button-shadow-size);\n    margin-top: 0;\n    padding: $nhsuk-button-padding-top-bottom-mobile $nhsuk-button-padding-left-right; // [5]\n\n    overflow: visible;\n\n    border: $nhsuk-border-width-form-element solid transparent;\n    border-radius: nhsuk-px-to-rem($nhsuk-button-border-radius);\n\n    text-align: center;\n    vertical-align: top;\n\n    cursor: pointer;\n\n    appearance: none;\n\n    @include nhsuk-button-style(\n      $button-colour: $nhsuk-button-colour,\n      $button-hover-colour: $nhsuk-button-hover-colour,\n      $button-active-colour: $nhsuk-button-active-colour,\n      $button-text-colour: $nhsuk-button-text-colour,\n      $button-shadow-colour: $nhsuk-button-shadow-colour\n    );\n\n    @include nhsuk-font(19, $line-height: 19px, $weight: bold);\n    @include nhsuk-responsive-margin(5, \"bottom\", $adjustment: $nhsuk-button-shadow-size); // [5]\n\n    @include nhsuk-media-query($from: tablet) {\n      width: auto;\n      min-height: nhsuk-px-to-rem(52px + $nhsuk-button-shadow-size);\n      padding: $nhsuk-button-padding-top-bottom-desktop $nhsuk-button-padding-left-right; // [5]\n      line-height: nhsuk-line-height(24px, $font-size: 19px);\n    }\n\n    // [1]\n    &,\n    &:hover,\n    &:active {\n      text-decoration: none;\n    }\n\n    // [2]\n    &::-moz-focus-inner {\n      padding: 0;\n      border: 0;\n    }\n\n    // Reset focus styles added to buttons as links\n    &:focus {\n      outline: none;\n      box-shadow: none;\n    }\n\n    // Add button focus styles ensuring the active \"pressed\" state has priority\n    &:focus:not(:active),\n    &:focus:not(:active):hover {\n      @include nhsuk-focused-button;\n    }\n\n    // Remove button shadow when pressed\n    &:active,\n    &:active:focus {\n      top: $nhsuk-button-shadow-size;\n      box-shadow: none;\n    }\n\n    &:disabled {\n      pointer-events: none;\n      opacity: (0.5);\n    }\n\n    // Default pseudo element styles for [3] and [4]\n    &::before,\n    &::after {\n      content: \"\";\n\n      display: block;\n\n      position: absolute;\n      top: -$nhsuk-border-width-form-element;\n      right: -$nhsuk-border-width-form-element;\n      bottom: -$nhsuk-border-width-form-element;\n      left: -$nhsuk-border-width-form-element;\n\n      border-radius: nhsuk-px-to-rem($nhsuk-button-border-radius);\n    }\n\n    // Use a pseudo element to expand the click target area to include the\n    // button's shadow as well, in case users try to click it [3]\n    &::before {\n      bottom: -($nhsuk-border-width-form-element + $nhsuk-button-shadow-size);\n      border: $nhsuk-border-width-form-element solid transparent;\n      background-color: transparent;\n    }\n\n    // When the button is active it is shifted down by $nhsuk-button-shadow-size to\n    // denote a 'pressed' state. If the user happened to click at the very top\n    // of the button, their mouse is no longer over the button (because it has\n    // 'moved beneath them') and so the click event is not fired.\n    //\n    // This corrects that by shifting the top of the pseudo element so that it\n    // continues to cover the area that the user originally clicked, which means\n    // the click event is still fired.\n    &:active::before {\n      top: -($nhsuk-border-width-form-element + $nhsuk-button-shadow-size);\n      bottom: -$nhsuk-border-width-form-element;\n    }\n\n    // Override high-contrast link colours to match buttons\n    @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n      color: buttontext;\n\n      &,\n      &::before {\n        border-color: buttonborder;\n      }\n    }\n  }\n\n  // Button variations\n\n  .nhsuk-button--secondary,\n  .nhsuk-button--secondary-solid {\n    @include nhsuk-button-style(\n      $button-colour: $nhsuk-secondary-button-colour,\n      $button-border-colour: $nhsuk-secondary-button-border-colour,\n      $button-hover-colour: $nhsuk-secondary-button-hover-colour,\n      $button-active-colour: $nhsuk-secondary-button-active-colour,\n      $button-text-colour: $nhsuk-secondary-button-text-colour,\n      $button-shadow-colour: $nhsuk-secondary-button-shadow-colour\n    );\n  }\n\n  .nhsuk-button--secondary-solid {\n    background-color: $nhsuk-secondary-button-solid-background-colour;\n  }\n\n  .nhsuk-button--reverse {\n    @include nhsuk-button-style(\n      $button-colour: $nhsuk-reverse-button-colour,\n      $button-hover-colour: $nhsuk-reverse-button-hover-colour,\n      $button-active-colour: $nhsuk-reverse-button-active-colour,\n      $button-text-colour: $nhsuk-reverse-button-text-colour,\n      $button-shadow-colour: $nhsuk-reverse-button-shadow-colour\n    );\n  }\n\n  .nhsuk-button--warning {\n    @include nhsuk-button-style(\n      $button-colour: $nhsuk-warning-button-colour,\n      $button-hover-colour: $nhsuk-warning-button-hover-colour,\n      $button-active-colour: $nhsuk-warning-button-active-colour,\n      $button-text-colour: $nhsuk-button-text-colour,\n      $button-shadow-colour: $nhsuk-warning-button-shadow-colour\n    );\n  }\n\n  .nhsuk-button--brand,\n  .nhsuk-button--login {\n    @include nhsuk-button-style(\n      $button-colour: $nhsuk-login-button-colour,\n      $button-hover-colour: $nhsuk-login-button-hover-colour,\n      $button-active-colour: $nhsuk-login-button-active-colour,\n      $button-text-colour: $nhsuk-button-text-colour,\n      $button-shadow-colour: $nhsuk-login-button-shadow-colour\n    );\n  }\n\n  // =========================================================\n  // Small buttons\n  // =========================================================\n\n  .nhsuk-button--small {\n    min-height: nhsuk-px-to-rem(32px + $nhsuk-button-shadow-size);\n    padding: $nhsuk-button-padding-top-bottom-small $nhsuk-button-padding-left-right-small; // [5]\n\n    @include nhsuk-responsive-margin(4, \"bottom\", $adjustment: $nhsuk-button-shadow-size); // [5]\n\n    @include nhsuk-media-query($from: tablet) {\n      @include nhsuk-font(16, $line-height: 19px, $weight: bold);\n    }\n  }\n\n  // =========================================================\n  // Icon buttons\n  // =========================================================\n\n  .nhsuk-button--icon {\n    display: flex;\n    position: relative;\n    align-items: center;\n\n    // Add minimum width for icon-only buttons\n    min-width: nhsuk-px-to-rem(44px);\n\n    // Prevent users from selecting icon button text\n    // e.g. When double clicking the button\n    user-select: none;\n\n    @include nhsuk-media-query($until: tablet) {\n      // Align icon and text in centre of button\n      justify-content: center;\n\n      // Reduce padding to better fit icon\n      padding-top: 0;\n      padding-bottom: 0;\n    }\n  }\n\n  .nhsuk-button:not(.nhsuk-button--small) {\n    @include nhsuk-media-query($from: tablet) {\n      min-width: nhsuk-px-to-rem(66px);\n    }\n  }\n\n  .nhsuk-button .nhsuk-icon {\n    flex-shrink: 0;\n\n    // Offset icon to the left when at the end, towards text\n    &:not(:only-child):last-child {\n      margin-right: nhsuk-px-to-rem(-6px);\n      margin-left: nhsuk-px-to-rem(-$nhsuk-icon-size + 6px);\n    }\n\n    // Offset icon to the right when at the start, towards text\n    &:not(:only-child):first-child {\n      margin-right: nhsuk-px-to-rem(-$nhsuk-icon-size + 6px);\n      margin-left: nhsuk-px-to-rem(-6px);\n    }\n\n    &:only-child {\n      margin-right: nhsuk-px-to-rem(-6px);\n      margin-left: nhsuk-px-to-rem(-6px);\n    }\n\n    @include nhsuk-media-query($from: tablet) {\n      position: absolute;\n      top: 50%;\n      left: $nhsuk-button-padding-left-right;\n\n      // Offset icon vertically (from top: 50%) into the centre\n      margin-top: nhsuk-px-to-rem(math.div($nhsuk-icon-size, -2));\n\n      // Offset icon to the left when at the end, towards text\n      &:not(:only-child):last-child {\n        right: $nhsuk-button-padding-left-right;\n        left: auto;\n        margin-right: nhsuk-px-to-rem(-6px);\n        margin-left: 0;\n      }\n\n      // Offset icon to the right when at the start, towards text\n      &:not(:only-child):first-child {\n        left: $nhsuk-button-padding-left-right;\n        margin-right: 0;\n        margin-left: nhsuk-px-to-rem(-6px);\n      }\n\n      &:only-child {\n        left: 50%;\n        margin-right: 0;\n        margin-left: nhsuk-px-to-rem(math.div($nhsuk-icon-size, -2));\n      }\n    }\n  }\n\n  // Increase icon size (tablet), excluding small buttons\n  .nhsuk-button:not(.nhsuk-button--small) .nhsuk-icon {\n    @include nhsuk-media-query($from: tablet) {\n      width: nhsuk-px-to-rem($nhsuk-icon-size-large);\n      height: nhsuk-px-to-rem($nhsuk-icon-size-large);\n\n      // Offset icon vertically (from top: 50%) into the centre\n      margin-top: nhsuk-px-to-rem(math.div($nhsuk-icon-size-large, -2));\n\n      // Offset icon to the left when at the end, towards text\n      &:not(:only-child):last-child {\n        margin-left: nhsuk-px-to-rem(-$nhsuk-icon-size-large + 6px);\n      }\n\n      // Offset icon to the right when at the start, towards text\n      &:not(:only-child):first-child {\n        margin-right: nhsuk-px-to-rem(-$nhsuk-icon-size-large + 6px);\n      }\n\n      &:only-child {\n        left: 50%;\n        margin-right: 0;\n        margin-left: nhsuk-px-to-rem(math.div($nhsuk-icon-size-large, -2));\n      }\n    }\n  }\n\n  // Increase icon size (tablet), search only\n  .nhsuk-button:not(.nhsuk-button--small) .nhsuk-icon--search:only-child {\n    @include nhsuk-media-query($from: tablet) {\n      width: nhsuk-px-to-rem($nhsuk-button-search-icon-size-large);\n      height: nhsuk-px-to-rem($nhsuk-button-search-icon-size-large);\n\n      // Offset icon vertically (from top: 50%) into the centre\n      margin-top: nhsuk-px-to-rem(math.div($nhsuk-button-search-icon-size-large, -2));\n      margin-left: nhsuk-px-to-rem(math.div($nhsuk-button-search-icon-size-large, -2));\n    }\n  }\n\n  // Prevent button icon size increase for small buttons (at tablet) by\n  // overriding the core icon size increase back to default size again\n  .nhsuk-button.nhsuk-button--small .nhsuk-icon {\n    @include nhsuk-media-query($from: tablet) {\n      width: nhsuk-px-to-rem($nhsuk-icon-size);\n      height: nhsuk-px-to-rem($nhsuk-icon-size);\n\n      &:not(:only-child):last-child {\n        right: $nhsuk-button-padding-left-right-small;\n      }\n\n      &:not(:only-child):first-child {\n        left: $nhsuk-button-padding-left-right-small;\n      }\n    }\n  }\n\n  // Increase icon size, search only\n  .nhsuk-button .nhsuk-icon--search:only-child {\n    @include nhsuk-media-query($from: mobile) {\n      width: nhsuk-px-to-rem($nhsuk-button-search-icon-size);\n      height: nhsuk-px-to-rem($nhsuk-button-search-icon-size);\n    }\n  }\n\n  .nhsuk-button.nhsuk-button--small .nhsuk-icon--search:only-child {\n    @include nhsuk-media-query($from: tablet) {\n      // Offset icon vertically (from top: 50%) into the centre\n      margin-top: nhsuk-px-to-rem(math.div($nhsuk-button-search-icon-size, -2));\n      margin-left: nhsuk-px-to-rem(math.div($nhsuk-button-search-icon-size, -2));\n    }\n  }\n\n  .nhsuk-button__content {\n    display: block;\n\n    // Preserve space for icon (small) at the end\n    padding-right: nhsuk-px-to-rem($nhsuk-icon-size);\n    padding-left: 0;\n\n    // Preserve space for icon (small) at the start\n    .nhsuk-icon + & {\n      padding-right: 0;\n      padding-left: nhsuk-px-to-rem($nhsuk-icon-size);\n    }\n\n    // Move padding to content to better fit icon\n    @include nhsuk-media-query($until: tablet) {\n      padding-top: $nhsuk-button-padding-top-bottom-mobile;\n      padding-bottom: $nhsuk-button-padding-top-bottom-mobile;\n\n      .nhsuk-button.nhsuk-button--small & {\n        padding-top: $nhsuk-button-padding-top-bottom-small;\n        padding-bottom: $nhsuk-button-padding-top-bottom-small;\n      }\n    }\n\n    @include nhsuk-media-query($from: tablet) {\n      // Preserve space for icon (large) at the end\n      .nhsuk-button:not(.nhsuk-button--small) & {\n        padding-right: nhsuk-px-to-rem($nhsuk-icon-size-large);\n      }\n\n      // Preserve space for icon (large) at the start\n      .nhsuk-button:not(.nhsuk-button--small) .nhsuk-icon + & {\n        padding-right: 0;\n        padding-left: nhsuk-px-to-rem($nhsuk-icon-size-large);\n      }\n    }\n  }\n}\n"]}

package/dist/nhsuk/components/card/_index.scss

@@ -522,8 +522,8 @@ $card-border-hover-colour: $nhsuk-card-border-hover-colour;
       }
     }
 
-    .nhsuk-action-link__link .nhsuk-icon {
-      fill: $nhsuk-reverse-text-colour; // [14]
+    .nhsuk-action-link:not(.nhsuk-action-link--reverse) {
+      @include nhsuk-link-style-reverse;
     }
   }
 

package/dist/nhsuk/components/card/_index.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/nhsuk/components/card/_index.scss"],"names":[],"mappings":"AAAA,gBAAgB;AAChB,+BAA+B;AAC/B,4BAA4B;AAC5B,8BAA8B;AAC9B,kCAAkC;;AAElC,GAAG;AACH,iBAAiB;AACjB,EAAE;AACF,iFAAiF;AACjF,kEAAkE;AAClE,uBAAuB;AACvB,qDAAqD;AACrD,sEAAsE;AACtE,sEAAsE;AACtE,iEAAiE;AACjE,4EAA4E;AAC5E,mEAAmE;AACnE,oDAAoD;AACpD,uEAAuE;AACvE,mEAAmE;AACnE,+CAA+C;AAC/C,4DAA4D;AAC5D,uEAAuE;AACvE,6EAA6E;AAC7E,6CAA6C;AAC7C,uFAAuF;AACvF,qGAAqG;AACrG,wFAAwF;AACxF,wFAAwF;AACxF,4EAA4E;AAC5E,EAAE;AACF,yBAAyB;AACzB,GAAG;;AAEH,6BAA6B;AAC7B,uDAAuD;AACvD,+CAA+C;AAC/C,uDAAuD;;AAEvD,oCAAoC;AACpC,4CAA4C;AAC5C,0DAA0D;AAC1D,6CAA6C;AAC7C,8CAA8C;AAC9C,yDAAyD;AACzD,0DAA0D;;AAE1D;EACE;IACE,sBAAsB;IACtB,kBAAkB,EAAE,KAAK;IACzB,WAAW;;IAEX,kGAAkG;EACpG;;EAEA;;IAEE,cAAc;IACd,WAAW;IACX,SAAS;IACT,oEAAoE,EAAE,KAAK;EAC7E;;EAEA;IACE,sBAAsB;IACtB,6BAA6B;IAC7B,oCAAoC;EACtC;;EAEA;IACE,4CAA4C;IAC5C,6CAA6C;EAC/C;;EAEA;IACE,aAAa;IACb,cAAc;;IAEd;MACE,gBAAgB;IAClB;EACF;;EAEA;;;IAGE,oCAAoC;EACtC;;EAEA;IACE;MACE,6BAA6B;IAC/B;;IAEA;MACE,iBAAiB;IACnB;;IAEA;MACE,cAAc;IAChB;;IAEA;MACE,aAAa;MACb,iBAAiB;MACjB,qBAAqB;MACrB,8BAA8B;;MAE9B;QACE,sBAAsB;MACxB;IACF;EACF;;EAEA;IACE,aAAa;;IAEb,eAAe;IACf,aAAa;;IAEb,4CAA4C;IAC5C,UAAU;;IAEV,gBAAgB;IAChB,sCAAsC;;IAEtC;MACE,sBAAsB;MACtB,6CAA6C;MAC7C,iBAAiB;;MAEjB;QACE,cAAc;MAChB;IACF;EACF;;EAEA;IACE,qBAAqB;;IAErB,2EAA2E;IAC3E,kBAAkB;IAClB,CAAC;IACD,2EAA2E;IAC3E,6EAA6E;IAC7E,yEAAyE;IACzE,CAAC;IACD,yGAAyG;IACzG,sDAAsD;IACtD;MACE,+BAA+B;IACjC;EACF;;EAEA;IACE,wCAAwC;IACxC;MACE,gBAAgB;IAClB;EACF;;EAEA;IACE;MACE,8BAA8B;MAC9B,+BAA+B;MAC/B,4CAA4C;IAC9C;;IAEA;MACE,eAAe;MACf,gBAAgB;MAChB,SAAS;IACX;EACF;;EAEA;IACE;MACE,gBAAgB;MAChB,6BAA6B;MAC7B,8BAA8B;IAChC;;IAEA;MACE,2CAA2C;IAC7C;;IAEA;MACE,cAAc;MACd,eAAe;MACf,SAAS;IACX;EACF;;EAEA;IACE,gBAAgB;EAClB;;EAEA,2BAA2B;;EAE3B;;IAEE,oEAAoE;IACpE,2FAA2F,EAAE,MAAM;EACrG;;EAEA,gBAAgB;;EAEhB;IACE;;MAEE;QACE,WAAW;;QAEX,cAAc;;QAEd,kBAAkB;QAClB,8BAA8B,EAAE,MAAM;QACtC,gCAAgC,EAAE,MAAM;QACxC,mEAAmE,EAAE,MAAM;QAC3E,+BAA+B,EAAE,MAAM;;QAEvC,wCAAwC,EAAE,MAAM;MAClD;IACF;;IAEA;;;MAGE,6CAA6C;MAC7C,+EAA+E;IACjF;;IAEA;;;MAGE,8BAA8B;;MAE9B;QACE,cAAc;MAChB;IACF;;IAEA;;;MAGE,oCAAoC,EAAE,KAAK;MAC3C,gBAAgB;IAClB;;IAEA;;;MAGE,+BAA+B;;MAE/B;QACE,gBAAgB;MAClB;IACF;EACF;;EAEA,YAAY;EACZ,CAAC;EACD,oCAAoC;EACpC,6DAA6D;;EAE7D;IACE,+BAA+B;IAC/B,UAAU;;IAEV,mBAAmB;;IAEnB;MACE,+BAA+B;IACjC;;IAEA;;;;MAIE,cAAc,EAAE,KAAK;IACvB;EACF;;EAEA;IACE,gBAAgB;IAChB,qBAAqB;;IAErB,wBAAwB;;IAExB;MACE,+BAA+B;IACjC;;IAEA;;MAEE,iEAAiE,EAAE,MAAM;IAC3E;;IAEA;MACE;QACE,+BAA+B;MACjC;;MAEA;;QAEE,iEAAiE,EAAE,MAAM;MAC3E;;MAEA;QACE,gBAAgB;MAClB;;MAEA;;QAEE,8CAA8C,EAAE,MAAM;MACxD;IACF;EACF;;EAEA,0BAA0B;;EAE1B;;;;;;IAME,UAAU,EAAE,KAAK;EACnB;;EAEA;;IAEE;MACE,uBAAuB;IACzB;;IAEA;MACE,aAAa;;MAEb;QACE,6BAA6B;MAC/B;IACF;EACF;;EAEA,cAAc;;EAEd;IACE,6GAA6G;EAC/G;;EAEA;;;;IAIE,gBAAgB;IAChB,YAAY;IACZ,6EAA6E;EAC/E;;EAEA,cAAc;;EAEd;IACE,wGAAwG;EAC1G;;EAEA;;IAEE,gBAAgB;IAChB,YAAY;IACZ,wEAAwE;EAC1E;;EAEA,WAAW;;EAEX;IACE,8EAA8E,EAAE,KAAK;IACrF,0CAA0C;EAC5C;;EAEA;;;IAGE,kBAAkB;IAClB,6BAA6B;IAC7B,2DAA2D;IAC3D,yDAAyD;EAC3D;;EAEA;;;IAGE,SAAS;IACT,cAAc,EAAE,MAAM;;IAEtB,sCAAsC;IACtC,2BAA2B;EAC7B;;EAEA;IACE,cAAc;;IAEd,kBAAkB;IAClB,8BAA8B,EAAE,KAAK;IACrC,2BAA2B,EAAE,MAAM;;IAEnC,4BAA4B,EAAE,KAAK;IACnC,6BAA6B,EAAE,KAAK;;IAEpC,gBAAgB;;IAEhB,wBAAwB;IACxB,yBAAyB;;IAEzB;MACE,2BAA2B,EAAE,MAAM;IACrC;;IAEA;;MAEE,WAAW;;MAEX,cAAc;;MAEd,kBAAkB;MAClB,MAAM;;MAEN,QAAQ;MACR,SAAS;;MAET,wBAAwB,EAAE,MAAM;;MAEhC,uDAAuD,EAAE,KAAK;IAChE;EACF;;EAEA;IACE,2CAA2C;EAC7C;;EAEA;;;IAGE;MACE,4BAA4B;MAC5B,gBAAgB;;MAEhB;QACE,kBAAkB;QAClB,aAAa;MACf;IACF;;IAEA;MACE,iCAAiC;IACnC;EACF;;EAEA;IACE;MACE,0CAA0C;IAC5C;EACF;;EAEA;;IAEE;MACE,kDAAkD;IACpD;EACF;;EAEA;IACE,8EAA8E;;IAE9E;MACE;;QAEE,iCAAiC;MACnC;IACF;EACF;;EAEA;IACE,8EAA8E;;IAE9E;MACE;;QAEE,iCAAiC;MACnC;IACF;;IAEA;MACE,gBAAgB,EAAE,MAAM;MACxB,SAAS;MACT,iCAAiC;MACjC,uCAAuC;;MAEvC;QACE,iCAAiC;MACnC;;MAEA;QACE,+CAA+C;MACjD;IACF;;IAEA;;MAEE,iCAAiC;IACnC;;IAEA;MACE;QACE,iCAAiC;MACnC;;MAEA;QACE,+BAA+B;MACjC;IACF;;IAEA;MACE,gCAAgC,EAAE,MAAM;IAC1C;EACF;;EAEA,cAAc;;EAEd;;;IAGE;;;;;KAKC;;IAED;MACE,YAAY;IACd;EACF;;EAEA;;;IAGE;MACE,cAAc;;MAEd,kBAAkB;MAClB,QAAQ;;MAER,8CAA8C;MAC9C,+CAA+C;MAC/C,6EAA6E;;MAE7E,oBAAoB;;MAEpB,wBAAwB;MACxB,6CAA6C;;MAE7C;QACE,gBAAgB;MAClB;IACF;EACF;;EAEA,gBAAgB;;EAEhB;IACE,aAAa;IACb,eAAe;IACf,cAAc;IACd,uBAAuB;EACzB;;EAEA;;;;IAIE,cAAc;IACd,gBAAgB;IAChB,eAAe;EACjB;AACF","file":"_index.scss","sourcesContent":["@use \"sass:math\";\n@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n@forward \"../../core/styles/icons\";\n\n////\n/// Card component\n///\n/// 1. Is needed for the :active top positioning, and invisible clickable overlay.\n/// 2. Border is used to create a divider between the white content\n///    box and an image.\n/// 3. Creates the 'pressed down' effect when clicked.\n/// 4. Removes padding-top from headings directly after the card group.\n/// 5. Includes the border width to achieve the correct left alignment.\n/// 6. Stops the heading from spanning the full width of the card.\n/// 7. Removes padding as added to container by nhsuk-panel-with-label mixin.\n/// 8. Default care card colour set to blue (non-urgent care card) -\n///    using the @mixin care-card tools/_mixins.scss.\n///    The same mixin is used for each care card, setting the background\n///    colour,text colour and print border width with the variables.\n/// 9. 'Random number' for the heading triangle.\n/// 10. 'Random number' for the heading triangle positioning.\n/// 11. 'Random number' used for spacing to compensate for the triangle.\n/// 12. Needed to enable the triangle to show correctly in high contrast mode.\n/// 13. Prevent additional padding on headings\n/// 14. Give the action link icon sufficient contrast when used in the emergency variant\n/// 15. Reset the positioning to the default [1] to display heading triangle on a coloured background.\n/// 16. Emergency care card <a> needs to be white because the background colour is black.\n/// 17. Trick IE10 into rendering the invisible clickable area. Without this it does not.\n/// 18. Increase the clickable area to the border of the card and the shadow.\n///\n/// @group components/card\n////\n\n$nhsuk-card-border-width: 1px;\n$nhsuk-card-border-bottom-width: nhsuk-spacing(1) - 1px;\n$nhsuk-card-border-colour: $nhsuk-border-colour;\n$nhsuk-card-border-hover-colour: nhsuk-colour(\"grey-3\");\n\n// @deprecated To be removed in v11.0\n$card-border-width: $nhsuk-card-border-width;\n$card-border-bottom-width: $nhsuk-card-border-bottom-width;\n$card-border-color: $nhsuk-card-border-colour;\n$card-border-colour: $nhsuk-card-border-colour;\n$card-border-hover-color: $nhsuk-card-border-hover-colour;\n$card-border-hover-colour: $nhsuk-card-border-hover-colour;\n\n@include nhsuk-exports(\"nhsuk/components/card\") {\n  .nhsuk-card {\n    box-sizing: border-box;\n    position: relative; // [1]\n    width: 100%;\n\n    @include nhsuk-panel($nhsuk-card-background-colour, $nhsuk-text-colour, $nhsuk-card-border-colour);\n  }\n\n  .nhsuk-card__img,\n  .nhsuk-card .nhsuk-image {\n    display: block;\n    width: 100%;\n    margin: 0;\n    border-bottom: $nhsuk-card-border-width solid nhsuk-colour(\"grey-5\"); // [2]\n  }\n\n  .nhsuk-card__content {\n    box-sizing: border-box;\n    @include nhsuk-top-and-bottom;\n    @include nhsuk-responsive-padding(5);\n  }\n\n  .nhsuk-card .nhsuk-image__caption {\n    @include nhsuk-responsive-padding(5, \"left\");\n    @include nhsuk-responsive-padding(5, \"right\");\n  }\n\n  .nhsuk-card__heading {\n    flex-basis: 0;\n    flex-grow: 999;\n\n    &:has(+ .nhsuk-icon) {\n      margin-bottom: 0;\n    }\n  }\n\n  .nhsuk-card__heading-container,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-card--care__heading-container {\n    @include nhsuk-responsive-padding(5);\n  }\n\n  .nhsuk-card__heading-container {\n    &:last-child {\n      @include nhsuk-top-and-bottom;\n    }\n\n    &:not(:last-child) {\n      padding-bottom: 0;\n    }\n\n    + .nhsuk-card__content {\n      padding-top: 0;\n    }\n\n    @include nhsuk-media-query($from: tablet) {\n      display: flex;\n      flex-wrap: nowrap;\n      align-items: baseline;\n      justify-content: space-between;\n\n      &:has(.nhsuk-card__actions:only-child) {\n        justify-content: right;\n      }\n    }\n  }\n\n  .nhsuk-card__actions {\n    display: flex;\n\n    flex-wrap: wrap;\n    row-gap: 10px;\n\n    margin: nhsuk-spacing(-1) 0 nhsuk-spacing(3);\n    padding: 0;\n\n    list-style: none;\n    @include nhsuk-font(19, $weight: bold);\n\n    @include nhsuk-media-query($from: tablet) {\n      justify-content: right;\n      margin: 0 0 nhsuk-spacing(3) nhsuk-spacing(3);\n      text-align: right;\n\n      &:only-child {\n        margin-left: 0;\n      }\n    }\n  }\n\n  .nhsuk-card__action {\n    display: inline-block;\n\n    // We use the following media query to target IE11 and 10 only to add margin\n    // between actions.\n    //\n    // We do this because we're using row-gap to create space between actions on\n    // more evergreen browsers which IE doesn't support. @supports currently isn't\n    // a viable solution, see https://github.com/w3c/csswg-drafts/issues/3559.\n    //\n    // Solution taken from https://stackoverflow.com/questions/11173106/apply-style-only-on-ie#answer-36448860\n    // which also includes an explanation of why this works\n    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n      margin-bottom: nhsuk-spacing(1);\n    }\n  }\n\n  .nhsuk-card__action:last-child {\n    // See above comment for why this is here\n    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n      margin-bottom: 0;\n    }\n  }\n\n  @include nhsuk-media-query($until: tablet) {\n    .nhsuk-card__action {\n      margin-right: nhsuk-spacing(2);\n      padding-right: nhsuk-spacing(2);\n      border-right: 1px solid $nhsuk-border-colour;\n    }\n\n    .nhsuk-card__action:last-child {\n      margin-right: 0;\n      padding-right: 0;\n      border: 0;\n    }\n  }\n\n  @include nhsuk-media-query($from: tablet) {\n    .nhsuk-card__action {\n      margin-bottom: 0;\n      margin-left: nhsuk-spacing(2);\n      padding-left: nhsuk-spacing(2);\n    }\n\n    .nhsuk-card__action:not(:first-child) {\n      border-left: 1px solid $nhsuk-border-colour;\n    }\n\n    .nhsuk-card__action:first-child {\n      margin-left: 0;\n      padding-left: 0;\n      border: 0;\n    }\n  }\n\n  .nhsuk-card__description {\n    margin-bottom: 0;\n  }\n\n  // Card shadow shared styles\n\n  .nhsuk-card--clickable,\n  .nhsuk-card--secondary {\n    box-shadow: 0 $nhsuk-card-border-bottom-width 0 $nhsuk-border-colour;\n    @include nhsuk-responsive-margin(7, \"bottom\", $adjustment: $nhsuk-card-border-bottom-width); // [18]\n  }\n\n  // Clickable card\n\n  .nhsuk-card--clickable {\n    .nhsuk-card__heading a,\n    .nhsuk-card__link {\n      &::before {\n        content: \"\";\n\n        display: block;\n\n        position: absolute;\n        top: -$nhsuk-card-border-width; // [18]\n        right: -$nhsuk-card-border-width; // [18]\n        bottom: -$nhsuk-card-border-width - $nhsuk-card-border-bottom-width; // [18]\n        left: -$nhsuk-card-border-width; // [18]\n\n        background-color: rgba(255, 255, 255, 0); // [17]\n      }\n    }\n\n    &:hover,\n    &:has(.nhsuk-card__heading a:hover),\n    &:has(.nhsuk-card__link:hover) {\n      border-color: $nhsuk-card-border-hover-colour;\n      box-shadow: 0 $nhsuk-card-border-bottom-width 0 $nhsuk-card-border-hover-colour;\n    }\n\n    &:hover .nhsuk-icon,\n    &:has(.nhsuk-card__heading a:hover) .nhsuk-icon,\n    &:has(.nhsuk-card__link:hover) .nhsuk-icon {\n      fill: $nhsuk-link-hover-colour;\n\n      @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n        fill: linktext;\n      }\n    }\n\n    &:active,\n    &:has(.nhsuk-card__heading a:active),\n    &:has(.nhsuk-card__link:active) {\n      top: $nhsuk-card-border-bottom-width; // [3]\n      box-shadow: none;\n    }\n\n    &:active .nhsuk-icon,\n    &:has(.nhsuk-card__heading a:active) .nhsuk-icon,\n    &:has(.nhsuk-card__link:active) .nhsuk-icon {\n      fill: $nhsuk-link-active-colour;\n\n      @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n        fill: activetext;\n      }\n    }\n  }\n\n  // Card group\n  //\n  // Allows you to have a row of cards.\n  // Flexbox is used to make each card in a row the same height.\n\n  .nhsuk-card-group {\n    margin-bottom: nhsuk-spacing(3);\n    padding: 0;\n\n    @include nhsuk-flex;\n\n    @include nhsuk-media-query($until: desktop) {\n      margin-bottom: nhsuk-spacing(6);\n    }\n\n    + h2,\n    + .nhsuk-heading-l,\n    + h3,\n    + .nhsuk-heading-m {\n      padding-top: 0; // [4]\n    }\n  }\n\n  .nhsuk-card-group__item {\n    margin-bottom: 0;\n    list-style-type: none;\n\n    @include nhsuk-flex-item;\n\n    .nhsuk-card {\n      margin-bottom: nhsuk-spacing(5);\n    }\n\n    .nhsuk-card--clickable,\n    .nhsuk-card--secondary {\n      margin-bottom: nhsuk-spacing(5) + $nhsuk-card-border-bottom-width; // [18]\n    }\n\n    @include nhsuk-media-query($until: desktop) {\n      .nhsuk-card {\n        margin-bottom: nhsuk-spacing(3);\n      }\n\n      .nhsuk-card--clickable,\n      .nhsuk-card--secondary {\n        margin-bottom: nhsuk-spacing(3) + $nhsuk-card-border-bottom-width; // [18]\n      }\n\n      &:last-child .nhsuk-card {\n        margin-bottom: 0;\n      }\n\n      &:last-child .nhsuk-card--clickable,\n      &:last-child .nhsuk-card--secondary {\n        margin-bottom: $nhsuk-card-border-bottom-width; // [18]\n      }\n    }\n  }\n\n  // Card panel shared styles\n\n  .nhsuk-card--feature > .nhsuk-card__heading-container,\n  .nhsuk-card--feature > .nhsuk-card__content,\n  .nhsuk-card--warning > .nhsuk-card__heading-container,\n  .nhsuk-card--warning > .nhsuk-card__content,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-card__content--feature {\n    padding: 0; // [7]\n  }\n\n  .nhsuk-card--feature > .nhsuk-card__heading-container,\n  .nhsuk-card--warning > .nhsuk-card__heading-container {\n    @include nhsuk-media-query($from: tablet) {\n      align-items: flex-start;\n    }\n\n    .nhsuk-card__actions {\n      margin-top: 0;\n\n      @include nhsuk-media-query($from: tablet) {\n        padding-top: nhsuk-spacing(4);\n      }\n    }\n  }\n\n  // Card feature\n\n  .nhsuk-card--feature {\n    @include nhsuk-panel-with-label($nhsuk-card-background-colour, $nhsuk-text-colour, $nhsuk-card-border-colour);\n  }\n\n  .nhsuk-card--feature > .nhsuk-card__heading-container > .nhsuk-card__heading,\n  .nhsuk-card--feature > .nhsuk-card__content > .nhsuk-card__heading,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-card__heading--feature {\n    flex-basis: auto;\n    flex-grow: 0;\n    @include nhsuk-heading-label($nhsuk-brand-colour, $nhsuk-reverse-text-colour);\n  }\n\n  // Card warning\n\n  .nhsuk-card--warning {\n    @include nhsuk-panel-with-label(nhsuk-colour(\"pale-yellow\"), $nhsuk-text-colour, nhsuk-colour(\"yellow\"));\n  }\n\n  .nhsuk-card--warning > .nhsuk-card__heading-container > .nhsuk-card__heading,\n  .nhsuk-card--warning > .nhsuk-card__content > .nhsuk-card__heading {\n    flex-basis: auto;\n    flex-grow: 0;\n    @include nhsuk-heading-label(nhsuk-colour(\"yellow\"), $nhsuk-text-colour);\n  }\n\n  // Care card\n\n  .nhsuk-card--care {\n    @include nhsuk-care-card($nhsuk-brand-colour, $nhsuk-reverse-text-colour, 4px); // [8]\n    @include nhsuk-responsive-margin(7, \"top\");\n  }\n\n  .nhsuk-card--care > .nhsuk-card__heading-container,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-card--care__heading-container {\n    position: relative;\n    padding-top: nhsuk-spacing(3);\n    padding-bottom: nhsuk-spacing(3) - $nhsuk-card-border-width;\n    border-bottom: $nhsuk-card-border-width solid transparent;\n  }\n\n  .nhsuk-card--care > .nhsuk-card__heading-container > .nhsuk-card__heading,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-card--care__heading {\n    margin: 0;\n    padding-top: 0; // [13]\n\n    @include nhsuk-font(26, $weight: bold);\n    @include nhsuk-print-colour;\n  }\n\n  .nhsuk-card--care__arrow {\n    display: block;\n\n    position: absolute;\n    bottom: nhsuk-px-to-rem(-11px); // [9]\n    left: nhsuk-px-to-rem(30px); // [10]\n\n    width: nhsuk-px-to-rem(20px); // [9]\n    height: nhsuk-px-to-rem(20px); // [9]\n\n    overflow: hidden;\n\n    transform: rotate(45deg);\n    @include nhsuk-print-hide;\n\n    @include nhsuk-media-query($from: tablet) {\n      left: nhsuk-px-to-rem(38px); // [10]\n    }\n\n    &::before,\n    &::after {\n      content: \"\";\n\n      display: block;\n\n      position: absolute;\n      top: 0;\n\n      width: 0;\n      height: 0;\n\n      transform: rotate(45deg); // [12]\n\n      border: solid nhsuk-px-to-rem(32px) $nhsuk-brand-colour; // [9]\n    }\n  }\n\n  .nhsuk-card--care .nhsuk-card__content {\n    @include nhsuk-responsive-padding(5, \"top\");\n  }\n\n  .nhsuk-card--care--non-urgent > .nhsuk-card__heading-container,\n  .nhsuk-card--care--urgent > .nhsuk-card__heading-container,\n  .nhsuk-card--care--emergency > .nhsuk-card__heading-container {\n    .nhsuk-card__actions {\n      margin-top: nhsuk-spacing(3);\n      margin-bottom: 0;\n\n      @include nhsuk-media-query($from: tablet) {\n        align-self: center;\n        margin-top: 0;\n      }\n    }\n\n    .nhsuk-card__action a {\n      @include nhsuk-link-style-reverse;\n    }\n  }\n\n  .nhsuk-card--care--non-urgent > .nhsuk-card__heading-container {\n    .nhsuk-card__action {\n      border-color: $nhsuk-reverse-border-colour;\n    }\n  }\n\n  .nhsuk-card--care--urgent > .nhsuk-card__heading-container,\n  .nhsuk-card--care--emergency > .nhsuk-card__heading-container {\n    .nhsuk-card__action {\n      border-color: nhsuk-tint(nhsuk-colour(\"red\"), 20%);\n    }\n  }\n\n  .nhsuk-card--care--urgent {\n    @include nhsuk-care-card(nhsuk-colour(\"red\"), $nhsuk-reverse-text-colour, 6px);\n\n    .nhsuk-card--care__arrow {\n      &::before,\n      &::after {\n        border-color: nhsuk-colour(\"red\");\n      }\n    }\n  }\n\n  .nhsuk-card--care--emergency {\n    @include nhsuk-care-card(nhsuk-colour(\"red\"), $nhsuk-reverse-text-colour, 8px);\n\n    .nhsuk-card--care__arrow {\n      &::before,\n      &::after {\n        border-color: nhsuk-colour(\"red\");\n      }\n    }\n\n    .nhsuk-card__content {\n      position: static; // [15]\n      border: 0;\n      color: $nhsuk-reverse-text-colour;\n      background-color: nhsuk-colour(\"black\");\n\n      a:not(.nhsuk-action-link):not(.nhsuk-button) {\n        @include nhsuk-link-style-reverse;\n      }\n\n      @include nhsuk-print-colour {\n        background-color: $nhsuk-card-background-colour;\n      }\n    }\n\n    .nhsuk-details,\n    .nhsuk-details__summary {\n      color: $nhsuk-reverse-text-colour;\n    }\n\n    .nhsuk-details__summary {\n      &:hover {\n        color: $nhsuk-reverse-text-colour;\n      }\n\n      &:focus {\n        color: $nhsuk-focus-text-colour;\n      }\n    }\n\n    .nhsuk-action-link__link .nhsuk-icon {\n      fill: $nhsuk-reverse-text-colour; // [14]\n    }\n  }\n\n  // Card primary\n\n  .nhsuk-card--primary > .nhsuk-card__content,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-card__content--primary {\n    @include nhsuk-responsive-spacing(\n      5,\n      \"padding\",\n      $direction: \"right\",\n      $adjustment: nhsuk-px-to-rem(nhsuk-spacing(7))\n    );\n\n    @include nhsuk-media-query($from: desktop) {\n      height: 100%;\n    }\n  }\n\n  .nhsuk-card--primary,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-card__content--primary {\n    .nhsuk-icon {\n      display: block;\n\n      position: absolute;\n      top: 50%;\n\n      width: nhsuk-px-to-rem($nhsuk-icon-size-large);\n      height: nhsuk-px-to-rem($nhsuk-icon-size-large);\n      margin-top: nhsuk-px-to-rem(math.floor(math.div($nhsuk-icon-size-large, -2)));\n\n      pointer-events: none;\n\n      fill: $nhsuk-link-colour;\n      @include nhsuk-responsive-spacing(5, \"right\");\n\n      @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n        fill: buttontext;\n      }\n    }\n  }\n\n  // Card secondary\n\n  .nhsuk-card--secondary {\n    border-top: 0;\n    border-right: 0;\n    border-left: 0;\n    background: transparent;\n  }\n\n  .nhsuk-card--secondary > .nhsuk-card__heading-container,\n  .nhsuk-card--secondary > .nhsuk-card__content,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-card__content--secondary {\n    padding-top: 0;\n    padding-right: 0;\n    padding-left: 0;\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/nhsuk/components/card/_index.scss"],"names":[],"mappings":"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","file":"_index.scss","sourcesContent":["@use \"sass:math\";\n@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n@forward \"../../core/styles/icons\";\n\n////\n/// Card component\n///\n/// 1. Is needed for the :active top positioning, and invisible clickable overlay.\n/// 2. Border is used to create a divider between the white content\n///    box and an image.\n/// 3. Creates the 'pressed down' effect when clicked.\n/// 4. Removes padding-top from headings directly after the card group.\n/// 5. Includes the border width to achieve the correct left alignment.\n/// 6. Stops the heading from spanning the full width of the card.\n/// 7. Removes padding as added to container by nhsuk-panel-with-label mixin.\n/// 8. Default care card colour set to blue (non-urgent care card) -\n///    using the @mixin care-card tools/_mixins.scss.\n///    The same mixin is used for each care card, setting the background\n///    colour,text colour and print border width with the variables.\n/// 9. 'Random number' for the heading triangle.\n/// 10. 'Random number' for the heading triangle positioning.\n/// 11. 'Random number' used for spacing to compensate for the triangle.\n/// 12. Needed to enable the triangle to show correctly in high contrast mode.\n/// 13. Prevent additional padding on headings\n/// 14. Give the action link icon sufficient contrast when used in the emergency variant\n/// 15. Reset the positioning to the default [1] to display heading triangle on a coloured background.\n/// 16. Emergency care card <a> needs to be white because the background colour is black.\n/// 17. Trick IE10 into rendering the invisible clickable area. Without this it does not.\n/// 18. Increase the clickable area to the border of the card and the shadow.\n///\n/// @group components/card\n////\n\n$nhsuk-card-border-width: 1px;\n$nhsuk-card-border-bottom-width: nhsuk-spacing(1) - 1px;\n$nhsuk-card-border-colour: $nhsuk-border-colour;\n$nhsuk-card-border-hover-colour: nhsuk-colour(\"grey-3\");\n\n// @deprecated To be removed in v11.0\n$card-border-width: $nhsuk-card-border-width;\n$card-border-bottom-width: $nhsuk-card-border-bottom-width;\n$card-border-color: $nhsuk-card-border-colour;\n$card-border-colour: $nhsuk-card-border-colour;\n$card-border-hover-color: $nhsuk-card-border-hover-colour;\n$card-border-hover-colour: $nhsuk-card-border-hover-colour;\n\n@include nhsuk-exports(\"nhsuk/components/card\") {\n  .nhsuk-card {\n    box-sizing: border-box;\n    position: relative; // [1]\n    width: 100%;\n\n    @include nhsuk-panel($nhsuk-card-background-colour, $nhsuk-text-colour, $nhsuk-card-border-colour);\n  }\n\n  .nhsuk-card__img,\n  .nhsuk-card .nhsuk-image {\n    display: block;\n    width: 100%;\n    margin: 0;\n    border-bottom: $nhsuk-card-border-width solid nhsuk-colour(\"grey-5\"); // [2]\n  }\n\n  .nhsuk-card__content {\n    box-sizing: border-box;\n    @include nhsuk-top-and-bottom;\n    @include nhsuk-responsive-padding(5);\n  }\n\n  .nhsuk-card .nhsuk-image__caption {\n    @include nhsuk-responsive-padding(5, \"left\");\n    @include nhsuk-responsive-padding(5, \"right\");\n  }\n\n  .nhsuk-card__heading {\n    flex-basis: 0;\n    flex-grow: 999;\n\n    &:has(+ .nhsuk-icon) {\n      margin-bottom: 0;\n    }\n  }\n\n  .nhsuk-card__heading-container,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-card--care__heading-container {\n    @include nhsuk-responsive-padding(5);\n  }\n\n  .nhsuk-card__heading-container {\n    &:last-child {\n      @include nhsuk-top-and-bottom;\n    }\n\n    &:not(:last-child) {\n      padding-bottom: 0;\n    }\n\n    + .nhsuk-card__content {\n      padding-top: 0;\n    }\n\n    @include nhsuk-media-query($from: tablet) {\n      display: flex;\n      flex-wrap: nowrap;\n      align-items: baseline;\n      justify-content: space-between;\n\n      &:has(.nhsuk-card__actions:only-child) {\n        justify-content: right;\n      }\n    }\n  }\n\n  .nhsuk-card__actions {\n    display: flex;\n\n    flex-wrap: wrap;\n    row-gap: 10px;\n\n    margin: nhsuk-spacing(-1) 0 nhsuk-spacing(3);\n    padding: 0;\n\n    list-style: none;\n    @include nhsuk-font(19, $weight: bold);\n\n    @include nhsuk-media-query($from: tablet) {\n      justify-content: right;\n      margin: 0 0 nhsuk-spacing(3) nhsuk-spacing(3);\n      text-align: right;\n\n      &:only-child {\n        margin-left: 0;\n      }\n    }\n  }\n\n  .nhsuk-card__action {\n    display: inline-block;\n\n    // We use the following media query to target IE11 and 10 only to add margin\n    // between actions.\n    //\n    // We do this because we're using row-gap to create space between actions on\n    // more evergreen browsers which IE doesn't support. @supports currently isn't\n    // a viable solution, see https://github.com/w3c/csswg-drafts/issues/3559.\n    //\n    // Solution taken from https://stackoverflow.com/questions/11173106/apply-style-only-on-ie#answer-36448860\n    // which also includes an explanation of why this works\n    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n      margin-bottom: nhsuk-spacing(1);\n    }\n  }\n\n  .nhsuk-card__action:last-child {\n    // See above comment for why this is here\n    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n      margin-bottom: 0;\n    }\n  }\n\n  @include nhsuk-media-query($until: tablet) {\n    .nhsuk-card__action {\n      margin-right: nhsuk-spacing(2);\n      padding-right: nhsuk-spacing(2);\n      border-right: 1px solid $nhsuk-border-colour;\n    }\n\n    .nhsuk-card__action:last-child {\n      margin-right: 0;\n      padding-right: 0;\n      border: 0;\n    }\n  }\n\n  @include nhsuk-media-query($from: tablet) {\n    .nhsuk-card__action {\n      margin-bottom: 0;\n      margin-left: nhsuk-spacing(2);\n      padding-left: nhsuk-spacing(2);\n    }\n\n    .nhsuk-card__action:not(:first-child) {\n      border-left: 1px solid $nhsuk-border-colour;\n    }\n\n    .nhsuk-card__action:first-child {\n      margin-left: 0;\n      padding-left: 0;\n      border: 0;\n    }\n  }\n\n  .nhsuk-card__description {\n    margin-bottom: 0;\n  }\n\n  // Card shadow shared styles\n\n  .nhsuk-card--clickable,\n  .nhsuk-card--secondary {\n    box-shadow: 0 $nhsuk-card-border-bottom-width 0 $nhsuk-border-colour;\n    @include nhsuk-responsive-margin(7, \"bottom\", $adjustment: $nhsuk-card-border-bottom-width); // [18]\n  }\n\n  // Clickable card\n\n  .nhsuk-card--clickable {\n    .nhsuk-card__heading a,\n    .nhsuk-card__link {\n      &::before {\n        content: \"\";\n\n        display: block;\n\n        position: absolute;\n        top: -$nhsuk-card-border-width; // [18]\n        right: -$nhsuk-card-border-width; // [18]\n        bottom: -$nhsuk-card-border-width - $nhsuk-card-border-bottom-width; // [18]\n        left: -$nhsuk-card-border-width; // [18]\n\n        background-color: rgba(255, 255, 255, 0); // [17]\n      }\n    }\n\n    &:hover,\n    &:has(.nhsuk-card__heading a:hover),\n    &:has(.nhsuk-card__link:hover) {\n      border-color: $nhsuk-card-border-hover-colour;\n      box-shadow: 0 $nhsuk-card-border-bottom-width 0 $nhsuk-card-border-hover-colour;\n    }\n\n    &:hover .nhsuk-icon,\n    &:has(.nhsuk-card__heading a:hover) .nhsuk-icon,\n    &:has(.nhsuk-card__link:hover) .nhsuk-icon {\n      fill: $nhsuk-link-hover-colour;\n\n      @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n        fill: linktext;\n      }\n    }\n\n    &:active,\n    &:has(.nhsuk-card__heading a:active),\n    &:has(.nhsuk-card__link:active) {\n      top: $nhsuk-card-border-bottom-width; // [3]\n      box-shadow: none;\n    }\n\n    &:active .nhsuk-icon,\n    &:has(.nhsuk-card__heading a:active) .nhsuk-icon,\n    &:has(.nhsuk-card__link:active) .nhsuk-icon {\n      fill: $nhsuk-link-active-colour;\n\n      @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n        fill: activetext;\n      }\n    }\n  }\n\n  // Card group\n  //\n  // Allows you to have a row of cards.\n  // Flexbox is used to make each card in a row the same height.\n\n  .nhsuk-card-group {\n    margin-bottom: nhsuk-spacing(3);\n    padding: 0;\n\n    @include nhsuk-flex;\n\n    @include nhsuk-media-query($until: desktop) {\n      margin-bottom: nhsuk-spacing(6);\n    }\n\n    + h2,\n    + .nhsuk-heading-l,\n    + h3,\n    + .nhsuk-heading-m {\n      padding-top: 0; // [4]\n    }\n  }\n\n  .nhsuk-card-group__item {\n    margin-bottom: 0;\n    list-style-type: none;\n\n    @include nhsuk-flex-item;\n\n    .nhsuk-card {\n      margin-bottom: nhsuk-spacing(5);\n    }\n\n    .nhsuk-card--clickable,\n    .nhsuk-card--secondary {\n      margin-bottom: nhsuk-spacing(5) + $nhsuk-card-border-bottom-width; // [18]\n    }\n\n    @include nhsuk-media-query($until: desktop) {\n      .nhsuk-card {\n        margin-bottom: nhsuk-spacing(3);\n      }\n\n      .nhsuk-card--clickable,\n      .nhsuk-card--secondary {\n        margin-bottom: nhsuk-spacing(3) + $nhsuk-card-border-bottom-width; // [18]\n      }\n\n      &:last-child .nhsuk-card {\n        margin-bottom: 0;\n      }\n\n      &:last-child .nhsuk-card--clickable,\n      &:last-child .nhsuk-card--secondary {\n        margin-bottom: $nhsuk-card-border-bottom-width; // [18]\n      }\n    }\n  }\n\n  // Card panel shared styles\n\n  .nhsuk-card--feature > .nhsuk-card__heading-container,\n  .nhsuk-card--feature > .nhsuk-card__content,\n  .nhsuk-card--warning > .nhsuk-card__heading-container,\n  .nhsuk-card--warning > .nhsuk-card__content,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-card__content--feature {\n    padding: 0; // [7]\n  }\n\n  .nhsuk-card--feature > .nhsuk-card__heading-container,\n  .nhsuk-card--warning > .nhsuk-card__heading-container {\n    @include nhsuk-media-query($from: tablet) {\n      align-items: flex-start;\n    }\n\n    .nhsuk-card__actions {\n      margin-top: 0;\n\n      @include nhsuk-media-query($from: tablet) {\n        padding-top: nhsuk-spacing(4);\n      }\n    }\n  }\n\n  // Card feature\n\n  .nhsuk-card--feature {\n    @include nhsuk-panel-with-label($nhsuk-card-background-colour, $nhsuk-text-colour, $nhsuk-card-border-colour);\n  }\n\n  .nhsuk-card--feature > .nhsuk-card__heading-container > .nhsuk-card__heading,\n  .nhsuk-card--feature > .nhsuk-card__content > .nhsuk-card__heading,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-card__heading--feature {\n    flex-basis: auto;\n    flex-grow: 0;\n    @include nhsuk-heading-label($nhsuk-brand-colour, $nhsuk-reverse-text-colour);\n  }\n\n  // Card warning\n\n  .nhsuk-card--warning {\n    @include nhsuk-panel-with-label(nhsuk-colour(\"pale-yellow\"), $nhsuk-text-colour, nhsuk-colour(\"yellow\"));\n  }\n\n  .nhsuk-card--warning > .nhsuk-card__heading-container > .nhsuk-card__heading,\n  .nhsuk-card--warning > .nhsuk-card__content > .nhsuk-card__heading {\n    flex-basis: auto;\n    flex-grow: 0;\n    @include nhsuk-heading-label(nhsuk-colour(\"yellow\"), $nhsuk-text-colour);\n  }\n\n  // Care card\n\n  .nhsuk-card--care {\n    @include nhsuk-care-card($nhsuk-brand-colour, $nhsuk-reverse-text-colour, 4px); // [8]\n    @include nhsuk-responsive-margin(7, \"top\");\n  }\n\n  .nhsuk-card--care > .nhsuk-card__heading-container,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-card--care__heading-container {\n    position: relative;\n    padding-top: nhsuk-spacing(3);\n    padding-bottom: nhsuk-spacing(3) - $nhsuk-card-border-width;\n    border-bottom: $nhsuk-card-border-width solid transparent;\n  }\n\n  .nhsuk-card--care > .nhsuk-card__heading-container > .nhsuk-card__heading,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-card--care__heading {\n    margin: 0;\n    padding-top: 0; // [13]\n\n    @include nhsuk-font(26, $weight: bold);\n    @include nhsuk-print-colour;\n  }\n\n  .nhsuk-card--care__arrow {\n    display: block;\n\n    position: absolute;\n    bottom: nhsuk-px-to-rem(-11px); // [9]\n    left: nhsuk-px-to-rem(30px); // [10]\n\n    width: nhsuk-px-to-rem(20px); // [9]\n    height: nhsuk-px-to-rem(20px); // [9]\n\n    overflow: hidden;\n\n    transform: rotate(45deg);\n    @include nhsuk-print-hide;\n\n    @include nhsuk-media-query($from: tablet) {\n      left: nhsuk-px-to-rem(38px); // [10]\n    }\n\n    &::before,\n    &::after {\n      content: \"\";\n\n      display: block;\n\n      position: absolute;\n      top: 0;\n\n      width: 0;\n      height: 0;\n\n      transform: rotate(45deg); // [12]\n\n      border: solid nhsuk-px-to-rem(32px) $nhsuk-brand-colour; // [9]\n    }\n  }\n\n  .nhsuk-card--care .nhsuk-card__content {\n    @include nhsuk-responsive-padding(5, \"top\");\n  }\n\n  .nhsuk-card--care--non-urgent > .nhsuk-card__heading-container,\n  .nhsuk-card--care--urgent > .nhsuk-card__heading-container,\n  .nhsuk-card--care--emergency > .nhsuk-card__heading-container {\n    .nhsuk-card__actions {\n      margin-top: nhsuk-spacing(3);\n      margin-bottom: 0;\n\n      @include nhsuk-media-query($from: tablet) {\n        align-self: center;\n        margin-top: 0;\n      }\n    }\n\n    .nhsuk-card__action a {\n      @include nhsuk-link-style-reverse;\n    }\n  }\n\n  .nhsuk-card--care--non-urgent > .nhsuk-card__heading-container {\n    .nhsuk-card__action {\n      border-color: $nhsuk-reverse-border-colour;\n    }\n  }\n\n  .nhsuk-card--care--urgent > .nhsuk-card__heading-container,\n  .nhsuk-card--care--emergency > .nhsuk-card__heading-container {\n    .nhsuk-card__action {\n      border-color: nhsuk-tint(nhsuk-colour(\"red\"), 20%);\n    }\n  }\n\n  .nhsuk-card--care--urgent {\n    @include nhsuk-care-card(nhsuk-colour(\"red\"), $nhsuk-reverse-text-colour, 6px);\n\n    .nhsuk-card--care__arrow {\n      &::before,\n      &::after {\n        border-color: nhsuk-colour(\"red\");\n      }\n    }\n  }\n\n  .nhsuk-card--care--emergency {\n    @include nhsuk-care-card(nhsuk-colour(\"red\"), $nhsuk-reverse-text-colour, 8px);\n\n    .nhsuk-card--care__arrow {\n      &::before,\n      &::after {\n        border-color: nhsuk-colour(\"red\");\n      }\n    }\n\n    .nhsuk-card__content {\n      position: static; // [15]\n      border: 0;\n      color: $nhsuk-reverse-text-colour;\n      background-color: nhsuk-colour(\"black\");\n\n      a:not(.nhsuk-action-link):not(.nhsuk-button) {\n        @include nhsuk-link-style-reverse;\n      }\n\n      @include nhsuk-print-colour {\n        background-color: $nhsuk-card-background-colour;\n      }\n    }\n\n    .nhsuk-details,\n    .nhsuk-details__summary {\n      color: $nhsuk-reverse-text-colour;\n    }\n\n    .nhsuk-details__summary {\n      &:hover {\n        color: $nhsuk-reverse-text-colour;\n      }\n\n      &:focus {\n        color: $nhsuk-focus-text-colour;\n      }\n    }\n\n    .nhsuk-action-link:not(.nhsuk-action-link--reverse) {\n      @include nhsuk-link-style-reverse;\n    }\n  }\n\n  // Card primary\n\n  .nhsuk-card--primary > .nhsuk-card__content,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-card__content--primary {\n    @include nhsuk-responsive-spacing(\n      5,\n      \"padding\",\n      $direction: \"right\",\n      $adjustment: nhsuk-px-to-rem(nhsuk-spacing(7))\n    );\n\n    @include nhsuk-media-query($from: desktop) {\n      height: 100%;\n    }\n  }\n\n  .nhsuk-card--primary,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-card__content--primary {\n    .nhsuk-icon {\n      display: block;\n\n      position: absolute;\n      top: 50%;\n\n      width: nhsuk-px-to-rem($nhsuk-icon-size-large);\n      height: nhsuk-px-to-rem($nhsuk-icon-size-large);\n      margin-top: nhsuk-px-to-rem(math.floor(math.div($nhsuk-icon-size-large, -2)));\n\n      pointer-events: none;\n\n      fill: $nhsuk-link-colour;\n      @include nhsuk-responsive-spacing(5, \"right\");\n\n      @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n        fill: buttontext;\n      }\n    }\n  }\n\n  // Card secondary\n\n  .nhsuk-card--secondary {\n    border-top: 0;\n    border-right: 0;\n    border-left: 0;\n    background: transparent;\n  }\n\n  .nhsuk-card--secondary > .nhsuk-card__heading-container,\n  .nhsuk-card--secondary > .nhsuk-card__content,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-card__content--secondary {\n    padding-top: 0;\n    padding-right: 0;\n    padding-left: 0;\n  }\n}\n"]}

package/dist/nhsuk/components/details/_index.scss

@@ -87,7 +87,7 @@ $expander-icon-size: $nhsuk-expander-icon-size;
       width: fit-content; // [1]
       padding-left: nhsuk-px-to-rem(nhsuk-spacing(4));
       cursor: pointer;
-      @include nhsuk-link-style;
+      @include nhsuk-link-style-default;
 
       &:hover,
       &:focus {

package/dist/nhsuk/components/details/_index.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/nhsuk/components/details/_index.scss"],"names":[],"mappings":"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","file":"_index.scss","sourcesContent":["@use \"sass:math\";\n@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n\n////\n/// Details component\n///\n/// 1. Make the focus outline shrink-wrap the text content of the summary\n/// 2. Allow for absolutely positioned marker and align with disclosed text\n/// 3. Only underline the text, not the arrow\n/// 4. Remove the default details marker so we can style our own consistently\n///    and ensure it displays in Firefox\n/// 5. Custom padding to left align the details text with the summary\n///\n/// @group components/details\n/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)\n////\n\n$nhsuk-expander-border-width: 1px;\n$nhsuk-expander-border-bottom-width: $nhsuk-border-width;\n$nhsuk-expander-border-colour: $nhsuk-border-colour;\n$nhsuk-expander-border-hover-colour: nhsuk-colour(\"grey-3\");\n$nhsuk-expander-icon-size: 27px; // 19px font size + 4px summary text padding\n\n// @deprecated To be removed in v11.0\n$expander-border-width: $nhsuk-expander-border-width;\n$expander-border-bottom-width: $nhsuk-expander-border-bottom-width;\n$expander-border-color: $nhsuk-expander-border-colour;\n$expander-border-colour: $nhsuk-expander-border-colour;\n$expander-border-hover-color: $nhsuk-expander-border-hover-colour;\n$expander-border-hover-colour: $nhsuk-expander-border-hover-colour;\n$expander-icon-size: $nhsuk-expander-icon-size;\n\n@include nhsuk-exports(\"nhsuk/components/details\") {\n  .nhsuk-details {\n    display: block;\n    @include nhsuk-text-colour;\n    @include nhsuk-font-size(19);\n    @include nhsuk-responsive-margin(4, \"bottom\");\n  }\n\n  .nhsuk-details--reverse {\n    color: $nhsuk-reverse-text-colour;\n  }\n\n  .nhsuk-details__summary {\n    display: block;\n  }\n\n  .nhsuk-details__text {\n    @include nhsuk-top-and-bottom;\n  }\n\n  // Hack to support Internet Explorer 11\n  @media screen\\0 {\n    .nhsuk-details {\n      margin-top: nhsuk-spacing(2);\n      padding: nhsuk-spacing(3) 0;\n      padding-left: nhsuk-px-to-rem(nhsuk-spacing(4) - $nhsuk-border-width); // [5]\n      border-left: $nhsuk-border-width solid nhsuk-colour(\"grey-3\");\n    }\n\n    .nhsuk-details--reverse {\n      border-left-color: $nhsuk-reverse-border-colour;\n    }\n\n    .nhsuk-details__summary-text {\n      display: block;\n      font-weight: $nhsuk-font-weight-bold;\n      @include nhsuk-responsive-margin(4, \"bottom\");\n    }\n  }\n\n  // Use a feature query to style the <details> element in newer browsers,\n  // leaving older browsers to only show the content\n  //\n  // Additionally, -ms-ime-align is only supported by Edge 12 - 18\n  //\n  // This ensures we don't use these styles in browsers which:\n  //   - support ES6 modules but not the <details> element (Edge 16 - 18)\n  //   - do not support ES6 modules or the <details> element (eg, IE8+)\n  @supports not (-ms-ime-align: auto) {\n    .nhsuk-details__summary {\n      position: relative; // [2]\n      width: fit-content; // [1]\n      padding-left: nhsuk-px-to-rem(nhsuk-spacing(4));\n      cursor: pointer;\n      @include nhsuk-link-style;\n\n      &:hover,\n      &:focus {\n        .nhsuk-details__summary-text {\n          text-decoration: none;\n        }\n      }\n\n      &::-webkit-details-marker {\n        display: none; // [4]\n      }\n\n      &::before {\n        content: \"\";\n\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n\n        margin: auto;\n\n        @include nhsuk-shape-arrow($direction: right, $base: 14px);\n      }\n\n      .nhsuk-details[open] > &::before {\n        @include nhsuk-shape-arrow($direction: down, $base: 14px);\n      }\n\n      .nhsuk-details--reverse &:not(:focus),\n      .nhsuk-details--reverse &:not(:focus):hover {\n        color: $nhsuk-reverse-text-colour;\n      }\n    }\n\n    // ...but only underline the text, not the arrow\n    .nhsuk-details__summary-text {\n      text-decoration: underline; // [3]\n    }\n\n    .nhsuk-details__text {\n      margin-top: nhsuk-spacing(2);\n      padding: nhsuk-spacing(3) 0;\n      padding-right: 0;\n      padding-left: nhsuk-px-to-rem(nhsuk-spacing(4) - $nhsuk-border-width); // [5]\n      border-left: $nhsuk-border-width solid nhsuk-colour(\"grey-3\");\n\n      .nhsuk-details--reverse & {\n        border-left-color: $nhsuk-reverse-border-colour;\n      }\n    }\n  }\n\n  // Expander variant\n\n  .nhsuk-expander {\n    border: none;\n    background-color: $nhsuk-card-background-colour;\n\n    .nhsuk-details__summary {\n      display: block;\n\n      width: auto;\n      padding: nhsuk-spacing(4);\n\n      border: $nhsuk-expander-border-width solid $nhsuk-expander-border-colour;\n      border-bottom: $nhsuk-expander-border-bottom-width solid $nhsuk-expander-border-colour;\n\n      background-color: $nhsuk-card-background-colour;\n\n      @include nhsuk-media-query($from: tablet) {\n        padding: nhsuk-spacing(5);\n      }\n    }\n\n    .nhsuk-details__summary:hover,\n    .nhsuk-details__summary:hover + .nhsuk-details__text,\n    &:has(.nhsuk-details__summary:hover) .nhsuk-details__summary,\n    &:has(.nhsuk-details__summary:hover) .nhsuk-details__text {\n      border-color: $nhsuk-expander-border-hover-colour;\n    }\n\n    &[open] .nhsuk-details__summary {\n      border-bottom: 0;\n    }\n\n    .nhsuk-details__text {\n      margin-top: 0;\n      margin-left: 0;\n      border: $nhsuk-expander-border-width solid $nhsuk-expander-border-colour;\n      border-top: 0;\n\n      @include nhsuk-responsive-padding(5, \"bottom\");\n      @include nhsuk-responsive-padding(5, \"left\");\n      @include nhsuk-responsive-padding(5, \"right\");\n      @include nhsuk-responsive-padding(0, \"top\");\n    }\n\n    // Hack to support Internet Explorer 11\n    @media screen\\0 {\n      margin-top: 0;\n      padding: 0;\n\n      .nhsuk-details__summary-text {\n        display: block;\n        font-weight: $nhsuk-font-weight-bold;\n        @include nhsuk-font-size(26);\n        @include nhsuk-responsive-margin(4, \"bottom\");\n      }\n    }\n\n    // Use a feature query to style the <details> element in newer browsers,\n    // leaving older browsers to show the content in a card style box\n    @supports not (-ms-ime-align: auto) {\n      border-bottom-width: $nhsuk-expander-border-bottom-width;\n\n      .nhsuk-details__summary {\n        padding-bottom: nhsuk-spacing(4);\n      }\n\n      @include nhsuk-media-query($from: tablet) {\n        .nhsuk-details__summary {\n          padding-bottom: nhsuk-spacing(5);\n        }\n      }\n\n      .nhsuk-details__summary::before,\n      &[open] > .nhsuk-details__summary::before {\n        display: none; // [6]\n      }\n\n      .nhsuk-details__summary:focus {\n        box-shadow: none;\n      }\n\n      .nhsuk-details__summary-text {\n        display: inline-block;\n\n        position: relative;\n\n        padding: nhsuk-spacing(1);\n        padding-left: $nhsuk-expander-icon-size + nhsuk-spacing(2);\n\n        color: $nhsuk-link-colour;\n\n        cursor: pointer;\n      }\n\n      .nhsuk-details__summary:hover .nhsuk-details__summary-text {\n        color: $nhsuk-link-hover-colour;\n      }\n\n      .nhsuk-details__summary:focus .nhsuk-details__summary-text {\n        @include nhsuk-focused-text;\n      }\n\n      // Internet Explorer 11 doesn’t support clip-path, but we don’t show the\n      // ::before pseudo element to users of that browser\n      .nhsuk-details__summary-text::before {\n        content: \"\";\n\n        position: absolute;\n        top: calc(50% - math.div($nhsuk-expander-icon-size, 2));\n        left: 0;\n\n        width: $nhsuk-expander-icon-size;\n        height: $nhsuk-expander-icon-size;\n\n        clip-path: path(\n          \"M13.5 1a12.5 12.5 0 1 1 0 25 12.5 12.5 0 0 1 0-25Zm0 6c-.8 0-1.5.7-1.5 1.5V12H8.5c-.8 0-1.4.6-1.5 1.4v.1c0 .8.7 1.5 1.5 1.5H12v3.5c0 .8.6 1.4 1.4 1.5h.1c.8 0 1.5-.7 1.5-1.5V15h3.5c.8 0 1.4-.6 1.5-1.4v-.1c0-.8-.7-1.5-1.5-1.5H15V8.5c0-.8-.6-1.4-1.4-1.5Z\"\n        ); // Plus icon\n\n        background-color: currentcolor;\n      }\n\n      &[open] {\n        border-bottom-width: $nhsuk-expander-border-width;\n      }\n\n      &[open] .nhsuk-details__summary-text::before {\n        clip-path: path(\n          \"M13.5 1a12.5 12.5 0 1 1 0 25 12.5 12.5 0 0 1 0-25Zm5 11h-10a1.5 1.5 0 0 0 0 3h10a1.5 1.5 0 0 0 0-3Z\"\n        ); // Minus icon\n      }\n\n      // Use a feature query to check for scalable clip-path support,\n      // replacing fixed pixel sizes with rems for text-only zooming\n      @supports (clip-path: shape(from 0% 0%, line to 100% 100%)) {\n        .nhsuk-details__summary-text {\n          padding-left: nhsuk-px-to-rem($nhsuk-expander-icon-size + nhsuk-spacing(2));\n        }\n\n        .nhsuk-details__summary-text::before {\n          top: calc(50% - nhsuk-px-to-rem(math.div($nhsuk-expander-icon-size, 2)));\n          width: nhsuk-px-to-rem($nhsuk-expander-icon-size);\n          height: nhsuk-px-to-rem($nhsuk-expander-icon-size);\n          clip-path: shape(\n            from 50% 3.7%,\n            arc by 0% 92.6% of 46.3% 46.3% large cw,\n            arc by 0% -92.6% of 46.3% 46.3% small cw,\n            close,\n            move by 0% 22.22%,\n            curve by -5.56% 5.56% with -2.96% 0% / -5.56% 2.59%,\n            vline to 44.44%,\n            hline to 31.48%,\n            curve by -5.56% 5.19% with -2.96% 0% / -5.19% 2.22%,\n            vline by 0.37%,\n            curve by 5.56% 5.56% with 0% 2.96% / 2.59% 5.56%,\n            hline to 44.44%,\n            vline by 12.96%,\n            curve by 5.19% 5.56% with 0% 2.96% / 2.22% 5.19%,\n            hline by 0.37%,\n            curve by 5.56% -5.56% with 2.96% 0% / 5.56% -2.59%,\n            vline to 55.56%,\n            hline by 12.96%,\n            curve by 5.56% -5.19% with 2.96% 0% / 5.19% -2.22%,\n            vline by -0.37%,\n            curve by -5.56% -5.56% with 0% -2.96% / -2.59% -5.56%,\n            hline to 55.56%,\n            vline to 31.48%,\n            curve by -5.19% -5.56% with 0% -2.96% / -2.22% -5.19%,\n            close\n          ); // Plus icon, scalable\n        }\n\n        &[open] .nhsuk-details__summary-text::before {\n          clip-path: shape(\n            from 50% 3.7%,\n            arc by 0% 92.6% of 46.3% 46.3% large cw,\n            arc by 0% -92.6% of 46.3% 46.3% small cw,\n            close,\n            move by 18.52% 40.74%,\n            hline by -37.04%,\n            arc by 0% 11.11% of 5.56% 5.56% small ccw,\n            hline by 37.04%,\n            arc by 0% -11.11% of 5.56% 5.56% small ccw,\n            close\n          ); // Minus icon, scalable\n        }\n      }\n    }\n  }\n\n  // Reduce margin between a group of expanders so they sit together\n  .nhsuk-expander-group {\n    @include nhsuk-responsive-margin(4, \"bottom\");\n\n    > .nhsuk-details {\n      @include nhsuk-responsive-margin(2, \"bottom\");\n    }\n  }\n\n  .nhsuk-details + h2,\n  .nhsuk-details + .nhsuk-heading-l {\n    @include nhsuk-responsive-padding(4, \"top\");\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/nhsuk/components/details/_index.scss"],"names":[],"mappings":"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","file":"_index.scss","sourcesContent":["@use \"sass:math\";\n@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n\n////\n/// Details component\n///\n/// 1. Make the focus outline shrink-wrap the text content of the summary\n/// 2. Allow for absolutely positioned marker and align with disclosed text\n/// 3. Only underline the text, not the arrow\n/// 4. Remove the default details marker so we can style our own consistently\n///    and ensure it displays in Firefox\n/// 5. Custom padding to left align the details text with the summary\n///\n/// @group components/details\n/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)\n////\n\n$nhsuk-expander-border-width: 1px;\n$nhsuk-expander-border-bottom-width: $nhsuk-border-width;\n$nhsuk-expander-border-colour: $nhsuk-border-colour;\n$nhsuk-expander-border-hover-colour: nhsuk-colour(\"grey-3\");\n$nhsuk-expander-icon-size: 27px; // 19px font size + 4px summary text padding\n\n// @deprecated To be removed in v11.0\n$expander-border-width: $nhsuk-expander-border-width;\n$expander-border-bottom-width: $nhsuk-expander-border-bottom-width;\n$expander-border-color: $nhsuk-expander-border-colour;\n$expander-border-colour: $nhsuk-expander-border-colour;\n$expander-border-hover-color: $nhsuk-expander-border-hover-colour;\n$expander-border-hover-colour: $nhsuk-expander-border-hover-colour;\n$expander-icon-size: $nhsuk-expander-icon-size;\n\n@include nhsuk-exports(\"nhsuk/components/details\") {\n  .nhsuk-details {\n    display: block;\n    @include nhsuk-text-colour;\n    @include nhsuk-font-size(19);\n    @include nhsuk-responsive-margin(4, \"bottom\");\n  }\n\n  .nhsuk-details--reverse {\n    color: $nhsuk-reverse-text-colour;\n  }\n\n  .nhsuk-details__summary {\n    display: block;\n  }\n\n  .nhsuk-details__text {\n    @include nhsuk-top-and-bottom;\n  }\n\n  // Hack to support Internet Explorer 11\n  @media screen\\0 {\n    .nhsuk-details {\n      margin-top: nhsuk-spacing(2);\n      padding: nhsuk-spacing(3) 0;\n      padding-left: nhsuk-px-to-rem(nhsuk-spacing(4) - $nhsuk-border-width); // [5]\n      border-left: $nhsuk-border-width solid nhsuk-colour(\"grey-3\");\n    }\n\n    .nhsuk-details--reverse {\n      border-left-color: $nhsuk-reverse-border-colour;\n    }\n\n    .nhsuk-details__summary-text {\n      display: block;\n      font-weight: $nhsuk-font-weight-bold;\n      @include nhsuk-responsive-margin(4, \"bottom\");\n    }\n  }\n\n  // Use a feature query to style the <details> element in newer browsers,\n  // leaving older browsers to only show the content\n  //\n  // Additionally, -ms-ime-align is only supported by Edge 12 - 18\n  //\n  // This ensures we don't use these styles in browsers which:\n  //   - support ES6 modules but not the <details> element (Edge 16 - 18)\n  //   - do not support ES6 modules or the <details> element (eg, IE8+)\n  @supports not (-ms-ime-align: auto) {\n    .nhsuk-details__summary {\n      position: relative; // [2]\n      width: fit-content; // [1]\n      padding-left: nhsuk-px-to-rem(nhsuk-spacing(4));\n      cursor: pointer;\n      @include nhsuk-link-style-default;\n\n      &:hover,\n      &:focus {\n        .nhsuk-details__summary-text {\n          text-decoration: none;\n        }\n      }\n\n      &::-webkit-details-marker {\n        display: none; // [4]\n      }\n\n      &::before {\n        content: \"\";\n\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n\n        margin: auto;\n\n        @include nhsuk-shape-arrow($direction: right, $base: 14px);\n      }\n\n      .nhsuk-details[open] > &::before {\n        @include nhsuk-shape-arrow($direction: down, $base: 14px);\n      }\n\n      .nhsuk-details--reverse &:not(:focus),\n      .nhsuk-details--reverse &:not(:focus):hover {\n        color: $nhsuk-reverse-text-colour;\n      }\n    }\n\n    // ...but only underline the text, not the arrow\n    .nhsuk-details__summary-text {\n      text-decoration: underline; // [3]\n    }\n\n    .nhsuk-details__text {\n      margin-top: nhsuk-spacing(2);\n      padding: nhsuk-spacing(3) 0;\n      padding-right: 0;\n      padding-left: nhsuk-px-to-rem(nhsuk-spacing(4) - $nhsuk-border-width); // [5]\n      border-left: $nhsuk-border-width solid nhsuk-colour(\"grey-3\");\n\n      .nhsuk-details--reverse & {\n        border-left-color: $nhsuk-reverse-border-colour;\n      }\n    }\n  }\n\n  // Expander variant\n\n  .nhsuk-expander {\n    border: none;\n    background-color: $nhsuk-card-background-colour;\n\n    .nhsuk-details__summary {\n      display: block;\n\n      width: auto;\n      padding: nhsuk-spacing(4);\n\n      border: $nhsuk-expander-border-width solid $nhsuk-expander-border-colour;\n      border-bottom: $nhsuk-expander-border-bottom-width solid $nhsuk-expander-border-colour;\n\n      background-color: $nhsuk-card-background-colour;\n\n      @include nhsuk-media-query($from: tablet) {\n        padding: nhsuk-spacing(5);\n      }\n    }\n\n    .nhsuk-details__summary:hover,\n    .nhsuk-details__summary:hover + .nhsuk-details__text,\n    &:has(.nhsuk-details__summary:hover) .nhsuk-details__summary,\n    &:has(.nhsuk-details__summary:hover) .nhsuk-details__text {\n      border-color: $nhsuk-expander-border-hover-colour;\n    }\n\n    &[open] .nhsuk-details__summary {\n      border-bottom: 0;\n    }\n\n    .nhsuk-details__text {\n      margin-top: 0;\n      margin-left: 0;\n      border: $nhsuk-expander-border-width solid $nhsuk-expander-border-colour;\n      border-top: 0;\n\n      @include nhsuk-responsive-padding(5, \"bottom\");\n      @include nhsuk-responsive-padding(5, \"left\");\n      @include nhsuk-responsive-padding(5, \"right\");\n      @include nhsuk-responsive-padding(0, \"top\");\n    }\n\n    // Hack to support Internet Explorer 11\n    @media screen\\0 {\n      margin-top: 0;\n      padding: 0;\n\n      .nhsuk-details__summary-text {\n        display: block;\n        font-weight: $nhsuk-font-weight-bold;\n        @include nhsuk-font-size(26);\n        @include nhsuk-responsive-margin(4, \"bottom\");\n      }\n    }\n\n    // Use a feature query to style the <details> element in newer browsers,\n    // leaving older browsers to show the content in a card style box\n    @supports not (-ms-ime-align: auto) {\n      border-bottom-width: $nhsuk-expander-border-bottom-width;\n\n      .nhsuk-details__summary {\n        padding-bottom: nhsuk-spacing(4);\n      }\n\n      @include nhsuk-media-query($from: tablet) {\n        .nhsuk-details__summary {\n          padding-bottom: nhsuk-spacing(5);\n        }\n      }\n\n      .nhsuk-details__summary::before,\n      &[open] > .nhsuk-details__summary::before {\n        display: none; // [6]\n      }\n\n      .nhsuk-details__summary:focus {\n        box-shadow: none;\n      }\n\n      .nhsuk-details__summary-text {\n        display: inline-block;\n\n        position: relative;\n\n        padding: nhsuk-spacing(1);\n        padding-left: $nhsuk-expander-icon-size + nhsuk-spacing(2);\n\n        color: $nhsuk-link-colour;\n\n        cursor: pointer;\n      }\n\n      .nhsuk-details__summary:hover .nhsuk-details__summary-text {\n        color: $nhsuk-link-hover-colour;\n      }\n\n      .nhsuk-details__summary:focus .nhsuk-details__summary-text {\n        @include nhsuk-focused-text;\n      }\n\n      // Internet Explorer 11 doesn’t support clip-path, but we don’t show the\n      // ::before pseudo element to users of that browser\n      .nhsuk-details__summary-text::before {\n        content: \"\";\n\n        position: absolute;\n        top: calc(50% - math.div($nhsuk-expander-icon-size, 2));\n        left: 0;\n\n        width: $nhsuk-expander-icon-size;\n        height: $nhsuk-expander-icon-size;\n\n        clip-path: path(\n          \"M13.5 1a12.5 12.5 0 1 1 0 25 12.5 12.5 0 0 1 0-25Zm0 6c-.8 0-1.5.7-1.5 1.5V12H8.5c-.8 0-1.4.6-1.5 1.4v.1c0 .8.7 1.5 1.5 1.5H12v3.5c0 .8.6 1.4 1.4 1.5h.1c.8 0 1.5-.7 1.5-1.5V15h3.5c.8 0 1.4-.6 1.5-1.4v-.1c0-.8-.7-1.5-1.5-1.5H15V8.5c0-.8-.6-1.4-1.4-1.5Z\"\n        ); // Plus icon\n\n        background-color: currentcolor;\n      }\n\n      &[open] {\n        border-bottom-width: $nhsuk-expander-border-width;\n      }\n\n      &[open] .nhsuk-details__summary-text::before {\n        clip-path: path(\n          \"M13.5 1a12.5 12.5 0 1 1 0 25 12.5 12.5 0 0 1 0-25Zm5 11h-10a1.5 1.5 0 0 0 0 3h10a1.5 1.5 0 0 0 0-3Z\"\n        ); // Minus icon\n      }\n\n      // Use a feature query to check for scalable clip-path support,\n      // replacing fixed pixel sizes with rems for text-only zooming\n      @supports (clip-path: shape(from 0% 0%, line to 100% 100%)) {\n        .nhsuk-details__summary-text {\n          padding-left: nhsuk-px-to-rem($nhsuk-expander-icon-size + nhsuk-spacing(2));\n        }\n\n        .nhsuk-details__summary-text::before {\n          top: calc(50% - nhsuk-px-to-rem(math.div($nhsuk-expander-icon-size, 2)));\n          width: nhsuk-px-to-rem($nhsuk-expander-icon-size);\n          height: nhsuk-px-to-rem($nhsuk-expander-icon-size);\n          clip-path: shape(\n            from 50% 3.7%,\n            arc by 0% 92.6% of 46.3% 46.3% large cw,\n            arc by 0% -92.6% of 46.3% 46.3% small cw,\n            close,\n            move by 0% 22.22%,\n            curve by -5.56% 5.56% with -2.96% 0% / -5.56% 2.59%,\n            vline to 44.44%,\n            hline to 31.48%,\n            curve by -5.56% 5.19% with -2.96% 0% / -5.19% 2.22%,\n            vline by 0.37%,\n            curve by 5.56% 5.56% with 0% 2.96% / 2.59% 5.56%,\n            hline to 44.44%,\n            vline by 12.96%,\n            curve by 5.19% 5.56% with 0% 2.96% / 2.22% 5.19%,\n            hline by 0.37%,\n            curve by 5.56% -5.56% with 2.96% 0% / 5.56% -2.59%,\n            vline to 55.56%,\n            hline by 12.96%,\n            curve by 5.56% -5.19% with 2.96% 0% / 5.19% -2.22%,\n            vline by -0.37%,\n            curve by -5.56% -5.56% with 0% -2.96% / -2.59% -5.56%,\n            hline to 55.56%,\n            vline to 31.48%,\n            curve by -5.19% -5.56% with 0% -2.96% / -2.22% -5.19%,\n            close\n          ); // Plus icon, scalable\n        }\n\n        &[open] .nhsuk-details__summary-text::before {\n          clip-path: shape(\n            from 50% 3.7%,\n            arc by 0% 92.6% of 46.3% 46.3% large cw,\n            arc by 0% -92.6% of 46.3% 46.3% small cw,\n            close,\n            move by 18.52% 40.74%,\n            hline by -37.04%,\n            arc by 0% 11.11% of 5.56% 5.56% small ccw,\n            hline by 37.04%,\n            arc by 0% -11.11% of 5.56% 5.56% small ccw,\n            close\n          ); // Minus icon, scalable\n        }\n      }\n    }\n  }\n\n  // Reduce margin between a group of expanders so they sit together\n  .nhsuk-expander-group {\n    @include nhsuk-responsive-margin(4, \"bottom\");\n\n    > .nhsuk-details {\n      @include nhsuk-responsive-margin(2, \"bottom\");\n    }\n  }\n\n  .nhsuk-details + h2,\n  .nhsuk-details + .nhsuk-heading-l {\n    @include nhsuk-responsive-padding(4, \"top\");\n  }\n}\n"]}

package/dist/nhsuk/components/header/_index.scss

@@ -56,8 +56,7 @@ $nhsuk-header-reverse-item-active-colour: $nhsuk-reverse-text-colour;
   @include nhsuk-link-style-active($link-active-colour);
   @include nhsuk-link-style-focus;
 
-  &:focus,
-  &:focus:visited {
+  &:focus {
     color: $nhsuk-focus-text-colour;
     box-shadow: inset 0 ($nhsuk-focus-width * -1) $nhsuk-focus-text-colour;
   }

package/dist/nhsuk/components/header/_index.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/nhsuk/components/header/_index.scss"],"names":[],"mappings":"AAAA,gBAAgB;AAChB,8BAA8B;AAC9B,+BAA+B;AAC/B,4BAA4B;AAC5B,8BAA8B;AAC9B,kCAAkC;AAClC,mBAAmB;;AAEnB,GAAG;AACH,mBAAmB;AACnB,EAAE;AACF,0CAA0C;AAC1C,EAAE;AACF,qBAAqB;AACrB,0DAA0D;AAC1D,0DAA0D;AAC1D,sBAAsB;AACtB,EAAE;AACF,0DAA0D;AAC1D,EAAE;AACF,4EAA4E;AAC5E,0EAA0E;AAC1E,6EAA6E;AAC7E,EAAE;AACF,2BAA2B;AAC3B,GAAG;;AAEH,8CAA8C;AAC9C,sEAAsE;AACtE,sEAAsE;AACtE,uEAAuE;;AAEvE,6DAA6D;AAC7D,mEAAmE;AACnE,oEAAoE;;AAEpE,sBAAsB;AACtB,EAAE;AACF,yEAAyE;AACzE,2FAA2F;AAC3F,8FAA8F;AAC9F,EAAE;AACF,kBAAkB;;AAElB;;;;;EAKE;IACE,mBAAmB;EACrB;;EAEA,+CAA+C;EAC/C,mDAAmD;EACnD,qDAAqD;EACrD,+BAA+B;;EAE/B;;IAEE,+BAA+B;IAC/B,sEAAsE;EACxE;;EAEA;IACE;MACE,WAAW;IACb;EACF;AACF;;AAEA;EACE,2BAA2B;EAC3B,0BAA0B;EAC1B,6CAA6C;;EAE7C;IACE,8BAA8B;IAC9B,iCAAiC;IACjC,qCAAqC;;IAErC,0CAA0C;IAC1C;MACE,0DAA0D;IAC5D;;IAEA,2BAA2B;EAC7B;;EAEA;IACE,2BAA2B;;IAE3B;MACE,aAAa;MACb,mBAAmB;MACnB,qBAAqB;;MAErB;QACE,sCAAsC;MACxC;IACF;;IAEA;MACE,aAAa;MACb,mBAAmB;MACnB,qBAAqB;IACvB;EACF;;EAEA,kCAAkC;;EAElC;IACE,iCAAiC;IACjC,iBAAiB;EACnB;;EAEA;;IAEE,kBAAkB;IAClB,sCAAsC;EACxC;;EAEA;IACE,aAAa;;IAEb,mDAAmD;IACnD;MACE,kCAAkC;MAClC,cAAc;IAChB;;IAEA,wCAAwC;IACxC;MACE,gBAAgB;IAClB;;IAEA;MACE,cAAc;IAChB;EACF;;EAEA;IACE,oBAAoB;;IAEpB,sBAAsB;IACtB,YAAY;IACZ,uBAAuB;;IAEvB,eAAe;IACf,kBAAkB;;IAElB,kBAAkB;IAClB,0CAA0C;;IAE1C;MACE,cAAc;IAChB;EACF;;EAEA;IACE,oBAAoB;;IAEpB,kBAAkB;;IAElB,YAAY;;IAEZ,eAAe;;IAEf,cAAc;IACd,qBAAqB;;IAErB;MACE,aAAa;IACf;;IAEA,iCAAiC;IACjC,CAAC;IACD,0EAA0E;IAC1E,4EAA4E;IAC5E,6EAA6E;IAC7E;MACE,WAAW;;MAEX,sBAAsB;;MAEtB,eAAe;;MAEf,kBAAkB;MAClB,WAAW;;MAEX,6BAA6B;MAC7B,6BAA6B;;MAE7B,wCAAwC;IAC1C;EACF;;EAEA;;;;IAIE;;;;KAIC;EACH;;EAEA,SAAS;;EAET;IACE,YAAY;;IAEZ,4BAA4B;;IAE5B,gBAAgB;;IAEhB,uDAAuD;IACvD,oDAAoD;;IAEpD,uDAAuD;;IAEvD;MACE,cAAc;MACd,4BAA4B;MAC5B,6BAA6B;IAC/B;;IAEA;MACE,iBAAiB;;MAEjB,mDAAmD;MACnD,gDAAgD;MAChD,YAAY;IACd;;IAEA,yBAAyB;;IAEzB;MACE,iBAAiB;;MAEjB,mDAAmD;MACnD,gDAAgD;MAChD,YAAY;IACd;EACF;;EAEA;IACE,aAAa;;IAEb,kBAAkB;;IAElB,eAAe;;IAEf,SAAS;IACT,UAAU;;IAEV,gBAAgB;;IAEhB,gBAAgB;;IAEhB,QAAQ;EACV;;EAEA;IACE,aAAa;;IAEb,YAAY;;IAEZ,SAAS;IACT,+CAA+C;;IAE/C,sCAAsC;;IAEtC,uBAAuB;;IAEvB,qBAAqB;IACrB,uBAAuB;;IAEvB;MACE,kBAAkB;IACpB;;IAEA;MACE,YAAY;IACd;EACF;;EAEA;;IAEE,aAAa;IACb,sDAAsD;IACtD,+CAA+C;IAC/C,uBAAuB;IACvB,qBAAqB;EACvB;;EAEA;IACE,SAAS;IACT,gBAAgB;IAChB,0BAA0B;IAC1B,eAAe;IACf,uBAAuB;EACzB;;EAEA,QAAQ;;EAER;IACE,cAAc;IACd,kBAAkB;IAClB,WAAW;IACX,YAAY;IACZ,4BAA4B;;IAE5B;MACE,aAAa;IACf;;IAEA,yBAAyB;;IAEzB;MACE,SAAS;IACX;;IAEA;MACE,4BAA4B;MAC5B,6BAA6B;IAC/B;EACF;;EAEA;IACE,aAAa;IACb,YAAY;IACZ,iBAAiB;;IAEjB;MACE,WAAW;MACX,SAAS;IACX;;IAEA;MACE,aAAa;MACb,mBAAmB;IACrB;EACF;;EAEA,yCAAyC;EACzC;;;IAGE,WAAW;IACX,6BAA6B;IAC7B,uEAAuE;IACvE,sEAAsE;;IAEtE,8FAA8F;IAC9F,yBAAyB;;IAEzB,gDAAgD;;IAEhD,4BAA4B;;IAE5B;MACE,WAAW;MACX,sCAAsC;IACxC;;IAEA,qCAAqC;IACrC;MACE,aAAa;IACf;;IAEA,0DAA0D;IAC1D;;MAEE,wBAAgB;cAAhB,gBAAgB;IAClB;;IAEA;MACE,kBAAkB;IACpB;EACF;;EAEA;;;IAGE,cAAc;;IAEd,4BAA4B;IAC5B,6BAA6B;;IAE7B,sDAAsD;IACtD,oBAAoB;;IAEpB,mCAAmC;IACnC,iCAAiC;;IAEjC,6BAA6B;IAC7B,8FAA8F;;IAE9F,0BAA0B;IAC1B,kDAAkD;IAClD,gBAAgB;;IAEhB,cAAc;;IAEd,eAAe;;IAEf;;MAEE,mCAAmC;MACnC,4BAA4B;MAC5B,iDAAiD;IACnD;;IAEA;MACE,kDAAkD;IACpD;;IAEA,oCAAoC;IACpC;;MAEE,MAAM;IACR;;IAEA;MACE,aAAa;IACf;;IAEA;;MAEE,yBAAyB;;MAEzB,6BAA6B;IAC/B;EACF;;EAEA,YAAY;;EAEZ;IACE,qCAAqC;IACrC,4BAA4B;IAC5B,qCAAqC;;IAErC;MACE,SAAS;IACX;;IAEA,yBAAyB;EAC3B;;EAEA;IACE,aAAa;;IAEb,kBAAkB;;IAElB,eAAe;;IAEf,sCAAsC;IACtC,8CAA8C;IAC9C,UAAU;;IAEV,gBAAgB;;IAEhB;MACE,iCAAiC;MACjC,yCAAyC;IAC3C;;IAEA;MACE;QACE,8BAA8B;MAChC;IACF;;IAEA;MACE,iBAAiB;IACnB;EACF;;EAEA;IACE,gBAAgB;IAChB,0CAA0C;;IAE1C;MACE,6BAA6B;IAC/B;EACF;;EAEA,sEAAsE;EACtE,iEAAiE;EACjE,+EAA+E;EAC/E;IACE,oBAAoB;EACtB;;EAEA;;IAEE,cAAc;;IAEd,kBAAkB;;IAElB,SAAS;IACT,+CAA+C;;IAE/C,SAAS;IACT,gBAAgB;;IAEhB,wCAAwC;;IAExC,uBAAuB;;IAEvB,0BAA0B;IAC1B,mBAAmB;;IAEnB,eAAe;IACf,uBAAuB;;IAEvB,mEAAmE;IACnE;MACE,WAAW;;MAEX,cAAc;;MAEd,kBAAkB;MAClB,QAAQ;MACR,SAAS;MACT,OAAO;;MAEP,4BAA4B;IAC9B;;IAEA,yCAAyC;IACzC;;MAEE,8CAA8C;IAChD;;IAEA;MACE,kBAAkB;IACpB;EACF;;EAEA;IACE;;;;KAIC;EACH;;EAEA,yDAAyD;;EAEzD;IACE,kBAAkB;IAClB,0CAA0C;;IAE1C;MACE,aAAa;IACf;;IAEA;MACE,6BAA6B;IAC/B;EACF;;EAEA;IACE,uBAAuB;;IAEvB,aAAa;IACb,mBAAmB;IACnB,gDAAgD;IAChD,kBAAkB;;IAElB;;MAEE,qBAAqB;IACvB;;IAEA;MACE,aAAa;IACf;;IAEA;MACE,WAAW;;MAEX,kBAAkB;MAClB,QAAQ;MACR,4BAA4B;MAC5B,SAAS;;MAET,YAAY;;MAEZ,iFAAiF;IACnF;;IAEA;MACE,+EAA+E;IACjF;EACF;;EAEA;IACE,kBAAkB;IAClB,SAAS;IACT,QAAQ;IACR,OAAO;;IAEP,yCAAyC;IACzC,UAAU;;IAEV,gBAAgB;;IAEhB,yBAAyB;;IAEzB;MACE,4BAA4B;IAC9B;;IAEA;MACE,aAAa;IACf;;IAEA;;MAEE,gCAAgC;;MAEhC,iEAAiE;MACjE;;QAEE,MAAM;QACN,WAAW;QACX,SAAS;QACT,yBAAyB;;QAEzB,QAAQ;;QAER,4CAA4C;;QAE5C,+CAA+C;QAC/C;UACE,oBAAoB;QACtB;MACF;IACF;;IAEA;MACE,2BAA2B;IAC7B;;IAEA;MACE,UAAU;MACV,+CAA+C;;MAE/C;QACE,yBAAyB;MAC3B;IACF;EACF;;EAEA,iCAAiC;;EAEjC;IACE,0BAA0B;IAC1B,uCAAuC;;IAEvC;;MAEE,gCAAgC;IAClC;;IAEA;MACE,2BAA2B;IAC7B;;IAEA;MACE,4CAA4C;IAC9C;EACF;;EAEA,6DAA6D;EAC7D,oDAAoD;EACpD,4CAA4C;EAC5C;IACE,mDAAmD;;IAEnD;MACE,2CAA2C;IAC7C;;IAEA;;MAEE,aAAa;MACb,gBAAgB;IAClB;;IAEA;;MAEE;QACE,2CAA2C;QAC3C,gBAAgB;MAClB;IACF;EACF;;EAEA,sBAAsB;;EAEtB;IACE,0BAA0B;IAC1B,uCAAuC;;IAEvC;;;;MAIE,2BAA2B;IAC7B;;IAEA;MACE,yBAAyB;IAC3B;;IAEA;MACE,kCAAkC;MAClC,wCAAwC;IAC1C;;IAEA;MACE,mCAAmC;IACrC;;IAEA;;;MAGE,kBAAkB;MAClB,oCAAoC;MACpC,yCAAyC;MACzC,iBAAiB;MACjB,oCAAoC;IACtC;;IAEA;;;MAGE,iCAAiC;MACjC,2CAA2C;;MAE3C;;QAEE,6CAA6C;QAC7C,iDAAiD;MACnD;;MAEA;QACE,kDAAkD;MACpD;IACF;EACF;;EAEA,6BAA6B;;EAE7B;IACE;MACE,4BAA4B;MAC5B,eAAe;MACf,6BAA6B;MAC7B,mCAAmC;;MAEnC;QACE,4BAA4B;QAC5B,6BAA6B;MAC/B;IACF;;IAEA;MACE,cAAc;;MAEd,oCAAoC;MACpC;QACE,4BAA4B;QAC5B,6BAA6B;;QAE7B;UACE,4BAA4B;UAC5B,6BAA6B;QAC/B;MACF;IACF;EACF;;EAEA;IACE,cAAc;IACd,yDAAyD;EAC3D;;EAEA;IACE,cAAc;EAChB;;EAEA;IACE,cAAc;IACd,sCAAsC;EACxC;;EAEA;IACE,6BAA6B;IAC7B,YAAY;IACZ,SAAS;;IAET;MACE,iCAAiC;IACnC;;IAEA;MACE,6BAA6B;MAC7B,iCAAiC;IACnC;EACF;;EAEA,+BAA+B;EAC/B;IACE,qBAAqB;EACvB;;EAEA,qCAAqC;EACrC;;;IAGE,0BAA0B;EAC5B;;EAEA,sCAAsC;EACtC;IACE,0BAA0B;EAC5B;AACF","file":"_index.scss","sourcesContent":["@use \"sass:math\";\n@use \"../../core/objects\" as *;\n@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n@forward \"../../core/styles/icons\";\n@forward \"../input\";\n\n////\n/// Header component\n///\n/// This component has 4 colour variations:\n///\n/// 1. Blue background\n/// 2. Blue background with white background for navigation\n/// 3. White background with blue background for navigation\n/// 4. White background\n///\n/// The behaviour with regards to navigation is as follows:\n///\n/// Menu toggle button is hidden until there is no space for navigation items\n/// to display horizontally. Once there are overflowing navigation items to\n/// display, the menu toggle button is shown, which toggles the overflow menu.\n///\n/// @group components/header\n////\n\n$nhsuk-header-item-colour: $nhsuk-brand-colour;\n$nhsuk-header-item-button-colour: nhsuk-tint($nhsuk-brand-colour, 93%);\n$nhsuk-header-item-hover-colour: nhsuk-shade($nhsuk-brand-colour, 20%);\n$nhsuk-header-item-active-colour: nhsuk-shade($nhsuk-brand-colour, 35%);\n\n$nhsuk-header-reverse-item-colour: $nhsuk-reverse-text-colour;\n$nhsuk-header-reverse-item-hover-colour: $nhsuk-reverse-text-colour;\n$nhsuk-header-reverse-item-active-colour: $nhsuk-reverse-text-colour;\n\n/// Header link styling\n///\n/// @param {Colour} $link-colour [$nhsuk-header-item-colour] - Link colour\n/// @param {Colour} $link-hover-colour [$nhsuk-header-item-hover-colour] - Link hover colour\n/// @param {Colour} $link-active-colour [$nhsuk-header-item-active-colour] - Link active colour\n///\n/// @access private\n\n@mixin _header-link-style(\n  $link-colour: $nhsuk-header-item-colour,\n  $link-hover-colour: $nhsuk-header-item-hover-colour,\n  $link-active-colour: $nhsuk-header-item-active-colour\n) {\n  & {\n    color: $link-colour;\n  }\n\n  @include nhsuk-link-style-visited($link-colour);\n  @include nhsuk-link-style-hover($link-hover-colour);\n  @include nhsuk-link-style-active($link-active-colour);\n  @include nhsuk-link-style-focus;\n\n  &:focus,\n  &:focus:visited {\n    color: $nhsuk-focus-text-colour;\n    box-shadow: inset 0 ($nhsuk-focus-width * -1) $nhsuk-focus-text-colour;\n  }\n\n  @include nhsuk-print-colour($print-colour: inherit) {\n    &::after {\n      content: \"\";\n    }\n  }\n}\n\n@include nhsuk-exports(\"nhsuk/components/header\") {\n  $_header-item-padding: 12px;\n  $_header-link-padding: 2px;\n  $_header-item-active-size: $nhsuk-focus-width;\n\n  .nhsuk-header {\n    outline: 1px solid transparent;\n    color: $nhsuk-reverse-text-colour;\n    background-color: $nhsuk-brand-colour;\n\n    // Add shadow to bottom of header when open\n    &:has(.nhsuk-header__menu-list:not([hidden])) {\n      border-bottom: nhsuk-spacing(1) solid $nhsuk-border-colour;\n    }\n\n    @include nhsuk-print-colour;\n  }\n\n  .nhsuk-header__container {\n    padding: nhsuk-spacing(3) 0;\n\n    .nhsuk-header--inline & {\n      display: flex;\n      flex-flow: row wrap;\n      gap: nhsuk-spacing(3);\n\n      @include nhsuk-media-query($from: tablet) {\n        gap: nhsuk-spacing(3) nhsuk-spacing(4);\n      }\n    }\n\n    @include nhsuk-media-query($from: tablet) {\n      display: flex;\n      flex-flow: row wrap;\n      gap: nhsuk-spacing(3);\n    }\n  }\n\n  // Service logo (and optional name)\n\n  .nhsuk-header__logo {\n    min-width: nhsuk-px-to-rem(100px);\n    height: intrinsic;\n  }\n\n  .nhsuk-header__service,\n  .nhsuk-header__service-logo {\n    margin-right: auto;\n    gap: nhsuk-spacing(2) nhsuk-spacing(3);\n  }\n\n  .nhsuk-header__service {\n    display: flex;\n\n    // Always reserve space for service name when inline\n    .nhsuk-header--inline & {\n      flex-basis: nhsuk-px-to-rem(220px);\n      flex-grow: 999;\n    }\n\n    // Unless we know there's no service name\n    .nhsuk-header--inline &:not(:has(.nhsuk-header__service-name)) {\n      flex-basis: auto;\n    }\n\n    @include nhsuk-media-query($from: tablet) {\n      flex-grow: 999;\n    }\n  }\n\n  .nhsuk-header__service-name {\n    display: inline-flex;\n\n    flex-direction: column;\n    flex-grow: 0;\n    justify-content: center;\n\n    max-width: 54ch;\n    margin-right: auto;\n\n    text-wrap: balance;\n    @include nhsuk-font(19, $line-height: 1.1);\n\n    &:only-child {\n      display: block;\n    }\n  }\n\n  .nhsuk-header__service-logo {\n    display: inline-flex;\n\n    position: relative;\n\n    flex-grow: 0;\n\n    margin-right: 0;\n\n    line-height: 0;\n    text-decoration: none;\n\n    &:only-child {\n      display: flex;\n    }\n\n    // Add SVG logo underline on hover\n    //\n    // It should be possible to add a box shadow directly to .nhsuk-header_logo\n    // however Safari doesn’t render anything beyond the bounding box of the SVG.\n    // By adding a pseudo element with the same dimensions, we style this instead.\n    &:has(svg):not(:focus):hover::before {\n      content: \"\";\n\n      box-sizing: border-box;\n\n      display: inline;\n\n      position: absolute;\n      top: 0.2rem;\n\n      width: nhsuk-px-to-rem(100px);\n      height: nhsuk-px-to-rem(40px);\n\n      border-bottom: 0.1rem solid currentcolor;\n    }\n  }\n\n  .nhsuk-header__service-logo,\n  .nhsuk-header__service-name[href],\n  .nhsuk-header__account-button,\n  .nhsuk-header__account-link {\n    @include _header-link-style(\n      $link-colour: $nhsuk-header-reverse-item-colour,\n      $link-hover-colour: $nhsuk-header-reverse-item-hover-colour,\n      $link-active-colour: $nhsuk-header-reverse-item-active-colour\n    );\n  }\n\n  // Account\n\n  .nhsuk-header__account {\n    flex-grow: 1;\n\n    margin-top: nhsuk-spacing(3);\n\n    overflow: hidden;\n\n    border: 1px solid nhsuk-shade($nhsuk-brand-colour, 20%);\n    border-radius: nhsuk-px-to-rem($nhsuk-border-radius);\n\n    background-color: nhsuk-shade($nhsuk-brand-colour, 20%);\n\n    .nhsuk-icon--user {\n      flex-shrink: 0;\n      width: nhsuk-px-to-rem(24px);\n      height: nhsuk-px-to-rem(24px);\n    }\n\n    .nhsuk-header--inline & {\n      align-self: start;\n\n      // Expand header account by 1px to ensure the search\n      // input does not appear to be taller when inline\n      margin: -1px;\n    }\n\n    @include nhsuk-print-hide;\n\n    @include nhsuk-media-query($from: tablet) {\n      align-self: start;\n\n      // Expand header account by 1px to ensure the search\n      // input does not appear to be taller when inline\n      margin: -1px;\n    }\n  }\n\n  .nhsuk-header__account-list {\n    display: flex;\n\n    position: relative;\n\n    flex-wrap: wrap;\n\n    margin: 0;\n    padding: 0;\n\n    overflow: hidden;\n\n    list-style: none;\n\n    gap: 1px;\n  }\n\n  .nhsuk-header__account-item {\n    display: flex;\n\n    flex-grow: 1;\n\n    margin: 0;\n    padding: nhsuk-spacing(2) $_header-item-padding;\n\n    outline: 1px solid $nhsuk-brand-colour;\n\n    overflow-wrap: anywhere;\n\n    gap: nhsuk-spacing(2);\n    @include nhsuk-font(16);\n\n    &:nth-last-child(2) {\n      margin-right: auto;\n    }\n\n    &:last-child {\n      flex-grow: 0;\n    }\n  }\n\n  .nhsuk-header__account-button,\n  .nhsuk-header__account-link {\n    display: flex;\n    margin: nhsuk-spacing(-2) ($_header-item-padding * -1);\n    padding: nhsuk-spacing(2) $_header-item-padding;\n    overflow-wrap: anywhere;\n    gap: nhsuk-spacing(2);\n  }\n\n  .nhsuk-header__account-button {\n    border: 0;\n    background: none;\n    text-decoration: underline;\n    cursor: pointer;\n    @include nhsuk-font(16);\n  }\n\n  // Search\n\n  .nhsuk-header__search {\n    display: block;\n    position: relative;\n    z-index: 10;\n    flex-grow: 1;\n    margin-top: nhsuk-spacing(3);\n\n    .nhsuk-header--inline & {\n      margin-top: 0;\n    }\n\n    @include nhsuk-print-hide;\n\n    @include nhsuk-media-query($from: tablet) {\n      margin: 0;\n    }\n\n    .nhsuk-icon--search {\n      width: nhsuk-px-to-rem(28px);\n      height: nhsuk-px-to-rem(28px);\n    }\n  }\n\n  .nhsuk-header__search-form {\n    display: flex;\n    height: 100%;\n    overflow: visible;\n\n    .nhsuk-form-group {\n      width: 100%;\n      margin: 0;\n    }\n\n    .nhsuk-input-wrapper {\n      display: flex;\n      flex-direction: row;\n    }\n  }\n\n  // Disable default search input appearance\n  .nhsuk-header__search-form .nhsuk-input,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-header__search-input {\n    width: 100%;\n    height: nhsuk-px-to-rem(40px);\n    padding-right: $_header-item-padding - $nhsuk-border-width-form-element;\n    padding-left: $_header-item-padding - $nhsuk-border-width-form-element;\n\n    border-radius: nhsuk-px-to-rem($nhsuk-border-radius) 0 0 nhsuk-px-to-rem($nhsuk-border-radius);\n    border-color: transparent;\n\n    background-color: $nhsuk-input-background-colour;\n\n    @include nhsuk-font-size(16);\n\n    &:focus {\n      z-index: 10;\n      border-color: $nhsuk-focus-text-colour;\n    }\n\n    // Hide search input clear button (IE)\n    &::-ms-clear {\n      display: none;\n    }\n\n    // Hide search input icon and cancel button (WebKit, Blink)\n    &::-webkit-search-decoration,\n    &::-webkit-search-cancel-button {\n      appearance: none;\n    }\n\n    @include nhsuk-media-query($until: tablet) {\n      font-size: inherit;\n    }\n  }\n\n  .nhsuk-header__search-form .nhsuk-button,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-header__search-submit {\n    flex-shrink: 0;\n\n    width: nhsuk-px-to-rem(44px);\n    height: nhsuk-px-to-rem(40px);\n\n    // stylelint-disable-next-line declaration-no-important\n    margin: 0 !important;\n\n    // Reduce padding to better fit icon\n    padding: 0 nhsuk-spacing(2) - 1px;\n\n    border: 1px solid transparent;\n    border-radius: 0 nhsuk-px-to-rem($nhsuk-border-radius) nhsuk-px-to-rem($nhsuk-border-radius) 0;\n\n    color: $nhsuk-brand-colour;\n    background-color: $nhsuk-header-item-button-colour;\n    box-shadow: none;\n\n    line-height: 1;\n\n    cursor: pointer;\n\n    &:hover,\n    &:active {\n      border-color: nhsuk-colour(\"white\");\n      color: nhsuk-colour(\"white\");\n      background-color: $nhsuk-header-item-hover-colour;\n    }\n\n    &:active {\n      background-color: $nhsuk-header-item-active-colour;\n    }\n\n    // Prevent height change when pressed\n    &:active,\n    &:active:focus {\n      top: 0;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &:focus:not(:active),\n    &:focus:not(:active):hover {\n      border-color: transparent;\n\n      @include nhsuk-focused-button;\n    }\n  }\n\n  // Navigation\n\n  .nhsuk-header__navigation {\n    border: 0 solid nhsuk-colour(\"white\");\n    color: nhsuk-colour(\"white\");\n    background-color: $nhsuk-brand-colour;\n\n    @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n      border: 0;\n    }\n\n    @include nhsuk-print-hide;\n  }\n\n  .nhsuk-header__navigation-list {\n    display: flex;\n\n    position: relative;\n\n    flex-wrap: wrap;\n\n    width: calc(100% + $nhsuk-gutter-half);\n    margin: 0 math.div($nhsuk-gutter-half, 2) * -1;\n    padding: 0;\n\n    list-style: none;\n\n    @include nhsuk-media-query($from: tablet) {\n      width: calc(100% + $nhsuk-gutter);\n      margin: 0 math.div($nhsuk-gutter, 2) * -1;\n    }\n\n    .nhsuk-header__navigation--justified & {\n      @include nhsuk-media-query($from: desktop) {\n        justify-content: space-between;\n      }\n    }\n\n    .nhsuk-frontend-supported & {\n      flex-wrap: nowrap;\n    }\n  }\n\n  .nhsuk-header__navigation-item {\n    margin-bottom: 0;\n    padding: 0 math.div($nhsuk-gutter-half, 2);\n\n    @include nhsuk-media-query($from: tablet) {\n      padding: 0 $nhsuk-gutter-half;\n    }\n  }\n\n  // This is a <strong> element used as a fallback mechanism for visually\n  // indicating current page in scenarios where CSS isn’t available.\n  // We don’t actually want it to be bold normally, so inherit parent font-weight.\n  .nhsuk-header__navigation-item-current-fallback {\n    font-weight: inherit;\n  }\n\n  .nhsuk-header__navigation-link,\n  .nhsuk-header__navigation-text {\n    display: block;\n\n    position: relative;\n\n    margin: 0;\n    padding: nhsuk-spacing(3) $_header-link-padding;\n\n    border: 0;\n    border-radius: 0;\n\n    color: $nhsuk-header-reverse-item-colour;\n\n    background: transparent;\n\n    text-decoration: underline;\n    white-space: nowrap;\n\n    cursor: pointer;\n    @include nhsuk-font(16);\n\n    // Visual indicator for navigation item uses a border on bottom edge\n    &::before {\n      content: \"\";\n\n      display: block;\n\n      position: absolute;\n      right: 0;\n      bottom: 0;\n      left: 0;\n\n      border: 0 solid currentcolor;\n    }\n\n    // Visual indicator for current navigation\n    &[aria-current=\"page\"]::before,\n    &[aria-current=\"true\"]::before {\n      border-bottom-width: $_header-item-active-size;\n    }\n\n    @include nhsuk-media-query($until: tablet) {\n      font-size: inherit;\n    }\n  }\n\n  .nhsuk-header__navigation-link {\n    @include _header-link-style(\n      $link-colour: $nhsuk-header-reverse-item-colour,\n      $link-hover-colour: $nhsuk-header-reverse-item-hover-colour,\n      $link-active-colour: $nhsuk-header-reverse-item-active-colour\n    );\n  }\n\n  // Menu (shown when screen can’t fit all navigation items)\n\n  .nhsuk-header__menu {\n    align-self: center;\n    padding: 0 math.div($nhsuk-gutter-half, 2);\n\n    &[hidden] {\n      display: none;\n    }\n\n    @include nhsuk-media-query($from: tablet) {\n      padding: 0 $nhsuk-gutter-half;\n    }\n  }\n\n  .nhsuk-header__menu-toggle {\n    $_chevron-font-size: 19;\n\n    display: flex;\n    align-items: center;\n    padding-right: nhsuk-em($_chevron-font-size, 16);\n    text-align: center;\n\n    &,\n    &:hover {\n      text-decoration: none;\n    }\n\n    &[hidden] {\n      display: none;\n    }\n\n    &::after {\n      content: \"\";\n\n      position: absolute;\n      top: 2px;\n      right: $_header-link-padding;\n      bottom: 0;\n\n      margin: auto;\n\n      @include nhsuk-shape-chevron(down, currentcolor, $font-size: $_chevron-font-size);\n    }\n\n    &[aria-expanded=\"true\"]::after {\n      @include nhsuk-shape-chevron(up, currentcolor, $font-size: $_chevron-font-size);\n    }\n  }\n\n  .nhsuk-header__menu-list {\n    position: absolute;\n    top: 100%;\n    right: 0;\n    left: 0;\n\n    margin: 0 math.div($nhsuk-gutter-half, 2);\n    padding: 0;\n\n    list-style: none;\n\n    @include nhsuk-print-hide;\n\n    @include nhsuk-media-query($from: tablet) {\n      margin: 0 $nhsuk-gutter-half;\n    }\n\n    &[hidden] {\n      display: none;\n    }\n\n    .nhsuk-header__navigation-link,\n    .nhsuk-header__navigation-text {\n      color: $nhsuk-header-item-colour;\n\n      // Visual indicator for navigation item uses a border on left edge\n      &[aria-current=\"page\"]::before,\n      &[aria-current=\"true\"]::before {\n        top: 0;\n        right: auto;\n        bottom: 0;\n        left: -$nhsuk-gutter-half;\n\n        width: 0;\n\n        border-left-width: $_header-item-active-size;\n\n        // stylelint-disable-next-line max-nesting-depth\n        @include nhsuk-media-query($from: desktop) {\n          left: -$nhsuk-gutter;\n        }\n      }\n    }\n\n    .nhsuk-header__navigation-link {\n      @include _header-link-style;\n    }\n\n    .nhsuk-header__navigation-item {\n      padding: 0;\n      border-bottom: 1px solid nhsuk-colour(\"grey-5\");\n\n      &:last-child {\n        border-color: transparent;\n      }\n    }\n  }\n\n  // White header navigation variant\n\n  .nhsuk-header__navigation--white {\n    color: $nhsuk-brand-colour;\n    background-color: nhsuk-colour(\"white\");\n\n    .nhsuk-header__navigation-link,\n    .nhsuk-header__navigation-text {\n      color: $nhsuk-header-item-colour;\n    }\n\n    .nhsuk-header__navigation-link {\n      @include _header-link-style;\n    }\n\n    .nhsuk-header__menu-list {\n      border-top: 1px solid nhsuk-colour(\"grey-5\");\n    }\n  }\n\n  // When header and navigation have the same background colour:\n  // - Until tablet breakpoint, add negative top margin\n  // - From tablet breakpoint, add a top border\n  .nhsuk-header__navigation-container {\n    box-shadow: 0 -1px 0 0 $nhsuk-reverse-border-colour;\n\n    .nhsuk-header--white .nhsuk-header__navigation--white & {\n      box-shadow: 0 -1px 0 0 $nhsuk-border-colour;\n    }\n\n    .nhsuk-header--white :not(.nhsuk-header__navigation--white) &,\n    .nhsuk-header__navigation--white & {\n      margin-top: 0;\n      box-shadow: none;\n    }\n\n    &,\n    .nhsuk-header--white .nhsuk-header__navigation--white & {\n      @include nhsuk-media-query($until: tablet) {\n        margin-top: math.div($nhsuk-gutter, 2) * -1;\n        box-shadow: none;\n      }\n    }\n  }\n\n  // White header variant\n\n  .nhsuk-header--white {\n    color: $nhsuk-brand-colour;\n    background-color: nhsuk-colour(\"white\");\n\n    .nhsuk-header__service-logo,\n    .nhsuk-header__service-name[href],\n    .nhsuk-header__account-button,\n    .nhsuk-header__account-link {\n      @include _header-link-style;\n    }\n\n    .nhsuk-header__service-logo:not(:focus):not(:hover) .nhsuk-header__organisation-name {\n      color: $nhsuk-text-colour;\n    }\n\n    .nhsuk-header__account {\n      border-color: $nhsuk-border-colour;\n      background-color: nhsuk-colour(\"grey-5\");\n    }\n\n    .nhsuk-header__account-item {\n      outline-color: $nhsuk-border-colour;\n    }\n\n    .nhsuk-header__search-form .nhsuk-input:not(:focus),\n    // Deprecated, to be removed in v11.0\n    .nhsuk-header__search-input:not(:focus) {\n      margin-right: -1px;\n      padding-right: $_header-item-padding;\n      padding-left: $_header-item-padding - 1px;\n      border-width: 1px;\n      border-color: nhsuk-colour(\"grey-3\");\n    }\n\n    .nhsuk-header__search-form .nhsuk-button,\n    // Deprecated, to be removed in v11.0\n    .nhsuk-header__search-submit {\n      color: $nhsuk-reverse-text-colour;\n      background-color: $nhsuk-header-item-colour;\n\n      &:hover,\n      &:active {\n        border-color: $nhsuk-header-item-hover-colour;\n        background-color: $nhsuk-header-item-hover-colour;\n      }\n\n      &:active {\n        background-color: $nhsuk-header-item-active-colour;\n      }\n    }\n  }\n\n  // Organisation header variant\n\n  .nhsuk-header--organisation {\n    .nhsuk-header__logo {\n      width: nhsuk-px-to-rem(60px);\n      min-width: auto;\n      height: nhsuk-px-to-rem(24px);\n      margin-bottom: nhsuk-px-to-rem(6px);\n\n      @include nhsuk-media-query($from: tablet) {\n        width: nhsuk-px-to-rem(80px);\n        height: nhsuk-px-to-rem(32px);\n      }\n    }\n\n    .nhsuk-header__service-logo {\n      display: block;\n\n      // Adjust SVG logo underline position\n      &:has(svg):not(:focus):hover::before {\n        width: nhsuk-px-to-rem(60px);\n        height: nhsuk-px-to-rem(24px);\n\n        @include nhsuk-media-query($from: tablet) {\n          width: nhsuk-px-to-rem(80px);\n          height: nhsuk-px-to-rem(32px);\n        }\n      }\n    }\n  }\n\n  .nhsuk-header__organisation-name {\n    display: block;\n    @include nhsuk-font(22, $weight: bold, $line-height: 1.1);\n  }\n\n  .nhsuk-header__organisation-name-split {\n    display: block;\n  }\n\n  .nhsuk-header__organisation-name-descriptor {\n    display: block;\n    @include nhsuk-font(14, $weight: bold);\n  }\n\n  .nhsuk-header__organisation-logo {\n    width: nhsuk-px-to-rem(280px);\n    height: auto;\n    border: 0;\n\n    @include nhsuk-media-query($until: 450px) {\n      max-width: nhsuk-px-to-rem(150px);\n    }\n\n    &[src$=\".svg\"] {\n      width: nhsuk-px-to-rem(220px);\n      max-width: nhsuk-px-to-rem(220px);\n    }\n  }\n\n  // Remove service name underline\n  .nhsuk-header .nhsuk-header__service-name[href] {\n    text-decoration: none;\n  }\n\n  // Add service logo underline on hover\n  .nhsuk-header .nhsuk-header__service-logo:not(:focus):hover,\n  .nhsuk-header .nhsuk-header__service-logo:not(:focus):hover .nhsuk-header__service-name,\n  .nhsuk-header .nhsuk-header__service-name[href]:not(:focus):hover {\n    text-decoration: underline;\n  }\n\n  // Add service logo box shadow on focus\n  .nhsuk-header .nhsuk-header__service-logo:focus {\n    @include nhsuk-focused-box;\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/nhsuk/components/header/_index.scss"],"names":[],"mappings":"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","file":"_index.scss","sourcesContent":["@use \"sass:math\";\n@use \"../../core/objects\" as *;\n@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n@forward \"../../core/styles/icons\";\n@forward \"../input\";\n\n////\n/// Header component\n///\n/// This component has 4 colour variations:\n///\n/// 1. Blue background\n/// 2. Blue background with white background for navigation\n/// 3. White background with blue background for navigation\n/// 4. White background\n///\n/// The behaviour with regards to navigation is as follows:\n///\n/// Menu toggle button is hidden until there is no space for navigation items\n/// to display horizontally. Once there are overflowing navigation items to\n/// display, the menu toggle button is shown, which toggles the overflow menu.\n///\n/// @group components/header\n////\n\n$nhsuk-header-item-colour: $nhsuk-brand-colour;\n$nhsuk-header-item-button-colour: nhsuk-tint($nhsuk-brand-colour, 93%);\n$nhsuk-header-item-hover-colour: nhsuk-shade($nhsuk-brand-colour, 20%);\n$nhsuk-header-item-active-colour: nhsuk-shade($nhsuk-brand-colour, 35%);\n\n$nhsuk-header-reverse-item-colour: $nhsuk-reverse-text-colour;\n$nhsuk-header-reverse-item-hover-colour: $nhsuk-reverse-text-colour;\n$nhsuk-header-reverse-item-active-colour: $nhsuk-reverse-text-colour;\n\n/// Header link styling\n///\n/// @param {Colour} $link-colour [$nhsuk-header-item-colour] - Link colour\n/// @param {Colour} $link-hover-colour [$nhsuk-header-item-hover-colour] - Link hover colour\n/// @param {Colour} $link-active-colour [$nhsuk-header-item-active-colour] - Link active colour\n///\n/// @access private\n\n@mixin _header-link-style(\n  $link-colour: $nhsuk-header-item-colour,\n  $link-hover-colour: $nhsuk-header-item-hover-colour,\n  $link-active-colour: $nhsuk-header-item-active-colour\n) {\n  & {\n    color: $link-colour;\n  }\n\n  @include nhsuk-link-style-visited($link-colour);\n  @include nhsuk-link-style-hover($link-hover-colour);\n  @include nhsuk-link-style-active($link-active-colour);\n  @include nhsuk-link-style-focus;\n\n  &:focus {\n    color: $nhsuk-focus-text-colour;\n    box-shadow: inset 0 ($nhsuk-focus-width * -1) $nhsuk-focus-text-colour;\n  }\n\n  @include nhsuk-print-colour($print-colour: inherit) {\n    &::after {\n      content: \"\";\n    }\n  }\n}\n\n@include nhsuk-exports(\"nhsuk/components/header\") {\n  $_header-item-padding: 12px;\n  $_header-link-padding: 2px;\n  $_header-item-active-size: $nhsuk-focus-width;\n\n  .nhsuk-header {\n    outline: 1px solid transparent;\n    color: $nhsuk-reverse-text-colour;\n    background-color: $nhsuk-brand-colour;\n\n    // Add shadow to bottom of header when open\n    &:has(.nhsuk-header__menu-list:not([hidden])) {\n      border-bottom: nhsuk-spacing(1) solid $nhsuk-border-colour;\n    }\n\n    @include nhsuk-print-colour;\n  }\n\n  .nhsuk-header__container {\n    padding: nhsuk-spacing(3) 0;\n\n    .nhsuk-header--inline & {\n      display: flex;\n      flex-flow: row wrap;\n      gap: nhsuk-spacing(3);\n\n      @include nhsuk-media-query($from: tablet) {\n        gap: nhsuk-spacing(3) nhsuk-spacing(4);\n      }\n    }\n\n    @include nhsuk-media-query($from: tablet) {\n      display: flex;\n      flex-flow: row wrap;\n      gap: nhsuk-spacing(3);\n    }\n  }\n\n  // Service logo (and optional name)\n\n  .nhsuk-header__logo {\n    min-width: nhsuk-px-to-rem(100px);\n    height: intrinsic;\n  }\n\n  .nhsuk-header__service,\n  .nhsuk-header__service-logo {\n    margin-right: auto;\n    gap: nhsuk-spacing(2) nhsuk-spacing(3);\n  }\n\n  .nhsuk-header__service {\n    display: flex;\n\n    // Always reserve space for service name when inline\n    .nhsuk-header--inline & {\n      flex-basis: nhsuk-px-to-rem(220px);\n      flex-grow: 999;\n    }\n\n    // Unless we know there's no service name\n    .nhsuk-header--inline &:not(:has(.nhsuk-header__service-name)) {\n      flex-basis: auto;\n    }\n\n    @include nhsuk-media-query($from: tablet) {\n      flex-grow: 999;\n    }\n  }\n\n  .nhsuk-header__service-name {\n    display: inline-flex;\n\n    flex-direction: column;\n    flex-grow: 0;\n    justify-content: center;\n\n    max-width: 54ch;\n    margin-right: auto;\n\n    text-wrap: balance;\n    @include nhsuk-font(19, $line-height: 1.1);\n\n    &:only-child {\n      display: block;\n    }\n  }\n\n  .nhsuk-header__service-logo {\n    display: inline-flex;\n\n    position: relative;\n\n    flex-grow: 0;\n\n    margin-right: 0;\n\n    line-height: 0;\n    text-decoration: none;\n\n    &:only-child {\n      display: flex;\n    }\n\n    // Add SVG logo underline on hover\n    //\n    // It should be possible to add a box shadow directly to .nhsuk-header_logo\n    // however Safari doesn’t render anything beyond the bounding box of the SVG.\n    // By adding a pseudo element with the same dimensions, we style this instead.\n    &:has(svg):not(:focus):hover::before {\n      content: \"\";\n\n      box-sizing: border-box;\n\n      display: inline;\n\n      position: absolute;\n      top: 0.2rem;\n\n      width: nhsuk-px-to-rem(100px);\n      height: nhsuk-px-to-rem(40px);\n\n      border-bottom: 0.1rem solid currentcolor;\n    }\n  }\n\n  .nhsuk-header__service-logo,\n  .nhsuk-header__service-name[href],\n  .nhsuk-header__account-button,\n  .nhsuk-header__account-link {\n    @include _header-link-style(\n      $link-colour: $nhsuk-header-reverse-item-colour,\n      $link-hover-colour: $nhsuk-header-reverse-item-hover-colour,\n      $link-active-colour: $nhsuk-header-reverse-item-active-colour\n    );\n  }\n\n  // Account\n\n  .nhsuk-header__account {\n    flex-grow: 1;\n\n    margin-top: nhsuk-spacing(3);\n\n    overflow: hidden;\n\n    border: 1px solid nhsuk-shade($nhsuk-brand-colour, 20%);\n    border-radius: nhsuk-px-to-rem($nhsuk-border-radius);\n\n    background-color: nhsuk-shade($nhsuk-brand-colour, 20%);\n\n    .nhsuk-icon--user {\n      flex-shrink: 0;\n      width: nhsuk-px-to-rem(24px);\n      height: nhsuk-px-to-rem(24px);\n    }\n\n    .nhsuk-header--inline & {\n      align-self: start;\n\n      // Expand header account by 1px to ensure the search\n      // input does not appear to be taller when inline\n      margin: -1px;\n    }\n\n    @include nhsuk-print-hide;\n\n    @include nhsuk-media-query($from: tablet) {\n      align-self: start;\n\n      // Expand header account by 1px to ensure the search\n      // input does not appear to be taller when inline\n      margin: -1px;\n    }\n  }\n\n  .nhsuk-header__account-list {\n    display: flex;\n\n    position: relative;\n\n    flex-wrap: wrap;\n\n    margin: 0;\n    padding: 0;\n\n    overflow: hidden;\n\n    list-style: none;\n\n    gap: 1px;\n  }\n\n  .nhsuk-header__account-item {\n    display: flex;\n\n    flex-grow: 1;\n\n    margin: 0;\n    padding: nhsuk-spacing(2) $_header-item-padding;\n\n    outline: 1px solid $nhsuk-brand-colour;\n\n    overflow-wrap: anywhere;\n\n    gap: nhsuk-spacing(2);\n    @include nhsuk-font(16);\n\n    &:nth-last-child(2) {\n      margin-right: auto;\n    }\n\n    &:last-child {\n      flex-grow: 0;\n    }\n  }\n\n  .nhsuk-header__account-button,\n  .nhsuk-header__account-link {\n    display: flex;\n    margin: nhsuk-spacing(-2) ($_header-item-padding * -1);\n    padding: nhsuk-spacing(2) $_header-item-padding;\n    overflow-wrap: anywhere;\n    gap: nhsuk-spacing(2);\n  }\n\n  .nhsuk-header__account-button {\n    border: 0;\n    background: none;\n    text-decoration: underline;\n    cursor: pointer;\n    @include nhsuk-font(16);\n  }\n\n  // Search\n\n  .nhsuk-header__search {\n    display: block;\n    position: relative;\n    z-index: 10;\n    flex-grow: 1;\n    margin-top: nhsuk-spacing(3);\n\n    .nhsuk-header--inline & {\n      margin-top: 0;\n    }\n\n    @include nhsuk-print-hide;\n\n    @include nhsuk-media-query($from: tablet) {\n      margin: 0;\n    }\n\n    .nhsuk-icon--search {\n      width: nhsuk-px-to-rem(28px);\n      height: nhsuk-px-to-rem(28px);\n    }\n  }\n\n  .nhsuk-header__search-form {\n    display: flex;\n    height: 100%;\n    overflow: visible;\n\n    .nhsuk-form-group {\n      width: 100%;\n      margin: 0;\n    }\n\n    .nhsuk-input-wrapper {\n      display: flex;\n      flex-direction: row;\n    }\n  }\n\n  // Disable default search input appearance\n  .nhsuk-header__search-form .nhsuk-input,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-header__search-input {\n    width: 100%;\n    height: nhsuk-px-to-rem(40px);\n    padding-right: $_header-item-padding - $nhsuk-border-width-form-element;\n    padding-left: $_header-item-padding - $nhsuk-border-width-form-element;\n\n    border-radius: nhsuk-px-to-rem($nhsuk-border-radius) 0 0 nhsuk-px-to-rem($nhsuk-border-radius);\n    border-color: transparent;\n\n    background-color: $nhsuk-input-background-colour;\n\n    @include nhsuk-font-size(16);\n\n    &:focus {\n      z-index: 10;\n      border-color: $nhsuk-focus-text-colour;\n    }\n\n    // Hide search input clear button (IE)\n    &::-ms-clear {\n      display: none;\n    }\n\n    // Hide search input icon and cancel button (WebKit, Blink)\n    &::-webkit-search-decoration,\n    &::-webkit-search-cancel-button {\n      appearance: none;\n    }\n\n    @include nhsuk-media-query($until: tablet) {\n      font-size: inherit;\n    }\n  }\n\n  .nhsuk-header__search-form .nhsuk-button,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-header__search-submit {\n    flex-shrink: 0;\n\n    width: nhsuk-px-to-rem(44px);\n    height: nhsuk-px-to-rem(40px);\n\n    // stylelint-disable-next-line declaration-no-important\n    margin: 0 !important;\n\n    // Reduce padding to better fit icon\n    padding: 0 nhsuk-spacing(2) - 1px;\n\n    border: 1px solid transparent;\n    border-radius: 0 nhsuk-px-to-rem($nhsuk-border-radius) nhsuk-px-to-rem($nhsuk-border-radius) 0;\n\n    color: $nhsuk-brand-colour;\n    background-color: $nhsuk-header-item-button-colour;\n    box-shadow: none;\n\n    line-height: 1;\n\n    cursor: pointer;\n\n    &:hover,\n    &:active {\n      border-color: nhsuk-colour(\"white\");\n      color: nhsuk-colour(\"white\");\n      background-color: $nhsuk-header-item-hover-colour;\n    }\n\n    &:active {\n      background-color: $nhsuk-header-item-active-colour;\n    }\n\n    // Prevent height change when pressed\n    &:active,\n    &:active:focus {\n      top: 0;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &:focus:not(:active),\n    &:focus:not(:active):hover {\n      border-color: transparent;\n\n      @include nhsuk-focused-button;\n    }\n  }\n\n  // Navigation\n\n  .nhsuk-header__navigation {\n    border: 0 solid nhsuk-colour(\"white\");\n    color: nhsuk-colour(\"white\");\n    background-color: $nhsuk-brand-colour;\n\n    @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n      border: 0;\n    }\n\n    @include nhsuk-print-hide;\n  }\n\n  .nhsuk-header__navigation-list {\n    display: flex;\n\n    position: relative;\n\n    flex-wrap: wrap;\n\n    width: calc(100% + $nhsuk-gutter-half);\n    margin: 0 math.div($nhsuk-gutter-half, 2) * -1;\n    padding: 0;\n\n    list-style: none;\n\n    @include nhsuk-media-query($from: tablet) {\n      width: calc(100% + $nhsuk-gutter);\n      margin: 0 math.div($nhsuk-gutter, 2) * -1;\n    }\n\n    .nhsuk-header__navigation--justified & {\n      @include nhsuk-media-query($from: desktop) {\n        justify-content: space-between;\n      }\n    }\n\n    .nhsuk-frontend-supported & {\n      flex-wrap: nowrap;\n    }\n  }\n\n  .nhsuk-header__navigation-item {\n    margin-bottom: 0;\n    padding: 0 math.div($nhsuk-gutter-half, 2);\n\n    @include nhsuk-media-query($from: tablet) {\n      padding: 0 $nhsuk-gutter-half;\n    }\n  }\n\n  // This is a <strong> element used as a fallback mechanism for visually\n  // indicating current page in scenarios where CSS isn’t available.\n  // We don’t actually want it to be bold normally, so inherit parent font-weight.\n  .nhsuk-header__navigation-item-current-fallback {\n    font-weight: inherit;\n  }\n\n  .nhsuk-header__navigation-link,\n  .nhsuk-header__navigation-text {\n    display: block;\n\n    position: relative;\n\n    margin: 0;\n    padding: nhsuk-spacing(3) $_header-link-padding;\n\n    border: 0;\n    border-radius: 0;\n\n    color: $nhsuk-header-reverse-item-colour;\n\n    background: transparent;\n\n    text-decoration: underline;\n    white-space: nowrap;\n\n    cursor: pointer;\n    @include nhsuk-font(16);\n\n    // Visual indicator for navigation item uses a border on bottom edge\n    &::before {\n      content: \"\";\n\n      display: block;\n\n      position: absolute;\n      right: 0;\n      bottom: 0;\n      left: 0;\n\n      border: 0 solid currentcolor;\n    }\n\n    // Visual indicator for current navigation\n    &[aria-current=\"page\"]::before,\n    &[aria-current=\"true\"]::before {\n      border-bottom-width: $_header-item-active-size;\n    }\n\n    @include nhsuk-media-query($until: tablet) {\n      font-size: inherit;\n    }\n  }\n\n  .nhsuk-header__navigation-link {\n    @include _header-link-style(\n      $link-colour: $nhsuk-header-reverse-item-colour,\n      $link-hover-colour: $nhsuk-header-reverse-item-hover-colour,\n      $link-active-colour: $nhsuk-header-reverse-item-active-colour\n    );\n  }\n\n  // Menu (shown when screen can’t fit all navigation items)\n\n  .nhsuk-header__menu {\n    align-self: center;\n    padding: 0 math.div($nhsuk-gutter-half, 2);\n\n    &[hidden] {\n      display: none;\n    }\n\n    @include nhsuk-media-query($from: tablet) {\n      padding: 0 $nhsuk-gutter-half;\n    }\n  }\n\n  .nhsuk-header__menu-toggle {\n    $_chevron-font-size: 19;\n\n    display: flex;\n    align-items: center;\n    padding-right: nhsuk-em($_chevron-font-size, 16);\n    text-align: center;\n\n    &,\n    &:hover {\n      text-decoration: none;\n    }\n\n    &[hidden] {\n      display: none;\n    }\n\n    &::after {\n      content: \"\";\n\n      position: absolute;\n      top: 2px;\n      right: $_header-link-padding;\n      bottom: 0;\n\n      margin: auto;\n\n      @include nhsuk-shape-chevron(down, currentcolor, $font-size: $_chevron-font-size);\n    }\n\n    &[aria-expanded=\"true\"]::after {\n      @include nhsuk-shape-chevron(up, currentcolor, $font-size: $_chevron-font-size);\n    }\n  }\n\n  .nhsuk-header__menu-list {\n    position: absolute;\n    top: 100%;\n    right: 0;\n    left: 0;\n\n    margin: 0 math.div($nhsuk-gutter-half, 2);\n    padding: 0;\n\n    list-style: none;\n\n    @include nhsuk-print-hide;\n\n    @include nhsuk-media-query($from: tablet) {\n      margin: 0 $nhsuk-gutter-half;\n    }\n\n    &[hidden] {\n      display: none;\n    }\n\n    .nhsuk-header__navigation-link,\n    .nhsuk-header__navigation-text {\n      color: $nhsuk-header-item-colour;\n\n      // Visual indicator for navigation item uses a border on left edge\n      &[aria-current=\"page\"]::before,\n      &[aria-current=\"true\"]::before {\n        top: 0;\n        right: auto;\n        bottom: 0;\n        left: -$nhsuk-gutter-half;\n\n        width: 0;\n\n        border-left-width: $_header-item-active-size;\n\n        // stylelint-disable-next-line max-nesting-depth\n        @include nhsuk-media-query($from: desktop) {\n          left: -$nhsuk-gutter;\n        }\n      }\n    }\n\n    .nhsuk-header__navigation-link {\n      @include _header-link-style;\n    }\n\n    .nhsuk-header__navigation-item {\n      padding: 0;\n      border-bottom: 1px solid nhsuk-colour(\"grey-5\");\n\n      &:last-child {\n        border-color: transparent;\n      }\n    }\n  }\n\n  // White header navigation variant\n\n  .nhsuk-header__navigation--white {\n    color: $nhsuk-brand-colour;\n    background-color: nhsuk-colour(\"white\");\n\n    .nhsuk-header__navigation-link,\n    .nhsuk-header__navigation-text {\n      color: $nhsuk-header-item-colour;\n    }\n\n    .nhsuk-header__navigation-link {\n      @include _header-link-style;\n    }\n\n    .nhsuk-header__menu-list {\n      border-top: 1px solid nhsuk-colour(\"grey-5\");\n    }\n  }\n\n  // When header and navigation have the same background colour:\n  // - Until tablet breakpoint, add negative top margin\n  // - From tablet breakpoint, add a top border\n  .nhsuk-header__navigation-container {\n    box-shadow: 0 -1px 0 0 $nhsuk-reverse-border-colour;\n\n    .nhsuk-header--white .nhsuk-header__navigation--white & {\n      box-shadow: 0 -1px 0 0 $nhsuk-border-colour;\n    }\n\n    .nhsuk-header--white :not(.nhsuk-header__navigation--white) &,\n    .nhsuk-header__navigation--white & {\n      margin-top: 0;\n      box-shadow: none;\n    }\n\n    &,\n    .nhsuk-header--white .nhsuk-header__navigation--white & {\n      @include nhsuk-media-query($until: tablet) {\n        margin-top: math.div($nhsuk-gutter, 2) * -1;\n        box-shadow: none;\n      }\n    }\n  }\n\n  // White header variant\n\n  .nhsuk-header--white {\n    color: $nhsuk-brand-colour;\n    background-color: nhsuk-colour(\"white\");\n\n    .nhsuk-header__service-logo,\n    .nhsuk-header__service-name[href],\n    .nhsuk-header__account-button,\n    .nhsuk-header__account-link {\n      @include _header-link-style;\n    }\n\n    .nhsuk-header__service-logo:not(:focus):not(:hover) .nhsuk-header__organisation-name {\n      color: $nhsuk-text-colour;\n    }\n\n    .nhsuk-header__account {\n      border-color: $nhsuk-border-colour;\n      background-color: nhsuk-colour(\"grey-5\");\n    }\n\n    .nhsuk-header__account-item {\n      outline-color: $nhsuk-border-colour;\n    }\n\n    .nhsuk-header__search-form .nhsuk-input:not(:focus),\n    // Deprecated, to be removed in v11.0\n    .nhsuk-header__search-input:not(:focus) {\n      margin-right: -1px;\n      padding-right: $_header-item-padding;\n      padding-left: $_header-item-padding - 1px;\n      border-width: 1px;\n      border-color: nhsuk-colour(\"grey-3\");\n    }\n\n    .nhsuk-header__search-form .nhsuk-button,\n    // Deprecated, to be removed in v11.0\n    .nhsuk-header__search-submit {\n      color: $nhsuk-reverse-text-colour;\n      background-color: $nhsuk-header-item-colour;\n\n      &:hover,\n      &:active {\n        border-color: $nhsuk-header-item-hover-colour;\n        background-color: $nhsuk-header-item-hover-colour;\n      }\n\n      &:active {\n        background-color: $nhsuk-header-item-active-colour;\n      }\n    }\n  }\n\n  // Organisation header variant\n\n  .nhsuk-header--organisation {\n    .nhsuk-header__logo {\n      width: nhsuk-px-to-rem(60px);\n      min-width: auto;\n      height: nhsuk-px-to-rem(24px);\n      margin-bottom: nhsuk-px-to-rem(6px);\n\n      @include nhsuk-media-query($from: tablet) {\n        width: nhsuk-px-to-rem(80px);\n        height: nhsuk-px-to-rem(32px);\n      }\n    }\n\n    .nhsuk-header__service-logo {\n      display: block;\n\n      // Adjust SVG logo underline position\n      &:has(svg):not(:focus):hover::before {\n        width: nhsuk-px-to-rem(60px);\n        height: nhsuk-px-to-rem(24px);\n\n        @include nhsuk-media-query($from: tablet) {\n          width: nhsuk-px-to-rem(80px);\n          height: nhsuk-px-to-rem(32px);\n        }\n      }\n    }\n  }\n\n  .nhsuk-header__organisation-name {\n    display: block;\n    @include nhsuk-font(22, $weight: bold, $line-height: 1.1);\n  }\n\n  .nhsuk-header__organisation-name-split {\n    display: block;\n  }\n\n  .nhsuk-header__organisation-name-descriptor {\n    display: block;\n    @include nhsuk-font(14, $weight: bold);\n  }\n\n  .nhsuk-header__organisation-logo {\n    width: nhsuk-px-to-rem(280px);\n    height: auto;\n    border: 0;\n\n    @include nhsuk-media-query($until: 450px) {\n      max-width: nhsuk-px-to-rem(150px);\n    }\n\n    &[src$=\".svg\"] {\n      width: nhsuk-px-to-rem(220px);\n      max-width: nhsuk-px-to-rem(220px);\n    }\n  }\n\n  // Remove service name underline\n  .nhsuk-header .nhsuk-header__service-name[href] {\n    text-decoration: none;\n  }\n\n  // Add service logo underline on hover\n  .nhsuk-header .nhsuk-header__service-logo:not(:focus):hover,\n  .nhsuk-header .nhsuk-header__service-logo:not(:focus):hover .nhsuk-header__service-name,\n  .nhsuk-header .nhsuk-header__service-name[href]:not(:focus):hover {\n    text-decoration: underline;\n  }\n\n  // Add service logo box shadow on focus\n  .nhsuk-header .nhsuk-header__service-logo:focus {\n    @include nhsuk-focused-box;\n  }\n}\n"]}

package/dist/nhsuk/components/pagination/_index.scss

@@ -166,13 +166,9 @@
     text-align: center;
     @include nhsuk-font-size(19);
 
-    &:hover {
+    &:not(:focus):hover {
       background-color: nhsuk-colour("grey-4");
     }
-
-    &:focus {
-      @include nhsuk-link-style-focus;
-    }
   }
 
   // Previous and next links within pagination navigation
@@ -195,7 +191,7 @@
   // Numbered item links
   .nhsuk-pagination--numbered .nhsuk-pagination__link {
     position: static;
-    @include nhsuk-link-style;
+    @include nhsuk-link-style-default;
     @include nhsuk-font-size(19);
 
     // Increase the touch area for the link to the parent element.
@@ -214,6 +210,7 @@
 
   // Current number
   .nhsuk-pagination--numbered .nhsuk-pagination__item--current {
+    outline: 1px solid transparent;
     background-color: nhsuk-colour("blue");
     @include nhsuk-typography-weight-bold;
 
@@ -222,7 +219,7 @@
     }
   }
 
-  .nhsuk-pagination--numbered .nhsuk-pagination__item--current:hover {
+  .nhsuk-pagination--numbered .nhsuk-pagination__item--current:not(:focus):hover {
     background-color: nhsuk-colour("blue");
   }
 
@@ -231,7 +228,7 @@
     @include nhsuk-typography-weight-bold;
 
     // Remove hover state for ellipsis items as they don't contain links
-    &:hover {
+    &:not(:focus):hover {
       background-color: transparent;
     }
   }