`s to be full-width by default.\n/// 2. Allow word breaks anywhere to prevent table fit-to-content.\n/// 3. Allow word breaks when necessary (deprecated but works, unlike overflow-wrap).\n///\n/// @group elements\n////\n\ntable {\n width: 100%; // [1]\n border-spacing: 0;\n vertical-align: top;\n\n @include nhsuk-responsive-margin(7, \"bottom\");\n\n .nhsuk-u-text-break-word {\n word-break: break-all; // [2]\n word-break: break-word; // [3]\n }\n\n @include nhsuk-media-query($media-type: print) {\n page-break-inside: avoid;\n }\n}\n\nthead {\n th {\n border-bottom-width: $nhsuk-border-table-header-width;\n }\n}\n\nth,\ntd {\n padding-left: 0;\n border: solid $nhsuk-border-colour;\n border-width: 0 0 $nhsuk-border-table-cell-width;\n text-align: left;\n vertical-align: top;\n\n @include nhsuk-font-size(19);\n @include nhsuk-responsive-padding(3, \"bottom\");\n @include nhsuk-responsive-padding(4, \"right\");\n @include nhsuk-responsive-padding(3, \"top\");\n\n &:last-child {\n padding-right: 0;\n }\n}\n\nth {\n @include nhsuk-font-weight-bold;\n}\n\ncaption {\n text-align: left;\n @include nhsuk-font($size: 22, $weight: bold);\n}\n","// stylelint-disable declaration-no-important\n\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:meta\";\n@use \"../settings\" as *;\n@use \"sass-mq\" as *;\n\n////\n/// Spacing\n///\n/// @group tools\n////\n\n/// Single point spacing\n///\n/// Returns measurement corresponding to the spacing point requested.\n///\n/// @param {Number} $spacing-point - Point on the spacing scale\n/// (set in `settings/_spacing.scss`)\n///\n/// @returns {String} Spacing measurement eg. 8px\n///\n/// @example scss\n/// .element {\n/// padding: nhsuk-spacing(5);\n/// }\n///\n/// @example scss Using negative spacing\n/// .element {\n/// margin-top: nhsuk-spacing(-1);\n/// }\n///\n/// @example scss Marking spacing declarations as important\n/// .element {\n/// margin-top: nhsuk-spacing(1) !important;\n/// }\n///\n/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)\n\n@function nhsuk-spacing($spacing-point) {\n $actual-input-type: meta.type-of($spacing-point);\n @if $actual-input-type != \"number\" {\n @error \"Expected a number (integer), but got a \"\n + \"#{$actual-input-type}.\";\n }\n\n $is-negative: false;\n @if $spacing-point < 0 {\n $is-negative: true;\n $spacing-point: math.abs($spacing-point);\n }\n\n @if not map.has-key($nhsuk-spacing-points, $spacing-point) {\n @error \"Unknown spacing variable `#{$spacing-point}`. Make sure you are using a point from the spacing scale in `_settings/spacing.scss`.\";\n }\n\n $value: map.get($nhsuk-spacing-points, $spacing-point);\n\n @if $is-negative {\n @return $value * -1;\n }\n\n @return $value;\n}\n\n/// Responsive spacing\n///\n/// Adds responsive spacing (either padding or margin, depending on `$property`)\n/// by fetching a 'spacing map' from the responsive spacing scale, which defines\n/// different spacing values at different breakpoints.\n///\n/// To generate responsive spacing, use 'nhsuk-responsive-margin' or\n/// 'nhsuk-responsive-padding' mixins\n///\n/// @param {Number} $responsive-spacing-point - Point on the responsive spacing\n/// scale, corresponds to a map of breakpoints and spacing values\n/// @param {String} $property - Property to add spacing to (e.g. 'margin')\n/// @param {String} $direction [all] - Direction to add spacing to\n/// (`top`, `right`, `bottom`, `left`, `all`)\n/// @param {Boolean} $important [false] - Whether to mark as `!important`\n/// @param {Number} $adjustment [false] - Offset to adjust spacing by\n///\n/// @example scss\n/// .foo {\n/// padding: nhsuk-spacing(5);\n/// top: nhsuk-spacing(2) !important; // if `!important` is required\n/// }\n///\n/// 1. Make sure that the return value from `_settings/spacing.scss` is a map.\n/// 2. Loop through each breakpoint in the map\n/// 3. The 'null' breakpoint is for mobile.\n///\n/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)\n\n@mixin nhsuk-responsive-spacing(\n $responsive-spacing-point,\n $property,\n $direction: \"all\",\n $important: false,\n $adjustment: false\n) {\n $actual-input-type: meta.type-of($responsive-spacing-point);\n @if $actual-input-type != \"number\" {\n @error \"Expected a number (integer), but got a \" + \"#{$actual-input-type}.\";\n }\n\n @if not map.has-key($nhsuk-spacing-responsive-scale, $responsive-spacing-point) {\n @error \"Unknown spacing point `#{$responsive-spacing-point}`. Make sure you are using a point from the \"\n + \"responsive spacing scale in `_settings/spacing.scss`.\";\n }\n\n $scale-map: map.get($nhsuk-spacing-responsive-scale, $responsive-spacing-point); // [1]\n $actual-map-type: meta.type-of($scale-map);\n @if $actual-map-type != \"map\" {\n @error \"Expected a number (integer), but got a \"\n + \"#{$actual-map-type}. Make sure you are using a map to set the responsive spacing in `_settings/spacing.scss`)\";\n }\n\n // [2]\n @each $breakpoint, $breakpoint-value in $scale-map {\n @if $adjustment {\n @if not math.compatible($breakpoint-value, $adjustment) {\n $breakpoint-value: calc($breakpoint-value + $adjustment);\n } @else {\n $breakpoint-value: $breakpoint-value + $adjustment;\n }\n }\n\n @if $important == true {\n $breakpoint-value: $breakpoint-value !important;\n }\n\n & {\n // [3]\n @if not $breakpoint {\n @if $direction == all {\n #{$property}: $breakpoint-value;\n } @else {\n #{$property}-#{$direction}: $breakpoint-value;\n }\n } @else {\n @include nhsuk-media-query($from: $breakpoint) {\n @if $direction == all {\n #{$property}: $breakpoint-value;\n } @else {\n #{$property}-#{$direction}: $breakpoint-value;\n }\n }\n }\n }\n }\n}\n\n/// Responsive margin\n///\n/// Adds responsive margin by fetching a 'spacing map' from the responsive\n/// spacing scale, which defines different spacing values at different\n/// breakpoints. Wrapper for the `nhsuk-responsive-spacing` mixin.\n///\n/// @param {Number} $responsive-spacing-point - Point on the responsive spacing\n/// scale, corresponds to a map of breakpoints and spacing values\n/// @param {String} $direction [all] - Direction to add spacing to\n/// (`top`, `right`, `bottom`, `left`, `all`)\n/// @param {Boolean} $important [false] - Whether to mark as `!important`\n/// @param {Number} $adjustment [false] - Offset to adjust spacing by\n///\n/// @example scss\n/// .foo {\n/// @include nhsuk-responsive-margin(6, 'left', $adjustment: 1px);\n/// }\n///\n/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)\n\n@mixin nhsuk-responsive-margin($responsive-spacing-point, $direction: \"all\", $important: false, $adjustment: false) {\n @include nhsuk-responsive-spacing($responsive-spacing-point, \"margin\", $direction, $important, $adjustment);\n}\n\n/// Responsive padding\n///\n/// Adds responsive padding by fetching a 'spacing map' from the responsive\n/// spacing scale, which defines different spacing values at different\n/// breakpoints. Wrapper for the `nhsuk-responsive-spacing` mixin.\n///\n/// @param {Number} $responsive-spacing-point - Point on the responsive spacing\n/// scale, corresponds to a map of breakpoints and spacing values\n/// @param {String} $direction [all] - Direction to add spacing to\n/// (`top`, `right`, `bottom`, `left`, `all`)\n/// @param {Boolean} $important [false] - Whether to mark as `!important`\n/// @param {Number} $adjustment [false] - Offset to adjust spacing\n///\n/// @example scss\n/// .foo {\n/// @include nhsuk-responsive-padding(6, 'left', $adjustment: 1px);\n/// }\n///\n/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)\n\n@mixin nhsuk-responsive-padding($responsive-spacing-point, $direction: \"all\", $important: false, $adjustment: false) {\n @include nhsuk-responsive-spacing($responsive-spacing-point, \"padding\", $direction, $important, $adjustment);\n}\n","@use \"sass:math\";\n@use \"../settings\" as *;\n@use \"../tools\" as *;\n\n@include nhsuk-exports(\"nhsuk/core/objects/button-group\") {\n // Button groups can be used to group buttons and links together as a group.\n //\n // Within a button group:\n //\n // - links are styled to line up visually with the buttons, including being\n // centre-aligned on mobile\n // - spacing between the buttons and links is handled automatically, including\n // when they wrap across multiple lines\n .nhsuk-button-group {\n $horizontal-gap: nhsuk-spacing(4);\n $horizontal-gap-small: nhsuk-spacing(3);\n $vertical-gap: nhsuk-spacing(3);\n\n // These need to be kept in sync with the button component's styles\n $button-padding-top-bottom-mobile: nhsuk-px-to-rem(10px);\n $button-padding-top-bottom-desktop: nhsuk-px-to-rem(14px);\n $button-padding-top-bottom-small: nhsuk-px-to-rem(6px);\n\n // Flexbox is used to center-align links on mobile, align everything along\n // the baseline on tablet and above, and to removes extra whitespace that\n // we'd get between the buttons and links because they're inline-blocks.\n //\n // Ideally we'd use `gap` with flexbox rather than having to do it all with\n // margins, but unfortunately the support isn't there (yet) and @supports\n // doesn't play nicely with it\n // (https://github.com/w3c/csswg-drafts/issues/3559)\n display: flex;\n flex-direction: column;\n align-items: center;\n\n @include nhsuk-responsive-margin(5, \"bottom\", $adjustment: $vertical-gap * -1);\n\n // Give paragraphs and links within the button group the same font-size and\n // line-height as buttons.\n //\n // Because we want the focus state to be tight around the link text, we use\n // margins where the buttons would use padding.\n .nhsuk-body,\n .nhsuk-body-m,\n p,\n > .nhsuk-link,\n > a:not(.nhsuk-button) {\n display: inline-block;\n // Prevent links overflowing their container in IE10/11 because of bug\n // with align-items: center\n max-width: 100%;\n margin-top: $button-padding-top-bottom-mobile;\n margin-bottom: calc($button-padding-top-bottom-mobile + $nhsuk-button-shadow-size + $vertical-gap);\n text-align: center;\n @include nhsuk-font(19, $line-height: 19px);\n }\n\n &--small .nhsuk-body,\n &--small .nhsuk-body-m,\n &--small p,\n &--small > .nhsuk-link,\n &--small > a:not(.nhsuk-button) {\n margin-top: $button-padding-top-bottom-small;\n margin-bottom: calc($button-padding-top-bottom-small + $nhsuk-button-shadow-size + $vertical-gap);\n }\n\n // Reduce the bottom margin to the size of the vertical gap (accommodating\n // the button shadow) – the 'lost' margin is moved to the button-group.\n > .nhsuk-button {\n margin-bottom: $nhsuk-button-shadow-size + $vertical-gap;\n }\n\n // Deduct vertical gap from margin when nested in form groups\n .nhsuk-form-group &:last-child {\n margin-bottom: nhsuk-spacing(-3);\n }\n\n // On tablet and above, we also introduce a 'column gap' between the\n // buttons and links in each row and left align links\n @include nhsuk-media-query($from: tablet) {\n flex-direction: row;\n flex-wrap: wrap;\n align-items: baseline;\n\n // Cancel out the column gap for the last item in each row\n margin-right: ($horizontal-gap * -1);\n\n &--small {\n margin-right: ($horizontal-gap-small * -1);\n }\n\n .nhsuk-body,\n .nhsuk-body-m,\n p,\n > .nhsuk-link,\n > a:not(.nhsuk-button) {\n margin: $button-padding-top-bottom-desktop 0;\n margin-right: $horizontal-gap;\n line-height: nhsuk-line-height(24px, $font-size: 19px);\n text-align: left;\n }\n\n &--small .nhsuk-body,\n &--small .nhsuk-body-m,\n &--small p,\n &--small > .nhsuk-link,\n &--small > a:not(.nhsuk-button) {\n margin: $button-padding-top-bottom-small 0;\n margin-right: $horizontal-gap-small;\n @include nhsuk-font(16, $line-height: 19px);\n }\n\n > .nhsuk-button {\n margin-right: $horizontal-gap;\n }\n\n > .nhsuk-button--small {\n margin-right: $horizontal-gap-small;\n }\n }\n }\n}\n","@use \"../settings\" as *;\n@use \"../tools\" as *;\n\n@include nhsuk-exports(\"nhsuk/core/objects/form-group\") {\n .nhsuk-form-group {\n box-sizing: border-box;\n\n @include nhsuk-clearfix;\n @include nhsuk-responsive-margin(5, \"bottom\");\n\n .nhsuk-form-group:last-child,\n .nhsuk-form-group:last-of-type {\n margin-bottom: 0; // Remove margin from last item in nested groups\n }\n }\n\n .nhsuk-form-group--error {\n padding-left: nhsuk-spacing(3);\n border-left: $nhsuk-border-width-form-group-error solid $nhsuk-error-colour;\n\n .nhsuk-form-group {\n padding: 0;\n // Reset error styles in nested form groups that might have error class\n border: 0;\n }\n }\n\n .nhsuk-form-group--inline {\n @include nhsuk-media-query($from: tablet) {\n display: flex;\n flex-direction: row;\n\n // Align the bottom of inputs\n align-items: flex-end;\n\n .nhsuk-form-group {\n margin-bottom: 0; // Remove margin when nested groups are inline\n }\n\n .nhsuk-form-group + .nhsuk-form-group {\n margin-left: nhsuk-spacing(3);\n }\n }\n }\n}\n","// stylelint-disable declaration-no-important\n\n@use \"../settings\" as *;\n@use \"../helpers\" as *;\n@use \"sass-mq\" as *;\n@use \"spacing\" as *;\n@use \"typography\" as *;\n\n////\n/// Mixins\n///\n/// @group tools\n////\n\n/// Clearfix mixin\n///\n/// @example scss\n/// @include nhsuk-clearfix;\n///\n\n@mixin nhsuk-clearfix {\n &::after {\n content: \"\";\n display: block;\n clear: both;\n }\n}\n\n/// Clearfix mixin (deprecated)\n///\n/// @alias nhsuk-clearfix\n/// @deprecated To be removed in v11.0, replaced by nhsuk-clearfix\n\n@mixin clearfix() {\n @include nhsuk-warning(\"clearfix\", \"clearfix is deprecated. Use nhsuk-clearfix instead.\");\n @include nhsuk-clearfix;\n}\n\n/// Reading width mixin, add a maximum width\n/// to large pieces of content\n///\n/// @example scss\n/// @include nhsuk-reading-width;\n///\n\n@mixin nhsuk-reading-width {\n max-width: 44em;\n}\n\n/// Reading width mixin, add a maximum width\n/// to large pieces of content (deprecated)\n///\n/// @alias nhsuk-reading-width\n/// @deprecated To be removed in v11.0, replaced by nhsuk-reading-width\n\n@mixin reading-width() {\n @include nhsuk-warning(\"reading-width\", \"reading-width is deprecated. Use nhsuk-reading-width instead.\");\n @include nhsuk-reading-width;\n}\n\n/// Helper function containing the common code for the following two mixins\n///\n/// @link https://snook.ca/archives/html_and_css/hiding-content-for-accessibility\n/// - Hiding Content for Accessibility, Jonathan Snook, February 2011\n/// @link https://github.com/h5bp/html5-boilerplate/blob/9f13695d21ff92c55c78dfa9f16bb02a1b6e911f/src/css/main.css#L121-L158\n/// - h5bp/html5-boilerplate - Thanks!\n///\n/// @param {Boolean} $important [true] - Whether to mark as `!important`\n///\n/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)\n///\n/// @access private\n\n@mixin _nhsuk-visually-hide-content($important: true) {\n $properties: (\n \"position\": absolute,\n\n \"width\": 1px,\n \"height\": 1px,\n\n // If margin is set to a negative value it can cause text to be announced in\n // the wrong order in VoiceOver for OSX\n \"margin\": 0,\n \"padding\": 0,\n\n \"overflow\": hidden,\n\n // `clip` is needed for IE11 support\n \"clip\": rect(0 0 0 0),\n \"clip-path\": inset(50%),\n \"border\": 0,\n\n // For long content, line feeds are not interpreted as spaces and small width\n // causes content to wrap 1 word per line:\n // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe\n \"white-space\": nowrap\n );\n\n // Workaround to avoid deprecated `if()` function\n @each $property, $value in $properties {\n @if $important == true {\n #{$property}: $value !important;\n } @else {\n #{$property}: $value;\n }\n }\n\n // Prevent users from selecting or copying visually-hidden text. This prevents\n // a user unintentionally copying more text than they intended and needing to\n // manually trim it down again.\n user-select: none;\n}\n\n/// Hide an element visually, but have it available for screen readers\n///\n/// @param {Boolean} $important [true] - Whether to mark as `!important`\n///\n/// @example scss\n/// @include nhsuk-visually-hidden;\n///\n\n@mixin nhsuk-visually-hidden($important: true) {\n @include _nhsuk-visually-hide-content($important: $important);\n\n // Absolute positioning has the unintended consequence of removing any\n // whitespace surrounding visually hidden text from the accessibility tree.\n // Insert a space character before and after visually hidden text to separate\n // it from any visible text surrounding it.\n &::before {\n content: \"\\00a0\";\n }\n\n &::after {\n content: \"\\00a0\";\n }\n}\n\n/// Hide an element visually, but have it available for screen readers\n/// (deprecated)\n///\n/// @alias nhsuk-visually-hidden\n/// @deprecated To be removed in v11.0, replaced by nhsuk-visually-hidden\n\n@mixin visually-hidden() {\n @include nhsuk-visually-hidden;\n}\n\n/// Hide an element visually, but have it available for screen readers whilst\n/// allowing the element to be focused when navigated to via the keyboard (e.g.\n/// for the skip link)\n///\n/// @param {Boolean} $important [true] - Whether to mark as `!important`\n///\n/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)\n\n@mixin nhsuk-visually-hidden-focusable($important: true) {\n // IE 11 doesn't support the combined `:not(:active, :focus)` syntax.\n // Also allows for ':focus' companion classes from postcss-pseudo-classes\n // which the plugin unfortunately doesn't handle automatically.\n // stylelint-disable-next-line selector-class-pattern\n &:not(:active):not(:focus):not(.\\:focus) {\n @include _nhsuk-visually-hide-content($important: $important);\n }\n}\n\n/// Hide an element visually, but have it available for screen readers whilst\n/// allowing the element to be focused when navigated to via the keyboard (e.g.\n/// for the skip link) (deprecated)\n///\n/// @alias nhsuk-visually-hidden-focusable\n/// @deprecated To be removed in v11.0, replaced by nhsuk-visually-hidden-focusable\n\n@mixin visually-hidden-focusable($args...) {\n @include nhsuk-warning(\n \"visually-hidden-focusable\",\n \"visually-hidden-focusable is deprecated. Use nhsuk-visually-hidden-focusable instead.\"\n );\n @include nhsuk-visually-hidden-focusable($args...);\n}\n\n/// Show an element visually that has previously been hidden by visually-hidden\n///\n/// For differences between mobile and desktop views, use $display to set the CSS display property\n///\n/// @param {String} $display [null] - CSS display property (optional)\n/// @param {Boolean} $important [true] - Whether to mark as `!important`\n///\n/// @deprecated To be removed in v11.0, use @media queries to apply `visually-hidden` instead\n\n@mixin visually-shown($display: null, $important: true) {\n @include nhsuk-warning(\n \"visually-shown\",\n \"visually-shown is deprecated. Use @media queries to apply `visually-hidden` instead.\"\n );\n\n $properties: (\n \"position\": static,\n\n \"width\": auto,\n \"height\": auto,\n \"margin\": 0,\n \"padding\": 0,\n\n \"overflow\": visible,\n\n \"clip\": auto,\n \"clip-path\": none,\n\n \"border\": none,\n\n \"white-space\": normal,\n \"user-select\": auto\n );\n\n // Workaround to avoid deprecated `if()` function\n @each $property, $value in $properties {\n @if $important == true {\n #{$property}: $value !important;\n } @else {\n #{$property}: $value;\n }\n }\n\n @if $display {\n display: $display;\n }\n}\n\n/// Top and bottom margin mixin, remove\n/// the top and bottom margin spacing\n///\n/// @example scss\n/// @include nhsuk-top-and-bottom;\n///\n\n@mixin nhsuk-top-and-bottom {\n & > *:first-child {\n margin-top: 0;\n }\n\n & > *:last-child {\n margin-bottom: 0;\n }\n}\n\n/// Top and bottom margin mixin, remove\n/// the top and bottom margin spacing (deprecated)\n///\n/// @alias nhsuk-top-and-bottom\n/// @deprecated To be removed in v11.0, replaced by nhsuk-top-and-bottom\n\n@mixin top-and-bottom() {\n @include nhsuk-warning(\"top-and-bottom\", \"top-and-bottom is deprecated and will be removed in a future release.\");\n @include nhsuk-top-and-bottom;\n}\n\n/// Panel mixin\n///\n/// See components/_panel\n///\n/// @param {Colour} $panel-background-colour - Panel background colour\n/// @param {Colour} $panel-text-colour - Panel text colour\n/// @param {Colour} $panel-border-colour [null] - Optional panel border colour\n///\n/// @example scss\n/// @include nhsuk-panel($nhsuk-brand-colour, $nhsuk-reverse-text-colour, $nhsuk-reverse-border-colour);\n///\n\n@mixin nhsuk-panel($panel-background-colour, $panel-text-colour, $panel-border-colour: null) {\n box-sizing: border-box;\n @if $panel-border-colour {\n border: 1px solid $panel-border-colour;\n }\n color: $panel-text-colour;\n background-color: $panel-background-colour;\n\n @include nhsuk-top-and-bottom;\n @include nhsuk-responsive-margin(7, \"bottom\");\n\n @include nhsuk-media-query($media-type: print) {\n border: 1px solid $nhsuk-print-text-colour;\n page-break-inside: avoid;\n }\n}\n\n/// Panel mixin (deprecated)\n///\n/// @alias nhsuk-panel\n/// @deprecated To be removed in v11.0, replaced by nhsuk-panel\n\n@mixin panel($args...) {\n @include nhsuk-warning(\"panel\", \"panel is deprecated. Use nhsuk-panel instead.\");\n @include nhsuk-panel($args...);\n}\n\n/// Panel with label mixin, inherits panel styling\n/// and removes padding top for the label positioning\n///\n/// @param {Colour} $panel-background-colour - Panel background colour\n/// @param {Colour} $panel-text-colour - Panel text colour\n/// @param {Colour} $panel-border-colour - Panel border colour\n///\n/// @example scss\n/// @include nhsuk-panel-with-label($nhsuk-brand-colour, $nhsuk-reverse-text-colour, $nhsuk-reverse-border-colour);\n///\n\n@mixin nhsuk-panel-with-label($panel-background-colour, $panel-text-colour, $panel-border-colour) {\n padding-top: 0 !important;\n border: 1px solid $panel-border-colour;\n\n @include nhsuk-panel($panel-background-colour, $panel-text-colour, $panel-border-colour);\n @include nhsuk-responsive-margin(7, \"top\");\n @include nhsuk-responsive-padding(5);\n}\n\n/// Panel with label mixin, inherits panel styling\n/// and removes padding top for the label positioning (deprecated)\n///\n/// @alias nhsuk-panel-with-label\n/// @deprecated To be removed in v11.0, replaced by nhsuk-panel-with-label\n\n@mixin panel-with-label($args...) {\n @include nhsuk-warning(\"panel-with-label\", \"panel-with-label is deprecated. Use nhsuk-panel-with-label instead.\");\n @include nhsuk-panel-with-label($args...);\n}\n\n/// Heading label mixin, adds a tab heading to\n/// warning callout, do and don't lists and panel\n///\n/// 1. Background colour to be set on the @include.\n/// 2. Ensures heading appears separate to the body text in high contrast mode.\n/// 3. Text colour to be set on the @include.\n/// 4. Display inline-block so it does not take up the full width.\n/// 5. Negative left margin aligns the heading to the box.\n/// 6. Top positioning set to minus to make heading sit just outside the box.\n///\n/// @param {Colour} $heading-background-colour - Heading background colour\n/// @param {Colour} $heading-text-colour - Heading text colour\n///\n/// @example scss\n/// @include nhsuk-heading-label($nhsuk-brand-colour, $nhsuk-reverse-text-colour);\n///\n\n@mixin nhsuk-heading-label($heading-background-colour, $heading-text-colour) {\n display: inline-block; // [4]\n\n position: relative;\n top: nhsuk-spacing(-3); // [6]\n\n margin: 0;\n margin-bottom: nhsuk-spacing(2);\n margin-left: nhsuk-spacing(-5) - 1px; // [5]\n padding: nhsuk-spacing(2) nhsuk-spacing(5);\n\n outline: 1px solid transparent; // [2]\n outline-offset: -1px;\n\n color: $heading-text-colour; // [3]\n background-color: $heading-background-colour; // [1]\n\n @include nhsuk-font-size(26);\n\n @include nhsuk-media-query($until: tablet) {\n top: nhsuk-spacing(-2); // [6]\n margin-left: nhsuk-spacing(-4) - 1px; // [5]\n padding: nhsuk-spacing(2) nhsuk-spacing(4);\n }\n\n @include nhsuk-print-colour {\n top: 0;\n background: none;\n }\n}\n\n/// Heading label mixin, adds a tab heading to\n/// warning callout, do and don't lists and panel (deprecated)\n///\n/// @alias nhsuk-heading-label\n/// @deprecated To be removed in v11.0, replaced by nhsuk-heading-label\n\n@mixin heading-label($args...) {\n @include nhsuk-warning(\"heading-label\", \"heading-label is deprecated. Use nhsuk-heading-label instead.\");\n @include nhsuk-heading-label($args...);\n}\n\n/// Care card mixin, used for creating\n/// different coloured care cards\n///\n/// @param {Colour} $heading-background-colour - Heading background colour\n/// @param {Colour} $heading-text-colour - Heading text colour\n/// @param {Number} $print-border-size - Print border size\n///\n/// @example scss\n/// @include nhsuk-care-card($nhsuk-brand-colour, $nhsuk-reverse-text-colour, 4px);\n///\n\n@mixin nhsuk-care-card($heading-background-colour, $heading-text-colour, $print-border-size) {\n .nhsuk-card__heading-container,\n .nhsuk-card--care__heading-container {\n color: $heading-text-colour;\n background-color: $heading-background-colour;\n }\n\n @include nhsuk-print-colour {\n border: $print-border-size solid $nhsuk-print-text-colour;\n page-break-inside: avoid;\n }\n}\n\n/// Care card mixin, used for creating\n/// different coloured care cards (deprecated)\n///\n/// @alias nhsuk-care-card\n/// @deprecated To be removed in v11.0, replaced by nhsuk-care-card\n\n@mixin care-card($args...) {\n @include nhsuk-warning(\"care-card\", \"care-card is deprecated. Use nhsuk-care-card instead.\");\n @include nhsuk-care-card($args...);\n}\n\n/// Print colour mixin, sets the text print colour\n/// warning callout, do and don't lists and panels\n///\n/// @param {Colour} $print-colour [$nhsuk-print-text-colour] - Print colour\n///\n/// @example scss\n/// @include nhsuk-print-colour($print-colour: inherit);\n///\n\n@mixin nhsuk-print-colour($print-colour: $nhsuk-print-text-colour) {\n @include nhsuk-media-query($media-type: print) {\n color: $print-colour;\n @content;\n }\n}\n\n/// Print colour mixin, sets the text print colour\n/// warning callout, do and don't lists and panels (deprecated)\n///\n/// @alias nhsuk-print-colour\n/// @deprecated To be removed in v11.0, replaced by nhsuk-print-colour\n\n@mixin nhsuk-print-color($args...) {\n @include nhsuk-warning(\"color-to-colour\", \"nhsuk-print-color is deprecated. Use nhsuk-print-colour instead.\");\n @include nhsuk-print-colour($args...);\n}\n\n/// Print colour mixin, sets the text print colour\n/// warning callout, do and don't lists and panels (deprecated)\n///\n/// @alias nhsuk-print-colour\n/// @deprecated To be removed in v11.0, replaced by nhsuk-print-colour\n\n@mixin print-color($args...) {\n @include nhsuk-warning(\"print-color\", \"print-color is deprecated. Use nhsuk-print-colour instead.\");\n @include nhsuk-print-colour($args...);\n}\n\n/// Print hide mixin, hides the element from print\n///\n/// @param {Boolean} $important [false] - Whether to mark as `!important`\n///\n/// @example scss\n/// @include nhsuk-print-hide;\n///\n\n@mixin nhsuk-print-hide($important: false) {\n @include nhsuk-media-query($media-type: print) {\n @if $important == true {\n display: none !important;\n } @else {\n display: none;\n }\n }\n}\n\n/// Print hide mixin, hides the element from print (deprecated)\n///\n/// @alias nhsuk-print-hide\n/// @deprecated To be removed in v11.0, replaced by nhsuk-print-hide\n\n@mixin print-hide {\n @include nhsuk-warning(\"print-hide\", \"print-hide is deprecated. Use nhsuk-print-hide instead.\");\n @include nhsuk-print-hide;\n}\n\n/// Flex mixin\n///\n/// @example scss\n/// @include nhsuk-flex;\n///\n\n@mixin nhsuk-flex {\n display: flex;\n flex-wrap: wrap;\n}\n\n// Flex mixin (deprecated)\n///\n/// @alias nhsuk-flex\n/// @deprecated To be removed in v11.0, replaced by nhsuk-flex\n\n@mixin flex {\n @include nhsuk-warning(\"flex\", \"flex is deprecated. Use nhsuk-flex instead.\");\n @include nhsuk-flex;\n}\n\n/// Flex item mixin\n///\n/// @example scss\n/// @include nhsuk-flex-item;\n///\n\n@mixin nhsuk-flex-item {\n display: flex;\n\n @include nhsuk-media-query($until: desktop) {\n flex: 0 0 100%;\n }\n}\n\n// Flex item mixin (deprecated)\n///\n/// @alias nhsuk-flex-item\n/// @deprecated To be removed in v11.0, replaced by nhsuk-flex-item\n\n@mixin flex-item {\n @include nhsuk-warning(\"flex-item\", \"flex-item is deprecated. Use nhsuk-flex-item instead.\");\n @include nhsuk-flex-item;\n}\n\n/// Remove margin mobile mixin\n///\n/// Removes left and right margin at tablet breakpoint\n\n@mixin nhsuk-remove-margin-mobile {\n @include nhsuk-media-query($until: tablet) {\n margin-right: -$nhsuk-gutter-half;\n margin-left: -$nhsuk-gutter-half;\n }\n}\n\n/// Remove margin mobile mixin (deprecated)\n///\n/// Removes left and right margin at tablet breakpoint\n///\n/// @alias nhsuk-remove-margin-mobile\n/// @deprecated To be removed in v11.0, replaced by nhsuk-remove-margin-mobile\n\n@mixin remove-margin-mobile() {\n @include nhsuk-warning(\n \"remove-margin-mobile\",\n \"remove-margin-mobile is deprecated. Use nhsuk-remove-margin-mobile instead.\"\n );\n\n @include nhsuk-remove-margin-mobile;\n}\n\n/// NHS logo size helper\n///\n/// Saves duplicating the code for when using the logo as a link.\n/// Used in the header and footer.\n\n@mixin nhsuk-logo-size {\n width: 100px;\n height: 40px;\n}\n\n@mixin nhsuk-logo-size-small {\n width: 80px;\n height: 32px;\n}\n","@use \"sass:map\";\n@use \"../settings\" as *;\n@use \"../tools\" as *;\n\n////\n/// Grid\n///\n/// @group objects/layout\n////\n\n@include nhsuk-exports(\"nhsuk/core/objects/grid\") {\n .nhsuk-grid-row {\n margin-right: -($nhsuk-gutter-half);\n margin-left: -($nhsuk-gutter-half);\n @include nhsuk-clearfix;\n }\n\n @each $width in map.keys($nhsuk-grid-widths) {\n .nhsuk-grid-column-#{$width} {\n @include nhsuk-grid-column($width);\n }\n }\n}\n","@use \"sass:map\";\n@use \"sass:math\";\n@use \"../settings\" as *;\n@use \"mixins\" as *;\n@use \"sass-mq\" as *;\n\n////\n/// Grid\n///\n/// @group tools\n/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)\n////\n\n/// Grid width percentage\n///\n/// @param {String} $key - Name of grid width (e.g. two-thirds)\n/// @return {Number} Percentage width\n/// @throw if `$key` is not a valid grid width\n\n@function nhsuk-grid-width($key) {\n @if map.has-key($nhsuk-grid-widths, $key) {\n @return map.get($nhsuk-grid-widths, $key);\n }\n\n @error \"Unknown grid width `#{$key}`\";\n}\n\n/// Generate grid column styles\n///\n/// Creates a grid column with standard gutter between the columns.\n///\n/// Grid widths are defined in the `$nhsuk-grid-widths` map.\n///\n/// By default the column width changes from 100% to specified width at the\n/// 'desktop' breakpoint, but other breakpoints can be specified using the `$at`\n/// parameter.\n///\n/// @param {String} $width [full] name of a grid width from $nhsuk-grid-widths\n/// @param {String} $float [left] left | right\n/// @param {String} $at [desktop] - mobile | tablet | desktop | any custom breakpoint\n///\n/// @example scss - Default\n/// .nhsuk-grid-column-two-thirds {\n/// @include nhsuk-grid-column(two-thirds)\n/// }\n///\n/// @example scss - Customising the breakpoint where width percentage is applied\n/// .nhsuk-grid-column-one-half-at-tablet {\n/// @include nhsuk-grid-column(one-half, $at: tablet);\n/// }\n///\n/// @example scss - Customising the float direction\n/// .nhsuk-grid-column-one-half-right {\n/// @include nhsuk-grid-column(two-thirds, $float: right);\n/// }\n///\n/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)\n\n@mixin nhsuk-grid-column($width: full, $float: left, $at: desktop) {\n box-sizing: border-box;\n\n @if $at != tablet {\n width: 100%;\n }\n\n padding: 0 $nhsuk-gutter-half;\n\n @include nhsuk-media-query($from: $at) {\n width: nhsuk-grid-width($width);\n float: $float;\n }\n}\n","@use \"../settings\" as *;\n@use \"../tools\" as *;\n\n@include nhsuk-exports(\"nhsuk/core/objects/input-wrapper\") {\n .nhsuk-input-wrapper,\n // Deprecated, to be removed in v11.0\n .nhsuk-input__wrapper {\n display: flex;\n\n .nhsuk-input {\n flex: 0 1 auto;\n }\n\n .nhsuk-input--error,\n .nhsuk-input:focus {\n // Hack to stop error and focus styles being overlapped by the suffix\n z-index: 1;\n }\n\n // Split prefix/suffix onto separate lines on narrow screens\n @include nhsuk-media-query($until: mobile) {\n flex-direction: column;\n\n .nhsuk-input {\n // Set max-width to override potential width override class on the input\n max-width: 100%;\n }\n }\n }\n\n .nhsuk-input-wrapper {\n // Prevent users from selecting wrapper inputs\n // e.g. When double clicking a disabled button\n user-select: none;\n\n .nhsuk-input,\n .nhsuk-select,\n .nhsuk-button {\n margin-top: nhsuk-spacing(2);\n\n // Remove margin when first or not following other inputs\n &:first-child,\n &:only-child {\n margin-top: 0;\n }\n }\n\n // Remove margin from buttons when stacked, but reserve space for button shadow\n .nhsuk-button {\n margin-bottom: $nhsuk-button-shadow-size;\n }\n\n @include nhsuk-media-query($from: mobile) {\n flex-direction: row;\n\n // The default of `stretch` makes small buttons appear taller than the\n // input, due to using box-shadow, which we don't particularly want in\n // this situation\n align-items: flex-start;\n\n .nhsuk-input,\n .nhsuk-select,\n .nhsuk-button {\n margin-top: 0;\n margin-left: nhsuk-spacing(2);\n\n &:first-child,\n &:only-child {\n margin-left: 0;\n }\n }\n\n .nhsuk-button {\n flex-shrink: 0;\n\n // Buttons are normally 100% wide on mobile, but we don't want that here\n width: auto;\n }\n\n // Remove gap with preceding hidden button\n .nhsuk-button[hidden] + * {\n margin-left: 0;\n }\n }\n }\n}\n","@use \"../tools\" as *;\n\n////\n/// Page wrapper for the grid system\n///\n/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)\n///\n///\n/// @example html - Example usage with Breadcrumbs, phase banners, back links\n///
\n/// \n///
\n/// \n///
\n///
\n///\n/// @example html - Example usage without Breadcrumbs, phase banners, back links\n///
\n///
\n/// \n///
\n///
\n///\n/// @group objects/layout\n////\n\n@include nhsuk-exports(\"nhsuk/core/objects/main-wrapper\") {\n .nhsuk-main-wrapper {\n // In IE11 the `main` element can be used, but is not recognized –\n // meaning it's not defined in IE's default style sheet,\n // so it uses CSS initial value, which is inline.\n display: block;\n padding-top: nhsuk-spacing(4);\n padding-bottom: nhsuk-spacing(4);\n @include nhsuk-top-and-bottom;\n\n @include nhsuk-media-query($from: tablet) {\n padding-top: nhsuk-spacing(7);\n padding-bottom: nhsuk-spacing(7);\n }\n }\n\n .nhsuk-main-wrapper--l {\n padding-top: nhsuk-spacing(6);\n padding-bottom: nhsuk-spacing(6);\n\n @include nhsuk-media-query($from: tablet) {\n padding-top: nhsuk-spacing(8);\n padding-bottom: nhsuk-spacing(8);\n }\n }\n\n .nhsuk-main-wrapper--s {\n padding-top: nhsuk-spacing(3);\n padding-bottom: nhsuk-spacing(3);\n\n @include nhsuk-media-query($from: tablet) {\n padding-top: nhsuk-spacing(4);\n padding-bottom: nhsuk-spacing(4);\n }\n }\n}\n","@use \"sass:string\";\n@use \"../settings\" as *;\n@use \"../tools\" as *;\n\n////\n/// @group objects/layout\n////\n\n/// Width container mixin\n///\n/// Used to create page width and custom width container classes.\n///\n/// @param {String} $width [$nhsuk-page-width] - Width in pixels\n///\n/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)\n///\n/// @example scss - Creating a 1200px wide container class\n/// .app-width-container--wide {\n/// @include nhsuk-width-container(1200px);\n/// }\n\n@mixin nhsuk-width-container($width: $nhsuk-page-width) {\n // By default, limit the width of the container to the page width\n max-width: $width;\n\n // On mobile, add half width gutters\n margin-right: $nhsuk-gutter-half;\n margin-left: $nhsuk-gutter-half;\n\n // Respect 'display cutout' safe area (avoids notches and rounded corners)\n @supports (margin: string.unquote(\"max(calc(0px))\")) {\n $gutter-safe-area-right: calc(#{$nhsuk-gutter-half} + env(safe-area-inset-right));\n $gutter-safe-area-left: calc(#{$nhsuk-gutter-half} + env(safe-area-inset-left));\n\n // Use max() to pick largest margin, default or with safe area\n // Escaped due to Sass max() vs. CSS native max()\n margin-right: string.unquote(\"max(#{$nhsuk-gutter-half}, #{$gutter-safe-area-right})\");\n margin-left: string.unquote(\"max(#{$nhsuk-gutter-half}, #{$gutter-safe-area-left})\");\n }\n\n // On desktop, add full width gutters\n @include nhsuk-media-query($from: desktop) {\n margin-right: $nhsuk-gutter;\n margin-left: $nhsuk-gutter;\n\n // Respect 'display cutout' safe area (avoids notches and rounded corners)\n @supports (margin: string.unquote(\"max(calc(0px))\")) {\n $gutter-safe-area-right: calc(#{$nhsuk-gutter-half} + env(safe-area-inset-right));\n $gutter-safe-area-left: calc(#{$nhsuk-gutter-half} + env(safe-area-inset-left));\n\n // Use max() to pick largest margin, default or with safe area\n // Escaped due to Sass max() vs. CSS native max()\n margin-right: string.unquote(\"max(#{$nhsuk-gutter}, #{$gutter-safe-area-right})\");\n margin-left: string.unquote(\"max(#{$nhsuk-gutter}, #{$gutter-safe-area-left})\");\n }\n }\n\n // As soon as the viewport is greater than the width of the page plus the\n // gutters, just centre the content instead of adding gutters.\n @include nhsuk-media-query($and: \"(min-width: #{($width + $nhsuk-gutter * 2)})\") {\n margin-right: auto;\n margin-left: auto;\n\n // Since a safe area may have previously been set above,\n // we need to duplicate this margin that centers the page.\n @supports (margin: string.unquote(\"max(calc(0px))\")) {\n margin-right: auto;\n margin-left: auto;\n }\n }\n}\n\n@mixin nhsuk-width-container-fluid {\n // Full width container, spanning the entire width of the viewport\n max-width: 100%;\n\n // On mobile, add half width gutters\n margin-right: $nhsuk-gutter-half;\n margin-left: $nhsuk-gutter-half;\n\n // On desktop, add full width gutters\n @include nhsuk-media-query($from: desktop) {\n margin-right: $nhsuk-gutter;\n margin-left: $nhsuk-gutter;\n }\n}\n\n@include nhsuk-exports(\"nhsuk/core/objects/width-container\") {\n .nhsuk-width-container {\n @include nhsuk-width-container;\n }\n\n .nhsuk-width-container-fluid {\n @include nhsuk-width-container-fluid;\n }\n}\n","@use \"sass:math\";\n@use \"../settings\" as *;\n@use \"../tools\" as *;\n\n////\n/// Icons\n///\n/// @group styles\n////\n\n// Default icon styles\n\n.nhsuk-icon {\n display: inline-block;\n\n width: nhsuk-px-to-rem($nhsuk-icon-size);\n height: nhsuk-px-to-rem($nhsuk-icon-size);\n\n fill: currentcolor;\n\n vertical-align: middle;\n\n // Work around SVGs not inheriting color from parent in forced color mode\n // (https://github.com/w3c/csswg-drafts/issues/6310)\n forced-color-adjust: auto;\n\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}\n\n/// Icon size adjustments\n///\n/// @access private\n\n$_icon-sizes: (25%, 50%, 75%, 100%);\n\n@each $size in $_icon-sizes {\n $ratio: math.div(100% + $size, 100%); // 25% adjustment = 1.25\n $name: \"size-#{math.div($size, 1%)}\"; // 25% adjustment = \"size-25\"\n\n .nhsuk-icon--#{$name} {\n width: nhsuk-px-to-rem($nhsuk-icon-size * $ratio);\n height: nhsuk-px-to-rem($nhsuk-icon-size * $ratio);\n\n @include nhsuk-media-query($from: tablet) {\n width: nhsuk-px-to-rem($nhsuk-icon-size-large * $ratio);\n height: nhsuk-px-to-rem($nhsuk-icon-size-large * $ratio);\n }\n }\n}\n","@use \"../settings\" as *;\n@use \"../tools\" as *;\n\n////\n/// Lists\n///\n/// The % (silent class) allows code to be extended (@extend) to other elements\n/// without bloating the code.\n///\n/// 1. 'Random number' used to align ul and ol left with content.\n/// 2. 'Random number' used to give sufficient spacing between text and icon.\n/// 3. Align icon and text.\n///\n/// @group styles\n///\n/// @example scss\n/// .foo {\n/// @extend %nhsuk-list--bullet;\n/// }\n////\n\n%nhsuk-list {\n margin-top: 0;\n padding-left: 0;\n list-style-type: none;\n\n @include nhsuk-font-size(19);\n @include nhsuk-responsive-margin(4, \"bottom\");\n\n // Add a top margin and remove bottom margin for nested lists\n %nhsuk-list {\n margin-bottom: 0;\n @include nhsuk-responsive-margin(2, \"top\");\n }\n}\n\n%nhsuk-list > li {\n @include nhsuk-responsive-margin(2, \"bottom\");\n\n &:last-child {\n margin-bottom: 0;\n }\n}\n\n%nhsuk-list--bullet {\n padding-left: nhsuk-px-to-rem(20px); // [1]\n list-style-type: disc;\n}\n\n.nhsuk-list--bullet {\n @extend %nhsuk-list--bullet;\n}\n\n%nhsuk-list--number {\n padding-left: nhsuk-px-to-rem(20px); // [1]\n list-style-type: decimal;\n}\n\n%nhsuk-list + h2,\n%nhsuk-list + .nhsuk-heading-l {\n @include nhsuk-responsive-padding(4, \"top\");\n}\n\n%nhsuk-list + h3,\n%nhsuk-list + h4,\n%nhsuk-list + .nhsuk-heading-m,\n%nhsuk-list + .nhsuk-heading-s {\n padding-top: nhsuk-spacing(1);\n\n @include nhsuk-media-query($from: tablet) {\n padding-top: nhsuk-spacing(2);\n }\n}\n\n@include nhsuk-media-query($media-type: print) {\n %nhsuk-list + h2,\n %nhsuk-list + h3,\n %nhsuk-list + h4,\n %nhsuk-list + .nhsuk-heading-l,\n %nhsuk-list + .nhsuk-heading-m,\n %nhsuk-list + .nhsuk-heading-s {\n padding-top: 0.45em;\n }\n}\n\n.nhsuk-list--number {\n @extend %nhsuk-list--number;\n}\n\n.nhsuk-list {\n @extend %nhsuk-list;\n}\n\nul {\n @extend %nhsuk-list;\n @extend %nhsuk-list--bullet;\n}\n\nol {\n @extend %nhsuk-list;\n @extend %nhsuk-list--number;\n}\n\n.nhsuk-list--tick,\n.nhsuk-list--cross {\n position: relative;\n margin-top: 0;\n padding-left: nhsuk-px-to-rem($nhsuk-icon-size-large + nhsuk-spacing(1)); // [3]\n list-style: none;\n\n .nhsuk-icon {\n position: absolute;\n left: nhsuk-px-to-rem(-4px); // [3]\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(-4px); // [3]\n }\n}\n","@use \"../settings\" as *;\n@use \"../tools\" as *;\n\n////\n/// Section break\n///\n/// The % (silent class) allows code to be extended (@extend) to other elements\n/// without bloating the code.\n///\n/// 1. Extended the section-break--l code for usage of a semantic with\n/// no class name.\n///\n/// @group styles\n/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)\n///\n/// @example scss\n/// .foo {\n/// @extend %nhsuk-section-break--xl;\n/// }\n////\n\n%nhsuk-section-break {\n margin: 0;\n border: 0;\n}\n\n.nhsuk-section-break {\n @extend %nhsuk-section-break;\n}\n\n%nhsuk-section-break--xl {\n @include nhsuk-responsive-margin(8, \"top\");\n @include nhsuk-responsive-margin(8, \"bottom\");\n}\n\n.nhsuk-section-break--xl {\n @extend %nhsuk-section-break--xl;\n}\n\n%nhsuk-section-break--l {\n @include nhsuk-responsive-margin(6, \"top\");\n @include nhsuk-responsive-margin(6, \"bottom\");\n}\n\n.nhsuk-section-break--l {\n @extend %nhsuk-section-break--l;\n}\n\n%nhsuk-section-break--m {\n @include nhsuk-responsive-margin(4, \"top\");\n @include nhsuk-responsive-margin(4, \"bottom\");\n}\n\n.nhsuk-section-break--m {\n @extend %nhsuk-section-break--m;\n}\n\n%nhsuk-section-break--visible {\n border-bottom: 1px solid $nhsuk-border-colour;\n}\n\n.nhsuk-section-break--visible {\n @extend %nhsuk-section-break--visible;\n}\n\nhr {\n // [1]\n @extend %nhsuk-section-break;\n @extend %nhsuk-section-break--l;\n @extend %nhsuk-section-break--visible;\n}\n","@use \"../settings\" as *;\n@use \"../tools\" as *;\n@use \"../helpers\" as *;\n\n////\n/// Typography\n///\n/// @group styles\n////\n\n// Headings\n//\n// The % (silent class) allows code to be extended (@extend) to other elements\n// without bloating the code.\n\n%nhsuk-heading-xl {\n display: block;\n margin-top: 0;\n\n @include nhsuk-font(48, $weight: bold);\n @include nhsuk-responsive-margin(7, \"bottom\");\n}\n\nh1,\n.nhsuk-heading-xl {\n @extend %nhsuk-heading-xl;\n}\n\n%nhsuk-heading-l {\n display: block;\n margin-top: 0;\n\n @include nhsuk-font(36, $weight: bold);\n @include nhsuk-responsive-margin(4, \"bottom\");\n}\n\nh2,\n.nhsuk-heading-l {\n @extend %nhsuk-heading-l;\n}\n\n%nhsuk-heading-m {\n display: block;\n margin-top: 0;\n\n @include nhsuk-font(26, $weight: bold);\n @include nhsuk-responsive-margin(4, \"bottom\");\n}\n\nh3,\n.nhsuk-heading-m {\n @extend %nhsuk-heading-m;\n}\n\n%nhsuk-heading-s {\n display: block;\n margin-top: 0;\n\n @include nhsuk-font(22, $weight: bold);\n @include nhsuk-responsive-margin(4, \"bottom\");\n}\n\nh4,\n.nhsuk-heading-s {\n @extend %nhsuk-heading-s;\n}\n\n%nhsuk-heading-xs {\n display: block;\n margin-top: 0;\n\n @include nhsuk-font(19, $weight: bold);\n @include nhsuk-responsive-margin(4, \"bottom\");\n}\n\nh5,\n.nhsuk-heading-xs {\n @extend %nhsuk-heading-xs;\n}\n\n%nhsuk-heading-xxs {\n display: block;\n margin-top: 0;\n\n @include nhsuk-font(19, $weight: bold);\n @include nhsuk-responsive-margin(4, \"bottom\");\n}\n\nh6,\n.nhsuk-heading-xxs {\n @extend %nhsuk-heading-xxs;\n}\n\n// Captions to be used inside headings\n\n.nhsuk-caption-xl {\n display: block;\n margin-bottom: nhsuk-spacing(1);\n color: $nhsuk-secondary-text-colour;\n\n @include nhsuk-font(26);\n}\n\n.nhsuk-caption-l {\n display: block;\n margin-bottom: nhsuk-spacing(1);\n color: $nhsuk-secondary-text-colour;\n\n @include nhsuk-font(22);\n}\n\n.nhsuk-caption-m {\n display: block;\n color: $nhsuk-secondary-text-colour;\n\n @include nhsuk-font(19);\n}\n\n.nhsuk-caption--bottom {\n margin-top: nhsuk-spacing(1);\n margin-bottom: nhsuk-spacing(0);\n}\n\n// Body (paragraphs)\n\n%nhsuk-body-l {\n display: block;\n margin-top: 0;\n\n @include nhsuk-font(26);\n @include nhsuk-responsive-margin(5, \"bottom\");\n}\n\n.nhsuk-body-l {\n @extend %nhsuk-body-l;\n}\n\n%nhsuk-body-m {\n display: block;\n margin-top: 0;\n\n @include nhsuk-font(19);\n @include nhsuk-responsive-margin(4, \"bottom\");\n}\n\np,\n.nhsuk-body,\n.nhsuk-body-m {\n @extend %nhsuk-body-m;\n color: inherit;\n}\n\n%nhsuk-body-s {\n display: block;\n margin-top: 0;\n\n @include nhsuk-font(16);\n @include nhsuk-responsive-margin(4, \"bottom\");\n}\n\n.nhsuk-body-s {\n @extend %nhsuk-body-s;\n}\n\naddress {\n @extend %nhsuk-body-m;\n\n font-style: normal;\n}\n\n// Lede text\n//\n// 1. Apply lede text styling to p and ul within the lede element\n// 2. Reduces the spacing between the page heading and the lede text\n\n.nhsuk-lede-text {\n @include nhsuk-font(26);\n @include nhsuk-responsive-margin(7, \"bottom\");\n\n // [1]\n p,\n ul {\n @include nhsuk-font(26);\n }\n}\n\n.nhsuk-lede-text--small {\n @include nhsuk-font(19);\n @include nhsuk-responsive-margin(5, \"bottom\");\n}\n\n// [2]\nh1 + .nhsuk-lede-text,\nh1 + .nhsuk-lede-text--small {\n margin-top: -(nhsuk-spacing(2));\n}\n\n// Contextual adjustments\n//\n// Add top padding to headings that appear directly after paragraphs.\n//\n// 1. Removes the padding-top because of the lede-text's increased margin-bottom\n\n%nhsuk-body-l + %nhsuk-heading-l {\n padding-top: nhsuk-spacing(1);\n\n @include nhsuk-media-query($from: tablet) {\n padding-top: nhsuk-spacing(2);\n }\n}\n\n%nhsuk-body-m + %nhsuk-heading-l,\n%nhsuk-body-s + %nhsuk-heading-l {\n @include nhsuk-responsive-padding(4, \"top\");\n}\n\n%nhsuk-body-m + %nhsuk-heading-m,\n%nhsuk-body-s + %nhsuk-heading-m,\n%nhsuk-body-m + %nhsuk-heading-s,\n%nhsuk-body-s + %nhsuk-heading-s {\n padding-top: nhsuk-spacing(1);\n\n @include nhsuk-media-query($from: tablet) {\n padding-top: nhsuk-spacing(2);\n }\n}\n\n// [1]\n.nhsuk-lede-text + %nhsuk-heading-l {\n padding-top: 0;\n}\n\n// Font weight for and \n\nstrong,\nb {\n @include nhsuk-font-weight-bold;\n}\n\n@include nhsuk-media-query($media-type: print) {\n .nhsuk-main-wrapper {\n padding-top: 1em;\n padding-bottom: 1em;\n }\n\n h1,\n .nhsuk-heading-xl,\n h2,\n .nhsuk-heading-l,\n h3,\n .nhsuk-heading-m,\n h4,\n .nhsuk-heading-s,\n h5,\n .nhsuk-heading-xs,\n h6,\n .nhsuk-heading-xxs,\n .nhsuk-lede-text,\n .nhsuk-body-l,\n p,\n .nhsuk-body-m,\n .nhsuk-body-s,\n .nhsuk-body,\n address,\n ol,\n ul,\n .nhsuk-list {\n margin-bottom: 7.5pt;\n }\n\n h1 {\n // stylelint-disable-next-line declaration-no-important\n margin-bottom: 15pt !important;\n }\n\n %nhsuk-body-l + %nhsuk-heading-l,\n %nhsuk-body-m + %nhsuk-heading-l,\n %nhsuk-body-s + %nhsuk-heading-l,\n %nhsuk-body-m + %nhsuk-heading-m,\n %nhsuk-body-s + %nhsuk-heading-m,\n %nhsuk-body-m + %nhsuk-heading-s,\n %nhsuk-body-s + %nhsuk-heading-s {\n padding-top: 0.45em;\n }\n}\n\n// Code\n\nli code,\ncaption code,\ntd code,\np code {\n width: fit-content;\n padding: 2px nhsuk-spacing(1);\n color: $nhsuk-code-colour;\n background-color: nhsuk-colour(\"white\");\n}\n\ncode,\nsamp,\nkbd,\nvar {\n @include nhsuk-font-monospace;\n font-size: inherit;\n}\n\nsamp,\nkbd,\nvar {\n font-style: normal;\n}\n\nkbd > kbd {\n display: inline-block;\n margin: 0 nhsuk-em(4px, 19);\n padding: 0 nhsuk-spacing(1);\n border: $nhsuk-border-width-form-element solid currentcolor;\n border-radius: $nhsuk-border-radius;\n\n &:first-child {\n margin-left: nhsuk-em(1px, 19);\n }\n\n &:last-child {\n margin-right: nhsuk-em(1px, 19);\n }\n}\n\na code {\n color: currentcolor;\n}\n\na:focus code {\n background-color: transparent;\n}\n","@forward \"globals\" show $nhsuk-font-normal, $nhsuk-font-bold, $nhsuk-font-weight-normal, $nhsuk-font-weight-bold;\n\n////\n/// Typography\n///\n/// @group settings/typography\n////\n\n/// Responsive typography font map\n///\n/// This is used to generate responsive typography that adapts according to the\n/// breakpoints.\n///\n/// Font size and font weight can be defined for each breakpoint. You can define\n/// different behaviour on tablet and desktop. The 'null' breakpoint is for\n/// mobile.\n///\n/// Line-heights will automatically be converted from pixel measurements into\n/// relative values. For example, with a font-size of 16px and a line-height of\n/// 24px, the line-height will be converted to 1.5 before output.\n///\n/// You can also specify a separate font size and line height for print media.\n///\n/// @prop {Number} $point.$breakpoint.font-size - Font size for `$point` at `$breakpoint`\n/// @prop {Number} $point.$breakpoint.line-height - Line height for `$point` at `$breakpoint`\n/// @prop {Number} $point.print.font-size - Font size for `$point` when printing\n/// @prop {Number} $point.print.line-height - Line height for `$point` when printing\n///\n/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)\n\n$nhsuk-typography-scale: (\n 64: (\n null: (\n font-size: 48px,\n line-height: 54px\n ),\n tablet: (\n font-size: 64px,\n line-height: 70px\n ),\n print: (\n font-size: 34pt,\n line-height: 1.1\n )\n ),\n 48: (\n null: (\n font-size: 32px,\n line-height: 38px\n ),\n tablet: (\n font-size: 48px,\n line-height: 54px\n ),\n print: (\n font-size: 26pt,\n line-height: 1.15\n )\n ),\n 36: (\n null: (\n font-size: 27px,\n line-height: 33px\n ),\n tablet: (\n font-size: 36px,\n line-height: 42px\n ),\n print: (\n font-size: 20pt,\n line-height: 1.2\n )\n ),\n 26: (\n null: (\n font-size: 22px,\n line-height: 29px\n ),\n tablet: (\n font-size: 26px,\n line-height: 32px\n ),\n print: (\n font-size: 17pt,\n line-height: 1.25\n )\n ),\n 22: (\n null: (\n font-size: 19px,\n line-height: 27px\n ),\n tablet: (\n font-size: 22px,\n line-height: 30px\n ),\n print: (\n font-size: 15pt,\n line-height: 1.25\n )\n ),\n 19: (\n null: (\n font-size: 16px,\n line-height: 24px\n ),\n tablet: (\n font-size: 19px,\n line-height: 28px\n ),\n print: (\n font-size: 13pt,\n line-height: 1.25\n )\n ),\n 16: (\n null: (\n font-size: 14px,\n line-height: 24px\n ),\n tablet: (\n font-size: 16px,\n line-height: 24px\n ),\n print: (\n font-size: 12pt,\n line-height: 1.3\n )\n ),\n 14: (\n null: (\n font-size: 12px,\n line-height: 20px\n ),\n tablet: (\n font-size: 14px,\n line-height: 24px\n ),\n print: (\n font-size: 12pt,\n line-height: 1.3\n )\n )\n) !default;\n\n/// System monospace font stack\n///\n/// Android typically avoids the \"Courier\" based monospace\n/// default but we need to specify fallbacks for others:\n///\n/// * Menlo - Font for older macOS, OS X versions\n/// * Cascadia Mono, Segoe UI Mono, Consolas - Fonts for Windows 11, 10, 8\n/// * Consolas - Font for older Windows versions\n/// * Liberation Mono - Font for Linux used by GitHub\n$nhsuk-code-font: menlo, \"Cascadia Mono\", \"Segoe UI Mono\", consolas, \"Liberation Mono\", monospace;\n","@use \"../../core/tools\" as *;\n\n////\n/// Display\n///\n/// @group utilities\n////\n\n// stylelint-disable declaration-no-important\n\n.nhsuk-u-display-inline {\n display: inline !important;\n}\n\n.nhsuk-u-display-inline-block {\n display: inline-block !important;\n}\n\n.nhsuk-u-display-block {\n display: block !important;\n}\n\n.nhsuk-u-display-none {\n display: none !important;\n}\n\n.nhsuk-u-display-none-print {\n @include nhsuk-print-hide($important: true);\n}\n","////\n/// Float\n///\n/// @group utilities\n////\n\n// stylelint-disable declaration-no-important\n\n.nhsuk-u-float-left {\n float: left !important;\n}\n\n.nhsuk-u-float-right {\n float: right !important;\n}\n","@use \"sass:math\";\n@use \"../tools\" as *;\n\n////\n/// Grid widths\n///\n/// Force grid widths on all screen sizes\n///\n/// By default all grid elements will go to 100% width\n/// on screen sizes below tablet, these utilities can force\n/// custom widths on all screen sizes\n///\n/// @group utilities\n///\n/// @example html\n/// \n////\n\n// Utility classes are allowed to use !important;\n// so we disable stylelint for that rule\n// stylelint-disable declaration-no-important\n\n.nhsuk-u-one-half {\n width: math.percentage(math.div(1, 2)) !important;\n float: left;\n}\n\n.nhsuk-u-one-third {\n width: math.percentage(math.div(1, 3)) !important;\n float: left;\n}\n\n.nhsuk-u-two-thirds {\n width: math.percentage(math.div(2, 3)) !important;\n float: left;\n}\n\n.nhsuk-u-one-quarter {\n width: math.percentage(math.div(1, 4)) !important;\n float: left;\n}\n\n.nhsuk-u-three-quarters {\n width: math.percentage(math.div(3, 4)) !important;\n float: left;\n}\n\n// Force grid widths on screen sizes on tablet\n// and above\n//\n// By default all grid elements will go to 100% width\n// on every screen size, these utilities can force\n// custom widths on screen sizes on tablet\n// and above\n\n.nhsuk-u-one-half-tablet {\n width: 100% !important;\n @include nhsuk-media-query($from: tablet) {\n width: math.percentage(math.div(1, 2)) !important;\n float: left;\n }\n}\n\n.nhsuk-u-one-third-tablet {\n width: 100% !important;\n @include nhsuk-media-query($from: tablet) {\n width: math.percentage(math.div(1, 3)) !important;\n float: left;\n }\n}\n\n.nhsuk-u-two-thirds-tablet {\n width: 100% !important;\n @include nhsuk-media-query($from: tablet) {\n width: math.percentage(math.div(2, 3)) !important;\n float: left;\n }\n}\n\n.nhsuk-u-one-quarter-tablet {\n width: 100% !important;\n @include nhsuk-media-query($from: tablet) {\n width: math.percentage(math.div(1, 4)) !important;\n float: left;\n }\n}\n\n.nhsuk-u-three-quarters-tablet {\n width: 100% !important;\n @include nhsuk-media-query($from: tablet) {\n width: math.percentage(math.div(3, 4)) !important;\n float: left;\n }\n}\n","@use \"../tools\" as *;\n\n////\n/// Link nowrap\n///\n/// Prevent long anchor links from line breaking\n/// on smaller screens\n///\n/// @group utilities\n///\n/// @example html\n/// \n////\n\n.nhsuk-u-nowrap {\n @include nhsuk-media-query($until: tablet) {\n white-space: nowrap;\n }\n}\n","@use \"../settings\" as *;\n@use \"../tools/functions\" as *;\n@use \"../helpers\" as *;\n\n////\n/// List border\n///\n/// Adds a grey border to the bottom of an
\n////\n\n.nhsuk-list--border li {\n padding: nhsuk-px-to-rem(8px) 0 nhsuk-px-to-rem(16px);\n border-bottom: 1px solid $nhsuk-border-colour;\n}\n","@use \"../tools\" as *;\n\n////\n/// Reading width\n///\n/// Adds a maximum width to large pieces of content\n///\n/// @group utilities\n///\n/// @example html\n/// \n////\n\n.nhsuk-u-reading-width {\n @include nhsuk-reading-width;\n}\n","// stylelint-disable declaration-no-important\n\n@use \"../settings\" as *;\n@use \"../tools\" as *;\n@use \"sass:map\";\n\n////\n/// Spacing\n///\n/// @group utilities\n////\n\n/// Directions for spacing\n///\n/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)\n///\n/// @access private\n\n$_spacing-directions: (\"top\", \"right\", \"bottom\", \"left\") !default;\n\n/// Generate responsive spacing override classes\n///\n/// Generate spacing override classes for the given property (e.g. margin)\n/// for each point in the responsive spacing scale.\n///\n/// @param {String} $property - Property to add spacing to (e.g. 'margin')\n///\n/// @example css\n/// .nhsuk-u-margin-4 {\n/// margin: 16px !important;\n/// }\n///\n/// @media (min-width: 40.0625em) {\n/// .nhsuk-u-margin-4 {\n/// margin: 24px !important;\n/// }\n/// }\n///\n/// @access private\n\n@mixin _nhsuk-generate-responsive-spacing-overrides($property) {\n // For each point in the spacing scale (defined in settings), create an\n // override that affects all directions...\n @each $scale-point, $scale-map in $nhsuk-spacing-responsive-scale {\n .nhsuk-u-#{$property}-#{$scale-point} {\n @include nhsuk-responsive-spacing($scale-point, $property, \"all\", true);\n }\n\n // ... and then an override for each individual direction\n @each $direction in $_spacing-directions {\n .nhsuk-u-#{$property}-#{$direction}-#{$scale-point} {\n @include nhsuk-responsive-spacing($scale-point, $property, $direction, true);\n }\n }\n }\n}\n\n/// Generate static spacing override classes\n///\n/// Generate spacing override classes for the given property (e.g. margin)\n/// for each point in the non-responsive spacing scale.\n///\n/// @param {String} $property - Property to add spacing to (e.g. 'margin')\n///\n/// @example css\n/// .nhsuk-u-static-margin-4 {\n/// margin: 24px !important;\n/// }\n///\n/// @access private\n\n@mixin _nhsuk-generate-static-spacing-overrides($property) {\n @each $spacing-point in map.keys($nhsuk-spacing-points) {\n .nhsuk-u-static-#{$property}-#{$spacing-point} {\n #{$property}: nhsuk-spacing($spacing-point) !important;\n }\n\n @each $direction in $_spacing-directions {\n .nhsuk-u-static-#{$property}-#{$direction}-#{$spacing-point} {\n #{$property}-#{$direction}: nhsuk-spacing($spacing-point) !important;\n }\n }\n }\n}\n\n@include nhsuk-exports(\"nhsuk/core/utilities/spacing\") {\n @include _nhsuk-generate-responsive-spacing-overrides(\"margin\");\n @include _nhsuk-generate-responsive-spacing-overrides(\"padding\");\n\n @include _nhsuk-generate-static-spacing-overrides(\"margin\");\n @include _nhsuk-generate-static-spacing-overrides(\"padding\");\n}\n","////\n/// Text align\n///\n/// @group utilities\n////\n\n// stylelint-disable declaration-no-important\n\n.nhsuk-u-text-align-left {\n text-align: left !important;\n}\n\n.nhsuk-u-text-align-centre {\n text-align: center !important;\n}\n\n.nhsuk-u-text-align-right {\n text-align: right !important;\n}\n","@use \"sass:map\";\n@use \"../settings\" as *;\n@use \"../tools\" as *;\n\n////\n/// Typography\n///\n/// @group utilities\n////\n\n// Font size and line height\n\n// Generate typography override classes for each responsive font map in the\n// typography scale eg .nhsuk-u-font-size-48\n// nhsuk-u-font-size-24 is deprecated\n@each $size, $font-map in $nhsuk-typography-scale {\n .nhsuk-u-font-size-#{$size} {\n $font-map: map.get($nhsuk-typography-scale, $size);\n\n // Add underscore to deprecated typography scale keys\n @if map.has-key($font-map, \"deprecation\") {\n $size: _#{$size};\n }\n\n @include nhsuk-font-size($size, $important: true);\n }\n}\n\n// Font family\n\n.nhsuk-u-font-code {\n @include nhsuk-font-code($important: true);\n}\n\n.nhsuk-u-font-monospace {\n @include nhsuk-font-monospace($important: true);\n}\n\n// Weights\n\n.nhsuk-u-font-weight-normal {\n @include nhsuk-font-weight-normal($important: true);\n}\n\n.nhsuk-u-font-weight-bold {\n @include nhsuk-font-weight-bold($important: true);\n}\n\n// Typography helpers\n\n.nhsuk-u-text-break-word {\n @include nhsuk-text-break-word($important: true);\n}\n\n// Colours\n\n.nhsuk-u-secondary-text-colour {\n // stylelint-disable-next-line declaration-no-important\n color: $nhsuk-secondary-text-colour !important;\n}\n","@use \"../tools\" as *;\n\n////\n/// Visually hidden\n///\n/// Hide elements visually but keep it in the DOM\n///\n/// @group utilities\n///\n/// @example html\n/// Error:\n////\n\n.nhsuk-u-visually-hidden {\n @include nhsuk-visually-hidden;\n}\n\n.nhsuk-u-visually-hidden-focusable {\n @include nhsuk-visually-hidden-focusable;\n}\n","@use \"sass:math\";\n@use \"../tools\" as *;\n\n////\n/// Widths\n///\n/// Force element widths on all screen sizes\n///\n/// @group utilities\n/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)\n///\n/// @example html\n/// \n////\n\n// Utility classes are allowed to use !important;\n// so we disable stylelint for that rule\n// stylelint-disable declaration-no-important\n\n.nhsuk-u-width-full {\n width: 100% !important;\n}\n\n.nhsuk-u-width-three-quarters {\n width: 100% !important;\n\n @include nhsuk-media-query($from: tablet) {\n width: math.percentage(math.div(3, 4)) !important;\n }\n}\n\n.nhsuk-u-width-two-thirds {\n width: 100% !important;\n\n @include nhsuk-media-query($from: tablet) {\n width: math.percentage(math.div(2, 3)) !important;\n }\n}\n\n.nhsuk-u-width-one-half {\n width: 100% !important;\n\n @include nhsuk-media-query($from: tablet) {\n width: math.percentage(math.div(1, 2)) !important;\n }\n}\n\n.nhsuk-u-width-one-third {\n width: 100% !important;\n\n @include nhsuk-media-query($from: tablet) {\n width: math.percentage(math.div(1, 3)) !important;\n }\n}\n\n.nhsuk-u-width-one-quarter {\n width: 100% !important;\n\n @include nhsuk-media-query($from: tablet) {\n width: math.percentage(math.div(1, 4)) !important;\n }\n}\n","@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","@use \"sass:math\";\n@use \"../settings\" as *;\n@use \"./functions\" as *;\n\n////\n/// Buttons\n///\n/// @group tools\n////\n\n/// Button styling with colour overrides\n///\n/// @param {Colour} $button-colour [$nhsuk-secondary-button-colour] - Button background colour\n/// @param {Colour} $button-hover-colour [null] - Button hover background colour\n/// @param {Colour} $button-active-colour [null] - Button active background colour\n/// @param {Colour} $button-text-colour [$nhsuk-secondary-button-text-colour] - Button text colour\n/// @param {Colour} $button-shadow-colour [$nhsuk-secondary-button-shadow-colour] - Button shadow colour\n/// @param {Colour} $button-border-colour [null] - Button border colour (optional, e.g. secondary button)\n/// @param {Number} $button-border-radius [$nhsuk-button-border-radius] - Button border radius\n///\n\n@mixin nhsuk-button-style(\n $button-colour: $nhsuk-secondary-button-colour,\n $button-hover-colour: null,\n $button-active-colour: null,\n $button-text-colour: $nhsuk-secondary-button-text-colour,\n $button-shadow-colour: $nhsuk-secondary-button-shadow-colour,\n $button-border-colour: null,\n $button-border-radius: $nhsuk-button-border-radius\n) {\n background-color: $button-colour;\n box-shadow: 0 $nhsuk-button-shadow-size 0 $button-shadow-colour;\n\n &,\n &:visited,\n &:hover,\n &:active {\n color: $button-text-colour;\n }\n\n &[href]:not(:focus) .nhsuk-icon {\n fill: $button-text-colour;\n\n @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n fill: currentcolor;\n }\n }\n\n &:hover {\n @if $button-hover-colour {\n background-color: $button-hover-colour;\n } @else {\n background-color: $button-colour;\n }\n }\n\n &:active,\n &:active:focus {\n @if $button-active-colour {\n background-color: $button-active-colour;\n } @else {\n background-color: $button-colour;\n }\n }\n\n // Override default border radius\n @if $button-border-radius != $nhsuk-button-border-radius {\n &,\n &::before,\n &::after {\n border-radius: nhsuk-px-to-rem($button-border-radius);\n }\n }\n\n // Handle shadow on both the button and the pseudo element. The button shadow\n // remains in place to prevent any pixel gaps due to browser rounding\n @if $button-border-colour {\n &,\n &::after {\n box-shadow: 0 $nhsuk-button-shadow-size 0 $button-shadow-colour;\n }\n\n &:active,\n &:active:focus,\n // Set border on click area for default and hover states which allows the\n // border to render underneath the shadow and hide pixel artifacts, but\n // ensuring the active \"pressed\" and focus states have priority\n &:not(:focus):not(:active)::before {\n border-color: $button-border-colour;\n\n @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n border-color: ButtonBorder;\n }\n }\n\n // Inset the pseudo element shadow away from the edges, to restore lost\n // border radius (and its shadow) previously hidden by the 2px border\n &:not(:focus)::after {\n right: 0;\n left: 0;\n border-radius: nhsuk-px-to-rem($button-border-radius - $nhsuk-border-width-form-element);\n }\n\n // Remove the pseudo element shadow when focused or pressed\n &:focus::after,\n &:active::after {\n box-shadow: none;\n }\n }\n\n // Override high-contrast button colours back to defaults\n @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n &,\n &:visited,\n &:hover,\n &:active {\n color: ButtonText;\n }\n\n &,\n &:hover,\n &:active,\n &:active:focus {\n background-color: ButtonFace;\n }\n }\n}\n","@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n\n////\n/// Error message component\n///\n/// @group components/error-message\n////\n\n@include nhsuk-exports(\"nhsuk/components/error-message\") {\n .nhsuk-error-message {\n display: block;\n margin-top: 0; // Reset any default browser margins for paragraphs\n margin-bottom: nhsuk-spacing(3);\n clear: both;\n color: $nhsuk-error-colour;\n\n @include nhsuk-font(19, $weight: bold);\n }\n}\n","@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@forward \"../../core/styles/lists\";\n\n////\n/// Error summary component\n///\n/// @group components/error-summary\n////\n\n@include nhsuk-exports(\"nhsuk/components/error-summary\") {\n .nhsuk-error-summary {\n border: $nhsuk-border-width solid $nhsuk-error-colour;\n\n @include nhsuk-text-colour;\n @include nhsuk-font($size: 19);\n @include nhsuk-responsive-padding(4);\n @include nhsuk-responsive-margin(8, \"bottom\");\n\n &:focus {\n border: $nhsuk-focus-width solid $nhsuk-focus-text-colour;\n outline: $nhsuk-focus-width solid transparent;\n box-shadow: 0 0 0 $nhsuk-focus-width $nhsuk-focus-colour;\n }\n }\n\n .nhsuk-error-summary__title {\n margin-top: 0;\n\n @include nhsuk-font(26, $weight: bold);\n @include nhsuk-responsive-margin(4, \"bottom\");\n }\n\n .nhsuk-error-summary__body {\n p {\n margin-bottom: 0;\n }\n\n > * + * {\n @include nhsuk-responsive-margin(4, \"top\");\n }\n\n > :last-child {\n @include nhsuk-responsive-margin(1, \"bottom\");\n }\n }\n\n // Cross-component class - adjusts styling of list component\n .nhsuk-error-summary__list {\n margin-bottom: 0;\n }\n\n // Remove the bottom margin from the last list item\n .nhsuk-error-summary__list li:last-child {\n margin-bottom: 0;\n }\n\n .nhsuk-error-summary__list a {\n @include nhsuk-font-weight-bold;\n @include nhsuk-link-style-error;\n }\n}\n","@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n\n////\n/// Fieldset component\n///\n/// @group components/fieldset\n////\n\n@include nhsuk-exports(\"nhsuk/components/fieldset\") {\n .nhsuk-fieldset {\n min-width: 0;\n margin: 0;\n padding: 0;\n border: 0;\n @include nhsuk-clearfix;\n }\n\n // Fix for Firefox < 53 (https://bugzil.la/504622)\n // stylelint-disable selector-type-no-unknown -- Ignore 'x:-moz-any-link'\n @supports not (caret-color: auto) {\n .nhsuk-fieldset,\n x:-moz-any-link {\n display: table-cell;\n }\n }\n // stylelint-enable selector-type-no-unknown\n\n .nhsuk-fieldset__legend {\n // Fix legend text wrapping in Edge and IE\n // 1. IE9-11 & Edge 12-13\n // 2. IE8-11\n box-sizing: border-box; // 1\n\n display: table; // 2\n\n max-width: 100%; // 1\n margin-bottom: nhsuk-spacing(2);\n padding: 0;\n\n white-space: normal; // 1\n\n @include nhsuk-text-colour;\n @include nhsuk-font($size: 19);\n }\n\n // Modifiers that make legends look more like their equivalent headings\n .nhsuk-fieldset__legend--xl,\n .nhsuk-fieldset__legend--l,\n .nhsuk-fieldset__legend--m {\n margin-bottom: nhsuk-spacing(3);\n @include nhsuk-font-weight-bold;\n }\n\n .nhsuk-fieldset__legend--xl {\n @include nhsuk-font-size($size: 48);\n }\n\n .nhsuk-fieldset__legend--l {\n @include nhsuk-font-size($size: 36);\n }\n\n .nhsuk-fieldset__legend--m {\n @include nhsuk-font-size($size: 26);\n }\n\n .nhsuk-fieldset__legend--s {\n @include nhsuk-font-weight-bold;\n }\n\n // When the legend contains an H1, we want the H1 to inherit all styles from\n // the legend. Effectively treat the heading as if it is not there.\n .nhsuk-fieldset__heading {\n margin: 0;\n font-size: inherit;\n font-weight: inherit;\n }\n}\n","@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n\n////\n/// Hint component\n///\n/// @group components/hint\n////\n\n@include nhsuk-exports(\"nhsuk/components/hint\") {\n .nhsuk-hint {\n margin-bottom: nhsuk-spacing(3);\n color: $nhsuk-secondary-text-colour;\n\n @include nhsuk-font($size: 19);\n }\n\n // Reduces margin-bottom of hint when used after the default label (no class)\n // or nhsuk-label--s for better vertical alignment.\n\n // This adjustment will not work when the label is inside the
, however it\n // is unlikely that the default or nhsuk-label--s class would be used in this\n // case.\n\n // This adjustment will not work in browsers that do not support :not().\n // Users with these browsers will see the default size margin (5px larger).\n\n .nhsuk-label:not(.nhsuk-label--m):not(.nhsuk-label--l):not(.nhsuk-label--xl) + .nhsuk-hint {\n margin-bottom: nhsuk-spacing(2);\n }\n\n // Reduces margin-bottom of hint when used after the default legend (no class)\n // or nhsuk-fieldset__legend--s for better vertical alignment.\n\n // This adjustment will not work when the legend is outside the
, however\n // it is unlikely that the default or nhsuk-fieldset__legend--s class would be\n // used in this case.\n\n // This adjustment will not work in browsers that do not support :not().\n // Users with these browsers will see the default size margin (5px larger).\n\n // prettier-ignore\n .nhsuk-fieldset__legend:not(.nhsuk-fieldset__legend--m):not(.nhsuk-fieldset__legend--l):not(.nhsuk-fieldset__legend--xl) + .nhsuk-hint {\n margin-bottom: nhsuk-spacing(2);\n }\n\n // Reduces visual spacing of legend when there is a hint\n .nhsuk-fieldset__legend + .nhsuk-hint {\n margin-top: nhsuk-spacing(-1);\n }\n}\n","@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n\n////\n/// Label component\n///\n/// @group components/label\n////\n\n@include nhsuk-exports(\"nhsuk/components/label\") {\n .nhsuk-label {\n display: block;\n margin-bottom: nhsuk-spacing(1);\n\n @include nhsuk-font($size: 19);\n }\n\n // Modifiers that make labels look more like their equivalent headings\n .nhsuk-label--xl,\n .nhsuk-label--l,\n .nhsuk-label--m {\n margin-bottom: nhsuk-spacing(3);\n @include nhsuk-font-weight-bold;\n }\n\n .nhsuk-label--xl {\n @include nhsuk-font-size($size: 48);\n }\n\n .nhsuk-label--l {\n @include nhsuk-font-size($size: 36);\n }\n\n .nhsuk-label--m {\n @include nhsuk-font-size($size: 26);\n }\n\n .nhsuk-label--s {\n @include nhsuk-font-weight-bold;\n }\n\n // When the label is nested inside a heading, override the heading so that it\n // does not have a margin. Effectively we want to be able to treat the heading\n // as if it is not there.\n //\n // This breaks BEM conventions because it exists as a parent of the 'block',\n // so we can't really consider an element.\n .nhsuk-label-wrapper {\n margin: 0;\n }\n}\n","@use \"sass:math\";\n@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n@forward \"../error-message\";\n@forward \"../fieldset\";\n@forward \"../hint\";\n@forward \"../label\";\n\n////\n/// Checkboxes component\n///\n/// @group components/checkboxes\n////\n\n$nhsuk-checkboxes-size: nhsuk-px-to-rem(40px);\n$nhsuk-checkboxes-small-size: nhsuk-px-to-rem(24px);\n\n$nhsuk-checkboxes-label-padding-left-right: nhsuk-px-to-rem(12px);\n\n// Offset 2px due to 40px form control with 44px clickable area\n// https://nhsuk.github.io/nhsuk-frontend/examples/form-alignment/\n$nhsuk-checkboxes-offset: $nhsuk-border-width-form-element;\n\n@include nhsuk-exports(\"nhsuk/components/checkboxes\") {\n $nhsuk-touch-target-gutter: nhsuk-px-to-rem(4px);\n $nhsuk-touch-target-size: $nhsuk-checkboxes-size + nhsuk-px-to-rem($nhsuk-touch-target-gutter);\n\n .nhsuk-checkboxes {\n margin: -$nhsuk-checkboxes-offset nhsuk-px-to-rem(-$nhsuk-checkboxes-offset);\n margin-right: 0;\n }\n\n .nhsuk-checkboxes__item {\n display: flex;\n position: relative;\n flex-wrap: wrap;\n margin-top: nhsuk-spacing(2) - $nhsuk-checkboxes-offset;\n\n .nhsuk-checkboxes__conditional:not(.nhsuk-checkboxes__conditional--hidden) + & {\n @include nhsuk-responsive-margin(4, \"top\", $adjustment: - $nhsuk-checkboxes-offset);\n }\n }\n\n .nhsuk-checkboxes__item:first-child {\n margin-top: 0;\n }\n\n .nhsuk-checkboxes__input {\n // Allow the input to sit above the label, enabling its proper detection\n // when exploring by touch or using automation tools like Selenium\n z-index: 1;\n\n width: $nhsuk-touch-target-size;\n height: $nhsuk-touch-target-size;\n margin: 0;\n\n opacity: 0;\n\n cursor: pointer;\n }\n\n .nhsuk-checkboxes__label {\n box-sizing: border-box;\n\n align-self: center;\n\n // Ensure that the width of the label is never more than the width of the\n // container minus the input. This prevents the label from wrapping due to\n // __item using flex-wrap because we want hints on a separate line\n max-width: calc(100% - $nhsuk-touch-target-size);\n margin-bottom: 0;\n padding: (nhsuk-spacing(1) + $nhsuk-border-width-form-element) $nhsuk-checkboxes-label-padding-left-right;\n\n cursor: pointer;\n // remove 300ms pause on mobile\n touch-action: manipulation;\n }\n\n // [ ] Check box\n .nhsuk-checkboxes__label::before {\n content: \"\";\n\n box-sizing: border-box;\n\n position: absolute;\n top: math.div($nhsuk-touch-target-gutter, 2);\n left: math.div($nhsuk-touch-target-gutter, 2);\n\n width: $nhsuk-checkboxes-size;\n height: $nhsuk-checkboxes-size;\n\n border: $nhsuk-border-width-form-element solid $nhsuk-input-border-colour;\n\n background: $nhsuk-input-background-colour;\n }\n\n // ✔ Check mark\n //\n // The check mark is a box with a border on the left and bottom side (└──),\n // rotated 45 degrees\n .nhsuk-checkboxes__label::after {\n content: \"\";\n\n box-sizing: border-box;\n\n position: absolute;\n\n // Use \"magic numbers\" to define shape and position of check mark because\n // the complexity of the shape makes it difficult to calculate dynamically.\n top: nhsuk-px-to-rem(15px);\n left: nhsuk-px-to-rem(12px);\n\n width: nhsuk-px-to-rem(22px);\n height: nhsuk-px-to-rem(10px);\n\n transform: rotate(-45deg);\n\n border: solid;\n border-width: 0 0 nhsuk-px-to-rem(4px) nhsuk-px-to-rem(4px);\n // Fix bug in IE11 caused by transform rotate (-45deg).\n // See: alphagov/nhsuk_elements/issues/518\n border-top-color: transparent;\n\n opacity: 0;\n\n background: transparent;\n }\n\n .nhsuk-checkboxes__hint {\n display: block;\n width: 100%;\n margin-top: nhsuk-spacing(-1);\n padding-right: $nhsuk-checkboxes-label-padding-left-right;\n padding-left: $nhsuk-checkboxes-label-padding-left-right + $nhsuk-touch-target-size;\n }\n\n // This is to bypass nhsuk-hint's specificity on hints following labels having\n // a margin bottom of 8px (nhsuk-spacing(2)). Because checkboxes are flexbox,\n // the margin doesn't collapse so we have to do this manually.\n .nhsuk-label:not(.nhsuk-label--m):not(.nhsuk-label--l):not(.nhsuk-label--xl) + .nhsuk-checkboxes__hint {\n margin-bottom: 0;\n }\n\n // Focused state\n .nhsuk-checkboxes__input:focus + .nhsuk-checkboxes__label::before {\n @include nhsuk-focused-checkbox;\n }\n\n // Selected state\n .nhsuk-checkboxes__input:checked + .nhsuk-checkboxes__label::after {\n opacity: 1;\n }\n\n // Disabled state\n .nhsuk-checkboxes__input:disabled,\n .nhsuk-checkboxes__input:disabled + .nhsuk-checkboxes__label {\n cursor: not-allowed;\n }\n\n .nhsuk-checkboxes__input:disabled + .nhsuk-checkboxes__label,\n .nhsuk-checkboxes__input:disabled ~ .nhsuk-hint {\n opacity: 0.5;\n }\n\n // =========================================================\n // Inline checkboxes\n // =========================================================\n\n .nhsuk-checkboxes--inline {\n @include nhsuk-media-query($from: tablet) {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-start;\n row-gap: nhsuk-spacing(2) - $nhsuk-checkboxes-offset;\n\n &.nhsuk-checkboxes--small {\n row-gap: 0;\n }\n\n .nhsuk-checkboxes__item {\n max-width: calc(50% - $nhsuk-checkboxes-label-padding-left-right - nhsuk-spacing(4));\n margin-top: 0;\n margin-right: nhsuk-spacing(4);\n }\n }\n }\n\n // =========================================================\n // Dividers ('or')\n // =========================================================\n\n .nhsuk-checkboxes__divider {\n width: $nhsuk-checkboxes-size;\n margin: nhsuk-spacing(2) - $nhsuk-checkboxes-offset nhsuk-px-to-rem($nhsuk-checkboxes-offset);\n text-align: center;\n @include nhsuk-text-colour;\n @include nhsuk-font($size: 19);\n }\n\n // =========================================================\n // Conditional reveals\n // =========================================================\n\n // Calculate the amount of padding needed to keep the border centered against the checkbox.\n $conditional-border-padding: math.div($nhsuk-touch-target-size, 2) - nhsuk-px-to-rem($nhsuk-border-width-form-element);\n // Move the border centered with the checkbox\n $conditional-margin-left: $conditional-border-padding;\n // Move the contents of the conditional inline with the label\n $conditional-padding-left: $conditional-border-padding + $nhsuk-checkboxes-label-padding-left-right;\n\n .nhsuk-checkboxes__conditional {\n margin-top: nhsuk-spacing(2) - $nhsuk-checkboxes-offset;\n margin-bottom: $nhsuk-checkboxes-offset;\n margin-left: $conditional-margin-left;\n padding-left: $conditional-padding-left;\n border-left: nhsuk-px-to-rem($nhsuk-border-width) solid nhsuk-colour(\"grey-3\");\n\n .nhsuk-frontend-supported &--hidden {\n display: none;\n }\n }\n\n // =========================================================\n // Small checkboxes\n // =========================================================\n\n .nhsuk-checkboxes--small {\n $input-offset: math.div($nhsuk-touch-target-size - $nhsuk-checkboxes-small-size, 2);\n\n .nhsuk-checkboxes__item {\n margin-top: 0;\n }\n\n // Shift the touch target into the left margin so that the visible edge of\n // the control is aligned\n //\n // ┆What colours do you like?\n // ┌┆───┐\n // │┆[] │ Purple\n // └┆▲──┘\n // ▲┆└─ Check box pseudo element, aligned with margin\n // └─── Touch target (invisible input), shifted into the margin\n .nhsuk-checkboxes__input {\n margin-left: $input-offset * -1;\n }\n\n .nhsuk-checkboxes__label {\n max-width: calc(100% - $nhsuk-touch-target-size + $input-offset);\n\n // Create a tiny space between the small checkbox hover state so that it\n // doesn't clash with the label\n padding-left: $nhsuk-checkboxes-label-padding-left-right - $input-offset;\n }\n\n // [ ] Check box\n //\n // Reduce the size of the check box [1], vertically center it within the\n // touch target [2]\n .nhsuk-checkboxes__label::before {\n top: $input-offset; // 2\n left: nhsuk-px-to-rem($nhsuk-checkboxes-offset);\n width: $nhsuk-checkboxes-small-size; // 1\n height: $nhsuk-checkboxes-small-size; // 1\n }\n\n // ✔ Check mark\n //\n // Reduce the size of the check mark and re-align within the checkbox\n .nhsuk-checkboxes__label::after {\n top: nhsuk-px-to-rem(18px);\n left: nhsuk-px-to-rem(8px);\n width: nhsuk-px-to-rem(12px);\n height: nhsuk-px-to-rem(6px);\n border-width: 0 0 nhsuk-px-to-rem(3px) nhsuk-px-to-rem(3px);\n }\n\n // Fix position of hint with small checkboxes\n .nhsuk-checkboxes__hint {\n padding-left: $nhsuk-touch-target-size + $nhsuk-checkboxes-label-padding-left-right - ($input-offset * 2);\n }\n\n // Align conditional reveals with small checkboxes\n .nhsuk-checkboxes__conditional {\n margin-left: $conditional-border-padding - $input-offset + nhsuk-px-to-rem($nhsuk-checkboxes-offset);\n padding-left: $conditional-border-padding + $nhsuk-checkboxes-label-padding-left-right -\n $input-offset - nhsuk-px-to-rem($nhsuk-checkboxes-offset);\n }\n\n .nhsuk-checkboxes__divider {\n width: $nhsuk-checkboxes-small-size;\n margin: nhsuk-spacing(1) - $nhsuk-checkboxes-offset nhsuk-px-to-rem($nhsuk-checkboxes-offset);\n }\n\n // Hover state for small checkboxes.\n //\n // We use a hover state for small checkboxes because the touch target size\n // is so much larger than their visible size, and so we need to provide\n // feedback to the user as to which checkbox they will select when their\n // cursor is outside of the visible area.\n .nhsuk-checkboxes__input:not(:disabled):hover + .nhsuk-checkboxes__label::before,\n .nhsuk-checkboxes__input:not(:disabled) + .nhsuk-checkboxes__label:hover::before {\n // Forced colours modes tend to ignore box-shadow.\n // Apply an outline for those modes to use instead.\n outline: $nhsuk-focus-width dashed transparent;\n outline-offset: 1px;\n box-shadow: 0 0 0 $nhsuk-hover-width $nhsuk-hover-colour;\n }\n\n // Because we've overridden the border-shadow provided by the focus state,\n // we need to redefine that too.\n //\n // We use two box shadows, one that restores the original focus state [1]\n // and another that then applies the hover state [2].\n .nhsuk-checkboxes__input:focus:hover + .nhsuk-checkboxes__label::before,\n .nhsuk-checkboxes__input:focus + .nhsuk-checkboxes__label:hover::before {\n // prettier-ignore\n box-shadow:\n 0 0 0 $nhsuk-focus-width $nhsuk-focus-colour, // 1\n 0 0 0 $nhsuk-hover-width $nhsuk-hover-colour; // 2\n\n // Set different HCM colour when we have both hover/focus applied at once\n @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n outline-color: Highlight;\n }\n }\n\n // For devices that explicitly don't support hover, don't provide a hover\n // state (e.g. on touch devices like iOS).\n //\n // We can't use `@media (hover: hover)` because we wouldn't get the hover\n // state in browsers that don't support `@media (hover)` (like Internet\n // Explorer) – so we have to 'undo' the hover state instead.\n @media (hover: none), (pointer: coarse) {\n .nhsuk-checkboxes__input:not(:disabled):hover + .nhsuk-checkboxes__label::before,\n .nhsuk-checkboxes__input:not(:disabled) + .nhsuk-checkboxes__label:hover::before {\n box-shadow: initial;\n }\n\n .nhsuk-checkboxes__input:focus:hover + .nhsuk-checkboxes__label::before,\n .nhsuk-checkboxes__input:focus + .nhsuk-checkboxes__label:hover::before {\n box-shadow: 0 0 0 $nhsuk-focus-width $nhsuk-focus-colour;\n }\n }\n }\n}\n","@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n@forward \"../../core/objects/input-wrapper\";\n@forward \"../error-message\";\n@forward \"../hint\";\n@forward \"../label\";\n\n////\n/// Input component\n///\n/// @group components/input\n////\n\n@include nhsuk-exports(\"nhsuk/components/input\") {\n .nhsuk-input {\n box-sizing: border-box;\n\n width: 100%;\n height: nhsuk-px-to-rem(40px);\n margin-top: 0;\n padding: nhsuk-px-to-rem(nhsuk-spacing(1));\n // Setting any background-color makes text invisible when changing colours\n // to dark backgrounds in Firefox (https://bugzil.la/1335476). As\n // background-color and color need to always be set together, color should\n // not be set either\n border: $nhsuk-border-width-form-element solid $nhsuk-input-border-colour;\n border-radius: 0;\n\n // Disable inner shadow and remove rounded corners\n appearance: none;\n\n @include nhsuk-font($size: 19);\n\n // Increase left padding with prefix\n .nhsuk-input-wrapper:has(.nhsuk-input-wrapper__prefix) & {\n padding-left: nhsuk-px-to-rem(nhsuk-spacing(1) + $nhsuk-border-width-form-element);\n }\n\n // Increase right padding with suffix\n .nhsuk-input-wrapper:has(.nhsuk-input-wrapper__suffix) &:not([type=\"search\"]) {\n padding-right: nhsuk-px-to-rem(nhsuk-spacing(1) + $nhsuk-border-width-form-element);\n }\n\n &:focus {\n @include nhsuk-focused-input;\n }\n\n &:disabled {\n opacity: 0.5;\n color: inherit;\n background-color: transparent;\n cursor: not-allowed;\n }\n\n &::placeholder {\n opacity: 1; // Fixes low contrast of placeholder text in firefox\n color: nhsuk-colour(\"grey-1\");\n }\n\n // Hide input clear button (IE)\n &::-ms-clear {\n display: none;\n }\n }\n\n // Reset custom appearance\n .nhsuk-input[type=\"number\"],\n .nhsuk-input[type=\"search\"] {\n appearance: textfield;\n }\n\n // Hide input icons and buttons (Webkit, Blink)\n .nhsuk-input[type=\"number\"]::-webkit-inner-spin-button,\n .nhsuk-input[type=\"number\"]::-webkit-outer-spin-button,\n .nhsuk-input[type=\"search\"]::-webkit-search-decoration,\n .nhsuk-input[type=\"search\"]::-webkit-search-results-button,\n .nhsuk-input[type=\"search\"]::-webkit-search-results-decoration {\n display: none;\n }\n\n // Only hide cancel button when placeholder would be shown\n .nhsuk-input[type=\"search\"]:placeholder-shown::-webkit-search-cancel-button {\n display: none;\n }\n\n // Note: This is a non-standard CSS feature and will not do anything in Firefox\n // https://bugzilla.mozilla.org/show_bug.cgi?id=1417753\n .nhsuk-input[type=\"search\"]::-webkit-search-cancel-button {\n align-self: center;\n\n width: nhsuk-px-to-rem($nhsuk-icon-size);\n height: nhsuk-px-to-rem($nhsuk-icon-size);\n margin: 0;\n\n pointer-events: auto;\n\n opacity: 1;\n\n background: nhsuk-image-url(\"nhsuk-icon-cross.svg\") no-repeat;\n background-size: nhsuk-px-to-rem($nhsuk-icon-size) nhsuk-px-to-rem($nhsuk-icon-size);\n\n cursor: pointer;\n\n appearance: none;\n\n // Where possible use the cross as a mask instead. This lets us use\n // currentcolor, increasing the contrast of the image and matching the\n // user's prefered foreground colour in e.g. forced colors mode.\n // We test for `mask-position` rather than `mask-image` because of a false\n // positive in Edge 17.\n @supports (mask-position: initial) {\n background: currentcolor;\n mask: nhsuk-image-url(\"nhsuk-icon-cross.svg\") no-repeat;\n mask-size: nhsuk-px-to-rem($nhsuk-icon-size) nhsuk-px-to-rem($nhsuk-icon-size);\n\n // currentcolor doesn't seem to be computed correctly in forced colors\n // mode so force the background color to match the system link color\n // (matching the text in the link)\n @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n background: ButtonText;\n }\n }\n }\n\n .nhsuk-input--error {\n border-color: $nhsuk-error-colour;\n }\n\n // Large inputs\n\n .nhsuk-input--large {\n height: nhsuk-px-to-rem(48px);\n padding-right: nhsuk-px-to-rem(nhsuk-spacing(2));\n padding-left: nhsuk-px-to-rem(nhsuk-spacing(2));\n @include nhsuk-font($size: 22);\n\n // Increase left padding with prefix\n .nhsuk-input-wrapper:has(.nhsuk-input-wrapper__prefix) & {\n padding-left: nhsuk-px-to-rem(nhsuk-spacing(2) + $nhsuk-border-width-form-element);\n }\n\n // Increase right padding with suffix\n .nhsuk-input-wrapper:has(.nhsuk-input-wrapper__suffix) &:not([type=\"search\"]) {\n padding-right: nhsuk-px-to-rem(nhsuk-spacing(2) + $nhsuk-border-width-form-element);\n }\n\n @include nhsuk-media-query($from: tablet) {\n height: nhsuk-px-to-rem(60px);\n }\n }\n\n .nhsuk-input--large[type=\"search\"]::-webkit-search-cancel-button {\n width: nhsuk-px-to-rem($nhsuk-icon-size-large);\n height: nhsuk-px-to-rem($nhsuk-icon-size-large);\n background-size: nhsuk-px-to-rem($nhsuk-icon-size-large) nhsuk-px-to-rem($nhsuk-icon-size-large);\n\n @supports (mask-position: initial) {\n mask-size: nhsuk-px-to-rem($nhsuk-icon-size-large) nhsuk-px-to-rem($nhsuk-icon-size-large);\n }\n }\n\n // Codes and sequences\n\n .nhsuk-input--code {\n @include nhsuk-font-code;\n font-size-adjust: none;\n word-spacing: 0;\n }\n\n // The ex measurements are based on the number of W's that can fit inside the input\n // Extra space is left on the right hand side to allow for the Safari prefill icon\n // Linear regression estimation based on visual tests: y = 1.76 + 1.81x\n\n .nhsuk-input--width-30 {\n max-width: 56ex + 3ex;\n }\n\n .nhsuk-input--width-20 {\n max-width: 38ex + 3ex;\n }\n\n .nhsuk-input--width-10 {\n max-width: 20ex + 3ex;\n }\n\n .nhsuk-input--width-5 {\n max-width: 10.8ex;\n }\n\n .nhsuk-input--width-4 {\n max-width: 9ex;\n }\n\n .nhsuk-input--width-3 {\n max-width: 7.2ex;\n }\n\n .nhsuk-input--width-2 {\n max-width: 5.4ex;\n }\n\n .nhsuk-input-wrapper__prefix,\n .nhsuk-input-wrapper__suffix,\n // Deprecated, to be removed in v11.0\n .nhsuk-input__prefix,\n .nhsuk-input__suffix {\n box-sizing: border-box;\n\n // Use flexbox to align text within the prefix and suffix\n display: flex;\n\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n\n min-width: nhsuk-px-to-rem(40px);\n height: nhsuk-px-to-rem(40px);\n padding: nhsuk-px-to-rem(nhsuk-spacing(1)) nhsuk-px-to-rem(nhsuk-spacing(2));\n\n border: $nhsuk-border-width-form-element solid $nhsuk-input-border-colour;\n\n background-color: nhsuk-colour(\"grey-4\");\n\n text-align: center;\n white-space: nowrap;\n // Emphasise non-editable status of prefixes and suffixes\n cursor: default;\n\n @include nhsuk-font($size: 19);\n\n // Split prefix/suffix onto separate lines on narrow screens\n @include nhsuk-media-query($until: mobile) {\n display: block;\n height: 100%;\n white-space: normal;\n }\n }\n\n .nhsuk-input-wrapper--large .nhsuk-input-wrapper__prefix,\n .nhsuk-input-wrapper--large .nhsuk-input-wrapper__suffix {\n @include nhsuk-media-query($from: mobile) {\n height: nhsuk-px-to-rem(52px);\n padding-right: nhsuk-px-to-rem(nhsuk-spacing(3));\n padding-left: nhsuk-px-to-rem(nhsuk-spacing(3));\n @include nhsuk-font($size: 22);\n }\n\n @include nhsuk-media-query($from: tablet) {\n height: nhsuk-px-to-rem(56px + $nhsuk-button-shadow-size);\n }\n }\n\n .nhsuk-input-wrapper__prefix,\n // Deprecated, to be removed in v11.0\n .nhsuk-input__prefix {\n @include nhsuk-media-query($until: mobile) {\n border-bottom-width: 0;\n\n // Remove top margin when preceded by a prefix\n + .nhsuk-input {\n margin-top: 0;\n }\n }\n\n @include nhsuk-media-query($from: mobile) {\n margin-left: nhsuk-spacing(2);\n border-right-width: 0;\n\n &:first-child {\n margin-left: 0;\n }\n\n // Remove left margin when preceded by a prefix\n + .nhsuk-input {\n margin-left: 0;\n }\n }\n }\n\n // Split prefix/suffix onto separate lines on narrow screens\n .nhsuk-input-wrapper__suffix,\n // Deprecated, to be removed in v11.0\n .nhsuk-input__suffix {\n @include nhsuk-media-query($until: mobile) {\n border-top-width: 0;\n }\n\n @include nhsuk-media-query($from: mobile) {\n border-left-width: 0;\n }\n }\n}\n","@use \"sass:math\";\n@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n@forward \"../error-message\";\n@forward \"../fieldset\";\n@forward \"../hint\";\n@forward \"../label\";\n\n////\n/// Radios component\n///\n/// @group components/radios\n////\n\n$nhsuk-radios-size: nhsuk-px-to-rem(40px);\n$nhsuk-radios-small-size: nhsuk-px-to-rem(24px);\n\n$nhsuk-radios-label-padding-left-right: nhsuk-px-to-rem(12px);\n\n// When the default focus width is used on a curved edge it looks visually\n// smaller. So for the circular radios we bump the default to make it look\n// visually consistent.\n$nhsuk-radios-focus-width: nhsuk-px-to-rem($nhsuk-focus-width + 1px);\n\n// Offset 2px due to 40px form control with 44px clickable area\n// https://nhsuk.github.io/nhsuk-frontend/examples/form-alignment/\n$nhsuk-radios-offset: $nhsuk-border-width-form-element;\n\n@include nhsuk-exports(\"nhsuk/components/radios\") {\n $nhsuk-touch-target-gutter: nhsuk-px-to-rem(4px);\n $nhsuk-touch-target-size: $nhsuk-radios-size + $nhsuk-touch-target-gutter;\n\n .nhsuk-radios {\n margin: -$nhsuk-radios-offset nhsuk-px-to-rem(-$nhsuk-radios-offset);\n margin-right: 0;\n }\n\n .nhsuk-radios__item {\n display: flex;\n position: relative;\n flex-wrap: wrap;\n margin-top: nhsuk-spacing(2) - $nhsuk-radios-offset;\n\n .nhsuk-radios__conditional:not(.nhsuk-radios__conditional--hidden) + & {\n @include nhsuk-responsive-margin(4, \"top\", $adjustment: - $nhsuk-radios-offset);\n }\n }\n\n .nhsuk-radios__item:first-child {\n margin-top: 0;\n }\n\n .nhsuk-radios__input {\n // Allow the input to sit above the label, enabling its proper detection\n // when exploring by touch or using automation tools like Selenium\n z-index: 1;\n\n width: $nhsuk-touch-target-size;\n height: $nhsuk-touch-target-size;\n margin: 0;\n\n opacity: 0;\n\n cursor: pointer;\n }\n\n .nhsuk-radios__label {\n box-sizing: border-box;\n\n align-self: center;\n\n // Ensure that the width of the label is never more than the width of the\n // container minus the input. This prevents the label from wrapping due to\n // __item using flex-wrap because we want hints on a separate line\n max-width: calc(100% - $nhsuk-touch-target-size);\n margin-bottom: 0;\n padding: (nhsuk-spacing(1) + $nhsuk-border-width-form-element) $nhsuk-radios-label-padding-left-right;\n\n cursor: pointer;\n // remove 300ms pause on mobile\n touch-action: manipulation;\n }\n\n // ( ) Radio ring\n .nhsuk-radios__label::before {\n content: \"\";\n\n box-sizing: border-box;\n\n position: absolute;\n top: math.div($nhsuk-touch-target-gutter, 2);\n left: math.div($nhsuk-touch-target-gutter, 2);\n\n width: $nhsuk-radios-size;\n height: $nhsuk-radios-size;\n\n border: $nhsuk-border-width-form-element solid $nhsuk-input-border-colour;\n border-radius: 50%;\n\n background: $nhsuk-input-background-colour;\n }\n\n // • Radio button\n //\n // We create the 'button' entirely out of 'border' so that they remain\n // 'filled' even when colours are overridden in the browser.\n .nhsuk-radios__label::after {\n $radio-button-size: nhsuk-px-to-rem(10px);\n\n content: \"\";\n\n position: absolute;\n\n // Positioned by getting half the touch target, so we have the centre of the\n // input, and then moving back by the button's border width, thus positioning\n // the centre of the button in the centre of the input.\n top: math.div($nhsuk-touch-target-size, 2) - $radio-button-size;\n left: math.div($nhsuk-touch-target-size, 2) - $radio-button-size;\n\n width: 0;\n height: 0;\n\n border: $radio-button-size solid currentcolor;\n border-radius: 50%;\n\n opacity: 0;\n\n background: currentcolor;\n }\n\n .nhsuk-radios__hint {\n display: block;\n width: 100%;\n margin-top: nhsuk-spacing(-1);\n padding-right: $nhsuk-radios-label-padding-left-right;\n padding-left: $nhsuk-radios-label-padding-left-right + $nhsuk-touch-target-size;\n }\n\n // This is to bypass nhsuk-hint's specificity on hints following labels having\n // a margin bottom of 8px (nhsuk-spacing(2)). Because radios are flexbox,\n // the margin doesn't collapse so we have to do this manually.\n .nhsuk-label:not(.nhsuk-label--m):not(.nhsuk-label--l):not(.nhsuk-label--xl) + .nhsuk-radios__hint {\n margin-bottom: 0;\n }\n\n // Focused state\n .nhsuk-radios__input:focus + .nhsuk-radios__label::before {\n @include nhsuk-focused-radio($nhsuk-radios-focus-width);\n }\n\n // Selected state\n .nhsuk-radios__input:checked + .nhsuk-radios__label::after {\n opacity: 1;\n }\n\n // Disabled state\n .nhsuk-radios__input:disabled,\n .nhsuk-radios__input:disabled + .nhsuk-radios__label {\n cursor: not-allowed;\n }\n\n .nhsuk-radios__input:disabled + .nhsuk-radios__label,\n .nhsuk-radios__input:disabled ~ .nhsuk-hint {\n opacity: 0.5;\n }\n\n // =========================================================\n // Inline radios\n // =========================================================\n\n .nhsuk-radios--inline {\n @include nhsuk-media-query($from: tablet) {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-start;\n row-gap: nhsuk-spacing(2) - $nhsuk-radios-offset;\n\n &.nhsuk-radios--small {\n row-gap: 0;\n }\n\n .nhsuk-radios__item {\n max-width: calc(50% - $nhsuk-radios-label-padding-left-right - nhsuk-spacing(4));\n margin-top: 0;\n margin-right: nhsuk-spacing(4);\n }\n }\n }\n\n // =========================================================\n // Dividers ('or')\n // =========================================================\n\n .nhsuk-radios__divider {\n width: $nhsuk-radios-size;\n margin: nhsuk-spacing(2) - $nhsuk-radios-offset nhsuk-px-to-rem($nhsuk-radios-offset);\n text-align: center;\n @include nhsuk-text-colour;\n @include nhsuk-font($size: 19);\n }\n\n // =========================================================\n // Conditional reveals\n // =========================================================\n\n // Calculate the amount of padding needed to keep the border centered against\n // the radios.\n $conditional-border-padding: math.div($nhsuk-touch-target-size, 2) - nhsuk-px-to-rem($nhsuk-border-width-form-element);\n // Move the border centered with the radios\n $conditional-margin-left: $conditional-border-padding;\n // Move the contents of the conditional inline with the label\n $conditional-padding-left: $conditional-border-padding + $nhsuk-radios-label-padding-left-right;\n\n .nhsuk-radios__conditional {\n margin-top: nhsuk-spacing(2) - $nhsuk-radios-offset;\n margin-bottom: $nhsuk-radios-offset;\n margin-left: $conditional-margin-left;\n padding-left: $conditional-padding-left;\n border-left: nhsuk-px-to-rem($nhsuk-border-width) solid nhsuk-colour(\"grey-3\");\n\n .nhsuk-frontend-supported &--hidden {\n display: none;\n }\n }\n\n // =========================================================\n // Small radios\n // =========================================================\n\n .nhsuk-radios--small {\n $input-offset: math.div($nhsuk-touch-target-size - $nhsuk-radios-small-size, 2);\n\n .nhsuk-radios__item {\n margin-top: 0;\n }\n\n // Shift the touch target into the left margin so that the visible edge of\n // the control is aligned\n //\n // ┆Which colour is your favourite?\n // ┌┆───┐\n // │┆() │ Purple\n // └┆▲──┘\n // ▲┆└─ Radio pseudo element, aligned with margin\n // └─── Touch target (invisible input), shifted into the margin\n .nhsuk-radios__input {\n margin-left: $input-offset * -1;\n }\n\n .nhsuk-radios__label {\n max-width: calc(100% - $nhsuk-touch-target-size + $input-offset);\n\n // Create a tiny space between the small radio hover state so that it\n // doesn't clash with the label\n padding-left: $nhsuk-radios-label-padding-left-right - $input-offset;\n }\n\n // ( ) Radio ring\n //\n // Reduce the size of the control [1], vertically centering it within the\n // touch target [2]\n .nhsuk-radios__label::before {\n top: $input-offset; // 2\n left: nhsuk-px-to-rem($nhsuk-radios-offset);\n width: $nhsuk-radios-small-size; // 1\n height: $nhsuk-radios-small-size; // 1\n }\n\n // • Radio button\n //\n // Reduce the size of the 'button' and center it within the ring\n .nhsuk-radios__label::after {\n $radio-button-size: nhsuk-px-to-rem(5px);\n\n // The same calculation as normal radio buttons but reduce the border width\n top: math.div($nhsuk-touch-target-size, 2) - $radio-button-size;\n left: (math.div($nhsuk-touch-target-size, 2) - $radio-button-size) - $input-offset +\n nhsuk-px-to-rem($nhsuk-radios-offset);\n border-width: $radio-button-size;\n }\n\n // Fix position of hint with small radios\n .nhsuk-radios__hint {\n padding-left: $nhsuk-touch-target-size + $nhsuk-radios-label-padding-left-right - ($input-offset * 2);\n }\n\n // Align conditional reveals with small radios\n .nhsuk-radios__conditional {\n margin-left: $conditional-border-padding - $input-offset + nhsuk-px-to-rem($nhsuk-radios-offset);\n padding-left: $conditional-border-padding + $nhsuk-radios-label-padding-left-right -\n $input-offset - nhsuk-px-to-rem($nhsuk-radios-offset);\n }\n\n .nhsuk-radios__divider {\n width: $nhsuk-radios-small-size;\n margin: nhsuk-spacing(1) - $nhsuk-radios-offset nhsuk-px-to-rem($nhsuk-radios-offset);\n }\n\n // Hover state for small radios.\n //\n // We use a hover state for small radios because the touch target size\n // is so much larger than their visible size, and so we need to provide\n // feedback to the user as to which radio they will select when their\n // cursor is outside of the visible area.\n .nhsuk-radios__input:not(:disabled):hover + .nhsuk-radios__label::before,\n .nhsuk-radios__input:not(:disabled) + .nhsuk-radios__label:hover::before {\n // Forced colours modes tend to ignore box-shadow.\n // Apply an outline for those modes to use instead.\n outline: $nhsuk-radios-focus-width dashed transparent;\n outline-offset: 1px;\n box-shadow: 0 0 0 $nhsuk-hover-width $nhsuk-hover-colour;\n }\n\n // Because we've overridden the border-shadow provided by the focus state,\n // we need to redefine that too.\n //\n // We use two box shadows, one that restores the original focus state [1]\n // and another that then applies the hover state [2].\n .nhsuk-radios__input:focus:hover + .nhsuk-radios__label::before,\n .nhsuk-radios__input:focus + .nhsuk-radios__label:hover::before {\n // prettier-ignore\n box-shadow:\n 0 0 0 $nhsuk-radios-focus-width $nhsuk-focus-colour, // 1\n 0 0 0 $nhsuk-hover-width $nhsuk-hover-colour; // 2\n\n // Set different HCM colour when we have both hover/focus applied at once\n @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n outline-color: Highlight;\n }\n }\n\n // For devices that explicitly don't support hover, don't provide a hover\n // state (e.g. on touch devices like iOS).\n //\n // We can't use `@media (hover: hover)` because we wouldn't get the hover\n // state in browsers that don't support `@media (hover)` (like Internet\n // Explorer) – so we have to 'undo' the hover state instead.\n @media (hover: none), (pointer: coarse) {\n .nhsuk-radios__input:not(:disabled):hover + .nhsuk-radios__label::before,\n .nhsuk-radios__input:not(:disabled) + .nhsuk-radios__label:hover::before {\n box-shadow: initial;\n }\n\n .nhsuk-radios__input:focus:hover + .nhsuk-radios__label::before,\n .nhsuk-radios__input:focus + .nhsuk-radios__label:hover::before {\n box-shadow: 0 0 0 $nhsuk-radios-focus-width $nhsuk-focus-colour;\n }\n }\n }\n}\n","@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n@forward \"../../core/objects/input-wrapper\";\n@forward \"../error-message\";\n@forward \"../hint\";\n@forward \"../label\";\n\n////\n/// Select component\n///\n/// @group components/select\n////\n\n@include nhsuk-exports(\"nhsuk/components/select\") {\n .nhsuk-select {\n box-sizing: border-box;\n\n min-width: 100%;\n max-width: 100%;\n height: nhsuk-px-to-rem(40px);\n padding: nhsuk-px-to-rem(nhsuk-spacing(1));\n\n border: $nhsuk-border-width-form-element solid $nhsuk-input-border-colour;\n\n // Default user agent colours for selects can have low contrast,\n // and may look disabled (https://github.com/alphagov/govuk-frontend/issues/2435)\n color: $nhsuk-text-colour;\n background-color: $nhsuk-input-background-colour;\n\n @include nhsuk-font($size: 19, $line-height: 1.25);\n\n &:focus {\n @include nhsuk-focused-input;\n }\n\n &:disabled {\n opacity: 0.5;\n color: inherit;\n cursor: not-allowed;\n }\n\n @include nhsuk-media-query($from: mobile) {\n // This min-width was chosen because:\n // - it makes the Select wider than it is tall (which is what users expect)\n // - 20ex + 3ex matches the 'length-10' variant of the input component\n min-width: 20ex + 3ex;\n }\n }\n\n .nhsuk-select option:active,\n .nhsuk-select option:checked,\n .nhsuk-select:focus::-ms-value {\n color: $nhsuk-reverse-text-colour;\n background-color: nhsuk-colour(\"blue\");\n }\n\n .nhsuk-select--error {\n border-color: $nhsuk-error-colour;\n }\n}\n","@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@forward \"../error-message\";\n@forward \"../hint\";\n@forward \"../label\";\n\n////\n/// Textarea component\n///\n/// @group components/textarea\n////\n\n@include nhsuk-exports(\"nhsuk/components/textarea\") {\n .nhsuk-textarea {\n box-sizing: border-box;\n\n display: block;\n\n width: 100%;\n min-height: nhsuk-px-to-rem(40px);\n padding: nhsuk-px-to-rem(nhsuk-spacing(1));\n\n resize: vertical;\n\n border: $nhsuk-border-width-form-element solid $nhsuk-input-border-colour;\n border-radius: 0;\n\n appearance: none;\n\n @include nhsuk-responsive-margin(5, \"bottom\");\n @include nhsuk-font($size: 19);\n\n &:focus {\n @include nhsuk-focused-input;\n }\n\n &:disabled {\n opacity: 0.5;\n color: inherit;\n background-color: transparent;\n cursor: not-allowed;\n }\n }\n\n .nhsuk-textarea--error {\n border-color: $nhsuk-error-colour;\n }\n}\n","@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@forward \"../error-message\";\n@forward \"../hint\";\n@forward \"../label\";\n@forward \"../textarea\";\n\n////\n/// Character count component\n///\n/// @group components/character-count\n////\n\n@include nhsuk-exports(\"nhsuk/components/character-count\") {\n .nhsuk-character-count {\n @include nhsuk-responsive-margin(5, \"bottom\");\n\n .nhsuk-form-group,\n .nhsuk-textarea {\n margin-bottom: 0;\n }\n\n // If the textarea enters the error state whilst the user is focused on it,\n // show the error state. This presents feedback to the user that the value\n // has become invalid without needing to see the counter.\n .nhsuk-textarea--error:focus {\n border-color: $nhsuk-error-colour;\n box-shadow: inset 0 0 0 $nhsuk-border-width-form-element $nhsuk-error-colour;\n }\n }\n\n .nhsuk-character-count__message,\n .nhsuk-character-count__status {\n margin-top: nhsuk-spacing(1);\n margin-bottom: 0;\n\n // Hide when no textarea description is provided, during initialisation,\n // or when optionally hidden until the configured threshold is reached\n &[hidden],\n .nhsuk-frontend-supported & {\n display: none;\n }\n\n // Show when initialisation is complete (unless already hidden)\n .nhsuk-frontend-supported [data-nhsuk-character-count-init] &:not([hidden]) {\n display: block;\n }\n }\n\n // Deprecated, to be removed in v11.0\n .nhsuk-character-count__status--disabled,\n .nhsuk-character-count__message--disabled {\n display: none;\n }\n}\n","@use \"../../core/tools\" as *;\n@forward \"../error-message\";\n@forward \"../input\";\n@forward \"../hint\";\n@forward \"../label\";\n@forward \"../fieldset\";\n\n////\n/// Date input component\n///\n/// @group components/date-input\n////\n\n@include nhsuk-exports(\"nhsuk/components/date-input\") {\n .nhsuk-date-input {\n font-size: 0; // removes whitespace caused by inline-block\n @include nhsuk-clearfix;\n }\n\n .nhsuk-date-input__item {\n display: inline-block;\n margin-right: nhsuk-spacing(4);\n margin-bottom: 0;\n\n // Prevents an issue in iOS Safari 18 where the items vertically\n // shift when the value of inputs is changed.\n // https://github.com/alphagov/reported-bugs/issues/90\n vertical-align: bottom;\n }\n\n .nhsuk-date-input__label {\n display: block;\n }\n\n .nhsuk-date-input__input {\n margin-bottom: 0;\n }\n}\n","@use \"sass:color\";\n@use \"sass:math\";\n@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n@use \"../button\" as *;\n@forward \"../error-message\";\n@forward \"../hint\";\n@forward \"../label\";\n@forward \"../button\";\n\n@include nhsuk-exports(\"nhsuk/components/file-upload\") {\n $_button-border-colour: nhsuk-colour(\"grey-2\");\n\n .nhsuk-file-upload__input {\n max-width: 100%;\n margin-left: nhsuk-spacing(-1);\n padding: nhsuk-spacing(1);\n\n @include nhsuk-text-colour;\n @include nhsuk-font(19);\n\n // The default file upload button in Safari does not support setting a\n // custom font-size. Set `-webkit-appearance` to `button` to drop out of the\n // native appearance so the font-size is set to 19px\n // https://webkit.org/b/224746\n &::-webkit-file-upload-button {\n -webkit-appearance: button;\n color: inherit;\n font: inherit;\n }\n\n &:focus {\n // Adjust padding to account for focus border\n padding: 2px;\n\n @include nhsuk-focused-input;\n }\n\n // Set \"focus-within\" to fix https://bugzil.la/1430196 so that component\n // receives focus in Firefox.\n // This can't be set together with `:focus` as all versions of IE fail\n // to recognise `focus-within` and don't set any styles from the block\n // when it's a selector.\n &:focus-within {\n @include nhsuk-focused-input;\n }\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n }\n\n .nhsuk-file-upload__drop-zone {\n display: block;\n position: relative;\n z-index: 0;\n background-color: $nhsuk-body-background-colour;\n }\n\n // required because disabling pointer events\n // on the button means that the cursor style\n // be applied on the button itself\n .nhsuk-file-upload--disabled .nhsuk-file-upload__drop-zone,\n // Deprecated, to be removed in a future release\n .nhsuk-file-upload__drop-zone--disabled {\n cursor: not-allowed;\n }\n\n .nhsuk-file-upload__choose-files-button {\n flex-shrink: 0;\n width: auto;\n margin-right: calc($nhsuk-button-padding-left-right - nhsuk-spacing(1));\n margin-bottom: $nhsuk-button-shadow-size;\n\n @include nhsuk-media-query($from: tablet) {\n margin-right: $nhsuk-button-padding-left-right;\n }\n }\n\n .nhsuk-file-upload__drop-instruction {\n margin-top: nhsuk-spacing(2);\n margin-bottom: 0;\n text-align: left;\n }\n\n .nhsuk-file-upload__status {\n display: block;\n\n margin-bottom: nhsuk-spacing(3);\n padding: nhsuk-spacing(3);\n\n color: $nhsuk-reverse-text-colour;\n background-color: nhsuk-colour(\"grey-1\");\n\n text-align: left;\n\n @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n color: HighlightText;\n background-color: Highlight;\n forced-color-adjust: none;\n }\n\n .nhsuk-file-upload__drop-button--empty & {\n color: $nhsuk-text-colour;\n background-color: color.scale(nhsuk-colour(\"grey-4\"), $alpha: -50%);\n\n @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n color: CanvasText;\n background-color: HighlightText;\n }\n }\n }\n\n // bugs documented with button using flex\n // https://github.com/philipwalton/flexbugs#flexbug-9\n // so we need a container here\n .nhsuk-file-upload__drop-button-group {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n }\n\n .nhsuk-file-upload__drop-button {\n width: 100%;\n // align the padding to be same as notification banner and error summary accounting for the thicker borders\n padding: (nhsuk-spacing(3) + $nhsuk-border-width - $nhsuk-border-width-form-element);\n\n border: $nhsuk-border-width-form-element solid $_button-border-colour;\n\n color: $nhsuk-text-colour;\n background-color: nhsuk-colour(\"white\");\n\n cursor: pointer;\n\n @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n color: CanvasText;\n background-color: Canvas;\n }\n\n @include nhsuk-media-query($from: tablet) {\n padding: (nhsuk-spacing(4) + $nhsuk-border-width - $nhsuk-border-width-form-element);\n }\n }\n\n .nhsuk-file-upload__drop-button:not(:disabled) {\n &:hover {\n background-color: nhsuk-colour(\"white\");\n\n .nhsuk-button {\n background-color: $nhsuk-button-hover-colour;\n }\n\n .nhsuk-button--secondary,\n .nhsuk-button--secondary-solid {\n background-color: $nhsuk-secondary-button-hover-colour;\n }\n }\n\n &:active,\n &:focus {\n // Double the border by adding its width again. Use `box-shadow` for this\n // instead of changing `border-width` - this is for consistency with\n // components such as textarea where we avoid changing `border-width` as\n // it will change the element size. Also, `outline` cannot be utilised\n // here as it is already used for the yellow focus state.\n border: $nhsuk-border-width-form-element solid nhsuk-colour(\"black\");\n outline: $nhsuk-focus-width solid $nhsuk-focus-colour;\n // Ensure outline appears outside of the element\n outline-offset: 0;\n box-shadow: inset 0 0 0 $nhsuk-border-width-form-element;\n\n // Remove the pseudo element shadow when parent button focused or pressed\n .nhsuk-file-upload__choose-files-button::after {\n box-shadow: none;\n }\n }\n\n &:active {\n .nhsuk-file-upload__choose-files-button {\n top: $nhsuk-border-width;\n box-shadow: none;\n\n &::before {\n bottom: -$nhsuk-border-width-form-element;\n }\n }\n\n .nhsuk-button {\n background-color: $nhsuk-button-active-colour;\n }\n\n .nhsuk-button--secondary,\n .nhsuk-button--secondary-solid {\n background-color: $nhsuk-secondary-button-active-colour;\n }\n }\n\n &:focus:not(:active),\n &:focus:not(:active):hover {\n .nhsuk-file-upload__choose-files-button {\n @include nhsuk-focused-button;\n\n &::before {\n border-color: transparent;\n }\n }\n }\n }\n\n .nhsuk-file-upload__drop-button--empty {\n border-style: dashed;\n background-color: $nhsuk-body-background-colour;\n }\n\n .nhsuk-file-upload__drop-button--empty:not(:disabled) {\n &:hover,\n &:focus,\n &:active {\n background-color: nhsuk-colour(\"white\");\n }\n\n &:hover {\n .nhsuk-button {\n background-color: $nhsuk-button-hover-colour;\n }\n\n .nhsuk-button--secondary,\n .nhsuk-button--secondary-solid {\n background-color: $nhsuk-secondary-button-hover-colour;\n }\n }\n\n &:active {\n .nhsuk-file-upload__choose-files-button {\n top: $nhsuk-border-width;\n box-shadow: none;\n\n &::before {\n bottom: -$nhsuk-border-width-form-element;\n }\n }\n\n .nhsuk-button {\n background-color: $nhsuk-button-active-colour;\n }\n\n .nhsuk-button--secondary,\n .nhsuk-button--secondary-solid {\n background-color: $nhsuk-secondary-button-active-colour;\n }\n }\n }\n\n .nhsuk-file-upload__drop-button:not(:disabled),\n .nhsuk-file-upload__drop-button--empty:not(:disabled) {\n @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n &:hover,\n &:active {\n color: CanvasText;\n background-color: Canvas;\n\n .nhsuk-button {\n color: Highlight;\n background-color: ButtonFace;\n\n &,\n &::before {\n border-color: Highlight;\n }\n }\n }\n }\n }\n\n .nhsuk-file-upload__drop-button--dragging {\n border-style: solid;\n background-color: nhsuk-colour(\"white\");\n }\n\n .nhsuk-file-upload__drop-button:disabled {\n pointer-events: none;\n opacity: 0.5;\n }\n}\n","@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n@forward \"../button\";\n@forward \"../input\";\n\n////\n/// Password input component\n///\n/// @group components/password-input\n////\n\n@include nhsuk-exports(\"nhsuk/components/password-input\") {\n .nhsuk-password-input__input {\n // IE 11 and Microsoft Edge comes with its own password reveal function. We\n // want to hide it, so that there aren't two controls presented to the user\n // that do the same thing but aren't in sync with one another. This doesn't\n // affect the function that allows Edge users to toggle password visibility\n // by pressing Alt+F8, which cannot be programmatically disabled.\n &::-ms-reveal {\n display: none;\n }\n }\n\n .nhsuk-password-input__toggle {\n // Hide the button by default, JS removes this attribute\n &[hidden] {\n display: none;\n }\n\n @include nhsuk-media-query($from: mobile) {\n flex-basis: 5em;\n }\n }\n}\n","@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n@use \"../button\" as *;\n@forward \"../../core/styles/icons\";\n@forward \"../button\";\n@forward \"../input\";\n\n////\n/// Search input component\n///\n/// @group components/search-input\n////\n\n@include nhsuk-exports(\"nhsuk/components/search-input\") {\n .nhsuk-search-input__wrapper {\n flex-direction: row;\n align-items: flex-start;\n\n // Remove unnecessary margin\n .nhsuk-search-input__button {\n margin-left: 0;\n }\n\n @include nhsuk-media-query($until: mobile) {\n // Override input wrapper prefix and suffix to stay inline\n .nhsuk-input-wrapper__prefix,\n .nhsuk-input-wrapper__suffix {\n display: flex;\n height: nhsuk-px-to-rem(40px);\n white-space: normal;\n }\n\n // Override input wrapper prefix border removal\n .nhsuk-input-wrapper__prefix {\n margin-left: nhsuk-spacing(2);\n border-right-width: 0;\n border-bottom-width: $nhsuk-border-width-form-element;\n\n &:first-child {\n margin-left: 0;\n }\n\n // Remove left margin when preceded by a prefix\n & + .nhsuk-input {\n margin-left: 0;\n }\n }\n\n // Override input wrapper suffix border removal\n .nhsuk-input-wrapper__suffix {\n border-top-width: $nhsuk-border-width-form-element;\n border-left-width: 0;\n }\n\n // Duplicate input wrapper margins to apply them below mobile width\n .nhsuk-input,\n .nhsuk-select,\n .nhsuk-button {\n margin-top: 0;\n margin-left: nhsuk-spacing(2);\n\n &:first-child {\n margin-left: 0;\n }\n }\n\n // Duplicate input wrapper button styles to apply them below mobile width\n .nhsuk-button {\n flex-shrink: 0;\n width: auto;\n }\n\n // Remove unnecessary margin\n .nhsuk-search-input__button {\n margin-left: 0;\n }\n }\n }\n\n .nhsuk-search-input__input {\n // Hide border when adjacent to button\n margin-right: -$nhsuk-border-width-form-element;\n\n // But reveal border when adjacent to a suffix\n & + .nhsuk-input-wrapper__suffix {\n margin-right: -$nhsuk-border-width-form-element;\n margin-left: $nhsuk-border-width-form-element;\n }\n }\n\n .nhsuk-search-input__button {\n height: nhsuk-px-to-rem(32px + $nhsuk-button-shadow-size);\n\n .nhsuk-input--large ~ & {\n height: nhsuk-px-to-rem(40px + $nhsuk-button-shadow-size);\n }\n\n // Prevent height change when pressed\n &:active,\n &:active:focus {\n top: 0;\n height: nhsuk-px-to-rem(36px + $nhsuk-button-shadow-size);\n margin-bottom: 0;\n // stylelint-disable-next-line declaration-no-important\n box-shadow: none !important;\n\n .nhsuk-input--large ~ & {\n height: nhsuk-px-to-rem(48px);\n }\n }\n\n // Remove border radius from left side\n &,\n &::before,\n &::after {\n border-radius: 0 nhsuk-px-to-rem($nhsuk-border-radius) nhsuk-px-to-rem($nhsuk-border-radius) 0;\n }\n\n // Remove inner box shadow from left side\n &:not(:focus)::after {\n left: -2px;\n }\n\n @include nhsuk-media-query($from: tablet) {\n // Prevent height change when pressed\n .nhsuk-input--large ~ &:active,\n .nhsuk-input--large ~ &:active:focus {\n height: nhsuk-px-to-rem(60px);\n }\n }\n }\n}\n","@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","@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 @include nhsuk-font-weight-bold;\n @include nhsuk-responsive-margin(4, \"bottom\");\n }\n }\n\n // Use a feature query to style the 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 element (Edge 16 - 18)\n // - do not support ES6 modules or the 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 text-decoration: none;\n cursor: pointer;\n\n @include nhsuk-link-style-focus;\n @include nhsuk-top-and-bottom;\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\n // Style the arrow and summary text to look like a link...\n .nhsuk-details__summary::before,\n .nhsuk-details__summary-text {\n color: $nhsuk-link-colour;\n }\n\n // ...but only underline the text, not the arrow\n .nhsuk-details__summary-text {\n text-decoration: underline; // [3]\n @include nhsuk-responsive-margin(3, \"bottom\");\n }\n\n .nhsuk-details__summary-text:only-child {\n margin-bottom: 0;\n }\n\n .nhsuk-details__summary:hover,\n .nhsuk-details__summary:focus {\n & .nhsuk-details__summary-text {\n text-decoration: none;\n }\n }\n\n .nhsuk-details__summary:hover {\n &::before,\n & .nhsuk-details__summary-text {\n color: $nhsuk-link-hover-colour;\n }\n }\n\n .nhsuk-details__summary:active {\n &::before,\n & .nhsuk-details__summary-text {\n color: $nhsuk-link-active-colour;\n }\n }\n\n .nhsuk-details__summary:focus {\n &::before,\n & .nhsuk-details__summary-text {\n color: $nhsuk-focus-text-colour;\n }\n }\n\n .nhsuk-details--reverse .nhsuk-details__summary:not(:focus),\n .nhsuk-details--reverse .nhsuk-details__summary:not(:focus):hover {\n &::before,\n & .nhsuk-details__summary-text {\n color: $nhsuk-reverse-text-colour;\n }\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 @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n .nhsuk-details__summary,\n .nhsuk-details__summary:hover {\n &::before,\n & .nhsuk-details__summary-text {\n color: LinkText;\n }\n }\n\n .nhsuk-details__summary:active {\n &::before,\n & .nhsuk-details__summary-text {\n color: ActiveText;\n }\n }\n\n .nhsuk-details__summary:focus,\n .nhsuk-details--reverse .nhsuk-details__summary:not(:focus),\n .nhsuk-details--reverse .nhsuk-details__summary:not(:focus):hover {\n &::before,\n & .nhsuk-details__summary-text {\n color: LinkText;\n }\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 @include nhsuk-font(26, $weight: bold);\n @include nhsuk-responsive-margin(4, \"bottom\");\n }\n }\n\n // Use a feature query to style the 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 outline: none;\n box-shadow: none;\n }\n\n .nhsuk-details__summary-text {\n display: inline-block;\n position: relative;\n padding: nhsuk-spacing(1);\n padding-left: $nhsuk-expander-icon-size + nhsuk-spacing(2);\n cursor: pointer;\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: ButtonText;\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\n width: nhsuk-px-to-rem($nhsuk-expander-icon-size);\n height: nhsuk-px-to-rem($nhsuk-expander-icon-size);\n\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 background-color: currentcolor;\n\n forced-color-adjust: none;\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 @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n .nhsuk-details__summary:not(:focus):not(:hover):not(:active) .nhsuk-details__summary-text::before {\n background-color: ButtonText;\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","@use \"sass:math\";\n@use \"../settings\" as *;\n@use \"../tools/functions\" as *;\n\n////\n/// Shape arrow\n///\n/// @group tools\n////\n\n/// Calculate the height of an equilateral triangle\n/// Multiplying half the length of the base of an equilateral triangle by the\n/// square root of three gives us its height. We use 1.732 as an approximation.\n///\n/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)\n///\n/// @param {Number} $base - Length of the base of the triangle\n/// @return {Number} Calculated height of the triangle\n///\n/// @access private\n\n@function _nhsuk-equilateral-height($base) {\n $square-root-of-three: 1.732;\n\n @return math.div($base, 2) * $square-root-of-three;\n}\n\n/// Arrow mixin\n///\n/// Generate Arrows (triangles) by using a mix of transparent (1) and coloured\n/// borders. The coloured borders inherit the text colour of the element (2).\n///\n/// Ensure the arrow is rendered correctly if browser colours are overridden by\n/// providing a clip path (3). Without this the transparent borders are\n/// overridden to become visible which results in a square.\n///\n/// We need both because older browsers do not support clip-path.\n///\n/// @param {String} $direction - Direction for arrow: up, right, down, left.\n/// @param {Number} $base - Length of the triangle 'base' side\n/// @param {Number} $height [null] - Height of triangle. Omit for equilateral.\n/// @param {String} $display [block] - CSS display property of the arrow\n///\n/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)\n\n@mixin nhsuk-shape-arrow($direction, $base, $height: null, $display: block) {\n display: $display;\n width: 0;\n height: 0;\n border-style: solid;\n border-color: transparent; // 1\n\n $base: nhsuk-px-to-rem($base);\n $perpendicular: math.div($base, 2);\n\n @if not $height {\n $height: _nhsuk-equilateral-height($base);\n }\n\n @if $direction == \"up\" {\n clip-path: polygon(50% 0%, 0% 100%, 100% 100%); // 3\n border-width: 0 $perpendicular $height;\n border-bottom-color: inherit; // 2\n } @else if $direction == \"right\" {\n clip-path: polygon(0% 0%, 100% 50%, 0% 100%); // 3\n border-width: $perpendicular 0 $perpendicular $height;\n border-left-color: inherit; // 2\n } @else if $direction == \"down\" {\n clip-path: polygon(0% 0%, 50% 100%, 100% 0%); // 3\n border-width: $height $perpendicular 0 $perpendicular;\n border-top-color: inherit; // 2\n } @else if $direction == \"left\" {\n clip-path: polygon(0% 50%, 100% 100%, 100% 0%); // 3\n border-width: $perpendicular $height $perpendicular 0;\n border-right-color: inherit; // 2\n } @else {\n @error \"Invalid arrow direction: expected `up`, `right`, `down` or `left`, got `#{$direction}`\";\n }\n}\n","@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n@forward \"../../core/styles/icons\";\n@forward \"../../core/styles/lists\";\n\n////\n/// Do and Don't list component\n///\n/// Do and Don't lists help users understand more easily what they should\n/// and shouldn't do.\n///\n/// @group components/do-dont-list\n////\n\n@include nhsuk-exports(\"nhsuk/components/do-dont-list\") {\n // Deprecated, to be removed in v11.0\n .nhsuk-do-dont-list {\n @include nhsuk-panel-with-label($nhsuk-card-background-colour, $nhsuk-text-colour, $nhsuk-border-colour);\n }\n\n // Deprecated, to be removed in v11.0\n .nhsuk-do-dont-list__label {\n @include nhsuk-heading-label($nhsuk-brand-colour, $nhsuk-reverse-text-colour);\n @include nhsuk-print-colour;\n }\n\n .nhsuk-list--cross .nhsuk-icon--cross,\n // Deprecated, to be removed in v11.0\n .nhsuk-list--cross .nhsuk-icon__cross {\n fill: nhsuk-colour(\"red\");\n }\n\n .nhsuk-list--tick .nhsuk-icon--tick,\n // Deprecated, to be removed in v11.0\n .nhsuk-list--tick .nhsuk-icon__tick {\n fill: nhsuk-colour(\"green\");\n }\n}\n","@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n\n////\n/// Hero component\n///\n/// 1. Position relative to support the description\n/// appearing over the image.\n/// 2. Adds a border between the header and hero, if required\n///\n/// @group components/hero\n///\n\n@include nhsuk-exports(\"nhsuk/components/hero\") {\n .nhsuk-hero {\n box-sizing: border-box;\n position: relative; // [1]\n color: $nhsuk-reverse-text-colour;\n background-color: $nhsuk-brand-colour;\n\n @include nhsuk-print-colour;\n\n .nhsuk-link,\n a:not(.nhsuk-button) {\n @include nhsuk-link-style-reverse;\n }\n\n .nhsuk-hero--border {\n // [2]\n border-top: $nhsuk-hero-border solid $nhsuk-reverse-border-colour;\n }\n }\n\n .nhsuk-hero__wrapper {\n @include nhsuk-responsive-padding(8, top);\n @include nhsuk-responsive-padding(8, bottom);\n }\n\n .nhsuk-hero__heading {\n @include nhsuk-responsive-margin(3, bottom);\n }\n\n // Hero component image styles\n //\n // 3. Center the background image.\n // 4. Stop the height affecting print stylesheets.\n // 5. Show more of the image for larger screen sizes\n // 6. Overlay must be min same height as .nhsuk-hero--image to cover the image.\n // 7. Darken the background image with an overlay.\n // 12. Remove any heights/min heights in Windows high contrast mode.\n\n .nhsuk-hero--image {\n background-repeat: no-repeat;\n background-position: center right; // [3]\n background-size: cover;\n\n @media only screen {\n // [4]\n min-height: nhsuk-px-to-rem(200px);\n }\n\n @include nhsuk-media-query($from: tablet) {\n @media only screen {\n // [4]\n min-height: nhsuk-px-to-rem(320px); // [5]\n\n .nhsuk-hero__overlay {\n height: nhsuk-px-to-rem(320px); // [6]\n }\n }\n }\n\n @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n min-height: 0; // [12]\n }\n\n .nhsuk-hero__overlay {\n background-color: rgba(nhsuk-shade($nhsuk-brand-colour, 50%), 0.1); // [7]\n\n @media only screen {\n // [4]\n min-height: nhsuk-px-to-rem(200px); // [6]\n }\n\n @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n height: auto; // [12]\n min-height: 0; // [12]\n }\n }\n }\n\n // Hero component description styles.\n //\n // 8. 'Random number' for the triangle.\n // 9. 'Random number' for the triangle positioning.\n // 10. Needed to enable the triangle to show correctly in high contrast mode.\n // 11. Give the description box a max width.\n // 13. Remove the arrow in Windows high contrast mode.\n // 14. Reduce spacing and change positioning for Windows high contrast mode.\n // 15. Prevent text breaking out of box on smaller sizes\n // 16. Prevent overlap using safe area: box offset + arrow height + spacing\n\n .nhsuk-hero--image-description {\n margin-bottom: nhsuk-px-to-rem(70px + 20px + nhsuk-spacing(3)); // [16]\n\n @include nhsuk-media-query($from: tablet) {\n margin-bottom: nhsuk-px-to-rem(48px + 20px + nhsuk-spacing(4)); // [16]\n }\n\n .nhsuk-hero-content {\n position: relative;\n top: nhsuk-px-to-rem(70px);\n\n margin-bottom: nhsuk-px-to-rem(24px);\n padding: nhsuk-spacing(4);\n\n color: $nhsuk-reverse-text-colour;\n background-color: $nhsuk-brand-colour;\n\n .nhsuk-hero__arrow {\n display: block;\n\n position: absolute;\n bottom: nhsuk-px-to-rem(-10px); // [8]\n left: nhsuk-px-to-rem(32px); // [9]\n\n width: nhsuk-px-to-rem(20px); // [8]\n height: nhsuk-px-to-rem(20px); // [8]\n\n overflow: hidden;\n\n transform: rotate(45deg);\n @include nhsuk-print-hide;\n }\n\n .nhsuk-hero__arrow::before,\n .nhsuk-hero__arrow::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); // [10]\n\n border: solid nhsuk-px-to-rem(32px) $nhsuk-brand-colour; // [8]\n }\n\n @include nhsuk-print-colour {\n max-width: 100%;\n padding: 0;\n }\n }\n\n @include nhsuk-media-query(375px) {\n .nhsuk-hero-content {\n width: 85%; // [15]\n }\n }\n\n @include nhsuk-media-query($from: tablet) {\n .nhsuk-hero-content {\n box-sizing: border-box;\n\n position: absolute;\n top: auto;\n bottom: nhsuk-px-to-rem(-48px); // [8]\n\n max-width: nhsuk-em(560); // [11]\n margin-bottom: 0;\n padding: nhsuk-spacing(5) nhsuk-spacing(6);\n\n @include nhsuk-top-and-bottom;\n }\n\n .nhsuk-hero__arrow {\n left: nhsuk-px-to-rem(46px); // [9]\n }\n }\n\n @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n .nhsuk-hero-content {\n position: relative;\n top: 0;\n // [14]\n bottom: 0;\n\n min-height: 0;\n margin-bottom: 0;\n padding: nhsuk-spacing(5) 0 0;\n }\n\n .nhsuk-hero__arrow {\n display: none; // [13]\n }\n }\n }\n}\n","@use \"sass:math\";\n@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n\n////\n/// Images component\n///\n/// 1. Overrides default browser margin values.\n/// 2. Makes the image width two thirds of its container for desktop.\n/// 3. Avoid image printing full width of a page.\n/// 4. Removes top margin from subsequent nhsuk-image.\n///\n/// @group components/images\n////\n\n@include nhsuk-exports(\"nhsuk/components/images\") {\n .nhsuk-image {\n box-sizing: border-box;\n margin-right: 0; // [1]\n margin-left: 0; // [1]\n border-bottom: 1px solid $nhsuk-border-colour;\n background-color: $nhsuk-card-background-colour;\n\n @include nhsuk-responsive-margin(6, \"bottom\");\n @include nhsuk-responsive-margin(6, \"top\");\n\n @include nhsuk-media-query($from: desktop) {\n width: math.percentage(math.div(2, 3)); // [2]\n }\n\n @include nhsuk-media-query($media-type: print) {\n width: math.percentage(math.div(1, 2)); // [3]\n }\n\n & + .nhsuk-image {\n @include nhsuk-responsive-margin(0, \"top\"); // [4]\n }\n }\n\n .nhsuk-image__img {\n display: block;\n width: 100%;\n }\n\n .nhsuk-image__caption {\n padding: nhsuk-spacing(3);\n\n @include nhsuk-font-size(16);\n }\n}\n","@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n\n////\n/// Inset text component\n///\n/// 1. Removes top margin from first element and bottom margin from last,\n/// to ensure correct spacing within the component.\n/// 2. Restricts the width of the text to optimise the line length for\n/// readability.\n///\n/// @group components/inset-text\n////\n\n@include nhsuk-exports(\"nhsuk/components/inset-text\") {\n .nhsuk-inset-text {\n box-sizing: border-box;\n border-left: $nhsuk-border-width-inset-text solid $nhsuk-brand-colour;\n\n @include nhsuk-reading-width; // [2]\n @include nhsuk-top-and-bottom; // [1]\n\n @include nhsuk-responsive-margin(7, \"bottom\");\n @include nhsuk-responsive-margin(7, \"top\");\n @include nhsuk-responsive-padding(4);\n\n @include nhsuk-media-query($media-type: print) {\n border-color: $nhsuk-print-text-colour;\n }\n }\n}\n","@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n\n////\n/// Notification banner component\n///\n/// @group components/notification-banner\n////\n\n@include nhsuk-exports(\"nhsuk/components/notification-banner\") {\n .nhsuk-notification-banner {\n box-sizing: border-box;\n border: $nhsuk-border-width solid $nhsuk-brand-colour;\n\n @include nhsuk-font($size: 19);\n @include nhsuk-responsive-margin(8, \"bottom\");\n\n &:focus {\n outline: $nhsuk-focus-width solid $nhsuk-focus-colour;\n }\n }\n\n .nhsuk-notification-banner__header {\n padding: 2px nhsuk-spacing(3) nhsuk-spacing(1);\n\n // Ensures the notification header appears separate to the notification body\n // text in high contrast mode\n border-bottom: 1px solid transparent;\n background-color: $nhsuk-brand-colour;\n\n @include nhsuk-media-query($from: tablet) {\n padding: 2px nhsuk-spacing(4) nhsuk-spacing(1);\n }\n }\n\n .nhsuk-notification-banner__title {\n margin: 0;\n padding: 0;\n color: $nhsuk-reverse-text-colour;\n\n // Set the size again because this element is a heading and the user agent\n // font size overrides the inherited font size\n @include nhsuk-font($size: 19, $weight: bold);\n }\n\n .nhsuk-notification-banner__content {\n $padding-tablet: nhsuk-spacing(4);\n padding: nhsuk-spacing(3);\n\n @include nhsuk-text-colour;\n @include nhsuk-media-query($from: tablet) {\n padding: $padding-tablet;\n }\n\n // Wrap content at the same place that a 2/3 grid column ends, to maintain\n // shorter line-lengths when the notification banner is full width\n > * {\n // When elements have their own padding (like lists), include the padding\n // in the max-width calculation\n box-sizing: border-box;\n\n // Calculate the internal width of a two-thirds column...\n $two-col-width: calc($nhsuk-page-width * 2 / 3) - calc($nhsuk-gutter * 1 / 3);\n\n // ...and then factor in the left border and padding\n $banner-exterior: ($padding-tablet + $nhsuk-border-width);\n max-width: $two-col-width - $banner-exterior;\n }\n\n > :last-child {\n margin-bottom: 0;\n }\n }\n\n .nhsuk-notification-banner__heading {\n margin: 0 0 nhsuk-spacing(3);\n padding: 0;\n\n @include nhsuk-font($size: 26, $weight: bold);\n }\n\n .nhsuk-notification-banner__link {\n @include nhsuk-link-style-no-visited-state;\n }\n\n .nhsuk-notification-banner--success {\n border-color: $nhsuk-success-colour;\n\n .nhsuk-notification-banner__header {\n background-color: $nhsuk-success-colour;\n }\n\n .nhsuk-notification-banner__link {\n @include nhsuk-link-style-success;\n }\n }\n}\n","@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n\n////\n/// Panel component\n///\n/// 1. Adds a transparent border for high contrast modes\n/// 2. This subtracts the transparent border width from the padding (because the border\n/// visually adds to the total padding)\n/// 3. This is an if-all-else-fails attempt to stop long words from overflowing the container\n/// on very narrow viewports by forcing them to break and wrap instead. This\n/// overflowing is more likely to happen when user increases text size on a mobile eg. using\n/// iOS Safari text resize controls.\n\n/// The overflowing is a particular problem with the panel component since it uses white\n/// text: when the text overflows the container, it is invisible on the white (page)\n/// background. When the text in our other components overflow, the user might have to scroll\n/// horizontally to view it but the text remains legible.\n///\n/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)\n///\n/// @group components/panel\n////\n\n$nhsuk-panel-border-width: nhsuk-spacing(1);\n\n// @deprecated To be removed in v11.0\n$nhsuk-border-width-panel: $nhsuk-panel-border-width;\n\n@include nhsuk-exports(\"nhsuk/components/panel\") {\n .nhsuk-panel {\n box-sizing: border-box;\n padding: nhsuk-spacing(5) - $nhsuk-panel-border-width; /* [2] */\n border: $nhsuk-panel-border-width solid transparent; /* [1] */\n color: $nhsuk-reverse-text-colour;\n background: $nhsuk-success-colour;\n\n @include nhsuk-font-size(26);\n @include nhsuk-responsive-margin(4, \"bottom\");\n\n // Links within the panel should use white text\n .nhsuk-link,\n a:not(.nhsuk-button) {\n @include nhsuk-link-style-reverse;\n }\n\n @include nhsuk-media-query($until: tablet) {\n padding: nhsuk-spacing(4) - $nhsuk-panel-border-width; /* [2] */\n @include nhsuk-text-break-word; /* [3] */\n }\n\n @include nhsuk-print-colour {\n border-color: currentcolor;\n background: none;\n }\n }\n\n .nhsuk-panel--interruption {\n background-color: $nhsuk-brand-colour;\n }\n\n .nhsuk-panel__title {\n margin-top: 0;\n }\n\n .nhsuk-panel__title,\n .nhsuk-panel__title--xl {\n @include nhsuk-font-size(48);\n @include nhsuk-responsive-margin(5, \"bottom\");\n }\n\n .nhsuk-panel__title--l {\n @include nhsuk-font-size(36);\n @include nhsuk-responsive-margin(3, \"bottom\");\n }\n\n .nhsuk-panel__title--m {\n @include nhsuk-font-size(26);\n @include nhsuk-responsive-margin(3, \"bottom\");\n }\n\n .nhsuk-panel__title:last-child {\n margin-bottom: 0;\n }\n\n .nhsuk-panel__body {\n > :last-child {\n margin-bottom: 0;\n }\n\n // Deduct button group vertical gap from margin\n > .nhsuk-button-group:last-child {\n margin-bottom: nhsuk-spacing(-3);\n }\n }\n}\n","@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n\n////\n/// Summary list component\n///\n/// @group components/summary-list\n/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)\n////\n\n@include nhsuk-exports(\"nhsuk/components/summary-list\") {\n .nhsuk-summary-list {\n margin: 0; // Reset default user agent styles\n\n @include nhsuk-font($size: 19);\n @include nhsuk-responsive-margin(6, \"bottom\");\n\n @include nhsuk-media-query($from: tablet) {\n display: table;\n width: 100%;\n table-layout: fixed; // Required to allow us to wrap words that overflow.\n border-collapse: collapse;\n }\n }\n\n .nhsuk-summary-list__row {\n border-bottom: 1px solid $nhsuk-border-colour;\n\n @include nhsuk-media-query($until: tablet) {\n margin-bottom: nhsuk-spacing(3);\n }\n\n @include nhsuk-media-query($from: tablet) {\n display: table-row;\n }\n }\n\n // Remove right padding from the last column in the row\n .nhsuk-summary-list__row:not(.nhsuk-summary-list__row--no-actions) > :last-child {\n padding-right: 0;\n }\n\n // Provide an empty 'cell' for rows that don't have actions – otherwise the\n // bottom border is not drawn for that part of the row in some browsers.\n .nhsuk-summary-list__row--no-actions {\n @include nhsuk-media-query($from: tablet) {\n &::after {\n content: \"\";\n display: table-cell;\n width: 20%;\n }\n }\n }\n\n .nhsuk-summary-list__key,\n .nhsuk-summary-list__value,\n .nhsuk-summary-list__actions {\n margin: 0; // Reset default user agent styles\n\n @include nhsuk-media-query($from: tablet) {\n display: table-cell;\n padding-top: nhsuk-spacing(2);\n padding-right: nhsuk-spacing(4);\n padding-bottom: nhsuk-spacing(2);\n\n // Make sure that any multi-line inline-blocks inside of the summary\n // list (e.g. Tag components) don't cause the text baseline to shift,\n // causing other cells in the row to be misaligned.\n vertical-align: top;\n }\n }\n\n .nhsuk-summary-list__actions {\n margin-top: nhsuk-spacing(-1);\n margin-bottom: nhsuk-spacing(3);\n\n @include nhsuk-media-query($from: tablet) {\n width: 20%;\n text-align: right;\n }\n }\n\n .nhsuk-summary-list__key,\n .nhsuk-summary-list__value {\n // Automatic wrapping for unbreakable text (e.g. URLs)\n @include nhsuk-text-break-word;\n }\n\n .nhsuk-summary-list__key {\n margin-bottom: nhsuk-spacing(1);\n @include nhsuk-font-weight-bold;\n\n @include nhsuk-media-query($from: tablet) {\n width: 30%;\n }\n }\n\n .nhsuk-summary-list__value {\n @include nhsuk-media-query($until: tablet) {\n margin-bottom: nhsuk-spacing(3);\n }\n }\n\n .nhsuk-summary-list__value > p {\n margin-bottom: nhsuk-spacing(2);\n }\n\n .nhsuk-summary-list__value > :last-child {\n margin-bottom: 0;\n }\n\n .nhsuk-summary-list__actions-list {\n display: flex;\n\n flex-wrap: wrap;\n row-gap: 10px;\n\n width: 100%;\n margin: 0; // Reset default user agent styles\n padding: 0; // Reset default user agent styles\n\n list-style: none;\n\n @include nhsuk-media-query($from: tablet) {\n justify-content: right;\n text-align: right;\n }\n }\n\n .nhsuk-summary-list__actions-list-item {\n display: inline-block;\n }\n\n @include nhsuk-media-query($until: tablet) {\n .nhsuk-summary-list__actions-list-item {\n margin-right: nhsuk-spacing(2);\n padding-right: nhsuk-spacing(2);\n border-right: 1px solid $nhsuk-border-colour;\n }\n\n .nhsuk-summary-list__actions-list-item: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-summary-list__actions-list-item {\n margin-bottom: 0;\n margin-left: nhsuk-spacing(2);\n padding-left: nhsuk-spacing(2);\n }\n\n .nhsuk-summary-list__actions-list-item:not(:first-child) {\n border-left: 1px solid $nhsuk-border-colour;\n }\n\n .nhsuk-summary-list__actions-list-item:first-child {\n margin-left: 0;\n padding-left: 0;\n border: 0;\n }\n }\n\n // Large groups of action links may wrap onto multiple lines. Because the link\n // focus styles are applied outside of the link's bounding box, there are\n // situations where the focus style on a link can be overlapped by subsequent\n // links. We don't want this, so let's create a new stacking context on focus\n // so the link always appears to be 'on top'.\n .nhsuk-summary-list__actions-list-item .nhsuk-link:focus {\n isolation: isolate;\n }\n\n // No border on entire summary list\n .nhsuk-summary-list--no-border {\n .nhsuk-summary-list__row {\n border: 0;\n }\n\n // Increase padding by 1px to compensate for 'missing' border\n @include nhsuk-media-query($from: tablet) {\n .nhsuk-summary-list__key,\n .nhsuk-summary-list__value,\n .nhsuk-summary-list__actions {\n padding-bottom: nhsuk-spacing(2) + 1px;\n }\n }\n }\n\n // No border on specific rows\n .nhsuk-summary-list__row--no-border {\n border: 0;\n\n // Increase padding by 1px to compensate for 'missing' border\n @include nhsuk-media-query($from: tablet) {\n .nhsuk-summary-list__key,\n .nhsuk-summary-list__value,\n .nhsuk-summary-list__actions {\n padding-bottom: nhsuk-spacing(2) + 1px;\n }\n }\n }\n\n .nhsuk-card__content {\n .nhsuk-summary-list:last-child .nhsuk-summary-list__row:last-of-type {\n margin-bottom: 0;\n }\n\n .nhsuk-summary-list--no-border:last-child .nhsuk-summary-list__row:last-of-type > :last-child,\n .nhsuk-summary-list:last-child .nhsuk-summary-list__row--no-border:last-of-type > :last-child {\n @include nhsuk-media-query($until: tablet) {\n margin-bottom: 0;\n }\n }\n }\n}\n","@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n\n////\n/// Table component\n///\n/// @group components/table\n////\n\n@include nhsuk-exports(\"nhsuk/components/table\") {\n // Table container is used to ensure the table does not break the container.\n //\n // 1. Margin is removed so there isn't double spacing.\n // 2. XS size not added because it matches the table header, so it'd be bad for hierarchy\n\n .nhsuk-table-container {\n box-sizing: border-box;\n display: block;\n\n width: 100%;\n\n overflow-x: auto;\n\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n\n @include nhsuk-responsive-margin(7, \"bottom\");\n\n .nhsuk-table,\n .nhsuk-table-responsive {\n margin: 0; // [1]\n }\n }\n\n .nhsuk-table,\n .nhsuk-table-responsive {\n box-sizing: border-box;\n width: 100%;\n border-spacing: 0;\n border-collapse: collapse;\n\n @include nhsuk-font($size: 19);\n @include nhsuk-responsive-margin(7, \"bottom\");\n }\n\n .nhsuk-table--reverse,\n .nhsuk-table-responsive--reverse {\n color: $nhsuk-reverse-text-colour;\n\n th,\n td {\n border-color: $nhsuk-reverse-border-colour;\n }\n }\n\n .nhsuk-table__caption {\n display: table-caption;\n margin-bottom: nhsuk-spacing(3) - nhsuk-spacing(2);\n @include nhsuk-font($size: 22, $weight: bold);\n\n @include nhsuk-media-query($from: tablet) {\n margin-bottom: nhsuk-spacing(4) - nhsuk-spacing(3);\n }\n }\n\n .nhsuk-table__caption--xl {\n margin-bottom: nhsuk-spacing(6) - nhsuk-spacing(2);\n @include nhsuk-font-size(48);\n\n @include nhsuk-media-query($from: tablet) {\n margin-bottom: nhsuk-spacing(7) - nhsuk-spacing(3);\n }\n }\n\n .nhsuk-table__caption--l {\n @include nhsuk-font-size(36);\n }\n\n .nhsuk-table__caption--m {\n @include nhsuk-font-size(26);\n }\n\n .nhsuk-table__caption--s {\n @include nhsuk-font-size(22);\n }\n\n // Table panel with tab heading\n //\n // 1. Margin is removed so there isn't double spacing.\n\n // Deprecated, to be removed in v11.0\n .nhsuk-table__panel-with-heading-tab {\n @include nhsuk-panel-with-label($nhsuk-card-background-colour, $nhsuk-text-colour, $nhsuk-border-colour);\n\n .nhsuk-table,\n .nhsuk-table-container,\n .nhsuk-table-responsive {\n margin: 0; // [1]\n }\n }\n\n // Deprecated, to be removed in v11.0\n .nhsuk-table__heading-tab {\n @include nhsuk-heading-label($nhsuk-brand-colour, $nhsuk-reverse-text-colour);\n }\n\n // Responsive table\n //\n // 1. Hide the thead until desktop\n // 2. Removing default screen reader behaviour\n // 3. Assigning role of table-row on desktop to give default screen reader behaviour\n // 4. Using justify content to space out elements in the row on mobile\n // 5. Assigning a minimum width in case of black cell\n // 6. Aligning content to the right on mobile\n // 7. Aligning mobile header to left to split it from the data\n // 8. Hiding mobile specific header from desktop view\n // 9. Adding a display block value due to IE 11 not having full flex support\n\n .nhsuk-table-responsive {\n thead {\n @include nhsuk-media-query($until: desktop) {\n @include nhsuk-visually-hidden; // [1]\n }\n }\n\n .nhsuk-table__body {\n .nhsuk-table-responsive__heading {\n @include nhsuk-font-weight-bold;\n padding-right: nhsuk-spacing(3);\n text-align: left; // [7]\n }\n\n .nhsuk-table__row {\n display: block; // [2]\n margin-bottom: nhsuk-spacing(4);\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n .nhsuk-table__row th,\n .nhsuk-table__row td {\n display: block; // For browsers that don't support flexbox\n display: flex;\n justify-content: space-between; // [4]\n min-width: 1px; // [5]\n }\n\n @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .nhsuk-table__row th,\n .nhsuk-table__row td {\n display: block; // [9]\n }\n }\n\n @include nhsuk-media-query($until: desktop) {\n .nhsuk-table__row th {\n @include nhsuk-font-weight-normal;\n }\n\n .nhsuk-table__row th,\n .nhsuk-table__row td {\n padding-right: 0;\n text-align: right; // [6]\n\n &:last-child {\n border-bottom-width: 3px;\n }\n }\n }\n\n @include nhsuk-media-query($from: desktop) {\n .nhsuk-table-responsive__heading {\n display: none; // [8]\n }\n\n .nhsuk-table__row {\n display: table-row; // [3]\n }\n\n .nhsuk-table__row th {\n text-align: left;\n }\n\n .nhsuk-table__row th,\n .nhsuk-table__row td {\n display: table-cell;\n }\n }\n }\n }\n\n // Numeric tables\n //\n // Right aligns table cells for numeric tables.\n\n .nhsuk-table__header--numeric,\n .nhsuk-table__cell--numeric {\n text-align: right;\n }\n}\n","@forward \"../../core/nhsuk-frontend-properties\";\n@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n\n////\n/// Tabs component\n///\n/// @group components/tabs\n////\n\n@include nhsuk-exports(\"nhsuk/components/tabs\") {\n .nhsuk-tabs {\n @include nhsuk-responsive-margin(1, \"top\");\n @include nhsuk-responsive-margin(6, \"bottom\");\n @include nhsuk-font($size: 19);\n }\n\n .nhsuk-tabs__title {\n margin-bottom: nhsuk-spacing(2);\n\n // Set the size and weight again because this element is a heading and the\n // user agent font size overrides the inherited font size\n @include nhsuk-text-colour;\n @include nhsuk-font($size: 19);\n }\n\n .nhsuk-tabs__list {\n margin: 0;\n padding: 0;\n list-style: none;\n @include nhsuk-responsive-margin(6, \"bottom\");\n }\n\n .nhsuk-tabs__list-item {\n @include nhsuk-shape-dash;\n }\n\n .nhsuk-tabs__tab {\n display: inline-block;\n }\n\n .nhsuk-tabs__panel {\n @include nhsuk-responsive-margin(8, \"bottom\");\n }\n\n // NHS.UK frontend JavaScript enabled\n .nhsuk-frontend-supported {\n @include nhsuk-media-query($from: tablet) {\n .nhsuk-tabs__list {\n margin-bottom: 0;\n border-bottom: 1px solid $nhsuk-border-colour;\n @include nhsuk-clearfix;\n }\n\n .nhsuk-tabs__title {\n display: none;\n }\n\n .nhsuk-tabs__list-item {\n position: relative;\n\n margin-right: nhsuk-spacing(1);\n margin-bottom: 0;\n margin-left: 0;\n padding: nhsuk-spacing(2) nhsuk-spacing(4);\n\n float: left;\n\n background-color: nhsuk-colour(\"grey-4\");\n\n text-align: center;\n\n &::before {\n content: none;\n }\n }\n\n .nhsuk-tabs__list-item--selected {\n $border-width: 1px;\n\n position: relative;\n\n margin-top: nhsuk-spacing(-1);\n\n // Compensation for border (otherwise we get a shift)\n margin-bottom: -$border-width;\n padding-top: (nhsuk-spacing(2) * 1.5) - $border-width;\n padding-right: nhsuk-spacing(4) - $border-width;\n padding-bottom: (nhsuk-spacing(2) * 1.5) + $border-width;\n padding-left: nhsuk-spacing(4) - $border-width;\n\n border: $border-width solid $nhsuk-border-colour;\n border-bottom: 0;\n\n background-color: $nhsuk-card-background-colour;\n\n .nhsuk-tabs__tab {\n text-decoration: none;\n }\n }\n\n .nhsuk-tabs__tab {\n margin-bottom: 0;\n\n @include nhsuk-link-style-text;\n\n &::after {\n content: \"\";\n\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n }\n }\n\n .nhsuk-tabs__panel {\n padding: nhsuk-spacing(6) nhsuk-spacing(4);\n border: 1px solid $nhsuk-border-colour;\n border-top: 0;\n background-color: $nhsuk-card-background-colour;\n @include nhsuk-responsive-margin(0, \"bottom\");\n\n & > :last-child {\n margin-bottom: 0;\n }\n }\n\n .nhsuk-tabs__panel--hidden {\n display: none;\n }\n }\n }\n}\n","@use \"../settings\" as *;\n@use \"../tools/spacing\" as *;\n@use \"../helpers/colour\" as *;\n@use \"functions\" as *;\n\n////\n/// Dash mixin\n///\n/// @group tools\n////\n\n@mixin nhsuk-shape-dash() {\n position: relative;\n padding: 0 0 0 nhsuk-spacing(4);\n\n &::before {\n content: \"\";\n\n display: block;\n\n position: absolute;\n top: nhsuk-em(12, 16);\n left: 0;\n\n width: nhsuk-spacing(3);\n\n border-top: 1px solid nhsuk-colour(\"grey-2\");\n }\n}\n","@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n\n////\n/// Tag component\n///\n/// @group components/tag\n////\n\n@include nhsuk-exports(\"nhsuk/components/tag\") {\n .nhsuk-tag {\n display: inline-block;\n\n padding-top: nhsuk-spacing(1);\n padding-right: nhsuk-spacing(2);\n padding-bottom: nhsuk-spacing(1);\n padding-left: nhsuk-spacing(2);\n\n border: 1px solid nhsuk-shade(nhsuk-colour(\"blue\"), 10%);\n outline: 2px solid transparent;\n outline-offset: -2px;\n\n color: nhsuk-colour(\"white\");\n background-color: nhsuk-shade(nhsuk-colour(\"blue\"), 10%);\n\n text-decoration: none;\n\n @include nhsuk-font($size: 16, $weight: bold, $line-height: 1);\n }\n\n // Colour variants\n\n .nhsuk-tag--white {\n border-color: nhsuk-colour(\"black\");\n color: nhsuk-colour(\"black\");\n background-color: nhsuk-colour(\"white\");\n }\n\n .nhsuk-tag--grey {\n border-color: nhsuk-shade(nhsuk-colour(\"grey-1\"), 30%);\n color: nhsuk-shade(nhsuk-colour(\"grey-1\"), 30%);\n background-color: nhsuk-tint(nhsuk-colour(\"grey-1\"), 80%);\n }\n\n .nhsuk-tag--green {\n border-color: nhsuk-shade(nhsuk-colour(\"green\"), 40%);\n color: nhsuk-shade(nhsuk-colour(\"green\"), 40%);\n background-color: nhsuk-tint(nhsuk-colour(\"green\"), 80%);\n }\n\n .nhsuk-tag--aqua-green {\n border-color: nhsuk-shade(nhsuk-colour(\"aqua-green\"), 50%);\n color: nhsuk-shade(nhsuk-colour(\"aqua-green\"), 50%);\n background-color: nhsuk-tint(nhsuk-colour(\"aqua-green\"), 80%);\n }\n\n .nhsuk-tag--blue {\n border-color: nhsuk-shade(nhsuk-colour(\"blue\"), 30%);\n color: nhsuk-shade(nhsuk-colour(\"blue\"), 30%);\n background-color: nhsuk-tint(nhsuk-colour(\"blue\"), 80%);\n }\n\n .nhsuk-tag--purple {\n border-color: nhsuk-shade(nhsuk-colour(\"purple\"), 30%);\n color: nhsuk-shade(nhsuk-colour(\"purple\"), 30%);\n background-color: nhsuk-tint(nhsuk-colour(\"purple\"), 80%);\n }\n\n .nhsuk-tag--pink {\n border-color: nhsuk-shade(nhsuk-colour(\"pink\"), 50%);\n color: nhsuk-shade(nhsuk-colour(\"pink\"), 50%);\n background-color: nhsuk-tint(nhsuk-colour(\"pink\"), 80%);\n }\n\n .nhsuk-tag--red {\n border-color: nhsuk-shade(nhsuk-colour(\"red\"), 50%);\n color: nhsuk-shade(nhsuk-colour(\"red\"), 50%);\n background-color: nhsuk-tint(nhsuk-colour(\"red\"), 80%);\n }\n\n .nhsuk-tag--orange {\n border-color: nhsuk-shade(nhsuk-colour(\"warm-yellow\"), 70%);\n color: nhsuk-shade(nhsuk-colour(\"warm-yellow\"), 70%);\n background-color: nhsuk-tint(nhsuk-colour(\"warm-yellow\"), 50%);\n }\n\n .nhsuk-tag--yellow {\n border-color: nhsuk-shade(nhsuk-colour(\"yellow\"), 70%);\n color: nhsuk-shade(nhsuk-colour(\"yellow\"), 70%);\n background-color: nhsuk-tint(nhsuk-colour(\"yellow\"), 50%);\n }\n\n // Remove tag border\n\n .nhsuk-tag--no-border {\n border-color: transparent;\n }\n}\n","@use \"sass:color\";\n@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n\n////\n/// Task list component\n///\n/// @group components/task-list\n/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)\n////\n\n// NHS pages have a grey background, so we need a slightly darker colour for the hover\n// This produces 1.1:1 contrast, the same as GOV.UK’s\n$nhsuk-task-list-hover-colour: nhsuk-colour-compatible(color.adjust(nhsuk-colour(\"grey-5\"), $lightness: -6%));\n\n// @deprecated To be removed in v11.0\n$nhsuk-task-list-hover-color: $nhsuk-task-list-hover-colour;\n\n@include nhsuk-exports(\"nhsuk/components/task-list\") {\n .nhsuk-task-list {\n margin-top: 0;\n padding: 0;\n list-style-type: none;\n\n @include nhsuk-font($size: 19);\n @include nhsuk-responsive-margin(5, \"bottom\");\n }\n\n // This uses table layout so that the task name and status always appear side-by-side, with the width of\n // each 'column' being flexible depending upon the length of the task names and statuses.\n //\n // The position is set to 'relative' so than an absolutely-positioned transparent element box\n // can be added within the link so that the whole row can be clickable.\n .nhsuk-task-list__item {\n display: table;\n\n position: relative;\n\n width: 100%;\n margin-bottom: 0;\n padding-top: nhsuk-spacing(2) + 4px;\n padding-bottom: nhsuk-spacing(2) + 4px;\n\n border-bottom: 1px solid $nhsuk-border-colour;\n }\n\n .nhsuk-task-list__item:first-child {\n border-top: 1px solid $nhsuk-border-colour;\n }\n\n // This class is added to the