nhsuk-frontend 10.5.1 → 10.5.2

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

@@ -10,7 +10,7 @@
  *
  * {@link https://github.com/nhsuk/nhsuk-frontend/releases}
  */
-const version = '10.5.1';
+const version = '10.5.2';
 
 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.1';
+const version = '10.5.2';
 
 export { version };
 //# sourceMappingURL=nhsuk-frontend-version.mjs.map

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

@@ -76,7 +76,7 @@
       fill: nhsuk-colour("green");
 
       @media screen and (forced-colors: active), (-ms-high-contrast: active) {
-        fill: buttontext;
+        fill: ButtonText;
       }
     }
   }
@@ -90,7 +90,7 @@
       fill: $nhsuk-reverse-text-colour;
 
       @media screen and (forced-colors: active), (-ms-high-contrast: active) {
-        fill: buttontext;
+        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;;;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"]}
+{"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

@@ -153,11 +153,18 @@ $button-shadow-size: $nhsuk-button-shadow-size;
 
     // Override high-contrast link colours to match buttons
     @media screen and (forced-colors: active), (-ms-high-contrast: active) {
-      color: buttontext;
+      color: ButtonText;
 
       &,
       &::before {
-        border-color: buttonborder;
+        border-color: ButtonBorder;
+      }
+
+      &:not(:focus):not(:active):hover,
+      &:not(:focus):not(:active):hover::before,
+      &:not(:focus):not(:active):hover::after {
+        border-color: Highlight;
+        color: Highlight;
       }
     }
   }

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    // 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"]}
+{"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      &:not(:focus):not(:active):hover,\n      &:not(:focus):not(:active):hover::before,\n      &:not(:focus):not(:active):hover::after {\n        border-color: Highlight;\n        color: Highlight;\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

@@ -238,7 +238,7 @@ $card-border-hover-colour: $nhsuk-card-border-hover-colour;
       fill: $nhsuk-link-hover-colour;
 
       @media screen and (forced-colors: active), (-ms-high-contrast: active) {
-        fill: linktext;
+        fill: LinkText;
       }
     }
 
@@ -255,7 +255,7 @@ $card-border-hover-colour: $nhsuk-card-border-hover-colour;
       fill: $nhsuk-link-active-colour;
 
       @media screen and (forced-colors: active), (-ms-high-contrast: active) {
-        fill: activetext;
+        fill: ActiveText;
       }
     }
   }
@@ -563,7 +563,7 @@ $card-border-hover-colour: $nhsuk-card-border-hover-colour;
       @include nhsuk-responsive-spacing(5, "right");
 
       @media screen and (forced-colors: active), (-ms-high-contrast: active) {
-        fill: buttontext;
+        fill: ButtonText;
       }
     }
   }

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

@@ -1 +1 @@
-{"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"]}
+{"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/code/_index.scss

@@ -33,7 +33,7 @@
 
   .nhsuk-code__container,
   .nhsuk-code__content {
-    font-family: $nhsuk-code-font;
+    @include nhsuk-font-monospace;
   }
 
   .nhsuk-code__container {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/nhsuk/components/code/_index.scss"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,4BAA4B;AAC5B,8BAA8B;AAC9B,oBAAoB;;AAEpB,GAAG;AACH,iBAAiB;AACjB,EAAE;AACF,yBAAyB;AACzB,GAAG;;AAEH;EACE;IACE,kBAAkB;IAClB,2BAA2B;IAC3B,4CAA4C;IAC5C,gFAAgF;EAClF;;EAEA;IACE,uCAAuC;IACvC,8BAA8B;EAChC;;EAEA;IACE,2CAA2C;IAC3C,wDAAwD;EAC1D;;EAEA;IACE,2CAA2C;EAC7C;;EAEA;;IAEE,6BAA6B;EAC/B;;EAEA;IACE,iCAAiC;IACjC,SAAS;IACT,sCAAsC;IACtC,+CAA+C;;IAE/C;MACE,gBAAgB;IAClB;;IAEA;MACE,+CAA+C;IACjD;;IAEA;MACE,mDAAmD;IACrD;;IAEA;;MAEE,yBAAyB;IAC3B;;IAEA;MACE,uCAAuC;IACzC;EACF;;EAEA;IACE,cAAc;IACd,+BAA+B;IAC/B,gBAAgB;IAChB,4CAA4C;;IAE5C,0BAA0B;IAC1B,0CAA0C;;IAE1C;MACE,qDAAqD;MACrD,kCAAkC;MAClC,6DAA6D;IAC/D;;IAEA;MACE,8CAA8C;IAChD;;IAEA;MACE,iCAAiC;IACnC;;IAEA;MACE,+DAA+D;;MAE/D,uEAAuE;MACvE,iEAAiE;MACjE,mBAAmB;MACnB;;kEAE4D;IAC9D;EACF;;EAEA;IACE,kBAAkB;IAClB,UAAU;IACV,qBAAqB;IACrB,uBAAuB;;IAEvB,WAAW;IACX,iCAAiC;IACjC,wCAAwC;;IAExC,uDAAuD;IACvD;MACE,aAAa;IACf;;IAEA;;MAEE,iDAAiD;IACnD;;IAEA;MACE,sFAAsF;IACxF;EACF;AACF","file":"_index.scss","sourcesContent":["@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n@forward \"../button\";\n\n////\n/// Code component\n///\n/// @group components/code\n////\n\n@include nhsuk-exports(\"nhsuk/components/code\") {\n  .nhsuk-code {\n    position: relative;\n    margin: -$nhsuk-focus-width;\n    border: $nhsuk-focus-width solid transparent;\n    @include nhsuk-responsive-margin(6, \"bottom\", $adjustment: - $nhsuk-focus-width);\n  }\n\n  .nhsuk-code--inline {\n    background-color: nhsuk-colour(\"white\");\n    @include nhsuk-text-break-word;\n  }\n\n  .nhsuk-code--inline.nhsuk-code--reverse {\n    color: nhsuk-tint(nhsuk-colour(\"red\"), 85%);\n    background-color: nhsuk-shade(nhsuk-colour(\"blue\"), 25%);\n  }\n\n  .nhsuk-code--reverse:has(.nhsuk-code__content:focus) {\n    border-color: $nhsuk-card-background-colour;\n  }\n\n  .nhsuk-code__container,\n  .nhsuk-code__content {\n    font-family: $nhsuk-code-font;\n  }\n\n  .nhsuk-code__container {\n    min-height: nhsuk-px-to-rem(64px);\n    margin: 0;\n    border: 1px solid $nhsuk-border-colour;\n    background-color: $nhsuk-card-background-colour;\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n\n    .nhsuk-code--background-body & {\n      background-color: $nhsuk-body-background-colour;\n    }\n\n    .nhsuk-code--background-template & {\n      background-color: $nhsuk-template-background-colour;\n    }\n\n    .nhsuk-code--no-border &,\n    .nhsuk-code--reverse & {\n      border-color: transparent;\n    }\n\n    .nhsuk-code--reverse & {\n      background-color: nhsuk-colour(\"black\");\n    }\n  }\n\n  .nhsuk-code__content {\n    display: block;\n    padding: nhsuk-spacing(3) - 1px;\n    overflow-x: auto;\n    border: $nhsuk-focus-width solid transparent;\n\n    @include nhsuk-text-colour;\n    @include nhsuk-font(19, $line-height: 1.5);\n\n    &:focus {\n      outline: $nhsuk-focus-width solid $nhsuk-focus-colour;\n      outline-offset: $nhsuk-focus-width;\n      box-shadow: 0 0 0 $nhsuk-focus-width $nhsuk-focus-text-colour;\n    }\n\n    .nhsuk-frontend-supported .nhsuk-code--button & {\n      padding-top: nhsuk-px-to-rem(nhsuk-spacing(9));\n    }\n\n    .nhsuk-code--reverse & {\n      color: $nhsuk-reverse-text-colour;\n    }\n\n    .nhsuk-code--reverse &:focus {\n      outline: $nhsuk-focus-width solid $nhsuk-card-background-colour;\n\n      // Add 4px to focus outline to show white gap between reverse background\n      // and focus outline, but add another 1px to compensate for border\n      outline-offset: 1px;\n      box-shadow:\n        0 0 0 (($nhsuk-focus-width * 2) + 1px) $nhsuk-focus-text-colour,\n        0 0 0 (($nhsuk-focus-width * 3) + 1px) $nhsuk-focus-colour;\n    }\n  }\n\n  .nhsuk-code__button {\n    position: absolute;\n    z-index: 1;\n    top: nhsuk-spacing(3);\n    right: nhsuk-spacing(3);\n\n    width: auto;\n    min-width: nhsuk-px-to-rem(125px);\n    margin-bottom: $nhsuk-button-shadow-size;\n\n    // Hide the button by default, JS removes this attribute\n    &[hidden] {\n      display: none;\n    }\n\n    &:active,\n    &:active:focus {\n      top: nhsuk-spacing(3) + $nhsuk-button-shadow-size;\n    }\n\n    &:active::before {\n      top: nhsuk-spacing(3) - ($nhsuk-border-width-form-element + $nhsuk-button-shadow-size);\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/nhsuk/components/code/_index.scss"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,4BAA4B;AAC5B,8BAA8B;AAC9B,oBAAoB;;AAEpB,GAAG;AACH,iBAAiB;AACjB,EAAE;AACF,yBAAyB;AACzB,GAAG;;AAEH;EACE;IACE,kBAAkB;IAClB,2BAA2B;IAC3B,4CAA4C;IAC5C,gFAAgF;EAClF;;EAEA;IACE,uCAAuC;IACvC,8BAA8B;EAChC;;EAEA;IACE,2CAA2C;IAC3C,wDAAwD;EAC1D;;EAEA;IACE,2CAA2C;EAC7C;;EAEA;;IAEE,6BAA6B;EAC/B;;EAEA;IACE,iCAAiC;IACjC,SAAS;IACT,sCAAsC;IACtC,+CAA+C;;IAE/C;MACE,gBAAgB;IAClB;;IAEA;MACE,+CAA+C;IACjD;;IAEA;MACE,mDAAmD;IACrD;;IAEA;;MAEE,yBAAyB;IAC3B;;IAEA;MACE,uCAAuC;IACzC;EACF;;EAEA;IACE,cAAc;IACd,+BAA+B;IAC/B,gBAAgB;IAChB,4CAA4C;;IAE5C,0BAA0B;IAC1B,0CAA0C;;IAE1C;MACE,qDAAqD;MACrD,kCAAkC;MAClC,6DAA6D;IAC/D;;IAEA;MACE,8CAA8C;IAChD;;IAEA;MACE,iCAAiC;IACnC;;IAEA;MACE,+DAA+D;;MAE/D,uEAAuE;MACvE,iEAAiE;MACjE,mBAAmB;MACnB;;kEAE4D;IAC9D;EACF;;EAEA;IACE,kBAAkB;IAClB,UAAU;IACV,qBAAqB;IACrB,uBAAuB;;IAEvB,WAAW;IACX,iCAAiC;IACjC,wCAAwC;;IAExC,uDAAuD;IACvD;MACE,aAAa;IACf;;IAEA;;MAEE,iDAAiD;IACnD;;IAEA;MACE,sFAAsF;IACxF;EACF;AACF","file":"_index.scss","sourcesContent":["@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n@forward \"../button\";\n\n////\n/// Code component\n///\n/// @group components/code\n////\n\n@include nhsuk-exports(\"nhsuk/components/code\") {\n  .nhsuk-code {\n    position: relative;\n    margin: -$nhsuk-focus-width;\n    border: $nhsuk-focus-width solid transparent;\n    @include nhsuk-responsive-margin(6, \"bottom\", $adjustment: - $nhsuk-focus-width);\n  }\n\n  .nhsuk-code--inline {\n    background-color: nhsuk-colour(\"white\");\n    @include nhsuk-text-break-word;\n  }\n\n  .nhsuk-code--inline.nhsuk-code--reverse {\n    color: nhsuk-tint(nhsuk-colour(\"red\"), 85%);\n    background-color: nhsuk-shade(nhsuk-colour(\"blue\"), 25%);\n  }\n\n  .nhsuk-code--reverse:has(.nhsuk-code__content:focus) {\n    border-color: $nhsuk-card-background-colour;\n  }\n\n  .nhsuk-code__container,\n  .nhsuk-code__content {\n    @include nhsuk-font-monospace;\n  }\n\n  .nhsuk-code__container {\n    min-height: nhsuk-px-to-rem(64px);\n    margin: 0;\n    border: 1px solid $nhsuk-border-colour;\n    background-color: $nhsuk-card-background-colour;\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n\n    .nhsuk-code--background-body & {\n      background-color: $nhsuk-body-background-colour;\n    }\n\n    .nhsuk-code--background-template & {\n      background-color: $nhsuk-template-background-colour;\n    }\n\n    .nhsuk-code--no-border &,\n    .nhsuk-code--reverse & {\n      border-color: transparent;\n    }\n\n    .nhsuk-code--reverse & {\n      background-color: nhsuk-colour(\"black\");\n    }\n  }\n\n  .nhsuk-code__content {\n    display: block;\n    padding: nhsuk-spacing(3) - 1px;\n    overflow-x: auto;\n    border: $nhsuk-focus-width solid transparent;\n\n    @include nhsuk-text-colour;\n    @include nhsuk-font(19, $line-height: 1.5);\n\n    &:focus {\n      outline: $nhsuk-focus-width solid $nhsuk-focus-colour;\n      outline-offset: $nhsuk-focus-width;\n      box-shadow: 0 0 0 $nhsuk-focus-width $nhsuk-focus-text-colour;\n    }\n\n    .nhsuk-frontend-supported .nhsuk-code--button & {\n      padding-top: nhsuk-px-to-rem(nhsuk-spacing(9));\n    }\n\n    .nhsuk-code--reverse & {\n      color: $nhsuk-reverse-text-colour;\n    }\n\n    .nhsuk-code--reverse &:focus {\n      outline: $nhsuk-focus-width solid $nhsuk-card-background-colour;\n\n      // Add 4px to focus outline to show white gap between reverse background\n      // and focus outline, but add another 1px to compensate for border\n      outline-offset: 1px;\n      box-shadow:\n        0 0 0 (($nhsuk-focus-width * 2) + 1px) $nhsuk-focus-text-colour,\n        0 0 0 (($nhsuk-focus-width * 3) + 1px) $nhsuk-focus-colour;\n    }\n  }\n\n  .nhsuk-code__button {\n    position: absolute;\n    z-index: 1;\n    top: nhsuk-spacing(3);\n    right: nhsuk-spacing(3);\n\n    width: auto;\n    min-width: nhsuk-px-to-rem(125px);\n    margin-bottom: $nhsuk-button-shadow-size;\n\n    // Hide the button by default, JS removes this attribute\n    &[hidden] {\n      display: none;\n    }\n\n    &:active,\n    &:active:focus {\n      top: nhsuk-spacing(3) + $nhsuk-button-shadow-size;\n    }\n\n    &:active::before {\n      top: nhsuk-spacing(3) - ($nhsuk-border-width-form-element + $nhsuk-button-shadow-size);\n    }\n  }\n}\n"]}

package/dist/nhsuk/components/contents-list/_index.scss

@@ -32,6 +32,6 @@
   }
 
   .nhsuk-contents-list__current {
-    font-weight: $nhsuk-font-weight-bold;
+    @include nhsuk-font-weight-bold;
   }
 }

package/dist/nhsuk/components/contents-list/_index.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/nhsuk/components/contents-list/_index.scss"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,4BAA4B;AAC5B,8BAA8B;;AAE9B,GAAG;AACH,0BAA0B;AAC1B,EAAE;AACF,kCAAkC;AAClC,GAAG;;AAEH;EACE;IACE,SAAS;IACT,UAAU;IACV,gBAAgB;IAChB,6CAA6C;EAC/C;;EAEA,uDAAuD;EACvD,8DAA8D;EAC9D;IACE,gBAAgB;IAChB,0CAA0C;EAC5C;;EAEA;IACE,yBAAyB;EAC3B;;EAEA;IACE,qBAAqB;EACvB;;EAEA;IACE,oCAAoC;EACtC;AACF","file":"_index.scss","sourcesContent":["@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n\n////\n/// Contents list component\n///\n/// @group components/contents-list\n////\n\n@include nhsuk-exports(\"nhsuk/components/contents-list\") {\n  .nhsuk-contents-list__list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    @include nhsuk-responsive-margin(6, \"bottom\");\n  }\n\n  // Nested lists need to remove the margin at the bottom,\n  // and add the same margin at the top as is between list items.\n  .nhsuk-contents-list__list .nhsuk-contents-list__list {\n    margin-bottom: 0;\n    @include nhsuk-responsive-margin(2, \"top\");\n  }\n\n  .nhsuk-contents-list__item {\n    @include nhsuk-shape-dash;\n  }\n\n  .nhsuk-contents-list__link {\n    display: inline-block;\n  }\n\n  .nhsuk-contents-list__current {\n    font-weight: $nhsuk-font-weight-bold;\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/nhsuk/components/contents-list/_index.scss"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,4BAA4B;AAC5B,8BAA8B;;AAE9B,GAAG;AACH,0BAA0B;AAC1B,EAAE;AACF,kCAAkC;AAClC,GAAG;;AAEH;EACE;IACE,SAAS;IACT,UAAU;IACV,gBAAgB;IAChB,6CAA6C;EAC/C;;EAEA,uDAAuD;EACvD,8DAA8D;EAC9D;IACE,gBAAgB;IAChB,0CAA0C;EAC5C;;EAEA;IACE,yBAAyB;EAC3B;;EAEA;IACE,qBAAqB;EACvB;;EAEA;IACE,+BAA+B;EACjC;AACF","file":"_index.scss","sourcesContent":["@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n\n////\n/// Contents list component\n///\n/// @group components/contents-list\n////\n\n@include nhsuk-exports(\"nhsuk/components/contents-list\") {\n  .nhsuk-contents-list__list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    @include nhsuk-responsive-margin(6, \"bottom\");\n  }\n\n  // Nested lists need to remove the margin at the bottom,\n  // and add the same margin at the top as is between list items.\n  .nhsuk-contents-list__list .nhsuk-contents-list__list {\n    margin-bottom: 0;\n    @include nhsuk-responsive-margin(2, \"top\");\n  }\n\n  .nhsuk-contents-list__item {\n    @include nhsuk-shape-dash;\n  }\n\n  .nhsuk-contents-list__link {\n    display: inline-block;\n  }\n\n  .nhsuk-contents-list__current {\n    @include nhsuk-font-weight-bold;\n  }\n}\n"]}

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

@@ -67,7 +67,7 @@ $expander-icon-size: $nhsuk-expander-icon-size;
 
     .nhsuk-details__summary-text {
       display: block;
-      font-weight: $nhsuk-font-weight-bold;
+      @include nhsuk-font-weight-bold;
       @include nhsuk-responsive-margin(4, "bottom");
     }
   }
@@ -86,15 +86,11 @@ $expander-icon-size: $nhsuk-expander-icon-size;
       width: -webkit-fit-content;
       width: fit-content; // [1]
       padding-left: nhsuk-px-to-rem(nhsuk-spacing(4));
+      text-decoration: none;
       cursor: pointer;
-      @include nhsuk-link-style-default;
 
-      &:hover,
-      &:focus {
-        .nhsuk-details__summary-text {
-          text-decoration: none;
-        }
-      }
+      @include nhsuk-link-style-focus;
+      @include nhsuk-top-and-bottom;
 
       &::-webkit-details-marker {
         display: none; // [4]
@@ -116,16 +112,58 @@ $expander-icon-size: $nhsuk-expander-icon-size;
       .nhsuk-details[open] > &::before {
         @include nhsuk-shape-arrow($direction: down, $base: 14px);
       }
+    }
 
-      .nhsuk-details--reverse &:not(:focus),
-      .nhsuk-details--reverse &:not(:focus):hover {
-        color: $nhsuk-reverse-text-colour;
-      }
+    // Style the arrow and summary text to look like a link...
+    .nhsuk-details__summary::before,
+    .nhsuk-details__summary-text {
+      color: $nhsuk-link-colour;
     }
 
     // ...but only underline the text, not the arrow
     .nhsuk-details__summary-text {
       text-decoration: underline; // [3]
+      @include nhsuk-responsive-margin(3, "bottom");
+    }
+
+    .nhsuk-details__summary-text:only-child {
+      margin-bottom: 0;
+    }
+
+    .nhsuk-details__summary:hover,
+    .nhsuk-details__summary:focus {
+      & .nhsuk-details__summary-text {
+        text-decoration: none;
+      }
+    }
+
+    .nhsuk-details__summary:hover {
+      &::before,
+      & .nhsuk-details__summary-text {
+        color: $nhsuk-link-hover-colour;
+      }
+    }
+
+    .nhsuk-details__summary:active {
+      &::before,
+      & .nhsuk-details__summary-text {
+        color: $nhsuk-link-active-colour;
+      }
+    }
+
+    .nhsuk-details__summary:focus {
+      &::before,
+      & .nhsuk-details__summary-text {
+        color: $nhsuk-focus-text-colour;
+      }
+    }
+
+    .nhsuk-details--reverse .nhsuk-details__summary:not(:focus),
+    .nhsuk-details--reverse .nhsuk-details__summary:not(:focus):hover {
+      &::before,
+      & .nhsuk-details__summary-text {
+        color: $nhsuk-reverse-text-colour;
+      }
     }
 
     .nhsuk-details__text {
@@ -139,6 +177,32 @@ $expander-icon-size: $nhsuk-expander-icon-size;
         border-left-color: $nhsuk-reverse-border-colour;
       }
     }
+
+    @media screen and (forced-colors: active), (-ms-high-contrast: active) {
+      .nhsuk-details__summary,
+      .nhsuk-details__summary:hover {
+        &::before,
+        & .nhsuk-details__summary-text {
+          color: LinkText;
+        }
+      }
+
+      .nhsuk-details__summary:active {
+        &::before,
+        & .nhsuk-details__summary-text {
+          color: ActiveText;
+        }
+      }
+
+      .nhsuk-details__summary:focus,
+      .nhsuk-details--reverse .nhsuk-details__summary:not(:focus),
+      .nhsuk-details--reverse .nhsuk-details__summary:not(:focus):hover {
+        &::before,
+        & .nhsuk-details__summary-text {
+          color: LinkText;
+        }
+      }
+    }
   }
 
   // Expander variant
@@ -193,8 +257,7 @@ $expander-icon-size: $nhsuk-expander-icon-size;
 
       .nhsuk-details__summary-text {
         display: block;
-        font-weight: $nhsuk-font-weight-bold;
-        @include nhsuk-font-size(26);
+        @include nhsuk-font(26, $weight: bold);
         @include nhsuk-responsive-margin(4, "bottom");
       }
     }
@@ -220,26 +283,18 @@ $expander-icon-size: $nhsuk-expander-icon-size;
       }
 
       .nhsuk-details__summary:focus {
+        outline: none;
         box-shadow: none;
       }
 
       .nhsuk-details__summary-text {
         display: inline-block;
-
         position: relative;
-
         padding: nhsuk-spacing(1);
         padding-left: $nhsuk-expander-icon-size + nhsuk-spacing(2);
-
-        color: $nhsuk-link-colour;
-
         cursor: pointer;
       }
 
-      .nhsuk-details__summary:hover .nhsuk-details__summary-text {
-        color: $nhsuk-link-hover-colour;
-      }
-
       .nhsuk-details__summary:focus .nhsuk-details__summary-text {
         @include nhsuk-focused-text;
       }
@@ -264,7 +319,7 @@ $expander-icon-size: $nhsuk-expander-icon-size;
           "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"
         ); // Plus icon
 
-        background-color: currentcolor;
+        background-color: ButtonText;
       }
 
       &[open] {
@@ -289,8 +344,10 @@ $expander-icon-size: $nhsuk-expander-icon-size;
 
         .nhsuk-details__summary-text::before {
           top: calc(50% - nhsuk-px-to-rem(math.div($nhsuk-expander-icon-size, 2)));
+
           width: nhsuk-px-to-rem($nhsuk-expander-icon-size);
           height: nhsuk-px-to-rem($nhsuk-expander-icon-size);
+
           -webkit-clip-path: shape(
             from 50% 3.7%,
             arc by 0% 92.6% of 46.3% 46.3% large cw,
@@ -318,6 +375,7 @@ $expander-icon-size: $nhsuk-expander-icon-size;
             curve by -5.19% -5.56% with 0% -2.96% / -2.22% -5.19%,
             close
           );
+
                   clip-path: shape(
             from 50% 3.7%,
             arc by 0% 92.6% of 46.3% 46.3% large cw,
@@ -345,6 +403,10 @@ $expander-icon-size: $nhsuk-expander-icon-size;
             curve by -5.19% -5.56% with 0% -2.96% / -2.22% -5.19%,
             close
           ); // Plus icon, scalable
+
+          background-color: currentcolor;
+
+          forced-color-adjust: none;
         }
 
         &[open] .nhsuk-details__summary-text::before {
@@ -374,6 +436,12 @@ $expander-icon-size: $nhsuk-expander-icon-size;
           ); // Minus icon, scalable
         }
       }
+
+      @media screen and (forced-colors: active), (-ms-high-contrast: active) {
+        .nhsuk-details__summary:not(:focus):not(:hover):not(:active) .nhsuk-details__summary-text::before {
+          background-color: ButtonText;
+        }
+      }
     }
   }